docs: Chat 视图发送按钮等高修复设计文档

2026-07-19 21:04:04 +08:00
parent 35b4f97527
commit 8a2001af3d
1 changed files with 67 additions and 0 deletions
@@ -0,0 +1,67 @@
+---
+author: AI Assistant
+created_at: 2026-07-19
+purpose: 修复 chat 视图底部发送按钮过高过大、与输入框不等高的问题
+---
+
+# Chat 视图发送按钮等高修复设计
+
+## 概述
+
+chat 视图底部 `.chat-input-bar` 中"发送"按钮（`.chat-send-btn`）的 `padding: 16rpx 32rpx` 撑大了按钮高度，与文本输入框 `.result-chat-input`（`min-height: 60rpx`）不等高，视觉上按钮比输入框大。
+
+## 问题
+
+- `.chat-send-btn { padding: 16rpx 32rpx; }` — 上下各 16rpx padding 撑大按钮
+- `.result-chat-input { min-height: 60rpx; }` — 输入框有 min-height，但实际渲染高度随内容变化
+- `.chat-input-bar { align-items: flex-end; }` — 底部对齐进一步放大不等高视觉差异
+
+## 修复方案
+
+### 改动文件
+
+- `mini-program/src/pages/main/ScriptView.vue`（样式部分）
+
+### 改动 1：`.chat-send-btn` 改 padding + 设 height
+
+```css
+.chat-send-btn {
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 32rpx;
+  background: #087e8b;
+  border-radius: 32rpx;
+  color: #ffffff;
+  font-size: 28rpx;
+}
+```
+
+**关键变化**：
+- 新增 `height: 60rpx`：与 `.result-chat-input` 的 `min-height: 60rpx` 保持一致
+- `padding: 16rpx 32rpx` → `padding: 0 32rpx`：去掉上下 padding，靠 height+flex 居中文字
+- 新增 `display: flex; align-items: center; justify-content: center;`：文字垂直居中
+
+### 改动 2：`.chat-input-bar` 改 `align-items`
+
+```css
+.chat-input-bar {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  padding: 16rpx 24rpx;
+  background: rgba(255, 255, 255, 0.04);
+  border-top: 2rpx solid rgba(255, 255, 255, 0.1);
+}
+```
+
+**关键变化**：
+- `align-items: flex-end` → `align-items: center`：按钮和输入框垂直居中对齐
+
+## 验收标准
+
+- [ ] 发送按钮与文本输入框等高
+- [ ] 按钮文字垂直居中
+- [ ] mp-weixin 编译通过
+- [ ] H5 浏览器 Console 无报错