From 2d619ac69f3083fefc7fe8dee1ed54470346a195 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 15 Aug 2025 01:39:54 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构 CustomLogin 组件，添加表单校验规则和登录按钮禁用状态
- 更新 auth.js，将 TokenKey 改为 accessToken
- 重写 TestView 组件，添加模拟数据请求和分页功能
---
 src/components/CustomLogin.vue |  68 +++++++++++---------
 src/utils/auth.js              |   2 +-
 src/views/TestView.vue         | 111 +++++++++++++--------------------
 3 files changed, 84 insertions(+), 97 deletions(-)

diff --git a/src/components/CustomLogin.vue b/src/components/CustomLogin.vue
index acc8c4e..042f226 100644
--- a/src/components/CustomLogin.vue
+++ b/src/components/CustomLogin.vue
@@ -1,88 +1,98 @@
 <script setup>
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
-import { computed, reactive } from 'vue'
+import { reactive, computed } from 'vue'
 import router from '@/router/index.js'
 import { setToken } from '@/utils/auth.js'
 import { message } from 'ant-design-vue'
 
+// 表单状态
 const formState = reactive({
   username: '',
   password: '',
-  rememberMe: false
+  remember: false
 })
 
+// 表单校验规则
+const rules = {
+  username: [{ required: true, message: '请输入账号' }],
+  password: [{ required: true, message: '请输入密码' }]
+}
+
+// 登录按钮禁用状态
+const isDisabled = computed(() => !formState.username || !formState.password)
+
+// 表单提交
 const onFinish = async () => {
   try {
     const response = await fetch('/api/auth/login', {
       method: 'POST',
-      cache: 'default',
-      headers: {
-        'Content-Type': 'application/json; charset=utf-8'
-      },
+      headers: { 'Content-Type': 'application/json; charset=utf-8' },
       credentials: 'include',
       body: JSON.stringify(formState)
     })
 
-    const data = await response.json() // 解析响应体
+    const data = await response.json()
 
     if (response.ok && data.code === 200) {
-      console.log(`formState.username: ${formState.username}`)
-      setToken(formState.username)
+      setToken(data?.data?.accessToken)
       message.success('登录成功')
       await router.push('/')
     } else {
       message.error(data.message || '登录失败')
-      console.error('Login failed', data)
+      console.error('Login failed:', data)
     }
-  } catch (e) {
+  } catch (error) {
     message.error('接口请求异常')
-    console.error(e)
+    console.error(error)
   }
 }
 
