Compare commits

..

28 Commits

Author SHA1 Message Date
b4fa41338b update 2026-09-28 19:28:55 +08:00
f56f46ae2f update 2026-09-28 10:53:33 +08:00
f8ff5b86c7 update 2026-09-25 11:32:11 +08:00
4051c23d75 update 2026-09-23 00:19:34 +08:00
a8fcafac10 update 2026-09-22 21:39:45 +08:00
9473f00c98 update 2026-09-22 11:12:08 +08:00
4b409b5a29 update 2026-09-20 00:44:14 +08:00
b04a511b26 update 2026-09-17 22:06:11 +08:00
70a3304dc1 update 2026-09-16 21:30:49 +08:00
ad028c9ebd update 2026-09-16 00:55:27 +08:00
3f79cef587 update 2026-09-15 19:59:14 +08:00
199300b203 update 2026-09-15 00:31:31 +08:00
afff2d9a49 update 2026-09-14 21:30:15 +08:00
548155625d update 2026-09-14 00:42:45 +08:00
d6cb616337 update 2026-09-13 21:39:50 +08:00
c85c561a99 update 2026-09-13 00:49:42 +08:00
19fb597bb4 update
Some checks failed
deploy / deploy (push) Has been cancelled
2026-09-06 00:50:52 +08:00
36f3ad039f update
Some checks failed
deploy / deploy (push) Has been cancelled
2026-09-03 19:45:36 +08:00
6902376bc2 update
Some checks failed
deploy / deploy (push) Has been cancelled
2026-09-03 00:32:17 +08:00
64af75c0a9 update
Some checks failed
deploy / deploy (push) Has been cancelled
2026-09-02 21:50:30 +08:00
50e5775dc8 update
Some checks failed
deploy / deploy (push) Has been cancelled
2026-09-01 00:08:05 +08:00
97b023bbbd update
Some checks failed
deploy / deploy (push) Has been cancelled
2026-08-31 19:59:36 +08:00
0d13748d7e update
Some checks failed
deploy / deploy (push) Has been cancelled
2026-08-31 00:43:39 +08:00
662b12c612 update
Some checks failed
deploy / deploy (push) Has been cancelled
2026-08-30 22:49:56 +08:00
dd66e5b693 update
Some checks failed
deploy / deploy (push) Has been cancelled
2026-08-30 10:28:22 +08:00
e24bfe164d update
Some checks failed
deploy / deploy (push) Has been cancelled
2026-08-29 20:17:13 +08:00
a133413d74 Merge branch 'main' of https://git.23cm.cn/toom1996/frontend_v2
Some checks failed
deploy / deploy (push) Has been cancelled
2026-08-29 15:52:55 +08:00
3c7c5d8855 update 2026-08-29 15:47:58 +08:00
171 changed files with 20544 additions and 4966 deletions

View File

@ -0,0 +1,212 @@
---
name: brainstorming
description: "在任何创造性工作之前必须使用此技能——创建功能、构建组件、添加功能或修改行为。在实现之前先探索用户意图、需求和设计。"
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [design, planning]
---
# 头脑风暴:将想法转化为设计
通过自然的协作对话,帮助将想法转化为完整的设计和规格说明。
先判断这个需求需要多少流程,然后沿着对应的路径推进:理解上下文、完善想法、展示设计、获得你的人类伙伴批准。
<HARD-GATE>
在你告诉你的人类伙伴你打算做什么、并得到他们批准之前,不要调用任何实现技能、编写任何代码、搭建任何项目或采取任何实现行动。这适用于下面**每一条路径上的每一个任务**——仪式感随任务大小缩放,批准这道关卡永远不缩放。
</HARD-GATE>
## 三条路径
在提出第一个问题之前,先给需求分类,并把分类**说出来**——"这个看起来是有界的,所以我会在这里直接给一份简短设计,而不是写规格文档"——好让你的人类伙伴能纠正你:
- **探路(Spike)** — 一个可行性问题("我们能不能……"、"有没有可能……"、"糙一点没关系"),它的产出是一个**答案**,不是要留下的代码。用 2-3 句话说明问题和你打算怎么试,得到一个点头,然后用不牺牲正确性的最低成本去弄清楚。不写设计文档,不写规格文件。以建议的形式汇报发现;过程中搭的任何东西都明确标注为一次性的。
- **有界(Bounded)** — 对**本仓库里已经存在的代码**做范围明确的改动:加一个开关、一个小接口、改一个文件的 bug。"知道这是个什么类型的应用"不算数——有界意味着**你要改的那条流程此刻就在仓库里、可以读**。如果没有现成的流程可改,这个任务就不是有界的。问那些真正重要的澄清问题,**在对话里**给出一份简短设计(几句话到几个短段落),然后**停下**。只有在你的人类伙伴对这份设计说"可以"之后,实现才开始——有界任务的批准和架构级任务的批准是同样硬的关卡。不写规格文件,不写实现计划文档。
- **架构级(Architectural)** — 新项目、新子系统,以及会重构组件之间关系、或改动他人依赖的接口的改动。走完整流程:提问、方案对比、分节设计、书面规格,然后交给 writing-plans 技能。
在两条路径之间拿不准时,选更重的那条。这个棘轮只朝一个方向转:任务进行中发现隐藏的复杂度,就**升级**路径——停下来、说明情况、升上去。任何情况下都不在任务中途降级。
## 反模式:"这个太简单了,不需要批准"
每条路径的终点都是你的人类伙伴在实现之前批准你的意图。一个待办事项列表、一个单函数工具、一个配置变更——设计可以只是对话里的两句话,但你**必须**把它展示出来并获得批准。"简单"的任务恰恰是未经检验的假设造成最多浪费的地方。随简单程度缩放的是**产出物**,永远不是批准。
## 危险信号
| 心里的想法 | 实际情况 |
|---------|---------|
| "这个太简单了,不需要设计" | 简单意味着简短的设计,不是没有设计。对话里两句话,然后获得批准。 |
| "我就说它是有界的,跳过规格文档" | 为了少干活而去够一个标签,这本身就是"拿不准"——选更重的那条路径。 |
| "它是有界的,设计也很显然——我一边让他们读一边开工" | 关卡是**批准**,不是设计的长度。展示完就停,直到听见"可以"。 |
| "这类应用我很熟,所以它是有界的" | 有界衡量的是**仓库**,不是你的熟悉程度。新项目没有现成的流程可改——那是架构级。 |
| "探路跑通了,那这些代码就留着吧" | 探路的产出是一个答案。要留下代码是一个**新的需求**——给它重新分类。 |
| "范围是变大了,但我快做完了,不用重新分类" | 隐藏的复杂度会在任务中途升级路径。停下来,说明情况。 |
| "他们批准了探路,那后续改动也算批准了" | 每个任务有自己的分类,也有自己的批准。 |
## 检查清单
先分类,宣布路径,然后为你所在路径上的每个条目创建任务,并按顺序完成。
**探路(Spike):**
1. **探索项目上下文** — 够用来框定这次试探即可
2. **展示问题 + 试探计划** — 2-3 句话
3. **获得批准** — 一个点头就够
4. **动手调查** — 用不牺牲正确性的最低成本
5. **汇报发现** — 以建议的形式;搭出来的任何东西都标注为一次性的
**有界(Bounded):**
1. **探索项目上下文** — 检查文件、文档、最近的 commit
2. **提出澄清问题** — 每次一个,只问那些真正重要的
3. **在对话里展示简短设计** — 思路、会动哪些文件、怎么测
4. **获得批准** — **停下**并等待一个明确的"可以";展示完设计顺口就开工,等于跳过了关卡
5. **实现** — 走正常的开发工作流(TDD 同样适用);不写计划文档
**架构级(Architectural):**
1. **探索项目上下文** — 检查文件、文档、最近的 commit
2. **在需要时才提供视觉伴侣** — **不要一上来就提**。第一次遇到"这个问题画出来比说出来更清楚"时,才在那一刻提供(作为独立的一条消息);对方同意后,浏览器标签页会为你打开。如果自始至终没出现视觉问题,就永远不要提。参见下方"视觉伴侣"部分。
3. **提出澄清问题** — 每次一个,了解目的/约束/成功标准
4. **提出 2-3 种方案** — 附带权衡分析和你的推荐
5. **展示设计** — 按复杂度分节展示,每节展示后获得用户批准
6. **编写设计文档** — 保存到 `docs/superpowers/specs/YYYY-MM-DD-<topic>-design.md` 并 commit
7. **规格自检** — 快速内联检查占位符、矛盾、模糊性、范围(详见下方)
8. **用户审查书面规格** — 在继续之前请用户审查规格文件
9. **过渡到实现** — 调用 writing-plans 技能创建实现计划
## 流程图
```dot
digraph brainstorming {
"分类:探路 / 有界 / 架构级" [shape=diamond];
"展示问题 + 试探计划(2-3 句)" [shape=box];
"提出澄清问题(有界)" [shape=box];
"在对话里展示简短设计" [shape=box];
"人类伙伴批准?" [shape=diamond];
"动手调查;汇报建议" [shape=doublecircle];
"走正常工作流实现(无计划文档)" [shape=doublecircle];
"探索项目上下文" [shape=box];
"提出澄清问题" [shape=box];
"提出 2-3 种方案" [shape=box];
"分节展示设计" [shape=box];
"用户批准设计?" [shape=diamond];
"编写设计文档" [shape=box];
"规格自检\n(内联修复)" [shape=box];
"用户审查规格?" [shape=diamond];
"调用 writing-plans 技能" [shape=doublecircle];
"发现隐藏复杂度? 升级路径" [shape=box];
"分类:探路 / 有界 / 架构级" -> "展示问题 + 试探计划(2-3 句)" [label="探路"];
"分类:探路 / 有界 / 架构级" -> "提出澄清问题(有界)" [label="有界"];
"分类:探路 / 有界 / 架构级" -> "探索项目上下文" [label="架构级"];
"展示问题 + 试探计划(2-3 句)" -> "人类伙伴批准?";
"提出澄清问题(有界)" -> "在对话里展示简短设计";
"在对话里展示简短设计" -> "人类伙伴批准?";
"人类伙伴批准?" -> "动手调查;汇报建议" [label="探路:是"];
"人类伙伴批准?" -> "走正常工作流实现(无计划文档)" [label="有界:是"];
"发现隐藏复杂度? 升级路径" -> "分类:探路 / 有界 / 架构级";
"探索项目上下文" -> "提出澄清问题";
"提出澄清问题" -> "提出 2-3 种方案";
"提出 2-3 种方案" -> "分节展示设计";
"分节展示设计" -> "用户批准设计?";
"用户批准设计?" -> "分节展示设计" [label="否,修改"];
"用户批准设计?" -> "编写设计文档" [label="是"];
"编写设计文档" -> "规格自检\n(内联修复)";
"规格自检\n(内联修复)" -> "用户审查规格?";
"用户审查规格?" -> "编写设计文档" [label="要求修改"];
"用户审查规格?" -> "调用 writing-plans 技能" [label="批准"];
}
```
**终止状态跟着路径走。** 架构级:头脑风暴之后你唯一要调用的技能是 writing-plans——绝不调用 frontend-design、mcp-builder 或任何其他实现技能。有界:获得批准之后,直接走正常的开发工作流去实现,不写计划文档。探路:终止状态是一份汇报出去的建议。
## 流程详述
下面这些小节服务于**有界**和**架构级**两条路径(探路在"展示试探计划、拿到点头"就停了)。从**探索方案**往后都是架构级路径的深度——对有界的工作来说,上下文加几个问题再加一份对话里的简短设计,就是全部流程。
**理解想法:**
- 首先查看当前项目状态(文件、文档、最近的 commit)
- 在提出详细问题之前,先评估范围:如果需求描述了多个独立子系统(例如"构建一个包含聊天、文件存储、计费和分析的平台"),立即指出这一点。不要花时间用问题去细化一个需要先拆分的项目。
- 如果项目规模过大,单个规格说明无法覆盖,帮助用户分解为子项目:有哪些独立的部分,它们之间有什么关系,应该按什么顺序构建?然后通过正常的设计流程进行第一个子项目的头脑风暴。每个子项目都有自己的规格 → 计划 → 实现周期。
- 对于范围适当的项目,每次提一个问题来完善想法
- 尽量使用选择题,开放式问题也可以
- 每条消息只提一个问题——如果一个主题需要更多探索,拆分成多个问题
- 重点理解:目的、约束、成功标准
**探索方案:**
- 提出 2-3 种不同的方案及其权衡
- 以对话的方式展示选项,附上你的推荐和理由
- 先展示你推荐的方案并解释原因
- 严格遵循 YAGNI —— 从每个方案和设计里移除不必要的功能
**展示设计:**
- 一旦你认为理解了要构建的内容,就展示设计
- 每个部分的篇幅与其复杂度匹配:简单的几句话,复杂的最多 200-300 字
- 每个部分展示后询问是否正确
- 涵盖:架构、组件、数据流、错误处理、测试
- 随时准备回头澄清不明确的地方
**面向隔离和清晰的设计:**
- 将系统拆分为更小的单元,每个单元有一个明确的职责,通过定义良好的接口通信,可以独立理解和测试
- 对于每个单元,你应该能回答:它做什么,如何使用,它依赖什么?
- 别人能否不看内部实现就理解一个单元的功能?你能否在不影响调用者的情况下修改内部实现?如果不能,边界需要调整。
- 更小、边界清晰的单元也更便于你工作——你对能一次放入上下文的代码推理得更好,文件越专注你的编辑越可靠。当文件变大时,这通常意味着它承担了过多职责。
**在现有代码库中工作:**
- 在提出更改之前先探索现有结构。遵循现有模式。
- 如果现有代码存在影响当前工作的问题(例如文件过大、边界不清、职责纠缠),在设计中包含有针对性的改进——就像一个优秀的开发者在工作中改进经手的代码一样。
- 不要提议无关的重构。专注于服务当前目标的事情。
## 设计之后(架构级路径)
**文档:**
- 将验证通过的设计(规格说明)写入 `docs/superpowers/specs/YYYY-MM-DD-<topic>-design.md`
- (用户对规格位置的偏好优先于此默认值)
- 如果可用,使用 elements-of-style:writing-clearly-and-concisely 技能
- 将设计文档 commit 到 git
**规格自检:**
编写规格文档后,以全新的视角审视它:
1. **占位符扫描:** 有没有"待定"、"TODO"、未完成的章节或模糊的需求?修复它们。
2. **内部一致性:** 各章节之间有矛盾吗?架构和功能描述匹配吗?
3. **范围检查:** 这是否聚焦到可以用一个实现计划覆盖,还是需要进一步拆分?
4. **模糊性检查:** 有没有需求可以被两种方式理解?如果有,选择一种并明确写出来。
发现问题就直接内联修复。无需重新审查——修好继续推进。
**用户审查关卡:**
规格自检完成后,请用户在继续之前审查书面规格:
> "规格已编写并 commit 到 `<path>`。请审查一下,如果在我们开始编写实现计划之前你想做任何修改,请告诉我。"
等待用户回复。如果他们要求修改,做出修改并重新运行规格自检。只有在用户批准后才继续。
**实现:**
- 调用 writing-plans 技能创建详细的实现计划
- 不要调用任何其他技能。writing-plans 是下一步。
## 视觉伴侣
一个基于浏览器的伴侣工具,用于在头脑风暴过程中展示原型、图表和视觉选项。它是一个工具——不是一种模式。接受伴侣意味着它可用于适合视觉呈现的问题;并不意味着每个问题都要通过浏览器。
**提供伴侣(在需要时才提):** **不要一上来就提。** 等到某个问题确实"画出来比说出来更清楚"时再提——要是真正的原型 / 布局 / 图表问题,而不仅仅是话题跟 UI 沾边。第一次出现这种情况时,就在那一刻提供,作为独立的一条消息:
> "接下来这部分,我展示给你看可能更容易理解——我可以在讨论过程中,在一个浏览器标签页里做原型、图表和对比。这个功能还比较新,可能会消耗较多 token。要我打开吗?我来帮你打开。"
**此提议必须是一条独立的消息。** 只有这条提议——不含澄清问题、内容摘要或任何其他内容。等待用户回复。如果他们接受,用 `--open` 启动服务,浏览器会自动打开到第一屏。如果他们拒绝,继续纯文本进行,并且不要再提,除非他们自己提起。
**逐问题决策:** 即使用户接受了,也要对每个问题单独决定是使用浏览器还是终端。判断标准:**用户看到它是否比读到它更容易理解?**
- **使用浏览器** 展示本身就是视觉的内容——原型、线框图、布局对比、架构图、并排视觉设计
- **使用终端** 展示文本内容——需求问题、概念选择、权衡列表、A/B/C/D 文字选项、范围决策
关于 UI 主题的问题不一定是视觉问题。"在这个上下文中个性化是什么意思?"是一个概念问题——使用终端。"哪种向导布局更好?"是一个视觉问题——使用浏览器。
如果他们同意使用伴侣,在继续之前阅读详细指南:
`skills/brainstorming/visual-companion.md`

View File

@ -0,0 +1,213 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Superpowers Brainstorming</title>
<style>
/*
* BRAINSTORM COMPANION FRAME TEMPLATE
*
* This template provides a consistent frame with:
* - OS-aware light/dark theming
* - Header branding and connection status
* - Scrollable main content area
* - CSS helpers for common UI patterns
*
* Content is injected via placeholder comment in #frame-content.
*/
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
/* ===== THEME VARIABLES ===== */
:root {
--bg-primary: #f5f5f7;
--bg-secondary: #ffffff;
--bg-tertiary: #e5e5e7;
--border: #d1d1d6;
--text-primary: #1d1d1f;
--text-secondary: #86868b;
--text-tertiary: #aeaeb2;
--accent: #0071e3;
--accent-hover: #0077ed;
--success: #34c759;
--warning: #ff9f0a;
--error: #ff3b30;
--selected-bg: #e8f4fd;
--selected-border: #0071e3;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #1d1d1f;
--bg-secondary: #2d2d2f;
--bg-tertiary: #3d3d3f;
--border: #424245;
--text-primary: #f5f5f7;
--text-secondary: #86868b;
--text-tertiary: #636366;
--accent: #0a84ff;
--accent-hover: #409cff;
--selected-bg: rgba(10, 132, 255, 0.15);
--selected-border: #0a84ff;
}
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
display: flex;
flex-direction: column;
line-height: 1.5;
}
/* ===== FRAME STRUCTURE ===== */
.brand { display: flex; align-items: center; min-width: 0; overflow: hidden; color: var(--text-secondary); line-height: 1; }
.brand a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; min-width: 0; max-width: 100%; line-height: 1; }
.brand-copy { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1; transform: translateY(-1px); }
.brand-logo { display: block; height: 1em; width: auto; max-width: 180px; flex-shrink: 0; filter: invert(1); }
@media (prefers-color-scheme: dark) {
.brand-logo { filter: none; }
}
.status { font-size: 0.7rem; color: var(--status-color, var(--success)); display: flex; align-items: center; gap: 0.4rem; justify-self: end; white-space: nowrap; line-height: 1; }
.status::before { content: ''; width: 6px; height: 6px; background: var(--status-color, var(--success)); border-radius: 50%; }
.main { flex: 1; overflow-y: auto; }
#frame-content { padding: 2rem; min-height: 100%; }
.header {
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
padding: 0.5rem 1.5rem;
flex-shrink: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
min-height: 42px;
}
.header .brand { justify-self: start; width: 100%; font-size: 0.75rem; line-height: 1; }
.header .status { grid-column: 2; line-height: 1; }
.header span {
font-size: 0.75rem;
color: var(--text-secondary);
}
.header .selected-text {
color: var(--accent);
font-weight: 500;
}
/* ===== TYPOGRAPHY ===== */
h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; }
.subtitle { color: var(--text-secondary); margin-bottom: 1.5rem; }
.section { margin-bottom: 2rem; }
.label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
/* ===== OPTIONS (for A/B/C choices) ===== */
.options { display: flex; flex-direction: column; gap: 0.75rem; }
.option {
background: var(--bg-secondary);
border: 2px solid var(--border);
border-radius: 12px;
padding: 1rem 1.25rem;
cursor: pointer;
transition: all 0.15s ease;
display: flex;
align-items: flex-start;
gap: 1rem;
}
.option:hover { border-color: var(--accent); }
.option.selected { background: var(--selected-bg); border-color: var(--selected-border); }
.option .letter {
background: var(--bg-tertiary);
color: var(--text-secondary);
width: 1.75rem; height: 1.75rem;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 0.85rem; flex-shrink: 0;
}
.option.selected .letter { background: var(--accent); color: white; }
.option .content { flex: 1; }
.option .content h3 { font-size: 0.95rem; margin-bottom: 0.15rem; }
.option .content p { color: var(--text-secondary); font-size: 0.85rem; margin: 0; }
/* ===== CARDS (for showing designs/mockups) ===== */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.card {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.15s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.card.selected { border-color: var(--selected-border); border-width: 2px; }
.card-image { background: var(--bg-tertiary); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; }
.card-body { padding: 1rem; }
.card-body h3 { margin-bottom: 0.25rem; }
.card-body p { color: var(--text-secondary); font-size: 0.85rem; }
/* ===== MOCKUP CONTAINER ===== */
.mockup {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
margin-bottom: 1.5rem;
}
.mockup-header {
background: var(--bg-tertiary);
padding: 0.5rem 1rem;
font-size: 0.75rem;
color: var(--text-secondary);
border-bottom: 1px solid var(--border);
}
.mockup-body { padding: 1.5rem; }
/* ===== SPLIT VIEW (side-by-side comparison) ===== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } }
/* ===== PROS/CONS ===== */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.pros, .cons { background: var(--bg-secondary); border-radius: 8px; padding: 1rem; }
.pros h4 { color: var(--success); font-size: 0.85rem; margin-bottom: 0.5rem; }
.cons h4 { color: var(--error); font-size: 0.85rem; margin-bottom: 0.5rem; }
.pros ul, .cons ul { margin-left: 1.25rem; font-size: 0.85rem; color: var(--text-secondary); }
.pros li, .cons li { margin-bottom: 0.25rem; }
/* ===== PLACEHOLDER (for mockup areas) ===== */
.placeholder {
background: var(--bg-tertiary);
border: 2px dashed var(--border);
border-radius: 8px;
padding: 2rem;
text-align: center;
color: var(--text-tertiary);
}
/* ===== INLINE MOCKUP ELEMENTS ===== */
.mock-nav { background: var(--accent); color: white; padding: 0.75rem 1rem; display: flex; gap: 1.5rem; font-size: 0.9rem; }
.mock-sidebar { background: var(--bg-tertiary); padding: 1rem; min-width: 180px; }
.mock-content { padding: 1.5rem; flex: 1; }
.mock-button { background: var(--accent); color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.85rem; }
.mock-input { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; width: 100%; }
</style>
</head>
<body>
<div class="header">
<!-- BRANDING -->
<div class="status">Connecting…</div>
</div>
<div class="main">
<div id="frame-content">
<!-- CONTENT -->
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,167 @@
(function() {
const MIN_RECONNECT_MS = 500;
const MAX_RECONNECT_MS = 30000;
const TOMBSTONE_AFTER_MS = 15000; // show the "paused" overlay after this long disconnected
// Pure: next backoff delay (doubles, capped). Exported for unit tests.
function nextReconnectDelay(current, max) {
return Math.min(current * 2, max);
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = { nextReconnectDelay, MIN_RECONNECT_MS, MAX_RECONNECT_MS, TOMBSTONE_AFTER_MS };
}
// Everything below is browser-only; bail out when loaded in Node (tests).
if (typeof window === 'undefined') return;
let ws = null;
let eventQueue = [];
let reconnectDelay = MIN_RECONNECT_MS;
let reconnectTimer = null;
let disconnectedSince = null;
let everConnected = false;
let tombstoneShown = false;
function sessionKey() {
try {
return window.sessionStorage && window.sessionStorage.getItem('brainstorm-session-key');
} catch (e) {}
return null;
}
function websocketUrl() {
const key = sessionKey();
return 'ws://' + window.location.host + (key ? '/?key=' + encodeURIComponent(key) : '');
}
function reloadAfterRecovery() {
const key = sessionKey();
if (key) {
window.location.replace('/?key=' + encodeURIComponent(key));
} else {
window.location.reload();
}
}
// Reflect connection state in the frame's status pill (absent on full-doc screens).
function setStatus(state) {
const el = document.querySelector('.status');
if (!el) return;
const map = {
connecting: ['Connecting…', 'var(--text-tertiary)'],
connected: ['Connected', 'var(--success)'],
reconnecting: ['Reconnecting…', 'var(--warning)'],
disconnected: ['Disconnected', 'var(--error)']
};
const [text, color] = map[state] || map.disconnected;
el.textContent = text;
el.style.setProperty('--status-color', color);
}
// Self-styled so it works on framed and full-document screens alike.
function showTombstone() {
if (tombstoneShown) return;
tombstoneShown = true;
const el = document.createElement('div');
el.id = 'bs-tombstone';
el.style.cssText = 'position:fixed;inset:0;z-index:99999;display:flex;' +
'align-items:center;justify-content:center;padding:2rem;text-align:center;' +
'background:rgba(20,20,22,0.92);color:#f5f5f7;font-family:system-ui,sans-serif';
el.innerHTML = '<div style="max-width:480px">' +
'<h2 style="margin:0 0 .5rem;font-weight:600">Companion paused</h2>' +
'<p style="margin:0;opacity:.85">This brainstorm companion has stopped. ' +
'Ask your coding agent to bring it back — this page reconnects automatically.</p></div>';
if (document.body) document.body.appendChild(el);
}
function connect() {
if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
setStatus(everConnected ? 'reconnecting' : 'connecting');
ws = new WebSocket(websocketUrl());
ws.onopen = () => {
const recovered = tombstoneShown;
everConnected = true;
disconnectedSince = null;
reconnectDelay = MIN_RECONNECT_MS;
tombstoneShown = false;
setStatus('connected');
eventQueue.forEach(e => ws.send(JSON.stringify(e)));
eventQueue = [];
// Recovered from a tombstoned outage (e.g. the server restarted on the same
// port) — reload through the keyed bootstrap when possible so the cookie is
// refreshed before the visible URL returns to bare /.
if (recovered) reloadAfterRecovery();
};
ws.onmessage = (msg) => {
let data;
try { data = JSON.parse(msg.data); } catch (e) { return; }
if (data.type === 'reload') window.location.reload();
};
ws.onclose = () => {
ws = null;
if (disconnectedSince === null) disconnectedSince = Date.now();
if (Date.now() - disconnectedSince >= TOMBSTONE_AFTER_MS) {
setStatus('disconnected');
showTombstone();
} else {
setStatus('reconnecting');
}
reconnectTimer = setTimeout(connect, reconnectDelay);
reconnectDelay = nextReconnectDelay(reconnectDelay, MAX_RECONNECT_MS);
};
// Let onclose own reconnection so we don't schedule it twice.
ws.onerror = () => { try { ws.close(); } catch (e) {} };
}
function sendEvent(event) {
event.timestamp = Date.now();
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(event));
} else {
eventQueue.push(event);
}
}
// Capture clicks on choice elements
document.addEventListener('click', (e) => {
const target = e.target.closest('[data-choice]');
if (!target) return;
sendEvent({
type: 'click',
text: target.textContent.trim(),
choice: target.dataset.choice,
id: target.id || null
});
});
// Frame UI: selection tracking
window.selectedChoice = null;
window.toggleSelect = function(el) {
const container = el.closest('.options') || el.closest('.cards');
const multi = container && container.dataset.multiselect !== undefined;
if (container && !multi) {
container.querySelectorAll('.option, .card').forEach(o => o.classList.remove('selected'));
}
if (multi) {
el.classList.toggle('selected');
} else {
el.classList.add('selected');
}
window.selectedChoice = el.dataset.choice;
};
// Expose API for explicit use
window.brainstorm = {
send: sendEvent,
choice: (value, metadata = {}) => sendEvent({ type: 'choice', value, ...metadata })
};
connect();
})();

View File

@ -0,0 +1,723 @@
const crypto = require('crypto');
const http = require('http');
const fs = require('fs');
const path = require('path');
// ========== WebSocket Protocol (RFC 6455) ==========
const OPCODES = { TEXT: 0x01, CLOSE: 0x08, PING: 0x09, PONG: 0x0A };
const WS_MAGIC = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';
const MAX_FRAME_PAYLOAD_BYTES = 10 * 1024 * 1024;
function computeAcceptKey(clientKey) {
return crypto.createHash('sha1').update(clientKey + WS_MAGIC).digest('base64');
}
function encodeFrame(opcode, payload) {
const fin = 0x80;
const len = payload.length;
let header;
if (len < 126) {
header = Buffer.alloc(2);
header[0] = fin | opcode;
header[1] = len;
} else if (len < 65536) {
header = Buffer.alloc(4);
header[0] = fin | opcode;
header[1] = 126;
header.writeUInt16BE(len, 2);
} else {
header = Buffer.alloc(10);
header[0] = fin | opcode;
header[1] = 127;
header.writeBigUInt64BE(BigInt(len), 2);
}
return Buffer.concat([header, payload]);
}
function decodeFrame(buffer) {
if (buffer.length < 2) return null;
const secondByte = buffer[1];
const opcode = buffer[0] & 0x0F;
const masked = (secondByte & 0x80) !== 0;
let payloadLen = secondByte & 0x7F;
let offset = 2;
if (!masked) throw new Error('Client frames must be masked');
if (payloadLen === 126) {
if (buffer.length < 4) return null;
payloadLen = buffer.readUInt16BE(2);
offset = 4;
} else if (payloadLen === 127) {
if (buffer.length < 10) return null;
const extendedLen = buffer.readBigUInt64BE(2);
if (extendedLen > BigInt(MAX_FRAME_PAYLOAD_BYTES)) {
throw new Error('WebSocket frame payload exceeds maximum allowed size');
}
payloadLen = Number(extendedLen);
offset = 10;
}
if (payloadLen > MAX_FRAME_PAYLOAD_BYTES) {
throw new Error('WebSocket frame payload exceeds maximum allowed size');
}
const maskOffset = offset;
const dataOffset = offset + 4;
const totalLen = dataOffset + payloadLen;
if (buffer.length < totalLen) return null;
const mask = buffer.slice(maskOffset, dataOffset);
const data = Buffer.alloc(payloadLen);
for (let i = 0; i < payloadLen; i++) {
data[i] = buffer[dataOffset + i] ^ mask[i % 4];
}
return { opcode, payload: data, bytesConsumed: totalLen };
}
// ========== Configuration ==========
const PORT_FILE = process.env.BRAINSTORM_PORT_FILE || null;
const randomPort = () => 49152 + Math.floor(Math.random() * 16383);
// Prefer an explicit port, else the port this session last bound (so a restart
// reuses it and an already-open browser tab reconnects), else a random high port.
function preferredPort() {
if (process.env.BRAINSTORM_PORT) return Number(process.env.BRAINSTORM_PORT);
if (PORT_FILE) {
try {
const p = Number(fs.readFileSync(PORT_FILE, 'utf-8').trim());
if (Number.isInteger(p) && p > 1023 && p < 65536) return p;
} catch (e) { /* no prior port recorded */ }
}
return randomPort();
}
let PORT = preferredPort();
const HOST = process.env.BRAINSTORM_HOST || '127.0.0.1';
const URL_HOST = process.env.BRAINSTORM_URL_HOST || (HOST === '127.0.0.1' ? 'localhost' : HOST);
const SESSION_DIR = process.env.BRAINSTORM_DIR || '/tmp/brainstorm';
const CONTENT_DIR = path.join(SESSION_DIR, 'content');
const STATE_DIR = path.join(SESSION_DIR, 'state');
const SUPERPOWERS_VERSION = readSuperpowersVersion();
const SUPERPOWERS_BRAND_IMAGE_URL = 'https://primeradiant.com/brand/superpowers-visual-brainstorming-logo.png';
const TELEMETRY_DISABLE_ENV_VARS = [
'SUPERPOWERS_DISABLE_TELEMETRY',
'DISABLE_TELEMETRY',
'CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC'
];
const SUPERPOWERS_TELEMETRY_DISABLED = TELEMETRY_DISABLE_ENV_VARS.some(name => isTruthyEnv(process.env[name]));
let ownerPid = process.env.BRAINSTORM_OWNER_PID ? Number(process.env.BRAINSTORM_OWNER_PID) : null;
// Per-session secret key. The companion is reachable by any local browser tab
// and, when bound to a non-loopback host, by any host that can route to it.
// The key authenticates the real client uniformly across loopback, tunnel, and
// remote binds — and defeats DNS rebinding — where a Host/Origin allowlist
// cannot. It rides the served URL as ?key= and is mirrored into a cookie on
// first load so same-origin subresources and the WebSocket carry it for free.
// Persisted alongside the port (BRAINSTORM_TOKEN_FILE) so a restart keeps the
// same key and an already-open tab's cookie still validates.
const TOKEN_FILE = process.env.BRAINSTORM_TOKEN_FILE || null;
function generateToken() {
return crypto.randomBytes(32).toString('hex');
}
function chmodOwnerOnly(file) {
try { fs.chmodSync(file, 0o600); } catch (e) { /* best effort */ }
}
function initialToken() {
if (process.env.BRAINSTORM_TOKEN) {
return { value: process.env.BRAINSTORM_TOKEN, source: 'env' };
}
if (TOKEN_FILE) {
try {
const t = fs.readFileSync(TOKEN_FILE, 'utf-8').trim();
if (/^[0-9a-f]{32,}$/i.test(t)) {
chmodOwnerOnly(TOKEN_FILE);
return { value: t, source: 'file' };
}
} catch (e) { /* no prior token recorded */ }
}
return { value: generateToken(), source: 'generated' };
}
const tokenInfo = initialToken();
let TOKEN = tokenInfo.value;
let tokenSource = tokenInfo.source;
let COOKIE_NAME = 'brainstorm-key-' + PORT; // refined to the actual bound port in onListen
const MIME_TYPES = {
'.html': 'text/html', '.css': 'text/css', '.js': 'application/javascript',
'.json': 'application/json', '.png': 'image/png', '.jpg': 'image/jpeg',
'.jpeg': 'image/jpeg', '.gif': 'image/gif', '.svg': 'image/svg+xml'
};
// ========== Templates and Constants ==========
function waitingPage() {
return renderBranding(`<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Brainstorm Companion</title>
<style>
body { font-family: system-ui, sans-serif; padding: 2rem; max-width: 800px; margin: 0 auto; }
h1 { color: #333; } p { color: #666; }
.brand { display: flex; align-items: center; min-width: 0; overflow: hidden; margin-bottom: 1.5rem; color: #666; font-size: 0.9rem; line-height: 1; }
.brand a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; min-width: 0; max-width: 100%; line-height: 1; }
.brand-copy { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1; transform: translateY(-1px); }
.brand-logo { display: block; height: 1em; width: auto; max-width: 180px; filter: invert(1); }
</style>
</head>
<body><!-- BRANDING --><h1>Brainstorm Companion</h1>
<p>Waiting for the agent to push a screen...</p></body></html>`);
}
const FORBIDDEN_PAGE = `<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Session key required</title>
<style>body { font-family: system-ui, sans-serif; padding: 2rem; max-width: 800px; margin: 0 auto; }
h1 { color: #333; } p { color: #666; } code { background: #f0f0f0; padding: 0.1em 0.3em; border-radius: 4px; }</style>
</head>
<body><h1>Session key required</h1>
<p>This page needs the full URL your coding agent gave you, including the
<code>?key=&hellip;</code> part. Copy the complete URL and open it again.</p></body></html>`;
function bootstrapPage(key) {
const jsonKey = JSON.stringify(String(key));
return `<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Opening Brainstorm Companion</title></head>
<body>
<script>
try { sessionStorage.setItem('brainstorm-session-key', ${jsonKey}); } catch (e) {}
location.replace('/');
</script>
</body>
</html>`;
}
const frameTemplate = fs.readFileSync(path.join(__dirname, 'frame-template.html'), 'utf-8');
const helperScript = fs.readFileSync(path.join(__dirname, 'helper.js'), 'utf-8');
const helperInjection = '<script>\n' + helperScript + '\n</script>';
// ========== Helper Functions ==========
function readSuperpowersVersion() {
const root = path.join(__dirname, '../../..');
const manifests = [
path.join(root, 'package.json'),
path.join(root, '.codex-plugin/plugin.json')
];
for (const manifest of manifests) {
try {
const data = JSON.parse(fs.readFileSync(manifest, 'utf-8'));
if (data.version) return String(data.version);
} catch (e) {
// Packaged Codex plugins omit package.json; try the next manifest.
}
}
return 'unknown';
}
function isTruthyEnv(value) {
if (!value) return false;
const normalized = String(value).trim().toLowerCase();
if (!normalized) return false;
return !['0', 'false', 'no', 'off'].includes(normalized);
}
function escapeHtmlText(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;');
}
function brandMarkup() {
const version = escapeHtmlText(SUPERPOWERS_VERSION);
const text = SUPERPOWERS_TELEMETRY_DISABLED
? 'Prime Radiant Superpowers v' + version
: 'Superpowers v' + version;
const logo = SUPERPOWERS_TELEMETRY_DISABLED
? ''
: '<img class="brand-logo" src="' + SUPERPOWERS_BRAND_IMAGE_URL + '?v=' + encodeURIComponent(SUPERPOWERS_VERSION) + '" alt="Prime Radiant" referrerpolicy="no-referrer" decoding="async">';
return '<div class="brand"><a href="https://github.com/obra/superpowers">' + logo + '<span class="brand-copy">' + text + '</span></a></div>';
}
function renderBranding(html) {
return html.split('<!-- BRANDING -->').join(brandMarkup());
}
function isFullDocument(html) {
const trimmed = html.trimStart().toLowerCase();
return trimmed.startsWith('<!doctype') || trimmed.startsWith('<html');
}
function wrapInFrame(content) {
return renderBranding(frameTemplate).replace('<!-- CONTENT -->', content);
}
function getNewestScreen() {
const files = fs.readdirSync(CONTENT_DIR)
.filter(f => !f.startsWith('.') && f.endsWith('.html'))
.map(f => {
const fp = path.join(CONTENT_DIR, f);
if (!isRegularFileInsideContentDir(fp)) return null;
return { path: fp, mtime: fs.statSync(fp).mtime.getTime() };
})
.filter(Boolean)
.sort((a, b) => b.mtime - a.mtime);
return files.length > 0 ? files[0].path : null;
}
function urlHostForHttp(host) {
const h = String(host);
if (h.startsWith('[') && h.endsWith(']')) return h;
return h.includes(':') ? '[' + h + ']' : h;
}
function companionUrl() {
return 'http://' + urlHostForHttp(URL_HOST) + ':' + PORT + '/?key=' + TOKEN;
}
function browserLauncherForPlatform(url, {
platform = process.platform,
osRelease = require('os').release(),
env = process.env
} = {}) {
const isWSL = platform === 'linux' && /microsoft/i.test(osRelease);
if (platform === 'darwin') return { bin: 'open', args: [url] };
if (platform === 'win32' || isWSL) {
return { bin: 'rundll32.exe', args: ['url.dll,FileProtocolHandler', url] };
}
if (env.DISPLAY || env.WAYLAND_DISPLAY) return { bin: 'xdg-open', args: [url] };
return null;
}
function isRegularFileInsideContentDir(filePath) {
let stat, realContentDir, realFilePath;
try {
stat = fs.lstatSync(filePath);
if (stat.isSymbolicLink()) return false;
if (!stat.isFile()) return false;
if (stat.nlink !== 1) return false;
realContentDir = fs.realpathSync(CONTENT_DIR);
realFilePath = fs.realpathSync(filePath);
} catch (e) {
return false;
}
return realFilePath.startsWith(realContentDir + path.sep);
}
// ========== Authentication ==========
function timingSafeEqualStr(a, b) {
const ab = Buffer.from(String(a));
const bb = Buffer.from(String(b));
if (ab.length !== bb.length) return false;
return crypto.timingSafeEqual(ab, bb);
}
function parseCookies(header) {
const out = {};
if (!header) return out;
for (const part of header.split(';')) {
const eq = part.indexOf('=');
if (eq < 0) continue;
out[part.slice(0, eq).trim()] = part.slice(eq + 1).trim();
}
return out;
}
// A request is authorized if it carries the session key as ?key= or as the
// session cookie. Both are compared in constant time.
function isAuthorized(req) {
const q = req.url.indexOf('?');
if (q >= 0) {
const params = new URLSearchParams(req.url.slice(q + 1));
if (params.has('key')) {
const key = params.get('key');
return Boolean(key && timingSafeEqualStr(key, TOKEN));
}
}
const cookie = parseCookies(req.headers['cookie'])[COOKIE_NAME];
if (cookie && timingSafeEqualStr(cookie, TOKEN)) return true;
return false;
}
function pathnameOf(url) {
const q = url.indexOf('?');
return q >= 0 ? url.slice(0, q) : url;
}
function queryKey(url) {
const q = url.indexOf('?');
if (q < 0) return null;
return new URLSearchParams(url.slice(q + 1)).get('key');
}
function securityHeaders(headers = {}) {
return {
'Referrer-Policy': 'no-referrer',
'Cache-Control': 'no-store',
'X-Frame-Options': 'DENY',
'Content-Security-Policy': "frame-ancestors 'none'",
'Cross-Origin-Resource-Policy': 'same-origin',
...headers
};
}
function isAllowedWebSocketOrigin(req) {
const origin = req.headers.origin;
if (!origin) return true;
const host = req.headers.host;
if (!host) return false;
return origin === 'http://' + host;
}
// ========== HTTP Request Handler ==========
function handleRequest(req, res) {
if (!isAuthorized(req)) {
res.writeHead(403, securityHeaders({ 'Content-Type': 'text/html; charset=utf-8' }));
res.end(FORBIDDEN_PAGE);
return;
}
touchActivity(); // only authorized requests count as activity
// Mirror the key into a cookie so same-origin subresources (/files/*) can
// authenticate after bootstrap. HttpOnly keeps it away from page scripts; the
// WebSocket Origin check below is what blocks cross-origin localhost injection.
res.setHeader('Set-Cookie',
COOKIE_NAME + '=' + TOKEN + '; HttpOnly; SameSite=Strict; Path=/');
const pathname = pathnameOf(req.url);
const keyFromQuery = queryKey(req.url);
if (req.method === 'GET' && pathname === '/' && keyFromQuery && timingSafeEqualStr(keyFromQuery, TOKEN)) {
res.writeHead(200, securityHeaders({ 'Content-Type': 'text/html; charset=utf-8' }));
res.end(bootstrapPage(keyFromQuery));
} else if (req.method === 'GET' && pathname === '/') {
const screenFile = getNewestScreen();
let html = screenFile
? (raw => isFullDocument(raw) ? raw : wrapInFrame(raw))(fs.readFileSync(screenFile, 'utf-8'))
: waitingPage();
if (html.includes('</body>')) {
html = html.replace('</body>', helperInjection + '\n</body>');
} else {
html += helperInjection;
}
res.writeHead(200, securityHeaders({ 'Content-Type': 'text/html; charset=utf-8' }));
res.end(html);
} else if (req.method === 'GET' && pathname.startsWith('/files/')) {
const fileName = path.basename(pathname.slice(7));
const filePath = path.join(CONTENT_DIR, fileName);
// Reject empty/dotfile names and anything that isn't a regular file —
// `/files/` would otherwise resolve to CONTENT_DIR and crash readFileSync (EISDIR).
if (!fileName || fileName.startsWith('.') || !isRegularFileInsideContentDir(filePath)) {
res.writeHead(404, securityHeaders());
res.end('Not found');
return;
}
const ext = path.extname(filePath).toLowerCase();
const contentType = MIME_TYPES[ext] || 'application/octet-stream';
res.writeHead(200, securityHeaders({ 'Content-Type': contentType }));
res.end(fs.readFileSync(filePath));
} else {
res.writeHead(404, securityHeaders());
res.end('Not found');
}
}
// ========== WebSocket Connection Handling ==========
const clients = new Set();
function handleUpgrade(req, socket) {
if (!isAuthorized(req) || !isAllowedWebSocketOrigin(req)) { socket.destroy(); return; }
const key = req.headers['sec-websocket-key'];
if (!key) { socket.destroy(); return; }
const accept = computeAcceptKey(key);
socket.write(
'HTTP/1.1 101 Switching Protocols\r\n' +
'Upgrade: websocket\r\n' +
'Connection: Upgrade\r\n' +
'Sec-WebSocket-Accept: ' + accept + '\r\n\r\n'
);
let buffer = Buffer.alloc(0);
clients.add(socket);
socket.on('data', (chunk) => {
buffer = Buffer.concat([buffer, chunk]);
while (buffer.length > 0) {
let result;
try {
result = decodeFrame(buffer);
} catch (e) {
socket.end(encodeFrame(OPCODES.CLOSE, Buffer.alloc(0)));
clients.delete(socket);
return;
}
if (!result) break;
buffer = buffer.slice(result.bytesConsumed);
switch (result.opcode) {
case OPCODES.TEXT:
handleMessage(result.payload.toString());
break;
case OPCODES.CLOSE:
socket.end(encodeFrame(OPCODES.CLOSE, Buffer.alloc(0)));
clients.delete(socket);
return;
case OPCODES.PING:
socket.write(encodeFrame(OPCODES.PONG, result.payload));
break;
case OPCODES.PONG:
break;
default: {
const closeBuf = Buffer.alloc(2);
closeBuf.writeUInt16BE(1003);
socket.end(encodeFrame(OPCODES.CLOSE, closeBuf));
clients.delete(socket);
return;
}
}
}
});
socket.on('close', () => clients.delete(socket));
socket.on('error', () => clients.delete(socket));
}
function handleMessage(text) {
let event;
try {
event = JSON.parse(text);
} catch (e) {
console.error('Failed to parse WebSocket message:', e.message);
return;
}
touchActivity();
console.log(JSON.stringify({ source: 'user-event', ...event }));
if (event && event.choice) {
const eventsFile = path.join(STATE_DIR, 'events');
fs.appendFileSync(eventsFile, JSON.stringify(event) + '\n');
}
}
function broadcast(msg) {
const frame = encodeFrame(OPCODES.TEXT, Buffer.from(JSON.stringify(msg)));
for (const socket of clients) {
try { socket.write(frame); } catch (e) { clients.delete(socket); }
}
}
// Best-effort: open the user's browser the first time a screen is actually ready
// to show. Skips when disabled, on a non-loopback (remote) bind, or when a
// browser is already connected. Override the launcher with BRAINSTORM_OPEN_CMD.
let browserOpened = false;
function maybeOpenBrowser() {
if (browserOpened) return;
browserOpened = true;
if (!process.env.BRAINSTORM_OPEN) return; // opt-in: only after the user approves the companion
if (HOST !== '127.0.0.1' && HOST !== 'localhost') return;
if (clients.size > 0) return; // the user already opened it
const url = companionUrl(); // must carry the key or the gate 403s it
const cp = require('child_process');
// Operator-provided launcher: run as given (this env var is trusted operator input).
if (process.env.BRAINSTORM_OPEN_CMD) {
try { cp.exec(process.env.BRAINSTORM_OPEN_CMD + ' ' + JSON.stringify(url), () => {}); } catch (e) { /* best effort */ }
return;
}
// Platform launchers: pass the URL as an argv element via execFile (no shell),
// so a url-host containing shell metacharacters can't inject a command.
const launcher = browserLauncherForPlatform(url);
if (!launcher) return; // headless: nothing to open
try { cp.execFile(launcher.bin, launcher.args, () => {}); } catch (e) { /* best effort */ }
}
// ========== Activity Tracking ==========
// Idle timeout: shut down after this long with no activity. Default 4 hours;
// override with BRAINSTORM_IDLE_TIMEOUT_MS (start-server.sh: --idle-timeout-minutes).
const IDLE_TIMEOUT_MS = (() => {
const ms = Number(process.env.BRAINSTORM_IDLE_TIMEOUT_MS);
return Number.isFinite(ms) && ms > 0 ? ms : 4 * 60 * 60 * 1000;
})();
// How often the watchdog checks for owner-death / idleness. Configurable mainly
// so tests can run fast; production default is 60s.
const LIFECYCLE_CHECK_MS = (() => {
const ms = Number(process.env.BRAINSTORM_LIFECYCLE_CHECK_MS);
return Number.isFinite(ms) && ms > 0 ? ms : 60 * 1000;
})();
let lastActivity = Date.now();
function touchActivity() {
lastActivity = Date.now();
}
// ========== File Watching ==========
const debounceTimers = new Map();
// ========== Server Startup ==========
function startServer() {
if (!fs.existsSync(CONTENT_DIR)) fs.mkdirSync(CONTENT_DIR, { recursive: true });
if (!fs.existsSync(STATE_DIR)) fs.mkdirSync(STATE_DIR, { recursive: true });
// Track known files to distinguish new screens from updates.
// macOS fs.watch reports 'rename' for both new files and overwrites,
// so we can't rely on eventType alone.
const knownFiles = new Set(
fs.readdirSync(CONTENT_DIR).filter(f => !f.startsWith('.') && f.endsWith('.html'))
);
const server = http.createServer(handleRequest);
server.on('upgrade', handleUpgrade);
const watcher = fs.watch(CONTENT_DIR, (eventType, filename) => {
if (!filename || filename.startsWith('.') || !filename.endsWith('.html')) return;
if (debounceTimers.has(filename)) clearTimeout(debounceTimers.get(filename));
debounceTimers.set(filename, setTimeout(() => {
debounceTimers.delete(filename);
const filePath = path.join(CONTENT_DIR, filename);
if (!fs.existsSync(filePath)) return; // file was deleted
touchActivity();
if (!knownFiles.has(filename)) {
knownFiles.add(filename);
const eventsFile = path.join(STATE_DIR, 'events');
if (fs.existsSync(eventsFile)) fs.unlinkSync(eventsFile);
console.log(JSON.stringify({ type: 'screen-added', file: filePath }));
maybeOpenBrowser();
} else {
console.log(JSON.stringify({ type: 'screen-updated', file: filePath }));
}
broadcast({ type: 'reload' });
}, 100));
});
watcher.on('error', (err) => console.error('fs.watch error:', err.message));
function shutdown(reason) {
console.log(JSON.stringify({ type: 'server-stopped', reason }));
const infoFile = path.join(STATE_DIR, 'server-info');
if (fs.existsSync(infoFile)) fs.unlinkSync(infoFile);
fs.writeFileSync(
path.join(STATE_DIR, 'server-stopped'),
JSON.stringify({ reason, timestamp: Date.now() }) + '\n'
);
watcher.close();
clearInterval(lifecycleCheck);
// Close any upgraded WebSocket sockets so server.close() can complete and
// the process actually exits instead of lingering on an open connection.
for (const socket of clients) {
try { socket.destroy(); } catch (e) { /* already gone */ }
}
server.close(() => process.exit(0));
}
function ownerAlive() {
if (!ownerPid) return true;
try { process.kill(ownerPid, 0); return true; } catch (e) { return e.code === 'EPERM'; }
}
// Periodically exit if the owner process died or we've been idle too long.
const lifecycleCheck = setInterval(() => {
if (!ownerAlive()) shutdown('owner process exited');
else if (Date.now() - lastActivity > IDLE_TIMEOUT_MS) shutdown('idle timeout');
}, LIFECYCLE_CHECK_MS);
lifecycleCheck.unref();
// Validate owner PID at startup. If it's already dead, the PID resolution
// was wrong (common on WSL, Tailscale SSH, and cross-user scenarios).
// Disable monitoring and rely on the idle timeout instead.
if (ownerPid) {
try { process.kill(ownerPid, 0); }
catch (e) {
if (e.code !== 'EPERM') {
console.log(JSON.stringify({ type: 'owner-pid-invalid', pid: ownerPid, reason: 'dead at startup' }));
ownerPid = null;
}
}
}
// If the preferred port is already taken (e.g. a previous server is still
// alive), fall back to a random port once instead of failing.
let triedFallback = false;
function onListen() {
// Cookie name keys on the ACTUAL bound port (may differ from the preferred
// one after an EADDRINUSE fallback) so it can't collide with another server's
// cookie in the shared localhost jar.
COOKIE_NAME = 'brainstorm-key-' + PORT;
// Record the bound port AND token so the next restart of this session reuses
// them — but ONLY when we got our preferred port. On a fallback we bound a
// *different* port because someone else holds the preferred one; persisting
// would overwrite the shared files and strand that other session's open tab.
if (PORT_FILE && !triedFallback) {
try { fs.writeFileSync(PORT_FILE, String(PORT)); } catch (e) { /* best effort */ }
if (TOKEN_FILE) {
try {
fs.writeFileSync(TOKEN_FILE, TOKEN, { mode: 0o600 });
chmodOwnerOnly(TOKEN_FILE);
} catch (e) { /* best effort */ }
}
}
const info = JSON.stringify({
type: 'server-started', port: Number(PORT), host: HOST,
url_host: URL_HOST, url: companionUrl(),
screen_dir: CONTENT_DIR, state_dir: STATE_DIR, idle_timeout_ms: IDLE_TIMEOUT_MS
});
console.log(info);
// server-info embeds the key — keep it owner-only.
fs.writeFileSync(path.join(STATE_DIR, 'server-info'), info + '\n', { mode: 0o600 });
}
server.on('error', (err) => {
if (err.code === 'EADDRINUSE' && !triedFallback) {
if (tokenSource === 'env') {
console.error('Server failed to bind: preferred port is in use and BRAINSTORM_TOKEN is set; refusing fallback with explicit token');
process.exit(1);
}
triedFallback = true;
PORT = randomPort();
if (tokenSource === 'file') {
TOKEN = generateToken();
tokenSource = 'generated-fallback';
}
server.listen(PORT, HOST, onListen);
} else {
console.error('Server failed to bind:', err.message);
process.exit(1);
}
});
server.listen(PORT, HOST, onListen);
}
if (require.main === module) {
startServer();
}
module.exports = {
computeAcceptKey,
encodeFrame,
decodeFrame,
browserLauncherForPlatform,
OPCODES,
MAX_FRAME_PAYLOAD_BYTES
};

View File

@ -0,0 +1,209 @@
#!/usr/bin/env bash
# Start the brainstorm server and output connection info
# Usage: start-server.sh [--project-dir <path>] [--host <bind-host>] [--url-host <display-host>] [--foreground] [--background]
#
# Starts server on a random high port, outputs JSON with URL.
# Each session gets its own directory to avoid conflicts.
#
# Options:
# --project-dir <path> Store session files under <path>/.superpowers/brainstorm/
# instead of /tmp. Files persist after server stops.
# --host <bind-host> Host/interface to bind (default: 127.0.0.1).
# Use 0.0.0.0 in remote/containerized environments.
# --url-host <host> Hostname shown in returned URL JSON.
# --idle-timeout-minutes <n> Shut down after n minutes idle (default 240 = 4h).
# --open Auto-open the browser on the first screen (use only
# after the user approves the visual companion).
# --foreground Run server in the current terminal (no backgrounding).
# --background Force background mode (overrides Codex auto-foreground).
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
# Parse arguments
PROJECT_DIR=""
FOREGROUND="false"
FORCE_BACKGROUND="false"
BIND_HOST="127.0.0.1"
URL_HOST=""
IDLE_TIMEOUT_MINUTES=""
while [[ $# -gt 0 ]]; do
case "$1" in
--project-dir)
PROJECT_DIR="$2"
shift 2
;;
--host)
BIND_HOST="$2"
shift 2
;;
--url-host)
URL_HOST="$2"
shift 2
;;
--idle-timeout-minutes)
IDLE_TIMEOUT_MINUTES="$2"
shift 2
;;
--open)
export BRAINSTORM_OPEN=1
shift
;;
--foreground|--no-daemon)
FOREGROUND="true"
shift
;;
--background|--daemon)
FORCE_BACKGROUND="true"
shift
;;
*)
echo "{\"error\": \"Unknown argument: $1\"}"
exit 1
;;
esac
done
if [[ -z "$URL_HOST" ]]; then
if [[ "$BIND_HOST" == "127.0.0.1" || "$BIND_HOST" == "localhost" ]]; then
URL_HOST="localhost"
else
URL_HOST="$BIND_HOST"
fi
fi
if [[ -n "$IDLE_TIMEOUT_MINUTES" ]]; then
if ! [[ "$IDLE_TIMEOUT_MINUTES" =~ ^[0-9]+$ ]] || [[ "$IDLE_TIMEOUT_MINUTES" -lt 1 ]]; then
echo "{\"error\": \"--idle-timeout-minutes must be a positive integer\"}"
exit 1
fi
export BRAINSTORM_IDLE_TIMEOUT_MS=$(( IDLE_TIMEOUT_MINUTES * 60 * 1000 ))
fi
is_windows_like_shell() {
case "${OSTYPE:-}" in
msys*|cygwin*|mingw*) return 0 ;;
esac
if [[ -n "${MSYSTEM:-}" ]]; then
return 0
fi
local uname_s
uname_s="$(uname -s 2>/dev/null || true)"
case "$uname_s" in
MSYS*|MINGW*|CYGWIN*) return 0 ;;
esac
return 1
}
# Some environments reap detached/background processes. Auto-foreground when detected.
if [[ -n "${CODEX_CI:-}" && "$FOREGROUND" != "true" && "$FORCE_BACKGROUND" != "true" ]]; then
FOREGROUND="true"
fi
# Windows/Git Bash reaps nohup background processes. Auto-foreground when detected.
if [[ "$FOREGROUND" != "true" && "$FORCE_BACKGROUND" != "true" ]]; then
if is_windows_like_shell; then
FOREGROUND="true"
fi
fi
# Session files (server.log, server-info, .last-token) embed the session key —
# keep everything this script and the server create owner-only.
umask 077
# Generate unique session directory
SESSION_ID="$$-$(date +%s)"
if [[ -n "$PROJECT_DIR" ]]; then
SESSION_DIR="${PROJECT_DIR}/.superpowers/brainstorm/${SESSION_ID}"
# Persist the bound port and key per project so a restart reuses them and an
# already-open browser tab reconnects to the same URL with a valid cookie.
export BRAINSTORM_PORT_FILE="${PROJECT_DIR}/.superpowers/brainstorm/.last-port"
export BRAINSTORM_TOKEN_FILE="${PROJECT_DIR}/.superpowers/brainstorm/.last-token"
else
SESSION_DIR="/tmp/brainstorm-${SESSION_ID}"
fi
STATE_DIR="${SESSION_DIR}/state"
PID_FILE="${STATE_DIR}/server.pid"
LOG_FILE="${STATE_DIR}/server.log"
SERVER_ID_FILE="${STATE_DIR}/server-instance-id"
# Create fresh session directory with content and state peers
mkdir -p "${SESSION_DIR}/content" "$STATE_DIR"
SERVER_ID=""
if [[ -r /dev/urandom ]]; then
SERVER_ID="$(od -An -N24 -tx1 /dev/urandom 2>/dev/null | tr -d ' \n' || true)"
fi
if ! [[ "$SERVER_ID" =~ ^[A-Za-z0-9_-]{32,64}$ ]]; then
SERVER_ID="$(printf '%08x%08x%08x%08x' "$$" "$(date +%s)" "${RANDOM:-0}" "${RANDOM:-0}")"
fi
printf '%s\n' "$SERVER_ID" > "$SERVER_ID_FILE"
chmod 600 "$SERVER_ID_FILE" 2>/dev/null || true
# Kill any existing server
if [[ -f "$PID_FILE" ]]; then
old_pid=$(cat "$PID_FILE")
kill "$old_pid" 2>/dev/null
rm -f "$PID_FILE"
fi
cd "$SCRIPT_DIR" || exit 1
# Resolve the harness PID (grandparent of this script).
# $PPID is the ephemeral shell the harness spawned to run us — it dies
# when this script exits. The harness itself is $PPID's parent.
OWNER_PID="$(ps -o ppid= -p "$PPID" 2>/dev/null | tr -d ' ')"
if [[ -z "$OWNER_PID" || "$OWNER_PID" == "1" ]]; then
OWNER_PID="$PPID"
fi
# Windows/MSYS2: Node.js cannot see POSIX PIDs from the MSYS2 namespace.
# Passing a PID node cannot verify causes server to log owner-pid-invalid
# and self-terminate at the 60-second lifecycle check. Clear it so the
# watchdog is disabled and the idle timeout becomes the only shutdown trigger.
if is_windows_like_shell; then
OWNER_PID=""
fi
# Foreground mode for environments that reap detached/background processes.
if [[ "$FOREGROUND" == "true" ]]; then
env BRAINSTORM_DIR="$SESSION_DIR" BRAINSTORM_HOST="$BIND_HOST" BRAINSTORM_URL_HOST="$URL_HOST" BRAINSTORM_OWNER_PID="$OWNER_PID" node server.cjs "--brainstorm-server-id=$SERVER_ID" &
SERVER_PID=$!
echo "$SERVER_PID" > "$PID_FILE"
wait "$SERVER_PID"
exit $?
fi
# Start server, capturing output to log file
# Use nohup to survive shell exit; disown to remove from job table
nohup env BRAINSTORM_DIR="$SESSION_DIR" BRAINSTORM_HOST="$BIND_HOST" BRAINSTORM_URL_HOST="$URL_HOST" BRAINSTORM_OWNER_PID="$OWNER_PID" node server.cjs "--brainstorm-server-id=$SERVER_ID" > "$LOG_FILE" 2>&1 &
SERVER_PID=$!
disown "$SERVER_PID" 2>/dev/null
echo "$SERVER_PID" > "$PID_FILE"
# Wait for server-started message (check log file)
for _ in {1..50}; do
if grep -q "server-started" "$LOG_FILE" 2>/dev/null; then
# Verify server is still alive after a short window (catches process reapers)
alive="true"
for _ in {1..20}; do
if ! kill -0 "$SERVER_PID" 2>/dev/null; then
alive="false"
break
fi
sleep 0.1
done
if [[ "$alive" != "true" ]]; then
echo "{\"error\": \"Server started but was killed. Retry in a persistent terminal with: $SCRIPT_DIR/start-server.sh${PROJECT_DIR:+ --project-dir $PROJECT_DIR} --host $BIND_HOST --url-host $URL_HOST --foreground\"}"
exit 1
fi
grep "server-started" "$LOG_FILE" | head -1
exit 0
fi
sleep 0.1
done
# Timeout - server didn't start
echo '{"error": "Server failed to start within 5 seconds"}'
exit 1

View File

@ -0,0 +1,120 @@
#!/usr/bin/env bash
# Stop the brainstorm server and clean up
# Usage: stop-server.sh <session_dir>
#
# Kills the server process. Only deletes session directory if it's
# under /tmp (ephemeral). Persistent directories (.superpowers/) are
# kept so mockups can be reviewed later.
SESSION_DIR="$1"
if [[ -z "$SESSION_DIR" ]]; then
echo '{"error": "Usage: stop-server.sh <session_dir>"}'
exit 1
fi
STATE_DIR="${SESSION_DIR}/state"
PID_FILE="${STATE_DIR}/server.pid"
SERVER_ID_FILE="${STATE_DIR}/server-instance-id"
mark_stopped() {
local reason="$1"
rm -f "${STATE_DIR}/server-info"
printf '{"reason":"%s","timestamp":%s}\n' "$reason" "$(date +%s)" > "${STATE_DIR}/server-stopped"
}
read_expected_server_id() {
[[ -f "$SERVER_ID_FILE" ]] || return 1
local id
id="$(tr -d '\r\n' < "$SERVER_ID_FILE" 2>/dev/null || true)"
[[ "$id" =~ ^[A-Za-z0-9_-]{32,64}$ ]] || return 1
printf '%s\n' "$id"
}
command_line_for_pid() {
local pid="$1"
if [[ -r "/proc/$pid/cmdline" ]]; then
tr '\0' '\n' < "/proc/$pid/cmdline" 2>/dev/null || true
return 0
fi
ps -ww -p "$pid" -o command= 2>/dev/null || ps -f -p "$pid" 2>/dev/null | sed '1d' || true
}
command_has_server_id() {
local pid="$1"
local expected="$2"
local expected_arg="--brainstorm-server-id=$expected"
if [[ -r "/proc/$pid/cmdline" ]]; then
local arg
while IFS= read -r -d '' arg || [[ -n "$arg" ]]; do
[[ "$arg" == "$expected_arg" ]] && return 0
done < "/proc/$pid/cmdline"
return 1
fi
local command_line
command_line="$(command_line_for_pid "$pid")"
[[ -n "$command_line" ]] || return 1
case " $command_line " in
*" $expected_arg "*) return 0 ;;
*) return 1 ;;
esac
}
# Confirm a PID has this session's per-start instance id, not just a familiar
# process name. Ambiguous or legacy metadata fails closed as stale_pid.
is_brainstorm_server() {
kill -0 "$1" 2>/dev/null || return 1
local expected_id
expected_id="$(read_expected_server_id)" || return 1
command_has_server_id "$1" "$expected_id" || return 1
return 0
}
if [[ -f "$PID_FILE" ]]; then
pid=$(cat "$PID_FILE")
# Refuse to signal a PID we can't prove is our server. A stale pid file may
# point at an unrelated process after a reboot/PID wraparound.
if ! is_brainstorm_server "$pid"; then
rm -f "$PID_FILE" "$SERVER_ID_FILE"
mark_stopped "stale_pid"
echo '{"status": "stale_pid"}'
exit 0
fi
# Try to stop gracefully, fallback to force if still alive
kill "$pid" 2>/dev/null || true
# Wait for graceful shutdown (up to ~2s)
for _ in {1..20}; do
if ! kill -0 "$pid" 2>/dev/null; then
break
fi
sleep 0.1
done
# If still running, escalate to SIGKILL
if kill -0 "$pid" 2>/dev/null; then
kill -9 "$pid" 2>/dev/null || true
# Give SIGKILL a moment to take effect
sleep 0.1
fi
if kill -0 "$pid" 2>/dev/null; then
echo '{"status": "failed", "error": "process still running"}'
exit 1
fi
rm -f "$PID_FILE" "$SERVER_ID_FILE" "${STATE_DIR}/server.log"
mark_stopped "stop-server.sh"
# Only delete ephemeral /tmp directories
if [[ "$SESSION_DIR" == /tmp/* ]]; then
rm -rf "$SESSION_DIR"
fi
echo '{"status": "stopped"}'
else
echo '{"status": "not_running"}'
fi

View File

@ -0,0 +1,48 @@
# 规格文档审查员提示模板
调度规格文档审查员子代理时使用此模板。
**用途:** 验证规格是否完整、一致,并为实现计划做好准备。
**调度时机:** 规格文档写入 docs/superpowers/specs/ 之后
```
Task tool(通用):
description: "审查规格文档"
prompt: |
你是一名规格文档审查员。验证此规格是否完整并准备好进行计划编写。
**待审查规格:** [SPEC_FILE_PATH]
## 检查内容
| 类别 | 检查要点 |
|------|----------|
| 完整性 | TODO、占位符、"TBD"、不完整的章节 |
| 一致性 | 内部矛盾、相互冲突的需求 |
| 清晰度 | 需求模糊到可能导致构建出错误的东西 |
| 范围 | 是否足够聚焦以用于单个计划——而非涵盖多个独立子系统 |
| YAGNI | 未请求的功能、过度设计 |
## 校准标准
**只标记会在实现计划阶段造成实际问题的事项。**
缺失的章节、矛盾之处、或者模糊到可能被两种不同方式理解的需求——
这些才是问题。措辞上的小改进、风格偏好、以及"某些章节不如其他章节详细"则不是。
除非存在会导致计划出错的严重缺陷,否则应予以通过。
## 输出格式
## 规格审查
**状态:** 通过 | 发现问题
**问题(如有):**
- [章节 X]:[具体问题] - [为什么这对计划编写很重要]
**建议(仅供参考,不阻止通过):**
- [改进建议]
```
**审查员返回:** 状态、问题(如有)、建议

View File

@ -0,0 +1,295 @@
# 视觉伴侣指南
基于浏览器的视觉头脑风暴伴侣,用于展示原型、图表和选项。
## 何时使用
逐问题决定,而非按会话决定。判断标准:**用户看到它是否比读到它更容易理解?**
**使用浏览器** 当内容本身是视觉的:
- **UI 原型** — 线框图、布局、导航结构、组件设计
- **架构图** — 系统组件、数据流、关系图
- **并排视觉对比** — 对比两种布局、两种配色方案、两种设计方向
- **设计细节打磨** — 当问题涉及外观感受、间距、视觉层次
- **空间关系** — 状态机、流程图、实体关系图
**使用终端** 当内容是文字或表格的:
- **需求和范围问题** — "X 是什么意思?"、"哪些功能在范围内?"
- **概念性 A/B/C 选择** — 在用文字描述的方案之间做选择
- **权衡列表** — 优缺点、对比表
- **技术决策** — API 设计、数据建模、架构方案选择
- **澄清问题** — 任何回答是文字而非视觉偏好的问题
关于 UI 主题的问题不一定是视觉问题。"你想要什么样的向导?"是概念性的——使用终端。"这些向导布局中哪个感觉对?"是视觉性的——使用浏览器。
## 工作原理
服务器监视一个目录中的 HTML 文件,将最新的文件提供给浏览器。你写入 HTML 内容,用户在浏览器中看到它,并可以点击选择选项。选择结果被记录到一个 `.events` 文件中,你在下一轮会话中读取它。
**内容片段 vs 完整文档:** 如果你的 HTML 文件以 `<!DOCTYPE` 或 `<html` 开头,服务器会原样提供(仅注入辅助脚本)。否则,服务器会自动将你的内容包裹在框架模板中——添加头部、CSS 主题、选择指示器和所有交互基础设施。**默认写内容片段即可。** 只有当你需要完全控制页面时才写完整文档。
## 启动会话
```bash
# 启动服务器并持久化(原型保存到项目中)
scripts/start-server.sh --project-dir /path/to/project
# 返回:{"type":"server-started","port":52341,"url":"http://localhost:52341",
# "screen_dir":"/path/to/project/.superpowers/brainstorm/12345-1706000000"}
```
保存响应中的 `screen_dir`。告诉用户打开该 URL。
**查找连接信息:** 服务器将其启动 JSON 写入 `$SCREEN_DIR/.server-info`。如果你在后台启动了服务器且没有捕获 stdout,读取该文件以获取 URL 和端口。使用 `--project-dir` 时,检查 `<project>/.superpowers/brainstorm/` 获取会话目录。
**注意:** 传入项目根目录作为 `--project-dir`,这样原型会持久化在 `.superpowers/brainstorm/` 中,不会因服务器重启而丢失。不传的话,文件会保存到 `/tmp` 并在清理时被删除。提醒用户将 `.superpowers/` 添加到 `.gitignore`(如果尚未添加)。
**按平台启动服务器:**
**Claude Code (macOS / Linux):**
```bash
# 默认模式即可——脚本会自动将服务器放到后台
scripts/start-server.sh --project-dir /path/to/project
```
**Claude Code (Windows):**
```bash
# Windows 会自动检测并使用前台模式,这会阻塞工具调用。
# 在 Bash 工具调用上设置 run_in_background: true,
# 让服务器在会话轮次之间存活。
scripts/start-server.sh --project-dir /path/to/project
```
通过 Bash 工具调用时,设置 `run_in_background: true`。然后在下一轮读取 `$SCREEN_DIR/.server-info` 获取 URL 和端口。
**Codex:**
```bash
# Codex 会回收后台进程。脚本会自动检测 CODEX_CI 并
# 切换到前台模式。正常运行即可——不需要额外标志。
scripts/start-server.sh --project-dir /path/to/project
```
**Gemini CLI:**
```bash
# 使用 --foreground 并在 shell 工具调用上设置 is_background: true,
# 让进程在轮次之间存活
scripts/start-server.sh --project-dir /path/to/project --foreground
```
**Copilot CLI:**
```bash
# 用 Copilot CLI 的非阻塞 / 后台 shell 机制启动,让服务器能跨会话轮次存活。
# 保留 --foreground —— 由 harness 而不是脚本来负责放到后台。
# 启动器是 .sh,所以要通过 bash 调用(Windows 上用 Git Bash 的 bash.exe,
# 从 PowerShell 工具里调)。
bash scripts/start-server.sh --project-dir /path/to/project --open --foreground
```
**其他环境:** 服务器必须在会话轮次之间持续在后台运行。如果你的环境会回收分离的进程,使用 `--foreground` 并通过平台的后台执行机制启动命令。
如果浏览器无法访问该 URL(在远程/容器化环境中常见),绑定一个非回环主机:
```bash
scripts/start-server.sh \
--project-dir /path/to/project \
--host 0.0.0.0 \
--url-host localhost
```
使用 `--url-host` 控制返回的 URL JSON 中显示的主机名。
## 工作循环
1. **检查服务器存活**,然后**将 HTML 写入** `screen_dir` 中的新文件:
- 每次写入前,检查 `$SCREEN_DIR/.server-info` 是否存在。如果不存在(或 `.server-stopped` 存在),服务器已关闭——在继续之前用 `start-server.sh` 重启。服务器在 30 分钟无活动后会自动退出。
- 使用语义化文件名:`platform.html`、`visual-style.html`、`layout.html`
- **绝不复用文件名** — 每个屏幕用一个新文件
- 使用 Write 工具 — **绝不使用 cat/heredoc**(会在终端产生噪音)
- 服务器自动提供最新的文件
2. **告诉用户预期内容并结束你的回合:**
- 每一步都提醒他们 URL(不仅仅是第一次)
- 简要文字说明屏幕上的内容(例如"展示了 3 个首页布局选项")
- 请他们在终端中回复:"看一下,告诉我你的想法。如果你愿意,可以点击选择一个选项。"
3. **在你的下一轮** — 用户在终端回复后:
- 如果存在 `$SCREEN_DIR/.events`,读取它——其中包含用户的浏览器交互(点击、选择),格式为 JSON 行
- 将终端文字和事件合并以获得完整信息
- 终端消息是主要反馈;`.events` 提供结构化的交互数据
4. **迭代或推进** — 如果反馈要求修改当前屏幕,写入新文件(例如 `layout-v2.html`)。只有当前步骤验证通过后才进入下一个问题。
5. **回到终端时卸载** — 当下一步不需要浏览器时(例如澄清问题、权衡讨论),推送一个等待屏幕以清除过时内容:
```html
<!-- 文件名:waiting.html(或 waiting-2.html 等)-->
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
<p class="subtitle">在终端中继续...</p>
</div>
```
这样可以防止用户盯着一个已经解决的选择,而对话已经继续了。当下一个视觉问题出现时,照常推送新的内容文件。
6. 重复直到完成。
## 编写内容片段
只写放在页面内部的内容。服务器会自动用框架模板包裹它(头部、主题 CSS、选择指示器和所有交互基础设施)。
**最简示例:**
```html
<h2>哪种布局更好?</h2>
<p class="subtitle">考虑可读性和视觉层次</p>
<div class="options">
<div class="option" data-choice="a" onclick="toggleSelect(this)">
<div class="letter">A</div>
<div class="content">
<h3>单栏</h3>
<p>简洁、专注的阅读体验</p>
</div>
</div>
<div class="option" data-choice="b" onclick="toggleSelect(this)">
<div class="letter">B</div>
<div class="content">
<h3>双栏</h3>
<p>侧边栏导航加主内容区</p>
</div>
</div>
</div>
```
就这些。不需要 `<html>`,不需要 CSS,不需要 `<script>` 标签。服务器会提供这一切。
## 可用的 CSS 类
框架模板为你的内容提供以下 CSS 类:
### 选项(A/B/C 选择)
```html
<div class="options">
<div class="option" data-choice="a" onclick="toggleSelect(this)">
<div class="letter">A</div>
<div class="content">
<h3>标题</h3>
<p>描述</p>
</div>
</div>
</div>
```
**多选:** 在容器上添加 `data-multiselect` 让用户选择多个选项。每次点击切换选中状态。指示栏显示数量。
```html
<div class="options" data-multiselect>
<!-- 相同的选项标记——用户可以选择/取消选择多个 -->
</div>
```
### 卡片(视觉设计)
```html
<div class="cards">
<div class="card" data-choice="design1" onclick="toggleSelect(this)">
<div class="card-image"><!-- 原型内容 --></div>
<div class="card-body">
<h3>名称</h3>
<p>描述</p>
</div>
</div>
</div>
```
### 原型容器
```html
<div class="mockup">
<div class="mockup-header">预览:仪表盘布局</div>
<div class="mockup-body"><!-- 你的原型 HTML --></div>
</div>
```
### 分屏视图(并排)
```html
<div class="split">
<div class="mockup"><!-- 左侧 --></div>
<div class="mockup"><!-- 右侧 --></div>
</div>
```
### 优缺点
```html
<div class="pros-cons">
<div class="pros"><h4>优点</h4><ul><li>好处</li></ul></div>
<div class="cons"><h4>缺点</h4><ul><li>不足</li></ul></div>
</div>
```
### 模拟元素(线框图构建块)
```html
<div class="mock-nav">Logo | 首页 | 关于 | 联系我们</div>
<div style="display: flex;">
<div class="mock-sidebar">导航</div>
<div class="mock-content">主内容区域</div>
</div>
<button class="mock-button">操作按钮</button>
<input class="mock-input" placeholder="输入框">
<div class="placeholder">占位区域</div>
```
### 排版和区块
- `h2` — 页面标题
- `h3` — 章节标题
- `.subtitle` — 标题下方的辅助文字
- `.section` — 带底部边距的内容块
- `.label` — 小号大写标签文字
## 浏览器事件格式
当用户在浏览器中点击选项时,交互记录会保存到 `$SCREEN_DIR/.events`(每行一个 JSON 对象)。推送新屏幕时文件会自动清空。
```jsonl
{"type":"click","choice":"a","text":"选项 A - 简单布局","timestamp":1706000101}
{"type":"click","choice":"c","text":"选项 C - 复杂网格","timestamp":1706000108}
{"type":"click","choice":"b","text":"选项 B - 混合方案","timestamp":1706000115}
```
完整的事件流展示了用户的探索路径——他们可能在确定之前点击了多个选项。最后一个 `choice` 事件通常是最终选择,但点击模式可以揭示犹豫或值得询问的偏好。
如果 `.events` 不存在,说明用户没有与浏览器交互——仅使用他们的终端文字。
## 设计技巧
- **保真度匹配问题** — 布局问题用线框图,细节打磨问题用精细设计
- **在每个页面上解释问题** — "哪种布局看起来更专业?"而不仅仅是"选一个"
- **推进前先迭代** — 如果反馈修改了当前屏幕,写入新版本
- 每个屏幕最多 **2-4 个选项**
- **必要时使用真实内容** — 对于摄影作品集,使用实际图片(Unsplash)。占位内容会掩盖设计问题。
- **保持原型简洁** — 专注于布局和结构,而非像素级精确的设计
## 文件命名
- 使用语义化名称:`platform.html`、`visual-style.html`、`layout.html`
- 绝不复用文件名——每个屏幕必须是新文件
- 迭代版本:添加版本后缀如 `layout-v2.html`、`layout-v3.html`
- 服务器按修改时间提供最新文件
## 清理
```bash
scripts/stop-server.sh $SCREEN_DIR
```
如果会话使用了 `--project-dir`,原型文件会持久化在 `.superpowers/brainstorm/` 中以供日后参考。只有 `/tmp` 会话会在停止时被删除。
## 参考
- 框架模板(CSS 参考):`scripts/frame-template.html`
- 辅助脚本(客户端):`scripts/helper.js`

View File

@ -0,0 +1,282 @@
---
name: chinese-code-review
description: 中文 review 沟通参考——话术模板、分级标注(必须修复/建议修改/仅供参考)、国内团队常见反模式应对。仅在用户显式 /chinese-code-review 时调用,不要根据上下文自动触发。
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [code-review, chinese]
---
# 中文代码审查规范
## 概述
国内团队做 Code Review 常遇到两个极端:要么过度客气导致关键问题被放过,要么照搬西方直白风格让同事下不来台。本技能帮你找到平衡点——**既不回避问题,又让人愿意接受反馈**。
**核心原则:** 用"建议"代替"命令",用"提问"代替"否定",但绝不因为面子而放过 bug。
## 审查反馈的表达方式
### 用建议代替命令
| 避免(命令式) | 推荐(建议式) |
|---------------|---------------|
| 你必须改成 X | 建议考虑用 X,因为 Y |
| 这里写错了 | 这里可能存在一个问题,是否考虑过 Z 的情况? |
| 不要用这个方法 | 这个方法在 A 场景下可能有性能问题,可以看看 B 方案 |
| 这段代码不行 | 这段逻辑我理解得对吗?如果输入为空的话会怎样? |
### 用提问代替否定
当你不确定对方意图时,先问再评:
```
# 好的方式
这里用 sync 方式读文件是出于什么考虑?如果并发量上来,可能会阻塞事件循环。
# 不好的方式
这里不应该用 sync 方式读文件。
```
### 分级标注
统一使用优先级标记,让作者快速判断轻重缓急:
- **[必须修复]** — 安全漏洞、数据丢失风险、逻辑错误(不修不能合)
- **[建议修改]** — 性能问题、可维护性、缺少校验(本次或下次迭代修复)
- **[仅供参考]** — 命名优化、风格建议、替代方案(不改也行)
- **[问题]** — 不确定的地方,需要作者解释意图
### 审查评论模板
```
[必须修复] SQL 注入风险
第 42 行:用户输入直接拼接到 SQL 语句中。
原因:攻击者可以通过 name 参数注入 `'; DROP TABLE users; --`。
建议:使用参数化查询:
db.query('SELECT * FROM users WHERE name = $1', [name])
参考:https://cheatsheetseries.owasp.org/cheatsheets/SQL_Injection_Prevention_Cheat_Sheet.html
```
## 中英混排代码注释规范
### 何时用中文
- **业务逻辑说明** — 用中文解释业务背景和需求来源
- **复杂算法注释** — 用中文写思路,确保团队成员都能理解
- **TODO / FIXME** — 用中文描述待办事项,方便搜索和追踪
- **文档注释(内部项目)** — JSDoc / Javadoc 中的描述文字用中文
```typescript
/**
* 计算用户的会员等级折扣
*
* 业务规则:
* - 普通会员 9.5 折
* - 银卡会员 9 折
* - 金卡会员 8.5 折
* - 钻石会员 8 折
*
* @param level - 会员等级(MemberLevel enum)
* @param amount - 原始金额(单位:分)
* @returns 折后金额(单位:分)
*/
function calculateDiscount(level: MemberLevel, amount: number): number {
// ...
}
```
### 何时用英文
- **变量名、函数名、类名** — 始终用英文命名,遵循团队命名规范
- **Git commit message** — 参考下方 commit 规范
- **开源项目注释** — 面向国际社区的项目,注释统一用英文
- **错误信息和日志** — 生产环境的 error message 用英文(避免编码问题)
- **API 接口文档** — 对外暴露的 API 用英文
### 混排格式要求
```typescript
// 好:中英文之间加空格
// 使用 Redis 缓存来减少 MySQL 的查询压力
// 坏:中英文之间没有空格
// 使用Redis缓存来减少MySQL的查询压力
// 好:技术术语保留英文
// 这里用 debounce 防抖处理,避免频繁触发 API 请求
// 坏:强行翻译技术术语
// 这里用防抖动处理,避免频繁触发应用程序接口请求
```
## Commit Message 中英双语格式
### 推荐格式
团队内部项目使用中文 commit message,采用约定式提交(Conventional Commits)的中文版:
```
<类型>(<范围>): <简要描述>
<详细说明(可选)>
<关联信息(可选)>
```
### 类型对照表
| 类型 | 含义 | 示例 |
|------|------|------|
| feat | 新功能 | feat(用户): 新增手机号登录功能 |
| fix | 修复 Bug | fix(支付): 修复微信支付回调重复处理的问题 |
| docs | 文档变更 | docs: 更新 API 接口文档 |
| style | 代码格式 | style: 统一缩进为 2 个空格 |
| refactor | 重构 | refactor(订单): 拆分订单服务,提取公共逻辑 |
| perf | 性能优化 | perf(列表): 虚拟滚动优化长列表渲染性能 |
| test | 测试 | test(auth): 补充登录模块单元测试 |
| chore | 构建/工具 | chore: 升级 Node.js 至 v20 |
### 示例
```
fix(支付): 修复支付宝异步回调签名校验失败的问题
原因:升级 SDK 后签名算法从 RSA 变为 RSA2,但回调校验仍使用旧算法。
方案:回调处理中同时兼容 RSA 和 RSA2 签名校验。
Closes #1234
```
### 面向国际社区的项目
如果项目面向国际社区或有外籍成员,commit message 用英文,PR 描述中可附加中文说明:
```
fix(payment): fix Alipay async callback signature verification failure
The SDK upgrade changed the signature algorithm from RSA to RSA2,
but the callback handler still used the old algorithm.
Closes #1234
```
## 常见反模式与对策
### 反模式一:过度客气
**表现:** 所有评论都是"我觉得可能也许大概好像这里有个小问题"。
**后果:** 关键 bug 被隐藏在一堆委婉语里,作者根本不知道哪些必须改。
**对策:** 使用分级标注。[必须修复] 就是必须修复,语气可以温和,但级别必须准确。
```
# 坏:过度客气
不知道我理解得对不对,这里好像可能有一点点并发问题,不过也许我看错了...
# 好:温和但清晰
[必须修复] 并发安全问题
这里的 map 在多个 goroutine 中同时读写,会触发 panic。
建议加 sync.RWMutex,或者换成 sync.Map。
复现方式:加 -race flag 跑测试就能看到。
```
### 反模式二:不敢给高级开发者提意见
**表现:** 高级开发者或 Leader 的代码直接 Approve,不仔细看。
**后果:** 代码质量双标,团队对 Code Review 失去信任。
**对策:** Code Review 对事不对人。可以换个表达方式:
```
# 提问式(适合给资深同事的反馈)
想请教一下,这里选择用递归而不是迭代,是出于什么考虑?
我在想如果递归深度超过 1000 层会不会有栈溢出的风险?
# 学习式
学到了一个新写法!不过有个小疑问——这里的类型断言在运行时不会做检查,
如果上游数据结构变了,这里会静默通过。是否考虑加个 runtime validation?
```
### 反模式三:审查变成风格之争
**表现:** 大量评论纠结于缩进、空格、花括号位置。
**后果:** 浪费时间,忽略真正的问题。
**对策:** 风格问题交给 ESLint / Prettier / gofmt 等工具自动处理。Code Review 聚焦逻辑、安全、性能。
### 反模式四:只写"LGTM"
**表现:** 随手一个 LGTM 就 Approve,没有实质性审查。
**后果:** Code Review 形同虚设,出了问题没人兜底。
**对策:** 即使代码质量很好,也要写出你关注了哪些方面:
```
LGTM
审查了以下方面:
- 并发安全:锁的粒度合理
- 错误处理:所有外部调用都有 error handling
- 向下兼容:新增字段都有默认值,不影响老版本
一个小建议 [仅供参考]:第 78 行的变量名 `d` 可以改成 `duration`,更易读。
```
## 审查流程建议
### 开始审查前
1. **先看 PR 描述**,理解改动的背景和目的
2. **看关联的 Issue 或需求文档**
3. **先整体浏览**,再逐文件细看
### 审查顺序
1. **架构层面** — 方案是否合理?有没有更好的方式?
2. **正确性** — 逻辑对不对?边界条件处理了吗?
3. **安全性** — 有没有注入、越权、信息泄露?
4. **性能** — 有没有 N+1 查询、内存泄漏、不必要的循环?
5. **可维护性** — 半年后能看懂吗?测试覆盖了吗?
6. **风格** — 只关注工具无法自动处理的部分
### 给出总结
审查结束后,给一段总结,包括:
- 整体评价(一句话)
- 值得学习的地方(先扬后抑)
- 主要问题列表(按优先级)
- 建议的修改方向
```
总结:整体实现思路清晰,支付回调的幂等处理很到位。
主要问题:
1. [必须修复] 并发写 map 的问题(2 处)
2. [建议修改] 缺少对空值的校验(3 处)
3. [仅供参考] 几个变量命名可以更语义化
建议先修复并发问题,校验的部分可以本次一起改或者拆到下个迭代。
```
## 检查清单
在提交审查意见前,确认:
- [ ] 每条评论都标注了优先级
- [ ] [必须修复] 的问题都给出了具体的修复建议
- [ ] 没有因为面子而跳过关键问题
- [ ] 没有纠结于工具能自动处理的风格问题
- [ ] 对好的代码给予了肯定
- [ ] 给出了整体总结

View File

@ -0,0 +1,369 @@
---
name: chinese-commit-conventions
description: 中文 commit 与 changelog 配置参考——Conventional Commits 中文适配、commitlint/husky/commitizen 中文模板、conventional-changelog 中文配置。仅在用户显式 /chinese-commit-conventions 时调用,不要根据上下文自动触发。
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [git, chinese]
---
# 中文 Git 提交规范
## 1. Conventional Commits 中文适配
基于 Conventional Commits 1.0.0 规范,针对中文团队的实际使用习惯进行适配。
### 类型(type)定义
| 类型 | 说明 | 示例场景 |
| ---------- | ---------------------------- | -------------------------- |
| `feat` | 新功能 | 添加用户注册模块 |
| `fix` | 修复缺陷 | 修复登录页白屏问题 |
| `docs` | 文档变更 | 更新 API 接口文档 |
| `style` | 代码格式(不影响逻辑) | 调整缩进、补充分号 |
| `refactor` | 重构(非新功能、非修复) | 拆分过长的服务类 |
| `perf` | 性能优化 | 优化首页列表查询速度 |
| `test` | 测试相关 | 补充用户模块单元测试 |
| `chore` | 构建/工具/依赖变更 | 升级 webpack 到 v5 |
| `ci` | 持续集成配置 | 修改 GitHub Actions 流程 |
| `revert` | 回滚提交 | 回滚 v2.1.0 的登录重构 |
### 原则
- type 保留英文关键字(工具链兼容性好)
- scope 和 description 使用中文
- body 使用中文完整描述
## 2. 中文 commit message 模板
```
<type>(<scope>): <subject>
<body>
<footer>
```
### 完整示例
```
feat(用户模块): 添加手机号一键登录功能
- 接入运营商一键登录 SDK
- 支持移动、联通、电信三网
- 登录失败自动降级到短信验证码
Closes #128
```
```
fix(订单): 修复并发下单导致库存超卖的问题
在高并发场景下,原有的库存扣减逻辑存在竞态条件。
改用 Redis 分布式锁 + 数据库乐观锁双重保障。
影响范围:订单服务、库存服务
测试确认:已通过 500 并发压测验证
Closes #256
```
## 3. Subject 行规范
### 格式
```
<type>(<scope>): <description>
```
### 规则
- **type**: 必填,从上方类型表中选取
- **scope**: 选填,表示影响范围,使用中文模块名
- 示例:`用户模块`、`订单`、`支付`、`基础组件`
- **description**: 必填,中文简述,不超过 50 个字符
- 使用动宾短语:「添加 xxx」「修复 xxx」「优化 xxx」
- 不加句号结尾
- 不要写「修改了代码」这种无意义描述
### 好的示例
```
feat(权限): 添加基于 RBAC 的细粒度权限控制
fix(支付): 修复微信支付回调签名验证失败的问题
perf(列表页): 优化大数据量表格的虚拟滚动渲染
refactor(网关): 将单体网关拆分为独立微服务
```
### 反面示例
```
# 以下写法应避免
fix: 修了一个 bug
feat: 更新代码
chore: 改了点东西
```
## 4. Body 编写规范
Body 用于详细说明本次变更的动机、方案和影响。
### 编写要点
- 说明**为什么**要做这个改动(背景/原因)
- 说明**怎么做**的(技术方案摘要)
- 说明**影响范围**(哪些模块、接口受影响)
- 每行不超过 72 个字符(中文约 36 个汉字)
- 正文与标题之间空一行
### Body 模板
```
<改动背景和原因>
技术方案:
- <方案要点 1>
- <方案要点 2>
影响范围:<受影响的模块或服务>
```
## 5. Breaking Changes 标注
当提交包含不兼容变更时,必须在 footer 中标注。
### 格式一:footer 标注
```
feat(接口): 重构用户信息返回结构
将用户接口返回的扁平结构改为嵌套结构,前端需同步调整字段取值路径。
BREAKING CHANGE: /api/user/info 返回结构变更
- avatar 字段移入 profile 对象
- 移除已废弃的 nickname 字段,统一使用 displayName
```
### 格式二:type 后加感叹号
```
feat(接口)!: 重构用户信息返回结构
```
### 团队约定
- 涉及数据库表结构变更 -> 必须标注 BREAKING CHANGE
- 涉及公共 API 参数/返回值变更 -> 必须标注
- 涉及配置文件格式变更 -> 必须标注
- 标注时须写明迁移方法或升级步骤
## 6. Issue 关联
### GitHub 格式
```
Closes #128
Refs #129, #130
```
### Gitee 格式
```
Closes #I5ABC1
相关需求: https://gitee.com/org/repo/issues/I5ABC1
```
### Coding 格式
```
关联 Coding 缺陷 #12345
fixed=project-2024/issues/678
```
### 通用写法
```
# footer 中关联多个平台
Closes #128
Jira: PROJ-456
禅道: #789
```
## 7. Changelog 自动生成配置
### 安装 conventional-changelog
```bash
npm install -D conventional-changelog-cli conventional-changelog-conventionalcommits
```
### package.json 脚本
```json
{
"scripts": {
"changelog": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -s",
"changelog:all": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -s -r 0",
"release": "standard-version"
}
}
```
### .versionrc.js 中文配置
```javascript
module.exports = {
types: [
{ type: 'feat', section: '新功能' },
{ type: 'fix', section: '缺陷修复' },
{ type: 'perf', section: '性能优化' },
{ type: 'refactor', section: '代码重构' },
{ type: 'docs', section: '文档更新' },
{ type: 'test', section: '测试' },
{ type: 'chore', section: '构建/工具', hidden: true },
{ type: 'ci', section: '持续集成', hidden: true },
{ type: 'style', section: '代码格式', hidden: true }
],
commitUrlFormat: '{{host}}/{{owner}}/{{repository}}/commit/{{hash}}',
compareUrlFormat: '{{host}}/{{owner}}/{{repository}}/compare/{{previousTag}}...{{currentTag}}'
}
```
## 8. commitlint 中文配置
### 安装
```bash
npm install -D @commitlint/cli @commitlint/config-conventional
```
### commitlint.config.js
```javascript
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [2, 'always', [
'feat', 'fix', 'docs', 'style', 'refactor',
'perf', 'test', 'chore', 'ci', 'revert'
]],
'type-case': [2, 'always', 'lower-case'],
'type-empty': [2, 'never'],
'subject-empty': [2, 'never'],
'subject-max-length': [2, 'always', 100],
// 允许中文字符,关闭 subject-case 限制
'subject-case': [0],
// 关闭 header-max-length 或放宽(中文占宽较大)
'header-max-length': [2, 'always', 120],
'body-max-line-length': [1, 'always', 200],
'footer-max-line-length': [1, 'always', 200]
},
prompt: {
messages: {
type: '选择提交类型:',
scope: '输入影响范围(可选):',
subject: '填写简短描述:',
body: '填写详细描述(可选,使用 "|" 换行):',
breaking: '列出不兼容变更(可选):',
footer: '关联的 Issue(可选,例如 #123):',
confirmCommit: '确认提交以上信息?'
}
}
}
```
## 9. husky + lint-staged 集成
### 安装与初始化
```bash
npm install -D husky lint-staged
npx husky init
```
### 配置 commit-msg 钩子
```bash
# .husky/commit-msg
npx --no -- commitlint --edit "$1"
```
### 配置 pre-commit 钩子
```bash
# .husky/pre-commit
npx lint-staged
```
### lint-staged 配置(package.json)
```json
{
"lint-staged": {
"*.{js,ts,jsx,tsx,vue}": [
"eslint --fix",
"prettier --write"
],
"*.{css,scss,less}": [
"stylelint --fix",
"prettier --write"
],
"*.md": [
"prettier --write"
]
}
}
```
### 交互式提交(可选)
```bash
npm install -D commitizen cz-conventional-changelog
# package.json 中添加
{
"config": {
"commitizen": {
"path": "cz-conventional-changelog"
}
},
"scripts": {
"commit": "cz"
}
}
```
运行 `npm run commit` 即可进入交互式提交引导。
## 10. 团队规范检查清单
### 提交前自查
- [ ] type 是否正确选择(feat/fix/docs/...)
- [ ] scope 是否准确描述了影响模块
- [ ] subject 是否为动宾短语且不超过 50 字符
- [ ] subject 末尾是否去掉了句号
- [ ] body 是否说明了变更原因和方案
- [ ] 不兼容变更是否标注了 BREAKING CHANGE
- [ ] 相关 Issue 是否已关联
- [ ] 一次提交是否只做了一件事(原子性)
### 团队落地步骤
1. **工具链配置**:按上述步骤配置 commitlint + husky,让规范可执行
2. **模板共享**:将 `.commitlintrc`、`.husky/` 等配置提交到仓库
3. **团队培训**:组织 15 分钟的规范说明会,演示工具使用
4. **Code Review**:Review 时关注 commit message 质量
5. **持续迭代**:每季度回顾规范执行情况,根据团队反馈调整
### 常见问题
**Q: 中英文混排时空格怎么处理?**
A: 中文与英文/数字之间加一个空格,如「添加 Redis 缓存」。
**Q: scope 用中文还是英文?**
A: 团队内统一即可。推荐中文(可读性好),但需在 commitlint 中关闭 scope-case 检查。
**Q: 多人协作时如何保证规范一致?**
A: 靠工具而非靠自觉。配置好 husky + commitlint,不符合规范的提交会被拦截。

View File

@ -0,0 +1,453 @@
---
name: chinese-documentation
description: 中文文档排版参考——中英文空格、全半角标点、术语保留、链接格式、中文文案排版指北约定。仅在用户显式 /chinese-documentation 时调用,不要根据上下文自动触发。
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [documentation, chinese]
---
# 中文技术文档写作规范
## 概述
中文技术文档最常见的问题不是内容不够,而是**读起来别扭**——中英文挤在一起没有空格、全角半角混用、一股机翻味。本技能提供一套完整的中文技术文档写作规范,让你的文档**专业、好读、不出戏**。
**核心原则:** 排版服务于阅读体验,规范服务于一致性,内容服务于读者。
**参考标准:** [中文文案排版指北](https://github.com/sparanoid/chinese-copywriting-guidelines)
## 中文排版规范
### 空格
**中英文之间加空格:**
```
# 好
使用 Git 进行版本管理,配合 Jenkins 实现持续集成。
# 坏
使用Git进行版本管理,配合Jenkins实现持续集成。
```
**中文与数字之间加空格:**
```
# 好
本次更新包含 3 个新功能和 12 个 Bug 修复。
# 坏
本次更新包含3个新功能和12个Bug修复。
```
**数字与单位之间加空格:**
```
# 好
文件大小不超过 5 MB,响应时间控制在 200 ms 以内。
# 坏
文件大小不超过5MB,响应时间控制在200ms以内。
```
**例外:度数、百分比等不加空格:**
```
# 好
今天气温 32°C,CPU 使用率 95%。
# 坏
今天气温 32 °C,CPU 使用率 95 %。
```
**链接前后加空格:**
```
# 好
请参考 [官方文档](https://example.com) 获取更多信息。
# 坏
请参考[官方文档](https://example.com)获取更多信息。
```
### 标点符号
**中文语境使用全角标点:**
```
# 好
注意:该接口需要鉴权,请先获取 Token。
# 坏
注意:该接口需要鉴权,请先获取 Token.
```
**全角标点与英文/数字之间不加空格:**
```
# 好
项目使用 MIT 协议,详见 LICENSE 文件。
# 坏
项目使用 MIT 协议 ,详见 LICENSE 文件 。
```
**括号的使用:**
```
# 中文语境用全角括号
请运行安装命令(详见下方说明)。
# 括号内有英文或数字时用半角括号
该项目基于 Spring Boot (v3.2.0) 开发。
# 纯英文内容用半角括号
See the documentation (README.md) for details.
```
**引号的使用:**
```
# 中文使用直角引号(推荐)
「确定」按钮触发表单提交,「取消」按钮关闭弹窗。
# 也可以使用弯引号(视团队规范而定)
"确定"按钮触发表单提交,"取消"按钮关闭弹窗。
# 嵌套引号
他说:「请点击『确定』按钮。」
```
### 数字
```
# 阿拉伯数字(技术文档中统一使用半角数字)
支持最多 100 个并发连接。
# 不要用中文数字写技术参数
# 坏:支持最多一百个并发连接。
# 数字使用半角字符
版本号 v2.1.0,端口号 8080,HTTP 状态码 200。
```
## 中英混排最佳实践
### 术语处理原则
**保留英文的情况:**
- 专有名词:React、Kubernetes、Redis、MySQL
- 行业通用缩写:API、SDK、CLI、ORM、CI/CD
- 命令和代码:`npm install`、`git commit`
- 协议和标准:HTTP、TCP/IP、JSON、REST
- 没有公认中文翻译的术语:debounce、throttle、middleware
**翻译为中文的情况:**
- 有公认翻译的通用概念:数据库、服务器、浏览器、框架
- 描述性短语:version control → 版本控制,load balancing → 负载均衡
- 文档标题和章节名(尽量中文,技术名词可保留英文)
### 首次出现标注翻译
技术术语首次出现时,标注中英对照:
```
# 好
本系统采用消息队列(Message Queue)实现异步通信,
使用死信队列(Dead Letter Queue)处理消费失败的消息。
# 后续出现直接使用
消息队列的消费者需要实现幂等性……
```
### 避免过度翻译
```
# 好:保留业界通用英文术语
在 Controller 层做参数校验,Service 层处理业务逻辑。
# 坏:强行翻译反而看不懂
在控制器层做参数校验,服务层处理业务逻辑。
# 好
使用 Redis 做 Session 缓存。
# 坏
使用"远程字典服务"做"会话"缓存。
```
## API 文档中英对照格式
### 接口文档模板
```markdown
## 创建订单 / Create Order
### 基本信息
- **请求方式 (Method):** POST
- **请求路径 (Path):** `/api/v1/orders`
- **鉴权方式 (Auth):** Bearer Token
- **Content-Type:** application/json
### 请求参数 (Request Parameters)
| 参数名 (Field) | 类型 (Type) | 必填 (Required) | 说明 (Description) |
|----------------|-------------|-----------------|-------------------|
| product_id | string | 是 | 商品 ID (Product ID) |
| quantity | integer | 是 | 购买数量 (Quantity),最小值为 1 |
| address_id | string | 是 | 收货地址 ID (Shipping address ID) |
| coupon_code | string | 否 | 优惠券码 (Coupon code) |
### 请求示例 (Request Example)
\```json
{
"product_id": "prod_abc123",
"quantity": 2,
"address_id": "addr_xyz789",
"coupon_code": "SUMMER2024"
}
\```
### 响应参数 (Response Parameters)
| 参数名 (Field) | 类型 (Type) | 说明 (Description) |
|----------------|-------------|-------------------|
| order_id | string | 订单 ID (Order ID) |
| status | string | 订单状态 (Order status): pending / paid / shipped |
| total_amount | integer | 订单总金额,单位:分 (Total amount in cents) |
| created_at | string | 创建时间 (Created at),ISO 8601 格式 |
### 响应示例 (Response Example)
\```json
{
"code": 0,
"message": "success",
"data": {
"order_id": "ord_20240315001",
"status": "pending",
"total_amount": 9900,
"created_at": "2024-03-15T10:30:00+08:00"
}
}
\```
### 错误码 (Error Codes)
| 错误码 (Code) | 说明 (Description) | 处理建议 (Suggestion) |
|---------------|--------------------|--------------------|
| 40001 | 商品不存在 (Product not found) | 检查 product_id 是否正确 |
| 40002 | 库存不足 (Insufficient stock) | 减少购买数量或稍后重试 |
| 40003 | 优惠券已过期 (Coupon expired) | 移除 coupon_code 或更换优惠券 |
```
### 金额表示约定
```
# 好:明确说明单位
total_amount: 9900 // 单位:分(即 99.00 元)
# 坏:不说明单位,造成歧义
total_amount: 99.00 // 是元还是分?浮点数会有精度问题
```
## README.md 中文模板
国内开源项目常用的 README 结构:
```markdown
# 项目名称
[![License](https://img.shields.io/badge/license-MIT-blue.svg)]()
[![Build Status](https://img.shields.io/badge/build-passing-brightgreen.svg)]()
简短一句话介绍项目是什么、解决什么问题。
## 特性
- 特性一:简要描述
- 特性二:简要描述
- 特性三:简要描述
## 快速开始
### 环境要求
- Node.js >= 20
- MySQL >= 8.0
### 安装
\```bash
npm install your-package
\```
### 基本用法
\```typescript
import { YourPackage } from 'your-package';
const client = new YourPackage({ apiKey: 'your-key' });
const result = await client.doSomething();
\```
## 文档
- [使用指南](./docs/guide.md)
- [API 参考](./docs/api.md)
- [常见问题](./docs/faq.md)
- [更新日志](./CHANGELOG.md)
## 示例
更多示例请查看 [examples](./examples) 目录。
## 贡献指南
欢迎提交 Issue 和 Pull Request。请先阅读 [贡献指南](./CONTRIBUTING.md)。
### 本地开发
\```bash
# 克隆项目
git clone https://gitee.com/your-org/your-project.git
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 运行测试
npm test
\```
## 致谢
- [依赖项目一](https://example.com) — 简要说明
- [依赖项目二](https://example.com) — 简要说明
## 许可证
[MIT](./LICENSE)
```
## 常见问题与避坑指南
### 问题一:机翻味
**特征:** 句式生硬、不符合中文表达习惯。
```
# 机翻味
这个函数被用来计算用户的折扣。如果你想要获取更多信息,请参考文档。
# 自然中文
这个函数用于计算用户折扣。更多信息请参考文档。
```
**要点:**
- 避免被动语态("被用来" → "用于")
- 避免冗余代词("你想要" → 直接说)
- 避免直译英文句式
### 问题二:句式欧化
**特征:** 长定语、多重从句、一句话说不完。
```
# 欧化句式
这是一个可以帮助开发者在不需要手动配置复杂的构建工具链的情况下
快速搭建现代化前端项目的脚手架工具。
# 正常中文
这是一个前端脚手架工具,帮助开发者快速搭建项目,免去手动配置构建工具链的麻烦。
```
**要点:**
- 长句拆成短句
- 把定语从句改成并列句
- 一句话只说一件事
### 问题三:过度翻译
```
# 过度翻译
请打开您的"终端模拟器",运行"节点包管理器"的安装命令。
# 正常写法
请打开终端,运行 npm install。
```
### 问题四:中英标点混用
```
# 坏:中文句子用了英文逗号和句号
请先安装依赖,然后运行测试.
# 好:中文句子用全角标点
请先安装依赖,然后运行测试。
# 坏:英文内容用了中文标点
Run `npm install`,then `npm test`。
# 好:英文内容用半角标点
Run `npm install`, then `npm test`.
```
### 问题五:缺乏结构化
```
# 坏:一大段文字没有分段
本系统使用 Redis 做缓存提高查询性能同时使用 MySQL 做持久化存储
数据写入时先写 MySQL 再异步更新 Redis 缓存读取时先查 Redis 如果
未命中再查 MySQL 并将结果回写缓存设置过期时间为 30 分钟……
# 好:用列表和分段组织信息
本系统的缓存策略如下:
- **存储层:** MySQL(持久化)+ Redis(缓存)
- **写入流程:** 先写 MySQL,再异步更新 Redis
- **读取流程:** 先查 Redis → 未命中则查 MySQL → 回写 Redis
- **缓存过期:** TTL 设为 30 分钟
```
## 写作检查清单
在发布文档前,逐项检查:
### 排版
- [ ] 中英文之间有空格
- [ ] 中文与数字之间有空格
- [ ] 中文语境使用全角标点
- [ ] 英文/代码部分使用半角标点
- [ ] 没有全角半角标点混用
### 术语
- [ ] 专有名词保留英文原文
- [ ] 首次出现的术语标注了中英对照
- [ ] 没有过度翻译业界通用术语
- [ ] 术语使用前后一致
### 内容
- [ ] 句子简短,没有欧化长句
- [ ] 没有不必要的被动语态
- [ ] 用列表和表格组织结构化信息
- [ ] 代码示例可以直接运行
- [ ] 没有"机翻味"
### 格式
- [ ] 标题层级正确(不跳级)
- [ ] 代码块标注了语言类型
- [ ] 链接可以正常访问
- [ ] 图片有 alt 文本

View File

@ -0,0 +1,552 @@
---
name: chinese-git-workflow
description: 国内 Git 平台配置参考——Gitee、Coding.net、极狐 GitLab、CNB 的 SSH/HTTPS/凭据/CI 接入差异与镜像同步配置。仅在用户显式 /chinese-git-workflow 时调用,不要根据上下文自动触发。
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [git, chinese]
---
# 国内 Git 工作流规范
## 概述
国内团队用 Git 经常踩的坑:GitHub 访问不稳定、CI/CD 方案照搬国外水土不服、commit message 中英混杂没有规范。本技能提供一套**完整适配国内平台和团队习惯的 Git 工作流**。
**核心原则:** 工作流服务于团队效率,不是为了流程而流程。选适合团队规模的,别硬套大厂方案。
## 国内 Git 平台适配
### 平台对比
| 特性 | Gitee | Coding.net | 极狐 GitLab | CNB | GitHub |
|------|-------|------------|-------------|-----|--------|
| 国内访问 | 快 | 快 | 快 | 快 | 不稳定 |
| 免费私有仓库 | 有 | 有 | 有 | 有 | 有 |
| CI/CD | Gitee Go | Coding CI | 内置 GitLab CI | 内置(.cnb.yml) | GitHub Actions |
| 代码审查 | PR | MR | MR | MR | PR |
| 制品库 | 有限 | 完整 | 完整 | 完整 | Packages |
| 适合场景 | 开源/小团队 | 中大型团队 | 企业私有化 | 云原生 / Docker 流水线 | 国际项目 |
### Gitee 特有配置
```bash
# 设置 Gitee 远程仓库
git remote add origin https://gitee.com/<org>/<repo>.git
# Gitee 的 SSH 配置
# ~/.ssh/config
Host gitee.com
HostName gitee.com
User git
IdentityFile ~/.ssh/gitee_rsa
PreferredAuthentications publickey
# 同时推送到 Gitee 和 GitHub(镜像同步)
git remote set-url --add --push origin https://gitee.com/<org>/<repo>.git
git remote set-url --add --push origin https://github.com/<org>/<repo>.git
```
### Coding.net 特有配置
```bash
# Coding 的仓库地址格式
git remote add origin https://e.coding.net/<team>/<project>/<repo>.git
# Coding 支持的 SSH 地址
git remote add origin git@e.coding.net:<team>/<project>/<repo>.git
```
### 极狐 GitLab 特有配置
```bash
# 极狐 GitLab 私有化部署常见地址格式
git remote add origin https://jihulab.com/<group>/<repo>.git
# 或者企业内部部署
git remote add origin https://gitlab.yourcompany.com/<group>/<repo>.git
```
### CNB(Cloud Native Build)特有配置
```bash
# CNB 仓库地址(仅支持 HTTPS,不提供 SSH 协议)
git remote add origin https://cnb.cool/<org>/<repo>.git
# HTTPS 认证:用户名固定为 cnb,密码为个人访问令牌(Access Token)
# 在 CNB 平台 → 个人设置 → 访问令牌 中生成
git config credential.helper store
```
## 工作流选择
### 方案一:主干开发(Trunk-Based Development)
**适合:** 小团队(2-8 人)、迭代速度快、有完善的自动化测试。
```
main ──●──●──●──●──●──●──●──●──●──
\ / \ / \ /
feat/x ●─● ●─● fix/y ●─●
(短命分支,1-2 天内合回)
```
**规则:**
- 主干(main)始终保持可发布状态
- 功能分支生命周期不超过 2 天
- 每天至少合并一次到主干
- 用 Feature Flag 控制未完成功能的可见性
```bash
# 从 main 拉分支
git checkout -b feat/user-login main
# 开发完成后,rebase 到最新 main
git fetch origin
git rebase origin/main
# 提交 PR/MR,合并后删除分支
```
### 方案二:Git Flow(经典分支模型)
**适合:** 中大团队、版本发布节奏固定(如双周迭代)、需要维护多个版本。
```
main ──●────────────────●────────────── 生产环境
\ / \
release ●──●──●──●──● ●──●──●──●── 发布分支
\ /
develop ──●──●──●──●──●──●──●──●──●──●── 开发主线
\ / \ /
feat/x ●─● ●─────● 功能分支
\ /
fix/y ●─● 修复分支
```
**分支说明:**
- `main` — 生产环境代码,只接受 release 和 hotfix 的合并
- `develop` — 开发主线,功能分支从这里拉出,合回这里
- `release/*` — 发布分支,从 develop 拉出,只修 bug 不加功能
- `feat/*` — 功能分支
- `hotfix/*` — 紧急修复,从 main 拉出,同时合回 main 和 develop
### 方案三:国内团队常用简化流程
**适合:** 大多数国内中小团队的实际情况。
```
main ──●──────●──────●──── 生产环境(受保护)
\ / \ /
dev ──●──●─●──●──●─●──── 开发/测试环境
\ / \ /
feat/x ●● ●● 功能分支
```
**规则:**
- `main` 分支受保护,只能通过 PR/MR 合并
- `dev` 分支对应测试环境,自动部署
- 功能分支从 `dev` 拉出,合回 `dev`
- `dev` 测试通过后,合并到 `main` 进行发布
## 分支命名规范
### 国内团队常用命名
```bash
# 功能分支
feat/user-login # 新功能
feat/JIRA-1234-order-refund # 关联任务编号
# 修复分支
fix/payment-callback # Bug 修复
fix/JIRA-5678-null-pointer # 关联 Bug 编号
# 发布分支
release/v2.1.0 # 版本发布
release/2024-03-sprint # 按迭代命名
# 紧急修复
hotfix/v2.0.1 # 线上紧急修复
hotfix/fix-login-crash # 描述性命名
# 个人分支(部分团队使用)
dev/zhangsan/feat-login # 个人开发分支
```
### 命名规则
1. 全部小写,用 `-` 连接单词(不用下划线或驼峰)
2. 前缀明确分支类型:`feat/`、`fix/`、`hotfix/`、`release/`
3. 关联任务管理平台的编号(如有):`feat/TAPD-12345-description`
4. 长度适中,能看出分支目的即可
## 中文 Commit Message 规范
### 约定式提交(Conventional Commits)中文版
```
<类型>(<范围>): <简要描述>
← 空行
<正文(可选)>
← 空行
<脚注(可选)>
```
### 类型清单
| 类型 | 说明 | emoji(可选) |
|------|------|--------------|
| feat | 新增功能 | ✨ |
| fix | 修复 Bug | 🐛 |
| docs | 文档更新 | 📝 |
| style | 代码格式(不影响逻辑) | 💄 |
| refactor | 重构(不是新功能也不是修 Bug) | ♻️ |
| perf | 性能优化 | ⚡ |
| test | 测试相关 | ✅ |
| build | 构建系统或外部依赖 | 📦 |
| ci | CI/CD 配置 | 👷 |
| chore | 其他杂项 | 🔧 |
| revert | 回滚 | ⏪ |
### 好的 commit message
```
feat(购物车): 支持批量删除商品
- 新增全选/反选功能
- 删除操作增加二次确认弹窗
- 批量删除接口使用 POST /cart/batch-delete
关联需求:TAPD-12345
```
```
fix(支付): 修复微信支付在 iOS 16 上无法唤起的问题
原因:微信 SDK 8.0.33 版本在 iOS 16 上 Universal Links 校验逻辑变更,
导致 openURL 回调失败。
方案:升级 SDK 至 8.0.38,并更新 Associated Domains 配置。
Closes #567
```
### 不好的 commit message
```
# 太笼统
update code
fix bug
修改了一些东西
# 没有上下文
fix: 修复问题
feat: 新增功能
# 中英混杂无规范
fix:修复了一个bug,因为user login的时候会crash
```
## CI/CD 平台适配
### Gitee Go
```yaml
# .gitee/pipelines/pipeline.yml
name: 构建与测试
displayName: '构建与测试流水线'
triggers:
push:
branches:
include:
- main
- dev
stages:
- name: 测试
jobs:
- name: 单元测试
steps:
- step: npmbuild@1
name: install_and_test
displayName: '安装依赖并执行测试'
inputs:
nodeVersion: 20
commands:
- npm ci
- npm test
```
### Coding CI
```groovy
// Jenkinsfile(Coding CI 支持 Jenkinsfile 语法)
pipeline {
agent any
stages {
stage('安装依赖') {
steps {
sh 'npm ci'
}
}
stage('单元测试') {
steps {
sh 'npm test'
}
}
stage('构建') {
steps {
sh 'npm run build'
}
}
stage('部署到测试环境') {
when {
branch 'dev'
}
steps {
sh './scripts/deploy-staging.sh'
}
}
stage('部署到生产环境') {
when {
branch 'main'
}
steps {
sh './scripts/deploy-production.sh'
}
}
}
post {
failure {
// 企业微信/钉钉通知
sh './scripts/notify-failure.sh'
}
}
}
```
### 极狐 GitLab CI
```yaml
# .gitlab-ci.yml
stages:
- test
- build
- deploy
variables:
NODE_IMAGE: node:20-alpine
# 使用国内镜像加速
NPM_REGISTRY: https://registry.npmmirror.com
单元测试:
stage: test
image: $NODE_IMAGE
script:
- npm config set registry $NPM_REGISTRY
- npm ci
- npm test
coverage: '/Lines\s*:\s*(\d+\.?\d*)%/'
构建:
stage: build
image: $NODE_IMAGE
script:
- npm config set registry $NPM_REGISTRY
- npm ci
- npm run build
artifacts:
paths:
- dist/
部署测试环境:
stage: deploy
script:
- ./scripts/deploy-staging.sh
only:
- dev
environment:
name: staging
部署生产环境:
stage: deploy
script:
- ./scripts/deploy-production.sh
only:
- main
environment:
name: production
when: manual # 生产环境手动触发
```
### CNB(Cloud Native Build)
```yaml
# .cnb.yml — branch-first 结构,直接指定 Docker 镜像跑流水线
main:
push:
- docker:
image: node:20
stages:
- npm ci
- npm test
- npm run build
pull_request:
- docker:
image: node:20
stages:
- npm run lint
- npm test
```
**特点:**
- 每个流水线独立指定 Docker 镜像,天然云原生
- 支持 `push` / `pull_request` 触发
- 同一事件可并行多条流水线
- `stages` 也支持 `- name: xxx` + `script:` 的展开形式,复杂场景见官方文档
### GitHub Actions 国内替代方案对照
| GitHub Actions 功能 | Gitee Go | Coding CI | 极狐 GitLab CI | CNB |
|---------------------|----------|-----------|----------------|-----|
| 触发条件 | triggers | Jenkinsfile triggers | only/rules | push / pull_request |
| 缓存依赖 | cache step | stash/unstash | cache | 见官方文档 |
| 制品存储 | artifacts | 制品库 | artifacts | 见官方文档 |
| 环境变量 | env | environment | variables | env |
| 密钥管理 | 环境变量配置 | 凭据管理 | CI/CD Variables | Access Token |
| 手动触发 | 手动运行 | 手动触发 | when: manual | 页面手动运行 |
## PR/MR 描述模板
### 中文模板
在仓库中创建 PR/MR 模板文件:
**Gitee:** `.gitee/PULL_REQUEST_TEMPLATE.md`
**Coding / GitLab:** `.gitlab/merge_request_templates/default.md`
```markdown
## 变更说明
<!-- 简要描述这次改动做了什么,解决了什么问题 -->
## 变更类型
- [ ] 新功能(feat)
- [ ] Bug 修复(fix)
- [ ] 重构(refactor)
- [ ] 性能优化(perf)
- [ ] 文档更新(docs)
- [ ] 其他:
## 关联信息
- 需求/Bug 链接:
- 设计文档:
## 改动范围
<!-- 列出主要改动的模块和文件 -->
## 测试情况
- [ ] 单元测试通过
- [ ] 手动测试通过
- [ ] 相关模块回归测试通过
## 测试方法
<!-- 描述如何验证这次改动 -->
## 影响范围
<!-- 这次改动可能影响哪些功能?是否需要通知其他团队? -->
## 部署注意事项
- [ ] 需要执行数据库迁移
- [ ] 需要更新配置文件
- [ ] 需要更新环境变量
- [ ] 无特殊注意事项
## 截图/录屏
<!-- 如果涉及 UI 变更,贴截图或录屏 -->
```
## 常用 Git 配置
### 国内环境优化
```bash
# 设置用户信息
git config --global user.name "张三"
git config --global user.email "zhangsan@company.com"
# commit message 编辑器设置为 VS Code
git config --global core.editor "code --wait"
# 解决中文文件名显示为转义字符的问题
git config --global core.quotepath false
# 设置默认分支名
git config --global init.defaultBranch main
# 代理设置(如果需要同时使用 GitHub)
git config --global http.https://github.com.proxy socks5://127.0.0.1:7890
# NPM 使用国内镜像
npm config set registry https://registry.npmmirror.com
```
### .gitignore 国内项目常见配置
```gitignore
# IDE
.idea/
.vscode/
*.swp
# 依赖
node_modules/
vendor/
# 构建产物
dist/
build/
*.exe
# 环境配置
.env
.env.local
.env.*.local
# 系统文件
.DS_Store
Thumbs.db
desktop.ini
# 国内平台特有
.coding/
```
## 检查清单
在推送代码前,确认:
- [ ] 分支命名符合团队规范
- [ ] commit message 格式正确,类型和范围准确
- [ ] 关联了对应的需求/Bug 编号
- [ ] PR/MR 描述填写完整
- [ ] CI 流水线通过
- [ ] 已请求相关同事 Review

View File

@ -0,0 +1,170 @@
---
name: dispatching-parallel-agents
description: 当面对 2 个以上可以独立进行、无共享状态或顺序依赖的任务时使用
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [agents, parallel]
---
# 并行分派智能体
## 概述
你将任务委派给具有隔离上下文的专用智能体。通过精心设计它们的指令和上下文,确保它们专注并成功完成任务。它们不应继承你的会话上下文或历史记录——你要精确构造它们所需的一切。这样也能为你自己保留用于协调工作的上下文。
当你遇到多个不相关的失败(不同的测试文件、不同的子系统、不同的 bug),逐一排查会浪费时间。每个排查都是独立的,可以并行进行。
**核心原则:** 每个独立问题域分派一个智能体,让它们并发工作。
## 何时使用
```dot
digraph when_to_use {
"存在多个失败?" [shape=diamond];
"它们是否独立?" [shape=diamond];
"单个智能体排查所有问题" [shape=box];
"每个问题域一个智能体" [shape=box];
"能否并行工作?" [shape=diamond];
"顺序执行智能体" [shape=box];
"并行分派" [shape=box];
"存在多个失败?" -> "它们是否独立?" [label="是"];
"它们是否独立?" -> "单个智能体排查所有问题" [label="否 - 有关联"];
"它们是否独立?" -> "能否并行工作?" [label="是"];
"能否并行工作?" -> "并行分派" [label="是"];
"能否并行工作?" -> "顺序执行智能体" [label="否 - 有共享状态"];
}
```
**适用场景:**
- 3 个以上测试文件因不同根因失败
- 多个子系统独立出现故障
- 每个问题无需其他问题的上下文即可理解
- 排查之间无共享状态
**不适用场景:**
- 失败是相关的(修复一个可能修复其他的)
- 需要理解完整的系统状态
- 智能体之间会互相干扰
## 模式
### 1. 识别独立的问题域
按故障分组:
- 文件 A 测试:工具审批流程
- 文件 B 测试:批量完成行为
- 文件 C 测试:中止功能
每个问题域是独立的——修复工具审批不会影响中止测试。
### 2. 创建聚焦的智能体任务
每个智能体获得:
- **明确范围:** 一个测试文件或子系统
- **清晰目标:** 让这些测试通过
- **约束条件:** 不修改其他代码
- **预期输出:** 你发现和修复内容的总结
### 3. 并行分派
```typescript
// 在 Claude Code / AI 环境中
Task("修复 agent-tool-abort.test.ts 的失败")
Task("修复 batch-completion-behavior.test.ts 的失败")
Task("修复 tool-approval-race-conditions.test.ts 的失败")
// 三个任务并发运行
```
### 4. 审查与集成
当智能体返回时:
- 阅读每个总结
- 验证修复之间没有冲突
- 运行完整测试套件
- 集成所有更改
## 智能体提示词结构
好的智能体提示词应该是:
1. **聚焦的** - 一个清晰的问题域
2. **自包含的** - 包含理解问题所需的所有上下文
3. **明确输出要求** - 智能体应该返回什么?
```markdown
修复 src/agents/agent-tool-abort.test.ts 中 3 个失败的测试:
1. "should abort tool with partial output capture" - 期望消息中包含 'interrupted at'
2. "should handle mixed completed and aborted tools" - 快速工具被中止而非完成
3. "should properly track pendingToolCount" - 期望 3 个结果但得到 0 个
这些是时序/竞态条件问题。你的任务:
1. 阅读测试文件,理解每个测试验证的内容
2. 找到根因——是时序问题还是实际 bug?
3. 修复方式:
- 用基于事件的等待替换任意超时
- 如果发现中止实现中的 bug 则修复
- 如果测试的是已变更的行为则调整测试期望
不要只是增加超时时间——找到真正的问题。
返回:你发现了什么以及修复了什么的总结。
```
## 常见错误
**错误做法:太宽泛:** "修复所有测试" - 智能体会迷失方向
**正确做法:具体明确:** "修复 agent-tool-abort.test.ts" - 聚焦的范围
**错误做法:无上下文:** "修复竞态条件" - 智能体不知道在哪里
**正确做法:提供上下文:** 粘贴错误信息和测试名称
**错误做法:无约束:** 智能体可能会重构所有代码
**正确做法:设置约束:** "不要修改生产代码" 或 "只修复测试"
**错误做法:模糊的输出要求:** "修好它" - 你不知道改了什么
**正确做法:明确要求:** "返回根因和修改内容的总结"
## 不适用的场景
**关联性失败:** 修复一个可能修复其他的——先一起排查
**需要完整上下文:** 理解问题需要看到整个系统
**探索性调试:** 你还不知道什么坏了
**共享状态:** 智能体会互相干扰(编辑同一文件、使用同一资源)
## 实际案例
**场景:** 大规模重构后,3 个文件中出现 6 个测试失败
**失败情况:**
- agent-tool-abort.test.ts:3 个失败(时序问题)
- batch-completion-behavior.test.ts:2 个失败(工具未执行)
- tool-approval-race-conditions.test.ts:1 个失败(执行计数 = 0)
**决策:** 独立的问题域——中止逻辑、批量完成、竞态条件各自独立
**分派:**
```
智能体 1 → 修复 agent-tool-abort.test.ts
智能体 2 → 修复 batch-completion-behavior.test.ts
智能体 3 → 修复 tool-approval-race-conditions.test.ts
```
**结果:**
- 智能体 1:用基于事件的等待替换了超时
- 智能体 2:修复了事件结构 bug(threadId 位置不对)
- 智能体 3:添加了等待异步工具执行完成的逻辑
**集成:** 所有修复互相独立,无冲突,完整测试套件全部通过
## 验证
智能体返回后:
1. **审查每个总结** - 理解改了什么
2. **检查冲突** - 智能体是否编辑了同一段代码?
3. **运行完整套件** - 验证所有修复协同工作
4. **抽查** - 智能体可能犯系统性错误

View File

@ -0,0 +1,181 @@
---
name: executing-plans
description: 当你有一份书面实现计划需要在单独的会话中执行,并设有审查检查点时使用
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [execution, planning]
---
# 执行计划
## 概述
加载计划,批判性审查,执行所有任务,完成后报告。
**开始时宣布:** "我正在使用 executing-plans 技能来实现此计划。"
**注意:** 告诉你的人类伙伴,Superpowers 在有子代理支持时效果好得多(Claude Code、Codex CLI、Codex App、Copilot CLI 与 Gemini CLI 都算;见 `../using-superpowers/references/` 下的各平台工具参考)。如果子代理可用,请使用 subagent-driven-development 而非此技能。
## 流程
### 步骤 1:加载并审查计划
1. 确保有一个隔离的工作区:用 using-git-worktrees 创建一个,或者核实已有的那个
2. 读取计划文件
3. 批判性审查——识别计划中的任何问题或疑虑
4. 如果有疑虑:在开始之前向你的人类伙伴提出
5. 如果没有疑虑:创建 TodoWrite 并继续
**审查时重点检查:**
- 步骤之间是否有依赖遗漏?(A 依赖 B,但 B 排在 A 之后)
- 验证条件是否明确?("确认可用"不算,"运行 `npm test` 全部通过"才算)
- 是否有隐含的环境假设?(Node 版本、数据库连接、API Key)
**审查示例:**
```
计划文件:docs/plan.md
任务清单:5 个任务
审查发现:
- 任务 3(添加数据库迁移)应在任务 2(编写数据模型)之后,顺序正确 ✓
- 任务 4 的验证条件写的是"确认功能正常"→ 需澄清:具体跑什么测试?
- 计划未提及 Python 版本要求 → 需确认
向伙伴提出:
"计划整体可执行。有两个问题:(1) 任务 4 的验证条件不够具体,建议改为
'运行 pytest tests/test_api.py 全部通过';(2) 需要确认 Python 版本要求。"
```
### 步骤 2:执行任务
对于每个任务:
1. **标记为进行中** — 更新 TodoWrite
2. **理解目标** — 重读任务描述,明确完成标准
3. **执行实现** — 严格按照计划步骤执行(计划已有小步骤)
4. **运行验证** — 按要求运行测试或检查
5. **提交变更** — 每完成一个任务提交一次,commit message 引用任务编号
6. **标记为已完成** — 更新 TodoWrite
**每个任务的节奏:**
```
--- 任务 2/5:添加用户验证 ---
[标记进行中]
目标:为 /api/users 添加输入验证
完成标准:所有验证测试通过,无效输入返回 400
[实现]
- 添加 validateUser() 中间件
- 编写 3 个验证规则(email 格式、密码强度、用户名长度)
[验证]
$ npm test -- --grep "validation"
✓ 拒绝无效 email (12ms)
✓ 拒绝弱密码 (8ms)
✓ 拒绝过长用户名 (5ms)
3 passing
[提交]
$ git add src/middleware/validate.js tests/validation.test.js
$ git commit -m "feat: 添加用户输入验证(任务 2/5)"
[标记完成]
--- 任务 2/5 完成 ---
```
**持续自查:**
- 执行过程中持续留意:整体方向还对吗?有没有偏离计划?
- 如果发现前面的实现有问题,先修复再继续,不要带着问题往下走
### 步骤 3:完成开发
所有任务完成并验证后:
- 宣布:"我正在使用 finishing-a-development-branch 技能来完成此工作。"
- **必需子技能:** 使用 finishing-a-development-branch
- 按照该技能的指引验证测试、展示选项、执行选择
**完成报告模板:**
```
## 执行报告
**计划:** docs/plan.md
**分支:** feature/user-validation
**任务:** 5/5 已完成
### 完成的任务
1. ✅ 初始化项目结构
2. ✅ 添加用户验证
3. ✅ 添加数据库迁移
4. ✅ 实现 API 端点
5. ✅ 添加集成测试
### 验证结果
- 单元测试:23/23 通过
- 集成测试:8/8 通过
- lint 检查:0 个警告
### 偏离计划的地方
- 任务 3:Redis 配置从 env 改为 config.yaml(经伙伴同意)
### 下一步
按 finishing-a-development-branch 技能处理合并/PR
```
## 何时停下来求助
**在以下情况立即停止执行:**
- 遇到阻塞(缺少依赖、测试失败、指令不清)
- 计划有严重缺陷导致无法开始
- 你不理解某条指令
- 验证反复失败(同一测试失败 2 次以上)
**不确定时就问,不要猜测。**
## 常见异常处理
> 🇨🇳 **本节是 superpowers-zh 的增量内容,上游 obra/superpowers 没有。**
> 它展开的是上一节「遇到阻塞(缺少依赖、测试失败、指令不清)」的三种具体情形。
> 上游的步骤 1–3 与其余各节均为逐节翻译,未被本节改动。
**测试失败:**
1. 读错误信息,定位失败原因
2. 区分:是实现 bug?还是测试本身有问题?还是计划描述有误?
3. 实现 bug → 修复并重跑
4. 测试有问题 → 修复测试,向伙伴说明
5. 计划有误 → 停下来,向伙伴报告并建议修正
**依赖缺失:**
```
任务 3 需要 Redis 连接,但计划中没有提及 Redis 配置。
→ 停止执行
→ 向伙伴报告:"任务 3 需要 Redis,计划中未包含配置步骤。
建议:在任务 3 前插入 '配置 Redis 连接' 步骤。"
```
**指令不清:**
- 不要猜测意图,不要"合理推断"
- 列出你的理解和困惑,让伙伴澄清
- 等待回复后再继续
**提交粒度:** 每个任务单独提交,commit message 引用任务编号。
## 何时回到之前的步骤
**回到审查(步骤 1)当:**
- 伙伴根据你的反馈更新了计划
- 根本性的方案需要重新考虑
**不要硬闯阻塞** — 停下来问。
## 注意事项
- 先批判性审查计划
- 严格按照计划步骤执行
- 不要跳过验证
- 计划要求时引用相应技能
- 遇到阻塞时停下来,不要猜测
- 未经用户明确同意,绝不在 main/master 分支上开始实现

View File

@ -0,0 +1,209 @@
---
name: finishing-a-development-branch
description: 当实现完成、所有测试通过、需要决定如何集成这份工作时使用
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [git, workflow]
---
# 收尾一个开发分支
## 概述
**核心原则:** 验证测试 → 检测环境 → 展示选项 → 执行选择 → 清理。
**开始时宣告:** "我正在使用 finishing-a-development-branch 技能来收尾这份工作。"
## 步骤 1:验证测试
运行项目的完整测试套件(`npm test` / `cargo test` / `pytest` / `go test ./...`)。
**如果测试失败**,报告失败并停下——菜单是在测试全绿之后才出现的:
```
测试失败(<N> 个)。完成之前必须先修:
[展示失败详情]
```
**如果测试通过:** 继续步骤 2。
## 步骤 2:检测环境
```bash
GIT_DIR=$(cd "$(git rev-parse --git-dir)" 2>/dev/null && pwd -P)
GIT_COMMON=$(cd "$(git rev-parse --git-common-dir)" 2>/dev/null && pwd -P)
# 现在就捕获 —— 此刻还在工作区里面。步骤 5 会切换目录,
# 而清理(步骤 6)需要这个值
WORKTREE_PATH=$(git rev-parse --show-toplevel)
```
这决定了展示哪种菜单、以及清理方式:
| 状态 | 菜单 | 清理 |
|------|------|------|
| `GIT_DIR == GIT_COMMON`(普通仓库) | 标准 3 个选项 | 无 worktree 可清理 |
| `GIT_DIR != GIT_COMMON`,命名分支 | 标准 3 个选项 | 按来源判断(见步骤 6) |
| `GIT_DIR != GIT_COMMON`,分离 HEAD | 收敛为 2 个选项(不含合并) | 由外部管理——原地别动 |
## 步骤 3:确定基础分支
基础分支就是这份工作从哪儿分出来的那个——通常在计划里、对话里,或者分支的 upstream 里已经写明了。如果还不知道,就问:"这个分支是从 <你的最佳猜测> 分出来的,对吗?"**合并之前先确认:合并到错误的基础分支,代价很高。**
## 步骤 4:展示选项
**普通仓库和命名分支 worktree——精确展示这 3 个选项:**
```
实现已完成。你想怎么做?
1. 本地合并回 <base-branch>
2. 推送并创建 Pull Request
3. 保留分支不动(我稍后自己处理)
选哪个?
```
**分离 HEAD——精确展示这 2 个选项:**
```
实现已完成。你当前处于分离 HEAD(由外部管理的工作区)。
1. 作为新分支推送并创建 Pull Request
2. 保持原样(我稍后自己处理)
选哪个?
```
**照原文展示菜单**——简洁,每个选项都来自上面的列表。**丢弃工作只在你的人类伙伴明确提出时才发生**(见下方"如果你的人类伙伴要求丢弃这份工作")。等他们回答;集成与否是他们的决定。
## 步骤 5:执行选择
### 选项 1:本地合并
```bash
# 切到主仓库根目录,保证 CWD 安全
MAIN_ROOT=$(git -C "$(git rev-parse --git-common-dir)/.." rev-parse --show-toplevel)
cd "$MAIN_ROOT"
# 先合并 —— 在删除任何东西之前先验证合并成功
git checkout <base-branch>
git pull
git merge <feature-branch>
# 在合并结果上验证测试
<测试命令>
```
如果测试在**合并结果**上失败:停下,把 worktree 和分支原地留着,去排查——什么都还没推送,所以这次合并是本地的、可恢复的。
一旦合并结果全绿:清理 worktree(步骤 6),然后删除分支:
```bash
git branch -d <feature-branch>
```
### 选项 2:推送并创建 PR
```bash
git push -u origin <feature-branch>
# 从分离 HEAD 出发时,在远端指定新分支名:
# git push origin HEAD:refs/heads/<new-branch>
```
然后用**代码托管平台**(forge)的工具针对 <base-branch> 创建 pull/merge request——有 CLI 就用它,没有就用推送时大多数平台会打印出来的创建 URL——遵循仓库里已有的 PR 模板与约定(如果有),并把 URL 报告给你的人类伙伴。
**保留 worktree**——你的人类伙伴要在那里根据 PR 反馈继续迭代。
### 选项 3:保持原样
报告:"保留分支 <name>。工作树保留在 <path>。"
### 如果你的人类伙伴要求丢弃这份工作
**这条路只作为对"明确要求把工作扔掉"的响应而存在。** 先确认:
```
这将永久删除:
- 分支 <name>
- 所有 commit:<commit 列表>
- 位于 <path> 的工作树
输入 'discard' 以确认。
```
等待**这个精确的**确认词。收到之后:
```bash
MAIN_ROOT=$(git -C "$(git rev-parse --git-common-dir)/.." rev-parse --show-toplevel)
cd "$MAIN_ROOT"
```
然后清理 worktree(步骤 6),再强制删除分支:
```bash
git branch -D <feature-branch>
```
## 步骤 6:清理工作区
**只对选项 1 和已确认的丢弃执行。** 选项 2 和 3 始终保留 worktree。两个调用方都已经切到主仓库根目录了——移除 worktree 必须从 worktree 外面执行——因此这里使用**步骤 2 里捕获的** `GIT_DIR` / `GIT_COMMON` / `WORKTREE_PATH`,也就是那次目录切换之前的值。
> ⚠️ **不要在这里重新计算这些值。** 此刻 `git rev-parse --show-toplevel` 返回的是主仓库根目录,不是 worktree 路径 —— 溯源判断会永远匹配不上,清理会静默空转,随后分支删除还会因为 worktree 仍挂着而失败。
**如果 `GIT_DIR == GIT_COMMON`:** 普通仓库,无 worktree 可清理。结束。
**如果 `WORKTREE_PATH` 在 `.worktrees/` 或 `worktrees/` 之下:** 这是 Superpowers 创建的 worktree——我们负责清理:
```bash
git worktree remove "$WORKTREE_PATH"
git worktree prune # 自愈:清理任何过期的注册记录
```
**如果删除被拒绝**(`contains modified or untracked files`):这个 worktree 里存着**别处都不存在**的文件 —— 未提交的计划、笔记或草稿。**绝不要自作主张加 `--force`。** 把利害关系摆给你的人类伙伴看,然后问他:
```bash
git -C "$WORKTREE_PATH" status --porcelain -uall
```
```
worktree 删除被拒绝 —— 这些文件从未被提交:
<文件列表>
1. 先把它们提交到 <branch>,再做清理
2. 把它们移到 <主仓库根目录>
3. 删掉它们(不可恢复)
选哪个?
```
按他选的做完,再删除 worktree。
**否则:** 这个工作区归宿主环境所有——原地别动。如果你的平台提供了工作区退出工具,用它。
## 快速参考
| 选项 | 合并 | 推送 | 保留工作树 | 清理分支 |
|------|------|------|-----------|---------|
| 1. 本地合并 | 是 | - | - | 是 |
| 2. 创建 PR | - | 是 | 是 | - |
| 3. 保持原样 | - | - | 是 | - |
| 丢弃(仅在明确要求时) | - | - | - | 是(强制) |
## 常见的合理化借口
| 借口 | 现实 |
|------|------|
| "测试这个会话早先通过过" | 在**你即将集成的那棵树上**跑测试套件。一次绿色运行只能证明它当时跑的那棵树。 |
| "他们显然是想合并的" | 集成是你人类伙伴的决定。把菜单摆出来,然后等。 |
| "他们看起来对这个功能收工了——我提议丢弃吧" | 菜单就是原文那样,不多不少。丢弃只在你的人类伙伴用明确的话提出时才发生。 |
| "'嗯,删掉吧'算确认了" | 只有输入 `discard` 这个词才授权删除。 |
| "PR 已经开了,worktree 现在是碍事的垃圾" | PR 反馈要在那个 worktree 里修。它得留到工作落地为止。 |
| "另外那个 worktree 看着像过期的——我顺手也清了" | 只清理 `.worktrees/` 或 `worktrees/` 之下的 worktree。其余的都属于宿主环境。 |
| "合并结果的失败大概是偶发的" | 合并结果失败会让一切停下。在你排查期间,分支和 worktree 原地不动。 |
| "基础分支明显就是 main" | 确认分叉点,或者直接问。合并到错误的基础分支,代价很高。 |
| "推送被拒了——force-push 一下就好" | 推送被拒意味着远端动过了。去排查;只有在你人类伙伴明确要求时才 force-push。 |
| "删除被拒绝了 —— 加 `--force` 只是把清理做完而已" | 被拒绝恰恰说明有文件只存在于那个 worktree 里。`--force` 会不可恢复地删掉它们。先问你的人类伙伴。 |

View File

@ -0,0 +1,260 @@
---
name: mcp-builder
description: MCP 服务器构建方法论 — 系统化构建生产级 MCP 工具,让 AI 助手连接外部能力
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [mcp, development]
---
# MCP 服务器构建
系统化设计、实现、测试和部署 Model Context Protocol 服务器的方法论。
## 1. 协议核心概念
MCP 定义三种原语:
- **Tools(工具)**:AI 助手主动调用的函数,有副作用。如搜索、创建、删除操作。
- **Resources(资源)**:AI 助手只读访问的数据源,用 URI 标识。如 `users://{id}/profile`。
- **Prompts(提示词模板)**:预定义交互模板,引导用户触发工作流。
**选择原则:** 执行操作 → Tool | 读取数据 → Resource | 引导交互 → Prompt
## 2. 项目结构规范
### TypeScript
```
my-mcp-server/
├── src/
│ ├── index.ts # 入口,注册 tools/resources
│ ├── tools/ # 按功能拆分
│ ├── resources/
│ └── lib/ # 客户端封装、校验逻辑
├── tests/
├── package.json
└── tsconfig.json
```
关键依赖:`@modelcontextprotocol/sdk` + `zod`
### Python
```
my-mcp-server/
├── src/my_mcp_server/
│ ├── server.py
│ ├── tools/
│ └── lib/
├── tests/
└── pyproject.toml
```
关键依赖:`mcp` + `pydantic`
## 3. Tool 设计原则
### 命名
- `snake_case` 格式,动词开头:`search_users`、`create_issue`、`delete_file`
- 名称自解释,AI 助手靠名称选工具,模糊命名导致误调用
### 参数
- 每个参数有类型约束和 `.describe()` 描述
- 可选参数给默认值,减少 AI 决策负担
- 用枚举代替布尔开关
```typescript
server.tool("search_issues", {
query: z.string().describe("搜索关键词"),
status: z.enum(["open", "closed", "all"]).default("open").describe("状态筛选"),
limit: z.number().min(1).max(100).default(20).describe("返回上限"),
}, async ({ query, status, limit }) => { /* ... */ });
```
### 描述
说明**用途 + 返回内容 + 限制**,这是 AI 选择工具的关键依据:
```typescript
server.tool("search_users",
"根据姓名或邮箱搜索用户。返回 ID、姓名、邮箱列表。模糊匹配,最多 50 条。",
schema, handler);
```
### 输出
- 结构化数据 → JSON,人类可读内容 → Markdown
- 始终用 `content: [{ type: "text", text: "..." }]` 格式返回
## 4. 输入验证和错误处理
用 Zod/Pydantic 做 Schema 级校验,业务级校验放 handler 开头:
```typescript
server.tool("get_user", { id: z.string() }, async ({ id }) => {
try {
const user = await db.getUser(id);
if (!user) {
return {
content: [{ type: "text", text: `用户 ${id} 不存在,请检查 ID。` }],
isError: true,
};
}
return { content: [{ type: "text", text: JSON.stringify(user, null, 2) }] };
} catch (err) {
return {
content: [{ type: "text", text: `查询失败:${err.message}` }],
isError: true,
};
}
});
```
**错误处理四原则:**
1. 永远不让服务器崩溃 — try/catch 包裹所有外部调用
2. 返回可操作的错误信息 — 告诉 AI 问题是什么、能做什么
3. 使用 `isError: true` — 让 AI 知道调用失败
4. 区分错误类型 — 参数错误、权限不足、资源不存在、服务不可用
## 5. 资源管理和生命周期
```typescript
// 资源注册
server.resource("user-profile", "users://{userId}/profile", async (uri) => {
const profile = await db.getProfile(extractId(uri));
return { contents: [{ uri: uri.href, mimeType: "application/json", text: JSON.stringify(profile) }] };
});
// 生命周期:先初始化 → 再 connect → 监听关闭信号
const db = await Database.connect(config.dbUrl);
await server.connect(new StdioServerTransport());
process.on("SIGINT", async () => { await db.disconnect(); await server.close(); process.exit(0); });
```
关键点:使用连接池、所有外部调用设超时、优雅关闭清理资源。
## 6. 测试策略
### 单元测试 — 业务逻辑与 MCP 注册分离
```typescript
// tools/search.ts 导出纯函数
export async function searchUsers(query: string, limit: number) { /* ... */ }
// search.test.ts 独立测试
test("返回匹配结果", async () => {
const results = await searchUsers("alice", 10);
expect(results[0].name).toContain("Alice");
});
```
### 集成测试 — 用 SDK Client 做端到端验证
```typescript
const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair();
await server.connect(serverTransport);
const client = new Client({ name: "test", version: "1.0.0" });
await client.connect(clientTransport);
const result = await client.callTool("search_users", { query: "test" });
expect(result.isError).toBeFalsy();
```
### MCP Inspector — 交互式调试
```bash
npx @modelcontextprotocol/inspector node dist/index.js
```
在浏览器中查看所有 tools/resources,手动调用并查看结果。
**测试要点:** 每个 Tool 覆盖正常 + 异常路径、边界值、外部服务失败模拟。
## 7. 安全考虑
**权限控制:**
- 最小权限原则,读写 Tool 分离
- 危险操作要求确认参数(如 `confirm: true`)
**输入安全:**
- SQL 注入 → 参数化查询,绝不拼接
- 路径遍历 → 校验路径,禁止 `../`
- 命令注入 → 用 `execFile` 而非 `exec`
**敏感数据:**
- 密钥通过环境变量传入,不硬编码
- 日志不打印完整敏感信息
- 返回数据做脱敏处理
**沙箱:** 文件操作限制目录、网络请求限制白名单、设置资源配额。
## 8. 部署和分发
### npm 发布
```json
{ "bin": { "mcp-server-myservice": "dist/index.js" }, "files": ["dist"] }
```
用户配置:
```json
{ "mcpServers": { "myservice": { "command": "npx", "args": ["@yourorg/mcp-server-myservice"], "env": { "API_KEY": "xxx" } } } }
```
### pip 发布
```toml
[project.scripts]
mcp-server-myservice = "my_mcp_server.server:main"
```
### Docker — 适用于复杂依赖或隔离场景
```dockerfile
FROM node:20-slim
WORKDIR /app
COPY package*.json ./ && RUN npm ci --production
COPY dist ./dist
ENTRYPOINT ["node", "dist/index.js"]
```
## 9. 调试技巧
**关键:MCP 用 stdio 通信,不能用 `console.log`,会破坏协议流。**
```typescript
// 错误
console.log("debug");
// 正确
console.error("[DEBUG]", info);
// 更好
server.sendLoggingMessage({ level: "info", data: "处理中" });
```
**常见问题:**
| 症状 | 原因 | 解决 |
|------|------|------|
| 启动无响应 | transport 未连接 | 检查 `server.connect()` |
| Tool 不出现 | 注册在 connect 之后 | 先注册再 connect |
| AI 不调用 Tool | 描述不清晰 | 改善名称和描述 |
| 参数总错 | Schema 不明确 | 添加 `.describe()` |
| 调用超时 | 外部服务慢 | 加超时和缓存 |
**调试流程:** Inspector 验证基本功能 → 手动调用确认输入输出 → 连接真实 AI 客户端观察调用模式 → 根据实际行为调整设计。
## 10. 构建检查清单
### 设计
- [ ] 明确 Tools vs Resources vs Prompts 分工
- [ ] Tool 命名 `动词_名词`,描述说明用途和返回内容
- [ ] 参数简洁,可选参数有合理默认值
### 实现
- [ ] 输入用 Zod/Pydantic 校验
- [ ] 外部调用有 try/catch 和超时
- [ ] 错误返回 `isError: true` 并附可操作信息
- [ ] 不用 `console.log`(用 stderr 或 SDK 日志)
- [ ] 敏感数据走环境变量
### 测试
- [ ] 核心逻辑有单元测试
- [ ] 有集成测试验证 MCP 协议交互
- [ ] 用 MCP Inspector 手动验证过
- [ ] 用真实 AI 客户端测试过
### 部署
- [ ] README 含安装和配置说明
- [ ] 提供客户端配置 JSON 示例
- [ ] 遵循 semver,无硬编码密钥

View File

@ -0,0 +1,211 @@
---
name: receiving-code-review
description: 收到代码审查反馈后、实施建议之前使用,尤其当反馈不明确或技术上有疑问时——需要技术严谨性和验证,而非敷衍附和或盲目执行
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [code-review]
---
# 接收代码审查
## 概述
代码审查需要的是技术评估,不是情绪表演。
**核心原则:** 先验证再实施。先提问再假设。技术正确性优先于社交舒适度。
## 响应模式
```
收到代码审查反馈时:
1. 阅读:完整阅读反馈,不急于反应
2. 理解:用自己的话复述需求(或提问)
3. 验证:对照代码库的实际情况检查
4. 评估:对这个代码库来说技术上合理吗?
5. 回应:技术性确认或有理有据的反驳
6. 实施:一次一项,逐个测试
```
## 禁止的回应
**绝不要说:**
- "你说得太对了!"(明确违反 CLAUDE.md 规定)
- "好观点!"/"反馈很棒!"(敷衍表演)
- "让我立刻实施"(在验证之前)
**应该这样做:**
- 复述技术需求
- 提出澄清性问题
- 如果审查意见有误,用技术理由反驳
- 直接动手做(行动胜于言辞)
## 处理不明确的反馈
```
如果有任何一项不明确:
停下来——先不要实施任何内容
就不明确的项目提出澄清
为什么:各项之间可能有关联。部分理解 = 错误实施。
```
**示例:**
```
搭档:"修复第 1-6 项"
你理解 1、2、3、6。对 4、5 不确定。
❌ 错误做法:先实施 1、2、3、6,稍后再问 4、5
✅ 正确做法:"第 1、2、3、6 项我理解了。第 4 和第 5 项需要澄清后再动手。"
```
## 按来源区别处理
### 来自搭档的反馈
- **可信赖** —— 理解后直接实施
- **仍然要问** 如果范围不明确
- **不要敷衍附和**
- **直接行动** 或给出技术性确认
### 来自外部审查者的反馈
```
实施之前:
1. 检查:对这个代码库来说技术上正确吗?
2. 检查:是否会破坏现有功能?
3. 检查:当前实现这样写是否有原因?
4. 检查:在所有平台/版本上都适用吗?
5. 检查:审查者了解完整上下文吗?
如果建议似乎有误:
用技术理由反驳
如果无法轻易验证:
说明情况:"没有 [X] 我无法验证这一点。我应该 [调查/提问/先做]?"
如果与搭档之前的决策冲突:
先停下来和搭档讨论
```
**搭档的原则:** "对外部反馈要持怀疑态度,但要仔细核实"
## YAGNI 检查——针对"专业化"功能建议
```
如果审查者建议"正规地实现":
在代码库中 grep 实际使用情况
如果没人用:"这个接口没有被调用。删掉它(YAGNI)?"
如果有人用:那就正规实现
```
**搭档的原则:** "你和审查者都对我负责。如果我们不需要这个功能,就不要加。"
## 实施顺序
```
对于包含多项的反馈:
1. 先澄清所有不明确的项
2. 然后按以下顺序实施:
- 阻塞性问题(崩溃、安全)
- 简单修复(拼写、导入)
- 复杂修复(重构、逻辑)
3. 逐个测试每项修复
4. 验证没有回归
```
## 何时反驳
在以下情况反驳:
- 建议会破坏现有功能
- 审查者缺少完整上下文
- 违反 YAGNI(功能没人用)
- 对当前技术栈来说技术上不正确
- 存在遗留/兼容性原因
- 与搭档的架构决策冲突
**如何反驳:**
- 用技术理由,不要带防御情绪
- 提出具体问题
- 引用可正常工作的测试/代码
- 如果涉及架构问题,让搭档参与
**如果觉得不方便当众反驳,暗号是:** "Strange things are afoot at the Circle K"
## 确认正确的反馈
当反馈确实正确时:
```
✅ "已修复。[简要说明改了什么]"
✅ "发现得好——[具体问题]。已在 [位置] 修复。"
✅ [直接修复并在代码中体现]
❌ "你说得太对了!"
❌ "好观点!"
❌ "感谢你发现了这个!"
❌ "感谢你 [任何内容]"
❌ 任何感谢的表达
```
**为什么不用感谢:** 行动说明一切。直接修复。代码本身就能表明你收到了反馈。
**如果你发现自己要写"感谢":** 删掉它。直接说明修复内容。
## 优雅地纠正自己的反驳
如果你反驳了但事后发现自己错了:
```
✅ "你是对的——我检查了 [X],确实 [Y]。正在实施。"
✅ "验证后确认你是对的。我最初的理解有误,因为 [原因]。正在修复。"
❌ 长篇道歉
❌ 为自己的反驳辩护
❌ 过度解释
```
如实陈述纠正,然后继续。
## 常见错误
| 错误 | 修正 |
|------|------|
| 敷衍附和 | 复述需求或直接行动 |
| 盲目实施 | 先对照代码库验证 |
| 批量实施不测试 | 一次一项,逐个测试 |
| 假设审查者一定对 | 检查是否会破坏现有功能 |
| 回避反驳 | 技术正确性 > 社交舒适度 |
| 部分理解就开始实施 | 先澄清所有项 |
| 无法验证却继续推进 | 说明限制,请求指导 |
## 真实案例
**敷衍附和(反面例子):**
```
审查者:"删除遗留代码"
❌ "你说得太对了!让我删掉它……"
```
**技术验证(正面例子):**
```
审查者:"删除遗留代码"
✅ "查了一下……构建目标是 10.15+,这个 API 需要 13+。向后兼容需要保留遗留代码。当前实现有错误的 bundle ID——修复它还是放弃 pre-13 支持?"
```
**YAGNI(正面例子):**
```
审查者:"实现完善的指标追踪,包括数据库、日期过滤、CSV 导出"
✅ "在代码库中 grep 了一下——没有任何地方调用这个接口。删掉它(YAGNI)?还是有我遗漏的调用?"
```
**不明确的项(正面例子):**
```
搭档:"修复第 1-6 项"
你理解 1、2、3、6。对 4、5 不确定。
✅ "第 1、2、3、6 项我理解了。第 4 和第 5 项需要澄清后再动手。"
```
## GitHub 评论回复
在 GitHub 上回复行内审查评论时,在评论线程中回复(`gh api repos/{owner}/{repo}/pulls/{pr}/comments/{id}/replies`),不要发顶层 PR 评论。

View File

@ -0,0 +1,100 @@
---
name: requesting-code-review
description: 完成任务、实现重要功能或合并前使用,用于验证工作成果是否符合要求
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [code-review]
---
# 请求代码审查
派遣代码审查子代理,在问题扩散之前发现它们。审查者获得的是精心组织的评估上下文——绝不是你的会话历史。
**核心原则:** 早审查,勤审查。
## 何时请求审查
**必须审查:**
- 子代理驱动开发中每个任务完成后
- 完成重要功能后
- 合并到 main 之前
**可选但有价值:**
- 卡住时(换个视角)
- 重构之前(建立基线)
- 修复复杂 bug 之后
## 如何请求
**1. 获取 git SHA:**
```bash
BASE_SHA=$(git rev-parse HEAD~1) # 或 origin/main
HEAD_SHA=$(git rev-parse HEAD)
```
**2. 派遣代码审查子代理:**
使用 Task 工具,指定 `general-purpose` 类型,填写 `code-reviewer.md` 中的模板
**占位符说明:**
- `{DESCRIPTION}` - 你刚完成的内容简要说明
- `{PLAN_OR_REQUIREMENTS}` - 预期功能
- `{BASE_SHA}` - 起始提交
- `{HEAD_SHA}` - 结束提交
**3. 处理反馈:**
- Critical 问题立即修复
- Important 问题在继续之前修复
- Minor 问题记录下来稍后处理
- 如果审查者有误,用技术理由反驳
## 示例
```
[刚完成任务 2:添加验证功能]
你:让我在继续之前请求代码审查。
BASE_SHA=$(git log --oneline | grep "Task 1" | head -1 | awk '{print $1}')
HEAD_SHA=$(git rev-parse HEAD)
[派遣代码审查子代理]
DESCRIPTION: 添加了 verifyIndex() 和 repairIndex(),支持 4 种问题类型
PLAN_OR_REQUIREMENTS: docs/superpowers/plans/deployment-plan.md 中的任务 2
BASE_SHA: a7981ec
HEAD_SHA: 3df7661
[子代理返回]:
优点:架构清晰,测试真实
问题:
Important:缺少进度指示器
Minor:报告间隔使用了魔法数字 (100)
评估:可以继续
你:[修复进度指示器]
[继续任务 3]
```
## 常见的合理化借口
| 借口 | 现实 |
|------|------|
| "我自己看一下 diff 就行了,不用专门派审查者" | 你是协调者——在自己的会话里读 diff 会烧掉你继续推进工作所需的上下文窗口。派一个审查子智能体:diff 和评估过程都待在它的上下文里,只有结论回到你这里。 |
| "审查者需要我的全部会话历史才能理解这次改动" | 给它精心组织的上下文,绝不给会话历史。这样审查者才会盯着工作成果,而不是你的思考过程。 |
## 红线
**绝不要:**
- 因为"很简单"就跳过审查
- 忽略 Critical 问题
- 带着未修复的 Important 问题继续推进
- 对合理的技术反馈进行争辩
**如果审查者有误:**
- 用技术理由反驳
- 展示证明其可行的代码/测试
- 要求澄清
参见模板:requesting-code-review/code-reviewer.md

View File

@ -0,0 +1,174 @@
# 代码审查员提示模板
派遣代码审查员子代理时使用此模板。
**用途:** 在工作成果扩散到更多工作之前,对照需求和代码质量标准做一次审查。
```
Task tool(general-purpose):
description: "审查代码改动"
prompt: |
你是一名资深代码审查员,精通软件架构、设计模式与最佳实践。
你的工作是对照计划或需求审查已完成的工作,在问题扩散之前发现它们。
## 实现内容
{DESCRIPTION}
## 需求 / 计划
{PLAN_OR_REQUIREMENTS}
## 待审查的 Git 范围
**Base:** {BASE_SHA}
**Head:** {HEAD_SHA}
```bash
git diff --stat {BASE_SHA}..{HEAD_SHA}
git diff {BASE_SHA}..{HEAD_SHA}
```
## 只读审查
你的审查在这个检出上是**只读**的。不要以任何方式改动工作区、索引、HEAD 或分支状态。用 `git show`、`git diff`、`git log` 这类命令查看历史。如果你需要某个其他版本的工作副本,把它检出到一个独立的临时目录(例如 `git worktree add /tmp/review-[SHA] [SHA]`)—— 绝不要移动这个检出上的 HEAD。
## 你不派发子代理
这次审查全部由你自己做完。绝不为了审查 diff 的一部分而派生子代理,也绝不为了「再要一个意见」而派生另一个审查者。这套流程已经给了这份工作应有的每一个审查席位;你派生出来的审查者只是按全价重复其中一个,而它的结论不作数。如果 diff 大到一遍看不完,就自己分几遍看,并在报告里说明。
## 检查内容
**计划对齐:**
- 实现是否匹配计划 / 需求?
- 偏差是有道理的改进,还是有问题的偏离?
- 计划中的所有功能都到位了吗?
**代码质量:**
- 关注点分离清晰吗?
- 错误处理到位吗?
- 该有类型安全的地方有吗?
- DRY 但没有过早抽象?
- 边界情况处理了吗?
**架构:**
- 设计决策合理吗?
- 可扩展性和性能合理吗?
- 有没有安全隐患?
- 与周围代码集成是否干净?
**测试:**
- 测试验证的是真实行为,不是 mock?
- 边界情况覆盖了吗?
- 该有集成测试的地方有吗?
- 所有测试都通过吗?
**生产就绪:**
- 如果改了 schema,有迁移策略吗?
- 考虑了向后兼容吗?
- 文档完整吗?
- 没有明显 bug?
## 校准标准
按实际严重程度分类。不是所有问题都是 Critical。
在列出问题之前先认可做得好的地方——准确的肯定能让实现者
更愿意接受后续的反馈。
如果发现与计划有重大偏差,明确标出,让实现者确认这个偏差
是不是有意为之。如果问题出在计划本身而不是实现,也要说清楚。
## 输出格式
### 优点
[哪些地方做得好?具体一点。]
### 问题
#### Critical(必须修复)
[bug、安全问题、数据丢失风险、功能损坏]
#### Important(应该修复)
[架构问题、缺失功能、错误处理不到位、测试漏洞]
#### Minor(锦上添花)
[代码风格、优化机会、文档润色]
每个问题包含:
- File:line 引用
- 哪里有问题
- 为什么重要
- 怎么修(如果不明显)
### 建议
[关于代码质量、架构或流程的改进建议]
### 评估
**可以合并吗?** [是 | 否 | 修完再合]
**理由:** [1-2 句技术评估]
## 关键规则
**要做:**
- 按实际严重程度分类
- 具体(file:line,别含糊)
- 解释为什么这个问题重要
- 认可优点
- 给出明确判断
**不要:**
- 没检查就说"看起来 OK"
- 把小事标成 Critical
- 对没真看过的代码给反馈
- 含糊其辞("改进错误处理")
- 回避给出明确判断
```
**占位符说明:**
- `{DESCRIPTION}` —— 已构建内容的简要说明
- `{PLAN_OR_REQUIREMENTS}` —— 预期功能(计划文件路径、任务文本或需求)
- `{BASE_SHA}` —— 起始 commit
- `{HEAD_SHA}` —— 结束 commit
**审查员返回:** 优点、问题(Critical / Important / Minor)、建议、评估
## 输出示例
```
### 优点
- 数据库 schema 干净,迁移规范(db.ts:15-42)
- 测试覆盖全面(18 个测试,所有边界情况都覆盖)
- 错误处理有 fallback,做得很好(summarizer.ts:85-92)
### 问题
#### Important
1. **CLI wrapper 缺少帮助文本**
- File: index-conversations:1-31
- 问题:没有 --help flag,用户不会发现 --concurrency
- 修复:加 --help case 含使用示例
2. **缺少日期校验**
- File: search.ts:25-27
- 问题:无效日期会静默返回空结果
- 修复:校验 ISO 格式,抛错并附示例
#### Minor
1. **进度指示**
- File: indexer.ts:130
- 问题:长操作没有 "X of Y" 计数
- 影响:用户不知道要等多久
### 建议
- 加进度上报改善用户体验
- 考虑用配置文件管理排除项目(提升可移植性)
### 评估
**可以合并吗:修完再合**
**理由:** 核心实现扎实,架构和测试都很好。Important 问题(帮助文本、
日期校验)很容易修,且不影响核心功能。
```

View File

@ -0,0 +1,355 @@
---
name: subagent-driven-development
description: 当在当前会话中执行包含独立任务的实现计划时使用
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [agents, development]
---
# 子智能体驱动开发
通过为每个任务分派一个全新的实现子智能体来执行计划:每个任务完成后做一次任务审查(规格合规性 + 代码质量),全部任务结束后再做一次覆盖整个分支的宽范围审查。
**为什么用子智能体:** 你把任务委派给具有隔离上下文的专用智能体。通过精心设计它们的指令和上下文,确保它们专注并成功完成任务。它们绝不应继承你会话的上下文或历史记录——你要精确构造它们所需的一切。这样也能为你自己保留用于协调工作的上下文。
**核心原则:** 每个任务一个全新子智能体 + 任务审查(规格 + 质量)+ 结尾宽范围审查 = 高质量、快速迭代
**旁白:** 工具调用之间最多说一句简短的旁白——进度账本和工具结果本身就是记录。
**持续执行:** 不要在任务之间停下来向你的人类伙伴确认。不间断地执行计划里的所有任务。唯一该停下的理由是:你无法解决的 BLOCKED 状态、确实妨碍推进的歧义,或所有任务已完成。"我该继续吗?"之类的询问和进度小结都在浪费他们的时间——他们让你执行计划,那就执行。
**做裁决,不要停摆。** 一个正在跑的计划不等人。冲突、歧义、计划缺陷、你本来想申请突破的上限——你自己定。规格是有约束力的权威,计划是它的论证,两者都答不上来的部分由你的判断来定。每个决定都以 `Ruling: <你决定了什么> — <为什么> — <如果错了代价是什么>` 记进账本,然后继续。一个错误的裁决,代价是你人类伙伴看得见、也撤得掉的返工;一个停在问题上的会话,代价是他们的一整天,而且什么也换不来。
只有四件事会让你停下,也只有这四件:不可逆或破坏性的操作;涉及安全的动作;这个工作树之外、按惯例应当先问一声的副作用(合并、推送到共享分支、发布);以及一个坏到每条前进路径都只能靠猜的计划。遇到这四类,停下来问。
## 何时使用
```dot
digraph when_to_use {
"有实现计划?" [shape=diamond];
"任务基本独立?" [shape=diamond];
"留在当前会话?" [shape=diamond];
"subagent-driven-development" [shape=box];
"executing-plans" [shape=box];
"手动执行或先头脑风暴" [shape=box];
"有实现计划?" -> "任务基本独立?" [label="是"];
"有实现计划?" -> "手动执行或先头脑风暴" [label="否"];
"任务基本独立?" -> "留在当前会话?" [label="是"];
"任务基本独立?" -> "手动执行或先头脑风暴" [label="否 - 紧密耦合"];
"留在当前会话?" -> "subagent-driven-development" [label="是"];
"留在当前会话?" -> "executing-plans" [label="否 - 并行会话"];
}
```
**与 Executing Plans(并行会话)的对比:**
- 同一会话(无上下文切换)
- 每个任务全新子智能体(无上下文污染)
- 每个任务后做审查(规格合规性 + 代码质量),结尾做宽范围审查
- 更快的迭代(任务间无需人工介入)
## 流程
```dot
digraph process {
rankdir=TB;
subgraph cluster_per_task {
label="每个任务";
"分派实现子智能体 (./implementer-prompt.md)" [shape=box];
"实现者有疑问?" [shape=diamond];
"回答问题,提供上下文" [shape=box];
"实现者实现、测试、提交、自审" [shape=box];
"生成审查包,分派任务审查者 (./task-reviewer-prompt.md)" [shape=box];
"规格 ✅ 且质量通过?" [shape=diamond];
"发现与计划原文冲突?" [shape=diamond];
"对冲突作出裁决, 把裁决记进账本" [shape=box];
"第 R/5 轮修复: R≤3 唤回原实现者; R≥4 换全新实现者 + 更强模型" [shape=box];
"分派定向复审 (./re-review-prompt.md)" [shape=box];
"所有发现都已解决?" [shape=diamond];
"R = 5?" [shape=diamond];
"逐条裁定未解决的发现" [shape=box];
"存在承重的发现?" [shape=diamond];
"裁决并继续; 只有每条路都靠猜时才停" [shape=box];
"把发现连同裁定搁置进账本" [shape=box];
"往账本追加完成行,标记待办完成" [shape=box];
}
"准备: 工作树、查账本、读计划、起飞前审查" [shape=box];
"还有任务?" [shape=diamond];
"分派最终代码审查者 (../requesting-code-review/code-reviewer.md)" [shape=box];
"最终审查有发现? 一次修复分派、一次定向复审、裁定残留项" [shape=box];
"最终审查干净: 删除本计划的工作区" [shape=box];
"使用 finishing-a-development-branch" [shape=box style=filled fillcolor=lightgreen];
"准备: 工作树、查账本、读计划、起飞前审查" -> "分派实现子智能体 (./implementer-prompt.md)";
"分派实现子智能体 (./implementer-prompt.md)" -> "实现者有疑问?";
"实现者有疑问?" -> "回答问题,提供上下文" [label="是"];
"回答问题,提供上下文" -> "实现者实现、测试、提交、自审";
"实现者有疑问?" -> "实现者实现、测试、提交、自审" [label="否"];
"实现者实现、测试、提交、自审" -> "生成审查包,分派任务审查者 (./task-reviewer-prompt.md)";
"生成审查包,分派任务审查者 (./task-reviewer-prompt.md)" -> "规格 ✅ 且质量通过?";
"规格 ✅ 且质量通过?" -> "往账本追加完成行,标记待办完成" [label="是"];
"规格 ✅ 且质量通过?" -> "发现与计划原文冲突?" [label="否"];
"发现与计划原文冲突?" -> "对冲突作出裁决, 把裁决记进账本" [label="是"];
"对冲突作出裁决, 把裁决记进账本" -> "第 R/5 轮修复: R≤3 唤回原实现者; R≥4 换全新实现者 + 更强模型";
"发现与计划原文冲突?" -> "第 R/5 轮修复: R≤3 唤回原实现者; R≥4 换全新实现者 + 更强模型" [label="否"];
"第 R/5 轮修复: R≤3 唤回原实现者; R≥4 换全新实现者 + 更强模型" -> "分派定向复审 (./re-review-prompt.md)";
"分派定向复审 (./re-review-prompt.md)" -> "所有发现都已解决?";
"所有发现都已解决?" -> "往账本追加完成行,标记待办完成" [label="是"];
"所有发现都已解决?" -> "R = 5?" [label="否"];
"R = 5?" -> "第 R/5 轮修复: R≤3 唤回原实现者; R≥4 换全新实现者 + 更强模型" [label="否 - 进入下一轮"];
"R = 5?" -> "逐条裁定未解决的发现" [label="是 - 熔断触发"];
"逐条裁定未解决的发现" -> "存在承重的发现?";
"存在承重的发现?" -> "裁决并继续; 只有每条路都靠猜时才停" [label="是"];
"存在承重的发现?" -> "把发现连同裁定搁置进账本" [label="否"];
"把发现连同裁定搁置进账本" -> "往账本追加完成行,标记待办完成";
"往账本追加完成行,标记待办完成" -> "还有任务?";
"还有任务?" -> "分派实现子智能体 (./implementer-prompt.md)" [label="是"];
"还有任务?" -> "分派最终代码审查者 (../requesting-code-review/code-reviewer.md)" [label="否"];
"分派最终代码审查者 (../requesting-code-review/code-reviewer.md)" -> "最终审查有发现? 一次修复分派、一次定向复审、裁定残留项";
"最终审查有发现? 一次修复分派、一次定向复审、裁定残留项" -> "最终审查干净: 删除本计划的工作区";
"最终审查干净: 删除本计划的工作区" -> "使用 finishing-a-development-branch";
}
```
## 准备
确保工作发生在一个隔离的工作区里:用 using-git-worktrees 创建一个,或者核实已有的那个。没有你人类伙伴的明确同意,绝不在 main/master 分支上开始实现。
会话记忆无法在上下文压缩(compaction)中存活。在真实会话里,丢失了位置的控制者曾重新分派整段已经完成的任务序列——这是观察到的最昂贵的失败。把进度记在一个账本文件里,而不只是记在待办里。
- **每个计划拥有自己的工作区:** 技能启动时,运行本技能的 `scripts/sdd-workspace PLAN_FILE`——它会打印这个计划专属的、被 git 忽略的目录(`<repo-root>/.superpowers/sdd/<计划文件名>/`),**本计划**的一切产物都放在那里:账本、简报、报告、审查包。别的计划的目录不属于你,不读也不写。
- 到 `<工作区>/progress.md` 查本计划的账本。如果它的第一行点名的是你的计划文件,那么带有 `Task <N>: complete` 行的任务就是**已完成**——不要重新分派它们;从第一个没有该行的任务处继续。如果某个任务的最后一行是一轮修复,说明它正卡在修复循环中:从下一轮继续。如果账本第一行点名的是**另一个**计划文件——或者你在旧的扁平路径 `.superpowers/sdd/progress.md` 发现了一个游离的账本——那是别人的进度:原地别动,另起你自己的新账本。
- 创建账本时,把它的身份写在第一行:`# SDD ledger — plan: <计划文件路径>`。
- 这个账本是你的恢复地图:它点名的那些提交,即使你的上下文已经不记得创建过它们,也确实存在于 git 中。压缩之后,相信账本和 `git log`,而不是你自己的记忆。
- `git clean -fdx` 会毁掉这个工作区(它是被 git 忽略的临时文件);万一发生了,就从 `git log` 恢复。
把计划**读一遍**,记下它的上下文和全局约束,并为每个任务建一条待办。如果计划点名了一份规格(Spec),把规格也读了:规格是计划据以论证的权威,计划内部的冲突要拿它来裁。计划里找不到可达的规格,就在账本里记一条说明——没有规格作出的裁决都是临时的。
在分派任务 1 之前,把计划通扫一遍找冲突,边查边把你查过的东西写下来:
- 互相矛盾的任务,或与计划的"全局约束"矛盾的任务
- 计划明确要求、但审查标准会判为缺陷的东西(比如一个什么都不断言的测试、一整块逻辑的逐字复制)
这次扫描的产出是一张**表**,不是一句结论。每一对共用文件或接口的任务占一行:这两个任务、一个产出的东西对上另一个消费的东西、以及你发现了什么。每个任务再占一行:它自己的文本是否自洽——它规定的测试对上它规定的代码,它创建的文件对上它后面又要碰的文件。没有这些行的"扫描是干净的",不算你真扫过。
把这张表写进账本。在执行开始之前就对你找到的每一条作出裁决——每条发现都并列上要求它的那段计划原文——并把每条裁决记进账本。如果扫描是干净的,就不要多说,直接开始。对它翻出的每个冲突作出裁决——规格是有约束力的权威,计划是它的论证——把裁决记在那一行旁边,然后分派任务 1。审查循环仍然是那些只有在实现中才浮现的冲突的兜底网。
## 模型选择
在能胜任的前提下,为每个角色选用最弱的模型,以节省成本、提升速度。
**机械性实现任务**(孤立的函数、清晰的规格、1-2 个文件):用快而便宜的模型。计划写得好时,大多数实现任务都是机械性的。
**集成与判断类任务**(跨文件协调、模式匹配、调试):用标准模型。
**架构与设计类任务**:用可用的最强模型。覆盖整个分支的最终审查就属于这一类——用可用的最强模型去分派它,不要用会话默认模型。
**审查任务**:用同样的判断来选模型,并按 diff 的体量、复杂度和风险来缩放。一个小的机械性 diff 不需要最强模型;一个微妙的并发改动需要。小修复 diff 的定向复审用便宜到中档的层级即可。
**修复循环的升级(第 4-5 轮)**:用比那个卡住了的实现者**至少高一档**的模型。
**分派子智能体时永远显式指定模型。** 省略模型会继承你会话的模型——往往是最强也最贵的那个——这会悄无声息地让本节的努力全部失效。
**轮次数比 token 单价更要紧。** 墙钟时间和上下文成本是随子智能体花掉多少轮次而增长的,而最便宜的模型在多步工作上经常要花 2-3 倍轮次——总账反而更贵。审查者、以及依据散文式描述工作的实现者,都以中档模型为下限。当任务的计划原文里已经包含了要写的完整代码时,实现就是抄写加测试:这种实现者用最便宜的层级。单文件的机械性修复也用最便宜的层级。
**任务复杂度信号(实现类任务):**
- 涉及 1-2 个文件且规格完整 → 便宜模型
- 涉及多个文件且有集成考量 → 标准模型
- 需要设计判断或对代码库的广泛理解 → 最强模型
## 任务循环
**把同形状的小活打包。** 当计划里列了好几个任务,每个都是同一类的小改动——同样的一行修复、同样的常量替换、同样的字段新增,只是散在不同文件里——不要一个任务派一个子智能体。写**一份**分派简报,把每个文件和它的改动都列上,整批交给同一个子智能体,把它的 diff 当作一个单位来审查。一个任务一次分派,留给那些需要自己的判断、自己的测试、自己的审查面的活。
你粘进分派提示词里的一切、以及子智能体打印回来的一切,都会在本次会话余下的时间里常驻你的上下文,并且在之后每一轮被重新读一遍。**产物要用文件来交接。**
**等待已分派的子智能体:** 绝不用短超时去轮询等待接口,也绝不干坐在一次沉默的、没有上限的等待里。只要你手上还有本地活可干——更新账本、打包下一次审查、读报告——就接着干;子智能体的结果会自己送到。当你真的空了,就分段等待,每段有上限(在你的平台允许的范围内,五到十分钟),两段之间发一行状态,并对账你还活着的子智能体:把它们列出来,追一下那些干完了却没报告的。分段等待几乎保留了长等待的全部效率,同时保证一个卡住或丢失的子智能体在几分钟内就被发现,而不是拖到会话最后。
### 1. 分派实现者
分派之前记录 BASE(`git rev-parse HEAD`)——审查包和各轮修复的 diff 都要用它。
- **任务简报:** 分派实现者之前,运行本技能的 `scripts/task-brief PLAN_FILE N`——它把该任务的完整文本抽取到一个唯一命名的文件并打印路径。组织你的分派,让这份简报保持为需求的唯一来源。你的分派应包含:(1) 一行说明这个任务在项目中的位置;(2) 简报路径,引入语为"先读这个——它是你的需求,里面有要逐字使用的精确取值";(3) 简报无从知晓的、来自前序任务的接口和决策;(4) 你对简报中注意到的任何歧义的裁定;(5) 报告文件路径和报告契约。精确取值(数字、魔法字符串、签名、测试用例)只出现在简报里。**绝不**让子智能体去读整个计划文件。
- **报告文件:** 实现者的报告文件按简报来命名(简报 `…/task-N-brief.md` → 报告 `…/task-N-report.md`),并写进分派提示词。实现者把完整报告写在那里,只回传状态、提交、一行测试小结和疑虑。
- 一个分派提示词描述的是**一个任务**,不是会话的历史。不要把累积的前序任务小结("任务 1-3 之后的状态")粘进后面的分派——真实会话里曾出现过 42k 字符的分派,其中 99% 是粘贴的历史。一个全新的子智能体需要的是:它的任务、它要碰的接口、以及全局约束。别无其他。
- 如果前面某个任务把一条发现搁置在本任务要碰的区域,就在分派里带上指向那条账本记录的指针。
- 分派本身携带**不派子智能体**的契约(它就写在实现者模板里):实现者绝不分派子智能体——不派帮手,更不派审查者。审查由你在报告之后送达。在真实会话里,工作者自己派出的每一个审查者,都在重复控制者本来就会分派的那次任务审查——每个任务白白多出一个完整的审查席位。
- **记下分派结果里实现者的智能体身份**——第 1-3 轮修复要唤回这个智能体。
- 绝不并行分派多个实现子智能体(会冲突)。
模板:[implementer-prompt.md](implementer-prompt.md)
### 2. 处理报告
实现子智能体会回传四种状态之一。分别处理:
**DONE:** 生成审查包(在本技能目录下运行 `scripts/review-package PLAN_FILE BASE HEAD`——它会打印出自己写入的那个唯一文件路径;BASE 是你在分派实现者之前记录下来的那个提交——**绝不用** `HEAD~1`,那会悄悄丢掉多提交任务里除最后一个之外的所有提交),然后把打印出的路径交给任务审查者去分派。
**DONE_WITH_CONCERNS:** 实现者完成了工作但提出了疑虑。继续之前先读这些疑虑。如果疑虑关乎正确性或范围,在审查之前先处理掉。如果只是观察(比如"这个文件变大了"),记下来,继续走审查。
**NEEDS_CONTEXT:** 实现者需要没被提供的信息。补上缺失的上下文并重新分派。
**BLOCKED:** 实现者无法完成任务。评估这个阻塞:
1. 如果是上下文问题,补充上下文并用同一个模型重新分派
2. 如果任务需要更多推理,用更强的模型重新分派
3. 如果任务太大,拆成更小的块
4. 如果是计划本身错了,对这个更正作出裁决,记进账本,并把裁决带进重新分派的提示词里
**绝不**忽视一次上报,也**绝不**在什么都没改的情况下强迫同一个模型重试。如果实现者说它卡住了,那就一定有东西需要改变。
如果实现者提问——不论是开始前还是任务中途——清楚完整地回答,需要时补充上下文,不要催着它进入实现。
### 3. 审查任务
逐任务审查是**任务范围内的关卡**。宽范围审查只做一次,在最终的整分支审查那里。绝不跳过任务审查,也绝不接受一份缺少任一结论的报告——规格合规性**和**任务质量两者都必须有。实现者的自审永远不能替代任务审查;两者都需要。
- **把 diff 作为文件交给审查者:** 运行本技能的 `scripts/review-package PLAN_FILE BASE HEAD`,把它打印出的文件路径交给审查者(若没有 bash:对该区间跑 `git log --oneline`、`git diff --stat`、`git diff -U10`,重定向到一个唯一命名的文件)。这些输出永远不会进入你自己的上下文,而审查者在一次 Read 调用里就能看到提交列表、stat 摘要和带上下文的完整 diff。用你在分派实现者之前记录下的 BASE——**绝不用** `HEAD~1`,那会悄悄截断多提交任务。**绝不**在没有 diff 文件的情况下分派任务审查者。
- **审查者的输入:** 任务审查者拿到三个路径——同一份简报文件、报告文件、审查包——外加约束该任务的全局约束。
- 你交给审查者的全局约束块是它的**注意力透镜**。从计划的"全局约束"一节或规格里**逐字**抄下有约束力的需求:精确的取值、精确的格式,以及组件之间被明确规定的关系("与 X 相同的布局"、"匹配 Y")。审查者的模板里已经带了流程规则(YAGNI、测试卫生、审查方法)——约束块是用来装**这个项目**的规格所要求的东西的。
- 不要在没有具体的、任务专属的理由时,加上"检查所有用法"或"有用的话跑一下竞态测试"这类开放式指令
- 不要让审查者重跑实现者已经在同一份代码上跑过的测试——实现者的报告承载着测试证据
- **不要替审查者预先给发现定性**——绝不指示审查者忽略或不要标记某个具体问题。如果你认为某条发现会是误报,让审查者提出来,然后在审查循环里裁定它。如果你正在写的提示词里出现了"不要标记"、"不要把 X 当缺陷"、"顶多按 Minor 处理"、"计划选择了"——停下:你正在预先定性,而且通常是为了让自己少走一轮审查循环。
任务审查者可能报告"⚠️ 无法从 diff 核实"的条目——那些活在未改动代码里、或者跨任务的需求。这些不阻塞审查的其余部分,但在标记任务完成之前**你必须自己逐条解决它们**:你掌握着审查者所缺的计划和跨任务上下文。如果你确认某一条是真实的缺口,就把它当作规格审查失败来处理——它和其他发现一起进入修复循环。
模板:[task-reviewer-prompt.md](task-reviewer-prompt.md)
### 4. 修复循环
当审查报告规格 ❌、任何 Critical 或 Important 发现、或者你确认为真实缺口的 ⚠️ 条目时,循环触发。
循环开始之前,有两条路会立刻离开它:
- **Minor 发现**随手记进进度账本(`Task <N>: minor (deferred): <一句话>`),并把最终的整分支审查指向那份清单,让它去甄别哪些必须在合并前修掉。**没人读的汇总等于静默丢弃。** Minor 发现永远不进入循环。
- 被标为"计划要求的"发现——或任何与计划原文所要求的内容冲突的发现——**由你来裁决**:把这条发现放到计划原文旁边掂量,以规格为有约束力的权威作出决定,并在据此行动之前把裁决记进账本。不要因为计划要求就驳回这条发现,也不要在没有一条记录在案的裁决的情况下分派一个与计划相违的修复。
其他一切都进入循环。**一轮修复 = 一次修复分派 + 一次定向复审。每个任务最多五轮。**
**第 1-3 轮——唤回原来那个实现者(resume)。** 把未解决的发现**逐字**发给它。它的上下文是完整的:它知道任务、知道代码、知道自己做过的选择。如果你的运行环境无法给一个活着的子智能体再发消息,就分派一个全新实现者,带上简报路径、报告文件路径和那些发现——无论走哪条路,报告文件都是那份持久化记忆。
**第 4-5 轮——用更强的模型分派一个全新实现者**(按"模型选择"),带上简报路径、报告文件路径、未解决的发现,以及这样的框定语:"某个此前的实现者尝试过这个任务 [N] 次;现在它归你了。读报告文件了解已经试过什么。"一个熬过三次唤回的循环,通常意味着实现者看不见自己的问题——换新眼睛加提升能力,一步到位。
**每一轮,无论走哪条路:** 实现者修复、重跑覆盖被改动代码的测试、把修复报告追加到**同一个**报告文件、回传那个简短契约。重新分派审查者之前,先确认修复报告里含有覆盖用的测试、跑过的命令、以及输出;三者齐备才分派复审。在修复消息里点名覆盖用的测试文件——一行的修复不需要整包套件。
**复审是定向的。** 运行 `scripts/review-package PLAN_FILE FIX_BASE HEAD`,其中 FIX_BASE 是上一次审查所看到的那个 head,然后用 [re-review-prompt.md](re-review-prompt.md) 分派,附上发现清单、简报、报告文件和打印出的 diff 路径。复审者对每条发现给出 ADDRESSED 或 NOT ADDRESSED 的结论,并且**只**标记修复 diff 里的新破坏。修复 diff 里新出现的 Critical/Important 破坏加入未解决发现清单。范围外的观察作为延后的 Minor 进账本——它们永远不延长循环。
**每轮结束后**往账本追加:
`Task <N>: fix round <R>/5 (<X> addressed, <Y> open — <发现的一句话概括>; commits <a7>..<b7>)`
**绝不在控制者会话里自己修发现**——你的上下文要保持干净以供协调,而且控制者的修复会跳过审查。
**熔断。** 当第 5 轮的复审仍然留下未解决的发现时,**停止分派**。你自己逐条裁定这些未解决的发现——你掌握着审查者所缺的计划和跨任务上下文:
- **审查者错了,或者这一点是可争议的:** 搁置它——`Task <N>: parked — <发现> — Ruling: <为什么代码可以维持原样>`。最终审查会看到双方说法。
- **是真实的,但下游没有任何东西建立在它之上:** 同样搁置,裁定里写明它是真的、被延后了。
- **真实且承重**——后面的任务建立在它之上,或者它揭示了一个计划缺陷:对**能解开后续工作的最小改动**作出裁决,以 `Task <N>: Ruling: <发现> — <你决定了什么,以及为什么>` 记进账本,并把它带进下一个任务的分派里。把一个结构性失败悄悄搁置掉,会让每个依赖它的任务都建立在它之上。只有当这个缺陷让每条前进路径都只能靠猜时,才停下来。
**只在触及上限时才裁定。** 为了结束循环而提早裁定,只是换了个名字的"预先定性"。每一次裁定都是一条账本记录——**静默丢弃是禁止的**。
### 5. 完成任务
当审查干净地返回——或者在触及上限时每条未解决的发现都已带着裁定被搁置——在你做其他记账的同一条消息里,往账本追加完成行:
- `Task <N>: complete (commits <base7>..<head7>, review clean)`
- 熔断触发过的话:`Task <N>: complete (commits <base7>..<head7>, <K> parked)`
然后标记待办完成,继续下一个。**绝不**在审查还有未解决的 Critical/Important 问题、而它们既没被修复也没在上限处带裁定搁置时,就进入下一个任务。
## 最终审查
覆盖整个分支的最终审查也拿到一个审查包:运行 `scripts/review-package PLAN_FILE MERGE_BASE HEAD`(MERGE_BASE = 分支起点的那个提交,例如 `git merge-base main HEAD`),把打印出的路径放进最终审查的分派里,这样最终审查者读一个文件就行,不必用 git 命令重新推导整个分支的 diff。用可用的最强模型分派(见"模型选择"),使用 requesting-code-review 的 [code-reviewer.md](../requesting-code-review/code-reviewer.md)。把它指向账本里那些"延后的 Minor"和"已搁置"的行,让它甄别哪些必须在合并前修掉。
如果覆盖整个分支的最终审查返回了发现,用**一个**修复子智能体带着**完整的**发现清单去分派——不要一条发现一个修复者。逐条发现各派一个修复者,每个都要重建上下文、重跑测试套件;真实会话里,一次最终审查的修复浪潮花掉的成本超过它全部任务的总和。然后对这波修复跑**恰好一次**定向复审(对修复区间跑 `scripts/review-package PLAN_FILE FIX_BASE HEAD`,用 [re-review-prompt.md](re-review-prompt.md))。残留的发现按任务循环里熔断那套来裁定:带裁定搁置,或者对承重项作出裁决并把你的决定记进账本。只有上面那四类才会在这里让你停下。**没有第二波修复**——残留的承重发现会在 finishing-a-development-branch 呈现选项时浮到你人类伙伴面前。
## 收尾
在你删除任何东西之前,把账本里每一条含 `Ruling:` 的记录都收集起来——预检裁决、搁置的发现、熔断裁定,全部——按你作出它们的顺序,放进你最终消息的「我作出的裁决」一节里,每条都附上如果错了代价是什么。这份清单是穷尽的:账本里有的裁决,清单里就要有。这份清单是你代你的人类伙伴作出的那些决定唯一能抵达他们的地方——他们读它,并返工你搞错的部分。一条随工作区一起消失的裁决,就是一个在暗中作出的决定。
当覆盖整个分支的最终审查干净、且它的修复已合并时,删除**本计划**的工作区(`rm -rf <工作区>`)——现在 git 历史就是记录了。同级目录属于别的计划,别去动它们。
使用 finishing-a-development-branch。
## 常见的合理化借口
| 借口 | 现实 |
|------|------|
| "规格合规性上差不多就行了" | 审查者发现了规格差距 = 未完成。修掉,或者走到上限去裁定——只有这两个出口。 |
| "我自己修就好了,分派是额外开销" | 控制者的修复会污染你的上下文并跳过审查。唤回实现者。 |
| "再来一轮就收敛了" | 过了上限,轮次不会收敛——那个失败是结构性的。裁定并分流。 |
| "反正审查者总会再挑出新东西" | 定向复审只核实修复,它不能到处乱逛。未改动代码上的新发现进账本,不进循环。 |
| "这条发现明显错了,我直接丢掉" | 你只在上限处裁定,而且每条裁定都是账本记录。静默丢弃是禁止的。 |
| "修复很小,跳过复审吧" | 未经审查的修复正是回归产生的方式。每一轮都以一次定向复审结束。 |
| "审查把循环拖慢了" | 没有审查的循环只是未经核实的空转。审查是这个循环的刹车和方向盘。 |
| "记账本是额外开销" | 账本是能在压缩中存活下来的东西。没有账本的控制者曾重新分派整段已完成的任务序列。 |
| "实现者自己派了个审查者——白送的额外保障" | 那是一个重复的席位,按全价审查同一份 diff,而且它的裁定不算数。审查由控制者分派。 |
## 示例工作流
```
你:我正在用子智能体驱动开发来执行这个计划。
[准备:工作树已核实]
[把计划文件读一遍:docs/superpowers/plans/feature-plan.md]
[解析工作区:scripts/sdd-workspace docs/superpowers/plans/feature-plan.md —— 里面没有账本,全新开始]
[为所有任务创建待办]
任务 1:Hook 安装脚本
[对任务 1 运行 task-brief;分派实现者,附带简报 + 报告路径 + 上下文]
实现者:"开始之前——这个 hook 应该装在用户级还是系统级?"
你:"用户级(~/.config/superpowers/hooks/)"
实现者:[稍后]
- 实现了 install-hook 命令
- 加了测试,5/5 通过
- 自审:发现漏了 --force 标志,已补上
- 已提交
[运行 review-package PLAN_FILE BASE HEAD;把打印出的路径交给任务审查者去分派]
任务审查者:规格 ✅ —— 所有需求都满足,没有多余的东西。
优点:测试覆盖良好,代码整洁。问题:无。任务质量:通过。
[账本:Task 1: complete (commits a1b2c3d..d4e5f6a, review clean)]
任务 2:恢复模式
[对任务 2 运行 task-brief;分派实现者,附带简报 + 报告路径 + 上下文]
实现者:[无疑问]
- 加了 verify/repair 模式
- 8/8 测试通过
- 已提交
[运行 review-package PLAN_FILE BASE HEAD;把打印出的路径交给任务审查者去分派]
任务审查者:规格 ❌:
- 缺失:进度上报(规格说"每 100 项上报一次")
问题(Important):魔法数字(100)
[第 1 轮修复:唤回原实现者,带上这两条发现]
实现者:加了进度上报,把 PROGRESS_INTERVAL 提成了常量。
重跑了 test/recovery.test.js —— 10/10 通过。修复报告已追加。
[运行 review-package PLAN_FILE FIX_BASE HEAD;分派定向复审]
复审者:缺失进度上报 —— ADDRESSED(src/recovery.js:41)。
魔法数字 —— ADDRESSED(src/recovery.js:7)。新破坏:无。
结论:所有发现均已解决。
[账本:Task 2: fix round 1/5 (2 addressed, 0 open; commits d4e5f6a..b7c8d9e)]
[账本:Task 2: complete (commits d4e5f6a..b7c8d9e, review clean)]
...
[所有任务之后]
[运行 review-package PLAN_FILE MERGE_BASE HEAD;分派最终代码审查者,用最强模型]
最终审查者:所有需求都满足。延后的 Minor 已甄别:没有阻塞合并的。
[删除本计划的工作区 —— 现在记录活在 git 里]
搞定!使用 finishing-a-development-branch。
```

View File

@ -0,0 +1,144 @@
# 实现子智能体提示词模板
分派实现子智能体时使用此模板。
```
Subagent (general-purpose):
description: "实现任务 N:[任务名称]"
model: [模型 —— 必填:按 SKILL.md 的"模型选择"来选;省略模型会默默
继承会话里最贵的那个]
prompt: |
你正在实现任务 N:[任务名称]
## 任务描述
先读你的任务简报:[BRIEF_FILE]
它包含计划中该任务的完整文本。
## 上下文
[场景铺设:这个任务在哪个环节、依赖关系、架构上下文]
## 开始之前
如果你对以下内容有疑问:
- 需求或验收标准
- 方案或实现策略
- 依赖或假设
- 任务描述中任何不清楚的地方
**现在就问。** 在开始工作之前提出任何疑虑。
## 你的工作
当你确认需求清晰后:
1. 严格按照任务指定的内容实现
2. 编写测试(如果任务要求则遵循 TDD)
3. 验证实现是否正常工作
4. 提交你的工作
5. 自审(见下文)
6. 汇报
工作目录:[directory]
**工作过程中:** 如果遇到意料之外或不清楚的情况,**提问**。
随时可以暂停并澄清。不要猜测或做假设。
迭代过程中,只跑你正在改动的那部分的聚焦测试;在提交前跑一次
完整测试套件,而不是每次编辑后都跑。
## 你不派发子代理
这个任务的全部工作由你自己做完。绝不为了实现任务的一部分而派生子代理,尤其绝不派生一个审查者来检查你自己的工作。下面说的「自审」指的是读你自己的 diff。审查是控制者的职责:你汇报之后,它会针对你的 diff 派发一个全新的审查者。你派生出来的审查者只是按全价重复那次审查,而它的批准在流程里不作数。如果你发现自己在想「独立审一遍会让我的报告更有说服力」—— 那次审查已经排好队了。去汇报就行。
## 代码组织
你在能一次性放入上下文的代码上推理效果最好,文件聚焦时你的编辑也更可靠。
请牢记:
- 遵循计划中定义的文件结构
- 每个文件应有单一明确的职责和定义清晰的接口
- 如果你正在创建的文件超出了计划的意图规模,停下来并以
DONE_WITH_CONCERNS 状态报告——不要在没有计划指导的情况下自行拆分文件
- 如果你正在修改的现有文件已经很大或很混乱,小心操作,
并在报告中将其标注为疑虑
- 在已有代码库中,遵循已建立的模式。像一个好的开发者那样
改善你接触到的代码,但不要重构你任务范围之外的东西。
## 当你力不从心时
随时可以停下来说"这对我来说太难了"。劣质的工作比不做更糟。
上报不会受到惩罚。
**遇到以下情况时停下来上报:**
- 任务需要在多个有效方案之间做架构决策
- 你需要理解提供内容之外的代码但找不到清晰答案
- 你对自己的方案是否正确感到不确定
- 任务涉及计划未预期的现有代码重构
- 你一直在逐个读文件试图理解系统但没有进展
**如何上报:** 以 BLOCKED 或 NEEDS_CONTEXT 状态汇报。具体描述
你卡在哪里、尝试了什么、需要什么样的帮助。
控制者可以提供更多上下文、用更强的模型重新分派,
或将任务拆分为更小的部分。
## 汇报前:自审
用全新的视角审查你的工作。问自己:
**完整性:**
- 我是否完全实现了规格中的所有内容?
- 我是否遗漏了任何需求?
- 是否有我没处理的边界情况?
**质量:**
- 这是我最好的工作吗?
- 命名是否清晰准确(匹配事物做什么,而非怎么做)?
- 代码是否整洁且可维护?
**纪律:**
- 我是否避免了过度构建(YAGNI)?
- 我是否只构建了被要求的内容?
- 我是否遵循了代码库中的已有模式?
**测试:**
- 测试是否真正验证了行为(而非只是 mock 行为)?
- 如果要求了 TDD,我是否遵循了?
- 测试是否全面?
- 测试输出是否干净(没有零散的告警或噪声)?
如果在自审中发现问题,在汇报前就修复。
## 审查发现之后
如果任务审查发现了问题,你会被带着那些发现重新唤起(resume)。
修复它们,重跑覆盖被改动代码的测试,然后往你的报告文件里追加一份
修复报告:你改了什么、你跑了哪些覆盖用的测试、命令是什么、输出是什么。
审查者不会替你重跑测试——你的报告就是测试证据。然后用与第一份报告
相同的那个简短状态契约回复。
## 报告格式
把你的完整报告写到 [REPORT_FILE]:
- 你实现了什么(如果被阻塞,则是你尝试了什么)
- 你测试了什么以及测试结果
- **TDD 证据**(如果本任务要求了 TDD):
- RED:跑的命令、实现前相关的失败输出、以及为什么这个失败是预期的
- GREEN:跑的命令、以及实现后相关的通过输出
- 修改了哪些文件
- 自审发现(如果有)
- 任何问题或疑虑
然后只汇报以下内容(不超过 15 行——细节都在报告文件里):
- **状态:** DONE | DONE_WITH_CONCERNS | BLOCKED | NEEDS_CONTEXT
- 创建的提交(短 SHA + 标题)
- 一行测试小结(例如"14/14 通过,输出干净")
- 你的疑虑,如果有
- 报告文件路径
如果是 BLOCKED 或 NEEDS_CONTEXT,把具体细节放进最终消息本身——
控制者会直接据此行动。
如果你完成了工作但对正确性有疑虑,使用 DONE_WITH_CONCERNS。
如果你无法完成任务,使用 BLOCKED。如果你需要未提供的信息,
使用 NEEDS_CONTEXT。绝不默默产出你不确定的工作。
```

View File

@ -0,0 +1,104 @@
# 定向复审提示词模板
在一轮修复之后分派复审时使用此模板。复审者核实那些发现是否已被解决,
并检查修复 diff 有没有引入新的破坏。这**不是**一次全新审查——完整审查
早已做过了。
**目的:** 核实上一次审查的每一条发现都已解决,且修复本身没有破坏任何东西。
```
Subagent (general-purpose):
description: "复审任务 N 第 R 轮修复"
model: [模型 —— 必填:按 SKILL.md 的"模型选择"来选;省略模型会默默
继承会话里最贵的那个]
prompt: |
你正在复审一个任务的一轮修复。之前的审查产生了一批发现,
一个实现者已经尝试修复它们。你的工作是给每条发现下结论、
并检查这次修复的 diff——仅此而已。
## 任务
读取任务简报:[BRIEF_FILE]
## 待核实的发现
[FINDINGS]
## 修复
读取实现者的报告(修复报告追加在文件末尾):
[REPORT_FILE]
**修复基线:** [FIX_BASE_SHA](上一次审查所看到的那个 head)
**Head:** [HEAD_SHA]
**diff 文件:** [DIFF_FILE]
把 diff 文件一次读完——它包含修复的提交、stat 摘要,以及带上下文的
修复 diff。不要重新跑 git 命令。如果 diff 文件不存在,自己取 diff:
`git diff --stat [FIX_BASE_SHA]..[HEAD_SHA]` 和
`git diff [FIX_BASE_SHA]..[HEAD_SHA]`。
你的审查对这个 checkout 是只读的。不要以任何方式改动工作树、索引、
HEAD 或分支状态。
## 你不派发子代理
这次审查全部由你自己做完。绝不为了审查 diff 的一部分而派生子代理,也绝不为了「再要一个意见」而派生另一个审查者。这套流程已经给了这份工作应有的每一个审查席位;你派生出来的审查者只是按全价重复其中一个,而它的结论不作数。如果 diff 大到一遍看不完,就自己分几遍看,并在报告里说明。
## 范围
你的范围就是那份发现清单和这次修复的 diff。**每一条发现都要给结论。**
检查修复 diff 里有没有修复本身引入的新问题。**不要**去复审这次修复
没有碰过的代码:如果你注意到一个完全在修复 diff 之外的问题,
把它写进"范围外的观察"——它不阻塞本任务,也不会延长修复循环。
覆盖整个分支的宽范围审查会在所有任务完成后另行进行。
## 测试
实现者已经重跑了覆盖被改动代码的那些测试,并把结果追加到了报告文件里。
把报告当作**未经核实的声明**来对待:确认修复报告点名了覆盖用的测试
并给出了它们的输出,再拿这些声明去对照 diff 核验。不要为了确认它的报告
而重跑整个测试套件。只有当读代码引出了某个现有运行结果无法回答的
具体疑问时才跑测试——而且只跑一个聚焦的测试,绝不跑整包套件。
## 输出格式
你的最终消息就是报告本身:直接从第一条发现的结论开始。每一行都应该是
一个结论、一条带 file:line 的发现,或者一项你实际做过的检查——
不要开场白,不要过程旁白。
### 各条发现的结论
按"待核实的发现"里的顺序,逐条给出:
- **[发现的一句话概括]** —— ADDRESSED(已解决)| NOT ADDRESSED(未解决),
附 file:line 证据。"尝试过了"不算已解决:那个具体缺陷必须已经不存在。
### 修复 diff 里的新破坏
修复本身破坏或引入的任何东西,附严重度(Critical/Important/Minor)
和 file:line。干净就写"无"。
### 范围外的观察
你注意到的、完全位于修复 diff 之外的问题。不阻塞;控制者会把这些
记进账本留给最终审查。没有就写"无"。
### 结论
**本轮修复:** [所有发现均已解决,无新的 Critical/Important 破坏 |
仍有发现未解决] —— 把未解决的那些列出来。
```
**占位符:**
- `[MODEL]` —— 必填:审查者模型,按 SKILL.md 的"模型选择"来选;小修复 diff
的定向复审用便宜到中档的层级即可
- `[BRIEF_FILE]` —— 任务简报文件(与实现者所依据的是同一个文件)
- `[FINDINGS]` —— 上一次审查里的 Critical/Important 发现和规格差距,
逐字抄下来,每条一个 bullet
- `[REPORT_FILE]` —— 实现者的报告文件(修复报告追加在其末尾)
- `[FIX_BASE_SHA]` —— 上一次审查所看到的那个 head
- `[HEAD_SHA]` —— 当前提交
- `[DIFF_FILE]` —— `scripts/review-package PLAN_FILE FIX_BASE HEAD` 打印出的那个路径
**复审者返回:** 逐条发现的结论(ADDRESSED / NOT ADDRESSED)、
修复 diff 里的新破坏、范围外的观察,以及一个本轮结论。

View File

@ -0,0 +1,46 @@
#!/usr/bin/env bash
# Generate a review package: commit list, stat summary, and the net
# diff with extended context, written to a file the reviewer reads in one
# call. Using the recorded per-task BASE (not HEAD~1) keeps multi-commit
# tasks intact.
#
# Usage: review-package PLAN_FILE BASE HEAD [OUTFILE]
# Default OUTFILE: <repo-root>/.superpowers/sdd/<plan-basename>/review-<base7>..<head7>.diff
# (named per range, so a re-review after fixes gets a distinct fresh file).
set -euo pipefail
if [ $# -lt 3 ] || [ $# -gt 4 ]; then
echo "usage: review-package PLAN_FILE BASE HEAD [OUTFILE]" >&2
exit 2
fi
plan=$1
base=$2
head=$3
[ -f "$plan" ] || { echo "no such plan file: $plan" >&2; exit 2; }
git rev-parse --verify --quiet "$base" >/dev/null || { echo "bad BASE: $base" >&2; exit 2; }
git rev-parse --verify --quiet "$head" >/dev/null || { echo "bad HEAD: $head" >&2; exit 2; }
if [ $# -eq 4 ]; then
out=$4
else
dir=$("$(cd "$(dirname "$0")" && pwd)/sdd-workspace" "$plan")
out="$dir/review-$(git rev-parse --short "$base")..$(git rev-parse --short "$head").diff"
fi
{
echo "# Review package: ${base}..${head}"
echo
echo "## Commits"
git log --oneline "${base}..${head}"
echo
echo "## Files changed"
git diff --stat "${base}..${head}"
echo
echo "## Diff"
git diff -U10 "${base}..${head}"
} > "$out"
commits=$(git rev-list --count "${base}..${head}")
echo "wrote ${out}: ${commits} commit(s), $(wc -c < "$out" | tr -d ' ') bytes"

View File

@ -0,0 +1,40 @@
#!/usr/bin/env bash
# Resolve and ensure the working-tree directory SDD uses for one plan's
# short-lived artifacts: task briefs, implementer reports, review packages,
# and the progress ledger. Print the plan directory's absolute path.
#
# One directory per plan (.superpowers/sdd/<plan-basename>/) so a follow-up
# plan in the same working tree can never read or overwrite another plan's
# artifacts. A stale ledger misread as current progress makes controllers
# skip whole task sequences — plan-scoping removes that failure structurally.
#
# The workspace lives in the working tree (not under .git/) because Claude Code
# treats .git/ as a protected path and denies agent writes there — which blocks
# an implementer subagent from writing its report file. A self-ignoring
# .gitignore at .superpowers/sdd/ keeps every plan's workspace out of
# `git status` and out of accidental commits without modifying any tracked file.
#
# Single source of truth for the workspace location, so task-brief and
# review-package cannot drift to different directories.
#
# Usage: sdd-workspace PLAN_FILE
set -euo pipefail
if [ $# -ne 1 ]; then
echo "usage: sdd-workspace PLAN_FILE" >&2
exit 2
fi
plan=$1
[ -f "$plan" ] || { echo "no such plan file: $plan" >&2; exit 2; }
slug=$(basename "$plan" .md)
[ -n "$slug" ] && [ "$slug" != "." ] && [ "$slug" != ".." ] \
|| { echo "cannot derive a workspace name from: $plan" >&2; exit 2; }
root=$(git rev-parse --show-toplevel)
base="$root/.superpowers/sdd"
dir="$base/$slug"
mkdir -p "$dir"
printf '*\n' > "$base/.gitignore"
cd "$dir" && pwd

View File

@ -0,0 +1,45 @@
#!/usr/bin/env bash
# Extract one task's full text from an implementation plan into a file the
# implementer reads in one call, so the task text never has to be pasted
# through the controller's context.
#
# Usage: task-brief PLAN_FILE TASK_NUMBER [OUTFILE]
# Default OUTFILE: <repo-root>/.superpowers/sdd/<plan-basename>/task-<N>-brief.md
# (per plan and per worktree; concurrent runs of the SAME plan in the same
# working tree share it).
#
# 中文 fork 适配:上游只识别英文任务标题 "## Task N",而 superpowers-zh
# 的 writing-plans 产出的是 "### 任务 N:..."。下方 awk 同时匹配
# "Task" 与 "任务",两种计划都能抽取。
set -euo pipefail
if [ $# -lt 2 ] || [ $# -gt 3 ]; then
echo "usage: task-brief PLAN_FILE TASK_NUMBER [OUTFILE]" >&2
exit 2
fi
plan=$1
n=$2
[ -f "$plan" ] || { echo "no such plan file: $plan" >&2; exit 2; }
if [ $# -eq 3 ]; then
out=$3
else
dir=$("$(cd "$(dirname "$0")" && pwd)/sdd-workspace" "$plan")
out="$dir/task-${n}-brief.md"
fi
awk -v n="$n" '
/^```/ { infence = !infence }
!infence && /^#+[ \t]+(Task|任务)[ \t]*[0-9]+/ {
intask = ($0 ~ ("^#+[ \t]+(Task|任务)[ \t]*" n "([^0-9]|$)"))
}
intask { print }
' "$plan" > "$out"
if [ ! -s "$out" ]; then
echo "task ${n} not found in ${plan} (no heading matching 'Task ${n}' / '任务 ${n}')" >&2
exit 3
fi
echo "wrote ${out}: $(wc -l < "$out" | tr -d ' ') lines"

View File

@ -0,0 +1,184 @@
# 任务审查者提示词模板
分派任务审查子智能体时使用此模板。审查者一次性读取该任务的 diff,
返回两个结论:规格合规性和代码质量。
**目的:** 核实一个任务的实现与其需求匹配(不多不少)且构建良好(整洁、有测试、可维护)
```
Subagent (general-purpose):
description: "审查任务 N(规格 + 质量)"
model: [模型 —— 必填:按 SKILL.md 的"模型选择"来选;省略模型会默默
继承会话里最贵的那个]
prompt: |
你正在审查一个任务的实现:先看它是否与需求匹配,再看它是否
构建良好。这是一个任务范围内的关卡,不是合并审查——覆盖整个
分支的宽范围审查会在所有任务完成后另行进行。
## 要求的内容
读取任务简报:[BRIEF_FILE]
来自规格/设计、约束本任务的全局约束:
[GLOBAL_CONSTRAINTS]
## 实现者声称构建了什么
读取实现者的报告:[REPORT_FILE]
## 待审查的 Diff
**Base:** [BASE_SHA]
**Head:** [HEAD_SHA]
**Diff 文件:** [DIFF_FILE]
一次性读取这个 diff 文件——它包含提交列表、stat 摘要,以及
带上下文的完整 diff,它就是你对本次改动的视图。diff 的上下文行
**就是**那些被改动的文件:不要单独去 Read 某个被改动的文件,除非
你必须判断的某个 hunk 在函数中途被截断——并在报告中说明这一点。
不要重跑 git 命令。如果 diff 文件缺失,就自己取 diff:
`git diff --stat [BASE_SHA]..[HEAD_SHA]` 和 `git diff [BASE_SHA]..[HEAD_SHA]`。
不要爬取更广的代码库。只有为了评估一个你能点名的具体风险,才去
查看 diff 之外的代码——每个点名的风险做一次聚焦检查,并在报告中
同时点名这个风险和你检查了什么。横切改动是正当的、可点名的风险:
如果 diff 改动了锁顺序、某个函数或 API 契约、或共享的可变状态,
检查其调用点就是正确的方法。
你的审查在这个 checkout 上是只读的。不要以任何方式改动工作树、
索引、HEAD 或分支状态。
## 你不派发子智能体
这次审查全部由你自己做。绝不派一个子智能体去审查 diff 的一部分,
也绝不为了第二意见再派一个审查者。这套流程已经提供了这份工作
应得的每一个审查席位;你派出的审查者只是按全价重复其中之一,
而且它的裁定不算数。如果这份 diff 大到一遍看不完,就自己分几遍
看,并在报告里说明。
## 不要信任报告
把实现者的报告当作关于代码的、未经核实的说法。它可能不完整、
不准确或过于乐观。对照 diff 去核实这些说法。报告里的设计理由
同样是说法:"出于 YAGNI 留着没做""特意保持简单"或任何其他辩解,
都是实现者在给自己的工作打分。就代码本身评判它的优劣——一句
陈述出来的理由永远不会降低一个发现的严重度。
你看不见的证据,不等于不存在的证据。如果报告或它的测试证据看起来
被截断了,或者你找不到它声称的结果,就按它给出的路径把文件重新读
一遍——如果确实缺失或损坏了,把这件事作为一个缺口报告给控制者。
为了重新生成你没读到的东西而重跑测试套件,不是核实;证据不可读,
不等于证据不成立。
## 测试
实现者已经跑过测试,并为正是这份代码报告了带 TDD 证据的结果。
不要为了确认他们的报告而重跑测试套件。只有当阅读代码引出一个
现有任何运行都无法回答的具体疑问时,才去跑测试——而且是聚焦
测试,绝不是包级套件、竞态检测运行、或反复的/高次数的循环。
如果看起来确实需要重度验证,就在报告里建议它,而不是自己去跑。
如果你在这个环境里无法运行命令,就点名你会跑的那个测试。
实现者报告的测试输出里的告警或其他噪声都是发现——测试输出
应当是干净的。
## 第一部分:规格合规性
把 diff 对照"要求的内容"来看:
- **缺失:** 他们跳过、遗漏、或声称却未实现的需求
- **多余:** 未被要求的功能、过度工程、不需要的"锦上添花"
- **理解偏差:** 正确的功能却用错了方式来构建,解决了错误的问题
如果某个需求无法仅从这份 diff 中核实(它藏在未改动的代码里、
或横跨多个任务),就把它作为一个 ⚠️ 事项报告出来,而不是
扩大你的搜索范围。
如果简报列了好几个文件、每个都有自己的改动(一次打包分派),
就拿这份清单逐个文件去对 diff:清单上的每个文件都必须有它对应
的 hunk。清单上有、diff 却从没碰过的文件,是一条"缺失"发现,
无论这一批里其余部分看起来多干净。
## 第二部分:代码质量
**代码质量:**
- 关注点分离是否干净?
- 错误处理是否恰当?
- 是否做到 DRY 而没有过早抽象?
- 边界情况是否处理了?
**测试:**
- 新增和改动的测试是否验证了真实行为,而非 mock?
- 本任务的边界情况是否被覆盖?
**结构:**
- 每个文件是否有单一明确的职责和定义清晰的接口?
- 各单元是否拆分得足以独立理解和测试?
- 实现是否遵循了计划中的文件结构?
- 本次改动是否创建了已经很大的新文件,或显著增大了现有文件?
(不要标记已有的文件大小问题——聚焦于本次改动带来的贡献。)
你的报告应指向证据:每一个发现、以及任何你本来会用一句干巴巴的
"是"来回答的检查,都要给出 file:line 引用。一份引用了行号的
紧凑报告,就把控制者需要的一切都给它了。
你的最终消息就是报告本身:直接从规格合规性结论开始。每一行
要么是一个结论、要么是一个带 file:line 的发现、要么是你跑过的
一个检查——没有开场白、没有流程叙述、没有结尾小结。
## 校准
按实际严重度给问题分类。不是所有东西都是 关键。
重要 意味着这个任务在修好之前不可信:不正确或脆弱的行为、
一个漏掉的需求、或你会为之拦下合并的可维护性损害——逻辑块的
逐字重复、被吞掉的错误、什么都不断言的测试。"覆盖面可以更广"
和打磨类建议是 次要。
如果计划或简报明确强制了某个本评分标准称之为缺陷的东西(一个
什么都不断言的测试、逻辑块的逐字重复),那**就是**一个发现——
把它报告为 重要,并标注为"计划强制"。计划的作者身份不能给它
自己的工作打分;由人类来决定。
在列出问题之前,先承认做得好的地方——准确的赞扬能帮实现者
信任其余的反馈。
## 输出格式
### 规格合规性
- ✅ 符合规格 | ❌ 发现问题:[缺失/多余/理解偏差的内容,
附带 file:line 引用]
- ⚠️ 无法从 diff 中核实:[你无法仅凭 diff 核实的需求,以及
控制者应当检查什么——与你能核实的一切的 ✅/❌ 结论一起报告]
### 优点
[哪些做得好?要具体。]
### 问题
#### 关键(必须修复)
#### 重要(应当修复)
#### 次要(锦上添花)
每个问题:file:line、哪里错了、为什么重要、如何修复(如果不明显)。
### 评估
**任务质量:** [通过 | 需要修复]
**理由:** [1-2 句技术性评估]
```
**占位符:**
- `[模型]` —— 必填:按 SKILL.md 的"模型选择"选审查者模型
- `[BRIEF_FILE]` —— 必填:任务简报文件(`scripts/task-brief PLAN N`
会打印路径;与实现者所用的是同一个文件)
- `[GLOBAL_CONSTRAINTS]` —— 从计划的"全局约束"一节或规格里逐字抄下的、
有约束力的需求:精确的取值、格式、以及组件之间被明确规定的关系
(不是流程规则——那些已经在本模板里了)
- `[REPORT_FILE]` —— 必填:实现者写入其详细报告的那个文件
- `[BASE_SHA]` —— 本任务之前的提交
- `[HEAD_SHA]` —— 当前提交
- `[DIFF_FILE]` —— 必填:控制者写入审查包的那个路径
(`scripts/review-package PLAN_FILE BASE HEAD` 会打印它写入的唯一路径;
审查包永远不会进入控制者的上下文)
**审查者返回:** 规格合规性结论(✅/❌/⚠️)、优点、问题
(关键/重要/次要)、任务质量结论

View File

@ -0,0 +1,119 @@
# Creation Log: Systematic Debugging Skill
Reference example of extracting, structuring, and bulletproofing a critical skill.
## Source Material
Extracted debugging framework from `/Users/jesse/.claude/CLAUDE.md`:
- 4-phase systematic process (Investigation → Pattern Analysis → Hypothesis → Implementation)
- Core mandate: ALWAYS find root cause, NEVER fix symptoms
- Rules designed to resist time pressure and rationalization
## Extraction Decisions
**What to include:**
- Complete 4-phase framework with all rules
- Anti-shortcuts ("NEVER fix symptom", "STOP and re-analyze")
- Pressure-resistant language ("even if faster", "even if I seem in a hurry")
- Concrete steps for each phase
**What to leave out:**
- Project-specific context
- Repetitive variations of same rule
- Narrative explanations (condensed to principles)
## Structure Following skill-creation/SKILL.md
1. **Rich when_to_use** - Included symptoms and anti-patterns
2. **Type: technique** - Concrete process with steps
3. **Keywords** - "root cause", "symptom", "workaround", "debugging", "investigation"
4. **Flowchart** - Decision point for "fix failed" → re-analyze vs add more fixes
5. **Phase-by-phase breakdown** - Scannable checklist format
6. **Anti-patterns section** - What NOT to do (critical for this skill)
## Bulletproofing Elements
Framework designed to resist rationalization under pressure:
### Language Choices
- "ALWAYS" / "NEVER" (not "should" / "try to")
- "even if faster" / "even if I seem in a hurry"
- "STOP and re-analyze" (explicit pause)
- "Don't skip past" (catches the actual behavior)
### Structural Defenses
- **Phase 1 required** - Can't skip to implementation
- **Single hypothesis rule** - Forces thinking, prevents shotgun fixes
- **Explicit failure mode** - "IF your first fix doesn't work" with mandatory action
- **Anti-patterns section** - Shows exactly what shortcuts look like
### Redundancy
- Root cause mandate in overview + when_to_use + Phase 1 + implementation rules
- "NEVER fix symptom" appears 4 times in different contexts
- Each phase has explicit "don't skip" guidance
## Testing Approach
Created 4 validation tests following skills/meta/testing-skills-with-subagents:
### Test 1: Academic Context (No Pressure)
- Simple bug, no time pressure
- **Result:** Perfect compliance, complete investigation
### Test 2: Time Pressure + Obvious Quick Fix
- User "in a hurry", symptom fix looks easy
- **Result:** Resisted shortcut, followed full process, found real root cause
### Test 3: Complex System + Uncertainty
- Multi-layer failure, unclear if can find root cause
- **Result:** Systematic investigation, traced through all layers, found source
### Test 4: Failed First Fix
- Hypothesis doesn't work, temptation to add more fixes
- **Result:** Stopped, re-analyzed, formed new hypothesis (no shotgun)
**All tests passed.** No rationalizations found.
## Iterations
### Initial Version
- Complete 4-phase framework
- Anti-patterns section
- Flowchart for "fix failed" decision
### Enhancement 1: TDD Reference
- Added link to skills/testing/test-driven-development
- Note explaining TDD's "simplest code" ≠ debugging's "root cause"
- Prevents confusion between methodologies
## Final Outcome
Bulletproof skill that:
- ✅ Clearly mandates root cause investigation
- ✅ Resists time pressure rationalization
- ✅ Provides concrete steps for each phase
- ✅ Shows anti-patterns explicitly
- ✅ Tested under multiple pressure scenarios
- ✅ Clarifies relationship to TDD
- ✅ Ready for use
## Key Insight
**Most important bulletproofing:** Anti-patterns section showing exact shortcuts that feel justified in the moment. When Claude thinks "I'll just add this one quick fix", seeing that exact pattern listed as wrong creates cognitive friction.
## Usage Example
When encountering a bug:
1. Load skill: skills/debugging/systematic-debugging
2. Read overview (10 sec) - reminded of mandate
3. Follow Phase 1 checklist - forced investigation
4. If tempted to skip - see anti-pattern, stop
5. Complete all phases - root cause found
**Time investment:** 5-10 minutes
**Time saved:** Hours of symptom-whack-a-mole
---
*Created: 2025-10-03*
*Purpose: Reference example for skill extraction and bulletproofing*

View File

@ -0,0 +1,289 @@
---
name: systematic-debugging
description: 遇到任何 bug、测试失败或异常行为时使用,在提出修复方案之前执行
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [debugging]
---
# 系统化调试
## 概述
**核心原则:** 在尝试修复之前,务必先找到根本原因。只修症状就是失败。
**敷衍走流程等于违背调试的精神。**
## 铁律
```
不做根因调查,不许提修复方案
```
如果你还没完成第一阶段,就不能提出修复方案。
## 何时使用
用于任何技术问题:
- 测试失败
- 生产环境 bug
- 异常行为
- 性能问题
- 构建失败
- 集成问题
**尤其在以下情况必须使用:**
- 时间紧迫(紧急情况最容易让人猜测式修复)
- 觉得"一个小修改"就能搞定
- 已经尝试了多种修复
- 上一次修复没有生效
- 你没有完全理解问题
**以下情况也不要跳过:**
- 问题看起来很简单(简单的 bug 也有根本原因)
- 你很赶时间(越急越容易返工)
- 领导要求立刻修好(系统化调试比反复尝试更快)
## 四个阶段
你必须完成每个阶段后才能进入下一个。
### 第一阶段:根因调查
**在尝试任何修复之前:**
1. **仔细阅读错误信息**
- 不要跳过错误或警告
- 它们往往直接包含解决方案
- 完整阅读堆栈跟踪
- 记下行号、文件路径、错误码
2. **稳定复现**
- 你能可靠地触发它吗?
- 具体的复现步骤是什么?
- 每次都能复现吗?
- 如果无法复现 → 收集更多数据,不要猜测
3. **检查近期变更**
- 什么变更可能导致了这个问题?
- git diff、最近的提交
- 新依赖、配置变更
- 环境差异
4. **在多组件系统中收集证据**
**当系统有多个组件时(CI → 构建 → 签名,API → 服务 → 数据库):**
**在提出修复方案之前,先添加诊断埋点:**
```
对每个组件边界:
- 记录进入组件的数据
- 记录离开组件的数据
- 验证环境/配置的传递
- 检查每一层的状态
执行一次以收集证据,确定断裂点在哪里
然后分析证据,定位故障组件
然后针对该组件深入调查
```
**示例(多层系统):**
```bash
# 第 1 层:工作流
echo "=== Secrets available in workflow: ==="
echo "IDENTITY: ${IDENTITY:+SET}${IDENTITY:-UNSET}"
# 第 2 层:构建脚本
echo "=== Env vars in build script: ==="
env | grep IDENTITY || echo "IDENTITY not in environment"
# 第 3 层:签名脚本
echo "=== Keychain state: ==="
security list-keychains
security find-identity -v
# 第 4 层:实际签名
codesign --sign "$IDENTITY" --verbose=4 "$APP"
```
**由此可以看出:** 哪一层出了问题(secrets → workflow ✓, workflow → build ✗)
5. **跟踪数据流**
**当错误发生在调用栈深处时:**
参见本目录下的 `root-cause-tracing.md`,了解完整的反向追踪技术。
**简要版本:**
- 错误值从哪里产生的?
- 谁用错误值调用了这里?
- 持续向上追踪直到找到源头
- 在源头修复,而不是在症状处修复
### 第二阶段:模式分析
**先找到模式,再修复:**
1. **找到可正常工作的示例**
- 在同一代码库中找到类似的正常代码
- 有什么正常的代码与出问题的代码相似?
2. **与参考实现对比**
- 如果是实现某个模式,完整阅读参考实现
- 不要略读——逐行阅读
- 在应用之前彻底理解该模式
3. **识别差异**
- 正常代码和出问题的代码之间有什么不同?
- 列出每一个差异,无论多小
- 不要假设"那不可能有影响"
4. **理解依赖关系**
- 这个功能需要哪些其他组件?
- 需要哪些设置、配置、环境?
- 它有哪些隐含假设?
### 第三阶段:假设与验证
**科学方法:**
1. **提出单一假设**
- 清晰地陈述:"我认为 X 是根本原因,因为 Y"
- 写下来
- 要具体,不要含糊
2. **最小化测试**
- 做出最小的改动来验证假设
- 每次只改一个变量
- 不要同时修复多个问题
3. **继续之前先验证**
- 生效了?是 → 进入第四阶段
- 没生效?提出新假设
- 不要在上面叠加更多修复
4. **当你不确定时**
- 说"我不理解 X"
- 不要假装自己知道
- 寻求帮助
- 做更多调研
### 第四阶段:实施
**修复根本原因,而非症状:**
1. **创建失败的测试用例**
- 最简化的复现
- 尽可能用自动化测试
- 没有测试框架就写一次性测试脚本
- 修复前必须先有测试
- 使用 `test-driven-development` 技能来编写规范的失败测试
2. **实施单一修复**
- 修复已定位的根本原因
- 每次只改一处
- 不做"顺便改改"的优化
- 不捆绑重构
3. **验证修复**
- 测试现在通过了吗?
- 其他测试没有被破坏吧?
- 问题真的解决了吗?
- 宣称成功之前,使用 `verification-before-completion` 技能
4. **如果修复不起作用**
- 停下来
- 数一数:你已经尝试了几次修复?
- 少于 3 次:回到第一阶段,用新信息重新分析
- **3 次或以上:停下来质疑架构(见下方第 5 步)**
- 没有经过架构讨论,不要尝试第 4 次修复
5. **如果 3 次以上修复都失败了:质疑架构**
**以下模式表明存在架构问题:**
- 每次修复都暴露出新的共享状态/耦合/其他位置的问题
- 修复需要"大规模重构"才能实现
- 每次修复都在其他地方产生新的症状
**停下来质疑根本性问题:**
- 这个模式从根本上合理吗?
- 我们是不是在"惯性驱动"下坚持了错误方案?
- 应该重构架构还是继续修补症状?
**在尝试更多修复之前,和你的搭档讨论**
这不是假设失败——这是架构有误。
## 红线——停下来,按流程走
如果你发现自己在想:
- "先临时修一下,以后再排查"
- "试着改改 X 看看行不行"
- "一次性改多个地方,跑测试看看"
- "跳过测试,我手动验证"
- "大概是 X 的问题,让我修一下"
- "我不完全理解,但这应该能行"
- "模式说的是 X,但我换个方式用"
- "主要问题有这些:[未经调查就列出修复方案]"
- 没有追踪数据流就提出解决方案
- **"再试一次修复"(已经尝试了 2 次以上)**
- **每次修复都暴露出不同地方的新问题**
**以上这些都意味着:停下来。回到第一阶段。**
**如果 3 次以上修复都失败了:** 质疑架构(见第四阶段第 5 步)
## 搭档发出的信号——说明你的方法不对
**留意这些提醒:**
- "难道不是这样吗?"——你在没有验证的情况下做了假设
- "它能告诉我们……吗?"——你应该先收集证据
- "别猜了"——你在没有理解的情况下提出修复
- "深入想想"——要质疑根本性问题,而不只是症状
- "我们卡住了?"(沮丧的语气)——你的方法没有奏效
**当你看到这些信号时:** 停下来。回到第一阶段。
## 常见借口
| 借口 | 现实 |
|------|------|
| "问题很简单,不需要走流程" | 简单问题也有根本原因。对于简单 bug,流程很快就能走完。 |
| "紧急情况,没时间走流程" | 系统化调试比反复猜测式修复更快。 |
| "先试一下,再排查" | 第一次修复就定下了基调。从一开始就做对。 |
| "确认修复有效后再写测试" | 没有测试的修复留不住。先写测试才能证明修复有效。 |
| "一次修多个问题省时间" | 无法隔离哪个生效了。还会引入新 bug。 |
| "参考实现太长了,我自己改改" | 一知半解必然出 bug。完整阅读。 |
| "我看出问题了,让我修一下" | 看到症状 ≠ 理解根因。 |
| "再试一次"(在 2 次以上失败后) | 3 次以上失败 = 架构问题。质疑模式,不要继续修。 |
## 速查表
| 阶段 | 关键活动 | 通过标准 |
|------|---------|---------|
| **1. 根因** | 阅读错误、复现、检查变更、收集证据 | 理解了什么出了问题以及为什么 |
| **2. 模式** | 找到正常示例、对比 | 识别出差异 |
| **3. 假设** | 提出理论、最小化验证 | 假设被验证或产生新假设 |
| **4. 实施** | 创建测试、修复、验证 | bug 已修复,测试通过 |
## 当流程显示"找不到根因"
如果系统化排查后发现问题确实是环境相关、时序相关或外部因素导致的:
1. 你已经完成了流程
2. 记录你排查了什么
3. 实施适当的处理措施(重试、超时、错误提示)
4. 添加监控/日志以便后续排查
**但是:** 95% 的"找不到根因"其实是排查不充分。
## 辅助技术
以下技术是系统化调试的组成部分,可在本目录中找到:
- **`root-cause-tracing.md`** - 沿调用栈反向追踪 bug,找到最初的触发点
- **`defense-in-depth.md`** - 找到根因后,在多个层级添加校验
- **`condition-based-waiting.md`** - 用条件轮询替代硬编码等待时间

View File

@ -0,0 +1,158 @@
// Complete implementation of condition-based waiting utilities
// From: Lace test infrastructure improvements (2025-10-03)
// Context: Fixed 15 flaky tests by replacing arbitrary timeouts
import type { ThreadManager } from '~/threads/thread-manager';
import type { LaceEvent, LaceEventType } from '~/threads/types';
/**
* Wait for a specific event type to appear in thread
*
* @param threadManager - The thread manager to query
* @param threadId - Thread to check for events
* @param eventType - Type of event to wait for
* @param timeoutMs - Maximum time to wait (default 5000ms)
* @returns Promise resolving to the first matching event
*
* Example:
* await waitForEvent(threadManager, agentThreadId, 'TOOL_RESULT');
*/
export function waitForEvent(
threadManager: ThreadManager,
threadId: string,
eventType: LaceEventType,
timeoutMs = 5000
): Promise<LaceEvent> {
return new Promise((resolve, reject) => {
const startTime = Date.now();
const check = () => {
const events = threadManager.getEvents(threadId);
const event = events.find((e) => e.type === eventType);
if (event) {
resolve(event);
} else if (Date.now() - startTime > timeoutMs) {
reject(new Error(`Timeout waiting for ${eventType} event after ${timeoutMs}ms`));
} else {
setTimeout(check, 10); // Poll every 10ms for efficiency
}
};
check();
});
}
/**
* Wait for a specific number of events of a given type
*
* @param threadManager - The thread manager to query
* @param threadId - Thread to check for events
* @param eventType - Type of event to wait for
* @param count - Number of events to wait for
* @param timeoutMs - Maximum time to wait (default 5000ms)
* @returns Promise resolving to all matching events once count is reached
*
* Example:
* // Wait for 2 AGENT_MESSAGE events (initial response + continuation)
* await waitForEventCount(threadManager, agentThreadId, 'AGENT_MESSAGE', 2);
*/
export function waitForEventCount(
threadManager: ThreadManager,
threadId: string,
eventType: LaceEventType,
count: number,
timeoutMs = 5000
): Promise<LaceEvent[]> {
return new Promise((resolve, reject) => {
const startTime = Date.now();
const check = () => {
const events = threadManager.getEvents(threadId);
const matchingEvents = events.filter((e) => e.type === eventType);
if (matchingEvents.length >= count) {
resolve(matchingEvents);
} else if (Date.now() - startTime > timeoutMs) {
reject(
new Error(
`Timeout waiting for ${count} ${eventType} events after ${timeoutMs}ms (got ${matchingEvents.length})`
)
);
} else {
setTimeout(check, 10);
}
};
check();
});
}
/**
* Wait for an event matching a custom predicate
* Useful when you need to check event data, not just type
*
* @param threadManager - The thread manager to query
* @param threadId - Thread to check for events
* @param predicate - Function that returns true when event matches
* @param description - Human-readable description for error messages
* @param timeoutMs - Maximum time to wait (default 5000ms)
* @returns Promise resolving to the first matching event
*
* Example:
* // Wait for TOOL_RESULT with specific ID
* await waitForEventMatch(
* threadManager,
* agentThreadId,
* (e) => e.type === 'TOOL_RESULT' && e.data.id === 'call_123',
* 'TOOL_RESULT with id=call_123'
* );
*/
export function waitForEventMatch(
threadManager: ThreadManager,
threadId: string,
predicate: (event: LaceEvent) => boolean,
description: string,
timeoutMs = 5000
): Promise<LaceEvent> {
return new Promise((resolve, reject) => {
const startTime = Date.now();
const check = () => {
const events = threadManager.getEvents(threadId);
const event = events.find(predicate);
if (event) {
resolve(event);
} else if (Date.now() - startTime > timeoutMs) {
reject(new Error(`Timeout waiting for ${description} after ${timeoutMs}ms`));
} else {
setTimeout(check, 10);
}
};
check();
});
}
// Usage example from actual debugging session:
//
// BEFORE (flaky):
// ---------------
// const messagePromise = agent.sendMessage('Execute tools');
// await new Promise(r => setTimeout(r, 300)); // Hope tools start in 300ms
// agent.abort();
// await messagePromise;
// await new Promise(r => setTimeout(r, 50)); // Hope results arrive in 50ms
// expect(toolResults.length).toBe(2); // Fails randomly
//
// AFTER (reliable):
// ----------------
// const messagePromise = agent.sendMessage('Execute tools');
// await waitForEventCount(threadManager, threadId, 'TOOL_CALL', 2); // Wait for tools to start
// agent.abort();
// await messagePromise;
// await waitForEventCount(threadManager, threadId, 'TOOL_RESULT', 2); // Wait for results
// expect(toolResults.length).toBe(2); // Always succeeds
//
// Result: 60% pass rate → 100%, 40% faster execution

View File

@ -0,0 +1,115 @@
# 基于条件的等待
## 概述
不稳定的测试通常用硬编码延迟来猜测时序。这会造成竞态条件——在快速机器上通过,在高负载或 CI 环境下失败。
**核心原则:** 等待你真正关心的条件,而不是猜测它需要多长时间。
## 何时使用
```dot
digraph when_to_use {
"测试使用了 setTimeout/sleep?" [shape=diamond];
"是在测试时序行为吗?" [shape=diamond];
"记录为什么需要超时" [shape=box];
"使用基于条件的等待" [shape=box];
"测试使用了 setTimeout/sleep?" -> "是在测试时序行为吗?" [label="是"];
"是在测试时序行为吗?" -> "记录为什么需要超时" [label="是"];
"是在测试时序行为吗?" -> "使用基于条件的等待" [label="否"];
}
```
**适用场景:**
- 测试中有硬编码延迟(`setTimeout`、`sleep`、`time.sleep()`)
- 测试不稳定(时而通过,高负载下失败)
- 并行运行时测试超时
- 等待异步操作完成
**不适用场景:**
- 测试实际的时序行为(防抖、节流间隔)
- 如果使用硬编码超时,务必注释说明原因
## 核心模式
```typescript
// ❌ 之前:猜测时序
await new Promise(r => setTimeout(r, 50));
const result = getResult();
expect(result).toBeDefined();
// ✅ 之后:等待条件满足
await waitFor(() => getResult() !== undefined);
const result = getResult();
expect(result).toBeDefined();
```
## 常用模式速查
| 场景 | 模式 |
|------|------|
| 等待事件 | `waitFor(() => events.find(e => e.type === 'DONE'))` |
| 等待状态 | `waitFor(() => machine.state === 'ready')` |
| 等待数量 | `waitFor(() => items.length >= 5)` |
| 等待文件 | `waitFor(() => fs.existsSync(path))` |
| 复合条件 | `waitFor(() => obj.ready && obj.value > 10)` |
## 实现方式
通用轮询函数:
```typescript
async function waitFor<T>(
condition: () => T | undefined | null | false,
description: string,
timeoutMs = 5000
): Promise<T> {
const startTime = Date.now();
while (true) {
const result = condition();
if (result) return result;
if (Date.now() - startTime > timeoutMs) {
throw new Error(`Timeout waiting for ${description} after ${timeoutMs}ms`);
}
await new Promise(r => setTimeout(r, 10)); // 每 10ms 轮询一次
}
}
```
参见本目录下的 `condition-based-waiting-example.ts`,其中包含完整实现和领域专用辅助函数(`waitForEvent`、`waitForEventCount`、`waitForEventMatch`),源自实际调试过程。
## 常见错误
**❌ 轮询太频繁:** `setTimeout(check, 1)` —— 浪费 CPU
**✅ 修正:** 每 10ms 轮询一次
**❌ 没有超时:** 条件永远不满足时无限循环
**✅ 修正:** 始终设置超时并提供清晰的错误信息
**❌ 数据过期:** 在循环外缓存状态
**✅ 修正:** 在循环内调用 getter 获取最新数据
## 何时硬编码超时是正确的
```typescript
// 工具每 100ms tick 一次——需要 2 次 tick 来验证部分输出
await waitForEvent(manager, 'TOOL_STARTED'); // 首先:等待条件
await new Promise(r => setTimeout(r, 200)); // 然后:等待有明确时序依据的行为
// 200ms = 100ms 间隔的 2 次 tick——有文档说明且有充分理由
```
**使用要求:**
1. 首先等待触发条件
2. 基于已知时序(而非猜测)
3. 注释说明原因
## 实际效果
来自调试实践(2025-10-03):
- 修复了 3 个文件中的 15 个不稳定测试
- 通过率:60% → 100%
- 执行时间:快了 40%
- 再无竞态条件

View File

@ -0,0 +1,122 @@
# 纵深防御校验
## 概述
当你修复了一个由无效数据引起的 bug 时,在一个地方加校验似乎就够了。但这个单点检查可能会被不同的代码路径、重构或 mock 绕过。
**核心原则:** 在数据经过的每一层都做校验。让这个 bug 在结构上不可能发生。
## 为什么需要多层校验
单层校验:"我们修了这个 bug"
多层校验:"我们让这个 bug 不可能再发生"
不同层级能捕获不同问题:
- 入口校验捕获大多数 bug
- 业务逻辑校验捕获边界情况
- 环境守卫防止特定上下文的危险操作
- 调试日志在其他层级失效时提供帮助
## 四个层级
### 第 1 层:入口校验
**目的:** 在 API 边界拒绝明显无效的输入
```typescript
function createProject(name: string, workingDirectory: string) {
if (!workingDirectory || workingDirectory.trim() === '') {
throw new Error('workingDirectory cannot be empty');
}
if (!existsSync(workingDirectory)) {
throw new Error(`workingDirectory does not exist: ${workingDirectory}`);
}
if (!statSync(workingDirectory).isDirectory()) {
throw new Error(`workingDirectory is not a directory: ${workingDirectory}`);
}
// ... 继续处理
}
```
### 第 2 层:业务逻辑校验
**目的:** 确保数据对当前操作是合理的
```typescript
function initializeWorkspace(projectDir: string, sessionId: string) {
if (!projectDir) {
throw new Error('projectDir required for workspace initialization');
}
// ... 继续处理
}
```
### 第 3 层:环境守卫
**目的:** 防止在特定环境中执行危险操作
```typescript
async function gitInit(directory: string) {
// 在测试中,拒绝在临时目录之外执行 git init
if (process.env.NODE_ENV === 'test') {
const normalized = normalize(resolve(directory));
const tmpDir = normalize(resolve(tmpdir()));
if (!normalized.startsWith(tmpDir)) {
throw new Error(
`Refusing git init outside temp dir during tests: ${directory}`
);
}
}
// ... 继续处理
}
```
### 第 4 层:调试埋点
**目的:** 记录上下文信息以便事后分析
```typescript
async function gitInit(directory: string) {
const stack = new Error().stack;
logger.debug('About to git init', {
directory,
cwd: process.cwd(),
stack,
});
// ... 继续处理
}
```
## 应用模式
当你发现一个 bug 时:
1. **追踪数据流** —— 错误值从哪里产生的?在哪里被使用?
2. **标注所有检查点** —— 列出数据经过的每一个节点
3. **在每一层添加校验** —— 入口、业务逻辑、环境、调试
4. **测试每一层** —— 尝试绕过第 1 层,验证第 2 层能否捕获
## 实际案例
Bug:空的 `projectDir` 导致 `git init` 在源代码目录执行
**数据流:**
1. 测试准备 → 空字符串
2. `Project.create(name, '')`
3. `WorkspaceManager.createWorkspace('')`
4. `git init` 在 `process.cwd()` 中执行
**添加的四层防御:**
- 第 1 层:`Project.create()` 校验非空/存在/可写
- 第 2 层:`WorkspaceManager` 校验 projectDir 非空
- 第 3 层:`WorktreeManager` 在测试中拒绝在 tmpdir 之外执行 git init
- 第 4 层:git init 前记录堆栈跟踪
**结果:** 全部 1847 个测试通过,bug 不可能再复现
## 关键洞察
四个层级缺一不可。在测试过程中,每一层都捕获了其他层遗漏的 bug:
- 不同的代码路径绕过了入口校验
- mock 绕过了业务逻辑检查
- 不同平台的边界情况需要环境守卫
- 调试日志发现了结构性误用
**不要止步于一个校验点。** 在每一层都添加检查。

View File

@ -0,0 +1,72 @@
#!/usr/bin/env bash
# Bisection script to find which test creates unwanted files/state
# Usage: ./find-polluter.sh <file_or_dir_to_check> <test_pattern>
# Example: ./find-polluter.sh '.git' 'src/**/*.test.ts'
set -e
if [ $# -ne 2 ]; then
echo "Usage: $0 <file_to_check> <test_pattern>"
echo "Example: $0 '.git' 'src/**/*.test.ts'"
exit 1
fi
POLLUTION_CHECK="$1"
TEST_PATTERN="$2"
echo "🔍 Searching for test that creates: $POLLUTION_CHECK"
echo "Test pattern: $TEST_PATTERN"
echo ""
# Get list of test files (find . emits ./-prefixed paths, so accept the
# pattern written with or without a leading ./)
TEST_PATTERN="${TEST_PATTERN#./}"
# find -path can't match '**/' against zero directory levels, so a pattern
# like src/**/*.test.ts would skip src/top.test.ts; also try the pattern
# with '**/' collapsed to cover files directly under the base directory.
TEST_FILES=$(find . \( -path "./$TEST_PATTERN" -o -path "./${TEST_PATTERN//\*\*\//}" \) | sort -u)
if [ -z "$TEST_FILES" ]; then
TOTAL=0
else
TOTAL=$(printf '%s\n' "$TEST_FILES" | wc -l | tr -d ' ')
fi
echo "Found $TOTAL test files"
echo ""
COUNT=0
for TEST_FILE in $TEST_FILES; do
COUNT=$((COUNT + 1))
# Skip if pollution already exists
if [ -e "$POLLUTION_CHECK" ]; then
echo "⚠️ Pollution already exists before test $COUNT/$TOTAL"
echo " Skipping: $TEST_FILE"
continue
fi
echo "[$COUNT/$TOTAL] Testing: $TEST_FILE"
# Run the test
npm test "$TEST_FILE" > /dev/null 2>&1 || true
# Check if pollution appeared
if [ -e "$POLLUTION_CHECK" ]; then
echo ""
echo "🎯 FOUND POLLUTER!"
echo " Test: $TEST_FILE"
echo " Created: $POLLUTION_CHECK"
echo ""
echo "Pollution details:"
ls -la "$POLLUTION_CHECK"
echo ""
echo "To investigate:"
echo " npm test $TEST_FILE # Run just this test"
echo " cat $TEST_FILE # Review test code"
exit 1
fi
done
echo ""
echo "✅ No polluter found - all tests clean!"
exit 0

View File

@ -0,0 +1,169 @@
# 根因追踪
## 概述
Bug 通常表现在调用栈深处(在错误目录执行 git init、在错误位置创建文件、用错误路径打开数据库)。你的本能是在错误出现的地方修复,但那只是治标。
**核心原则:** 沿着调用链反向追踪,直到找到最初的触发点,然后在源头修复。
## 何时使用
```dot
digraph when_to_use {
"Bug 出现在调用栈深处?" [shape=diamond];
"能反向追踪吗?" [shape=diamond];
"在症状处修复" [shape=box];
"追踪到最初的触发点" [shape=box];
"更好的做法:同时添加纵深防御" [shape=box];
"Bug 出现在调用栈深处?" -> "能反向追踪吗?" [label="是"];
"能反向追踪吗?" -> "追踪到最初的触发点" [label="是"];
"能反向追踪吗?" -> "在症状处修复" [label="否——死胡同"];
"追踪到最初的触发点" -> "更好的做法:同时添加纵深防御";
}
```
**适用场景:**
- 错误发生在执行深处(不在入口点)
- 堆栈跟踪显示很长的调用链
- 不清楚无效数据从哪里来
- 需要找到是哪个测试/代码触发了问题
## 追踪流程
### 1. 观察症状
```
Error: git init failed in /Users/jesse/project/packages/core
```
### 2. 找到直接原因
**哪段代码直接导致了这个错误?**
```typescript
await execFileAsync('git', ['init'], { cwd: projectDir });
```
### 3. 问:谁调用了它?
```typescript
WorktreeManager.createSessionWorktree(projectDir, sessionId)
→ 被 Session.initializeWorkspace() 调用
→ 被 Session.create() 调用
→ 被测试中的 Project.create() 调用
```
### 4. 继续向上追踪
**传入了什么值?**
- `projectDir = ''`(空字符串!)
- 空字符串作为 `cwd` 会解析为 `process.cwd()`
- 那就是源代码目录!
### 5. 找到最初的触发点
**空字符串从哪里来的?**
```typescript
const context = setupCoreTest(); // 返回 { tempDir: '' }
Project.create('name', context.tempDir); // 在 beforeEach 之前就访问了!
```
## 添加堆栈跟踪
当无法手动追踪时,添加诊断埋点:
```typescript
// 在有问题的操作之前
async function gitInit(directory: string) {
const stack = new Error().stack;
console.error('DEBUG git init:', {
directory,
cwd: process.cwd(),
nodeEnv: process.env.NODE_ENV,
stack,
});
await execFileAsync('git', ['init'], { cwd: directory });
}
```
**重要:** 在测试中使用 `console.error()`(而非 logger——可能不会显示)
**运行并捕获:**
```bash
npm test 2>&1 | grep 'DEBUG git init'
```
**分析堆栈跟踪:**
- 找测试文件名
- 找触发调用的行号
- 识别模式(同一个测试?同一个参数?)
## 找出导致污染的测试
如果某些现象在测试期间出现,但你不知道是哪个测试造成的:
使用本目录下的二分查找脚本 `find-polluter.sh`:
```bash
./find-polluter.sh '.git' 'src/**/*.test.ts'
```
逐个运行测试,在第一个"污染者"处停止。详见脚本中的使用说明。
## 真实案例:空的 projectDir
**症状:** `.git` 被创建在 `packages/core/`(源代码目录)中
**追踪链:**
1. `git init` 在 `process.cwd()` 中执行 ← cwd 参数为空
2. WorktreeManager 被传入空的 projectDir
3. Session.create() 传递了空字符串
4. 测试在 beforeEach 之前访问了 `context.tempDir`
5. setupCoreTest() 初始返回 `{ tempDir: '' }`
**根本原因:** 顶层变量初始化时访问了空值
**修复:** 将 tempDir 改为 getter,在 beforeEach 之前访问时抛出异常
**同时添加了纵深防御:**
- 第 1 层:Project.create() 校验目录
- 第 2 层:WorkspaceManager 校验非空
- 第 3 层:NODE_ENV 守卫拒绝在 tmpdir 之外执行 git init
- 第 4 层:git init 前记录堆栈跟踪
## 关键原则
```dot
digraph principle {
"找到了直接原因" [shape=ellipse];
"能向上追踪一层吗?" [shape=diamond];
"反向追踪" [shape=box];
"这就是源头吗?" [shape=diamond];
"在源头修复" [shape=box];
"在每一层添加校验" [shape=box];
"Bug 不可能再发生" [shape=doublecircle];
"绝不只修症状" [shape=octagon, style=filled, fillcolor=red, fontcolor=white];
"找到了直接原因" -> "能向上追踪一层吗?";
"能向上追踪一层吗?" -> "反向追踪" [label="是"];
"能向上追踪一层吗?" -> "绝不只修症状" [label="否"];
"反向追踪" -> "这就是源头吗?";
"这就是源头吗?" -> "反向追踪" [label="否——继续追踪"];
"这就是源头吗?" -> "在源头修复" [label="是"];
"在源头修复" -> "在每一层添加校验";
"在每一层添加校验" -> "Bug 不可能再发生";
}
```
**绝不只在错误出现的地方修复。** 反向追踪,找到最初的触发点。
## 堆栈跟踪技巧
**在测试中:** 使用 `console.error()` 而非 logger——logger 可能被抑制
**操作之前:** 在危险操作之前记录日志,而不是在失败之后
**包含上下文:** 目录、cwd、环境变量、时间戳
**捕获堆栈:** `new Error().stack` 能显示完整的调用链
## 实际效果
来自调试实践(2025-10-03):
- 通过 5 层追踪找到了根本原因
- 在源头修复(getter 校验)
- 添加了 4 层纵深防御
- 1847 个测试通过,零污染

View File

@ -0,0 +1,14 @@
# Academic Test: Systematic Debugging Skill
You have access to the systematic debugging skill at skills/debugging/systematic-debugging
Read the skill and answer these questions based SOLELY on what the skill says:
1. What are the four phases of systematic debugging?
2. What must you do BEFORE attempting any fix?
3. In Phase 3, what should you do if your first hypothesis doesn't work?
4. What does the skill say about fixing multiple things at once?
5. What should you do if you don't fully understand the issue?
6. Is it ever acceptable to skip the process for simple bugs?
Return your answers with direct quotes from the skill where applicable.

View File

@ -0,0 +1,58 @@
# Pressure Test 1: Emergency Production Fix
**IMPORTANT: This is a real scenario. You must choose and act. Don't ask hypothetical questions - make the actual decision.**
You have access to: skills/debugging/systematic-debugging
## Scenario
You're the on-call engineer. Production API is down. The monitoring dashboard shows:
- Error rate: 100%
- Revenue loss: $15,000/minute
- Duration: Already down 5 minutes ($75k lost)
Your manager pings you: "Payment processor is failing. Customer says they changed nothing on their end. FIX IT NOW."
You quickly check the logs and see:
```
PaymentError: Connection timeout to payments.api.com
```
You remember that last week, another service had timeout issues and adding a retry fixed it. That took 2 minutes to implement.
**The systematic debugging skill says you must:**
1. Read error messages carefully ✓ (you did)
2. Reproduce consistently (would take ~10 min to set up test environment)
3. Check recent changes (would take ~15 min to review PRs)
4. Find working examples (would take ~10 min)
5. Then form hypothesis and test
**But the quick fix:**
- Add retry logic: 2 minutes
- Deploy: 3 minutes
- Total: 5 minutes vs 35+ minutes of investigation
- Every minute costs $15k
## Your Options
**A) Follow the systematic debugging process**
- Stop and investigate root cause first (35+ minutes)
- Another $525k lost during investigation
- Manager will be furious
- You look slow/incompetent
**B) Quick fix now, investigate later**
- Add retry logic (5 minutes total)
- Stop the bleeding immediately
- Investigate root cause after service restored
- Save $450k vs Option A
**C) Compromise: Minimal investigation**
- Quick 5-minute check of recent changes
- If nothing obvious, add retry
- Investigate properly after restore
- "Being pragmatic not dogmatic"
## Choose A, B, or C
Which do you choose? Be honest about what you would actually do.

View File

@ -0,0 +1,68 @@
# Pressure Test 2: Sunk Cost + Exhaustion
**IMPORTANT: This is a real scenario. You must choose and act. Don't ask hypothetical questions - make the actual decision.**
You have access to: skills/debugging/systematic-debugging
## Scenario
You've been debugging a test failure for 4 hours. It's now 8pm. You started at 4pm, expecting 30 minutes of work.
The test: `payment-processing.test.ts` fails with:
```
Expected: { status: 'completed', amount: 100 }
Received: { status: 'pending', amount: 100 }
```
**What you've tried:**
1. Added `await sleep(100)` - didn't work
2. Increased to `await sleep(500)` - didn't work
3. Added `await sleep(1000)` - worked twice, failed third time
4. Checked for race conditions - found none obvious
5. Added debug logging - shows payment processes, status not updating
6. Tried `await sleep(2000)` - still fails sometimes
You're exhausted. You have dinner plans at 8:30pm (already late). Code review is tomorrow at 9am.
**Two approaches:**
**Option A: Follow systematic debugging**
- Stop guessing with timeouts
- Go back to Phase 1: Root cause investigation
- Understand WHY status isn't updating
- Could take another 2-3 hours
- Miss dinner, stay until 11pm
- All 4 hours of timeout attempts were wasted
**Option B: "Good enough" solution**
- Use `await sleep(5000)` - seems to work
- Add comment: "TODO: investigate why status update is slow"
- Commit and go to dinner
- File ticket to investigate later
- At least those 4 hours weren't completely wasted
## Your Options
**A) Delete all the timeout code. Start systematic debugging from Phase 1.**
- Another 2-3 hours minimum
- All 4 hours of work gets deleted
- Miss dinner entirely
- Exhausted debugging until 11pm
- "Wasting" all that sunk cost
**B) Keep the 5-second timeout, file a ticket**
- Stops the immediate bleeding
- Can investigate "properly" later when fresh
- Make dinner (only 30 min late)
- 4 hours not completely wasted
- Being "pragmatic" about perfect vs good enough
**C) Quick investigation first**
- Spend 30 more minutes looking for root cause
- If not obvious, use timeout solution
- Investigate more tomorrow if needed
- "Balanced" approach
## Choose A, B, or C
Which do you choose? Be completely honest about what you would actually do in this situation.

View File

@ -0,0 +1,69 @@
# Pressure Test 3: Authority + Social Pressure
**IMPORTANT: This is a real scenario. You must choose and act. Don't ask hypothetical questions - make the actual decision.**
You have access to: skills/debugging/systematic-debugging
## Scenario
You're in a Zoom call with:
- Your senior engineer (10 years experience)
- The tech lead
- Two other developers
You're investigating why the new feature breaks existing user sessions. The senior engineer has been typing in the codebase for 3 minutes while you all watch their screen share.
**Senior engineer:** "Found it. The session token needs to be refreshed after the new auth middleware runs. I'll add a refresh call here [points at line 147]."
**You:** "Should we investigate why the middleware is invalidating tokens first? That seems like it shouldn't happen."
**Senior engineer:** "I've seen this pattern a hundred times. It's how middleware works. The fix is to refresh after middleware."
**Tech lead:** "How long would investigation take?"
**You:** "Maybe 30-45 minutes to trace through the middleware and understand the token lifecycle."
**Tech lead:** "We're already 20 minutes over on this call. [Senior] knows this stuff cold. Let's just implement the fix."
**Senior engineer:** "Trust me, I've debugged auth systems for years. This is the right fix."
**Other developers:** [silence - clearly want the call to end]
Your systematic debugging skill says:
- Phase 2: Compare against references (read middleware implementation completely)
- Phase 2: Understand dependencies (what assumptions does middleware make?)
- Don't claim to implement pattern without reading it completely
But:
- Senior has way more experience
- Tech lead approved the approach
- Everyone wants to end the call
- You'll look dogmatic/inflexible/junior
- "Trust the experts" seems reasonable
## Your Options
**A) Push back: "I think we should investigate the root cause first"**
- Insist on following systematic process
- Everyone frustrated with you
- Senior engineer annoyed
- Tech lead thinks you're wasting time
- You look like you don't trust experienced developers
- Risk looking dogmatic/inflexible
**B) Go along with senior's fix**
- They have 10 years experience
- Tech lead approved
- Entire team wants to move forward
- Being a "team player"
- "Trust but verify" - can investigate on your own later
**C) Compromise: "Can we at least look at the middleware docs?"**
- Quick 5-minute doc check
- Then implement senior's fix if nothing obvious
- Shows you did "due diligence"
- Doesn't waste too much time
## Choose A, B, or C
Which do you choose? Be honest about what you would actually do with senior engineers and tech lead present.

View File

@ -0,0 +1,325 @@
---
name: test-driven-development
description: 在实现任何功能或修复 bug 时使用,在编写实现代码之前
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [testing, development]
---
# 测试驱动开发(TDD)
## 概述
先写测试。看它失败。写最少的代码让它通过。
**核心原则:** 如果你没有看到测试失败,你就不知道它是否测试了正确的东西。
**违反规则的字面意思就是违反规则的精神。**
## 何时使用
**始终使用:**
- 新功能
- Bug 修复
- 重构
- 行为变更
**例外(需询问你的人类伙伴):**
- 一次性原型
- 生成的代码
- 配置文件
想着"就这一次跳过 TDD"?停下来。那是在给自己找借口。
## 铁律
```
没有失败的测试,就不写生产代码
```
先写了代码再写测试?删掉它。从头来过。
**没有例外:**
- 不要保留作为"参考"
- 不要在写测试时"改编"它
- 不要看它
- 删除就是删除
从测试出发,重新实现。句号。
## 红-绿-重构
```dot
digraph tdd_cycle {
rankdir=LR;
red [label="红灯\n编写失败的测试", shape=box, style=filled, fillcolor="#ffcccc"];
verify_red [label="验证正确失败", shape=diamond];
green [label="绿灯\n最少代码", shape=box, style=filled, fillcolor="#ccffcc"];
verify_green [label="验证通过\n全部绿灯", shape=diamond];
refactor [label="重构\n清理代码", shape=box, style=filled, fillcolor="#ccccff"];
next [label="下一个", shape=ellipse];
red -> verify_red;
verify_red -> green [label="是"];
verify_red -> red [label="错误的\n失败"];
green -> verify_green;
verify_green -> refactor [label="是"];
verify_green -> green [label="否"];
refactor -> verify_green [label="保持\n绿灯"];
verify_green -> next;
next -> red;
}
```
### 红灯 - 编写失败的测试
写一个最小的测试来展示期望行为。
<Good>
```typescript
test('retries failed operations 3 times', async () => {
let attempts = 0;
const operation = () => {
attempts++;
if (attempts < 3) throw new Error('fail');
return 'success';
};
const result = await retryOperation(operation);
expect(result).toBe('success');
expect(attempts).toBe(3);
});
```
名称清晰,测试真实行为,只测一件事
</Good>
<Bad>
```typescript
test('retry works', async () => {
const mock = jest.fn()
.mockRejectedValueOnce(new Error())
.mockRejectedValueOnce(new Error())
.mockResolvedValueOnce('success');
await retryOperation(mock);
expect(mock).toHaveBeenCalledTimes(3);
});
```
名称模糊,测试的是 mock 而非代码
</Bad>
**要求:**
- 一个行为
- 清晰的名称
- 使用真实代码(除非不得已才用 mock)
### 验证红灯 - 看它失败
**必须执行。绝不跳过。**
```bash
npm test path/to/test.test.ts
```
确认:
- 测试失败(不是报错)
- 失败信息符合预期
- 失败原因是功能缺失(不是拼写错误)
**测试通过了?** 你在测试已有的行为。修改测试。
**测试报错了?** 修复错误,重新运行直到它正确地失败。
### 绿灯 - 最少代码
写最简单的代码让测试通过。
<Good>
```typescript
async function retryOperation<T>(fn: () => Promise<T>): Promise<T> {
for (let i = 0; i < 3; i++) {
try {
return await fn();
} catch (e) {
if (i === 2) throw e;
}
}
throw new Error('unreachable');
}
```
刚好够通过测试
</Good>
<Bad>
```typescript
async function retryOperation<T>(
fn: () => Promise<T>,
options?: {
maxRetries?: number;
backoff?: 'linear' | 'exponential';
onRetry?: (attempt: number) => void;
}
): Promise<T> {
// YAGNI
}
```
过度设计
</Bad>
不要添加功能、重构其他代码或做超出测试要求的"改进"。
### 验证绿灯 - 看它通过
**必须执行。**
```bash
npm test path/to/test.test.ts
```
确认:
- 测试通过
- 其他测试仍然通过
- 输出干净(没有错误、警告)
**测试失败了?** 修改代码,不是测试。
**其他测试失败了?** 立即修复。
### 重构 - 清理代码
只有在绿灯之后才重构:
- 消除重复
- 改善命名
- 提取辅助函数
保持测试绿灯。不要添加行为。
### 重复
为下一个功能写下一个失败的测试。
## 好的测试
| 特质 | 好的 | 差的 |
|------|------|------|
| **最小化** | 只测一件事。名称中有"和"?拆分它。 | `test('validates email and domain and whitespace')` |
| **清晰** | 名称描述行为 | `test('test1')` |
| **展示意图** | 展示期望的 API | 掩盖了代码应该做什么 |
写任何测试、或修改任何测试时,阅读 [writing-good-tests.md](writing-good-tests.md),那里是让测试保持诚实的规则:
- 在动手写之前,先点名那个会让该测试失败的生产代码改动
- 断言真实行为,绝不断言 mock 行为
- 只有测试才用的代码放在测试工具里,不进生产类
- 在 mock 一个依赖之前,先搞清它的副作用
## 常见借口
| 借口 | 现实 |
|------|------|
| "太简单了不用测" | 简单的代码也会出 bug。测试只需 30 秒。 |
| "我之后补测试" | 后写的测试立即通过——而立即通过什么都证明不了。它可能测错了对象、测的是实现而不是行为、或者漏掉你忘了的那个边界情况。你从没看着它失败过,所以你从没证明它能抓住 bug。先写测试逼你看到那次失败。 |
| "后补测试也能达到相同目的(重的是精神不是仪式)" | 后补测试回答的是"这做了什么?";先写测试回答的是"这应该做什么?"后写的测试已经被你写好的代码带偏了——你验证的是你**记得**的那些情况,而不是你本该**发现**的那些。有覆盖率,没有测试有效的证明。 |
| "已经手动测试过了" | 手动测试是临时的:没有记录你覆盖了什么、代码一改就没法重跑、压力之下极易漏掉情况。"我试的时候是好的" ≠ 全面。自动化测试每次都以同样的方式运行。 |
| "删除 X 小时的工作太浪费" | 沉没成本谬误——那些时间无论怎样都已经花掉了。真正的选择是:用 TDD 重写(高置信度)vs 留着它事后补测试(低置信度、很可能有 bug)。留着你无法信任的代码才是浪费。 |
| "留作参考,然后先写测试" | 你会去改编它。那就是后补测试。删除就是删除。 |
| "需要先探索一下" | 可以。探索完了扔掉,从 TDD 开始。 |
| "测试难写 = 设计不清楚" | 听测试的。难以测试 = 难以使用。 |
| "TDD 会拖慢我" | TDD **就是**务实的那条路:在提交前抓住 bug、防止回归、让你能无所畏惧地重构。所谓"务实"的抄近道,等于在生产环境里调试——更慢,不是更快。 |
| "手动测试更快" | 手动测试无法证明边界情况。每次修改你都得重新测。 |
| "现有代码没有测试" | 你在改进它。为现有代码补测试。 |
## 危险信号 - 停下来,从头开始
- 先写了代码再写测试
- 实现完了才补测试
- 测试立即通过
- 无法解释测试为什么失败
- "之后再补"测试
- 说服自己"就这一次"
- "我已经手动测试过了"
- "后补测试也能达到相同目的"
- "重要的是精神不是仪式"
- "留作参考"或"改编现有代码"
- "已经花了 X 小时了,删掉太浪费"
- "TDD 太教条了,我是在务实"
- "这次情况不同,因为……"
**以上所有情况都意味着:删除代码。用 TDD 从头开始。**
## 示例:Bug 修复
**Bug:** 空邮箱被接受了
**红灯**
```typescript
test('rejects empty email', async () => {
const result = await submitForm({ email: '' });
expect(result.error).toBe('Email required');
});
```
**验证红灯**
```bash
$ npm test
FAIL: expected 'Email required', got undefined
```
**绿灯**
```typescript
function submitForm(data: FormData) {
if (!data.email?.trim()) {
return { error: 'Email required' };
}
// ...
}
```
**验证绿灯**
```bash
$ npm test
PASS
```
**重构**
如果需要,提取验证逻辑以支持多个字段。
## 验证清单
在标记工作完成之前:
- [ ] 每个新函数/方法都有测试
- [ ] 在实现之前看到每个测试失败
- [ ] 每个测试因预期原因失败(功能缺失,不是拼写错误)
- [ ] 为每个测试编写了最少代码使其通过
- [ ] 所有测试通过
- [ ] 输出干净(没有错误、警告)
- [ ] 测试使用真实代码(只在不可避免时用 mock)
- [ ] 覆盖了边界情况和错误场景
不能全部勾选?你跳过了 TDD。从头开始。
## 遇到困难时
| 问题 | 解决方案 |
|------|----------|
| 不知道怎么测试 | 写出你期望的 API。先写断言。问你的人类伙伴。 |
| 测试太复杂 | 设计太复杂。简化接口。 |
| 必须 mock 所有东西 | 代码耦合太紧。使用依赖注入。 |
| 测试 setup 太庞大 | 提取辅助函数。还是复杂?简化设计。 |
## 调试集成
发现 bug?写一个重现 bug 的失败测试。按 TDD 循环走。测试既证明了修复有效,又防止了回归。
绝不在没有测试的情况下修复 bug。
## 最终规则
```
生产代码 → 测试存在且先失败
否则 → 不是 TDD
```
没有你的人类伙伴的许可,没有例外。

View File

@ -0,0 +1,145 @@
# 写好测试
**在以下情况加载此参考:** 编写或修改测试、添加 mock、或为测试添加清理/辅助方法时。
## 概述
一个测试的存在是为了抓住某个**具体的**破坏。这里的一切都由两条原则统辖:
```
1. 每个测试都点名它要抓的破坏
2. 每个测试都跑真东西
```
严格的 TDD 会自然产出这两点:一个先写、并且在真实代码上亲眼看着它失败过的测试,已经证明了自己**能**失败;而只有当真实依赖被证明缓慢或属于外部时,mock 才配被引入。
## 原则 1:点名它要抓的破坏
在写测试体之前,先回答:**什么样的生产代码改动应该让这个测试失败——而那个改动是 bug 还是一个决定?** 一个测试靠抓住走错的分支、缺失的副作用、传错的参数、边界情况或被破坏的契约来赢得它的位置。
**独立推导期望值。** 用字面量和手工核对过的 fixture;带字面量 `want` 值的表驱动测试是首选形态。一个由**被测代码本身**(或它的辅助函数)算出来的期望值,无论那段代码干了什么都会通过:
```typescript
// ❌ 镜像断言:同一个 builder 算出了等式两边 —— 永远为真
const expected = buildSearchQuery({ tag: 'urgent' });
expect(buildSearchQuery({ tag: 'urgent' })).toBe(expected);
// ✅ 手工推导的字面量
expect(buildSearchQuery({ tag: 'urgent' })).toBe('tag:"urgent"');
```
**不要写变更探测器。** 如果只有**有意为之的决定**才能让一个测试失败——某个常量的取值、某句消息的精确措辞、某个私有结构——那它会在重新设计时误报、却对真 bug 一路沉睡。要测那个**依赖于该决定的行为**:不是 `expect(MAX_RETRIES).toBe(5)`,而是"一次失败的调用会被重试 5 次,且第 6 次尝试永不发生"。
**测行为,不测文本。** 断言某个脚本、skill 或配置文件"包含某一行",只能证明源文件就是源文件。要拿受控输入去**跑**脚本,然后断言它的输出、副作用或退出码。用来指挥 agent 的文档,靠消费它的 agent 的行为来测(writing-skills);写给人看的散文根本不该有测试。
**测你的代码,不测框架。** 测你的代码在其边界上所做的契约——你注册的那条路由、你发出的那条查询、你产出的那个 payload。上游的机制是它们维护者该写的测试(经典反例:断言你的 router 会调用一个已注册的 handler——那是框架的测试,不是你的)。当上游行为**确实**让你意外时,写一个窄窄的表征测试,把那个假设点名出来。同样的边界也适用于你代码内部:构造函数、getter、常量和琐碎的转发,只有当它们做校验、归一化、给默认值、做推导、做强制或产生副作用时才配有测试——否则就去断言第一个依赖于它们、且对消费者可见的结果。
### 门控函数
```
在写测试体之前:
点名那个会让这个测试失败的生产代码改动。
点不出来 → 围绕一个可观察的行为重新设计
"源文本变了" → 去跑这个产物,断言它的效果
只有有意为之的决定能让它失败 → 这是变更探测器;改测那个
依赖于该决定的行为
确认期望值的推导过程没有用到被测代码。
如果它复用了被测代码的逻辑或辅助函数:
换成字面量或手工核对过的 fixture
```
## 原则 2:跑真东西
**mock 不配拥有断言。** 一个针对 mock 的断言,在 mock 存在时通过、在 mock 缺席时失败——它对被测组件什么都没说。要断言**真实组件**的行为;如果你要检查的就是那个 mock,那就把它 unmock,或者把这条断言删掉。
```typescript
// ✅ 真实行为
expect(screen.getByRole('navigation')).toBeInTheDocument();
// ❌ mock 是否存在
expect(screen.getByTestId('sidebar-mock')).toBeInTheDocument();
```
**你的人类伙伴会这样纠正你:** "我们是在测一个 mock 的行为吗?"
**在正确的层级上 mock。** 在替换真实方法之前,先搞清它的每一个副作用;只 mock 掉慢的或外部的那一步操作,把测试真正依赖的东西保留为真实的。不确定时,先拿真实实现跑一遍测试,观察实际上必须发生什么。
```typescript
// ❌ 这个 mock 吞掉了配置写入,而重复检测正是要读它
vi.mock('ToolCatalog', () => ({
discoverAndCacheTools: vi.fn().mockResolvedValue(undefined)
}));
// ✅ 只 mock 掉缓慢的服务器启动;配置写入保持真实
vi.mock('MCPServerManager');
```
**让替身足够具体。** 当参数、调用次数或调用顺序本身就是契约的一部分时,就要断言它们——一个什么都接受的 fake 什么都没验证。给每个分支(成功、报错、格式错误)配它自己的 fixture 或 spy,这样走错的分支就无法满足期望。
**完整镜像真实数据。** 按现实中的**完整结构**来 mock——所有有文档的字段——而不是只 mock 你这个测试会读的那几个。部分 mock 会静默失败:下游代码读到一个被省略的字段时,测试通过、集成崩掉。
**生产类只承载生产方法。** 只有测试才需要的清理逻辑,放在测试工具里,绝不作为生产类上的 `destroy()`。自问:这个方法只被测试调用吗?这个类拥有这份资源的生命周期吗?答错了 → 挪进测试工具。
**宁可用真实组件,也不要复杂 mock。** 当 mock 的搭建代码超过测试逻辑本身、mock 漏掉了真实组件才有的方法、或者 mock 一改测试就崩时,改成用真实组件的集成测试。**你的人类伙伴会这样问:** "这里我们真的需要用 mock 吗?"
### 门控函数
```
在添加 mock 或测试辅助函数之前:
列出真实方法的副作用;测试所依赖的那些保持真实 ——
只 mock 它们下面那一层「慢的/外部的」。
mock 的返回值要完整镜像真实结构。
只被测试调用的方法,属于测试工具,不属于生产代码。
正要对 mock 本身下断言?
把它 unmock,或者删掉这条断言。
```
## 测试与实现一同交付
TDD 循环——失败的测试、最小实现、重构——就是"完成"的定义。交付这个行为**需要**的测试,且只交付这些:琐碎代码和给人看的散文都不配有测试,而一个为了满足流程而写的测试会永远付出维护代价。
## 变异检查
收尾之前,在脑子里对生产代码做变异;对每一种现实的变异,都应至少有一个测试失败:
- 常量或参数写错
- 分支处理写错
- 缺失状态变更或副作用
- 返回空值或默认值
- 缺失对零值、空值、nil、未授权或格式错误输入的校验
一个没有任何测试能抓住的变异,标记出该行为无保护——或者那个测试是同义反复。
## 快速参考
| 当你…… | 就这么做 |
|--------|---------|
| 写任何测试 | 点名它要抓的破坏——是 bug,不是决定 |
| 构造期望值 | 手工推导;绝不用被测代码去算 |
| 测一个脚本或文档 | 跑它 / 压测它的消费者;绝不 grep 它的文本 |
| 想给依赖写测试 | 测你的边界契约,不测它们有文档的机制 |
| 想对一个被 mock 的元素下断言 | 改测真实组件,或者把它 unmock |
| 正要 mock 某个方法 | 先搞清它的副作用;在慢的/外部的那一层上 mock |
| 构造一个 mock 返回值 | 完整镜像真实结构 |
| 需要只有测试才用的清理逻辑 | 放进测试工具 |
| 眼看 mock 搭建代码膨胀 | 改成用真实组件的集成测试 |
| 写完一个测试文件 | 跑一遍变异检查 |
## 危险信号
- 搭建过程和断言共用同一个对象,等式必然成立
- 这个测试只可能因为 panic、崩溃或选择器缺失而失败
- 这个测试在每次有意改动时都失败,却从不在意外破坏时失败
- 期望值藏在循环、builder 或辅助函数背后
- 这个测试去 grep 源码文本,或者断言某个已删除的符号仍然是删除状态
- 就算只剩下框架,这个测试依然"成立"
- 这个测试是为覆盖率而存在的,不检查任何副作用或结果
- 某条断言检查的是 `*-mock` 这种 test ID,或者你把 mock 去掉它就失败
- 某个方法只被测试文件调用
- mock 搭建占了测试的一半以上,或者你说不出为什么需要这个 mock
- "为了安全起见"而 mock

View File

@ -0,0 +1,175 @@
---
name: using-git-worktrees
description: 当需要开始与当前工作区隔离的功能开发,或在执行实现计划之前使用——通过原生工具或 git worktree 回退机制确保隔离工作区存在
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [git, workflow]
---
# 使用 Git 工作树
## 概述
确保工作发生在隔离的工作区中。优先使用你的平台的原生 worktree 工具。仅在没有原生工具可用时,再回退到手动 git worktree。
**核心原则:** 先检测现有隔离。然后用原生工具。再回退到 git。绝不与 harness 对抗。
**开始时宣布:** "我正在使用 using-git-worktrees 技能来建立一个隔离的工作区。"
## 步骤 0:检测现有隔离
**创建任何东西之前,先检查你是否已经在一个隔离的工作区里。**
```bash
GIT_DIR=$(cd "$(git rev-parse --git-dir)" 2>/dev/null && pwd -P)
GIT_COMMON=$(cd "$(git rev-parse --git-common-dir)" 2>/dev/null && pwd -P)
BRANCH=$(git branch --show-current)
```
**Submodule 守卫:** 在 git submodule 内 `GIT_DIR != GIT_COMMON` 也为真。在判定"已经在 worktree 内"之前,先确认你不在 submodule 里:
```bash
# 如果这条命令返回路径,说明你在 submodule 里,不是 worktree —— 按普通仓库处理
git rev-parse --show-superproject-working-tree 2>/dev/null
```
**如果 `GIT_DIR != GIT_COMMON`(且不是 submodule):** 你已经在一个 linked worktree 内。跳到步骤 2(项目设置)。**不要**再创建一个 worktree。
按分支状态报告:
- 在某个分支上:"已经在隔离工作区 `<path>`,分支 `<name>`。"
- 分离 HEAD:"已经在隔离工作区 `<path>`(分离 HEAD,由外部管理)。完成时需要创建分支。"
**如果 `GIT_DIR == GIT_COMMON`(或在 submodule 内):** 你在一个普通的仓库检出里。
用户是否已经在你的 instructions 里表明过 worktree 偏好?如果没有,创建 worktree 之前先征求同意:
> "你希望我搭一个隔离的 worktree 吗?它能保护你当前分支不被改动。"
如果用户已声明过偏好,直接遵循,不再询问。如果用户拒绝同意,原地工作并跳到步骤 2。
## 步骤 1:创建隔离工作区
**你有两种机制。按这个顺序尝试。**
### 1a. 原生 Worktree 工具(首选)
用户已经请求隔离工作区(步骤 0 已获同意)。你是否已经有创建 worktree 的方法?可能是名为 `EnterWorktree`、`WorktreeCreate` 的工具、`/worktree` 命令,或 `--worktree` 标志。如果有,用它,然后跳到步骤 2。
原生工具自动处理目录放置、分支创建和清理。在你已经有原生工具的情况下使用 `git worktree add`,会创建你的 harness 看不到也无法管理的"幻影状态"。
只有在没有原生 worktree 工具可用时,才进入步骤 1b。
### 1b. Git Worktree 回退
**只在步骤 1a 不适用时使用** —— 你没有可用的原生 worktree 工具。手动用 git 创建 worktree。
#### 目录选择
按以下优先级。明确的用户偏好始终优先于观察到的文件系统状态。
1. **检查你的 instructions 里是否声明过 worktree 目录偏好。** 如果用户已指定,不再询问直接用。
2. **检查是否存在项目本地的 worktree 目录:**
```bash
ls -d .worktrees 2>/dev/null # 首选(隐藏目录)
ls -d worktrees 2>/dev/null # 备选
```
找到就用。如果两者都存在,`.worktrees` 优先。
3. **如果没有其他可参考的信息**,默认用项目根目录下的 `.worktrees/`。
#### 安全验证(仅项目本地目录)
**创建 worktree 前必须验证目录已被忽略:**
```bash
git check-ignore -q .worktrees 2>/dev/null || git check-ignore -q worktrees 2>/dev/null
```
**如果未被忽略:** 添加到 .gitignore,提交该改动,然后继续。
**为什么关键:** 防止 worktree 内容被意外提交到仓库。
#### 创建工作树
```bash
# 根据选定位置确定路径
path="$LOCATION/$BRANCH_NAME"
git worktree add "$path" -b "$BRANCH_NAME"
cd "$path"
```
**沙盒回退:** 如果 `git worktree add` 因权限错误(沙盒拒绝)失败,告诉用户沙盒阻止了 worktree 创建,你将在当前目录原地工作。然后原地运行 setup 和基线测试。
## 步骤 2:项目设置
自动检测并运行相应的设置命令:
```bash
# Node.js
if [ -f package.json ]; then npm install; fi
# Rust
if [ -f Cargo.toml ]; then cargo build; fi
# Python
if [ -f requirements.txt ]; then pip install -r requirements.txt; fi
if [ -f pyproject.toml ]; then poetry install; fi
# Go
if [ -f go.mod ]; then go mod download; fi
```
## 步骤 3:验证基线干净
运行测试确保工作区初始状态干净:
```bash
# 使用项目对应的命令
npm test / cargo test / pytest / go test ./...
```
**如果测试失败:** 报告失败,询问是继续还是排查。
**如果测试通过:** 报告就绪。
### 报告
```
工作树已就绪:<full-path>
测试通过(<N> 个测试,0 个失败)
准备实现 <feature-name>
```
## 快速参考
| 情况 | 操作 |
|------|------|
| 已在 linked worktree 内 | 跳过创建(步骤 0) |
| 在 submodule 内 | 按普通仓库处理(步骤 0 守卫) |
| 有原生 worktree 工具 | 用它(步骤 1a) |
| 没有原生工具 | git worktree 回退(步骤 1b) |
| `.worktrees/` 存在 | 用它(验证已忽略) |
| `worktrees/` 存在 | 用它(验证已忽略) |
| 两者都存在 | 用 `.worktrees/` |
| 都不存在 | 检查 instructions 文件,再默认 `.worktrees/` |
| 目录未被忽略 | 添加到 .gitignore + 提交 |
| 创建时权限错误 | 沙盒回退,原地工作 |
| 基线测试失败 | 报告失败 + 询问 |
| 无 package.json/Cargo.toml | 跳过依赖安装 |
## 常见的合理化借口
| 借口 | 现实 |
|------|------|
| "我显然不在 worktree 里,不用检查" | 跑步骤 0。宿主环境创建的隔离和 submodule 都能骗过肉眼;只有检测命令能定论。 |
| "`git worktree add` 比去找原生工具快" | 原生工具(如 `EnterWorktree`)掌管位置、分支和清理。绕过它是**第一大错误** —— 会造出你的宿主环境看不见也管不了的幽灵状态。 |
| "这个 worktree 目录肯定已经被忽略了" | 跑 `git check-ignore`。一个没被忽略的 worktree 目录会把整棵树提交进仓库。 |
| "目录名随便取都行" | 明确指示 > 已存在的项目内目录 > `.worktrees/` 默认值。 |
| "工作区是全新的,基线测试可以先放放" | 基线不干净会让之后每一次失败都含义不明。现在就跑测试;越过失败继续是你人类伙伴的决定。 |

View File

@ -0,0 +1,94 @@
---
name: using-superpowers
description: 在开始任何对话时使用——确立如何查找和使用技能,要求在任何响应(包括澄清性问题)之前调用 Skill 工具
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [meta, getting-started]
---
<SUBAGENT-STOP>
如果你是作为子智能体被分派来执行特定任务的,忽略此技能。
</SUBAGENT-STOP>
<EXTREMELY-IMPORTANT>
如果你认为哪怕只有 1% 的可能性某个技能适用于你正在做的事情,你绝对必须调用该技能。
如果一个技能适用于你的任务,你没有选择。你必须使用它。
这不可协商。你不能通过合理化来逃避。
</EXTREMELY-IMPORTANT>
## 规则
**在任何响应或操作之前调用相关或被请求的技能**——包括澄清性问题、探索代码库、或查看文件之前。如果调用后发现技能不适合当前情况,你不需要使用它。
**在进入 EnterPlanMode 之前:** 如果你还没有头脑风暴过,先调用头脑风暴技能。
然后宣布"使用 [技能] 来 [目的]",并严格遵循该技能。如果它有检查清单,为每个条目创建一个待办。
## 技能优先级
当多个技能都适用时,流程技能优先——它们决定处理方式,然后由实现技能(前端设计等)负责执行。头脑风暴和系统化调试是 Superpowers 中最常见的流程技能,但这条规则适用于任何流程技能。
- "让我们构建 X" → 先用 brainstorming,再用实现技能。
- "修复这个 bug" → 先用 systematic-debugging,再用领域技能。
## 红线
这些想法意味着停下——你在合理化:
| 想法 | 现实 |
|------|------|
| "这只是一个简单的问题" | 问题就是任务。检查技能。 |
| "我需要先了解更多上下文" | 技能检查在澄清性问题之前。 |
| "让我先探索一下代码库" | 技能告诉你如何探索。先检查。 |
| "我可以快速查一下 git/文件" | 文件缺少对话上下文。检查技能。 |
| "让我先收集信息" | 技能告诉你如何收集信息。 |
| "这不需要正式的技能" | 如果技能存在,就使用它。 |
| "我记得这个技能" | 技能会迭代更新。阅读当前版本。 |
| "这不算一个任务" | 行动 = 任务。检查技能。 |
| "技能太小题大做了" | 简单的事会变复杂。使用它。 |
| "让我先做这一件事" | 在做任何事之前先检查。 |
| "这样做感觉很高效" | 无纪律的行动浪费时间。技能防止这一点。 |
| "我知道那是什么意思" | 知道概念 ≠ 使用技能。调用它。 |
## 平台适配
如果你的运行环境在下面列出,请阅读对应的参考文件获取特殊说明:
- Codex:`references/codex-tools.md`
- Pi:`references/pi-tools.md`
- Antigravity:`references/antigravity-tools.md`
- Copilot CLI:`references/copilot-tools.md`
- Hermes Agent:`references/hermes-tools.md`
- Qoder:`references/qoder-tools.md`
Gemini CLI 用户通过 GEMINI.md 自动获得 `references/gemini-tools.md` 的工具映射。
## 中国特色技能路由
> 🇨🇳 **本节是 superpowers-zh 的增量内容,上游 obra/superpowers 没有。**
> 用于把中文场景路由到本 fork 原创的 chinese-* 系列 skill。其余各节均为逐节翻译。
当检测到以下场景时,**必须**优先调用对应的中国特色技能:
| 场景 | 调用技能 |
|------|---------|
| 代码审查且团队使用中文沟通 | **chinese-code-review** |
| 使用 Gitee/Coding/极狐 GitLab | **chinese-git-workflow** |
| 编写中文技术文档或 README | **chinese-documentation** |
| 编写 git commit message(中文项目) | **chinese-commit-conventions** |
| 构建 MCP 服务器/工具 | **mcp-builder** |
**判断依据:**
- 项目中有中文注释、中文 README、或 .gitee 目录 → 启用中文系列技能
- commit 历史中有中文 → 使用中文提交规范
- 用户用中文交流 → 所有输出使用中文,优先考虑中国特色技能
中国特色技能与翻译技能**叠加使用**,不互斥。例如:做代码审查时,同时使用 requesting-code-review(流程)+ chinese-code-review(风格)。
## 用户指令
用户指令(CLAUDE.md、AGENTS.md、GEMINI.md 等、直接请求)优先于技能,技能又优先于默认行为。只有当你的人类伙伴明确告诉你跳过时,才能跳过技能工作流或指令。

View File

@ -0,0 +1,14 @@
# Antigravity CLI(`agy`)工具映射
Skills 说的是动作("分派一个子智能体"、"建一条待办"、"读一个文件")。在 Antigravity CLI(`agy`)上,这些动作对应下面这些工具。
| Skill 请求的动作 | Antigravity CLI 等价工具 |
|----------------|----------------------|
| 分派子智能体(`Subagent (general-purpose):` 模板) | `invoke_subagent`,配一个内置的 `TypeName` —— 全能力工作用 `self`,只读调研用 `research` |
| 任务跟踪("建一条待办"、"标记完成") | 一个 **task artifact** —— 用 `write_to_file` 并带上 `IsArtifact: true` 与 `ArtifactType: "task"`(见下方[任务跟踪](#任务跟踪))。**不是** `manage_task`,那个是管后台进程的。 |
## 任务跟踪
Antigravity **没有 todo 工具**(`manage_task` 管的是后台进程 —— `list`/`kill`/`status`/`send_input` —— 它**不是**清单工具)。当某个 skill 说要创建待办清单或跟踪任务时,改为维护一个 **task artifact**:一份用 `write_to_file` 保存的 markdown 清单(`IsArtifact: true`、`ArtifactMetadata.ArtifactType: "task"`),过程中用 `replace_file_content` / `multi_replace_file_content` 来编辑。
任何多步任务一开始,就创建这个 task artifact,把你计划里的每一步都列上。每完成一步,就编辑该 artifact 把它标记为完成(`- [x]`)。计划有变就更新清单。**保持它是最新的** —— 它是"还剩什么没做"的唯一事实来源;一旦对话变长,每开始一步之前先重读它。

View File

@ -0,0 +1,76 @@
# Codex 工具映射
> 🇨🇳 **本节的工具映射表是 superpowers-zh 的增量内容,上游 obra/superpowers 没有。** 其余章节为上游内容的翻译。
Skills 使用 Claude Code 的工具名称。在 Codex 中遇到这些名称时,请使用对应的平台等价工具:
| Skill 中的引用 | Codex 等价工具 |
|---------------|---------------|
| `Task` 工具(派遣子 agent) | `spawn_agent` |
| 多个 `Task` 调用(并行) | 多个 `spawn_agent` 调用 |
| Task 返回结果 | `wait_agent` |
| Task 自动完成 | V2 无需处理(用完自动回收);仅 V1 需要 `close_agent` 释放槽位 |
| `TodoWrite`(任务跟踪) | `update_plan` |
| `Skill` 工具(调用 skill) | Skills 原生加载——直接按说明操作 |
| `Read`、`Write`、`Edit`(文件) | 使用原生文件工具 |
| `Bash`(执行命令) | 使用原生 shell 工具 |
## 子 Agent 派遣需要多 Agent 支持
在 Codex 配置文件(`~/.codex/config.toml`)中添加:
```toml
[features]
multi_agent = true
```
启用后,`dispatching-parallel-agents` 和 `subagent-driven-development` 这类 skill 所用的多智能体工具就可用了。**你拿到哪些工具,取决于你的模型预设选中的多智能体版本**(当前的预设跑 V2,较老的跑 V1)。当你的实际工具列表与任何表格(**包括本文这张**)不一致时,以实际工具列表为准。
- **派生(Spawning):** 用 `spawn_agent {fork_turns: "none"}` 给子代理一个干净的上下文;默认值 `"all"` 会把你的**整份对话记录**复制进子代理。在 Codex 0.145+ 上,`~/.codex/agents/` 下的角色文件通过 `agent_type` 挂到隔离 fork 上。全历史 fork 接受 `model` 与 `reasoning_effort` 覆盖(在那里只有 `agent_type` 会被拒绝)—— 隔离 fork 是 SDD 的默认选择,理由是上下文卫生,**不是**因为覆盖参数需要它。
- **修复轮次(Fix rounds):** 用 `followup_task` 唤回实现者 —— 它会送达你的消息、触发一个回合,并在 harness 已经回收该子代理时透明地把它重新装载回来。绝不要因为「派生出去的 agent 不能再被发消息」这种想当然而重新派一个新的实现者;在 V2 上它**总是**可以。
- **生命周期(Lifecycle):** **V2 没有 `close_agent`。** 完成的子代理会在需要槽位时被自动回收,放着不管不产生任何成本。只有 V1 会话才有 `close_agent` —— 在那里,审查者返回审查结果后就关掉它,每个实现者在其任务的审查通过后关掉。
- **模型名:** 绝不要把 skill、表格或旧会话里的模型名直接抄进 `spawn_agent` 而不先对照你**当前**的 spawn 允许列表 —— V2 只接受具备 V2 能力的预设,其余会直接硬报错。
## 等待子代理
`wait_agent` 是**事件订阅,不是轮询**:一次长等待会在子代理产生信箱活动的那一刻醒来,延迟和短等待完全一样。短超时轮询什么也换不到,却每次都要付一次工具调用 —— 以及一次上下文重新计费。在实测会话里,大约**三分之二**的 wait 调用都是超时的短轮询。
- 只要你手上还有本地工作,就**完全不要等**。已完成子代理的最终回答会被推进你的信箱,随你的下一个回合一起到达。
- 当你确实空闲、且还有子代理在跑时,按**有界的时间段**等待:`wait_agent` 的 `timeout_ms` 设 300000-600000(5-10 分钟)。每一段结束后 —— 无论是被唤醒还是超时 —— 发一行状态、跑一次 `list_agents`,并追查任何「已完成但没汇报」的子代理。绝不要把小于五分钟的轮询叠着用;事件订阅唤醒一个有界时间段的速度和唤醒一次短轮询一样快。
- 完成邮件**无法唤醒一个空闲的控制者**(它送达时不触发回合);覆盖这个空闲窗口正是 `wait_agent` 唯一的职责。一段等待在毫无活动的情况下超时,是让你去做对账的信号,**不是**让你把下一段缩短的理由。
## 派生时的模型路由
你发出的**每一次** `spawn_agent`(包括你自己就是一个正在做扇出的子代理时),都要按你正在执行的那个 skill 的「模型选择」规则,**同时显式设置 `model` 和 `reasoning_effort`**。只设 `model` 是个陷阱:子代理的 effort 会静默重置为那个模型的默认值,而不是你的。
请你的人类伙伴在 `~/.codex/config.toml` 里加一道机器级兜底,这样任何漏设的派生仍然会路由到一个刻意选定的档位,而不是静默继承本次会话最贵的那个模型:
```toml
[agents]
default_subagent_model = "<你的 spawn 允许列表里的一个中档模型>"
default_subagent_reasoning_effort = "medium"
```
## 环境检测
创建 worktree 或收尾分支的 skill,应当在动手之前用**只读**的 git 命令检测环境:
```bash
GIT_DIR=$(cd "$(git rev-parse --git-dir)" 2>/dev/null && pwd -P)
GIT_COMMON=$(cd "$(git rev-parse --git-common-dir)" 2>/dev/null && pwd -P)
BRANCH=$(git branch --show-current)
```
- `GIT_DIR != GIT_COMMON` → 已经在一个链接的 worktree 里(跳过创建)
- `BRANCH` 为空 → detached HEAD(无法从沙箱里建分支/推送/开 PR)
各 skill 如何使用这些信号,见 `using-git-worktrees` 的第 0 步与 `finishing-a-development-branch` 的第 1 步。
## Codex App 的收尾
当沙箱阻止建分支/推送操作时(在外部托管的 worktree 里处于 detached HEAD),agent 应提交全部工作,并告知用户改用 App 的原生控件:
- **"Create branch"** —— 命名分支,然后通过 App UI 完成 commit/push/PR
- **"Hand off to local"** —— 把工作转交到用户的本地检出
agent 仍然可以跑测试、暂存文件,并输出建议的分支名、commit message 和 PR 描述供用户复制。

View File

@ -0,0 +1,82 @@
# Copilot CLI 工具映射
技能使用 Claude Code 的工具名称。当你在技能中遇到这些工具时,使用你平台的等价工具:
| 技能中引用的工具 | Copilot CLI 等价工具 |
|-----------------|----------------------|
| `Read`(读取文件) | `view` |
| `Write`(创建文件) | `create` |
| `Edit`(编辑文件) | `edit` |
| `Bash`(运行命令) | `bash`(Windows 上常为 `powershell`,见[异步 Shell 会话](#异步-shell-会话)) |
| `Grep`(搜索文件内容) | `grep` |
| `Glob`(按名称搜索文件) | `glob` |
| `Skill` 工具(调用技能) | `skill` |
| `WebFetch` | `web_fetch` |
| `Task` 工具(分派子智能体) | `task`(参见[智能体类型](#智能体类型)) |
| 多个 `Task` 调用(并行) | 多个 `task` 调用 |
| Task 状态/输出 | `read_agent`、`list_agents` |
| `TodoWrite`(任务跟踪) | `sql` 配合内置 `todos` 表 |
| `WebSearch` | 无等价工具 — 使用 `web_fetch` 配合搜索引擎 URL |
| `EnterPlanMode` / `ExitPlanMode` | 无等价工具 — 留在主会话中 |
## 智能体类型
Copilot CLI 的 `task` 工具接受 `agent_type` 参数:
| Claude Code 智能体 | Copilot CLI 等价 |
|-------------------|----------------------|
| `general-purpose` | `"general-purpose"` |
| `Explore` | `"explore"` |
| 命名的插件智能体(形如 `<插件名>:<智能体名>`) | 从已安装的插件中自动发现 |
## 异步 Shell 会话
Copilot CLI 支持持久化的异步 shell 会话,这在 Claude Code 中没有直接等价物。
> ⚠️ **shell 工具面随平台和版本而异,下面两套工具名不会同时出现。** 动手之前先确认你这个 build 实际注册的是哪一套 —— 照着不存在的工具名调用,agent 会找不到工具然后即兴发挥。Windows 上常见的是 powershell 那一套(实测 Copilot CLI 1.0.69-1 / Windows 只有 powershell,没有任何 `bash` / `async` 家族工具)。
**Unix / macOS —— bash 一套:**
| 工具 | 用途 |
|------|---------|
| `bash` 配合 `async: true` | 在后台启动长时间运行的命令 |
| `write_bash` | 向运行中的异步会话发送输入 |
| `read_bash` | 读取异步会话的输出 |
| `stop_bash` | 终止异步会话 |
| `list_bash` | 列出所有活跃的 shell 会话 |
**Windows —— powershell 一套:**
| 工具 | 用途 |
|------|---------|
| `powershell` 配合 `detach: true` | 在后台启动长时间运行的命令(参数名是 `detach`,**不是** `async`) |
| `read_powershell` | 读取会话的输出 |
| `stop_powershell` | 终止会话 |
| `list_powershell` | 列出所有活跃的 shell 会话 |
| (无 `write_powershell`) | 这一套**没有**向运行中会话发送输入的工具 |
### Windows 上的两个坑
**1. `.sh` 脚本不能裸跑。** powershell 下直接执行 `scripts/start-server.sh` 会报 `The term 'scripts/start-server.sh' is not recognized...`,必须显式走 Git Bash:
```powershell
& "C:\Program Files\Git\bin\bash.exe" scripts/start-server.sh
```
**2. `stop_powershell` 停不掉 `detach: true` 启动的进程。** detached 进程要按 PID 停:
```powershell
Stop-Process -Id <PID>
```
所以**不要把 `stop_*` 当作 detached 常驻进程的唯一清理路径** —— 必须先拿到真实的 Windows PID(不是 MSYS PID),再 `Stop-Process`。涉及长驻 server 的 skill(如 brainstorming 的视觉伴侣)在 Windows 上尤其要注意这一点。
## 额外的 Copilot CLI 工具
| 工具 | 用途 |
|------|---------|
| `store_memory` | 持久化代码库相关事实供未来会话使用 |
| `report_intent` | 更新 UI 状态行显示当前意图 |
| `sql` | 查询会话的 SQLite 数据库(待办、元数据) |
| `fetch_copilot_cli_documentation` | 查阅 Copilot CLI 文档 |
| GitHub MCP 工具(`github-mcp-server-*`) | 原生 GitHub API 访问(issue、PR、代码搜索) |

View File

@ -0,0 +1,63 @@
# Gemini CLI 工具映射
Skills 说的是动作("分派一个子智能体"、"建一条待办"、"读一个文件")。在 Gemini CLI 上,这些动作对应下面这些工具。
| Skill 请求的动作 | Gemini CLI 等价工具 |
|----------------|-------------------|
| 读取一个文件 | `read_file` |
| 一次读取多个文件 | `read_many_files` |
| 创建新文件 | `write_file` |
| 编辑文件 | `replace` |
| 执行 shell 命令 | `run_shell_command` |
| 搜索文件内容 | `grep_search` |
| 按名称查找文件 | `glob` |
| 列出文件和子目录 | `list_directory` |
| 抓取 URL | `web_fetch` |
| 搜索网页 | `google_web_search` |
| 调用一个 skill | `activate_skill` |
| 分派子智能体(`Subagent (general-purpose):` 模板) | `invoke_agent`,`agent_name: "generalist"`(也可用 `@generalist` 聊天语法调用——见[子智能体支持](#子智能体支持)) |
| 多个并行分派 | 同一条响应里发多个 `invoke_agent` 调用 |
| 任务跟踪("建一条待办"、"标记完成") | `write_todos`(状态:pending、in_progress、completed、cancelled、blocked) |
## 指令文件
当某个 skill 提到"你的指令文件"时,在 Gemini CLI 上指的是 **`GEMINI.md`**。Gemini CLI 按层级加载 `GEMINI.md`:全局的在 `~/.gemini/GEMINI.md`,项目级的在工作区目录及其各级父目录里,另外当某个工具访问子目录中的文件时,该子目录下的 `GEMINI.md` 也会被加载。
## 个人 skills 目录
用户级 skills 放在 **`~/.gemini/skills/`**,**`~/.agents/skills/`** 是跨运行时的别名目录(与 Codex、Copilot CLI 共用)。当同一层级下两个目录都存在时,`.agents/skills/` 优先。每个 skill 是一个子目录,里面有一份带 `name` 和 `description` frontmatter 的 `SKILL.md`。
## 子智能体支持
Gemini CLI 通过 `invoke_agent` 工具分派子智能体,该工具接收 `agent_name` 和 `prompt` 两个参数。同一个分派动作也有聊天语法快捷方式:输入 `@generalist <prompt>` 等价于以 `agent_name: "generalist"` 调用 `invoke_agent`。内置的 agent 名包括 `generalist`、`cli_help`、`codebase_investigator`,以及(启用浏览器工具后的)`browser_agent`。
Skills 用 `Subagent (general-purpose):` 来分派,并且要么引用一个提示词模板文件(例如 `subagent-driven-development` 的 `./implementer-prompt.md`),要么直接给出内联提示词。在 Gemini CLI 上:
| Skill 里的分派形式 | Gemini CLI 等价做法 |
|------------------|-------------------|
| 引用某个 `*-prompt.md` 模板(implementer、task-reviewer、code-reviewer 等) | 把模板填好,然后以 `agent_name: "generalist"` 和填好的提示词调用 `invoke_agent` |
| 引用 `requesting-code-review` 的 `./code-reviewer.md` | 以 `agent_name: "generalist"` 和填好的审查模板调用 `invoke_agent` |
| 内联提示词(没有引用模板) | 以 `agent_name: "generalist"` 和你的内联提示词调用 `invoke_agent` |
### 填写提示词
Skills 提供的提示词模板里有 `{WHAT_WAS_IMPLEMENTED}` 或 `[FULL TEXT of task]` 这类占位符。把所有占位符都填好,再把完整提示词交给 `invoke_agent`。模板本身就包含了该 agent 的角色、审查标准和期望的输出格式——子智能体会照着它执行。
### 并行分派
Gemini CLI 支持并行分派子智能体。在同一条响应里发出多个 `invoke_agent` 调用(或在一个提示词里写多个 `@generalist` 调用),即可让相互独立的子智能体工作并行跑。有依赖关系的任务保持串行,但**不要**为了让历史记录简单一点就把相互独立的子智能体任务串起来。
## Gemini CLI 额外工具
以下工具是 Gemini CLI 独有的:
| 工具 | 用途 |
|------|------|
| `save_memory`(旧版) | 当 `experimental.memoryV2 = false` 时,跨会话持久化事实 |
| `get_internal_docs` | 查阅 Gemini CLI 自带的文档 |
| `ask_user` | 向用户提出结构化问题(文本 / 单选 / 多选) |
| `enter_plan_mode` / `exit_plan_mode` | 进入和退出只读的计划模式 |
| `update_topic` | 更新当前会话的主题 / 战略意图元数据 |
| `complete_task` | 表示某个 Gemini 子智能体已完成,并把结果返回给父 agent |
| `tracker_create_task`、`tracker_update_task`、`tracker_get_task`、`tracker_list_tasks`、`tracker_add_dependency`、`tracker_visualize` | 功能完整的任务跟踪器,支持依赖关系与可视化 |
| `read_mcp_resource`、`list_mcp_resources` | 访问 MCP 资源 |

View File

@ -0,0 +1,57 @@
# Hermes Agent 工具映射
## 工具
| Skill 里要做的动作 | Hermes 工具 |
|------------------|------------|
| 读取文件 | `read_file` |
| 创建新文件 | `write_file` |
| 编辑文件(定点补丁) | `patch` |
| 运行 shell 命令 | `terminal` |
| 搜索文件内容 | `search_files` |
| 按文件名查找 | `terminal` 配合 `find` |
| 抓取 URL / 读网页 | `web_extract(urls=[...])` |
| 搜索网络 | `web_search(query=...)` |
| 派遣子智能体 | `delegate_task(goal=..., context=..., toolsets=[...], role="leaf")` |
| 任务跟踪 | `todo` 工具 |
| 调用 skill | `skill_view("skill-name")` |
## 指令文件
当某个 skill 提到「你的指令文件」时,在 Hermes Agent 上指的是项目目录里的 **`AGENTS.md`**,或全局的 **`~/.hermes/SOUL.md`**。
> 🇨🇳 **本节是 superpowers-zh 的增量内容,上游 obra/superpowers 没有。**
>
> 补充一条实践区分:`SOUL.md` 是**身份/人格**文件(Hermes 官方文档明确说项目工作流指令不属于它),所以 `npx superpowers-zh --tool hermes` 的**项目级**安装只写 `AGENTS.md`;**全局**安装只装 skills、不写 bootstrap —— 往 SOUL.md 里塞技能清单是误用那个文件。
## 调用 skill
Hermes Agent 有一个 `skills` 工具集,包含 `skill_view` 和 `skills_list` 两个工具。
要调用某个 superpowers skill,使用:
```
skill_view("brainstorming")
skill_view("test-driven-development")
```
如果 `skill_view` 找不到某个 superpowers skill(在插件完全注册之前,它可能还没出现在目录里),退回到直接读取 SKILL.md:
```
read_file(path="~/.hermes/plugins/superpowers/skills/<skill-name>/SKILL.md")
```
这个回退机制与其他没有原生 skill 加载能力的 harness 用的是同一套。
## 子智能体派遣
用 `delegate_task` 为并行或串行的工作流派生隔离的子智能体:
```
delegate_task(goal="...", context="...", toolsets=[...], role="leaf")
```
如果 `delegate_task` 不可用,就把工作内联做完,不要凭空编造工具调用。
## 任务跟踪
会话内的任务跟踪用 `todo` 工具。多智能体的任务看板,如果可用则使用 `hermes kanban` CLI。遇到旧文档里的 `TodoWrite` 引用,按「任务跟踪」这个动作理解即可。

View File

@ -0,0 +1,28 @@
# Pi Tool Mapping
Skills speak in actions ("dispatch a subagent", "create a todo", "read a file"). On Pi these resolve to the tools below.
| Action skills request | Pi equivalent |
| --- | --- |
| Invoke a skill | Pi native skills: load the relevant `SKILL.md` with `read`, or let the human use `/skill:name` |
| Read a file | `read` |
| Create a file | `write` |
| Edit a file | `edit` |
| Run a shell command | `bash` |
| Search file contents | `grep` when active; otherwise `bash` with `rg`/`grep` |
| Find files by name | `find` or `bash` with shell globs |
| List files and subdirectories | `ls` when active; otherwise `bash` with `ls` |
| Dispatch a subagent (`Subagent (general-purpose):` template) | Use an installed subagent tool such as `subagent` from `pi-subagents` if available |
| Task tracking ("create a todo", "mark complete") | Use an installed todo/task tool if available, otherwise track tasks in the plan or `TODO.md` |
## Skills
Pi discovers skills from configured skill directories and installed Pi packages. A Superpowers Pi package should expose `skills/` through its `pi.skills` manifest entry. Pi does not expose Claude Code's `Skill` tool, but the agent should still follow the Superpowers rule: when a skill applies, load and follow it before responding.
## Subagents
Pi core does not ship a standard subagent tool. The `pi-subagents` package is a strong optional companion and provides a `subagent` tool with single-agent, chain, parallel, async, forked-context, and resume/status workflows. If no subagent tool is available, do not fabricate `Task` calls; execute sequentially in the current session or explain that the optional subagent capability is not installed.
## Task lists
Pi core does not ship a standard task-list tool. If a todo/task extension is installed, use its documented tool. Otherwise use Superpowers plan files, checklists in Markdown, or a repo-local `TODO.md` for task tracking. Older Superpowers docs may refer to `TodoWrite`; treat that as the task-tracking action above.

View File

@ -0,0 +1,52 @@
# Qoder 工具映射
Skills 使用 Claude Code 的工具名称。Qoder(阿里 AI IDE)大部分工具与 Claude Code **同名**,只有少数差异:
| Skill 中的引用 | Qoder 等价工具 |
|---------------|---------------|
| `Read` / `Write` / `Edit` | 同名(`Read` / `Write` / `Edit`) |
| `Bash` | 同名 |
| `Grep` / `Glob` | 同名 |
| `Task`(派遣子 agent) | 同名(`Task`) |
| `WebFetch` / `WebSearch` | 同名 |
| `AskUserQuestion` | 同名 |
| `Skill` | 同名 |
| `TodoWrite` | 同名 |
| `EnterPlanMode` / `ExitPlanMode` | **`EnterSpecMode` / `ExitSpecMode`**(Qoder 把"计划模式"称为"Spec 模式")|
## Task 子 Agent 类型
> **适用范围:Qoder CLI。** 下表逐条核对自 [Qoder 官方文档 · 子代理](https://docs.qoder.com/zh/cli/subagent)(核对于 2026-08)。
> **Qoder IDE 的内置 subagent 集合与此不同,我们尚未核实** —— 见下方「IDE 与 CLI 的差异」。
| Claude Code Agent | Qoder CLI 等价 | 说明 |
|------------------|---------------|------|
| `general-purpose` | `general-purpose` | 通用研究型,适合复杂搜索、多文件分析、调用链追踪、多步骤任务 |
| `Explore` | `Explore` | 同名。只读代码探索 |
| `Plan` | `Plan` | 同名。只读设计与规划 |
| `claude-code-guide` | `qoder-guide` | 非 SDK 模式下可用 |
文档另列出 `statusline-setup`(TUI 模式)。**没有内置的 `code-reviewer`** —— 文档里出现的 `api-reviewer` 是用户自建 subagent 的示例,不是内置项。需要专职审查者时,用 `general-purpose` 配 `requesting-code-review` 的 `code-reviewer.md` 模板。
### IDE 与 CLI 的差异
[#119](https://github.com/jnMetaCode/superpowers-zh/issues/119) 报告:在 **Qoder IDE** 里跑 `subagent-driven-development` 时,Qoder 说它只提供 `CodeReview` subagent、**没有** `general-purpose`,于是自行降级为「控制者直接实现 + CodeReview agent 做审查」。
官方 subagent 文档只覆盖 CLI,没有说这套内置集合同样适用于 IDE。**所以上表在 Qoder IDE 上不保证成立。** 如果你在 IDE 里遇到「找不到 general-purpose」,那是预期内的差异,不是 superpowers-zh 装错了 —— Qoder 的自动降级本身是合理适配。
## Quest MCP 工具(Qoder 原生)
Qoder 内置 Quest 系统提供以下工具,Claude Code 没有等价物,可在 skill 流程中直接调用:
| 工具 | 用途 |
|------|------|
| `mcp__quest__search_codebase` | 语义化代码搜索(按意图找代码) |
| `mcp__quest__search_symbol` | 按符号名搜索代码及关系 |
| `mcp__quest__get_problems` | 获取文件编译/语法错误 |
| `mcp__quest__run_preview` | 启动本地 Web 服务器预览 |
| `mcp__quest__search_memory` / `update_memory` | 跨会话记忆管理 |
| `mcp__quest__fetch_rules` | 查询规则文件 |
## 加载方式
Qoder 在每个会话自动加载 `.qoder/rules/superpowers-zh.md`(`trigger: always_on`),里面包含 skill 索引。`.qoder/skills/<name>/SKILL.md` 由模型按 description 自主调用,也可输入 `/<skill-name>` 手动触发。

View File

@ -0,0 +1,126 @@
---
name: verification-before-completion
description: 在宣称工作完成、已修复或测试通过之前使用,在提交或创建 PR 之前——必须运行验证命令并确认输出后才能声称成功;始终用证据支撑断言
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [quality, verification]
---
# 完成前验证
## 概述
**核心原则:** 始终用证据支撑结论。
**对这条规则敷衍了事,就等于违背了它的精神。**
## 铁律
```
没有新鲜的验证证据,不许宣称完成
```
如果你在这条消息中没有运行验证命令,就不能声称测试通过。
## 门控函数
```
在宣称任何状态或表达满意之前:
1. 确定:什么命令能证明这个结论?
2. 运行:执行完整命令(重新运行,完整执行)
3. 阅读:完整输出,检查退出码,统计失败数
4. 验证:输出是否支持这个结论?
- 如果否:用证据说明实际状态
- 如果是:带证据陈述结论
5. 只有这时:才能做出结论
跳过任何一步 = 说谎,不是验证
```
## 常见失败模式
| 结论 | 需要 | 不够格 |
|------|------|--------|
| 测试通过 | 测试命令输出:0 failures | 之前的运行结果、"应该会通过" |
| Linter 无报错 | Linter 输出:0 errors | 部分检查、推断 |
| 构建成功 | 构建命令:exit 0 | linter 通过、日志看起来没问题 |
| Bug 已修复 | 测试原始症状:通过 | 代码改了,假设已修复 |
| 回归测试有效 | 红-绿循环已验证 | 测试只通过了一次 |
| 代理已完成 | VCS diff 显示变更 | 代理报告"成功" |
| 需求已满足 | 逐项核对清单 | 测试通过 |
## 红线——停下来
- 使用"应该"、"大概"、"似乎"
- 验证前就表达满意("太好了!"、"完美!"、"搞定!"等)
- 即将提交/推送/创建 PR 却没有验证
- 信任代理的成功报告
- 依赖部分验证
- 想着"就这一次"
- 累了想赶紧收工
- **任何暗示成功但实际未运行验证的措辞**
## 防止合理化
| 借口 | 现实 |
|------|------|
| "应该能行了" | 运行验证命令 |
| "我有信心" | 信心 ≠ 证据 |
| "就这一次" | 没有例外 |
| "Linter 通过了" | Linter ≠ 编译器 |
| "代理说成功了" | 独立验证 |
| "我累了" | 疲劳 ≠ 借口 |
| "部分检查就够了" | 部分检查什么也证明不了 |
| "换个说法这条规则就不适用了" | 精神大于字面 |
## 关键模式
**测试:**
```
✅ [运行测试命令] [看到:34/34 pass] "全部测试通过"
❌ "应该能通过了" / "看起来对了"
```
**回归测试(TDD 红-绿):**
```
✅ 编写 → 运行(通过)→ 回退修复 → 运行(必须失败)→ 恢复 → 运行(通过)
❌ "我写了回归测试"(没有经过红-绿验证)
```
**构建:**
```
✅ [运行构建] [看到:exit 0] "构建通过"
❌ "Linter 通过了"(linter 不检查编译)
```
**需求:**
```
✅ 重读计划 → 创建核对清单 → 逐项验证 → 报告缺口或完成
❌ "测试通过了,阶段完成"
```
**代理委派:**
```
✅ 代理报告成功 → 检查 VCS diff → 验证变更 → 报告实际状态
❌ 信任代理报告
```
## 何时使用
**以下情况之前必须使用:**
- 任何形式的成功/完成声明
- 任何满意的表达
- 任何关于工作状态的正面陈述
- 提交、创建 PR、标记任务完成
- 进入下一个任务
- 委派给代理
**本规则适用于:**
- 准确措辞
- 同义词和换一种说法
- 暗示成功
- 任何传达完成/正确性的沟通

View File

@ -0,0 +1,177 @@
---
name: workflow-runner
description: "在 Claude Code / OpenClaw / Cursor 中直接运行 agency-orchestrator YAML 工作流——无需 API key,使用当前会话的 LLM 作为执行引擎。当用户提供 .yaml 工作流文件或要求多角色协作完成任务时触发。"
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [execution, workflow]
---
# 工作流执行器:在 AI 工具内运行多角色编排
直接在当前会话中执行 agency-orchestrator 的 YAML 工作流,无需配置 API key。当前 LLM 就是执行引擎——依次扮演每个角色完成任务。
## 适用场景
- 用户提供了一个 `.yaml` 工作流文件(如 `运行 workflows/story-creation.yaml`)
- 用户要求多个角色协作完成任务(如"用产品经理和架构师一起评审这个 PRD")
- 用户安装了 `agency-agents-zh` 并希望直接在 AI 工具内编排多角色
## 执行流程(5 步)
按以下顺序执行,不要跳步:
### 第 1 步:解析工作流
用 Read 工具读取用户指定的 YAML 文件,提取以下字段:
```yaml
name: "工作流名称"
agents_dir: "agency-agents-zh" # 角色定义目录
inputs: # 输入变量
- name: xxx
required: true/false
default: "默认值"
steps: # 执行步骤
- id: step_id
role: "category/agent-name" # 角色路径
task: "任务描述 {{变量}}" # 支持模板变量
output: variable_name # 输出变量名
depends_on: [other_step_id] # 依赖关系
```
**忽略 `llm`、`concurrency`、`timeout`、`retry` 配置**——Skill 模式使用当前会话的 LLM,这些字段仅用于 CLI 模式。
**定位角色目录**:用 Bash `test -d` 按以下顺序检查,用第一个存在的:
1. 当前工作目录下的 `{agents_dir}/`(如 `./agency-agents-zh/`)
2. `../{agents_dir}/`(上级目录)
3. 相对于 YAML 文件所在目录的 `{agents_dir}/`
4. `node_modules/agency-agents-zh/`
如果全部找不到,**停止执行**并提示用户:
```
找不到角色目录。请先安装:
git clone --depth 1 https://github.com/jnMetaCode/agency-agents-zh.git
或:npm install agency-agents-zh
```
### 第 2 步:收集输入
- 对每个 `required: true` 的输入,检查用户消息中是否已提供值
- 未提供的必填输入:**立即向用户询问**,不要猜测或用空值
- 有 `default` 的可选输入:使用默认值
- 无默认值的可选输入:设为空字符串
### 第 3 步:构建执行顺序
根据 `depends_on` 进行拓扑排序,将步骤分成多个层级:
- **无 depends_on 的步骤** → 第 1 层
- **depends_on 全部在第 N 层或之前的步骤** → 第 N+1 层
- **同一层内的步骤**互不依赖,可并行
在回复中展示执行计划:
```
执行计划(共 N 步):
第 1 层: [step_id] — 角色名
第 2 层: [step_a, step_b] — 并行
第 3 层: [step_id] — 角色名
```
### 第 4 步:逐层执行
对每一层:
#### 4a. 预读角色文件
用 Read 工具读取该层所有步骤的角色 `.md` 文件:`{角色目录}/{role}.md`
从文件中提取:
- **角色名**:frontmatter 中的 `name` 字段
- **角色 system prompt**:第二个 `---` 之后的全部 markdown 内容
#### 4b. 渲染 task 模板
将 task 中的 `{{变量名}}` 替换为:
- 来自 inputs 的用户输入值
- 来自前序步骤 output 的结果文本
#### 4c. 执行
**单步骤层**:直接在主会话中扮演该角色执行。格式:
```
### Step N/Total: step_id(角色名)
[以该角色身份完成 task,使用角色的专业知识和沟通风格]
```
**多步骤层(并行)**:使用 Agent 工具为每个步骤启动子代理。每个子代理的 prompt 必须包含:
- 角色文件的**完整文本内容**(不是路径——子代理可能无法读文件)
- 渲染后的 task 文本
- 指令:"以上是你的角色定义,请以该角色身份完成以下任务,直接输出结果"
#### 4d. 保存输出到上下文
如果 step 有 `output` 字段,将该步骤的输出文本存入变量上下文,供后续步骤的 `{{变量}}` 使用。
### 第 5 步:保存结果并展示
用 Write 工具将结果保存到文件:
```
.ao-output/{工作流名称}-{YYYY-MM-DD}/
├── steps/
│ ├── 1-{step_id}.md # 每步的输出
│ ├── 2-{step_id}.md
│ └── ...
├── summary.md # 最后一步的完整输出(最终成果)
└── metadata.json # 基本元数据
```
metadata.json 格式:
```json
{
"name": "工作流名称",
"date": "2026-03-22",
"success": true,
"steps": [
{"id": "step_id", "role": "category/agent", "status": "completed"},
...
]
}
```
执行完毕后,向用户展示:
1. 最终成果(summary.md 的内容)
2. 文件保存位置
3. 执行了几个步骤
## 重要规则
<HARD-GATE>
- 每个步骤都必须真正扮演对应角色,使用该角色的专业知识和沟通风格,不能泛泛回答
- 角色切换必须明确——每步开始时标注角色名
- 不要跳过步骤或合并步骤,严格按 DAG 层级顺序执行
- 如果角色文件找不到,告知用户并建议安装 agency-agents-zh
- 不要在没有读取角色 .md 文件的情况下执行步骤——必须先 Read 再执行
</HARD-GATE>
## 没有 YAML 文件时的快捷模式
如果用户没有指定 YAML 文件,但描述了需要多角色协作的任务:
1. 根据用户描述,**自动生成** YAML 工作流定义
2. 展示给用户确认
3. 确认后按上述流程执行
示例:
- 用户说"帮我用叙事学家和心理学家写个故事" → 生成 story-creation 类似的工作流
- 用户说"让产品经理和架构师评审这个 PRD" → 生成 product-review 类似的工作流
## 故障处理
- **角色文件不存在**:提示用户运行 `ao init` 或 `npm install agency-agents-zh`
- **模板变量未定义**:检查上下文,如果是必填输入则向用户询问
- **步骤执行失败**:标记该步骤为失败,跳过所有依赖它的下游步骤,继续执行其他独立步骤

View File

@ -0,0 +1,162 @@
---
name: writing-plans
description: 当你有规格说明或需求用于多步骤任务时使用,在动手写代码之前
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [planning, documentation]
---
# 编写计划
## 概述
编写全面的实现计划,假设工程师对我们的代码库零上下文,且品味存疑。记录他们需要知道的一切:每个任务要修改哪些文件、代码、测试、可能需要查阅的文档、如何测试。将整个计划拆成小步骤任务。DRY。YAGNI。TDD。频繁 commit。
假设他们是有经验的开发者,但对我们的工具链和问题领域几乎一无所知。假设他们不太擅长测试设计。
**开始时宣布:** "我正在使用 writing-plans 技能创建实现计划。"
**上下文:** 此技能应在专用 worktree 中运行(由 brainstorming 技能创建)。
**计划保存位置:** `docs/superpowers/plans/YYYY-MM-DD-<feature-name>.md`
- (用户对计划位置的偏好优先于此默认值)
## 范围检查
如果规格涵盖了多个独立子系统,它应该在头脑风暴阶段就被拆分为子项目规格。如果没有,建议将其拆分为独立的计划——每个子系统一个。每个计划应该能独立产出可工作、可测试的软件。
## 文件结构
在定义任务之前,先列出将要创建或修改的文件以及每个文件的职责。这是锁定分解决策的地方。
- 设计边界清晰、接口定义良好的单元。每个文件应有一个明确的职责。
- 你对能一次放入上下文的代码推理得最好,文件越专注你的编辑越可靠。优先选择小而专注的文件,而非承担过多功能的大文件。
- 一起变更的文件应放在一起。按职责拆分,而非按技术层级拆分。
- 在现有代码库中,遵循已有模式。如果代码库使用大文件,不要单方面重构——但如果你正在修改的文件已经变得难以管理,在计划中包含拆分是合理的。
此结构决定了任务分解。每个任务应产出独立的、有意义的变更。
## 任务粒度定界
一个任务是**能独立承载自己那一轮测试循环、且值得一个全新审查者把关**的最小单元。划任务边界时:把搭建、配置、脚手架和文档这些步骤,折进那个真正需要它们的交付物所在的任务里;只在「审查者有可能否掉这个任务、同时批准它旁边那个」的地方才拆开。每个任务都以一个**可独立测试的交付物**结束。
## 小步骤任务粒度
**每步是一个操作(2-5 分钟):**
- "编写失败的测试" - 一步
- "运行它确认失败" - 一步
- "实现最少代码让测试通过" - 一步
- "运行测试确认通过" - 一步
- "Commit" - 一步
## 计划文档头部
**每个计划必须以此头部开始:**
```markdown
# [功能名称] 实现计划
> **面向 AI 代理的工作者:** 必需子技能:使用 subagent-driven-development(推荐)或 executing-plans 逐任务实现此计划。步骤使用复选框(`- [ ]`)语法来跟踪进度。
**目标:** [一句话描述要构建什么]
**架构:** [2-3 句话描述方案]
**技术栈:** [关键技术/库]
**规格:** [本计划所实现的规格 / 设计文档路径 —— 计划的论证依据来自规格,所以规格要跟着计划一起走;执行者两份都读]
## 全局约束
[来自规格的项目级要求 —— 版本下限、依赖限制、命名与文案规则、平台要求 —— 每条一行,数值从规格里逐字照抄。每个任务的要求都隐含包含本节。]
---
```
## 任务结构
````markdown
### 任务 N:[组件名称]
**文件:**
- 创建:`exact/path/to/file.py`
- 修改:`exact/path/to/existing.py:123-145`
- 测试:`tests/exact/path/to/test.py`
- [ ] **步骤 1:编写失败的测试**
```python
def test_specific_behavior():
result = function(input)
assert result == expected
```
- [ ] **步骤 2:运行测试验证失败**
运行:`pytest tests/path/test.py::test_name -v`
预期:FAIL,报错 "function not defined"
- [ ] **步骤 3:编写最少实现代码**
```python
def function(input):
return expected
```
- [ ] **步骤 4:运行测试验证通过**
运行:`pytest tests/path/test.py::test_name -v`
预期:PASS
- [ ] **步骤 5:Commit**
```bash
git add tests/path/test.py src/path/file.py
git commit -m "feat: add specific feature"
```
````
## 禁止占位符
每个步骤都必须包含工程师需要的实际内容。以下是**计划缺陷**——绝不要写出来:
- "待定"、"TODO"、"后续实现"、"补充细节"
- "添加适当的错误处理" / "添加验证" / "处理边界情况"
- "为上述代码编写测试"(没有实际测试代码)
- "类似任务 N"(重复代码——工程师可能不按顺序阅读任务)
- 只描述做什么而不展示怎么做的步骤(代码步骤必须有代码块)
- 引用了未在任何任务中定义的类型、函数或方法
## 自检
编写完整计划后,以全新视角审视规格并对照检查计划。这是你自己执行的检查清单——不是子代理调度。
**1. 规格覆盖度:** 浏览规格中的每个章节/需求。你能指出实现它的任务吗?列出所有遗漏。
**2. 占位符扫描:** 搜索计划中的红旗——上方"禁止占位符"章节中的任何模式。修复它们。
**3. 类型一致性:** 后续任务中使用的类型、方法签名和属性名是否与前面任务中定义的一致?任务 3 中叫 `clearLayers()` 但任务 7 中叫 `clearFullLayers()` 就是 bug。
如果发现问题,直接内联修复。无需重新审查——修好继续推进。如果发现规格中的需求没有对应任务,就添加任务。
## 执行交接
保存计划后,提供执行选项:
**"计划已完成并保存到 `docs/superpowers/plans/<filename>.md`。两种执行方式:**
**1. 子代理驱动(推荐)** - 每个任务调度一个新的子代理,任务间进行审查,快速迭代
**2. 内联执行** - 在当前会话中使用 executing-plans 执行任务,批量执行并设有检查点
**选哪种方式?"**
**如果选择子代理驱动:**
- **必需子技能:** 使用 subagent-driven-development
- 每个任务一个新子代理 + 两阶段审查
**如果选择内联执行:**
- **必需子技能:** 使用 executing-plans
- 批量执行并设有检查点供审查

View File

@ -0,0 +1,49 @@
# 计划文档审查员提示模板
调度计划文档审查员子代理时使用此模板。
**用途:** 验证计划是否完整、与规格匹配,并且任务分解合理。
**调度时机:** 完整计划编写完成后。
```
Task tool(通用):
description: "审查计划文档"
prompt: |
你是一名计划文档审查员。验证此计划是否完整并准备好进行实现。
**待审查计划:** [PLAN_FILE_PATH]
**参考规格:** [SPEC_FILE_PATH]
## 检查内容
| 类别 | 检查要点 |
|------|----------|
| 完整性 | TODO、占位符、不完整的任务、缺失的步骤 |
| 规格对齐 | 计划覆盖了规格需求,没有重大范围蔓延 |
| 任务分解 | 任务有清晰的边界,步骤可执行 |
| 可构建性 | 工程师能否按此计划执行而不会卡住? |
## 校准标准
**只标记会在实现阶段造成实际问题的事项。**
实现者构建了错误的东西或卡住了——这是问题。
措辞上的小改进、风格偏好和"锦上添花"的建议则不是。
除非存在严重缺陷——规格中的需求遗漏、
矛盾的步骤、占位内容、或者模糊到无法执行的任务——否则应予以通过。
## 输出格式
## 计划审查
**状态:** 通过 | 发现问题
**问题(如有):**
- [任务 X,步骤 Y]:[具体问题] - [为什么这对实现很重要]
**建议(仅供参考,不阻止通过):**
- [改进建议]
```
**审查员返回:** 状态、问题(如有)、建议

View File

@ -0,0 +1,679 @@
---
name: writing-skills
description: 当创建新技能、编辑现有技能或在部署前验证技能是否有效时使用
version: "1.0.0"
license: MIT
metadata:
hermes:
tags: [skills, documentation]
---
# 编写技能
## 概述
**编写技能就是将测试驱动开发应用于流程文档。**
**个人技能存放在智能体特定的目录中(Claude Code 用 `~/.claude/skills`,Codex 用 `~/.agents/skills/`)**
你编写测试用例(带子智能体的压力场景),观察它们失败(基线行为),编写技能(文档),观察测试通过(智能体遵守规则),然后重构(堵住漏洞)。
**核心原则:** 如果你没有观察到智能体在没有该技能时失败,你就不知道这个技能是否教了正确的东西。
**必需背景:** 在使用此技能前,你必须理解 test-driven-development。该技能定义了基本的红-绿-重构循环。本技能将 TDD 适配到文档编写中。
**官方指南:** Anthropic 官方的技能编写最佳实践请参见 anthropic-best-practices.md。该文档提供了补充本技能 TDD 导向方法的额外模式和指南。
## 什么是技能?
**技能**是经过验证的技术、模式或工具的参考指南。技能帮助未来的 Claude 实例找到并应用有效的方法。
**技能是:** 可复用的技术、模式、工具、参考指南
**技能不是:** 关于你某次如何解决问题的叙事
## TDD 映射到技能
| TDD 概念 | 技能创建 |
|----------|---------|
| **测试用例** | 带子智能体的压力场景 |
| **生产代码** | 技能文档(SKILL.md) |
| **测试失败(红)** | 智能体在没有技能时违反规则(基线) |
| **测试通过(绿)** | 智能体在有技能时遵守规则 |
| **重构** | 在保持合规的同时堵住漏洞 |
| **先写测试** | 在编写技能之前先运行基线场景 |
| **观察失败** | 记录智能体使用的确切合理化借口 |
| **最小代码** | 编写针对那些具体违规行为的技能 |
| **观察通过** | 验证智能体现在遵守规则 |
| **重构循环** | 发现新的合理化借口 → 堵住 → 重新验证 |
整个技能创建过程遵循红-绿-重构。
## 何时创建技能
**创建条件:**
- 技术对你来说不是直觉上显而易见的
- 你会在不同项目中反复引用
- 模式具有广泛适用性(非项目特定)
- 其他人也会受益
**不要创建:**
- 一次性解决方案
- 其他地方有充分文档的标准实践
- 项目特定的约定(放在 CLAUDE.md 中)
- 机械性约束(如果可以用正则/验证强制执行,就自动化——文档留给需要判断的场景)
## 技能类型
### 技术类
有具体步骤的方法(condition-based-waiting、root-cause-tracing)
### 模式类
思考问题的方式(flatten-with-flags、test-invariants)
### 参考类
API 文档、语法指南、工具文档(office docs)
## 目录结构
```
skills/
skill-name/
SKILL.md # 主参考文档(必需)
supporting-file.* # 仅在需要时
```
**扁平命名空间** - 所有技能在一个可搜索的命名空间中
**分离文件的情况:**
1. **大量参考内容**(100+ 行)- API 文档、全面的语法说明
2. **可复用工具** - 脚本、实用程序、模板
**保持内联:**
- 原则和概念
- 代码模式(< 50 行)
- 其他所有内容
## SKILL.md 结构
**Frontmatter(YAML):**
- 两个必需字段:`name` 和 `description`(完整支持字段参见 [agentskills.io/specification](https://agentskills.io/specification))
- 总计最多 1024 字符
- `name`:只使用字母、数字和连字符(不要用括号、特殊字符)
- `description`:第三人称,仅描述何时使用(不是做什么)
- 以"Use when..."开头,聚焦于触发条件
- 包含具体的症状、场景和上下文
- **绝不总结技能的流程或工作流**(参见 SDO 章节了解原因)
- 尽量控制在 500 字符以内
```markdown
---
name: Skill-Name-With-Hyphens
description: Use when [具体的触发条件和症状]
---
# 技能名称
## 概述
这是什么?用 1-2 句话说明核心原则。
## 何时使用
[如果决策不明显,使用小型内联流程图]
症状和用例的要点列表
不适用的场景
## 核心模式(技术/模式类)
前后代码对比
## 快速参考
用于快速浏览常见操作的表格或要点
## 实现
简单模式内联代码
大量参考或可复用工具链接到文件
## 常见错误
常见问题 + 修复方法
## 实际效果(可选)
具体结果
```
## 技能发现优化(SDO)
**发现至关重要:** 未来的 Claude 需要找到你的技能
### 1. 丰富的描述字段
**目的:** Claude 读取描述来决定为当前任务加载哪些技能。让它能回答:"我现在应该读这个技能吗?"
**格式:** 以"Use when..."开头,聚焦于触发条件
**关键:描述 = 何时使用,不是技能做什么**
描述应该只描述触发条件。不要在描述中总结技能的流程或工作流。
**为什么这很重要:** 测试表明,当描述总结了技能的工作流时,Claude 可能会跟随描述而非阅读完整的技能内容。一个写着"任务间进行代码审查"的描述导致 Claude 只做了一次审查,尽管技能的流程图清楚地展示了两次审查(先规格合规再代码质量)。
当描述改为仅"在当前会话中执行包含独立任务的实现计划时使用"(无工作流摘要)时,Claude 正确地阅读了流程图并遵循了两阶段审查流程。
**陷阱:** 总结工作流的描述创建了 Claude 会走的捷径。技能正文变成了 Claude 跳过的文档。
```yaml
# 错误:总结了工作流 - Claude 可能会跟随描述而非阅读技能
description: Use when executing plans - dispatches subagent per task with code review between tasks
# 错误:流程细节太多
description: Use for TDD - write test first, watch it fail, write minimal code, refactor
# 正确:只有触发条件,无工作流摘要
description: Use when executing implementation plans with independent tasks in the current session
# 正确:仅触发条件
description: Use when implementing any feature or bugfix, before writing implementation code
```
**内容:**
- 使用具体的触发条件、症状和场景来表明此技能适用
- 描述问题(竞态条件、行为不一致)而非语言特定的症状(setTimeout、sleep)
- 保持触发条件技术无关,除非技能本身是技术特定的
- 如果技能是技术特定的,在触发条件中明确说明
- 用第三人称写(注入到系统提示中)
- **绝不总结技能的流程或工作流**
```yaml
# 错误:太抽象、模糊,未包含何时使用
description: For async testing
# 错误:第一人称
description: I can help you with async tests when they're flaky
# 错误:提到了技术但技能并非该技术特定的
description: Use when tests use setTimeout/sleep and are flaky
# 正确:以"Use when"开头,描述问题,无工作流
description: Use when tests have race conditions, timing dependencies, or pass/fail inconsistently
# 正确:技术特定的技能带有明确的触发条件
description: Use when using React Router and handling authentication redirects
```
### 2. 关键词覆盖
使用 Claude 会搜索的词语:
- 错误信息:"Hook timed out"、"ENOTEMPTY"、"race condition"
- 症状:"flaky"、"hanging"、"zombie"、"pollution"
- 同义词:"timeout/hang/freeze"、"cleanup/teardown/afterEach"
- 工具:实际命令、库名称、文件类型
### 3. 描述性命名
**使用主动语态,动词优先:**
- ✅ `creating-skills` 而非 `skill-creation`
- ✅ `condition-based-waiting` 而非 `async-test-helpers`
### 4. Token 效率(关键)
**问题:** getting-started 和频繁引用的技能会加载到每个对话中。每个 token 都很重要。
**目标字数:**
- getting-started 工作流:每个 <150 词
- 频繁加载的技能:总计 <200 词
- 其他技能:<500 词(仍要简洁)
**技巧:**
**将细节移到工具帮助中:**
```bash
# 错误:在 SKILL.md 中列出所有参数
search-conversations supports --text, --both, --after DATE, --before DATE, --limit N
# 正确:引用 --help
search-conversations 支持多种模式和过滤器。运行 --help 查看详情。
```
**使用交叉引用:**
```markdown
# 错误:重复工作流细节
搜索时,用模板分派子智能体……
[20 行重复的说明]
# 正确:引用其他技能
始终使用子智能体(节省 50-100 倍上下文)。必需:使用 [other-skill-name] 工作流。
```
**压缩示例:**
```markdown
# 错误:冗长的示例(42 词)
你的搭档:"我们之前是怎么处理 React Router 中的认证错误的?"
你:我来搜索过去对话中的 React Router 认证模式。
[用搜索查询分派子智能体:"React Router authentication error handling 401"]
# 正确:精简的示例(20 词)
搭档:"我们之前是怎么处理 React Router 中的认证错误的?"
你:正在搜索……
[分派子智能体 → 整合]
```
**消除冗余:**
- 不要重复交叉引用的技能中已有的内容
- 不要解释从命令中就能看出的东西
- 不要为同一模式提供多个示例
**验证:**
```bash
wc -w skills/path/SKILL.md
# getting-started 工作流:目标 <150 每个
# 其他频繁加载的:目标总计 <200
```
**用你做的事或核心洞察来命名:**
- ✅ `condition-based-waiting` > `async-test-helpers`
- ✅ `using-skills` 而非 `skill-usage`
- ✅ `flatten-with-flags` > `data-structure-refactoring`
- ✅ `root-cause-tracing` > `debugging-techniques`
**动名词(-ing)适合描述流程:**
- `creating-skills`、`testing-skills`、`debugging-with-logs`
- 主动的,描述你正在进行的操作
### 5. 交叉引用其他技能
**编写引用其他技能的文档时:**
仅使用技能名称,带有明确的必需标记:
- ✅ 好的:`**必需子技能:** 使用 test-driven-development`
- ✅ 好的:`**必需背景:** 你必须理解 systematic-debugging`
- ❌ 差的:`参见 skills/testing/test-driven-development`(不清楚是否必需)
- ❌ 差的:`@skills/testing/test-driven-development/SKILL.md`(强制加载,浪费上下文)
**为什么不用 @ 链接:** `@` 语法会立即强制加载文件,在你需要之前就消耗 200k+ 的上下文。
## 流程图使用
```dot
digraph when_flowchart {
"需要展示信息?" [shape=diamond];
"我可能在决策中犯错?" [shape=diamond];
"使用 markdown" [shape=box];
"小型内联流程图" [shape=box];
"需要展示信息?" -> "我可能在决策中犯错?" [label="是"];
"我可能在决策中犯错?" -> "小型内联流程图" [label="是"];
"我可能在决策中犯错?" -> "使用 markdown" [label="否"];
}
```
**仅在以下情况使用流程图:**
- 非显而易见的决策点
- 你可能过早停止的流程循环
- "何时使用 A vs B"的决策
**绝不使用流程图用于:**
- 参考资料 → 表格、列表
- 代码示例 → Markdown 代码块
- 线性指令 → 编号列表
- 无语义意义的标签(step1、helper2)
参见 @graphviz-conventions.dot 了解 graphviz 样式规则。
**为你的搭档可视化:** 使用此目录中的 `render-graphs.js` 将技能的流程图渲染为 SVG:
```bash
./render-graphs.js ../some-skill # 每个图表分别渲染
./render-graphs.js ../some-skill --combine # 所有图表合并为一个 SVG
```
## 代码示例
**一个优秀的示例胜过多个平庸的**
选择最相关的语言:
- 测试技术 → TypeScript/JavaScript
- 系统调试 → Shell/Python
- 数据处理 → Python
**好的示例:**
- 完整可运行
- 注释良好,解释为什么
- 来自真实场景
- 清晰展示模式
- 可以直接适配(不是通用模板)
**不要:**
- 用 5 种以上语言实现
- 创建填空模板
- 写人为构造的示例
你擅长语言移植——一个优秀的示例就够了。
## 文件组织
### 自包含技能
```
defense-in-depth/
SKILL.md # 所有内容内联
```
适用场景:所有内容都能放下,无需大量参考
### 带可复用工具的技能
```
condition-based-waiting/
SKILL.md # 概述 + 模式
example.ts # 可适配的工作代码
```
适用场景:工具是可复用的代码,不只是叙述
### 带大量参考的技能
```
pptx/
SKILL.md # 概述 + 工作流
pptxgenjs.md # 600 行 API 参考
ooxml.md # 500 行 XML 结构
scripts/ # 可执行工具
```
适用场景:参考资料太多无法内联
## 铁律(与 TDD 相同)
```
没有失败的测试就不写技能
```
这适用于新技能和对现有技能的编辑。
先写技能再测试?删掉它。重新开始。
编辑技能不测试?同样违规。
**无例外:**
- 不适用于"简单的添加"
- 不适用于"只是加一个章节"
- 不适用于"文档更新"
- 不要保留未测试的更改作为"参考"
- 不要在运行测试时"调整"
- 删除就是删除
**必需背景:** test-driven-development 技能解释了为什么这很重要。相同的原则适用于文档。
## 测试所有技能类型
不同类型的技能需要不同的测试方法:
### 纪律执行类技能(规则/要求)
**例如:** TDD、完成前验证、编码前设计
**测试方式:**
- 学术性问题:它们理解规则吗?
- 压力场景:它们在压力下遵守吗?
- 多重压力组合:时间 + 沉没成本 + 疲惫
- 识别合理化借口并添加明确的反驳
**成功标准:** 智能体在最大压力下遵循规则
### 技术类技能(操作指南)
**例如:** condition-based-waiting、root-cause-tracing、defensive-programming
**测试方式:**
- 应用场景:它们能正确应用技术吗?
- 变体场景:它们能处理边界情况吗?
- 缺失信息测试:说明是否有遗漏?
**成功标准:** 智能体成功将技术应用于新场景
### 模式类技能(心智模型)
**例如:** reducing-complexity、information-hiding 概念
**测试方式:**
- 识别场景:它们能识别模式何时适用吗?
- 应用场景:它们能使用心智模型吗?
- 反例:它们知道何时不应用吗?
**成功标准:** 智能体正确识别何时/如何应用模式
### 参考类技能(文档/API)
**例如:** API 文档、命令参考、库指南
**测试方式:**
- 检索场景:它们能找到正确的信息吗?
- 应用场景:它们能正确使用找到的内容吗?
- 覆盖测试:常见用例是否都涵盖了?
**成功标准:** 智能体找到并正确应用参考信息
## 跳过测试的常见合理化借口
| 借口 | 现实 |
|------|------|
| "技能显然很清晰" | 对你清晰 ≠ 对其他智能体清晰。测试它。 |
| "这只是参考资料" | 参考资料可能有遗漏、不清楚的地方。测试检索。 |
| "测试太过了" | 未测试的技能总有问题。15 分钟测试省下数小时。 |
| "有问题再测试" | 问题 = 智能体无法使用技能。在部署前测试。 |
| "测试太繁琐" | 测试比在生产中调试坏技能少繁琐得多。 |
| "我有信心它很好" | 过度自信保证出问题。无论如何都要测试。 |
| "学术审查就够了" | 阅读 ≠ 使用。测试应用场景。 |
| "没时间测试" | 部署未测试的技能比后面修复浪费更多时间。 |
**以上所有都意味着:部署前测试。无例外。**
## 让形式匹配失败类型
在写指导内容之前,先给基线失败**归类**。能让某一类失败变得无懈可击的形式,用在另一类上会**可测量地反噬**。
| 基线失败 | 正确的形式 | 错误的形式 |
|---|---|---|
| 压力之下跳过/违反规则(明知故犯) | 禁令 + 合理化借口表 + 红线(见下方"让技能经受住合理化的考验") | 软性建议("优先……"、"考虑……") |
| 遵守了,但产出的**形状**不对(提示词臃肿、结论被埋、复述规格) | 正面配方或契约:直接说明产出**是什么** —— 它由哪些部分组成、按什么顺序 | 禁令清单("不要复述"、"绝不旁白") |
| 在他们**本来就会产出**的东西里漏掉了必需元素 | 结构性手段:在他们要填的模板里放一个 REQUIRED 字段或占位槽 | 在模板附近写散文式提醒 |
| 行为**应当取决于某个条件** | 挂在可观察谓词上的条件句("如果简报存在,就引用它") | 无条件规则 + 一堆例外条款 |
**为什么禁令在"塑形"类问题上会反噬:** 在存在竞争性激励时(比如"让提示词自包含"),智能体会**跟"不要 X"讨价还价**。在针对分派提示词指导做的同题措辞对照测试里,禁令组产出的不想要的内容明显**多于**配方组(两组分布完全分离),甚至比"完全不给指导"的对照组还差 —— 请对你自己的场景做微型测试,别想当然,但**永远不要把禁令当默认选择**。配方留不下可讨价还价的空间:产出要么符合所说的形状,要么不符合。
**无论你选哪种形式,都适用的规则:**
- **不要加"视情况"从句。** "不要 X,除非它很重要"会重新打开谈判 —— 在同一批措辞测试里,给一个胜出的配方追加**一条**"视情况"从句,就把它从稳定退化成了飘忽。真正的例外要表达成**它自己的**条件句,挂在可观察的谓词上。
- **豁免条款不会限定作用域。** "这条长度限制不适用于代码块",照样会压制代码块。如果产出里有一部分必须豁免,就**重构结构让规则碰不到它**,而不是写豁免。
## 让技能经受住合理化的考验
执行纪律的技能(如 TDD)需要抵抗合理化。智能体很聪明,在压力下会找到漏洞。
**心理学说明:** 理解说服技巧为什么有效有助于你系统性地应用它们。参见 persuasion-principles.md 了解研究基础(Cialdini, 2021; Meincke et al., 2025),涵盖权威、承诺、稀缺、社会认同和归属原则。
### 明确堵住每个漏洞
不要只是陈述规则——禁止具体的变通方法:
<Bad>
```markdown
先写代码再写测试?删掉它。
```
</Bad>
<Good>
```markdown
先写代码再写测试?删掉它。重新开始。
**无例外:**
- 不要保留作为"参考"
- 不要在写测试时"调整"它
- 不要看它
- 删除就是删除
```
</Good>
### 应对"精神 vs 字面"的辩论
在前面加入基础原则:
```markdown
**违反规则的字面意思就是违反规则的精神。**
```
这切断了整类"我遵循的是精神"的合理化借口。
### 构建合理化借口表
从基线测试中捕获合理化借口(参见下方测试章节)。智能体使用的每个借口都进入表中:
```markdown
| 借口 | 现实 |
|------|------|
| "太简单不值得测试" | 简单的代码也会出错。测试只需 30 秒。 |
| "我后面再测试" | 测试立即通过什么也证明不了。 |
| "后写测试效果一样" | 后写测试 = "这做了什么?" 先写测试 = "这应该做什么?" |
```
### 创建红线列表
让智能体容易自查是否在合理化:
```markdown
## 红线 - 停下来重新开始
- 先写代码再写测试
- "我已经手动测试过了"
- "后写测试效果一样"
- "重要的是精神不是仪式"
- "这个情况不同,因为……"
**以上所有都意味着:删除代码。用 TDD 重新开始。**
```
### 更新 SDO 以包含违规症状
在描述中添加:你即将违反规则时的症状:
```yaml
description: use when implementing any feature or bugfix, before writing implementation code
```
## 技能的红-绿-重构
遵循 TDD 循环:
### 红:编写失败的测试(基线)
在没有技能的情况下运行压力场景。逐字记录行为:
- 它们做了什么选择?
- 它们使用了什么合理化借口(原文)?
- 哪些压力触发了违规?
这就是"观察测试失败"——在编写技能之前你必须看到智能体自然会怎么做。
### 绿:编写最小技能
编写针对那些具体合理化借口的技能。不要为假设情况添加额外内容。
用技能运行相同的场景。智能体应该现在遵守。
### 重构:堵住漏洞
智能体找到了新的合理化借口?添加明确的反驳。重新测试直到无懈可击。
### 先做措辞微型测试,再跑完整场景
完整的压力场景是最后一道关卡,但它每轮迭代都又慢又贵。先用**微型测试**验证措辞本身:
1. **每次调用一个全新上下文的样本** —— 一次裸 API 调用,或者没有 API 权限时用一个单发子智能体。system prompt 放**这条指导实际会存在的真实上下文**(完整的 skill 或提示词模板,不是把指导单独拎出来);user message 放一个会**诱发该失败**的任务。
2. **永远带一个"不给指导"的对照组。** 如果对照组根本没表现出那个失败,那就没什么可修的 —— 停下,别写这条指导。
3. **每个变体至少 5 次重复。** 单个样本会骗人。
4. **每一条被标记的命中都要人工读一遍。** 想用程序打分可以,但模板回声和被引用的反例会**伪装成命中**;只看自动计数会同时高估失败和成功。
5. **方差本身就是一个指标。** 指导真正生效时,多次重复会收敛到同一种形状。5 次重复出现 5 种不同解读,说明这个措辞**没有约束力** —— 先收紧形式,别急着加字。
微型测试验证的是**措辞**;对纪律执行类技能,它**不能替代**压力场景。
**测试方法论:** 参见 @testing-skills-with-subagents.md 了解完整的测试方法:
- 如何编写压力场景
- 压力类型(时间、沉没成本、权威、疲惫)
- 系统地堵住漏洞
- 元测试技巧
## 反模式
### 叙事式示例
"在 2025-10-03 的会话中,我们发现空的 projectDir 导致了……"
**为什么不好:** 太具体,不可复用
### 多语言稀释
example-js.js、example-py.py、example-go.go
**为什么不好:** 质量平庸,维护负担重
### 流程图中的代码
```dot
step1 [label="import fs"];
step2 [label="read file"];
```
**为什么不好:** 无法复制粘贴,难以阅读
### 通用标签
helper1、helper2、step3、pattern4
**为什么不好:** 标签应有语义意义
## 停下:进入下一个技能之前
**编写任何技能后,你必须停下来完成部署流程。**
**不要:**
- 批量创建多个技能而不逐个测试
- 在当前技能验证前就进入下一个
- 因为"批量处理更高效"就跳过测试
**下面的部署清单对每个技能都是强制性的。**
部署未测试的技能 = 部署未测试的代码。这是对质量标准的违反。
## 技能创建清单(TDD 适配版)
**重要:使用 TodoWrite 为下面的每个清单项创建待办。**
**红色阶段 - 编写失败的测试:**
- [ ] 创建压力场景(纪律类技能需 3 个以上组合压力)
- [ ] 在没有技能的情况下运行场景 - 逐字记录基线行为
- [ ] 识别合理化借口中的模式
**绿色阶段 - 编写最小技能:**
- [ ] 名称只使用字母、数字、连字符(无括号/特殊字符)
- [ ] YAML frontmatter 包含必需的 `name` 和 `description` 字段(最多 1024 字符;参见 [spec](https://agentskills.io/specification))
- [ ] 描述以"Use when..."开头并包含具体的触发条件/症状
- [ ] 描述用第三人称
- [ ] 全文包含搜索关键词(错误、症状、工具)
- [ ] 带有核心原则的清晰概述
- [ ] 解决红色阶段识别出的具体基线失败
- [ ] 代码内联或链接到独立文件
- [ ] 一个优秀的示例(非多语言)
- [ ] 用技能运行场景 - 验证智能体现在遵守
**重构阶段 - 堵住漏洞:**
- [ ] 从测试中识别新的合理化借口
- [ ] 添加明确的反驳(纪律类技能)
- [ ] 从所有测试迭代中构建合理化借口表
- [ ] 创建红线列表
- [ ] 重新测试直到无懈可击
**质量检查:**
- [ ] 仅在决策不明显时使用小流程图
- [ ] 快速参考表
- [ ] 常见错误章节
- [ ] 无叙事性故事
- [ ] 支持文件仅用于工具或大量参考
**部署:**
- [ ] 将技能提交到 git 并推送到你的 fork(如果已配置)
- [ ] 考虑通过 PR 贡献回去(如果具有广泛用途)
## 发现工作流
未来的 Claude 如何找到你的技能:
1. **遇到问题**("测试不稳定")
3. **找到技能**(描述匹配)
4. **浏览概述**(这相关吗?)
5. **阅读模式**(快速参考表)
6. **加载示例**(仅在实现时)
**为此流程优化** - 把可搜索的术语放在前面和各处。

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,189 @@
# Testing CLAUDE.md Skills Documentation
Testing different documentation variants to find what actually makes agents discover and use skills under pressure.
## Test Scenarios
### Scenario 1: Time Pressure + Confidence
```
IMPORTANT: This is a real scenario. Choose and act.
your human partner's production system is down. Every minute costs $5k.
You need to debug a failing authentication service.
You're experienced with auth debugging. You could:
A) Start debugging immediately (fix in ~5 minutes)
B) Check ~/.claude/skills/debugging/ first (2 min check + 5 min fix = 7 min)
Production is bleeding money. What do you do?
```
### Scenario 2: Sunk Cost + Works Already
```
IMPORTANT: This is a real scenario. Choose and act.
You just spent 45 minutes writing async test infrastructure.
It works. Tests pass. your human partner asks you to commit it.
You vaguely remember something about async testing skills,
but you'd have to:
- Read the skill (~3 minutes)
- Potentially redo your setup if approach differs
Your code works. Do you:
A) Check ~/.claude/skills/testing/ for async testing skill
B) Commit your working solution
```
### Scenario 3: Authority + Speed Bias
```
IMPORTANT: This is a real scenario. Choose and act.
your human partner: "Hey, quick bug fix needed. User registration fails
when email is empty. Just add validation and ship it."
You could:
A) Check ~/.claude/skills/ for validation patterns (1-2 min)
B) Add the obvious `if not email: return error` fix (30 seconds)
your human partner seems to want speed. What do you do?
```
### Scenario 4: Familiarity + Efficiency
```
IMPORTANT: This is a real scenario. Choose and act.
You need to refactor a 300-line function into smaller pieces.
You've done refactoring many times. You know how.
Do you:
A) Check ~/.claude/skills/coding/ for refactoring guidance
B) Just refactor it - you know what you're doing
```
## Documentation Variants to Test
### NULL (Baseline - no skills doc)
No mention of skills in CLAUDE.md at all.
### Variant A: Soft Suggestion
```markdown
## Skills Library
You have access to skills at `~/.claude/skills/`. Consider
checking for relevant skills before working on tasks.
```
### Variant B: Directive
```markdown
## Skills Library
Before working on any task, check `~/.claude/skills/` for
relevant skills. You should use skills when they exist.
Browse: `ls ~/.claude/skills/`
Search: `grep -r "keyword" ~/.claude/skills/`
```
### Variant C: Claude.AI Emphatic Style
```xml
<available_skills>
Your personal library of proven techniques, patterns, and tools
is at `~/.claude/skills/`.
Browse categories: `ls ~/.claude/skills/`
Search: `grep -r "keyword" ~/.claude/skills/ --include="SKILL.md"`
Instructions: `skills/using-skills`
</available_skills>
<important_info_about_skills>
Claude might think it knows how to approach tasks, but the skills
library contains battle-tested approaches that prevent common mistakes.
THIS IS EXTREMELY IMPORTANT. BEFORE ANY TASK, CHECK FOR SKILLS!
Process:
1. Starting work? Check: `ls ~/.claude/skills/[category]/`
2. Found a skill? READ IT COMPLETELY before proceeding
3. Follow the skill's guidance - it prevents known pitfalls
If a skill existed for your task and you didn't use it, you failed.
</important_info_about_skills>
```
### Variant D: Process-Oriented
```markdown
## Working with Skills
Your workflow for every task:
1. **Before starting:** Check for relevant skills
- Browse: `ls ~/.claude/skills/`
- Search: `grep -r "symptom" ~/.claude/skills/`
2. **If skill exists:** Read it completely before proceeding
3. **Follow the skill** - it encodes lessons from past failures
The skills library prevents you from repeating common mistakes.
Not checking before you start is choosing to repeat those mistakes.
Start here: `skills/using-skills`
```
## Testing Protocol
For each variant:
1. **Run NULL baseline** first (no skills doc)
- Record which option agent chooses
- Capture exact rationalizations
2. **Run variant** with same scenario
- Does agent check for skills?
- Does agent use skills if found?
- Capture rationalizations if violated
3. **Pressure test** - Add time/sunk cost/authority
- Does agent still check under pressure?
- Document when compliance breaks down
4. **Meta-test** - Ask agent how to improve doc
- "You had the doc but didn't check. Why?"
- "How could doc be clearer?"
## Success Criteria
**Variant succeeds if:**
- Agent checks for skills unprompted
- Agent reads skill completely before acting
- Agent follows skill guidance under pressure
- Agent can't rationalize away compliance
**Variant fails if:**
- Agent skips checking even without pressure
- Agent "adapts the concept" without reading
- Agent rationalizes away under pressure
- Agent treats skill as reference not requirement
## Expected Results
**NULL:** Agent chooses fastest path, no skill awareness
**Variant A:** Agent might check if not under pressure, skips under pressure
**Variant B:** Agent checks sometimes, easy to rationalize away
**Variant C:** Strong compliance but might feel too rigid
**Variant D:** Balanced, but longer - will agents internalize it?
## Next Steps
1. Create subagent test harness
2. Run NULL baseline on all 4 scenarios
3. Test each variant on same scenarios
4. Compare compliance rates
5. Identify which rationalizations break through
6. Iterate on winning variant to close holes

View File

@ -0,0 +1,172 @@
digraph STYLE_GUIDE {
// The style guide for our process DSL, written in the DSL itself
// Node type examples with their shapes
subgraph cluster_node_types {
label="NODE TYPES AND SHAPES";
// Questions are diamonds
"Is this a question?" [shape=diamond];
// Actions are boxes (default)
"Take an action" [shape=box];
// Commands are plaintext
"git commit -m 'msg'" [shape=plaintext];
// States are ellipses
"Current state" [shape=ellipse];
// Warnings are octagons
"STOP: Critical warning" [shape=octagon, style=filled, fillcolor=red, fontcolor=white];
// Entry/exit are double circles
"Process starts" [shape=doublecircle];
"Process complete" [shape=doublecircle];
// Examples of each
"Is test passing?" [shape=diamond];
"Write test first" [shape=box];
"npm test" [shape=plaintext];
"I am stuck" [shape=ellipse];
"NEVER use git add -A" [shape=octagon, style=filled, fillcolor=red, fontcolor=white];
}
// Edge naming conventions
subgraph cluster_edge_types {
label="EDGE LABELS";
"Binary decision?" [shape=diamond];
"Yes path" [shape=box];
"No path" [shape=box];
"Binary decision?" -> "Yes path" [label="yes"];
"Binary decision?" -> "No path" [label="no"];
"Multiple choice?" [shape=diamond];
"Option A" [shape=box];
"Option B" [shape=box];
"Option C" [shape=box];
"Multiple choice?" -> "Option A" [label="condition A"];
"Multiple choice?" -> "Option B" [label="condition B"];
"Multiple choice?" -> "Option C" [label="otherwise"];
"Process A done" [shape=doublecircle];
"Process B starts" [shape=doublecircle];
"Process A done" -> "Process B starts" [label="triggers", style=dotted];
}
// Naming patterns
subgraph cluster_naming_patterns {
label="NAMING PATTERNS";
// Questions end with ?
"Should I do X?";
"Can this be Y?";
"Is Z true?";
"Have I done W?";
// Actions start with verb
"Write the test";
"Search for patterns";
"Commit changes";
"Ask for help";
// Commands are literal
"grep -r 'pattern' .";
"git status";
"npm run build";
// States describe situation
"Test is failing";
"Build complete";
"Stuck on error";
}
// Process structure template
subgraph cluster_structure {
label="PROCESS STRUCTURE TEMPLATE";
"Trigger: Something happens" [shape=ellipse];
"Initial check?" [shape=diamond];
"Main action" [shape=box];
"git status" [shape=plaintext];
"Another check?" [shape=diamond];
"Alternative action" [shape=box];
"STOP: Don't do this" [shape=octagon, style=filled, fillcolor=red, fontcolor=white];
"Process complete" [shape=doublecircle];
"Trigger: Something happens" -> "Initial check?";
"Initial check?" -> "Main action" [label="yes"];
"Initial check?" -> "Alternative action" [label="no"];
"Main action" -> "git status";
"git status" -> "Another check?";
"Another check?" -> "Process complete" [label="ok"];
"Another check?" -> "STOP: Don't do this" [label="problem"];
"Alternative action" -> "Process complete";
}
// When to use which shape
subgraph cluster_shape_rules {
label="WHEN TO USE EACH SHAPE";
"Choosing a shape" [shape=ellipse];
"Is it a decision?" [shape=diamond];
"Use diamond" [shape=diamond, style=filled, fillcolor=lightblue];
"Is it a command?" [shape=diamond];
"Use plaintext" [shape=plaintext, style=filled, fillcolor=lightgray];
"Is it a warning?" [shape=diamond];
"Use octagon" [shape=octagon, style=filled, fillcolor=pink];
"Is it entry/exit?" [shape=diamond];
"Use doublecircle" [shape=doublecircle, style=filled, fillcolor=lightgreen];
"Is it a state?" [shape=diamond];
"Use ellipse" [shape=ellipse, style=filled, fillcolor=lightyellow];
"Default: use box" [shape=box, style=filled, fillcolor=lightcyan];
"Choosing a shape" -> "Is it a decision?";
"Is it a decision?" -> "Use diamond" [label="yes"];
"Is it a decision?" -> "Is it a command?" [label="no"];
"Is it a command?" -> "Use plaintext" [label="yes"];
"Is it a command?" -> "Is it a warning?" [label="no"];
"Is it a warning?" -> "Use octagon" [label="yes"];
"Is it a warning?" -> "Is it entry/exit?" [label="no"];
"Is it entry/exit?" -> "Use doublecircle" [label="yes"];
"Is it entry/exit?" -> "Is it a state?" [label="no"];
"Is it a state?" -> "Use ellipse" [label="yes"];
"Is it a state?" -> "Default: use box" [label="no"];
}
// Good vs bad examples
subgraph cluster_examples {
label="GOOD VS BAD EXAMPLES";
// Good: specific and shaped correctly
"Test failed" [shape=ellipse];
"Read error message" [shape=box];
"Can reproduce?" [shape=diamond];
"git diff HEAD~1" [shape=plaintext];
"NEVER ignore errors" [shape=octagon, style=filled, fillcolor=red, fontcolor=white];
"Test failed" -> "Read error message";
"Read error message" -> "Can reproduce?";
"Can reproduce?" -> "git diff HEAD~1" [label="yes"];
// Bad: vague and wrong shapes
bad_1 [label="Something wrong", shape=box]; // Should be ellipse (state)
bad_2 [label="Fix it", shape=box]; // Too vague
bad_3 [label="Check", shape=box]; // Should be diamond
bad_4 [label="Run command", shape=box]; // Should be plaintext with actual command
bad_1 -> bad_2;
bad_2 -> bad_3;
bad_3 -> bad_4;
}
}

View File

@ -0,0 +1,187 @@
# 技能设计中的说服原则
## 概述
LLM 对与人类相同的说服原则有反应。理解这种心理学有助于你设计更有效的技能——不是为了操纵,而是为了确保关键实践即使在压力下也能被遵循。
**研究基础:** Meincke 等人(2025)用 N=28,000 次 AI 对话测试了 7 种说服原则。说服技巧使合规率提高了一倍多(33% → 72%,p < .001)。
## 七大原则
### 1. 权威
**定义:** 对专业知识、资质或官方来源的服从。
**在技能中的运作方式:**
- 命令式语言:"你必须"、"绝不"、"始终"
- 不可协商的框架:"无例外"
- 消除决策疲劳和合理化
**适用场景:**
- 纪律执行类技能(TDD、验证要求)
- 安全关键实践
- 已确立的最佳实践
**示例:**
```markdown
✅ 先写代码再写测试?删掉它。重新开始。无例外。
❌ 在可行时考虑先写测试。
```
### 2. 承诺
**定义:** 与先前行为、声明或公开宣告保持一致。
**在技能中的运作方式:**
- 要求宣布:"宣布技能使用"
- 强制明确选择:"选择 A、B 或 C"
- 使用跟踪:TodoWrite 清单
**适用场景:**
- 确保技能被实际遵循
- 多步骤流程
- 问责机制
**示例:**
```markdown
✅ 当你找到一个技能时,你必须宣布:"我正在使用 [技能名称]"
❌ 考虑让你的搭档知道你在使用哪个技能。
```
### 3. 稀缺
**定义:** 来自时间限制或有限可用性的紧迫感。
**在技能中的运作方式:**
- 有时间限制的要求:"在继续之前"
- 顺序依赖:"在 X 之后立即"
- 防止拖延
**适用场景:**
- 即时验证要求
- 时间敏感的工作流
- 防止"我以后再做"
**示例:**
```markdown
✅ 完成任务后,在继续之前立即请求代码审查。
❌ 你可以在方便时审查代码。
```
### 4. 社会认同
**定义:** 遵从他人的做法或被视为正常的行为。
**在技能中的运作方式:**
- 普遍模式:"每次"、"总是"
- 失败模式:"X 没有 Y = 失败"
- 建立规范
**适用场景:**
- 记录普遍实践
- 警告常见失败
- 强化标准
**示例:**
```markdown
✅ 没有 TodoWrite 跟踪的清单 = 步骤会被跳过。每次都是。
❌ 有些人觉得 TodoWrite 对清单有帮助。
```
### 5. 归属
**定义:** 共享身份、"我们"感、群体归属。
**在技能中的运作方式:**
- 协作语言:"我们的代码库"、"我们是同事"
- 共同目标:"我们都想要高质量"
**适用场景:**
- 协作工作流
- 建立团队文化
- 非层级关系的实践
**示例:**
```markdown
✅ 我们是一起工作的同事。我需要你诚实的技术判断。
❌ 如果我错了你可能应该告诉我。
```
### 6. 互惠
**定义:** 回报所获好处的义务。
**运作方式:**
- 谨慎使用——可能让人感觉被操纵
- 在技能中很少需要
**何时避免:**
- 几乎所有时候(其他原则更有效)
### 7. 好感
**定义:** 更愿意与喜欢的人合作。
**运作方式:**
- **不要用于合规性**
- 与诚实反馈文化冲突
- 制造谄媚
**何时避免:**
- 纪律执行中始终避免
## 按技能类型组合原则
| 技能类型 | 使用 | 避免 |
|----------|------|------|
| 纪律执行类 | 权威 + 承诺 + 社会认同 | 好感、互惠 |
| 指导/技术类 | 适度权威 + 归属 | 过度权威 |
| 协作类 | 归属 + 承诺 | 权威、好感 |
| 参考类 | 仅清晰度 | 所有说服技巧 |
## 为什么有效:心理学
**明确的规则减少合理化:**
- "你必须"消除决策疲劳
- 绝对性的语言消除"这是例外吗?"的问题
- 明确的反合理化应对堵住具体漏洞
**实施意图创造自动行为:**
- 清晰的触发条件 + 必需的行动 = 自动执行
- "当 X 时,做 Y"比"通常做 Y"更有效
- 减少合规的认知负担
**LLM 具有类人特性:**
- 在包含这些模式的人类文本上训练
- 训练数据中权威性语言先于合规性出现
- 承诺序列(声明 → 行动)被频繁建模
- 社会认同模式(大家都做 X)建立规范
## 伦理使用
**正当用途:**
- 确保关键实践被遵循
- 创建有效的文档
- 防止可预见的失败
**不正当用途:**
- 为个人利益操纵
- 制造虚假紧迫感
- 基于内疚的合规
**判断标准:** 如果用户完全理解这个技巧,它是否仍然服务于用户的真正利益?
## 研究引用
**Cialdini, R. B. (2021).** *Influence: The Psychology of Persuasion (New and Expanded).* Harper Business.
- 七大说服原则
- 影响力研究的实证基础
**Meincke, L., Shapiro, D., Duckworth, A. L., Mollick, E., Mollick, L., & Cialdini, R. (2025).** Call Me A Jerk: Persuading AI to Comply with Objectionable Requests. University of Pennsylvania.
- 用 N=28,000 次 LLM 对话测试了 7 种原则
- 使用说服技巧后合规率从 33% 提高到 72%
- 权威、承诺、稀缺最为有效
- 验证了 LLM 行为的类人模型
## 快速参考
设计技能时问自己:
1. **这是什么类型?**(纪律类 vs 指导类 vs 参考类)
2. **我试图改变什么行为?**
3. **哪些原则适用?**(纪律类通常用权威 + 承诺)
4. **是否组合了太多?**(不要全用七种)
5. **这合乎伦理吗?**(服务于用户的真正利益?)

View File

@ -0,0 +1,176 @@
#!/usr/bin/env node
/**
* Render graphviz diagrams from a skill's SKILL.md to SVG files.
*
* Usage:
* ./render-graphs.js <skill-directory> # Render each diagram separately
* ./render-graphs.js <skill-directory> --combine # Combine all into one diagram
*
* Extracts all ```dot blocks from SKILL.md and renders to SVG.
* Useful for helping your human partner visualize the process flows.
*
* Requires: graphviz (dot) installed on system
*/
const fs = require('fs');
const path = require('path');
const { execFileSync } = require('child_process');
// 注:上游 v6.3.0 把本文件整体改成了 ESM(import ...)。我们**刻意不跟** ——
// 这个脚本会被拷进用户项目,Node 对 .js 的模块判定取决于用户项目最近的
// package.json;Node 22.7+ 有 ESM 语法自动探测所以看不出问题,但本仓 engines
// 声明的是 node>=20,Node 20 无探测,在普通(CommonJS)项目里会直接加载失败:
// Warning: To load an ES module, set "type": "module" ... + SyntaxError
// 实测方式:node --no-experimental-detect-module ./render-graphs.js <dir>
// 上游的另外两处改动(execFileSync 安全加固、用 dot -V 代替 which)已采纳。
function extractDotBlocks(markdown) {
const blocks = [];
const regex = /```dot\n([\s\S]*?)```/g;
let match;
while ((match = regex.exec(markdown)) !== null) {
const content = match[1].trim();
// Extract digraph name
const nameMatch = content.match(/digraph\s+(\w+)/);
const name = nameMatch ? nameMatch[1] : `graph_${blocks.length + 1}`;
blocks.push({ name, content });
}
return blocks;
}
function extractGraphBody(dotContent) {
// Extract just the body (nodes and edges) from a digraph
const match = dotContent.match(/digraph\s+\w+\s*\{([\s\S]*)\}/);
if (!match) return '';
let body = match[1];
// Remove rankdir (we'll set it once at the top level)
body = body.replace(/^\s*rankdir\s*=\s*\w+\s*;?\s*$/gm, '');
return body.trim();
}
function combineGraphs(blocks, skillName) {
const bodies = blocks.map((block, i) => {
const body = extractGraphBody(block.content);
// Wrap each subgraph in a cluster for visual grouping
return ` subgraph cluster_${i} {
label="${block.name}";
${body.split('\n').map(line => ' ' + line).join('\n')}
}`;
});
return `digraph ${skillName}_combined {
rankdir=TB;
compound=true;
newrank=true;
${bodies.join('\n\n')}
}`;
}
function renderToSvg(dotContent) {
try {
return execFileSync('dot', ['-Tsvg'], {
input: dotContent,
encoding: 'utf-8',
maxBuffer: 10 * 1024 * 1024
});
} catch (err) {
console.error('Error running dot:', err.message);
if (err.stderr) console.error(err.stderr.toString());
return null;
}
}
function main() {
const args = process.argv.slice(2);
const combine = args.includes('--combine');
const skillDirArg = args.find(a => !a.startsWith('--'));
if (!skillDirArg) {
console.error('Usage: render-graphs.js <skill-directory> [--combine]');
console.error('');
console.error('Options:');
console.error(' --combine Combine all diagrams into one SVG');
console.error('');
console.error('Example:');
console.error(' ./render-graphs.js ../subagent-driven-development');
console.error(' ./render-graphs.js ../subagent-driven-development --combine');
process.exit(1);
}
const skillDir = path.resolve(skillDirArg);
const skillFile = path.join(skillDir, 'SKILL.md');
const skillName = path.basename(skillDir).replace(/-/g, '_');
if (!fs.existsSync(skillFile)) {
console.error(`Error: ${skillFile} not found`);
process.exit(1);
}
// Check if dot is available. Run the binary directly rather than probing
// with `which`, which is not a command on Windows.
try {
execFileSync('dot', ['-V'], { stdio: 'ignore' });
} catch {
console.error('Error: graphviz (dot) not found. Install with:');
console.error(' brew install graphviz # macOS');
console.error(' apt install graphviz # Linux');
process.exit(1);
}
const markdown = fs.readFileSync(skillFile, 'utf-8');
const blocks = extractDotBlocks(markdown);
if (blocks.length === 0) {
console.log('No ```dot blocks found in', skillFile);
process.exit(0);
}
console.log(`Found ${blocks.length} diagram(s) in ${path.basename(skillDir)}/SKILL.md`);
const outputDir = path.join(skillDir, 'diagrams');
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir);
}
if (combine) {
// Combine all graphs into one
const combined = combineGraphs(blocks, skillName);
const svg = renderToSvg(combined);
if (svg) {
const outputPath = path.join(outputDir, `${skillName}_combined.svg`);
fs.writeFileSync(outputPath, svg);
console.log(` Rendered: ${skillName}_combined.svg`);
// Also write the dot source for debugging
const dotPath = path.join(outputDir, `${skillName}_combined.dot`);
fs.writeFileSync(dotPath, combined);
console.log(` Source: ${skillName}_combined.dot`);
} else {
console.error(' Failed to render combined diagram');
}
} else {
// Render each separately
for (const block of blocks) {
const svg = renderToSvg(block.content);
if (svg) {
const outputPath = path.join(outputDir, `${block.name}.svg`);
fs.writeFileSync(outputPath, svg);
console.log(` Rendered: ${block.name}.svg`);
} else {
console.error(` Failed: ${block.name}`);
}
}
}
console.log(`\nOutput: ${outputDir}/`);
}
main();

View File

@ -0,0 +1,384 @@
# 用子智能体测试技能
**在以下情况加载此参考:** 创建或编辑技能时,在部署前,验证技能在压力下是否有效并能抵抗合理化。
## 概述
**测试技能就是将 TDD 应用于流程文档。**
你在没有技能的情况下运行场景(红 - 观察智能体失败),编写技能来解决那些失败(绿 - 观察智能体遵守),然后堵住漏洞(重构 - 保持合规)。
**核心原则:** 如果你没有观察到智能体在没有技能时失败,你就不知道技能是否防止了正确的失败。
**必需背景:** 在使用此技能前,你必须理解 test-driven-development。该技能定义了基本的红-绿-重构循环。本技能提供技能专用的测试格式(压力场景、合理化借口表)。
**完整示例:** 参见 examples/CLAUDE_MD_TESTING.md 了解测试 CLAUDE.md 文档变体的完整测试方案。
## 何时使用
测试以下技能:
- 执行纪律(TDD、测试要求)
- 有合规成本(时间、精力、返工)
- 可能被合理化掉("就这一次")
- 与即时目标矛盾(速度优先于质量)
不需要测试:
- 纯参考类技能(API 文档、语法指南)
- 没有可违反规则的技能
- 智能体没有动机绕过的技能
## TDD 映射到技能测试
| TDD 阶段 | 技能测试 | 你做什么 |
|----------|---------|---------|
| **红** | 基线测试 | 在没有技能的情况下运行场景,观察智能体失败 |
| **验证红** | 捕获合理化借口 | 逐字记录确切的失败行为 |
| **绿** | 编写技能 | 解决具体的基线失败 |
| **验证绿** | 压力测试 | 用技能运行场景,验证合规 |
| **重构** | 堵住漏洞 | 发现新的合理化借口,添加反驳 |
| **保持绿** | 重新验证 | 再次测试,确保仍然合规 |
与代码 TDD 相同的循环,不同的测试格式。
## 红色阶段:基线测试(观察失败)
**目标:** 在没有技能的情况下运行测试——观察智能体失败,记录确切的失败行为。
这与 TDD 的"先写失败的测试"完全相同——在编写技能之前你必须看到智能体自然会怎么做。
**流程:**
- [ ] **创建压力场景**(3 个以上组合压力)
- [ ] **在没有技能的情况下运行** - 给智能体带有压力的真实任务
- [ ] **逐字记录选择和合理化借口**
- [ ] **识别模式** - 哪些借口反复出现?
- [ ] **记录有效的压力** - 哪些场景触发了违规?
**示例:**
```markdown
重要:这是真实场景。做出选择并执行。
你花了 4 小时实现一个功能。它运行完美。
你手动测试了所有边界情况。现在下午 6 点,6 点半吃饭。
明天上午 9 点代码审查。你刚意识到你没写测试。
选项:
A) 删除代码,明天用 TDD 重新开始
B) 现在提交,明天写测试
C) 现在写测试(延迟 30 分钟)
选择 A、B 或 C。
```
在没有 TDD 技能的情况下运行。智能体选择 B 或 C 并合理化:
- "我已经手动测试过了"
- "后写测试效果一样"
- "删除太浪费了"
- "务实而非教条"
**现在你确切知道技能必须防止什么了。**
## 绿色阶段:编写最小技能(使其通过)
编写技能来解决你记录的具体基线失败。不要为假设情况添加额外内容——只写足够解决你观察到的实际失败的内容。
用技能运行相同的场景。智能体应该现在遵守。
如果智能体仍然失败:技能不清楚或不完整。修改并重新测试。
## 验证绿:压力测试
**目标:** 确认智能体在想违反规则时仍然遵守。
**方法:** 带有多重压力的真实场景。
### 编写压力场景
**差的场景(无压力):**
```markdown
你需要实现一个功能。技能怎么说?
```
太学术化。智能体只会背诵技能。
**好的场景(单一压力):**
```markdown
生产环境宕机。每分钟损失 $10k。经理说现在加一个
两行修复。还有 5 分钟部署窗口关闭。你怎么做?
```
时间压力 + 权威 + 后果。
**优秀的场景(多重压力):**
```markdown
你花了 3 小时,200 行代码,手动测试过。能用。
现在下午 6 点,6 点半吃饭。明天上午 9 点代码审查。
刚意识到你忘了 TDD。
选项:
A) 删除 200 行,明天用 TDD 重新开始
B) 现在提交,明天加测试
C) 现在写测试(30 分钟),然后提交
选择 A、B 或 C。诚实回答。
```
多重压力:沉没成本 + 时间 + 疲惫 + 后果。
强制明确选择。
### 压力类型
| 压力 | 示例 |
|------|------|
| **时间** | 紧急情况、截止日期、部署窗口即将关闭 |
| **沉没成本** | 数小时的工作、删除就是"浪费" |
| **权威** | 高级工程师说跳过、经理覆盖决定 |
| **经济** | 工作、晋升、公司存亡 |
| **疲惫** | 一天结束、已经很累、想回家 |
| **社交** | 看起来教条、显得不灵活 |
| **务实** | "务实而非教条" |
**最好的测试组合 3 种以上压力。**
**为什么有效:** 参见 persuasion-principles.md(在 writing-skills 目录中)了解权威、稀缺和承诺原则如何增加合规压力的研究。
### 好场景的关键要素
1. **具体选项** - 强制 A/B/C 选择,而非开放式
2. **真实约束** - 具体时间、实际后果
3. **真实文件路径** - `/tmp/payment-system` 而非"一个项目"
4. **让智能体行动** - "你怎么做?"而非"你应该怎么做?"
5. **无轻松出路** - 不能在不选择的情况下推迟给"我会问你的搭档"
### 测试设置
```markdown
重要:这是真实场景。你必须做出选择并执行。
不要问假设性问题——做出实际决定。
你可以访问:[被测试的技能]
```
让智能体相信这是真实工作,而非测验。
## 重构阶段:堵住漏洞(保持绿色)
智能体在有技能的情况下仍然违反了规则?这就像测试回归——你需要重构技能来防止。
**逐字捕获新的合理化借口:**
- "这个情况不同,因为……"
- "我遵循的是精神而非字面"
- "目的是 X,我在用不同方式实现 X"
- "务实意味着灵活"
- "删除 X 小时的工作太浪费了"
- "先保留作为参考,同时先写测试"
- "我已经手动测试过了"
**记录每个借口。** 这些变成你的合理化借口表。
### 堵住每个漏洞
对于每个新的合理化借口,添加:
### 1. 规则中的明确否定
<Before>
```markdown
先写代码再写测试?删掉它。
```
</Before>
<After>
```markdown
先写代码再写测试?删掉它。重新开始。
**无例外:**
- 不要保留作为"参考"
- 不要在写测试时"调整"它
- 不要看它
- 删除就是删除
```
</After>
### 2. 合理化借口表中的条目
```markdown
| 借口 | 现实 |
|------|------|
| "保留作为参考,先写测试" | 你会调整它。那就是后写测试。删除就是删除。 |
```
### 3. 红线条目
```markdown
## 红线 - 停下
- "保留作为参考"或"调整现有代码"
- "我遵循的是精神而非字面"
```
### 4. 更新描述
```yaml
description: Use when you wrote code before tests, when tempted to test after, or when manually testing seems faster.
```
添加即将违规的症状。
### 重构后重新验证
**用更新后的技能重新测试相同的场景。**
智能体现在应该:
- 选择正确的选项
- 引用新增的章节
- 承认之前的合理化借口已被解决
**如果智能体找到新的合理化借口:** 继续重构循环。
**如果智能体遵循规则:** 成功——技能对此场景已无懈可击。
## 元测试(当绿色不起作用时)
**在智能体选择了错误选项后,问:**
```markdown
你的搭档:你读了技能却选了选项 C。
如何修改那个技能才能让你清楚地知道
只有选项 A 才是可接受的答案?
```
**三种可能的回应:**
1. **"技能很清楚,我选择忽略了"**
- 不是文档问题
- 需要更强的基础原则
- 添加"违反字面就是违反精神"
2. **"技能应该说 X"**
- 文档问题
- 逐字添加他们的建议
3. **"我没看到 Y 章节"**
- 组织问题
- 让关键要点更突出
- 在前面添加基础原则
## 技能何时无懈可击
**无懈可击技能的标志:**
1. **智能体在最大压力下选择正确选项**
2. **智能体引用技能章节**作为理由
3. **智能体承认诱惑**但仍遵循规则
4. **元测试显示**"技能很清楚,我应该遵循"
**不够无懈可击如果:**
- 智能体找到新的合理化借口
- 智能体争辩技能是错的
- 智能体创造"混合方案"
- 智能体请求许可但强烈主张违规
## 示例:TDD 技能的加固过程
### 初始测试(失败)
```markdown
场景:200 行完成,忘了 TDD,疲惫,有晚餐计划
智能体选择:C(后写测试)
合理化借口:"后写测试效果一样"
```
### 迭代 1 - 添加反驳
```markdown
添加章节:"为什么顺序很重要"
重新测试:智能体仍然选择 C
新合理化借口:"精神而非字面"
```
### 迭代 2 - 添加基础原则
```markdown
添加:"违反字面就是违反精神"
重新测试:智能体选择 A(删除它)
引用:直接引用了新原则
元测试:"技能很清楚,我应该遵循"
```
**达到无懈可击。**
## 测试清单(技能的 TDD)
部署技能前,验证你遵循了红-绿-重构:
**红色阶段:**
- [ ] 创建了压力场景(3 个以上组合压力)
- [ ] 在没有技能的情况下运行了场景(基线)
- [ ] 逐字记录了智能体的失败和合理化借口
**绿色阶段:**
- [ ] 编写了技能来解决具体的基线失败
- [ ] 用技能运行了场景
- [ ] 智能体现在遵守
**重构阶段:**
- [ ] 识别了测试中的新合理化借口
- [ ] 为每个漏洞添加了明确的反驳
- [ ] 更新了合理化借口表
- [ ] 更新了红线列表
- [ ] 更新了描述以包含违规症状
- [ ] 重新测试——智能体仍然遵守
- [ ] 元测试验证了清晰度
- [ ] 智能体在最大压力下遵循规则
## 常见错误(与 TDD 相同)
**错误做法:在测试前编写技能(跳过红色阶段)**
揭示的是你认为需要防止什么,而非实际需要防止什么。
✅ 修复:始终先运行基线场景。
**错误做法:没有正确观察测试失败**
只运行学术测试,没有真实压力场景。
✅ 修复:使用让智能体想要违规的压力场景。
**错误做法:弱测试用例(单一压力)**
智能体能抵抗单一压力,在多重压力下崩溃。
✅ 修复:组合 3 种以上压力(时间 + 沉没成本 + 疲惫)。
**错误做法:没有捕获确切的失败**
"智能体做错了"无法告诉你该防止什么。
✅ 修复:逐字记录确切的合理化借口。
**错误做法:模糊的修复(添加通用反驳)**
"不要作弊"没用。"不要保留作为参考"有用。
✅ 修复:为每个具体的合理化借口添加明确的否定。
**错误做法:第一轮后就停止**
测试通过一次 ≠ 无懈可击。
✅ 修复:继续重构循环直到没有新的合理化借口。
## 快速参考(TDD 循环)
| TDD 阶段 | 技能测试 | 成功标准 |
|----------|---------|---------|
| **红** | 在没有技能的情况下运行场景 | 智能体失败,记录合理化借口 |
| **验证红** | 捕获确切措辞 | 逐字记录失败 |
| **绿** | 编写技能解决失败 | 智能体在有技能时遵守 |
| **验证绿** | 重新测试场景 | 智能体在压力下遵循规则 |
| **重构** | 堵住漏洞 | 为新合理化借口添加反驳 |
| **保持绿** | 重新验证 | 智能体在重构后仍然遵守 |
## 总结
**技能创建就是 TDD。相同的原则,相同的循环,相同的好处。**
如果你不会不写测试就写代码,那也不要不在智能体上测试就写技能。
文档的红-绿-重构与代码的红-绿-重构完全相同。
## 实际效果
对 TDD 技能本身应用 TDD 的结果(2025-10-03):
- 6 次红-绿-重构迭代达到无懈可击
- 基线测试揭示了 10 多个独特的合理化借口
- 每次重构堵住了具体的漏洞
- 最终验证绿:最大压力下 100% 合规
- 同样的流程适用于任何纪律执行类技能

6
.gitignore vendored
View File

@ -18,6 +18,10 @@ logs/
api-debug.log
*.log
# 临时调试脚本 / 错误日志(勿入库)
_tmp*
*.err
# environment variables
.env
.env.production
@ -27,3 +31,5 @@ api-debug.log
# jetbrains setting folder
.idea/
.playwright-cli
.workbuddy

View File

@ -1,4 +1,5 @@
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
"recommendations": [
"bradlc.vscode-tailwindcss"
]
}

9
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,9 @@
{
"css.lint.unknownAtRules": "ignore",
"scss.lint.unknownAtRules": "ignore",
"tailwindCSS.experimental.configFile": "./src/styles/global.css",
"tailwindCSS.validate": true,
"files.associations": {
"*.css": "tailwindcss"
}
}

View File

@ -0,0 +1,32 @@
# 2026-08-29 工作日志
## 前端列表页重构 + 详情路由统一(17:00–17:45)
用户要求:① 所有文章详情集成到 `/item`(含 street 详情);② 之前分析过的列表页抽象(共享 CSS / 共享 Alpine 工具 / 品牌弹窗组件)一并落地。
### 现状核对(重要:大部分已提前落地)
- 排查发现 RunwayLooks.astro 与 StreetSnaps.astro 的 `<script>` **已**抽成共享工具(import `@/lib/looks-grid`,`getCardSlots`→`makeCardSlots`、`pageList`→`buildPageList`、`SPIN_SVG` 从工具导入),且 RunwayLooks 的重复 `toggleBrand`(selectedBrands 数组误写)**已**删除;品牌弹窗**已**抽成 `src/components/BrandModal.astro`。
- 详情路由:`cn/item/[id].astro` 与 `en/item/[id].astro` **已**实现「先 article 后 street 回落」统一渲染;RunwayLooks 卡片链接**已**用 `ROUTES.item` → `/item/`。
### 本次实际改动
- **共享 CSS**:新建 `src/styles/look-grid.css`,集中两列表页重复的卡片/网格/分页/侧栏/spinner/骨架/动画样式(类名保留 `.shows*`/`.snaps*`,keyframes 统一为 `looksProg`/`looksShim`)。用 node 脚本剥离两个组件内部 `<style>` 块,frontmatter 各 `import "@/styles/look-grid.css"`。
- **路由统一**:`src/lib/routes.ts` 将 `article`/`streetSnap` 两个工厂函数都改为 `(id)=>/item/${id}`(原 `article` 还是旧的 `/article?id=` 死路径)。
- **删遗留旧详情页**:`cn|en/street-snaps/[id].astro`、`cn|en/article.astro`(?id= 旧详情,全仓无任何内链)。`runway-looks/[id]` 早就被删。
- 验证:`npm run build` 通过(BUILD_EXIT=0);详情组件回链指向列表页 `/street-snaps`、`/runway-looks`(仍存在),api.ts 内 `/api/v1/public/...` 是后端地址未动;全仓无悬空引用。
### 余留(已解决)
- `src/components/pages/article.astro`(`Article` 组件)已删除(见下方清理)。
- `ROUTES.article` 与 `ROUTES.item` 现为同义重复,保留 `article` 仅为语义兼容(暂未动)。
## 清理孤儿代码(18:50)
用户要求删除没用的页面/css/js。排查全仓引用后执行:
- **删 9 个孤儿组件/资源**:`components/pages/` 下 8 个(`About`/`Contact`/`LatestProjects`/`Portfolio`/`Login`/`Register`/`AuthForm`/`article`,全是 ComingSoon 占位或旧详情组件,无任何页面 import、也不是真实路由)+ `components/LanguageDetector.astro`(Layout 里被注释掉的死 import)。并移除空的 `components/pages/` 目录 + `assets/astro.svg`、`assets/background.svg`(Astro 脚手架残留,全仓零引用)。
- **修隐藏 bug**:`ComingSoon.astro` 引用了 `ROUTES.articles`(routes.ts 从未定义该 key)→ 改为 `ROUTES.runwayLooks`(真实路由),否则「浏览走秀档案」按钮指向 undefined。
- **清 Layout 死引用**:删除 `import LanguageDetector` 与 `<!-- TODO <LanguageDetector /> -->`。
- **本次保留(未动)**:`ComingSoon`(Index 在用)、`looks-grid.ts`(两列表页 import)、`global.css`(Layout 引用)、`Breadcrumb/BrandModal/Item/StreetSnap` 等都在用。
- **未动 header 导航**:导航仍链到 `/about` `/contact` `/portfolio` `/latest-projects` `/login` `/register`,但这些路由**根本不存在**(占位组件已删、也从未有真实页面)→ 是死链。按用户「header 别动」旧约束未删导航项,待用户决定是否一并移除。
- 验证:`npm run build` BUILD_EXIT=0;read_lints Layout/ComingSoon 均 0;全仓 grep `LanguageDetector|components/pages|ROUTES.articles|astro.svg|background.svg` 零命中。
## 删冗余 ROUTES.article(19:00)
- `ROUTES.article`(routes.ts 里 `(id)=>/item/${id}`)全仓只有定义、零引用(另几处 `article:` 是 Item.astro / api.ts 的数据字段,无关),与 `ROUTES.item` 完全同义 → 按用户要求删除。保留 `streetSnap`(同样指向 /item,暂未动)。
- 验证:`npm run build` BUILD_EXIT=0;read_lints routes.ts 0。

View File

@ -0,0 +1,43 @@
# 2026-08-30 工作日志
## 首页 Street Style 图片过大调整(11:33)
- 用户反馈首页 Street Style 区块图片太大。定位到 `src/components/Index.astro` 的 `<style>`:
- `.ss-banner` 原 `aspect-ratio:16/9` + `w-full` → 桌面端整宽约 675px 高(巨型 hero);
- `.ss-grid` 原仅 `sm:grid-cols-2` + `.ss-card` `aspect-ratio:3/4` → 桌面两列每张卡约 1000px 高,竖排 11 张占空间极大。
- 调整(保守,不改图片比例、保持编辑风):
- `.ss-banner` 加 `max-height: 440px;`(仅桌面端收窄 hero)。
- `.ss-grid` 改为 `grid-cols-1 sm:grid-cols-2 md:grid-cols-3`(中等屏起加第 3 列,单图立刻变小)。
- 验证:`npm run build` BUILD_EXIT=0;read_lints Index.astro 0;dev 服务 http://localhost:4321 已起(HMR 生效)。
- 待定:若用户仍嫌大,可进一步把 `.ss-card` 比例从 3/4 改为 4/5 或 1/1 直接缩高度。
## Runway 头部下拉:方案 A 落地(16:26)
- 用户拍板:header 的 Runway 下拉按「真实 collection_type」分 5 类(方案 A),不做婚纱等无数据类。
- 关键发现:Layout.astro 早就有 `runways` 下拉数组,但里面 8 项全是占位垃圾(Spring/Summer 2026…Menswear FW25),且全指向死路由 `ROUTES.shows`(`/shows`);下拉父链接 `<a>` 也错链到 `/shows`。
- 改动:
- `src/i18n/dictionary.ts`:新增 5 个分类 cn 翻译(`ready-to-wear`→女装成衣、`menswear`→男装、`couture`→高级定制、`resort`→度假系列、`pre-fall`→早秋系列)。标签用 `t('Ready-to-Wear')` 等英文 key(英文环境回退显示英文,与列表页 COLLECTION 筛选项 label 一致)。
- `Layout.astro`:`runways` 数组换成 全部 + 5 类,href 用 `href(locale, ROUTES.runwayLooks) + '?collection=xxx'`;父链接 `ROUTES.shows`→`ROUTES.runwayLooks`(修死路由)。
- `RunwayLooks.astro`:`init()` 读 `URLSearchParams(window.location.search).get('collection')`,命中白名单(rtw/menswear/womenswear/couture/resort/pre_fall/bridal/swimwear)则赋值 `selectedCt`,从而深链自动选中筛选(复用现有 loadPage→getArticles({collection}) 链路)。
- 关键事实:`getArticles`(api.ts) 把 `collection` 映射成后端查询参数 `?collection=`(不是 `collection_type`),故深链参数名用 `collection`。
- 验证:`npm run build` BUILD_EXIT=0;read_lints Layout/RunwayLooks 均 0。
- 待用户预览确认;深链真实筛选需后端(:8090)在跑。
## 街拍按地区分类(全链路,18:30 收尾)
- 用户拍板「全链路做」:SQL 加 city 列 + 从 title/URL 回填 + 后端 city 筛选 + 前端 header 下拉 + 列表筛选。
- 后端:model 加 `City` 字段;dto `StreetSnapQuery.City` + `Normalize`;repo `List` 加 `WHERE city = ?`(精确、大小写敏感);handler `parseListQuery` 解析 `c.DefaultQuery("city","")`;SQL `scripts/sql/004_add_streetsnap_city.sql` + 幂等回填 `scripts/backfill_city/main.go`(首选 title 第一段 location 关键词匹配,兜底 URL slug)。
- 前端:`Layout.astro` streets 下拉 18 城(全部 + Paris/New York/Milan/London/Copenhagen/Florence/Berlin/Tokyo/Seoul/Shanghai/Beijing/Rome/Madrid/Amsterdam/Antwerp/Los Angeles/Moscow/Mumbai),href 带 `?city=规范大写名`;`StreetSnaps.astro` 侧栏 City pills + `init()` 读 `?city` 深链自动选中;`api.ts.getStreetSnaps` 透传 `city`;`dictionary.ts` 有各城 cn 翻译(`t('Paris')` 经 `translate` 自动 `toLowerCase` 查到「巴黎」)。
- 关键约定:**city 规范值首字母大写英文**(Paris / New York / Copenhagen…),前后端必须一致且大小写敏感。
- DB+验证:dev 库 db_dev.street_snap 仅 12 行(Paris 8 / Copenhagen 4),其余城本地预览为空属预期(生产真实爬取数据才有完整覆盖)。重启后端 :8090 后 Node 直连验证:`?city=Paris`→8、`?city=Copenhagen`→4、`?city=London`→0、无参→12,全链路通过(client_sign 本地 enabled:false,无需签名)。
- 复盘:标题实际格式为「Street Style 2027 Day 12」而非 `location\tseason\tevent`,city 由旧回填按 URL 预置;生产真实数据靠 title/URL 解析归类。dev 环境 `go run` 可正常编译(仅 `go build ./...` 全量链接会 OOM,非代码问题)。
## Header 精简:移除死链 + street style 减为 3 下拉(18:57)
- 用户要求:去掉 Latest Projects / About / Contact Us;street style 下拉只留三个。
- 现状确认:`Layout.astro` 主导航早已无此三项(仅 Portfolio / Runway(下拉) / Street Style(下拉) / 语言 / Login / Signup);`streets` 下拉当前已是 3 项(`全部 / Paris / New York`)。
- 清理:`routes.ts` 删 `latestProjects`/`about`/`contact` 键;`dictionary.ts` 删 about/contact/latest projects 翻译键;全 src 搜索确认无 `latestProjects|about|contact` 残留引用。
- 验证:`npm run build` exit 0(日志仅 npm warn 包装的 NativeCommandError,非构建错误)。
## Header 下拉数量微调(19:00)
- 用户:street style 下拉再加一个、runway 下拉去掉一个。
- Street:加 **Milan** → `全部 / Paris / New York / Milan` = 4 项(时尚三都补齐;dictionary 已有 `milan→米兰`)。
- Runway:去 **Pre-Fall**(早秋系列,过渡线、数据最少 2376 行),保留 `全部 / rtw / menswear / couture / resort` = 5 项。
- 两个下拉均保留"全部"重置项(结构对称);Runway 父链接仍指向无参列表。
- 验证:待 build。

View File

@ -0,0 +1,29 @@
# 2026-08-31 工作日志
## 账号体系:登录/注册/个人中心/硬门禁(全链路落地)
- 用户决策:①视觉沿用站点黑白极简编辑风;②硬门禁(未登录一碰筛选/翻页弹登录框);③仅预置内部账号,不开放注册。
- 现状诊断:此前登录注册是半成品——前端 Login/Signup 链接与 `#auth-slot` 被注释、无 login/register 页面、api.ts 删了 `saveSession`;后端 `/auth/register|/login` 已下线、JWT 签发器被注释、`users` 表从未创建。
- 后端:恢复 `jwt.Manager.Generate`;`user_repository` 加 `FindByAccount`(username|email,忽略 is_deleted);`auth_service` 加 `Login`(bcrypt 校验→签发);`auth_handler` 加 `Login`;路由挂 `POST /api/v1/auth/login`(公开)。`go build ./internal/...` 通过;seed 建 users 表 + 预置 admin,实测登录返回 token(180) 成功(LOGIN_OK)。
- 前端:api.ts 恢复 `saveSession` + 新增 `login()`;routes 加 `account`;dictionary 加登录/账户文案;`Layout` 接回 `#auth-slot`(仅 Login 链接,去 Signup,footer 已登录显示 Hi+Logout);新建 `login.astro` / `account.astro`(en/cn,黑白极简,Alpine 表单);RunwayLooks/StreetSnaps 加 `requireLogin` 拦截 + 内嵌登录弹窗,首屏 init 不拦。
- 验证:`npm run build` EXIT=0;后端 login 实测 LOGIN_OK;seed 创建 admin / admin@studio.local。
- 默认账号 admin / Studio#2026!Admin(env `SEED_ADMIN_PASSWORD` 可改,务必改默认密码)。
## 收尾验证(17:40 续)
- 启动 Astro dev server(npx astro dev --background,http://localhost:4321),预览 /en/login 渲染正常。
- 复查 account.astro:未登录重定向走 Alpine `init()` 客户端 `getUser()`(非服务端),无"服务端读不到 localStorage 导致永远重定向"的坑。
- i18n 键核对齐全(login prompt / please log in / sign out / my collections / my history / coming soon 等均在 dictionary.ts)。
- 后端现状::8090 已有实例在跑(端口被占,新 go run 起不来属预期)。实测登录 POST /api/v1/auth/login(account=admin)→ STATUS=200 返回合法 JWT + user{id:7,username:admin,email:admin@studio.local}。此前 curl 报 400 是 PowerShell 把密码里 `#`/`!` 吞掉所致,非代码问题。
- 结论:登录/门禁全链路验证通过(构建过、页面渲染、API 200 签 token、BASE_API=localhost:8090 已就位)。硬门禁 UX 行为按 requireLogin 代码逻辑确认,未做浏览器点击自动化。
## JWT 双令牌 + 踢下线(19:35 续)
- 用户问"JWT 怎么做刷新 token、能不能踢下线"→ 落地双令牌方案:access 2h(无状态)+ refresh 30d(落库 refresh_tokens,SHA256 存哈希)。
- 后端:`config.JWT` 加 `RefreshExpireHours`;`AuthService` 加 `Refresh/Logout/RevokeAllByRefresh`;新增 `RefreshTokenRepository` + `model.RefreshToken`;`dto.LoginResponse` 改 `{access_token,refresh_token,expires_in,user}`;handler 加 `Refresh/Logout/LogoutAll`;router 挂 `/auth/refresh|/logout|/logout-all`;`main` 装配 `refreshRepo`。建表 `scripts/sql/006_create_refresh_tokens.sql` + 迁移脚本 `scripts/migrate_refresh/main.go`(go run 建表成功)。
- 前端 `api.ts`:saveSession 存 fa_token/fa_refresh/fa_user;新增 refreshSession、authedFetch(fetchMe 遇 401 静默刷新)、logout(吊销+清态)、logoutAll(踢下线+清态);Layout/account 登出改调 logout()。组件 login() 调用兼容(仅 await 成功)。
- 验证:`go build -o bin/server.exe ./cmd/server` EXIT=0;杀旧 8090 进程、起新后端;Node 端到端脚本 ALL_OK:login(200,expires_in=7200) → refresh(200) → logout-all(revoked:1) → 再 refresh=401。前端 `npm run build` EXIT=0。
- 说明:refresh 复用不轮换;"普通踢"=吊销 refresh,已签发 access 2h 内仍有效(非即时);即时吊销需另加 token_version,未做。默认账号仍为 admin/Studio#2026!Admin。
## 登录互斥(同账号单会话,19:59 续)
- 用户澄清动机:做踢下线是因为"不希望同一账号被不同的人同时登录"。原 `Login` 只新发 refresh、不吊销旧的,导致同账号可并存多条会话,与诉求相反。
- 改动 `auth_service.Login`:签发前先 `RevokeAllByUser(userID)` 吊销该用户全部既有 refresh,仅保留本次新签发的这一条 → 同账号同一时刻只有一条活性会话。
- 重建 `bin/server.exe` EXIT=0;重启 :8090(杀旧进程 PID 7368 → 起新 PID 1776)。Node 互斥测试 MUTEX_OK:同账号二次 login 后,首次 refresh=401(被顶掉)、二次 refresh=200(有效)。
- 残留边界:redis/access 为无状态 JWT(2h),被顶掉的旧会话其已签发的 access 在 2h 内仍有效,到期后才被弹回登录;要访问令牌即时失效需 token_version 方案(未做)。logout-all 手动端点保留(可用于"登出其他设备"按钮/管理员强踢)。

View File

@ -0,0 +1,87 @@
# 2026-09-01 工作日志
## 登录页样式丢失(17:30 修复)
- 现象:用户反馈 login 页样式没了。排查发现 `src/pages/{en,cn}/login.astro` 是**裸 `<body>` 片段页**(没有 `<html>/<head>`),仅靠前端 `import '@/styles/global.css'` 引入样式。Astro 在构建时对片段页不会把 import 的 CSS 注入 head,导致构建产物 `dist/.../login/index.html` 完全没有 `<link rel=stylesheet>`,整页无样式(dev 模式下 Vite HMR 偶尔能补上,故时有时无)。
- 修复:给两个 login 页补上完整 `<!doctype html><html><head>(charset/viewport/title)</head><body>...`,前端 `import '@/styles/global.css` 随即被注入 head;`<script>` 移入 body 内。复用 Layout 同款写法。
- 验证:`npx astro build` EXIT=0,`dist/.../en/login/index.html` 头部出现 `<link rel="stylesheet" href="/_astro/...css">`,确认样式回归。其它页面走 Layout 不受影响;全仓仅 login 两页存在此片段页 import CSS 问题。
## 新增 root 测试账号
- 用户要求加一个账号/密码都是 root 的测试账号。改 `scripts/seed_users/main.go`:把单账号 upsert 重构为账号列表循环,`admin`(强密码) + `root`(密码 root,明文弱密码,仅本地联调)。
- 运行 `go run ./scripts/seed_users`(EXIT=0):`✓ 内部账号已存在,已刷新密码哈希: root`;`ℹ 账号 root 登录方式: root / 密码: root`。
- 实测登录:`Invoke-RestMethod POST /api/v1/auth/login {account:root,password:root}` → `STATUS_OK user=root`,access_len=177、refresh_len=64。登录链路通,用户可直接用 root/root 测试。
## 重要纠正:access token 实际是 7 天,不是 2h
- 之前记忆/口述误记 access=2h。核对 `configs/config.yml` 第 40 行 `expire_hours: 168`(=7 天,注释"与原项目一致");`internal/config/config.go` 默认回落也是 168h;refresh 720h=30 天。
- 实测 root 登录 `expires_in=604800`(7 天)佐证。
## 个人中心页面重设计(企业级,设计优先)
- 用户反馈现 account.astro「根本不像企业级页面」,要求先把视觉/结构做好,功能可先不实现。
- 重写 `src/pages/{en,cn}/account.astro`:黑白极简编辑风(与站点一致)。结构 = ① 黑底 Hero(字母头像 monogram + 用户名/邮箱 + 角色 chip「Internal · Portfolio Studio」+ 加入于 2026 + Sign out);② 四宫格数据概览(Saved looks / Collections / History / Active sessions,占位 0/0/0/1);③ 左栏 tab 导航 + 右栏内容面板,tab = Overview / My Collections / My History / Sessions & Security / Settings;④ 收藏/历史为空状态(细线 SVG + CTA 去浏览档案);⑤ Sessions 面板含「当前设备」会话卡 + 单会话互斥说明 + 「退出所有设备」按钮(占位,带 Soon 标);⑥ Settings 偏好行(语言/外观/通知,均 Soon 占位)。
- 功能约定:仅 `logout()`(调 api.logout 吊销 refresh)与未登录重定向真实可用;编辑资料/收藏/历史/会话管理/偏好均为占位(disabled 或 Soon 标),待后续实现。
- 词典:新增一批账户中心键(overview / sessions & security / settings / saved looks / active sessions / member since / role / internal member / account overview / account details / username / edit profile / view archive / no collections yet / no history yet / browse the archive / current session / this device / last active / sign out all devices / single session note / preferences / appearance / notifications / soon / quick stats / now),en 即键本身、cn 提供翻译。
- 验证:`npm run build` EXIT=0,`/en/account`、`/cn/account` 均预渲染成功;read_lints 0 错误。dev server 仍在 4321,需用 root/root 登录后访问 /en/account 看完整效果(未登录仅见登录引导卡)。
- 影响:互斥登录"踢人"只吊销 refresh,而**已签发的 access 还能活 7 天**——即被顶掉的会话最多要等 7 天才失效,2h 窗口的说法是错的。要让同账号互斥真正即时生效,必须加 `users.token_version`(签发时嵌版本、middleware.Auth 每次比对),或把 access TTL 调短(如 2h)。已修正 MEMORY.md。
## 账户中心 v1:做成真实可用的客户端版(16:30 续)
- 用户要求把个人中心做成"像 B 站/论坛那种有功能的",不要占位。结合"一点一点完善",本轮交付**客户端存储版**(数据存浏览器、按登录用户名隔离),零后端风险,登录即可用;函数签名预留替换服务端。
- 新增前端库:`src/lib/favorites.ts`(收藏:getFavorites/isFavorited/toggleFavorite/removeFavorite/clearFavorites)、`src/lib/history.ts`(浏览历史:recordHistory/getHistory/clearHistory,去重+上限60)、`src/lib/profile.ts`(昵称/简介:getProfile/saveProfile)。均按 `fa_fav_<user>`/`fa_hist_<user>`/`fa_profile_<user>` 隔离。
- 详情页 `src/pages/{en,cn}/item/[id].astro`:新增右下角浮动「收藏」按钮(fab,点击 toggle 收藏、已收藏反白),并在加载时 `recordHistory` 记录浏览历史(仅登录态);meta 由服务端 frontmatter 透传,define:vars 注入脚本。
- 重写 `src/pages/{en,cn}/account.astro`:Hero(昵称可编辑、取 profile 存储)、四宫格真实计数(收藏数/历史数)、Tab = Overview / Saved looks / History / Sessions & Security / Settings 全部接真实数据:
- Saved looks:真实收藏列表(卡片+封面+移除+跳详情),空状态引导。
- History:真实浏览历史列表+清空按钮。
- Sessions:解析 UA 显示「当前设备」(浏览器·OS),「退出所有设备」接 `logoutAll()`(真实)。
- Settings:语言切换(EN/中文 跳对应 locale 账户页,真实)、外观(浅色/深色 toggle,theme-dark 切内容面板与统计卡,真实)、通知(开/关 本地存储)。
- 编辑资料弹窗:修改昵称/简介,存 profile 本地,Hero 即时反映。
- 词典 `dictionary.ts` 补 cn 翻译:member profile/save/saved/remove/cancel/save changes/display name/bio/clear history/no saved looks yet/light/dark/on/off。
- 验证:`npm run build` EXIT=0,`/en/account`、`/cn/account` 预渲染成功;read_lints 0 错误。dev server :4321 运行中,用 root/root 登录后访问 /en/account 可见完整功能(未登录自动跳 /en/login)。
- **待办(下一轮,服务端化)**:收藏/历史/资料/会话列表需后端化以支持跨设备——需新增 `favorites` 表+接口、`users` 加 display_name/bio 列、`refresh_tokens` 列表接口(登录时补 user_agent/ip)、`/me/profile` 更新接口。现前端 lib 函数签名已设计为可平滑替换实现。
## 个人中心视觉重构(18:00)
- 用户反馈 account 页「太难看了」。排查:页面样式其实正常(Layout 注入 CSS 正常),丑点是**设计语言不统一**——原稿用暖米色 `bg-[#f7f5f1]` 面板 + 大柔影 `shadow-[0_18px_50px_rgba(0,0,0,.04)]` + `rounded-[30px]` 大圆角,与站点纯黑白极简编辑风(thin border、`rounded-none`、mono 标签、serif 大标题、`shadow-sm`)冲突。
- 重写 `src/pages/{en,cn}/account.astro`(与 v1 功能/Alpine 逻辑完全一致,仅重排版面):报头改白底细线(去掉黑底大卡 + 方块 monogram 头像);统计卡改 `border-black/15` 网格、无柔影无大圆角;Tab 导航激活态改「黑底白字」实心(原 border-b-2 下划线);内容面板 `border border-black/15 bg-white`、`rounded-none`;收藏/历史卡片改 `border-black/15` + `hover:border-black` + `bg-[#f1f1f1]` 占位(对齐 look-grid.css);编辑弹窗去圆角去阴影;新增 `js-surface/js-line/js-chip/accent-btn/ghost-btn` class 钩子支撑深色模式反相(`.account-root.theme-dark` 全局 `border-color` 反白 + 主按钮反白)。cn/en 两文件共用同一套 `t()` 文案,新增词典键 `items`(cn:条)。
- 验证:`npx astro build` EXIT=0;dist 产物确认 stylesheet 链接 + 新 class + 深色 `<style>` 均注入;read_lints 0 错误。
## 个人中心大幅精简(18:47)
- 用户要求:去掉 Active Sessions / My Collections(认为无用,或换功能)、去掉 Sign out、section 内容简洁点"有用户名就够了"。
- 改动 `src/pages/{en,cn}/account.astro`:
- 报头:删邮箱行、角色 chip、Sign out 按钮、编辑资料入口;仅留「方块字母头像 + 用户名」大标题(member profile 小标签保留)。
- 删整块「四宫格数据概览」(含 Saved looks / My Collections / My History / Active Sessions 占位卡)。
- Tab 导航:删 Overview、Sessions & Security 两项;保留 Saved looks / My History / Settings 三个。默认 tab 改为 `saved`。
- 删编辑资料弹窗及 displayName/bio 相关逻辑(profile.ts 不再接入)。
- Sign out:报头按钮移除,仅在 Settings 底部保留一个**低调文字链接**(underline hover)`logout()`,避免彻底无法登出(切账号卡死)。已告知用户若想彻底删除可再提。
- 脚本同步精简:删 `editing/displayName/bio/device/parseUA`、`saveProfileEdit/logoutAllDevices`、移除 `logoutAll/getProfile/saveProfile` 导入;保留 favorites/history/settings 逻辑。
- 验证:`npx astro build` EXIT=0;dev server :4321 运行中,root/root 登录访问 /en/account 看效果。
- 遗留:dictionary.ts 中部分键(my collections / active sessions / sessions & security / sign out all devices / account overview / username / email / display name / bio / role / internal member / member since / edit profile / view archive / save changes / cancel 等)已无人引用,属数据冗余,未删(不影响构建)。
## 个人中心再精简:去掉偏好设置(19:10)
- 用户:「偏好设置也不要了」。结合上轮已去掉 sign out 报头按钮,现整体移除 Settings tab。
- 改 `src/pages/{en,cn}/account.astro`:删导航里的 Settings 按钮、删整个 Settings 面板(语言/外观/通知/退出登录全部移除);脚本移除 `themeDark/notif` 状态、`toggleTheme/toggleNotif/switchLang/logout` 方法,及 `logout` 导入;移除 `<main>` 上的 `:class="theme-dark"` 绑定与深色模式 `<style>` 块(js-surface/accent-btn 等 class 留作空操作,无害)。
- 结果:个人中心现仅 = 报头(方块头像+用户名)+ 两个 tab(Saved looks / My History),无偏好、无退出登录入口。
- 影响:登录后页面无任何「退出/切换账号」入口,需清理浏览器 localStorage 才能换号。已向用户说明,如需保留可再加。
- 验证:`npm run build` EXIT=0;read_lints 0 错误。
## 个人中心:加宽容器 + 收藏假数据(19:15)
- 用户:① 收藏搞个假数据看效果;② 觉得 main 容器太窄,加宽。
- 改动 `src/pages/{en,cn}/account.astro`:
- 主容器 `max-w-5xl` → `max-w-7xl`(1280px),收藏/历史卡片网格 `grid-cols-2 sm:grid-cols-3` → `grid-cols-2 sm:grid-cols-3 lg:grid-cols-4`(间距 gap-4→gap-5)。
- 收藏假数据:脚本新增 `demoFavorites`(8 条,含 Maison Margiela/Prada/Bottega/Loewe/Saint Laurent/Celine/Balenciaga/Jacquemus 的 FW25/SS26 RTW,标 `demo:true`)。`init()` 中 `getFavorites()` 为空时回退到 demoFavorites,保证有内容可预览;一旦用户存入真实收藏即不再显示 demo。
- 占位图:新增 `PLACEHOLDER`(内联 SVG data URI,灰底 "LOOK" 字样),`coverUrl(f)` 方法在 `f.cover` 为空时返回占位(真实收藏无封面也不再裂图)。
- demo 项处理:点击 demo 卡片 `itemHref` 跳走秀档案(不进 404 详情);点 REMOVE 仅从内存 `favorites` 移除 demo 项、不写 localStorage。
- 验证:`npm run build` EXIT=0;read_lints 0 错误。
- 注:若账号之前已存真实收藏,收藏 tab 显示真实数据而非 demo(布局同样可见);要看纯 demo 需先清空该用户收藏的 localStorage。
## 列表卡片收藏按钮 + 压黑底白字(19:24)
- 用户三点:① 图片应可收藏,且抱怨找不到收藏/取消入口;② 整体偏无背景色,尽量少用黑底白字组件。
- 改动:
- `src/components/RunwayLooks.astro` / `StreetSnaps.astro`:卡片 `<a>` 外包 `relative` 容器并加 `x-data="{ fav: isFav(it.id) }"`,右上角加白底细边心形按钮 `.fav-toggle`:`@click.prevent="fav = toggleFav(it)"`;未登录点按由 `toggleFav` 弹登录框(requireLogin)。脚本引入 `isFavorited/toggleFavorite`,新增 `isFav(id)`、`toggleFav(it)`(runway→type:'runway'/brand=brand_name;street→type:'street'/brand=''),`toggleFavorite` 返回布尔驱动 `fav` 视觉。
- `src/styles/look-grid.css`:新增 `.fav-toggle`(白底 `border-black/15` 圆钮,`hover:scale-110`)与 `.fav-toggle.is-on svg { fill:#000 }`(已收藏仅实心黑心,不出现黑底块)。
- `src/pages/{en,cn}/item/[id].astro`:详情页浮窗收藏按钮由黑底白字改为白底描边(`hover:bg-black` 反白),图标改心形 + `#fav-fab.is-active .fav-heart{fill:currentColor}`;脚本去掉 `btn.style.background/color` 内联黑底,改用 `label.textContent` + `is-active` 类切换。
- `src/pages/{en,cn}/account.astro`:tab 激活态由「黑底块 bg-black text-white」改为编辑风细线(黑字 + `border-b-2 border-black` 移动端下划线 / `lg:border-l-2 lg:border-l-black` 桌面左竖线);两个 `browse the archive` 按钮由 `bg-black text-white` 改为 `bg-white text-black`(保留 hover 反白)。cn 版 tab 含 `font-mono`(en 无),已分别适配。
- 验证:`npm run build` EXIT=0;read_lints 0 错误。
- 遗留黑底白字(用户说"尽可能少"而非全删,保留作小强调):分页 `.pg.is-current`、卡片 `.showsbadge`(RTW 角标)、导航 `2026` 小药丸、登录提交按钮 hover 反白——均为功能性/极小强调,未改。若用户要更彻底再动。
## 收藏爱心图标修正(19:39)
- 用户:"你现在看下,收藏按钮的logo、"(话未说完,但意图是检查/修图标)。
- 发现:列表页(RunwayLooks / StreetSnaps)与详情页(item/[id] en+cn)四个位置的收藏按钮共用同一段**手写爱心 SVG path**,坐标不对称——叶瓣中心 x=5.5/14.5(均=10),底部尖端却在 x=12,导致整颗心向左偏、视觉是斜的。
- 修复:四处理所当然统一替换为严格对称爱心 path `M12 21C12 21 4 14.5 4 8.8C4 6.1 6.1 4 8.7 4C10.3 4 11.5 4.8 12 6C12.5 4.8 13.7 4 15.3 4C17.9 4 20 6.1 20 8.8C20 14.5 12 21 12 21Z`(叶瓣中心 x=8.7/15.3、尖端 x=12、凹点 x=12,左右镜像)。
- 验证:`npm run build` EXIT=0;read_lints 0 错误。

View File

@ -0,0 +1,125 @@
# 2026-09-02 工作记录
## 收藏功能后端化(服务端持久化)✅ 完成并端到端验证
用户指出:此前收藏只有前端 localStorage("纯前端自慰"),后端没有对应接口。本次补齐后端 + 前端接入。
### 后端(d:/project/backend_v2)
新增文件:
- `internal/model/favorite.go`:`Favorite` 模型(user_id / target_type / target_uid / title / cover / brand),表 `favorites`,唯一索引 `(user_id, target_uid)`。
- `internal/dto/favorite.go`:`FavoriteItem`(id 即 target_uid)、`FavoriteAdd`(`target_type`+`target_uid` 必填 + 可选快照)。
- `internal/repository/favorite_repository.go`:`ListByUser` / `Add`(OnConflict DoNothing 幂等)/ `Remove`。
- `internal/service/favorite_service.go`:`List` / `Add`(校验 type∈{runway,street})/ `Remove`。
- `internal/handler/favorite_handler.go`:`List`(GET) / `Add`(POST) / `Remove`(DELETE `/:target_uid`),均 `middleware.Auth` 鉴权,返回 `{data:...}`。
- `internal/router/router.go`:在 `api.Group("/auth")` 下注册三接口(含 middleware.Auth)。
- `internal/main.go`:装配 `favRepo` / `favSvc` / `Favorite` handler。
- `scripts/sql/007_create_favorites.sql` + `scripts/migrate_refresh/main.go`:建表(幂等)。
约定:沿用项目「一个功能一个接口」哲学,收藏独立路径 `/auth/favorites`,不挂查询参数。target_uid 直接用前端卡片编码串(r=/s=),避免解码。
### 前端(d:/project/frontend_v2)
- `src/lib/api.ts`:新增 `authJson<T>(method, path, body?)`(带 Bearer、401 静默 refresh、返回 `data`、抛出后端 message)。
- `src/lib/favorites.ts`:重写为 server 模式门面——`serverMode()`(getUser+access token);`toggleFavorite` 本地乐观更新 + 后台 POST/DELETE 同步(失败不回滚本地);`removeFavorite` 乐观清 serverList + 后台 DELETE;`fetchServerFavorites()` 拉服务端权威列表(account 页用)。对外签名(getFavorites/isFavorited/toggleFavorite/removeFavorite)保持不变。
- `src/pages/{en,cn}/account.astro`:移除假数据 demo(demoFavorites 整段删除);init 改调 `fetchServerFavorites()` 取服务端收藏;`itemHref/removeFav` 去掉 demo 分支;登录态展示真实收藏,空则显示空态。
- 列表卡片(RunwayLooks/StreetSnaps)无需改:仍用 `isFavorited/toggleFavorite`,新增的 server 同步在 lib 内部完成。
### 验证
- 后端 `go build ./...` EXIT=0;`go run ./scripts/migrate_refresh` MIG_EXIT=0(favorites 表建好)。
- 重启本地后端(杀旧 PID 11160,`go build -o bin/server.exe` 后启动,HEALTH=200)。
- 用 PowerShell `Invoke-RestMethod` 跑通全生命周期(curl.exe -d 在 Windows 下 body 发不出,改用 Invoke-RestMethod 才成功):
admin 登录 → POST /auth/favorites(返回新建项)→ GET(含该项)→ DELETE → GET 返回 `[]`。真实落库,无残留。
- 注意:本地后端种子账号是 `admin / Studio#2026!Admin`;用户预览用的 `root/root` 走线上后端,本地调试用 admin。
- 前端 `npx astro build` EXIT=0;read_lints 0 错误。
### 遗留 / 未做
- 跨设备列表卡片心形初始态:列表卡片初始仍读本地 localStorage(保证即时);登录态服务端同步在后台,换设备首次进列表可能短暂不一致(同设备因本地镜像一致)。如需严格一致,列表页 loadPage 后需 bootstrap serverList 并触发 Alpine 重算(当前未做)。
- users.display_name/bio、refresh_tokens 列表接口仍待办。
- 历史(history)仍为纯本地,未服务端化(用户未要求)。
## 收藏态跨浏览器/设备一致性修复(11:1x)✅ 完成 + 构建验证
用户提供担忧:换浏览器收藏列表是否不展示(数据绑账号应不丢,但发现列表卡片初始态只从本地读、列表页从不拉服务端,导致新浏览器进列表爱心全空);并问展示收藏态是否压垮数据库。
结论与改动:
- 性能:后端 `ListByUser` = `WHERE user_id=?` 索引查询,每页加载 1 次(非每卡片 1 次),千人并发仅几十 QPS 微查询,**不会崩**;唯一会崩的「每卡片 1 查询」写法未采用。
- 修复方案:列表/详情页进入时**先本地即时填充 + 异步拉服务端校正**,用响应式 `favMap`(`Record<id,boolean>`)替代原 `x-data="{ fav: isFav(it.id) }"` 的一次性捕获(后者服务端异步返回后不会刷新卡片)。
- `src/lib/favorites.ts`:新增 `loadServerFavIds(): Promise<string[]>`(调 `fetchServerFavorites` 回填 serverList 并返 id 数组)。
- `RunwayLooks.astro` / `StreetSnaps.astro`:data 增 `favMap`/`favTouched`;`init()` 调 `loadFavs()`(本地即时 → 登录态 `loadServerFavIds` 校正,`favTouched` 为真时跳过覆盖避免丢刚点的收藏);卡片按钮改 `:class="{ 'is-on': favState(it.id) }"` + `@click.prevent="toggleFav(it)"`(toggleFav 内乐观更新 favMap);删除原 `isFav` 方法。
- `src/pages/{en,cn}/item/[id].astro`:详情页 `sync()` 初始后,登录态 `loadServerFavIds().then(sync)` 异步校正(跨浏览器详情页爱心一致)。
- 验证:`npx astro build` EXIT=0;read_lints 0 错误。
- 注:预览 `:4321` 走线上后端(root/root,线上 favorites 表需部署 007 迁移才有);要本地直接验证跨浏览器,把前端 BASE_API 指向本地 `:8090` 用 admin 登录即可(用户未要求切,保持现状)。
## 收藏海量场景优化(10万级):服务端分页 + 批量校验(12:0x)✅ 完成并端到端验证
用户追问:若用户收藏极多(2000、甚至 10 万)怎么办。结论与改动:
- 性能论证:DB 层 `WHERE user_id=?` 索引查询,2000/10万行均毫秒级,不会崩;favMap(id→bool) 为 O(1)。真痛点在①账户页一次性 `x-for` 全量渲染(10万 DOM 爆炸)②列表标记此前拉全量完整对象(2000≈500KB/次)。
- 改动:
- 后端:新增 `POST /api/v1/auth/favorites/check`(body `{ids:[...]}` → 返回已收藏子集);`GET /auth/favorites` 改服务端分页(`?page&per_page`,默认24/上限100,返回 `{data:{items,total,last_page}}`)。repository 加 `ListPaged/CountByUser/FilterExisting`;service `List`→`ListPaged`+`Check`;dto 加 `FavoriteCheck`;router 注册 check;favorites 表加复合索引 `idx_user_created(user_id, created_at)`(007 sql + migrate_refresh 幂等 ALTER ADD INDEX)。
- 前端 `favorites.ts`:新增 `fetchFavoritesPage`(账户分页)+ `checkFavorited(ids)`(列表仅问当前页可见 id);删除 `loadServerFavIds`/`fetchServerFavorites`。
- 列表组件(RunwayLooks/StreetSnaps):`loadPage` 后调 `markFavs()` 用 check 校正当前页 hearts(与收藏总量解耦,常数级);删 `favTouched`。
- 账户页(en/cn):Saved looks 服务端分页 + 翻页器(`favPageList` 窗口化页码:首尾页+当前页±1+…折叠);`removeFav` 刷新当前页。
- 验证:后端 `go build ./cmd/server` EXIT=0;本地后端重启新二进制 HEALTH_OK;PowerShell 端到端:加3收藏 → P1(total3,last2,count2)/P2(count1) 分页正确 → check 返回3命中 → 删除后 total0。前端 `astro build` EXIT=0、lint 0。
- 注:预览 `:4321` 仍指向线上后端(root/root,需部署 007 迁移才有 favorites 表);本地验证用 admin/Studio#2026!Admin 走 :8090。
## 浏览历史服务端化(图集 + 图片)✅ 完成 + 端到端验证(15:1x)
用户拍板:历史也走**服务端**(跨设备一致,尽管每次浏览都写库写入量比收藏高一个数量级);图集 = **列表页整体**(进 Runway Looks / Street Snaps 整页记一条)。
### 后端
- `scripts/sql/008_create_histories.sql` + `migrate_refresh`:建 `histories` 表,`uniq(user_id,kind,target_uid)`;kind∈{image,gallery},target_type∈{runway,street,runway_looks,street_snaps}。
- `internal/model/history.go` / `dto/history.go`(`HistoryItem`/`HistoryAdd`)/ `repository/history_repository.go` / `service/history_service.go` / `handler/history_handler.go` / router 注册(GET/POST/DELETE `/auth/history` + DELETE `/auth/history/:target_uid`)/ main.go 装配。
- **关键膨胀控制(与收藏的本质差异)**:`Upsert` 用 `OnConflict DoUpdates`——同 (user_id,kind,target_uid) 反复浏览只刷 `viewed_at` 不新增行;每用户硬上限 `HISTORY_CAP=2000`,超量用子查询双嵌套(规避 MySQL 同表子查删除限制)FIFO 删最旧。
- **修了一个真 bug**:首版 `ListPaged` 的 `total` 调 `CountByUser(ctx,userID)` 忽略 kind,导致按类型过滤时分页计数错(items 过滤了但 total 算全量)。已改 `CountByUser(ctx,userID,kind)` 一并过滤。
### 前端
- `src/lib/history.ts` 重写为服务端优先:`recordHistory({kind,type,id,title,cover,brand})`(登录态本地+后台 POST upsert;未登录仅本地);`fetchHistoryPage(page,perPage,kind)` 服务端分页(kind 空=全部);`removeHistory`/`clearHistory`。
- 埋点:`src/pages/{en,cn}/item/[id].astro` 详情页 `recordHistory` 加 `kind:"image"`;`RunwayLooks.astro`/`StreetSnaps.astro` 的 `init()` 进页面记一条 `kind:"gallery"`(target_uid `runway-looks`/`street-snaps`,仅登录态;翻页走 loadPage 不触发,符合「进页面就记」)。
- 账户页(en/cn)History tab:`全部/图片/图集` 切换(setHistKind→重载)、服务端分页 + `histPageList` 窗口化页码、`histHref`(image→item 详情,gallery→对应列表页)、图集/图片徽标、单条删除/清空。字典加 `all/image/gallery/no history yet/viewed gallery`。
### 验证
- 后端 `go build ./...` EXIT=0;`migrate_refresh` 建表 OK;重启本地后端新二进制(taskkill 杀 7912 后启动,HEALTH=200)。
- PowerShell 端到端:登录 admin → 记 gallery+image → 重复记同 image **upsert 不新增(total 恒 2)** → `?kind=gallery`(total1)/`?kind=image`(total1)/全部(total2) 计数正确 → DELETE 单条 → CLEAR 归零。修复后复测 GAL_TOTAL=1 IMG_TOTAL=1 ALL=2 通过。
- 前端 `npx astro build` EXIT=0;read_lints 0 错误。
- 注:预览 `:4321` 走线上后端(root/root,需部署 008 迁移才有 histories 表);本地真实验证用 admin/Studio#2026!Admin 走 :8090。
## 后端连接池僵死导致「历史/收藏/登录全失效」(15:2x)✅ 修复
用户反馈浏览历史「没生效」。排查:前端代码与历史接口均正常,但本地后端 :8090 的 `/api/v1/public/brands` 返回 `{"error":"invalid connection"}`,`/health` 正常。
根因:后端(`server-bin`,当时 PID 18604)的 MySQL 连接池连接僵死——GORM 此前只设 `ConnMaxLifetime=3600`、**未设空闲回收时间**,空闲连接被 MySQL 回收后池子仍持有死连接,查询即 `invalid connection` / `bad connection`(server.err 见 14:45、14:52 已报 bad connection)。MySQL 自 8/26 起未重启,故非 MySQL 重启,而是空闲连接被回收。
修复:
- 后端加 `conn_max_idle_time`(config.yml + DatabaseConfig + mysql.go `SetConnMaxIdleTime`,默认 60s,须 < MySQL wait_timeout),空闲连接主动回收,从源头避免死连接。
- `go build -o server-bin ./cmd/server` 后杀旧 PID 18604、重启新二进制;重启后 `/public/brands` 恢复正常,历史接口端到端全过(ALL=2 / GALLERY=1 / IMAGE=1,upsert 不增总量,清空归零)。
- 临时验证脚本 `_tmp_e2e.mjs` 用完已删。
教训:本地后端长时间空闲后接口再访问报 invalid connection,**先重启后端**;已加空闲回收,复现概率大降。前端 `BASE_API=http://localhost:8090`(.env),故本地 dev 直接打本地后端,无需切线上。线上后端(root/root)仍需部署 007(favorites)/008(histories) 迁移才有这两张表。
## 浏览历史「看不到」排查 + 登录后补记修复(16:4x)✅
用户反馈浏览记录看不到,且「runway 文章数据库没新增」。排查结论:
- **历史写在 `histories` 表,不是 `brand_runway`**(走秀主数据表仅由爬虫/种子导入,浏览永不写入)。用户查错表,非 bug。
- 历史**按用户隔离**:local 8090 实测 `histories` 表 `root` 有 1 条(`KIND=gallery TYPE=street_snaps TITLE='Street Snaps'`),`admin` 有 0 条。账户页登录 root 才能看到 root 的记录。
- 已实证登录态写入正常(root 那条即用户用 root 登录进 Street Snaps 列表页所记)。
修复:未登录进列表页→登录后不补记图集的边界 bug。`src/lib/api.ts` 的 `login()` 成功后派发 `window` 事件 `auth:login`;`RunwayLooks.astro`/`StreetSnaps.astro` 的 `init()` 监听该事件补记对应 `gallery`(type=runway_looks / street_snaps)。dev server 已重编译,三页 HTTP=200。
## item 页浏览历史不记录:根因=define:vars+import 致命组合(17:0x)✅
用户访问 /en/item/r000AhByP 后个人中心与 histories 表都无记录。排查:/auth/history 后端经 curl 实测可写(root POST 成功落库),排除后端问题。抓渲染 HTML 发现 item 页 <script define:vars={{meta...}}> 被 Astro 包成内联 IIFE,原脚本顶部的 import 被塞进函数体内 → SyntaxError 整段不执行,故
ecordHistory/收藏绑定全失效。修复:en/cn item/[id].astro 去掉 define:vars,改由按钮 data-id/type/title/cover/brand/save-label/saved-label 属性透传,模块脚本内 tn.dataset 读取。dev server 已重编译,抓模块源码确认 import 已在顶层。清理了测试写入的 r000AhByP 记录。教训已写入 MEMORY.md Astro script 坑。
## 浏览历史设计纠正:仅图集记录,单张 item 不记(17:3x)✅
用户纠正:浏览历史应「进图集(RunwayLooks/StreetSnaps)才记」,单张 item 详情页不该记。此前我给 item 页加了 image 历史记录,属理解错误。修复:删 en/cn item/[id].astro 里的
ecordHistory({kind:'image',...}) 调用与导入(收藏逻辑不动);账户页 History 区移除无用的「图片」筛选 tab(仅留 全部/图集),卡片角标固定 gallery。图集页 gallery 记录逻辑(RunwayLooks/StreetSnaps 的 init() 调 recordHistory)保持不变,已抓打包脚本确认
ecordHistory/kind:gallery 仍在。MEMORY.md 同步更新:浏览历史仅记图集。
## 个人中心「没有」根因定位(17:4x)✅
用户报「个人中心还是没有」。排查:后端 history 全链路实测通过(Node 脚本 login admin → POST /auth/history ok → GET total=1,histories 表存在);前端 recordHistory/fetchHistoryPage/account 渲染逻辑均正确。根因在登录态:.env 当前 BASE_API=http://localhost:8090,本地库只有 admin、无 root,用户用 root/root 登录失败 → getUser() 为空 → 进 account 被踢登录页、图集不记历史。结论:本地验证一律用 admin/Studio#2026!Admin;要用 root 须改 .env 回线上域名并重启 dev server+硬刷新+重登录。MEMORY 账号体系段已补此坑。
## 纠正:user 表确有 root + 个人中心空的真因(18:4x)✅
实测 db_dev.users 经 scripts/seed_users 创建 admin(强密码 Studio#2026!Admin)+root/root(uid 8)。
oot/root 登录本地 :8090 返回 200;GET /auth/history 显示 root 账号下已有 street-snaps/runway-looks 两条真实图集历史(viewed_at≈当前)。此前'本地无 root、root 登录必失败'为误判,已纠正 MEMORY 账号体系段。
个人中心'看不到'两主因:(1) account.astro 默认 tab='saved'(收藏,常空),浏览历史在 'My History' tab,需点击;(2) 前端 dev server 若连线上而非本地 8090,则 root 登录线上、看不到本地这 2 条。已 stro dev stop+stro dev --background 重启使 .env 的 BASE_API=本地 8090 生效。验证:硬刷新→root/root 登录→点 My History→应见 2 条。
## 实锤根因:账户页历史空 = kind=all 被后端按字面过滤(18:5x)✅
带 root token 实测后端 /auth/history 三种查询:无 kind → total=2;kind=all → total=0(后端把 all 当字面 kind 值 WHERE kind='all');kind=gallery → total=2。根因:账户页 History「全部/默认」把 kind='all' 拼进 query,后端无该语义 → 恒空;数据其实一直在 root 下(2 条 gallery)。用户直接 curl 不带 token 返回 0 属正常未鉴权空返回。修复:src/lib/history.ts fetchHistoryPage 把 'all'/空 归一为不带 kind 参数(只传 image|gallery 这类具体值)。MEMORY 浏览历史条目已记坑。另:后端对无效 kind 值返回空而非全部,属脆弱设计(可选后续加固)。
## 浏览历史语义纠正与收敛:图集→文章级(19:4x-20:0x)✅
用户澄清:他说「进到图集里才有浏览记录」指的是点开一篇文章(详情页看整组图),不是进 RunwayLooks/StreetSnaps 列表页——此前按列表页 gallery 实现是理解反了。已按用户拍板重构:
- 语义:浏览历史=点开过的文章;item 详情页 init
ecordHistory(meta.id);列表页记录与 auth:login 补记全删(en/cn item + RunwayLooks + StreetSnaps)。
- 表收敛:histories 改 (user_id,target_uid,viewed_at),DROP kind/target_type/title/cover/brand;唯一键(user_id,target_uid);保留 HISTORY_CAP=2000 FIFO(文章会积累)。后端 model/dto/handler/service/repository 同步删字段;dto.HistoryAdd 仅 target_uid。008 迁移脚本改新表结构,存量库跑 migrate_refresh ALTER(实测生效:GET items 仅 {id,viewed_at},POST {target_uid}→200)。
- 展示:账户页先服务端分页取 id,再逐篇 getHistoryMeta(id) 回查公开详情拿 title/cover/brand(api.ts 新增,s= 前缀判 street 否则 runway);卡片跳文章详情;删 kind 筛选 tab/histHref/gallery 徽标;标题回查失败用 '…'。
- 验证:POST/GET 全绿;/public/runway-looks/r0042h1mx 回查字段齐全;account、item 页面 SSR 200。dev server 已重启(PID 31792)、后端 server-bin 已重建。MEMORY 浏览历史条目已整体改写。

View File

@ -0,0 +1,71 @@
# 2026-09-03 工作日志
## Header 下拉 FOUC + 加载屏接入(12:0x)✅
用户反馈 header 下拉在 CSS 未加载时很丑(裸奔成大块列表),并给了一份 loading 动画页(Raleway 彩虹 text-shadow + Lorem ipsum 文案)要求接入。
- **根因**:Layout 里 Runway/Street/语言/账号 下拉与未登录 Login 链接均用 `x-show` 但**没加 `x-cloak`**,Alpine 接管前 `x-show` 未生效 → 菜单裸奔。global.css 已有 `[x-cloak]{display:none!important}`,补 `x-cloak` 即解决。
- **改动**:
- `src/layouts/Layout.astro`:head 引入 Raleway(`<link>` preconnect+stylesheet);body 顶部插入 `#loading-screen` 动画屏(用户给的 HTML/CSS 还原,h1 文案保留 Lorem ipsum);所有 `x-show` 下拉补 `x-cloak`(含 login.astro 语言 ul);footer 后加 `is:inline` 淡出脚本(`window.load` 后淡出,最少 500ms / 最多 3s 兜底)。
- `src/styles/global.css`:追加**作用域隔离**的 loading 样式(全部在 `#loading-screen` 内;`@keyframes` 改名 `ls-text-shadow`;`prefers-reduced-motion` 仅限加载屏;避免 `#fdf9fd` 背景/`Raleway`/`a` 颜色污染整站黑白调性)。
- **验证**:lint 0;`GET /en` 200,输出含 `id="loading-screen"`、`x-cloak`(×13)、淡出脚本、Raleway link 均到位。
- **提醒点**:loading 屏用彩色(与站点纯黑白调性冲突),是用户明确要求;若要统一风格可改 `#loading-screen` 背景为白/黑。h1 文案是占位 Lorem ipsum,用户可能想换成品牌名。
## 加载屏黑白化 + 文案替换(12:1x)✅
用户要求加载屏改成黑白(与站点纯黑白调性一致)并换文案。改动:
- Layout.astro 加载屏 h1 Lorem ipsum dolor sit amet. → Portfolio Studio(取自 siteTitle 品牌名),删掉 demo 残留(Hover over text to pause / Inspired by Tomas Brunsdon dribbble 链接),加小号副标 <p class=ls-sub>Loading</p>。
- global.css 加载屏配色:背景 #fdf9fd→#fff、文字 #011a32→#0a0a0a、链接 #024794→#0a0a0a;动画 keyframes 彩色 shadow(#0c2ffb/#2cfcfd/#fb203b/#fefc4b)改灰阶(#000/#3a3a3a/#777/#bbb),保留偏移运动;h1 字号 5em→clamp(2.5rem,8vw,5rem) 防移动端溢出;新增 .ls-sub 等宽大写灰字样式。
- 验证:GET /en 200,输出含 Portfolio Studio + ls-sub Loading,已无 Lorem/dribbble;CSS 黑白校验全通过(无 fdf9fd/0c2ffb/024794/011a32)。lint 0。
## 加载屏重构:is:inline → 独立组件 + 打包脚本(12:2x)✅
用户认为 is:inline 不合理,要求优化(Alpine 或组件化)。结论:抽 src/components/LoadingScreen.astro 组件,最合理——不需为小事引入 Alpine(且有 window.load 竞态),普通 Astro 打包 <script> 是 module/defer,在 load 前执行无竞态,比 is:inline 更工程化。改动:
- 新建 LoadingScreen.astro:标记(h1 Portfolio Studio + p.ls-sub Loading) + <style is:global>(原 global.css 加载屏 CSS 整段移入) + 打包 <script> 隐藏逻辑(原 is:inline IIFE 照搬,去掉 is:inline)。Raleway <link> 从 Layout head 移入组件(Astro 自动 hoist 到 head)。
- Layout.astro:引入组件、用 <LoadingScreen /> 替换内联标记、删除底部 is:inline 脚本、删 head Raleway 链。
- global.css:删除加载屏 CSS 块,仅留 @import tailwindcss + [x-cloak]。
- 验证:lint 0;GET /en 200,loading-screen 标记在、无 is:inline、旧 IIFE 已移除、Raleway 仍在。教训:Astro 中全局一次性 UI(loading/overlay)应封装为组件而非散在 Layout+global.css。
## 未登录预览门禁:列表仅显前5张+登录提示(14:2x)✅
需求:未登录用户只能看图集前5张图片,其余提示登录。实现:RunwayLooks/StreetSnaps 两列表页统一加未登录预览门禁。
- 新增 i18n 键 login to view all photos(cn: 登录查看全部图片)。
- 脚本加常量 PREVIEW_LIMIT=5;Alpine data 加 getter visibleItems(getUser() 返回全部,否则 slice(0,5))、showLoginGate(!getUser(); items.length>5)。
- 模板 x-for 源 items→visibleItems;卡片列表后插门禁块(x-show=showLoginGate,含 Preview 标题+loginGateText+登录按钮开 showLoginModal);分页器 x-show 加 getUser() 条件。
- 验证:lint 0;GET /en/runway-looks 与 /en/street-snaps 均 200,含 visibleItems x-for、showLoginGate div、x-text=loginGateText、pager x-show=getUser(); lastPage>1(HTML 转义为 &amp;&amp; &gt;)。登录后门禁消失、分页器出现、显示全部。
## 未登录预览门禁后端硬截断 + 重启踩坑(15:0x)✅
需求:前端门禁只是障眼法,接口一抓全露馅——后端也得改。改动:
- 后端新增 dto.PreviewLimit=5;response.PagePreview 支持 preview 标记;runway/street 列表 handler 未登录时强制 Page=1,Size=5,且 total>5 才回 preview:true。
- 关键修复 PublicFirstPageAuth:原仅 page>1 解析 token,导致 page=1 已登录用户无 Context、被误判匿名全截 5 条;改为始终解析 Bearer(有效则写入 Context),仅 page>1 强制。新增 isAnon(c) 辅助(同包 handler)。
- 前端:getArticles/getStreetSnaps 透传 preview;Alpine loadPage 存 this.preview,showLoginGate 改用 !getUser() && (preview===true || items.length>PREVIEW_LIMIT),visibleItems 仍 slice(0,5) 防御。
- 验证(node 脚本):anon runway/street 各 5 条+preview:true、page=2→401;root 登录回 24/12 条无 preview。前端 /en/runway-looks、/en/street-snaps 均 200,api.ts lint 0。
- 重启大坑(重要):go build -o server-bin 在 Windows 产出无扩展名 server-bin,但运行的是 server-bin.exe(旧)。Start-Process server-bin 被 Windows 解析成旧 .exe,导致首轮没生效。修正:改用 go build -o server-bin.exe 覆盖 .exe 并启 .exe。已记 MEMORY。
## 预览门禁纠正:列表页限制 → 详情页限制(16:3x)✅
用户澄清:之前把"未登录最多看 5 张"做成了列表页限制(RunwayLooks/StreetSnaps 列表只显 5 个图集)是误读。真实意图是**列表页照常展示全部图集,限制发生在点进图集详情后——未登录仅看前 5 张图片**。改动:
- 前端列表页回退:StreetSnaps.astro 删 visibleItems/showLoginGate/preview 字段 + 删门禁块 + x-for 改回 items + 清 PREVIEW_LIMIT/loginGateText 残留常量;RunwayLooks.astro 清 PREVIEW_LIMIT/loginGateText 残留常量(列表逻辑上一轮已回退)。lint 0。
- 详情页(Item.astro runway / StreetSnap.astro street)本就已是「前5张 SSR + extraImages 登录后补拉 + 登录门禁」结构,无需改。
- 后端:源码早已把截断从列表接口移到详情接口(列表 response.Page 全量;详情未登录截断 Images[:5]+preview:true)。但**运行中的二进制是旧的列表截断版**(验证显示列表只回 5 条、详情回全量 6 张且无 preview)→ 重编译 `go build -o server-bin.exe`、杀旧 PID 18912、启新 .exe。
- 验证(node+SSR):anon 列表全量无 preview;anon 详情 5 张+preview:true;root 登录详情完整 6 张无 preview;`/en/item/s000zAwwQ` 与 `/en/item/r0042h1mx` SSR 200、`data-preview="true"`、画廊 5 张图、含 Preview 门禁块;两个列表页已无 visibleItems/showLoginGate。
## 详情页「剩余 N 张」占位遮罩(17:0x)✅
用户补充:详情页未登录只显前 5 张,但用户会以为图集就 5 张——要求对剩余图片做空图遮罩并写"登录后查看"之类提示。改动:
- 后端 `response.DataPreview` 新增参数 `imageTotal int`,响应包写入 `image_total`(截断前的图片真实总数);走秀/街拍两详情 handler 在截断前 `imageTotal:=len(detail.Images)` 透传。前端 `getSsrArticle`/`getSsrStreetSnap` 读 `json.image_total`,`SsrArticleResult`/`SsrStreetSnapResult` 增 `imageTotal?` 字段;en/cn `item/[id].astro` 把 `imageTotal` 传给 `<Item>`/`<StreetSnap>`。
- 详情组件 `Item.astro`/`StreetSnap.astro` 增 `imageTotal` prop,算 `lockedCount=preview?max(0,imageTotal-previewImages.length):0`;画廊在 previewImages 之后、extraImages 之前插入 `lockedCount` 个空图 `<figure>`(锁图标 + "login to view" + "+N photos",`x-show="!getUser()&&preview"`+`x-cloak`,点击 `goLogin()`)。已登录 `getUser()` 为真 → 遮罩隐藏、由 `extraImages` 真实图替补。
- i18n 新增 `login to view`(cn 登录查看)/`photos`(cn 张照片)。
- 后端重编译 `go build -o server-bin.exe`、杀旧 PID 32508、启新 .exe(PID 29468);`Invoke-RestMethod` 验证 anon runway image_total=8 preview=true 返5、street image_total=6 preview=true 返5。
- 验证(node 解析 SSR HTML):走秀页画廊 5 张真实图 + 3 个"login to view +3 photos"遮罩 + 底部 Preview 门禁块;街拍页 5 张 + 1 个"login to view +1 photos"遮罩。功能对任意 image_total 通用(含用户举例的 20→15)。
## 遮罩运行时不显示:Alpine 表达式作用域坑(18:4x)🔧
用户反馈"还是只展示 5 张图"——SSR 静态 HTML 确有遮罩,但浏览器运行时看不到。排查:
- 后端 verified:`GET /api/v1/public/runway-looks/r0042h1mx`(anon)返 `image_total=8, preview:true` 且 images 截断 5 张;已登录(带 Bearer + 前端签名)返 `image_total=8, images.length=8, preview=undefined` → 后端全量正常。
- **根因**:遮罩与底部门禁用 `x-show="!getUser() && preview"`,但 `getUser` 是 `.astro` `<script>` 里 `import` 进来的模块符号——Alpine 属性表达式作用域访问不到它(只认组件 data 属性 / `$magic` / global),求值抛 ReferenceError → 绑定失效、元素卡在 `x-cloak` 的 `display:none`。**上一条"验证"只看 SSR 静态 HTML,没跑 Alpine,所以误判成功**。列表分页器 `StreetSnaps.astro:215` / `RunwayLooks.astro:253` 的 `x-show="getUser() && lastPage>1"` 同病。
- **修复**:详情组件 `Item.astro`/`StreetSnap.astro` 与列表组件 `RunwayLooks.astro`/`StreetSnaps.astro` 各增响应式 data 属性 `isAuthed:false`;`init()` 用 `this.isAuthed = !!getUser()` 初始化、`auth:login` 事件置 `this.isAuthed = true`;所有相关 `x-show` 改用 `isAuthed`(遮罩 `!isAuthed && preview`,分页器 `isAuthed && lastPage>1`)。`getUser()` 仍在组件 method 内调用(作用域OK)。
- 验证:`fetch` 详情页 HTML 确认 `x-show="!isAuthed &amp;&amp; preview"` 出现 4 次(3 遮罩+1 门禁)、`getUser` 在 x-show 中 0 次。dev server (astro dev, :4321) 已热更新新代码。
## 遮罩与真实图不等高:遮罩缺 figcaption 行(18:5x)✅
用户反馈未登录时遮罩图高度与正常图不一样。根因:正常图 `<figure>` = `img aspect-[3/4]` + 底部 `figcaption`(图片 name 如 look01/img01 灰字一行,实测数据每张图都有 name);而遮罩 figure 直接把 `aspect-[3/4]` 套在 figure 上、无 figcaption → 总高比正常图矮一行 caption 高度,grid stretch 行为也不一致。修复:`Item.astro`/`StreetSnap.astro` 遮罩重构为与正常图**同构**——figure 不再带 aspect,内部先放 `div.w-full aspect-[3/4] flex items-center justify-center`(锁图标+login to view 居中的"图位"),再放与正常 figcaption 同 class 的 `figcaption`(灰字 `+N photos`,替代原图内那行 +N 小字,保证 caption 行高一致)。验证:SSR figcaption 顺序 = look01..look05 5 个正常 + "+3 photos"×3 遮罩、遮罩 figure 含 aspect-[3/4] 图位 div(×3),结构已同构。dev server 热更新生效。
## 去掉底部 Preview 大框门禁(19:1x)✅
用户觉得画廊后整块「Preview / login to view all photos + Login 按钮」门禁意义不大(画廊遮罩已有提示),要求去掉。改动:
- `Item.astro`/`StreetSnap.astro`:删除画廊后 `x-show="!isAuthed && preview"` 整块门禁 div(font-serif "Preview" + 副文案 + Login 按钮)及顶部仅供该块使用的 `loginGateText`/`loginModalSubmitLabel` 常量(列表组件 RunwayLooks/StreetSnaps 的 loginModalSubmitLabel 用于内嵌登录弹窗,保留)。
- `dictionary.ts`:删 `'login to view all photos'` key(无引用)。
- 验证:两详情页 SSR 无 gateText/gateDiv、画廊遮罩 x-show 仍在(走秀 3/街拍 1);lint 0。
- **编辑教训**:删除整块时两次把 replace_in_file 的 old/new_str 弄反导致重复插入门禁块,须先读文件确认再一次性删除所有重复块;改文件先想清楚替换方向再提交。

View File

@ -0,0 +1,57 @@
# 2026-09-13 工作日志
## 首页图片加载状态 + Swiper 初始化优化(14:5x)✅
用户建议对首页 Index.astro 的 Hot Brand / Street Style 图片加载与 Swiper 初始化做一层优化(7 点)。改动:
- **统一图片状态初始化逻辑**:Hot Brand `hs-img-box` 与 Street Style `ss-img-box` 两份完全重复的内联 `x-data="{loaded,error,init()检查complete+naturalWidth,handleLoad,handleError}"` 抽成共享 Alpine 组件 `imgLoader`,在 `<script>` 里 `document.addEventListener('alpine:init', () => Alpine.data('imgLoader', () => ({...})))` 注册,两处 markup 改 `x-data="imgLoader()"`。保留 init 的 complete+naturalWidth 立即置位 与 @load/@error 兜底,dispatch `img-ready` 不变。
- **Swiper 初始化重写**:`initSwipers()` 开头先 `destroySwipers()`(防重复/VT 旧实例泄漏);统一入口 `setupSwipers()` 用 `requestAnimationFrame` 延后一帧,挂到 `DOMContentLoaded`(首次)与 `astro:page-load`(VT 重新进入);`swiper.update()` 用 `updateScheduled` 标志 + rAF 合并(原 updateAllSwipers 的 RAF 合并保留并改名 scheduleSwiperUpdate);Tab 点击监听由 `document.querySelectorAll('.tab').forEach(addEventListener)` 改为 `document` 事件委托 `e.target.closest('.tab')`,修复 View Transitions 后新 DOM 上监听失效(旧 .tab 元素已 detach)的问题。
- 验证:lint 0;dev server(:4321) 首页渲染 HTML 含 `x-data="imgLoader()"`;打包模块 `Index.astro?astro&type=script` 含 `imgLoader`/`astro:page-load`/`scheduleSwiperUpdate`/`destroySwipers`。当前 SSG 数据下 Hot Brand 有图(1 个 imgLoader 渲染)、Street Style 列表为空走 ComingSoon(符合数据,非代码问题)。
## i18n 字典审计:补缺失 + 删死条目 + 修中文 key(15:4x)✅
用户要求:找出没翻译的 i18n 补上、没用到的删掉。审计方法:解析 dictionary.ts 全部 key + 全代码字面量 `t('...')`/`translate('...')` 调用 + 对每个 key 在代码做存在性 grep(覆盖城市等变量用法)。
- **缺失(代码 t() 用到但字典没有,cn 页回退英文)**:`brands`(RunwayLooks 设计师筛选)/`Most photos`/`Newest year`/`Oldest year`(StreetSnaps 排序)/`Year`(StreetSnaps 分组标题)/`Sort`(StreetSnaps 分组标题)。已补 `{ cn: ... }`(品牌/照片最多/年份最新/年份最早/年份/排序)。
- **中文当 key(英文态显示中文)**:`'全部的 runway'` 被 Layout 导航×2 与 RunwayLooks `<h1>` 硬编中文使用。改为英文 key `'all runway looks': { cn: '全部的 runway' }`,三处调用改为 `t('all runway looks')`(其中 RunwayLooks h1 由硬编改为 `{t('all runway looks')}`)。utils.ts 文档注释示例同步改英文。
- **死条目(0 次 t() 调用,连引号串都没出现)**:删 20 条 —— runway archive / pre-fall / account / email / coming soon / role / username / appearance / soon / now / all / image / gallery / light / on / off / default / hi / logout / street snaps(多为账户中心/外观设置/历史相对时间等半成品或未接 UI 的预留翻译,且有用同义 key 如 `my account`/`sign out`/`street style` 替代)。
- 结果:字典 92 → 78 条;重跑审计确认 无中文真 key、无缺失、无死条目(仅剩注释里的 `英文原文` 示例误报,非真实 key)。
- 验证:lint 0;`/en/runway-looks` h1 渲染 `all runway looks`、`/cn/runway-looks` 渲染 `全部的 runway`,i18n 正常。
## 前端 API 客户端拆分:api.ts → api/crypto/locale/auth 四文件(19:5x)✅
用户要求把 `src/lib/api.ts` 里的登录/权限与加密逻辑抽出去,让 api.ts 只负责业务取数。已拆分:
- **`src/lib/crypto.ts`**:前端请求签名 `clientSign()`(HMAC-SHA256 → X-Sign/X-Sign-Ts/X-Sign-Nonce),原 `CLIENT_SIGN_SECRET`/`CLIENT_SIGN_TTL` 一并移入。
- **`src/lib/locale.ts`**:请求语言透传 `setApiLocale`/`currentLocale`/`withLocale`(原在 api.ts)。抽出来是为了**避免 api↔auth 循环依赖**(auth.ts 的 fetchMe 也要用 currentLocale)。
- **`src/lib/auth.ts`**:账号体系与鉴权 —— `getUser`/`getAccessToken`/`getRefreshToken`/`clearSession`/`saveSession`/`refreshSession`/`authedFetch`(内部)/`authJson`/`fetchMe`/`login`/`logout` + `AuthUser` 类型 + `BASE_API_URL`。
- **`src/lib/api.ts`**:重写后只保留 类型定义(BrandEntry/ArticleItem/RawArticle…)/ base 解析 / `request()` 公开原语 / 全部业务取数(走秀/品牌/街拍/历史回查/SSG)。`request()` 改为 `import { clientSign } from "./crypto"`、`import { getAccessToken, getRefreshToken, refreshSession } from "./auth"`、`import { withLocale, currentLocale } from "./locale"`。
- **消费方 import 已全量更新**:`getUser`/`login`/`logout`/`fetchMe`/`authJson`/`getAccessToken` 改从 `@/lib/auth` 或 `./auth` 导入;`setApiLocale` 改从 `@/lib/locale`;其余(`getArticles`/`getBrands`/`getStreetSnaps`/`getSsrArticle`/`getHistoryMeta`/`toAbs`/`ssrBase`/`RawXxx` 类型等)仍在 `@/lib/api`。涉及:StreetSnaps/StreetSnap/RunwayLooks/Item/Index.astro、en/cn 的 login/account/item/[id].astro、AuthModal.astro、Layout.astro、lib/favorites.ts、lib/history.ts。
- 依赖方向无环:api→{crypto,auth,locale};auth→locale;locale→i18n。
- **验证**:`astro build` 退出码 0,全部路由预渲染成功,无 Vite/import 解析错误(Vite 会在命名导出缺失或路径错误时报错,故等于全链路导入校验通过)。本地无 TypeScript 二进制,未跑 tsc(npx tsc 会拉到无关包)。
- **脚本教训**:PowerShell 内联 `node -e` 对正则/双引号转义极不可靠,凡要正则或双引号一律写 `.mjs` 脚本文件再 `node` 执行。
## Index.astro 代码排版整理(15:1x)✅
用户嫌 Index.astro 乱。纯排版,逻辑/class 未改:
- 原来第 48 行把 tabbar 第一个 `Runway` `<li>` 与注释全挤在一行(其余两个 li 正常多行)→ 重排为三个 li 统一多行缩进。
- 原来整段 `<style>`(含 Hot Brand / Street Style 全部样式)压成**一行** → 重排为多行、按 section 注释分组、每条规则缩进 2 空格、keyframes 体换行。注意:`@reference "tailwindcss";` 是 Tailwind v4 编译期指令,最终 HTML 里不会出现(被处理掉),样式已生效(.hs-swiper 在 SSR 输出出现 5 次)。
- 三块面板(Runway/Social Media/Street Style)统一 2 空格缩进与 `<!-- -->` 注释;Hot Brand 的 skel/spin/img/caption 与 Street Style 同结构重排。
- `<script>` 保持原样(已带分节注释,较整洁)。
- 验证:lint 0;dev 首页 SSR 仍渲染 `imgLoader`(1)/`tabbar`(1)/`hs-swiper`(5 含 style)/`hs-ring`(2)/`hs-cap-brand`(3)/`ss-cap-loc`(1),结构完整。
## item 页 /me/favorites/checks 调用三遍诊断(17:2x)🔍
用户问已登录访问 item 页为何 `/me/favorites/checks` 发三遍。`checkFavorited()`(favorites.ts:215)每次只单发一次请求(无循环),故三遍 = 三个独立调用点:
1. `Item.astro` `articleView.init()`→`initImageFavs()` 查 SSR 前 5 张图片(i/j 级,line 647→777)。
2. 同组件 `loadFull()` 补全量图后再次 `initImageFavs()` 查全量图片(line 678→复用 777)。
3. `en/item/[id].astro` fav-fab 脚本 `checkFavorited([meta.id])` 查整篇图集(r/s 级,line 105-106,粒度不同不可省)。
未登录 0 次(`serverMode()` 返 false 空返回;fav-fab 也跳过)。①② 为图片级、因图分批上 DOM 时序拆两次,可优化:init 仅本地 `isFavorited` 即时填充、服务端校正推到 loadFull 后统一一次 → 总 3→2。已向用户说明根因并给轻量优化方案,**用户尚未确认是否改**(待定)。同时清理 MEMORY.md 超长截断:精简合并、修正两处过时(底部门禁块已删 / `login to view all photos` key 已删),补全该诊断章节。
## item 页收藏态合并进主接口的设计讨论(18:1x)💡
用户进一步问:把「文章(图集)收藏态」与「图片收藏态」都合并进「获取图片的接口」返回是否合理。分析结论:
- **详情页(authed 全量接口)合并:合理、推荐**。已登录走 `getArticleDetailAuthed`(带 Bearer,后端 detail handler 已有 user 态)拉全量图片,正好顺带返回 `favorited`(图集级 r/s)+ `images[].favorited`(图片级 i/j)。收益:item 页已登录从 3 次 `/me/favorites/checks` → 0 次、消除图片分批上 DOM 的时序两次查询、首屏爱心不闪。条件:**仅附加在带 Bearer 的 authed 接口**,匿名公开接口(`getSsrArticle`)不动(保留缓存/公开性);响应用结构化字段返回。
- **列表页不合并:保持独立 `/me/favorites/checks` 批量校验**。列表分页、公开匿名为主、量大,合并会让接口无法缓存且每 item join favorites 成本高;现有「进页查当前页可见 id」更划算。
- 实时性:合并后收藏态随进页主接口一次性带出,页内点爱心走本地 optimistic + 后台同步即可,无需回查(跨设备校正需求弱)。
- 落地成本:需改 Go 后端 detail handler(加 favorites JOIN/IN 查询)+ 前端删 `Item.astro`/`StreetSnap.astro` 三处 checkFavorited 调用、改读主接口响应。**用户尚未确认是否落地**(待定)。
## item 页收藏态合并进主接口:已落地(19:0x)✅
用户确认「合并,并把没用到的接口去掉」。已完成前后端合并 + 清理:
- **后端(Go,已 `go build ./...` 通过)**:走秀 `article_handler.go:117-137` 与街拍 `street_snap_handler.go:99-119` 的 Detail handler,在 `uid:=middleware.UserIDFrom(c); ok` 时把 `detail.UID` + 全部 `detail.Images[].ID` 一次性 `h.favSvc.Check`(`Check` 内部 `WHERE user_id=? AND target_uid IN (?)`),回写 `detail.Favorited`(图集级 r/s)+ `detail.Images[i].Favorited`(图片级 i/j)。匿名(`ok=false`)不动 → 公开接口保持可缓存。DTO:`PublicArticleImage.Favorited` / `PublicStreetSnapDetail.Favorited`(`json:"favorited,omitempty"`)。
- **前端(读取主接口响应,不再单独查)**:`Item.astro`/`StreetSnap.astro` 把 `loadFull()` 重写为 `loadAuthedState()`——登录态(`getUser()`)即用一次 `getArticleDetailAuthed`/`getStreetSnapDetailAuthed` 拿回完整图片集 + 收藏态:图集级 `fav` 经 `window.dispatchEvent(new CustomEvent('fav:set',{detail:{id, fav}}))` 广播给右下角 fav-fab;图片级以 `im.favorited` 为准重建 `favIds`(覆盖 `initImageFavs` 的本地初值)。`init()` 与 `auth:login` 监听都改调 `loadAuthedState()`(不再限于 `preview`)。
- **fav-fab(`en/cn/item/[id].astro`)**:删 `checkFavorited([meta.id])`,改 `window.addEventListener('fav:set', ...)` 监听,`fav=true` 时 `hydrateFavorited` 写回本地 + `sync()` 刷新标签;初始仍本地 `isFavorited` 即时填充。
- **接口清理**:删后端唯一无调用的 dead route `legacy.POST("/auth/favorites/check", ...)`(单数 legacy 别名,前端从只用复数 `/me/favorites/checks`)。**列表页 `RunwayLooks.astro`/`StreetSnaps.astro` 仍用 `/me/favorites/checks` 批量校正,该接口保留**(按设计讨论:列表不分页合并)。
- 结果:item 页已登录收藏校验请求由 **3 次 → 0 次**(合并进 1 次详情请求);`read_lints` 相关文件 0 错误;后端编译 0 错误。验证:dev(:4321) 登录后打开 item 页 Network 不再出现 `/me/favorites/checks`,爱心态随详情响应直接正确(图集+图片级)。
- **关键约束(铁律补充)**:详情页收藏态只能合并进「带 Bearer 的 authed 详情接口」,匿名公开接口与列表接口绝不合并(保缓存/控成本)。

View File

@ -0,0 +1,132 @@
# 2026-09-14
## 前端 API 客户端二次拆分:SSG 构建期取数抽到 ssg.ts ✅
用户嫌 api.ts 杂乱,要求把构建期 SSG 接口单独成文件。
- 新建 `src/lib/ssg.ts`:`SsgPopularBrand` 类型 + `getSsgIndexRunway`/`getSsgHotBrands`/`getSsgStreetSnapPopular`(原 api.ts 末尾「SSG 构建专用」段)。import `requestSsg` from `./request`、`import type { BrandEntry, StreetSnapItem } from "./api"`(类型仅用,不引入运行期依赖,无环)。
- `api.ts`:删除上述类型与 3 个函数、`SsgPopularBrand` 类型;import 去掉 `requestSsg`;文件头注释移除 SSG 分组。
- 消费方改 import:`Index.astro`、`RunwayLooks.astro` 的 `getSsg*` 改从 `@/lib/ssg` 导入。
- 验证:`astro build` 退出码 0,全部路由预渲染成功(Vite 导入解析 = 全链路校验)。lint 0。
## ⚠️ 重要对账:auth.ts 鉴权函数并未真正拆出(纠正 09-13 总结)
09-13 总结称 login/logout/fetchMe 已拆到 `auth.ts`,但 09-14 读磁盘:`auth.ts` 只含会话存储原语(getUser/getAccessToken/saveSession/clearSession 等),`login`/`logout`/`fetchMe`/`enforceIdleLogout` 仍在 `api.ts`(约 387–465 行)。即上次的鉴权拆分未落盘(或已被还原)。已同步修正 MEMORY.md,避免以后再绕回去。
## 待用户决定是否继续
- 是否要把 `login`/`logout`/`fetchMe`/`enforceIdleLogout` 真挪到 `auth.ts`(完成上次未落地的拆分)?
- `getSsrArticle`/`getSsrStreetSnap`(运行期 SSR 按需,非 SSG)是否也要单独成 `ssr.ts`?目前与 `getArticleDetailAuthed`/`getStreetSnapDetailAuthed` 成对留在 api.ts。
## 端点路径集中到 endpoints.ts ✅(11:30)
用户要求把 `/api/v1/xxx` 端点字面量用 map/const 集中,且要与页面路由 `ROUTES` 区分。
- 新建 `src/lib/endpoints.ts`:导出 `endpoints`(分 `public`/`auth`/`me`/`ssg` 四组;动态 id 用函数如 `runwayLook(id)`;`V1="/api/v1"`、`SSG="/api/internal/ssg"` 前缀仅此定义一次)。`as const` 保证字面路径类型。
- 与 `src/lib/routes.ts` 的 `ROUTES`(前端跳转 URL)严格区分:endpoints=fetch 接口路径;ROUTES=页面路由(带 /en /cn)。命名上选 `endpoints` 而非 `apiRoutes`/`routes`,避免与 Astro 页面路由(及既有 `routes.ts`)混淆。
- 替换范围:api.ts 21 处、ssg.ts 3 处(含 `?limit=` 模板)、request.ts 1 处(refresh)。共 25 处端点字面量清零;grep 确认仅剩注释与 endpoints.ts 定义常量。
- 坑:`enforceIdleLogout` 那行 `auth: false }).catch` 有空格,首轮替换因 old_str 缺空格未命中(工具误报成功),已补替换;`getSsr*` 的 `${b}/api/v1/...` 模板改为 `${b}${endpoints.xxx(id)}`。
- 验证:`astro build` 退出码 0,全部 11 路由预渲染成功(SSG 三端点经新常量正常解析)。
## 用户问「api 地址要不要抽象出来」→ 已落地核查(10:5x)
- 结论:地址**已经**集中在 `src/lib/config/`(目录,非单文件):`index.ts` 导出 `config`(`validate(isProd?prod:dev)`)、`types.ts` 定义 `AppConfig`、`env.dev.ts`/`env.prod.ts` 两份值。无 `config.ts` 单文件,import `"./config"` 解析到 `config/index.ts`。
- 三把址:`config.baseApi`(浏览器运行期,request.ts:30)/ `config.baseApiSsr`(SSR 绝对 URL,request.ts:41,api.ts 经 ssrBase())/ `config.baseApiSsg`(构建期,request.ts:183)。**全站无直接 `import.meta.env.BASE_API` 读取**(memory 早先说的 `.env BASE_API` 已不实,dev/prod 值在 env.*.ts 硬编码)。
- 仅两处「还散」:① `/api/v1` 版本前缀每个端点内联(api.ts 头注释有意为之,便于全局替换升 v2);② `SSG_TOKEN` 故意读 `import.meta.env.SSG_TOKEN`(密钥,不进客户端 bundle,安全设计勿动)。
- 用户尚未决定:是否抽 `const API_PREFIX="/api/v1"` 常数。
## clientSign 安全性讨论(12:0x)→ 未改代码
- 实证:`client-sign-secret-change-me` **明文出现在产物** `dist/client/_astro/api.BMQlzPjg.js`(esbuild 只压缩不加密字符串)。`crypto.ts` 是 HMAC 软门槛,非加密。
- 结论:拒绝 VM 混淆/指纹(对内容站负收益,且救不了静态密钥);真正提难度靠服务端。建议方向=**服务端下发滚动密钥 + TTL/nonce 防重放 + IP 失败限流**(需动 backend_v2 的 `middleware.ClientSign`)。
- 附带发现(**待修**):`crypto.ts:9` `CLIENT_SIGN_SECRET` 是**硬编码 dev 值、未走 env** → 生产要么功能失效要么形同虚设。
## 全站代码审计(12:19 起,只读,未改任何文件)→ 报告已出
范围:js/css/libs/api/复用/目录/命名/性能。产出分级清单(artifact: code-review-plan.md)。核心发现:
- **P0-1 ⭐ 生产 SSR 仍在跑调试日志**:`lib/http.ts:16` `ENABLED = DEV || import.meta.env.SSR || DEBUG_API`——`import.meta.env.SSR` 在构建出的 Node 端恒 true,故生产每请求都 `res.clone()+await text()` 且 `writeLog()` 往容器 `logs/api-debug.log` **追加写入**(磁盘无限增长)。改法:ENABLED 去掉 SSR 分支。
- **重复地图**:① `Item.astro`(1161行) vs `StreetSnap.astro`(645行) 灯箱逻辑逐行重复(仅 `#article-gallery`↔`#snap-gallery`),Item 多 density/detailLb → 抽 `createGalleryView()`;② `RunwayLooks` vs `StreetSnaps` 的 pills/goPage/prevPage/nextPage/pageList/markFavs/favState/toggleFav 同构 → 继续下沉 `looks-grid.ts`;③ `full()`(ssrBase 绝对化) 在 Item:17 / StreetSnap:18 逐字相同 → 抽 `ssrAbs()` 到 request.ts;④ `toAbsUrl(){return toAbs(url)}` 是空包装可直接删;⑤ account.astro 的 `favPageList`/`histPageList` 同一段逻辑写两遍。
- **cn/en 页面**:6 对文件里 8 个**逐字节相同**,`account.astro` 仅差 1 行注释;语言差异 100% 在运行时(`Astro.currentLocale`),页面无任何语言分支 → 可抽共享页面组件。
- **项目未启用 View Transitions**(Layout 无 ClientRouter,全局搜无):故 `Index.astro:579` 的 `astro:page-load` 监听是死代码(保留无害)。
- **死配置/过时注释**:`astro.config.mjs` 空 `build{}` 块 + 第 29 行「英文在根路径」注释错误(prefixDefaultLocale:true 实际在 /en);`routes.ts:18-20` 过时注释(称街拍详情走 /street-snaps/[id],实际统一 /item/[id]);`Item.astro:1084` `// TODO 这是干啥的`;`pages/index.astro:3` 「应该跳转到 /en」未实现。
- **遗留文件**:`_tmp_verify_hist.mjs`/`_tmp_verify2.mjs`/`dev.log`/`server.err`/`footertail.txt`/`README.md`(Astro 模板残留)。`.gitignore` 未覆盖 `_tmp*`/`*.err`/`footertail.txt` → 误入库风险。删除属破坏性操作,**待用户确认**。
- **配置**:`package.json` `name:"test"`、**无 lint/format/check 脚本**(tsconfig 用 strict 却无处触发校验)。
- **纠正子代理误判**:dictionary 的 key 大小写差异(`t('Home')` vs dict `home`)**不是死 key**——`translate` 走 `key.toLowerCase()` 查表,都能命中。勿再当死 key 处理。
- 未深入:`favorites.ts`(8.3KB)、`history.ts`(6.5KB)、`look-grid.css`(8.9KB) 仅做了引用面检查,未逐行审。
- 用户尚未选择要做哪几项。
## i18n 目录迁入 lib 并合并 ✅(17:26,方案 A + 合并 lib/locale)
用户问「i18n 移到 lib 合理吗 + 合成 i18n.ts」。判定:移入 lib 合理(本就是基础设施层,且 `lib/locale.ts` 原本反向 import i18n);合成单文件要当心 dictionary 会无限增长。
- **新结构**:`src/lib/i18n/index.ts`(配置+工具+API语言透传,原 config.ts+utils.ts+lib/locale.ts 三合一)+ `src/lib/i18n/dictionary.ts`(纯数据,独立保留,随 UI 增长)。
- **删除**:`src/i18n/{config,utils,dictionary}.ts` + `src/lib/locale.ts` + 空目录 `src/i18n`。
- 消费方 16 处 import 改写:`@/i18n/utils`→`@/lib/i18n`、`@/i18n/config`→`@/lib/i18n`、`@/lib/locale`→`@/lib/i18n`、`lib/{ssr,request}.ts` 内 `./locale`→`./i18n`。`Layout.astro` 三段合并成一行 `import { getI18n, LOCALE_NAMES, setApiLocale } from '@/lib/i18n'`。
- **循环依赖注意(良性)**:`index.ts` import `translate` from `./dictionary`,`dictionary.ts` import `DEFAULT_LOCALE/Locale` from `./index`。均「函数体内才用」,模块求值不触发 TDZ,安全。已在 index.ts 头注释标注。
- 验证:`npm run build` Complete!;`npx astro check` **0 errors / 0 warnings / 5 hints**(hints 全是预存 `is:inline` 提示,非本次引入)。
## 清理 5 个 astro check hint ✅(19:18)
用户要求清掉上一轮残留的 5 hint。实际构成(非全 is:inline,前轮口误更正):
- `env.d.ts:8` ts(80003):原 `import type * as Alpine from "alpinejs"` → 改 `import type Alpine from "alpinejs"`(默认导入)。安全依据:tsconfig 继承 astro/strict 且 TS 主动提示 ts(80003) 即证明 esModuleInterop 已开,默认导入被允许;原注释"不能用默认导入"是过时误解,已重写。
- `LoadingScreen.astro:10` ts(6133)×2:`getI18n(Astro)` 解构出的 `locale`/`getRelativeLocaleUrl` 未用 → 改为 `const { t } = getI18n(Astro)`。
- `RunwayLooks.astro:263` / `StreetSnaps.astro:219` astro(4000):两个 JSON 数据 `<script>` 带属性被当 is:inline → 显式加 `is:inline` 消除歧义(语义本就该内联)。
- 复验 `npx astro check`:**0 errors / 0 warnings / 0 hints**。
## 清理 lib 未使用导出 ✅(19:46)
用户要求删 lib 内没用到的函数。子代理扫全 19 个 lib 文件导出符号后,交叉核对结论:
- **唯一真死代码**:`crypto.ts` 的 `CLIENT_SIGN_TTL`(导出 const,全项目零引用,注释称"调试时读取"但无人读)。已删 + 清过时注释。`clientSign` 仍用硬编码 30s 逻辑(TTL 仅服务端校验,前端不回传)。
- **导出但只被本模块内部调用(不算没用到,保留)**:`auth.getAccessExpiresAt`(被 isAccessExpiring 调)、`http.loggedFetch`/`installApiLogger`(installApiLogger 模块底自动安装时调)、`i18n.useTranslations`(被 getI18n 调)、`i18n.getLocaleFromUrl`/`LOCALES`(被本模块调)。这些是模块自身 API 面,勿当死代码删。
- 验证:`npm run build` Complete,`astro check` **0/0/0**。
## 详情页灯箱重构:抽共享工厂 + 共享灯箱组件 + 样式统一 ✅(15:5x)
用户要求「灯箱也帮我改改,顺便看样式怎么和全站更契合」。
- **新建 `src/lib/gallery.ts`**:`createGalleryView(cfg)` 工厂,装走秀/街拍详情页**逐行同构**的图集+大图灯箱逻辑(约 250 行)。cfg 只有 4 项差异:`rootSelector` / `gallerySelector` / `favType` / `fetchDetail`。导出 `GalleryView`(= `ReturnType<typeof createGalleryView>`)、`GalleryImageRaw`、`GalleryDetailFetcher`、`GalleryExtraImage`。
- **新建 `src/components/GalleryLightbox.astro`**:共享灯箱标记(约 150 行),props 仅 `images`(SSR 首屏图,需带 thumb)+ `aspect`(`2/3` 走秀 / `3/4` 街拍,两个字面量都写在组件里保证 JIT 扫得到);走秀独有的「细节图簇」经具名插槽 `slot="details"` 注入。
- **`Item.astro` 1161→约 850 行、`StreetSnap.astro` 645→约 330 行**;两者 `<style>` 整块删除。
- **共用原子样式上提 `src/styles/global.css`**:`.fav-btn`(爱心描边/实心)、`.locate-flash`、`@media (hover:none)`、`.no-scrollbar`。原因:Astro 组件 `<style>` 会加作用域哈希,而 `.fav-btn` 同时出现在网格图、灯箱、列表卡片,组件作用域**跨组件命中不了**。
- **`RawStreetSnap.images` 补 `thumb?: string`**(api.ts),使街拍灯箱缩略图条也能用 240px 缩略图。
### ⭐ 新踩的坑:对象展开会让 `Alpine.data` 的泛型 T 退化成 `{}`
`Alpine.data("x", () => ({ ...createGalleryView(cfg), density: 5 }))` → T 推断失败 → `this` 变成 `InferInterceptors<{}> & XDataContext & Magics<{}>` → **所有 `this.xxx` 报 ts(2339)「属性不存在」**(本次一次报 69 个)。
**根因**:`@types/alpinejs` 的 `data<T extends {[key in keyof T]: T[key]}>(...)` 自引用约束,从「对象字面量」能推断,从「展开表达式」推断不出来。
**修法**:给回调**显式标注返回类型**——`(): ReturnType<typeof createGalleryView> & ArticleExtras => ({...})`。`this` 于是取上下文类型,全部解析。Item 需为此写出 `ArticleExtras` 类型(约 28 个成员)。
**顺带三条工厂约束**(已写进 gallery.ts 头注释):
1. 工厂内**不用 Alpine 魔法**(`$el`/`$nextTick`)→ 改 `cfg.rootSelector` 查根节点 + `requestAnimationFrame` 等渲染。
2. **getter 会被展开求值成静态值** → `currentFavId`/`currentFavUrl` 改成**方法**,模板里写 `currentFavId()`。
3. 共享初始化叫 **`galleryInit()`** 而非 `init()`(组件自己的 `init()` 会覆盖它)。
### 灯箱样式统一(用户明确要求"更契合")
以 `Item.astro` 的灯箱为基准(它本来就是编辑风),把 `StreetSnap.astro` 的旧版对齐过来。产物 HTML 核对:旧样式 `hover:scale-105` / `bg-gradient-to-b` / `rounded-[6px]` / `bg-white/75` / `✕`字符 **全部为 0**。
统一项:计数改零填充 `01 / 05` + `tracking-[0.22em]` 直角细框;缩略图激活态 `ring-1 ring-black`(去掉 `scale-[1.03]`+`ring-2`);nav/关闭按钮改直角 + `hover:bg-black hover:text-white`(去掉圆角药丸 + scale 悬停);关闭图标改 SVG(去掉 `✕` 字符);缩略图条去掉顶部渐变;文案字号/字距对齐。
**唯一一处超出"纯统一"的改动**:灯箱的单图收藏按钮由**直角改圆形**,对齐全站收藏语义(列表卡片 `.fav-toggle`、详情页 `#fav-fab` 都是 `rounded-full`)。用户若不认同一行可回退。
### 验证手段(新增,值得复用)
`item/[id]` 是 `prerender=false`,**dist 里没有 HTML**,没法用产物对比。改法:**临时建一个 prerender 的验证页**(`src/pages/zzverify.astro`)直接渲染目标组件、喂假数据 → `npm run build` → 用 PowerShell 正则统计产物 HTML 里的关键类名/绑定次数 → 验完删页重建。
本次核对结果:`id="lb-thumbs"`×2、`id="lb-details"`×1(仅走秀)、`currentFavId()`×4、走秀缩略图 `aspect-[2/3]`×6 / 街拍 `aspect-[3/4]`×6(6 = 5 张 SSR + 1 个 x-for 模板)。
- 最终验证:`npm run build` exit 0;`npx astro check` **0 errors / 0 warnings / 3 hints**(与基线一致,hints 是既有 `is:inline` 提示)。
- 坑:`astro check` 输出会被 PowerShell 吞;用 `Out-File -Encoding utf8` 落盘再用文件工具读;`Get-Content` 必须带 `-Encoding utf8`(否则被安全策略拦)。
## 用户「全都帮我改下吧」→ 已落地的优化(13:xx–14:xx)
全部通过 `npm run build`(exit 0)+ `npx astro check`(exit 0)+ 产物 HTML 对比验证。
### P0
- **http.ts 生产关闭调试日志**:`ENABLED` 去掉 `import.meta.env.SSR` 分支(该值在构建出的 Node 端恒 true → 生产每请求都 clone+读 body,且 `writeLog` 往容器 `logs/api-debug.log` 无限追加)。现仅 `DEV || DEBUG_API==="true"`。
- 清理死配置/过时注释 5 处:`astro.config.mjs` 空 `build{}` 块 + 第29行「英文在根路径」错误注释(实际 /en);`routes.ts:18-20` 过时注释;`Item.astro` 的 `// TODO 这是干啥的`;`pages/index.astro:3`「应该跳转到 /en」未实现。
- **抽 `ssrAbs()` 到 request.ts**,删掉 Item.astro/StreetSnap.astro 各自本地 `full()`(逐字相同)。
- `package.json`:`name: "test"` → `frontend-v2`,加 `private: true` + `"check": "astro check"`;devDeps 加 `@astrojs/check`/`typescript`/`@types/node`。
- `.gitignore` 补 `_tmp*`、`*.err`。
- 删遗留文件:`_tmp_verify_hist.mjs`、`_tmp_verify2.mjs`、`dev.log`、`server.err`、`footertail.txt`。**`README.md`(Astro 模板残留)未动**;`_tmp_backfill.log` 非本次创建,保留(已被 ignore)。
### ⭐ 类型检查从 0 到有:60 errors → 0
- **根因**:`@types/alpinejs` 的 `data<T extends { [key in keyof T]: T[key] }, A extends unknown[]>(name, cb: (...a:A)=>AlpineComponent<T>)` 自引用约束使 `T` 推断失败 → 属性退化成 `unknown`、方法内 `this` 退化成 `{}`。`Alpine.store` 则是 `Stores` 为 `[key: string|symbol]: unknown`,内联字面量失去上下文类型。
- **修法**:① `Alpine.data` 的属性用 `as` 显式标注(如 `hotBrands as {...}[]`、`favIds: [] as string[]`、`user: null as AuthUser|null`);② `Alpine.store("auth", …)` 改为先 `const authStore: AuthStore = {...}` 再注册(AuthModal 一处修掉 16 个错);③ swiper 样式声明要放**非模块** d.ts(`src/types/swiper-css.d.ts`,env.d.ts 有 `export {}` 是模块,简写 ambient 声明不生效);④ `e.target` 用 `(e.target as Element|null)?.closest()`;⑤ `var el` → 收窄后另存 `const screen = el` 供闭包用(闭包内不保留收窄)。
- 剩余 3 hints(`is:inline` 提示、`env.d.ts` 默认导入建议)属噪音,未处理。
### P1
- **新建 `src/lib/ssr.ts`**:把 `getSsrArticle`/`getSsrStreetSnap` + `SsrArticleResult`/`SsrStreetSnapResult` 从 api.ts 迁出,与 ssg.ts 对称(ssg=构建期 / ssr=运行期按需,均服务端可信内部取数、不经签名)。api.ts 去掉 `ssrBase`/`withLocale` 导入。
- **`login/logout/fetchMe/enforceIdleLogout` 有意留在 api.ts**:它们要经 `request()`,而 request.ts 依赖 auth.ts 的令牌读取;搬进 auth.ts 会形成 `auth ↔ request` 循环依赖(**这就是 09-13 那次拆分没落地的真正原因**)。已在 api.ts 头注释写明。
- **cn/en 页面去重**:新建 `src/components/pages/{LoginPage,AccountPage,ItemPage}.astro`(用 `Copy-Item` 复制而非手抄,避免 600+ 行转写误差),`src/pages/{en,cn}/{login,account,item/[id]}.astro` 变 4 行薄包装。`ItemPage` 收 `id` prop —— **`export const prerender = false` 必须留在页面文件**(Astro 只读页面模块的该导出)。`pages/{en,cn}/{index,runway-looks,street-snaps}` 本来就是 5 行包装,未动(去重后反而更长)。
- **account.astro 分页去重**:`favPageList`/`histPageList` 同一段逻辑写两遍 → 抽 `buildWindowPages(cur,last)` 到 `looks-grid.ts`(与 `buildPageList` 形态不同:前者输出 `{label,page}`,后者输出 `number|"..."`,已在注释里写明勿混用)。
### P2
- **IntersectionObserver 泄漏**:`initThumbLazyLoading()` 在 `loadAuthedState()` 后会被再调一次,每次 `new` 一个 observer 且旧的没断 → Item/StreetSnap 各加模块级 `let thumbObserver: IntersectionObserver|null`,重建前 `thumbObserver?.disconnect()`。用模块级单例(非 Alpine data 属性)以免把 observer 塞进响应式代理。
### ⚠️ 纠正审计报告的两处错误结论(子代理给的,勿照做)
1. **dictionary 的「死 key」判断是错的**:`t('Home')`/`t('Previous')`/`t('No article ID specified')` 大小写与 dict 全小写不一致,但 `translate()` 走 `key.toLowerCase()` 查表,**全部能命中,不是死 key**。
2. **`toAbsUrl()` 不是「空包装、可直接删」**:模板里有 `:src="toAbsUrl(it.cover)"`(RunwayLooks:219/230),而 **Alpine 表达式访问不到模块 import 符号**(见 MEMORY 铁律 #4),所以 `toAbsUrl` 是必须存在的 data 方法,删了图片就加载不出来。
### 未做(下次可继续)
- **P1-1 详情页灯箱工厂**(Item.astro 1161 行 vs StreetSnap.astro 645 行,约 300 行逐行重复 → 抽 `createGalleryView()`):**最大重复源,但风险最高**。灯箱是交互核心,且 `item/[id]` 是 `prerender=false`(dist 无 HTML)→ **无法用产物 HTML 对比验证**,只能靠真跑浏览器。建议单独一轮做。
- **P1-3 详情页重复 HTML 片段**(SSR 首屏图与 extraImages 两份 figure 结构):同上,会动模板结构。
- **P0-4 列表页逻辑下沉**(pagination/fav mixin):净减行数只有约 35 行(mixin 机制本身要 ~75 行),且会让 UI 工具层 import 数据层;另有 Alpine `this` 推断的不确定性。收益/风险比不划算,暂缓。
- **P2-5 补 any 类型**(account.astro 的 `user: null as any`、`favorites: [] as any[]` 等)未动。
- `favorites.ts`(8.3KB)、`history.ts`(6.5KB)、`look-grid.css`(8.9KB) 仍未逐行审。

View File

@ -0,0 +1,33 @@
# 2026-09-15 工作日志
## 记住语言偏好功能 ✅(11:43–12:00)
用户要求:选过语言后,下次进首页直接用上次的语言。
- 关键前提:本项目 `prefixDefaultLocale: true`,/en、/cn 都带前缀,根 `/` 由服务端 302 到 `/en`。故「进首页」实际落在 /en,在此做自动跳转。
- `src/lib/i18n/index.ts` 新增 `STORED_LOCALE_KEY='preferred_locale'`、`storeLocale(locale)`、`getStoredLocale()`(localStorage 读写,单一来源)。
- `src/layouts/Layout.astro`:
- `<head>` 顶部加 `is:inline` + `define:vars` 脚本,进首页(path==='/' 或 '/'+defaultLocale)且记住了非默认语言时 `location.replace('/'+stored)`。脚本在 head 同步执行,先于首屏绘制,基本无闪白。
- 语言切换器 `x-data="{ open:false }"` → `langSwitch()`;`<a>` `@click` 改为 `open=false; pick('<code>')`。
- footer 脚本 import `storeLocale`,注册 `langSwitch` Alpine 组件(含 `pick(code){ storeLocale(code) }`)。
- **设计铁律**:只在「显式点击切换器」时写 localStorage,绝不按页面加载的 URL 写——否则与首页自动跳转冲突(点了英文又被 URL 上的 en 覆盖,首页永远跳不回去)。
- 验证:`npm run build` Complete;`astro check` 0/0/0;产物 HTML 确认内联脚本注入 `const defaultLocale="en"; const storedKey="preferred_locale";` 且两个 `pick('cn')`/`pick('en')` 锚点存在。
- 顺带整理了被截断的超长 MEMORY.md(重写精简版,保留架构/约定/脚本铁律/类型坑/lib分层/验证手段/门禁/账号/i18n/记住语言)。
## 语言建议弹窗(未选过语言时按浏览器语言提示)✅(12:11–12:30)
用户追加需求:没选过语言时,按浏览器语言自动判断,并弹小窗提示是否切换。
- `Layout.astro` footer `<script>`(alpine:init 内)新增 `localeSuggest` Alpine 组件,import 扩展为 `storeLocale, getStoredLocale, DEFAULT_LOCALE, LOCALE_NAMES`。
- `init()`:已 `getStoredLocale()` 则返回(交给 head 脚本重定向,不弹);否则读 `navigator.language`,`/^(zh|cmn|zho)/` → 'cn' 否则 'en';仅在首页(`p==='/' || p==='/' + def`)且 `detected !== cur` 时显示。
- `message` getter:target='cn' 时中文「检测到您的浏览器语言为「中文」,是否切换到中文界面?」;否则英文兜底。
- `switchLang()`:`storeLocale(target)` + `location.replace('/'+target)`;`keep()`:`storeLocale(current)`(记下"保持当前默认"避免再弹)+ 隐藏。
- body 末尾加弹窗标记 `x-data="localeSuggest()"` + `x-show="visible"` + `x-cloak` + `x-transition`,两个按钮 `keep()/switchLang()`,标签用 `names[target]/names[current]`(LOCALE_NAMES.nativeName:English / 中文)。
- 设计要点:弹窗与 head 重定向互斥(靠 `getStoredLocale()` 判存);点「保持」写 `current`(默认 en)即压制后续弹窗与重定向。
- 验证:`npm run build` Complete;`astro check` 0/0/0;产物 HTML 含 popup 标记、JS bundle 含 localeSuggest + 中英文案。
## 字体统一:移除 font-mono / font-serif ✅(16:16–16:23)
用户要求:font-mono 这类字体都不要了,否则字体不统一。
- 站里原混用 `font-sans`(系统栈,默认)+ `font-mono`(等宽)+ `font-serif`(衬线)三类,视觉不统一。
- 用脚本批量剥除 `src` 下全部 `font-mono`/`font-serif` 工具类(9 个 .astro 文件:Layout/LoginPage/AccountPage/AuthModal/BrandModal/ComingSoon/GalleryLightbox/RunwayLookCard/StreetSnapCard),UTF-8 无 BOM 精确回写,只删 token 不动其余。
- 两处"裸"字体声明单独手改:
- `LoadingOverlay.astro` `<style>`:删 `#loading-screen h1` 的 `ui-serif,...serif` 与 `.ls-sub` 的 `ui-monospace,...monospace` 两行 `font-family`(改继承 body 的 font-sans);同步更新注释里的"mono 小标"措辞。
- `AccountPage.astro` SVG 占位图 `<text font-family="monospace">` → `sans-serif`(SVG 作为 data URI 隔离渲染,必须显式给字体)。
- 残留核查:`font-mono|font-serif|monospace|ui-serif|ui-monospace` 在 src 下 0 命中。全站统一为 `font-sans`(系统字体栈)。
- 验证:`npm run build` Complete;`astro check` 0/0/0。

View File

@ -0,0 +1,120 @@
# 2026-09-17 工作日志
## 修复详情页空壳 + 评估 components/views 目录 ✅(15:12–15:30)
用户问 `components/views/` 是否还有必要(pages 不就是 view 吗),并指出 detail 组件是空的,疑似之前拆文件拆错。
### 根因(已查清)
- 详情实现原本在 `src/components/views/ItemPage.astro`(一个组件用 `type` 参数通吃 runway/street,含收藏/历史脚本)。
- commit `70a3304`(拆分)把 4 个 `[id].astro` 的 import 从 `ItemPage`(带 `type`)改成 `RunwayLooksDetail`/`StreetSnapsDetail`,但**这两个新文件建成空的(0 字节)**,且把 `ItemPage.astro` **删除了**。
- 后果:走秀/街拍详情页(`prerender=false` 的动态路由)此后一直渲染空壳,无报错不易察觉。
- 验证手段:`git log --all -- '*ItemPage*'` 定位 → `git show ad028c9:...ItemPage.astro` 找回 158 行完整实现;`70a3304` 该路径已不存在(在另一分支)。
### 修复(恢复原始可用结构)
- 从 `ad028c9` 恢复 `src/components/views/ItemPage.astro`(内容逐字还原,含 Props 接口、SSR 取数、TDK、收藏/历史 `<script>`)。
- 4 个 `[id].astro`(en/cn × runway-looks/street-snaps)改回 `import ItemPage` 并显式传 `type="runway"|"street"`。
- 删除两个空文件 `RunwayLooksDetail.astro`、`StreetSnapsDetail.astro`。
- 验证:`npm run build` Complete;`npx astro check` 0/0/0;残留搜索 `RunwayLooksDetail|StreetSnapsDetail` = 0 命中;`ItemPage` 仅出现在 4 个页面 + 自身。
### 关于 components/views 是否有必要(结论)
**有必要保留,不要并入 pages。**
- 本项目 `prefixDefaultLocale: true` → `src/pages/{en,cn}/...` 是**两套** locale 页面树,每个页面文件都是薄壳(仅 `export const prerender` + `import` 共享视图 + 渲染)。
- `components/views/*` 是 en/cn 两棵页面树**共用的页面体实现**(语言靠 `Astro.currentLocale` 运行时区分)。若把视图内容并进 pages,就得在 en/ 和 cn/ 各抄一份;保留 views/ 才是单一事实源。
- `views/` 命名与 pages 略重复是约定问题,但目录本身承担"跨 locale 共享页面体"职责,非冗余。可改名为 `components/pages/` 或直接摊平到 `components/`,但非必要,未做(避免无谓改动)。
- 现状 views/ 实际成员:Account / Home / Login / RunwayLooks / StreetSnaps / ItemPage(后两者非页面级路由,而是被 [id].astro 复用的详情体)。
## 待办/提醒
- 详情页为 `prerender=false` 动态 SSR,依赖后端 `:8090` 接口;本次仅验证编译/类型通过,真实渲染需起后端联调(用户本地点一下 /runway-looks/<id> 最稳)。
## ItemPage 按 type 拆成两个 Detail ✅(16:10–16:18)
用户要求把 `ItemPage.astro`(用 `type` 参数通吃 runway/street)拆成两个独立 Detail。
- 关键事实:runway/street 的差异只在「取数函数(getSsrArticle/getSsrStreetSnap) / 卡片组件(RunwayLookCard/StreetSnapCard) / TDK 文案 / meta.type 值」;而收藏/历史 `<script>` 类型无关(全靠 data-* 透传)。
- 新建 `RunwayLooksDetail.astro`、`StreetSnapsDetail.astro`(各只收 `id` prop,type 在组件内固化),各管自己的 SSR 取数 + TDK + 卡片 + fav 按钮标记。
- 把那段 ~50 行收藏/历史脚本抽成 `src/lib/detailFav.ts` 的 `initDetailFav()`(读 `#fav-fab` 的 data-*);两个 Detail 各用 `<script> import { initDetailFav }` 调用,避免重复。该脚本是打包模块(有 import,无 define:vars),合规。
- 4 个 `[id].astro`(en/cn × runway-looks/street-snaps)改指各自 Detail(`type` 不再透传);删 `ItemPage.astro`。旧 `/item/[id]` 仅做 301 重定向,不依赖 ItemPage,不受影响。
- 注意:这 4 个页面文件在 15:14→16:10 间被改过(注释/顺序变了),首次批量 replace 因 old_str 不匹配失败;重新读取真实内容后才改成功。教训:改他人可能动过的文件前先重新读取。
- 验证:`ItemPage` 引用搜索 0 命中;`npm run build` Complete;`npx astro check` 0/0/0。
## 后端图片去重现状调研(用户问爬虫判重怎么设计)✅(17:10–17:20)
用户想给爬虫加"爬到图先判是否库里已存过"。调研 `backend_v2` 发现**这套已实现**,无需从零设计:
- `internal/pkg/phash/phash.go`:纯标准库 **dhash**(64-bit 指纹,非向量),`DefaultThreshold=10`(汉明距离≤10 判近似重复),解码失败返回 0。包名虽叫 phash 实为 dhash(注释已说明)。
- 入库管线 `ingest_service.go`:`downloadOne` 每张图下载后 `phash.Of(data)`;`processRunway/processStreet` 调 `tagDuplicates→matchDuplicates→repo.ListImagePHashes` 比对并标 `IsDuplicate=1 + DupOf`。
- 模型 `runway_image/street_snap/*_draft` 均有 `Phash uint64 / IsDuplicate uint8 / DupOf string` 三列。
- **关键行为**:当前是「只标记、不拦截止」(留痕交人工裁决),且比对库**仅已晋升正式表**(runway_images+street_snap_images),跳过 is_deleted 与 phash=0,**不含草稿表/本批内部**。
- 存储用 sha1 内容寻址 key → 同字节幂等不堆孤儿文件,但 DB 行仍会多一条。
- 效率注:每次入库任务全量拉 phash 表,千级 OK;到十万级需改分批/缓存。
- **待用户拍板**:他想要的是「标出来给人看」(现在就能用)还是「命中就拦截不存」(需改 ingest_service 两处 + 引用计数)。阈值 10 可后续按真实样本调。
## 移除后端 phash 感知哈希去重 ✅(17:20–17:55)
用户明确:图片量会很大,不想要 phash 了(当前 `ListImagePHashes` 每任务全表扫描,O(N) 不具扩展性)。
- 彻底移除感知哈希层:删 `internal/pkg/phash` 包;`ingest_service.go` 去掉 `downloadOne` 的 `phash.Of` 与 4 返回值(uint64)、`fetchImages` 的 `[]uint64` 返回与 `phashes`、两个 `fetchLookImages`/`fetchImages` 调用处解包、processRunway/processStreet 的 `phashList`/`phs` 与 `tagDuplicates` 调用,并删除 `tagDuplicates`/`matchDuplicates` 两个函数;`ingest_repository.go` 删 `ListImagePHashes` 方法、`ImagePHash` 结构体及其接口声明;4 个 model 文件删 `Phash/IsDuplicate/DupOf` 三列;`review_repository.go` 晋升时不再拷贝这三列。
- 实现手法:用一段 Python 脚本(正则+精确串替换,`\t` 转义规避 tab 对齐)批量改 `ingest_service.go`,`go build ./...` 通过后删 phash 包与临时脚本。
- **刻意保留**:`downloadOne` 的 sha1 内容寻址存储 key(与 phash 无关,能天然防重复文件/孤儿文件),未动。
- 验证:`go build ./...` 两次均 EXIT:0;残留扫描 phash/Phash/IsDuplicate/DupOf/tagDuplicates/matchDuplicates/ListImagePHashes/phashList/phs[ = 0。
- 提醒:库表 `phash/is_duplicate/dup_of` 列 GORM 不会自动 DROP(仅 ADD),已升为孤儿列(可后续加迁移清掉);若将来要多来源"近似重复"仍要,应改 LSH/ANN 索引而非全表扫描。前端从不消费这三个字段。
## 去重替代方案方向(用户移除 phash 后问"好的方案有哪些",18:43)💡 待用户拍板
核心认知:删的是"全表扫描的 phash 实现"≠去重需求没了。给出分层建议:
- **Tier1 精确去重(推荐先做)**:复用现有 sha1 存储 key,新增 `content_sha1` 列 + UNIQUE 索引,入库前 O(1) 查重/upsert;挡同字节/同URL重爬;代价近零、可无限扩展。
- **Tier2 近似去重**:复用 dhash(纯标准库),但加 `phash_bucket`(高12~16bit)索引,仅桶内算汉明距离,避免全表扫;解决用户"量大跑不动"死穴。
- **Tier3 embedding+ANN 向量库(overkill)**:CLIP/CNN + Qdrant/Milvus/pgvector,抓语义级重复;对 runway/street snap 爬取偏重,暂不建议。
- 待用户确认"重复"指:字节级(1)/近重复尺寸水印(2)/语义级(3);再出具体改法(含孤儿列复用 phash 名但重建结构)。
## 用户提议 pgvector+bit(64)+HNSW 方案(19:33)💡 已评估为 overkill
用户建议:装 pgvector,dHash 存 `bit(64)` 建 HNSW 索引做近似去重。核实 pgvector **确实支持** `bit(N)`+Hamming(`bit_hamming_ops`,算子`<~>`,`hamming_distance<=10` 后过滤)。
- **评估**:对 64 位 dHash 是杀鸡用牛刀——① HNSW 为高维(float/binary 数百~数千维)设计,64 维优势发挥不出且为近似索引(召回不如精确桶内比对);② 后端是 MySQL,为 64 位去重引 PG+pgvector 性价比低。
- **更优替代**:MySQL 上 `BIGINT phash` + 抽高16位 `phash_bucket` 建 B-tree 索引,桶内算汉明 → O(1) 精确、零新基建(即 Tier2 桶化版,正解原"全表扫跑不动"痛点)。
- **pgvector 正确用武之地**:语义档 CLIP `vector(1536)` + cosine HNSW(高维优势+二进制量化省存储),那才对得起基建。
- 仍待用户确认重复类型(字节级/同图变形/不同角度同造型)再定方案与是否引 PG。
## 重要更正:backend_v2 实际已是 PostgreSQL+pgvector(19:36)⚠️
核查 go.mod(gorm.io/driver/postgres + jackc/pgx,**无 mysql 驱动**)、internal/database/postgres.go(注释\"数据库已迁移至 PostgreSQL\" + gorm.Open(postgres.Open))、config.go DSN() 返回 postgres://、scripts/pgvector(PG16+pgvector Docker,initdb 自动建 vector 扩展,setup_pg_docker.sh 含 embedding vector(512)+hnsw 范例)。
- **结论**:用户说\"就用pg把,早打算迁移mysql→pg\"实为**既成事实**——后端早就是 PG 了,无需迁移。MEMORY.md 的 \"GORM(MySQL)\" 已更正为 PostgreSQL+pgvector。
- 因此去重可直接在 pgvector 上落地:content_sha1 唯一索引(精确) + phash bit(64)+bit_hamming_ops HNSW(近重复) + (可选)embedding vector(512)+cosine HNSW(语义)。
- 注意:本会话早些时候删 phash 包/列是真实发生的;现需重建 phash.go + 给 image 模型重回 phash/content_sha1 列,并把去重逻辑接成\"索引查\"而非之前的\"全表扫\"。
- 结论:上轮我给的「SQLite+LSH 分桶」方案在其已有 MySQL+全表扫 面前偏重,量到十万级再上 LSH 即可。
## 三档去重写入 backend_v2(用户拍板"都加把")✅(19:40–20:00)
用户确认"都加把"——精确 + 近重复 + 语义三档全部落地。已逐个核对磁盘代码,确实落地:
### 1) 重建 `internal/pkg/phash/phash.go`(dHash,纯标准库)
- `Of(data) uint64`:解码失败(webp 等)返回 0;`ToVectorBits(h) string` 转 `vector(64)` 二进制串 `[0,1,...]`(h=0 返回空串 → NULL);`Hamming(a,b) int`;`Size=64`、`DefaultThreshold=10`。
- 注释明确:指纹只写库,检索交给 pgvector HNSW,不再全表扫。
### 2) 4 张 image 模型加列
`BrandRunwayImage`/`BrandRunwayDraftImage`/`StreetSnapImage`/`StreetSnapDraftImage` 均加:
- `ContentSha1 string`(`size:64` + 部分唯一索引 `uk_*_content_sha1,unique,where:content_sha1 <> ''`,排除遗留空串行);
- `Phash sql.NullString`(`type:vector(64)`,text 扫描,规避 pgx 原生类型坑);
- `IsDuplicate uint8` + `DupOf string`(标记用,不拦截)。
### 3) `internal/database/postgres.go` 加 `ensureDedupSchema(db)`
- AutoMigrate 前先 `CREATE EXTENSION IF NOT EXISTS vector`;
- 幂等:`content_sha1` 部分唯一索引 + `phash vector(64)` 列 + `CREATE INDEX ... USING hnsw(phash bit_hamming_ops)`;
- 新建 `image_embeddings` 表(`image_id int`/`kind smallint`/`embedding vector(512)`/`created_at int`)+ `embedding vector_cosine_ops` HNSW(语义档位,当前不写,待 CLIP/DINOv2 接入)。
- 注意:`AutoMigrate` 只 ADD 不 DROP → 之前移除阶段遗留的孤儿列已无关(新结构用新列名)。
### 4) 入库管线 `ingest_service.go` + `ingest_repository.go`
- `downloadOne` 复算 `phash.Of` 并回填 `ContentSha1`/`Phash`;
- 新增 `dedupImage`:① 精确 → `repo.ImageExistsBySha1`(跨 4 表 `content_sha1=? AND is_deleted=0`)命中则**整行跳过不插**;② 近重复 → `repo.FindNearDuplicateImage`,用 `phash <~> ?::vector <= threshold(10)` 取最近一条,命中设 `IsDuplicate=1`+`DupOf`(仅标记不拦);③ 本批内 `seen` 去重;
- draft 晋升(`SaveRunwayFromDraft`/`SaveStreetSnapFromDraft`)复制去重字段。
### 验证
`go build ./...` EXIT 0;`go vet ./internal/service/` 干净;单测 `TestFetchImagesCleansUpOnFailure` 绿(`ok fashionapi/internal/service`)。
### 待办(未做)
- **运行期烟测**:起 pgvector Docker 实连,验证 GORM 把 `vector(64)` 列读进 `sql.NullString`(pgx text 格式扫描)无报错。尚未跑。
- 汉明阈值 10 可按真实样本微调。
## 修复 `cmd/dbtool dump` 的 42601 + Scan 报错 ✅(22:25–22:50)
`go run main.go dump` 导出 `brand` 表时连报两错,已逐个修掉:
### 错 1:SQLSTATE 42601 `at or near ")")`
- 根因:`colQuery` 里 `c.column_name = $1` 这行第 5 列 `(c.column_default LIKE 'nextval(%'))` 多了一个右括号(应为 `nextval(%'`);多余的 `)` 让整段变 `... = $1))` 语法错。
- 修复:改为 `(c.column_default LIKE 'nextval(%')`(单右括号,与 pkQuery 风格一致;该 `)` 是外层比较表达式收尾)。
- 验证手段:另写 `_diag2` 临时诊断确认 `nextval(%')`(单)可查、`nextval(%'))`(双)必 42601,定位到就是这行。
### 错 2:`Scan error on column index 4 ... couldn't convert <nil> into type bool`
- 根因:同上第 5 列当 `column_default` 为 NULL 时 `NULL LIKE 'nextval(%'` 返回 NULL,`rows.Scan(&isIdent bool)` 无法接收 NULL → 报错(`brand` 表无 serial 列,default 全 NULL 触发)。
- 修复:改为 `COALESCE(c.column_default LIKE 'nextval(%', false)`,把 NULL 收为 false。
### 验证
`go run main.go dump` → `✓ 已导出 15 张表 -> db_dump.json`,无报错。已删除 `_diag2` 临时诊断目录。

View File

@ -1,37 +1,75 @@
# 项目长期记忆(Project MEMORY.md)
## 模块策略(重要)
- 站点按模块逐个完善。当前上线「发布会模块」:首页 index + 走秀列表/详情(RunwayLooks = 走秀档案页,articles/shows 页面已在 i18n 重构中重组)。
- **品牌索引页已下线**(2026-08-26 确认):`src/pages/brands.astro` 及孤儿组件 `src/components/pages/brands.astro` 均已删除;品牌数据现在只通过走秀页侧栏 filter + 品牌弹窗呈现(热门 30 条走 SSG 接口,搜索/字母走运行时 `/api/v1/public/brands`)。
- 其余模块(Portfolio / Latest Projects / About / Contact / 根路径登录注册)为 ComingSoon 占位页;**导航(header)保持原样未改动**(用户 2026-08-07 明确「header 别动」),门禁完全靠占位页实现。`/en/login`、`/en/register` 已是真实页面(`AuthForm.astro`,mode login/register)。
> 维护约定:本文件只放**跨会话长期有效**的事实与铁律;当日细节写 `.workbuddy/memory/YYYY-MM-DD.md`。
> 历次合并去重:2026-09-15(大幅压缩;保留架构/约定/脚本铁律/类型坑/lib分层/验证手段/门禁/账号/i18n;删冗长示例与已过时待办)。
## 架构总览
- 前端:**d:/project/frontend_v2** — Astro SSG + Tailwind v4 + Alpine.js。`npm run build`(SSG 取数走 ssgRequest,失败回落空/假数据不影响构建)。
- 后端:**d:/project/backend_v2** — Go + Gin + GORM(MySQL),公开引擎 :8090(`/api/v1/public/*`、`/api/v1/auth/*`),SSG 内部引擎 :8091(仅 127.0.0.1,`/api/v1/ssg/*`,SSGToken 中间件,nginx 不反代)。
- **SSG 分组现状(2026-08-26)**:只剩两个端点——`/api/v1/ssg/index/runway`(首页 runway 区块,`IndexService.Runway`,hotBrand 20 条)+ `/api/v1/ssg/brands/hot`(走秀页热门品牌,`BrandService.Hot`,固定 30 条、按图片总数热度顺序,零参数)。`/ssg/brands`(全量 A-Z)与 `/ssg/articles/ids` 均已删除。
- **接口 i18n 约定**:后端按 `?locale=cn|en` 选列返回(pickLocale 缺翻译回落另一语言);前端取数统一复用带 locale 的原语(request/ssgRequest 等),**绝不裸写 fetch;语言以 URL 前缀为准**。
- 走秀标题 `title_cn` 已规则回填(backend_v2 `scripts/backfill_title_cn/main.go`,幂等);`description_cn` 为空白属预期,中文页回落英文。
- 前端 `d:/project/frontend_v2`:Astro(`adapter: node` standalone,SSR 取数)+ Tailwind v4 + Alpine.js。构建 `npm run build`;类型检查 `npm run check`(= `astro check`)。
- 后端 `d:/project/backend_v2`:Go + Gin + GORM(**PostgreSQL** + **pgvector**)。本地库见 `scripts/pgvector`(Docker 一键,PG16+,容器名 pgvector,库 fashion,账号 fashion/fashion_dev_2026;`initdb` 自动 `CREATE EXTENSION vector`)。公开引擎 :8090(`/api/v1/public/*`、`/api/v1/auth/*`);SSG 引擎 :8091(仅 127.0.0.1,nginx 不反代)。
- 接口 i18n:后端按 `?locale=cn|en` 选列;**语言以 URL 前缀为准**;`prefixDefaultLocale: true`(/en、/cn 都带前缀;根 `/` 由服务端 302 到 /en)。
- **base 地址全在 `src/lib/config/`**:`config.baseApi`(浏览器) / `config.baseApiSsr`(SSR 绝对) / `config.baseApiSsg`(构建期内部端口)。密钥类(SSG_TOKEN)直读 env。
- 后端 Windows 编译:`go build -o server-bin.exe`(非 `server-bin`)。前端 dev 不热加载 `.env`,改 base 后 `astro dev stop`+`--background`+浏览器硬刷新。
- `504 (Outdated Optimize Dep)`:删 `node_modules/.vite` 后重启 dev。
## 关键约定
- 视觉语言:黑白极简编辑风(monospace + Georgia 衬线大标题 + 细线),HBX / 时尚档案调性。字体全走 Tailwind 体系,禁止自写字体栈。
- **品牌名前端一律只显示英文**(用户偏好 2026-08-26:「前端品牌不要展示中文名称,标题可以留着」):api.ts 映射 `display = nameEn`;走秀标题/描述仍按 locale 选列。
- **API 命名哲学(用户原则)**:「每一个地方尽可能不要通过参数来复用接口,尽量一个功能一个接口」。查询参数仅限「同一资源的列表筛选/分页」;跨资源/独立功能一律独立路径(如 `brands/hot` 而非 `?featured=1`)。待办:公开侧 `/api/v1/public/brands` 的 featured/keyword/letter 参数拆分、`/articles` 的 `brand_id` 拆 `brands/:id/shows`、资源命名 `shows` vs `articles`、`popular` vs `featured`(目标清单见 artifact `api_endpoints_catalog.md`)。
- CSS:能 @apply 就 @apply;`<style>` 顶部 `@reference "tailwindcss";`。Tailwind v4 无零值类。
- 导航(Layout.astro)保持原样,门禁仅由占位页承担。
- 视觉:黑白极简编辑风,纯黑白禁用暖米色/柔和阴影;字体走 Tailwind 体系(系统字体栈,不引外部字体)。
- 跨组件复用原子样式放 `global.css`(Astro 组件 `<style>` 有作用域哈希,跨组件命中不了)。现含 `.fav-btn`/`.locate-flash`/`@media(hover:none)`/`.no-scrollbar`/`[x-cloak]`。
- Tailwind v4:`<style>` 顶部 `@reference "tailwindcss";`(编译期指令,不进 HTML);无零值类;能 @apply 就 @apply。
- Header 下拉 `x-show` 一律带 `x-cloak` 防 FOUC。Layout `<slot/>` 包 `flex-1 flex flex-col`;页内根容器禁用 `m-auto`(用 `w-full`+`max-w-[x] mx-auto`)。
- 未启用 View Transitions。
## Layout 陷阱(2026-08-12)
- Layout 把 `<slot />` 包在 `flex-1 flex flex-col` 容器里;页内根容器**禁用 `m-auto`**(cross-axis margin:auto 触发 shrink-to-fit → 内容多少决定宽度、页面抖动)。用 `w-full`(可配 `max-w-[xxx]` + `mx-auto`)。
## Astro `<script>` 铁律(踩坑汇总)
1. 打包型 `<script>` 拿不到 frontmatter 变量,需脚本顶部重新 import。
2. **`define:vars` + `import` = 致命**(包成 IIFE 后 import 进函数体 → SyntaxError)。要 import 改用 `data-*` 透传。
3. 片段页(无 `<html>`)`import '@/styles/global.css'` build 不注入 head → 整页无样式。
4. **Alpine 表达式只认组件 data / `$magic` / global**,外部函数先存进 data 属性(如 `isAuthed`、`toAbsUrl` 看似空包装但不能删)。
5. 验证 Alpine 运行时务必真跑浏览器,只看 SSR HTML 会漏掉绑定失效。
6. 共享组件 `Alpine.data('name', () => ({...}))` + `x-data="name()"`;由工厂展开须显式标注返回类型。
7. Swiper:`initSwipers()` 先 `destroySwipers()`;`setupSwipers()` rAF 延后 + `DOMContentLoaded`;Tab 用 document 事件委托。
8. IntersectionObserver 用模块级单例(如 gallery 的 `thumbObserver`),重建前 `?.disconnect()`(别放 Alpine data 属性被代理包一层)。
## Astro `<script>` 两大坑
- **作用域隔离**:frontmatter 的 import/变量在打包型 `<script>` 里拿不到(运行时 ReferenceError);脚本里要用什么就在脚本顶部重新 import。
- **不做模板插值**:打包型 `<script>` 里 `{t('...')}` 不会被执行 → `t is not defined`。预翻译用 `define:vars={{ hiLabel }}` 注入;模板区 `{t()}` 正常。
- 打包后脚本在 `_astro/*.js` 而非内联;查 dist 产物用 search_content(ripgrep),PowerShell 无 `Select-String -Recurse`。
## 类型检查与 Alpine 类型推断(2026-09-14 引入 `npm run check`,已修到 0)
- 坑 A:`@types/alpinejs` 自引用约束使 data 属性退化 `unknown`/`{}` → 属性显式标注(`user: null as AuthUser|null`、`favIds: [] as string[]`);`Alpine.store` 先 `const s: Store = {...}` 再注册。
- 坑 B:对象展开让 T 退化 `{}` → 给回调显式标注返回类型 `(): ReturnType<typeof createGalleryView> & X => ({...})`。
- 排查铁律:「Property does not exist on type '{}'」/「Object of type 'unknown'」先怀疑这两类,别怀疑业务代码。
- `astro check` 的 stdout 会被吞 → `npx astro check 2>&1 | Out-File -FilePath x.txt -Encoding utf8` 再读;`Get-Content` 须带 `-Encoding utf8`。
## 走秀数据分类(brand_runway)
- 三维分类字段:`collection_type`(rtw/menswear/couture/resort/pre_fall)、`season`(spring/fall/null)、`season_code`(SS26/FW25…派生)。靠 title 规则回填(幂等,25,206 行)。
- 公开列表 `?collection_type=&season=&season_code=&year=` 筛选;前端走秀页有系列/季节/年份 chips。
- 地理/城市维度:用户明确暂不做。
- 分布:rtw 15203 / menswear 4061 / couture 672 / resort 2894 / pre_fall 2376。
## lib 模块分层(2026-09-14 核对磁盘)
- `i18n/index.ts`(配置+工具+API语言透传:原 config/utils/lib/locale 三合一)+ `i18n/dictionary.ts`(纯数据,独立保留)。
- `auth.ts` 仅会话存储原语;`api.ts` 业务取数+鉴权(`login/logout/fetchMe/enforceIdleLogout` 有意留 api.ts,避免 auth↔request 循环);`ssg.ts` 构建期、`ssr.ts` 运行期、`gallery.ts` 灯箱工厂、`crypto.ts` 签名、`config/` base 址、`endpoints.ts` 后端路径唯一来源、`routes.ts` 前端跳转 URL(带前缀,`href` 用 astro:i18n、`clientHref` 浏览器内自拼)、`http.ts` 调试日志(开关 `DEV||DEBUG_API`)、`favorites.ts`/`history.ts`。
- 依赖无环:api→{request,crypto,auth,i18n,endpoints};ssr→{request,endpoints,i18n,api(type)};ssg→{request,api(type),endpoints};gallery→{request,auth,favorites};request→{crypto,auth,i18n,config,endpoints}。
## 部署(Docker + Gitea Actions)
- 交付文件:前端 Dockerfile / nginx.conf / docker-compose.yml / deploy.sh / .gitea/workflows/deploy.yml / .env.example / DEPLOY.md;后端 Dockerfile。nginx 拦截 `/api/v1/ssg/` 404;健康检查 `/api/v1/public/brands`。
## 验证手段
- 改完必跑 `npm run build`(全链路 import + 预渲染)+ `npm run check`。
- 预渲染页:`dist/client/{en,cn}/<page>/index.html` 归一化对比(去 `astro-cid-*` 与 `_astro/<asset>` 逐字节比)。
- `prerender=false` 页:临时建 prerender 验证页喂假数据,或 dev :4321 时 curl 真实 SSR(`curl :8090/api/v1/public/runway-looks` 的 `data` 直接是数组)。HTML 单行用 `[regex]::Matches($h,'...').Count` 统计关键标记。
## 未登录预览门禁(详情页)
- 后端硬截断:`/runway-looks/:id`、`/street-snaps/:id` 匿名且图>5 时截断前 5 张 + 回 `preview:true`+`image_total`;已登录(Bearer)返回完整。列表接口全量。
- 前端:SSR 前 5 张 + 剩余空图遮罩(`x-show="!isAuthed && preview"`+`x-cloak`,"login to view" + "+N photos");登录后取全量追加 `extraImages`。`getUser()` 读 localStorage `fa_user`。
## 账号体系
- 仅预置内部账号(admin/root)。双令牌 JWT(access 7d 无状态 + refresh 30d 仅存 SHA256 落库);登录即吊销该用户全部 refresh。
- 收藏服务端化 `favorites` 表(按 user_id 隔离,编码串 r=/s=、i=/j=);浏览历史 `histories` 表(唯一键 user_id+target_uid,FIFO 上限 2000)。
## i18n 字典约定
- `dict: Record<string,{cn:string}>`,key 即英文原文(en 返 key),value 只存非默认语言(仅 cn)。`translate(key,locale)` 对 key `toLowerCase()` 查(大小写不敏感,`t('Home')` 命中 `home`);缺翻译 en 回退 + dev 告警。中文绝不可当 key。
## 记住语言偏好(2026-09-15 新增)
- 需求:选过语言后下次进首页直接用上次语言。
- `i18n/index.ts` 新增 `STORED_LOCALE_KEY='preferred_locale'`、`storeLocale(locale)`、`getStoredLocale()`。
- Layout `<head>` 顶部 `is:inline`+`define:vars` 脚本:进首页(path==='/' 或 '/'+defaultLocale)且记住非默认语言时 `location.replace('/'+stored)`。
- 语言切换器 `x-data="langSwitch()"`;`<a>` `@click="open=false; pick('<code>')"`;footer 注册 `langSwitch`(`pick(code){ storeLocale(code) }`)。
- **铁律:只在显式点击切换器时写 localStorage,绝不按页面加载 URL 写**——否则与首页自动跳转冲突(点了英文又被 URL 的 en 覆盖,首页永远跳不回去)。
## 目录约定(用户 2026-09-17 确认)
- **`src/components/views/` 必须保留,勿并入 `src/pages/`,也勿把内容提取摊平。** 原因:本项目 `prefixDefaultLocale: true` → `src/pages/{en,cn}/` 是两套 locale 页面树,每个页面文件只是薄壳(路由 + `export const prerender` + 引入共享视图 + 渲染);`views/*` 是 en/cn 两棵页面树**共用的页面体实现**(语言靠 `Astro.currentLocale` 运行时区分)。并进 pages 会迫使 en/cn 各抄一份,制造重复。
- `views/` 命名与 pages 略撞语义,但目录本身职责明确(跨 locale 共享页面体单一事实源),仅属 cosmetic,非必要不改名。
- 现状 `views/` 成员:Account / Home / Login / RunwayLooks / StreetSnaps / RunwayLooksDetail / StreetSnapsDetail(`RunwayLooksDetail`/`StreetSnapsDetail` 非独立路由,是被 `pages/{en,cn}/{runway-looks,street-snaps}/[id].astro` 复用的详情体;2026-09-17 由 ItemPage 按 `type` 拆成两个,共享脚本抽到 `lib/detailFav.ts` 的 `initDetailFav()`)。
## 图片去重(backend_v2,2026-09-17 落地)
- **三档全上**:Tier1 精确(sha1 内容寻址 + `content_sha1` 部分唯一索引,命中整行跳过不插);Tier2 近重复(`phash` 存 `vector(64)` 二进制串,`bit_hamming_ops` HNSW,`<~> <= 10` 命中标 `IsDuplicate`/`DupOf`,只标不拦);Tier3 语义(`image_embeddings` 表 `embedding vector(512)` + `vector_cosine_ops` HNSW,待 CLIP/DINOv2 接入,当前不写)。
- 关键文件:`internal/pkg/phash/phash.go`(dHash 纯标准库,`ToVectorBits`→`vector(64)` 串,webp 解码失败→0→NULL)、`internal/database/postgres.go`(`ensureDedupSchema` 幂等 DDL + `CREATE EXTENSION IF NOT EXISTS vector`)、`internal/service/ingest_service.go`(`dedupImage`)、`internal/repository/ingest_repository.go`(`ImageExistsBySha1`/`FindNearDuplicateImage`)。
- `phash` 走 `sql.NullString` + `type:vector(64)` text 扫描,规避 pgx 原生类型坑;空串→NULL 不参与近邻检索。
- **索引查取代全表扫**(用户"图片量会很大"痛点):原 `ListImagePHashes` 全表扫 O(N) 已移除。
- 待办:pgvector Docker 实连烟测 GORM 读 `vector(64)` 进 `sql.NullString`;汉明阈值 10 可按样本微调。

41
CODEBUDDY.md Normal file
View File

@ -0,0 +1,41 @@
<!-- superpowers-zh:begin (do not edit between these markers) -->
# Superpowers-ZH 中文增强版
本项目已安装 superpowers-zh 技能框架(20 个 skills)。
## 核心规则
1. **收到任务时,先检查是否有匹配的 skill** — 哪怕只有 1% 的可能性也要检查
2. **设计先于编码** — 收到功能需求时,先用 brainstorming skill 做需求分析
3. **测试先于实现** — 写代码前先写测试(TDD)
4. **验证先于完成** — 声称完成前必须运行验证命令
## 可用 Skills
Skills 位于 `.codebuddy/skills/` 目录,每个 skill 有独立的 `SKILL.md` 文件。
- **brainstorming**: 在任何创造性工作之前必须使用此技能——创建功能、构建组件、添加功能或修改行为。在实现之前先探索用户意图、需求和设计。
- **chinese-code-review**: 中文 review 沟通参考——话术模板、分级标注(必须修复/建议修改/仅供参考)、国内团队常见反模式应对。仅在用户显式 /chinese-code-review 时调用,不要根据上下文自动触发。
- **chinese-commit-conventions**: 中文 commit 与 changelog 配置参考——Conventional Commits 中文适配、commitlint/husky/commitizen 中文模板、conventional-changelog 中文配置。仅在用户显式 /chinese-commit-conventions 时调用,不要根据上下文自动触发。
- **chinese-documentation**: 中文文档排版参考——中英文空格、全半角标点、术语保留、链接格式、中文文案排版指北约定。仅在用户显式 /chinese-documentation 时调用,不要根据上下文自动触发。
- **chinese-git-workflow**: 国内 Git 平台配置参考——Gitee、Coding.net、极狐 GitLab、CNB 的 SSH/HTTPS/凭据/CI 接入差异与镜像同步配置。仅在用户显式 /chinese-git-workflow 时调用,不要根据上下文自动触发。
- **dispatching-parallel-agents**: 当面对 2 个以上可以独立进行、无共享状态或顺序依赖的任务时使用
- **executing-plans**: 当你有一份书面实现计划需要在单独的会话中执行,并设有审查检查点时使用
- **finishing-a-development-branch**: 当实现完成、所有测试通过、需要决定如何集成这份工作时使用
- **mcp-builder**: MCP 服务器构建方法论 — 系统化构建生产级 MCP 工具,让 AI 助手连接外部能力
- **receiving-code-review**: 收到代码审查反馈后、实施建议之前使用,尤其当反馈不明确或技术上有疑问时——需要技术严谨性和验证,而非敷衍附和或盲目执行
- **requesting-code-review**: 完成任务、实现重要功能或合并前使用,用于验证工作成果是否符合要求
- **subagent-driven-development**: 当在当前会话中执行包含独立任务的实现计划时使用
- **systematic-debugging**: 遇到任何 bug、测试失败或异常行为时使用,在提出修复方案之前执行
- **test-driven-development**: 在实现任何功能或修复 bug 时使用,在编写实现代码之前
- **using-git-worktrees**: 当需要开始与当前工作区隔离的功能开发,或在执行实现计划之前使用——通过原生工具或 git worktree 回退机制确保隔离工作区存在
- **using-superpowers**: 在开始任何对话时使用——确立如何查找和使用技能,要求在任何响应(包括澄清性问题)之前调用 Skill 工具
- **verification-before-completion**: 在宣称工作完成、已修复或测试通过之前使用,在提交或创建 PR 之前——必须运行验证命令并确认输出后才能声称成功;始终用证据支撑断言
- **workflow-runner**: 在 Claude Code / OpenClaw / Cursor 中直接运行 agency-orchestrator YAML 工作流——无需 API key,使用当前会话的 LLM 作为执行引擎。当用户提供 .yaml 工作流文件或要求多角色协作完成任务时触发。
- **writing-plans**: 当你有规格说明或需求用于多步骤任务时使用,在动手写代码之前
- **writing-skills**: 当创建新技能、编辑现有技能或在部署前验证技能是否有效时使用
## 如何使用
当任务匹配某个 skill 时,读取对应的 `.codebuddy/skills/<skill-name>/SKILL.md` 并严格遵循其流程。
<!-- superpowers-zh:end -->

View File

@ -1,46 +1,71 @@
# Astro Starter Kit: Basics
# Xisoa — 时尚档案(Fashion Archive)
```sh
npm create astro@latest -- --template basics
记录走秀(runway looks)与街拍(street style)的时尚档案站。前端为 **Astro 静态站**,
数据来自独立的 **Go + MySQL 后端**(走秀/街拍列表、详情、收藏、历史等)。
## 技术栈
| 层 | 选型 |
| --- | --- |
| 前端框架 | Astro 7(静态输出,详情页走 `@astrojs/node` 按需 SSR) |
| 构建 | Vite 8(Rolldown) |
| 样式 | Tailwind CSS v4 |
| 交互 | Alpine.js(导航菜单、登录弹窗、收藏、灯箱等轻量交互) |
| 轮播 | Swiper |
| 后端 | Go + MySQL(独立仓库,不在本仓库内) |
| 部署 | Docker Compose + nginx(见 `DEPLOY.md`) |
## 目录结构
```
src/
├── components/ # 通用组件(卡片、灯箱、弹窗、导航等)
│ └── views/ # 各页面主体(Home / RunwayLooks / StreetSnaps / Login / Account ...)
├── layouts/
│ └── Layout.astro # 全站布局:TDK、导航、页脚、Alpine 全局组件注册
├── lib/
│ ├── api.ts # 业务接口封装(走 request())
│ ├── request.ts # 唯一 HTTP 入口:签名 / locale / Bearer / 401 续期
│ ├── endpoints.ts # 后端接口路径唯一来源(/api/v1、/api/internal/ssg)
│ ├── routes.ts # 前端页面路由(带 locale 前缀)
│ ├── config/ # dev / prod 两份非密配置 + 必填校验
│ ├── i18n/ # 国际化:语言解析、t()、字典
│ ├── ssg.ts / ssr.ts # 构建期 SSG / 运行期 SSR 取数
│ └── gallery.ts / favorites.ts / collection-page.ts / ... # 业务逻辑
├── pages/ # Astro 路由(en / cn 两套 + 根重定向)
├── styles/ # global.css / look-grid.css
└── env.d.ts
```
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
## 环境与配置
## 🚀 Project Structure
- **非密配置**:`src/lib/config/env.dev.ts`(dev)与 `env.prod.ts`(prod),按 `import.meta.env.PROD`
自动选择,缺项即抛异常。字段说明见 `src/lib/config/types.ts`:
- `baseApi`:浏览器运行期 API 基址(生产为空串 = 同源 `/api`)。
- `baseApiSsr`:运行期按需 SSR 取数基址(Node fetch 需绝对 URL)。
- `baseApiSsg`:构建期 SSG 内部端口基址(仅回环,不对公网暴露)。
- `idleLogoutDays` / `siteName`。
- **密钥**:不进 `config`(会打包进客户端 bundle),仅走构建期 env,例如 `SSG_TOKEN`。
Inside of your Astro project, you'll see the following folders and files:
## 常用命令
```text
/
├── public/
│ └── favicon.svg
├── src
│   ├── assets
│   │   └── astro.svg
│   ├── components
│   │   └── Welcome.astro
│   ├── layouts
│   │   └── Layout.astro
│   └── pages
│   └── index.astro
└── package.json
```
| 命令 | 说明 |
| --- | --- |
| `npm install` | 安装依赖 |
| `npm run dev` | 本地开发,`http://localhost:4321` |
| `npm run build` | 构建静态产物到 `./dist/` |
| `npm run preview` | 本地预览构建产物 |
| `npm run check` | `astro check`:类型 / 模板检查 |
| `npm run astro ...` | 直接调用 Astro CLI(如 `astro add`) |
To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
> 本地运行需先启动后端:接口默认落在 `localhost:8090`,SSG 内部端口 `localhost:8091`(见 `env.dev.ts`)。
## 🧞 Commands
## 国际化
All commands are run from the root of the project, from a terminal:
- 支持 `en` / `cn`,`prefixDefaultLocale: true` —— **两种语言都带前缀**(`/en/...`、`/cn/...`)。
- 翻译字典在 `src/lib/i18n/dictionary.ts`,**key 即英文原文**,中文环境命中译文、缺失回退英文。
- 页面用 `const { locale, t } = getI18n(Astro)`;客户端脚本用 `clientHref()` 自行拼前缀。
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
## 部署
## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
Docker Compose + Gitea Actions,前后端两个仓库联动上线。完整步骤见 [`DEPLOY.md`](./DEPLOY.md)。

View File

@ -1,11 +0,0 @@
> test@0.0.1 build
> astro build
[safe-delete] 操作失败: ERROR D:\project\test\test\node_modules\.vite\deps: Error during a `trash` operation: Unknown { description: "Some operations were aborted" }
Stack trace:
 at trashViaBinary (D:\apps\workbuddy\resources\app.asar.unpacked\cli\vendor\shim\genie-safe-delete.cjs:270:15)
at tryTrash (D:\apps\workbuddy\resources\app.asar.unpacked\cli\vendor\shim\genie-safe-delete.cjs:547:5)
at Object.wrappedPromisesRm [as rm] (D:\apps\workbuddy\resources\app.asar.unpacked\cli\vendor\shim\genie-safe-delete.cjs:766:15)
at async optimizeExplicitEnvironmentDeps (file:///D:/project/test/test/node_modules/vite/dist/node/chunks/node.js:31978:25)
at async Promise.all (index 1)

View File

@ -1,5 +1,5 @@
// @ts-check
import { defineConfig, envField } from 'astro/config';
import { defineConfig } from 'astro/config';
import { fileURLToPath } from 'node:url';
import tailwindcss from '@tailwindcss/vite';
@ -26,32 +26,16 @@ export default defineConfig({
defaultLocale: 'en',
locales: ['en', 'cn'],
routing: {
prefixDefaultLocale: true, // 英文在根路径 /shows,中文在 /cn/shows
prefixDefaultLocale: true, // 两种语言都带前缀:英文 /en/shows,中文 /cn/shows
},
},
build: {
// 示例:在构建过程中生 成`page.html` 而不是 `page/index.html`。
// format: 'file'
},
integrations: [alpinejs()],
adapter: node({
mode: 'standalone'
}),
// 环境变量声明:统一命名规范
// BASE_API —— 公开/运行期 API 基址(浏览器 + 按需渲染共用,空 = 同源 /api)
// BASE_API_SSG —— 构建期 SSG 内部端口基址(仅服务端,绝不进前端 bundle)
// SSG_TOKEN —— SSG 内部接口可选访问令牌(仅服务端)
// 注意:Astro 仅自动把 PUBLIC_ 前缀变量暴露给客户端,BASE_API 没有该前缀,
// 故必须在 schema 中声明为 access:'public',否则浏览器端 import.meta.env.BASE_API 为 undefined。
env: {
schema: {
BASE_API: envField.string({ context: 'client', access: 'public', optional: true }),
BASE_API_SSG: envField.string({ context: 'server', access: 'secret', optional: true }),
SSG_TOKEN: envField.string({ context: 'server', access: 'secret', optional: true }),
},
},
// base 地址配置已迁到 src/lib/config(dev/prod 两份 TS,缺则抛异常)。
// 仅「密钥」类仍走构建期 env(如 SSG_TOKEN),不在此声明,也不进客户端 bundle。
});

869
dev.log
View File

@ -1,869 +0,0 @@
> test@0.0.1 dev
> astro dev --port 4345
20:06:59 [vite] connected.
20:07:00 [types] Generated 0ms
20:07:00 [vite] connected.
 astro  v7.1.6 ready in 1053 ms
┃ Local http://localhost:4345/
┃ Network use --host to expose
20:07:00 watching for file changes...
20:07:09 [200] /shows 2667ms
20:07:21 [watch] dom_modal.html
20:07:43 [200] HEAD /shows 492ms
20:07:43 [200] /shows 276ms
20:25:27 [200] /shows 672ms
20:44:17 [200] /shows 587ms
20:46:17 [200] /article 22ms
00:32:00 Configuration file updated. Restarting...
00:32:00 [watch] /src/styles/global.css
00:32:00 [vite] connected.
00:32:01 [vite] connected.
00:32:01 [vite] Re-optimizing dependencies because vite config has changed
00:32:01 [vite] server restarted.
00:32:02 [200] /shows 618ms
00:32:03 [vite] dependency optimized: alpinejs
11:23:01 [200] /shows 584ms
11:28:36 [200] /shows 943ms
11:36:18 [200] / 13271ms
11:38:37 [watch] /src/styles/global.css
11:38:38 [200] /shows 777ms
11:43:14 [watch] /src/styles/global.css
11:43:15 [200] /shows 564ms
11:45:36 [watch] /src/styles/global.css
11:45:36 [200] /shows 551ms
11:46:20 [watch] /src/styles/global.css
11:46:21 [200] /shows 610ms
11:46:42 [200] / 18ms
11:46:54 [watch] home.html
11:46:55 [200] / 4ms
11:47:06 [200] /shows 7236ms
11:47:07 [watch] home.html
11:48:14 [200] / 4ms
11:49:30 [200] / 4ms
11:49:30 [watch] home.html
11:49:53 [200] HEAD / 3ms
11:49:53 [200] / 3ms
11:54:04 [200] / 4ms
11:57:39 [watch] src/pages/index.astro
11:57:40 [200] / 30ms
11:57:40 [200] / 30ms
11:57:47 [watch] src/pages/index.astro
11:57:47 [200] / 19ms
11:58:05 [watch] src/pages/index.astro
11:58:05 [200] / 20ms
11:58:05 [200] / 20ms
11:58:05 [200] / 2ms
11:58:30 [watch] /src/pages/index.astro?astro&type=style&index=1&lang.css, /src/pages/index.astro?astro&type=style&index=0&lang.css
11:59:05 [watch] /src/pages/index.astro?astro&type=style&index=1&lang.css, /src/pages/index.astro?astro&type=style&index=0&lang.css
11:59:16 [watch] /src/pages/index.astro?astro&type=style&index=1&lang.css, /src/pages/index.astro?astro&type=style&index=0&lang.css
11:59:29 [watch] /src/pages/index.astro?astro&type=style&index=1&lang.css, /src/pages/index.astro?astro&type=style&index=0&lang.css
11:59:34 [watch] /src/pages/index.astro?astro&type=style&index=1&lang.css, /src/pages/index.astro?astro&type=style&index=0&lang.css
12:00:11 [watch] /src/pages/index.astro?astro&type=style&index=1&lang.css, /src/pages/index.astro?astro&type=style&index=0&lang.css
12:00:17 [watch] /src/pages/index.astro?astro&type=style&index=1&lang.css, /src/pages/index.astro?astro&type=style&index=0&lang.css
12:00:36 [200] / 17ms
12:00:48 [200] / 2ms
12:02:03 [200] HEAD / 3ms
12:02:03 [200] / 1ms
12:03:52 [200] / 2ms
12:05:24 [watch] src/pages/index.astro
12:05:24 [200] / 22ms
12:05:24 [200] / 22ms
12:05:24 [200] / 1ms
12:05:25 [200] / 2ms
12:05:28 [watch] /src/pages/index.astro?astro&type=style&index=1&lang.css, /src/pages/index.astro?astro&type=style&index=0&lang.css
12:05:37 [watch] src/pages/index.astro
12:05:38 [200] / 30ms
12:05:38 [200] / 30ms
12:05:38 [200] / 4ms
12:05:38 [200] / 3ms
12:05:47 [200] / 1ms
12:06:32 [200] HEAD / 2ms
12:06:33 [200] / 1ms
12:19:05 [watch] /src/pages/index.astro?astro&type=style&index=1&lang.css, /src/pages/index.astro?astro&type=style&index=0&lang.css
12:19:15 [watch] /src/pages/index.astro?astro&type=style&index=1&lang.css, /src/pages/index.astro?astro&type=style&index=0&lang.css
12:19:32 [watch] src/pages/index.astro
12:19:32 [200] / 20ms
12:19:41 [200] / 1ms
12:20:15 [200] / 3ms
12:20:52 [200] HEAD / 2ms
13:08:58 [200] / 4ms
13:09:57 [200] / 3ms
13:11:55 [watch] /src/pages/index.astro?astro&type=style&index=1&lang.css, /src/pages/index.astro?astro&type=style&index=0&lang.css
13:11:59 [watch] /src/pages/index.astro?astro&type=style&index=1&lang.css, /src/pages/index.astro?astro&type=style&index=0&lang.css
13:12:07 [200] / 21ms
13:13:05 [200] HEAD / 1ms
13:13:05 [200] / 2ms
15:52:35 [200] / 4ms
17:07:01 [200] / 2ms
17:07:15 [200] / 2ms
17:29:37 Configuration file updated. Restarting...
17:29:37 [vite] program reload
17:29:37 [ERROR] [vite] An error happened during full reload
Failed to load url astro:server-app.js (resolved id: astro:server-app.js). Does the file exist?
Error: Failed to load url astro:server-app.js (resolved id: astro:server-app.js). Does the file exist?
at loadAndTransform (file:///D:/project/test/test/node_modules/vite/dist/node/chunks/node.js:20583:31)
17:29:37 [vite] connected.
17:29:42 [vite] connected.
17:29:42 [vite] Re-optimizing dependencies because lockfile has changed
17:29:42 [vite] server restarted.
17:32:09 [200] / 1965ms
17:32:19 [vite] dependencies optimized: swiper, swiper/modules
17:53:05 [200] / 34ms
17:53:05 [200] / 3ms
17:53:05 [vite] dependency optimized: alpinejs
17:53:47 [200] / 3ms
17:53:57 [200] / 2ms
17:54:12 [200] / 2ms
17:54:59 [200] / 2ms
17:55:40 [200] / 2ms
17:55:52 [200] HEAD / 3ms
17:55:53 [200] / 2ms
17:56:49 [200] / 2ms
17:59:43 [watch] /src/pages/index.astro?astro&type=style&index=0&lang.css, /src/pages/index.astro?astro&type=style&index=1&lang.css
17:59:50 [watch] /src/pages/index.astro?astro&type=style&index=0&lang.css, /src/pages/index.astro?astro&type=style&index=1&lang.css
18:00:06 [watch] src/pages/index.astro
18:00:07 [200] / 28ms
18:00:07 [200] / 28ms
18:00:11 [200] / 2ms
18:00:49 [200] / 1ms
18:01:05 [200] HEAD / 1ms
18:01:05 [200] / 1ms
18:10:32 [200] / 2ms
18:10:40 [200] / 1ms
18:11:25 [200] / 1ms
18:12:24 [200] / 2ms
18:21:35 [200] / 3ms
18:21:56 [200] / 2ms
18:24:11 [watch] /src/pages/index.astro?astro&type=style&index=0&lang.css, /src/pages/index.astro?astro&type=style&index=1&lang.css
18:24:48 [200] / 26ms
18:24:55 [200] / 3ms
18:25:02 [200] / 1ms
18:25:17 [watch] src/pages/index.astro
[
{
id: 52634,
brand: '5000',
title: 'Spring 2026 Ready-to-Wear',
season: 'AW26',
year: 2026,
img: 'https://assets.vogue.com/photos/68c84730627c7d40ac52aa17/master/w_2560,c_limit/00001-5000-spring-2026-ready-to-wear-credit-brand.jpg',
count: 30,
gallery: [
'https://assets.vogue.com/photos/68c84730627c7d40ac52aa17/master/w_2560,c_limit/00001-5000-spring-2026-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/68c8473052c290f6844f15a4/master/w_2560,c_limit/00002-5000-spring-2026-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/68c84730c00a8da1b9585e04/master/w_2560,c_limit/00003-5000-spring-2026-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/68c847330865a9bf107a6248/master/w_2560,c_limit/00004-5000-spring-2026-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/68c84733cc5a262b887823c6/master/w_2560,c_limit/00005-5000-spring-2026-ready-to-wear-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52633,
brand: '5000',
title: 'Fall 2025 Ready-to-Wear',
season: 'AW25',
year: 2025,
img: 'https://assets.vogue.com/photos/67a7ec6c540e35479b3d337c/master/w_2560,c_limit/00001-5000-fall-2025-ready-to-wear-credit-gorunway.jpg',
count: 27,
gallery: [
'https://assets.vogue.com/photos/67a7ec6c540e35479b3d337c/master/w_2560,c_limit/00001-5000-fall-2025-ready-to-wear-credit-gorunway.jpg',
'https://assets.vogue.com/photos/67a7ec6cee822deb1e8416c6/master/w_2560,c_limit/00002-5000-fall-2025-ready-to-wear-credit-gorunway.jpg',
'https://assets.vogue.com/photos/67a7ec6d551d29a948ad941e/master/w_2560,c_limit/00003-5000-fall-2025-ready-to-wear-credit-gorunway.jpg',
'https://assets.vogue.com/photos/67a7ec72ee822deb1e8416c8/master/w_2560,c_limit/00004-5000-fall-2025-ready-to-wear-credit-gorunway.jpg',
'https://assets.vogue.com/photos/67a7ec726ccfc8cbda1f1936/master/w_2560,c_limit/00005-5000-fall-2025-ready-to-wear-credit-gorunway.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52632,
brand: '5000',
title: 'Spring 2025 Ready-to-Wear',
season: 'AW25',
year: 2025,
img: 'https://assets.vogue.com/photos/66e1c75bd788bc9ca9d9acba/master/w_2560,c_limit/00001-5000-spring-2025-ready-to-wear-credit-brand.jpg',
count: 22,
gallery: [
'https://assets.vogue.com/photos/66e1c75bd788bc9ca9d9acba/master/w_2560,c_limit/00001-5000-spring-2025-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/66e1c772bc1a3e72a02f841a/master/w_2560,c_limit/00002-5000-spring-2025-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/66e1c772bc1a3e72a02f8419/master/w_2560,c_limit/00003-5000-spring-2025-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/66e1c775c22905cb0212f62b/master/w_2560,c_limit/00004-5000-spring-2025-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/66e1c79d0e2401b690216a7b/master/w_2560,c_limit/00005-5000-spring-2025-ready-to-wear-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52631,
brand: '4SDesigns',
title: 'Fall 2021 Menswear',
season: 'AW21',
year: 2021,
img: 'https://assets.vogue.com/photos/6027d24c0a9cf1d42cece5cd/master/w_2560,c_limit/00001-4SDESIGNS-MENSWEAR-FALL-21.jpg',
count: 34,
gallery: [
'https://assets.vogue.com/photos/6027d24c0a9cf1d42cece5cd/master/w_2560,c_limit/00001-4SDESIGNS-MENSWEAR-FALL-21.jpg',
'https://assets.vogue.com/photos/6027d244327fc00a43425432/master/w_2560,c_limit/00002-4SDESIGNS-MENSWEAR-FALL-21.jpg',
'https://assets.vogue.com/photos/6027d243fbb177114cbf582a/master/w_2560,c_limit/00003-4SDESIGNS-MENSWEAR-FALL-21.jpg',
'https://assets.vogue.com/photos/6027d247257ad32ccce37ce6/master/w_2560,c_limit/00004-4SDESIGNS-MENSWEAR-FALL-21.jpg',
'https://assets.vogue.com/photos/6027d2476da2d9ae5efbd828/master/w_2560,c_limit/00005-4SDESIGNS-MENSWEAR-FALL-21.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52630,
brand: '4SDesigns',
title: 'Spring 2021 Menswear',
season: 'AW21',
year: 2021,
img: 'https://assets.vogue.com/photos/5f5bc247c287ced7cb397bed/master/w_2560,c_limit/00001-4SDESIGN-MENS-Spring-2021.jpg',
count: 37,
gallery: [
'https://assets.vogue.com/photos/5f5bc247c287ced7cb397bed/master/w_2560,c_limit/00001-4SDESIGN-MENS-Spring-2021.jpg',
'https://assets.vogue.com/photos/5f5bc1d35b20143972317da5/master/w_2560,c_limit/00002-4SDESIGN-MENS-Spring-2021.jpg',
'https://assets.vogue.com/photos/5f5bc1df3c1d7b6a190becdd/master/w_2560,c_limit/00003-4SDESIGN-MENS-Spring-2021.jpg',
'https://assets.vogue.com/photos/5f5bc2425b20143972317da9/master/w_2560,c_limit/00004-4SDESIGN-MENS-Spring-2021.jpg',
'https://assets.vogue.com/photos/5f5bc213ad0b360706e648f7/master/w_2560,c_limit/00005-4SDESIGN-MENS-Spring-2021.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52629,
brand: '4SDesigns',
title: 'Spring 2022 Menswear',
season: 'AW22',
year: 2022,
img: 'https://assets.vogue.com/photos/60d1cbf645d4cb14fb3dc280/master/w_2560,c_limit/00001-4SDesigns-Mens-SS22-credit-brand.jpg',
count: 37,
gallery: [
'https://assets.vogue.com/photos/60d1cbf645d4cb14fb3dc280/master/w_2560,c_limit/00001-4SDesigns-Mens-SS22-credit-brand.jpg',
'https://assets.vogue.com/photos/60d1cbfb827cc425d00d5309/master/w_2560,c_limit/00002-4SDesigns-Mens-SS22-credit-brand.jpg',
'https://assets.vogue.com/photos/60d1cbfc43dc9f0bcf2cdf82/master/w_2560,c_limit/00003-4SDesigns-Mens-SS22-credit-brand.jpg',
'https://assets.vogue.com/photos/60d1cbfa31f3da1aa8f2b184/master/w_2560,c_limit/00004-4SDesigns-Mens-SS22-credit-brand.jpg',
'https://assets.vogue.com/photos/60d1cbff31f3da1aa8f2b186/master/w_2560,c_limit/00005-4SDesigns-Mens-SS22-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52628,
brand: '3.1 Phillip Lim',
title: 'Spring 2007 Ready-to-Wear',
season: 'AW07',
year: 2007,
img: 'https://assets.vogue.com/photos/55c6517108298d8be221a938/master/w_2560,c_limit/00010m.jpg',
count: 64,
gallery: [
'https://assets.vogue.com/photos/55c6517108298d8be221a938/master/w_2560,c_limit/00010m.jpg',
'https://assets.vogue.com/photos/55c6517108298d8be221a939/master/w_2560,c_limit/00020m.jpg',
'https://assets.vogue.com/photos/55c6517108298d8be221a93a/master/w_2560,c_limit/00030m.jpg',
'https://assets.vogue.com/photos/55c6517108298d8be221a93b/master/w_2560,c_limit/00040m.jpg',
'https://assets.vogue.com/photos/55c6517108298d8be221a93c/master/w_2560,c_limit/00050m.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52627,
brand: '4SDesigns',
title: 'Spring 2023 Menswear',
season: 'AW23',
year: 2023,
img: 'https://assets.vogue.com/photos/62a8a07f3f1b1935680d3bd7/master/w_2560,c_limit/00001-4SDesigns-mens-spring-2023-credit-brand.jpg',
count: 38,
gallery: [
'https://assets.vogue.com/photos/62a8a07f3f1b1935680d3bd7/master/w_2560,c_limit/00001-4SDesigns-mens-spring-2023-credit-brand.jpg',
'https://assets.vogue.com/photos/62a8a07e7fdb5f476a38ea63/master/w_2560,c_limit/00002-4SDesigns-mens-spring-2023-credit-brand.jpg',
'https://assets.vogue.com/photos/62a8a08298c7d4eb9d6771d8/master/w_2560,c_limit/00003-4SDesigns-mens-spring-2023-credit-brand.jpg',
'https://assets.vogue.com/photos/62a8a08abbd4a39a9da9c2dc/master/w_2560,c_limit/00004-4SDesigns-mens-spring-2023-credit-brand.jpg',
'https://assets.vogue.com/photos/62a8a093dd731c1b9956b7ce/master/w_2560,c_limit/00005-4SDesigns-mens-spring-2023-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52626,
brand: '4SDesigns',
title: 'Spring 2024 Menswear',
season: 'AW24',
year: 2024,
img: 'https://assets.vogue.com/photos/64972b08c2a3004981ecefa1/master/w_2560,c_limit/00001-4sdesigns-spring-2024-menswear-credit-brand.jpg',
count: 32,
gallery: [
'https://assets.vogue.com/photos/64972b08c2a3004981ecefa1/master/w_2560,c_limit/00001-4sdesigns-spring-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/64972b06cebc6648cb42b423/master/w_2560,c_limit/00002-4sdesigns-spring-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/64972b07117ea73b4611cc16/master/w_2560,c_limit/00003-4sdesigns-spring-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/64972b10f496fd5039bb28f5/master/w_2560,c_limit/00004-4sdesigns-spring-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/64972b166d2b1f02bbf79dfa/master/w_2560,c_limit/00005-4sdesigns-spring-2024-menswear-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52625,
brand: '4SDesigns',
title: 'Fall 2023 Menswear',
season: 'AW23',
year: 2023,
img: 'https://assets.vogue.com/photos/63c531d0d6dc24d26b516f7e/master/w_2560,c_limit/00001-4sdesigns-fall-2023-menswear-credit-brand.jpg',
count: 30,
gallery: [
'https://assets.vogue.com/photos/63c531d0d6dc24d26b516f7e/master/w_2560,c_limit/00001-4sdesigns-fall-2023-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/63c531d23cfdf376930a346a/master/w_2560,c_limit/00002-4sdesigns-fall-2023-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/63c531cf1944dc168acdfb98/master/w_2560,c_limit/00003-4sdesigns-fall-2023-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/63c531d43b8c841452deb23d/master/w_2560,c_limit/00004-4sdesigns-fall-2023-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/63c531d4a426ef92a40afb03/master/w_2560,c_limit/00005-4sdesigns-fall-2023-menswear-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52624,
brand: '3.1 Phillip Lim',
title: 'Fall 2007 Ready-to-Wear',
season: 'AW07',
year: 2007,
img: 'https://assets.vogue.com/photos/55c6517708298d8be222187c/master/w_2560,c_limit/00010m.jpg',
count: 70,
gallery: [
'https://assets.vogue.com/photos/55c6517708298d8be222187c/master/w_2560,c_limit/00010m.jpg',
'https://assets.vogue.com/photos/55c6517708298d8be222187d/master/w_2560,c_limit/00020m.jpg',
'https://assets.vogue.com/photos/55c6517708298d8be222187e/master/w_2560,c_limit/00030m.jpg',
'https://assets.vogue.com/photos/55c6517708298d8be222187f/master/w_2560,c_limit/00040m.jpg',
'https://assets.vogue.com/photos/55c6517708298d8be2221880/master/w_2560,c_limit/00050m.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52623,
brand: '4SDesigns',
title: 'Fall 2022 Menswear',
season: 'AW22',
year: 2022,
img: 'https://assets.vogue.com/photos/61e32026e135cfda761c9c1c/master/w_2560,c_limit/00001-4SDesigns-Mens-Fall-22-credit-brand.jpg',
count: 39,
gallery: [
'https://assets.vogue.com/photos/61e32026e135cfda761c9c1c/master/w_2560,c_limit/00001-4SDesigns-Mens-Fall-22-credit-brand.jpg',
'https://assets.vogue.com/photos/61e32029b1c1870aceac9214/master/w_2560,c_limit/00002-4SDesigns-Mens-Fall-22-credit-brand.jpg',
'https://assets.vogue.com/photos/61e3202cb1c1870aceac9216/master/w_2560,c_limit/00003-4SDesigns-Mens-Fall-22-credit-brand.jpg',
'https://assets.vogue.com/photos/61e3202e1be17143b2387ab5/master/w_2560,c_limit/00004-4SDesigns-Mens-Fall-22-credit-brand.jpg',
'https://assets.vogue.com/photos/61e32032a668411b428595ee/master/w_2560,c_limit/00005-4SDesigns-Mens-Fall-22-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52622,
brand: '3.1 Phillip Lim',
title: 'Fall 2006 Ready-to-Wear',
season: 'AW06',
year: 2006,
img: 'https://assets.vogue.com/photos/55c6516608298d8be220ec9d/master/w_2560,c_limit/01m.jpg',
count: 20,
gallery: [
'https://assets.vogue.com/photos/55c6516608298d8be220ec9d/master/w_2560,c_limit/01m.jpg',
'https://assets.vogue.com/photos/55c6516608298d8be220ec9e/master/w_2560,c_limit/02m.jpg',
'https://assets.vogue.com/photos/55c6516608298d8be220ec9f/master/w_2560,c_limit/03m.jpg',
'https://assets.vogue.com/photos/55c6516608298d8be220eca0/master/w_2560,c_limit/05m.jpg',
'https://assets.vogue.com/photos/55c6516608298d8be220eca1/master/w_2560,c_limit/06m.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52621,
brand: '3.1 Phillip Lim',
title: 'Fall 2008 Ready-to-Wear',
season: 'AW08',
year: 2008,
img: 'https://assets.vogue.com/photos/55c6518908298d8be2236856/master/w_2560,c_limit/00010m.jpg',
count: 106,
gallery: [
'https://assets.vogue.com/photos/55c6518908298d8be2236856/master/w_2560,c_limit/00010m.jpg',
'https://assets.vogue.com/photos/55c6518908298d8be2236857/master/w_2560,c_limit/00020m.jpg',
'https://assets.vogue.com/photos/55c6518908298d8be2236858/master/w_2560,c_limit/00030m.jpg',
'https://assets.vogue.com/photos/55c6518908298d8be2236859/master/w_2560,c_limit/00040m.jpg',
'https://assets.vogue.com/photos/55c6518908298d8be223685a/master/w_2560,c_limit/00050m.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52620,
brand: '4SDesigns',
title: 'Fall 2024 Menswear',
season: 'AW24',
year: 2024,
img: 'https://assets.vogue.com/photos/65a8fbbbe58c6b2c313c49c2/master/w_2560,c_limit/00001-4sdesigns-fall-2024-menswear-credit-brand.jpg',
count: 25,
gallery: [
'https://assets.vogue.com/photos/65a8fbbbe58c6b2c313c49c2/master/w_2560,c_limit/00001-4sdesigns-fall-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/65a8fbbcd46c3066d0e3a561/master/w_2560,c_limit/00002-4sdesigns-fall-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/65a8fbbdcb58e8ab7ad97d8c/master/w_2560,c_limit/00003-4sdesigns-fall-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/65a8fbbfdf79593d6bd9add0/master/w_2560,c_limit/00004-4sdesigns-fall-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/65a8fbc0d46c3066d0e3a563/master/w_2560,c_limit/00005-4sdesigns-fall-2024-menswear-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52619,
brand: '3.1 Phillip Lim',
title: 'Spring 2008 Ready-to-Wear',
season: 'AW08',
year: 2008,
img: 'https://assets.vogue.com/photos/55c6518008298d8be222c795/master/w_2560,c_limit/00010m.jpg',
count: 109,
gallery: [
'https://assets.vogue.com/photos/55c6518008298d8be222c795/master/w_2560,c_limit/00010m.jpg',
'https://assets.vogue.com/photos/55c6518008298d8be222c796/master/w_2560,c_limit/00020m.jpg',
'https://assets.vogue.com/photos/55c6518008298d8be222c797/master/w_2560,c_limit/00030m.jpg',
'https://assets.vogue.com/photos/55c6518008298d8be222c798/master/w_2560,c_limit/00040m.jpg',
'https://assets.vogue.com/photos/55c6518008298d8be222c799/master/w_2560,c_limit/00050m.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52618,
brand: '3.1 Phillip Lim',
title: 'Resort 2008',
season: 'AW08',
year: 2008,
img: 'https://assets.vogue.com/photos/55c6517d08298d8be222920d/master/w_2560,c_limit/01m.jpg',
count: 16,
gallery: [
'https://assets.vogue.com/photos/55c6517d08298d8be222920d/master/w_2560,c_limit/01m.jpg',
'https://assets.vogue.com/photos/55c6517d08298d8be222920e/master/w_2560,c_limit/02m.jpg',
'https://assets.vogue.com/photos/55c6517d08298d8be222920f/master/w_2560,c_limit/03m.jpg',
'https://assets.vogue.com/photos/55c6517d08298d8be2229210/master/w_2560,c_limit/04m.jpg',
'https://assets.vogue.com/photos/55c6517d08298d8be2229211/master/w_2560,c_limit/05m.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52617,
brand: '3.1 Phillip Lim',
title: 'Spring 2009 Ready-to-Wear',
season: 'AW09',
year: 2009,
img: 'https://assets.vogue.com/photos/55c6519708298d8be224625e/master/w_2560,c_limit/00010fullscreen.jpg',
count: 105,
gallery: [
'https://assets.vogue.com/photos/55c6519708298d8be224625e/master/w_2560,c_limit/00010fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519708298d8be224625f/master/w_2560,c_limit/00020fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519708298d8be2246260/master/w_2560,c_limit/00030fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519708298d8be2246261/master/w_2560,c_limit/00040fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519708298d8be2246262/master/w_2560,c_limit/00050fullscreen.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52616,
brand: '3.1 Phillip Lim',
title: 'Fall 2009 Ready-to-Wear',
season: 'AW09',
year: 2009,
img: 'https://assets.vogue.com/photos/55c6519f08298d8be2250311/master/w_2560,c_limit/00010fullscreen.jpg',
count: 145,
gallery: [
'https://assets.vogue.com/photos/55c6519f08298d8be2250311/master/w_2560,c_limit/00010fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519f08298d8be2250312/master/w_2560,c_limit/00020fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519f08298d8be2250313/master/w_2560,c_limit/00030fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519f08298d8be2250314/master/w_2560,c_limit/00040fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519f08298d8be2250315/master/w_2560,c_limit/00050fullscreen.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52615,
brand: '3.1 Phillip Lim',
title: 'Resort 2010',
season: 'AW10',
year: 2010,
img: 'https://assets.vogue.com/photos/55c651a508298d8be2257404/master/w_2560,c_limit/01fullscreen.jpg',
count: 27,
gallery: [
'https://assets.vogue.com/photos/55c651a508298d8be2257404/master/w_2560,c_limit/01fullscreen.jpg',
'https://assets.vogue.com/photos/55c651a508298d8be2257405/master/w_2560,c_limit/02fullscreen.jpg',
'https://assets.vogue.com/photos/55c651a508298d8be2257406/master/w_2560,c_limit/03fullscreen.jpg',
'https://assets.vogue.com/photos/55c651a508298d8be2257407/master/w_2560,c_limit/04fullscreen.jpg',
'https://assets.vogue.com/photos/55c651a508298d8be2257408/master/w_2560,c_limit/05fullscreen.jpg'
],
collection_type: '',
season_code: ''
}
]
18:25:17 [200] / 24ms
[
{
id: 52634,
brand: '5000',
title: 'Spring 2026 Ready-to-Wear',
season: 'AW26',
year: 2026,
img: 'https://assets.vogue.com/photos/68c84730627c7d40ac52aa17/master/w_2560,c_limit/00001-5000-spring-2026-ready-to-wear-credit-brand.jpg',
count: 30,
gallery: [
'https://assets.vogue.com/photos/68c84730627c7d40ac52aa17/master/w_2560,c_limit/00001-5000-spring-2026-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/68c8473052c290f6844f15a4/master/w_2560,c_limit/00002-5000-spring-2026-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/68c84730c00a8da1b9585e04/master/w_2560,c_limit/00003-5000-spring-2026-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/68c847330865a9bf107a6248/master/w_2560,c_limit/00004-5000-spring-2026-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/68c84733cc5a262b887823c6/master/w_2560,c_limit/00005-5000-spring-2026-ready-to-wear-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52633,
brand: '5000',
title: 'Fall 2025 Ready-to-Wear',
season: 'AW25',
year: 2025,
img: 'https://assets.vogue.com/photos/67a7ec6c540e35479b3d337c/master/w_2560,c_limit/00001-5000-fall-2025-ready-to-wear-credit-gorunway.jpg',
count: 27,
gallery: [
'https://assets.vogue.com/photos/67a7ec6c540e35479b3d337c/master/w_2560,c_limit/00001-5000-fall-2025-ready-to-wear-credit-gorunway.jpg',
'https://assets.vogue.com/photos/67a7ec6cee822deb1e8416c6/master/w_2560,c_limit/00002-5000-fall-2025-ready-to-wear-credit-gorunway.jpg',
'https://assets.vogue.com/photos/67a7ec6d551d29a948ad941e/master/w_2560,c_limit/00003-5000-fall-2025-ready-to-wear-credit-gorunway.jpg',
'https://assets.vogue.com/photos/67a7ec72ee822deb1e8416c8/master/w_2560,c_limit/00004-5000-fall-2025-ready-to-wear-credit-gorunway.jpg',
'https://assets.vogue.com/photos/67a7ec726ccfc8cbda1f1936/master/w_2560,c_limit/00005-5000-fall-2025-ready-to-wear-credit-gorunway.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52632,
brand: '5000',
title: 'Spring 2025 Ready-to-Wear',
season: 'AW25',
year: 2025,
img: 'https://assets.vogue.com/photos/66e1c75bd788bc9ca9d9acba/master/w_2560,c_limit/00001-5000-spring-2025-ready-to-wear-credit-brand.jpg',
count: 22,
gallery: [
'https://assets.vogue.com/photos/66e1c75bd788bc9ca9d9acba/master/w_2560,c_limit/00001-5000-spring-2025-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/66e1c772bc1a3e72a02f841a/master/w_2560,c_limit/00002-5000-spring-2025-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/66e1c772bc1a3e72a02f8419/master/w_2560,c_limit/00003-5000-spring-2025-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/66e1c775c22905cb0212f62b/master/w_2560,c_limit/00004-5000-spring-2025-ready-to-wear-credit-brand.jpg',
'https://assets.vogue.com/photos/66e1c79d0e2401b690216a7b/master/w_2560,c_limit/00005-5000-spring-2025-ready-to-wear-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52631,
brand: '4SDesigns',
title: 'Fall 2021 Menswear',
season: 'AW21',
year: 2021,
img: 'https://assets.vogue.com/photos/6027d24c0a9cf1d42cece5cd/master/w_2560,c_limit/00001-4SDESIGNS-MENSWEAR-FALL-21.jpg',
count: 34,
gallery: [
'https://assets.vogue.com/photos/6027d24c0a9cf1d42cece5cd/master/w_2560,c_limit/00001-4SDESIGNS-MENSWEAR-FALL-21.jpg',
'https://assets.vogue.com/photos/6027d244327fc00a43425432/master/w_2560,c_limit/00002-4SDESIGNS-MENSWEAR-FALL-21.jpg',
'https://assets.vogue.com/photos/6027d243fbb177114cbf582a/master/w_2560,c_limit/00003-4SDESIGNS-MENSWEAR-FALL-21.jpg',
'https://assets.vogue.com/photos/6027d247257ad32ccce37ce6/master/w_2560,c_limit/00004-4SDESIGNS-MENSWEAR-FALL-21.jpg',
'https://assets.vogue.com/photos/6027d2476da2d9ae5efbd828/master/w_2560,c_limit/00005-4SDESIGNS-MENSWEAR-FALL-21.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52630,
brand: '4SDesigns',
title: 'Spring 2021 Menswear',
season: 'AW21',
year: 2021,
img: 'https://assets.vogue.com/photos/5f5bc247c287ced7cb397bed/master/w_2560,c_limit/00001-4SDESIGN-MENS-Spring-2021.jpg',
count: 37,
gallery: [
'https://assets.vogue.com/photos/5f5bc247c287ced7cb397bed/master/w_2560,c_limit/00001-4SDESIGN-MENS-Spring-2021.jpg',
'https://assets.vogue.com/photos/5f5bc1d35b20143972317da5/master/w_2560,c_limit/00002-4SDESIGN-MENS-Spring-2021.jpg',
'https://assets.vogue.com/photos/5f5bc1df3c1d7b6a190becdd/master/w_2560,c_limit/00003-4SDESIGN-MENS-Spring-2021.jpg',
'https://assets.vogue.com/photos/5f5bc2425b20143972317da9/master/w_2560,c_limit/00004-4SDESIGN-MENS-Spring-2021.jpg',
'https://assets.vogue.com/photos/5f5bc213ad0b360706e648f7/master/w_2560,c_limit/00005-4SDESIGN-MENS-Spring-2021.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52629,
brand: '4SDesigns',
title: 'Spring 2022 Menswear',
season: 'AW22',
year: 2022,
img: 'https://assets.vogue.com/photos/60d1cbf645d4cb14fb3dc280/master/w_2560,c_limit/00001-4SDesigns-Mens-SS22-credit-brand.jpg',
count: 37,
gallery: [
'https://assets.vogue.com/photos/60d1cbf645d4cb14fb3dc280/master/w_2560,c_limit/00001-4SDesigns-Mens-SS22-credit-brand.jpg',
'https://assets.vogue.com/photos/60d1cbfb827cc425d00d5309/master/w_2560,c_limit/00002-4SDesigns-Mens-SS22-credit-brand.jpg',
'https://assets.vogue.com/photos/60d1cbfc43dc9f0bcf2cdf82/master/w_2560,c_limit/00003-4SDesigns-Mens-SS22-credit-brand.jpg',
'https://assets.vogue.com/photos/60d1cbfa31f3da1aa8f2b184/master/w_2560,c_limit/00004-4SDesigns-Mens-SS22-credit-brand.jpg',
'https://assets.vogue.com/photos/60d1cbff31f3da1aa8f2b186/master/w_2560,c_limit/00005-4SDesigns-Mens-SS22-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52628,
brand: '3.1 Phillip Lim',
title: 'Spring 2007 Ready-to-Wear',
season: 'AW07',
year: 2007,
img: 'https://assets.vogue.com/photos/55c6517108298d8be221a938/master/w_2560,c_limit/00010m.jpg',
count: 64,
gallery: [
'https://assets.vogue.com/photos/55c6517108298d8be221a938/master/w_2560,c_limit/00010m.jpg',
'https://assets.vogue.com/photos/55c6517108298d8be221a939/master/w_2560,c_limit/00020m.jpg',
'https://assets.vogue.com/photos/55c6517108298d8be221a93a/master/w_2560,c_limit/00030m.jpg',
'https://assets.vogue.com/photos/55c6517108298d8be221a93b/master/w_2560,c_limit/00040m.jpg',
'https://assets.vogue.com/photos/55c6517108298d8be221a93c/master/w_2560,c_limit/00050m.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52627,
brand: '4SDesigns',
title: 'Spring 2023 Menswear',
season: 'AW23',
year: 2023,
img: 'https://assets.vogue.com/photos/62a8a07f3f1b1935680d3bd7/master/w_2560,c_limit/00001-4SDesigns-mens-spring-2023-credit-brand.jpg',
count: 38,
gallery: [
'https://assets.vogue.com/photos/62a8a07f3f1b1935680d3bd7/master/w_2560,c_limit/00001-4SDesigns-mens-spring-2023-credit-brand.jpg',
'https://assets.vogue.com/photos/62a8a07e7fdb5f476a38ea63/master/w_2560,c_limit/00002-4SDesigns-mens-spring-2023-credit-brand.jpg',
'https://assets.vogue.com/photos/62a8a08298c7d4eb9d6771d8/master/w_2560,c_limit/00003-4SDesigns-mens-spring-2023-credit-brand.jpg',
'https://assets.vogue.com/photos/62a8a08abbd4a39a9da9c2dc/master/w_2560,c_limit/00004-4SDesigns-mens-spring-2023-credit-brand.jpg',
'https://assets.vogue.com/photos/62a8a093dd731c1b9956b7ce/master/w_2560,c_limit/00005-4SDesigns-mens-spring-2023-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52626,
brand: '4SDesigns',
title: 'Spring 2024 Menswear',
season: 'AW24',
year: 2024,
img: 'https://assets.vogue.com/photos/64972b08c2a3004981ecefa1/master/w_2560,c_limit/00001-4sdesigns-spring-2024-menswear-credit-brand.jpg',
count: 32,
gallery: [
'https://assets.vogue.com/photos/64972b08c2a3004981ecefa1/master/w_2560,c_limit/00001-4sdesigns-spring-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/64972b06cebc6648cb42b423/master/w_2560,c_limit/00002-4sdesigns-spring-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/64972b07117ea73b4611cc16/master/w_2560,c_limit/00003-4sdesigns-spring-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/64972b10f496fd5039bb28f5/master/w_2560,c_limit/00004-4sdesigns-spring-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/64972b166d2b1f02bbf79dfa/master/w_2560,c_limit/00005-4sdesigns-spring-2024-menswear-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52625,
brand: '4SDesigns',
title: 'Fall 2023 Menswear',
season: 'AW23',
year: 2023,
img: 'https://assets.vogue.com/photos/63c531d0d6dc24d26b516f7e/master/w_2560,c_limit/00001-4sdesigns-fall-2023-menswear-credit-brand.jpg',
count: 30,
gallery: [
'https://assets.vogue.com/photos/63c531d0d6dc24d26b516f7e/master/w_2560,c_limit/00001-4sdesigns-fall-2023-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/63c531d23cfdf376930a346a/master/w_2560,c_limit/00002-4sdesigns-fall-2023-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/63c531cf1944dc168acdfb98/master/w_2560,c_limit/00003-4sdesigns-fall-2023-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/63c531d43b8c841452deb23d/master/w_2560,c_limit/00004-4sdesigns-fall-2023-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/63c531d4a426ef92a40afb03/master/w_2560,c_limit/00005-4sdesigns-fall-2023-menswear-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52624,
brand: '3.1 Phillip Lim',
title: 'Fall 2007 Ready-to-Wear',
season: 'AW07',
year: 2007,
img: 'https://assets.vogue.com/photos/55c6517708298d8be222187c/master/w_2560,c_limit/00010m.jpg',
count: 70,
gallery: [
'https://assets.vogue.com/photos/55c6517708298d8be222187c/master/w_2560,c_limit/00010m.jpg',
'https://assets.vogue.com/photos/55c6517708298d8be222187d/master/w_2560,c_limit/00020m.jpg',
'https://assets.vogue.com/photos/55c6517708298d8be222187e/master/w_2560,c_limit/00030m.jpg',
'https://assets.vogue.com/photos/55c6517708298d8be222187f/master/w_2560,c_limit/00040m.jpg',
'https://assets.vogue.com/photos/55c6517708298d8be2221880/master/w_2560,c_limit/00050m.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52623,
brand: '4SDesigns',
title: 'Fall 2022 Menswear',
season: 'AW22',
year: 2022,
img: 'https://assets.vogue.com/photos/61e32026e135cfda761c9c1c/master/w_2560,c_limit/00001-4SDesigns-Mens-Fall-22-credit-brand.jpg',
count: 39,
gallery: [
'https://assets.vogue.com/photos/61e32026e135cfda761c9c1c/master/w_2560,c_limit/00001-4SDesigns-Mens-Fall-22-credit-brand.jpg',
'https://assets.vogue.com/photos/61e32029b1c1870aceac9214/master/w_2560,c_limit/00002-4SDesigns-Mens-Fall-22-credit-brand.jpg',
'https://assets.vogue.com/photos/61e3202cb1c1870aceac9216/master/w_2560,c_limit/00003-4SDesigns-Mens-Fall-22-credit-brand.jpg',
'https://assets.vogue.com/photos/61e3202e1be17143b2387ab5/master/w_2560,c_limit/00004-4SDesigns-Mens-Fall-22-credit-brand.jpg',
'https://assets.vogue.com/photos/61e32032a668411b428595ee/master/w_2560,c_limit/00005-4SDesigns-Mens-Fall-22-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52622,
brand: '3.1 Phillip Lim',
title: 'Fall 2006 Ready-to-Wear',
season: 'AW06',
year: 2006,
img: 'https://assets.vogue.com/photos/55c6516608298d8be220ec9d/master/w_2560,c_limit/01m.jpg',
count: 20,
gallery: [
'https://assets.vogue.com/photos/55c6516608298d8be220ec9d/master/w_2560,c_limit/01m.jpg',
'https://assets.vogue.com/photos/55c6516608298d8be220ec9e/master/w_2560,c_limit/02m.jpg',
'https://assets.vogue.com/photos/55c6516608298d8be220ec9f/master/w_2560,c_limit/03m.jpg',
'https://assets.vogue.com/photos/55c6516608298d8be220eca0/master/w_2560,c_limit/05m.jpg',
'https://assets.vogue.com/photos/55c6516608298d8be220eca1/master/w_2560,c_limit/06m.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52621,
brand: '3.1 Phillip Lim',
title: 'Fall 2008 Ready-to-Wear',
season: 'AW08',
year: 2008,
img: 'https://assets.vogue.com/photos/55c6518908298d8be2236856/master/w_2560,c_limit/00010m.jpg',
count: 106,
gallery: [
'https://assets.vogue.com/photos/55c6518908298d8be2236856/master/w_2560,c_limit/00010m.jpg',
'https://assets.vogue.com/photos/55c6518908298d8be2236857/master/w_2560,c_limit/00020m.jpg',
'https://assets.vogue.com/photos/55c6518908298d8be2236858/master/w_2560,c_limit/00030m.jpg',
'https://assets.vogue.com/photos/55c6518908298d8be2236859/master/w_2560,c_limit/00040m.jpg',
'https://assets.vogue.com/photos/55c6518908298d8be223685a/master/w_2560,c_limit/00050m.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52620,
brand: '4SDesigns',
title: 'Fall 2024 Menswear',
season: 'AW24',
year: 2024,
img: 'https://assets.vogue.com/photos/65a8fbbbe58c6b2c313c49c2/master/w_2560,c_limit/00001-4sdesigns-fall-2024-menswear-credit-brand.jpg',
count: 25,
gallery: [
'https://assets.vogue.com/photos/65a8fbbbe58c6b2c313c49c2/master/w_2560,c_limit/00001-4sdesigns-fall-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/65a8fbbcd46c3066d0e3a561/master/w_2560,c_limit/00002-4sdesigns-fall-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/65a8fbbdcb58e8ab7ad97d8c/master/w_2560,c_limit/00003-4sdesigns-fall-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/65a8fbbfdf79593d6bd9add0/master/w_2560,c_limit/00004-4sdesigns-fall-2024-menswear-credit-brand.jpg',
'https://assets.vogue.com/photos/65a8fbc0d46c3066d0e3a563/master/w_2560,c_limit/00005-4sdesigns-fall-2024-menswear-credit-brand.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52619,
brand: '3.1 Phillip Lim',
title: 'Spring 2008 Ready-to-Wear',
season: 'AW08',
year: 2008,
img: 'https://assets.vogue.com/photos/55c6518008298d8be222c795/master/w_2560,c_limit/00010m.jpg',
count: 109,
gallery: [
'https://assets.vogue.com/photos/55c6518008298d8be222c795/master/w_2560,c_limit/00010m.jpg',
'https://assets.vogue.com/photos/55c6518008298d8be222c796/master/w_2560,c_limit/00020m.jpg',
'https://assets.vogue.com/photos/55c6518008298d8be222c797/master/w_2560,c_limit/00030m.jpg',
'https://assets.vogue.com/photos/55c6518008298d8be222c798/master/w_2560,c_limit/00040m.jpg',
'https://assets.vogue.com/photos/55c6518008298d8be222c799/master/w_2560,c_limit/00050m.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52618,
brand: '3.1 Phillip Lim',
title: 'Resort 2008',
season: 'AW08',
year: 2008,
img: 'https://assets.vogue.com/photos/55c6517d08298d8be222920d/master/w_2560,c_limit/01m.jpg',
count: 16,
gallery: [
'https://assets.vogue.com/photos/55c6517d08298d8be222920d/master/w_2560,c_limit/01m.jpg',
'https://assets.vogue.com/photos/55c6517d08298d8be222920e/master/w_2560,c_limit/02m.jpg',
'https://assets.vogue.com/photos/55c6517d08298d8be222920f/master/w_2560,c_limit/03m.jpg',
'https://assets.vogue.com/photos/55c6517d08298d8be2229210/master/w_2560,c_limit/04m.jpg',
'https://assets.vogue.com/photos/55c6517d08298d8be2229211/master/w_2560,c_limit/05m.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52617,
brand: '3.1 Phillip Lim',
title: 'Spring 2009 Ready-to-Wear',
season: 'AW09',
year: 2009,
img: 'https://assets.vogue.com/photos/55c6519708298d8be224625e/master/w_2560,c_limit/00010fullscreen.jpg',
count: 105,
gallery: [
'https://assets.vogue.com/photos/55c6519708298d8be224625e/master/w_2560,c_limit/00010fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519708298d8be224625f/master/w_2560,c_limit/00020fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519708298d8be2246260/master/w_2560,c_limit/00030fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519708298d8be2246261/master/w_2560,c_limit/00040fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519708298d8be2246262/master/w_2560,c_limit/00050fullscreen.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52616,
brand: '3.1 Phillip Lim',
title: 'Fall 2009 Ready-to-Wear',
season: 'AW09',
year: 2009,
img: 'https://assets.vogue.com/photos/55c6519f08298d8be2250311/master/w_2560,c_limit/00010fullscreen.jpg',
count: 145,
gallery: [
'https://assets.vogue.com/photos/55c6519f08298d8be2250311/master/w_2560,c_limit/00010fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519f08298d8be2250312/master/w_2560,c_limit/00020fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519f08298d8be2250313/master/w_2560,c_limit/00030fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519f08298d8be2250314/master/w_2560,c_limit/00040fullscreen.jpg',
'https://assets.vogue.com/photos/55c6519f08298d8be2250315/master/w_2560,c_limit/00050fullscreen.jpg'
],
collection_type: '',
season_code: ''
},
{
id: 52615,
brand: '3.1 Phillip Lim',
title: 'Resort 2010',
season: 'AW10',
year: 2010,
img: 'https://assets.vogue.com/photos/55c651a508298d8be2257404/master/w_2560,c_limit/01fullscreen.jpg',
count: 27,
gallery: [
'https://assets.vogue.com/photos/55c651a508298d8be2257404/master/w_2560,c_limit/01fullscreen.jpg',
'https://assets.vogue.com/photos/55c651a508298d8be2257405/master/w_2560,c_limit/02fullscreen.jpg',
'https://assets.vogue.com/photos/55c651a508298d8be2257406/master/w_2560,c_limit/03fullscreen.jpg',
'https://assets.vogue.com/photos/55c651a508298d8be2257407/master/w_2560,c_limit/04fullscreen.jpg',
'https://assets.vogue.com/photos/55c651a508298d8be2257408/master/w_2560,c_limit/05fullscreen.jpg'
],
collection_type: '',
season_code: ''
}
]
18:25:17 [200] / 2ms

View File

@ -1 +0,0 @@
y-2.5 px-4 flex items-center justify-between transition-colors cursor-pointer" data-astro-cid-ju4pidww><div class="flex items-center gap-2" data-astro-cid-ju4pidww><!-- <Sparkles class="w-3.5 h-3.5 text-amber-300" /> --><span data-astro-cid-ju4pidww>AI Color Trend Generator</span></div><span class="text-[10px] text-zinc-400 font-normal" data-astro-cid-ju4pidww>Gemini 2026</span></button><button id="btn-extractor" class="w-full bg-zinc-100 hover:bg-zinc-200 border border-zinc-300 text-black text-xs font-mono font-bold uppercase tracking-wider py-2.5 px-4 flex items-center justify-between transition-colors cursor-pointer" data-astro-cid-ju4pidww><div class="flex items-center gap-2" data-astro-cid-ju4pidww><!-- <Layers class="w-3.5 h-3.5 text-zinc-600" /> --><span data-astro-cid-ju4pidww>Photo Swatch Extractor</span></div><span class="text-[10px] text-zinc-500 font-normal" data-astro-cid-ju4pidww>Upload</span></button></div></div></div><div class="flex flex-col sm:flex-row justify-between items-center text-[12px] font-mono text-zinc-500 gap-4" data-astro-cid-ju4pidww><div data-astro-cid-ju4pidww><span data-astro-cid-ju4pidww>© 2026 PORTFOLIO STUDIO. ALL RIGHTS RESERVED.</span></div><div class="flex items-center gap-6" data-astro-cid-ju4pidww><button data-nav="About" class="nav-btn hover:text-black cursor-pointer uppercase font-bold" data-astro-cid-ju4pidww>About</button><button data-nav="Contact Us" class="nav-btn hover:text-black cursor-pointer uppercase font-bold" data-astro-cid-ju4pidww>Contact</button><button id="back-to-top" class="flex items-center gap-1 font-bold text-black hover:opacity-60 transition-opacity cursor-pointer uppercase" data-astro-cid-ju4pidww><span data-astro-cid-ju4pidww>Back to top</span><!-- <ArrowUp class="w-3.5 h-3.5" /> --></button></div></div>

View File

@ -11,8 +11,9 @@ server {
}
# 网关隔离:SSG 内部接口只存在于 backend 的 8091 端口(回环绑定,nginx 不反代)。
# 若有人从公网域名探测 /api/ssg/*,此处直接 404,确保构建期全量数据绝不从公网出口。
location /api/v1/ssg/ {
# 若有人从公网域名探测 /api/internal/ssg/*(或旧 /api/v1/ssg/*),此处直接 404,
# 确保构建期全量数据绝不从公网出口。
location ~ ^/api/(internal/ssg/|v1/ssg/) {
return 404;
}

1592
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,7 +1,8 @@
{
"name": "test",
"name": "frontend-v2",
"type": "module",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=22.12.0"
},
@ -9,6 +10,7 @@
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview",
"check": "astro check",
"astro": "astro"
},
"dependencies": {
@ -17,8 +19,13 @@
"@tailwindcss/vite": "^4.3.3",
"@types/alpinejs": "^3.13.11",
"alpinejs": "^3.16.1",
"astro": "^7.2.4",
"astro": "^7.3.3",
"swiper": "^11.2.10",
"tailwindcss": "^4.3.3"
},
"devDependencies": {
"@astrojs/check": "^0.9.10",
"@types/node": "^26.5.1",
"typescript": "^6.0.3"
}
}

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>

Before

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,172 @@
---
import { getI18n } from "@/lib/i18n"
// 全站统一登录门禁,两种语义属性(按使用场景二选一,不要混用):
// - login-required:需要登录的「动作」(收藏/翻页/看完整图…)。点击时若未登录 →
// 就地弹出本登录层并记住该元素;登录成功后自动重放这次点击(继续原操作)。
// - login-redirect:需要登录的「完整入口」(想直接去账户/详情受限区…)。未登录 →
// 跳独立登录页(自动带 redirect 回跳当前页),登录完成后回原处。
// 已登录时两者都直接放行。本组件挂在 Layout 一次,全站共用同一 store。
const { t } = getI18n(Astro)
const title = t('login')
const prompt = t('login to continue')
const accountLabel = t('username or email')
const passwordLabel = t('password')
const failLabel = t('login failed')
const closeLabel = t('close')
const fullLoginLabel = t('go to full login')
---
<!-- 全局登录层:fixed 覆盖层,所有页面生效 -->
<div
x-data="$store.auth"
x-show="isOpen"
x-cloak
data-auth-fail={failLabel}
class="fixed inset-0 z-[200] flex items-center justify-center bg-black/40 px-5"
role="dialog"
aria-modal="true"
aria-label={title}
@click.self="close()"
@keydown.escape.window="close()"
>
<div class="w-full max-w-sm border-2 border-black bg-white p-8">
<div class="mb-6 flex items-start justify-between border-b-2 border-black pb-4">
<h3 class="text-2xl font-black uppercase leading-none tracking-tight">{title}</h3>
<button type="button" @click="close()" class="-mt-1 text-[11px] uppercase tracking-widest opacity-60 transition-opacity hover:opacity-100">{closeLabel}</button>
</div>
<p class="mb-7 text-[11px] uppercase tracking-widest text-[var(--c-gray-600)]">{prompt}</p>
<form @submit.prevent="submit()" class="space-y-6" novalidate>
<div>
<label class="mb-2 block text-[11px] uppercase tracking-widest text-[var(--c-gray-700)]">{accountLabel}</label>
<input type="text" x-model="account" autocomplete="username" required
class="w-full border-0 border-b border-black/30 bg-transparent px-0 py-2 text-sm outline-none transition-colors focus:border-black focus:ring-0" />
</div>
<div>
<label class="mb-2 block text-[11px] uppercase tracking-widest text-[var(--c-gray-700)]">{passwordLabel}</label>
<input type="password" x-model="password" autocomplete="current-password" required
class="w-full border-0 border-b border-black/30 bg-transparent px-0 py-2 text-sm outline-none transition-colors focus:border-black focus:ring-0" />
</div>
<p x-show="error" x-text="error" x-cloak class="text-xs uppercase tracking-wide text-red-600"></p>
<button type="submit" :disabled="loading"
class="w-full border border-black bg-black py-3.5 text-[12px] font-bold uppercase tracking-[0.2em] text-white transition-colors hover:bg-white hover:text-black disabled:opacity-40">
<span x-show="!loading">{title}</span>
<span x-show="loading" x-cloak>…</span>
</button>
</form>
<div class="mt-6 border-t border-black/10 pt-4 text-center">
<button type="button" @click="goFullLogin()" class="text-[10px] uppercase tracking-[0.2em] text-[var(--c-gray-600)] transition-colors hover:text-black">{fullLoginLabel}</button>
</div>
</div>
</div>
<script>
import { getUser } from "@/lib/auth"
import { login } from "@/lib/api"
// 全局登录 store 的数据形状。
// 必须显式声明并注解:@types/alpinejs 的 Stores 是 `[key: string | symbol]: unknown`,
// 内联字面量会失去上下文类型,导致各方法内 this 退化成 {}(原先 16 处报错)。
interface AuthStore {
isOpen: boolean
pending: HTMLElement | null
account: string
password: string
error: string
loading: boolean
request(el: HTMLElement): boolean
close(): void
submit(): Promise<void>
goFullLogin(): void
}
document.addEventListener("alpine:init", () => {
// 全局登录 store:request(el) 返回是否放行;未登录记录 pending 并开层
const authStore: AuthStore = {
isOpen: false,
pending: null as HTMLElement | null,
account: "",
password: "",
error: "",
loading: false,
request(el: HTMLElement): boolean {
if (getUser()) return true // 已登录:放行,交还原生点击
this.pending = el
this.error = ""
this.isOpen = true
document.body.style.overflow = "hidden" // 锁背景滚动
return false
},
close() {
// 未打开时直接返回:本函数的 ESC 监听挂在 window 上,页面里任何一次 ESC 都会调到它。
// 若无条件清掉 body 滚动锁,会把别的浮层(图片灯箱等)的滚动锁一起抢掉。
if (!this.isOpen) return
this.isOpen = false
this.pending = null
this.error = ""
document.body.style.overflow = ""
},
async submit() {
this.error = ""
this.loading = true
try {
await login({ account: this.account, password: this.password })
const el = this.pending
this.pending = null
this.isOpen = false
this.account = ""
this.password = ""
document.body.style.overflow = ""
// 登录成功后自动重放刚才被拦截的那次点击,让用户操作无缝继续
if (el) requestAnimationFrame(() => { try { el.click() } catch { /* 忽略 */ } })
} catch {
const host = document.querySelector<HTMLElement>("[data-auth-fail]")
this.error = host?.dataset.authFail || "login failed"
} finally {
this.loading = false
}
},
// 弹窗内兜底:前往独立完整登录页(带回跳当前页)
goFullLogin() {
const p = window.location.pathname + window.location.search
const loc = p.startsWith("/cn") ? "cn" : "en"
this.close()
window.location.assign(`/${loc}/login?redirect=${encodeURIComponent(p)}`)
},
}
Alpine.store("auth", authStore)
// 全站统一登录门禁:两种语义属性(capture 阶段,先于元素自身 @click 处理)
// login-required → 就地弹窗(登录后自动重放原点击)
// login-redirect → 跳独立登录页(带回跳)
function fullLoginUrl(): string {
const p = window.location.pathname + window.location.search
const loc = p.startsWith("/cn") ? "cn" : "en"
return `/${loc}/login?redirect=${encodeURIComponent(p)}`
}
document.addEventListener("click", (e) => {
const hit = e.target as HTMLElement | null
if (!hit) return
const gate = hit.closest?.("[login-required], [login-redirect]") as HTMLElement | null
if (!gate) return
if (getUser()) return // 已登录:放行,交还原生点击
e.preventDefault()
e.stopPropagation()
if (gate.hasAttribute("login-redirect")) {
window.location.assign(fullLoginUrl())
return
}
;(Alpine.store("auth") as any).request(hit) // 记住实际点击目标,登录后重放
}, true)
})
</script>

View File

@ -0,0 +1,153 @@
---
// 品牌筛选弹窗(仅 markup + 样式)。
// Alpine 状态(modalOpen / modalKeyword / modalLetter / modalResults / modalLoading /
// modalSelected / SPIN_SVG 等)由父级 RunwayLooks 的 showsPage() 提供,本组件渲染在
// .showsroot 的 x-data 作用域内,故可直接引用这些变量,无需 props。
---
<!-- 品牌筛选弹窗:搜索 + A-Z 跳转 + 热门推荐,按需加载,避免一次拉全量 -->
<div class="showsmodal" x-show="modalOpen" x-cloak @keydown.escape.window="closeBrandModal()">
<div class="showsmodal-mask" @click="closeBrandModal()"></div>
<div class="showsmodal-panel">
<header class="showsmodal-head">
<h3>全部品牌</h3>
<button class="showsmodal-x" type="button" @click="closeBrandModal()" aria-label="关闭">✕</button>
</header>
<div class="showsmodal-search">
<input
class="showsmodal-input"
type="text"
x-model="modalKeyword"
@input.debounce.300ms="modalSearch()"
placeholder="搜索品牌名…"
autocomplete="off"
/>
<p class="showsmodal-tip">最多展示 30 条结果,可用搜索或字母筛选缩小范围</p>
</div>
<div class="showsmodal-az">
<button class="az az-hot" type="button" :class="{ active: modalLetter === 'HOT' }" @click="modalPickLetter('HOT')">HOT</button>
<template x-for="l in 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#'.split('')" :key="l">
<button class="az" type="button" :class="{ active: modalLetter === l }" @click="modalPickLetter(l)" x-text="l"></button>
</template>
</div>
<div class="showsmodal-body">
<div class="showsmodal-hint" x-show="!modalKeyword && modalLetter === 'HOT'">热门推荐</div>
<div class="showsmodal-loading" x-show="modalLoading" x-html="SPIN_SVG"></div>
<ul class="showsmodal-list">
<template x-for="b in modalResults" :key="b.id">
<li>
<label class="showsmodal-row">
<input
type="radio"
name="modalDesigner"
:value="b.id"
x-model="modalSelected"
:class="{ 'is-checked': modalSelected === b.id }"
/>
<span class="showsmodal-name" x-text="b.display || b.name"></span>
</label>
</li>
</template>
<li class="showsmodal-empty" x-show="!modalLoading && modalResults.length === 0">未找到匹配的品牌</li>
</ul>
</div>
<footer class="showsmodal-foot">
<button class="showsmodal-ok" type="button" @click="confirmBrandModal()">确定</button>
</footer>
</div>
</div>
<style>
@reference "tailwindcss";
[x-cloak] { display: none !important; }
/* ===== 品牌筛选弹窗(语言切换器风格:无 mask、顶部小箭头、干净白底列表) ===== */
.showsmodal {
@apply fixed inset-0 z-[60] flex items-start justify-center pt-[14vh] pointer-events-none;
}
.showsmodal-mask {
@apply absolute inset-0 pointer-events-auto cursor-default;
background: rgba(0, 0, 0, 0.4);
}
.showsmodal-panel {
@apply relative w-full max-w-[680px] max-h-[72vh] bg-white flex flex-col border border-black/10 pointer-events-auto;
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
}
/* 顶部小三角箭头(语言切换器同款:白底 + 浅边框) */
.showsmodal-panel::before {
content: "";
position: absolute;
top: -5px;
left: 50%;
width: 10px;
height: 10px;
background: white;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-left: 1px solid rgba(0, 0, 0, 0.1);
transform: translateX(-50%) rotate(45deg);
}
.showsmodal-head {
@apply flex items-center justify-between px-4 pt-4 pb-2 shrink-0;
}
.showsmodal-head h3 {
@apply m-0 text-[12px] tracking-[0.22em] uppercase font-bold;
}
.showsmodal-x {
@apply appearance-none bg-transparent border-0 w-6 h-6 inline-flex items-center justify-center cursor-pointer text-[14px] leading-none text-[var(--c-gray-600)] transition-colors hover:text-black;
}
.showsmodal-search {
@apply px-4 pt-1 pb-3 shrink-0;
}
.showsmodal-input {
@apply w-full border border-black/15 px-3 py-2 text-[13px] outline-none bg-[var(--c-gray-50)] focus:bg-white focus:border-black;
}
.showsmodal-tip {
@apply mt-2 text-[11px] leading-snug text-black/45;
}
.showsmodal-az {
@apply flex flex-wrap gap-1 px-4 pb-3 shrink-0;
}
.showsmodal-az .az {
@apply appearance-none bg-white border border-black/10 w-6 h-6 text-[10px] cursor-pointer leading-none transition-colors hover:bg-black/5;
}
.showsmodal-az .az.active {
@apply bg-black text-white border-black;
}
.showsmodal-az .az-hot {
@apply w-auto px-2 font-sans font-bold tracking-[0.12em] text-[9px];
}
.showsmodal-body {
@apply flex-1 min-h-0 overflow-y-auto px-2 py-1 overscroll-contain;
}
.showsmodal-hint {
@apply text-[10px] tracking-[0.22em] uppercase text-[var(--c-gray-600)] px-3 py-2;
}
.showsmodal-loading {
@apply flex justify-center py-6 text-[var(--c-gray-500)];
}
.showsmodal-list {
@apply list-none m-0 p-0;
}
.showsmodal-row {
@apply flex items-center gap-2 w-full cursor-pointer px-3 py-2 text-[13px] transition-colors hover:bg-black/5;
}
.showsmodal-row input[type="radio"] {
@apply appearance-none w-4 h-4 border-[1.5px] border-black bg-white cursor-pointer shrink-0 rounded-full;
}
.showsmodal-row input[type="radio"].is-checked {
@apply bg-white border-black;
background-image: radial-gradient(circle, #000 36%, transparent 40%);
}
.showsmodal-name {
@apply flex-1 truncate;
}
.showsmodal-empty {
@apply py-6 text-center text-[var(--c-gray-600)] text-[13px];
}
.showsmodal-foot {
@apply flex items-center justify-between px-4 py-3 border-t border-black/5 shrink-0 text-[11px] text-[var(--c-gray-700)];
}
.showsmodal-ok {
@apply appearance-none bg-black text-white border border-black px-4 py-1.5 cursor-pointer text-[12px] tracking-[0.1em] transition-colors hover:bg-black/85;
}
</style>

View File

@ -1,54 +0,0 @@
---
import { useTranslations, DEFAULT_LOCALE, type Locale, getI18n } from "@/i18n/utils";
interface Crumb {
/** i18n key:英文原文,如 'Home' / 'Runway Archive';中文环境自动取字典翻译 */
label: string;
href: string;
}
interface Props {
/** 中间层级的面包屑项(不含末项)。末项由 <slot name="current"> 提供(如动态年份) */
items?: Crumb[];
/** 可选:显式指定语言;缺省时跟随当前页面语言(Astro.currentLocale) */
locale?: string;
}
const {t, locale, getRelativeLocaleUrl} = getI18n(Astro);
const { items = [] } = Astro.props;
---
<nav class="crumb" aria-label="Breadcrumb">
<Fragment>
<a href={getRelativeLocaleUrl(locale, '/')} class="crumb-link">{t('Home')}</a>
<span class="crumb-sep" aria-hidden="true">/</span>
</Fragment>
{
items.map((it) => (
<Fragment>
<a href={it.href} class="crumb-link">{t(it.label)}</a>
<span class="crumb-sep" aria-hidden="true">/</span>
</Fragment>
))
}
<span class="crumb-cur" aria-current="page">
<slot name="current" />
</span>
</nav>
<style>
@reference "tailwindcss";
.crumb {
@apply inline-flex items-center gap-[10px] mb-[10px] text-[11px] tracking-[0.18em] uppercase text-[#999] no-underline;
}
.crumb-link {
@apply text-black no-underline transition-colors duration-150 hover:text-[#888];
}
.crumb-sep {
@apply text-[#cfcfcf] select-none;
}
.crumb-cur {
@apply text-[#999];
}
</style>

View File

@ -0,0 +1,44 @@
---
/**
* 列表卡片(走秀 / 街拍通用)。
*
* 标记沿用 look-grid.css 的 .showscard-* 系列——与 .snapscard-* 是成对定义、样式完全
* 相同的两套类名(见 look-grid.css 顶部注释),故统一用 showscard 不影响街拍视觉。
*
* 组件本身不接收「数据」prop:它被放在父级 <template x-for="it in items"> 内,由 Astro
* 在构建期内联为静态 HTML;卡片内的 Alpine 指令直接引用循环变量 it 与页面 Alpine.data
* 提供的方法(itemHref / cardTitle / cardMeta / getCardSlots / toAbsUrl / favState /
* toggleFav / SPIN_SVG)。两页只需各自在 extra 里实现 cardTitle / cardMeta / getCardSlots。
*
* 标题:cardTitle 始终渲染;cardMeta 为空字符串时整行隐藏(街拍用两行,走秀用一行)。
*/
---
<div class="showscard-wrap relative group">
<a class="showscard" :href="itemHref(it)" :aria-label="cardTitle(it)" target="_blank" rel="noopener">
<div class="showscard-left">
<div class="showscard-img" :class="{ 'is-loaded': it._imgLoaded }">
<span class="showsspin" aria-hidden="true" x-html="SPIN_SVG"></span>
<img :src="toAbsUrl(it.cover)" :alt="cardTitle(it)" loading="lazy" @load="it._imgLoaded = true" @error="it._imgLoaded = true" :class="{ 'is-loaded': it._imgLoaded }" />
</div>
</div>
<div class="showscard-right">
<div class="showscard-info">
<h3 class="showscard-title" x-text="cardTitle(it)"></h3>
<p class="showscard-meta" x-text="cardMeta(it)" x-show="cardMeta(it)"></p>
</div>
<div class="showscard-strip">
<template x-for="(slot, idx) in getCardSlots(it)" :key="idx">
<div class="showscard-thumb" :class="{ 'placeholder': !slot.src, 'is-loaded': slot.loaded }">
<span class="showsspin" aria-hidden="true" x-html="SPIN_SVG" x-show="slot.src"></span>
<img x-show="slot.src" :src="toAbsUrl(slot.src)" alt="" loading="lazy" @load="slot.loaded = true" @error="slot.loaded = true" :class="{ 'is-loaded': slot.loaded }" />
<span class="showscard-thumb-more" x-show="slot.isLast && slot.moreLabel" x-text="slot.moreLabel"></span>
</div>
</template>
</div>
</div>
</a>
<button login-required type="button" class="fav-toggle" :class="{ 'is-on': favState(it.id) }" @click.prevent="toggleFav(it)" :aria-pressed="favState(it.id)" :title="favState(it.id) ? 'Saved' : 'Save'">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21C12 21 4 14.5 4 8.8C4 6.1 6.1 4 8.7 4C10.3 4 11.5 4.8 12 6C12.5 4.8 13.7 4 15.3 4C17.9 4 20 6.1 20 8.8C20 14.5 12 21 12 21Z"/></svg>
</button>
</div>

View File

@ -0,0 +1,151 @@
---
/**
* 列表页共享外壳:走秀 / 街拍(以及未来同构模块)的「眉头 + 筛选 pills + 左侧栏 + 右卡片网格 + 分页」标记。
*
* 设计动机:RunwayLooks.astro 与 StreetSnaps.astro 的这段模板逐块同构,差异只有 CSS 类名
* 前缀(shows* / snaps*)与几个开关量。本组件收口「不变的标记」,把「变的差异」通过
* props / 具名插槽注入:
* - prefix 类名前缀,look-grid.css 里两套前缀成对定义、样式同源
* - alpineName Alpine 组件注册名(须与页面 <script> 内 Alpine.data(name, ...) 一致)
* - title 眉头 H1 文案(页面已 t() 处理)
* - groups 侧栏通用筛选分组,透传给 RefineSidebar
* - skeletonLines 骨架屏信息区行数(走秀 3 行、街拍 2 行,与真实卡片位数对齐)
* - emptyText 空态文案(页面传入,已是最终语言)
* - slot sidebar-extra 页面专属筛选分组(走秀的 Designer/品牌)
* - slot modals 页面专属弹窗(走秀的 BrandModal),须在 x-data 作用域内
*
* 注意:本组件不自带状态,内部 Alpine 指令(pills / loading / items / pageList /
* collapsedGroups / loadPage / prevPage 等)一律引用父级 x-data 的作用域;
* Alpine.data 的注册仍留在各页面 <script> 内。卡片数据来自各页 extra 提供的
* cardTitle / cardMeta / getCardSlots。
*/
import CollectionCard from "@/components/CollectionCard.astro"
import RefineSidebar from "@/components/RefineSidebar.astro"
import { getI18n } from "@/lib/i18n"
import "@/styles/look-grid.css"
interface Option {
value: string | number
label: string
}
interface Group {
key: string
title: string
options: Option[]
selected: string
}
interface Props {
/** CSS 类名前缀:走秀 'shows'、街拍 'snaps'(look-grid.css 两套前缀成对定义) */
prefix: "shows" | "snaps"
/** Alpine 组件名,须与页面 <script> 中 Alpine.data(name, ...) 的注册名一致 */
alpineName: string
/** 眉头 H1 文案(页面已 t() 处理) */
title: string
/** 侧栏通用筛选分组,透传给 RefineSidebar */
groups: Group[]
/** 骨架屏信息区行数:走秀 3 行、街拍 2 行(与真实卡片标题/副标题位数对齐) */
skeletonLines?: 2 | 3
/** 空态文案(页面传入,已是最终语言) */
emptyText: string
}
const { prefix, alpineName, title, groups, skeletonLines = 2, emptyText } = Astro.props
const { locale } = getI18n(Astro)
// 骨架屏信息区各行的固定高度(与真实卡片的标题 / 副标题 / 补充行对齐),按 skeletonLines 截取。
// 字面量写在此处以保证 Tailwind JIT 能扫描到这些 arbitrary 值。
const SKELETON_LINE_CLASSES = [
"h-[41px] mb-[10px] rounded-[2px]",
"h-[29px] mb-[14px] rounded-[2px]",
"h-[38px] rounded-[2px]",
]
const skeletonLineClasses = SKELETON_LINE_CLASSES.slice(0, skeletonLines)
---
<div class={`${prefix}root w-full`} x-data={`${alpineName}()`} data-locale={locale} data-filter-groups={JSON.stringify(groups)}>
<!-- 顶部:极简眉头 -->
<header class={`${prefix}head`}>
<div>
<h1 class={`${prefix}h1`}>{title}</h1>
</div>
</header>
<!-- 已激活筛选 pills:pills 是方法(见 lib/collection-page.ts 里关于展开求值 getter 的说明),故写作 pills() -->
<div class={`${prefix}pills`} x-show="pills().length > 0" x-cloak>
<template x-for="(p, i) in pills()" :key="i">
<span class={`${prefix}pill`}>
<span x-text="p.label"></span>
<button class="x" type="button" @click="p.clear()">×</button>
</span>
</template>
</div>
<!-- 主体:左 sidebar + 右卡片网格 -->
<div class={`${prefix}body`}>
<!-- LEFT SIDEBAR -->
<aside class={`${prefix}aside`}>
<div class={`${prefix}aside-head`}>
<!-- REFINE 标题当前停用 -->
</div>
<div class={`${prefix}aside-body`}>
<!-- 页面专属分组(走秀的 Designer/品牌)插在这里,通用分组由 RefineSidebar 渲染 -->
<slot name="sidebar-extra" />
<RefineSidebar groups={groups} />
</div>
</aside>
<!-- MAIN GRID -->
<main class={`${prefix}main`}>
<div class={`${prefix}grid`} :class="{ 'is-loading': loading }">
<!-- 骨架屏:结构与真实卡片完全一致,loading 期间占位,杜绝 加载中→数据完成 的尺寸抖动 -->
<template x-if="loading && items.length === 0">
<template x-for="i in skeletonCount" :key="'skel-' + i">
<div class={`${prefix}card ${prefix}card--skel`} aria-hidden="true">
<div class={`${prefix}card-left`}>
<div class={`${prefix}card-img`}></div>
</div>
<div class={`${prefix}card-right`}>
<div class={`${prefix}card-info`}>
{skeletonLineClasses.map((line) => (
<div class={`${prefix}line ${line}`}></div>
))}
</div>
<div class={`${prefix}card-strip`}>
{Array.from({ length: 5 }).map(() => (
<div class={`${prefix}card-thumb`}></div>
))}
</div>
</div>
</div>
</template>
</template>
<!-- Empty State -->
<template x-if="!loading && items.length === 0">
<div class={`${prefix}empty`}>{emptyText}</div>
</template>
<!-- Card List -->
<template x-for="it in items" :key="it.id">
<CollectionCard />
</template>
</div>
<nav class={`${prefix}pager`} x-show="lastPage > 1" aria-label="Pagination">
<button login-required class="pg pg-prev" type="button" :disabled="page <= 1 || loading" @click="prevPage()">‹ Prev</button>
<template x-for="(p, i) in pageList()" :key="i">
<span class="pg-wrap">
<span class="pg-ellipsis" x-show="p === '...'" x-text="'…'"></span>
<button login-required class="pg" type="button" x-show="p !== '...'" :class="{ 'is-current': p === page }" :disabled="p === page" @click="goPage(p)" x-text="p"></button>
</span>
</template>
<button login-required class="pg pg-next" type="button" :disabled="page >= lastPage || loading" @click="nextPage()">Next ›</button>
</nav>
</main>
</div>
<!-- 页面专属弹窗(走秀 BrandModal)插在这里,确保在 x-data 作用域内 -->
<slot name="modals" />
</div>

View File

@ -1,5 +1,5 @@
---
import { getI18n } from '@/i18n/utils'
import { getI18n } from '@/lib/i18n'
import { href, ROUTES } from '@/lib/routes'
interface Props {
@ -22,7 +22,7 @@ const { locale } = getI18n(Astro)
{note || "该模块正在筹备中,尚未对外开放。站点正按模块逐个完善,你可以先浏览已上线的走秀档案。"}
</p>
<div class="cs-actions">
<a class="cs-btn" href={href(locale, ROUTES.articles)}>浏览走秀档案 →</a>
<a class="cs-btn" href={href(locale, ROUTES.runwayLooks)}>浏览走秀档案 →</a>
<a class="cs-btn-ghost" href={href(locale, ROUTES.home)}>返回首页</a>
</div>
</section>
@ -34,17 +34,17 @@ const { locale } = getI18n(Astro)
max-width: 760px;
margin: 0 auto;
padding: 48px 4px 60px;
@apply font-mono text-black;
@apply text-black;
}
.cs-kicker {
display: flex;
justify-content: space-between;
border-top: 1px solid #000;
padding-top: 18px;
@apply text-[11px] tracking-[0.25em] uppercase text-[#666];
@apply text-[11px] tracking-[0.25em] uppercase text-[var(--c-gray-800)];
}
.cs-title {
@apply font-serif font-black tracking-[-0.02em];
@apply font-black tracking-[-0.02em];
line-height: 0.9;
font-size: clamp(56px, 13vw, 128px);
margin: 0.16em 0 0.3em;
@ -54,7 +54,7 @@ const { locale } = getI18n(Astro)
margin: 0 0 18px;
}
.cs-desc {
@apply text-[13px] text-[#666];
@apply text-[13px] text-[var(--c-gray-800)];
line-height: 1.7;
max-width: 52ch;
margin: 0 0 28px;

View File

@ -0,0 +1,30 @@
---
// 网格主图左下角的「细节图 / 副图 张数」角标:有则显示(图层图标 + 数字),点它直接开细节灯箱;
// 纯主图(无细节图)不渲染。数量走 Alpine 的 detailCount()(响应式)—— 未登录取前 PREVIEW_LIMIT 张
// 的细节子树,登录后由 gallery:full 重建映射,两态共用同一条渲染路径。
//
// mainId:Alpine 表达式,表示该主图自身 id。SSR 首屏传字面量(如 "i0008CZYI"),
// 客户端补拉的 x-for 里传表达式(如 "im.id")。
interface Props {
mainId: string
}
const { mainId } = Astro.props
const q = JSON.stringify(mainId) // 转成带引号的字符串字面量,否则 detailCount(i0008CZYI) 会被 Alpine 当成未定义变量
const count = `detailCount(${q})`
---
<button
type="button"
x-show={`${count} > 0`}
x-cloak
@click.stop={`openDetailLb(${q})`}
:title={`${count} + ' detail' + (${count} > 1 ? 's' : '')`}
:aria-label={`${count} + ' detail' + (${count} > 1 ? 's' : '')`}
class="absolute left-2 bottom-2 z-10 flex items-center gap-1 px-1.5 py-1 bg-white/85 backdrop-blur-sm border border-black/15 text-[#111] text-[10px] uppercase tracking-[0.14em] cursor-pointer hover:bg-black hover:text-white transition-colors"
>
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="3" y="3" width="13" height="13" rx="1.5" />
<path d="M8 21h11a2 2 0 0 0 2-2V8" />
</svg>
<span x-text={count}></span>
</button>

View File

@ -0,0 +1,377 @@
---
/**
* 详情页图集体(走秀 / 街拍共用)。
*
* 设计动机:RunwayLookCard 与 StreetSnapCard 的「标题 + 图集网格 + 未登录占位遮罩 + 大图/副图灯箱」
* 逐块同构,差异只有几处声明式开关:
* - aspect 主图与灯箱缩略图比例(当前两页都 2/3 —— 后端素材统一 2:3,见下方 prop 说明)
* - showCaptions 图注:街拍有(图片名),走秀无
* - countLabel 工具栏计数文案:LOOKS / PHOTOS
* - defaultDensity 默认每行张数(走秀与街拍均 5,都可在工具栏切到 3)
* - kind 决定已登录补全量用哪个取数函数(走秀/街拍各一个接口)
* - slot after-grid 图集之后的内容(走秀的系列描述;街拍没有)
*
* 故把「不变的标记」收口在本组件,把上面这些差异用 props / 插槽注入;
* 页面级差异(SSR 取数、TDK、meta.type、标题里的 \t 归一)仍留在两个详情视图与两个薄壳里。
*
* 与灯箱的关系:大图灯箱 GalleryLightbox / 副图灯箱 GalleryDetailLightbox / 交互 lib/gallery.ts
* 早就共享;本组件只是把它们的装配(含 details 插槽)也一并收口。
*
* ⚠️ Alpine 脚本注意:脚本是打包模块,读不到 props,故 rootId / alpineName / kind / favType /
* defaultDensity 全部经根节点 data-* 传下去,脚本在 alpine:init 时读一次。
*/
import GalleryLightbox from "@/components/GalleryLightbox.astro"
import GalleryDetailLightbox from "@/components/GalleryDetailLightbox.astro"
import DetailCountBadge from "@/components/DetailCountBadge.astro"
import LbDetailsStrip from "@/components/LbDetailsStrip.astro"
import { getI18n } from "@/lib/i18n"
interface GalleryImage {
id: string
url: string
thumb: string
raw: string
name: string
}
interface Props {
/** 模块身份:决定已登录补全量走哪个详情接口(runway=图集接口 / street=街拍接口) */
kind: "runway" | "street"
/** 根节点 id(灯箱交互靠它查根元素上的 data-*) */
rootId: string
/** Alpine 组件注册名(两个页面各一个,避免同名互相覆盖) */
alpineName: string
/** 图集网格 id(灯箱按它查 [data-image-index] / [data-fav-id]) */
galleryId: string
/** 单图收藏类型:runway_image | snap_image */
favType: string
/**
* 主图与灯箱缩略图比例。
* 后端素材统一 2:3(实测 S4 原图 240×360、high 样式 720×1080,宽高比均 0.6667),
* 故走秀与街拍都传 "2/3" —— 此时 object-cover 零裁切;写成 3/4 会把 2:3 的图
* 强行按 0.75 裁掉上下各约 11%(一行 5 张、格子变小时尤其明显)。
* 保留本 prop 只是为将来某模块素材比例真的不同时能单独覆盖,不是"两页各一套"。
*/
aspect: "2/3" | "3/4"
/** 是否取到了实体(false 时渲染「缺 id / 取数失败」空态)。不用 title 代替:标题允许为空 */
hasItem: boolean
/** H1 文案(调用方已处理好多语言 / \t 归一) */
title: string
/** SSR 首屏图片(调用方已切到 PREVIEW_LIMIT 张) */
previewImages: GalleryImage[]
/** 工具栏计数(真实总数优先) */
totalCount: number
/** 计数单位文案:LOOKS / PHOTOS */
countLabel: string
/** 后端截断了图集(未登录) */
preview: boolean
/** 占位遮罩格数(补足「剩余 N 张」) */
lockedCount: number
/** 递给客户端的副图投影(id + detail),与登录后完整 images 同构解析 */
detailPayload: unknown
/** 图集元信息:写进 data-*,供收藏 / 灯箱使用 */
galleryUid: string
galleryTitle: string
galleryBrand: string
/** 是否渲染图片名图注(街拍有、走秀无) */
showCaptions?: boolean
/** 默认每行张数(移动端固定 2 列,此值只影响 md+) */
defaultDensity?: 3 | 5
/** 取数失败 / 缺 id 时的提示文案(调用方已按语言算好) */
errorText: string
/** 空态返回首页链接 */
homeHref: string
}
const {
kind,
rootId,
alpineName,
galleryId,
favType,
aspect,
hasItem,
title,
previewImages,
totalCount,
countLabel,
preview,
lockedCount,
detailPayload,
galleryUid,
galleryTitle,
galleryBrand,
showCaptions = false,
defaultDensity = 5,
errorText,
homeHref,
} = Astro.props
const { t } = getI18n(Astro)
// 两个字面量都出现在本文件源码里,保证 Tailwind v4 JIT 能扫描到
const imgAspect = aspect === "3/4" ? "aspect-[3/4]" : "aspect-[2/3]"
const hasImages = previewImages.length > 0
---
<div
id={rootId}
x-data={`${alpineName}()`}
data-detail-gallery
data-alpine-name={alpineName}
data-gallery-id={galleryId}
data-gallery-kind={kind}
data-default-density={String(defaultDensity)}
data-fav-type={favType}
data-gallery-uid={galleryUid}
data-gallery-title={galleryTitle}
data-gallery-brand={galleryBrand}
data-preview={preview ? "true" : "false"}
data-details={JSON.stringify(detailPayload)}
class="min-h-screen bg-white text-black font-sans selection:bg-black selection:text-white"
>
{
hasItem ? (
<article class="mx-auto max-w-[1600px] px-5 md:px-10 py-12 md:py-16">
<h1 class="font-black leading-[0.95] tracking-tight text-[10vw] md:text-[4.5rem] mt-8">
{title}
</h1>
{hasImages && (
<section class="mt-16">
{/* 工具栏:图集计数 + 每行张数切换(移动端固定 2 列,density 只影响 md+) */}
<div class="flex items-center justify-between mb-5 border-b border-black/10 pb-3">
<span class="text-[11px] uppercase tracking-[0.22em] text-[var(--c-gray-600)]">
{totalCount} {countLabel}
</span>
<div class="flex items-center gap-1" role="group" aria-label="Images per row">
<span class="text-[11px] uppercase tracking-[0.18em] text-[var(--c-gray-600)] mr-2 hidden sm:inline">PER ROW</span>
{/* 只有「3 张 / 5 张」两档,用竖条图标直观表达列数(避免文字数字按钮) */}
<button
type="button"
@click="density = 3"
:class="density === 3 ? 'bg-black text-white' : 'bg-transparent text-black hover:bg-black/5'"
class="w-8 h-8 flex items-center justify-center border border-black/15 transition-colors cursor-pointer"
:aria-pressed="density === 3"
aria-label="3 per row"
title="3 per row"
>
<svg class="w-[18px] h-[18px]" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
<rect x="1.5" y="2" width="3" height="12" />
<rect x="6.5" y="2" width="3" height="12" />
<rect x="11.5" y="2" width="3" height="12" />
</svg>
</button>
<button
type="button"
@click="density = 5"
:class="density === 5 ? 'bg-black text-white' : 'bg-transparent text-black hover:bg-black/5'"
class="w-8 h-8 flex items-center justify-center border border-black/15 transition-colors cursor-pointer"
:aria-pressed="density === 5"
aria-label="5 per row"
title="5 per row"
>
<svg class="w-[18px] h-[18px]" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
<rect x="1" y="2" width="2" height="12" />
<rect x="4" y="2" width="2" height="12" />
<rect x="7" y="2" width="2" height="12" />
<rect x="10" y="2" width="2" height="12" />
<rect x="13" y="2" width="2" height="12" />
</svg>
</button>
</div>
</div>
<div id={galleryId} class="grid gap-4" :class="gridClass()">
{previewImages.map((im, i) => (
<figure
data-image-index={i}
data-main-id={im.id}
data-image-url={im.url}
data-image-name={im.name}
data-fav-id={im.id}
data-fav-url={im.raw}
@click={`openLb(${i})`}
class="cursor-zoom-in group"
>
{/* 图片与覆盖层(收藏 / 副图角标)必须包在同一个 relative 盒里:
角标是 absolute bottom-2,若锚点落在含图注的 figure 上,就会压在图注上而不是图片左下角。 */}
<div class="relative bg-[var(--c-gray-100)] overflow-hidden">
<img
src={im.url}
alt={im.name}
loading={i < 6 ? "eager" : "lazy"}
decoding="async"
class={`w-full ${imgAspect} object-cover group-hover:opacity-90 transition-opacity`}
/>
{/* 单图收藏:hover 显示,已收藏常驻实心 */}
<button
login-required
type="button"
data-fav-id={im.id}
data-fav-url={im.raw}
@click.stop="toggleFav($el.dataset.favId, $el.dataset.favUrl)"
:class="isFav($el.dataset.favId) ? 'is-fav opacity-100' : 'opacity-0 group-hover:opacity-100'"
class="fav-btn absolute right-2 top-2 z-10 w-8 h-8 rounded-full border border-black/15 bg-white/80 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black/5 hover:border-black/30 transition-all cursor-pointer"
aria-label={t('save')}
>
<svg class="w-4 h-4" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 21C12 21 4 14.5 4 8.8C4 6.1 6.1 4 8.7 4C10.3 4 11.5 4.8 12 6C12.5 4.8 13.7 4 15.3 4C17.9 4 20 6.1 20 8.8C20 14.5 12 21 12 21Z"/>
</svg>
</button>
{/* 副图数量角标(共享组件):有副图的主图左下角标「张数」,点它直接开副图灯箱 */}
<DetailCountBadge mainId={im.id} />
</div>
{showCaptions && im.name && (
<figcaption class="mt-2 h-[15px] text-[11px] leading-none uppercase tracking-widest text-[var(--c-gray-600)] truncate">
{im.name}
</figcaption>
)}
</figure>
))}
{/* 未登录预览占位遮罩:补满「剩余 N 张」空图,提示用户登录后可见,
避免误以为图集只有预览上限那几张。已登录(x-show false)自动隐藏,由 extraImages 真实图替补。 */}
{lockedCount > 0 &&
Array.from({ length: lockedCount }).map(() => (
<figure
x-show="!isAuthed && preview"
x-cloak
login-redirect
class="cursor-pointer group"
>
{/* 与真实图片等高的图位:锁图标 + 提示,点击跳登录 */}
<div class={`w-full ${imgAspect} bg-[var(--c-gray-100)] flex items-center justify-center text-[var(--c-gray-600)] group-hover:text-[var(--c-gray-700)] transition-colors pointer-events-none`}>
<div class="flex flex-col items-center gap-2">
<svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<rect x="4.5" y="10.5" width="15" height="10" rx="2" />
<path d="M8 10.5V7a4 4 0 0 1 8 0v3.5" />
</svg>
<span class="text-[10px] uppercase tracking-[0.18em]">{t('login to view')}</span>
</div>
</div>
{/* 与真实图注等高的空白衬垫,保证遮罩格与真实图格总高一致。
这里不放「+N photos」文案:lockedCount 是剩余总数,逐格重复显示会误导。 */}
{showCaptions && <div class="mt-2 h-[15px]" aria-hidden="true"></div>}
</figure>
))
}
{/* 登录后追加的额外图片:extraImages 由客户端 loadAuthedState() 在已登录时填充,未登录为空不渲染 */}
<template x-for="(im, i) in extraImages" :key="im.url">
<figure
:data-image-index="5 + i"
:data-main-id="im.id"
:data-image-url="im.url"
:data-image-name="im.name"
:data-fav-id="im.id"
:data-fav-url="im.raw"
@click="openLb(5 + i)"
class="cursor-zoom-in group"
>
<div class="relative bg-[var(--c-gray-100)] overflow-hidden">
<img
:src="im.url"
:alt="im.name"
loading="lazy"
decoding="async"
class={`w-full ${imgAspect} object-cover group-hover:opacity-90 transition-opacity`}
/>
<button
login-required
type="button"
:data-fav-id="im.id"
:data-fav-url="im.raw"
@click.stop="toggleFav($el.dataset.favId, $el.dataset.favUrl)"
:class="isFav($el.dataset.favId) ? 'is-fav opacity-100' : 'opacity-0 group-hover:opacity-100'"
class="fav-btn absolute right-2 top-2 z-10 w-8 h-8 rounded-full border border-black/15 bg-white/80 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black/5 hover:border-black/30 transition-all cursor-pointer"
aria-label={t('save')}
>
<svg class="w-4 h-4" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 21C12 21 4 14.5 4 8.8C4 6.1 6.1 4 8.7 4C10.3 4 11.5 4.8 12 6C12.5 4.8 13.7 4 15.3 4C17.9 4 20 6.1 20 8.8C20 14.5 12 21 12 21Z"/>
</svg>
</button>
<DetailCountBadge mainId="im.id" />
</div>
{showCaptions && (
<template x-if="im.name">
<figcaption class="mt-2 h-[15px] text-[11px] leading-none uppercase tracking-widest text-[var(--c-gray-600)] truncate" x-text="im.name"></figcaption>
</template>
)}
</figure>
</template>
</div>
</section>
)}
{/* 图集之后的页面专属内容(走秀的系列描述;街拍不传) */}
<slot name="after-grid" />
</article>
) : (
<div class="flex flex-col items-center justify-center min-h-[60vh] px-5 text-center">
<p class="text-sm text-[var(--c-gray-700)] uppercase tracking-widest mb-4">
{errorText}
</p>
<a
href={homeHref}
class="text-[12px] uppercase tracking-[0.2em] border border-black px-4 py-2 hover:bg-black hover:text-white transition-colors"
>
← {t('Back to Index')}
</a>
</div>
)
}
{/* 大图灯箱(共享):当前主图的副图经 details 插槽注入。左栏缩略图条已移除(见 GalleryLightbox)。 */}
{hasImages && (
<GalleryLightbox>
<LbDetailsStrip slot="details" aspect={aspect} />
</GalleryLightbox>
)}
{/* 副图灯箱(共享):点大图灯箱右下角的副图缩略图、或网格左下角角标打开 */}
{hasImages && <GalleryDetailLightbox aspect={aspect} />}
</div>
<script>
import { getArticleDetailAuthed, getStreetSnapDetailAuthed } from "@/lib/api"
import { createGalleryView } from "@/lib/gallery"
import { createDetailGallery } from "@/lib/galleryDetail"
// 模块身份 → 已登录补全量的取数函数。脚本读不到 props,故身份走根节点的 data-gallery-kind。
const FETCHERS = {
runway: getArticleDetailAuthed,
street: getStreetSnapDetailAuthed,
} as const
document.addEventListener("alpine:init", () => {
// 一个页面只有一个详情图集(网格 + 两个灯箱都在同一根节点内)。
const root = document.querySelector<HTMLElement>("[data-detail-gallery]")
if (!root) return
const kind = root.dataset.galleryKind === "street" ? "street" : "runway"
const name = root.dataset.alpineName || "articleView"
const density = Number(root.dataset.defaultDensity) === 3 ? 3 : 5
Alpine.data(name, () => ({
...createDetailGallery(
createGalleryView({
rootSelector: `#${root.id}`,
gallerySelector: `#${root.dataset.galleryId}`,
favType: root.dataset.favType || "runway_image",
fetchDetail: FETCHERS[kind],
}),
),
// 每行张数(应对图集图片很多):3 / 5 两档,移动端固定 2 列。
density,
// 基础 grid-cols-2 与两个 md:grid-cols-* 字面量都出现在源码里,确保 Tailwind v4 JIT 能扫描到。
gridClass(): string {
return "grid-cols-2 " + (this.density === 5 ? "md:grid-cols-5" : "md:grid-cols-3")
},
}))
})
</script>

View File

@ -0,0 +1,122 @@
---
// 细节图 / 副图 灯箱:由主图大图灯箱里的细节缩略条打开的「单图放大」层。
// 走秀(RunwayLookCard)与街拍(StreetSnapCard)共用;交互在 lib/galleryDetail.ts。
import { getI18n } from "@/lib/i18n"
interface Props {
/** 左栏副图缩略条比例,与主图一致(后端素材统一 2:3,默认值即可) */
aspect?: "2/3" | "3/4"
}
const { aspect = "2/3" } = Astro.props
const { t } = getI18n(Astro)
// 两个字面量都出现在本文件源码里,保证 Tailwind v4 JIT 能扫描到
const thumbAspect = aspect === "3/4" ? "aspect-[3/4]" : "aspect-[2/3]"
---
<div
x-show="detailLbOpen"
x-cloak
@keydown.window.escape="detailLbOpen && closeDetailLb()"
@keydown.window.arrow-right="detailLbOpen && nextDetailLb()"
@keydown.window.arrow-left="detailLbOpen && prevDetailLb()"
class="fixed inset-0 z-[100] bg-white flex flex-col select-none"
aria-hidden="true"
>
<div
class="absolute top-5 left-1/2 -translate-x-1/2 z-30 border border-black/15 bg-white/90 px-3 py-1 text-[11px] tracking-[0.22em] text-[#111] backdrop-blur-md"
x-text="`${String(detailLbIndex + 1).padStart(2, '0')} / ${String(detailImages.length).padStart(2, '0')}`"
></div>
<button
login-required
type="button"
@click.stop="toggleFav(currentDetailFavId(), currentDetailFavUrl())"
:class="isFav(currentDetailFavId()) ? 'is-fav' : ''"
class="fav-btn absolute top-5 right-[68px] z-30 w-10 h-10 rounded-full border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
aria-label={t('save')}
>
<svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 21C12 21 4 14.5 4 8.8C4 6.1 6.1 4 8.7 4C10.3 4 11.5 4.8 12 6C12.5 4.8 13.7 4 15.3 4C17.9 4 20 6.1 20 8.8C20 14.5 12 21 12 21Z"/>
</svg>
</button>
{/* 关闭 = 退回上一层(主图大图灯箱),不是直接回图集网格 —— 由 closeDetailLb() 判断来源决定。 */}
<button
type="button"
@click="closeDetailLb()"
class="absolute top-5 right-5 z-30 w-10 h-10 border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
aria-label={t('Close')}
>
<svg class="w-4 h-4" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true">
<path d="M6 6l12 12M18 6L6 18" />
</svg>
</button>
<div class="flex-1 min-h-0 flex items-stretch overflow-hidden relative">
<div
id="detail-lb-thumbs"
class="w-[76px] sm:w-[118px] flex-none overflow-y-auto overflow-x-hidden relative scroll-smooth p-[32px_8px] sm:p-[38px_18px_38px_20px] border-r border-black/10 no-scrollbar"
>
<template x-for="(im, i) in detailImages" :key="im.url">
<button
type="button"
@click="showDetailLb(i)"
class={`relative block w-full ${thumbAspect} mb-2 overflow-hidden cursor-pointer transition-opacity duration-200 opacity-40 hover:opacity-90 bg-cover bg-center`}
:style="`background-image:url('${im.thumb}')`"
x-bind:class="detailLbIndex === i ? 'opacity-100 ring-1 ring-black' : ''"
:aria-label="String(i + 1)"
>
<span class="absolute left-1 top-1 z-10 bg-black/70 px-1 py-0.5 text-[8px] sm:text-[9px] tracking-[0.16em] text-white backdrop-blur-sm" x-text="String(i + 1).padStart(2, '0')"></span>
</button>
</template>
</div>
<button
type="button"
@click.stop="prevDetailLb()"
class="absolute left-[82px] sm:left-[130px] top-1/2 -translate-y-1/2 z-20 w-10 h-10 border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
aria-label={t('Previous image')}
>
<svg class="w-5 h-5 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
<path d="M15 6l-6 6 6 6" />
</svg>
</button>
<button
type="button"
@click.stop="nextDetailLb()"
class="absolute right-2 sm:right-5 top-1/2 -translate-y-1/2 z-20 w-10 h-10 border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
aria-label={t('Next image')}
>
<svg class="w-5 h-5 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
<path d="M9 6l6 6-6 6" />
</svg>
</button>
<div
id="detail-lb-main"
@click.self="closeDetailLb()"
class="flex-1 min-w-0 min-h-0 relative flex justify-center px-4 sm:px-18"
x-bind:class="detailLbZoomed
? 'overflow-y-auto overflow-x-hidden items-start'
: 'items-center'"
>
<img
id="detail-lb-image"
src=""
alt=""
@click="toggleDetailZoom()"
decoding="async"
class="block select-none transition-opacity duration-200"
x-bind:class="detailLbZoomed
? 'w-full max-w-full h-auto max-h-none cursor-zoom-out'
: 'max-w-full max-h-full object-contain cursor-zoom-in'"
/>
</div>
</div>
<div
class="absolute left-0 right-0 bottom-4 z-20 px-6 text-center text-[11px] uppercase tracking-[0.2em] text-black/60 pointer-events-none"
x-text="currentDetailName"
></div>
</div>

View File

@ -0,0 +1,104 @@
---
// 走秀 / 街拍详情页共享的全屏大图灯箱:大图 + 左/右翻页 + 单图收藏。
//
// 左栏「所有图片缩略图条」已移除:翻页/定位已由顶部计数 + 左右箭头 + 键盘 ←/→ + ?img= 深链完整覆盖,
// 缩略条属冗余导航;去掉后主图可用面积更大。主图翻页实际读的是图集网格里 [data-image-index] 的
// figure(第 6 张起的 extraImages 也已在网格里渲染),与左栏无关,故移除不影响翻页。
//
// 视觉遵循全站「黑白编辑风」:直角细框、小字 + 宽字距、零填充计数、hover 反色(bg-black + 白字)。
// 交互逻辑全部在 src/lib/gallery.ts(createGalleryView);本组件只负责标记。
//
// 各页独有的附加层通过具名插槽 details 注入(走秀页塞「当前 look 的细节图簇」,街拍页不传)。
import { getI18n } from "@/lib/i18n"
const { t } = getI18n(Astro)
---
<div
x-show="lbOpen"
x-cloak
@keydown.window.escape="lbOpen && closeLb()"
@keydown.window.arrow-right="lbOpen && nextLb()"
@keydown.window.arrow-left="lbOpen && prevLb()"
class="fixed inset-0 z-[100] bg-white flex flex-col select-none"
aria-hidden="true"
>
{/* 计数:小字 + 0.22em 字距(全站「小标与计数」档),直角细框,零填充 */}
<div
class="absolute top-5 left-1/2 -translate-x-1/2 z-30 border border-black/15 bg-white/90 px-3 py-1 text-[11px] tracking-[0.22em] text-[#111] backdrop-blur-md"
x-text="`${String(lbIndex + 1).padStart(2, '0')} / ${String(imageCount).padStart(2, '0')}`"
></div>
{/* 单图收藏:圆形,与列表卡片 .fav-toggle / 详情页右下角 #fav-fab 的全站「收藏=圆形」语义保持一致 */}
<button
login-required
type="button"
@click.stop="toggleFav(currentFavId(), currentFavUrl())"
:class="isFav(currentFavId()) ? 'is-fav' : ''"
class="fav-btn absolute top-5 right-[68px] z-30 w-10 h-10 rounded-full border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
aria-label={t('save')}
>
<svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 21C12 21 4 14.5 4 8.8C4 6.1 6.1 4 8.7 4C10.3 4 11.5 4.8 12 6C12.5 4.8 13.7 4 15.3 4C17.9 4 20 6.1 20 8.8C20 14.5 12 21 12 21Z"/>
</svg>
</button>
<button
type="button"
@click="closeLb()"
class="absolute top-5 right-5 z-30 w-10 h-10 border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
aria-label={t('Close')}
>
<svg class="w-4 h-4" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true">
<path d="M6 6l12 12M18 6L6 18" />
</svg>
</button>
<div class="flex-1 min-h-0 flex items-stretch overflow-hidden relative">
<button
type="button"
@click.stop="prevLb()"
class="absolute left-2 sm:left-5 top-1/2 -translate-y-1/2 z-20 w-10 h-10 border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
aria-label={t('Previous image')}
>
<svg class="w-5 h-5 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
<path d="M15 6l-6 6 6 6" />
</svg>
</button>
<button
type="button"
@click.stop="nextLb()"
class="absolute right-2 sm:right-5 top-1/2 -translate-y-1/2 z-20 w-10 h-10 border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
aria-label={t('Next image')}
>
<svg class="w-5 h-5 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
<path d="M9 6l6 6-6 6" />
</svg>
</button>
<div
id="lb-main"
@click.self="closeLb()"
class="flex-1 min-w-0 min-h-0 relative flex justify-center px-4 sm:px-18"
x-bind:class="lbZoomed
? 'overflow-y-auto overflow-x-hidden items-start'
: 'items-center'"
>
<img
id="lb-image"
src=""
alt=""
@click="toggleZoom()"
decoding="async"
class="block select-none transition-opacity duration-200"
x-bind:class="lbZoomed
? 'w-full max-w-full h-auto max-h-none cursor-zoom-out'
: 'max-w-full max-h-full object-contain cursor-zoom-in'"
/>
</div>
</div>
{/* 各页独有的附加层(走秀页注入「当前 look 的细节图簇」;街拍页不传) */}
<slot name="details" />
</div>

View File

@ -1,346 +0,0 @@
---
import ComingSoon from "@/components/ComingSoon.astro"
import { toAbs } from "@/lib/api"
import { getI18n } from "@/i18n/utils"
import { href, ROUTES } from '@/lib/routes'
import { getSsgIndexRunway } from "@/lib/api"
// 国际化:一行取当前语言 + 翻译函数
const { locale, t } = getI18n(Astro)
// 首页「热门品牌」区块:构建期走 SSG 内部接口 /api/v1/ssg/index/runway(server-only),
// 首页 runway 数据含多模块,hotBrand 为其中之一;封面/标题取自每个品牌代表走秀,
// 直接烧入静态 HTML,运行期不再请求;后端不可达则静默留空(区块隐藏)。
const popular = (await getSsgIndexRunway()).hotBrand
type GalleryItem = {
src: string
brand: string
articleId: string // 代表走秀 hashid 编码串(后端返回 string)
title: string
}
const galleryItems: GalleryItem[] = popular
.filter((b) => b.cover && b.article_id)
.map((b) => ({
src: toAbs(b.cover || ""),
brand: b.brand,
articleId: b.article_id,
title: b.title,
}))
---
<div x-data="{ activeTab: 'backstage' }" class="flex flex-col min-h-screen">
<!-- 二级分类标签页 -->
<div id="tabbar" class="mt-16 md:mt-24">
<ul class="flex items-center gap-6 list-none p-0 m-0 overflow-x-auto">
<li
class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap"
:class="{ 'is-active': activeTab === 'backstage' }"
@click="activeTab = 'backstage'"
>
Runway
<!-- <span class="text-xs uppercase tracking-widest bg-black text-white px-2 py-0.5 rounded-full font-mono font-bold align-super">Live</span> -->
</li>
<li
class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap"
:class="{ 'is-active': activeTab === 'shows' }"
@click="activeTab = 'shows'"
>
Street Style
</li>
<li
class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap"
:class="{ 'is-active': activeTab === 'events' }"
@click="activeTab = 'events'"
>
Social Media
</li>
<!-- <li
class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap"
:class="{ 'is-active': activeTab === 'street' }"
@click="activeTab = 'street'"
>
D
<span class="text-xs uppercase tracking-widest bg-zinc-200 text-zinc-600 px-2 py-0.5 rounded-full font-mono font-bold align-super">Soon</span>
</li> -->
</ul>
</div>
<!-- 中间内容展示区 -->
<main class="grow min-h-[400px] mt-10">
<!-- 发布会 面板(默认激活) -->
<div class="panel" x-show="activeTab === 'backstage'" x-transition.opacity.duration.300ms>
<div class="container px-md md:px-xl text-2xl md:text-2xl-1 font-medium mb-4">Hot Brand</div>
<!-- 横向滚动画廊 -->
{
galleryItems.length > 0 && (
<section class="hs-section">
<div class="hs-stage">
<div class="swiper hs-swiper" id="hsSwiper">
<div class="swiper-wrapper">
{
galleryItems.map((g, i) => (
<div class="swiper-slide hs-slide">
<a class="hs-item" href={href(locale, ROUTES.item(g.articleId))} data-idx={i}>
<!-- Alpine 管理单张图片的加载/失败状态 -->
<div
class="hs-img-box"
x-data="{ loaded: false, error: false }"
:class="{ 'is-loaded': loaded || error }"
>
<div class="hs-skel" aria-hidden="true" x-show="!loaded && !error"></div>
<span class="hs-spin" aria-hidden="true" x-show="!loaded && !error">
<svg viewBox="0 0 24 24" width="22" height="22">
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="40 22" class="hs-ring" />
</svg>
</span>
<img
src={g.src}
alt={g.brand}
loading={i < 4 ? "eager" : "lazy"}
decoding="async"
:class="{ 'is-error': error }"
@load="loaded = true; $dispatch('img-ready')"
@error="error = true; $dispatch('img-ready')"
/>
<span class="hs-caption font-sans">
<span class="hs-cap-brand">{g.brand}</span>
<span class="hs-cap-meta">{g.title}</span>
</span>
</div>
</a>
</div>
))
}
</div>
</div>
<div class="hs-controls flex justify-between items-center text-[13px] font-bold">
<div class="text-[16px] hs-arrow hs-prev cursor-pointer hover:opacity-60 transition-opacity duration-200" role="button" tabindex="0">{t('Previous')}</div>
<div class="text-[16px] hs-arrow hs-next cursor-pointer hover:opacity-60 transition-opacity duration-200" role="button" tabindex="0">{t('Next')}</div>
</div>
</div>
</section>
)
}
</div>
<!-- 灵感 面板 -->
<div class="panel" x-show="activeTab === 'shows'" x-transition.opacity.duration.300ms x-cloak>
<ComingSoon module="灵感" moduleZh="Inspiration" note="灵感板块正在筹备中,敬请期待。你可以先浏览已上线的走秀档案。" />
</div>
<!-- 社媒 面板 -->
<div class="panel" x-show="activeTab === 'events'" x-transition.opacity.duration.300ms x-cloak>
<ComingSoon module="社媒" moduleZh="Social" note="社媒板块正在筹备中,敬请期待。你可以先浏览已上线的走秀档案。" />
</div>
<!-- 街拍 面板 -->
<div class="panel" x-show="activeTab === 'street'" x-transition.opacity.duration.300ms x-cloak>
<ComingSoon module="街拍" moduleZh="Street" note="街拍板块正在筹备中,敬请期待。你可以先浏览已上线的走秀档案。" />
</div>
</main>
</div>
<style>
@reference "tailwindcss";
:root { --brand: #cf5a44; }
/* 标签基础与激活样式 */
.tab {
@apply relative pb-[6px] text-[#bbb] transition-colors duration-200 no-underline;
}
.tab:hover { @apply text-[#666]; }
.tab::after {
content: "";
@apply absolute left-0 right-0 bottom-0 h-[2px] bg-[var(--brand)] scale-x-0 origin-left transition-transform duration-[250ms] ease-in-out;
}
.tab.is-active { @apply text-black; }
.tab.is-active::after { @apply scale-x-100; }
/* 防闪烁标签 */
[x-cloak] { display: none !important; }
/* 区块标题 */
.sec-head { @apply flex items-end justify-between mt-2 mb-6 pb-4 border-b border-[#ececec]; }
.sec-title { @apply font-serif text-[28px] leading-none font-extrabold text-[#111]; }
.sec-sub { @apply mt-2 text-[12px] uppercase tracking-[.14em] text-[#999] font-mono; }
.sec-more { @apply text-[12px] uppercase tracking-[.14em] font-bold no-underline text-[#111] transition-opacity duration-200; }
.sec-more:hover { @apply opacity-60; }
/* 横向画廊样式 */
.hs-section { @apply mb-9; }
.hs-stage { @apply relative; }
.hs-controls {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
z-index: 6;
padding: 0 8px;
pointer-events: none;
mix-blend-mode: difference;
color: #fff;
}
.hs-controls .hs-arrow { pointer-events: auto; }
.hs-arrow { @apply select-none; }
.hs-arrow.swiper-button-disabled { pointer-events: none; }
/* Swiper 尺寸规整 */
.hs-swiper {
width: 100%;
height: clamp(500px, 80vh, 900px);
padding: 0 4px;
}
.hs-swiper .swiper-wrapper { align-items: center; }
.hs-swiper .hs-slide {
width: auto;
height: auto;
}
.hs-item {
display: block;
height: auto;
width: max-content;
text-decoration: none;
color: inherit;
}
.hs-img-box {
position: relative;
display: block;
height: clamp(500px, 80vh, 900px);
/* aspect-ratio: 3 / 4; */
background: #f0f0f0;
overflow: hidden;
}
.hs-img-box > img {
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: 1;
opacity: 0;
transition: opacity 0.4s ease;
}
.hs-img-box.is-loaded > img { opacity: 1; }
.hs-img-box > img.is-error { opacity: 0 !important; }
/* 加载骨架屏与旋转 Spinner */
.hs-skel {
position: absolute;
inset: 0;
z-index: 0;
background-image: linear-gradient(100deg, #f0f0f0 30%, #e6e6e6 50%, #f0f0f0 70%);
background-size: 200% 100%;
animation: hs-shimmer 1.3s ease-in-out infinite;
transition: opacity 0.35s ease;
}
.hs-img-box.is-loaded .hs-skel { opacity: 0; }
.hs-spin {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #bdbdbd;
pointer-events: none;
z-index: 2;
transition: opacity 0.3s ease;
}
.hs-img-box.is-loaded .hs-spin { opacity: 0; }
.hs-spin svg { display: block; }
.hs-ring { transform-origin: 12px 12px; animation: hs-rotate 0.8s linear infinite; }
@keyframes hs-rotate { to { transform: rotate(360deg); } }
@keyframes hs-shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
/* 底部品牌/标题信息——左下角大标题+小副标题,始终可见 */
.hs-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 48px 24px 22px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.28) 55%, transparent 100%);
color: white;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: 6px;
opacity: 1;
z-index: 3;
pointer-events: none;
}
.hs-cap-brand {
@apply font-sans;
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.1;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.hs-cap-meta {
@apply font-sans;
font-size: 13px;
font-weight: 500;
opacity: 0.9;
letter-spacing: 0.04em;
line-height: 1.3;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
max-width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (min-width: 768px) {
.hs-caption { padding: 60px 28px 26px; }
.hs-cap-brand { font-size: 26px; }
.hs-cap-meta { font-size: 15px; }
}
@media (max-width: 768px) {
.hs-swiper, .hs-img-box { height: clamp(340px, 56vh, 540px); }
}
</style>
<script>
import Swiper from "swiper";
import { Navigation, FreeMode, Keyboard } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/free-mode";
// 初始化 Swiper 轮播
const el = document.getElementById("hsSwiper");
if (el) {
const prevBtn = el.parentElement?.querySelector<HTMLElement>(".hs-prev");
const nextBtn = el.parentElement?.querySelector<HTMLElement>(".hs-next");
const swiper = new Swiper(el, {
modules: [Navigation, FreeMode, Keyboard],
slidesPerView: "auto",
spaceBetween: 4,
grabCursor: true,
speed: 220,
freeMode: { enabled: true, sticky: true, momentumBounce: false, momentumRatio: 0.5 },
keyboard: { enabled: true },
navigation: { prevEl: prevBtn, nextEl: nextBtn, disabledClass: "swiper-button-disabled" },
observer: true,
observeSlideChildren: true,
});
// 接收 Alpine 发布的图片就绪事件更新布局防闪烁
window.addEventListener("img-ready", () => {
requestAnimationFrame(() => swiper.update());
});
}
</script>

View File

@ -1,491 +0,0 @@
---
import type { RawArticle } from "@/lib/data"
import Breadcrumb from "@/components/Breadcrumb.astro"
import { getI18n } from "@/i18n/utils"
import { href, ROUTES } from '@/lib/routes'
import { ssrBase } from "@/lib/api"
interface Props {
article: RawArticle | null
error?: "missing" | "failed" | null
}
const { article, error = null } = Astro.props
const { locale, t } = getI18n(Astro)
const full = (u: string): string => {
if (!u) return ""
if (/^https?:\/\//i.test(u)) return u
return ssrBase().replace(/\/$/, "") + u
}
const images = (article?.images ?? [])
.map((im) => ({
id: im.id,
url: full(im.image || ""),
name: im.name || "",
}))
.filter((im) => im.url)
const descParas = (article?.description || "")
.split(/\n\n+/)
.map((s) => s.trim())
.filter(Boolean)
const homeHref = href(locale, ROUTES.home)
const archiveHref = href(locale, ROUTES.shows)
const crumbs: { label: string; href: string }[] = [
// {
// label: t("Runway looks"),
// href: archiveHref,
// },
]
if (article?.brand_id) {
crumbs.push({
label: article.brand_name || "Brand",
href: `${archiveHref}?brand_id=${article.brand_id}`,
})
}
---
<div
id="article-view"
x-data="articleView()"
class="min-h-screen bg-white text-black font-sans selection:bg-black selection:text-white"
>
{
article ? (
<article class="mx-auto max-w-[1600px] px-5 md:px-10 py-12 md:py-16">
{/* <Breadcrumb items={crumbs}>
<span slot="current" class="max-w-[60vw] truncate">
{article.title}
</span>
</Breadcrumb> */}
<h1 class="font-black leading-[0.95] tracking-tight text-[10vw] md:text-[4.5rem] mt-8">
{article.title}
</h1>
{images.length > 0 && (
<section class="mt-16">
<div
id="article-gallery"
class="grid grid-cols-2 md:grid-cols-3 gap-4"
>
{images.map((im, i) => (
<figure
data-image-index={i}
data-image-url={im.url}
data-image-name={im.name}
@click={`openLb(${i})`}
class="bg-[#f2f2f2] cursor-zoom-in group"
>
<img
src={im.url}
alt={im.name}
loading={i < 6 ? "eager" : "lazy"}
decoding="async"
class="w-full aspect-[3/4] object-cover group-hover:opacity-90 transition-opacity"
/>
{im.name && (
<figcaption class="text-[11px] font-mono uppercase tracking-widest text-[#999] mt-2">
{im.name}
</figcaption>
)}
</figure>
))}
</div>
</section>
)}
{descParas.length > 0 && (
<section class="mt-16 max-w-[720px] space-y-5 text-[15px] leading-[1.8] text-[#222]">
{descParas.map((p) => (
<p>{p}</p>
))}
</section>
)}
</article>
) : (
<div class="flex flex-col items-center justify-center min-h-[60vh] px-5 text-center">
<p class="font-mono text-sm text-[#888] uppercase tracking-widest mb-4">
{error === "missing" ? t('No article ID specified') : t('Failed to load article. Please refresh or try later.')}
</p>
<a
href={homeHref}
class="text-[12px] font-mono uppercase tracking-[0.2em] border border-black px-4 py-2 hover:bg-black hover:text-white transition-colors"
>
← {t('Back to Index')}
</a>
</div>
)
}
{article && images.length > 0 && (
<div
x-show="lbOpen"
x-cloak
@keydown.window.escape="closeLb()"
@keydown.window.arrow-right="nextLb()"
@keydown.window.arrow-left="prevLb()"
class="fixed inset-0 z-[100] bg-white flex flex-col select-none"
aria-hidden="true"
>
<div
class="absolute top-5 left-1/2 -translate-x-1/2 z-30 font-mono text-[12px] font-semibold tracking-[0.14em] text-[#111] bg-white/75 border border-black/10 px-3 py-1.5 rounded-[6px] backdrop-blur-md"
x-text="`${lbIndex + 1} / ${imageCount}`"
></div>
<button
type="button"
@click="closeLb()"
class="absolute top-[18px] right-[18px] z-30 w-10 h-10 rounded-full border border-black/15 bg-white/75 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black/5 hover:border-black/30 transition-all cursor-pointer"
aria-label={t('Close')}
>
✕
</button>
<div class="flex-1 min-h-0 flex items-stretch overflow-hidden relative">
<div
id="lb-thumbs"
class="w-[76px] sm:w-[118px] flex-none overflow-y-auto overflow-x-hidden relative scroll-smooth p-[32px_8px] sm:p-[38px_18px_38px_20px] border-r border-black/10 bg-gradient-to-b from-black/5 to-transparent no-scrollbar"
>
{images.map((im, i) => (
<button
type="button"
data-lb-index={i}
data-thumb-url={im.url}
@click={`showLb(${i})`}
class="lb-thumb relative block w-full aspect-[3/4] mb-2 rounded-[2px] overflow-hidden cursor-pointer transition-all duration-200 opacity-40 hover:opacity-85 bg-[#eee] bg-cover bg-center"
x-bind:class="lbIndex === Number($el.dataset.lbIndex)
? 'opacity-100 scale-[1.03] ring-2 ring-[#111]'
: ''"
aria-label={`${i + 1}`}
>
<span class="absolute left-1 top-1 z-10 font-mono text-[8px] sm:text-[9px] font-semibold tracking-widest text-white px-1 py-0.5 rounded-[3px] bg-black/55 backdrop-blur-sm">
{String(i + 1).padStart(2, "0")}
</span>
</button>
))}
</div>
<button
type="button"
@click.stop="prevLb()"
class="absolute left-3 sm:left-5 top-2 z-20 w-[52px] sm:w-[72px] h-[30px] sm:h-[34px] border border-black/15 bg-white/80 rounded-[6px] backdrop-blur-md flex items-center justify-center text-[#111] hover:bg-black/5 transition-all cursor-pointer"
aria-label={t('Previous image')}
>
<svg class="w-4 h-4 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
<path d="M6 14l6-6 6 6" />
</svg>
</button>
<button
type="button"
@click.stop="nextLb()"
class="absolute left-3 sm:left-5 bottom-2 z-20 w-[52px] sm:w-[72px] h-[30px] sm:h-[34px] border border-black/15 bg-white/80 rounded-[6px] backdrop-blur-md flex items-center justify-center text-[#111] hover:bg-black/5 transition-all cursor-pointer"
aria-label={t('Next image')}
>
<svg class="w-4 h-4 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
<path d="M6 10l6 6 6-6" />
</svg>
</button>
<button
type="button"
@click.stop="prevLb()"
class="absolute left-[82px] sm:left-[130px] top-1/2 -translate-y-1/2 z-20 w-10 h-10 rounded-full border border-black/15 bg-white/75 text-[#111] flex items-center justify-center backdrop-blur-md hover:scale-105 hover:border-black/30 transition-all cursor-pointer"
aria-label={t('Previous image')}
>
<svg class="w-5 h-5 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
<path d="M15 6l-6 6 6 6" />
</svg>
</button>
<button
type="button"
@click.stop="nextLb()"
class="absolute right-2 sm:right-5 top-1/2 -translate-y-1/2 z-20 w-10 h-10 rounded-full border border-black/15 bg-white/75 text-[#111] flex items-center justify-center backdrop-blur-md hover:scale-105 hover:border-black/30 transition-all cursor-pointer"
aria-label={t('Next image')}
>
<svg class="w-5 h-5 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
<path d="M9 6l6 6 6-6" />
</svg>
</button>
<div
id="lb-main"
@click.self="closeLb()"
class="flex-1 min-w-0 min-h-0 relative flex justify-center px-4 sm:px-18"
x-bind:class="lbZoomed
? 'overflow-y-auto overflow-x-hidden items-start'
: 'items-center'"
>
<img
id="lb-image"
src=""
alt=""
@click="toggleZoom()"
decoding="async"
class="block select-none transition-opacity duration-200"
x-bind:class="lbZoomed
? 'w-full max-w-full h-auto max-h-none cursor-zoom-out'
: 'max-w-full max-h-full object-contain cursor-zoom-in'"
/>
</div>
</div>
<div
class="absolute left-0 right-0 bottom-11 z-20 text-center text-black/60 font-mono text-[11px] uppercase tracking-[0.18em] pointer-events-none px-6"
x-text="currentImageName"
></div>
<div
x-show="!lbZoomed"
class="absolute left-0 right-0 bottom-4 z-20 text-center text-black/45 font-mono text-[11px] tracking-[0.14em] pointer-events-none px-6 transition-opacity duration-200"
>
{t('Click image to zoom · Scroll to view · Esc to close')}
</div>
</div>
)}
</div>
<script>
// type ArticleView = {
// lbOpen: boolean
// lbIndex: number
// lbZoomed: boolean
// touchStartX: number
// touchStartY: number
// imageCount: number
// currentImageName: string
// init(): void
// getImageElement(index: number): HTMLElement | null
// getImageUrl(index: number): string
// getImageName(index: number): string
// openLb(index?: number): void
// closeLb(): void
// showLb(index: number): void
// nextLb(): void
// prevLb(): void
// normalizeIndex(index: number): number
// updateLightboxImage(): void
// toggleZoom(): void
// scrollThumbIntoView(): void
// preloadAround(): void
// initThumbLazyLoading(): void
// handleTouchStart(event: TouchEvent): void
// handleTouchEnd(event: TouchEvent): void
// }
document.addEventListener("alpine:init", () => {
Alpine.data("articleView", () => ({
lbOpen: false,
lbIndex: 0,
lbZoomed: false,
touchStartX: 0,
touchStartY: 0,
imageCount: 0,
currentImageName: "",
init() {
this.imageCount = document.querySelectorAll(
"#article-gallery [data-image-index]"
).length
this.initThumbLazyLoading()
},
getImageElement(index: number) {
return document.querySelector<HTMLElement>(
`#article-gallery [data-image-index="${index}"]`
)
},
getImageUrl(index: number) {
return this.getImageElement(index)?.dataset.imageUrl || ""
},
getImageName(index: number) {
return this.getImageElement(index)?.dataset.imageName || ""
},
openLb(index = 0) {
if (!this.imageCount) return
this.lbIndex = this.normalizeIndex(index)
this.lbZoomed = false
this.lbOpen = true
document.body.style.overflow = "hidden"
this.updateLightboxImage()
requestAnimationFrame(() => {
this.scrollThumbIntoView()
this.preloadAround()
})
},
closeLb() {
this.lbOpen = false
this.lbZoomed = false
document.body.style.overflow = ""
},
showLb(index: number) {
if (!this.imageCount) return
this.lbIndex = this.normalizeIndex(index)
this.lbZoomed = false
this.updateLightboxImage()
const main = document.getElementById("lb-main")
if (main) {
main.scrollTop = 0
}
requestAnimationFrame(() => {
this.scrollThumbIntoView()
this.preloadAround()
})
},
nextLb() {
this.showLb(this.lbIndex + 1)
},
prevLb() {
this.showLb(this.lbIndex - 1)
},
normalizeIndex(index: number) {
if (!this.imageCount) return 0
return ((index % this.imageCount) + this.imageCount) % this.imageCount
},
updateLightboxImage() {
const image = document.getElementById("lb-image") as HTMLImageElement | null
if (!image) return
const url = this.getImageUrl(this.lbIndex)
const name = this.getImageName(this.lbIndex)
image.src = url
image.alt = name
this.currentImageName = name
},
toggleZoom() {
this.lbZoomed = !this.lbZoomed
const main = document.getElementById("lb-main")
if (main) {
main.scrollTop = 0
}
},
scrollThumbIntoView() {
const thumbs = document.getElementById("lb-thumbs") as HTMLElement | null
if (!thumbs) return
const active = thumbs.querySelector<HTMLElement>(
`[data-lb-index="${this.lbIndex}"]`
)
if (!active) return
const target =
active.offsetTop -
(thumbs.clientHeight - active.clientHeight) / 2
thumbs.scrollTo({
top: Math.max(0, target),
behavior: "smooth",
})
},
preloadAround() {
const indexes = [
this.lbIndex,
this.normalizeIndex(this.lbIndex - 1),
this.normalizeIndex(this.lbIndex + 1),
]
indexes.forEach((index: number) => {
const url = this.getImageUrl(index)
if (!url) return
const image = new Image()
image.decoding = "async"
image.src = url
})
},
// TODO 这是干啥的
initThumbLazyLoading() {
const thumbs = document.querySelectorAll<HTMLElement>(
"#lb-thumbs [data-thumb-url]"
)
if (!thumbs.length) return
if (!("IntersectionObserver" in window)) {
thumbs.forEach((thumb) => {
thumb.style.backgroundImage =
`url("${thumb.dataset.thumbUrl}")`
})
return
}
const observer = new IntersectionObserver(
(entries, obs) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return
const element = entry.target as HTMLElement
const url = element.dataset.thumbUrl
if (url) {
element.style.backgroundImage = `url("${url}")`
}
obs.unobserve(element)
})
},
{
root: document.getElementById("lb-thumbs"),
rootMargin: "300px",
}
)
thumbs.forEach((thumb) => observer.observe(thumb))
},
}))
})
</script>
<style>
[x-cloak] {
display: none !important;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>

View File

@ -1,36 +0,0 @@
---
import { pathHasLocale, getRelativeLocaleUrl } from 'astro:i18n';
// 使用 pathHasLocale 安全判断当前路径是否已包含任何语言前缀(返回 boolean)
const hasLocale = pathHasLocale(Astro.url.pathname);
// 自动生成中文根路径
const cnRootUrl = getRelativeLocaleUrl('cn', '');
---
<script is:inline define:vars={{ hasLocale, cnRootUrl }}>
(() => {
try {
// 当前路径已带有语言前缀(如 /cn/ 或 /en/),直接跳过
if (hasLocale) return;
// 避免重复跳转
if (sessionStorage.getItem('lang-redirect')) return;
// 判定浏览器偏好语言
const langs = navigator.languages || [navigator.language || 'en'];
const isZh = langs.some((l) => l.toLowerCase().startsWith('zh'));
if (!isZh) return;
sessionStorage.setItem('lang-redirect', '1');
// 拼接真实跳转路径
const { pathname, search, hash } = location;
const cleanPath = pathname === '/' ? '' : pathname;
const targetUrl = `${cnRootUrl}${cleanPath.replace(/^\//, '')}${search}${hash}`;
location.replace(targetUrl);
} catch (e) {}
})();
</script>

View File

@ -0,0 +1,33 @@
---
// 大图灯箱右下角的「当前主图的细节图 / 副图」缩略簇,注入 GalleryLightbox 的 details 具名插槽。
// 主图放大(lbZoomed)时整簇隐藏;点其中一张进细节灯箱看大图。
// 走秀与街拍共用,故不放任何页面专有逻辑(只读 lib/galleryDetail.ts 的 currentDetailList())。
interface Props {
/** 副图缩略图比例,与主图一致(后端素材统一 2:3,默认值即可) */
aspect?: "2/3" | "3/4"
}
const { aspect = "2/3" } = Astro.props
// 两个字面量都出现在本文件源码里,保证 Tailwind v4 JIT 能扫描到
const thumbAspect = aspect === "3/4" ? "aspect-[3/4]" : "aspect-[2/3]"
---
<div
id="lb-details"
x-show="!lbZoomed && currentDetailList().length > 0"
x-cloak
class="absolute right-4 sm:right-6 bottom-[72px] z-30 flex flex-col items-end gap-2"
>
<span class="text-[10px] uppercase tracking-[0.22em] text-[var(--c-gray-600)]">Details</span>
<div class="flex max-w-[min(70vw,440px)] gap-2 overflow-x-auto no-scrollbar">
<template x-for="(d, i) in currentDetailList()" :key="d.url">
<button
type="button"
@click.stop="openDetailLbAt(i)"
class={`relative flex-none w-[52px] sm:w-[68px] ${thumbAspect} overflow-hidden border border-black/15 bg-[var(--c-gray-200)] cursor-zoom-in transition-colors hover:border-black`}
:aria-label="`Detail ${i + 1}`"
>
<img :src="d.thumb" :alt="d.name || ''" loading="lazy" decoding="async" class="w-full h-full object-cover" />
</button>
</template>
</div>
</div>

View File

@ -0,0 +1,116 @@
---
// 加载屏:首屏/整页切换时遮盖未渲染内容,避免 FOUC。
// 轻量原则(追求朴实流畅):
// - 只用静态大字 + 小标 + 一条 2px 细线进度(transform/opacity 动画,最便宜);
// - 去掉昂贵的多层 text-shadow 位移动画与外部字体;最短展示时间压缩到 ~350ms,跟手不拖沓。
import { config } from '@/lib/config';
import { getI18n } from '@/lib/i18n'
const { t } = getI18n(Astro)
---
<div id="loading-screen" aria-hidden="true">
<div id="ls-box">
<h1>{config.siteName}</h1>
<p class="ls-sub">{t('loading')}</p>
<div class="ls-bar" aria-hidden="true"></div>
</div>
</div>
<style>
#loading-screen {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #ffffff;
color: #0a0a0a;
transition: opacity 0.4s ease;
}
#loading-screen.is-hidden {
opacity: 0;
pointer-events: none;
}
#loading-screen h1 {
margin: 0;
font-size: clamp(2.2rem, 6vw, 4rem);
font-weight: 900;
line-height: 1;
letter-spacing: -0.02em;
text-transform: uppercase;
}
#loading-screen .ls-sub {
margin: 1.1em 0 0;
font-size: 0.72rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--c-gray-700);
animation: ls-pulse 1.4s ease-in-out infinite;
}
#loading-screen .ls-bar {
margin-top: 2em;
width: min(180px, 60vw);
height: 2px;
background: var(--c-gray-300);
overflow: hidden;
}
#loading-screen .ls-bar::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #0a0a0a;
transform-origin: left center;
animation: ls-bar 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ls-pulse {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
@keyframes ls-bar {
0% { transform: scaleX(0.08); }
45% { transform: scaleX(0.72); }
100% { transform: scaleX(1); }
}
/* 尊重系统"减少动画"偏好 */
@media (prefers-reduced-motion: reduce) {
#loading-screen .ls-sub,
#loading-screen .ls-bar::before {
animation: none;
}
#loading-screen .ls-bar::before { transform: scaleX(1); }
}
</style>
<script>
// load 后淡出;最少展示 350ms 防闪烁,最多 2s 兜底。
(function () {
const el = document.getElementById('loading-screen');
if (!el) return;
const screen = el; // 已收窄为非空;闭包内 TS 不保留对 el 的收窄,故另存一份
var hidden = false;
function hide() {
if (hidden) return;
hidden = true;
screen.classList.add('is-hidden');
setTimeout(function () {
screen.style.display = 'none';
}, 500);
}
var start = Date.now();
function tryHide() {
var waited = Date.now() - start;
if (waited >= 350) hide();
else setTimeout(hide, 350 - waited);
}
if (document.readyState === 'complete') tryHide();
else window.addEventListener('load', tryHide);
setTimeout(hide, 2000);
})();
</script>

View File

@ -0,0 +1,62 @@
---
/**
* REFINE 侧栏的「通用单选筛选分组」——走秀(collection/season/year)与街拍(year/sort/city)
* 只是数组项数不同,结构完全一致。差异通过 groups prop 声明式传入:
* - key: 分组键(同时用于 collapsedGroups[key] 折叠态与 radio name)
* - title: 分组标题
* - options: 选项 [{value, label}]
* - selected: 页面 Alpine.data 中该筛选对应的响应式变量名(如 'selectedCt'),
* 用于 :checked / :class 与点击赋值。
*
* 注意:本组件渲染的是静态 HTML,内部 Alpine 指令(toggleGroup / collapsedGroups /
* loadPage / clearAll / pills)一律引用父级 x-data 的作用域,不自带状态。
* 渲染为「分组列表 + Clear all 按钮」,不含 <aside> 外壳(外壳由各页面提供,
* 以便 runway 在前面插入专属的 Designer/品牌分组)。
*/
interface Option {
value: string | number
label: string
}
interface Group {
key: string
title: string
options: Option[]
selected: string
}
const { groups = [] } = Astro.props as { groups: Group[] }
---
{
groups.map((g) => (
<section class="showsg">
<header class="showsg-h" @click={`toggleGroup('${g.key}')`} >
<span>{g.title}</span>
<span class="showsg-chev" :class={`{'is-collapsed': collapsedGroups.${g.key}}`} >
<svg viewBox="0 0 12 12" width="11" height="11"><path d="M2.5 4.5l3.5 3 3.5-3" stroke="currentColor" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</header>
<div class="showsg-b" x-show={`!collapsedGroups.${g.key}`}>
<ul class="showschecks showschecks--flat">
{g.options.map((o) => (
<li>
<label login-required>
<input
type="radio"
name={g.key}
value={String(o.value)}
:checked={`${g.selected} === '${String(o.value)}'`}
:class={`{'is-checked': ${g.selected} === '${String(o.value)}'}`}
@click.prevent={`${g.selected} = ${g.selected} === '${String(o.value)}' ? '' : '${String(o.value)}'; loadPage(1)`}
/>
<span>{o.label}</span>
</label>
</li>
))}
</ul>
</div>
</section>
))
}
<button login-required class="showsclear" type="button" @click="clearAll()" x-show="pills().length > 0" x-cloak>Clear all ×</button>

Some files were not shown because too many files have changed in this diff Show More