diff --git a/api/user.js b/api/user.js
index e69de29..1e3143d 100644
--- a/api/user.js
+++ b/api/user.js
@@ -0,0 +1,28 @@
+export default function handler(request, response) {
+  // 用户登录模拟
+  if (request.method === 'POST') {
+    const { username, password } = request.body;
+    if (username === 'admin' && password === '123456') {
+      response.status(200).json({
+        code: 200,
+        data: {
+          token: 'admin',
+          username: 'admin',
+          avatar: 'https://admin.leelaa.cn/pwa-1024x1024.png',
+          roles: ['admin'],
+        },
+        message: '登录成功',
+      });
+    } else {
+      response.status(200).json({
+        code: 500,
+        message: '账号或密码错误',
+      });
+    }
+  }else {
+    response.status(200).json({
+      code: 500,
+      message: '请求方法错误',
+    });
+  }
+}
diff --git a/package.json b/package.json
index c00def4..82490d2 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vueuse/core": "^10.9.0",
     "autoprefixer": "^10.4.19",
-    "daisyui": "^4.10.4",
+    "daisyui": "^4.10.5",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.25.0",
     "pinia-plugin-persistedstate": "^3.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d3f8b5d..5fbe2cb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -55,8 +55,8 @@ importers:
         specifier: ^10.4.19
         version: 10.4.19(postcss@8.4.38)
       daisyui:
-        specifier: ^4.10.4
-        version: 4.10.4(postcss@8.4.38)
+        specifier: ^4.10.5
+        version: 4.10.5(postcss@8.4.38)
       eslint:
         specifier: ^8.57.0
         version: 8.57.0
@@ -1413,8 +1413,8 @@ packages:
     resolution: {integrity: sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  daisyui@4.10.4:
-    resolution: {integrity: sha512-B2zCnUPL96aO0GJUWNCIKotmM9n6aFw7F+2kuhd+D3piOIJGH7tgXJX84Jsfkl8pfftK+iOnlKxNv35EYil4VQ==}
+  daisyui@4.10.5:
+    resolution: {integrity: sha512-eOFUo5yEg0WV+3VK2C/+/XN1WH/OhFV4HzrMG5etAzcnB2hPg3aoR7gF1ZUpIv+b5MglLuAVMgub0rv660EgZg==}
     engines: {node: '>=16.9.0'}
 
   data-view-buffer@1.0.1:
@@ -1475,8 +1475,8 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  electron-to-chromium@1.4.754:
-    resolution: {integrity: sha512-7Kr5jUdns5rL/M9wFFmMZAgFDuL2YOnanFH4OI4iFzUqyh3XOL7nAGbSlSMZdzKMIyyTpNSbqZsWG9odwLeKvA==}
+  electron-to-chromium@1.4.755:
+    resolution: {integrity: sha512-9nop+3jZxSHIxe1EzEUcjDXzK+3qOv3fY5w0sE88nIZUntbv1aXWmoxGWlklX5XSO4txCpLssWkUSh8RQPovBg==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -4178,7 +4178,7 @@ snapshots:
   browserslist@4.23.0:
     dependencies:
       caniuse-lite: 1.0.30001615
-      electron-to-chromium: 1.4.754
+      electron-to-chromium: 1.4.755
       node-releases: 2.0.14
       update-browserslist-db: 1.0.14(browserslist@4.23.0)
 
@@ -4276,7 +4276,7 @@ snapshots:
 
   culori@3.3.0: {}
 
-  daisyui@4.10.4(postcss@8.4.38):
+  daisyui@4.10.5(postcss@8.4.38):
     dependencies:
       css-selector-tokenizer: 0.8.0
       culori: 3.3.0
@@ -4339,7 +4339,7 @@ snapshots:
     dependencies:
       jake: 10.8.7
 
-  electron-to-chromium@1.4.754: {}
+  electron-to-chromium@1.4.755: {}
 
   emoji-regex@8.0.0: {}
 
diff --git a/src/api/index.js b/src/api/index.js
index fe82601..f341e05 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -18,3 +18,13 @@ export const request = async (url, options = {}) => {
 };
 
 export const chat = (text) => request(`api/ai?text=${text}`);
+
+export const login = (postData) => {
+  return request(`api/user`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(postData),
+  });
+};
diff --git a/src/pages/aboutPage.vue b/src/pages/aboutPage.vue
index 18cb8ac..fd4b90f 100644
--- a/src/pages/aboutPage.vue
+++ b/src/pages/aboutPage.vue
@@ -1,43 +1,37 @@
 <script setup>
-import { dependencies, devDependencies } from '../../package.json';
+import { dependencies, devDependencies } from "../../package.json";
+const goToPage = (url) => {
+  window.open(`https://www.npmjs.com/package/${url}`, "_blank");
+};
 </script>
 
 <template>
-  <div class="overflow-x-auto p-4 flex mt-4">
-    <div class="card w-96 bg-base-100 shadow-xl mr-4">
-      <h1 class="m-2">运行依赖</h1>
-      <table class="table">
-        <thead>
-          <tr>
-            <th>依赖库</th>
-            <th>版本</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, index) in dependencies" :key="index">
-            <th>{{ index }}</th>
-            <td>{{ item }}</td>
-          </tr>
-        </tbody>
-      </table>
+  <div class="card glass card-body">
+    <div class="card-title">运行依赖</div>
+    <div class="flex flex-wrap">
+      <button
+        class="btn mt-3 mr-3 btn-accent"
+        v-for="(item, index) in dependencies"
+        @click="goToPage(index)"
+        :key="index"
+      >
+        {{ index }}
+        <div class="badge">{{ item }}</div>
+      </button>
     </div>
