for_client/src/App.vue

<template>
    <AppConfig>
        <router-view/>
    </AppConfig>
</template>

<script setup>
import {nextTick, ref, watch} from "vue";
import {useAppStore} from "~src/store";
import AppConfig from "~com/AppConfig/index.vue";
import {setMainColor} from "~src/utils/tools";
import {getObjValue, ulog, useOsTheme} from "vue-utils-plus"
import config from '~src/config/index';

//初始变量
const appStore = useAppStore()
const UserTheme = ref(appStore.getTheme)

//监听
watch(() => [
    appStore.getTheme,
    appStore.getThemeVal,
    appStore.getColor
], ([Theme,ThemeVal,ColorVal]) => {
    UserTheme.value = Theme
    setUserTheme(ThemeVal, ColorVal)
})

nextTick(()=> {
    setUserTheme(appStore.getThemeVal, appStore.getColor)
    ulog('客户端 启动成功', '当前开发版本 v' + config?.dev_version)
})

//设置主题
const setUserTheme = (theme, appColor) => {
    const colorVal = getObjValue(appColor)
    //设置主色调
    setMainColor(colorVal?.color)
    const colorName = colorVal?.name || 'green'
    //设置主题
    let val = UserTheme.value
    if (val === 'auto') {
        theme = useOsTheme().value;
    }
    if (theme === '') {
        theme = val;
    }
    //挂载相关样式
    document.documentElement.setAttribute('class',`${theme} color-${colorName}`)
}
</script>