From 4160a119aa34c12789223af1d0145f19c3101834 Mon Sep 17 00:00:00 2001
From: SuperCuteXiaoSi <1531733886@qq.com>
Date: Tue, 25 Oct 2022 16:32:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(layouts):=20=E2=9C=A8=20[App]=20=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |  10 +-
 package.json                                  |   1 +
 pnpm-lock.yaml                                | 106 ++++++++++++++--
 public/serverConfig.json                      |   1 +
 src/App.vue                                   |   8 ++
 src/components/Application/AppTheme.vue       |   3 +
 src/config/index.ts                           |   2 +
 src/hooks/useTransformTheme.ts                |   1 +
 src/hooks/web/useI18n.ts                      |   1 -
 .../pageLayouts/components/AppTabs/index.vue  |   2 +-
 .../components/Breadcrumb/index.vue           |   3 +-
 .../components/Seting/ThemeSettings/index.vue | 114 ++++++++++++++++++
 .../pageLayouts/components/Seting/index.vue   |  73 ++++++-----
 .../components/SideNavigationBar/index.vue    |  13 +-
 .../components/VerticalSidebar/index.vue      |   1 -
 src/locales/en/modules/layout.ts              |   7 ++
 src/locales/zh-ch/modules/layout.ts           |   7 ++
 src/store/modules/app.ts                      |   4 +-
 src/store/types.ts                            |   1 +
 src/styles/element-style.scss                 |   3 +
 src/styles/{ => element}/el-theme.scss        |   6 +-
 src/styles/element/index.scss                 |   2 +-
 src/styles/index.scss                         |   1 +
 src/styles/theme.scss                         |   4 +-
 src/utils/plugin/element.ts                   |   4 +
 src/utils/transformTheme.ts                   |  41 +++++++
 26 files changed, 366 insertions(+), 53 deletions(-)
 create mode 100644 src/hooks/useTransformTheme.ts
 create mode 100644 src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue
 create mode 100644 src/locales/en/modules/layout.ts
 create mode 100644 src/locales/zh-ch/modules/layout.ts
 create mode 100644 src/styles/element-style.scss
 rename src/styles/{ => element}/el-theme.scss (85%)
 create mode 100644 src/utils/transformTheme.ts

diff --git a/index.html b/index.html
index e9079b7a..00a967ae 100644
--- a/index.html
+++ b/index.html
@@ -156,13 +156,21 @@
           }
         }
       </style>
-      <div class="loading">
+      <div id="html_loding" class="loading">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
     </div>
+    <script>
+      const appConfigMode = localStorage.getItem('appConfigMode');
+      if (appConfigMode) {
+        const { primaryColor } = JSON.parse(appConfigMode);
+        const loading = document.getElementById('html_loding');
+        loading.style.color = primaryColor;
+      }
+    </script>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
index 69b71cb2..c91f4200 100644
--- a/package.json
+++ b/package.json
@@ -119,6 +119,7 @@
     "vitest": "^0.24.3",
     "vue-eslint-parser": "^9.1.0",
     "vue-tsc": "^1.0.8",
+    "vue3-colorpicker": "^2.0.4",
     "xlsx": "^0.18.5"
   },
   "license": "MIT",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08cbd66a..8f7775fd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,6 +84,7 @@ specifiers:
   vue-router: ^4.1.5
   vue-tsc: ^1.0.8
   vue-types: ^4.2.1
+  vue3-colorpicker: ^2.0.4
   vuex: ^4.1.0
   wangeditor: ^4.7.15
   xlsx: ^0.18.5
@@ -176,9 +177,17 @@ devDependencies:
   vitest: 0.24.3_jsdom@20.0.1+sass@1.55.0
   vue-eslint-parser: 9.1.0_eslint@8.25.0
   vue-tsc: 1.0.8_typescript@4.8.4
+  vue3-colorpicker: 2.0.4_rc4abim5nfyny5co6oqcsppsja
   xlsx: 0.18.5
 
 packages:
