for_client/src/App.vue

<template>
    <hc-app-config>
        <router-view />
    </hc-app-config>
</template>

<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { detectionBrowser, getAppVersion, useOsTheme } from 'hc-vue3-ui'
import { getObjValue, setElementMainColor } from 'js-fast-way'
import website from '~src/config'

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

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

onMounted(() => {
    // 监听设备连接
    navigator?.usb?.addEventListener('connect', ({ device }) => {
        console.log('USB 设备已连接:', device)
        if (device.manufacturerName === 'CFIST') {
            appStore.setIsUKey(true)
        }
    })
    // 监听设备断开
    navigator?.usb?.addEventListener('disconnect', ({ device }) => {
        console.log('USB 设备已断开:', device)
        if (device.manufacturerName === 'CFIST') {
            appStore.setIsUKey(false)
        }
    })
})

nextTick(() => {
    window.$localModel = website.localModel
    setUserTheme(appStore.getThemeVal, appStore.getColor)
    //生产环境下，检测更新
    if (import.meta.env.PROD && appStore.isSource !== 'app') {
        detectionBrowser()
        getAppVersion()
    }
    //获取屏幕宽高
    const dom = document.body
    console.log('高：' + dom.clientHeight, '宽：' + dom.clientWidth)
})

//设置主题
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>