docs: add quick actions bar design spec

2026-04-01 11:28:27 +08:00 · 2026-04-01 11:28:27 +08:00 · eacdcb42a5
commit eacdcb42a5
parent aebf40b7e7
1 changed files with 207 additions and 0 deletions
--- a/docs/superpowers/specs/2026-04-01-quick-actions-bar-design.md
+++ b/docs/superpowers/specs/2026-04-01-quick-actions-bar-design.md
@ -0,0 +1,207 @@
+# 快捷对话按钮栏设计文档
+
+**日期**: 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 内容
+- ✅ 无内部矛盾
+- ✅ 范围明确且聚焦
+- ✅ 需求清晰无歧义
+- ✅ 布局位置明确（图片预览和输入框之间）
+- ✅ 样式规格完整
+- ✅ 代码修改位置明确