ai-kefu-jc/docs/superpowers/specs/2026-04-22-chat-widget-redesign.md

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

**日期**: 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 关键样式

```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 需要修改的文件

1. **[static/widget.js](static/widget.js)** - 入口按钮样式
2. **[static/css/style.css](static/css/style.css)** - 聊天窗口样式
3. **[static/js/chat.js](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 实施步骤

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

### 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