feat(projects): 新增主题颜色配置

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

@@ -1,6 +1,6 @@
 <template>
   <div class="global-header flex-y-center justify-between">
-    <h2>123</h2>
+    <h2></h2>
     <header-item-container class="w-40px h-full" @click="openSettingDrawer">
       <icon-mdi-light-cog class="text-16px" />
     </header-item-container>

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

@@ -1,5 +1,5 @@
 <template>
-  <div>菜单</div>
+  <div></div>
 </template>
 
 <script lang="ts" setup></script>

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

@@ -0,0 +1,23 @@
+<template>
+  <n-divider title-placement="center">系统主题</n-divider>
+  <div class="flex flex-wrap justify-between">
+    <div
+      v-for="color in app.themeSettings.themeColorList"
+      :key="color"
+      class="flex-center w-20px h-20px mx-6px mb-8px cursor-pointer rounded-2px"
+      :style="{ backgroundColor: color }"
+      @click="setThemeColor(color)"
+    >
+      <icon-ic-outline-check v-if="color === app.themeSettings.themeColor" class="text-14px text-white" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NDivider } from 'naive-ui';
+import { useAppStore } from '@/store';
+
+const app = useAppStore();
+const { setThemeColor } = useAppStore();
+</script>
+<style scoped></style>

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

@@ -1,3 +1,4 @@
 import DarkMode from './DarkMode.vue';
+import SystemTheme from './SystemTheme.vue'
 
-export { DarkMode };
+export { DarkMode, SystemTheme };

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

@@ -2,6 +2,7 @@
   <n-drawer v-model:show="app.settingDrawer.visible">
     <n-drawer-content title="主题配置">
       <dark-mode />
+			<system-theme />
     </n-drawer-content>
   </n-drawer>
 </template>
@@ -9,7 +10,7 @@
 <script lang="ts" setup>
 import { NDrawer, NDrawerContent } from 'naive-ui';
 import { useAppStore } from '@/store';
-import { DarkMode } from './components';
+import { DarkMode, SystemTheme } from './components';
 
 const app = useAppStore();
 </script>

src/layouts/BasicLayout/index.vue

@@ -1,7 +1,7 @@
 <template>
   <n-layout has-sider :position="position">
     <n-layout-sider
-      class="layout-sider min-h-100vh"
+      class="layout-sider min-h-100vh z-11"
       :native-scrollbar="false"
       :inverted="inverted"
       collapse-mode="width"

src/settings/theme/index.ts

@@ -4,7 +4,6 @@ const themeColorList = [
   '#409EFF',
   '#2d8cf0',
   '#0960bd',
-  '#0084f4',
   '#009688',
   '#536dfe',
   '#ff5c93',

src/store/modules/app/index.ts

@@ -80,6 +80,10 @@ const appStore = defineStore({
     /** 关闭配置抽屉 */
     closeSettingDrawer() {
       this.settingDrawer.visible = false;
+    },
+    /** 设置系统主题颜色 */
+    setThemeColor(color: string) {
+      this.themeSettings.themeColor = color;
     }
   }
 });