统一「更多信息」各行的控件宽度,修标题/备注不对齐 (#80)

用户 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 ✅
             没有换行 ✅
This commit is contained in:
2026-11-05 18:35:50 +08:00
parent cb846d378f
commit 8e48d0b1b2
+36 -8
View File
@@ -6937,16 +6937,46 @@ h6.md-h { font-size: 17px; color: var(--muted); }
(但标签用 tk-attr-lb,因为面板里字号比整页表单小一号)。 */ (但标签用 tk-attr-lb,因为面板里字号比整页表单小一号)。 */
.tk-attrs { display: flex; flex-direction: column; gap: 10px; } .tk-attrs { display: flex; flex-direction: column; gap: 10px; }
.tk-attr-row { .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 { .tk-attr-lb {
flex: 0 0 46px; font-size: 12.5px; color: var(--faint); text-align: right; flex: 0 0 46px; font-size: 12.5px; color: var(--faint); text-align: right;
} }
/* 控件区占满标签右侧(min-width:0 让它能被压缩,不会把标签挤出去) */ /* 控件区占满标签右侧(min-width:0 让它能被压缩,不会把标签挤出去) */
.tk-attr-row > *:not(.tk-attr-lb) { flex: 1 1 auto; 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; } /* 🔴 #80(用户 2026-11-05):「标题和备注的输入框没有和其他输入框对齐。」
.tk-attr-row > select.select { max-width: 300px; }
根因:各行的**宽度上限不一致** ——
· 截止(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) */ /* 保存按钮那一行:与上面的控件左缘对齐(= 46px 标签宽 + 10px gap) */
.tk-attr-actions { .tk-attr-actions {
display: flex; align-items: center; gap: 10px; 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); } .tk-attr-tip { font-size: 12px; color: var(--green, #2E7D4F); }
/* #78:面板里的选人组件(负责人单选 / 协作人多选)。 /* #78:面板里的选人组件(负责人单选 / 协作人多选)。
组件本身按"整页宽"设计,塞进 .tk-attr-row 的弹性项里要收一下: 宽度已在上面的 `--tk-attr-w` 统一,这里只管 chips 的间距。
- 不加 min-width:0 的话,chips 一多会把标签挤到上一行; (原来这里单独写 max-width: 340px,比其他行宽 40px —— 正是 #80 对不齐的原因之一。) */
- max-width 与其它控件对齐(300px),别让它撑满整行。 */
.tk-attr-row > .pp-root { flex: 1 1 auto; min-width: 0; max-width: 340px; }
.tk-attr-row > .pp-root .pp-chips { margin-bottom: 6px; } .tk-attr-row > .pp-root .pp-chips { margin-bottom: 6px; }
/* 标签在多行控件(备注、协作人)上方对齐,而不是垂直居中 */ /* 标签在多行控件(备注、协作人)上方对齐,而不是垂直居中 */
.tk-attr-row-top { align-items: flex-start; } .tk-attr-row-top { align-items: flex-start; }