feat: 外观设置

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",

ui/src/layout/components/breadcrumb/index.vue

@@ -235,7 +235,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 {

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);
   }
 }

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
     },

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;

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>