---
title: 会员中心 - IM 会话
type: design
module: member
page_type: list
created: 2026-09-05
updated: 2026-09-05
sources: [design/c-end/c-end-tables, design/c-end/c-end-decisions, design/c-end/pages/cend-service/live-chat, design/c-end/pages/cend-service/service-center, design/design-conventions]
priority: P1
confidence: medium
---

# IM 会话 — 页面详细设计

> **待确认清单**（原型先行页，2026-09-05 spec 补写批次，未确认前不臆造）：
> - `[待确认-1]` **接口未排期（2026-09-02 决议，E5=乙）**：本页为演示 mock，`member-api` 无本页契约；启用前须先增补 [[design/api/member-api]] 契约并排期（M2.x 后置）。
> - `[待确认-2]` **坐席体系待定（T11）**：`member_service_session.agent_id` 标注"待 T11 IM 坐席方案定稿后回填（自研 Netty vs 第三方 SDK，开发期评估）"——本页"分配坐席"弹窗坐席列表（原型 mock：小陈/小王/小李）与坐席账号体系（system 员工/客服工号）关联待定稿。
> - `[待确认-3]` 会话消息收发通道（WebSocket/轮询/第三方 IM）与 C 端会话自动关闭（T12：30 分钟无消息）的坐席侧通知（SLA S2 人工首响 ≤5 分钟）机制未立项——本页仅覆盖会话列表查询 + 手动分配/关闭，坐席在线收消息能力待 T11。
> - `[待确认-4]` 会话详情消息行分页/图片预览：原型一次拉全量消息、图片以 🖼 占位——历史消息分页（C 端 live-chat 单页 20 条口径）与图片加载待定稿。

## 1. 页面定位与用户目标

- 一句话描述：本页用于客服坐席查看 C 端「在线客服」发起的 IM 会话（会话列表 + 消息记录抽屉），支持分配坐席与手动关闭会话，是客服人工接待（自助 FAQ 未解决后的兜底通道）的后台坐席视图。
- 用户目标/任务：
  - 客服坐席/值班员（主角色）：查看进行中会话与待接会话（进行中且无坐席），进入详情读消息记录，回填/改派坐席，手动提前关闭会话。
  - 运营商：监控会话量（进行中/已关闭/待接）与服务人力覆盖。
- 入口路径：`/member/service-session`（PC）
- 所属模块：[[modules/member-prd]]（页面登记于 design-index 88 页口径，P1；**后端能力规划中 E5=乙，见 §8**）
- 页面类型：list（会话列表 + 详情抽屉）
- 优先级：P1（原型先行，spec 2026-09-05 补写）
- 设计来源（调研依据）：
  - 行为基准 = 原型 `prototype/src/views/member/ServiceSession.vue`（mock 演示 + 「功能规划中（E5=乙）」警示条）与 `api/member.ts`（fetchServiceSessions/fetchServiceMessages，纯 mock 无 real 分支）。
  - 表结构 = C 端专属新增表 `member_service_session` / `member_service_message`（[[design/c-end/c-end-tables]] §六/§七：session_no UK、status 1=ACTIVE/2=CLOSED、sender_type 1=会员/2=客服/3=系统、msg_type 1=文本/2=图片/3=系统消息）。
  - C 端写入侧 = 在线客服页（[[design/c-end/pages/cend-service/live-chat]]，`/pages/service/chat`）：会话/消息、订单上下文、自动关闭策略。
  - 决策：T11 坐席方案待评估、T12 30 分钟自动关闭、S2 人工首响 ≤5 分钟、S4 MVP 文本+图片+系统消息（[[design/c-end/c-end-decisions]] §五/§七）。

## 2. 布局与交互线框（ASCII）

