adspecs 0.1.12

package/.adspecs/templates/05b-/345/211/215/347/253/257/344/273/273/345/212/241/346/270/205/345/215/225/346/250/241/346/235/277.md

@@ -0,0 +1,492 @@
+---
+description: "Vue 3 + Element Plus 前端功能实现的 TDD 任务列表模板"
+---
+
+### 修订记录
+
+| 版本号 | 修订日期 | 修订人 | 修订内容 |
+| ------ | -------- | ------ | -------- |
+| v3.0 | 2026-06-13 | AI | **前端专项改造**：ECP 后端模板 → Vue 3 + Element Plus 前端 TDD 模板。新增前端任务类型速查表（10 种）、前端编码规范检查清单（12 条）、TDD 执行指南（RED→GREEN→REFACTOR）。Phase 1-9 全部替换为 M06-01 销售预测单真实示例（Type/API/Store/View/Component/i18n）。基于 `M06-01_销售预测_前端设计.md` 生成真实前端文件路径 |
+| v2.0 | 2026-06-13 | AI | ECP 平台专项改造：后端 Java Maven 三模块 TDD 模板 |
+| v1.0 | 2026-06-12 | AI | 初始版本 |
+
+# 前端任务清单：[功能名称]
+
+**设计文档来源**：
+- 前端设计文档：`docs/30-system-design/{crm|mom}/[功能名]_前端设计.md`（由 `adspecs-front-spec` 产出）
+- 系统设计文档：`docs/30-system-design/{crm|mom}/[功能名]_system-design.md`（可选，API 端点 + 错误码参考）
+- PRD 文档：`docs/20-prd/{crm|mom}/[模块]/[需求规格说明书].md`（可选，验收场景参考）
+
+**前置条件**：
+- 前端设计文档已由 `/adspecs-front-spec` 产出
+- 前端设计文档包含：§1 页面菜单路由规划、§2 总体布局、§3~§N 核心功能区域、§N+1 用户输入、§N+2 错误处理、§N+3 状态管理、§8 US→FSD 对齐表
+
+**TDD 约定**：先编写组件测试和 Store 单元测试并验证失败，再实施页面组件和 Store 实现。
+
+**组织方式**：任务按用户故事分组，以支持每个故事的独立 TDD 实现。
+
+**项目路径**：`ecp-generator-ui-boostrap/`（Vue 3 + TypeScript 5.8 + Element Plus 2.9 + Vite 6 + Pinia 3）
+
+---
+
+## 任务格式：`- [ ] [TaskID] [P?] [TDD?] [Story?] 描述 + 精确文件路径`
+
+| 元素 | 说明 |
+|------|------|
+| `- [ ]` | Markdown 复选框（始终存在） |
+| `[TaskID]` | 全局递增序号：T001, T002, T003... |
+| `[P]` | 可并行执行标记（操作不同文件，无未完成依赖） |
+| `[TDD]` | 测试任务标记（Store 单元测试 / 组件测试），**必须在同故事实现任务之前完成且验证失败** |
+| `[Story]` | 用户故事标签：[US1], [US2]...。Phase 1/2/Final 无此标签 |
+| 描述 + 文件路径 | 明确操作描述 + 从 `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），文件：
+      ecp-generator-ui-boostrap/src/api/sales-forecast/forecastOrder.ts
+
+❌ 错误：
+- [ ] 创建预测单页面（缺少 TaskID + 文件路径 + Story 标签）
+- T001 [US1] 创建列表页（缺少复选框 + 精确文件路径）
+- [ ] T001 [US1] 创建页面（缺少文件路径）
+- [ ] T010 [US1] 实现列表页组件（故事阶段内未先写 [TDD] 测试，违反 TDD 规则）
+```
+
+---
+
+## 前端项目路径约定
+
+> 来源：CLAUDE.md §Frontend + ecp-generator-ui-boostrap/
+
+```
+ecp-generator-ui-boostrap/                # 前端项目根目录
+├── src/
+│   ├── api/                              # API 接口模块（axios 封装）
+│   │   └── {module}/                     #   按业务模块组织
+│   │       ├── {entity}.ts               #     实体 CRUD 接口
+│   │       └── ...                       #
+│   ├── views/                            # 页面组件
+│   │   └── {module}/                     #   按业务模块组织
+│   │       ├── {page}List.vue            #     列表页
+│   │       ├── {page}Edit.vue            #     创建/编辑页
+│   │       ├── {page}Detail.vue          #     详情页
+│   │       ├── {page}Overview.vue        #     概览/报表页
+│   │       ├── components/               #     页面级私有组件
+│   │       │   ├── {Entity}Form.vue      #       表单组件
+│   │       │   ├── {Entity}Table.vue     #       表格组件
+│   │       │   └── ...                   #
+│   │       └── __tests__/                #     页面组件测试
+│   ├── router/                           # 路由配置
+│   │   └── modules/                      #   按模块拆分路由
+│   │       └── {module}.ts               #     模块路由定义
+│   ├── store/                            # Pinia 状态管理
+│   │   └── modules/                      #   按模块拆分 Store
+│   │       └── {module}/                 #
+│   │           ├── {entity}Store.ts      #     实体状态 Store
+│   │           └── __tests__/            #     Store 单元测试
+│   ├── components/                       # 全局共享组件
+│   │   ├── StatusTag.vue                 #   状态标签通用组件
+│   │   ├── SearchForm.vue                #   通用搜索表单
+│   │   ├── ActionButtons.vue             #   动态操作按钮组
+│   │   └── ...                           #
+│   ├── types/                            # TypeScript 类型定义
+│   │   └── {module}/                     #
+│   │       ├── {entity}.ts               #   实体类型 + 枚举
+│   │       └── api.ts                    #   API 请求/响应类型
+│   ├── utils/                            # 工具函数
+│   │   ├── request.ts                    #   axios 实例 + 拦截器
+│   │   ├── errorHandler.ts              #   错误码→用户提示文案映射
+│   │   └── dateFormat.ts                #   日期格式化工具
+│   ├── i18n/                             # 国际化
+│   │   ├── zh-CN/                        #   简体中文
+│   │   │   └── {module}.ts              #     模块文案
+│   │   └── en-US/                        #   英文
+│   └── hooks/                            # Composition API 钩子
+│       └── use{Feature}.ts              #   可复用业务逻辑钩子
+```
+
+**路径命名约定**：
+- 目录名：kebab-case（`sales-forecast`）
+- 文件名：PascalCase（`.vue`/`.ts`）- `ForecastOrderList.vue`、`forecastOrderApi.ts`
+- Store 名：`use{Entity}Store.ts`
+
+---
+
+## 前端任务类型速查表
+
+| 任务类型 | 框架/规范 | 关键约束 | 文件路径模式 |
+|---------|---------|---------|-------------|
+| **类型定义** | TypeScript interface/enum | 字段对齐后端 DTO/Ro；枚举值与后端一致 | `src/types/{module}/{entity}.ts` |
+| **API 接口模块** | axios + `src/utils/request.ts` | 统一使用 `request.get/post` 封装；请求/响应类型明确 | `src/api/{module}/{entity}.ts` |
+| **Pinia Store** | `defineStore` (setup 语法) | 对齐前端设计 §10 状态管理；camelCase 命名；初始值与设计一致 | `src/store/modules/{module}/{entity}Store.ts` |
+| **列表页组件** | Vue SFC + Element Plus | 含搜索筛选区+数据表格+分页+操作列；状态标签使用 `<el-tag>` | `src/views/{module}/{Entity}List.vue` |
+| **表单页组件** | Vue SFC + Element Plus | 含表单字段+校验规则+提交按钮；校验使用 `<el-form>` rules | `src/views/{module}/{Entity}Edit.vue` |
+| **详情页组件** | Vue SFC + Element Plus | 含信息卡片+子表格+操作按钮区；操作按钮按状态+角色动态显示 | `src/views/{module}/{Entity}Detail.vue` |
+| **图表/概览组件** | ECharts + Element Plus | 图表按维度切换；下钻交互；导出功能 | `src/views/{module}/{Entity}Overview.vue` |
+| **路由配置** | vue-router 4 动态路由 | 层级清晰；权限 guard；懒加载 `defineAsyncComponent` | `src/router/modules/{module}.ts` |
+| **i18n 文案** | vue-i18n | 消息码文案从前端设计 §9 错误处理表提取；最少中/英两种语言 | `src/i18n/{locale}/{module}.ts` |
+| **Composition Hook** | Vue 3 Composition API | 提取可复用逻辑（分页/筛选/表单校验/乐观锁冲突处理） | `src/hooks/use{Feature}.ts` |
+
+---
+
+## Phase 1：项目初始化
+
+**目的**：安装依赖、配置路由框架、创建基础目录结构
+
+- [ ] T001 确保项目依赖就绪（`npm install`），包含 Element Plus 2.9 + ECharts + Pinia 3 + vue-router 4 + vue-i18n 11
+- [ ] T002 创建模块目录结构 `src/views/sales-forecast/`、`src/api/sales-forecast/`、`src/store/modules/sales-forecast/`、`src/types/sales-forecast/`、`src/router/modules/sales-forecast.ts`
+- [ ] T003 创建模块路由配置文件，定义 7 个页面路由（含 meta 权限标记），文件：
+      `ecp-generator-ui-boostrap/src/router/modules/sales-forecast.ts`
+- [ ] T004 [P] 创建/确认 `src/utils/request.ts`（axios 实例 + 拦截器，含 `getVersionTypeApiUrl`、token 注入、错误统一处理）
+
+**检查点**：`npm run dev` 可启动，路由骨架就绪
+
+---
+
+## Phase 2：基础设施（阻塞性前置依赖）
+
+**目的**：TypeScript 类型定义、API 模块封装、通用组件、工具函数
+
+**⚠️ 关键**：在此阶段完成之前，不得开始任何页面组件开发
+
+### 2.1 类型定义（可并行）
+
+- [ ] T005 [P] 创建 `ForecastOrder` 类型（接口字段对齐后端 Ro + Entity，含 status/moq/productType 等），文件：
+      `ecp-generator-ui-boostrap/src/types/sales-forecast/forecastOrder.ts`
+- [ ] T006 [P] 创建 `ForecastChangeOrder` 类型（快照字段+变更字段+审批字段），文件：
+      `ecp-generator-ui-boostrap/src/types/sales-forecast/forecastChangeOrder.ts`
+- [ ] T007 [P] 创建枚举类型（`ForecastOrderStatus` / `ChangeOrderStatus` / `ProductType` / `TransferStatus` / `DomesticForeign` — 值与后端枚举编码一致），文件：
+      `ecp-generator-ui-boostrap/src/types/sales-forecast/enums.ts`
+- [ ] T008 [P] 创建 API 请求/响应泛型类型（`PaginationRequest<T>` / `PaginationResponse<T>` / `ResponseData<T>` / `RequestData<T>`），文件：
+      `ecp-generator-ui-boostrap/src/types/sales-forecast/api.ts`
+
+### 2.2 API 模块 + 工具 + 通用组件（可并行）
+
+- [ ] T009 创建 `forecastOrderApi`（getById/findPagination/save/update/delete/submit/withdraw/cancel/accept/reject/scheduleConfirm/transferToFO/forceRelease/overview — 14 个端点），文件：
+      `ecp-generator-ui-boostrap/src/api/sales-forecast/forecastOrder.ts`
+- [ ] T010 [P] 创建 `forecastChangeOrderApi`（getById/save/update/delete/submit/approve/reject/withdraw/void — 9 个端点），文件：
+      `ecp-generator-ui-boostrap/src/api/sales-forecast/forecastChangeOrder.ts`
+- [ ] T011 [P] 创建错误码映射表（后端 22 个错误码 → 用户提示文案 + 展示方式），文件：
+      `ecp-generator-ui-boostrap/src/utils/errorHandler.ts`
+- [ ] T012 [P] 创建通用 `StatusTag.vue` 组件（接收 status 值 + 状态映射配置，自动渲染对应颜色 `<el-tag>`），文件：
+      `ecp-generator-ui-boostrap/src/components/StatusTag.vue`
+- [ ] T013 [P] 创建通用 `ActionButtons.vue` 组件（接收状态+角色，按前端设计 §5.1 规则动态渲染操作按钮组），文件：
+      `ecp-generator-ui-boostrap/src/components/ActionButtons.vue`
+- [ ] T014 [P] 创建 `usePagination` hook（分页参数管理、查询触发、loading 状态），文件：
+      `ecp-generator-ui-boostrap/src/hooks/usePagination.ts`
+
+**检查点**：类型定义完整、API 模块就绪、通用组件可用
+
+---
+
+## Phase 3：US-01 — 预测单列表页（优先级：P1）🎯 MVP 起点
+
+**目标**：销售人员可查看所有预测单列表，支持多条件筛选、分页、按状态+角色显示操作按钮
+
+**独立测试**：导航到 /sales/forecast/list → 默认展示 20 条预测单 → 切换状态筛选 → 列表刷新 → 点击单号进入详情页
+
+**来源**：前端设计 §3 核心功能区域 — 预测单列表页、§3.1 状态标签映射、§10.1 列表状态管理
+
+### 用户故事 1 的 TDD 测试
+
+- [ ] T015 [TDD] [US1] 编写 `useForecastOrderList` Store 单元测试（列表加载+分页+筛选+loading 状态），文件：
+      `ecp-generator-ui-boostrap/src/store/modules/sales-forecast/__tests__/forecastOrderListStore.spec.ts`
+- [ ] T016 [TDD] [P] [US1] 编写 `ForecastOrderList` 组件渲染测试（列表渲染+状态标签颜色+操作按钮按状态显示+分页交互），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/__tests__/ForecastOrderList.spec.ts`
+
+### 用户故事 1 的实现
+
+- [ ] T017 [US1] 创建 `useForecastOrderList` Store（list/pagination/filters/loading/selectedRows 状态 + fetchList/search/reset 方法，对齐前端设计 §10.1），文件：
+      `ecp-generator-ui-boostrap/src/store/modules/sales-forecast/forecastOrderListStore.ts`
+- [ ] T018 [US1] 创建 `ForecastOrderList.vue` 页面组件（搜索筛选区：状态多选+客户搜索+物料搜索+提报时间范围+内外销+创建人+查询/重置按钮；数据表格：单号/状态标签/客户/物料/需求量/入库时间/提报人；操作列：编辑/提交/撤回/详情/取消/转FO 按角色+状态动态显示；分页条），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/ForecastOrderList.vue`
+
+**检查点**：列表页加载正常，筛选刷新正确，状态标签颜色匹配设计
+
+---
+
+## Phase 4：US-01 — 预测单创建/编辑页（优先级：P1）
+
+**目标**：销售人员创建新预测单（输入 CTCT 自动回填），或编辑草稿/已驳回状态的预测单
+
+**独立测试**：点击新增按钮 → 输入 CTCT 编码 → 失焦自动回填物料+客户信息 → 填写需求量/交期 → 保存草稿成功（无单号） → 提交成功（生成单号+状态已提交）
+
+**来源**：前端设计 §4 核心功能区域 — 创建/编辑页、§8.1 输入表单
+
+### TDD 测试 + 实现
+
+- [ ] T019 [TDD] [US1] 编写 `ForecastOrderEdit` 组件测试（CTCT 自动回填+mock/保存草稿/提交成功/校验失败拦截/MOQ 警告），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/__tests__/ForecastOrderEdit.spec.ts`
+- [ ] T020 [US1] 创建 `ForecastOrderForm.vue` 表单组件（CTCT 文本框+失焦自动查询；SAP物料号下拉+动态加载；数量单位/发货地点下拉；需求量数字输入+MOQ 提示；入库时间日期选择器+提前期校验；保税手册下拉+手册余量展示；来料加工开关；原因说明文本域；保存草稿+提交按钮），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/components/ForecastOrderForm.vue`
+- [ ] T021 [US1] 创建 `ForecastOrderEdit.vue` 页面组件（新建模式：空表单；编辑模式：回填数据+状态校验仅草稿/已驳回可编辑；路由参数 id 判断模式；提交成功跳转列表），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/ForecastOrderEdit.vue`
+- [ ] T022 [P] [US1] 创建 `useForecastOrderForm` hook（表单数据管理/校验错误管理/CTCT 查询 loading/submitting 状态），文件：
+      `ecp-generator-ui-boostrap/src/hooks/useForecastOrderForm.ts`
+
+**检查点**：CTCT 编码输入自动回填物料+客户信息，保存草稿+提交流程正常
+
+---
+
+## Phase 5：US-02 + US-03 + US-04 + US-09 + US-08 — 预测单详情页（优先级：P1/P2 综合）
+
+**目标**：详情页展示预测单完整信息+排产进度+变更历史+操作按钮区；集成接收/驳回/撤回/取消/删除/转FO 全部操作
+
+**独立测试**：导航到 /sales/forecast/detail/{id} → 查看完整信息卡片 → 点击撤回 → 状态变草稿；计划部门登录 → 点击接收 → 填写答复 → 状态变计划接收
+
+**来源**：前端设计 §5 详情页、§5.1 操作按钮规则、§8.2 转FO弹窗、§8.3 接收驳回表单
+
+### TDD 测试 + 实现
+
+- [ ] T023 [TDD] [US2] 编写 `ForecastOrderDetail` 组件测试（4 状态显示+操作按钮按角色+状态动态显示+排产进度正常+降级/接收/驳回交互），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/__tests__/ForecastOrderDetail.spec.ts`
+- [ ] T024 [US2] 创建 `useForecastOrderDetail` Store（detail/changeOrderList/scheduleProgress/scheduleError/loading/actionButtons 状态，对齐前端设计 §10.3），文件：
+      `ecp-generator-ui-boostrap/src/store/modules/sales-forecast/forecastOrderDetailStore.ts`
+- [ ] T025 [US2] 创建 `ForecastOrderDetail.vue` 页面组件：
+  - 操作按钮区：ActionButtons 组件（按 §5.1 规则动态渲染）
+  - 基本信息卡片：单号/状态标签/类型/提报人/提报时间/内外销/销售组织
+  - 客户+物料+投料信息卡片
+  - 计划答复卡片：计划建议量/答复入库时间/答复意见/回复时间
+  - 转单信息卡片：转单状态标签/FO单号/已转单数量/剩余待转单/强制转FO时间
+  - APS 排产进度区：正常展示+超时降级"排产进度暂不可用"
+  - 变更历史子表 + 新增变更单按钮（计划接收/已排产/已部分转单可见）
+  - 接收弹窗（计划建议量+答复入库时间+答复意见）/ 驳回弹窗（驳回原因）
+  - 转FO弹窗（SO行项目选择+转单数量）
+  文件：`ecp-generator-ui-boostrap/src/views/sales-forecast/ForecastOrderDetail.vue`
+- [ ] T026 [P] [US2] 创建 `TransferFoDialog.vue` 弹窗组件（SO行项目下拉+转单数量数字输入+确认/取消），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/components/TransferFoDialog.vue`
+- [ ] T027 [P] [US2] 创建 `ReplyDialog.vue` 弹窗组件（接收模式：计划建议量+答复时间+答复意见；驳回模式：驳回原因；动态切换），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/components/ReplyDialog.vue`
+- [ ] T028 [US2] 创建 `useApsSchedule` hook（APS 排产进度查询+超时降级+loading 管理），文件：
+      `ecp-generator-ui-boostrap/src/hooks/useApsSchedule.ts`
+
+**检查点**：详情页全信息展示完整，操作按钮按角色+状态正确显示，接收/驳回/转FO 交互正常
+
+---
+
+## Phase 6：US-05 — 变更单新增/编辑/审批（优先级：P1）
+
+**目标**：在详情页内新增变更单（自动快照原始信息），按需填写变更字段，提交审批，审批通过联动更新
+
+**独立测试**：已排产预测单详情页 → 点击新增变更单 → 自动快照展示 → 填写变更后入库时间 → 提交 → 审批通过 → 详情页入库时间联动更新
+
+**来源**：前端设计 §7 变更单新增/编辑、§7.1 快照信息、§8.5 变更单表单
+
+### TDD 测试 + 实现
+
+- [ ] T029 [TDD] [US5] 编写 `ChangeOrderEdit` 组件测试（自动快照展示+按需填写+提交校验/并发控制拦截+审批通过/驳回交互），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/__tests__/ChangeOrderEdit.spec.ts`
+- [ ] T030 [P] [US5] 创建 `useChangeOrderForm` Store（snapshot+changeForm+submitting+errors 状态，对齐前端设计 §10.5），文件：
+      `ecp-generator-ui-boostrap/src/store/modules/sales-forecast/changeOrderFormStore.ts`
+- [ ] T031 [US5] 创建 `ChangeForm.vue` 表单组件（原始快照区灰色背景只读展示；变更后客户文本框+CTCT校验；变更后入库时间日期选择器；变更后保税手册下拉；释放资源量数字输入+剩余待转单约束；按需填写提示；保存草稿+提交按钮），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/components/ChangeForm.vue`
+- [ ] T032 [US5] 创建 `ChangeOrderEdit.vue` 页面/弹窗（新增模式：自动加载快照；编辑模式草稿/已驳回：回填数据；提交校验:BR-05/BR-12/BR-13/BR-03；调用 forecastChangeOrderApi；成功后刷新详情页变更历史），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/ChangeOrderEdit.vue`
+
+**检查点**：变更单新增自动快照正常，按需填写校验正确，审批通过联动更新
+
+---
+
+## Phase 7：US-06 — 预测单概览视图（优先级：P2）
+
+**目标**：按时间/客户/品种维度聚合展示预测单数据，支持图表钻取和 Excel 导出
+
+**独立测试**：导航到概览视图 → 选择时间维度 → 柱状图展示各月需求量 → 点击某月柱体 → 弹出该月明细列表
+
+**来源**：前端设计 §6 概览视图、§1.4 图表交互、§10.4 概览状态管理
+
+- [ ] T033 [TDD] [US9] 编写 `ForecastOrderOverview` 组件测试（维度切换+图表渲染+钻取弹窗），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/__tests__/ForecastOrderOverview.spec.ts`
+- [ ] T034 [P] [US9] 创建 `useOverview` Store（activeDimension/chartData/tableData/filters/loading/drillDownVisible/drillDownData 状态，对齐前端设计 §10.4），文件：
+      `ecp-generator-ui-boostrap/src/store/modules/sales-forecast/overviewStore.ts`
+- [ ] T035 [US9] 创建 `ForecastOrderOverview.vue` 页面组件（筛选区：维度Tab+基地+周期；图表区：ECharts Bar/Pie/Line 按维度切换；聚合表格：维度值/条数/需求量合计/已转单合计/剩余；点击下钻弹窗展示明细列表；导出Excel 按钮），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/ForecastOrderOverview.vue`
+- [ ] T036 [P] [US9] 创建 `OverviewDrillDown.vue` 钻取弹窗组件（展示某维度下的预测单明细列表+分页），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/components/OverviewDrillDown.vue`
+- [ ] T037 [P] [US9] 创建 `useECharts` hook（ECharts 实例管理、响应式 resize、主题切换），文件：
+      `ecp-generator-ui-boostrap/src/hooks/useECharts.ts`
+
+**检查点**：概览视图维度切换流畅，图表钻取正常，导出可用
+
+---
+
+## Phase 8：US-10 — 系统配置页（优先级：P2）
+
+**目标**：系统管理员配置提报提前期天数（1~365）和强制转FO天数（1~90）
+
+**来源**：前端设计 §8.4 系统配置页
+
+- [ ] T038 [US10] 创建 `SystemConfig.vue` 页面组件（提报提前期数字输入 1~365+默认30；强制转FO天数数字输入 1~90+默认5；修改强制转FO天数字段时弹出风险提示弹窗；保存按钮+loading+成功Toast），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/SystemConfig.vue`
+
+**检查点**：配置保存成功，Redis+DB 双写生效
+
+---
+
+## Phase 9：集成与收尾
+
+**目的**：跨页面的质量保证、国际化、路由守卫、性能优化与构建验证
+
+### E2E 测试
+
+- [ ] T039 [TDD] 编写端到端测试（创建→提交→接收→排产确认→转FO 全流程），文件：
+      `ecp-generator-ui-boostrap/src/views/sales-forecast/__tests__/ForecastOrderE2E.spec.ts`
+
+### 路由守卫与权限
+
+- [ ] T040 完善路由守卫逻辑（销售人员/计划部门/审批人/管理员角色 → 菜单可见性+路由访问控制），文件：
+      `ecp-generator-ui-boostrap/src/router/modules/sales-forecast.ts`
+
+### i18n 国际化
+
+- [ ] T041 [P] 创建简体中文文案（页面标题/按钮文本/表单标签/状态文本/错误提示/placeholder 等，从错误码映射表提取），文件：
+      `ecp-generator-ui-boostrap/src/i18n/zh-CN/sales-forecast.ts`
+- [ ] T042 [P] 创建英文文案（同上内容英文翻译），文件：
+      `ecp-generator-ui-boostrap/src/i18n/en-US/sales-forecast.ts`
+
+### 代码评审与优化
+
+- [ ] T043 执行前端编码规范合规检查（按 12 条检查清单逐条确认）
+- [ ] T044 性能优化（列表页虚拟滚动/图表懒加载/路由懒加载/API 请求防抖/乐观锁冲突重试机制）
+- [ ] T045 `npm run build` 构建验证（type-check + production build 通过）
+- [ ] T046 `npm run lint` + `npm run format` 代码质量验证
+
+---
+
+## 依赖关系与执行顺序
+
+### 阶段依赖
+
+| 阶段 | 依赖 | 说明 |
+|------|------|------|
+| Phase 1（环境搭建） | 无 | 可立即开始 |
+| Phase 2（基础设施） | Phase 1 | **阻塞所有页面开发** |
+| Phase 3（US-01 列表页） | Phase 2 | P1 MVP 起点，产出列表Store+页面 |
+| Phase 4（US-01 创建编辑） | Phase 2 + Phase 3 类型 | P1，可并行 |
+| Phase 5（US-02/03/04/08/09 详情页） | Phase 2 + 全部 API | P1 综合，依赖列表页跳转 |
+| Phase 6（US-05 变更单） | Phase 2 + 详情页 | P1，依赖详情页 ChangeHistory 区域 |
+| Phase 7（US-06 概览） | Phase 2 | P2，独立页面 |
+| Phase 8（US-10 配置） | Phase 2 | P2，独立页面 |
+| Phase 9（集成收尾） | Phase 3~8 | E2E 需全功能就绪 |
+
+### 并行机会
+
+- **Phase 2**：类型定义 4 个文件完全并行（T005~T008）；API+工具+通用组件并行（T009~T014）
+- **Phase 3+4**：列表页与创建编辑页可并行开发（不同文件、不同 Store）
+- **Phase 7+8**：概览视图与系统配置页可并行（完全独立页面）
+- **Phase 9**：i18n 2 文件并行（T041~T042）
+- **跨 Phase 并行**：Phase 5（详情页+操作）与 Phase 6（变更单）按先详情再变更单顺序；Phase 7（概览）+Phase 8（配置）可并行
+
+---
+
+## 并行示例：US-01 预测单列表页 + 创建编辑页
+
+```bash
+# Step 1: 先编写测试（并行）→ 确保失败
+Task T015: "[TDD] 编写列表 Store 单元测试"
+Task T016: "[TDD] 编写列表页组件测试"
+Task T019: "[TDD] 编写创建编辑页组件测试"
+
+# 所有测试验证失败后 ↓
+
+# Step 2: 并行创建 Store + Hook + API（互不依赖）
+Task T017: "创建 useForecastOrderList Store"
+Task T022: "创建 useForecastOrderForm hook"
+
+# Step 3: 创建页面组件（依赖 Store+Hook）
+Task T018: "创建 ForecastOrderList.vue"
+Task T020+T021: "创建 ForecastOrderForm.vue + ForecastOrderEdit.vue"
+
+# 运行测试 → 全部通过 ✅
+```
+
+---
+
+## 实现策略
+
+### MVP 优先（P1 页面：列表/创建编辑/详情/变更单）
+
+1. Phase 1+2 → 基础设施就绪
+2. Phase 3 → 列表页 **← MVP 核心入口**
+3. Phase 4 → 创建编辑页
+4. Phase 5 → 详情页（含全部操作）
+5. Phase 6 → 变更单
+6. **STOP & VALIDATE**：全部 P1 页面端到端可走通
+7. P1 MVP 就绪 → 部署/演示
+
+### 增量交付
+
+1. Phase 1+2 → 基座就绪
+2. Phase 3 → 列表页独立可访问 → 部署
+3. Phase 4 → 创建编辑页追加
+4. Phase 5+6 → 详情页+变更单追加 → P1 MVP 完整
+5. Phase 7+8 → P2 概览+配置追加
+6. Phase 9 → 集成收尾
+
+---
+
+## 前端编码规范检查清单
+
+| # | 规范 | 检查项 | 通过 |
+|---|------|--------|:--:|
+| 1 | **TypeScript** | 所有组件/Store/API/工具函数有完整类型定义，禁用 `any` | ☐ |
+| 2 | **Vue SFC** | `<script setup lang="ts">` 语法，Props/Emits 类型声明 | ☐ |
+| 3 | **Element Plus** | 统一使用 `<el-*>` 组件，状态标签使用 `<el-tag>` 颜色语义 | ☐ |
+| 4 | **Pinia Store** | `defineStore` setup 语法，camelCase 命名，状态对齐前端设计 §10 | ☐ |
+| 5 | **API 调用** | 统一使用 `src/utils/request.ts` 封装，不直接调用 axios；请求/响应类型明确 | ☐ |
+| 6 | **路由** | 层级清晰，懒加载 `defineAsyncComponent`，meta 含权限标记 | ☐ |
+| 7 | **错误处理** | 错误码映射表集中管理（`utils/errorHandler.ts`），展示方式按前端设计 §9（Message/Dialog/字段级）| ☐ |
+| 8 | **状态标签** | 通用 `StatusTag.vue` 组件，颜色语义：蓝=进行中/绿=终态/红=驳回/橙=警告/灰=草稿取消 | ☐ |
+| 9 | **表单校验** | Element Plus `<el-form>` rules 声明式校验，校验文案使用 i18n key | ☐ |
+| 10 | **乐观锁** | 更新/撤回/排产确认操作携带 versionNum，冲突时提示"数据已被他人修改，请刷新后重试" | ☐ |
+| 11 | **i18n** | 所有用户可见文案使用 `$t()` 或 `useI18n()`，最少中英两种语言 | ☐ |
+| 12 | **构建** | `npm run build`（含 `vue-tsc --build` 类型检查 + `vite build`）零错误通过 | ☐ |
+
+---
+
+## TDD 执行指南
+
+### RED 阶段
+
+```bash
+# 1. 按 [TDD] 标记的任务编写测试代码
+# 2. 运行并确认失败
+npx vitest run src/views/sales-forecast/__tests__/ForecastOrderList.spec.ts
+
+# 预期输出：Tests: 5 failed（组件/Store 未实现，预期失败）
+```
+
+### GREEN 阶段
+
+```
+Store 实现 → 组件实现 → 重新运行测试 → 全绿 ✅
+```
+
+### REFACTOR 阶段
+
+```bash
+# 不破坏测试前提下：
+- 提取重复逻辑到 hooks
+- 优化组件拆分粒度
+- 添加 loading/empty/error 三态统一处理
+npx vitest run  # 全绿
+```
+
+---
+
+## 注意事项
+
+- 状态标签颜色严格遵循设计：蓝色=进行中(SUBMITTED/ACCEPTED/SCHEDULED)、绿色=终态(已变更/已全部转单完成)、红色=驳回(REJECTED)、橙色=已部分转单(PARTIAL_CONVERTED)、灰色=草稿/取消/释放/作废
+- 操作按钮动态显示规则见前端设计 §5.1（9 状态×3 角色矩阵）
+- CTCT 编码输入后失焦自动查询，查询过程展示 loading（禁用其他输入）
+- APS 排产进度出站查询超时时降级展示，不阻塞详情页整体渲染
+- 变更单自动快照在 `saveForecastChangeOrder` API 调用前由前端展示原始数据（从详情页 detail 对象读取）
+- 所有乐观锁操作携带 versionNum，冲突时展示友好提示提供刷新操作
+- i18n 至少覆盖中/英两种语言
+- ECharts 图表组件按需引入（`import * as echarts from 'echarts/core'`），避免全量打包