diff --git a/package-lock.json b/package-lock.json
index e378a99..72894b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,16 +10,25 @@
       "dependencies": {
         "element-plus": "^2.4.2",
         "fs": "^0.0.1-security",
+        "vant": "^4.7.3",
         "vue": "^3.3.4"
       },
       "devDependencies": {
         "@types/node": "^20.9.1",
+        "@vant/auto-import-resolver": "^1.0.2",
         "@vitejs/plugin-vue": "^4.2.3",
         "typescript": "^5.0.2",
+        "unplugin-vue-components": "^0.25.2",
         "vite": "^4.4.5",
         "vue-tsc": "^1.8.5"
       }
     },
+    "node_modules/@antfu/utils": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-0.7.6.tgz",
+      "integrity": "sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==",
+      "dev": true
+    },
     "node_modules/@babel/parser": {
       "version": "7.23.3",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.3.tgz",
@@ -426,6 +435,41 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@popperjs/core": {
       "name": "@sxzz/popperjs-es",
       "version": "2.11.7",
@@ -436,6 +480,34 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.0.5.tgz",
+      "integrity": "sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
+    },
     "node_modules/@types/lodash": {
       "version": "4.14.201",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.201.tgz",
@@ -463,6 +535,25 @@
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
       "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
     },
+    "node_modules/@vant/auto-import-resolver": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@vant/auto-import-resolver/-/auto-import-resolver-1.0.2.tgz",
+      "integrity": "sha512-5SYC1izl36KID+3F4pqFtYD8VFK6m1pdulft99sjSkUN4GBX9OslRnsJA0g7xS+0YrytjDuxxBk04YLYIxaYMg==",
+      "dev": true
+    },
+    "node_modules/@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
+    "node_modules/@vant/use": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.6.0.tgz",
+      "integrity": "sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.5.0.tgz",
@@ -713,6 +804,31 @@
         }
       }
     },
+    "node_modules/acorn": {
+      "version": "8.11.2",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.11.2.tgz",
+      "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
@@ -724,6 +840,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -733,6 +858,39 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/computeds": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
@@ -755,6 +913,23 @@
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
       "dev": true
     },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/element-plus": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.4.2.tgz",
@@ -827,6 +1002,43 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/fs": {
       "version": "0.0.1-security",
       "resolved": "https://registry.npmmirror.com/fs/-/fs-0.0.1-security.tgz",
@@ -846,6 +1058,36 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -855,6 +1097,66 @@
         "he": "bin/he"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+      "dev": true,
+      "dependencies": {
+        "hasown": "^2.0.0"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/local-pkg": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.3.tgz",
+      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -903,6 +1205,28 @@
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
       "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
@@ -918,6 +1242,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
     "node_modules/muggle-string": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz",
@@ -941,6 +1271,15 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/normalize-wheel-es": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
@@ -952,11 +1291,26 @@
       "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
       "dev": true
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -984,6 +1338,48 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "3.29.4",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
@@ -1000,6 +1396,15 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -1023,6 +1428,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
@@ -1042,6 +1468,65 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
+    "node_modules/unplugin": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.5.1.tgz",
+      "integrity": "sha512-0QkvG13z6RD+1L1FoibQqnvTwVBXvS4XSPwAyinVgoOCl2jAgwzdUKmEj05o4Lt8xwQI85Hb6mSyYkcAGwZPew==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.11.2",
+        "chokidar": "^3.5.3",
+        "webpack-sources": "^3.2.3",
+        "webpack-virtual-modules": "^0.6.0"
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.25.2.tgz",
+      "integrity": "sha512-OVmLFqILH6w+eM8fyt/d/eoJT9A6WO51NZLf1vC5c1FZ4rmq2bbGxTy8WP2Jm7xwFdukaIdv819+UI7RClPyCA==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.7.5",
+        "@rollup/pluginutils": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.0",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.1",
+        "minimatch": "^9.0.3",
+        "resolve": "^1.22.2",
+        "unplugin": "^1.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "@nuxt/kit": "^3.2.2",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
+        },
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vant": {
+      "version": "4.7.3",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-4.7.3.tgz",
+      "integrity": "sha512-nb0pXxKSOaE9CvH//KozKDivqhjE4ZRvx1b/RCWFL4H3tZ5l+HhWtwK1yJx5AkO1Pm/IYQY86yZa1tums8DfsQ==",
+      "dependencies": {
+        "@vant/popperjs": "^1.3.0",
+        "@vant/use": "^1.6.0",
+        "@vue/shared": "^3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
@@ -1144,6 +1629,21 @@
         "typescript": "*"
       }
     },
