布局

src/App.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { nextTick} from 'vue'
+import { nextTick } from 'vue'
 import { getObjValue } from 'js-fast-way'
 import { getStore, setStore } from 'hc-vue3-ui'
 import { getVersionJson } from '~api/other'
@@ -15,7 +15,6 @@ nextTick(() => {
     //生产环境下，检测更新
     if (import.meta.env.PROD) {
         getVersionJsonApi()
-        //检测新版本
         setInterval(() => {
             getVersionJsonApi()
         }, 1000 * 60)

src/layout/index.scss

@@ -122,7 +122,7 @@
     --el-menu-active-color: var(--el-menu-text-color);
     --el-menu-hover-text-color: var(--el-menu-text-color);
     --el-menu-hover-bg-color: var(--el-color-primary);
-    --el-menu-item-font-size: 16px;
+    --el-menu-item-font-size: 14px;
     --el-menu-item-height: 48px;
     border-right: 0;
     &.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item,

src/layout/modules/Theme.vue

@@ -1,9 +1,17 @@
 <template>
-    <div class="header-icon-bar" @click="tapClick">
-        <el-tooltip content="主题皮肤" placement="top">
-            <hc-icon name="t-shirt" class="header-icon" />
-        </el-tooltip>
-    </div>
+    <el-dropdown size="large" trigger="click">
+        <div class="header-icon-bar">
+            <el-tooltip content="主题皮肤" placement="top">
+                <hc-icon name="t-shirt" class="header-icon" />
+            </el-tooltip>
+        </div>
+        <template #dropdown>
+            <el-dropdown-menu>
+                <el-dropdown-item @click="themeChange('default')">默认主题</el-dropdown-item>
+                <el-dropdown-item @click="themeChange('vip')">VIP主题</el-dropdown-item>
+            </el-dropdown-menu>
+        </template>
+    </el-dropdown>
 </template>
 
 <script setup>
@@ -18,21 +26,19 @@ const theme = ref(store.getTheme)
 
 //渲染完成
 onMounted(() => {
-
+    setThemeStyle()
 })
 
-//展开主题设置
-const tapClick = () => {
-
-}
-
 //主题改变
 const themeChange = (val) => {
+    theme.value = val
     store.setTheme(val)
+    setThemeStyle()
     userConfigSave({ theme: val })
 }
-</script>
-
-<style lang="scss" scoped>
 
-</style>
+//设置主题样式
+const setThemeStyle = () => {
+    document.documentElement.setAttribute('class', `theme-${theme.value}`)
+}
+</script>

src/styles/app/theme.scss

@@ -0,0 +1,54 @@
+html.theme-default {
+    --hc-theme-text-color: #1A1A1A;
+    background-color: #F1F5F8;
+    body, #app {
+        background-color: #F1F5F8;
+    }
+    .hc-layout-box {
+        .hc-layout-header {
+            background: white;
+            color: var(--hc-theme-text-color);
+            .hc-layout-header-logo {
+                background: #20222a;
+            }
+            .header-content-bar .header-icon-bar {
+                color: var(--hc-theme-text-color);
+                &:hover {
+                    color: var(--el-color-primary);
+                }
+            }
+            .user-info-bar .user-name {
+                color: var(--hc-theme-text-color);
+            }
+            .user-info-bar .arrow-icon {
+                color: var(--hc-theme-text-color);
+            }
+        }
+        .hc-layout-container .hc-layout-aside {
+            background: #20222a;
+            .el-menu {
+                --el-menu-active-color: rgba(0,0,0,.8);
+                --el-menu-text-color: hsla(0,0%,100%,.7) !important;
+            }
+            .el-menu .el-sub-menu.is-active > .el-sub-menu__title {
+                background-color: inherit;
+            }
+            .el-menu .el-menu-item.is-active {
+                color: white;
+                background-color: var(--el-menu-active-color);
+                &::after {
+                    background-color: var(--el-color-primary);
+                }
+            }
+            .el-menu .el-sub-menu .el-sub-menu__title:hover, .el-menu .el-menu-item:not(.is-active):hover {
+                color: white;
+                background-color: rgba(0,0,0,.3);
+            }
+        }
+        .hc-layout-container .hc-layout-main {
+            .hc-router-menu-bar {
+                border-top: 1px solid #f6f6f6;
+            }
+        }
+    }
+}