1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- <template>
- <HcAppConfig>
- <router-view/>
- </HcAppConfig>
- </template>
- <script setup>
- import {nextTick, ref, watch} from "vue";
- import {useAppStore} from "~src/store";
- import {useOsTheme} from '~src/plugins/useOsTheme';
- import {setElementMainColor, ulog, getObjValue} from "js-fast-way"
- 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?.version)
- })
- //设置主题 #0081ff
- const setUserTheme = (theme, appColor) => {
- const colorVal = getObjValue(appColor)
- //设置主色调
- setElementMainColor(colorVal?.color)
- const colorName = colorVal?.name || 'blue'
- //设置主题
- let val = UserTheme.value
- if (val === 'auto') {
- theme = useOsTheme().value;
- }
- if (theme === '') {
- theme = val;
- }
- //挂载相关样式
- document.documentElement.setAttribute('class', `${theme} color-${colorName}`)
- }
- </script>
|