### PC 端
```
+------------------------------------------------------------------+
| ⚠ [功能规划中（E5=乙）：后端接口未排期（2026-09-02 决议）…]       |
+------------------------------------------------------------------+
| [顶部统计卡区 - 3 指标]                                          |
| +---------+ +---------+ +---------------------+                 |
| |进行中   | |已关闭   | |待接会话             |                 |
| | 2 个    | | 2 个    | | 1 个  · 无坐席且进行中|                 |
| +---------+ +---------+ +---------------------+                 |
+------------------------------------------------------------------+
| [筛选区] 会员手机号[____]  会话状态[下拉▼ 进行中/已关闭] [查询][重置] |
+------------------------------------------------------------------+
| [表格区]                                                         |
| 会话号 | 会员 | 关联订单 | 状态 | 坐席 | 最近消息 | 创建时间 | 操作 |
| SS202608260001 | 138****5678 | CD202608260018 | 进行中 | 小陈 | 08-26 10:05 | 08-26 09:58 | 详情 分配坐席 关闭 |
| SS202608260002 | 139****1234 | - | 进行中 | 未分配 | 08-26 10:12 | 08-26 10:10 | 详情 分配坐席 关闭 |
| SS202608250015 | 137****9012 | CD202608250032 | 已关闭 | 小陈 | 08-25 18:30 | 08-25 18:02 | 详情 |
+------------------------------------------------------------------+
| [分页]                                                           |
+------------------------------------------------------------------+
```
### 会话详情抽屉（消息记录）
```
+---------------------------------------------+
| 会话详情（消息记录）                          |
| 会话号: SS…0001 | 会员: 138****5678          |
| 关联订单: CD…0018 | 坐席: 小陈               |
+---------------------------------------------+
| [系统消息 - 居中灰气泡] 欢迎咨询在线客服…      |
| [客服] 08-26 10:01   ← 左对齐绿tag 气泡       |
|   您好，请先确认订单已结算…                    |
| [会员] 08-26 10:03   ← 右对齐蓝tag 气泡       |
|   🖼 图片                                     |
| [会员] 08-26 10:05                            |
|   我充电结束了但枪拔不出来                     |
+---------------------------------------------+
```
> 消息对齐：会员靠右 / 客服靠左 / 系统消息居中独立灰气泡（msg_type/sender_type 区分渲染）；图片消息 🖼 占位（[待确认-4]）。

## 3. 功能点清单

| 编号 | 功能点 | 触发位置 | 权限码 | 行为描述 | 来源 |
|------|--------|---------|--------|---------|------|
| FP-01 | 会话列表加载 | 页面加载 | member:view | fetchServiceSessions() 拉会话全量，本地过滤 + 装饰分页 | 原型 ServiceSession.vue |
| FP-02 | 会话筛选 | 筛选区/统计卡 | member:view | 会员手机号子串 / 会话状态单选；点击统计卡（进行中/已关闭）自动带筛选 | 原型 |
| FP-03 | 会话详情 | 行"详情" | member:view | 抽屉展示会话元信息 + 消息记录（按 sessionId 拉取），气泡布局区分发送方/类型 | 原型（对齐 C 端 LiveChat 布局） |
| FP-04 | 分配坐席 | 行"分配坐席"（仅进行中） | member:service:handle | 弹窗选择坐席回填 agentId；会话仍进行中；**坐席数据源原型 mock 三选（小陈/小王/小李），T11 待定（[待确认-2]）** | 原型 |
| FP-05 | 关闭会话 | 行"关闭"（仅进行中） | member:service:handle | 坐席手动提前关闭：status 进行中→已关闭（C 端 30 分钟无消息自动关闭 T12 的坐席侧先行能力） | 原型（T12） |
| FP-06 | 待接会话监控 | 统计卡"待接会话" | member:view | 进行中且无 agentId 的会话计数（sub 文案"无坐席且进行中"），运营/坐席盯盘入口 | 原型（设计新增） |

> 权限码：`member:service:handle` 为扩展码（按操作域细分，开发期对齐 [[design/permission-matrix]]，主码 member:edit，约定见 [[design/api/member-api]] 说明；坐席角色待 T11 定稿后并入矩阵）。

## 4. 字段定义

