'admin-21.01.03:编写布局主题配置页'

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

@@ -54,123 +54,6 @@ const staticRoutes: Array<RouteRecordRaw> = [
                 title: '文档3',
                 index: 4
             }
-        },
-        {
-            path: '/docs4',
-            name: 'docs4',
-            component: () => import('/@/views/docs copy 4/index.vue'),
-            meta: {
-                title: '文档4',
-                index: 5
-            }
-        },
-        {
-            path: '/docs5',
-            name: 'docs5',
-            component: () => import('/@/views/docs copy 5/index.vue'),
-            meta: {
-                title: '文档5',
-                index: 6
-            }
-        },
-        {
-            path: '/docs6',
-            name: 'docs6',
-            component: () => import('/@/views/docs copy 6/index.vue'),
-            meta: {
-                title: '文档6',
-                index: 7
-            }
-        },
-        {
-            path: '/docs7',
-            name: 'docs7',
-            component: () => import('/@/views/docs copy 7/index.vue'),
-            meta: {
-                title: '文档7',
-                index: 8
-            }
-        },
-        {
-            path: '/docs8',
-            name: 'docs8',
-            component: () => import('/@/views/docs copy 8/index.vue'),
-            meta: {
-                title: '文档8',
-                index: 9
-            }
-        },
-        {
-            path: '/docs9',
-            name: 'docs9',
-            component: () => import('/@/views/docs copy 9/index.vue'),
-            meta: {
-                title: '文档9',
-                index: 10
-            }
-        },
-        {
-            path: '/docs10',
-            name: 'docs10',
-            component: () => import('/@/views/docs copy 10/index.vue'),
-            meta: {
-                title: '文档10',
-                index: 11
-            }
-        },
-        {
-            path: '/docs11',
-            name: 'docs11',
-            component: () => import('/@/views/docs copy 11/index.vue'),
-            meta: {
-                title: '文档11',
-                index: 12
-            }
-        },
-        {
-            path: '/docs12',
-            name: 'docs12',
-            component: () => import('/@/views/docs copy 12/index.vue'),
-            meta: {
-                title: '文档12',
-                index: 13
-            }
-        },
-        {
-            path: '/docs13',
-            name: 'docs13',
-            component: () => import('/@/views/docs copy 13/index.vue'),
-            meta: {
-                title: '文档13',
-                index: 14
-            }
-        },
-        {
-            path: '/docs14',
-            name: 'docs14',
-            component: () => import('/@/views/docs copy 14/index.vue'),
-            meta: {
-                title: '文档14',
-                index: 15
-            }
-        },
-        {
-            path: '/docs15',
-            name: 'docs15',
-            component: () => import('/@/views/docs copy 15/index.vue'),
-            meta: {
-                title: '文档15',
-                index: 16
-            }
-        },
-        {
-            path: '/docs16',
-            name: 'docs16',
-            component: () => import('/@/views/docs copy 16/index.vue'),
-            meta: {
-                title: '文档16',
-                index: 17
-            }
         }]
     },
     {

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

@@ -29,9 +29,11 @@ body,
   width: 100%;
   height: 100%;
   .el-aside {
-    background: #29384d;
+    background: var(--bg-menuBar);
-    border-right: 1px solid rgb(230, 230, 230);
+    box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
     height: inherit;
+    position: relative;
+    z-index: 1;
   }
   .el-header {
     box-shadow: 0 1px 4px rgb(0 21 41 / 8%);

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

@@ -10,11 +10,11 @@
 }
 .slide-right-enter-from {
   opacity: 0;
-  transform: translateX(-30px);
+  transform: translateX(-20px);
 }
 .slide-right-leave-to {
   opacity: 0;
-  transform: translateX(30px);
+  transform: translateX(20px);
 }
 .slide-left-enter-from {
   @extend .slide-right-leave-to;
@@ -27,7 +27,7 @@
 ------------------------------- */
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
   position: absolute;
 }
 .breadcrumb-enter-from,

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

@@ -58,6 +58,10 @@ $--color-danger-light-6: mix($--color-whites, $--color-danger, 60%) !default;
 $--color-danger-light-7: mix($--color-whites, $--color-danger, 70%) !default;
 $--color-danger-light-8: mix($--color-whites, $--color-danger, 80%) !default;
 $--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default;
+$--bg-topBar: #ffffff;
+$--bg-menuBar: #29384d;
+$--bg-topBarColor: #606266;
+$--bg-menuBarColor: #e6e6e6;
 
 /* 赋值给:root
 ------------------------------- */
@@ -114,4 +118,8 @@ $--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default;
   --color-danger-light-7: #{$--color-danger-light-7};
   --color-danger-light-8: #{$--color-danger-light-8};
   --color-danger-light-9: #{$--color-danger-light-9};
+  --bg-topBar: #{$--bg-topBar};
+  --bg-menuBar: #{$--bg-menuBar};
+  --bg-topBarColor: #{$--bg-topBarColor};
+  --bg-menuBarColor: #{$--bg-menuBarColor};
 }

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

