From 410e5d81b86daf130605407b9e86e9f94dec8a4e Mon Sep 17 00:00:00 2001
From: rsgltzyd <rsgltzyd@hotmail.com>
Date: Sun, 11 May 2025 22:41:15 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=8A=9F=E8=83=BD=E5=B9=B6=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=20LinkCard=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 注释掉 CustomLogin.vue 中的 fetch 请求，直接使用 setToken 进行登录
- 新增 LinkCard.js 模型文件，用于创建链接卡片组件
- 重构 HomeView.vue，使用新的 LinkCard 组件替换原有的 moduleCard 类
- 在 fetchInterceptor.js 中添加 console.log，用于调试输出修改后的数据
---
 src/components/CustomLogin.vue | 34 ++++++++++++------------
 src/models/LinkCard.js         |  7 +++++
 src/utils/fetchInterceptor.js  |  2 ++
 src/views/HomeView.vue         | 48 ++++++++++++++++------------------
 4 files changed, 50 insertions(+), 41 deletions(-)
 create mode 100644 src/models/LinkCard.js

diff --git a/src/components/CustomLogin.vue b/src/components/CustomLogin.vue
index dceb389..ffdbe5c 100644
--- a/src/components/CustomLogin.vue
+++ b/src/components/CustomLogin.vue
@@ -12,23 +12,25 @@ const formState = reactive({
 
 const onfinish = async () => {
   try {
-    const response = await fetch('http://localhost:3000/login', {
-      method: 'POST',
-      cache: 'default',
-      headers: {
-        'Content-Type': 'application/json; charset=utf-8'
-      },
-      credentials: 'include',
-      body: JSON.stringify(formState)
-    })
+    // const response = await fetch('http://localhost:3000/login', {
+    //   method: 'POST',
+    //   cache: 'default',
+    //   headers: {
+    //     'Content-Type': 'application/json; charset=utf-8'
+    //   },
+    //   credentials: 'include',
+    //   body: JSON.stringify(formState)
+    // })
 
-    if (response.ok) {
-      console.log(`formState.account:${formState.account}`)
-      setToken(formState.account)
-      await router.push('/')
-    } else {
-      console.error('Login failed', response.statusText)
-    }
+    // if (response.ok) {
+    //   console.log(`formState.account:${formState.account}`)
+    //   setToken(formState.account)
+    //   await router.push('/')
+    // } else {
+    //   console.error('Login failed', response.statusText)
+    // }
+    setToken(formState.account)
+    await router.push('/')
   } catch (e) {
     console.log(e)
   }
diff --git a/src/models/LinkCard.js b/src/models/LinkCard.js
new file mode 100644
index 0000000..d76f313
--- /dev/null
+++ b/src/models/LinkCard.js
@@ -0,0 +1,7 @@
+export function createLinkCard(title, content, link) {
+  return {
+    title,
+    content,
+    link
+  }
+}
diff --git a/src/utils/fetchInterceptor.js b/src/utils/fetchInterceptor.js
index 1d53096..1a3afe4 100644
--- a/src/utils/fetchInterceptor.js
+++ b/src/utils/fetchInterceptor.js
@@ -32,6 +32,8 @@ window.fetch = async (input, init = {}) => {
     intercepted: 'true'
   }
 
+  console.log(modifiedData)
+
   return new Response(JSON.stringify(modifiedData), {
     status: response.status,
     statusText: response.statusText,
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 32432cb..ba8dcd0 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,42 +1,27 @@
 <script setup>
-class moduleCard {
-  title
-  content
-  url
-
-  constructor(title, content, url) {
-    this.title = title
-    this.content = content
-    this.url = url
-  }
-}
+import { createLinkCard } from '../models/LinkCard'
 
 const modules = [
   {
     title: '',
     content: [
-      new moduleCard('gitea', '', 'http://10.120.20.137:3000/'),
-      new moduleCard('pve', '', 'http://10.120.20.15:8006/'),
-      new moduleCard('zero tier', '', 'https://zerotier.yulinling.asia/'),
-      new moduleCard('gitea', '', 'https://gitea.yulinling.asia/')
+      createLinkCard('gitea', '', 'http://10.120.20.137:3000/'),
+      createLinkCard('pve', '', 'http://10.120.20.15:8006/'),
+      createLinkCard('zero tier', '', 'https://zerotier.yulinling.asia/'),
+      createLinkCard('gitea', '', 'https://gitea.yulinling.asia/')
     ]
   }
 ]
 </script>
 
 <template>
-  <div v-for="(item, index) in modules" :key="index" :style="{ width: 100 + '%' }">
+  <div v-for="(item, index) in modules" :key="index" class="card_div">
     <a-typography-title>{{ item.title }}</a-typography-title>
-    <ul :style="{ display: 'flex', flexWrap: 'wrap', margin: 'auto', justifyContent: 'center' }">
-      <a-card
-        v-for="(item, index) in item.content"
-        :key="index"
-        :style="{ width: 18 + '%', margin: '10px' }"
-        hoverable
-      >
+    <ul>
+      <a-card v-for="(item, index) in item.content" :key="index" hoverable class="card_style">
         <a-card-meta :title="item.title">
           <template #description>
-            <a-typography-link :href="item.url" target="_blank">{{ item.url }}</a-typography-link>
+            <a-typography-link :href="item.link" target="_blank">{{ item.link }}</a-typography-link>
           </template>
         </a-card-meta>
       </a-card>
@@ -44,4 +29,17 @@ const modules = [
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+
+.card_div {
+  width: 100%;
+}
+
+ul {
+  list-style: none;
+}
+.card_style {
+  width: 90%;
+  margin: 10px auto;
+}
+</style>