v37 第 37 批:日期控件换成「年/月/日 + 时/分」五个原生下拉 + 五处界面重做

用户原话(6 条,一次给全):
  ①「观影详情页面。观影图片下面有一个块…要加照片请点上方「编辑」…这个块不要,
     直接把这个块删除。」
  ②「编辑页面的时间…选日期的这个控件非常非常不好用。就是如果我把年和月那个地方
     拉下来,我选完年和月之后,它并不会回到让我选日的那个界面,它还是不动的…
     要么换一个控件,要么在那个地方加一个确定按钮…现在开始和结束时间分在了两行…
     能放得下的话就应该放一排…不要让它默认显示在两行上…"散场时间可不填。"这句话去掉。」
  ③「首页上今天的日程…分了几列,列之间的空隙非常非常的大…日程里面的那两个色块
     就是紧挨着的。所以…应该让它们紧挨着。」
  ④「现在怎么部署的时间这么长?…你修改了哪些页面,你就只测试哪些页面就可以了。」
  ⑤「日程模块的新建日程…"加上"和"取消"两个按钮在右上角,离得特别远,根本看不到…
     每个输入框前面的标题都太小了…都应该加粗、变大。」
  ⑥「1.新建任务的截止时间,也和观影一致。2.新建任务时竟然没有添加附件…
     3.新建任务也弹出一个框,新建完之后刷新看板页面。4.观影新增也弹框输入所有信息。」

② 日期控件:**真根因是"这个控件给不了"**
  `<input type="date">` 的日历弹层由**浏览器自己画**,我们碰不到 DOM、也控制不了流程;
  Chrome 在"点顶部 `2026年 10月` 切到年月视图"之后,要靠用户**再点一次日期或按 Esc**
  才回得到日期视图,各家还不一致 ⇒ 用户遇到的"选完年月就卡住、选不了日"。
  修:`_datetime.php` 重写成 **年 / 月 / 日 三个原生 <select> + 时 / 分**,
  选完即生效、无需"确定";秒默认去掉(用户"只记录到时和分")。
  ⚠️ 提交契约**一字未改**:`*_date` 仍是真字段(改 `type=hidden`)+ `*_hour/_minute`。
  ⚠️ `required` 落在隐藏控件上会让 Chrome 报 "not focusable"(点保存什么都不发生)
     ⇒ 改用 `data-dt-required` 声明、JS 自查(12 个调用点全部受影响)。
  起止两端:`.dt-range.dt-cols` + `flex-wrap` → **宽屏一行、窄屏自动换行**
  (不用 JS 量宽度:字体/动画/缩放时量不准,flex-wrap 是浏览器布局的一部分)。
  🔴 顺带挖出真 bug:旅程「修正」表单的 `.dt-range` 只有 **22px 宽**
     —— 它长在 `.node-ops`(一排小按钮的容器)里,展开的内容只有"修正"两个字那么宽。
     修:`.rev-panel{position:absolute}` 纯 CSS 浮出来(不动 DOM,避免牵动节点列表排版)。

③ 首页冲突色块"空隙特别大":与日历页逐字对比出来的
  日历页 `left: calc(2px + L%)` / `width: calc(W% - 4px)` → 只留 4px、紧挨;
  首页却写死 `calc(46px + L%)` / `calc(W% - 50px)` —— 每块左右各扣 23/25px,
  两列时那 46px **没法均分**、全挤进了中间的缝(实测 ≈50px)。
  修:`left: calc(46px + L% + 2px)` / `width: calc(W% - 4px)` → 缝恒为 4px。

⑤ 日程弹框"按钮看不到":**两个**根因叠加
  ① `calendar/index.php` 里**多写了一个 `</div>`** —— `.cal-modal-panel` 被提前闭合,
     底栏 `<div class="cal-modal-foot">` 成了 `.cal-modal` 的直接子元素、被挤到面板外;
  ② `.cal-modal-panel` 是 flex 列,但**它下面的 `<form>` 不是** →
     `.cal-modal-body{flex:1 1 auto}` 的上下文只到 form 为止,body 压不下去也不滚。
  另有 `.cal-modal-panel` 的 max-height 没算上 `.cal-modal` 自己的 padding(差 4px)。
  三处都修;标签只对**弹框里**的 `.field > label` 加粗放大(14px/600/深色)。

