工具栏统一设计 v0.8 — 居中布局 + 真实图片头像
v0.5 玻璃拟态工具栏 + 整体居中 + 用户提供的 3D 拟人吉祥物图片 · 2026-08-04 凌晨
📌 本版核心改动(对比 v0.7):
• 头像用真实图片(你提供的 3D 拟人吉祥物,108KB JPG),不再是 SVG — 品牌化 + 高级感
• 整体工具栏居中(不再是左上角 absolute 定位) — 居中对齐工具栏的 4 按钮
• v0.5 玻璃拟态✅ 沿用
• 4 工具图标✅ 沿用 v0.5/v0.6 升级版(高质感几何)
🎨 整体 InputBar 工具栏(居中布局)
InputBar 工具栏 · 整体居中(不再左上角)+ 4 按钮 + 真实图片坐席头像
🎬 坐席按钮 6 态切换(真实图片)
📊 v0.8 vs v0.7 对比
| 维度 |
v0.7 终极版 SVG |
v0.8 图片头像 |
| 头像形式 |
SVG(西装+眼镜+领带) |
真实图片(3D 渲染的吉祥物) |
| 高级感 |
★★★(SVG 上限) |
★★★★★+(真实 3D 渲染) |
| 整体工具栏布局 |
左上角 absolute |
整体居中(justify-content: center) |
| 实施成本 |
极低(0.5 天) |
低(0.5-1 天,需放置图片到项目 public 目录) |
| 资源依赖 |
无 |
需要 1 张 108KB JPG(已有) |
📦 实施说明(图片放置 + 引用)
实施步骤:
1. 复制图片到项目:`src/frontend-h5/public/avatars/agent.png` 或 `agent.jpg`
2. InputBar.vue 引用:`<img src="/avatars/agent.png" class="agent-avatar-img">`
3. CSS 控制:`border-radius: 50%`、`object-fit: cover`、`object-position: center top`(调整头像位置)
4. 6 态用边框颜色 + 滤镜 + 阴影变化(图片本身不变,只换外圈装饰)
❓ 待你拍板
- 整体居中布局符合期望吗?(不再是左上角)
- 真实图片头像符合期望吗?(你提供的 3D 拟人吉祥物)
- 头像大小:42px(当前)还是 38px(与其他工具按钮一致)?
- 6 态边框设计OK 吗?(紫粉渐变 / 红 / 橙 / 绿 / 蓝 + 阴影)
v0.8 图片头像 · 2026-08-04 · Duckula 主理人 · 等待用户拍板