# M11 / issue-109 M7 展示层与内容接入从联调壳到真实页面教程正文

- Issue：`#109`
- 里程碑：`M11 教程正文整理：从大纲到系列文章`
- 分支：`fys-dev/docs-m11-issue-109-m7-display-article`
- 日期：`2026-03-27`

## 背景

`M2 ~ M6` 正文已经落地，但 `M7` 目前仍主要停留在里程碑大纲和 issue 级开发日志层。

为了让读者真正理解“项目是如何从联调验证壳推进到真实内容进入真实页面，以及为什么这一轮必须先做结构接稳而不是直接做视觉重设计”，本轮继续按教程整理流程，把 `M7` 扩写为一篇可独立阅读的正文文章。

## 本次目标

- 在 `docs/50-教程文章/` 中新增 `M7` 正文
- 更新正文目录，让 `M2 -> M7` 阅读路径连续
- 保持正文聚焦 `M7` 的真实内容接入与展示层结构整理，不越界扩写 `M8 ~ M10`
- 继续维持正文、大纲、开发日志三层职责分离

## 非目标

- 不新增功能代码
- 不修改现有 `M7` 实现
- 不同时扩写其他里程碑正文
- 不把文章写成开发日志或提交记录

## Plan

1. 先复盘 `M7` 大纲与 `issue-30 ~ issue-34` 开发日志
2. 提炼正文主线，围绕“为什么先接稳结构再升级视觉”组织全文
3. 更新正文目录，补齐本轮开发日志
4. 做文档级 review 与人工校对，再进入提交阶段

## 实际改动

- 更新 `docs/50-教程文章/README.md`
- 新增 `docs/50-教程文章/06-M7-展示层与内容接入从联调壳到真实页面-为什么先接稳结构再升级视觉.md`
- 新增本篇开发日志，记录本轮文档任务

## Review 记录

### 是否符合当前 Issue 与里程碑目标

符合。当前只做了：

- 增加 `M7` 正文文章
- 更新正文目录入口
- 补充本轮文档开发日志

没有提前进入：

- `M8 ~ M10` 正文扩写
- 功能实现或重构
- 文档体系大规模改动

### 是否存在可继续复用的结构

- 当前正文结构仍可继续复用到后续里程碑：
  - 为什么这个里程碑值得单独成立
  - 本轮真正交付什么
  - issue 拆解顺序
  - 关键设计取舍
  - 测试重点
  - 容易踩的坑
  - 与下一里程碑的衔接
- `docs/50-教程文章/README.md` 已形成连续正文目录，后续可继续顺序扩展

### Review 结论

- 通过
- 可进入文档级自测

## 自测结果

### 1. 正文目录校对

- 检查 `docs/50-教程文章/README.md` 是否包含 `M2 -> M7` 连续入口
- 结果：通过

### 2. 正文范围校对

- 检查文章是否仍聚焦 `M7` 的真实内容接入与展示层结构整理
- 结果：通过
- 备注：正文围绕联调收束、真草稿、真实内容迁移、模块化渲染与共享展示边界展开，没有扩写到持久化、共享契约或更深视觉重设计

### 3. 文档分层校对

- 检查正文、大纲、开发日志之间是否职责清晰
- 结果：通过
- 结论：
  - `docs/40-教程与博客/` 继续保留里程碑大纲
  - `docs/30-开发日志/` 继续保留 issue 过程记录
  - `docs/50-教程文章/` 继续沉淀对外正文

## 遇到的问题

### 1. `M7` 容易被写成“页面改造清单”

- 风险：如果只按页面文件或组件罗列改动，读者会看不出这一轮真正收住了哪些结构边界
- 处理：改为围绕“为什么先接稳结构再升级视觉”组织全文，把各 issue 收成一条连续主线

### 2. 展示层话题很容易顺手进入设计系统或重设计

- 风险：会让 `M7` 的重点从“真实内容进入真实页面”滑向更大范围的 UI 工程
- 处理：明确把正文边界限定在 `M7` 当前已完成的结构接入与最小共享展示整理

## 后续可继续沉淀的点

- 继续按相同模板扩写 `M8 ~ M10` 正文
- 当正文数量足够后，再整理成面向外部读者的系列导航或 VitePress 侧边栏
