'admin-21.01.04:编写布局配置菜单/顶栏，添加事件总线mitt等'

vue-admin-wonderful-next/package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "element-plus": "^v1.0.1-beta.19",
+    "mitt": "^2.1.0",
     "sortablejs": "^1.10.2",
     "vue": "^3.0.5",
     "vue-router": "^4.0.2"

vue-admin-wonderful-next/src/main.ts

@@ -6,5 +6,8 @@ import ElementPlus from 'element-plus'
 import 'element-plus/lib/theme-chalk/index.css'
 import '/@/theme/index.scss'
 import lang from 'element-plus/lib/locale/lang/zh-cn'
+import mitt from "mitt"
 
-createApp(App).use(router).use(ElementPlus, { locale: lang }).mount('#app')
+const app = createApp(App)
+app.use(router).use(ElementPlus, { locale: lang }).mount('#app')
+app.config.globalProperties.mittBus = mitt()

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

@@ -46,6 +46,9 @@ body,
   .el-scrollbar {
     width: 100%;
   }
+  .layout-aside-width {
+    width: 240px !important;
+  }
   .layout-scrollbar {
     @extend .el-scrollbar;
     padding: 15px;

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

@@ -675,6 +675,7 @@
   height: 50px !important;
   line-height: 50px !important;
   color: var(--bg-menuBarColor);
+  transition: none !important;
 }
 // horizontal 水平方向时
 .el-menu--horizontal > .el-menu-item.is-active,
@@ -698,7 +699,6 @@
   color: inherit;
   text-decoration: none;
 }
-
 // 默认 hover 时
 .el-menu-item:hover,
 .el-submenu__title:hover {
@@ -710,12 +710,21 @@
 }
 // 高亮时
 .el-menu-item.is-active {
+  color: set-color(primary);
+}
+.el-active-extend {
   color: #ffffff !important;
   background-color: set-color(primary) !important;
   i {
     color: #ffffff !important;
   }
 }
+.add-is-active {
+  @extend .el-active-extend;
+  &:hover {
+    @extend .el-active-extend;
+  }
+}
 
 /* Tabs 标签页
 ------------------------------- */

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

