Explorar el Código

📝 feat(故事007.015): 更新认证管理界面包故事,添加hook和context导出规范

- 添加认证包必须导出的接口规范:AuthProvider组件、useAuth hook、AuthContextType类型
- 提供导出配置示例和代码模式
- 更新验收标准和任务分解,确保其他包可以正确导入认证包接口
- 添加完整的hook和context导出验证要求

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 hace 1 mes
padre
commit
41ea89a5fe
Se han modificado 1 ficheros con 221 adiciones y 0 borrados
  1. 221 0
      docs/stories/007.015.auth-management-ui-package.story.md

+ 221 - 0
docs/stories/007.015.auth-management-ui-package.story.md

@@ -0,0 +1,221 @@
+# 故事007.015: 单租户认证管理界面独立包实现
+
+## 状态
+
+Draft
+
+## 故事
+
+**作为** 系统管理员,
+**我想要** 有一个独立的单租户认证管理界面包,
+**以便** 可以在单租户系统中独立管理用户认证和登录功能,而不影响现有的多租户系统。
+
+## 验收标准
+
+1. **AC 1**: 成功创建单租户认证管理界面包 `@d8d/auth-management-ui`,包含正确的包配置和依赖管理
+2. **AC 2**: 复制前端登录界面 `web/src/client/admin/pages/Login.tsx` 为单租户认证管理界面包
+3. **AC 3**: 复制认证提供器 `web/src/client/admin/hooks/AuthProvider.tsx` 为单租户认证包
+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/auth-module` 提供API客户端和类型定义
+8. **AC 8**: 提供workspace包依赖复用机制
+9. **AC 9**: 支持独立测试和部署
+10. **AC 10**: 验证现有功能无回归
+11. **AC 11**: 提供完整的hook和context导出接口,包括 `AuthProvider`、`useAuth` 和 `AuthContextType`
+12. **AC 12**: 确保其他管理界面包可以正确导入和使用认证包提供的接口
+
+## 任务 / 子任务
+
+- [ ] 任务 1 (AC: 1, 8): 创建单租户认证管理界面包基础结构
+  - [ ] 创建 `packages/auth-management-ui/package.json` 包配置
+  - [ ] 配置workspace依赖:`@d8d/shared-ui-components` 和 `@d8d/auth-module`
+  - [ ] 配置TypeScript配置 `tsconfig.json`
+  - [ ] 配置构建工具 `build.config.ts`
+  - [ ] 配置测试框架 `vitest.config.ts`
+
+- [ ] 任务 2 (AC: 2, 4, 5): 复制并修改登录界面组件
+  - [ ] 复制 `web/src/client/admin/pages/Login.tsx` 到 `packages/auth-management-ui/src/components/LoginPage.tsx`
+  - [ ] 更新导入路径,使用共享UI组件
+  - [ ] 更新API客户端,使用认证模块包
+  - [ ] 确保TypeScript类型正确
+
+- [ ] 任务 3 (AC: 3, 4, 5): 复制并修改认证提供器
+  - [ ] 复制 `web/src/client/admin/hooks/AuthProvider.tsx` 到 `packages/auth-management-ui/src/hooks/AuthProvider.tsx`
+  - [ ] 更新导入路径,使用认证模块包
+  - [ ] 确保认证状态管理功能完整
+  - [ ] 更新类型定义导入
+
+- [ ] 任务 4 (AC: 4, 5, 6): 创建认证管理界面主组件
+  - [ ] 创建 `packages/auth-management-ui/src/components/AuthManagement.tsx` 主组件
+  - [ ] 集成登录页面和认证提供器
+  - [ ] 提供认证状态管理功能
+  - [ ] 使用共享UI组件构建界面
+
+- [ ] 任务 5 (AC: 6, 7): 配置API客户端和类型定义
+  - [ ] 创建 `packages/auth-management-ui/src/api/authClient.ts` API客户端
+  - [ ] 使用认证模块包的类型定义
+  - [ ] 配置Hono客户端调用认证API
+  - [ ] 处理认证错误和状态
+
+- [ ] 任务 6 (AC: 9): 创建完整的测试套件
+  - [ ] 创建单元测试:`packages/auth-management-ui/tests/unit/LoginPage.test.tsx`
+  - [ ] 创建组件测试:`packages/auth-management-ui/tests/unit/AuthProvider.test.tsx`
+  - [ ] 创建集成测试:`packages/auth-management-ui/tests/integration/auth-management.integration.test.ts`
+  - [ ] 配置测试覆盖率报告
+
+- [ ] 任务 7 (AC: 1, 8, 11, 12): 配置包导出接口
+  - [ ] 创建 `packages/auth-management-ui/src/index.ts` 统一导出文件
+  - [ ] 导出 `AuthProvider` 组件供其他包使用
+  - [ ] 导出 `useAuth` hook供其他包使用
+  - [ ] 导出 `AuthContextType` 类型定义
+  - [ ] 导出 `LoginPage` 和 `AuthManagement` 组件
+  - [ ] 验证导出接口正确性
+
+- [ ] 任务 8 (AC: 10, 12): 验证功能无回归
+  - [ ] 运行所有测试确保通过
+  - [ ] 验证构建成功
+  - [ ] 验证包依赖正确
+  - [ ] 验证与现有系统兼容
+  - [ ] 验证导出接口可用性
+  - [ ] 验证其他包可以正确导入认证包接口
+
+## 开发笔记
+
+### 先前故事洞察
+吸取故事007.014的经验教训:
+- 确保包配置正确,特别是workspace依赖管理
+- 使用共享UI组件包中的基础组件,避免重复代码
+- 遵循现有的包结构和命名约定
+- 包含完整的测试套件,确保质量
+
+### 数据模型
+**用户认证数据模型** [Source: packages/auth-module/src/schemas/auth.schema.ts]
+- 登录请求:`username` (字符串,必填), `password` (字符串,必填)
+- 登录响应:`token` (JWT令牌), `user` (用户信息对象)
+- 用户信息:`id` (数字), `username` (字符串), `email` (字符串), `role` (角色信息)
+
+### API规范
+**认证API端点** [Source: packages/auth-module/src/routes/]
+- `POST /auth/login` - 用户登录
+- `POST /auth/logout` - 用户登出
+- `GET /auth/me` - 获取当前用户信息
+- 使用Bearer Token认证
+- 基于Hono Client的RPC调用
+
+### 组件规范
+**认证管理界面组件** [Source: docs/architecture/component-architecture.md#前端组件架构]
+- `LoginPage`: 登录表单组件
+- `AuthProvider`: 认证状态管理组件
+- `AuthManagement`: 主认证管理组件
+
+**基础UI组件依赖** [Source: packages/shared-ui-components/src/components/ui/]
+- Button、Input、Card、Form等shadcn/ui组件
+- 基于Radix UI构建
+- 使用Tailwind CSS样式
+- 支持TypeScript类型安全
+
+### Hook和Context导出规范
+**认证包必须导出的接口** [Source: web/src/client/admin/hooks/AuthProvider.tsx]
+- `AuthProvider` 组件:React Context Provider,提供认证状态管理
+- `useAuth` hook:用于在组件中访问认证状态和操作
+- `AuthContextType` 类型:认证上下文类型定义
+
+**导出配置** [Source: packages/tenant-management-ui/src/index.ts]
+- 通过 `src/index.ts` 统一导出所有公共接口
+- 导出模式:
+```typescript
+export { AuthProvider } from './hooks/AuthProvider';
+export { useAuth } from './hooks/AuthProvider';
+export type { AuthContextType } from './types/auth';
+export { LoginPage } from './components/LoginPage';
+export { AuthManagement } from './components/AuthManagement';
+```
+
+**其他包使用示例**
+```typescript
+// 在其他管理界面包中使用认证包
+import { AuthProvider, useAuth } from '@d8d/auth-management-ui';
+
+// 在应用根组件中包裹AuthProvider
+<AuthProvider>
+  <YourApp />
+</AuthProvider>
+
+// 在组件中使用认证状态
+const { user, isAuthenticated, login, logout } = useAuth();
+```
+
+### 文件位置
+**新文件位置** [Source: docs/architecture/source-tree.md#包架构层次]
+- `packages/auth-management-ui/package.json` - 包配置
+- `packages/auth-management-ui/src/index.ts` - 包导出主入口
+- `packages/auth-management-ui/src/components/LoginPage.tsx` - 登录页面组件
+- `packages/auth-management-ui/src/components/AuthManagement.tsx` - 主认证管理组件
+- `packages/auth-management-ui/src/hooks/AuthProvider.tsx` - 认证提供器
+- `packages/auth-management-ui/src/api/authClient.ts` - 认证API客户端
+- `packages/auth-management-ui/src/types/auth.ts` - 认证类型定义
+- `packages/auth-management-ui/tests/` - 完整的测试套件
+- `packages/auth-management-ui/tsconfig.json` - TypeScript配置
+- `packages/auth-management-ui/vitest.config.ts` - 测试配置
+- `packages/auth-management-ui/build.config.ts` - 构建配置
+
+### 技术约束
+**前端技术栈** [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/auth-module` 提供API客户端和类型定义
+
+**性能要求** [Source: docs/prd/epic-007-multi-tenant-package-replication.md#成功标准]
+- 构建性能无显著下降
+- 组件加载时间优化
+- 包体积控制在合理范围
+
+### 测试
+**测试标准** [Source: docs/architecture/testing-strategy.md#包测试架构]
+- **单元测试**: 组件逻辑和工具函数测试
+- **组件测试**: React组件渲染和交互测试
+- **集成测试**: API调用和状态管理测试
+- **测试位置**: `packages/auth-management-ui/tests/unit/` 和 `packages/auth-management-ui/tests/integration/`
+- **测试框架**: Vitest + Testing Library
+- **覆盖率目标**: ≥ 80%
+
+**具体测试要求**
+- 登录表单验证测试
+- 认证状态管理测试
+- API调用错误处理测试
+- 用户界面交互测试
+- 认证流程端到端测试
+
+## 变更日志
+
+| 日期 | 版本 | 描述 | 作者 |
+|------|------|------|------|
+| 2025-11-15 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
+
+## 开发代理记录
+
+*此部分将在开发过程中由开发代理填充*
+
+### 使用的代理模型
+
+### 调试日志引用
+
+### 完成笔记列表
+
+### 文件列表
+
+## QA结果
+
+*此部分将在质量保证审查过程中由QA代理填充*