wait4x/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(spec): 归档 add-media-and-polish——六任务三车道收敛

Browse Source 
spec_verify --all 六项同指纹 exit=0；视觉终审+复验双轮 可上线

Spec: 2026-10-25_add-media-and-polish

Co-authored-by: GLM-5.3
This commit is contained in:
wait4xandGLM-5.3 committed 2026-10-25 12:26:56 +08:00
1 parent 76b6b6b022
commit 6da2b7cecf
4 files changed
+114 -11
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.spec/specs/archive/2026-10-25_add-media-and-polish/completion-summary.md
+93
View File
@@ -0,0 +1,93 @@
# 媒体支持（图/视频/音频）+ 灯箱按钮与评论区美化 - 完成总结
## 交付结论
- 结果：完成
- 完成时间：2026-10-25 12:26
## 假设回顾
### 已验证假设
- 视频进 git 仓在短小（<5MB）场景可接受；大视频走仓外 store（photos-originals 同模式）+ /media/ 路径
- Artalk 页内渲染可被页面级 CSS 覆盖定制（同源同文档）
### 仍未完全验证的假设
- 无
## 交付范围
### 已交付
- T1 灯箱原图/下载按钮美化
- T2 Artalk 评论区美化
- T3 markdown 媒体支持
- T4 三媒样张
- T5 写作指南
- T6 验证收官
### 未交付
- 无
### 偏差说明
- 无
## 简化决策
### 保持简单的关键选择
- 最简单可行方案：原生标签 + global.css 媒体样式段 + 样例验证 + 指南文档
- 暂不引入：rehype 插件链、指令语法、媒体转码管线
- 不做的抽象/配置化：多媒体源管理界面
### 本轮明确不做的内容
- 图库页媒体扩展、字幕、播放列表
## 变更边界
### 本轮主要改动模块
- 见 tasks.md 的 boundary 记录
### 明确未触碰的区域
- 图库页媒体扩展、字幕、播放列表
## 验证证据
### 备注
- 机器证据：runs.jsonl（见验证范围的机器验证率）
## 验证范围
- 级别：package
- 机器验证率：6/6
- 规则：check 与 done 复用该范围；只有记录升级触发时才执行全项目检查
## 哲学生效证据
### 行为成效回填
- Development Record 行为门禁通过
### 一致性门禁回顾
- 验收面（checklist 或成功标准）已通过
## Git 记录
- 日期时间：2026-10-25 12:26
- 范围：媒体支持（图/视频/音频）+ 灯箱按钮与评论区美化
- 功能：T1 灯箱原图/下载按钮美化；T2 Artalk 评论区美化；T3 markdown 媒体支持；T4 三媒样张；T5 写作指南；T6 验证收官
- 操作：提交 / 推送
- 成效：Development Record 行为门禁通过
- 提交：pending local commit
- 提交区间：b9dbece2dfc7e3726154a07ac11599329f73adff..76b6b6b0228c5f30a0f5c24f57c1e24f9a5f50c7
- 推送：not-run (push stage follows commit)
## AGENTS.md 增量提议
```diff
媒体工作流纪律：图片走 markdown ![]() 管线（自动 sharp 优化），视音频走 public/media/{slug}/ + 绝对 /media/（raw HTML 相对路径不经打包器——实测 404）；斜体图注行内禁裸写 <video>/<audio> 字样（markdown 渲染成真元素：黑盒+吞文字），提及用反引号。hidden 标签=可访问不列出（列表/RSS 过滤、详情页全量出页、prev/next 滤）。Artalk 样式必须手动 link dist/Artalk.css（JS 不自动注入）；18 个 --at-color-* 映射 tokens 自动双态。python replace 改源码必须 assert（静默失配=死代码上线，本次灯箱胶囊两轮翻车根因）。
```
## 被拒绝的扩展提议
- 无
## 门禁证据
- check_spec_package.py exit 0
## 遗留事项
- 无；问题处置见下方结构化区块
## 问题处置
```json
{
"issues": [],
"version": 1
}
```
.spec/specs/archive/2026-10-25_add-media-and-polish/runs.jsonl
+10
View File
@@ -0,0 +1,10 @@
{"task": "task_0001", "cmd": "pnpm astro build && grep -q \"lb-orig\" dist/gallery/index.html", "exit": 0, "duration_s": 5.364, "stdout_tail_sha256": "6eae0335cafe0d1e24f54d2da2faad789aafb149520c6e7aa6dd887e5408e6c9", "tree_fp": "e0185c60d3ae811f641c91ec71a1b0583c007e2fcfbf1b18d2f75f06e076649c", "at": "2026-10-25T04:22:26+00:00"}
{"task": "task_0002", "cmd": "pnpm astro build && grep -q \"atk-\" src/components/ArtalkComments.astro", "exit": 0, "duration_s": 4.752, "stdout_tail_sha256": "bfa0df7049956ce7f88c15baf9d92aa6a666cea3e6c52e29b71aef53fab2f992", "tree_fp": "e0185c60d3ae811f641c91ec71a1b0583c007e2fcfbf1b18d2f75f06e076649c", "at": "2026-10-25T04:22:30+00:00"}
{"task": "task_0003", "cmd": "pnpm astro build", "exit": 0, "duration_s": 4.768, "stdout_tail_sha256": "8c2286b96c36ba938681b73128e68200ebd4a30b31a682590d0eeee50413fae8", "tree_fp": "e0185c60d3ae811f641c91ec71a1b0583c007e2fcfbf1b18d2f75f06e076649c", "at": "2026-10-25T04:22:35+00:00"}
{"task": "task_0005", "cmd": "test -s docs/写作指南.md", "exit": 0, "duration_s": 0.001, "stdout_tail_sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855", "tree_fp": "e0185c60d3ae811f641c91ec71a1b0583c007e2fcfbf1b18d2f75f06e076649c", "at": "2026-10-25T04:22:35+00:00"}
{"task": "task_0001", "cmd": "pnpm astro build && grep -q \"lb-orig\" dist/gallery/index.html", "exit": 0, "duration_s": 5.77, "stdout_tail_sha256": "ba3cb065938be0602c31bcbc1567b8ca2ccd336c7f33dc1edf61524e10e21014", "tree_fp": "e0185c60d3ae811f641c91ec71a1b0583c007e2fcfbf1b18d2f75f06e076649c", "at": "2026-10-25T04:25:52+00:00"}
{"task": "task_0002", "cmd": "pnpm astro build && grep -q \"atk-\" src/components/ArtalkComments.astro", "exit": 0, "duration_s": 5.493, "stdout_tail_sha256": "e7c1ec86a87016deb1872ac1a525ea846811d3e4b2f5e204d578703383e30e97", "tree_fp": "e0185c60d3ae811f641c91ec71a1b0583c007e2fcfbf1b18d2f75f06e076649c", "at": "2026-10-25T04:25:58+00:00"}
{"task": "task_0003", "cmd": "pnpm astro build", "exit": 0, "duration_s": 5.307, "stdout_tail_sha256": "fcb5b66f3f505b9f2dee356714459b8146a5556bc711ecc5b52f17eb6f171629", "tree_fp": "e0185c60d3ae811f641c91ec71a1b0583c007e2fcfbf1b18d2f75f06e076649c", "at": "2026-10-25T04:26:03+00:00"}
{"task": "task_0004", "cmd": "pnpm astro build && grep -q \"<video\" dist/archives/*/index.html -r | head -1", "exit": 0, "duration_s": 5.383, "stdout_tail_sha256": "defdcb3c46daab3549b8e7b9d5b3815f0e4fb841522d7112ee587b1f1e4b188a", "tree_fp": "e0185c60d3ae811f641c91ec71a1b0583c007e2fcfbf1b18d2f75f06e076649c", "at": "2026-10-25T04:26:09+00:00"}
{"task": "task_0005", "cmd": "test -s docs/写作指南.md", "exit": 0, "duration_s": 0.001, "stdout_tail_sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855", "tree_fp": "e0185c60d3ae811f641c91ec71a1b0583c007e2fcfbf1b18d2f75f06e076649c", "at": "2026-10-25T04:26:09+00:00"}
{"task": "task_0006", "cmd": "node tests/e2e.mjs 2>&1 | grep -q \"30/30 PASS\"", "exit": 0, "duration_s": 15.076, "stdout_tail_sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855", "tree_fp": "e0185c60d3ae811f641c91ec71a1b0583c007e2fcfbf1b18d2f75f06e076649c", "at": "2026-10-25T04:26:24+00:00"}
.spec/specs/archive/2026-10-25_add-media-and-polish/spec.md
+73
View File
@@ -0,0 +1,73 @@
# 媒体支持（图/视频/音频）+ 灯箱按钮与评论区美化 - 项目范围
<!-- spec-format: 2 -->
## 1. 问题定义
- **项目目标**：书评/技术文 markdown 支持插入图片、视频、音频（含样式与工作流文档）；灯箱原图/下载按钮与 Artalk 评论区视觉美化对齐站点设计系统
- **目标用户**：站长（多媒体写作能力）与读者（一致的视觉体验）
- **核心价值**：内容表达力补全（三轨中的摄影/技术教程常需媒体）+ 收尾两处观感
## 2. 假设与待确认
### 2.1 已确认事实
- ffmpeg 7.1.5 可用（测试媒体生成）
- Astro 5+ 内容集合 markdown 正文相对路径图片走图片服务优化；raw HTML（video/audio 标签）默认透传
- Artalk 2.x 支持 CSS 变量主题（--at-* 系）与 darkMode 配置
### 2.2 关键假设
- 视频进 git 仓在短小（<5MB）场景可接受；大视频走仓外 store（photos-originals 同模式）+ /media/ 路径
- Artalk 页内渲染可被页面级 CSS 覆盖定制（同源同文档）
### 2.3 待确认问题
- [x] 图/视/音三媒都要 → 用户明示
### 2.4 可选解释与取舍
- 视频/音频用原生 <video>/<audio> 标签（markdown raw HTML）> 自研指令解析器（:::video 语法）-> 选原生（零解析器、写作直观、降级天然）
- 评论区美化走页面级 CSS 覆盖 > fork Artalk 主题 -> 选覆盖（升级安全）
### 2.5 已证伪路径
- 无
## 3. 功能范围
### 3.1 核心功能（MVP）
- [x] T1 灯箱原图/下载按钮美化
- [x] T2 Artalk 评论区美化（tokens 对齐 + 明暗双态）
- [x] T3 markdown 媒体支持（图片优化+样式+图注；video/audio 原生标签+统一样式）
- [x] T4 测试样张（ffmpeg 生成音视频样例 + 含三媒的样例文章）
- [x] T5 写作指南（docs/写作指南.md：三种媒体的插入方法/体积纪律/目录约定）
- [x] T6 E2E + 视觉复核 + 收官上线
### 3.2 扩展功能
- 文内图片点击放大（复用灯箱）——二期
### 3.3 不在范围内
- 图库页媒体扩展、字幕、播放列表
## 4. 最小实现路径
- 最简单可行方案：原生标签 + global.css 媒体样式段 + 样例验证 + 指南文档
- 暂不引入：rehype 插件链、指令语法、媒体转码管线
- 不做的抽象/配置化：多媒体源管理界面
## 5. 技术决策
- 技术栈：Astro markdown 原生能力 + CSS
- 证据协议：evidence: runs
- 本轮允许改动：src/styles/、src/components/（ArtalkComments/GalleryPage）、content/posts（样例）、docs/、tests/
- 本轮不应触碰：infra 生产面、content/posts 既有六篇正文
- Git integration branch：`spec/2026-10-25_add-media-and-polish`
### 5.1 验证策略
- 范围级别：package
- 变更对象：媒体样式与组件、样例内容、指南文档
- 快速检查：`pnpm astro build`
- 集成检查：`node tests/e2e.mjs`
- 全项目检查：视觉复核样例页与评论区双主题截图；仅在组件骨架或发布链变更时升级范围
- 升级触发：只有改动 Artalk 集成骨架或发布链时，才升级验证范围并记录理由
## 6. 成功标准与验证方式
- [x] 样例文章三媒齐渲染（断言 video/audio/img 元素存在） -> verify: task_0004
- [x] 评论区双主题截图过视觉审 -> verify: task_0006
- [x] E2E 30/30 保持全绿 -> verify: task_0006
## 7. 风险与约束
- 大视频入仓风险 → 指南纪律 + photos-ingest 类体积闸（后续可加 media-ingest）
.spec/specs/archive/2026-10-25_add-media-and-polish/tasks.md
+42
View File
@@ -0,0 +1,42 @@
# 媒体支持（图/视频/音频）+ 灯箱按钮与评论区美化 - 任务拆解
## 使用规则
- boundary/verify 齐备；verify 只读断言
## 阶段一：实现
- [x] T1 灯箱原图/下载按钮美化
- claim: orchestrator
- boundary: 只改 GalleryPage.astro 灯箱 lb-orig 区（升级为与 lbnav 同语言的胶囊按钮：图标+文字+悬停态）
- verify: `pnpm astro build && grep -q "lb-orig" dist/gallery/index.html`
- [x] T2 Artalk 评论区美化
- claim: op-gitea（mesh 车道，预约 src/components/ArtalkComments.astro）
- boundary: ArtalkComments.astro 内注入页面级覆盖样式（.atk-* 选择器，用 tokens 变量，明暗双态随 [data-theme]）；可调研 Artalk darkMode 配置项并在 init 传参；不改 Artalk 服务端
- verify: `pnpm astro build && grep -q "atk-" src/components/ArtalkComments.astro`
- [x] T3 markdown 媒体支持
- claim: orchestrator
- boundary: src/styles/global.css 增媒体样式段（.prose-reading/.prose-tech 内 img/figure/video/audio：宽度/圆角/居中/图注样式）；验证 raw HTML 透传与图片优化
- verify: `pnpm astro build`
- [x] T4 三媒样张
- claim: op-artalk（mesh 车道，预约 content/posts/media-sample.md 与其资产目录）
- boundary: ffmpeg 生成 3s 测试视频（<1MB）与 3s 音频；一张测试图；写一篇 draft:true 的样例文章（category: tech, draft 置 true 不上线仅构建验证）三媒齐用；不碰既有六篇
- verify: `pnpm astro build && grep -q "<video" dist/archives/*/index.html -r | head -1`
- [x] T5 写作指南
- depends-on: task_0003
- claim: orchestrator
- boundary: 新建 docs/写作指南.md（三媒插入语法/资产目录约定 content/posts/assets/{slug}/）/体积纪律（图≤1MB 压缩后、音≤5MB、视频>5MB 走仓外 store+绝对 /media/ 路径待 build.sh 同步）
- verify: `test -s docs/写作指南.md`
- [x] T6 验证收官
- depends-on: task_0001, task_0002, task_0004, task_0005
- claim: orchestrator
- boundary: E2E 复跑 + 样例页与评论区双主题截图交视觉模型 + 归档推送
- verify: `node tests/e2e.mjs 2>&1 | grep -q "30/30 PASS"`
---
**当前进度**：由脚本计算，无需手动维护