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

用户 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:
2026-11-05 20:09:02 +08:00
parent 33940fa730
commit 4d04490f7f
2 changed files with 84 additions and 95 deletions
+35 -85
View File
@@ -90,6 +90,22 @@ $tpLate = $tpDue !== '' && $tpStatus !== 'done' && \App\Task::isOverdue($tpD
从这里取一份 —— 两处同一个值,`csrf_token()` 天然幂等。 */ ?>
<input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>" data-tk-csrf>
<?php /* ---- 任务标题 ---- */ ?>
<div class="tk-sec">
<div class="tk-attrs">
<div class="tk-attr-row">
<span class="tk-attr-lb">任务标题</span>
<?php if ($tpCan): ?>
<input class="input" id="tkp-title" name="title" maxlength="200"
value="<?= e((string)($tpT['title'] ?? '')) ?>">
<?php else: ?>
<span class="tk-attr-val"><?= e((string)($tpT['title'] ?? '')) ?></span>
<?php endif; ?>
</div>
</div>
</div>
<?php /* ---- 状态:三段平铺,点一下就改(不是下拉 —— 手机上少一次展开) ---- */ ?>
<div class="tk-sec tk-sec-inline">
<span class="tk-sec-lb">状态</span>
@@ -133,44 +149,19 @@ $tpLate = $tpDue !== '' && $tpStatus !== 'done' && \App\Task::isOverdue($tpD
</div>
<?php endif; ?>
<?php /* ---- 更多信息:截止 / 负责人 / 分类 ---- 可编辑 + 保存(#76) ----
<?php /* ---- 更多信息:截止 / 负责人 / 备注 / 协作人 ----
🔴🔴 #82(用户 2026-11-05):「后续内容也和鸿蒙版保持一致,不需要额外信息。
布局顺序也和鸿蒙版一致:1.任务标题 2.状态 3.看板
4.截止日期、负责人、备注、协作人 5.子任务」
🔴 用户 2026-11-05:「时间控件是对的,但是现在没有保存按钮,只有下面一个
评论的发表按钮。另外,负责人和分类都没法修改,按道理讲都应该可以修改才对。」
改之前的状态:
· 截止:上一版做成"选完立即保存",用户不认可 —— 他要显式保存按钮;
· 负责人 / 分类:**只读的 `dl.kv` 行**,而且值为空时整行都不渲染
(`if (!empty($tpT['assignee_name']))` / `if ($tpCatName !== '')`)
⇒ 用户不仅改不了,连"这一项存在"都看不出来。
⇒ 三项合成一个带「保存」的小节:先改完,点一次提交。
`Task::setAttrs()` 只写这三列,不碰 title/note/status(见那里的说明)。
⚠️ 负责人用原生 `<select>` 而不是 `_person_picker.php` 的弹窗选人:
面板本身已在浮层里,再弹一层模态 = 两层遮罩,手机上很容易点错;
而且 picker 需要 `fbInitPickers()` 初始化,`loadPanel()` 目前没调它。
家庭成员通常 3~10 人,select 够用。**人多了再换弹窗**,那时记得
把 `fbInitPickers` 也补进 `loadPanel()`。 */ ?>
⇒ 去掉「分类」和「循环」两条 —— 它们属于用户说的"额外信息"
(分类是标签、循环是只读事实,鸿蒙端面板里也没有)。
⇒ 顺序改成 截止 → 负责人 → 备注 → 协作人(与鸿蒙端逐项对齐)。
⚠️ 服务端 `tasks/panel_save` 收不到 category_id 时会**保留原值**
(`array_key_exists` 判"传没传"),所以删掉这个字段不会清空分类。 */ ?>
<div class="tk-sec">
<div class="tk-sec-h">更多信息</div>
<div class="tk-attrs">
<?php /* 🔴 #78(用户 2026-11-05):「现在在首页上点一个任务,直接就是编辑页面啊。
所以不需要再加一个编辑按钮了。」
⇒ 既然要删掉右下角的「编辑」按钮,标题和备注就必须能在这里改 ——
原来它俩只在 `_edit_form.php` 里,面板做不了。 */ ?>
<div class="tk-attr-row">
<span class="tk-attr-lb">标题</span>
<?php if ($tpCan): ?>
<input class="input" id="tkp-title" name="title" maxlength="200"
value="<?= e((string)($tpT['title'] ?? '')) ?>">
<?php else: ?>
<span><?= e((string)($tpT['title'] ?? '')) ?></span>
<?php endif; ?>
</div>
<div class="tk-attr-row">
<span class="tk-attr-lb">截止</span>
<?php if ($tpCan): ?>
@@ -192,14 +183,6 @@ $tpLate = $tpDue !== '' && $tpStatus !== 'done' && \App\Task::isOverdue($tpD
<?php endif; ?>
</div>
<?php /* 负责人:**弹窗选人**(#78)。
🔴 用户 2026-11-05:「选人的时候不能按列表,因为人太多了。
你参考一下观影模式里面选人的方式。」
⇒ 换成全站统一的 `_person_picker.php`(弹窗 + 拼音首字母联想),
与新建任务弹框、观影表单同一套。
⚠️ 单选 + `$ppAllowEmpty` ⇒ 弹窗里带「不指定」(值 0)。
⚠️ 它在 AJAX 面板里需要 `fbInitPickers()` 初始化 ——
`entry_popup.js` 的 `loadPanel()` 已补(见那边注释)。 */ ?>
<div class="tk-attr-row">
<span class="tk-attr-lb">负责人</span>
<?php if ($tpCan): ?>
@@ -222,14 +205,17 @@ $tpLate = $tpDue !== '' && $tpStatus !== 'done' && \App\Task::isOverdue($tpD
<?php endif; ?>
</div>
<?php /* 协作人 / 共享给(#78)。
🔴 用户:「我记得任务其实可以共享给别人,也就是协作人。
但现在怎么感觉编辑这里面没有这个选项呢?」
<div class="tk-attr-row tk-attr-row-top">
<span class="tk-attr-lb">备注</span>
<?php if ($tpCan): ?>
<textarea class="input" id="tkp-note" name="note" rows="2"
placeholder="补充说明…"><?= e((string)($tpT['note'] ?? '')) ?></textarea>
<?php else: ?>
<span><?= trim((string)($tpT['note'] ?? '')) !== ''
? nl2br(e((string)$tpT['note'])) : '无' ?></span>
<?php endif; ?>
</div>
⇒ 数据层早就支持(`task_shares` 表 + Task::share/unshare +
`_add_modal.php` 的新建弹框都有),只有**编辑表单和面板漏了入口**。
这里补上:多选弹窗 + 当前协作人 chips。
⚠️ 候选里去掉自己 —— 「共享给自己」是空操作(与新建弹框同一口径)。 */ ?>
<div class="tk-attr-row tk-attr-row-top">
<span class="tk-attr-lb">协作人</span>
<?php if ($tpCan): ?>
@@ -257,35 +243,6 @@ $tpLate = $tpDue !== '' && $tpStatus !== 'done' && \App\Task::isOverdue($tpD
<?php endif; ?>
</div>
<div class="tk-attr-row">
<span class="tk-attr-lb">分类</span>
<?php if ($tpCan): ?>
<select class="select" name="category_id" id="tkp-category">
<option value="0">未分类</option>
<?php foreach ($tpCats as $tpC): ?>
<?php $tpCid = (int)($tpC['id'] ?? 0); ?>
<option value="<?= $tpCid ?>"
<?= $tpCid === (int)($tpT['category_id'] ?? 0) ? ' selected' : '' ?>>
<?= e((string)($tpC['name'] ?? '')) ?>
</option>
<?php endforeach; ?>
</select>
<?php else: ?>
<span><?= $tpCatName !== '' ? e($tpCatName) : '未分类' ?></span>
<?php endif; ?>
</div>
<div class="tk-attr-row tk-attr-row-top">
<span class="tk-attr-lb">备注</span>
<?php if ($tpCan): ?>
<textarea class="input" id="tkp-note" name="note" rows="2"
placeholder="补充说明…"><?= e((string)($tpT['note'] ?? '')) ?></textarea>
<?php else: ?>
<span><?= trim((string)($tpT['note'] ?? '')) !== ''
? nl2br(e((string)$tpT['note'])) : '无' ?></span>
<?php endif; ?>
</div>
<?php if ($tpCan): ?>
<div class="tk-attr-actions">
<button type="button" class="btn btn-sm" data-tk-act="save-attrs">保存</button>
@@ -294,13 +251,6 @@ $tpLate = $tpDue !== '' && $tpStatus !== 'done' && \App\Task::isOverdue($tpD
</div>
</div>
<?php /* ---- 其余只读事实(循环)——备注已挪进「更多信息」(#78) ---- */ ?>
<?php if (!empty($tpT['repeat_rule'])): ?>
<dl class="kv tk-kv">
<div class="kv-row"><dt>循环</dt><dd><?= e(\App\Task::repeatWord((string)$tpT['repeat_rule'])) ?></dd></div>
</dl>
<?php endif; ?>
<?php /* ---- 子任务(子任务自己不再挂子任务,与详情页同一口径) ---- */ ?>
<?php if (!$tpIsChild): ?>
<div class="tk-sec">