| 字段 | key | 类型 | 必填 | 校验规则 | 枚举/默认 | 单位 | 来源 | 说明 |
|------|-----|------|------|---------|-----------|------|------|------|
| 会话 ID | sessionId | bigint | 是 | - | - | - | c-end-tables §六 | 主键；消息行外键关联 |
| 会话号 | sessionNo | string | 是 | ≤32，唯一 | mock `SS{yyyyMMdd}{4 位序号}` | - | 同上（UK） | 列表/详情标识，可复制给 C 端用户 |
| 会员手机号 | mobile | string | 是 | 11 位手机号 | - | - | 会话表 member_id → 会员联查 | 展示脱敏；真实模型为 member_id FK（页面展示层联查 mobile） |
| 关联订单 | orderNo | string | 否 | ≤64 | 空 | - | 同上（order_no） | business_order.seq_number；C 端订单咨询框携带（FP 上下文），可空展示 '-' |
| 会话状态 | status | enum | 是 | 二态 | 1=ACTIVE/2=CLOSED（原型 进行中/已关闭；色码：进行中蓝/已关闭灰） | - | c-end-tables §六 | ACTIVE→CLOSED：C 端 30 分钟无消息自动关闭（T12）或坐席手动（FP-05） |
| 坐席 | agentId | bigint | 否 | - | 空=未分配 | - | 同上（agent_id） | 待 T11 坐席方案定稿后回填（[待确认-2]）；原型 mock 中文坐席名 |
| 最近消息时间 | lastMessageTime | datetime | 否 | - | - | - | 同上 | T12 自动关闭判定依据；列表排序键 |
| 创建时间 | createTime | datetime | 是 | - | - | - | 同上 | 会话发起时间 |
| 消息 ID | messageId | bigint | 是 | - | - | - | c-end-tables §七 | 详情消息行主键 |
| 发送方类型 | senderType | enum | 是 | 三态 | 1=会员/2=客服/3=系统（原型 会员/客服/系统；tag 色码：会员蓝/客服绿/系统灰） | - | 同上 | 渲染对齐（右/左/居中）；系统消息=自动问候/转接提示（S4） |
| 消息类型 | msgType | enum | 是 | 三态 | 1=文本/2=图片/3=系统消息（原型 文本/图片/系统消息） | - | 同上 | MVP 文本+图片+系统消息（S4）；图片消息原型 🖼 占位（[待确认-4]） |
| 消息内容 | content | string | 是 | 文本 ≤500 字 | - | - | 同上 | C 端 live-chat 边界值：单条 ≤500 字 |
| 消息时间 | createTime | datetime | 是 | - | - | - | 同上 | 气泡旁时间戳 |

> 枚举与色码登记于 `prototype/src/constants/status.ts`（SERVICE_SESSION_STATUS/SERVICE_SENDER_TYPES/SERVICE_MSG_TYPES 及 tag map）；无新硬编码枚举。会话与消息为两张表（会话 1-N 消息），表结构权威 [[design/c-end/c-end-tables]] §六/§七。

## 5. 业务逻辑规则卡

> 本页暂无已登记的 R-member-* 规则（客服 IM 为 C 端新增能力）；R-svc-* 为页面派生局部规则，待 T11 坐席体系定稿/接真时并入 [[design/rules/member-business-rules]] 或 service 规则文档登记。

