'admin-21.01.17:新增动态路由、处理页面刷新逻辑、字体图标等'

vue-admin-wonderful-next/package.json

@@ -6,7 +6,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "element-plus": "^v1.0.1-beta.24",
+    "element-plus": "^1.0.1-beta.27",
     "mitt": "^2.1.0",
     "sortablejs": "^1.10.2",
     "vue": "^3.0.5",

vue-admin-wonderful-next/source.d.ts

@@ -1,4 +1,5 @@
 declare const React: string;
 declare module '*.json';
 declare module '*.png';
-declare module '*.jpg';
+declare module '*.jpg';
+declare module '*.scss';

vue-admin-wonderful-next/src/App.vue

@@ -1,27 +1,63 @@
 <template>
-  <router-view />
+  <router-view v-show="getThemeConfig.lockScreenTime !== 0" />
   <LockScreen v-if="getThemeConfig.isLockScreen" />
+  <Setings ref="setingsRef" v-show="getThemeConfig.lockScreenTime !== 0" />
 </template>
 
 <script lang="ts">
-import { onBeforeMount, computed } from "vue";
+import {
+  computed,
+  ref,
+  getCurrentInstance,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  nextTick,
+} from "vue";
 import { useStore } from "/@/store/index.ts";
+import { getLocal } from "/@/utils/storage.ts";
 import { setIconfont } from "/@/utils/setIconfont.ts";
 import LockScreen from "/@/views/layout/lockScreen/index.vue";
