feat: information page of specific club & autoclean HTML <script> <style> elements

.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>

components/custom/club-card.vue

@@ -1,17 +1,19 @@
 <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 { cn } from '@/lib/utils'
-import Badge from '~/components/ui/badge/Badge.vue'
+import { cleanHTML, cn } from '@/lib/utils'
+import Badge from '@/components/ui/badge/Badge.vue'
 
 const props = defineProps({
   club: {
     type: Object as PropType<Club>,
     required: true,
   },
 })
+
+const Description_C = cleanHTML(props.club.groups[0].C_DescriptionC)
 </script>
 
 <template>
@@ -44,8 +46,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">
@@ -57,9 +59,11 @@ const props = defineProps({
       </div>
     </CardContent>
     <CardFooter>
-      <Button class="w-full">
-        详细信息
-      </Button>
+      <NuxtLink :to="`/cas/clubs/${props.club.groups[0].C_GroupsID}`" class="w-full">
+        <Button class="w-full">
+          详细信息
+        </Button>
+      </NuxtLink>
     </CardFooter>
   </Card>
 </template>

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

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
@@ -44,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
 }

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

pages/cas/clubs/[id].vue

@@ -0,0 +1,147 @@
+<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'
+import { cleanHTML } from '@/lib/utils'
+import json from '@/content/clubs.json'
+import type { Club, 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 and include information at the same level as groups
+const filteredClubs = Object.values(clubs).flatMap(clubCategory =>
+  clubCategory.filter((club: Club) =>
+    club.groups.some(group => group.C_GroupsID === id),
+  ).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
+  })),
+) as Club[]
+
+// Get the number of members in each group
+const groupMemberCounts = filteredClubs.length > 0 ? filteredClubs[0].gmember.length : 0
+
+// Get the Chinese Description of the club
+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({
+  middleware: ['auth'],
+})
+</script>
+
+<template>
+  <div v-if="filteredClubs.length > 0">
+    <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 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>
+                  {{ group.C_NameC }}
+                </div>
+                <Badge v-if="club.gmember.length === 0" variant="destructive">
+                  已解散
+                </badge>
+              </CardTitle>
+
+              <CardDescription class="flex items-center">
+                <Icon name="material-symbols:language" />
+                <div class="ml-1">
+                  {{ group.C_NameE }}
+                </div>
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <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 -->
+            </CardContent>
+          </Card>
+          <Card class="xl:w-1/4 w-full xl:ml-2">
+            <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>
+              <div>
+                <span class="font-bold">社团类型</span>: {{ group.C_Category }}
+              </div>
+              <div>
+                <span class="font-bold">社团人数</span>: {{ groupMemberCounts }} 人
+              </div>
+              <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> -->
+
+        <!--              <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 class="font-bold text-xl">
+        你当前访问的页面不存在，也许你应该考虑...
+      </h3>
+      <br>
+      <NuxtLink class="w-full" to="/">
+        <Button>回到主页</Button>
+      </NuxtLink>
+    </div>
+  </div>
+</template>

pages/cas/clubs.vue → pages/cas/clubs/index.vue

@@ -1,19 +1,21 @@
 <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 { ClubCategoryKey, Clubs } from '@/content/clubs'
+import ClubCard from '@/components/custom/club-card.vue'
 
 const clubs: Clubs = json as Clubs
 
 // This page requires login
 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"