feat: new

2024-01-05 00:42:01 +08:00
parent df02b23b2d
commit f66a1d2ae9
45 changed files with 4175 additions and 379 deletions
--- a/package.json
+++ b/package.json
@@ -17,11 +17,16 @@
    "@popperjs/core": "^2.11.8",
    "@vueuse/core": "^10.6.1",
    "axios": "^1.6.1",
+    "localforage": "^1.10.0",
    "pinia": "^2.1.7",
    "pinia-plugin-persist": "^1.0.0",
    "svg-sprite-loader": "^6.0.11",
+    "three": "^0.160.0",
+    "three-css2drender": "^1.0.0",
    "vue": "^3.3.8",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "xlsx": "^0.18.5",
+    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@iconify-json/ep": "^1.1.12",
@@ -29,6 +34,7 @@
    "@tailwindcss/typography": "^0.5.10",
    "@testing-library/vue": "^8.0.0",
    "@types/node": "^20.9.0",
+    "@types/three": "^0.160.0",
    "@typescript-eslint/eslint-plugin": "^6.11.0",
    "@typescript-eslint/parser": "^6.11.0",
    "@vitejs/plugin-vue": "^4.4.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ dependencies:
  axios:
    specifier: ^1.6.1
    version: 1.6.1
+  localforage:
+    specifier: ^1.10.0
+    version: 1.10.0
  pinia:
    specifier: ^2.1.7
    version: 2.1.7(typescript@5.2.2)(vue@3.3.8)
@@ -26,12 +29,24 @@ dependencies:
  svg-sprite-loader:
    specifier: ^6.0.11
    version: 6.0.11
+  three:
+    specifier: ^0.160.0
+    version: 0.160.0
+  three-css2drender:
+    specifier: ^1.0.0
+    version: 1.0.0(three@0.160.0)
  vue:
    specifier: ^3.3.8
    version: 3.3.8(typescript@5.2.2)
  vue-router:
    specifier: ^4.2.5
    version: 4.2.5(vue@3.3.8)
+  xlsx:
+    specifier: ^0.18.5
+    version: 0.18.5
+  zod:
+    specifier: ^3.22.4
+    version: 3.22.4

 devDependencies:
  '@iconify-json/ep':
@@ -49,6 +64,9 @@ devDependencies:
  '@types/node':
    specifier: ^20.9.0
    version: 20.9.0
+  '@types/three':
+    specifier: ^0.160.0
+    version: 0.160.0
  '@typescript-eslint/eslint-plugin':
    specifier: ^6.11.0
    version: 6.11.0(@typescript-eslint/parser@6.11.0)(eslint@8.53.0)(typescript@5.2.2)
@@ -710,15 +728,32 @@ packages:
    resolution: {integrity: sha512-+d+WYC1BxJ6yVOgUgzK8gWvp5qF8ssV5r4nsDcZWKRWcDQLQ619tvWAxJQYGgBrO1MnLJC7a5GtiYsAoQ47dJg==}
    dev: true

+  /@types/stats.js@0.17.3:
+    resolution: {integrity: sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==}
+    dev: true
+
  /@types/svgo@2.6.4:
    resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}
    dependencies:
      '@types/node': 20.9.0
    dev: true

+  /@types/three@0.160.0:
+    resolution: {integrity: sha512-jWlbUBovicUKaOYxzgkLlhkiEQJkhCVvg4W2IYD2trqD2om3VK4DGLpHH5zQHNr7RweZK/5re/4IVhbhvxbV9w==}
+    dependencies:
+      '@types/stats.js': 0.17.3
+      '@types/webxr': 0.5.10
+      fflate: 0.6.10
+      meshoptimizer: 0.18.1
+    dev: true
+
  /@types/web-bluetooth@0.0.20:
    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}

+  /@types/webxr@0.5.10:
+    resolution: {integrity: sha512-n3u5sqXQJhf1CS68mw3Wf16FQ4cRPNBBwdYLFzq3UddiADOim1Pn3Y6PBdDilz1vOJF3ybLxJ8ZEDlLIzrOQZg==}
+    dev: true
+
  /@typescript-eslint/eslint-plugin@6.11.0(@typescript-eslint/parser@6.11.0)(eslint@8.53.0)(typescript@5.2.2):
    resolution: {integrity: sha512-uXnpZDc4VRjY4iuypDBKzW1rz9T5YBBK0snMn8MaTSNd2kMlj50LnLBABELjJiOL5YHk7ZD8hbSpI9ubzqYI0w==}
    engines: {node: ^16.0.0 || >=18.0.0}
@@ -1219,6 +1254,11 @@ packages:
    hasBin: true
    dev: true

+  /adler-32@1.3.1:
+    resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==}
+    engines: {node: '>=0.8'}
+    dev: false
+
  /agent-base@6.0.2:
    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
    engines: {node: '>= 6.0.0'}
@@ -1531,6 +1571,14 @@ packages:
    resolution: {integrity: sha512-kfte3Hym//51EdX4239i+Rmp20EsLIYGdPkERegTgU19hQWCRhsRFGKHTliUlsry53tv17K7n077Kqa0WJU4ng==}
    dev: true

+  /cfb@1.2.2:
+    resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==}
+    engines: {node: '>=0.8'}
+    dependencies:
+      adler-32: 1.3.1
+      crc-32: 1.2.2
+    dev: false
+
  /chai@4.3.10:
    resolution: {integrity: sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==}
    engines: {node: '>=4'}
@@ -1619,6 +1667,11 @@ packages:
    resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
    engines: {node: '>=0.8'}

+  /codepage@1.15.0:
+    resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
+    engines: {node: '>=0.8'}
+    dev: false
+
  /collection-visit@1.0.0:
    resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==}
    engines: {node: '>=0.10.0'}
@@ -1702,6 +1755,12 @@ packages:
      vary: 1.1.2
    dev: true

+  /crc-32@1.2.2:
+    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+    dev: false
+
  /cross-spawn@7.0.3:
    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
    engines: {node: '>= 8'}
@@ -2388,6 +2447,10 @@ packages:
      reusify: 1.0.4
    dev: true

+  /fflate@0.6.10:
+    resolution: {integrity: sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==}
+    dev: true
+
  /fflate@0.8.1:
    resolution: {integrity: sha512-/exOvEuc+/iaUm105QIiOt4LpBdMTWsXxqR0HDF35vx3fmaKzw7354gTilCh5rkzEt8WYyG//ku3h3nRmd7CHQ==}
    dev: true
@@ -2472,6 +2535,11 @@ packages:
      combined-stream: 1.0.8
      mime-types: 2.1.35

+  /frac@1.1.2:
+    resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==}
+    engines: {node: '>=0.8'}
+    dev: false
+
  /fraction.js@4.3.7:
    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
    dev: true
@@ -2797,6 +2865,10 @@ packages:
    engines: {node: '>=0.10.0'}
    hasBin: true

+  /immediate@3.0.6:
+    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
+    dev: false
+
  /immutable@4.3.4:
    resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
    dev: true
@@ -3263,6 +3335,12 @@ packages:
      type-check: 0.4.0
    dev: true

+  /lie@3.1.1:
+    resolution: {integrity: sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==}
+    dependencies:
+      immediate: 3.0.6
+    dev: false
+
  /lilconfig@2.1.0:
    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
    engines: {node: '>=10'}
@@ -3298,6 +3376,12 @@ packages:
      pkg-types: 1.0.3
    dev: true

+  /localforage@1.10.0:
+    resolution: {integrity: sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==}
+    dependencies:
+      lie: 3.1.1
+    dev: false
+
  /locate-path@6.0.0:
    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
    engines: {node: '>=10'}
@@ -3381,6 +3465,10 @@ packages:
    engines: {node: '>= 8'}
    dev: true

+  /meshoptimizer@0.18.1:
+    resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
+    dev: true
+
  /micromatch@3.1.0:
    resolution: {integrity: sha512-3StSelAE+hnRvMs8IdVW7Uhk8CVed5tp+kLLGlBP6WiRAXS21GPGu/Nat4WNPXj2Eoc24B02SaeoyozPMfj0/g==}
    engines: {node: '>=0.10.0'}
@@ -4405,6 +4493,13 @@ packages:
    dependencies:
      extend-shallow: 3.0.2

+  /ssf@0.11.2:
+    resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==}
+    engines: {node: '>=0.8'}
+    dependencies:
+      frac: 1.1.2
+    dev: false
+
  /stable@0.1.8:
    resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
    deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
@@ -4701,6 +4796,18 @@ packages:
      any-promise: 1.3.0
    dev: true

