adspecs 0.1.19 → 0.1.21

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

@@ -1,7 +1,7 @@
 ---
 name: "adspecs-front-spec"
-description: "基于 PRD 文件一次性完成前端交互和 UI 行为语义提取，生成面向产品经理和前端开发的功能规格说明书（UI/交互规格）"
-argument-hint: "指定 PRD 文件路径，如 docs/20-prd/crm/sales-forecast/M06-01_销售预测需求规格说明书.md"
+description: "基于 PRD 文件和系统设计文档一次性完成前端交互和 UI 行为语义提取，生成面向产品经理和前端开发的功能规格说明书（UI/交互规格）"
+argument-hint: "指定 PRD 文件路径和系统设计文档文件路径，如 docs/20-prd/crm/sales-forecast/M06-01_销售预测需求规格说明书.md"
 compatibility: "需要 docs/ 目录体系，含 04-前端功能设计模板.md、项目约定文档、ECP 编码规范"
 metadata:
   author: "qingwen"
@@ -75,7 +75,7 @@ $ARGUMENTS
 - **模板文件**:
   - `.adspecs/templates/04-前端功能设计模板.md` — 功能规格说明书输出模板（8 部分结构：§1 页面菜单路由规划、§2 总体布局、§3~§4 核心功能区域、§5 用户输入、§6 错误处理、§7 状态管理、§8 US→FSD 对齐表）
 - **项目约定**:
-  - `CLAUDE.md` — 项目技术架构、模块结构、前端技术栈（Vue 3 + TypeScript + Element Plus）
+  - 严格遵守`docs\40-project_conventions\frontend-standard\index.md` 约定规范
 
 ## 执行前检查
 
@@ -241,7 +241,7 @@ $ARGUMENTS
 
 1. 读取用户指定的 PRD 文件，重点关注：用户故事（US）、验收场景（AC）、功能清单、状态机、权限矩阵、通知机制、业务规则
 2. 如果 `{DESIGN_DIR}/` 下存在对应的 system-design 文件，一并读取，提取：API 端点清单、错误码定义、枚举值
-3. 读取 `CLAUDE.md` 了解项目模块结构、前端技术栈（Vue 3 + TypeScript + Element Plus）
+3. 读取 `docs\40-project_conventions\frontend-standard\index.md`约定规范
 
 ### 步骤 2：读取模板
 

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

@@ -1,11 +1,11 @@
 ---
 name: "adspecs-front-tasks"
-description: "基于前端设计文档（_前端设计.md），为 ECP 前端功能生成 TDD 就绪的、按依赖排序的 tasks.md 文件"
+description: "基于前端设计文档（_前端设计.md），为前端功能生成 TDD 就绪的、按依赖排序的 tasks.md 文件。支持 Vue + Element Plus / React + Ant Design 技术栈自动检测"
 argument-hint: "指定前端设计文档路径，如 docs/30-system-design/crm/M06-01_销售预测_前端设计.md"
-compatibility: "需要 docs/ 目录体系：docs/30-system-design（前端设计文档）+ .adspecs/templates（05b-前端任务清单模板）+ CLAUDE.md（前端编码规范）"
+compatibility: "需要 docs/ 目录体系：docs/30-system-design（前端设计文档）+ .adspecs/templates（05b-前端任务清单模板）。支持 Vue + Element Plus 或 React + Ant Design 技术栈（自动检测），参考 references/front-demo/.claude/rules 或 references/ant6-front-standard"
 metadata:
   author: "qingwen"
-  source: "基于 adspecs-front-tasks 通用模板 + Vue 3 前端编码规范 + TDD 流程改造"
+  source: "基于 adspecs-front-tasks 通用模板 + 项目技术栈（Vue/React 自动检测）+ TDD 流程改造"
 user-invocable: true
 disable-model-invocation: false
 ---
@@ -74,106 +74,137 @@ $ARGUMENTS
 
 ---
 
