用户 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 条全过**。
188 lines
7.4 KiB
PHP
188 lines
7.4 KiB
PHP
<?php
|
||
/**
|
||
* 家书 FamilyBook · 附件代理
|
||
*
|
||
* 所有的头像/图片/附件都从这里出去,`?k=<相对键>`。
|
||
*
|
||
* ⚠️ 为什么要一个代理,而不是直接把地址给浏览器:
|
||
* ① **统一**:本地存储的 `/uploads/xxx`、OSS 的 `https://bucket.oss-...`、
|
||
* 挂了 CDN 的自定义域名 —— 三种形态完全不同,前端与数据库都得跟着变。
|
||
* 走代理后,谁都只看到一个 `media.php?k=…`,地址形态恒定。
|
||
* ② **安全**:直连意味着"知道文件名就能看到",也意味着桶必须开公共读。
|
||
* 走代理后,能否取到附件由**登录态**决定;桶可以设成私有;
|
||
* `uploads/` 可以整个禁止 Web 访问(见 uploads/.htaccess),
|
||
* 连目录探测、历史遗留文件的意外暴露一并消掉。
|
||
* ③ **标准**:Content-Type / 缓存 / 下载头由这里统一给,
|
||
* 不再依赖"桶的元数据配得对不对"。
|
||
*
|
||
* 安全约束(都集中在这一处,便于审阅):
|
||
* · 必须登录;未登录一律 401,不吐任何字节
|
||
* · 键必须是**规范化的相对路径**:拒绝 `..`、绝对路径、反斜杠、空字节、点文件
|
||
* · 键的字符集白名单(字母数字与 . _ - / ),杜绝编码绕过
|
||
* · MIME 一律由**内容嗅探**决定,绝不信扩展名、也用云端给的 Content-Type
|
||
* · 能被浏览器当 HTML/JS 执行的一律降级为下载;SVG 额外加 CSP sandbox
|
||
*/
|
||
|
||
declare(strict_types=1);
|
||
|
||
require __DIR__ . '/app/bootstrap.php';
|
||
|
||
use App\Auth;
|
||
use App\Storage\Storage;
|
||
|
||
/** 统一的失败出口 */
|
||
function media_fail(int $code, string $message): void
|
||
{
|
||
http_response_code($code);
|
||
header('Content-Type: text/plain; charset=utf-8');
|
||
header('Cache-Control: no-store');
|
||
echo $message;
|
||
exit;
|
||
}
|
||
|
||
$key = (string)($_GET['k'] ?? '');
|
||
$stageTok = (string)($_GET['stage'] ?? '');
|
||
|
||
// ---- 1. 鉴权 ----
|
||
if (!Auth::check()) {
|
||
// 401 而不是 302:这是给 <img src> 用的端点,跳登录页只会返回一坨 HTML 当成图片
|
||
media_fail(401, '需要登录');
|
||
}
|
||
$familyId = (int)Auth::familyId();
|
||
|
||
/* ---- 1b. 暂存预览(v24 第 20 批 第 4 条)----
|
||
刚拖进来的文件还没"保存",所以它还没有附件行、也没有正式键 —— 但用户
|
||
要**立刻看到缩略图**("拖一个就开始上传",看不见等于没上传)。
|
||
所以这里给一个 `?stage=<令牌>` 的形态:只读**本账号自己**的暂存目录。
|
||
⚠️ 令牌校验与归属检查都在 StagedUpload::read 里(拿到别人的令牌也读不到)。 */
|
||
if ($stageTok !== '') {
|
||
$sf = \App\StagedUpload::read($familyId, (int)Auth::personId(), $stageTok);
|
||
if ($sf === null) {
|
||
media_fail(404, '没有这个暂存文件');
|
||
}
|
||
$sfMime = (string)$sf['mime'];
|
||
if ($sfMime === '') {
|
||
$sfMime = 'application/octet-stream';
|
||
}
|
||
$sfSize = (int)@filesize((string)$sf['path']);
|
||
http_response_code(200);
|
||
header('Content-Type: ' . $sfMime);
|
||
header('Content-Length: ' . $sfSize);
|
||
// 暂存内容随时会被认领/清掉 → 绝不缓存(缓存住会看到"已保存"后的旧份)
|
||
header('Cache-Control: no-store');
|
||
header('X-Content-Type-Options: nosniff');
|
||
readfile((string)$sf['path']);
|
||
exit;
|
||
}
|
||
|
||
// ---- 2. 键净化 ----
|
||
$key = str_replace('\\', '/', $key);
|
||
$key = ltrim($key, '/');
|
||
if ($key === '' || strpos($key, "\0") !== false || strpos($key, '..') !== false) {
|
||
media_fail(404, '没有这个文件');
|
||
}
|
||
if (!preg_match('#^[A-Za-z0-9][A-Za-z0-9._/-]*$#', $key)) {
|
||
media_fail(404, '没有这个文件');
|
||
}
|
||
foreach (explode('/', $key) as $seg) {
|
||
// 点文件(.htaccess 等)永远不给出去;另外挡掉空段
|
||
if ($seg === '' || $seg === '.' || $seg[0] === '.') {
|
||
media_fail(404, '没有这个文件');
|
||
}
|
||
}
|
||
|
||
// ---- 3. 取内容(本地优先,再由当前驱动兜底)----
|
||
$res = Storage::read($familyId, $key);
|
||
$status = (int)($res['status'] ?? 0);
|
||
$body = (string)($res['body'] ?? '');
|
||
|
||
if (empty($res['ok']) || $status < 200 || $status >= 300) {
|
||
if ($status === 404 || $status === 0) {
|
||
media_fail(404, '没有这个文件');
|
||
}
|
||
// 云端出错(403 / 签名失败等)不能假装成 404 ——
|
||
// 那会让「桶权限配错了」看起来像「这个文件没了」,排查方向整个跑偏。
|
||
media_fail(502, '附件存储暂时取不到:' . (string)($res['error'] ?? '未知错误'));
|
||
}
|
||
|
||
// ---- 4. MIME:一律嗅探内容,不用扩展名、不用云端声明 ----
|
||
$extMap = [
|
||
'jpg' => 'image/jpeg', 'jpeg' => 'image/jpeg', 'png' => 'image/png',
|
||
'gif' => 'image/gif', 'webp' => 'image/webp', 'svg' => 'image/svg+xml',
|
||
'pdf' => 'application/pdf', 'txt' => 'text/plain; charset=utf-8',
|
||
'mp4' => 'video/mp4', 'mov' => 'video/quicktime', 'mp3' => 'audio/mpeg',
|
||
];
|
||
$ext = strtolower(pathinfo($key, PATHINFO_EXTENSION));
|
||
$mime = (new \finfo(FILEINFO_MIME_TYPE))->buffer($body) ?: '';
|
||
if ($mime === '' || $mime === 'application/octet-stream') {
|
||
$mime = $extMap[$ext] ?? 'application/octet-stream';
|
||
}
|
||
if ($mime === 'image/svg+xml') {
|
||
// 有些环境下 finfo 认不出 SVG(会给成 text/plain / text/xml),按扩展名补回
|
||
$mime = 'image/svg+xml';
|
||
}
|
||
|
||
/** 能被浏览器当页面/脚本执行的一律降级成下载,避免"上传 SVG / HTML 拿到 XSS" */
|
||
$dangerous = (strpos($mime, 'text/html') !== false)
|
||
|| (strpos($mime, 'xhtml') !== false)
|
||
|| (strpos($mime, 'javascript') !== false)
|
||
|| (strpos($mime, 'x-shockwave') !== false);
|
||
if ($dangerous) {
|
||
$mime = 'application/octet-stream';
|
||
}
|
||
|
||
$size = strlen($body);
|
||
$etag = '"' . md5($key . '|' . $size . '|' . $mime) . '"';
|
||
|
||
// ---- 5. 条件请求 ----
|
||
$inm = trim((string)($_SERVER['HTTP_IF_NONE_MATCH'] ?? ''));
|
||
if ($inm !== '' && $inm === $etag) {
|
||
http_response_code(304);
|
||
header('ETag: ' . $etag);
|
||
header('Cache-Control: private, max-age=604800');
|
||
exit;
|
||
}
|
||
|
||
// ---- 6. Range(附件将来可能是音视频,播放器会拖进度条)----
|
||
$start = 0;
|
||
$end = $size - 1;
|
||
$isRange = false;
|
||
if (($range = trim((string)($_SERVER['HTTP_RANGE'] ?? ''))) !== ''
|
||
&& preg_match('/^bytes=(\d*)-(\d*)$/', $range, $m)
|
||
&& !($m[1] === '' && $m[2] === '')) {
|
||
if ($m[1] === '') { // bytes=-N → 最后 N 字节
|
||
$start = max(0, $size - (int)$m[2]);
|
||
} else {
|
||
$start = (int)$m[1];
|
||
$end = $m[2] === '' ? $size - 1 : min((int)$m[2], $size - 1);
|
||
}
|
||
if ($start > $end || $start >= $size) {
|
||
http_response_code(416);
|
||
header('Content-Range: bytes */' . $size);
|
||
exit;
|
||
}
|
||
$isRange = true;
|
||
}
|
||
|
||
// ---- 7. 输出 ----
|
||
http_response_code($isRange ? 206 : 200);
|
||
header('Content-Type: ' . $mime);
|
||
header('Content-Length: ' . (($end - $start) + 1));
|
||
header('Cache-Control: private, max-age=604800'); // 登录态相关 → 绝不进共享缓存
|
||
header('ETag: ' . $etag);
|
||
header('X-Content-Type-Options: nosniff');
|
||
if ($mime === 'image/svg+xml') {
|
||
// SVG 里能带脚本 → 即便要显示,也禁止它执行脚本、加载外部资源
|
||
header("Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; sandbox");
|
||
}
|
||
if ($isRange) {
|
||
header('Content-Range: bytes ' . $start . '-' . $end . '/' . $size);
|
||
}
|
||
header('Accept-Ranges: bytes');
|
||
$filename = basename($key);
|
||
$disp = !empty($_GET['dl']) ? 'attachment' : 'inline';
|
||
header('Content-Disposition: ' . $disp . '; filename="' . rawurlencode($filename) . '"');
|
||
|
||
echo substr($body, $start, ($end - $start) + 1);
|
||
exit;
|