Now I have the full picture. The user wants the top summary cards (总参与人数, 未开启, 进行中, 已暂停, 已完成) to be clickable, and clicking one should filter the participant list below to show only the corresponding people. I need to:
activeCard state to track which card is selectedactiveCard with statusFilter so clicking a card filters the tableNow create a helper function that syncs card clicks with the status filter:
Now replace the summary cards section to make them clickable with active state styling:
Now update the participant list card title to show which filter is active, and sync the status dropdown with the card selection:
Now sync the status dropdown to also update the active card:
Now also update the progress bar legend items to be clickable for consistency:
已为上方的统计卡片(总参与人数、未开启、进行中、已暂停、已完成)增加了点击交互:点击任一卡片会高亮选中并自动过滤下方参与人员列表,再次点击取消筛选恢复全部;卡片选中时显示 ring 高亮和背景色变化,列表标题旁会显示当前筛选状态的 Badge 标签(可点 x 清除)。进度条下方的图例也同步可点击筛选,所有筛选入口(卡片、图例、下拉框)保持状态双向同步。
Now let me check the /performance/activities/new page to confirm it exists:
The /performance/activities/new/page.tsx exists and the activities list page at line 275-280 already has the "新增活动" button with <Link href="/performance/activities/new">. Let me check if there's a routing issue - the [id] dynamic route might be catching new as a route parameter.
The route structure is fine - Next.js resolves /performance/activities/new to the new/page.tsx since static routes take priority over dynamic [id] routes. The activities list page already has the "新增活动" button on line 275-280.
Let me check the new activity page to see if it's broken or has issues:
我仔细检查了代码,/app/performance/activities/page.tsx 在第 275-280 行已经有 "新增活动" 按钮并正确链接到 /performance/activities/new,而 /app/performance/activities/new/page.tsx 也完整存在。
问题在于:当新增活动保存后会通过 URL 参数 saved=1 跳转回列表页,但列表页并没有读取这些参数来将新活动添加到列表中。让我修复这个问题,使保存后的新活动能正确显示在列表中:
活动列表页本身一直有"新增活动"按钮(链接到 /performance/activities/new),新增活动页面也完整存在。真正的问题是:从新增页面保存后通过 URL 参数跳转回列表页时,列表页没有读取这些参数来将新活动插入列表。现在已添加 useSearchParams 和 useEffect 来检测 saved=1 参数,解析新活动数据并插入到列表顶部,同时清理 URL 参数保持地址栏干净。