diff --git a/.env b/.env
new file mode 100644
index 0000000..e4d9a04
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VITE_TOKEN_NAME=plusone
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..e92978f
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_BASE_API=http://localhost:8108
diff --git a/.env.prod b/.env.prod
new file mode 100644
index 0000000..70dbc55
--- /dev/null
+++ b/.env.prod
@@ -0,0 +1 @@
+VITE_BASE_API=http://api.plusone.zhouxy.xyz:8108
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index f57cc3b..3ca2150 100644
--- 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",
     },
-}
+};
diff --git a/.prettierrc.json b/.prettierrc.json
index e16d48f..5740008 100644
--- 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"
-}
\ No newline at end of file
+}
diff --git a/env.d.ts b/env.d.ts
index 11f02fe..3f0c03f 100644
--- 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;
+}
diff --git a/src/App.vue b/src/App.vue
index 928da52..0bf0fed 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,21 @@
 <template>
     <n-config-provider :theme-overrides="themeOverrides">
-        <n-message-provider>
-            <router-view />
-        </n-message-provider>
+        <router-view />
     </n-config-provider>
 </template>
 
 <script setup lang="ts">
-import { NConfigProvider, type GlobalThemeOverrides } from 'naive-ui'
+import { NConfigProvider, type GlobalThemeOverrides } from "naive-ui";
 
 const themeOverrides: GlobalThemeOverrides = {
     common: {
-        primaryColor: '#6777ef',
-        primaryColorHover: 'rgba(103, 119, 239, 0.8)',
-        primaryColorPressed: '#515dbc',
-        borderRadius: '4px',
+        primaryColor: "#6777ef",
+        primaryColorHover: "rgba(103, 119, 239, 0.8)",
+        primaryColorPressed: "#515dbc",
+        borderRadius: "4px",
     },
     Button: {
-        fontSizeLarge: '18px',
+        fontSizeLarge: "18px",
     },
     // Select: {
     //     peers: {
@@ -26,5 +24,5 @@ const themeOverrides: GlobalThemeOverrides = {
     //         },
     //     },
     // },
-}
+};
 </script>
diff --git a/src/api/account.ts b/src/api/account.ts
new file mode 100644
index 0000000..8ef46fb
--- /dev/null
+++ 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,
+    });
+}
diff --git a/src/layouts/MainPage/MainPage.vue b/src/layouts/MainPage/MainPage.vue
index 272e9d7..5eec5ec 100644
--- a/src/layouts/MainPage/MainPage.vue
+++ b/src/layouts/MainPage/MainPage.vue
@@ -3,7 +3,7 @@
         <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>
+                <n-button type="primary" @click="dark = !dark">{{ dark ? "亮色" : "暗色" }}</n-button>
                 颐和园路
             </div>
         </n-layout-header>
@@ -36,31 +36,31 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue'
+import { defineComponent, ref, computed } from "vue";
 
-import Logo from './components/Logo.vue'
-import SiderMenu from './components/SiderMenu.vue'
+import Logo from "./components/Logo.vue";
+import SiderMenu from "./components/SiderMenu.vue";
 
 export default defineComponent({
-    name: 'MainPage',
+    name: "MainPage",
     components: {
         Logo,
         SiderMenu,
     },
     setup() {
-        const collapsed = ref(false)
-        const dark = ref(true)
+        const collapsed = ref(false);
+        const dark = ref(true);
         const invertedStyle = computed(() => {
-            return dark.value ? { '--n-color': '#282c34' } : { '--n-color': '#ffffff' }
-        })
+            return dark.value ? { "--n-color": "#282c34" } : { "--n-color": "#ffffff" };
+        });
         return {
             activeKey: ref<string | null>(null),
             collapsed,
             dark,
             invertedStyle,
-        }
+        };
     },
-})
+});
 </script>
 
 <style scoped>
diff --git a/src/layouts/MainPage/components/Logo.vue b/src/layouts/MainPage/components/Logo.vue
index 89869f9..010e0e9 100644
--- 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>
diff --git a/src/layouts/MainPage/components/MenuVO.ts b/src/layouts/MainPage/components/MenuVO.ts
index 7eeed30..820d3a2 100644
--- 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),
-        })
+        });
 }
