# 聊天页面重构说明

## 重构概述

原始的聊天页面组件（`index.tsx`）包含了大量的业务逻辑，代码行数超过350行，难以维护。通过专业的重构方法，我们将复杂的逻辑分离到不同的自定义 Hooks 中，使代码更加模块化、可维护和可测试。

## 架构设计

### 📁 文件结构

```
src/pages/chat/
├── hooks/                    # 自定义 Hooks
│   ├── index.ts             # 统一导出
│   ├── useChatMessages.ts   # 消息管理
│   ├── useChatScrollManager.ts # 滚动管理
│   ├── useChatUI.ts         # UI状态管理
│   └── useChatAgent.ts      # 智能体数据管理
├── constants/               # 常量配置
│   └── index.ts            # 页面常量
├── components/              # 组件
├── index.tsx               # 主组件（重构后）
└── README.md               # 说明文档
```

### 🔧 Hooks 职责分离

#### 1. `useChatMessages` - 消息管理
- **职责**: 处理消息历史记录获取、消息分组和格式化
- **功能**:
  - 无限滚动加载历史消息
  - 消息内容解析和格式化
  - 按 sessionId 分组消息
  - 计算消息组的时间显示

#### 2. `useChatScrollManager` - 滚动管理
- **职责**: 管理滚动相关的逻辑，包括自动滚动、键盘适配等
- **功能**:
  - 首次进入自动滚动到底部
  - 键盘弹起时的高度适配
  - 消息更新时的滚动触发
  - 滚动事件处理

#### 3. `useChatUI` - UI状态管理
- **职责**: 管理UI相关的状态，如欢迎页显示、背景设置、输入框高度等
- **功能**:
  - 欢迎页显示逻辑
  - 背景图片/视频处理
  - 导航栏样式适配
  - 输入框高度计算
  - 安全区域适配

#### 4. `useChatAgent` - 智能体数据管理
- **职责**: 智能体数据的获取和管理
- **功能**:
  - 根据访客模式获取不同数据
  - 智能体信息的缓存和更新

### 📋 常量管理

`constants/index.ts` 包含：
- 滚动相关常量（延迟时间、默认位置等）
- UI相关常量（安全区域、颜色配置等）
- 选择器ID常量
- 样式类名常量

### 🎯 重构收益

1. **代码可维护性**: 每个 Hook 职责单一，易于理解和修改
2. **可测试性**: 独立的 Hook 可以单独进行单元测试
3. **可复用性**: Hook 可以在其他页面中复用
4. **代码可读性**: 主组件逻辑清晰，专注于渲染和事件处理
5. **类型安全**: 完整的 TypeScript 类型注解

### 📊 重构前后对比

| 指标 | 重构前 | 重构后 |
|------|--------|--------|
| 主组件行数 | ~350行 | ~200行 |
| 函数复杂度 | 高 | 低 |
| 逻辑分离 | 无 | 4个专门Hook |
| 可测试性 | 低 | 高 |
| 可维护性 | 低 | 高 |

### 🔄 使用方式

```typescript
// 在主组件中使用
const { agent } = useChatAgent(agentId, isVisitor);

const {
  historyList,
  groupedMessages,
  messagesLength,
  loadMore,
  pageIndex,
  mutate,
} = useChatMessages(agentId, isVisitor);

const {
  scrollViewRef,
  scrollTop,
  keyboardHeight,
  marginTopOffset,
  handleScrollToUpper,
  handleTouchMove,
  handleScrollToLower,
} = useChatScrollManager(messagesLength, pageIndex, loadMore);

const {
  showWelcome,
  haveBg,
  inputContainerHeight,
  inputContainerBottomOffset,
  setShowWelcome,
  getBgContent,
  createNavLeftRenderer,
} = useChatUI(agent, rawHistoryListLength, currentMessageListLength);
```

### 🚀 后续优化建议

1. **性能优化**: 可以进一步使用 `useMemo` 和 `useCallback` 优化性能
2. **错误处理**: 在各个 Hook 中添加错误边界处理
3. **加载状态**: 添加更细粒度的加载状态管理
4. **缓存策略**: 实现更智能的数据缓存策略

这种重构方式遵循了 React 最佳实践，提高了代码质量和开发效率。
