561 lines
23 KiB
HTML
561 lines
23 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>工具栏统一设计 v1.4 - 添加群聊图标 + 居中人工坐席按钮</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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* === 工具栏(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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* === 圆形玻璃按钮（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;
|
|||
|
|
box-shadow:
|
|||
|
|
0 0 0 3px rgba(255, 255, 255, 0.55),
|
|||
|
|
0 4px 10px rgba(99, 102, 241, 0.28),
|
|||
|
|
0 2px 6px rgba(99, 102, 241, 0.18);
|
|||
|
|
}
|
|||
|
|
.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-info { background: rgba(219, 234, 254, 0.6); border-left: 3px solid #3b82f6; padding: 12px 16px; border-radius: 4px; font-size: 12.5px; color: #1e3a8a; 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>
|
|||
|
|
<!-- 群聊图标渐变 -->
|
|||
|
|
<linearGradient id="g-group" x1="0%" y1="0%" x2="100%" y2="100%">
|
|||
|
|
<stop offset="0%" stop-color="#a5b4fc"/><stop offset="100%" stop-color="#c4b5fd"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
<linearGradient id="g-group-strong" x1="0%" y1="0%" x2="100%" y2="100%">
|
|||
|
|
<stop offset="0%" stop-color="#6366f1"/><stop offset="50%" stop-color="#a855f7"/><stop offset="100%" stop-color="#ec4899"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
</defs>
|
|||
|
|
</svg>
|
|||
|
|
|
|||
|
|
<h1>工具栏统一设计 v1.4 — 添加群聊图标 + 居中人工坐席按钮</h1>
|
|||
|
|
<p class="meta">v1.3 基础（已删除 IntegrationZone 旧坐席按钮）+ 员工端工具栏新增「群聊」图标 + 人工坐席头像按钮移至工具栏中央位置 · 2026-08-05</p>
|
|||
|
|
|
|||
|
|
<div class="note-info">
|
|||
|
|
📌 <strong>v1.4 改动说明（基于 v1.3）</strong>：<br>
|
|||
|
|
• <strong>新增「群聊」图标</strong>：员工端 InputBar 工具栏新增 1 个群聊（多人）玻璃按钮<br>
|
|||
|
|
• <strong>人工坐席按钮居中</strong>：由工具栏最右端（第 4 位）移至中央（5 按钮中的第 3 位），并用渐变描边 + 外发光强调其主操作地位<br>
|
|||
|
|
• 工具栏按钮数由 4 → <strong>5</strong>（emoji / 文件 / <strong>坐席头像(居中)</strong> / 语音 / 群聊）<br>
|
|||
|
|
• IntegrationZone.vue 仍保持 v1.3 已删除坐席按钮的状态，本版仅改动 InputBar 工具栏
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2>🎯 v1.4 目标对比（Before / After）</h2>
|
|||
|
|
<div class="demo-block">
|
|||
|
|
<div class="compare-grid">
|
|||
|
|
<!-- BEFORE: v1.3 当前状态 -->
|
|||
|
|
<div class="compare-panel before">
|
|||
|
|
<div class="compare-title">v1.3（当前状态）</div>
|
|||
|
|
<div style="text-align: center; padding: 12px; background: rgba(254, 243, 199, 0.4); border-radius: 10px;">
|
|||
|
|
<!-- 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>: 4 按钮，坐席头像在最右端，作为次要视觉权重；无群聊入口
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- AFTER: v1.4 目标 -->
|
|||
|
|
<div class="compare-panel after">
|
|||
|
|
<div class="compare-title">v1.4（目标状态）</div>
|
|||
|
|
<div style="text-align: center; padding: 12px; background: rgba(209, 250, 229, 0.4); border-radius: 10px;">
|
|||
|
|
<!-- InputBar 5 按钮工具栏（坐席居中 + 群聊） -->
|
|||
|
|
<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="agent-btn" title="客服在线">
|
|||
|
|
<img src="./agent-avatar-v0.8.jpg" alt="客服"/>
|
|||
|
|
<span class="agent-badge is-online"></span>
|
|||
|
|
</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="glass-btn" title="群聊">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|||
|
|
<!-- 后排左人 -->
|
|||
|
|
<circle cx="8" cy="9" r="2.2" fill="url(#g-group)"/>
|
|||
|
|
<path d="M5 16 Q5 13 8 13 Q11 13 11 16 Z" fill="url(#g-group)"/>
|
|||
|
|
<!-- 后排右人 -->
|
|||
|
|
<circle cx="16" cy="9" r="2.2" fill="url(#g-group)"/>
|
|||
|
|
<path d="M13 16 Q13 13 16 13 Q19 13 19 16 Z" fill="url(#g-group)"/>
|
|||
|
|
<!-- 前排中人人（更大，强调） -->
|
|||
|
|
<circle cx="12" cy="10.5" r="2.8" fill="url(#g-group-strong)"/>
|
|||
|
|
<path d="M8.5 18.5 Q8.5 14 12 14 Q15.5 14 15.5 18.5 Z" fill="url(#g-group-strong)"/>
|
|||
|
|
</svg>
|
|||
|
|
</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>: 5 按钮，坐席头像居中且视觉突出（渐变描边 + 外发光），新增群聊入口
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2>📊 v1.3 vs v1.4 改动对比</h2>
|
|||
|
|
<table>
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>维度</th>
|
|||
|
|
<th>v1.3（当前）</th>
|
|||
|
|
<th><strong>v1.4（目标）</strong></th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td><strong>工具栏按钮数</strong></td>
|
|||
|
|
<td>4（emoji / 文件 / 语音 / 坐席头像）</td>
|
|||
|
|
<td><strong>5</strong>（emoji / 文件 / 坐席头像 / 语音 / 群聊）</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><strong>人工坐席按钮位置</strong></td>
|
|||
|
|
<td>工具栏最右端（第 4 位）</td>
|
|||
|
|
<td><strong>工具栏中央（第 3 位，强调主操作）</strong></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><strong>群聊图标</strong></td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><strong>✅ 新增（工具栏最右端，第 5 位）</strong></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><strong>坐席按钮视觉权重</strong></td>
|
|||
|
|
<td>普通玻璃头像</td>
|
|||
|
|
<td><strong>渐变描边 + 外发光，突出居中主入口</strong></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><strong>工具栏位置</strong></td>
|
|||
|
|
<td>InputBar 内上方居中</td>
|
|||
|
|
<td><strong>InputBar 内上方居中（不变）</strong></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><strong>IntegrationZone 坐席按钮</strong></td>
|
|||
|
|
<td>已删除（v1.3）</td>
|
|||
|
|
<td><strong>保持删除</strong></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>代码改动范围</td>
|
|||
|
|
<td>仅 IntegrationZone.vue（v1.3）</td>
|
|||
|
|
<td><strong>仅 InputBar.vue 工具栏（新增图标 + 调整顺序）</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/InputBar.vue</code></td>
|
|||
|
|
<td><strong>改</strong>：工具栏新增「群聊」玻璃按钮（含 SVG 图标）；将坐席头像按钮从末位移至中央（第 3 位）；坐席按钮增加居中强调样式</td>
|
|||
|
|
<td>本文件工具栏局部调整</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><code>src/frontend-h5/src/components/chat/IntegrationZone.vue</code></td>
|
|||
|
|
<td><strong>不动</strong>（v1.3 已删除坐席按钮）</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/InputBar.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>群聊图标位置</strong>：当前放在工具栏最右端（第 5 位）。若希望群聊紧邻坐席或放到最左，可调整顺序</li>
|
|||
|
|
<li><strong>坐席居中顺序</strong>：采用「emoji / 文件 / <strong>坐席(居中)</strong> / 语音 / 群聊」对称布局，使坐席成为视觉焦点。如希望「坐席 / emoji / 文件 / 语音 / 群聊」或其他顺序请告知</li>
|
|||
|
|
<li><strong>坐席按钮强调样式</strong>：为凸显「居中主操作」，增加了渐变描边 + 白色外环 + 外发光。如觉得过度可改回普通玻璃头像样式</li>
|
|||
|
|
<li><strong>群聊交互未定义</strong>：原型仅含图标占位，点击后跳转「群聊列表 / 当前群会话」的行为需产品补充</li>
|
|||
|
|
<li><strong>头像占位图</strong>：<code>./agent-avatar-v0.8.jpg</code> 为占位路径，实际集成时替换为真实客服头像资源</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.4 添加群聊图标 + 居中人工坐席按钮 · 2026-08-05 · Duckula 主理人 · 等待用户拍板进入开发
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|