+    "node_modules/webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.0.tgz",
+      "integrity": "sha512-KnaMTE6EItz/f2q4Gwg5/rmeKVi79OR58NoYnwDJqCk9ywMtTGbBnBcfoBtN4QbYu0lWXvyMoH2Owxuhe4qI6Q==",
+      "dev": true
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/package.json b/package.json
index 5239a22..e38855e 100644
--- a/package.json
+++ b/package.json
@@ -11,12 +11,15 @@
   "dependencies": {
     "element-plus": "^2.4.2",
     "fs": "^0.0.1-security",
+    "vant": "^4.7.3",
     "vue": "^3.3.4"
   },
   "devDependencies": {
     "@types/node": "^20.9.1",
+    "@vant/auto-import-resolver": "^1.0.2",
     "@vitejs/plugin-vue": "^4.2.3",
     "typescript": "^5.0.2",
+    "unplugin-vue-components": "^0.25.2",
     "vite": "^4.4.5",
     "vue-tsc": "^1.8.5"
   }
diff --git a/src/App.vue b/src/App.vue
index 6242e2a..5d76ff4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,7 @@
         <div>
           <!-- 搜索输入框 -->
           <el-input class="InputText" v-model="searchInput" placeholder="请输入你要搜索的文件名称">
+            <!-- 搜索按钮 -->
             <template #append>
               <el-button @click="handleSearch">搜索</el-button>
             </template>
@@ -13,7 +14,20 @@
         </div>
         <div class="HomeHeadAvatar">
           <!-- 用户头像 -->
-          <el-avatar class="Avatar" shape="square" :size="35">头像</el-avatar>
+          <el-avatar class="Avatar" shape="square" :size="35" @click="showPopup">头像</el-avatar>
+          <!-- 用户登录弹出框 -->
+          <van-popup v-model:show='show' round position="bottom" :style="{ height: '30%' }">
+            <div class="HomeHeadUserLogin">
+              <h4>账号:</h4>
+              <!-- 用户名输入框 -->
+              <el-input v-model="username" placeholder="请输入账号"/>
+              <h4>密码:</h4>
+              <!-- 密码输入框 -->
+              <el-input v-model="userPassword" show-password placeholder="请输入密码"/>
+              <!-- 登录按钮 -->
+              <el-button @click="userLogin" type="primary" class="UserLoginButton">登录</el-button>
+            </div>
+          </van-popup>
         </div>
       </el-col>
     </el-row>
@@ -31,10 +45,9 @@
             <template #default="scope">
               <!-- 下载按钮 -->
               <el-button link type="primary" size="small" @click="handleDownload(scope.row)">下载</el-button>
-              <!-- 详细信息 -->
+              <!-- 详细信息按钮 -->
               <el-button link type="info" size="small" @click="handleAbout(scope.row)">详细</el-button>
-              <!-- 删除按钮 -->
-              <!-- TODO: 管理员权限 -->
+              <!-- 删除按钮 (管理员权限 TODO) -->
               <!-- <el-button link type="danger" size="small" @click="handleDelete(scope.row)" >删除</el-button> -->
             </template>
           </el-table-column>
@@ -58,20 +71,18 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted, watch, computed} from 'vue';
-import {useWindowSize} from '@vueuse/core';
-import {Table} from "element-plus";
+import {ref, onMounted, watch, computed} from 'vue'; // 导入Vue 3的相关模块
+import {useWindowSize} from '@vueuse/core'; // 导入窗口大小监测的工具函数
 
 // 左侧栏宽度变量
-const leftColumnSpan = ref(18);
+const leftColumnSpan = ref(18); // 创建左侧栏宽度的响应式变量并初始化为18
 // 右侧栏宽度变量
-const rightColumnSpan = ref(6);
-const {width} = useWindowSize();
-const searchInput = ref('');
+const rightColumnSpan = ref(6); // 创建右侧栏宽度的响应式变量并初始化为6
+const {width} = useWindowSize(); // 使用useWindowSize()函数获取窗口宽度
+const searchInput = ref(''); // 创建搜索输入框的响应式变量并初始化为空字符串
 // 原始文件列表数据
