修改 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 · 2022-12-28 17:40:30 +08:00
46 changed files with 1374 additions and 462 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,15 +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",
+    },
+};
--- 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,85 +1,28 @@
-<script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-    <header>
-        <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-        <div class="wrapper">
-            <HelloWorld msg="You did it!" />
-
-            <nav>
-                <RouterLink to="/">Home</RouterLink>
-                <RouterLink to="/about">About</RouterLink>
-            </nav>
-        </div>
-    </header>
-
-    <RouterView />
+    <n-config-provider :theme-overrides="themeOverrides">
+        <router-view />
+    </n-config-provider>
 </template>

-<style scoped>
-header {
-    line-height: 1.5;
-    max-height: 100vh;
-}
+<script setup lang="ts">
+import { NConfigProvider, type GlobalThemeOverrides } from "naive-ui";

-.logo {
-    display: block;
-    margin: 0 auto 2rem;
-}
-
-nav {
-    width: 100%;
-    font-size: 12px;
-    text-align: center;
-    margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-    color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-    background-color: transparent;
-}
-
-nav a {
-    display: inline-block;
-    padding: 0 1rem;
-    border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-    border: 0;
-}
-
-@media (min-width: 1024px) {
-    header {
-        display: flex;
-        place-items: center;
-        padding-right: calc(var(--section-gap) / 2);
-    }
-
-    .logo {
-        margin: 0 2rem 0 0;
-    }
-
-    header .wrapper {
-        display: flex;
-        place-items: flex-start;
-        flex-wrap: wrap;
-    }
-
-    nav {
-        text-align: left;
-        margin-left: -1rem;
-        font-size: 1rem;
-
-        padding: 1rem 0;
-        margin-top: 1rem;
-    }
-}
-</style>
+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/assets/base.css
+++ b/src/assets/base.css
@@ -8,7 +8,7 @@
    --vt-c-black-soft: #222222;
    --vt-c-black-mute: #282828;

-    --vt-c-indigo: #2c3e50;
+    --vt-c-indigo: #333639;

    --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
    --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
@@ -19,10 +19,7 @@
    --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
    --vt-c-text-dark-1: var(--vt-c-white);
    --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}

-/* semantic color variables for this project */
-:root {
    --color-background: var(--vt-c-white);
    --color-background-soft: var(--vt-c-white-soft);
    --color-background-mute: var(--vt-c-white-mute);
@@ -50,6 +47,7 @@
    }
 }

+/* 
 *,
 *::before,
 *::after {
@@ -58,6 +56,7 @@
    position: relative;
    font-weight: normal;
 }
+*/

 body {
    min-height: 100vh;
@@ -71,4 +70,4 @@ body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
-}
+}
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,35 +1,11 @@
@import './base.css';

 #app {
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 2rem;
-
-    font-weight: normal;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
 }
