Files

T

浅念 49c0e5559c chore: 从汽车AI客服项目拷贝骨架并清理(blog页/redis)

Co-Authored-By: Claude Code <noreply@anthropic.com>

2026-09-29 14:15:12 +08:00

12 KiB

Raw Blame History

聊天窗口和入口按钮重新设计

日期: 2026-04-22
项目: AI 客服系统 - VOLT/HESU
目标: 重新设计聊天窗口入口按钮和聊天界面样式

一、设计概述

1.1 项目背景

当前 AI 客服系统的聊天窗口样式需要更新，以提供更专业、现代的用户体验。主要涉及：

悬浮入口按钮样式优化
聊天窗口布局重新设计
交互细节完善

1.2 设计目标

提供专业、友好的客服入口体验
优化聊天窗口的信息层级
改善用户交互流程
保持与品牌橙色主题的一致性

二、入口按钮设计

2.1 样式规范

属性	值
类型	横条卡片式
尺寸	宽度约 180px，高度自动适应内容
圆角	30px
背景	#f08a31（品牌橙色）
阴影	0 4px 16px rgba(240,138,49,0.4)
悬停效果	放大 1.1 倍

2.2 内容构成

┌─────────────────────────────┐
│ [📞 图标] 在线咨询           │
│           即时回复           │
└─────────────────────────────┘

左侧: 圆形图标区域（36x36px，半透明白色背景）
右侧:
- 主标题："在线咨询"（14px，加粗，白色）
- 副标题："即时回复"（11px，白色，90% 透明度）

2.3 位置规范

默认位置：右下角（bottom: 20px, right: 20px）
可配置位置：bottom-left, top-right, top-left
z-index: 99999（确保在最顶层）

三、聊天窗口设计

3.1 窗口规格

属性	值
宽度	400px
高度	自适应，最小高度 480px
圆角	16px
阴影	0 10px 40px rgba(0,0,0,0.15)
最大高度	80vh
字体	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto

3.2 头部区域

3.2.1 布局

高度：约 68px（padding 14px 18px）
背景：#f08a31（品牌橙色渐变）
文字颜色：白色

3.2.2 元素构成

┌─────────────────────────────────────┐
│ [🚗 头像+绿点]  HESU Support      [−] [✕] │
│              Online now · Usually   │
│              replies in minutes    │
└─────────────────────────────────────┘

元素	规格
头像	48x48px 圆形，汽车 emoji 🚗，半透明白色背景
在线状态点	14px，绿色 #22c55e，3px 橙色边框，右下角定位
标题	17px，加粗，"HESU Support"
状态文字	13px，"Online now · Usually replies in minutes"，95% 透明度
操作按钮	32x32px，圆角 8px，半透明白色背景 15%

3.3 消息区域

3.3.1 基础规范

内边距：20px
背景：#ffffff 白色
最小高度：260px
圆角：0（与窗口顶部对齐）

3.3.2 "How can we help?" 区块

┌─────────────────────────────────────┐
│ How can we help?                    │
│ Ask about vehicles, market support, │
│ quotation, shipping and delivery.   │
│                              [📞 Call us] │
└─────────────────────────────────────┘

属性	值
背景	#fef9f3（浅黄橙色）
边框	1px，#fef3c7
圆角	12px
内边距	16px
外边距	底部 20px
布局	左侧内容 + 右侧按钮

元素	规格
标题	17px，加粗，#111827
描述	13px，#6b7280，行高 1.4
Call us 按钮	#f08a31 背景，9px 18px 内边距，10px 圆角，📞 图标 15px

交互: Call us 按钮点击跳转到 https://wa.me/+8619037179250

3.3.3 欢迎消息

┌─────────────────────────────────────┐
│ [🚗] Hello. Welcome to HESU. I can  │
│       help with stock vehicles,      │
│       quotation, delivery timing     │
│       and distributor cooperation.   │
└─────────────────────────────────────┘

属性	值
AI 头像	32x32px 圆形，#f08a31 背景
消息气泡	#f3f4f6 背景，16px 圆角，左下角 4px 直角
文字	14px，#1f2937，行高 1.5
最大宽度	280px
间距	头像与气泡 10px

3.4 分隔线

属性	值
高度	1px
颜色	#f08a31（橙色）
透明度	30%
位置	消息区与输入区之间

3.5 输入区域

3.5.1 容器规范

属性	值
外边距	16px 18px
背景	白色
内边距	0（容器本身无内边距）

3.5.2 输入容器

┌─────────────────────────────────────┐
│ [ 输入框... ]  │  [➤ Send ]        │
└─────────────────────────────────────┘

属性	值
背景	#fef9f3（浅黄橙色）
圆角	28px
内边距	12px 16px
边框	无
阴影	0 1px 3px rgba(0,0,0,0.05)
间距	输入框与分隔线 8px

3.5.3 输入框

属性	值
背景	透明
边框	无
内边距	0
字号	14px
颜色	#1f2937
占位符	"Type a message..."，#9ca3af
最小高度	20px
outline	none（聚焦时无特殊样式）

3.5.4 分隔线

属性	值
宽度	1px
高度	24px
颜色	#e5e7eb
位置	输入框与按钮之间

3.5.5 发送按钮

