v24 第 20 批:拖动即时上传 / 观影图片带出 / 行程保存修复 / 日程红线与删除范围与多提醒 / 悬停统一(用户 9 条)

用户 9 条原话要点:
  ①「观影模块,编辑观影,已经保存的海报和票根、合影,都没带进来。」
  ②「个人设置页面,"只影响你自己看到的样子"这个提示删除,不要了。我怎么称呼家人,
     这个卡片,不要了。我的资料这个卡片,不要了。」
  ③「旅程模块,编辑行程,点击保存没有反应。」
  ④「所有上传图片视频和附件的模块,都允许多次拖动添加文件上传,拖动一个进去,
     就开始上传,还可以继续拖动,继续上传,最后统一保存即可。」
  ⑤「添加行程,线路名、承运方,都不要了。车辆,只在出行方式选择自驾时才出现,
     其他情况下默认不出现。出发地和到达地,应该在同一行。」
  ⑥「日程模块,周视图和日视图,应该在视图中间显示一条红线,用来表示当前进行的时间…
     用一个不断从上到下的红线,来表示当前时间在视图上的刻度和位置。」
  ⑦「对于重复的日程,当点击删除的时候,应该提示是删除这一次,还是全部都删除,
     还是删除这一次及以后的。」
  ⑧「日程的提醒,是可以多选的,就是说,一个日程,我可以选择让它 5 分钟提醒,
     10 分钟提醒等等。」
  ⑨「很多按钮的悬停效果非常奇怪,感觉纯粹是换了一个背景色…应该调整所有按钮的悬停效果,
     保持统一,但是不要单纯的换一个不协调的背景色。」

🔴 三个真根因(都是"看着不像 bug"的地方):
  1. **③ 点保存没反应 = `<form>` 嵌套**(HTML 非法):`trips/node_form.php` 的照片缩略图上
     套了 `<form action=photo_del>`,而整块在**外层行程表单内部**。浏览器解析到内层
     `</form>` 时**把外层表单提前关掉** → 「保存」按钮**掉出表单**(真机实测
     `button.form === null`)。源码里完全看不出,**只有真浏览器量 `btn.form` 才现形**;
     且**只有这段行程已经有照片时才触发** —— 所以表现为"有时候好、有时候坏"。
     → 按钮留在原位(布局不动),用 HTML5 `form="id"` 关联到**表单外**的独立表单。
  2. **⑤ 车辆藏不住(第 17 批就写过、一直没生效)**:`.field` 自己声明 `display:flex`,
     作者样式压过浏览器默认的 `[hidden]{display:none}` → `hidden` 形同虚设。
     **本项目第 4 次栽同一个坑**(.att-item / .pv / .pp-item 各一次)→ 补 `.field[hidden]`。
  3. **④ 拖动即时上传的卡片"看不见"**:模板给 `.stage-list` 加了 `hidden`(没人上传时
     不留空边框),JS 建卡片时忘了 `list.hidden = false` → 卡片在 DOM 里但整条清单
     `display:none`、尺寸 0×0。**HTTP 层断言全绿**(HTML 里确实有卡片),
     **只有真机量尺寸才发现** —— 由新写的真机探针抓到。

本批新增能力:
- **拖动即时上传**(第 4 条):新增 `upload_stage.php` + `app/StagedUpload.php` +
  `templates/_stage_drop.php`。拖进来 → **立刻** POST 到暂存目录 → 回 `stoken` →
  放进隐藏字段 `stage[]` → 保存时在 `attach_save_files()` 里**认领**(移文件 + 建附件行)。
  `media.php` 加 `?stage=` 预览(拖完立刻看得见缩略图)。
  ⚠️ 三个必须踩准:**串行队列**(并发会让缩略图顺序乱跳)、**提交守卫**
  (还有没传完就 preventDefault,否则"拖了但没保存上"必然发生)、**卡片清单要 un-hide**。
  ⚠️ 海报/票根走**独立字段名** `stage_poster`/`stage_ticket`(各自单槽位、要按比例重裁)。
  ⚠️ 落点**就近取**(`input.closest('.field')`):一个表单里多个上传区不能串到第一个去。