| 编号 | 规则名 | 触发条件 | 业务逻辑 | 边界/异常 | 来源 |
|------|--------|---------|---------|----------|------|
| R-svc-01 | 会话自动关闭（T12） | C 端 30 分钟无消息 | ACTIVE 会话 last_message_time 距今 >30 分钟 → 自动 CLOSED（C 端任务触发）；本页坐席可手动提前关闭（仅 ACTIVE） | 关闭判定以服务端时间为准；30 分钟值可配置性待定稿 | [[design/c-end/c-end-decisions]] §七 T12；live-chat |
| R-svc-02 | 单会员单 ACTIVE 会话 | C 端发起会话 | 同一会员同时仅 1 个 ACTIVE 会话（C 端 live-chat 边界值）；ACTIVE 存在时新会话复用或提示 | 关闭/过期后新会话放行；并发发起竞态防重开发期定稿 | live-chat §9 边界值 |
| R-svc-03 | 分配坐席守卫 | 行"分配坐席" | 仅 ACTIVE 会话可分配/改派；agentId 回填后状态不变（仍进行中）；空 agentId = 未分配（计入待接会话统计） | 已关闭会话不可分配（操作按钮隐藏）；重复分配同坐席幂等 | 原型（FP-04） |
| R-svc-04 | 消息渲染规则（S4） | 详情抽屉渲染 | sender_type=会员 → 右侧气泡；=客服 → 左侧；=系统 → 居中灰气泡；msg_type=图片 → 图片占位 | 文本 ≤500 字；图片消息无内容文本时以 🖼 占位（[待确认-4]） | c-end-tables §七；live-chat |
| R-svc-05 | 首响 SLA 关联（S2） | 会话创建 | 人工首响时长目标中位数 ≤5 分钟（C 端客服 SLA）；本页"待接会话"计数为坐席盯盘入口 | SLA 达标统计报表待坐席体系立项（[待确认-3]） | c-end-decisions S2 |

## 6. 操作流程与状态机

### 6.0 会话状态机（2 态）
```mermaid
stateDiagram-v2
    [*] --> 进行中: C 端在线客服发起
    进行中 --> 已关闭: 30 分钟无消息自动关闭（T12）/ 坐席手动关闭（FP-05）
    已关闭 --> [*]
```
> agentId 为会话属性非状态：ACTIVE 且 agentId 空 = "待接会话"（统计卡口径）。

### 6.1 用户故事
- US-1（客服坐席，PC）：作为坐席，我想看到进行中/待接会话并打开消息记录，以便尽快首响用户（S2 ≤5 分钟）。验收：进行中行可点"详情"读气泡消息；点击统计卡"进行中"列表自动筛选。
- US-2（坐席）：作为坐席，我想给未分配会话回填坐席并处理完手动关闭，以便会话闭环。验收：分配弹窗保存后行内坐席列更新（提示"坐席已回填，会话仍进行中"）；关闭二次操作后状态置已关闭、操作列只剩"详情"。

### 6.2 测试场景（五要素：目标/前置/角色/步骤/预期）
- TS-1（正常）：进行中会话 → 分配坐席"小陈" → 行内坐席列=小陈；点"关闭" → 状态已关闭，操作列隐藏分配/关闭。
- TS-2（边界）：空会话库 → 空态"暂无 IM 会话，会员在 C 端在线客服发起后展示于此"；详情抽屉无消息 → "暂无消息记录"。
- TS-3（异常）：已关闭会话 → 无"分配坐席/关闭"操作（仅详情）；无 member:service:handle 权限 → 操作列按钮隐藏。

## 7. 权限控制

| 操作 | 权限码 | 角色（[[permission-matrix]]） | 无权限表现 |
|------|--------|------------------------------|-----------|
| 查看会话/消息 | member:view | 值班员/运营商/站长 | 隐藏菜单 |
| 分配坐席/关闭会话 | member:service:handle（扩展码，主码 member:edit） | 客服坐席/值班员（坐席角色待 T11 定稿并入矩阵，[待确认-2]） | 按钮隐藏 |

## 8. 接口契约

> **接口未实现、未排期（2026-09-02 决议 E5=乙）**：前端 `fetchServiceSessions()/fetchServiceMessages(sessionId)`（`prototype/src/api/member.ts`）仅动态 import `@/mock/member`（无 real 分支）。启用前提：先在 [[design/api/member-api]] 增补本页契约并排期（M2.x 后置），含会话/消息收发通道方案（T11，[待确认-3]）。以下按原型调用形态登记功能接口，**路径列不臆造（未定稿，禁止按此联调）**：

