Przeglądaj źródła

📝 feat(故事007.014): 创建租户管理界面独立包实现故事

- 创建故事007.014文档,定义租户管理界面独立包实现需求
- 更新史诗007文档,添加故事007.014到已完成故事列表
- 明确租户管理界面包依赖租户模块包 @d8d/tenant-module-mt
- 包含完整的验收标准、任务分解和技术约束
- 基于现有用户管理界面实现租户管理功能

🤖 Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 1 miesiąc temu
rodzic
commit
a4859389ce

+ 2 - 0
docs/prd/epic-007-multi-tenant-package-replication.md

@@ -18,6 +18,7 @@
 - **Story 10:** 订单模块多租户复制和租户支持 - ✅ 已完成
 - **Story 12:** 广告模块多租户复制和租户支持 - ✅ 已完成
 - **Story 13:** 共享UI组件包创建 - ✅ 已完成
+- **Story 14:** 租户管理界面独立包实现 - ⏳ 待完成
 
 ### 📊 完成统计
 - **阶段1完成度**: 5/5 故事 (100%)
@@ -33,6 +34,7 @@
 ### 🎯 关键成果
 - 成功创建10个多租户包:`@d8d/user-module-mt`, `@d8d/file-module-mt`, `@d8d/auth-module-mt`, `@d8d/geo-areas-mt`, `@d8d/delivery-address-module-mt`, `@d8d/merchant-module-mt`, `@d8d/supplier-module-mt`, `@d8d/goods-module-mt`, `@d8d/orders-module-mt`, `@d8d/advertisements-module-mt`
 - 成功创建共享UI组件包:`@d8d/shared-ui-components`,包含46个基础UI组件
+- 规划创建租户管理界面包:`@d8d/tenant-management-ui`,基于现有用户管理界面实现,依赖租户模块包 `@d8d/tenant-module-mt`
 - 所有包都包含完整的租户数据隔离支持
 - 所有集成测试通过,构建成功
 - 单租户系统功能完全不受影响

+ 213 - 0
docs/stories/007.014.tenant-management-ui-package.story.md

