fix: 输入框与旁边的按钮行高度对不齐

<textarea class="q-input"> 没设 rows 属性,浏览器按默认 2 行的最小
内容高度处理,字体度量四舍五入后比显式 height:96px 略高几像素,
把整个输入框撑高,导致跟同高度的语音/拍照按钮顶边对不齐(底边因为
input-bar 是 align-items:flex-end 对齐所以没发现,只有顶边露馅)。
加 rows="1" 让最小内容高度不再跟显式高度打架,同时加 min-height:0
防御 UA 默认样式。

用像素网格量过真机截图确认:这是 textarea 本来就有的问题,不是这次
加拍照按钮引入的,只是三个按钮排一起后更显眼。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ssurui 2026-09-03 15:14:04 +08:00
parent ec634c4133
commit a78c88c86a

View File

@ -677,6 +677,7 @@ onUnmounted(() => {
<textarea <textarea
v-model="question" v-model="question"
class="q-input" class="q-input"
rows="1"
:disabled="batchRunning" :disabled="batchRunning"
:placeholder="pendingImage ? '针对这张照片提问,留空则默认描述图片…' : '输入问题,Enter 发送,Shift+Enter 换行…'" :placeholder="pendingImage ? '针对这张照片提问,留空则默认描述图片…' : '输入问题,Enter 发送,Shift+Enter 换行…'"
@keydown="handleEnter" @keydown="handleEnter"
@ -868,7 +869,7 @@ onUnmounted(() => {
.q-input { .q-input {
width: 100%; box-sizing: border-box; width: 100%; box-sizing: border-box;
height: 96px; height: 96px; min-height: 0;
border: 2px solid var(--line-2); border-radius: var(--radius); border: 2px solid var(--line-2); border-radius: var(--radius);
padding: 16px 20px; font-family: inherit; padding: 16px 20px; font-family: inherit;
font-size: 20px; line-height: 1.5; resize: none; font-size: 20px; line-height: 1.5; resize: none;