feat(imgConfig): 优化图片存储结构

新增uuid依赖用于生成唯一ID，改进图片上传功能中的本地存储结构，
使用uuid替代时间戳作为键名以避免冲突，并调整从indexedDB读取数据的方式。

package.json

@@ -31,6 +31,7 @@
         "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-i18n": "^11.1.12",

pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       three-css3d:
         specifier: ^1.0.6
         version: 1.0.6(three@0.166.0)
+      uuid:
+        specifier: ^13.0.0
+        version: 13.0.0
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.5.3)
@@ -5135,6 +5138,10 @@ packages:
   util@0.10.4:
     resolution: {integrity: sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==}
 
+  uuid@13.0.0:
+    resolution: {integrity: sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==}
+    hasBin: true
+
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
@@ -10877,6 +10884,8 @@ snapshots:
     dependencies:
       inherits: 2.0.3
 
+  uuid@13.0.0: {}
+
   vary@1.1.2: {}
 
   vite-dev-rpc@1.1.0(vite@7.1.6(@types/node@24.5.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.1)):

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/store/globalConfig.ts

@@ -1,6 +1,6 @@
 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', {

src/utils/localforage/index.ts

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

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) => {

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

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
 import type { IFileData } from '@/components/ImageUpload/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'
@@ -47,10 +48,11 @@ async function uploadFile(fileData: IFileData | null) {
 async function getImageDbStore() {
   const keys = await imageDbStore.keys()
   if (keys.length > 0) {
-    imageDbStore.iterate((value, key) => {
+    imageDbStore.iterate((value: { fileName: string, dataUrl: string }, key: string) => {
+      console.log(value, key)
       globalConfig.addImage({
         id: key,
-        name: key,
+        name: value.fileName,
         url: 'Storage',
       })
     })
@@ -59,8 +61,11 @@ async function getImageDbStore() {
 function submitUpload() {
   if (imageData.value) {
     const { dataUrl, fileName } = imageData.value
-    console.log(dataUrl, fileName)
-    imageDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
+    const uniqueId = uuidv4()
+    imageDbStore.setItem(uniqueId, {
+      dataUrl,
+      fileName,
+    })
       .then(() => {
         imgUploadToast.value = 1
         getImageDbStore()