From 15919855ab34f58535547aeb930a7a81cd1dd67d Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Sat, 4 May 2024 23:48:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BB=E9=A2=98=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/theme-settings/index.vue       | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/layout/components/Header/components/theme-settings/index.vue b/src/layout/components/Header/components/theme-settings/index.vue
index 15c41a5..374c090 100644
--- a/src/layout/components/Header/components/theme-settings/index.vue
+++ b/src/layout/components/Header/components/theme-settings/index.vue
@@ -4,7 +4,7 @@
     <div>
       <div>
         <a-divider orientation="center">导航模式</a-divider>
-        <div class="flex-common">
+        <div class="flex-center">
           <a-tooltip v-for="item in layoutList" :key="item.value" :content="item.label" position="top" mini>
             <div
               :class="layoutType === item.value ? `current-layout ${item.class}` : item.class"
@@ -15,12 +15,25 @@
           </a-tooltip>
         </div>
       </div>
-      <div>
+      <div class="box-gap">
         <a-divider orientation="center">主题设置</a-divider>
-        <div class="flex-row">
-          <div>主题色</div>
+        <div class="flex-center">
+          <a-color-picker default-value="#12D2AC" hide-trigger show-preset />
+        </div>
+        <!-- <div class="flex-row">
+          <div>色弱模式</div>
           <a-switch />
         </div>
+        <div class="flex-row">
+          <div>灰色模式</div>
+          <a-switch />
+        </div>
+        <div class="flex-row">
+          <div>侧边栏深色</div>
+          <a-switch />
+        </div> -->
+      </div>
+      <div class="box-gap">
         <div class="flex-row">
           <div>色弱模式</div>
           <a-switch />
@@ -82,7 +95,7 @@ const handleCancel = () => {
 
 <style lang="scss" scoped>
 .box-gap {
-  margin-top: $margin;
+  margin-top: 30px;
 }
 .flex-row {
   display: flex;
@@ -90,7 +103,7 @@ const handleCancel = () => {
   align-items: center;
   margin-bottom: $margin;
 }
-.flex-common {
+.flex-center {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -173,4 +186,8 @@ const handleCancel = () => {
     background: #fff;
   }
 }
+
+:deep(.arco-divider-text) {
+  background: $color-bg-3;
+}
 </style>