故事007.024: 多租户订单管理界面独立包实现

状态: Ready for Review 史诗: 007 - 多租户包复制策略 故事类型: 前端/UI

故事

作为系统管理员， 我想要 有一个独立的多租户订单管理界面包，以便可以在多租户系统中独立管理订单数据，同时保持与单租户系统的功能一致性。

验收标准

AC 1: 成功创建多租户订单管理界面包 @d8d/order-management-ui-mt，包含正确的包配置和依赖管理
AC 2: 复制单租户订单管理界面包 packages/order-management-ui/ 为多租户版本 packages/order-management-ui-mt/
AC 3: 更新包配置和依赖，确保与多租户架构兼容，依赖 @d8d/orders-module-mt
AC 4: 实现RPC客户端架构，使用单例模式和延迟初始化确保类型安全和性能
AC 5: 确保所有组件支持多租户上下文和租户数据隔离
AC 6: 验证多租户订单管理界面包构建成功，所有测试通过
AC 7: 提供workspace包依赖复用机制，支持独立测试和部署
AC 8: 验证现有功能无回归，确保多租户系统功能完整性

Dev Notes

先前故事洞察

故事007.023实现了单租户订单管理UI包，采用RPC客户端架构
使用单例模式和延迟初始化确保类型安全和性能
组件结构清晰，包含订单管理、订单表单、分页组件等核心组件
实现了完整的订单CRUD操作和状态管理功能

数据模型

