制定闪送平台管理前端实施计划

补充平台前端文件结构、数据流、交互、测试驱动批次和菜单迁移任务。

specs/024-flash-delivery/plan.md

@@ -87,3 +87,88 @@ git diff --check
 ## 复杂度跟踪
 
 无规范违例。四张新表分别承担订单快照、可变计价、图片凭证和审计日志；应用层留在 admin 是外部 HTTP 依赖和模块边界共同决定的。
+
+## 平台管理前端增量（2026-09-01）
+
+### 目标与架构
+
+**目标**：在 `foodie-admin-vue` 增加可直接运营的闪送价格配置和订单管理入口，完整消费现有六个平台 API，不修改后端接口语义。
+
+**架构**：继续使用若依动态菜单加载两个 Vue 2 + Element UI 页面。API 请求集中在一个模块，状态/服务类型映射、分页归一化、操作可见性和价格校验集中在可直接由 Node 测试的纯函数模块；订单详情拆为独立展示组件，避免列表页面同时承担全部渲染职责。
+
+**技术栈**：Vue 2.6、Element UI 2.15、Vue i18n 8、若依 `request`、动态 `sys_menu`、Node 内置 `node:test`。
+
+### 全局约束
+
+- 不新建分支或 worktree，后端与平台前端均在当前 `test` 分支工作。
+- 不增加 npm 依赖，不引入新的 UI 或状态管理框架。
+- 所有新增用户可见文本使用 `flashDelivery.*`，并同步简中、繁中、英文、越南文。
+- 前端文件保留 CRLF；只修改本功能文件，不格式化既有大文件。
+- 菜单和权限 SQL 只追加到 `foodie_server/updatesql/sql.md`，不直接执行数据库变更。
+- 后端分页响应读取 `data.records` 和 `data.total`，不得套用若依传统 `rows/total` 响应。
+- 操作成功后重新读取服务端数据；操作失败不提前修改本地订单状态或价格。
+
+### 文件结构
+
+```text
+foodie-admin-vue/
+├── package.json                                      # 增加闪送定向契约测试命令
+├── tests/flash-delivery.test.cjs                    # 请求配置、页面规则和四语言真实行为
+└── src/
+    ├── api/flashDelivery/contracts.js               # 可执行的六个平台请求配置构造器
+    ├── api/flashDelivery/index.js                   # 调用若依 request 的六个平台接口
+    ├── views/flashDelivery/shared.js                # 枚举、分页、价格校验、操作可见性
+    ├── views/flashDelivery/pricing/index.vue        # 三种服务价格列表与编辑弹窗
+    ├── views/flashDelivery/orders/index.vue         # 筛选、分页、取消和完成
+    ├── views/flashDelivery/orders/OrderDetail.vue   # 完整详情、图片和日志
+    └── api/language/language.{zh_CN,zh_TW,en_US,vi}.js
+
+foodie_server/
+├── specs/024-flash-delivery/{spec,design,plan,tasks}.md
+└── updatesql/sql.md                                 # 父菜单、两个页面及六项权限归位
+```
+
+### 接口和页面数据流
+
+1. `GET /system/flashDelivery/admin/pricing` 返回数组；价格页只显示服务端实际存在的配置，不创建前端默认价格。
+2. `PUT /system/flashDelivery/admin/pricing/{serviceType}` 提交七个完整字段。弹窗先执行纯函数校验，成功响应覆盖列表对应行。
+3. `GET /system/flashDelivery/admin/orders` 原样提交 `pageNum,pageSize,status,serviceType,orderNo,userId,riderId`；`normalizePage` 从 `response.data` 提取 `records,total,current,size`。
+4. `GET /system/flashDelivery/admin/orders/{id}` 返回 `{order,images,logs}`；打开详情前先清空旧数据，失败时保持弹窗关闭。
+5. `POST .../{id}/cancel` 提交 `{reason}`，只对非 `COMPLETED/CANCELLED` 状态显示并要求二次确认。
+6. `POST .../{id}/complete` 无请求体，只对 `DELIVERED` 状态显示并要求二次确认。
+
+### 交互设计
+
+- 价格页使用紧凑表格展示三种服务和版本信息；“编辑”打开宽度 640px 的表单弹窗，金额两位小数、距离单位为米、倍率最小为 1。
+- 订单页顶部使用可折叠行内筛选，表格展示订单号、服务、状态、用户、骑手、距离、金额和创建时间。
+- 详情使用 960px 弹窗，按“订单概况、取送地址、费用与路线、履约与 PIN、图片凭证、状态日志”分区；图片支持预览，空集合显示空状态。
+- 状态使用 Element UI 标签，同时显示本地化文字，避免只靠颜色传达。
+- 表格设置固定操作列和横向滚动容器；页面自身不产生横向溢出。
+
+### 错误处理
+
+- 列表和价格请求使用 `finally` 关闭 loading；后端统一错误拦截负责消息提示。
+- 价格校验失败由表单显示本地化字段错误，不发送请求。
+- 详情请求开始时清空旧详情，请求失败不打开弹窗。
+- 取消原因去除首尾空白后必须非空；取消/完成成功关闭操作层并刷新列表，若详情仍打开则重新读取详情。
+
+### 测试驱动批次
+
+1. 先创建 `tests/flash-delivery.test.cjs` 和 npm 命令，直接执行请求配置构造器、分页、价格校验、状态操作与四语言对象；运行后必须因目标模块不存在而失败。
+2. 实现 API 请求配置、API 封装和 `shared.js`，使请求、分页、价格校验和状态规则测试转绿。
+3. 实现价格页面与四语言资源，使价格字段和语言一致性测试转绿。
+4. 实现订单页面、详情组件和介入操作；页面调用已经通过测试的状态操作纯函数，权限指令通过 ESLint、构建和页面检查验证。
+5. 追加幂等菜单 SQL，再统一执行定向测试、ESLint、生产构建和两个仓库差异检查。
+
+### 验证命令
+
+```powershell
+Set-Location E:\QtwCode\foodie\foodie-admin-vue
+npm run test:flash-delivery
+npx eslint src/api/flashDelivery/index.js src/views/flashDelivery tests/flash-delivery.test.cjs
+npm run build:prod
+git diff --check
+
+Set-Location E:\QtwCode\foodie\foodie_server
+git diff --check
+```

