From d31b42e4c2005292e3734c3bdb772d6f65f90e69 Mon Sep 17 00:00:00 2001 From: carry Date: Mon, 8 Jun 2026 14:53:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20CLAUDE.md=EF=BC=8C?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E6=B5=8B=E8=AF=95=E5=91=BD=E4=BB=A4=E5=92=8C?= =?UTF-8?q?=E6=B6=88=E6=81=AF=E7=BB=93=E6=9E=84=EF=BC=8C=E5=A2=9E=E5=BC=BA?= =?UTF-8?q?=20Skills=20=E7=B3=BB=E7=BB=9F=E6=8F=8F=E8=BF=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CLAUDE.md | 48 ++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 44 insertions(+), 4 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 94f87ef..8f4d49d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -17,8 +17,10 @@ MVP 为纯前端 React 应用，使用 mock 数据演示。无后端、无真实 ```bash npm run dev # Vite 开发服务器 → http://localhost:5173 npm run build # tsc 类型检查 + vite 构建 -npm test # vitest 运行全部测试（17 个，位于 export.test.ts） +npm test # vitest 运行全部测试（26 个，位于 export.test.ts 和 parseSkill.test.ts） +npm run preview # 预览生产构建 npx vitest run src/__tests__/export.test.ts # 运行单个测试文件 +npx vitest run src/__tests__/parseSkill.test.ts ``` ## 架构 @@ -27,7 +29,7 @@ npx vitest run src/__tests__/export.test.ts # 运行单个测试文件 `PromptEnvelope { version, model, messages: Message[] }` — 顶层协议文档。 -`Message { id, role: "system"|"user"|"assistant", segments: Segment[], timestamp }` — 单条聊天消息。 +`Message { id, role: "system"|"user"|"assistant"|"tool", segments: Segment[], timestamp }` — 单条聊天消息。 `Segment` 是基于 `kind` 的可辨识联合类型，共 11 种变体：`text`、`static_var`、`system_prompt`、`memory`、`skills`、`tool_overview`、`tool_call_request`、`tool_call_result`、`document`、`long_text`、`media`。 @@ -35,6 +37,33 @@ npx vitest run src/__tests__/export.test.ts # 运行单个测试文件 ToolItem 有可选 `schema` 字段（JSON Schema 对象），在工具总览面板中可展开查看。 +DocumentSegment 有可选 `parsedContent` 字段，点击「查看解析」可展开 AI 对文档内容的提取结果。 + +### Skills 系统 + +Skills 遵循 Anthropic SKILL.md 规范，实现渐进式披露： + +``` +SKILL.md 文件 (YAML frontmatter + Markdown body) + │ + ├─ parseSkillMarkdown() → ParsedSkill { name, description, body, ... } + │ (src/utils/parseSkill.ts) YAML 通过极简手写解析器提取（不依赖外部库） + │ + ├─ skills-loader.ts → PARSED_SKILLS (Record) + │ (src/data/skills-loader.ts) 通过 Vite ?raw 导入 4 个真实 SKILL.md 文件 + │ + ├─ skills.ts → ALL_SKILLS (Record) + │ (src/data/skills.ts) 8 个内置自定义 skill，用于 Demo C/D/E + │ + └─ UI: SkillsView → L1 名称+描述（始终可见），L2 body（点击展开） +``` + +**两类 skill 数据源：** +- `src/data/skills.ts` — 8 个手写 SkillItem（code-review、deep-research、verify 等），通过 `getSkills(names)` 按名称选取 +- `src/data/skills-loader.ts` — 4 个真实 Anthropic SKILL.md 文件（webapp-testing、pdf、doc-coauthoring、mcp-builder），通过 `parseSkillMarkdown()` 解析，`getRealSkills(names)` 获取 + +**parseSkillMarkdown 测试：** 位于 `src/__tests__/parseSkill.test.ts`，覆盖 YAML 解析、body 提取、必填字段校验、可选字段、统计信息等 7 个用例。 + ### 渲染管线 ``` @@ -72,9 +101,20 @@ SegmentRenderer (按 segment.kind 分发) - `media` 用 `altText` 作为回退文本 - `segmentToText()` 对结构性/tool Segment 返回 `null`——它们在消息级别统一处理 -### Demo 数据 (`src/data/demos.ts`) +### Demo 数据 (`src/data/demos.ts` → `src/data/demos/`) -4 个场景，从 0 开始索引。默认激活索引 3（场景 D——综合场景，覆盖全部 9 种 Segment）。每个场景是一个完整的 `PromptEnvelope`，对话内容为中文。 +6 个场景（A–F），每个场景是一个完整的 `PromptEnvelope`，对话内容为中文。默认激活索引 4（场景 F——真实 Anthropic Skills 加载）。 + +| 索引 | 场景 | 内容 | +|------|--------|---------------------------------------------------| +| 0 | 场景 A | 基础对话 + System Prompt + Memory | +| 1 | 场景 B | 工具调用：请求 → 执行（成功 & 失败） | +| 2 | 场景 C | 文档解析：点击「查看解析」看 AI 如何提取文档内容 | +| 3 | 场景 D | 综合：覆盖全部 11 种 Segment | +| 4 | 场景 F | 真实 Anthropic Skills（SKILL.md 文件加载 + parseSkillMarkdown 解析） | +| 5 | 场景 E | 日志分析：异常检测 + 安全审计 + 性能分析 | + +每个场景文件位于 `src/data/demos/demo-{a..f}.ts`，`demos.ts` 仅做聚合导出。 ### 颜色系统