- **观影编辑带出已存图片**(第 1 条):编辑页显示海报 / 票根 / 合影 + 各自的删除入口;
  新增 `movies/media_del`(只删不换也能删,槽位走白名单);`movies/update` 收编辑页
  新选的照片时**合并**而不是替换(否则一编辑就把已有合影冲掉)。
- **行程表单**(第 5 条):去掉线路名 / 承运方(**库里的值保留**:UPDATE 时不参与,
  与 seat_info/gate 同一套);出发地/到达地包进 `.loc-row` 真同一行;车辆按自驾显隐。
- **当前时间红线**(第 6 条):位置在服务端算(与 `.tg-block` 同一套"24h = 100%"坐标),
  前端每分钟自己挪(对齐到下一分钟整再起定时器),跨午夜 reload;只画在**今天那一列**。
- **重复日程删除三档**(第 7 条):与「编辑」那三档同名同序(全部 / 这一次及以后 /
  只这一次)。「只删这一次」→ `skipOnce`(**绝不删整条系列**);「这一次及以后」→
  老系列截 UNTIL,**必须清掉 COUNT**(两者并存时 COUNT 优先,不清就截不断)。
- **提醒多选**(第 8 条):同列存逗号串(`5,15,60`);Schema 把它从 **INT 改 VARCHAR**
  (INT 存逗号串会被隐式转换,多档会静默只剩第一档);ICS 导出吐**多个 VALARM**。
- **悬停统一**(第 9 条):原来 14 种互不相干的 hover 底色 → 统一成**两套手法**:
  有底色 `filter: brightness(.92)` 同色系加深 + 轻抬升;描边白底 `--hov-veil` 中性薄雾
  + 边框微显。放在 CSS **最末**用一条兜底收口(新按钮自动继承),并把十几条旧规则
  清成"交给统一段"。`person_picker.js` 同时改为按需加载。

验证(本地全套):
- e2e **1004/0**(+21 条本批断言)· 升级 149/0 · 桌面几何 428/0 ·
  **真机探针 25/0**(连续拖两次 / 红线位置与颜色与几何 / 车辆显隐 / 出发到达同行)。
- **反向验证 5/5**:①删除按钮改回嵌套 form ②卡片清单不 un-hide ③观影编辑不渲染海报
  ④车辆隐藏失效 ⑤「只删这一次」做成删全部 —— 五种坏法全部被抓住,还原后复绿 1004/0。
  过程中还**抓到两条弱断言**(只查 DOM 有无、不查可见性/是否真渲染),已一并加强。
