refactor:框架整体风格更新

TODO.md

@@ -0,0 +1 @@
+-   自定义 SVG 图标颜色显示异常，初始颜色不对，鼠标移入颜色闪烁

src/components/extra/ElIcon.vue

@@ -51,5 +51,6 @@
     svg.x-icon {
         width: v-bind(size);
         height: v-bind(size);
+        fill: v-bind(size);
     }
 </style>

src/configs/index.js

@@ -11,4 +11,8 @@ export default {
      * 是否使用本地路由
      */
     useLocalRouter: true,
+    /**
+     * 项目名称
+     */
+    projectName: '马士兵严选管理平台',
 };

src/layouts/components/aside.vue

@@ -38,14 +38,16 @@
         flex: 1;
         width: @layout-aside-width;
         height: 100%;
-        background-color: @color-black;
+        padding: @layout-space 0;
+        box-sizing: border-box;
+        background-color: @layout-aside-bgc;
         :deep(.el-scrollbar__view) {
             height: 100%;
             .el-menu {
                 --el-menu-bg-color: transparent;
                 --el-menu-text-color: @layout-aside-fc;
                 --el-menu-item-height: @layout-aside-item-size;
-                --el-menu-hover-bg-color: @layout-aside-fc2;
+                --el-menu-hover-bg-color: @layout-aside-bgc-hover;
                 border-right: none;
                 width: 100%;
                 display: flex;
@@ -64,9 +66,11 @@
                     P {
                         line-height: 1;
                     }
+                    &:hover {
+                        color: @layout-aside-fc-hover;
+                    }
                     &.is-active {
-                        background-color: var(--el-menu-active-color);
+                        color: @layout-aside-fc-active;
-                        color: @layout-aside-fc;
                     }
                     + .el-menu-item {
                         margin-top: @layout-space;

src/layouts/components/header.vue

@@ -1,5 +1,7 @@
 <template>
     <div class="layout-header">
+        <LayoutLogo />
+        <LayoutTitle />
         <div class="header-left">
             <el-icon :name="collapseMenu ? 'menu-unfold-fill' : 'menu-fold-fill'" size="16" @click="handleCollapse" />
             <LayoutBreakcrumb />
@@ -12,6 +14,8 @@
 </template>
 
 <script setup>
+    import LayoutLogo from './logo.vue';
+    import LayoutTitle from './title.vue';
     import LayoutBreakcrumb from './breakcrumb.vue';
     import LayoutProfile from './profile.vue';
     import LayoutOperation from './operation.vue';
@@ -28,10 +32,8 @@
         flex-shrink: 0;
         display: flex;
         align-items: center;
-        justify-content: space-between;
         background-color: @layout-header-bgc;
         color: @layout-header-fc;
-        box-shadow: @layout-shadow;
         .header-left,
         .header-right {
             height: @layout-header-height;
@@ -39,6 +41,9 @@
             display: flex;
             align-items: center;
         }
+        .header-right {
+            margin-left: auto;
+        }
         .x-icon {
             border-radius: @layout-border-radius;
             cursor: pointer;

src/layouts/components/logo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="layout-logo">
-        <el-icon name="msb" svg :size="size" />
+        <el-icon name="logo" svg :size="size" color="#fff" />
     </div>
 </template>
 
@@ -16,9 +16,11 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: @color-black;
+        background-color: @layout-aside-bgc;
         .x-icon {
-            border-radius: @layout-border-radius;
+            border-radius: @layout-border-radius-large;
+            padding: @layout-space-small;
+            background: linear-gradient(180deg, #77b4f6 2%, #4481ff 100%);
         }
     }
 </style>

src/layouts/components/menu-item.vue

@@ -34,7 +34,7 @@
         min-width: unset;
         border-radius: @layout-border-radius;
         &:hover {
-            color: @layout-menu-hover-fc;
+            background-color: @layout-menu-active-bgc;
         }
         &.is-active {
             background-color: @layout-menu-active-bgc;
@@ -62,6 +62,7 @@
         :deep(.el-menu) {
             padding: 0 !important;
             border-radius: @layout-border-radius;
+            color: @color-white3;
         }
     }
 </style>

src/layouts/components/menu.vue

@@ -1,7 +1,5 @@
 <template>
     <el-scrollbar class="layout-menu" :class="{ collapse: collapseMenu }">
-        <div class="title">马士兵严选后台管理平台</div>
-        <el-divider>{{ activeAsideName }}</el-divider>
         <el-menu unique-opened :default-active="activeMenu" @select="handleSelect">
             <MenuItem v-for="(item, index) in menuList" :key="index" :menu-item="item" />
         </el-menu>
@@ -12,7 +10,6 @@
     import MenuItem from './menu-item.vue';
     const router = useRouter();
     const store = useStore();
-    const activeAsideName = computed(() => store.getters['layout/activeAsideName']);
     const activeAside = computed(() => store.state.layout.activeAside);
     const menuList = computed(() => store.getters['layout/menuList']);
     const activeMenu = computed(() => store.state.layout.activeMenu);
@@ -46,13 +43,12 @@
 
 <style lang="less" scoped>
     .layout-menu {
-        flex: 1;
         width: @layout-menu-width;
         height: 100%;
         background-color: @layout-menu-bgc;
-        box-shadow: @layout-shadow;
+        padding: @layout-space;
-        padding: 0 @layout-space;
         transition: width 0.3s;
+        box-sizing: border-box;
         &.collapse {
             width: 0;
             padding: 0;
@@ -65,29 +61,9 @@
         :deep(*) {
             white-space: nowrap;
         }
-        .title {
-            width: 100%;
-            height: @layout-header-height;
-            line-height: @layout-header-height;
-            font-size: @layout-h2;
-            color: @layout-menu-active-fc;
-            text-align: center;
-            .text-overflow();
-        }
-        .el-divider {
-            margin: 0 0 @layout-space-super 0;
-            border-color: @color-ghost-white;
-            :deep(.el-divider__text) {
-                color: @layout-menu-active-fc;
-                background-color: @layout-menu-bgc;
-            }
-        }
         :deep(.el-scrollbar__view) {
             height: 100%;
             .el-menu {
-                --el-menu-bg-color: transparent;
-                --el-menu-text-color: @layout-menu-fc;
-                --el-menu-hover-bg-color: @layout-menu-hover-bgc;
                 border-right: none;
             }
         }

src/layouts/components/tabs.vue

@@ -75,7 +75,7 @@
         align-items: flex-end;
         justify-content: space-between;
         overflow: hidden;
-        box-shadow: fade(@layout-header-fc, 15%) 0 1px 5px;
+        box-shadow: @layout-shadow;
         background-color: @layout-header-bgc;
         color: @layout-header-fc;
         .el-tabs {

src/layouts/components/title.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="layout-title" :class="{ collapse: collapseMenu }">
+        <div class="title">{{ config.projectName }}</div>
+    </div>
+</template>
+
+<script setup>
+    import config from '@/configs';
+    const store = useStore();
+    const activeAsideName = computed(() => store.getters['layout/activeAsideName']);
+    const collapseMenu = computed(() => store.getters['layout/collapseMenu']);
+</script>
+
+<style lang="less" scoped>
+    .layout-title {
+        width: @layout-menu-width;
+        height: 100%;
+        background-color: @layout-menu-bgc;
+        padding: 0 @layout-space;
+        transition: width 0.3s;
+        color: @layout-title-fc;
+        &.collapse {
+            width: 0;
+            padding: 0;
+            overflow: hidden;
+            :deep(*) {
+                opacity: 0;
+                transition: opacity 0.3s;
+            }
+        }
+        :deep(*) {
+            white-space: nowrap;
+        }
+        .title {
+            width: 100%;
+            height: @layout-header-height;
+            line-height: @layout-header-height;
+            font-size: @layout-h2;
+            text-align: center;
+            .text-overflow();
+        }
+    }
+</style>

src/layouts/default.vue

@@ -1,14 +1,15 @@
 <template>
     <div class="layout-container layout-default">
+        <div class="layout-top">
+            <LayoutHeader />
+        </div>
         <div class="layout-left">
-            <LayoutLogo />
             <LayoutAside />
         </div>
         <div class="layout-center">
             <LayoutMenu />
         </div>
         <div class="layout-right">
-            <LayoutHeader />
             <LayoutTabs />
             <LayoutMain />
             <LayoutFooter />
@@ -18,7 +19,6 @@
 
 <script setup>
     import LayoutMain from './components/main.vue';
-    import LayoutLogo from './components/logo.vue';
     import LayoutAside from './components/aside.vue';
     import LayoutMenu from './components/menu.vue';
     import LayoutHeader from './components/header.vue';
@@ -34,10 +34,21 @@
     }
     .layout-default {
         display: flex;
+        flex-wrap: wrap;
+        .layout-top {
+            width: 100%;
+            box-shadow: @layout-shadow;
+            z-index: 10;
+        }
         .layout-left {
             display: flex;
             flex-direction: column;
             box-shadow: @layout-shadow;
+            z-index: 9;
+        }
+        .layout-center {
+            box-shadow: @layout-shadow;
+            z-index: 9;
         }
         .layout-right {
             flex: 1;

src/styles/globalVariables.module.less

@@ -1,10 +1,13 @@
 /* color */
 @color-black: #282c34;
-@color-gray: #999;
+@color-gray: #c7cbce;
 @color-white: #fff;
+@color-white2: #ccc;
+@color-white3: #999;
+@color-white4: #666;
 @color-white-dark: #f8f8f8;
 @color-primary: #4481ff;
-@color-primary-white: #e8f4ff;
+@color-primary-white: lighten(@color-primary, 30%);
 
 @color-ghost-white: fade(@color-white, 10%);
 @color-ghost-black: fade(@color-black, 10%);
@@ -34,20 +37,23 @@
 @layout-space-max: 30px;
 @layout-shadow: fade(@color-black, 20%) 0px 0px 5px;
 
-@layout-aside-bgc: @color-black;
+@layout-aside-bgc: @color-white;
-@layout-aside-fc: @color-white;
+@layout-aside-bgc-hover: darken(@layout-aside-bgc, 10%);
-@layout-aside-fc2: lighten(@color-black, 20%);
+@layout-aside-fc: @color-gray;
+@layout-aside-fc-hover: lighten(@layout-aside-fc-active, 10%);
+@layout-aside-fc-active: @color-primary;
 @layout-aside-width: 80px;
 @layout-aside-item-size: 68px;
 
 @layout-menu-width: 200px;
-@layout-menu-bgc: lighten(@color-black, 20%);
+@layout-menu-bgc: @color-white;
-@layout-menu-fc: darken(@color-white, 20%);
+@layout-menu-fc: @color-white4;
-@layout-menu-ic: darken(@color-white, 20%);
+@layout-menu-ic: @color-white3;
 @layout-menu-hover-bgc: lighten(@color-black, 25%);
-@layout-menu-hover-fc: darken(@color-white, 10%);
+@layout-menu-active-fc: @color-primary;
-@layout-menu-active-fc: @color-white;
+@layout-menu-active-bgc: @color-primary-white;
-@layout-menu-active-bgc: lighten(@color-black, 35%);
+
+@layout-title-fc: @color-black;
 
 @layout-header-height: 60px;
 @layout-header-bgc: @color-white;

src/views/global/login.vue

@@ -4,7 +4,7 @@
             <div class="logo">
                 <el-icon name="logo" svg color="#69ADE5" size="50"></el-icon>
             </div>
-            <div class="title">马士兵严选管理平台</div>
+            <div class="title">{{ config.projectName }}</div>
             <div class="sub">登录您的管理账号</div>
             <el-form ref="refsForm" class="content" :model="form" :rules="rules" size="large">
                 <el-form-item prop="phone">
@@ -40,6 +40,8 @@
 </template>
 
 <script setup>
+    import config from '@/configs';
+
     const { proxy } = getCurrentInstance();
     const store = useStore();