diff --git a/.gitignore b/.gitignore
index 168a6ad..31afa73 100644
--- a/.gitignore
+++ b/.gitignore
@@ -81,7 +81,7 @@ web_modules/
 .env.production.local
 .env.local
 
-components.d.ts
+**/components.d.ts
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..e29745a
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,2 @@
+engine-strict=true
+
diff --git a/package.json b/package.json
index 402a81e..5a177cf 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
         "prepare": "husky"
     },
     "dependencies": {
-        "@tweenjs/tween.js": "^23.1.2",
+        "@tweenjs/tween.js": "23.1.2",
         "@vueuse/core": "^14.1.0",
         "axios": "^1.7.8",
         "canvas-confetti": "^1.9.3",
@@ -29,7 +29,7 @@
         "github-markdown-css": "^5.8.0",
         "localforage": "^1.10.0",
         "lodash-es": "^4.17.21",
-        "lucide-vue-next": "^0.556.0",
+        "lucide-vue-next": "^0.559.0",
         "markdown-it": "^14.1.0",
         "pinia": "^3.0.3",
         "pinia-plugin-persist": "^1.0.0",
@@ -44,6 +44,7 @@
         "vue-draggable-plus": "^0.6.0",
         "vue-i18n": "^11.2.2",
         "vue-router": "^4.5.0",
+        "vue-sonner": "^2.0.9",
         "vue-toast-notification": "^3",
         "vue3-colorpicker": "^2.3.0",
         "xlsx": "^0.18.5",
@@ -62,7 +63,7 @@
         "@types/canvas-confetti": "^1.6.4",
         "@types/lodash-es": "^4.17.12",
         "@types/markdown-it": "^14.1.2",
-        "@types/node": "^24.10.2",
+        "@types/node": "^25.0.0",
         "@types/three": "0.166.0",
         "@typescript-eslint/eslint-plugin": "^8.49.0",
         "@typescript-eslint/parser": "^8.49.0",
@@ -101,5 +102,8 @@
         "vitest": "^4.0.15",
         "vue-tsc": "^3.0.7"
     },
+    "engines": {
+        "node": ">=22.x"
+    },
     "packageManager": "pnpm@10.8.1+sha1.a4eff733d0c4ccc179997f0ef4986f6e92427781"
-}
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f80f2e6..1727593 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,7 +9,7 @@ importers:
   .:
     dependencies:
       '@tweenjs/tween.js':
-        specifier: ^23.1.2
+        specifier: 23.1.2
         version: 23.1.2
       '@vueuse/core':
         specifier: ^14.1.0
@@ -42,8 +42,8 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       lucide-vue-next:
-        specifier: ^0.556.0
-        version: 0.556.0(vue@3.5.13(typescript@5.9.3))
+        specifier: ^0.559.0
+        version: 0.559.0(vue@3.5.13(typescript@5.9.3))
       markdown-it:
         specifier: ^14.1.0
         version: 14.1.0
@@ -86,6 +86,9 @@ importers:
       vue-router:
         specifier: ^4.5.0
         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:
         specifier: ^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)
       '@tailwindcss/vite':
         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':
         specifier: ^2.9.5
         version: 2.9.5
@@ -136,8 +139,8 @@ importers:
         specifier: ^14.1.2
         version: 14.1.2
       '@types/node':
-        specifier: ^24.10.2
-        version: 24.10.2
+        specifier: ^25.0.0
+        version: 25.0.0
       '@types/three':
         specifier: 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)
       '@vitejs/plugin-legacy':
         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':
         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':
         specifier: ^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))
       vite:
         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:
         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:
         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:
         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:
         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:
         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:
         specifier: ^3.0.7
         version: 3.0.7(typescript@5.9.3)
@@ -1907,8 +1910,8 @@ packages:
   '@types/node@20.19.17':
     resolution: {integrity: sha512-gfehUI8N1z92kygssiuWvLiwcbOB3IRktR6hTDgJlXMYh5OvkPSRmgfoBUmfZt+vhwJtX7v1Yw4KvvAf7c5QKQ==}
 
