企微项目管理模块 - 真实服务集成完成

🎯 集成概述

已完成企微项目管理模块与真实服务的全面集成，包括文件上传、AI能力和企微SDK功能。

完成时间: 2025-10-16 集成服务: 3个核心服务模块 更新组件: 2个阶段组件

📦 新增服务模块

1. NovaUploadService (文件上传服务)

文件: /src/modules/project/services/upload.service.ts

核心功能:

✅ 单文件/批量上传到Parse Server
✅ 图片压缩（支持设置最大宽高和质量）
✅ 缩略图生成
✅ 文件类型验证
✅ 文件大小验证
✅ 上传进度回调
✅ 文件下载
✅ 文件大小格式化

使用示例:

// 上传图片并压缩
const url = await this.uploadService.uploadFile(file, {
  compress: true,
  maxWidth: 1920,
  maxHeight: 1920,
  onProgress: (progress) => {
    console.log('上传进度:', progress);
  }
});

// 批量上传
const urls = await this.uploadService.uploadFiles(files, {
  compress: true,
  onProgress: (current, total) => {
    console.log(`${current}/${total}`);
  }
});

// 验证文件
const isValid = this.uploadService.validateFileType(file, ['image/*']);
const isSizeOk = this.uploadService.validateFileSize(file, 10); // 10MB

2. ProjectAIService (AI服务)

文件: /src/modules/project/services/ai.service.ts

核心功能:

✅ 设计方案生成（基于需求+参考图片）
✅ 项目复盘生成（基于项目数据）
✅ 图片内容识别（OCR + 理解）
✅ 支付凭证OCR识别
✅ 色彩提取分析
✅ 流式文本生成

技术实现:

// 引入fmode-ng AI能力
import { completionJSON, FmodeChatCompletion } from 'fmode-ng/lib/core/agent';

// 使用模型
const ProjectAIModel = 'fmode-1.6-cn';

使用示例:

// 1. 生成设计方案
const solution = await this.aiService.generateDesignSolution(
  requirements, // 需求信息
  {
    images: imageUrls, // 参考图片URL数组
    onProgress: (content) => {
      console.log('生成中:', content.length);
    }
  }
);

// 返回结构化数据:
// {
//   generated: true,
//   content: "...",
//   spaces: [{
//     name: "客厅",
//     styleDescription: "...",
//     colorPalette: ["#FFFFFF", ...],
//     materials: ["木纹饰面", ...],
//     furnitureRecommendations: ["..."]
//   }],
//   estimatedCost: 150000,
//   timeline: "预计60个工作日..."
// }

// 2. 生成项目复盘
const retrospective = await this.aiService.generateProjectRetrospective(
  {
    title: "某某项目",
    type: "整屋设计",
    duration: 45,
    customerRating: 5,
    challenges: ["CAD图纸延期"]
  },
  {
    onProgress: (content) => { ... }
  }
);

// 返回结构化数据:
// {
//   generated: true,
//   summary: "项目整体执行顺利...",
//   highlights: ["亮点1", "亮点2"],
//   challenges: ["挑战1", "挑战2"],
//   lessons: ["教训1", "教训2"],
//   recommendations: ["建议1", "建议2"]
// }

// 3. OCR识别支付凭证
const ocrResult = await this.aiService.recognizePaymentVoucher(imageUrl);

// 返回:
// {
//   amount: 50000.00,
//   paymentTime: "2025-01-15 14:30:00",
//   paymentMethod: "银行转账",
//   payer: "张三",
//   payee: "映三色设计",
//   confidence: 0.95
// }

// 4. 图片识别（通用）
const result = await this.aiService.recognizeImages(
  imageUrls,
  "请识别图片中的内容...",
  {
    outputSchema: `{"description": "...", "keywords": []}`,
    onProgress: (content) => { ... }
  }
);

// 5. 提取色彩
const colors = await this.aiService.extractColors(imageUrls);

