From eacdcb42a5e0a49aee7b4db87d541f043b8cca10 Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 1 Apr 2026 11:28:27 +0800 Subject: [PATCH] docs: add quick actions bar design spec --- .../2026-04-01-quick-actions-bar-design.md | 207 ++++++++++++++++++ 1 file changed, 207 insertions(+) create mode 100644 docs/superpowers/specs/2026-04-01-quick-actions-bar-design.md diff --git a/docs/superpowers/specs/2026-04-01-quick-actions-bar-design.md b/docs/superpowers/specs/2026-04-01-quick-actions-bar-design.md new file mode 100644 index 0000000..6545b05 --- /dev/null +++ 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 + + + + + + + + + {{ action.label }} + + + + + + + +``` + +#### 脚本修改（在 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 内容 +- ✅ 无内部矛盾 +- ✅ 范围明确且聚焦 +- ✅ 需求清晰无歧义 +- ✅ 布局位置明确（图片预览和输入框之间） +- ✅ 样式规格完整 +- ✅ 代码修改位置明确