-  '@types/node@24.10.2':
-    resolution: {integrity: sha512-WOhQTZ4G8xZ1tjJTvKOpyEVSGgOTvJAfDK3FNFgELyaTpzhdgHVHeqW8V+UJvzF5BT+/B54T/1S2K6gd9c7bbA==}
+  '@types/node@25.0.0':
+    resolution: {integrity: sha512-rl78HwuZlaDIUSeUKkmogkhebA+8K1Hy7tddZuJ3D0xV8pZSfsYGTsliGUol1JPzu9EKnTxPC4L1fiWouStRew==}
 
   '@types/sortablejs@1.15.9':
     resolution: {integrity: sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==}
@@ -4082,8 +4085,8 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
-  lucide-vue-next@0.556.0:
-    resolution: {integrity: sha512-JvdCM2smkWrMDhkfD/FpZiWekkbWD6MZLstIFx/FOVZgULrnMr5hegCB9LlTdgllEFnQYQs8hhHC1WYcAV9HTA==}
+  lucide-vue-next@0.559.0:
+    resolution: {integrity: sha512-Fin9uS22G9j9OxOA2iv9FF89YchRhjTxFiRGwq2OzVIY/whL+kJpGVwvKEC7/pA8OMj7fIASswhJnto8mxhlRQ==}
     peerDependencies:
       vue: '>=3.0.1'
 
@@ -5582,6 +5585,20 @@ packages:
     peerDependencies:
       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:
     resolution: {integrity: sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==}
 
@@ -7334,12 +7351,12 @@ snapshots:
       postcss-selector-parser: 6.0.10
       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:
       '@tailwindcss/node': 4.1.13
       '@tailwindcss/oxide': 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': {}
 
@@ -7478,7 +7495,7 @@ snapshots:
     dependencies:
       undici-types: 6.21.0
 
-  '@types/node@24.10.2':
+  '@types/node@25.0.0':
     dependencies:
       undici-types: 7.16.0
 
@@ -7488,7 +7505,7 @@ snapshots:
 
   '@types/svgo@2.6.4':
     dependencies:
-      '@types/node': 24.10.2
+      '@types/node': 25.0.0
 
   '@types/three@0.166.0':
     dependencies:
@@ -7703,7 +7720,7 @@ snapshots:
       '@typescript-eslint/types': 8.49.0
       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:
       '@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
       systemjs: 6.15.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)
+      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:
       - 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:
       '@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)
 
   '@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)
     optionalDependencies:
       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:
       - supports-color
 
@@ -7748,13 +7765,13 @@ snapshots:
       chai: 6.2.1
       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:
       '@vitest/spy': 4.0.15
       estree-walker: 3.0.3
       magic-string: 0.30.21
     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':
     dependencies:
@@ -7782,7 +7799,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       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':
     dependencies:
@@ -7871,14 +7888,14 @@ snapshots:
     dependencies:
       '@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:
       '@vue/devtools-kit': 8.0.2
       '@vue/devtools-shared': 8.0.2
       mitt: 3.0.1
       nanoid: 5.1.5
       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)
     transitivePeerDependencies:
       - vite
@@ -9649,7 +9666,7 @@ snapshots:
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 24.10.2
+      '@types/node': 25.0.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
     optional: true
@@ -9864,7 +9881,7 @@ snapshots:
     dependencies:
       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:
       vue: 3.5.13(typescript@5.9.3)
 
@@ -11356,26 +11373,26 @@ snapshots:
 
   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:
       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-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: 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@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:
-      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:
       chalk: 4.1.2
       debug: 4.3.4
       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:
       - 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:
       ansis: 4.1.0
       debug: 4.4.3
@@ -11385,12 +11402,12 @@ snapshots:
       perfect-debounce: 2.0.0
       sirv: 3.0.2
       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-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: 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@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))
     transitivePeerDependencies:
       - 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:
       '@types/svgo': 2.6.4
       cors: 2.8.5
@@ -11400,26 +11417,26 @@ snapshots:
       pathe: 0.2.0
       svg-baker: 1.7.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:
       - 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:
-      '@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-shared': 8.0.2
       execa: 9.6.0
       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-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-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: 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@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@25.0.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.81.0)(terser@5.36.0)(yaml@2.8.2))
     transitivePeerDependencies:
       - '@nuxt/kit'
       - supports-color
       - 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:
       '@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
       kolorist: 1.8.0
       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:
       - 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:
       esbuild: 0.25.10
       fdir: 6.5.0(picomatch@4.0.3)