@@ -0,0 +1,213 @@
+# 故事007.014: 租户管理界面独立包实现
+
+## 状态
+
+⏳ Pending
+
+## 故事
+
+**作为** 系统管理员,
+**我想要** 有一个独立的租户管理界面包,
+**以便** 可以在多租户系统中独立管理和配置租户信息,而不影响现有的单租户系统。
+
+## 验收标准
+
+1. **AC 1**: 成功创建租户管理界面包 `@d8d/tenant-management-ui`,包含正确的包配置和依赖管理
+2. **AC 2**: 基于现有用户管理界面 `web/src/client/admin/pages/Users.tsx` 复制并修改为租户管理界面
+3. **AC 3**: 实现完整的租户CRUD操作(创建、读取、更新、删除)
+4. **AC 4**: 实现租户配置管理功能(状态管理、配置设置等)
+5. **AC 5**: 基于React + TypeScript + TanStack Query + React Hook Form技术栈
+6. **AC 6**: 依赖共享UI组件包 `@d8d/shared-ui-components` 中的基础组件
+7. **AC 7**: 依赖租户模块包 `@d8d/tenant-module-mt` 中的API客户端和类型定义
+8. **AC 8**: 提供workspace包依赖复用机制,支持独立测试和构建
+9. **AC 9**: 验证现有功能无回归,所有依赖包能正确导入和使用租户管理组件
+
+## 任务 / 子任务
+
+- [ ] 创建租户管理界面包基础结构 (AC: 1)
+  - [ ] 创建 `packages/tenant-management-ui/` 目录
+  - [ ] 配置 `package.json` 为 `@d8d/tenant-management-ui`
+  - [ ] 设置正确的依赖关系:React、TypeScript、TanStack Query、React Hook Form等
+  - [ ] 添加对租户模块包 `@d8d/tenant-module-mt` 的依赖
+  - [ ] 配置构建工具和TypeScript配置
+  - [ ] 添加workspace依赖管理
+
+- [ ] 复制并修改用户管理界面为租户管理界面 (AC: 2)
+  - [ ] 复制 `web/src/client/admin/pages/Users.tsx` 到租户管理包
+  - [ ] 修改组件名称为 `TenantManagement.tsx`
+  - [ ] 集成租户模块包 `@d8d/tenant-module-mt` 的API客户端
+  - [ ] 更新API客户端调用为租户管理API
+  - [ ] 修改表单字段和验证规则为租户相关字段
+  - [ ] 更新表格列和数据显示为租户信息
+
+- [ ] 实现租户CRUD操作 (AC: 3)
+  - [ ] 创建租户列表查询功能
+  - [ ] 实现租户创建功能
+  - [ ] 实现租户编辑功能
+  - [ ] 实现租户删除功能
+  - [ ] 实现租户状态管理(启用/禁用)
+
+- [ ] 实现租户配置管理功能 (AC: 4)
+  - [ ] 添加租户配置表单
+  - [ ] 实现配置保存和更新
+  - [ ] 添加配置验证规则
+  - [ ] 实现配置历史记录
+
+- [ ] 配置技术栈和依赖 (AC: 5, 6, 7)
+  - [ ] 配置React + TypeScript开发环境
+  - [ ] 集成TanStack Query进行数据管理
+  - [ ] 集成React Hook Form进行表单管理
+  - [ ] 依赖共享UI组件包中的基础组件
+  - [ ] 依赖租户模块包中的API客户端和类型定义
+
+- [ ] 配置workspace包依赖复用机制 (AC: 7)
+  - [ ] 配置 `pnpm-workspace.yaml` 包含新包
+  - [ ] 设置独立测试和构建脚本
+  - [ ] 配置TypeScript路径映射
+
+- [ ] 实现单元测试和集成测试 (AC: 8)
+  - [ ] 创建组件渲染测试
+  - [ ] 创建CRUD操作测试
+  - [ ] 创建表单验证测试
+  - [ ] 创建API集成测试
+
+- [ ] 验证现有功能无回归 (AC: 9)
+  - [ ] 验证所有组件导入和使用正常
+  - [ ] 验证租户模块包依赖正确集成
+  - [ ] 运行TypeScript类型检查确保无错误
+  - [ ] 运行构建流程确保成功
+
+## 开发说明
+
+### 先前故事洞察
+基于故事007.013(共享UI组件包创建)和之前故事的经验教训:
+
+**技术挑战和解决方案** [Source: docs/prd/epic-007-multi-tenant-package-replication.md#实施经验总结]
+- **包依赖管理**: 确保租户管理界面包正确依赖共享UI组件包
+- **API客户端集成**: 集成租户管理API客户端
+- **表单验证**: 确保租户相关字段的验证规则正确
+- **状态管理**: 使用TanStack Query管理租户数据状态
+
+**最佳实践** [Source: docs/prd/epic-007-multi-tenant-package-replication.md#最佳实践]
+- **组件复用**: 基于现有用户管理界面进行复制和修改
+- **依赖管理**: 正确配置包间依赖关系
+- **测试配置**: 配置独立的测试环境
+- **类型处理**: 确保TypeScript类型正确导出
+
+### 数据模型
+**租户实体结构** [Source: packages/tenant-module-mt/src/schemas/tenant.schema.ts]
+- 租户ID: `id` (数字)
+- 租户名称: `name` (字符串,可空)
+- 租户代码: `code` (唯一字符串,必填)
+- 联系电话: `phone` (字符串,可空)
+- 联系人姓名: `contactName` (字符串,可空)
+- 租户状态: `status` (数字,1启用 2禁用,默认1)
+- 租户配置: `config` (JSONB,可空)
+- RSA公钥: `rsaPublicKey` (字符串,可空)
+- AES密钥: `aesKey` (字符串,可空)
+- 创建时间: `createdAt` (日期)
+- 更新时间: `updatedAt` (日期)
+- 创建用户ID: `createdBy` (数字,可空)
+- 更新用户ID: `updatedBy` (数字,可空)
+
+### 组件规范
+**租户管理界面组件** [Source: docs/architecture/component-architecture.md#前端组件架构]
+- TenantManagement: 主租户管理组件
+- TenantForm: 租户创建/编辑表单
+- TenantTable: 租户列表表格
+- TenantConfigForm: 租户配置表单
+
+**基础UI组件依赖** [Source: packages/shared-ui-components/src/components/ui/]
+- Button、Input、Card、Table、Dialog等shadcn/ui组件
+- 基于Radix UI构建
+- 使用Tailwind CSS样式
+- 支持TypeScript类型安全
+
+### 技术约束
+**前端技术栈** [Source: docs/architecture/tech-stack.md#现有技术栈维护]
+- **前端框架**: React 19.1.0 + TypeScript
+- **路由**: React Router v7
+- **状态管理**: @tanstack/react-query (服务端状态) + Context (本地状态)
+- **UI组件库**: shadcn/ui (基于Radix UI)
+- **构建工具**: Vite 7.0.0
+- **样式**: Tailwind CSS 4.1.11
+- **HTTP客户端**: 基于Hono Client的封装 + axios适配器
+
+**包架构** [Source: docs/architecture/source-tree.md#包架构层次]
+- 使用workspace包依赖复用机制
+- 支持独立测试和构建
+- 遵循现有的包结构约定
+- 保持与现有基础设施包兼容
+- 依赖租户模块包 `@d8d/tenant-module-mt` 提供API客户端和类型定义
+
+**性能要求** [Source: docs/prd/epic-007-multi-tenant-package-replication.md#成功标准]
+- 构建性能无显著下降
+- 组件加载时间优化
+- 包体积控制在合理范围
+
+### 测试
+
+#### 测试标准 [Source: docs/architecture/testing-strategy.md#包测试架构]
+- **测试位置**: `packages/tenant-management-ui/tests/unit/`
+- **测试框架**: Vitest + Testing Library
+- **覆盖率目标**: 单元测试 ≥ 80%
+- **测试类型**: 单元测试验证组件功能
+
+#### 测试要求 [Source: docs/architecture/testing-strategy.md#测试金字塔策略]
+- **单元测试范围**: 单个组件、hook、工具函数
+- **测试目标**: 验证独立单元的正确性
+- **执行频率**: 每次代码变更
+
+#### 特定测试要求
+- 组件渲染和交互测试
+- CRUD操作功能测试
+- 表单验证测试
+- API集成测试
+- 类型定义完整性测试
+
+## 变更日志
+
+| 日期 | 版本 | 描述 | 作者 |
+|------|------|------|------|
+| 2025-11-15 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
+
+## 开发代理记录
+
+### Agent Model Used
+- Claude Code (d8d-model)
+
+### Debug Log References
+- 2025-11-15: 基于史诗007需求创建租户管理界面独立包故事
+
+### Completion Notes List
+- ⏳ 待完成: 创建租户管理界面包基础结构
+- ⏳ 待完成: 复制并修改用户管理界面为租户管理界面
+- ⏳ 待完成: 实现租户CRUD操作
+- ⏳ 待完成: 实现租户配置管理功能
+- ⏳ 待完成: 配置技术栈和依赖
+- ⏳ 待完成: 配置workspace包依赖复用机制
+- ⏳ 待完成: 实现单元测试和集成测试
+- ⏳ 待完成: 验证现有功能无回归
+
+### 关键成就
+- 基于现有用户管理界面实现租户管理功能
+- 依赖共享UI组件包提供一致的用户体验
+- 依赖租户模块包提供完整的API客户端和类型定义
+- 提供完整的租户CRUD和配置管理功能
+
+### File List
+- `packages/tenant-management-ui/package.json` - 租户管理界面包配置
+- `packages/tenant-management-ui/src/components/TenantManagement.tsx` - 主租户管理组件
+- `packages/tenant-management-ui/src/components/TenantForm.tsx` - 租户创建/编辑表单
+- `packages/tenant-management-ui/src/components/TenantTable.tsx` - 租户列表表格
+- `packages/tenant-management-ui/src/components/TenantConfigForm.tsx` - 租户配置表单
+- `packages/tenant-management-ui/src/hooks/` - 租户管理hooks
+- `packages/tenant-management-ui/src/utils/` - 工具类
+- `packages/tenant-management-ui/src/types/` - 类型定义
+- `packages/tenant-management-ui/tests/unit/` - 单元测试
+- `packages/tenant-management-ui/tsconfig.json` - TypeScript配置
+- `packages/tenant-management-ui/vitest.config.ts` - 测试配置
+
+## QA结果
+
+*此部分将在质量保证审查过程中由QA代理填充*