diff --git a/docs/superpowers/plans/2026-04-01-quick-actions-bar.md b/docs/superpowers/plans/2026-04-01-quick-actions-bar.md
new file mode 100644
index 0000000..c73b1ef
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-01-quick-actions-bar.md
@@ -0,0 +1,490 @@
+# 快捷对话按钮栏实施计划
+
+> **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）通过，功能完全符合设计文档要求。