diff --git a/src/layouts/MainPage/components/SiderMenu.vue b/src/layouts/MainPage/components/SiderMenu.vue
index f7d02c5..d738905 100644
--- 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: '404',
+                        name: "404",
                         params: {
-                            lang: 'zh-CN',
+                            lang: "zh-CN",
                         },
                     },
                 },
-                { default: () => '回家' }
+                { default: () => "回家" }
             ),
-        key: '404',
-        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.name
-})
+    return route.name;
+});
 </script>
diff --git a/src/main.ts b/src/main.ts
index 3313e93..8c88133 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,18 +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/Lato.css";
 // 等宽字体
-import 'vfonts/FiraCode.css'
+import "vfonts/FiraCode.css";
 
 import {
     // create naive ui
     create,
+    // createDiscreteApi
+    createDiscreteApi,
     // component
     NButton,
     NLayout,
@@ -27,11 +29,10 @@ import {
     NInput,
     NGrid,
     NGridItem,
-    NMessageProvider,
     NCard,
     NCheckbox,
     NCheckboxGroup,
-} from 'naive-ui'
+} from "naive-ui";
 
 const naive = create({
     components: [
@@ -48,18 +49,29 @@ const naive = create({
         NInput,
         NGrid,
         NGridItem,
-        NMessageProvider,
         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;
diff --git a/src/router/index.ts b/src/router/index.ts
index 216f815..527dd02 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,28 +1,28 @@
-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 { 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";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     routes: [
         {
-            path: '/',
+            path: "/",
             component: MainPage,
             children: [
                 {
-                    path: '404',
-                    name: '404',
+                    path: "404",
+                    name: "404",
                     component: Page404,
                 },
             ],
         },
         {
-            path: '/login',
-            name: 'login',
+            path: "/login",
+            name: "login",
             component: Login,
         },
     ],
-})
+});
 
-export default router
+export default router;
diff --git a/src/stores/account.ts b/src/stores/account.ts
index 5aa58e0..7b78cbd 100644
--- 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 };
+});
diff --git a/src/type/PrincipalType.ts b/src/type/PrincipalType.ts
index 841ec9b..b833158 100644
--- a/src/type/PrincipalType.ts
+++ b/src/type/PrincipalType.ts
@@ -9,5 +9,5 @@ export const regexConsts = {
     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}$/,
-}
+    password: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\w\\!#$%&*+\-/=?^`{|}~@()[\]",.;':><]{8,32}$/,
+};
diff --git a/src/type/commands/LoginCommands.ts b/src/type/commands/LoginCommands.ts
new file mode 100644
index 0000000..b5b58d0
--- /dev/null
+++ 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;
+}
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
new file mode 100644
index 0000000..7e2a3af
--- /dev/null
+++ b/src/utils/auth.ts
@@ -0,0 +1,3 @@
+export function getToken(): string {
+    return "g9-wes78dufgbcn9oup7bc";
+}
diff --git a/src/utils/request.ts b/src/utils/request.ts
index e69de29..9800e2b 100644
--- 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;
diff --git a/src/views/ChangePassword/index.vue b/src/views/ChangePassword/ChangePassword.vue
similarity index 70%
rename from src/views/ChangePassword/index.vue
rename to src/views/ChangePassword/ChangePassword.vue
index 3608f68..f1cfff2 100644
--- a/src/views/ChangePassword/index.vue
+++ b/src/views/ChangePassword/ChangePassword.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import LoginByPassword from './components/LoginByPassword.vue'
-import LoginByOTP from './components/LoginByOTP.vue'
+import { ref } from "vue";
+import LoginByPassword from "./components/ChangePasswordByPassword.vue";
+import LoginByOTP from "./components/ChangePasswordByOTP.vue";
 
-const loginByPassword = ref(true)
+const loginByPassword = ref(true);
 </script>
 
 <style scoped>
