wait4xandGLM-5.3
b41b4ba8a5
用户要求关于页「深入探索和设计提出 3-5 个方案，并设计出页面供我审阅」。五案共用
about.yaml 真实数据（选哪个都不用迁移内容）：
A 白纸单栏：后台就是一个 markdown 编辑器，身份卡 + 单栏全文连排——编辑自由度最大
B 名片双栏：左侧 sticky 身份名片，右侧正文分节——个人站经典形态
C 杂志分节：大字引言 + 编号分节（01 关于我 / 02 兴趣版图 / 03 找到我 / 04 本站构建）
+ 右侧粘性目录跟随滚动
D 时间线：把"我是谁"讲成轨迹（起点气象 → 第二主线代码 → 作品 → 信条），沿线节点
E 卡片流：身份卡打头，正文/兴趣/链接/构建各占一张卡片，两列错落
content-lint 白名单加一次性预览路由（无 en 对应页）。
验证: 构建 53 页 exit 0；content-lint 53 页 0/0/0；
Playwright 实测五案均渲染（3 枚图标 svg / IdCard / 9 条找得到我链接）、
1280 与 390 零横向溢出
Spec: 2026-11-04_blog-5k-about-designs (T1)
Co-authored-by: GLM-5.3
66 lines
3.3 KiB
Markdown
66 lines
3.3 KiB
Markdown
# Phase 5k：关于页形态探索（5 案预览 + 选型落地）- 项目范围
|
||
|
||
<!-- spec-format: 2 -->
|
||
|
||
## 1. 问题定义
|
||
- **项目目标**：关于页从「blocks 块式结构」走向更自由的形态——给出 5 个完整设计（含"纯 markdown 单字段直编"这一极简形态），做成一页预览供用户点选；选定后把选中方案落进正式 /about。
|
||
- **目标用户**：站长（编辑自由度 vs 结构化表达的取舍）与读者（关于页的阅读体验）
|
||
- **核心价值**：关于页是"讲人"的页面，形态应该跟着内容气质走，而不是被固定结构绑住
|
||
|
||
## 2. 假设与待确认
|
||
|
||
### 2.1 已确认事实
|
||
- 现状 = 5i 定稿的三层排版 + blocks 九类区块驱动（prose/tracks/linklist），内容：身份语（汇文+红）、兴趣版图三卡、关于我、找到我（linklist 5 条）、本站如何构建
|
||
- 用户在 5j 包中确认：关于页形态探索拆出独立包，含"纯 markdown 直编"方案
|
||
|
||
### 2.2 关键假设
|
||
- 五案共用同一份数据（about.yaml blocks），只是"结构与视觉"不同——切换成本=零内容迁移
|
||
|
||
### 2.3 待确认问题
|
||
- [ ] 五案选型（用户在 /about-preview/ 点选）
|
||
|
||
### 2.4 可选解释与取舍
|
||
- 选定方案若为"纯 markdown 直编"，blocks 保留为高级通道（后台仍可切回）
|
||
|
||
### 2.5 已证伪路径
|
||
- 无（本包是设计探索包）
|
||
|
||
## 3. 功能范围
|
||
|
||
### 3.1 核心功能（MVP）
|
||
- [ ] T1 预览页：/about-preview/ 五案并陈（A 白纸单栏 / B 名片双栏 / C 杂志分节带目录 / D 时间线主导 / E 卡片流），共享 about.yaml 真实数据
|
||
- [ ] T2 用户选型后落地正式 /about 并删除预览路由
|
||
|
||
### 3.2 扩展功能
|
||
- 无
|
||
|
||
### 3.3 不在范围内
|
||
- 关于页内容改写（内容是用户的）、后台表单重构
|
||
|
||
## 4. 最小实现路径
|
||
- 最简可行：预览页一次性路由 + 共用数据渲染五案；落地只搬选中方案的模板
|
||
- 暂不引入：新的后台字段（选 A 则零新字段；其它案沿用现有 blocks 字段）
|
||
|
||
## 5. 技术决策
|
||
- 技术栈：Astro 7.4.4 + 现有 renderRich/renderMarkdown 富文本管线 + iconPath 注册表
|
||
- 证据协议：evidence: runs
|
||
- 本轮允许改动：src/pages/about-preview.astro（新，一次性）、src/components/pages/AboutPage.astro、content/site/about.yaml、scripts/build-perf/content-lint.mjs（预览路由白名单）、src/i18n/ui.ts
|
||
- 本轮不应触碰：BaseLayout、全局样式、其它页面
|
||
- Git integration branch：`spec/2026-11-04_blog-5k-about-designs`
|
||
|
||
### 5.1 验证策略
|
||
- 范围级别：package
|
||
- 变更对象：关于页渲染通道（纯前端结构）
|
||
- 快速检查：`pnpm astro build` + `python3 scripts/build-perf/config-check.py .`
|
||
- 集成检查：E2E 56 项 + content-lint 0/0/0
|
||
- 全项目检查：生产预览页五案可达、选中案落地后 /about 渲染正确
|
||
- 升级触发：关于页为独立页面且不动全局样式，升级为「该页视觉复核」即可
|
||
|
||
## 6. 成功标准与验证方式
|
||
- [ ] 预览页五案可达且共用真实数据 -> verify: task_0001
|
||
- [ ] 用户选定方案落地正式 /about，预览路由删除 -> verify: task_0002（manual: 需用户点选，落地后人工核验）
|
||
|
||
## 7. 风险与约束
|
||
- 灰阶骨架红线、双语红线不变
|
||
- 预览路由一次性：用户选定后必须删除（含 lint 白名单）
|