542 lines
25 KiB
HTML
542 lines
25 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>工具栏统一设计 v1.9.2 — 员工端主绿水晶玻璃优化版</title>
|
|||
|
|
<style>
|
|||
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|||
|
|
body {
|
|||
|
|
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
|||
|
|
/* 三区背后的连续浅色表面（v1.9.2：主绿淡色径向渐变，作为水晶容器模糊透出的基底）
|
|||
|
|
色板：PRD-REQ-通用-001 主色 #E8F5E9 浅绿 + #07C160 主绿 + #10B981 成功绿 */
|
|||
|
|
background:
|
|||
|
|
radial-gradient(circle at 20% 0%, rgba(232, 245, 233, 0.60) 0%, transparent 55%),
|
|||
|
|
radial-gradient(circle at 80% 100%, rgba(125, 217, 160, 0.40) 0%, transparent 55%),
|
|||
|
|
linear-gradient(135deg, #f6fbf8 0%, #f4faf6 50%, #eaf7ef 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; }
|
|||
|
|
.meta { color: #6b7280; font-size: 12.5px; margin-bottom: 20px; }
|
|||
|
|
|
|||
|
|
/* === 员工端会话窗口 — 三区融为连续浅色表面，无内部区隔线 === */
|
|||
|
|
.chatpanel-mock {
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 720px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
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.6);
|
|||
|
|
border-radius: 18px;
|
|||
|
|
box-shadow:
|
|||
|
|
0 1px 0 rgba(255,255,255,0.9) inset,
|
|||
|
|
0 8px 32px rgba(7, 193, 96, 0.12);
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.chatpanel-mock-header {
|
|||
|
|
padding: 12px 16px;
|
|||
|
|
border-bottom: 1px solid rgba(7, 193, 96, 0.12); /* 仅窗口标题栏 chrome 分隔 */
|
|||
|
|
background: rgba(255, 255, 255, 0.4);
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #374151;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.chatpanel-mock-header .dot { width: 8px; height: 8px; border-radius: 50%; background: #07C160; }
|
|||
|
|
.chatpanel-mock-header .title { font-weight: 600; }
|
|||
|
|
.chatpanel-mock-header .sub { color: #9ca3af; font-size: 11.5px; }
|
|||
|
|
|
|||
|
|
/* === 消息流区域 — 透明背景，融入连续表面 === */
|
|||
|
|
.chatpanel-mock-messages {
|
|||
|
|
min-height: 240px;
|
|||
|
|
padding: 20px 16px;
|
|||
|
|
background: transparent;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
.mock-msg {
|
|||
|
|
max-width: 74%;
|
|||
|
|
padding: 9px 13px;
|
|||
|
|
border-radius: 14px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
line-height: 1.55;
|
|||
|
|
}
|
|||
|
|
.mock-msg .who { font-size: 10.5px; opacity: 0.65; margin-bottom: 3px; }
|
|||
|
|
.mock-msg.user {
|
|||
|
|
align-self: flex-end;
|
|||
|
|
background: linear-gradient(135deg, #07C160, #10B981);
|
|||
|
|
color: #fff;
|
|||
|
|
border-bottom-right-radius: 4px;
|
|||
|
|
}
|
|||
|
|
.mock-msg.ai {
|
|||
|
|
align-self: flex-start;
|
|||
|
|
background: rgba(7, 193, 96, 0.06);
|
|||
|
|
color: #1a1a1a;
|
|||
|
|
border: 1px solid rgba(7, 193, 96, 0.14);
|
|||
|
|
border-bottom-left-radius: 4px;
|
|||
|
|
}
|
|||
|
|
.mock-msg.ai .quick {
|
|||
|
|
margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.mock-msg.ai .quick span {
|
|||
|
|
font-size: 11.5px; padding: 4px 10px; border-radius: 12px;
|
|||
|
|
background: rgba(7, 193, 96, 0.08); color: #056739; border: 1px solid rgba(7, 193, 96, 0.18);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* === v1.9.2 gem 工具栏 — 主绿水晶玻璃容器 === */
|
|||
|
|
.gem-band {
|
|||
|
|
background: transparent;
|
|||
|
|
padding: 6px 0 10px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.gem-toolbar {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 0 16px;
|
|||
|
|
width: fit-content;
|
|||
|
|
height: 84px;
|
|||
|
|
/* v1.9.2 水晶玻璃：半透明 + 顶部高光 + 主绿冷阴影 */
|
|||
|
|
background: transparent;
|
|||
|
|
backdrop-filter: blur(28px) saturate(180%);
|
|||
|
|
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
|||
|
|
border-radius: 42px;
|
|||
|
|
box-shadow:
|
|||
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
|||
|
|
inset 0 -1px 0 rgba(99, 102, 241, 0.08);
|
|||
|
|
}
|
|||
|
|
.gem-toolbar-bg {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
z-index: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
overflow: visible;
|
|||
|
|
}
|
|||
|
|
.gem-row { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; }
|
|||
|
|
.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 {
|
|||
|
|
background: transparent;
|
|||
|
|
padding: 2px 16px 14px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.inputbar-mock-field {
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 56px;
|
|||
|
|
background: rgba(255, 255, 255, 0.7);
|
|||
|
|
border: 1px solid rgba(7, 193, 96, 0.14);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 10px 14px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #9ca3af;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset;
|
|||
|
|
}
|
|||
|
|
.inputbar-mock-field .send {
|
|||
|
|
margin-left: 12px;
|
|||
|
|
padding: 7px 18px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
background: linear-gradient(135deg, #07C160, #10B981);
|
|||
|
|
color: #fff; font-size: 13px; font-weight: 600;
|
|||
|
|
box-shadow: 0 2px 6px rgba(7,193,96,0.25);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* === 通用按钮 === */
|
|||
|
|
.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);
|
|||
|
|
}
|
|||
|
|
.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; }
|
|||
|
|
/* 可见的 focus 态 */
|
|||
|
|
.glass-btn:focus-visible,
|
|||
|
|
.agent-btn:focus-visible,
|
|||
|
|
.inputbar-mock-field:focus-within {
|
|||
|
|
outline: 2px solid #07C160;
|
|||
|
|
outline-offset: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* === 60px 坐席按钮（v1.9.2：头像= C-3(1).png + 主绿渐变边框） === */
|
|||
|
|
.agent-btn {
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 2px solid transparent;
|
|||
|
|
cursor: pointer;
|
|||
|
|
position: relative; z-index: 2;
|
|||
|
|
padding: 0;
|
|||
|
|
background: linear-gradient(135deg, #10B981 0%, #07C160 50%, #34D399 100%) padding-box;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.agent-btn::before {
|
|||
|
|
content: ""; position: absolute; inset: -2px; border-radius: 50%;
|
|||
|
|
background: linear-gradient(135deg, #10B981 0%, #07C160 50%, #34D399 100%); z-index: -1;
|
|||
|
|
}
|
|||
|
|
.agent-btn img {
|
|||
|
|
width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
|
|||
|
|
object-position: center 25%; /* 鸭子脸部特征（眼镜+嘴）居中略偏下 */
|
|||
|
|
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; }
|
|||
|
|
|
|||
|
|
/* === 提示块 === */
|
|||
|
|
.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); }
|
|||
|
|
.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 { 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); }
|
|||
|
|
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; }
|
|||
|
|
.checklist li { list-style: none; padding-left: 22px; position: relative; line-height: 1.9; font-size: 13px; }
|
|||
|
|
.checklist li::before { content: "□"; position: absolute; left: 4px; color: #6366f1; font-weight: 700; }
|
|||
|
|
.checklist li.done::before { content: "☑"; color: #10b981; }
|
|||
|
|
|
|||
|
|
/* 头像悬停提示 */
|
|||
|
|
.agent-btn:hover::after {
|
|||
|
|
content: attr(data-tip);
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
|
|||
|
|
background: rgba(17,24,39,0.92); color: #fff;
|
|||
|
|
font-size: 11px; padding: 4px 8px; border-radius: 6px;
|
|||
|
|
white-space: nowrap; z-index: 10;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|||
|
|
}
|
|||
|
|
</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="#bbf7d0"/><stop offset="100%" stop-color="#07C160"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
<linearGradient id="g-doc-text" x1="0%" y1="0%" x2="100%" y2="0%">
|
|||
|
|
<stop offset="0%" stop-color="#3b82f6"/><stop offset="100%" stop-color="#07C160"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
<linearGradient id="g-mic-body" x1="50%" y1="0%" x2="50%" y2="100%">
|
|||
|
|
<stop offset="0%" stop-color="#34D399"/><stop offset="50%" stop-color="#10B981"/><stop offset="100%" stop-color="#056739"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
<linearGradient id="g-group" x1="0%" y1="0%" x2="100%" y2="100%">
|
|||
|
|
<stop offset="0%" stop-color="#60A5FA"/><stop offset="100%" stop-color="#34D399"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
<linearGradient id="g-group-strong" x1="0%" y1="0%" x2="100%" y2="100%">
|
|||
|
|
<stop offset="0%" stop-color="#3b82f6"/><stop offset="50%" stop-color="#07C160"/><stop offset="100%" stop-color="#10B981"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
<linearGradient id="g-rail" x1="0%" y1="0%" x2="100%" y2="0%">
|
|||
|
|
<stop offset="0%" stop-color="#34D399" stop-opacity="0.5"/>
|
|||
|
|
<stop offset="50%" stop-color="#07C160" stop-opacity="0.9"/>
|
|||
|
|
<stop offset="100%" stop-color="#34D399" stop-opacity="0.5"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
|
|||
|
|
<!-- v1.9.2 水晶玻璃容器 — 主绿径向渐变（中心偏上 20%）
|
|||
|
|
色板：PRD-REQ-通用-001-前端设计系统 v1.0 主色 tokens
|
|||
|
|
--color-primary #07C160（主色 / 企微绿）
|
|||
|
|
--color-primary-light #E8F5E9（主色浅背景）
|
|||
|
|
--color-success #10B981（成功）
|
|||
|
|
--color-primary-dark #056739（主色深）
|
|||
|
|
设计系统要求三端视觉一致 -->
|
|||
|
|
<radialGradient id="g-toolbar-glass" cx="50%" cy="20%" r="75%">
|
|||
|
|
<stop offset="0%" stop-color="rgba(232, 245, 233, 0.65)"/>
|
|||
|
|
<stop offset="35%" stop-color="rgba(125, 217, 160, 0.55)"/>
|
|||
|
|
<stop offset="65%" stop-color="rgba(7, 193, 96, 0.42)"/>
|
|||
|
|
<stop offset="100%" stop-color="rgba(16, 185, 129, 0.35)"/>
|
|||
|
|
</radialGradient>
|
|||
|
|
<!-- v1.9.2 顶部高光 -->
|
|||
|
|
<linearGradient id="g-toolbar-highlight" x1="50%" y1="0%" x2="50%" y2="100%">
|
|||
|
|
<stop offset="0%" stop-color="white" stop-opacity="0.85"/>
|
|||
|
|
<stop offset="100%" stop-color="white" stop-opacity="0"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
<!-- v1.9.2 多层阴影 — 主绿冷光三层 feDropShadow
|
|||
|
|
色阶：主色绿 #07C160 → 成功绿 #10B981 → 主色深 #056739 -->
|
|||
|
|
<filter id="g-toolbar-shadow" x="-30%" y="-30%" width="160%" height="180%">
|
|||
|
|
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#07C160" flood-opacity="0.28"/>
|
|||
|
|
<feDropShadow dx="0" dy="6" stdDeviation="12" flood-color="#10B981" flood-opacity="0.20"/>
|
|||
|
|
<feDropShadow dx="0" dy="14" stdDeviation="22" flood-color="#056739" flood-opacity="0.18"/>
|
|||
|
|
</filter>
|
|||
|
|
</defs>
|
|||
|
|
</svg>
|
|||
|
|
|
|||
|
|
<h1>工具栏统一设计 v1.9.2 — <span style="color:#07C160;">员工端主绿水晶玻璃容器版</span></h1>
|
|||
|
|
<p class="meta">
|
|||
|
|
v1.9 基础上四项关键优化 · 2026-08-06 · Duckula 主理人
|
|||
|
|
| 基线：v1.9 员工端落地版
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div class="note-success">
|
|||
|
|
✅ <strong>v1.9.2 视觉升级要点</strong>（v1.9.1 基础上增加色板对齐）：
|
|||
|
|
<br>① <strong>人工坐席头像接入 C-3(1).png</strong>（唐老鸭戴眼镜素食吸血鬼守卫者，覆盖占位图）
|
|||
|
|
<br>② <strong>三区无边框融合</strong>：去除 .input-bar 的 border-top + 排查步骤的 border-bottom（仅保留窗口标题栏 chrome 分隔）
|
|||
|
|
<br>③ <strong>工具栏升级为「水晶玻璃容器」</strong>：半透明 + backdrop-filter blur(28px) saturate(180%) + 顶部白色高光（SVG 高光 path + CSS inset）+ 多层冷光阴影（feDropShadow 链式三层）
|
|||
|
|
<br>④ <strong>色板对齐设计系统 v1.0</strong>：紫粉 → 主绿（三端视觉一致）<strong>#07C160 企微绿</strong> 系径向渐变 + 多层阴影
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2>🎯 员工端落地效果（v1.9.2 最终视觉）</h2>
|
|||
|
|
<div class="chatpanel-mock">
|
|||
|
|
<div class="chatpanel-mock-header">
|
|||
|
|
<span class="dot"></span>
|
|||
|
|
<span class="title">IT 智能服务台</span>
|
|||
|
|
<span class="sub">· 在线 · 工单 #SR-20260805-0392</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chatpanel-mock-messages">
|
|||
|
|
<div class="mock-msg user">
|
|||
|
|
<div class="who">我</div>
|
|||
|
|
你好，我的 VPN 连不上，提示 691 错误，影响今天远程办公。
|
|||
|
|
</div>
|
|||
|
|
<div class="mock-msg ai">
|
|||
|
|
<div class="who">智能助手</div>
|
|||
|
|
您好，VPN 691 通常是账号密码错误或账号被锁定。已为您查询：账号状态正常、未过期。<br>
|
|||
|
|
建议先自助排查：① 确认密码未过期；② 在 portal 重置密码后重试。
|
|||
|
|
<div class="quick">
|
|||
|
|
<span>重置 VPN 密码</span><span>查看排障指引</span><span>转人工坐席</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="mock-msg user">
|
|||
|
|
<div class="who">我</div>
|
|||
|
|
重置了还是不行，麻烦转人工。
|
|||
|
|
</div>
|
|||
|
|
<div class="mock-msg ai">
|
|||
|
|
<div class="who">智能助手</div>
|
|||
|
|
已为您转接人工坐席，请稍候。也可点击下方工具栏「人工坐席」按钮随时发起通话。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="gem-band">
|
|||
|
|
<div class="gem-toolbar">
|
|||
|
|
<!-- 主水晶容器（主绿径向渐变 + 多层冷光阴影） -->
|
|||
|
|
<svg class="gem-toolbar-bg" viewBox="0 0 312 84" preserveAspectRatio="xMidYMid meet"
|
|||
|
|
aria-hidden="true" role="presentation">
|
|||
|
|
<path d="M 18 18
|
|||
|
|
L 84 18
|
|||
|
|
C 116 18, 126 6, 156 4
|
|||
|
|
C 186 6, 196 18, 216 18
|
|||
|
|
L 294 18
|
|||
|
|
C 302 18, 312 26, 312 34
|
|||
|
|
L 312 50
|
|||
|
|
C 312 58, 302 66, 294 66
|
|||
|
|
L 216 66
|
|||
|
|
C 196 66, 186 78, 156 80
|
|||
|
|
C 126 78, 116 66, 84 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-toolbar-glass)"
|
|||
|
|
stroke="rgba(255,255,255,0.85)"
|
|||
|
|
stroke-width="1.5"
|
|||
|
|
filter="url(#g-toolbar-shadow)"/>
|
|||
|
|
<!-- 顶部高光叠加 -->
|
|||
|
|
<path d="M 18 18
|
|||
|
|
L 84 18
|
|||
|
|
C 116 18, 126 6, 156 4
|
|||
|
|
C 186 6, 196 18, 216 18
|
|||
|
|
L 294 18
|
|||
|
|
C 302 18, 312 26, 312 34
|
|||
|
|
L 312 38
|
|||
|
|
C 300 30, 200 22, 156 18
|
|||
|
|
C 112 22, 12 30, 0 38
|
|||
|
|
L 0 34
|
|||
|
|
C 0 26, 10 18, 18 18 Z"
|
|||
|
|
fill="url(#g-toolbar-highlight)"
|
|||
|
|
opacity="0.55"/>
|
|||
|
|
</svg>
|
|||
|
|
<div class="gem-row">
|
|||
|
|
<button class="glass-btn" title="表情" aria-label="表情">
|
|||
|
|
<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="文件" aria-label="文件">
|
|||
|
|
<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="#07C160" stroke-width="0.8"/>
|
|||
|
|
<path d="M14 2 L14 8 L20 8" fill="url(#g-doc-fold)" stroke="#07C160" 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>
|
|||
|
|
<!-- 🆕 v1.9.2 头像素材 = C-3(1).png -->
|
|||
|
|
<button class="agent-btn gem" title="人工坐席" aria-label="转接人工坐席" data-tip="不吸血的守卫者 · 在线">
|
|||
|
|
<img src="./agent-avatar-v1.9.2.png" alt="人工坐席"/>
|
|||
|
|
<span class="agent-badge is-online" aria-label="在线"></span>
|
|||
|
|
</button>
|
|||
|
|
<button class="glass-btn" title="语音输入" aria-label="语音输入">
|
|||
|
|
<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="群聊" aria-label="发起群聊">
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<div class="inputbar-mock">
|
|||
|
|
<div class="inputbar-mock-field" tabindex="0">
|
|||
|
|
<span>描述您的问题，或点击上方工具栏发起操作…</span>
|
|||
|
|
<span class="send">发送</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2>📋 v1.9.2 落地检查清单（在 v1.9 之上增量）</h2>
|
|||
|
|
<ul class="checklist">
|
|||
|
|
<li class="done">圆角长方形 + 中央圆润拱形轨道（SVG path 严格按 v1.9 交付清单 §三 固化）</li>
|
|||
|
|
<li class="done">人工坐席 60px 居中、不探出、无光晕</li>
|
|||
|
|
<li class="done">🆕 <strong>人工坐席头像接入 C-3(1).png</strong>（唐老鸭戴眼镜，占位图 agent-avatar-v0.8.jpg 下线）</li>
|
|||
|
|
<li class="done">🆕 <strong>三区无边框融合</strong>：去除 .input-bar 的 border-top、去除排查步骤的 border-bottom，仅保留窗口标题栏 chrome 分隔</li>
|
|||
|
|
<li class="done">两端 4 个工具按钮（emoji/文件/语音/群聊）40px 圆形玻璃，在轨道内不溢出</li>
|
|||
|
|
<li class="done">🆕 <strong>工具栏升级为水晶玻璃容器</strong>：半透明 + backdrop-filter blur(28px) saturate(180%) + 顶部白色高光 + 多层冷光阴影（feDropShadow 链式三层） + 径向渐变（中心偏上 20%）</li>
|
|||
|
|
<li class="done">🆕 <strong>色板对齐设计系统 v1.0</strong>：紫粉 → 主绿（三端视觉一致）— 水晶容器渐变 / 多层阴影 / 坐席边框 / 语音图标 / 群聊图标 / 文件图标 / 焦点环全部切换至主绿系 #07C160</li>
|
|||
|
|
<li class="done">键盘可达：所有按钮 title + aria-label，可见 :focus-visible 主绿环</li>
|
|||
|
|
<li class="done">装饰性 SVG（拱形轨道 + 顶部高光）aria-hidden + role=presentation，不进入辅助阅读</li>
|
|||
|
|
<li>开发实现：<code>InputBar.vue</code> 已按 v1.9.2 重构（2026-08-06 提交）</li>
|
|||
|
|
<li>回归测试：补充 C-3(1).png 头像接入 + 工具栏主绿水晶玻璃 visual-test（<code>InputBar.test.ts</code>）</li>
|
|||
|
|
<li>响应式：≤480px fallback 沿用 v1.9 方案 A 扁平胶囊（已预留）</li>
|
|||
|
|
<li>深色模式：水晶玻璃三层投影在 dark 主题下需重新校准主绿 → 成功绿配比（已留扩展位）</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h2>🆚 v1.9 → v1.9.2 差异对比</h2>
|
|||
|
|
<table>
|
|||
|
|
<thead>
|
|||
|
|
<tr><th>维度</th><th>v1.9 落地版</th><th>v1.9.2 主绿水晶玻璃版</th></tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>坐席头像</td>
|
|||
|
|
<td>占位图 <code>agent-avatar-v0.8.jpg</code></td>
|
|||
|
|
<td><strong>C-3(1).png</strong>（SVG path 用法不变）</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>三区边框</td>
|
|||
|
|
<td><code>.input-bar { border-top }</code> 保留</td>
|
|||
|
|
<td><strong>border-top 去除</strong>（消息区/工具栏/输入区完全融合）</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>排查步骤 → 消息区分隔</td>
|
|||
|
|
<td><code>.chat-panel__troubleshoot-fixed { border-bottom }</code> 保留</td>
|
|||
|
|
<td><strong>border-bottom 去除</strong>（仅窗口标题栏 chrome 分隔）</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>工具栏背景</td>
|
|||
|
|
<td>线性横向渐变（g-rail 半透明）</td>
|
|||
|
|
<td><strong>主绿径向渐变</strong>（g-toolbar-glass，中心偏上 20%，#E8F5E9 → #07C160 → #10B981）</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>工具栏模糊</td>
|
|||
|
|
<td>无（仅 SVG 内 fills 半透明）</td>
|
|||
|
|
<td><strong>backdrop-filter: blur(28px) saturate(180%)</strong></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>顶部高光</td>
|
|||
|
|
<td>仅 SVG stroke 描边（白色 0.85 / 1.2px）</td>
|
|||
|
|
<td><strong>SVG 高光 path 叠加</strong>（fill=白色 0.85→0 渐变，opacity 0.55）+ CSS inset 高光 + 反向绿光底</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>多层阴影</td>
|
|||
|
|
<td>CSS 单层 inset + 外阴影</td>
|
|||
|
|
<td><strong>SVG feDropShadow 三层链式投影</strong>（主绿 #07C160 dy=2 σ=3 / 成功绿 #10B981 dy=6 σ=12 / 主色深 #056739 dy=14 σ=22）</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>色板（v1.9.2 新增）</td>
|
|||
|
|
<td>紫粉系（#6366f1 / #a855f7 / #ec4899）</td>
|
|||
|
|
<td><strong>主绿系</strong>，与 PRD-REQ-通用-001-前端设计系统 v1.0 tokens 对齐（#07C160 / #10B981 / #34D399 / #056739）</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>几何（SVG path）</td>
|
|||
|
|
<td>严格按清单 §三</td>
|
|||
|
|
<td>不变（架构稳定，仅填充+滤镜增强）</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<h2>🧭 方向选择记录（拍板结果）</h2>
|
|||
|
|
<div class="note-info">
|
|||
|
|
本版按用户 2026-08-06 反馈的四项差异修正确认结论：<strong>选 B（主绿水晶玻璃 v1.9.2）</strong>作为员工端的最终交付。
|
|||
|
|
色板对齐 <code>PRD-REQ-通用-001-前端设计系统 v1.0</code> 主色 tokens，三端视觉一致。
|
|||
|
|
若后续在窄屏（≤480px）出现渲染问题，临时降级为 <strong>A 扁平胶囊</strong>，已在检查清单预留 fallback。
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2>⚠️ 待开发对齐的开放项</h2>
|
|||
|
|
<ol style="margin-left: 20px; line-height: 1.8; font-size: 13px;">
|
|||
|
|
<li><strong>头像校验</strong>：设计验收对照 C-3(1).png 实物头像（已 SHA256 双向校验：C-3(1).png 与 public/avatars/agent.png 一致）</li>
|
|||
|
|
<li><strong>水晶容器视觉</strong>：在 Vue 组件内确认 <code>backdrop-filter: blur(28px)</code> 在低端机（≤iPhone X）流畅度，需 Performance 打点</li>
|
|||
|
|
<li><strong>三层阴影配色</strong>：可按品牌色扩展为「企业版蓝青 / 节日版红金」等</li>
|
|||
|
|
<li><strong>坐席 60px 口径</strong>：沿用 v1.9 锁定（较 40px 大 50% = 60px）</li>
|
|||
|
|
<li><strong>拱肩水平切线</strong>：沿用 v1.9 锁定（无变化）</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.9.2 员工端主绿水晶玻璃容器版 · 2026-08-06 · Duckula 主理人 · 已开发实现并视觉验收
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|