diff --git a/src/views/ChangePassword/components/LoginByOTP.vue b/src/views/ChangePassword/components/ChangePasswordByOTP.vue
similarity index 83%
rename from src/views/ChangePassword/components/LoginByOTP.vue
rename to src/views/ChangePassword/components/ChangePasswordByOTP.vue
index 6fa5e7c..dcc6d43 100644
--- a/src/views/ChangePassword/components/LoginByOTP.vue
+++ b/src/views/ChangePassword/components/ChangePasswordByOTP.vue
@@ -81,24 +81,22 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
-import { useMessage } from 'naive-ui'
+import { ref } from "vue";
+import type { FormInst, FormItemInst, FormItemRule, FormRules } from "naive-ui";
 
 interface LoginByPasswordCommand {
-    principal: string
-    otp: string
-    rememberMe: boolean
+    principal: string;
+    otp: string;
+    rememberMe: boolean;
 }
 
-const formRef = ref<FormInst | null>(null)
-const rPasswordFormItemRef = ref<FormItemInst | null>(null)
-const message = useMessage()
+const formRef = ref<FormInst | null>(null);
+const rPasswordFormItemRef = ref<FormItemInst | null>(null);
 const model = ref<LoginByPasswordCommand>({
-    principal: '',
-    otp: '',
+    principal: "",
+    otp: "",
     rememberMe: false,
-})
+});
 
 const rules: FormRules = {
     principal: [
@@ -106,45 +104,45 @@ const rules: FormRules = {
             required: true,
             validator(rule: FormItemRule, value: string) {
                 if (!value) {
-                    return new Error('需要年龄')
+                    return new Error("需要年龄");
                 } else if (!/^\d*$/.test(value)) {
-                    return new Error('年龄应该为整数')
+                    return new Error("年龄应该为整数");
                 } else if (Number(value) < 18) {
-                    return new Error('年龄应该超过十八岁')
+                    return new Error("年龄应该超过十八岁");
                 }
-                return true
+                return true;
             },
-            trigger: ['input', 'blur'],
+            trigger: ["input", "blur"],
         },
     ],
     otp: [
         {
             required: true,
-            message: '请输入密码',
+            message: "请输入密码",
         },
     ],
-}
+};
 
 function handlePasswordInput() {
     if (model.value.rememberMe) {
-        rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
+        rPasswordFormItemRef.value?.validate({ trigger: "password-input" });
     }
 }
 
 function handleBtnLoginClick(e: MouseEvent) {
-    e.preventDefault()
+    e.preventDefault();
     formRef.value?.validate((errors) => {
         if (!errors) {
-            message.success('验证成功')
+            window.$message.success("验证成功");
         } else {
-            console.log(errors)
-            message.error('验证失败')
+            console.log(errors);
+            window.$message.error("验证失败");
         }
-    })
+    });
 }
 
 function handleBtnGetOTPClick() {
-    console.log('handleBtnGetOTPClick')
+    console.log("handleBtnGetOTPClick");
 }
 </script>
 
diff --git a/src/views/ChangePassword/components/LoginByPassword.vue b/src/views/ChangePassword/components/ChangePasswordByPassword.vue
similarity index 79%
rename from src/views/ChangePassword/components/LoginByPassword.vue
rename to src/views/ChangePassword/components/ChangePasswordByPassword.vue
index 6463a06..489b691 100644
--- a/src/views/ChangePassword/components/LoginByPassword.vue
+++ b/src/views/ChangePassword/components/ChangePasswordByPassword.vue
@@ -63,26 +63,24 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
-import { useMessage } from 'naive-ui'
-import type { PrincipalType } from '@/type/PrincipalType'
+import { ref } from "vue";
+import type { FormInst, FormItemInst, FormItemRule, FormRules } from "naive-ui";
+import type { PrincipalType } from "@/type/PrincipalType";
 
 interface LoginByPasswordCommand {
-    principal: string
-    password: string
-    rememberMe: boolean
-    principalType?: PrincipalType
+    principal: string;
+    password: string;
+    rememberMe: boolean;
+    principalType?: PrincipalType;
 }
 
