📝 docs(stories): 创建故事007.018多租户用户管理UI包实现

- 基于故事007.017创建多租户版本用户管理UI包
- 添加文件重命名策略和pnpm安装要求
- 集成RPC客户端架构最佳实践
- 重点实现集成测试和多租户测试
- 移除单元测试要求，专注功能完整性验证

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>

docs/stories/007.018.user-management-ui-mt-package.story.md

@@ -0,0 +1,129 @@
+# 故事 007.018: 多租户用户管理界面独立包实现
+
+**状态**: Draft
+**史诗**: 007 - 多租户包复制策略
+**故事类型**: 前端/UI
+
+## 故事陈述
+
+基于故事007.017的单租户用户管理UI包，创建一个多租户版本的用户管理界面独立包，采用复制策略直接复制单租户包并更新依赖，确保多租户上下文支持。
+
+## 验收标准
+
+- [ ] 创建多租户用户管理UI包，包名为 `@d8d/user-management-ui-mt`
+- [ ] 复制故事007.017的单租户用户管理UI包结构和代码
+- [ ] 更新包配置和依赖，确保与多租户架构兼容
+- [ ] 验证多租户上下文在用户管理组件中的正确使用
+- [ ] 确保所有组件和API调用支持多租户隔离
+- [ ] 通过集成测试，确保功能完整性
+
+## Dev Notes
+
+### 先前故事洞察
+- 故事007.017实现了单租户用户管理UI包，采用RPC客户端架构
+- 使用单例模式和延迟初始化确保类型安全和性能
+- 组件结构清晰，包含认证管理、用户列表、用户表单等核心组件
+
+### 数据模型
+- 用户管理数据模型基于多租户隔离原则 [Source: architecture/component-architecture.md#数据模型]
+- 用户实体包含租户ID字段用于数据隔离 [Source: architecture/component-architecture.md#多租户支持]
+
+### API规范
+- 使用RPC客户端架构进行API调用 [Source: architecture/tech-stack.md#前端技术栈]
+- API端点需要支持租户上下文传递 [Source: architecture/component-architecture.md#api集成]
+- 认证和授权需要多租户感知 [Source: architecture/component-architecture.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/user-management-ui-mt/` [Source: architecture/source-tree.md#包结构]
+- 组件文件：`packages/user-management-ui-mt/src/components/` [Source: architecture/source-tree.md#前端包结构]
+- API客户端：`packages/user-management-ui-mt/src/api/` [Source: architecture/source-tree.md#前端包结构]
+- 测试文件：`packages/user-management-ui-mt/src/__tests__/` [Source: architecture/source-tree.md#测试结构]
+
+### 测试要求
+- 使用Vitest进行集成测试 [Source: architecture/testing-strategy.md#测试框架]
+- 使用Testing Library进行组件集成测试 [Source: architecture/testing-strategy.md#测试框架]
+- 测试文件与源码文件同目录 [Source: architecture/testing-strategy.md#测试文件组织]
+- 重点验证多租户上下文和功能完整性
+- **多租户测试重点**：
+  - 测试多租户上下文传递的正确性
+  - 验证不同租户间的数据隔离
+  - 测试租户切换时的组件状态管理
+  - 确保API调用包含正确的租户标识
+  - 验证认证和授权的多租户感知
+
+### 技术约束
+- Node.js 20.19.2 [Source: architecture/tech-stack.md#开发环境]
+- TypeScript严格模式启用 [Source: architecture/component-architecture.md#typescript配置]
+- 必须支持多租户上下文传递 [Source: architecture/component-architecture.md#多租户支持]
+
+### 实施注意事项
+- **文件重命名策略**: 复制单租户包文件后，立即重命名文件为多租户包名，然后再进行内容修改
+- **依赖管理**: 所有包配置更新完成后，必须执行 `pnpm install` 命令以确保依赖正确安装
+- **包命名规范**: 多租户包使用 `-mt` 后缀标识（Multi-Tenant）
+
+### RPC客户端架构参考
+- **单例模式**: 用户客户端管理器采用单例模式确保全局唯一实例 [参考: 故事007.017任务9]
+- **延迟初始化**: 支持延迟初始化和客户端重置功能 [参考: 故事007.017任务9]
+- **类型安全**: 使用Hono的InferRequestType和InferResponseType确保类型安全 [参考: 故事007.017任务9]
+- **API调用模式**: 实现类型安全的API调用模式 [参考: 故事007.017任务9]
+- **集成验证**: 验证RPC客户端在主应用中的正确集成 [参考: 故事007.017任务9]
+
+## 项目结构说明
+
+基于源码树文档检查，项目结构完全对齐：
+- 包结构符合workspace模式 [Source: architecture/source-tree.md#包结构]
+- 前端包采用标准React + TypeScript结构 [Source: architecture/source-tree.md#前端包结构]
+- 测试文件组织符合测试策略要求 [Source: architecture/source-tree.md#测试结构]
+
+## 任务 / 子任务
+
+1. **创建多租户用户管理UI包结构** (AC: 1)
+   - 创建 `packages/user-management-ui-mt/` 目录
+   - 复制单租户包的结构和文件
+   - **重要：复制后立即重命名文件为多租户包名**
+   - 更新包名为 `@d8d/user-management-ui-mt`
+
+2. **更新包配置和依赖** (AC: 2, 3)
+   - 更新 `package.json` 中的包名和依赖
+   - 确保与多租户共享包的依赖兼容
+   - 验证workspace依赖配置
+   - **重要：修改完成后务必执行 `pnpm install` 命令**
+
+3. **实现RPC客户端架构和最佳实践** (AC: 4, 5)
+   - 创建单例模式的用户客户端管理器 [参考: packages/user-management-ui-mt/src/api/userClient.ts]
+   - 实现延迟初始化和客户端重置功能 [参考: packages/user-management-ui-mt/src/api/userClient.ts:17-33]
+   - 使用Hono的InferRequestType和InferResponseType确保类型安全 [参考: packages/user-management-ui-mt/src/components/UserManagement.tsx:26-29]
+   - 提供全局唯一的客户端实例管理 [参考: packages/user-management-ui-mt/src/api/userClient.ts:4-15]
+   - 验证RPC客户端在主应用中的正确集成 [参考: web/src/client/api_init.ts]
+   - 实现类型安全的API调用模式 [参考: packages/user-management-ui-mt/src/components/UserManagement.tsx:100-112]
+
+4. **实现多租户上下文支持** (AC: 4, 5)
+   - 更新API客户端支持租户上下文传递
+   - 确保所有组件支持多租户隔离
+   - 验证认证和授权的多租户感知
+
+5. **组件和功能验证** (AC: 5)
+   - 测试用户列表组件的多租户数据隔离
+   - 验证用户表单的多租户上下文
+   - 确保认证管理的多租户支持
+
+6. **集成验证和测试** (AC: 6)
+   - 验证包在多租户应用中的集成
+   - 测试租户切换功能
+   - 确保数据隔离正确性
+   - 实现集成测试，确保功能完整性
+   - **重要：添加多租户测试到现有的复制过来的修改后的测试文件中**
+     - 测试多租户上下文传递的正确性
+     - 验证不同租户间的数据隔离
+     - 测试租户切换时的组件状态管理
+     - 确保API调用包含正确的租户标识
+
+---
+*故事创建时间: 2025-11-16*
+*基于史诗007和架构文档创建*