[split-upload 3/6] f2fd4fa backup via proxy
This commit is contained in:
Simon
@@ -0,0 +1,434 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>工具栏统一设计 v0.4 - WB 专家团队风格</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: #f5f6f8;
|
||||
color: #1a1a1a;
|
||||
padding: 32px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; color: #1a1a1a; }
|
||||
h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 40px 0 12px; color: #1a1a1a; }
|
||||
h3 { font-size: 14px; font-weight: 600; margin: 16px 0 8px; color: #333; }
|
||||
.meta { color: #6b7280; font-size: 12.5px; margin-bottom: 24px; }
|
||||
|
||||
/* === 4 按钮统一容器(模拟 InputBar 工具栏) === */
|
||||
.toolbar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 10px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8eaed;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.toolbar-divider {
|
||||
width: 1px;
|
||||
height: 22px;
|
||||
background: #e8eaed;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
/* === 统一按钮基础(35×35,圆润) === */
|
||||
.tool-btn {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border: 1px solid #e8eaed;
|
||||
background: #ffffff;
|
||||
border-radius: 50%; /* 圆形按钮 — WB 风格 */
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
position: relative;
|
||||
color: #5f6368;
|
||||
font-size: 16px;
|
||||
}
|
||||
.tool-btn:hover {
|
||||
background: #f5f6f8;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.tool-btn:active { transform: translateY(0) scale(0.94); }
|
||||
.tool-btn svg { width: 18px; height: 18px; }
|
||||
|
||||
/* === WB 风格:客服 = 圆形渐变头像 + 白色客服图标 === */
|
||||
.wb-agent {
|
||||
border: 1.5px solid transparent;
|
||||
background-clip: padding-box;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
.wb-agent::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
padding: 1.5px;
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
.wb-agent::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 1.5px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.wb-agent .agent-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.wb-agent .agent-content svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 6 态 - 渐变色变化 */
|
||||
.wb-agent.is-active::after { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%); }
|
||||
.wb-agent.is-active::before { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); }
|
||||
|
||||
.wb-agent.is-disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
.wb-agent.is-disabled:hover { transform: none; box-shadow: none; }
|
||||
.wb-agent.is-disabled::after { background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%); }
|
||||
.wb-agent.is-disabled::before { background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%); }
|
||||
|
||||
.wb-agent.is-urgent {
|
||||
animation: agentGlow 1.6s ease-in-out infinite;
|
||||
}
|
||||
.wb-agent.is-urgent::after { background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%); }
|
||||
.wb-agent.is-urgent::before { background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #dc2626 100%); }
|
||||
@keyframes agentGlow {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
|
||||
50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.18); }
|
||||
}
|
||||
|
||||
.wb-agent.is-waiting::after { background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%); }
|
||||
.wb-agent.is-waiting::before { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%); }
|
||||
|
||||
.wb-agent.is-end::after { background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%); }
|
||||
.wb-agent.is-end::before { background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%); }
|
||||
|
||||
.wb-agent.is-reopen::after { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%); }
|
||||
.wb-agent.is-reopen::before { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%); }
|
||||
|
||||
/* === 演示容器 === */
|
||||
.demo-block {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8eaed;
|
||||
border-radius: 14px;
|
||||
padding: 28px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.demo-label { font-size: 11.5px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; font-weight: 500; }
|
||||
|
||||
/* === 状态切换 tab === */
|
||||
.state-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #e8eaed; }
|
||||
.state-tab {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #e8eaed;
|
||||
background: #ffffff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 12.5px;
|
||||
color: #5f6368;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.state-tab:hover { background: #f5f6f8; }
|
||||
.state-tab.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
|
||||
|
||||
.state-stage {
|
||||
min-height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #fafbfc 0%, #f0f1f5 100%);
|
||||
border-radius: 10px;
|
||||
padding: 32px;
|
||||
}
|
||||
.state-desc { color: #5f6368; font-size: 12.5px; line-height: 1.7; background: #fafbfc; padding: 12px 14px; border-radius: 6px; border-left: 2px solid #6366f1; margin-top: 12px; }
|
||||
.state-desc strong { color: #1a1a1a; }
|
||||
|
||||
/* === 4 按钮并排 === */
|
||||
.four-btns {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, #fafbfc 0%, #f0f1f5 100%);
|
||||
border: 1px solid #e8eaed;
|
||||
border-radius: 12px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
/* === 对比表 === */
|
||||
.cmp-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 12.5px; }
|
||||
.cmp-table th, .cmp-table td { border: 1px solid #e8eaed; padding: 8px 10px; text-align: left; }
|
||||
.cmp-table th { background: #fafbfc; font-weight: 600; }
|
||||
.yes { color: #059669; }
|
||||
.no { color: #dc2626; }
|
||||
.partial { color: #d97706; }
|
||||
|
||||
.palette { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.palette-item { width: 56px; height: 56px; border-radius: 6px; display: flex; align-items: flex-end; padding: 4px; font-size: 9.5px; color: #fff; font-weight: 500; }
|
||||
|
||||
.note { background: #fef3c7; border-left: 3px solid #d97706; padding: 12px 16px; border-radius: 4px; font-size: 12.5px; color: #78350f; margin: 16px 0; }
|
||||
|
||||
.gradient-bar {
|
||||
height: 40px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
color: #fff;
|
||||
font-size: 11.5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>工具栏统一设计 v0.4 — WB 专家团队风格</h1>
|
||||
<p class="meta">圆形按钮 + 渐变色客服头像 + 高级感设计 · 2026-08-04 凌晨</p>
|
||||
|
||||
<div class="note">
|
||||
📌 本版核心改动(对比 v0.3 克制拟人):<br>
|
||||
• 4 按钮改为<strong>圆形</strong>(35×35 圆按钮, WB 企微/钉钉生态风格)<br>
|
||||
• 客服按钮采用<strong>渐变边框 + 渐变背景 + 白色客服图标</strong>设计(类似企微客服小助手)<br>
|
||||
• 配色更<strong>大胆</strong>:紫粉渐变(默认)/ 红橙(urgent)/ 绿(end)/ 橙黄(waiting)/ 蓝(reopen)<br>
|
||||
• 整体感觉<strong>更"专业 SaaS"</strong>,类似企微客服、钉钉智能客服、飞书服务台
|
||||
</div>
|
||||
|
||||
<h2>🎨 配色色板(渐变色为主)</h2>
|
||||
<div class="demo-block">
|
||||
<h3>客服 6 态渐变色</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<div class="gradient-bar" style="background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);">active 紫粉渐变 (默认 · 客服在线)</div>
|
||||
<div class="gradient-bar" style="background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%); opacity: 0.6;">disabled 灰度</div>
|
||||
<div class="gradient-bar" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);">urgent 红渐变 (紧急)</div>
|
||||
<div class="gradient-bar" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);">waiting 橙渐变 (排队)</div>
|
||||
<div class="gradient-bar" style="background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);">end 绿渐变 (已接入)</div>
|
||||
<div class="gradient-bar" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);">reopen 蓝渐变 (重新打开)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>🎭 4 按钮统一设计(WB 风格 — 圆形)</h2>
|
||||
<div class="demo-block">
|
||||
<div class="demo-label">工具栏并排展示(模拟 InputBar 工具栏)</div>
|
||||
<div class="four-btns">
|
||||
<!-- 表情 -->
|
||||
<button class="tool-btn" title="表情">
|
||||
<svg viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="9" r="6.5" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<circle cx="6.5" cy="8" r="0.8" fill="currentColor"/>
|
||||
<circle cx="11.5" cy="8" r="0.8" fill="currentColor"/>
|
||||
<path d="M6 11.5 Q9 13.5 12 11.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- 文件 -->
|
||||
<button class="tool-btn" title="文件">
|
||||
<svg viewBox="0 0 18 18" fill="none">
|
||||
<path d="M3 2 L11 2 L15 6 L15 16 L3 16 Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<path d="M11 2 L11 6 L15 6" fill="#f5f6f8" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<line x1="6" y1="10" x2="12" y2="10" stroke="currentColor" stroke-width="1.2"/>
|
||||
<line x1="6" y1="13" x2="10" y2="13" stroke="currentColor" stroke-width="1.2"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<!-- 语音 -->
|
||||
<button class="tool-btn" title="语音">
|
||||
<svg viewBox="0 0 18 18" fill="none">
|
||||
<rect x="6" y="2" width="6" height="9" rx="3" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M3 9 Q3 13 9 13 Q15 13 15 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="9" y1="13" x2="9" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- 客服(WB 风格) -->
|
||||
<button class="tool-btn wb-agent is-active" title="客服在线 · 点击呼叫">
|
||||
<span class="agent-content">
|
||||
<svg viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="8" r="3.5" fill="none" stroke="currentColor" stroke-width="1.4"/>
|
||||
<path d="M3.5 8 Q3.5 5 5 5 L5 11 Q3.5 11 3.5 8 Z" fill="currentColor" opacity="0.95"/>
|
||||
<path d="M14.5 8 Q14.5 5 13 5 L13 11 Q14.5 11 14.5 8 Z" fill="currentColor" opacity="0.95"/>
|
||||
<circle cx="7" cy="8" r="0.6" fill="currentColor"/>
|
||||
<circle cx="11" cy="8" r="0.6" fill="currentColor"/>
|
||||
<path d="M7.5 10.2 Q9 11.4 10.5 10.2" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<p style="font-size: 12px; color: #5f6368; margin-top: 8px;">
|
||||
视觉特点: 35×35 圆形按钮 + 客服按钮 1.5px 渐变边框(紫粉) + 渐变背景 + 白色客服图标
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>🎬 客服按钮 6 态切换</h2>
|
||||
<div class="demo-block">
|
||||
<div class="state-tabs">
|
||||
<button class="state-tab active" data-state="active">active</button>
|
||||
<button class="state-tab" data-state="disabled">disabled</button>
|
||||
<button class="state-tab" data-state="urgent">urgent</button>
|
||||
<button class="state-tab" data-state="waiting">waiting</button>
|
||||
<button class="state-tab" data-state="end">end</button>
|
||||
<button class="state-tab" data-state="reopen">reopen</button>
|
||||
</div>
|
||||
|
||||
<div class="state-stage" id="stage"></div>
|
||||
<div class="state-desc" id="desc"></div>
|
||||
</div>
|
||||
|
||||
<h2>📊 与之前版本对比</h2>
|
||||
<table class="cmp-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>维度</th>
|
||||
<th>v0.1 方块按钮</th>
|
||||
<th>v0.2 灵动岛卡通</th>
|
||||
<th>v0.3 克制拟人</th>
|
||||
<th>v0.4 WB 渐变 ⭐</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>按钮形态</td>
|
||||
<td>方块 8px 圆角</td>
|
||||
<td>方块 18px 圆角</td>
|
||||
<td>方块 8px 圆角</td>
|
||||
<td class="yes"><strong>圆形(35×35)</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4 按钮统一</td>
|
||||
<td class="no">×</td>
|
||||
<td class="no">×</td>
|
||||
<td class="yes">✓ 4 按钮</td>
|
||||
<td class="yes">✓ 4 按钮(圆形)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>角色设计</td>
|
||||
<td class="no">emoji</td>
|
||||
<td class="no">夸张卡通</td>
|
||||
<td class="partial">克制拟人</td>
|
||||
<td class="yes"><strong>渐变头像 + 客服图标(企微风)</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>配色</td>
|
||||
<td class="no">单调</td>
|
||||
<td class="no">卡通色</td>
|
||||
<td class="partial">中性灰</td>
|
||||
<td class="yes"><strong>渐变色(紫粉/红/橙/绿/蓝)</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>专业感</td>
|
||||
<td class="partial">★★★</td>
|
||||
<td class="no">★</td>
|
||||
<td class="yes">★★★★</td>
|
||||
<td class="yes"><strong>★★★★★(企微/钉钉/飞书级)</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>技术实现</td>
|
||||
<td class="yes">纯 CSS 简单</td>
|
||||
<td class="partial">CSS + SVG</td>
|
||||
<td class="partial">CSS + SVG</td>
|
||||
<td class="partial">CSS + SVG + 渐变(中等)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>❓ 待你拍板</h2>
|
||||
<ol style="margin-left: 20px; line-height: 1.8;">
|
||||
<li><strong>WB 风格(圆形 + 渐变)</strong>符合你期望吗?如果"WB 专家团队"指具体产品(如企微、钉钉、飞书的客服),可能需要我再调整</li>
|
||||
<li><strong>默认渐变色</strong>是紫粉(更年轻/活泼)还是其他(更专业/冷静)?如蓝色、蓝绿、暗色等</li>
|
||||
<li><strong>客服图标</strong>是戴耳机小人(当前)还是纯文字"客服"两字/品牌 logo 缩写?</li>
|
||||
<li><strong>圆形 vs 方块</strong>:WB 风格如果太"活泼",我可以做方形 + 渐变(更克制)</li>
|
||||
</ol>
|
||||
|
||||
<p style="margin-top: 32px; padding-top: 16px; border-top: 1px solid #e8eaed; color: #6b7280; font-size: 11.5px;">
|
||||
v0.4 WB 风格 · 2026-08-04 · Duckula 主理人 · 等待用户拍板
|
||||
</p>
|
||||
|
||||
<script>
|
||||
const states = {
|
||||
active: {
|
||||
cls: 'is-active',
|
||||
desc: '<strong>active</strong>: 紫粉渐变(蓝→紫→粉)+ 白色客服图标 — 默认"客服在线,等待呼叫"。类似企微客服小助手的"标准态"'
|
||||
},
|
||||
disabled: {
|
||||
cls: 'is-disabled',
|
||||
desc: '<strong>disabled</strong>: 灰度渐变 + opacity 0.4 — 表达"不可用",无动画'
|
||||
},
|
||||
urgent: {
|
||||
cls: 'is-urgent',
|
||||
desc: '<strong>urgent</strong>: 红色渐变(浅红→中红→深红)+ 1.6s 发光呼吸(box-shadow 扩散 6px) — 表达"紧急,需关注"'
|
||||
},
|
||||
waiting: {
|
||||
cls: 'is-waiting',
|
||||
desc: '<strong>waiting</strong>: 橙色渐变(浅黄→橙→深橙) — 表达"排队中"'
|
||||
},
|
||||
end: {
|
||||
cls: 'is-end',
|
||||
desc: '<strong>end</strong>: 绿色渐变(浅绿→中绿→深绿) — 表达"已接入坐席,通话中"'
|
||||
},
|
||||
reopen: {
|
||||
cls: 'is-reopen',
|
||||
desc: '<strong>reopen</strong>: 蓝色渐变(浅蓝→中蓝→深蓝) — 表达"会话已关闭,可重新打开"'
|
||||
}
|
||||
};
|
||||
|
||||
const svgHTML = `<svg viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="8" r="3.5" fill="none" stroke="currentColor" stroke-width="1.4"/>
|
||||
<path d="M3.5 8 Q3.5 5 5 5 L5 11 Q3.5 11 3.5 8 Z" fill="currentColor" opacity="0.95"/>
|
||||
<path d="M14.5 8 Q14.5 5 13 5 L13 11 Q14.5 11 14.5 8 Z" fill="currentColor" opacity="0.95"/>
|
||||
<circle cx="7" cy="8" r="0.6" fill="currentColor"/>
|
||||
<circle cx="11" cy="8" r="0.6" fill="currentColor"/>
|
||||
<path d="M7.5 10.2 Q9 11.4 10.5 10.2" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>`;
|
||||
|
||||
const stage = document.getElementById('stage');
|
||||
const descEl = document.getElementById('desc');
|
||||
const tabs = document.querySelectorAll('.state-tab');
|
||||
|
||||
function render(state) {
|
||||
const s = states[state];
|
||||
stage.innerHTML = `<button class="tool-btn wb-agent ${s.cls}" style="width: 56px; height: 56px;"><span class="agent-content">${svgHTML}</span></button>`;
|
||||
descEl.innerHTML = s.desc;
|
||||
}
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
render(tab.dataset.state);
|
||||
});
|
||||
});
|
||||
|
||||
render('active');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,531 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>工具栏统一设计 v1.0 - 消息框内上方 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;
|
||||
}
|
||||
.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: 280px;
|
||||
padding: 20px 16px;
|
||||
background: linear-gradient(180deg, #fafbfc 0%, #f5f7fa 100%);
|
||||
}
|
||||
|
||||
/* === 4 按钮工具栏(消息流上方居中) === */
|
||||
.glass-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 8px 16px;
|
||||
margin: 0 auto 16px;
|
||||
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; }
|
||||
|
||||
/* === 激活态渐变(各按钮专属色) === */
|
||||
.glass-btn.is-active-emoji { background: linear-gradient(135deg, rgba(251, 191, 36, 0.9) 0%, rgba(245, 158, 11, 0.9) 100%); border-color: rgba(255, 255, 255, 0.4); }
|
||||
.glass-btn.is-active-emoji::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 50%); pointer-events: none; }
|
||||
.glass-btn.is-active-file { background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%); border-color: rgba(255, 255, 255, 0.4); }
|
||||
.glass-btn.is-active-file::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 50%); pointer-events: none; }
|
||||
.glass-btn.is-active-voice { background: linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(124, 58, 237, 0.9) 100%); border-color: rgba(255, 255, 255, 0.4); }
|
||||
.glass-btn.is-active-voice::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 50%); pointer-events: none; }
|
||||
|
||||
/* 语音录音中(红色脉冲) */
|
||||
.glass-btn.is-recording {
|
||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
animation: recordingPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes recordingPulse {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0), 0 1px 0 rgba(255, 255, 255, 0.9) inset; }
|
||||
50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.15), 0 1px 0 rgba(255, 255, 255, 0.9) inset; }
|
||||
}
|
||||
|
||||
/* === 坐席按钮(图片头像) === */
|
||||
.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: hidden;
|
||||
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-btn.is-active { background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%) padding-box; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); }
|
||||
.agent-btn.is-disabled { opacity: 0.4; filter: grayscale(0.7); }
|
||||
.agent-btn.is-urgent { border: 2.5px solid #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0), 0 4px 12px rgba(239, 68, 68, 0.3); animation: recordingPulse 1.5s ease-in-out infinite; }
|
||||
.agent-btn.is-waiting { border: 2.5px solid #f59e0b; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
|
||||
.agent-btn.is-end { border: 2.5px solid #10b981; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
|
||||
.agent-btn.is-reopen { border: 2.5px solid #3b82f6; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); }
|
||||
|
||||
/* === 模拟消息 === */
|
||||
.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); }
|
||||
|
||||
/* === 演示容器 === */
|
||||
.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; }
|
||||
|
||||
.state-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(99, 102, 241, 0.12); }
|
||||
.state-tab {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12.5px;
|
||||
color: #4b5563;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.state-tab:hover { background: rgba(255, 255, 255, 0.8); }
|
||||
.state-tab.active { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border-color: transparent; }
|
||||
|
||||
.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); }
|
||||
.state-desc { color: #4b5563; font-size: 12.5px; line-height: 1.7; background: rgba(255, 255, 255, 0.5); padding: 12px 14px; border-radius: 10px; border-left: 2px solid #6366f1; margin-top: 12px; backdrop-filter: blur(10px); }
|
||||
.state-desc strong { color: #1a1a1a; }
|
||||
</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.0 — 消息框内上方 4 按钮</h1>
|
||||
<p class="meta">表情/文件/语音/坐席 · 消息流上方居中 · v0.5 玻璃拟态 · 高级感 SVG + 真实图片头像 · 2026-08-04 凌晨</p>
|
||||
|
||||
<div class="note">
|
||||
📌 本版核心改动(对比 v0.9):<br>
|
||||
• <strong>工具栏位置改了!</strong> — 不再在 InputBar 内部,而是<strong>消息流(消息框)内上方居中</strong>(在 ChatPanel 里,不在 ChatPanel 输入栏里)<br>
|
||||
• <strong>4 按钮加回坐席!</strong> — 表情/文件/语音/坐席(你提醒我别忘)<br>
|
||||
• 坐席按钮用你提供的 3D 拟人吉祥物图片(沿用 v0.8)<br>
|
||||
• 3 高级感 SVG 按钮(表情/文件/语音)沿用 v0.9 升级版
|
||||
</div>
|
||||
|
||||
<h2>🎨 ChatPanel 消息框(工具栏在消息流上方)</h2>
|
||||
<div class="chatpanel-mock">
|
||||
<div class="chatpanel-mock-header">
|
||||
<span class="dot"></span>
|
||||
<span>IT 智能服务台 · 在线 · 客服小王</span>
|
||||
</div>
|
||||
<div class="chatpanel-mock-messages">
|
||||
<!-- 4 按钮工具栏(消息流上方居中) -->
|
||||
<div class="glass-toolbar" id="toolbar-stage">
|
||||
<!-- 1. 表情(高级感) -->
|
||||
<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"/>
|
||||
<path d="M8 15 Q12 17 16 15" fill="rgba(244, 63, 94, 0.2)"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- 2. 文件(高级感) -->
|
||||
<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" stroke-linejoin="round"/>
|
||||
<path d="M14 2 L14 8 L20 8" fill="url(#g-doc-fold)" stroke="#818cf8" stroke-width="0.8" stroke-linejoin="round"/>
|
||||
<ellipse cx="10" cy="4" rx="5" ry="0.8" fill="url(#g-highlight)"/>
|
||||
<rect x="7" y="11.5" width="10" height="0.8" rx="0.4" fill="url(#g-doc-text)"/>
|
||||
<rect x="7" y="14" width="8" height="0.8" rx="0.4" fill="url(#g-doc-text)" opacity="0.7"/>
|
||||
<rect x="7" y="16.5" width="6" height="0.8" rx="0.4" fill="url(#g-doc-text)" opacity="0.5"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- 3. 语音输入(高级感) -->
|
||||
<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)"/>
|
||||
<rect x="9" y="3" width="2" height="11" rx="1" fill="url(#g-mic-shine)"/>
|
||||
<line x1="10.5" y1="6" x2="10.5" y2="11" stroke="white" stroke-width="0.3" opacity="0.4"/>
|
||||
<line x1="12" y1="5" x2="12" y2="12" stroke="white" stroke-width="0.3" opacity="0.4"/>
|
||||
<line x1="13.5" y1="6" x2="13.5" y2="11" stroke="white" stroke-width="0.3" opacity="0.4"/>
|
||||
<path d="M3 12 Q3 18 12 18 Q21 18 21 12" fill="none" stroke="url(#g-mic-body)" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="12" y1="18" x2="12" y2="22" stroke="url(#g-mic-body)" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="8" y1="22" x2="16" y2="22" stroke="url(#g-mic-body)" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- 4. 坐席(真实图片) -->
|
||||
<button class="agent-btn is-active" title="客服在线 · 点击呼叫">
|
||||
<img src="./agent-avatar-v0.8.jpg" alt="客服" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 模拟消息流 -->
|
||||
<div class="mock-msg user">
|
||||
<div class="meta">我 10:23</div>
|
||||
你好,我电脑经常蓝屏
|
||||
</div>
|
||||
<div class="mock-msg ai">
|
||||
<div class="meta">AI 10:23</div>
|
||||
您好!电脑蓝屏可能由驱动/内存/温度等问题引起。建议先尝试安全模式启动...
|
||||
</div>
|
||||
<div class="mock-msg user">
|
||||
<div class="meta">我 10:25</div>
|
||||
还有其他办法吗?紧急,需要尽快恢复
|
||||
</div>
|
||||
<div style="text-align: center; color: #9ca3af; font-size: 11.5px; margin-top: 12px;">
|
||||
↓ 在消息流下方继续输入 ↓
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>🎬 4 按钮不同状态演示</h2>
|
||||
<div class="demo-block">
|
||||
<div class="state-tabs">
|
||||
<button class="state-tab active" data-state="default">默认</button>
|
||||
<button class="state-tab" data-state="emoji">表情激活</button>
|
||||
<button class="state-tab" data-state="file">文件激活</button>
|
||||
<button class="state-tab" data-state="voice-active">语音激活</button>
|
||||
<button class="state-tab" data-state="voice-recording">语音录音中</button>
|
||||
<button class="state-tab" data-state="agent-active">坐席已呼叫</button>
|
||||
<button class="state-tab" data-state="agent-urgent">坐席紧急</button>
|
||||
</div>
|
||||
|
||||
<div class="chatpanel-mock">
|
||||
<div class="chatpanel-mock-messages" style="min-height: 100px;">
|
||||
<div class="glass-toolbar" id="state-stage"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-desc" id="state-desc"></div>
|
||||
</div>
|
||||
|
||||
<h2>📊 v1.0 vs 之前版本关键差异</h2>
|
||||
<table style="width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 12.5px;">
|
||||
<thead>
|
||||
<tr style="background: rgba(255, 255, 255, 0.6);">
|
||||
<th style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px; text-align: left;">维度</th>
|
||||
<th style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px; text-align: left;">v0.9</th>
|
||||
<th style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px; text-align: left;"><strong>v1.0 终极</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px;">按钮数</td>
|
||||
<td style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px;">3(去掉坐席)</td>
|
||||
<td style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px;"><strong>4(加回坐席)</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px;">位置</td>
|
||||
<td style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px;">InputBar 内部工具栏</td>
|
||||
<td style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px;"><strong>消息框内上方居中(不在 InputBar)</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px;">3 按钮设计</td>
|
||||
<td style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px;">高级感 SVG</td>
|
||||
<td style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px;"><strong>沿用(相同)</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px;">坐席按钮</td>
|
||||
<td style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px;">✗ 没有</td>
|
||||
<td style="border: 1px solid rgba(99, 102, 241, 0.15); padding: 8px;"><strong>✓ 图片头像(你提供)</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>❓ 待你拍板</h2>
|
||||
<ol style="margin-left: 20px; line-height: 1.8;">
|
||||
<li><strong>位置改了</strong>(消息框内上方,不是 InputBar 内)OK 吗?</li>
|
||||
<li><strong>4 按钮加回坐席</strong>OK 吗?(表情/文件/语音/坐席)</li>
|
||||
<li><strong>坐席按钮 44px</strong>(比其他 40px 略大,突出头像)OK 吗?</li>
|
||||
<li><strong>整体设计</strong>可以开始实施了吗?</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.0 消息框内上方 4 按钮 · 2026-08-04 · Duckula 主理人 · 等待用户拍板
|
||||
</p>
|
||||
|
||||
<script>
|
||||
const stateMap = {
|
||||
'default': {
|
||||
toolbar: '',
|
||||
desc: '<strong>默认状态</strong>: 4 按钮全部默认(浅玻璃) — 表情/文件/语音/坐席(图片头像紫粉渐变边框)都未激活'
|
||||
},
|
||||
'emoji': {
|
||||
toolbar: 'emojiActive',
|
||||
desc: '<strong>表情激活</strong>: 表情按钮变<strong>黄橙渐变</strong> — 表情面板已打开(emoji 网格弹出)'
|
||||
},
|
||||
'file': {
|
||||
toolbar: 'fileActive',
|
||||
desc: '<strong>文件激活</strong>: 文件按钮变<strong>蓝紫渐变</strong> — 文件选择器已打开(选择图片/文档)'
|
||||
},
|
||||
'voice-active': {
|
||||
toolbar: 'voiceActive',
|
||||
desc: '<strong>语音激活</strong>: 语音按钮变<strong>紫粉渐变</strong> — 准备录音(用户可点击开始)'
|
||||
},
|
||||
'voice-recording': {
|
||||
toolbar: 'voiceRecording',
|
||||
desc: '<strong>语音录音中</strong>: 语音按钮变<strong>红色 + 1.5s 发光呼吸</strong> — 正在录音(用户可点击停止)'
|
||||
},
|
||||
'agent-active': {
|
||||
toolbar: 'agentActive',
|
||||
desc: '<strong>坐席已呼叫</strong>: 坐席按钮<strong>紫粉渐变边框 + 阴影</strong> — 呼叫成功,等待坐席接入'
|
||||
},
|
||||
'agent-urgent': {
|
||||
toolbar: 'agentUrgent',
|
||||
desc: '<strong>坐席紧急</strong>: 坐席按钮<strong>红色边框 + 1.5s 发光呼吸</strong> — 紧急关键词命中,坐席直接接入'
|
||||
}
|
||||
};
|
||||
|
||||
const svgEmoji = `<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"/>
|
||||
<path d="M8 15 Q12 17 16 15" fill="rgba(244, 63, 94, 0.2)"/>
|
||||
</svg>`;
|
||||
const svgFile = `<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" stroke-linejoin="round"/>
|
||||
<path d="M14 2 L14 8 L20 8" fill="url(#g-doc-fold)" stroke="#818cf8" stroke-width="0.8" stroke-linejoin="round"/>
|
||||
<ellipse cx="10" cy="4" rx="5" ry="0.8" fill="url(#g-highlight)"/>
|
||||
<rect x="7" y="11.5" width="10" height="0.8" rx="0.4" fill="url(#g-doc-text)"/>
|
||||
<rect x="7" y="14" width="8" height="0.8" rx="0.4" fill="url(#g-doc-text)" opacity="0.7"/>
|
||||
<rect x="7" y="16.5" width="6" height="0.8" rx="0.4" fill="url(#g-doc-text)" opacity="0.5"/>
|
||||
</svg>`;
|
||||
const svgVoice = `<svg viewBox="0 0 24 24" fill="none">
|
||||
<rect x="8" y="2" width="8" height="13" rx="4" fill="url(#g-mic-body)"/>
|
||||
<rect x="9" y="3" width="2" height="11" rx="1" fill="url(#g-mic-shine)"/>
|
||||
<line x1="10.5" y1="6" x2="10.5" y2="11" stroke="white" stroke-width="0.3" opacity="0.4"/>
|
||||
<line x1="12" y1="5" x2="12" y2="12" stroke="white" stroke-width="0.3" opacity="0.4"/>
|
||||
<line x1="13.5" y1="6" x2="13.5" y2="11" stroke="white" stroke-width="0.3" opacity="0.4"/>
|
||||
<path d="M3 12 Q3 18 12 18 Q21 18 21 12" fill="none" stroke="url(#g-mic-body)" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="12" y1="18" x2="12" y2="22" stroke="url(#g-mic-body)" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="8" y1="22" x2="16" y2="22" stroke="url(#g-mic-body)" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>`;
|
||||
const imgAgent = `<img src="./agent-avatar-v0.8.jpg" alt="客服" />`;
|
||||
|
||||
function renderToolbar(stage, state) {
|
||||
const emojiClass = state === 'emojiActive' ? 'is-active-emoji' : '';
|
||||
const fileClass = state === 'fileActive' ? 'is-active-file' : '';
|
||||
const voiceClass = state === 'voiceActive' ? 'is-active-voice' : (state === 'voiceRecording' ? 'is-recording' : '');
|
||||
const agentClass = state === 'agentActive' ? 'is-active' : (state === 'agentUrgent' ? 'is-urgent' : 'is-active');
|
||||
stage.innerHTML = `
|
||||
<button class="glass-btn ${emojiClass}" title="表情">${svgEmoji}</button>
|
||||
<button class="glass-btn ${fileClass}" title="文件">${svgFile}</button>
|
||||
<button class="glass-btn ${voiceClass}" title="语音输入">${svgVoice}</button>
|
||||
<button class="agent-btn ${agentClass}" title="客服在线 · 点击呼叫">${imgAgent}</button>
|
||||
`;
|
||||
}
|
||||
|
||||
const toolbarStage = document.getElementById('toolbar-stage');
|
||||
const stateStage = document.getElementById('state-stage');
|
||||
const stateDesc = document.getElementById('state-desc');
|
||||
const stateTabs = document.querySelectorAll('.state-tab');
|
||||
|
||||
function renderAll(state) {
|
||||
const s = stateMap[state];
|
||||
if (toolbarStage) renderToolbar(toolbarStage, s.toolbar);
|
||||
if (stateStage) renderToolbar(stateStage, s.toolbar);
|
||||
if (stateDesc) stateDesc.innerHTML = s.desc;
|
||||
}
|
||||
|
||||
let currentState = 'default';
|
||||
stateTabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
stateTabs.forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
currentState = tab.dataset.state;
|
||||
renderAll(currentState);
|
||||
});
|
||||
});
|
||||
|
||||
renderAll('default');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,458 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>工具栏统一设计 v1.6 - 圆角长方形 · 中央隆起</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; }
|
||||
|
||||
/* === 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;
|
||||
}
|
||||
|
||||
/* === 普通工具栏（Before：v1.5 宝石嵌入式，带光晕） === */
|
||||
.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 2px 4px rgba(99,102,241,0.05), 0 8px 16px rgba(99,102,241,0.08);
|
||||
position: relative;
|
||||
}
|
||||
.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 2px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.04);
|
||||
}
|
||||
.glass-btn:hover { background: rgba(255,255,255,0.75); transform: translateY(-1px) scale(1.06); }
|
||||
.glass-btn:active { transform: translateY(0) scale(0.95); }
|
||||
.glass-btn svg { width: 22px; height: 22px; display: block; }
|
||||
.agent-btn {
|
||||
width: 44px; height: 44px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
position: relative; z-index: 2;
|
||||
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-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; }
|
||||
|
||||
/* === 圆角长方形 · 中央隆起工具栏（After / v1.6） === */
|
||||
/* 容器：高度留出中央隆起空间，按钮不溢出 */
|
||||
.gem-toolbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
height: 84px;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
/* 圆角长方形轨道背景（SVG）：两端矮、中央因大按钮隆起自然弧线 */
|
||||
.gem-toolbar-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
overflow: visible;
|
||||
}
|
||||
/* 按钮行（5 个，坐席居中且更大） */
|
||||
.gem-row { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; }
|
||||
/* 人工坐席按钮 = 更大，居中，不探出，无光晕 */
|
||||
.gem-toolbar .agent-btn.gem {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
margin: 0 6px;
|
||||
z-index: 3;
|
||||
box-shadow: none;
|
||||
}
|
||||
.gem-toolbar .glass-btn { z-index: 2; }
|
||||
|
||||
/* === 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);
|
||||
}
|
||||
.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; }
|
||||
|
||||
.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-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>
|
||||
<!-- 圆角长方形轨道渐变 -->
|
||||
<linearGradient id="g-rail" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#818cf8" stop-opacity="0.5"/>
|
||||
<stop offset="50%" stop-color="#c4b5fd" stop-opacity="0.9"/>
|
||||
<stop offset="100%" stop-color="#818cf8" stop-opacity="0.5"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<h1>工具栏统一设计 v1.6 — 圆角长方形 · 中央隆起</h1>
|
||||
<p class="meta">v1.5 修正版：工具栏保持圆角长方形（两端上下矮），中央因「人工坐席」按钮更高而将上下边框撑出自然弧线；坐席按钮不探出、无光晕、工具按钮不溢出 · 2026-08-05</p>
|
||||
|
||||
<div class="note-info">
|
||||
📐 <strong>v1.6 改动说明（修正 v1.5 的 4 点不符合预期）</strong>：<br>
|
||||
① <strong>工具栏形态</strong>：保持圆角长方形，两端上下高度变窄（约 48px），<u>不是</u>镜片/花瓣形<br>
|
||||
② <strong>坐席按钮居中隆起</strong>：人工坐席按钮（54px）大于其他图标（40px），其高度将工具栏上下边框从两端向中央平滑撑出弧线，按钮<u>不探出</u>轨道<br>
|
||||
③ <strong>去除光晕</strong>：去掉 v1.5 的白环 / 紫晕 / 切面高光 / 外发光，坐席按钮仅保留渐变描边<br>
|
||||
④ <strong>工具按钮不溢出</strong>：4 个工具按钮（40px）在两端矮轨道上各有约 4px 余量，完全收在轨道内
|
||||
</div>
|
||||
|
||||
<h2>🎯 v1.6 目标对比（Before / After）</h2>
|
||||
<div class="demo-block">
|
||||
<div class="compare-grid">
|
||||
<!-- BEFORE: v1.5 宝石嵌入式（带光晕、坐席探出） -->
|
||||
<div class="compare-panel before">
|
||||
<div class="compare-title">v1.5（上一版：宝石嵌入式，不符合预期）</div>
|
||||
<div style="text-align: center; padding: 12px; background: rgba(254, 243, 199, 0.4); border-radius: 10px;">
|
||||
<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="客服在线" style="box-shadow:0 0 0 3px rgba(255,255,255,0.6),0 0 0 5px rgba(168,85,247,0.35),0 6px 14px rgba(99,102,241,0.4); transform: translateY(-14px);">
|
||||
<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: #92400e; margin-top: 8px;">
|
||||
⚠️ <strong>问题</strong>: 镜片形 + 光晕 + 坐席探出，不符合预期
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AFTER: v1.6 圆角长方形中央隆起 -->
|
||||
<div class="compare-panel after">
|
||||
<div class="compare-title">v1.6（目标：圆角长方形 · 中央隆起）</div>
|
||||
<div style="text-align: center; padding: 12px; background: rgba(209, 250, 229, 0.4); border-radius: 10px;">
|
||||
<!-- 圆角长方形 · 中央隆起工具栏 -->
|
||||
<div class="gem-toolbar">
|
||||
<svg class="gem-toolbar-bg" viewBox="0 0 282 84" preserveAspectRatio="xMidYMid meet">
|
||||
<!-- 圆角长方形轨道：两端矮、中央因大按钮隆起自然弧线 -->
|
||||
<path d="M 28 18
|
||||
L 94 18
|
||||
C 102 18, 106 11, 114 11
|
||||
L 168 11
|
||||
C 176 11, 180 18, 188 18
|
||||
L 254 18
|
||||
C 262 18, 268 24, 268 32
|
||||
L 268 52
|
||||
C 268 60, 262 66, 254 66
|
||||
L 188 66
|
||||
C 180 66, 176 73, 168 73
|
||||
L 114 73
|
||||
C 106 73, 102 66, 94 66
|
||||
L 28 66
|
||||
C 14 66, 14 60, 14 52
|
||||
L 14 32
|
||||
C 14 24, 20 18, 28 18 Z"
|
||||
fill="url(#g-rail)" stroke="rgba(255,255,255,0.85)" stroke-width="1.2"/>
|
||||
</svg>
|
||||
<div class="gem-row">
|
||||
<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 gem" 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>
|
||||
<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>: 圆角长方形两端矮，中央因大坐席按钮自然隆起弧线；坐席不探出、无光晕；工具按钮不溢出
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>📊 v1.5 vs v1.6 改动对比</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>维度</th>
|
||||
<th>v1.5（宝石嵌入式）</th>
|
||||
<th><strong>v1.6（圆角长方形·中央隆起）</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>工具栏整体形态</strong></td>
|
||||
<td>镜片/花瓣形（两侧曲线外鼓）</td>
|
||||
<td><strong>圆角长方形</strong>（两端上下矮，整体仍是矩形轮廓）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>中央隆起成因</strong></td>
|
||||
<td>整体镜片造型</td>
|
||||
<td><strong>人工坐席按钮更高（54px > 40px），将上下边框撑出弧线</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>坐席按钮是否探出</strong></td>
|
||||
<td>是（translateY 上探）</td>
|
||||
<td><strong>否</strong>（完全收在轨道内，居中）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>光晕/高光</strong></td>
|
||||
<td>白环 + 紫晕 + 切面高光 + 外发光</td>
|
||||
<td><strong>全部去除</strong>（仅渐变描边）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>工具按钮溢出</strong></td>
|
||||
<td>两端略探出轨道</td>
|
||||
<td><strong>不溢出</strong>（两端各有约 4px 余量）</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 path 改为圆角长方形（两端矮、中央因坐席按钮隆起）；坐席按钮尺寸 54px、去除光晕样式、取消 translateY；工具按钮保持 40px 并确保在轨道内不溢出</td>
|
||||
<td>本文件工具栏局部重构</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>IntegrationZone.vue</code></td>
|
||||
<td><strong>不动</strong>（v1.3 已删除坐席按钮）</td>
|
||||
<td>无</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>inputBarCallAgentState.ts</code> / <code>integrationZoneLogic.ts</code></td>
|
||||
<td><strong>不动</strong>（helper 保留）</td>
|
||||
<td>无</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>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>：当前两端高 48px、中央隆起高 62px（坐席 54px + 上下各 4px）。若想两端更「扁」或中央更「鼓」，调 SVG path 的 y 值</li>
|
||||
<li><strong>坐席按钮尺寸</strong>：54px（其他 40px）。放大/缩小坐席即同步调整隆起幅度</li>
|
||||
<li><strong>弧线平滑度</strong>：由 path 控制点（C 102 18,106 11,114 11 等）决定，可调曲度</li>
|
||||
<li><strong>无光晕</strong>：已去除全部 halo/glow；如后续想要极淡阴影可单独加，默认保持干净</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.6 圆角长方形 · 中央隆起 · 2026-08-05 · Duckula 主理人 · 等待用户拍板进入开发
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user