修改 RegisterCommand。

注册页面、修改密码页面。
commit code.
2022-12-30 17:52:36 +08:00 · 2022-12-30 17:43:10 +08:00 · 2022-12-30 01:56:26 +08:00 · 2022-12-29 17:53:22 +08:00 · 2022-12-29 00:37:02 +08:00
33 changed files with 1149 additions and 229 deletions
--- a/.env
+++ b/.env
@@ -0,0 +1 @@
+VITE_TOKEN_NAME=plusone
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_BASE_API=http://localhost:8108
--- a/.env.prod
+++ b/.env.prod
@@ -0,0 +1 @@
+VITE_BASE_API=http://api.plusone.zhouxy.xyz:8108
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,18 +1,18 @@
 /* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
+require("@rushstack/eslint-patch/modern-module-resolution");

 module.exports = {
    root: true,
    extends: [
-        'plugin:vue/vue3-essential',
-        'eslint:recommended',
-        '@vue/eslint-config-typescript',
-        '@vue/eslint-config-prettier',
+        "plugin:vue/vue3-essential",
+        "eslint:recommended",
+        "@vue/eslint-config-typescript",
+        "@vue/eslint-config-prettier",
    ],
    parserOptions: {
-        ecmaVersion: 'latest',
+        ecmaVersion: "latest",
    },
    rules: {
-        'vue/multi-word-component-names': 'off',
+        "vue/multi-word-component-names": "off",
    },
-}
+};
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,8 +1,8 @@
 {
-    "singleQuote": true,
-    "semi": false,
+    "singleQuote": false,
+    "semi": true,
    "useTabs": false,
    "tabWidth": 4,
    "printWidth": 110,
    "endOfLine": "lf"
-}
+}
--- a/env.d.ts
+++ b/env.d.ts
@@ -1 +1,8 @@
 /// <reference types="vite/client" />
+
+declare interface Window {
+    $message: any;
+    $notification: any;
+    $dialog: any;
+    $loadingBar: any;
+}
--- a/index.html
+++ b/index.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">

 <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Plusone Admin</title>
 </head>

 <body>
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
  "version": "0.0.0",
  "private": true,
  "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
@@ -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",
--- a/pnpm-lock.yaml
+++ b/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}
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,28 @@
 <template>
-    <RouterView />
+    <n-config-provider :theme-overrides="themeOverrides">
+        <router-view />
+    </n-config-provider>
 </template>

 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { NConfigProvider, type GlobalThemeOverrides } from "naive-ui";
+
+const themeOverrides: GlobalThemeOverrides = {
+    common: {
+        primaryColor: "#6777ef",
+        primaryColorHover: "rgba(103, 119, 239, 0.8)",
+        primaryColorPressed: "#515dbc",
+        borderRadius: "4px",
+    },
+    Button: {
+        fontSizeLarge: "18px",
+    },
+    // Select: {
+    //     peers: {
+    //         InternalSelection: {
+    //             textColor: '#FF0000',
+    //         },
+    //     },
+    // },
+};
 </script>
--- a/src/api/account.ts
+++ b/src/api/account.ts
@@ -0,0 +1,10 @@
+import type { LoginByPasswordCommand } from "@/type/commands/LoginCommands";
+import http from "@/utils/request";
+
+export function loginByPassword(loginByPasswordCommand: LoginByPasswordCommand) {
+    return http({
+        url: "/login/byPassword",
+        method: "post",
+        data: loginByPasswordCommand,
+    });
+}
--- a/src/layouts/MainPage/MainPage.vue
+++ b/src/layouts/MainPage/MainPage.vue
@@ -0,0 +1,83 @@
+<template>
+    <n-layout position="absolute" style="top: 0; right: 0; bottom: 0; left: 0">
+        <n-layout-header position="absolute" :inverted="dark" :style="invertedStyle" :bordered="!dark">
+            <Logo :collapsed="false" style="width: 224px" />
+            <div class="header">
+                <n-button type="primary" @click="dark = !dark">{{ dark ? "亮色" : "暗色" }}</n-button>
+                颐和园路
+            </div>
+        </n-layout-header>
+        <n-layout
+            has-sider
+            position="absolute"
+            style="right: 0; bottom: 0; left: 0"
+            :style="dark ? { top: '72px' } : { top: '73px' }"
+        >
+            <n-layout-sider
+                :bordered="!dark"
+                :collapsed-width="64"
+                :width="256"
+                show-trigger="arrow-circle"
+                collapse-mode="width"
+                :collapsed="collapsed"
+                @collapse="collapsed = true"
+                @expand="collapsed = false"
+                :native-scrollbar="false"
+                :inverted="dark"
+                :style="invertedStyle"
+            >
+                <SiderMenu :collapsed="collapsed" invertedBackgroundColor="#282c34" :inverted="dark" />
+            </n-layout-sider>
+            <n-layout-content content-style="padding: 24px;" :native-scrollbar="false">
+                <router-view />
+            </n-layout-content>
+        </n-layout>
+    </n-layout>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from "vue";
+
+import Logo from "./components/Logo.vue";
+import SiderMenu from "./components/SiderMenu.vue";
+
+export default defineComponent({
+    name: "MainPage",
+    components: {
+        Logo,
+        SiderMenu,
+    },
+    setup() {
+        const collapsed = ref(false);
+        const dark = ref(true);
+        const invertedStyle = computed(() => {
+            return dark.value ? { "--n-color": "#282c34" } : { "--n-color": "#ffffff" };
+        });
+        return {
+            activeKey: ref<string | null>(null),
+            collapsed,
+            dark,
+            invertedStyle,
+        };
+    },
+});
+</script>
+
+<style scoped>
+:root {
+    --sider-width: 256px;
+}
+
+.n-layout-header {
+    display: flex;
+}
+
+.n-layout-header > .header {
+    padding: 24px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 256px;
+}
+</style>
--- a/src/layouts/MainPage/components/Logo.vue
+++ b/src/layouts/MainPage/components/Logo.vue
@@ -6,16 +6,16 @@
 </template>

 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed } from "vue";

 const props = defineProps({
    collapsed: Boolean,
    inverted: Boolean,
-})
+});

 const style = computed(() => {
-    return props.inverted ? { color: '#ffffff' } : { color: 'unset' }
-})
+    return props.inverted ? { color: "#ffffff" } : { color: "unset" };
+});
 </script>

 <style scoped>
--- a/src/layouts/MainPage/components/MenuVO.ts
+++ b/src/layouts/MainPage/components/MenuVO.ts
@@ -1,39 +1,39 @@
-import type { MenuOption } from 'naive-ui'
-import { type RouteRecordRaw, RouterLink } from 'vue-router'
-import { NIcon } from 'naive-ui'
-import * as iconComponents from '@vicons/fluent'
-import { type Component, h } from 'vue'
+import type { MenuOption } from "naive-ui";
+import { type RouteRecordRaw, RouterLink } from "vue-router";
+import { NIcon } from "naive-ui";
+import * as iconComponents from "@vicons/fluent";
+import { type Component, h } from "vue";

 export interface MenuVO {
-    type: number
-    typeName: string
-    id: number
-    parentId: number
-    name: string
+    type: number;
+    typeName: string;
+    id: number;
+    parentId: number;
+    name: string;
    // 若 type 为 MENU_ITEM 且 path 以 http:// 或 https:// 开头则被识别为外链
-    path: string
-    title: string
-    icon: string
-    hidden: boolean
-    orderNumber: number
-    status: number
-    remarks: string
+    path: string;
+    title: string;
+    icon: string;
+    hidden: boolean;
+    orderNumber: number;
+    status: number;
+    remarks: string;

    // MENU_ITEM
-    component?: string
-    cache?: boolean
-    resource?: string
-    actions?: ActionVO[]
+    component?: string;
+    cache?: boolean;
+    resource?: string;
+    actions?: ActionVO[];

    // MENU_LIST
-    children?: MenuVO[]
+    children?: MenuVO[];
 }

 interface ActionVO {
-    id: number
-    identifier: string
-    label: string
-    value: string
+    id: number;
+    identifier: string;
+    label: string;
+    value: string;
 }

 export enum MenuType {
@@ -48,7 +48,7 @@ export function convertToRoutes(menuVOTree: MenuVO[]): RouteRecordRaw[] {
                path: menuVO.path,
                name: menuVO.name,
                component:
-                    menuVO.component !== undefined ? () => import('@/views' + menuVO.component) : undefined,
+                    menuVO.component !== undefined ? () => import("@/views" + menuVO.component) : undefined,
                children: convertToRoutes(menuVO.children ? menuVO.children : []),
                meta: {
                    title: menuVO.title,
@@ -58,12 +58,12 @@ export function convertToRoutes(menuVOTree: MenuVO[]): RouteRecordRaw[] {
                    status: menuVO.status,
                    remarks: menuVO.remarks,
                },
-            }
+            };
        } else {
            return {
                path: menuVO.path,
                name: menuVO.name,
-                component: import('@/views' + menuVO.component),
+                component: import("@/views" + menuVO.component),
                meta: {
                    title: menuVO.title,
                    icon: menuVO.icon,
@@ -72,11 +72,11 @@ export function convertToRoutes(menuVOTree: MenuVO[]): RouteRecordRaw[] {
                    status: menuVO.status,
                    remarks: menuVO.remarks,
                },
-            }
+            };
        }
-    })
+    });

-    return routes
+    return routes;
 }

 export function convertToMenuOptions(menuVOTree: MenuVO[]): MenuOption[] {
@@ -86,28 +86,28 @@ export function convertToMenuOptions(menuVOTree: MenuVO[]): MenuOption[] {
                key: menuVO.name,
                icon: renderIcon(menuVO.icon),
                label:
-                    menuVO.path.startsWith('http://') || menuVO.path.startsWith('https://')
-                        ? () => h('a', { href: menuVO.path, target: '_blank' }, menuVO.title)
+                    menuVO.path.startsWith("http://") || menuVO.path.startsWith("https://")
+                        ? () => h("a", { href: menuVO.path, target: "_blank" }, menuVO.title)
                        : () => h(RouterLink, { to: menuVO.path }, menuVO.title),
-            }
+            };
        } else {
            return {
                key: menuVO.name,
                icon: renderIcon(menuVO.icon),
                label: menuVO.title,
                children: convertToMenuOptions(menuVO.children ? menuVO.children : []),
-            }
+            };
        }
-    })
+    });

-    return menuOptions
+    return menuOptions;
 }

-const icons: Map<string, Component> = new Map(Object.entries(iconComponents))
+const icons: Map<string, Component> = new Map(Object.entries(iconComponents));
 export function renderIcon(icon: string) {
-    const iconComponent = icons.get(icon)
+    const iconComponent = icons.get(icon);
    return () =>
        h(NIcon, null, {
            default: () => h(iconComponent ? iconComponent : iconComponents.QuestionCircle20Regular),
-        })
+        });
 }
--- a/src/layouts/MainPage/components/SiderMenu.vue
+++ b/src/layouts/MainPage/components/SiderMenu.vue
@@ -11,13 +11,13 @@
 </template>

 <script setup lang="ts">
-import { h, computed, type Component } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
+import { h, computed, type Component } from "vue";
+import { RouterLink, useRoute } from "vue-router";

-import { NIcon } from 'naive-ui'
-import type { MenuOption } from 'naive-ui'
+import { NIcon } from "naive-ui";
+import type { MenuOption } from "naive-ui";

-import * as iconComponents from '@vicons/fluent'
+import * as iconComponents from "@vicons/fluent";

 const props = defineProps({
    inverted: {
@@ -26,27 +26,27 @@ const props = defineProps({
    },
    invertedBackgroundColor: {
        type: String,
-        default: '#282c34',
+        default: "#282c34",
    },
    collapsed: {
        type: Boolean,
        default: false,
    },
-})
+});

 const style = computed(() => {
-    return props.inverted ? { '--n-color': props.invertedBackgroundColor } : { '--n-color': '#ffffff' }
-})
+    return props.inverted ? { "--n-color": props.invertedBackgroundColor } : { "--n-color": "#ffffff" };
+});

 // MenuOptions
-const icons: Map<string, Component> = new Map(Object.entries(iconComponents))
+const icons: Map<string, Component> = new Map(Object.entries(iconComponents));

 function renderIcon(icon: string) {
-    const iconComponent = icons.get(icon)
+    const iconComponent = icons.get(icon);
    return () =>
        h(NIcon, null, {
            default: () => h(iconComponent ? iconComponent : iconComponents.QuestionCircle20Regular),
-        })
+        });
 }

 const menuOptions: MenuOption[] = [
@@ -56,48 +56,48 @@ const menuOptions: MenuOption[] = [
                RouterLink,
                {
                    to: {
-                        name: 'home',
+                        name: "404",
                        params: {
-                            lang: 'zh-CN',
+                            lang: "zh-CN",
                        },
                    },
                },
-                { default: () => '回家' }
+                { default: () => "回家" }
            ),
-        key: '/',
-        icon: renderIcon('Home20Regular'),
+        key: "404",
+        icon: renderIcon("Home20Regular"),
    },
    {
        label: () =>
            h(
                RouterLink,
                {
-                    to: '/login',
+                    to: "/login",
                },
-                { default: () => '上班' }
+                { default: () => "上班" }
            ),
-        key: '/login',
-        icon: renderIcon('Desktop20Regular'),
+        key: "/login",
+        icon: renderIcon("Desktop20Regular"),
    },
    {
        label: () =>
            h(
-                'a',
+                "a",
                {
-                    href: 'http://zhouxy.xyz',
-                    target: '_blank',
-                    rel: 'noopenner noreferrer',
+                    href: "http://zhouxy.xyz",
+                    target: "_blank",
+                    rel: "noopenner noreferrer",
                },
-                'ZhouXY'
+                "ZhouXY"
            ),
-        key: 'hear-the-wind-sing',
-        icon: renderIcon('BookOpen20Filled'),
+        key: "hear-the-wind-sing",
+        icon: renderIcon("BookOpen20Filled"),
    },
-]
+];

 // ActiveKey
-const route = useRoute()
+const route = useRoute();
 const activeKey = computed(() => {
-    return route.path
-})
+    return route.name;
+});
 </script>
--- a/src/layouts/UserLayout/UserLayout.vue
+++ b/src/layouts/UserLayout/UserLayout.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="page">
+        <RouterView />
+    </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped>
+.page {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #666666;
+}
+</style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,14 +1,20 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
+import { createApp } from "vue";
+import { createPinia } from "pinia";

-import App from './App.vue'
-import router from './router'
+import App from "./App.vue";
+import router from "./router";

-import './assets/main.css'
+import "./assets/main.css";
+// 通用字体
+import "vfonts/Lato.css";
+// 等宽字体
+import "vfonts/FiraCode.css";

 import {
    // create naive ui
    create,
+    // createDiscreteApi
+    createDiscreteApi,
    // component
    NButton,
    NLayout,
@@ -18,7 +24,15 @@ import {
    NLayoutSider,
    NMenu,
    NScrollbar,
-} from 'naive-ui'
+    NForm,
+    NFormItem,
+    NInput,
+    NGrid,
+    NGridItem,
+    NCard,
+    NCheckbox,
+    NCheckboxGroup,
+} from "naive-ui";

 const naive = create({
    components: [
@@ -30,14 +44,34 @@ const naive = create({
        NLayoutSider,
        NMenu,
        NScrollbar,
+        NForm,
+        NFormItem,
+        NInput,
+        NGrid,
+        NGridItem,
+        NCard,
+        NCheckbox,
+        NCheckboxGroup,
    ],
-})
+});

-const app = createApp(App)
+const app = createApp(App);

-app.use(createPinia())
-app.use(router)
+app.use(createPinia());
+app.use(router);

-app.use(naive)
+app.use(naive);

-app.mount('#app')
+app.mount("#app");
+
+const { message, notification, dialog, loadingBar } = createDiscreteApi([
+    "message",
+    "dialog",
+    "notification",
+    "loadingBar",
+]);
+
+window.$message = message;
+window.$notification = notification;
+window.$dialog = dialog;
+window.$loadingBar = loadingBar;
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,21 +1,45 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView/HomeView.vue'
-import LoginView from '../views/LoginView/LoginView.vue'
+import { createRouter, createWebHistory } from "vue-router";
+import MainPage from "../layouts/MainPage/MainPage.vue";
+import Login from "../views/Login/Login.vue";
+import Page404 from "../views/404/index.vue";
+import UserLayout from "@/layouts/UserLayout/UserLayout.vue";

 const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
-            path: '/',
-            name: 'home',
-            component: HomeView,
+            path: "/",
+            component: MainPage,
+            children: [
+                {
+                    path: "404",
+                    name: "404",
+                    component: Page404,
+                },
+            ],
        },
        {
-            path: '/login',
-            name: 'login',
-            component: LoginView,
+            path: "",
+            component: UserLayout,
+            children: [
+                {
+                    path: "/login",
+                    name: "login",
+                    component: Login,
+                },
+                {
+                    path: "/register",
+                    name: "register",
+                    component: () => import("@/views/Register/Register.vue"),
+                },
+                {
+                    path: "/changePassword",
+                    name: "changePassword",
+                    component: () => import("@/views/ChangePassword/ChangePassword.vue"),
+                },
+            ],
        },
    ],
-})
+});

-export default router
+export default router;
--- a/src/stores/account.ts
+++ b/src/stores/account.ts
@@ -1,12 +1,8 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";

-export const useAccountStore = defineStore('account', () => {
-    const count = ref(0)
-    const doubleCount = computed(() => count.value * 2)
-    function increment() {
-        count.value++
-    }
+export const useAccountStore = defineStore("account", () => {
+    const token = ref<string | null>("0p978wqsetdgi9opw8e7s");

-    return { count, doubleCount, increment }
-})
+    return { token };
+});
--- a/src/type/PrincipalType.ts
+++ b/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}$/,
+};
--- a/src/type/commands/ChangePasswordCommand.ts
+++ b/src/type/commands/ChangePasswordCommand.ts
@@ -0,0 +1,6 @@
+export interface ChangePasswordByOTPCommand {
+    principal: string;
+    otp: string;
+    password: string;
+    reenteredPassword: string;
+}
--- a/src/type/commands/LoginCommands.ts
+++ b/src/type/commands/LoginCommands.ts
@@ -0,0 +1,14 @@
+import type { PrincipalType } from "../PrincipalType";
+
+export interface LoginByPasswordCommand {
+    principal: string;
+    password: string;
+    rememberMe: boolean;
+    principalType: PrincipalType | null;
+}
+
+export interface LoginByOTPCommand {
+    principal: string;
+    otp: string;
+    rememberMe: boolean;
+}
--- a/src/type/commands/RegisterCommand.ts
+++ b/src/type/commands/RegisterCommand.ts
@@ -0,0 +1,7 @@
+export interface RegisterCommand {
+    emailOrMobilePhone: string;
+    username: string;
+    code: string;
+    password: string;
+    reenteredPassword: string;
+}
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -0,0 +1,3 @@
+export function getToken(): string {
+    return "g9-wes78dufgbcn9oup7bc";
+}
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -0,0 +1,69 @@
+import axios, { AxiosHeaders, type AxiosRequestConfig } from "axios";
+import { useAccountStore } from "@/stores/account";
+import { getToken } from "@/utils/auth";
+
+const baseURL = import.meta.env.VITE_BASE_API;
+const tokenName = import.meta.env.VITE_TOKEN_NAME;
+
+// 创建axios实例
+const service = axios.create({
+    baseURL, // api的base_url
+    timeout: 5000, // 请求超时时间
+});
+
+// request拦截器
+service.interceptors.request.use(
+    (config: AxiosRequestConfig) => {
+        // Do something before request is sent
+        const accountStore = useAccountStore();
+        if (accountStore.token) {
+            const token: string = getToken();
+            (config.headers as AxiosHeaders).set(tokenName, token, true);
+        }
+        return config;
+    },
+    (error) => {
+        // Do something with request error
+        console.log(error); // for debug
+        Promise.reject(error);
+    }
+);
+
+// respone拦截器
+service.interceptors.response.use(
+    (response) => response,
+    /**
+     * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
+     * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
+     */
+    //  const res = response.data;
+    //     if (res.code !== 20000) {
+    //       Message({
+    //         message: res.message,
+    //         type: 'error',
+    //         duration: 5 * 1000
+    //       });
+    //       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+    //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+    //         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+    //           confirmButtonText: '重新登录',
+    //           cancelButtonText: '取消',
+    //           type: 'warning'
+    //         }).then(() => {
+    //           store.dispatch('FedLogOut').then(() => {
+    //             location.reload();// 为了重新实例化vue-router对象 避免bug
+    //           });
+    //         })
+    //       }
+    //       return Promise.reject('error');
+    //     } else {
+    //       return response.data;
+    //     }
+    (err) => {
+        const responseData = err.response.data;
+        console.log("err", responseData); // for debug
+        return Promise.reject(responseData);
+    }
+);
+
+export default service;
--- a/src/views/ChangePassword/ChangePassword.vue
+++ b/src/views/ChangePassword/ChangePassword.vue
@@ -0,0 +1,149 @@
+<template>
+    <div class="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="otp">
+                        <n-input placeholder="验证码" v-model:value="model.otp" />
+                    </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-form-item path="password">
+                <n-input placeholder="密码" v-model:value="model.password" type="password" />
+            </n-form-item>
+
+            <n-form-item path="reenteredPassword">
+                <n-input placeholder="重复密码" v-model:value="model.reenteredPassword" type="password" />
+            </n-form-item>
+
+            <n-button
+                type="primary"
+                size="large"
+                style="width: 100%; margin-top: 8px; margin-bottom: 8px"
+                @click="handleBtnChangePasswordClick"
+            >
+                修改密码
+            </n-button>
+        </n-form>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import type { FormInst, FormItemRule, FormRules } from "naive-ui";
+import type { ChangePasswordByOTPCommand } from "@/type/commands/ChangePasswordCommand";
+
+const formRef = ref<FormInst | null>(null);
+const model = ref<ChangePasswordByOTPCommand>({
+    principal: "",
+    otp: "",
+    password: "",
+    reenteredPassword: "",
+});
+
+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 handleBtnChangePasswordClick(e: MouseEvent) {
+    e.preventDefault();
+    formRef.value?.validate((errors) => {
+        if (!errors) {
+            window.$message.success("验证成功");
+        } else {
+            console.log(errors);
+            window.$message.error("验证失败");
+        }
+    });
+}
+
+function handleBtnGetOTPClick() {
+    console.log("handleBtnGetOTPClick");
+}
+</script>
+
+<style scoped>
+.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>
--- a/src/views/HomeView/HomeView.vue
+++ b/src/views/HomeView/HomeView.vue
@@ -1,86 +0,0 @@
-<template>
-    <n-layout position="absolute" style="top: 0; right: 0; bottom: 0; left: 0">
-        <n-layout-header position="absolute" :inverted="dark" :style="invertedStyle" :bordered="!dark">
-            <Logo :collapsed="false" style="width: 224px" />
-            <div class="header">
-                <n-button type="primary" @click="dark = !dark">{{ dark ? '亮色' : '暗色' }}</n-button>
-                颐和园路
-            </div>
-        </n-layout-header>
-        <n-layout
-            has-sider
-            position="absolute"
-            style="right: 0; bottom: 0; left: 0"
-            :style="dark ? { top: '72px' } : { top: '73px' }"
-        >
-            <n-layout-sider
-                :bordered="!dark"
-                :collapsed-width="64"
-                :width="256"
-                show-trigger="arrow-circle"
-                collapse-mode="width"
-                :collapsed="collapsed"
-                @collapse="collapsed = true"
-                @expand="collapsed = false"
-                :native-scrollbar="false"
-                :inverted="dark"
-                :style="invertedStyle"
-            >
-                <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 />
-                平山道<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 Logo from './components/Logo.vue'
-import SiderMenu from './components/SiderMenu.vue'
-
-export default defineComponent({
-    name: 'HomeView',
-    components: {
-        Logo,
-        SiderMenu,
-    },
-    setup() {
-        const collapsed = ref(false)
-        const dark = ref(true)
-        const invertedStyle = computed(() => {
-            return dark.value ? { '--n-color': '#282c34' } : { '--n-color': '#ffffff' }
-        })
-        return {
-            activeKey: ref<string | null>(null),
-            collapsed,
-            dark,
-            invertedStyle,
-        }
-    },
-})
-</script>
-
-<style scoped>
-:root {
-    --sider-width: 256px;
-}
-
-.n-layout-header {
-    display: flex;
-}
-
-.n-layout-header > .header {
-    padding: 24px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 256px;
-}
-</style>
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -0,0 +1,12 @@
+<template>
+    <LoginByPassword v-if="loginByPassword" @toLoginByOTP="loginByPassword = false" />
+    <LoginByOTP v-else @toLoginByPassword="loginByPassword = true" />
+</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>
--- a/src/views/Login/components/LoginByOTP.vue
+++ b/src/views/Login/components/LoginByOTP.vue
@@ -0,0 +1,175 @@
+<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 x-gap="8" :cols="24">
+                <n-gi :span="15">
+                    <n-form-item path="otp">
+                        <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" @click="$router.push('/register')">
+                    免费注册
+                </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 type { LoginByOTPCommand } from "@/type/commands/LoginCommands";
+
+const formRef = ref<FormInst | null>(null);
+const rPasswordFormItemRef = ref<FormItemInst | null>(null);
+const model = ref<LoginByOTPCommand>({
+    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) {
+            window.$message.success("验证成功");
+        } else {
+            console.log(errors);
+            window.$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>
--- a/src/views/Login/components/LoginByPassword.vue
+++ b/src/views/Login/components/LoginByPassword.vue
@@ -0,0 +1,145 @@
+<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"
+                    @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"
+                    @click="$router.push('/changePassword')"
+                >
+                    忘记密码
+                </n-button>
+                <n-button class="txt-btn" text style="margin-left: 16px" @click="$router.push('/register')">
+                    免费注册
+                </n-button>
+            </div>
+        </n-form>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import type { FormInst } from "naive-ui";
+import { PrincipalType, regexConsts } from "@/type/PrincipalType";
+import type { LoginByPasswordCommand } from "@/type/commands/LoginCommands";
+import { loginByPassword } from "@/api/account";
+
+const formRef = ref<FormInst | null>(null);
+const model = ref<LoginByPasswordCommand>({
+    principal: "",
+    password: "",
+    rememberMe: false,
+    principalType: null,
+});
+
+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 {
+        window.$message.error("请输入用户名、电子邮箱或手机号");
+        return;
+    }
+
+    if (!regexConsts.password.test(password)) {
+        window.$message.error("输入的密码不符合要求");
+        return;
+    }
+
+    loginByPassword(model.value)
+        .then(({ data }) => {
+            if (data.status === 2000000) {
+                window.$message.success("登录成功");
+            } else {
+                Promise.reject(data);
+            }
+        })
+        .catch((err) => {
+            window.$message.error(err.message);
+        });
+}
+</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>
--- a/src/views/LoginView/LoginView.vue
+++ b/src/views/LoginView/LoginView.vue
@@ -1,5 +0,0 @@
-<template>
-    <h1>This is login page</h1>
-</template>
-
-<script lang="ts" setup></script>
--- a/src/views/Register/Register.vue
+++ b/src/views/Register/Register.vue
@@ -0,0 +1,123 @@
+<template>
+    <div class="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="emailOrMobilePhone">
+                <n-input placeholder="邮箱地址 / 手机号" v-model:value="model.emailOrMobilePhone" />
+            </n-form-item>
+
+            <n-form-item path="username">
+                <n-input placeholder="用户名" v-model:value="model.username" />
+            </n-form-item>
+
+            <n-grid y-gap="24" :cols="24">
+                <n-gi :span="15">
+                    <n-form-item path="code">
+                        <n-input placeholder="验证码" v-model:value="model.code" />
+                    </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-form-item path="password">
+                <n-input placeholder="密码" v-model:value="model.password" type="password" />
+            </n-form-item>
+
+            <n-form-item path="reenteredPassword">
+                <n-input placeholder="重复密码" v-model:value="model.reenteredPassword" type="password" />
+            </n-form-item>
+
+            <n-grid :cols="2" style="margin-top: 16px">
+                <n-gi>
+                    <n-button type="primary" style="width: 72px" @click="handleBtnChangePasswordClick">
+                        注册
+                    </n-button>
+                </n-gi>
+                <n-gi>
+                    <div style="display: flex; justify-content: flex-end">
+                        <span style="line-height: 32px">已有帐号？</span>
+                        <n-button
+                            class="txt-btn"
+                            style="line-height: 32px"
+                            text
+                            @click="$router.push('/login')"
+                        >
+                            前往登录
+                        </n-button>
+                    </div>
+                </n-gi>
+            </n-grid>
+        </n-form>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import type { FormInst } from "naive-ui";
+import type { RegisterCommand } from "@/type/commands/RegisterCommand";
+
+const formRef = ref<FormInst | null>(null);
+const model = ref<RegisterCommand>({
+    emailOrMobilePhone: "",
+    username: "",
+    code: "",
+    password: "",
+    reenteredPassword: "",
+});
+
+function handleBtnChangePasswordClick(e: MouseEvent) {
+    e.preventDefault();
+    console.log(formRef.value);
+}
+
+function handleBtnGetOTPClick() {
+    console.log("handleBtnGetOTPClick");
+}
+</script>
+
+<style scoped>
+.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>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,17 +1,17 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from "node:url";

-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";

 // https://vitejs.dev/config/
 export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url)),
+            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },
    server: {
        port: 8888,
    },
-})
+});
Author	SHA1	Message	Date
ZhouXY108	bc1a557dd4	修改 RegisterCommand。	2022-12-30 17:52:36 +08:00
ZhouXY108	f467cc9203	注册页面、修改密码页面。	2022-12-30 17:43:10 +08:00
ZhouXY108	7841e706f6	commit code.	2022-12-30 01:56:26 +08:00
ZhouXY108	d81542921b	commit codes.	2022-12-29 17:53:22 +08:00
ZhouXY108	d52055a0ae	创建登录页面。	2022-12-29 00:37:02 +08:00
				`@@ -0,0 +1 @@`
				`VITE_BASE_API=http://api.plusone.zhouxy.xyz:8108`