Simon
545 lines
22 KiB
HTML
545 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>工具栏统一设计 v1.3 - 删除 IntegrationZone 旧坐席按钮</title>
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 50%, #fce7f3 100%);
|
||
color: #1a1a1a;
|
||
padding: 24px;
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
min-height: 100vh;
|
||
}
|
||
h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; color: #1a1a1a; }
|
||
h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 32px 0 12px; color: #1a1a1a; }
|
||
h3 { font-size: 14px; font-weight: 600; margin: 12px 0 8px; color: #333; }
|
||
.meta { color: #6b7280; font-size: 12.5px; margin-bottom: 20px; }
|
||
|
||
/* === ChatPanel 整体 === */
|
||
.chatpanel-mock {
|
||
width: 100%;
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
backdrop-filter: blur(20px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||
border-radius: 16px;
|
||
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.chatpanel-mock-header {
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid rgba(99, 102, 241, 0.1);
|
||
background: rgba(255, 255, 255, 0.5);
|
||
font-size: 13px;
|
||
color: #6b7280;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.chatpanel-mock-header .dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
|
||
|
||
/* === 消息流区域 === */
|
||
.chatpanel-mock-messages {
|
||
min-height: 200px;
|
||
padding: 20px 16px;
|
||
background: linear-gradient(180deg, #fafbfc 0%, #f5f7fa 100%);
|
||
}
|
||
.mock-msg {
|
||
max-width: 70%;
|
||
padding: 8px 12px;
|
||
border-radius: 12px;
|
||
margin-bottom: 8px;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
}
|
||
.mock-msg.user {
|
||
margin-left: auto;
|
||
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||
color: #fff;
|
||
}
|
||
.mock-msg.ai {
|
||
background: rgba(255, 255, 255, 0.8);
|
||
color: #1a1a1a;
|
||
border: 1px solid rgba(99, 102, 241, 0.1);
|
||
}
|
||
.mock-msg .meta { font-size: 10.5px; opacity: 0.7; margin-bottom: 2px; color: #6b7280; }
|
||
.mock-msg.user .meta { color: rgba(255, 255, 255, 0.7); }
|
||
|
||
/* === InputBar(消息发送框) === */
|
||
.inputbar-mock {
|
||
background: rgba(255, 255, 255, 0.7);
|
||
backdrop-filter: blur(20px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||
border-top: 1px solid rgba(99, 102, 241, 0.15);
|
||
padding: 12px 16px 16px;
|
||
position: relative;
|
||
}
|
||
|
||
/* === 4 按钮工具栏(InputBar 内上方居中) === */
|
||
.glass-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
padding: 8px 16px;
|
||
margin: 0 auto 12px;
|
||
width: fit-content;
|
||
background: rgba(255, 255, 255, 0.55);
|
||
backdrop-filter: blur(28px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||
border-radius: 20px;
|
||
box-shadow:
|
||
0 1px 0 rgba(255, 255, 255, 0.9) inset,
|
||
0 -1px 0 rgba(99, 102, 241, 0.08) inset,
|
||
0 2px 4px rgba(99, 102, 241, 0.05),
|
||
0 8px 16px rgba(99, 102, 241, 0.08),
|
||
0 24px 48px rgba(99, 102, 241, 0.05);
|
||
position: relative;
|
||
}
|
||
.glass-toolbar::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 20px;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 60%);
|
||
pointer-events: none;
|
||
}
|
||
.glass-toolbar::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 20px;
|
||
background: radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
|
||
radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.12) 0%, transparent 50%);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* === 4 按钮(40px 圆形玻璃) === */
|
||
.glass-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||
background: rgba(255, 255, 255, 0.55);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||
-webkit-tap-highlight-color: transparent;
|
||
position: relative;
|
||
z-index: 2;
|
||
box-shadow:
|
||
0 1px 0 rgba(255, 255, 255, 0.9) inset,
|
||
0 -1px 0 rgba(0, 0, 0, 0.04) inset,
|
||
0 1px 2px rgba(0, 0, 0, 0.04),
|
||
0 2px 4px rgba(0, 0, 0, 0.04);
|
||
overflow: visible;
|
||
}
|
||
.glass-btn:hover {
|
||
background: rgba(255, 255, 255, 0.75);
|
||
transform: translateY(-1px) scale(1.06);
|
||
box-shadow:
|
||
0 1px 0 rgba(255, 255, 255, 1) inset,
|
||
0 -1px 0 rgba(0, 0, 0, 0.04) inset,
|
||
0 2px 4px rgba(0, 0, 0, 0.06),
|
||
0 8px 16px rgba(99, 102, 241, 0.15);
|
||
}
|
||
.glass-btn:active { transform: translateY(0) scale(0.95); }
|
||
.glass-btn svg { width: 22px; height: 22px; display: block; }
|
||
|
||
/* === 坐席按钮(图片头像 44px) === */
|
||
.agent-btn {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
border: 2px solid transparent;
|
||
cursor: pointer;
|
||
position: relative;
|
||
z-index: 2;
|
||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||
-webkit-tap-highlight-color: transparent;
|
||
overflow: visible;
|
||
padding: 0;
|
||
background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%) padding-box;
|
||
}
|
||
.agent-btn::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -2px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
|
||
z-index: -1;
|
||
}
|
||
.agent-btn img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
object-position: center 15%;
|
||
display: block;
|
||
}
|
||
.agent-btn:hover { transform: translateY(-1px) scale(1.05); }
|
||
|
||
/* === 状态徽标(头像右下角小圆点) === */
|
||
.agent-badge {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
border: 2px solid white;
|
||
z-index: 3;
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||
}
|
||
.agent-badge.is-online { background: #10b981; }
|
||
.agent-badge.is-urgent { background: #ef4444; }
|
||
.agent-badge.is-waiting { background: #f59e0b; }
|
||
.agent-badge.is-offline { background: #9ca3af; }
|
||
.agent-badge.is-end { background: #3b82f6; }
|
||
|
||
/* === InputBar 输入框 === */
|
||
.inputbar-mock-field {
|
||
width: 100%;
|
||
min-height: 60px;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
border: 1px solid rgba(99, 102, 241, 0.12);
|
||
border-radius: 12px;
|
||
padding: 10px 14px;
|
||
font-size: 13px;
|
||
color: #9ca3af;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* === 演示容器 === */
|
||
.demo-block {
|
||
background: rgba(255, 255, 255, 0.6);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||
border-radius: 18px;
|
||
padding: 24px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 16px rgba(99, 102, 241, 0.06);
|
||
}
|
||
.demo-label { font-size: 11.5px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; font-weight: 500; }
|
||
|
||
.compare-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
.compare-panel {
|
||
background: rgba(255, 255, 255, 0.5);
|
||
border: 1px solid rgba(99, 102, 241, 0.15);
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
}
|
||
.compare-panel.before {
|
||
border-left: 4px solid #f59e0b;
|
||
}
|
||
.compare-panel.after {
|
||
border-left: 4px solid #10b981;
|
||
}
|
||
.compare-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
|
||
.compare-panel.before .compare-title { color: #b45309; }
|
||
.compare-panel.after .compare-title { color: #047857; }
|
||
|
||
/* === 旧的 IntegrationZone 锁图标按钮（演示用） === */
|
||
.legacy-call-agent {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
height: 32px;
|
||
padding: 6px 14px;
|
||
background: rgba(255, 255, 255, 0.7);
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 16px;
|
||
font-size: 13px;
|
||
color: #6b7280;
|
||
text-decoration: line-through;
|
||
opacity: 0.5;
|
||
}
|
||
.legacy-call-agent .icon { font-size: 14px; }
|
||
|
||
/* 红色删除线标注（演示用） */
|
||
.red-x {
|
||
color: #ef4444;
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.note { background: rgba(254, 243, 199, 0.6); border-left: 3px solid #d97706; padding: 12px 16px; border-radius: 4px; font-size: 12.5px; color: #78350f; margin: 16px 0; backdrop-filter: blur(10px); }
|
||
.note-success { background: rgba(209, 250, 229, 0.6); border-left: 3px solid #10b981; padding: 12px 16px; border-radius: 4px; font-size: 12.5px; color: #064e3b; margin: 16px 0; backdrop-filter: blur(10px); }
|
||
.note-error { background: rgba(254, 226, 226, 0.6); border-left: 3px solid #ef4444; padding: 12px 16px; border-radius: 4px; font-size: 12.5px; color: #7f1d1d; margin: 16px 0; backdrop-filter: blur(10px); }
|
||
|
||
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 12.5px; }
|
||
thead tr { background: rgba(255, 255, 255, 0.6); }
|
||
th { border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px; text-align: left; font-weight: 600; }
|
||
td { border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<svg width="0" height="0" style="position: absolute;">
|
||
<defs>
|
||
<linearGradient id="g-emoji" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
<stop offset="0%" stop-color="#fde68a"/><stop offset="60%" stop-color="#fbbf24"/><stop offset="100%" stop-color="#d97706"/>
|
||
</linearGradient>
|
||
<radialGradient id="g-emoji-blush" cx="50%" cy="50%" r="50%">
|
||
<stop offset="0%" stop-color="rgba(244, 63, 94, 0.4)"/>
|
||
<stop offset="100%" stop-color="rgba(244, 63, 94, 0)"/>
|
||
</radialGradient>
|
||
<linearGradient id="g-highlight" x1="50%" y1="0%" x2="50%" y2="100%">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0.7"/>
|
||
<stop offset="100%" stop-color="white" stop-opacity="0"/>
|
||
</linearGradient>
|
||
<linearGradient id="g-doc-body" x1="50%" y1="0%" x2="50%" y2="100%">
|
||
<stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#dbeafe"/>
|
||
</linearGradient>
|
||
<linearGradient id="g-doc-fold" x1="50%" y1="0%" x2="50%" y2="100%">
|
||
<stop offset="0%" stop-color="#c7d2fe"/><stop offset="100%" stop-color="#6366f1"/>
|
||
</linearGradient>
|
||
<linearGradient id="g-doc-text" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#6366f1"/><stop offset="100%" stop-color="#a855f7"/>
|
||
</linearGradient>
|
||
<linearGradient id="g-mic-body" x1="50%" y1="0%" x2="50%" y2="100%">
|
||
<stop offset="0%" stop-color="#c4b5fd"/><stop offset="50%" stop-color="#8b5cf6"/><stop offset="100%" stop-color="#6d28d9"/>
|
||
</linearGradient>
|
||
<linearGradient id="g-mic-shine" x1="50%" y1="0%" x2="50%" y2="100%">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0.65"/><stop offset="100%" stop-color="white" stop-opacity="0"/>
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
|
||
<h1>工具栏统一设计 v1.3 — 删除 IntegrationZone 旧"人工坐席"按钮</h1>
|
||
<p class="meta">v1.2 基础 + 删除 IntegrationZone.vue 中的锁图标按钮 · InputBar 工具栏 4 按钮保持（emoji / 文件 / 语音 / 坐席头像），位置保持 InputBar 内上方居中 · 2026-08-04</p>
|
||
|
||
<div class="note-error">
|
||
⚠️ <strong>v1.2 → v1.3 我之前的错误理解</strong>（用户截图澄清）：<br>
|
||
• 我误把"删除坐席按钮"理解为删除 InputBar 工具栏里的头像按钮，导致 v1.3 砍到 3 按钮 + 错移到底部<br>
|
||
• 用户的真实意图（截图标注"去掉"指向锁图标按钮）：<br>
|
||
- ❌ 删除 <strong>IntegrationZone.vue 中的"人工坐席"按钮（带锁图标 🔒）</strong><br>
|
||
- ✅ 保留 InputBar 工具栏 <strong>4 按钮</strong>（emoji / 文件 / 语音 / 坐席头像）<br>
|
||
- ✅ 位置保持 <strong>InputBar 内上方居中</strong>（v1.2 位置不动）
|
||
</div>
|
||
|
||
<div class="note-success">
|
||
✅ <strong>v1.3 正确做法</strong>（修正后）：<br>
|
||
• 仅改 <strong>IntegrationZone.vue</strong>：删除坐席按钮 + 周边相关样式/计算<br>
|
||
• <strong>InputBar.vue 不动</strong>（v1.2 的 4 按钮工具栏已经在 InputBar 内上方居中，符合期望）<br>
|
||
• helper 文件（inputBarCallAgentState.ts / integrationZoneLogic.ts）<strong>保留不动</strong>（仍可能被未来其他场景调用）
|
||
</div>
|
||
|
||
<h2>🎯 v1.3 目标对比（Before / After）</h2>
|
||
<div class="demo-block">
|
||
<div class="compare-grid">
|
||
<!-- BEFORE: v1.2 当前状态 -->
|
||
<div class="compare-panel before">
|
||
<div class="compare-title">v1.2（当前线上状态）</div>
|
||
<div style="text-align: center; padding: 12px; background: rgba(254, 243, 199, 0.4); border-radius: 10px;">
|
||
<!-- 旧 IntegrationZone 坐席按钮（带锁图标） -->
|
||
<div style="margin-bottom: 14px;">
|
||
<span class="legacy-call-agent"><span class="icon">🔒</span> 人工坐席</span>
|
||
<span class="red-x">✗</span>
|
||
</div>
|
||
<!-- InputBar 4 按钮工具栏（保留） -->
|
||
<div class="glass-toolbar" style="margin-bottom: 8px;">
|
||
<button class="glass-btn" title="表情">
|
||
<svg viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="9" fill="url(#g-emoji)"/>
|
||
<ellipse cx="12" cy="6" rx="6" ry="2.5" fill="url(#g-highlight)"/>
|
||
<ellipse cx="6.5" cy="14" rx="1.5" ry="1" fill="url(#g-emoji-blush)"/>
|
||
<ellipse cx="17.5" cy="14" rx="1.5" ry="1" fill="url(#g-emoji-blush)"/>
|
||
<ellipse cx="8.5" cy="11" rx="1.4" ry="1.6" fill="#1e1b4b"/>
|
||
<ellipse cx="15.5" cy="11" rx="1.4" ry="1.6" fill="#1e1b4b"/>
|
||
<circle cx="8.9" cy="10.4" r="0.5" fill="white"/>
|
||
<circle cx="15.9" cy="10.4" r="0.5" fill="white"/>
|
||
<path d="M8 15 Q12 18 16 15" fill="none" stroke="#1e1b4b" stroke-width="1.6" stroke-linecap="round"/>
|
||
</svg>
|
||
</button>
|
||
<button class="glass-btn" title="文件">
|
||
<svg viewBox="0 0 24 24" fill="none">
|
||
<path d="M4 2 L14 2 L20 8 L20 20 L4 20 Z" fill="url(#g-doc-body)" stroke="#818cf8" stroke-width="0.8"/>
|
||
<path d="M14 2 L14 8 L20 8" fill="url(#g-doc-fold)" stroke="#818cf8" stroke-width="0.8"/>
|
||
<rect x="7" y="11.5" width="10" height="0.8" rx="0.4" fill="url(#g-doc-text)"/>
|
||
</svg>
|
||
</button>
|
||
<button class="glass-btn" title="语音输入">
|
||
<svg viewBox="0 0 24 24" fill="none">
|
||
<rect x="8" y="2" width="8" height="13" rx="4" fill="url(#g-mic-body)"/>
|
||
<path d="M3 12 Q3 18 12 18 Q21 18 21 12" fill="none" stroke="url(#g-mic-body)" stroke-width="2"/>
|
||
<line x1="12" y1="18" x2="12" y2="22" stroke="url(#g-mic-body)" stroke-width="2"/>
|
||
</svg>
|
||
</button>
|
||
<button class="agent-btn" title="客服在线">
|
||
<img src="./agent-avatar-v0.8.jpg" alt="客服"/>
|
||
<span class="agent-badge is-online"></span>
|
||
</button>
|
||
</div>
|
||
<div class="inputbar-mock-field" style="min-height: 36px; padding: 6px 12px; font-size: 12px;">请输入消息...</div>
|
||
</div>
|
||
<div style="font-size: 12px; color: #92400e; margin-top: 8px;">
|
||
⚠️ <strong>问题</strong>: IntegrationZone 旧"人工坐席"按钮 + InputBar 工具栏头像按钮 = 两个坐席入口并存，用户感知重复
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AFTER: v1.3 目标 -->
|
||
<div class="compare-panel after">
|
||
<div class="compare-title">v1.3（目标状态）</div>
|
||
<div style="text-align: center; padding: 12px; background: rgba(209, 250, 229, 0.4); border-radius: 10px;">
|
||
<!-- IntegrationZone 区域：坐席按钮已删除 -->
|
||
<div style="margin-bottom: 14px; height: 32px; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 11.5px;">
|
||
<span style="opacity: 0.5;">（IntegrationZone 坐席按钮已删除）</span>
|
||
</div>
|
||
<!-- InputBar 4 按钮工具栏（保留） -->
|
||
<div class="glass-toolbar" style="margin-bottom: 8px;">
|
||
<button class="glass-btn" title="表情">
|
||
<svg viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="9" fill="url(#g-emoji)"/>
|
||
<ellipse cx="12" cy="6" rx="6" ry="2.5" fill="url(#g-highlight)"/>
|
||
<ellipse cx="6.5" cy="14" rx="1.5" ry="1" fill="url(#g-emoji-blush)"/>
|
||
<ellipse cx="17.5" cy="14" rx="1.5" ry="1" fill="url(#g-emoji-blush)"/>
|
||
<ellipse cx="8.5" cy="11" rx="1.4" ry="1.6" fill="#1e1b4b"/>
|
||
<ellipse cx="15.5" cy="11" rx="1.4" ry="1.6" fill="#1e1b4b"/>
|
||
<circle cx="8.9" cy="10.4" r="0.5" fill="white"/>
|
||
<circle cx="15.9" cy="10.4" r="0.5" fill="white"/>
|
||
<path d="M8 15 Q12 18 16 15" fill="none" stroke="#1e1b4b" stroke-width="1.6" stroke-linecap="round"/>
|
||
</svg>
|
||
</button>
|
||
<button class="glass-btn" title="文件">
|
||
<svg viewBox="0 0 24 24" fill="none">
|
||
<path d="M4 2 L14 2 L20 8 L20 20 L4 20 Z" fill="url(#g-doc-body)" stroke="#818cf8" stroke-width="0.8"/>
|
||
<path d="M14 2 L14 8 L20 8" fill="url(#g-doc-fold)" stroke="#818cf8" stroke-width="0.8"/>
|
||
<rect x="7" y="11.5" width="10" height="0.8" rx="0.4" fill="url(#g-doc-text)"/>
|
||
</svg>
|
||
</button>
|
||
<button class="glass-btn" title="语音输入">
|
||
<svg viewBox="0 0 24 24" fill="none">
|
||
<rect x="8" y="2" width="8" height="13" rx="4" fill="url(#g-mic-body)"/>
|
||
<path d="M3 12 Q3 18 12 18 Q21 18 21 12" fill="none" stroke="url(#g-mic-body)" stroke-width="2"/>
|
||
<line x1="12" y1="18" x2="12" y2="22" stroke="url(#g-mic-body)" stroke-width="2"/>
|
||
</svg>
|
||
</button>
|
||
<button class="agent-btn" title="客服在线">
|
||
<img src="./agent-avatar-v0.8.jpg" alt="客服"/>
|
||
<span class="agent-badge is-online"></span>
|
||
</button>
|
||
</div>
|
||
<div class="inputbar-mock-field" style="min-height: 36px; padding: 6px 12px; font-size: 12px;">请输入消息...</div>
|
||
</div>
|
||
<div style="font-size: 12px; color: #065f46; margin-top: 8px;">
|
||
✅ <strong>效果</strong>: 仅 InputBar 工具栏头像按钮作为坐席入口，IntegrationZone 锁图标按钮消失，避免视觉冗余
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>📊 v1.2 vs v1.3 改动对比</h2>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>维度</th>
|
||
<th>v1.2（当前）</th>
|
||
<th><strong>v1.3（目标）</strong></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>IntegrationZone 坐席按钮</strong></td>
|
||
<td>🔒 显示在 InputBar 上方（带锁图标）</td>
|
||
<td><strong>❌ 完全删除</strong></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>InputBar 工具栏按钮数</strong></td>
|
||
<td>4（emoji / 文件 / 语音 / 坐席头像）</td>
|
||
<td><strong>4 不变</strong>（emoji / 文件 / 语音 / 坐席头像）</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>工具栏位置</strong></td>
|
||
<td>InputBar 内上方居中</td>
|
||
<td><strong>InputBar 内上方居中（不变）</strong></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>坐席入口数量</strong></td>
|
||
<td>2 个（IntegrationZone + InputBar 工具栏）</td>
|
||
<td><strong>1 个（仅 InputBar 工具栏头像）</strong></td>
|
||
</tr>
|
||
<tr>
|
||
<td>代码改动范围</td>
|
||
<td>—</td>
|
||
<td><strong>仅 IntegrationZone.vue</strong>（InputBar.vue 不动）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>helper 文件（inputBarCallAgentState.ts / integrationZoneLogic.ts）</td>
|
||
<td>存在</td>
|
||
<td><strong>保留不动</strong>（仍可能被未来调用）</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h2>🛠️ 需要修改的文件清单</h2>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>文件</th>
|
||
<th>改动</th>
|
||
<th>影响</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>src/frontend-h5/src/components/chat/IntegrationZone.vue</code></td>
|
||
<td><strong>删除</strong> 坐席按钮的 template 段、script 段、style 段</td>
|
||
<td>仅本文件，局部删除</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>src/frontend-h5/src/components/chat/InputBar.vue</code></td>
|
||
<td><strong>不动</strong>（v1.2 已经正确）</td>
|
||
<td>无</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>src/frontend-h5/src/components/chat/inputBarCallAgentState.ts</code></td>
|
||
<td><strong>不动</strong>（helper 保留）</td>
|
||
<td>无</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>src/frontend-h5/src/components/chat/integrationZoneLogic.ts</code></td>
|
||
<td><strong>不动</strong>（helper 保留）</td>
|
||
<td>无</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>src/frontend-h5/src/components/chat/IntegrationZone.test.ts</code></td>
|
||
<td>删除坐席按钮相关测试用例（如有）</td>
|
||
<td>测试同步更新</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h2>⚠️ 注意事项</h2>
|
||
<ol style="margin-left: 20px; line-height: 1.8; font-size: 13px;">
|
||
<li><strong>坐席 store action 仍可用</strong>：<code>store.shakeAgent()</code> 等方法不会被删除，InputBar 工具栏头像按钮仍调用它们</li>
|
||
<li><strong>整合区其他元素保留</strong>：状态条、引导语等其他整合区元素（如有）保持不变，只删除坐席按钮</li>
|
||
<li><strong>helper 函数保留</strong>：<code>computeCallAgentState</code> / <code>computeIntegrationBtnClass</code> / <code>computeCallAction</code> 等函数仍导出，可被未来其他场景复用</li>
|
||
<li><strong>已回滚到 v1.2</strong>：v1.3 错误实现已通过 jumpserver-V2 紧急回滚到 v1.2，本任务在 v1.2 基础上修改 IntegrationZone.vue</li>
|
||
</ol>
|
||
|
||
<p style="margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(99, 102, 241, 0.15); color: #6b7280; font-size: 11.5px;">
|
||
v1.3 删除 IntegrationZone 旧坐席按钮 · 2026-08-04 · Duckula 主理人 · 等待用户拍板进入开发
|
||
</p>
|
||
|
||
</body>
|
||
</html> |