From eece2e60f850f9d71a080f2f770bc5e2e1ac22dc Mon Sep 17 00:00:00 2001
From: lyt-Top <1105290566@qq.com>
Date: Sun, 17 Jan 2021 21:14:26 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.01.17:=E6=96=B0=E5=A2=9E=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E8=B7=AF=E7=94=B1=E3=80=81=E5=A4=84=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=88=B7=E6=96=B0=E9=80=BB=E8=BE=91=E3=80=81=E5=AD=97?=
 =?UTF-8?q?=E4=BD=93=E5=9B=BE=E6=A0=87=E7=AD=89'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue-admin-wonderful-next/package.json         |   2 +-
 vue-admin-wonderful-next/source.d.ts          |   3 +-
 vue-admin-wonderful-next/src/App.vue          |  46 ++++-
 vue-admin-wonderful-next/src/router/index.ts  | 181 ++++++++++++++++--
 vue-admin-wonderful-next/src/store/index.ts   |   2 +-
 .../src/theme/common/var.scss                 |   4 +-
 .../src/theme/element.scss                    |  11 ++
 .../src/utils/setIconfont.ts                  |   9 +-
 .../src/utils/themeConfig.ts                  |   6 +-
 .../src/utils/wartermark.ts                   |   2 +-
 .../src/views/layout/component/aside.vue      |  75 +++-----
 .../src/views/layout/index.vue                |  26 +--
 .../src/views/layout/lockScreen/index.vue     |  20 +-
 .../views/layout/navBars/breadcrumb/index.vue |   6 +-
 .../layout/navBars/breadcrumb/setings.vue     | 161 +++++++++++++---
 .../layout/navBars/tagsView/tagsView.vue      |  46 +++--
 16 files changed, 445 insertions(+), 155 deletions(-)

diff --git a/vue-admin-wonderful-next/package.json b/vue-admin-wonderful-next/package.json
index d41813a..1534899 100644
--- a/vue-admin-wonderful-next/package.json
+++ b/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",
diff --git a/vue-admin-wonderful-next/source.d.ts b/vue-admin-wonderful-next/source.d.ts
index bbe11d4..f96d72e 100644
--- a/vue-admin-wonderful-next/source.d.ts
+++ b/vue-admin-wonderful-next/source.d.ts
@@ -1,4 +1,5 @@
 declare const React: string;
 declare module '*.json';
 declare module '*.png';
-declare module '*.jpg';
\ No newline at end of file
+declare module '*.jpg';
+declare module '*.scss';
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/App.vue b/vue-admin-wonderful-next/src/App.vue
index 26001aa..7f694f4 100644
--- a/vue-admin-wonderful-next/src/App.vue
+++ b/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,
     };
   },
