petal-ui/stores/petal-ui.js

petal-ui

import {defineStore} from 'pinia'
import {defaultTheme, darkTheme} from '../lib/theme'
import {setStatusBarStyle} from "../lib/utils"
import {computed, ref} from "vue"

export const usePetalUiStore = defineStore('petal_ui', () => {

    // 是否开启深色模式
    const dark = ref(false)

    let windowInfo = uni.getWindowInfo(),
        systemInfo = ref(uni.getSystemInfoSync())
    // 监听窗口变化
    uni.onWindowResize(() => {
        windowInfo.value = uni.getWindowInfo()
    })

    // 设置是否开启深色模式
    const setDark = (val) => {
        dark.value = Boolean(val)
        setStatusBarStyle(dark.value)
    }
    const customTheme = ref({})
    const setTheme = (name, val) => {
        customTheme.value[name] = val
    }
    const removeTheme = (name) => {
        delete customTheme.value[name]
    }

    // 主题颜色
    const theme = computed(() => Object.assign(dark.value ? darkTheme : defaultTheme, customTheme.value))

    return {
        dark, theme, windowInfo, systemInfo,
        setDark, setTheme, removeTheme
    }
})