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 config from '~src/config/index';
import {useOsTheme} from 'vooks'

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

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

nextTick(()=> {
    setUserTheme(appStore.getThemeVal)
    //设置主色调
    setMainColor(appColor.value?.color)
    //打印开发版本号
    console.log(
        `%c 客户端 启动成功 %c 当前开发版本 V` + config.dev_version + `%c`,
        'background:#0081ff; padding: 1px; border-radius: 3px 0 0 3px; color: #fff',
        'background:#354855; padding: 1px 5px; border-radius: 0 3px 3px 0; color: #fff; font-weight: bold;',
        'background:transparent'
    )
})

//设置主题
const setUserTheme = (theme) => {
    let val = UserTheme.value, colorName = appColor.value?.name || 'green'
    if (val === 'auto') {
        theme = useOsTheme().value;
    }
    if (theme === '') {
        theme = val;
    }
    document.documentElement.setAttribute('class',`${theme} color-${colorName}`)
}
</script>