# 会话激活功能集成说明

## 📦 文件清单

已创建的文件：

```
yss-project/src/modules/project/pages/chat-activation/
├── chat-activation.component.ts       # 组件逻辑
├── chat-activation.component.html     # 组件模板
└── chat-activation.component.scss     # 组件样式

yss-project/
├── CHAT-ACTIVATION-GUIDE.md          # 详细使用指南
└── CHAT-ACTIVATION-INTEGRATION.md    # 本集成说明
```

## 🔧 集成步骤

### 1. 添加路由配置

在你的路由配置文件中（通常是 `app.routes.ts` 或 `project.routes.ts`）添加以下路由：

```typescript
import { ChatActivationComponent } from './modules/project/pages/chat-activation/chat-activation.component';

export const routes: Routes = [
  // ... 其他路由
  {
    path: 'wxwork/:cid/project/:projectId/chat-activation',
    component: ChatActivationComponent,
    canActivate: [WxAuthGuard] // 使用企微授权守卫
  },
  // ... 其他路由
];
```

### 2. 在项目详情页添加入口

在项目详情页面添加"会话激活"按钮：

```html
<!-- 在项目详情页的合适位置添加 -->
<button class="action-btn" (click)="navigateToChatActivation()">
  <svg class="icon" viewBox="0 0 512 512">
    <path fill="currentColor" d="M431 320.6c-1-3.6 1.2-8.6 3.3-12.2a33.68 33.68 0 012.1-3.1A162 162 0 00464 215c.3-92.2-77.5-167-173.7-167-83.9 0-153.9 57.1-170.3 132.9a160.7 160.7 0 00-3.7 34.2c0 92.3 74.8 169.1 171 169.1 15.3 0 35.9-4.6 47.2-7.7s22.5-7.2 25.4-8.3a26.44 26.44 0 019.3-1.7 26 26 0 0110.1 2l56.7 20.1a13.52 13.52 0 003.9 1 8 8 0 008-8 12.85 12.85 0 00-.5-2.7z"/>
  </svg>
  <span>会话激活</span>
</button>
```

```typescript
// 在项目详情组件的 TypeScript 文件中添加
navigateToChatActivation() {
  this.router.navigate([
    '/wxwork', 
    this.cid, 
    'project', 
    this.projectId, 
    'chat-activation'
  ], {
    queryParams: {
      chatId: this.groupChat?.get('chat_id') // 可选：直接传递群聊ID
    }
  });
}
```

### 3. 数据库字段确认

确保 Parse 数据库中的 `GroupChat` 表包含以下字段：

```javascript
// GroupChat 表结构
{
  chat_id: String,          // 企微群聊ID (必需)
  name: String,             // 群聊名称
  project: Pointer,         // 关联项目 (必需)
  company: String,          // 公司ID (必需)
  member_list: Array,       // 成员列表 (必需)
  messages: Array,          // 消息列表 (必需)
  introSent: Boolean,       // 是否已发送群介绍 (新增)
  introSentAt: Date,        // 群介绍发送时间 (新增)
  joinQrcode: Object,       // 入群二维码信息 (可选)
  joinUrl: Object           // 入群链接信息 (可选)
}
```

如果缺少新增字段，可以通过以下方式添加：

```typescript
// 在 Parse Dashboard 中手动添加字段，或通过代码迁移
const GroupChat = Parse.Object.extend('GroupChat');
const query = new Parse.Query(GroupChat);
const groupChats = await query.find();

for (const gc of groupChats) {
  if (!gc.has('introSent')) {
    gc.set('introSent', false);
  }
  if (!gc.has('introSentAt')) {
    gc.set('introSentAt', null);
  }
  await gc.save();
}
```

### 4. 企微应用配置

确保企微应用具有以下权限：

1. **消息发送权限**
   - 应用管理 → 选择应用 → 权限管理
   - 开启"发送消息到群聊"权限
   - 开启"发送应用消息"权限

2. **客户联系权限**
   - 客户联系 → API → 开启"客户群管理"
   - 获取群聊详情权限
   - 获取群聊消息权限

3. **AgentID 配置**
   - 记录应用的 AgentID（如 `1000017`）
   - 在代码中更新 agentid 配置

```typescript
// 在 chat-activation.component.ts 中找到以下代码并更新 agentid
await this.wecorp.message.send({
  touser: userId,
  agentid: '你的应用AgentID', // 修改为实际的 AgentID
  msgtype: 'text',
  text: {
    content: notificationText
  }
});
```

### 5. 环境变量配置

确保以下环境变量已正确配置：

```typescript
// 在 environment.ts 或相关配置文件中
export const environment = {
  // ... 其他配置
  wxwork: {
    corpId: '你的企业ID',
    agentId: '你的应用ID',
    appId: 'crm' // 应用标识
  },
  parse: {
    serverURL: 'https://your-parse-server.com/parse',
    appId: 'your-app-id',
    javascriptKey: 'your-js-key'
  }
};
```

## 🧪 测试步骤

### 1. 本地开发测试

```bash
# 启动开发服务器
ng serve

# 在浏览器中访问
http://localhost:4200/wxwork/[公司ID]/project/[项目ID]/chat-activation
```

**注意**：本地开发时，企微SDK功能可能受限，建议使用 `localStorage` 模拟数据：

```typescript
// 在浏览器控制台执行
localStorage.setItem('company', '你的公司ID');
localStorage.setItem('mockUser', JSON.stringify({
  id: 'user123',
  userid: 'wxwork_user_id',
  name: '测试用户',
  roleName: '技术'
}));
```

### 2. 企微环境测试

