Merge pull request #93 from LOG1997/feature-2025-0920

optimize

eslint.config.js

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

package.json

@@ -17,21 +17,25 @@
     },
     "dependencies": {
         "@tweenjs/tween.js": "^23.1.2",
-        "@vueuse/core": "^13.9.0",
+        "@vueuse/core": "^14.1.0",
         "axios": "^1.7.8",
         "canvas-confetti": "^1.9.3",
         "dayjs": "^1.11.13",
         "dexie": "^4.2.1",
         "github-markdown-css": "^5.8.0",
         "localforage": "^1.10.0",
+        "lodash-es": "^4.17.21",
+        "lucide-vue-next": "^0.555.0",
         "markdown-it": "^14.1.0",
         "pinia": "^3.0.3",
         "pinia-plugin-persist": "^1.0.0",
         "sparticles": "^1.3.1",
         "three": "^0.166.0",
         "three-css3d": "^1.0.6",
+        "uuid": "^13.0.0",
         "vue": "^3.5.13",
         "vue-dompurify-html": "^5.2.0",
+        "vue-draggable-plus": "^0.6.0",
         "vue-i18n": "^11.1.12",
         "vue-router": "^4.5.0",
         "vue-toast-notification": "^3",
@@ -40,7 +44,7 @@
         "zod": "^4.1.11"
     },
     "devDependencies": {
-        "@antfu/eslint-config": "^5.4.1",
+        "@antfu/eslint-config": "^6.4.1",
         "@eslint/eslintrc": "^3.2.0",
         "@eslint/js": "^9.15.0",
         "@iconify-json/ep": "^1.2.1",
@@ -49,6 +53,7 @@
         "@tailwindcss/vite": "^4.1.13",
         "@testing-library/vue": "^8.1.0",
         "@types/canvas-confetti": "^1.6.4",
+        "@types/lodash-es": "^4.17.12",
         "@types/markdown-it": "^14.1.2",
         "@types/node": "^24.5.2",
         "@types/three": "^0.166.0",
@@ -56,7 +61,7 @@
         "@typescript-eslint/parser": "^8.16.0",
         "@vitejs/plugin-legacy": "^7.2.1",
         "@vitejs/plugin-vue": "^6.0.1",
-        "@vitest/ui": "^3.2.4",
+        "@vitest/ui": "^4.0.15",
         "@vue/test-utils": "^2.4.6",
         "autoprefixer": "^10.4.20",
         "baseline-browser-mapping": "^2.8.32",

src/App.vue

@@ -3,7 +3,7 @@ import { storeToRefs } from 'pinia'
 import { onMounted, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { loadingKey, loadingState } from '@/components/Loading'
-import PlayMusic from '@/components/PlayMusic/index.vue'
+// import PlayMusic from '@/components/PlayMusic/index.vue'
 import useStore from '@/store'
 import { themeChange } from '@/utils'
 
@@ -14,74 +14,10 @@ const prizeConfig = useStore().prizeConfig
 const system = useStore().system
 const { getTheme: localTheme } = storeToRefs(globalConfig)
 const { getPrizeConfig: prizeList } = storeToRefs(prizeConfig)
-
-const tipDialog = ref()
-// 设置当前奖列表
-function setCurrentPrize() {
-  if (prizeList.value.length <= 0) {
-    return
-  }
-  for (let i = 0; i < prizeList.value.length; i++) {
-    if (!prizeList.value[i].isUsed) {
-      prizeConfig.setCurrentPrize(prizeList.value[i])
-
-      break
-    }
-  }
-}
-// 判断是否手机端访问
-function judgeMobile() {
-  const ua = navigator.userAgent
-  const isAndroid = ua.includes('Android') || ua.includes('Adr')
-  const isIOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
-
-  system.setIsMobile(isAndroid || isIOS)
-
-  return isAndroid || isIOS
-}
-// 判断是否chrome或者edge访问
-function judgeChromeOrEdge() {
-  const ua = navigator.userAgent
-  const isChrome = ua.includes('Chrome')
-  const isEdge = ua.includes('Edg')
-
-  system.setIsChrome(isChrome)
-
-  return isChrome || isEdge
-}
-onMounted(() => {
-  themeChange(localTheme.value.name)
-  setCurrentPrize()
-  if (judgeMobile() || !judgeChromeOrEdge()) {
-    tipDialog.value.showModal()
-  }
-})
 </script>
 
 <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>
-      <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>
-        </form>
-      </div>
-    </div>
-  </dialog>
   <router-view />
-  <PlayMusic class="absolute right-0 bottom-1/2" />
 </template>
 
 <style scoped lang="scss"></style>

src/components.d.ts

@@ -11,11 +11,11 @@ declare module 'vue' {
     DaiysuiTable: typeof import('./components/DaiysuiTable/index.vue')['default']
     Dialog: typeof import('./components/Dialog/index.vue')['default']
     EditSeparateDialog: typeof import('./components/NumberSeparate/EditSeparateDialog.vue')['default']
+    FileUpload: typeof import('./components/FileUpload/index.vue')['default']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     ImageSync: typeof import('./components/ImageSync/index.vue')['default']
     Loading: typeof import('./components/Loading/index.vue')['default']
     PageHeader: typeof import('./components/PageHeader/index.vue')['default']
-    PlayMusic: typeof import('./components/PlayMusic/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']

src/components/Dialog/index.vue

@@ -1,13 +1,13 @@
 <script setup lang='ts'>
-import { ref, toRefs } from 'vue'
+import { onMounted, ref, toRefs } from 'vue'
 import i18n from '@/locales/i18n'
 
 interface Props {
   title: string
-  desc: string
+  desc?: string
   cancelText?: string
   submitText?: string
-  submitFunc: () => void
+  submitFunc?: () => void
   cancelFunc?: () => void
 }
 const props = withDefaults(defineProps<Props>(), {
@@ -15,6 +15,10 @@ const props = withDefaults(defineProps<Props>(), {
   submitText: i18n.global.t('button.confirm'),
   cancelFunc: () => {},
 })
+const visible = defineModel('visible', {
+  type: Boolean,
+  default: false,
+})
 
 const dialogRef = ref <HTMLDialogElement | null> (null)
 function defaultCancelFunc() {
@@ -26,6 +30,13 @@ function showDialog() {
 }
 defineExpose({
   showDialog,
+  closed,
+})
+
+onMounted(() => {
+  dialogRef.value?.addEventListener('close', () => {
+    visible.value = false
+  })
 })
 const { title, desc, cancelText, submitText, submitFunc, cancelFunc = defaultCancelFunc } = toRefs(props)
 </script>
@@ -33,12 +44,15 @@ const { title, desc, cancelText, submitText, submitFunc, cancelFunc = defaultCan
 <template>
   <dialog id="my_modal" ref="dialogRef" class="border-none modal">
     <div class="modal-box">
-      <h3 class="text-lg font-bold">
+      <h3 v-if="title" class="text-lg font-bold">
         {{ title }}
       </h3>
-      <p class="py-4">
+      <p v-if="desc" class="py-4">
         {{ desc }}
       </p>
+      <div>
+        <slot name="content" />
+      </div>
       <div class="modal-action">
         <form method="dialog" class="flex gap-3">
           <!-- if there is a button in form, it will close the modal -->

src/components/FileUpload/index.vue

@@ -0,0 +1,60 @@
+<script setup lang='ts'>
+import type { IFileData } from './type'
+import { ListMusic, Upload, X } from 'lucide-vue-next'
+import { ref } from 'vue'
+import { readFileData } from '@/utils/file'
+
+defineProps<{
+  limitType?: string
+}>()
+
+const emits = defineEmits<{
+  uploadFile: [fileData: IFileData | null]
+}>()
+const originFileName = ref<string | null>(null)
+const fileData = ref<IFileData | null>(null)
+
+async function handleFileChange(e: Event) {
+  const file = ((e.target as HTMLInputElement).files as FileList)[0]
+  const type = file.type
+  const { dataUrl, fileName } = await readFileData(file)
+  fileData.value = { dataUrl, fileName, type }
+  originFileName.value = fileName
+  emits('uploadFile', fileData.value)
+}
+function removeFile() {
+  fileData.value = null
+  emits('uploadFile', null)
+}
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col items-center mt-6">
+    <input
+      id="file-upload"
+      :disabled="fileData !== null"
+      type="file" class="w-full bg-red-400/50 max-h-52 cursor-pointer absolute" style="display: none;" :accept="limitType"
+      @change="handleFileChange"
+    >
+    <label for="file-upload" :class="fileData ? 'cursor-not-allowed' : null" class="w-full h-52 cursor-pointer border-2 border-dashed flex items-center justify-center overflow-hidden">
+      <img v-if="fileData && fileData.type.includes('image')" class="w-full object-cover stroke-0" :src="fileData.dataUrl" alt="">
+      <ListMusic v-else-if="fileData && fileData.type.includes('audio')" class="w-2/3 h-2/3 stroke-1 text-gray-500/50" />
+      <div v-else class="w-full h-full flex justify-center items-center flex-col gap-4">
+        <Upload class="w-2/3 h-2/3 stroke-1 text-gray-500/50" />
+        <span class="btn btn-neutral">点击上传</span>
+      </div>
+    </label>
+    <div v-if="fileData" class="w-full flex items-center justify-between mt-2">
+      <p class="max-w-[3/4] truncate text-sm">
+        {{ originFileName }}
+      </p>
+      <button class="btn btn-xs btn-square btn-ghost" @click="removeFile">
+        <X />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/FileUpload/type.ts

@@ -0,0 +1,5 @@
+export interface IFileData {
+    dataUrl: string
+    fileName: string
+    type: string
+}

src/components/ImageSync/index.vue

@@ -18,7 +18,8 @@ async function getImageStoreItem(item: any): Promise<string> {
   let image = ''
   if (item.url === 'Storage') {
     const key = item.id
-    image = await imageDbStore.getItem(key) as string
+    const imageData = await imageDbStore.getItem(key) as any
+    image = imageData.dataUrl
   }
   else {
     image = item.url

src/components/ToTop/index.vue

@@ -1,10 +1,10 @@
 <script setup lang='ts'>
-
+import { ChevronUp } from 'lucide-vue-next'
 </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">
-    <svg-icon name="toTop" />
+    <ChevronUp />
   </div>
 </template>
 

src/layout/RightButton/index.vue

@@ -1,97 +1,25 @@
 <script setup lang='ts'>
-import useStore from '@/store'
+import { ref } from 'vue'
-import localforage from 'localforage'
-import { storeToRefs } from 'pinia'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
+import { usePlayMusic } from './usePlayMusic'
+
+const { playMusic, currentMusic, nextPlay } = usePlayMusic()
 
 const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
-const audioDbStore = localforage.createInstance({
+
-  name: 'audioStore',
-})
-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 localMusicListValue = ref(localMusicList)
 
-async function play(item: any) {
-  if (!item) {
-    return
-  }
-  // if (!audio.value.paused && !skip) {
-  //     audio.value.pause()
-
-  //     return
-  // }
-  let audioUrl = ''
-  if (!item.url) {
-    return
-  }
-  if (item.url === 'Storage') {
-    audioUrl = await audioDbStore.getItem(item.name) as string
-  }
-  else {
-    audioUrl = item.url
-  }
-  audio.value.pause()
-  audio.value.src = audioUrl
-  audio.value.play()
-}
-function playMusic(item: any, skip = false) {
-  if (!item) {
-    return
-  }
-  if (!currentMusic.value.paused && !skip) {
-    globalConfig.setCurrentMusic(item, true)
-
-    return
-  }
-  globalConfig.setCurrentMusic(item, false)
-}
-function nextPlay() {
-  // 播放下一首
-  if (localMusicList.value.length >= 1) {
-    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)
-  }
-}
-// 监听播放成后开始下一首
-function onPlayEnd() {
-  audio.value.addEventListener('ended', nextPlay)
-}
-
 function enterConfig() {
   router.push('/log-lottery/config')
 }
 function enterHome() {
   router.push('/log-lottery')
 }
-
-onMounted(() => {
-  globalConfig.setCurrentMusic(localMusicList.value[0], true)
-  onPlayEnd()
-  // 不使用空格控制audio
-})
-onUnmounted(() => {
-  audio.value.removeEventListener('ended', nextPlay)
-})
-watch(currentMusic, (val: any) => {
-  if (!val.paused && audio.value) {
-    play(val.item)
-  }
-  else {
-    audio.value.pause()
-  }
-}, { deep: true })
 </script>
 
 <template>

src/layout/RightButton/usePlayMusic.ts

@@ -0,0 +1,85 @@
+import localforage from 'localforage'
+import { storeToRefs } from 'pinia'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import useStore from '@/store'
+
+export function usePlayMusic() {
+    const audioDbStore = localforage.createInstance({
+        name: 'audioStore',
+    })
+
+    const globalConfig = useStore().globalConfig
+    const { getMusicList: localMusicList, getCurrentMusic: currentMusic } = storeToRefs(globalConfig)
+    const audio = ref(new Audio())
+
+    async function play(item: any) {
+        if (!item) {
+            return
+        }
+        // if (!audio.value.paused && !skip) {
+        //     audio.value.pause()
+
+        //     return
+        // }
+        let audioUrl = ''
+        if (!item.url) {
+            return
+        }
+        if (item.url === 'Storage') {
+            audioUrl = await audioDbStore.getItem(item.name) as string
+        }
+        else {
+            audioUrl = item.url
+        }
+        audio.value.pause()
+        audio.value.src = audioUrl
+        audio.value.play()
+    }
+    function playMusic(item: any, skip = false) {
+        if (!item) {
+            return
+        }
+        if (!currentMusic.value.paused && !skip) {
+            globalConfig.setCurrentMusic(item, true)
+
+            return
+        }
+        globalConfig.setCurrentMusic(item, false)
+    }
+    function nextPlay() {
+        // 播放下一首
+        if (localMusicList.value.length >= 1) {
+            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)
+        }
+    }
+    // 监听播放成后开始下一首
+    function onPlayEnd() {
+        audio.value.addEventListener('ended', nextPlay)
+    }
+    onMounted(() => {
+        globalConfig.setCurrentMusic(localMusicList.value[0], true)
+        onPlayEnd()
+        // 不使用空格控制audio
+    })
+    onUnmounted(() => {
+        audio.value.removeEventListener('ended', nextPlay)
+    })
+    watch(currentMusic, (val: any) => {
+        if (!val.paused && audio.value) {
+            play(val.item)
+        }
+        else {
+            audio.value.pause()
+        }
+    }, { deep: true })
+    return {
+        currentMusic,
+        playMusic,
+        nextPlay,
+    }
+}

src/layout/index.vue

@@ -1,32 +1,36 @@
 <script setup lang="ts">
 import { useScroll } from '@vueuse/core'
-// import Header from './Header/index.vue';
-// import Footer from './Footer/index.vue';
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import CustomModal from '@/components/Dialog/index.vue'
 import { Loading } from '@/components/Loading'
 import ToTop from '@/components/ToTop/index.vue'
+import RightButton from './RightButton/index.vue'
+import { useMounted } from './useMounted'
 
+const tipDialog = ref()
+const { tipDesc } = useMounted(tipDialog)
+const { t } = useI18n()
 const mainContainer = ref<HTMLElement | null>(null)
 const { y } = useScroll(mainContainer)
 
 function scrollToTop() {
-  y.value = 0
+  mainContainer.value?.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  })
 }
 </script>
 
 <template>
   <div class="w-screen">
-    <!-- <header class="shadow-2xl head-container h-14">
-      <Header></Header>
-    </header> -->
     <Loading />
     <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" />
     </main>
-    <!-- <footer class="w-screen footer-container">
+    <RightButton class="absolute right-0 bottom-1/2" />
-      <Footer></Footer>
+    <CustomModal ref="tipDialog" :title="t('dialog.titleTip')" :desc="tipDesc" />
-    </footer> -->
   </div>
 </template>
 

src/layout/useMounted.ts

@@ -0,0 +1,65 @@
+import type { Ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { onMounted, provide, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { loadingKey, loadingState } from '@/components/Loading'
+import useStore from '@/store'
+import { themeChange } from '@/utils'
+
+export function useMounted(tipDialog: Ref<any>) {
+    provide(loadingKey, loadingState)
+    const globalConfig = useStore().globalConfig
+    const prizeConfig = useStore().prizeConfig
+    const system = useStore().system
+    const { getTheme: localTheme } = storeToRefs(globalConfig)
+    const { getPrizeConfig: prizeList } = storeToRefs(prizeConfig)
+    const tipDesc = ref('')
+    const { t } = useI18n()
+    // 设置当前奖列表
+    function setCurrentPrize() {
+        if (prizeList.value.length <= 0) {
+            return
+        }
+        for (let i = 0; i < prizeList.value.length; i++) {
+            if (!prizeList.value[i].isUsed) {
+                prizeConfig.setCurrentPrize(prizeList.value[i])
+
+                break
+            }
+        }
+    }
+    // 判断是否手机端访问
+    function judgeMobile() {
+        const ua = navigator.userAgent
+        const isAndroid = ua.includes('Android') || ua.includes('Adr')
+        const isIOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
+
+        system.setIsMobile(isAndroid || isIOS)
+
+        return isAndroid || isIOS
+    }
+    // 判断是否chrome或者edge访问
+    function judgeChromeOrEdge() {
+        const ua = navigator.userAgent
+        const isChrome = ua.includes('Chrome')
+        const isEdge = ua.includes('Edg')
+
+        system.setIsChrome(isChrome)
+
+        return isChrome || isEdge
+    }
+    onMounted(() => {
+        themeChange(localTheme.value.name)
+        setCurrentPrize()
+        if (judgeMobile()) {
+            tipDialog.value.showDialog()
+            tipDesc.value = t('dialog.dialogPCWeb')
+        }
+        else if (!judgeChromeOrEdge()) {
+            tipDialog.value.showDialog()
+            tipDesc.value = t('dialog.dialogLatestBrowser')
+        }
+    })
+
+    return { tipDesc }
+}

src/router/index.ts

@@ -75,7 +75,7 @@ export const configRoutes = {
                 {
                     path: '/log-lottery/config/global/face',
                     name: 'FaceConfig',
-                    component: () => import('@/views/Config/Global/FaceConfig.vue'),
+                    component: () => import('@/views/Config/Global/FaceConfig/index.vue'),
                     meta: {
                         title: i18n.global.t('sidebar.viewSetting'),
                         icon: 'face',
@@ -84,7 +84,7 @@ export const configRoutes = {
                 {
                     path: '/log-lottery/config/global/image',
                     name: 'ImageConfig',
-                    component: () => import('@/views/Config/Global/ImageConfig.vue'),
+                    component: () => import('@/views/Config/Global/ImageConfig/index.vue'),
                     meta: {
                         title: i18n.global.t('sidebar.imagesManagement'),
                         icon: 'image',
@@ -93,7 +93,7 @@ export const configRoutes = {
                 {
                     path: '/log-lottery/config/global/music',
                     name: 'MusicConfig',
-                    component: () => import('@/views/Config/Global/MusicConfig.vue'),
+                    component: () => import('@/views/Config/Global/MusicConfig/index.vue'),
                     meta: {
                         title: i18n.global.t('sidebar.musicManagement'),
                         icon: 'music',

src/store/globalConfig.ts

@@ -1,280 +1,280 @@
 import type { IImage, IMusic } from '@/types/storeType'
-import i18n, { browserLanguage } from '@/locales/i18n'
 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() {
+    state() {
-    return {
+        return {
-      globalConfig: {
+            globalConfig: {
-        rowCount: 17,
+                rowCount: 17,
-        isSHowPrizeList: true,
+                isSHowPrizeList: true,
-        isShowAvatar: false,
+                isShowAvatar: false,
-        topTitle: i18n.global.t('data.defaultTitle'),
+                topTitle: i18n.global.t('data.defaultTitle'),
-        language: browserLanguage,
+                language: browserLanguage,
-        theme: {
+                theme: {
-          name: 'dracula',
+                    name: 'dracula',
-          detail: { primary: '#0f5fd3' },
+                    detail: { primary: '#0f5fd3' },
-          cardColor: '#ff79c6',
+                    cardColor: '#ff79c6',
-          cardWidth: 140,
+                    cardWidth: 140,
-          cardHeight: 200,
+                    cardHeight: 200,
-          textColor: '#ffffff',
+                    textColor: '#ffffff',
-          luckyCardColor: '#ECB1AC',
+                    luckyCardColor: '#ECB1AC',
-          textSize: 30,
+                    textSize: 30,
-          patternColor: '#1b66c9',
+                    patternColor: '#1b66c9',
-          patternList: defaultPatternList as number[],
+                    patternList: defaultPatternList as number[],
-          background: {}, // 背景颜色或图片
+                    background: {}, // 背景颜色或图片
+                },
+                musicList: defaultMusicList as IMusic[],
+                imageList: defaultImageList as IImage[],
+            },
+            currentMusic: {
+                item: defaultMusicList[0],
+                paused: true,
+            },
+        }
+    },
+    getters: {
+        // 获取全部配置
+        getGlobalConfig(state) {
+            return state.globalConfig
         },
-        musicList: defaultMusicList as IMusic[],
+        // 获取标题
-        imageList: defaultImageList as IImage[],
+        getTopTitle(state) {
-      },
+            return state.globalConfig.topTitle
-      currentMusic: {
+        },
-        item: defaultMusicList[0],
+        // 获取行数
-        paused: true,
+        getRowCount(state) {
-      },
+            return state.globalConfig.rowCount
-    }
+        },
-  },
+        // 获取主题
-  getters: {
+        getTheme(state) {
-    // 获取全部配置
+            return state.globalConfig.theme
-    getGlobalConfig(state) {
+        },
-      return state.globalConfig
+        // 获取卡片颜色
-    },
+        getCardColor(state) {
-    // 获取标题
+            return state.globalConfig.theme.cardColor
-    getTopTitle(state) {
+        },
-      return state.globalConfig.topTitle
+        // 获取中奖颜色
-    },
+        getLuckyColor(state) {
-    // 获取行数
+            return state.globalConfig.theme.luckyCardColor
-    getRowCount(state) {
+        },
-      return state.globalConfig.rowCount
+        // 获取文字颜色
-    },
+        getTextColor(state) {
-    // 获取主题
+            return state.globalConfig.theme.textColor
-    getTheme(state) {
+        },
-      return state.globalConfig.theme
+        // 获取卡片宽高
-    },
+        getCardSize(state) {
-    // 获取卡片颜色
+            return {
-    getCardColor(state) {
+                width: state.globalConfig.theme.cardWidth,
-      return state.globalConfig.theme.cardColor
+                height: state.globalConfig.theme.cardHeight,
-    },
+            }
-    // 获取中奖颜色
+        },
-    getLuckyColor(state) {
+        // 获取文字大小
-      return state.globalConfig.theme.luckyCardColor
+        getTextSize(state) {
-    },
+            return state.globalConfig.theme.textSize
-    // 获取文字颜色
+        },
-    getTextColor(state) {
+        // 获取图案颜色
-      return state.globalConfig.theme.textColor
+        getPatterColor(state) {
-    },
+            return state.globalConfig.theme.patternColor
-    // 获取卡片宽高
+        },
-    getCardSize(state) {
+        // 获取图案列表
-      return {
+        getPatternList(state) {
-        width: state.globalConfig.theme.cardWidth,
+            return state.globalConfig.theme.patternList
-        height: state.globalConfig.theme.cardHeight,
+        },
-      }
+        // 获取音乐列表
-    },
+        getMusicList(state) {
-    // 获取文字大小
+            return state.globalConfig.musicList
-    getTextSize(state) {
+        },
-      return state.globalConfig.theme.textSize
+        // 获取当前音乐
-    },
+        getCurrentMusic(state) {
-    // 获取图案颜色
+            return state.currentMusic
-    getPatterColor(state) {
+        },
-      return state.globalConfig.theme.patternColor
+        // 获取图片列表
-    },
+        getImageList(state) {
-    // 获取图案列表
+            return state.globalConfig.imageList
-    getPatternList(state) {
+        },
-      return state.globalConfig.theme.patternList
+        // 获取是否显示奖品列表
-    },
+        getIsShowPrizeList(state) {
-    // 获取音乐列表
+            return state.globalConfig.isSHowPrizeList
-    getMusicList(state) {
+        },
-      return state.globalConfig.musicList
+        // 获取当前语言
-    },
+        getLanguage(state) {
-    // 获取当前音乐
+            return state.globalConfig.language
-    getCurrentMusic(state) {
+        },
-      return state.currentMusic
+        // 获取背景图片设置
-    },
+        getBackground(state) {
-    // 获取图片列表
+            return state.globalConfig.theme.background
-    getImageList(state) {
+        },
-      return state.globalConfig.imageList
+        // 获取是否显示头像
-    },
+        getIsShowAvatar(state) {
-    // 获取是否显示奖品列表
+            return state.globalConfig.isShowAvatar
-    getIsShowPrizeList(state) {
-      return state.globalConfig.isSHowPrizeList
-    },
-    // 获取当前语言
-    getLanguage(state) {
-      return state.globalConfig.language
-    },
-    // 获取背景图片设置
-    getBackground(state) {
-      return state.globalConfig.theme.background
-    },
-    // 获取是否显示头像
-    getIsShowAvatar(state) {
-      return state.globalConfig.isShowAvatar
-    },
-  },
-  actions: {
-    // 设置rowCount
-    setRowCount(rowCount: number) {
-      this.globalConfig.rowCount = rowCount
-    },
-    // 设置标题
-    setTopTitle(topTitle: string) {
-      this.globalConfig.topTitle = topTitle
-    },
-    // 设置主题
-    setTheme(theme: any) {
-      const { name, detail } = theme
-      this.globalConfig.theme.name = name
-      this.globalConfig.theme.detail = detail
-    },
-    // 设置卡片颜色
-    setCardColor(cardColor: string) {
-      this.globalConfig.theme.cardColor = cardColor
-    },
-    // 设置中奖颜色
-    setLuckyCardColor(luckyCardColor: string) {
-      this.globalConfig.theme.luckyCardColor = luckyCardColor
-    },
-    // 设置文字颜色
-    setTextColor(textColor: string) {
-      this.globalConfig.theme.textColor = textColor
-    },
-    // 设置卡片宽高
-    setCardSize(cardSize: { width: number, height: number }) {
-      this.globalConfig.theme.cardWidth = cardSize.width
-      this.globalConfig.theme.cardHeight = cardSize.height
-    },
-    // 设置文字大小
-    setTextSize(textSize: number) {
-      this.globalConfig.theme.textSize = textSize
-    },
-    // 设置图案颜色
-    setPatterColor(patterColor: string) {
-      this.globalConfig.theme.patternColor = patterColor
-    },
-    // 设置图案列表
-    setPatternList(patternList: number[]) {
-      this.globalConfig.theme.patternList = patternList
-    },
-    // 重置图案列表
-    resetPatternList() {
-      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
-        }
-      }
-      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)
-          break
-        }
-      }
-    },
-    // 设置当前播放音乐
-    setCurrentMusic(musicItem: IMusic, paused: boolean = true) {
-      this.currentMusic = {
-        item: musicItem,
-        paused,
-      }
-    },
-    // 重置音乐列表
-    resetMusicList() {
-      this.globalConfig.musicList = JSON.parse(JSON.stringify(defaultMusicList)) as IMusic[]
-    },
-    // 清空音乐列表
-    clearMusicList() {
-      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
-        }
-      }
-      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)
-          break
-        }
-      }
-    },
-    // 重置图片列表
-    resetImageList() {
-      this.globalConfig.imageList = defaultImageList as IImage[]
-    },
-    // 清空图片列表
-    clearImageList() {
-      this.globalConfig.imageList = [] as IImage[]
-    },
-    // 设置是否显示奖品列表
-    setIsShowPrizeList(isShowPrizeList: boolean) {
-      this.globalConfig.isSHowPrizeList = isShowPrizeList
-    },
-    // 设置
-    setLanguage(language: string) {
-      this.globalConfig.language = language
-      i18n.global.locale.value = language
-    },
-    // 设置背景图片
-    setBackground(background: any) {
-      this.globalConfig.theme.background = background
-    },
-    // 设置是否显示头像
-    setIsShowAvatar(isShowAvatar: boolean) {
-      this.globalConfig.isShowAvatar = isShowAvatar
-    },
-    // 重置所有配置
-    reset() {
-      this.globalConfig = {
-        rowCount: 17,
-        isSHowPrizeList: true,
-        isShowAvatar: false,
-        topTitle: i18n.global.t('data.defaultTitle'),
-        language: browserLanguage,
-        theme: {
-          name: 'dracula',
-          detail: { primary: '#0f5fd3' },
-          cardColor: '#ff79c6',
-          cardWidth: 140,
-          cardHeight: 200,
-          textColor: '#ffffff',
-          luckyCardColor: '#ECB1AC',
-          textSize: 30,
-          patternColor: '#1b66c9',
-          patternList: defaultPatternList as number[],
-          background: {}, // 背景颜色或图片
         },
-        musicList: defaultMusicList as IMusic[],
-        imageList: defaultImageList as IImage[],
-      }
-      this.currentMusic = {
-        item: defaultMusicList[0],
-        paused: true,
-      }
     },
-  },
+    actions: {
-  persist: {
+        // 设置rowCount
-    enabled: true,
+        setRowCount(rowCount: number) {
-    strategies: [
+            this.globalConfig.rowCount = rowCount
-      {
+        },
-        // 如果要存储在localStorage中
+        // 设置标题
-        storage: localStorage,
+        setTopTitle(topTitle: string) {
-        key: 'globalConfig',
+            this.globalConfig.topTitle = topTitle
-        paths: ['globalConfig'],
+        },
-      },
+        // 设置主题
-    ],
+        setTheme(theme: any) {
-  },
+            const { name, detail } = theme
+            this.globalConfig.theme.name = name
+            this.globalConfig.theme.detail = detail
+        },
+        // 设置卡片颜色
+        setCardColor(cardColor: string) {
+            this.globalConfig.theme.cardColor = cardColor
+        },
+        // 设置中奖颜色
+        setLuckyCardColor(luckyCardColor: string) {
+            this.globalConfig.theme.luckyCardColor = luckyCardColor
+        },
+        // 设置文字颜色
+        setTextColor(textColor: string) {
+            this.globalConfig.theme.textColor = textColor
+        },
+        // 设置卡片宽高
+        setCardSize(cardSize: { width: number, height: number }) {
+            this.globalConfig.theme.cardWidth = cardSize.width
+            this.globalConfig.theme.cardHeight = cardSize.height
+        },
+        // 设置文字大小
+        setTextSize(textSize: number) {
+            this.globalConfig.theme.textSize = textSize
+        },
+        // 设置图案颜色
+        setPatterColor(patterColor: string) {
+            this.globalConfig.theme.patternColor = patterColor
+        },
+        // 设置图案列表
+        setPatternList(patternList: number[]) {
+            this.globalConfig.theme.patternList = patternList
+        },
+        // 重置图案列表
+        resetPatternList() {
+            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
+                }
+            }
+            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)
+                    break
+                }
+            }
+        },
+        // 设置当前播放音乐
+        setCurrentMusic(musicItem: IMusic, paused: boolean = true) {
+            this.currentMusic = {
+                item: musicItem,
+                paused,
+            }
+        },
+        // 重置音乐列表
+        resetMusicList() {
+            this.globalConfig.musicList = JSON.parse(JSON.stringify(defaultMusicList)) as IMusic[]
+        },
+        // 清空音乐列表
+        clearMusicList() {
+            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
+                }
+            }
+            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)
+                    break
+                }
+            }
+        },
+        // 重置图片列表
+        resetImageList() {
+            this.globalConfig.imageList = defaultImageList as IImage[]
+        },
+        // 清空图片列表
+        clearImageList() {
+            this.globalConfig.imageList = [] as IImage[]
+        },
+        // 设置是否显示奖品列表
+        setIsShowPrizeList(isShowPrizeList: boolean) {
+            this.globalConfig.isSHowPrizeList = isShowPrizeList
+        },
+        // 设置
+        setLanguage(language: string) {
+            this.globalConfig.language = language
+            i18n.global.locale.value = language
+        },
+        // 设置背景图片
+        setBackground(background: any) {
+            this.globalConfig.theme.background = background
+        },
+        // 设置是否显示头像
+        setIsShowAvatar(isShowAvatar: boolean) {
+            this.globalConfig.isShowAvatar = isShowAvatar
+        },
+        // 重置所有配置
+        reset() {
+            this.globalConfig = {
+                rowCount: 17,
+                isSHowPrizeList: true,
+                isShowAvatar: false,
+                topTitle: i18n.global.t('data.defaultTitle'),
+                language: browserLanguage,
+                theme: {
+                    name: 'dracula',
+                    detail: { primary: '#0f5fd3' },
+                    cardColor: '#ff79c6',
+                    cardWidth: 140,
+                    cardHeight: 200,
+                    textColor: '#ffffff',
+                    luckyCardColor: '#ECB1AC',
+                    textSize: 30,
+                    patternColor: '#1b66c9',
+                    patternList: defaultPatternList as number[],
+                    background: {}, // 背景颜色或图片
+                },
+                musicList: defaultMusicList as IMusic[],
+                imageList: defaultImageList as IImage[],
+            }
+            this.currentMusic = {
+                item: defaultMusicList[0],
+                paused: true,
+            }
+        },
+    },
+    persist: {
+        enabled: true,
+        strategies: [
+            {
+                // 如果要存储在localStorage中
+                storage: localStorage,
+                key: 'globalConfig',
+                paths: ['globalConfig'],
+            },
+        ],
+    },
 })

