style: 调整样式

src/App.vue

@@ -3,7 +3,6 @@ import { computed } from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { ConfigGlobal } from '@/components/ConfigGlobal'
 import { useDesign } from '@/hooks/web/useDesign'
-import { useDark } from '@vueuse/core'
 import { ElNotification } from 'element-plus'
 
 const { getPrefixCls } = useDesign()
@@ -16,12 +15,8 @@ const currentSize = computed(() => appStore.getCurrentSize)
 
 const greyMode = computed(() => appStore.getGreyMode)
 
-const isDark = useDark({
-  valueDark: 'dark',
-  valueLight: 'light'
-})
+appStore.initTheme()
 
-isDark.value = appStore.getIsDark
 ElNotification({
   title: '提示',
   type: 'warning',

src/components/Setting/src/Setting.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ElDrawer, ElDivider, ElMessage } from 'element-plus'
-import { ref, unref, computed } from 'vue'
+import { ref, unref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { useCssVar } from '@vueuse/core'
@@ -23,8 +23,6 @@ const appStore = useAppStore()
 
 const { t } = useI18n()
 
-const layout = computed(() => appStore.getLayout)
-
 const drawer = ref(false)
 
 // 主题色相关
@@ -215,23 +213,21 @@ const themeChange = () => {
       />
 
       <!-- 菜单主题 -->
-      <template v-if="layout !== 'top'">
-        <ElDivider>{{ t('setting.menuTheme') }}</ElDivider>
-        <ColorRadioPicker
-          v-model="menuTheme"
-          :schema="[
-            '#fff',
-            '#001529',
-            '#212121',
-            '#273352',
-            '#191b24',
-            '#383f45',
-            '#001628',
-            '#344058'
-          ]"
-          @change="setMenuTheme"
-        />
-      </template>
+      <ElDivider>{{ t('setting.menuTheme') }}</ElDivider>
+      <ColorRadioPicker
+        v-model="menuTheme"
+        :schema="[
+          '#fff',
+          '#001529',
+          '#212121',
+          '#273352',
+          '#191b24',
+          '#383f45',
+          '#001628',
+          '#344058'
+        ]"
+        @change="setMenuTheme"
+      />
     </div>
 
     <!-- 界面显示 -->

src/store/modules/app.ts

@@ -5,6 +5,7 @@ import { colorIsDark, hexToRGB, lighten, mix } from '@/utils/color'
 import { ElMessage, ComponentSize } from 'element-plus'
 import { useCssVar } from '@vueuse/core'
 import { unref } from 'vue'
+import { useDark } from '@vueuse/core'
 
 interface AppState {
   breadcrumb: boolean
@@ -59,7 +60,7 @@ export const useAppStore = defineStore('app', {
       serverDynamicRouter: true, // 是否服务端渲染动态路由
       fixedMenu: false, // 是否固定菜单
 
-      layout: 'classic', // layout布局
+      layout: 'top', // layout布局
       isDark: false, // 是否是暗黑模式
       currentSize: 'default', // 组件尺寸
       theme: {
@@ -320,6 +321,13 @@ export const useAppStore = defineStore('app', {
       if (this.getLayout === 'top') {
         this.setMenuTheme(color)
       }
+    },
+    initTheme() {
+      const isDark = useDark({
+        valueDark: 'dark',
+        valueLight: 'light'
+      })
+      isDark.value = this.getIsDark
     }
   },
   persist: true