-## 前端技术栈与编码规范（任务生成强制校验清单）
-
-> **来源**：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 配合）                                                                             |
+## 技术栈检测（任务生成前置）
+
+> **目的**：确定本项目的前端技术栈，后续所有术语、路径、示例均按检测到的栈展开。
+> **输出变量**：`FRONTEND_STACK`（`vue` | `react`）和 `FRONTEND_PROJECT_DIR`（前端项目根目录名）。
+
+按以下优先级依次尝试，命中任意一级即停止：
+
+| 优先级 | 检测源 | 判定规则 |
+| ------ | ------ | -------- |
+| 1 | `.adspecs/project.json` | 读取 `frontend_stack` 字段（`vue` / `react`）。`/project-init` 在初始化时写入 |
+| 2 | 项目根 `CLAUDE.md` §Frontend | 关键字命中：含 `Vue 3` / `Element Plus` / `Pinia` → `vue`；含 `React` / `Ant Design` / `Zustand` → `react` |
+| 3 | 前端设计文档（`*_前端设计.md`）§1 | 文档开头"技术栈"或"项目路径"段落中声明的框架 |
+| 4 | 项目目录结构启发式 | 存在 `src/views/**/*.vue` → `vue`；存在 `src/pages/**/*.tsx` → `react` |
+| 5 | 回退：询问用户 | 使用 AskUserQuestion 让用户选择 `Vue + Element Plus` 或 `React + Ant Design` |
+
+**`FRONTEND_PROJECT_DIR` 检测**：
+- 优先从 `.adspecs/project.json` 的 `frontend_dir` 字段读取
+- 其次从 `CLAUDE.md` §Frontend 中提取项目根目录名
+- 默认值：`front-demo/`
+
+检测完成后，在内部记录两个变量，后续章节按此展开：
+```
+FRONTEND_STACK = vue | react
+FRONTEND_PROJECT_DIR = {前端项目根目录名}
+```
+
+---
+
+## 前端编码规范（任务生成强制校验清单）
+
+> **来源**：项目 `CLAUDE.md` §Frontend + `.adspecs/templates/05b-前端任务清单模板.md` + 项目技术栈参考（Vue 栈参考 `references/front-demo/.claude/rules/`；React 栈参考 `references/ant6-front-standard/`）。
+> **以下 12 条规则为栈无关原则，在生成每个任务时必须满足，违反任何一条即为不合格任务。**
+> **具体实现方式按 `FRONTEND_STACK` 查 §技术栈映射表 展开。**
+
+| #   | 规则            | 说明（栈无关原则）                                                                                                                                       |
+| --- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 1   | **TypeScript 类型** | 所有组件/Store/API/工具函数有完整类型定义，禁用 `any`。类型定义文件放在 `src/types/{module}/`                                                          |
+| 2   | **组件语法**    | 采用项目约定的组件语法（SFC 单文件组件 / 函数组件 + Hooks），Props 使用类型声明                                                                          |
+| 3   | **UI 组件库**   | 统一使用项目选定的企业级组件库（表格/表单/标签/弹窗/分页等），状态标签使用组件库的颜色语义                                                                |
+| 4   | **状态管理**    | 采用项目选定的状态管理方案，camelCase 命名，状态对齐前端设计文档 §状态管理                                                                                |
+| 5   | **API 调用**    | 统一使用项目封装的 HTTP 客户端（`src/utils/request.ts`），不直接调用底层库。每个 API 模块独立文件放在 `src/api/{module}/`                                 |
+| 6   | **路由配置**    | 层级清晰，页面组件懒加载，路由 meta 含权限标记                                                                                                            |
+| 7   | **错误处理**    | 错误码映射表集中管理在 `src/utils/errorHandler.ts`，展示方式按前端设计（Message/Dialog/字段级三种）。后端返回的业务错误码映射为用户提示文案                |
+| 8   | **状态标签**    | 使用通用状态标签组件，颜色语义严格遵循设计：蓝色=进行中、绿色=终态、红色=驳回/错误、橙色=警告/部分、灰色=草稿/取消/释放                                    |
+| 9   | **表单校验**    | 声明式校验规则，校验文案使用 i18n key 或消息码映射。查询 loading 时禁用其他输入                                                                           |
+| 10  | **乐观锁**      | 更新/撤回/排产确认操作携带版本号字段，冲突时展示友好提示"数据已被他人修改，请刷新后重试"                                                                  |
+| 11  | **i18n 国际化** | 所有用户可见文案使用国际化函数，最少覆盖中/英两种语言                                                                                                     |
+| 12  | **构建质量**    | `npm run build`（含类型检查 + 构建）零错误通过；`npm run lint` 和 `npm run format` 无报错                                                                 |
+
+### 技术栈映射表
+
+> 根据 §技术栈检测 得到的 `FRONTEND_STACK` 选择对应列。未在表中出现的概念（如错误处理、API 封装）两栈相同。
+
+| 概念             | Vue 技术栈 (`FRONTEND_STACK=vue`)                           | React 技术栈 (`FRONTEND_STACK=react`)                         |
+| ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| 框架             | Vue 3.5 + `<script setup lang="ts">`                         | React 19 + 函数组件 + Hooks                                  |
+| 类型             | TypeScript 5.8                                               | TypeScript 6                                                 |
+| UI 库            | Element Plus 2.9（`<el-*>` 前缀）                            | Ant Design 6 + ProComponents（`<a-*>` / `<ProTable>` 等）    |
+| 状态管理         | Pinia 3（`defineStore` setup 语法）                          | Zustand（`create<State>`）                                   |
+| 路由             | vue-router 4（`defineAsyncComponent` 懒加载）                | react-router（`React.lazy` + `Suspense`）                    |
+| i18n             | vue-i18n 11（`$t()` / `useI18n()`）                          | react-i18next（`useTranslation()` / `t()`）                  |
+| 图表             | ECharts 5（按需引入 `echarts/core`）                         | ECharts 5（按需引入 `echarts/core`）                         |
+| 构建             | Vite 6（`vue-tsc --build` 类型检查）                         | Vite 6（`tsc --noEmit` 类型检查）                            |
+| 单元测试         | vitest                                                       | vitest                                                       |
+| 组件测试库       | @vue/test-utils                                              | @testing-library/react                                       |
+| 组件扩展名       | `.vue`                                                       | `.tsx`                                                       |
+| 页面目录         | `src/views/{module}/`                                        | `src/pages/{module}/`                                        |
+| 状态目录         | `src/store/modules/{module}/`                                | `src/stores/{module}/`                                       |
+| API 目录         | `src/api/{module}/`                                          | `src/api/{module}/`                                          |
+| 类型目录         | `src/types/{module}/`                                        | `src/types/{module}/`                                        |
+| 路由目录         | `src/router/modules/{module}.ts`                             | `src/router/{module}.ts`                                     |
+| i18n 目录        | `src/i18n/{locale}/{module}.ts`                              | `src/locales/{locale}/{module}.ts`                           |
+| 通用组件目录     | `src/components/`                                            | `src/components/`                                            |
+| Hooks 目录       | `src/hooks/`                                                 | `src/hooks/`                                                 |
+| 请求封装         | `src/utils/request.ts`                                       | `src/utils/request.ts`                                       |
+| 错误处理         | `src/utils/errorHandler.ts`                                  | `src/utils/errorHandler.ts`                                  |
+| 状态标签组件     | `StatusTag.vue`                                              | `StatusTag.tsx`                                              |
+| 操作按钮组件     | `ActionButtons.vue`                                          | `ActionButtons.tsx`                                          |
+| 测试命令         | `npx vitest run {test-file}`                                 | `npx vitest run {test-file}`                                 |
+| 参考规范         | `references/front-demo/.claude/rules/`                       | `references/ant6-front-standard/`                            |
 
 ### 前端项目路径约定
 
