208 lines
5.2 KiB
Markdown
208 lines
5.2 KiB
Markdown
# 快捷对话按钮栏设计文档
|
||
|
||
**日期**: 2026-04-01
|
||
**状态**: 待审查
|
||
**作者**: Claude
|
||
|
||
## 概述
|
||
|
||
在 AI 聊天页面底部输入框上方添加快捷对话按钮栏，提供 4 个常用功能的快速入口，用户点击后自动发送预设消息给 AI。
|
||
|
||
## 功能需求
|
||
|
||
### 核心功能
|
||
1. 在图片预览区域和输入框之间显示快捷按钮栏
|
||
2. 提供 4 个快捷按钮：我的账单、我要报修、工单查询、社区服务
|
||
3. 点击按钮后自动发送预设的详细问题给 AI
|
||
4. 快捷按钮栏始终显示，不受聊天状态影响
|
||
|
||
### 按钮内容映射
|
||
|
||
| 按钮文字 | 发送消息内容 |
|
||
|---------|------------|
|
||
| 我的账单 | 请帮我查询我的账单信息 |
|
||
| 我要报修 | 我要报修 |
|
||
| 工单查询 | 请帮我查询我的工单 |
|
||
| 社区服务 | 请提供社区服务信息 |
|
||
|
||
## 设计方案
|
||
|
||
### 1. 布局结构
|
||
|
||
```
|
||
.chat-input-area
|
||
├─ .image-preview-area (条件显示：selectedImages.length > 0)
|
||
├─ .quick-actions-bar (始终显示) ← 新增
|
||
└─ .input-container
|
||
├─ input (message-input)
|
||
├─ button (upload-button)
|
||
└─ button (send-button)
|
||
```
|
||
|
||
### 2. 数据结构
|
||
|
||
```typescript
|
||
interface QuickAction {
|
||
label: string // 按钮显示文字
|
||
message: string // 点击后发送的消息内容
|
||
}
|
||
|
||
const quickActions: QuickAction[] = [
|
||
{ label: '我的账单', message: '请帮我查询我的账单信息' },
|
||
{ label: '我要报修', message: '我要报修' },
|
||
{ label: '工单查询', message: '请帮我查询我的工单' },
|
||
{ label: '社区服务', message: '请提供社区服务信息' }
|
||
]
|
||
```
|
||
|
||
### 3. 交互逻辑
|
||
|
||
```typescript
|
||
// 处理快捷按钮点击
|
||
const handleQuickAction = (action: QuickAction) => {
|
||
inputMessage.value = action.message
|
||
handleSendMessage()
|
||
}
|
||
```
|
||
|
||
### 4. 样式设计
|
||
|
||
#### 快捷按钮栏容器 (`.quick-actions-bar`)
|
||
- 布局：flex row，自动换行
|
||
- 间距：上下 16rpx padding
|
||
- 对齐：居左或居中
|
||
- 背景：透明（继承父容器）
|
||
|
||
#### 快捷按钮 (`.quick-action-btn`)
|
||
- 尺寸：高度 64rpx，宽度自适应内容
|
||
- 内边距：16rpx 24rpx
|
||
- 背景色：#ffffff（白色）
|
||
- 边框：1px solid #e5e5e5（浅灰色）
|
||
- 圆角：12rpx
|
||
- 字体大小：26rpx
|
||
- 字体颜色：#333333（深灰）
|
||
- 字体粗细：normal（400）
|
||
- 间距：左右按钮之间 16rpx gap
|
||
- 过渡动画：transform 0.2s ease
|
||
- 点击态：scale(0.98)，背景色 #f8f8f8
|
||
|
||
### 5. 代码修改位置
|
||
|
||
**文件**: `/src/pages/ai/chat.vue`
|
||
|
||
#### 模板修改（第 172-173 行之间）
|
||
```vue
|
||
<!-- 图片预览区域 -->
|
||
<view v-if="selectedImages.length > 0" class="image-preview-area">
|
||
<!-- 现有内容 -->
|
||
</view>
|
||
|
||
<!-- 快捷按钮栏 - 新增 -->
|
||
<view class="quick-actions-bar">
|
||
<view
|
||
v-for="(action, index) in quickActions"
|
||
:key="index"
|
||
class="quick-action-btn"
|
||
@click="handleQuickAction(action)"
|
||
>
|
||
<text>{{ action.label }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 输入框容器 -->
|
||
<view class="input-container">
|
||
<!-- 现有内容 -->
|
||
</view>
|
||
```
|
||
|
||
#### 脚本修改（在 setup 中添加）
|
||
```typescript
|
||
// 快捷按钮数据定义
|
||
const quickActions: QuickAction[] = [
|
||
{ label: '我的账单', message: '请帮我查询我的账单信息' },
|
||
{ label: '我要报修', message: '我要报修' },
|
||
{ label: '工单查询', message: '请帮我查询我的工单' },
|
||
{ label: '社区服务', message: '请提供社区服务信息' }
|
||
]
|
||
|
||
// 处理快捷按钮点击
|
||
const handleQuickAction = (action: QuickAction) => {
|
||
inputMessage.value = action.message
|
||
handleSendMessage()
|
||
}
|
||
```
|
||
|
||
#### 样式修改（在 style 中添加）
|
||
```scss
|
||
.quick-actions-bar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
padding: 16rpx 0;
|
||
}
|
||
|
||
.quick-action-btn {
|
||
height: 64rpx;
|
||
padding: 0 24rpx;
|
||
background-color: #ffffff;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 12rpx;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s ease;
|
||
white-space: nowrap;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
text {
|
||
display: block;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 实现要点
|
||
|
||
1. **不删除任何文件**：仅在现有 chat.vue 文件中添加代码
|
||
2. **保持现有功能**：不影响现有的图片上传、消息发送等功能
|
||
3. **响应式布局**：按钮横向排列，宽度不足时自动换行
|
||
4. **用户体验**：点击反馈动画，发送消息时显示 loading 状态
|
||
5. **代码风格一致**：遵循现有代码的命名规范和结构
|
||
|
||
## 测试要点
|
||
|
||
1. 快捷按钮始终显示
|
||
2. 点击按钮后消息正确发送
|
||
3. 按钮布局正常（不同屏幕宽度）
|
||
4. 点击动画效果正常
|
||
5. 发送消息时 loading 状态正常
|
||
6. 与现有功能无冲突（图片上传、输入框等）
|
||
|
||
## 实现范围
|
||
|
||
**包含**：
|
||
- 在 chat.vue 中添加快捷按钮栏 UI
|
||
- 实现点击快捷按钮发送消息的逻辑
|
||
- 添加快捷按钮的样式
|
||
|
||
**不包含**：
|
||
- 修改后端 API
|
||
- 修改其他页面
|
||
- 提取快捷按钮为独立组件
|
||
- 添加快捷按钮配置功能
|
||
|
||
## 设计自检
|
||
|
||
- ✅ 无占位符或 TBD 内容
|
||
- ✅ 无内部矛盾
|
||
- ✅ 范围明确且聚焦
|
||
- ✅ 需求清晰无歧义
|
||
- ✅ 布局位置明确（图片预览和输入框之间）
|
||
- ✅ 样式规格完整
|
||
- ✅ 代码修改位置明确
|