⑥ 任务新建:内联卡片 → 弹框;**新增附件**(`attach[]`,服务端零改动能收);
  `back=tasks` → 新建完回**看板**刷新。观影新增:列表页内嵌同一份 form.php 弹框。

① 详情页删掉那句提示块。④ 流水线改**增量**:`run_suite_if <标签>` + 从 git 改动
  推模块;**一碰共用件就退回全量**(app.js/app.css/layout/index.php/_datetime.php…),
  认不出来也全量(保守:少跑一段发坏东西的代价远大于多跑十分钟)。

🔴🔴 本轮最值得记的教训:**DOM 嵌套错误比语法错误难查得多**
  在 movies/form.php 与 calendar/index.php 各写坏一次嵌套(多/少 `</div>`、多 `</form>`),
  两处**都通过 php -l、页面也打得开**,症状却是"按钮跑到面板外"与
  "编辑保存静默失效"(保存键落到 form 外面)。⇒ 模板里 `<?php if ?>` 与 `</div>`
  必须**按分支配对**,改完用真机渲染 dump 一次 div 深度;光靠 php -l 发现不了。

验证(全部真机 + 反向验证):
  · _fb_b34_dtrange.py **61/0**(四个页面:年/月/日/时/分 都可见可点 +
    选完三个下拉**立刻**写回 *_date + 改月重建"日"列 + 起止默认同一行 + 无 JS 报错);
  · _fb_b34_dtrange_falsify **7/0**(三处注入各自必须变红);
  · _fb_b37_ui.py **27/0**(详情页无提示块 / 首页冲突缝 ≤8px / 弹框按钮在面板内且在
    视口内 / 标签加粗 / 任务弹框+附件+回看板 / 观影列表页弹框);
  · _fb_b37_falsify **5/0**;
  · _fb_b35_movie_media.py **16/0**、_fb_geom_interact **109/0**、e2e **1503/0**、
    b30_ui2 16/0(含首页冲突分列)、_b30_import 26/0、b18/b21/b23/…全绿、
    DAV 三套全绿、部署静态断言空跑通过;
  · 线上 app.js / app.css / movies/form.php / calendar/index.php 的 SHA256 与本地一致。
  · 顺带修掉 _b30_import 的一个**时序竞争**:它用外部上游(联想词服务)的二次探测
    当对照,浏览器取词在前、探测在后,上游抖一下会误报成"回归"(已改成两次确认)。