src/style.css

@@ -4,6 +4,11 @@
     themes: all;
 }
 
+@utility w-option-xs {
+    max-width: calc(var(--container-xs) - 90px);
+}
+
+
 /* @plugin "@tailwindcss/typography" */
 
 body,

src/utils/localforage/index.ts

@@ -0,0 +1,22 @@
+import localforage from 'localforage'
+
+const imageDbStore = localforage.createInstance({
+    name: 'imgStore',
+})
+
+const audioDbStore = localforage.createInstance({
+    name: 'audioStore',
+})
+
+async function clearImageDbStore() {
+    await imageDbStore.clear()
+}
+
+async function clearAudioDbStore() {
+    await audioDbStore.clear()
+}
+
+export function clearAllDbStore() {
+    clearImageDbStore()
+    clearAudioDbStore()
+}

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

@@ -1,4 +1,5 @@
 <script setup lang='ts'>
+import localforage from 'localforage'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref, watch } from 'vue'
 import { ColorPicker } from 'vue3-colorpicker'
@@ -8,6 +9,7 @@ import { daisyuiThemes } from '@/constant/theme'
 import i18n, { languageList } from '@/locales/i18n'
 import useStore from '@/store'
 import { themeChange } from '@/utils'
+import { clearAllDbStore } from '@/utils/localforage'
 import PatternSetting from './components/PatternSetting.vue'
 import 'vue3-colorpicker/style.css'
 
