`），
让用户看得见"这一张已经上去了"。
⚠️ 三个必须踩准的点（都是"看着能跑、实际会丢"的坑）：
· **队列要串行**：用户一次拖 5 个/连着拖几次时，并发 POST 会让"完成顺序"
与"显示顺序"不一致，用户看到的缩略图顺序跳来跳去。这里用一个 FIFO 队列，
一张传完再传下一张（上传是本地网络，串行也够快）。
· **失败必须显示出来**：不能静默丢（"我拖了三张，怎么只上去一张"）。
失败的那张在缩略图上标红并写清原因。
· **保存前要拦住还在上传的**：用户拖完立刻点"保存"时，最后一张可能还在传。
提交时若队列没空，`preventDefault` 并提示等一会儿 —— 否则
"拖了但没保存上"是必然发生的（概率还不低）。
============================================================ */
/**
* 从 `` 里**摘掉某一个已上传成功的文件**（工单 #15 第 2 修）。
*
* 为什么需要它：暂存框把一个文件传到服务器后，会拿 `stoken` 塞进隐藏字段，
* 提交时服务端靠令牌认领。但文件同时也还在 `input.files` 里，
* 表单提交会带上 `$_FILES` ⇒ 服务端**两条路径各存一次** ⇒ 库里两行。
*
* 所以"传完这张"就要把它从 `input.files` 摘掉 —— 且**只摘这一张**。
*
* 实现：`input.files` 是只读 FileList，不能直接删。用 `DataTransfer`
* 重新装一遍剩下那些，再整体赋回去（这是浏览器里唯一通用的办法）。
* 比较用 name+size+lastModified（与 `bindStagePick` 的去重指纹同一口径）。
*/
function dropFromInput(input, target) {
if (!input || !input.files || !target) { return; }
var fp = function (x) {
return (x.name || '') + '|' + (x.size || 0) + '|' + (x.lastModified || 0);
};
var want = fp(target);
var keep = [];
var removed = false;
Array.prototype.slice.call(input.files).forEach(function (x) {
// 只摘**一张**：同名同大小同时间的重复选择里，后面那些继续留着
if (!removed && fp(x) === want) { removed = true; return; }
keep.push(x);
});
if (!removed) { return; }
try {
var dt = new DataTransfer();
keep.forEach(function (x) { dt.items.add(x); });
input.files = dt.files;
} catch (e) {
// 极老的浏览器没有 DataTransfer 构造器 —— 不影响主流程（大不了多存一行），
// 所以**不抛**，只留个痕迹方便排查。
try { input.setAttribute('data-sd-keep', '1'); } catch (e2) { /* noop */ }
}
}
function queueDrop(box, input, files) {
var form = input.form;
if (!form) { return false; }
// ⚠️ v24 第 21 批 第 7 条：清单与提示行现在在框**外面**（同一个 `.upfield` 容器里）——
// 清单放框内的话，加了五张图那个虚线框就变成"大框套着五张图"。
// 所以先在容器里找，找不到才退回框自身（`.upfield` 不在时至少别静默失效：
// 没有清单 = 上传成功却什么都不显示，用户会以为没上去）。
var host = (box.closest && box.closest('.upfield')) || box.parentNode || box;
var list = host.querySelector('[data-stage-list]') || box.querySelector('[data-stage-list]');
var tip = host.querySelector('[data-stage-tip]') || box.querySelector('[data-stage-tip]');
// 没清单就**别往下走**（见文件末尾 return 处的说明）——
// 否则文件传上去了、令牌也塞了，但用户一个字都看不见。
if (!list) { return false; }
// 队列状态挂在 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;
// 提示行同理（模板也给了 hidden）—— 它要说"已上传，可以继续拖"这类话，
// 藏着等于一个字都不说。
if (tip) { tip.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));
// 🔴 工单 #15：`data-stage-slot` 渲染在**框**（`.upbox`）上，不在 input 上。
// 原来这里读 `input.getAttribute(...)` ⇒ **恒为空串**，`slot` 从来没传上去过。
// 对资源附件（photo）看不出差别，但海报/票根（2:3、按比例重裁）会拿到错的槽位。
// 两边都读：框上有就先用框的，兜底再读 input（兼容将来把属性挪过去）。
var slot = box.getAttribute('data-stage-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_token[]` —— 🔴 v24 第 21 批 第 4 条：
// 它原来叫 `stage[]`，与行程表单里那个 `stage`（plan/actual）
// 同名 → PHP 把 `$_POST['stage']` 合并成**数组** →
// 路由 `(string)` 强转成 "Array" → 静默退回 'plan'
// （症状：拖过图的"实际行程"一保存就变回计划）。
// · 海报/票根是 `stage_poster` / `stage_ticket`（各自单槽位、要按比例重裁），
// 写死通用名会让海报存成 1:1、页面上变形。
// 两条都有详细说明在 templates/_stage_drop.php 的头部。
hid.name = box.getAttribute('data-stage-field') || 'stage_token[]';
hid.value = d.stoken;
cell.appendChild(hid);
// 🔴🔴 工单 #15 第 2 修：**已经进暂存区的文件，必须从 input.files 里摘掉**。
//
// 这条是实测出来的 —— 我原来在这里写了「两边都认领也不会重复挂」，
// 那句话是**错的**。服务端有两条独立的入库路径：
// · `attach_save_files()`：先 `StagedUpload::claim(stage_token[])`，
// 再遍历 `$_FILES[$field]` 逐个 `Attachment::save()`
// · `movies/create|update`：先认领 `stage_token[]`，再认领 `$_FILES['photo']`
// 两条都追加到同一张 attachments 表 ⇒ **同一张图存两行**。
//
// 实测证据（`_tooling/_res_attach_db.py` 查库）：
// 点选 1 个文件 → attachments 里 2 行，position 10 / 20，文件名相同；
// 观影「第35批」套件同时红 3 条：2 张→4 行、编辑 +1→6 行。
//
// ⚠️ 为什么可以放心摘：文件**已经在服务器暂存区**（拿了 stoken），
// 提交时靠这个令牌认领。`$_FILES` 只是同一份内容的**第二条冗余通路**。
// 摘掉它不丢文件，只是不让它被存第二遍。
// （之前不敢摘是怕"点选的文件反而没存上"—— 那是**没有实测**的猜测。）
//
// ⚠️ 必须**只摘这一张**，不能整个清空：多选时后面的还排在上传链里，
// 整个清空会让"还没传完的那几张"连表单都带不上（它们的令牌还没生成）。
dropFromInput(input, f);
// 撤回这张（令牌与卡片一起去掉；服务端的暂存由 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--; }); // 无论成败都要减，否则守卫会把表单永久锁住
});
});
return true;
}
/**
* 「**点选**文件后也要有反应」—— 工单 #15。
*
* 用户原话：「资源模块新建资源时，有一个弹窗。点击'上传附件'选择文件后，
* 页面没有任何变化。虽然文件实际上已经上传成功（保存也能正常保存），
* 但界面并没有显示已上传，导致无法确认附件是否真正上传成功。」
*
* 🔴 根因：**暂存框只接了拖放，没接 change**。
* 这个片段（`_stage_drop.php`）的框有三个入口：
* · 点框 → `bindBox` → `input.click()` （能打开选择框 ✓）
* · 拖文件进来 → `bindZone` 的 drop → `queueDrop()` （有缩略图 ✓）
* · **点选文件** → 触发 input 的 `change` 事件 （**没人听** ✗）
* `bindFileEcho()` 里那句 `if (box.hasAttribute('data-drop-stage')) { return; }`
* 是**故意**跳过暂存框的（理由写在它上面：暂存框有自己的清单 UI，别抢）。
* 问题在于：暂存框自己的清单 UI **只在 queueDrop 里画**，而 queueDrop
* 只被 drop 事件调用 ⇒ 点选这条路，文件进了 `input.files`、
* 也随表单提交成功了（所以用户说"保存也能正常保存"），
* 但界面上**一个像素都没变**。
*
* ⚠️ 为什么不是"也给暂存框挂 bindFileEcho"：那只会把框里那句话换成文件名，
* 而用户真正需要知道的是"**上传成功没有**"—— 状态、失败原因、能否撤掉。
* 这些只有 queueDrop 的卡片能给。所以正确修法是**把文件送进 queueDrop**，
* 让点选和拖放走**同一条**链路（behavior parity，而不是各写一套 UI）。
*
* ⚠️⚠️ 关于 `input.files` 与 `$_FILES`（这条我一开始**判断错了，已实测纠正**）：
* 我原来在这里写的是"直接调 queueDrop 不能清空 input.files，
* 因为服务端还会看 `$_FILES`，清空会让点选的文件反而没存上；
* 而两边都认领也不会重复挂"。
*
* 后半句是**错的**，而且代价很实在：
* 服务端有两条**独立**的入库路径（`attach_save_files()` 里先 claim 令牌、
* 再遍历 `$_FILES` 逐个 save；`movies/create` 里同样两段），
* 两边都追加到同一张 attachments 表 ⇒ **同一张图存两行**。
* 查库实测：点选 1 个文件 → 库里 2 行；观影第 35 批套件同时红 3 条。
*
* ⇒ 正确做法是 **传完就把它从 `input.files` 摘掉**（见 `dropFromInput`），
* 只留暂存令牌这一条路径。文件已经在服务器暂存区，令牌负责认领，不会丢。
* （"清空会丢"是我当时的猜测，没有实测支撑 —— 所以现在改成有实测的写法。）
*
* ⚠️ 要**去重**：`change` 事件在"同一个文件选两次"时也会触发（清空再选），
* 重复调用 queueDrop 会让同一份文件传两遍、出现两张卡片。
* 这里用 `data-sd-picked` 记上一次的指纹（name+size+lastModified）。
*/
function bindStagePick(box, input) {
if (!box || !input || box.getAttribute('data-sd-pick') === '1') { return; }
// 只给**暂存型**框挂（非暂存框由 bindFileEcho 负责换文案，别抢）。
if (!box.hasAttribute('data-drop-stage')) { return; }
box.setAttribute('data-sd-pick', '1');
input.addEventListener('change', function () {
var picked = input.files ? Array.prototype.slice.call(input.files) : [];
if (!picked.length) { return; }
var fp = picked.map(function (f) {
return (f.name || '') + '|' + (f.size || 0) + '|' + (f.lastModified || 0);
}).join(',');
if (fp === box.getAttribute('data-sd-picked')) { return; }
box.setAttribute('data-sd-picked', fp);
queueDrop(box, input, picked);
});
}
/** 取当前表单里的 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;
if (!t) { return false; }
if (t.types) {
for (var i = 0; i < t.types.length; i++) {
if (t.types[i] === 'Files') { return true; }
}
}
return false;
}
/**
* 一个 input：既给它自己挂落点，也给"指向它的那张预览图 / 那个上传框"挂（见 bindZone）。
*
* ⚠️ v24 第 21 批 第 7 条：给「点击或拖动进行上传」那个框补**点击**。
* 用户原话：「点击这个框实现点击上传按钮的功能」——
* 框是 ，它**不会**自己打开文件选择框（那是 /