# 开发日志

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

## 背景

公开简历页的技能结构、项目卡片和工作卡片已经能展示真实内容，但还有几处视觉细节不够顺手：技能项横向挤压、时间线左线过长、图表视图使用百分比表达不够真实。

## 本次目标

- 将技能结构视图改成 label 一行、内容一行的两段式阅读。
- 将项目与工作卡片的左侧蓝线收短到标题区。
- 将技能图表视图改成按真实条目数展示的点阵排行。

## 非目标

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

## TDD / 测试设计

- 更新 `published-resume-shell` 测试，覆盖技能结构解析和图表视图文案变化。
- 保持中英文切换、主题切换和三视图切换的既有行为不变。

## 实际改动

- 调整 `PublishedResumeSkillsSection` 的结构视图排版，将 `label` 与 `content` 改为上下分行。
- 重写图表视图为“点阵排行”，移除百分比和进度条。
- 调整项目与工作模块头部结构，把蓝色装饰线收口到标题区内部。
- 在 `apps/web/app/globals.css` 中同步收口对应时间线样式。

## Review 记录

- 本次改动只触达 `apps/web` 展示层，符合 issue 目标。
- 图表表达改为真实条目数，避免把离散列表数据包装成伪精确百分比。

## 自测结果

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

## 遇到的问题

- 当前时间线装饰线使用整卡伪元素，不适合单独限制到标题区高度。
- 通过将装饰线改为 header 内显式元素，避免了整卡高度联动问题。

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

- 简历展示里如何判断“哪些图表是诚实的，哪些图表会制造伪精确”。
- 展示层如何只改视觉表达而不触碰后台录入和发布契约。

## 后续待办

- 与现有亮点信号卡、头像区一起再做一轮整体视觉联调。
- 如需进一步增强项目与工作模块的层次感，再单开 issue 做卡片内部信息架构优化。
