for_client/src/App.vue

<template>
    <HcAppConfig>
        <router-view />
    </HcAppConfig>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { useOsTheme } from 'hc-vue3-ui'
import { getObjValue, setElementMainColor } from 'js-fast-way'
import { getStoreValue, setStoreValue } from '~uti/storage'
import { getVersionJson } from '~api/other'

//初始变量
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)
    //当屏幕分辨率宽度低于1920时，自动折叠菜单
    const width = document.body.clientWidth
    if (width < 1920) {
        appStore.setCollapse(true)
    }
    //生产环境下，检测更新
    if (import.meta.env.PROD && appStore.isSource !== 'app') {
        getVersionJsonApi()
        //检测新版本
        setInterval(() => {
            getVersionJsonApi()
        }, 1000 * 60)
    }
})

//获取版本更新信息
const getVersionJsonApi = async () => {
    const cache_version = getStoreValue('version')
    const { res } = await getVersionJson()
    const version = getObjValue(res)?.value
    setStoreValue('version', version)
    if (cache_version && cache_version !== version) {
        window?.$messageBox?.alert('检测到有新版本更新，请点击更新，或手动刷新网页更新，如果不更新，将无法使用相关功能', '更新提醒', {
            showCancelButton: true,
            confirmButtonText: '立即更新',
            cancelButtonText: '暂不更新',
            type: 'warning',
            callback: (action) => {
                if (action === 'confirm') {
                    //刷新页面
                    window.location.reload()
                }
            },
        })
    }
}

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