up

package.json

@@ -29,12 +29,12 @@
     "devDependencies": {
         "@vitejs/plugin-vue": "^3.1.0",
         "@vue/compiler-sfc": "^3.2.39",
-        "autoprefixer": "^10.4.7",
+        "autoprefixer": "^10.4.9",
         "postcss": "^8.4.16",
         "sass": "^1.54.9",
         "tailwindcss": "^3.1.8",
         "unplugin-auto-import": "^0.11.2",
-        "unplugin-vue-components": "^0.22.4",
+        "unplugin-vue-components": "^0.22.7",
         "vfonts": "^0.0.3",
         "vite": "^3.1.0"
     }

src/layout/index.vue

@@ -1,12 +1,12 @@
 <template>
     <el-container class="hc-layout-box">
-        <div class="hc-layout-bg-box" :class="isCollapse?'collapse':''" v-show="MenuBarKey === 'home-index'">
+        <div class="hc-layout-bg-box" v-show="MenuBarKey === 'home-index'">
             <img :src="HomeTheme.bg" alt="" v-if="HomeTheme.bg" crossOrigin="anonymous">
         </div>
-        <el-aside :width="isCollapse?'120px':'250px'" class="hc-aside-box" :class="isCollapse?'collapse':''">
+        <el-aside :width="isCollapse?'120px':'250px'" class="hc-aside-box" :class="[isCollapse?'collapse':'', MenuBarKey]">
             <div class="hc-aside-logo-box" @click="logoClick">
                 <img class="logo-img" :src="getAssetsHomeFile(`${AppColor.name}.png`)" alt="">
-                <img class="logo-img-1" :src="NameWhite" alt="" v-show="!isCollapse">
+                <img class="logo-img-1" :src="MenuBarKey === 'home-index' ? NameWhite : NameDark" alt="" v-show="!isCollapse">
             </div>
             <div class="hc-aside-menu-box">
                 <el-scrollbar>

src/layout/layout.scss

@@ -5,7 +5,7 @@
     .hc-layout-bg-box {
         position: absolute;
         bottom: 0;
-        left: 190px;
+        left: 0;
         right: 0;
         top: 0;
         z-index: 0;
@@ -15,16 +15,13 @@
             height: 100%;
             object-fit: cover;
         }
