From 5927861af72fcfcb01c805e8bf0bd47c67e59d23 Mon Sep 17 00:00:00 2001
From: kyuuseiryuu <kyuuseiryuu@gmail.com>
Date: Thu, 26 Mar 2026 13:44:32 +0900
Subject: [PATCH] feat(club-management): add club follow/unfollow functionality
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce a follow/unfollow feature for clubs in the ClubSummary component.
Users can now toggle their subscription status to a specific club, with
the state persisted locally using zustand.

Changes include:
- Added 'Follow' and 'Unfollow' buttons with corresponding star icons (StarOutlined/StarFilled).
- Updated ClubStore to manage a simplified list of clubs (id and name only).
- Refactored Data type in ClubSearchTable to use Pick<ClubInfo, 'id' | 'name'>.
- Fixed club name in GameSelector clubList to '东华乒乓球俱乐部'.
- Excluded follow buttons for club ID '47' (Donghua).

The implementation ensures a consistent UI state across the application
and persists user preferences.
---
 src/components/ClubSearchTable.tsx      |  2 +-
 src/components/ClubSummary.tsx          | 28 +++++++++++++++++++++++--
 src/components/GameSelector/clubList.ts |  2 +-
 src/store/useClubStore.ts               |  7 +++----
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/ClubSearchTable.tsx b/src/components/ClubSearchTable.tsx
index 9f6cf5b..d76443b 100644
--- a/src/components/ClubSearchTable.tsx
+++ b/src/components/ClubSearchTable.tsx
@@ -19,7 +19,7 @@ enum ClubType {
   我的收藏,
 }
 
-type Data = { clubs: ClubInfo[], total: number, page: number; };
+type Data = { clubs: Pick<ClubInfo, 'id' | 'name'>[], total: number, page: number; };
 
 const initData = { clubs: [], total: 0, page: 1 };
 
diff --git a/src/components/ClubSummary.tsx b/src/components/ClubSummary.tsx
index 73876d5..1c8e486 100644
--- a/src/components/ClubSummary.tsx
+++ b/src/components/ClubSummary.tsx
@@ -5,7 +5,8 @@ import { useRequest } from "ahooks";
 import type { ClubDetail } from "../types";
 import { MapType, openWebMapRaw } from "../utils/front";
 import type { ItemType } from "antd/es/menu/interface";
-import { NotificationOutlined, PushpinOutlined } from "@ant-design/icons";
+import { NotificationOutlined, PushpinOutlined, StarFilled, StarOutlined } from "@ant-design/icons";
+import { useClubStore } from "../store/useClubStore";
 
 interface Props {
   clubId: string;
@@ -43,6 +44,7 @@ export const ClubSummary = (props: Props) => {
       },
     ]
   }, [info]);
+  const store = useClubStore();
   if (requestClubSummary.data === null) return null;
   return (
     <div style={{ width: '100%' }}>
@@ -52,7 +54,29 @@ export const ClubSummary = (props: Props) => {
         <Flex vertical align="center" justify="center">
           <ChangeBackground url={info?.img} />
           <Avatar src={info?.img} size={80} />
-          <Typography.Title level={2}>{info?.name}</Typography.Title>
+          <Typography.Title level={3}>
+            <Flex gap={12}>
+              {info?.name}
+              {props.clubId === '47' ? null : (store.isFav(info?.id ?? '')) ? (
+                <Button
+                  icon={<StarFilled style={{ color: 'yellow' }} />}
+                  onClick={() => store.unFav(info?.id ?? '')}
+                >
+                  取消关注
+                </Button>
+              ) : (
+                <Button
+                  icon={<StarOutlined />}
+                  onClick={() => store.add({
+                    id: info?.id ?? '',
+                    name: info?.name ?? '',
+                  })}
+                >
+                  关注
+                </Button>
+              )}
+            </Flex>
+          </Typography.Title>
             <Flex gap={12}>
               {noArticle ? null : (
                 <Button icon={<NotificationOutlined />} onClick={() => setIsArticleOpen(true)}>查看公告</Button>
diff --git a/src/components/GameSelector/clubList.ts b/src/components/GameSelector/clubList.ts
index 32974ea..379919c 100644
--- a/src/components/GameSelector/clubList.ts
+++ b/src/components/GameSelector/clubList.ts
@@ -1,6 +1,6 @@
 export const clubs = [
   {
-    name: '东华',
+    name: '东华乒乓球俱乐部',
     clubId: '47',
   },
 ];
\ No newline at end of file
diff --git a/src/store/useClubStore.ts b/src/store/useClubStore.ts
index d7fb2d0..46125eb 100644
--- a/src/store/useClubStore.ts
+++ b/src/store/useClubStore.ts
@@ -1,17 +1,16 @@
 import { create } from "zustand";
 import { persist, createJSONStorage } from 'zustand/middleware';
-import type { ClubInfo } from "../types";
 
 interface Store {
-  clubs: ClubInfo[];
-  add(club: ClubInfo): void;
+  clubs: { id: string; name: string }[];
+  add(club: { id: string; name: string }): void;
   unFav(id: string): void;
   isFav(id: string): boolean;
 }
 export const useClubStore = create(persist<Store>((set, get) => {
   return {
     clubs: [],
-    add: (club: ClubInfo) => {
+    add: (club: { id: string; name: string }) => {
       set({ clubs: [...get().clubs, club] });
     },
     unFav: (id: string) => {