# 会话激活页面 - 完整使用指南

## 🎯 快速开始

### 方法1：使用HTML工具（推荐）

1. **打开测试工具**：
```bash
# 在浏览器中打开
yss-project/GET-CHAT-ACTIVATION-TEST-URL.html
```

2. **点击按钮**：
   - 📡 **获取所有群聊地址** - 列出所有现有群聊
   - ➕ **创建测试群聊** - 创建新的测试数据
   - 💾 **配置本地存储** - 自动配置localStorage

3. **复制或打开URL**：
   - 点击"复制"按钮复制地址
   - 点击"打开"按钮直接访问

### 方法2：浏览器控制台

1. **启动项目**：
```bash
cd yss-project
npm start
```

2. **打开浏览器** (http://localhost:4200)

3. **打开控制台** (F12)，运行：

```javascript
// 🚀 一键获取测试地址
(async()=>{
  try {
    // 配置
    const cid='cDL6R1hgSi';
    const userid='woAs2qCQAAGQckyg7AQBxhMEoSwnlTvg';
    
    // 设置localStorage
    localStorage.setItem('company',cid);
    localStorage.setItem(`${cid}/USERINFO`,JSON.stringify({
      userid:userid,
      errcode:0,
      errmsg:'ok',
      cid:cid
    }));
    console.log('✅ localStorage配置成功');
    
    // 导入Parse
    const{FmodeParse}=await import('fmode-ng/parse');
    const Parse=FmodeParse.with('nova');
    
    // 查询群聊
    const query=new Parse.Query('GroupChat');
    query.equalTo('company',{__type:'Pointer',className:'Company',objectId:cid});
    query.include('project');
    query.descending('createdAt');
    query.limit(10);
    
    const chats=await query.find();
    
    if(chats.length>0){
      console.log(`\n✅ 找到 ${chats.length} 个群聊：\n`);
      
      chats.forEach((chat,i)=>{
        const url=`http://localhost:4200/wxwork/${cid}/chat-activation/${chat.id}`;
        const name=chat.get('name')||'未命名';
        const project=chat.get('project');
        const projectName=project?project.get('title'):'无项目';
        
        console.log(`${i+1}. ${name}`);
        console.log(`   项目: ${projectName}`);
        console.log(`   🔗 ${url}\n`);
      });
      
      // 复制第一个
      const firstUrl=`http://localhost:4200/wxwork/${cid}/chat-activation/${chats[0].id}`;
      await navigator.clipboard.writeText(firstUrl);
      alert(`✅ 已复制第一个群聊地址！\n\n${chats[0].get('name')}\n\n${firstUrl}\n\n点击确定后自动打开...`);
      setTimeout(()=>window.open(firstUrl,'_blank'),500);
      
    }else{
      // 创建测试群聊
      console.log('⚠️ 未找到群聊，正在创建测试数据...');
      
      const GroupChat=Parse.Object.extend('GroupChat');
      const testChat=new GroupChat();
      
      testChat.set('name','测试群聊 - '+new Date().toLocaleString('zh-CN'));
      testChat.set('company',{__type:'Pointer',className:'Company',objectId:cid});
      testChat.set('chat_id','test_chat_'+Date.now());
      testChat.set('member_list',[
        {type:1,userid:'tech_001',name:'技术员-张三',avatar:''},
        {type:2,userid:'customer_001',name:'客户-李四',avatar:''},
        {type:2,userid:'customer_002',name:'客户-王五',avatar:''}
      ]);
      testChat.set('messages',[
        {msgid:'msg_001',from:'customer_001',msgtime:Math.floor(Date.now()/1000)-3600,msgtype:'text',text:{content:'你好，我想咨询一下项目进度'}},
        {msgid:'msg_002',from:'tech_001',msgtime:Math.floor(Date.now()/1000)-3500,msgtype:'text',text:{content:'您好，项目正在进行中，预计本周完成'}},
        {msgid:'msg_003',from:'customer_001',msgtime:Math.floor(Date.now()/1000)-700,msgtype:'text',text:{content:'可以帮我修改一下需求吗？'}},
        {msgid:'msg_004',from:'customer_002',msgtime:Math.floor(Date.now()/1000)-300,msgtype:'text',text:{content:'设计稿什么时候能出来？'}}
      ]);
      
      const saved=await testChat.save();
      const url=`http://localhost:4200/wxwork/${cid}/chat-activation/${saved.id}`;
      
      console.log(`\n✅ 测试群聊创建成功！`);
      console.log(`群聊名称: ${saved.get('name')}`);
      console.log(`群聊ID: ${saved.id}`);
      console.log(`🔗 ${url}\n`);
      
      await navigator.clipboard.writeText(url);
      alert(`✅ 测试群聊已创建！地址已复制\n\n${url}\n\n点击确定后自动打开...`);
      setTimeout(()=>window.open(url,'_blank'),500);
    }
    
  }catch(e){
    console.error('❌ 错误:',e);
    alert('❌ 发生错误: '+e.message+'\n\n请确保：\n1. 项目已启动\n2. Parse Server已连接');
  }
})();
```

---

## 📱 URL格式

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

**参数说明**：
- `{cid}` - 公司ID：`cDL6R1hgSi`
- `{chatId}` - 群聊ID：从Parse数据库`GroupChat`表的`objectId`

**示例**：
```
http://localhost:4200/wxwork/cDL6R1hgSi/chat-activation/Abc123Xyz456
```

---

## 🔑 配置信息

### 您的企业微信配置

```javascript
{
  "cid": "cDL6R1hgSi",
  "userid": "woAs2qCQAAGQckyg7AQBxhMEoSwnlTvg",
  "errcode": 0,
  "errmsg": "ok"
}
```

### localStorage配置

组件会自动配置，也可以手动设置：

```javascript
localStorage.setItem('company', 'cDL6R1hgSi');
localStorage.setItem('cDL6R1hgSi/USERINFO', JSON.stringify({
  userid: 'woAs2qCQAAGQckyg7AQBxhMEoSwnlTvg',
  errcode: 0,
  errmsg: 'ok',
  cid: 'cDL6R1hgSi'
}));
```

---

## 🎨 页面功能

### 1. 群聊信息显示
- ✅ 群聊名称
- ✅ 成员数量
- ✅ 关联项目

### 2. 入群方式（3种）
- ✅ **二维码入群** - 显示群聊二维码
- ✅ **复制链接入群** - 一键复制入群链接
- ✅ **手动拉群** - 打开企微群聊

### 3. 消息筛选（3个按钮）
- ✅ **全部消息** - 显示所有消息
- ✅ **客户消息** - 只显示客户发送的消息
- ✅ **未回复** - 只显示超过10分钟未回复的消息

### 4. AI辅助回复
- ✅ 点击"辅助回复"按钮
- ✅ AI分析消息内容和项目背景
- ✅ 生成3-5条专业回复建议
- ✅ 一键发送选中的回复

### 5. 自动化文案
- ✅ 点击"发送群介绍"按钮
- ✅ 自动发送项目介绍（主管、技术、需求）
- ✅ 记录发送状态

### 6. 下拉刷新
- ✅ 下拉页面刷新数据
- ✅ 头部刷新按钮
- ✅ 流畅的刷新动画

### 7. 手机端适配
- ✅ 响应式布局
- ✅ 触摸优化
- ✅ 完美适配各种屏幕

---

## 🔧 数据结构

### GroupChat表

```typescript
{
  objectId: string;           // 群聊ID（用于URL）
  chat_id: string;            // 企微群聊ID
  name: string;               // 群聊名称
  company: Pointer<Company>;  // 公司指针
  project: Pointer<Project>;  // 项目指针
  
  member_list: Array<{
    type: 1 | 2;              // 1=内部成员, 2=外部联系人
    userid: string;           // 用户ID
    name: string;             // 姓名
    avatar?: string;          // 头像URL
  }>;
  
  messages: Array<{
    msgid: string;            // 消息ID
    from: string;             // 发送者ID
    msgtime: number;          // 时间戳（秒）
    msgtype: string;          // 消息类型
    text?: { content: string };
  }>;
  
  joinUrl?: { join_url: string };      // 入群链接
  joinQrcode?: { qr_code: string };    // 入群二维码
  introSent?: boolean;                  // 是否已发送介绍
  introSentAt?: Date;                   // 发送时间
}
```

---

## 🚀 企业微信API对接

### 已实现的API调用

```typescript
// 1. 获取群聊详情
const chatInfo = await wecorp.externalContact.groupChat.get(chatId);