-> 来源：CLAUDE.md §Frontend + `05b-前端任务清单模板.md`
+> 来源：CLAUDE.md §Frontend + `05b-前端任务清单模板.md`。下方目录树按 `FRONTEND_STACK` 展开，`{EXT}` 表示组件扩展名（Vue: `.vue`；React: `.tsx`）。
 
 ```
-ecp-generator-ui-boostrap/                # 前端项目根目录
+{FRONTEND_PROJECT_DIR}/                  # 前端项目根目录
 ├── src/
-│   ├── api/                              # API 接口模块（axios 封装）
-│   │   └── {module}/                     #   按业务模块组织，如 sales-forecast/
-│   │       ├── forecastOrder.ts           #     预测单 CRUD + 业务操作接口
-│   │       └── forecastChangeOrder.ts     #     变更单 CRUD + 审批接口
-│   ├── views/                            # 页面组件
+│   ├── api/                              # API 接口模块（HTTP 客户端封装）
+│   │   └── {module}/                     #   按业务模块组织
+│   │       ├── {entity}.ts               #     实体 CRUD + 业务操作接口
+│   │       └── ...
+│   ├── {PAGE_DIR}/                       # 页面组件（Vue: views/；React: pages/）
 │   │   └── {module}/                     #   按业务模块组织
-│   │       ├── ForecastOrderList.vue      #     列表页
-│   │       ├── ForecastOrderEdit.vue      #     创建/编辑页
-│   │       ├── ForecastOrderDetail.vue    #     详情页
-│   │       ├── ForecastOrderOverview.vue  #     概览/图表页
-│   │       ├── ChangeOrderEdit.vue        #     变更单表单页
-│   │       ├── SystemConfig.vue           #     系统配置页
+│   │       ├── {Entity}List{EXT}         #     列表页
+│   │       ├── {Entity}Edit{EXT}         #     创建/编辑页
+│   │       ├── {Entity}Detail{EXT}       #     详情页
+│   │       ├── {Entity}Overview{EXT}     #     概览/图表页
 │   │       ├── components/               #     页面级私有组件
-│   │       │   ├── ForecastOrderForm.vue  #       预测单表单
-│   │       │   ├── ChangeForm.vue        #       变更单表单
-│   │       │   ├── ReplyDialog.vue       #       接收/驳回弹窗
-│   │       │   ├── TransferFoDialog.vue  #       转FO弹窗
-│   │       │   └── OverviewDrillDown.vue #       下钻明细弹窗
+│   │       │   ├── {Entity}Form{EXT}     #       表单组件
+│   │       │   └── ...
 │   │       └── __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 单元测试
+│   │   └── {module}.ts                   #   模块路由定义
+│   ├── {STORE_DIR}/                      # 状态管理（Vue: store/modules/；React: stores/）
+│   │   └── {module}/
+│   │       ├── {entity}Store.ts          #   实体状态 Store
+│   │       └── __tests__/                #   Store 单元测试
 │   ├── components/                       # 全局共享组件
-│   │   ├── StatusTag.vue                 #   状态标签通用组件
-│   │   └── ActionButtons.vue             #   动态操作按钮组
+│   │   ├── StatusTag{EXT}                #   状态标签通用组件
+│   │   └── ActionButtons{EXT}            #   动态操作按钮组
 │   ├── types/                            # TypeScript 类型定义
 │   │   └── {module}/
-│   │       ├── forecastOrder.ts           #   预测单实体类型
-│   │       ├── forecastChangeOrder.ts     #   变更单实体类型
-│   │       ├── enums.ts                   #   枚举（与后端编码一致）
-│   │       └── api.ts                     #   API 请求/响应泛型类型
+│   │       ├── {entity}.ts               #   实体类型 + 枚举
+│   │       ├── enums.ts                  #   枚举（与后端编码一致）
+│   │       └── api.ts                    #   API 请求/响应泛型类型
 │   ├── utils/                            # 工具函数
-│   │   ├── request.ts                    #   axios 实例 + 拦截器
+│   │   ├── request.ts                    #   HTTP 客户端实例 + 拦截器
 │   │   └── errorHandler.ts               #   错误码→用户提示文案映射表
-│   ├── i18n/                             # 国际化
-│   │   ├── zh-CN/
-│   │   │   └── {module}.ts               #   简体中文文案
-│   │   └── en-US/
-│   │       └── {module}.ts               #   英文文案
-│   └── hooks/                            # Composition API 钩子
+│   ├── {I18N_DIR}/                       # 国际化（Vue: i18n/；React: locales/）
+│   │   ├── zh-CN/{module}.ts             #   简体中文文案
+│   │   └── en-US/{module}.ts             #   英文文案
+│   └── hooks/                            # Composition API 钩子 / React Hooks
 │       ├── usePagination.ts              #   分页管理
-│       ├── useForecastOrderForm.ts       #   表单校验+提交
-│       ├── useApsSchedule.ts             #   APS 排产进度查询+超时降级
-│       └── useECharts.ts                 #   图表实例管理
+│       └── ...
 ```
 
 **路径命名约定**：
 
 - 目录名：kebab-case（`sales-forecast`）
