pay-customer/docs/superpowers/specs/2026-04-01-quick-actions-bar-design.md

快捷对话按钮栏设计文档

日期: 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. 数据结构

interface QuickAction {
  label: string    // 按钮显示文字
  message: string  // 点击后发送的消息内容
}

const quickActions: QuickAction[] = [
  { label: '我的账单', message: '请帮我查询我的账单信息' },
  { label: '我要报修', message: '我要报修' },
  { label: '工单查询', message: '请帮我查询我的工单' },
  { label: '社区服务', message: '请提供社区服务信息' }
]

3. 交互逻辑

// 处理快捷按钮点击
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 行之间）

<!-- 图片预览区域 -->
<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 中添加）

// 快捷按钮数据定义
const quickActions: QuickAction[] = [
  { label: '我的账单', message: '请帮我查询我的账单信息' },
  { label: '我要报修', message: '我要报修' },
  { label: '工单查询', message: '请帮我查询我的工单' },
  { label: '社区服务', message: '请提供社区服务信息' }
]

// 处理快捷按钮点击
const handleQuickAction = (action: QuickAction) => {
  inputMessage.value = action.message
  handleSendMessage()
}

样式修改（在 style 中添加）

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