style: 💄 格式化代码

src/views/Config/Global/FaceConfig/components/PatternEdit.vue

@@ -2,36 +2,36 @@
 import { computed } from 'vue'
 
 const props = defineProps({
-  rowCount: {
-    type: Number,
-    default: 17,
-  },
-  cardColor: {
-    type: String,
-    default: '#fff',
-  },
-  patternColor: {
-    type: String,
-    default: '#000',
-  },
-  patternList: {
-    type: Array,
-    default: () => [],
-  },
+    rowCount: {
+        type: Number,
+        default: 17,
+    },
+    cardColor: {
+        type: String,
+        default: '#fff',
+    },
+    patternColor: {
+        type: String,
+        default: '#000',
+    },
+    patternList: {
+        type: Array,
+        default: () => [],
+    },
 })
 const data = computed(() => {
-  return props
+    return props
 })
 
 function updatePatternList(event: Event, item: number) {
-  if (data.value.patternList.includes(item)) {
-    const index = data.value.patternList.indexOf(item)
-    data.value.patternList.splice(index, 1)
-  }
-  else {
-    data.value.patternList.push(item)
-  }
-  // emits
+    if (data.value.patternList.includes(item)) {
+        const index = data.value.patternList.indexOf(item)
+        data.value.patternList.splice(index, 1)
+    }
+    else {
+        data.value.patternList.push(item)
+    }
+    // emits
 }
 </script>
 

src/views/Config/Global/FaceConfig/components/SelectFont.vue

@@ -6,27 +6,27 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
 import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
 } from '@/components/ui/command'
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
 } from '@/components/ui/popover'
 import { useLocalFonts } from '@/hooks/useLocalFonts'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  disabled?: boolean
+    disabled?: boolean
 }>()
 const selectedFont = defineModel('selectedFont', {
-  type: String,
-  required: true,
+    type: String,
+    required: true,
 })
 const { getFonts, disabled: browserDisabled, fonts } = useLocalFonts()
 const open = ref(false)
@@ -34,25 +34,25 @@ const activeKey = ref('')
 const debouncedActiveKey = refDebounced(activeKey, 20)
 const { t } = useI18n()
 function selectFont(selectedValue: any) {
-  open.value = false
-  activeKey.value = ''
-  selectedFont.value = selectedValue
+    open.value = false
+    activeKey.value = ''
+    selectedFont.value = selectedValue
 }
 
 function handelActiveKey(val: string) {
-  activeKey.value = val
+    activeKey.value = val
 }
 
 function handleScroll() {
-  activeKey.value = ''
+    activeKey.value = ''
 }
 const disabledStyle = computed(() => {
-  if (props.disabled || browserDisabled) {
-    return {
-      cursor: 'not-allowed',
+    if (props.disabled || browserDisabled) {
+        return {
+            cursor: 'not-allowed',
+        }
     }
-  }
-  return {}
+    return {}
 })
 </script>
 

src/views/Config/Global/FaceConfig/components/UploadDialog.vue

@@ -7,48 +7,48 @@ import CustomDialog from '@/components/Dialog/index.vue'
 import FileUpload from '@/components/FileUpload/index.vue'
 
 interface Props {
-  importAllConfigData: (data: any) => void
+    importAllConfigData: (data: any) => void
 }
 
 const props = defineProps<Props>()
 const toast = useToast()
 const limitType = ref('application/json')
 const visible = defineModel('visible', {
-  type: Boolean,
-  required: true,
+    type: Boolean,
+    required: true,
 })
 const jsonFileData = ref<IFileData | null>(null)
 const { t } = useI18n()
 const uploadDialogRef = ref()
 
 async function uploadFile(fileData: IFileData | null) {
-  if (!fileData) {
-    jsonFileData.value = null
-    return
-  }
-  const isJson = /application\/json/.test(fileData?.type || '')
-  if (!isJson) {
-    toast.open({
-      message: t('error.notJsonFile'),
-      type: 'error',
-      position: 'top-right',
-    })
-    return
-  }
-  jsonFileData.value = fileData
+    if (!fileData) {
+        jsonFileData.value = null
+        return
+    }
+    const isJson = /application\/json/.test(fileData?.type || '')
+    if (!isJson) {
+        toast.open({
+            message: t('error.notJsonFile'),
+            type: 'error',
+            position: 'top-right',
+        })
+        return
+    }
+    jsonFileData.value = fileData
 }
 
 function submitUpload() {
-  if (jsonFileData.value) {
+    if (jsonFileData.value) {
     // 把文件转化为json数据
-    const jsonData = jsonFileData.value.data
-    props.importAllConfigData(jsonData)
-  }
+        const jsonData = jsonFileData.value.data
+        props.importAllConfigData(jsonData)
+    }
 }
 watch(visible, (newVal) => {
-  if (newVal) {
-    uploadDialogRef.value.showDialog()
-  }
+    if (newVal) {
+        uploadDialogRef.value.showDialog()
+    }
 })
 </script>
 

src/views/Config/Global/FaceConfig/index.vue

@@ -6,38 +6,38 @@ import { useViewModel } from './useViewModel'
 
 const { t } = useI18n()
 const {
-  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,
-  definiteTimeValue,
-  isWinMusicValue,
+    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,
+    definiteTimeValue,
+    isWinMusicValue,
 } = useViewModel()
 </script>
 

src/views/Config/Global/FaceConfig/parts/DataSetting.vue

@@ -4,9 +4,9 @@ import { useI18n } from 'vue-i18n'
 import UploadJsonModal from '../components/UploadDialog.vue'
 
 interface Props {
-  resetData: () => void
-  exportAllConfigData: () => void
-  importAllConfigData: (data: any) => void
+    resetData: () => void
+    exportAllConfigData: () => void
+    importAllConfigData: (data: any) => void
 }
 
 defineProps<Props>()

src/views/Config/Global/FaceConfig/parts/LayoutSetting.vue

@@ -2,8 +2,8 @@
 import { useI18n } from 'vue-i18n'
 
 interface Props {
-  resetPersonLayout: () => void
-  isRowCountChange: number
+    resetPersonLayout: () => void
+    isRowCountChange: number
 }
 defineProps<Props>()
 

src/views/Config/Global/FaceConfig/parts/PatternSetting.vue

@@ -3,12 +3,12 @@ import { useI18n } from 'vue-i18n'
 import PatternEdit from '../components/PatternEdit.vue'
 
 interface Props {
-  rowCount: number
-  cardColor: string
-  patternColor: string
-  patternList: number[]
-  clearPattern: () => void
-  resetPattern: () => void
+    rowCount: number
+    cardColor: string
+    patternColor: string
+    patternList: number[]
+    clearPattern: () => void
+    resetPattern: () => void
 }
 defineProps<Props>()
 const { t } = useI18n()

src/views/Config/Global/FaceConfig/parts/ThemeSetting.vue

@@ -8,7 +8,7 @@ import { daisyuiThemes } from '@/constant/theme'
 import 'vue3-colorpicker/style.css'
 
 interface Props {
-  imageList: Array<IImage>
+    imageList: Array<IImage>
 }
 defineProps<Props>()
 const themeList = reactive(daisyuiThemes)

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

@@ -7,235 +7,235 @@ 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,
-    getDefiniteTime: definiteTime,
-    getWinMusic: isWinMusic,
-  } = storeToRefs(globalConfig)
-  const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
+    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,
+        getDefiniteTime: definiteTime,
+        getWinMusic: isWinMusic,
+    } = 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 definiteTimeValue = ref(structuredClone(definiteTime.value))
-  const isWinMusicValue = ref(structuredClone(isWinMusic.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'),
+    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 definiteTimeValue = ref(structuredClone(definiteTime.value))
+    const isWinMusicValue = ref(structuredClone(isWinMusic.value))
+    const formData = ref({
+        rowCount: rowCountValue,
     })
-      .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
+    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')),
+        // 格式化
 
-  watch(topTitleValue, (val) => {
-    globalConfig.setTopTitle(val)
-  })
-  watch(themeValue, (val: any) => {
-    globalConfig.setTheme({ name: val })
-    themeChange(val)
-  }, { deep: true })
+    })
+    const payload: ValidatePayload = {
+        rowCount: formData.value.rowCount,
+    }
+    function parseSchema(props: ValidatePayload) {
+        return schema.parseAsync(props)
+    }
 