| 功能 | 方法 | 路径 | 请求关键参数 | 响应关键字段 | 备注 |
|------|------|------|-------------|-------------|------|
| 会话列表分页 | GET | 待定（member-api 增补时定稿） | page,size,mobile,status,dateRange | Page<ServiceSessionDTO{sessionId,sessionNo,mobile,orderNo,status,agentId,lastMessageTime,createTime}> | 原型 fetchServiceSessions()，mock 本地过滤 |
| 会话详情消息 | GET | 待定（member-api 增补时定稿） | sessionId（分页参数随消息分页方案，[待确认-4]） | List<ServiceMessageDTO{messageId,sessionId,senderType,msgType,content,createTime}> | 原型 fetchServiceMessages(sessionId) 全量拉取 |
| 分配/改派坐席 | PUT | 待定（member-api 增补时定稿） | sessionId,agentId | - | 原型 submitAssign 本地回填；仅 ACTIVE（R-svc-03） |
| 关闭会话 | PUT | 待定（member-api 增补时定稿） | sessionId | - | 原型 closeSession 本地置 CLOSED；仅 ACTIVE（R-svc-01） |
| 实时消息通道 | WS/轮询 | 待定（T11 通道选型后定稿） | - | - | 坐席在线收发消息待坐席体系立项（[待确认-3]） |
| 待接会话统计 | - | - | - | - | 原型前端聚合（ACTIVE 且 agentId 空）；汇总接口随排期增补 |

## 9. 异常与边界场景

- 加载态：骨架屏 300ms（统计卡 + 表格骨架）。
- 空态："暂无 IM 会话，会员在 C 端在线客服发起后展示于此"；详情抽屉空消息："暂无消息记录"。
- 错误态：错误码 + "IM 会话加载失败，请检查后重试" + 重试按钮（对齐 [[design-conventions]] §九）。
- 无权限态：无 member:view → 菜单隐藏（403"您无 IM 会话查看权限，请联系管理员开通"）。
- 规划中警示：页面顶部常驻黄色警示条"功能规划中（E5=乙）：后端接口未排期（2026-09-02 决议）"（原型现状，接真排期后移除）。
- 状态守卫：分配/关闭按钮仅进行中行可见（已关闭会话操作列仅详情）；关闭无二次确认（原型直接执行 + toast，开发期评估补确认）。
- 边界值：单页 10/20/50/100；消息文本 ≤500 字；会话号 UK；图片消息占位（[待确认-4]）。
- 数据一致性：手动关闭与 T12 自动关闭并发竞态 → 幂等（已关闭再关闭 no-op，开发期定稿）。

## 10. 关联页面与数据流

- [[design/c-end/pages/cend-service/live-chat]] — C 端「在线客服」写入源（`/pages/service/chat`）：会话/消息读写、订单上下文携带、30 分钟自动关闭
- [[design/c-end/pages/cend-service/service-center]] — C 端客服中心：自助 FAQ →「在线客服」转人工入口（本页承接的人工侧）
- [[design/pages/member/faq]] — 同族"客服体系"后台页（FAQ 管理，同为 E5=乙 规划中；FAQ 未解决 → IM 人工兜底）
- [[design/c-end/pages/cend-service/unplug-guide]] — 拔枪指引"未解决，联系在线客服"入口（订单/拔枪问题上下文来源）
- [[design/pages/member/member-list]] — 会员 360：会话会员 mobile → 详情反查（会员状态/拉黑联动：黑名单会员咨询处理口径开发期定稿）
- [[design/pages/order/history]] — 关联订单 orderNo 对应订单历史（本页未做跳转，开发期可补）
- [[design/c-end/c-end-tables]] §六/§七 — 表结构权威：member_service_session / member_service_message
- [[design/c-end/c-end-decisions]] T11/T12/S2/S4 — 决策源
- 数据流：C 端 live-chat 写 member_service_session/member_service_message（含 T12 自动关闭）→ 本页读会话 + 消息、写 agent_id/status（分配/手动关闭）；实时通道待 T11（[待确认-3]）。实体见 [[design/er/er-member]]（客服 4 表族同 c-end 域，er 待补登记）。