布局

src/config/index.js

@@ -15,6 +15,8 @@ export default {
     tokenHeader: 'Blade-Auth',
     tokenKey: 'saber-access-token',
     refreshTokenKey: 'saber-refresh-token',
+    theme: 'default', //默认主题
+    color: '#4980F7', //默认主色调
     ...config,
     ossUrl: 'https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com', //oss地址
     socket: 'wss://business.hcxxy.com/wss/websocket/manager/', //线上

src/layout/index.vue

@@ -53,6 +53,8 @@ import HcTheme from './modules/theme.vue'
 import UserInfoBar from './modules/UserInfoBar.vue'
 import RouterMenu from './modules/RouterMenu.vue'
 import MainBody from './modules/mainBody.vue'
+
+//logo
 const appLogoName = ref(store.getLogoName)
 
 //菜单数据

src/layout/modules/Color.vue

@@ -1,15 +1,59 @@
 <template>
-    <div class="header-icon-bar">
+    <div class="header-icon-bar" @click="tapClick">
         <el-tooltip content="主色调" placement="top">
             <hc-icon name="palette" class="header-icon" />
         </el-tooltip>
+        <i class="color-dot" :style="`background: ${color};`" />
+        <el-color-picker ref="colorRef" v-model="color" size="small" :predefine="colors" @change="colorChange" />
     </div>
 </template>
 
 <script setup>
+import { onMounted, ref } from 'vue'
+import { useAppStore } from '~src/store'
+import { userConfigSave } from '~api/other'
+import { setElementMainColor } from 'js-fast-way'
 
+const store = useAppStore()
+
+//主题色
+const colorRef = ref(null)
+const color = ref(store.getColor)
+const colors = ['#4980F7', '#1ECC95', '#37c0fe', '#8044de', '#b745cb', '#e03997', '#e54d42', '#f37b1d', '#a5673f']
+
+//渲染完成
+onMounted(() => {
+    setElementMainColor(color.value)
+})
+
+//点击事件
+const tapClick = () => {
+    colorRef.value?.show()
+}
+
+//颜色改变
+const colorChange = (val) => {
+    store.setColor(val)
+    setElementMainColor(val)
+    userConfigSave({ color: val })
+}
 </script>
 
 <style lang="scss" scoped>
+.header-icon-bar .color-dot {
+    position: absolute;
+    width: 8px;
+    height: 5px;
+    bottom: 11.5px;
+    right: 0;
+}
+</style>
 
+<style lang="scss">
+.header-icon-bar .el-color-picker {
+    width: 0;
+    height: 0;
+    margin-top: 44px;
+    z-index: -1;
+}
 </style>

src/store/index.js

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import pinia from '~src/store/init'
-import appConfig from '~src/config/index'
+import website from '~src/config/index'
 import logoIcon from '~src/assets/logo/icon.png'
 import { clearStoreAll } from 'hc-vue3-ui'
 import { getStoreValue, setStoreValue } from '~src/utils/storage'
@@ -9,12 +9,12 @@ import { removeRefreshToken, removeToken, setRefreshToken, setToken } from '~src
 export const useAppStore = defineStore('main', {
     state: () => ({
         //系统信息
-        title: getStoreValue('title') || appConfig.title,
+        title: getStoreValue('title') || website.title,
         logoIcon: getStoreValue('logoIcon') || logoIcon,
-        logoName: getStoreValue('logoName') || appConfig.name,
+        logoName: getStoreValue('logoName') || website.name,
         //主题信息
-        theme: getStoreValue('theme') || '',
-        color: getStoreValue('color') || '',
+        theme: getStoreValue('theme') || website.theme,
+        color: getStoreValue('color') || website.color,
         //用户信息
         token: getStoreValue('token') || '',
         refreshToken: getStoreValue('refreshToken') || '',
@@ -31,6 +31,9 @@ export const useAppStore = defineStore('main', {
         getTitle: state => state.title,
         getLogoIcon: state => state.logoIcon,
         getLogoName: state => state.logoName,
+        //主题信息
+        getTheme: state => state.theme,
+        getColor: state => state.color,
         //用户信息
         getToken: state => state.token,
         getRefreshToken: state => state.refreshToken,
@@ -56,6 +59,15 @@ export const useAppStore = defineStore('main', {
             this.logoName = value
             setStoreValue('logoName', value)
         },
+        //主题信息
+        setTheme(value) {
+            this.theme = value
+            setStoreValue('theme', value)
+        },
+        setColor(value) {
+            this.color = value
+            setStoreValue('color', value)
+        },
         //用户信息
         setTokenVal(value) {
             this.token = value
@@ -97,6 +109,8 @@ export const useAppStore = defineStore('main', {
             this.title = null
             this.logoIcon = null
             this.logoName = null
+            this.theme = website.theme
+            this.color = website.color
             this.token = null
             this.refreshToken = null
             this.tenantId = null

src/store/modules/user.js

@@ -1,9 +1,11 @@
 import pinia from '~src/store/init'
+import website from '~src/config/index'
 import { useAppStore } from '~src/store'
 import { getRoutes } from '~api/menu'
 import { setStoreValue } from '~src/utils/storage'
-import { ArrToOneObj, getArrValue } from 'js-fast-way'
+import { ArrToOneObj, getArrValue, getObjValue } from 'js-fast-way'
 import tokenData from '~src/router/modules/token'
+import { userConfigInfo, userConfigSave } from '~api/other'
 import { logout, refreshToken, userLogin } from '~api/user'
 
 //初始变量
@@ -22,12 +24,35 @@ export const useAppLogin = async (form) => {
         if (routerRes.length <= 0) {
             return { error: true, msg: '路由异常' }
         }
+        //获取配置数据
+        await initUserConfigInfo()
         return { error, code, res }
     } else {
         return { error, code, res }
     }
 }
 
+//用户信息初始化
+export const initUserConfigInfo = async () => {
+    const { error, data } = await userConfigInfo()
+    if (error) return false
+    const res = getObjValue(data)
+    if (res?.theme) {
+        const { theme, color } = res
+        //设置主题
+        store.setTheme(theme ?? website.theme)
+        //设置主色调
+        store.setColor(color ?? website.color)
+        return true
+    } else {
+        await userConfigSave({
+            theme: website.theme,
+            color: website.color,
+        })
+        return true
+    }
+}
+
 //设置路由信息
 export const setRouterData = async () => {
     const { error, data } = await getRoutes()