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>
|