Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
nkkj
/
yss-project
3
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Drzewo: 88c760b8e2
Gałęzie Tagi
yss-project
/
DELIVERY_MESSAGE_IMPLEMENTATION.md

DELIVERY_MESSAGE_IMPLEMENTATION.md 8.9 KB
Historia Czysty

交付执行阶段消息发送功能 - 实施总结

📋 实施概述

按照用户最新需求，为交付执行阶段添加了消息发送功能，集成在右侧上传区域，不添加左侧消息面板。组员上传文件后，可选择预设话术或自定义消息，配合图片灵活发送，消息记录保存在Project.data.deliveryMessages中。

✅ 已完成功能

1. 消息服务层 (DeliveryMessageService)

文件: src/app/pages/services/delivery-message.service.ts

核心功能:

  • ✅ 预设话术管理（白模、软装、渲染、后期）
  • ✅ 创建文本消息
  • ✅ 创建图片消息
  • ✅ 创建图文消息
  • ✅ 消息保存到项目data字段
  • ✅ 获取项目所有消息
  • ✅ 获取特定阶段消息

数据存储:

Project.data.deliveryMessages = [
  {
    id: string;
    project: string;              // 项目ID
    stage: string;                // 阶段 (white_model/soft_decor/rendering/post_process)
    messageType: MessageType;     // 消息类型 (text/image/text_with_image)
    content: string;              // 文本内容
    images?: string[];            // 图片URL数组
    sentBy: string;               // 发送人ID
    sentByName?: string;          // 发送人姓名
    sentAt: Date;                 // 发送时间
  }
]

预设话术:

{
  white_model: [
    '老师我这里硬装模型做好了，看下是否有问题，如果没有，我去做渲染',
    '老师，白模阶段完成，请查看确认',
    '硬装结构已完成，请审阅'
  ],
  soft_decor: [
    '软装好了，准备渲染，有问题可以留言',
    '老师，软装设计已完成，请查看',
    '家具配置完成，准备进入渲染阶段'
  ],
  rendering: [
    '老师，渲染图已完成，请查看效果',
    '效果图已出，请审阅',
    '渲染完成，请查看是否需要调整'
  ],
  post_process: [
    '老师，后期处理完成，请验收',
    '最终成品已完成，请查看',
    '所有修图完成，请确认'
  ]
}

2. UI集成（交付执行页面）

修改文件:

  • src/modules/project/pages/project-detail/stages/stage-delivery.component.ts
  • src/modules/project/pages/project-detail/stages/stage-delivery-new.component.html
  • src/modules/project/pages/project-detail/stages/stage-delivery-new.component.scss

集成内容:

2.1 图片快捷发送按钮

在每张图片缩略图右下角添加发送按钮：

<button class="send-image-btn" 
        (click)="sendSingleImage(space.id, type.id, file.url)"
        title="发送图片">
  <svg>发送图标</svg>
</button>

特性:

  • 悬停显示按钮
  • 点击直接发送单张图片
  • 绿色渐变背景
  • 即时反馈提示

2.2 阶段发送消息按钮

在每个阶段的"添加文件"按钮旁边添加"发送消息"按钮：

<button class="send-message-btn" 
        (click)="openMessageModal(space.id, type.id)">
  <svg>发送图标</svg>
  发送消息
</button>

特性:

  • 并排显示两个按钮
  • 打开消息发送弹窗
  • 自动携带该阶段所有图片

2.3 消息发送弹窗

位置: 全屏居中弹窗

内容:

  1. 阶段信息

    • 显示空间名称
    • 显示阶段名称
    • 显示图片数量

  2. 话术选择

    • 显示该阶段的预设话术
    • 点击选择话术
    • 高亮显示选中的话术

  3. 自定义消息

    • 文本框输入
    • 500字限制
    • 实时字数统计
    • 优先级高于预设话术

  4. 图片预览

    • 3列网格展示
    • 最多显示6张
    • 超出显示"+N"

  5. 操作按钮

    • 取消按钮
    • 发送按钮（带loading状态）
    • 发送成功提示

3. 组件方法实现

StageDeliveryComponent新增方法:

// 打开消息弹窗
openMessageModal(spaceId: string, stage: string, imageUrls?: string[]): void

// 关闭消息弹窗
closeMessageModal(): void

// 选择话术模板
selectTemplate(template: string): void

// 发送消息
async sendMessage(): Promise<void>

// 快捷发送单张图片
async sendSingleImage(spaceId: string, stage: string, imageUrl: string): Promise<void>

// 上传完成后提示发送消息（可选）
promptSendMessageAfterUpload(spaceId: string, stage: string): void

🎨 UI/UX 设计亮点

1. 图片发送按钮

  • ✨ 绿色渐变背景（#10b981 → #059669）
  • ✨ 悬停显示，平时隐藏
  • ✨ 位于图片右下角
  • ✨ 即点即发，快捷便利

