up

src/layout/index.vue

@@ -1,26 +1,40 @@
 <template>
     <el-container class="hc-layout-box">
-        <el-aside width="250px" class="hc-aside-box">
+        <div class="hc-layout-bg-box" :class="isCollapse?'collapse':''" 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':''">
             <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="">
+                <img class="logo-img-1" :src="NameWhite" alt="" v-show="!isCollapse">
             </div>
             <div class="hc-aside-menu-box">
                 <el-scrollbar>
-                    <MenuBar :datas="MenuBarData" :cur="MenuBarKey" @change="MenuBarChange"/>
+                    <MenuBar :datas="MenuBarData" :cur="MenuBarKey" :collapse="isCollapse" @change="MenuBarChange"/>
                 </el-scrollbar>
             </div>
             <div class="hc-aside-bar-box">
-                <div class="active">
+                <div :class="isCollapse?'':'active'" @click="collapseChange(false)">
                     <HcIcon name="width_normal"/>
                 </div>
-                <div>
+                <div :class="isCollapse?'active':''" @click="collapseChange(true)" v-show="!isCollapse">
                     <HcIcon name="width_full"/>
                 </div>
             </div>
         </el-aside>
-        <el-container>
-            <el-header class="hc-header-view">Header</el-header>
+        <el-container class="hc-container-view" :class="MenuBarKey === 'home-index'?'home':''">
+            <el-header class="hc-header-view">
+                <div class="hc-header-page-name">首页</div>
+                <div class="hc-header-content">
+                    <div class="hc-header-cascader-box">
+                        <div class="project-name-box">{{projectInfo.projectAlias}} / {{contractInfo.name}}</div>
+                        <el-cascader ref="ElCascaderRef" v-model="projectValue" :options="projectContract" :props="projectProps" placeholder="请选择项目"  @change="projectContractChange"/>
+                    </div>
+                    <HelpInfoBar></HelpInfoBar>
+                    <ConfigBar></ConfigBar>
+                    <UserInfoBar></UserInfoBar>
+                </div>
+            </el-header>
             <el-main>
                 <el-scrollbar>Main</el-scrollbar>
             </el-main>
@@ -29,24 +43,6 @@
 
     <!--n-layout position="absolute" class="cu-layout-box" :class="RoutesName === 'home-index'?'home-'+HomeTheme.name:''">
         <n-layout-header class="cu-header-view" :class="RoutesName === 'home-index'?'':'shadow-sm'">
-            <div class="header-logo">
-                <img class="logo-img" src="../assets/logo/white.png" alt="" @click="logoClick" v-if="RoutesName === 'home-index' && (HomeTheme.name === 'theme-1' || HomeTheme.name === 'theme-2')">
-                <img class="logo-img" :src="getAssetsHomeFile(`${AppColor.name}.png`)" alt="" @click="logoClick" v-else>
-                <div class="cascader-box">
-                    <div class="project-name-box">{{projectInfo.projectAlias}} / {{contractInfo.name}}</div>
-                    <el-cascader ref="ElCascaderRef" v-model="projectValue" :options="projectContract" :props="projectProps" placeholder="请选择项目"  @change="projectContractChange"/>
-                </div>
-            </div>
-            <div class="header-content">
-                <MenuBar :datas="MenuBarData" :cur="MenuBarKey" @change="MenuBarChange">
-                    <template #qualityControl="item">
-                        <MenuQuality :datas="item.children" @change="MenuQualityChange"/>
-                    </template>
-                    <template #tasks="item">
-                        <MenuTask :datas="item.children" @change="MenuQualityChange"/>
-                    </template>
-                </MenuBar>
-            </div>
             <div class="header-end">
                 <HelpInfoBar></HelpInfoBar>
                 <UserInfoBar></UserInfoBar>
@@ -190,6 +186,13 @@ const projectContractChange = (val) => {
     })
 }
 