-- 文件名：`.vue` 文件 PascalCase（`ForecastOrderList.vue`）、`.ts` 文件 camelCase（`forecastOrder.ts`）
+- 文件名：组件文件 PascalCase（`{Entity}List{EXT}`）、`.ts` 文件 camelCase（`{entity}.ts`）
 - Store 名：`use{Entity}Store.ts` 或 `{entity}Store.ts`
 
 ---
@@ -188,11 +219,15 @@ ecp-generator-ui-boostrap/                # 前端项目根目录
    - 若仍找不到，搜索当前打开文件或上下文中引用的前端设计文档
    - 确认文件存在且可读取
 
-2. **加载 CLAUDE.md**：读取项目根目录下的 `CLAUDE.md`（§Frontend 部分），获取前端技术栈和编码规范
+2. **检测技术栈**：按 §技术栈检测 的 5 级回退链确定 `FRONTEND_STACK` 和 `FRONTEND_PROJECT_DIR`，后续所有术语、路径、示例均按此展开
 
-3. **定位任务模板**：读取 `.adspecs/templates/05b-前端任务清单模板.md` 作为输出结构参考
+3. **加载编码规范参考**：根据 `FRONTEND_STACK` 加载对应规范目录：
+   - Vue 栈：`references/front-demo/.claude/rules/`
+   - React 栈：`references/ant6-front-standard/`
 
