laoyang/FamilyBook
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects Releases Wiki Activity

网页端任务面板按鸿蒙版结构重排 + 输入框占满整行 (#82)

Browse Source 
用户 2026-11-05：「网页版编辑在首页编辑任务的时候，那个输入框怎么那么短呢？
所有输入框都应该跟弹出框一样宽。它里面的信息应该和鸿蒙版一样：
1.标题是"编辑任务" 2.下面分成两行：第一行是任务标题，第二行是状态
3.后续内容也和鸿蒙版保持一致，不需要额外信息。
布局顺序也和鸿蒙版一致：1.任务标题 2.状态 3.看板
4.截止日期、负责人、备注、协作人 5.子任务，一直到子任务都和鸿蒙版一致。
颜色也是用主题颜色。」

① 输入框为什么那么短 —— 是我上一轮修"对齐"时引入的
   #80 给每行加了 `max-width: var(--tk-attr-w)`（300px），
   目的是让各个控件右缘对齐。但代价是：面板 680 宽、控件只有 300，
   右边空着 300 多像素，看起来像没做完。
   ⇒ 改成上下两行之后，**每行只有一个控件、天然左缘对齐**，
     不再需要靠限宽来对齐 ⇒ 全面 `width: 100%; max-width: none`。
   实测（Playwright 量 getBoundingClientRect）：
     五行控件宽全部 648 / 行宽 648 = **100%** ✅

② 排列改成上下两行
   `.tk-attr-row` 从 `flex-direction: row` 改成 `column`：
     ① 标签独占一行（主题色 + 加粗 + 字距 .6，与鸿蒙 fieldLb 同一口径）
     ② 控件独占一行
   顺带 `.tk-sec-inline`（状态/看板那两段）也改成纵向，
   与字段行同形态 —— 否则这里横着、那里竖着，看着像两套东西。

③ 顺序按鸿蒙版重排
   改前：状态 → 看板 → 更多信息{标题/截止/负责人/协作人/分类/备注}
   改后：任务标题 → 状态 → 看板 → 截止 → 负责人 → 备注 → 协作人 → 子任务 → 附件 → 讨论
   标题从「更多信息」里提出来，单独做第一个小节。

④ 去掉"额外信息"：分类、循环
   用户明确说「不需要额外信息」，鸿蒙端面板里也没有这两项。
   ⚠️ 安全性确认：`tasks/panel_save` 用 `array_key_exists` 判"传没传"，
      收不到 category_id 就**保留原值**，所以删掉字段不会把分类清空
      （这条在 #76 就是按这个原则写的）。

⑤ 颜色：小节标题 + 字段标签都用主题色
   `.tk-sec-h`（附件/讨论/子任务）从 var(--ink) 改 var(--tk-accent, var(--brand))，
   `.tk-attr-lb` 从 faint 灰改主题色 + 700 粗体。

⑥ 只读态也做成"框"
   新增 `.tk-attr-val`：浅底 + 圆角 + min-height 40，
   与可编辑态同宽同高。原来只读用户看到的是一行裸文字，
   和编辑态差太多（同一位置两种长相）。

实测渲染（family 1 最新任务）：
  字段标签顺序：任务标题 → 截止 → 负责人 → 备注 → 协作人 ✅
  横排段顺序：状态 → 看板 ✅
  分类 / 循环：已删 ✅
This commit is contained in:
laoyang
2026-11-05 20:09:02 +08:00
parent 33940fa730
commit 4d04490f7f
2 changed files with 84 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+49 -10
View File
@@ -6914,7 +6914,10 @@ h6.md-h { font-size: 17px; color: var(--muted); }
.tk-sec + .tk-sec { border-top: 1px solid var(--line-2); padding-top: 14px; }
.tk-sec-h {
display: flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; color: var(--ink);
/* #82：小节标题改 **模块主题色 + 加粗 + 字距** ——
与鸿蒙端 FbSectionTitle 一致（用户：「颜色也是用主题颜色」）。 */
font-size: 13px; font-weight: 700; letter-spacing: .6px;
color: var(--tk-accent, var(--brand));
}
.tk-sec-h .group-n { margin-left: 0; }
/* 「状态」「看板」这两段是"标签 + 一排可点的东西"，横排。
@@ -6935,9 +6938,22 @@ h6.md-h { font-size: 17px; color: var(--muted); }
用户 2026-11-05：「没有保存按钮…负责人和分类都没法修改。」
每行结构 = 固定宽标签 + 占满剩余宽度的控件，与 .mv-row 同一套观感
（但标签用 tk-attr-lb，因为面板里字号比整页表单小一号）。 */
.tk-attrs { display: flex; flex-direction: column; gap: 10px; }
.tk-attrs { display: flex; flex-direction: column; gap: 14px; }
/* 🔴🔴 #82（用户 2026-11-05）：「网页版编辑在首页编辑任务的时候，那个输入框
怎么那么短呢？所有输入框都应该跟弹出框一样宽。」
「布局顺序也和鸿蒙版一致」「下面分成两行：第一行是任务标题，第二行是状态」
⇒ `.tk-attr-row` 从**横向**（标签左 / 控件右）改成**纵向两行**：
① 标签独占一行（主题色粗体）
② 控件独占一行，**占满整行宽度**（不再有 300px 上限）
为什么去掉 300px 上限：
那个上限是 #80 为"对齐"引入的，但它的代价是**输入框比面板窄一大截** ——
面板 680 宽，控件只有 300，右边空着 300 多像素，看起来像没做完。
现在改成上下两行之后，每行只有一个控件，天然左缘对齐，
**不再需要靠限宽来对齐** ⇒ 直接 width:100%。 */
.tk-attr-row {
display: flex; align-items: center; gap: 10px;
display: flex; flex-direction: column; align-items: stretch; gap: 6px;
/* 🔴 #80：这里原来有 `flex-wrap: wrap` —— 窄屏下控件（300px）加标签（46px）
加间距（10px）放不进容器，控件就**掉到下一行**，左缘从 76 变成 0，
与标签右缘完全错开，整列看着像塌了。
@@ -6947,7 +6963,12 @@ h6.md-h { font-size: 17px; color: var(--muted); }
保持对齐比保持宽度更重要。 */
}
.tk-attr-lb {
flex: 0 0 46px; font-size: 12.5px; color: var(--faint); text-align: right;
/* #82：标签不再固定 46px（那是横排时的"对齐基准"），
现在独占一行，按内容宽即可；左对齐（横排时是右对齐贴控件）。
颜色从 faint 灰改成 **模块主题色 + 加粗** —— 与鸿蒙端的 fieldLb、
以及本页的小节标题同一口径。 */
font-size: 12.5px; font-weight: 700; letter-spacing: .6px;
color: var(--tk-accent, var(--brand)); text-align: left;
}
/* 控件区占满标签右侧（min-width:0 让它能被压缩，不会把标签挤出去） */
.tk-attr-row > *:not(.tk-attr-lb) { flex: 1 1 auto; min-width: 0; }
@@ -6969,20 +6990,38 @@ h6.md-h { font-size: 17px; color: var(--muted); }
⚠️ 标签宽度（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); }
/* 标题 / 备注：与上面同宽 */
/* #82：所有控件一律占满整行 —— 不再有 `--tk-attr-w` 这个 300px 上限。
上下两行之后每行只有一个控件，宽度不一致反而不协调。 */
.tk-attr-row > .dt-input,
.tk-attr-row > select.select,
.tk-attr-row > .pp-root,
.tk-attr-row > input.input,
.tk-attr-row > textarea.input { width: 100%; max-width: var(--tk-attr-w); }
.tk-attr-row > textarea.input,
.tk-attr-row > .tk-attr-val { width: 100%; max-width: none; }
/* textarea 按行数撑高，别被 `.input` 的固定高度带偏 */
.tk-attr-row > textarea.input { resize: vertical; min-height: 46px; }
/* 保存按钮那一行：与上面的控件左缘对齐（= 46px 标签宽 + 10px gap） */
.tk-attr-actions {
/* #82：取消 padding-left(56px) —— 那是给"横排时对齐控件左缘"用的。
现在控件占满整行，按钮左缘就是容器左缘，再加 56 会缩进去一截。 */
display: flex; align-items: center; gap: 10px;
padding-left: 56px;
}
.tk-attr-tip { font-size: 12px; color: var(--green, #2E7D4F); }
/* #82：只读态的值也做成"框"的样子（浅底圆角），
与可编辑态同宽同高 —— 否则只读用户看到的是一行裸文字，和编辑态差太多。 */
.tk-attr-val {
display: block; min-height: 40px; box-sizing: border-box;
padding: 10px 12px; font-size: 14px; color: var(--ink);
background: var(--input-bg, #F7F4EF);
border-radius: var(--radius-s); word-break: break-word;
}
/* #82：面板里的"点一下就能改"的横排段（状态/看板）改成上下两行：
标签在上、chips 在下，与字段行同形态。 */
.tk-sec-inline { flex-direction: column; align-items: stretch; gap: 6px; }
.tk-sec-inline > .tk-sec-lb {
font-size: 12.5px; font-weight: 700; letter-spacing: .6px;
color: var(--tk-accent, var(--brand));
}
/* #78：面板里的选人组件（负责人单选 / 协作人多选）。
宽度已在上面的 `--tk-attr-w` 统一，这里只管 chips 的间距。