CHAT-ACTIVATION-ACCESS-GUIDE.md 8.9 KB

会话激活页面访问指南

🎯 页面说明

会话激活(Chat Activation)页面用于管理企业微信群聊的激活和维护,包括:

  • 📋 群聊基本信息展示
  • 🔗 三种入群方式(二维码/链接/手动拉群)
  • 💬 聊天记录筛选(全部/客户消息/未回复)
  • 🤖 自动化群介绍文案
  • ⏰ 超时未回复提醒
  • 💡 AI辅助回复建议

📍 页面访问地址

方法1:直接URL访问(推荐用于测试)

格式:

http://localhost:4200/wxwork/{cid}/chat-activation/{chatId}

参数说明:

  • {cid}: 公司ID(Company ID)
  • {chatId}: 群聊ID(GroupChat的objectId)

示例URL:

http://localhost:4200/wxwork/6A7B9c2M8E/chat-activation/Abc123Xyz456

方法2:通过客户画像页面进入

  1. 访问客户画像页面:

    http://localhost:4200/wxwork/{cid}/contact/{contactId}
    
  2. 在"相关群聊"列表中点击任意群聊卡片

  3. 自动跳转到该群聊的会话激活页面

方法3:从项目详情页面进入

  1. 访问项目详情页面:

    http://localhost:4200/admin/project-detail/{projectId}
    
  2. 找到项目关联的群聊信息

  3. 点击"管理群聊"按钮

  4. 跳转到会话激活页面

🔧 获取测试URL的步骤

步骤1:获取公司ID (cid)

方法A:从localStorage获取

// 在浏览器控制台执行
const cid = localStorage.getItem('company');
console.log('公司ID:', cid);

方法B:从后台数据库查询

// 在浏览器控制台执行
const Parse = window.Parse || (await import('fmode-ng/parse')).FmodeParse.with('nova');
const query = new Parse.Query('Company');
const companies = await query.find();
companies.forEach(c => {
  console.log('公司名称:', c.get('name'), '| ID:', c.id);
});

步骤2:获取群聊ID (chatId)

方法A:查询所有群聊

// 在浏览器控制台执行
const Parse = window.Parse || (await import('fmode-ng/parse')).FmodeParse.with('nova');

// 获取公司ID
const cid = localStorage.getItem('company') || '{your_company_id}';

// 查询该公司的所有群聊
const query = new Parse.Query('GroupChat');
query.equalTo('company', { __type: 'Pointer', className: 'Company', objectId: cid });
query.include('project');
query.limit(10);

const groupChats = await query.find();
console.log(`找到 ${groupChats.length} 个群聊:`);

groupChats.forEach((gc, index) => {
  const project = gc.get('project');
  console.log(`${index + 1}. 群聊名称: ${gc.get('name')}`);
  console.log(`   群聊ID: ${gc.id}`);
  console.log(`   关联项目: ${project?.get('name') || '无'}`);
  console.log(`   成员数: ${gc.get('member_list')?.length || 0}`);
  console.log(`   URL: http://localhost:4200/wxwork/${cid}/chat-activation/${gc.id}`);
  console.log('---');
});

方法B:根据项目查找群聊

// 在浏览器控制台执行
const Parse = window.Parse || (await import('fmode-ng/parse')).FmodeParse.with('nova');

// 已知项目ID
const projectId = 'yjVLy8KxyG'; // 例如"10.28 测试"项目

// 查询该项目的群聊
const query = new Parse.Query('GroupChat');
query.equalTo('project', { __type: 'Pointer', className: 'Project', objectId: projectId });
const groupChats = await query.find();

if (groupChats.length > 0) {
  const gc = groupChats[0];
  const cid = localStorage.getItem('company');
  const url = `http://localhost:4200/wxwork/${cid}/chat-activation/${gc.id}`;
  console.log('群聊URL:', url);
} else {
  console.log('该项目没有关联群聊');
}

步骤3:创建测试群聊(如果没有)