+  /@aesoper/normal-utils/0.1.5:
+    resolution:
+      {
+        integrity: sha512-LFF/6y6h5mfwhnJaWqqxuC8zzDaHCG62kMRkd8xhDtq62TQj9dM17A9DhE87W7DhiARJsHLgcina/9P4eNCN1w==,
+      }
+    dev: true
+
   /@ampproject/remapping/2.2.0:
     resolution:
       {
@@ -2495,6 +2504,13 @@ packages:
       }
     dev: true
 
+  /@popperjs/core/2.11.6:
+    resolution:
+      {
+        integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==,
+      }
+    dev: true
+
   /@rollup/plugin-babel/5.3.1_vy4anxjpv2s44kyfi2kxqu576u:
     resolution:
       {
@@ -2920,7 +2936,6 @@ packages:
       {
         integrity: sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA==,
       }
-    dev: false
 
   /@typescript-eslint/eslint-plugin/5.40.0_25sstg4uu2sk4pm7xcyzuov7xq:
     resolution:
@@ -3418,14 +3433,12 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: false
 
   /@vueuse/metadata/9.3.0:
     resolution:
       {
         integrity: sha512-GnnfjbzIPJIh9ngL9s9oGU1+Hx/h5/KFqTfJykzh/1xjaHkedV9g0MASpdmPZIP+ynNhKAcEfA6g5i8KXwtoMA==,
       }
-    dev: false
 
   /@vueuse/shared/9.3.0_vue@3.2.41:
     resolution:
@@ -3437,7 +3450,6 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: false
 
   /JSONStream/1.3.5:
     resolution:
@@ -7381,6 +7393,14 @@ packages:
       }
     dev: true
 
+  /gradient-parser/1.0.2:
+    resolution:
+      {
+        integrity: sha512-gR6nY33xC9yJoH4wGLQtZQMXDi6RI3H37ERu7kQCVUzlXjNedpZM7xcA489Opwbq0BSGohtWGsWsntupmxelMg==,
+      }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
   /grapheme-splitter/1.0.4:
     resolution:
       {
@@ -8858,7 +8878,6 @@ packages:
       {
         integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==,
       }
-    dev: false
 
   /lodash-unified/1.0.2_3ib2ivapxullxkx3xftsimdk7u:
     resolution:
@@ -10067,6 +10086,13 @@ packages:
       }
     dev: true
 