-const originalTableData: TableRow[] = [];
-const randomDataRowCount = 1000;
-const userName = "MoYiJiangNan";
+const originalTableData: TableRow[] = []; // 创建原始文件列表数据数组
+const randomDataRowCount = 1000; // 随机生成文件数据的数量上限
 for (let i = 1; i < randomDataRowCount; i++) {
   originalTableData.push({
     id: i,
@@ -82,26 +93,28 @@ for (let i = 1; i < randomDataRowCount; i++) {
   });
 }
 // 文件列表数据
-const tableData = ref(originalTableData);
+const tableData = ref(originalTableData); // 创建文件列表数据的响应式变量并初始化为原始数据
 // 定义分页相关变量
-const pageSize = ref(15);
-const pagerCount = ref(7);
-const totalItems = ref(tableData.value.length);
-const currentPage = ref(1);
+const pageSize = ref(15); // 每页显示的数据数量
+const pagerCount = ref(7); // 分页器显示的页码按钮数量
+const totalItems = ref(tableData.value.length); // 总数据条数
+const currentPage = ref(1); // 当前页数
 // 计算分页后的文件列表数据
 const pagedTableData = computed(() => {
-  const startIndex = (currentPage.value - 1) * pageSize.value;
-  const endIndex = startIndex + pageSize.value;
-  return tableData.value.slice(startIndex, endIndex);
+  const startIndex = (currentPage.value - 1) * pageSize.value; // 计算当前页的起始索引
+  const endIndex = startIndex + pageSize.value; // 计算当前页的结束索引
+  return tableData.value.slice(startIndex, endIndex); // 返回分页后的数据
 });
+const username = ref(); // 用户名输入框的响应式变量
+const userPassword = ref(); // 密码输入框的响应式变量
 
 // 处理分页切换事件
 const handlePageChange = (page: number) => {
-  currentPage.value = page;
+  currentPage.value = page; // 更新当前页数
 };
 // 搜索功能
 const handleSearch = () => {
-  const query = searchInput.value.trim().toLowerCase();
+  const query = searchInput.value.trim().toLowerCase(); // 获取搜索关键字并转换为小写
   if (!query) {
     // 如果搜索关键字为空，显示全部文件
     tableData.value = originalTableData;
@@ -112,20 +125,20 @@ const handleSearch = () => {
     });
   }
   currentPage.value = 1; // 重置当前页为第一页
-  totalItems.value = tableData.value.length; // 更新 totalItems
+  totalItems.value = tableData.value.length; // 更新总数据条数
 };
 // 更新左侧栏宽度函数
 const updateLeftColumnSpan = () => {
   if (width.value <= 768) {
-    leftColumnSpan.value = 24;
-    rightColumnSpan.value = 0;
+    leftColumnSpan.value = 24; // 如果窗口宽度小于等于768px，左侧栏占满整行
+    rightColumnSpan.value = 0; // 右侧栏不显示
   } else {
-    leftColumnSpan.value = 18;
-    rightColumnSpan.value = 6;
+    leftColumnSpan.value = 18; // 如果窗口宽度大于768px，左侧栏占18列
+    rightColumnSpan.value = 6; // 右侧栏占6列
   }
 };
-onMounted(updateLeftColumnSpan);
-watch(width, updateLeftColumnSpan);
+onMounted(updateLeftColumnSpan); // 在组件挂载后调用updateLeftColumnSpan函数
+watch(width, updateLeftColumnSpan); // 监听窗口宽度变化并调用updateLeftColumnSpan函数
 
 // 为您的表格中的row定义一个接口类型
 interface TableRow {
@@ -148,65 +161,87 @@ const handleAbout = (row: TableRow) => {
   alert('详细信息功能暂未实现' + row.id);
 };
 
-// 点击删除按钮的处理函数
-// const handleDelete = (row: TableRow) => {
-//   console.log('点击删除按钮', row);
-//   alert('删除功能暂未实现' + row.id);
-// };
+const userLogin = () => {
+  console.log(username.value, userPassword.value);
+};
+
+const show = ref(false); // 弹出框显示状态的响应式变量
+const showPopup = () => {
+  show.value = true; // 显示弹出框
+};
 </script>
 
 <style scoped>
+/* 样式作用范围被限制在当前组件内 */
+
+/* 主页顶部部分样式 */
 .HomeHead {
-  width: calc(100% - 20px);
-  height: 5ch;
-  margin: 10px 10px 10px 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
+  width: calc(100% - 20px); /* 宽度为屏幕宽度减去20像素 */
+  height: 5ch; /* 高度为5字符高度 */
+  margin: 10px 10px 10px 10px; /* 外边距，上右下左均为10像素 */
+  display: flex; /* 使用Flex布局 */
+  justify-content: center; /* 水平居中对齐 */
+  align-items: center; /* 垂直居中对齐 */
+  text-align: center; /* 文本水平居中对齐 */
 }
 
+/* 左右容器样式 */
 .LeftAndRightContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
+  display: flex; /* 使用Flex布局 */
+  flex-direction: column; /* 垂直方向排列子元素 */
+  justify-content: center; /* 水平居中对齐 */
+  align-items: center; /* 垂直居中对齐 */
+  text-align: center; /* 文本水平居中对齐 */
 }
 
