commit codes.

package.json

@@ -11,13 +11,16 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "axios": "^1.2.2",
     "pinia": "^2.0.28",
+    "qs": "^6.11.0",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/node": "^18.11.12",
+    "@types/qs": "^6.9.7",
     "@vicons/fluent": "^0.12.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-prettier": "^7.0.0",

pnpm-lock.yaml

@@ -3,17 +3,20 @@ lockfileVersion: 5.4
 specifiers:
   '@rushstack/eslint-patch': ^1.1.4
   '@types/node': ^18.11.12
+  '@types/qs': ^6.9.7
   '@vicons/fluent': ^0.12.0
   '@vitejs/plugin-vue': ^4.0.0
   '@vue/eslint-config-prettier': ^7.0.0
   '@vue/eslint-config-typescript': ^11.0.0
   '@vue/tsconfig': ^0.1.3
+  axios: ^1.2.2
   eslint: ^8.22.0
   eslint-plugin-vue: ^9.3.0
   naive-ui: ^2.34.3
   npm-run-all: ^4.1.5
   pinia: ^2.0.28
   prettier: ^2.7.1
+  qs: ^6.11.0
   typescript: ~4.7.4
   vfonts: ^0.0.3
   vite: ^4.0.0
@@ -22,13 +25,16 @@ specifiers:
   vue-tsc: ^1.0.12
 
 dependencies:
+  axios: registry.npmmirror.com/axios/1.2.2
   pinia: registry.npmmirror.com/pinia/2.0.28_e7lp6ggkpgyi5vqd44m2kxvk6i
+  qs: registry.npmmirror.com/qs/6.11.0
   vue: registry.npmmirror.com/vue/3.2.45
   vue-router: registry.npmmirror.com/vue-router/4.1.6_vue@3.2.45
 
 devDependencies:
   '@rushstack/eslint-patch': registry.npmmirror.com/@rushstack/eslint-patch/1.2.0
   '@types/node': registry.npmmirror.com/@types/node/18.11.18
+  '@types/qs': registry.npmmirror.com/@types/qs/6.9.7
   '@vicons/fluent': registry.npmmirror.com/@vicons/fluent/0.12.0
   '@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/4.0.0_vite@4.0.3+vue@3.2.45
   '@vue/eslint-config-prettier': registry.npmmirror.com/@vue/eslint-config-prettier/7.0.0_l5rdqc4k22455lce6ocqroldia
@@ -463,6 +469,12 @@ packages:
     version: 18.11.18
     dev: true
 
+  registry.npmmirror.com/@types/qs/6.9.7:
+    resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/qs/-/qs-6.9.7.tgz}
+    name: '@types/qs'
+    version: 6.9.7
+    dev: true
+
   registry.npmmirror.com/@types/semver/7.3.13:
     resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/semver/-/semver-7.3.13.tgz}
     name: '@types/semver'
@@ -916,6 +928,24 @@ packages:
     version: 4.2.5
     dev: true
 
+  registry.npmmirror.com/asynckit/0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz}
+    name: asynckit
+    version: 0.4.0
+    dev: false
+
+  registry.npmmirror.com/axios/1.2.2:
+    resolution: {integrity: sha512-bz/J4gS2S3I7mpN/YZfGFTqhXTYzRho8Ay38w2otuuDR322KzFIWm/4W2K6gIwvWaws5n+mnb7D1lN9uD+QH6Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/axios/-/axios-1.2.2.tgz}
+    name: axios
+    version: 1.2.2
+    dependencies:
+      follow-redirects: registry.npmmirror.com/follow-redirects/1.15.2
+      form-data: registry.npmmirror.com/form-data/4.0.0
+      proxy-from-env: registry.npmmirror.com/proxy-from-env/1.1.0
+    transitivePeerDependencies:
+      - debug
+    dev: false
+
   registry.npmmirror.com/balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz}
     name: balanced-match
@@ -961,7 +991,6 @@ packages:
     dependencies:
       function-bind: registry.npmmirror.com/function-bind/1.1.1
       get-intrinsic: registry.npmmirror.com/get-intrinsic/1.1.3
-    dev: true
 
   registry.npmmirror.com/callsites/3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz}
@@ -1020,6 +1049,15 @@ packages:
     version: 1.1.4
     dev: true
 
+  registry.npmmirror.com/combined-stream/1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz}
+    name: combined-stream
+    version: 1.0.8
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: registry.npmmirror.com/delayed-stream/1.0.0
+    dev: false
+
   registry.npmmirror.com/concat-map/0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz}
     name: concat-map
