shishengliang/log-lottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #111 from LOG1997/96-ui-optimization

Browse Source 
96 UI optimization
This commit is contained in:
LOG1997
2025-12-11 23:31:06 +08:00
committed by GitHub
parent 854b58b53c c9efd62e34
commit e0ca387c91
27 changed files with 985 additions and 798 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -81,7 +81,7 @@ web_modules/
.env.production.local .env.production.local
.env.local .env.local
components.d.ts **/components.d.ts
# parcel-bundler cache (https://parceljs.org/) # parcel-bundler cache (https://parceljs.org/)
.cache .cache

2
.npmrc Normal file
View File

@@ -0,0 +1,2 @@
engine-strict=true

10
package.json
View File

@@ -18,7 +18,7 @@
"prepare": "husky" "prepare": "husky"
}, },
"dependencies": { "dependencies": {
"@tweenjs/tween.js": "^23.1.2", "@tweenjs/tween.js": "23.1.2",
"@vueuse/core": "^14.1.0", "@vueuse/core": "^14.1.0",
"axios": "^1.7.8", "axios": "^1.7.8",
"canvas-confetti": "^1.9.3", "canvas-confetti": "^1.9.3",
@@ -29,7 +29,7 @@
"github-markdown-css": "^5.8.0", "github-markdown-css": "^5.8.0",
"localforage": "^1.10.0", "localforage": "^1.10.0",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"lucide-vue-next": "^0.556.0", "lucide-vue-next": "^0.559.0",
"markdown-it": "^14.1.0", "markdown-it": "^14.1.0",
"pinia": "^3.0.3", "pinia": "^3.0.3",
"pinia-plugin-persist": "^1.0.0", "pinia-plugin-persist": "^1.0.0",
@@ -44,6 +44,7 @@
"vue-draggable-plus": "^0.6.0", "vue-draggable-plus": "^0.6.0",
"vue-i18n": "^11.2.2", "vue-i18n": "^11.2.2",
"vue-router": "^4.5.0", "vue-router": "^4.5.0",
"vue-sonner": "^2.0.9",
"vue-toast-notification": "^3", "vue-toast-notification": "^3",
"vue3-colorpicker": "^2.3.0", "vue3-colorpicker": "^2.3.0",
"xlsx": "^0.18.5", "xlsx": "^0.18.5",
@@ -62,7 +63,7 @@
"@types/canvas-confetti": "^1.6.4", "@types/canvas-confetti": "^1.6.4",
"@types/lodash-es": "^4.17.12", "@types/lodash-es": "^4.17.12",
"@types/markdown-it": "^14.1.2", "@types/markdown-it": "^14.1.2",
"@types/node": "^24.10.2", "@types/node": "^25.0.0",
"@types/three": "0.166.0", "@types/three": "0.166.0",
"@typescript-eslint/eslint-plugin": "^8.49.0", "@typescript-eslint/eslint-plugin": "^8.49.0",
"@typescript-eslint/parser": "^8.49.0", "@typescript-eslint/parser": "^8.49.0",
@@ -101,5 +102,8 @@
"vitest": "^4.0.15", "vitest": "^4.0.15",
"vue-tsc": "^3.0.7" "vue-tsc": "^3.0.7"
}, },
"engines": {
"node": ">=22.x"
},
"packageManager": "pnpm@10.8.1+sha1.a4eff733d0c4ccc179997f0ef4986f6e92427781" "packageManager": "pnpm@10.8.1+sha1.a4eff733d0c4ccc179997f0ef4986f6e92427781"
} }

137
pnpm-lock.yaml generated
View File

