📋 项目管理页面优化文档

🎯 优化目标

根据需求对项目管理页面进行简化和功能优化：

页面简约化 - 避免过多展开内容，点击查看详情
群聊信息汇总 - 回复信息汇总和聊天记录一键筛选
未回复提示 - 超过10分钟未回复自动提醒
自动化群聊管理 - 自动发送群介绍、手动拉群
省略冗余信息 - 移除群聊ID等不必要信息

✨ 新增功能

1️⃣ 群聊信息汇总组件 ⭐

位置: src/modules/project/components/group-chat-summary/

核心功能:

📊 消息统计和展示

✅ 显示群聊总消息数
✅ 显示客户消息数
✅ 显示未回复消息数
✅ 折叠/展开设计（默认折叠，保持页面简约）

🔍 智能筛选

✅ 全部消息 - 显示所有群聊消息
✅ 客户消息 - 只显示客户发送的消息
✅ 未回复消息 - 只显示超过10分钟未回复的客户消息

⏰ 未回复提示

✅ 10分钟提醒 - 消息超过10分钟未回复显示黄色警告
✅ 30分钟提醒 - 消息超过30分钟未回复显示红色警告
✅ 徽章提示 - 头部显示未回复消息数量徽章（带脉冲动画）
✅ 推送通知 - 预留推送接口（需后端配合）

🤖 自动化功能

✅ 自动发送群介绍 - 一键发送预设的群介绍文案
✅ 群介绍模板 - 包含服务流程、服务时间、联系方式
✅ 发送状态记录 - 记录群介绍是否已发送，避免重复

📱 快捷操作

✅ 打开群聊 - 直接跳转到企微群聊
✅ 刷新消息 - 手动刷新最新聊天记录

📂 文件结构

src/modules/project/components/group-chat-summary/
├── group-chat-summary.component.ts     # 组件逻辑 (400行)
├── group-chat-summary.component.html   # 模板 (190行)
└── group-chat-summary.component.scss   # 样式 (480行)

🎨 UI设计

折叠状态（默认）

┌────────────────────────────────────┐
│ 💬 群聊信息                    🔴 2 ⌄│
│ 156条消息 · 23条客户消息              │
└────────────────────────────────────┘

展开状态

┌────────────────────────────────────┐
│ 💬 群聊信息                    🔴 2 ⌃│
│ 156条消息 · 23条客户消息              │
├────────────────────────────────────┤
│ ℹ️ 群介绍文案                        │
│ [✓ 群介绍已发送]                    │
├────────────────────────────────────┤
│ [全部 156] [客户消息 23] [未回复 2]  │
├────────────────────────────────────┤
│ 📩 张女士 (客户)          10分钟前   │
│ "我想看看效果图"                     │
│ ⚠️ 10分钟未回复，请及时回复          │
├────────────────────────────────────┤
│ 📩 李先生 (客户)          35分钟前   │
│ "预算大概多少？"                     │
│ 🚨 超过35分钟未回复                  │
├────────────────────────────────────┤
│ [打开群聊] [刷新消息]                │
└────────────────────────────────────┘

🔧 组件接口

Props (Input)

@Input() groupChat: FmodeObject | null;  // 群聊对象
@Input() contact: FmodeObject | null;     // 客户对象
@Input() cid: string;                     // 公司ID

Data Structure

interface ChatMessage {
  id: string;           // 消息ID
  sender: string;       // 发送者ID
  senderName: string;   // 发送者姓名
  content: string;      // 消息内容
  time: Date;           // 发送时间
  isCustomer: boolean;  // 是否为客户消息
  needsReply: boolean;  // 是否需要回复
  replyTime?: Date;     // 回复时间
}

💾 数据对接

GroupChat.data 扩展

{
  data: {
    // 聊天记录
    chatHistory: [{
      msgid: string,        // 消息ID
      from: string,         // 发送者
      fromName: string,     // 发送者姓名
      msgtype: string,      // 消息类型 (text/image/file/voice/video)
      text: {
        content: string     // 文本内容
      },
      msgtime: number,      // 时间戳（秒）
      replyTime?: number    // 回复时间戳（可选）
    }],
    
    // 群介绍
    introSent: boolean,     // 是否已发送群介绍
    introSentAt: Date       // 发送时间
  }
}

企微API调用

// 发送群介绍
await wecorp.appchat.send({
  chatid: string,           // 群聊ID
  msgtype: 'text',          // 消息类型
  text: {
    content: string         // 群介绍文案
  }
});

// 打开群聊（可选）
await wecorp.openChat?.(chatId);

🎯 使用方式

在项目详情页面中使用

HTML:

<!-- 群聊信息汇总（新增） -->
@if (groupChat) {
  <app-group-chat-summary
    [groupChat]="groupChat"
    [contact]="contact"
    [cid]="cid">
  </app-group-chat-summary>
}

TypeScript:

// 1. 导入组件
import { GroupChatSummaryComponent } from '../../components/group-chat-summary/group-chat-summary.component';

// 2. 添加到 imports
@Component({
  imports: [
    // ... 其他组件
    GroupChatSummaryComponent
  ]
})

⚙️ 配置说明

群介绍文案

默认文案位于组件的 loadGroupIntro() 方法中，可根据需求修改：