2. 阶段发送按钮

  • ✨ 与"添加文件"按钮并排
  • ✨ 绿色主题，醒目显眼
  • ✨ 悬停动画效果
  • ✨ 自动携带阶段图片

3. 消息弹窗

  • ✨ 全屏居中显示
  • ✨ 毛玻璃背景
  • ✨ 滑入动画
  • ✨ 话术卡片式选择
  • ✨ 实时字数统计
  • ✨ 图片网格预览
  • ✨ 发送loading状态

📊 使用流程

流程1：快捷发送单张图片

上传图片 → 悬停缩略图 → 点击发送按钮 → 即刻发送

流程2：批量发送阶段图片

上传多张图片 → 点击"发送消息"按钮 → 选择话术或输入自定义消息 → 预览图片 → 点击发送

流程3：只发文本消息

点击"发送消息"按钮 → 选择话术或输入自定义消息 → 点击发送

💾 数据结构

Project.data新增字段

{
  deliveryMessages: [
    {
      id: "msg_1699999999999_abc123def",
      project: "项目ID",
      stage: "white_model",
      messageType: "text_with_image",
      content: "老师我这里硬装模型做好了，看下是否有问题...",
      images: [
        "https://example.com/image1.jpg",
        "https://example.com/image2.jpg"
      ],
      sentBy: "用户ID",
      sentByName: "张三",
      sentAt: "2025-11-18T12:00:00.000Z"
    }
  ]
}

🔧 技术实现要点

1. 服务层设计

  • 独立的DeliveryMessageService
  • 预设话术配置化
  • 消息类型支持text/image/text_with_image
  • 自动生成消息ID

2. 状态管理

showMessageModal: boolean              // 弹窗显示状态
messageModalConfig: {...}              // 弹窗配置
selectedTemplate: string               // 选中的话术
customMessage: string                  // 自定义消息
sendingMessage: boolean                // 发送中状态
messageTemplates = MESSAGE_TEMPLATES   // 话术模板

3. 数据持久化

  • 保存到Project.data.deliveryMessages数组
  • 支持历史消息查询
  • 支持按阶段筛选消息

4. 用户体验优化

  • 快捷发送：一键发送单张图片
  • 批量发送：选择话术+多图
  • 自定义优先：自定义消息优先级高于模板
  • 即时反馈：toast提示发送成功

📝 与原有功能的集成

不影响原有功能

  • ✅ 不添加左侧消息面板
  • ✅ 保持原有简洁布局
  • ✅ 文件上传功能不变
  • ✅ 阶段管理功能不变

无缝集成

  • ✅ 按钮与原有按钮风格统一
  • ✅ 弹窗与工单弹窗风格统一
  • ✅ 数据存储在同一位置（Project.data）
  • ✅ 服务层独立，不耦合

🚀 后续可扩展功能（TODO）

1. 企业微信推送

// 在DeliveryMessageService中
private async notifyWechat(message: DeliveryMessage): Promise<void> {
  // TODO: 调用企业微信API发送通知
}

2. 消息历史记录查看

  • 添加"查看消息记录"按钮
  • 弹窗展示项目所有消息
  • 按阶段筛选
  • 按时间排序

3. @提醒功能

  • 在自定义消息中支持@某人
  • 触发特定人员通知

4. 消息模板管理

  • 管理员端配置话术模板
  • 支持增删改
  • 支持多语言

📦 文件清单

新增文件

src/app/pages/services/
  └── delivery-message.service.ts              // 消息服务

修改文件

src/modules/project/pages/project-detail/stages/
  ├── stage-delivery.component.ts              // 组件逻辑
  ├── stage-delivery-new.component.html        // UI模板
  └── stage-delivery-new.component.scss        // 样式

文档文件

DELIVERY_MESSAGE_IMPLEMENTATION.md             // 实施总结（本文档）
DELIVERY_REVISION_IMPLEMENTATION.md            // 改图工单实施总结
DELIVERY_ENHANCEMENT_OVERVIEW.md               // 增强方案总览

✨ 核心特性总结

  1. ❌ 不添加左侧消息面板 - 沟通在企业微信
  2. ✅ 集成在右侧上传区 - 不破坏原有布局
  3. ✅ 预设话术选择 - 白模、软装、渲染、后期
  4. ✅ 自定义消息输入 - 灵活表达
  5. ✅ 快捷发送图片 - 一键发送
  6. ✅ 批量发送图片 - 配合话术
  7. ✅ 数据打通 - 存储在Project.data
  8. ✅ 用户友好 - UI精美，操作直观

🎯 实施效果

  • ✅ 保持简洁布局，不添加消息面板
  • ✅ 提供话术选择和自定义输入
  • ✅ 支持快捷发送和批量发送
  • ✅ 消息记录完整保存
  • ✅ UI精美，操作流畅
  • ✅ 数据打通，统一管理

完成时间：2025-11-18 实施人：Cascade AI Assistant