1. 部署到测试服务器
2. 在企业微信中打开应用
3. 导航到项目详情页
4. 点击"会话激活"按钮
5. 测试各项功能

### 3. 功能测试清单

- [ ] 页面正常加载
- [ ] 显示项目和群聊信息
- [ ] 三种入群方式正常显示
- [ ] 点击"查看二维码"弹出二维码
- [ ] 点击"复制链接"成功复制
- [ ] 群介绍文案正确生成
- [ ] 点击"自动发送群介绍"成功发送
- [ ] 消息列表正常显示
- [ ] 客户消息筛选功能正常
- [ ] 未回复消息正确标识
- [ ] 点击"快速回复"显示建议回复
- [ ] 选择建议回复成功发送
- [ ] 10分钟未回复推送通知
- [ ] 移动端页面适配正常

## 🐛 常见问题排查

### 问题1：页面加载失败

**可能原因**：
- 路由配置错误
- 组件导入路径错误
- 缺少必要的依赖

**解决方法**：
```bash
# 检查组件是否正确导入
# 检查路由配置是否正确
# 查看浏览器控制台错误信息
```

### 问题2：消息列表为空

**可能原因**：
- GroupChat 表缺少 messages 字段
- messages 数据格式不正确
- 企微API未返回消息数据

**解决方法**：
```typescript
// 检查 GroupChat 数据结构
const groupChat = await new Parse.Query('GroupChat').get(chatId);
console.log('messages:', groupChat.get('messages'));
console.log('member_list:', groupChat.get('member_list'));
```

### 问题3：发送消息失败

**可能原因**：
- 企微应用权限不足
- chatId 不正确
- 网络连接问题

**解决方法**：
```typescript
// 检查企微应用权限
// 确认 chatId 是否正确
console.log('chatId:', this.chatId);
console.log('wecorp:', this.wecorp);

// 查看详细错误信息
try {
  await this.wecorp.message.send({...});
} catch (error) {
  console.error('发送失败详情:', error);
}
```

### 问题4：未回复提醒不工作

**可能原因**：
- 定时器未启动
- 企微应用无发送消息权限
- agentid 配置错误

**解决方法**：
```typescript
// 检查定时器是否运行
console.log('checkTimer:', this.checkTimer);

// 手动触发检查
this.checkUnreadMessages();

// 确认 agentid 配置
console.log('agentid:', '1000017'); // 替换为实际值
```

## 📝 代码示例

### 示例1：从群聊列表跳转

```typescript
// 在群聊列表组件中
openChatActivation(groupChat: FmodeObject) {
  const projectId = groupChat.get('project')?.id;
  const chatId = groupChat.get('chat_id');
  
  if (projectId && chatId) {
    this.router.navigate([
      '/wxwork',
      this.cid,
      'project',
      projectId,
      'chat-activation'
    ], {
      queryParams: { chatId }
    });
  }
}
```

### 示例2：在导航菜单中添加入口

```html
<!-- 在项目详情页的导航菜单中 -->
<ion-menu-toggle>
  <ion-item button (click)="navigateToChatActivation()">
    <ion-icon name="chatbubbles-outline" slot="start"></ion-icon>
    <ion-label>会话激活</ion-label>
  </ion-item>
</ion-menu-toggle>
```

### 示例3：在项目卡片中添加快捷入口

```html
<!-- 在项目列表的项目卡片中 -->
<div class="project-card">
  <div class="project-info">
    <h3>{{ project.get('title') }}</h3>
    <p>{{ project.get('description') }}</p>
  </div>
  
  <div class="project-actions">
    <button class="action-btn" (click)="viewProject(project)">
      查看详情
    </button>
    <button class="action-btn secondary" (click)="openChatActivation(project)">
      会话激活
    </button>
  </div>
</div>
```

## 🎯 性能优化建议

### 1. 消息列表优化

对于消息数量较多的群聊，建议实现虚拟滚动：

```typescript
// 安装 @angular/cdk
npm install @angular/cdk

// 在组件中使用虚拟滚动
import { ScrollingModule } from '@angular/cdk/scrolling';

// 在模板中
<cdk-virtual-scroll-viewport itemSize="80" class="messages-list">
  <div *cdkVirtualFor="let message of filteredMessages" class="message-item">
    <!-- 消息内容 -->
  </div>
</cdk-virtual-scroll-viewport>
```

### 2. 图片懒加载

对于二维码图片，建议使用懒加载：

```html
<img [src]="joinMethods.qrCode" 
     alt="入群二维码" 
     class="qrcode-image"
     loading="lazy">
```

### 3. 消息缓存

实现消息缓存机制，避免重复请求：

```typescript
private messageCache = new Map<string, ChatMessage[]>();

async loadChatMessages() {
  const cacheKey = this.chatId;
  
  // 检查缓存
  if (this.messageCache.has(cacheKey)) {
    this.messages = this.messageCache.get(cacheKey)!;
    this.updateStatistics();
    return;
  }
  
  // 加载并缓存
  // ... 加载逻辑
  this.messageCache.set(cacheKey, this.messages);
}
```

## 📚 相关文档

- [详细使用指南](./CHAT-ACTIVATION-GUIDE.md)
- [企微API文档](https://developer.work.weixin.qq.com/)
- [Parse文档](https://docs.parseplatform.org/)
- [Angular文档](https://angular.io/docs)

## 🔄 版本更新

### v1.0.0 (2025-11-01)
- 初始版本发布
- 完整功能实现
- 文档完善

---

**集成完成后，请参考 [CHAT-ACTIVATION-GUIDE.md](./CHAT-ACTIVATION-GUIDE.md) 了解详细使用方法。**

如有问题，请联系开发团队。