vscode-workbench/.trae/documents/plan-remove-favorites-stats.md

收藏页面统计区块移除及功能验证计划

摘要

移除收藏页面 Hero 区域中的统计卡片区块（favorites-stats-row），调整间距，并验证收藏功能是否正常工作。

当前状态分析

文件： chunyu_project_react/src/pages/Favorites/Favorites.tsx

当前页面结构：

favorites-page
├── favorites-hero (Hero 区域)
│   ├── favorites-hero-icon-wrap (图标)
│   ├── h1 (标题)
│   ├── p (副标题)
│   └── favorites-stats-row (统计卡片) ← 需要删除
│       ├── 全部 (counts.total)
│       ├── 工具 (counts.tool)
│       ├── 文章 (counts.article)
│       └── 课程 (counts.course)
└── favorites-content (内容区域)
    ├── Tabs (标签页)
    ├── favorites-count-info (数量信息)
    └── favorites-grid / favorites-empty

修改内容

1. 删除统计卡片区块 (Favorites.tsx)

• 位置： 第 227-244 行
• 删除内容： <div className="favorites-stats-row">...</div> 整个区块
• 原因： 用户要求删除此区块

2. 调整 Hero 区域间距 (Favorites.css)

• 位置： .favorites-hero 的 padding
• 修改： 将 padding: 60px 40px; 适当减小，因为移除了统计卡片
• 建议值： padding: 40px 40px 48px;（上下平衡）

3. 删除不再使用的 CSS (Favorites.css)

• 位置： 第 82-118 行
• 删除内容： .favorites-stats-row 相关样式
• 保留： 如有其他引用则保留

4. 删除不再使用的 state（可选优化）

• 如果 counts state 只在统计卡片中使用，可以移除
• 注意： counts 还在 Tabs 标签页中使用（显示数量），所以必须保留

5. 验证收藏功能

• 确保 loadFavorites 函数正确调用 /user/favorites/ API
• 确保收藏按钮 ToolFavoriteButton 正常工作
• 确保点击收藏/取消收藏后数据正确更新

涉及文件

文件	修改内容
Favorites.tsx	删除 favorites-stats-row div 区块
Favorites.css	调整 .favorites-hero padding，删除 .favorites-stats-row 相关样式

验证步骤

1. 打开收藏页面 (/favorites)
2. 确认统计卡片区块已消失
3. 确认 Hero 区域间距正常，不会显得太空
4. 确认 Tabs 标签页仍然显示正确数量
5. 测试收藏功能：
   • 登录状态下访问工具详情页
   • 点击收藏按钮
   • 刷新收藏页面，确认收藏项出现
   • 再次点击取消收藏
   • 刷新收藏页面，确认收藏项消失