refactor(components): 重构登录功能并添加 LinkCard 组件

- 注释掉 CustomLogin.vue 中的 fetch 请求，直接使用 setToken 进行登录
- 新增 LinkCard.js 模型文件，用于创建链接卡片组件
- 重构 HomeView.vue，使用新的 LinkCard 组件替换原有的 moduleCard 类
- 在 fetchInterceptor.js 中添加 console.log，用于调试输出修改后的数据

src/components/CustomLogin.vue

@@ -12,23 +12,25 @@ const formState = reactive({
 
 const onfinish = async () => {
   try {
-    const response = await fetch('http://localhost:3000/login', {
+    // const response = await fetch('http://localhost:3000/login', {
-      method: 'POST',
+    //   method: 'POST',
-      cache: 'default',
+    //   cache: 'default',
-      headers: {
+    //   headers: {
-        'Content-Type': 'application/json; charset=utf-8'
+    //     'Content-Type': 'application/json; charset=utf-8'
-      },
+    //   },
-      credentials: 'include',
+    //   credentials: 'include',
-      body: JSON.stringify(formState)
+    //   body: JSON.stringify(formState)
-    })
+    // })
 
-    if (response.ok) {
+    // if (response.ok) {
-      console.log(`formState.account:${formState.account}`)
+    //   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('/')
-    } else {
-      console.error('Login failed', response.statusText)
-    }
   } catch (e) {
     console.log(e)
   }

src/models/LinkCard.js

@@ -0,0 +1,7 @@
+export function createLinkCard(title, content, link) {
+  return {
+    title,
+    content,
+    link
+  }
+}

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,

src/views/HomeView.vue

@@ -1,42 +1,27 @@
 <script setup>
-class moduleCard {
+import { createLinkCard } from '../models/LinkCard'
-  title
-  content
-  url
-
-  constructor(title, content, url) {
-    this.title = title
-    this.content = content
-    this.url = url
-  }
-}
 
 const modules = [
   {
     title: '',
     content: [
-      new moduleCard('gitea', '', 'http://10.120.20.137:3000/'),
+      createLinkCard('gitea', '', 'http://10.120.20.137:3000/'),
-      new moduleCard('pve', '', 'http://10.120.20.15:8006/'),
+      createLinkCard('pve', '', 'http://10.120.20.15:8006/'),
-      new moduleCard('zero tier', '', 'https://zerotier.yulinling.asia/'),
+      createLinkCard('zero tier', '', 'https://zerotier.yulinling.asia/'),
-      new moduleCard('gitea', '', 'https://gitea.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' }">
+    <ul>
-      <a-card
+      <a-card v-for="(item, index) in item.content" :key="index" hoverable class="card_style">
-        v-for="(item, index) in item.content"
-        :key="index"
-        :style="{ width: 18 + '%', margin: '10px' }"
-        hoverable
-      >
         <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>