// 返回:
// {
//   colors: [
//     {hex: "#FFFFFF", name: "主色", usage: "墙面"},
//     ...
//   ],
//   atmosphere: "温馨",
//   description: "整体色彩氛围描述"
// }

// 6. 流式生成（适合长文本）
const subscription = this.aiService.streamCompletion(
  "请生成...",
  { model: ProjectAIModel }
).subscribe({
  next: (message) => {
    const content = message?.content || '';
    // 实时显示内容
    if (message?.complete) {
      // 生成完成
    }
  },
  error: (err) => {
    console.error(err);
  }
});

3. WxworkSDKService (企微SDK服务)

文件: /src/modules/project/services/wxwork-sdk.service.ts

核心功能:

✅ JSAPI注册与签名
✅ 获取当前聊天对象（群聊/联系人）
✅ 获取当前用户信息
✅ 同步群聊信息到GroupChat表
✅ 同步联系人信息到ContactInfo表
✅ 创建群聊
✅ 添加成员到群聊
✅ 打开指定群聊
✅ 选择企业联系人
✅ 平台判断（企微/微信/H5）

企业配置:

// 映三色配置
private companyMap: any = {
  'cDL6R1hgSi': { // 映三色账套ID
    corpResId: 'SpL6gyD1Gu' // 企业号资源ID
  }
};

// 应用套件配置
private suiteMap: any = {
  'crm': {
    suiteId: 'dk2559ba758f33d8f5' // CRM应用套件ID
  }
};

使用示例:

// 1. 初始化SDK
await this.wxworkService.initialize(cid, 'crm');

// 2. 获取当前聊天对象
const { GroupChat, Contact, currentChat } =
  await this.wxworkService.getCurrentChatObject();

if (GroupChat) {
  // 群聊场景
  console.log('群聊名称:', GroupChat.get('name'));
  console.log('群聊ID:', GroupChat.get('chat_id'));
}

if (Contact) {
  // 单聊场景
  console.log('联系人:', Contact.get('name'));
  console.log('手机号:', Contact.get('mobile'));
}

// 3. 获取当前用户
const currentUser = await this.wxworkService.getCurrentUser();
const role = currentUser?.get('role'); // 客服/组员/组长/管理员
const name = currentUser?.get('name');

// 4. 创建群聊
const result = await this.wxworkService.createGroupChat({
  groupName: '项目群-客厅设计',
  userIds: ['userid1', 'userid2'], // 内部员工
  externalUserIds: ['external_userid'] // 外部客户
});

// 5. 添加成员到群聊
await this.wxworkService.addUserToGroup({
  chatId: 'chat_id_xxx',
  userIds: ['userid3'],
  externalUserIds: ['external_userid2']
});

// 6. 打开指定群聊（客户端跳转）
await this.wxworkService.openChat('chat_id_xxx');

// 7. 选择企业联系人
const selected = await this.wxworkService.selectEnterpriseContact({
  mode: 'multi', // single | multi
  type: ['department', 'user']
});

// 返回:
// {
//   userList: [{userId: '...', name: '...'}],
//   departmentList: [{departmentId: '...', name: '...'}]
// }

🔄 更新的组件

1. stage-requirements.component (确认需求阶段)

更新内容:

文件上传

// 原来: 使用Mock数据
const mockUrl = URL.createObjectURL(file);

// 现在: 真实上传到Parse Server
const url = await this.uploadService.uploadFile(file, {
  compress: true,
  maxWidth: 1920,
  maxHeight: 1920,
  onProgress: (progress) => {
    console.log('上传进度:', progress);
  }
});

CAD文件上传

// 添加文件类型验证
const allowedTypes = [
  'application/acad',
  'application/x-acad',
  'application/dxf',
  'image/vnd.dwg',
  'image/x-dwg',
  'application/pdf'
];

// 添加文件大小验证 (50MB)
if (!this.uploadService.validateFileSize(file, 50)) {
  alert('文件大小不能超过50MB');
  return;
}