@@ -94,18 +96,12 @@ function resetData() {
   globalConfig.reset()
   personConfig.reset()
   prizeConfig.resetDefault()
+  //   删除所有indexDb
+  clearAllDbStore()
   // 刷新页面
   window.location.reload()
 }
 
-// const handleChangeShowFields = (fieldItem: any) => {
-//     formData.value.showField.map((item) => {
-//         if (item.label === fieldItem.label) {
-//             item.value = !item.value
-//         }
-//     })
-// }
-
 watch(() => formData.value.rowCount, () => {
   payload.rowCount = formData.value.rowCount
   parseSchema(payload).then((res) => {
@@ -305,39 +301,42 @@ onMounted(() => {
           </label>
           <select
             v-model="backgroundImageValue" data-choose-theme
-            class="w-full max-w-xs border-solid select border-1"
+            class="box-border w-full max-w-xs truncate border-solid select border-1"
           >
-            <option disabled selected>
+            <option disabled selected class="w-full truncate">
               {{ t('table.backgroundImage') }}
             </option>
             <option
               v-for="(item, index) in [{ name: '❌', url: '', id: '' }, ...imageList]" :key="index"
               :value="item"
+              :title="item.name"
+              class="box-border w-full truncate"
             >
-              {{ item.name }}
+              <span class="truncate w-option-xs">{{ item.name }}</span>
             </option>
           </select>
+          <span class="label">请先前往图片管理上传图片</span>
         </div>
-        <div class="grid grid-cols-2 gap-4 w-full">
+        <div class="grid w-full grid-cols-2 gap-4">
-          <div class="flex flex-col max-w-xs items-center gap-1 form-control">
+          <div class="flex flex-col items-center max-w-xs gap-1 form-control">
             <label class="label">
               <span class="label-text">{{ t('table.cardColor') }}</span>
             </label>
             <ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue" />
           </div>
-          <div class="flex flex-col max-w-xs items-center gap-1 form-control">
+          <div class="flex flex-col items-center max-w-xs gap-1 form-control">
             <label class="label">
               <span class="label-text">{{ t('table.winnerColor') }}</span>
             </label>
             <ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
           </div>
-          <div class="flex flex-col max-w-xs gap-1 items-center form-control">
+          <div class="flex flex-col items-center max-w-xs gap-1 form-control">
             <label class="label">
               <span class="label-text">{{ t('table.textColor') }}</span>
             </label>
             <ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue" />
           </div>
-          <div class="flex flex-col max-w-xs gap-1 form-control items-center">
+          <div class="flex flex-col items-center max-w-xs gap-1 form-control">
             <label class="label">
               <span class="label-text">{{ t('table.highlightColor') }}</span>
             </label>
@@ -380,7 +379,7 @@ onMounted(() => {
           其他设置
         </legend>
 
-        <div class="flex items-center justify-between w-full max-w-xs mb-3 gap-2 form-control">
+        <div class="flex items-center justify-between w-full max-w-xs gap-2 mb-3 form-control">
           <div class="label">
             <span class="label-text">{{ t('table.alwaysDisplay') }}</span>
           </div>

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

@@ -0,0 +1,115 @@
+<script setup lang='ts'>
+import type { IFileData } from '@/components/FileUpload/type'
+import localforage from 'localforage'
+import { v4 as uuidv4 } from 'uuid'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import CustomDialog from '@/components/Dialog/index.vue'
+import FileUpload from '@/components/FileUpload/index.vue'
+import useStore from '@/store'
+
+const { t } = useI18n()
+const limitType = ref('image/*')
+const imgUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
+const visible = defineModel('visible', {
+  type: Boolean,
+  required: true,
+})
+const globalConfig = useStore().globalConfig
+const imageDbStore = localforage.createInstance({
+  name: 'imgStore',
+})
+const imageData = ref<IFileData | null>(null)
+
+const fileName = computed({
+  get() {
+    return imageData.value?.fileName || null
+  },
+  set(value) {
+    if (imageData.value && value) {
+      imageData.value.fileName = value
+    }
+  },
+})
+const uploadDialogRef = ref()
+
+async function uploadFile(fileData: IFileData | null) {
+  if (!fileData) {
+    imageData.value = null
+    return
+  }
+  const isImage = /image*/.test(fileData?.type || '')
+  if (!isImage) {
+    imgUploadToast.value = 3
+    return
+  }
+  imageData.value = fileData
+}
+async function getImageDbStore() {
+  const keys = await imageDbStore.keys()
+  if (keys.length > 0) {
+    imageDbStore.iterate((value: { fileName: string, dataUrl: string }, key: string) => {
+      console.log(value, key)
+      globalConfig.addImage({
+        id: key,
+        name: value.fileName,
+        url: 'Storage',
+      })
+    })
+  }
+}
+function submitUpload() {
+  if (imageData.value) {
+    const { dataUrl, fileName } = imageData.value
+    const uniqueId = uuidv4()
+    imageDbStore.setItem(uniqueId, {
+      dataUrl,
+      fileName,
+    })
+      .then(() => {
+        imgUploadToast.value = 1
+        getImageDbStore()
+      })
+      .catch(() => {
+        imgUploadToast.value = 2
+      })
+  }
+}
+watch(visible, (newVal) => {
+  if (newVal) {
+    uploadDialogRef.value.showDialog()
+  }
+})
+</script>
+
+<template>
+  <div class="toast toast-top toast-end">
+    <div v-if="imgUploadToast === 2" class="alert alert-error">
+      <span>{{ t('error.uploadFail') }}</span>
+    </div>
+    <div v-if="imgUploadToast === 1" class="alert alert-success">
+      <span>{{ t('error.uploadSuccess') }}</span>
+    </div>
+    <div v-if="imgUploadToast === 3" class="alert alert-error">
+      <span>{{ t('error.notImage') }}</span>
+    </div>
+  </div>
+  <CustomDialog
+    ref="uploadDialogRef"
+    v-model:visible="visible"
+    title="图片上传"
+    :submit-func="submitUpload"
+    class=""
+  >
+    <template #content>
+      <div class="flex flex-col items-center gap-6 w-full px-12">
+        <FileUpload v-if="visible" :limit-type="limitType" @upload-file="uploadFile" />
+        <input v-model="fileName" :disabled="imageData === null" type="text" placeholder="图片名称" class="input w-full">
+      </div>
+    </template>
+  </CustomDialog>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -2,51 +2,22 @@
 import type { IImage } from '@/types/storeType'
 import localforage from 'localforage'
 import { storeToRefs } from 'pinia'
-import { onMounted, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ImageSync from '@/components/ImageSync/index.vue'
 import PageHeader from '@/components/PageHeader/index.vue'
 import useStore from '@/store'
-import { readFileData } from '@/utils/file'
+import UploadDialog from './components/UploadDialog.vue'
 
 const { t } = useI18n()
 const globalConfig = useStore().globalConfig
 const { getImageList: localImageList } = storeToRefs(globalConfig)
-const limitType = ref('image/*')
 const imgUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
 const imageDbStore = localforage.createInstance({
   name: 'imgStore',
 })
-async function handleFileChange(e: Event) {
-  const isImage = /image*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
-  if (!isImage) {
-    imgUploadToast.value = 3
 
-    return
+const uploadVisible = ref(false)
-  }
-  const { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
-  imageDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
-    .then(() => {
-      imgUploadToast.value = 1
-      getImageDbStore()
-    })
-    .catch(() => {
-      imgUploadToast.value = 2
-    })
-}
-
-async function getImageDbStore() {
-  const keys = await imageDbStore.keys()
-  if (keys.length > 0) {
-    imageDbStore.iterate((value, key) => {
-      globalConfig.addImage({
-        id: key,
-        name: key,
-        url: 'Storage',
-      })
-    })
-  }
-}
 
 function removeImage(item: IImage) {
   if (item.url === 'Storage') {
@@ -56,9 +27,6 @@ function removeImage(item: IImage) {
   }
   globalConfig.removeImage(item.id)
 }
-onMounted(() => {
-  // getImageDbStore()
-})
 watch(() => imgUploadToast.value, (val) => {
   if (val !== 0) {
     setTimeout(() => {
@@ -69,28 +37,14 @@ watch(() => imgUploadToast.value, (val) => {
 </script>
 
 <template>
-  <div class="toast toast-top toast-end">
+  <UploadDialog v-model:visible="uploadVisible" />
-    <div v-if="imgUploadToast === 2" class="alert alert-error">
-      <span>{{ t('error.uploadFail') }}</span>
-    </div>
-    <div v-if="imgUploadToast === 1" class="alert alert-success">
-      <span>{{ t('error.uploadSuccess') }}</span>
-    </div>
-    <div v-if="imgUploadToast === 3" class="alert alert-error">
-      <span>{{ t('error.notImage') }}</span>
-    </div>
-  </div>
 
   <div>
     <PageHeader title="图片管理">
       <template #buttons>
         <div class="">
           <label for="explore">
-            <input
+            <span class="btn btn-primary btn-sm" @click="uploadVisible = true">{{ t('button.upload') }}</span>
-              id="explore" type="file" class="" style="display: none" :accept="limitType"
-              @change="handleFileChange"
-            >
-            <span class="btn btn-primary btn-sm">{{ t('button.upload') }}</span>
           </label>
         </div>
       </template>
@@ -101,7 +55,6 @@ watch(() => imgUploadToast.value, (val) => {
         <div class="flex items-center gap-8">
           <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 :img-item="item" />
             </div>
           </div>

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

@@ -0,0 +1,116 @@
+<script setup lang='ts'>
+import type { IFileData } from '@/components/FileUpload/type'
+import localforage from 'localforage'
+import { v4 as uuidv4 } from 'uuid'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'vue-toast-notification'
+import CustomDialog from '@/components/Dialog/index.vue'
+import FileUpload from '@/components/FileUpload/index.vue'
+import useStore from '@/store'
+
+const toast = useToast()
+const { t } = useI18n()
+const limitType = ref('audio/*')
+const visible = defineModel('visible', {
+  type: Boolean,
+  required: true,
+})
+const globalConfig = useStore().globalConfig
+const audioDbStore = localforage.createInstance({
+  name: 'audioStore',
+})
+const audioData = ref<IFileData | null>(null)
+
+const fileName = computed({
+  get() {
+    return audioData.value?.fileName || null
+  },
+  set(value) {
+    if (audioData.value && value) {
+      audioData.value.fileName = value
+    }
+  },
+})
+const uploadDialogRef = ref()
+
+async function uploadFile(fileData: IFileData | null) {
+  if (!fileData) {
+    audioData.value = null
+    return
+  }
+  const isAudio = /audio*/.test(fileData?.type || '')
+  if (!isAudio) {
+    toast.open({
+      message: '不是音频文件',
+      type: 'error',
+      position: 'top-right',
+    })
+    return
+  }
+  audioData.value = fileData
+}
+async function getAudioDbStore() {
+  const keys = await audioDbStore.keys()
+  if (keys.length > 0) {
+    audioDbStore.iterate((value: { fileName: string, dataUrl: string }, key: string) => {
+      globalConfig.addMusic({
+        id: key,
+        name: value.fileName,
+        url: 'Storage',
+      })
+    })
+  }
+}
+function submitUpload() {
+  if (audioData.value) {
+    const { dataUrl, fileName } = audioData.value
+    const uniqueId = uuidv4()
+    audioDbStore.setItem(uniqueId, {
+      dataUrl,
+      fileName,
+    })
+      .then(() => {
+        toast.open({
+          message: '上传成功',
+          type: 'success',
+          position: 'top-right',
+        })
+        getAudioDbStore()
+      })
+      .catch(() => {
+        toast.open({
+          message: '上传失败',
+          type: 'error',
+          position: 'top-right',
+        })
+      })
+  }
+}
+watch(visible, (newVal) => {
+  if (newVal) {
+    uploadDialogRef.value.showDialog()
+  }
+})
+</script>
+
+<template>
+  <CustomDialog
+    ref="uploadDialogRef"
+    v-model:visible="visible"
+    title="音乐上传"
+    :submit-func="submitUpload"
+    class=""
+  >
+    <template #content>
+      <div class="flex flex-col items-center gap-6 w-full px-12">
+        <FileUpload v-if="visible" :limit-type="limitType" @upload-file="uploadFile" />
+        <input v-model="fileName" :disabled="audioData === null" type="text" placeholder="图片名称" class="input w-full">
+      </div>
+    </template>
+  </CustomDialog>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -2,22 +2,21 @@
 import type { IMusic } from '@/types/storeType'
 import localforage from 'localforage'
 import { storeToRefs } from 'pinia'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import PageHeader from '@/components/PageHeader/index.vue'
 import useStore from '@/store'
-import { readFileData } from '@/utils/file'
+import UploadDialog from './components/UploadDialog.vue'
 
 const { t } = useI18n()
-const audioUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
 const audioDbStore = localforage.createInstance({
   name: 'audioStore',
 })
 const globalConfig = useStore().globalConfig
 
 const { getMusicList: localMusicList } = storeToRefs(globalConfig)
-const limitType = ref('audio/*')
 const localMusicListValue = ref(localMusicList)
+const uploadVisible = ref(false)
 async function play(item: IMusic) {
   globalConfig.setCurrentMusic(item, false)
 }
@@ -37,42 +36,10 @@ function deleteAll() {
   globalConfig.clearMusicList()
   audioDbStore.clear()
 }
-async function getMusicDbStore() {
-  const keys = await audioDbStore.keys()
-  if (keys.length > 0) {
-    audioDbStore.iterate((value: string, key: string) => {
-      globalConfig.addMusic({
-        id: key + new Date().getTime().toString(),
-        name: key,
-        url: 'Storage',
-      })
-    })
-  }
-}
-async function handleFileChange(e: Event) {
-  const isAudio = /audio*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
-  if (!isAudio) {
-    audioUploadToast.value = 3
-
-    return
-  }
-  const { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
-  audioDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
-    .then(() => {
-      audioUploadToast.value = 1
-      getMusicDbStore()
-    })
-    .catch(() => {
-      audioUploadToast.value = 2
-    })
-}
-
-onMounted(() => {
-  getMusicDbStore()
-})
 </script>
 
 <template>
+  <UploadDialog v-model:visible="uploadVisible" />
   <div>
     <PageHeader title="音乐管理">
       <template #buttons>
@@ -81,11 +48,7 @@ onMounted(() => {
             {{ t('button.reset') }}
           </button>
           <label for="explore">
-            <input
+            <span class="btn btn-primary btn-sm" @click="uploadVisible = true">{{ t('button.upload') }}</span>
-              id="explore" type="file" class="" style="display: none" :accept="limitType"
-              @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') }}

src/views/Config/Prize/PrizeConfig.vue

@@ -1,8 +1,11 @@
 <script setup lang='ts'>
 import type { IPrizeConfig } from '@/types/storeType'
 import localforage from 'localforage'
+import { cloneDeep } from 'lodash-es'
+import { Grip } from 'lucide-vue-next'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref, watch } from 'vue'
+import { VueDraggable } from 'vue-draggable-plus'
 import { useI18n } from 'vue-i18n'
 import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
 import PageHeader from '@/components/PageHeader/index.vue'
@@ -18,7 +21,7 @@ const globalConfig = useStore().globalConfig
 const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
 
 const { getImageList: localImageList } = storeToRefs(globalConfig)
-const prizeList = ref(localPrizeList)
+const prizeList = ref(cloneDeep(localPrizeList.value))
 const imgList = ref<any[]>([])
 
 const selectedPrize = ref<IPrizeConfig | null>()
@@ -123,17 +126,6 @@ async function getImageDbStore() {
   }
 }
 
-function sort(item: IPrizeConfig, isUp: number) {
-  const itemIndex = prizeList.value.indexOf(item)
-  if (isUp === 1) {
-    prizeList.value.splice(itemIndex, 1)
-    prizeList.value.splice(itemIndex - 1, 0, item)
-  }
-  else {
-    prizeList.value.splice(itemIndex, 1)
-    prizeList.value.splice(itemIndex + 1, 0, item)
-  }
-}
 function delItem(item: IPrizeConfig) {
   prizeConfig.deletePrizeConfig(item.id)
 }
@@ -144,6 +136,7 @@ onMounted(() => {
   getImageDbStore()
 })
 watch(() => prizeList.value, (val: IPrizeConfig[]) => {
+  console.log('prizeList', val)
   prizeConfig.setPrizeConfig(val)
 }, { deep: true })
 </script>
@@ -176,27 +169,20 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
         </div>
       </template>
     </PageHeader>
-
+    <VueDraggable
-    <ul class="p-0 m-0">
+      v-model="prizeList"
-      <li
+      :animation="150"
-        v-for="item in prizeList" :key="item.id" class="flex gap-10"
+      handle=".handle"
+      class="p-0 m-0"
+    >
+      <div
+        v-for="item in prizeList" :key="item.id" class="flex items-center justify-center gap-10 py-5"
         :class="currentPrize.id === item.id ? 'border-1 border-dotted rounded-xl' : null"
       >
-        <label class="max-w-xs mb-10 form-control">
+        <label class="flex items-center justify-center max-w-xs px-2 handle form-control">
-          <!-- 向上向下 -->
+          <Grip class="w-10 h-10 cursor-move handle" />
-          <div class="flex flex-col items-center gap-2 pt-5">
-            <svg-icon
-              class="cursor-pointer hover:text-blue-400"
-              :class="prizeList.indexOf(item) === 0 ? 'opacity-0 cursor-default' : ''" name="up"
-              @click="sort(item, 1)"
-            />
-            <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">
+        <label class="w-1/2 max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.prizeName') }}</span>
           </div>
@@ -205,16 +191,16 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
             class="w-full max-w-xs input-sm input input-bordered"
           >
         </label>
-        <label class="w-1/2 max-w-xs mb-10 form-control">
+        <label class="flex items-center w-1/2 max-w-xs gap-2 form-control">
           <div class="label">
             <span class="label-text">{{ t('table.fullParticipation') }}</span>
           </div>
           <input
-            type="checkbox" :checked="item.isAll" class="mt-2 border-solid checkbox checkbox-secondary border-1"
+            type="checkbox" :checked="item.isAll" class="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">
+        <label class="w-1/2 max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.numberParticipants') }}</span>
           </div>
@@ -226,27 +212,28 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
             <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">
+        <label class="flex items-center w-1/2 max-w-xs gap-2 form-control">
           <div class="label">
             <span class="label-text">{{ t('table.isDone') }}</span>
           </div>
           <input
-            type="checkbox" :checked="item.isUsed" class="mt-2 border-solid checkbox checkbox-secondary border-1"
+            type="checkbox" :checked="item.isUsed" class="border-solid checkbox checkbox-secondary border-1"
             @change="changePrizeStatus(item)"
           >
         </label>
-        <label class="w-full max-w-xs mb-10 form-control">
+        <label class="w-full max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.image') }}</span>
           </div>
-          <select v-model="item.picture" class="w-full max-w-xs select select-warning select-sm">
+          <select v-model="item.picture" class="truncate select select-warning select-sm">
             <option v-if="item.picture.id" :value="{ id: '', name: '', url: '' }">❌</option>
             <option disabled selected>{{ t('table.selectPicture') }}</option>
-            <option v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{ picItem.name }}
+            <option v-for="picItem in localImageList" :key="picItem.id" :title="picItem.name" class="w-full max-w-full" :value="picItem">
+              <span class="truncate w-option-xs">{{ picItem.name }}</span>
             </option>
           </select>
         </label>
-        <label v-if="item.separateCount" class="w-full max-w-xs mb-10 form-control">
+        <label v-if="item.separateCount" class="w-full max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.onceNumber') }}</span>
           </div>
@@ -274,16 +261,16 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
             <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">
+        <label class="w-full max-w-xs form-control">
           <div class="label">
             <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-xs" @click="delItem(item)">{{ t('button.delete') }}</button>
           </div>
         </label>
-      </li>
+      </div>
-    </ul>
+    </VueDraggable>
     <EditSeparateDialog
       :total-number="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
       @submit-data="submitData"

src/views/Config/Prize/usePrizeConfig.ts

@@ -0,0 +1,100 @@
+import type { IPrizeConfig } from '@/types/storeType'
+import localforage from 'localforage'
+import { cloneDeep } from 'lodash-es'
+import { Grip } from 'lucide-vue-next'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref, watch } from 'vue'
+import { VueDraggable } from 'vue-draggable-plus'
+import { useI18n } from 'vue-i18n'
+import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
+import PageHeader from '@/components/PageHeader/index.vue'
+import i18n from '@/locales/i18n'
+import useStore from '@/store'
+
+export function usePrizeConfig() {
+    const { t } = useI18n()
+    const imageDbStore = localforage.createInstance({
+        name: 'imgStore',
+    })
+    const prizeConfig = useStore().prizeConfig
+    const globalConfig = useStore().globalConfig
+    const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
+
+    const { getImageList: localImageList } = storeToRefs(globalConfig)
+    const imgList = ref<any[]>([])
+
+    const prizeList = ref(cloneDeep(localPrizeList.value))
+    const selectedPrize = ref<IPrizeConfig | null>()
+
+    function selectPrize(item: IPrizeConfig) {
+        selectedPrize.value = item
+        selectedPrize.value.isUsedCount = 0
+        selectedPrize.value.isUsed = false
+
+        if (selectedPrize.value.separateCount.countList.length > 1) {
+            return
+        }
+        selectedPrize.value.separateCount = {
+            enable: true,
+            countList: [
+                {
+                    id: '0',
+                    count: item.count,
+                    isUsedCount: 0,
+                },
+            ],
+        }
+    }
+
+    function changePrizeStatus(item: IPrizeConfig) {
+        item.isUsed ? item.isUsedCount = 0 : item.isUsedCount = item.count
+        item.separateCount.countList = []
+        item.isUsed = !item.isUsed
+    }
+
+    function changePrizePerson(item: IPrizeConfig) {
+        let indexPrize = -1
+        for (let i = 0; i < prizeList.value.length; i++) {
+            if (prizeList.value[i].id === item.id) {
+                indexPrize = i
+                break
+            }
+        }
+        if (indexPrize > -1) {
+            prizeList.value[indexPrize].separateCount.countList = []
+            prizeList.value[indexPrize].isUsed ? prizeList.value[indexPrize].isUsedCount = prizeList.value[indexPrize].count : prizeList.value[indexPrize].isUsedCount = 0
+        }
+    }
+    function submitData(value: any) {
+        selectedPrize.value!.separateCount.countList = value
+        selectedPrize.value = null
+    }
+
+    async function getImageDbStore() {
+        const keys = await imageDbStore.keys()
+        if (keys.length > 0) {
+            imageDbStore.iterate((value, key) => {
+                imgList.value.push({
+                    key,
+                    value,
+                })
+            })
+        }
+    }
+
+    function delItem(item: IPrizeConfig) {
+        prizeConfig.deletePrizeConfig(item.id)
+    }
+    onMounted(() => {
+        getImageDbStore()
+    })
+    watch(() => prizeList.value, (val: IPrizeConfig[]) => {
+        console.log('prizeList', val)
+        prizeConfig.setPrizeConfig(val)
+    }, { deep: true })
+
+    return {
+        currentPrize,
+
+    }
+}

src/views/Config/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import dayjs from 'dayjs'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
@@ -8,6 +9,7 @@ const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
 const menuList = ref<any[]>(configRoutes.children)
+const currentYear = dayjs().year()
 
 function cleanMenuList(menu: any) {
   const newList = menu
@@ -89,7 +91,7 @@ function skip(path: string) {
       <p class="p-0 m-0">
         蜀ICP备2021028666号
       </p>
-      <p>Copyright © 2024 - All right reserved by Log1997</p>
+      <p>Copyright © {{ currentYear }} - All right reserved by <a class="link link-primary" href="https://github.com/LOG1997" target="_blank">log1997</a></p>
     </aside>
   </footer>
 </template>

src/views/Demo/index.vue

@@ -1,6 +1,26 @@
 <script setup lang='ts'>
+import { Grip } from 'lucide-vue-next'
 import { onMounted, ref, watch } from 'vue'
+import { VueDraggable } from 'vue-draggable-plus'
 
+const list = ref([
+  {
+    name: 'Joao',
+    id: '1',
+  },
+  {
+    name: 'Jean',
+    id: '2',
+  },
+  {
+    name: 'Johanna',
+    id: '3',
+  },
+  {
+    name: 'Juan',
+    id: '4',
+  },
+])
 onMounted(() => {
 
 })
@@ -11,6 +31,21 @@ onMounted(() => {
     <button class="btn btn-error">
       打印
     </button>
+    <VueDraggable
+      v-model="list"
+      :animation="150"
+      handle=".handle"
+      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
+    >
+      <div
+        v-for="(item, index) in list"
+        :key="item.id"
+        class="h-50px bg-gray-500/5 px-2 rounded flex items-center justify-between"
+      >
+        <Grip class="handle cursor-move" />
+        <input v-model="item.name" type="text">
+      </div>
+    </VueDraggable>
   </div>
 </template>