-
-a,
-.green {
-    text-decoration: none;
-    color: hsla(160, 100%, 37%, 1);
-    transition: 0.4s;
-}
-
-@media (hover: hover) {
-    a:hover {
-        background-color: hsla(160, 100%, 37%, 0.2);
-    }
-}
-
-@media (min-width: 1024px) {
-    body {
-        display: flex;
-        place-items: center;
-    }
-
-    #app {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        padding: 0 2rem;
-    }
-}
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-    msg: string
-}>()
-</script>
-
-<template>
-    <div class="greetings">
-        <h1 class="green">{{ msg }}</h1>
-        <h3>
-            You’ve successfully created a project with
-            <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
-            <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
-        </h3>
-    </div>
-</template>
-
-<style scoped>
-h1 {
-    font-weight: 500;
-    font-size: 2.6rem;
-    top: -10px;
-}
-
-h3 {
-    font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-    text-align: center;
-}
-
-@media (min-width: 1024px) {
-    .greetings h1,
-    .greetings h3 {
-        text-align: left;
-    }
-}
-</style>
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-</script>
-
-<template>
-    <WelcomeItem>
-        <template #icon>
-            <DocumentationIcon />
-        </template>
-        <template #heading>Documentation</template>
-
-        Vue’s
-        <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-        provides you with all information you need to get started.
-    </WelcomeItem>
-
-    <WelcomeItem>
-        <template #icon>
-            <ToolingIcon />
-        </template>
-        <template #heading>Tooling</template>
-
-        This project is served and bundled with
-        <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-        recommended IDE setup is
-        <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
-        <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If you need
-        to test your components and web pages, check out
-        <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
-        <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
-
-        <br />
-
-        More instructions are available in <code>README.md</code>.
-    </WelcomeItem>
-
-    <WelcomeItem>
-        <template #icon>
-            <EcosystemIcon />
-        </template>
-        <template #heading>Ecosystem</template>
-
-        Get official tools and libraries for your project:
-        <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-        <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-        <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-        <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If you
-        need more resources, we suggest paying
-        <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-        a visit.
-    </WelcomeItem>
-
-    <WelcomeItem>
-        <template #icon>
-            <CommunityIcon />
-        </template>
-        <template #heading>Community</template>
-
-        Got stuck? Ask your question on
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official Discord
-        server, or
-        <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-            >StackOverflow</a
-        >. You should also subscribe to
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow the
-        official
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-        twitter account for latest news in the Vue world.
-    </WelcomeItem>
-
-    <WelcomeItem>
-        <template #icon>
-            <SupportIcon />
-        </template>
-        <template #heading>Support Vue</template>
-
-        As an independent project, Vue relies on community backing for its sustainability. You can help us by
-        <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-    </WelcomeItem>
-</template>
--- a/src/components/WelcomeItem.vue
+++ b/src/components/WelcomeItem.vue
@@ -1,86 +0,0 @@
-<template>
-    <div class="item">
-        <i>
-            <slot name="icon"></slot>
-        </i>
-        <div class="details">
-            <h3>
-                <slot name="heading"></slot>
-            </h3>
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.item {
-    margin-top: 2rem;
-    display: flex;
-}
-
-.details {
-    flex: 1;
-    margin-left: 1rem;
-}
-
-i {
-    display: flex;
-    place-items: center;
-    place-content: center;
-    width: 32px;
-    height: 32px;
-
-    color: var(--color-text);
-}
-
-h3 {
-    font-size: 1.2rem;
-    font-weight: 500;
-    margin-bottom: 0.4rem;
-    color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-    .item {
-        margin-top: 0;
-        padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-    }
-
-    i {
-        top: calc(50% - 25px);
-        left: -26px;
-        position: absolute;
-        border: 1px solid var(--color-border);
-        background: var(--color-background);
-        border-radius: 8px;
-        width: 50px;
-        height: 50px;
-    }
-
-    .item:before {
-        content: ' ';
-        border-left: 1px solid var(--color-border);
-        position: absolute;
-        left: 0;
-        bottom: calc(50% + 25px);
-        height: calc(50% - 25px);
-    }
-
-    .item:after {
-        content: ' ';
-        border-left: 1px solid var(--color-border);
-        position: absolute;
-        left: 0;
-        top: calc(50% + 25px);
-        height: calc(50% - 25px);
-    }
-
-    .item:first-of-type:before {
-        display: none;
-    }
-
-    .item:last-of-type:after {
-        display: none;
-    }
-}
-</style>
--- a/src/components/icons/IconCommunity.vue
+++ b/src/components/icons/IconCommunity.vue
@@ -1,7 +0,0 @@
-<template>
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-        <path
-            d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
-        />
-    </svg>
-</template>
--- a/src/components/icons/IconDocumentation.vue
+++ b/src/components/icons/IconDocumentation.vue
@@ -1,7 +0,0 @@
-<template>
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
-        <path
-            d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
-        />
-    </svg>
-</template>
--- a/src/components/icons/IconEcosystem.vue
+++ b/src/components/icons/IconEcosystem.vue
@@ -1,7 +0,0 @@
-<template>
-    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
-        <path
-            d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
-        />
-    </svg>
-</template>
--- a/src/components/icons/IconSupport.vue
+++ b/src/components/icons/IconSupport.vue
@@ -1,7 +0,0 @@
-<template>
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-        <path
-            d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
-        />
-    </svg>
-</template>
--- a/src/components/icons/IconTooling.vue
+++ b/src/components/icons/IconTooling.vue
@@ -1,19 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        aria-hidden="true"
-        role="img"
-        class="iconify iconify--mdi"
-        width="24"
-        height="24"
-        preserveAspectRatio="xMidYMid meet"
-        viewBox="0 0 24 24"
-    >
-        <path
-            d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
-            fill="currentColor"
-        ></path>
-    </svg>
-</template>
--- 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
@@ -0,0 +1,42 @@
+<template>
+    <div class="logo" :style="style">
+        <img alt="logo" src="@/assets/logo.svg" />
+        <span class="title" v-if="!collapsed">Plusone Admin</span>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = defineProps({
+    collapsed: Boolean,
+    inverted: Boolean,
+});
+
+const style = computed(() => {
+    return props.inverted ? { color: "#ffffff" } : { color: "unset" };
+});
+</script>
+
+<style scoped>
+.logo {
+    padding: 20px 16px;
+    display: inline-flex;
+    background-color: var(--n-color);
+    color: #ffffff;
+    height: 32px;
+}
+
+.logo > img {
+    width: 32px;
+}
+
+.logo > .title {
+    font-size: 22px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    width: 100%;
+    font-weight: 500;
+}
+</style>
--- a/src/layouts/MainPage/components/MenuVO.ts
+++ b/src/layouts/MainPage/components/MenuVO.ts
@@ -0,0 +1,113 @@
+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 为 MENU_ITEM 且 path 以 http:// 或 https:// 开头则被识别为外链
+    path: string;
+    title: string;
+    icon: string;
+    hidden: boolean;
+    orderNumber: number;
+    status: number;
+    remarks: string;
+
+    // MENU_ITEM
+    component?: string;
+    cache?: boolean;
+    resource?: string;
+    actions?: ActionVO[];
+
+    // MENU_LIST
+    children?: MenuVO[];
+}
+
+interface ActionVO {
+    id: number;
+    identifier: string;
+    label: string;
+    value: string;
+}
+
+export enum MenuType {
+    MENU_LIST,
+    MENU_ITEM,
+}
+
+export function convertToRoutes(menuVOTree: MenuVO[]): RouteRecordRaw[] {
+    const routes: RouteRecordRaw[] = menuVOTree.map((menuVO) => {
+        if (menuVO.type == MenuType.MENU_LIST) {
+            return {
+                path: menuVO.path,
+                name: menuVO.name,
+                component:
+                    menuVO.component !== undefined ? () => import("@/views" + menuVO.component) : undefined,
+                children: convertToRoutes(menuVO.children ? menuVO.children : []),
+                meta: {
+                    title: menuVO.title,
+                    icon: menuVO.icon,
+                    hidden: menuVO.hidden,
+                    order: menuVO.orderNumber,
+                    status: menuVO.status,
+                    remarks: menuVO.remarks,
+                },
+            };
+        } else {
+            return {
+                path: menuVO.path,
+                name: menuVO.name,
+                component: import("@/views" + menuVO.component),
+                meta: {
+                    title: menuVO.title,
+                    icon: menuVO.icon,
+                    hidden: menuVO.hidden,
+                    order: menuVO.orderNumber,
+                    status: menuVO.status,
+                    remarks: menuVO.remarks,
+                },
+            };
+        }
+    });
+
+    return routes;
+}
+
+export function convertToMenuOptions(menuVOTree: MenuVO[]): MenuOption[] {
+    const menuOptions: MenuOption[] = menuVOTree.map((menuVO) => {
+        if (menuVO.type == MenuType.MENU_ITEM) {
+            return {
+                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)
+                        : () => 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;
+}
+
+const icons: Map<string, Component> = new Map(Object.entries(iconComponents));
+export function renderIcon(icon: string) {
+    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
@@ -0,0 +1,103 @@
+<template>
+    <n-menu
+        :inverted="inverted"
+        :style="style"
+        v-model:value="activeKey"
+        :collapsed="collapsed"
+        :collapsed-width="64"
+        :collapsed-icon-size="22"
+        :options="menuOptions"
+    />
+</template>
+
+<script setup lang="ts">
+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 * as iconComponents from "@vicons/fluent";
+
+const props = defineProps({
+    inverted: {
+        type: Boolean,
+        default: false,
+    },
+    invertedBackgroundColor: {
+        type: String,
+        default: "#282c34",
+    },
+    collapsed: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const style = computed(() => {
+    return props.inverted ? { "--n-color": props.invertedBackgroundColor } : { "--n-color": "#ffffff" };
+});
+
+// MenuOptions
+const icons: Map<string, Component> = new Map(Object.entries(iconComponents));
+
+function renderIcon(icon: string) {
+    const iconComponent = icons.get(icon);
+    return () =>
+        h(NIcon, null, {
+            default: () => h(iconComponent ? iconComponent : iconComponents.QuestionCircle20Regular),
+        });
+}
+
+const menuOptions: MenuOption[] = [
+    {
+        label: () =>
+            h(
+                RouterLink,
+                {
+                    to: {
+                        name: "404",
+                        params: {
+                            lang: "zh-CN",
+                        },
+                    },
+                },
+                { default: () => "回家" }
+            ),
+        key: "404",
+        icon: renderIcon("Home20Regular"),
+    },
+    {
+        label: () =>
+            h(
+                RouterLink,
+                {
+                    to: "/login",
+                },
+                { default: () => "上班" }
+            ),
+        key: "/login",
+        icon: renderIcon("Desktop20Regular"),
+    },
+    {
+        label: () =>
+            h(
+                "a",
+                {
+                    href: "http://zhouxy.xyz",
+                    target: "_blank",
+                    rel: "noopenner noreferrer",
+                },
+                "ZhouXY"
+            ),
+        key: "hear-the-wind-sing",
+        icon: renderIcon("BookOpen20Filled"),
+    },
+];
+
+// ActiveKey
+const route = useRoute();
+const activeKey = computed(() => {
+    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,27 +1,77 @@
-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,
-} from 'naive-ui'
+    NLayout,
+    NLayoutHeader,
+    NLayoutContent,
+    NLayoutFooter,
+    NLayoutSider,
+    NMenu,
+    NScrollbar,
+    NForm,
+    NFormItem,
+    NInput,
+    NGrid,
+    NGridItem,
+    NCard,
+    NCheckbox,
+    NCheckboxGroup,
+} from "naive-ui";

 const naive = create({
-    components: [NButton],
-})
+    components: [
+        NButton,
+        NLayout,
+        NLayoutHeader,
+        NLayoutContent,
+        NLayoutFooter,
+        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,23 +1,45 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.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: '/about',
-            name: 'about',
-            // route level code-splitting
-            // this generates a separate chunk (About.[hash].js) for this route
-            // which is lazy-loaded when the route is visited.
-            component: () => import('../views/AboutView.vue'),
+            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
@@ -0,0 +1,8 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+export const useAccountStore = defineStore("account", () => {
+    const token = ref<string | null>("0p978wqsetdgi9opw8e7s");
+
+    return { token };
+});
--- a/src/stores/counter.ts
+++ b/src/stores/counter.ts
@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-    const count = ref(0)
-    const doubleCount = computed(() => count.value * 2)
-    function increment() {
-        count.value++
-    }
-
-    return { count, doubleCount, increment }
-})
--- 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/404/Index.vue
+++ b/src/views/404/Index.vue
@@ -0,0 +1,5 @@
+<template>
+    <h1>404</h1>
+</template>
+
+<script setup lang="ts"></script>
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,15 +0,0 @@
-<template>
-    <div class="about">
-        <h1>This is an about page</h1>
-    </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-    .about {
-        min-height: 100vh;
-        display: flex;
-        align-items: center;
-    }
-}
-</style>
--- 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.vue
+++ b/src/views/HomeView.vue
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
-</script>
-
-<template>
-    <main>
-        <TheWelcome />
-    </main>
-</template>
--- 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/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/tsconfig.json
+++ b/tsconfig.json
@@ -2,8 +2,11 @@
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
+    "lib": ["ES2017"],
+    "target": "ES2015",
    "baseUrl": ".",
    "paths": {
+      "@": ["src"],
      "@/*": ["./src/*"]
    }
  },
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,14 +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
ZhouXY108	6d9fb30bbd	commit.	2022-12-28 17:40:30 +08:00
ZhouXY108	e49e21f841	调整布局。	2022-12-27 18:11:19 +08:00
ZhouXY108	2aa382b863	删除示例代码。	2022-12-27 13:42:47 +08:00
				`@@ -0,0 +1 @@`
				`VITE_BASE_API=http://api.plusone.zhouxy.xyz:8108`