+/* 左侧栏样式 */
 .Left {
-  flex: 0 0 calc(75% - 5px);
-  background-color: yellow;
-  margin: 0 10px 0 0;
+  flex: 0 0 calc(75% - 5px); /* 占用75%的宽度，不可伸缩，减去5像素的间隔 */
+  margin: 0 10px 0 0; /* 外边距，上右下左分别为0 10px 0 0 */
 }
 
+/* 右侧栏样式 */
 .Right {
-  flex: 0 0 calc(25% - 5px);
-  background-color: green;
+  flex: 0 0 calc(25% - 5px); /* 占用25%的宽度，不可伸缩，减去5像素的间隔 */
+  background-color: green; /* 背景颜色为绿色 */
 }
 
-/* 媒体查询 - 针对手机端屏幕 */
+/* 媒体查询，用于移动屏幕 */
 @media (max-width: 768px) {
   .Right {
-    display: none; /* 隐藏 Right 模块 */
+    display: none; /* 隐藏右侧栏 */
   }
 
   .Left {
-    flex: 0 0 100%; /* Left 模块占据全部可用空间 */
-    margin: 0; /* 调整边距 */
+    flex: 0 0 100%; /* 左侧栏占满整个宽度 */
+    margin: 0; /* 调整外边距 */
   }
 
-  /* 可以添加更多针对手机端的样式调整 */
+  /* 您可以在这里为移动屏幕添加更多样式调整 */
 }
 
+/* 用户头像样式 */
 .Avatar {
-  float: right;
-  margin: 0 5px 0 0;
+  float: right; /* 右浮动 */
+  margin: 0 5px 0 0; /* 外边距，上右下左分别为0 5px 0 0 */
 }
 
+/* 搜索输入框样式 */
 .InputText {
-  float: left;
-  margin: 0 0 0 5px;
-  width: 80%;
+  float: left; /* 左浮动 */
+  margin: 0 0 0 5px; /* 外边距，上右下左分别为0 0 0 5px */
+  width: 80%; /* 宽度占80% */
+}
+
+/* 用户登录框样式 */
+.HomeHeadUserLogin {
+  margin: 10px 30px 0 30px; /* 外边距，上右下左分别为10px 30px 0 30px */
+  text-align: left; /* 文本左对齐 */
+}
+
+/* 用户登录按钮样式 */
+.UserLoginButton {
+  width: 80%; /* 宽度占80% */
+  margin: 20px; /* 外边距，上下均为20px */
 }
 </style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index a2d4350..1327c7d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import 'vant/lib/index.css';
 import './style.css'
 import App from './App.vue'
 
diff --git a/src/style.css b/src/style.css
index 7cd3653..074f267 100644
--- a/src/style.css
+++ b/src/style.css
@@ -5,9 +5,9 @@
     white-space: normal;
     word-break: break-all;
     /* 行高 */
-    line-height: 23px;
+    line-height: 30px;
     padding: 0 0;
     /* 字体大小 */
-    font-size: 13px;
+    font-size: 15px;
     margin-left: 15px;
 }
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 3453c7b..3659b55 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,8 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import fs from "fs"
+import {readFileSync} from "fs"
+import Components from 'unplugin-vue-components/vite';
+import { VantResolver } from '@vant/auto-import-resolver';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -8,9 +10,9 @@ export default defineConfig({
     host: "0.0.0.0",
     port: 5173,
     https: {
-      key: fs.readFileSync("./keys/agent2-key.pem"),
-      cert: fs.readFileSync("./keys/agent2-cert.pem"),
+      key: readFileSync("./keys/agent2-key.pem"),
+      cert: readFileSync("./keys/agent2-cert.pem"),
     },
   },
-  plugins: [vue()],
+  plugins: [vue(), Components({resolvers: [VantResolver()]})],
 })