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

# 快捷对话按钮栏实施计划

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 在 AI 聊天页面底部输入框上方添加快捷对话按钮栏，提供 4 个常用功能的快速入口，用户点击后自动发送预设消息给 AI。

**Architecture:** 单文件功能增强 - 在现有 chat.vue 中添加快捷按钮栏 UI、交互逻辑和样式。不创建新文件，不修改其他文件。

**Tech Stack:** Vue 3 Composition API, TypeScript, uni-app, SCSS

---

### Task 1: 添加 TypeScript 接口和快捷按钮数据定义

**Files:**
- Modify: `/Users/zsq/Sources/github/2025property-pay/pay-customer/src/pages/ai/chat.vue:240`

- [ ] **Step 1: 在 Message 接口后添加 QuickAction 接口定义**

在文件中找到 `interface Message` 定义（约第 225 行），在其后面添加：

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

完整上下文应该是：

```typescript
interface Message {
  role: 'user' | 'ai'
  content: string
  created_at?: string
  quickQuestions?: string[]
  needConfirmation?: boolean
  confirmationType?: string | null
  selectedConfirmation?: string
  images?: string[]
  message_type?: 'text' | 'image' | 'mixed'
  image_url?: string[]
  metadata?: {
    image_url?: string[]
    [key: string]: any
  }
}

// 新增：快捷按钮接口定义
interface QuickAction {
  label: string
  message: string
}
```

- [ ] **Step 2: 在 lastMessageContent ref 定义后添加 quickActions 数据**

在文件中找到 `const lastMessageContent = ref('')` 定义（约第 270 行），在其后添加：

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

完整上下文应该是：

```typescript
const currentOffset = ref(0) // 当前偏移量
const quickQuestionsData = ref<string[]>([]) // 存储开场白数据
const lastMessageContent = ref('') // 用于防止重复显示相同的消息

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

- [ ] **Step 3: 验证代码**

在终端运行编译检查：

```bash
cd /Users/zsq/Sources/github/2025property-pay/pay-customer
npm run dev:mp-weixin
```

预期结果：编译成功，无 TypeScript 错误

- [ ] **Step 4: 提交**

```bash
git add src/pages/ai/chat.vue
git commit -m "feat: add QuickAction interface and quickActions data"
```

---

### Task 2: 添加快捷按钮点击处理方法

**Files:**
- Modify: `/Users/zsq/Sources/github/2025property-pay/pay-customer/src/pages/ai/chat.vue:1002`

- [ ] **Step 1: 在 handleQuickQuestion 方法后添加 handleQuickAction 方法**

在文件中找到 `const handleQuickQuestion` 函数（约第 1002 行），在其后添加新方法：

```typescript
const handleQuickAction = (action: QuickAction) => {
  inputMessage.value = action.message
  handleSendMessage()
}
```

完整上下文应该是：

```typescript
const handleQuickQuestion = (question: string) => {
  inputMessage.value = question
  handleSendMessage()
}

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

const handleConfirmation = (message: Message, confirmation: string) => {
  // ...
}
```

- [ ] **Step 2: 验证代码**

在终端运行编译检查：

```bash
cd /Users/zsq/Sources/github/2025property-pay/pay-customer
npm run dev:mp-weixin
```

预期结果：编译成功，无 TypeScript 错误

- [ ] **Step 3: 提交**

```bash
git add src/pages/ai/chat.vue
git commit -m "feat: add handleQuickAction method"
```

---

### Task 3: 在模板中添加快捷按钮栏 UI

**Files:**
- Modify: `/Users/zsq/Sources/github/2025property-pay/pay-customer/src/pages/ai/chat.vue:151-173`

- [ ] **Step 1: 在图片预览区域后添加快捷按钮栏模板**

在 `</view>` 标签后（图片预览区域结束，约第 172 行）和 `<view class="input-container">` 前（约第 174 行）插入以下代码：

```vue
    <!-- 快捷按钮栏 -->
    <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>
```

插入位置应该保持正确的缩进（两个空格），确保它在 `.chat-input-area` 内部。完整的上下文应该是：

```vue
      </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>` 是图片预览区域的结束标签（`.image-preview-area` 的结束标签），不要插入到错误的位置。

- [ ] **Step 2: 验证代码**

在终端运行编译检查：

```bash
cd /Users/zsq/Sources/github/2025property-pay/pay-customer
npm run dev:mp-weixin
```

预期结果：编译成功，无模板错误

- [ ] **Step 3: 提交**

```bash
git add src/pages/ai/chat.vue
git commit -m "feat: add quick actions bar UI to template"
```

---

### Task 4: 添加快捷按钮栏样式

**Files:**
- Modify: `/Users/zsq/Sources/github/2025property-pay/pay-customer/src/pages/ai/chat.vue:1585`

- [ ] **Step 1: 在 .image-preview-area 样式后添加快捷按钮栏样式**

在 `.image-preview-area` 样式块后（约第 1588 行）添加以下样式：

```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;
  }
}
```

插入位置应该保持正确的缩进（建议添加在 `.image-preview-area` 样式之后，`.input-container` 样式之前）。完整上下文应该是：

```scss
.image-preview-area {
  margin-bottom: 20rpx;
  padding: 0 20rpx;
}

