claude-coder 1.8.2 → 1.8.4

package/recipes/backend/manifest.json

@@ -0,0 +1,20 @@
+{
+  "id": "backend",
+  "name": "后端服务",
+  "description": "后端 API 服务开发（RESTful CRUD、认证鉴权、文件服务等）",
+  "base": "base.md",
+  "components": [
+    { "id": "crud-api",     "label": "CRUD API",  "description": "RESTful 增删改查接口 + 分页 + 过滤", "file": "components/crud-api.md",     "default": true },
+    { "id": "auth",         "label": "认证鉴权",  "description": "登录注册、JWT/Session、角色权限",   "file": "components/auth.md",         "default": false },
+    { "id": "file-service", "label": "文件服务",  "description": "文件上传下载、存储、类型校验",      "file": "components/file-service.md", "default": false }
+  ],
+  "test": {
+    "file": "test/api-test.md",
+    "defaultEnabled": true
+  },
+  "defaults": {
+    "components": ["crud-api"],
+    "role": "developer",
+    "test": true
+  }
+}

package/recipes/backend/test/api-test.md

@@ -0,0 +1,25 @@
+# API 测试步骤模板
+
+## 标准测试用例
+
+### 【P0】CRUD 正向流程
+1. POST 创建资源 → 验证 201 + 返回数据
+2. GET 列表 → 验证新数据在列表中
+3. GET 详情 → 验证数据正确
+4. PUT 更新 → 验证数据变更
+5. DELETE 删除 → 验证 GET 返回 404
+
+### 【P0】分页和搜索
+1. 创建多条数据
+2. GET 列表 ?page=1&pageSize=2 → 验证分页字段正确
+3. GET 列表 ?keyword=xxx → 验证过滤结果
+
+### 【P1】参数校验
+1. POST 缺少必填字段 → 验证 400
+2. POST 字段格式错误 → 验证 400
+3. PUT 不存在的 ID → 验证 404
+
+### 【P1】认证鉴权（如适用）
+1. 无 token 访问 → 验证 401
+2. 错误 token → 验证 401
+3. 权限不足 → 验证 403

package/recipes/console/base.md

@@ -0,0 +1,37 @@
+# Console 管理后台 — 基础食谱
+
+## 任务分解模式
+
+管理后台 CRUD 页面按以下标准拆分任务（1 session = 1 task）：
+
+1. **backend**: API 接口层（RESTful CRUD + 分页 + 搜索过滤）
+   - steps 包含：路由定义、Controller、Service、数据模型
+   - 验证：curl 请求返回正确状态码和分页结构
+
+2. **frontend**: 列表页面（表格 + 搜索栏 + 分页组件）
+   - steps 包含：页面组件、数据请求、状态管理
+   - 验证：Playwright snapshot 验证页面元素存在
+
+3. **frontend**: 弹窗/表单（新建 + 编辑弹窗 + 表单校验）
+   - steps 包含：弹窗组件、表单项、校验规则、提交逻辑
+   - 验证：Playwright 点击按钮 → snapshot 验证弹窗打开
+
+4. **fullstack**: 联调（前后端串通 + 错误处理 + loading 状态）
+   - steps 包含：接口联调、错误提示、空状态处理
+   - 验证：Playwright 完整 CRUD 流程
+
+5. **test**: E2E 测试（可选，参考 test/crud-e2e.md）
+
+## 通用规则
+
+- 搜索框 + 表格 + 分页合并为一个 frontend 任务（不要拆太碎）
+- 弹窗 + 表单作为独立 frontend 任务（UI 和逻辑较复杂）
+- 后端 API 作为独立 backend 任务
+- 前后端联调作为 fullstack 任务
+- 每个任务必须有可执行的验证步骤
+
+## 反面案例
+
+- "搜索框"、"表格"、"分页"各拆为独立任务 → 太碎，合并
+- "全部前端"合为一个任务 → 太大（弹窗应独立）
+- 忽略验证步骤 → 每个 task 的 steps 最后一步必须是验证命令

package/recipes/console/components/modal-form.md

