# 开发日志

- Issue：#152
- 里程碑：M14 编辑体验与亮点表达重构
- 分支：`fys-dev/feat-m14-issue-151-152-admin-web-polish`
- 日期：2026-04-06

## 背景

公开简历页的技能区已经支持结构、词云和图表三种视图，但桌面端切换仍偏左，图表表达力也偏弱。与此同时，从教育经历开始的 section 卡片整体还有一点“层层叠起”的感觉。

## 本次目标

- 将技能区主切换在桌面端移动到右侧，移动端保留上方布局。
- 为图表模式提供雷达图和饼图两种可长期切换的方案。
- 对公开内容 section 做轻量视觉收口，降低层层包裹感。

## 非目标

- 不改 admin 编辑器。
- 不改 server、共享 schema 或发布接口。
- 不引入新的图表依赖库。

## TDD / 测试设计

- 更新 `published-resume-shell` 测试，覆盖图表模式下的二级切换和 SVG 图表渲染。
- 继续校验页面中不出现百分比或占比文案。

## 实际改动

- 在 `PublishedResumeSkillsSection` 中新增 `chartMode`，支持 `radar` 和 `pie` 两种图表子模式。
- 用内联 SVG 实现雷达图和饼图，并统一复用真实的技能条目数。
- 将技能区主切换与图表子切换拆为两级工具栏，桌面端统一右对齐。
- 为 `PublishedResumeSectionCard` 增加轻量内容卡变体，让教育经历到技能结构这些 section 更轻一些。

## Review 记录

- 图表依旧只表达“条目分布/覆盖轮廓”，没有引入熟练度评分。
- 公开页的轻量化仅通过边框、背景和阴影调整完成，没有重做信息架构。

## 自测结果

- `pnpm --filter @my-resume/web test` ✅
- `pnpm --filter @my-resume/web typecheck` ✅

## 遇到的问题

- 点阵图虽然真实，但图形表达偏弱，不足以承担“图表模式”的对比任务。
- 最终改成“一个主图 + 一组图例摘要”的结构，雷达图和饼图都能自然成立。

## 可沉淀为教程/博客的点

- 在没有引入图表库的前提下，如何用 SVG 直接实现轻量化数据可视化。
- 什么时候该让图表承担“对比关系”，什么时候又该避免把简历数据包装得过度精确。

## 后续待办

- 后续如要继续提升技能区表现，可再探索 tag cloud 与图表之间的过渡动画或视图记忆能力。