+  /three-css2drender@1.0.0(three@0.160.0):
+    resolution: {integrity: sha512-redDCSBDvgxiJIm6EDT8WO5WJTVg5gUEy/vjtAgJa/zX4peEUnZ8K+mXo6v94EudbnuI5h48/hQo9NExf04ENg==}
+    peerDependencies:
+      three: '>= 0.91'
+    dependencies:
+      three: 0.160.0
+    dev: false
+
+  /three@0.160.0:
+    resolution: {integrity: sha512-DLU8lc0zNIPkM7rH5/e1Ks1Z8tWCGRq6g8mPowdDJpw1CFBJMU7UoJjC6PefXW7z//SSl0b2+GCw14LB+uDhng==}
+    dev: false
+
  /tinybench@2.5.1:
    resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==}
    dev: true
@@ -5434,6 +5541,16 @@ packages:
      stackback: 0.0.2
    dev: true

+  /wmf@1.0.2:
+    resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==}
+    engines: {node: '>=0.8'}
+    dev: false
+
+  /word@0.3.0:
+    resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==}
+    engines: {node: '>=0.8'}
+    dev: false
+
  /wrap-ansi@7.0.0:
    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
    engines: {node: '>=10'}
@@ -5469,6 +5586,20 @@ packages:
        optional: true
    dev: true