specs/024-flash-delivery/tasks.md

@@ -54,3 +54,13 @@
 - [x] T029 实现 PIN 送达与 SENDER/PICKUP/DELIVERY 三类凭证
 - [x] T030 实现用户/骑手状态分组分页、角色业务视图和骑手公开摘要
 - [x] T031 更新 API 契约与 i18n，并运行 JDK 21 定向测试、模块构建和差异检查
+
+## Phase 9：US6 平台管理前端
+
+- [ ] T032 [US6] 在 `foodie-admin-vue/tests/flash-delivery.test.cjs` 和 `package.json` 增加闪送定向测试，直接执行请求配置、分页归一化、价格校验、状态操作和四语言对象，并确认因目标模块缺失而红灯
+- [ ] T033 [US6] 新增 `src/api/flashDelivery/contracts.js`、`index.js` 和 `src/views/flashDelivery/shared.js`，封装六个平台请求及纯函数，使请求、分页、价格校验和状态规则测试转绿
+- [ ] T034 [US6] 新增 `src/views/flashDelivery/pricing/index.vue`，实现三类价格读取、编辑校验、启停、版本展示和保存后服务端回填
+- [ ] T035 [US6] 新增 `src/views/flashDelivery/orders/index.vue` 与 `OrderDetail.vue`，实现服务端分页筛选、详情分区、图片预览、取消原因和已送达完成操作
+- [ ] T036 [US6] 在四个 `src/api/language/language.*.js` 文件增加一致的 `flashDelivery` 文案，并使语言与页面契约测试转绿
+- [ ] T037 [US6] 在 `updatesql/sql.md` 追加幂等的“闪送管理/价格配置/闪送订单”动态菜单 SQL，将现有六项权限归入对应页面
+- [ ] T038 [US6] 运行 `npm run test:flash-delivery`、新增文件 ESLint、`npm run build:prod` 和两个仓库 `git diff --check`，核对暂存范围后分别使用中文提交