From e42ac1273772a132d59224f174c887ca7dac8473 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 13:01:53 +0800
Subject: [PATCH 01/38] feat: detail information of specific club

---
 components/custom/club-card.vue |  8 +++--
 pages/clubs/[id].vue            | 64 +++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 pages/clubs/[id].vue

diff --git a/components/custom/club-card.vue b/components/custom/club-card.vue
index 382deb40..22918332 100644
--- a/components/custom/club-card.vue
+++ b/components/custom/club-card.vue
@@ -57,9 +57,11 @@ const props = defineProps({
       </div>
     </CardContent>
     <CardFooter>
-      <Button class="w-full">
-        详细信息
-      </Button>
+      <nuxt-link :to="`/clubs/${props.club.groups[0].C_GroupsID}`">
+        <Button class="w-full">
+          详细信息
+        </Button>
+      </nuxt-link>
     </CardFooter>
   </Card>
 </template>
diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
new file mode 100644
index 00000000..5d8168aa
--- /dev/null
+++ b/pages/clubs/[id].vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card'
+import json from '~/content/clubs.json'
+import type { Clubs } from '~/content/clubs'
+
+const clubs: Clubs = json as Clubs
+const route = useRoute()
+const id = route.params.id // Fetch current Club ID via route params
+
+// Filter clubs based on C_GroupsID
+// It just works ;)
+const filteredClubs = Object.values(clubs).flatMap(clubCategory =>
+    clubCategory.flatMap(club => club.groups.filter(group => group.C_GroupsID === id))
+)
+
+// Get the number of members in each group
+// const groupMemberCounts = filteredClubs.map(group => group.gmember.length)
+
+// This page requires login
+definePageMeta({
+  middleware: ['auth'],
+})
+</script>
+
+<template>
+  <div v-if="filteredClubs.length > 0">
+    <div v-for="group in filteredClubs" :key="group.C_GroupsID">
+      <!-- Add other properties you want to display -->
+      <div class="flex">
+      <Card class="w-3/4">
+        <CardHeader>
+          <CardTitle class="flex items-center gap-x-1">
+            {{ group.C_NameC }}
+          </CardTitle>
+          <CardDescription>{{ group.C_NameE }}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>{{ group.C_DescriptionC }}</p>
+          <br>
+          <p>{{ group.C_DescriptionE }}</p>
+        </CardContent>
+      </Card>
+      <Card class="w-1/4">
+        <CardHeader>
+          <CardTitle class="flex items-center gap-x-1">
+            社团属性
+          </CardTitle>
+          <CardDescription>Club Info</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>社团类型: {{ group.C_Category }}</p>
+<!--          <p>社团人数: {{ groupMemberCounts }}</p>-->
+        </CardContent>
+      </Card>
+      </div>
+    </div>
+  </div>
+  <p v-else>Sorry, but we didn't find anything here.</p>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file

From d399d273a3a1eac48da5baee25772cd2d2f23dde Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 13:14:03 +0800
Subject: [PATCH 02/38] style: make the code fit Lint style

---
 pages/clubs/[id].vue | 52 ++++++++++++++++++++++----------------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index 5d8168aa..523a6b0b 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -28,31 +28,31 @@ definePageMeta({
     <div v-for="group in filteredClubs" :key="group.C_GroupsID">
       <!-- Add other properties you want to display -->
       <div class="flex">
-      <Card class="w-3/4">
-        <CardHeader>
-          <CardTitle class="flex items-center gap-x-1">
-            {{ group.C_NameC }}
-          </CardTitle>
-          <CardDescription>{{ group.C_NameE }}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <p>{{ group.C_DescriptionC }}</p>
-          <br>
-          <p>{{ group.C_DescriptionE }}</p>
-        </CardContent>
-      </Card>
-      <Card class="w-1/4">
-        <CardHeader>
-          <CardTitle class="flex items-center gap-x-1">
-            社团属性
-          </CardTitle>
-          <CardDescription>Club Info</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <p>社团类型: {{ group.C_Category }}</p>
-<!--          <p>社团人数: {{ groupMemberCounts }}</p>-->
-        </CardContent>
-      </Card>
+        <Card class="w-3/4">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-x-1">
+              {{ group.C_NameC }}
+            </CardTitle>
+            <CardDescription>{{ group.C_NameE }}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p>{{ group.C_DescriptionC }}</p>
+            <br />
+            <p>{{ group.C_DescriptionE }}</p>
+          </CardContent>
+        </Card>
+        <Card class="w-1/4">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-x-1">
+              社团属性
+            </CardTitle>
+            <CardDescription>Club Info</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p>社团类型: {{ group.C_Category }}</p>
+            <!-- <p>社团人数: {{ groupMemberCounts }}</p> -->
+          </CardContent>
+        </Card>
       </div>
     </div>
   </div>
@@ -61,4 +61,4 @@ definePageMeta({
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>

From 10ca1f4a3de655ee78f5eedfaafdc932ff33bdef Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 13:16:33 +0800
Subject: [PATCH 03/38] style: make the code fit Lint style (again)

---
 pages/clubs/[id].vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index 523a6b0b..bcdbc77e 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -37,7 +37,7 @@ definePageMeta({
           </CardHeader>
           <CardContent>
             <p>{{ group.C_DescriptionC }}</p>
-            <br />
+            <br>
             <p>{{ group.C_DescriptionE }}</p>
           </CardContent>
         </Card>
@@ -56,7 +56,9 @@ definePageMeta({
       </div>
     </div>
   </div>
-  <p v-else>Sorry, but we didn't find anything here.</p>
+  <p v-else>
+    Sorry, but we didn't find anything here.
+  </p>
 </template>
 
 <style scoped>

From d18f441505dc72d53a03ee386fe5309450f36657 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 13:19:09 +0800
Subject: [PATCH 04/38] style: add trailing comma

---
 pages/clubs/[id].vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index bcdbc77e..ddcfa575 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -11,8 +11,8 @@ const id = route.params.id // Fetch current Club ID via route params
 // Filter clubs based on C_GroupsID
 // It just works ;)
 const filteredClubs = Object.values(clubs).flatMap(clubCategory =>
-    clubCategory.flatMap(club => club.groups.filter(group => group.C_GroupsID === id))
-)
+  clubCategory.flatMap(club => club.groups.filter(group => group.C_GroupsID === id))
+);
 
 // Get the number of members in each group
 // const groupMemberCounts = filteredClubs.map(group => group.gmember.length)

From 68ff9a141b44cb0b46bbbfe30d362d551f9b0d83 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 13:51:48 +0800
Subject: [PATCH 05/38] style: merge `filteredClubs` into 2 lines

---
 pages/clubs/[id].vue | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index ddcfa575..a938b14a 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -4,23 +4,22 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/com
 import json from '~/content/clubs.json'
 import type { Clubs } from '~/content/clubs'
 
-const clubs: Clubs = json as Clubs
-const route = useRoute()
-const id = route.params.id // Fetch current Club ID via route params
+const clubs: Clubs = json as Clubs;
+const route = useRoute();
+const id = route.params.id; // Fetch current Club ID via route params
 
 // Filter clubs based on C_GroupsID
 // It just works ;)
 const filteredClubs = Object.values(clubs).flatMap(clubCategory =>
-  clubCategory.flatMap(club => club.groups.filter(group => group.C_GroupsID === id))
-);
+  clubCategory.flatMap(club => club.groups.filter(group => group.C_GroupsID === id)));
 
 // Get the number of members in each group
-// const groupMemberCounts = filteredClubs.map(group => group.gmember.length)
+// const groupMemberCounts = filteredClubs.map(group => group.gmember.length);
 
 // This page requires login
 definePageMeta({
-  middleware: ['auth'],
-})
+  middleware: ['auth']
+});
 </script>
 
 <template>

From 9e32ccf4114985956bf2f20c7204006030fdc2c2 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 13:56:28 +0800
Subject: [PATCH 06/38] style: remove extra semicolons and fixed the missing
 trailing comma issue

---
 pages/clubs/[id].vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index a938b14a..106ac1bc 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -4,22 +4,22 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/com
 import json from '~/content/clubs.json'
 import type { Clubs } from '~/content/clubs'
 
-const clubs: Clubs = json as Clubs;
-const route = useRoute();
-const id = route.params.id; // Fetch current Club ID via route params
+const clubs: Clubs = json as Clubs
+const route = useRoute()
+const id = route.params.id // Fetch current Club ID via route params
 
 // Filter clubs based on C_GroupsID
 // It just works ;)
 const filteredClubs = Object.values(clubs).flatMap(clubCategory =>
-  clubCategory.flatMap(club => club.groups.filter(group => group.C_GroupsID === id)));
+  clubCategory.flatMap(club => club.groups.filter(group => group.C_GroupsID === id)))
 
 // Get the number of members in each group
-// const groupMemberCounts = filteredClubs.map(group => group.gmember.length);
+// const groupMemberCounts = filteredClubs.map(group => group.gmember.length)
 
 // This page requires login
 definePageMeta({
-  middleware: ['auth']
-});
+  middleware: ['auth'],
+})
 </script>
 
 <template>

From 307910aa41a8beaa414607a622f93b49c0bfe93d Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 14:07:10 +0800
Subject: [PATCH 07/38] style: remove useless comment

---
 pages/clubs/[id].vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index 106ac1bc..fe1f38cd 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -25,7 +25,6 @@ definePageMeta({
 <template>
   <div v-if="filteredClubs.length > 0">
     <div v-for="group in filteredClubs" :key="group.C_GroupsID">
-      <!-- Add other properties you want to display -->
       <div class="flex">
         <Card class="w-3/4">
           <CardHeader>

From ba2fe8430c6909d34b2b8782330c354d5a94afc5 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 14:07:22 +0800
Subject: [PATCH 08/38] docs: Clubs page retitled

---
 components/custom/sidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/custom/sidebar.vue b/components/custom/sidebar.vue
index 39061559..f1fe4c56 100644
--- a/components/custom/sidebar.vue
+++ b/components/custom/sidebar.vue
@@ -24,7 +24,7 @@ import { Button } from '@/components/ui/button'
           <NuxtLink to="/cas/clubs">
             <Button :variant="$route.name === 'cas-clubs' ? 'secondary' : 'ghost'" class="w-full justify-start">
               <Icon class="mr-2 h-4 w-4" name="material-symbols:grid-view-outline-rounded" />
-              我们的社团
+              社团列表
             </Button>
           </NuxtLink>
           <NuxtLink to="/cas/checkin">

From 87d2f5e57c334a05c170eac3d944f87c136f0edb Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 16:44:20 +0800
Subject: [PATCH 09/38] style: use `NuxtLink` instead of `nuxt-link`

---
 components/custom/club-card.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/custom/club-card.vue b/components/custom/club-card.vue
index 22918332..4c10385d 100644
--- a/components/custom/club-card.vue
+++ b/components/custom/club-card.vue
@@ -57,11 +57,11 @@ const props = defineProps({
       </div>
     </CardContent>
     <CardFooter>
-      <nuxt-link :to="`/clubs/${props.club.groups[0].C_GroupsID}`">
+      <NuxtLink :to="`/clubs/${props.club.groups[0].C_GroupsID}`" class="w-full">
         <Button class="w-full">
           详细信息
         </Button>
-      </nuxt-link>
+      </NuxtLink>
     </CardFooter>
   </Card>
 </template>

From b05e7fe244655d4dabd2fae7117d6ae3d2a1701d Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 16:56:48 +0800
Subject: [PATCH 10/38] fix: make the layout responsive by adjusting the custom
 mobile layout

---
 pages/clubs/[id].vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index fe1f38cd..f2f97563 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -25,21 +25,23 @@ definePageMeta({
 <template>
   <div v-if="filteredClubs.length > 0">
     <div v-for="group in filteredClubs" :key="group.C_GroupsID">
-      <div class="flex">
-        <Card class="w-3/4">
+      <div class="flex flex-col lg:flex-row lg:space-x-2">
+        <Card class="lg:w-3/4 w-full">
           <CardHeader>
             <CardTitle class="flex items-center gap-x-1">
               {{ group.C_NameC }}
             </CardTitle>
+
             <CardDescription>{{ group.C_NameE }}</CardDescription>
           </CardHeader>
           <CardContent>
             <p>{{ group.C_DescriptionC }}</p>
-            <br>
-            <p>{{ group.C_DescriptionE }}</p>
+            <!-- Don't show the English Description until i18n is completed -->
+            <!-- <br> -->
+            <!-- <p>{{ group.C_DescriptionE }}</p> -->
           </CardContent>
         </Card>
-        <Card class="w-1/4">
+        <Card class="lg:w-1/4 w-full mt-4 lg:mt-0">
           <CardHeader>
             <CardTitle class="flex items-center gap-x-1">
               社团属性

From 83a1be134e0d856c1fcb347e7f508d3e540f81be Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 16:59:44 +0800
Subject: [PATCH 11/38] =?UTF-8?q?feat:=20show=20`=E6=9A=82=E6=97=A0?=
 =?UTF-8?q?=E7=AE=80=E4=BB=8B`=20while=20there's=20no=20description=20for?=
 =?UTF-8?q?=20certain=20clubs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/clubs/[id].vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index f2f97563..6d182fce 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -35,10 +35,10 @@ definePageMeta({
             <CardDescription>{{ group.C_NameE }}</CardDescription>
           </CardHeader>
           <CardContent>
-            <p>{{ group.C_DescriptionC }}</p>
+            <p>{{ group.C_DescriptionC ? group.C_DescriptionC : '暂无简介 ;-(' }}</p>
             <!-- Don't show the English Description until i18n is completed -->
             <!-- <br> -->
-            <!-- <p>{{ group.C_DescriptionE }}</p> -->
+            <!-- <p>{{ group.C_DescriptionE ? group.C_DescriptionE : 'There\'s no description here ;-(' }}</p> -->
           </CardContent>
         </Card>
         <Card class="lg:w-1/4 w-full mt-4 lg:mt-0">

From 8382bc3a6c17c57e209880903755f5846541ca83 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 17:54:53 +0800
Subject: [PATCH 12/38] feat: new function `cleanHTML()`

---
 components/custom/cleanHTML.d.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 components/custom/cleanHTML.d.ts

diff --git a/components/custom/cleanHTML.d.ts b/components/custom/cleanHTML.d.ts
new file mode 100644
index 00000000..45726295
--- /dev/null
+++ b/components/custom/cleanHTML.d.ts
@@ -0,0 +1,7 @@
+export function cleanHTML(content: string): string;
+
+// Define
+export function cleanHTML(content: string): string {
+  return content.replace(/<script[^>]*>([\s\S]*?)<\/script>/gmi, '')
+      .replace(/<style[^>]*>([\s\S]*?)<\/style>/gmi, '');
+}

From 0e0181cedb917a46cfed789c7e45f8082aadab98 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 17:55:33 +0800
Subject: [PATCH 13/38] refactor: use `cleanHTML` in order to clean <script>
 and <style> tags

---
 components/custom/club-card.vue | 7 +++++--
 pages/clubs/[id].vue            | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/custom/club-card.vue b/components/custom/club-card.vue
index 4c10385d..38af7fc2 100644
--- a/components/custom/club-card.vue
+++ b/components/custom/club-card.vue
@@ -4,6 +4,7 @@ import type { Club } from '~/content/clubs'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { cn } from '@/lib/utils'
+import { cleanHTML } from '~/components/custom/cleanHTML.d.ts';
 import Badge from '~/components/ui/badge/Badge.vue'
 
 const props = defineProps({
@@ -12,6 +13,8 @@ const props = defineProps({
     required: true,
   },
 })
+
+const Description_C = cleanHTML(props.club.groups[0].C_DescriptionC)
 </script>
 
 <template>
@@ -44,8 +47,8 @@ const props = defineProps({
     <CardContent class="grid gap-4">
       <div class=" flex items-center space-x-4 rounded-md">
         <div class="flex-1 space-y-1">
-          <ScrollArea v-if="props.club.groups[0].C_DescriptionC" class="text-sm h-32">
-            {{ props.club.groups[0].C_DescriptionC }}
+          <ScrollArea v-if="Description_C" class="text-sm h-32">
+            {{ Description_C }}
           </ScrollArea>
           <!-- idk why some clubs have no description -->
           <div v-else class="h-32 flex items-center">
diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index 6d182fce..eb3b3856 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card'
+import { cleanHTML } from '~/components/custom/cleanHTML.d.ts';
 import json from '~/content/clubs.json'
 import type { Clubs } from '~/content/clubs'
 
@@ -16,6 +17,8 @@ const filteredClubs = Object.values(clubs).flatMap(clubCategory =>
 // Get the number of members in each group
 // const groupMemberCounts = filteredClubs.map(group => group.gmember.length)
 
+const Description_C = cleanHTML(filteredClubs[0].C_DescriptionC) || '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>';
+
 // This page requires login
 definePageMeta({
   middleware: ['auth'],
@@ -35,10 +38,10 @@ definePageMeta({
             <CardDescription>{{ group.C_NameE }}</CardDescription>
           </CardHeader>
           <CardContent>
-            <p>{{ group.C_DescriptionC ? group.C_DescriptionC : '暂无简介 ;-(' }}</p>
+            <p v-html="Description_C"></p>
             <!-- Don't show the English Description until i18n is completed -->
             <!-- <br> -->
-            <!-- <p>{{ group.C_DescriptionE ? group.C_DescriptionE : 'There\'s no description here ;-(' }}</p> -->
+            <!-- <p v-html="cleanDescription(group.C_DescriptionE)"></p> -->
           </CardContent>
         </Card>
         <Card class="lg:w-1/4 w-full mt-4 lg:mt-0">

From b42c072d999c215d54011d804d29b010fbedbea6 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 17:58:08 +0800
Subject: [PATCH 14/38] style: remove extra semicolon and spaces

---
 components/custom/cleanHTML.d.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/custom/cleanHTML.d.ts b/components/custom/cleanHTML.d.ts
index 45726295..22c9e6d5 100644
--- a/components/custom/cleanHTML.d.ts
+++ b/components/custom/cleanHTML.d.ts
@@ -1,7 +1,7 @@
-export function cleanHTML(content: string): string;
+export function cleanHTML(content: string): string
 
 // Define
 export function cleanHTML(content: string): string {
   return content.replace(/<script[^>]*>([\s\S]*?)<\/script>/gmi, '')
-      .replace(/<style[^>]*>([\s\S]*?)<\/style>/gmi, '');
+    .replace(/<style[^>]*>([\s\S]*?)<\/style>/gmi, '')
 }

From 5ae51e8c7c059ede933a8856a9555d000d3445c7 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 17:58:39 +0800
Subject: [PATCH 15/38] style: remove extra semicolon

---
 components/custom/club-card.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/custom/club-card.vue b/components/custom/club-card.vue
index 38af7fc2..cd4b4985 100644
--- a/components/custom/club-card.vue
+++ b/components/custom/club-card.vue
@@ -4,7 +4,7 @@ import type { Club } from '~/content/clubs'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { cn } from '@/lib/utils'
-import { cleanHTML } from '~/components/custom/cleanHTML.d.ts';
+import { cleanHTML } from '~/components/custom/cleanHTML.d.ts'
 import Badge from '~/components/ui/badge/Badge.vue'
 
 const props = defineProps({

From 1eeb48f201137a0b38f71cc3993ff2129293dfd0 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 17:59:47 +0800
Subject: [PATCH 16/38] style: remove extra semicolon and add self-closing on
 <p>

---
 pages/clubs/[id].vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index eb3b3856..de33bdc8 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card'
-import { cleanHTML } from '~/components/custom/cleanHTML.d.ts';
+import { cleanHTML } from '~/components/custom/cleanHTML.d.ts'
 import json from '~/content/clubs.json'
 import type { Clubs } from '~/content/clubs'
 
@@ -17,7 +17,7 @@ const filteredClubs = Object.values(clubs).flatMap(clubCategory =>
 // Get the number of members in each group
 // const groupMemberCounts = filteredClubs.map(group => group.gmember.length)
 
-const Description_C = cleanHTML(filteredClubs[0].C_DescriptionC) || '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>';
+const Description_C = cleanHTML(filteredClubs[0].C_DescriptionC) || '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>'
 
 // This page requires login
 definePageMeta({
@@ -38,7 +38,7 @@ definePageMeta({
             <CardDescription>{{ group.C_NameE }}</CardDescription>
           </CardHeader>
           <CardContent>
-            <p v-html="Description_C"></p>
+            <p v-html="Description_C" />
             <!-- Don't show the English Description until i18n is completed -->
             <!-- <br> -->
             <!-- <p v-html="cleanDescription(group.C_DescriptionE)"></p> -->

From 6e7f20f33b298b7ba708ee9c7b394c26d23bf1ac Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 18:26:12 +0800
Subject: [PATCH 17/38] feat: add hint to go back if the club does not exist

---
 pages/clubs/[id].vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index de33bdc8..4887a03c 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
+import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card'
 import { cleanHTML } from '~/components/custom/cleanHTML.d.ts'
 import json from '~/content/clubs.json'
@@ -17,7 +18,12 @@ const filteredClubs = Object.values(clubs).flatMap(clubCategory =>
 // Get the number of members in each group
 // const groupMemberCounts = filteredClubs.map(group => group.gmember.length)
 
-const Description_C = cleanHTML(filteredClubs[0].C_DescriptionC) || '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>'
+let Description_C;
+if (filteredClubs[0] && filteredClubs[0].C_DescriptionC) {
+  Description_C = cleanHTML(filteredClubs[0].C_DescriptionC) || '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>';
+} else {
+  Description_C = '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>';
+}
 
 // This page requires login
 definePageMeta({
@@ -60,7 +66,13 @@ definePageMeta({
     </div>
   </div>
   <p v-else>
-    Sorry, but we didn't find anything here.
+    <div class="flex flex-col justify-center h-1/2 text-center">
+      <h3 style="font-weight: bold;font-size: x-large">你当前访问的页面不存在，也许你应该考虑...</h3>
+      <br>
+      <NuxtLink :to="`/`" class="w-full">
+        <Button>回到主页</Button>
+      </NuxtLink>
+    </div>
   </p>
 </template>
 

From 6106e4ff147cc6c0ac20fa6d3166b8e39bfc0586 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 18:26:36 +0800
Subject: [PATCH 18/38] fix: return `''` if `!content`

---
 components/custom/cleanHTML.d.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/custom/cleanHTML.d.ts b/components/custom/cleanHTML.d.ts
index 22c9e6d5..03c6af24 100644
--- a/components/custom/cleanHTML.d.ts
+++ b/components/custom/cleanHTML.d.ts
@@ -2,6 +2,10 @@ export function cleanHTML(content: string): string
 
 // Define
 export function cleanHTML(content: string): string {
+  if (!content) {
+    return '';
+  }
+
   return content.replace(/<script[^>]*>([\s\S]*?)<\/script>/gmi, '')
     .replace(/<style[^>]*>([\s\S]*?)<\/style>/gmi, '')
 }

From 7e332dabd4b81a9e09672f104af0e8508e3bc362 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 18:32:13 +0800
Subject: [PATCH 19/38] style: merge into single line

---
 components/custom/cleanHTML.d.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/custom/cleanHTML.d.ts b/components/custom/cleanHTML.d.ts
index 03c6af24..c3ad6c78 100644
--- a/components/custom/cleanHTML.d.ts
+++ b/components/custom/cleanHTML.d.ts
@@ -2,9 +2,7 @@ export function cleanHTML(content: string): string
 
 // Define
 export function cleanHTML(content: string): string {
-  if (!content) {
-    return '';
-  }
+  if (!content) return ''
 
   return content.replace(/<script[^>]*>([\s\S]*?)<\/script>/gmi, '')
     .replace(/<style[^>]*>([\s\S]*?)<\/style>/gmi, '')

From b76ea25d3c3c3349729fedc013c8aa3b810e0909 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 18:41:42 +0800
Subject: [PATCH 20/38] style: fix Linter issues

---
 components/custom/cleanHTML.d.ts |  3 ++-
 pages/clubs/[id].vue             | 19 +++++++------------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/components/custom/cleanHTML.d.ts b/components/custom/cleanHTML.d.ts
index c3ad6c78..c4222ccc 100644
--- a/components/custom/cleanHTML.d.ts
+++ b/components/custom/cleanHTML.d.ts
@@ -2,7 +2,8 @@ export function cleanHTML(content: string): string
 
 // Define
 export function cleanHTML(content: string): string {
-  if (!content) return ''
+  if (!content)
+    return ''
 
   return content.replace(/<script[^>]*>([\s\S]*?)<\/script>/gmi, '')
     .replace(/<style[^>]*>([\s\S]*?)<\/style>/gmi, '')
diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index 4887a03c..39eb74d3 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -18,12 +18,11 @@ const filteredClubs = Object.values(clubs).flatMap(clubCategory =>
 // Get the number of members in each group
 // const groupMemberCounts = filteredClubs.map(group => group.gmember.length)
 
-let Description_C;
-if (filteredClubs[0] && filteredClubs[0].C_DescriptionC) {
-  Description_C = cleanHTML(filteredClubs[0].C_DescriptionC) || '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>';
-} else {
-  Description_C = '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>';
-}
+let Description_C
+if (filteredClubs[0] && filteredClubs[0].C_DescriptionC)
+  Description_C = cleanHTML(filteredClubs[0].C_DescriptionC) || '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>'
+else
+  Description_C = '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>'
 
 // This page requires login
 definePageMeta({
@@ -65,7 +64,7 @@ definePageMeta({
       </div>
     </div>
   </div>
-  <p v-else>
+  <div v-else>
     <div class="flex flex-col justify-center h-1/2 text-center">
       <h3 style="font-weight: bold;font-size: x-large">你当前访问的页面不存在，也许你应该考虑...</h3>
       <br>
@@ -73,9 +72,5 @@ definePageMeta({
         <Button>回到主页</Button>
       </NuxtLink>
     </div>
-  </p>
+  </div>
 </template>
-
-<style scoped>
-
-</style>

From b3d26591b62c8dd2726f29df78f4d7bbafd04032 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 18:43:51 +0800
Subject: [PATCH 21/38] style: remove v-bind

---
 pages/clubs/[id].vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index 39eb74d3..2b1683a8 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -66,9 +66,11 @@ definePageMeta({
   </div>
   <div v-else>
     <div class="flex flex-col justify-center h-1/2 text-center">
-      <h3 style="font-weight: bold;font-size: x-large">你当前访问的页面不存在，也许你应该考虑...</h3>
+      <h3 style="font-weight: bold;font-size: x-large">
+        你当前访问的页面不存在，也许你应该考虑...
+      </h3>
       <br>
-      <NuxtLink :to="`/`" class="w-full">
+      <NuxtLink to="`/`" class="w-full">
         <Button>回到主页</Button>
       </NuxtLink>
     </div>

From c1c1f561c8e3857d755bfda5769ef64edd55a5e8 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 18:55:00 +0800
Subject: [PATCH 22/38] fix: altered to the correct link

---
 pages/clubs/[id].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index 2b1683a8..2feb9b71 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -70,7 +70,7 @@ definePageMeta({
         你当前访问的页面不存在，也许你应该考虑...
       </h3>
       <br>
-      <NuxtLink to="`/`" class="w-full">
+      <NuxtLink to="/" class="w-full">
         <Button>回到主页</Button>
       </NuxtLink>
     </div>

From 9aa9188ddda60ce446f0a2a6b3a91e203566ce62 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 20:54:30 +0800
Subject: [PATCH 23/38] feat: add JetBrains Run/Debug Configuration

---
 .run/Run Nuxt via pnpm.run.xml | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 .run/Run Nuxt via pnpm.run.xml

diff --git a/.run/Run Nuxt via pnpm.run.xml b/.run/Run Nuxt via pnpm.run.xml
new file mode 100644
index 00000000..dd4a8ac7
--- /dev/null
+++ b/.run/Run Nuxt via pnpm.run.xml	
@@ -0,0 +1,17 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Run Nuxt via pnpm" type="ShConfigurationType">
+    <option name="SCRIPT_TEXT" value="pnpm run dev" />
+    <option name="INDEPENDENT_SCRIPT_PATH" value="true" />
+    <option name="SCRIPT_PATH" value="" />
+    <option name="SCRIPT_OPTIONS" value="" />
+    <option name="INDEPENDENT_SCRIPT_WORKING_DIRECTORY" value="true" />
+    <option name="SCRIPT_WORKING_DIRECTORY" value="$PROJECT_DIR$" />
+    <option name="INDEPENDENT_INTERPRETER_PATH" value="true" />
+    <option name="INTERPRETER_PATH" value="" />
+    <option name="INTERPRETER_OPTIONS" value="" />
+    <option name="EXECUTE_IN_TERMINAL" value="true" />
+    <option name="EXECUTE_SCRIPT_FILE" value="false" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>
\ No newline at end of file

From 65c3e81496392426ba974b73fad478896000c11f Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 21:27:27 +0800
Subject: [PATCH 24/38] refactor: filter club info with a brand-new method
 feat: show info about supervisor & group member counts

---
 pages/clubs/[id].vue | 99 +++++++++++++++++++++++++++++---------------
 1 file changed, 65 insertions(+), 34 deletions(-)

diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index 2feb9b71..0e74138a 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -10,17 +10,23 @@ const clubs: Clubs = json as Clubs
 const route = useRoute()
 const id = route.params.id // Fetch current Club ID via route params
 
-// Filter clubs based on C_GroupsID
-// It just works ;)
+// Filter clubs based on C_GroupsID and include information at the same level as groups
 const filteredClubs = Object.values(clubs).flatMap(clubCategory =>
-  clubCategory.flatMap(club => club.groups.filter(group => group.C_GroupsID === id)))
+  clubCategory.filter(club =>
+    club.groups.some(group => group.C_GroupsID === id),
+  ).map(club => ({
+    ...club, // Spread to include all same-level information
+    groups: club.groups.filter(group => group.C_GroupsID === id), // Filter groups to only include those that match the ID
+  })),
+)
 
 // Get the number of members in each group
-// const groupMemberCounts = filteredClubs.map(group => group.gmember.length)
+const groupMemberCounts = filteredClubs.length > 0 ? filteredClubs[0].gmember.length : 0
 
+// Get the Chinese Description of the club
 let Description_C
-if (filteredClubs[0] && filteredClubs[0].C_DescriptionC)
-  Description_C = cleanHTML(filteredClubs[0].C_DescriptionC) || '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>'
+if (filteredClubs[0] && filteredClubs[0].groups[0].C_DescriptionC)
+  Description_C = cleanHTML(filteredClubs[0].groups[0].C_DescriptionC) || '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>'
 else
   Description_C = '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>'
 
@@ -32,35 +38,60 @@ definePageMeta({
 
 <template>
   <div v-if="filteredClubs.length > 0">
-    <div v-for="group in filteredClubs" :key="group.C_GroupsID">
-      <div class="flex flex-col lg:flex-row lg:space-x-2">
-        <Card class="lg:w-3/4 w-full">
-          <CardHeader>
-            <CardTitle class="flex items-center gap-x-1">
-              {{ group.C_NameC }}
-            </CardTitle>
+    <div v-for="club in filteredClubs" :key="club.id">
+      <div v-for="group in club.groups" :key="group.C_GroupsID">
+        <div class="flex flex-col lg:flex-row lg:space-x-2">
+          <Card class="lg:w-3/4 w-full">
+            <CardHeader>
+              <CardTitle class="flex justify-between items-center">
+                <div>
+                  {{ group.C_NameC }}
+                </div>
+                <Badge v-if="club.gmember.length === 0" variant="destructive">
+                  已解散
+                </badge>
+              </CardTitle>
 
-            <CardDescription>{{ group.C_NameE }}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <p v-html="Description_C" />
-            <!-- Don't show the English Description until i18n is completed -->
-            <!-- <br> -->
-            <!-- <p v-html="cleanDescription(group.C_DescriptionE)"></p> -->
-          </CardContent>
-        </Card>
-        <Card class="lg:w-1/4 w-full mt-4 lg:mt-0">
-          <CardHeader>
-            <CardTitle class="flex items-center gap-x-1">
-              社团属性
-            </CardTitle>
-            <CardDescription>Club Info</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <p>社团类型: {{ group.C_Category }}</p>
-            <!-- <p>社团人数: {{ groupMemberCounts }}</p> -->
-          </CardContent>
-        </Card>
+              <CardDescription class="flex items-center">
+                <Icon name="material-symbols:language" />
+                <div class="ml-1">
+                  {{ group.C_NameE }}
+                </div>
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p v-html="Description_C" />
+              <!-- Don't show the English Description until i18n is completed -->
+              <!-- <br> -->
+              <!-- <p v-html="cleanDescription(group.C_DescriptionE)"></p> -->
+            </CardContent>
+          </Card>
+          <Card class="lg:w-1/4 w-full mt-4 lg:mt-0">
+            <CardHeader>
+              <CardTitle class="flex items-center gap-x-1">
+                社团属性
+              </CardTitle>
+              <CardDescription class="flex items-center">
+                <Icon name="material-symbols:info-outline" />
+                <div class="ml-1">
+                  Club Information
+                </div>
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p>社团类型: {{ group.C_Category }}</p>
+              <p>社团人数: {{ groupMemberCounts }} 人</p>
+              <div style="display: flex; align-items: center;">
+                <span>指导老师:</span>
+                <span v-for="supervisor in club.supervisor" :key="supervisor.TeacherID" style="margin-left: 8px;">
+                  {{ supervisor.T_Name }} ({{ supervisor.T_Nickname }})
+                </span>
+              </div>
+
+              <!-- <p>社团人数: {{ groupMemberCounts }}</p> -->
+            </CardContent>
+          </Card>
+        </div>
       </div>
     </div>
   </div>

From b2ce4331002f478242812543e4a87b1daf562a0c Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 22:03:10 +0800
Subject: [PATCH 25/38] refactor: move `cleanHTML` to `/utils`

---
 {components/custom => utils}/cleanHTML.d.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename {components/custom => utils}/cleanHTML.d.ts (100%)

diff --git a/components/custom/cleanHTML.d.ts b/utils/cleanHTML.d.ts
similarity index 100%
rename from components/custom/cleanHTML.d.ts
rename to utils/cleanHTML.d.ts

From bb87ec6cf63ef051437d97fce29bdd65c566eea2 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 22:03:23 +0800
Subject: [PATCH 26/38] refactor: move `cleanHTML` to `/utils`

---
 components/custom/club-card.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/custom/club-card.vue b/components/custom/club-card.vue
index cd4b4985..3646c7de 100644
--- a/components/custom/club-card.vue
+++ b/components/custom/club-card.vue
@@ -4,7 +4,7 @@ import type { Club } from '~/content/clubs'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { cn } from '@/lib/utils'
-import { cleanHTML } from '~/components/custom/cleanHTML.d.ts'
+import { cleanHTML } from '~/utils/cleanHTML.d.ts'
 import Badge from '~/components/ui/badge/Badge.vue'
 
 const props = defineProps({

From 4ee8c3443acb3ea697896f546890927f53963fbe Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 22:06:29 +0800
Subject: [PATCH 27/38] fix: add several styles to certain objects refactor:
 update `cleanHTML` directory feat(hidden): Recent Activities

---
 pages/clubs/[id].vue | 42 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/pages/clubs/[id].vue b/pages/clubs/[id].vue
index 0e74138a..6dc5045d 100644
--- a/pages/clubs/[id].vue
+++ b/pages/clubs/[id].vue
@@ -1,8 +1,9 @@
-<script setup lang="ts">
+<script setup lang="ts" xmlns="http://www.w3.org/1999/html">
 import { useRoute } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card'
-import { cleanHTML } from '~/components/custom/cleanHTML.d.ts'
+
+import { cleanHTML } from '~/utils/cleanHTML.d.ts'
 import json from '~/content/clubs.json'
 import type { Clubs } from '~/content/clubs'
 
@@ -40,7 +41,7 @@ definePageMeta({
   <div v-if="filteredClubs.length > 0">
     <div v-for="club in filteredClubs" :key="club.id">
       <div v-for="group in club.groups" :key="group.C_GroupsID">
-        <div class="flex flex-col lg:flex-row lg:space-x-2">
+        <div class="flex flex-col-reverse lg:flex-row lg:space-x-2 mb-2">
           <Card class="lg:w-3/4 w-full">
             <CardHeader>
               <CardTitle class="flex justify-between items-center">
@@ -79,16 +80,43 @@ definePageMeta({
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <p>社团类型: {{ group.C_Category }}</p>
-              <p>社团人数: {{ groupMemberCounts }} 人</p>
+              <div>
+                <span style="font-weight: bold">社团类型</span>: {{ group.C_Category }}
+              </div>
+              <div>
+                <span style="font-weight: bold">社团人数</span>: {{ groupMemberCounts }} 人
+              </div>
               <div style="display: flex; align-items: center;">
-                <span>指导老师:</span>
+                <span style="font-weight: bold">指导老师:</span>
                 <span v-for="supervisor in club.supervisor" :key="supervisor.TeacherID" style="margin-left: 8px;">
                   {{ supervisor.T_Name }} ({{ supervisor.T_Nickname }})
                 </span>
               </div>
+            </CardContent>
+          </Card>
+        </div>
+        <div style="display:none">
+          <Card v-if="club.grecord.length > 0" class="w-full">
+            <CardHeader>
+              <CardTitle class="flex justify-between items-center">
+                <div>
+                  近期活动
+                </div>
+              </CardTitle>
 
-              <!-- <p>社团人数: {{ groupMemberCounts }}</p> -->
+              <CardDescription class="flex items-center">
+                <Icon name="material-symbols:language" />
+                <div class="ml-1">
+                  Recent Activities
+                </div>
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <span v-for="grecord in club.grecord" :key="grecord.C_Theme">
+                <div style="font-weight: bold">{{ grecord.C_Theme }}</div>
+                <div class="text-sm text-muted-foreground mb-1"><Icon name="material-symbols:schedule-outline" /> {{ grecord.C_Date }}</div>
+                <div class="text-sm">{{ grecord.C_Reflection }}</div><br>
+              </span>
             </CardContent>
           </Card>
         </div>

From b8d1b5394c70d8ef7a36bb32d59aacef1db73dc3 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 22:15:15 +0800
Subject: [PATCH 28/38] refactor: merge into `/cas/clubs`

---
 pages/{ => cas}/clubs/[id].vue           | 2 +-
 pages/cas/{clubs.vue => clubs/index.vue} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename pages/{ => cas}/clubs/[id].vue (99%)
 rename pages/cas/{clubs.vue => clubs/index.vue} (100%)

diff --git a/pages/clubs/[id].vue b/pages/cas/clubs/[id].vue
similarity index 99%
rename from pages/clubs/[id].vue
rename to pages/cas/clubs/[id].vue
index 6dc5045d..53797f1d 100644
--- a/pages/clubs/[id].vue
+++ b/pages/cas/clubs/[id].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts" xmlns="http://www.w3.org/1999/html">
 import { useRoute } from 'vue-router'
-import { Button } from '@/components/ui/button'
+import { Button } from '~/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card'
 
 import { cleanHTML } from '~/utils/cleanHTML.d.ts'
diff --git a/pages/cas/clubs.vue b/pages/cas/clubs/index.vue
similarity index 100%
rename from pages/cas/clubs.vue
rename to pages/cas/clubs/index.vue

From f39ecc68040a016e84080eb8ae478ac0c9d64900 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 22:15:33 +0800
Subject: [PATCH 29/38] refactor: update URL of `/cas/clubs/*`

---
 components/custom/club-card.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/custom/club-card.vue b/components/custom/club-card.vue
index 3646c7de..cbdc8096 100644
--- a/components/custom/club-card.vue
+++ b/components/custom/club-card.vue
@@ -60,7 +60,7 @@ const Description_C = cleanHTML(props.club.groups[0].C_DescriptionC)
       </div>
     </CardContent>
     <CardFooter>
-      <NuxtLink :to="`/clubs/${props.club.groups[0].C_GroupsID}`" class="w-full">
+      <NuxtLink :to="`/cas/clubs/${props.club.groups[0].C_GroupsID}`" class="w-full">
         <Button class="w-full">
           详细信息
         </Button>

From fcb7b6950a7aad8fc123a07b2f6054e39255ce7b Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 22:19:39 +0800
Subject: [PATCH 30/38] fix: use `v-if` instead of `v-html`

---
 pages/cas/clubs/[id].vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/pages/cas/clubs/[id].vue b/pages/cas/clubs/[id].vue
index 53797f1d..fdecd8c2 100644
--- a/pages/cas/clubs/[id].vue
+++ b/pages/cas/clubs/[id].vue
@@ -25,11 +25,13 @@ const filteredClubs = Object.values(clubs).flatMap(clubCategory =>
 const groupMemberCounts = filteredClubs.length > 0 ? filteredClubs[0].gmember.length : 0
 
 // Get the Chinese Description of the club
-let Description_C
-if (filteredClubs[0] && filteredClubs[0].groups[0].C_DescriptionC)
-  Description_C = cleanHTML(filteredClubs[0].groups[0].C_DescriptionC) || '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>'
-else
-  Description_C = '<div class="text-sm italic text-muted-foreground text-center w-full">暂无简介 ;-(</div>'
+let hasDescriptionC = false
+let Description_C = ''
+
+if (filteredClubs[0] && filteredClubs[0].groups[0].C_DescriptionC) {
+  Description_C = cleanHTML(filteredClubs[0].groups[0].C_DescriptionC)
+  hasDescriptionC = true
+}
 
 // This page requires login
 definePageMeta({
@@ -61,10 +63,11 @@ definePageMeta({
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <p v-html="Description_C" />
+              <div v-if="hasDescriptionC" v-text="Description_C" />
+              <div v-else class="text-sm italic text-muted-foreground text-center w-full">
+                暂无简介 ;-(
+              </div>
               <!-- Don't show the English Description until i18n is completed -->
-              <!-- <br> -->
-              <!-- <p v-html="cleanDescription(group.C_DescriptionE)"></p> -->
             </CardContent>
           </Card>
           <Card class="lg:w-1/4 w-full mt-4 lg:mt-0">

From 8a6718536264c06cd0dcee0f4256b111f3ffef5e Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 22:20:56 +0800
Subject: [PATCH 31/38] style: remove some nobody

---
 pages/cas/clubs/[id].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/cas/clubs/[id].vue b/pages/cas/clubs/[id].vue
index fdecd8c2..b2d0dd14 100644
--- a/pages/cas/clubs/[id].vue
+++ b/pages/cas/clubs/[id].vue
@@ -1,4 +1,4 @@
-<script setup lang="ts" xmlns="http://www.w3.org/1999/html">
+<script setup lang="ts">
 import { useRoute } from 'vue-router'
 import { Button } from '~/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card'

From 01330943b017175bf3579dcf0e1f4853c8536ee1 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 22:29:32 +0800
Subject: [PATCH 32/38] refactor: merge `cleanHTML()` into `utils.ts`

---
 components/custom/club-card.vue | 2 +-
 lib/utils.ts                    | 8 ++++++++
 pages/cas/clubs/[id].vue        | 3 +--
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/custom/club-card.vue b/components/custom/club-card.vue
index cbdc8096..e632f82b 100644
--- a/components/custom/club-card.vue
+++ b/components/custom/club-card.vue
@@ -4,7 +4,7 @@ import type { Club } from '~/content/clubs'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { cn } from '@/lib/utils'
-import { cleanHTML } from '~/utils/cleanHTML.d.ts'
+import { cleanHTML } from '~/lib/utils'
 import Badge from '~/components/ui/badge/Badge.vue'
 
 const props = defineProps({
diff --git a/lib/utils.ts b/lib/utils.ts
index e01ec758..0a0b5762 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -14,3 +14,11 @@ export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref
       ? updaterOrValue(ref.value)
       : updaterOrValue
 }
+
+export function cleanHTML(content: string): string {
+  if (!content)
+    return ''
+
+  return content.replace(/<script[^>]*>([\s\S]*?)<\/script>/gmi, '')
+    .replace(/<style[^>]*>([\s\S]*?)<\/style>/gmi, '')
+}
diff --git a/pages/cas/clubs/[id].vue b/pages/cas/clubs/[id].vue
index b2d0dd14..d4e369e2 100644
--- a/pages/cas/clubs/[id].vue
+++ b/pages/cas/clubs/[id].vue
@@ -2,8 +2,7 @@
 import { useRoute } from 'vue-router'
 import { Button } from '~/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card'
-
-import { cleanHTML } from '~/utils/cleanHTML.d.ts'
+import { cleanHTML } from '~/lib/utils'
 import json from '~/content/clubs.json'
 import type { Clubs } from '~/content/clubs'
 

From 97990439f3c3b586f03e6ff28b3f617c9f82e1eb Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 22:30:27 +0800
Subject: [PATCH 33/38] refactor: merged into `utils.ts`

---
 utils/cleanHTML.d.ts | 10 ----------
 1 file changed, 10 deletions(-)
 delete mode 100644 utils/cleanHTML.d.ts

diff --git a/utils/cleanHTML.d.ts b/utils/cleanHTML.d.ts
deleted file mode 100644
index c4222ccc..00000000
--- a/utils/cleanHTML.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export function cleanHTML(content: string): string
-
-// Define
-export function cleanHTML(content: string): string {
-  if (!content)
-    return ''
-
-  return content.replace(/<script[^>]*>([\s\S]*?)<\/script>/gmi, '')
-    .replace(/<style[^>]*>([\s\S]*?)<\/style>/gmi, '')
-}

From 25a69f330c417d0ed55a5cf7b2c3e4081d16ee3a Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 22:43:07 +0800
Subject: [PATCH 34/38] refactor: merged into single line

---
 components/custom/club-card.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/custom/club-card.vue b/components/custom/club-card.vue
index e632f82b..80177121 100644
--- a/components/custom/club-card.vue
+++ b/components/custom/club-card.vue
@@ -3,8 +3,7 @@ import type { PropType } from 'vue'
 import type { Club } from '~/content/clubs'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
-import { cleanHTML } from '~/lib/utils'
+import { cleanHTML, cn } from '@/lib/utils'
 import Badge from '~/components/ui/badge/Badge.vue'
 
 const props = defineProps({

From 7a6f98c40e3e4f25cc3b2f42569aae771c016e95 Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 22:53:01 +0800
Subject: [PATCH 35/38] refactor: unify `~/` into `@/`

---
 components/custom/club-card.vue |  4 ++--
 pages/cas/clubs/[id].vue        | 12 ++++++------
 pages/cas/clubs/index.vue       | 14 +++++++-------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/components/custom/club-card.vue b/components/custom/club-card.vue
index 80177121..20de6958 100644
--- a/components/custom/club-card.vue
+++ b/components/custom/club-card.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import type { Club } from '~/content/clubs'
+import type { Club } from '@/content/clubs'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { cleanHTML, cn } from '@/lib/utils'
-import Badge from '~/components/ui/badge/Badge.vue'
+import Badge from '@/components/ui/badge/Badge.vue'
 
 const props = defineProps({
   club: {
diff --git a/pages/cas/clubs/[id].vue b/pages/cas/clubs/[id].vue
index d4e369e2..0ac1209b 100644
--- a/pages/cas/clubs/[id].vue
+++ b/pages/cas/clubs/[id].vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
-import { Button } from '~/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card'
-import { cleanHTML } from '~/lib/utils'
-import json from '~/content/clubs.json'
-import type { Clubs } from '~/content/clubs'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { cleanHTML } from '@/lib/utils'
+import json from '@/content/clubs.json'
+import type { Clubs } from '@/content/clubs'
 
 const clubs: Clubs = json as Clubs
 const route = useRoute()
@@ -107,7 +107,7 @@ definePageMeta({
               </CardTitle>
 
               <CardDescription class="flex items-center">
-                <Icon name="material-symbols:language" />
+                <Icon name="material-symbols:draw-outline" />
                 <div class="ml-1">
                   Recent Activities
                 </div>
diff --git a/pages/cas/clubs/index.vue b/pages/cas/clubs/index.vue
index 5f479b2e..2e1ee2db 100644
--- a/pages/cas/clubs/index.vue
+++ b/pages/cas/clubs/index.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import TabsList from '~/components/ui/tabs/TabsList.vue'
-import Tabs from '~/components/ui/tabs/Tabs.vue'
-import TabsContent from '~/components/ui/tabs/TabsContent.vue'
-import TabsTrigger from '~/components/ui/tabs/TabsTrigger.vue'
-import json from '~/content/clubs.json'
+import TabsList from '@/components/ui/tabs/TabsList.vue'
+import Tabs from '@/components/ui/tabs/Tabs.vue'
+import TabsContent from '@/components/ui/tabs/TabsContent.vue'
+import TabsTrigger from '@/components/ui/tabs/TabsTrigger.vue'
+import json from '@/content/clubs.json'
 
-import type { Clubs } from '~/content/clubs'
-import ClubCard from '~/components/custom/club-card.vue'
+import type { Clubs } from '@/content/clubs'
+import ClubCard from '@/components/custom/club-card.vue'
 
 const clubs: Clubs = json as Clubs
 

From ae8dc8b2e946b5387e3bd6e6aa800e9a348bc00b Mon Sep 17 00:00:00 2001
From: Alan Ye <45558679+AlanYe-Dev@users.noreply.github.com>
Date: Sat, 2 Mar 2024 22:59:37 +0800
Subject: [PATCH 36/38] fix: minor typescript fixes

---
 content/clubs.d.ts        |  1 +
 pages/cas/clubs/[id].vue  | 26 +++++++++++++++++---------
 pages/cas/clubs/index.vue |  6 ++++--
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/content/clubs.d.ts b/content/clubs.d.ts
index 49cc45d5..99ce9965 100644
--- a/content/clubs.d.ts
+++ b/content/clubs.d.ts
@@ -6,6 +6,7 @@ export interface Clubs {
   Academic: (Club)[]
   Personal?: (Club)[] | null
 }
+type ClubCategoryKey = Exclude<keyof Clubs, 'Personal'>
 export interface Groups {
   C_GroupsID: string
   C_GroupNo: string
diff --git a/pages/cas/clubs/[id].vue b/pages/cas/clubs/[id].vue
index 0ac1209b..f9492d89 100644
--- a/pages/cas/clubs/[id].vue
+++ b/pages/cas/clubs/[id].vue
@@ -12,9 +12,9 @@ const id = route.params.id // Fetch current Club ID via route params
 
 // Filter clubs based on C_GroupsID and include information at the same level as groups
 const filteredClubs = Object.values(clubs).flatMap(clubCategory =>
-  clubCategory.filter(club =>
+  clubCategory.filter((club: Club) =>
     club.groups.some(group => group.C_GroupsID === id),
-  ).map(club => ({
+  ).map((club: Club) => ({
     ...club, // Spread to include all same-level information
     groups: club.groups.filter(group => group.C_GroupsID === id), // Filter groups to only include those that match the ID
   })),
@@ -42,7 +42,7 @@ definePageMeta({
   <div v-if="filteredClubs.length > 0">
     <div v-for="club in filteredClubs" :key="club.id">
       <div v-for="group in club.groups" :key="group.C_GroupsID">
-        <div class="flex flex-col-reverse lg:flex-row lg:space-x-2 mb-2">
+        <div class="flex flex-col-reverse lg:flex-row lg:space-2 mb-2">
           <Card class="lg:w-3/4 w-full">
             <CardHeader>
               <CardTitle class="flex justify-between items-center">
@@ -114,11 +114,19 @@ definePageMeta({
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <span v-for="grecord in club.grecord" :key="grecord.C_Theme">
-                <div style="font-weight: bold">{{ grecord.C_Theme }}</div>
-                <div class="text-sm text-muted-foreground mb-1"><Icon name="material-symbols:schedule-outline" /> {{ grecord.C_Date }}</div>
-                <div class="text-sm">{{ grecord.C_Reflection }}</div><br>
-              </span>
+              <div v-for="grecord in club.grecord" :key="grecord.C_Theme">
+                <div class="font-bold">
+                  {{ grecord.C_Theme }}
+                </div>
+                <div class="text-sm text-muted-foreground mb-1">
+                  <Icon name="material-symbols:schedule-outline" />
+                  {{ grecord.C_Date }}
+                </div>
+                <div class="text-sm">
+                  {{ grecord.C_Reflection }}
+                </div>
+                <br>
+              </div>
             </CardContent>
           </Card>
         </div>
@@ -131,7 +139,7 @@ definePageMeta({
         你当前访问的页面不存在，也许你应该考虑...
       </h3>
       <br>
-      <NuxtLink to="/" class="w-full">
+      <NuxtLink class="w-full" to="/">
         <Button>回到主页</Button>
       </NuxtLink>
     </div>
diff --git a/pages/cas/clubs/index.vue b/pages/cas/clubs/index.vue
index 2e1ee2db..b1ac293a 100644
--- a/pages/cas/clubs/index.vue
+++ b/pages/cas/clubs/index.vue
@@ -5,7 +5,7 @@ import TabsContent from '@/components/ui/tabs/TabsContent.vue'
 import TabsTrigger from '@/components/ui/tabs/TabsTrigger.vue'
 import json from '@/content/clubs.json'
 
-import type { Clubs } from '@/content/clubs'
+import type { ClubCategoryKey, Clubs } from '@/content/clubs'
 import ClubCard from '@/components/custom/club-card.vue'
 
 const clubs: Clubs = json as Clubs
@@ -14,6 +14,8 @@ const clubs: Clubs = json as Clubs
 definePageMeta({
   middleware: ['auth'],
 })
+
+const categories = (['Sports', 'Service', 'Arts', 'Life', 'Academic'] as const).map(c => c as ClubCategoryKey)
 </script>
 
 <template>
@@ -39,7 +41,7 @@ definePageMeta({
         </TabsList>
       </div>
       <TabsContent
-        v-for="i in ['Sports', 'Service', 'Arts', 'Life', 'Academic']"
+        v-for="i in categories"
         :key="i"
         :value="i"
         class="border-none p-0 outline-none"

From f2a02a2cb52061583c0812498f11826f2875e2e1 Mon Sep 17 00:00:00 2001
From: qwerzl <me@qwerzl.me>
Date: Sat, 2 Mar 2024 23:25:09 +0800
Subject: [PATCH 37/38] fix: minor fixes

---
 pages/cas/clubs/[id].vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/pages/cas/clubs/[id].vue b/pages/cas/clubs/[id].vue
index f9492d89..f47e9771 100644
--- a/pages/cas/clubs/[id].vue
+++ b/pages/cas/clubs/[id].vue
@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { cleanHTML } from '@/lib/utils'
 import json from '@/content/clubs.json'
-import type { Clubs } from '@/content/clubs'
+import type { Club, Clubs } from '@/content/clubs'
 
 const clubs: Clubs = json as Clubs
 const route = useRoute()
@@ -18,7 +18,7 @@ const filteredClubs = Object.values(clubs).flatMap(clubCategory =>
     ...club, // Spread to include all same-level information
     groups: club.groups.filter(group => group.C_GroupsID === id), // Filter groups to only include those that match the ID
   })),
-)
+) as Club[]
 
 // Get the number of members in each group
 const groupMemberCounts = filteredClubs.length > 0 ? filteredClubs[0].gmember.length : 0
@@ -40,10 +40,10 @@ definePageMeta({
 
 <template>
   <div v-if="filteredClubs.length > 0">
-    <div v-for="club in filteredClubs" :key="club.id">
+    <div v-for="club in filteredClubs" :key="club.groups[0].C_GroupNo">
       <div v-for="group in club.groups" :key="group.C_GroupsID">
-        <div class="flex flex-col-reverse lg:flex-row lg:space-2 mb-2">
-          <Card class="lg:w-3/4 w-full">
+        <div class="flex flex-col-reverse xl:flex-row">
+          <Card class="xl:w-3/4 w-full mt-2 xl:mt-0">
             <CardHeader>
               <CardTitle class="flex justify-between items-center">
                 <div>
@@ -69,7 +69,7 @@ definePageMeta({
               <!-- Don't show the English Description until i18n is completed -->
             </CardContent>
           </Card>
-          <Card class="lg:w-1/4 w-full mt-4 lg:mt-0">
+          <Card class="xl:w-1/4 w-full xl:ml-2">
             <CardHeader>
               <CardTitle class="flex items-center gap-x-1">
                 社团属性

From b8e322739772ad9679fdd913951f8fb2045d1c8e Mon Sep 17 00:00:00 2001
From: qwerzl <me@qwerzl.me>
Date: Sat, 2 Mar 2024 23:33:11 +0800
Subject: [PATCH 38/38] fix: minor fixes

---
 content/clubs.d.ts       |  4 +--
 pages/cas/clubs/[id].vue | 78 ++++++++++++++++++++--------------------
 2 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/content/clubs.d.ts b/content/clubs.d.ts
index 99ce9965..fa29ed0a 100644
--- a/content/clubs.d.ts
+++ b/content/clubs.d.ts
@@ -45,8 +45,8 @@ export interface Clubrecord {
 
 export interface Club {
   groups: (Groups)[]
-  supervisor?: (Supervisor | null)[] | null
+  supervisor?: (Supervisor)[]
   gmember: (Clubmember)[]
-  grecord?: (Clubrecord | null)[] | null
+  grecord?: (Clubrecord)[]
   projectyes: number
 }
diff --git a/pages/cas/clubs/[id].vue b/pages/cas/clubs/[id].vue
index f47e9771..d7b2e8d8 100644
--- a/pages/cas/clubs/[id].vue
+++ b/pages/cas/clubs/[id].vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { useRoute } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
@@ -83,59 +83,59 @@ definePageMeta({
             </CardHeader>
             <CardContent>
               <div>
-                <span style="font-weight: bold">社团类型</span>: {{ group.C_Category }}
+                <span class="font-bold">社团类型</span>: {{ group.C_Category }}
               </div>
               <div>
-                <span style="font-weight: bold">社团人数</span>: {{ groupMemberCounts }} 人
+                <span class="font-bold">社团人数</span>: {{ groupMemberCounts }} 人
               </div>
-              <div style="display: flex; align-items: center;">
-                <span style="font-weight: bold">指导老师:</span>
-                <span v-for="supervisor in club.supervisor" :key="supervisor.TeacherID" style="margin-left: 8px;">
+              <div class="flex">
+                <span class="font-bold">指导老师:</span>
+                <span v-for="supervisor in club.supervisor" :key="supervisor.TeacherID" class="ml-2">
                   {{ supervisor.T_Name }} ({{ supervisor.T_Nickname }})
                 </span>
               </div>
             </CardContent>
           </Card>
         </div>
-        <div style="display:none">
-          <Card v-if="club.grecord.length > 0" class="w-full">
-            <CardHeader>
-              <CardTitle class="flex justify-between items-center">
-                <div>
-                  近期活动
-                </div>
-              </CardTitle>
+        <!--        <div style="display:none"> -->
+        <!--          <Card v-if="club.grecord.length > 0" class="w-full"> -->
+        <!--            <CardHeader> -->
+        <!--              <CardTitle class="flex justify-between items-center"> -->
+        <!--                <div> -->
+        <!--                  近期活动 -->
+        <!--                </div> -->
+        <!--              </CardTitle> -->
 
-              <CardDescription class="flex items-center">
-                <Icon name="material-symbols:draw-outline" />
-                <div class="ml-1">
-                  Recent Activities
-                </div>
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div v-for="grecord in club.grecord" :key="grecord.C_Theme">
-                <div class="font-bold">
-                  {{ grecord.C_Theme }}
-                </div>
-                <div class="text-sm text-muted-foreground mb-1">
-                  <Icon name="material-symbols:schedule-outline" />
-                  {{ grecord.C_Date }}
-                </div>
-                <div class="text-sm">
-                  {{ grecord.C_Reflection }}
-                </div>
-                <br>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
+        <!--              <CardDescription class="flex items-center"> -->
+        <!--                <Icon name="material-symbols:draw-outline" /> -->
+        <!--                <div class="ml-1"> -->
+        <!--                  Recent Activities -->
+        <!--                </div> -->
+        <!--              </CardDescription> -->
+        <!--            </CardHeader> -->
+        <!--            <CardContent> -->
+        <!--              <div v-for="grecord in club.grecord" :key="grecord.C_Theme"> -->
+        <!--                <div class="font-bold"> -->
+        <!--                  {{ grecord.C_Theme }} -->
+        <!--                </div> -->
+        <!--                <div class="text-sm text-muted-foreground mb-1"> -->
+        <!--                  <Icon name="material-symbols:schedule-outline" /> -->
+        <!--                  {{ grecord.C_Date }} -->
+        <!--                </div> -->
+        <!--                <div class="text-sm"> -->
+        <!--                  {{ grecord.C_Reflection }} -->
+        <!--                </div> -->
+        <!--                <br> -->
+        <!--              </div> -->
+        <!--            </CardContent> -->
+        <!--          </Card> -->
+        <!--        </div> -->
       </div>
     </div>
   </div>
   <div v-else>
     <div class="flex flex-col justify-center h-1/2 text-center">
-      <h3 style="font-weight: bold;font-size: x-large">
+      <h3 class="font-bold text-xl">
         你当前访问的页面不存在，也许你应该考虑...
       </h3>
       <br>