主题获取

src/router/index.ts

@@ -7,7 +7,6 @@ import {mockGetUserInfo, mockGetConfig} from "@/api/modules/mock/mock";
 import {ElLoading, ElMessage} from "element-plus";
 import {useAppStore, useThemeStore} from "@/stores";
 import {toLogin} from "@/utils/permissions";
-import initRootVar from "@/style/initRootVar";
 import {getCurrentUser} from "@/api/modules/manage/user";
 import {sysThemeGetThemeByThemeType} from "@/api/modules/manage/theme";
 
@@ -66,16 +65,7 @@ export const initMainRouter = async () => {
             if (userInfo?.isAdmin) {
                 router.addRoute(manageRouter)
             }
-            themeConfig = {
-                // mainColor: '#f82828',
-                // logo: 'https://element-plus.org/images/element-plus-logo.svg',
-                // title: '海南社管智慧搜索平台',
-                // subTitle: 'HAI NAN SHE GUAN ZHI HUI SOU SUO PING TAI',
-                // titleLogo: 'https://element-plus.org/images/element-plus-logo.svg',
-                // webBgImg: 'https://element-plus.org/images/element-plus-logo.svg',
-                // loginImg: 'https://element-plus.org/images/element-plus-logo.svg',
-            }
-            initRootVar(themeConfig)
+            themeConfig = theme.data.themeStyle ? JSON.parse(theme.data.themeStyle) : {}
             loading.close()
         })
     } else if (location.pathname !== '/login') {

src/stores/theme.ts

@@ -2,10 +2,12 @@ import {defineStore} from "pinia";
 import titleLogo from '@/assets/images/web/web-home_title.png'
 import webBgImg from '@/assets/images/web/web-home_bg.png'
 import loginImg from '@/assets/images/global/login-img.png'
+import {extractRgbFromRgba, hexToOpaqueHex, hexToRgb} from "@/utils/util";
 
 export const useThemeStore = defineStore('theme', {
   state: () => ({
     init: false,
+    mainColor: '#2E81FF',
     title: '海南社管智慧搜索平台',
     subTitle: 'HAI NAN SHE GUAN ZHI HUI SOU SUO PING TAI',
     logo: '',
@@ -24,12 +26,16 @@ export const useThemeStore = defineStore('theme', {
           this[key1] = config[key2]
         }
       }
+      setValue('mainColor', 'mainColor')
       setValue('title', 'title')
       setValue('subTitle', 'subTitle')
       setValue('logo', 'logo')
       setValue('titleLogo', 'titleLogo')
       setValue('webBgImg', 'webBgImg')
       setValue('loginImg', 'loginImg')
+      document.documentElement.style.setProperty('--cus-main-color', this.mainColor) // 主题色
+      document.documentElement.style.setProperty('--cus-main-color-rgb', extractRgbFromRgba(hexToRgb(this.mainColor)).join(',')) // 主题色rgb
+      document.documentElement.style.setProperty('--cus-main-color-hex-2', (hexToOpaqueHex(this.mainColor, 0.2))) // 表头颜色
     }
   },
 })

src/style/initRootVar.ts

@@ -1,8 +0,0 @@
-import {extractRgbFromRgba, hexToOpaqueHex, hexToRgb} from "@/utils/util";
-
-export default (config) => {
-  const mainDefault = '#2E81FF'
-  document.documentElement.style.setProperty('--cus-main-color', config.mainColor || mainDefault) // 主题色
-  document.documentElement.style.setProperty('--cus-main-color-rgb', extractRgbFromRgba(hexToRgb(config.mainColor || mainDefault)).join(',')) // 主题色rgb
-  document.documentElement.style.setProperty('--cus-main-color-hex-2', (hexToOpaqueHex(config.mainColor || mainDefault, 0.2))) // 表头颜色
-}

src/views/manage/theme/detail.vue

@@ -150,24 +150,26 @@ const initDetail = () => {
     state.loading = false
   })
 }
+watch(() => state.form.themeType, (n) => {
+  if (props.transfer.mode === 'add') {
+    if (n == '1') {
+      state.form.themeUrl = ''
+      state.form.themeParam = ''
+    } else if (n == '2') {
+      state.form.themeUrl = '/web/archive'
+      state.form.themeParam = []
+    } else if (n == '3') {
+      state.form.themeUrl = ''
+      state.form.themeParam = ''
+    }
+  }
+})
 watch(() => props.show, (n) => {
   if (n) {
     state.loading = false
     initDictionary()
     if (props.transfer.mode === 'add') {
       state.form = {}
-      watch(() => state.form.themeType, (n) => {
-        if (n == '1') {
-          state.form.themeUrl = ''
-          state.form.themeParam = ''
-        } else if (n == '2') {
-          state.form.themeUrl = '/web/archive'
-          state.form.themeParam = []
-        } else if (n == '3') {
-          state.form.themeUrl = ''
-          state.form.themeParam = ''
-        }
-      })
     } else {
       initDetail()
     }