- 部署脚本静态断言段本地空跑 **305 条全过**。
This commit is contained in:
2026-10-06 03:14:18 +08:00
parent 1756c6265d
commit c3d00ad66a
20 changed files with 1656 additions and 149 deletions
+119 -20
View File
@@ -164,32 +164,102 @@ $selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
<textarea class="input" id="note" name="note" rows="2"><?= e(old('note', $m['note'] ?? '')) ?></textarea>
</div>
<div class="field">
<label for="poster">海报</label>
<input class="input" id="poster" name="poster" type="file" accept="image/*">
<?php if ($isEdit && !empty($m['poster_key'])): ?>
<span class="tip">已有海报,不选新图就保留原图。</span>
<?php endif; ?>
<?php
/**
* v24 第 20 批 第 1 条:编辑页把**已经存过的**海报 / 票根 / 现场合影**显示出来**。
*
* 用户原话:「观影模块,编辑观影,已经保存的海报和票根、合影,都没带进来。」
* ⚠️ 原来这里只有两句灰字提示("已有海报,不选新图就保留原图。")——
* 也就是说**图上你根本看不见图**:想确认"当时选的是哪张"、或想换掉它,
* 都得先回到详情页看一眼。用户要的是"带进来",即**看得见**。
*
* 做法:能预览的(图片)给缩略图 + 删除;不可预览的给一个下载入口。
* ⚠️ 换图仍然靠"选新文件"(服务端换新图时会顺手删掉旧对象,见 index.php movies/update),
* 所以这里**不需要**"确认换这张"之类的中间态。
* ⚠️ 每一块的删除按钮都关联到一个**独立的表单** —— 它们必须在**外层表单之外**
* (form 嵌套会让外层表单提前关闭,"保存"键就失效了,第 20 批 第 3 条刚栽过)。
* 按钮留在原位、用 HTML5 的 `form="id"` 关联到外面那个表单。
*/
$mHasPoster = $isEdit && !empty($m['poster_key']);
$mHasTicket = $isEdit && !empty($m['ticket_key']);
$mPhotos = $isEdit ? (array)($m['photos'] ?? []) : [];
$mDelForms = []; // 收集起来,在表单**外面**统一渲染
?>
<div class="form-grid" style="margin-top:4px">
<?php /* ---- 海报 ---- */ ?>
<div class="field">
<label for="poster">海报</label>
<?php if ($mHasPoster): ?>
<?php $mDelForms['poster'] = 'movies/media_del'; ?>
<div class="mv-slot">
<a href="<?= e(media_url((string)$m['poster_key'])) ?>" data-prev="image"
data-src="<?= e(media_url((string)$m['poster_key'])) ?>"
data-dl="<?= e(media_url((string)$m['poster_key'], ['dl' => 1])) ?>"
data-name="海报">
<img src="<?= e(media_url((string)$m['poster_key'])) ?>" alt="海报">
</a>
<button class="btn btn-ghost btn-sm" type="submit" form="mv-del-poster"
onclick="return confirm('删掉现在这张海报?')">删除这张</button>
</div>
<?php endif; ?>
<input class="input" id="poster" name="poster" type="file" accept="image/*">
<span class="tip"><?= $mHasPoster ? '想换就选一张新的(旧的会自动删掉)。' : '还没有海报。' ?></span>
<?php $sdSlot = 'poster'; require __DIR__ . '/../_stage_drop.php'; ?>
</div>
<div class="field">
<label for="ticket">票根</label>
<input class="input" id="ticket" name="ticket" type="file" accept="image/*">
<?php if ($isEdit && !empty($m['ticket_key'])): ?>
<span class="tip">已有票根,不选新图就保留原图。</span>
<?php endif; ?>
<?php /* ---- 票根 ---- */ ?>
<div class="field">
<label for="ticket">票根</label>
<?php if ($mHasTicket): ?>
<div class="mv-slot">
<a href="<?= e(media_url((string)$m['ticket_key'])) ?>" data-prev="image"
data-src="<?= e(media_url((string)$m['ticket_key'])) ?>"
data-dl="<?= e(media_url((string)$m['ticket_key'], ['dl' => 1])) ?>"
data-name="票根">
<img src="<?= e(media_url((string)$m['ticket_key'])) ?>" alt="票根">
</a>
<button class="btn btn-ghost btn-sm" type="submit" form="mv-del-ticket"
onclick="return confirm('删掉现在这张票根?')">删除这张</button>
</div>
<?php endif; ?>
<input class="input" id="ticket" name="ticket" type="file" accept="image/*">
<span class="tip"><?= $mHasTicket ? '想换就选一张新的(旧的会自动删掉)。' : '还没有票根。' ?></span>
<?php $sdSlot = 'ticket'; require __DIR__ . '/../_stage_drop.php'; ?>
</div>
</div>
<?php if (!$isEdit): ?>
<div class="field full">
<label for="photo">现场照片(可多选)</label>
<input class="input" id="photo" name="photo[]" type="file" accept="image/*" multiple>
<span class="tip">之后也可以在详情页里逐张补传。</span>
</div>
<?php endif; ?>
<?php /* ---- 现场合影(用户第 1 条点名的三样之一)----
新增时可以一次多选;**编辑时在这里逐张看、逐张删**(与新选的图合并保存)。*/ ?>
<div class="field full">
<label for="photo">现场合影</label>
<?php if ($mPhotos): ?>
<div class="photo-grid">
<?php foreach ($mPhotos as $mp): $mpId = (int)$mp['id']; ?>
<figure class="photo-cell">
<a href="<?= e(media_url((string)$mp['key'])) ?>" data-prev="image"
data-src="<?= e(media_url((string)$mp['key'])) ?>"
data-dl="<?= e(media_url((string)$mp['key'], ['dl' => 1])) ?>"
data-name="现场照片">
<img src="<?= e(media_url((string)$mp['key'])) ?>" alt="">
</a>
<button class="btn btn-ghost btn-sm" type="submit" form="mv-del-photo-<?= $mpId ?>"
onclick="return confirm('删掉这张照片?')">删除</button>
</figure>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php if ($isEdit): ?>
<input class="input" id="photo" name="photo[]" type="file" accept="image/*" multiple>
<span class="tip">可以继续加(可多选);删掉的在保存后生效。</span>
<?php $sdSlot = 'photo'; $sdHint = '也可以把文件直接拖到这里 —— 拖一个就开始上传,可以接着再拖,最后点「保存」一起记下。'; require __DIR__ . '/../_stage_drop.php'; ?>
<?php else: ?>
<input class="input" id="photo" name="photo[]" type="file" accept="image/*" multiple>
<span class="tip">可以多选;之后也能在详情页里逐张补传。</span>
<?php $sdSlot = 'photo'; $sdHint = '也可以把文件直接拖到这里 —— 拖一个就开始上传,可以接着再拖,最后点「记下这场电影」一起记下。'; require __DIR__ . '/../_stage_drop.php'; ?>
<?php endif; ?>
</div>
<div class="btn-row">
<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>
@@ -197,6 +267,35 @@ $selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
</div>
</form>
<?php /* ---- 删除海报 / 票根 / 合影的**独立表单**(必须在外层表单之外)----
⚠️ 见本文件顶部关于 form 嵌套的说明:按钮用 `form="id"` 指过来,按钮位置不变。
⚠️ 关联表单要自带全部字段(csrf / 记录 id / 照片 id)—— 提交的是**它自己**的字段。 */ ?>
<?php if ($mHasPoster): ?>
<form id="mv-del-poster" method="post" action="<?= e(url('movies/media_del')) ?>" class="form-outside">
<?= csrf_field() ?>
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
<input type="hidden" name="slot" value="poster">
</form>
<?php endif; ?>
<?php if ($mHasTicket): ?>
<form id="mv-del-ticket" method="post" action="<?= e(url('movies/media_del')) ?>" class="form-outside">
<?= csrf_field() ?>
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
<input type="hidden" name="slot" value="ticket">
</form>
<?php endif; ?>
<?php foreach ($mPhotos as $mp): ?>
<form id="mv-del-photo-<?= (int)$mp['id'] ?>" method="post"
action="<?= e(url('movies/photo_del')) ?>" class="form-outside">
<?= csrf_field() ?>
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
<input type="hidden" name="photo_id" value="<?= (int)$mp['id'] ?>">
<?php /* 从编辑页删的 → 删完回编辑页(见 index.php movies/photo_del 的说明) */ ?>
<input type="hidden" name="back" value="edit">
</form>
<?php endforeach; ?>
<?php unset($mHasPoster, $mHasTicket, $mPhotos, $mDelForms, $mp, $mpId); ?>
<?php /* ---- 新建影院:弹框(不跳转,见上)---- */ ?>
<div class="cn-modal" id="cinemaNewModal" hidden>
<div class="cn-mask" data-cn-close></div>