181 lines
5.7 KiB
Markdown
181 lines
5.7 KiB
Markdown
# 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. **样式维护**: 样式文件独立管理，便于主题定制和样式复用
|