@@ -11443,7 +11460,7 @@ snapshots:
       rollup: 4.52.0
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 24.10.2
+      '@types/node': 25.0.0
       fsevents: 2.3.3
       jiti: 2.5.1
       lightningcss: 1.30.1
@@ -11451,10 +11468,10 @@ snapshots:
       terser: 5.36.0
       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:
       '@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/runner': 4.0.15
       '@vitest/snapshot': 4.0.15
@@ -11471,10 +11488,10 @@ snapshots:
       tinyexec: 1.0.2
       tinyglobby: 0.2.15
       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
     optionalDependencies:
-      '@types/node': 24.10.2
+      '@types/node': 25.0.0
       '@vitest/ui': 4.0.15(vitest@4.0.15)
       happy-dom: 20.0.11
       jsdom: 27.0.0(postcss@8.4.49)
@@ -11536,6 +11553,8 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.13(typescript@5.9.3)
 
+  vue-sonner@2.0.9: {}
+
   vue-template-compiler@2.7.15:
     dependencies:
       de-indent: 1.0.2
diff --git a/src/components.d.ts b/src/components.d.ts
index 5fa85c9..6eeeb6e 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -58,6 +58,7 @@ declare module 'vue' {
     PopoverTrigger: typeof import('./components/ui/popover/PopoverTrigger.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Sonner: typeof import('./components/ui/sonner/Sonner.vue')['default']
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     ToTop: typeof import('./components/ToTop/index.vue')['default']
   }
diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index 2b809f2..1cc2b5e 100644
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -2,10 +2,11 @@
 import type { IFileData } from './type'
 import { ListMusic, Upload, X } from 'lucide-vue-next'
 import { ref } from 'vue'
-import { readFileData } from '@/utils/file'
+import { readFileAsJsonData, readFileData } from '@/utils/file'
 
-defineProps<{
+const props = defineProps<{
   limitType?: string
+  mode?: 'file' | 'json'
 }>()
 
 const emits = defineEmits<{
@@ -17,6 +18,14 @@ const fileData = ref<IFileData | null>(null)
 async function handleFileChange(e: Event) {
   const file = ((e.target as HTMLInputElement).files as FileList)[0]
   const type = file.type
+  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)
   fileData.value = { dataUrl, fileName, type }
   originFileName.value = fileName
diff --git a/src/components/ui/sonner/Sonner.vue b/src/components/ui/sonner/Sonner.vue
new file mode 100644
index 0000000..6830896
--- /dev/null
+++ b/src/components/ui/sonner/Sonner.vue
@@ -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>
diff --git a/src/components/ui/sonner/index.ts b/src/components/ui/sonner/index.ts
new file mode 100644
index 0000000..6673112
--- /dev/null
+++ b/src/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./Sonner.vue"
diff --git a/src/layout/RightButton/index.vue b/src/layout/RightButton/index.vue
index 24ae249..15b1cb3 100644
--- a/src/layout/RightButton/index.vue
+++ b/src/layout/RightButton/index.vue
@@ -1,18 +1,19 @@
 <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 { useRoute, useRouter } from 'vue-router'
 import { usePlayMusic } from './usePlayMusic'
 
 const { playMusic, currentMusic, nextPlay } = usePlayMusic()
-
+const { isFullscreen, toggle: toggleScreen } = useFullscreen()
 const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
 
 const settingRef = ref()
-// const audio = ref(new Audio())
-// const localMusicListValue = ref(localMusicList)
+const fullScreenRef = ref()
 
 function enterConfig() {
   router.push('/log-lottery/config')
@@ -20,10 +21,32 @@ function enterConfig() {
 function enterHome() {
   router.push('/log-lottery')
 }
+onMounted(() => {
+  settingRef.value.addEventListener('mouseenter', () => {
+    fullScreenRef.value.style.display = 'block'
+  })
+  settingRef.value.addEventListener('mouseleave', () => {
+    fullScreenRef.value.style.display = 'none'
+  })
+})
 </script>
 
 <template>
   <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
         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" />
       </div>
     </div>
-
     <div class="tooltip tooltip-left" :data-tip="currentMusic.item ? `${currentMusic.item.name}\n\r ${t('tooltip.nextSong')}` : t('tooltip.noSongPlay')">
       <div
         class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
diff --git a/src/layout/index.vue b/src/layout/index.vue
index e24439f..1025242 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -5,8 +5,10 @@ import { useI18n } from 'vue-i18n'
 import CustomModal from '@/components/Dialog/index.vue'
 import { Loading } from '@/components/Loading'
 import ToTop from '@/components/ToTop/index.vue'
+import { Toaster } from '@/components/ui/sonner'
 import RightButton from './RightButton/index.vue'
 import { useMounted } from './useMounted'
+import 'vue-sonner/style.css'
 
 const tipDialog = ref()
 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">
       <router-view class="h-full main-container-content" />
     </main>
+    <Toaster />
     <RightButton class="absolute right-0 bottom-1/2" />
     <CustomModal ref="tipDialog" :title="t('dialog.titleTip')" :desc="tipDesc" />
   </div>
diff --git a/src/store/globalConfig.ts b/src/store/globalConfig.ts
index 738d3a8..d89d64a 100644
--- a/src/store/globalConfig.ts
+++ b/src/store/globalConfig.ts
@@ -127,6 +127,10 @@ export const useGlobalConfig = defineStore('global', {
         },
     },
     actions: {
+        // 设置全局配置
+        setGlobalConfig(data: any) {
+            this.globalConfig = data
+        },
         // 设置rowCount
         setRowCount(rowCount: number) {
             this.globalConfig.rowCount = rowCount
@@ -137,9 +141,8 @@ export const useGlobalConfig = defineStore('global', {
         },
         // 设置主题
         setTheme(theme: any) {
-            const { name, detail } = theme
+            const { name } = theme
             this.globalConfig.theme.name = name
-            this.globalConfig.theme.detail = detail
         },
         // 设置卡片颜色
         setCardColor(cardColor: string) {
diff --git a/src/utils/file.ts b/src/utils/file.ts
index 5cc7aa5..fd4fd6a 100644
--- a/src/utils/file.ts
+++ b/src/utils/file.ts
@@ -1,19 +1,35 @@
-export function readFileBinary(file: any): Promise<any> {
-  return new Promise((resolve) => {
-    const reader = new FileReader()
-    reader.readAsBinaryString(file)
-    reader.onload = (ev: any) => {
-      resolve(ev.target.result)
-    }
-  })
+export function readFileBinary(file: File | Blob): Promise<string> {
+    return new Promise((resolve) => {
+        const reader = new FileReader()
+        reader.readAsBinaryString(file)
+        reader.onload = (ev: any) => {
+            resolve(ev.target.result)
+        }
+    })
 }
 
 export function readFileData(file: any): Promise<{ dataUrl: string, fileName: string }> {
-  return new Promise((resolve) => {
-    const reader = new FileReader()
-    reader.readAsDataURL(file)
-    reader.onload = (ev: any) => {
-      resolve({ dataUrl: ev.target.result, fileName: file.name })
-    }
-  })
+    return new Promise((resolve) => {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = (ev: any) => {
+            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)
+        }
+    })
 }
diff --git a/src/views/Config/Global/FaceConfig/components/PatternSetting.vue b/src/views/Config/Global/FaceConfig/components/PatternEdit.vue
similarity index 100%
rename from src/views/Config/Global/FaceConfig/components/PatternSetting.vue
rename to src/views/Config/Global/FaceConfig/components/PatternEdit.vue
diff --git a/src/views/Config/Global/FaceConfig/components/UploadDialog.vue b/src/views/Config/Global/FaceConfig/components/UploadDialog.vue
new file mode 100644
index 0000000..45002ff
--- /dev/null
+++ b/src/views/Config/Global/FaceConfig/components/UploadDialog.vue
@@ -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>
diff --git a/src/views/Config/Global/FaceConfig/index.vue b/src/views/Config/Global/FaceConfig/index.vue
index 7603048..e94b45c 100644
--- a/src/views/Config/Global/FaceConfig/index.vue
+++ b/src/views/Config/Global/FaceConfig/index.vue
@@ -1,443 +1,60 @@
 <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 { useRouter } from 'vue-router'
-import { z as zod } from 'zod'
-import { daisyuiThemes } from '@/constant/theme'
-import i18n, { languageList } from '@/locales/i18n'
-import useStore from '@/store'
-import { themeChange } from '@/utils'
-import { clearAllDbStore } from '@/utils/localforage'
-import PatternSetting from './components/PatternSetting.vue'
-import SelectFont from './components/SelectFont.vue'
-import 'vue3-colorpicker/style.css'
+import { DataSetting, LayoutSetting, PatternSetting, TextSetting, ThemeSetting } from './parts'
+
+import { useViewModel } from './useViewModel'
 
-const router = useRouter()
 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')),
-  // 格式化
 
-})
-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(() => {
-})
+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()
 </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>
   <div class="flex flex-col gap-4">
     <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">
+      <!-- 数据操作 -->
+      <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">
-        <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>
+      <TextSetting
+        v-model:top-title-value="topTitleValue"
+        v-model:language-value="languageValue"
+        v-model:text-size-value="textSizeValue"
+        v-model:current-font-value="currentFontValue"
+        v-model:current-title-font-value="currentTitleFontValue"
+        v-model:title-font-sync-global-value="titleFontSyncGlobalValue"
+        v-model:language-list="languageList"
+      />
       <!-- 布局设置（列数、卡片宽度、卡片高度 -->
-      <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>
-      </fieldset>
+      <LayoutSetting
+        v-model:form-err="formErr"
+        v-model:form-data="formData"
+        v-model:card-size-value="cardSizeValue"
+        v-model:is-show-prize-list-value="isShowPrizeListValue"
+        v-model:is-show-avatar-value="isShowAvatarValue"
+        :reset-person-layout="resetPersonLayout"
+        :is-row-count-change="isRowCountChange"
+      />
       <!-- 主题设置（主题、背景图片） -->
-      <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-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>
+      <ThemeSetting
+        v-model:theme-value="themeValue"
+        v-model:background-image-value="backgroundImageValue"
+        v-model:card-color-value="cardColorValue"
+        v-model:lucky-card-color-value="luckyCardColorValue"
+        v-model:text-color-value="textColorValue"
+        v-model:pattern-color-value="patternColorValue"
+        :image-list="imageList"
+      />
       <!-- 图案设置 -->
-      <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">
-              <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>
+      <PatternSetting
+        :row-count="rowCount"
+        :card-color="cardColor"
+        :pattern-color="patternColor"
+        :pattern-list="patternList"
+        :clear-pattern="clearPattern"
+        :reset-pattern="resetPattern"
+      />
     </div>
   </div>
 </template>
diff --git a/src/views/Config/Global/FaceConfig/parts/DataSetting.vue b/src/views/Config/Global/FaceConfig/parts/DataSetting.vue
new file mode 100644
index 0000000..9aa14f7
--- /dev/null
+++ b/src/views/Config/Global/FaceConfig/parts/DataSetting.vue
@@ -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>
diff --git a/src/views/Config/Global/FaceConfig/parts/LayoutSetting.vue b/src/views/Config/Global/FaceConfig/parts/LayoutSetting.vue
new file mode 100644
index 0000000..31952c3
--- /dev/null
+++ b/src/views/Config/Global/FaceConfig/parts/LayoutSetting.vue
@@ -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>
diff --git a/src/views/Config/Global/FaceConfig/parts/PatternSetting.vue b/src/views/Config/Global/FaceConfig/parts/PatternSetting.vue
new file mode 100644
index 0000000..43439ac
--- /dev/null
+++ b/src/views/Config/Global/FaceConfig/parts/PatternSetting.vue
@@ -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>
diff --git a/src/views/Config/Global/FaceConfig/parts/TextSetting.vue b/src/views/Config/Global/FaceConfig/parts/TextSetting.vue
new file mode 100644
index 0000000..e60fa4c
--- /dev/null
+++ b/src/views/Config/Global/FaceConfig/parts/TextSetting.vue
@@ -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>
diff --git a/src/views/Config/Global/FaceConfig/parts/ThemeSetting.vue b/src/views/Config/Global/FaceConfig/parts/ThemeSetting.vue
new file mode 100644
index 0000000..f78b41b
--- /dev/null
+++ b/src/views/Config/Global/FaceConfig/parts/ThemeSetting.vue
@@ -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>
diff --git a/src/views/Config/Global/FaceConfig/parts/index.ts b/src/views/Config/Global/FaceConfig/parts/index.ts
new file mode 100644
index 0000000..4ce76b6
--- /dev/null
+++ b/src/views/Config/Global/FaceConfig/parts/index.ts
@@ -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'
diff --git a/src/views/Config/Global/FaceConfig/useViewModel.ts b/src/views/Config/Global/FaceConfig/useViewModel.ts
new file mode 100644
index 0000000..1b35d30
--- /dev/null
+++ b/src/views/Config/Global/FaceConfig/useViewModel.ts
@@ -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,
+    }
+}
diff --git a/src/views/Config/Global/MusicConfig/components/UploadDialog.vue b/src/views/Config/Global/MusicConfig/components/UploadDialog.vue
index f04b939..be5bc00 100644
--- a/src/views/Config/Global/MusicConfig/components/UploadDialog.vue
+++ b/src/views/Config/Global/MusicConfig/components/UploadDialog.vue
@@ -10,7 +10,6 @@ import FileUpload from '@/components/FileUpload/index.vue'
 import useStore from '@/store'
 
 const toast = useToast()
-const { t } = useI18n()
 const limitType = ref('audio/*')
 const visible = defineModel('visible', {
   type: Boolean,
diff --git a/src/views/Config/Person/PersonAll.vue b/src/views/Config/Person/PersonAll.vue
deleted file mode 100644
index 7778fb9..0000000
--- a/src/views/Config/Person/PersonAll.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/Config/Person/PersonAll/importExcel.worker.ts b/src/views/Config/Person/PersonAll/importExcel.worker.ts
index 1a26fe7..c4f78c1 100644
--- a/src/views/Config/Person/PersonAll/importExcel.worker.ts
+++ b/src/views/Config/Person/PersonAll/importExcel.worker.ts
@@ -4,20 +4,43 @@ import { addOtherInfo } from '@/utils'
 interface WorkerMessage {
     type: 'start' | 'stop' | 'reset'
     data: any
+    templateData: 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>) => {
     switch (e.data.type) {
         case 'start':
             {
                 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 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)
                 globalThis.postMessage({
                     type: 'done',
diff --git a/src/views/Config/Person/PersonAll/useViewModel.ts b/src/views/Config/Person/PersonAll/useViewModel.ts
index 9464db9..6710381 100644
--- a/src/views/Config/Person/PersonAll/useViewModel.ts
+++ b/src/views/Config/Person/PersonAll/useViewModel.ts
@@ -2,11 +2,12 @@ import type { Ref } from 'vue'
 import type { IPersonConfig } from '@/types/storeType'
 import { storeToRefs } from 'pinia'
 import { inject } from 'vue'
+import { toast } from 'vue-sonner'
 import * as XLSX from 'xlsx'
 import { loadingKey } from '@/components/Loading'
 import i18n from '@/locales/i18n'
 import useStore from '@/store'
-import { readFileBinary } from '@/utils/file'
+import { readFileBinary, readLocalFileAsArraybuffer } from '@/utils/file'
 import ImportExcelWorker from './importExcel.worker?worker'
 
 export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<HTMLInputElement> }) {
@@ -48,13 +49,6 @@ export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<H
         {
             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',
@@ -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发送消息
     function sendWorkerMessage(message: any) {
         if (worker) {
@@ -73,15 +79,15 @@ export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<H
         }
     }
     /// 开始导入
-    function startWorker(data: Event) {
+    async function startWorker(data: string) {
         loading?.show()
-        sendWorkerMessage({ type: 'start', data })
+        getExcelTemplateContent()
+        sendWorkerMessage({ type: 'start', data, templateData: await getExcelTemplateContent() })
     }
     /**
      * 获取用户数据
      */
     async function handleFileChange(e: Event) {
-        //   worker = new ImportExcelWorker()
         if (worker) {
             worker.onmessage = (e) => {
                 if (e.data.type === 'done') {
@@ -90,6 +96,9 @@ export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<H
                     // 导入成功后清空file input
                     clearFileInput()
                 }
+                if (e.data.type === 'error') {
+                    toast.warning(e.data.message || '导入错误')
+                }
                 loading?.hide()
             }
         }
diff --git a/src/views/Config/Person/importExcel.worker.ts b/src/views/Config/Person/importExcel.worker.ts
deleted file mode 100644
index 6b9a39e..0000000
--- a/src/views/Config/Person/importExcel.worker.ts
+++ /dev/null
@@ -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
-    }
-}