v43 第 43 批:六条反馈(界面 5 + 条目详情浮层)

用户 2026-10-11 反馈六条,逐条定位真根因后修复:

① 纪念日「日期」多出一个控件 —— 只保留最新的那个
   两层根因:(a)原生 `input[type=date]` 当初没包在 `.dt-native` 里,
   v42 那条"AntD 挂上后收起原生框"的选择器根本不命中;(b)更要命的是
   `.dt-native` 基类写着 `display: contents` —— 该元素**没有盒子**,
   给它 position/width 完全无效 ⇒ 必须把 display 显式改回 block 才收得起来。

② 编辑纪念日把底层列表页弄没 —— 「修改」原来是整页跳 `days/edit`
   (套 layout = 一张只有弹框的空白页)。改为 `?embed=1` 只吐弹框那一块,
   列表页 JS 取回来替换 `#anNewCard` 并打开 —— 与「新建」同一观感。
   内嵌形态标 `$anModalOnly` 以免打 standalone 标记(关闭时不再跳页)。

③ 拖图裁剪的层被弹框盖住 —— `.crop-overlay` 是 z-index:100 而 `.cal-modal`
   是 200 ⇒ 裁剪层被整块盖住。提到 260(与 v41 的 .cn-modal 同一处理)。

④ 行程弹框里"参与的人"弹不出选人框 —— person_picker.js 只绑定一次,
   而弹框表单是 AJAX 片段 ⇒ 里面的 `.pp` 从未被 init。三件事一起:
   暴露 `window.fbInitPickers()`(幂等)+ layout 暴露 `window.fbLoadPicker()`
   (脚本是按需加载的)+ 塞完片段后补调初始化。

⑤ 日程新建排版/控件/文案 —— 改走观影式 `.mv-grid`(标签对齐 + 冒号);
   起止补上 `$dtPlugin='antd'`(试点正式推广到日程);标签「时间范围」→「开始 / 结束」;
   删三句提示(结束留空 / 多选提醒 / 全天)。

⑥ 条目详情浮层(首页日程 / 首页近期任务 / 日程页条目)——
   点条目不再直接跳页,弹浮层显示详情;「详细信息」跳该来源详情页;
   「编辑」就地换成该来源的编辑表单(四处 `?embed=1` 片段)。
   新增 `templates/_entry_popup.php` + `assets/js/entry_popup.js` +
   `fb_entry_json()`(三个入口共用一个编码函数)。

