refactor(hooks): 状态管理模块拆分

src/layouts/BasicLayout/components/GlobalLogo/index.vue

@@ -10,7 +10,7 @@ import { computed } from 'vue';
 import { useAppStore } from '@/store';
 
 const app = useAppStore();
-const showTitle = computed(() => !app.themeSettings.menuStyle.collapsed);
+const showTitle = computed(() => !app.menu.collapsed);
 const title = import.meta.env.VITE_APP_TITLE as string;
 </script>
 <style scoped></style>

src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode/index.vue

@@ -1,7 +1,7 @@
 <template>
   <n-divider title-placement="center">深色主题</n-divider>
   <div class="flex-center">
-    <n-switch :value="app.themeSettings.darkMode" @update:value="handleDarkMode">
+    <n-switch :value="theme.darkMode" @update:value="handleDarkMode">
       <template #checked>
         <icon-mdi-white-balance-sunny class="text-14px text-primary" />
       </template>
@@ -14,10 +14,10 @@
 
 <script lang="ts" setup>
 import { NDivider, NSwitch } from 'naive-ui';
-import { useAppStore } from '@/store';
+import { useThemeStore } from '@/store';
 
-const app = useAppStore();
-const { handleDarkMode } = useAppStore();
+const theme = useThemeStore();
+const { handleDarkMode } = useThemeStore();
 </script>
 <style scoped>
 :deep(.n-switch__rail) {

src/layouts/BasicLayout/components/SettingDrawer/components/NavMode/index.vue

@@ -5,7 +5,7 @@
       v-for="item in modeList"
       :key="item.mode"
       :mode="item.mode"
-      :checked="app.themeSettings.navStyle.mode === item.mode"
+      :checked="theme.navStyle.mode === item.mode"
       @click="setNavMode(item.mode)"
     />
   </n-space>
@@ -16,15 +16,15 @@ import { NDivider, NSpace } from 'naive-ui';
 import { EnumNavMode } from '@/enum';
 import type { NavMode } from '@/interface';
 import { NavType } from './components';
-import { useAppStore } from '@/store';
+import { useThemeStore } from '@/store';
 
 interface ModeList {
   mode: NavMode;
   label: string;
 }
 
-const app = useAppStore();
-const { setNavMode } = useAppStore();
+const theme = useThemeStore();
+const { setNavMode } = useThemeStore();
 
 const modeList: ModeList[] = [
   { mode: 'vertical', label: EnumNavMode.vertical },

src/layouts/BasicLayout/components/SettingDrawer/components/PageFunc/index.vue

@@ -3,20 +3,20 @@
   <n-space vertical size="large">
     <div class="flex-y-center justify-between">
       <span>分割菜单</span>
-      <n-switch :value="app.themeSettings.menuStyle.splitMenu" @update:value="handleSplitMenu" />
+      <n-switch :value="theme.menuStyle.splitMenu" @update:value="handleSplitMenu" />
     </div>
     <div class="flex-y-center justify-between">
       <span>固定头部</span>
-      <n-switch :value="app.themeSettings.headerStyle.fixed" @update:value="handleFixedHeader" />
+      <n-switch :value="theme.headerStyle.fixed" @update:value="handleFixedHeader" />
     </div>
   </n-space>
 </template>
 
 <script lang="ts" setup>
 import { NDivider, NSpace, NSwitch } from 'naive-ui';
-import { useAppStore } from '@/store';
+import { useThemeStore } from '@/store';
 
-const app = useAppStore();
-const { handleSplitMenu, handleFixedHeader } = useAppStore();
+const theme = useThemeStore();
+const { handleSplitMenu, handleFixedHeader } = useThemeStore();
 </script>
 <style scoped></style>

src/layouts/BasicLayout/components/SettingDrawer/components/SystemTheme/index.vue

@@ -1,18 +1,18 @@
 <template>
   <n-divider title-placement="center">系统主题</n-divider>
   <n-grid :cols="8">
-    <n-grid-item v-for="color in app.themeSettings.themeColorList" :key="color">
-      <color-block :color="color" :checked="color === app.themeSettings.themeColor" @click="setThemeColor(color)" />
+    <n-grid-item v-for="color in theme.themeColorList" :key="color">
+      <color-block :color="color" :checked="color === theme.themeColor" @click="setThemeColor(color)" />
     </n-grid-item>
   </n-grid>
 </template>
 
 <script lang="ts" setup>
 import { NDivider, NGrid, NGridItem } from 'naive-ui';
-import { useAppStore } from '@/store';
-import { ColorBlock } from '@/components';
+import { useThemeStore } from '@/store';
+import { ColorBlock } from '../common';
 
-const app = useAppStore();
-const { setThemeColor } = useAppStore();
+const theme = useThemeStore();
+const { setThemeColor } = useThemeStore();
 </script>
 <style scoped></style>

src/layouts/BasicLayout/components/SettingDrawer/components/common/ColorBlock.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex-center w-20px h-20px mx-6px mb-8px cursor-pointer rounded-2px" :style="{ backgroundColor: color }">
+    <icon-ic-outline-check
+      v-if="checked"
+      class="text-14px text-white"
+      :class="[isWhite ? 'text-gray-700' : 'text-white']"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  color: {
+    type: String,
+    required: true
+  },
+  checked: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const whiteColors = ['#ffffff', '#fff', 'rgb(255,255,255)'];
+const isWhite = computed(() => whiteColors.includes(props.color));
+</script>
+<style scoped></style>

src/layouts/BasicLayout/components/SettingDrawer/components/common/index.ts

@@ -0,0 +1,3 @@
+import ColorBlock from './ColorBlock.vue';
+
+export { ColorBlock };

src/layouts/BasicLayout/index.vue

@@ -5,8 +5,8 @@
       :native-scrollbar="false"
       :inverted="inverted"
       collapse-mode="width"
-      :collapsed="app.themeSettings.menuStyle.collapsed"
-      :collapsed-width="app.themeSettings.menuStyle.collapsedWidth"
+      :collapsed="app.menu.collapsed"
+      :collapsed-width="theme.menuStyle.collapsedWidth"
       :width="menuWidth"
       @collapse="handleMenuCollapse(true)"
       @expand="handleMenuCollapse(false)"
@@ -30,27 +30,27 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, NLayoutFooter } from 'naive-ui';
-import { useAppStore } from '@/store';
+import { useThemeStore, useAppStore } from '@/store';
 import { GlobalHeader, GlobalLogo, GlobalMenu, SettingDrawer } from './components';
 
+const theme = useThemeStore();
 const app = useAppStore();
 const { handleMenuCollapse } = useAppStore();
 
-const position = computed(() => (app.themeSettings.headerStyle.fixed ? 'absolute' : 'static'));
+const position = computed(() => (theme.headerStyle.fixed ? 'absolute' : 'static'));
 const menuWidth = computed(() => {
-  const { collapsed, collapsedWidth, width } = app.themeSettings.menuStyle;
+  const { collapsed } = app.menu;
+  const { collapsedWidth, width } = theme.menuStyle;
   return collapsed ? collapsedWidth : width;
 });
 const inverted = computed(() => {
-  const { theme } = app.themeSettings.navStyle;
-  return theme !== 'light';
+  return theme.navStyle.theme !== 'light';
 });
 const headerInverted = computed(() => {
-  const { theme } = app.themeSettings.navStyle;
-  return theme !== 'dark' ? inverted.value : !inverted.value;
+  return theme.navStyle.theme !== 'dark' ? inverted.value : !inverted.value;
 });
 const headerHeight = computed(() => {
-  const { height } = app.themeSettings.headerStyle;
+  const { height } = theme.headerStyle;
   return `${height}px`;
 });
 </script>