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-*/
256 lines
6.8 KiB
HTML
256 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>IT智能服务台 · 员工端-暂停恢复</title>
|
|
<style>
|
|
:root {
|
|
--accent: #3b82f6;
|
|
--accent-soft: rgba(59, 130, 246, 0.12);
|
|
--bg-primary: #f5f6fa;
|
|
--bg-secondary: #ffffff;
|
|
--bg-tertiary: #eef0f5;
|
|
--text-primary: #1a1a2e;
|
|
--text-secondary: #555770;
|
|
--text-tertiary: #9ca3af;
|
|
--border-color: #e5e7eb;
|
|
--shadow: 0 1px 4px rgba(0,0,0,0.06);
|
|
--radius: 12px;
|
|
--transition: 0.2s ease;
|
|
--color-employee-bg: #3b82f6;
|
|
--color-agent-bg: #ffffff;
|
|
--color-agent-border: #e5e7eb;
|
|
--color-ai-bg: #e8f5e9;
|
|
--color-ai-text: #1b5e20;
|
|
--color-system-text: #9ca3af;
|
|
--color-system-bg: #eef0f5;
|
|
--color-warning: #ff9800;
|
|
--color-danger: #ef4444;
|
|
--color-success: #22c55e;
|
|
}
|
|
[data-theme="dark"] {
|
|
--accent: #3b82f6;
|
|
--bg-primary: #0f172a;
|
|
--bg-secondary: #1e293b;
|
|
--bg-tertiary: #162032;
|
|
--text-primary: #e2e8f0;
|
|
--text-secondary: #94a3b8;
|
|
--border-color: #334155;
|
|
--shadow: 0 1px 4px rgba(0,0,0,0.3);
|
|
--color-employee-bg: #2563eb;
|
|
--color-agent-bg: #1e293b;
|
|
--color-agent-border: #334155;
|
|
--color-ai-bg: #0d3320;
|
|
--color-ai-text: #86efac;
|
|
--color-system-text: #64748b;
|
|
--color-system-bg: #162032;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-primary); color: var(--text-primary); }
|
|
|
|
/* 手机容器 */
|
|
.phone-frame {
|
|
width: 375px;
|
|
height: 700px;
|
|
margin: 20px auto;
|
|
border-radius: 32px;
|
|
border: 8px solid #1a1a2e;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: var(--bg-secondary);
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
/* 状态栏 */
|
|
.status-bar {
|
|
height: 44px;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 16px;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.status-bar .time { font-weight: 500; }
|
|
|
|
/* 聊天区域 */
|
|
.chat-area { height: calc(100% - 44px - 60px); overflow-y: auto; padding: 16px; }
|
|
|
|
/* 消息气泡 */
|
|
.message { display: flex; margin-bottom: 16px; align-items: flex-start; }
|
|
.message.employee { flex-direction: row-reverse; }
|
|
.message .avatar {
|
|
width: 32px; height: 32px; border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 14px; flex-shrink: 0; margin: 0 10px;
|
|
}
|
|
.message.employee .avatar { background: var(--color-employee-bg); color: white; }
|
|
.message.ai .avatar { background: var(--color-ai-bg); color: var(--color-ai-text); }
|
|
.message .bubble {
|
|
max-width: 75%;
|
|
padding: 10px 14px;
|
|
border-radius: 16px;
|
|
font-size: 14px; line-height: 1.5;
|
|
position: relative;
|
|
}
|
|
.message.employee .bubble {
|
|
background: var(--color-employee-bg);
|
|
color: white;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
.message.ai .bubble {
|
|
background: var(--color-ai-bg);
|
|
color: var(--color-ai-text);
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
|
|
/* 暂停状态卡片 */
|
|
.pause-card {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin: 12px 0;
|
|
text-align: center;
|
|
}
|
|
.pause-card .icon { font-size: 40px; margin-bottom: 8px; }
|
|
.pause-card h3 { font-size: 16px; margin-bottom: 6px; color: var(--text-primary); }
|
|
.pause-card p { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
|
|
.pause-card button {
|
|
background: var(--accent);
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 28px;
|
|
border-radius: 20px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 恢复提示 */
|
|
.resume-hint {
|
|
background: var(--color-ai-bg);
|
|
border-radius: 12px;
|
|
padding: 14px;
|
|
margin: 10px 0;
|
|
}
|
|
.resume-hint .title {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--color-ai-text);
|
|
margin-bottom: 8px;
|
|
}
|
|
.resume-hint .step {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.resume-hint .step-num {
|
|
width: 18px; height: 18px;
|
|
border-radius: 50%;
|
|
background: var(--color-ai-text);
|
|
color: var(--color-ai-bg);
|
|
font-size: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 底部输入框 */
|
|
.input-bar {
|
|
height: 60px;
|
|
background: var(--bg-secondary);
|
|
border-top: 1px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
gap: 10px;
|
|
}
|
|
.input-bar input {
|
|
flex: 1;
|
|
height: 40px;
|
|
border: none;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 20px;
|
|
padding: 0 16px;
|
|
font-size: 14px;
|
|
outline: none;
|
|
color: var(--text-primary);
|
|
}
|
|
.input-bar .send-btn {
|
|
width: 36px; height: 36px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="phone-frame">
|
|
<!-- 状态栏 -->
|
|
<div class="status-bar">
|
|
<span class="time">14:30</span>
|
|
<span>📶 🔋</span>
|
|
</div>
|
|
|
|
<!-- 聊天区域 -->
|
|
<div class="chat-area">
|
|
<div class="message ai">
|
|
<div class="avatar">🤖</div>
|
|
<div class="bubble">好的，您先忙～需要继续时跟我说一声「继续」就好。当前进度：正在收集您的打印机信息</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 暂停卡片 -->
|
|
<div class="pause-card">
|
|
<div class="icon">⏸️</div>
|
|
<h3>会话已暂停</h3>
|
|
<p>当前任务：打印机故障排查<br>已收集：设备类型、网络状态</p>
|
|
<button>▶ 继续处理</button>
|
|
</div>
|
|
|
|
<!-- 输入框 -->
|
|
<div class="input-bar">
|
|
<input type="text" placeholder="输入消息..." value="继续">
|
|
<button class="send-btn">➤</button>
|
|
</div>
|
|
</div>
|
|
|
|
<hr style="margin:40px auto;width:1px;height:400px;border:none;border-left:2px dashed #ccc;">
|
|
|
|
<!-- 恢复后 -->
|
|
<div class="phone-frame" style="display:inline-block;vertical-align:top;">
|
|
<div class="status-bar">
|
|
<span class="time">14:32</span>
|
|
<span>📶 🔋</span>
|
|
</div>
|
|
<div class="chat-area">
|
|
<div class="message ai">
|
|
<div class="avatar">🤖</div>
|
|
<div class="bubble">欢迎回来！您之前在处理「打印机故障排查」，当前进度：正在确认网络连接状态，我们继续吧～</div>
|
|
</div>
|
|
<div class="resume-hint">
|
|
<div class="title">📋 恢复进度</div>
|
|
<div class="step"><span class="step-num">1</span> 设备类型：HP LaserJet Pro</div>
|
|
<div class="step"><span class="step-num">2</span> 网络状态：已连接</div>
|
|
<div class="step"><span class="step-num">3</span> 待确认：打印测试</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-bar">
|
|
<input type="text" placeholder="继续排查...">
|
|
<button class="send-btn">➤</button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|