+  /performance-now/2.1.0:
+    resolution:
+      {
+        integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==,
+      }
+    dev: true
+
   /picocolors/1.0.0:
     resolution:
       {
@@ -10510,6 +10536,15 @@ packages:
     engines: { node: '>=8' }
     dev: true
 
+  /raf/3.4.1:
+    resolution:
+      {
+        integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==,
+      }
+    dependencies:
+      performance-now: 2.1.0
+    dev: true
+
   /randombytes/2.1.0:
     resolution:
       {
@@ -11958,6 +11993,13 @@ packages:
       }
     dev: true
 
+  /tinycolor2/1.4.2:
+    resolution:
+      {
+        integrity: sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==,
+      }
+    dev: true
+
   /tinypool/0.3.0:
     resolution:
       {
@@ -12899,7 +12941,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.2.41
-    dev: false
 
   /vue-eslint-parser/9.1.0_eslint@8.25.0:
     resolution:
@@ -12985,7 +13026,6 @@ packages:
     dependencies:
       is-plain-object: 5.0.0
       vue: 3.2.41
-    dev: false
 
   /vue/3.2.41:
     resolution:
@@ -12999,6 +13039,58 @@ packages:
       '@vue/server-renderer': 3.2.41_vue@3.2.41
       '@vue/shared': 3.2.41
 
+  /vue3-angle/0.1.6_vue@3.2.41:
+    resolution:
+      {
+        integrity: sha512-XbGG4xWhbbbB4Ujj17wyy5GjfsvTQL8+P00eRj3Y2W239l1CvKGehemrr0f1+IJa+aJpHaPn4hB22ahLy67Iqw==,
+      }
+    peerDependencies:
+      vue: ^3.2.6
+    dependencies:
+      vue: 3.2.41
+    dev: true
+
+  /vue3-colorpicker/2.0.4_rc4abim5nfyny5co6oqcsppsja:
+    resolution:
+      {
+        integrity: sha512-xCw/iho6t9irNqGG0VP+W3/awiuC+D4E7MDPS+CeO1qLqoLI7MdbQML0WwC2QEifd1cV7sqTVJ0JqxFjJSDGMg==,
+      }
+    peerDependencies:
+      '@vueuse/core': ^6.5.3
+      lodash-es: ^4.17.21
+      vue: ^3.2.6
+      vue-types: ^4.1.0
+    dependencies:
+      '@aesoper/normal-utils': 0.1.5
+      '@popperjs/core': 2.11.6
+      '@vueuse/core': 9.3.0_vue@3.2.41
+      gradient-parser: 1.0.2
+      lodash-es: 4.17.21
+      tinycolor2: 1.4.2
+      vue: 3.2.41
+      vue-types: 4.2.1_vue@3.2.41
+      vue3-angle: 0.1.6_vue@3.2.41
+      vue3-normal-library: 0.1.6_74iyevwgxgcv26n6rs4wwe3b6y
+    transitivePeerDependencies:
+      - '@vue/compiler-sfc'
+    dev: true
+
+  /vue3-normal-library/0.1.6_74iyevwgxgcv26n6rs4wwe3b6y:
+    resolution:
+      {
+        integrity: sha512-TSqCeD092ETnjqamNKtXencLnG4a+NVWFZgalmyPtFH1FHvpxLP7eptT8krOL2sZVspficic8DghfDakw3tKRQ==,
+      }
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.2.6
+      vue: ^3.2.6
+    dependencies:
+      '@vue/compiler-sfc': 3.2.41
+      lodash-es: 4.17.21
+      raf: 3.4.1
+      vue: 3.2.41
+      vue-types: 4.2.1_vue@3.2.41
+    dev: true
+
   /vuex/4.1.0_vue@3.2.41:
     resolution:
       {
diff --git a/public/serverConfig.json b/public/serverConfig.json
index 7232b813..9cdb7d3e 100644
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -4,6 +4,7 @@
   "sidebarMode": "vertical",
   "themeMode": "day",
   "locale": "zh-ch",
+  "primaryColor": "#409eff",
   "StorageConfig":{
     "type": "localStorage",
     "prefix": "xiaosiAdmin", 
diff --git a/src/App.vue b/src/App.vue
index 15f05bc4..f81dbbd1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
   import { ElConfigProvider } from 'element-plus';
+  import { useColorMode } from '@vueuse/core';
+  import { useAppStoreHook } from './store/modules/app';
   import { deffElementLocale } from '@/hooks/web/useI18n';
   const { tolocale } = deffElementLocale();
+
+  const appStore = useAppStoreHook();
+  const color = useColorMode();
+
+  console.log(color);
+  console.log(JSON.parse(JSON.stringify(appStore.appConfigMode)));
 </script>
 
 <template>
diff --git a/src/components/Application/AppTheme.vue b/src/components/Application/AppTheme.vue
index 8100bed8..7cc68407 100644
--- a/src/components/Application/AppTheme.vue
+++ b/src/components/Application/AppTheme.vue
@@ -2,13 +2,16 @@
   import { useColorMode } from '@vueuse/core';
   import SvgIcon from '../SvgIcon/index.vue';
   import { useAppStoreHook } from '@/store/modules/app';
+  import { updateColor } from '@/utils/transformTheme';
 
   const appStore = useAppStoreHook();
   const color = useColorMode();
+
   const toggleDarkMode = () => {
     color.value = color.value === 'dark' ? 'light' : 'dark';
     appStore.appConfigMode.themeMode = color.value;
     appStore.setAppConfigMode(appStore.appConfigMode);
+    updateColor();
   };
 </script>
 
diff --git a/src/config/index.ts b/src/config/index.ts
index bd580865..c6b4eb20 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -2,6 +2,7 @@ import type { App } from 'vue';
 import { getConfigInfo } from '@/server/config';
 import type { AppConfig } from '@/store/types';
 import { setStorageConfig } from '@/utils/storage';
+import { updateColor } from '@/utils/transformTheme';
 
 let config: AppConfig = {} as AppConfig;
 
@@ -24,6 +25,7 @@ export async function getServerConfig(app: App): Promise<AppConfig> {
     }
   }
   setStorageConfig(config.StorageConfig);
+  updateColor();
   app.config.globalProperties.$config = getConfig();
   return config;
 }
diff --git a/src/hooks/useTransformTheme.ts b/src/hooks/useTransformTheme.ts
new file mode 100644
index 00000000..c56bfe0b
--- /dev/null
+++ b/src/hooks/useTransformTheme.ts
@@ -0,0 +1 @@
+export const useTransformTheme = () => {};
diff --git a/src/hooks/web/useI18n.ts b/src/hooks/web/useI18n.ts
index 6b1982da..aedca27c 100644
--- a/src/hooks/web/useI18n.ts
+++ b/src/hooks/web/useI18n.ts
@@ -31,7 +31,6 @@ export function translateI18n(message: any = '') {
   }
   const key = message.split('.')[0];
   if (key && Object.keys(i18n.global.messages.value[locale]).includes(key)) {
-    // @ts-expect-error: 类型实例化过深，且可能无限
     return i18n.global.t(message);
   }
   return message;
diff --git a/src/layouts/pageLayouts/components/AppTabs/index.vue b/src/layouts/pageLayouts/components/AppTabs/index.vue
index 28297382..4ed5c079 100644
--- a/src/layouts/pageLayouts/components/AppTabs/index.vue
+++ b/src/layouts/pageLayouts/components/AppTabs/index.vue
@@ -196,7 +196,7 @@
           margin-right: 5px;
         }
         &:hover {
-          background-color: var(--sub-color-2);
+          background-color: var(--sub-color-8);
         }
       }
     }