+  /xlsx@0.18.5:
+    resolution: {integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+    dependencies:
+      adler-32: 1.3.1
+      cfb: 1.2.2
+      codepage: 1.15.0
+      crc-32: 1.2.2
+      ssf: 0.11.2
+      wmf: 1.0.2
+      word: 0.3.0
+    dev: false
+
  /xml-name-validator@4.0.0:
    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
    engines: {node: '>=12'}
@@ -5519,3 +5650,7 @@ packages:
    resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
    engines: {node: '>=12.20'}
    dev: true
+
+  /zod@3.22.4:
+    resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
+    dev: false
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,5 +5,4 @@
 </template>

 <style scoped lang="scss">
-@import "@/style/global.module.scss";
 </style>
--- a/src/assets/model.obj
+++ b/src/assets/model.obj
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,6 +7,7 @@ export {}

 declare module 'vue' {
  export interface GlobalComponents {
+    DaiysuiTable: typeof import('./components/DaiysuiTable/index.vue')['default']
    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
--- a/src/components/DaiysuiTable/index.vue
+++ b/src/components/DaiysuiTable/index.vue
@@ -0,0 +1,64 @@
+import { mapActions } from 'pinia';
+<script setup lang='ts'>
+import { computed } from 'vue';
+const props= defineProps({
+    data: {
+        type: Array,
+        default: [] as any[]
+    },
+    tableColumns: {
+        type: Array,
+        default: [] as any[]
+    },
+})
+
+const dataColumns=computed(()=>{
+    // 不带有actions的列
+    const columns= props.tableColumns.filter(item=>!item.actions)
+
+    return columns
+})
+
+const actionsColumns=computed(()=>{
+    // 带有actions的列
+    const columns= props.tableColumns.filter(item=>item.actions)
+
+    return columns
+})
+
+</script>
+
+<template>
+    <div class="overflow-x-auto">
+        <table class="table">
+            <!-- head -->
+            <thead>
+                <tr>
+                    <th></th>
+                    <th v-for="(item, index) in dataColumns" :key="index">{{ item.label }}</th>
+                    <th v-for="(item, index) in actionsColumns" :key="index">操作</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+      <!-- row  -->
+      <tr class="hover" v-for="item in data" :key="item.id">
+        <th>{{ item.id }}</th>
+        <td v-for="(column,index) in dataColumns" :key="index">
+            <span v-if="column.formatValue">{{ column.formatValue(item) }}</span>
+            <span v-else>{{ item[column.props] }}</span>
+        </td>
+        <!-- action -->
+        <td v-for="(column,index) in actionsColumns" :key="index" class="flex gap-2">
+            <button class="btn btn-xs"  v-for="action in column.actions" :key="action.name" :class="action.type" @click="action.onClick(item)">{{ action.label}}</button>
+        </td>
+      </tr>
+    </tbody>
+            <!-- foot -->
+           
+
+        </table>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>
--- a/src/icons/down.svg
+++ b/src/icons/down.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1704385528419" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4272" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 128c212 0 384 172 384 384s-172 384-384 384-384-172-384-384 172-384 384-384m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m226.4 322.4L512 613.6 285.6 386.4 240 432l226.4 226.4L512 704l45.6-45.6L784 432l-45.6-45.6z" p-id="4273"></path></svg>
--- a/src/icons/up.svg
+++ b/src/icons/up.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1704385525165" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4133" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 128c212 0 384 172 384 384s-172 384-384 384-384-172-384-384 172-384 384-384m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m272 530.4L557.6 368 512 322.4 466.4 368 240 594.4l45.6 45.6L512 413.6 738.4 640l45.6-45.6z" p-id="4134"></path></svg>
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import Header from './Header/index.vue';
-import Footer from './Footer/index.vue';
+// import Header from './Header/index.vue';
+// import Footer from './Footer/index.vue';
 </script>

 <template>
  <div class="w-screen">
-    <header class="shadow-2xl head-container h-14">
+    <!-- <header class="shadow-2xl head-container h-14">
      <Header></Header>
-    </header>
-    <main class="main-container w-screen box-content min-h-[calc(100vh-10rem)]">
+    </header> -->
+    <main class="box-content w-screen h-screen main-container">
      <router-view class="main-container-content"></router-view>
    </main>
-    <footer class="w-screen footer-container">
+    <!-- <footer class="w-screen footer-container">
      <Footer></Footer>
-    </footer>
+    </footer> -->
  </div>
 </template>
 <style scoped lang="scss">
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import './style.css';
-
+import './style/style.scss'
+import * as THREE from 'three';
 import App from './App.vue';

 const app = createApp(App);
@@ -15,5 +16,7 @@ import { createPinia } from 'pinia';
 import piniaPluginPersist from 'pinia-plugin-persist';
 const pinia = createPinia();
 pinia.use(piniaPluginPersist);
+
+app.config.globalProperties.$THREE = THREE; //挂载到原型
 app.component('svg-icon', svgIcon);
 app.use(router).use(pinia).mount('#app');
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,97 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import Layout from '@/layout/index.vue';
 import Home from '@/views/Home/index.vue';
+export const configRoutes={
+    path: '/config',
+    name: 'Config',
+    component: () => import('@/views/Config/index.vue'),
+    children: [
+        {
+        path: '',
+        redirect: '/config/person',
+      },
+      {
+        path: '/config/person',
+        name: 'PersonConfig',
+        component: () => import('@/views/Config/Person/PersonConfig.vue'),
+        meta: {
+          title: '人员配置',
+          icon: 'person',
+        },
+        children:[
+            {
+                path:'',
+                redirect: '/config/person/all',
+            },
+            {
+                path:'/config/person/all',
+                name:'AllPersonConfig',
+                component:()=>import('@/views/Config/Person/PersonAll.vue'),
+                meta:{
+                    title:'所有人员',
+                    icon:'all'
+                }
+            },
+            {
+                path:'/config/person/already',
+                name:'AlreadyPerson',
+                component:()=>import('@/views/Config/Person/PersonAlready.vue'),
+                meta:{
+                    title:'已领取人员',
+                    icon:'already'
+                }
+            },
+            // {
+            //     path:'other',
+            //     name:'OtherPersonConfig',
+            //     component:()=>import('@/views/Config/Person/OtherPersonConfig.vue'),
+            //     meta:{
+            //         title:'其他配置',
+            //         icon:'other'
+            //     }
+            // }
+        ]
+      },
+      {
+        path: '/config/prize',
+        name: 'PrizeConfig',
+        component: () => import('@/views/Config/Prize/PrizeConfig.vue'),
+        meta:{
+            title: '奖品配置',
+            icon: 'prize'
+        }
+      },
+      {
+        path:'/config/global',
+        name:'GlobalConfig',
+        redirect: '/config/global/all',
+        meta:{
+            title:'全局配置',
+            icon:'global'
+        },
+        children:[
+            {
+                path:'/config/global/face',
+                name:'FaceConfig',
+                component:()=>import('@/views/Config/Global/FaceConfig.vue'),
+                meta:{
+                    title:'界面配置',
+                    icon:'face'
+                }
+            },
+            {
+                path:'/config/global/image',
+                name:'ImageConfig',
+                component:()=>import('@/views/Config/Global/ImageConfig.vue'),
+                meta:{
+                    title:'图片配置',
+                    icon:'image'
+                }
+            }
+        ]
+      }
+    ]
+  }
 const routes = [
  {
    path: '/',
@@ -12,11 +103,7 @@ const routes = [
        name: 'Home',
        component: Home,
      },
-      {
-        path: '/guide',
-        name: 'Guide',
-        component: () => import('@/views/Guide/index.vue'),
-      },
+      configRoutes,
      {
        path: '/doc',
        name: 'Doc',
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,7 +1,10 @@
 import { useUserStore } from './user';
-
+import {usePersonConfig} from './personConfig';
+import { usePrizeConfig } from './prizeConfig';
 export default function useStore() {
  return {
    user: useUserStore(),
+    personConfig:usePersonConfig(),
+    prizeConfig:usePrizeConfig()
  };
 }
--- a/src/store/personConfig.ts
+++ b/src/store/personConfig.ts
@@ -0,0 +1,102 @@
+import { defineStore } from 'pinia';
+import { IPersonConfig } from '@/types/personConfig';
+export const usePersonConfig = defineStore('person', {
+  state() {
+    return {
+      personConfig:{
+        alreadyPersonList:[] as IPersonConfig[],
+        notPersonList:[] as IPersonConfig[],
+        tableRowCount:12,
+        showField:[] as any[]
+      }
+    };  
+  },
+  getters: {
+    // 获取全部配置
+    getPersonConfig(state) {
+      return state.personConfig;
+    },
+    // 获取已中奖人员名单
+    getAlreadyPersonList(state) {
+      return state.personConfig.alreadyPersonList;
+    },
+    // 获取未中奖人员名单
+    getNotPersonList(state) {
+      return state.personConfig.notPersonList;
+    },
+    // 获取table列数
+    getTableRowCount(state) {
+      return state.personConfig.tableRowCount;
+    },
+    // 获取要展示那些字段
+    getShowField(state) {
+      return state.personConfig.showField;
+    }
+  },
+  actions: {
+    // 添加未中奖人员
+    addNotPersonList(personList: IPersonConfig[]) {
+        if(personList.length<=0){
+            return
+        }
+        personList.forEach((item: IPersonConfig) => {
+          this.personConfig.notPersonList.push(item);
+        });
+    },
+    // 添加已中奖人员
+    addAlreadyPersonList(personList: IPersonConfig[]) {
+        if(personList.length<=0){
+            return
+        }
+        personList.forEach((item: IPersonConfig) => {
+          this.personConfig.alreadyPersonList.push(item);
+          this.personConfig.notPersonList = this.personConfig.notPersonList.filter((item: IPersonConfig) => item.id!== item.id);
+        });
+    },
+    // 删除所有人员
+    deleteAllPerson() {
+        this.personConfig.alreadyPersonList = [];
+        this.personConfig.notPersonList = [];
+    },
+    // 设置table列数
+    setTableRowCount(tableRowCount: number) {
+        this.personConfig.tableRowCount = tableRowCount;
+    },
+    // 设置要展示那些字段
+    setShowFields(showField: any[]) {
+        this.personConfig.showField = showField;
+    },
+    // 重置所有人员
+    resetPerson() {
+        this.personConfig.alreadyPersonList = [];
+        this.personConfig.notPersonList = [];
+    },
+    // 重置已中奖人员
+    resetAlreadyPerson() {
+        // 把已中奖人员合并到未中奖人员，要验证是否已存在
+        if(this.personConfig.alreadyPersonList.length>0){
+            this.personConfig.notPersonList = this.personConfig.notPersonList.concat(this.personConfig.alreadyPersonList);
+            this.personConfig.alreadyPersonList = [];
+        }
+    },
+    // 重置所有配置
+    reset() {
+        this.personConfig = {
+          alreadyPersonList:[] as IPersonConfig[],
+          notPersonList:[] as IPersonConfig[],
+          tableRowCount:12,
+          showField:[] as string[]
+        }
+    },
+  },
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        // 如果要存储在localStorage中
+        storage: localStorage,
+        key: 'personConfig',
+      },
+    ],
+  },
+});
--- a/src/store/prizeConfig.ts
+++ b/src/store/prizeConfig.ts
@@ -0,0 +1,59 @@
+import { defineStore } from 'pinia';
+import { IPrizeConfig } from '@/types/prizeConfig';
+export const usePrizeConfig = defineStore('prize', {
+  state() {
+    return {
+      prizeConfig:{
+        prizeList:[] as IPrizeConfig[],
+      }
+    };  
+  },
+  getters: {
+    // 获取全部配置
+    getPrizeConfig(state) {
+      return state.prizeConfig.prizeList;
+    },
+    // 根据id获取配置
+    getPrizeConfigById(state) {
+      return (id: number|string) => {
+        return state.prizeConfig.prizeList.find(item => item.id === id);
+      }
+    },
+   
+  },
+  actions: {
+    // 设置奖项
+    setPrizeConfig(prizeList:IPrizeConfig[]) {
+      this.prizeConfig.prizeList = prizeList;
+    },
+    // 添加奖项
+    addPrizeConfig(prizeConfigItem: IPrizeConfig) {
+        this.prizeConfig.prizeList.push(prizeConfigItem);
+    },
+    // 删除奖项
+    deletePrizeConfig(prizeConfigItemId: number|string) {
+        this.prizeConfig.prizeList = this.prizeConfig.prizeList.filter(item => item.id!== prizeConfigItemId);
+    },
+    // 更新奖项数据
+    updatePrizeConfig(prizeConfigItem: IPrizeConfig) {
+        const index = this.prizeConfig.prizeList.findIndex(item => item.id === prizeConfigItem.id);
+        this.prizeConfig.prizeList[index] = prizeConfigItem;
+    },
+    // 重置所有配置
+    reset() {
+        this.prizeConfig = {
+            prizeList:[] as IPrizeConfig[],
+        }
+    },
+  },
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        // 如果要存储在localStorage中
+        storage: localStorage,
+        key: 'personConfig',
+      },
+    ],
+  },
+});
--- a/src/style/_blue_theme.scss
+++ b/src/style/_blue_theme.scss
@@ -1,22 +0,0 @@
-$theme-color: #2e1f78;
-$important-color: #02e5f6;
-$font-color: #fbfbfb;
-$light-color: #fd5913;
-$normal-color: #15115d;
-$dark-card-color: #fbfbfb;
-
-$blue_theme: (
-    theme-bg-color: $theme-color,
-    font-color: $font-color,
-    font-color-second: darken($font-color, 20%),
-    light-bg-color: $light-color,
-    normal-color: $normal-color,
-    header-bg-color: lighten($theme-color, 10%),
-    header-bg-color-hover: lighten($theme-color, 20%),
-    shawdow-color: darken($theme-color, 5%),
-    shawdow-color-hover: darken($theme-color, 15%),
-    border-color: lighten($theme-color, 20%),
-    important-color: lighten($important-color, 20%),
-    important-bg-color: transparentize($important-color, 0.9),
-    dark-card-color: $dark-card-color,
-);
--- a/src/style/_dark_theme.scss
+++ b/src/style/_dark_theme.scss
@@ -1,22 +0,0 @@
-$theme-color: #1e1f25;
-$important-color: #ff864d;
-$font-color: #fbfbfb;
-$light-color: #00e6f6;
-$normal-color: #183561;
-$dark-card-color: #fbfbfb;
-
-$dark_theme: (
-    theme-bg-color: $theme-color,
-    font-color: $font-color,
-    font-color-second: darken($font-color, 20%),
-    light-bg-color: $light-color,
-    normal-color: $normal-color,
-    header-bg-color: lighten($theme-color, 10%),
-    header-bg-color-hover: lighten($theme-color, 20%),
-    shawdow-color: darken($theme-color, 5%),
-    shawdow-color-hover: darken($theme-color, 15%),
-    border-color: lighten($theme-color, 20%),
-    important-color: lighten($important-color, 20%),
-    important-bg-color: transparentize($important-color, 0.9),
-    dark-card-color: $dark-card-color,
-);
--- a/src/style/_default.scss
+++ b/src/style/_default.scss
@@ -1,22 +0,0 @@
-$theme-color: #fbfbfb;
-$important-color: #6a47bb;
-$font-color: #030303;
-$light-color: #409eff;
-$normal-color: #fbfbfb;
-$dark-card-color: #fbfbfb;
-
-$default: (
-    theme-bg-color: $theme-color,
-    font-color: $font-color,
-    font-color-second: darken($font-color, 20%),
-    light-bg-color: $light-color,
-    normal-color: $normal-color,
-    header-bg-color: lighten($theme-color, 10%),
-    header-bg-color-hover: lighten($theme-color, 20%),
-    shawdow-color: darken($theme-color, 5%),
-    shawdow-color-hover: darken($theme-color, 15%),
-    border-color: lighten($theme-color, 20%),
-    important-color: lighten($important-color, 20%),
-    important-bg-color: transparentize($important-color, 0.9),
-    dark-card-color: $dark-card-color,
-);
--- a/src/style/_purple_theme.scss
+++ b/src/style/_purple_theme.scss
@@ -1,22 +0,0 @@
-$theme-color: #0a142e;
-$important-color: #8c5ff6;
-$font-color: #fbfbfb;
-$light-color: #c678fd;
-$normal-color: #0a142e;
-$dark-card-color: #fbfbfb;
-
-$purple_theme: (
-    theme-bg-color: $theme-color,
-    font-color: $font-color,
-    font-color-second: darken($font-color, 20%),
-    light-bg-color: $light-color,
-    normal-color: $normal-color,
-    header-bg-color: lighten($theme-color, 10%),
-    header-bg-color-hover: lighten($theme-color, 20%),
-    shawdow-color: darken($theme-color, 5%),
-    shawdow-color-hover: darken($theme-color, 15%),
-    border-color: lighten($theme-color, 20%),
-    important-color: lighten($important-color, 20%),
-    important-bg-color: transparentize($important-color, 0.9),
-    dark-card-color: $dark-card-color,
-);
--- a/src/style/changeTheme.ts
+++ b/src/style/changeTheme.ts
@@ -1 +0,0 @@
-import './global.scss';
--- a/src/style/global.module.scss
+++ b/src/style/global.module.scss
@@ -1,14 +0,0 @@
-:root {
-    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-text-size-adjust: 100%;
-}
-body {
-    // background: $theme-bg-color;
-}
--- a/src/style/global.scss
+++ b/src/style/global.scss
@@ -1,5 +1,4 @@
 // global.scss
