1026 lines
50 KiB
HTML
1026 lines
50 KiB
HTML
<!-- Generated by Trae Work -->
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>在线客服系统（客服云）开发需求文档</title>
|
||
|
||
<style>
|
||
@font-face {
|
||
font-family: 'InstrumentSans';
|
||
src: url('./_shared/fonts/InstrumentSans-Regular.ttf') format('truetype');
|
||
font-weight: 400;
|
||
}
|
||
@font-face {
|
||
font-family: 'InstrumentSans';
|
||
src: url('./_shared/fonts/InstrumentSans-Bold.ttf') format('truetype');
|
||
font-weight: 700;
|
||
}
|
||
@font-face {
|
||
font-family: 'JetBrainsMono';
|
||
src: url('./_shared/fonts/JetBrainsMono-Regular.ttf') format('truetype');
|
||
font-weight: 400;
|
||
}
|
||
@font-face {
|
||
font-family: 'JetBrainsMono';
|
||
src: url('./_shared/fonts/JetBrainsMono-Bold.ttf') format('truetype');
|
||
font-weight: 700;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
:root {
|
||
--bg: #ffffff;
|
||
--bg2: #f8fafc;
|
||
--ink: #0f172a;
|
||
--muted: #64748b;
|
||
--rule: #e2e8f0;
|
||
--accent: #2563eb;
|
||
--accent2: #0891b2;
|
||
--success: #16a34a;
|
||
--warning: #d97706;
|
||
--error: #dc2626;
|
||
--font: 'InstrumentSans', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
--font-mono: 'JetBrainsMono', 'Fira Code', 'Consolas', monospace;
|
||
--max: 980px;
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { font-size: 16px; scroll-behavior: smooth; }
|
||
body {
|
||
font-family: var(--font);
|
||
color: var(--ink);
|
||
background: var(--bg);
|
||
line-height: 1.7;
|
||
padding: 2rem 1rem;
|
||
font-size: 15px;
|
||
}
|
||
article.page {
|
||
max-width: var(--max);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
header.doc-header {
|
||
padding: 3rem 0 2.5rem;
|
||
border-bottom: 1px solid var(--rule);
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
header.doc-header h1 {
|
||
font-size: 2.25rem;
|
||
font-weight: 700;
|
||
line-height: 1.25;
|
||
margin-bottom: 0.75rem;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
header.doc-header .subtitle {
|
||
color: var(--muted);
|
||
font-size: 1.05rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
header.doc-header .meta-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: 0.75rem 1.5rem;
|
||
font-size: 0.9rem;
|
||
color: var(--muted);
|
||
}
|
||
header.doc-header .meta-grid strong {
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
}
|
||
|
||
main section {
|
||
margin-bottom: 3rem;
|
||
}
|
||
h2 {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
margin: 2.5rem 0 1rem;
|
||
padding-bottom: 0.5rem;
|
||
border-bottom: 2px solid var(--accent);
|
||
display: inline-block;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
h3 {
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
margin: 2rem 0 0.75rem;
|
||
color: var(--ink);
|
||
}
|
||
h4 {
|
||
font-size: 1.05rem;
|
||
font-weight: 700;
|
||
margin: 1.5rem 0 0.5rem;
|
||
color: var(--ink);
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 0.9rem;
|
||
color: var(--ink);
|
||
}
|
||
p.lead {
|
||
font-size: 1.05rem;
|
||
color: var(--muted);
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
ul, ol {
|
||
margin: 0.75rem 0 1rem 1.5rem;
|
||
}
|
||
li {
|
||
margin-bottom: 0.45rem;
|
||
}
|
||
|
||
a { color: var(--accent); text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
|
||
mark.key {
|
||
background: none;
|
||
color: var(--accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.callout {
|
||
background: var(--bg2);
|
||
border-left: 4px solid var(--accent);
|
||
padding: 1rem 1.25rem;
|
||
margin: 1.25rem 0;
|
||
border-radius: 0 6px 6px 0;
|
||
}
|
||
.callout p:last-child { margin-bottom: 0; }
|
||
.callout.warning { border-left-color: var(--warning); }
|
||
.callout.error { border-left-color: var(--error); }
|
||
.callout.success { border-left-color: var(--success); }
|
||
|
||
.table-wrap {
|
||
overflow-x: auto;
|
||
overflow-y: auto;
|
||
max-height: 600px;
|
||
border: 1px solid var(--rule);
|
||
border-radius: 6px;
|
||
margin: 1rem 0 1.5rem;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
min-width: 640px;
|
||
font-size: 0.9rem;
|
||
}
|
||
th, td {
|
||
padding: 0.65rem 0.85rem;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--rule);
|
||
vertical-align: top;
|
||
}
|
||
th {
|
||
background: var(--bg2);
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1;
|
||
}
|
||
tr:last-child td { border-bottom: none; }
|
||
tbody tr:hover { background: rgba(37, 99, 235, 0.03); }
|
||
|
||
code, .mono {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.88em;
|
||
background: var(--bg2);
|
||
padding: 0.15rem 0.35rem;
|
||
border-radius: 4px;
|
||
color: var(--accent);
|
||
}
|
||
pre {
|
||
font-family: var(--font-mono);
|
||
background: var(--bg2);
|
||
padding: 1rem;
|
||
border-radius: 6px;
|
||
overflow-x: auto;
|
||
font-size: 0.85rem;
|
||
line-height: 1.6;
|
||
margin: 1rem 0;
|
||
border: 1px solid var(--rule);
|
||
}
|
||
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 0.15rem 0.5rem;
|
||
border-radius: 999px;
|
||
font-size: 0.78rem;
|
||
font-weight: 600;
|
||
line-height: 1.4;
|
||
}
|
||
.badge-p0 { background: #fee2e2; color: #991b1b; }
|
||
.badge-p1 { background: #ffedd5; color: #9a3412; }
|
||
.badge-p2 { background: #dbeafe; color: #1e40af; }
|
||
|
||
figure.diagram {
|
||
margin: 1.5rem 0;
|
||
text-align: center;
|
||
}
|
||
figure.diagram figcaption {
|
||
font-size: 0.85rem;
|
||
color: var(--muted);
|
||
margin-top: 0.75rem;
|
||
}
|
||
.mermaid {
|
||
background: var(--bg2);
|
||
padding: 1rem;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--rule);
|
||
}
|
||
|
||
.two-col {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1.5rem;
|
||
margin: 1rem 0;
|
||
}
|
||
.two-col ul { margin-left: 1.25rem; }
|
||
|
||
.feature-card {
|
||
border: 1px solid var(--rule);
|
||
border-radius: 8px;
|
||
padding: 1.25rem;
|
||
margin: 1rem 0;
|
||
background: var(--bg);
|
||
}
|
||
.feature-card h4 { margin-top: 0; }
|
||
.feature-card p:last-child { margin-bottom: 0; }
|
||
|
||
.kpi-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
gap: 1rem;
|
||
margin: 1rem 0;
|
||
}
|
||
.kpi-card {
|
||
background: var(--bg2);
|
||
border: 1px solid var(--rule);
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
}
|
||
.kpi-card .label {
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
.kpi-card .value {
|
||
font-size: 1.35rem;
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
}
|
||
|
||
footer {
|
||
margin-top: 4rem;
|
||
padding-top: 2rem;
|
||
border-top: 1px solid var(--rule);
|
||
color: var(--muted);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
body { padding: 1rem 0.75rem; font-size: 14px; }
|
||
header.doc-header h1 { font-size: 1.65rem; }
|
||
h2 { font-size: 1.25rem; }
|
||
.two-col { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
@media print {
|
||
body { padding: 0; }
|
||
header.doc-header, section { page-break-inside: avoid; }
|
||
.callout { break-inside: avoid; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<article class="page">
|
||
<header class="doc-header">
|
||
<h1>在线客服系统（客服云）开发需求文档</h1>
|
||
<p class="subtitle">基于设计稿的 SaaS 多租户客服平台产品需求规格说明书</p>
|
||
<div class="meta-grid">
|
||
<div><strong>文档版本</strong> v1.0</div>
|
||
<div><strong>编写日期</strong> 2026-07-11</div>
|
||
<div><strong>产品名称</strong> 客服云</div>
|
||
<div><strong>交付形态</strong> SaaS / 多租户</div>
|
||
<div><strong>目标读者</strong> 产品经理、前端/后端工程师、测试、UI 设计师</div>
|
||
<div><strong>需求深度</strong> 中等偏重</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section id="overview">
|
||
<h2>1 项目概述</h2>
|
||
<p class="lead">客服云是一款面向中小企业及大型组织的 SaaS 多租户在线客服平台，帮助企业通过网页聊天窗口、微信公众号、APP 内嵌、电话工单、邮件等统一渠道接待访客，并配套客服工作台、客户管理、知识库、数据统计与平台运营管理能力。</p>
|
||
|
||
<h3>1.1 产品定位</h3>
|
||
<p>产品采用 <mark class="key">多租户隔离</mark> 架构，每个租户拥有独立的客服团队、客户数据、知识库、渠道配置和统计报表。平台运营方通过管理端进行租户开通、套餐定价、系统运维监控和运营数据分析。客服端与管理端共享同一套账号与权限体系，但功能入口和数据范围完全不同。</p>
|
||
|
||
<h3>1.2 业务目标</h3>
|
||
<ul>
|
||
<li>为租户提供 <mark class="key">全渠道、实时、可配置</mark> 的客户服务能力，缩短访客等待时间并提升首次解决率。</li>
|
||
<li>为客服主管提供可视化的 <mark class="key">服务数据与绩效报表</mark>，支持基于数据的团队管理与流程优化。</li>
|
||
<li>为平台运营方提供 <mark class="key">租户生命周期管理、订阅计费与系统运维</mark> 能力，支撑 SaaS 商业化运转。</li>
|
||
</ul>
|
||
|
||
<h3>1.3 范围边界</h3>
|
||
<div class="two-col">
|
||
<div>
|
||
<h4>范围内</h4>
|
||
<ul>
|
||
<li>客服工作台实时会话</li>
|
||
<li>访客端聊天 Widget</li>
|
||
<li>客户管理与标签体系</li>
|
||
<li>对话记录查询与审计</li>
|
||
<li>知识库与快捷回复</li>
|
||
<li>客服数据统计</li>
|
||
<li>渠道与系统设置</li>
|
||
<li>租户管理、套餐定价</li>
|
||
<li>运营概览与系统运维</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4>范围外（本期不做）</h4>
|
||
<ul>
|
||
<li>AI 机器人自动回复（预留接口）</li>
|
||
<li>电话呼叫实时软交换</li>
|
||
<li>第三方支付对接</li>
|
||
<li>移动端原生 App</li>
|
||
<li>多语言国际化（仅中文）</li>
|
||
<li>私有化部署安装包</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="users">
|
||
<h2>2 用户角色与使用场景</h2>
|
||
|
||
<h3>2.1 角色定义</h3>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr><th>角色</th><th>使用端</th><th>主要职责</th><th>数据范围</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>平台管理员</td><td>运营管理端</td><td>租户开通、套餐管理、系统运维、平台公告、运营监控</td><td>全平台租户与系统级数据</td></tr>
|
||
<tr><td>租户管理员</td><td>客服工作台 + 设置</td><td>渠道配置、客服账号管理、分配规则、工作时间、权限配置</td><td>本租户全部数据</td></tr>
|
||
<tr><td>客服主管</td><td>客服工作台 + 统计</td><td>实时监控会话、查看团队绩效、处理升级投诉、管理知识库</td><td>本租户全部客服数据</td></tr>
|
||
<tr><td>一线客服</td><td>客服工作台</td><td>接待访客、回复消息、标记客户、使用知识库、结束会话</td><td>自己被分配的会话与客户</td></tr>
|
||
<tr><td>网站访客</td><td>访客聊天窗口</td><td>发起咨询、查看欢迎语、选择快捷问题、收发文本/图片消息</td><td>个人会话数据</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3>2.2 核心场景</h3>
|
||
<ol>
|
||
<li><strong>访客咨询</strong>：访客在租户网站点击聊天按钮 → Widget 加载欢迎语与快捷问题 → 访客发送消息 → 系统按分配规则转接给在线客服 → 客服回复并解决问题 → 访客收到满意度评价邀请。</li>
|
||
<li><strong>客服接待</strong>：客服登录工作台 → 在会话列表查看待处理/进行中的会话 → 点击会话进入聊天区 → 查看右侧客户资料 → 使用知识库/快捷回复回复 → 标记会话优先级 → 结束会话并填写备注。</li>
|
||
<li><strong>主管复盘</strong>：主管进入数据统计 → 查看总会话量、平均响应时长、满意度、首次解决率 → 下钻到客服绩效排行 → 针对响应慢的客服进行培训或调整排班。</li>
|
||
<li><strong>租户开通</strong>：平台管理员在租户管理点击「开通新账号」→ 填写公司、联系人、套餐、坐席数、时长 → 系统自动创建租户并发送登录信息 → 租户管理员登录后配置渠道与客服。</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<section id="architecture">
|
||
<h2>3 系统架构概览</h2>
|
||
<p>系统由四个逻辑端组成：<mark class="key">访客端 Widget</mark>、<mark class="key">客服工作台</mark>、<mark class="key">运营管理端</mark> 和 <mark class="key">平台服务层</mark>。所有业务数据按租户隔离，平台管理员可跨租户查看运营汇总数据。</p>
|
||
|
||
<figure class="diagram">
|
||
<pre class="mermaid">
|
||
flowchart TB
|
||
subgraph 访客端
|
||
W[网页聊天 Widget]
|
||
WX[微信公众号]
|
||
APP[APP 内嵌 SDK]
|
||
end
|
||
subgraph 客服端
|
||
A[客服工作台]
|
||
S[系统设置]
|
||
ST[数据统计]
|
||
end
|
||
subgraph 管理端
|
||
OV[运营概览]
|
||
TN[租户管理]
|
||
PL[套餐定价]
|
||
OP[系统运维]
|
||
end
|
||
subgraph 平台服务层
|
||
GW[接入网关]
|
||
IM[实时消息服务]
|
||
CS[客服业务服务]
|
||
KB[知识库服务]
|
||
AN[分析服务]
|
||
DB[(租户隔离数据库)]
|
||
end
|
||
W --> GW
|
||
WX --> GW
|
||
APP --> GW
|
||
GW --> IM
|
||
IM --> CS
|
||
A --> IM
|
||
A --> CS
|
||
S --> CS
|
||
ST --> AN
|
||
OV --> AN
|
||
TN --> CS
|
||
PL --> CS
|
||
OP --> CS
|
||
CS --> DB
|
||
AN --> DB
|
||
</pre>
|
||
<figcaption>图 1：客服云四端逻辑架构</figcaption>
|
||
</figure>
|
||
|
||
<h3>3.1 关键设计约束</h3>
|
||
<ul>
|
||
<li><strong>租户隔离</strong>：每个租户拥有独立的数据空间，客服只能看到本租户的访客、客户和会话。</li>
|
||
<li><strong>实时消息</strong>：访客与客服之间的消息通过 WebSocket 长连接推送，断线后支持消息补发与重连。</li>
|
||
<li><strong>渠道抽象</strong>：网页、微信、APP 等渠道统一抽象为「会话来源」，客服工作台以一致界面接待。</li>
|
||
<li><strong>套餐配额</strong>：租户可用的坐席数、知识库容量、对话记录保存时长、报表功能受套餐限制。</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="features-overview">
|
||
<h2>4 功能需求总览</h2>
|
||
<p>下表汇总了本期需要实现的全部功能模块。每个模块在后续章节中给出详细的业务逻辑、交互规则、字段约束与边界说明。</p>
|
||
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr><th style="width:50px">#</th><th style="width:120px">模块</th><th>功能描述</th><th style="width:80px">优先级</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>1</td><td>客服工作台</td><td>三栏式工作台：左侧会话列表（按紧急/等待/进行中分组并显示未读数）、中间聊天区（文本/图片消息、输入状态、工具栏）、右侧客户信息面板（资料、标签、备注、活跃数据）。支持会话优先级标记、转接、结束会话与内部备注。</td><td><span class="badge badge-p0">P0</span></td></tr>
|
||
<tr><td>2</td><td>访客聊天窗口</td><td>可嵌入任意网页的浮动聊天组件，尺寸约 400×600 px，支持欢迎语、快捷问题、文本/图片输入、客服头像与名称展示、正在输入提示、满意度评价入口。通过一行脚本代码接入。</td><td><span class="badge badge-p0">P0</span></td></tr>
|
||
<tr><td>3</td><td>客户管理</td><td>客户列表支持按标签、状态、来源筛选与搜索；列表展示客户名称、联系方式、标签、对话次数、满意度、待处理数；右侧 360 px 抽屉展示客户详情、会话历史、备注与标签编辑。</td><td><span class="badge badge-p1">P1</span></td></tr>
|
||
<tr><td>4</td><td>对话记录</td><td>按渠道、客服、状态、日期筛选历史会话；左侧会话卡片展示访客摘要、最后消息、状态；右侧详情面板展示完整消息流、客服操作记录、满意度评分与文字评价。</td><td><span class="badge badge-p1">P1</span></td></tr>
|
||
<tr><td>5</td><td>知识库</td><td>左侧分类树（产品常见问题、售后服务、技术支持、政策条款、快捷回复模板），右侧知识条目列表展示标题、状态、使用频率、更新时间；支持新建/编辑/发布/草稿/删除。</td><td><span class="badge badge-p1">P1</span></td></tr>
|
||
<tr><td>6</td><td>数据统计</td><td>首页展示 4 个 KPI 卡片（总会话量、平均响应时长、客户满意度、首次解决率）与 4 个图表（会话量趋势折线图、响应时长分布柱状图、渠道来源占比环形图、客服绩效排行条形图）。支持时间范围切换。</td><td><span class="badge badge-p1">P1</span></td></tr>
|
||
<tr><td>7</td><td>系统设置</td><td>左侧设置分类导航，包含基本设置、渠道管理、客服分配规则、权限管理、自动回复、工作时间、通知设置。渠道管理展示渠道类型、状态、接入代码与配置入口。</td><td><span class="badge badge-p1">P1</span></td></tr>
|
||
<tr><td>8</td><td>运营概览</td><td>平台级首页，展示租户总数、活跃租户、平台月收入、系统可用率 4 个 KPI；租户增长趋势图、套餐分布图、最近操作记录列表。</td><td><span class="badge badge-p2">P2</span></td></tr>
|
||
<tr><td>9</td><td>租户管理</td><td>租户列表展示公司名称、联系人、套餐、坐席数、开通/到期日期、状态；支持按状态筛选、搜索、查看、编辑、续费、暂停；右侧抽屉开通新账号表单。</td><td><span class="badge badge-p2">P2</span></td></tr>
|
||
<tr><td>10</td><td>套餐定价</td><td>展示基础版、专业版、企业版三类套餐卡片，列明坐席数量、对话记录保存、知识库容量、报表、API、渠道、自定义品牌、专属客服等权益；支持上下架与定价规则配置。</td><td><span class="badge badge-p2">P2</span></td></tr>
|
||
<tr><td>11</td><td>系统运维</td><td>服务状态看板（API、WebSocket、数据库、消息队列、CDN）、系统负载（CPU/内存/磁盘）、API 请求量与错误率折线图、操作日志、平台公告管理。</td><td><span class="badge badge-p2">P2</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="features-detail">
|
||
<h2>5 功能模块详细说明</h2>
|
||
<p>本章按模块给出业务逻辑、交互规则、字段约束与边界说明。每个模块均对应设计稿中的具体页面，页面布局与信息结构以设计稿为准。</p>
|
||
|
||
<h3>5.1 客服工作台</h3>
|
||
<figure class="diagram">
|
||
<pre class="mermaid">
|
||
flowchart LR
|
||
subgraph 左侧会话列表
|
||
A[紧急会话] --> B[等待中会话]
|
||
B --> C[进行中会话]
|
||
end
|
||
subgraph 中间聊天区
|
||
D[消息流] --> E[输入框/工具栏]
|
||
end
|
||
subgraph 右侧客户面板
|
||
F[客户资料] --> G[标签/备注]
|
||
G --> H[活跃数据]
|
||
end
|
||
A --> D
|
||
D --> F
|
||
</pre>
|
||
<figcaption>图 2：客服工作台三栏布局</figcaption>
|
||
</figure>
|
||
|
||
<div class="feature-card">
|
||
<h4>业务逻辑</h4>
|
||
<p>客服登录后，工作台默认展示「我的会话」列表。会话按优先级分为 <strong>紧急</strong>、<strong>等待中</strong>、<strong>进行中</strong> 三类。系统根据分配规则将会话推送给客服；客服可手动领取等待中的会话，或将当前会话转接给其他在线客服。</p>
|
||
<p>会话状态流转：等待中 → 进行中 → 已结束。客服结束会话时需选择结束原因（已解决、无人回复、访客离开、转接等）。会话结束后，访客端仍可重新发起新会话。</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>交互规则</h4>
|
||
<ul>
|
||
<li>点击左侧会话卡片，中间聊天区加载该会话的消息流，并滚动至最新消息。</li>
|
||
<li>新消息到达时，会话卡片显示未读数并高亮；当前选中的会话自动标记已读。</li>
|
||
<li>输入框支持 Enter 发送、Shift+Enter 换行；支持粘贴图片与点击上传图片。</li>
|
||
<li>右侧客户面板展示客户名称、联系方式、来源渠道、标签、备注、对话次数、满意度、待处理数。</li>
|
||
<li>工具栏提供快捷回复、知识库搜索、转接、结束会话、优先级标记。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>字段与约束</h4>
|
||
<ul>
|
||
<li>文本消息：单条最多 2000 字符，支持换行。</li>
|
||
<li>图片消息：单张不超过 5 MB，支持 jpg/png/gif，发前压缩预览。</li>
|
||
<li>内部备注：仅客服可见，每条最多 500 字符，按时间倒序展示。</li>
|
||
<li>会话优先级：紧急（红色）、等待中（黄色）、进行中（蓝色），客服可手动调整。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>5.2 访客聊天窗口</h3>
|
||
<p>访客端 Widget 是一段可嵌入任意网页的脚本，通过 <code>script</code> 标签加载，传入租户渠道 ID 即可初始化。Widget 采用浮动窗口形态，默认右下角展开/收起。</p>
|
||
|
||
<div class="feature-card">
|
||
<h4>业务逻辑</h4>
|
||
<p>Widget 加载后首先展示欢迎语与一组快捷问题。访客点击快捷问题或输入消息后，系统根据当前在线客服与分配规则建立会话。若当前无客服在线，展示「当前无客服在线，请留言」提示并收集联系方式。</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>交互规则</h4>
|
||
<ul>
|
||
<li>展开尺寸约 400×600 px，收起状态为圆形悬浮按钮。</li>
|
||
<li>访客消息右侧蓝色气泡，客服消息左侧灰色气泡。</li>
|
||
<li>客服输入时，访客端显示「正在输入…」动画。</li>
|
||
<li>会话结束后弹出满意度评分（1–5 星）与文字评价输入框。</li>
|
||
<li>支持发送文本与图片，图片预览支持点击查看大图。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>接入示例</h4>
|
||
<pre><script src="https://cs.example.com/widget.js" data-id="WK_8a3f2e"></script></pre>
|
||
</div>
|
||
|
||
<h3>5.3 客户管理</h3>
|
||
<p>客户管理用于沉淀访客信息，将匿名访客转化为可识别的客户资产。列表与详情抽屉组合展示，便于客服快速了解客户背景。</p>
|
||
|
||
<div class="feature-card">
|
||
<h4>业务逻辑</h4>
|
||
<p>当访客在 Widget 中留下联系方式（手机/邮箱/微信）或客服手动完善资料后，系统自动创建或更新客户记录。客户状态包括 <strong>在线</strong>、<strong>离线</strong>、<strong>忙碌</strong>。系统根据最近一次交互时间自动计算沉默/活跃标签。</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>交互规则</h4>
|
||
<ul>
|
||
<li>列表支持按客户名称、手机号、邮箱搜索。</li>
|
||
<li>筛选条件：标签（VIP、新客户、活跃、沉默、企业客户）、状态、来源渠道。</li>
|
||
<li>点击行进入右侧 360 px 详情抽屉，展示客户资料、历史会话、标签编辑、备注。</li>
|
||
<li>客服可在抽屉中为客户添加/移除标签，填写跟进备注。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>字段与约束</h4>
|
||
<ul>
|
||
<li>客户名称：2–50 字符，必填。</li>
|
||
<li>手机号：中国大陆 11 位手机号格式校验。</li>
|
||
<li>邮箱：标准邮箱格式，非必填。</li>
|
||
<li>标签：多选，每个客户最多 10 个标签。</li>
|
||
<li>备注：最多 1000 字符，支持换行。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>5.4 对话记录</h3>
|
||
<p>对话记录用于会话审计、质量抽检与纠纷追溯。所有客服与访客的往来消息、系统事件、客服操作均需持久化。</p>
|
||
|
||
<div class="feature-card">
|
||
<h4>业务逻辑</h4>
|
||
<p>会话结束后，记录进入历史会话库。历史会话状态包括 <strong>进行中</strong>、<strong>已结束</strong>、<strong>已归档</strong>。主管可对重要会话进行归档，归档后不可再修改。</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>交互规则</h4>
|
||
<ul>
|
||
<li>左侧会话卡片展示访客头像、昵称、最后消息、时间、状态标签。</li>
|
||
<li>筛选维度：渠道、客服、状态、日期范围。</li>
|
||
<li>右侧详情面板展示完整消息时间轴、客服转接/结束/备注等操作记录。</li>
|
||
<li>满意度评分与文字评价在详情底部展示。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>5.5 知识库</h3>
|
||
<p>知识库为客服提供标准答案与快捷回复模板，降低培训成本并保证回复一致性。</p>
|
||
|
||
<div class="feature-card">
|
||
<h4>业务逻辑</h4>
|
||
<p>知识条目归属一个分类，状态为 <strong>已发布</strong> 或 <strong>草稿</strong>。已发布条目可在客服工作台被搜索并一键插入聊天输入框。快捷回复模板是特殊的知识条目分类，用于高频话术。</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>交互规则</h4>
|
||
<ul>
|
||
<li>左侧分类树支持展开/折叠，点击分类右侧展示该分类下条目。</li>
|
||
<li>条目列表展示标题、状态、使用频率进度条、更新时间。</li>
|
||
<li>支持新建/编辑/发布/撤回草稿/删除。</li>
|
||
<li>客服在工作台输入框敲击 <code>/</code> 可快速搜索快捷回复。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>字段与约束</h4>
|
||
<ul>
|
||
<li>分类名称：2–30 字符，必填，不可重复。</li>
|
||
<li>条目标题：2–100 字符，必填。</li>
|
||
<li>条目内容：最多 5000 字符，支持富文本（本期先支持纯文本）。</li>
|
||
<li>使用频率：按客服插入次数统计，按日/周/月更新。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>5.6 数据统计</h3>
|
||
<p>数据统计面向客服主管与租户管理员，帮助其掌握服务负荷、团队绩效与访客满意度。</p>
|
||
|
||
<div class="kpi-grid">
|
||
<div class="kpi-card"><div class="label">总会话量</div><div class="value">12,580</div></div>
|
||
<div class="kpi-card"><div class="label">平均响应时长</div><div class="value">32s</div></div>
|
||
<div class="kpi-card"><div class="label">客户满意度</div><div class="value">4.8/5</div></div>
|
||
<div class="kpi-card"><div class="label">首次解决率</div><div class="value">86%</div></div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>业务逻辑</h4>
|
||
<p>系统在会话生命周期中实时采集指标：会话量按小时/天聚合；首次响应时长取客服首次回复与访客首条消息的时间差；满意度取访客评价平均值；首次解决率取单次会话内即被解决且未再次发起的会话占比。</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>图表与下钻</h4>
|
||
<ul>
|
||
<li>会话量趋势折线图：X 轴为时间，Y 轴为会话数，支持按日/周/月切换。</li>
|
||
<li>响应时长分布柱状图：分桶展示 0–10s、10–30s、30–60s、1–3min、>3min 的会话占比。</li>
|
||
<li>渠道来源占比环形图：网页、微信、APP、电话工单、邮件的会话占比。</li>
|
||
<li>客服绩效排行条形图：按接待量、平均响应时长、满意度排序。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>5.7 系统设置</h3>
|
||
<p>系统设置是租户管理员配置服务规则与接入渠道的入口。</p>
|
||
|
||
<div class="feature-card">
|
||
<h4>设置分类</h4>
|
||
<ul>
|
||
<li><strong>基本设置</strong>：租户名称、Logo、客服昵称、时区、语言（本期仅中文）。</li>
|
||
<li><strong>渠道管理</strong>：网页聊天、微信公众号、APP 内嵌、电话客服、邮件工单的启用/禁用与接入配置。</li>
|
||
<li><strong>客服分配规则</strong>：轮询、负载均衡、熟客优先、指定客服。</li>
|
||
<li><strong>权限管理</strong>：角色创建、菜单权限、数据权限、操作权限。</li>
|
||
<li><strong>自动回复</strong>：欢迎语、离线留言提示、关键词自动回复（预留机器人扩展）。</li>
|
||
<li><strong>工作时间</strong>：每周工作时段、节假日设置、非工作时间提示语。</li>
|
||
<li><strong>通知设置</strong>：新会话提醒、离线消息通知、日报/周报推送。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>渠道管理规则</h4>
|
||
<p>每个渠道生成唯一渠道 ID 与接入代码。网页聊天渠道提供一段 <code>script</code> 代码，租户将其复制到网站模板中即可生效。渠道启用/禁用即时生效，禁用后访客端提示「当前渠道已关闭」。</p>
|
||
</div>
|
||
|
||
<h3>5.8 运营概览（管理端）</h3>
|
||
<p>运营概览是平台管理员登录后的首页，展示平台级核心指标与趋势。</p>
|
||
|
||
<div class="kpi-grid">
|
||
<div class="kpi-card"><div class="label">租户总数</div><div class="value">156</div></div>
|
||
<div class="kpi-card"><div class="label">活跃租户</div><div class="value">138</div></div>
|
||
<div class="kpi-card"><div class="label">平台月收入</div><div class="value">¥89,400</div></div>
|
||
<div class="kpi-card"><div class="label">系统可用率</div><div class="value">99.95%</div></div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>展示内容</h4>
|
||
<ul>
|
||
<li>租户增长趋势折线图：近 30 天新增/累计租户数。</li>
|
||
<li>套餐分布图：各套餐租户占比。</li>
|
||
<li>最近操作记录：平台管理员的关键操作审计日志。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>5.9 租户管理</h3>
|
||
<p>租户管理是 SaaS 平台运营的核心模块，覆盖租户从开通到续费、暂停、恢复的全生命周期。</p>
|
||
|
||
<div class="feature-card">
|
||
<h4>业务逻辑</h4>
|
||
<p>租户状态包括 <strong>正常</strong>、<strong>即将到期</strong>、<strong>已暂停</strong>、<strong>已过期</strong>。系统根据到期日期自动切换状态，并在到期前 7 天向租户管理员发送提醒。暂停/过期的租户无法登录客服端，但数据保留。</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>开通新账号表单字段</h4>
|
||
<ul>
|
||
<li>公司名称：2–100 字符，必填，租户维度唯一。</li>
|
||
<li>联系人：2–30 字符，必填。</li>
|
||
<li>手机号：11 位手机号，必填，用于接收登录信息。</li>
|
||
<li>邮箱：标准邮箱格式，必填。</li>
|
||
<li>套餐：单选，来源套餐管理配置。</li>
|
||
<li>坐席数量：正整数，不得超过套餐上限，可额外购买。</li>
|
||
<li>开通时长：1–36 个月。</li>
|
||
<li>自动续费：开关，默认关闭。</li>
|
||
<li>备注：最多 500 字符，非必填。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>操作权限</h4>
|
||
<ul>
|
||
<li>查看：打开租户详情抽屉，展示基本信息、套餐、到期时间、登录链接。</li>
|
||
<li>编辑：修改联系人、坐席数、备注，不可修改套餐与到期时间。</li>
|
||
<li>续费：延长到期时间或升级套餐，记录续费流水。</li>
|
||
<li>暂停/恢复：暂停后租户所有账号无法登录；恢复后即时生效。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>5.10 套餐定价</h3>
|
||
<p>套餐定价定义租户可购买的商业化方案，不同套餐在功能权益与资源配额上存在差异。</p>
|
||
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr><th>权益项</th><th>基础版</th><th>专业版</th><th>企业版</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>月费参考</td><td>¥299/月</td><td>¥699/月</td><td>¥1999/月</td></tr>
|
||
<tr><td>坐席数量</td><td>2</td><td>10</td><td>50（可扩展）</td></tr>
|
||
<tr><td>对话记录保存</td><td>30 天</td><td>180 天</td><td>永久</td></tr>
|
||
<tr><td>知识库容量</td><td>50 条</td><td>500 条</td><td>不限</td></tr>
|
||
<tr><td>数据统计</td><td>基础报表</td><td>高级报表</td><td>自定义报表</td></tr>
|
||
<tr><td>API</td><td>不支持</td><td>基础 API</td><td>完整 API</td></tr>
|
||
<tr><td>渠道</td><td>网页</td><td>网页+微信+APP</td><td>全渠道</td></tr>
|
||
<tr><td>自定义品牌</td><td>不支持</td><td>支持</td><td>支持</td></tr>
|
||
<tr><td>专属客服</td><td>不支持</td><td>不支持</td><td>支持</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>定价规则</h4>
|
||
<ul>
|
||
<li>按月订阅，年付享受 8 折优惠。</li>
|
||
<li>超出套餐坐席按 ¥49/月/坐席 计费。</li>
|
||
<li>套餐支持上架/下架，下架后新租户不可购买，已购买租户可续费。</li>
|
||
<li>企业版可由平台管理员根据客户需求自定义报价。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>5.11 系统运维</h3>
|
||
<p>系统运维面向平台技术团队，提供实时健康度监控、日志审计与平台公告能力。</p>
|
||
|
||
<div class="feature-card">
|
||
<h4>服务状态看板</h4>
|
||
<ul>
|
||
<li>监控项：API 服务、WebSocket 服务、数据库、消息队列、CDN。</li>
|
||
<li>状态：正常（绿色）、告警（黄色）、故障（红色）。</li>
|
||
<li>刷新频率：默认 30 秒，支持手动刷新。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>系统负载与请求监控</h4>
|
||
<ul>
|
||
<li>CPU / 内存 / 磁盘使用率，超过阈值标红并触发告警。</li>
|
||
<li>API 请求量与错误率折线图，时间粒度 1 分钟/5 分钟/1 小时。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>操作日志与公告</h4>
|
||
<ul>
|
||
<li>操作日志记录平台管理员的关键操作：租户开通、套餐修改、公告发布等。</li>
|
||
<li>平台公告支持发布、编辑、撤回；登录后首页弹窗展示最新未读公告。</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="data-model">
|
||
<h2>6 数据模型概览</h2>
|
||
<p>数据模型以租户 ID 作为全局隔离字段，所有业务表均包含 <code>tenant_id</code>。平台级管理表（套餐、平台管理员、系统运维）不包含租户字段。</p>
|
||
|
||
<figure class="diagram">
|
||
<pre class="mermaid">
|
||
erDiagram
|
||
TENANT ||--o{ USER : has
|
||
TENANT ||--o{ CHANNEL : owns
|
||
TENANT ||--o{ CUSTOMER : owns
|
||
TENANT ||--o{ SESSION : owns
|
||
TENANT ||--o{ KNOWLEDGE : owns
|
||
USER ||--o{ SESSION : serves
|
||
CUSTOMER ||--o{ SESSION : initiates
|
||
SESSION ||--o{ MESSAGE : contains
|
||
SESSION ||--o{ SESSION_EVENT : records
|
||
</pre>
|
||
<figcaption>图 3：核心实体关系</figcaption>
|
||
</figure>
|
||
|
||
<h3>6.1 核心实体说明</h3>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr><th>实体</th><th>关键字段</th><th>说明</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>租户 Tenant</td><td>id, name, plan_id, seat_count, expire_at, status, contact_name, contact_phone, contact_email</td><td>SaaS 租户主表，决定数据隔离范围与套餐配额。</td></tr>
|
||
<tr><td>用户 User</td><td>id, tenant_id, role, username, password_hash, nickname, status, last_online_at</td><td>客服账号与平台管理员账号，通过 role 区分。</td></tr>
|
||
<tr><td>渠道 Channel</td><td>id, tenant_id, type, name, status, config, script_code</td><td>网页、微信、APP 等接入渠道配置。</td></tr>
|
||
<tr><td>客户 Customer</td><td>id, tenant_id, name, phone, email, tags, source, status, last_contact_at</td><td>访客沉淀后的客户资产。</td></tr>
|
||
<tr><td>会话 Session</td><td>id, tenant_id, channel_id, customer_id, agent_id, status, priority, satisfaction_score, created_at, ended_at</td><td>一次完整的客服接待过程。</td></tr>
|
||
<tr><td>消息 Message</td><td>id, session_id, sender_type, content, type, sent_at, seq</td><td>会话中的文本/图片/系统消息，seq 保证时序。</td></tr>
|
||
<tr><td>知识库 Knowledge</td><td>id, tenant_id, category_id, title, content, status, usage_count, created_at</td><td>知识条目与快捷回复模板。</td></tr>
|
||
<tr><td>套餐 Plan</td><td>id, name, price_monthly, seats, storage_days, kb_limit, features, status</td><td>平台级套餐定义。</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3>6.2 租户隔离规则</h3>
|
||
<ul>
|
||
<li>所有客服端查询必须携带 <code>tenant_id</code> 过滤，禁止跨租户访问。</li>
|
||
<li>平台管理员查询运营数据时，可按租户聚合，但不暴露单笔客户/会话明细。</li>
|
||
<li>租户删除为软删除，数据保留 180 天后按合规策略清理。</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="interfaces">
|
||
<h2>7 接口需求概览</h2>
|
||
<p>接口按端划分为：访客端 SDK 接口、客服端业务接口、管理端运营接口、通用文件/消息接口。所有接口需鉴权并校验租户权限。</p>
|
||
|
||
<h3>7.1 接口分组</h3>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr><th>分组</th><th>典型接口</th><th>说明</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>访客 Widget</td><td>初始化、发送消息、接收消息、上传图片、提交满意度</td><td>通过渠道 ID 鉴权，无需登录。</td></tr>
|
||
<tr><td>实时消息</td><td>WebSocket 连接、心跳、消息推送、已读回执、输入状态</td><td>使用 room 或 user 维度广播，按租户隔离。</td></tr>
|
||
<tr><td>会话管理</td><td>会话列表、会话详情、分配、转接、结束、备注</td><td>客服只能操作自己被分配的会话，主管可查看全部。</td></tr>
|
||
<tr><td>客户管理</td><td>客户 CRUD、标签管理、搜索筛选</td><td>手机号与邮箱格式校验。</td></tr>
|
||
<tr><td>知识库</td><td>分类 CRUD、条目 CRUD、搜索、插入统计</td><td>发布/草稿状态控制。</td></tr>
|
||
<tr><td>数据统计</td><td>KPI 查询、趋势图、分布图、绩效排行</td><td>支持按时间范围与维度聚合。</td></tr>
|
||
<tr><td>系统设置</td><td>租户配置、渠道配置、分配规则、权限角色</td><td>仅租户管理员及以上可操作。</td></tr>
|
||
<tr><td>租户管理</td><td>租户 CRUD、续费、暂停、恢复</td><td>仅平台管理员可操作。</td></tr>
|
||
<tr><td>系统运维</td><td>健康检查、负载查询、日志查询、公告管理</td><td>平台级接口。</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3>7.2 通用要求</h3>
|
||
<ul>
|
||
<li>所有接口统一返回格式 <code>{ code, message, data }</code>，分页列表返回 <code>{ list, total, page, pageSize }</code>。</li>
|
||
<li>接口响应时间：P99 ≤ 500ms（不涉及大数据聚合的场景）。</li>
|
||
<li>文件上传接口返回 CDN 访问 URL，支持图片预览。</li>
|
||
<li>WebSocket 消息采用 JSON 格式，包含 <code>tenant_id</code>、<code>session_id</code>、<code>seq</code> 等字段。</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="metrics">
|
||
<h2>8 数据统计与埋点</h2>
|
||
<p>埋点服务于运营决策与产品优化，每个事件需明确触发时机与用途。</p>
|
||
|
||
<h3>8.1 核心指标定义</h3>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr><th>指标</th><th>定义</th><th>用途</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>总会话量</td><td>选定时间范围内创建的会话总数</td><td>衡量租户服务负荷</td></tr>
|
||
<tr><td>平均响应时长</td><td>客服首次回复时间 − 访客首条消息时间，取平均值</td><td>衡量客服响应速度</td></tr>
|
||
<tr><td>客户满意度</td><td>访客评分总和 / 评分会话数，1–5 星</td><td>衡量服务质量</td></tr>
|
||
<tr><td>首次解决率</td><td>单次会话内解决且 24h 内未再次发起的会话占比</td><td>衡量一次解决能力</td></tr>
|
||
<tr><td>活跃租户数</td><td>当月产生过会话的租户数</td><td>衡量平台活跃度</td></tr>
|
||
<tr><td>系统可用率</td><td>（总时间 − 故障时间）/ 总时间</td><td>衡量平台稳定性</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3>8.2 埋点事件</h3>
|
||
<ul>
|
||
<li><code>widget_open</code>：访客点击展开 Widget，用于分析入口转化。</li>
|
||
<li><code>message_sent</code>：访客/客服发送消息，携带消息类型与渠道。</li>
|
||
<li><code>session_assigned</code>：会话被分配，携带分配规则与等待时长。</li>
|
||
<li><code>session_ended</code>：会话结束，携带结束原因与满意度。</li>
|
||
<li><code>knowledge_used</code>：客服插入知识库条目，用于优化知识库内容。</li>
|
||
<li><code>tenant_created</code> / <code>tenant_renewed</code>：租户开通/续费，用于收入统计。</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="non-functional">
|
||
<h2>9 非功能性需求</h2>
|
||
|
||
<h3>9.1 性能</h3>
|
||
<ul>
|
||
<li>客服工作台首屏加载时间 ≤ 2 秒（千兆网络）。</li>
|
||
<li>访客 Widget 初始化时间 ≤ 1 秒，不影响宿主页面加载。</li>
|
||
<li>消息端到端延迟 ≤ 300ms（正常网络）。</li>
|
||
<li>单租户并发在线客服 ≥ 200 人，同时在线会话 ≥ 1000 个。</li>
|
||
</ul>
|
||
|
||
<h3>9.2 可用性与可靠性</h3>
|
||
<ul>
|
||
<li>平台级可用率目标 99.9%（月度）。</li>
|
||
<li>消息持久化后再推送，确保不丢消息。</li>
|
||
<li>支持 WebSocket 断线重连与消息补发。</li>
|
||
<li>核心数据每日备份，备份保留 30 天。</li>
|
||
</ul>
|
||
|
||
<h3>9.3 安全</h3>
|
||
<ul>
|
||
<li>所有接口使用 HTTPS/WSS，敏感字段传输加密。</li>
|
||
<li>账号密码加盐哈希存储，支持登录失败锁定。</li>
|
||
<li>租户数据严格隔离，接口层强制校验 <code>tenant_id</code>。</li>
|
||
<li>文件上传限制类型与大小，防止恶意文件。</li>
|
||
<li>操作日志完整记录管理员与客服的关键操作。</li>
|
||
</ul>
|
||
|
||
<h3>9.4 兼容性</h3>
|
||
<ul>
|
||
<li>客服工作台支持 Chrome、Firefox、Safari、Edge 最新两个主版本。</li>
|
||
<li>访客 Widget 支持 IE11 及以上现代浏览器。</li>
|
||
<li>响应式布局适配 1366×768 及以上分辨率。</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="roadmap">
|
||
<h2>10 风险、依赖与里程碑</h2>
|
||
|
||
<h3>10.1 主要风险</h3>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr><th>风险</th><th>影响</th><th>缓解措施</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>WebSocket 高并发稳定性</td><td>消息延迟或掉线</td><td>使用成熟消息中间件，做压测与限流。</td></tr>
|
||
<tr><td>租户隔离逻辑遗漏</td><td>数据泄露</td><td>代码审查 + 自动化接口测试覆盖跨租户访问。</td></tr>
|
||
<tr><td>设计稿与实现偏差</td><td>返工</td><td>UI 还原检查清单，关键页面走查。</td></tr>
|
||
<tr><td>套餐配额校验遗漏</td><td>超卖或功能越权</td><td>在服务端统一校验套餐限制。</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3>10.2 外部依赖</h3>
|
||
<ul>
|
||
<li>短信服务商：用于租户开通验证码与到期提醒。</li>
|
||
<li>邮件服务商：用于发送登录信息与日报。</li>
|
||
<li>对象存储/CDN：用于图片、文件、租户 Logo 存储。</li>
|
||
<li>微信公众号平台：用于微信渠道消息接入。</li>
|
||
</ul>
|
||
|
||
<h3>10.3 里程碑</h3>
|
||
<ol>
|
||
<li><strong>M1 需求评审</strong>：PRD 评审通过，输出接口定义与数据库设计。</li>
|
||
<li><strong>M2 核心会话</strong>：完成 WebSocket 消息、客服工作台、访客 Widget。</li>
|
||
<li><strong>M3 业务模块</strong>：完成客户管理、对话记录、知识库、数据统计。</li>
|
||
<li><strong>M4 平台能力</strong>：完成租户管理、套餐定价、系统设置、运营概览。</li>
|
||
<li><strong>M5 测试上线</strong>：完成集成测试、压力测试、安全审计，灰度发布。</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<section id="acceptance">
|
||
<h2>11 验收标准</h2>
|
||
<p>以下条件作为本期交付的通过标准。</p>
|
||
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr><th>#</th><th>验收项</th><th>通过标准</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>1</td><td>访客咨询完整流程</td><td>访客发起 → 系统分配 → 客服回复 → 满意度评价，端到端无阻塞。</td></tr>
|
||
<tr><td>2</td><td>消息实时性</td><td>同一会话内，消息到达延迟 ≤ 300ms，断线重连后消息不丢失。</td></tr>
|
||
<tr><td>3</td><td>租户隔离</td><td>客服 A 无法查看/操作客服 B 所在租户的任何数据，接口返回 403。</td></tr>
|
||
<tr><td>4</td><td>套餐限制</td><td>基础版租户无法使用微信/APP 渠道，坐席数达到上限后无法新增客服。</td></tr>
|
||
<tr><td>5</td><td>数据统计准确性</td><td>KPI 数值与明细数据手工核对一致，图表数据与表格一致。</td></tr>
|
||
<tr><td>6</td><td>管理端租户生命周期</td><td>开通、续费、暂停、恢复流程正确，到期前提醒送达。</td></tr>
|
||
<tr><td>7</td><td>页面还原度</td><td>核心页面与设计稿一致度 ≥ 95%，交互状态完整。</td></tr>
|
||
<tr><td>8</td><td>性能</td><td>工作台首屏 ≤ 2s，Widget 初始化 ≤ 1s，核心接口 P99 ≤ 500ms。</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="appendix">
|
||
<h2>12 附录：设计稿对应关系</h2>
|
||
<p>下表列出 PRD 章节与设计稿 HTML 文件的对应关系，便于开发时快速查阅原始设计。</p>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr><th>设计稿文件</th><th>对应 PRD 章节</th><th>主要内容</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>dashboard.html</td><td>5.1</td><td>客服工作台三栏布局</td></tr>
|
||
<tr><td>visitor-chat.html</td><td>5.2</td><td>访客端浮动聊天窗口</td></tr>
|
||
<tr><td>customer-management.html</td><td>5.3</td><td>客户列表与详情抽屉</td></tr>
|
||
<tr><td>chat-history.html</td><td>5.4</td><td>对话记录筛选与详情</td></tr>
|
||
<tr><td>knowledge-base.html</td><td>5.5</td><td>知识库分类与条目</td></tr>
|
||
<tr><td>statistics.html</td><td>5.6</td><td>KPI 与数据图表</td></tr>
|
||
<tr><td>settings.html</td><td>5.7</td><td>系统设置与渠道管理</td></tr>
|
||
<tr><td>admin-运营概览.html</td><td>5.8</td><td>平台运营概览</td></tr>
|
||
<tr><td>admin-tenants.html</td><td>5.9</td><td>租户管理</td></tr>
|
||
<tr><td>admin-plans.html</td><td>5.10</td><td>套餐定价</td></tr>
|
||
<tr><td>admin-ops.html</td><td>5.11</td><td>系统运维监控</td></tr>
|
||
<tr><td>admin-dashboard.html</td><td>—</td><td>空文件，未使用</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
<footer>
|
||
<p>文档版本 v1.0 · 2026-07-11 · 客服云产品团队</p>
|
||
</footer>
|
||
</article>
|
||
|
||
<script src="./_shared/js/mermaid.min.js"></script>
|
||
<script>
|
||
mermaid.initialize({ startOnLoad: true, theme: 'neutral', securityLevel: 'loose' });
|
||
</script>
|
||
</body>
|
||
</html>
|