-const formRef = ref<FormInst | null>(null)
-const rPasswordFormItemRef = ref<FormItemInst | null>(null)
-const message = useMessage()
+const formRef = ref<FormInst | null>(null);
+const rPasswordFormItemRef = ref<FormItemInst | null>(null);
 const model = ref<LoginByPasswordCommand>({
-    principal: '',
-    password: '',
+    principal: "",
+    password: "",
     rememberMe: false,
-})
+});
 
 const rules: FormRules = {
     principal: [
@@ -90,41 +88,41 @@ const rules: FormRules = {
             required: true,
             validator(rule: FormItemRule, value: string) {
                 if (!value) {
-                    return new Error('需要年龄')
+                    return new Error("需要年龄");
                 } else if (!/^\d*$/.test(value)) {
-                    return new Error('年龄应该为整数')
+                    return new Error("年龄应该为整数");
                 } else if (Number(value) < 18) {
-                    return new Error('年龄应该超过十八岁')
+                    return new Error("年龄应该超过十八岁");
                 }
-                return true
+                return true;
             },
-            trigger: ['input', 'blur'],
+            trigger: ["input", "blur"],
         },
     ],
     password: [
         {
             required: true,
-            message: '请输入密码',
+            message: "请输入密码",
         },
     ],
-}
+};
 
 function handlePasswordInput() {
     if (model.value.rememberMe) {
-        rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
+        rPasswordFormItemRef.value?.validate({ trigger: "password-input" });
     }
 }
 
 function handleBtnLoginClick(e: MouseEvent) {
-    e.preventDefault()
+    e.preventDefault();
     formRef.value?.validate((errors) => {
         if (!errors) {
-            message.success('验证成功')
+            window.$message.success("验证成功");
         } else {
-            console.log(errors)
-            message.error('验证失败')
+            console.log(errors);
+            window.$message.error("验证失败");
         }
-    })
+    });
 }
 </script>
 
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 3608f68..1a2dc37 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import LoginByPassword from './components/LoginByPassword.vue'
-import LoginByOTP from './components/LoginByOTP.vue'
+import { ref } from "vue";
+import LoginByPassword from "./components/LoginByPassword.vue";
+import LoginByOTP from "./components/LoginByOTP.vue";
 
-const loginByPassword = ref(true)
+const loginByPassword = ref(true);
 </script>
 
 <style scoped>
diff --git a/src/views/Login/components/LoginByOTP.vue b/src/views/Login/components/LoginByOTP.vue
index 6fa5e7c..667c014 100644
--- a/src/views/Login/components/LoginByOTP.vue
+++ b/src/views/Login/components/LoginByOTP.vue
@@ -38,7 +38,7 @@
                             class="txt-btn"
                             @click="handleBtnGetOTPClick"
                             size="large"
-                            style="width： 100%"
+                            style="width: 100%"
                         >
                             获取验证码
                         </n-button>
@@ -81,24 +81,17 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
-import { useMessage } from 'naive-ui'
+import { ref } from "vue";
+import type { FormInst, FormItemInst, FormItemRule, FormRules } from "naive-ui";
+import type { LoginByOTPCommand } from "@/type/commands/LoginCommands";
 
