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:
+225
-1
@@ -401,7 +401,22 @@
|
||||
over(false);
|
||||
var files = Array.prototype.slice.call(e.dataTransfer.files || []);
|
||||
if (!files.length) { return; }
|
||||
// 目标是普通文件框时，**单选的只取第一个**（多选也塞多个会与 accept 语义打架：
|
||||
// ⚠️ 目标是**暂存式**拖放区（第 20 批 第 4 条）→ 文件直接**即刻上传**，
|
||||
// 一个接一个排队；用户可以接着再拖，最后一次"保存"统一认领。
|
||||
// 普通文件框（没有 data-drop-stage）仍走第 19 批那套"写回 input.files"。
|
||||
// 🔴 找落点必须**就近**：一个表单里可能有好几个（电影的 海报/票根/合影 三块），
|
||||
// `form.querySelector('[data-drop-stage]')` 只会拿到**第一个** ——
|
||||
// 那样往"票根"里拖会跑到"海报"上（用户看到的是"拖到这儿，结果上到那儿"）。
|
||||
// 所以先找**同一个 .field 里**的那个，找不到才退回表单里的第一个。
|
||||
var stageBox = null;
|
||||
var ownField = input.closest ? input.closest('.field') : null;
|
||||
if (ownField) { stageBox = ownField.querySelector('[data-drop-stage]'); }
|
||||
if (!stageBox && input.form) { stageBox = input.form.querySelector('[data-drop-stage]'); }
|
||||
if (stageBox) {
|
||||
queueDrop(stageBox, input, files);
|
||||
return;
|
||||
}
|
||||
// 单选的只取第一个（多选也塞多个会与 accept 语义打架：
|
||||
// 题图/头像那种单选框塞两个，浏览器提交的仍是第一个，但用户会以为两个都传了）
|
||||
var multi = input.hasAttribute('multiple');
|
||||
var put = multi ? files : files.slice(0, 1);
|
||||
@@ -420,6 +435,166 @@
|
||||
});
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
暂存式"拖一个就上传"（v24 第 20 批 用户第 4 条）
|
||||
------------------------------------------------------------
|
||||
用户原话：「所有上传图片视频和附件的模块，都允许多次拖动添加文件上传，
|
||||
拖动一个进去，就开始上传，还可以继续拖动，继续上传，
|
||||
最后统一保存即可。」
|
||||
|
||||
做法（三条链路，缺一不可）：
|
||||
① 拖进来 → **立刻** POST 到 upload_stage.php（`?r=upload/stage` 由路由转过去），
|
||||
服务端落进暂存目录并回一个 `stoken`；
|
||||
② 把 stoken 塞进隐藏字段 `<input type=hidden name="stage[]">`——
|
||||
表单提交时这些令牌就跟着走了，业务路由在 attach_save_files 里**认领**；
|
||||
③ 立刻画一张缩略图（指向 `media.php?stage=<stoken>`），
|
||||
让用户看得见"这一张已经上去了"。
|
||||
|
||||
⚠️ 三个必须踩准的点（都是"看着能跑、实际会丢"的坑）：
|
||||
· **队列要串行**：用户一次拖 5 个/连着拖几次时，并发 POST 会让"完成顺序"
|
||||
与"显示顺序"不一致，用户看到的缩略图顺序跳来跳去。这里用一个 FIFO 队列，
|
||||
一张传完再传下一张（上传是本地网络，串行也够快）。
|
||||
· **失败必须显示出来**：不能静默丢（"我拖了三张，怎么只上去一张"）。
|
||||
失败的那张在缩略图上标红并写清原因。
|
||||
· **保存前要拦住还在上传的**：用户拖完立刻点"保存"时，最后一张可能还在传。
|
||||
提交时若队列没空，`preventDefault` 并提示等一会儿 —— 否则
|
||||
"拖了但没保存上"是必然发生的（概率还不低）。
|
||||
============================================================ */
|
||||
function queueDrop(box, input, files) {
|
||||
var form = input.form;
|
||||
if (!form) { return; }
|
||||
var list = box.querySelector('[data-stage-list]');
|
||||
var tip = box.querySelector('[data-stage-tip]');
|
||||
// 队列状态挂在 box 上：**跨多次拖放**共享（用户拖一次、再拖一次，仍要串行）
|
||||
var st = box.__stage || (box.__stage = { pending: 0, chain: Promise.resolve() });
|
||||
|
||||
// 提交守卫：还有没传完的就别让它提交（见上面第 ③ 点）。
|
||||
// ⚠️ 只挂一次（用 __stageGuard 记着）—— 反复拖会让 form 上叠出十几个监听。
|
||||
if (!st.guard) {
|
||||
st.guard = true;
|
||||
form.addEventListener('submit', function (ev) {
|
||||
if (st.pending > 0) {
|
||||
ev.preventDefault();
|
||||
if (tip) { tip.textContent = '还有 ' + st.pending + ' 个文件在上传，稍等一下再保存。'; }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
files.forEach(function (f) {
|
||||
// 每张一个卡片：立刻出现"上传中"，成功换成缩略图，失败标红
|
||||
var cell = document.createElement('div');
|
||||
cell.className = 'stage-cell is-uploading';
|
||||
var nm = document.createElement('span');
|
||||
nm.className = 'stage-name';
|
||||
nm.textContent = f.name;
|
||||
var meta = document.createElement('span');
|
||||
meta.className = 'stage-meta';
|
||||
meta.textContent = '上传中…';
|
||||
cell.appendChild(nm);
|
||||
cell.appendChild(meta);
|
||||
if (list) {
|
||||
list.appendChild(cell);
|
||||
// 🔴 必须把它**显示出来**：模板里 `.stage-list` 初始带 `hidden`
|
||||
// （没人上传时不留一条空边框）。不 un-hide 的话卡片确实建出来了、
|
||||
// 但整条清单是 display:none —— 用户看到的是"拖了没反应"，
|
||||
// 而且缩略图也点不到（真机探针实测：卡片在 DOM 里、尺寸 0×0）。
|
||||
list.hidden = false;
|
||||
}
|
||||
|
||||
st.pending++;
|
||||
// 🔴 串行：把这次上传接到链尾。**不能 Promise.all** ——
|
||||
// 并发时"谁先传完"不定，缩略图的顺序会跳（见上面第 ① 点）。
|
||||
st.chain = st.chain.then(function () {
|
||||
var fd = new FormData();
|
||||
fd.append('file', f);
|
||||
fd.append('_csrf', csrfToken(form));
|
||||
var slot = input.getAttribute('data-stage-slot') || '';
|
||||
if (slot) { fd.append('slot', slot); }
|
||||
return fetch(stageUrl, { method: 'POST', body: fd, credentials: 'same-origin' })
|
||||
.then(function (r) {
|
||||
// ⚠️ 服务端哪怕回 419/500，也要**先试 json**：它总归是 JSON 契约；
|
||||
// 解析不出来才按"不是 JSON"报（比如整页 HTML 的错误页）。
|
||||
return r.json().catch(function () {
|
||||
return { ok: false, error: '服务器返回的不是 JSON（可能登录已过期）。' };
|
||||
});
|
||||
})
|
||||
.then(function (d) {
|
||||
if (d && d.ok) {
|
||||
cell.className = 'stage-cell';
|
||||
cell.innerHTML = '';
|
||||
if (d.is_image) {
|
||||
var im = document.createElement('img');
|
||||
im.src = d.url;
|
||||
im.alt = '';
|
||||
cell.appendChild(im);
|
||||
} else {
|
||||
var ic = document.createElement('span');
|
||||
ic.className = 'stage-ico';
|
||||
ic.textContent = d.kind || '文件';
|
||||
cell.appendChild(ic);
|
||||
}
|
||||
var n2 = document.createElement('span');
|
||||
n2.className = 'stage-name';
|
||||
n2.textContent = d.name || f.name;
|
||||
cell.appendChild(n2);
|
||||
var m2 = document.createElement('span');
|
||||
m2.className = 'stage-meta';
|
||||
m2.textContent = d.size_word || '';
|
||||
cell.appendChild(m2);
|
||||
// 令牌进隐藏字段 → 随表单提交，服务端在 attach_save_files 里认领它
|
||||
var hid = document.createElement('input');
|
||||
hid.type = 'hidden';
|
||||
// ⚠️ 字段名由落点决定：附件类是 `stage[]`（服务端一次认领一批），
|
||||
// 海报/票根是 `stage_poster` / `stage_ticket`（各自单槽位、要按比例重裁）。
|
||||
// 写死 `stage[]` 会让海报存成 1:1、页面上变形（见 _stage_drop.php 的说明）。
|
||||
hid.name = box.getAttribute('data-stage-field') || 'stage[]';
|
||||
hid.value = d.stoken;
|
||||
cell.appendChild(hid);
|
||||
// 撤回这张（令牌与卡片一起去掉；服务端的暂存由 TTL 清）
|
||||
var x = document.createElement('button');
|
||||
x.type = 'button';
|
||||
x.className = 'stage-x';
|
||||
x.textContent = '×';
|
||||
x.title = '撤掉这张';
|
||||
x.addEventListener('click', function () {
|
||||
if (hid.parentNode) { hid.parentNode.removeChild(hid); }
|
||||
if (cell.parentNode) { cell.parentNode.removeChild(cell); }
|
||||
// 一张都不剩了就把清单藏回去（别留一条空边框 —— 与初始状态一致）
|
||||
if (list && !list.querySelector('.stage-cell')) { list.hidden = true; }
|
||||
if (tip) { tip.textContent = '已撤掉，保存时不会带上它。'; }
|
||||
});
|
||||
cell.appendChild(x);
|
||||
if (tip) { tip.textContent = '已上传，可以继续拖；点「保存」时才真正记到这条上。'; }
|
||||
} else {
|
||||
// 🔴 失败必须**看得见**（写在卡片上，不弹 alert）：静默丢是
|
||||
// "我拖了三张怎么只上去一张"的根源。
|
||||
cell.className = 'stage-cell is-failed';
|
||||
meta.textContent = (d && d.error) ? d.error : '上传失败';
|
||||
if (tip) { tip.textContent = '有文件没传上去，见红色那张。'; }
|
||||
}
|
||||
})
|
||||
.catch(function (err) {
|
||||
cell.className = 'stage-cell is-failed';
|
||||
meta.textContent = '网络错误：' + (err && err.message ? err.message : '重试一下');
|
||||
if (tip) { tip.textContent = '有文件没传上去，见红色那张。'; }
|
||||
})
|
||||
.then(function () { st.pending--; }); // 无论成败都要减，否则守卫会把表单永久锁住
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** 取当前表单里的 CSRF（上传接口要带；与 csrf_field() 同一个值） */
|
||||
function csrfToken(form) {
|
||||
var el = form.querySelector('input[name="_csrf"]');
|
||||
return el ? el.value : '';
|
||||
}
|
||||
|
||||
/** 暂存上传地址（从 meta 读，页面上没有就退回约定路由） */
|
||||
var stageUrl = (function () {
|
||||
var m = document.querySelector('meta[name="fb-stage-url"]');
|
||||
return (m && m.getAttribute('content')) || 'index.php?r=upload/stage';
|
||||
})();
|
||||
|
||||
/** 这次拖动里有没有真文件（拖选中的文字/链接也会触发 drag 事件，那些不该管） */
|
||||
function hasFiles(e) {
|
||||
var t = e.dataTransfer;
|
||||
@@ -1378,3 +1553,52 @@
|
||||
if ('requestIdleCallback' in window) { requestIdleCallback(boot, { timeout: 3000 }); }
|
||||
else { setTimeout(boot, 500); }
|
||||
})();
|
||||
|
||||
/* ============================================================
|
||||
周/日视图的「当前时间红线」自己走（v24 第 20 批 用户第 6 条）
|
||||
------------------------------------------------------------
|
||||
用户原话：「用一个**不断**从上到下的红线，来表示当前时间在视图上的刻度和位置。」
|
||||
⚠️ 服务端只给"渲染那一刻"的位置（%.4f，见 index.php）—— 用户开着页面不动，
|
||||
过一小时线还停在原处就荒谬了。所以这里起一个定时器让它自己挪。
|
||||
⚠️ 定时器**每分钟**走一次即可（线的精度就是分钟；每秒重排会白白耗电，
|
||||
而这条线在视野里根本看不出每秒的差别）。
|
||||
⚠️ 位置算法必须与 .tg-block / 服务端**同一套**：列高固定 24 小时 →
|
||||
1 分钟 = 100/1440 %。三处口径一致，线才不会与日程块错位。
|
||||
⚠️ 跨过午夜时线要**消失**（那一天已经不是"今天"了）—— 这里用"日期变了就重载一次"
|
||||
处理，而不是把算出来的 top 硬塞到 >100%（那会让线停在格子底部不动，
|
||||
看着像卡住了）。重载一次最稳，而且一天最多发生一次。
|
||||
⚠️ 只在页面上真有这条线时才起定时器（月视图没有 `.tg-now`）。
|
||||
============================================================ */
|
||||
(function () {
|
||||
'use strict';
|
||||
var lines = document.querySelectorAll('[data-now-line]');
|
||||
if (!lines.length) { return; }
|
||||
|
||||
var dayAtLoad = new Date().toDateString();
|
||||
|
||||
function place() {
|
||||
var d = new Date();
|
||||
if (d.toDateString() !== dayAtLoad) {
|
||||
// 已经跨过午夜：这一列不再是"今天"了 → 让服务端重新渲染一次（见上面第 4 点）
|
||||
window.location.reload();
|
||||
return;
|
||||
}
|
||||
var pct = ((d.getHours() * 60 + d.getMinutes()) / 1440) * 100;
|
||||
Array.prototype.forEach.call(lines, function (el) {
|
||||
el.style.top = pct.toFixed(4) + '%';
|
||||
el.setAttribute('title', '现在 ' + ('0' + d.getHours()).slice(-2) + ':' + ('0' + d.getMinutes()).slice(-2));
|
||||
});
|
||||
}
|
||||
|
||||
// 对齐到"下一分钟整"再开始（否则第一次跳动会晚最多 60 秒，看着像没动）
|
||||
var msToNextMinute = 60000 - (Date.now() % 60000);
|
||||
setTimeout(function () {
|
||||
place();
|
||||
setInterval(place, 60000);
|
||||
}, msToNextMinute);
|
||||
|
||||
// 从后台切回来时立刻纠一次（有些浏览器会冻结后台标签页的定时器）
|
||||
document.addEventListener('visibilitychange', function () {
|
||||
if (!document.hidden) { place(); }
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user