新增分栏激活颜色变量

新增布局配置主题色或背景色时联动配置字体和背景颜色
修复图标选择未确认也修改表单值
优化打包发布不出现参考样例

src/components/my-select-icon/icon-select.vue

@@ -135,8 +135,8 @@ const onIconChange = (type: string) => {
 // 获取当前点击的 icon 图标
 const onColClick = (v: string) => {
   state.fontIconPrefix = v
-  emits('get', state.fontIconPrefix)
-  emits('update:modelValue', state.fontIconPrefix)
+  // emits('get', state.fontIconPrefix)
+  // emits('update:modelValue', state.fontIconPrefix)
 }
 
 // 页面加载时

src/layout/component/aside.vue

@@ -39,7 +39,7 @@ const state = reactive<AsideState>({
 const setCollapseStyle = computed(() => {
   const { layout, isCollapse, menuBar } = themeConfig.value
   const asideBrTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff']
-  const asideBrColor = asideBrTheme.includes(menuBar) ? 'layout-el-aside-br-color' : ''
+  const asideBrColor = !isCollapse && asideBrTheme.includes(menuBar) ? 'layout-el-aside-br-color' : ''
   // 判断是否是手机端
   if (state.clientWidth <= 1000) {
     if (isCollapse) {
@@ -57,8 +57,8 @@ const setCollapseStyle = computed(() => {
     }
   } else {
     if (layout === 'columns') {
-      // 分栏布局，菜单收起时宽度给 1px
-      if (isCollapse) return [asideBrColor, 'layout-aside-pc-1']
+      // 分栏布局，菜单收起时宽度给 0px
+      if (isCollapse) return [asideBrColor, 'layout-aside-pc-0']
       else return [asideBrColor, 'layout-aside-pc-220']
     } else {
       // 其它布局给 64px

src/layout/component/columnsAside.vue

@@ -209,7 +209,7 @@ watch(
   ul {
     position: relative;
     .layout-columns-active {
-      color: var(--next-bg-columnsMenuBarColor) !important;
+      color: var(--next-color-columnsMenuBarActiveColor) !important;
       transition: 0.3s ease-in-out;
     }
     .layout-columns-hover {
@@ -285,6 +285,7 @@ watch(
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
   &-medium-img {
     width: 20px;
   }

src/layout/navBars/breadcrumb/setings.vue

@@ -30,7 +30,12 @@
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoTopBar') }}</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="getThemeConfig.topBar" :predefine="predefineBgColors" size="default" @change="onBgColorPickerChange('topBar')">
+            <el-color-picker
+              v-model="getThemeConfig.topBar"
+              :predefine="predefineTopBarBgColors"
+              size="default"
+              @change="onBgColorPickerChange('topBar')"
+            >
             </el-color-picker>
           </div>
         </div>
@@ -60,7 +65,7 @@
           <div class="layout-breadcrumb-seting-bar-flex-value">
             <el-color-picker
               v-model="getThemeConfig.menuBar"
-              :predefine="predefineBgColors"
+              :predefine="predefineMenuBarBgColors"
               size="default"
               @change="onBgColorPickerChange('menuBar')"
             >
@@ -107,7 +112,7 @@
           <div class="layout-breadcrumb-seting-bar-flex-value">
             <el-color-picker
               v-model="getThemeConfig.columnsMenuBar"
-              :predefine="predefineBgColors"
+              :predefine="predefineColumnsMenuBarBgColors"
               size="default"
               @change="onBgColorPickerChange('columnsMenuBar')"
               :disabled="getThemeConfig.layout !== 'columns'"
@@ -315,9 +320,9 @@
           <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveTagsStyle') }}</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
             <el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="default" style="width: 90px" @change="setLocalThemeConfig">
-              <el-option label="风格1" value="tags-style-one"></el-option>
-              <el-option label="风格4" value="tags-style-four"></el-option>
-              <el-option label="风格5" value="tags-style-five"></el-option>
+              <el-option label="卡片" value="tags-style-one"></el-option>
+              <el-option label="简约" value="tags-style-four"></el-option>
+              <el-option label="圆滑" value="tags-style-five"></el-option>
             </el-select>
           </div>
         </div>
@@ -332,9 +337,9 @@
               style="width: 90px"
               @change="setLocalThemeConfig"
             >
-              <el-option label="slide-right" value="slide-right"></el-option>
-              <el-option label="slide-left" value="slide-left"></el-option>
-              <el-option label="opacitys" value="opacitys"></el-option>
+              <el-option label="右滑动" value="slide-right"></el-option>
+              <el-option label="左滑动" value="slide-left"></el-option>
+              <el-option label="淡入淡出" value="opacitys"></el-option>
             </el-select>
           </div>
         </div>
@@ -481,23 +486,28 @@ const predefinePrimaryColors = ref([
   '#6954f0', //紫色
   '#41b584', //绿色
 ])
-// 预定义背景颜色
-const predefineBgColors = ref([
+// 预定义顶栏背景颜色
+const predefineTopBarBgColors = ref([
   '#ffffff', //白色
-  '#282c34', //黑色
+  '#323233', //黑色
 ])
-// 预定义高亮背景颜色
-const predefineActiveBgColors = ref([
-  'rgba(0, 0, 0, 0.2)', //灰黑色
-  'rgba(253, 237, 235, 1)', //浅红色
-  'rgba(235, 245, 255, 1)', //浅蓝色
-  'rgba(240, 237, 253, 1)', //浅紫色
-  'rgba(236, 247, 242, 1)', //浅绿色
+// 预定义菜单背景颜色
+const predefineMenuBarBgColors = ref([
+  '#ffffff', //白色
+  '#252526', //黑色
 ])
+// 预定义分栏背景颜色
+const predefineColumnsMenuBarBgColors = ref([
+  '#ffffff', //白色
+  '#333333', //黑色
+])
+
+const grayWhiteColor = '#eaeaea' //灰白色
+const grayBlackColor = '#606266' //灰黑色
 // 预定义字体颜色
 const predefineFontColors = ref([
-  '#eaeaea', //灰白色
-  '#606266', //灰黑色
+  grayWhiteColor, //灰白色
+  grayBlackColor, //灰黑色
 ])
 
 const { locale } = useI18n()
@@ -509,6 +519,16 @@ const state = reactive({
   isMobile: false,
 })
 
+const GrayWhiteBgColor = 'rgba(0, 0, 0, 0.2)' //浅灰黑色
+// 预定义高亮背景颜色
+const predefineActiveBgColors = ref([
+  GrayWhiteBgColor, //浅灰黑色
+  getLightColor(predefinePrimaryColors.value[0], 9 / 10), //浅红色
+  getLightColor(predefinePrimaryColors.value[1], 9 / 10), //浅蓝色
+  getLightColor(predefinePrimaryColors.value[2], 9 / 10), //浅紫色
+  getLightColor(predefinePrimaryColors.value[3], 9 / 10), //浅绿色
+])
+
 // 获取布局配置信息
 const getThemeConfig = computed(() => {
   return themeConfig.value
@@ -524,10 +544,13 @@ const onColorPickerChange = () => {
     document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(getThemeConfig.value.primary, i / 10)}`)
   }
   setDispatchThemeConfig()
+
+  onBgColorPickerChange('menuBar')
 }
 // 2、菜单 / 顶栏
 const onBgColorPickerChange = (bg: string) => {
-  document.documentElement.style.setProperty(`--next-bg-${bg}`, themeConfig.value[bg])
+  const bgColor = themeConfig.value[bg]
+  document.documentElement.style.setProperty(`--next-bg-${bg}`, bgColor)
   if (bg === 'menuBar') {
     document.documentElement.style.setProperty(`--next-bg-menuBar-light-1`, getLightColor(getThemeConfig.value.menuBar, 0.05))
   }
@@ -535,6 +558,31 @@ const onBgColorPickerChange = (bg: string) => {
   onMenuBarGradualChange()
   onColumnsMenuBarGradualChange()
   setDispatchThemeConfig()
+
+  if (bg === 'topBar' || bg === 'menuBar' || bg === 'columnsMenuBar') {
+    const whiteTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff']
+    const colorName = bg + 'Color'
+    if (whiteTheme.includes(bgColor)) {
+      if (bg === 'menuBar') {
+        const activeColorName = bg + 'ActiveColor'
+        getThemeConfig.value[activeColorName] = getLightColor(getThemeConfig.value.primary, 9 / 10)
+        onBgColorPickerChange(activeColorName)
+      }
+      getThemeConfig.value[colorName] = grayBlackColor
+    } else {
+      if (bg === 'menuBar') {
+        const activeColorName = bg + 'ActiveColor'
+        getThemeConfig.value[activeColorName] = GrayWhiteBgColor
+        onBgColorPickerChange(activeColorName)
+      }
+      getThemeConfig.value[colorName] = grayWhiteColor
+    }
+    onBgColorPickerChange(colorName)
+  }
+}
+// 设置激活颜色
+const onActiveColorPickerChange = (name: string) => {
+  document.documentElement.style.setProperty(`--next-color-${name}`, themeConfig.value[name])
 }
 // 2、菜单 / 顶栏 --> 顶栏背景渐变
 const onTopBarGradualChange = () => {
@@ -574,7 +622,7 @@ const onIsFixedHeaderChange = () => {
 }
 // 3、界面设置 --> 经典布局分割菜单
 const onClassicSplitMenuChange = () => {
-  getThemeConfig.value.isBreadcrumb = false
+  // getThemeConfig.value.isBreadcrumb = false
   setLocalThemeConfig()
   mittBus.emit('getBreadcrumbIndexSetFilterRoutes')
 }
@@ -649,6 +697,7 @@ const initLayoutChangeFun = () => {
   onBgColorPickerChange('topBarColor')
   onBgColorPickerChange('columnsMenuBar')
   onBgColorPickerChange('columnsMenuBarColor')
+  onActiveColorPickerChange('columnsMenuBarActiveColor')
 }
 // 关闭弹窗时，初始化变量。变量用于处理 layoutScrollbarRef.value.update() 更新滚动条高度
 const onDrawerClose = () => {

src/router/route.ts

@@ -46,216 +46,203 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
     meta: {
       isKeepAlive: true,
     },
-    children: [
-      {
-        path: '/example',
-        name: 'example',
-        component: () => import('/@/layout/routerView/parent.vue'),
-        redirect: '/example/home',
-        meta: {
-          title: '参考样例',
-          isLink: '',
-          isHide: false,
-          isKeepAlive: true,
-          isAffix: false,
-          isIframe: false,
-          roles: ['admin'],
-          icon: 'ele-Menu',
-        },
-        children: [
+    children: import.meta.env.PROD
+      ? []
+      : [
           {
-            path: '/example/home',
-            name: 'example/home',
-            component: () => import('/@/views/example/home/index.vue'),
-            meta: {
-              title: 'message.router.home',
-              isLink: '',
-              isHide: false,
-              isKeepAlive: true,
-              isAffix: false,
-              isIframe: false,
-              roles: ['admin', 'common'],
-              icon: 'iconfont icon-shouye',
-            },
-          },
-          {
-            path: '/example/system',
-            name: 'example/system',
+            path: '/example',
+            name: 'example',
             component: () => import('/@/layout/routerView/parent.vue'),
-            redirect: '/system/menu',
+            redirect: '/example/home',
             meta: {
-              title: 'message.router.system',
+              title: '参考样例',
               isLink: '',
               isHide: false,
               isKeepAlive: true,
               isAffix: false,
               isIframe: false,
               roles: ['admin'],
-              icon: 'iconfont icon-xitongshezhi',
+              icon: 'ele-Menu',
             },
             children: [
               {
-                path: '/example/system/menu',
-                name: 'example/systemMenu',
-                component: () => import('/@/views/example/system/menu/index.vue'),
-                meta: {
-                  title: 'message.router.systemMenu',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin'],
-                  icon: 'iconfont icon-caidan',
-                },
-              },
-              {
-                path: '/example/system/role',
-                name: 'example/systemRole',
-                component: () => import('/@/views/example/system/role/index.vue'),
-                meta: {
-                  title: 'message.router.systemRole',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin'],
-                  icon: 'ele-ColdDrink',
-                },
-              },
-              {
-                path: '/example/system/user',
-                name: 'example/systemUser',
-                component: () => import('/@/views/example/system/user/index.vue'),
-                meta: {
-                  title: 'message.router.systemUser',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin'],
-                  icon: 'iconfont icon-icon-',
-                },
-              },
-              {
-                path: '/example/system/dept',
-                name: 'example/systemDept',
-                component: () => import('/@/views/example/system/dept/index.vue'),
-                meta: {
-                  title: 'message.router.systemDept',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin'],
-                  icon: 'ele-OfficeBuilding',
-                },
-              },
-              {
-                path: '/example/system/dic',
-                name: 'example/systemDic',
-                component: () => import('/@/views/example/system/dic/index.vue'),
+                path: '/example/home',
+                name: 'example/home',
+                component: () => import('/@/views/example/home/index.vue'),
                 meta: {
-                  title: 'message.router.systemDic',
+                  title: 'message.router.home',
                   isLink: '',
                   isHide: false,
                   isKeepAlive: true,
                   isAffix: false,
                   isIframe: false,
-                  roles: ['admin'],
-                  icon: 'ele-SetUp',
+                  roles: ['admin', 'common'],
+                  icon: 'iconfont icon-shouye',
                 },
               },
-            ],
-          },
-          {
-            path: '/example/limits',
-            name: 'example/limits',
-            component: () => import('/@/layout/routerView/parent.vue'),
-            redirect: '/limits/frontEnd',
-            meta: {
-              title: 'message.router.limits',
-              isLink: '',
-              isHide: false,
-              isKeepAlive: true,
-              isAffix: false,
-              isIframe: false,
-              roles: ['admin', 'common'],
-              icon: 'iconfont icon-quanxian',
-            },
-            children: [
               {
-                path: '/example/limits/frontEnd',
-                name: 'example/limitsFrontEnd',
+                path: '/example/system',
+                name: 'example/system',
                 component: () => import('/@/layout/routerView/parent.vue'),
-                redirect: '/limits/frontEnd/page',
+                redirect: '/system/menu',
                 meta: {
-                  title: 'message.router.limitsFrontEnd',
+                  title: 'message.router.system',
                   isLink: '',
                   isHide: false,
                   isKeepAlive: true,
                   isAffix: false,
                   isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: '',
+                  roles: ['admin'],
+                  icon: 'iconfont icon-xitongshezhi',
                 },
                 children: [
                   {
-                    path: '/example/limits/frontEnd/page',
-                    name: 'example/limitsFrontEndPage',
-                    component: () => import('/@/views/example/limits/frontEnd/page/index.vue'),
+                    path: '/example/system/menu',
+                    name: 'example/systemMenu',
+                    component: () => import('/@/views/example/system/menu/index.vue'),
                     meta: {
-                      title: 'message.router.limitsFrontEndPage',
+                      title: 'message.router.systemMenu',
                       isLink: '',
                       isHide: false,
                       isKeepAlive: true,
                       isAffix: false,
                       isIframe: false,
-                      roles: ['admin', 'common'],
-                      icon: '',
+                      roles: ['admin'],
+                      icon: 'iconfont icon-caidan',
                     },
                   },
                   {
-                    path: '/example/limits/frontEnd/btn',
-                    name: 'example/limitsFrontEndBtn',
-                    component: () => import('/@/views/example/limits/frontEnd/btn/index.vue'),
+                    path: '/example/system/role',
+                    name: 'example/systemRole',
+                    component: () => import('/@/views/example/system/role/index.vue'),
                     meta: {
-                      title: 'message.router.limitsFrontEndBtn',
+                      title: 'message.router.systemRole',
                       isLink: '',
                       isHide: false,
                       isKeepAlive: true,
                       isAffix: false,
                       isIframe: false,
-                      roles: ['admin', 'common'],
-                      icon: '',
+                      roles: ['admin'],
+                      icon: 'ele-ColdDrink',
+                    },
+                  },
+                  {
+                    path: '/example/system/user',
+                    name: 'example/systemUser',
+                    component: () => import('/@/views/example/system/user/index.vue'),
+                    meta: {
+                      title: 'message.router.systemUser',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin'],
+                      icon: 'iconfont icon-icon-',
+                    },
+                  },
+                  {
+                    path: '/example/system/dept',
+                    name: 'example/systemDept',
+                    component: () => import('/@/views/example/system/dept/index.vue'),
+                    meta: {
+                      title: 'message.router.systemDept',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin'],
+                      icon: 'ele-OfficeBuilding',
+                    },
+                  },
+                  {
+                    path: '/example/system/dic',
+                    name: 'example/systemDic',
+                    component: () => import('/@/views/example/system/dic/index.vue'),
+                    meta: {
+                      title: 'message.router.systemDic',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin'],
+                      icon: 'ele-SetUp',
                     },
                   },
                 ],
               },
               {
-                path: '/example/limits/backEnd',
-                name: 'example/limitsBackEnd',
+                path: '/example/limits',
+                name: 'example/limits',
                 component: () => import('/@/layout/routerView/parent.vue'),
+                redirect: '/limits/frontEnd',
                 meta: {
-                  title: 'message.router.limitsBackEnd',
+                  title: 'message.router.limits',
                   isLink: '',
                   isHide: false,
                   isKeepAlive: true,
                   isAffix: false,
                   isIframe: false,
                   roles: ['admin', 'common'],
-                  icon: '',
+                  icon: 'iconfont icon-quanxian',
                 },
                 children: [
                   {
-                    path: '/example/limits/backEnd/page',
-                    name: 'example/limitsBackEndEndPage',
-                    component: () => import('/@/views/example/limits/backEnd/page/index.vue'),
+                    path: '/example/limits/frontEnd',
+                    name: 'example/limitsFrontEnd',
+                    component: () => import('/@/layout/routerView/parent.vue'),
+                    redirect: '/limits/frontEnd/page',
+                    meta: {
+                      title: 'message.router.limitsFrontEnd',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: '',
+                    },
+                    children: [
+                      {
+                        path: '/example/limits/frontEnd/page',
+                        name: 'example/limitsFrontEndPage',
+                        component: () => import('/@/views/example/limits/frontEnd/page/index.vue'),
+                        meta: {
+                          title: 'message.router.limitsFrontEndPage',
+                          isLink: '',
+                          isHide: false,
+                          isKeepAlive: true,
+                          isAffix: false,
+                          isIframe: false,
+                          roles: ['admin', 'common'],
+                          icon: '',
+                        },
+                      },
+                      {
+                        path: '/example/limits/frontEnd/btn',
+                        name: 'example/limitsFrontEndBtn',
+                        component: () => import('/@/views/example/limits/frontEnd/btn/index.vue'),
+                        meta: {
+                          title: 'message.router.limitsFrontEndBtn',
+                          isLink: '',
+                          isHide: false,
+                          isKeepAlive: true,
+                          isAffix: false,
+                          isIframe: false,
+                          roles: ['admin', 'common'],
+                          icon: '',
+                        },
+                      },
+                    ],
+                  },
+                  {
+                    path: '/example/limits/backEnd',
+                    name: 'example/limitsBackEnd',
+                    component: () => import('/@/layout/routerView/parent.vue'),
                     meta: {
-                      title: 'message.router.limitsBackEndEndPage',
+                      title: 'message.router.limitsBackEnd',
                       isLink: '',
                       isHide: false,
                       isKeepAlive: true,
@@ -264,34 +251,33 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
                       roles: ['admin', 'common'],
                       icon: '',
                     },
+                    children: [
+                      {
+                        path: '/example/limits/backEnd/page',
+                        name: 'example/limitsBackEndEndPage',
+                        component: () => import('/@/views/example/limits/backEnd/page/index.vue'),
+                        meta: {
+                          title: 'message.router.limitsBackEndEndPage',
+                          isLink: '',
+                          isHide: false,
+                          isKeepAlive: true,
+                          isAffix: false,
+                          isIframe: false,
+                          roles: ['admin', 'common'],
+                          icon: '',
+                        },
+                      },
+                    ],
                   },
                 ],
               },
-            ],
-          },
-          {
-            path: '/example/menu',
-            name: 'example/menu',
-            component: () => import('/@/layout/routerView/parent.vue'),
-            redirect: '/example/menu/menu1',
-            meta: {
-              title: 'message.router.menu',
-              isLink: '',
-              isHide: false,
-              isKeepAlive: true,
-              isAffix: false,
-              isIframe: false,
-              roles: ['admin', 'common'],
-              icon: 'iconfont icon-caidan',
-            },
-            children: [
               {
-                path: '/example/menu/menu1',
-                name: 'example/menu1',
+                path: '/example/menu',
+                name: 'example/menu',
                 component: () => import('/@/layout/routerView/parent.vue'),
-                redirect: '/example/menu/menu1/menu11',
+                redirect: '/example/menu/menu1',
                 meta: {
-                  title: 'message.router.menu1',
+                  title: 'message.router.menu',
                   isLink: '',
                   isHide: false,
                   isKeepAlive: true,
@@ -302,27 +288,12 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
                 },
                 children: [
                   {
-                    path: '/example/menu/menu1/menu11',
-                    name: 'example/menu11',
-                    component: () => import('/@/views/example/menu/menu1/menu11/index.vue'),
-                    meta: {
-                      title: 'message.router.menu11',
-                      isLink: '',
-                      isHide: false,
-                      isKeepAlive: true,
-                      isAffix: false,
-                      isIframe: false,
-                      roles: ['admin', 'common'],
-                      icon: 'iconfont icon-caidan',
-                    },
-                  },
-                  {
-                    path: '/example/menu/menu1/menu12',
-                    name: 'example/menu12',
+                    path: '/example/menu/menu1',
+                    name: 'example/menu1',
                     component: () => import('/@/layout/routerView/parent.vue'),
-                    redirect: '/example/menu/menu1/menu12/menu121',
+                    redirect: '/example/menu/menu1/menu11',
                     meta: {
-                      title: 'message.router.menu12',
+                      title: 'message.router.menu1',
                       isLink: '',
                       isHide: false,
                       isKeepAlive: true,
@@ -333,11 +304,27 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
                     },
                     children: [
                       {
-                        path: '/example/menu/menu1/menu12/menu121',
-                        name: 'example/menu121',
-                        component: () => import('/@/views/example/menu/menu1/menu12/menu121/index.vue'),
+                        path: '/example/menu/menu1/menu11',
+                        name: 'example/menu11',
+                        component: () => import('/@/views/example/menu/menu1/menu11/index.vue'),
+                        meta: {
+                          title: 'message.router.menu11',
+                          isLink: '',
+                          isHide: false,
+                          isKeepAlive: true,
+                          isAffix: false,
+                          isIframe: false,
+                          roles: ['admin', 'common'],
+                          icon: 'iconfont icon-caidan',
+                        },
+                      },
+                      {
+                        path: '/example/menu/menu1/menu12',
+                        name: 'example/menu12',
+                        component: () => import('/@/layout/routerView/parent.vue'),
+                        redirect: '/example/menu/menu1/menu12/menu121',
                         meta: {
-                          title: 'message.router.menu121',
+                          title: 'message.router.menu12',
                           isLink: '',
                           isHide: false,
                           isKeepAlive: true,
@@ -346,13 +333,45 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
                           roles: ['admin', 'common'],
                           icon: 'iconfont icon-caidan',
                         },
+                        children: [
+                          {
+                            path: '/example/menu/menu1/menu12/menu121',
+                            name: 'example/menu121',
+                            component: () => import('/@/views/example/menu/menu1/menu12/menu121/index.vue'),
+                            meta: {
+                              title: 'message.router.menu121',
+                              isLink: '',
+                              isHide: false,
+                              isKeepAlive: true,
+                              isAffix: false,
+                              isIframe: false,
+                              roles: ['admin', 'common'],
+                              icon: 'iconfont icon-caidan',
+                            },
+                          },
+                          {
+                            path: '/example/menu/menu1/menu12/menu122',
+                            name: 'example/menu122',
+                            component: () => import('/@/views/example/menu/menu1/menu12/menu122/index.vue'),
+                            meta: {
+                              title: 'message.router.menu122',
+                              isLink: '',
+                              isHide: false,
+                              isKeepAlive: true,
+                              isAffix: false,
+                              isIframe: false,
+                              roles: ['admin', 'common'],
+                              icon: 'iconfont icon-caidan',
+                            },
+                          },
+                        ],
                       },
                       {
-                        path: '/example/menu/menu1/menu12/menu122',
-                        name: 'example/menu122',
-                        component: () => import('/@/views/example/menu/menu1/menu12/menu122/index.vue'),
+                        path: '/example/menu/menu1/menu13',
+                        name: 'example/menu13',
+                        component: () => import('/@/views/example/menu/menu1/menu13/index.vue'),
                         meta: {
-                          title: 'message.router.menu122',
+                          title: 'message.router.menu13',
                           isLink: '',
                           isHide: false,
                           isKeepAlive: true,
@@ -365,11 +384,11 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
                     ],
                   },
                   {
-                    path: '/example/menu/menu1/menu13',
-                    name: 'example/menu13',
-                    component: () => import('/@/views/example/menu/menu1/menu13/index.vue'),
+                    path: '/example/menu/menu2',
+                    name: 'example/menu2',
+                    component: () => import('/@/views/example/menu/menu2/index.vue'),
                     meta: {
-                      title: 'message.router.menu13',
+                      title: 'message.router.menu2',
                       isLink: '',
                       isHide: false,
                       isKeepAlive: true,
@@ -382,233 +401,233 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
                 ],
               },
               {
-                path: '/example/menu/menu2',
-                name: 'example/menu2',
-                component: () => import('/@/views/example/menu/menu2/index.vue'),
-                meta: {
-                  title: 'message.router.menu2',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-caidan',
-                },
-              },
-            ],
-          },
-          {
-            path: '/example/fun',
-            name: 'example/funIndex',
-            component: () => import('/@/layout/routerView/parent.vue'),
-            redirect: '/fun/tagsView',
-            meta: {
-              title: 'message.router.funIndex',
-              isLink: '',
-              isHide: false,
-              isKeepAlive: true,
-              isAffix: false,
-              isIframe: false,
-              roles: ['admin', 'common'],
-              icon: 'iconfont icon-crew_feature',
-            },
-            children: [
-              {
-                path: '/example/fun/tagsView',
-                name: 'example/funTagsView',
-                component: () => import('/@/views/example/fun/tagsView/index.vue'),
-                meta: {
-                  title: 'message.router.funTagsView',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'ele-Pointer',
-                },
-              },
-              {
-                path: '/example/fun/countup',
-                name: 'example/funCountup',
-                component: () => import('/@/views/example/fun/countup/index.vue'),
-                meta: {
-                  title: 'message.router.funCountup',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'ele-Odometer',
-                },
-              },
-              {
-                path: '/example/fun/wangEditor',
-                name: 'example/funWangEditor',
-                component: () => import('/@/views/example/fun/wangEditor/index.vue'),
-                meta: {
-                  title: 'message.router.funWangEditor',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-fuwenbenkuang',
-                },
-              },
-              {
-                path: '/example/fun/cropper',
-                name: 'example/funCropper',
-                component: () => import('/@/views/example/fun/cropper/index.vue'),
-                meta: {
-                  title: 'message.router.funCropper',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-caijian',
-                },
-              },
-              {
-                path: '/example/fun/qrcode',
-                name: 'example/funQrcode',
-                component: () => import('/@/views/example/fun/qrcode/index.vue'),
-                meta: {
-                  title: 'message.router.funQrcode',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-ico',
-                },
-              },
-              {
-                path: '/example/fun/echartsMap',
-                name: 'example/funEchartsMap',
-                component: () => import('/@/views/example/fun/echartsMap/index.vue'),
+                path: '/example/fun',
+                name: 'example/funIndex',
+                component: () => import('/@/layout/routerView/parent.vue'),
+                redirect: '/fun/tagsView',
                 meta: {
-                  title: 'message.router.funEchartsMap',
+                  title: 'message.router.funIndex',
                   isLink: '',
                   isHide: false,
                   isKeepAlive: true,
                   isAffix: false,
                   isIframe: false,
                   roles: ['admin', 'common'],
-                  icon: 'iconfont icon-ditu',
-                },
-              },
-              {
-                path: '/example/fun/printJs',
-                name: 'example/funPrintJs',
-                component: () => import('/@/views/example/fun/printJs/index.vue'),
-                meta: {
-                  title: 'message.router.funPrintJs',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'ele-Printer',
-                },
-              },
-              {
-                path: '/example/fun/clipboard',
-                name: 'example/funClipboard',
-                component: () => import('/@/views/example/fun/clipboard/index.vue'),
-                meta: {
-                  title: 'message.router.funClipboard',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'ele-DocumentCopy',
-                },
-              },
-              {
-                path: '/example/fun/gridLayout',
-                name: 'example/funGridLayout',
-                component: () => import('/@/views/example/fun/gridLayout/index.vue'),
-                meta: {
-                  title: 'message.router.funGridLayout',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-tuodong',
-                },
-              },
-              {
-                path: '/example/fun/splitpanes',
-                name: 'example/funSplitpanes',
-                component: () => import('/@/views/example/fun/splitpanes/index.vue'),
-                meta: {
-                  title: 'message.router.funSplitpanes',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon--chaifenlie',
+                  icon: 'iconfont icon-crew_feature',
                 },
+                children: [
+                  {
+                    path: '/example/fun/tagsView',
+                    name: 'example/funTagsView',
+                    component: () => import('/@/views/example/fun/tagsView/index.vue'),
+                    meta: {
+                      title: 'message.router.funTagsView',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'ele-Pointer',
+                    },
+                  },
+                  {
+                    path: '/example/fun/countup',
+                    name: 'example/funCountup',
+                    component: () => import('/@/views/example/fun/countup/index.vue'),
+                    meta: {
+                      title: 'message.router.funCountup',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'ele-Odometer',
+                    },
+                  },
+                  {
+                    path: '/example/fun/wangEditor',
+                    name: 'example/funWangEditor',
+                    component: () => import('/@/views/example/fun/wangEditor/index.vue'),
+                    meta: {
+                      title: 'message.router.funWangEditor',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-fuwenbenkuang',
+                    },
+                  },
+                  {
+                    path: '/example/fun/cropper',
+                    name: 'example/funCropper',
+                    component: () => import('/@/views/example/fun/cropper/index.vue'),
+                    meta: {
+                      title: 'message.router.funCropper',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-caijian',
+                    },
+                  },
+                  {
+                    path: '/example/fun/qrcode',
+                    name: 'example/funQrcode',
+                    component: () => import('/@/views/example/fun/qrcode/index.vue'),
+                    meta: {
+                      title: 'message.router.funQrcode',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-ico',
+                    },
+                  },
+                  {
+                    path: '/example/fun/echartsMap',
+                    name: 'example/funEchartsMap',
+                    component: () => import('/@/views/example/fun/echartsMap/index.vue'),
+                    meta: {
+                      title: 'message.router.funEchartsMap',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-ditu',
+                    },
+                  },
+                  {
+                    path: '/example/fun/printJs',
+                    name: 'example/funPrintJs',
+                    component: () => import('/@/views/example/fun/printJs/index.vue'),
+                    meta: {
+                      title: 'message.router.funPrintJs',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'ele-Printer',
+                    },
+                  },
+                  {
+                    path: '/example/fun/clipboard',
+                    name: 'example/funClipboard',
+                    component: () => import('/@/views/example/fun/clipboard/index.vue'),
+                    meta: {
+                      title: 'message.router.funClipboard',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'ele-DocumentCopy',
+                    },
+                  },
+                  {
+                    path: '/example/fun/gridLayout',
+                    name: 'example/funGridLayout',
+                    component: () => import('/@/views/example/fun/gridLayout/index.vue'),
+                    meta: {
+                      title: 'message.router.funGridLayout',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-tuodong',
+                    },
+                  },
+                  {
+                    path: '/example/fun/splitpanes',
+                    name: 'example/funSplitpanes',
+                    component: () => import('/@/views/example/fun/splitpanes/index.vue'),
+                    meta: {
+                      title: 'message.router.funSplitpanes',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon--chaifenlie',
+                    },
+                  },
+                ],
               },
-            ],
-          },
-          {
-            path: '/example/pages',
-            name: 'example/pagesIndex',
-            component: () => import('/@/layout/routerView/parent.vue'),
-            redirect: '/pages/filtering',
-            meta: {
-              title: 'message.router.pagesIndex',
-              isLink: '',
-              isHide: false,
-              isKeepAlive: true,
-              isAffix: false,
-              isIframe: false,
-              roles: ['admin', 'common'],
-              icon: 'iconfont icon-fuzhiyemian',
-            },
-            children: [
               {
-                path: '/example/pages/filtering',
-                name: 'example/pagesFiltering',
-                component: () => import('/@/views/example/pages/filtering/index.vue'),
+                path: '/example/pages',
+                name: 'example/pagesIndex',
+                component: () => import('/@/layout/routerView/parent.vue'),
+                redirect: '/pages/filtering',
                 meta: {
-                  title: 'message.router.pagesFiltering',
+                  title: 'message.router.pagesIndex',
                   isLink: '',
                   isHide: false,
                   isKeepAlive: true,
                   isAffix: false,
                   isIframe: false,
                   roles: ['admin', 'common'],
-                  icon: 'ele-Sell',
+                  icon: 'iconfont icon-fuzhiyemian',
                 },
-                /**
-                 * 注意此处详情写法：
-                 * 1、嵌套进父级里时，面包屑显示为：首页/页面/过滤筛选组件/过滤筛选组件详情
-                 * 2、不嵌套进父级时，面包屑显示为：首页/页面/过滤筛选组件/过滤筛选组件详情
-                 * 3、想要父级不高亮，面包屑显示为：首页/页面/过滤筛选组件详情，设置路径为：/pages/filteringDetails
-                 */
                 children: [
                   {
-                    path: '/example/pages/filtering/details',
-                    name: 'example/pagesFilteringDetails',
-                    component: () => import('/@/views/example/pages/filtering/details.vue'),
+                    path: '/example/pages/filtering',
+                    name: 'example/pagesFiltering',
+                    component: () => import('/@/views/example/pages/filtering/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesFiltering',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'ele-Sell',
+                    },
+                    /**
+                     * 注意此处详情写法：
+                     * 1、嵌套进父级里时，面包屑显示为：首页/页面/过滤筛选组件/过滤筛选组件详情
+                     * 2、不嵌套进父级时，面包屑显示为：首页/页面/过滤筛选组件/过滤筛选组件详情
+                     * 3、想要父级不高亮，面包屑显示为：首页/页面/过滤筛选组件详情，设置路径为：/pages/filteringDetails
+                     */
+                    children: [
+                      {
+                        path: '/example/pages/filtering/details',
+                        name: 'example/pagesFilteringDetails',
+                        component: () => import('/@/views/example/pages/filtering/details.vue'),
+                        meta: {
+                          title: 'message.router.pagesFilteringDetails',
+                          isLink: '',
+                          isHide: true,
+                          isKeepAlive: false,
+                          isAffix: false,
+                          isIframe: false,
+                          roles: ['admin', 'common'],
+                          icon: 'ele-Sunny',
+                        },
+                      },
+                    ],
+                  },
+                  {
+                    path: '/example/pages/filtering/details1',
+                    name: 'example/pagesFilteringDetails1',
+                    component: () => import('/@/views/example/pages/filtering/details1.vue'),
                     meta: {
-                      title: 'message.router.pagesFilteringDetails',
+                      title: 'message.router.pagesFilteringDetails1',
                       isLink: '',
                       isHide: true,
                       isKeepAlive: false,
@@ -618,586 +637,569 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
                       icon: 'ele-Sunny',
                     },
                   },
-                ],
-              },
-              {
-                path: '/example/pages/filtering/details1',
-                name: 'example/pagesFilteringDetails1',
-                component: () => import('/@/views/example/pages/filtering/details1.vue'),
-                meta: {
-                  title: 'message.router.pagesFilteringDetails1',
-                  isLink: '',
-                  isHide: true,
-                  isKeepAlive: false,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'ele-Sunny',
-                },
-              },
-              {
-                path: '/example/pages/iocnfont',
-                name: 'example/pagesIocnfont',
-                component: () => import('/@/views/example/pages/iocnfont/index.vue'),
-                meta: {
-                  title: 'message.router.pagesIocnfont',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'ele-Present',
-                },
-              },
-              {
-                path: '/example/pages/element',
-                name: 'example/pagesElement',
-                component: () => import('/@/views/example/pages/element/index.vue'),
-                meta: {
-                  title: 'message.router.pagesElement',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'ele-Eleme',
-                },
-              },
-              {
-                path: '/example/pages/awesome',
-                name: 'example/pagesAwesome',
-                component: () => import('/@/views/example/pages/awesome/index.vue'),
-                meta: {
-                  title: 'message.router.pagesAwesome',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'ele-SetUp',
-                },
-              },
-              {
-                path: '/example/pages/formAdapt',
-                name: 'example/pagesFormAdapt',
-                component: () => import('/@/views/example/pages/formAdapt/index.vue'),
-                meta: {
-                  title: 'message.router.pagesFormAdapt',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-biaodan',
-                },
-              },
-              {
-                path: '/example/pages/tableRules',
-                name: 'example/pagesTableRules',
-                component: () => import('/@/views/example/pages/tableRules/index.vue'),
-                meta: {
-                  title: 'message.router.pagesTableRules',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-jiliandongxuanzeqi',
-                },
-              },
-              {
-                path: '/example/pages/formI18n',
-                name: 'example/pagesFormI18n',
-                component: () => import('/@/views/example/pages/formI18n/index.vue'),
-                meta: {
-                  title: 'message.router.pagesFormI18n',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-diqiu',
-                },
-              },
-              {
-                path: '/example/pages/formRules',
-                name: 'example/pagesFormRules',
-                component: () => import('/@/views/example/pages/formRules/index.vue'),
-                meta: {
-                  title: 'message.router.pagesFormRules',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-shuxing',
-                },
-              },
-              {
-                path: '/example/pages/listAdapt',
-                name: 'example/pagesListAdapt',
-                component: () => import('/@/views/example/pages/listAdapt/index.vue'),
-                meta: {
-                  title: 'message.router.pagesListAdapt',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-chazhaobiaodanliebiao',
-                },
-              },
-              {
-                path: '/example/pages/waterfall',
-                name: 'example/pagesWaterfall',
-                component: () => import('/@/views/example/pages/waterfall/index.vue'),
-                meta: {
-                  title: 'message.router.pagesWaterfall',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-zidingyibuju',
-                },
-              },
-              {
-                path: '/example/pages/steps',
-                name: 'example/pagesSteps',
-                component: () => import('/@/views/example/pages/steps/index.vue'),
-                meta: {
-                  title: 'message.router.pagesSteps',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-step',
-                },
-              },
-              {
-                path: '/example/pages/preview',
-                name: 'example/pagesPreview',
-                component: () => import('/@/views/example/pages/preview/index.vue'),
-                meta: {
-                  title: 'message.router.pagesPreview',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-15tupianyulan',
-                },
-              },
-              {
-                path: '/example/pages/waves',
-                name: 'example/pagesWaves',
-                component: () => import('/@/views/example/pages/waves/index.vue'),
-                meta: {
-                  title: 'message.router.pagesWaves',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-bolangneng',
-                },
-              },
-              {
-                path: '/example/pages/tree',
-                name: 'example/pagesTree',
-                component: () => import('/@/views/example/pages/tree/index.vue'),
-                meta: {
-                  title: 'message.router.pagesTree',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-shuxingtu',
-                },
-              },
-              {
-                path: '/example/pages/drag',
-                name: 'example/pagesDrag',
-                component: () => import('/@/views/example/pages/drag/index.vue'),
-                meta: {
-                  title: 'message.router.pagesDrag',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'ele-Pointer',
-                },
+                  {
+                    path: '/example/pages/iocnfont',
+                    name: 'example/pagesIocnfont',
+                    component: () => import('/@/views/example/pages/iocnfont/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesIocnfont',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'ele-Present',
+                    },
+                  },
+                  {
+                    path: '/example/pages/element',
+                    name: 'example/pagesElement',
+                    component: () => import('/@/views/example/pages/element/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesElement',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'ele-Eleme',
+                    },
+                  },
+                  {
+                    path: '/example/pages/awesome',
+                    name: 'example/pagesAwesome',
+                    component: () => import('/@/views/example/pages/awesome/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesAwesome',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'ele-SetUp',
+                    },
+                  },
+                  {
+                    path: '/example/pages/formAdapt',
+                    name: 'example/pagesFormAdapt',
+                    component: () => import('/@/views/example/pages/formAdapt/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesFormAdapt',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-biaodan',
+                    },
+                  },
+                  {
+                    path: '/example/pages/tableRules',
+                    name: 'example/pagesTableRules',
+                    component: () => import('/@/views/example/pages/tableRules/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesTableRules',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-jiliandongxuanzeqi',
+                    },
+                  },
+                  {
+                    path: '/example/pages/formI18n',
+                    name: 'example/pagesFormI18n',
+                    component: () => import('/@/views/example/pages/formI18n/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesFormI18n',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-diqiu',
+                    },
+                  },
+                  {
+                    path: '/example/pages/formRules',
+                    name: 'example/pagesFormRules',
+                    component: () => import('/@/views/example/pages/formRules/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesFormRules',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-shuxing',
+                    },
+                  },
+                  {
+                    path: '/example/pages/listAdapt',
+                    name: 'example/pagesListAdapt',
+                    component: () => import('/@/views/example/pages/listAdapt/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesListAdapt',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-chazhaobiaodanliebiao',
+                    },
+                  },
+                  {
+                    path: '/example/pages/waterfall',
+                    name: 'example/pagesWaterfall',
+                    component: () => import('/@/views/example/pages/waterfall/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesWaterfall',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-zidingyibuju',
+                    },
+                  },
+                  {
+                    path: '/example/pages/steps',
+                    name: 'example/pagesSteps',
+                    component: () => import('/@/views/example/pages/steps/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesSteps',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-step',
+                    },
+                  },
+                  {
+                    path: '/example/pages/preview',
+                    name: 'example/pagesPreview',
+                    component: () => import('/@/views/example/pages/preview/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesPreview',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-15tupianyulan',
+                    },
+                  },
+                  {
+                    path: '/example/pages/waves',
+                    name: 'example/pagesWaves',
+                    component: () => import('/@/views/example/pages/waves/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesWaves',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-bolangneng',
+                    },
+                  },
+                  {
+                    path: '/example/pages/tree',
+                    name: 'example/pagesTree',
+                    component: () => import('/@/views/example/pages/tree/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesTree',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-shuxingtu',
+                    },
+                  },
+                  {
+                    path: '/example/pages/drag',
+                    name: 'example/pagesDrag',
+                    component: () => import('/@/views/example/pages/drag/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesDrag',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'ele-Pointer',
+                    },
+                  },
+                  {
+                    path: '/example/pages/lazyImg',
+                    name: 'example/pagesLazyImg',
+                    component: () => import('/@/views/example/pages/lazyImg/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesLazyImg',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin'],
+                      icon: 'ele-PictureFilled',
+                    },
+                  },
+                  {
+                    path: '/example/pages/dynamicForm',
+                    name: 'example/pagesDynamicForm',
+                    component: () => import('/@/views/example/pages/dynamicForm/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesDynamicForm',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin'],
+                      icon: 'iconfont icon-wenducanshu-05',
+                    },
+                  },
+                  {
+                    path: '/example/pages/workflow',
+                    name: 'example/pagesWorkflow',
+                    component: () => import('/@/views/example/pages/workflow/index.vue'),
+                    meta: {
+                      title: 'message.router.pagesWorkflow',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin'],
+                      icon: 'ele-Connection',
+                    },
+                  },
+                ],
               },
               {
-                path: '/example/pages/lazyImg',
-                name: 'example/pagesLazyImg',
-                component: () => import('/@/views/example/pages/lazyImg/index.vue'),
+                path: '/example/make',
+                name: 'example/makeIndex',
+                component: () => import('/@/layout/routerView/parent.vue'),
+                redirect: '/make/selector',
                 meta: {
-                  title: 'message.router.pagesLazyImg',
+                  title: 'message.router.makeIndex',
                   isLink: '',
                   isHide: false,
                   isKeepAlive: true,
                   isAffix: false,
                   isIframe: false,
                   roles: ['admin'],
-                  icon: 'ele-PictureFilled',
+                  icon: 'iconfont icon-siweidaotu',
                 },
+                children: [
+                  {
+                    path: '/example/make/selector',
+                    name: 'example/makeSelector',
+                    component: () => import('/@/views/example/make/selector/index.vue'),
+                    meta: {
+                      title: 'message.router.makeSelector',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-xuanzeqi',
+                    },
+                  },
+                  {
+                    path: '/example/make/noticeBar',
+                    name: 'example/makeNoticeBar',
+                    component: () => import('/@/views/example/make/noticeBar/index.vue'),
+                    meta: {
+                      title: 'message.router.makeNoticeBar',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'ele-Bell',
+                    },
+                  },
+                  {
+                    path: '/example/make/svgDemo',
+                    name: 'example/makeSvgDemo',
+                    component: () => import('/@/views/example/make/svgDemo/index.vue'),
+                    meta: {
+                      title: 'message.router.makeSvgDemo',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'fa fa-thumbs-o-up',
+                    },
+                  },
+                  {
+                    path: '/example/make/tableDemo',
+                    name: 'example/makeTableDemo',
+                    component: () => import('/@/views/example/make/tableDemo/index.vue'),
+                    meta: {
+                      title: 'message.router.makeTableDemo',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin', 'common'],
+                      icon: 'iconfont icon-shuju',
+                    },
+                  },
+                ],
               },
               {
-                path: '/example/pages/dynamicForm',
-                name: 'example/pagesDynamicForm',
-                component: () => import('/@/views/example/pages/dynamicForm/index.vue'),
+                path: '/example/params',
+                name: 'example/paramsIndex',
+                component: () => import('/@/layout/routerView/parent.vue'),
+                redirect: '/params/common',
                 meta: {
-                  title: 'message.router.pagesDynamicForm',
+                  title: 'message.router.paramsIndex',
                   isLink: '',
                   isHide: false,
                   isKeepAlive: true,
                   isAffix: false,
                   isIframe: false,
                   roles: ['admin'],
-                  icon: 'iconfont icon-wenducanshu-05',
+                  icon: 'iconfont icon-zhongduancanshu',
                 },
+                children: [
+                  {
+                    path: '/example/params/common',
+                    name: 'example/paramsCommon',
+                    component: () => import('/@/views/example/params/common/index.vue'),
+                    meta: {
+                      title: 'message.router.paramsCommon',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin'],
+                      icon: 'iconfont icon-putong',
+                    },
+                  },
+                  {
+                    path: '/example/params/common/details',
+                    name: 'example/paramsCommonDetails',
+                    component: () => import('/@/views/example/params/common/details.vue'),
+                    meta: {
+                      title: 'message.router.paramsCommonDetails',
+                      isLink: '',
+                      isHide: true,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin'],
+                      icon: 'ele-Comment',
+                    },
+                  },
+                  {
+                    path: '/example/params/dynamic',
+                    name: 'example/paramsDynamic',
+                    component: () => import('/@/views/example/params/dynamic/index.vue'),
+                    meta: {
+                      title: 'message.router.paramsDynamic',
+                      isLink: '',
+                      isHide: false,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin'],
+                      icon: 'iconfont icon-dongtai',
+                    },
+                  },
+                  /**
+                   * tagsViewName 为要设置不同的 "tagsView 名称" 字段
+                   * 如若需设置不同 "tagsView 名称"，tagsViewName 字段必须要有
+                   */
+                  {
+                    path: '/example/params/dynamic/details/:t/:id/:tagsViewName',
+                    name: 'example/paramsDynamicDetails',
+                    component: () => import('/@/views/example/params/dynamic/details.vue'),
+                    meta: {
+                      title: 'message.router.paramsDynamicDetails',
+                      isLink: '',
+                      isHide: true,
+                      isKeepAlive: true,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin'],
+                      icon: 'ele-Lightning',
+                    },
+                  },
+                ],
               },
               {
-                path: '/example/pages/workflow',
-                name: 'example/pagesWorkflow',
-                component: () => import('/@/views/example/pages/workflow/index.vue'),
+                path: '/example/visualizing',
+                name: 'example/visualizingIndex',
+                component: () => import('/@/layout/routerView/parent.vue'),
+                redirect: '/visualizing/visualizingLinkDemo1',
                 meta: {
-                  title: 'message.router.pagesWorkflow',
+                  title: 'message.router.visualizingIndex',
                   isLink: '',
                   isHide: false,
                   isKeepAlive: true,
                   isAffix: false,
                   isIframe: false,
                   roles: ['admin'],
-                  icon: 'ele-Connection',
-                },
-              },
-            ],
-          },
-          {
-            path: '/example/make',
-            name: 'example/makeIndex',
-            component: () => import('/@/layout/routerView/parent.vue'),
-            redirect: '/make/selector',
-            meta: {
-              title: 'message.router.makeIndex',
-              isLink: '',
-              isHide: false,
-              isKeepAlive: true,
-              isAffix: false,
-              isIframe: false,
-              roles: ['admin'],
-              icon: 'iconfont icon-siweidaotu',
-            },
-            children: [
-              {
-                path: '/example/make/selector',
-                name: 'example/makeSelector',
-                component: () => import('/@/views/example/make/selector/index.vue'),
-                meta: {
-                  title: 'message.router.makeSelector',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-xuanzeqi',
+                  icon: 'ele-ChatLineRound',
                 },
+                /**
+                 * 打开内置全屏
+                 * component 都为 `() => import('/@/layout/routerView/link.vue')`
+                 * isLink 链接为内置的路由地址，地址为 staticRoutes 中定义
+                 */
+                children: [
+                  {
+                    path: '/example/visualizing/visualizingLinkDemo1',
+                    name: 'example/visualizingLinkDemo1',
+                    component: () => import('/@/layout/routerView/link.vue'),
+                    meta: {
+                      title: 'message.router.visualizingLinkDemo1',
+                      isLink: '/example/visualizingDemo1',
+                      isHide: false,
+                      isKeepAlive: false,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin'],
+                      icon: 'iconfont icon-caozuo-wailian',
+                    },
+                  },
+                  {
+                    path: '/example/visualizing/visualizingLinkDemo2',
+                    name: 'example/visualizingLinkDemo2',
+                    component: () => import('/@/layout/routerView/link.vue'),
+                    meta: {
+                      title: 'message.router.visualizingLinkDemo2',
+                      isLink: '/example/visualizingDemo2',
+                      isHide: false,
+                      isKeepAlive: false,
+                      isAffix: false,
+                      isIframe: false,
+                      roles: ['admin'],
+                      icon: 'iconfont icon-caozuo-wailian',
+                    },
+                  },
+                ],
               },
               {
-                path: '/example/make/noticeBar',
-                name: 'example/makeNoticeBar',
-                component: () => import('/@/views/example/make/noticeBar/index.vue'),
+                path: '/example/chart',
+                name: 'example/chartIndex',
+                component: () => import('/@/views/example/chart/index.vue'),
                 meta: {
-                  title: 'message.router.makeNoticeBar',
+                  title: 'message.router.chartIndex',
                   isLink: '',
                   isHide: false,
                   isKeepAlive: true,
                   isAffix: false,
                   isIframe: false,
                   roles: ['admin', 'common'],
-                  icon: 'ele-Bell',
+                  icon: 'iconfont icon-ico_shuju',
                 },
               },
               {
-                path: '/example/make/svgDemo',
-                name: 'example/makeSvgDemo',
-                component: () => import('/@/views/example/make/svgDemo/index.vue'),
+                path: '/example/personal',
+                name: 'example/personal',
+                component: () => import('/@/views/example/personal/index.vue'),
                 meta: {
-                  title: 'message.router.makeSvgDemo',
+                  title: 'message.router.personal',
                   isLink: '',
                   isHide: false,
                   isKeepAlive: true,
                   isAffix: false,
                   isIframe: false,
                   roles: ['admin', 'common'],
-                  icon: 'fa fa-thumbs-o-up',
+                  icon: 'iconfont icon-gerenzhongxin',
                 },
               },
               {
-                path: '/example/make/tableDemo',
-                name: 'example/makeTableDemo',
-                component: () => import('/@/views/example/make/tableDemo/index.vue'),
+                path: '/example/tools',
+                name: 'example/tools',
+                component: () => import('/@/views/example/tools/index.vue'),
                 meta: {
-                  title: 'message.router.makeTableDemo',
+                  title: 'message.router.tools',
                   isLink: '',
                   isHide: false,
                   isKeepAlive: true,
                   isAffix: false,
                   isIframe: false,
                   roles: ['admin', 'common'],
-                  icon: 'iconfont icon-shuju',
+                  icon: 'iconfont icon-gongju',
                 },
               },
-            ],
-          },
-          {
-            path: '/example/params',
-            name: 'example/paramsIndex',
-            component: () => import('/@/layout/routerView/parent.vue'),
-            redirect: '/params/common',
-            meta: {
-              title: 'message.router.paramsIndex',
-              isLink: '',
-              isHide: false,
-              isKeepAlive: true,
-              isAffix: false,
-              isIframe: false,
-              roles: ['admin'],
-              icon: 'iconfont icon-zhongduancanshu',
-            },
-            children: [
               {
-                path: '/example/params/common',
-                name: 'example/paramsCommon',
-                component: () => import('/@/views/example/params/common/index.vue'),
+                path: '/example/link',
+                name: 'example/layoutLinkView',
+                component: () => import('/@/layout/routerView/link.vue'),
                 meta: {
-                  title: 'message.router.paramsCommon',
-                  isLink: '',
+                  title: 'message.router.layoutLinkView',
+                  isLink: 'https://element-plus.gitee.io/#/zh-CN/component/installation',
                   isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin'],
-                  icon: 'iconfont icon-putong',
-                },
-              },
-              {
-                path: '/example/params/common/details',
-                name: 'example/paramsCommonDetails',
-                component: () => import('/@/views/example/params/common/details.vue'),
-                meta: {
-                  title: 'message.router.paramsCommonDetails',
-                  isLink: '',
-                  isHide: true,
-                  isKeepAlive: true,
+                  isKeepAlive: false,
                   isAffix: false,
                   isIframe: false,
                   roles: ['admin'],
-                  icon: 'ele-Comment',
+                  icon: 'iconfont icon-caozuo-wailian',
                 },
               },
               {
-                path: '/example/params/dynamic',
-                name: 'example/paramsDynamic',
-                component: () => import('/@/views/example/params/dynamic/index.vue'),
+                path: '/example/iframesOne',
+                name: 'example/layoutIframeViewOne',
+                component: () => import('/@/layout/routerView/iframes.vue'),
                 meta: {
-                  title: 'message.router.paramsDynamic',
-                  isLink: '',
+                  title: 'message.router.layoutIframeViewOne',
+                  isLink: 'https://nodejs.org/zh-cn/',
                   isHide: false,
                   isKeepAlive: true,
                   isAffix: false,
-                  isIframe: false,
-                  roles: ['admin'],
-                  icon: 'iconfont icon-dongtai',
-                },
-              },
-              /**
-               * tagsViewName 为要设置不同的 "tagsView 名称" 字段
-               * 如若需设置不同 "tagsView 名称"，tagsViewName 字段必须要有
-               */
-              {
-                path: '/example/params/dynamic/details/:t/:id/:tagsViewName',
-                name: 'example/paramsDynamicDetails',
-                component: () => import('/@/views/example/params/dynamic/details.vue'),
-                meta: {
-                  title: 'message.router.paramsDynamicDetails',
-                  isLink: '',
-                  isHide: true,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin'],
-                  icon: 'ele-Lightning',
-                },
-              },
-            ],
-          },
-          {
-            path: '/example/visualizing',
-            name: 'example/visualizingIndex',
-            component: () => import('/@/layout/routerView/parent.vue'),
-            redirect: '/visualizing/visualizingLinkDemo1',
-            meta: {
-              title: 'message.router.visualizingIndex',
-              isLink: '',
-              isHide: false,
-              isKeepAlive: true,
-              isAffix: false,
-              isIframe: false,
-              roles: ['admin'],
-              icon: 'ele-ChatLineRound',
-            },
-            /**
-             * 打开内置全屏
-             * component 都为 `() => import('/@/layout/routerView/link.vue')`
-             * isLink 链接为内置的路由地址，地址为 staticRoutes 中定义
-             */
-            children: [
-              {
-                path: '/example/visualizing/visualizingLinkDemo1',
-                name: 'example/visualizingLinkDemo1',
-                component: () => import('/@/layout/routerView/link.vue'),
-                meta: {
-                  title: 'message.router.visualizingLinkDemo1',
-                  isLink: '/example/visualizingDemo1',
-                  isHide: false,
-                  isKeepAlive: false,
-                  isAffix: false,
-                  isIframe: false,
+                  isIframe: true,
                   roles: ['admin'],
-                  icon: 'iconfont icon-caozuo-wailian',
+                  icon: 'iconfont icon-neiqianshujuchucun',
                 },
               },
               {
-                path: '/example/visualizing/visualizingLinkDemo2',
-                name: 'example/visualizingLinkDemo2',
-                component: () => import('/@/layout/routerView/link.vue'),
+                path: '/example/iframesTwo',
+                name: 'example/layoutIframeViewTwo',
+                component: () => import('/@/layout/routerView/iframes.vue'),
                 meta: {
-                  title: 'message.router.visualizingLinkDemo2',
-                  isLink: '/example/visualizingDemo2',
+                  title: 'message.router.layoutIframeViewTwo',
+                  isLink: 'https://undraw.co/illustrations',
                   isHide: false,
-                  isKeepAlive: false,
+                  isKeepAlive: true,
                   isAffix: false,
-                  isIframe: false,
+                  isIframe: true,
                   roles: ['admin'],
-                  icon: 'iconfont icon-caozuo-wailian',
+                  icon: 'iconfont icon-neiqianshujuchucun',
                 },
               },
             ],
           },
-          {
-            path: '/example/chart',
-            name: 'example/chartIndex',
-            component: () => import('/@/views/example/chart/index.vue'),
-            meta: {
-              title: 'message.router.chartIndex',
-              isLink: '',
-              isHide: false,
-              isKeepAlive: true,
-              isAffix: false,
-              isIframe: false,
-              roles: ['admin', 'common'],
-              icon: 'iconfont icon-ico_shuju',
-            },
-          },
-          {
-            path: '/example/personal',
-            name: 'example/personal',
-            component: () => import('/@/views/example/personal/index.vue'),
-            meta: {
-              title: 'message.router.personal',
-              isLink: '',
-              isHide: false,
-              isKeepAlive: true,
-              isAffix: false,
-              isIframe: false,
-              roles: ['admin', 'common'],
-              icon: 'iconfont icon-gerenzhongxin',
-            },
-          },
-          {
-            path: '/example/tools',
-            name: 'example/tools',
-            component: () => import('/@/views/example/tools/index.vue'),
-            meta: {
-              title: 'message.router.tools',
-              isLink: '',
-              isHide: false,
-              isKeepAlive: true,
-              isAffix: false,
-              isIframe: false,
-              roles: ['admin', 'common'],
-              icon: 'iconfont icon-gongju',
-            },
-          },
-          {
-            path: '/example/link',
-            name: 'example/layoutLinkView',
-            component: () => import('/@/layout/routerView/link.vue'),
-            meta: {
-              title: 'message.router.layoutLinkView',
-              isLink: 'https://element-plus.gitee.io/#/zh-CN/component/installation',
-              isHide: false,
-              isKeepAlive: false,
-              isAffix: false,
-              isIframe: false,
-              roles: ['admin'],
-              icon: 'iconfont icon-caozuo-wailian',
-            },
-          },
-          {
-            path: '/example/iframesOne',
-            name: 'example/layoutIframeViewOne',
-            component: () => import('/@/layout/routerView/iframes.vue'),
-            meta: {
-              title: 'message.router.layoutIframeViewOne',
-              isLink: 'https://nodejs.org/zh-cn/',
-              isHide: false,
-              isKeepAlive: true,
-              isAffix: false,
-              isIframe: true,
-              roles: ['admin'],
-              icon: 'iconfont icon-neiqianshujuchucun',
-            },
-          },
-          {
-            path: '/example/iframesTwo',
-            name: 'example/layoutIframeViewTwo',
-            component: () => import('/@/layout/routerView/iframes.vue'),
-            meta: {
-              title: 'message.router.layoutIframeViewTwo',
-              isLink: 'https://undraw.co/illustrations',
-              isHide: false,
-              isKeepAlive: true,
-              isAffix: false,
-              isIframe: true,
-              roles: ['admin'],
-              icon: 'iconfont icon-neiqianshujuchucun',
-            },
-          },
         ],
-      },
-    ],
   },
 ]
 

src/stores/themeConfig.ts

@@ -53,6 +53,8 @@ export const useThemeConfig = defineStore('themeConfig', {
       columnsMenuBar: '#282c34',
       // 默认分栏菜单字体颜色
       columnsMenuBarColor: '#e6e6e6',
+      // 默认分栏菜单高亮字体颜色
+      columnsMenuBarActiveColor: '#ffffff',
       // 是否开启分栏菜单背景颜色渐变
       isColumnsMenuBarColorGradual: false,
       // 是否开启分栏菜单鼠标悬停预加载(预览菜单)

src/theme/app.scss

@@ -128,6 +128,9 @@ body,
   }
   .layout-el-aside-br-color {
     border-right: 1px solid var(--el-border-color-light, #ebeef5);
+    .el-scrollbar {
+      border-left: 1px solid var(--el-border-color-light, #ebeef5);
+    }
   }
   // pc端左侧导航样式
   .layout-aside-pc-220 {
@@ -142,6 +145,10 @@ body,
     width: 1px !important;
     transition: width 0.3s ease;
   }
+  .layout-aside-pc-0 {
+    width: 0px !important;
+    transition: width 0.3s ease;
+  }
   // 手机端左侧导航样式
   .layout-aside-mobile {
     position: fixed;

src/theme/dark.scss

@@ -37,6 +37,7 @@
   --next-color-seting-main: var(--next-color-seting) !important;
   --next-color-seting-aside: var(--next-color-hover) !important;
   --next-color-seting-header: var(--next-color-primary) !important;
+  --next-color-menuBarActiveColor: var(--next-color-white) !important;
 
   // element plus
   --el-color-white: var(--next-color-disabled) !important;

src/types/pinia.d.ts

@@ -52,6 +52,7 @@ declare interface ThemeConfigState {
     isMenuBarColorGradual: boolean
     columnsMenuBar: string
     columnsMenuBarColor: string
+    columnsMenuBarActiveColor: string
     isColumnsMenuBarColorGradual: boolean
     isColumnsMenuHoverPreload: boolean
     isCollapse: boolean