# 快捷对话按钮栏设计文档

**日期**: 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 内容
- ✅ 无内部矛盾
- ✅ 范围明确且聚焦
- ✅ 需求清晰无歧义
- ✅ 布局位置明确（图片预览和输入框之间）
- ✅ 样式规格完整
- ✅ 代码修改位置明确