订单管理数据模型基于多租户隔离原则 [Source: architecture/component-architecture.md#数据模型]
订单实体包含租户ID字段用于数据隔离 [Source: architecture/component-architecture.md#多租户支持]

API规范

使用RPC客户端架构进行API调用 [Source: architecture/tech-stack.md#前端技术栈]
租户上下文由后端认证包处理，前端使用标准RPC客户端 [Source: architecture/component-architecture.md#认证授权]
订单API端点：/api/admin/orders [Source: docs/prd/epic-007-multi-tenant-package-replication.md#订单管理界面包]

组件规范

React 19.1.0 + TypeScript 5.6.2 [Source: architecture/tech-stack.md#前端技术栈]
TanStack Query v5用于状态管理 [Source: architecture/tech-stack.md#前端技术栈]
React Hook Form v7用于表单处理 [Source: architecture/tech-stack.md#前端技术栈]
组件采用函数式组件和Hooks模式 [Source: architecture/component-architecture.md#组件设计原则]

文件位置

新包位置：packages/order-management-ui-mt/ [Source: architecture/source-tree.md#包结构]
组件文件：packages/order-management-ui-mt/src/components/ [Source: architecture/source-tree.md#前端包结构]
API客户端：packages/order-management-ui-mt/src/api/ [Source: architecture/source-tree.md#前端包结构]
测试文件：packages/order-management-ui-mt/tests/ [Source: 单租户包实际结构]

测试要求

使用Vitest进行集成测试 [Source: architecture/testing-strategy.md#测试框架]
使用Testing Library进行组件集成测试 [Source: architecture/testing-strategy.md#测试框架]
测试文件组织：集成测试在 tests/integration/，单元测试在 tests/unit/ [Source: 单租户包实际结构]
重点验证多租户上下文和功能完整性
多租户测试重点：
- 测试多租户上下文传递的正确性
- 验证不同租户间的数据隔离
- 测试租户切换时的组件状态管理
- 确保API调用包含正确的租户标识
- 验证认证和授权的多租户感知

技术约束

Node.js 20.19.2 [Source: architecture/tech-stack.md#开发环境]
TypeScript严格模式启用 [Source: architecture/component-architecture.md#typescript配置]
租户上下文由后端处理，前端使用标准RPC客户端 [Source: architecture/component-architecture.md#多租户支持]

实施注意事项

文件重命名策略: 复制单租户包文件后，立即重命名文件为多租户包名，然后再进行内容修改
依赖管理: 所有包配置更新完成后，必须执行 pnpm install 命令以确保依赖正确安装
包命名规范: 多租户包使用 -mt 后缀标识（Multi-Tenant）

订单管理功能特性

订单列表: 支持搜索、分页、状态筛选功能
订单CRUD: 完整的创建、读取、更新、删除操作
状态管理: 订单状态流转控制（待支付、已支付、已发货、已完成、已取消等）
详情查看: 订单详细信息展示，包含订单商品和物流信息
表单验证: 完整的表单验证和错误处理
订单统计: 订单数量和金额统计功能

项目结构说明

基于源码树文档检查，项目结构完全对齐：

包结构符合workspace模式 [Source: architecture/source-tree.md#包结构]
前端包采用标准React + TypeScript结构 [Source: architecture/source-tree.md#前端包结构]
测试文件组织符合测试策略要求 [Source: architecture/source-tree.md#测试结构]

任务 / 子任务

[ ] 任务 1 (AC: 1, 2): 创建多租户订单管理界面包结构
- 创建包目录：packages/order-management-ui-mt/
- 复制单租户包：cp -r packages/order-management-ui/* packages/order-management-ui-mt/
- 重要：复制后立即重命名文件为多租户包名
- 更新包名为 @d8d/order-management-ui-mt
[ ] 任务 2 (AC: 1, 3): 配置包依赖和构建
- 复制并修改 packages/order-management-ui-mt/package.json：
- 更新包名："name": "@d8d/order-management-ui-mt"
- 更新依赖："@d8d/orders-module-mt": "workspace:*"
- 删除单租户依赖：@d8d/orders-module
- 复制并修改 packages/order-management-ui-mt/tsconfig.json：
- 更新路径映射："@d8d/orders-module-mt/*"
- 复制并修改 packages/order-management-ui-mt/vitest.config.ts：
- 更新测试环境配置
- 复制并修改 packages/order-management-ui-mt/tests/setup.ts：
- 更新测试设置的多租户配置
- 复制并修改 packages/order-management-ui-mt/eslint.config.js：
- 更新ESLint配置
- 安装依赖：cd packages/order-management-ui-mt && pnpm install
[ ] 任务 3 (AC: 4, 5): 实现RPC客户端架构和类型定义
- 复制并修改 packages/order-management-ui-mt/src/api/orderClient.ts：
- 更新导入路径：import { adminOrdersRoutes } from '@d8d/orders-module-mt'
- 更新客户端实例：adminOrdersRoutes 从多租户订单模块包导入
- 保持单例模式和延迟初始化逻辑
- 复制并修改 packages/order-management-ui-mt/src/api/index.ts：
- 更新导出路径，确保API客户端正确导出
- 复制并修改 packages/order-management-ui-mt/src/types/order.ts：
- 从多租户订单模块包导入类型定义
- 确保类型定义与多租户架构对齐
- 验证RPC客户端在主应用中的正确集成 [参考: web/src/client/api_init.ts]
- 实现类型安全的API调用模式 [参考: packages/order-management-ui/src/components/OrderManagement.tsx:59-74]
[ ] 任务 4 (AC: 2, 5): 复制并调整订单管理界面组件
- 复制并修改 packages/order-management-ui-mt/src/components/OrderManagement.tsx：
- 更新导入路径：
  - import { orderClientManager } from '../api/orderClient'
  - 确保使用多租户订单客户端
- 规范：共享UI包组件导入必须使用具体组件路径，如 @d8d/shared-ui-components/components/ui/button，避免从根导入
- 使用订单客户端管理实例.get()来获取订单RPC客户端
- 骨架屏优化：确保骨架屏只在表格数据区域显示，不影响搜索框、筛选器等其他UI元素
- 复制并修改其他组件文件：
- packages/order-management-ui-mt/src/components/index.ts：
  - 更新组件导出，确保所有订单管理组件正确导出
[ ] 任务 5 (AC: 5, 6): 实现完整的订单管理功能
- 复制并修改 packages/order-management-ui-mt/src/hooks/useOrders.ts：
- 更新导入路径，使用多租户订单客户端
- 确保查询和突变操作使用正确的多租户API
- 复制并修改 packages/order-management-ui-mt/src/hooks/index.ts：
- 更新hooks导出，确保所有订单管理hooks正确导出
- 实现搜索和过滤功能
- 确保所有组件支持多租户上下文
[ ] 任务 6 (AC: 6, 7): 创建测试套件
- 复制并修改 packages/order-management-ui-mt/tests/integration/order-management.integration.test.tsx：
- 更新导入路径，使用多租户包
- 添加多租户上下文测试
- 复制并修改 packages/order-management-ui-mt/tests/setup.ts：
- 配置多租户测试环境
- 复制并修改组件测试文件：
- packages/order-management-ui-mt/tests/integration/order-management.integration.test.tsx
- 多租户测试重点：
- 测试多租户上下文传递的正确性
- 验证不同租户间的数据隔离
- 测试租户切换时的组件状态管理
- 确保API调用包含正确的租户标识
[ ] 任务 7 (AC: 1, 7): 配置包导出接口
- 复制并修改 packages/order-management-ui-mt/src/index.ts：
- 更新导出组件和hook的路径
- 确保所有导出组件、hook和类型定义正确
- 验证导出脚本正常工作
[ ] 任务 8 (AC: 6, 8): 验证功能无回归
- 运行包构建：cd packages/order-management-ui-mt && pnpm build
- 运行所有测试：cd packages/order-management-ui-mt && pnpm test
- 验证订单管理功能正常
- 验证与多租户系统兼容性

变更日志

日期	版本	描述	作者
2025-11-17	1.0	初始故事创建	Bob (Scrum Master)

Dev Agent Record

开发代理信息

代理名称: James (Dev Agent)
代理模型: d8d-model
实施日期: 2025-11-17

实施摘要

成功实现了多租户订单管理界面独立包 @d8d/order-management-ui-mt，包含完整的订单管理功能组件、RPC客户端架构和集成测试。

任务完成状态

任务 1 (AC: 1, 2): 创建多租户订单管理界面包结构
任务 2 (AC: 1, 3): 配置包依赖和构建
任务 3 (AC: 4, 5): 实现RPC客户端架构和类型定义
任务 4 (AC: 2, 5): 复制并调整订单管理界面组件
任务 5 (AC: 5, 6): 实现完整的订单管理功能
任务 6 (AC: 6, 7): 创建测试套件
任务 7 (AC: 1, 7): 配置包导出接口
任务 8 (AC: 6, 8): 验证功能无回归

文件列表

新增文件:
- packages/order-management-ui-mt/ (完整包结构)
- packages/order-management-ui-mt/src/hooks/index.ts (hooks导出文件)
修改文件:
- packages/order-management-ui-mt/package.json (包配置和依赖更新)
- packages/order-management-ui-mt/src/api/orderClient.ts (更新多租户订单模块导入)
- packages/order-management-ui-mt/src/types/order.ts (更新多租户类型导入)
- packages/order-management-ui-mt/src/components/OrderManagement.tsx (更新多租户Schema导入)

变更日志

日期	版本	描述	作者
2025-11-17	1.0	多租户订单管理UI包实现完成	James (Dev Agent)

验证结果

✅ 包构建成功 (71.7 kB)
✅ 所有集成测试通过 (7/7)
✅ 多租户依赖正确配置
✅ RPC客户端架构完整
✅ 组件功能完整
✅ 类型安全保证

QA Results

此部分将在质量保证审查过程中由QA代理填充

007.024.order-management-ui-mt-package.story.md 12 KB História Raw

故事007.024: 多租户订单管理界面独立包实现

故事

验收标准

Dev Notes

先前故事洞察

数据模型

API规范

组件规范

文件位置

测试要求

技术约束

实施注意事项

订单管理功能特性

项目结构说明

任务 / 子任务

变更日志

Dev Agent Record

开发代理信息

实施摘要

任务完成状态

文件列表

变更日志

验证结果

QA Results

007.024.order-management-ui-mt-package.story.md 12 KB

História Raw