From a6a9fc75dd66951c983d6f6f1ea0af05ea2ea775 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 12 Jul 2024 19:04:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=96=E8=A7=82=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/package.json                               |  1 +
 ui/src/layout/components/breadcrumb/index.vue |  2 +-
 .../layout/components/sidebar/SidebarItem.vue |  8 +++---
 ui/src/stores/modules/common.ts               | 10 ++++++-
 ui/src/styles/element-plus.scss               |  1 -
 ui/src/views/theme/index.vue                  | 26 +++++++++++++++----
 6 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index fb9d937d0..811070a72 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -37,6 +37,7 @@
     "pinia": "^2.1.6",
     "pinyin-pro": "^3.18.2",
     "screenfull": "^6.0.2",
+    "use-element-plus-theme": "^0.0.5",
     "vue": "^3.3.4",
     "vue-clipboard3": "^2.0.0",
     "vue-i18n": "^9.13.1",
diff --git a/ui/src/layout/components/breadcrumb/index.vue b/ui/src/layout/components/breadcrumb/index.vue
index c884d5b09..27e1548c3 100644
--- a/ui/src/layout/components/breadcrumb/index.vue
+++ b/ui/src/layout/components/breadcrumb/index.vue
@@ -228,7 +228,7 @@ onMounted(() => {
     border-radius: 4px;
     &:hover {
       background: var(--el-color-primary-light-9);
-      color: var(--el-menu-active-color);
+      color: var(--el-color-primary);
     }
   }
   &__footer {
diff --git a/ui/src/layout/components/sidebar/SidebarItem.vue b/ui/src/layout/components/sidebar/SidebarItem.vue
index 93e49fb75..8601d6327 100644
--- a/ui/src/layout/components/sidebar/SidebarItem.vue
+++ b/ui/src/layout/components/sidebar/SidebarItem.vue
@@ -50,6 +50,8 @@ const {
   params: { id, type }
 } = route as any
 
+
+
 function showMenu() {
   if (isWorkFlow(type)) {
     return props.menu.name !== 'AppHitTest'
@@ -84,14 +86,14 @@ const menuIcon = computed(() => {
     border-radius: 4px;
     &:hover {
       background: none;
-      color: var(--el-menu-active-color);
+      color: var(--el-color-primary);
     }
   }
   :deep(.el-sub-menu__title) {
     padding: 13px 12px 13px 16px !important;
     &:hover {
       background: none;
-      color: var(--el-menu-active-color);
+      color: var(--el-color-primary);
     }
   }
   .el-sub-menu {
@@ -100,7 +102,7 @@ const menuIcon = computed(() => {
     }
   }
   .el-menu-item.is-active {
-    color: var(--el-menu-active-color);
+    color: var(--el-color-primary);
     background: var(--el-color-primary-light-9);
   }
 }
diff --git a/ui/src/stores/modules/common.ts b/ui/src/stores/modules/common.ts
index 636a36dc2..a76d80d91 100644
--- a/ui/src/stores/modules/common.ts
+++ b/ui/src/stores/modules/common.ts
@@ -8,6 +8,7 @@ export interface commonTypes {
   paginationConfig: any | null
   search: any
   device: string
+  theme: string
 }
 
 const useCommonStore = defineStore({
@@ -17,9 +18,16 @@ const useCommonStore = defineStore({
     // 搜索和分页缓存
     paginationConfig: {},
     search: {},
-    device: DeviceType.Desktop
+    device: DeviceType.Desktop,
+    theme: ''
   }),
   actions: {
+    isDefaultTheme() {
+      this.theme === '#3370ff'
+    },
+    setTheme(val: string) {
+      this.theme = val
+    },
     saveBreadcrumb(data: any) {
       this.breadcrumb = data
     },
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 2a21411d2..83c7227cc 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -1,6 +1,5 @@
 :root {
   --el-color-primary: #3370ff;
-  --el-color-primary-light-9: rgba(51, 112, 255, 0.1);
   --el-menu-item-height: 45px;
   --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
   --el-border-color: #dee0e3;
diff --git a/ui/src/views/theme/index.vue b/ui/src/views/theme/index.vue
index 85d662e29..a92a4c6ba 100644
--- a/ui/src/views/theme/index.vue
+++ b/ui/src/views/theme/index.vue
@@ -8,7 +8,7 @@
           <el-radio-group
             v-model="themeForm.theme"
             class="app-radio-button-group"
-            @change="themeColorChange"
+            @change="changeTheme"
           >
             <template v-for="(item, index) in themeList" :key="index">
               <el-radio-button :label="item.label" :value="item.value" />
@@ -23,7 +23,7 @@
               <el-button type="primary" link> 恢复默认 </el-button>
             </div>
             <div class="theme-preview">
-              <el-row :gutter="20">
+              <el-row :gutter="8">
                 <el-col :span="16">
                   <LoginPreview />
                 </el-col>
@@ -91,16 +91,18 @@
       </div>
     </el-scrollbar>
     <div class="theme-setting__operate w-full p-16-24">
-      <el-button>放弃更新</el-button>
+      <el-button @click="resetTheme">放弃更新</el-button>
       <el-button type="primary"> 保存并应用 </el-button>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, watch } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import LoginPreview from './LoginPreview.vue'
+import { useElementPlusTheme } from 'use-element-plus-theme'
+
 const themeList = [
   {
     label: '默认',
@@ -148,7 +150,21 @@ const rules = reactive<FormRules>({
   slogan: [{ required: true, message: '请输入欢迎语', trigger: 'blur' }]
 })
 
-const themeColorChange = (val: string) => {}
+const { changeTheme } = useElementPlusTheme(themeForm.value.theme)
+
+function resetTheme() {
+  themeForm.value.theme = '#3370FF'
+  changeTheme(themeForm.value.theme)
+}
+
+watch(
+  () => themeForm.value.theme,
+  (val) => {
+    if (val) {
+      console.log(val)
+    }
+  }
+)
 </script>
 
 <style lang="scss" scoped>