// 在浏览器控制台执行
(async function createTestGroupChat() {
  const Parse = window.Parse || (await import('fmode-ng/parse')).FmodeParse.with('nova');
  
  // 获取公司ID
  const cid = localStorage.getItem('company');
  if (!cid) {
    console.error('未找到公司ID,请先登录');
    return;
  }
  
  // 获取项目(例如"10.28 测试"项目)
  const projectId = 'yjVLy8KxyG'; // 替换为你的项目ID
  const projectQuery = new Parse.Query('Project');
  const project = await projectQuery.get(projectId);
  
  // 创建群聊
  const GroupChat = Parse.Object.extend('GroupChat');
  const groupChat = new GroupChat();
  
  groupChat.set('name', `${project.get('name')} - 测试群聊`);
  groupChat.set('company', { __type: 'Pointer', className: 'Company', objectId: cid });
  groupChat.set('project', project);
  groupChat.set('chat_id', `test_chat_${Date.now()}`);
  groupChat.set('member_list', [
    {
      type: 1, // 内部成员
      userid: 'test_user_1',
      name: '测试技术员',
      avatar: 'https://via.placeholder.com/100'
    },
    {
      type: 2, // 外部联系人
      userid: 'external_user_1',
      name: '测试客户',
      avatar: 'https://via.placeholder.com/100'
    }
  ]);
  
  const savedChat = await groupChat.save();
  
  const url = `http://localhost:4200/wxwork/${cid}/chat-activation/${savedChat.id}`;
  console.log('✅ 测试群聊创建成功!');
  console.log('群聊ID:', savedChat.id);
  console.log('访问URL:', url);
  console.log('请复制上面的URL到浏览器地址栏访问');
  
  // 复制到剪贴板
  if (navigator.clipboard) {
    await navigator.clipboard.writeText(url);
    alert('URL已复制到剪贴板!\n' + url);
  }
  
  return url;
})();

🎨 页面功能预览

访问URL后,你将看到以下功能:

1. 群聊信息卡片

  • 群聊名称
  • 关联项目
  • 成员列表(内部员工 + 外部客户)
  • 创建时间

2. 入群方式(三种)

  • 二维码入群:显示群聊二维码,客户扫码加入
  • 复制链接入群:复制邀请链接,通过其他渠道发送
  • 手动拉群:打开企微,手动添加成员

3. 消息筛选

  • 全部消息:显示群聊中的所有消息
  • 客户消息:只显示客户(外部联系人)发送的消息
  • 未回复消息:显示超过10分钟未回复的客户消息

4. 自动化功能

  • 入群文案:点击发送预设的群介绍文案

    本群项目主管:XXX
    执行技术:XXX
    项目需求:XXX
    
  • 辅助回复:选择消息后,AI自动生成3-5条回复建议

  • 超时提醒:客户消息超过10分钟未回复时,显示红色"未回复"标签

📝 测试checklist

  • 页面能正常加载
  • 群聊信息正确显示
  • 成员列表正确显示(内部/外部)
  • 三种入群方式按钮可点击
  • 消息筛选功能正常(全部/客户/未回复)
  • 入群文案发送功能正常
  • AI辅助回复功能正常
  • 超时未回复标签正常显示
  • 响应式布局正常(手机端)

🐛 常见问题

Q1: 页面显示"Failed to fetch"错误

原因: Parse Server后端服务未启动

解决方法:

  1. 确保Parse Server正在运行
  2. 检查网络连接
  3. 检查localStorage中的company是否存在

Q2: 页面显示"群聊不存在"

原因: chatId参数无效或群聊已被删除

解决方法:

  1. 检查URL中的chatId是否正确
  2. 使用上面的脚本查询有效的群聊ID
  3. 如果没有群聊,使用创建测试群聊的脚本

Q3: 消息列表为空

原因: 群聊还没有聊天记录

解决方法:

  1. 这是正常的,新创建的群聊没有历史消息
  2. 可以在企微中发送测试消息
  3. 或者在代码中模拟添加测试消息

Q4: AI辅助回复不工作

原因: 需要配置AI API密钥

解决方法:

  1. 检查fmode-ng配置
  2. 确保AI服务正常运行
  3. 查看浏览器控制台的错误信息

📚 相关文档

💡 快速测试命令

直接在浏览器控制台运行以下命令,获取第一个可用的群聊URL:

(async () => {
  const Parse = (await import('fmode-ng/parse')).FmodeParse.with('nova');
  const cid = localStorage.getItem('company');
  const query = new Parse.Query('GroupChat');
  query.equalTo('company', { __type: 'Pointer', className: 'Company', objectId: cid });
  query.limit(1);
  const chats = await query.find();
  if (chats[0]) {
    const url = `http://localhost:4200/wxwork/${cid}/chat-activation/${chats[0].id}`;
    console.log('🎉 快速访问URL:', url);
    navigator.clipboard?.writeText(url);
    alert('URL已复制!\n' + url);
    window.open(url, '_blank');
  } else {
    console.log('❌ 没有找到群聊,请先创建');
  }
})();

🚀 开始测试

  1. 启动项目

    cd yss-project
    npm start
    
  2. 访问登录页

    http://localhost:4200
    
  3. 登录后,在控制台获取URL: 运行上面的快速测试命令

  4. 打开会话激活页面: 浏览器会自动打开URL或手动访问复制的URL

  5. 测试各项功能: 按照测试checklist逐项验证

祝测试顺利!🎉