diff --git a/src/layouts/pageLayouts/components/Breadcrumb/index.vue b/src/layouts/pageLayouts/components/Breadcrumb/index.vue
index 2674576a..ee253b35 100644
--- a/src/layouts/pageLayouts/components/Breadcrumb/index.vue
+++ b/src/layouts/pageLayouts/components/Breadcrumb/index.vue
@@ -38,7 +38,6 @@
       if (matched.find((i) => i.path === item.path)) return false;
       return route.name === item.name && isEqual(route.query, itemQuery);
     });
-    console.log(matched);
     if (item) matched.push(item as unknown as AppRouteRecordRaw);
     levelList.value = matched.filter(
       (item) => item && item.meta && item.meta.title && !item.meta.breadcrumb,
@@ -79,7 +78,7 @@
 <template>
   <div class="breadcrumb">
     <SvgIcon
-      class="breadcrumb-fold"
+      class="breadcrumb-fold cursor"
       :class="{ 'breadcrumb-unfold': appConfigMode.collapseMenu }"
       name="fold"
       color="#e3e3e3"
diff --git a/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue b/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue
new file mode 100644
index 00000000..b545fdbb
--- /dev/null
+++ b/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+  import { ColorPicker } from 'vue3-colorpicker';
+  import 'vue3-colorpicker/style.css';
+  import { useAppStoreHook } from '@/store/modules/app';
+  import { updateColor } from '@/utils/transformTheme';
+  import SvgIcon from '@/components/SvgIcon/index.vue';
+
+  const appStore = useAppStoreHook();
+
+  const pureColor = ref(appStore.appConfigMode.primaryColor);
+
+  const showPicker = ref<boolean>(false);
+
+  const colorList = ['#722ed1', '#eb2f96', '#52c41a', '#13c2c2', '#fadb14', '#fa541c', '#f5222d'];
+
+  watch([pureColor], () => {
+    console.log(pureColor.value);
+    appStore.appConfigMode.primaryColor = pureColor.value;
+    appStore.setAppConfigMode(appStore.appConfigMode);
+    updateColor();
+  });
+</script>
+
+<template>
+  <div>
+    <div class="color-list">
+      <div
+        v-for="i in colorList"
+        :key="i"
+        class="cursor color-list-item"
+        :style="{ backgroundColor: i }"
+        @click="() => (pureColor = i)"
+      >
+        <SvgIcon v-if="i === pureColor" class="icon" name="iEL-select"></SvgIcon>
+      </div>
+    </div>
+    <div class="options">
+      <span>自定义主题：</span>
+      <div class="color-picker">
+        <span
+          class="cursor"
+          :style="{ backgroundColor: pureColor }"
+          @click="() => (showPicker = !showPicker)"
+        ></span>
+        <div v-show="showPicker" class="picker">
+          <div class="mask" @click="() => (showPicker = !showPicker)"></div>
+          <ColorPicker
+            v-model:pureColor="pureColor"
+            format="hex"
+            :disable-alpha="true"
+            :is-widget="true"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- <div class="options">
+      <span>自定义主题：</span>
+      <ColorPicker v-model:pureColor="pureColor" format="hex" />
+    </div>
+    <div class="options">
+      <span>自定义主题：</span>
+      <ColorPicker v-model:pureColor="pureColor" format="hex" />
+    </div> -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .color-list {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .color-list-item {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .icon {
+        color: #fff;
+      }
+    }
+  }
+  .options {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 20px 0;
+    .color-picker {
+      position: relative;
+      width: 50px;
+      height: 24px;
+      span {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+      .mask {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100vh;
+        z-index: 98;
+      }
+      :deep(.vc-colorpicker) {
+        position: absolute;
+        top: 30px;
+        right: 0;
+        z-index: 99;
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/pageLayouts/components/Seting/index.vue b/src/layouts/pageLayouts/components/Seting/index.vue
index 70040280..597cf215 100644
--- a/src/layouts/pageLayouts/components/Seting/index.vue
+++ b/src/layouts/pageLayouts/components/Seting/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import { watch, ref, toRef } from 'vue';
+  import ThemeSettings from './ThemeSettings/index.vue';
   import { useAppStoreHook } from '@/store/modules/app';
   import type { SidebarMode } from '@/store/types';
 
@@ -46,36 +47,51 @@
 </script>
 
 <template>
-  <el-drawer v-model="drawer" title="设置" @close="emit('update:modelValue', false)">
-    <div class="drawer-content">
-      <div class="layout_seting">
-        <div class="sidebar_seting">
-          <el-tooltip
-            v-for="item in sidebarSeting"
-            :key="item.value"
-            :content="item.label"
-            placement="bottom"
-          >
-            <div
-              class="sidebar_mode"
-              :class="{ 'sidebar_mode-select': appConfigMode.sidebarMode === item.value }"
-              @click="handerShowElmenu(item.value)"
+  <div class="setting">
+    <el-drawer
+      v-model="drawer"
+      custom-class="setting-drawer"
+      :title="$t('layout.setup')"
+      :size="320"
+      @close="emit('update:modelValue', false)"
+    >
+      <div class="drawer-content">
+        <el-divider content-position="center">{{ $t('layout.layoutSettings') }}</el-divider>
+        <div class="layout_seting">
+          <div class="sidebar_seting">
+            <el-tooltip
+              v-for="item in sidebarSeting"
+              :key="item.value"
+              :content="item.label"
+              placement="bottom"
             >
-              <div></div>
-              <div></div>
-            </div>
-          </el-tooltip>
+              <div
+                class="sidebar_mode"
+                :class="{ 'sidebar_mode-select': appConfigMode.sidebarMode === item.value }"
+                @click="handerShowElmenu(item.value)"
+              >
+                <div></div>
+                <div></div>
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+        <el-divider content-position="center">{{ $t('layout.ThemeSettings') }}</el-divider>
+        <div>
+          <ThemeSettings></ThemeSettings>
         </div>
       </div>
-    </div>
-  </el-drawer>
+    </el-drawer>
+  </div>
 </template>
 
 <style lang="scss" scoped>
+  .setting :deep(.el-drawer__header) {
+    margin-bottom: 0;
+  }
+
   .drawer-content {
     width: 100%;
-    height: 100%;
-
     .layout_seting {
       .sidebar_seting {
         display: flex;
@@ -83,23 +99,24 @@
         justify-content: space-around;
 
         .sidebar_mode-select {
-          border: 2px solid #409eff;
+          border: 2px solid var(--mian-color);
         }
 
         .sidebar_mode {
           position: relative;
-          width: 115px;
-          height: 80px;
+          width: 80px;
+          height: 60px;
           background: #f0f2f5;
           border-radius: 5px;
           box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
+          overflow: hidden;
 
           &:nth-child(1) {
             div {
               &:nth-child(1) {
                 width: 30%;
                 height: 100%;
-                background: #409eff;
+                background: var(--mian-color);
               }
 
               &:nth-child(2) {
@@ -119,7 +136,7 @@
               &:nth-child(1) {
                 width: 100%;
                 height: 30%;
-                background: #409eff;
+                background: var(--mian-color);
                 box-shadow: 0 0 1px #888;
               }
             }
@@ -139,7 +156,7 @@
                 right: 0;
                 width: 100%;
                 height: 30%;
-                background: #409eff;
+                background: var(--mian-color);
                 box-shadow: 0 0 1px #888;
               }
             }
diff --git a/src/layouts/pageLayouts/components/SideNavigationBar/index.vue b/src/layouts/pageLayouts/components/SideNavigationBar/index.vue
index 0159de07..1871e4b2 100644
--- a/src/layouts/pageLayouts/components/SideNavigationBar/index.vue
+++ b/src/layouts/pageLayouts/components/SideNavigationBar/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-  import { computed, ref, watch } from 'vue';
+  import { ref, watch } from 'vue';
+  import { storeToRefs } from 'pinia';
   import { useDebounceFn, useEventListener, useMediaQuery } from '@vueuse/core';
   import VerticalSidebar from '../VerticalSidebar/index.vue';
   import { useAppStoreHook } from '@/store/modules/app';
@@ -7,14 +8,14 @@
 
   const appStore = useAppStoreHook();
 
-  const drawer = computed(() => !appStore.appConfigMode.collapseMenu);
+  const drawer = ref<boolean>(!appStore.appConfigMode.collapseMenu);
 
   const setAppStore = (appData: Partial<AppConfig>) => {
     appStore.setAppConfigMode(appData);
   };
 
   const handleClose = () => {
-    setAppStore({ collapseMenu: true });
+    setAppStore({ collapseMenu: drawer.value });
   };
 
   const isPhoneScreen = ref<boolean>(false);
@@ -36,6 +37,12 @@
     setAppStore({ collapseMenu: isSmallScreen.value });
   });
 
+  const { appConfigMode } = storeToRefs(appStore);
+
+  watch(appConfigMode, () => {
+    drawer.value = !appConfigMode.value.collapseMenu;
+  });
+
   useEventListener(window, 'resize', () => mediaQuery());
 
   mediaQuery();
diff --git a/src/layouts/pageLayouts/components/VerticalSidebar/index.vue b/src/layouts/pageLayouts/components/VerticalSidebar/index.vue
index ac744a4e..7710a976 100644
--- a/src/layouts/pageLayouts/components/VerticalSidebar/index.vue
+++ b/src/layouts/pageLayouts/components/VerticalSidebar/index.vue
@@ -7,7 +7,6 @@
   const appStore = useAppStoreHook();
   const appConfigMode = toRef(appStore, 'appConfigMode');
   const config = getCurrentInstance()?.appContext.config.globalProperties.$config;
-  console.log(config);
 </script>
 
 <template>
diff --git a/src/locales/en/modules/layout.ts b/src/locales/en/modules/layout.ts
new file mode 100644
index 00000000..1cf0f1ec
--- /dev/null
+++ b/src/locales/en/modules/layout.ts
@@ -0,0 +1,7 @@
+const layout = {
+  setup: 'Set Up',
+  layoutSettings: 'Layout Settings',
+  ThemeSettings: 'Theme Settings',
+};
+
+export default layout;
diff --git a/src/locales/zh-ch/modules/layout.ts b/src/locales/zh-ch/modules/layout.ts
new file mode 100644
index 00000000..0efb9e04
--- /dev/null
+++ b/src/locales/zh-ch/modules/layout.ts
@@ -0,0 +1,7 @@
+const layout = {
+  setup: '设置',
+  layoutSettings: '布局设置',
+  ThemeSettings: '主题设置',
+};
+
+export default layout;
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 97e290ff..4bca2a94 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -3,12 +3,10 @@ import type { AppState, AppConfig } from '../types';
 import { getConfig } from '@/config';
 import { store } from '@/store';
 
-export const localAppConfig: AppConfig = getConfig();
-
 const useAppStore = defineStore({
   id: 'app',
   state: (): AppState => ({
-    appConfigMode: localAppConfig,
+    appConfigMode: getConfig(),
   }),
   getters: {
     getAppConfigMode(): AppConfig {
diff --git a/src/store/types.ts b/src/store/types.ts
index d58c7649..41b7fbee 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -16,6 +16,7 @@ export interface AppConfig {
   locale: string;
   StorageConfig: StorageConfig;
   drawerSidebar?: boolean;
+  primaryColor: string;
 }
 
 export type MultiTabsType = Omit<
diff --git a/src/styles/element-style.scss b/src/styles/element-style.scss
new file mode 100644
index 00000000..d70ff032
--- /dev/null
+++ b/src/styles/element-style.scss
@@ -0,0 +1,3 @@
+// .el-drawer__header{
+//   margin-bottom: 0;
+// }
diff --git a/src/styles/el-theme.scss b/src/styles/element/el-theme.scss
similarity index 85%
rename from src/styles/el-theme.scss
rename to src/styles/element/el-theme.scss
index d210bc91..4b463375 100644
--- a/src/styles/el-theme.scss
+++ b/src/styles/element/el-theme.scss
@@ -5,7 +5,7 @@ $navBarHeight: 57px;
 $tabsPageHeight: 38px; //面包屑高度 38px
 
 $menuBg: var(--main-bg-color); // 侧边栏背景颜色
-$menuHover: var(--sub-main-bg-content); // 焦点背景色
+$menuHover: var(--sub-color-9); // 焦点背景色
 $menuHoverText: var(--mian-color); //焦点文字颜色
 $menuText: var(--text-color-primary); //文字颜色
 $menuActiveText: var(--mian-color); //选中的文字颜色
@@ -13,10 +13,10 @@ $menuActiveText: var(--mian-color); //选中的文字颜色
 $menuItemBg: var(--main-bg-color); //二级背景颜色
 $menuItemBorderLeft: var(--main-bg-color); //二级未选中的背景颜色
 $menuItemText: var(--text-color-primary); //二级文字颜色
-$menuItemHover: var(--sub-main-bg-content); //二级焦点背景颜色
+$menuItemHover: var(--sub-color-9); //二级焦点背景颜色
 $menuItemHoverText: var(--mian-color); //二级焦点文字颜色
 $menuItemActiveText: var(--mian-color); //二级选中的背景颜色
-$menuItemActiveBg: var(--sub-color-2); //二级选中背景颜色
+$menuItemActiveBg: var(--sub-color-8); //二级选中背景颜色
 $menuItemActiveBorderLeft: var(--mian-color); //二级左描边背景颜色
 
 $app-main-bg-color: var(--sub-main-bg-content); //app-mian背景颜色
diff --git a/src/styles/element/index.scss b/src/styles/element/index.scss
index 7fd47e46..0477a3d6 100644
--- a/src/styles/element/index.scss
+++ b/src/styles/element/index.scss
@@ -11,4 +11,4 @@
     'placeholder': #ebeef5,
   )
 );
-@import '../el-theme.scss';
+@import './el-theme.scss';
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 6910f32e..70c7da3b 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,6 @@
 @import 'element-plus/theme-chalk/src/dark/css-vars.scss';
 @import './theme.scss';
+@import './element-style.scss';
 @import './intro.scss';
 @import './transition.scss';
 @import './sidebar.scss';
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index b977e4eb..657da927 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -4,7 +4,8 @@
   --color-white: #ffffff;
   --mian-color: var(--el-color-primary); //主色
   --sub-color: var(--el-color-primary-light-5); //浅蓝1
-  --sub-color-2: var(--el-color-primary-light-8); //浅蓝2
+  --sub-color-8: var(--el-color-primary-light-8); //浅蓝2
+  --sub-color-9: var(--el-color-primary-light-9); //浅蓝2
 
   // 主题背景颜色
   --main-bg-color: #ffffff; // 首选背景颜色
@@ -15,7 +16,6 @@
   --text-color-regular: var(--el-text-color-regular); // 次选文字颜色
   --text-color-placeholder: var(--el-text-color-placeholder); //分割线/备注
   --text-color-disabled: var(--el-text-color-disabled);
-
   --border-color-light: var(--el-border-color-light);
 }
 
diff --git a/src/utils/plugin/element.ts b/src/utils/plugin/element.ts
index d1014216..945cb582 100644
--- a/src/utils/plugin/element.ts
+++ b/src/utils/plugin/element.ts
@@ -36,6 +36,7 @@ import {
   ElCalendar,
   ElTabs,
   ElTabPane,
+  ElDivider,
   // 指令
   ElLoading,
   ElInfiniteScroll,
@@ -54,6 +55,7 @@ import {
   CaretRight,
   ArrowDown,
   Management,
+  Select,
 } from '@element-plus/icons-vue';
 
 // Directives
@@ -96,6 +98,7 @@ const components = [
   ElCalendar,
   ElTabs,
   ElTabPane,
+  ElDivider,
 ];
 
 // Icon
@@ -111,6 +114,7 @@ export const iconComponents = [
   CaretRight,
   ArrowDown,
   Management,
+  Select,
 ];
 
 export function useElementPlus(app: App) {
diff --git a/src/utils/transformTheme.ts b/src/utils/transformTheme.ts
new file mode 100644
index 00000000..0fb19c81
--- /dev/null
+++ b/src/utils/transformTheme.ts
@@ -0,0 +1,41 @@
+// hex转rgb
+function hexToRgb(str: string) {
+  const hxs: string[] = str.replace('#', '').match(/../g) || [];
+  const newHxs: number[] = [];
+  for (let i = 0; i < 3; i++) newHxs[i] = parseInt(hxs[i], 16);
+  return newHxs;
+}
+
+// rgb转hex
+function rgbToHex(a: number, b: number, c: number) {
+  const hexs = [a.toString(16), b.toString(16), c.toString(16)];
+  for (let i = 0; i < 3; i++) {
+    if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
+  }
+  return `#${hexs.join('')}`;
+}
+
+// 参考element style 计算
+const mix = (color1: string, color2: string, weight: number) => {
+  weight = Math.max(Math.min(Number(weight), 1), 0);
+  const mainColor = hexToRgb(color1);
+  const mixColor = hexToRgb(color2);
+  const hex = [];
+  for (let i = 0; i < mainColor.length; i++)
+    hex[i] = Math.round(mainColor[i] * (1 - weight) + mixColor[i] * weight);
+  return rgbToHex(hex[0], hex[1], hex[2]);
+};
+
+export const updateColor = () => {
+  const appConfigMode = localStorage.getItem('appConfigMode');
+  if (appConfigMode) {
+    const { primaryColor, themeMode } = JSON.parse(appConfigMode);
+    if (!primaryColor) return;
+    const body = document.documentElement as HTMLElement;
+    const mixWhite = themeMode === 'dark' ? '#141414' : '#ffffff';
+    body.style.setProperty('--el-color-primary', primaryColor);
+    for (let i = 1; i <= 9; i++) {
+      body.style.setProperty(`--el-color-primary-light-${i}`, mix(primaryColor, mixWhite, i * 0.1));
+    }
+  }
+};