// 2. 获取入群方式
const config_id = await wecorp.externalContact.groupChat.addJoinWay({
  scene: 1, // 1=群聊列表, 2=二维码
  chat_id_list: [chatId]
});

const joinWay = await wecorp.externalContact.groupChat.getJoinWay(config_id);

// 3. 发送消息到群聊
await wecorp.message.send({
  chatid: chatId,
  msgtype: 'text',
  text: { content: '消息内容' }
});
```

### 数据同步流程

```
页面初始化
  ↓
从Parse加载缓存数据
  ↓
调用企微API同步最新信息
  ↓
更新成员列表和群聊名称
  ↓
保存到Parse数据库
  ↓
显示在页面
```

---

## 📊 测试数据

### 创建测试群聊包含：

- **3个成员**：1个技术员 + 2个客户
- **4条消息**：包含1条超时未回复的消息
- **完整数据**：member_list、messages、data字段

### 消息示例：

1. **客户消息**（1小时前）："你好，我想咨询一下项目进度"
2. **技术回复**（58分钟前）："您好，项目正在进行中，预计本周完成"
3. **客户消息**（12分钟前，未回复）："可以帮我修改一下需求吗？"
4. **客户消息**（5分钟前）："设计稿什么时候能出来？"

---

## ⚠️ 常见问题

### Q1: 页面显示"未找到群聊"

**原因**：
1. chatId无效
2. 数据库中没有该群聊记录
3. company字段不匹配

**解决**：
1. 使用HTML工具或控制台脚本创建测试群聊
2. 检查URL中的chatId是否正确
3. 确认群聊的company字段为`cDL6R1hgSi`

### Q2: 企微SDK初始化失败

**原因**：缺少localStorage配置

**解决**：
```javascript
localStorage.setItem('company', 'cDL6R1hgSi');
localStorage.setItem('cDL6R1hgSi/USERINFO', JSON.stringify({
  userid: 'woAs2qCQAAGQckyg7AQBxhMEoSwnlTvg',
  cid: 'cDL6R1hgSi'
}));
```

### Q3: 消息列表为空

**原因**：
1. GroupChat的messages字段为空
2. 筛选条件过滤了所有消息

**解决**：
1. 创建包含测试消息的群聊
2. 点击"全部消息"查看所有消息
3. 检查Parse数据库中的messages字段

### Q4: AI回复生成失败

**原因**：
1. AI服务不可用
2. 网络问题

**解决**：
1. 查看控制台错误信息
2. 使用默认回复（关键词匹配）
3. 确认网络连接正常

### Q5: 下拉刷新不工作

**原因**：ion-content配置问题

**解决**：
1. 确认使用了`<ion-content>`包裹内容
2. 检查`handleRefresh`方法
3. 查看控制台错误

---

## 📝 开发者参考

### 关键文件

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

src/modules/project/services/
└── chat-message-ai.service.ts        # AI服务

src/app/app.routes.ts                 # 路由配置
```