-4. **可选加载后端设计文档**：若存在同模块的 `_system-design.md`，作为 API 端点清单和错误码的补充参考
+4. **定位任务模板**：读取 `.adspecs/templates/05b-前端任务清单模板.md` 作为输出结构参考
+
+5. **可选加载后端设计文档**：若存在同模块的 `_system-design.md`，作为 API 端点清单和错误码的补充参考
 
 ### 2. 提取前端设计文档信息
 
@@ -226,7 +261,7 @@ ecp-generator-ui-boostrap/                # 前端项目根目录
 
 | 提取项       | 来源                                        | 用途                        |
 | ------------ | ------------------------------------------- | --------------------------- |
-| 表单字段清单 | 每个表单输入控件的字段名/类型/必填/校验规则 | 生成 `<el-form>` rules 校验 |
+| 表单字段清单 | 每个表单输入控件的字段名/类型/必填/校验规则 | 生成表单组件声明式校验规则 |
 | 交互反馈     | CTCT 自动回填/MOQ 警告/提前期拦截           | 生成 Hook 交互逻辑          |
 
 #### 2.5 从 §错误处理提取：错误码映射
@@ -236,12 +271,12 @@ ecp-generator-ui-boostrap/                # 前端项目根目录
 | 错误码映射表 | 错误码 → 用户提示文案 → 展示方式（Message/Dialog/字段级） | 生成 `errorHandler.ts` 任务 |
 | 错误展示方式 | Message 提示/Dialog 拦截/字段级错误                       | 生成错误处理 Hook           |
 
-#### 2.6 从 §状态管理提取：Pinia Store
+#### 2.6 从 §状态管理提取：Store
 
-| 提取项     | 来源                                        | 用途                          |
-| ---------- | ------------------------------------------- | ----------------------------- |
-| Store 定义 | Store 名称 + state 字段 + actions + getters | **每个 Store 独立成一个任务** |
-| 初始值     | 前端设计中的默认值/空值定义                 | Store 初始化代码              |
+| 提取项     | 来源                                             | 用途                          |
+| ---------- | ------------------------------------------------ | ----------------------------- |
+| Store 定义 | Store 名称 + state 字段 + actions + getters/方法 | **每个 Store 独立成一个任务** |
+| 初始值     | 前端设计中的默认值/空值定义                      | Store 初始化代码              |
 
 #### 2.7 从 §US→FSD 对齐表提取：故事映射
 
@@ -336,6 +371,8 @@ ecp-generator-ui-boostrap/                # 前端项目根目录
 
 输出生成的 tasks.md 路径及摘要：
 
+- **检测到的技术栈**：`FRONTEND_STACK`（vue / react）及检测来源
+- **前端项目根目录**：`FRONTEND_PROJECT_DIR`
 - **前端设计文档来源**：使用的 `_前端设计.md` 路径
 - **任务总数**：含各阶段分布
 - **每个用户故事的任务数量**：含 TDD 测试任务/实现任务分别计数
@@ -355,8 +392,8 @@ ecp-generator-ui-boostrap/                # 前端项目根目录
 
 1. **任务必须按用户故事组织**：每个故事独立可测试，支持独立实现
 2. **TDD 严格排序**：每个故事阶段内，vitest 测试任务必须在实现任务之前
-3. **前端编码规范强制遵守**：每个任务描述必须包含正确的 Vue 3/TypeScript/Element Plus 命名和路径
-4. **文件路径精确**：每个任务必须包含从 `ecp-generator-ui-boostrap/src/` 开始的完整文件路径
+3. **前端编码规范强制遵守**：每个任务描述必须包含正确的**项目技术栈**命名和路径（按 §技术栈映射表 展开）
+4. **文件路径精确**：每个任务必须包含从 `{FRONTEND_PROJECT_DIR}/src/` 开始的完整文件路径
 5. **前端设计文档全量覆盖**：所有页面/组件/Store/API/类型/交互都映射到对应任务
 
 ### 检查清单格式（必需）
@@ -379,19 +416,34 @@ ecp-generator-ui-boostrap/                # 前端项目根目录
    - Phase 2（基础设施）：无故事标签
    - Phase 3+（用户故事）：**必须**有故事标签
    - Final Phase（集成收尾）：无故事标签
-6. **描述**：明确操作 + 精确的文件路径（从 `ecp-generator-ui-boostrap/src/` 开始）
+6. **描述**：明确操作 + 精确的文件路径（从 `{FRONTEND_PROJECT_DIR}/src/` 开始）
+
+**正确示例（按 `FRONTEND_STACK` 展开）**：
 
