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

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

Browse Source 
用户原话（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:
laoyang
2026-10-10 00:26:42 +08:00
parent 2fda455a59
commit d83c94e127
14 changed files with 693 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/_datetime.php
+100 -43
View File
@@ -1,69 +1,124 @@
<?php
/**
* 「日期 + 24 小时制时:分:秒」组合输入控件（从 TripLog 的 _datetime.php 移植）。
* 「日期 + 24 小时制时:分」组合输入控件。
*
* ⚠️ 为什么不用 <input type="datetime-local">：
* 它的显示格式由**浏览器 UI 语言 / 系统时间格式**决定，<html lang> 与元素 lang
* 都压不过它。中文环境实测会渲染成「下午 03:30」，用户很容易把上下午填反；
* 而且它只有时:分，**没有秒**。拆成「原生日期选择器 + 三个下拉」后，
* 24 小时制与"精确到秒"都由控件本身保证，浏览器改不掉。
* 都压不过它。中文环境实测会渲染成「下午 03:30」，用户很容易把上下午填反。
*
* 日期部分仍是原生 `<input type="date">`（app.js 里的 showPicker 脚本对它同样生效，
* 点输入框任意位置都能弹出日历 —— 这正是"整个输入框点击都可以弹出"的落点）。
* ════════════════════════════════════════════════════════════════
* 🔴🔴 v37：**日期部分默认改成「年 / 月 / 日」三个原生下拉**（不再用 <input type=date>）
* ════════════════════════════════════════════════════════════════
* 用户原话（2026-10-09 第 4 次反馈，两次都提到同一个痛点）：
* 「编辑页面的时间，我还是不是特别满意…选日期的这个控件非常非常不好用。
* 就是如果我把年和月那个地方拉下来，我选完年和月之后，它并不会回到让我选日的
* 那个界面，它还是不动的，所以这时候就没有办法选日。这个地方要么换一个控件，
* 要么在那个地方加一个确定按钮…」
*
* 为什么会这样（不是我们调错了参数）：`<input type="date">` 的日历弹层是
* **浏览器自己画的**，我们既拿不到它的 DOM，也控制不了它的交互流程。
* Chrome 的弹层在"点顶部 `2026年 10月` 切到年月视图"之后，**切回日期视图要靠
* 用户再点一次日期或按 Esc** —— 各家浏览器行为还不一致，用户遇到的就是"卡住"。
* ⇒ 换成**我们能完全控制的原生 `<select>`**：三个下拉，选哪个改哪个、
* **选完即生效**、不需要任何"确定"按钮。
*
* ⚠️ 提交契约**一个字都没变**：仍然产出
* `*_date`（隐藏框，'YYYY-MM-DD'）/ `*_hour` / `*_minute`
* 服务端 read_dt_input()/read_due_input() 原样收，既有 e2e 与部署断言照过。
* ⚠️ 「秒」默认**不再产出**（$dtSeconds 默认 false）——
* 用户 2026-10-09 第 2 条：「只记录到时和分就行了」。
* 需要秒的老调用方显式传 $dtSeconds = true。
*
* 用法（include 前 set 好这些变量；模板里只读它们）：
* $dtName 字段基名，如 'birthday_solar' → 产出 *_date / _hour / _minute / _second
* $dtValue 可空；'Y-m-d H:i:s' / 'Y-m-d H:i' / 'Y-m-d'。服务端用 read_dt_input($dtName) 取值
* $dtName 字段基名，如 'starts_at' → 产出 *_date / _hour / _minute
* $dtValue 可空；'Y-m-d H:i:s' / 'Y-m-d H:i' / 'Y-m-d'
* $dtRequired 日期是否必填（默认 false）
* $dtId 可选；日期控件的 id（供 <label for>）
* $dtSeconds 是否要"秒"这一档（默认 true；生日要精确到时分秒）
* $dtId 可选；给外层一个 id（供 <label for> 与测试定位）
* $dtSeconds 是否要"秒"这一档（**默认 false**，见上面 v37 说明）
* $dtRange 'start' | 'end' —— 这对控件属于同一个起止范围（见下）
* $dtDateType 'select'（默认，年/月/日下拉）| 'native'（旧的原生 date 框）
* $dtYearFrom / $dtYearTo 年份下拉的范围（默认：今年 -120 ~ 今年 +10；生日建议 1900）
*/
$dtName = (string)($dtName ?? 'time');
$dtValue = $dtValue ?? null;
$dtRequired = (bool)($dtRequired ?? false);
$dtId = (string)($dtId ?? '');
$dtSeconds = (bool)($dtSeconds ?? true);
/* 用户 2026-10-04 第 7 条原话：「所有的时间选择，都已更换新插件，但是有个问题，
如果是选择一个时间范围的情况，就是说，有开始时间，有结束时间，应该用这个日期插件的
时间范围选择方式，而不是将这个范围拆成两个，这样不好看，也多一步操作。」
/* 🔴 v37：秒默认关掉了（用户「只记录到时和分就行了」）。
⚠️ 这是**行为变更**：以前不传 = 有秒。所有调用方都已在本批逐一看过，
确实需要秒的（工作经历那种）会显式传 true。 */
$dtSeconds = (bool)($dtSeconds ?? false);
$dtDateType = (string)($dtDateType ?? 'select');
/* 年/月/日下拉 ⇄ 隐藏的 `*_date` 之间的同步由 app.js 负责（见 upgrade 里的 bindParts）。
`native` 模式则完全走旧路（原生 date 框），保留给将来可能的回退。 */
$dtUseParts = ($dtDateType !== 'native');
$dtYearFrom = (int)($dtYearFrom ?? ((int)date('Y') - 120));
$dtYearTo = (int)($dtYearTo ?? ((int)date('Y') + 10));
→ 有起止两端的场景不再并列两个控件，而是**一个范围控件**。
实现方式是"服务端照旧渲染两个原生控件（表单契约/e2e 都不动），
由 app.js 在升级时识别成一对、只挂一个 Semi 范围选择器"。所以这里只加标记：
$dtRange = 'start' | 'end' —— 这对控件属于同一个范围（调用方还要用
<div class="dt-range"> 把两者包在一起，见 movies/form.php 等）。
留空 = 普通单点控件（默认，行为完全不变）。 */
/* 起止成对的场景：两端属于同一个范围（调用方用 <div class="dt-range"> 包住两者）。
留空 = 普通单点控件。 */
$dtRange = (string)($dtRange ?? '');
// ⚠️⚠️ 临时变量**一律带 dt 前缀**，一个都不能漏：这里原来写成
// `$t = strtotime(...)`，把宿主模板里表示「这条任务 / 这条记录」的 `$t`
// 覆盖成了 int —— 于是 include 之后凡是读 `$t['id']`、`$t['status']` 的地方
// 全部拿到 null，子任务列表空、评论不渲染、@高亮消失，而且**不报任何错**
// （PHP 8 对 "Trying to access array offset on value of type int" 只 Warning）。
// tasks/show.php 上就是这么被 e2e 抓到的（2026-10-02）。
/* ⚠️⚠️ 临时变量**一律带 dt 前缀**，一个都不能漏：这里原来写成
`$t = strtotime(...)`，把宿主模板里表示「这条任务 / 这条记录」的 `$t`
覆盖成了 int —— 于是 include 之后凡是读 `$t['id']`、`$t['status']` 的地方
全部拿到 null，子任务列表空、评论不渲染、@高亮消失，而且**不报任何错**。
（tasks/show.php 上就是这么被 e2e 抓到的，2026-10-02。） */
$dtTs = (!empty($dtValue) && ($dtTsTmp = strtotime(trim((string)$dtValue)))) ? $dtTsTmp : false;
$dtDate = $dtTs ? date('Y-m-d', $dtTs) : '';
$dtY = $dtTs ? (int)date('Y', $dtTs) : 0;
$dtMo = $dtTs ? (int)date('n', $dtTs) : 0;
$dtD = $dtTs ? (int)date('j', $dtTs) : 0;
$dtHour = $dtTs ? (int)date('G', $dtTs) : 0; // G = 0..23，天然 24 小时制
$dtMin = $dtTs ? (int)date('i', $dtTs) : 0;
$dtSec = $dtTs ? (int)date('s', $dtTs) : 0;
?>
<?php /* v24 第 9 批 #9：所有日期选择换 Semi Design DatePicker（用户点名，样式与宣纸主题统一）。
策略是**渐进增强**，原生四字段原样保留：
· 表单契约（*_date/_hour/_minute/_second → read_dt_input()）不变，服务端零改动；
· Semi 资源（3.4 MB JS）只有页面真出现 .dt-input 才由 app.js 懒加载；
· 加载成功 → 隐藏 .dt-native、在 .dt-semi 里挂 DatePicker，值回写原字段；
· 加载失败/断网 → 原生控件原样可见可用，页面不会坏。 */
<?php /* v24 第 9 批 #9：Semi DatePicker 曾用于这里；v37 起日期改自建下拉、
时间改原生 select，**Semi 只剩「工作经历的年月选择」还在用**（那是另一处）。
.dt-semi 这个占位 span 保留 —— 老代码路径与 CSS 还在引用它，删了会牵连。 */
$dtCfg = ['name' => $dtName, 'seconds' => $dtSeconds, 'required' => $dtRequired,
'id' => $dtId, 'range' => $dtRange];
'id' => $dtId, 'range' => $dtRange, 'parts' => $dtUseParts || null];
?>
<div class="dt-input<?= $dtRange !== '' ? ' dt-part' : '' ?><?= $dtRange === 'start' ? ' is-pending' : '' ?>"
data-dt="<?= e(json_encode($dtCfg, JSON_UNESCAPED_UNICODE | JSON_HEX_APOS | JSON_HEX_QUOT)) ?>">
<div class="dt-input<?= $dtRange !== '' ? ' dt-part' : '' ?><?= $dtUseParts ? ' dt-parts' : '' ?><?= $dtRange === 'start' ? ' is-pending' : '' ?>"
data-dt="<?= e(json_encode($dtCfg, JSON_UNESCAPED_UNICODE | JSON_HEX_APOS | JSON_HEX_QUOT)) ?>"
<?= $dtRequired ? 'data-dt-required="1"' : '' ?>>
<span class="dt-semi" aria-hidden="true"></span>
<span class="dt-native">
<input type="date" class="dt-date" name="<?= e($dtName) ?>_date"
<?= $dtId !== '' ? 'id="' . e($dtId) . '"' : '' ?>
value="<?= e($dtDate) ?>"<?= $dtRequired ? ' required' : '' ?>
aria-label="日期">
<?php if ($dtUseParts): ?>
<?php /* ---- 日期：年 / 月 / 日 三个原生下拉（v37） ----
⚠️ `*_date` 仍然是**真的那个字段**，只是变成隐藏框：
三个下拉只负责把它算出来（app.js 的 bindParts）。
这样"表单契约不变"是**结构上**保证的，不是靠约定。 */ ?>
<span class="dt-date-sel">
<input type="hidden" class="dt-date" name="<?= e($dtName) ?>_date"
<?= $dtId !== '' ? 'id="' . e($dtId) . '"' : '' ?>
value="<?= e($dtDate) ?>">
<select class="dt-year" aria-label="年">
<option value="">年</option>
<?php for ($dtYy = $dtYearTo; $dtYy >= $dtYearFrom; $dtYy--): ?>
<option value="<?= $dtYy ?>"<?= $dtYy === $dtY ? ' selected' : '' ?>><?= $dtYy ?></option>
<?php endfor; ?>
</select>
<select class="dt-month" aria-label="月">
<option value="">月</option>
<?php for ($dtMm = 1; $dtMm <= 12; $dtMm++): ?>
<option value="<?= $dtMm ?>"<?= $dtMm === $dtMo ? ' selected' : '' ?>><?= $dtMm ?>月</option>
<?php endfor; ?>
</select>
<select class="dt-day" aria-label="日">
<option value="">日</option>
<?php /* 初始按已选的年月给天数；用户改年/月时 app.js 会重建这一列 */
$dtDays = ($dtY && $dtMo) ? (int)date('t', mktime(0, 0, 0, $dtMo, 1, $dtY)) : 31; ?>
<?php for ($dtDd = 1; $dtDd <= $dtDays; $dtDd++): ?>
<option value="<?= $dtDd ?>"<?= $dtDd === $dtD ? ' selected' : '' ?>><?= $dtDd ?>日</option>
<?php endfor; ?>
</select>
</span>
<?php else: ?>
<input type="date" class="dt-date" name="<?= e($dtName) ?>_date"
<?= $dtId !== '' ? 'id="' . e($dtId) . '"' : '' ?>
value="<?= e($dtDate) ?>"<?= $dtRequired ? ' required' : '' ?>
aria-label="日期">
<?php endif; ?>
<span class="dt-time">
<select class="dt-hour" name="<?= e($dtName) ?>_hour" aria-label="时（24 小时制）">
<?php for ($dtH = 0; $dtH < 24; $dtH++): $hv = sprintf('%02d', $dtH); ?>
@@ -74,7 +129,7 @@ $dtCfg = ['name' => $dtName, 'seconds' => $dtSeconds, 'required' => $dtRequired,
<select class="dt-minute" name="<?= e($dtName) ?>_minute" aria-label="分">
<?php /* ⚠️ 循环变量一律带 dt 前缀：这里曾被写成 $m，把宿主模板里
表示「观影记录」的 $m 覆盖成了 int —— 编辑页的简介/备注回填
被静默清空、取消链接变 id=0，还不止一个 Warning（2026-09-30 e2e 抓到）。 */ ?>
被静默清空、取消链接变 id=0（2026-09-30 e2e 抓到）。 */ ?>
<?php for ($dtM = 0; $dtM < 60; $dtM++): $mv = sprintf('%02d', $dtM); ?>
<option value="<?= $mv ?>"<?= $dtM === $dtMin ? ' selected' : '' ?>><?= $mv ?></option>
<?php endfor; ?>
@@ -92,6 +147,8 @@ $dtCfg = ['name' => $dtName, 'seconds' => $dtSeconds, 'required' => $dtRequired,
</div>
<?php /* 用完即清，避免残留变量影响下一次 include */ unset(
$dtName, $dtValue, $dtRequired, $dtId, $dtSeconds, $dtCfg, $dtRange,
$dtTs, $dtTsTmp, $dtDate, $dtHour, $dtMin, $dtSec,
$dtH, $dtM, $dtS, $hv, $mv, $sv
); ?>
$dtDateType, $dtUseParts, $dtYearFrom, $dtYearTo,
$dtTs, $dtTsTmp, $dtDate, $dtY, $dtMo, $dtD, $dtDays,
$dtHour, $dtMin, $dtSec,
$dtH, $dtM, $dtS, $hv, $mv, $sv, $dtYy, $dtMm, $dtDd
); ?>
templates/calendar/_event_fields.php
+2 -2
View File
@@ -82,13 +82,13 @@ $evIsAllDay = array_key_exists('all_day', $evF) ? !empty($evF['all_day']) : $evA
<span class="dt-range-label">开始 / 结束 *</span>
<div class="field ev-dt" data-dt>
<?php $dtName = 'starts_at'; $dtId = 'ev-start';
$dtValue = $evF['starts_at'] ?? null; $dtRequired = true; $dtSeconds = true;
$dtValue = $evF['starts_at'] ?? null; $dtRequired = true;
$dtRange = 'start';
require __DIR__ . '/../_datetime.php'; ?>
</div>
<div class="field ev-dt" data-dt id="ev-end-field">
<?php $dtName = 'ends_at'; $dtId = 'ev-end';
$dtValue = $evF['ends_at'] ?? null; $dtRequired = false; $dtSeconds = true;
$dtValue = $evF['ends_at'] ?? null; $dtRequired = false;
$dtRange = 'end';
require __DIR__ . '/../_datetime.php'; ?>
</div>
templates/calendar/index.php
+12 -2
View File
@@ -229,11 +229,21 @@ $headText = $view === 'month' ? date('Y 年 n 月', $ts)
$evAllDay = false;
require __DIR__ . '/_event_fields.php';
?>
</div>
</div><?php /* /cal-modal-body */ ?>
<div class="cal-modal-foot">
<span class="cal-modal-tip" id="calAddTip"></span>
<button class="btn btn-sm" type="submit" id="calAddSubmit">加上</button>
<?php /* 🔴 v37 用户第 5 条：「"加上"和"取消"两个按钮在右上角，离得特别远，
根本看不到。应该把它们放在下方…」
真根因（真机量出来的，不是猜）：
原来这里**多写了一个 `</div>`** —— `.cal-modal-panel` 被提前闭合、
跟着又被多关一层，于是 `<div class="cal-modal-foot">` 跑到了
**面板外面**（DOM 上它是 `.cal-modal` 的直接子元素）。
面板 `max-height` 一卡，底栏就被挤到面板下方 → 用户看不到。
另有 CSS 一层：`.cal-modal-panel > form` 原先不是 flex 列，
`.cal-modal-body{flex:1 1 auto}` 因此不起作用（两处都已修）。
⚠️ 提交键用 `form="calAddForm"` **显式关联**：多一层/少一层 DOM 的
意外都不会再让它失效（它本来就在 form 内部，但显式写更稳）。 */ ?>
<button class="btn btn-sm" type="submit" form="calAddForm" id="calAddSubmit">加上</button>
<button class="btn btn-ghost btn-sm" type="button" id="calAddCancel2">取消</button>
</div>
</form>
templates/home.php
+22 -2
View File
@@ -334,8 +334,28 @@ unset($evRef);
style="background: <?= e((string)$ev['color']) ?>;
top: <?= number_format($topPct, 2) ?>%;
height: <?= number_format($hPct, 2) ?>%;
left: calc(46px + <?= (float)($ev['left'] ?? 0) ?>%);
width: calc(<?= (float)($ev['width'] ?? 100) ?>% - 50px);"
<?php /* 🔴 v37 用户第 3 条：「首页上今天的日程…如果它分了三列
或者是几列，这三列之间的距离或者是空隙非常非常的大，
是分开的，中间有非常大的空隙。我看了一下日程里面的那个
显示，那两个色块就是紧挨着的。所以…应该让它们紧挨着。」
根因（与日历页 .tg-block 逐字对比出来的）：
· 日历页写的是 `left: calc(2px + L%)` / `width: calc(W% - 4px)`
—— 只留 2px+2px 的缝，所以色块**紧挨**；
· 这里却写死了 `calc(46px + L%)` / `calc(W% - 50px)`
—— 每块左右各扣 23px/25px。两列时那 46px 的扣减
**没法均分**，全挤进了两块之间的缝里 →
实测缝 ≈ 50px（等于把 46px 全加在了中间），
日历页只有 ≈ 4px。
⇒ 改法与日历页对齐：
left = 46px（给小时刻度）+ 列内的 2px
width = 列宽 - 4px（左右各 2px）
这样列间缝恒为 4px（紧挨），而且与"放得下多少列、
每列多宽"的解耦是干净的 —— 列宽由 width% 决定，
缝由那 4px 决定，两者不再互相污染。 */ ?>
left: calc(46px + <?= (float)($ev['left'] ?? 0) ?>% + 2px);
width: calc(<?= (float)($ev['width'] ?? 100) ?>% - 4px);"
title="<?= e((string)$ev['title']) ?>"
data-cal="<?= (int)$ev['cal'] ?>">
<span class="ag-ev-t"><?= e((string)$ev['time']) ?></span>
templates/movies/form.php
+68 -13
View File
@@ -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"` 指过来，按钮位置不变。
templates/movies/index.php
+50 -1
View File
@@ -24,7 +24,11 @@ $fmtNum = static function ($v): string {
</span>
<div class="actions">
<?php if ($canWrite): ?>
<a class="btn" href="<?= e(url('movies/new')) ?>">记一场电影</a>
<?php /* 🔴 v37 用户第 6 条第 4 点：新增改成**弹框**（不再跳到单独的页面）。
⚠️ 仍然保留 href —— JS 没跑时它就是"跳到 movies/new"的普通链接
（那一页会把同一个弹框自动打开），所以**无 JS 也能用**。 */ ?>
<button class="btn" type="button" id="mvAddBtn" aria-haspopup="dialog" aria-expanded="false"
data-href="<?= e(url('movies/new')) ?>">记一场电影</button>
<?php endif; ?>
<?php /* 「设置」下拉：影院管理 / 高级搜索 / 统计 / 年度报告。
⚠️ 片段必须放在 actions 的**最后**：它靠 margin-left:auto 贴右，
@@ -84,3 +88,48 @@ $fmtNum = static function ($v): string {
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php /* 🔴 v37：把"记一场电影"的弹框内嵌进列表页（同一份模板，避免两处维护）。
⚠️ 只在**能写**的账号上渲染：表单 action 是 movies/create，只读账号点了也是 403。 */
if ($canWrite) {
$mvModalOnly = true; // 不输出 page-head / 设置菜单
$m = null; $errors = []; // 新增态
$people = $peopleForModal ?? [];
$cinemas = $cinemasForModal ?? [];
require __DIR__ . '/form.php';
} ?>
<script>
(function () {
/* ---- "记一场电影"弹框：打开 / 关闭 + 提交后刷新列表 ----
用户原话（第 6 条第 4 点）：「新增一部电影时，也弹出一个框来输入所有信息。
填写完之后，再刷新观影页面就可以了。」
⇒ 提交**照旧走原生表单**（服务端 302 回详情页），这里不拦截、不做 AJAX ——
用户要的是"填完刷新"，跳详情页正合直觉，而且**零新增失败模式**。 */
var modal = document.getElementById('mvAddCard');
if (!modal) { return; }
var btn = document.getElementById('mvAddBtn');
var x = document.getElementById('mvAddX');
var c1 = document.getElementById('mvAddCancel');
function open() {
modal.hidden = false;
if (btn) { btn.setAttribute('aria-expanded', 'true'); }
var t = document.getElementById('title');
if (t) { t.focus(); }
}
function close() {
modal.hidden = true;
if (btn) { btn.setAttribute('aria-expanded', 'false'); }
}
if (btn) { btn.addEventListener('click', open); }
if (x) { x.addEventListener('click', close); }
if (c1) { c1.addEventListener('click', close); }
/* 点遮罩关、面板内不关；Esc 关 —— 与站内其它浮层同一套行为。 */
modal.addEventListener('click', function (e) { if (e.target === modal) { close(); } });
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && !modal.hidden) { close(); }
});
<?php if (!empty($openModal)): ?>open();<?php endif; ?>
})();
</script>
templates/movies/show.php
+3 -11
View File
@@ -282,17 +282,9 @@ $commentBox = static function (int $reviewId, int $parentId, string $summary) us
</div>
</div>
<?php endif; ?>
<?php /* 🔴 v36：详情页**不再提供"补照片"**（用户 2026-10-09 第 2 条：
「观影详情页面，不需要设置补充照片的功能，都放在编辑页面就行了。」）
⇒ 加照片统一走「编辑」按钮（编辑页的"观影照片"块可多选/可多次拖）。
这里留一个入口链接，免得到详情页想加照片时找不到路。 */ ?>
<?php if ($canWrite): ?>
<div class="detail-section">
<p class="tip" style="margin:0">
要加照片请点上方「编辑」——「观影照片」在编辑页里一起传（可多选）。
</p>
</div>
<?php endif; ?>
<?php /* 🔴 v37 用户 2026-10-09 第 1 条：「观影详情页面。观影图片下面有一个块，
里面写着一句话。要加照片请点上方「编辑」…这个块不要，直接把这个块删除。」
⇒ 整块删掉（v36 留的那句提示也一起去掉）。加照片统一走「编辑」按钮。 */ ?>
<!-- 评价与评论 -->
<div class="detail-section" id="reviews">
templates/tasks/index.php
+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 现取**，不要写死数组：看板是用户自己建的，
templates/tasks/show.php
+2 -2
View File
@@ -123,7 +123,7 @@ $isChild = !empty($t['parent_id']);
<div class="field">
<label>截止时间（留空=不上日历）</label>
<?php $dtName = 'due_at'; $dtValue = $t['due_at'] ?? null;
$dtRequired = false; $dtSeconds = true;
$dtRequired = false;
require __DIR__ . '/../_datetime.php'; ?>
</div>
<div class="field">
@@ -236,7 +236,7 @@ $isChild = !empty($t['parent_id']);
<?= csrf_field() ?>
<input type="hidden" name="parent_id" value="<?= (int)$t['id'] ?>">
<input class="input" name="title" required placeholder="如：擦玻璃">
<?php $dtName = 'due_at'; $dtValue = null; $dtRequired = false; $dtSeconds = true;
<?php $dtName = 'due_at'; $dtValue = null; $dtRequired = false;
require __DIR__ . '/../_datetime.php'; ?>
<button class="btn btn-sm" type="submit">加上</button>
</form>
templates/trips/_revise_form.php
+2 -2
View File
@@ -32,10 +32,10 @@ $rvN = (int)($rvNode['revision_n'] ?? 0);
<div class="field dt-range full">
<label>实际的开始 / 结束</label>
<?php $dtName = 'rev_starts_at'; $dtValue = $rvNode['starts_at'] ?? '';
$dtId = $rvPrefix . '-s'; $dtSeconds = true; $dtRange = 'start';
$dtId = $rvPrefix . '-s'; $dtRange = 'start';
require __DIR__ . '/../_datetime.php'; ?>
<?php $dtName = 'rev_ends_at'; $dtValue = $rvNode['ends_at'] ?? '';
$dtId = $rvPrefix . '-e'; $dtSeconds = true; $dtRange = 'end';
$dtId = $rvPrefix . '-e'; $dtRange = 'end';
require __DIR__ . '/../_datetime.php'; ?>
<span class="tip">默认是计划的时间，改成实际发生的即可。</span>
</div>
templates/trips/node_form.php
+2 -2
View File
@@ -135,10 +135,10 @@ $amap = \App\Geo::jsConfig();
<div class="field dt-range full">
<label>开始 / 结束</label>
<?php $dtName = 'starts_at'; $dtValue = $n['starts_at'] ?? '';
$dtId = 'nf-s'; $dtSeconds = true; $dtRange = 'start';
$dtId = 'nf-s'; $dtRange = 'start';
require __DIR__ . '/../_datetime.php'; ?>
<?php $dtName = 'ends_at'; $dtValue = $n['ends_at'] ?? '';
$dtId = 'nf-e'; $dtSeconds = true; $dtRange = 'end';
$dtId = 'nf-e'; $dtRange = 'end';
require __DIR__ . '/../_datetime.php'; ?>
<span class="tip">结束时间可不填；填到几点几分，详情页就显示到几点几分。</span>
</div>