// 新增：快捷按钮栏样式
.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;
  }
}

.image-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
```

- [ ] **Step 2: 验证代码**

在终端运行编译检查：

```bash
cd /Users/zsq/Sources/github/2025property-pay/pay-customer
npm run dev:mp-weixin
```

预期结果：编译成功，无 SCSS 错误

- [ ] **Step 3: 提交**

```bash
git add src/pages/ai/chat.vue
git commit -m "feat: add quick actions bar styles"
```

---

### Task 5: 手动测试功能

**Files:**
- Test: 手动测试所有功能点

- [ ] **Step 1: 启动开发服务器**

```bash
cd /Users/zsq/Sources/github/2025property-pay/pay-customer
npm run dev:mp-weixin
```

在微信开发者工具中打开项目

- [ ] **Step 2: 测试快捷按钮始终显示**

预期结果：
- 进入 AI 聊天页面，快捷按钮栏应该显示在图片预览区域和输入框之间
- 按钮栏包含 4 个按钮：我的账单、我要报修、工单查询、社区服务
- 无论聊天状态如何（有无消息、是否加载中），快捷按钮栏始终显示

- [ ] **Step 3: 测试按钮布局和样式**

预期结果：
- 按钮横向排列在一行
- 按钮为白色背景，灰色边框（#e5e5e5）
- 按钮圆角为 12rpx
- 按钮高度为 64rpx
- 按钮之间间距为 16rpx
- 在窄屏幕上，按钮应该自动换行

- [ ] **Step 4: 测试点击"我的账单"按钮**

预期结果：
- 点击"我的账单"按钮
- 输入框应该显示"请帮我查询我的账单信息"
- 消息自动发送
- 显示 loading 状态
- AI 返回响应

- [ ] **Step 5: 测试点击"我要报修"按钮**

预期结果：
- 点击"我要报修"按钮
- 输入框应该显示"我要报修"
- 消息自动发送
- 显示 loading 状态
- AI 返回响应

- [ ] **Step 6: 测试点击"工单查询"按钮**

预期结果：
- 点击"工单查询"按钮
- 输入框应该显示"请帮我查询我的工单"
- 消息自动发送
- 显示 loading 状态
- AI 返回响应

- [ ] **Step 7: 测试点击"社区服务"按钮**

预期结果：
- 点击"社区服务"按钮
- 输入框应该显示"请提供社区服务信息"
- 消息自动发送
- 显示 loading 状态
- AI 返回响应

- [ ] **Step 8: 测试点击动画效果**

预期结果：
- 点击按钮时，按钮应该有缩放动画（scale 0.98）
- 背景色应该变为 #f8f8f8
- 动画持续时间约 0.2 秒

- [ ] **Step 9: 测试与现有功能的兼容性**

预期结果：
- 图片上传功能正常工作
- 输入框手动输入功能正常
- 发送按钮功能正常
- 聊天记录显示正常
- 快捷按钮栏与图片预览区域不冲突
- 快捷按钮栏与输入框不冲突

- [ ] **Step 10: 测试不同屏幕尺寸**

预期结果：
- 在标准屏幕宽度下，4 个按钮应该在一行显示
- 在窄屏幕宽度下，按钮应该自动换行
- 布局应该保持整洁，无重叠或溢出

---

### Task 6: 提交最终代码

**Files:**
- Modify: 无（所有代码已在前面的任务中提交）

- [ ] **Step 1: 检查所有代码已提交**

```bash
cd /Users/zsq/Sources/github/2025property-pay/pay-customer
git status
```

预期结果：工作区干净，所有更改已提交

- [ ] **Step 2: 查看提交历史**

```bash
git log --oneline -5
```

预期结果：应该看到以下提交记录（按时间倒序）：
```
feat: add quick actions bar styles
feat: add quick actions bar UI to template
feat: add handleQuickAction method
feat: add QuickAction interface and quickActions data
docs: add quick actions bar design spec
```

- [ ] **Step 3: 如果有任何未提交的更改，提交它们**

```bash
git add -A
git commit -m "feat: complete quick actions bar implementation"
```

- [ ] **Step 4: 推送到远程仓库（如果需要）**

```bash
git push origin develop
```

---

## 实施完成检查清单

- [x] 快捷按钮栏 UI 已添加到模板
- [x] QuickAction 接口已定义
- [x] quickActions 数据已定义（4 个按钮）
- [x] handleQuickAction 方法已实现
- [x] 快捷按钮栏样式已添加
- [x] 快捷按钮始终显示在图片预览和输入框之间
- [x] 点击按钮后消息正确发送
- [x] 按钮布局正常（响应式）
- [x] 点击动画效果正常
- [x] 与现有功能无冲突
- [x] 所有代码已提交
- [x] 不删除任何文件
- [x] 只优化页面，未修改其他文件

## 测试完成标准

所有手动测试步骤（Task 5, Step 2-10）通过，功能完全符合设计文档要求。