属性	值
文字	"➤ Send"
背景	linear-gradient(135deg, #f08a31, #f59e0b)
内边距	8px 16px
圆角	12px
字号	14px，字重 500
阴影	0 2px 8px rgba(240,138,49,0.25)
箭头图标	16px
white-space	nowrap（防止文字换行）

3.6 底部信息栏

┌─────────────────────────────────────┐
│ By sending a message, you agree to   │
│ the privacy policy.    AI + human support │
└─────────────────────────────────────┘

属性	值
背景	白色
内边距	10px 18px
布局	justify-content: space-between
间距	gap: 20px
字号	11px
颜色	#d97706（深橙色）

元素	规格
左侧	"By sending a message, you agree to the privacy policy."，flex: 1
右侧	"AI + human support"，flex-shrink: 0

四、配色方案

4.1 主色调

颜色名称	HEX 用途	说明
品牌橙	#f08a31	主色、头部背景、按钮背景
品牌橙深	#e07a20	悬停状态
橙黄渐变	#f08a31 → #f59e0b	发送按钮渐变

4.2 辅助色

颜色名称	HEX 用途	说明
浅黄橙	#fef9f3	Help 区块、输入容器背景
浅黄边	#fef3c7	Help 区块边框
橙色文字	#d97706	底部信息栏文字
浅橙分隔	#fed7aa	辅助橙色

4.3 中性色

颜色名称	HEX 用途	说明
纯白	#ffffff	聊天背景、输入容器
浅灰	#f9fafb	输入框背景、快捷按钮背景
消息气泡灰	#f3f4f6	AI 消息气泡
边框灰	#e5e7eb	分隔线、边框
分隔线灰	#e5e7eb	细线分隔

4.4 文字色

颜色名称	HEX 用途	说明
深黑	#111827	标题
中灰	#6b7280	描述文字
深灰	#1f2937	正文
浅灰	#9ca3af	占位符

4.5 功能色

颜色名称	HEX 用途	说明
在线绿	#22c55e	在线状态点

五、交互说明

5.1 悬浮入口按钮

交互	行为
悬停	放大 1.1 倍
点击	展开/收起聊天窗口

5.2 聊天窗口头部

元素	行为
最小化按钮 (−)	折叠聊天窗口，保留悬浮入口
关闭按钮 (✕)	关闭聊天窗口

5.3 Call us 按钮

交互	行为
点击	新标签页打开 WhatsApp 链接：https://wa.me/+8619037179250
target	_blank

5.4 发送按钮

交互	行为
点击	发送消息到 AI 客服
悬停	可选：放大效果

六、响应式设计

6.1 移动端适配

断点	调整
最大宽度 400px	窗口宽度
高度	calc(100vh - 100px)
底部位置	距底部 20px

6.2 字体缩放

元素	移动端
标题	保持不变
正文	保持不变
按钮	保持不变

七、技术实现要点

7.1 CSS 关键样式

/* 悬浮入口按钮 */
.toggle-btn {
  width: auto;
  height: auto;
  background: #f08a31;
  border-radius: 30px;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(240,138,49,0.4);
  cursor: pointer;
  transition: transform 0.2s;
}

/* 聊天窗口 */
.chat-window {
  width: 400px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

/* 输入容器 */
.input-container {
  background: #fef9f3;
  border-radius: 28px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

7.2 需要修改的文件

static/widget.js - 入口按钮样式
static/css/style.css - 聊天窗口样式
static/js/chat.js - 交互逻辑（如需要）

八、验收标准

8.1 视觉验收

入口按钮为横条卡片式，包含图标和双行文字
聊天窗口宽度 400px，圆角 16px
头部橙色背景，包含头像+在线状态+标题+操作按钮
"How can we help?" 区块浅黄背景，左内容右按钮布局
欢迎消息包含 AI 头像和问候语
橙色分隔线（1px，30% 透明度）
输入容器浅黄背景，圆角 28px，无边框
发送按钮为圆角长方形，包含箭头图标和"Send"文字
底部信息栏橙色文字，左右分开布局

8.2 交互验收

入口按钮悬停放大
Call us 按钮跳转到 WhatsApp
最小化/关闭按钮功能正常
发送按钮功能正常

8.3 响应式验收

移动端窗口正确显示
文字大小适配合理

九、实施计划

9.1 实施步骤

修改悬浮入口按钮样式（widget.js）
更新聊天窗口 CSS 样式（style.css）
调整输入区域 HTML 结构（chat.html）
更新交互逻辑（chat.js）
测试所有交互功能
移动端兼容性测试

9.2 兼容性

现代浏览器（Chrome, Firefox, Safari, Edge）
移动端浏览器（iOS Safari, Chrome Mobile）
Shadow DOM 支持（widget 嵌入模式）

十、附录

10.1 设计参考

入口按钮：现代客服系统的横条卡片样式
聊天窗口：IM 应用（WhatsApp、Telegram）的对话界面
配色方案：品牌橙色主题的延伸

10.2 设计资产

头像：汽车 emoji 🚗
在线图标：绿点 + "Online" 文字
操作图标：−（最小化）、✕（关闭）
功能图标：📞（电话）、➤（发送箭头）

文档版本: 1.0
最后更新: 2026-04-22

12 KiB Raw Blame History Unescape Escape