This commit is contained in:
2026-10-10 00:26:42 +08:00
parent 2fda455a59
commit d83c94e127
14 changed files with 693 additions and 328 deletions
+67 -18
View File
@@ -66,11 +66,30 @@ $lastColIdx = count($colList) - 1;
</div>
<?php if ($canWrite): ?>
<div class="card card-pad" id="taskAddCard" hidden>
<h2 class="cinema-h2">新建任务</h2>
<form method="post" action="<?= e(url('tasks/create')) ?>">
<?= csrf_field() ?>
<div class="form-grid">
<?php /* 🔴🔴 v37 用户第 6 条第 3 点:「新建任务也和新建日程一样,新建时弹出一个框,
新建完之后刷新新建任务的列表、看板页面。」
⇒ 从"页面上展开的一张卡片"改成**浮层弹框**(与日程弹框同一套形态 / 类名),
提交后照旧 302 回看板刷新 —— 用户要的"刷新看板页面"就是这样。
⚠️ 表单字段本身**一个字没动**(除了新加的附件框),服务端契约照旧。 */ ?>
<div class="cal-modal" id="taskAddCard" role="dialog" aria-modal="true"
aria-label="新建任务" hidden>
<div class="cal-modal-panel">
<div class="cal-modal-head">
<b>新建任务</b>
<button type="button" class="cal-modal-x" id="taskAddX" aria-label="关闭">✕</button>
</div>
<?php /* ⚠️ enctype 必须有:本批新增了**附件**上传(用户第 6 条第 2 点
「新建任务时,竟然没有添加附件,这个应该加上」)。
没有它的话文件根本不会随表单发出去,而且 $_FILES 是空的。 */ ?>
<form method="post" action="<?= e(url('tasks/create')) ?>"
enctype="multipart/form-data" id="taskAddForm">
<?= csrf_field() ?>
<?php /* ⚠️ 新建后回**看板**(用户:「新建完之后刷新…看板页面」)。
原来服务端一律 redirect('tasks/show'),新建完会跳去详情页。
`back=tasks` 走白名单。 */ ?>
<input type="hidden" name="back" value="tasks">
<div class="cal-modal-body">
<div class="form-grid">
<div class="field full">
<label for="tk-title">要做什么 *</label>
<input class="input" id="tk-title" name="title" required placeholder="如:周末大扫除">
@@ -81,7 +100,7 @@ $lastColIdx = count($colList) - 1;
<div class="field">
<label for="tk-due">截止时间(有才会出现在日历里)</label>
<?php $dtName = 'due_at'; $dtId = 'tk-due'; $dtValue = null;
$dtRequired = false; $dtSeconds = true;
$dtRequired = false;
require __DIR__ . '/../_datetime.php'; ?>
</div>
<div class="field">
@@ -157,12 +176,28 @@ $lastColIdx = count($colList) - 1;
<label for="tk-note">备注</label>
<textarea class="input" id="tk-note" name="note" rows="2"></textarea>
</div>
</div>
<div class="btn-row">
<button class="btn" type="submit">新建</button>
<button class="btn btn-ghost" type="button" id="taskAddCancel">收起</button>
</div>
</form>
<?php /* 🔴 v37 用户第 6 条第 2 点:「新建任务时,竟然没有添加附件,
这个应该加上。」
⚠️ 走全站统一的「点击或拖动进行上传」框(templates/_stage_drop.php);
字段名 `attach[]` 与详情页的附件上传**一致** ——
服务端 attach_save_files(..., 'attach', ...) 零改动就能收。
⚠️ 拖进来的走暂存(stage_token[]),随表单一起认领;
直接点选走 $_FILES 路径。两条路服务端都接(见 attach_save_files)。 */ ?>
<div class="field full">
<label for="sd-tk-attach">附件(可多选)</label>
<?php $sdName = 'attach[]'; $sdId = 'sd-tk-attach'; $sdSlot = 'photo';
require __DIR__ . '/../_stage_drop.php'; ?>
</div>
</div><?php /* /.form-grid */ ?>
</div><?php /* /.cal-modal-body */ ?>
<div class="cal-modal-foot">
<span class="cal-modal-tip" id="taskAddTip"></span>
<button class="btn btn-sm" type="submit" form="taskAddForm" id="taskAddSubmit">新建</button>
<button class="btn btn-ghost btn-sm" type="button" id="taskAddCancel">取消</button>
</div>
</form>
</div>
</div>
<?php endif; ?>
@@ -326,16 +361,30 @@ $lastColIdx = count($colList) - 1;
<script>
(function () {
/* ---- "新建任务"弹框(v37:从内联卡片改成浮层)----
⚠️ 不再 scrollIntoView —— 那是"卡片长在页面上"时代才需要的动作;
浮层固定在视口中央,底下的看板一动不动。 */
var addBtn = document.getElementById('taskAddBtn');
var addCard = document.getElementById('taskAddCard');
var addX = document.getElementById('taskAddX');
var addCancel = document.getElementById('taskAddCancel');
if (addBtn && addCard) {
addBtn.addEventListener('click', function () {
addCard.hidden = !addCard.hidden;
if (!addCard.hidden) { addCard.scrollIntoView({ block: 'nearest' }); }
});
function openAdd() {
if (!addCard) { return; }
addCard.hidden = false;
var t = document.getElementById('tk-title');
if (t) { t.focus(); }
}
if (addCancel && addCard) { addCancel.addEventListener('click', function () { addCard.hidden = true; }); }
function closeAdd() { if (addCard) { addCard.hidden = true; } }
if (addBtn && addCard) { addBtn.addEventListener('click', openAdd); }
if (addX) { addX.addEventListener('click', closeAdd); }
if (addCancel) { addCancel.addEventListener('click', closeAdd); }
/* 点遮罩关(点面板内不关)/ Esc 关 —— 与站内其它浮层同一套行为。 */
if (addCard) {
addCard.addEventListener('click', function (e) { if (e.target === addCard) { closeAdd(); } });
}
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && addCard && !addCard.hidden) { closeAdd(); }
});
/* ---- 左右搬(不需要拖也能用)----
⚠️ 列的集合**从 DOM 现取**,不要写死数组:看板是用户自己建的,