Skip to content

feat(article): 文章列表添加日期热力图、分类和标签筛选#33

Open
kev1nweng wants to merge 1 commit into
mainfrom
restore-article-filter
Open

feat(article): 文章列表添加日期热力图、分类和标签筛选#33
kev1nweng wants to merge 1 commit into
mainfrom
restore-article-filter

Conversation

@kev1nweng
Copy link
Copy Markdown
Member

@kev1nweng kev1nweng commented Apr 16, 2026

问题描述

现有文章列表页只有关键词搜索,无法按日期、分类、标签筛选。文章数量增多后定位某篇文章很不方便,而闪念页面已有完善的筛选交互(热力图、标签云、时间快捷筛选),值得参考。

解决方案

  1. 左侧边栏布局 - 参考闪念页面,在文章列表左侧添加 272px 宽的侧边栏,内含热力图、时间快捷筛选、分类标签云、标签标签云
  2. 日期热力图 - 复用闪念页面的 ContributionGraph 组件,点击某天按日期筛选文章
  3. 时间快捷筛选 - 全部 / 今日 / 本月三个快捷入口,带文章数量统计
  4. 分类和标签筛选 - 从文章数据中自动统计分类/标签及其计数,以标签云形式展示,点击即可筛选
  5. 筛选互斥逻辑 - 日期、标签、分类、时间范围四种筛选互斥(同闪念页逻辑),切换时自动清除其他筛选条件
  6. 筛选条件标签 - 右侧内容区顶部显示当前激活的筛选条件,可单独点击 X 清除

改动范围

  • frontend/src/views/articles/list/index.vue - 添加左侧边栏布局、筛选条件标签
  • frontend/src/views/articles/list/composables/useArticleList.ts - 新增日期/标签/分类/时间筛选状态和逻辑,热力图/标签/分类统计数据计算
  • frontend/src/locales/*.json (11个语言文件) - 新增 todayArticlesmonthArticlesallArticlesallCategories 四个 i18n 键

测试

已在本地验证:热力图日历点击某天可按日期筛选;今日/本月快捷筛选正常工作;分类和标签云点击可筛选,计数正确;筛选互斥逻辑正常(选标签清除日期,选日期清除标签等);筛选条件标签显示正确且可单独清除;分页在筛选后正常工作。
关联 Issue: #21
分支已推送至 origin/feat/article-filter。

Closes #21

@kev1nweng kev1nweng changed the title feat(article): 重新恢复文章筛选与热力图功能 feat(article): 文章列表添加日期热力图、分类和标签筛选 Apr 16, 2026
@kev1nweng kev1nweng requested a review from Tespera April 17, 2026 03:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] 文章管理增强

1 participant