会话激活功能集成说明

📦 文件清单

已创建的文件：

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）添加以下路由：

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. 在项目详情页添加入口

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

<!-- 在项目详情页的合适位置添加 -->
<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 文件中添加
navigateToChatActivation() {
  this.router.navigate([
    '/wxwork', 
    this.cid, 
    'project', 
    this.projectId, 
    'chat-activation'
  ], {
    queryParams: {
      chatId: this.groupChat?.get('chat_id') // 可选：直接传递群聊ID
    }
  });
}

3. 数据库字段确认

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

// 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           // 入群链接信息 (可选)
}

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

// 在 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. 企微应用配置

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

消息发送权限
- 应用管理 → 选择应用 → 权限管理
- 开启"发送消息到群聊"权限
- 开启"发送应用消息"权限
客户联系权限
- 客户联系 → API → 开启"客户群管理"
- 获取群聊详情权限
- 获取群聊消息权限

AgentID 配置

记录应用的 AgentID（如 1000017）

在代码中更新 agentid 配置

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

5. 环境变量配置

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

// 在 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. 本地开发测试

# 启动开发服务器
ng serve

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

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

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

2. 企微环境测试

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

3. 功能测试清单

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

🐛 常见问题排查

问题1：页面加载失败

可能原因：

路由配置错误
组件导入路径错误
缺少必要的依赖

解决方法：

# 检查组件是否正确导入
# 检查路由配置是否正确
# 查看浏览器控制台错误信息

问题2：消息列表为空

可能原因：

GroupChat 表缺少 messages 字段
messages 数据格式不正确
企微API未返回消息数据

解决方法：

// 检查 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 不正确
网络连接问题

解决方法：

// 检查企微应用权限
// 确认 chatId 是否正确
console.log('chatId:', this.chatId);
console.log('wecorp:', this.wecorp);

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

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

可能原因：

定时器未启动
企微应用无发送消息权限
agentid 配置错误

解决方法：

// 检查定时器是否运行
console.log('checkTimer:', this.checkTimer);

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

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

📝 代码示例

示例1：从群聊列表跳转

// 在群聊列表组件中
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：在导航菜单中添加入口

<!-- 在项目详情页的导航菜单中 -->
<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：在项目卡片中添加快捷入口

<!-- 在项目列表的项目卡片中 -->
<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. 消息列表优化

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

// 安装 @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. 图片懒加载

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

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

3. 消息缓存

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

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);
}

📚 相关文档

🔄 版本更新

v1.0.0 (2025-11-01)

初始版本发布
完整功能实现
文档完善

集成完成后，请参考 CHAT-ACTIVATION-GUIDE.md 了解详细使用方法。

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

CHAT-ACTIVATION-INTEGRATION.md 9.9 KB História Raw

会话激活功能集成说明

📦 文件清单

🔧 集成步骤

1. 添加路由配置

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

3. 数据库字段确认

4. 企微应用配置

5. 环境变量配置

🧪 测试步骤

1. 本地开发测试

2. 企微环境测试

3. 功能测试清单

🐛 常见问题排查

问题1：页面加载失败

问题2：消息列表为空

问题3：发送消息失败

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

📝 代码示例

示例1：从群聊列表跳转

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

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

🎯 性能优化建议

1. 消息列表优化

2. 图片懒加载

3. 消息缓存

📚 相关文档

🔄 版本更新

v1.0.0 (2025-11-01)

CHAT-ACTIVATION-INTEGRATION.md 9.9 KB

História Raw