-        &.collapse {
-            left: 75px;
-        }
     }
     .hc-aside-box {
         position: relative;
-        background: #333333;
-        color: #ffffff;
+        color: #838791;
+        background: #f1f5f8;
+        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
         border-radius: 0 60px 0 0;
-        box-shadow: 0 2px 10px 0 rgba(32,37,50,0.03);
         z-index: 1;
         .hc-aside-logo-box {
             position: relative;
@@ -66,7 +63,7 @@
                 top: 0;
                 width: 100%;
                 height: 1px;
-                background-image: linear-gradient(90deg, rgba(102,102,102,0.00) 11%, #666666 35%, #666666 64%, rgba(102,102,102,0.00) 86%);
+                background-image: linear-gradient(90deg, rgba(102,102,102,0.00) 11%, #dbe8f3 35%, #dbe8f3 64%, rgba(102,102,102,0.00) 86%);
             }
             div {
                 position: relative;
@@ -77,9 +74,10 @@
                 align-items: center;
                 font-size: 26px;
                 &.active {
-                    border-radius: 6px;
+                    color: white;
                     background: var(--el-color-primary);
-                    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.3), -1px 0 8px 0 #707070;
+                    border-radius: 6px;
+                    box-shadow: 3px 2px 8px 0 var(--el-color-primary-light-5);
                 }
                 &:not(.active) {
                     cursor: pointer;
@@ -95,6 +93,16 @@
                 left: initial;
             }
         }
+        &.home-index {
+            color: white;
+            background: rgba( 255, 255, 255, 0.25 );
+            box-shadow: 0 2px 10px 0 rgba(32,37,50,0.03);
+            backdrop-filter: blur( 4px );
+            -webkit-backdrop-filter: blur( 4px );
+            .hc-aside-menu-box .hc-aside-menu.el-menu {
+                --el-menu-text-color: white;
+            }
+        }
     }
     .hc-container-view {
         position: relative;

src/layout/modules/MenuBar.vue

@@ -2,8 +2,10 @@
     <el-menu class="hc-aside-menu" :default-active="curKey" :collapse="isCollapse" unique-opened>
         <el-menu-item index="home-index" @click="MenuClick({code: 'home-index'})">
             <div class="hc-aside-menu-item">
-                <HcIcon name="home-3" :fill="curKey === 'home-index'" class="hc-menu-icon"/>
-                <div class="name">首页</div>
+                <div class="menu---item">
+                    <HcIcon name="home-3" :fill="curKey === 'home-index'" class="hc-menu-icon"/>
+                    <div class="name">首页</div>
+                </div>
             </div>
         </el-menu-item>
         <MenuItem :datas="datas" :cur="curKey" :collapse="isCollapse" @change="MenuClick"/>
@@ -51,13 +53,14 @@ const MenuClick = (item) => {
 
 <style lang="scss">
 .hc-aside-menu.el-menu {
-    --el-menu-bg-color: #333333;
-    --el-menu-text-color: #ffffff;
+    --el-menu-bg-color: initial;
+    --el-menu-text-color: #838791;
     --el-menu-active-color: #ffffff;
     --el-menu-hover-text-color: var(--el-color-primary);
     --el-menu-hover-bg-color: initial;
     --el-menu-item-font-size: 16px;
     --el-menu-item-height: 48px;
+    margin-left: -10px;
     border-right: 0;
     padding: 8px 0;
     &.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item,
@@ -70,7 +73,7 @@ const MenuClick = (item) => {
         padding: 0;
     }
     .el-menu-item, .el-sub-menu {
-        padding: 15px 0 0 20px !important;
+        padding: 15px 0 0 30px !important;
         min-width: initial;
         transition: 0.2s;
         .hc-aside-menu-item {
@@ -81,6 +84,9 @@ const MenuClick = (item) => {
             display: flex;
             align-items: center;
             transition: 0.2s;
+            .menu---item {
+                display: contents;
+            }
             .hc-menu-icon {
                 font-size: 22px;
                 margin-right: 10px;
@@ -120,7 +126,7 @@ const MenuClick = (item) => {
         .hc-aside-menu-item {
             --radius-size: 20px;
             background-color: var(--el-color-primary);
-            box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.17), 0 0 8px 2px rgba(112, 112, 112, 0.58);
+            box-shadow: 0 2px 8px 0 var(--el-color-primary-light-5);
             &::before, &::after {
                 content: '';
                 display: block;
@@ -149,6 +155,7 @@ const MenuClick = (item) => {
     }
 }
 .hc-aside-menu.el-menu--collapse {
+    margin-left: 0;
     width: 120px;
     .el-sub-menu__title {
         height: inherit;
@@ -167,8 +174,9 @@ const MenuClick = (item) => {
         width: 120px;
         transition: 0.2s;
         .hc-aside-menu-item {
-            display: block;
-            align-items: initial;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
             width: 60px;
             height: 60px;
             text-align: center;
@@ -176,6 +184,10 @@ const MenuClick = (item) => {
             padding: 5px;
             flex: initial;
             transition: 0.2s;
+            .menu---item {
+                position: relative;
+                display: block;
+            }
             .hc-menu-icon {
                 margin-right: 0;
             }
@@ -213,7 +225,7 @@ const MenuClick = (item) => {
         .hc-aside-menu-item {
             color: #ffffff !important;
             background-color: var(--el-color-primary);
-            box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.5), -3px -3px 6px 0 rgba(153, 153, 153, 0.8);
+            box-shadow: 0 2px 8px 0 var(--el-color-primary-light-5);
             &::before, &::after {
                 content: '';
                 display: none;
@@ -221,22 +233,25 @@ const MenuClick = (item) => {
         }
     }
 }
-.el-popper.is-light {
+.aside-menu-popper.el-popper.is-light {
+    background: initial !important;
     border: 0 !important;
 }
-.el-popper .el-menu--vertical .el-menu {
-    --el-menu-bg-color: #333333;
-    --el-menu-text-color: #ffffff;
+.aside-menu-popper.el-popper .el-menu--vertical .el-menu {
+    --el-menu-bg-color: #f1f5f8;
+    --el-menu-text-color: #838791;
     --el-menu-active-color: #ffffff;
     --el-menu-hover-bg-color: initial;
     --el-menu-item-font-size: 16px;
+    background-color: #f1f5f8;
+    color: #838791;
     .el-sub-menu__title {
         padding: 0;
         justify-content: center;
         transition: 0.2s;
     }
     .el-menu-item, .el-sub-menu {
-        color: #fff;
+        color: inherit;
         padding: 0;
         transition: 0.2s;
         .hc-aside-menu-item {
@@ -246,6 +261,9 @@ const MenuClick = (item) => {
             display: flex;
             align-items: center;
             transition: 0.2s;
+            .menu---item {
+                display: contents;
+            }
             .hc-menu-icon {
                 font-size: 22px;
                 margin-right: 10px;
@@ -259,6 +277,9 @@ const MenuClick = (item) => {
                 vertical-align: initial;
             }
         }
+        &.is-active {
+            color: white;
+        }
     }
     .el-sub-menu .el-icon {
         display: none;
@@ -294,4 +315,12 @@ const MenuClick = (item) => {
         color: var(--el-color-primary);
     }
 }
+
+.aside-menu-popper.el-popper .el-menu--vertical.home-index .el-menu {
+    --el-menu-bg-color: initial;
+    --el-menu-text-color: initial;
+    color: white;
+    background-color: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(4px);
+}
 </style>

src/layout/modules/MenuItem.vue

@@ -1,13 +1,15 @@
 <template>
     <template v-for="item in datas">
-        <el-sub-menu :index="item?.code" :popper-offset="0" v-if="item?.children && item?.children.length > 0">
+        <el-sub-menu :index="item?.code" :popper-offset="0" :popper-class="'aside-menu-popper ' + curKey" v-if="item?.children && item?.children.length > 0">
             <template #title>
                 <div class="hc-aside-menu-item">
                     <!-- v-if="item?.source"-->
-                    <HcIcon name="home-3" :fill="curKey === item?.code" class="hc-menu-icon"/>
-                    <div class="name truncate" v-if="isCollapse">{{ item?.name.substring(0,2) }}</div>
-                    <div class="name truncate" v-else>{{ item?.name }}</div>
-                    <el-badge :value="20" v-if="item?.code === 'tasks'"/>
+                    <div class="menu---item">
+                        <HcIcon name="home-3" :fill="curKey === item?.code" class="hc-menu-icon"/>
+                        <div class="name truncate" v-if="isCollapse">{{ item?.name.substring(0,2) }}</div>
+                        <div class="name truncate" v-else>{{ item?.name }}</div>
+                        <el-badge :value="20" v-if="item?.code === 'tasks'"/>
+                    </div>
                 </div>
                 <HcIcon name="arrow-down-s" ui="el-icon el-sub-menu__icon-arrow"/>
             </template>
@@ -15,10 +17,12 @@
         </el-sub-menu>
         <el-menu-item :index="item?.code" v-else @click="MenuClick(item)">
             <div class="hc-aside-menu-item">
-                <HcIcon name="home-3" :fill="curKey === item?.key" class="hc-menu-icon" v-if="item?.icon"/>
-                <div class="name truncate" v-if="isCollapse">{{ item?.name.substring(0,2) }}</div>
-                <div class="name truncate" v-else>{{ item?.name }}</div>
-                <el-badge :value="12" v-if="item?.code === 'tasks-data' || item?.code === 'message-data'"/>
+                <div class="menu---item">
+                    <HcIcon name="home-3" :fill="curKey === item?.key" class="hc-menu-icon" v-if="item?.icon"/>
+                    <div class="name truncate" v-if="isCollapse">{{ item?.name.substring(0,2) }}</div>
+                    <div class="name truncate" v-else>{{ item?.name }}</div>
+                    <el-badge :value="12" v-if="item?.code === 'tasks-data' || item?.code === 'message-data'"/>
+                </div>
             </div>
         </el-menu-item>
     </template>

src/styles/app/element.scss

@@ -501,3 +501,5 @@
     background: linear-gradient(45deg, #b2e68d, #bce689);
     right: 0;
 }
+
+

src/views/home/config.vue

@@ -1,5 +1,5 @@
 <template>
-    <HcCard actionSize="lg">
+    <HcCard actionSize="lg" scrollbar>
         <div class="text-lg font-medium mb-4">主题模式<span class="text-sm text-slate-400 font-light ml-4">深色模式还未适配，暂不推荐使用深色模式</span></div>
         <div class="hc-theme-box mb-8">
             <el-radio-group v-model="UserTheme" @change="ThemeTabsUpdate">

yarn.lock

@@ -259,13 +259,13 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
-autoprefixer@^10.4.7:
-  version "10.4.8"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.8.tgz#92c7a0199e1cfb2ad5d9427bd585a3d75895b9e5"
-  integrity sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==
+autoprefixer@^10.4.9:
+  version "10.4.9"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.9.tgz#40f932f7d0535264823882031f9254ea72c693e5"
+  integrity sha512-Uu67eduPEmOeA0vyJby5ghu1AAELCCNSsLAjK+lz6kYzNM5sqnBO36MqfsjhPjQF/BaJM5U/UuFYyl7PavY/wQ==
   dependencies:
     browserslist "^4.21.3"
-    caniuse-lite "^1.0.30001373"
+    caniuse-lite "^1.0.30001394"
     fraction.js "^4.2.0"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
@@ -323,11 +323,16 @@ camelcase-css@^2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001373:
+caniuse-lite@^1.0.30001370:
   version "1.0.30001390"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001390.tgz#158a43011e7068ef7fc73590e9fd91a7cece5e7f"
   integrity sha512-sS4CaUM+/+vqQUlCvCJ2WtDlV81aWtHhqeEVkLokVJJa3ViN4zDxAGfq9R8i1m90uGHxo99cy10Od+lvn3hf0g==
 
+caniuse-lite@^1.0.30001394:
+  version "1.0.30001399"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001399.tgz#1bf994ca375d7f33f8d01ce03b7d5139e8587873"
+  integrity sha512-4vQ90tMKS+FkvuVWS5/QY1+d805ODxZiKFzsU8o/RsVJz49ZSRR8EjykLJbqhzdPgadbX6wB538wOzle3JniRA==
+
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -620,6 +625,17 @@ fast-glob@^3.2.11:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.2.12:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fastq@^1.6.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
@@ -787,7 +803,7 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
-magic-string@^0.26.2:
+magic-string@^0.26.2, magic-string@^0.26.3:
   version "0.26.3"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.3.tgz#25840b875140f7b4785ab06bddc384270b7dd452"
   integrity sha512-u1Po0NDyFcwdg2nzHT88wSK0+Rih0N1M+Ph1Sp08k8yvFFU3KR72wryS7e1qMPJypt99WB7fIFVCA92mQrMjrg==
@@ -1164,23 +1180,23 @@ unplugin-auto-import@^0.11.2:
     unimport "^0.6.7"
     unplugin "^0.9.3"
 
-unplugin-vue-components@^0.22.4:
-  version "0.22.4"
-  resolved "https://registry.yarnpkg.com/unplugin-vue-components/-/unplugin-vue-components-0.22.4.tgz#774a96339368f3b8436fa7c20e059d9fee42c983"
-  integrity sha512-2rRZcM9OnJGXnYxQNfaceEYuPeVACcWySIjy8WBwIiN3onr980TmA3XE5pRJFt8zoQrUA+c46oyIq96noLqrEQ==
+unplugin-vue-components@^0.22.7:
+  version "0.22.7"
+  resolved "https://registry.yarnpkg.com/unplugin-vue-components/-/unplugin-vue-components-0.22.7.tgz#91c7e308fec33af83729fd22d51d81f18bb558b1"
+  integrity sha512-MJEAKJF9bRykTRvJ4WXF0FNMAyt1PX3iwpu2NN+li35sAKjQv6sC1col5aZDLiwDZDo2AGwxNkzLJFKaun9qHw==
   dependencies:
     "@antfu/utils" "^0.5.2"
     "@rollup/pluginutils" "^4.2.1"
     chokidar "^3.5.3"
     debug "^4.3.4"
-    fast-glob "^3.2.11"
+    fast-glob "^3.2.12"
     local-pkg "^0.4.2"
-    magic-string "^0.26.2"
+    magic-string "^0.26.3"
     minimatch "^5.1.0"
     resolve "^1.22.1"
-    unplugin "^0.9.0"
+    unplugin "^0.9.5"
 
-unplugin@^0.9.0, unplugin@^0.9.3:
+unplugin@^0.9.0, unplugin@^0.9.3, unplugin@^0.9.5:
   version "0.9.5"
   resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.9.5.tgz#2e546c044e0631e699ebd6fb521eeb7bbcb8899f"
   integrity sha512-luraheyfxwtvkvHpsOvMNv7IjLdORTWKZp0gWYNHGLi2ImON3iIZOj464qEyyEwLA/EMt12fC415HW9zRpOfTg==