-**正确示例（前端风格）**：
+*Vue 技术栈示例*：
 
 ```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
+      {FRONTEND_PROJECT_DIR}/src/views/sales-forecast/__tests__/ForecastOrderList.spec.ts
+- [ ] T013 [US1] 创建 ForecastOrderList 页面组件（<script setup lang="ts"> + el-table/el-pagination/el-tag），文件：
+      {FRONTEND_PROJECT_DIR}/src/views/sales-forecast/ForecastOrderList.vue
+- [ ] T014 [P] [US1] 创建 forecastOrderApi 接口模块（8 个端点，使用 request.get/post 封装），文件：
+      {FRONTEND_PROJECT_DIR}/src/api/sales-forecast/forecastOrder.ts
+- [ ] T015 [P] [US1] 创建 useForecastOrderList Store（defineStore setup 语法），文件：
+      {FRONTEND_PROJECT_DIR}/src/store/modules/sales-forecast/forecastOrderListStore.ts
+```
+
+*React 技术栈示例*：
+
+```text
+- [ ] T012 [TDD] [US1] 编写 ForecastOrderList 组件渲染测试（列表加载+分页+筛选+状态标签颜色），文件：
+      {FRONTEND_PROJECT_DIR}/src/pages/sales-forecast/__tests__/ForecastOrderList.spec.tsx
+- [ ] T013 [US1] 创建 ForecastOrderList 页面组件（函数组件 + ProTable + Tag/Pagination），文件：
+      {FRONTEND_PROJECT_DIR}/src/pages/sales-forecast/ForecastOrderList.tsx
+- [ ] T014 [P] [US1] 创建 forecastOrderApi 接口模块（8 个端点，使用 request.get/post 封装），文件：
+      {FRONTEND_PROJECT_DIR}/src/api/sales-forecast/forecastOrder.ts
+- [ ] T015 [P] [US1] 创建 useForecastOrderList Store（Zustand create<State>），文件：
+      {FRONTEND_PROJECT_DIR}/src/stores/sales-forecast/forecastOrderListStore.ts
 ```
 
 **错误示例**：
@@ -406,26 +458,27 @@ ecp-generator-ui-boostrap/                # 前端项目根目录
 
 ### 前端 TDD 任务排序规则（每个用户故事阶段内）
 
-> **关键原则**：`test-driven-development` skill 要求 "NO PRODUCTION CODE WITHOUT A FAILING TEST FIRST"。前端使用 **vitest + Vue Test Utils** 实现 TDD。
+> **关键原则**：`test-driven-development` skill 要求 "NO PRODUCTION CODE WITHOUT A FAILING TEST FIRST"。前端使用 **vitest + 项目约定的组件测试库** 实现 TDD。
 
 每个用户故事阶段内的任务遵循严格排序：
 
 ```
 [TDD] Store 单元测试（先写，先失败）  ← 使用 vitest
   ↓
-[TDD] 组件渲染测试（先写，先失败）    ← 使用 @vue/test-utils + vitest
+[TDD] 组件渲染测试（先写，先失败）    ← Vue 栈：@vue/test-utils + vitest
+                                        React 栈：@testing-library/react + vitest
   ↓
 类型定义（interface/enum/types）
   ↓
-API 接口模块（axios 封装函数）
+API 接口模块（HTTP 客户端封装函数）
   ↓
-Pinia Store 实现（defineStore）
+Store 实现（Vue 栈：defineStore；React 栈：Zustand create<State>）
   ↓
 通用组件（StatusTag/ActionButtons）
   ↓
 页面组件（列表/表单/详情/概览）
   ↓
-路由集成（defineAsyncComponent 懒加载）
+路由集成（Vue 栈：defineAsyncComponent 懒加载；React 栈：React.lazy + Suspense）
   ↓
 i18n 文案（中/英双语）
 ```
@@ -439,11 +492,11 @@ i18n 文案（中/英双语）
 **测试工具链**：
 
 ```bash
-# Store 单元测试
-npx vitest run src/store/modules/sales-forecast/__tests__/forecastOrderListStore.spec.ts
+# Store 单元测试（路径按 FRONTEND_STACK 展开：Vue 栈 store/modules/，React 栈 stores/）
+npx vitest run {FRONTEND_PROJECT_DIR}/src/{STORE_DIR}/sales-forecast/__tests__/forecastOrderListStore.spec.ts
 
-# 组件测试
-npx vitest run src/views/sales-forecast/__tests__/ForecastOrderList.spec.ts
+# 组件测试（路径按 FRONTEND_STACK 展开：Vue 栈 views/，React 栈 pages/）
+npx vitest run {FRONTEND_PROJECT_DIR}/src/{PAGE_DIR}/sales-forecast/__tests__/ForecastOrderList.spec.{EXT}
 ```
 
 ### 任务组织方式
