pay/pay-customer
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
pay-customer/docs/superpowers/plans/2026-04-01-quick-actions-bar.md

12 KiB
Raw Blame History

快捷对话按钮栏实施计划

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 行），在其后面添加：

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

完整上下文应该是：

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 行），在其后添加：

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

完整上下文应该是：

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

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

在终端运行编译检查：

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

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

  • Step 4: 提交
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 行），在其后添加新方法：

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

完整上下文应该是：

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: 验证代码

在终端运行编译检查：

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

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

  • Step 3: 提交
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 行）插入以下代码：

    <!-- 快捷按钮栏 -->
    <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 内部。完整的上下文应该是：

      </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: 验证代码

在终端运行编译检查：

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

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

  • Step 3: 提交
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 行）添加以下样式：

.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 样式之前）。完整上下文应该是：

.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: 验证代码

在终端运行编译检查：

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

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

  • Step 3: 提交
git add src/pages/ai/chat.vue
git commit -m "feat: add quick actions bar styles"

Task 5: 手动测试功能

Files:

  • Test: 手动测试所有功能点

  • Step 1: 启动开发服务器

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: 检查所有代码已提交

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

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

  • Step 2: 查看提交历史
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: 如果有任何未提交的更改，提交它们
git add -A
git commit -m "feat: complete quick actions bar implementation"
  • Step 4: 推送到远程仓库（如果需要）
git push origin develop

实施完成检查清单

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

测试完成标准

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