Lee dev (#27)

* 优化聊天界面

* 更新依赖

* 修改base url

* 优化接口

* 优化登录页

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: '请求方法错误',
+    });
+  }
+}

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",

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),
+  });
+};

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>

src/pages/#Page.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>
 

src/router/index.js

@@ -37,7 +37,7 @@ const routes = [
       show: false,
       title: '登录',
     },
-    component: import('../pages/#Page.vue'),
+    component: () => import('../pages/#Page.vue'),
   },
   ...charts,
   ...results,

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: '散点图',
+        },
+      },
     ],
   },
 ];