-@import "./theme/index.scss";
 // variables.scss
 $primary-color: #fe4e5e;
 $background-color: #fefefe;
@@ -9,3 +8,5 @@ $padding: 124px;
 //     backgroundColor: $background-color;
 //     padding: $padding;
 // }
+
+/*end*/
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -1,50 +0,0 @@
-@import "./default.scss"; //默认主题颜色
-@import "./dark_theme.scss"; // 红色主题颜色
-@import "./blue_theme.scss"; // 灰色主题颜色
-@import "./purple_theme.scss"; // 灰色主题颜色
-//生成对应元素的主题样式代码
-//主题参数
-$themes: (
-    default: $default,
-    blue_theme: $blue_theme,
-    dark_theme: $dark_theme,
-    purple_theme: $purple_theme,
-);
-// 生成body的主题样式
-@mixin themeify {
-    @each $themes-key, $themes-map in $themes {
-        $themes-map: $themes-map !global;
-        &[data-theme="#{$themes-key}"] {
-            @content;
-        }
-    }
-}
-// 生成子元素样式
-@mixin themeChildify {
-    @each $themes-key, $themes-map in $themes {
-        $themes-map: $themes-map !global;
-        [data-theme="#{$themes-key}"] & {
-            @content;
-        }
-    }
-}
-// 获取主题对应的theme-color
-@function getThemeColor($key) {
-    $currentTheme: map-get($themes, $key);
-    @return map-get($currentTheme, "theme-bg-color");
-}
-@function themed($key) {
-    @if map-get($themes-map, $key) {
-        @return map-get($themes-map, $key);
-    } @else {
-        @return $key;
-    }
-}
-// 随机数颜色
-@function themedRandom($key) {
-    @if map-get($themes-map, $key) {
-        @return map-get($themes-map, $key);
-    } @else {
-        @return $key;
-    }
-} ;
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -0,0 +1,41 @@
+.element-card {
+    width: 140px;
+    height: 200px;
+    cursor: default;
+    text-align: center;
+    border: 1px solid rgba(127, 255, 255, 0.25);
+    box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
+
+    &:hover {
+        border: 1px solid rgba(127, 255, 255, 0.75);
+        box-shadow: 0 0 12px rgba(0, 255, 255, 0.75);
+    }
+
+    .card-id {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        font-size: 12px;
+        color: rgba(127, 255, 255, 0.75);
+    }
+
+    .card-name {
+        position: absolute;
+        top: 40px;
+        left: 0px;
+        right: 0;
+        font-size: 30px;
+        font-weight: bold;
+        color: rgba(255, 255, 255, 0.75);
+        text-shadow: 0 0 10px rgba(0, 255, 255, 0.95);
+    }
+
+    .card-detail {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 15px;
+        font-size: 12px;
+        color: rgba(127, 255, 255, 0.75);
+    }
+}
--- a/src/style/theme/_blue_theme.scss
+++ b/src/style/theme/_blue_theme.scss
@@ -1,22 +0,0 @@
-$theme-color: #2e1f78;
-$important-color: #02e5f6;
-$font-color: #fbfbfb;
-$light-color: #fd5913;
-$normal-color: #15115d;
-$dark-card-color: #fbfbfb;
-
-$blue_theme: (
-    theme-bg-color: $theme-color,
-    font-color: $font-color,
-    font-color-second: darken($font-color, 20%),
-    light-bg-color: $light-color,
-    normal-color: $normal-color,
-    header-bg-color: lighten($theme-color, 10%),
-    header-bg-color-hover: lighten($theme-color, 20%),
-    shawdow-color: darken($theme-color, 5%),
-    shawdow-color-hover: darken($theme-color, 15%),
-    border-color: lighten($theme-color, 20%),
-    important-color: lighten($important-color, 20%),
-    important-bg-color: transparentize($important-color, 0.9),
-    dark-card-color: $dark-card-color,
-);
--- a/src/style/theme/_dark_theme.scss
+++ b/src/style/theme/_dark_theme.scss
@@ -1,22 +0,0 @@
-$theme-color: #1e1f25;
-$important-color: #ff864d;
-$font-color: #fbfbfb;
-$light-color: #00e6f6;
-$normal-color: #183561;
-$dark-card-color: #fbfbfb;
-
-$dark_theme: (
-    theme-bg-color: $theme-color,
-    font-color: $font-color,
-    font-color-second: darken($font-color, 20%),
-    light-bg-color: $light-color,
-    normal-color: $normal-color,
-    header-bg-color: lighten($theme-color, 10%),
-    header-bg-color-hover: lighten($theme-color, 20%),
-    shawdow-color: darken($theme-color, 5%),
-    shawdow-color-hover: darken($theme-color, 15%),
-    border-color: lighten($theme-color, 20%),
-    important-color: lighten($important-color, 20%),
-    important-bg-color: transparentize($important-color, 0.9),
-    dark-card-color: $dark-card-color,
-);
--- a/src/style/theme/_default.scss
+++ b/src/style/theme/_default.scss
@@ -1,22 +0,0 @@
-$theme-color: #fbfbfb;
-$important-color: #6a47bb;
-$font-color: #030303;
-$light-color: #409eff;
-$normal-color: #fbfbfb;
-$dark-card-color: #fbfbfb;
-
-$default: (
-    theme-bg-color: $theme-color,
-    font-color: $font-color,
-    font-color-second: darken($font-color, 20%),
-    light-bg-color: $light-color,
-    normal-color: $normal-color,
-    header-bg-color: lighten($theme-color, 10%),
-    header-bg-color-hover: lighten($theme-color, 20%),
-    shawdow-color: darken($theme-color, 5%),
-    shawdow-color-hover: darken($theme-color, 15%),
-    border-color: lighten($theme-color, 20%),
-    important-color: lighten($important-color, 20%),
-    important-bg-color: transparentize($important-color, 0.9),
-    dark-card-color: $dark-card-color,
-);
--- a/src/style/theme/_purple_theme.scss
+++ b/src/style/theme/_purple_theme.scss
@@ -1,22 +0,0 @@
-$theme-color: #0a142e;
-$important-color: #8c5ff6;
-$font-color: #fbfbfb;
-$light-color: #c678fd;
-$normal-color: #0a142e;
-$dark-card-color: #fbfbfb;
-
-$purple_theme: (
-    theme-bg-color: $theme-color,
-    font-color: $font-color,
-    font-color-second: darken($font-color, 20%),
-    light-bg-color: $light-color,
-    normal-color: $normal-color,
-    header-bg-color: lighten($theme-color, 10%),
-    header-bg-color-hover: lighten($theme-color, 20%),
-    shawdow-color: darken($theme-color, 5%),
-    shawdow-color-hover: darken($theme-color, 15%),
-    border-color: lighten($theme-color, 20%),
-    important-color: lighten($important-color, 20%),
-    important-bg-color: transparentize($important-color, 0.9),
-    dark-card-color: $dark-card-color,
-);
--- a/src/style/theme/index.scss
+++ b/src/style/theme/index.scss
@@ -1,50 +0,0 @@
-@import "./default.scss"; //默认主题颜色
-@import "./dark_theme.scss"; // 红色主题颜色
-@import "./blue_theme.scss"; // 灰色主题颜色
-@import "./purple_theme.scss"; // 灰色主题颜色
-//生成对应元素的主题样式代码
-//主题参数
-$themes: (
-    default: $default,
-    blue_theme: $blue_theme,
-    dark_theme: $dark_theme,
-    purple_theme: $purple_theme,
-);
-// 生成body的主题样式
-@mixin themeify {
-    @each $themes-key, $themes-map in $themes {
-        $themes-map: $themes-map !global;
-        &[data-theme="#{$themes-key}"] {
-            @content;
-        }
-    }
-}
-// 生成子元素样式
-@mixin themeChildify {
-    @each $themes-key, $themes-map in $themes {
-        $themes-map: $themes-map !global;
-        [data-theme="#{$themes-key}"] & {
-            @content;
-        }
-    }
-}
-// 获取主题对应的theme-color
-@function getThemeColor($key) {
-    $currentTheme: map-get($themes, $key);
-    @return map-get($currentTheme, "theme-bg-color");
-}
-@function themed($key) {
-    @if map-get($themes-map, $key) {
-        @return map-get($themes-map, $key);
-    } @else {
-        @return $key;
-    }
-}
-// 随机数颜色
-@function themedRandom($key) {
-    @if map-get($themes-map, $key) {
-        @return map-get($themes-map, $key);
-    } @else {
-        @return $key;
-    }
-} ;
--- a/src/types/personConfig.ts
+++ b/src/types/personConfig.ts
@@ -0,0 +1,10 @@
+export interface IPersonConfig {
+    id: number;
+    uid: string;
+    name: string;
+    department:string;
+    other:string;
+    isWin:boolean;
+    x:number;
+    y:number
+}
--- a/src/types/prizeConfig.ts
+++ b/src/types/prizeConfig.ts
@@ -0,0 +1,10 @@
+export interface IPrizeConfig {
+    id: number|string;
+    name:string;
+    sort:number;
+    isAll:boolean;
+    count:number;
+    picture:string[];
+    desc:string;
+    isShow:boolean;
+}
--- a/src/utils/file.ts
+++ b/src/utils/file.ts
@@ -0,0 +1,19 @@
+export const readFile = (file: any) => {
+    return new Promise(resolve => {
+        const reader = new FileReader()
+        reader.readAsBinaryString(file)
+        reader.onload = (ev: any) => {
+            resolve(ev.target.result)
+        }
+    })
+}
+
+export const readImage = (file: any) => {
+    return new Promise(resolve => {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = (ev: any) => {
+            resolve({dataUrl:ev.target.result,fileName:file.name})
+        }
+    })
+}
--- a/src/utils/indexDB.ts
+++ b/src/utils/indexDB.ts
--- a/src/utils/store.ts
+++ b/src/utils/store.ts
@@ -0,0 +1,10 @@
+// 提取有哪些字段
+export const extractFields = (data: any) => {
+  const item=data[0];
+    // 排除id x y，其他都加入数组
+    const keys = Object.keys(item).filter(key => key!== 'id' && key!== 'x' && key!== 'y');
+    if(keys.length>0){
+        // 返回数组key value
+        return keys.map(key => ({label:key,value:true}));
+    }
+};
--- a/src/views/Config/Global/FaceConfig.vue
+++ b/src/views/Config/Global/FaceConfig.vue
@@ -0,0 +1,90 @@
+<script setup lang='ts'>
+import { ref, watch } from 'vue'
+import useStore from '@/store'
+import zod from 'zod';
+
+const personConfig = useStore().personConfig
+const { getTableRowCount: tableRowCount, getShowField} = personConfig
+
+const formData = ref({
+    rowCount: tableRowCount,
+    showField: getShowField
+})
+const formErr = ref({
+    rowCount: '',
+})
+
+const schema = zod.object({
+    rowCount: zod.number({
+        required_error: '必填项',
+        invalid_type_error: '必须填入数字',
+    })
+        .min(1, '最小为1')
+        .max(100, '最大为100')
+    // 格式化
+
+
+})
+type ValidatePayload = zod.infer<typeof schema>
+const payload: ValidatePayload = {
+    rowCount: formData.value.rowCount,
+}
+const parseSchema = (props: ValidatePayload) => {
+    return schema.parseAsync(props)
+}
+
+
+const handleChangeShowFields = (fieldItem: any) => {
+    formData.value.showField.map((item)=>{
+        if(item.label===fieldItem.label){
+            item.value=!item.value
+        }
+    })
+}
+
+watch(() => formData.value.rowCount, () => {
+    payload.rowCount = formData.value.rowCount
+    parseSchema(payload).then(res => {
+        console.log('code line-40 \n\r😀 res:\n\r', res);
+        if(res.rowCount){
+            personConfig.setTableRowCount(res.rowCount)
+        }
+    })
+        .catch(err => {
+            formErr.value.rowCount = err.issues[0].message
+        })
+})
+watch(() => formData.value.showField, () => {
+    personConfig.setShowFields(formData.value.showField)
+},{deep:true})
+</script>
+
+<template>
+    <div>
+        <label class="w-full max-w-xs mb-10 form-control">
+            <div class="label">
+                <span class="label-text">列数</span>
+            </div>
+            <input type="number" v-model="formData.rowCount" placeholder="Type here"
+                class="w-full max-w-xs input input-bordered" />
+            <div class="help">
+                <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
+                    {{ formErr.rowCount }}
+                </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>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>
--- a/src/views/Config/Global/ImageConfig.vue
+++ b/src/views/Config/Global/ImageConfig.vue
@@ -0,0 +1,91 @@
+<script setup lang='ts'>
+import { ref, onMounted, watch } from 'vue'
+import { readImage } from '@/utils/file'
+import localforage from 'localforage'
+
+const limitType = ref('image/*')
+const imgList = ref<any>([])
+const imgUploadToast = ref(0) //0是不显示，1是成功，2是失败,3是不是图片
+const imageDbStore = localforage.createInstance({
+    name: 'imgStore'
+})
+const handleFileChange = async (e: any) => {
+    const isImage= /image*/.test(e.target.files[0].type)
+    if (!isImage) {
+        imgUploadToast.value = 3
+
+        return
+    }
+    let { dataUrl, fileName } = await readImage(e.target.files[0])
+    imageDbStore.setItem(new Date().getTime().toString() + '+' + fileName, dataUrl)
+        .then(() => {
+            imgUploadToast.value = 1
+        })
+        .catch(() => {
+            imgUploadToast.value = 2
+        })
+}
+
+const getImageDbStore =async () => {
+    const keys =await imageDbStore.keys()
+    if(keys.length>0){
+        imageDbStore.iterate((value, key) => {
+            imgList.value.push({
+                key,
+                value
+            })
+        })
+    }
+}
+
+onMounted(() => {
+    getImageDbStore()
+})
+watch(() => imgUploadToast.value, (val) => {
+    if (val !== 0) {
+        setTimeout(() => {
+            imgUploadToast.value = 0
+        }, 2000)
+    }
+})
+</script>
+
+<template>
+    <div class="toast toast-top toast-end">
+        <div class="alert alert-error" v-if="imgUploadToast == 2">
+            <span>上传失败</span>
+        </div>
+        <div class="alert alert-success" v-if="imgUploadToast == 1">
+            <span>上传成功</span>
+        </div>
+        <div class="alert alert-error" v-if="imgUploadToast == 3">
+            <span>不是图片</span>
+        </div>
+    </div>
+
+    <div>
+        <div class="">
+            <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>
+        </div>
+        <ul>
+            <li v-for="item in imgList" :key="item">
+                <div class="flex items-center gap-3">
+                    <div class="avatar">
+                        <div class="mask mask-squircle w-12 h-12">
+                            <img :src="item.value" alt="Avatar Tailwind CSS Component" />
+                        </div>
+                    </div>
+                    <div>
+                        <div class="font-bold">{{ item.key.split('+')[1] }}</div>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>
--- a/src/views/Config/Person/PersonAll.vue
+++ b/src/views/Config/Person/PersonAll.vue
@@ -0,0 +1,121 @@
+<!-- eslint-disable vue/no-parsing-error -->
+<script setup lang='ts'>
+import { ref } from 'vue';
+import useStore from '@/store'
+import * as XLSX from 'xlsx'
+import { readFile } from '@/utils/file'
+import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
+
+import {extractFields} from '@/utils/store'
+
+const personConfig = useStore().personConfig
+
+const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList ,getTableRowCount:rowCount} = personConfig
+const limitType = '.xlsx,.xls'
+const excelData = 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 keys=extractFields(personList.value)
+    personConfig.resetPerson()
+    personConfig.setShowFields(keys)
+    personConfig.addNotPersonList(personList.value)
+}
+
+const filterData = (tableData: any[]) => {
+    const dataLength = tableData.length
+    let j = 0;
+    for (let i = 0; i < dataLength; i++) {
+        if (i % rowCount === 0) {
+            j++;
+        }
+        tableData[i].x = i % rowCount + 1;
+        tableData[i].y = j;
+        tableData[i].id = i;
+        // 是否中奖
+        tableData[i].isWin = false
+    }
+    
+return personList.value = tableData
+}
+const deleteAll = () => {
+    personConfig.deleteAllPerson()
+    personList.value = notPersonList.concat(alreadyPersonList)
+}
+
+const tableColumns = [
+    {
+        label: '编号',
+        props: 'uid',
+    },
+    {
+        label: '姓名',
+        props: 'name',
+    },
+    {
+        label: '部门',
+        props: 'department',
+    },
+    {
+        label: '职位',
+        props: 'other',
+    },
+    {
+        label:'是否已中奖',
+        props: 'isWin',
+        formatValue(row: any) {
+            return row.isWin? '是' : '否'
+        }
+    },
+    {
+        label: '操作',
+        actions: [
+            {
+                label: '编辑',
+                type: 'btn-info',
+                onClick: (row: any) => {
+                    console.log('编辑:', row)
+                }
+            },
+            {
+                label: '删除',
+                type: 'btn-error',
+                onClick: (row: any) => {
+                    console.log('删除:', row)
+                }
+            },
+
+        ]
+    },
+]
+</script>
+
+<template>
+    <div class="overflow-y-auto">
+        <div class="flex justify-center gap-3">
+            <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button>
+            <div class="">
+                <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-sm">上传excel</button> -->
+
+            </div>
+        </div>
+        <DaiysuiTable :tableColumns="tableColumns" :data="personList"></DaiysuiTable>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>
--- a/src/views/Config/Person/PersonAlready.vue
+++ b/src/views/Config/Person/PersonAlready.vue
@@ -0,0 +1,70 @@
+<!-- eslint-disable vue/no-parsing-error -->
+<script setup lang='ts'>
+import { ref } from 'vue';
+import useStore from '@/store'
+import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
+
+const personConfig = useStore().personConfig
+
+const { getAlreadyPersonList: alreadyPersonList } = personConfig
+const personList = ref<any[]>(
+    alreadyPersonList
+)
+
+
+const deleteAll = () => {
+    personConfig.deleteAllPerson()
+    personList.value = alreadyPersonList
+}
+
+const tableColumns = [
+    {
+        label: '编号',
+        props: 'uid',
+    },
+    {
+        label: '姓名',
+        props: 'name',
+    },
+    {
+        label: '部门',
+        props: 'department',
+    },
+    {
+        label: '职位',
+        props: 'other',
+    },
+    {
+        label: '操作',
+        actions: [
+            {
+                label: '编辑',
+                type: 'btn-info',
+                onClick: (row: any) => {
+                    console.log('编辑:', row)
+                }
+            },
+            {
+                label: '删除',
+                type: 'btn-error',
+                onClick: (row: any) => {
+                    console.log('删除:', row)
+                }
+            },
+
+        ]
+    },
+]
+</script>
+
+<template>
+    <div class="overflow-y-auto">
+        <div class="flex justify-center gap-3">
+            <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button>
+           
+        </div>
+        <DaiysuiTable :tableColumns="tableColumns" :data="personList"></DaiysuiTable>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>
--- a/src/views/Config/Person/PersonConfig.vue
+++ b/src/views/Config/Person/PersonConfig.vue
@@ -0,0 +1,13 @@
+<script setup lang='ts'>
+
+
+</script>
+
+<template>
+    <router-view></router-view>
+
+</template>
+
+<style lang='scss' scoped>
+
+</style>
--- a/src/views/Config/Prize/PrizeConfig.vue
+++ b/src/views/Config/Prize/PrizeConfig.vue
@@ -0,0 +1,114 @@
+<script setup lang='ts'>
+import { ref, onMounted,watch } from 'vue'
+import useStore from '@/store'
+
+import localforage from 'localforage'
+import { IPrizeConfig } from '@/types/prizeConfig';
+
+const imageDbStore = localforage.createInstance({
+    name: 'imgStore'
+})
+const prizeConfig = useStore().prizeConfig
+const { getPrizeConfig } = prizeConfig
+const prizeList = ref(getPrizeConfig)
+const imgList = ref<any[]>([])
+const addPrize = () => {
+    const defaultPrizeCOnfig: IPrizeConfig = {
+        id: new Date().getTime().toString(),
+        name: '奖项',
+        sort: 0,
+        isAll: false,
+        count: 1,
+        picture: [''],
+        desc: '',
+        isShow: true
+    }
+    prizeConfig.addPrizeConfig(defaultPrizeCOnfig)
+}
+
+const getImageDbStore = async () => {
+    const keys = await imageDbStore.keys()
+    if (keys.length > 0) {
+        imageDbStore.iterate((value, key) => {
+            imgList.value.push({
+                key,
+                value
+            })
+        })
+    }
+}
+
+const sort = (item:any,isUp:number) => {
+    const itemIndex=prizeList.value.indexOf(item)
+    if(isUp==1){
+        prizeList.value.splice(itemIndex,1)
+        prizeList.value.splice(itemIndex-1,0,item)
+    }else{
+        prizeList.value.splice(itemIndex,1)
+        prizeList.value.splice(itemIndex+1,0,item)
+    }
+}
+onMounted(() => {
+    getImageDbStore()
+})
+watch(()=>prizeList,()=>{
+    console.log('prizeList',prizeList.value)
+    prizeConfig.setPrizeConfig(prizeList.value)
+},{deep:true})
+</script>
+
+<template>
+    <div>
+        <h2>奖项配置</h2>
+        <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">
+                    <!-- 向上向下 -->
+                    <div class="flex flex-col items-center gap-2 pt-5">
+                        <svg-icon class="hover:text-blue-400 cursor-pointer" :class="prizeList.indexOf(item)==0?'opacity-0 cursor-default':''" name="up" @click="sort(item,1)"></svg-icon>
+                        <svg-icon class="hover:text-blue-400 cursor-pointer" name="down" @click="sort(item,0)" :class="prizeList.indexOf(item)==prizeList.length-1?'opacity-0 cursor-default':''"></svg-icon>
+                    </div>
+                </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.name" placeholder="名称" class="w-full input-sm max-w-xs input input-bordered" />
+                </label>
+                <label class="w-full max-w-xs mb-10 form-control">
+                    <div class="label">
+                        <span class="label-text">是否全员参加</span>
+                    </div>
+                    <input type="checkbox" :checked="item.isAll" @change="item.isAll =!item.isAll"
+                        class="checkbox checkbox-secondary border-1 border-solid mt-2" />
+                </label>
+                <label class="w-full max-w-xs mb-10 form-control">
+                    <div class="label">
+                        <span class="label-text">获奖人数</span>
+                    </div>
+                    <input type="number" v-model="item.count" 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>
+                    <select class="select select-warning w-full select-sm max-w-xs" v-model="item.picture">
+                        <option disabled selected>选择一张图片</option>
+                        <option v-for="picItem in imgList" :key="picItem.key">{{ picItem.key.split('+')[1] }}</option>
+                    </select>
+                </label>
+                <label class="w-full max-w-xs mb-10 form-control">
+                    <div class="label">
+                        <span class="label-text">是否显示</span>
+                    </div>
+                    <input type="checkbox" :checked="item.isShow" @change="item.isShow =!item.isShow"
+                        class="checkbox checkbox-secondary border-1 border-solid mt-2" />
+                </label>
+            </li>
+        </ul>
+        <button class="btn btn-info" @click="addPrize">添加</button>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>
--- a/src/views/Config/index.vue
+++ b/src/views/Config/index.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref,onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { configRoutes } from '../../router';
+
+const router = useRouter();
+const menuList = ref(configRoutes.children);
+
+const cleanMenuList=(menu:any)=>{
+    const newList=menu;
+    for(let i=0;i<newList.length;i++){
+        if(newList[i].children){
+            cleanMenuList(newList[i].children);
+        }
+        if(!newList[i].meta){
+            newList.splice(i,1);
+            i--;
+        }
+    }
+
+return newList;
+}
+    menuList.value=cleanMenuList(menuList.value);
+
+    const skip=(path:string)=>{
+        router.push(path);
+    }
+</script>
+
+<template>
+    <div class="flex">
+        <ul class="w-56 h-screen m-0 menu bg-base-200 pt-14 rounded-box">
+            <li v-for="item in menuList" :key="item.name">
+                <details open v-if="item.children">
+                    <summary>{{ item.meta.title }}</summary>
+                    <ul>
+                        <li v-for="subItem in item.children" :key="subItem.name">
+                            <details open v-if="subItem.children">
+                                <summary>{{ subItem.meta.title }}</summary>
+                                <ul>
+                                    <li v-for="subSubItem in subItem.children" :key="subSubItem.name">
+                                        <a @click="skip(subItem.path)">{{ subSubItem.meta!.title }}</a>
+                                    </li>
+                                </ul>
+                            </details>
+                            <a v-else @click="skip(subItem.path)">{{ subItem.meta!.title }}</a>
+                        </li>
+                    </ul>
+                </details>
+                <a v-else @click="skip(item.path)">{{ item.meta!.title }}</a>
+            </li>
+        </ul>
+        <router-view></router-view>
+    </div>
+</template>
+
+<style scoped></style>
--- a/src/views/Doc/index.vue
+++ b/src/views/Doc/index.vue
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive } from 'vue';
-</script>
-
-<template>Doc</template>
-
-<style scoped></style>
--- a/src/views/Guide/index.vue
+++ b/src/views/Guide/index.vue
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive } from 'vue';
-</script>
-
-<template>project</template>
-
-<style scoped></style>
--- a/src/views/Home/data.ts
+++ b/src/views/Home/data.ts
@@ -0,0 +1,170 @@
+export const tableData = [
+    'H', 'Hydrogen', '1.00794', 1, 1,
+    'He', 'Helium', '4.002602', 2, 1,
+    'Li', 'Lithium', '6.941', 3, 1,
+    'Be', 'Beryllium', '9.012182', 4, 1,
+    'B', 'Boron', '10.811', 13, 2,
+    'C', 'Carbon', '12.0107', 14, 2,
+    'N', 'Nitrogen', '14.0067', 15, 2,
+    'O', 'Oxygen', '15.9994', 16, 2,
+    'F', 'Fluorine', '18.9984032', 17, 2,
+    'Ne', 'Neon', '20.1797', 18, 2,
+    'Na', 'Sodium', '22.98976...', 1, 3,
+    'Mg', 'Magnesium', '24.305', 2, 3,
+    'Al', 'Aluminium', '26.9815386', 13, 3,
+    'Si', 'Silicon', '28.0855', 14, 3,
+    'P', 'Phosphorus', '30.973762', 15, 3,
+    'S', 'Sulfur', '32.065', 16, 3,
+    'Cl', 'Chlorine', '35.453', 17, 3,
+    'Ar', 'Argon', '39.948', 18, 3,
+    'K', 'Potassium', '39.948', 1, 4,
+    'Ca', 'Calcium', '40.078', 2, 4,
+    'Sc', 'Scandium', '44.955912', 3, 4,
+    'Ti', 'Titanium', '47.867', 4, 4,
+    'V', 'Vanadium', '50.9415', 5, 4,
+    'Cr', 'Chromium', '51.9961', 6, 4,
+    'Mn', 'Manganese', '54.938045', 7, 4,
+    'Fe', 'Iron', '55.845', 8, 4,
+    'Co', 'Cobalt', '58.933195', 9, 4,
+    'Ni', 'Nickel', '58.6934', 10, 4,
+    'Cu', 'Copper', '63.546', 11, 4,
+    'Zn', 'Zinc', '65.38', 12, 4,
+    'Ga', 'Gallium', '69.723', 13, 4,
+    'Ge', 'Germanium', '72.63', 14, 4,
+    'As', 'Arsenic', '74.9216', 15, 4,
+    'Se', 'Selenium', '78.96', 16, 4,
+    'Br', 'Bromine', '79.904', 17, 4,
+    'Kr', 'Krypton', '83.798', 18, 4,
+    'Rb', 'Rubidium', '85.4678', 1, 5,
+    'Sr', 'Strontium', '87.62', 2, 5,
+    'Y', 'Yttrium', '88.90585', 3, 5,
+    'Zr', 'Zirconium', '91.224', 4, 5,
+    'Nb', 'Niobium', '92.90628', 5, 5,
+    'Mo', 'Molybdenum', '95.96', 6, 5,
+    'Tc', 'Technetium', '(98)', 7, 5,
+    'Ru', 'Ruthenium', '101.07', 8, 5,
+    'Rh', 'Rhodium', '102.9055', 9, 5,
+    'Pd', 'Palladium', '106.42', 10, 5,
+    'Ag', 'Silver', '107.8682', 11, 5,
+    'Cd', 'Cadmium', '112.411', 12, 5,
+    'In', 'Indium', '114.818', 13, 5,
+    'Sn', 'Tin', '118.71', 14, 5,
+    'Sb', 'Antimony', '121.76', 15, 5,
+    'Te', 'Tellurium', '127.6', 16, 5,
+    'I', 'Iodine', '126.90447', 17, 5,
+    'Xe', 'Xenon', '131.293', 18, 5,
+    'Cs', 'Caesium', '132.9054', 1, 6,
+    'Ba', 'Barium', '132.9054', 2, 6,
+    'La', 'Lanthanum', '138.90547', 4, 9,
+    'Ce', 'Cerium', '140.116', 5, 9,
+    'Pr', 'Praseodymium', '140.90765', 6, 9,
+    'Nd', 'Neodymium', '144.242', 7, 9,
+    'Pm', 'Promethium', '(145)', 8, 9,
+    'Sm', 'Samarium', '150.36', 9, 9,
+    'Eu', 'Europium', '151.964', 10, 9,
+    'Gd', 'Gadolinium', '157.25', 11, 9,
+    'Tb', 'Terbium', '158.92535', 12, 9,
+    'Dy', 'Dysprosium', '162.5', 13, 9,
+    'Ho', 'Holmium', '164.93032', 14, 9,
+    'Er', 'Erbium', '167.259', 15, 9,
+    'Tm', 'Thulium', '168.93421', 16, 9,
+    'Yb', 'Ytterbium', '173.054', 17, 9,
+    'Lu', 'Lutetium', '174.9668', 18, 9,
+    'Hf', 'Hafnium', '178.49', 4, 6,
+    'Ta', 'Tantalum', '180.94788', 5, 6,
+    'W', 'Tungsten', '183.84', 6, 6,
+    'Re', 'Rhenium', '186.207', 7, 6,
+    'Os', 'Osmium', '190.23', 8, 6,
+    'Ir', 'Iridium', '192.217', 9, 6,
+    'Pt', 'Platinum', '195.084', 10, 6,
+    'Au', 'Gold', '196.966569', 11, 6,
+    'Hg', 'Mercury', '200.59', 12, 6,
+    'Tl', 'Thallium', '204.3833', 13, 6,
+    'Pb', 'Lead', '207.2', 14, 6,
+    'Bi', 'Bismuth', '208.9804', 15, 6,
+    'Po', 'Polonium', '(209)', 16, 6,
+    'At', 'Astatine', '(210)', 17, 6,
+    'Rn', 'Radon', '(222)', 18, 6,
+    'Fr', 'Francium', '(223)', 1, 7,
+    'Ra', 'Radium', '(226)', 2, 7,
+    'Ac', 'Actinium', '(227)', 4, 10,
+    'Th', 'Thorium', '232.03806', 5, 10,
+    'Pa', 'Protactinium', '231.0588', 6, 10,
+    'U', 'Uranium', '238.02891', 7, 10,
+    'Np', 'Neptunium', '(237)', 8, 10,
+    'Pu', 'Plutonium', '(244)', 9, 10,
+    'Am', 'Americium', '(243)', 10, 10,
+    'Cm', 'Curium', '(247)', 11, 10,
+    'Bk', 'Berkelium', '(247)', 12, 10,
+    'Cf', 'Californium', '(251)', 13, 10,
+    'Es', 'Einstenium', '(252)', 14, 10,
+    'Fm', 'Fermium', '(257)', 15, 10,
+    'Md', 'Mendelevium', '(258)', 16, 10,
+    'No', 'Nobelium', '(259)', 17, 10,
+    'Lr', 'Lawrencium', '(262)', 18, 10,
+    'Rf', 'Rutherfordium', '(267)', 4, 7,
+    'Db', 'Dubnium', '(268)', 5, 7,
+    'Sg', 'Seaborgium', '(271)', 6, 7,
+    'Bh', 'Bohrium', '(272)', 7, 7,
+    'Hs', 'Hassium', '(270)', 8, 7,
+    'Mt', 'Meitnerium', '(276)', 9, 7,
+    'Ds', 'Darmstadium', '(281)', 10, 7,
+    'Rg', 'Roentgenium', '(280)', 11, 7,
+    'Cn', 'Copernicium', '(285)', 12, 7,
+    'Uut', 'Unutrium', '(284)', 13, 7,
+    'Fl', 'Flerovium', '(289)', 14, 7,
+    'Uup', 'Ununpentium', '(288)', 15, 7,
+    'Lv', 'Livermorium', '(293)', 16, 7,
+    'Uus', 'Ununseptium', '(294)', 17, 7,
+    'Uuo', 'Ununoctium', '(294)', 18, 7
+]
+
+
+export const tableData2 = [
+    {
+       id:'1',
+       uid:'0002781821',
+       name:'黄飞虎',
+       department:'H',
+       other:'1.00794',
+        x:1,
+        y:1,
+    },
+    {
+        id:'2',
+        uid:'089281',
+        name:'欧阳飞剑',
+        department:'He',
+        other:'4.002602',
+        x:2,
+        y:1,
+    },
+    {
+        id:'3',
+        uid:'981721212',
+        name:'令狐冲',
+        department:'Li',
+        other:'6.941',
+        x:3,
+        y:1,
+    },
+    {
+        id:'4',
+        uid:'91888212',
+        name:'黄沾',
+        department:'Be',
+        other:9.012182,
+        x:4,
+        y:1,
+    },
+    {
+        id:'5',
+        uid:'918821212',
+        name:'林可致',
+        department:'B',
+        other:'10.811',
+        x:5,
+        y:1
+    }
+
+]
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -1,70 +1,250 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import HelloWorld from '../../components/HelloWorld.vue';
-import useStore from '@/store/index';
-import { useRouter } from 'vue-router';
-import { IUser } from '@/types/user';
+import { ref, onMounted } from 'vue'
+// import { tableData2 as tableData } from './data'
+import * as THREE from 'three'
+import {
+    CSS3DRenderer, CSS3DObject
+} from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
+import TWEEN from 'three/examples/jsm/libs/tween.module.js';
+import useStore from '@/store'

