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
assets/js/app.js
+148 -94
View File
@@ -1268,18 +1268,39 @@
})();
})();
// ==================== Semi Design DatePicker（v24 第 9 批 #9） ====================
// 用户点名「所有日期选择换 https://semi.design 的 DatePicker，样式与系统统一」。
// 这里是**渐进增强**的升级层：templates/_datetime.php 照旧渲染原生「日期+时/分/秒」
// 四字段（表单契约与服务端 read_dt_input() 不动），Semi 的资源（合计约 4 MB）只在
// 页面上真出现 .dt-input 时才懒加载；加载成功 → 藏原生、挂 DatePicker、值回写原字段；
// 加载失败 → 原生控件原样可用，页面不会坏。
// ==================== 日期时间控件：绑事件 + 工作经历的年月选择 ====================
/* 🔴🔴 v37：这一段的职责**大幅缩小**了。
原来它是"Semi DatePicker 渐进增强层"：藏掉原生控件、挂上 Semi、把值写回原字段。
现在日期/时间控件（.dt-input）**完全自建**（年/月/日 + 时/分 原生下拉，
见 templates/_datetime.php 与 upgradeRange / upgrade / bindParts）
—— 因为它们要的交互（"选完年月要能回来选日"）浏览器自带的弹层给不了，
Semi 的弹层同样给不了（v35 实测：它的时间面板根本是空的）。
⚠️ 仍然**必须**跑起来，因为还有一件事离不开这套加载器：
**工作经历的 `<input type="month">`**（Firefox 压根不支持原生 month，
Chrome 的弹层也是同一个"选完年月卡住"的毛病）—— 它继续用 Semi 的
月选择器（`type: 'month'`，只需点月份格，没有"切回来"的问题）。
⚠️ 连带的好处：没有 month 控件的页面**不再下载那 4 MB** Semi 资源。
以前只要页面上有任何 .dt-input 就会去拉；现在只按 hasMonth 判断。 */
(function () {
var boxes = Array.prototype.slice.call(document.querySelectorAll('.dt-input[data-dt]'));
var hasMonth = !!document.querySelector('input[type="month"]');
if (!boxes.length && !hasMonth) { return; }
/* ⚠️ 只要还有 month 控件就得拉 Semi；纯 .dt-input 页面（绝大多数）不用拉。 */
if (!hasMonth) {
// 没有 month 控件：**只做绑定**，不下载任何外部资源。
// 这一步不能省 —— 三个日期下拉写回隐藏 *_date 全靠它。
Array.prototype.forEach.call(document.querySelectorAll('.dt-range'), upgradeRange);
boxes.forEach(upgrade);
watchNewControls();
return;
}
var meta = document.querySelector('meta[name="fb-semi"]');
if (!meta) { return; }
if (!meta) {
Array.prototype.forEach.call(document.querySelectorAll('.dt-range'), upgradeRange);
boxes.forEach(upgrade);
watchNewControls();
return;
}
var conf;
try { conf = JSON.parse(meta.getAttribute('content')); } catch (e) { return; }
if (!conf || !conf.css || !conf.react || !conf.dom || !conf.ui) { return; }
@@ -1385,73 +1406,28 @@
});
if (!a || !b) { return; }
/* 🔴🔴 v35：**范围控件不再用 Semi 的 dateTimeRange**，改用原生
「日期框 + 时间框」两个小控件。
用户原话：「选择日期那个地方给，非常不好用。如果我不选日期，只选时间，
框里面仍然是空白的，也没有确定按钮，这个需要重新调整一下。」
/* 🔴🔴 v37：**最彻底的简化 —— 不再"升级"任何东西、不再隐藏任何东西**。
控件从服务端出来就（应当）是它**最终该有的样子**（见 templates/_datetime.php）：
· 日期 = 年 / 月 / 日 三个原生下拉；
· 时间 = 时 / 分 两个原生下拉。
这里只做两件事：① 把三个日期下拉绑成"改哪个算哪个"（写回隐藏的 *_date）；
② 给范围组排版（两端一行、窄屏自动换行）。
实测结论（独立最小复现 + 真机，2026-10-09）：
· Semi 的 dateTimeRange 面板**只给日期网格**，时间藏在
`.semi-datepicker-switch-time` 那个小时钟按钮后面；
· 点了那个按钮切到时间面板，**面板仍然是空的**
（`timeLists = 0`、无选项、无 footer、无"确定"）→ 根本没法只选时间；
· 单点 `dateTime` 同样（面板里没有可选的时间列）。
⇒ 该组件在这套资源下**给不了"选完即确认"的时间选择**，也不能"只选时间"，
与用户描述的症状完全一致。
⇒ 改用原生 `type="time" step="1"`：24 小时制、精确到秒、点了就选、
不选日期也照样有值（实测 `21:45:30` 会保留），且**不需要**确认按钮。
用户原话（2026-10-09 第 4 次反馈）：
「…选日期的这个控件非常非常不好用。就是如果我把年和月那个地方拉下来，
我选完年和月之后，它并不会回到让我选日的那个界面，它还是不动的，
所以这时候就没有办法选日。」
—— 那是**浏览器自带日历弹层**的行为（我们碰不到它的 DOM，也就没法治）；
三个原生下拉是我们能完全控制的形态，选完即生效、不需要"确定"。
「另外一个问题是，现在开始和结束时间分在了两行…如果能放得下的话，
就应该放一排。」→ 见下面 layoutRange() + CSS 的 .dt-cols。 */
⚠️ 提交契约**一点没变**：仍是 `*_date` / `*_hour` / `*_minute` / `*_second`
四个字段（服务端 read_dt_input 照收、既有 e2e 照过）。
这里只是把两端的日期框**露出来**、并把原来的 时/分/秒 三个下拉
合成**一个**原生时间框（三个下拉仍留在 DOM 里，只是不单独显示）。 */
layoutRange(group);
bindParts(a);
bindParts(b);
/* 🔴🔴 v36：**不合成任何"时间框"，直接把原生的「日期 + 时/分下拉」露出来**。
用户原话（第 2 次反馈，2026-10-09）：
「观影模块，开始时间和结束时间是空白的，无法选择，可以调整为，
前面是日期，后面是时和分，只记录到时和分就行了。时和分，是下拉的。」
⚠️ v35 那一版为什么用户看到的是**一片空白**（我的锅）：
当时只给范围**组**加了 `.is-native-range`，**没给两个端点 `.dt-input`
加 `.is-native`** —— 于是 CSS 里
`html.js .dt-input:not(.is-semi) .dt-native { visibility: hidden; }`
照样命中 ⇒ 控件 `visibility:hidden`（**占着 48px 高度、但完全不可见、点不到**）。
🔴 更糟的是探针当时用 `offsetParent !== null` 判"可见" ——
对 `visibility:hidden` 的元素它**仍然返回 true**，于是连续两轮都"通过"。
⇒ 判可见**必须看 computed visibility**（_fb_b34_dtrange.py 已改）。
⇒ 本版走最笨但最稳的路：**不造新控件**，直接把原有的 日期 + 时/分 下拉显示出来。 */
function revealEndpoint(box) {
var native = box.querySelector('.dt-native');
if (!native) { return; }
// ① 端点加 `.is-native`（压掉"未 .is-semi 就藏原生"那条规则）
box.classList.add('is-native');
// ② 去掉"秒"那一档（用户只要到分）；紧跟它的那个冒号一起收掉
var secEl = native.querySelector('.dt-second');
if (secEl) {
var prev = secEl.previousElementSibling;
if (prev && prev.classList && prev.classList.contains('dt-colon')) { prev.remove(); }
secEl.remove();
}
// ③ 显示（inline 覆盖，避免再被任何 CSS 规则藏住 —— 这是 v35 的教训）
native.style.display = 'contents';
native.style.visibility = 'visible';
box.style.display = '';
box.style.visibility = 'visible';
box.classList.add('has-value');
}
revealEndpoint(a);
revealEndpoint(b);
// 供 fbSetDT / fbUpgradeRange 的既有调用点使用（不再挂 Semi，无需同步）
// 供 fbSetDT / fbUpgradeRange 的既有调用点使用
group.__fbRemount = function () {};
/* ⚠️ 原来这里会隐藏"端点最外层的包装"（因为 Semi 范围控件顶替了两端）。
v35 起两端**就是要显示**的，所以不再隐藏任何东西 ——
v34 那个"共用包装导致整组被藏"的 bug 也随之不再可能发生。
（v34 的修法保留在 _fb_b34_dtrange.py 的断言里：组必须可见。） */
guardRequired(a);
guardRequired(b);
group.setAttribute('data-semi-range-done', '1');
@@ -1459,33 +1435,101 @@
group.classList.add('is-native-range');
}
/* ============================================================================
v37 的共用件（单点与范围两端都走它们）
============================================================================ */
/**
* 把「年 / 月 / 日」三个下拉绑成"改哪个算哪个"，并写回隐藏的 `*_date`。
*
* ⚠️ `*_date` 仍然是**真正的表单字段**（只是 type=hidden）——
* 「提交契约一字不改」是这样在**结构上**保证的，而不是靠前后端约定。
* ⚠️ 改年 / 月会重建"日"那一列：2 月在闰年 29 天、4 月 30 天。
* 原来选的那一天若在新月份里不存在（31 号 → 2 月），**清空**而不是
* 静默挪到别的一天 —— 用户没选过的日子不能替他选。
*/
function bindParts(box) {
var native = box.querySelector('.dt-native');
if (!native) { return; }
var date = native.querySelector('input.dt-date');
var y = native.querySelector('select.dt-year');
var mo = native.querySelector('select.dt-month');
var d = native.querySelector('select.dt-day');
if (!date || !y || !mo || !d) { return; } // 不是"下拉版"（native 模式）→ 无事可做
if (box.__fbBound) { return; }
box.__fbBound = true;
function daysIn(yy, mm) {
return (yy && mm) ? new Date(yy, mm, 0).getDate() : 31; // new Date(y, m, 0) = 上月末
}
function rebuildDays(keep) {
var yy = parseInt(y.value, 10), mm = parseInt(mo.value, 10);
var n = daysIn(yy, mm);
var cur = keep ? d.value : '';
d.innerHTML = '<option value="">日</option>';
for (var i = 1; i <= n; i++) {
var o = document.createElement('option');
o.value = String(i);
o.textContent = i + '日';
d.appendChild(o);
}
d.value = (cur && parseInt(cur, 10) <= n) ? cur : '';
}
function sync() {
var v = (y.value && mo.value && d.value)
? y.value + '-' + pad(+mo.value) + '-' + pad(+d.value)
: '';
if (date.value !== v) {
date.value = v;
date.dispatchEvent(new Event('change', { bubbles: true }));
}
box.classList.toggle('has-value', v !== '');
}
y.addEventListener('change', function () { rebuildDays(true); sync(); });
mo.addEventListener('change', function () { rebuildDays(true); sync(); });
d.addEventListener('change', sync);
rebuildDays(false); // 首屏：把"日"列按当前年月铺对
sync();
// 供 fbSetDT / writeDT 程序化改值之后让三个下拉跟上
box.__fbSyncParts = function () {
var m = (date.value || '').match(/^(\d{4})-(\d{2})-(\d{2})$/);
if (!m) { y.value = ''; mo.value = ''; rebuildDays(false); d.value = ''; return; }
y.value = String(+m[1]);
mo.value = String(+m[2]);
rebuildDays(false);
d.value = String(+m[3]);
};
}
/**
* 范围组排版：两端各占一列，**宽屏一行、窄屏换行**。
*
* ⚠️ 几何全部交给 CSS（flex + flex-wrap + 每端的 min-width），
* 这里**只挂类名**。为什么不在这里算宽度：
* 用 JS 量宽度会在字体没加载完 / 容器动画中量错，而且窗口缩放要重算；
* `flex-wrap` 由浏览器在**每次布局时**自己算，永远是对的。
* 这也正是用户要的：「如果能放得下就放一排；手机上很窄就挤到下一行」。
*/
function layoutRange(group) {
group.classList.add('dt-cols');
}
function upgrade(box) {
if (box.getAttribute('data-semi-done')) { return; }
// 范围对的成员由 upgradeRange 统一处理
if (box.classList.contains('dt-part')) { return; }
var cfg = {};
try { cfg = JSON.parse(box.getAttribute('data-dt') || '{}'); } catch (e) {}
var native = box.querySelector('.dt-native');
if (!native) { return; }
/* 🔴 v36：单点控件也**不合成时间框**了 —— 与范围那两端同一套做法
（见上面 revealEndpoint 的说明）。直接把原生的「日期 + 时/分下拉」显示出来。
⚠️ 秒那一档按用户要求去掉（"只记录到时和分就行了"）。 */
if (!box.__fbRevealed) {
box.__fbRevealed = true;
var secEl1 = native.querySelector('.dt-second');
if (secEl1) {
var prev1 = secEl1.previousElementSibling;
if (prev1 && prev1.classList && prev1.classList.contains('dt-colon')) { prev1.remove(); }
secEl1.remove();
}
}
// 端点加 .is-native（压掉"未 .is-semi 就藏原生"的规则）+ 直接显示
/* v37：单点控件**也不再"升级"** —— 服务端给的就是最终形态（年/月/日 + 时/分下拉）。
这里只负责绑定与打标记。 */
bindParts(box);
box.classList.add('is-native');
box.classList.add('has-value');
native.style.display = 'contents';
native.style.visibility = 'visible';
box.style.visibility = 'visible';
box.__fbRemount = function () {};
guardRequired(box);
box.setAttribute('data-semi-done', '1');
@@ -1507,8 +1551,14 @@
*/
function guardRequired(box) {
var req = box.querySelector('.dt-date[required]');
if (!req) { return; }
req.removeAttribute('required');
/* 🔴 v37：日期改成"年/月/日 下拉 + 隐藏 *_date"之后，
**隐藏框上不能挂 `required`** —— 隐藏控件在表单校验时不可聚焦，
Chrome 会报 "An invalid form control is not focusable"：点了保存
**什么都不发生、也没有红字提示**（这正是引入本守卫的原因）。
所以模板改用 `data-dt-required="1"` 声明"这个控件必填"，由下面自查。 */
var wantReq = box.getAttribute('data-dt-required') === '1';
if (!req && !wantReq) { return; }
if (req) { req.removeAttribute('required'); }
box.setAttribute('data-required', '1');
var form = box.closest('form');
if (!form || form.getAttribute('data-dt-guard')) { return; }
@@ -1523,10 +1573,10 @@
if (bad.length) {
ev.preventDefault();
bad.forEach(function (b) { b.classList.add('dt-missing'); });
// v35：不再有 .dt-semi —— 焦点落到原生日期框（那才是"该补的字段"）
var inp = bad[0].querySelector('.dt-semi input')
// v37：焦点落到**年**那一档（下拉版的第一个可见控件；那才是"该补的字段"）
var inp = bad[0].querySelector('select.dt-year')
|| bad[0].querySelector('.dt-date')
|| bad[0].querySelector('input, select');
|| bad[0].querySelector('select, input');
if (inp) { inp.focus(); }
}
});
@@ -1668,6 +1718,10 @@
});
if (!box) { return false; }
writeDT(box, str);
/* 🔴 v37：隐藏的 *_date 写完还不算完 —— 页面上真正给用户看的是
「年 / 月 / 日」三个下拉，必须让它们**跟着走到同一个值**，
否则会出现"程序设了 15:00，下拉里还写着 09:00"这种最难解释的不一致。 */
if (box.__fbSyncParts) { box.__fbSyncParts(); }
// 原生写完了 —— 现在把 Semi 一侧也刷新成同一个值
var group = box.closest ? box.closest('.dt-range') : null;
if (group && group.getAttribute('data-semi-range-done') && group.__fbRemount) {