验证:php -l 157 文件全过;div 深度 33 组合全配平;片段体检 20 片段无越界;
本地 e2e 1510/0;v43 真机 33/0;v43 反向验证 8/0;v38 36/0;v42 33/0;
b31/b32 反向验证 8/0 与 5/0;部署断言本地空跑 RC=0;完整流水线 PUSH_RC=0。
This commit is contained in:
2026-10-12 00:24:20 +08:00
parent 81dfacaf1b
commit 8c651b43eb
17 changed files with 1036 additions and 161 deletions
+54 -5
View File
@@ -1486,7 +1486,15 @@ body[class] .semi-datepicker-day-inhover { background-color: color-mix(in srgb,
Cropper 的四个角手柄画成实心白点,永远落在面板可见区内。 */
.crop-overlay { display: none; }
.crop-overlay.is-open {
display: flex; position: fixed; inset: 0; z-index: 100;
/* 🔴🔴 v43(用户 2026-10-11 第 3 条):「新建行程的时候,如果把地图拖进去,
它不是开始裁剪吗?但是这个弹出的框把裁剪那个框又盖住了,裁剪的框应该放到前面来。」
真根因:裁剪层是 **100**,而行程/观影那些弹框用的 `.cal-modal` 是 **200**
⇒ 从弹框里拖图触发的裁剪层被整块盖在下面 —— 看不见、也点不到。
(与 v41 那个「新建影院弹框被记一场电影盖住」是**同一个坑**,当时把 .cn-modal
提到了 260;这里漏了。)
⇒ 提到 **260**:高于所有自建弹框(.cal-modal 200 / .pp-modal 等),
与 .cn-modal 同层;低于灯箱(300)、预览层(320) —— 那两者是"看大图"的顶级层。 */
display: flex; position: fixed; inset: 0; z-index: 260;
align-items: center; justify-content: center;
padding: 20px; background: rgba(44, 35, 29, .55);
}
@@ -5610,14 +5618,55 @@ h5.md-h, h6.md-h { font-size: 14px; }
· `.dt-antd` 是 antd 的挂载点(宽度交给它);
· 挂上后(`.is-antd`)把**原生 `<input type="date">` 视觉收起** ——
它仍是值载体(antd 通过 change 写它),只是不再显示给用户。
⚠️ 用 clip 收起(不是 display:none):保留可聚焦、可被表单读到,
与 v40 高级搜索那处的取舍一致。 */
.dt-input.is-antd > .dt-native { position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
⚠️ 用 clip 收起(不是 display:none):保留可聚焦、可被表单读到。
🔴🔴 v43(用户 2026-10-11 第 1 条):「日期那里多了一个控件,
只保留我们最新的控件就行,之前那种控件删除」——真根因有两层:
① 纪念日的原生框当初**没包在 `.dt-native` 里** ⇒ 这条选择器根本不命中
(模板已补上包装);
② **更要命的一层**:`.dt-input .dt-native { display: contents }`(第 619 行)
会让这个包装盒**自己不生成盒子**、子元素"提升"成 `.dt-input` 的直接布局项 ——
此时给它 `position:absolute; width:1px` **完全无效**(它没有盒子可定位),
原生框照样按 flex 项排出来 ⇒ 两个控件并排。
⇒ 修法:这里必须把 `display` **从 contents 改成 block**,定位才生效。
(只写 position/width/height 是不够的 —— 这是我第一版的错,探针当场抓到。) */
.dt-input.is-antd > .dt-native {
display: block; position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.dt-input.is-antd > .dt-antd { display: block; width: 100%; }
.dt-input.dt-antd-single { display: block; width: 100%; }
/* 兜底:万一哪天原生框又变成 `.dt-input` 的**直接子元素**(不包 .dt-native 了),
这条按直接子元素也能把它收起来。 */
.dt-input.is-antd > input[type="date"] {
display: block; position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
/* ---- v42(用户第 6 条)简介为空时的那句可点占位 ----
与 `.trip-sum` 同一视觉位置,只是颜色淡一档(它是要点进去补的提示,不是内容)。 */
.trip-sum-empty { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.trip-sum-empty a { color: var(--brand); }
/* ============================================================================
🔴 v43(用户 2026-10-11 第 6 条)条目详情浮层
----------------------------------------------------------------------------
与 .cal-modal 同一形态(遮罩 + 居中面板 + 底栏),只是层级更高一点:
它可能从**另一个浮层**里打开(例如详情页弹框里点了条目),
所以要在 200 之上;但低于"看图"的灯箱(300)/预览层(320)。
⚠️ 与 .cn-modal(260)、.crop-overlay(260) 同层 —— 它们不会同时出现。
⚠️ 面板用 flex 列 + body 滚动,长内容(编辑表单)才有足够的可视区。 */
.fb-entry-modal {
position: fixed; inset: 0; z-index: 260;
display: flex; align-items: flex-start; justify-content: center;
padding: 24px 16px; overflow-y: auto;
background: rgba(44, 35, 29, .55); overscroll-behavior: contain;
}
.fb-entry-modal[hidden] { display: none; }
.fb-entry-panel { width: min(620px, 100%); max-height: calc(100vh - 64px); }
/* 编辑态下正文里就是一张完整表单(内边距由它自己那份 CSS 给)——
这里只保证它不双份留白。 */
.fb-entry-panel .cal-modal-body > .mv-form-inner,
.fb-entry-panel .cal-modal-body > .nf-wrap { padding: 0; }
@media (max-width: 640px) {
.fb-entry-panel { width: 100%; }
}