Simon
44e77dcb0e
**重构前**（旧编号 02-11）： - docs/02-产品需求/ → 00 产品规划/PRD - docs/03-技术架构/ → 01-05 子目录散落 - docs/04-原型设计/ → 01-02 产品设计（HTML 原型） - docs/05-原型设计/ → screens/ - docs/06-测试素材/ → 02-E2E / 03-功能 / 04-版本测试 - docs/07-项目管理/ → 任务说明书/日报/计划 - docs/08-安全审计/ → 审计报告 - docs/09-堡垒运维/ → toolbox / deploy - docs/10-项目管理/ → 任务说明书（重复） - docs/11-历史归档/ → deploy-nas-archived **重构后**（新编号 00-07，语义化）： - docs/00-产品开发流程与文档管理规范.md - docs/00-版本迭代总览.md - docs/01-产品文档/ （PRD/原型/认证/会话/AI 服务/坐席/集成） - docs/02-技术文档/ （技术方案/架构图/重构记录/前端改造/实现配置） - docs/03-测试文档/ （E2E/功能用例/版本报告/缺陷单） - docs/04-运维文档/ （部署运维/运维指南） - docs/05-运营文档/ （品牌推广/用户手册） - docs/06-安全审计/ （审计报告） - docs/07-项目管理/ （任务说明书/日报/计划/看板） **净收益**： - 目录编号与产品文档管理规范对齐（按文档阶段 01-07 编号） - 消除 02-产品需求 与 10-项目管理 的编号重叠 - 子目录按文档类型分组（如 01-产品文档/00-产品规划、01-产品文档/01-认证与登录） - 把运维/安全/项目管理从 0X 散落改为 04/06/07 合计 494 文件 + 78495 行 / - 14076 行
190 lines
11 KiB
HTML
190 lines
11 KiB
HTML
<!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>
|
|
:root {
|
|
--primary: #07C160;
|
|
--primary-light: #e8f9ed;
|
|
--text: #333;
|
|
--text-light: #666;
|
|
--border: #e5e5e5;
|
|
--bg: #f7f7f7;
|
|
--white: #fff;
|
|
--warning: #ff976a;
|
|
--danger: #ee0a24;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; background: var(--bg); padding: 20px; min-height: 100vh; }
|
|
.container { max-width: 800px; margin: 0 auto; }
|
|
h1 { text-align: center; margin-bottom: 30px; color: var(--text); font-size: 24px; }
|
|
.section { background: var(--white); border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
|
|
.section-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; color: var(--text); display: flex; align-items: center; gap: 8px; }
|
|
.section-title::before { content: ''; width: 4px; height: 16px; background: var(--primary); border-radius: 2px; }
|
|
|
|
/* 状态卡片 */
|
|
.states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
|
.state-card { border: 2px dashed var(--border); border-radius: 12px; padding: 20px; text-align: center; transition: all 0.3s; }
|
|
.state-card.active { border-color: var(--primary); background: var(--primary-light); }
|
|
.state-num { font-size: 12px; color: var(--text-light); margin-bottom: 8px; }
|
|
.state-btn { padding: 12px 20px; border-radius: 24px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; width: 100%; }
|
|
|
|
/* 按钮样式 */
|
|
.btn-outline { background: var(--white); border: 2px solid var(--primary); color: var(--primary); }
|
|
.btn-warning { background: var(--warning); color: var(--white); }
|
|
.btn-primary { background: var(--primary); color: var(--white); }
|
|
|
|
/* 流程箭头 */
|
|
.flow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 20px 0; }
|
|
.flow-step { background: var(--primary); color: var(--white); padding: 10px 20px; border-radius: 24px; font-size: 14px; font-weight: 500; }
|
|
.flow-arrow { font-size: 24px; color: var(--text-light); }
|
|
|
|
/* 弹窗 */
|
|
.modal { background: var(--white); border-radius: 16px; width: 90%; max-width: 360px; margin: 0 auto; overflow: hidden; }
|
|
.modal-header { padding: 24px; text-align: center; border-bottom: 1px solid var(--border); }
|
|
.modal-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
|
|
.modal-desc { font-size: 14px; color: var(--text-light); }
|
|
.modal-footer { display: flex; border-top: 1px solid var(--border); }
|
|
.modal-btn { flex: 1; padding: 16px; border: none; font-size: 15px; cursor: pointer; background: var(--white); }
|
|
.modal-btn.cancel { color: var(--text-light); }
|
|
.modal-btn.confirm { color: var(--primary); font-weight: 600; border-left: 1px solid var(--border); }
|
|
|
|
/* 评价组件 */
|
|
.eval-body { padding: 24px; }
|
|
.eval-title { text-align: center; font-size: 18px; font-weight: 600; margin-bottom: 20px; }
|
|
.eval-options { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; }
|
|
.eval-option { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
|
|
.eval-option input { display: none; }
|
|
.eval-emoji { width: 56px; height: 56px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 28px; transition: all 0.2s; border: 2px solid transparent; }
|
|
.eval-option input:checked + .eval-emoji { background: var(--primary-light); border-color: var(--primary); transform: scale(1.1); }
|
|
.eval-label { font-size: 13px; color: var(--text-light); }
|
|
.eval-textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 14px; resize: none; margin-bottom: 16px; min-height: 80px; }
|
|
.eval-submit { width: 100%; padding: 14px; background: var(--primary); color: var(--white); border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; }
|
|
|
|
/* 说明 */
|
|
.note { background: #fff7e6; border: 1px solid #ffd591; border-radius: 8px; padding: 16px; font-size: 14px; color: #d46b08; margin-top: 16px; }
|
|
|
|
/* 输入栏 - 原来版本 */
|
|
.input-bar-demo { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
|
|
.input-bar-demo .toolbar { display: flex; gap: 8px; }
|
|
.input-bar-demo .tool-btn { width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; font-size: 20px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
|
.input-bar-demo .tool-btn:hover { background: var(--bg); }
|
|
.input-bar-demo .input-field { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 14px; min-height: 40px; }
|
|
.input-bar-demo .action-btn { padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; display: flex; align-items: center; gap: 6px; }
|
|
.input-bar-demo .btn-outline { background: var(--white); border: 1px solid var(--primary); color: var(--primary); }
|
|
.input-bar-demo .btn-primary { background: var(--primary); color: var(--white); }
|
|
|
|
/* 状态按钮样式 */
|
|
.status-waiting { background: var(--warning); color: var(--white); }
|
|
.status-end { background: var(--danger); color: var(--white); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🎯 员工结束会话功能 - 原型图</h1>
|
|
|
|
<!-- 输入栏UI -->
|
|
<div class="section">
|
|
<div class="section-title">输入栏UI（保持原有位置）</div>
|
|
<div class="input-bar-demo">
|
|
<div class="toolbar">
|
|
<button class="tool-btn" title="表情">😊</button>
|
|
<button class="tool-btn" title="文件">📎</button>
|
|
</div>
|
|
<input type="text" class="input-field" placeholder="请输入消息...">
|
|
<button class="action-btn btn-outline">🎧 人工咨询</button>
|
|
<button class="action-btn btn-primary">发送</button>
|
|
</div>
|
|
<div class="note">💡 按钮位置不变，仅文字根据状态变化：人工咨询 → 排队等待 → 结束咨询</div>
|
|
</div>
|
|
|
|
<!-- 状态流程 -->
|
|
<div class="section">
|
|
<div class="section-title">三状态（按钮文字变化）</div>
|
|
<div class="states">
|
|
<div class="state-card active">
|
|
<div class="state-num">状态1</div>
|
|
<button class="state-btn btn-outline">🎧 人工咨询</button>
|
|
<div style="margin-top:12px;font-size:13px;color:var(--text-light);">点击发起呼叫</div>
|
|
</div>
|
|
<div class="state-card">
|
|
<div class="state-num">状态2</div>
|
|
<button class="state-btn status-waiting">⏳ 排队等待</button>
|
|
<div style="margin-top:12px;font-size:13px;color:var(--text-light);">点击弹出确认</div>
|
|
</div>
|
|
<div class="state-card">
|
|
<div class="state-num">状态3</div>
|
|
<button class="state-btn status-end">📴 结束咨询</button>
|
|
<div style="margin-top:12px;font-size:13px;color:var(--text-light);">点击→评价→关闭</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 弹窗1：取消排队 -->
|
|
<div class="section">
|
|
<div class="section-title">弹窗1：取消排队确认（状态2点击时触发）</div>
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<div class="modal-title">取消排队？</div>
|
|
<div class="modal-desc">您正在排队等待人工坐席，是否取消？</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="modal-btn cancel">暂不取消</button>
|
|
<button class="modal-btn confirm">确认取消</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 弹窗2：满意度评价 -->
|
|
<div class="section">
|
|
<div class="section-title">弹窗2：满意度评价（状态3点击时触发）</div>
|
|
<div class="modal">
|
|
<div class="eval-body">
|
|
<div class="eval-title">本次服务是否满意？</div>
|
|
<div class="eval-options">
|
|
<label class="eval-option">
|
|
<input type="radio" name="eval" value="satisfied">
|
|
<div class="eval-emoji">😊</div>
|
|
<span class="eval-label">满意</span>
|
|
</label>
|
|
<label class="eval-option">
|
|
<input type="radio" name="eval" value="neutral">
|
|
<div class="eval-emoji">😐</div>
|
|
<span class="eval-label">一般</span>
|
|
</label>
|
|
<label class="eval-option">
|
|
<input type="radio" name="eval" value="dissatisfied">
|
|
<div class="eval-emoji">😞</div>
|
|
<span class="eval-label">不满意</span>
|
|
</label>
|
|
</div>
|
|
<textarea class="eval-textarea" placeholder="补充意见（可选）"></textarea>
|
|
<button class="eval-submit">提交评价</button>
|
|
</div>
|
|
</div>
|
|
<div class="note">📌 提交评价后 → 窗口自动关闭 → 重新进入 = 全新会话</div>
|
|
</div>
|
|
|
|
<!-- 完整流程 -->
|
|
<div class="section">
|
|
<div class="section-title">完整流程</div>
|
|
<div class="flow">
|
|
<div class="flow-step">🎧 人工咨询</div>
|
|
<span class="flow-arrow">→</span>
|
|
<div class="flow-step">⏳ 排队等待</div>
|
|
<span class="flow-arrow">→</span>
|
|
<div class="flow-step">📴 结束咨询</div>
|
|
<span class="flow-arrow">→</span>
|
|
<div class="flow-step">😊 满意度评价</div>
|
|
<span class="flow-arrow">→</span>
|
|
<div class="flow-step">🚪 窗口关闭</div>
|
|
<span class="flow-arrow">→</span>
|
|
<div class="flow-step">✨ 全新会话</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|