|
|
@@ -34,6 +34,16 @@
|
|
|
5. 与史诗007移植的后端模块无缝集成
|
|
|
6. 区域管理功能复用现有`@d8d/area-management-ui`包
|
|
|
|
|
|
+## 参考文档
|
|
|
+
|
|
|
+执行本史诗时,必须参考以下架构文档:
|
|
|
+- **[UI包开发规范](../architecture/ui-package-standards.md)**:UI包的结构、RPC客户端实现、组件开发、测试等规范
|
|
|
+- **[后端模块包开发规范](../architecture/backend-module-package-standards.md)**:对应的后端模块规范
|
|
|
+- **[组件架构](../architecture/component-architecture.md)**:前端组件架构设计
|
|
|
+- **[编码标准和测试策略](../architecture/coding-standards.md)**:编码规范和测试要求
|
|
|
+
|
|
|
+**特别强调**:所有UI包开发必须严格遵循[UI包开发规范](../architecture/ui-package-standards.md),包括包结构、RPC客户端模式、组件开发、测试规范等。
|
|
|
+
|
|
|
## 模块分析结果
|
|
|
|
|
|
### 1. 模块依赖关系分析
|
|
|
@@ -190,11 +200,11 @@ allin-packages/{module-name}-management-ui/
|
|
|
#### 移植调整方案
|
|
|
|
|
|
##### A. 架构转换策略
|
|
|
-1. **Ant Design组件 → @d8d/shared-ui-components组件**:重写所有UI组件
|
|
|
-2. **Jotai状态 → React Query + Zustand**:重构状态管理
|
|
|
+1. **Ant Design组件 → @d8d/shared-ui-components组件**:重写所有UI组件,遵循[UI包开发规范](../architecture/ui-package-standards.md#组件开发规范)
|
|
|
+2. **Jotai状态 → React Query + Zustand**:重构状态管理,遵循[UI包开发规范](../architecture/ui-package-standards.md#状态管理规范)
|
|
|
3. **Ant Design Form → React Hook Form + Zod**:转换表单逻辑
|
|
|
-4. **自定义fetch API → Hono RPC (rpcClient + ClientManager模式)**:重构API客户端,使用项目现有的rpcClient工具和ClientManager单例模式
|
|
|
-5. **Next.js页面 → React组件库**:将页面转换为可复用组件
|
|
|
+4. **自定义fetch API → Hono RPC (rpcClient + ClientManager模式)**:重构API客户端,使用项目现有的rpcClient工具和ClientManager单例模式,遵循[UI包开发规范](../architecture/ui-package-standards.md#rpc客户端实现规范)
|
|
|
+5. **Next.js页面 → React组件库**:将页面转换为可复用组件,遵循[UI包开发规范](../architecture/ui-package-standards.md#包结构规范)
|
|
|
|
|
|
##### B. 组件层转换示例
|
|
|
```typescript
|
|
|
@@ -757,10 +767,10 @@ const useChannels = () => {
|
|
|
1. **依赖关系分析完成**:8个UI模块的依赖关系已明确
|
|
|
2. **技术栈差异分析完成**:源系统使用Ant Design + Jotai,目标系统使用@d8d/shared-ui-components + React Query,存在重大架构差异
|
|
|
3. **命名方案确定**:使用`@d8d/allin-`前缀,`-management-ui`后缀,非多租户版本
|
|
|
-4. **目录结构**:在`allin-packages/`目录下创建UI包,与后端模块保持相同目录
|
|
|
+4. **目录结构**:在`allin-packages/`目录下创建UI包,与后端模块保持相同目录,遵循[UI包开发规范](../architecture/ui-package-standards.md#包结构规范)
|
|
|
5. **移植顺序建议**:从简单到复杂,先移植基础CRUD页面
|
|
|
-6. **技术栈转换方案**:已制定从Ant Design到@d8d/shared-ui-components的详细转换策略
|
|
|
-7. **故事拆分完成**:按模块拆分为8个故事,每个故事包含组件测试要求
|
|
|
+6. **技术栈转换方案**:已制定从Ant Design到@d8d/shared-ui-components的详细转换策略,遵循[UI包开发规范](../architecture/ui-package-standards.md)
|
|
|
+7. **故事拆分完成**:按模块拆分为8个故事,每个故事包含组件测试要求,遵循[UI包开发规范](../architecture/ui-package-standards.md#测试规范)
|
|
|
|
|
|
**新的故事拆分方案**:
|
|
|
- **故事1**:移植渠道管理UI(channel → @d8d/allin-channel-management-ui)
|
|
|
@@ -773,10 +783,10 @@ const useChannels = () => {
|
|
|
- **区域管理**:复用现有`@d8d/area-management-ui`包(无需移植)
|
|
|
|
|
|
**每个故事的关键要求**:
|
|
|
-1. **技术栈转换**:必须完成组件、API客户端、状态管理、表单的完整转换
|
|
|
-2. **组件测试**:必须编写`tests/components/`测试文件
|
|
|
+1. **技术栈转换**:必须完成组件、API客户端、状态管理、表单的完整转换,严格遵循[UI包开发规范](../architecture/ui-package-standards.md)
|
|
|
+2. **组件测试**:必须编写`tests/components/`测试文件,遵循[UI包开发规范](../architecture/ui-package-standards.md#测试规范)
|
|
|
3. **测试覆盖**:必须覆盖所有主要组件,验证用户交互
|
|
|
-4. **遵循现有模式**:参考advertisement-management-ui的组件模式
|
|
|
+4. **遵循现有模式**:参考advertisement-management-ui的组件模式,并遵循[UI包开发规范](../architecture/ui-package-standards.md)
|
|
|
5. **集成验证**:必须与对应的后端模块集成验证
|
|
|
|
|
|
**执行顺序建议**:
|