### 路由配置

```typescript
{
  path: 'wxwork/:cid',
  children: [
    {
      path: 'chat-activation/:chatId',
      loadComponent: () => import('./chat-activation.component').then(m => m.ChatActivationComponent),
      title: '会话激活'
    }
  ]
}
```

### 核心方法

```typescript
// 初始化
ngOnInit() {
  this.cid = this.route.snapshot.paramMap.get('cid');
  this.chatId = this.route.snapshot.paramMap.get('chatId');
  await this.initializeSDK();
  await this.loadData();
}

// 加载数据
async loadData() {
  // 从Parse加载群聊
  const gcQuery = new Parse.Query('GroupChat');
  gcQuery.equalTo('objectId', this.chatId);
  gcQuery.include('project');
  this.groupChat = await gcQuery.first();
  
  // 同步企微信息
  if (this.wecorp && this.groupChat) {
    const chatInfo = await this.wecorp.externalContact.groupChat.get(
      this.groupChat.get('chat_id')
    );
    // 更新数据...
  }
}

// AI生成回复
async generateSuggestedReplies(message: ChatMessage) {
  const suggestions = await this.chatAI.generateReplySuggestions({
    customerMessage: message.content,
    projectContext: {...},
    chatHistory: [...]
  });
}

// 下拉刷新
async handleRefresh(event: any) {
  await this.loadData();
  event.target.complete();
}
```

---

## 🎉 总结

### ✅ 已完成功能

1. ✅ 企业微信完整对接（使用您的密钥）
2. ✅ AI辅助回复生成
3. ✅ 下拉刷新功能
4. ✅ 手机端完美适配
5. ✅ 消息筛选（全部/客户/未回复）
6. ✅ 三种入群方式
7. ✅ 自动化群介绍
8. ✅ 超时未回复提醒

### 🚀 快速测试

1. 打开 `GET-CHAT-ACTIVATION-TEST-URL.html`
2. 点击"获取所有群聊地址"或"创建测试群聊"
3. 复制URL并访问
4. 测试所有功能

### 📞 技术支持

如有问题，请提供：
1. 浏览器控制台完整错误信息
2. 使用的URL地址
3. Parse Server运行状态
4. localStorage数据截图

---

**所有功能已完成！现在可以开始测试了。** 🎉