+//是否折叠
+const isCollapse = ref(false)
+const collapseChange = (bool) => {
+    isCollapse.value = bool
+}
+
+
 //菜单被点击
 const MenuBarChange = (item) => {
     MenuBarKey.value = item.key;
@@ -221,47 +224,32 @@ const logoClick = () => {
 </style>
 
 <style lang="scss">
-.n-layout.cu-layout-box {
-    .cu-header-view .header-logo .el-cascader {
-        width: 100%;
-        top: -10px;
-    }
-    &.home-theme-1, &.home-theme-2, &.home-theme-3 {
-        .cu-header-view .header-logo {
-            .el-cascader .el-input .el-input__wrapper {
-                padding: 4px 15px;
-                background-color: #0000;
-                border: 1px solid white;
-                box-shadow: initial;
-                .el-input__inner, .el-input__suffix {
-                    color: white;
-                }
-            }
-            .el-cascader .el-input.is-focus .el-input__wrapper {
-                box-shadow: initial;
-            }
-            /*.n-base-selection .n-base-selection-label {
-                background-color: #0000;
-                .n-base-selection-input {
-                    color: white;
-                }
-            }
-            .n-base-selection .n-base-suffix .n-base-suffix__arrow {
+.hc-layout-box .hc-container-view {
+    .hc-header-view .hc-header-content .hc-header-cascader-box {
+        .el-cascader {
+            width: 100%;
+            top: -10px;
+        }
+        .el-cascader .el-input .el-input__wrapper {
+            padding: 4px 15px;
+            background-color: #00000000;
+            border: 1.5px solid white;
+            box-shadow: initial;
+            border-radius: 100px;
+            .el-input__inner, .el-input__suffix {
                 color: white;
             }
-            .n-base-selection:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection-label {
-                background-color: #0000;
-            }
-            .n-base-selection:not(.n-base-selection--disabled):hover .n-base-selection__state-border {
-                border: white;
-            }
-            .n-base-selection:not(.n-base-selection--disabled).n-base-selection--focus .n-base-selection__state-border {
-                border: white;
-            }
-            .n-base-selection:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection__state-border {
-                border: white;
-            }*/
         }
+        .el-cascader .el-input.is-focus .el-input__wrapper {
+            box-shadow: initial;
+        }
+        .el-cascader .el-input .icon-arrow-down {
+            font-size: 18px;
+            font-weight: bold;
+        }
+    }
+    &.home {
+
     }
 }
 </style>

src/layout/layout.scss

@@ -2,12 +2,30 @@
     position: relative;
     height: 100vh;
     width: 100%;
+    .hc-layout-bg-box {
+        position: absolute;
+        bottom: 0;
+        left: 190px;
+        right: 0;
+        top: 0;
+        z-index: 0;
+        display: flex;
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        &.collapse {
+            left: 75px;
+        }
+    }
     .hc-aside-box {
         position: relative;
         background: #333333;
         color: #ffffff;
         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;
             display: flex;
@@ -69,98 +87,50 @@
                 }
             }
         }
+        &.collapse {
+            border-radius: 0 50px 0 0;
+            .hc-aside-logo-box {
+                left: initial;
+            }
+        }
     }