-  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 })
+    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)
 
-  watch(cardSizeValue, (val: { width: number, height: number }) => {
-    globalConfig.setCardSize(val)
-  }, { deep: true })
+            isRowCountChange.value = 0
+        }, 1000)
+    }
 
-  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)
-  })
-  watch(definiteTimeValue, () => {
-    globalConfig.setDefiniteTime(definiteTimeValue.value)
-  })
-  watch(isWinMusicValue, () => {
-    globalConfig.setIsPlayWinMusic(isWinMusicValue.value)
-  })
-  watch(textSizeValue, (val: number) => {
-    globalConfig.setTextSize(val)
-  })
-  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,
-    definiteTimeValue,
-    isWinMusicValue,
-  }
+    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)
+    })
+    watch(definiteTimeValue, () => {
+        globalConfig.setDefiniteTime(definiteTimeValue.value)
+    })
+    watch(isWinMusicValue, () => {
+        globalConfig.setIsPlayWinMusic(isWinMusicValue.value)
+    })
+    watch(textSizeValue, (val: number) => {
+        globalConfig.setTextSize(val)
+    })
+    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,
+        definiteTimeValue,
+        isWinMusicValue,
+    }
 }

src/views/Config/Global/ImageConfig/components/UploadDialog.vue

@@ -12,72 +12,72 @@ const { t } = useI18n()
 const limitType = ref('image/*')
 const imgUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
 const visible = defineModel('visible', {
-  type: Boolean,
-  required: true,
+    type: Boolean,
+    required: true,
 })
 const globalConfig = useStore().globalConfig
 const imageDbStore = localforage.createInstance({
-  name: 'imgStore',
+    name: 'imgStore',
 })
 const imageData = ref<IFileData | null>(null)
 
 const fileName = computed({
-  get() {
-    return imageData.value?.fileName || null
-  },
-  set(value) {
-    if (imageData.value && value) {
-      imageData.value.fileName = value
-    }
-  },
+    get() {
+        return imageData.value?.fileName || null
+    },
+    set(value) {
+        if (imageData.value && value) {
+            imageData.value.fileName = value
+        }
+    },
 })
 const uploadDialogRef = ref()
 
 async function uploadFile(fileData: IFileData | null) {
-  if (!fileData) {
-    imageData.value = null
-    return
-  }
-  const isImage = /image*/.test(fileData?.type || '')
-  if (!isImage) {
-    imgUploadToast.value = 3
-    return
-  }
-  imageData.value = fileData
+    if (!fileData) {
+        imageData.value = null
+        return
+    }
+    const isImage = /image*/.test(fileData?.type || '')
+    if (!isImage) {
+        imgUploadToast.value = 3
+        return
+    }
+    imageData.value = fileData
 }
 async function getImageDbStore() {
-  const keys = await imageDbStore.keys()
-  if (keys.length > 0) {
-    imageDbStore.iterate((value: { fileName: string, data: Blob }, key: string) => {
-      globalConfig.addImage({
-        id: key,
-        name: value.fileName,
-        url: 'Storage',
-      })
-    })
-  }
+    const keys = await imageDbStore.keys()
+    if (keys.length > 0) {
+        imageDbStore.iterate((value: { fileName: string, data: Blob }, key: string) => {
+            globalConfig.addImage({
+                id: key,
+                name: value.fileName,
+                url: 'Storage',
+            })
+        })
+    }
 }
 function submitUpload() {
-  if (imageData.value) {
-    const { data, fileName } = imageData.value
-    const uniqueId = uuidv4()
-    imageDbStore.setItem(uniqueId, {
-      data,
-      fileName,
-    })
-      .then(() => {
-        imgUploadToast.value = 1
-        getImageDbStore()
-      })
-      .catch(() => {
-        imgUploadToast.value = 2
-      })
-  }
+    if (imageData.value) {
+        const { data, fileName } = imageData.value
+        const uniqueId = uuidv4()
+        imageDbStore.setItem(uniqueId, {
+            data,
+            fileName,
+        })
+            .then(() => {
+                imgUploadToast.value = 1
+                getImageDbStore()
+            })
+            .catch(() => {
+                imgUploadToast.value = 2
+            })
+    }
 }
 watch(visible, (newVal) => {
-  if (newVal) {
-    uploadDialogRef.value.showDialog()
-  }
+    if (newVal) {
+        uploadDialogRef.value.showDialog()
+    }
 })
 </script>
 

src/views/Config/Global/ImageConfig/index.vue

@@ -14,25 +14,25 @@ const globalConfig = useStore().globalConfig
 const { getImageList: localImageList } = storeToRefs(globalConfig)
 const imgUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
 const imageDbStore = localforage.createInstance({
-  name: 'imgStore',
+    name: 'imgStore',
 })
 
 const uploadVisible = ref(false)
 
 function removeImage(item: IImage) {
-  if (item.url === 'Storage') {
-    imageDbStore.removeItem(item.id).then(() => {
-      globalConfig.removeImage(item.id)
-    })
-  }
-  globalConfig.removeImage(item.id)
+    if (item.url === 'Storage') {
+        imageDbStore.removeItem(item.id).then(() => {
+            globalConfig.removeImage(item.id)
+        })
+    }
+    globalConfig.removeImage(item.id)
 }
 watch(() => imgUploadToast.value, (val) => {
-  if (val !== 0) {
-    setTimeout(() => {
-      imgUploadToast.value = 0
-    }, 2000)
-  }
+    if (val !== 0) {
+        setTimeout(() => {
+            imgUploadToast.value = 0
+        }, 2000)
+    }
 })
 </script>
 

src/views/Config/Global/MusicConfig/components/UploadDialog.vue