@@ -458,7 +511,7 @@ npx vitest run src/views/sales-forecast/__tests__/ForecastOrderList.spec.ts
 每个故事阶段内映射以下前端设计元素：
 
 - 该故事涉及的**页面组件**（§1.1 页面清单 → §3~§N 功能区域）
-- 该故事涉及的**Pinia Store**（§状态管理）
+- 该故事涉及的**状态管理 Store**（§状态管理）
 - 该故事涉及的**API 模块**（§1.3 调用约定）
 - 该故事涉及的**交互逻辑**（§关键交互说明）
 - 该故事涉及的**错误处理**（§错误处理映射表）
@@ -475,7 +528,7 @@ npx vitest run src/views/sales-forecast/__tests__/ForecastOrderList.spec.ts
 - 每个 API 模块独立成一个任务（如 `forecastOrderApi.ts` / `forecastChangeOrderApi.ts`）
 - 类型与后端 DTO/Ro 对齐，枚举值与后端枚举编码一致
 
-#### 基于 Pinia Store（前端设计 §状态管理）
+#### 基于状态管理 Store（前端设计 §状态管理）
 
 - 每个 Store 独立成一个任务
 - Store 命名跟随前端设计文档的 §状态管理定义
@@ -488,71 +541,41 @@ npx vitest run src/views/sales-forecast/__tests__/ForecastOrderList.spec.ts
 
 ### 阶段结构
 
+> 下方为通用阶段模板，`{EXT}` / `{PAGE_DIR}` / `{STORE_DIR}` / `{I18N_DIR}` 均按 §技术栈映射表 展开。
+
 ```
 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 注入 + 错误统一拦截）
+  ├── T001 npm install 依赖就绪（按 FRONTEND_STACK 安装：框架 + UI 库 + 状态管理 + 路由 + i18n + vitest）
+  ├── T002 创建模块目录结构（{PAGE_DIR}/api/{STORE_DIR}/types/router/{I18N_DIR} 对应目录）
+  ├── T003 [P] 创建模块路由配置文件（N 个页面路由 + meta 权限标记）
+  └── T004 [P] 确认 src/utils/request.ts（HTTP 客户端实例 + token 注入 + 错误统一拦截）
 
 Phase 2: 基础设施（阻塞性前置 — 所有页面依赖）
   ├── 类型定义（可并行 [P]）
-  │   ├── forecastOrder.ts（实体接口 + 枚举）
-  │   ├── forecastChangeOrder.ts（快照+变更字段）
-  │   ├── enums.ts（5 个枚举与后端编码一致）
+  │   ├── {entity}.ts（实体接口 + 枚举）
+  │   ├── enums.ts（与后端编码一致）
   │   └── api.ts（PaginationRequest<T>/ResponseData<T>/RequestData<T> 泛型）
   ├── API 模块（可并行 [P]）
-  │   ├── forecastOrderApi.ts（14 个端点）
-  │   └── forecastChangeOrderApi.ts（9 个端点）
+  │   └── {entity}Api.ts（N 个端点）
   ├── 工具函数 + 通用组件（可并行 [P]）
   │   ├── errorHandler.ts（错误码映射表）
-  │   ├── StatusTag.vue（通用状态标签）
-  │   ├── ActionButtons.vue（动态操作按钮组）
+  │   ├── StatusTag{EXT}（通用状态标签）
+  │   ├── ActionButtons{EXT}（动态操作按钮组）
   │   └── 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天数配置+风险提示）
+Phase 3+: 每个用户故事一个阶段（P1→P2 顺序）
+  ├── [TDD] Store 单元测试 + 组件渲染测试
+  ├── 状态管理 Store 实现
+  ├── 页面组件 + 子组件（表单/弹窗/表格）
+  └── 模块路由追加
 
 Final Phase: 集成与收尾
-  ├── E2E 端到端测试（创建→提交→接收→转FO 全流程）
+  ├── E2E 端到端测试（核心业务流程）
   ├── 路由守卫完善（角色→菜单可见性+路由访问控制）
   ├── i18n 文案（zh-CN + en-US 两种语言）
   ├── 前端编码规范 12 条合规检查
   ├── 性能优化（路由懒加载/图表按需引入/API 防抖/乐观锁重试）
-  ├── npm run build 构建验证（vue-tsc + vite build 零错误）
+  ├── npm run build 构建验证（类型检查 + 构建 零错误）
   └── npm run lint + npm run format 代码质量验证
 ```
 
