From d93493b91ca856573c306e890e8c6f6a46b5bda3 Mon Sep 17 00:00:00 2001
From: Soybean <2570172956@qq.com>
Date: Wed, 1 Sep 2021 23:36:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E6=96=B0=E5=A2=9E=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E9=A2=9C=E8=89=B2=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/GlobalHeader/index.vue         |  2 +-
 .../components/GlobalMenu/index.vue           |  2 +-
 .../SettingDrawer/components/SystemTheme.vue  | 23 +++++++++++++++++++
 .../SettingDrawer/components/ThemeStyle.vue   |  0
 .../SettingDrawer/components/index.ts         |  3 ++-
 .../components/SettingDrawer/index.vue        |  3 ++-
 src/layouts/BasicLayout/index.vue             |  2 +-
 src/settings/theme/index.ts                   |  1 -
 src/store/modules/app/index.ts                |  4 ++++
 9 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 src/layouts/BasicLayout/components/SettingDrawer/components/SystemTheme.vue
 delete mode 100644 src/layouts/BasicLayout/components/SettingDrawer/components/ThemeStyle.vue

diff --git a/src/layouts/BasicLayout/components/GlobalHeader/index.vue b/src/layouts/BasicLayout/components/GlobalHeader/index.vue
index abd51f5a..c54104e1 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/index.vue
+++ b/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>
diff --git a/src/layouts/BasicLayout/components/GlobalMenu/index.vue b/src/layouts/BasicLayout/components/GlobalMenu/index.vue
index c5c27b65..cac5cad1 100644
--- a/src/layouts/BasicLayout/components/GlobalMenu/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalMenu/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>菜单</div>
+  <div></div>
 </template>
 
 <script lang="ts" setup></script>
diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/SystemTheme.vue b/src/layouts/BasicLayout/components/SettingDrawer/components/SystemTheme.vue
new file mode 100644
index 00000000..62073d96
--- /dev/null
+++ b/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>
diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/ThemeStyle.vue b/src/layouts/BasicLayout/components/SettingDrawer/components/ThemeStyle.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/index.ts b/src/layouts/BasicLayout/components/SettingDrawer/components/index.ts
index e49edc04..f37b454b 100644
--- a/src/layouts/BasicLayout/components/SettingDrawer/components/index.ts
+++ b/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 };
diff --git a/src/layouts/BasicLayout/components/SettingDrawer/index.vue b/src/layouts/BasicLayout/components/SettingDrawer/index.vue
index 012c3467..79d71d19 100644
--- a/src/layouts/BasicLayout/components/SettingDrawer/index.vue
+++ b/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>
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index edc58f96..18a5d15a 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/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"
diff --git a/src/settings/theme/index.ts b/src/settings/theme/index.ts
index 001694ca..9c12c160 100644
--- a/src/settings/theme/index.ts
+++ b/src/settings/theme/index.ts
@@ -4,7 +4,6 @@ const themeColorList = [
   '#409EFF',
   '#2d8cf0',
   '#0960bd',
-  '#0084f4',
   '#009688',
   '#536dfe',
   '#ff5c93',
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
index cab27621..74cce268 100644
--- a/src/store/modules/app/index.ts
+++ b/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;
     }
   }
 });