562 lines
24 KiB
HTML
562 lines
24 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>人工坐席按钮设计方案 v0.1 — 4 套候选</title>
|
|||
|
|
<style>
|
|||
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|||
|
|
body {
|
|||
|
|
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
color: #1f2937;
|
|||
|
|
padding: 24px;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
h1 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
|
|||
|
|
h2 { font-size: 18px; font-weight: 600; margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 1px solid #e5e7eb; }
|
|||
|
|
h3 { font-size: 15px; font-weight: 600; margin: 20px 0 10px; }
|
|||
|
|
.meta { color: #6b7280; font-size: 13px; margin-bottom: 24px; }
|
|||
|
|
|
|||
|
|
/* 方案卡片 */
|
|||
|
|
.scheme { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; margin-bottom: 20px; }
|
|||
|
|
.scheme.recommend { border: 2px solid #1989fa; box-shadow: 0 0 0 4px rgba(25, 137, 250, 0.08); }
|
|||
|
|
.scheme-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
|
|||
|
|
.scheme-title h3 { margin: 0; }
|
|||
|
|
.badge { display: inline-block; padding: 2px 8px; font-size: 11px; border-radius: 4px; font-weight: 500; }
|
|||
|
|
.badge-rec { background: #1989fa; color: #fff; }
|
|||
|
|
.badge-info { background: #ecf5ff; color: #1989fa; }
|
|||
|
|
.scheme-desc { color: #4b5563; font-size: 13px; margin-bottom: 14px; }
|
|||
|
|
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
|
|||
|
|
.pros, .cons { padding: 10px 12px; border-radius: 6px; font-size: 12.5px; }
|
|||
|
|
.pros { background: #f0fdf4; border-left: 3px solid #16a34a; }
|
|||
|
|
.cons { background: #fef2f2; border-left: 3px solid #dc2626; }
|
|||
|
|
.pros h4, .cons h4 { font-size: 12px; margin-bottom: 6px; color: #166534; }
|
|||
|
|
.cons h4 { color: #991b1b; }
|
|||
|
|
.pros ul, .cons ul { list-style: none; padding: 0; }
|
|||
|
|
.pros li::before { content: "✓ "; color: #16a34a; }
|
|||
|
|
.cons li::before { content: "✗ "; color: #dc2626; }
|
|||
|
|
.pros li, .cons li { padding: 2px 0; }
|
|||
|
|
|
|||
|
|
/* 按钮展示区 */
|
|||
|
|
.demo-area {
|
|||
|
|
background: #fafafa;
|
|||
|
|
border: 1px dashed #d1d5db;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 16px;
|
|||
|
|
margin: 12px 0;
|
|||
|
|
}
|
|||
|
|
.demo-label { font-size: 12px; color: #6b7280; margin-bottom: 10px; }
|
|||
|
|
.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 0; }
|
|||
|
|
.demo-name { width: 80px; font-size: 12px; color: #6b7280; }
|
|||
|
|
.demo-buttons { display: flex; align-items: center; gap: 8px; }
|
|||
|
|
|
|||
|
|
/* 现有工具按钮(基准) */
|
|||
|
|
.input-bar__tool-btn {
|
|||
|
|
width: 36px; height: 36px; border-radius: 8px;
|
|||
|
|
border: 1px solid #e5e7eb; background: #ffffff;
|
|||
|
|
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
|||
|
|
font-size: 18px; transition: all 0.2s;
|
|||
|
|
-webkit-tap-highlight-color: transparent;
|
|||
|
|
}
|
|||
|
|
.input-bar__tool-btn:hover { background: #f3f4f6; border-color: #1989fa; }
|
|||
|
|
|
|||
|
|
/* 方案 A:轻量图标态 */
|
|||
|
|
.scheme-a .btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.2s; -webkit-tap-highlight-color: transparent; }
|
|||
|
|
.scheme-a .btn:hover { background: #f3f4f6; }
|
|||
|
|
.scheme-a .btn--disabled { color: #9ca3af; cursor: not-allowed; }
|
|||
|
|
.scheme-a .btn--active { color: #1989fa; }
|
|||
|
|
.scheme-a .btn--urgent { color: #ee0a24; animation: pulseA 1.5s ease-in-out infinite; }
|
|||
|
|
.scheme-a .btn--waiting { color: #f59e0b; }
|
|||
|
|
.scheme-a .btn--end { color: #ee0a24; }
|
|||
|
|
.scheme-a .btn--reopen { color: #1989fa; }
|
|||
|
|
@keyframes pulseA { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
|
|||
|
|
|
|||
|
|
/* 方案 B:边框+底色态(8px 圆角) */
|
|||
|
|
.scheme-b .btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e5e7eb; background: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.2s; -webkit-tap-highlight-color: transparent; }
|
|||
|
|
.scheme-b .btn--disabled { color: #9ca3af; border-color: #e5e7eb; background: #f9fafb; cursor: not-allowed; opacity: 0.7; }
|
|||
|
|
.scheme-b .btn--active { color: #1989fa; border-color: #1989fa; background: rgba(25, 137, 250, 0.08); }
|
|||
|
|
.scheme-b .btn--active:hover { background: rgba(25, 137, 250, 0.15); }
|
|||
|
|
.scheme-b .btn--urgent { color: #ee0a24; border-color: #ee0a24; background: rgba(238, 10, 36, 0.08); animation: pulseB 1.5s ease-in-out infinite; }
|
|||
|
|
.scheme-b .btn--waiting { color: #f59e0b; border-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
|
|||
|
|
.scheme-b .btn--end { color: #ee0a24; border-color: #ee0a24; background: #ee0a24; }
|
|||
|
|
.scheme-b .btn--end:hover { background: #dc2626; }
|
|||
|
|
.scheme-b .btn--end .ico { color: #fff; }
|
|||
|
|
.scheme-b .btn--reopen { color: #1989fa; border-color: #1989fa; background: #ecf5ff; }
|
|||
|
|
@keyframes pulseB { 0%, 100% { box-shadow: 0 0 0 0 rgba(238, 10, 36, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(238, 10, 36, 0); } }
|
|||
|
|
|
|||
|
|
/* 方案 C:仅 disabled/active 两态 */
|
|||
|
|
.scheme-c .btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e5e7eb; background: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.2s; -webkit-tap-highlight-color: transparent; }
|
|||
|
|
.scheme-c .btn--disabled { color: #9ca3af; cursor: not-allowed; opacity: 0.6; }
|
|||
|
|
.scheme-c .btn--active { color: #1989fa; border-color: #1989fa; background: rgba(25, 137, 250, 0.08); }
|
|||
|
|
.scheme-c .btn--active:hover { background: rgba(25, 137, 250, 0.15); }
|
|||
|
|
.scheme-c .btn--urgent, .scheme-c .btn--waiting, .scheme-c .btn--end, .scheme-c .btn--reopen {
|
|||
|
|
color: #1989fa; border-color: #1989fa; background: rgba(25, 137, 250, 0.08);
|
|||
|
|
}
|
|||
|
|
.scheme-c .btn--urgent::after { content: "•"; color: #ee0a24; position: absolute; margin-left: 16px; margin-top: -12px; font-size: 24px; }
|
|||
|
|
|
|||
|
|
/* 方案 D:边框+底色+右上角小圆点 */
|
|||
|
|
.scheme-d .btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e5e7eb; background: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.2s; position: relative; -webkit-tap-highlight-color: transparent; }
|
|||
|
|
.scheme-d .btn::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #e5e7eb; }
|
|||
|
|
.scheme-d .btn--disabled { color: #9ca3af; cursor: not-allowed; opacity: 0.6; }
|
|||
|
|
.scheme-d .btn--disabled::after { background: #d1d5db; }
|
|||
|
|
.scheme-d .btn--active::after { background: #1989fa; }
|
|||
|
|
.scheme-d .btn--urgent { color: #ee0a24; border-color: #ee0a24; }
|
|||
|
|
.scheme-d .btn--urgent::after { background: #ee0a24; animation: pulseD 1.5s ease-in-out infinite; }
|
|||
|
|
.scheme-d .btn--waiting { color: #f59e0b; border-color: #f59e0b; }
|
|||
|
|
.scheme-d .btn--waiting::after { background: #f59e0b; }
|
|||
|
|
.scheme-d .btn--end { color: #ee0a24; border-color: #ee0a24; background: rgba(238, 10, 36, 0.05); }
|
|||
|
|
.scheme-d .btn--end::after { background: #ee0a24; }
|
|||
|
|
.scheme-d .btn--reopen { color: #1989fa; border-color: #1989fa; background: #ecf5ff; }
|
|||
|
|
.scheme-d .btn--reopen::after { background: #1989fa; }
|
|||
|
|
@keyframes pulseD { 0%, 100% { box-shadow: 0 0 0 0 rgba(238, 10, 36, 0.6); } 50% { box-shadow: 0 0 0 4px rgba(238, 10, 36, 0); } }
|
|||
|
|
|
|||
|
|
/* 对比表 */
|
|||
|
|
.cmp-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
|
|||
|
|
.cmp-table th, .cmp-table td { border: 1px solid #e5e7eb; padding: 8px 10px; text-align: left; }
|
|||
|
|
.cmp-table th { background: #f9fafb; font-weight: 500; }
|
|||
|
|
.cmp-table .yes { color: #16a34a; }
|
|||
|
|
.cmp-table .no { color: #dc2626; }
|
|||
|
|
.cmp-table .partial { color: #f59e0b; }
|
|||
|
|
|
|||
|
|
/* 标题区分 */
|
|||
|
|
.emoji-set { display: inline-block; min-width: 28px; text-align: center; font-size: 18px; }
|
|||
|
|
.section-divider { border: 0; border-top: 1px dashed #d1d5db; margin: 24px 0; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<h1>🎧 人工坐席按钮设计方案 v0.1</h1>
|
|||
|
|
<p class="meta">4 套候选方案 · 6 态对比 · 与现有 😊📎🎤 工具按钮视觉统一 | 设计时间: 2026-08-04</p>
|
|||
|
|
|
|||
|
|
<h2>📐 现有工具按钮基准(😊📎🎤)</h2>
|
|||
|
|
<div class="demo-area">
|
|||
|
|
<div class="demo-label">规格: 36×36 / 8px 圆角 / 1px 边框 / 18px 图标</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">正常</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="input-bar__tool-btn" title="表情">😊</button>
|
|||
|
|
<button class="input-bar__tool-btn" title="文件">📎</button>
|
|||
|
|
<button class="input-bar__tool-btn" title="语音">🎤</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">hover</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="input-bar__tool-btn" style="background: #f3f4f6; border-color: #1989fa;">😊</button>
|
|||
|
|
<button class="input-bar__tool-btn" style="background: #f3f4f6; border-color: #1989fa;">📎</button>
|
|||
|
|
<button class="input-bar__tool-btn" style="background: #f3f4f6; border-color: #1989fa;">🎤</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<hr class="section-divider">
|
|||
|
|
|
|||
|
|
<!-- ============== 方案 A ============== -->
|
|||
|
|
<div class="scheme scheme-a recommend">
|
|||
|
|
<div class="scheme-title">
|
|||
|
|
<h3>方案 A: 轻量图标态(⭐推荐)</h3>
|
|||
|
|
<span class="badge badge-rec">推荐</span>
|
|||
|
|
<span class="badge badge-info">最轻量</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="scheme-desc">36×36 与现有工具按钮完全一致的尺寸,默认无背景无边框(透明),仅 emoji 图标 + 颜色变化区分 6 态。最符合"工具栏统一"的设计意图。</p>
|
|||
|
|
|
|||
|
|
<div class="demo-area">
|
|||
|
|
<div class="demo-label">6 态对比(实际 HTML/CSS 渲染效果)</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">disabled</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--disabled" title="无会话">🔒</button>
|
|||
|
|
<span class="emoji-set">🔒</span>
|
|||
|
|
<span style="color: #9ca3af; font-size: 12px;">无会话 / 不可点击</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">active</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--active" title="可呼叫">🎧</button>
|
|||
|
|
<span class="emoji-set">🎧</span>
|
|||
|
|
<span style="color: #1989fa; font-size: 12px;">可呼叫人工坐席(默认蓝)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">urgent</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--urgent" title="紧急">🚨</button>
|
|||
|
|
<span class="emoji-set">🚨</span>
|
|||
|
|
<span style="color: #ee0a24; font-size: 12px;">紧急关键词命中(脉冲动画)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">waiting</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--waiting" title="排队中">⏳</button>
|
|||
|
|
<span class="emoji-set">⏳</span>
|
|||
|
|
<span style="color: #f59e0b; font-size: 12px;">排队等待中(橙色)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">end</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--end" title="已接入">📴</button>
|
|||
|
|
<span class="emoji-set">📴</button>
|
|||
|
|
<span style="color: #ee0a24; font-size: 12px;">已接入坐席(红色)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">reopen</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--reopen" title="重新打开">🔄</button>
|
|||
|
|
<span class="emoji-set">🔄</span>
|
|||
|
|
<span style="color: #1989fa; font-size: 12px;">会话已关闭,可重新打开</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pros-cons">
|
|||
|
|
<div class="pros">
|
|||
|
|
<h4>✓ 优点</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li>视觉与现有工具按钮完全统一</li>
|
|||
|
|
<li>工具栏最干净,无视觉噪音</li>
|
|||
|
|
<li>hover 状态与现有 😊📎 完全一致</li>
|
|||
|
|
<li>代码量最少(CSS 简单)</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="cons">
|
|||
|
|
<h4>✗ 缺点</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li>6 态仅靠图标 + 颜色区分,变化幅度小</li>
|
|||
|
|
<li>重要状态(urgent 红 + 脉冲)可能不够醒目</li>
|
|||
|
|
<li>disabled 状态可能与其他工具按钮混淆(都是灰色图标)</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ============== 方案 B ============== -->
|
|||
|
|
<div class="scheme scheme-b">
|
|||
|
|
<div class="scheme-title">
|
|||
|
|
<h3>方案 B: 边框+底色态(沿用 v1.3 风格,8px 圆角)</h3>
|
|||
|
|
<span class="badge badge-info">视觉强</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="scheme-desc">36×36 与现有按钮尺寸一致,8px 圆角与现有工具按钮对齐,1px 边框 + 底色变化区分 6 态。继承 v1.3 整合区 .call-agent-btn 视觉风格,只是缩小到与现有按钮一致。</p>
|
|||
|
|
|
|||
|
|
<div class="demo-area">
|
|||
|
|
<div class="demo-label">6 态对比</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">disabled</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--disabled" title="无会话">🔒</button>
|
|||
|
|
<span style="color: #9ca3af; font-size: 12px;">灰色边框 + 浅灰背景</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">active</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--active" title="可呼叫">🎧</button>
|
|||
|
|
<span style="color: #1989fa; font-size: 12px;">蓝色边框 + 浅蓝背景</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">urgent</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--urgent" title="紧急">🚨</button>
|
|||
|
|
<span style="color: #ee0a24; font-size: 12px;">红色边框 + 浅红背景 + 脉冲</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">waiting</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--waiting" title="排队中">⏳</button>
|
|||
|
|
<span style="color: #f59e0b; font-size: 12px;">橙色边框 + 浅橙背景</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">end</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--end" title="已接入"><span class="ico">📴</span></button>
|
|||
|
|
<span style="color: #ee0a24; font-size: 12px;">红色填充 + 白字</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">reopen</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--reopen" title="重新打开">🔄</button>
|
|||
|
|
<span style="color: #1989fa; font-size: 12px;">蓝色边框 + 浅蓝背景</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pros-cons">
|
|||
|
|
<div class="pros">
|
|||
|
|
<h4>✓ 优点</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li>6 态视觉变化最明显(边框 + 底色 + 文字色)</li>
|
|||
|
|
<li>继承 v1.3 整合区 .call-agent-btn 风格,代码复用高</li>
|
|||
|
|
<li>disabled 状态明显区别于正常态</li>
|
|||
|
|
<li>end 态红色填充强警示</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="cons">
|
|||
|
|
<h4>✗ 缺点</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li>比其他工具按钮视觉更"重"(有底色)</li>
|
|||
|
|
<li>工具栏看起来像"3 个轻 + 1 个重",略不协调</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ============== 方案 C ============== -->
|
|||
|
|
<div class="scheme scheme-c">
|
|||
|
|
<div class="scheme-title">
|
|||
|
|
<h3>方案 C: 仅 disabled/active 两态(其他用 title 提示)</h3>
|
|||
|
|
<span class="badge badge-info">最简洁</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="scheme-desc">36×36 与现有工具按钮完全一致,只有 disabled 和 active 在工具栏有视觉变化。其他 4 态(urgent/waiting/end/reopen)保持 active 蓝边框,靠 title 属性 + 整合区 toast 提示。</p>
|
|||
|
|
|
|||
|
|
<div class="demo-area">
|
|||
|
|
<div class="demo-label">6 态对比(除 disabled 外,其他都用 active 蓝边框)</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">disabled</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--disabled" title="无会话,暂不可用">🔒</button>
|
|||
|
|
<span style="color: #9ca3af; font-size: 12px;">灰色 + 不可点击</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">active</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--active" title="点击呼叫人工坐席">🎧</button>
|
|||
|
|
<span style="color: #1989fa; font-size: 12px;">蓝边框(可点击)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">urgent</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--urgent" title="检测到紧急问题,点击直接呼叫">🚨</button>
|
|||
|
|
<span style="color: #1989fa; font-size: 12px;">同 active 视觉,靠 title 提示</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">waiting</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--waiting" title="排队中,点击取消">⏳</button>
|
|||
|
|
<span style="color: #1989fa; font-size: 12px;">同 active 视觉,靠 title 提示</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">end</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--end" title="已接入,点击结束咨询">📴</button>
|
|||
|
|
<span style="color: #1989fa; font-size: 12px;">同 active 视觉,靠 title 提示</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">reopen</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--reopen" title="会话已关闭,点击重新打开">🔄</button>
|
|||
|
|
<span style="color: #1989fa; font-size: 12px;">同 active 视觉,靠 title 提示</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pros-cons">
|
|||
|
|
<div class="pros">
|
|||
|
|
<h4>✓ 优点</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li>工具栏最简洁(只有蓝/灰两态视觉)</li>
|
|||
|
|
<li>完全不会"视觉抢戏"其他工具按钮</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="cons">
|
|||
|
|
<h4>✗ 缺点</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li>用户错过重要状态(urgent 红 + 脉冲 失效)</li>
|
|||
|
|
<li>必须依赖整合区 toast 提示,体验割裂</li>
|
|||
|
|
<li>disabled 状态和其他工具按钮可点击状态难以区分</li>
|
|||
|
|
<li>功能降级感明显,用户可能不知道当前是哪种状态</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ============== 方案 D ============== -->
|
|||
|
|
<div class="scheme scheme-d">
|
|||
|
|
<div class="scheme-title">
|
|||
|
|
<h3>方案 D: 边框+底色+右上角小圆点(角标方案)</h3>
|
|||
|
|
<span class="badge badge-info">状态最强</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="scheme-desc">36×36 与现有工具按钮完全一致,8px 圆角,默认无边框(与其他工具风格统一),靠右上角小圆点(8×8 圆)区分 6 态。状态最显眼的方案,但视觉复杂。</p>
|
|||
|
|
|
|||
|
|
<div class="demo-area">
|
|||
|
|
<div class="demo-label">6 态对比(右上角小圆点不同色)</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">disabled</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--disabled" title="无会话,暂不可用">🔒</button>
|
|||
|
|
<span style="color: #6b7280; font-size: 12px;">灰色 + 灰色角标</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">active</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--active" title="点击呼叫人工坐席">🎧</button>
|
|||
|
|
<span style="color: #1989fa; font-size: 12px;">蓝色角标</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">urgent</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--urgent" title="紧急,点击直接呼叫">🚨</button>
|
|||
|
|
<span style="color: #ee0a24; font-size: 12px;">红色边框 + 红色角标(脉冲)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">waiting</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--waiting" title="排队中,点击取消">⏳</button>
|
|||
|
|
<span style="color: #f59e0b; font-size: 12px;">橙色边框 + 橙色角标</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">end</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--end" title="已接入,点击结束">📴</button>
|
|||
|
|
<span style="color: #ee0a24; font-size: 12px;">红色边框 + 红色角标</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-row">
|
|||
|
|
<span class="demo-name">reopen</span>
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="btn btn--reopen" title="重新打开">🔄</button>
|
|||
|
|
<span style="color: #1989fa; font-size: 12px;">蓝色边框 + 蓝色角标</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pros-cons">
|
|||
|
|
<div class="pros">
|
|||
|
|
<h4>✓ 优点</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li>状态最强视觉(角标 + 边框 + 颜色三重提示)</li>
|
|||
|
|
<li>图标不变(只用角标),不切换图标含义</li>
|
|||
|
|
<li>扩展性好(可加更多状态)</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="cons">
|
|||
|
|
<h4>✗ 缺点</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li>CSS 最复杂(角标需要 ::after 伪元素)</li>
|
|||
|
|
<li>小圆点在 36×36 空间内视觉占比偏大</li>
|
|||
|
|
<li>多个状态同时存在时可能视觉混乱</li>
|
|||
|
|
<li>其他工具按钮没有角标,只这一个有"特殊"</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<hr class="section-divider">
|
|||
|
|
|
|||
|
|
<h2>📊 4 套方案对比表</h2>
|
|||
|
|
<table class="cmp-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>维度</th>
|
|||
|
|
<th>方案 A(轻量)</th>
|
|||
|
|
<th>方案 B(边框底色)</th>
|
|||
|
|
<th>方案 C(仅两态)</th>
|
|||
|
|
<th>方案 D(角标)</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>尺寸 / 圆角</td>
|
|||
|
|
<td>36×36 / 8px ✓</td>
|
|||
|
|
<td>36×36 / 8px ✓</td>
|
|||
|
|
<td>36×36 / 8px ✓</td>
|
|||
|
|
<td>36×36 / 8px ✓</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>与现有工具按钮视觉一致</td>
|
|||
|
|
<td class="yes">★★★★★</td>
|
|||
|
|
<td class="partial">★★★</td>
|
|||
|
|
<td class="yes">★★★★★</td>
|
|||
|
|
<td class="partial">★★★</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>6 态视觉变化强度</td>
|
|||
|
|
<td class="partial">★★</td>
|
|||
|
|
<td class="yes">★★★★★</td>
|
|||
|
|
<td class="no">★</td>
|
|||
|
|
<td class="yes">★★★★★</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>disabled 区分度</td>
|
|||
|
|
<td class="partial">★★</td>
|
|||
|
|
<td class="yes">★★★★</td>
|
|||
|
|
<td class="yes">★★★★</td>
|
|||
|
|
<td class="yes">★★★★</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>紧急态(urgent)醒目度</td>
|
|||
|
|
<td class="partial">★★★(脉冲动画)</td>
|
|||
|
|
<td class="yes">★★★★★(红+脉冲)</td>
|
|||
|
|
<td class="no">★(无变化)</td>
|
|||
|
|
<td class="yes">★★★★★(角标脉冲)</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>CSS 复杂度</td>
|
|||
|
|
<td class="yes">低</td>
|
|||
|
|
<td class="partial">中</td>
|
|||
|
|
<td class="yes">低</td>
|
|||
|
|
<td class="no">高(::after)</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>代码改动量</td>
|
|||
|
|
<td class="yes">最小</td>
|
|||
|
|
<td class="partial">中</td>
|
|||
|
|
<td class="yes">最小</td>
|
|||
|
|
<td class="partial">中</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>工具栏整体协调性</td>
|
|||
|
|
<td class="yes">★★★★★</td>
|
|||
|
|
<td class="partial">★★★</td>
|
|||
|
|
<td class="yes">★★★★★</td>
|
|||
|
|
<td class="partial">★★</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<h2>💡 我的推荐</h2>
|
|||
|
|
<p><strong>方案 A(轻量图标态)⭐推荐</strong></p>
|
|||
|
|
<ul style="margin-left: 20px; line-height: 1.8;">
|
|||
|
|
<li>完全符合你的需求("与现有表情、文件大小基本一致")</li>
|
|||
|
|
<li>工具栏最干净,4 个按钮视觉完全统一</li>
|
|||
|
|
<li>6 态用 emoji + 颜色 + 脉冲动画组合,够用且不抢戏</li>
|
|||
|
|
<li>CSS 最简单,后续维护成本低</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<p><strong>备选:方案 B(边框底色态)</strong></p>
|
|||
|
|
<ul style="margin-left: 20px; line-height: 1.8;">
|
|||
|
|
<li>如果你觉得 A 的 6 态视觉变化不够强,选 B</li>
|
|||
|
|
<li>继承 v1.3 整合区 .call-agent-btn 风格,代码复用高</li>
|
|||
|
|
<li>但工具栏看起来像"3 个轻 + 1 个重"</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h2>❓ 待你拍板</h2>
|
|||
|
|
<ol style="margin-left: 20px; line-height: 1.8;">
|
|||
|
|
<li>选 A / B / C / D 哪套?(或需要微调?)</li>
|
|||
|
|
<li>6 态 emoji 选用是否同意?(🔒/🎧/🚨/⏳/📴/🔄)</li>
|
|||
|
|
<li>动画(urgent 脉冲 + waiting 黄色 + end 红色填充)是否都保留?</li>
|
|||
|
|
<li>如选 B 或 D:边框颜色是否与现有工具按钮 hover 色(--accent)一致?</li>
|
|||
|
|
</ol>
|
|||
|
|
|
|||
|
|
<p style="margin-top: 32px; padding-top: 16px; border-top: 1px solid #e5e7eb; color: #6b7280; font-size: 12px;">
|
|||
|
|
原型 v0.1 · 2026-08-04 · Duckula 主理人 · 等待用户拍板后实施
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|