Simon
facc04aa65
本提交为 .git 对象库损坏后的重建提交，内容等价于原先三个本地提交 （5e2fd4c2 / 57a53c98 / 5d7e1873）的累积结果，未做任何额外改动。 一、docs 结构整改（整改 #14） 根因：重构时新结构为 untracked 文件，执行 git stash（未带 -u）未纳入， 随后 git reset 拉回 HEAD 旧 tracked 树，导致旧树复活、新旧两棵目录 树并存于 docs/，共 791 文件、双分类体系冲突。 修复动作： - b2 同名异主题文件改名迁移保全 9 个 - C 类 39 个孤立文件按主题正确归类 - A/B1 类 222 个重复文件删除（新结构已有内容副本） - 9 个旧独有空目录删除 - 270 处内部引用按 verified 映射改写 - 整改记录 #14 登记于 04-运维文档/部署运维 结果：docs 791 → 569 文件，顶层仅规范 8 类 + 治理文件，单树恢复。 残留：约 20 处指向从未存在文件的陈旧死链，归入独立文档卫生任务。 二、compose 双目录对齐（消除踩坑 A） - docker-compose.yml：nginx 前端挂载全部由根目录 frontend-*/dist 改为 src/frontend-*/dist（h5 / agent / admin / terminal） - docker-compose.dev.yml：dev 服务 build context 与卷同步改 src/ - 效果：本地 docker compose up 不再把根目录 stale dist 挂回， 与线上一致，分叉隐患消除（已 docker compose config 校验通过） 防复发铁律： - 重构须提交；仓库修复须 git stash -u 或先 commit - 新结构须 git add 并提交，避免再次 untracked 复活 - H5 改动只动 src/frontend-h5/，禁改根目录遗留 frontend-*/
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>
|