Simon
458 lines
22 KiB
HTML
458 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>工具栏统一设计 v1.7 - 两端收口 · 中央隆起</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.6 两端图标探出 + 坐席 54px） === */
|
||
.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.7） === */
|
||
/* 容器：左右留 padding，使轨道能完整包住两端图标；高度留中央隆起空间 */
|
||
.gem-toolbar {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 16px;
|
||
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: 12px; }
|
||
/* 人工坐席按钮 = 增大 50%（60px），居中，不探出，无光晕 */
|
||
.gem-toolbar .agent-btn.gem {
|
||
width: 60px;
|
||
height: 60px;
|
||
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.7 — 两端收口 · 中央隆起</h1>
|
||
<p class="meta">v1.6 修正版：两端图标完全收在工具栏范围内；人工坐席图标增大 50%（60px，较 40px 工具图标大 50%），将上下边框平滑撑起中央隆起 · 2026-08-05</p>
|
||
|
||
<div class="note-info">
|
||
📐 <strong>v1.7 改动说明（修正 v1.6 的 2 点 + 过渡内收平滑）</strong>：<br>
|
||
① <strong>两端图标收口</strong>：工具栏轨道向左右延伸、完整包住 emoji/文件/语音/群聊，图标在水平与垂直方向均有余量，<u>不再从左右圆角端探出</u><br>
|
||
② <strong>坐席按钮增大 50%</strong>：人工坐席按钮由 54px → <strong>60px</strong>（较 40px 工具图标大 50%），其更大尺寸将上下边框从两端向中央平滑撑出弧线，按钮不探出、无光晕<br>
|
||
③ <strong>两端直线、中央连续拱</strong>：除人工坐席外的两侧图标（emoji/文件/语音/群聊）上下方工具栏保持<strong>直线</strong>；仅中央坐席处为连续拱起的弧线，拱顶在坐席正中（156,6）/ 拱底（156,78），无中央直线段；坐席四周为<strong>渐升圆顶</strong>（从直线段平缓起步、均匀升起、圆润收顶），平滑无陡升折感<br>
|
||
④ 仍保持：圆角长方形、无光晕、工具按钮不溢出
|
||
</div>
|
||
|
||
<h2>🎯 v1.7 目标对比（Before / After）</h2>
|
||
<div class="demo-block">
|
||
<div class="compare-grid">
|
||
<!-- BEFORE: v1.6 两端图标探出 + 坐席 54px -->
|
||
<div class="compare-panel before">
|
||
<div class="compare-title">v1.6（上一版：两端图标探出 + 坐席 54px）</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="width:54px;height:54px;">
|
||
<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>: 两端图标从圆角端探出；坐席 54px 隆起幅度偏小
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AFTER: v1.7 两端收口 + 坐席 60px -->
|
||
<div class="compare-panel after">
|
||
<div class="compare-title">v1.7（目标：两端收口 · 中央隆起）</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 312 84" preserveAspectRatio="xMidYMid meet">
|
||
<!-- 圆角长方形轨道：两端(两侧图标处)保持直线，仅中央坐席处连续拱起(拱顶在坐席正中)；坐席四周为渐升圆顶，平滑无陡升 -->
|
||
<path d="M 18 18
|
||
L 108 18
|
||
C 120 14, 144 8, 156 6
|
||
C 168 8, 192 14, 204 18
|
||
L 294 18
|
||
C 302 18, 312 26, 312 34
|
||
L 312 50
|
||
C 312 58, 302 66, 294 66
|
||
L 204 66
|
||
C 192 70, 168 76, 156 78
|
||
C 144 76, 120 70, 108 66
|
||
L 18 66
|
||
C 0 66, 0 58, 0 50
|
||
L 0 34
|
||
C 0 26, 10 18, 18 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>
|
||
<!-- 人工坐席按钮：增大 50%（60px），居中，不探出，无光晕 -->
|
||
<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>: 两端图标完全在轨道内；坐席 60px 将上下边框平滑撑起中央隆起，不探出、无光晕
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>📊 v1.6 vs v1.7 改动对比</h2>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>维度</th>
|
||
<th>v1.6（上一版）</th>
|
||
<th><strong>v1.7（目标）</strong></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>两端图标是否超出轨道</strong></td>
|
||
<td>是（从左右圆角端探出）</td>
|
||
<td><strong>否</strong>（轨道向左右延伸完整包住，水平+垂直均有余量）</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>人工坐席按钮尺寸</strong></td>
|
||
<td>54px</td>
|
||
<td><strong>60px（较 40px 工具图标大 50%）</strong></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>中央隆起幅度</strong></td>
|
||
<td>中央高 62 / 两端 48</td>
|
||
<td><strong>中央高 72 / 两端 48</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></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>：工具栏容器加左右 padding 使轨道包住两端图标；SVG path 左右延伸、中央因 60px 坐席按钮隆起；坐席按钮 60px、去除光晕、不探出；工具按钮保持 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>补充两端收口 + 坐席 60px 居中结构测试</td>
|
||
<td>测试同步更新</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h2>⚠️ 注意事项与待确认点</h2>
|
||
<ol style="margin-left: 20px; line-height: 1.8; font-size: 13px;">
|
||
<li><strong>50% 口径</strong>：本次坐席按「较 40px 工具图标大 50%」= 60px。若你指 v1.6 的 54px 再 +50%（即 81px），告知我即改</li>
|
||
<li><strong>两端收口</strong>：轨道现向左右各延伸 16px 包住图标；若想端帽更贴图标或更宽，调 .gem-toolbar 的 padding 与 path 的 x 端点</li>
|
||
<li><strong>隆起幅度</strong>：中央 72 / 两端 48，由 path 的 y 值（6/78 与 18/66）控制</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.7 两端收口 · 中央隆起 · 2026-08-05 · Duckula 主理人 · 等待用户拍板进入开发
|
||
</p>
|
||
|
||
</body>
|
||
</html>
|