-    .hc-header-view {
-        position: relative;
-        --el-header-padding: 0 24px;
-        --el-header-height: 100px;
-        display: flex;
-        align-items: center;
-    }
-    .cu-header-view {
+    .hc-container-view {
         position: relative;
-        display: flex;
-        align-items: center;
-        padding-left: 24px;
-        height: 64px;
-        z-index: 999;
-        .header-bar {
-            position: relative;
-            display: flex;
-            align-items: center;
-            height: 100%;
-            cursor: pointer;
-            padding: 0 20px;
-            transition: background-color 0.3s;
-            &:hover {
-                background-color: var(--ui-BG-Main-4);
-            }
+        z-index: 1;
+        &.home {
+            color: #ffffff;
         }
-        .header-logo {
+        .hc-header-view {
             position: relative;
-            height: 100%;
             display: flex;
             align-items: center;
-            .logo-img {
-                height: 28px;
-                cursor: pointer;
-                transition: opacity 0.3s;
-                &:hover {
-                    opacity: .8;
-                }
+            --el-header-padding: 0 24px;
+            --el-header-height: 100px;
+            .hc-header-page-name {
+                position: relative;
+                color: #edeef0;
+                font-size: 22px;
             }
-            .cascader-box {
+            .hc-header-content {
+                flex: auto;
                 position: relative;
-                margin-left: 30px;
-                .project-name-box {
-                    padding-right: 55px;
+                text-align: right;
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                .hc-header-cascader-box {
                     position: relative;
-                    visibility: hidden;
-                    z-index: -1;
+                    margin-right: 30px;
+                    border-radius: 100px;
+                    .project-name-box {
+                        padding-right: 55px;
+                        position: relative;
+                        visibility: hidden;
+                        z-index: -1;
+                    }
                 }
             }
         }
-        .header-content {
-            flex: auto;
-            text-align: right;
-            position: relative;
-            padding: 0 14px;
-            height: 100%;
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-        }
-        .header-end {
-            position: relative;
-            text-align: right;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            padding-left: 30px;
-            &:before {
-                content: "";
-                background: #333333;
-                width: 1.7px;
-                height: 14px;
-                position: absolute;
-                left: 7px;
-            }
-        }
-    }
-    .cu-content-view {
-        top: 64px;
-    }
-    &[class*='home-theme-'] .cu-content-view {
-        top: -64px;
-    }
-    &.home-theme-1, &.home-theme-2, &.home-theme-3 {
-        .cu-header-view {
-            --n-color: #0000 !important;
-            --n-text-color: white !important;
-        }
-        .header-end::before {
-            background: white;
-        }
     }
 }
 

src/layout/modules/ConfigBar.vue

@@ -1,5 +1,8 @@
 <template>
-    <div class="config-icon-bar" @click="ConfigBarActive">
+    <div class="header-icon-bar">
+        <HcIcon name="settings" class="header-icon"/>
+    </div>
+    <!--div class="config-icon-bar" @click="ConfigBarActive">
         <i class="cicon-set-o"/>
     </div>
     <n-drawer v-model:show="ConfigActive" :width="360" placement="right">
@@ -58,7 +61,7 @@
             </div>
 
         </n-drawer-content>
-    </n-drawer>
+    </n-drawer-->
 </template>
 
 <script setup>
@@ -144,6 +147,23 @@ const ConfigBarActive = () => {
 </script>
 
 <style lang="scss" scoped>
+.header-icon-bar {
+    position: relative;
+    height: 40px;
+    width: 40px;
+    border-radius: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 44px;
+    cursor: pointer;
+    color: inherit;
+    margin-right: 30px;
+}
+
+
+
+
 .config-icon-bar {
     position: relative;
     display: flex;

src/layout/modules/HelpInfoBar.vue

@@ -1,35 +1,38 @@
 <template>
-    <n-popover trigger="hover" placement="bottom">
-        <template #trigger>
-            <div class="icon-text-bar">
-                <i class="hcicon-bangzhu"/>
-                <span class="text">帮助</span>
+    <el-popover placement="bottom" :width="220" trigger="hover">
+        <template #reference>
+            <div class="header-icon-bar">
+                <HcIcon name="help" class="header-icon"/>
             </div>
         </template>
-        <div class="pover-menu-list">
+        <div class="header-pover-menu-list">
             <div class="list-item">
                 <span class="text">开启功能气泡提示</span>
-                <n-switch size="small" v-model:value="bubbleVal" @update:value="bubbleUpdate"/>
+                <el-switch v-model="bubbleVal" @change="bubbleUpdate"/>
             </div>
             <div class="list-item">
                 <span class="text">查看系统操作文档</span>
-                <i class="HIcon-PDFzhuanWord"/>
+                <img class="icon" :src="getAssetsHomeFile('word.png')" alt=""/>
+                <img class="icon1" :src="getAssetsHomeFile('word1.png')" alt=""/>
             </div>
-            <div class="list-item" v-if="videoUrl" @click="videoPreviewModal = true">
+            <div class="list-item" @click="videoPreviewModal = true" v-if="videoUrl">
                 <span class="text">当前页面功能讲解</span>
-                <i class="HIcon-shipin-copy"/>
+                <img class="icon" :src="getAssetsHomeFile('video.png')" alt=""/>
+                <img class="icon1" :src="getAssetsHomeFile('video1.png')" alt=""/>
             </div>
             <div class="list-item" @click="toOrderService">
                 <span class="text">工单服务\需求反馈</span>
-                <i class="HIcon-jietu-dianji" @click.stop="screenShortClick"/>
+                <img class="icon" :src="getAssetsHomeFile('short.png')" alt="" @click.stop="screenShortClick"/>
+                <img class="icon1" :src="getAssetsHomeFile('short1.png')" alt="" @click.stop="screenShortClick"/>
             </div>
         </div>
-    </n-popover>
-    <n-modal v-model:show="videoPreviewModal" title="当前页面功能讲解" preset="card" class="w-990">
+    </el-popover>
+
+    <!--n-modal v-model:show="videoPreviewModal" title="当前页面功能讲解" preset="card" class="w-990">
         <video class="preview-video" :src="videoUrl" controls="controls" autoplay="autoplay">
             您的浏览器不支持 video
         </video>
-    </n-modal>
+    </n-modal-->
 </template>
 
 <script setup>
@@ -107,47 +110,63 @@ const getScreenShotImg = (base64) => {
 const toOrderService = () => {
     router.push({name: 'order-service'});
 }
+
+// 获取assets静态资源
+const getAssetsHomeFile = (url) => {
+    const path = `../../assets/images/${url}`;
+    const modules = import.meta.globEager("../../assets/images/*");
+    return modules[path].default;
+}
 </script>
 
 <style lang="scss" scoped>
-.icon-text-bar {
+.header-icon-bar {
     position: relative;
+    height: 40px;
+    width: 40px;
+    border-radius: 100px;
     display: flex;
+    justify-content: center;
     align-items: center;
-    height: 100%;
+    font-size: 44px;
     cursor: pointer;
-    padding: 0 20px;
     color: inherit;
-    transition: color 0.3s, background-color 0.3s;
-    i {
-        font-size: 18px;
-    }
-    .text {
-        margin-left: 5px;
-        font-size: 16px;
-    }
-    &:hover {
-        color: var(--hc-primary);
-        background-color: var(--hc-primary-light-7);
-    }
-}
-.preview-video {
-    width: 100%;
+    margin-right: 30px;
 }
 
-.home-theme-1, .home-theme-2, .home-theme-3 {
-    .icon-text-bar {
+.header-pover-menu-list {
+    position: relative;
+    margin: -5px -12px;
+    .list-item {
+        position: relative;
+        padding: 10px 24px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        transition: background-color 0.2s;
+        .text {
+            flex: auto;
+        }
+        .icon,.icon1 {
+            width: 24px;
+            height: 24px;
+        }
+        .icon1 {
+            display: none;
+        }
         &:hover {
-            color: white;
-            background-color: rgba(255, 255, 255, 0.1);
+            color: #ffffff;
+            background-color: var(--el-color-primary);
+            .icon {
+                display: none;
+            }
+            .icon1 {
+                display: block;
+            }
         }
     }
 }
-
-html.theme-dark {
-    .icon-text-bar:hover {
-        color: var(--hc-primary);
-        background-color: #212121;
-    }
+.preview-video {
+    width: 100%;
 }
 </style>

src/layout/modules/MenuBar.vue

@@ -1,10 +1,12 @@
 <template>
-    <el-menu :default-active="curKey" class="hc-aside-menu" :collapse="isCollapse">
+    <el-menu class="hc-aside-menu" :default-active="curKey" :collapse="isCollapse" unique-opened>
         <el-menu-item index="home-index">
-            <HcIcon name="home" class="hc-menu-icon" :ui="curKey === 'home-index'?'fill':''"/>
-            <template #title>首页</template>
+            <div class="hc-aside-menu-item">
+                <HcIcon name="home" class="hc-menu-icon" :ui="curKey === 'home-index'?'fill':''"/>
+                <div class="name">首页</div>
+            </div>
         </el-menu-item>
-        <MenuItem :datas="datas" @change="MenuClick"/>
+        <MenuItem :datas="datas" :cur="curKey" @change="MenuClick"/>
     </el-menu>
 </template>
 
@@ -42,7 +44,6 @@ watch(() => [
 //事件
 const emit = defineEmits(['change'])
 const MenuClick = (item) => {
-    console.log(item)
     curKey.value = item?.key || '';
     emit('change', item)
 }
@@ -53,33 +54,241 @@ const MenuClick = (item) => {
     --el-menu-bg-color: #333333;
     --el-menu-text-color: #ffffff;
     --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;
     border-right: 0;
+    padding: 8px 0;
     &.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item,
     &.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item-group__title,
     &.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
         white-space: nowrap;
-        padding-left: 20px;
+        padding-left: 0;
+    }
+    .el-sub-menu__title {
+        padding: 0;
     }
     .el-menu-item, .el-sub-menu {
-        margin: 15px 0 0 20px;
-        border-radius: 50px 0 0 50px;
-        .hc-menu-icon {
-            font-size: 22px;
-            margin-right: 10px;
+        padding: 15px 0 0 20px !important;
+        min-width: initial;
+        transition: 0.2s;
+        .hc-aside-menu-item {
+            flex: 1;
+            position: relative;
+            border-radius: 50px 0 0 50px;
+            padding: 0 16px;
+            display: flex;
+            align-items: center;
+            transition: 0.2s;
+            .hc-menu-icon {
+                font-size: 22px;
+                margin-right: 10px;
+            }
+            .name {
+                flex: 1;
+                width: 0;
+            }
+            .el-badge, .el-badge .el-badge__content {
+                vertical-align: initial;
+            }
         }
     }
+    .el-sub-menu .el-icon {
+        display: none;
+    }
+    .el-sub-menu .el-icon.material-symbols-rounded {
+        position: relative;
+        display: inline-block;
+        font-size: 38px;
+        right: 10px;
+        top: initial;
+        height: initial;
+        width: initial;
+        margin-top: 0;
+        vertical-align: initial;
+    }
+    .el-sub-menu .el-sub-menu__title .hc-aside-menu-item:hover,
+    .el-menu-item:not(.is-active) .hc-aside-menu-item:hover {
+        color: var(--el-color-primary);
+    }
+    .el-sub-menu.is-active > .el-sub-menu__title > .hc-aside-menu-item {
+        color: var(--el-color-primary);
+    }
     .el-menu-item.is-active {
-        background-color: var(--el-color-primary);
-        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.3), 0 -6px 8px 0 #707070;
-        &::before {
-            content: '';
+        .hc-aside-menu-item {
+            --radius-size: 20px;
+            background-color: var(--el-color-primary);
+            box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.3), 0 -6px 8px 0 #707070;
+            &::before, &::after {
+                content: '';
+                display: block;
+                height: var(--radius-size);
+                width: var(--radius-size);
+                position: absolute;
+                background: radial-gradient(
+                        var(--radius-size) at var(--radius-size) 0px,
+                        transparent var(--radius-size),
+                        var(--el-color-primary) var(--radius-size)
+                );
+            }
+            &::before {
+                right: 0;
+                transform: scaleX(-1);
+                top: calc(-1 * var(--radius-size));
+                z-index: 999;
+            }
+            &::after {
+                right: 0;
+                bottom: calc(-1 * var(--radius-size));
+                transform: scale(-1);
+                z-index: 999;
+            }
+        }
+    }
+}
+.hc-aside-menu.el-menu--collapse {
+    width: 120px;
+    .el-sub-menu__title {
+        height: inherit;
+        line-height: initial;
+        width: 120px;
+        justify-content: center;
+        transition: 0.2s;
+    }
+    .el-menu-item, .el-sub-menu {
+        padding: 0 !important;
+        height: 60px;
+        line-height: initial;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 120px;
+        transition: 0.2s;
+        .hc-aside-menu-item {
+            display: block;
+            align-items: initial;
+            width: 60px;
+            height: 60px;
+            text-align: center;
+            border-radius: 10px;
+            padding: 5px;
+            flex: initial;
+            transition: 0.2s;
+            .hc-menu-icon {
+                margin-right: 0;
+            }
+            .name {
+                flex: initial;
+                width: 100%;
+            }
+            .el-badge, .el-badge .el-badge__content {
+                vertical-align: initial;
+            }
+            .el-badge {
+                position: absolute;
+                top: -12px;
+                right: -10px;
+            }
         }
-        &::after {
-            content: '';
+    }
+    .el-sub-menu .el-icon.material-symbols-rounded {
+        display: none;
+    }
+    .el-menu-item + .el-menu-item,
+    .el-menu-item + .el-sub-menu,
+    .el-sub-menu + .el-menu-item,
+    .el-sub-menu + .el-sub-menu {
+        margin-top: 24px;
+    }
+    .el-sub-menu:not(.is-active):hover,
+    .el-menu-item:not(.is-active):hover {
+        .hc-aside-menu-item {
+            background-color: var(--el-color-primary-light-7);
+            color: var(--el-color-primary);
         }
     }
+    .el-menu-item.is-active, .el-sub-menu.is-active {
+        .hc-aside-menu-item {
+            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);
+            &::before, &::after {
+                content: '';
+                display: none;
+            }
+        }
+    }
+}
+.el-popper.is-light {
+    border: 0 !important;
+}
+.el-popper .el-menu--vertical .el-menu {
+    --el-menu-bg-color: #333333;
+    --el-menu-text-color: #ffffff;
+    --el-menu-active-color: #ffffff;
+    --el-menu-hover-bg-color: initial;
+    --el-menu-item-font-size: 16px;
+    .el-sub-menu__title {
+        padding: 0;
+        justify-content: center;
+        transition: 0.2s;
+    }
+    .el-menu-item, .el-sub-menu {
+        color: #fff;
+        padding: 0;
+        transition: 0.2s;
+        .hc-aside-menu-item {
+            flex: 1;
+            position: relative;
+            padding: 0 16px;
+            display: flex;
+            align-items: center;
+            transition: 0.2s;
+            .hc-menu-icon {
+                font-size: 22px;
+                margin-right: 10px;
+            }
+            .name {
+                flex: 1;
+                width: 0;
+            }
+            .el-badge, .el-badge .el-badge__content {
+                vertical-align: initial;
+            }
+        }
+    }
+    .el-sub-menu .el-icon {
+        display: none;
+    }
+    .el-sub-menu .el-icon.material-symbols-rounded {
+        position: relative;
+        display: inline-block;
+        font-size: 38px;
+        right: 10px;
+        top: initial;
+        height: initial;
+        width: initial;
+        margin-top: 0;
+        vertical-align: initial;
+    }
+    .el-sub-menu:not(.is-active) .el-sub-menu__title:hover {
+        background-color: var(--el-color-primary-light-7);
+        color: var(--el-color-primary);
+    }
+    .el-menu-item:not(.is-active):hover {
+        .hc-aside-menu-item {
+            background-color: var(--el-color-primary-light-7);
+            color: var(--el-color-primary);
+        }
+    }
+    .el-menu-item.is-active {
+        .hc-aside-menu-item {
+            background-color: var(--el-color-primary);
+        }
+    }
+    .el-sub-menu.is-active .el-sub-menu__title {
+        background-color: var(--el-color-primary-light-7);
+        color: var(--el-color-primary);
+    }
 }
 </style>

src/layout/modules/MenuItem.vue

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

src/layout/modules/MenuTask.vue

@@ -1,92 +0,0 @@
-<template>
-    <div class="quality-content-box task">
-        <n-grid x-gap="20" :y-gap="20" :cols="2">
-            <n-gi v-for='item in datas'>
-                <div class="quality-content-item" @click="MenuClick(item)">
-                    <n-badge :value="20" processing v-if="item.key==='tasks-data'">
-                        <div class="quality-content">
-                            <div class="quality-icon">
-                                <i :class="item.icon"/>
-                            </div>
-                            <div class="quality-text">{{item.name}}</div>
-                        </div>
-                    </n-badge>
-                    <n-badge :value="23" processing v-else-if="item.key==='message-data'">
-                        <div class="quality-content">
-                            <div class="quality-icon">
-                                <i :class="item.icon"/>
-                            </div>
-                            <div class="quality-text">{{item.name}}</div>
-                        </div>
-                    </n-badge>
-                    <template v-else>
-                        <div class="quality-content">
-                            <div class="quality-icon">
-                                <i :class="item.icon"/>
-                            </div>
-                            <div class="quality-text">{{item.name}}</div>
-                        </div>
-                    </template>
-                </div>
-            </n-gi>
-        </n-grid>
-    </div>
-</template>
-
-<script setup>
-defineProps({
-    datas: {
-        type: Array,
-        default: () => ([])
-    }
-})
-
-const emit = defineEmits(['change'])
-const MenuClick = (item) => {
-    emit('change', {key: 'tasks', item})
-}
-</script>
-
-<style lang="scss" scoped>
-.quality-content-box.task {
-    position: relative;
-    padding: 12px 5px;
-    .quality-content-item {
-        background-color: #F9F9F9;
-        border-radius: 10px;
-        padding: 15px;
-        cursor: pointer;
-        width: 115px;
-        height: 115px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
-        transition: background-color 0.3s;
-        .quality-content {
-            position: relative;
-            .quality-icon {
-                position: relative;
-                font-size: 32px;
-            }
-            .quality-text {
-                font-size: 12px;
-                line-height: 1.6;
-                color: #707070;
-            }
-        }
-        &:hover {
-            background-color: var(--hc-primary-light-7);
-        }
-    }
-}
-
-html.theme-dark {
-    .quality-content-box.task .quality-content-item {
-        background-color: #2e2e2e;
-        &:hover {
-            background-color: #404041;
-        }
-    }
-}
-</style>

src/layout/modules/UserInfoBar.vue

@@ -1,17 +1,26 @@
 <template>
-    <n-dropdown trigger="hover" placement="bottom-end" size="large" :options="options" @select="handleSelect">
+    <el-dropdown size="large" trigger="click">
         <div class="header-bar user-info-bar">
             <img class="user-avatar" :src="userInfo['avatar'] || avatarPng" :alt="userInfo['account']">
             <span class="user-name">{{userInfo['real_name']}}</span>
-            <i class="hcicon-xiangxiajiantou"/>
+            <HcIcon name="arrow_drop_down" ui="arrow-icon"/>
         </div>
-    </n-dropdown>
+        <template #dropdown>
+            <el-dropdown-menu>
+                <el-dropdown-item v-for="item in options">
+                    <div class="hc-dropdown-item" @click="handleSelect(item.key)">
+                        <HcIcon :name="item.icon" class="icon"/>
+                        <span class="label">{{item.label}}</span>
+                    </div>
+                </el-dropdown-item>
+            </el-dropdown-menu>
+        </template>
+    </el-dropdown>
 </template>
 
 <script setup>
 import {onMounted, ref, watch} from "vue";
 import router from '~src/router/index';
-import {hIcon} from '~src/plugins/renderele';
 import {useAppStore} from "~src/store/index";
 import {getStore} from "~src/utils/lib/storage";
 import {calcDate} from "~src/utils/lib/date";
@@ -54,21 +63,13 @@ const options = [
     {
         key: "my",
         label: "个人中心",
-        icon () {
-            return hIcon('cicon-my-o')
-        }
-    },
-    {
-        type: "divider",
-        key: "d1"
+        icon: 'person'
     },
     {
         key: "logout",
         label: "退出登录",
-        icon () {
-            return hIcon('cicon-logout')
-        }
-    },
+        icon: 'logout'
+    }
 ];
 
 //事件
@@ -94,50 +95,28 @@ const handleSelect = (key) => {
     align-items: center;
     height: 100%;
     cursor: pointer;
-    padding: 0 20px;
     color: inherit;
-    transition: color 0.3s, background-color 0.3s;
     .user-avatar {
-        height: 36px;
+        height: 40px;
         border-radius: 50%;
         background: white;
     }
     .user-name {
         font-size: 16px;
         margin-left: 10px;
+        color: white;
     }
-    i {
-        color: #7E84A3;
-        margin-left: 10px;
-        transition: color 0.3s;
-    }
-    &:hover {
-        color: var(--hc-primary);
-        background-color: var(--hc-primary-light-7);
-        i {
-            color: var(--hc-primary);
-        }
-    }
-}
-
-.home-theme-1, .home-theme-2, .home-theme-3 {
-    .user-info-bar {
-        i {
-            color: white;
-        }
-        &:hover {
-            color: white;
-            background-color: rgba(255, 255, 255, 0.1);
-            i {
-                color: white;
-            }
-        }
+    .arrow-icon {
+        font-size: 30px;
+        color: #fff;
     }
 }
-html.theme-dark {
-    .user-info-bar:hover {
-        color: var(--hc-primary);
-        background-color: #212121;
+.hc-dropdown-item {
+    display: flex;
+    align-items: center;
+    .icon {
+        font-size: 20px;
+        margin-right: 8px;
     }
 }
 </style>

src/styles/app/main.scss

@@ -1,5 +1,6 @@
 html, body, #app {
     height: 100%;
+    background-color: #F1F5F8;
 }
 * {
     padding: 0;