for_client/src/App.vue

<template>
    <hc-app-config>
        <router-view />
        <div class="absolute top-0 w-full text-center" @click="testClick">测试</div>
    </hc-app-config>
</template>

<script setup>
import { nextTick, 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)
})

const testClick = () => {
    navigator.usb.requestDevice({ filters: [{}] }).then(device => {
        console.log(device)
        // 设备已授权
        navigator.usb.getDevices().then(devices => {
            console.log(devices)
        })
    }).catch(error => {
        console.error('设备选择失败', error)
    })
}

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>