fix: eslint and lint fixed

.eslintignore

@@ -1,12 +0,0 @@
-.md
-node_modules
-public
-package.json
-*.yaml
-.gitignore
-.eslintrc*
-.babelrc
-.eslintignore
-.commitlintrc*
-.env*
-tsconfig*

.eslintrc.cjs

@@ -1,57 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-    node: true,
-  },
-  extends: [
-    "eslint:recommended",
-    "plugin:vue/vue3-essential",
-    "plugin:@typescript-eslint/recommended",
-  ],
-  overrides: [],
-  parser: "vue-eslint-parser",
-  parserOptions: {
-    ecmaVersion: "latest",
-    parser: "@typescript-eslint/parser",
-    sourceType: "module",
-  },
-  plugins: ["vue", "@typescript-eslint"],
-  rules: {
-    "@typescript-eslint/ban-types": [
-      "error",
-      {
-        extendDefaults: true,
-        types: {
-          "{}": false,
-        },
-      },
-    ],
-    // 关闭typescript类型为any的警告
-    "@typescript-eslint/no-explicit-any": ["off"],
-    // 驼峰命名，但忽略index
-    "vue/multi-word-component-names": [
-      "error",
-      {
-        ignores: ["index"], //需要忽略的组件名
-      },
-    ],
-    "no-console": "warn",
-    "no-debugger": "warn",
-    // complexity: ["warn", { max: 5 }],
-    // 禁止使用多个空格
-    "no-multi-spaces": "error",
-    // 最大连续空行数
-    "no-multiple-empty-lines": ["error", { max: 2, maxEOF: 1, maxBOF: 0 }],
-    // 代码块中去除前后空行
-    "padded-blocks": ["error", "never"],
-    // 使用单引号，字符串中包含了一个其它引号 允许"a string containing 'single' quotes"
-    quotes: ["error", "single", { avoidEscape: true }],
-    // return之前必须空行
-    "newline-before-return": "error",
-    //文件末尾强制换行
-    "eol-last": ["error", "always"],
-    //禁止空格和 tab 的混合缩进
-    "no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
-  },
-};

eslint.config.js

@@ -0,0 +1,12 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu(
+    {
+        ignores: ['**/node_modules', '**/public', '**/dist', '**/package.json', '**/*.yaml', '**/.gitignore', '**/.env*', '**/tsconfig*']
+    },
+    {
+        rules: {
+          "no-console": [1],
+        },
+      },
+)

package.json

@@ -11,7 +11,8 @@
         "test": "vitest",
         "test:ui": "vitest --ui",
         "preview": "vite preview",