-
-    <div class="card w-96 bg-base-100 shadow-xl">
-      <h1 class="m-2">开发依赖</h1>
-      <table class="table">
-        <thead>
-          <tr>
-            <th>依赖库</th>
-            <th>版本</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, index) in devDependencies" :key="index">
-            <th>{{ index }}</th>
-            <td>{{ item }}</td>
-          </tr>
-        </tbody>
-      </table>
+  </div>
+  <div class="card glass card-body mt-5">
+    <div class="card-title">开发依赖</div>
+    <div class="flex flex-wrap">
+      <button
+        class="btn mt-3 mr-3"
+        @click="goToPage(index)"
+        v-for="(item, index) in devDependencies"
+        :key="index"
+      >
+        {{ index }}
+        <div class="badge">{{ item }}</div>
+      </button>
     </div>
   </div>
 </template>
diff --git a/src/pages/loginPage.vue b/src/pages/loginPage.vue
index 25965c2..7bbfe20 100644
--- a/src/pages/loginPage.vue
+++ b/src/pages/loginPage.vue
@@ -2,28 +2,39 @@
   <div class="hero min-h-screen bg-base-200">
     <div class="hero-content flex-col lg:flex-row w-full">
       <div class="text-center lg:text-left w-full">
-        <h1 class="text-5xl font-bold">后台管理系统</h1>
-        <p class="py-6">欢迎来使用后台管理系统</p>
+        <h1 class="text-5xl font-bold">传统修仙后台管理系统</h1>
+        <p class="py-6">欢迎来使用，拥抱开源。</p>
       </div>
       <div class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100 max-w-sm">
         <form class="card-body">
           <div class="form-control">
             <label class="label">
-              <span class="label-text">Email</span>
+              <span class="label-text">用户名</span>
             </label>
-            <input type="email" placeholder="email" class="input input-bordered" required />
+            <input
+              placeholder="请输入用户名"
+              v-model="username"
+              class="input input-bordered"
+              required
+            />
           </div>
           <div class="form-control">
             <label class="label">
-              <span class="label-text">Password</span>
+              <span class="label-text">密码</span>
             </label>
-            <input type="password" placeholder="password" class="input input-bordered" required />
-            <label class="label">
-              <a href="#" class="label-text-alt link link-hover">Forgot password?</a>
+            <input
+              type="password"
+              placeholder="请输入密码"
+              v-model="password"
+              class="input input-bordered"
+              required
+            />
+            <label class="label flex-row-reverse">
+              <a href="#" class="label-text-alt link link-hover">忘记密码?</a>
             </label>
           </div>
           <div class="form-control mt-6">
-            <button class="btn btn-primary" @click="login">Login</button>
+            <button class="btn btn-primary" @click="loginFun">登录</button>
           </div>
         </form>
       </div>
@@ -32,17 +43,31 @@
 </template>
 
 <script setup>
-import router from '@/router/index.js';
-import { ref } from 'vue';
+import { login } from "@/api";
+import router from "@/router/index.js";
+import { ref } from "vue";
 
-const username = ref('');
-const password = ref('');
+const username = ref("admin");
+const password = ref("123456");
 
-const login = () => {
-  // 在这里编写登录逻辑，可以发送登录请求到后端验证用户名和密码
-  console.log('用户名：', username.value);
-  console.log('密码：', password.value);
-  router.replace({name:'home'})
+const loginFun = async () => {
+  if (!username.value) {
+    return alert("请输入用户名");
+  }
+  if (!password.value) {
+    return alert("请输入密码");
+  }
+  const postData = {
+    username: username.value,
+    password: password.value,
+  };
+  const res = await login(postData);
+  console.log(res);
+  if (res.code !== 200) {
+    return alert(res.message);
+  } else {
+    router.replace({ name: "home" });
+  }
 };
 </script>
 
diff --git a/src/router/index.js b/src/router/index.js
index 83d38de..32b96e2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -37,7 +37,7 @@ const routes = [
       show: false,
       title: '登录',
     },
-    component: import('../pages/loginPage.vue'),
+    component: () => import('../pages/loginPage.vue'),
   },
   ...charts,
   ...results,
diff --git a/src/router/modules/charts.js b/src/router/modules/charts.js
index 0fb1507..dd63d2d 100644
--- a/src/router/modules/charts.js
+++ b/src/router/modules/charts.js
@@ -38,21 +38,23 @@ export default [
         meta: {
           title: '数据集',
         },
-      },{
-        path:'/radar',
-        name:'ChartRadar',
-        component:()=>import('@/pages/charts/ChartRadar.vue'),
-        meta:{
-          title:'雷达图'
-        }
-      },{
-        path:'/scatter',
-        name:'ChartScatter',
-        component:()=>import('@/pages/charts/ChartScatter.vue'),
-        meta:{
-          title:'散点图'
-        }
-      }
+      },
+      {
+        path: '/radar',
+        name: 'ChartRadar',
+        component: () => import('@/pages/charts/ChartRadar.vue'),
+        meta: {
+          title: '雷达图',
+        },
+      },
+      {
+        path: '/scatter',
+        name: 'ChartScatter',
+        component: () => import('@/pages/charts/ChartScatter.vue'),
+        meta: {
+          title: '散点图',
+        },
+      },
     ],
   },
 ];