@@ -562,35 +585,52 @@ Final Phase: 集成与收尾
 
 - [ ] 每个用户故事阶段内，至少 1 个 `[TDD]` 任务排在所有实现任务之前
 - [ ] 每个 `[TDD]` 任务描述了明确的测试场景（Store 单元测试 或 组件渲染/交互测试）
-- [ ] 测试工具链使用 **vitest**（Store 测试）和 **Vue Test Utils**（组件测试）
+- [ ] 测试工具链使用 **vitest**（Store 测试）和**项目约定的组件测试库**（Vue 栈：@vue/test-utils；React 栈：@testing-library/react）
 - [ ] 测试任务与实现任务的对应关系清晰（1 个 Store 测试 → 1 个 Store 实现；1 个组件测试 → 1 个页面组件）
 - [ ] tasks.md 包含 TDD 执行指南章节（RED→GREEN→REFACTOR，使用 vitest 命令）
 - [ ] 任务顺序与 `test-driven-development` skill 的流程一致
 
 ### 前端编码规范合规确认
 
-生成 tasks.md 后，必须确认：
+生成 tasks.md 后，必须按 `FRONTEND_STACK` 确认对应检查项（下方列出两栈并列，按实际栈执行对应列）：
+
+**栈无关项（两栈共检）**：
 
-- [ ] 所有组件任务描述包含 `<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
 
+**Vue 栈专属项（`FRONTEND_STACK=vue` 时检查）**：
+
+- [ ] 所有组件任务描述包含 `<script setup lang="ts">` 和 `<el-*>` 组件
+- [ ] 所有 Store 任务描述包含 `defineStore` setup 语法
+- [ ] 所有路由任务使用 `defineAsyncComponent` 懒加载
+- [ ] 表单任务使用 `<el-form>` rules 声明式校验
+- [ ] build 任务包含 `vue-tsc --build` + `vite build`
+
+**React 栈专属项（`FRONTEND_STACK=react` 时检查）**：
+
+- [ ] 所有组件任务描述为函数组件 + Hooks，使用 Ant Design 6 / ProComponents
+- [ ] 所有 Store 任务描述使用 Zustand `create<State>` 语法
+- [ ] 所有路由任务使用 `React.lazy` + `Suspense` 懒加载
+- [ ] 表单任务使用 ProForm / ModalForm / DrawerForm 标准模板
+- [ ] build 任务包含 `tsc --noEmit` + `vite build`
+
+**API 通用项**：
+
+- [ ] 所有 API 任务描述使用项目封装的 HTTP 客户端（非直接 axios/fetch）
+
 ---
 
 ## 完成标准
 
+- [ ] 已检测并记录 `FRONTEND_STACK`（vue / react）和 `FRONTEND_PROJECT_DIR`
 - [ ] tasks.md 已生成，包含所有阶段、TDD 标记、精确前端文件路径
 - [ ] 扩展钩子已根据上述《强制性执行后钩子》的规则派发或跳过
-- [ ] 所有 12 条前端编码规范已通过合规确认
+- [ ] 所有 12 条前端编码规范已通过合规确认（按栈展开）
 - [ ] 所有故事阶段 TDD 就绪（vitest 测试任务在实现任务之前）
 - [ ] 已向用户报告完成情况
 
@@ -605,7 +645,7 @@ Final Phase: 集成与收尾
 | §1.3 前端 API 调用约定 | 认证方式/请求格式/错误处理/乐观锁            | API 模块 + errorHandler   | Phase 2      |
 | §2 总体布局            | 页面布局结构                                 | 布局组件                  | Phase 2      |
 | §3~§N 核心功能区域     | 每个页面的 UI 规格 + 交互流程                | 页面组件 + 子组件 + Store | Phase 3~8    |
-| §用户输入              | 表单字段/校验规则/交互反馈                   | `<el-form>` rules + Hook  | Phase 4, 6   |
+| §用户输入              | 表单字段/校验规则/交互反馈                   | 表单组件声明式校验 + Hook | Phase 4, 6   |
 | §错误处理              | 错误码→用户提示→展示方式映射表               | errorHandler.ts + i18n    | Phase 2, 9   |
-| §状态管理              | Pinia Store 名称/state/actions/getters       | Store 实现                | Phase 3~8    |
+| §状态管理              | Store 名称/state/actions/getters(方法)       | Store 实现                | Phase 3~8    |
 | §US→FSD 对齐表         | US ID → 功能 → 组件/Store/API 文件           | 任务完整性验证 + 故事分组 | 全局         |