为 Web 客户端实现后台任务展示组件：在会话头部显示任务入…

# 客服系统“任务中心”后台任务展示组件方案

一、组件结构设计

• 入口按钮：放在会话头部右侧，包含图标 + “任务中心”文字 + 未完成数角标
• 角标（Badge）：红色圆点样式，数字 > 99 显示 "99+"，无未完成任务时隐藏
• 弹层：点击后展示任务列表，支持关闭、点击遮罩关闭、ESC 关闭

二、角标实现要点

• 状态判定：status !== '已完成' && status !== '已取消' 计入未完成数
• 数据来源：优先 WebSocket 推送实时更新；无推送则用轮询（建议 10~30 秒间隔），并对比本地计数，变化时更新角标
• 角标绝对定位在按钮右上角，超出父容器 4~8px，加 pointer-events: none 避免遮挡点击

三、任务列表展示

• 排序：按创建时间倒序，前端 sort((a,b) => b.createTime - a.createTime)，或后端接口传 orderBy=createTime&order=desc
• 每条任务字段：
• 名称：单行超出省略号，hover 显示完整 title
• 状态：用带色标签区分——蓝色“进行中”、绿色“已完成”、红色“失败”、灰色“排队中/已取消”
• 耗时：格式化为 x分x秒，进行中的任务实时刷新计时
• 失败详情：仅失败状态显示，默认一行省略，点击展开或用 Tooltip 展示完整错误信息（含错误码建议）
• 长列表性能：任务多时做分页或虚拟滚动（如 react-virtualized），避免渲染卡顿

四、200ms 响应优化

• 关键策略：打开时不等接口返回，先渲染本地缓存数据（骨架屏或上次快照），接口数据到达后增量更新
• 首次打开后缓存任务列表到内存/Store，后续打开直接读缓存 + 后台静默刷新
• 接口层面：进入会话页时可预请求任务列表；接口响应建议后端控制在 100ms 内，留出渲染余量
• 弹层加 CSS 动画（如 100~150ms 的 fade + scale），主观感受更快
• 验证方式：用 performance.now() 埋点，统计“点击到首屏内容可见”耗时

五、蓝色主题样式建议

• 取色：主色从现有设计规范/全局 CSS 变量取（常见为 --primary-color），弹层头部、状态标签、图标统一复用，避免硬编码色值
• 弹层：白底圆角卡片 + 轻阴影，头部浅蓝底或蓝色标题文字
• 按钮/入口 hover 态用主色的浅色透明度变体（如 rgba(主色, 0.1)）
• 优先使用公司现有组件库（若为 Ant Design 等可通过主题变量定制），保证交互细节一致

六、边界情况

• 任务列表为空：显示空状态插图 + “暂无任务”
• 接口失败：弹层内展示重试按钮，不影响已缓存内容
• 角标数字与列表实际未完成数不一致时，以最新一次接口数据为准校准