@@ -0,0 +1,20 @@
+# 弹窗 + 表单
+
+## 任务分解指导
+弹窗和表单作为独立的 frontend 任务。
+steps 中应包含：弹窗组件 → 表单项 → 校验规则 → 提交 → 关闭 → 列表刷新。
+
+## 实现要点
+- 新建弹窗：表单为空，提交调用 POST API
+- 编辑弹窗：表单回填已有数据，提交调用 PUT API
+- 共用同一个弹窗组件（通过 mode 区分新建/编辑）
+- 表单校验：必填项、格式校验（邮箱、手机号等）、长度限制
+- 提交 loading：防重复提交
+- 提交成功后：关闭弹窗 + 刷新列表 + 提示消息
+- 提交失败：显示错误信息，不关闭弹窗
+
+## 验证策略
+- 点击新建按钮 → snapshot 验证弹窗打开 + 表单元素存在
+- 不填必填项直接提交 → 验证校验提示出现
+- 正确填写并提交 → 验证弹窗关闭 + 列表数据更新
+- 点击编辑 → 验证弹窗打开 + 数据回填

package/recipes/console/components/pagination.md

@@ -0,0 +1,17 @@
+# 分页组件
+
+## 任务分解指导
+分页与表格合并为一个 frontend 任务，不单独拆分。
+steps 中应包含：分页参数 → 分页 UI → 翻页请求 → 总数显示。
+
+## 实现要点
+- 分页模式：offset + limit（如 `?page=1&pageSize=10`）
+- 总数显示：从 API 响应中取 total 字段
+- 默认每页条数：10 条（可配置）
+- 页码变化触发重新请求
+- URL 同步：当前页码反映在 URL query 中（可选）
+
+## 验证策略
+- 验证分页组件渲染（页码、上一页/下一页按钮）
+- 点击第 2 页 → 验证数据变化
+- 验证总数显示正确

package/recipes/console/components/search.md

@@ -0,0 +1,17 @@
+# 搜索组件
+
+## 任务分解指导
+搜索功能通常与列表任务合并为一个 frontend 任务，不单独拆分。
+steps 中应包含：搜索框 UI → 防抖处理 → API 请求参数拼接 → 列表刷新。
+
+## 实现要点
+- 输入防抖 300ms，避免频繁请求
+- 搜索关键词作为 query 参数传给列表 API（如 `?keyword=xxx`）
+- 支持清空搜索恢复全量数据
+- 搜索时显示 loading 状态
+- 如有多个筛选条件，使用表单组合（日期范围、下拉选择、关键词等）
+
+## 验证策略
+- 输入已知关键词 → snapshot 验证列表数据过滤
+- 清空搜索 → 验证恢复全量
+- 快速连续输入 → 验证只发一次请求（防抖生效）

package/recipes/console/components/table-list.md

@@ -0,0 +1,18 @@
+# 数据表格
+
+## 任务分解指导
+表格是列表页的核心，与搜索和分页合并为一个 frontend 任务。
+steps 中应包含：列定义 → 数据请求 → 渲染 → 操作列按钮。
+
+## 实现要点
+- 列定义清晰：字段名、显示名、宽度、对齐方式、渲染方式
+- 操作列：编辑、删除按钮（按业务需求扩展）
+- 空状态：无数据时显示友好提示
+- Loading 状态：请求中显示骨架屏或 spinner
+- 如需行选择：checkbox 列 + 批量操作栏
+- 如需排序：列头排序图标 + API 排序参数
+
+## 验证策略
+- snapshot 验证表格元素存在（table/thead/tbody）
+- 验证至少有 1 行数据（或空状态文案）
+- 验证操作列按钮可点击

package/recipes/console/components/tabs.md

@@ -0,0 +1,14 @@
+# 标签页
+
+## 任务分解指导
+标签页通常作为页面布局的一部分，合并到对应页面的 frontend 任务中。
+
+## 实现要点
+- Tab 切换：点击切换内容区域
+- 路由联动：Tab 与 URL hash/query 同步
+- 懒加载：未激活的 Tab 不渲染内容
+- 徽标/计数：Tab 标题旁显示数量
+
+## 验证策略
+- 点击各 Tab → 验证内容切换
+- 刷新页面 → 验证 Tab 状态保持（路由联动）

package/recipes/console/components/tree.md

@@ -0,0 +1,15 @@
+# 树形结构
+
+## 任务分解指导
+树形通常与列表替换使用，作为独立 frontend 任务。
+
+## 实现要点
+- 树形数据格式：id + parentId 或嵌套 children
+- 展开/折叠：默认展开第一级
+- 懒加载：大数据量时按需加载子节点
+- 操作：点击节点 → 右侧显示详情或触发其他交互
+- 搜索/过滤：树节点过滤 + 高亮匹配节点
+
+## 验证策略
+- snapshot 验证树形结构渲染
+- 点击展开 → 验证子节点显示