-import { getData } from '@/api/main';
-const store = useStore();
-const router = useRouter();
-const data = ref<any>(null);
-const fetchData = async () => {
-  const res = await getData({});
-  data.value = res;
-  console.log('😊data.value:', data.value);
-};
-store.user.setUserList();
-// eslint-disable-next-line no-undef
-let user = ref<IUser[]>([]);
-const getUser = () => {
-  user.value = store.user.getUserList;
-  console.log('😊user.value:', user.value);
-};
-const skip = (url: string) => {
-  router.push({
-    path: url,
-    query: { id: 1 },
-  });
+const personConfig=useStore().personConfig
+const {getAlreadyPersonList:alreadyPersonList,getNotPersonList:notPersonList,getTableRowCount:rowCount}=personConfig
+const tableData=ref(
+    alreadyPersonList.concat(notPersonList)
+)
+
+const containerRef = ref<HTMLElement>()
+
+const scene = ref()
+const camera = ref()
+const renderer = ref()
+const controls = ref()
+const objects = ref<any[]>([])
+
+const targets = {
+    grid: <any[]>[],
+    helix: <any[]>[],
+    table: <any[]>[],
+    sphere: <any[]>[]
 };
+
+const init = () => {
+    const felidView = 40;
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const aspect = width / height;
+    const nearPlane = 1;
+    const farPlane = 10000;
+    const WebGLoutput = containerRef.value
+
+    scene.value = new THREE.Scene();
+    camera.value = new THREE.PerspectiveCamera(felidView, aspect, nearPlane, farPlane);
+    camera.value.position.z = 3000;
+
+    renderer.value = new CSS3DRenderer()
+    renderer.value.setSize(width, height)
+    renderer.value.domElement.style.position = 'absolute';
+    WebGLoutput!.appendChild(renderer.value.domElement);
+
+    controls.value = new TrackballControls(camera.value, renderer.value.domElement);
+    controls.value.rotateSpeed = 1;
+    controls.value.staticMoving = true;
+    controls.value.minDistance = 500;
+    controls.value.maxDistance = 6000;
+    controls.value.addEventListener('change', render);
+
+    const tableLen = tableData.value.length
+    for (let i = 0; i < tableLen; i++) {
+        const element = document.createElement('div');
+        element.className = 'element-card';
+        element.style.backgroundColor = `rgba( 0, 127, 127, ${Math.random() * 0.5 + 0.25} )`;
+
+        const number = document.createElement('div');
+        number.className = 'card-id';
+        // number.textContent = (i / 5 + 1).toString();
+        number.textContent = tableData.value[i].uid;
+        element.appendChild(number);
+
+        const symbol = document.createElement('div');
+        symbol.className = 'card-name';
+        symbol.textContent = tableData.value[i].name;
+        element.appendChild(symbol);
+
+        const detail = document.createElement('div');
+        detail.className = 'card-detail';
+        detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].other}`;
+        element.appendChild(detail);
+
+        const object = new CSS3DObject(element);
+        object.position.x = Math.random() * 4000 - 2000;
+        object.position.y = Math.random() * 4000 - 2000;
+        object.position.z = Math.random() * 4000 - 2000;
+        scene.value.add(object);
+
+        objects.value.push(object);
+    }
+
+    createTableVertices();
+    createSphereVertices();
+    createHelixVertices();
+
+    function createTableVertices() {
+        const tableLen = tableData.value.length;
+
+        for (let i = 0; i < tableLen; i++) {
+            const object = new THREE.Object3D();
+
+            object.position.x = tableData.value[i].x * 180 - rowCount*90;
+            object.position.y = -tableData.value[i].y * 200 + 1000;
+            object.position.z = 0;
+
+            targets.table.push(object);
+        }
+    }
+
+    function createSphereVertices() {
+        let i = 0;
+        const objLength = objects.value.length;
+        const vector = new THREE.Vector3();
+
+        for (; i < objLength; ++i) {
+            let phi = Math.acos(-1 + (2 * i) / objLength);
+            let theta = Math.sqrt(objLength * Math.PI) * phi;
+            const object = new THREE.Object3D();
+
+            object.position.x = 800 * Math.cos(theta) * Math.sin(phi);
+            object.position.y = 800 * Math.sin(theta) * Math.sin(phi);
+            object.position.z = -800 * Math.cos(phi);
+
+            // rotation object 
+
+            vector.copy(object.position).multiplyScalar(2);
+            object.lookAt(vector);
+            targets.sphere.push(object);
+        }
+    }
+    function createHelixVertices() {
+        let i = 0;
+        const vector = new THREE.Vector3();
+        const objLength = objects.value.length;
+        for (; i < objLength; ++i) {
+            let phi = i * 0.213 + Math.PI;
+
+            const object = new THREE.Object3D();
+
+            object.position.x = 800 * Math.sin(phi);
+            object.position.y = -(i * 8) + 450;
+            object.position.z = 800 * Math.cos(phi + Math.PI);
+
+            object.scale.set(1.1, 1.1, 1.1);
+
+            vector.x = object.position.x * 2;
+            vector.y = object.position.y;
+            vector.z = object.position.z * 2;
+
+            object.lookAt(vector);
+
+            targets.helix.push(object);
+        }
+    }
+    window.addEventListener('resize', onWindowResize, false);
+    transform(targets.table, 2000)
+    render();
+}
+
+const transform = (targets: any[], duration: number) => {
+    // TWEEN.removeAll();
+    const objLength = objects.value.length;
+    for (let i = 0; i < objLength; ++i) {
+        let object = objects.value[i];
+        let target = targets[i];
+        new TWEEN.Tween(object.position)
+            .to({ x: target.position.x, y: target.position.y, z: target.position.z },
+                Math.random() * duration + duration)
+            .easing(TWEEN.Easing.Exponential.InOut)
+            .start();
+
+
+        new TWEEN.Tween(object.rotation)
+            .to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
+            .easing(TWEEN.Easing.Exponential.InOut)
+            .start();
+    }
+
+    // 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
+    new TWEEN.Tween({})
+        .to({}, duration * 2)
+        .onUpdate(render)
+        .start();
+}
+function onWindowResize() {
+    camera.value.aspect = window.innerWidth / window.innerHeight
+    camera.value.updateProjectionMatrix();
+
+    renderer.value.setSize(window.innerWidth, window.innerHeight);
+    render();
+}
+
+/**
+* [animation update all tween && controls]
+*/
+function animation() {
+    TWEEN.update();
+    controls.value.update();
+    requestAnimationFrame(animation);
+}
+
+
+function render() {
+    renderer.value.render(scene.value, camera.value);
+}
+
+onMounted(() => {
+    init();
+    animation();
+});
+
 </script>

 <template>
-  <div class="flex justify-center">
-    <!-- <svg-icon :name="'menu'" class="cursor-pointer svgMenu"></svg-icon> -->
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="../../assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
+    <div id="container" ref="containerRef">
+        <!-- 选中菜单结构 start-->
+        <div id="menu">
+            <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>
        </div>
-  <div class="flex justify-center gap-6">
-    <button class="btn btn-primary" @click="getUser">pinia test</button>
-    <button class="btn btn-outline btn-secondary" @click="skip('about')"> router test</button>
-    <button class="btn glass" @click="fetchData">fetch</button>
-
+        <!-- end -->
    </div>
-  <HelloWorld
-    class="flex flex-col items-center mx-auto text-center flex-column"
-    msg="Vite + Vue"
-  />
 </template>

 <style scoped lang="scss">
-
-
-.logo {
-  height: 10em;
-  padding: 1.5em;
-  will-change: filter;
-  z-index: 0;
+#menu {
+    position: absolute;
+    z-index: 100;
+    width: 100%;
+    bottom: 50px;
+    text-align: center;
+    font-size: 32px;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+
+button {
+    border: none;
+    background-color: transparent;
+    color: rgba(127, 255, 255, 0.75);
+    padding: 12px 24px;
+    cursor: pointer;
+    outline: 1px solid rgba(127, 255, 255, 0.75);
 }
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+
+button:hover {
+    background-color: rgba(127, 255, 255, 0.5);
+}
+
+button:active {
+    background-color: rgba(127, 255, 255, 0.75);
 }


--- a/vite.config.ts
+++ b/vite.config.ts
@@ -91,7 +91,6 @@ export default defineConfig(({ mode }) => {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src'),
-                '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
            },
        },
        build: {
				`@@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1704385528419" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4272" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 128c212 0 384 172 384 384s-172 384-384 384-384-172-384-384 172-384 384-384m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m226.4 322.4L512 613.6 285.6 386.4 240 432l226.4 226.4L512 704l45.6-45.6L784 432l-45.6-45.6z" p-id="4273"></path></svg>