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