|
|
@@ -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代理填充*
|