-const onFinishFailed = () => {
-  console.log('onFinishFailed')
+// 表单提交失败
+const onFinishFailed = (errorInfo) => {
+  console.warn('表单验证失败:', errorInfo)
 }
-
-const disabled = computed(() => {
-  return !formState.username || !formState.password
-})
 </script>
 
 <template>
-  <a-card class="login-container" :hoverable="true">
+  <a-card class="login-container" hoverable>
     <a-form
       :model="formState"
+      :rules="rules"
       name="login"
-      class="login-form"
       autocomplete="off"
       @finish="onFinish"
       @finishFailed="onFinishFailed"
+      class="login-form"
     >
-      <a-form-item name="username" :rules="[{ required: true, message: '请输入账号' }]">
+      <a-form-item name="username">
         <a-input v-model:value="formState.username" placeholder="请输入账号">
           <template #prefix>
-            <UserOutlined class="site-form-item-icon" style="margin-right: 8px"></UserOutlined>
+            <UserOutlined class="site-form-item-icon" />
           </template>
         </a-input>
       </a-form-item>
 
-      <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
+      <a-form-item name="password">
         <a-input-password v-model:value="formState.password" placeholder="请输入密码">
           <template #prefix>
-            <LockOutlined class="site-form-item-icon" style="margin-right: 8px"></LockOutlined>
+            <LockOutlined class="site-form-item-icon" />
           </template>
         </a-input-password>
       </a-form-item>
 
-      <a-form-item name="remember" style="width: 100%">
+      <a-form-item>
         <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
-        <a class="login-form-forgot" href="">忘记密码?</a>
+        <a class="login-form-forgot" href="#">忘记密码?</a>
       </a-form-item>
 
-      <a-form-item style="width: 100%">
-        <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button"
-          >登录
+      <a-form-item>
+        <a-button
+          :disabled="isDisabled"
+          type="primary"
+          html-type="submit"
+          class="login-form-button"
+        >
+          登录
         </a-button>
       </a-form-item>
     </a-form>
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 3425ddf..d899e25 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -1,6 +1,6 @@
 import Cookies from 'js-cookie'
 
-const TokenKey = 'account'
+const TokenKey = 'accessToken'
 
 export function getToken() {
   return Cookies.get(TokenKey)
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 9ef872c..ed26b06 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1,80 +1,57 @@
 <script setup>
-import { ref } from 'vue'
-import ButtonCounter from '@/components/ButtonCounter.vue'
-import BlogPost from '@/components/BlogPost.vue'
-import AlertBox from '@/components/AlertBox.vue'
-import HomeView from './HomeView.vue'
-import GameView from './GameView.vue'
-import CustomMarkDown from '@/components/CustomMarkDown.vue'
-import CustomModal from '@/components/CustomModal.vue'
-import CustomTreeItem from '@/components/CustomTreeItem.vue'
+import { ref, reactive, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
 
-const posts = ref([
-  { id: 1, title: 'test01' },
-  { id: 2, title: 'test02' },
-  { id: 3, title: 'test03' }
-])
+const tableData = ref([])
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0
+})
 
-const postFontSize = ref(1)
-
-const currentTab = ref('HomeView')
-
-const tabs = {
-  HomeView,
-  GameView
+// 模拟后端数据请求
+const fetchTableData = async () => {
+  try {
+    // 这里用假数据模拟请求
+    const totalItems = 105
+    const items = Array.from({ length: pagination.pageSize }, (_, i) => ({
+      key: (pagination.current - 1) * pagination.pageSize + i + 1,
+      name: `用户 ${(pagination.current - 1) * pagination.pageSize + i + 1}`
+    }))
+    tableData.value = items
+    pagination.total = totalItems
+  } catch (e) {
+    message.error('数据加载失败')
+  }
 }
 
-const showModal = ref(false)
+// 页码或条数变化
+const handlePageChange = (page, size) => {
+  pagination.current = page
+  pagination.pageSize = size
+  fetchTableData()
+}
 
-const modle = ref({
-  name: 'Root',
-  children: [
-    { name: 'Child 1', children: [] },
-    { name: 'Child 2', children: [{ name: 'Grandchild 1', children: [] }] }
-  ]
-})
+// 初始加载
+onMounted(fetchTableData)
 </script>
 
 <template>
-  <h1>this is test page</h1>
-  <ButtonCounter title="test01" />
+  <a-table :dataSource="tableData" :pagination="false" rowKey="key">
+    <a-table-column title="序号" dataIndex="key" />
+    <a-table-column title="姓名" dataIndex="name" />
+  </a-table>
 
-  <div :style="{ fontSize: postFontSize + 'em' }">
-    <BlogPost
-      v-for="post of posts"
-      :key="post.id"
-      :id="post.id"
-      :title="post.title"
-      @enlarge-text="postFontSize += 0.1"
-    ></BlogPost>
-  </div>
-
-  <AlertBox> test </AlertBox>
-
-  <div class="demo">
-    <button v-for="(_, tab) in tabs" :key="tab" @click="currentTab = tab">
-      {{ tab }}
-    </button>
-    <KeepAlive>
-      <component :is="tabs[currentTab]" />
-    </KeepAlive>
-  </div>
-
-  <div class="editor">
-    <CustomMarkDown />
-  </div>
-
-  <button id="show-modal" @click="showModal = true">Show Modal</button>
-
-  <Teleport to="body">
-    <CustomModal :show="showModal" @close="showModal = false">
-      <template #header>
-        <h3 style="color: #42b983">Custom Header</h3>
-      </template>
-    </CustomModal>
-  </Teleport>
-
-  <CustomTreeItem :module="modle" />
+  <a-pagination
+    v-model:current="pagination.current"
+    :page-size="pagination.pageSize"
+    :total="pagination.total"
+    show-size-changer
+    show-quick-jumper
+    @change="handlePageChange"
+    @showSizeChange="handlePageChange"
+    style="margin-top: 16px; text-align: right"
+  />
 </template>
 
 <style scoped>