diff --git a/vue-admin-wonderful-next/src/router/index.ts b/vue-admin-wonderful-next/src/router/index.ts
index 1bc9ba2..ee5d4d0 100644
--- a/vue-admin-wonderful-next/src/router/index.ts
+++ b/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',
-            name: 'docs',
+            path: '/system',
             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) => {
 
 // })
diff --git a/vue-admin-wonderful-next/src/store/index.ts b/vue-admin-wonderful-next/src/store/index.ts
index b8fc4af..b4db66d 100644
--- a/vue-admin-wonderful-next/src/store/index.ts
+++ b/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,
diff --git a/vue-admin-wonderful-next/src/theme/common/var.scss b/vue-admin-wonderful-next/src/theme/common/var.scss
index 46db272..7161097 100644
--- a/vue-admin-wonderful-next/src/theme/common/var.scss
+++ b/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
diff --git a/vue-admin-wonderful-next/src/theme/element.scss b/vue-admin-wonderful-next/src/theme/element.scss
index b2f51fa..293adaf 100644
--- a/vue-admin-wonderful-next/src/theme/element.scss
+++ b/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 标签页
 ------------------------------- */
diff --git a/vue-admin-wonderful-next/src/utils/setIconfont.ts b/vue-admin-wonderful-next/src/utils/setIconfont.ts
index e90234e..80dc705 100644
--- a/vue-admin-wonderful-next/src/utils/setIconfont.ts
+++ b/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> = []) {
-    if (url.length <= 0) return false
-    url.map(v => {
+export function setIconfont() {
+    if (urlArr.length <= 0) return false
+    urlArr.map(v => {
         let link = document.createElement('link')
         link.rel = 'stylesheet'
         link.href = v
diff --git a/vue-admin-wonderful-next/src/utils/themeConfig.ts b/vue-admin-wonderful-next/src/utils/themeConfig.ts
index 8d02f4b..dd15aed 100644
--- a/vue-admin-wonderful-next/src/utils/themeConfig.ts
+++ b/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,
diff --git a/vue-admin-wonderful-next/src/utils/wartermark.ts b/vue-admin-wonderful-next/src/utils/wartermark.ts
index 89b32a8..45cf7e6 100644
--- a/vue-admin-wonderful-next/src/utils/wartermark.ts
+++ b/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`
diff --git a/vue-admin-wonderful-next/src/views/layout/component/aside.vue b/vue-admin-wonderful-next/src/views/layout/component/aside.vue
index af9b1b9..01e8bbd 100644
--- a/vue-admin-wonderful-next/src/views/layout/component/aside.vue
+++ b/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: [
-        {
-          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",
-          },
-        },
-      ],
+      menuList: [],
     });
+    // 设置/过滤路由（非静态路由/是否显示在菜单中）
+    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,
diff --git a/vue-admin-wonderful-next/src/views/layout/index.vue b/vue-admin-wonderful-next/src/views/layout/index.vue
index ddec21b..90c24db 100644
--- a/vue-admin-wonderful-next/src/views/layout/index.vue
+++ b/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 {
-  computed,
-  ref,
-  getCurrentInstance,
-  onBeforeMount,
-  onUnmounted,
-} from "vue";
+import { computed } 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,
     };
   },
diff --git a/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue b/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue
index 871c89d..18f6cf8 100644
--- a/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue
+++ b/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),
     };
   },
diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue
index c8c0670..ef64c37 100644
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue
+++ b/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;
-      return layout === "transverse";
+      let { layout, isClassicSplitMenu } = store.state.themeConfig;
+      return (
+        layout === "transverse" || (isClassicSplitMenu && layout === "classic")
+      );
     });
     return {
       getThemeConfig,
diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
index 46a69e8..b44a1e3 100644
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
+++ b/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-label">自动分割菜单</div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15"
+          :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 = () => {
-      getThemeConfig.value.isDrawer = true;
-    };
-    const closeDrawer = () => {
-      getThemeConfig.value.isDrawer = false;
-    };
+    // 1、全局主题
     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 = () => {
-      // 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
-      getThemeConfig.value.isFixedHeaderChange = false;
-      getThemeConfig.value.isShowLogoChange = false;
+    // 4、界面显示 --> 面包屑 Breadcrumb
+    const onIsBreadcrumbChange = () => {
+      if (getThemeConfig.value.layout === "classic") {
+        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(() => {
-      initSetLayoutChange();
-      proxy.mittBus.on("onMenuClick", () => {
-        onMenuBarHighlightChange();
+    // 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
+    const onDrawerClose = () => {
+      getThemeConfig.value.isFixedHeaderChange = false;
+      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,
     };
   },
 });
diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue b/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
index 6e7e47b..d63cc52 100644
--- a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
+++ b/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)}"
-          @contextmenu.prevent="onContextmenu(v,$event)" @click="onTagsClick(v,k)"
-          :ref="el => { if (el) tagsRefs[k] = el }">
+        <li v-for="(v,k) in tagsViewList" :key="k" class="layout-navbars-tagsview-ul-li"
+          :class="{'is-active':isActive(v.path)}" @contextmenu.prevent="onContextmenu(v,$event)"
+          @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: [
-        { 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" },
-      ],
+      tagsViewList: [],
     });
     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) {
-        state.tagsRefsIndex = state.arr2.findIndex(
+      if (state.tagsViewList.length > 0) {
+        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%;