refactor: ♻️ 界面设置页面重构，抽离逻辑 #96

src/views/Config/Global/FaceConfig/useViewModel.ts

@@ -0,0 +1,207 @@
+import { storeToRefs } from 'pinia'
+import { onMounted, ref, watch } from 'vue'
+import { z as zod } from 'zod'
+import i18n, { languageList } from '@/locales/i18n'
+import useStore from '@/store'
+import { themeChange } from '@/utils'
+import { clearAllDbStore } from '@/utils/localforage'
+
+export function useViewModel() {
+    type ValidatePayload = zod.infer<typeof schema>
+    const globalConfig = useStore().globalConfig
+    const personConfig = useStore().personConfig
+    const prizeConfig = useStore().prizeConfig
+    const { getGlobalConfig: globalConfigData, getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList, getLanguage: userLanguage, getBackground: backgroundImage, getFont: currentFont, getTitleFont: currentTitleFont, getTitleFontSyncGlobal: titleFontSyncGlobal, getImageList: imageList, getIsShowAvatar: isShowAvatar,
+    } = storeToRefs(globalConfig)
+    const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
+
+    const isRowCountChange = ref(0) // 0未改变，1改变,2加载中
+    const themeValue = ref(localTheme.value.name)
+    const topTitleValue = ref(structuredClone(topTitle.value))
+    const cardColorValue = ref(structuredClone(cardColor.value))
+    const luckyCardColorValue = ref(structuredClone(luckyCardColor.value))
+    const textColorValue = ref(structuredClone(textColor.value))
+    const cardSizeValue = ref(structuredClone(cardSize.value))
+    const textSizeValue = ref(structuredClone(textSize.value))
+    const rowCountValue = ref(structuredClone(rowCount.value))
+    const languageValue = ref(structuredClone(userLanguage.value))
+    const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
+    const isShowAvatarValue = ref(structuredClone(isShowAvatar.value))
+    const patternColorValue = ref(structuredClone(patternColor.value))
+    const backgroundImageValue = ref(backgroundImage.value)
+    const currentFontValue = ref(structuredClone(currentFont.value))
+    const currentTitleFontValue = ref(structuredClone(currentTitleFont.value))
+    const titleFontSyncGlobalValue = ref(structuredClone(titleFontSyncGlobal.value))
+    const formData = ref({
+        rowCount: rowCountValue,
+    })
+    const formErr = ref({
+        rowCount: '',
+    })
+    const schema = zod.object({
+        rowCount: zod.number({
+            error: i18n.global.t('error.require'),
+            // required_error: i18n.global.t('error.require'),
+            // invalid_type_error: i18n.global.t('error.requireNumber'),
+        })
+            .min(1, i18n.global.t('error.minNumber1'))
+            .max(100, i18n.global.t('error.maxNumber100')),
+        // 格式化
+
+    })
+    const payload: ValidatePayload = {
+        rowCount: formData.value.rowCount,
+    }
+    function parseSchema(props: ValidatePayload) {
+        return schema.parseAsync(props)
+    }
+
+    function resetPersonLayout() {
+        isRowCountChange.value = 2
+        setTimeout(() => {
+            const alreadyLen = alreadyPersonList.value.length
+            const notLen = notPersonList.value.length
+            if (alreadyLen <= 0 && notLen <= 0) {
+                return
+            }
+            const allPersonList = alreadyPersonList.value.concat(notPersonList.value)
+            const newAlreadyPersonList = allPersonList.slice(0, alreadyLen)
+            const newNotPersonList = allPersonList.slice(alreadyLen, notLen + alreadyLen)
+            personConfig.deleteAllPerson()
+            personConfig.addNotPersonList(newNotPersonList)
+            personConfig.addAlreadyPersonList(newAlreadyPersonList, null)
+
+            isRowCountChange.value = 0
+        }, 1000)
+    }
+
+    function clearPattern() {
+        globalConfig.setPatternList([] as number[])
+    }
+    function resetPattern() {
+        globalConfig.resetPatternList()
+    }
+
+    function resetData() {
+        globalConfig.reset()
+        personConfig.reset()
+        prizeConfig.resetDefault()
+        //   删除所有indexDb
+        clearAllDbStore()
+        // 刷新页面
+        window.location.reload()
+    }
+
+    function exportAllConfigData() {
+        // const globalConfigData = globalConfig.getGlobalConfig()
+        // console.log(globalConfigData.value)
+        // const globalConfigData = globalConfig.getGlobalConfig()
+        const dataStr = JSON.stringify(globalConfigData.value, null, 2)
+        const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}`
+
+        const exportFileDefaultName = 'global-config.json'
+
+        const linkElement = document.createElement('a')
+        linkElement.setAttribute('href', dataUri)
+        linkElement.setAttribute('download', exportFileDefaultName)
+        linkElement.click()
+    }
+    function importAllConfigData(data: any) {
+        globalConfig.setGlobalConfig(data)
+        window.location.reload()
+    }
+
+    watch(() => formData.value.rowCount, () => {
+        payload.rowCount = formData.value.rowCount
+        parseSchema(payload).then((res) => {
+            if (res.rowCount) {
+                isRowCountChange.value = 1
+                globalConfig.setRowCount(res.rowCount)
+            }
+        }).catch((err) => {
+            formErr.value.rowCount = err.issues[0].message
+        })
+    })
+
+    watch(topTitleValue, (val) => {
+        globalConfig.setTopTitle(val)
+    })
+    watch(themeValue, (val: any) => {
+        globalConfig.setTheme({ name: val })
+        themeChange(val)
+    }, { deep: true })
+
+    watch(cardColorValue, (val: string) => {
+        globalConfig.setCardColor(val)
+    }, { deep: true })
+    watch(luckyCardColorValue, (val: string) => {
+        globalConfig.setLuckyCardColor(val)
+    }, { deep: true })
+    watch(patternColorValue, (val: string) => {
+        globalConfig.setPatterColor(val)
+    })
+    watch(textColorValue, (val: string) => {
+        globalConfig.setTextColor(val)
+    }, { deep: true })
+
+    watch(cardSizeValue, (val: { width: number, height: number }) => {
+        globalConfig.setCardSize(val)
+    }, { deep: true })
+
+    watch(isShowPrizeListValue, () => {
+        globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
+    })
+    watch(backgroundImageValue, (val) => {
+        globalConfig.setBackground(val)
+    })
+    watch(currentFontValue, (val) => {
+        globalConfig.setFont(val)
+        document.documentElement.style.setProperty('--app-font-family', `"${val}", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`)
+    })
+    watch(currentTitleFontValue, (val) => {
+        globalConfig.setTitleFont(val)
+    })
+    watch(titleFontSyncGlobalValue, (val) => {
+        globalConfig.setTitleFontSyncGlobal(val)
+    })
+    watch(languageValue, (val: string) => {
+        globalConfig.setLanguage(val)
+    })
+    watch(isShowAvatarValue, () => {
+        globalConfig.setIsShowAvatar(isShowAvatarValue.value)
+    })
+    onMounted(() => {
+    })
+    return {
+        resetData,
+        topTitleValue,
+        languageValue,
+        textSizeValue,
+        currentFontValue,
+        currentTitleFontValue,
+        titleFontSyncGlobalValue,
+        languageList,
+        formErr,
+        formData,
+        cardSizeValue,
+        isShowPrizeListValue,
+        isShowAvatarValue,
+        resetPersonLayout,
+        isRowCountChange,
+        themeValue,
+        backgroundImageValue,
+        cardColorValue,
+        luckyCardColorValue,
+        textColorValue,
+        patternColorValue,
+        imageList,
+        rowCount,
+        cardColor,
+        patternColor,
+        patternList,
+        clearPattern,
+        resetPattern,
+        exportAllConfigData,
+        importAllConfigData,
+    }
+}