qiming/qiming-mobile/subpackages/pages/chat-conversation-component/layers

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

💡 使用方式

在主组件中使用

// 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. 样式维护: 样式文件独立管理，便于主题定制和样式复用