From 8a2001af3d38f16704a4360b16588a1731f45138 Mon Sep 17 00:00:00 2001
From: Peanut <peanut_hzm@163.com>
Date: Sun, 19 Jul 2026 21:04:04 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20Chat=20=E8=A7=86=E5=9B=BE=E5=8F=91?=
 =?UTF-8?q?=E9=80=81=E6=8C=89=E9=92=AE=E7=AD=89=E9=AB=98=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...07-19-chat-send-btn-equal-height-design.md | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-07-19-chat-send-btn-equal-height-design.md

diff --git a/docs/superpowers/specs/2026-07-19-chat-send-btn-equal-height-design.md b/docs/superpowers/specs/2026-07-19-chat-send-btn-equal-height-design.md
new file mode 100644
index 0000000..20d4720
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-19-chat-send-btn-equal-height-design.md
@@ -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 无报错
\ No newline at end of file