@@ -9,7 +9,7 @@ importers:
.: .:
dependencies: dependencies:
'@tweenjs/tween.js': '@tweenjs/tween.js':
specifier: ^23.1.2 specifier: 23.1.2
version: 23.1.2 version: 23.1.2
'@vueuse/core': '@vueuse/core':
specifier: ^14.1.0 specifier: ^14.1.0
@@ -42,8 +42,8 @@ importers:
specifier: ^4.17.21 specifier: ^4.17.21
version: 4.17.21 version: 4.17.21
lucide-vue-next: lucide-vue-next:
specifier: ^0.556.0 specifier: ^0.559.0
version: 0.556.0(vue@3.5.13(typescript@5.9.3)) version: 0.559.0(vue@3.5.13(typescript@5.9.3))
markdown-it: markdown-it:
specifier: ^14.1.0 specifier: ^14.1.0
version: 14.1.0 version: 14.1.0
@@ -86,6 +86,9 @@ importers:
vue-router: vue-router:
specifier: ^4.5.0 specifier: ^4.5.0
version: 4.5.0(vue@3.5.13(typescript@5.9.3)) version: 4.5.0(vue@3.5.13(typescript@5.9.3))
vue-sonner:
specifier: ^2.0.9
version: 2.0.9
vue-toast-notification: vue-toast-notification:
specifier: ^3 specifier: ^3
version: 3.1.2(vue@3.5.13(typescript@5.9.3)) version: 3.1.2(vue@3.5.13(typescript@5.9.3))
@@ -119,7 +122,7 @@ importers:
version: 0.5.15(tailwindcss@4.1.17) version: 0.5.15(tailwindcss@4.1.17)
'@tailwindcss/vite': '@tailwindcss/vite':
specifier: ^4.1.13 specifier: ^4.1.13
version: 4.1.13(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)) version: 4.1.13(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))
'@tauri-apps/cli': '@tauri-apps/cli':
specifier: ^2.9.5 specifier: ^2.9.5
version: 2.9.5 version: 2.9.5
@@ -136,8 +139,8 @@ importers:
specifier: ^14.1.2 specifier: ^14.1.2
version: 14.1.2 version: 14.1.2
'@types/node': '@types/node':
specifier: ^24.10.2 specifier: ^25.0.0
version: 24.10.2 version: 25.0.0
'@types/three': '@types/three':
specifier: 0.166.0 specifier: 0.166.0
version: 0.166.0 version: 0.166.0
@@ -149,10 +152,10 @@ importers:
version: 8.49.0(eslint@9.15.0(jiti@2.5.1))(typescript@5.9.3) version: 8.49.0(eslint@9.15.0(jiti@2.5.1))(typescript@5.9.3)
'@vitejs/plugin-legacy': '@vitejs/plugin-legacy':
specifier: ^7.2.1 specifier: ^7.2.1
version: 7.2.1(terser@5.36.0)(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)) version: 7.2.1(terser@5.36.0)(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))
'@vitejs/plugin-vue': '@vitejs/plugin-vue':
specifier: ^6.0.1 specifier: ^6.0.1
version: 6.0.1(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3)) version: 6.0.1(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3))
'@vitest/ui': '@vitest/ui':
specifier: ^4.0.15 specifier: ^4.0.15
version: 4.0.15(vitest@4.0.15) version: 4.0.15(vitest@4.0.15)
@@ -230,22 +233,22 @@ importers:
version: 30.0.0(@babel/parser@7.28.4)(vue@3.5.13(typescript@5.9.3)) version: 30.0.0(@babel/parser@7.28.4)(vue@3.5.13(typescript@5.9.3))
vite: vite:
specifier: ^7.1.6 specifier: ^7.1.6
version: 7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) version: 7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
vite-plugin-compression: vite-plugin-compression:
specifier: ^0.5.1 specifier: ^0.5.1
version: 0.5.1(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)) version: 0.5.1(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))
vite-plugin-inspect: vite-plugin-inspect:
specifier: ^11.3.3 specifier: ^11.3.3
version: 11.3.3(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)) version: 11.3.3(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))
vite-plugin-svg-icons: vite-plugin-svg-icons:
specifier: ^2.0.1 specifier: ^2.0.1
version: 2.0.1(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)) version: 2.0.1(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))
vite-plugin-vue-devtools: vite-plugin-vue-devtools:
specifier: ^8.0.2 specifier: ^8.0.2
version: 8.0.2(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3)) version: 8.0.2(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3))
vitest: vitest:
specifier: ^4.0.15 specifier: ^4.0.15
version: 4.0.15(@types/node@24.10.2)(@vitest/ui@4.0.15)(happy-dom@20.0.11)(jiti@2.5.1)(jsdom@27.0.0(postcss@8.4.49))(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) version: 4.0.15(@types/node@25.0.0)(@vitest/ui@4.0.15)(happy-dom@20.0.11)(jiti@2.5.1)(jsdom@27.0.0(postcss@8.4.49))(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
vue-tsc: vue-tsc:
specifier: ^3.0.7 specifier: ^3.0.7
version: 3.0.7(typescript@5.9.3) version: 3.0.7(typescript@5.9.3)
@@ -1907,8 +1910,8 @@ packages:
'@types/node@20.19.17': '@types/node@20.19.17':
resolution: {integrity: sha512-gfehUI8N1z92kygssiuWvLiwcbOB3IRktR6hTDgJlXMYh5OvkPSRmgfoBUmfZt+vhwJtX7v1Yw4KvvAf7c5QKQ==} resolution: {integrity: sha512-gfehUI8N1z92kygssiuWvLiwcbOB3IRktR6hTDgJlXMYh5OvkPSRmgfoBUmfZt+vhwJtX7v1Yw4KvvAf7c5QKQ==}
'@types/node@24.10.2': '@types/node@25.0.0':
resolution: {integrity: sha512-WOhQTZ4G8xZ1tjJTvKOpyEVSGgOTvJAfDK3FNFgELyaTpzhdgHVHeqW8V+UJvzF5BT+/B54T/1S2K6gd9c7bbA==} resolution: {integrity: sha512-rl78HwuZlaDIUSeUKkmogkhebA+8K1Hy7tddZuJ3D0xV8pZSfsYGTsliGUol1JPzu9EKnTxPC4L1fiWouStRew==}
'@types/sortablejs@1.15.9': '@types/sortablejs@1.15.9':
resolution: {integrity: sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==} resolution: {integrity: sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==}
@@ -4082,8 +4085,8 @@ packages:
resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
engines: {node: '>=10'} engines: {node: '>=10'}
lucide-vue-next@0.556.0: lucide-vue-next@0.559.0:
resolution: {integrity: sha512-JvdCM2smkWrMDhkfD/FpZiWekkbWD6MZLstIFx/FOVZgULrnMr5hegCB9LlTdgllEFnQYQs8hhHC1WYcAV9HTA==} resolution: {integrity: sha512-Fin9uS22G9j9OxOA2iv9FF89YchRhjTxFiRGwq2OzVIY/whL+kJpGVwvKEC7/pA8OMj7fIASswhJnto8mxhlRQ==}
peerDependencies: peerDependencies:
vue: '>=3.0.1' vue: '>=3.0.1'
@@ -5582,6 +5585,20 @@ packages:
peerDependencies: peerDependencies:
vue: ^3.2.0 vue: ^3.2.0
vue-sonner@2.0.9:
resolution: {integrity: sha512-i6BokNlNDL93fpzNxN/LZSn6D6MzlO+i3qXt6iVZne3x1k7R46d5HlFB4P8tYydhgqOrRbIZEsnRd3kG7qGXyw==}
peerDependencies:
'@nuxt/kit': ^4.0.3
'@nuxt/schema': ^4.0.3
nuxt: ^4.0.3
peerDependenciesMeta:
'@nuxt/kit':
optional: true
'@nuxt/schema':
optional: true
nuxt:
optional: true
vue-template-compiler@2.7.15: vue-template-compiler@2.7.15:
resolution: {integrity: sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==} resolution: {integrity: sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==}
@@ -7334,12 +7351,12 @@ snapshots:
postcss-selector-parser: 6.0.10 postcss-selector-parser: 6.0.10
tailwindcss: 4.1.17 tailwindcss: 4.1.17
'@tailwindcss/vite@4.1.13(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))': '@tailwindcss/vite@4.1.13(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))':
dependencies: dependencies:
'@tailwindcss/node': 4.1.13 '@tailwindcss/node': 4.1.13
'@tailwindcss/oxide': 4.1.13 '@tailwindcss/oxide': 4.1.13
tailwindcss: 4.1.13 tailwindcss: 4.1.13
vite: 7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) vite: 7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
'@tanstack/virtual-core@3.13.13': {} '@tanstack/virtual-core@3.13.13': {}
@@ -7478,7 +7495,7 @@ snapshots:
dependencies: dependencies:
undici-types: 6.21.0 undici-types: 6.21.0
'@types/node@24.10.2': '@types/node@25.0.0':
dependencies: dependencies:
undici-types: 7.16.0 undici-types: 7.16.0
@@ -7488,7 +7505,7 @@ snapshots:
'@types/svgo@2.6.4': '@types/svgo@2.6.4':
dependencies: dependencies:
'@types/node': 24.10.2 '@types/node': 25.0.0
'@types/three@0.166.0': '@types/three@0.166.0':
dependencies: dependencies:
@@ -7703,7 +7720,7 @@ snapshots:
'@typescript-eslint/types': 8.49.0 '@typescript-eslint/types': 8.49.0
eslint-visitor-keys: 4.2.1 eslint-visitor-keys: 4.2.1
'@vitejs/plugin-legacy@7.2.1(terser@5.36.0)(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))': '@vitejs/plugin-legacy@7.2.1(terser@5.36.0)(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))':
dependencies: dependencies:
'@babel/core': 7.28.4 '@babel/core': 7.28.4
'@babel/plugin-transform-dynamic-import': 7.27.1(@babel/core@7.28.4) '@babel/plugin-transform-dynamic-import': 7.27.1(@babel/core@7.28.4)
@@ -7718,14 +7735,14 @@ snapshots:
regenerator-runtime: 0.14.1 regenerator-runtime: 0.14.1
systemjs: 6.15.1 systemjs: 6.15.1
terser: 5.36.0 terser: 5.36.0
vite: 7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) vite: 7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
'@vitejs/plugin-vue@6.0.1(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3))': '@vitejs/plugin-vue@6.0.1(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3))':
dependencies: dependencies:
'@rolldown/pluginutils': 1.0.0-beta.29 '@rolldown/pluginutils': 1.0.0-beta.29
vite: 7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) vite: 7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
vue: 3.5.13(typescript@5.9.3) vue: 3.5.13(typescript@5.9.3)
'@vitest/eslint-plugin@1.5.1(eslint@9.15.0(jiti@2.5.1))(typescript@5.9.3)(vitest@4.0.15)': '@vitest/eslint-plugin@1.5.1(eslint@9.15.0(jiti@2.5.1))(typescript@5.9.3)(vitest@4.0.15)':
@@ -7735,7 +7752,7 @@ snapshots:
eslint: 9.15.0(jiti@2.5.1) eslint: 9.15.0(jiti@2.5.1)
optionalDependencies: optionalDependencies:
typescript: 5.9.3 typescript: 5.9.3
vitest: 4.0.15(@types/node@24.10.2)(@vitest/ui@4.0.15)(happy-dom@20.0.11)(jiti@2.5.1)(jsdom@27.0.0(postcss@8.4.49))(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) vitest: 4.0.15(@types/node@25.0.0)(@vitest/ui@4.0.15)(happy-dom@20.0.11)(jiti@2.5.1)(jsdom@27.0.0(postcss@8.4.49))(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@@ -7748,13 +7765,13 @@ snapshots:
chai: 6.2.1 chai: 6.2.1
tinyrainbow: 3.0.3 tinyrainbow: 3.0.3
'@vitest/mocker@4.0.15(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))': '@vitest/mocker@4.0.15(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))':
dependencies: dependencies:
'@vitest/spy': 4.0.15 '@vitest/spy': 4.0.15
estree-walker: 3.0.3 estree-walker: 3.0.3
magic-string: 0.30.21 magic-string: 0.30.21
optionalDependencies: optionalDependencies:
vite: 7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) vite: 7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
'@vitest/pretty-format@4.0.15': '@vitest/pretty-format@4.0.15':
dependencies: dependencies:
@@ -7782,7 +7799,7 @@ snapshots:
sirv: 3.0.2 sirv: 3.0.2
tinyglobby: 0.2.15 tinyglobby: 0.2.15
tinyrainbow: 3.0.3 tinyrainbow: 3.0.3
vitest: 4.0.15(@types/node@24.10.2)(@vitest/ui@4.0.15)(happy-dom@20.0.11)(jiti@2.5.1)(jsdom@27.0.0(postcss@8.4.49))(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) vitest: 4.0.15(@types/node@25.0.0)(@vitest/ui@4.0.15)(happy-dom@20.0.11)(jiti@2.5.1)(jsdom@27.0.0(postcss@8.4.49))(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
'@vitest/utils@4.0.15': '@vitest/utils@4.0.15':
dependencies: dependencies:
@@ -7871,14 +7888,14 @@ snapshots:
dependencies: dependencies:
'@vue/devtools-kit': 7.7.7 '@vue/devtools-kit': 7.7.7
'@vue/devtools-core@8.0.2(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3))': '@vue/devtools-core@8.0.2(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3))':
dependencies: dependencies:
'@vue/devtools-kit': 8.0.2 '@vue/devtools-kit': 8.0.2
'@vue/devtools-shared': 8.0.2 '@vue/devtools-shared': 8.0.2
mitt: 3.0.1 mitt: 3.0.1
nanoid: 5.1.5 nanoid: 5.1.5
pathe: 2.0.3 pathe: 2.0.3
vite-hot-client: 2.1.0(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)) vite-hot-client: 2.1.0(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))
vue: 3.5.13(typescript@5.9.3) vue: 3.5.13(typescript@5.9.3)
transitivePeerDependencies: transitivePeerDependencies:
- vite - vite
@@ -9649,7 +9666,7 @@ snapshots:
jest-worker@27.5.1: jest-worker@27.5.1:
dependencies: dependencies:
'@types/node': 24.10.2 '@types/node': 25.0.0
merge-stream: 2.0.0 merge-stream: 2.0.0
supports-color: 8.1.1 supports-color: 8.1.1
optional: true optional: true
@@ -9864,7 +9881,7 @@ snapshots:
dependencies: dependencies:
yallist: 4.0.0 yallist: 4.0.0
lucide-vue-next@0.556.0(vue@3.5.13(typescript@5.9.3)): lucide-vue-next@0.559.0(vue@3.5.13(typescript@5.9.3)):
dependencies: dependencies:
vue: 3.5.13(typescript@5.9.3) vue: 3.5.13(typescript@5.9.3)
@@ -11356,26 +11373,26 @@ snapshots:
vary@1.1.2: {} vary@1.1.2: {}
vite-dev-rpc@1.1.0(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)): vite-dev-rpc@1.1.0(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)):
dependencies: dependencies:
birpc: 2.5.0 birpc: 2.5.0
vite: 7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) vite: 7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
vite-hot-client: 2.1.0(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)) vite-hot-client: 2.1.0(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))
vite-hot-client@2.1.0(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)): vite-hot-client@2.1.0(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)):
dependencies: dependencies:
vite: 7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) vite: 7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
vite-plugin-compression@0.5.1(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)): vite-plugin-compression@0.5.1(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)):
dependencies: dependencies:
chalk: 4.1.2 chalk: 4.1.2
debug: 4.3.4 debug: 4.3.4
fs-extra: 10.1.0 fs-extra: 10.1.0
vite: 7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) vite: 7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
vite-plugin-inspect@11.3.3(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)): vite-plugin-inspect@11.3.3(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)):
dependencies: dependencies:
ansis: 4.1.0 ansis: 4.1.0
debug: 4.4.3 debug: 4.4.3
@@ -11385,12 +11402,12 @@ snapshots:
perfect-debounce: 2.0.0 perfect-debounce: 2.0.0
sirv: 3.0.2 sirv: 3.0.2
unplugin-utils: 0.3.0 unplugin-utils: 0.3.0
vite: 7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) vite: 7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
vite-dev-rpc: 1.1.0(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)) vite-dev-rpc: 1.1.0(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
vite-plugin-svg-icons@2.0.1(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)): vite-plugin-svg-icons@2.0.1(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)):
dependencies: dependencies:
'@types/svgo': 2.6.4 '@types/svgo': 2.6.4
cors: 2.8.5 cors: 2.8.5
@@ -11400,26 +11417,26 @@ snapshots:
pathe: 0.2.0 pathe: 0.2.0
svg-baker: 1.7.0 svg-baker: 1.7.0
svgo: 2.8.0 svgo: 2.8.0
vite: 7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) vite: 7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
vite-plugin-vue-devtools@8.0.2(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3)): vite-plugin-vue-devtools@8.0.2(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3)):
dependencies: dependencies:
'@vue/devtools-core': 8.0.2(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3)) '@vue/devtools-core': 8.0.2(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3))
'@vue/devtools-kit': 8.0.2 '@vue/devtools-kit': 8.0.2
'@vue/devtools-shared': 8.0.2 '@vue/devtools-shared': 8.0.2
execa: 9.6.0 execa: 9.6.0
sirv: 3.0.2 sirv: 3.0.2
vite: 7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) vite: 7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
vite-plugin-inspect: 11.3.3(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)) vite-plugin-inspect: 11.3.3(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))
vite-plugin-vue-inspector: 5.3.2(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)) vite-plugin-vue-inspector: 5.3.2(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))
transitivePeerDependencies: transitivePeerDependencies:
- '@nuxt/kit' - '@nuxt/kit'
- supports-color - supports-color
- vue - vue
vite-plugin-vue-inspector@5.3.2(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)): vite-plugin-vue-inspector@5.3.2(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)):
dependencies: dependencies:
'@babel/core': 7.26.0 '@babel/core': 7.26.0
'@babel/plugin-proposal-decorators': 7.24.7(@babel/core@7.26.0) '@babel/plugin-proposal-decorators': 7.24.7(@babel/core@7.26.0)
@@ -11430,11 +11447,11 @@ snapshots:
'@vue/compiler-dom': 3.5.13 '@vue/compiler-dom': 3.5.13
kolorist: 1.8.0 kolorist: 1.8.0
magic-string: 0.30.19 magic-string: 0.30.19
vite: 7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) vite: 7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2): vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2):
dependencies: dependencies:
esbuild: 0.25.10 esbuild: 0.25.10
fdir: 6.5.0(picomatch@4.0.3) fdir: 6.5.0(picomatch@4.0.3)
@@ -11443,7 +11460,7 @@ snapshots:
rollup: 4.52.0 rollup: 4.52.0
tinyglobby: 0.2.15 tinyglobby: 0.2.15
optionalDependencies: optionalDependencies:
'@types/node': 24.10.2 '@types/node': 25.0.0
fsevents: 2.3.3 fsevents: 2.3.3
jiti: 2.5.1 jiti: 2.5.1
lightningcss: 1.30.1 lightningcss: 1.30.1
@@ -11451,10 +11468,10 @@ snapshots:
terser: 5.36.0 terser: 5.36.0
yaml: 2.8.2 yaml: 2.8.2
vitest@4.0.15(@types/node@24.10.2)(@vitest/ui@4.0.15)(happy-dom@20.0.11)(jiti@2.5.1)(jsdom@27.0.0(postcss@8.4.49))(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2): vitest@4.0.15(@types/node@25.0.0)(@vitest/ui@4.0.15)(happy-dom@20.0.11)(jiti@2.5.1)(jsdom@27.0.0(postcss@8.4.49))(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2):
dependencies: dependencies:
'@vitest/expect': 4.0.15 '@vitest/expect': 4.0.15
'@vitest/mocker': 4.0.15(vite@7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)) '@vitest/mocker': 4.0.15(vite@7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))
'@vitest/pretty-format': 4.0.15 '@vitest/pretty-format': 4.0.15
'@vitest/runner': 4.0.15 '@vitest/runner': 4.0.15
'@vitest/snapshot': 4.0.15 '@vitest/snapshot': 4.0.15
@@ -11471,10 +11488,10 @@ snapshots:
tinyexec: 1.0.2 tinyexec: 1.0.2
tinyglobby: 0.2.15 tinyglobby: 0.2.15
tinyrainbow: 3.0.3 tinyrainbow: 3.0.3
vite: 7.1.6(@types/node@24.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2) vite: 7.1.6(@types/node@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2)
why-is-node-running: 2.3.0 why-is-node-running: 2.3.0
optionalDependencies: optionalDependencies:
'@types/node': 24.10.2 '@types/node': 25.0.0
'@vitest/ui': 4.0.15(vitest@4.0.15) '@vitest/ui': 4.0.15(vitest@4.0.15)
happy-dom: 20.0.11 happy-dom: 20.0.11
jsdom: 27.0.0(postcss@8.4.49) jsdom: 27.0.0(postcss@8.4.49)
@@ -11536,6 +11553,8 @@ snapshots:
'@vue/devtools-api': 6.6.4 '@vue/devtools-api': 6.6.4
vue: 3.5.13(typescript@5.9.3) vue: 3.5.13(typescript@5.9.3)
vue-sonner@2.0.9: {}
vue-template-compiler@2.7.15: vue-template-compiler@2.7.15:
dependencies: dependencies:
de-indent: 1.0.2 de-indent: 1.0.2

