feat: 产品设计新增企微群聊选择字段 groupRoomId

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

changelogs/2026-03/2026-03-19_product_group_room_id.md

@@ -0,0 +1,127 @@
+# 产品设计新增「企微群聊」选择字段
+
+> 日期: 2026-03-19 | 服务: hl-product-service, hl-callback-service
+
+---
+
+## 一、变更说明
+
+产品设计页面新增 `groupRoomId` 字段，用于关联企微群聊（会话存档），替代原来的静态群二维码图片。
+
+**为什么需要这个字段**：产品关联群聊后，C端小程序可以展示该群的真实聊天消息（通过会话存档），比静态二维码图片更有吸引力。
+
+---
+
+## 二、新增字段
+
+### 产品保存接口
+
+**接口**：`POST /admin/product/item/save` 和 `PUT /admin/product/item/{productId}`
+
+**新增请求字段**：
+
+| 字段 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| groupRoomId | String | 否 | 企微群聊ID，从群组列表接口获取 |
+
+**新增响应字段**（产品详情、产品列表都返回）：
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| groupRoomId | String | 企微群聊ID |
+
+> 原有的 `groupChatQrUrl`（群聊二维码图片URL）保留不变，两者可以共存。
+
+---
+
+## 三、群组列表接口（已有，用于获取可选群）
+
+**接口**：`GET /admin/msg-audit/groups`
+
+**服务**：hl-callback-service
+
+**说明**：获取已添加的企微群组列表，产品设计页面用此接口填充「群聊」下拉选择框。
+
+**响应示例**：
+```json
+{
+  "code": 200,
+  "message": "成功",
+  "data": [
+    {
+      "id": "2034000000000000001",
+      "roomId": "wrOJ_wCgAAxxxxxx",
+      "groupName": "嗨·冰雪3.0南线客户群",
+      "ownerUserId": "WangXiao",
+      "ownerName": "王骁",
+      "memberCount": 12,
+      "remark": "冰雪南线体验团",
+      "createdAt": "2026-03-15 10:00:00"
+    }
+  ]
+}
+```
+
+**关键字段说明**：
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| id | String | 群组记录ID |
+| roomId | String | **企微群聊ID，保存产品时传这个值到 `groupRoomId`** |
+| groupName | String | 群名称（用于下拉框显示） |
+| ownerName | String | 群主姓名 |
+| memberCount | Integer | 群成员数 |
+| remark | String | 备注 |
+
+---
+
+## 四、前端页面布局
+
+### 产品设计 → 展示设置步骤（DisplayStep / DisplaySettings）
+
+在现有的「群聊二维码」输入框**上方或旁边**，新增一个**下拉选择框**：
+
+```
+┌─────────────────────────────────────┐
+│ 群聊关联                              │
+│                                     │
+│ 企微群聊   [▼ 请选择群聊            ]  │
+│            选项格式: groupName (memberCount人) │
+│            值: roomId                │
+│                                     │
+│ 群聊二维码  [上传图片]   （已有字段）   │
+└─────────────────────────────────────┘
+```
+
+### 实现要点
+
+1. **页面加载时**调用 `GET /admin/msg-audit/groups` 获取群组列表
+2. 下拉选项用 `groupName` 显示，`roomId` 作为 value
+3. 选中后将 `roomId` 赋值给 `productData.groupRoomId`
+4. 保存时将 `groupRoomId` 放入 payload（参考 `groupChatQrUrl` 的处理方式）
+5. 加载产品详情时，响应中 `groupRoomId` 会返回已关联的群聊ID
+6. **store 变更**：`productEdit.js` 的 `createDefaultProductData()` 添加 `groupRoomId: null`，`_loadProductDetail` 添加 `groupRoomId: data.groupRoomId || null`，`_saveProduct` payload 添加 `groupRoomId: productData.groupRoomId || null`
+
+### 调用示例
+
+```javascript
+// 1. 获取群组列表（页面加载时）
+import { http } from '@/utils/request'
+const groups = await http.get('/msg-audit/groups')
+// groups = [{ roomId: 'wrOJ_wCgAAxxxxxx', groupName: '冰雪南线客户群', memberCount: 12, ... }]
+
+// 2. 保存产品时 payload 中添加
+const payload = {
+  // ...其他字段
+  groupRoomId: productData.groupRoomId || null,  // 新增
+  groupChatQrUrl: productData.groupChatQrUrl || '',  // 已有
+}
+```
+
+---
+
+## 五、校验规则
+
+- `groupRoomId` 非必填，可以不选
+- 如果选择了群聊，必须是 `/admin/msg-audit/groups` 返回的有效 `roomId`
+- `groupRoomId` 和 `groupChatQrUrl` 互相独立，不冲突