From cdd49728705105aed6d0ca805adae6f1c28b330c Mon Sep 17 00:00:00 2001 From: log1997 <2694233102@qq.com> Date: Thu, 4 Dec 2025 13:47:28 +0800 Subject: [PATCH] =?UTF-8?q?feat(imgConfig):=20=E4=BC=98=E5=8C=96=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E5=AD=98=E5=82=A8=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增uuid依赖用于生成唯一ID，改进图片上传功能中的本地存储结构， 使用uuid替代时间戳作为键名以避免冲突，并调整从indexedDB读取数据的方式。 --- package.json | 1 + pnpm-lock.yaml | 9 + src/components/ImageSync/index.vue | 3 +- src/store/globalConfig.ts | 542 +++++++++--------- src/utils/localforage/index.ts | 13 + src/views/Config/Global/FaceConfig/index.vue | 12 +- .../ImageConfig/components/UploadDialog.vue | 13 +- 7 files changed, 309 insertions(+), 284 deletions(-) create mode 100644 src/utils/localforage/index.ts diff --git a/package.json b/package.json index 7c958b4..6643602 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 69c5728..626f357 100644 --- a/pnpm-lock.yaml +++ b/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)): diff --git a/src/components/ImageSync/index.vue b/src/components/ImageSync/index.vue index 6dd2ae0..cfe50de 100644 --- a/src/components/ImageSync/index.vue +++ b/src/components/ImageSync/index.vue @@ -18,7 +18,8 @@ async function getImageStoreItem(item: any): Promise { 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 diff --git a/src/store/globalConfig.ts b/src/store/globalConfig.ts index 0fc7a22..de55b4c 100644 --- a/src/store/globalConfig.ts +++ b/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() { - return { - 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: {}, // 背景颜色或图片 + state() { + return { + 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[], + }, + currentMusic: { + item: defaultMusicList[0], + paused: true, + }, + } + }, + getters: { + // 获取全部配置 + getGlobalConfig(state) { + return state.globalConfig }, - musicList: defaultMusicList as IMusic[], - imageList: defaultImageList as IImage[], - }, - currentMusic: { - item: defaultMusicList[0], - paused: true, - }, - } - }, - getters: { - // 获取全部配置 - getGlobalConfig(state) { - return state.globalConfig - }, - // 获取标题 - getTopTitle(state) { - return state.globalConfig.topTitle - }, - // 获取行数 - getRowCount(state) { - return state.globalConfig.rowCount - }, - // 获取主题 - getTheme(state) { - return state.globalConfig.theme - }, - // 获取卡片颜色 - getCardColor(state) { - return state.globalConfig.theme.cardColor - }, - // 获取中奖颜色 - getLuckyColor(state) { - return state.globalConfig.theme.luckyCardColor - }, - // 获取文字颜色 - getTextColor(state) { - return state.globalConfig.theme.textColor - }, - // 获取卡片宽高 - getCardSize(state) { - return { - width: state.globalConfig.theme.cardWidth, - height: state.globalConfig.theme.cardHeight, - } - }, - // 获取文字大小 - getTextSize(state) { - return state.globalConfig.theme.textSize - }, - // 获取图案颜色 - getPatterColor(state) { - return state.globalConfig.theme.patternColor - }, - // 获取图案列表 - getPatternList(state) { - return state.globalConfig.theme.patternList - }, - // 获取音乐列表 - getMusicList(state) { - return state.globalConfig.musicList - }, - // 获取当前音乐 - getCurrentMusic(state) { - return state.currentMusic - }, - // 获取图片列表 - getImageList(state) { - return state.globalConfig.imageList - }, - // 获取是否显示奖品列表 - 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: {}, // 背景颜色或图片 + // 获取标题 + getTopTitle(state) { + return state.globalConfig.topTitle + }, + // 获取行数 + getRowCount(state) { + return state.globalConfig.rowCount + }, + // 获取主题 + getTheme(state) { + return state.globalConfig.theme + }, + // 获取卡片颜色 + getCardColor(state) { + return state.globalConfig.theme.cardColor + }, + // 获取中奖颜色 + getLuckyColor(state) { + return state.globalConfig.theme.luckyCardColor + }, + // 获取文字颜色 + getTextColor(state) { + return state.globalConfig.theme.textColor + }, + // 获取卡片宽高 + getCardSize(state) { + return { + width: state.globalConfig.theme.cardWidth, + height: state.globalConfig.theme.cardHeight, + } + }, + // 获取文字大小 + getTextSize(state) { + return state.globalConfig.theme.textSize + }, + // 获取图案颜色 + getPatterColor(state) { + return state.globalConfig.theme.patternColor + }, + // 获取图案列表 + getPatternList(state) { + return state.globalConfig.theme.patternList + }, + // 获取音乐列表 + getMusicList(state) { + return state.globalConfig.musicList + }, + // 获取当前音乐 + getCurrentMusic(state) { + return state.currentMusic + }, + // 获取图片列表 + getImageList(state) { + return state.globalConfig.imageList + }, + // 获取是否显示奖品列表 + 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 }, - 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'], - }, - ], - }, + 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, + } + }, + }, + persist: { + enabled: true, + strategies: [ + { + // 如果要存储在localStorage中 + storage: localStorage, + key: 'globalConfig', + paths: ['globalConfig'], + }, + ], + }, }) diff --git a/src/utils/localforage/index.ts b/src/utils/localforage/index.ts new file mode 100644 index 0000000..4ae3a20 --- /dev/null +++ b/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() +} diff --git a/src/views/Config/Global/FaceConfig/index.vue b/src/views/Config/Global/FaceConfig/index.vue index 699f266..6ea0362 100644 --- a/src/views/Config/Global/FaceConfig/index.vue +++ b/src/views/Config/Global/FaceConfig/index.vue @@ -1,4 +1,5 @@