@@ -666,37 +666,55 @@
 
 /* NavMenu 导航菜单
 ------------------------------- */
+// 默认样式修改
 .el-menu {
   border-right: none !important;
 }
-.el-menu-item.is-active,
+.el-menu-item,
-.el-submenu.is-active .el-submenu__title {
+.el-submenu__title {
+  height: 50px !important;
+  line-height: 50px !important;
+  color: var(--bg-menuBarColor);
+}
+// horizontal 水平方向时
+.el-menu--horizontal > .el-menu-item.is-active,
+.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
   border-bottom-color: set-color(primary);
   color: set-color(primary);
 }
-.el-menu-item:not(.is-disabled):focus,
+.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
-.el-menu-item:not(.is-disabled):hover,
+.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
-.el-submenu:focus .el-submenu__title,
+.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
-.el-submenu:hover .el-submenu__title,
+.el-menu--horizontal > .el-submenu:hover .el-submenu__title,
-.el-menu .el-menu-item.is-active,
+.el-menu--horizontal .el-menu .el-menu-item.is-active,
-.el-menu .el-submenu.is-active > .el-submenu__title {
+.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
   color: set-color(primary);
 }
+// 外部链接时
 .el-menu-item a,
-.el-menu-item a:hover {
+.el-menu-item a:hover,
+.el-menu-item i,
+.el-submenu__title i {
   color: inherit;
   text-decoration: none;
 }
-// default
+
-.el-menu-item.is-active {
+// 默认 hover 时
-  color: set-color(primary);
-  background-color: set-color(primary-light-9);
-}
-.el-menu-item:focus,
 .el-menu-item:hover,
-.el-submenu__title:focus,
 .el-submenu__title:hover {
-  background-color: set-color(primary-light-9);
+  color: set-color(primary) !important;
+  background-color: transparent !important;
+  i {
+    color: set-color(primary);
+  }
+}
+// 高亮时
+.el-menu-item.is-active {
+  color: #ffffff !important;
+  background-color: set-color(primary) !important;
+  i {
+    color: #ffffff !important;
+  }
 }
 
 /* Tabs 标签页
@@ -721,7 +739,7 @@
 }
 .el-breadcrumb__inner a,
 .el-breadcrumb__inner.is-link {
-  color: #303133;
+  color: var(--bg-topBarColor);
   font-weight: normal;
 }
 

vue-admin-wonderful-next/src/views/docs copy 10/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/docs copy 11/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/docs copy 12/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/docs copy 13/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/docs copy 14/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/docs copy 15/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/docs copy 16/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/docs copy 4/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/docs copy 5/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/docs copy 6/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/docs copy 7/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/docs copy 8/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/docs copy 9/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

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

@@ -23,9 +23,16 @@ export default {
           },
           children: [
             {
-              path: "/docs3",
+              path: "/home",
               meta: {
-                title: "文档3",
+                title: "微软",
+                icon: "el-icon-s-flag",
+              },
+            },
+            {
+              path: "/docs",
+              meta: {
+                title: "文档",
                 icon: "el-icon-s-flag",
               },
             },
@@ -36,111 +43,20 @@ export default {
                 icon: "el-icon-s-flag",
               },
             },
-            {
-              path: "/docs2",
-              meta: {
-                title: "文档2",
-                icon: "el-icon-s-flag",
-              },
-            },
           ],
         },
         {
-          path: "/docs",
+          path: "/docs2",
           meta: {
-            title: "文档",
+            title: "文档2",
             icon: "el-icon-s-management",
             isLink: "https://www.ele.me",
           },
         },
         {
-          path: "/docs4",
+          path: "/docs3",
           meta: {
-            title: "文档4",
+            title: "文档3",
-            icon: "el-icon-s-management",
-          },
-        },
-        {
-          path: "/docs5",
-          meta: {
-            title: "文档5",
-            icon: "el-icon-s-management",
-          },
-        },
-        {
-          path: "/docs6",
-          meta: {
-            title: "文档6",
-            icon: "el-icon-s-management",
-          },
-        },
-        {
-          path: "/docs7",
-          meta: {
-            title: "文档7",
-            icon: "el-icon-s-management",
-          },
-        },
-        {
-          path: "/docs8",
-          meta: {
-            title: "文档8",
-            icon: "el-icon-s-management",
-          },
-        },
-        {
-          path: "/docs9",
-          meta: {
-            title: "文档9",
-            icon: "el-icon-s-management",
-          },
-        },
-        {
-          path: "/docs10",
-          meta: {
-            title: "文档10",
-            icon: "el-icon-s-management",
-          },
-        },
-        {
-          path: "/docs11",
-          meta: {
-            title: "文档11",
-            icon: "el-icon-s-management",
-          },
-        },
-        {
-          path: "/docs12",
-          meta: {
-            title: "文档12",
-            icon: "el-icon-s-management",
-          },
-        },
-        {
-          path: "/docs13",
-          meta: {
-            title: "文档13",
-            icon: "el-icon-s-management",
-          },
-        },
-        {
-          path: "/docs14",
-          meta: {
-            title: "文档14",
-            icon: "el-icon-s-management",
-          },
-        },
-        {
-          path: "/docs15",
-          meta: {
-            title: "文档15",
-            icon: "el-icon-s-management",
-          },
-        },
-        {
-          path: "/docs16",
-          meta: {
-            title: "文档16",
             icon: "el-icon-s-management",
           },
         },

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

@@ -1,11 +1,11 @@
 <template>
-  <Fashion />
+  <Defaults />
 </template>
 
 <script lang="ts">
-import Fashion from "/@/views/layout/fashion.vue";
+import Defaults from "/@/views/layout/defaults.vue";
 export default {
   name: "layout",
-  components: { Fashion },
+  components: { Defaults },
 };
 </script>

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

@@ -55,9 +55,14 @@ export default {
     cursor: pointer;
     font-size: 18px;
     margin-right: 15px;
+    color: var(--bg-topBarColor);
   }
   .layout-navbars-breadcrumb-span {
-    opacity: 0.8;
+    opacity: 0.7;
+    color: var(--bg-topBarColor);
+  }
+  :deep .el-breadcrumb__separator {
+    @extend .layout-navbars-breadcrumb-span;
   }
 }
 </style>

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

@@ -21,5 +21,6 @@ export default {
   align-items: center;
   border-bottom: 1px solid rgb(230, 230, 230);
   padding: 0 15px;
+  background-color: var(--bg-topBar);
 }
 </style>

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

@@ -7,43 +7,77 @@
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="primary" show-alpha size="small"></el-color-picker>
+            <el-color-picker v-model="primary" size="small" @change="onColorPickerChange('primary')">
+            </el-color-picker>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">success</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="success" show-alpha size="small"></el-color-picker>
+            <el-color-picker v-model="success" size="small" @change="onColorPickerChange('success')">
+            </el-color-picker>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">info</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="info" show-alpha size="small"></el-color-picker>
+            <el-color-picker v-model="info" size="small" @change="onColorPickerChange('info')">
+            </el-color-picker>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">warning</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="warning" show-alpha size="small"></el-color-picker>
+            <el-color-picker v-model="warning" size="small" @change="onColorPickerChange('warning')">
+            </el-color-picker>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">danger</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="danger" show-alpha size="small"></el-color-picker>
+            <el-color-picker v-model="danger" size="small" @change="onColorPickerChange('danger')">
+            </el-color-picker>
           </div>
         </div>
+        <el-divider content-position="left">菜单 / 顶栏</el-divider>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="topBar" show-alpha size="small"></el-color-picker>
+            <el-color-picker v-model="topBar" size="small" @change="onBgColorPickerChange('topBar')">
+            </el-color-picker>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">菜单背景</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="menuBar" show-alpha size="small"></el-color-picker>
+            <el-color-picker v-model="menuBar" size="small" @change="onBgColorPickerChange('menuBar')">
+            </el-color-picker>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex">
+          <div class="layout-breadcrumb-seting-bar-flex-label">顶栏默认字体颜色</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-color-picker v-model="topBarColor" size="small" @change="onBgColorPickerChange('topBarColor')">
+            </el-color-picker>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex">
+          <div class="layout-breadcrumb-seting-bar-flex-label">菜单默认字体颜色</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-color-picker v-model="menuBarColor" size="small" @change="onBgColorPickerChange('menuBarColor')">
+            </el-color-picker>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt10">
+          <div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景渐变</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="isCollapse"></el-switch>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt14">
+          <div class="layout-breadcrumb-seting-bar-flex-label">菜单背景渐变</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="isCollapse"></el-switch>
           </div>
         </div>
 
@@ -134,7 +168,7 @@
             <el-switch v-model="isCollapse"></el-switch>
           </div>
         </div>
-        <div class="layout-breadcrumb-seting-bar-flex mt14">
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">水印文案</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
             <el-input v-model="menuWidth" size="mini" style="width:90px;"></el-input>
@@ -143,9 +177,9 @@
 
         <!-- 布局切换 -->
         <el-divider content-position="left">布局切换</el-divider>
-        <div class="drawer-layout-content-flex">
+        <div class="layout-drawer-content-flex">
-          <!-- fashion 布局 -->
+          <!-- defaults 布局 -->
-          <div class="drawer-layout-content-item">
+          <div class="layout-drawer-content-item">
             <section class="el-container drawer-layout-active el-circular">
               <aside class="el-aside" style="width: 20px"></aside>
               <section class="el-container is-vertical">
@@ -155,12 +189,12 @@
             </section>
             <div class="layout-tips-warp-active layout-tips-warp">
               <div class="layout-tips-box">
-                <p class="layout-tips-txt">时尚</p>
+                <p class="layout-tips-txt">默认</p>
               </div>
             </div>
           </div>
           <!-- classic 布局 -->
-          <div class="drawer-layout-content-item">
+          <div class="layout-drawer-content-item">
             <section class="el-container is-vertical el-circular">
               <header class="el-header" style="height: 10px"></header>
               <section class="el-container">
@@ -176,8 +210,8 @@
               </div>
             </div>
           </div>
-          <!-- elegant 布局 -->
+          <!-- transverse 布局 -->
-          <div class="drawer-layout-content-item">
+          <div class="layout-drawer-content-item">
             <section class="el-container is-vertical el-circular">
               <header class="el-header" style="height: 10px"></header>
               <section class="el-container">
@@ -188,12 +222,12 @@
             </section>
             <div class="layout-tips-warp">
               <div class="layout-tips-box">
-                <p class="layout-tips-txt">典雅</p>
+                <p class="layout-tips-txt">横向</p>
               </div>
             </div>
           </div>
-          <!-- scitech 布局 -->
+          <!-- columns 布局 -->
-          <div class="drawer-layout-content-item">
+          <div class="layout-drawer-content-item">
             <section class="el-container el-circular">
               <aside class="el-aside-dark" style="width: 10px"></aside>
               <aside class="el-aside" style="width: 20px"></aside>
@@ -204,7 +238,7 @@
             </section>
             <div class="layout-tips-warp">
               <div class="layout-tips-box">
-                <p class="layout-tips-txt">科技</p>
+                <p class="layout-tips-txt">分栏</p>
               </div>
             </div>
           </div>
@@ -224,6 +258,7 @@
 
 <script lang="ts">
 import { toRefs, reactive } from "vue";
+import { getLightColor } from "/@/utils/theme.ts";
 export default {
   name: "layoutBreadcrumbSeting",
   setup() {
@@ -236,6 +271,8 @@ export default {
       danger: "#f56c6c",
       topBar: "#ffffff",
       menuBar: "#29384d",
+      topBarColor: "#606266",
+      menuBarColor: "#e6e6e6",
       isCollapse: false,
       menuWidth: 240,
     });
@@ -245,9 +282,26 @@ export default {
     const closeDrawer = () => {
       state.isDrawer = false;
     };
+    const onColorPickerChange = (color: string) => {
+      setPropertyFun(`--color-${color}`, state[color]);
+    };
+    const setPropertyFun = (color: string, targetVal: any) => {
+      document.documentElement.style.setProperty(color, targetVal);
+      for (let i = 1; i <= 9; i++) {
+        document.documentElement.style.setProperty(
+          `${color}-light-${i}`,
+          getLightColor(targetVal, i / 10)
+        );
+      }
+    };
+    const onBgColorPickerChange = (bg: string) => {
+      document.documentElement.style.setProperty(`--bg-${bg}`, state[bg]);
+    };
     return {
       openDrawer,
       closeDrawer,
+      onColorPickerChange,
+      onBgColorPickerChange,
       ...toRefs(state),
     };
   },
@@ -258,7 +312,9 @@ export default {
 .layout-breadcrumb-seting-bar {
   height: calc(100vh - 50px);
   padding: 0 15px;
-  overflow-x: hidden !important;
+  :deep .el-scrollbar__view {
+    overflow-x: hidden !important;
+  }
   .layout-breadcrumb-seting-bar-flex {
     display: flex;
     align-items: center;
@@ -267,13 +323,13 @@ export default {
       color: #666666;
     }
   }
-  .drawer-layout-content-flex {
+  .layout-drawer-content-flex {
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;
     align-content: flex-start;
     margin: 0 -5px;
-    .drawer-layout-content-item {
+    .layout-drawer-content-item {
       width: 50%;
       height: 70px;
       cursor: pointer;
@@ -311,14 +367,14 @@ export default {
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
-        border: 1px solid var(--color-primary-light-6);
+        border: 1px solid var(--color-primary-light-4);
         border-radius: 100%;
         padding: 4px;
         .layout-tips-box {
           width: 30px;
           height: 30px;
           z-index: 9;
-          border: 1px solid var(--color-primary-light-6);
+          border: 1px solid var(--color-primary-light-4);
           border-radius: 100%;
           .layout-tips-txt {
             position: relative;
@@ -327,7 +383,7 @@ export default {
             line-height: 1;
             letter-spacing: 2px;
             white-space: nowrap;
-            color: var(--color-primary-light-6);
+            color: var(--color-primary-light-4);
             text-align: center;
             transform: rotate(30deg);
             left: -1px;

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

@@ -63,12 +63,15 @@ export default {
     padding: 0 10px;
     cursor: pointer;
     transition: all 0.3s;
-    color: #000000;
+    color: var(--bg-topBarColor);
     height: 50px;
     line-height: 50px;
     &:hover {
       background: rgba(0, 0, 0, 0.04);
     }
   }
+  :deep .el-dropdown {
+    color: var(--bg-topBarColor);
+  }
 }
 </style>

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

@@ -50,23 +50,10 @@ export default {
       tagsRefsIndex: 0,
       arr2: [
         { id: 11, name: "微软", path: "/home" },
-        { id: 12, name: "亚马逊", path: "/docs" },
+        { id: 12, name: "文档", path: "/docs" },
-        { id: 13, name: "京东1", path: "/docs1" },
+        { id: 13, name: "文档1", path: "/docs1" },
-        { id: 15, name: "谷歌2", path: "/docs2" },
+        { id: 15, name: "文档2", path: "/docs2" },
-        { id: 1, name: "苹果3", path: "/docs3" },
+        { id: 1, name: "文档3", path: "/docs3" },
-        { id: 14, name: "苹果4", path: "/docs4" },
-        { id: 14, name: "苹果5", path: "/docs5" },
-        { id: 14, name: "苹果6", path: "/docs6" },
-        { id: 14, name: "苹果7", path: "/docs7" },
-        { id: 14, name: "苹果8", path: "/docs8" },
-        { id: 14, name: "苹果9", path: "/docs9" },
-        { id: 14, name: "苹果10", path: "/docs10" },
-        { id: 14, name: "苹果11", path: "/docs11" },
-        { id: 14, name: "苹果12", path: "/docs12" },
-        { id: 14, name: "苹果13", path: "/docs13" },
-        { id: 14, name: "苹果14", path: "/docs14" },
-        { id: 14, name: "苹果15", path: "/docs15" },
-        { id: 14, name: "苹果16", path: "/docs16" },
       ],
     });
     const initSortable = () => {
@@ -126,6 +113,7 @@ export default {
 <style scoped lang="scss">
 .layout-navbars-tagsview {
   flex: 1;
+  background-color: #ffffff;
   &-ul {
     list-style: none;
     margin: 0;
@@ -149,8 +137,9 @@ export default {
       cursor: pointer;
       justify-content: space-between;
       &:hover {
-        background: #f6f6f6;
+        background-color: var(--color-primary-light-9);
         color: var(--color-primary);
+        border-color: var(--color-primary-light-6);
       }
       &-iconfont {
         position: relative;

vue-admin-wonderful-next/src/views/layout/navMenu/vertical.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-menu router :default-active="defaultActive" background-color="#29384D" text-color="#e6e6e6">
+  <el-menu router :default-active="defaultActive" background-color="transparent">
     <template v-for="val in menuList">
       <el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
         <template #title>