+import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
 export default {
   name: "app",
-  components: { LockScreen },
+  components: { LockScreen, Setings },
   setup() {
+    const { proxy } = getCurrentInstance();
+    const setingsRef = ref();
     const store = useStore();
     // 获取布局配置信息
     const getThemeConfig = computed(() => {
       return store.state.themeConfig;
     });
-    // 设置批量第三方 icon 图标
+    // 布局配置弹窗打开
+    const openSetingsDrawer = () => {
+      setingsRef.value.openDrawer();
+    };
+    // 设置初始化，防止刷新时恢复默认
     onBeforeMount(() => {
-      setIconfont(["//at.alicdn.com/t/font_2298093_0fmefamqzj4a.css"]);
+      // 设置批量第三方 icon 图标
+      setIconfont();
+    });
+    onMounted(() => {
+      nextTick(() => {
+        // 监听布局配置弹窗点击打开
+        proxy.mittBus.on("openSetingsDrawer", () => {
+          openSetingsDrawer();
+        });
+        // 获取缓存中的布局配置
+        if (getLocal("themeConfig")) {
+          store.dispatch("setThemeConfig", getLocal("themeConfig"));
+          document.documentElement.style.cssText = getLocal("themeConfigStyle");
+        }
+      });
+    });
+    // 页面销毁时，关闭监听布局配置
+    onUnmounted(() => {
+      proxy.mittBus.off("openSetingsDrawer", () => {});
     });
     return {
+      setingsRef,
       getThemeConfig,
     };
   },

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

@@ -1,58 +1,196 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
 
-const staticRoutes: Array<RouteRecordRaw> = [
+const dynamicRoutes = [
     {
         path: '/',
-        name: 'home',
         component: () => import('/@/views/layout/index.vue'),
         redirect: '/home',
         meta: {
-            title: '首页'
+            title: '首页',
+            isLink: '',
+            isHide: false
         },
         children: [{
             path: '/home',
-            name: 'home',
             component: () => import('/@/views/home/index.vue'),
             meta: {
-                title: '首页'
+                title: '首页',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-shouye'
             }
         },
         {
-            path: '/docs',
+            path: '/system',
-            name: 'docs',
             component: () => import('/@/views/docs/index.vue'),
+            redirect: '/system/menu',
             meta: {
-                title: '文档'
+                title: '系统设置',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-xitongshezhi'
+            },
+            children: [
+                {
+                    path: '/system/menu',
+                    component: () => import('/@/views/docs/index.vue'),
+                    meta: {
+                        title: '菜单管理',
+                        isLink: '',
+                        isHide: false,
+                        icon: 'iconfont icon-caidan'
+                    }
+                },
+                {
+                    path: '/system/user',
+                    component: () => import('/@/views/docs/index.vue'),
+                    meta: {
+                        title: '用户管理',
+                        isLink: '',
+                        isHide: false,
+                        icon: 'iconfont icon-icon-'
+                    }
+                }
+            ]
+        },
+        {
+            path: '/limits',
+            component: () => import('/@/views/docs/index.vue'),
+            redirect: '/limits/frontEnd',
+            meta: {
+                title: '权限管理',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-quanxian'
+            },
+            children: [
+                {
+                    path: '/limits/frontEnd',
+                    component: () => import('/@/views/docs/index.vue'),
+                    redirect: '/limits/frontEnd/page',
+                    meta: {
+                        title: '前端控制',
+                        isLink: '',
+                        isHide: false
+                    },
+                    children: [
+                        {
+                            path: '/limits/frontEnd/page',
+                            component: () => import('/@/views/docs/index.vue'),
+                            meta: {
+                                title: '页面权限',
+                                isLink: '',
+                                isHide: false
+                            }
+                        },
+                        {
+                            path: '/limits/frontEnd/btn',
+                            component: () => import('/@/views/docs/index.vue'),
+                            meta: {
+                                title: '按钮权限',
+                                isLink: '',
+                                isHide: false
+                            }
+                        }
+                    ]
+                },
+                {
+                    path: '/limits/backEnd',
+                    component: () => import('/@/views/docs/index.vue'),
+                    meta: {
+                        title: '后端控制',
+                        isLink: '',
+                        isHide: false
+                    }
+                }
+            ]
+        },
+        {
+            path: '/fun',
+            component: () => import('/@/views/docs copy 1/index.vue'),
+            meta: {
+                title: '功能',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-crew_feature'
+            }
+        },
+        {
+            path: '/pages',
+            component: () => import('/@/views/docs copy 1/index.vue'),
+            meta: {
+                title: '页面',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-fuzhiyemian'
+            }
+        },
+        {
+            path: '/components',
+            component: () => import('/@/views/docs copy 1/index.vue'),
+            meta: {
+                title: '组件',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-zujian'
+            }
+        },
+        {
+            path: '/chart',
+            component: () => import('/@/views/docs copy 1/index.vue'),
+            meta: {
+                title: '大数据图表',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-chanyedashujufuwupingtai'
             }
         },
         {
             path: '/docs1',
-            name: 'docs1',
             component: () => import('/@/views/docs copy 1/index.vue'),
             meta: {
-                title: '文档1'
+                title: '个人中心',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-gerenzhongxin'
             }
         },
         {
             path: '/docs2',
-            name: 'docs2',
             component: () => import('/@/views/docs copy 2/index.vue'),
             meta: {
-                title: '文档2'
+                title: '工具类集合',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-gongju'
             }
         },
         {
             path: '/docs3',
-            name: 'docs3',
             component: () => import('/@/views/docs copy 3/index.vue'),
             meta: {
-                title: '文档3'
+                title: '外链',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-caozuo-wailian'
+            }
+        },
+        {
+            path: '/iframe',
+            component: () => import('/@/views/docs copy 3/index.vue'),
+            meta: {
+                title: '内嵌 iframe',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-neiqianshujuchucun'
             }
         }]
-    },
+    }
+]
+
+const staticRoutes: Array<RouteRecordRaw> = [
     {
         path: '/login',
-        name: 'login',
         component: () => import('/@/views/login/index.vue'),
         meta: {
             title: '登陆'
@@ -60,7 +198,6 @@ const staticRoutes: Array<RouteRecordRaw> = [
     },
     {
         path: '/404',
-        name: '404',
         component: () => import('/@/views/error/404.vue'),
         meta: {
             title: '找不到此页面'
@@ -68,7 +205,6 @@ const staticRoutes: Array<RouteRecordRaw> = [
     },
     {
         path: '/401',
-        name: '401',
         component: () => import('/@/views/error/401.vue'),
         meta: {
             title: '没有权限'
@@ -76,7 +212,10 @@ const staticRoutes: Array<RouteRecordRaw> = [
     },
     {
         path: '/:pathMatch(.*)',
-        redirect: '/404'
+        redirect: '/404',
+        meta: {
+            title: '页面找不到重定向'
+        }
     }
 ]
 
@@ -85,6 +224,10 @@ const router = createRouter({
     routes: staticRoutes
 })
 
+dynamicRoutes.map((route) => {
+    router.addRoute(route as RouteRecordRaw);
+});
+
 // router.afterEach((to, from) => {
 
 // })

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

@@ -22,7 +22,7 @@ export interface RootStateTypes {
         isUniqueOpened: boolean,
         isFixedHeader: boolean,
         isFixedHeaderChange: boolean,
-        isCollapse1: boolean,
+        isClassicSplitMenu: boolean,
         isLockScreen: boolean,
         lockScreenTime: number,
         isShowLogo: boolean,

vue-admin-wonderful-next/src/theme/common/var.scss

@@ -59,10 +59,10 @@ $--color-danger-light-7: mix($--color-whites, $--color-danger, 70%) !default;
 $--color-danger-light-8: mix($--color-whites, $--color-danger, 80%) !default;
 $--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default;
 $--bg-topBar: #ffffff;
-$--bg-menuBar: #29384d;
+$--bg-menuBar: #545c64;
 $--bg-columnsMenuBar: #4276ab;
 $--bg-topBarColor: #606266;
-$--bg-menuBarColor: #e6e6e6;
+$--bg-menuBarColor: #c4c4c4;
 $--bg-columnsMenuBarColor: #e6e6e6;
 
 /* 赋值给:root

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

@@ -758,6 +758,17 @@
     @extend .el-active-extend;
   }
 }
+// 菜单收起时且是a链接
+.el-popper.is-dark a {
+  color: #ffffff !important;
+  text-decoration: none;
+}
+// 第三方图标字体间距/大小设置
+.el-menu-item .iconfont,
+.el-submenu .iconfont {
+  font-size: 14px !important;
+  padding-right: 8px;
+}
 
 /* Tabs 标签页
 ------------------------------- */

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

@@ -1,7 +1,10 @@
+// 字体图标 url
+const urlArr = ["//at.alicdn.com/t/font_2298093_3atw1lxsgot.css"]
+
 // 动态设置字体图标
-export function setIconfont(url: Array<string> = []) {
+export function setIconfont() {
-    if (url.length <= 0) return false
+    if (urlArr.length <= 0) return false
-    url.map(v => {
+    urlArr.map(v => {
         let link = document.createElement('link')
         link.rel = 'stylesheet'
         link.href = v

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

@@ -7,10 +7,10 @@ export default {
     warning: "#e6a23c",
     danger: "#f56c6c",
     topBar: "#ffffff",
-    menuBar: "#29384d",
+    menuBar: "#545c64",
     columnsMenuBar: '#4276ab',
     topBarColor: "#606266",
-    menuBarColor: "#e6e6e6",
+    menuBarColor: "#c4c4c4",
     columnsMenuBarColor: '#e6e6e6',
     isTopBarColorGradual: false,
     isMenuBarColorGradual: false,
@@ -19,7 +19,7 @@ export default {
     isUniqueOpened: false,
     isFixedHeader: false,
     isFixedHeaderChange: false,
-    isCollapse1: false,
+    isClassicSplitMenu: false,
     isLockScreen: false,
     lockScreenTime: 30,
     isShowLogo: false,

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

@@ -18,7 +18,7 @@ const setWatermark = (str: any) => {
     div.style.top = "35px"
     div.style.left = "0px"
     div.style.position = "fixed"
-    div.style.zIndex = "100000"
+    div.style.zIndex = "10000000"
     div.style.width = document.documentElement.clientWidth + "px"
     div.style.height = document.documentElement.clientHeight + "px"
     div.style.background = `url(${can.toDataURL("image/png")}) left top repeat`

vue-admin-wonderful-next/src/views/layout/component/aside.vue

@@ -15,7 +15,9 @@ import {
   watch,
   getCurrentInstance,
   ref,
+  onBeforeMount,
 } from "vue";
+import { useRouter } from "vue-router";
 import { useStore } from "/@/store/index.ts";
 import Logo from "/@/views/layout/logo/index.vue";
 import Vertical from "/@/views/layout/navMenu/vertical.vue";
@@ -24,56 +26,31 @@ export default {
   components: { Logo, Vertical },
   setup() {
     const { proxy } = getCurrentInstance();
+    const router = useRouter();
     const store = useStore();
     const state = reactive({
-      menuList: [
+      menuList: [],
-        {
-          path: "/home",
-          meta: {
-            title: "首页",
-            icon: "el-icon-s-home",
-          },
-          children: [
-            {
-              path: "/home",
-              meta: {
-                title: "微软",
-                icon: "el-icon-s-flag",
-              },
-            },
-            {
-              path: "/docs",
-              meta: {
-                title: "文档",
-                icon: "el-icon-s-flag",
-              },
-            },
-            {
-              path: "/docs1",
-              meta: {
-                title: "文档1",
-                icon: "el-icon-s-flag",
-              },
-            },
-          ],
-        },
-        {
-          path: "/docs2",
-          meta: {
-            title: "文档2",
-            icon: "el-icon-s-management",
-            isLink: "https://www.ele.me",
-          },
-        },
-        {
-          path: "/docs3",
-          meta: {
-            title: "文档3",
-            icon: "el-icon-s-management",
-          },
-        },
-      ],
     });
+    // 设置/过滤路由（非静态路由/是否显示在菜单中）
+    const setFilterRoutes = () => {
+      const routesList = router.getRoutes();
+      routesList.map((route) => {
+        if (route.path === "/") {
+          state.menuList = filterRoutesFun(route.children);
+          console.log(filterRoutesFun(route.children));
+        }
+      });
+    };
+    // 路由过滤递归函数
+    const filterRoutesFun = (arr: Array<object>) => {
+      return arr
+        .filter((item) => !item.meta.isHide)
+        .map((item) => {
+          item = Object.assign({}, item);
+          if (item.children) item.children = filterRoutesFun(item.children);
+          return item;
+        });
+    };
     // 设置菜单展开/收起时的宽度
     const setCollapseWidth = computed(() => {
       let { layout, isCollapse, menuBar } = store.state.themeConfig;
@@ -115,6 +92,10 @@ export default {
         proxy.$refs.layoutAsideScrollbarRef.update();
       }
     });
+    // 初始化
+    onBeforeMount(() => {
+      setFilterRoutes();
+    });
     return {
       setCollapseWidth,
       setShowLogo,

vue-admin-wonderful-next/src/views/layout/index.vue

@@ -3,46 +3,24 @@
   <Classic v-else-if="getThemeConfig.layout === 'classic'" />
   <Transverse v-else-if="getThemeConfig.layout === 'transverse'" />
   <Columns v-else-if="getThemeConfig.layout === 'columns'" />
-  <Setings ref="setingsRef" />
 </template>
 
 <script lang="ts">
-import {
+import { computed } from "vue";
-  computed,
-  ref,
-  getCurrentInstance,
-  onBeforeMount,
-  onUnmounted,
-} from "vue";
 import { useStore } from "/@/store/index.ts";
 import Defaults from "/@/views/layout/main/defaults.vue";
 import Classic from "/@/views/layout/main/classic.vue";
 import Transverse from "/@/views/layout/main/transverse.vue";
 import Columns from "/@/views/layout/main/columns.vue";
-import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
 export default {
   name: "layout",
-  components: { Defaults, Classic, Transverse, Columns, Setings },
+  components: { Defaults, Classic, Transverse, Columns },
   setup() {
-    const { proxy } = getCurrentInstance();
-    const setingsRef = ref();
     const store = useStore();
     const getThemeConfig = computed(() => {
       return store.state.themeConfig;
     });
-    const openSetingsDrawer = () => {
-      setingsRef.value.openDrawer();
-    };
-    onBeforeMount(() => {
-      proxy.mittBus.on("openSetingsDrawer", () => {
-        openSetingsDrawer();
-      });
-    });
-    onUnmounted(() => {
-      proxy.mittBus.off("openSetingsDrawer", () => {});
-    });
     return {
-      setingsRef,
       getThemeConfig,
     };
   },

vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue

@@ -20,9 +20,10 @@
             </div>
             <div class="layout-lock-screen-login-box-name">Administrator</div>
             <div class="layout-lock-screen-login-box-value">
-              <el-input placeholder="请输入密码" ref="layoutLockScreenInputRef">
+              <el-input placeholder="请输入密码" ref="layoutLockScreenInputRef" v-model="lockScreenPassword"
+                @keyup.enter.native.stop="onLockScreenSubmit()">
                 <template #append>
-                  <el-button icon="el-icon-right"></el-button>
+                  <el-button icon="el-icon-right" @click="onLockScreenSubmit"></el-button>
                 </template>
               </el-input>
             </div>
@@ -42,6 +43,7 @@
 import { nextTick, onMounted, reactive, toRefs, ref, onUnmounted } from "vue";
 import { useStore } from "/@/store/index.ts";
 import { formatDate } from "/@/utils/formatTime.ts";
+import { setLocal } from "/@/utils/storage.ts";
 export default {
   name: "layoutLockScreen",
   setup() {
@@ -62,6 +64,7 @@ export default {
       setIntervalTime: null,
       isShowLockScreen: false,
       isShowLockScreenIntervalTime: null,
+      lockScreenPassword: "",
     });
     // 鼠标按下
     const onDown = (down) => {
@@ -137,6 +140,7 @@ export default {
         state.isShowLockScreenIntervalTime = setInterval(() => {
           if (store.state.themeConfig.lockScreenTime <= 0) {
             state.isShowLockScreen = true;
+            setLocalThemeConfig();
             return false;
           }
           store.state.themeConfig.lockScreenTime--;
@@ -145,6 +149,17 @@ export default {
         clearInterval(state.isShowLockScreenIntervalTime);
       }
     };
+    // 存储布局配置
+    const setLocalThemeConfig = () => {
+      store.state.themeConfig.isDrawer = false;
+      setLocal("themeConfig", store.state.themeConfig);
+    };
+    // 密码输入点击事件
+    const onLockScreenSubmit = () => {
+      store.state.themeConfig.isLockScreen = false;
+      store.state.themeConfig.lockScreenTime = 30;
+      setLocalThemeConfig();
+    };
     onMounted(() => {
       initGetElement();
       initSetTime();
@@ -159,6 +174,7 @@ export default {
       onDown,
       onMove,
       onEnd,
+      onLockScreenSubmit,
       ...toRefs(state),
     };
   },

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

@@ -79,8 +79,10 @@ export default {
       );
     });
     const isLayoutTransverse = computed(() => {
-      let { layout } = store.state.themeConfig;
+      let { layout, isClassicSplitMenu } = store.state.themeConfig;
-      return layout === "transverse";
+      return (
+        layout === "transverse" || (isClassicSplitMenu && layout === "classic")
+      );
     });
     return {
       getThemeConfig,

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

@@ -117,7 +117,7 @@
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">菜单手风琴</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isUniqueOpened"></el-switch>
+            <el-switch v-model="getThemeConfig.isUniqueOpened" @change="setLocalThemeConfig"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -126,23 +126,26 @@
             <el-switch v-model="getThemeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
           </div>
         </div>
-        <div class="layout-breadcrumb-seting-bar-flex mt15">
+        <div class="layout-breadcrumb-seting-bar-flex mt15"
-          <div class="layout-breadcrumb-seting-bar-flex-label">自动分割菜单</div>
+          :style="{opacity:getThemeConfig.layout !== 'classic' ? 0.5 : 1}">
+          <div class="layout-breadcrumb-seting-bar-flex-label">经典布局分割菜单</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
+            <el-switch v-model="getThemeConfig.isClassicSplitMenu" :disabled="getThemeConfig.layout !== 'classic'"
+              @change="onClassicSplitMenuChange">
+            </el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">开启锁屏</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isLockScreen"></el-switch>
+            <el-switch v-model="getThemeConfig.isLockScreen" @change="setLocalThemeConfig"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt11">
           <div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏(s/秒)</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
             <el-input-number v-model="getThemeConfig.lockScreenTime" controls-position="right" :min="0" :max="9999"
-              size="mini" style="width:90px;">
+              @change="setLocalThemeConfig" size="mini" style="width:90px;">
             </el-input-number>
           </div>
         </div>
@@ -158,25 +161,25 @@
         <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.isBreadcrumb"></el-switch>
+            <el-switch v-model="getThemeConfig.isBreadcrumb" @change="onIsBreadcrumbChange"></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">
-            <el-switch v-model="getThemeConfig.isTagsview"></el-switch>
+            <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">开启 Tagsview 图标</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isTagsviewIcon"></el-switch>
+            <el-switch v-model="getThemeConfig.isTagsviewIcon" @change="setLocalThemeConfig"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">开启 Footer</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isFooter"></el-switch>
+            <el-switch v-model="getThemeConfig.isFooter" @change="setLocalThemeConfig"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -210,7 +213,8 @@
         <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">
-            <el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="mini" style="width:90px;">
+            <el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="mini" style="width:90px;"
+              @change="setLocalThemeConfig">
               <el-option label="风格1" value="tagsStyleOne"></el-option>
               <el-option label="风格2" value="tagsStyleTwo"></el-option>
               <el-option label="风格3" value="tagsStyleThree"></el-option>
@@ -221,7 +225,8 @@
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width:90px;">
+            <el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width:90px;"
+              @change="setLocalThemeConfig">
               <el-option label="slideRight" value="slideRight"></el-option>
               <el-option label="slideLeft" value="slideLeft"></el-option>
               <el-option label="opacitys" value="opacitys"></el-option>
@@ -231,7 +236,8 @@
         <div class="layout-breadcrumb-seting-bar-flex mt15 mb27">
           <div class="layout-breadcrumb-seting-bar-flex-label">分栏高亮风格</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-select v-model="getThemeConfig.columnsAsideStyle" placeholder="请选择" size="mini" style="width:90px;">
+            <el-select v-model="getThemeConfig.columnsAsideStyle" placeholder="请选择" size="mini" style="width:90px;"
+              @change="setLocalThemeConfig">
               <el-option label="圆角" value="columnsRound"></el-option>
               <el-option label="卡片" value="columnsCard"></el-option>
             </el-select>
@@ -326,8 +332,8 @@
 <script lang="ts">
 import {
   nextTick,
-  onBeforeMount,
   onUnmounted,
+  onMounted,
   getCurrentInstance,
   defineComponent,
   computed,
@@ -336,6 +342,7 @@ import { useStore } from "/@/store/index.ts";
 import { getLightColor } from "/@/utils/theme.ts";
 import Watermark from "/@/utils/wartermark.ts";
 import { verifyAndSpace } from "/@/utils/toolsValidate.js";
+import { setLocal, getLocal } from "/@/utils/storage.ts";
 export default defineComponent({
   name: "layoutBreadcrumbSeting",
   setup() {
@@ -344,15 +351,12 @@ export default defineComponent({
     const getThemeConfig = computed(() => {
       return store.state.themeConfig;
     });
-    const openDrawer = () => {
+    // 1、全局主题
-      getThemeConfig.value.isDrawer = true;
-    };
-    const closeDrawer = () => {
-      getThemeConfig.value.isDrawer = false;
-    };
     const onColorPickerChange = (color: string) => {
       setPropertyFun(`--color-${color}`, getThemeConfig.value[color]);
+      setDispatchThemeConfig();
     };
+    // 1、全局主题设置函数
     const setPropertyFun = (color: string, targetVal: any) => {
       document.documentElement.style.setProperty(color, targetVal);
       for (let i = 1; i <= 9; i++) {
@@ -362,6 +366,7 @@ export default defineComponent({
         );
       }
     };
+    // 2、菜单 / 顶栏
     const onBgColorPickerChange = (bg: string) => {
       document.documentElement.style.setProperty(
         `--bg-${bg}`,
@@ -369,7 +374,9 @@ export default defineComponent({
       );
       onTopBarGradualChange();
       onMenuBarGradualChange();
+      setDispatchThemeConfig();
     };
+    // 2、菜单 / 顶栏 --> 顶栏背景渐变
     const onTopBarGradualChange = () => {
       setGraduaFun(
         ".layout-navbars-breadcrumb-index",
@@ -377,6 +384,7 @@ export default defineComponent({
         getThemeConfig.value.topBar
       );
     };
+    // 2、菜单 / 顶栏 --> 菜单背景渐变
     const onMenuBarGradualChange = () => {
       setGraduaFun(
         ".layout-container .el-aside",
@@ -384,6 +392,7 @@ export default defineComponent({
         getThemeConfig.value.menuBar
       );
     };
+    // 2、菜单 / 顶栏 --> 背景渐变函数
     const setGraduaFun = (el: string, bool: boolean, color: string) => {
       nextTick(() => {
         let els = document.querySelector(el);
@@ -397,8 +406,16 @@ export default defineComponent({
             )})`
           );
         else els.setAttribute("style", `background-image:${color}`);
+        setLocalThemeConfig();
+        const elNavbars = document.querySelector(
+          ".layout-navbars-breadcrumb-index"
+        );
+        const elAside = document.querySelector(".layout-container .el-aside");
+        if (elNavbars) setLocal("navbarsBgStyle", elNavbars.style.cssText);
+        if (elAside) setLocal("asideBgStyle", elAside.style.cssText);
       });
     };
+    // 2、菜单 / 顶栏 --> 菜单字体背景高亮
     const onMenuBarHighlightChange = () => {
       nextTick(() => {
         setTimeout(() => {
@@ -407,28 +424,44 @@ export default defineComponent({
           if (getThemeConfig.value.isMenuBarColorHighlight)
             els.setAttribute("class", `${attr} add-is-active`);
           else els.setAttribute("class", `${attr}`);
+          setLocalThemeConfig();
+          setLocal("menuBarHighlightClass", els.getAttribute("class"));
         }, 0);
       });
     };
+    // 3、界面设置 --> 菜单水平折叠
     const onThemeConfigChange = () => {
       onMenuBarHighlightChange();
+      setDispatchThemeConfig();
     };
+    // 3、界面设置 --> 固定 Header
     const onIsFixedHeaderChange = () => {
       getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value
         .isFixedHeader
         ? false
         : true;
+      setLocalThemeConfig();
     };
+    // 3、界面设置 --> 经典布局分割菜单
+    const onClassicSplitMenuChange = () => {
+      getThemeConfig.value.isBreadcrumb = false;
+      setLocalThemeConfig();
+    };
+    // 4、界面显示 --> 侧边栏 Logo
     const onIsShowLogoChange = () => {
       getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo
         ? false
         : true;
+      setLocalThemeConfig();
     };
-    const onDrawerClose = () => {
+    // 4、界面显示 --> 面包屑 Breadcrumb
-      // 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
+    const onIsBreadcrumbChange = () => {
-      getThemeConfig.value.isFixedHeaderChange = false;
+      if (getThemeConfig.value.layout === "classic") {
-      getThemeConfig.value.isShowLogoChange = false;
+        getThemeConfig.value.isClassicSplitMenu = false;
+      }
+      setLocalThemeConfig();
     };
+    // 4、界面显示 --> 灰色模式/色弱模式
     const onAddFilterChange = (attr: string) => {
       if (attr === "grayscale") {
         if (getThemeConfig.value.isGrayscale)
@@ -444,29 +477,38 @@ export default defineComponent({
       document
         .getElementById("app")
         .setAttribute("style", `filter: ${cssAttr}`);
+      setLocalThemeConfig();
+      setLocal("appFilterStyle", document.querySelector("#app").style.cssText);
     };
+    // 4、界面显示 --> 开启水印
     const onWartermarkChange = () => {
       getThemeConfig.value.isWartermark
         ? Watermark.set(getThemeConfig.value.wartermarkText)
         : Watermark.del();
+      setLocalThemeConfig();
     };
+    // 4、界面显示 --> 水印文案
     const onWartermarkTextInput = (val: string) => {
       getThemeConfig.value.wartermarkText = verifyAndSpace(val);
       if (getThemeConfig.value.wartermarkText === "") return false;
       if (getThemeConfig.value.isWartermark)
         Watermark.set(getThemeConfig.value.wartermarkText);
+      setLocalThemeConfig();
     };
+    // 5、布局切换
     const onSetLayout = (layout: string) => {
       if (getThemeConfig.value.layout === layout) return false;
       getThemeConfig.value.layout = layout;
       getThemeConfig.value.isDrawer = false;
       initSetLayoutChange();
+      onMenuBarHighlightChange();
     };
     // 设置布局切换，重置主题样式
     const initSetLayoutChange = () => {
       if (getThemeConfig.value.layout === "classic") {
         getThemeConfig.value.isShowLogo = true;
         getThemeConfig.value.isBreadcrumb = false;
+        getThemeConfig.value.isClassicSplitMenu = false;
         getThemeConfig.value.menuBar = "#FFFFFF";
         getThemeConfig.value.menuBarColor = "#606266";
         getThemeConfig.value.topBar = "#ffffff";
@@ -476,6 +518,7 @@ export default defineComponent({
         getThemeConfig.value.isShowLogo = true;
         getThemeConfig.value.isBreadcrumb = false;
         getThemeConfig.value.isTagsview = false;
+        getThemeConfig.value.isClassicSplitMenu = false;
         getThemeConfig.value.menuBarColor = "#FFFFFF";
         getThemeConfig.value.topBar = "#545c64";
         getThemeConfig.value.topBarColor = "#FFFFFF";
@@ -484,6 +527,7 @@ export default defineComponent({
         getThemeConfig.value.isShowLogo = true;
         getThemeConfig.value.isBreadcrumb = true;
         getThemeConfig.value.isTagsview = true;
+        getThemeConfig.value.isClassicSplitMenu = false;
         getThemeConfig.value.menuBar = "#FFFFFF";
         getThemeConfig.value.menuBarColor = "#606266";
         getThemeConfig.value.topBar = "#ffffff";
@@ -493,8 +537,9 @@ export default defineComponent({
         getThemeConfig.value.isShowLogo = false;
         getThemeConfig.value.isBreadcrumb = true;
         getThemeConfig.value.isTagsview = true;
+        getThemeConfig.value.isClassicSplitMenu = false;
         getThemeConfig.value.menuBar = "#545c64";
-        getThemeConfig.value.menuBarColor = "#FFFFFF";
+        getThemeConfig.value.menuBarColor = "#c4c4c4";
         getThemeConfig.value.topBar = "#FFFFFF";
         getThemeConfig.value.topBarColor = "#606266";
         initLayoutChangeFun();
@@ -507,10 +552,64 @@ export default defineComponent({
       onBgColorPickerChange("topBar");
       onBgColorPickerChange("topBarColor");
     };
-    onBeforeMount(() => {
+    // 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
-      initSetLayoutChange();
+    const onDrawerClose = () => {
-      proxy.mittBus.on("onMenuClick", () => {
+      getThemeConfig.value.isFixedHeaderChange = false;
-        onMenuBarHighlightChange();
+      getThemeConfig.value.isShowLogoChange = false;
+      getThemeConfig.value.isDrawer = false;
+      setLocalThemeConfig();
+    };
+    // 布局配置弹窗打开
+    const openDrawer = () => {
+      getThemeConfig.value.isDrawer = true;
+    };
+    // 触发 store 布局配置更新
+    const setDispatchThemeConfig = () => {
+      setLocalThemeConfig();
+      setLocalThemeConfigStyle();
+    };
+    // 存储布局配置
+    const setLocalThemeConfig = () => {
+      setLocal("themeConfig", getThemeConfig.value);
+    };
+    // 存储布局配置全局主题样式（html根标签）
+    const setLocalThemeConfigStyle = () => {
+      setLocal("themeConfigStyle", document.documentElement.style.cssText);
+    };
+    onMounted(() => {
+      nextTick(() => {
+        proxy.mittBus.on("onMenuClick", () => {
+          onMenuBarHighlightChange();
+        });
+        // 刷新页面时，设置了值，直接取缓存中的值进行初始化
+        setTimeout(() => {
+          // 顶栏背景渐变
+          if (getLocal("navbarsBgStyle")) {
+            document.querySelector(
+              ".layout-navbars-breadcrumb-index"
+            ).style.cssText = getLocal("navbarsBgStyle");
+          }
+          // 菜单背景渐变
+          if (getLocal("asideBgStyle")) {
+            document.querySelector(
+              ".layout-container .el-aside"
+            ).style.cssText = getLocal("asideBgStyle");
+          }
+          // 菜单字体背景高亮
+          if (getLocal("menuBarHighlightClass")) {
+            let els = document.querySelector(".el-menu-item.is-active");
+            if (!els) return false;
+            els.setAttribute("class", getLocal("menuBarHighlightClass"));
+          }
+          // 灰色模式/色弱模式
+          if (getLocal("appFilterStyle")) {
+            document.querySelector("#app").style.cssText = getLocal(
+              "appFilterStyle"
+            );
+          }
+          // 开启水印
+          onWartermarkChange();
+        }, 300);
       });
     });
     onUnmounted(() => {
@@ -518,7 +617,6 @@ export default defineComponent({
     });
     return {
       openDrawer,
-      closeDrawer,
       onColorPickerChange,
       onBgColorPickerChange,
       onTopBarGradualChange,
@@ -533,6 +631,9 @@ export default defineComponent({
       onWartermarkChange,
       onWartermarkTextInput,
       onSetLayout,
+      setLocalThemeConfig,
+      onClassicSplitMenuChange,
+      onIsBreadcrumbChange,
     };
   },
 });

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

@@ -3,13 +3,13 @@
     v-show="getThemeConfig.isTagsview">
     <Scroll ref="scrollRef">
       <ul class="layout-navbars-tagsview-ul" :class="setTagsStyle">
-        <li v-for="(v,k) in arr2" :key="k" class="layout-navbars-tagsview-ul-li" :class="{'is-active':isActive(v.path)}"
+        <li v-for="(v,k) in tagsViewList" :key="k" class="layout-navbars-tagsview-ul-li"
-          @contextmenu.prevent="onContextmenu(v,$event)" @click="onTagsClick(v,k)"
+          :class="{'is-active':isActive(v.path)}" @contextmenu.prevent="onContextmenu(v,$event)"
-          :ref="el => { if (el) tagsRefs[k] = el }">
+          @click="onTagsClick(v,k)" :ref="el => { if (el) tagsRefs[k] = el }">
           <i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont" v-if="isActive(v.path)"></i>
-          <i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.icon"
+          <i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.meta.icon"
             v-if="!isActive(v.path) && getThemeConfig.isTagsviewIcon"></i>
-          <span>{{v.name}}</span>
+          <span>{{v.meta.title}}</span>
           <template v-if="isActive(v.path)">
             <i class="el-icon-refresh-right ml5"></i>
             <i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-active"></i>
@@ -31,6 +31,7 @@ import {
   ref,
   nextTick,
   onBeforeUpdate,
+  onBeforeMount,
 } from "vue";
 import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
 import { useStore } from "/@/store/index.ts";
@@ -54,13 +55,7 @@ export default {
         y: "",
       },
       tagsRefsIndex: 0,
-      arr2: [
+      tagsViewList: [],
-        { id: 11, name: "微软", path: "/home", icon: "el-icon-star-off" },
-        { id: 12, name: "文档", path: "/docs", icon: "el-icon-camera" },
-        { id: 13, name: "文档1", path: "/docs1", icon: "el-icon-truck" },
-        { id: 15, name: "文档2", path: "/docs2", icon: "el-icon-tableware" },
-        { id: 1, name: "文档3", path: "/docs3", icon: "el-icon-basketball" },
-      ],
     });
     const setTagsStyle = computed(() => {
       let { tagsStyle } = store.state.themeConfig;
@@ -73,6 +68,25 @@ export default {
     const getThemeConfig = computed(() => {
       return store.state.themeConfig;
     });
+    // 设置/过滤路由（非静态路由/是否显示在菜单中）
+    const setFilterRoutes = () => {
+      const routesList = router.getRoutes();
+      routesList.map((route) => {
+        if (route.path === "/") {
+          state.tagsViewList = filterRoutesFun(route.children);
+        }
+      });
+    };
+    // 路由过滤递归函数
+    const filterRoutesFun = (arr: Array<object>) => {
+      return arr
+        .filter((item) => !item.meta.isHide)
+        .map((item) => {
+          item = Object.assign({}, item);
+          if (item.children) item.children = filterRoutesFun(item.children);
+          return item;
+        });
+    };
     const initSortable = () => {
       const el = document.querySelector(".layout-navbars-tagsview-ul");
       const sortable = Sortable.create(el, { animation: 300 });
@@ -96,8 +110,8 @@ export default {
       });
     };
     const getTagsRefsIndex = (path: string) => {
-      if (state.arr2.length > 0) {
+      if (state.tagsViewList.length > 0) {
-        state.tagsRefsIndex = state.arr2.findIndex(
+        state.tagsRefsIndex = state.tagsViewList.findIndex(
           (item) => item.path === path
         );
       }
@@ -105,6 +119,9 @@ export default {
     onBeforeUpdate(() => {
       tagsRefs.value = [];
     });
+    onBeforeMount(() => {
+      setFilterRoutes();
+    });
     onMounted(() => {
       initSortable();
       scrollRef.value.setScrollLeft(tagsRefs);
@@ -166,6 +183,7 @@ export default {
       &-iconfont {
         position: relative;
         left: -5px;
+        font-size: 14px;
       }
       &-icon {
         border-radius: 100%;