'admin-21.01.18:处理动画、默认主题优化等'

vue-admin-wonderful-next/src/router/index.ts

@@ -8,7 +8,8 @@ const dynamicRoutes = [
         meta: {
             title: '首页',
             isLink: '',
-            isHide: false
+            isHide: false,
+            icon: 'iconfont icon-shouye'
         },
         children: [{
             path: '/home',
@@ -142,7 +143,7 @@ const dynamicRoutes = [
                 title: '大数据图表',
                 isLink: '',
                 isHide: false,
-                icon: 'iconfont icon-chanyedashujufuwupingtai'
+                icon: 'iconfont icon-ico_shuju'
             }
         },
         {

vue-admin-wonderful-next/src/store/index.ts

@@ -29,6 +29,7 @@ export interface RootStateTypes {
         isShowLogoChange: boolean,
         isBreadcrumb: boolean,
         isTagsview: boolean,
+        isBreadcrumbIcon: boolean,
         isTagsviewIcon: boolean,
         isFooter: boolean,
         isGrayscale: boolean,

vue-admin-wonderful-next/src/theme/element.scss

@@ -779,7 +779,7 @@
 // 第三方图标字体间距/大小设置
 .el-menu-item .iconfont,
 .el-submenu .iconfont {
-  font-size: 18px !important;
+  font-size: 14px !important;
   display: inline-block;
   vertical-align: middle;
   margin-right: 5px;

vue-admin-wonderful-next/src/utils/setIconfont.ts

@@ -1,5 +1,5 @@
 // 字体图标 url
-const urlArr = ["//at.alicdn.com/t/font_2298093_3atw1lxsgot.css"]
+const urlArr = ["//at.alicdn.com/t/font_2298093_0pyjdtieuwp.css"]
 
 // 动态设置字体图标
 export function setIconfont() {

vue-admin-wonderful-next/src/utils/themeConfig.ts

@@ -26,6 +26,7 @@ export default {
     isShowLogoChange: false,
     isBreadcrumb: true,
     isTagsview: true,
+    isBreadcrumbIcon: false,
     isTagsviewIcon: false,
     isFooter: false,
     isGrayscale: false,

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue

@@ -5,8 +5,14 @@
     <el-breadcrumb>
       <transition-group name="breadcrumb" mode="out-in">
         <el-breadcrumb-item v-for="(v,k) in breadcrumbList" :key="v.meta.title">
-          <span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">{{v.meta.title}}</span>
+          <span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
-          <a v-else @click.prevent="onBreadcrumbClick(v)">{{v.meta.title}}</a>
+            <i :class="v.meta.icon" class="layout-navbars-breadcrumb-iconfont"
+              v-if="getThemeConfig.isBreadcrumbIcon"></i>{{v.meta.title}}
+          </span>
+          <a v-else @click.prevent="onBreadcrumbClick(v)">
+            <i :class="v.meta.icon" class="layout-navbars-breadcrumb-iconfont"
+              v-if="getThemeConfig.isBreadcrumbIcon"></i>{{v.meta.title}}
+          </a>
         </el-breadcrumb-item>
       </transition-group>
     </el-breadcrumb>
@@ -31,9 +37,10 @@ export default {
     const route = useRoute();
     const router = useRouter();
     const state = reactive({
-      breadcrumbList: [{ meta: { title: "" } }], // 定义初始值，不能为空数组，否则 v-for 报错
+      breadcrumbList: [{ meta: { title: "", icon: "" } }], // 定义初始值，不能为空数组，否则 v-for 报错
     });
     const getBreadcrumbList = (matched: any) => {
+      console.log(matched);
       state.breadcrumbList = matched;
     };
     const onBreadcrumbClick = (v: object) => {
@@ -81,6 +88,10 @@ export default {
     opacity: 0.7;
     color: var(--bg-topBarColor);
   }
+  .layout-navbars-breadcrumb-iconfont {
+    font-size: 14px;
+    margin-right: 5px;
+  }
   ::v-deep(.el-breadcrumb__separator) {
     opacity: 0.7;
     color: var(--bg-topBarColor);

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue

@@ -170,6 +170,12 @@
             <el-switch v-model="getThemeConfig.isTagsview" @change="setLocalThemeConfig"></el-switch>
           </div>
         </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">开启 Breadcrumb 图标</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="getThemeConfig.isBreadcrumbIcon" @change="setLocalThemeConfig"></el-switch>
+          </div>
+        </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">开启 Tagsview 图标</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">