AI方案生成

// 原来: 使用模拟数据
const response = await this.callAIService(prompt);
this.aiSolution = this.parseAIResponse(response);

// 现在: 调用真实AI服务
const result = await this.aiService.generateDesignSolution(
  this.requirements,
  {
    images: this.referenceImages.map(img => img.url),
    onProgress: (content) => {
      console.log('生成进度:', content.length);
    }
  }
);
this.aiSolution = result;

2. stage-aftercare.component (售后归档阶段)

更新内容:

支付凭证OCR识别

// 原来: 使用模拟OCR结果
const ocrResult = {
  amount: 50000,
  paymentTime: new Date(),
  paymentMethod: '银行转账'
};

// 现在: 调用真实OCR服务
try {
  const ocrResult = await this.aiService.recognizePaymentVoucher(url);

  // 显示识别结果
  alert(`OCR识别成功!
金额: ¥${ocrResult.amount}
方式: ${ocrResult.paymentMethod}
置信度: ${ocrResult.confidence}`);

} catch (ocrError) {
  // OCR失败，仍保存图片但需手动输入
  alert('凭证已上传，但OCR识别失败，请手动核对金额');
}

AI项目复盘

// 原来: 使用模拟数据
const response = await this.callAIService(prompt);
this.projectRetrospective = this.parseRetrospectiveResponse(response);

// 现在: 调用真实AI服务
const projectData = {
  title: this.project.get('title'),
  type: this.project.get('type'),
  duration: this.calculateProjectDuration(),
  customerRating: this.customerFeedback.rating,
  challenges: this.extractChallenges()
};

const result = await this.aiService.generateProjectRetrospective(
  projectData,
  {
    onProgress: (content) => {
      console.log('生成进度:', content.length);
    }
  }
);

this.projectRetrospective = result;

🎨 关键技术细节

completionJSON 使用（图片识别）

import { completionJSON } from 'fmode-ng/lib/core/agent';

// 使用vision模式识别图片
const result = await completionJSON(
  prompt,
  outputSchema, // JSON结构定义
  (content) => {
    // 进度回调
    onProgress?.(content);
  },
  3, // 最大重试次数
  {
    model: ProjectAIModel,
    vision: true, // 启用视觉模型
    images: imageUrls // 图片URL数组
  }
);

特点:

完全替代传统OCR
不仅识别文字，还能理解内容
支持结构化输出
支持多图联合分析

FmodeChatCompletion 使用（流式生成）

import { FmodeChatCompletion } from 'fmode-ng/lib/core/agent';

const messageList = [
  {
    role: 'user',
    content: prompt
  }
];

const completion = new FmodeChatCompletion(messageList, {
  model: ProjectAIModel,
  temperature: 0.7
});

const subscription = completion.sendCompletion({
  isDirect: true
}).subscribe({
  next: (message) => {
    const content = message?.content || '';
    // 实时显示
    onContentChange?.(content);

    if (message?.complete) {
      // 生成完成
      resolve(content);
    }
  },
  error: (err) => {
    reject(err);
    subscription?.unsubscribe();
  }
});

特点:

流式输出，实时显示
支持长文本生成
Observable模式，易于取消

企微JSSDK使用（客户端跳转）

import * as ww from '@wecom/jssdk';

// 打开企微群聊（客户端跳转，不使用API）
await ww.openEnterpriseChat({
  externalUserIds: [],
  groupName: '',
  chatId: chatId, // 目标群聊ID
  success: () => {
    console.log('跳转成功');
  },
  fail: (err) => {
    console.error('跳转失败:', err);
  }
});

对比:

// ❌ 不使用API（需要后端调用）
await this.wecorp.appchat.send(...);

// ✅ 使用JSSDK（客户端直接跳转）
await ww.openEnterpriseChat({...});

📊 数据流转

文件上传流程

用户选择文件
    ↓
文件类型/大小验证
    ↓
