工具栏统一设计 v1.2 — 状态徽标 + 颜色&形态双变 + 展开面板

v1.1 基础 + 3 项关键决策 · 坐席徽标(头像右下角) · 语音形态双变 · 表情/文件面板从 InputBar 顶部上滑展开 · 2026-08-04

📌 v1.2 三大升级(基于你的 3 项决策):
• 🎭 坐席状态:只用头像+徽标(绿/红/橙/灰/蓝 5 色徽标,圆角头像不变色)
• 🎙️ 语音状态:颜色+形态双变(话筒→红色脉动声波→绿色对勾)
• 📤 展开面板:从 InputBar 顶部上滑(表情网格 / 文件选择面板)

🎨 ChatPanel 完整布局(工具栏在 InputBar 内)

IT 智能服务台 · 在线 · 客服小王
我 10:23
你好,我电脑经常蓝屏
AI 10:23
您好!电脑蓝屏可能由驱动/内存/温度等问题引起。建议先尝试安全模式启动...
我 10:25
还有其他办法吗?紧急,需要尽快恢复
请输入消息...(输入框在工具栏下方,用户打字区)

🎙️ 语音按钮 - 颜色+形态双变(3 状态)

点击下方 Tab 切换语音按钮形态

🎭 坐席按钮 - 头像 + 状态徽标(5 色)

徽标颜色映射坐席状态,头像本体不变色
在线 🟢
紧急 🔴 (徽标呼吸)
等待 🟠
结束/重连 🔵
离线 ⚫ (灰度+灰色徽标)

📤 表情面板 - 从 InputBar 顶部上滑展开

点击表情按钮 → 表情网格从工具栏下方(InputBar 内)向上滑出
😀 表情 🐶 动物 🍔 食物 ⚽ 活动 🚗 旅行 💡 物品 ❤️ 符号
😀
😃
😄
😁
😆
😅
🤣
😂
🙂
🙃
😉
😊
😇
🥰
😍
🤩
😘
😗
☺️
😚
😙
🥲
😋
😛
输入框

📁 文件面板 - 从 InputBar 顶部上滑展开

点击文件按钮 → 文件选择面板从工具栏下方(InputBar 内)向上滑出
🖼️
图片
📄
文档
🎬
视频
🎵
音频
📷
拍照
📁
文件夹
📎
其他
📊
表格
输入框

📊 v1.1 vs v1.2 关键差异

维度 v1.1 v1.2
坐席状态 按钮边框变色(紫粉/红/橙/绿/蓝) 头像右下角徽标(5 色) 简洁不喧宾夺主
语音形态 只换颜色(灰/紫/红) 颜色+形态双变(话筒→红色脉动声波→绿色对勾)
展开面板 未实现(占位) 表情网格 / 文件选择器,从 InputBar 顶部上滑(slideUp 0.3s)
离线坐席 灰色边框 整体灰度 + 灰色徽标(完全弱化)

v1.2 状态徽标 + 颜色&形态双变 + 展开面板 · 2026-08-04 · Duckula 主理人 · 等待用户最终拍板进入开发