@@ -1132,6 +1170,13 @@ packages:
       object-keys: registry.npmmirror.com/object-keys/1.1.1
     dev: true
 
+  registry.npmmirror.com/delayed-stream/1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz}
+    name: delayed-stream
+    version: 1.0.0
+    engines: {node: '>=0.4.0'}
+    dev: false
+
   registry.npmmirror.com/dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/dir-glob/-/dir-glob-3.0.1.tgz}
     name: dir-glob
@@ -1548,6 +1593,29 @@ packages:
     version: 3.2.7
     dev: true
 
+  registry.npmmirror.com/follow-redirects/1.15.2:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz}
+    name: follow-redirects
+    version: 1.15.2
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: false
+
+  registry.npmmirror.com/form-data/4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz}
+    name: form-data
+    version: 4.0.0
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: registry.npmmirror.com/asynckit/0.4.0
+      combined-stream: registry.npmmirror.com/combined-stream/1.0.8
+      mime-types: registry.npmmirror.com/mime-types/2.1.35
+    dev: false
+
   registry.npmmirror.com/fs.realpath/1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz}
     name: fs.realpath
@@ -1568,7 +1636,6 @@ packages:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz}
     name: function-bind
     version: 1.1.1
-    dev: true
 
   registry.npmmirror.com/function.prototype.name/1.1.5:
     resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz}
@@ -1596,7 +1663,6 @@ packages:
       function-bind: registry.npmmirror.com/function-bind/1.1.1
       has: registry.npmmirror.com/has/1.0.3
       has-symbols: registry.npmmirror.com/has-symbols/1.0.3
-    dev: true
 
   registry.npmmirror.com/get-symbol-description/1.0.0:
     resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz}
@@ -1715,7 +1781,6 @@ packages:
     name: has-symbols
     version: 1.0.3
     engines: {node: '>= 0.4'}
-    dev: true
 
   registry.npmmirror.com/has-tostringtag/1.0.0:
     resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz}
@@ -1733,7 +1798,6 @@ packages:
     engines: {node: '>= 0.4.0'}
     dependencies:
       function-bind: registry.npmmirror.com/function-bind/1.1.1
-    dev: true
 
   registry.npmmirror.com/he/1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/he/-/he-1.2.0.tgz}
@@ -2071,6 +2135,22 @@ packages:
       picomatch: registry.npmmirror.com/picomatch/2.3.1
     dev: true
 
+  registry.npmmirror.com/mime-db/1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz}
+    name: mime-db
+    version: 1.52.0
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  registry.npmmirror.com/mime-types/2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz}
+    name: mime-types
+    version: 2.1.35
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: registry.npmmirror.com/mime-db/1.52.0
+    dev: false
+
   registry.npmmirror.com/minimatch/3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz}
     name: minimatch
@@ -2195,7 +2275,6 @@ packages:
     resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.2.tgz}
     name: object-inspect
     version: 1.12.2
-    dev: true
 
   registry.npmmirror.com/object-keys/1.1.1:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/object-keys/-/object-keys-1.1.1.tgz}
@@ -2417,6 +2496,12 @@ packages:
     hasBin: true
     dev: true
 
+  registry.npmmirror.com/proxy-from-env/1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz}
+    name: proxy-from-env
+    version: 1.1.0
+    dev: false
+
   registry.npmmirror.com/punycode/2.1.1:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/punycode/-/punycode-2.1.1.tgz}
     name: punycode
@@ -2424,6 +2509,15 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  registry.npmmirror.com/qs/6.11.0:
+    resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qs/-/qs-6.11.0.tgz}
+    name: qs
+    version: 6.11.0
+    engines: {node: '>=0.6'}
+    dependencies:
+      side-channel: registry.npmmirror.com/side-channel/1.0.4
+    dev: false
+
   registry.npmmirror.com/queue-microtask/1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz}
     name: queue-microtask
@@ -2590,7 +2684,6 @@ packages:
       call-bind: registry.npmmirror.com/call-bind/1.0.2
       get-intrinsic: registry.npmmirror.com/get-intrinsic/1.1.3
       object-inspect: registry.npmmirror.com/object-inspect/1.12.2
-    dev: true
 
   registry.npmmirror.com/slash/3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz}

src/App.vue

