feat: 粒子背景+动起来了

package.json

@@ -16,15 +16,22 @@
     "@element-plus/icons-vue": "^2.1.0",
     "@popperjs/core": "^2.11.8",
     "@radial-color-picker/vue-color-picker": "^5.0.1",
+    "@tsparticles/engine": "^3.0.3",
+    "@tsparticles/slim": "^3.0.3",
+    "@tsparticles/vue3": "^3.0.0",
     "@vueuse/core": "^10.6.1",
     "axios": "^1.6.1",
     "localforage": "^1.10.0",
+    "particles.vue3": "^2.12.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
+    "sparticles": "^1.3.1",
     "svg-sprite-loader": "^6.0.11",
     "theme-change": "^2.5.0",
     "three": "^0.160.0",
     "three-css2drender": "^1.0.0",
+    "tsparticles": "^3.0.3",
+    "tsparticles-engine": "^2.12.0",
     "vcolorpicker": "^2.0.12",
     "vue": "^3.3.8",
     "vue-accessible-color-picker": "^5.0.1",

pnpm-lock.yaml

@@ -14,6 +14,15 @@ dependencies:
   '@radial-color-picker/vue-color-picker':
     specifier: ^5.0.1
     version: 5.0.1(vue@3.3.8)
+  '@tsparticles/engine':
+    specifier: ^3.0.3
+    version: 3.0.3
+  '@tsparticles/slim':
+    specifier: ^3.0.3
+    version: 3.0.3
+  '@tsparticles/vue3':
+    specifier: ^3.0.0
+    version: 3.0.0(typescript@5.2.2)
   '@vueuse/core':
     specifier: ^10.6.1
     version: 10.6.1(vue@3.3.8)
@@ -23,12 +32,18 @@ dependencies:
   localforage:
     specifier: ^1.10.0
     version: 1.10.0
+  particles.vue3:
+    specifier: ^2.12.0
+    version: 2.12.0(typescript@5.2.2)
   pinia:
     specifier: ^2.1.7
     version: 2.1.7(typescript@5.2.2)(vue@3.3.8)
   pinia-plugin-persist:
     specifier: ^1.0.0
     version: 1.0.0(pinia@2.1.7)(vue@3.3.8)
+  sparticles:
+    specifier: ^1.3.1
+    version: 1.3.1
   svg-sprite-loader:
     specifier: ^6.0.11
     version: 6.0.11
@@ -41,6 +56,12 @@ dependencies:
   three-css2drender:
     specifier: ^1.0.0
     version: 1.0.0(three@0.160.0)
+  tsparticles:
+    specifier: ^3.0.3
+    version: 3.0.3
+  tsparticles-engine:
+    specifier: ^2.12.0
+    version: 2.12.0
   vcolorpicker:
     specifier: ^2.0.12
     version: 2.0.12(typescript@5.2.2)
@@ -75,7 +96,7 @@ devDependencies:
     version: 0.5.10(tailwindcss@3.3.5)
   '@testing-library/vue':
     specifier: ^8.0.0
-    version: 8.0.0(@vue/compiler-sfc@3.3.8)(vue@3.3.8)
+    version: 8.0.0(@vue/compiler-sfc@3.4.5)(vue@3.3.8)
   '@types/node':
     specifier: ^20.9.0
     version: 20.9.0
@@ -147,7 +168,7 @@ devDependencies:
     version: 0.16.7(@vueuse/core@10.6.1)
   unplugin-icons:
     specifier: ^0.17.4
-    version: 0.17.4(@vue/compiler-sfc@3.3.8)
+    version: 0.17.4(@vue/compiler-sfc@3.4.5)
   unplugin-vue-components:
     specifier: ^0.25.2
     version: 0.25.2(vue@3.3.8)
@@ -206,6 +227,16 @@ packages:
       vue: 3.3.8(typescript@5.2.2)
     dev: false
 
+  /@ant-design/icons-vue@6.1.0(vue@3.4.5):
+    resolution: {integrity: sha512-EX6bYm56V+ZrKN7+3MT/ubDkvJ5rK/O2t380WFRflDcVFgsvl3NLH7Wxeau6R8DbrO5jWR6DSTC3B6gYFp77AA==}
+    peerDependencies:
+      vue: '>=3.0.3'
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-svg': 4.3.1
+      vue: 3.4.5(typescript@5.2.2)
+    dev: false
+
   /@antfu/install-pkg@0.1.1:
     resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
     dependencies:
@@ -249,6 +280,13 @@ packages:
     dependencies:
       '@babel/types': 7.23.3
 