@@ -13,84 +13,84 @@ const { t } = useI18n()
 const toast = useToast()
 const limitType = ref('audio/*')
 const visible = defineModel('visible', {
-  type: Boolean,
-  required: true,
+    type: Boolean,
+    required: true,
 })
 const globalConfig = useStore().globalConfig
 const audioDbStore = localforage.createInstance({
-  name: 'audioStore',
+    name: 'audioStore',
 })
 const audioData = ref<IFileData | null>(null)
 
 const fileName = computed({
-  get() {
-    return audioData.value?.fileName || null
-  },
-  set(value) {
-    if (audioData.value && value) {
-      audioData.value.fileName = value
-    }
-  },
+    get() {
+        return audioData.value?.fileName || null
+    },
+    set(value) {
+        if (audioData.value && value) {
+            audioData.value.fileName = value
+        }
+    },
 })
 const uploadDialogRef = ref()
 
 async function uploadFile(fileData: IFileData | null) {
-  if (!fileData) {
-    audioData.value = null
-    return
-  }
-  const isAudio = /audio*/.test(fileData?.type || '')
-  if (!isAudio) {
-    toast.open({
-      message: t('error.notAudioFile'),
-      type: 'error',
-      position: 'top-right',
-    })
-    return
-  }
-  audioData.value = fileData
+    if (!fileData) {
+        audioData.value = null
+        return
+    }
+    const isAudio = /audio*/.test(fileData?.type || '')
+    if (!isAudio) {
+        toast.open({
+            message: t('error.notAudioFile'),
+            type: 'error',
+            position: 'top-right',
+        })
+        return
+    }
+    audioData.value = fileData
 }
 async function getAudioDbStore() {
-  const keys = await audioDbStore.keys()
-  if (keys.length > 0) {
-    audioDbStore.iterate((value: { fileName: string, data: Blob }, key: string) => {
-      globalConfig.addMusic({
-        id: key,
-        name: value.fileName,
-        url: 'Storage',
-      })
-    })
-  }
+    const keys = await audioDbStore.keys()
+    if (keys.length > 0) {
+        audioDbStore.iterate((value: { fileName: string, data: Blob }, key: string) => {
+            globalConfig.addMusic({
+                id: key,
+                name: value.fileName,
+                url: 'Storage',
+            })
+        })
+    }
 }
 function submitUpload() {
-  if (audioData.value) {
-    const { data, fileName } = audioData.value
-    const uniqueId = uuidv4()
-    audioDbStore.setItem(uniqueId, {
-      data,
-      fileName,
-    })
-      .then(() => {
-        toast.open({
-          message: t('error.uploadSuccess'),
-          type: 'success',
-          position: 'top-right',
+    if (audioData.value) {
+        const { data, fileName } = audioData.value
+        const uniqueId = uuidv4()
+        audioDbStore.setItem(uniqueId, {
+            data,
+            fileName,
         })
-        getAudioDbStore()
-      })
-      .catch(() => {
-        toast.open({
-          message: t('error.uploadFail'),
-          type: 'error',
-          position: 'top-right',
-        })
-      })
-  }
+            .then(() => {
+                toast.open({
+                    message: t('error.uploadSuccess'),
+                    type: 'success',
+                    position: 'top-right',
+                })
+                getAudioDbStore()
+            })
+            .catch(() => {
+                toast.open({
+                    message: t('error.uploadFail'),
+                    type: 'error',
+                    position: 'top-right',
+                })
+            })
+    }
 }
 watch(visible, (newVal) => {
-  if (newVal) {
-    uploadDialogRef.value.showDialog()
-  }
+    if (newVal) {
+        uploadDialogRef.value.showDialog()
+    }
 })
 </script>
 

src/views/Config/Global/MusicConfig/index.vue

@@ -5,13 +5,12 @@ import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import PageHeader from '@/components/PageHeader/index.vue'
-import { sidebar } from '@/locales/modules'
 import useStore from '@/store'
 import UploadDialog from './components/UploadDialog.vue'
 
 const { t } = useI18n()
 const audioDbStore = localforage.createInstance({
-  name: 'audioStore',
+    name: 'audioStore',
 })
 const globalConfig = useStore().globalConfig
 
@@ -19,23 +18,23 @@ const { getMusicList: localMusicList } = storeToRefs(globalConfig)
 const localMusicListValue = ref(localMusicList)
 const uploadVisible = ref(false)
 async function play(item: IMusic) {
-  globalConfig.setCurrentMusic(item, false)
+    globalConfig.setCurrentMusic(item, false)
 }
 
 function deleteMusic(item: IMusic) {
-  globalConfig.removeMusic(item.id)
-  audioDbStore.removeItem(item.name)
-  // setTimeout(()=>{
-  //     localMusicListValue.value=localMusicList
-  // },100)
+    globalConfig.removeMusic(item.id)
+    audioDbStore.removeItem(item.name)
+    // setTimeout(()=>{
+    //     localMusicListValue.value=localMusicList
+    // },100)
 }
 function resetMusic() {
-  globalConfig.resetMusicList()
-  audioDbStore.clear()
+    globalConfig.resetMusicList()
+    audioDbStore.clear()
 }
 function deleteAll() {
-  globalConfig.clearMusicList()
-  audioDbStore.clear()
+    globalConfig.clearMusicList()
+    audioDbStore.clear()
 }
 </script>
 

src/views/Config/Person/PersonAll/components/SinglePerson.vue

@@ -2,8 +2,8 @@
 import { useI18n } from 'vue-i18n'
 
 defineProps<{
-  addOnePersonDrawerRef: any
-  addOnePerson: (addOnePersonDrawerRef: any, event: any) => void
+    addOnePersonDrawerRef: any
+    addOnePerson: (addOnePersonDrawerRef: any, event: any) => void
 }>()
 
 const { t } = useI18n()

src/views/Config/Person/PersonAll/importExcel.worker.ts

@@ -11,43 +11,43 @@ let allData: any[] = []
 
 function headersEqual(template: string[], actual: string[]): boolean {
     return template.length >= actual.length
-        && actual.some(item => template.includes(item))
+      && actual.some(item => template.includes(item))
 }
 // 接收主线程消息
 globalThis.onmessage = async (e: MessageEvent<WorkerMessage>) => {
     switch (e.data.type) {
         case 'start':
-            {
-                const fileData = e.data.data
-                const templateData = e.data.templateData
+        {
+            const fileData = e.data.data
+            const templateData = e.data.templateData
 
-                const workBook = XLSX.read(fileData, { type: 'binary', cellDates: true })
-                const workSheet = workBook.Sheets[workBook.SheetNames[0]]
-                const excelData: object[] = XLSX.utils.sheet_to_json(workSheet)
+            const workBook = XLSX.read(fileData, { type: 'binary', cellDates: true })
+            const workSheet = workBook.Sheets[workBook.SheetNames[0]]
+            const excelData: object[] = XLSX.utils.sheet_to_json(workSheet)
 
-                const templateWorkBook = XLSX.read(templateData, { type: 'array', cellDates: true })
-                const templateWorkSheet = templateWorkBook.Sheets[templateWorkBook.SheetNames[0]]
-                const templateExcelData: object[] = XLSX.utils.sheet_to_json(templateWorkSheet)
+            const templateWorkBook = XLSX.read(templateData, { type: 'array', cellDates: true })
+            const templateWorkSheet = templateWorkBook.Sheets[templateWorkBook.SheetNames[0]]
+            const templateExcelData: object[] = XLSX.utils.sheet_to_json(templateWorkSheet)
 
-                const templateHeader = Object.keys(templateExcelData[0])
-                const header = Object.keys(excelData[0])
+            const templateHeader = Object.keys(templateExcelData[0])
+            const header = Object.keys(excelData[0])
 
-                if (!headersEqual(templateHeader, header)) {
-                    globalThis.postMessage({
-                        type: 'error',
-                        data: null,
-                        message: 'not right template',
-                    })
-                    return
-                }
-                allData = addOtherInfo(excelData)
+            if (!headersEqual(templateHeader, header)) {
                 globalThis.postMessage({
-                    type: 'done',
-                    data: allData,
-                    message: '读取完成',
+                    type: 'error',
+                    data: null,
+                    message: 'not right template',
                 })
-                break
+                return
             }
+            allData = addOtherInfo(excelData)
+            globalThis.postMessage({
+                type: 'done',
+                data: allData,
+                message: '读取完成',
+            })
+            break
+        }
         default:
             globalThis.postMessage({
                 type: 'fail',

src/views/Config/Person/PersonAll/index.vue

@@ -14,16 +14,16 @@ const delAllDataDialogRef = ref()
 const exportInputFileRef = ref()
 const addOnePersonDrawerRef = ref()
 const {
-  resetData,
-  deleteAll,
-  handleFileChange,
-  exportData,
-  addOnePerson,
-  singlePersonData,
-  alreadyPersonList,
-  allPersonList,
-  tableColumnList,
-  downloadTemplate,
+    resetData,
+    deleteAll,
+    handleFileChange,
+    exportData,
+    addOnePerson,
+    singlePersonData,
+    alreadyPersonList,
+    allPersonList,
+    tableColumnList,
+    downloadTemplate,
 } = useViewModel({ exportInputFileRef })
 const { t } = useI18n()
 const limitType = '.xlsx,.xls'

src/views/Config/Person/PersonAll/useViewModel.ts

@@ -17,185 +17,185 @@ import ImportExcelWorker from './importExcel.worker?worker'
 type IBasePersonConfig = Pick<IPersonConfig, 'uid' | 'name' | 'department' | 'identity' | 'avatar'>
 
 export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<HTMLInputElement> }) {
-  const { t } = useI18n()
-  const baseUrl = import.meta.env.BASE_URL
-  const toast = useToast()
-  const worker: Worker | null = new ImportExcelWorker()
-  const loading = inject(loadingKey)
-  const personConfig = useStore().personConfig
-  const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
-  const tableColumnList = tableColumns({ handleDeletePerson: delPersonItem })
-  const addPersonModalVisible = ref(false)
-  const singlePersonData = ref<IBasePersonConfig>({
-    uid: '',
-    name: '',
-    department: '',
-    avatar: '',
-    identity: '',
-  })
-  async function getExcelTemplateContent() {
-    const locale = i18n.global.locale.value
-    if (locale === 'zhCn') {
-      const templateData = await readLocalFileAsArraybuffer(`${import.meta.env.BASE_URL}人口登记表-zhCn.xlsx`)
-      return templateData
-    }
-    else {
-      const templateData = await readLocalFileAsArraybuffer(`${import.meta.env.BASE_URL}personListTemplate-en.xlsx`)
-      return templateData
-    }
-  }
-  /// 向worker发送消息
-  function sendWorkerMessage(message: any) {
-    if (worker) {
-      worker.postMessage(message)
-    }
-  }
-  /// 开始导入
-  async function startWorker(data: string) {
-    loading?.show()
-    getExcelTemplateContent()
-    sendWorkerMessage({ type: 'start', data, templateData: await getExcelTemplateContent() })
-  }
-  /**
-   * 获取用户数据
-   */
-  async function handleFileChange(e: Event) {
-    if (worker) {
-      worker.onmessage = (e) => {
-        if (e.data.type === 'done') {
-          personConfig.resetPerson()
-          personConfig.addNotPersonList(e.data.data)
-          // 提示导入成功
-          toast.open({
-            message: t('error.importSuccess'),
-            type: 'success',
-            position: 'top-right',
-          })
-          // 导入成功后清空file input
-          clearFileInput()
+    const { t } = useI18n()
+    const baseUrl = import.meta.env.BASE_URL
+    const toast = useToast()
+    const worker: Worker | null = new ImportExcelWorker()
+    const loading = inject(loadingKey)
+    const personConfig = useStore().personConfig
+    const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
+    const tableColumnList = tableColumns({ handleDeletePerson: delPersonItem })
+    const addPersonModalVisible = ref(false)
+    const singlePersonData = ref<IBasePersonConfig>({
+        uid: '',
+        name: '',
+        department: '',
+        avatar: '',
+        identity: '',
+    })
+    async function getExcelTemplateContent() {
+        const locale = i18n.global.locale.value
+        if (locale === 'zhCn') {
+            const templateData = await readLocalFileAsArraybuffer(`${import.meta.env.BASE_URL}人口登记表-zhCn.xlsx`)
+            return templateData
         }
-        if (e.data.type === 'error') {
-          if (e.data.message === 'not right template') {
-            toast.open({
-              message: t('error.excelFileError'),
-              type: 'error',
-              position: 'top-right',
-            })
-            return
-          }
-          toast.open({
-            message: e.data.message || t('error.importFail'),
-            type: 'error',
-            position: 'top-right',
-          })
-          // toast.warning(e.data.message || '导入错误')
+        else {
+            const templateData = await readLocalFileAsArraybuffer(`${import.meta.env.BASE_URL}personListTemplate-en.xlsx`)
+            return templateData
         }
-        loading?.hide()
-      }
     }
-    const dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
-    startWorker(dataBinary)
-  }
-  // 清空file input
-  function clearFileInput() {
-    if (exportInputFileRef.value) {
-      exportInputFileRef.value.value = ''
+    /// 向worker发送消息
+    function sendWorkerMessage(message: any) {
+        if (worker) {
+            worker.postMessage(message)
+        }
     }
-  }
-  function downloadTemplate() {
+    /// 开始导入
+    async function startWorker(data: string) {
+        loading?.show()
+        getExcelTemplateContent()
+        sendWorkerMessage({ type: 'start', data, templateData: await getExcelTemplateContent() })
+    }
+    /**
+     * 获取用户数据
+     */
+    async function handleFileChange(e: Event) {
+        if (worker) {
+            worker.onmessage = (e) => {
+                if (e.data.type === 'done') {
+                    personConfig.resetPerson()
+                    personConfig.addNotPersonList(e.data.data)
+                    // 提示导入成功
+                    toast.open({
+                        message: t('error.importSuccess'),
+                        type: 'success',
+                        position: 'top-right',
+                    })
+                    // 导入成功后清空file input
+                    clearFileInput()
+                }
+                if (e.data.type === 'error') {
+                    if (e.data.message === 'not right template') {
+                        toast.open({
+                            message: t('error.excelFileError'),
+                            type: 'error',
+                            position: 'top-right',
+                        })
+                        return
+                    }
+                    toast.open({
+                        message: e.data.message || t('error.importFail'),
+                        type: 'error',
+                        position: 'top-right',
+                    })
+                    // toast.warning(e.data.message || '导入错误')
+                }
+                loading?.hide()
+            }
+        }
+        const dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
+        startWorker(dataBinary)
+    }
+    // 清空file input
+    function clearFileInput() {
+        if (exportInputFileRef.value) {
+            exportInputFileRef.value.value = ''
+        }
+    }
+    function downloadTemplate() {
     // 下载
-    const templateFileName = i18n.global.t('data.xlsxName')
-    const fileUrl = `${baseUrl}${templateFileName}`
-    fetch(fileUrl)
-      .then(res => res.blob())
-      .then((blob) => {
-        const url = window.URL.createObjectURL(blob)
-        const a = document.createElement('a')
-        a.href = url
-        a.download = templateFileName
-        a.click()
-        toast.open({
-          message: t('error.downloadSuccess'),
-          type: 'success',
-          position: 'top-right',
-        })
-      })
-  }
-  // 导出数据
-  function exportData() {
-    let data = JSON.parse(JSON.stringify(allPersonList.value))
-    // 排除一些字段
-    for (let i = 0; i < data.length; i++) {
-      delete data[i].x
-      delete data[i].y
-      delete data[i].id
-      delete data[i].createTime
-      delete data[i].updateTime
-      delete data[i].prizeId
-      // 修改字段名称
-      if (data[i].isWin) {
-        data[i].isWin = i18n.global.t('data.yes')
-      }
-      else {
-        data[i].isWin = i18n.global.t('data.no')
-      }
-      // 格式化数组为
-      data[i].prizeTime = data[i].prizeTime.join(',')
-      data[i].prizeName = data[i].prizeName.join(',')
+        const templateFileName = i18n.global.t('data.xlsxName')
+        const fileUrl = `${baseUrl}${templateFileName}`
+        fetch(fileUrl)
+            .then(res => res.blob())
+            .then((blob) => {
+                const url = window.URL.createObjectURL(blob)
+                const a = document.createElement('a')
+                a.href = url
+                a.download = templateFileName
+                a.click()
+                toast.open({
+                    message: t('error.downloadSuccess'),
+                    type: 'success',
+                    position: 'top-right',
+                })
+            })
     }
-    let dataString = JSON.stringify(data)
-    dataString = dataString
-      .replaceAll(/uid/g, i18n.global.t('data.number'))
-      .replaceAll(/isWin/g, i18n.global.t('data.isWin'))
-      .replaceAll(/department/g, i18n.global.t('data.department'))
-      .replaceAll(/name/g, i18n.global.t('data.name'))
-      .replaceAll(/identity/g, i18n.global.t('data.identity'))
-      .replaceAll(/prizeName/g, i18n.global.t('data.prizeName'))
-      .replaceAll(/prizeTime/g, i18n.global.t('data.prizeTime'))
+    // 导出数据
+    function exportData() {
+        let data = JSON.parse(JSON.stringify(allPersonList.value))
+        // 排除一些字段
+        for (let i = 0; i < data.length; i++) {
+            delete data[i].x
+            delete data[i].y
+            delete data[i].id
+            delete data[i].createTime
+            delete data[i].updateTime
+            delete data[i].prizeId
+            // 修改字段名称
+            if (data[i].isWin) {
+                data[i].isWin = i18n.global.t('data.yes')
+            }
+            else {
+                data[i].isWin = i18n.global.t('data.no')
+            }
+            // 格式化数组为
+            data[i].prizeTime = data[i].prizeTime.join(',')
+            data[i].prizeName = data[i].prizeName.join(',')
+        }
+        let dataString = JSON.stringify(data)
+        dataString = dataString
+            .replaceAll(/uid/g, i18n.global.t('data.number'))
+            .replaceAll(/isWin/g, i18n.global.t('data.isWin'))
+            .replaceAll(/department/g, i18n.global.t('data.department'))
+            .replaceAll(/name/g, i18n.global.t('data.name'))
+            .replaceAll(/identity/g, i18n.global.t('data.identity'))
+            .replaceAll(/prizeName/g, i18n.global.t('data.prizeName'))
+            .replaceAll(/prizeTime/g, i18n.global.t('data.prizeTime'))
 
-    data = JSON.parse(dataString)
+        data = JSON.parse(dataString)
 
-    if (data.length > 0) {
-      const dataBinary = XLSX.utils.json_to_sheet(data)
-      const dataBinaryBinary = XLSX.utils.book_new()
-      XLSX.utils.book_append_sheet(dataBinaryBinary, dataBinary, 'Sheet1')
-      XLSX.writeFile(dataBinaryBinary, 'data.xlsx')
+        if (data.length > 0) {
+            const dataBinary = XLSX.utils.json_to_sheet(data)
+            const dataBinaryBinary = XLSX.utils.book_new()
+            XLSX.utils.book_append_sheet(dataBinaryBinary, dataBinary, 'Sheet1')
+            XLSX.writeFile(dataBinaryBinary, 'data.xlsx')
+        }
     }
-  }
 
-  function resetData() {
-    personConfig.resetAlreadyPerson()
-  }
+    function resetData() {
+        personConfig.resetAlreadyPerson()
+    }
 
-  function deleteAll() {
-    personConfig.deleteAllPerson()
-  }
+    function deleteAll() {
+        personConfig.deleteAllPerson()
+    }
 
-  function delPersonItem(row: IPersonConfig) {
-    personConfig.deletePerson(row)
-  }
-  function addOnePerson(addOnePersonDrawerRef: any, event: any) {
-    event.preventDefault()
-    // 表单中的验证信息清除
+    function delPersonItem(row: IPersonConfig) {
+        personConfig.deletePerson(row)
+    }
+    function addOnePerson(addOnePersonDrawerRef: any, event: any) {
+        event.preventDefault()
+        // 表单中的验证信息清除
 
-    const personData = addOtherInfo([toRaw(singlePersonData.value)])
-    personData[0].id = uuidv4()
-    personConfig.addOnePerson(personData)
-    // singlePersonData.value = {} as IBasePersonConfig
-    addOnePersonDrawerRef.closeDrawer()
-    singlePersonData.value = {} as IBasePersonConfig
-  }
-  return {
-    resetData,
-    deleteAll,
-    handleFileChange,
-    exportData,
-    alreadyPersonList,
-    allPersonList,
-    tableColumnList,
-    addOnePerson,
-    addPersonModalVisible,
-    singlePersonData,
-    downloadTemplate,
-  }
+        const personData = addOtherInfo([toRaw(singlePersonData.value)])
+        personData[0].id = uuidv4()
+        personConfig.addOnePerson(personData)
+        // singlePersonData.value = {} as IBasePersonConfig
+        addOnePersonDrawerRef.closeDrawer()
+        singlePersonData.value = {} as IBasePersonConfig
+    }
+    return {
+        resetData,
+        deleteAll,
+        handleFileChange,
+        exportData,
+        alreadyPersonList,
+        allPersonList,
+        tableColumnList,
+        addOnePerson,
+        addPersonModalVisible,
+        singlePersonData,
+        downloadTemplate,
+    }
 }

src/views/Config/Prize/usePrizeConfig.ts

@@ -8,133 +8,133 @@ import i18n from '@/locales/i18n'
 import useStore from '@/store'
 
 export function usePrizeConfig() {
-  const toast = useToast()
-  const imageDbStore = localforage.createInstance({
-    name: 'imgStore',
-  })
-  const prizeConfig = useStore().prizeConfig
-  const globalConfig = useStore().globalConfig
-  const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
+    const toast = useToast()
+    const imageDbStore = localforage.createInstance({
+        name: 'imgStore',
+    })
+    const prizeConfig = useStore().prizeConfig
+    const globalConfig = useStore().globalConfig
+    const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
 
-  const { getImageList: localImageList } = storeToRefs(globalConfig)
-  const imgList = ref<any[]>([])
+    const { getImageList: localImageList } = storeToRefs(globalConfig)
+    const imgList = ref<any[]>([])
 
-  const prizeList = ref(cloneDeep(localPrizeList.value))
-  const selectedPrize = ref<IPrizeConfig | null>()
+    const prizeList = ref(cloneDeep(localPrizeList.value))
+    const selectedPrize = ref<IPrizeConfig | null>()
 
-  function selectPrize(item: IPrizeConfig) {
-    selectedPrize.value = item
-    selectedPrize.value.isUsedCount = 0
-    selectedPrize.value.isUsed = false
+    function selectPrize(item: IPrizeConfig) {
+        selectedPrize.value = item
+        selectedPrize.value.isUsedCount = 0
+        selectedPrize.value.isUsed = false
 
-    if (selectedPrize.value.separateCount.countList.length > 1) {
-      return
+        if (selectedPrize.value.separateCount.countList.length > 1) {
+            return
+        }
+        selectedPrize.value.separateCount = {
+            enable: true,
+            countList: [
+                {
+                    id: '0',
+                    count: item.count,
+                    isUsedCount: 0,
+                },
+            ],
+        }
     }
-    selectedPrize.value.separateCount = {
-      enable: true,
-      countList: [
-        {
-          id: '0',
-          count: item.count,
-          isUsedCount: 0,
-        },
-      ],
-    }
-  }
 
-  function changePrizeStatus(item: IPrizeConfig) {
-    item.isUsed ? item.isUsedCount = 0 : item.isUsedCount = item.count
-    item.separateCount.countList = []
-    item.isUsed = !item.isUsed
-  }
-
-  function changePrizePerson(item: IPrizeConfig) {
-    let indexPrize = -1
-    for (let i = 0; i < prizeList.value.length; i++) {
-      if (prizeList.value[i].id === item.id) {
-        indexPrize = i
-        break
-      }
+    function changePrizeStatus(item: IPrizeConfig) {
+        item.isUsed ? item.isUsedCount = 0 : item.isUsedCount = item.count
+        item.separateCount.countList = []
+        item.isUsed = !item.isUsed
     }
-    if (indexPrize > -1) {
-      prizeList.value[indexPrize].separateCount.countList = []
-      prizeList.value[indexPrize].isUsed ? prizeList.value[indexPrize].isUsedCount = prizeList.value[indexPrize].count : prizeList.value[indexPrize].isUsedCount = 0
-    }
-  }
-  function submitData(value: any) {
-    selectedPrize.value!.separateCount.countList = value
-    selectedPrize.value = null
-  }
 
-  async function getImageDbStore() {
-    const keys = await imageDbStore.keys()
-    if (keys.length > 0) {
-      imageDbStore.iterate((value, key) => {
-        imgList.value.push({
-          key,
-          value,
-        })
-      })
+    function changePrizePerson(item: IPrizeConfig) {
+        let indexPrize = -1
+        for (let i = 0; i < prizeList.value.length; i++) {
+            if (prizeList.value[i].id === item.id) {
+                indexPrize = i
+                break
+            }
+        }
+        if (indexPrize > -1) {
+            prizeList.value[indexPrize].separateCount.countList = []
+            prizeList.value[indexPrize].isUsed ? prizeList.value[indexPrize].isUsedCount = prizeList.value[indexPrize].count : prizeList.value[indexPrize].isUsedCount = 0
+        }
     }
-  }
-
-  function delItem(item: IPrizeConfig) {
-    prizeConfig.deletePrizeConfig(item.id)
-    toast.success(i18n.global.t('error.deleteSuccess'))
-  }
-  function addPrize() {
-    const defaultPrizeCOnfig: IPrizeConfig = {
-      id: new Date().getTime().toString(),
-      name: i18n.global.t('data.prizeName'),
-      sort: 0,
-      isAll: false,
-      count: 1,
-      isUsedCount: 0,
-      picture: {
-        id: '',
-        name: '',
-        url: '',
-      },
-      separateCount: {
-        enable: false,
-        countList: [],
-      },
-      desc: '',
-      isUsed: false,
-      isShow: true,
-      frequency: 1,
+    function submitData(value: any) {
+        selectedPrize.value!.separateCount.countList = value
+        selectedPrize.value = null
     }
-    prizeList.value.push(defaultPrizeCOnfig)
-    toast.success(i18n.global.t('error.success'))
-  }
-  function resetDefault() {
-    prizeConfig.resetDefault()
-    prizeList.value = cloneDeep(localPrizeList.value)
-    toast.success(i18n.global.t('error.success'))
-  }
-  async function delAll() {
-    prizeList.value = []
-    toast.success(i18n.global.t('error.success'))
-  }
-  onMounted(() => {
-    getImageDbStore()
-  })
-  watch(() => prizeList.value, (val: IPrizeConfig[]) => {
-    prizeConfig.setPrizeConfig(val)
-  }, { deep: true })
 
-  return {
-    addPrize,
-    resetDefault,
-    delAll,
-    delItem,
-    prizeList,
-    currentPrize,
-    selectedPrize,
-    submitData,
-    changePrizePerson,
-    changePrizeStatus,
-    selectPrize,
-    localImageList,
-  }
+    async function getImageDbStore() {
+        const keys = await imageDbStore.keys()
+        if (keys.length > 0) {
+            imageDbStore.iterate((value, key) => {
+                imgList.value.push({
+                    key,
+                    value,
+                })
+            })
+        }
+    }
+
+    function delItem(item: IPrizeConfig) {
+        prizeConfig.deletePrizeConfig(item.id)
+        toast.success(i18n.global.t('error.deleteSuccess'))
+    }
+    function addPrize() {
+        const defaultPrizeCOnfig: IPrizeConfig = {
+            id: new Date().getTime().toString(),
+            name: i18n.global.t('data.prizeName'),
+            sort: 0,
+            isAll: false,
+            count: 1,
+            isUsedCount: 0,
+            picture: {
+                id: '',
+                name: '',
+                url: '',
+            },
+            separateCount: {
+                enable: false,
+                countList: [],
+            },
+            desc: '',
+            isUsed: false,
+            isShow: true,
+            frequency: 1,
+        }
+        prizeList.value.push(defaultPrizeCOnfig)
+        toast.success(i18n.global.t('error.success'))
+    }
+    function resetDefault() {
+        prizeConfig.resetDefault()
+        prizeList.value = cloneDeep(localPrizeList.value)
+        toast.success(i18n.global.t('error.success'))
+    }
+    async function delAll() {
+        prizeList.value = []
+        toast.success(i18n.global.t('error.success'))
+    }
+    onMounted(() => {
+        getImageDbStore()
+    })
+    watch(() => prizeList.value, (val: IPrizeConfig[]) => {
+        prizeConfig.setPrizeConfig(val)
+    }, { deep: true })
+
+    return {
+        addPrize,
+        resetDefault,
+        delAll,
+        delItem,
+        prizeList,
+        currentPrize,
+        selectedPrize,
+        submitData,
+        changePrizePerson,
+        changePrizeStatus,
+        selectPrize,
+        localImageList,
+    }
 }

src/views/Config/Readme/index.vue

@@ -9,30 +9,30 @@ const md = markdownit()
 const readmeHtml = ref('')
 
 function getReadmeContent() {
-  const locale = i18n.global.locale.value
-  if (locale === 'zhCn') {
-    return readmeZh
-  }
-  else {
-    return readmeEn
-  }
+    const locale = i18n.global.locale.value
+    if (locale === 'zhCn') {
+        return readmeZh
+    }
+    else {
+        return readmeEn
+    }
 }
 function readMd() {
-  try {
-    const content = getReadmeContent()
-    readmeHtml.value = md.render(content)
-  }
-  catch (error) {
-    console.error('Failed to load readme:', error)
-    readmeHtml.value = '<p>Failed to load README content.</p>'
-  }
+    try {
+        const content = getReadmeContent()
+        readmeHtml.value = md.render(content)
+    }
+    catch (error) {
+        console.error('Failed to load readme:', error)
+        readmeHtml.value = '<p>Failed to load README content.</p>'
+    }
 }
 // 监听语言变化
 watch(() => i18n.global.locale.value, () => {
-  readMd()
+    readMd()
 })
 onMounted(() => {
-  readMd()
+    readMd()
 })
 </script>
 

src/views/Config/index.vue

@@ -12,24 +12,24 @@ const menuList = ref<any[]>(configRoutes.children)
 const currentYear = dayjs().year()
 
 function cleanMenuList(menu: any) {
-  const newList = menu
-  for (let i = 0; i < newList.length; i++) {
-    if (newList[i].children) {
-      cleanMenuList(newList[i].children)
+    const newList = menu
+    for (let i = 0; i < newList.length; i++) {
+        if (newList[i].children) {
+            cleanMenuList(newList[i].children)
+        }
+        if (!newList[i].meta) {
+            newList.splice(i, 1)
+            i--
+        }
     }
-    if (!newList[i].meta) {
-      newList.splice(i, 1)
-      i--
-    }
-  }
 
-  return newList
+    return newList
 }
 
 menuList.value = cleanMenuList(menuList.value)
 
 function skip(path: string) {
-  router.push(path)
+    router.push(path)
 }
 </script>
 

src/views/Demo/index.vue

@@ -8,81 +8,81 @@ gsap.registerPlugin(ScrollTrigger)
 const list = ref<any[]>([])
 
 list.value = [{
-  label: 1,
-  value: 1,
-  color: 'red',
+    label: 1,
+    value: 1,
+    color: 'red',
 }, {
-  label: 2,
-  value: 2,
-  color: 'blue',
+    label: 2,
+    value: 2,
+    color: 'blue',
 }, {
-  label: 3,
-  value: 3,
-  color: 'yellow',
+    label: 3,
+    value: 3,
+    color: 'yellow',
 }, {
-  label: 4,
-  value: 4,
-  color: 'green',
+    label: 4,
+    value: 4,
+    color: 'green',
 }, {
-  label: 5,
-  value: 5,
-  color: 'pink',
+    label: 5,
+    value: 5,
+    color: 'pink',
 }, {
-  label: 6,
-  value: 6,
-  color: 'orange',
+    label: 6,
+    value: 6,
+    color: 'orange',
 }, {
-  label: 7,
-  value: 7,
-  color: 'purple',
+    label: 7,
+    value: 7,
+    color: 'purple',
 }, {
-  label: 8,
-  value: 8,
-  color: 'brown',
+    label: 8,
+    value: 8,
+    color: 'brown',
 }, {
-  label: 9,
-  value: 9,
-  color: 'gray',
+    label: 9,
+    value: 9,
+    color: 'gray',
 }, {
-  label: 10,
-  value: 10,
-  color: 'cyan',
+    label: 10,
+    value: 10,
+    color: 'cyan',
 }, {
-  label: 11,
-  value: 11,
-  color: 'white',
+    label: 11,
+    value: 11,
+    color: 'white',
 }, {
-  label: 12,
-  value: 12,
-  color: 'black',
+    label: 12,
+    value: 12,
+    color: 'black',
 }, {
-  label: 13,
-  value: 13,
-  color: 'orange',
+    label: 13,
+    value: 13,
+    color: 'orange',
 }, {
-  label: 14,
-  value: 14,
-  color: 'yellow',
+    label: 14,
+    value: 14,
+    color: 'yellow',
 }, {
-  label: 15,
-  value: 14,
-  color: 'pink',
+    label: 15,
+    value: 14,
+    color: 'pink',
 }, {
-  label: 15,
-  value: 15,
-  color: 'orange',
+    label: 15,
+    value: 15,
+    color: 'orange',
 }, {
-  label: 16,
-  value: 16,
-  color: 'yellow',
+    label: 16,
+    value: 16,
+    color: 'yellow',
 }, {
-  label: 17,
-  value: 17,
-  color: 'green',
+    label: 17,
+    value: 17,
+    color: 'green',
 }, {
-  label: 18,
-  value: 18,
-  color: 'purple',
+    label: 18,
+    value: 18,
+    color: 'purple',
 }]
 
 // 为每个 li 元素创建引用
@@ -93,68 +93,68 @@ const showUpButton = ref(false)
 const showDownButton = ref(true)
 
 function initGsapAnimation() {
-  ctx.value = gsap.context(() => {
-    liRefs.value.forEach((box: any) => {
-      gsap.fromTo(box, { rotationX: -90, rotateZ: -20, opacity: 0 }, {
-        rotationX: 0,
-        rotateZ: 0,
-        opacity: 1,
-        scrollTrigger: {
-          trigger: box,
-          scroller: scrollContainerRef.value, // <- Specify the scroller!
-          start: 'bottom 100%',
-          end: 'top 70%',
-          scrub: true,
-        },
-      })
-    })
-  }, scrollContainerRef.value) // <- Scope!
+    ctx.value = gsap.context(() => {
+        liRefs.value.forEach((box: any) => {
+            gsap.fromTo(box, { rotationX: -90, rotateZ: -20, opacity: 0 }, {
+                rotationX: 0,
+                rotateZ: 0,
+                opacity: 1,
+                scrollTrigger: {
+                    trigger: box,
+                    scroller: scrollContainerRef.value, // <- Specify the scroller!
+                    start: 'bottom 100%',
+                    end: 'top 70%',
+                    scrub: true,
+                },
+            })
+        })
+    }, scrollContainerRef.value) // <- Scope!
 }
 
 function disposeGsapAnimation() {
-  ctx.value.revert() // <- Easy Cleanup!
+    ctx.value.revert() // <- Easy Cleanup!
 }
 function scrollHandler() {
-  const scrollHeight = scrollContainerRef.value.scrollHeight
-  const scrollTop = scrollContainerRef.value.scrollTop
-  const containerHeight = scrollContainerRef.value.clientHeight
-  // 滚动滑到底部
-  if (scrollTop + containerHeight >= scrollHeight) {
-    showDownButton.value = false
-    showUpButton.value = true
-  }
-  // 在中间
-  else if (scrollTop && scrollTop + containerHeight < scrollHeight) {
-    showDownButton.value = true
-    showUpButton.value = true
-  }
-  // 滚动滑到顶部
-  else {
-    showDownButton.value = true
-    showUpButton.value = false
-  }
+    const scrollHeight = scrollContainerRef.value.scrollHeight
+    const scrollTop = scrollContainerRef.value.scrollTop
+    const containerHeight = scrollContainerRef.value.clientHeight
+    // 滚动滑到底部
+    if (scrollTop + containerHeight >= scrollHeight) {
+        showDownButton.value = false
+        showUpButton.value = true
+    }
+    // 在中间
+    else if (scrollTop && scrollTop + containerHeight < scrollHeight) {
+        showDownButton.value = true
+        showUpButton.value = true
+    }
+    // 滚动滑到顶部
+    else {
+        showDownButton.value = true
+        showUpButton.value = false
+    }
 }
 function listenScrollContainer() {
-  scrollContainerRef.value.addEventListener('scroll', scrollHandler)
+    scrollContainerRef.value.addEventListener('scroll', scrollHandler)
 }
 function removeScrollContainer() {
-  if (scrollContainerRef.value) {
-    scrollContainerRef.value.removeEventListener('scroll', scrollHandler)
-  }
+    if (scrollContainerRef.value) {
+        scrollContainerRef.value.removeEventListener('scroll', scrollHandler)
+    }
 }
 
 function handleScroll(h: number) {
-  scrollContainerRef.value.scrollTop += h
+    scrollContainerRef.value.scrollTop += h
 }
 onMounted(() => {
-  initGsapAnimation()
-  listenScrollContainer()
+    initGsapAnimation()
+    listenScrollContainer()
 })
 onBeforeUnmount(() => {
-  removeScrollContainer()
+    removeScrollContainer()
 })
 onUnmounted(() => {
-  disposeGsapAnimation()
+    disposeGsapAnimation()
 })
 </script>
 

src/views/Home/components/HeaderTitle/index.vue

@@ -6,34 +6,34 @@ import { useRouter } from 'vue-router'
 import { rgbToHex } from '@/utils/color'
 
 interface Props {
-  textSize: number
-  textColor: string
-  topTitle: string
-  tableData: any[]
-  setDefaultPersonList: () => void
-  isInitialDone: boolean
-  titleFont: string
-  titleFontSyncGlobal: boolean
+    textSize: number
+    textColor: string
+    topTitle: string
+    tableData: any[]
+    setDefaultPersonList: () => void
+    isInitialDone: boolean
+    titleFont: string
+    titleFontSyncGlobal: boolean
 }
 
 const props = defineProps<Props>()
 const router = useRouter()
 const { tableData, textSize, textColor, topTitle, setDefaultPersonList, titleFont, titleFontSyncGlobal } = toRefs(props)
 const isTextColor = computed(() => {
-  return rgbToHex(textColor.value) !== '#00000000'
+    return rgbToHex(textColor.value) !== '#00000000'
 })
 const titleStyle = computed(() => {
-  const style: CSSProperties = {
-    fontSize: `${textSize.value * 1.5}px`,
-  }
-  if (!titleFontSyncGlobal.value) {
-    style.fontFamily = titleFont.value
-  }
-  if (isTextColor.value) {
-    style.color = textColor.value
-  }
+    const style: CSSProperties = {
+        fontSize: `${textSize.value * 1.5}px`,
+    }
+    if (!titleFontSyncGlobal.value) {
+        style.fontFamily = titleFont.value
+    }
+    if (isTextColor.value) {
+        style.color = textColor.value
+    }
 
-  return style
+    return style
 })
 const { t } = useI18n()
 </script>

src/views/Home/components/OptionsButton/index.vue

@@ -4,13 +4,13 @@ import { useI18n } from 'vue-i18n'
 import { LotteryStatus } from '@/views/Home/type'
 
 interface Props {
-  currentStatus: LotteryStatus
-  tableData: any[]
-  enterLottery: () => void
-  startLottery: () => void
-  stopLottery: () => void
-  continueLottery: () => void
-  quitLottery: () => void
+    currentStatus: LotteryStatus
+    tableData: any[]
+    enterLottery: () => void
+    startLottery: () => void
+    stopLottery: () => void
+    continueLottery: () => void
+    quitLottery: () => void
 }
 const props = defineProps<Props>()
 

src/views/Home/components/PrizeList/index.vue

@@ -11,18 +11,18 @@ import { usePrizeList } from './usePrizeList'
 
 const temporaryPrizeRef = ref()
 const {
-  temporaryPrize,
-  changePersonCount,
-  selectPrize,
-  localImageList,
-  addTemporaryPrize,
-  submitTemporaryPrize,
-  submitData,
-  deleteTemporaryPrize,
-  prizeShow,
-  currentPrize,
-  localPrizeList,
-  isMobile,
+    temporaryPrize,
+    changePersonCount,
+    selectPrize,
+    localImageList,
+    addTemporaryPrize,
+    submitTemporaryPrize,
+    submitData,
+    deleteTemporaryPrize,
+    prizeShow,
+    currentPrize,
+    localPrizeList,
+    isMobile,
 } = usePrizeList(temporaryPrizeRef)
 const selectedPrize = ref<IPrizeConfig | null>()
 </script>

src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.vue

@@ -5,11 +5,11 @@ import defaultPrizeImage from '@/assets/images/龙.png'
 import { useGsap } from './useGsap'
 
 const props = defineProps<{
-  isMobile: boolean
-  localPrizeList: IPrizeConfig[]
-  currentPrize: IPrizeConfig
-  temporaryPrizeShow: boolean
-  addTemporaryPrize: () => void
+    isMobile: boolean
+    localPrizeList: IPrizeConfig[]
+    currentPrize: IPrizeConfig
+    temporaryPrizeShow: boolean
+    addTemporaryPrize: () => void
 }>()
 
 const prizeShow = defineModel<boolean>('prizeShow')
@@ -19,45 +19,45 @@ const isScroll = ref(false)
 const liRefs = ref([])
 
 const {
-  showUpButton,
-  showDownButton,
-  handleScroll,
+    showUpButton,
+    showDownButton,
+    handleScroll,
 } = useGsap(scrollContainerRef, liRefs, isScroll, prizeShow, props.temporaryPrizeShow)
 
 // 获取ulContainerRef的高度
 function getUlContainerHeight() {
-  if (ulContainerRef.value) {
-    return ulContainerRef.value.offsetHeight
-  }
-  return 0
+    if (ulContainerRef.value) {
+        return ulContainerRef.value.offsetHeight
+    }
+    return 0
 }
 // 获取scrollContainerRef的高度
 function getScrollContainerHeight() {
-  if (scrollContainerRef.value) {
-    return scrollContainerRef.value.offsetHeight
-  }
-  return 0
+    if (scrollContainerRef.value) {
+        return scrollContainerRef.value.offsetHeight
+    }
+    return 0
 }
 
 function getIsScroll() {
-  const ulHeight = getUlContainerHeight()
-  const scrollHeight = getScrollContainerHeight()
-  if (ulHeight > scrollHeight + 20) {
-    isScroll.value = true
-  }
-  else {
-    isScroll.value = false
-    scrollContainerRef.value.style.height = `${ulHeight}px`
-  }
+    const ulHeight = getUlContainerHeight()
+    const scrollHeight = getScrollContainerHeight()
+    if (ulHeight > scrollHeight + 20) {
+        isScroll.value = true
+    }
+    else {
+        isScroll.value = false
+        scrollContainerRef.value.style.height = `${ulHeight}px`
+    }
 }
 
 watch ([prizeShow, () => props.temporaryPrizeShow], (val) => {
-  if (!val[0]) {
-    return
-  }
-  setTimeout (() => {
-    getIsScroll()
-  }, 0)
+    if (!val[0]) {
+        return
+    }
+    setTimeout (() => {
+        getIsScroll()
+    }, 0)
 }, { immediate: true })
 </script>
 

src/views/Home/components/PrizeList/parts/OperationButton.vue

@@ -2,12 +2,12 @@
 import { useI18n } from 'vue-i18n'
 
 defineProps<{
-  addTemporaryPrize: () => void
+    addTemporaryPrize: () => void
 }>()
 const { t } = useI18n()
 const prizeShow = defineModel('prizeShow', {
-  type: Boolean,
-  default: false,
+    type: Boolean,
+    default: false,
 })
 </script>
 

src/views/Home/components/PrizeList/parts/TemporaryDialog.vue

@@ -1,24 +1,24 @@
 <script setup lang='ts'>
 import type { IImage, IPrizeConfig } from '@/types/storeType'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 defineProps<{
-  changePersonCount: () => void
-  selectPrize: (prize: IPrizeConfig) => void
-  localImageList: IImage[]
-  submitTemporaryPrize: () => void
-  addTemporaryPrize: () => void
+    changePersonCount: () => void
+    selectPrize: (prize: IPrizeConfig) => void
+    localImageList: IImage[]
+    submitTemporaryPrize: () => void
+    addTemporaryPrize: () => void
 }>()
 const { t } = useI18n()
 const dialogRef = ref<HTMLDialogElement | null>(null)
 const temporaryPrize = defineModel<IPrizeConfig>('temporaryPrize', { required: true })
 function showDialog() {
-  dialogRef.value?.showModal()
+    dialogRef.value?.showModal()
 }
 defineExpose({
-  showDialog,
-  closed,
+    showDialog,
+    closed,
 })
 </script>
 

src/views/Home/components/PrizeList/parts/TemporaryList.vue

@@ -5,9 +5,9 @@ import { useI18n } from 'vue-i18n'
 import defaultPrizeImage from '@/assets/images/龙.png'
 
 defineProps<{
-  temporaryPrize: IPrizeConfig
-  addTemporaryPrize: () => void
-  deleteTemporaryPrize: () => void
+    temporaryPrize: IPrizeConfig
+    addTemporaryPrize: () => void
+    deleteTemporaryPrize: () => void
 }>()
 
 const { t } = useI18n()

src/views/Home/components/StarsBackground/index.vue

@@ -5,17 +5,17 @@ import Sparticles from 'sparticles'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 const props = defineProps({
-  homeBackground: {
-    type: Object,
-    default: () => ({
-      id: '',
-      name: '',
-      url: '',
-    }),
-  },
+    homeBackground: {
+        type: Object,
+        default: () => ({
+            id: '',
+            name: '',
+            url: '',
+        }),
+    },
 })
 const imageDbStore = localforage.createInstance({
-  name: 'imgStore',
+    name: 'imgStore',
 })
 const imgUrl = ref('')
 const starRef = ref()
@@ -23,40 +23,40 @@ const starRef = ref()
 const { width, height } = useElementSize(starRef)
 const options = ref({ shape: 'star', parallax: 1.2, rotate: true, twinkle: true, speed: 10, count: 200 })
 function addSparticles(node: any, width: number, height: number) {
-  const sparticleInstance = new Sparticles(node, options.value, width, height)
-  return sparticleInstance
+    const sparticleInstance = new Sparticles(node, options.value, width, height)
+    return sparticleInstance
 }
 // 页面大小改变时
 function listenWindowSize() {
-  window.addEventListener('resize', () => {
-    if (width.value && height.value) {
-      addSparticles(starRef.value, width.value, height.value)
-    }
-  })
+    window.addEventListener('resize', () => {
+        if (width.value && height.value) {
+            addSparticles(starRef.value, width.value, height.value)
+        }
+    })
 }
 
 async function getImageStoreItem(item: any): Promise<string> {
-  let image = ''
-  if (item.url === 'Storage') {
-    const key = item.id
-    const imageData = await imageDbStore.getItem(key) as any
-    image = URL.createObjectURL(imageData.data)
-  }
-  else {
-    image = item.url
-  }
+    let image = ''
+    if (item.url === 'Storage') {
+        const key = item.id
+        const imageData = await imageDbStore.getItem(key) as any
+        image = URL.createObjectURL(imageData.data)
+    }
+    else {
+        image = item.url
+    }
 
-  return image
+    return image
 }
 onMounted(() => {
-  getImageStoreItem(props.homeBackground).then((image) => {
-    imgUrl.value = image
-  })
-  addSparticles(starRef.value, width.value, height.value)
-  listenWindowSize()
+    getImageStoreItem(props.homeBackground).then((image) => {
+        imgUrl.value = image
+    })
+    addSparticles(starRef.value, width.value, height.value)
+    listenWindowSize()
 })
 onUnmounted(() => {
-  window.removeEventListener('resize', listenWindowSize)
+    window.removeEventListener('resize', listenWindowSize)
 })
 </script>