@@ -11,12 +11,14 @@ import { NConfigProvider, type GlobalThemeOverrides } from 'naive-ui'
 
 const themeOverrides: GlobalThemeOverrides = {
     common: {
-        primaryColor: '#42b883',
+        primaryColor: '#6777ef',
+        primaryColorHover: 'rgba(103, 119, 239, 0.8)',
+        primaryColorPressed: '#515dbc',
         borderRadius: '4px',
     },
-    // Button: {
+    Button: {
-    //     textColor: '#FF0000',
+        fontSizeLarge: '18px',
-    // },
+    },
     // Select: {
     //     peers: {
     //         InternalSelection: {

src/layouts/MainPage/MainPage.vue

@@ -29,23 +29,20 @@
                 <SiderMenu :collapsed="collapsed" invertedBackgroundColor="#282c34" :inverted="dark" />
             </n-layout-sider>
             <n-layout-content content-style="padding: 24px;" :native-scrollbar="false">
-                平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
+                <router-view />
-                平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
-                平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
-                平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
             </n-layout-content>
         </n-layout>
     </n-layout>
 </template>
 
 <script lang="ts">
-import { defineComponent, h, ref, computed, type Component } from 'vue'
+import { defineComponent, ref, computed } from 'vue'
 
 import Logo from './components/Logo.vue'
 import SiderMenu from './components/SiderMenu.vue'
 
 export default defineComponent({
-    name: 'HomeView',
+    name: 'MainPage',
     components: {
         Logo,
         SiderMenu,

src/layouts/MainPage/components/SiderMenu.vue

@@ -56,7 +56,7 @@ const menuOptions: MenuOption[] = [
                 RouterLink,
                 {
                     to: {
-                        name: 'home',
+                        name: '404',
                         params: {
                             lang: 'zh-CN',
                         },
@@ -64,7 +64,7 @@ const menuOptions: MenuOption[] = [
                 },
                 { default: () => '回家' }
             ),
-        key: '/',
+        key: '404',
         icon: renderIcon('Home20Regular'),
     },
     {
@@ -98,6 +98,6 @@ const menuOptions: MenuOption[] = [
 // ActiveKey
 const route = useRoute()
 const activeKey = computed(() => {
-    return route.path
+    return route.name
 })
 </script>

src/main.ts

@@ -5,6 +5,10 @@ import App from './App.vue'
 import router from './router'
 
 import './assets/main.css'
+// 通用字体
+import 'vfonts/Lato.css'
+// 等宽字体
+import 'vfonts/FiraCode.css'
 
 import {
     // create naive ui
@@ -21,10 +25,12 @@ import {
     NForm,
     NFormItem,
     NInput,
-    NRow,
+    NGrid,
-    NCol,
+    NGridItem,
     NMessageProvider,
     NCard,
+    NCheckbox,
+    NCheckboxGroup,
 } from 'naive-ui'
 
 const naive = create({
@@ -40,10 +46,12 @@ const naive = create({
         NForm,
         NFormItem,
         NInput,
-        NRow,
+        NGrid,
-        NCol,
+        NGridItem,
         NMessageProvider,
         NCard,
+        NCheckbox,
+        NCheckboxGroup,
     ],
 })
 

src/router/index.ts

@@ -1,18 +1,26 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView/HomeView.vue'
+import MainPage from '../layouts/MainPage/MainPage.vue'
-import LoginView from '../views/LoginView/LoginView.vue'
+import Login from '../views/Login/Login.vue'
+import Page404 from '../views/404/index.vue'
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     routes: [
         {
             path: '/',
-            redirect: '/login',
+            component: MainPage,
+            children: [
+                {
+                    path: '404',
+                    name: '404',
+                    component: Page404,
+                },
+            ],
         },
         {
             path: '/login',
             name: 'login',
-            component: LoginView,
+            component: Login,
         },
     ],
 })

src/type/PrincipalType.ts

@@ -0,0 +1,13 @@
+export enum PrincipalType {
+    EMAIL,
+    MOBILE_PHONE,
+    USERNAME,
+}
+
+export const regexConsts = {
+    email: /^\w+([-+.]\w+)*@[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})*(\.(?![0-9]+$)[a-zA-Z0-9][-0-9A-Za-z]{0,62})$/,
+    mobilePhone: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
+    username: /^[\da-zA-Z_.@\\]{4,36}$/,
+
+    password: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\w\\!#$%&'*+\-/=?^`{|}~@()[]",\.;':><]{8,32}$/,
+}

src/views/ChangePassword/components/LoginByOTP.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="login-form-container">
+        <div class="title">
+            <span style="color: #6777ef">Plusone&nbsp;</span>
+            <span style="font-weight: 300">Admin</span>
+        </div>
+
+        <n-form
+            ref="formRef"
+            :model="model"
+            :rules="rules"
+            :show-feedback="false"
+            :show-label="false"
+            size="large"
+        >
+            <n-form-item path="principal">
+                <n-input
+                    placeholder="邮箱地址 / 手机号"
+                    v-model:value="model.principal"
+                    @keydown.enter.prevent
+                />
+            </n-form-item>
+
+            <n-grid y-gap="24" :cols="24">
+                <n-gi :span="15">
+                    <n-form-item path="password">
+                        <n-input
+                            placeholder="验证码"
+                            v-model:value="model.otp"
+                            @input="handlePasswordInput"
+                            @keydown.enter.prevent
+                        />
+                    </n-form-item>
+                </n-gi>
+                <n-gi :span="9">
+                    <div style="display: flex; justify-content: flex-end">
+                        <n-button
+                            class="txt-btn"
+                            @click="handleBtnGetOTPClick"
+                            size="large"
+                            style="width： 100%"
+                        >
+                            获取验证码
+                        </n-button>
+                    </div>
+                </n-gi>
+            </n-grid>
+
+            <n-grid y-gap="24" :cols="2">
+                <n-gi>
+                    <n-form-item path="rememberMe">
+                        <n-checkbox v-model:checked="model.rememberMe" size="large">
+                            <span style="color: #808080">保持登录状态</span>
+                        </n-checkbox>
+                    </n-form-item>
+                </n-gi>
+                <n-gi>
+                    <div style="display: flex; justify-content: flex-end">
+                        <n-button class="txt-btn" text @click="$emit('toLoginByPassword')">
+                            密码登录
+                        </n-button>
+                    </div>
+                </n-gi>
+            </n-grid>
+
+            <n-button
+                type="primary"
+                size="large"
+                style="width: 100%; margin-top: 8px"
+                @click="handleBtnLoginClick"
+            >
+                登录
+            </n-button>
+
+            <div style="display: flex; justify-content: flex-end; margin-top: 8px">
+                <n-button class="txt-btn" text style="margin-left: 16px"> 忘记密码 </n-button>
+                <n-button class="txt-btn" text style="margin-left: 16px"> 免费注册 </n-button>
+            </div>
+        </n-form>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
+import { useMessage } from 'naive-ui'
+
+interface LoginByPasswordCommand {
+    principal: string
+    otp: string
+    rememberMe: boolean
+}
+
+const formRef = ref<FormInst | null>(null)
+const rPasswordFormItemRef = ref<FormItemInst | null>(null)
+const message = useMessage()
+const model = ref<LoginByPasswordCommand>({
+    principal: '',
+    otp: '',
+    rememberMe: false,
+})
+
+const rules: FormRules = {
+    principal: [
+        {
+            required: true,
+            validator(rule: FormItemRule, value: string) {
+                if (!value) {
+                    return new Error('需要年龄')
+                } else if (!/^\d*$/.test(value)) {
+                    return new Error('年龄应该为整数')
+                } else if (Number(value) < 18) {
+                    return new Error('年龄应该超过十八岁')
+                }
+                return true
+            },
+            trigger: ['input', 'blur'],
+        },
+    ],
+    otp: [
+        {
+            required: true,
+            message: '请输入密码',
+        },
+    ],
+}
+
+function handlePasswordInput() {
+    if (model.value.rememberMe) {
+        rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
+    }
+}
+
+function handleBtnLoginClick(e: MouseEvent) {
+    e.preventDefault()
+    formRef.value?.validate((errors) => {
+        if (!errors) {
+            message.success('验证成功')
+        } else {
+            console.log(errors)
+            message.error('验证失败')
+        }
+    })
+}
+
+function handleBtnGetOTPClick() {
+    console.log('handleBtnGetOTPClick')
+}
+</script>
+
+<style scoped>
+.login-form-container {
+    width: 320px;
+    background-color: #f3f3f3;
+    padding: 32px 40px;
+    border-radius: 6px;
+    border: solid 1px #e4e4e4;
+    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.2);
+    border-top: solid 4px #6777ef;
+}
+
+.title {
+    font-size: 30px;
+    text-align: center;
+    margin-bottom: 16px;
+}
+
+.n-form-item {
+    margin-bottom: 8px;
+}
+
+.txt-btn {
+    line-height: 40px;
+    font-size: 15px;
+    color: #6777ef;
+}
+
+.txt-btn:hover {
+    color: rgba(103, 119, 239, 0.8);
+}
+</style>

src/views/ChangePassword/components/LoginByPassword.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="login-form-container">
+        <div class="title">
+            <span style="color: #6777ef">Plusone&nbsp;</span>
+            <span style="font-weight: 300">Admin</span>
+        </div>
+
+        <n-form
+            ref="formRef"
+            :model="model"
+            :rules="rules"
+            :show-feedback="false"
+            :show-label="false"
+            size="large"
+        >
+            <n-form-item path="principal">
+                <n-input
+                    placeholder="用户名 / 邮箱地址 / 手机号"
+                    v-model:value="model.principal"
+                    @keydown.enter.prevent
+                />
+            </n-form-item>
+            <n-form-item path="password">
+                <n-input
+                    placeholder="密码"
+                    v-model:value="model.password"
+                    type="password"
+                    @input="handlePasswordInput"
+                    @keydown.enter.prevent
+                />
+            </n-form-item>
+
+            <n-grid y-gap="24" :cols="2">
+                <n-gi>
+                    <n-form-item path="rememberMe">
+                        <n-checkbox v-model:checked="model.rememberMe" size="large">
+                            <span style="color: #808080">保持登录状态</span>
+                        </n-checkbox>
+                    </n-form-item>
+                </n-gi>
+                <n-gi>
+                    <div style="display: flex; justify-content: flex-end">
+                        <n-button class="txt-btn" text @click="$emit('toLoginByOTP')"> 验证码登录 </n-button>
+                    </div>
+                </n-gi>
+            </n-grid>
+
+            <n-button
+                type="primary"
+                size="large"
+                style="width: 100%; margin-top: 8px"
+                @click="handleBtnLoginClick"
+            >
+                登录
+            </n-button>
+
+            <div style="display: flex; justify-content: flex-end; margin-top: 8px">
+                <n-button class="txt-btn" text style="margin-left: 16px"> 忘记密码 </n-button>
+                <n-button class="txt-btn" text style="margin-left: 16px"> 免费注册 </n-button>
+            </div>
+        </n-form>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
+import { useMessage } from 'naive-ui'
+import type { PrincipalType } from '@/type/PrincipalType'
+
+interface LoginByPasswordCommand {
+    principal: string
+    password: string
+    rememberMe: boolean
+    principalType?: PrincipalType
+}
+
+const formRef = ref<FormInst | null>(null)
+const rPasswordFormItemRef = ref<FormItemInst | null>(null)
+const message = useMessage()
+const model = ref<LoginByPasswordCommand>({
+    principal: '',
+    password: '',
+    rememberMe: false,
+})
+
+const rules: FormRules = {
+    principal: [
+        {
+            required: true,
+            validator(rule: FormItemRule, value: string) {
+                if (!value) {
+                    return new Error('需要年龄')
+                } else if (!/^\d*$/.test(value)) {
+                    return new Error('年龄应该为整数')
+                } else if (Number(value) < 18) {
+                    return new Error('年龄应该超过十八岁')
+                }
+                return true
+            },
+            trigger: ['input', 'blur'],
+        },
+    ],
+    password: [
+        {
+            required: true,
+            message: '请输入密码',
+        },
+    ],
+}
+
+function handlePasswordInput() {
+    if (model.value.rememberMe) {
+        rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
+    }
+}
+
+function handleBtnLoginClick(e: MouseEvent) {
+    e.preventDefault()
+    formRef.value?.validate((errors) => {
+        if (!errors) {
+            message.success('验证成功')
+        } else {
+            console.log(errors)
+            message.error('验证失败')
+        }
+    })
+}
+</script>
+
+<style scoped>
+.login-form-container {
+    width: 320px;
+    background-color: #f3f3f3;
+    padding: 32px 40px;
+    border-radius: 6px;
+    border: solid 1px #e4e4e4;
+    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.2);
+    border-top: solid 4px #6777ef;
+}
+
+.title {
+    font-size: 30px;
+    text-align: center;
+    margin-bottom: 16px;
+}
+
+.n-form-item {
+    margin-bottom: 8px;
+}
+
+.txt-btn {
+    line-height: 40px;
+    font-size: 15px;
+    color: #6777ef;
+}
+
+.txt-btn:hover {
+    color: rgba(103, 119, 239, 0.8);
+}
+</style>

src/views/ChangePassword/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="login-page">
+        <LoginByPassword v-if="loginByPassword" @toLoginByOTP="loginByPassword = false" />
+        <LoginByOTP v-else @toLoginByPassword="loginByPassword = true" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import LoginByPassword from './components/LoginByPassword.vue'
+import LoginByOTP from './components/LoginByOTP.vue'
+
+const loginByPassword = ref(true)
+</script>
+
+<style scoped>
+.login-page {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #666666;
+}
+</style>

src/views/Login/Login.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="login-page">
+        <LoginByPassword v-if="loginByPassword" @toLoginByOTP="loginByPassword = false" />
+        <LoginByOTP v-else @toLoginByPassword="loginByPassword = true" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import LoginByPassword from './components/LoginByPassword.vue'
+import LoginByOTP from './components/LoginByOTP.vue'
+
+const loginByPassword = ref(true)
+</script>
+
+<style scoped>
+.login-page {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #666666;
+}
+</style>

src/views/Login/components/LoginByOTP.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="login-form-container">
+        <div class="title">
+            <span style="color: #6777ef">Plusone&nbsp;</span>
+            <span style="font-weight: 300">Admin</span>
+        </div>
+
+        <n-form
+            ref="formRef"
+            :model="model"
+            :rules="rules"
+            :show-feedback="false"
+            :show-label="false"
+            size="large"
+        >
+            <n-form-item path="principal">
+                <n-input
+                    placeholder="邮箱地址 / 手机号"
+                    v-model:value="model.principal"
+                    @keydown.enter.prevent
+                />
+            </n-form-item>
+
+            <n-grid y-gap="24" :cols="24">
+                <n-gi :span="15">
+                    <n-form-item path="password">
+                        <n-input
+                            placeholder="验证码"
+                            v-model:value="model.otp"
+                            @input="handlePasswordInput"
+                            @keydown.enter.prevent
+                        />
+                    </n-form-item>
+                </n-gi>
+                <n-gi :span="9">
+                    <div style="display: flex; justify-content: flex-end">
+                        <n-button
+                            class="txt-btn"
+                            @click="handleBtnGetOTPClick"
+                            size="large"
+                            style="width： 100%"
+                        >
+                            获取验证码
+                        </n-button>
+                    </div>
+                </n-gi>
+            </n-grid>
+
+            <n-grid y-gap="24" :cols="2">
+                <n-gi>
+                    <n-form-item path="rememberMe">
+                        <n-checkbox v-model:checked="model.rememberMe" size="large">
+                            <span style="color: #808080">保持登录状态</span>
+                        </n-checkbox>
+                    </n-form-item>
+                </n-gi>
+                <n-gi>
+                    <div style="display: flex; justify-content: flex-end">
+                        <n-button class="txt-btn" text @click="$emit('toLoginByPassword')">
+                            密码登录
+                        </n-button>
+                    </div>
+                </n-gi>
+            </n-grid>
+
+            <n-button
+                type="primary"
+                size="large"
+                style="width: 100%; margin-top: 8px"
+                @click="handleBtnLoginClick"
+            >
+                登录
+            </n-button>
+
+            <div style="display: flex; justify-content: flex-end; margin-top: 8px">
+                <n-button class="txt-btn" text style="margin-left: 16px"> 忘记密码 </n-button>
+                <n-button class="txt-btn" text style="margin-left: 16px"> 免费注册 </n-button>
+            </div>
+        </n-form>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
+import { useMessage } from 'naive-ui'
+
+interface LoginByPasswordCommand {
+    principal: string
+    otp: string
+    rememberMe: boolean
+}
+
+const formRef = ref<FormInst | null>(null)
+const rPasswordFormItemRef = ref<FormItemInst | null>(null)
+const message = useMessage()
+const model = ref<LoginByPasswordCommand>({
+    principal: '',
+    otp: '',
+    rememberMe: false,
+})
+
+const rules: FormRules = {
+    principal: [
+        {
+            required: true,
+            validator(rule: FormItemRule, value: string) {
+                if (!value) {
+                    return new Error('需要年龄')
+                } else if (!/^\d*$/.test(value)) {
+                    return new Error('年龄应该为整数')
+                } else if (Number(value) < 18) {
+                    return new Error('年龄应该超过十八岁')
+                }
+                return true
+            },
+            trigger: ['input', 'blur'],
+        },
+    ],
+    otp: [
+        {
+            required: true,
+            message: '请输入密码',
+        },
+    ],
+}
+
+function handlePasswordInput() {
+    if (model.value.rememberMe) {
+        rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
+    }
+}
+
+function handleBtnLoginClick(e: MouseEvent) {
+    e.preventDefault()
+    formRef.value?.validate((errors) => {
+        if (!errors) {
+            message.success('验证成功')
+        } else {
+            console.log(errors)
+            message.error('验证失败')
+        }
+    })
+}
+
+function handleBtnGetOTPClick() {
+    console.log('handleBtnGetOTPClick')
+}
+</script>
+
+<style scoped>
+.login-form-container {
+    width: 320px;
+    background-color: #f3f3f3;
+    padding: 32px 40px;
+    border-radius: 6px;
+    border: solid 1px #e4e4e4;
+    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.2);
+    border-top: solid 4px #6777ef;
+}
+
+.title {
+    font-size: 30px;
+    text-align: center;
+    margin-bottom: 16px;
+}
+
+.n-form-item {
+    margin-bottom: 8px;
+}
+
+.txt-btn {
+    line-height: 40px;
+    font-size: 15px;
+    color: #6777ef;
+}
+
+.txt-btn:hover {
+    color: rgba(103, 119, 239, 0.8);
+}
+</style>

src/views/Login/components/LoginByPassword.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="login-form-container">
+        <div class="title">
+            <span style="color: #6777ef">Plusone&nbsp;</span>
+            <span style="font-weight: 300">Admin</span>
+        </div>
+
+        <n-form ref="formRef" :model="model" :show-feedback="false" :show-label="false" size="large">
+            <n-form-item path="principal">
+                <n-input
+                    placeholder="用户名 / 邮箱地址 / 手机号"
+                    v-model:value="model.principal"
+                    @keydown.enter.prevent
+                />
+            </n-form-item>
+            <n-form-item path="password">
+                <n-input
+                    placeholder="密码"
+                    v-model:value="model.password"
+                    type="password"
+                    @input="handlePasswordInput"
+                    @keydown.enter.prevent
+                />
+            </n-form-item>
+
+            <n-grid y-gap="24" :cols="2">
+                <n-gi>
+                    <n-form-item path="rememberMe">
+                        <n-checkbox v-model:checked="model.rememberMe" size="large">
+                            <span style="color: #808080">保持登录状态</span>
+                        </n-checkbox>
+                    </n-form-item>
+                </n-gi>
+                <n-gi>
+                    <div style="display: flex; justify-content: flex-end">
+                        <n-button class="txt-btn" text @click="$emit('toLoginByOTP')"> 验证码登录 </n-button>
+                    </div>
+                </n-gi>
+            </n-grid>
+
+            <n-button
+                type="primary"
+                size="large"
+                style="width: 100%; margin-top: 8px"
+                @click="handleBtnLoginClick"
+            >
+                登录
+            </n-button>
+
+            <div style="display: flex; justify-content: flex-end; margin-top: 8px">
+                <n-button class="txt-btn" text style="margin-left: 16px"> 忘记密码 </n-button>
+                <n-button class="txt-btn" text style="margin-left: 16px"> 免费注册 </n-button>
+            </div>
+        </n-form>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
+import { useMessage } from 'naive-ui'
+import { PrincipalType, regexConsts } from '@/type/PrincipalType'
+
+interface LoginByPasswordCommand {
+    principal: string
+    password: string
+    rememberMe: boolean
+    principalType: PrincipalType | null
+}
+
+const formRef = ref<FormInst | null>(null)
+const rPasswordFormItemRef = ref<FormItemInst | null>(null)
+const message = useMessage()
+const model = ref<LoginByPasswordCommand>({
+    principal: '',
+    password: '',
+    rememberMe: false,
+    principalType: null,
+})
+
+function handlePasswordInput() {
+    if (model.value.rememberMe) {
+        rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
+    }
+}
+
+function handleBtnLoginClick(e: MouseEvent) {
+    e.preventDefault()
+    const principal = model.value.principal
+    const password = model.value.password
+    if (regexConsts.email.test(principal)) {
+        model.value.principalType = PrincipalType.EMAIL
+    } else if (regexConsts.mobilePhone.test(principal)) {
+        model.value.principalType = PrincipalType.MOBILE_PHONE
+    } else if (regexConsts.username.test(principal)) {
+        model.value.principalType = PrincipalType.USERNAME
+    } else {
+        message.error('请输入用户名、电子邮箱或手机号')
+        return
+    }
+
+    if (!regexConsts.password.test(password)) {
+        message.error('输入的密码不符合要求')
+    }
+
+    
+}
+</script>
+
+<style scoped>
+.login-form-container {
+    width: 320px;
+    background-color: #f3f3f3;
+    padding: 32px 40px;
+    border-radius: 6px;
+    border: solid 1px #e4e4e4;
+    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.2);
+    border-top: solid 4px #6777ef;
+}
+
+.title {
+    font-size: 30px;
+    text-align: center;
+    margin-bottom: 16px;
+}
+
+.n-form-item {
+    margin-bottom: 8px;
+}
+
+.txt-btn {
+    line-height: 40px;
+    font-size: 15px;
+    color: #6777ef;
+}
+
+.txt-btn:hover {
+    color: rgba(103, 119, 239, 0.8);
+}
+</style>

src/views/LoginView/LoginView.vue

@@ -1,184 +0,0 @@
-<template>
-    <div class="login-page">
-        <div class="login-form-container">
-            <div class="title">
-                <span style="color: #42b883">Plusone Admin&nbsp;</span>
-                <span>登录</span>
-            </div>
-
-            <n-form ref="formRef" :model="model" :rules="rules">
-                <n-form-item path="principal" :show-label="false">
-                    <n-input
-                        placeholder="用户名 / 邮箱地址 / 手机号"
-                        v-model:value="model.principal"
-                        @keydown.enter.prevent
-                    />
-                </n-form-item>
-                <n-form-item path="password" :show-label="false">
-                    <n-input
-                        placeholder="密码"
-                        v-model:value="model.password"
-                        type="password"
-                        @input="handlePasswordInput"
-                        @keydown.enter.prevent
-                    />
-                </n-form-item>
-                <n-form-item ref="rPasswordFormItemRef" first path="reenteredPassword" :show-label="false">
-                    <n-input
-                        placeholder="重复密码"
-                        v-model:value="model.reenteredPassword"
-                        :disabled="!model.password"
-                        type="password"
-                        @keydown.enter.prevent
-                    />
-                </n-form-item>
-                <n-row :gutter="[0, 24]">
-                    <n-col :span="24">
-                        <div style="display: flex; justify-content: flex-end">
-                            <n-button
-                                :disabled="model.principal === null"
-                                round
-                                type="primary"
-                                @click="handleBtnLoginClick"
-                            >
-                                登录
-                            </n-button>
-                        </div>
-                    </n-col>
-                </n-row>
-            </n-form>
-        </div>
-    </div>
-
-    <pre>{{ JSON.stringify(model, null, 2) }}</pre>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
-import { useMessage } from 'naive-ui'
-
-interface LoginByPasswordCommand {
-    principal: string
-    password: string
-    reenteredPassword: string
-}
-
-export default defineComponent({
-    setup() {
-        const formRef = ref<FormInst | null>(null)
-        const rPasswordFormItemRef = ref<FormItemInst | null>(null)
-        const message = useMessage()
-        const modelRef = ref<LoginByPasswordCommand>({
-            principal: '',
-            password: '',
-            reenteredPassword: '',
-        })
-        function validatePasswordStartWith(rule: FormItemRule, value: string): boolean {
-            return (
-                !!modelRef.value.password &&
-                modelRef.value.password.startsWith(value) &&
-                modelRef.value.password.length >= value.length
-            )
-        }
-        function validatePasswordSame(rule: FormItemRule, value: string): boolean {
-            return value === modelRef.value.password
-        }
-        const rules: FormRules = {
-            age: [
-                {
-                    required: true,
-                    validator(rule: FormItemRule, value: string) {
-                        if (!value) {
-                            return new Error('需要年龄')
-                        } else if (!/^\d*$/.test(value)) {
-                            return new Error('年龄应该为整数')
-                        } else if (Number(value) < 18) {
-                            return new Error('年龄应该超过十八岁')
-                        }
-                        return true
-                    },
-                    trigger: ['input', 'blur'],
-                },
-            ],
-            password: [
-                {
-                    required: true,
-                    message: '请输入密码',
-                },
-            ],
-            reenteredPassword: [
-                {
-                    required: true,
-                    message: '请再次输入密码',
-                    trigger: ['input', 'blur'],
-                },
-                {
-                    validator: validatePasswordStartWith,
-                    message: '两次密码输入不一致',
-                    trigger: 'input',
-                },
-                {
-                    validator: validatePasswordSame,
-                    message: '两次密码输入不一致',
-                    trigger: ['blur', 'password-input'],
-                },
-            ],
-        }
-        return {
-            formRef,
-            rPasswordFormItemRef,
-            model: modelRef,
-            rules,
-            handlePasswordInput() {
-                if (modelRef.value.reenteredPassword) {
-                    rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
-                }
-            },
-            handleBtnLoginClick(e: MouseEvent) {
-                e.preventDefault()
-                formRef.value?.validate((errors) => {
-                    if (!errors) {
-                        message.success('验证成功')
-                    } else {
-                        console.log(errors)
-                        message.error('验证失败')
-                    }
-                })
-            },
-        }
-    },
-})
-</script>
-
-<style scoped>
-.login-page {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.login-page > .login-form-container {
-    width: 320px;
-    background-color: #f3f3f3;
-    padding: 40px;
-    border-radius: 4px;
-    border: solid 1px #efeff5;
-}
-
-.title {
-    font-size: 24px;
-    font-weight: 500;
-}
-
-.title::after {
-    height: 24px;
-    display: block;
-    content: '';
-}
-</style>