图片压缩（可选）
    ↓
创建Parse File对象
    ↓
上传到Parse Server
    ↓
返回文件URL
    ↓
保存到项目data字段

AI方案生成流程

收集需求信息
    ↓
构建提示词（含参考图片URL）
    ↓
调用completionJSON（vision模式）
    ↓
解析返回的JSON结构
    ↓
保存到project.data.aiSolution
    ↓
显示给用户

OCR识别流程

上传支付凭证图片
    ↓
获取图片URL
    ↓
调用recognizePaymentVoucher
    ↓
completionJSON（vision=true）
    ↓
提取金额/时间/方式等信息
    ↓
更新已支付金额
    ↓
更新支付状态

企微群聊跳转流程

用户点击"打开群聊"按钮
    ↓
调用wxworkService.openChat(chatId)
    ↓
ww.openEnterpriseChat({chatId: ...})
    ↓
企微客户端接管
    ↓
跳转到指定群聊

✅ 测试检查清单

文件上传测试

图片上传（JPG/PNG/WEBP）
图片压缩功能
CAD文件上传（DWG/DXF/PDF）
文件大小限制
上传进度显示
上传失败处理

AI功能测试

设计方案生成（无参考图）
设计方案生成（含参考图）
项目复盘生成
支付凭证OCR识别
色彩提取分析
生成失败处理

企微SDK测试

JSAPI注册
获取群聊信息
获取联系人信息
获取当前用户
同步数据到Parse表
打开群聊跳转
创建群聊
添加群成员
选择企业联系人

🚀 部署注意事项

1. Parse Server配置

确保Parse Server已部署并配置：

文件存储适配器（AWS S3 / 阿里云OSS / Parse Files）
CORS设置允许文件上传
文件大小限制配置

2. AI模型配置

确保fmode-ng AI服务已配置：

模型ID: fmode-1.6-cn
API密钥配置
请求频率限制

3. 企微应用配置

确保企业微信应用已配置：

可信域名: app.fmode.cn
IP白名单
JSAPI权限:
- getContext
- getCurExternalChat
- getCurExternalContact
- createCorpGroupChat
- updateCorpGroupChat
- openEnterpriseChat
- selectEnterpriseContact
回调URL配置

4. 环境变量

// src/app/app.config.ts
localStorage.setItem("company", "cDL6R1hgSi"); // 映三色账套ID

📚 参考文档

🎉 总结

本次集成完成了企微项目管理模块从Mock数据到真实服务的全面升级：

✅ 3个服务模块: 文件上传、AI能力、企微SDK ✅ 2个阶段组件: 确认需求、售后归档 ✅ 核心功能:

文件上传到Parse Server（含压缩）
AI设计方案生成（支持图片识别）
AI项目复盘生成
支付凭证OCR识别
企微群聊跳转（客户端）
企微联系人管理

service-integration-complete.md 14 KB 히스토리 Raw

企微项目管理模块 - 真实服务集成完成

🎯 集成概述

📦 新增服务模块

1. NovaUploadService (文件上传服务)

2. ProjectAIService (AI服务)

3. WxworkSDKService (企微SDK服务)

🔄 更新的组件

1. stage-requirements.component (确认需求阶段)

文件上传

CAD文件上传

AI方案生成

2. stage-aftercare.component (售后归档阶段)

支付凭证OCR识别

AI项目复盘

🎨 关键技术细节

completionJSON 使用（图片识别）

FmodeChatCompletion 使用（流式生成）

企微JSSDK使用（客户端跳转）

📊 数据流转

文件上传流程

AI方案生成流程

OCR识别流程

企微群聊跳转流程

✅ 测试检查清单

文件上传测试

AI功能测试

企微SDK测试

🚀 部署注意事项

1. Parse Server配置

2. AI模型配置

3. 企微应用配置

4. 环境变量

📚 参考文档

🎉 总结

service-integration-complete.md 14 KB

히스토리 Raw