From 8e48d0b1b20e66a08720cea8bf9de24fea920692 Mon Sep 17 00:00:00 2001 From: laoyang Date: Thu, 5 Nov 2026 18:35:50 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E3=80=8C=E6=9B=B4=E5=A4=9A?= =?UTF-8?q?=E4=BF=A1=E6=81=AF=E3=80=8D=E5=90=84=E8=A1=8C=E7=9A=84=E6=8E=A7?= =?UTF-8?q?=E4=BB=B6=E5=AE=BD=E5=BA=A6=EF=BC=8C=E4=BF=AE=E6=A0=87=E9=A2=98?= =?UTF-8?q?/=E5=A4=87=E6=B3=A8=E4=B8=8D=E5=AF=B9=E9=BD=90=20(#80)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户 2026-11-05：「标题和备注的输入框没有和其他输入框对齐。」 根因：各行的宽度上限**不一致**，而标题/备注压根没设上限 —— · 截止（AntD picker） max-width: 300px · 分类（select） max-width: 300px · 负责人/协作人 max-width: 340px ← 比别的宽 40px · **标题（input）/ 备注（textarea）无上限** ⇒ 撑满整行 于是标题那行比截止那行宽出一截，左右边缘都对不齐。 改法：收敛成一个变量 --tk-attr-w: 300px，所有行共用。 · 同时给 width:100% + max-width：只给 max-width 时块级 input 默认 width:auto 会按内容收缩，反而比别的行窄。 · 去掉 pp-root 那个独立的 340px。 🔴 还修了一个更隐蔽的：`.tk-attr-row` 原本有 `flex-wrap: wrap`。 窄屏（容器 340px，控件 300px + 标签 46px + gap 10px = 356px）放不下 ⇒ 控件**掉到下一行**，左缘从 76 变成 0，整列看着像塌了。 用 Playwright 量出来才发现的（宽屏下完全正常，很容易漏）。 ⇒ 不换行，让控件按 flex:1 1 auto + min-width:0 收缩。 实测（Playwright 量 getBoundingClientRect）： 宽屏 900px：五行的控件左缘全是 76、宽 300、右缘 376 ✅ 保存按钮左缘 76 ✅（与控件对齐） 窄屏 380px：五行左缘全是 76、宽 284（自动收缩）、右缘 360 ✅ 没有换行 ✅ --- assets/css/app.css | 44 ++++++++++++++++++++++++++++++++++++-------- 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/assets/css/app.css b/assets/css/app.css index 8848d3c..a884e0f 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -6937,16 +6937,46 @@ h6.md-h { font-size: 17px; color: var(--muted); } （但标签用 tk-attr-lb，因为面板里字号比整页表单小一号）。 */ .tk-attrs { display: flex; flex-direction: column; gap: 10px; } .tk-attr-row { - display: flex; align-items: center; gap: 10px; flex-wrap: wrap; + display: flex; align-items: center; gap: 10px; + /* 🔴 #80：这里原来有 `flex-wrap: wrap` —— 窄屏下控件（300px）加标签（46px） + 加间距（10px）放不进容器，控件就**掉到下一行**，左缘从 76 变成 0， + 与标签右缘完全错开，整列看着像塌了。 + ⇒ 不换行：让控件按 `flex:1 1 auto` + `min-width:0` 收缩到可用宽度。 + 宽度不足时宁可控件变窄，也不要换行破坏对齐。 + ⚠️ 代价：极窄屏（< 200px）下控件会很窄 —— 但那时任何布局都放不下， + 保持对齐比保持宽度更重要。 */ } .tk-attr-lb { flex: 0 0 46px; font-size: 12.5px; color: var(--faint); text-align: right; } /* 控件区占满标签右侧（min-width:0 让它能被压缩，不会把标签挤出去） */ .tk-attr-row > *:not(.tk-attr-lb) { flex: 1 1 auto; min-width: 0; } -/* AntD 的 picker 本身有固定宽度，别让它撑满整行 */ -.tk-attr-row > .dt-input { max-width: 300px; } -.tk-attr-row > select.select { max-width: 300px; } + +/* 🔴 #80（用户 2026-11-05）：「标题和备注的输入框没有和其他输入框对齐。」 + + 根因：各行的**宽度上限不一致** —— + · 截止（AntD picker） max-width: 300px + · 分类（select） max-width: 300px + · 负责人/协作人 max-width: 340px + · **标题（input）/ 备注（textarea）完全没设上限** ⇒ 撑满整行 + 于是标题那行比截止那行宽出一截，左右边缘都对不齐。 + + ⇒ 统一成一个宽度变量。以后要调只改这一处，不会再有"某一行多一点"。 + + ⚠️ `width: 100%` + `max-width` 而不是只给 `max-width`： + 只给 max-width 时，块级 input 默认 width:auto 会按内容收缩， + 反而比别的行窄。两个一起给才能"最多这么宽、但尽量占满"。 + ⚠️ 标签宽度（46px）+ gap（10px）= 56px，这与 `.tk-attr-actions` 的 + `padding-left: 56px` 是同一个数 —— 改标签宽度时必须同步改那两处。 */ +:root { --tk-attr-w: 300px; } +.tk-attr-row > .dt-input { width: 100%; max-width: var(--tk-attr-w); } +.tk-attr-row > select.select { width: 100%; max-width: var(--tk-attr-w); } +.tk-attr-row > .pp-root { width: 100%; max-width: var(--tk-attr-w); } +/* 标题 / 备注：与上面同宽 */ +.tk-attr-row > input.input, +.tk-attr-row > textarea.input { width: 100%; max-width: var(--tk-attr-w); } +/* textarea 按行数撑高，别被 `.input` 的固定高度带偏 */ +.tk-attr-row > textarea.input { resize: vertical; min-height: 46px; } /* 保存按钮那一行：与上面的控件左缘对齐（= 46px 标签宽 + 10px gap） */ .tk-attr-actions { display: flex; align-items: center; gap: 10px; @@ -6955,10 +6985,8 @@ h6.md-h { font-size: 17px; color: var(--muted); } .tk-attr-tip { font-size: 12px; color: var(--green, #2E7D4F); } /* #78：面板里的选人组件（负责人单选 / 协作人多选）。 - 组件本身按"整页宽"设计，塞进 .tk-attr-row 的弹性项里要收一下： - - 不加 min-width:0 的话，chips 一多会把标签挤到上一行； - - max-width 与其它控件对齐（300px），别让它撑满整行。 */ -.tk-attr-row > .pp-root { flex: 1 1 auto; min-width: 0; max-width: 340px; } + 宽度已在上面的 `--tk-attr-w` 统一，这里只管 chips 的间距。 + （原来这里单独写 max-width: 340px，比其他行宽 40px —— 正是 #80 对不齐的原因之一。） */ .tk-attr-row > .pp-root .pp-chips { margin-bottom: 6px; } /* 标签在多行控件（备注、协作人）上方对齐，而不是垂直居中 */ .tk-attr-row-top { align-items: flex-start; }