adspecs 0.1.12

package/skills/adspecs-front-tasks/SKILL.md

@@ -0,0 +1,611 @@
+---
+name: "adspecs-front-tasks"
+description: "基于前端设计文档（_前端设计.md），为 ECP 前端功能生成 TDD 就绪的、按依赖排序的 tasks.md 文件"
+argument-hint: "指定前端设计文档路径，如 docs/30-system-design/crm/M06-01_销售预测_前端设计.md"
+compatibility: "需要 docs/ 目录体系：docs/30-system-design（前端设计文档）+ .adspecs/templates（05b-前端任务清单模板）+ CLAUDE.md（前端编码规范）"
+metadata:
+  author: "qingwen"
+  source: "基于 adspecs-front-tasks 通用模板 + Vue 3 前端编码规范 + TDD 流程改造"
+user-invocable: true
+disable-model-invocation: false
+---
+
+## 用户输入
+
+```text
+$ARGUMENTS
+```
+
+在处理之前**必须**考虑用户输入（若不为空）。用户输入应为**前端设计文档的路径**（如 `docs/30-system-design/crm/M06-01_销售预测_前端设计.md`），若为空则尝试从上下文推导。
+
+## 路径配置加载
+
+在开始执行之前，先确定输入/输出目录：
+
+1. 检查项目根目录是否存在 `.adspecs/paths.json`
+2. 如果存在，读取其中的 `paths` 对象，提取本技能需要的配置键
+3. 如果不存在或配置键缺失，使用下方表格中的默认值
+
+| 配置键       | 默认值                  | 用途                                       |
+| ------------ | ----------------------- | ------------------------------------------ |
+| `design_dir` | `docs/30-system-design` | 前端设计文档目录（输入）和任务清单输出目录 |
+
+将解析后的路径记为 `DESIGN_DIR`，后续步骤中引用此变量而非硬编码路径。
+
+## 执行前检查
+
+**检查扩展钩子（任务生成前）**：
+
+- 检查项目根目录下是否存在 `.adspecs/extensions.yml` 文件。
+- 如果存在，读取该文件并查找 `hooks.before_tasks` 键下的条目。
+- 如果 YAML 无法解析或无效，则静默跳过钩子检查并继续正常流程。
+- 过滤掉 `enabled` 显式为 `false` 的钩子。将没有 `enabled` 字段的钩子默认为启用状态。
+- 对于每个剩余的钩子，**不要**尝试解释或评估钩子的 `condition` 表达式：
+  - 如果钩子没有 `condition` 字段，或该字段为 null/空，则视为可执行钩子。
+  - 如果钩子定义了非空的 `condition`，则跳过该钩子，将条件评估交由 HookExecutor 实现处理。
+- 从钩子命令名称构建斜杠命令时，将点号（`.`）替换为连字符（`-`）。例如，`adspecs.git.commit` → `/adspecs-git-commit`。
+- 对于每个可执行钩子，根据其 `optional` 标志输出以下内容：
+  - **可选钩子**（`optional: true`）：
+
+    ```
+    ## 扩展钩子
+
+    **可选前置钩子**：{extension}
+    命令：`/{command}`
+    描述：{description}
+
+    提示：{prompt}
+    执行方式：`/{command}`
+    ```
+
+  - **强制钩子**（`optional: false`）：
+
+    ```
+    ## 扩展钩子
+
+    **自动前置钩子**：{extension}
+    正在执行：`/{command}`
+    EXECUTE_COMMAND: {command}
+
+    等待钩子命令执行结果后再继续进入大纲阶段。
+    ```
+
+- 如果没有注册任何钩子，或 `.adspecs/extensions.yml` 不存在，则静默跳过。
+
+---
+
+## 前端技术栈与编码规范（任务生成强制校验清单）
+
+> **来源**：CLAUDE.md §"Frontend (`ecp-generator-ui-boostrap/`)" + 前端任务清单模板 §前端编码规范检查清单。
+> **以下 12 条规则在生成每个任务时必须满足，违反任何一条即为不合格任务。**
+
+| #   | 规则                  | 说明                                                                                                                                                          |
+| --- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 1   | **TypeScript 类型**   | 所有组件/Store/API/工具函数有完整类型定义，禁用 `any`。类型定义文件放在 `src/types/{module}/`                                                                 |
+| 2   | **Vue SFC 语法**      | 统一使用 `<script setup lang="ts">` 语法，Props/Emits 使用类型声明                                                                                            |
+| 3   | **Element Plus 组件** | 统一使用 `<el-*>` 组件（`<el-table>`、`<el-form>`、`<el-tag>`、`<el-pagination>`、`<el-dialog>` 等），状态标签使用 `<el-tag>` 的颜色语义                      |
+| 4   | **Pinia Store**       | `defineStore` 使用 setup 语法，camelCase 命名（如 `useForecastOrderList`），状态对齐前端设计文档 §状态管理                                                    |
+| 5   | **API 调用**          | 统一使用 `src/utils/request.ts` 的 `request.get`/`request.post` 封装，不直接调用 axios。每个 API 模块独立文件放在 `src/api/{module}/`                         |
+| 6   | **路由配置**          | 层级清晰，页面组件使用 `defineAsyncComponent` 懒加载，路由 meta 含权限标记。路由模块文件放在 `src/router/modules/{module}.ts`                                 |
+| 7   | **错误处理**          | 错误码映射表集中管理在 `src/utils/errorHandler.ts`，展示方式按前端设计（Message/Dialog/字段级三种）。后端返回的业务错误码（`3103_xxx_xxx`）映射为用户提示文案 |
+| 8   | **状态标签**          | 使用通用 `StatusTag.vue` 组件，颜色语义严格遵循设计：蓝色=进行中、绿色=终态、红色=驳回/错误、橙色=警告/部分、灰色=草稿/取消/释放                              |
+| 9   | **表单校验**          | `<el-form>` rules 声明式校验，校验文案使用 i18n key（`$t('xxx')`）或消息码映射。CTCT 查询 loading 时禁用其他输入                                              |
+| 10  | **乐观锁**            | 更新/撤回/排产确认操作携带 versionNum 字段，冲突时展示友好提示"数据已被他人修改，请刷新后重试"                                                                |
+| 11  | **i18n 国际化**       | 所有用户可见文案使用 `$t()` 或 `useI18n()`，最少覆盖中/英两种语言。文案文件放在 `src/i18n/{locale}/{module}.ts`                                               |
+| 12  | **构建质量**          | `npm run build`（含 `vue-tsc --build` 类型检查 + `vite build`）零错误通过；`npm run lint` 和 `npm run format` 无报错                                          |
+
+### 前端技术栈速查
+
+| 技术         | 版本                  | 用途                                                                                                                      |
+| ------------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| Vue          | 3.5 + Composition API | 核心框架，`<script setup lang="ts">` 语法                                                                                 |
+| TypeScript   | 5.8                   | 全局类型安全                                                                                                              |
+| Element Plus | 2.9                   | UI 组件库（el-table, el-form, el-tag, el-dialog, el-button, el-input, el-select, el-date-picker, el-pagination, el-tabs） |
+| Pinia        | 3                     | 状态管理（`defineStore` setup 语法）                                                                                      |
+| vue-router   | 4                     | 动态路由（`defineAsyncComponent` 懒加载 + meta 权限）                                                                     |
+| vue-i18n     | 11                    | 国际化（最少中/英双语）                                                                                                   |
+| ECharts      | 5                     | 概览视图图表（按需引入 `echarts/core`）                                                                                   |
+| Vite         | 6                     | 构建工具                                                                                                                  |
+| vitest       | —                     | 单元测试 + 组件测试（与 Vue Test Utils 配合）                                                                             |
+
+### 前端项目路径约定
+
+> 来源：CLAUDE.md §Frontend + `05b-前端任务清单模板.md`
+
+```
+ecp-generator-ui-boostrap/                # 前端项目根目录
+├── src/
+│   ├── api/                              # API 接口模块（axios 封装）
+│   │   └── {module}/                     #   按业务模块组织，如 sales-forecast/
+│   │       ├── forecastOrder.ts           #     预测单 CRUD + 业务操作接口
+│   │       └── forecastChangeOrder.ts     #     变更单 CRUD + 审批接口
+│   ├── views/                            # 页面组件
+│   │   └── {module}/                     #   按业务模块组织
+│   │       ├── ForecastOrderList.vue      #     列表页
+│   │       ├── ForecastOrderEdit.vue      #     创建/编辑页
+│   │       ├── ForecastOrderDetail.vue    #     详情页
+│   │       ├── ForecastOrderOverview.vue  #     概览/图表页
+│   │       ├── ChangeOrderEdit.vue        #     变更单表单页
+│   │       ├── SystemConfig.vue           #     系统配置页
+│   │       ├── components/               #     页面级私有组件
+│   │       │   ├── ForecastOrderForm.vue  #       预测单表单
+│   │       │   ├── ChangeForm.vue        #       变更单表单
+│   │       │   ├── ReplyDialog.vue       #       接收/驳回弹窗
+│   │       │   ├── TransferFoDialog.vue  #       转FO弹窗
+│   │       │   └── OverviewDrillDown.vue #       下钻明细弹窗
+│   │       └── __tests__/                #     页面组件测试
+│   ├── router/                           # 路由配置
+│   │   └── modules/
+│   │       └── {module}.ts               #   模块路由定义
+│   ├── store/                            # Pinia 状态管理
+│   │   └── modules/
+│   │       └── {module}/                 #
+│   │           ├── forecastOrderListStore.ts    #   列表 Store
+│   │           ├── forecastOrderDetailStore.ts  #   详情 Store
+│   │           ├── forecastOrderFormStore.ts    #   表单 Store
+│   │           ├── changeOrderFormStore.ts      #   变更单表单 Store
+│   │           ├── overviewStore.ts             #   概览 Store
+│   │           └── __tests__/                   #   Store 单元测试
+│   ├── components/                       # 全局共享组件
+│   │   ├── StatusTag.vue                 #   状态标签通用组件
+│   │   └── ActionButtons.vue             #   动态操作按钮组
+│   ├── types/                            # TypeScript 类型定义
+│   │   └── {module}/
+│   │       ├── forecastOrder.ts           #   预测单实体类型
+│   │       ├── forecastChangeOrder.ts     #   变更单实体类型
+│   │       ├── enums.ts                   #   枚举（与后端编码一致）
+│   │       └── api.ts                     #   API 请求/响应泛型类型
+│   ├── utils/                            # 工具函数
+│   │   ├── request.ts                    #   axios 实例 + 拦截器
+│   │   └── errorHandler.ts               #   错误码→用户提示文案映射表
+│   ├── i18n/                             # 国际化
+│   │   ├── zh-CN/
+│   │   │   └── {module}.ts               #   简体中文文案
+│   │   └── en-US/
+│   │       └── {module}.ts               #   英文文案
+│   └── hooks/                            # Composition API 钩子
+│       ├── usePagination.ts              #   分页管理
+│       ├── useForecastOrderForm.ts       #   表单校验+提交
+│       ├── useApsSchedule.ts             #   APS 排产进度查询+超时降级
+│       └── useECharts.ts                 #   图表实例管理
+```
+
+**路径命名约定**：
+
+- 目录名：kebab-case（`sales-forecast`）
+- 文件名：`.vue` 文件 PascalCase（`ForecastOrderList.vue`）、`.ts` 文件 camelCase（`forecastOrder.ts`）
+- Store 名：`use{Entity}Store.ts` 或 `{entity}Store.ts`
+
+---
+
+## 大纲
+
+### 1. 定位前端设计文档
+
+1. **确定前端设计文档路径**：
+   - 从 `$ARGUMENTS` 获取前端设计文档路径（如 `{DESIGN_DIR}/crm/M06-01_销售预测_前端设计.md`）
+   - 若 `$ARGUMENTS` 为空，搜索 `{DESIGN_DIR}/{crm|mom}/` 下最新修改的 `*_前端设计.md` 文件
+   - 若仍找不到，搜索当前打开文件或上下文中引用的前端设计文档
+   - 确认文件存在且可读取
+
+2. **加载 CLAUDE.md**：读取项目根目录下的 `CLAUDE.md`（§Frontend 部分），获取前端技术栈和编码规范
+
+3. **定位任务模板**：读取 `.adspecs/templates/05b-前端任务清单模板.md` 作为输出结构参考
+
+4. **可选加载后端设计文档**：若存在同模块的 `_system-design.md`，作为 API 端点清单和错误码的补充参考
+
+### 2. 提取前端设计文档信息
+
+> 前端设计文档（由 `/adspecs-front-spec` 产出）聚焦于 UI 交互行为和前端实现细节。按以下顺序提取所有任务生成所需信息。
+
+#### 2.1 从 §1 提取：页面菜单路由规划
+
+| 提取项            | 来源                                             | 用途                                                              |
+| ----------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
+| 页面清单          | §1.1 页面清单表 → 页面名 + 路由 + UserStory 关联 | 生成路由配置任务 + 页面组件任务（Phase 3~8）                      |
+| 关键交互说明      | §1.2 关键交互说明                                | 生成组件交互细节任务（CTCT 自动回填/状态标签/操作按钮动态渲染等） |
+| 前端 API 调用约定 | §1.3 前端 API 调用约定                           | 生成 API 模块任务 + 错误处理任务（Phase 2）                       |
+
+#### 2.2 从 §2 提取：总体布局
+
+| 提取项       | 来源        | 用途                        |
+| ------------ | ----------- | --------------------------- |
+| 页面布局结构 | §2 总体布局 | 生成布局组件任务（Phase 2） |
+
+#### 2.3 从 §3~§N 提取：核心功能区域
+
+> 前端设计文档的每个核心功能区域章节对应一个页面或业务操作。
+
+| 提取项       | 来源                                   | 用途                                       |
+| ------------ | -------------------------------------- | ------------------------------------------ |
+| 页面 UI 规格 | 每个功能区域章节的 UI 描述             | 生成页面组件 + 子组件任务                  |
+| 交互行为     | 用户操作流程描述                       | 生成 Hook 任务（表单校验/分页/排产查询等） |
+| 数据显示规则 | 表格列、状态标签颜色、操作按钮显示规则 | 生成 StatusTag/ActionButtons 使用说明      |
+
+#### 2.4 从 §用户输入提取：表单与校验
+
+| 提取项       | 来源                                        | 用途                        |
+| ------------ | ------------------------------------------- | --------------------------- |
+| 表单字段清单 | 每个表单输入控件的字段名/类型/必填/校验规则 | 生成 `<el-form>` rules 校验 |
+| 交互反馈     | CTCT 自动回填/MOQ 警告/提前期拦截           | 生成 Hook 交互逻辑          |
+
+#### 2.5 从 §错误处理提取：错误码映射
+
+| 提取项       | 来源                                                      | 用途                        |
+| ------------ | --------------------------------------------------------- | --------------------------- |
+| 错误码映射表 | 错误码 → 用户提示文案 → 展示方式（Message/Dialog/字段级） | 生成 `errorHandler.ts` 任务 |
+| 错误展示方式 | Message 提示/Dialog 拦截/字段级错误                       | 生成错误处理 Hook           |
+
+#### 2.6 从 §状态管理提取：Pinia Store
+
+| 提取项     | 来源                                        | 用途                          |
+| ---------- | ------------------------------------------- | ----------------------------- |
+| Store 定义 | Store 名称 + state 字段 + actions + getters | **每个 Store 独立成一个任务** |
+| 初始值     | 前端设计中的默认值/空值定义                 | Store 初始化代码              |
+
+#### 2.7 从 §US→FSD 对齐表提取：故事映射
+
+| 提取项                | 来源                        | 用途               |
+| --------------------- | --------------------------- | ------------------ |
+| 用户故事→文件路径映射 | US ID → 组件/Store/API 文件 | 验证任务覆盖完整性 |
+| 功能条目→文件路径映射 | 功能编号 → 对应文件         | 验证功能覆盖       |
+
+### 3. 执行任务生成工作流
+
+按以下顺序生成任务：
+
+1. **从 §1.1 页面清单提取页面和路由信息**：
+   - 确定模块名（kebab-case，如 `sales-forecast`）
+   - 确定页面数 ─→ Phase 3~8 每个页面至少一个 Phase
+   - 列出所有目标文件路径（组件/Store/API/类型/路由/i18n）
+
+2. **从 §US→FSD 对齐表提取用户故事并按优先级分组**：
+   - P1 故事：US-01~US-05, US-09（核心业务流程）
+   - P2 故事：US-06~US-08, US-10（辅助功能）
+   - 确认故事与页面的映射关系
+
+3. **按前端项目路径 + TDD 顺序组织任务**（详见 §任务生成规则）
+
+4. **生成依赖关系图**
+
+5. **创建并行执行示例**
+
+6. **验证任务完整性**：
+   - 所有页面组件都有对应任务
+   - 所有 Store 都有对应任务
+   - 所有 API 模块都有对应任务
+   - 所有类型定义都有对应任务
+   - 所有 i18n 语言文件都有对应任务
+
+### 4. 生成 front_tasks.md
+
+使用 `.adspecs/templates/05b-前端任务清单模板.md` 作为结构参考。front_tasks.md 必须包含以下全部章节：
+
+1. **功能名称 + 元数据**（来源前端设计文档 §1）
+2. **文件路径速查表**（所有目标文件的绝对路径清单，按前端项目路径组织）
+3. **前端编码规范检查清单**（12 条规则，标记每条是否满足）
+4. **Phase 1**：项目初始化（npm install + 目录结构 + 路由框架 + request.ts 确认）
+5. **Phase 2**：基础设施（类型定义 ×N、API 模块 ×N、错误码映射表、通用组件 ×N、Hooks ×N）
+6. **Phase 3+**：每个用户故事一个阶段（P1→P2 顺序），阶段内按 TDD 顺序排列
+7. **Final Phase**：集成与收尾（E2E 测试、路由守卫、i18n 文案、代码评审、build 验证）
+8. **依赖关系与执行顺序**（阶段依赖 + 并行机会 + TDD 执行顺序）
+9. **并行执行示例**（具体到任务 ID 的并行策略）
+10. **实现策略**（MVP 范围 = P1 页面，增量交付路径）
+
+---
+
+## 强制性执行后钩子
+
+**在向用户报告完成之前，必须完成此部分。**
+
+检查项目根目录下是否存在 `.adspecs/extensions.yml` 文件。
+
+- 如果不存在，或 `hooks.after_tasks` 下没有注册任何钩子，则跳到《完成报告》。
+- 如果存在，读取该文件并查找 `hooks.after_tasks` 键下的条目。
+- 如果 YAML 无法解析或无效，则静默跳过钩子检查并继续到《完成报告》。
+- 过滤掉 `enabled` 显式为 `false` 的钩子。将没有 `enabled` 字段的钩子默认为启用状态。
+- 对于每个剩余的钩子，**不要**尝试解释或评估钩子的 `condition` 表达式：
+  - 如果钩子没有 `condition` 字段，或该字段为 null/空，则视为可执行钩子。
+  - 如果钩子定义了非空的 `condition`，则跳过该钩子，将条件评估交由 HookExecutor 实现处理。
+- 从钩子命令名称构建斜杠命令时，将点号（`.`）替换为连字符（`-`）。例如，`adspecs.git.commit` → `/adspecs-git-commit`。
+- 对于每个可执行钩子，根据其 `optional` 标志输出以下内容：
+  - **强制钩子**（`optional: false`）——**对于每个强制钩子，必须输出 `EXECUTE_COMMAND:`**：
+
+    ```
+    ## 扩展钩子
+
+    **自动钩子**：{extension}
+    正在执行：`/{command}`
+    EXECUTE_COMMAND: {command}
+    ```
+
+  - **可选钩子**（`optional: true`）：
+
+    ```
+    ## 扩展钩子
+
+    **可选钩子**：{extension}
+    命令：`/{command}`
+    描述：{description}
+
+    提示：{prompt}
+    执行方式：`/{command}`
+    ```
+
+## 完成报告
+
+输出生成的 tasks.md 路径及摘要：
+
+- **前端设计文档来源**：使用的 `_前端设计.md` 路径
+- **任务总数**：含各阶段分布
+- **每个用户故事的任务数量**：含 TDD 测试任务/实现任务分别计数
+- **文件覆盖**：类型 ×N, API 模块 ×N, Store ×N, 页面组件 ×N, 子组件 ×N, Hook ×N, 路由 ×1, i18n ×至少2, 工具函数 ×N
+- **前端编码规范检查结果**：12 条规则逐条确认通过
+- **TDD 就绪确认**：每个故事阶段内 vitest 测试任务均在实现任务之前
+- **识别到的并行执行机会**：标注可并行的任务数
+- **每个故事的独立测试标准**：从前端设计文档验收条件提取
+- **建议的 MVP 范围**：P1 页面（列表/创建编辑/详情/变更单）
+- **格式验证**：确认所有任务遵循 `[TaskID] [P?] [TDD?] [Story?] 描述 + 文件路径` 格式
+
+---
+
+## 任务生成规则
+
+### 关键约束
+
+1. **任务必须按用户故事组织**：每个故事独立可测试，支持独立实现
+2. **TDD 严格排序**：每个故事阶段内，vitest 测试任务必须在实现任务之前
+3. **前端编码规范强制遵守**：每个任务描述必须包含正确的 Vue 3/TypeScript/Element Plus 命名和路径
+4. **文件路径精确**：每个任务必须包含从 `ecp-generator-ui-boostrap/src/` 开始的完整文件路径
+5. **前端设计文档全量覆盖**：所有页面/组件/Store/API/类型/交互都映射到对应任务
+
+### 检查清单格式（必需）
+
+每个任务必须严格遵循以下格式：
+
+```text
+- [ ] [TaskID] [P?] [TDD?] [Story?] 包含精确文件路径的描述
+```
+
+**格式组成**：
+
+1. **复选框**：始终以 `- [ ]`（markdown 复选框）开头
+2. **任务 ID**：全局递增的顺序编号（T001, T002, T003...）
+3. **[P] 标记**：仅当任务可并行执行时添加（操作不同文件、不依赖未完成的任务）
+4. **[TDD] 标记**：仅当任务是测试任务时添加（Store 单元测试 / 组件测试），**必须在同故事的实现任务之前**
+5. **[Story] 标签**：
+   - 格式：[US1], [US2], [US3]...（对应前端设计文档 §US→FSD 对齐表中的用户故事编号）
+   - Phase 1（项目初始化）：无故事标签
+   - Phase 2（基础设施）：无故事标签
+   - Phase 3+（用户故事）：**必须**有故事标签
+   - Final Phase（集成收尾）：无故事标签
+6. **描述**：明确操作 + 精确的文件路径（从 `ecp-generator-ui-boostrap/src/` 开始）
+
+**正确示例（前端风格）**：
+
+```text
+- [ ] T012 [TDD] [US1] 编写 ForecastOrderList 组件渲染测试（列表加载+分页+筛选+状态标签颜色），文件：
+      ecp-generator-ui-boostrap/src/views/sales-forecast/__tests__/ForecastOrderList.spec.ts
+- [ ] T013 [US1] 创建 ForecastOrderList 页面组件（搜索筛选区+操作按钮+数据表格+状态标签+操作列+分页条），文件：
+      ecp-generator-ui-boostrap/src/views/sales-forecast/ForecastOrderList.vue
+- [ ] T014 [P] [US1] 创建 forecastOrderApi 接口模块（getById/findPagination/save/update/delete/submit/withdraw/cancel 共 8 个端点），文件：
+      ecp-generator-ui-boostrap/src/api/sales-forecast/forecastOrder.ts
+- [ ] T015 [P] [US1] 创建 useForecastOrderList Store（list/pagination/filters/loading/selectedRows + fetchList/search/reset），文件：
+      ecp-generator-ui-boostrap/src/store/modules/sales-forecast/forecastOrderListStore.ts
+```
+
+**错误示例**：
+
+```text
+- ❌ 错误：`- [ ] 创建预测单页面`（缺少 TaskID + 文件路径 + Story 标签）
+- ❌ 错误：`T001 [US1] 创建列表页`（缺少复选框 + 精确文件路径）
+- ❌ 错误：`- [ ] T001 [US1] 创建页面`（缺少文件路径）
+- ❌ 错误：`- [ ] T010 [US1] 实现列表页组件`（故事阶段内未先写 [TDD] 测试，违反 TDD 规则）
+- ❌ 错误：`- [ ] T020 [TDD] [US1] 测试列表`（描述模糊，文件路径缺失）
+```
+
+### 前端 TDD 任务排序规则（每个用户故事阶段内）
+
+> **关键原则**：`test-driven-development` skill 要求 "NO PRODUCTION CODE WITHOUT A FAILING TEST FIRST"。前端使用 **vitest + Vue Test Utils** 实现 TDD。
+
+每个用户故事阶段内的任务遵循严格排序：
+
+```
+[TDD] Store 单元测试（先写，先失败）  ← 使用 vitest
+  ↓
+[TDD] 组件渲染测试（先写，先失败）    ← 使用 @vue/test-utils + vitest
+  ↓
+类型定义（interface/enum/types）
+  ↓
+API 接口模块（axios 封装函数）
+  ↓
+Pinia Store 实现（defineStore）
+  ↓
+通用组件（StatusTag/ActionButtons）
+  ↓
+页面组件（列表/表单/详情/概览）
+  ↓
+路由集成（defineAsyncComponent 懒加载）
+  ↓
+i18n 文案（中/英双语）
+```
+
+**测试任务粒度**：
+
+- 每个 Store 至少对应 1 个 Store 单元测试 `[TDD]` 任务（正常 + 异常 + 边界）
+- 每个页面组件至少对应 1 个组件测试 `[TDD]` 任务（渲染 + 交互 + 错误状态）
+- 测试任务标记 `[TDD]`，与 `[P]` 可共存（如不同 Store 的测试可并行编写）
+
+**测试工具链**：
+
+```bash
+# Store 单元测试
+npx vitest run src/store/modules/sales-forecast/__tests__/forecastOrderListStore.spec.ts
+
+# 组件测试
+npx vitest run src/views/sales-forecast/__tests__/ForecastOrderList.spec.ts
+```
+
+### 任务组织方式
+
+#### 基于用户故事（前端设计 §US→FSD 对齐表）——主要组织方式
+
+每个用户故事按故事优先级（P1 → P2）各占一个阶段：
+
+- P1 页面可以并行开发（不同的页面组件、不同的 Store）
+- P2 页面通常可独立于 P1 进行
+
+每个故事阶段内映射以下前端设计元素：
+
+- 该故事涉及的**页面组件**（§1.1 页面清单 → §3~§N 功能区域）
+- 该故事涉及的**Pinia Store**（§状态管理）
+- 该故事涉及的**API 模块**（§1.3 调用约定）
+- 该故事涉及的**交互逻辑**（§关键交互说明）
+- 该故事涉及的**错误处理**（§错误处理映射表）
+
+#### 基于页面与路由（前端设计 §1）
+
+- 每个页面独立成一个或多个组件任务
+- 路由配置统一在 Phase 1 创建，Phase 3~8 逐步追加路由条目
+- 子组件（表单/弹窗/表格）可在页面任务中一并描述，或独立成任务（复杂时）
+
+#### 基于类型与 API（前端设计 §1.3 + §状态管理）
+
+- **类型定义全部集中在 Phase 2**，所有后续 Phase 依赖之
+- 每个 API 模块独立成一个任务（如 `forecastOrderApi.ts` / `forecastChangeOrderApi.ts`）
+- 类型与后端 DTO/Ro 对齐，枚举值与后端枚举编码一致
+
+#### 基于 Pinia Store（前端设计 §状态管理）
+
+- 每个 Store 独立成一个任务
+- Store 命名跟随前端设计文档的 §状态管理定义
+- Store 测试 `[TDD]` 任务在 Store 实现之前
+
+#### 基于通用组件（前端设计 §2 + §组件复用）
+
+- StatusTag、ActionButtons 等全局共享组件放入 Phase 2
+- 页面级私有组件（Form/Dialog/Table）放入各自的故事 Phase
+
+### 阶段结构
+
+```
+Phase 1: 项目初始化
+  ├── T001 npm install 依赖就绪（Element Plus 2.9 + ECharts + Pinia 3 + vue-router 4 + vue-i18n 11 + vitest）
+  ├── T002 创建模块目录结构（views/api/store/types/router/i18n 对应目录）
+  ├── T003 [P] 创建模块路由配置文件（7 个页面路由 + meta 权限标记）
+  └── T004 [P] 确认 src/utils/request.ts（axios 实例 + token 注入 + 错误统一拦截）
+
+Phase 2: 基础设施（阻塞性前置 — 所有页面依赖）
+  ├── 类型定义（可并行 [P]）
+  │   ├── forecastOrder.ts（实体接口 + 枚举）
+  │   ├── forecastChangeOrder.ts（快照+变更字段）
+  │   ├── enums.ts（5 个枚举与后端编码一致）
+  │   └── api.ts（PaginationRequest<T>/ResponseData<T>/RequestData<T> 泛型）
+  ├── API 模块（可并行 [P]）
+  │   ├── forecastOrderApi.ts（14 个端点）
+  │   └── forecastChangeOrderApi.ts（9 个端点）
+  ├── 工具函数 + 通用组件（可并行 [P]）
+  │   ├── errorHandler.ts（错误码映射表）
+  │   ├── StatusTag.vue（通用状态标签）
+  │   ├── ActionButtons.vue（动态操作按钮组）
+  │   └── usePagination.ts（分页管理 Hook）
+
+Phase 3: US-01 预测单列表页 [P1] 🎯 MVP 起点
+  ├── [TDD] 列表 Store 单元测试 + 列表组件渲染测试
+  ├── useForecastOrderList Store
+  └── ForecastOrderList.vue（搜索筛选+表格+分页+操作列）
+
+Phase 4: US-01 预测单创建/编辑页 [P1]
+  ├── [TDD] 表单组件测试（CTCT 回填/保存草稿/提交/校验拦截/MOQ 警告）
+  ├── ForecastOrderForm.vue（表单子组件）
+  ├── ForecastOrderEdit.vue（新建/编辑模式）
+  ├── useForecastOrderFormStore（表单状态管理）
+  └── useForecastOrderForm Hook（校验+提交逻辑）
+
+Phase 5: US-02/03/04/08/09 预测单详情页 [P1 综合]
+  ├── [TDD] 详情组件测试（多状态+操作按钮/接收驳回/转FO/排产进度降级）
+  ├── useForecastOrderDetail Store
+  ├── ForecastOrderDetail.vue（信息卡片+排产进度+变更历史+操作按钮区）
+  ├── ReplyDialog.vue（接收/驳回弹窗）
+  ├── TransferFoDialog.vue（转FO弹窗）
+  └── useApsSchedule Hook（排产进度查询+超时降级）
+
+Phase 6: US-05 变更单新增/编辑页 [P1]
+  ├── [TDD] 变更单组件测试（快照展示/按需填写/校验/审批交互）
+  ├── useChangeOrderForm Store
+  ├── ChangeForm.vue（快照区+变更字段）
+  └── ChangeOrderEdit.vue（新增/编辑模式）
+
+Phase 7: US-06 预测单概览视图 [P2]
+  ├── [TDD] 概览组件测试（维度切换/图表渲染/下钻/导出）
+  ├── useOverview Store
+  ├── ForecastOrderOverview.vue（维度Tab+ECharts图表+聚合表格+导出）
+  ├── OverviewDrillDown.vue（下钻明细弹窗）
+  └── useECharts Hook（图表实例管理）
+
+Phase 8: US-10 系统配置页 [P2]
+  └── SystemConfig.vue（提前期+强制转FO天数配置+风险提示）
+
+Final Phase: 集成与收尾
+  ├── E2E 端到端测试（创建→提交→接收→转FO 全流程）
+  ├── 路由守卫完善（角色→菜单可见性+路由访问控制）
+  ├── i18n 文案（zh-CN + en-US 两种语言）
+  ├── 前端编码规范 12 条合规检查
+  ├── 性能优化（路由懒加载/图表按需引入/API 防抖/乐观锁重试）
+  ├── npm run build 构建验证（vue-tsc + vite build 零错误）
+  └── npm run lint + npm run format 代码质量验证
+```
+
+### 前端 TDD 就绪确认
+
+生成 tasks.md 后，必须确认以下条件：
+
+- [ ] 每个用户故事阶段内，至少 1 个 `[TDD]` 任务排在所有实现任务之前
+- [ ] 每个 `[TDD]` 任务描述了明确的测试场景（Store 单元测试 或 组件渲染/交互测试）
+- [ ] 测试工具链使用 **vitest**（Store 测试）和 **Vue Test Utils**（组件测试）
+- [ ] 测试任务与实现任务的对应关系清晰（1 个 Store 测试 → 1 个 Store 实现；1 个组件测试 → 1 个页面组件）
+- [ ] tasks.md 包含 TDD 执行指南章节（RED→GREEN→REFACTOR，使用 vitest 命令）
+- [ ] 任务顺序与 `test-driven-development` skill 的流程一致
+
+### 前端编码规范合规确认
+
+生成 tasks.md 后，必须确认：
+
+- [ ] 所有组件任务描述包含 `<script setup lang="ts">` 和 `<el-*>` 组件
+- [ ] 所有 Store 任务描述包含 `defineStore` setup 语法
+- [ ] 所有 API 任务描述使用 `request.get`/`request.post`（非直接 axios）
+- [ ] 所有类型文件放在 `src/types/` 下
+- [ ] 所有路由任务使用 `defineAsyncComponent` 懒加载
+- [ ] 错误处理使用 `errorHandler.ts` 集中管理错误码映射
+- [ ] 状态标签颜色遵循设计规范（蓝色进行中/绿色终态/红色驳回/橙色警告/灰色草稿取消）
+- [ ] `<el-form>` 使用 rules 声明式校验
+- [ ] 乐观锁操作描述包含 versionNum 携带和冲突提示
+- [ ] i18n 任务覆盖中/英双语
+- [ ] build 任务包含 `vue-tsc --build` + `vite build`
+- [ ] lint 任务包含 ESLint + Prettier
+
+---
+
+## 完成标准
+
+- [ ] tasks.md 已生成，包含所有阶段、TDD 标记、精确前端文件路径
+- [ ] 扩展钩子已根据上述《强制性执行后钩子》的规则派发或跳过
+- [ ] 所有 12 条前端编码规范已通过合规确认
+- [ ] 所有故事阶段 TDD 就绪（vitest 测试任务在实现任务之前）
+- [ ] 已向用户报告完成情况
+
+---
+
+## 参考：前端设计文档章节 → 任务生成速查表
+
+| 前端设计文档章节       | 提取内容                                     | 生成任务类型              | Phase        |
+| ---------------------- | -------------------------------------------- | ------------------------- | ------------ |
+| §1.1 页面清单          | 7 个页面 + 路由 + UserStory                  | 路由配置 + 页面组件       | Phase 1, 3~8 |
+| §1.2 关键交互说明      | CTCT 自动回填/MOQ 警告/状态标签/按钮动态渲染 | Hook + 组件交互细节       | Phase 3~8    |
+| §1.3 前端 API 调用约定 | 认证方式/请求格式/错误处理/乐观锁            | API 模块 + errorHandler   | Phase 2      |
+| §2 总体布局            | 页面布局结构                                 | 布局组件                  | Phase 2      |
+| §3~§N 核心功能区域     | 每个页面的 UI 规格 + 交互流程                | 页面组件 + 子组件 + Store | Phase 3~8    |
+| §用户输入              | 表单字段/校验规则/交互反馈                   | `<el-form>` rules + Hook  | Phase 4, 6   |
+| §错误处理              | 错误码→用户提示→展示方式映射表               | errorHandler.ts + i18n    | Phase 2, 9   |
+| §状态管理              | Pinia Store 名称/state/actions/getters       | Store 实现                | Phase 3~8    |
+| §US→FSD 对齐表         | US ID → 功能 → 组件/Store/API 文件           | 任务完整性验证 + 故事分组 | 全局         |

