标签页重构与可视化升级记录
标签页重构与可视化升级记录
这篇文章记录一次围绕标签页的持续迭代：从基础统计、空态健壮性，到多种可视化的引入，再到组件解耦与数据处理抽离。目标是让标签页既“好看”，也“好维护”。
变更摘要
- 统一标签 URL 编码，避免空格或中文标签导致的路径问题
- 增加空态守卫，修复无标签/无文章时的渲染与除零风险
- 新增累计占比曲线、矩形树图、共现网络图三种可视化
- 词云移动到标签列表之前，并抽离词云数据生成逻辑
- 标签页拆分为多个组件，页面逻辑明显收敛
- 两列统计布局尝试后回滚，保留单列展示
关键改动与设计考虑
1. URL 编码统一
标签链接统一走 tagHref，确保中文或特殊字符在路由中安全、可预期。
const tagHref = (tag: string) => `/tags/${encodeURIComponent(tag)}`;这样做避免了多个组件内重复拼接 URL，也降低了路径编码遗漏的风险。
2. 空态守卫
标签数据可能为空，必须避免以下情况：
- 直接读取
sortedTags[0]抛错 totalPosts / totalTags产生除零- 图表/词云在无数据时空白或脚本报错
处理方式是统一用 hasTags 与空态分支渲染，同时为统计数值提供安全默认值。
3. 可视化扩展
累计占比曲线
按标签出现次数排序，计算累计占比，展示“头部标签覆盖率”的直观曲线。
矩形树图（Treemap）
最初尝试基于图表插件渲染，但由于依赖不可用导致空白，最终改为 Canvas 自绘：二分切分布局、面积按权重分配，块足够大时显示标签和数量。
共现网络图
以标签共现为边权，选取 Top 标签与 Top 边进行布局绘制，用简单的圆形布局增强可读性，同时保持渲染轻量。
4. 词云数据抽离
词云数据生成从页面内移动到独立工具模块，保持数据处理集中，同时可复用。
核心策略不变：
- 标签权重 ×3
- 标题权重 ×2
- 正文权重 ×2
- 描述权重 ×1
5. 标签页组件解耦
将标签页拆分为以下组件，页面只保留数据组装与组件编排：
TagsHeaderTagsStatisticsTagsWordCloudTagsGridTagsBackLink
这样做的收益是可维护性与可读性大幅提高，后续只需在对应组件内迭代局部逻辑。
回滚记录
统计图布局曾尝试两列展示，但在 PC 端观感不佳，最终回滚为单列。这个过程也提醒我：视觉布局调整必须基于真实页面效果，而不是仅凭“理论上的紧凑”。
小结
这次重构的核心不是“堆功能”，而是围绕真实问题做连续收敛：
- 先解决健壮性与链接一致性
- 再引入新的表达方式（图表/网络图）
- 最后回归结构，把复杂度拆散
下一步如果继续演进，建议聚焦在交互提示（hover/tooltip）与性能观察，而不是继续扩张图表类型。