package/recipes/console/components/upload.md

@@ -0,0 +1,15 @@
+# 文件上传
+
+## 任务分解指导
+文件上传通常嵌入弹窗表单中，不单独拆任务。如上传逻辑较复杂（多文件、进度条、预览），可拆为独立 frontend 任务。
+
+## 实现要点
+- 文件类型限制：accept 属性 + 前端校验
+- 文件大小限制：前端校验 + 后端校验
+- 上传进度：progress bar（XMLHttpRequest 或 fetch + ReadableStream）
+- 上传成功后：显示文件名/预览图 + 返回 fileId
+- 多文件上传：列表展示已上传文件，支持删除
+
+## 验证策略
+- 选择超限文件 → 验证拒绝提示
+- 上传正确文件 → 验证成功提示 + 预览显示

package/recipes/console/manifest.json

@@ -0,0 +1,24 @@
+{
+  "id": "console",
+  "name": "管理后台",
+  "description": "企业级管理后台页面开发（搜索、列表、分页、弹窗等 CRUD 场景）",
+  "base": "base.md",
+  "components": [
+    { "id": "search",     "label": "搜索框",     "description": "关键词搜索、筛选条件、防抖",         "file": "components/search.md",     "default": true },
+    { "id": "table",      "label": "数据表格",   "description": "列定义、排序、行选择、批量操作",     "file": "components/table-list.md",  "default": true },
+    { "id": "pagination", "label": "分页",       "description": "分页导航、每页条数、总数显示",       "file": "components/pagination.md",  "default": true },
+    { "id": "modal",      "label": "弹窗/表单",  "description": "新建/编辑弹窗、表单校验、提交回填",   "file": "components/modal-form.md",  "default": true },
+    { "id": "upload",     "label": "文件上传",   "description": "文件类型限制、大小限制、上传进度",   "file": "components/upload.md",      "default": false },
+    { "id": "tree",       "label": "树形结构",   "description": "树形数据展示、懒加载、展开折叠",     "file": "components/tree.md",        "default": false },
+    { "id": "tabs",       "label": "标签页",     "description": "多标签切换、路由联动、懒加载",       "file": "components/tabs.md",        "default": false }
+  ],
+  "test": {
+    "file": "test/crud-e2e.md",
+    "defaultEnabled": true
+  },
+  "defaults": {
+    "components": ["search", "table", "pagination", "modal"],
+    "role": "developer",
+    "test": true
+  }
+}

package/recipes/console/test/crud-e2e.md

@@ -0,0 +1,47 @@
+# Console CRUD E2E 测试步骤模板
+
+## 任务分解指导
+E2E 测试作为独立 test 类任务。steps 用优先级标签标记。
+
+## 标准测试用例
+
+### 【P0】列表加载
+1. 导航到列表页
+2. Playwright snapshot 验证表格存在
+3. 验证至少有 1 行数据（或空状态文案）
+
+### 【P0】搜索功能
+1. 在搜索框输入已知关键词
+2. 等待列表更新（waitForLoadState）
+3. snapshot 验证结果数量变化
+
+### 【P1】分页
+1. 点击第 2 页
+2. 验证页码高亮变化
+3. 验证数据不同于第 1 页
+
+### 【P0】新建
+1. 点击新建按钮
+2. snapshot 验证弹窗打开
+3. 填写表单各字段
+4. 提交
+5. 验证弹窗关闭 + 列表出现新数据
+
+### 【P1】编辑
+1. 点击某行编辑按钮
+2. 验证弹窗打开且回填数据正确
+3. 修改某字段，提交
+4. 验证列表数据更新
+
+### 【P1】删除
+1. 点击删除按钮
+2. 验证确认弹窗出现
+3. 确认删除
+4. 验证列表数据减少
+
+### 【P2】表单校验
+1. 打开新建弹窗
+2. 不填必填项直接提交
+3. 验证校验提示出现
+4. 填入格式错误的数据（如邮箱格式）
+5. 验证格式校验提示

package/recipes/h5/base.md