this.groupIntro = `
欢迎加入映三色设计服务群！👋

我是您的专属设计顾问，很高兴为您服务。

📋 服务流程：
1️⃣ 需求沟通 - 了解您的设计需求
2️⃣ 方案设计 - 提供专业设计方案
3️⃣ 方案优化 - 根据您的反馈调整
4️⃣ 交付执行 - 完成设计并交付

⏰ 服务时间：工作日 9:00-18:00
📞 紧急联系：请直接拨打客服电话

有任何问题随时在群里@我，我会及时回复您！💙
`.trim();

未回复提醒阈值

在组件中可配置不同等级的提醒时间：

// 10分钟未回复 - 黄色警告
if (diff > 10 * 60 * 1000) {
  // 显示警告
}

// 30分钟未回复 - 红色警告
if (diff > 30 * 60 * 1000) {
  // 显示紧急提醒
}

🔔 未回复通知功能

当前实现

/**
 * 发送未回复通知
 */
async sendUnreadNotification() {
  console.log(`⚠️ 有 ${this.unreadCount} 条消息超过10分钟未回复`);
  
  // TODO: 实现企微应用消息推送
  // 需要后端配合实现推送到技术人员手机
}

📊 数据统计

组件会实时统计以下数据：

指标	说明	显示位置
totalMessages	群聊总消息数	头部
customerMessageCount	客户消息数	头部
unreadCount	未回复消息数	徽章

🎨 样式特点

1. 渐变色彩

主色调：紫色渐变 (#667eea → #764ba2)
警告色：黄色渐变 (#ffc409)
危险色：红色渐变 (#eb445a → #ef4444)
信息色：蓝色渐变 (#3dc2ff → #0ea5e9)

2. 动画效果

脉冲动画 - 未回复徽章
滑动展开 - 内容区域
抖动动画 - 未回复筛选按钮
悬停效果 - 所有交互元素

3. 响应式设计

桌面端 - 完整功能
平板端 - 自适应布局
移动端 - 优化交互（单列布局、底部操作栏）

🚀 性能优化

懒加载 - 组件默认折叠，展开后才加载消息
虚拟滚动 - 消息列表限制最大高度，超出滚动
数据缓存 - 消息数据缓存在组件内，避免重复加载
按需查询 - 只在展开时加载聊天记录

📝 注意事项

1. 数据源

聊天记录存储在 GroupChat.data.chatHistory
需要企微后台定期同步群聊消息到Parse数据库

2. 权限控制

只有群成员可以查看消息
只有客服/组长可以发送群介绍

3. 消息类型

支持文本、图片、文件、语音、视频
非文本消息显示为 [图片]、[文件] 等占位符

4. 客户识别

企微外部联系人ID通常以 wm 或 wo 开头
组件通过 isCustomerMessage() 方法自动识别

🔄 未来扩展

计划功能

消息关键词搜索
消息时间范围筛选
导出聊天记录
消息已读/未读状态
快捷回复模板
AI智能回复建议
消息标签分类
客户提及次数统计

✅ 完成清单

群聊信息汇总组件
自动发送群介绍功能
消息筛选（全部/客户/未回复）
未回复消息提示（>10分钟）
集成到项目详情页面
优化页面布局（简约折叠）
响应式设计
动画效果
说明文档

📸 效果预览

折叠状态

占用空间小（约60px高度）
一眼看到未回复数量
点击展开查看详情

展开状态

群介绍发送功能
三种筛选模式
消息列表滚动查看
未回复消息高亮显示
快捷操作按钮

🎉 总结

通过引入群聊信息汇总组件，项目管理页面实现了：

✅ 简约设计 - 默认折叠，需要时展开
✅ 高效筛选 - 一键查看客户消息和未回复
✅ 及时提醒 - 超时消息自动警告
✅ 自动化 - 一键发送群介绍
✅ 省略冗余 - 隐藏群聊ID等技术信息

原有功能完全保留，数据对接逻辑不变！

实现日期: 2025-10-30
文档版本: v1.0
开发者: AI Assistant

PROJECT-MANAGEMENT-OPTIMIZATION.md 11 KB Permalink Istoric Crud

📋 项目管理页面优化文档

🎯 优化目标

✨ 新增功能

1️⃣ 群聊信息汇总组件 ⭐

📊 消息统计和展示

🔍 智能筛选

⏰ 未回复提示

🤖 自动化功能

📱 快捷操作

📂 文件结构

🎨 UI设计

折叠状态（默认）

展开状态

🔧 组件接口

Props (Input)

Data Structure

💾 数据对接

GroupChat.data 扩展

企微API调用

🎯 使用方式

在项目详情页面中使用

⚙️ 配置说明

群介绍文案

未回复提醒阈值

🔔 未回复通知功能

当前实现

推荐实现方案（需后端配合）

方案1: 企微应用消息

方案2: 企微群机器人

📊 数据统计

🎨 样式特点

1. 渐变色彩

2. 动画效果

3. 响应式设计

🚀 性能优化

📝 注意事项

1. 数据源

2. 权限控制

3. 消息类型

4. 客户识别

🔄 未来扩展

计划功能

✅ 完成清单

📸 效果预览

折叠状态

展开状态

🎉 总结

PROJECT-MANAGEMENT-OPTIMIZATION.md 11 KB

Permalink Istoric Crud