1
src/components.d.ts vendored
View File

@@ -58,6 +58,7 @@ declare module 'vue' {
PopoverTrigger: typeof import('./components/ui/popover/PopoverTrigger.vue')['default'] PopoverTrigger: typeof import('./components/ui/popover/PopoverTrigger.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
Sonner: typeof import('./components/ui/sonner/Sonner.vue')['default']
SvgIcon: typeof import('./components/SvgIcon/index.vue')['default'] SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
ToTop: typeof import('./components/ToTop/index.vue')['default'] ToTop: typeof import('./components/ToTop/index.vue')['default']
} }

13
src/components/FileUpload/index.vue
View File

@@ -2,10 +2,11 @@
import type { IFileData } from './type' import type { IFileData } from './type'
import { ListMusic, Upload, X } from 'lucide-vue-next' import { ListMusic, Upload, X } from 'lucide-vue-next'
import { ref } from 'vue' import { ref } from 'vue'
import { readFileData } from '@/utils/file' import { readFileAsJsonData, readFileData } from '@/utils/file'
defineProps<{ const props = defineProps<{
limitType?: string limitType?: string
mode?: 'file' | 'json'
}>() }>()
const emits = defineEmits<{ const emits = defineEmits<{
@@ -17,6 +18,14 @@ const fileData = ref<IFileData | null>(null)
async function handleFileChange(e: Event) { async function handleFileChange(e: Event) {
const file = ((e.target as HTMLInputElement).files as FileList)[0] const file = ((e.target as HTMLInputElement).files as FileList)[0]
const type = file.type const type = file.type
if (props.mode === 'json') {
const fileRes = await readFileAsJsonData(file)
const jsonData = JSON.parse(fileRes)
fileData.value = { dataUrl: jsonData, fileName: file.name, type }
originFileName.value = file.name
emits('uploadFile', fileData.value)
return
}
const { dataUrl, fileName } = await readFileData(file) const { dataUrl, fileName } = await readFileData(file)
fileData.value = { dataUrl, fileName, type } fileData.value = { dataUrl, fileName, type }
originFileName.value = fileName originFileName.value = fileName

42
src/components/ui/sonner/Sonner.vue Normal file
View File

@@ -0,0 +1,42 @@
<script lang="ts" setup>
import type { ToasterProps } from "vue-sonner"
import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-vue-next"
import { Toaster as Sonner } from "vue-sonner"
import { cn } from "@/lib/utils"
const props = defineProps<ToasterProps>()
</script>
<template>
<Sonner
:class="cn('toaster group', props.class)"
:style="{
'--normal-bg': 'var(--popover)',
'--normal-text': 'var(--popover-foreground)',
'--normal-border': 'var(--border)',
'--border-radius': 'var(--radius)',
}"
v-bind="props"
>
<template #success-icon>
<CircleCheckIcon class="size-4" />
</template>
<template #info-icon>
<InfoIcon class="size-4" />
</template>
<template #warning-icon>
<TriangleAlertIcon class="size-4" />
</template>
<template #error-icon>
<OctagonXIcon class="size-4" />
</template>
<template #loading-icon>
<div>
<Loader2Icon class="size-4 animate-spin" />
</div>
</template>
<template #close-icon>
<XIcon class="size-4" />
</template>
</Sonner>
</template>

1
src/components/ui/sonner/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as Toaster } from "./Sonner.vue"

32
src/layout/RightButton/index.vue
View File

@@ -1,18 +1,19 @@
<script setup lang='ts'> <script setup lang='ts'>
import { ref } from 'vue' import { useFullscreen } from '@vueuse/core'
import { Maximize, Minimize } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { usePlayMusic } from './usePlayMusic' import { usePlayMusic } from './usePlayMusic'
const { playMusic, currentMusic, nextPlay } = usePlayMusic() const { playMusic, currentMusic, nextPlay } = usePlayMusic()
const { isFullscreen, toggle: toggleScreen } = useFullscreen()
const { t } = useI18n() const { t } = useI18n()
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const settingRef = ref() const settingRef = ref()
// const audio = ref(new Audio()) const fullScreenRef = ref()
// const localMusicListValue = ref(localMusicList)
function enterConfig() { function enterConfig() {
router.push('/log-lottery/config') router.push('/log-lottery/config')
@@ -20,10 +21,32 @@ function enterConfig() {
function enterHome() { function enterHome() {
router.push('/log-lottery') router.push('/log-lottery')
} }
onMounted(() => {
settingRef.value.addEventListener('mouseenter', () => {
fullScreenRef.value.style.display = 'block'
})
settingRef.value.addEventListener('mouseleave', () => {
fullScreenRef.value.style.display = 'none'
})
})
</script> </script>
<template> <template>
<div ref="settingRef" class="flex flex-col gap-3"> <div ref="settingRef" class="flex flex-col gap-3">
<div ref="fullScreenRef" class="tooltip tooltip-left hidden" @click="toggleScreen">
<div
v-if="isFullscreen"
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"
>
<Minimize />
</div>
<div
v-else
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"
>
<Maximize />
</div>
</div>
<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 <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" 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"
@@ -40,7 +63,6 @@ function enterHome() {
<svg-icon name="setting" /> <svg-icon name="setting" />
</div> </div>
</div> </div>
<div class="tooltip tooltip-left" :data-tip="currentMusic.item ? `${currentMusic.item.name}\n\r ${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 <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" 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"

3
src/layout/index.vue
View File

@@ -5,8 +5,10 @@ import { useI18n } from 'vue-i18n'
import CustomModal from '@/components/Dialog/index.vue' import CustomModal from '@/components/Dialog/index.vue'
import { Loading } from '@/components/Loading' import { Loading } from '@/components/Loading'
import ToTop from '@/components/ToTop/index.vue' import ToTop from '@/components/ToTop/index.vue'
import { Toaster } from '@/components/ui/sonner'
import RightButton from './RightButton/index.vue' import RightButton from './RightButton/index.vue'
import { useMounted } from './useMounted' import { useMounted } from './useMounted'
import 'vue-sonner/style.css'
const tipDialog = ref() const tipDialog = ref()
const { tipDesc } = useMounted(tipDialog) const { tipDesc } = useMounted(tipDialog)
@@ -29,6 +31,7 @@ function scrollToTop() {
<main ref="mainContainer" class="box-content w-screen h-screen overflow-x-hidden overflow-y-auto main-container"> <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 class="h-full main-container-content" />
</main> </main>
<Toaster />
<RightButton class="absolute right-0 bottom-1/2" /> <RightButton class="absolute right-0 bottom-1/2" />
<CustomModal ref="tipDialog" :title="t('dialog.titleTip')" :desc="tipDesc" /> <CustomModal ref="tipDialog" :title="t('dialog.titleTip')" :desc="tipDesc" />
</div> </div>

7
src/store/globalConfig.ts
View File

@@ -127,6 +127,10 @@ export const useGlobalConfig = defineStore('global', {
}, },
}, },
actions: { actions: {
// 设置全局配置
setGlobalConfig(data: any) {
this.globalConfig = data
},
// 设置rowCount // 设置rowCount
setRowCount(rowCount: number) { setRowCount(rowCount: number) {
this.globalConfig.rowCount = rowCount this.globalConfig.rowCount = rowCount
@@ -137,9 +141,8 @@ export const useGlobalConfig = defineStore('global', {
}, },
// 设置主题 // 设置主题
setTheme(theme: any) { setTheme(theme: any) {
const { name, detail } = theme const { name } = theme
this.globalConfig.theme.name = name this.globalConfig.theme.name = name
this.globalConfig.theme.detail = detail
}, },
// 设置卡片颜色 // 设置卡片颜色
setCardColor(cardColor: string) { setCardColor(cardColor: string) {

46
src/utils/file.ts
View File

@@ -1,19 +1,35 @@
export function readFileBinary(file: any): Promise<any> { export function readFileBinary(file: File | Blob): Promise<string> {
return new Promise((resolve) => { return new Promise((resolve) => {
const reader = new FileReader() const reader = new FileReader()
reader.readAsBinaryString(file) reader.readAsBinaryString(file)
reader.onload = (ev: any) => { reader.onload = (ev: any) => {
resolve(ev.target.result) resolve(ev.target.result)
} }
}) })
} }
export function 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() const reader = new FileReader()
reader.readAsDataURL(file) reader.readAsDataURL(file)
reader.onload = (ev: any) => { reader.onload = (ev: any) => {
resolve({ dataUrl: ev.target.result, fileName: file.name }) resolve({ dataUrl: ev.target.result, fileName: file.name })
} }
}) })
}
export async function readLocalFileAsArraybuffer(path: string): Promise<ArrayBuffer> {
const response = await fetch(path)
const arrayBuffer = await response.arrayBuffer()
return arrayBuffer
}
export async function readFileAsJsonData(file: File | Blob): Promise<any> {
return new Promise((resolve) => {
const reader = new FileReader()
reader.readAsText(file, 'utf-8')
reader.onload = (ev: any) => {
resolve(ev.target.result)
}
})
} }

0
src/views/Config/Global/FaceConfig/components/PatternSetting.vue → src/views/Config/Global/FaceConfig/components/PatternEdit.vue
View File

75
src/views/Config/Global/FaceConfig/components/UploadDialog.vue Normal file
View File

@@ -0,0 +1,75 @@
<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 { useToast } from 'vue-toast-notification'
import CustomDialog from '@/components/Dialog/index.vue'
import FileUpload from '@/components/FileUpload/index.vue'
interface Props {
importAllConfigData: (data: any) => void
}
const props = defineProps<Props>()
const toast = useToast()
const limitType = ref('application/json')
const visible = defineModel('visible', {
type: Boolean,
required: true,
})
const jsonFileData = ref<IFileData | null>(null)
const uploadDialogRef = ref()
async function uploadFile(fileData: IFileData | null) {
if (!fileData) {
jsonFileData.value = null
return
}
const isJson = /application\/json/.test(fileData?.type || '')
if (!isJson) {
toast.open({
message: '不是json文件，请检查',
type: 'error',
position: 'top-right',
})
return
}
jsonFileData.value = fileData
}
function submitUpload() {
if (jsonFileData.value) {
// 把文件转化为json数据
const jsonData = jsonFileData.value.dataUrl
console.log('jsonData', jsonData)
props.importAllConfigData(jsonData)
}
}
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" mode="json" @upload-file="uploadFile" />
</div>
</template>
</CustomDialog>
</template>
<style scoped>
</style>

467
src/views/Config/Global/FaceConfig/index.vue
View File

@@ -1,443 +1,60 @@
<script setup lang='ts'> <script setup lang='ts'>
import { storeToRefs } from 'pinia'
import { onMounted, ref, watch } from 'vue'
import { ColorPicker } from 'vue3-colorpicker'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router' import { DataSetting, LayoutSetting, PatternSetting, TextSetting, ThemeSetting } from './parts'
import { z as zod } from 'zod'
import { daisyuiThemes } from '@/constant/theme' import { useViewModel } from './useViewModel'
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 SelectFont from './components/SelectFont.vue'
import 'vue3-colorpicker/style.css'
const router = useRouter()
const { t } = useI18n() const { t } = useI18n()
const globalConfig = useStore().globalConfig
const personConfig = useStore().personConfig
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, getBackground: backgroundImage, getFont: currentFont, getTitleFont: currentTitleFont, getTitleFontSyncGlobal: titleFontSyncGlobal, getImageList: imageList, getIsShowAvatar: isShowAvatar,
} = storeToRefs(globalConfig)
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
const colorPickerRef = ref()
const resetDataDialogRef = ref()
interface ThemeDaType {
[key: string]: any
}
const isRowCountChange = ref(0) // 0未改变，1改变,2加载中
const themeValue = ref(localTheme.value.name)
const topTitleValue = ref(structuredClone(topTitle.value))
const cardColorValue = ref(structuredClone(cardColor.value))
const luckyCardColorValue = ref(structuredClone(luckyCardColor.value))
const textColorValue = ref(structuredClone(textColor.value))
const cardSizeValue = ref(structuredClone(cardSize.value))
const textSizeValue = ref(structuredClone(textSize.value))
const rowCountValue = ref(structuredClone(rowCount.value))
const languageValue = ref(structuredClone(userLanguage.value))
const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
const isShowAvatarValue = ref(structuredClone(isShowAvatar.value))
const patternColorValue = ref(structuredClone(patternColor.value))
const themeList = ref(daisyuiThemes)
const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
const backgroundImageValue = ref(backgroundImage.value)
const currentFontValue = ref(structuredClone(currentFont.value))
const currentTitleFontValue = ref(structuredClone(currentTitleFont.value))
const titleFontSyncGlobalValue = ref(structuredClone(titleFontSyncGlobal.value))
const formData = ref({
rowCount: rowCountValue,
})
const formErr = ref({
rowCount: '',
})
const schema = zod.object({
rowCount: zod.number({
error: i18n.global.t('error.require'),
// required_error: i18n.global.t('error.require'),
// invalid_type_error: i18n.global.t('error.requireNumber'),
})
.min(1, i18n.global.t('error.minNumber1'))
.max(100, i18n.global.t('error.maxNumber100')),
// 格式化
}) const { resetData, topTitleValue, languageValue, textSizeValue, currentFontValue, currentTitleFontValue, titleFontSyncGlobalValue, languageList, formErr, formData, cardSizeValue, isShowPrizeListValue, isShowAvatarValue, resetPersonLayout, isRowCountChange, themeValue, backgroundImageValue, cardColorValue, luckyCardColorValue, textColorValue, patternColorValue, imageList, rowCount, cardColor, patternColor, patternList, clearPattern, resetPattern, exportAllConfigData, importAllConfigData } = useViewModel()
type ValidatePayload = zod.infer<typeof schema>
const payload: ValidatePayload = {
rowCount: formData.value.rowCount,
}
function parseSchema(props: ValidatePayload) {
return schema.parseAsync(props)
}
function resetPersonLayout() {
isRowCountChange.value = 2
setTimeout(() => {
const alreadyLen = alreadyPersonList.value.length
const notLen = notPersonList.value.length
if (alreadyLen <= 0 && notLen <= 0) {
return
}
const allPersonList = alreadyPersonList.value.concat(notPersonList.value)
const newAlreadyPersonList = allPersonList.slice(0, alreadyLen)
const newNotPersonList = allPersonList.slice(alreadyLen, notLen + alreadyLen)
personConfig.deleteAllPerson()
personConfig.addNotPersonList(newNotPersonList)
personConfig.addAlreadyPersonList(newAlreadyPersonList, null)
isRowCountChange.value = 0
}, 1000)
}
function clearPattern() {
globalConfig.setPatternList([] as number[])
}
function resetPattern() {
globalConfig.resetPatternList()
}
function resetData() {
globalConfig.reset()
personConfig.reset()
prizeConfig.resetDefault()
// 删除所有indexDb
clearAllDbStore()
// 刷新页面
window.location.reload()
}
watch(() => formData.value.rowCount, () => {
payload.rowCount = formData.value.rowCount
parseSchema(payload).then((res) => {
if (res.rowCount) {
isRowCountChange.value = 1
globalConfig.setRowCount(res.rowCount)
}
}).catch((err) => {
formErr.value.rowCount = err.issues[0].message
})
})
watch(topTitleValue, (val) => {
globalConfig.setTopTitle(val)
})
watch(themeValue, (val: any) => {
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 })
watch(cardColorValue, (val: string) => {
globalConfig.setCardColor(val)
}, { deep: true })
watch(luckyCardColorValue, (val: string) => {
globalConfig.setLuckyCardColor(val)
}, { deep: true })
watch(patternColorValue, (val: string) => {
globalConfig.setPatterColor(val)
})
watch(textColorValue, (val: string) => {
globalConfig.setTextColor(val)
}, { deep: true })
watch(cardSizeValue, (val: { width: number, height: number }) => {
globalConfig.setCardSize(val)
}, { deep: true })
watch(isShowPrizeListValue, () => {
globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
})
watch(backgroundImageValue, (val) => {
globalConfig.setBackground(val)
})
watch(currentFontValue, (val) => {
globalConfig.setFont(val)
document.documentElement.style.setProperty('--app-font-family', `"${val}", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`)
})
watch(currentTitleFontValue, (val) => {
globalConfig.setTitleFont(val)
})
watch(titleFontSyncGlobalValue, (val) => {
globalConfig.setTitleFontSyncGlobal(val)
})
watch(languageValue, (val: string) => {
globalConfig.setLanguage(val)
})
watch(isShowAvatarValue, () => {
globalConfig.setIsShowAvatar(isShowAvatarValue.value)
})
onMounted(() => {
})
</script> </script>
<template> <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>
<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="resetData">
{{ t('button.confirm') }}
</button>
</form>
</div>
</div>
</dialog>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<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>
</div>
<div class="flex flex-wrap h-auto w-full gap-6"> <div class="flex flex-wrap h-auto w-full gap-6">
<!-- 数据操作 -->
<DataSetting :reset-data="resetData" :export-all-config-data="exportAllConfigData" :import-all-config-data="importAllConfigData" />
<!-- 文本设置（主标题、语言、文字大小） --> <!-- 文本设置（主标题、语言、文字大小） -->
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10"> <TextSetting
<legend class="fieldset-legend"> v-model:top-title-value="topTitleValue"
文本设置 v-model:language-value="languageValue"
</legend> v-model:text-size-value="textSizeValue"
v-model:current-font-value="currentFontValue"
<label class="label"> v-model:current-title-font-value="currentTitleFontValue"
<div class="label"> v-model:title-font-sync-global-value="titleFontSyncGlobalValue"
<span class="label-text">{{ t('table.title') }}</span> v-model:language-list="languageList"
</div> />
</label>
<input
v-model="topTitleValue" type="text" :placeholder="t('placeHolder.enterTitle')"
class="w-full max-w-xs input input-bordered"
>
<label class="w-full max-w-xs form-control">
<div class="label">
<span class="label-text">{{ t('table.language') }}</span>
</div>
<select v-model="languageValue" data-choose-theme class="w-full max-w-xs border-solid select border">
<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.textSize') }}</span>
</div>
<input
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 mt-3">
<div class="label">
<span class="label-text">全局字体</span>
</div>
<SelectFont v-model:selected-font="currentFontValue" />
</label>
<label class="flex flex-row w-full max-w-xs mt-5 gap-10 form-control">
<div class="w-3/4">
<div class="label">
<span class="label-text">标题字体</span>
</div>
<SelectFont v-model:selected-font="currentTitleFontValue" :disabled="titleFontSyncGlobalValue" />
</div>
<div class="flex flex-col gap-4">
<div class="label">
<span class="label-text">同全局</span>
</div>
<input type="checkbox" :checked="titleFontSyncGlobalValue" class="border-solid checkbox checkbox-secondary border" @change="titleFontSyncGlobalValue = !titleFontSyncGlobalValue">
</div>
</label>
</fieldset>
<!-- 布局设置（列数、卡片宽度、卡片高度 --> <!-- 布局设置（列数、卡片宽度、卡片高度 -->
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10"> <LayoutSetting
<legend class="fieldset-legend"> v-model:form-err="formErr"
布局设置 v-model:form-data="formData"
</legend> v-model:card-size-value="cardSizeValue"
<label class="flex flex-row items-center form-control"> v-model:is-show-prize-list-value="isShowPrizeListValue"
<div class=""> v-model:is-show-avatar-value="isShowAvatarValue"
<div class="label"> :reset-person-layout="resetPersonLayout"
<span class="label-text">{{ t('table.columnNumber') }}</span> :is-row-count-change="isRowCountChange"
<div class="help"> />
<span v-if="formErr.rowCount" class="text-xs text-red-400 help-text">
{{ formErr.rowCount }}
</span>
</div>
</div>
</div>
</label>
<div class="join">
<input
v-model="formData.rowCount" type="number" placeholder="Type here"
class="w-full input input-bordered join-item"
>
<div class="tooltip join-item" :data-tip="t('tooltip.resetLayout')">
<button class="btn btn-neutral w-[120px] join-item" :disabled="isRowCountChange !== 1" @click="resetPersonLayout">
<span>{{ t('button.setLayout') }}</span>
<span v-show="isRowCountChange === 2" class="loading loading-ring loading-md" />
</button>
</div>
</div>
<label class="flex flex-row w-full max-w-xs gap-10 form-control">
<div>
<div class="label">
<span class="label-text">{{ t('table.cardWidth') }}</span>
</div>
<input
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>
</div>
<input
v-model="cardSizeValue.height" type="number" placeholder="Type here"
class="w-full max-w-xs input input-bordered"
>
</div>
</label>
</fieldset>
<!-- 主题设置（主题、背景图片） --> <!-- 主题设置（主题、背景图片） -->
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10"> <ThemeSetting
<legend class="fieldset-legend"> v-model:theme-value="themeValue"
主题设置 v-model:background-image-value="backgroundImageValue"
</legend> v-model:card-color-value="cardColorValue"
v-model:lucky-card-color-value="luckyCardColorValue"
<div class="w-full max-w-xs form-control"> v-model:text-color-value="textColorValue"
<label class="label"> v-model:pattern-color-value="patternColorValue"
<span class="label-text">{{ t('table.theme') }}</span> :image-list="imageList"
</label> />
<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 v-for="(item, index) in themeList" :key="index" :value="item">
{{ item }}
</option>
</select>
</div>
<div class="w-full max-w-xs form-control">
<label class="label">
<span class="label-text">{{ t('table.backgroundImage') }}</span>
</label>
<select
v-model="backgroundImageValue" data-choose-theme
class="box-border w-full max-w-xs truncate border-solid select border-1"
>
<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"
>
<span class="truncate w-option-xs">{{ item.name }}</span>
</option>
</select>
<span class="label">请先前往
<a class="link link-info" @click="() => { router.push('image') }">
图片管理
</a>
上传图片</span>
</div>
<div class="grid w-full grid-cols-2 gap-4">
<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 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 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 items-center max-w-xs gap-1 form-control">
<label class="label">
<span class="label-text">{{ t('table.highlightColor') }}</span>
</label>
<ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue" />
</div>
</div>
</fieldset>
<!-- 图案设置 --> <!-- 图案设置 -->
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10"> <PatternSetting
<legend class="fieldset-legend"> :row-count="rowCount"
图案设置 :card-color="cardColor"
</legend> :pattern-color="patternColor"
<div class="items-center gap-24 mb-0 form-control"> :pattern-list="patternList"
<div> :clear-pattern="clearPattern"
<label class="label"> :reset-pattern="resetPattern"
<span class="label-text">{{ t('table.patternSetting') }}</span> />
</label>
<div class="h-auto">
<PatternSetting
:row-count="rowCount" :card-color="cardColor" :pattern-color="patternColor"
:pattern-list="patternList"
/>
</div>
</div>
<div class="flex w-full gap-3 m-0">
<button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
<span>{{ t('button.clearPattern') }}</span>
</button>
<div class="tooltip" :data-tip="t('tooltip.defaultLayout')">
<button class="mt-5 btn btn-info btn-sm" @click="resetPattern">
<span>{{ t('button.DefaultPattern') }}</span>
</button>
</div>
</div>
</div>
</fieldset>
<!-- 其他设置（是否常显奖项列表、是否显示头像） -->
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
<legend class="fieldset-legend">
其他设置
</legend>
<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>
<input
type="checkbox" :checked="isShowPrizeListValue" class="border-solid checkbox checkbox-secondary border"
@change="isShowPrizeListValue = !isShowPrizeListValue"
>
</div>
<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.avatarDisplay') }}</span>
</div>
<input
type="checkbox" :checked="isShowAvatarValue" class="border-solid checkbox checkbox-secondary border"
@change="isShowAvatarValue = !isShowAvatarValue"
>
</div>
</fieldset>
</div> </div>
</div> </div>
</template> </template>

87
src/views/Config/Global/FaceConfig/parts/DataSetting.vue Normal file
View File

@@ -0,0 +1,87 @@
<script setup lang='ts'>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import UploadJsonModal from '../components/UploadDialog.vue'
interface Props {
resetData: () => void
exportAllConfigData: () => void
importAllConfigData: (data: any) => void
}
defineProps<Props>()
const { t } = useI18n()
const resetDataDialogRef = ref()
const uploadVisible = ref(false)
</script>
<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>
<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="resetData">
{{ t('button.confirm') }}
</button>
</form>
</div>
</div>
</dialog>
<UploadJsonModal v-model:visible="uploadVisible" :import-all-config-data="importAllConfigData" />
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
<legend class="fieldset-legend">
数据操作
</legend>
<label class="flex flex-row items-center form-control">
<div class="">
<div class="label flex flex-col justify-start items-start">
<span class="label-text text-left">重置数据</span>
<div class="help">
<button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">
{{ t('button.resetAllData') }}
</button>
</div>
</div>
</div>
</label>
<!-- <label class="flex flex-row items-center form-control">
<div class="">
<div class="label flex flex-col justify-start items-start">
<span class="label-text text-left">导出数据</span>
<div class="help">
<button class="btn btn-sm btn-primary" @click="exportAllConfigData">
导出全部数据
</button>
</div>
</div>
</div>
</label>
<label class="flex flex-row items-center form-control">
<div class="">
<div class="label flex flex-col justify-start items-start">
<span class="label-text text-left">导入数据</span>
<div class="help">
<button class="btn btn-sm btn-primary" @click="uploadVisible = true">
导入设置
</button>
</div>
</div>
</div>
</label> -->
</fieldset>
</template>
<style scoped>
</style>

91
src/views/Config/Global/FaceConfig/parts/LayoutSetting.vue Normal file
View File

@@ -0,0 +1,91 @@
<script setup lang='ts'>
import { useI18n } from 'vue-i18n'
interface Props {
resetPersonLayout: () => void
isRowCountChange: number
}
defineProps<Props>()
const { t } = useI18n()
const formErr = defineModel<{ rowCount: string }>('formErr', { required: true })
const formData = defineModel<{ rowCount: number }>('formData', { required: true })
const cardSizeValue = defineModel<{ width: number, height: number }>('cardSizeValue', { required: true })
const isShowPrizeListValue = defineModel<boolean>('isShowPrizeListValue', { required: true })
const isShowAvatarValue = defineModel<boolean>('isShowAvatarValue', { required: false })
</script>
<template>
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
<legend class="fieldset-legend">
布局设置
</legend>
<label class="flex flex-row items-center form-control">
<div class="">
<div class="label">
<span class="label-text">{{ t('table.columnNumber') }}</span>
<div class="help">
<span v-if="formErr.rowCount" class="text-xs text-red-400 help-text">
{{ formErr.rowCount }}
</span>
</div>
</div>
</div>
</label>
<div class="join">
<input
v-model="formData.rowCount" type="number" placeholder="Type here"
class="w-full input input-bordered join-item"
>
<div class="tooltip join-item" :data-tip="t('tooltip.resetLayout')">
<button class="btn btn-neutral w-[120px] join-item" :disabled="isRowCountChange !== 1" @click="resetPersonLayout">
<span>{{ t('button.setLayout') }}</span>
<span v-show="isRowCountChange === 2" class="loading loading-ring loading-md" />
</button>
</div>
</div>
<label class="flex flex-row w-full max-w-xs gap-10 form-control">
<div>
<div class="label">
<span class="label-text">{{ t('table.cardWidth') }}</span>
</div>
<input
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>
</div>
<input
v-model="cardSizeValue.height" type="number" placeholder="Type here"
class="w-full max-w-xs input input-bordered"
>
</div>
</label>
<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>
<input
type="checkbox" :checked="isShowPrizeListValue" class="border-solid checkbox checkbox-secondary border"
@change="isShowPrizeListValue = !isShowPrizeListValue"
>
</div>
<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.avatarDisplay') }}</span>
</div>
<input
type="checkbox" :checked="isShowAvatarValue" class="border-solid checkbox checkbox-secondary border"
@change="isShowAvatarValue = !isShowAvatarValue"
>
</div>
</fieldset>
</template>
<style scoped>
</style>

50
src/views/Config/Global/FaceConfig/parts/PatternSetting.vue Normal file
View File

@@ -0,0 +1,50 @@
<script setup lang='ts'>
import { useI18n } from 'vue-i18n'
import PatternEdit from '../components/PatternEdit.vue'
interface Props {
rowCount: number
cardColor: string
patternColor: string
patternList: number[]
clearPattern: () => void
resetPattern: () => void
}
defineProps<Props>()
const { t } = useI18n()
</script>
<template>
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
<legend class="fieldset-legend">
图案设置
</legend>
<div class="items-center gap-24 mb-0 form-control">
<div>
<label class="label">
<span class="label-text">{{ t('table.patternSetting') }}</span>
</label>
<div class="h-auto">
<PatternEdit
:row-count="rowCount" :card-color="cardColor" :pattern-color="patternColor"
:pattern-list="patternList"
/>
</div>
</div>
<div class="flex w-full gap-3 m-0">
<button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
<span>{{ t('button.clearPattern') }}</span>
</button>
<div class="tooltip" :data-tip="t('tooltip.defaultLayout')">
<button class="mt-5 btn btn-info btn-sm" @click="resetPattern">
<span>{{ t('button.DefaultPattern') }}</span>
</button>
</div>
</div>
</div>
</fieldset>
</template>
<style scoped>
</style>

72
src/views/Config/Global/FaceConfig/parts/TextSetting.vue Normal file
View File

@@ -0,0 +1,72 @@
<script setup lang='ts'>
import { useI18n } from 'vue-i18n'
import SelectFont from '../components/SelectFont.vue'
const { t } = useI18n()
const languageList = defineModel<any[]>('languageList')
const topTitleValue = defineModel<string>('topTitleValue', { default: '' })
const languageValue = defineModel<string>('languageValue', { default: 'zh-CN' })
const textSizeValue = defineModel<number>('textSizeValue')
const currentFontValue = defineModel<string>('currentFontValue', { default: '', type: String })
const currentTitleFontValue = defineModel<string>('currentTitleFontValue', { default: '', type: String })
const titleFontSyncGlobalValue = defineModel<boolean>('titleFontSyncGlobalValue')
</script>
<template>
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
<legend class="fieldset-legend">
文本设置
</legend>
<label class="label">
<div class="label">
<span class="label-text">{{ t('table.title') }}</span>
</div>
</label>
<input
v-model="topTitleValue" type="text" :placeholder="t('placeHolder.enterTitle')"
class="w-full max-w-xs input input-bordered"
>
<label class="w-full max-w-xs form-control">
<div class="label">
<span class="label-text">{{ t('table.language') }}</span>
</div>
<select v-model="languageValue" data-choose-theme class="w-full max-w-xs border-solid select border">
<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.textSize') }}</span>
</div>
<input
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 mt-3">
<div class="label">
<span class="label-text">全局字体</span>
</div>
<SelectFont v-model:selected-font="currentFontValue" />
</label>
<label class="flex flex-row w-full max-w-xs mt-5 gap-10 form-control">
<div class="w-3/4">
<div class="label">
<span class="label-text">标题字体</span>
</div>
<SelectFont v-model:selected-font="currentTitleFontValue" :disabled="titleFontSyncGlobalValue" />
</div>
<div class="flex flex-col gap-4">
<div class="label">
<span class="label-text">同全局</span>
</div>
<input type="checkbox" :checked="titleFontSyncGlobalValue" class="border-solid checkbox checkbox-secondary border" @change="titleFontSyncGlobalValue = !titleFontSyncGlobalValue">
</div>
</label>
</fieldset>
</template>
<style scoped>
</style>

101
src/views/Config/Global/FaceConfig/parts/ThemeSetting.vue Normal file
View File

@@ -0,0 +1,101 @@
<script setup lang='ts'>
import { reactive } from 'vue'
import { ColorPicker } from 'vue3-colorpicker'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { daisyuiThemes } from '@/constant/theme'
import 'vue3-colorpicker/style.css'
interface Props {
imageList: Array<{ name: string, url: string, id: string }>
}
defineProps<Props>()
const themeList = reactive(daisyuiThemes)
const router = useRouter()
const { t } = useI18n()
const themeValue = defineModel<string>('themeValue')
const backgroundImageValue = defineModel<object>('backgroundImageValue')
const cardColorValue = defineModel<string>('cardColorValue')
const luckyCardColorValue = defineModel<string>('luckyCardColorValue')
const textColorValue = defineModel<string>('textColorValue')
const patternColorValue = defineModel<string>('patternColorValue')
</script>
<template>
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
<legend class="fieldset-legend">
主题设置
</legend>
<div class="w-full max-w-xs form-control">
<label class="label">
<span class="label-text">{{ t('table.theme') }}</span>
</label>
<select v-model="themeValue" data-choose-theme class="w-full max-w-xs border-solid select border">
<option disabled selected>
{{ t('table.theme') }}
</option>
<option v-for="(item, index) in themeList" :key="index" :value="item">
{{ item }}
</option>
</select>
</div>
<div class="w-full max-w-xs form-control">
<label class="label">
<span class="label-text">{{ t('table.backgroundImage') }}</span>
</label>
<select
v-model="backgroundImageValue" data-choose-theme
class="box-border w-full max-w-xs truncate border-solid select border"
>
<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"
>
<span class="truncate w-option-xs">{{ item.name }}</span>
</option>
</select>
<span class="label">请先前往
<a class="link link-info" @click="() => { router.push('image') }">
图片管理
</a>
上传图片</span>
</div>
<div class="grid w-full grid-cols-2 gap-4">
<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 v-model="cardColorValue" v-model:pure-color="cardColorValue" />
</div>
<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 v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
</div>
<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 v-model="textColorValue" v-model:pure-color="textColorValue" />
</div>
<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>
<ColorPicker v-model="patternColorValue" v-model:pure-color="patternColorValue" />
</div>
</div>
</fieldset>
</template>
<style scoped>
</style>

5
src/views/Config/Global/FaceConfig/parts/index.ts Normal file
View File

@@ -0,0 +1,5 @@
export { default as DataSetting } from './DataSetting.vue'
export { default as LayoutSetting } from './LayoutSetting.vue'
export { default as PatternSetting } from './PatternSetting.vue'
export { default as TextSetting } from './TextSetting.vue'
export { default as ThemeSetting } from './ThemeSetting.vue'

207
src/views/Config/Global/FaceConfig/useViewModel.ts Normal file
View File

@@ -0,0 +1,207 @@
import { storeToRefs } from 'pinia'
import { onMounted, ref, watch } from 'vue'
import { z as zod } from 'zod'
import i18n, { languageList } from '@/locales/i18n'
import useStore from '@/store'
import { themeChange } from '@/utils'
import { clearAllDbStore } from '@/utils/localforage'
export function useViewModel() {
type ValidatePayload = zod.infer<typeof schema>
const globalConfig = useStore().globalConfig
const personConfig = useStore().personConfig
const prizeConfig = useStore().prizeConfig
const { getGlobalConfig: globalConfigData, getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList, getLanguage: userLanguage, getBackground: backgroundImage, getFont: currentFont, getTitleFont: currentTitleFont, getTitleFontSyncGlobal: titleFontSyncGlobal, getImageList: imageList, getIsShowAvatar: isShowAvatar,
} = storeToRefs(globalConfig)
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
const isRowCountChange = ref(0) // 0未改变，1改变,2加载中
const themeValue = ref(localTheme.value.name)
const topTitleValue = ref(structuredClone(topTitle.value))
const cardColorValue = ref(structuredClone(cardColor.value))
const luckyCardColorValue = ref(structuredClone(luckyCardColor.value))
const textColorValue = ref(structuredClone(textColor.value))
const cardSizeValue = ref(structuredClone(cardSize.value))
const textSizeValue = ref(structuredClone(textSize.value))
const rowCountValue = ref(structuredClone(rowCount.value))
const languageValue = ref(structuredClone(userLanguage.value))
const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
const isShowAvatarValue = ref(structuredClone(isShowAvatar.value))
const patternColorValue = ref(structuredClone(patternColor.value))
const backgroundImageValue = ref(backgroundImage.value)
const currentFontValue = ref(structuredClone(currentFont.value))
const currentTitleFontValue = ref(structuredClone(currentTitleFont.value))
const titleFontSyncGlobalValue = ref(structuredClone(titleFontSyncGlobal.value))
const formData = ref({
rowCount: rowCountValue,
})
const formErr = ref({
rowCount: '',
})
const schema = zod.object({
rowCount: zod.number({
error: i18n.global.t('error.require'),
// required_error: i18n.global.t('error.require'),
// invalid_type_error: i18n.global.t('error.requireNumber'),
})
.min(1, i18n.global.t('error.minNumber1'))
.max(100, i18n.global.t('error.maxNumber100')),
// 格式化
})
const payload: ValidatePayload = {
rowCount: formData.value.rowCount,
}
function parseSchema(props: ValidatePayload) {
return schema.parseAsync(props)
}
function resetPersonLayout() {
isRowCountChange.value = 2
setTimeout(() => {
const alreadyLen = alreadyPersonList.value.length
const notLen = notPersonList.value.length
if (alreadyLen <= 0 && notLen <= 0) {
return
}
const allPersonList = alreadyPersonList.value.concat(notPersonList.value)
const newAlreadyPersonList = allPersonList.slice(0, alreadyLen)
const newNotPersonList = allPersonList.slice(alreadyLen, notLen + alreadyLen)
personConfig.deleteAllPerson()
personConfig.addNotPersonList(newNotPersonList)
personConfig.addAlreadyPersonList(newAlreadyPersonList, null)
isRowCountChange.value = 0
}, 1000)
}
function clearPattern() {
globalConfig.setPatternList([] as number[])
}
function resetPattern() {
globalConfig.resetPatternList()
}
function resetData() {
globalConfig.reset()
personConfig.reset()
prizeConfig.resetDefault()
// 删除所有indexDb
clearAllDbStore()
// 刷新页面
window.location.reload()
}
function exportAllConfigData() {
// const globalConfigData = globalConfig.getGlobalConfig()
// console.log(globalConfigData.value)
// const globalConfigData = globalConfig.getGlobalConfig()
const dataStr = JSON.stringify(globalConfigData.value, null, 2)
const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}`
const exportFileDefaultName = 'global-config.json'
const linkElement = document.createElement('a')
linkElement.setAttribute('href', dataUri)
linkElement.setAttribute('download', exportFileDefaultName)
linkElement.click()
}
function importAllConfigData(data: any) {
globalConfig.setGlobalConfig(data)
window.location.reload()
}
watch(() => formData.value.rowCount, () => {
payload.rowCount = formData.value.rowCount
parseSchema(payload).then((res) => {
if (res.rowCount) {
isRowCountChange.value = 1
globalConfig.setRowCount(res.rowCount)
}
}).catch((err) => {
formErr.value.rowCount = err.issues[0].message
})
})
watch(topTitleValue, (val) => {
globalConfig.setTopTitle(val)
})
watch(themeValue, (val: any) => {
globalConfig.setTheme({ name: val })
themeChange(val)
}, { deep: true })
watch(cardColorValue, (val: string) => {
globalConfig.setCardColor(val)
}, { deep: true })
watch(luckyCardColorValue, (val: string) => {
globalConfig.setLuckyCardColor(val)
}, { deep: true })
watch(patternColorValue, (val: string) => {
globalConfig.setPatterColor(val)
})
watch(textColorValue, (val: string) => {
globalConfig.setTextColor(val)
}, { deep: true })
watch(cardSizeValue, (val: { width: number, height: number }) => {
globalConfig.setCardSize(val)
}, { deep: true })
watch(isShowPrizeListValue, () => {
globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
})
watch(backgroundImageValue, (val) => {
globalConfig.setBackground(val)
})
watch(currentFontValue, (val) => {
globalConfig.setFont(val)
document.documentElement.style.setProperty('--app-font-family', `"${val}", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`)
})
watch(currentTitleFontValue, (val) => {
globalConfig.setTitleFont(val)
})
watch(titleFontSyncGlobalValue, (val) => {
globalConfig.setTitleFontSyncGlobal(val)
})
watch(languageValue, (val: string) => {
globalConfig.setLanguage(val)
})
watch(isShowAvatarValue, () => {
globalConfig.setIsShowAvatar(isShowAvatarValue.value)
})
onMounted(() => {
})
return {
resetData,
topTitleValue,
languageValue,
textSizeValue,
currentFontValue,
currentTitleFontValue,
titleFontSyncGlobalValue,
languageList,
formErr,
formData,
cardSizeValue,
isShowPrizeListValue,
isShowAvatarValue,
resetPersonLayout,
isRowCountChange,
themeValue,
backgroundImageValue,
cardColorValue,
luckyCardColorValue,
textColorValue,
patternColorValue,
imageList,
rowCount,
cardColor,
patternColor,
patternList,
clearPattern,
resetPattern,
exportAllConfigData,
importAllConfigData,
}
}

1
src/views/Config/Global/MusicConfig/components/UploadDialog.vue
View File

@@ -10,7 +10,6 @@ import FileUpload from '@/components/FileUpload/index.vue'
import useStore from '@/store' import useStore from '@/store'
const toast = useToast() const toast = useToast()
const { t } = useI18n()
const limitType = ref('audio/*') const limitType = ref('audio/*')
const visible = defineModel('visible', { const visible = defineModel('visible', {
type: Boolean, type: Boolean,

239
src/views/Config/Person/PersonAll.vue
View File

@@ -1,239 +0,0 @@
<!-- eslint-disable vue/no-parsing-error -->
<script setup lang='ts'>
import type { IPersonConfig } from '@/types/storeType'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import * as XLSX from 'xlsx'
import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
import i18n from '@/locales/i18n'
import useStore from '@/store'
import { readFileBinary } from '@/utils/file'
import ImportExcelWorker from './importExcel.worker?worker'
const worker: Worker | null = new ImportExcelWorker()
const { t } = useI18n()
const personConfig = useStore().personConfig
const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
const limitType = '.xlsx,.xls'
// const personList = ref<any[]>([])
const resetDataDialog = ref()
const delAllDataDialog = ref()
function sendMessage(message: any) {
if (worker) {
worker.postMessage(message)
}
}
// 方法
function startWorker(data: Event) {
sendMessage({ type: 'start', data })
}
async function handleFileChange(e: Event) {
// worker = new ImportExcelWorker()
if (worker) {
worker.onmessage = (e) => {
if (e.data.type === 'done') {
personConfig.resetPerson()
personConfig.addNotPersonList(e.data.data)
}
}
}
const dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
startWorker(dataBinary)
}
function exportData() {
let data = JSON.parse(JSON.stringify(allPersonList.value))
// 排除一些字段
for (let i = 0; i < data.length; i++) {
delete data[i].x
delete data[i].y
delete data[i].id
delete data[i].createTime
delete data[i].updateTime
delete data[i].prizeId
// 修改字段名称
if (data[i].isWin) {
data[i].isWin = i18n.global.t('data.yes')
}
else {
data[i].isWin = i18n.global.t('data.no')
}
// 格式化数组为
data[i].prizeTime = data[i].prizeTime.join(',')
data[i].prizeName = data[i].prizeName.join(',')
}
let dataString = JSON.stringify(data)
dataString = dataString
.replaceAll(/uid/g, i18n.global.t('data.number'))
.replaceAll(/isWin/g, i18n.global.t('data.isWin'))
.replaceAll(/department/g, i18n.global.t('data.department'))
.replaceAll(/name/g, i18n.global.t('data.name'))
.replaceAll(/identity/g, i18n.global.t('data.identity'))
.replaceAll(/prizeName/g, i18n.global.t('data.prizeName'))
.replaceAll(/prizeTime/g, i18n.global.t('data.prizeTime'))
data = JSON.parse(dataString)
if (data.length > 0) {
const dataBinary = XLSX.utils.json_to_sheet(data)
const dataBinaryBinary = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(dataBinaryBinary, dataBinary, 'Sheet1')
XLSX.writeFile(dataBinaryBinary, 'data.xlsx')
}
}
function resetData() {
personConfig.resetAlreadyPerson()
}
function deleteAll() {
personConfig.deleteAllPerson()
}
function delPersonItem(row: IPersonConfig) {
personConfig.deletePerson(row)
}
const tableColumns = [
{
label: i18n.global.t('data.number'),
props: 'uid',
},
{
label: i18n.global.t('data.name'),
props: 'name',
},
{
label: i18n.global.t('data.department'),
props: 'department',
},
{
label: i18n.global.t('data.avatar'),
props: 'avatar',
formatValue(row: any) {
return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
},
},
{
label: i18n.global.t('data.identity'),
props: 'identity',
},
{
label: i18n.global.t('data.isWin'),
props: 'isWin',
formatValue(row: IPersonConfig) {
return row.isWin ? i18n.global.t('data.yes') : i18n.global.t('data.no')
},
},
{
label: i18n.global.t('data.operation'),
actions: [
// {
// label: '编辑',
// type: 'btn-info',
// onClick: (row: any) => {
// delPersonItem(row)
// }
// },
{
label: i18n.global.t('data.delete'),
type: 'btn-error',
onClick: (row: IPersonConfig) => {
delPersonItem(row)
},
},
],
},
]
onMounted(() => {
})
</script>
<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>
<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="resetData">
{{ t('button.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>
<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="deleteAll">
{{ t('button.confirm') }}
</button>
</form>
</div>
</div>
</dialog>
<div class="min-w-1000px">
<h2>{{ t('viewTitle.personManagement') }}</h2>
<div class="flex gap-3">
<button class="btn btn-error btn-sm" @click="delAllDataDialog.showModal()">
{{ t('button.allDelete') }}
</button>
<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')">
<input
id="explore" type="file" class="" style="display: none" :accept="limitType"
@change="handleFileChange"
>
<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-accent btn-sm" @click="exportData">
{{ t('button.exportResult') }}
</button>
<div>
<span>{{ t('table.luckyPeopleNumber') }}:</span>
<span>{{ alreadyPersonList.length }}</span>
<span>&nbsp;/&nbsp;</span>
<span>{{ allPersonList.length }}</span>
</div>
</div>
<DaiysuiTable :table-columns="tableColumns" :data="allPersonList" />
</div>
</template>
<style lang='scss' scoped></style>

27
src/views/Config/Person/PersonAll/importExcel.worker.ts
View File

@@ -4,20 +4,43 @@ import { addOtherInfo } from '@/utils'
interface WorkerMessage { interface WorkerMessage {
type: 'start' | 'stop' | 'reset' type: 'start' | 'stop' | 'reset'
data: any data: any
templateData: any
} }
let allData: any[] = [] let allData: any[] = []
function headersEqual(template: string[], actual: string[]): boolean {
return template.length === actual.length
&& template.every((value, index) => value === actual[index])
}
// 接收主线程消息 // 接收主线程消息
globalThis.onmessage = async (e: MessageEvent<WorkerMessage>) => { globalThis.onmessage = async (e: MessageEvent<WorkerMessage>) => {
switch (e.data.type) { switch (e.data.type) {
case 'start': case 'start':
{ {
const fileData = e.data.data const fileData = e.data.data
// const dataBinary = await readFileBinary(((fileEvent.target as HTMLInputElement).files as FileList)[0]!) const templateData = e.data.templateData
const workBook = XLSX.read(fileData, { type: 'binary', cellDates: true }) const workBook = XLSX.read(fileData, { type: 'binary', cellDates: true })
const workSheet = workBook.Sheets[workBook.SheetNames[0]] const workSheet = workBook.Sheets[workBook.SheetNames[0]]
const excelData = XLSX.utils.sheet_to_json(workSheet) const excelData: object[] = XLSX.utils.sheet_to_json(workSheet)
const templateWorkBook = XLSX.read(templateData, { type: 'array', cellDates: true })
const templateWorkSheet = templateWorkBook.Sheets[templateWorkBook.SheetNames[0]]
const templateExcelData: object[] = XLSX.utils.sheet_to_json(templateWorkSheet)
const templateHeader = Object.keys(templateExcelData[0])
const header = Object.keys(excelData[0])
if (!headersEqual(templateHeader, header)) {
globalThis.postMessage({
type: 'error',
data: null,
message: '表头不一致，请先下载模板然后修改',
})
return
}
allData = addOtherInfo(excelData) allData = addOtherInfo(excelData)
globalThis.postMessage({ globalThis.postMessage({
type: 'done', type: 'done',

31
src/views/Config/Person/PersonAll/useViewModel.ts
View File

@@ -2,11 +2,12 @@ import type { Ref } from 'vue'
import type { IPersonConfig } from '@/types/storeType' import type { IPersonConfig } from '@/types/storeType'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { inject } from 'vue' import { inject } from 'vue'
import { toast } from 'vue-sonner'
import * as XLSX from 'xlsx' import * as XLSX from 'xlsx'
import { loadingKey } from '@/components/Loading' import { loadingKey } from '@/components/Loading'
import i18n from '@/locales/i18n' import i18n from '@/locales/i18n'
import useStore from '@/store' import useStore from '@/store'
import { readFileBinary } from '@/utils/file' import { readFileBinary, readLocalFileAsArraybuffer } from '@/utils/file'
import ImportExcelWorker from './importExcel.worker?worker' import ImportExcelWorker from './importExcel.worker?worker'
export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<HTMLInputElement> }) { export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<HTMLInputElement> }) {
@@ -48,13 +49,6 @@ export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<H
{ {
label: i18n.global.t('data.operation'), label: i18n.global.t('data.operation'),
actions: [ actions: [
// {
// label: '编辑',
// type: 'btn-info',
// onClick: (row: any) => {
// delPersonItem(row)
// }
// },
{ {
label: i18n.global.t('data.delete'), label: i18n.global.t('data.delete'),
type: 'btn-error', type: 'btn-error',
@@ -66,6 +60,18 @@ export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<H
], ],
}, },
] ]
async function getExcelTemplateContent() {
const locale = i18n.global.locale.value
if (locale === 'zhCn') {
const templateData = await readLocalFileAsArraybuffer('/log-lottery/人口登记表-zhCn.xlsx')
return templateData
}
else {
const templateData = await readLocalFileAsArraybuffer('/log-lottery/personListTemplate-en.xlsx')
return templateData
}
}
/// 向worker发送消息 /// 向worker发送消息
function sendWorkerMessage(message: any) { function sendWorkerMessage(message: any) {
if (worker) { if (worker) {
@@ -73,15 +79,15 @@ export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<H
} }
} }
/// 开始导入 /// 开始导入
function startWorker(data: Event) { async function startWorker(data: string) {
loading?.show() loading?.show()
sendWorkerMessage({ type: 'start', data }) getExcelTemplateContent()
sendWorkerMessage({ type: 'start', data, templateData: await getExcelTemplateContent() })
} }
/** /**
* 获取用户数据 * 获取用户数据
*/ */
async function handleFileChange(e: Event) { async function handleFileChange(e: Event) {
// worker = new ImportExcelWorker()
if (worker) { if (worker) {
worker.onmessage = (e) => { worker.onmessage = (e) => {
if (e.data.type === 'done') { if (e.data.type === 'done') {
@@ -90,6 +96,9 @@ export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<H
// 导入成功后清空file input // 导入成功后清空file input
clearFileInput() clearFileInput()
} }
if (e.data.type === 'error') {
toast.warning(e.data.message || '导入错误')
}
loading?.hide() loading?.hide()
} }
} }

32
src/views/Config/Person/importExcel.worker.ts
View File

@@ -1,32 +0,0 @@
import * as XLSX from 'xlsx'
import { addOtherInfo } from '@/utils'
// 定义消息类型
interface WorkerMessage {
type: 'start' | 'stop' | 'reset'
data: any
}
let allData: any[] = []
// 接收主线程消息
globalThis.onmessage = async (e: MessageEvent<WorkerMessage>) => {
switch (e.data.type) {
case 'start':
{
const fileData = e.data.data
// const dataBinary = await readFileBinary(((fileEvent.target as HTMLInputElement).files as FileList)[0]!)
const workBook = XLSX.read(fileData, { type: 'binary', cellDates: true })
const workSheet = workBook.Sheets[workBook.SheetNames[0]]
const excelData = XLSX.utils.sheet_to_json(workSheet)
allData = addOtherInfo(excelData)
globalThis.postMessage({
type: 'done',
data: allData,
message: '读取完成',
})
break
}
default:
break
}
}