@@ -3,7 +3,7 @@ import { ElMessage } from 'element-plus'
 // hex颜色转rgb颜色
 export function hexToRgb(str: any) {
     let hexs: any = ''
-    let reg = /^\#?[0-9A-F]{6}$/
+    let reg = /^\#?[0-9A-Fa-f]{6}$/
     if (!reg.test(str)) return ElMessage({ type: 'warning', message: "输入错误的hex" })
     str = str.replace("#", "")
     hexs = str.match(/../g)
@@ -22,7 +22,7 @@ export function rgbToHex(r: any, g: any, b: any) {
 
 // 加深颜色值，level为加深的程度，限0-1之间
 export function getDarkColor(color: any, level: number) {
-    let reg = /^\#?[0-9A-F]{6}$/
+    let reg = /^\#?[0-9A-Fa-f]{6}$/
     if (!reg.test(color)) return ElMessage({ type: 'warning', message: "输入错误的hex颜色值" })
     let rgb = hexToRgb(color)
     for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level))
@@ -31,7 +31,7 @@ export function getDarkColor(color: any, level: number) {
 
 // 变浅颜色值，level为加深的程度，限0-1之间
 export function getLightColor(color: any, level: number) {
-    let reg = /^\#?[0-9A-F]{6}$/
+    let reg = /^\#?[0-9A-Fa-f]{6}$/
     if (!reg.test(color)) return ElMessage({ type: 'warning', message: "输入错误的hex颜色值" })
     let rgb = hexToRgb(color)
     for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])

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

@@ -1,5 +1,5 @@
 <template>
-  <el-aside width="240px">
+  <el-aside class="layout-aside-width">
     <el-scrollbar>
       <Vertical :menuList="menuList" />
     </el-scrollbar>

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

@@ -61,8 +61,9 @@ export default {
     opacity: 0.7;
     color: var(--bg-topBarColor);
   }
-  :deep .el-breadcrumb__separator {
+  ::v-deep(.el-breadcrumb__separator) {
-    @extend .layout-navbars-breadcrumb-span;
+    opacity: 0.7;
+    color: var(--bg-topBarColor);
   }
 }
 </style>

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

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

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

@@ -71,13 +71,19 @@
         <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>
+            <el-switch v-model="isTopBarColorGradual" @change="onTopBarGradualChange"></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>
+            <el-switch v-model="isMenuBarColorGradual" @change="onMenuBarGradualChange"></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="isMenuBarColorHighlight" @change="onMenuBarHighlightChange"></el-switch>
           </div>
         </div>
 
@@ -150,6 +156,12 @@
             <el-switch v-model="isCollapse"></el-switch>
           </div>
         </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">开启 Footer</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="isCollapse"></el-switch>
+          </div>
+        </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">灰色模式</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
@@ -257,11 +269,19 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive } from "vue";
+import {
+  toRefs,
+  reactive,
+  nextTick,
+  onBeforeMount,
+  onUnmounted,
+  getCurrentInstance,
+} from "vue";
 import { getLightColor } from "/@/utils/theme.ts";
 export default {
   name: "layoutBreadcrumbSeting",
   setup() {
+    const { proxy } = getCurrentInstance();
     const state = reactive({
       isDrawer: false,
       primary: "#409eff",
@@ -273,6 +293,9 @@ export default {
       menuBar: "#29384d",
       topBarColor: "#606266",
       menuBarColor: "#e6e6e6",
+      isTopBarColorGradual: false,
+      isMenuBarColorGradual: false,
+      isMenuBarColorHighlight: false,
       isCollapse: false,
       menuWidth: 240,
     });
@@ -296,12 +319,62 @@ export default {
     };
     const onBgColorPickerChange = (bg: string) => {
       document.documentElement.style.setProperty(`--bg-${bg}`, state[bg]);
+      onTopBarGradualChange();
+      onMenuBarGradualChange();
     };
+    const onTopBarGradualChange = () => {
+      setGraduaFun(
+        ".layout-navbars-breadcrumb-index",
+        state.isTopBarColorGradual,
+        state.topBar
+      );
+    };
+    const onMenuBarGradualChange = () => {
+      setGraduaFun(
+        ".layout-container .el-aside",
+        state.isMenuBarColorGradual,
+        state.menuBar
+      );
+    };
+    const setGraduaFun = (el: string, bool: boolean, color: string) => {
+      nextTick(() => {
+        let els = document.querySelector(el);
+        if (bool)
+          els.setAttribute(
+            "style",
+            `background-image:linear-gradient(to bottom left , ${color}, ${getLightColor(
+              color,
+              0.6
+            )})`
+          );
+        else els.setAttribute("style", `background-image:${color}`);
+      });
+    };
+    const onMenuBarHighlightChange = () => {
+      nextTick(() => {
+        let els = document.querySelector(".el-menu-item.is-active");
+        let attr = "el-menu-item is-active";
+        if (state.isMenuBarColorHighlight)
+          els.setAttribute("class", `${attr} add-is-active`);
+        else els.setAttribute("class", `${attr}`);
+      });
+    };
+    onBeforeMount(() => {
+      proxy.mittBus.on("onMenuClick", () => {
+        onMenuBarHighlightChange();
+      });
+    });
+    onUnmounted(() => {
+      proxy.mittBus.off("onMenuClick", () => {});
+    });
     return {
       openDrawer,
       closeDrawer,
       onColorPickerChange,
       onBgColorPickerChange,
+      onTopBarGradualChange,
+      onMenuBarGradualChange,
+      onMenuBarHighlightChange,
       ...toRefs(state),
     };
   },
@@ -312,7 +385,7 @@ export default {
 .layout-breadcrumb-seting-bar {
   height: calc(100vh - 50px);
   padding: 0 15px;
-  :deep .el-scrollbar__view {
+  ::v-deep(.el-scrollbar__view) {
     overflow-x: hidden !important;
   }
   .layout-breadcrumb-seting-bar-flex {
@@ -351,15 +424,13 @@ export default {
           background-color: #e9eef3;
         }
       }
-      .border-color-09f {
-        border: 1px solid var(--color-primary) !important;
-      }
       .el-circular {
         border-radius: 2px;
         overflow: hidden;
       }
       .drawer-layout-active {
-        @extend .border-color-09f;
+        border: 1px solid;
+        border-color: var(--color-primary);
       }
       .layout-tips-warp,
       .layout-tips-warp-active {
@@ -367,14 +438,16 @@ export default {
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
-        border: 1px solid var(--color-primary-light-4);
+        border: 1px solid;
+        border-color: 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-4);
+          border: 1px solid;
+          border-color: var(--color-primary-light-4);
           border-radius: 100%;
           .layout-tips-txt {
             position: relative;
@@ -395,9 +468,11 @@ export default {
         }
       }
       .layout-tips-warp-active {
-        @extend .border-color-09f;
+        border: 1px solid;
+        border-color: var(--color-primary);
         .layout-tips-box {
-          @extend .border-color-09f;
+          border: 1px solid;
+          border-color: var(--color-primary);
           .layout-tips-txt {
             color: var(--color-primary) !important;
             background-color: #e9eef3 !important;

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

@@ -70,7 +70,7 @@ export default {
       background: rgba(0, 0, 0, 0.04);
     }
   }
-  :deep .el-dropdown {
+  ::v-deep(.el-dropdown) {
     color: var(--bg-topBarColor);
   }
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <el-menu router :default-active="defaultActive" background-color="transparent">
+  <el-menu router :default-active="defaultActive" background-color="transparent" @select="onMenuClick">
     <template v-for="val in menuList">
       <el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
         <template #title>
@@ -18,7 +18,13 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, defineComponent } from "vue";
+import {
+  toRefs,
+  reactive,
+  computed,
+  defineComponent,
+  getCurrentInstance,
+} from "vue";
 import { useRoute, onBeforeRouteUpdate } from "vue-router";
 import SubItem from "/@/views/layout/navMenu/subItem.vue";
 export default defineComponent({
@@ -33,6 +39,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { proxy } = getCurrentInstance();
     const route = useRoute();
     const state = reactive({
       defaultActive: route.path,
@@ -43,8 +50,12 @@ export default defineComponent({
     onBeforeRouteUpdate((to) => {
       state.defaultActive = to.path;
     });
+    const onMenuClick = (index, path) => {
+      proxy.mittBus.emit("onMenuClick");
+    };
     return {
       menuList,
+      onMenuClick,
       ...toRefs(state),
     };
   },

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

@@ -74,7 +74,7 @@ export default {
     left: 50%;
     transform: translate(-50%, -50%) translate3d(0, 0, 0);
     background-color: rgba(255, 255, 255, 0.95);
-    box-shadow: 0 2px 12px 0 var(--color-primary-light-1);
+    box-shadow: 0 2px 12px 0 var(--color-primary-light-7);
     border-radius: 4px;
     transition: height 0.2s linear;
     height: 480px;