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

2021-01-17 21:14:26 +08:00 · 2021-01-17 21:14:26 +08:00 · eece2e60f8
commit eece2e60f8
parent 5a57e37578
16 changed files with 445 additions and 155 deletions
--- 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",
--- 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';
+declare module '*.jpg';
+declare module '*.scss';
--- 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,
    };
  },
--- 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) => {

 // })
--- 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,
--- 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
--- 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 标签页
 ------------------------------- */
--- 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
--- 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,
--- 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`
--- 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,
--- 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,
    };
  },
--- 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),
    };
  },
--- 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,
--- 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,
    };
  },
 });
--- 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%;