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:
+68
-13
@@ -30,6 +30,13 @@ $selCinema = (int)old('cinema_id', (int)($_GET['cinema'] ?? 0) ?: ($m['cinema_id
|
||||
$curAttendees = array_map('intval', array_column($m['attendees'] ?? [], 'id'));
|
||||
$selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
|
||||
?>
|
||||
<?php /* 🔴 v37:本模板现在有两种用法 ——
|
||||
① **整页**(`movies/edit` 的编辑页;以及 `movies/new` 的直接访问 / 校验失败重画);
|
||||
② **弹框片段**(被 `movies/index.php` require,`$mvModalOnly = true`,
|
||||
在观影列表页上弹出"记一场电影")。
|
||||
⚠️ 用法 ② 里**不能**输出 page-head / 设置菜单 —— 否则列表页会莫名多出一个大标题。 */
|
||||
$mvModalOnly = !empty($mvModalOnly); ?>
|
||||
<?php if (!$mvModalOnly): ?>
|
||||
<div class="page-head">
|
||||
<h1><?= $isEdit ? '编辑观影记录' : '记一场电影' ?></h1>
|
||||
<span class="sub"><?= $isEdit ? e($m['title']) : '片名必填,其他都可以以后再补' ?></span>
|
||||
@@ -44,15 +51,42 @@ $selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
|
||||
<?php $setCurrent = 'form'; $setCanWrite = \App\Auth::canWrite(); require __DIR__ . '/_settings_menu.php'; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; /* /!$mvModalOnly */ ?>
|
||||
|
||||
<?php /* 🔴🔴 v37 用户 2026-10-09 第 6 条第 4 点:「观影模块也是一样,新增一部电影时,
|
||||
也弹出一个框来输入所有信息。填写完之后,再刷新观影页面就可以了。」
|
||||
⇒ **新增**走弹框(与日程 / 任务同一套形态),**编辑**仍留在页面里
|
||||
(编辑是从详情页进来的、本来就不在列表中,没有"被顶走"的问题)。
|
||||
⚠️ 表单本身**一个字没动**(字段名 / 服务端契约 / CSRF / enctype 全照旧),
|
||||
只是把它的容器从"页面上的卡片"换成"浮层里的面板"。 */ ?>
|
||||
<?php
|
||||
/* ⚠️ 弹框的初始显隐规则:
|
||||
· 被列表页内嵌($mvModalOnly)→ **关闭**(用户点"记一场电影"才开);
|
||||
· 整页直接访问 `movies/new`(含**校验失败重画**)→ **打开** ——
|
||||
否则用户提交失败后跳到这一页,只会看到空白页面(所有提示都在弹框里)。 */
|
||||
$mvModal = !$isEdit;
|
||||
$mvOpen = $mvModal && !$mvModalOnly;
|
||||
?>
|
||||
<div class="<?= $mvModal ? 'cal-modal' : 'mv-form-wrap' ?>"<?= $mvModal ? ' id="mvAddCard" role="dialog" aria-modal="true" aria-label="记一场电影"' . ($mvOpen ? '' : ' hidden') : '' ?>>
|
||||
<?php if ($mvModal): ?>
|
||||
<div class="cal-modal-panel mv-panel">
|
||||
<div class="cal-modal-head">
|
||||
<b>记一场电影</b>
|
||||
<button type="button" class="cal-modal-x" id="mvAddX" aria-label="关闭">✕</button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<form method="post" enctype="multipart/form-data"
|
||||
action="<?= e(url($isEdit ? 'movies/update' : 'movies/create')) ?>">
|
||||
action="<?= e(url($isEdit ? 'movies/update' : 'movies/create')) ?>"
|
||||
id="mvForm">
|
||||
<?= csrf_field() ?>
|
||||
<?php if ($isEdit): ?>
|
||||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||||
<?php endif; ?>
|
||||
<?php /* ⚠️ 弹框模式下"主要动作在右下角"(与日程 / 任务弹框一致):
|
||||
body 滚、foot 固定。编辑态仍是页面上的普通卡片。 */ ?>
|
||||
<?php if ($mvModal): ?><div class="cal-modal-body"><?php endif; ?>
|
||||
|
||||
<div class="card card-pad">
|
||||
<div class="<?= $mvModal ? 'mv-form-inner' : 'card card-pad' ?>">
|
||||
<div class="form-grid">
|
||||
<div class="field full">
|
||||
<label for="title">片名 *</label>
|
||||
@@ -79,7 +113,7 @@ $selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
|
||||
「前面是日期,后面是时和分,只记录到时和分就行了。时和分,是下拉的。」
|
||||
⇒ 形态 = 日期框 + 时/分两个下拉(**没有秒**,见 app.js upgradeRange 的说明)。 */ ?>
|
||||
<div class="field full dt-range">
|
||||
<label <?= $isEdit ? '' : 'for="starts_at_date"' ?>>开始 / 结束时间(时:分)</label>
|
||||
<span class="dt-range-label">开始 / 结束时间(时:分)</span>
|
||||
<?php $dtName = 'starts_at'; $dtValue = $dtStart; $dtId = 'starts_at_date';
|
||||
$dtRange = 'start';
|
||||
require __DIR__ . '/../_datetime.php'; ?>
|
||||
@@ -88,8 +122,7 @@ $selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
|
||||
$dtRange = 'end';
|
||||
require __DIR__ . '/../_datetime.php'; ?>
|
||||
<?php if (!empty($errors['ends_at'])): ?><span class="err"><?= e($errors['ends_at']) ?></span><?php endif; ?>
|
||||
<span class="tip">散场时间可不填。</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php /* 用户 2026-10-04 第 11 批 #4(三件事):
|
||||
① 「选择影院的时候,影院的颜色要出现在下拉列表中,用来显示不同的影院」
|
||||
@@ -258,15 +291,37 @@ $mDelForms = []; // 收集起来,在表单**外面**统一渲染
|
||||
require __DIR__ . '/../_stage_drop.php'; ?>
|
||||
<span class="tip"><?= $isEdit ? '观影照片都可以放这里(可多选);删掉的在保存后生效。'
|
||||
: '观影照片都可以放这里(可多选);之后也能在详情页里逐张补传。' ?></span>
|
||||
</div>
|
||||
|
||||
<div class="btn-row">
|
||||
<button type="submit" class="btn"><?= $isEdit ? '保存' : '记下这场电影' ?></button>
|
||||
<a class="btn btn-ghost"
|
||||
href="<?= e($isEdit ? url('movies/show', ['id' => (int)$m['id']]) : url('movies')) ?>">取消</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><?php /* /.field.full(观影照片) */ ?>
|
||||
</div><?php /* /.form-grid */ ?>
|
||||
</div><?php /* /.mv-form-inner */ ?>
|
||||
<?php /* 🔴🔴 下面这一段**严格按分支配对**,别再把 </div> 与 <?php if ?> 混着写 ——
|
||||
v37 前两版就是在这里把 `.mv-form-inner` / `.cal-modal-body` 关错了层数,
|
||||
结果编辑态的「保存」按钮被甩到 form **外面**:
|
||||
点它不提交表单、也不报错(用户看到的是"保存没反应")。
|
||||
修一次的成本远大于把结构写直白。每一层都标了名字,
|
||||
以后动这里只要保证:**开的数量 = 关的数量,且顺序一致**。 */ ?>
|
||||
<?php if ($mvModal): ?>
|
||||
</div><?php /* /.cal-modal-body(仅弹框形态) */ ?>
|
||||
<div class="cal-modal-foot">
|
||||
<span class="cal-modal-tip" id="mvAddTip"></span>
|
||||
<button class="btn btn-sm" type="submit" form="mvForm" id="mvAddSubmit">记下这场电影</button>
|
||||
<button class="btn btn-ghost btn-sm" type="button" id="mvAddCancel">取消</button>
|
||||
</div>
|
||||
</div><?php /* /.cal-modal-panel(仅弹框形态) */ ?>
|
||||
<?php else: ?>
|
||||
<div class="btn-row">
|
||||
<button type="submit" class="btn">保存</button>
|
||||
<a class="btn btn-ghost"
|
||||
href="<?= e(url('movies/show', ['id' => (int)$m['id']])) ?>">取消</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div><?php /* /.mv-form-inner 或 .card.card-pad(编辑态) */ ?>
|
||||
</form>
|
||||
<?php if ($mvModal): ?>
|
||||
</div><?php /* /.cal-modal(弹框壳) */ ?>
|
||||
<?php else: ?>
|
||||
</div><?php /* /.mv-form-wrap(编辑态包装) */ ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php /* ---- 删除海报 / 票根 / 合影的**独立表单**(必须在外层表单之外)----
|
||||
⚠️ 见本文件顶部关于 form 嵌套的说明:按钮用 `form="id"` 指过来,按钮位置不变。
|
||||
|
||||
Reference in New Issue
Block a user