@@ -0,0 +1,26 @@
+# H5 活动页 — 基础食谱
+
+## 任务分解模式
+
+H5 活动页按以下标准拆分：
+
+1. **infra**: 项目脚手架（如未有移动端模板，需要初始化）
+   - steps：脚手架搭建、移动端适配（viewport + rem/vw）、基础样式
+   - 验证：页面在移动端视口正常显示
+
+2. **frontend**: 页面主体（布局 + 核心交互组件）
+   - steps：页面结构、组件集成、数据对接
+   - 验证：Playwright 移动端 viewport snapshot
+
+3. **frontend**: 分享/营销功能（如需要）
+   - steps：分享配置、海报生成、统计埋点
+   - 验证：分享链接正确、海报生成成功
+
+4. **test**: 多端兼容测试
+   - steps：iOS Safari、Android Chrome、微信内置浏览器
+
+## 通用规则
+
+- H5 页面通常较轻量，2-3 个任务即可
+- 优先保证移动端适配（viewport meta + 响应式）
+- 注意性能：图片懒加载、动画性能、首屏加载速度

package/recipes/h5/components/animation.md

@@ -0,0 +1,11 @@
+# 动画效果
+
+## 实现要点
+- 入场动画：元素进入视口时触发（Intersection Observer）
+- 滚动动画：视差滚动、进度条等
+- 交互动效：点击反馈、状态切换过渡
+- 性能：使用 transform/opacity 动画，避免触发 layout
+
+## 验证策略
+- snapshot 验证动画元素存在
+- 滚动页面 → 验证动画触发

package/recipes/h5/components/countdown.md

@@ -0,0 +1,11 @@
+# 倒计时组件
+
+## 实现要点
+- 服务端时间同步（避免客户端时间篡改）
+- 天/时/分/秒 格式化显示
+- 倒计时结束回调（如切换页面状态）
+- requestAnimationFrame 或 setInterval 驱动
+
+## 验证策略
+- snapshot 验证倒计时数字显示
+- 等待数秒 → 验证数字递减

package/recipes/h5/components/share.md

@@ -0,0 +1,11 @@
+# 分享功能
+
+## 实现要点
+- 微信 JS-SDK 分享配置（标题、描述、图片、链接）
+- 浏览器原生 Web Share API 兜底
+- 分享海报生成（html2canvas / canvas 绘制）
+- 分享统计埋点
+
+## 验证策略
+- 验证分享按钮可点击
+- 验证海报生成成功（如适用）

package/recipes/h5/components/swiper.md

@@ -0,0 +1,11 @@
+# 轮播组件
+
+## 实现要点
+- 图片/卡片横向轮播，支持触摸滑动
+- 自动播放 + 手动暂停
+- 指示器（圆点或数字）
+- 图片懒加载，优化首屏性能
+
+## 验证策略
+- snapshot 验证轮播容器和指示器存在
+- 滑动/点击 → 验证切换到下一张

package/recipes/h5/manifest.json

@@ -0,0 +1,21 @@
+{
+  "id": "h5",
+  "name": "H5 活动页",
+  "description": "移动端 H5 活动页面开发（轮播、倒计时、分享、动画等营销场景）",
+  "base": "base.md",
+  "components": [
+    { "id": "swiper",    "label": "轮播",     "description": "图片/卡片轮播、自动播放、指示器", "file": "components/swiper.md",    "default": true },
+    { "id": "countdown", "label": "倒计时",   "description": "活动倒计时、服务端时间同步",     "file": "components/countdown.md", "default": false },
+    { "id": "share",     "label": "分享",     "description": "微信/浏览器分享、海报生成",      "file": "components/share.md",     "default": true },
+    { "id": "animation", "label": "动画效果", "description": "入场动画、滚动动画、交互动效",   "file": "components/animation.md", "default": false }
+  ],
+  "test": {
+    "file": "test/h5-e2e.md",
+    "defaultEnabled": true
+  },
+  "defaults": {
+    "components": ["swiper", "share"],
+    "role": "developer",
+    "test": true
+  }
+}

package/recipes/h5/test/h5-e2e.md

@@ -0,0 +1,20 @@
+# H5 活动页 E2E 测试步骤模板
+
+## 标准测试用例
+
+### 【P0】页面加载
+1. 使用移动端 viewport 导航到页面
+2. snapshot 验证页面主体内容渲染
+3. 验证无 JS 报错（console.error）
+
+### 【P0】核心交互
+1. 操作页面核心功能（如轮播滑动、按钮点击）
+2. 验证交互响应正确
+
+### 【P1】分享功能
+1. 点击分享按钮
+2. 验证分享面板/海报出现
+
+### 【P1】适配验证
+1. 切换不同 viewport（iPhone SE / iPhone 14 / Android）
+2. 验证布局无溢出、元素无遮挡