# 会话激活页面访问指南

## 🎯 页面说明

**会话激活（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获取**
```javascript
// 在浏览器控制台执行
const cid = localStorage.getItem('company');
console.log('公司ID:', cid);
```

**方法B：从后台数据库查询**
```javascript
// 在浏览器控制台执行
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：查询所有群聊**
```javascript
// 在浏览器控制台执行
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：根据项目查找群聊**
```javascript
// 在浏览器控制台执行
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：创建测试群聊（如果没有）

```javascript
// 在浏览器控制台执行
(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. 查看浏览器控制台的错误信息

## 📚 相关文档

- [会话激活功能指南](./CHAT-ACTIVATION-GUIDE.md)
- [会话激活集成文档](./CHAT-ACTIVATION-INTEGRATION.md)
- [本地测试指南](./CHAT-ACTIVATION-LOCAL-TEST.md)

## 💡 快速测试命令

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

```javascript
(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. **启动项目**：
   ```bash
   cd yss-project
   npm start
   ```

2. **访问登录页**：
   ```
   http://localhost:4200
   ```

3. **登录后，在控制台获取URL**：
   运行上面的快速测试命令

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

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

祝测试顺利！🎉