Browse Source

docs(stories): 创建故事008.008并更新开发服务器说明

- 创建故事008.008:将Allin系统UI包集成到Web client admin
- 添加详细的技术指导和验收标准
- 更新CLAUDE.md:说明开发服务器在8080端口默认开机自动启动
- 为开发代理提供完整的集成上下文

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

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 1 day ago
parent
commit
38eeb08b79

+ 1 - 0
CLAUDE.md

@@ -6,6 +6,7 @@
 - MinIO(默认存储桶: d8dai)
 - 所有服务使用默认参数连接,正式环境参数相同
 - 默认开放8080端口供外网访问
+- 开发服务器在8080端口默认开机自动启动,无需手动启动
 
 - ### Claude Code
 - use pnpm

+ 231 - 0
docs/stories/008.008.integrate-allin-ui-packages-to-web-client-admin.story.md

@@ -0,0 +1,231 @@
+# Story 008.008: 将Allin系统UI包集成到Web client admin
+
+## Status
+Draft
+
+## Story
+**As a** 系统管理员,
+**I want** 将史诗008中创建的7个Allin系统UI包集成到Web client admin中,
+**so that** 管理员可以通过Web界面管理Allin系统的所有功能,包括渠道、公司、残疾人、订单、平台、薪资等模块,实现前后端完整集成。
+
+## Acceptance Criteria
+1. **依赖配置**:在`web/package.json`中添加所有7个Allin系统UI包的workspace依赖
+   - `@d8d/allin-channel-management-ui`
+   - `@d8d/allin-company-management-ui`
+   - `@d8d/allin-disability-management-ui`
+   - `@d8d/allin-disability-person-management-ui`
+   - `@d8d/allin-order-management-ui`
+   - `@d8d/allin-platform-management-ui`
+   - `@d8d/allin-salary-management-ui`
+
+2. **API客户端初始化**:在`web/src/client/admin/api_init.ts`中添加所有7个Allin系统UI包的API客户端初始化,路径必须与server包中的路由配置完全一致(参考`packages/server/src/index.ts:139-144`)
+   - `channelClientManager.init('/api/v1/channel')` - 对应server中的`/api/v1/channel`
+   - `companyClientManager.init('/api/v1/company')` - 对应server中的`/api/v1/company`
+   - `disabilityClientManager.init('/api/v1/disability')` - 对应server中的`/api/v1/disability`(注意:`disability_person`模块在server中注册为`/api/v1/disability`)
+   - `orderClientManager.init('/api/v1/order')` - 对应server中的`/api/v1/order`
+   - `platformClientManager.init('/api/v1/platform')` - 对应server中的`/api/v1/platform`
+   - `salaryClientManager.init('/api/v1/salary')` - 对应server中的`/api/v1/salary`
+   - **注意**:所有路径使用单数形式,没有`s`后缀,与server包配置保持一致
+
+3. **路由集成**:在`web/src/client/admin/routes.tsx`中添加所有7个UI包的路由配置
+   - `/admin/channels` → `@d8d/allin-channel-management-ui`
+   - `/admin/companies` → `@d8d/allin-company-management-ui`
+   - `/admin/disabilities` → `@d8d/allin-disability-management-ui`
+   - `/admin/disability-persons` → `@d8d/allin-disability-person-management-ui`
+   - `/admin/orders` → `@d8d/allin-order-management-ui`
+   - `/admin/platforms` → `@d8d/allin-platform-management-ui`
+   - `/admin/salaries` → `@d8d/allin-salary-management-ui`
+
+4. **菜单集成**:在`web/src/client/admin/menu.tsx`中添加对应的菜单项
+   - 渠道管理
+   - 公司管理
+   - 残疾人管理
+   - 残疾人个人管理
+   - 订单管理
+   - 平台管理
+   - 薪资管理
+
+5. **权限配置**:为每个菜单项配置相应的权限(参考现有权限模式)
+6. **图标配置**:为每个菜单项配置合适的图标(使用lucide-react图标库)
+7. **API路径配置**:确保API路径与后端路由对应(参考史诗007的server集成)
+8. **集成验证**:验证所有路由正常工作,UI包正确加载,API客户端初始化成功
+9. **测试验证**:通过E2E测试验证集成功能
+
+## Tasks / Subtasks
+- [ ] **任务1:添加依赖配置** (AC: 1)
+  - [ ] 在`web/package.json`的dependencies中添加7个Allin UI包的workspace依赖
+  - [ ] 验证依赖名称与UI包实际package.json中的name字段一致
+  - [ ] 运行`pnpm install`确保依赖正确安装
+
+- [ ] **任务2:API客户端初始化** (AC: 2, 7)
+  - [ ] 在`web/src/client/admin/api_init.ts`中添加7个Allin UI包的导入语句
+  - [ ] 按照server包路由配置初始化每个客户端管理器
+  - [ ] **关键验证**:确保API路径与server包中的路由完全一致(单数形式,无s后缀)
+  - [ ] 验证`disability_person`模块使用`/api/v1/disability`路径(与server配置一致)
+
+- [ ] **任务3:路由配置集成** (AC: 3)
+  - [ ] 在`web/src/client/admin/routes.tsx`中导入7个Allin UI包的主要组件
+  - [ ] 添加对应的路由配置到router数组中
+  - [ ] 确保路由路径与菜单路径一致
+  - [ ] 为每个路由添加errorElement处理
+
+- [ ] **任务4:菜单配置集成** (AC: 4, 5, 6)
+  - [ ] 在`web/src/client/admin/menu.tsx`的menuItems数组中添加7个菜单项
+  - [ ] 为每个菜单项配置合适的lucide-react图标
+  - [ ] 为每个菜单项配置相应的权限(参考现有权限模式如`'user:manage'`)
+  - [ ] 确保菜单路径与路由路径一致
+
+- [ ] **任务5:集成验证** (AC: 8)
+  - [ ] 启动web开发服务器验证所有路由正常工作
+  - [ ] 验证每个UI包正确加载,无导入错误
+  - [ ] 验证API客户端初始化成功,无网络错误
+  - [ ] 验证菜单项正确显示,点击导航正常
+
+- [ ] **任务6:E2E测试验证** (AC: 9)
+  - [ ] 编写E2E测试验证7个Allin系统页面的基本访问
+  - [ ] 测试每个页面的加载和基本交互
+  - [ ] 验证API调用正常工作
+  - [ ] 运行`pnpm test:e2e:chromium`确保测试通过
+
+- [ ] **任务7:类型检查和构建验证**
+  - [ ] 运行`pnpm typecheck`确保无类型错误
+  - [ ] 运行`pnpm build`确保构建成功
+  - [ ] 验证生产环境构建无错误
+
+## Dev Notes
+
+### 项目结构信息
+- **Web项目位置**: `web/`目录
+- **API客户端初始化文件**: `web/src/client/admin/api_init.ts` [Source: architecture/source-tree.md#实际项目结构]
+- **路由配置文件**: `web/src/client/admin/routes.tsx` [Source: architecture/source-tree.md#实际项目结构]
+- **菜单配置文件**: `web/src/client/admin/menu.tsx` [Source: architecture/source-tree.md#实际项目结构]
+- **现有UI包集成模式**: 参考`@d8d/user-management-ui`、`@d8d/auth-management-ui`等现有集成 [Source: architecture/source-tree.md#实际项目结构]
+
+### 后端路由配置(关键参考)
+**Server包路由配置** (`packages/server/src/index.ts:139-144`):
+```typescript
+export const channelApiRoutes = api.route('/api/v1/channel', channelRoutes)
+export const companyApiRoutes = api.route('/api/v1/company', companyRoutes)
+export const disabilityApiRoutes = api.route('/api/v1/disability', disabledPersonRoutes)
+export const orderApiRoutes = api.route('/api/v1/order', orderRoutes)
+export const platformApiRoutes = api.route('/api/v1/platform', platformRoutes)
+export const salaryApiRoutes = api.route('/api/v1/salary', salaryRoutes)
+```
+**重要**: 所有路径使用单数形式,没有`s`后缀。`disability_person`模块在server中注册为`/api/v1/disability`路径。
+
+### Allin UI包信息
+所有7个UI包已创建在`allin-packages/`目录下,包名如下:
+1. `@d8d/allin-channel-management-ui` - 渠道管理UI
+2. `@d8d/allin-company-management-ui` - 公司管理UI
+3. `@d8d/allin-disability-management-ui` - 残疾人管理UI
+4. `@d8d/allin-disability-person-management-ui` - 残疾人个人管理UI
+5. `@d8d/allin-order-management-ui` - 订单管理UI
+6. `@d8d/allin-platform-management-ui` - 平台管理UI
+7. `@d8d/allin-salary-management-ui` - 薪资管理UI
+
+### 现有集成模式参考
+**API客户端初始化模式** (`web/src/client/admin/api_init.ts`):
+```typescript
+import { userClientManager } from '@d8d/user-management-ui/api';
+userClientManager.init('/api/v1/users');
+```
+
+**路由集成模式** (`web/src/client/admin/routes.tsx`):
+```typescript
+import { UserManagement } from '@d8d/user-management-ui';
+{
+  path: 'users',
+  element: <UserManagement />,
+  errorElement: <ErrorPage />
+}
+```
+
+**菜单集成模式** (`web/src/client/admin/menu.tsx`):
+```typescript
+{
+  key: 'users',
+  label: '用户管理',
+  icon: <Users className="h-4 w-4" />,
+  path: '/admin/users',
+  permission: 'user:manage'
+}
+```
+
+### 权限配置参考
+现有权限模式使用`{resource}:{action}`格式,例如:
+- `'user:manage'` - 用户管理权限
+- `'file:manage'` - 文件管理权限
+- `'area:manage'` - 区域管理权限
+
+建议为Allin系统模块配置相应的权限,如:
+- `'channel:manage'` - 渠道管理权限
+- `'company:manage'` - 公司管理权限
+- `'disability:manage'` - 残疾人管理权限
+- `'order:manage'` - 订单管理权限
+- `'platform:manage'` - 平台管理权限
+- `'salary:manage'` - 薪资管理权限
+
+### 图标配置参考
+使用lucide-react图标库,现有图标示例:
+- `<Users className="h-4 w-4" />` - 用户管理
+- `<File className="h-4 w-4" />` - 文件管理
+- `<MapPin className="h-4 w-4" />` - 区域管理
+
+建议图标:
+- 渠道管理: `<MessageSquare className="h-4 w-4" />` 或 `<Share2 className="h-4 w-4" />`
+- 公司管理: `<Building className="h-4 w-4" />` 或 `<Briefcase className="h-4 w-4" />`
+- 残疾人管理: `<User className="h-4 w-4" />` 或 `<Users className="h-4 w-4" />`
+- 订单管理: `<ClipboardList className="h-4 w-4" />` 或 `<FileText className="h-4 w-4" />`
+- 平台管理: `<Monitor className="h-4 w-4" />` 或 `<Globe className="h-4 w-4" />`
+- 薪资管理: `<DollarSign className="h-4 w-4" />` 或 `<CreditCard className="h-4 w-4" />`
+
+### 技术栈信息
+- **前端框架**: React 19 [Source: architecture/tech-stack.md#现有技术栈维护]
+- **状态管理**: React Query [Source: architecture/tech-stack.md#现有技术栈维护]
+- **路由**: React Router [Source: architecture/source-tree.md#实际项目结构]
+- **UI组件**: @d8d/shared-ui-components (基于shadcn/ui) [Source: architecture/tech-stack.md#现有技术栈维护]
+- **API客户端**: Hono RPC (rpcClient + ClientManager模式) [Source: architecture/ui-package-standards.md#rpc客户端实现规范]
+
+### 与史诗007的对应关系
+- 本故事对应史诗007的**故事8:将Allin系统模块集成到packages/server**
+- 确保前端UI包与后端模块的集成时间点对齐
+- 验证前后端集成功能完整性
+
+### 项目结构注意事项
+- 所有Allin UI包已创建在`allin-packages/`目录下
+- Web项目使用workspace依赖管理,依赖格式为`"workspace:*"`
+- API路径必须与server包路由配置完全一致,特别注意单数形式和路径大小写
+
+### 开发服务器说明
+- **开发服务器**: 开发服务器在8080端口默认开机自动启动,无需手动启动 [Source: CLAUDE.md#开发环境说明]
+- **访问地址**: 集成验证时可通过 `http://localhost:8080` 访问Web界面
+- **API服务**: 后端API服务与Web服务器一同运行,API路径基于同一端口
+
+### Testing
+#### 测试标准
+- **E2E测试位置**: `web/tests/e2e/` [Source: architecture/testing-strategy.md#e2e测试-end-to-end-tests]
+- **测试框架**: Playwright [Source: architecture/testing-strategy.md#e2e测试-end-to-end-tests]
+- **执行命令**: `pnpm test:e2e:chromium` [Source: CLAUDE.md#测试调试]
+- **测试覆盖要求**: 关键用户流程100% [Source: architecture/testing-strategy.md#e2e测试-end-to-end-tests]
+
+#### 本故事测试要求
+- 编写E2E测试验证7个Allin系统页面的基本访问
+- 测试每个页面的加载和基本交互
+- 验证API调用正常工作
+- 确保测试通过率100%
+
+#### 测试执行流程
+1. 本地开发测试: `cd web && pnpm test:e2e:chromium`
+2. 验证所有测试通过
+3. 如有测试失败,查看`test-results/**/error-context.md`分析问题 [Source: CLAUDE.md#测试调试]
+
+## Change Log
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-12-06 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
+
+## Dev Agent Record
+*此部分由开发代理在实施期间填写*
+
+## QA Results
+*来自QA代理对已完成故事实施的QA审查结果*