-        "lint": "eslint ./src --ext .vue,.js,.ts,.jsx,.tsx --fix"
+        "lint": "eslint ./src",
+        "lint:fix": "eslint ./src --fix"
     },
     "dependencies": {
         "@tweenjs/tween.js": "^23.1.2",
@@ -38,6 +39,9 @@
         "zod": "^3.23.8"
     },
     "devDependencies": {
+        "@antfu/eslint-config": "^3.9.2",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "^9.15.0",
         "@iconify-json/ep": "^1.1.15",
         "@iconify-json/fluent": "^1.1.58",
         "@tailwindcss/typography": "^0.5.13",
@@ -55,6 +59,7 @@
         "daisyui": "^4.12.10",
         "eslint": "^9.6.0",
         "eslint-plugin-vue": "^9.26.0",
+        "globals": "^15.12.0",
         "happy-dom": "^14.12.3",
         "husky": "^9.0.11",
         "jsdom": "^24.1.0",

src/App.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { onMounted,ref } from 'vue'
+import PlayMusic from '@/components/PlayMusic/index.vue'
 import useStore from '@/store'
 import { storeToRefs } from 'pinia'
-import PlayMusic from '@/components/PlayMusic/index.vue'
-
 import { themeChange } from 'theme-change'
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const globalConfig = useStore().globalConfig
 const prizeConfig = useStore().prizeConfig
-const system=useStore().system
+const system = useStore().system
 const { getTheme: localTheme } = storeToRefs(globalConfig)
 const { getPrizeConfig: prizeList } = storeToRefs(prizeConfig)
-// const { getIsMobile: isMobile } = storeToRefs(system)
 
-const tipDialog=ref()
+const tipDialog = ref()
 // const isMobileValue = ref(structuredClone(isMobile.value))
-const setLocalTheme = (theme: any) => {
+function setLocalTheme(theme: any) {
   themeChange(theme.name)
 }
 
 // 设置当前奖列表
-const setCurrentPrize = () => {
+function setCurrentPrize() {
   if (prizeList.value.length <= 0) {
     return
   }
@@ -31,33 +31,31 @@ const setCurrentPrize = () => {
       break
     }
   }
-
-    return
 }
 // 判断是否手机端访问
-const judgeMobile=()=>{
+function judgeMobile() {
   const ua = navigator.userAgent
-    const isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1
+  const isAndroid = ua.includes('Android') || ua.includes('Adr')
-    const isIOS =!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
+  const isIOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
 
-    system.setIsMobile(isAndroid||isIOS)
+  system.setIsMobile(isAndroid || isIOS)
 
-return isAndroid||isIOS
+  return isAndroid || isIOS
 }
 // 判断是否chrome或者edge访问
-const judgeChromeOrEdge=()=>{
+function judgeChromeOrEdge() {
   const ua = navigator.userAgent
-    const isChrome = ua.indexOf('Chrome') > -1
+  const isChrome = ua.includes('Chrome')
-    const isEdge = ua.indexOf('Edg') > -1
+  const isEdge = ua.includes('Edg')
 
   system.setIsChrome(isChrome)
 
-return isChrome||isEdge
+  return isChrome || isEdge
 }
 onMounted(() => {
   setLocalTheme(localTheme.value)
   setCurrentPrize()
-    if(judgeMobile()||!judgeChromeOrEdge()){
+  if (judgeMobile() || !judgeChromeOrEdge()) {
     tipDialog.value.showModal()
   }
 })
@@ -66,19 +64,27 @@ onMounted(() => {
 <template>
   <dialog id="my_modal_1" ref="tipDialog" class="border-none modal">
     <div class="modal-box">
-            <h3 class="text-lg font-bold">{{ $t('dialog.titleTip') }}</h3>
+      <h3 class="text-lg font-bold">
-            <p class="py-4" v-if="judgeMobile()">{{ $t('dialog.dialogPCWeb') }}</p>
+        {{ t('dialog.titleTip') }}
-            <p class="py-4" v-if=" !judgeChromeOrEdge()">{{ $t('dialog.dialogLatestBrowser') }}</p>
+      </h3>
+      <p v-if="judgeMobile()" class="py-4">
+        {{ t('dialog.dialogPCWeb') }}
+      </p>
+      <p v-if=" !judgeChromeOrEdge()" class="py-4">
+        {{ t('dialog.dialogLatestBrowser') }}
+      </p>
       <div class="modal-action">
         <form method="dialog" class="flex justify-start w-full gap-3">
           <!-- if there is a button in form, it will close the modal -->
-                    <button class="btn">{{ $t('button.confirm') }}</button>
+          <button class="btn">
+            {{ t('button.confirm') }}
+          </button>
         </form>
       </div>
     </div>
   </dialog>
-    <router-view></router-view>
+  <router-view />
-    <PlayMusic class="absolute right-0 bottom-1/2"></PlayMusic>
+  <PlayMusic class="absolute right-0 bottom-1/2" />
 </template>
 
 <style scoped lang="scss"></style>

src/api/request.ts

@@ -1,61 +1,62 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
-import type { InternalAxiosRequestConfig } from 'axios';
+import axios from 'axios'
+
 class Request {
-  private instance: AxiosInstance;
+  private instance: AxiosInstance
 
   constructor(config: AxiosRequestConfig) {
     this.instance = axios.create({
       baseURL: '/api',
       timeout: 10000,
       ...config,
-    });
+    })
 
     // 添加请求拦截器
     this.instance.interceptors.request.use(
       (config: InternalAxiosRequestConfig) => {
         // 在发送请求之前做些什么
-        console.log('请求拦截器被触发');
+        console.log('请求拦截器被触发')
 
-        return config;
+        return config
       },
       (error: any) => {
         // 对请求错误做些什么
-        console.error('请求拦截器发生错误：', error);
+        console.error('请求拦截器发生错误：', error)
 
-        return Promise.reject(error);
+        return Promise.reject(error)
-      }
+      },
-    );
+    )
 
     // 添加响应拦截器
     this.instance.interceptors.response.use(
       (response: AxiosResponse) => {
         // 对响应数据做些什么
-        console.log('响应拦截器被触发');
+        console.log('响应拦截器被触发')
-        const reponseData = response.data;
+        const responseData = response.data
 
-        return reponseData;
+        return responseData
       },
       (error: any) => {
         // 对响应错误做些什么
-        console.error('响应拦截器发生错误：', error);
+        console.error('响应拦截器发生错误：', error)
 
-        return Promise.reject(error);
+        return Promise.reject(error)
-      }
+      },
-    );
+    )
   }
 
   public async request<T>(config: AxiosRequestConfig): Promise<T> {
-    const response: AxiosResponse<T> = await this.instance.request(config);
+    const response: AxiosResponse<T> = await this.instance.request(config)
 
-    return response.data;
+    return response.data
   }
 }
 
 // 函数
 function request<T>(config: AxiosRequestConfig): Promise<T> {
-  const instance = new Request(config);
+  const instance = new Request(config)
 
-  return instance.request(config);
+  return instance.request(config)
 }
 
-export default request;
+export default request

src/components/DaiysuiTable/index.vue

@@ -1,16 +1,18 @@
 <script setup lang='ts'>
-import { computed } from 'vue';
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 const props = defineProps({
   data: {
     type: Array as any,
-        default: [] as any[]
+    default: [] as any[],
   },
   tableColumns: {
     type: Array,
-        default: [] as any[]
+    default: [] as any[],
   },
 })
-
+const { t } = useI18n()
 const dataColumns = computed<any[]>(() => {
   // 不带有actions的列
   const columns = props.tableColumns.filter((item: any) => !item.actions)
@@ -24,7 +26,6 @@ const actionsColumns = computed<any[]>(() => {
 
   return columns
 })
-
 </script>
 
 <template>
@@ -33,15 +34,19 @@ const actionsColumns = computed<any[]>(() => {
       <!-- head -->
       <thead>
         <tr>
-                    <th></th>
+          <th />
-                    <th v-for="(item, index) in dataColumns" :key="index">{{ item.label }}</th>
+          <th v-for="(item, index) in dataColumns" :key="index">
-                    <th v-for="(item, index) in actionsColumns" :key="index">{{ $t('table.operation') }}</th>
+            {{ item.label }}
-                    <th></th>
+          </th>
+          <th v-for="(item, index) in actionsColumns" :key="index">
+            {{ t('table.operation') }}
+          </th>
+          <th />
         </tr>
       </thead>
       <tbody v-if="data.length > 0">
         <!-- row  -->
-                <tr class="hover" v-for="item in data" :key="item.id">
+        <tr v-for="item in data" :key="item.id" class="hover">
           <th>{{ item.id }}</th>
           <td v-for="(column, index) in dataColumns" :key="index">
             <span v-if="column.formatValue">{{ column.formatValue(item) }}</span>
@@ -49,19 +54,23 @@ const actionsColumns = computed<any[]>(() => {
           </td>
           <!-- action -->
           <td v-for="(column, index) in actionsColumns" :key="index" class="flex gap-2">
-                        <button class="btn btn-xs" v-for="action in column.actions" :key="action.name" :class="action.type"
+            <button
-                            @click="action.onClick(item)">{{ action.label }}</button>
+              v-for="action in column.actions" :key="action.name" class="btn btn-xs" :class="action.type"
+              @click="action.onClick(item)"
+            >
+              {{ action.label }}
+            </button>
           </td>
         </tr>
       </tbody>
       <tbody v-else>
         <tr>
-                    <td colspan="5" class="text-center">{{ $t('table.noneData') }}</td>
+          <td colspan="5" class="text-center">
+            {{ t('table.noneData') }}
+          </td>
         </tr>
       </tbody>
       <!-- foot -->
-
-
     </table>
   </div>
 </template>

src/components/HelloWorld.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from 'vue'
 
-defineProps<{ msg: string }>();
+defineProps<{ msg: string }>()
 
-const count = ref(0);
+const count = ref(0)
-const addCount = () => {
+function addCount() {
-  count.value++;
+  count.value++
-};
+}
 </script>
 
 <template>
   <div>
-    <h1 class="text-4xl font-bold py-6">{{ msg }}</h1>
+    <h1 class="text-4xl font-bold py-6">
+      {{ msg }}
+    </h1>
 
     <div class="card w-1200px">
       <button
@@ -29,16 +31,16 @@ const addCount = () => {
 
     <p>
       Check out
-      <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter
-        >create-vue</a
-      >, the official Vue + Vite starter
     </p>
     <p>
       Install
       <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
       in your IDE for a better DX
     </p>
-    <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+    <p class="read-the-docs">
+      Click on the Vite and Vue logos to learn more
+    </p>
   </div>
 </template>
 

src/components/ImageSync/index.vue

@@ -1,41 +1,40 @@
 <script setup lang='ts'>
-import {ref,onMounted} from 'vue'
 import localforage from 'localforage'
-const props=defineProps({
+import { onMounted, ref } from 'vue'
+
+const props = defineProps({
   imgItem: {
-    type:Object,
+    type: Object,
-    default:()=>({})
+    default: () => ({}),
   },
 })
 const imageDbStore = localforage.createInstance({
-    name: 'imgStore'
+  name: 'imgStore',
 })
 
-const imgUrl=ref('')
+const imgUrl = ref('')
 
-
+async function getImageStoreItem(item: any): Promise<string> {
-const getImageStoreItem=async (item:any):Promise<string>=>{
+  let image = ''
-    let image=''
+  if (item.url === 'Storage') {
-    if(item.url=='Storage'){
+    const key = item.id
-        const key=item.id;
+    image = await imageDbStore.getItem(key) as string
-        image=await imageDbStore.getItem(key) as string
   }
-    else{
+  else {
-        image=item.url
+    image = item.url
   }
 
-     
+  return image
-return image
 }
 
-onMounted(async ()=>{
+onMounted(async () => {
-    const image=await getImageStoreItem(props.imgItem)
+  const image = await getImageStoreItem(props.imgItem)
-    imgUrl.value=image
+  imgUrl.value = image
 })
 </script>
 
 <template>
-    <img :src="imgUrl" alt="Image" class="object-cover h-full rounded-xl"/>
+  <img :src="imgUrl" alt="Image" class="object-cover h-full rounded-xl">
 </template>
 
 <style lang='scss' scoped>

src/components/NumberSeparate/EditSeparateDialog.vue

@@ -1,25 +1,25 @@
 <script setup lang='ts'>
-import { ref, watch, onMounted, toRefs } from 'vue'
+import type { Separate } from '@/types/storeType'
-import { Separate } from '@/types/storeType'
+import { onMounted, ref, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
   totalNumber: {
     type: Number,
-        default: 0
+    default: 0,
   },
   separatedNumber: {
     type: Array<Separate>,
-        default: []
+    default: [],
-    }
+  },
 })
-
 const emits = defineEmits(['submitData'])
-
+const { t } = useI18n()
 const separatedNumberRef = ref()
 const { separatedNumber, totalNumber } = toRefs(props)
 const scaleList = ref<number[]>([])
-const editScale = (item: number) => {
+function editScale(item: number) {
-    if (item == totalNumber.value) {
+  if (item === totalNumber.value) {
     return
   }
   if (scaleList.value.includes(item)) {
@@ -32,12 +32,12 @@ const editScale = (item: number) => {
     scaleList.value.sort((a, b) => a - b)
   }
 }
-const clearData = () => {
+function clearData() {
   emits('submitData', separatedNumber.value)
   separatedNumberRef.value.close()
 }
 watch(scaleList, (val: number[]) => {
-    separatedNumber.value.length=0
+  separatedNumber.value.length = 0
   for (let i = 1; i < scaleList.value.length; i++) {
     separatedNumber.value[i - 1] = {
       id: i.toString(),
@@ -53,11 +53,11 @@ watch(totalNumber, (val) => {
   }
   separatedNumberRef.value.showModal()
   // scaleList.value = [0, val]
-    scaleList.value = new Array(separatedNumber.value.length + 1).fill(totalNumber.value)
+  scaleList.value = Array.from({ length: separatedNumber.value.length + 1 }).fill(totalNumber.value) as number[]
   for (let i = separatedNumber.value.length - 1; i >= 0; i--) {
     scaleList.value[i] = scaleList.value[i + 1] - separatedNumber.value[i].count
   }
-    if(scaleList.value[0]!==0){
+  if (scaleList.value[0] !== 0) {
     scaleList.value.unshift(0)
   }
 })
@@ -74,22 +74,34 @@ onMounted(() => {
 <template>
   <dialog id="my_modal_1" ref="separatedNumberRef" class="z-50 overflow-hidden border-none modal">
     <div class="overflow-hidden modal-box">
-            <h3 class="pb-6 text-lg font-bold">{{ $t('dialog.titleTip') }}</h3>
+      <h3 class="pb-6 text-lg font-bold">
-            <p class="pb-8">{{ $t('dialog.dialogSingleDrawLimit') }}</p>
+        {{ t('dialog.titleTip') }}
+      </h3>
+      <p class="pb-8">
+        {{ t('dialog.dialogSingleDrawLimit') }}
+      </p>
       <div class="flex justify-between px-3 text-center separated-number">
-                <div v-for="item in props.totalNumber" :key="item"
+        <div
-                    class="relative flex flex-col items-center cursor-pointer">
+          v-for="item in props.totalNumber" :key="item"
-                    <div class="absolute mb-12 text-center tooltip -top-5 hover:text-lg" :data-tip="$t('tooltip.leftClick')"
+          class="relative flex flex-col items-center cursor-pointer"
-                        @click.left="editScale(item)">
+        >
+          <div
+            class="absolute mb-12 text-center tooltip -top-5 hover:text-lg" :data-tip="t('tooltip.leftClick')"
+            @click.left="editScale(item)"
+          >
             <span> {{ item }}</span>
           </div>
-                    <div class="text-center" :class="scaleList.includes(item) ? 'text-red-500 font-extrabold' : ''">|</div>
+          <div class="text-center" :class="scaleList.includes(item) ? 'text-red-500 font-extrabold' : ''">
+            |
+          </div>
         </div>
       </div>
       <div class="modal-action">
         <form method="dialog">
           <!-- if there is a button in form, it will close the modal -->
-                    <button class="btn" @click="clearData">{{ $t('button.close') }} }}</button>
+          <button class="btn" @click="clearData">
+            {{ t('button.close') }}
+          </button>
         </form>
       </div>
     </div>

src/components/PlayMusic/index.vue

@@ -1,23 +1,26 @@
 <script setup lang='ts'>
-import { ref, onMounted, onUnmounted,watch } from 'vue'
+import useStore from '@/store'
-import useStore from '@/store';
-import { storeToRefs } from 'pinia';
 import localforage from 'localforage'
-import { useRouter, useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
 const audioDbStore = localforage.createInstance({
-    name: 'audioStore'
+  name: 'audioStore',
 })
-const audio=ref(new Audio())
+const audio = ref(new Audio())
 const settingRef = ref()
 // const audio = ref(new Audio())
 const globalConfig = useStore().globalConfig
-const { getMusicList: localMusicList,getCurrentMusic:currentMusic } = storeToRefs(globalConfig);
+const { getMusicList: localMusicList, getCurrentMusic: currentMusic } = storeToRefs(globalConfig)
 // const localMusicListValue = ref(localMusicList)
 
-const play = async (item: any) => {
+async function play(item: any) {
-    if(!item){
+  if (!item) {
     return
   }
   // if (!audio.value.paused && !skip) {
@@ -29,7 +32,7 @@ const play = async (item: any) => {
   if (!item.url) {
     return
   }
-    if (item.url == 'Storage') {
+  if (item.url === 'Storage') {
     audioUrl = await audioDbStore.getItem(item.name) as string
   }
   else {
@@ -39,42 +42,42 @@ const play = async (item: any) => {
   audio.value.src = audioUrl
   audio.value.play()
 }
-const playMusic=(item:any,skip = false)=>{
+function playMusic(item: any, skip = false) {
-    if(!item){
+  if (!item) {
     return
   }
-    if(!currentMusic.value.paused&&!skip){
+  if (!currentMusic.value.paused && !skip) {
-        globalConfig.setCurrentMusic(item,true)
+    globalConfig.setCurrentMusic(item, true)
 
-return
+    return
   }
-    globalConfig.setCurrentMusic(item,false)
+  globalConfig.setCurrentMusic(item, false)
 }
-const nextPlay = () => {
+function nextPlay() {
   // 播放下一首
   if (localMusicList.value.length >= 1) {
-        let index = localMusicList.value.findIndex((item: any) => item.name == currentMusic.value.item.name)
+    let index = localMusicList.value.findIndex((item: any) => item.name === currentMusic.value.item.name)
     index++
     if (index >= localMusicList.value.length) {
       index = 0
     }
-        globalConfig.setCurrentMusic(localMusicList.value[index],false)
+    globalConfig.setCurrentMusic(localMusicList.value[index], false)
   }
 }
 // 监听播放成后开始下一首
-const onPlayEnd = () => {
+function onPlayEnd() {
   audio.value.addEventListener('ended', nextPlay)
 }
 
-const enterConfig = () => {
+function enterConfig() {
   router.push('/log-lottery/config')
 }
-const enterHome = () => {
+function enterHome() {
   router.push('/log-lottery')
 }
 
 onMounted(() => {
-    globalConfig.setCurrentMusic(localMusicList.value[0],true)
+  globalConfig.setCurrentMusic(localMusicList.value[0], true)
   onPlayEnd()
   // 不使用空格控制audio
 })
@@ -82,35 +85,40 @@ onUnmounted(() => {
   audio.value.removeEventListener('ended', nextPlay)
 })
 watch(currentMusic, (val: any) => {
-    if(!val.paused&&audio.value){
+  if (!val.paused && audio.value) {
     play(val.item)
   }
-    else{
+  else {
     audio.value.pause()
   }
-},{deep:true})
+}, { deep: true })
-
 </script>
 
 <template>
-    <div class="flex flex-col gap-3" ref="settingRef">
+  <div ref="settingRef" class="flex flex-col gap-3">
-        <div v-if="route.path.includes('/config')" class="tooltip tooltip-left" :data-tip="$t('tooltip.toHome')">
+    <div v-if="route.path.includes('/config')" class="tooltip tooltip-left" :data-tip="t('tooltip.toHome')">
-            <div class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
+      <div
-                @click="enterHome">
+        class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
-                <svg-icon name="home"></svg-icon>
+        @click="enterHome"
+      >
+        <svg-icon name="home" />
       </div>
     </div>
-        <div v-else class="tooltip tooltip-left" :data-tip="$t('tooltip.settingConfiguration')">
+    <div v-else class="tooltip tooltip-left" :data-tip="t('tooltip.settingConfiguration')">
-            <div class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
+      <div
-                @click="enterConfig">
+        class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
-                <svg-icon name="setting"></svg-icon>
+        @click="enterConfig"
+      >
+        <svg-icon name="setting" />
       </div>
     </div>
 
-        <div class="tooltip tooltip-left" :data-tip="currentMusic.item ? currentMusic.item.name+'\n\r &nbsp;'+$t('tooltip.nextSong') : $t('tooltip.noSongPlay')">
+    <div class="tooltip tooltip-left" :data-tip="currentMusic.item ? `${currentMusic.item.name}\n\r ${t('tooltip.nextSong')}` : t('tooltip.noSongPlay')">
-            <div class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
+      <div
-                @click="playMusic(currentMusic.item)" @click.right.prevent="nextPlay">
+        class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
-                <svg-icon :name="currentMusic.paused ? 'play' : 'pause'"></svg-icon>
+        @click="playMusic(currentMusic.item)" @click.right.prevent="nextPlay"
+      >
+        <svg-icon :name="currentMusic.paused ? 'play' : 'pause'" />
       </div>
     </div>
   </div>

src/components/StarsBackground/index.vue

@@ -1,37 +1,36 @@
 <script setup lang='ts'>
-import Sparticles from 'sparticles';
+import { useElementSize } from '@vueuse/core'
-import {ref,onMounted,onUnmounted} from 'vue';
+import Sparticles from 'sparticles'
-import { useElementSize } from '@vueuse/core';
+import { onMounted, onUnmounted, ref } from 'vue'
 
-const starRef=ref();
+const starRef = ref()
 
-const { width, height}=useElementSize(starRef);
+const { width, height } = useElementSize(starRef)
-let options = ref({ shape: 'star',parallax:1.2,rotate:true,twinkle:true, speed: 10,count:200 });
+const options = ref({ shape: 'star', parallax: 1.2, rotate: true, twinkle: true, speed: 10, count: 200 })
-function addSparticles(node:any,width:number,height:number) {
+function addSparticles(node: any, width: number, height: number) {
-     new Sparticles(node, options.value,width,height);
+  // eslint-disable-next-line no-new
+  new Sparticles(node, options.value, width, height)
 }
 // 页面大小改变时
-const listenWindowSize=()=>{
+function listenWindowSize() {
-    window.addEventListener('resize',()=>{
+  window.addEventListener('resize', () => {
     if (width.value && height.value) {
-            addSparticles(starRef.value,width.value,height.value);
+      addSparticles(starRef.value, width.value, height.value)
     }
-    });
+  })
 }
 
-onMounted(()=>{
+onMounted(() => {
-    addSparticles(starRef.value,width.value,height.value);
+  addSparticles(starRef.value, width.value, height.value)
   listenWindowSize()
 })
-onUnmounted(()=>{
+onUnmounted(() => {
-    window.removeEventListener('resize',listenWindowSize)
+  window.removeEventListener('resize', listenWindowSize)
 })
-
 </script>
 
 <template>
-    <div class="w-screen h-screen overflow-hidden bg-transparent" ref="starRef">
+  <div ref="starRef" class="w-screen h-screen overflow-hidden bg-transparent" />
-    </div>
 </template>
 
 <style lang='scss' scoped></style>

src/components/SvgIcon/index.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed } from 'vue'
+
 const props = defineProps({
   prefix: {
     type: String,
@@ -17,10 +18,11 @@ const props = defineProps({
     type: String,
     default: '24px',
   },
-});
+})
 
-const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+const symbolId = computed(() => `#${props.prefix}-${props.name}`)
 </script>
+
 <template>
   <svg
     aria-hidden="true"
@@ -31,6 +33,7 @@ const symbolId = computed(() => `#${props.prefix}-${props.name}`);
     <use :xlink:href="symbolId" />
   </svg>
 </template>
+
 <style scoped>
 .svg-icon {
   width: 24px;

src/components/ToTop/index.vue

@@ -3,9 +3,9 @@
 </script>
 
 <template>
-<div class="fixed z-50 flex items-center justify-center w-10 h-10 rounded-full shadow-lg cursor-pointer right-12 bottom-12 bg-slate-700 hover:bg-slate-600">
+  <div class="fixed z-50 flex items-center justify-center w-10 h-10 rounded-full shadow-lg cursor-pointer right-12 bottom-12 bg-slate-700 hover:bg-slate-600">
-    <svg-icon name="totop"></svg-icon>
+    <svg-icon name="totop" />
-</div>
+  </div>
 </template>
 
 <style lang='scss' scoped>

src/components/index.ts

@@ -1,5 +1,5 @@
+export { default as Footer } from './Footer/index.vue'
 /**
  *title: 自动导出组件
  */
-export { default as Header } from './Header/index.vue';
+export { default as Header } from './Header/index.vue'
-export { default as Footer } from './Footer/index.vue';

src/hooks/useElement.ts

@@ -1,21 +1,21 @@
+import type { IPersonConfig } from '@/types/storeType'
 import { rgba } from '@/utils/color'
-import { IPersonConfig } from '@/types/storeType'
 
-export const useElementStyle = (element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky'|'sphere' = 'default') => {
+export function useElementStyle(element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky' | 'sphere' = 'default') {
-    if (patternList.includes(index+1)&&mod=='default') {
+  if (patternList.includes(index + 1) && mod === 'default') {
     element.style.backgroundColor = rgba(patternColor, Math.random() * 0.2 + 0.8)
   }
-    else if(mod=='sphere'||mod=='default') {
+  else if (mod === 'sphere' || mod === 'default') {
     element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
   }
-    else if(mod=='lucky'){
+  else if (mod === 'lucky') {
     element.style.backgroundColor = rgba(cardColor, 0.8)
   }
   element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
   element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
-    element.style.width = `${cardSize.width}px`;
+  element.style.width = `${cardSize.width}px`
-    element.style.height = `${cardSize.height}px`;
+  element.style.height = `${cardSize.height}px`
-    if (mod == 'lucky') {
+  if (mod === 'lucky') {
     element.className = 'lucky-element-card'
   }
   else {
@@ -32,19 +32,19 @@ export const useElementStyle = (element: any, person: IPersonConfig, index: numb
     target.style.border = `1px solid ${rgba(cardColor, 0.25)}`
     target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
   })
-    element.children[0].style.fontSize = textSize * 0.5 + 'px';
+  element.children[0].style.fontSize = `${textSize * 0.5}px`
   if (person.uid) {
-        element.children[0].textContent = person.uid;
+    element.children[0].textContent = person.uid
   }
 
-    element.children[1].style.fontSize = textSize + 'px'
+  element.children[1].style.fontSize = `${textSize}px`
-    element.children[1].style.lineHeight = textSize * 3 + 'px'
+  element.children[1].style.lineHeight = `${textSize * 3}px`
   element.children[1].style.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}`
   if (person.name) {
     element.children[1].textContent = person.name
   }
 
-    element.children[2].style.fontSize = textSize * 0.5 + 'px'
+  element.children[2].style.fontSize = `${textSize * 0.5}px`
   if (person.department || person.identity) {
     element.children[2].innerHTML = `${person.department ? person.department : ''}<br/>${person.identity ? person.identity : ''}`
   }
@@ -70,15 +70,15 @@ export const useElementStyle = (element: any, person: IPersonConfig, index: numb
 //     return element
 // }
 
-export const useElementPosition = (element: any, count: number, cardSize: { width: number, height: number }, windowSize: { width: number, height: number }, cardIndex: number) => {
+export function useElementPosition(element: any, count: number, cardSize: { width: number, height: number }, windowSize: { width: number, height: number }, cardIndex: number) {
   let xTable = 0
   let yTable = 0
   const centerPosition = {
     x: 0,
-        y: windowSize.height / 2 - cardSize.height / 2
+    y: windowSize.height / 2 - cardSize.height / 2,
   }
   const index = cardIndex % 5
-    if (index == 0) {
+  if (index === 0) {
     xTable = centerPosition.x
     yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
   }

src/layout/Footer/config.ts

@@ -7,4 +7,4 @@ export const footerList = {
       icon: 'github',
     },
   ],
-};
+}

src/layout/Footer/index.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
-import { footerList } from './config';
+import { footerList } from './config'
-const skip = (url: string) => {
+
-  window.open(url);
+function skip(url: string) {
-};
+  window.open(url)
+}
 </script>
+
 <template>
   <div class="footer-container">
     <ul class="flex justify-center">
       <li
         v-for="item in footerList.data"
         :key="item.id"
-        @click="skip(item.url)"
         class="flex items-center gap-1 cursor-pointer"
+        @click="skip(item.url)"
       >
-        <svg-icon :name="item.icon"></svg-icon>
+        <svg-icon :name="item.icon" />
         <p>{{ item.name }}</p>
       </li>
     </ul>

src/layout/Header/index.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { navList } from './config';
+import { navList } from './config'
-const skip = (url: string) => {
+
-  window.open(url, '_self');
+function skip(url: string) {
-};
+  window.open(url, '_self')
+}
 </script>
 
 <template>
@@ -11,24 +12,34 @@ const skip = (url: string) => {
       <div class="navbar-start max-lg:w-full">
         <div class="dropdown">
           <label tabindex="0" class="btn btn-ghost lg:hidden">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
+            <svg
-                            stroke="currentColor">
+              xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              stroke="currentColor"
-                                d="M4 6h16M4 12h8m-8 6h16" />
+            >
+              <path
+                stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M4 6h16M4 12h8m-8 6h16"
+              />
             </svg>
           </label>
-                    <ul tabindex="0"
+          <ul
-                        class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 text-lg flex flex-col gap-2">
+            tabindex="0"
-                        <li class="cursor-pointer hover:text-gray-100 hover:bg-base-200" v-for="item in navList" :key="item.id" @click="skip(item.url)">{{ item.name }}</li>
+            class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 text-lg flex flex-col gap-2"
+          >
+            <li v-for="item in navList" :key="item.id" class="cursor-pointer hover:text-gray-100 hover:bg-base-200" @click="skip(item.url)">
+              {{ item.name }}
+            </li>
           </ul>
         </div>
         <a class="text-xl lg:pl-12 max-lg:mx-auto" href="https://vitejs.dev" target="_blank">
-                    <img src="/vite.svg" class="logo" alt="Vite logo" />
+          <img src="/vite.svg" class="logo" alt="Vite logo">
         </a>
       </div>
       <div class="hidden navbar-center lg:flex">
         <ul class="flex gap-10 px-1 text-lg cursor-pointer menu menu-horizontal">
-                    <li class="hover:text-gray-100"  v-for="item in navList" :key="item.id" @click="skip(item.url)">{{ item.name }}</li>
+          <li v-for="item in navList" :key="item.id" class="hover:text-gray-100" @click="skip(item.url)">
+            {{ item.name }}
+          </li>
         </ul>
       </div>
       <div class="navbar-end max-lg:w-0">

src/layout/index.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-// import Header from './Header/index.vue';
-// import Footer from './Footer/index.vue';
-import {ref} from 'vue';
 import ToTop from '@/components/ToTop/index.vue'
 import { useScroll } from '@vueuse/core'
+// import Header from './Header/index.vue';
+// import Footer from './Footer/index.vue';
+import { ref } from 'vue'
 
 const mainContainer = ref<HTMLElement | null>(null)
 
-const { y} = useScroll(mainContainer)
+const { y } = useScroll(mainContainer)
 
-const scrollToTop=()=>{
+function scrollToTop() {
-    y.value=0
+  y.value = 0
 }
 </script>
 
@@ -19,16 +19,16 @@ const scrollToTop=()=>{
     <!-- <header class="shadow-2xl head-container h-14">
       <Header></Header>
     </header> -->
-    <ToTop @click="scrollToTop" v-if="y>400"></ToTop>
+    <ToTop v-if="y > 400" @click="scrollToTop" />
     <main ref="mainContainer" class="box-content w-screen h-screen overflow-x-hidden overflow-y-auto main-container">
-      <router-view class="h-full main-container-content"></router-view>
+      <router-view class="h-full main-container-content" />
-
     </main>
     <!-- <footer class="w-screen footer-container">
       <Footer></Footer>
     </footer> -->
   </div>
 </template>
+
 <style scoped lang="scss">
 
 </style>

src/locales/en.ts

@@ -1,8 +1,8 @@
 export default {
   button: {
     enterLottery: 'Enter Lottery',
-        start:'Start',
+    start: 'Start',
-        selectLucky:'Draw the Lucky',
+    selectLucky: 'Draw the Lucky',
     continue: 'Continue',
     confirm: 'Confirm',
     cancel: 'Cancel',
@@ -21,129 +21,129 @@ export default {
     upload: 'Upload',
     reset: 'Reset',
     play: 'Play',
-        setLayout:'Set Layout',
+    setLayout: 'Set Layout',
-        close:'Close'
+    close: 'Close',
+    noInfoAndImport: 'No Info and import it',
+    useDefault: 'Use Default Data',
   },
-    sidebar:{
+  sidebar: {
-        personConfiguration:'Person Configuration',
+    personConfiguration: 'Person Configuration',
-        personList:'Person List',
+    personList: 'Person List',
-        winnerList:'Winner List',
+    winnerList: 'Winner List',
-        prizeConfiguration:'Prize Configuration',
+    prizeConfiguration: 'Prize Configuration',
-        globalSetting:'Global Configuration',
+    globalSetting: 'Global Configuration',
-        viewSetting:'View Setting',
+    viewSetting: 'View Setting',
-        imagesManagement:'Images Management',
+    imagesManagement: 'Images Management',
-        musicManagement:'Music Management',
+    musicManagement: 'Music Management',
-        operatingInstructions:'Operating Instructions'
+    operatingInstructions: 'Operating Instructions',
   },
-    viewTitle:{
+  viewTitle: {
-        personManagement:'Person Management',
+    personManagement: 'Person Management',
-        winnerManagement:'Winner Management',
+    winnerManagement: 'Winner Management',
-        prizeManagement:'Prize Management',
+    prizeManagement: 'Prize Management',
-        globalSetting:'Global Setting',
+    globalSetting: 'Global Setting',
-        operatingInstructions:'Operating Instructions'
+    operatingInstructions: 'Operating Instructions',
   },
-    table:{
+  table: {
     // person configuration
-        number:'Number',
+    number: 'Number',
-        name:'Name',
+    name: 'Name',
-        prizeName:'Name',
+    prizeName: 'Name',
-        department:'Department',
+    department: 'Department',
-        identity:'Identity',
+    identity: 'Identity',
-        isLucky:'Is Lucky',
+    isLucky: 'Is Lucky',
-        operation:'Operation',
+    operation: 'Operation',
-        setLuckyNumber:'Set Lucky Number',
+    setLuckyNumber: 'Set Lucky Number',
-        luckyPeopleNumber:'Lucky People Number',
+    luckyPeopleNumber: 'Lucky People Number',
 
-        detail:'Detail',
+    detail: 'Detail',
-        noneData:'No Data',
+    noneData: 'No Data',
     // prize configuration
-        fullParticipation:'FullParticipation',
+    fullParticipation: 'FullParticipation',
-        numberParticipants:'NumberParticipants',
+    numberParticipants: 'NumberParticipants',
-        isDone:'is Done',
+    isDone: 'is Done',
-        image:'Image',
+    image: 'Image',
-        onceNumber:'Once Number',
+    onceNumber: 'Once Number',
-        time:'Time',
+    time: 'Time',
     // view setting
-        title:'Main Title',
+    title: 'Main Title',
-        columnNumber:'Column Number',
+    columnNumber: 'Column Number',
-        theme:'Theme',
+    theme: 'Theme',
-        language:'Language',
+    language: 'Language',
-        cardColor:'Card Color',
+    cardColor: 'Card Color',
-        winnerColor:'Winner Color',
+    winnerColor: 'Winner Color',
-        textColor:'Text Color',
+    textColor: 'Text Color',
-        cardWidth:'Card Width',
+    cardWidth: 'Card Width',
-        cardHeight:'Card Height',
+    cardHeight: 'Card Height',
-        textSize:'Text Size',
+    textSize: 'Text Size',
-        highlightColor:'HighLight Color',
+    highlightColor: 'HighLight Color',
-        patternSetting:'Pattern Setting',
+    patternSetting: 'Pattern Setting',
-        alwaysDisplay:'Always Display Prize List',
+    alwaysDisplay: 'Always Display Prize List',
-        selectPicture:'Select a Picture'
+    selectPicture: 'Select a Picture',
   },
-    dialog:{
+  dialog: {
-        titleTip:'Tip!',
+    titleTip: 'Tip!',
-        titleTemporary:'Add Temporary Activity',
+    titleTemporary: 'Add Temporary Activity',
-        dialogPCWeb:'Please use a PC browser to access for optimal display performance',
+    dialogPCWeb: 'Please use a PC browser to access for optimal display performance',
-        dialogDelAllPerson:'This operation will delete all personnel list data. Do you want to continue?',
+    dialogDelAllPerson: 'This operation will delete all personnel list data. Do you want to continue?',
-        dialogResetWinner:'This operation will clear the winning information of personnel. Do you want to continue?',
+    dialogResetWinner: 'This operation will clear the winning information of personnel. Do you want to continue?',
-        dialogResetAllData:'This operation will reset all data. Do you want to continue?',
+    dialogResetAllData: 'This operation will reset all data. Do you want to continue?',
-        dialogSingleDrawLimit:'Only 10 characters can be extracted in a single draw',
+    dialogSingleDrawLimit: 'Only 10 characters can be extracted in a single draw',
-        dialogLatestBrowser:'Please use the latest version of Chrome or Edge browser',
+    dialogLatestBrowser: 'Please use the latest version of Chrome or Edge browser',
-        tipResetPrize:'Performing operations may reset data, please proceed with caution',
+    tipResetPrize: 'Performing operations may reset data, please proceed with caution',
   },
-    tooltip:{
+  tooltip: {
-        settingConfiguration:'Setting/Configuration',
+    settingConfiguration: 'Setting/Configuration',
-        nextSong:'Right Click to Next Song',
+    nextSong: 'Right Click to Next Song',
-        noSongPlay:'No Song to Play',
+    noSongPlay: 'No Song to Play',
-        prizeList:'Prize List',
+    prizeList: 'Prize List',
-        addActivity:'Add Activity',
+    addActivity: 'Add Activity',
-        downloadTemplateTip:'After downloading the file, please fill in the data in Excel and save it in xlsx format',
+    downloadTemplateTip: 'After downloading the file, please fill in the data in Excel and save it in xlsx format',
-        uploadExcelTip:'Upload the modified Excel file',
+    uploadExcelTip: 'Upload the modified Excel file',
-        leftClick:'Left Click to Slice',
+    leftClick: 'Left Click to Slice',
-        toHome:'to Home',
+    toHome: 'to Home',
-        resetLayout:'This item is time-consuming and performance intensive',
+    resetLayout: 'This item is time-consuming and performance intensive',
-        defaultLayout:'The default pattern setting is valid for 17 columns, please set the number of other columns yourself',
+    defaultLayout: 'The default pattern setting is valid for 17 columns, please set the number of other columns yourself',
-        doneCount:'Number of winners',
+    doneCount: 'Number of winners',
-        edit:'Edit',
+    edit: 'Edit',
-        delete:'Delete'
+    delete: 'Delete',
   },
-    error:{
+  error: {
-        require:'required field',
+    require: 'required field',
-        requireNumber:'please enter a number',
+    requireNumber: 'please enter a number',
-        minNumber1:'the minimum is 1',
+    minNumber1: 'the minimum is 1',
-        maxNumber100:'the maximum is 100',
+    maxNumber100: 'the maximum is 100',
-        uploadSuccess:'Upload Success',
+    uploadSuccess: 'Upload Success',
-        uploadFail:'Upload Failed',
+    uploadFail: 'Upload Failed',
-        notImage:'Not Image',
+    notImage: 'Not Image',
-        personIsAllDone:'All Person Is Done',
+    personIsAllDone: 'All Person Is Done',
-        personNotEnough:'Person Is Not Enough',
+    personNotEnough: 'Person Is Not Enough',
-        noInfoAndImport:'No Info and import it',
+    completeInformation: 'Please provide complete information',
-        useDefault:'Use Default Data',
-        completeInformation:'Please provide complete information'
   },
-    placeHolder:{
+  placeHolder: {
-        enterTitle:'Enter Title',
+    enterTitle: 'Enter Title',
-        name:'Name',
+    name: 'Name',
-        winnerCount:'Lucky Person Count',
+    winnerCount: 'Lucky Person Count',
   },
-    data:{
+  data: {
-        yes:'Yes',
+    yes: 'Yes',
-        no:'No',
+    no: 'No',
-        number:'Number',
+    number: 'Number',
-        isWin:'isWin',
+    isWin: 'isWin',
-        department:'Department',
+    department: 'Department',
-        name:'Name',
+    name: 'Name',
-        identity:'Identity',
+    identity: 'Identity',
-        prizeName:'Prize Name',
+    prizeName: 'Prize Name',
-        prizeTime:'Prize Time',
+    prizeTime: 'Prize Time',
-        operation:'Operation',
+    operation: 'Operation',
-        delete:'Delete',
+    delete: 'Delete',
-        removePerson:'Remove the Person',
+    removePerson: 'Remove the Person',
-        defaultTitle:'The Prelude to the Six Ministries of the Ming Dynasty Cabinet',
+    defaultTitle: 'The Prelude to the Six Ministries of the Ming Dynasty Cabinet',
-        xlsxName:'personListTemplate-en.xlsx',
+    xlsxName: 'personListTemplate-en.xlsx',
-        readmeName:'readme-en.md'
+    readmeName: 'readme-en.md',
+  },
+  footer: {
+    'self-reflection': 'Turn inward and examine yourself when you encounter difficulties in life.',
+    'thiefEasy': 'Thief difficult mountain thief easily, breaking heart.',
   },
-    footer:{
-        'self-reflection':'Turn inward and examine yourself when you encounter difficulties in life.',
-        'thiefEasy':'Thief difficult mountain thief easily, breaking heart.'
-    }
 }

src/locales/i18n.ts

@@ -1,32 +1,32 @@
 // i18n配置
-import { createI18n } from "vue-i18n";
+import { createI18n } from 'vue-i18n'
-import zhCn from "./zhCn";
+import en from './en'
-import en from "./en";
+import zhCn from './zhCn'
-export type Language='en'|'zhCn'
 
-export const languageList=[
+export type Language = 'en' | 'zhCn'
+
+export const languageList = [
   {
-        key:'zhCn',
+    key: 'zhCn',
-        name:'中文',
+    name: '中文',
-        flag:'zh-cn'
+    flag: 'zh-cn',
   },
   {
-        key:'en',
+    key: 'en',
-        name:'English',
+    name: 'English',
-        flag:'en-us'
+    flag: 'en-us',
-    }
+  },
 ]
-export const browserLanguage=navigator.language.toLowerCase().indexOf('zh')>=0?'zhCn':'en';
+export const browserLanguage = navigator.language.toLowerCase().includes('zh') ? 'zhCn' : 'en'
-const globalConfig=JSON.parse(localStorage.getItem('globalConfig')||'{}').globalConfig||{}
+const globalConfig = JSON.parse(localStorage.getItem('globalConfig') || '{}').globalConfig || {}
 // 创建i18n
 const i18n = createI18n({
-  locale: globalConfig.language||browserLanguage,
+  locale: globalConfig.language || browserLanguage,
-  globalInjection: true, // 全局注入,可以直接使用$t
+  legacy: false,
-  legacy:false, 
   messages: {
     zhCn,
-    en
+    en,
-  }
+  },
 })
 
-export default i18n;
+export default i18n

src/locales/zhCn.ts

@@ -1,8 +1,8 @@
 export default {
   button: {
     enterLottery: '进入抽奖',
-        start:'开始',
+    start: '开始',
-        selectLucky:'抽取幸运儿',
+    selectLucky: '抽取幸运儿',
     continue: '继续',
     confirm: '确认',
     cancel: '取消',
@@ -21,130 +21,130 @@ export default {
     upload: '上传',
     reset: '重置',
     play: '播放',
-        setLayout:'重设布局',
+    setLayout: '重设布局',
-        close:'关闭',
+    close: '关闭',
-        noInfoAndImport:'暂无人员信息，前往导入',
+    noInfoAndImport: '暂无人员信息，前往导入',
-        useDefault:'使用默认数据'
+    useDefault: '使用默认数据',
   },
-    sidebar:{
+  sidebar: {
-        personConfiguration:'人员配置',
+    personConfiguration: '人员配置',
-        personList:'人员列表',
+    personList: '人员列表',
-        winnerList:'中奖人员',
+    winnerList: '中奖人员',
-        prizeConfiguration:'奖品配置',
+    prizeConfiguration: '奖品配置',
-        globalSetting:'全局配置',
+    globalSetting: '全局配置',
-        viewSetting:'界面设置',
+    viewSetting: '界面设置',
-        imagesManagement:'图片管理',
+    imagesManagement: '图片管理',
-        musicManagement:'音乐管理',
+    musicManagement: '音乐管理',
-        operatingInstructions:'操作说明'
+    operatingInstructions: '操作说明',
   },
-    viewTitle:{
+  viewTitle: {
-        personManagement:'人员管理',
+    personManagement: '人员管理',
-        winnerManagement:'已中奖人员管理',
+    winnerManagement: '已中奖人员管理',
-        prizeManagement:'奖项配置',
+    prizeManagement: '奖项配置',
-        globalSetting:'全局配置',
+    globalSetting: '全局配置',
-        operatingInstructions:'操作说明'
+    operatingInstructions: '操作说明',
   },
-    table:{
+  table: {
     // person configuration
-        number:'编号',
+    number: '编号',
-        name:'姓名',
+    name: '姓名',
-        prizeName:'名称',
+    prizeName: '名称',
-        department:'部门',
+    department: '部门',
-        identity:'身份',
+    identity: '身份',
-        isLucky:'是否中奖',
+    isLucky: '是否中奖',
-        operation:'操作',
+    operation: '操作',
-        setLuckyNumber:'设置中奖人数',
+    setLuckyNumber: '设置中奖人数',
-        luckyPeopleNumber:'中奖人数',
+    luckyPeopleNumber: '中奖人数',
 
-        detail:'详细信息',
+    detail: '详细信息',
-        noneData:'暂无数据',
+    noneData: '暂无数据',
     // prize configuration
-        fullParticipation:'全员参加',
+    fullParticipation: '全员参加',
-        numberParticipants:'抽奖人数',
+    numberParticipants: '抽奖人数',
-        isDone:'已抽取',
+    isDone: '已抽取',
-        image:'图片',
+    image: '图片',
-        onceNumber:'单次抽取个数',
+    onceNumber: '单次抽取个数',
-        time:'时间',
+    time: '时间',
     // view setting
-        title:'主标题',
+    title: '主标题',
-        columnNumber:'列数',
+    columnNumber: '列数',
-        theme:'主题',
+    theme: '主题',
-        language:'语言',
+    language: '语言',
-        cardColor:'卡片颜色',
+    cardColor: '卡片颜色',
-        winnerColor:'中奖卡片颜色',
+    winnerColor: '中奖卡片颜色',
-        textColor:'文字颜色',
+    textColor: '文字颜色',
-        cardWidth:'卡片宽度',
+    cardWidth: '卡片宽度',
-        cardHeight:'卡片高度',
+    cardHeight: '卡片高度',
-        textSize:'文字大小',
+    textSize: '文字大小',
-        highlightColor:'高亮颜色',
+    highlightColor: '高亮颜色',
-        patternSetting:'图案设置',
+    patternSetting: '图案设置',
-        alwaysDisplay:'常显奖项列表',
+    alwaysDisplay: '常显奖项列表',
-        selectPicture:'选择一张图片'
+    selectPicture: '选择一张图片',
   },
-    dialog:{
+  dialog: {
-        titleTip:'提示!',
+    titleTip: '提示!',
-        titleTemporary:'增加临时抽奖',
+    titleTemporary: '增加临时抽奖',
-        dialogPCWeb:'请使用PC进行访问以获得最佳显示效果',
+    dialogPCWeb: '请使用PC进行访问以获得最佳显示效果',
-        dialogDelAllPerson:'该操作会删除所有人员数据，是否继续？',
+    dialogDelAllPerson: '该操作会删除所有人员数据，是否继续？',
-        dialogResetWinner:'该操作会清空人员中奖信息，是否继续？',
+    dialogResetWinner: '该操作会清空人员中奖信息，是否继续？',
-        dialogResetAllData:'该操作会重置所有数据，是否继续？',
+    dialogResetAllData: '该操作会重置所有数据，是否继续？',
-        dialogSingleDrawLimit:'单次抽取只能抽取10位',
+    dialogSingleDrawLimit: '单次抽取只能抽取10位',
-        dialogLatestBrowser:'请使用最新版Chrome或者Edge浏览器',
+    dialogLatestBrowser: '请使用最新版Chrome或者Edge浏览器',
-        tipResetPrize:'进行操作可能会重置数据，请谨慎操作',
+    tipResetPrize: '进行操作可能会重置数据，请谨慎操作',
   },
-    tooltip:{
+  tooltip: {
-        settingConfiguration:'设置/配置',
+    settingConfiguration: '设置/配置',
-        nextSong:'右键点击下一首',
+    nextSong: '右键点击下一首',
-        noSongPlay:'没有音乐可以播放',
+    noSongPlay: '没有音乐可以播放',
-        prizeList:'奖项列表',
+    prizeList: '奖项列表',
-        addActivity:'添加抽奖',
+    addActivity: '添加抽奖',
-        downloadTemplateTip:'下载文件后，请在excel中填写数据，并保存为xlsx格式',
+    downloadTemplateTip: '下载文件后，请在excel中填写数据，并保存为xlsx格式',
-        uploadExcelTip:'上传修改好的excel文件',
+    uploadExcelTip: '上传修改好的excel文件',
-        leftClick:'左键切割',
+    leftClick: '左键切割',
-        toHome:'主页',
+    toHome: '主页',
-        resetLayout:'该项比较耗费时间和性能',
+    resetLayout: '该项比较耗费时间和性能',
-        defaultLayout:'默认图案设置针对17列时有效，其他列数请自行设置',
+    defaultLayout: '默认图案设置针对17列时有效，其他列数请自行设置',
-        doneCount:'已抽取',
+    doneCount: '已抽取',
-        edit:'编辑',
+    edit: '编辑',
-        delete:'删除'
+    delete: '删除',
   },
-    error:{
+  error: {
-        require:'必填项',
+    require: '必填项',
-        requireNumber:'请输入数字',
+    requireNumber: '请输入数字',
-        minNumber1:'最小为1',
+    minNumber1: '最小为1',
-        maxNumber100:'最大为100',
+    maxNumber100: '最大为100',
-        uploadSuccess:'上传成功',
+    uploadSuccess: '上传成功',
-        uploadFail:'上传失败',
+    uploadFail: '上传失败',
-        notImage:'不是图片',
+    notImage: '不是图片',
-        personIsAllDone:'抽奖抽完了',
+    personIsAllDone: '抽奖抽完了',
-        personNotEnough:'抽奖人数不足',
+    personNotEnough: '抽奖人数不足',
-        startDraw:'现在抽取{count}{leftover}人',
+    startDraw: '现在抽取{count}{leftover}人',
-        completeInformation:'请填写完整信息'
+    completeInformation: '请填写完整信息',
   },
-    placeHolder:{
+  placeHolder: {
-        enterTitle:'输入标题',
+    enterTitle: '输入标题',
-        name:'名称',
+    name: '名称',
-        winnerCount:'中奖人数',
+    winnerCount: '中奖人数',
   },
-    data:{
+  data: {
-        yes:'是',
+    yes: '是',
-        no:'否',
+    no: '否',
-        number:'编号',
+    number: '编号',
-        isWin:'是否中奖',
+    isWin: '是否中奖',
-        department:'部门',
+    department: '部门',
-        name:'姓名',
+    name: '姓名',
-        identity:'身份',
+    identity: '身份',
-        prizeName:'获奖',
+    prizeName: '获奖',
-        prizeTime:'获奖时间',
+    prizeTime: '获奖时间',
-        operation:'操作',
+    operation: '操作',
-        delete:'删除',
+    delete: '删除',
-        removePerson:'移入未中奖名单',
+    removePerson: '移入未中奖名单',
-        defaultTitle:'大明内阁六部御前奏对',
+    defaultTitle: '大明内阁六部御前奏对',
-        xlsxName:'人口登记表-zhCn.xlsx',
+    xlsxName: '人口登记表-zhCn.xlsx',
-        readmeName:'readme-zhCn.md'
+    readmeName: 'readme-zhCn.md',
+  },
+  footer: {
+    'self-reflection': '行有不得，反求诸己',
+    'thiefEasy': '破山中贼易，破心中贼难',
   },
-    footer:{
-        'self-reflection':'行有不得，反求诸己',
-        'thiefEasy':'破山中贼易，破心中贼难'
-    }
 }

src/main.ts

@@ -1,25 +1,25 @@
-import { createApp } from 'vue';
+import svgIcon from '@/components/SvgIcon/index.vue'
-import './style.css';
+import i18n from '@/locales/i18n'
+import * as THREE from 'three'
+import { createApp } from 'vue'
+import VueDOMPurifyHTML from 'vue-dompurify-html'
+import App from './App.vue'
+import './style.css'
 import './style/markdown.css'
 import './style/style.scss'
-import * as THREE from 'three';
-import App from './App.vue';
-import VueDOMPurifyHTML from 'vue-dompurify-html'
-import i18n from '@/locales/i18n'
-
-const app = createApp(App);
 // 全局svg组件
-import 'virtual:svg-icons-register';
+import 'virtual:svg-icons-register'
-import svgIcon from '@/components/SvgIcon/index.vue';
 // svg全局组件// 路由
-import router from '@/router';
+import router from '@/router'
 // pinia
-import { createPinia } from 'pinia';
+import { createPinia } from 'pinia'
 // pinia持久化
-import piniaPluginPersist from 'pinia-plugin-persist';
+import piniaPluginPersist from 'pinia-plugin-persist'
-const pinia = createPinia();
-pinia.use(piniaPluginPersist);
 
-app.config.globalProperties.$THREE = THREE; //挂载到原型
+const app = createApp(App)
-app.component('svg-icon', svgIcon);
+const pinia = createPinia()
-app.use(router).use(VueDOMPurifyHTML).use(pinia).use(i18n).mount('#app');
+pinia.use(piniaPluginPersist)
+
+app.config.globalProperties.$THREE = THREE // 挂载到原型
+app.component('svg-icon', svgIcon)
+app.use(router).use(VueDOMPurifyHTML).use(pinia).use(i18n).mount('#app')

src/router/index.ts

@@ -1,8 +1,9 @@
-import { createRouter, createWebHistory } from 'vue-router';
+import Layout from '@/layout/index.vue'
-import Layout from '@/layout/index.vue';
-import Home from '@/views/Home/index.vue';
 import i18n from '@/locales/i18n'
-export const configRoutes={
+import Home from '@/views/Home/index.vue'
+import { createRouter, createWebHistory } from 'vue-router'
+
+export const configRoutes = {
   path: '/log-lottery/config',
   name: 'Config',
   component: () => import('@/views/Config/index.vue'),
@@ -19,28 +20,28 @@ export const configRoutes={
         title: i18n.global.t('sidebar.personConfiguration'),
         icon: 'person',
       },
-        children:[
+      children: [
         {
-                path:'',
+          path: '',
           redirect: '/log-lottery/config/person/all',
         },
         {
-                path:'/log-lottery/config/person/all',
+          path: '/log-lottery/config/person/all',
-                name:'AllPersonConfig',
+          name: 'AllPersonConfig',
-                component:()=>import('@/views/Config/Person/PersonAll.vue'),
+          component: () => import('@/views/Config/Person/PersonAll.vue'),
-                meta:{
+          meta: {
-                    title:i18n.global.t('sidebar.personList'),
+            title: i18n.global.t('sidebar.personList'),
-                    icon:'all'
+            icon: 'all',
-                }
+          },
         },
         {
-                path:'/log-lottery/config/person/already',
+          path: '/log-lottery/config/person/already',
-                name:'AlreadyPerson',
+          name: 'AlreadyPerson',
-                component:()=>import('@/views/Config/Person/PersonAlready.vue'),
+          component: () => import('@/views/Config/Person/PersonAlready.vue'),
-                meta:{
+          meta: {
-                    title:i18n.global.t('sidebar.winnerList'),
+            title: i18n.global.t('sidebar.winnerList'),
-                    icon:'already'
+            icon: 'already',
-                }
+          },
         },
         // {
         //     path:'other',
@@ -51,66 +52,66 @@ export const configRoutes={
         //         icon:'other'
         //     }
         // }
-        ]
+      ],
     },
     {
       path: '/log-lottery/config/prize',
       name: 'PrizeConfig',
       component: () => import('@/views/Config/Prize/PrizeConfig.vue'),
-        meta:{
+      meta: {
         title: i18n.global.t('sidebar.prizeConfiguration'),
-            icon: 'prize'
+        icon: 'prize',
-        }
+      },
     },
     {
-        path:'/log-lottery/config/global',
+      path: '/log-lottery/config/global',
-        name:'GlobalConfig',
+      name: 'GlobalConfig',
       redirect: '/log-lottery/config/global/all',
-        meta:{
+      meta: {
-            title:i18n.global.t('sidebar.globalSetting'),
+        title: i18n.global.t('sidebar.globalSetting'),
-            icon:'global'
+        icon: 'global',
       },
-        children:[
+      children: [
         {
-                path:'/log-lottery/config/global/face',
+          path: '/log-lottery/config/global/face',
-                name:'FaceConfig',
+          name: 'FaceConfig',
-                component:()=>import('@/views/Config/Global/FaceConfig.vue'),
+          component: () => import('@/views/Config/Global/FaceConfig.vue'),
-                meta:{
+          meta: {
-                    title:i18n.global.t('sidebar.viewSetting'),
+            title: i18n.global.t('sidebar.viewSetting'),
-                    icon:'face'
+            icon: 'face',
-                }
+          },
         },
         {
-                path:'/log-lottery/config/global/image',
+          path: '/log-lottery/config/global/image',
-                name:'ImageConfig',
+          name: 'ImageConfig',
-                component:()=>import('@/views/Config/Global/ImageConfig.vue'),
+          component: () => import('@/views/Config/Global/ImageConfig.vue'),
-                meta:{
+          meta: {
-                    title:i18n.global.t('sidebar.imagesManagement'),
+            title: i18n.global.t('sidebar.imagesManagement'),
-                    icon:'image'
+            icon: 'image',
-                }
+          },
         },
         {
-                path:'/log-lottery/config/global/music',
+          path: '/log-lottery/config/global/music',
-                name:'MusicConfig',
+          name: 'MusicConfig',
-                component:()=>import('@/views/Config/Global/MusicConfig.vue'),
+          component: () => import('@/views/Config/Global/MusicConfig.vue'),
-                meta:{
+          meta: {
-                    title:i18n.global.t('sidebar.musicManagement'),
+            title: i18n.global.t('sidebar.musicManagement'),
-                    icon:'music'
+            icon: 'music',
-                }
+          },
-            }
+        },
-        ]
+      ],
     },
     {
       path: '/log-lottery/config/readme',
       name: 'Readme',
       component: () => import('@/views/Config/Readme/index.vue'),
-        meta:{
+      meta: {
-            title: i18n.global.t('sidebar.operatingInstructions')  ,
+        title: i18n.global.t('sidebar.operatingInstructions'),
-            icon: 'readme'
+        icon: 'readme',
-        }
       },
-    ]
+    },
-  }
+  ],
+}
 const routes = [
   {
     path: '/log-lottery',
@@ -123,18 +124,18 @@ const routes = [
         component: Home,
       },
       {
-        path:'/log-lottery/demo',
+        path: '/log-lottery/demo',
-        name:'Demo',
+        name: 'Demo',
-        component:()=>import('@/views/Demo/index.vue')
+        component: () => import('@/views/Demo/index.vue'),
       },
       configRoutes,
     ],
   },
-];
+]
 
 const router = createRouter({
   history: createWebHistory(),
   routes,
-});
+})
 
-export default router;
+export default router

src/store/globalConfig.ts

@@ -1,7 +1,7 @@
-import { defineStore } from 'pinia';
+import type { IImage, IMusic } from '@/types/storeType'
-import { defaultMusicList, defaultImageList, defaultPatternList } from './data'
+import i18n, { browserLanguage } from '@/locales/i18n'
-import { IMusic, IImage } from '@/types/storeType';
+import { defineStore } from 'pinia'
-import i18n,{browserLanguage} from '@/locales/i18n'
+import { defaultImageList, defaultMusicList, defaultPatternList } from './data'
 // import { IPrizeConfig } from '@/types/storeType';
 export const useGlobalConfig = defineStore('global', {
   state() {
@@ -10,7 +10,7 @@ export const useGlobalConfig = defineStore('global', {
         rowCount: 17,
         isSHowPrizeList: true,
         topTitle: i18n.global.t('data.defaultTitle'),
-                language:browserLanguage,
+        language: browserLanguage,
         theme: {
           name: 'dracula',
           detail: { primary: '#0f5fd3' },
@@ -30,141 +30,141 @@ export const useGlobalConfig = defineStore('global', {
         item: defaultMusicList[0],
         paused: true,
       },
-        };
+    }
   },
   getters: {
     // 获取全部配置
     getGlobalConfig(state) {
-            return state.globalConfig;
+      return state.globalConfig
     },
     // 获取标题
     getTopTitle(state) {
-            return state.globalConfig.topTitle;
+      return state.globalConfig.topTitle
     },
     // 获取行数
     getRowCount(state) {
-            return state.globalConfig.rowCount;
+      return state.globalConfig.rowCount
     },
     // 获取主题
     getTheme(state) {
-            return state.globalConfig.theme;
+      return state.globalConfig.theme
     },
     // 获取卡片颜色
     getCardColor(state) {
-            return state.globalConfig.theme.cardColor;
+      return state.globalConfig.theme.cardColor
     },
     // 获取中奖颜色
     getLuckyColor(state) {
-            return state.globalConfig.theme.luckyCardColor;
+      return state.globalConfig.theme.luckyCardColor
     },
     // 获取文字颜色
     getTextColor(state) {
-            return state.globalConfig.theme.textColor;
+      return state.globalConfig.theme.textColor
     },
     // 获取卡片宽高
     getCardSize(state) {
       return {
         width: state.globalConfig.theme.cardWidth,
-                height: state.globalConfig.theme.cardHeight
+        height: state.globalConfig.theme.cardHeight,
       }
     },
     // 获取文字大小
     getTextSize(state) {
-            return state.globalConfig.theme.textSize;
+      return state.globalConfig.theme.textSize
     },
     // 获取图案颜色
     getPatterColor(state) {
-            return state.globalConfig.theme.patternColor;
+      return state.globalConfig.theme.patternColor
     },
     // 获取图案列表
     getPatternList(state) {
-            return state.globalConfig.theme.patternList;
+      return state.globalConfig.theme.patternList
     },
     // 获取音乐列表
     getMusicList(state) {
-            return state.globalConfig.musicList;
+      return state.globalConfig.musicList
     },
     // 获取当前音乐
     getCurrentMusic(state) {
-            return state.currentMusic;
+      return state.currentMusic
     },
     // 获取图片列表
     getImageList(state) {
-            return state.globalConfig.imageList;
+      return state.globalConfig.imageList
     },
     // 获取是否显示奖品列表
     getIsShowPrizeList(state) {
-            return state.globalConfig.isSHowPrizeList;
+      return state.globalConfig.isSHowPrizeList
     },
     // 获取当前语言
     getLanguage(state) {
-            return state.globalConfig.language;
+      return state.globalConfig.language
-        }
+    },
   },
   actions: {
     // 设置rowCount
     setRowCount(rowCount: number) {
-            this.globalConfig.rowCount = rowCount;
+      this.globalConfig.rowCount = rowCount
     },
     // 设置标题
     setTopTitle(topTitle: string) {
-            this.globalConfig.topTitle = topTitle;
+      this.globalConfig.topTitle = topTitle
     },
     // 设置主题
     setTheme(theme: any) {
-            const { name, detail } = theme;
+      const { name, detail } = theme
-            this.globalConfig.theme.name = name;
+      this.globalConfig.theme.name = name
-            this.globalConfig.theme.detail = detail;
+      this.globalConfig.theme.detail = detail
     },
     // 设置卡片颜色
     setCardColor(cardColor: string) {
-            this.globalConfig.theme.cardColor = cardColor;
+      this.globalConfig.theme.cardColor = cardColor
     },
     // 设置中奖颜色
     setLuckyCardColor(luckyCardColor: string) {
-            this.globalConfig.theme.luckyCardColor = luckyCardColor;
+      this.globalConfig.theme.luckyCardColor = luckyCardColor
     },
     // 设置文字颜色
     setTextColor(textColor: string) {
-            this.globalConfig.theme.textColor = textColor;
+      this.globalConfig.theme.textColor = textColor
     },
     // 设置卡片宽高
     setCardSize(cardSize: { width: number, height: number }) {
-            this.globalConfig.theme.cardWidth = cardSize.width;
+      this.globalConfig.theme.cardWidth = cardSize.width
-            this.globalConfig.theme.cardHeight = cardSize.height;
+      this.globalConfig.theme.cardHeight = cardSize.height
     },
     // 设置文字大小
     setTextSize(textSize: number) {
-            this.globalConfig.theme.textSize = textSize;
+      this.globalConfig.theme.textSize = textSize
     },
     // 设置图案颜色
     setPatterColor(patterColor: string) {
-            this.globalConfig.theme.patternColor = patterColor;
+      this.globalConfig.theme.patternColor = patterColor
     },
     // 设置图案列表
     setPatternList(patternList: number[]) {
-            this.globalConfig.theme.patternList = patternList;
+      this.globalConfig.theme.patternList = patternList
     },
     // 重置图案列表
     resetPatternList() {
-            this.globalConfig.theme.patternList = defaultPatternList;
+      this.globalConfig.theme.patternList = defaultPatternList
     },
     // 添加音乐
     addMusic(music: IMusic) {
       // 验证音乐是否已存在，看name字段
       for (let i = 0; i < this.globalConfig.musicList.length; i++) {
         if (this.globalConfig.musicList[i].name === music.name) {
-                    return;
+          return
         }
       }
-            this.globalConfig.musicList.push(music);
+      this.globalConfig.musicList.push(music)
     },
     // 删除音乐
     removeMusic(musicId: string) {
       for (let i = 0; i < this.globalConfig.musicList.length; i++) {
         if (this.globalConfig.musicList[i].id === musicId) {
-                    this.globalConfig.musicList.splice(i, 1);
+          this.globalConfig.musicList.splice(i, 1)
-                    break;
+          break
         }
       }
     },
@@ -172,38 +172,38 @@ export const useGlobalConfig = defineStore('global', {
     setCurrentMusic(musicItem: IMusic, paused: boolean = true) {
       this.currentMusic = {
         item: musicItem,
-                paused: paused,
+        paused,
       }
     },
     // 重置音乐列表
     resetMusicList() {
-            this.globalConfig.musicList = defaultMusicList as IMusic[];
+      this.globalConfig.musicList = defaultMusicList as IMusic[]
     },
     // 清空音乐列表
     clearMusicList() {
-            this.globalConfig.musicList = [] as IMusic[];
+      this.globalConfig.musicList = [] as IMusic[]
     },
     // 添加图片
     addImage(image: IImage) {
       for (let i = 0; i < this.globalConfig.imageList.length; i++) {
         if (this.globalConfig.imageList[i].name === image.name) {
-                    return;
+          return
         }
       }
-            this.globalConfig.imageList.push(image);
+      this.globalConfig.imageList.push(image)
     },
     // 删除图片
     removeImage(imageId: string) {
       for (let i = 0; i < this.globalConfig.imageList.length; i++) {
         if (this.globalConfig.imageList[i].id === imageId) {
-                    this.globalConfig.imageList.splice(i, 1);
+          this.globalConfig.imageList.splice(i, 1)
-                    break;
+          break
         }
       }
     },
     // 重置图片列表
     resetImageList() {
-            this.globalConfig.imageList = defaultImageList as IImage[];
+      this.globalConfig.imageList = defaultImageList as IImage[]
     },
     // 清空图片列表
     clearImageList() {
@@ -211,12 +211,12 @@ export const useGlobalConfig = defineStore('global', {
     },
     // 设置是否显示奖品列表
     setIsShowPrizeList(isShowPrizeList: boolean) {
-            this.globalConfig.isSHowPrizeList = isShowPrizeList;
+      this.globalConfig.isSHowPrizeList = isShowPrizeList
     },
     // 设置
     setLanguage(language: string) {
-            this.globalConfig.language = language;
+      this.globalConfig.language = language
-            i18n.global.locale.value=language
+      i18n.global.locale.value = language
     },
     // 重置所有配置
     reset() {
@@ -239,12 +239,12 @@ export const useGlobalConfig = defineStore('global', {
         },
         musicList: defaultMusicList as IMusic[],
         imageList: defaultImageList as IImage[],
-            },
+      }
       this.currentMusic = {
         item: defaultMusicList[0],
         paused: true,
       }
-        }
+    },
   },
   persist: {
     enabled: true,

src/store/index.ts

@@ -1,12 +1,13 @@
-import {usePersonConfig} from './personConfig';
+import { useGlobalConfig } from './globalConfig'
-import { usePrizeConfig } from './prizeConfig';
+import { usePersonConfig } from './personConfig'
-import {useGlobalConfig} from './globalConfig';
+import { usePrizeConfig } from './prizeConfig'
-import {useSystem} from './system';
+import { useSystem } from './system'
+
 export default function useStore() {
   return {
-    personConfig:usePersonConfig(),
+    personConfig: usePersonConfig(),
-    prizeConfig:usePrizeConfig(),
+    prizeConfig: usePrizeConfig(),
-    globalConfig:useGlobalConfig(),
+    globalConfig: useGlobalConfig(),
-    system:useSystem(),
+    system: useSystem(),
-  };
+  }
 }

src/store/personConfig.ts

@@ -1,43 +1,44 @@
-import { defineStore } from 'pinia';
+import type { IPersonConfig, IPrizeConfig } from '@/types/storeType'
-import { IPersonConfig } from '@/types/storeType';
+
-import { IPrizeConfig } from '@/types/storeType';
-import { defaultPersonList } from './data'
-import { usePrizeConfig } from './prizeConfig';
 import dayjs from 'dayjs'
+import { defineStore } from 'pinia'
+import { defaultPersonList } from './data'
+import { usePrizeConfig } from './prizeConfig'
+
 export const usePersonConfig = defineStore('person', {
   state() {
     return {
       personConfig: {
         allPersonList: [] as IPersonConfig[],
         alreadyPersonList: [] as IPersonConfig[],
+      },
     }
-        };
   },
   getters: {
     // 获取全部配置
     getPersonConfig(state) {
-            return state.personConfig;
+      return state.personConfig
     },
     // 获取全部人员名单
     getAllPersonList(state) {
       return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
         return item
-            });
+      })
     },
     // 获取未获此奖的人员名单
     getNotThisPrizePersonList(state: any) {
-            const currentPrize = usePrizeConfig().prizeConfig.currentPrize;
+      const currentPrize = usePrizeConfig().prizeConfig.currentPrize
       const data = state.personConfig.allPersonList.filter((item: IPersonConfig) => {
-                return !item.prizeId.includes(currentPrize.id as string);
+        return !item.prizeId.includes(currentPrize.id as string)
-            });
+      })
 
       return data
     },
     // 获取已中奖人员名单
     getAlreadyPersonList(state) {
       return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
-                return item.isWin === true;
+        return item.isWin === true
-            });
+      })
     },
     // 获取中奖人员详情
     getAlreadyPersonDetail(state) {
@@ -46,8 +47,8 @@ export const usePersonConfig = defineStore('person', {
     // 获取未中奖人员名单
     getNotPersonList(state) {
       return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
-                return item.isWin === false;
+        return item.isWin === false
-            });
+      })
     },
   },
   actions: {
@@ -57,8 +58,8 @@ export const usePersonConfig = defineStore('person', {
         return
       }
       personList.forEach((item: IPersonConfig) => {
-                this.personConfig.allPersonList.push(item);
+        this.personConfig.allPersonList.push(item)
-            });
+      })
     },
     // 添加已中奖人员
     addAlreadyPersonList(personList: IPersonConfig[], prize: IPrizeConfig | null) {
@@ -78,13 +79,13 @@ export const usePersonConfig = defineStore('person', {
           }
 
           return item
-                });
+        })
-                this.personConfig.alreadyPersonList.push(person);
+        this.personConfig.alreadyPersonList.push(person)
-            });
+      })
     },
     // 从已中奖移动到未中奖
     moveAlreadyToNot(person: IPersonConfig) {
-            if (person.id == undefined || person.id == null) {
+      if (person.id === undefined || person.id == null) {
         return
       }
       const alreadyPersonListLength = this.personConfig.alreadyPersonList.length
@@ -100,42 +101,42 @@ export const usePersonConfig = defineStore('person', {
       }
       for (let i = 0; i < alreadyPersonListLength; i++) {
         this.personConfig.alreadyPersonList = this.personConfig.alreadyPersonList.filter((item: IPersonConfig) =>
-                    item.id !== person.id
+          item.id !== person.id,
         )
       }
     },
     // 删除指定人员
     deletePerson(person: IPersonConfig) {
-            if (person.id != undefined || person.id != null) {
+      if (person.id !== undefined || person.id != null) {
-                this.personConfig.allPersonList = this.personConfig.allPersonList.filter((item: IPersonConfig) => item.id !== person.id);
+        this.personConfig.allPersonList = this.personConfig.allPersonList.filter((item: IPersonConfig) => item.id !== person.id)
-                this.personConfig.alreadyPersonList = this.personConfig.alreadyPersonList.filter((item: IPersonConfig) => item.id !== person.id);
+        this.personConfig.alreadyPersonList = this.personConfig.alreadyPersonList.filter((item: IPersonConfig) => item.id !== person.id)
       }
     },
     // 删除所有人员
     deleteAllPerson() {
-            this.personConfig.allPersonList = [];
+      this.personConfig.allPersonList = []
-            this.personConfig.alreadyPersonList = [];
+      this.personConfig.alreadyPersonList = []
     },
 
     // 删除所有人员
     resetPerson() {
-            this.personConfig.allPersonList = [];
+      this.personConfig.allPersonList = []
-            this.personConfig.alreadyPersonList = [];
+      this.personConfig.alreadyPersonList = []
     },
     // 重置已中奖人员
     resetAlreadyPerson() {
       // 把已中奖人员合并到未中奖人员，要验证是否已存在
       this.personConfig.allPersonList.forEach((item: IPersonConfig) => {
-                item.isWin = false;
+        item.isWin = false
-                item.prizeName = [];
+        item.prizeName = []
-                item.prizeTime = [];
+        item.prizeTime = []
         item.prizeId = []
-            });
+      })
-            this.personConfig.alreadyPersonList = [];
+      this.personConfig.alreadyPersonList = []
     },
     setDefaultPersonList() {
-            this.personConfig.allPersonList = defaultPersonList;
+      this.personConfig.allPersonList = defaultPersonList
-            this.personConfig.alreadyPersonList = [];
+      this.personConfig.alreadyPersonList = []
     },
     // 重置所有配置
     reset() {
@@ -155,4 +156,4 @@ export const usePersonConfig = defineStore('person', {
       },
     ],
   },
-});
+})

src/store/prizeConfig.ts

@@ -1,6 +1,7 @@
-import { defineStore } from 'pinia';
+import type { IPrizeConfig } from '@/types/storeType'
-import { IPrizeConfig } from '@/types/storeType';
+import { defineStore } from 'pinia'
-import { defaultPrizeList, defaultCurrentPrize } from './data';
+import { defaultCurrentPrize, defaultPrizeList } from './data'
+
 export const usePrizeConfig = defineStore('prize', {
   state() {
     return {
@@ -17,66 +18,66 @@ export const usePrizeConfig = defineStore('prize', {
           picture: {
             id: '-1',
             name: '',
-                        url: ''
+            url: '',
           },
           separateCount: {
             enable: true,
-                        countList: []
+            countList: [],
           },
           desc: '',
           isShow: false,
           isUsed: false,
           frequency: 1,
-                } as IPrizeConfig
+        } as IPrizeConfig,
+      },
     }
-        };
   },
   getters: {
     // 获取全部配置
     getPrizeConfigAll(state) {
-            return state.prizeConfig;
+      return state.prizeConfig
     },
     // 获取奖品列表
     getPrizeConfig(state) {
-            return state.prizeConfig.prizeList;
+      return state.prizeConfig.prizeList
     },
     // 根据id获取配置
     getPrizeConfigById(state) {
       return (id: number | string) => {
-                return state.prizeConfig.prizeList.find(item => item.id === id);
+        return state.prizeConfig.prizeList.find(item => item.id === id)
       }
     },
     // 获取当前奖项
     getCurrentPrize(state) {
-            return state.prizeConfig.currentPrize;
+      return state.prizeConfig.currentPrize
     },
     // 获取临时的奖项
     getTemporaryPrize(state) {
-            return state.prizeConfig.temporaryPrize;
+      return state.prizeConfig.temporaryPrize
     },
 
   },
   actions: {
     // 设置奖项
     setPrizeConfig(prizeList: IPrizeConfig[]) {
-            this.prizeConfig.prizeList = prizeList;
+      this.prizeConfig.prizeList = prizeList
     },
     // 添加奖项
     addPrizeConfig(prizeConfigItem: IPrizeConfig) {
-            this.prizeConfig.prizeList.push(prizeConfigItem);
+      this.prizeConfig.prizeList.push(prizeConfigItem)
     },
     // 删除奖项
     deletePrizeConfig(prizeConfigItemId: number | string) {
-            this.prizeConfig.prizeList = this.prizeConfig.prizeList.filter(item => item.id !== prizeConfigItemId);
+      this.prizeConfig.prizeList = this.prizeConfig.prizeList.filter(item => item.id !== prizeConfigItemId)
     },
     // 更新奖项数据
     updatePrizeConfig(prizeConfigItem: IPrizeConfig) {
-            const prizeListLength = this.prizeConfig.prizeList.length;
+      const prizeListLength = this.prizeConfig.prizeList.length
       if (prizeConfigItem.isUsed && prizeListLength) {
         for (let i = 0; i < prizeListLength; i++) {
           if (!this.prizeConfig.prizeList[i].isUsed) {
-                        this.setCurrentPrize(this.prizeConfig.prizeList[i]);
+            this.setCurrentPrize(this.prizeConfig.prizeList[i])
-                        break;
+            break
           }
         }
       }
@@ -87,7 +88,7 @@ export const usePrizeConfig = defineStore('prize', {
     },
     // 删除全部奖项
     deleteAllPrizeConfig() {
-            this.prizeConfig.prizeList = [] as IPrizeConfig[];
+      this.prizeConfig.prizeList = [] as IPrizeConfig[]
     },
     // 设置当前奖项
     setCurrentPrize(prizeConfigItem: IPrizeConfig) {
@@ -95,10 +96,10 @@ export const usePrizeConfig = defineStore('prize', {
     },
     // 设置临时奖项
     setTemporaryPrize(prizeItem: IPrizeConfig) {
-            if (prizeItem.isShow == false) {
+      if (prizeItem.isShow === false) {
         for (let i = 0; i < this.prizeConfig.prizeList.length; i++) {
-                    if (this.prizeConfig.prizeList[i].isUsed == false) {
+          if (this.prizeConfig.prizeList[i].isUsed === false) {
-                        this.setCurrentPrize(this.prizeConfig.prizeList[i]);
+            this.setCurrentPrize(this.prizeConfig.prizeList[i])
 
             break
           }
@@ -122,17 +123,17 @@ export const usePrizeConfig = defineStore('prize', {
         picture: {
           id: '-1',
           name: '',
-                    url: ''
+          url: '',
         },
         separateCount: {
           enable: true,
-                    countList: []
+          countList: [],
         },
         desc: '',
         isShow: false,
         isUsed: false,
         frequency: 1,
-            } as IPrizeConfig;
+      } as IPrizeConfig
     },
     // 重置所有配置
     resetDefault() {
@@ -149,20 +150,20 @@ export const usePrizeConfig = defineStore('prize', {
           picture: {
             id: '-1',
             name: '',
-                        url: ''
+            url: '',
           },
           separateCount: {
             enable: true,
-                        countList: []
+            countList: [],
           },
           desc: '',
           isShow: false,
           isUsed: false,
           frequency: 1,
-                } as IPrizeConfig
+        } as IPrizeConfig,
-            }
       }
     },
+  },
   persist: {
     enabled: true,
     strategies: [
@@ -173,4 +174,4 @@ export const usePrizeConfig = defineStore('prize', {
       },
     ],
   },
-});
+})

src/store/system.ts

@@ -1,26 +1,26 @@
-import { defineStore } from 'pinia';
+import { defineStore } from 'pinia'
 // import { IPrizeConfig } from '@/types/storeType';
 export const useSystem = defineStore('system', {
   state() {
     return {
-            isMobile:false,
+      isMobile: false,
-            isChrome:true
+      isChrome: true,
-        };
+    }
   },
   getters: {
     getIsMobile(state) {
-            return state.isMobile;
+      return state.isMobile
     },
     getIsChrome(state) {
-            return state.isChrome;
+      return state.isChrome
     },
   },
   actions: {
     setIsMobile(isMobile: boolean) {
-            this.isMobile = isMobile;
+      this.isMobile = isMobile
     },
     setIsChrome(isChrome: boolean) {
-            this.isChrome = isChrome;
+      this.isChrome = isChrome
     },
   },
   persist: {

src/types/storeType.ts

@@ -1,52 +1,52 @@
 export interface IPersonConfig {
-    id: number;
+  id: number
-    uid: string;
+  uid: string
-    name: string;
+  name: string
-    department: string;
+  department: string
-    identity: string;
+  identity: string
-    isWin: boolean;
+  isWin: boolean
-    x: number;
+  x: number
   y: number
-    createTime: string;
+  createTime: string
-    updateTime: string;
+  updateTime: string
-    prizeName: string[];
+  prizeName: string[]
-    prizeId: string[];
+  prizeId: string[]
-    prizeTime: string[];
+  prizeTime: string[]
 }
-export type Separate = {
+export interface Separate {
-    id: string,
+  id: string
-    count: number,
+  count: number
-    isUsedCount: number,
+  isUsedCount: number
 }
 export interface IPrizeConfig {
-    id: number | string;
+  id: number | string
-    name: string;
+  name: string
-    sort: number;
+  sort: number
-    isAll: boolean;
+  isAll: boolean
-    count: number;
+  count: number
-    isUsedCount: number,
+  isUsedCount: number
   picture: {
-        id: string | number,
+    id: string | number
-        name: string,
+    name: string
     url: string
-    };
+  }
   separateCount: {
-        enable: boolean,
+    enable: boolean
-        countList: Separate[],
+    countList: Separate[]
-    };
+  }
-    desc: string;
+  desc: string
-    isShow: boolean;
+  isShow: boolean
-    isUsed: boolean,
+  isUsed: boolean
-    frequency: number;
+  frequency: number
 }
 export interface IMusic {
-    id: string,
+  id: string
-    name: string,
+  name: string
-    url: string,
+  url: string
 }
 
 export interface IImage {
-    id: string,
+  id: string
-    name: string,
+  name: string
-    url: string,
+  url: string
 }

src/utils/auth.ts

@@ -1,3 +1,3 @@
 export function getToken() {
-  return window.localStorage.getItem('userToken');
+  return window.localStorage.getItem('userToken')
 }

src/utils/color.ts

@@ -1,41 +1,41 @@
 // 判断颜色是否rgb或者rgba
 export function isRgbOrRgba(color: string) {
-  return color.indexOf('rgb') > -1 || color.indexOf('rgba') > -1;
+  return color.includes('rgb') || color.includes('rgba')
 }
 
 // 判断是否hex形式
 export function isHex(color: string) {
-  return color.indexOf('#') > -1;
+  return color.includes('#')
 }
 
 // 把hex颜色转成rgb数值类型
 export function hexToRgba(hex: string) {
-  const r = parseInt(hex.slice(1, 3), 16);
+  const r = Number.parseInt(hex.slice(1, 3), 16)
-  const g = parseInt(hex.slice(3, 5), 16);
+  const g = Number.parseInt(hex.slice(3, 5), 16)
-  const b = parseInt(hex.slice(5, 7), 16);
+  const b = Number.parseInt(hex.slice(5, 7), 16)
 
-return {r,g,b}
+  return { r, g, b }
 }
 // 把rgb数组转化成r g b 数值
 export function rgbToRgba(rgb: string) {
-    const rgbArr = rgb.split('(')[1].split(')')[0].split(',');
+  const rgbArr = rgb.split('(')[1].split(')')[0].split(',')
 
-return {r:rgbArr[0],g:rgbArr[1],b:rgbArr[2]}
+  return { r: rgbArr[0], g: rgbArr[1], b: rgbArr[2] }
 }
 
 // 组成rgb颜色添加透明度
 export function rgba(color: string, opacity: number) {
-     opacity = opacity || 1;
+  opacity = opacity || 1
-    let rgbaStr=''
+  let rgbaStr = ''
   // 判断是否是hex颜色
   if (isHex(color)) {
-       const {r,g,b} = hexToRgba(color);
+    const { r, g, b } = hexToRgba(color)
     rgbaStr = `rgba(${r},${g},${b},${opacity})`
   }
-    else{
+  else {
-      const {r,g,b} = rgbToRgba(color)
+    const { r, g, b } = rgbToRgba(color)
     rgbaStr = `rgba(${r},${g},${b},${opacity})`
   }
 
-return rgbaStr
+  return rgbaStr
 }

src/utils/file.ts

@@ -1,5 +1,5 @@
-export const readFileBinary = (file: any): Promise<any> => {
+export function readFileBinary(file: any): Promise<any> {
-    return new Promise(resolve => {
+  return new Promise((resolve) => {
     const reader = new FileReader()
     reader.readAsBinaryString(file)
     reader.onload = (ev: any) => {
@@ -8,12 +8,12 @@ export const readFileBinary = (file: any): Promise<any> => {
   })
 }
 
-export const readFileData = (file: any): Promise<{dataUrl:string,fileName:string}> => {
+export function readFileData(file: any): Promise<{ dataUrl: string, fileName: string }> {
-    return new Promise(resolve => {
+  return new Promise((resolve) => {
     const reader = new FileReader()
     reader.readAsDataURL(file)
     reader.onload = (ev: any) => {
-            resolve({dataUrl:ev.target.result,fileName:file.name})
+      resolve({ dataUrl: ev.target.result, fileName: file.name })
     }
   })
 }

src/utils/index.ts

@@ -1,38 +1,38 @@
-import dayjs from 'dayjs';
+import dayjs from 'dayjs'
 // 筛选人员数据
-export const filterData = (tableData: any[], localRowCount: number, startIndex = 0) => {
+export function filterData(tableData: any[], localRowCount: number) {
   const dataLength = tableData.length
-    let j = 0;
+  let j = 0
   for (let i = 0; i < dataLength; i++) {
     if (i % localRowCount === 0) {
-            j++;
+      j++
     }
-        tableData[i].x = i % localRowCount + 1;
+    tableData[i].x = i % localRowCount + 1
-        tableData[i].y = j;
+    tableData[i].y = j
-        tableData[i].id = i;
+    tableData[i].id = i
     // 是否中奖
   }
 
   return tableData
 }
 
-export const addOtherInfo = (personList: any[]) => {
+export function addOtherInfo(personList: any[]) {
-    const len = personList.length;
+  const len = personList.length
   for (let i = 0; i < len; i++) {
     personList[i].id = i
-        personList[i].createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
+    personList[i].createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
-        personList[i].updateTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
+    personList[i].updateTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
-        personList[i].prizeName = [] as string[];
+    personList[i].prizeName = [] as string[]
-        personList[i].prizeTime = [] as string[];
+    personList[i].prizeTime = [] as string[]
-        personList[i].prizeId = [];
+    personList[i].prizeId = []
     personList[i].isWin = false
   }
 
   return personList
 }
 
-export const selectCard = (cardIndexArr: number[], tableLength: number, personId: number): number => {
+export function selectCard(cardIndexArr: number[], tableLength: number, personId: number): number {
-    const cardIndex = Math.round(Math.random() * (tableLength - 1));
+  const cardIndex = Math.round(Math.random() * (tableLength - 1))
   if (cardIndexArr.includes(cardIndex)) {
     return selectCard(cardIndexArr, tableLength, personId)
   }

src/utils/store.ts

@@ -1,11 +1,10 @@
 // 提取有哪些字段
-export const extractFields = (data: any) => {
+export function extractFields(data: any) {
-  const item=data[0];
+  const item = data[0]
   // 排除id x y，其他都加入数组
-    const keys = Object.keys(item).filter(key => key!== 'id' && key!== 'x' && key!== 'y');
+  const keys = Object.keys(item).filter(key => key !== 'id' && key !== 'x' && key !== 'y')
-    if(keys.length>0){
+  if (keys.length > 0) {
     // 返回数组key value
-        return keys.map(key => ({label:key,value:true}));
+    return keys.map(key => ({ label: key, value: true }))
   }
-};
+}
-

src/views/Config/Global/FaceConfig.vue

@@ -1,27 +1,30 @@
 <script setup lang='ts'>
-import { ref, watch, onMounted } from 'vue'
+import i18n, { languageList } from '@/locales/i18n'
+
 import useStore from '@/store'
-import { storeToRefs } from 'pinia'
+import { isHex, isRgbOrRgba } from '@/utils/color'
-import { themeChange } from 'theme-change';
-import zod from 'zod';
 import daisyuiThemes from 'daisyui/src/theming/themes'
-import { ColorPicker } from 'vue3-colorpicker';
+import { storeToRefs } from 'pinia'
-import 'vue3-colorpicker/style.css';
+import { themeChange } from 'theme-change'
-import { isRgbOrRgba, isHex } from '@/utils/color'
+import { onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ColorPicker } from 'vue3-colorpicker'
+import zod from 'zod'
 import PatternSetting from './components/PatternSetting.vue'
-import {languageList} from '@/locales/i18n'
+import 'vue3-colorpicker/style.css'
-import i18n from '@/locales/i18n'
+
+const { t } = useI18n()
 const globalConfig = useStore().globalConfig
 const personConfig = useStore().personConfig
-const prizeConfig= useStore().prizeConfig
+const prizeConfig = useStore().prizeConfig
-const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList,getLanguage:userLanguage } = storeToRefs(globalConfig)
+const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList, getLanguage: userLanguage } = storeToRefs(globalConfig)
 const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
 const colorPickerRef = ref()
-const resetDataDialogRef=ref()
+const resetDataDialogRef = ref()
 interface ThemeDaType {
   [key: string]: any
 }
-const isRowCountChange = ref(0) //0未改变，1改变,2加载中
+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))
@@ -30,7 +33,7 @@ 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 languageValue = ref(structuredClone(userLanguage.value))
 const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
 const patternColorValue = ref(structuredClone(patternColor.value))
 const themeList = ref(Object.keys(daisyuiThemes))
@@ -48,20 +51,19 @@ const schema = zod.object({
     invalid_type_error: i18n.global.t('error.requireNumber'),
   })
     .min(1, i18n.global.t('error.minNumber1'))
-        .max(100, i18n.global.t('error.maxNumber100'))
+    .max(100, i18n.global.t('error.maxNumber100')),
   // 格式化
 
-
 })
 type ValidatePayload = zod.infer<typeof schema>
 const payload: ValidatePayload = {
   rowCount: formData.value.rowCount,
 }
-const parseSchema = (props: ValidatePayload) => {
+function parseSchema(props: ValidatePayload) {
   return schema.parseAsync(props)
 }
 
-const resetPersonLayout = () => {
+function resetPersonLayout() {
   isRowCountChange.value = 2
   setTimeout(() => {
     const alreadyLen = alreadyPersonList.value.length
@@ -80,17 +82,17 @@ const resetPersonLayout = () => {
   }, 1000)
 }
 
-const clearPattern = () => {
+function clearPattern() {
   globalConfig.setPatternList([] as number[])
 }
-const resetPattern = () => {
+function resetPattern() {
   globalConfig.resetPatternList()
 }
 
-const resetData=()=>{
+function resetData() {
-    globalConfig.reset();
+  globalConfig.reset()
-    personConfig.reset();
+  personConfig.reset()
-    prizeConfig.resetDefault();
+  prizeConfig.resetDefault()
   // 刷新页面
   window.location.reload()
 }
@@ -105,28 +107,27 @@ const resetData=()=>{
 
 watch(() => formData.value.rowCount, () => {
   payload.rowCount = formData.value.rowCount
-    parseSchema(payload).then(res => {
+  parseSchema(payload).then((res) => {
     if (res.rowCount) {
       isRowCountChange.value = 1
       globalConfig.setRowCount(res.rowCount)
     }
-    })
+  }).catch((err) => {
-        .catch(err => {
     formErr.value.rowCount = err.issues[0].message
   })
 })
+
 watch(topTitleValue, (val) => {
   globalConfig.setTopTitle(val)
-}),
+})
-
+watch(themeValue, (val: any) => {
-    watch(themeValue, (val: any) => {
   const selectedThemeDetail = daisyuiThemeList.value[val]
   globalConfig.setTheme({ name: val, detail: selectedThemeDetail })
   themeChange(val)
   if (selectedThemeDetail.primary && (isHex(selectedThemeDetail.primary) || isRgbOrRgba(selectedThemeDetail.primary))) {
     globalConfig.setCardColor(selectedThemeDetail.primary)
   }
-    }, { deep: true })
+}, { deep: true })
 
 watch(cardColorValue, (val: string) => {
   globalConfig.setCardColor(val)
@@ -141,13 +142,13 @@ watch(textColorValue, (val: string) => {
   globalConfig.setTextColor(val)
 }, { deep: true })
 
-watch(cardSizeValue, (val: { width: number; height: number; }) => {
+watch(cardSizeValue, (val: { width: number, height: number }) => {
   globalConfig.setCardSize(val)
-}, { deep: true }),
+}, { deep: true })
-    watch(isShowPrizeListValue, () => {
+watch(isShowPrizeListValue, () => {
   globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
-    })
+})
-watch(languageValue,(val:string)=>{
+watch(languageValue, (val: string) => {
   globalConfig.setLanguage(val)
 })
 onMounted(() => {
@@ -157,151 +158,172 @@ onMounted(() => {
 <template>
   <dialog id="my_modal_1" ref="resetDataDialogRef" class="border-none modal">
     <div class="modal-box">
-            <h3 class="text-lg font-bold">{{$t('dialog.titleTip')}}</h3>
+      <h3 class="text-lg font-bold">
-            <p class="py-4">{{ $t('dialog.dialogResetAllData') }}</p>
+        {{ t('dialog.titleTip') }}
+      </h3>
+      <p class="py-4">
+        {{ t('dialog.dialogResetAllData') }}
+      </p>
       <div class="modal-action">
         <form method="dialog" class="flex gap-3">
           <!-- if there is a button in form, it will close the modal -->
-                    <button class="btn" @click="resetDataDialogRef.close()">{{$t(`button.cancel`)}}</button>
+          <button class="btn" @click="resetDataDialogRef.close()">
-                    <button class="btn" @click="resetData">{{$t('button.confirm')}}</button>
+            {{ t(`button.cancel`) }}
+          </button>
+          <button class="btn" @click="resetData">
+            {{ t('button.confirm') }}
+          </button>
         </form>
       </div>
     </div>
   </dialog>
   <div>
-        <h2>{{$t('viewTitle.globalSetting')}}</h2>
+    <h2>{{ t('viewTitle.globalSetting') }}</h2>
     <div class="mb-8">
-            <button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">{{$t('button.resetAllData')}}</button>
+      <button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">
+        {{ t('button.resetAllData') }}
+      </button>
     </div>
     <label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
       <div class="">
         <div class="label">
-                    <span class="label-text">{{$t('table.title')}}</span>
+          <span class="label-text">{{ t('table.title') }}</span>
         </div>
-                <input type="text" v-model="topTitleValue" :placeholder="$t('placeHolder.enterTitle')"
+        <input
-                    class="w-full max-w-xs input input-bordered" />
+          v-model="topTitleValue" type="text" :placeholder="t('placeHolder.enterTitle')"
+          class="w-full max-w-xs input input-bordered"
+        >
       </div>
     </label>
     <label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
       <div class="">
         <div class="label">
-                    <span class="label-text">{{$t('table.columnNumber')}}</span>
+          <span class="label-text">{{ t('table.columnNumber') }}</span>
         </div>
-                <input type="number" v-model="formData.rowCount" placeholder="Type here"
+        <input
-                    class="w-full max-w-xs input input-bordered" />
+          v-model="formData.rowCount" type="number" placeholder="Type here"
+          class="w-full max-w-xs input input-bordered"
+        >
         <div class="help">
-                    <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
+          <span v-if="formErr.rowCount" class="text-sm text-red-400 help-text">
             {{ formErr.rowCount }}
           </span>
         </div>
       </div>
       <div>
-                <div class="tooltip" :data-tip="$t('tooltip.resetLayout')">
+        <div class="tooltip" :data-tip="t('tooltip.resetLayout')">
-                    <button class="mt-5 btn btn-info btn-sm" :disabled="isRowCountChange != 1" @click="resetPersonLayout">
+          <button class="mt-5 btn btn-info btn-sm" :disabled="isRowCountChange !== 1" @click="resetPersonLayout">
-                        <span>{{$t('button.setLayout')}}</span>
+            <span>{{ t('button.setLayout') }}</span>
-                        <span class="loading loading-ring loading-md" v-show="isRowCountChange == 2"></span>
+            <span v-show="isRowCountChange === 2" class="loading loading-ring loading-md" />
           </button>
         </div>
       </div>
     </label>
     <label class="w-full max-w-xs form-control">
       <div class="label">
-                <span class="label-text">{{$t('table.language')}}</span>
+        <span class="label-text">{{ t('table.language') }}</span>
       </div>
-            <select data-choose-theme class="w-full max-w-xs border-solid select border-1" v-model="languageValue">
+      <select v-model="languageValue" data-choose-theme class="w-full max-w-xs border-solid select border-1">
-                <option disabled selected>{{$t('table.language')}}</option>
+        <option disabled selected>{{ t('table.language') }}</option>
         <option v-for="item in languageList" :key="item.key" :value="item.key">{{ item.name }}</option>
       </select>
     </label>
     <label class="w-full max-w-xs form-control">
       <div class="label">
-                <span class="label-text">{{$t('table.theme')}}</span>
+        <span class="label-text">{{ t('table.theme') }}</span>
       </div>
-            <select data-choose-theme class="w-full max-w-xs border-solid select border-1" v-model="themeValue">
+      <select v-model="themeValue" data-choose-theme class="w-full max-w-xs border-solid select border-1">
-                <option disabled selected>{{$t('table.theme')}}</option>
+        <option disabled selected>{{ t('table.theme') }}</option>
         <option v-for="(item, index) in themeList" :key="index" :value="item">{{ item }}</option>
       </select>
     </label>
     <label class="w-full max-w-xs form-control">
       <div class="label">
-                <span class="label-text">{{$t('table.cardColor')}}</span>
+        <span class="label-text">{{ t('table.cardColor') }}</span>
       </div>
-            <ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue"></ColorPicker>
+      <ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue" />
     </label>
     <label class="w-full max-w-xs form-control">
       <div class="label">
-                <span class="label-text">{{$t('table.winnerColor')}}</span>
+        <span class="label-text">{{ t('table.winnerColor') }}</span>
       </div>
-            <ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue">
+      <ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
-            </ColorPicker>
     </label>
 
     <label class="w-full max-w-xs form-control">
       <div class="label">
-                <span class="label-text">{{$t('table.textColor')}}</span>
+        <span class="label-text">{{ t('table.textColor') }}</span>
       </div>
-            <ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue"></ColorPicker>
+      <ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue" />
     </label>
     <label class="flex flex-row w-full max-w-xs gap-10 mb-10 form-control">
       <div>
         <div class="label">
-                    <span class="label-text">{{$t('table.cardWidth')}}</span>
+          <span class="label-text">{{ t('table.cardWidth') }}</span>
         </div>
-                <input type="number" v-model="cardSizeValue.width" placeholder="Type here"
+        <input
-                    class="w-full max-w-xs input input-bordered" />
+          v-model="cardSizeValue.width" type="number" placeholder="Type here"
+          class="w-full max-w-xs input input-bordered"
+        >
       </div>
       <div>
         <div class="label">
-                    <span class="label-text">{{$t('table.cardHeight')}}</span>
+          <span class="label-text">{{ t('table.cardHeight') }}</span>
         </div>
-                <input type="number" v-model="cardSizeValue.height" placeholder="Type here"
+        <input
-                    class="w-full max-w-xs input input-bordered" />
+          v-model="cardSizeValue.height" type="number" placeholder="Type here"
+          class="w-full max-w-xs input input-bordered"
+        >
       </div>
     </label>
     <label class="w-full max-w-xs mb-10 form-control">
       <div class="label">
-                <span class="label-text">{{$t('table.textSize')}}</span>
+        <span class="label-text">{{ t('table.textSize') }}</span>
       </div>
-            <input type="number" v-model="textSizeValue" placeholder="Type here"
+      <input
-                class="w-full max-w-xs input input-bordered" />
+        v-model="textSizeValue" type="number" placeholder="Type here"
+        class="w-full max-w-xs input input-bordered"
+      >
     </label>
     <label class="w-full max-w-xs form-control">
       <div class="label">
-                <span class="label-text">{{$t('table.highlightColor')}}</span>
+        <span class="label-text">{{ t('table.highlightColor') }}</span>
       </div>
-            <ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue">
+      <ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue" />
-            </ColorPicker>
     </label>
     <label class="flex flex-row items-center w-full gap-24 mb-0 form-control">
       <div>
         <div class="label">
-                    <span class="label-text">{{$t('table.patternSetting')}}</span>
+          <span class="label-text">{{ t('table.patternSetting') }}</span>
         </div>
         <div class="h-auto">
-                    <PatternSetting :rowCount="rowCount" :cardColor="cardColor" :patternColor="patternColor"
+          <PatternSetting
-                        :patternList="patternList"></PatternSetting>
+            :row-count="rowCount" :card-color="cardColor" :pattern-color="patternColor"
+            :pattern-list="patternList"
+          />
         </div>
       </div>
     </label>
     <div class="flex w-full h-24 gap-3 m-0">
       <button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
-                <span>{{ $t('button.clearPattern') }}</span>
+        <span>{{ t('button.clearPattern') }}</span>
       </button>
-            <div class="tooltip" :data-tip="$t('tooltip.defaultLayout')">
+      <div class="tooltip" :data-tip="t('tooltip.defaultLayout')">
         <button class="mt-5 btn btn-info btn-sm" @click="resetPattern">
-                    <span>{{ $t('button.DefaultPattern') }}</span>
+          <span>{{ t('button.DefaultPattern') }}</span>
         </button>
       </div>
     </div>
 
     <label class="w-full max-w-xs mb-10 form-control">
       <div class="label">
-                <span class="label-text">{{$t('table.alwaysDisplay')}}</span>
+        <span class="label-text">{{ t('table.alwaysDisplay') }}</span>
       </div>
-            <input type="checkbox" :checked="isShowPrizeListValue" @change="isShowPrizeListValue = !isShowPrizeListValue"
+      <input
-                class="mt-2 border-solid checkbox checkbox-secondary border-1" />
+        type="checkbox" :checked="isShowPrizeListValue" class="mt-2 border-solid checkbox checkbox-secondary border-1"
+        @change="isShowPrizeListValue = !isShowPrizeListValue"
+      >
     </label>
-
   </div>
 </template>
 

src/views/Config/Global/ImageConfig.vue

@@ -1,29 +1,30 @@
 <script setup lang='ts'>
-import { ref, onMounted, watch } from 'vue'
+import type { IImage } from '@/types/storeType'
-import { IImage } from '@/types/storeType'
+import ImageSync from '@/components/ImageSync/index.vue'
+import useStore from '@/store'
 import { readFileData } from '@/utils/file'
 import localforage from 'localforage'
-import useStore from '@/store'
 import { storeToRefs } from 'pinia'
-import ImageSync from '@/components/ImageSync/index.vue'
+import { onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-
+const { t } = useI18n()
-const globalConfig= useStore().globalConfig
+const globalConfig = useStore().globalConfig
-const { getImageList:localImageList} = storeToRefs(globalConfig)
+const { getImageList: localImageList } = storeToRefs(globalConfig)
 const limitType = ref('image/*')
-const imgUploadToast = ref(0) //0是不显示，1是成功，2是失败,3是不是图片
+const imgUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
 const imageDbStore = localforage.createInstance({
-    name: 'imgStore'
+  name: 'imgStore',
 })
-const handleFileChange = async (e: Event) => {
+async function handleFileChange(e: Event) {
-    const isImage= /image*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
+  const isImage = /image*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
   if (!isImage) {
     imgUploadToast.value = 3
 
     return
   }
-    let { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
+  const { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
-    imageDbStore.setItem(new Date().getTime().toString() + '+' + fileName, dataUrl)
+  imageDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
     .then(() => {
       imgUploadToast.value = 1
       getImageDbStore()
@@ -33,21 +34,21 @@ const handleFileChange = async (e: Event) => {
     })
 }
 
-const getImageDbStore =async () => {
+async function getImageDbStore() {
-    const keys =await imageDbStore.keys()
+  const keys = await imageDbStore.keys()
-    if(keys.length>0){
+  if (keys.length > 0) {
     imageDbStore.iterate((value, key) => {
       globalConfig.addImage({
-                id:key,
+        id: key,
-                name:key,
+        name: key,
-                url:'Storage'
+        url: 'Storage',
       })
     })
   }
 }
 
-const removeImage=(item:IImage)=>{
+function removeImage(item: IImage) {
-    if(item.url=='Storage'){
+  if (item.url === 'Storage') {
     imageDbStore.removeItem(item.id).then(() => {
       globalConfig.removeImage(item.id)
     })
@@ -68,23 +69,25 @@ watch(() => imgUploadToast.value, (val) => {
 
 <template>
   <div class="toast toast-top toast-end">
-        <div class="alert alert-error" v-if="imgUploadToast == 2">
+    <div v-if="imgUploadToast === 2" class="alert alert-error">
-            <span>{{ $t('error.uploadFail') }}</span>
+      <span>{{ t('error.uploadFail') }}</span>
     </div>
-        <div class="alert alert-success" v-if="imgUploadToast == 1">
+    <div v-if="imgUploadToast === 1" class="alert alert-success">
-            <span>{{ $t('error.uploadSuccess') }}</span>
+      <span>{{ t('error.uploadSuccess') }}</span>
     </div>
-        <div class="alert alert-error" v-if="imgUploadToast == 3">
+    <div v-if="imgUploadToast === 3" class="alert alert-error">
-            <span>{{ $t('error.notImage') }}</span>
+      <span>{{ t('error.notImage') }}</span>
     </div>
   </div>
 
   <div>
     <div class="">
       <label for="explore">
-                <input type="file" class="" id="explore" style="display: none" @change="handleFileChange"
+        <input
-                    :accept="limitType" />
+          id="explore" type="file" class="" style="display: none" :accept="limitType"
-                <span class="btn btn-primary btn-sm">{{ $t('button.upload') }}</span>
+          @change="handleFileChange"
+        >
+        <span class="btn btn-primary btn-sm">{{ t('button.upload') }}</span>
       </label>
     </div>
     <ul class="p-0">
@@ -93,14 +96,18 @@ watch(() => imgUploadToast.value, (val) => {
           <div class="avatar h-14">
             <div class="w-12 h-12 mask mask-squircle hover:w-14 hover:h-14">
               <!-- <img v-if="item.url!=='Storage'" :src="item.url" alt="Avatar Tailwind CSS Component" /> -->
-                            <ImageSync :imgItem="item"></ImageSync>
+              <ImageSync :img-item="item" />
             </div>
           </div>
           <div class="w-64">
-                        <div class="overflow-hidden font-bold whitespace-nowrap text-ellipsis">{{ item.name}}</div>
+            <div class="overflow-hidden font-bold whitespace-nowrap text-ellipsis">
+              {{ item.name }}
+            </div>
           </div>
           <div>
-                        <button class="btn btn-error btn-xs" @click="removeImage(item)">{{ $t('button.upload') }}</button>
+            <button class="btn btn-error btn-xs" @click="removeImage(item)">
+              {{ t('button.upload') }}
+            </button>
           </div>
         </div>
       </li>

src/views/Config/Global/MusicConfig.vue

@@ -1,41 +1,43 @@
 <script setup lang='ts'>
-import { ref, onMounted } from 'vue'
+import type { IMusic } from '@/types/storeType'
-import {storeToRefs } from 'pinia'
+import useStore from '@/store'
-import { IMusic } from '@/types/storeType';
 import { readFileData } from '@/utils/file'
-import useStore from '@/store';
-
 import localforage from 'localforage'
+import { storeToRefs } from 'pinia'
 
-const audioUploadToast = ref(0) //0是不显示，1是成功，2是失败,3是不是图片
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const audioUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
 const audioDbStore = localforage.createInstance({
-    name: 'audioStore'
+  name: 'audioStore',
 })
 const globalConfig = useStore().globalConfig
 
-const { getMusicList: localMusicList } = storeToRefs(globalConfig);
+const { getMusicList: localMusicList } = storeToRefs(globalConfig)
 const limitType = ref('audio/*')
 const localMusicListValue = ref(localMusicList)
-const play = async (item: IMusic) => {
+async function play(item: IMusic) {
-    globalConfig.setCurrentMusic(item,false)
+  globalConfig.setCurrentMusic(item, false)
 }
 
-const deleteMusic = (item: IMusic) => {
+function deleteMusic(item: IMusic) {
   globalConfig.removeMusic(item.id)
   audioDbStore.removeItem(item.name)
   // setTimeout(()=>{
   //     localMusicListValue.value=localMusicList
   // },100)
 }
-const resetMusic = () => {
+function resetMusic() {
   globalConfig.resetMusicList()
   audioDbStore.clear()
 }
-const deleteAll = () => {
+function deleteAll() {
   globalConfig.clearMusicList()
   audioDbStore.clear()
 }
-const getMusicDbStore = async () => {
+async function getMusicDbStore() {
   const keys = await audioDbStore.keys()
   if (keys.length > 0) {
     audioDbStore.iterate((value: string, key: string) => {
@@ -47,15 +49,15 @@ const getMusicDbStore = async () => {
     })
   }
 }
-const handleFileChange = async (e: Event) => {
+async function handleFileChange(e: Event) {
   const isAudio = /audio*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
   if (!isAudio) {
     audioUploadToast.value = 3
 
     return
   }
-    let { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
+  const { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
-    audioDbStore.setItem(new Date().getTime().toString() + '+' + fileName, dataUrl)
+  audioDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
     .then(() => {
       audioUploadToast.value = 1
       getMusicDbStore()
@@ -65,7 +67,6 @@ const handleFileChange = async (e: Event) => {
     })
 }
 
-
 onMounted(() => {
   getMusicDbStore()
 })
@@ -74,13 +75,19 @@ onMounted(() => {
 <template>
   <div>
     <div class="flex gap-3">
-            <button class="btn btn-primary btn-sm" @click="resetMusic">{{ $t('button.reset') }}</button>
+      <button class="btn btn-primary btn-sm" @click="resetMusic">
+        {{ t('button.reset') }}
+      </button>
       <label for="explore">
-                <input type="file" class="" id="explore" style="display: none" @change="handleFileChange"
+        <input
-                    :accept="limitType" />
+          id="explore" type="file" class="" style="display: none" :accept="limitType"
-                <span class="btn btn-primary btn-sm">{{ $t('button.upload') }}</span>
+          @change="handleFileChange"
+        >
+        <span class="btn btn-primary btn-sm">{{ t('button.upload') }}</span>
       </label>
-            <button class="btn btn-error btn-sm" @click="deleteAll">{{ $t('button.allDelete') }}</button>
+      <button class="btn btn-error btn-sm" @click="deleteAll">
+        {{ t('button.allDelete') }}
+      </button>
     </div>
     <div>
       <ul class="p-0">
@@ -90,8 +97,12 @@ onMounted(() => {
               {{ item.name }}</span>
           </div>
           <div class="flex gap-3">
-                        <button class="btn btn-primary btn-xs" @click="play(item)">{{ $t('button.play') }}</button>
+            <button class="btn btn-primary btn-xs" @click="play(item)">
-                        <button class="btn btn-error btn-xs" @click="deleteMusic(item)">{{ $t('button.delete') }}</button>
+              {{ t('button.play') }}
+            </button>
+            <button class="btn btn-error btn-xs" @click="deleteMusic(item)">
+              {{ t('button.delete') }}
+            </button>
           </div>
         </li>
       </ul>

src/views/Config/Global/components/PatternSetting.vue

@@ -1,32 +1,34 @@
 <script setup lang='ts'>
-import {computed} from 'vue';
+import { computed } from 'vue'
-const props=defineProps({
+
-    rowCount:{
+const props = defineProps({
-        type:Number,
+  rowCount: {
-        default:17
+    type: Number,
+    default: 17,
   },
-    cardColor:{
+  cardColor: {
-        type:String,
+    type: String,
-        default:'#fff'
+    default: '#fff',
   },
-    patternColor:{
+  patternColor: {
-        type:String,
+    type: String,
-        default:'#000'
+    default: '#000',
+  },
+  patternList: {
+    type: Array,
+    default: () => [],
   },
-    patternList:{
-        type:Array,
-        default:()=>[]
-    }
 })
-const data=computed(()=>{
+const data = computed(() => {
   return props
 })
 
-const updatePatternList=(event:Event,item:number)=>{
+function updatePatternList(event: Event, item: number) {
-    if(data.value.patternList.includes(item)){
+  if (data.value.patternList.includes(item)) {
-        const index=data.value.patternList.indexOf(item)
+    const index = data.value.patternList.indexOf(item)
-        data.value.patternList.splice(index,1)
+    data.value.patternList.splice(index, 1)
-    }else{
+  }
+  else {
     data.value.patternList.push(item)
   }
   // emits
@@ -34,12 +36,11 @@ const updatePatternList=(event:Event,item:number)=>{
 </script>
 
 <template>
-<div class="w-full h-auto" >
+  <div class="w-full h-auto">
-    <ul class="pattern-list" :style="{gridTemplateColumns:'repeat('+data.rowCount+',1fr)'}">
+    <ul class="pattern-list" :style="{ gridTemplateColumns: `repeat(${data.rowCount},1fr)` }">
-        <li @click.stop="(event)=>updatePatternList(event,item)" class="w-5 h-5" v-for="item in data.rowCount*7" :key="item" :style="{backgroundColor:data.patternList.includes(item)?data.patternColor:data.cardColor}">
+      <li v-for="item in data.rowCount * 7" :key="item" class="w-5 h-5" :style="{ backgroundColor: data.patternList.includes(item) ? data.patternColor : data.cardColor }" @click.stop="(event) => updatePatternList(event, item)" />
-        </li>
     </ul>
-</div>
+  </div>
 </template>
 
 <style lang='scss' scoped>

src/views/Config/Person/PersonAll.vue

@@ -1,14 +1,17 @@
 <!-- eslint-disable vue/no-parsing-error -->
 <script setup lang='ts'>
-import { ref, onMounted } from 'vue';
+import type { IPersonConfig } from '@/types/storeType'
-import useStore from '@/store'
-import { IPersonConfig } from '@/types/storeType';
-import { storeToRefs } from 'pinia'
-import * as XLSX from 'xlsx'
-import { readFileBinary } from '@/utils/file'
-import { addOtherInfo } from '@/utils'
 import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
 import i18n from '@/locales/i18n'
+import useStore from '@/store'
+import { addOtherInfo } from '@/utils'
+import { readFileBinary } from '@/utils/file'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import * as XLSX from 'xlsx'
+
+const { t } = useI18n()
 const personConfig = useStore().personConfig
 const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
 const limitType = '.xlsx,.xls'
@@ -17,16 +20,16 @@ const limitType = '.xlsx,.xls'
 const resetDataDialog = ref()
 const delAllDataDialog = ref()
 
-const handleFileChange = async (e: Event) => {
+async function handleFileChange(e: Event) {
-    let dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
+  const dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
-    let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
+  const workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
-    let workSheet = workBook.Sheets[workBook.SheetNames[0]]
+  const workSheet = workBook.Sheets[workBook.SheetNames[0]]
   const excelData = XLSX.utils.sheet_to_json(workSheet)
-    const allData = addOtherInfo(excelData);
+  const allData = addOtherInfo(excelData)
   personConfig.resetPerson()
   personConfig.addNotPersonList(allData)
 }
-const exportData = () => {
+function exportData() {
   let data = JSON.parse(JSON.stringify(allPersonList.value))
   // 排除一些字段
   for (let i = 0; i < data.length; i++) {
@@ -39,7 +42,8 @@ const exportData = () => {
     // 修改字段名称
     if (data[i].isWin) {
       data[i].isWin = i18n.global.t('data.yes')
-        } else {
+    }
+    else {
       data[i].isWin = i18n.global.t('data.no')
     }
     // 格式化数组为
@@ -66,15 +70,15 @@ const exportData = () => {
   }
 }
 
-const resetData = () => {
+function resetData() {
   personConfig.resetAlreadyPerson()
 }
 
-const deleteAll = () => {
+function deleteAll() {
   personConfig.deleteAllPerson()
 }
 
-const delPersonItem = (row: IPersonConfig) => {
+function delPersonItem(row: IPersonConfig) {
   personConfig.deletePerson(row)
 }
 
@@ -100,7 +104,7 @@ const tableColumns = [
     props: 'isWin',
     formatValue(row: IPersonConfig) {
       return row.isWin ? i18n.global.t('data.yes') : i18n.global.t('data.no')
-        }
+    },
   },
   {
     label: i18n.global.t('data.operation'),
@@ -117,10 +121,10 @@ const tableColumns = [
         type: 'btn-error',
         onClick: (row: IPersonConfig) => {
           delPersonItem(row)
-                }
+        },
       },
 
-        ]
+    ],
   },
 ]
 onMounted(() => {
@@ -130,60 +134,85 @@ onMounted(() => {
 <template>
   <dialog id="my_modal_1" ref="resetDataDialog" class="border-none modal">
     <div class="modal-box">
-            <h3 class="text-lg font-bold">{{ $t('dialog.titleTip') }}</h3>
+      <h3 class="text-lg font-bold">
-            <p class="py-4">{{ $t('dialog.dialogResetWinner') }}</p>
+        {{ t('dialog.titleTip') }}
+      </h3>
+      <p class="py-4">
+        {{ t('dialog.dialogResetWinner') }}
+      </p>
       <div class="modal-action">
         <form method="dialog" class="flex gap-3">
           <!-- if there is a button in form, it will close the modal -->
-                    <button class="btn" @click="resetDataDialog.close()">{{ $t('button.cancel') }}</button>
+          <button class="btn" @click="resetDataDialog.close()">
-                    <button class="btn" @click="resetData">{{ $t('dialog.confirm') }}</button>
+            {{ t('button.cancel') }}
+          </button>
+          <button class="btn" @click="resetData">
+            {{ t('dialog.confirm') }}
+          </button>
         </form>
       </div>
     </div>
   </dialog>
   <dialog id="my_modal_1" ref="delAllDataDialog" class="border-none modal">
     <div class="modal-box">
-            <h3 class="text-lg font-bold">{{ $t('dialog.titleTip') }}</h3>
+      <h3 class="text-lg font-bold">
-            <p class="py-4">{{ $t('dialog.dialogDelAllPerson') }}</p>
+        {{ t('dialog.titleTip') }}
+      </h3>
+      <p class="py-4">
+        {{ t('dialog.dialogDelAllPerson') }}
+      </p>
       <div class="modal-action">
         <form method="dialog" class="flex gap-3">
           <!-- if there is a button in form, it will close the modal -->
-                    <button class="btn" @click="delAllDataDialog.close()">{{ $t('button.cancel') }}</button>
+          <button class="btn" @click="delAllDataDialog.close()">
-                    <button class="btn" @click="deleteAll">{{ $t('button.confirm') }}</button>
+            {{ t('button.cancel') }}
+          </button>
+          <button class="btn" @click="deleteAll">
+            {{ t('button.confirm') }}
+          </button>
         </form>
       </div>
     </div>
   </dialog>
   <div class="min-w-1000px">
-
+    <h2>{{ t('viewTitle.personManagement') }}</h2>
-        <h2>{{ $t('viewTitle.personManagement') }}</h2>
     <div class="flex gap-3">
-            <button class="btn btn-error btn-sm" @click="delAllDataDialog.showModal()">{{ $t('button.allDelete') }}</button>
+      <button class="btn btn-error btn-sm" @click="delAllDataDialog.showModal()">
-            <div class="tooltip tooltip-bottom" :data-tip="$t('tooltip.downloadTemplateTip')">
+        {{ t('button.allDelete') }}
-                <a class="no-underline btn btn-secondary btn-sm" :download="$t('data.xlsxName')" target="_blank"
+      </button>
-                    :href="'/log-lottery/'+$t('data.xlsxName')">{{ $t('button.downloadTemplate') }}</a>
+      <div class="tooltip tooltip-bottom" :data-tip="t('tooltip.downloadTemplateTip')">
+        <a
+          class="no-underline btn btn-secondary btn-sm" :download="t('data.xlsxName')" target="_blank"
+          :href="`/log-lottery/${t('data.xlsxName')}`"
+        >{{ t('button.downloadTemplate') }}</a>
       </div>
       <div class="">
         <label for="explore">
 
-                    <div class="tooltip tooltip-bottom" :data-tip="$t('tooltip.uploadExcelTip')">
+          <div class="tooltip tooltip-bottom" :data-tip="t('tooltip.uploadExcelTip')">
-                        <input type="file" class="" id="explore" style="display: none" @change="handleFileChange"
+            <input
-                            :accept="limitType" />
+              id="explore" type="file" class="" style="display: none" :accept="limitType"
+              @change="handleFileChange"
+            >
 
-                        <span class="btn btn-primary btn-sm">{{ $t('button.importData') }}</span>
+            <span class="btn btn-primary btn-sm">{{ t('button.importData') }}</span>
           </div>
         </label>
       </div>
-            <button class="btn btn-error btn-sm" @click="resetDataDialog.showModal()">{{ $t('button.resetData') }}</button>
+      <button class="btn btn-error btn-sm" @click="resetDataDialog.showModal()">
-            <button class="btn btn-accent btn-sm" @click="exportData">{{ $t('button.exportResult') }}</button>
+        {{ t('button.resetData') }}
+      </button>
+      <button class="btn btn-accent btn-sm" @click="exportData">
+        {{ t('button.exportResult') }}
+      </button>
       <div>
-                <span>{{$t('table.luckyPeopleNumber')}}:</span>
+        <span>{{ t('table.luckyPeopleNumber') }}:</span>
         <span>{{ alreadyPersonList.length }}</span>
         <span>&nbsp;/&nbsp;</span>
         <span>{{ allPersonList.length }}</span>
       </div>
     </div>
-        <DaiysuiTable :tableColumns="tableColumns" :data="allPersonList"></DaiysuiTable>
+    <DaiysuiTable :table-columns="tableColumns" :data="allPersonList" />
   </div>
 </template>
 

src/views/Config/Person/PersonAlready.vue

@@ -1,11 +1,14 @@
 <!-- eslint-disable vue/no-parsing-error -->
 <script setup lang='ts'>
-import { ref } from 'vue';
+import type { IPersonConfig } from '@/types/storeType'
-import useStore from '@/store'
-import { IPersonConfig } from '@/types/storeType';
-import { storeToRefs } from 'pinia';
 import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
 import i18n from '@/locales/i18n'
+import useStore from '@/store'
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 const personConfig = useStore().personConfig
 
 const { getAlreadyPersonList: alreadyPersonList, getAlreadyPersonDetail: alreadyPersonDetail } = storeToRefs(personConfig)
@@ -13,13 +16,12 @@ const { getAlreadyPersonList: alreadyPersonList, getAlreadyPersonDetail: already
 //     alreadyPersonList
 // )
 
-
 // const deleteAll = () => {
 //     personConfig.deleteAllPerson()
 // }
 
 const isDetail = ref(false)
-const handleMoveNotPerson = (row: IPersonConfig) => {
+function handleMoveNotPerson(row: IPersonConfig) {
   personConfig.moveAlreadyToNot(row)
 }
 
@@ -27,7 +29,7 @@ const tableColumnsList = [
   {
     label: i18n.global.t('data.number'),
     props: 'uid',
-        sort: true
+    sort: true,
   },
   {
     label: i18n.global.t('data.number'),
@@ -44,7 +46,7 @@ const tableColumnsList = [
   {
     label: i18n.global.t('data.prizeName'),
     props: 'prizeName',
-        sort: true
+    sort: true,
   },
   {
     label: i18n.global.t('data.operation'),
@@ -54,16 +56,16 @@ const tableColumnsList = [
         type: 'btn-info',
         onClick: (row: IPersonConfig) => {
           handleMoveNotPerson(row)
-                }
         },
-        ]
+      },
+    ],
   },
 ]
 const tableColumnsDetail = [
   {
     label: i18n.global.t('data.number'),
     props: 'uid',
-        sort: true
+    sort: true,
   },
   {
     label: i18n.global.t('data.number'),
@@ -80,7 +82,7 @@ const tableColumnsDetail = [
   {
     label: i18n.global.t('data.prizeName'),
     props: 'prizeName',
-        sort: true
+    sort: true,
   },
   {
     label: i18n.global.t('data.prizeTime'),
@@ -95,35 +97,34 @@ const tableColumnsDetail = [
         type: 'btn-info',
         onClick: (row: IPersonConfig) => {
           handleMoveNotPerson(row)
-                }
+        },
       },
 
-        ]
+    ],
   },
 ]
 </script>
 
 <template>
   <div class="overflow-y-auto">
-        
+    <h2>{{ t('viewTitle.winnerManagement') }}</h2>
-        <h2>{{ $t('viewTitle.winnerManagement') }}</h2>
     <div class="flex items-center justify-start gap-10">
       <div>
-                <span>{{$t('table.luckyPeopleNumber')}}：</span>
+        <span>{{ t('table.luckyPeopleNumber') }}：</span>
         <span>{{ alreadyPersonList.length }}</span>
       </div>
       <div class="flex flex-col">
         <div class="form-control">
           <label class="cursor-pointer label">
-                        <span class="label-text">{{$t('table.detail')}}:</span>
+            <span class="label-text">{{ t('table.detail') }}:</span>
-                        <input type="checkbox" class="border-solid toggle toggle-primary border-1" v-model="isDetail" />
+            <input v-model="isDetail" type="checkbox" class="border-solid toggle toggle-primary border-1">
           </label>
         </div>
       </div>
     </div>
-        <DaiysuiTable v-if="!isDetail" :tableColumns="tableColumnsList" :data="alreadyPersonList"></DaiysuiTable>
+    <DaiysuiTable v-if="!isDetail" :table-columns="tableColumnsList" :data="alreadyPersonList" />
 
-        <DaiysuiTable v-if="isDetail" :tableColumns="tableColumnsDetail" :data="alreadyPersonDetail"></DaiysuiTable>
+    <DaiysuiTable v-if="isDetail" :table-columns="tableColumnsDetail" :data="alreadyPersonDetail" />
   </div>
 </template>
 

src/views/Config/Person/PersonConfig.vue

@@ -1,11 +1,9 @@
 <script setup lang='ts'>
 
-
 </script>
 
 <template>
-    <router-view></router-view>
+  <router-view />
-
 </template>
 
 <style lang='scss' scoped>

src/views/Config/Prize/PrizeConfig.vue

@@ -1,13 +1,16 @@
 <script setup lang='ts'>
-import { ref, onMounted, watch } from 'vue'
+import type { IPrizeConfig } from '@/types/storeType'
-import useStore from '@/store'
-import { IPrizeConfig } from '@/types/storeType'
-import { storeToRefs } from 'pinia'
-import localforage from 'localforage'
 import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
 import i18n from '@/locales/i18n'
+import useStore from '@/store'
+import localforage from 'localforage'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 const imageDbStore = localforage.createInstance({
-    name: 'imgStore'
+  name: 'imgStore',
 })
 const prizeConfig = useStore().prizeConfig
 const globalConfig = useStore().globalConfig
@@ -19,7 +22,7 @@ const imgList = ref<any[]>([])
 
 const selectedPrize = ref<IPrizeConfig | null>()
 
-const addPrize = () => {
+function addPrize() {
   const defaultPrizeCOnfig: IPrizeConfig = {
     id: new Date().getTime().toString(),
     name: i18n.global.t('data.prizeName'),
@@ -30,11 +33,11 @@ const addPrize = () => {
     picture: {
       id: '',
       name: '',
-            url: ''
+      url: '',
     },
     separateCount: {
       enable: false,
-            countList: []
+      countList: [],
     },
     desc: '',
     isUsed: false,
@@ -44,7 +47,7 @@ const addPrize = () => {
   prizeConfig.addPrizeConfig(defaultPrizeCOnfig)
 }
 
-const selectPrize = (item: IPrizeConfig) => {
+function selectPrize(item: IPrizeConfig) {
   selectedPrize.value = item
   selectedPrize.value.isUsedCount = 0
   selectedPrize.value.isUsed = false
@@ -59,12 +62,12 @@ const selectPrize = (item: IPrizeConfig) => {
         id: '0',
         count: item.count,
         isUsedCount: 0,
-            }
+      },
-        ]
+    ],
   }
 }
 
-const changePrizeStatus = (item: IPrizeConfig) => {
+function changePrizeStatus(item: IPrizeConfig) {
   // if (item.isUsed == true) {
   //     item.isUsedCount = 0;
   //     if (item.separateCount && item.separateCount.countList.length) {
@@ -81,58 +84,59 @@ const changePrizeStatus = (item: IPrizeConfig) => {
   //         })
   //     }
   // }
-    item.isUsed?item.isUsedCount=0:item.isUsedCount=item.count;
+  item.isUsed ? item.isUsedCount = 0 : item.isUsedCount = item.count
   item.separateCount.countList = []
   item.isUsed = !item.isUsed
 }
 
-const changePrizePerson = (item: IPrizeConfig) => {
+function changePrizePerson(item: IPrizeConfig) {
-    let indexPrize = -1;
+  let indexPrize = -1
   for (let i = 0; i < prizeList.value.length; i++) {
-        if (prizeList.value[i].id == item.id) {
+    if (prizeList.value[i].id === item.id) {
-            indexPrize = i;
+      indexPrize = i
-            break;
+      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
+    prizeList.value[indexPrize].isUsed ? prizeList.value[indexPrize].isUsedCount = prizeList.value[indexPrize].count : prizeList.value[indexPrize].isUsedCount = 0
   }
 }
-const submitData = (value: any) => {
+function submitData(value: any) {
-    selectedPrize.value!.separateCount.countList = value;
+  selectedPrize.value!.separateCount.countList = value
   selectedPrize.value = null
 }
-const resetDefault = () => {
+function resetDefault() {
   prizeConfig.resetDefault()
 }
 
-const getImageDbStore = async () => {
+async function getImageDbStore() {
   const keys = await imageDbStore.keys()
   if (keys.length > 0) {
     imageDbStore.iterate((value, key) => {
       imgList.value.push({
         key,
-                value
+        value,
       })
     })
   }
 }
 
-const sort = (item: IPrizeConfig, isUp: number) => {
+function sort(item: IPrizeConfig, isUp: number) {
   const itemIndex = prizeList.value.indexOf(item)
-    if (isUp == 1) {
+  if (isUp === 1) {
     prizeList.value.splice(itemIndex, 1)
     prizeList.value.splice(itemIndex - 1, 0, item)
-    } else {
+  }
+  else {
     prizeList.value.splice(itemIndex, 1)
     prizeList.value.splice(itemIndex + 1, 0, item)
   }
 }
-const delItem = (item: IPrizeConfig) => {
+function delItem(item: IPrizeConfig) {
   prizeConfig.deletePrizeConfig(item.id)
 }
-const delAll = async () => {
+async function delAll() {
   await prizeConfig.deleteAllPrizeConfig()
 }
 onMounted(() => {
@@ -141,113 +145,142 @@ onMounted(() => {
 watch(() => prizeList.value, (val: IPrizeConfig[]) => {
   prizeConfig.setPrizeConfig(val)
 }, { deep: true })
-
-
 </script>
 
 <template>
   <div>
-        <h2>{{ $t('viewTitle.prizeManagement') }}</h2>
+    <h2>{{ t('viewTitle.prizeManagement') }}</h2>
     <div class="flex w-full gap-3">
-            <button class="btn btn-info btn-sm" @click="addPrize">{{$t('button.add')}}</button>
+      <button class="btn btn-info btn-sm" @click="addPrize">
-            <button class="btn btn-info btn-sm" @click="resetDefault">{{$t('button.resetDefault')}}</button>
+        {{ t('button.add') }}
-            <button class="btn btn-error btn-sm" @click="delAll">{{$t('button.allDelete')}}</button>
+      </button>
-
+      <button class="btn btn-info btn-sm" @click="resetDefault">
+        {{ t('button.resetDefault') }}
+      </button>
+      <button class="btn btn-error btn-sm" @click="delAll">
+        {{ t('button.allDelete') }}
+      </button>
     </div>
     <div role="alert" class="w-full my-4 alert alert-info">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 stroke-current shrink-0">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        <path
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
       </svg>
-            <span>{{$t('dialog.tipResetPrize')}}</span>
+      <span>{{ t('dialog.tipResetPrize') }}</span>
     </div>
     <ul class="p-0 m-0">
-            <li v-for="item in prizeList" :key="item.id" class="flex gap-10"
+      <li
-                :class="currentPrize.id == item.id ? 'border-1 border-dotted rounded-xl' : null">
+        v-for="item in prizeList" :key="item.id" class="flex gap-10"
+        :class="currentPrize.id === item.id ? 'border-1 border-dotted rounded-xl' : null"
+      >
         <label class="max-w-xs mb-10 form-control">
           <!-- 向上向下 -->
           <div class="flex flex-col items-center gap-2 pt-5">
-                        <svg-icon class="cursor-pointer hover:text-blue-400"
+            <svg-icon
-                            :class="prizeList.indexOf(item) == 0 ? 'opacity-0 cursor-default' : ''" name="up"
+              class="cursor-pointer hover:text-blue-400"
-                            @click="sort(item, 1)"></svg-icon>
+              :class="prizeList.indexOf(item) === 0 ? 'opacity-0 cursor-default' : ''" name="up"
-                        <svg-icon class="cursor-pointer hover:text-blue-400" name="down" @click="sort(item, 0)"
+              @click="sort(item, 1)"
-                            :class="prizeList.indexOf(item) == prizeList.length - 1 ? 'opacity-0 cursor-default' : ''"></svg-icon>
+            />
+            <svg-icon
+              class="cursor-pointer hover:text-blue-400" name="down" :class="prizeList.indexOf(item) === prizeList.length - 1 ? 'opacity-0 cursor-default' : ''"
+              @click="sort(item, 0)"
+            />
           </div>
         </label>
         <label class="w-1/2 max-w-xs mb-10 form-control">
           <div class="label">
-                        <span class="label-text">{{ $t('table.prizeName') }}</span>
+            <span class="label-text">{{ t('table.prizeName') }}</span>
           </div>
-                    <input type="text" v-model="item.name" :placeholder="$t('placeHolder.name')"
+          <input
-                        class="w-full max-w-xs input-sm input input-bordered" />
+            v-model="item.name" type="text" :placeholder="t('placeHolder.name')"
+            class="w-full max-w-xs input-sm input input-bordered"
+          >
         </label>
         <label class="w-1/2 max-w-xs mb-10 form-control">
           <div class="label">
-                        <span class="label-text">{{ $t('table.fullParticipation') }}</span>
+            <span class="label-text">{{ t('table.fullParticipation') }}</span>
           </div>
-                    <input type="checkbox" :checked="item.isAll" @change="item.isAll = !item.isAll"
+          <input
-                        class="mt-2 border-solid checkbox checkbox-secondary border-1" />
+            type="checkbox" :checked="item.isAll" class="mt-2 border-solid checkbox checkbox-secondary border-1"
+            @change="item.isAll = !item.isAll"
+          >
         </label>
         <label class="w-1/2 max-w-xs mb-10 form-control">
           <div class="label">
-                        <span class="label-text">{{ $t('table.numberParticipants') }}</span>
+            <span class="label-text">{{ t('table.numberParticipants') }}</span>
           </div>
-                    <input type="number" v-model="item.count" :placeholder="$t('placeHolder.winnerCount')" @change="changePrizePerson(item)"
+          <input
-                        class="w-full max-w-xs p-0 m-0 input-sm input input-bordered" />
+            v-model="item.count" type="number" :placeholder="t('placeHolder.winnerCount')" class="w-full max-w-xs p-0 m-0 input-sm input input-bordered"
-                    <div class="tooltip tooltip-bottom" :data-tip="$t('table.isDone') + item.isUsedCount + '/' + item.count">
+            @change="changePrizePerson(item)"
-                        <progress class="w-full progress" :value="item.isUsedCount" :max="item.count"></progress>
+          >
+          <div class="tooltip tooltip-bottom" :data-tip="`${t('table.isDone') + item.isUsedCount}/${item.count}`">
+            <progress class="w-full progress" :value="item.isUsedCount" :max="item.count" />
           </div>
         </label>
         <label class="w-1/2 max-w-xs mb-10 form-control">
           <div class="label">
-                        <span class="label-text">{{ $t('table.isDone') }}</span>
+            <span class="label-text">{{ t('table.isDone') }}</span>
           </div>
-                    <input type="checkbox" :checked="item.isUsed" @change="changePrizeStatus(item)"
+          <input
-                        class="mt-2 border-solid checkbox checkbox-secondary border-1" />
+            type="checkbox" :checked="item.isUsed" class="mt-2 border-solid checkbox checkbox-secondary border-1"
+            @change="changePrizeStatus(item)"
+          >
         </label>
         <label class="w-full max-w-xs mb-10 form-control">
           <div class="label">
-                        <span class="label-text">{{ $t('table.image') }}</span>
+            <span class="label-text">{{ t('table.image') }}</span>
           </div>
-                    <select class="w-full max-w-xs select select-warning select-sm" v-model="item.picture">
+          <select v-model="item.picture" class="w-full max-w-xs select select-warning select-sm">
             <option v-if="item.picture.id" :value="{ id: '', name: '', url: '' }"><span>❌</span></option>
-                        <option disabled selected>{{ $t('table.selectPicture') }}</option>
+            <option disabled selected>{{ t('table.selectPicture') }}</option>
             <option v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{ picItem.name }}
             </option>
           </select>
         </label>
-                <label class="w-full max-w-xs mb-10 form-control" v-if="item.separateCount">
+        <label v-if="item.separateCount" class="w-full max-w-xs mb-10 form-control">
           <div class="label">
-                        <span class="label-text">{{ $t('table.onceNumber') }}</span>
+            <span class="label-text">{{ t('table.onceNumber') }}</span>
           </div>
           <div class="flex justify-start w-full h-full" @click="selectPrize(item)">
-                        <ul class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
+            <ul
-                            v-if="item.separateCount.countList.length">
+              v-if="item.separateCount.countList.length"
-                            <li class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
+              class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
-                                v-for="se in item.separateCount.countList" :key="se.id">
+            >
-                                <div class="flex items-center justify-center w-full h-full tooltip"
+              <li
-                                    :data-tip="$t('tooltip.doneCount') + se.isUsedCount + '/' + se.count">
+                v-for="se in item.separateCount.countList"
-                                    <div class="absolute left-0 z-50 h-full bg-blue-300/80"
+                :key="se.id" class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
-                                        :style="`width:${se.isUsedCount * 100 / se.count}%`"></div>
+              >
+                <div
+                  class="flex items-center justify-center w-full h-full tooltip"
+                  :data-tip="`${t('tooltip.doneCount') + se.isUsedCount}/${se.count}`"
+                >
+                  <div
+                    class="absolute left-0 z-50 h-full bg-blue-300/80"
+                    :style="`width:${se.isUsedCount * 100 / se.count}%`"
+                  />
                   <span>{{ se.count }}</span>
                 </div>
               </li>
             </ul>
-                        <button v-else class="btn btn-secondary btn-xs">{{ $t('button.setting') }}</button>
+            <button v-else class="btn btn-secondary btn-xs">{{ t('button.setting') }}</button>
           </div>
         </label>
         <label class="w-full max-w-xs mb-10 form-control">
           <div class="label">
-                        <span class="label-text">{{ $t('table.operation') }}</span>
+            <span class="label-text">{{ t('table.operation') }}</span>
           </div>
           <div class="flex gap-2">
-                        <button class="btn btn-error btn-sm" @click="delItem(item)">{{ $t('button.delete') }}</button>
+            <button class="btn btn-error btn-sm" @click="delItem(item)">{{ t('button.delete') }}</button>
           </div>
         </label>
       </li>
     </ul>
-        <EditSeparateDialog :totalNumber="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
+    <EditSeparateDialog
-            @submitData="submitData" />
+      :total-number="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
+      @submit-data="submitData"
+    />
   </div>
 </template>
 

src/views/Config/Readme/index.vue

@@ -1,13 +1,14 @@
 <script setup lang='ts'>
-import {ref,onMounted} from 'vue'
-import markdownit from 'markdown-it'
 import i18n from '@/locales/i18n'
+import markdownit from 'markdown-it'
+import { onMounted, ref } from 'vue'
+
 const md = markdownit()
-const readmeHtml=ref('')
+const readmeHtml = ref('')
-const readMd=()=>{
+function readMd() {
-    fetch('/log-lottery/'+i18n.global.t('data.readmeName'))
+  fetch(`/log-lottery/${i18n.global.t('data.readmeName')}`)
-    .then(res=>res.text())
+    .then(res => res.text())
-    .then(res=>{
+    .then((res) => {
       readmeHtml.value = md.render(res)
     })
 }
@@ -18,9 +19,9 @@ onMounted(() => {
 </script>
 
 <template>
-<div class="w-3/4 mb-10 ml-3">
+  <div class="w-3/4 mb-10 ml-3">
-    <div class="markdown-body" v-dompurify-html="readmeHtml"></div>
+    <div v-dompurify-html="readmeHtml" class="markdown-body" />
-</div>
+  </div>
 </template>
 
 <style scoped>

src/views/Config/index.vue

@@ -1,88 +1,94 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from 'vue'
-import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n'
-import { configRoutes } from '../../router';
+import { useRoute, useRouter } from 'vue-router'
+import { configRoutes } from '../../router'
 
-
+const { t } = useI18n()
-const router = useRouter();
+const router = useRouter()
-const route = useRoute();
+const route = useRoute()
 const menuList = ref<any[]>(configRoutes.children)
 
-const cleanMenuList = (menu: any) => {
+function cleanMenuList(menu: any) {
-    const newList = menu;
+  const newList = menu
   for (let i = 0; i < newList.length; i++) {
     if (newList[i].children) {
-            cleanMenuList(newList[i].children);
+      cleanMenuList(newList[i].children)
     }
     if (!newList[i].meta) {
-            newList.splice(i, 1);
+      newList.splice(i, 1)
-            i--;
+      i--
     }
   }
 
-    return newList;
+  return newList
 }
 
-menuList.value = cleanMenuList(menuList.value);
+menuList.value = cleanMenuList(menuList.value)
 
-const skip = (path: string) => {
+function skip(path: string) {
-    router.push(path);
+  router.push(path)
 }
-
-
 </script>
 
 <template>
   <div class="flex min-h-[calc(100%-280px)]">
     <ul class="w-56 m-0 mr-3 menu bg-base-200 pt-14">
       <li v-for="item in menuList" :key="item.name">
-                <details open v-if="item.children">
+        <details v-if="item.children" open>
           <summary>{{ item.meta.title }}</summary>
           <ul>
             <li v-for="subItem in item.children" :key="subItem.name">
-                            <details open v-if="subItem.children">
+              <details v-if="subItem.children" open>
                 <summary>{{ subItem.meta!.title }}</summary>
                 <ul>
                   <li v-for="subSubItem in subItem.children" :key="subSubItem.name">
-                                        <a @click="skip(subItem.path)"
+                    <a
-                                            :style="subSubItem.name == route.name ? 'background-color:rgba(12,12,12,0.2)' : ''">{{
+                      :style="subSubItem.name === route.name ? 'background-color:rgba(12,12,12,0.2)' : ''"
+                      @click="skip(subItem.path)"
+                    >{{
                       subSubItem.meta!.title }}</a>
                   </li>
                 </ul>
               </details>
-                            <a v-else @click="skip(subItem.path)"
+              <a
-                                :style="subItem.name == route.name ? 'background-color:rgba(12,12,12,0.2)' : ''">{{
+                v-else :style="subItem.name === route.name ? 'background-color:rgba(12,12,12,0.2)' : ''"
+                @click="skip(subItem.path)"
+              >{{
                 subItem.meta!.title }}</a>
             </li>
           </ul>
         </details>
-                <a v-else @click="skip(item.path)"
+        <a
-                    :style="item.name == route.name ? 'background-color:rgba(12,12,12,0.2)' : ''">{{ item.meta!.title }}</a>
+          v-else :style="item.name === route.name ? 'background-color:rgba(12,12,12,0.2)' : ''"
+          @click="skip(item.path)"
+        >{{ item.meta!.title }}</a>
       </li>
     </ul>
-        <router-view class="mt-5"></router-view>
+    <router-view class="mt-5" />
   </div>
   <footer class="p-10 rounded footer footer-center bg-base-200 text-base-content">
     <nav class="grid grid-flow-col gap-4">
-            <a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">{{ $t('footer.self-reflection') }}</a>
+      <a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">{{ t('footer.self-reflection') }}</a>
     </nav>
     <nav>
-            <a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">{{ $t('footer.thiefEasy') }}</a>
+      <a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">{{ t('footer.thiefEasy') }}</a>
     </nav>
     <nav>
       <div class="grid grid-flow-col gap-4">
         <a href="https://github.com/LOG1997/log-lottery" target="_blank" class="cursor-pointer text-inherit">
-                    <svg-icon name="github"></svg-icon>
+          <svg-icon name="github" />
         </a>
-                <a href="https://twitter.com/TaborSwift" target="_blank" class="cursor-pointer "><svg-icon name="twitter"></svg-icon></a>
+        <a href="https://twitter.com/TaborSwift" target="_blank" class="cursor-pointer "><svg-icon name="twitter" /></a>
         <a href="https://www.instagram.com/log.z1997/" target="_blank" class="cursor-pointer ">
-                    <svg-icon name="instagram"></svg-icon>
+          <svg-icon name="instagram" />
         </a>
       </div>
     </nav>
     <aside>
-
+      <p class="p-0 m-0">
-            <p class="p-0 m-0">蜀ICP备2021028666号</p>
+        蜀ICP备2021028666号
+      </p>
       <p>Copyright © 2024 - All right reserved by Log1997</p>
     </aside>
   </footer>

src/views/Demo/index.vue

@@ -2,9 +2,11 @@
 </script>
 
 <template>
-<div>
+  <div>
-    <button class="btn btn-error">打印</button>
+    <button class="btn btn-error">
-</div>
+      打印
+    </button>
+  </div>
 </template>
 
 <style lang='scss' scoped>

src/views/Home/PrizeList.vue

@@ -1,15 +1,18 @@
 <script setup lang='ts'>
-import { ref, onMounted } from 'vue'
+import type { IPrizeConfig } from '../../types/storeType'
-import { storeToRefs } from 'pinia'
-import useStore from '@/store'
-
-import ImageSync from '@/components/ImageSync/index.vue'
 import defaultPrizeImage from '@/assets/images/龙.png'
-import { IPrizeConfig } from '../../types/storeType';
+import ImageSync from '@/components/ImageSync/index.vue'
 
 import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
-
 import i18n from '@/locales/i18n'
+import useStore from '@/store'
+
+import { storeToRefs } from 'pinia'
+
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 const prizeConfig = useStore().prizeConfig
 const globalConfig = useStore().globalConfig
 const system = useStore().system
@@ -22,8 +25,8 @@ const prizeListContainerRef = ref()
 const temporaryPrizeRef = ref()
 const selectedPrize = ref<IPrizeConfig | null>()
 // 获取prizeListRef高度
-const getPrizeListHeight = () => {
+function getPrizeListHeight() {
-    let height = 200;
+  let height = 200
   if (prizeListRef.value) {
     height = (prizeListRef.value as HTMLElement).offsetHeight
   }
@@ -32,25 +35,25 @@ const getPrizeListHeight = () => {
 }
 const prizeShow = ref(structuredClone(isShowPrizeList.value))
 
-const addTemporaryPrize = () => {
+function addTemporaryPrize() {
   temporaryPrizeRef.value.showModal()
 }
 
-const deleteTemporaryPrize = () => {
+function deleteTemporaryPrize() {
   temporaryPrize.value.isShow = false
   prizeConfig.setTemporaryPrize(temporaryPrize.value)
 }
-const submitTemporaryPrize = () => {
+function submitTemporaryPrize() {
   if (!temporaryPrize.value.name || !temporaryPrize.value.count) {
+    // eslint-disable-next-line no-alert
     alert(i18n.global.t('error.completeInformation'))
-
     return
   }
   temporaryPrize.value.isShow = true
-    temporaryPrize.value.id=new Date().getTime().toString()
+  temporaryPrize.value.id = new Date().getTime().toString()
   prizeConfig.setCurrentPrize(temporaryPrize.value)
 }
-const selectPrize = (item: IPrizeConfig) => {
+function selectPrize(item: IPrizeConfig) {
   selectedPrize.value = item
   selectedPrize.value.isUsedCount = 0
   selectedPrize.value.isUsed = false
@@ -65,28 +68,28 @@ const selectPrize = (item: IPrizeConfig) => {
         id: '0',
         count: item.count,
         isUsedCount: 0,
-            }
+      },
-        ]
+    ],
   }
 }
-const submitData = (value: any) => {
+function submitData(value: any) {
-    selectedPrize.value!.separateCount.countList = value;
+  selectedPrize.value!.separateCount.countList = value
   selectedPrize.value = null
 }
-const changePersonCount=()=>{
+function changePersonCount() {
-    temporaryPrize.value.separateCount.countList=[]
+  temporaryPrize.value.separateCount.countList = []
 }
-const setCurrentPrize=()=>{
+function setCurrentPrize() {
-for(let i=0;i<localPrizeList.value.length;i++){
+  for (let i = 0; i < localPrizeList.value.length; i++) {
-    if(localPrizeList.value[i].isUsedCount<localPrizeList.value[i].count){
+    if (localPrizeList.value[i].isUsedCount < localPrizeList.value[i].count) {
       prizeConfig.setCurrentPrize(localPrizeList.value[i])
 
-return
+      return
+    }
   }
 }
-}
 onMounted(() => {
-    prizeListContainerRef.value.style.height = getPrizeListHeight() + 'px'
+  prizeListContainerRef.value.style.height = `${getPrizeListHeight()}px`
   setCurrentPrize()
 })
 </script>
@@ -95,66 +98,84 @@ onMounted(() => {
   <div class="flex items-center">
     <dialog id="my_modal_1" ref="temporaryPrizeRef" class="border-none modal">
       <div class="modal-box">
-                <h3 class="text-lg font-bold">{{$t('dialog.titleTemporary')}}</h3>
+        <h3 class="text-lg font-bold">
+          {{ t('dialog.titleTemporary') }}
+        </h3>
         <div class="flex flex-col gap-3">
           <label class="flex w-full max-w-xs">
             <div class="label">
-                            <span class="label-text">{{$t('table.name')}}:</span>
+              <span class="label-text">{{ t('table.name') }}:</span>
             </div>
-                        <input type="text" v-model="temporaryPrize.name" :placeholder="$t('placeHolder.name')"
+            <input
-                            class="max-w-xs input-sm input input-bordered" />
+              v-model="temporaryPrize.name" type="text" :placeholder="t('placeHolder.name')"
+              class="max-w-xs input-sm input input-bordered"
+            >
           </label>
           <label class="flex w-full max-w-xs">
             <div class="label">
-                            <span class="label-text">{{$t('table.fullParticipation')}}</span>
+              <span class="label-text">{{ t('table.fullParticipation') }}</span>
             </div>
-                        <input type="checkbox" :checked="temporaryPrize.isAll"
+            <input
+              type="checkbox" :checked="temporaryPrize.isAll"
+              class="mt-2 border-solid checkbox checkbox-secondary border-1"
               @change="temporaryPrize.isAll = !temporaryPrize.isAll"
-                            class="mt-2 border-solid checkbox checkbox-secondary border-1" />
+            >
           </label>
           <label class="flex w-full max-w-xs">
             <div class="label">
-                            <span class="label-text">{{$t('table.setLuckyNumber')}}</span>
+              <span class="label-text">{{ t('table.setLuckyNumber') }}</span>
             </div>
-                        <input type="number" v-model="temporaryPrize.count" @change="changePersonCount" :placeholder="$t('placeHolder.winnerCount')"
+            <input
-                            class="max-w-xs input-sm input input-bordered" />
+              v-model="temporaryPrize.count" type="number" :placeholder="t('placeHolder.winnerCount')" class="max-w-xs input-sm input input-bordered"
+              @change="changePersonCount"
+            >
           </label>
           <label class="flex w-full max-w-xs">
             <div class="label">
-                            <span class="label-text">{{$t('table.luckyPeopleNumber')}}</span>
+              <span class="label-text">{{ t('table.luckyPeopleNumber') }}</span>
             </div>
-                        <input disabled type="number" v-model="temporaryPrize.isUsedCount" :placeholder="$t('placeHolder.winnerCount')"
+            <input
-                            class="max-w-xs input-sm input input-bordered" />
+              v-model="temporaryPrize.isUsedCount" disabled type="number" :placeholder="t('placeHolder.winnerCount')"
+              class="max-w-xs input-sm input input-bordered"
+            >
           </label>
-                    <label class="flex w-full max-w-xs" v-if="temporaryPrize.separateCount">
+          <label v-if="temporaryPrize.separateCount" class="flex w-full max-w-xs">
             <div class="label">
-                        <span class="label-text">{{$t('table.onceNumber ')}}</span>
+              <span class="label-text">{{ t('table.onceNumber') }}</span>
             </div>
             <div class="flex justify-start h-full" @click="selectPrize(temporaryPrize)">
-                        <ul class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
+              <ul
-                            v-if="temporaryPrize.separateCount.countList.length">
+                v-if="temporaryPrize.separateCount.countList.length"
-                            <li class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
+                class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
-                                v-for="se in temporaryPrize.separateCount.countList" :key="se.id">
+              >
-                                <div class="flex items-center justify-center w-full h-full tooltip"
+                <li
-                                    :data-tip="$t('tooltip.doneCount') + se.isUsedCount + '/' + se.count">
+                  v-for="se in temporaryPrize.separateCount.countList"
-                                    <div class="absolute left-0 z-50 h-full bg-blue-300/80"
+                  :key="se.id" class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
-                                        :style="`width:${se.isUsedCount * 100 / se.count}%`"></div>
+                >
+                  <div
+                    class="flex items-center justify-center w-full h-full tooltip"
+                    :data-tip="`${t('tooltip.doneCount') + se.isUsedCount}/${se.count}`"
+                  >
+                    <div
+                      class="absolute left-0 z-50 h-full bg-blue-300/80"
+                      :style="`width:${se.isUsedCount * 100 / se.count}%`"
+                    />
                     <span>{{ se.count }}</span>
                   </div>
                 </li>
               </ul>
-                        <button v-else class="btn btn-secondary btn-xs">{{$t('button.setting')}}</button>
+              <button v-else class="btn btn-secondary btn-xs">{{ t('button.setting') }}</button>
             </div>
           </label>
           <label class="flex w-full max-w-xs">
             <div class="label">
-                            <span class="label-text">{{$t('table.image')}}</span>
+              <span class="label-text">{{ t('table.image') }}</span>
             </div>
-                        <select class="flex-1 w-12 select select-warning select-sm" v-model="temporaryPrize.picture">
+            <select v-model="temporaryPrize.picture" class="flex-1 w-12 select select-warning select-sm">
               <option v-if="temporaryPrize.picture.id" :value="{ id: '', name: '', url: '' }"><span>❌</span>
               </option>
-                            <option disabled selected>{{$t('table.selectPicture')}}</option>
+              <option disabled selected>{{ t('table.selectPicture') }}</option>
-                            <option class="w-auto" v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{
+              <option v-for="picItem in localImageList" :key="picItem.id" class="w-auto" :value="picItem">{{
                 picItem.name }}
               </option>
             </select>
@@ -162,89 +183,120 @@ onMounted(() => {
         </div>
         <div class="modal-action">
           <form method="dialog" class="flex gap-3">
-                        <button class="btn btn-sm" @click="submitTemporaryPrize">{{ $t('button.confirm') }}</button>
+            <button class="btn btn-sm" @click="submitTemporaryPrize">
-                        <button class="btn btn-sm">{{ $t('button.cancel') }}</button>
+              {{ t('button.confirm') }}
+            </button>
+            <button class="btn btn-sm">
+              {{ t('button.cancel') }}
+            </button>
           </form>
         </div>
       </div>
     </dialog>
-        <EditSeparateDialog :totalNumber="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
+    <EditSeparateDialog
-            @submitData="submitData" />
+      :total-number="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
+      @submit-data="submitData"
+    />
     <div ref="prizeListContainerRef">
-            <div class="h-20 w-72" :class="temporaryPrize.isShow ? 'current-prize' : ''" v-if="temporaryPrize.isShow">
+      <div v-if="temporaryPrize.isShow" class="h-20 w-72" :class="temporaryPrize.isShow ? 'current-prize' : ''">
         <div class="relative flex flex-row items-center justify-between w-full h-full shadow-xl card bg-base-100">
-                    <div v-if="temporaryPrize.isUsed"
+          <div
-                        class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"></div>
+            v-if="temporaryPrize.isUsed"
+            class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"
+          />
           <figure class="w-10 h-10 rounded-xl">
-                        <ImageSync v-if="temporaryPrize.picture.url" :imgItem="temporaryPrize.picture"></ImageSync>
+            <ImageSync v-if="temporaryPrize.picture.url" :img-item="temporaryPrize.picture" />
-                        <img v-else :src="defaultPrizeImage" alt="Prize" class="object-cover h-full rounded-xl" />
+            <img v-else :src="defaultPrizeImage" alt="Prize" class="object-cover h-full rounded-xl">
           </figure>
           <div class="items-center p-0 text-center card-body">
             <div class="tooltip tooltip-left" :data-tip="temporaryPrize.name">
-                            <h2 class="p-0 m-0 overflow-hidden w-28 card-title whitespace-nowrap text-ellipsis">{{
+              <h2 class="p-0 m-0 overflow-hidden w-28 card-title whitespace-nowrap text-ellipsis">
-                                temporaryPrize.name }}</h2>
+                {{
+                  temporaryPrize.name }}
+              </h2>
             </div>
-                        <p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">{{ temporaryPrize.isUsedCount }}/{{
+            <p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">
-                            temporaryPrize.count }}</p>
+              {{ temporaryPrize.isUsedCount }}/{{
-                        <progress class="w-3/4 h-6 progress progress-primary" :value="temporaryPrize.isUsedCount"
+                temporaryPrize.count }}
-                            :max="temporaryPrize.count"></progress>
+            </p>
+            <progress
+              class="w-3/4 h-6 progress progress-primary" :value="temporaryPrize.isUsedCount"
+              :max="temporaryPrize.count"
+            />
             <!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
           </div>
           <div class="flex flex-col gap-1 mr-2">
-                        <div class="tooltip tooltip-left" :data-tip="$t('tooltip.edit')">
+            <div class="tooltip tooltip-left" :data-tip="t('tooltip.edit')">
               <div class="cursor-pointer hover:text-blue-400" @click="addTemporaryPrize">
-                                <svg-icon name="edit"></svg-icon>
+                <svg-icon name="edit" />
               </div>
             </div>
-                        <div class="tooltip tooltip-left" :data-tip="$t('tooltip.delete')">
+            <div class="tooltip tooltip-left" :data-tip="t('tooltip.delete')">
               <div class="cursor-pointer hover:text-blue-400" @click="deleteTemporaryPrize">
-                                <svg-icon name="delete"></svg-icon>
+                <svg-icon name="delete" />
               </div>
             </div>
           </div>
-
         </div>
       </div>
       <transition name="prize-list" :appear="true">
         <div v-if="prizeShow && !isMobile && !temporaryPrize.isShow" class="flex items-center">
-                    <ul class="flex flex-col gap-1 p-2 rounded-xl bg-slate-500/50" ref="prizeListRef">
+          <ul ref="prizeListRef" class="flex flex-col gap-1 p-2 rounded-xl bg-slate-500/50">
-                        <li v-for="item in localPrizeList" :key="item.id"
+            <li
-                            :class="currentPrize.id == item.id ? 'current-prize' : ''">
+              v-for="item in localPrizeList" :key="item.id"
-                            <div class="relative flex flex-row items-center justify-between w-64 h-20 shadow-xl card bg-base-100"
+              :class="currentPrize.id === item.id ? 'current-prize' : ''"
-                                v-if="item.isShow">
+            >
-                                <div v-if="item.isUsed"
+              <div
-                                    class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"></div>
+                v-if="item.isShow"
+                class="relative flex flex-row items-center justify-between w-64 h-20 shadow-xl card bg-base-100"
+              >
+                <div
+                  v-if="item.isUsed"
+                  class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"
+                />
                 <figure class="w-10 h-10 rounded-xl">
-                                    <ImageSync v-if="item.picture.url" :imgItem="item.picture"></ImageSync>
+                  <ImageSync v-if="item.picture.url" :img-item="item.picture" />
-                                    <img v-else :src="defaultPrizeImage" alt="Prize"
+                  <img
-                                        class="object-cover h-full rounded-xl" />
+                    v-else :src="defaultPrizeImage" alt="Prize"
+                    class="object-cover h-full rounded-xl"
+                  >
                 </figure>
                 <div class="items-center p-0 text-center card-body">
                   <div class="tooltip tooltip-left" :data-tip="item.name">
                     <h2
-                                            class="w-24 p-0 m-0 overflow-hidden text-center card-title whitespace-nowrap text-ellipsis">
+                      class="w-24 p-0 m-0 overflow-hidden text-center card-title whitespace-nowrap text-ellipsis"
-                                            {{ item.name }}</h2>
+                    >
+                      {{ item.name }}
+                    </h2>
                   </div>
-                                    <p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">{{ item.isUsedCount }}/{{
+                  <p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">
-                                        item.count }}</p>
+                    {{ item.isUsedCount }}/{{
-                                    <progress class="w-3/4 h-6 progress progress-primary" :value="item.isUsedCount"
+                      item.count }}
-                                        :max="item.count"></progress>
+                  </p>
+                  <progress
+                    class="w-3/4 h-6 progress progress-primary" :value="item.isUsedCount"
+                    :max="item.count"
+                  />
                   <!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
                 </div>
               </div>
             </li>
           </ul>
           <div class="flex flex-col gap-3">
-                        <div class="tooltip tooltip-right" :data-tip="$t('tooltip.prizeList')">
+            <div class="tooltip tooltip-right" :data-tip="t('tooltip.prizeList')">
-                            <div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
+              <div
-                                @click="prizeShow = !prizeShow">
+                class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
-                                <svg-icon name="arrow_left" class="w-full h-full"></svg-icon>
+                @click="prizeShow = !prizeShow"
+              >
+                <svg-icon name="arrow_left" class="w-full h-full" />
               </div>
             </div>
-                        <div class="tooltip tooltip-right" :data-tip="$t('tooltip.addActivity')">
+            <div class="tooltip tooltip-right" :data-tip="t('tooltip.addActivity')">
-                            <div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
+              <div
-                                @click="addTemporaryPrize">
+                class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
-                                <svg-icon name="add" class="w-full h-full"></svg-icon>
+                @click="addTemporaryPrize"
+              >
+                <svg-icon name="add" class="w-full h-full" />
               </div>
             </div>
           </div>
@@ -253,10 +305,12 @@ onMounted(() => {
     </div>
 
     <transition name="prize-operate" :appear="true">
-            <div class="tooltip tooltip-right" :data-tip="$t('tooltip.prizeList')" v-show="!prizeShow">
+      <div v-show="!prizeShow" class="tooltip tooltip-right" :data-tip="t('tooltip.prizeList')">
-                <div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
+        <div
-                    @click="prizeShow = !prizeShow">
+          class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
-                    <svg-icon name="arrow_right" class="w-full h-full"></svg-icon>
+          @click="prizeShow = !prizeShow"
+        >
+          <svg-icon name="arrow_right" class="w-full h-full" />
         </div>
       </div>
     </transition>
@@ -312,7 +366,6 @@ onMounted(() => {
     translate: 0% 0%;
 }
 
-
 .current-prize::after {
     content: "";
     position: absolute;
@@ -402,4 +455,5 @@ onMounted(() => {
     100% {
         opacity: 1;
     }
-}</style>
+}
+</style>

src/views/Home/index.vue

@@ -1,30 +1,26 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, } from 'vue'
+import type { IPersonConfig } from '@/types/storeType'
-import PrizeList from './PrizeList.vue'
-import { useElementStyle, useElementPosition } from '@/hooks/useElement'
 import StarsBackground from '@/components/StarsBackground/index.vue'
-import confetti from 'canvas-confetti'
+import { useElementPosition, useElementStyle } from '@/hooks/useElement'
-import { filterData, selectCard } from '@/utils'
 import i18n from '@/locales/i18n'
-import { rgba } from '@/utils/color'
-import { IPersonConfig } from '@/types/storeType'
-// import * as THREE from 'three'
-import { Scene, PerspectiveCamera, Object3D, Vector3 } from 'three'
-// import {
-//     CSS3DRenderer, CSS3DObject
-// } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
-import { CSS3DRenderer, CSS3DObject } from 'three-css3d'
-import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
-// import TrackballControls from 'three-trackballcontrols';
-// import TWEEN from 'three/examples/jsm/libs/tween.module.js';
-import * as TWEEN from '@tweenjs/tween.js'
 import useStore from '@/store'
+import { filterData, selectCard } from '@/utils'
+import { rgba } from '@/utils/color'
+import * as TWEEN from '@tweenjs/tween.js'
+import confetti from 'canvas-confetti'
 import { storeToRefs } from 'pinia'
+import { Object3D, PerspectiveCamera, Scene, Vector3 } from 'three'
+import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
+import { CSS3DObject, CSS3DRenderer } from 'three-css3d'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import { useToast } from 'vue-toast-notification';
+import { useToast } from 'vue-toast-notification'
-import 'vue-toast-notification/dist/theme-sugar.css';
+import PrizeList from './PrizeList.vue'
+import 'vue-toast-notification/dist/theme-sugar.css'
 
-const toast = useToast();
+const { t } = useI18n()
+const toast = useToast()
 const router = useRouter()
 const personConfig = useStore().personConfig
 const globalConfig = useStore().globalConfig
@@ -34,11 +30,9 @@ const { getAllPersonList: allPersonList, getNotPersonList: notPersonList, getNot
 const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
 const { getTopTitle: topTitle, getCardColor: cardColor, getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = storeToRefs(globalConfig)
 const tableData = ref<any[]>([])
-// const tableData = ref<any[]>(JSON.parse(JSON.stringify(alreadyPersonList.value)).concat(JSON.parse(JSON.stringify(notPersonList.value))))
 const currentStatus = ref(0) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
 const ballRotationY = ref(0)
 const containerRef = ref<HTMLElement>()
-// const LuckyViewRef= ref()
 const canOperate = ref(true)
 const cameraZ = ref(3000)
 
@@ -47,188 +41,189 @@ const camera = ref()
 const renderer = ref()
 const controls = ref()
 const objects = ref<any[]>([])
-
+interface TargetType {
-const targets = {
+  grid: any[]
-    grid: <any[]>[],
+  helix: any[]
-    helix: <any[]>[],
+  table: any[]
-    table: <any[]>[],
+  sphere: any[]
-    sphere: <any[]>[]
+}
-};
+const targets: TargetType = {
+  grid: [],
+  helix: [],
+  table: [],
+  sphere: [],
+}
 
 const luckyTargets = ref<any[]>([])
 const luckyCardList = ref<number[]>([])
-let luckyCount = ref(10)
+const luckyCount = ref(10)
 const personPool = ref<IPersonConfig[]>([])
 
 const intervalTimer = ref<any>(null)
-// const currentPrizeValue = ref(JSON.parse(JSON.stringify(currentPrize.value)))
-
 // 填充数据，填满七行
 function initTableData() {
   if (allPersonList.value.length <= 0) {
     return
   }
   const totalCount = rowCount.value * 7
-    const orginPersonData = JSON.parse(JSON.stringify(allPersonList.value))
+  const originPersonData = JSON.parse(JSON.stringify(allPersonList.value))
-    const orginPersonLength = orginPersonData.length
+  const originPersonLength = originPersonData.length
-    if (orginPersonLength < totalCount) {
+  if (originPersonLength < totalCount) {
-        const repeatCount = Math.ceil(totalCount / orginPersonLength)
+    const repeatCount = Math.ceil(totalCount / originPersonLength)
     // 复制数据
     for (let i = 0; i < repeatCount; i++) {
-            tableData.value = tableData.value.concat(JSON.parse(JSON.stringify(orginPersonData)))
+      tableData.value = tableData.value.concat(JSON.parse(JSON.stringify(originPersonData)))
     }
   }
-    else{
+  else {
-        tableData.value=orginPersonData.slice(0, totalCount)
+    tableData.value = originPersonData.slice(0, totalCount)
   }
   tableData.value = filterData(tableData.value.slice(0, totalCount), rowCount.value)
 }
-const init = () => {
+function init() {
-    const felidView = 40;
+  const felidView = 40
-    const width = window.innerWidth;
+  const width = window.innerWidth
-    const height = window.innerHeight;
+  const height = window.innerHeight
-    const aspect = width / height;
+  const aspect = width / height
-    const nearPlane = 1;
+  const nearPlane = 1
-    const farPlane = 10000;
+  const farPlane = 10000
   const WebGLoutput = containerRef.value
 
-    scene.value = new Scene();
+  scene.value = new Scene()
-    camera.value = new PerspectiveCamera(felidView, aspect, nearPlane, farPlane);
+  camera.value = new PerspectiveCamera(felidView, aspect, nearPlane, farPlane)
   camera.value.position.z = cameraZ.value
   renderer.value = new CSS3DRenderer()
   renderer.value.setSize(width, height * 0.9)
-    renderer.value.domElement.style.position = 'absolute';
+  renderer.value.domElement.style.position = 'absolute'
   // 垂直居中
   renderer.value.domElement.style.paddingTop = '50px'
-    renderer.value.domElement.style.top = '50%';
+  renderer.value.domElement.style.top = '50%'
-    renderer.value.domElement.style.left = '50%';
+  renderer.value.domElement.style.left = '50%'
-    renderer.value.domElement.style.transform = 'translate(-50%, -50%)';
+  renderer.value.domElement.style.transform = 'translate(-50%, -50%)'
-    WebGLoutput!.appendChild(renderer.value.domElement);
+  WebGLoutput!.appendChild(renderer.value.domElement)
 
-    controls.value = new TrackballControls(camera.value, renderer.value.domElement);
+  controls.value = new TrackballControls(camera.value, renderer.value.domElement)
-    controls.value.rotateSpeed = 1;
+  controls.value.rotateSpeed = 1
-    controls.value.staticMoving = true;
+  controls.value.staticMoving = true
-    controls.value.minDistance = 500;
+  controls.value.minDistance = 500
-    controls.value.maxDistance = 6000;
+  controls.value.maxDistance = 6000
-    controls.value.addEventListener('change', render);
+  controls.value.addEventListener('change', render)
 
   const tableLen = tableData.value.length
   for (let i = 0; i < tableLen; i++) {
-        let element = document.createElement('div');
+    let element = document.createElement('div')
-        element.className = 'element-card';
+    element.className = 'element-card'
 
-        const number = document.createElement('div');
+    const number = document.createElement('div')
-        number.className = 'card-id';
+    number.className = 'card-id'
-        number.textContent = tableData.value[i].uid;
+    number.textContent = tableData.value[i].uid
-        element.appendChild(number);
+    element.appendChild(number)
 
-        const symbol = document.createElement('div');
+    const symbol = document.createElement('div')
-        symbol.className = 'card-name';
+    symbol.className = 'card-name'
-        symbol.textContent = tableData.value[i].name;
+    symbol.textContent = tableData.value[i].name
-        element.appendChild(symbol);
+    element.appendChild(symbol)
 
-        const detail = document.createElement('div');
+    const detail = document.createElement('div')
-        detail.className = 'card-detail';
+    detail.className = 'card-detail'
-        detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`;
+    detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`
-        element.appendChild(detail);
+    element.appendChild(detail)
 
     element = useElementStyle(element, tableData.value[i], i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value)
-        const object = new CSS3DObject(element);
+    const object = new CSS3DObject(element)
-        object.position.x = Math.random() * 4000 - 2000;
+    object.position.x = Math.random() * 4000 - 2000
-        object.position.y = Math.random() * 4000 - 2000;
+    object.position.y = Math.random() * 4000 - 2000
-        object.position.z = Math.random() * 4000 - 2000;
+    object.position.z = Math.random() * 4000 - 2000
-        scene.value.add(object);
+    scene.value.add(object)
 
-        objects.value.push(object);
+    objects.value.push(object)
   }
 
-    createTableVertices();
+  createTableVertices()
-    createSphereVertices();
+  createSphereVertices()
-    createHelixVertices();
+  createHelixVertices()
 
   function createTableVertices() {
-        const tableLen = tableData.value.length;
+    const tableLen = tableData.value.length
 
     for (let i = 0; i < tableLen; i++) {
-            const object = new Object3D();
+      const object = new Object3D()
 
-            object.position.x = tableData.value[i].x * (cardSize.value.width + 40) - rowCount.value * 90;
+      object.position.x = tableData.value[i].x * (cardSize.value.width + 40) - rowCount.value * 90
-            object.position.y = -tableData.value[i].y * (cardSize.value.height + 20) + 1000;
+      object.position.y = -tableData.value[i].y * (cardSize.value.height + 20) + 1000
-            object.position.z = 0;
+      object.position.z = 0
 
-            targets.table.push(object);
+      targets.table.push(object)
     }
   }
 
   function createSphereVertices() {
-        let i = 0;
+    let i = 0
-        const objLength = objects.value.length;
+    const objLength = objects.value.length
-        const vector = new Vector3();
+    const vector = new Vector3()
 
     for (; i < objLength; ++i) {
-            let phi = Math.acos(-1 + (2 * i) / objLength);
+      const phi = Math.acos(-1 + (2 * i) / objLength)
-            let theta = Math.sqrt(objLength * Math.PI) * phi;
+      const theta = Math.sqrt(objLength * Math.PI) * phi
-            const object = new Object3D();
+      const object = new Object3D()
 
-            object.position.x = 800 * Math.cos(theta) * Math.sin(phi);
+      object.position.x = 800 * Math.cos(theta) * Math.sin(phi)
-            object.position.y = 800 * Math.sin(theta) * Math.sin(phi);
+      object.position.y = 800 * Math.sin(theta) * Math.sin(phi)
-            object.position.z = -800 * Math.cos(phi);
+      object.position.z = -800 * Math.cos(phi)
 
       // rotation object
 
-            vector.copy(object.position).multiplyScalar(2);
+      vector.copy(object.position).multiplyScalar(2)
-            object.lookAt(vector);
+      object.lookAt(vector)
-            targets.sphere.push(object);
+      targets.sphere.push(object)
     }
   }
   function createHelixVertices() {
-        let i = 0;
+    let i = 0
-        const vector = new Vector3();
+    const vector = new Vector3()
-        const objLength = objects.value.length;
+    const objLength = objects.value.length
     for (; i < objLength; ++i) {
-            let phi = i * 0.213 + Math.PI;
+      const phi = i * 0.213 + Math.PI
 
-            const object = new Object3D();
+      const object = new Object3D()
 
-            object.position.x = 800 * Math.sin(phi);
+      object.position.x = 800 * Math.sin(phi)
-            object.position.y = -(i * 8) + 450;
+      object.position.y = -(i * 8) + 450
-            object.position.z = 800 * Math.cos(phi + Math.PI);
+      object.position.z = 800 * Math.cos(phi + Math.PI)
 
-            object.scale.set(1.1, 1.1, 1.1);
+      object.scale.set(1.1, 1.1, 1.1)
 
-            vector.x = object.position.x * 2;
+      vector.x = object.position.x * 2
-            vector.y = object.position.y;
+      vector.y = object.position.y
-            vector.z = object.position.z * 2;
+      vector.z = object.position.z * 2
 
-            object.lookAt(vector);
+      object.lookAt(vector)
 
-            targets.helix.push(object);
+      targets.helix.push(object)
     }
   }
-    window.addEventListener('resize', onWindowResize, false);
+  window.addEventListener('resize', onWindowResize, false)
   transform(targets.table, 1000)
-    render();
+  render()
 }
 
-const transform = (targets: any[], duration: number) => {
+function transform(targets: any[], duration: number) {
-    TWEEN.removeAll();
+  TWEEN.removeAll()
   if (intervalTimer.value) {
-        clearInterval(intervalTimer.value);
+    clearInterval(intervalTimer.value)
     intervalTimer.value = null
     randomBallData('sphere')
   }
 
   return new Promise((resolve) => {
-        const objLength = objects.value.length;
+    const objLength = objects.value.length
     for (let i = 0; i < objLength; ++i) {
-            let object = objects.value[i];
+      const object = objects.value[i]
-            let target = targets[i];
+      const target = targets[i]
       new TWEEN.Tween(object.position)
-                .to({ x: target.position.x, y: target.position.y, z: target.position.z },
+        .to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
-                    Math.random() * duration + duration)
         .easing(TWEEN.Easing.Exponential.InOut)
-                .start();
+        .start()
-
 
       new TWEEN.Tween(object.rotation)
         .to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
@@ -241,11 +236,11 @@ const transform = (targets: any[], duration: number) => {
               useElementStyle(item.element, {} as any, i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value, 'sphere')
             })
           }
-                    luckyTargets.value = [];
+          luckyTargets.value = []
-                    luckyCardList.value = [];
+          luckyCardList.value = []
 
           canOperate.value = true
-                });
+        })
     }
 
     // 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
@@ -256,36 +251,36 @@ const transform = (targets: any[], duration: number) => {
       .onComplete(() => {
         canOperate.value = true
         resolve('')
-            });
+      })
   })
 }
 function onWindowResize() {
   camera.value.aspect = window.innerWidth / window.innerHeight
-    camera.value.updateProjectionMatrix();
+  camera.value.updateProjectionMatrix()
 
-    renderer.value.setSize(window.innerWidth, window.innerHeight);
+  renderer.value.setSize(window.innerWidth, window.innerHeight)
-    render();
+  render()
 }
 
 /**
-* [animation update all tween && controls]
+ * [animation update all tween && controls]
-*/
+ */
 function animation() {
-    TWEEN.update();
+  TWEEN.update()
-    controls.value.update();
+  controls.value.update()
   // 设置自动旋转
   // 设置相机位置
-    requestAnimationFrame(animation);
+  requestAnimationFrame(animation)
 }
 
 // // 旋转的动画
 function rollBall(rotateY: number, duration: number) {
-    TWEEN.removeAll();
+  TWEEN.removeAll()
 
   return new Promise((resolve) => {
-        scene.value.rotation.y = 0;
+    scene.value.rotation.y = 0
     ballRotationY.value = Math.PI * rotateY * 1000
-        const rotateObj = new TWEEN.Tween(scene.value.rotation);
+    const rotateObj = new TWEEN.Tween(scene.value.rotation)
     rotateObj
       .to(
         {
@@ -293,9 +288,9 @@ function rollBall(rotateY: number, duration: number) {
           x: 0,
           y: ballRotationY.value,
           // z: Math.PI * rotateZ * 1000
-                    z: 0
+          z: 0,
         },
-                duration * 1000
+        duration * 1000,
       )
       .onUpdate(render)
       .start()
@@ -314,9 +309,9 @@ function resetCamera() {
       {
         x: 0,
         y: 0,
-                z: 3000
+        z: 3000,
       },
-            1000
+      1000,
     )
     .onUpdate(render)
     .start()
@@ -326,9 +321,9 @@ function resetCamera() {
           {
             x: 0,
             y: 0,
-                        z: 0
+            z: 0,
           },
-                    1000
+          1000,
         )
         .onUpdate(render)
         .start()
@@ -347,9 +342,9 @@ function resetCamera() {
 }
 
 function render() {
-    renderer.value.render(scene.value, camera.value);
+  renderer.value.render(scene.value, camera.value)
 }
-const enterLottery = async () => {
+async function enterLottery() {
   if (!canOperate.value) {
     return
   }
@@ -357,9 +352,9 @@ const enterLottery = async () => {
     randomBallData()
   }
   if (patternList.value.length) {
-        for(let i=0;i<patternList.value.length;i++){
+    for (let i = 0; i < patternList.value.length; i++) {
-            if(i<rowCount.value*7){
+      if (i < rowCount.value * 7) {
-                objects.value[patternList.value[i]-1].element.style.backgroundColor = rgba(cardColor.value, Math.random() * 0.5 + 0.25)
+        objects.value[patternList.value[i] - 1].element.style.backgroundColor = rgba(cardColor.value, Math.random() * 0.5 + 0.25)
       }
     }
   }
@@ -369,7 +364,7 @@ const enterLottery = async () => {
   rollBall(0.1, 2000)
 }
 // 开始抽奖
-const startLottery = () => {
+function startLottery() {
   if (!canOperate.value) {
     return
   }
@@ -379,7 +374,7 @@ const startLottery = () => {
       message: i18n.global.t('error.personIsAllDone'),
       type: 'warning',
       position: 'top-right',
-            duration: 10000
+      duration: 10000,
     })
 
     return
@@ -391,10 +386,10 @@ const startLottery = () => {
       message: i18n.global.t('error.personNotEnough'),
       type: 'warning',
       position: 'top-right',
-            duration: 10000
+      duration: 10000,
     })
 
-        return;
+    return
   }
   luckyCount.value = 10
   // 自定义抽奖个数
@@ -405,11 +400,11 @@ const startLottery = () => {
     for (let i = 0; i < customCount.countList.length; i++) {
       if (customCount.countList[i].isUsedCount < customCount.countList[i].count) {
         leftover = customCount.countList[i].count - customCount.countList[i].isUsedCount
-                break;
+        break
       }
     }
   }
-    leftover < luckyCount.value ? luckyCount.value = leftover : luckyCount
+  luckyCount.value = leftover < luckyCount.value ? leftover : luckyCount.value
   for (let i = 0; i < luckyCount.value; i++) {
     if (personPool.value.length > 0) {
       const randomIndex = Math.round(Math.random() * (personPool.value.length - 1))
@@ -417,18 +412,19 @@ const startLottery = () => {
       personPool.value.splice(randomIndex, 1)
     }
   }
+
   toast.open({
     // message: `现在抽取${currentPrize.value.name} ${leftover}人`,
-        message:i18n.global.t('error.startDraw',{count:currentPrize.value.name,leftover:leftover}),
+    message: i18n.global.t('error.startDraw', { count: currentPrize.value.name, leftover }),
-        type:'default',
+    type: 'default',
     position: 'top-right',
-        duration: 8000
+    duration: 8000,
   })
   currentStatus.value = 2
   rollBall(10, 3000)
 }
 
-const stopLottery = async () => {
+async function stopLottery() {
   if (!canOperate.value) {
     return
   }
@@ -439,15 +435,15 @@ const stopLottery = async () => {
 
   const windowSize = { width: window.innerWidth, height: window.innerHeight }
   luckyTargets.value.forEach((person: IPersonConfig, index: number) => {
-        let cardIndex = selectCard(luckyCardList.value, tableData.value.length, person.id)
+    const cardIndex = selectCard(luckyCardList.value, tableData.value.length, person.id)
     luckyCardList.value.push(cardIndex)
-        let item = objects.value[cardIndex]
+    const item = objects.value[cardIndex]
     const { xTable, yTable } = useElementPosition(item, rowCount.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
     new TWEEN.Tween(item.position)
       .to({
         x: xTable,
         y: yTable,
-                z: 1000
+        z: 1000,
       }, 1200)
       .easing(TWEEN.Easing.Exponential.InOut)
       .onStart(() => {
@@ -462,7 +458,7 @@ const stopLottery = async () => {
       .to({
         x: 0,
         y: 0,
-                z: 0
+        z: 0,
       }, 900)
       .easing(TWEEN.Easing.Exponential.InOut)
       .start()
@@ -473,7 +469,7 @@ const stopLottery = async () => {
   })
 }
 // 继续
-const continueLottery = async () => {
+async function continueLottery() {
   if (!canOperate.value) {
     return
   }
@@ -483,7 +479,7 @@ const continueLottery = async () => {
     for (let i = 0; i < customCount.countList.length; i++) {
       if (customCount.countList[i].isUsedCount < customCount.countList[i].count) {
         customCount.countList[i].isUsedCount += luckyCount.value
-                break;
+        break
       }
     }
   }
@@ -497,13 +493,13 @@ const continueLottery = async () => {
   prizeConfig.updatePrizeConfig(currentPrize.value)
   await enterLottery()
 }
-const quitLottery = () => {
+function quitLottery() {
   enterLottery()
   currentStatus.value = 0
 }
 // 庆祝动画
-const confettiFire = () => {
+function confettiFire() {
-    const duration = 3 * 1000;
+  const duration = 3 * 1000
   const end = Date.now() + duration;
   (function frame() {
     // launch a few confetti from the left edge
@@ -511,60 +507,60 @@ const confettiFire = () => {
       particleCount: 2,
       angle: 60,
       spread: 55,
-            origin: { x: 0 }
+      origin: { x: 0 },
-        });
+    })
     // and launch a few from the right edge
     confetti({
       particleCount: 2,
       angle: 120,
       spread: 55,
-            origin: { x: 1 }
+      origin: { x: 1 },
-        });
+    })
 
     // keep going until we are out of time
     if (Date.now() < end) {
-            requestAnimationFrame(frame);
+      requestAnimationFrame(frame)
     }
-    }());
+  }())
   centerFire(0.25, {
     spread: 26,
     startVelocity: 55,
-    });
+  })
   centerFire(0.2, {
     spread: 60,
-    });
+  })
   centerFire(0.35, {
     spread: 100,
     decay: 0.91,
-        scalar: 0.8
+    scalar: 0.8,
-    });
+  })
   centerFire(0.1, {
     spread: 120,
     startVelocity: 25,
     decay: 0.92,
-        scalar: 1.2
+    scalar: 1.2,
-    });
+  })
   centerFire(0.1, {
     spread: 120,
     startVelocity: 45,
-    });
+  })
 }
-const centerFire = (particleRatio: number, opts: any) => {
+function centerFire(particleRatio: number, opts: any) {
   const count = 200
   confetti({
     origin: { y: 0.7 },
     ...opts,
-        particleCount: Math.floor(count * particleRatio)
+    particleCount: Math.floor(count * particleRatio),
-    });
+  })
 }
 
-const setDefaultPersonList = () => {
+function setDefaultPersonList() {
   personConfig.setDefaultPersonList()
   // 刷新页面
   window.location.reload()
 }
 // 随机替换数据
-const randomBallData = (mod: 'default' | 'lucky' | 'sphere' = 'default') => {
+function randomBallData(mod: 'default' | 'lucky' | 'sphere' = 'default') {
   // 两秒执行一次
   intervalTimer.value = setInterval(() => {
     // 产生随机数数组
@@ -577,14 +573,14 @@ const randomBallData = (mod: 'default' | 'lucky' | 'sphere' = 'default') => {
     }
     for (let i = 0; i < cardRandomIndexArr.length; i++) {
       if (!objects.value[cardRandomIndexArr[i]]) {
-                continue;
+        continue
       }
       objects.value[cardRandomIndexArr[i]].element = useElementStyle(objects.value[cardRandomIndexArr[i]].element, allPersonList.value[personRandomIndexArr[i]], cardRandomIndexArr[i], patternList.value, patternColor.value, cardColor.value, { width: cardSize.value.width, height: cardSize.value.height }, textSize.value, mod)
     }
   }, 200)
 }
 // 监听键盘
-const listenKeyboard = () => {
+function listenKeyboard() {
   window.addEventListener('keydown', (e: any) => {
     if ((e.keyCode !== 32 || e.keyCode !== 27) && !canOperate.value) {
       return
@@ -598,111 +594,118 @@ const listenKeyboard = () => {
     switch (currentStatus.value) {
       case 0:
         enterLottery()
-                break;
+        break
       case 1:
         startLottery()
-                break;
+        break
       case 2:
         stopLottery()
-                break;
+        break
       case 3:
         continueLottery()
-                break;
+        break
       default:
-                break;
+        break
     }
   })
 }
 onMounted(() => {
-    initTableData();
+  initTableData()
-    init();
+  init()
-    animation();
+  animation()
   containerRef.value!.style.color = `${textColor}`
   randomBallData()
   listenKeyboard()
-});
+})
 onUnmounted(() => {
   clearInterval(intervalTimer.value)
   intervalTimer.value = null
   window.removeEventListener('keydown', listenKeyboard)
 })
-// watch(() => currentPrize.value.isUsed, (val) => {
-//     if (val) {
-//         currentPrize.value = JSON.parse(JSON.stringify(currentPrize.value))
-//     }
-// })
 </script>
 
 <template>
   <div class="absolute z-10 flex flex-col items-center justify-center -translate-x-1/2 left-1/2">
-        <h2 class="pt-12 m-0 mb-12 font-mono tracking-wide text-center leading-12 header-title"
+    <h2
-            :style="{ fontSize: textSize * 1.5 + 'px', color: textColor }">{{ topTitle }}</h2>
+      class="pt-12 m-0 mb-12 font-mono tracking-wide text-center leading-12 header-title"
+      :style="{ fontSize: `${textSize * 1.5}px`, color: textColor }"
+    >
+      {{ topTitle }}
+    </h2>
     <div class="flex gap-3">
-            <button v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
+      <button
-                @click="router.push('config')">{{$t('button.noInfoAndImport')}}</button>
+        v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
-            <button v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
+        @click="router.push('config')"
-                @click="setDefaultPersonList">{{$t('button.useDefault')}}</button>
+      >
+        {{ t('button.noInfoAndImport') }}
+      </button>
+      <button
+        v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
+        @click="setDefaultPersonList"
+      >
+        {{ t('button.useDefault') }}
+      </button>
     </div>
   </div>
   <div id="container" ref="containerRef" class="3dContainer">
-
+    <!-- 选中菜单结构 start -->
-        <!-- 选中菜单结构 start-->
     <div id="menu">
-            <button class="btn-end " @click="enterLottery" v-if="currentStatus == 0 && tableData.length > 0">{{$t('button.enterLottery')}}</button>
+      <button v-if="currentStatus === 0 && tableData.length > 0" class="btn-end " @click="enterLottery">
+        {{ t('button.enterLottery') }}
+      </button>
 
-            <div class="start" v-if="currentStatus == 1">
+      <div v-if="currentStatus === 1" class="start">
-                <button class="btn-start" @click="startLottery"><strong>{{$t('button.start')}}</strong>
+        <button class="btn-start" @click="startLottery">
+          <strong>{{ t('button.start') }}</strong>
           <div id="container-stars">
-                        <div id="stars"></div>
+            <div id="stars" />
           </div>
 
           <div id="glow">
-                        <div class="circle"></div>
+            <div class="circle" />
-                        <div class="circle"></div>
+            <div class="circle" />
           </div>
         </button>
       </div>
 
-            <button class="btn-end btn glass btn-lg" @click="stopLottery" v-if="currentStatus == 2">{{$t('button.selectLucky')}}</button>
+      <button v-if="currentStatus === 2" class="btn-end btn glass btn-lg" @click="stopLottery">
+        {{ t('button.selectLucky') }}
+      </button>
 
-            <div v-if="currentStatus == 3" class="flex justify-center gap-6 enStop">
+      <div v-if="currentStatus === 3" class="flex justify-center gap-6 enStop">
         <div class="start">
-                    <button class="btn-start" @click="continueLottery"><strong>{{$t('button.continue')}}</strong>
+          <button class="btn-start" @click="continueLottery">
+            <strong>{{ t('button.continue') }}</strong>
             <div id="container-stars">
-                            <div id="stars"></div>
+              <div id="stars" />
             </div>
 
             <div id="glow">
-                            <div class="circle"></div>
+              <div class="circle" />
-                            <div class="circle"></div>
+              <div class="circle" />
             </div>
           </button>
         </div>
 
         <div class="start">
-                    <button class="btn-cancel" @click="quitLottery"><strong>{{$t('button.cancel')}}</strong>
+          <button class="btn-cancel" @click="quitLottery">
+            <strong>{{ t('button.cancel') }}</strong>
             <div id="container-stars">
-                            <div id="stars"></div>
+              <div id="stars" />
             </div>
 
             <div id="glow">
-                            <div class="circle"></div>
+              <div class="circle" />
-                            <div class="circle"></div>
+              <div class="circle" />
             </div>
           </button>
         </div>
       </div>
-            <!--   <button id="table" @click="transform(targets.table, 2000)">TABLE</button> -->
-            <!--  <button id="helix" @click="transform(targets.helix, 2000)">HELIX</button> -->
-
     </div>
     <!-- end -->
   </div>
-    <StarsBackground></StarsBackground>
+  <StarsBackground />
-
+  <PrizeList class="absolute left-0 top-32" />
-    <!-- <LuckyView :luckyPersonList="luckyTargets"  ref="LuckyViewRef"></LuckyView> -->
-    <!-- <PlayMusic class="absolute right-0 bottom-1/2"></PlayMusic> -->
-    <PrizeList class="absolute left-0 top-32"></PrizeList>
 </template>
 
 <style scoped lang="scss">

src/vite-env.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue';
+  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>;
+
-  export default component;
+  const component: DefineComponent<object, object, any>
+  export default component
 }
 
 declare module 'sparticles'

tsconfig.json

@@ -19,6 +19,6 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": ["src/**/*.ts","src/**/*.d.ts","src/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts

@@ -1,24 +1,28 @@
 /// <reference types="vitest" />
 
-import { defineConfig, loadEnv } from 'vite';
+import { createRequire } from 'node:module'
-import vue from '@vitejs/plugin-vue';
+import path from 'node:path'
-import path from 'path';
+import vue from '@vitejs/plugin-vue'
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
+import { visualizer } from 'rollup-plugin-visualizer'
-import AutoImport from 'unplugin-auto-import/vite';
+import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite';
+import IconsResolver from 'unplugin-icons/resolver'
-import Icons from 'unplugin-icons/vite';
+import Icons from 'unplugin-icons/vite'
-import IconsResolver from 'unplugin-icons/resolver';
+import Components from 'unplugin-vue-components/vite'
-import { visualizer } from 'rollup-plugin-visualizer';
+import { defineConfig, loadEnv } from 'vite'
-import viteCompression from 'vite-plugin-compression';
+import viteCompression from 'vite-plugin-compression'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import vueDevTools from 'vite-plugin-vue-devtools'
-// import vueDevTools from 'vite-plugin-vue-devtools'
 // https://vitejs.dev/config/
+
+const require = createRequire(import.meta.url)
+const process = require('node:process')
+
 export default defineConfig(({ mode }) => {
-    const env = loadEnv(mode, __dirname);
+  const env = loadEnv(mode, __dirname)
-    const chunkName = mode == 'prebuild' ? '[name]' : 'chunk';
+  const chunkName = mode === 'prebuild' ? '[name]' : 'chunk'
 
   return {
-        base:'/log-lottery/',
+    base: '/log-lottery/',
     plugins: [
       vue(),
       vueDevTools(),
@@ -30,11 +34,11 @@ export default defineConfig(({ mode }) => {
         ext: '.gz',
       }),
       visualizer({
-                emitFile: true, //是否被触摸
+        emitFile: true, // 是否被触摸
-                filename: 'test.html', //生成分析网页文件名
+        filename: 'test.html', // 生成分析网页文件名
-                open: true, //在默认用户代理中打开生成的文件
+        open: true, // 在默认用户代理中打开生成的文件
-                gzipSize: true, //从源代码中收集 gzip 大小并将其显示在图表中
+        gzipSize: true, // 从源代码中收集 gzip 大小并将其显示在图表中
-                brotliSize: true, //从源代码中收集 brotli 大小并将其显示在图表中
+        brotliSize: true, // 从源代码中收集 brotli 大小并将其显示在图表中
       }),
 
       createSvgIconsPlugin({
@@ -87,7 +91,7 @@ export default defineConfig(({ mode }) => {
           // 是否跨域
           changeOrigin: true,
           // 路径重写
-                    rewrite: (path) => path.replace(/^\/api/, ''),
+          rewrite: path => path.replace(/^\/api/, ''),
         },
       },
     },
@@ -100,7 +104,7 @@ export default defineConfig(({ mode }) => {
       minify: 'terser',
       terserOptions: {
         compress: {
-                    //生产环境时移除console
+          // 生产环境时移除console
           drop_console: true,
           drop_debugger: true,
         },
@@ -120,7 +124,7 @@ export default defineConfig(({ mode }) => {
                 .toString()
                 .split('node_modules/')[1]
                 .split('/')[0]
-                                .toString();
+                .toString()
             }
           },
         },
@@ -136,5 +140,5 @@ export default defineConfig(({ mode }) => {
         web: [/\.[jt]sx$/],
       },
     },
-    };
+  }
-});
+})