package/skills/adspecs-git-commit/SKILL.md

@@ -0,0 +1,53 @@
+---
+name: adspecs-git-commit
+description: Spec Kit 命令完成后自动提交更改
+compatibility: 需要 adspecs 项目结构及 docs/ 目录
+metadata:
+  author: qingwen
+  source: git:commands/adspecs.git.commit.md
+---
+
+# 自动提交更改
+
+在 adspecs 命令完成后自动暂存并提交所有更改。
+
+## 行为
+
+此命令作为钩子在核心命令执行后（或前）被调用。它：
+
+1. 从钩子上下文中确定事件名称（例如，如果作为 `after_specify` 钩子被调用，则事件为 `after_specify`；如果是 `before_plan`，则事件为 `before_plan`）
+2. 检查 `.adspecs/extensions/git/git-config.yml` 中的 `auto_commit` 部分
+3. 查找特定事件键以查看自动提交是否启用
+4. 如果不存在事件特定键，回退到 `auto_commit.default`
+5. 如果配置了，使用每个命令的 `message`，否则使用默认消息
+6. 如果已启用且有未提交的更改，运行 `git add .` + `git commit`
+
+## 执行
+
+从触发此命令的钩子确定事件名称，然后运行脚本：
+
+- **Bash**: `.adspecs/extensions/git/scripts/bash/auto-commit.sh <event_name>`
+- **PowerShell**: `.adspecs/extensions/git/scripts/powershell/auto-commit.ps1 <event_name>`
+
+将 `<event_name>` 替换为实际的钩子事件（例如 `after_specify`、`before_plan`、`after_implement`）。
+
+## 配置
+
+在 `.adspecs/extensions/git/git-config.yml` 中：
+
+```yaml
+auto_commit:
+  default: false # 全局开关 — 设为 true 为所有命令启用
+  after_specify:
+    enabled: true # 按命令覆盖
+    message: "[Spec Kit] 添加规格说明书"
+  after_plan:
+    enabled: false
+    message: "[Spec Kit] 添加实现计划"
+```
+
+## 优雅降级
+
+- 如果 Git 不可用或当前目录不是仓库：跳过并给出警告
+- 如果不存在配置文件：跳过（默认禁用）
+- 如果没有要提交的更改：跳过并给出消息