chore: initialize qiming workspace repository
This commit is contained in:
Codex
@@ -0,0 +1,180 @@
|
||||
# Agent Detail 分层架构说明
|
||||
|
||||
## 📁 文件结构
|
||||
|
||||
```
|
||||
pages/agent-detail/
|
||||
├── agent-detail.uvue # 主组件文件 (包含控制器逻辑和视图层逻辑)
|
||||
├── styles/ # 样式文件目录
|
||||
│ └── agent-detail.scss # 页面样式文件
|
||||
└── layers/ # 分层架构目录
|
||||
├── README.md # 本说明文档
|
||||
├── AgentDetailData.uts # 数据层
|
||||
├── AgentDetailUtils.uts # 工具层
|
||||
├── AgentDetailService.uts # 服务层
|
||||
├── ComponentManager.uts # 组件管理层
|
||||
└── ScrollManager.uts # 滚动管理层
|
||||
```
|
||||
|
||||
## 🏗️ 架构层次
|
||||
|
||||
### 1. 数据层 (Data Layer) - `AgentDetailData.uts`
|
||||
**职责**: 负责状态管理和数据存储
|
||||
- 管理所有响应式数据 (`ref`)
|
||||
- 存储组件引用和私有变量
|
||||
- 提供数据的统一访问接口
|
||||
|
||||
**特点**:
|
||||
- 纯数据类，不包含业务逻辑
|
||||
- 所有数据都是响应式的
|
||||
- 便于状态管理和调试
|
||||
|
||||
### 2. 工具层 (Utility Layer) - `AgentDetailUtils.uts`
|
||||
**职责**: 提供通用的工具函数
|
||||
- 类型判断和转换
|
||||
- ID生成和数据处理
|
||||
- 纯函数设计，无副作用
|
||||
|
||||
**特点**:
|
||||
- 静态方法，无需实例化
|
||||
- 易于测试和复用
|
||||
- 与业务逻辑解耦
|
||||
|
||||
### 3. 服务层 (Service Layer) - `AgentDetailService.uts`
|
||||
**职责**: 负责业务逻辑和API调用
|
||||
- 处理API请求和响应
|
||||
- 管理业务流程
|
||||
- 协调数据层和外部服务
|
||||
|
||||
**特点**:
|
||||
- 依赖注入数据层
|
||||
- 包含复杂的业务逻辑
|
||||
- 处理异步操作
|
||||
|
||||
### 4. 组件管理层 (Component Management Layer) - `ComponentManager.uts`
|
||||
**职责**: 负责组件的引用管理和更新
|
||||
- 管理子组件的引用
|
||||
- 处理组件间的通信
|
||||
- 提供组件更新接口
|
||||
|
||||
**特点**:
|
||||
- 管理组件生命周期
|
||||
- 处理组件间依赖关系
|
||||
- 提供组件更新策略
|
||||
|
||||
### 5. 滚动管理层 (Scroll Management Layer) - `ScrollManager.uts`
|
||||
**职责**: 专门处理滚动相关的逻辑
|
||||
- 管理滚动状态
|
||||
- 处理滚动事件
|
||||
- 控制自动滚动行为
|
||||
|
||||
**特点**:
|
||||
- 专注于滚动功能
|
||||
- 与业务逻辑解耦
|
||||
- 易于独立测试
|
||||
|
||||
### 6. 视图层 (View Layer) - `agent-detail.uvue`
|
||||
**职责**: 负责用户交互和事件处理
|
||||
- 处理用户操作
|
||||
- 协调各层之间的交互
|
||||
- 管理视图状态
|
||||
|
||||
**特点**:
|
||||
- 直接在主组件中实现
|
||||
- 处理用户交互逻辑
|
||||
- 协调各层功能
|
||||
|
||||
### 7. 主控制器 (Main Controller) - `agent-detail.uvue`
|
||||
**职责**: 协调各层之间的交互
|
||||
- 初始化各层实例
|
||||
- 管理依赖关系
|
||||
- 设置监听器和生命周期
|
||||
|
||||
**特点**:
|
||||
- 直接在主组件中实现
|
||||
- 管理各层生命周期
|
||||
- 便于查看和维护
|
||||
|
||||
## 🔄 数据流向
|
||||
|
||||
```
|
||||
用户操作 → View Layer (主组件) → Service → Data
|
||||
↓
|
||||
组件更新 ← ComponentManager ← Data
|
||||
↓
|
||||
滚动控制 ← ScrollManager ← Data
|
||||
```
|
||||
|
||||
## 💡 使用方式
|
||||
|
||||
### 在主组件中使用
|
||||
|
||||
```typescript
|
||||
// 1. 导入各层
|
||||
import AgentDetailData from './layers/AgentDetailData.uts'
|
||||
import AgentDetailService from './layers/AgentDetailService.uts'
|
||||
import ComponentManager from './layers/ComponentManager.uts'
|
||||
import ScrollManager from './layers/ScrollManager.uts'
|
||||
|
||||
// 2. 创建各层实例
|
||||
const data = new AgentDetailData()
|
||||
const service = new AgentDetailService(data)
|
||||
const componentManager = new ComponentManager(data)
|
||||
const scrollManager = new ScrollManager(data)
|
||||
|
||||
// 3. 直接在组件中实现视图层方法
|
||||
const handleMorePopup = (): void => {
|
||||
if (data.refMorePopup.value) {
|
||||
nextTick(() => {
|
||||
data.refMorePopup.value?.open()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 4. 使用各层功能
|
||||
const messageList = data.messageList
|
||||
await service.handleSendMessage('Hello')
|
||||
componentManager.setMessageRef(el, 'msg-1')
|
||||
scrollManager.scrollToLastMsg(true)
|
||||
```
|
||||
|
||||
### 添加新功能
|
||||
|
||||
1. **新增数据**: 在 `AgentDetailData.uts` 中添加新的 `ref`
|
||||
2. **新增工具**: 在 `AgentDetailUtils.uts` 中添加新的静态方法
|
||||
3. **新增业务**: 在 `AgentDetailService.uts` 中添加新的方法
|
||||
4. **新增组件管理**: 在 `ComponentManager.uts` 中添加新的组件管理逻辑
|
||||
5. **新增滚动功能**: 在 `ScrollManager.uts` 中添加新的滚动控制
|
||||
6. **新增交互**: 直接在 `agent-detail.uvue` 中添加新的事件处理方法
|
||||
7. **新增控制器逻辑**: 直接在 `agent-detail.uvue` 中添加
|
||||
|
||||
## ✅ 架构优势
|
||||
|
||||
1. **职责分离**: 每个类都有明确的职责边界
|
||||
2. **依赖注入**: 通过构造函数注入依赖，降低耦合
|
||||
3. **易于测试**: 每个层都可以独立进行单元测试
|
||||
4. **代码复用**: 工具方法可以在其他地方复用
|
||||
5. **维护性提升**: 修改某个功能时，只需要关注对应的层
|
||||
6. **扩展性增强**: 新增功能时，可以轻松添加新的类或方法
|
||||
7. **便于维护**: 控制器逻辑和视图层逻辑直接在主组件中，方便查看和调试
|
||||
|
||||
## 🧪 测试策略
|
||||
|
||||
- **数据层**: 测试数据初始化和响应式更新
|
||||
- **工具层**: 测试工具函数的输入输出
|
||||
- **服务层**: 测试API调用和业务逻辑
|
||||
- **组件管理层**: 测试组件引用管理
|
||||
- **滚动管理层**: 测试滚动状态和事件
|
||||
- **视图层**: 测试用户交互处理（在主组件中）
|
||||
- **主控制器**: 测试各层协调和初始化（在主组件中）
|
||||
|
||||
## 📝 注意事项
|
||||
|
||||
1. **依赖关系**: 确保各层之间的依赖关系清晰
|
||||
2. **错误处理**: 在服务层和组件管理层添加适当的错误处理
|
||||
3. **性能优化**: 避免在数据层中存储过多数据
|
||||
4. **类型安全**: 使用TypeScript确保类型安全
|
||||
5. **文档更新**: 添加新功能时及时更新文档
|
||||
6. **控制器维护**: 控制器逻辑在主组件中，需要保持代码整洁
|
||||
7. **视图层维护**: 视图层方法直接在主组件中，便于调试和维护
|
||||
8. **样式维护**: 样式文件独立管理，便于主题定制和样式复用
|
||||
Reference in New Issue
Block a user