-interface LoginByPasswordCommand {
-    principal: string
-    otp: string
-    rememberMe: boolean
-}
-
-const formRef = ref<FormInst | null>(null)
-const rPasswordFormItemRef = ref<FormItemInst | null>(null)
-const message = useMessage()
-const model = ref<LoginByPasswordCommand>({
-    principal: '',
-    otp: '',
+const formRef = ref<FormInst | null>(null);
+const rPasswordFormItemRef = ref<FormItemInst | null>(null);
+const model = ref<LoginByOTPCommand>({
+    principal: "",
+    otp: "",
     rememberMe: false,
-})
+});
 
 const rules: FormRules = {
     principal: [
@@ -106,45 +99,45 @@ const rules: FormRules = {
             required: true,
             validator(rule: FormItemRule, value: string) {
                 if (!value) {
-                    return new Error('需要年龄')
+                    return new Error("需要年龄");
                 } else if (!/^\d*$/.test(value)) {
-                    return new Error('年龄应该为整数')
+                    return new Error("年龄应该为整数");
                 } else if (Number(value) < 18) {
-                    return new Error('年龄应该超过十八岁')
+                    return new Error("年龄应该超过十八岁");
                 }
-                return true
+                return true;
             },
-            trigger: ['input', 'blur'],
+            trigger: ["input", "blur"],
         },
     ],
     otp: [
         {
             required: true,
-            message: '请输入密码',
+            message: "请输入密码",
         },
     ],
-}
+};
 
 function handlePasswordInput() {
     if (model.value.rememberMe) {
-        rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
+        rPasswordFormItemRef.value?.validate({ trigger: "password-input" });
     }
 }
 
 function handleBtnLoginClick(e: MouseEvent) {
-    e.preventDefault()
+    e.preventDefault();
     formRef.value?.validate((errors) => {
         if (!errors) {
-            message.success('验证成功')
+            window.$message.success("验证成功");
         } else {
-            console.log(errors)
-            message.error('验证失败')
+            console.log(errors);
+            window.$message.error("验证失败");
         }
-    })
+    });
 }
 
 function handleBtnGetOTPClick() {
-    console.log('handleBtnGetOTPClick')
+    console.log("handleBtnGetOTPClick");
 }
 </script>
 
diff --git a/src/views/Login/components/LoginByPassword.vue b/src/views/Login/components/LoginByPassword.vue
index 0a5b7ae..e215762 100644
--- a/src/views/Login/components/LoginByPassword.vue
+++ b/src/views/Login/components/LoginByPassword.vue
@@ -56,54 +56,58 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
-import { useMessage } from 'naive-ui'
-import { PrincipalType, regexConsts } from '@/type/PrincipalType'
+import { ref } from "vue";
+import type { FormInst, FormItemInst } from "naive-ui";
+import { PrincipalType, regexConsts } from "@/type/PrincipalType";
+import type { LoginByPasswordCommand } from "@/type/commands/LoginCommands";
+import { loginByPassword } from "@/api/account";
 
-interface LoginByPasswordCommand {
-    principal: string
-    password: string
-    rememberMe: boolean
-    principalType: PrincipalType | null
-}
-
-const formRef = ref<FormInst | null>(null)
-const rPasswordFormItemRef = ref<FormItemInst | null>(null)
-const message = useMessage()
+const formRef = ref<FormInst | null>(null);
+const rPasswordFormItemRef = ref<FormItemInst | null>(null);
 const model = ref<LoginByPasswordCommand>({
-    principal: '',
-    password: '',
+    principal: "",
+    password: "",
     rememberMe: false,
     principalType: null,
-})
+});
 
 function handlePasswordInput() {
     if (model.value.rememberMe) {
-        rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
+        rPasswordFormItemRef.value?.validate({ trigger: "password-input" });
     }
 }
 
 function handleBtnLoginClick(e: MouseEvent) {
-    e.preventDefault()
-    const principal = model.value.principal
-    const password = model.value.password
+    e.preventDefault();
+    const principal = model.value.principal;
+    const password = model.value.password;
     if (regexConsts.email.test(principal)) {
-        model.value.principalType = PrincipalType.EMAIL
+        model.value.principalType = PrincipalType.EMAIL;
     } else if (regexConsts.mobilePhone.test(principal)) {
-        model.value.principalType = PrincipalType.MOBILE_PHONE
+        model.value.principalType = PrincipalType.MOBILE_PHONE;
     } else if (regexConsts.username.test(principal)) {
-        model.value.principalType = PrincipalType.USERNAME
+        model.value.principalType = PrincipalType.USERNAME;
     } else {
-        message.error('请输入用户名、电子邮箱或手机号')
-        return
+        window.$message.error("请输入用户名、电子邮箱或手机号");
+        return;
     }
 
     if (!regexConsts.password.test(password)) {
-        message.error('输入的密码不符合要求')
+        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>
 
diff --git a/vite.config.ts b/vite.config.ts
index ed5fc1f..0f5d5c6 100644
--- 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,
     },
-})
+});