+  /@babel/parser@7.23.6:
+    resolution: {integrity: sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.23.3
+
   /@babel/runtime@7.23.2:
     resolution: {integrity: sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==}
     engines: {node: '>=6.9.0'}
@@ -719,7 +757,7 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
-  /@testing-library/vue@8.0.0(@vue/compiler-sfc@3.3.8)(vue@3.3.8):
+  /@testing-library/vue@8.0.0(@vue/compiler-sfc@3.4.5)(vue@3.3.8):
     resolution: {integrity: sha512-SP0qEY/SGpdT9+bPuHxYD3P/HCG0ZY8GlGJocVqdLn9EojbdQu69x06trJi1V7RW9tAZai/wwy+ZFcRsTp47kg==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -728,7 +766,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.23.2
       '@testing-library/dom': 9.3.3
-      '@vue/compiler-sfc': 3.3.8
+      '@vue/compiler-sfc': 3.4.5
       '@vue/test-utils': 2.4.2(vue@3.3.8)
       vue: 3.3.8(typescript@5.2.2)
     transitivePeerDependencies:
@@ -745,6 +783,317 @@ packages:
     engines: {node: '>=10.13.0'}
     dev: true
 
+  /@tsparticles/basic@3.0.3:
+    resolution: {integrity: sha512-hMzHTuKhMoTNiqkcEnlGZ3Aa15o3tLcjVDTtuNhZlrONgu7KwVUR4mpxxWUyJHNYlho7VHtZvUU8XAYmN/uAFw==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+      '@tsparticles/move-base': 3.0.3
+      '@tsparticles/shape-circle': 3.0.3
+      '@tsparticles/updater-color': 3.0.3
+      '@tsparticles/updater-opacity': 3.0.3
+      '@tsparticles/updater-out-modes': 3.0.3
+      '@tsparticles/updater-size': 3.0.3
+    dev: false
+
+  /@tsparticles/engine@3.0.3:
+    resolution: {integrity: sha512-1yGci0gMF9uBIVPXBYekORq8UYf8Twz3Xy/ZWWVCFWeVh90Amdns3fad2pf2HicZe8HZqpa1cN2Io1MOHAlO8w==}
+    requiresBuild: true
+    dev: false
+
+  /@tsparticles/interaction-external-attract@3.0.3:
+    resolution: {integrity: sha512-Fnb556N/i7wEj+ziLLkU4dOJWYm31OKyAd8CItsC9/mVtd01jCnBR57rcR3KdlKhknzDrPAWPG0CV29PdZWmXg==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/interaction-external-bounce@3.0.3:
+    resolution: {integrity: sha512-Uc7VNQxeb4KMGTmzIn3/35t0FPFFTSn8sUNyUyE24nlmSZBE1PwxuyMbCCzyj2VYGgdx4PXoijY1tLN9FGfIQg==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/interaction-external-bubble@3.0.3:
+    resolution: {integrity: sha512-tA3OZfoMhYsy/cY90z8GolGjH9B+r29CplTKiAbOk+CdNFZ9oMBuMXfDhMCFURxbb1Ak4SFhwCSnsTZOokrZeQ==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/interaction-external-connect@3.0.3:
+    resolution: {integrity: sha512-KtPxzxuG+GLfejSAoQ9d2apYEBt6PnuzNtRuASbnZFMZ8xS9wXcS+6Jn3JCBx6wq7hXJY3yvX86MtIsArVS/cg==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/interaction-external-grab@3.0.3:
+    resolution: {integrity: sha512-5JlZRpz4qB1ukcJquhnyETJdSMPu/t7ZNNgecWgiDd1akN3/zQAUp6cY918C1Mtq3J7vElBcyqf/6mY6wApmzg==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/interaction-external-pause@3.0.3:
+    resolution: {integrity: sha512-iQnN9cEhInQpGEaYe03L7Y603MuSwBco4FaMYcPcZxHCf6uEAag6zQPxdIZjF/a49dVUuEKv6elW+y07DTVYBg==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/interaction-external-push@3.0.3:
+    resolution: {integrity: sha512-Tiw/o+2jJwpIGPSez8pQSUAzoSSga5q33qtwJgWcjiMedBRnwSJNIdShkR5g5EiWop8GSN9U8AnCA3UrG3cq6Q==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/interaction-external-remove@3.0.3:
+    resolution: {integrity: sha512-Vo38bKAzFyJDLE6WNespJJn/cIEm9qFZZ6ZVwPbdFDI9rK8gmIqHgmHudQduVPvs2Co9oIjfQq0OgVG70bHFvQ==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/interaction-external-repulse@3.0.3:
+    resolution: {integrity: sha512-6OOk2NzhVsLu7xp8fyn6xw+zVUYlmGcIMgJSa5LzaUZ/gHoVZ2f7UKdtKxZVnqOCWO+Ff8P7rRtm5q39JS8Pvg==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/interaction-external-slow@3.0.3:
+    resolution: {integrity: sha512-+oNTTpMjHooMD/+BVtk6xllpVimcRoXlMPrQ+Pj7CndhoQNR6s8MacUyw2HPYO9epuItGui9qq1HyFWqZRQtSA==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/interaction-external-trail@3.0.3:
+    resolution: {integrity: sha512-qP5820gtY2DsIMC8BodFu0cr+f4jvAlnXT3nwpf2N4Rfcn1c0bhzJI8TNtBB/z9wkY8xBKZFhJBwGnNn8sqyrg==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/interaction-particles-attract@3.0.3:
+    resolution: {integrity: sha512-3DdFXxMujkLRZAAnid8eBW3BwKe3SGoXzVaSaiht7tq/Q0H98h3ryMJNeD6Rr0PbxGFWid3zmwk8+gdhQyOqZg==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/interaction-particles-collisions@3.0.3:
+    resolution: {integrity: sha512-pYxzrmvwLj4gwQdg33xTDm6670lQExLoCmeATNAukN4qTFWqYnS45AWrUsedKAverDMcnu1iT2Vs+xmEwtSFcw==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/interaction-particles-links@3.0.3:
+    resolution: {integrity: sha512-is2I/GTz2nC+2zupyVGbr2tbtp5qGRiwkC3lMWpmvfMWiXxs0iW4w7o/eFy6W5n1Sw2GKLjLUxMn0+xLwRVOEQ==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/move-base@3.0.3:
+    resolution: {integrity: sha512-4OFyZ55zWGgw1di1R7hgjlqySE+SEHrAHEqoEq8x14/D1Zg3ai/6BRFqze161ybtwddpz/ukrFy9cpJaUDH1kA==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/move-parallax@3.0.3:
+    resolution: {integrity: sha512-LP9b+Yz3MpnReAgSQrBIINg+fQMzmKlYZ79FQLZdI5UlnyGEarYTYEpcg6VyBWb+QVPDCE+RfOQINfUPI5PB4A==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/plugin-absorbers@3.0.3:
+    resolution: {integrity: sha512-mpAgIRdAmbb3+SX3KNGbmS0YsMJYx711/dV3e3kCu1M/k7ptFze/oFDLMb1f3614WWRlJCwQGdtmAAv517tpWg==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/plugin-easing-quad@3.0.3:
+    resolution: {integrity: sha512-KgzX9VzkPO61GTcLUHGx+wbiBdnxxp7174zICUiLZxYUuKYkn31k00MPsbja3HgW5lSZ6ruFh4RERi8nVwXo/w==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/plugin-emitters-shape-circle@3.0.3:
+    resolution: {integrity: sha512-TDB0cw7P27orHwm51Uq6OZoQ3iiZOl948//q6WFvQrufR+TaKCkoyttqzgdV7OKVaMNZa+YlUZ6BIDv5aj5PSA==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+      '@tsparticles/plugin-emitters': 3.0.3
+    dev: false
+
+  /@tsparticles/plugin-emitters-shape-square@3.0.3:
+    resolution: {integrity: sha512-gYIN24gqDkzQMfNMdlUqWQBHTvugghRMkEw42FxllKtHZ9urNBWqPA3EGrNL1Z6ZXZI8UuG18udUZKQsxq36vg==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+      '@tsparticles/plugin-emitters': 3.0.3
+    dev: false
+
+  /@tsparticles/plugin-emitters@3.0.3:
+    resolution: {integrity: sha512-Rt1Hrp/teqz6sLPwHShR8L7AWfQCLttXtf7r1VW7iKUhSou7Ye2L77ZCKzqq7xvEszPztYEVMLqjttccGzfs8Q==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/shape-circle@3.0.3:
+    resolution: {integrity: sha512-BXolExTzU8wKbV9XvYwYmsYVMBFpx6kb+k880Do+HMp9qUvnJ4G7jshwPp7Ns8svoN4EvbqqhacNd029ESMMYw==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/shape-emoji@3.0.3:
+    resolution: {integrity: sha512-THOeWohtdXQpI3xUjVAcL4XVIWjE66MpGcq1w4Jo+V8luab1fCEKT6GQPPINmkiQe7lWChdz6qUX/FfPYmWG4A==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/shape-image@3.0.3:
+    resolution: {integrity: sha512-xc2HAmmF1iffOzit3UnIJGQuNX6gqxpO4srm3EOQEoWcS62v2Dr+tI6pEhY60RoVrDhBzdRI2da3+EvL5J39ag==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/shape-line@3.0.3:
+    resolution: {integrity: sha512-JOJrFKcnDgKJlD2YlJGISyuMRMKCdEuqYvUuXD4JqBR7XP8hoAgMEx2Of3rJ7sZyoAo2pdYEqDoSGWq0vgLuvQ==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/shape-polygon@3.0.3:
+    resolution: {integrity: sha512-gl+XW46oOudD84lgano6exNEKLyXwOXpHJPRm+dz2HLbRuuU6wCFd5isY4YCr47HJL7wJ7u7pm9LF1kkMk68Sg==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/shape-square@3.0.3:
+    resolution: {integrity: sha512-FACZ0OFPMhdeRnspgU8CJimEyNhXNdmP/l5i8booj9ECvuYATy4yRvTbtktBy/mVuehinM8tgFYKgg8UF/as6Q==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/shape-star@3.0.3:
+    resolution: {integrity: sha512-P6C+oFneM75Sx2iuLnyNEZR+Cd7V3IIi7lYws54pcUdrYfvQ0lXdQZpUf3noHXoi03c+PnVvEsXvC+fX/+Zdlw==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/shape-text@3.0.3:
+    resolution: {integrity: sha512-OoGA6193n6NXDJrLovmaa9Yu+ErfwrVRoxiAK5mVayM5ecZX6vhD8+c0H+pR2nY6iOn0h8GXU/FYmX9RFaIaOw==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/slim@3.0.3:
+    resolution: {integrity: sha512-E6ci6uEujJLaoY1JuFwDDOlJHaAAWbQiSEpgQUqETjD9+yEiiQ0zhxrua4HImU2+JhA6vSi7b1rTc7TYBjRRnQ==}
+    dependencies:
+      '@tsparticles/basic': 3.0.3
+      '@tsparticles/engine': 3.0.3
+      '@tsparticles/interaction-external-attract': 3.0.3
+      '@tsparticles/interaction-external-bounce': 3.0.3
+      '@tsparticles/interaction-external-bubble': 3.0.3
+      '@tsparticles/interaction-external-connect': 3.0.3
+      '@tsparticles/interaction-external-grab': 3.0.3
+      '@tsparticles/interaction-external-pause': 3.0.3
+      '@tsparticles/interaction-external-push': 3.0.3
+      '@tsparticles/interaction-external-remove': 3.0.3
+      '@tsparticles/interaction-external-repulse': 3.0.3
+      '@tsparticles/interaction-external-slow': 3.0.3
+      '@tsparticles/interaction-particles-attract': 3.0.3
+      '@tsparticles/interaction-particles-collisions': 3.0.3
+      '@tsparticles/interaction-particles-links': 3.0.3
+      '@tsparticles/move-base': 3.0.3
+      '@tsparticles/move-parallax': 3.0.3
+      '@tsparticles/plugin-easing-quad': 3.0.3
+      '@tsparticles/shape-circle': 3.0.3
+      '@tsparticles/shape-emoji': 3.0.3
+      '@tsparticles/shape-image': 3.0.3
+      '@tsparticles/shape-line': 3.0.3
+      '@tsparticles/shape-polygon': 3.0.3
+      '@tsparticles/shape-square': 3.0.3
+      '@tsparticles/shape-star': 3.0.3
+      '@tsparticles/updater-color': 3.0.3
+      '@tsparticles/updater-life': 3.0.3
+      '@tsparticles/updater-opacity': 3.0.3
+      '@tsparticles/updater-out-modes': 3.0.3
+      '@tsparticles/updater-rotate': 3.0.3
+      '@tsparticles/updater-size': 3.0.3
+      '@tsparticles/updater-stroke-color': 3.0.3
+    dev: false
+
+  /@tsparticles/updater-color@3.0.3:
+    resolution: {integrity: sha512-zOQuO+nJIGcYK2iS4k6+HyO+APfJ58OiZVvkerZaI/on5yE5Cq4goqCrjJBkRWo6WimdhDJjS9vxAyon8Y7CPQ==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/updater-destroy@3.0.3:
+    resolution: {integrity: sha512-nCOP2oxg9Qy5h9WLpR46sZLp0X6Y7/0LVw2Jf7Kz+BNO9aqYW54tRS8AiG9j6DpMmt0HWbiB37Nv05s7/bZnKQ==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/updater-life@3.0.3:
+    resolution: {integrity: sha512-2YZoK13qqPB+m2QgcmStiZdCdvmkhIYHCv5fVqHFXrghS6IMqxEOAh+WV5FRcnL19UvMvKZUFLxmubrKnsi1RA==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/updater-opacity@3.0.3:
+    resolution: {integrity: sha512-B+tCeItEEKfwJMeZ5l7jdggFDdt2Rzo3GSWrbTzsa4RxTlzNBZcuFp5qNOuwnBUERBM9u7wxPnfF+x0fDJlGgw==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/updater-out-modes@3.0.3:
+    resolution: {integrity: sha512-3tJ9UKc00KalPVmEfrHUDaXcOAJNjG/83ufiLnj4ZVec4PeibSck7OGkYgNht8O5CR93ZxONNI85DcUHCkBXXg==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/updater-roll@3.0.3:
+    resolution: {integrity: sha512-OH1iyHAUvdqKOQN94isViQVUORNUqBDDkgkukvRp6La0Xjk1sop3pVtfH5kADkuolunzD17SlKWup75AUGZKIw==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/updater-rotate@3.0.3:
+    resolution: {integrity: sha512-447je9lpU++TxPcZjUlit1NaBctIyT2x6W5NevVjrxckoAWoW2OYuy4mhuJRxn3SZHJ7/t2Wt6Es1g3DR4plRA==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/updater-size@3.0.3:
+    resolution: {integrity: sha512-mgo7VXJR6rfeSuVT2alxzdYs9BO2tr0iWiBKkbQMH/GSpLI4juijvHxUKC7MXk5E8C0f9ZLfoeSDH1NaeizbDw==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/updater-stroke-color@3.0.3:
+    resolution: {integrity: sha512-8CdRz5KE3RxmuJlao92w0Fo1BtwMLSkZIATMLkzuJYUu0Fq5AWnBkUxxe7r5Qk015n9qaMo8aWiQFwrYJ+FGAg==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/updater-tilt@3.0.3:
+    resolution: {integrity: sha512-vdw5pBuBosWIq54u7CJD71r2P0UqlMZpOLof8So+Wacm92khZ3ONMpnPbvo0ghBVpZQENvpm5yqJPnroD8KP4Q==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/updater-twinkle@3.0.3:
+    resolution: {integrity: sha512-5ejosaUYLji5Wr7uT9bqNae1L0PVb4XOY9a6bhMfoWEQQ8MAGFDFLcSF8ilgL0xpp6GsyF646rM8caIERLUvpQ==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/updater-wobble@3.0.3:
+    resolution: {integrity: sha512-PwO53o1Cb8Wwt5jv6hwJ1zBgSH0L6Hz4FD1uJGW/VcYYUg+/NIlUWKpC77PIqS8NE9hiX0c8Yjg1hw60bHR75Q==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+    dev: false
+
+  /@tsparticles/vue3@3.0.0(typescript@5.2.2):
+    resolution: {integrity: sha512-HKLYqt2BjzA5ZO8L5cOjiVIx/pPXZT2a+8v78nEyQVZvN0Upv5upte4grYqpD52Z5U6v6Ah78gNn5UNoUsHmtg==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+      vue: 3.4.5(typescript@5.2.2)
+    transitivePeerDependencies:
+      - typescript
+    dev: false
+
   /@types/aria-query@5.0.4:
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
     dev: true
@@ -1047,12 +1396,27 @@ packages:
       estree-walker: 2.0.2
       source-map-js: 1.0.2
 
+  /@vue/compiler-core@3.4.5:
+    resolution: {integrity: sha512-Daka7P1z2AgKjzuueWXhwzIsKu0NkLB6vGbNVEV2iJ8GJTrzraZo/Sk4GWCMRtd/qVi3zwnk+Owbd/xSZbwHtQ==}
+    dependencies:
+      '@babel/parser': 7.23.6
+      '@vue/shared': 3.4.5
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.0.2
+
   /@vue/compiler-dom@3.3.8:
     resolution: {integrity: sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==}
     dependencies:
       '@vue/compiler-core': 3.3.8
       '@vue/shared': 3.3.8
 
+  /@vue/compiler-dom@3.4.5:
+    resolution: {integrity: sha512-J8YlxknJVd90SXFJ4HwGANSAXsx5I0lK30sO/zvYV7s5gXf7gZR7r/1BmZ2ju7RGH1lnc6bpBc6nL61yW+PsAQ==}
+    dependencies:
+      '@vue/compiler-core': 3.4.5
+      '@vue/shared': 3.4.5
+
   /@vue/compiler-sfc@3.3.8:
     resolution: {integrity: sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==}
     dependencies:
@@ -1067,12 +1431,31 @@ packages:
       postcss: 8.4.31
       source-map-js: 1.0.2
 
+  /@vue/compiler-sfc@3.4.5:
+    resolution: {integrity: sha512-jauvkDuSSUbP0ebhfNqljhShA90YEfX/0wZ+w40oZF43IjGyWYjqYaJbvMJwGOd+9+vODW6eSvnk28f0SGV7OQ==}
+    dependencies:
+      '@babel/parser': 7.23.6
+      '@vue/compiler-core': 3.4.5
+      '@vue/compiler-dom': 3.4.5
+      '@vue/compiler-ssr': 3.4.5
+      '@vue/shared': 3.4.5
+      estree-walker: 2.0.2
+      magic-string: 0.30.5
+      postcss: 8.4.33
+      source-map-js: 1.0.2
+
   /@vue/compiler-ssr@3.3.8:
     resolution: {integrity: sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==}
     dependencies:
       '@vue/compiler-dom': 3.3.8
       '@vue/shared': 3.3.8
 
+  /@vue/compiler-ssr@3.4.5:
+    resolution: {integrity: sha512-DDdEcDzj2lWTMfUMMtEpLDhURai9LhM0zSZ219jCt7b2Vyl0/jy3keFgCPMitG0V1S1YG4Cmws3lWHWdxHQOpg==}
+    dependencies:
+      '@vue/compiler-dom': 3.4.5
+      '@vue/shared': 3.4.5
+
   /@vue/devtools-api@6.5.1:
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
     dev: false
@@ -1110,12 +1493,25 @@ packages:
     dependencies:
       '@vue/shared': 3.3.8
 
+  /@vue/reactivity@3.4.5:
+    resolution: {integrity: sha512-BcWkKvjdvqJwb7BhhFkXPLDCecX4d4a6GATvCduJQDLv21PkPowAE5GKuIE5p6RC07/Lp9FMkkq4AYCTVF5KlQ==}
+    dependencies:
+      '@vue/shared': 3.4.5
+    dev: false
+
   /@vue/runtime-core@3.3.8:
     resolution: {integrity: sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==}
     dependencies:
       '@vue/reactivity': 3.3.8
       '@vue/shared': 3.3.8
 
+  /@vue/runtime-core@3.4.5:
+    resolution: {integrity: sha512-wh9ELIOQKeWT9SaUPdLrsxRkZv14jp+SJm9aiQGWio+/MWNM3Lib0wE6CoKEqQ9+SCYyGjDBhTOTtO47kCgbkg==}
+    dependencies:
+      '@vue/reactivity': 3.4.5
+      '@vue/shared': 3.4.5
+    dev: false
+
   /@vue/runtime-dom@3.3.8:
     resolution: {integrity: sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==}
     dependencies:
@@ -1123,6 +1519,14 @@ packages:
       '@vue/shared': 3.3.8
       csstype: 3.1.2
 
+  /@vue/runtime-dom@3.4.5:
+    resolution: {integrity: sha512-n5ewvOjyG3IEpqGBahdPXODFSpVlSz3H4LF76Sx0XAqpIOqyJ5bIb2PrdYuH2ogBMAQPh+o5tnoH4nJpBr8U0Q==}
+    dependencies:
+      '@vue/runtime-core': 3.4.5
+      '@vue/shared': 3.4.5
+      csstype: 3.1.3
+    dev: false
+
   /@vue/server-renderer@3.3.8(vue@3.3.8):
     resolution: {integrity: sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==}
     peerDependencies:
@@ -1132,9 +1536,22 @@ packages:
       '@vue/shared': 3.3.8
       vue: 3.3.8(typescript@5.2.2)
 
+  /@vue/server-renderer@3.4.5(vue@3.4.5):
+    resolution: {integrity: sha512-jOFc/VE87yvifQpNju12VcqimH8pBLxdcT+t3xMeiED1K6DfH9SORyhFEoZlW5TG2Vwfn3Ul5KE+1aC99xnSBg==}
+    peerDependencies:
+      vue: 3.4.5
+    dependencies:
+      '@vue/compiler-ssr': 3.4.5
+      '@vue/shared': 3.4.5
+      vue: 3.4.5(typescript@5.2.2)
+    dev: false
+
   /@vue/shared@3.3.8:
     resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
 
+  /@vue/shared@3.4.5:
+    resolution: {integrity: sha512-6XptuzlMvN4l4cDnDw36pdGEV+9njYkQ1ZE0Q6iZLwrKefKaOJyiFmcP3/KBDHbt72cJZGtllAc1GaHe6XGAyg==}
+
   /@vue/test-utils@2.4.2(vue@3.3.8):
     resolution: {integrity: sha512-07lLjpG1o9tEBoWQfVOFhDT7+WFCdDeECoeSdzOuVgIi6nxb2JDLGNNOV6+3crPpyg/jMlIocj96UROcgomiGg==}
     peerDependencies:
@@ -1172,6 +1589,18 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/core@9.13.0(vue@3.4.5):
+    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.13.0
+      '@vueuse/shared': 9.13.0(vue@3.4.5)
+      vue-demi: 0.14.6(vue@3.4.5)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/metadata@10.6.1:
     resolution: {integrity: sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==}
 
@@ -1196,6 +1625,15 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/shared@9.13.0(vue@3.4.5):
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
+    dependencies:
+      vue-demi: 0.14.6(vue@3.4.5)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@webassemblyjs/ast@1.11.6:
     resolution: {integrity: sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==}
     dependencies:
@@ -1445,6 +1883,32 @@ packages:
       warning: 4.0.3
     dev: false
 
+  /ant-design-vue@3.2.20(vue@3.4.5):
+    resolution: {integrity: sha512-YWpMfGaGoRastIXEYfCoJiaRiDHk4chqtYhlKQM5GqPt6NfvrM1Vg2e60yHtjxlZjed91wCMm0rAmyUr7Hwzdg==}
+    engines: {node: '>=12.22.0'}
+    peerDependencies:
+      vue: '>=3.2.0'
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-vue': 6.1.0(vue@3.4.5)
+      '@babel/runtime': 7.23.2
+      '@ctrl/tinycolor': 3.6.1
+      '@simonwep/pickr': 1.8.2
+      array-tree-filter: 2.1.0
+      async-validator: 4.2.5
+      dayjs: 1.11.10
+      dom-align: 1.12.4
+      dom-scroll-into-view: 2.0.1
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      resize-observer-polyfill: 1.5.1
+      scroll-into-view-if-needed: 2.2.31
+      shallow-equal: 1.2.1
+      vue: 3.4.5(typescript@5.2.2)
+      vue-types: 3.0.2(vue@3.4.5)
+      warning: 4.0.3
+    dev: false
+
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
     dev: true
@@ -1962,6 +2426,10 @@ packages:
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
+  /csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+    dev: false
+
   /culori@3.2.0:
     resolution: {integrity: sha512-HIEbTSP7vs1mPq/2P9In6QyFE0Tkpevh0k9a+FkjhD+cwsYm9WRSbn4uMdW9O0yXlNYC3ppxL3gWWPOcvEl57w==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -2279,7 +2747,6 @@ packages:
   /entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
-    dev: true
 
   /error-stack-parser-es@0.1.1:
     resolution: {integrity: sha512-g/9rfnvnagiNf+DRMHEVGuGuIBlCIMDFoTA616HaP2l9PlCjGjVhD98PNbVSJvmK4TttqT5mV5tInMhoFgi+aA==}
@@ -3987,6 +4454,15 @@ packages:
       entities: 4.5.0
     dev: true
 
+  /particles.vue3@2.12.0(typescript@5.2.2):
+    resolution: {integrity: sha512-t1AFUSuL+zzXO5fvBq6y76DAyy6sXtBOVY3UirNzaRQ0JCqSV3wCQwQ2N51tJRG6V952ARi87NMcQP5VwfTkqA==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+      vue: 3.4.5(typescript@5.2.2)
+    transitivePeerDependencies:
+      - typescript
+    dev: false
+
   /pascalcase@0.1.1:
     resolution: {integrity: sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==}
     engines: {node: '>=0.10.0'}
@@ -4207,6 +4683,14 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /postcss@8.4.33:
+    resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
   /posthtml-parser@0.2.1:
     resolution: {integrity: sha512-nPC53YMqJnc/+1x4fRYFfm81KV2V+G9NZY+hTohpYg64Ay7NemWWcV4UWuy/SgMupqQ3kJ88M/iRfZmSnxT+pw==}
     dependencies:
@@ -4680,6 +5164,10 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
+  /sparticles@1.3.1:
+    resolution: {integrity: sha512-zpQZRpP/W9YCh5mmtH1gHlZSKvLSQWXXdAhPQ9j8FdjuX3RkIPxBW6vrKoaIebzvVLREGPZq61dxSxCCndFemA==}
+    dev: false
+
   /split-string@3.1.0:
     resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==}
     engines: {node: '>=0.10.0'}
@@ -5099,6 +5587,30 @@ packages:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: true
 
+  /tsparticles-engine@2.12.0:
+    resolution: {integrity: sha512-ZjDIYex6jBJ4iMc9+z0uPe7SgBnmb6l+EJm83MPIsOny9lPpetMsnw/8YJ3xdxn8hV+S3myTpTN1CkOVmFv0QQ==}
+    deprecated: starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name
+    requiresBuild: true
+    dev: false
+
+  /tsparticles@3.0.3:
+    resolution: {integrity: sha512-chClgQd4ePebjMk0UtK91ELPsOCcA7pBvDrzb54Yyzy66S5Ksa8oEhuepCfVAREyrAzn0YVuEue07SXvWXS88Q==}
+    dependencies:
+      '@tsparticles/engine': 3.0.3
+      '@tsparticles/interaction-external-trail': 3.0.3
+      '@tsparticles/plugin-absorbers': 3.0.3
+      '@tsparticles/plugin-emitters': 3.0.3
+      '@tsparticles/plugin-emitters-shape-circle': 3.0.3
+      '@tsparticles/plugin-emitters-shape-square': 3.0.3
+      '@tsparticles/shape-text': 3.0.3
+      '@tsparticles/slim': 3.0.3
+      '@tsparticles/updater-destroy': 3.0.3
+      '@tsparticles/updater-roll': 3.0.3
+      '@tsparticles/updater-tilt': 3.0.3
+      '@tsparticles/updater-twinkle': 3.0.3
+      '@tsparticles/updater-wobble': 3.0.3
+    dev: false
+
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -5196,7 +5708,7 @@ packages:
       - rollup
     dev: true
 
-  /unplugin-icons@0.17.4(@vue/compiler-sfc@3.3.8):
+  /unplugin-icons@0.17.4(@vue/compiler-sfc@3.4.5):
     resolution: {integrity: sha512-PHLxjBx3ZV8RUBvfMafFl8uWH88jHeZgOijcRpkwgne7y2Ovx7WI0Ltzzw3fjZQ7dGaDhB8udyKVdm9N2S6BIw==}
     peerDependencies:
       '@svgr/core': '>=7.0.0'
@@ -5219,7 +5731,7 @@ packages:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.6
       '@iconify/utils': 2.1.11
-      '@vue/compiler-sfc': 3.3.8
+      '@vue/compiler-sfc': 3.4.5
       debug: 4.3.4
       kolorist: 1.8.0
       local-pkg: 0.5.0
@@ -5333,11 +5845,11 @@ packages:
   /vcolorpicker@2.0.10(typescript@5.2.2):
     resolution: {integrity: sha512-5MwXNF9CoPs0d3ZhcFbvjrGFTApUQQXdZXEScLKjDg3CFs/YRLCVoSgS0d0WJVJr323rB15bxdpI5ydlUzcl7g==}
     dependencies:
-      '@vueuse/core': 9.13.0(vue@3.3.8)
+      '@vueuse/core': 9.13.0(vue@3.4.5)
-      ant-design-vue: 3.2.20(vue@3.3.8)
+      ant-design-vue: 3.2.20(vue@3.4.5)
       highlight.js: 11.9.0
       vcolorpicker: 2.0.9(typescript@5.2.2)
-      vue: 3.3.8(typescript@5.2.2)
+      vue: 3.4.5(typescript@5.2.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - typescript
@@ -5371,11 +5883,11 @@ packages:
   /vcolorpicker@2.0.5(typescript@5.2.2):
     resolution: {integrity: sha512-WLxch6FZTCrSia43TJgG2vspaB8NZRw2mVPSsK31kZWgx6xYUyTjqDZp/zFxhuDcThOqTSoFG0EBxfZy5wn9lQ==}
     dependencies:
-      '@vueuse/core': 9.13.0(vue@3.3.8)
+      '@vueuse/core': 9.13.0(vue@3.4.5)
-      ant-design-vue: 3.2.20(vue@3.3.8)
+      ant-design-vue: 3.2.20(vue@3.4.5)
       highlight.js: 11.9.0
       vcolorpicker: 2.0.12(typescript@5.2.2)
-      vue: 3.3.8(typescript@5.2.2)
+      vue: 3.4.5(typescript@5.2.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - typescript
@@ -5384,11 +5896,11 @@ packages:
   /vcolorpicker@2.0.8(typescript@5.2.2):
     resolution: {integrity: sha512-8Jv6cQfzcGP0cWCV81Kq52qp7xrX5bVjzEozYH5TorEeqWB71Ptj/6+CcOCU45NYgF6jOfGAsGZxjPwkboHDMw==}
     dependencies:
-      '@vueuse/core': 9.13.0(vue@3.3.8)
+      '@vueuse/core': 9.13.0(vue@3.4.5)
-      ant-design-vue: 3.2.20(vue@3.3.8)
+      ant-design-vue: 3.2.20(vue@3.4.5)
       highlight.js: 11.9.0
       vcolorpicker: 2.0.5(typescript@5.2.2)
-      vue: 3.3.8(typescript@5.2.2)
+      vue: 3.4.5(typescript@5.2.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - typescript
@@ -5397,11 +5909,11 @@ packages:
   /vcolorpicker@2.0.9(typescript@5.2.2):
     resolution: {integrity: sha512-vTMr2/kpumhWan4seGugXfh4R55s266asALfF5wM4EZfNVAgXy23+wgyiVVzXQe7Rk3F4wNtVP/sKrLEIPJTIw==}
     dependencies:
-      '@vueuse/core': 9.13.0(vue@3.3.8)
+      '@vueuse/core': 9.13.0(vue@3.4.5)
-      ant-design-vue: 3.2.20(vue@3.3.8)
+      ant-design-vue: 3.2.20(vue@3.4.5)
       highlight.js: 11.9.0
       vcolorpicker: 2.0.8(typescript@5.2.2)
-      vue: 3.3.8(typescript@5.2.2)
+      vue: 3.4.5(typescript@5.2.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - typescript
@@ -5630,6 +6142,21 @@ packages:
     dependencies:
       vue: 3.3.8(typescript@5.2.2)
 
+  /vue-demi@0.14.6(vue@3.4.5):
+    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.4.5(typescript@5.2.2)
+    dev: false
+
   /vue-eslint-parser@9.3.2(eslint@8.53.0):
     resolution: {integrity: sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -5686,6 +6213,16 @@ packages:
       vue: 3.3.8(typescript@5.2.2)
     dev: false
 
+  /vue-types@3.0.2(vue@3.4.5):
+    resolution: {integrity: sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==}
+    engines: {node: '>=10.15.0'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      is-plain-object: 3.0.1
+      vue: 3.4.5(typescript@5.2.2)
+    dev: false
+
   /vue-types@4.2.1(vue@3.3.8):
     resolution: {integrity: sha512-DNQZmJuOvovLUIp0BENRkdnZHbI0V4e2mNvjAZOAXKD56YGvRchtUYOXA/XqTxdv7Ng5SJLZqRKRpAhm5NLaPQ==}
     engines: {node: '>=12.16.0'}
@@ -5733,6 +6270,22 @@ packages:
       '@vue/shared': 3.3.8
       typescript: 5.2.2
 
+  /vue@3.4.5(typescript@5.2.2):
+    resolution: {integrity: sha512-VH6nHFhLPjgu2oh5vEBXoNZxsGHuZNr3qf4PHClwJWw6IDqw6B3x+4J+ABdoZ0aJuT8Zi0zf3GpGlLQCrGWHrw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/compiler-dom': 3.4.5
+      '@vue/compiler-sfc': 3.4.5
+      '@vue/runtime-dom': 3.4.5
+      '@vue/server-renderer': 3.4.5(vue@3.4.5)
+      '@vue/shared': 3.4.5
+      typescript: 5.2.2
+    dev: false
+
   /w3c-xmlserializer@4.0.0:
     resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
     engines: {node: '>=14'}

src/components.d.ts

@@ -9,8 +9,10 @@ declare module 'vue' {
   export interface GlobalComponents {
     DaiysuiTable: typeof import('./components/DaiysuiTable/index.vue')['default']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    ImageSync: typeof import('./components/ImageSync/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    StarsBackground: typeof import('./components/StarsBackground/index.vue')['default']
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     Table: typeof import('./components/Table/index.vue')['default']
   }

src/components/DaiysuiTable/index.vue

@@ -30,7 +30,7 @@ const actionsColumns = computed<any[]>(() => {
 
 <template>
     <div class="overflow-x-auto">
-        <table class="table">
+        <table class="table min-w-[600px]">
             <!-- head -->
             <thead>
                 <tr>
@@ -40,7 +40,7 @@ const actionsColumns = computed<any[]>(() => {
                     <th></th>
                 </tr>
             </thead>
-            <tbody>
+            <tbody v-if="data.length > 0">
                 <!-- row  -->
                 <tr class="hover" v-for="item in data" :key="item.id">
                     <th>{{ item.id }}</th>
@@ -55,6 +55,11 @@ const actionsColumns = computed<any[]>(() => {
                     </td>
                 </tr>
             </tbody>
+            <tbody v-else>
+                <tr>
+                    <td colspan="5" class="text-center">暂无数据</td>
+                </tr>
+            </tbody>
             <!-- foot -->
 
 

src/components/ImageSync/index.vue

@@ -0,0 +1,36 @@
+<script setup lang='ts'>
+import {ref,onMounted} from 'vue'
+import localforage from 'localforage'
+const props=defineProps({
+  imgItem: {
+    type:Object,
+    default:()=>({})
+  },
+})
+const imageDbStore = localforage.createInstance({
+    name: 'imgStore'
+})
+
+const imgUrl=ref('')
+
+
+const getImageStoreItem=async (item:any)=>{
+    const key=item.id;
+     const image=await imageDbStore.getItem(key)
+     
+return image
+}
+
+onMounted(async ()=>{
+    const image=await getImageStoreItem(props.imgItem)
+    imgUrl.value=image
+})
+</script>
+
+<template>
+    <img :src="imgUrl" Alt="Image"/>
+</template>
+
+<style lang='scss' scoped>
+
+</style>

src/components/StarsBackground/index.vue

@@ -0,0 +1,37 @@
+<script setup lang='ts'>
+import Sparticles from 'sparticles';
+import {ref,onMounted,onUnmounted} from 'vue';
+import { useElementSize } from '@vueuse/core';
+
+const starRef=ref();
+
+const { width, height}=useElementSize(starRef);
+let options = ref({ shape: 'star',parallax:1.2,rotate:true,twinkle:true, speed: 10,count:200 });
+function addSparticles(node:any,width:number,height:number) {
+     new Sparticles(node, options.value,width,height);
+}
+// 页面大小改变时
+const listenWindowSize=()=>{
+    window.addEventListener('resize',()=>{
+        if (width.value && height.value) {
+            addSparticles(starRef.value,width.value,height.value);
+        }
+    });
+}
+
+onMounted(()=>{
+    addSparticles(starRef.value,width.value,height.value);
+    listenWindowSize()
+})
+onUnmounted(()=>{
+    window.removeEventListener('resize',listenWindowSize)
+})
+
+</script>
+
+<template>
+    <div class="w-screen h-screen overflow-hidden bg-transparent" ref="starRef">
+    </div>
+</template>
+
+<style lang='scss' scoped></style>

src/layout/index.vue

@@ -9,7 +9,7 @@
       <Header></Header>
     </header> -->
     <main class="box-content w-screen h-screen overflow-x-hidden overflow-y-auto main-container">
-      <router-view class="main-container-content"></router-view>
+      <router-view class="h-full main-container-content"></router-view>
     </main>
     <!-- <footer class="w-screen footer-container">
       <Footer></Footer>

src/main.ts

@@ -4,7 +4,6 @@ import './style/style.scss'
 import * as THREE from 'three';
 import App from './App.vue';
 
-
 const app = createApp(App);
 // 全局svg组件
 import 'virtual:svg-icons-register';

src/router/index.ts

@@ -112,6 +112,11 @@ const routes = [
         name: 'Home',
         component: Home,
       },
+      {
+        path:'/demo',
+        name:'Demo',
+        component:()=>import('@/views/Demo/index.vue')
+      },
       configRoutes,
     ],
   },

src/store/data.ts

@@ -1,3 +1,4 @@
+import { IPrizeConfig } from '@/types/prizeConfig';
 export const defaultMusicList=[
     {
         id:'Geoff Knorr - China (The Industrial Era).ogg'+new Date().getTime().toString(),
@@ -56,3 +57,109 @@ export const defaultMusicList=[
     },
 
 ]
+
+export const defaultPrizeList=<IPrizeConfig[]>[
+    {
+        id:'001',
+        name:'一等奖',
+        sort:1,
+        isAll:true,
+        count:1,
+        picture:{
+            id:'0',
+            name:'一等奖',
+            url:'https://24years.top/resource/image/image1.png'
+        },
+        desc:'一等奖',
+        isShow:true,
+        frequency:1,
+    },
+    {
+        id:'002',
+        name:'二等奖',
+        sort:2,
+        isAll:true,
+        count:1,
+        picture: {
+            id:'1',
+            name:'二等奖',
+            url:'https://24years.top/resource/image/image2.png'
+        },
+        desc:'二等奖',
+        isShow:true,
+        frequency:1,
+    },
+    {
+        id:'003',
+        name:'三等奖',
+        sort:3,
+        isAll:true,
+        count:1,
+        picture: {
+            id:'2',
+            name:'三等奖',
+            url:'https://24years.top/resource/image/image3.png'
+        },
+        desc:'三等奖',
+        isShow:true,
+        frequency:1,
+    },
+    {
+        id:'004',
+        name:'超级大奖',
+        sort:4,
+        isAll:true,
+        count:1,
+        picture: {
+            id:'3',
+            name:'超级奖',
+            url:'https://24years.top/resource/image/image4.png'
+        },
+        desc:'超级大奖',
+        isShow:true,
+        frequency:1,
+    },
+    {
+        id:'005',
+        name:'特别奖',
+        sort:5,
+        isAll:true,
+        count:1,
+        picture:{
+            id:'4',
+            name:'特别奖',
+            url:'https://24years.top/resource/image/image5.png'
+        },
+        desc:'特别奖',
+        isShow:true,
+        frequency:1,
+    }
+]
+
+export const defaultImageList=[
+    {
+        id:'0',
+        name:'一等奖',
+        url:'https://24years.top/resource/image/image1.png'
+    },
+    {
+        id:'1',
+        name:'二等奖',
+        url:'https://24years.top/resource/image/image2.png'
+    },
+    {
+        id:'2',
+        name:'三等奖',
+        url:'https://24years.top/resource/image/image3.png'
+    },
+    {
+        id:'3',
+        name:'超级奖',
+        url:'https://24years.top/resource/image/image4.png'
+    },
+    {
+        id:'4',
+        name:'特别奖',
+        url:'https://24years.top/resource/image/image5.png'
+    }
+]

src/store/globalConfig.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { defaultMusicList } from './data'
+import { defaultMusicList,defaultImageList } from './data'
 // import { IPrizeConfig } from '@/types/prizeConfig';
 export const useGlobalConfig = defineStore('global', {
     state() {
@@ -16,6 +16,7 @@ export const useGlobalConfig = defineStore('global', {
                     textSize: 30
                 },
                 musicList: defaultMusicList,
+                imageList:defaultImageList,
             }
         };
     },
@@ -54,6 +55,10 @@ export const useGlobalConfig = defineStore('global', {
         // 获取音乐列表
         getMusicList(state) {
             return state.globalConfig.musicList;
+        },
+        // 获取图片列表
+        getImageList(state) {
+            return state.globalConfig.imageList;
         }
 
     },
@@ -112,6 +117,32 @@ export const useGlobalConfig = defineStore('global', {
         clearMusicList() {
             this.globalConfig.musicList = [];
         },
+        // 添加图片
+        addImage(image:any){
+            for (let i = 0; i < this.globalConfig.imageList.length; i++) {
+                if (this.globalConfig.imageList[i].name === image.name) {
+                    return;
+                }
+            }
+            this.globalConfig.imageList.push(image);
+        },
+        // 删除图片
+        removeImage(imageId: string) {
+            for (let i = 0; i < this.globalConfig.imageList.length; i++) {
+                if (this.globalConfig.imageList[i].id === imageId) {
+                    this.globalConfig.imageList.splice(i, 1);
+                    break;
+                }
+            }
+        },
+        // 重置图片列表
+        resetImageList() {
+            this.globalConfig.imageList = defaultImageList;
+        },
+        // 清空图片列表
+        clearImageList() {
+            this.globalConfig.imageList = [];
+        },
         // 重置所有配置
         reset() {
             this.globalConfig = {
@@ -126,7 +157,8 @@ export const useGlobalConfig = defineStore('global', {
                     textSize: 30
 
                 },
-                musicList: defaultMusicList
+                musicList: defaultMusicList,
+                imageList:defaultImageList,
             }
         }
     },

src/store/personConfig.ts

@@ -24,6 +24,10 @@ export const usePersonConfig = defineStore('person', {
     getNotPersonList(state) {
       return state.personConfig.notPersonList;
     },
+    // 获取所有人员名单
+    getAllPersonList(state) {
+      return state.personConfig.alreadyPersonList.concat(state.personConfig.notPersonList);
+    },
     // 获取table列数
     getTableRowCount(state) {
       return state.personConfig.tableRowCount;
@@ -53,6 +57,14 @@ export const usePersonConfig = defineStore('person', {
           this.personConfig.notPersonList = this.personConfig.notPersonList.filter((item: IPersonConfig) => item.id!== item.id);
         });
     },
+    // 删除指定人员
+    deletePerson(person:IPersonConfig){
+        console.log('delperson:',person);
+        if(person.id!=undefined||person.id!=null){
+            this.personConfig.alreadyPersonList = this.personConfig.alreadyPersonList.filter((item: IPersonConfig) => item.id!== person.id);
+            this.personConfig.notPersonList = this.personConfig.notPersonList.filter((item: IPersonConfig) => item.id!== person.id);
+        }
+    },
     // 删除所有人员
     deleteAllPerson() {
         this.personConfig.alreadyPersonList = [];

src/store/prizeConfig.ts

@@ -1,15 +1,20 @@
 import { defineStore } from 'pinia';
 import { IPrizeConfig } from '@/types/prizeConfig';
+import {defaultPrizeList} from './data';
 export const usePrizeConfig = defineStore('prize', {
   state() {
     return {
       prizeConfig:{
-        prizeList:[] as IPrizeConfig[],
+        prizeList:defaultPrizeList,
       }
     };  
   },
   getters: {
     // 获取全部配置
+    getPrizeConfigAll(state) {
+      return state.prizeConfig;
+    },
+    // 获取奖品列表
     getPrizeConfig(state) {
       return state.prizeConfig.prizeList;
     },
@@ -39,10 +44,14 @@ export const usePrizeConfig = defineStore('prize', {
         const index = this.prizeConfig.prizeList.findIndex(item => item.id === prizeConfigItem.id);
         this.prizeConfig.prizeList[index] = prizeConfigItem;
     },
+    // 删除全部奖项
+    deleteAllPrizeConfig() {
+        this.prizeConfig.prizeList = [];
+    },
     // 重置所有配置
-    reset() {
+    resetDefault() {
         this.prizeConfig = {
-            prizeList:[] as IPrizeConfig[],
+            prizeList:defaultPrizeList,
         }
     },
   },

src/types/prizeConfig.ts

@@ -4,7 +4,12 @@ export interface IPrizeConfig {
     sort:number;
     isAll:boolean;
     count:number;
-    picture:string[];
+    picture:{
+        id:string|number,
+        name:string,
+        url:string
+    };
     desc:string;
     isShow:boolean;
+    frequency:number;
 }

src/views/Config/Global/FaceConfig.vue

@@ -1,6 +1,8 @@
 <script setup lang='ts'>
 import { ref, watch, onMounted } from 'vue'
 import useStore from '@/store'
+
+import {storeToRefs } from 'pinia'
 import { themeChange } from 'theme-change';
 import zod from 'zod';
 import daisyuiThemes from 'daisyui/src/theming/themes'
@@ -10,18 +12,18 @@ import {isRgbOrRgba,isHex} from '@/utils/color'
 
 const personConfig = useStore().personConfig
 const globalConfig = useStore().globalConfig
-const { getTheme: localTheme, getCardColor: cardColor,getTextColor:textColor,getCardSize:cardSize,getTextSize: textSize} = globalConfig
+const { getTheme: localTheme, getCardColor: cardColor,getTextColor:textColor,getCardSize:cardSize,getTextSize: textSize} = storeToRefs(globalConfig)
-const { getTableRowCount: tableRowCount, getShowField } = personConfig
+const { getTableRowCount: tableRowCount, getShowField } = storeToRefs(personConfig)
 const colorPickerRef = ref()
 
 interface ThemeDaType {
     [key: string]: any
 }
-const themeValue = ref(localTheme.name)
+const themeValue = ref(localTheme.value.name)
-const cardColorValue = ref(cardColor)
+const cardColorValue = ref(structuredClone(cardColor.value))
-const textColorValue = ref(textColor)
+const textColorValue = ref(structuredClone(textColor.value))
-const cardSizeValue = ref(cardSize)
+const cardSizeValue = ref(structuredClone(cardSize.value))
-const textSizeValue = ref(textSize)
+const textSizeValue = ref(structuredClone(textSize.value))
 const themeList = ref(Object.keys(daisyuiThemes))
 const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
 const formData = ref({
@@ -81,7 +83,6 @@ watch(themeValue, (val: any) => {
     themeChange(val)
     if(selectedThemeDetail.primary&&(isHex(selectedThemeDetail.primary)||isRgbOrRgba(selectedThemeDetail.primary))){
         globalConfig.setCardColor(selectedThemeDetail.primary)
-        cardColorValue.value=selectedThemeDetail.primary
     }
 }, { deep: true })
 
@@ -114,18 +115,6 @@ onMounted(() => {
                 </span>
             </div>
         </label>
-        <!-- <label class="w-full max-w-xs form-control">
-            <div class="label">
-                <span class="label-text">展示字段</span>
-            </div>
-            <ul class="flex gap-6 pl-0">
-                <li v-for="item in formData.showField" :key="item" class="flex items-center gap-1">
-                    <input type="checkbox" :checked="item.value" class="border-solid checkbox checkbox-primary border-1"
-                        @change="handleChangeShowFields(item)" />
-                    <span class="label-text">{{ item.label }}</span>
-                </li>
-            </ul>
-        </label> -->
         <label class="w-full max-w-xs form-control">
             <div class="label">
                 <span class="label-text">选择主题</span>

src/views/Config/Global/ImageConfig.vue

@@ -2,9 +2,14 @@
 import { ref, onMounted, watch } from 'vue'
 import { readImage } from '@/utils/file'
 import localforage from 'localforage'
+import useStore from '@/store'
+import { storeToRefs } from 'pinia'
+import ImageSync from '@/components/ImageSync/index.vue'
 
+
+const globalConfig= useStore().globalConfig
+const { getImageList:localImageList} = storeToRefs(globalConfig)
 const limitType = ref('image/*')
-const imgList = ref<any>([])
 const imgUploadToast = ref(0) //0是不显示，1是成功，2是失败,3是不是图片
 const imageDbStore = localforage.createInstance({
     name: 'imgStore'
@@ -28,20 +33,28 @@ const handleFileChange = async (e: any) => {
 }
 
 const getImageDbStore =async () => {
-    imgList.value = []
     const keys =await imageDbStore.keys()
     if(keys.length>0){
         imageDbStore.iterate((value, key) => {
-            imgList.value.push({
+            globalConfig.addImage({
-                key,
+                id:key,
-                value
+                name:key,
+                url:'Storage'
             })
         })
     }
 }
 
+const removeImage=(item:any)=>{
+    if(item.url=='Storage'){
+        imageDbStore.removeItem(item.id).then(() => {
+            globalConfig.removeImage(item.id)
+        })
+    }
+    globalConfig.removeImage(item.id)
+}
 onMounted(() => {
-    getImageDbStore()
+    // getImageDbStore()
 })
 watch(() => imgUploadToast.value, (val) => {
     if (val !== 0) {
@@ -73,16 +86,20 @@ watch(() => imgUploadToast.value, (val) => {
                 <span class="btn btn-primary btn-sm">上传图片</span>
             </label>
         </div>
-        <ul>
+        <ul class="p-0">
-            <li v-for="item in imgList" :key="item">
+            <li v-for="item in localImageList" :key="item.id" class="mb-3">
-                <div class="flex items-center gap-3">
+                <div class="flex items-center gap-8">
-                    <div class="avatar">
+                    <div class="avatar h-14">
-                        <div class="w-12 h-12 mask mask-squircle">
+                        <div class="w-12 h-12 mask mask-squircle hover:w-14 hover:h-14">
-                            <img :src="item.value" alt="Avatar Tailwind CSS Component" />
+                            <img v-if="item.url!=='Storage'" :src="item.url" alt="Avatar Tailwind CSS Component" />
+                            <ImageSync v-else :imgItem="item"></ImageSync>
                         </div>
                     </div>
+                    <div class="w-64">
+                        <div class="overflow-hidden font-bold whitespace-nowrap text-ellipsis">{{ item.name}}</div>
+                    </div>
                     <div>
-                        <div class="font-bold">{{ item.key.split('+')[1] }}</div>
+                        <button class="btn btn-error btn-xs" @click="removeImage(item)">删除</button>
                     </div>
                 </div>
             </li>

src/views/Config/Global/MusicConfig.vue

@@ -1,5 +1,6 @@
 <script setup lang='ts'>
 import { ref, onMounted } from 'vue'
+import {storeToRefs } from 'pinia'
 import { readMusic } from '@/utils/file'
 import useStore from '@/store';
 
@@ -11,7 +12,7 @@ const audioDbStore = localforage.createInstance({
 })
 const globalConfig = useStore().globalConfig
 
-const { getMusicList: localMusicList } = globalConfig;
+const { getMusicList: localMusicList } = storeToRefs(globalConfig);
 const audio = ref(new Audio())
 const limitType = ref('audio/*')
 const localMusicListValue = ref(localMusicList)
@@ -49,7 +50,6 @@ const resetMusic = () => {
 const deleteAll = () => {
     globalConfig.clearMusicList()
     audioDbStore.clear()
-    localMusicListValue.value = []
 }
 const getMusicDbStore = async () => {
     const keys = await audioDbStore.keys()
@@ -90,17 +90,17 @@ onMounted(() => {
 <template>
     <div>
         <div class="flex gap-3">
-            <button class="btn btn-primary btn-xs" @click="resetMusic">重置音乐列表</button>
+            <button class="btn btn-primary btn-sm" @click="resetMusic">重置音乐列表</button>
             <label for="explore">
                 <input type="file" class="" id="explore" style="display: none" @change="handleFileChange"
                     :accept="limitType" />
                 <span class="btn btn-primary btn-sm">上传音乐</span>
             </label>
-            <button class="btn btn-primary btn-xs" @click="pausePlay">暂停播放</button>
+            <button class="btn btn-primary btn-sm" @click="pausePlay">暂停播放</button>
-            <button class="btn btn-error btn-xs" @click="deleteAll">删除所有</button>
+            <button class="btn btn-error btn-sm" @click="deleteAll">删除所有</button>
         </div>
         <div>
-            <ul>
+            <ul class="p-0">
                 <li v-for="item in localMusicListValue" :key="item.id" class="flex items-center gap-6 pb-2 mb-3 divide-y">
                     <div class="mr-12 overflow-hidden w-72 whitespace-nowrap text-ellipsis">
                         <span>

src/views/Config/Person/PersonAll.vue

@@ -1,49 +1,52 @@
 <!-- eslint-disable vue/no-parsing-error -->
 <script setup lang='ts'>
-import { ref } from 'vue';
+import { ref,onMounted } from 'vue';
 import useStore from '@/store'
+import {storeToRefs } from 'pinia'
 import * as XLSX from 'xlsx'
 import { readFile } from '@/utils/file'
 import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
 
 const personConfig = useStore().personConfig
 
-const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList ,getTableRowCount:rowCount} = personConfig
+const { getAllPersonList:allPersonList,getTableRowCount:rowCount} = storeToRefs(personConfig)
 const limitType = '.xlsx,.xls'
 const excelData = ref<any[]>([])
-const personList = ref<any[]>(
+// const personList = ref<any[]>([])
-    notPersonList.concat(alreadyPersonList)
+
-)
+
 const handleFileChange = async (e: any) => {
     let dataBinary = await readFile(e.target.files[0])
     let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
     let workSheet = workBook.Sheets[workBook.SheetNames[0]]
     excelData.value = XLSX.utils.sheet_to_json(workSheet)
-    personList.value = filterData(excelData.value)
+    const uploadData = filterData(excelData.value,rowCount.value)
 
     personConfig.resetPerson()
-    personConfig.addNotPersonList(personList.value)
+    personConfig.addNotPersonList(uploadData)
 }
 
-const filterData = (tableData: any[]) => {
+const filterData = (tableData: any[],localRowCount: number) => {
     const dataLength = tableData.length
     let j = 0;
     for (let i = 0; i < dataLength; i++) {
-        if (i % rowCount === 0) {
+        if (i % localRowCount === 0) {
             j++;
         }
-        tableData[i].x = i % rowCount + 1;
+        tableData[i].x = i % localRowCount + 1;
         tableData[i].y = j;
         tableData[i].id = i;
         // 是否中奖
         tableData[i].isWin = false
     }
     
-return personList.value = tableData
+return tableData
 }
 const deleteAll = () => {
     personConfig.deleteAllPerson()
-    personList.value = notPersonList.concat(alreadyPersonList)
+}
+const delPersonItem = (row: any) => {
+    personConfig.deletePerson(row)
 }
 
 const tableColumns = [
@@ -73,28 +76,30 @@ const tableColumns = [
     {
         label: '操作',
         actions: [
-            {
+            // {
-                label: '编辑',
+            //     label: '编辑',
-                type: 'btn-info',
+            //     type: 'btn-info',
-                onClick: (row: any) => {
+            //     onClick: (row: any) => {
-                    console.log('编辑:', row)
+            //         delPersonItem(row)
-                }
+            //     }
-            },
+            // },
             {
                 label: '删除',
                 type: 'btn-error',
                 onClick: (row: any) => {
-                    console.log('删除:', row)
+                    delPersonItem(row)
                 }
             },
 
         ]
     },
 ]
+onMounted(() => {
+})
 </script>
 
 <template>
-    <div class="">
+    <div class="min-w-1000px">
         <div class="flex justify-center gap-3">
             <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button>
             <div class="">
@@ -110,7 +115,7 @@ const tableColumns = [
 
             </div>
         </div>
-        <DaiysuiTable :tableColumns="tableColumns" :data="personList"></DaiysuiTable>
+        <DaiysuiTable :tableColumns="tableColumns" :data="allPersonList"></DaiysuiTable>
     </div>
 </template>
 

src/views/Config/Prize/PrizeConfig.vue

@@ -1,7 +1,7 @@
 <script setup lang='ts'>
 import { ref, onMounted,watch } from 'vue'
 import useStore from '@/store'
-
+import {storeToRefs } from 'pinia'
 import localforage from 'localforage'
 import { IPrizeConfig } from '@/types/prizeConfig';
 
@@ -9,22 +9,33 @@ const imageDbStore = localforage.createInstance({
     name: 'imgStore'
 })
 const prizeConfig = useStore().prizeConfig
-const { getPrizeConfig } = prizeConfig
+const globalConfig = useStore().globalConfig
-const prizeList = ref(getPrizeConfig)
+const { getPrizeConfig:localPrizeList} = storeToRefs(prizeConfig)
+
+const { getImageList:localImageList} = storeToRefs(globalConfig)
+const prizeList = ref(localPrizeList)
 const imgList = ref<any[]>([])
 const addPrize = () => {
     const defaultPrizeCOnfig: IPrizeConfig = {
         id: new Date().getTime().toString(),
         name: '奖项',
         sort: 0,
-        isAll: false,
+        isAll: true,
         count: 1,
-        picture: [''],
+        picture: {
+            id:'',
+            name:'',
+            url:''
+        },
         desc: '',
-        isShow: true
+        isShow: true,
+        frequency: 1,
     }
     prizeConfig.addPrizeConfig(defaultPrizeCOnfig)
 }
+const resetDefault=()=>{
+    prizeConfig.resetDefault()
+}
 
 const getImageDbStore = async () => {
     const keys = await imageDbStore.keys()
@@ -48,6 +59,13 @@ const sort = (item:any,isUp:number) => {
         prizeList.value.splice(itemIndex+1,0,item)
     }
 }
+const delItem=(item:IPrizeConfig)=>{
+    prizeConfig.deletePrizeConfig(item.id)
+    // 更新奖项列表
+}
+const delAll=async ()=>{
+  await prizeConfig.deleteAllPrizeConfig()
+}
 onMounted(() => {
     getImageDbStore()
 })
@@ -59,9 +77,15 @@ watch(()=>prizeList,()=>{
 <template>
     <div>
         <h2>奖项配置</h2>
+        <div class="flex w-full gap-3">
+        <button class="btn btn-info btn-sm" @click="addPrize">添加</button>
+        <button class="btn btn-info btn-sm" @click="resetDefault">默认列表</button>
+        <button class="btn btn-error btn-sm" @click="delAll">全部删除</button>
+        
+    </div>
         <ul>
             <li v-for="item in prizeList" :key="item.id" class="flex gap-10">
-                <label class="w-full max-w-xs mb-10 form-control">
+                <label class="max-w-xs mb-10 form-control">
                     <!-- 向上向下 -->
                     <div class="flex flex-col items-center gap-2 pt-5">
                         <svg-icon class="cursor-pointer hover:text-blue-400" :class="prizeList.indexOf(item)==0?'opacity-0 cursor-default':''" name="up" @click="sort(item,1)"></svg-icon>
@@ -94,19 +118,32 @@ watch(()=>prizeList,()=>{
                     </div>
                     <select class="w-full max-w-xs select select-warning select-sm"  v-model="item.picture">
                         <option disabled selected>选择一张图片</option>
-                        <option v-for="picItem in imgList" :key="picItem.key">{{ picItem.key.split('+')[1] }}</option>
+                        <option v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{ picItem.name }}</option>
                     </select>
                 </label>
                 <label class="w-full max-w-xs mb-10 form-control">
                     <div class="label">
-                        <span class="label-text">是否显示</span>
+                        <span class="label-text">展示在主界面</span>
                     </div>
                     <input type="checkbox" :checked="item.isShow" @change="item.isShow =!item.isShow"
                         class="mt-2 border-solid checkbox checkbox-secondary border-1" />
                 </label>
+                <label class="w-full max-w-xs mb-10 form-control">
+                    <div class="label">
+                        <span class="label-text">抽取次数</span>
+                    </div>
+                    <input type="text" v-model="item.frequency" placeholder="抽取次数" class="w-full max-w-xs input-sm input input-bordered" />
+                </label>
+                <label class="w-full max-w-xs mb-10 form-control">
+                    <div class="label">
+                        <span class="label-text">操作</span>
+                    </div>
+                    <div class="flex gap-2">
+                    <button class="btn btn-error btn-sm" @click="delItem(item)">删除</button>
+                </div>
+                </label>
             </li>
         </ul>
-        <button class="btn btn-info" @click="addPrize">添加</button>
     </div>
 </template>
 

src/views/Config/index.vue

@@ -33,8 +33,8 @@ const skip = (path: string) => {
 </script>
 
 <template>
-    <div class="flex min-h-[calc(100%-260px)]">
+    <div class="flex min-h-[calc(100%-280px)]">
-        <ul class="w-56 m-0 menu bg-base-200 pt-14 rounded-box">
+        <ul class="w-56 m-0 mr-3 menu bg-base-200 pt-14">
             <li v-for="item in menuList" :key="item.name">
                 <details open v-if="item.children">
                     <summary>{{ item.meta.title }}</summary>
@@ -60,7 +60,7 @@ const skip = (path: string) => {
                     :style="item.name == route.name ? 'background-color:rgba(12,12,12,0.2)' : ''">{{ item.meta!.title }}</a>
             </li>
         </ul>
-        <router-view></router-view>
+        <router-view class="mt-5"></router-view>
     </div>
     <footer class="p-10 rounded footer footer-center bg-base-200 text-base-content">
         <nav class="grid grid-flow-col gap-4">
@@ -71,20 +71,17 @@ const skip = (path: string) => {
         </nav>
         <nav>
             <div class="grid grid-flow-col gap-4">
-                    <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
-                            class="fill-current">
                         <path
                             d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z">
                         </path>
                     </svg></a>
-                    <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
-                            class="fill-current">
                         <path
                             d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z">
                         </path>
                     </svg></a>
-                <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
-                        class="fill-current">
                         <path
                             d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z">
                         </path>
@@ -92,8 +89,11 @@ const skip = (path: string) => {
             </div>
         </nav>
         <aside>
-            <p>Copyright © 2024 - All right reserved by ACME Industries Ltd</p>
+
+            <p class="p-0 m-0">蜀ICP备2021028666号</p>
+            <p>Copyright © 2024 - All right reserved by Log1997</p>
         </aside>
-    </footer></template>
+    </footer>
+</template>
 
 <style scoped></style>

src/views/Demo/index.vue

@@ -0,0 +1,15 @@
+<script setup lang='ts'>
+
+import StarsBackground from '../../components/StarsBackground/index.vue'
+
+</script>
+
+<template>
+<div>
+    <StarsBackground></StarsBackground>
+</div>
+</template>
+
+<style lang='scss' scoped>
+
+</style>

src/views/Home/PrizeList.vue

@@ -1,13 +1,34 @@
 <script setup lang='ts'>
-
+import {ref} from 'vue'
+import {storeToRefs} from 'pinia'
 import useStore from '@/store'
 
 const prizeConfig=useStore().prizeConfig
+const {getPrizeConfig:localPrizeList}=storeToRefs(prizeConfig)
+
+
+const delAll = () => {
+    prizeConfig.deleteAllPrizeConfig()
+}
+
+const resetDefault = () => {
+    prizeConfig.resetDefault()
+}
+
+const print = () => {
+    console.log(prizeConfig)
+}
 </script>
 
 <template>
 <div>
-List
+    
+    <button class="btn btn-secondary" @click="delAll">全部删除</button>
+    
+    <button class="btn btn-secondary" @click="resetDefault">默认</button>
+
+    
+    <button class="btn btn-secondary" @click="print">打印</button>
 </div>
 </template>
 

src/views/Home/index.vue

@@ -3,6 +3,8 @@ import { ref, onMounted } from 'vue'
 // import { tableData2 as tableData } from './data'
 import { rgba } from '@/utils/color'
 import PlayMusic from './PlayMusic.vue'
+import PrizeList from './PrizeList.vue'
+import StarsBackground from '@/components/StarsBackground/index.vue'
 import * as THREE from 'three'
 import {
     CSS3DRenderer, CSS3DObject
@@ -181,7 +183,7 @@ const init = () => {
 }
 
 const transform = (targets: any[], duration: number) => {
-    // TWEEN.removeAll();
+    TWEEN.removeAll();
     const objLength = objects.value.length;
     for (let i = 0; i < objLength; ++i) {
         let object = objects.value[i];
@@ -204,6 +206,7 @@ const transform = (targets: any[], duration: number) => {
         .to({}, duration * 2)
         .onUpdate(render)
         .start();
+    // 整体自动旋转
 }
 function onWindowResize() {
     camera.value.aspect = window.innerWidth / window.innerHeight
@@ -219,9 +222,27 @@ function onWindowResize() {
 function animation() {
     TWEEN.update();
     controls.value.update();
+    // 设置自动旋转
+    // console.log('animation',controls.value.target);
+    // 设置相机位置
     requestAnimationFrame(animation);
 }
 
+// // 自动旋转的动画
+function autoRotate() {
+   const rotateObj= new TWEEN.Tween(scene.value.rotation);
+   rotateObj
+      .to(
+        {
+          y: Math.PI * Math.random() * 1000,
+          x:Math.PI*Math.random()*1000,
+        },
+        3000 * 1000
+      )
+      .onUpdate(render)
+     .start();
+}
+
 
 function render() {
     renderer.value.render(scene.value, camera.value);
@@ -242,10 +263,15 @@ onMounted(() => {
             <button id="table" @click="transform(targets.table, 2000)">TABLE</button>
             <button id="sphere" @click="transform(targets.sphere, 2000)">SPHERE</button>
             <button id="helix" @click="transform(targets.helix, 2000)">HELIX</button>
+
+            <button  @click="autoRotate">旋转</button>
         </div>
         <!-- end -->
     </div>
+
+    <StarsBackground></StarsBackground>
     <PlayMusic class="absolute bottom-10 right-10"></PlayMusic>
+    <PrizeList class="absolute bottom-20 right-10"></PrizeList>
 </template>
 
 <style scoped lang="scss">
@@ -274,6 +300,4 @@ button:hover {
 button:active {
     background-color: rgba(127, 255, 255, 0.75);
 }
-
-
 </style>

src/vite-env.d.ts

@@ -5,3 +5,5 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
+
+declare module 'sparticles'