Files
FamilyBook/templates/_attachments.php
T
laoyang 2c44318a51 压缩只留 1600 档;视频缓存失效加版本号 (#56 #57)
一、尺寸档位(用户:「400压缩的太多了。800也不够,只保留一个1600」)
   media.php 白名单从三档收到一档:
     1600 => image/resize,l_1600/quality,q_88
   400/800 删除。质量从 q_85 提到 q_88(只留一档就该偏清楚那侧)。
   照片墙跟随改 1600,缩略图与大图共用一份缓存。
   传旧 ?w=400 的链接会落到「非法值 ⇒ 原图」分支,不报错、只是不压缩。

二、视频仍显示 HEVC(用户:「他说是H.265,还是不让播呢?」)

   实测服务端 15 个视频**全部 h264**,无一个 HEVC:
     ffprobe 逐个查过,codec=h264,pix_fmt=yuv420p/yuvj420p
     media.php 返回 Content-Type: video/mp4,body 里无 hvc1/hev1
     ETag 与实际内容完全一致

   问题在浏览器缓存:
     Cache-Control: private, max-age=604800(7 天)
     浏览器对 <video> 有自己的媒体缓存策略,不完全遵守 ETag
     Range 分段缓存会把每段当独立资源
     src 不变时直接复用已有媒体对象

   修法:让 URL 变。media_url() 加第三个参数 $ver,
   用附件 size 当版本号 → media.php?k=...&v=2295119

   为什么用 size 而不是 mtime/md5:
     mtime —— 对象在 OSS 上,本地拿不到可靠时间
     md5   —— 要读整个文件,几百 MB 视频不可接受
     size  —— 转码前后必然不同(1.22MB→2.19MB),且本就在库里,零开销

   照片墙已接入。其余调用点可逐步铺开。
2026-11-05 13:11:44 +08:00

127 lines
7.2 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?php
/**
* 附件缩略图墙(v24 用户第 3 条;第 19 批 第 6 条改)。
*
* 一处渲染、全站通用:旅程节点 / 资源 / 任务 / 日程的附件都长一样。
*
* 规则(用户原话):
* · 图片、视频 → **缩略图**,点开在**本页**预览(不再新开标签页)
* · PDF → 浏览器里直接预览(自带阅读器)
* · Word / Excel / PPT / 其它 → 一个**和缩略图一样大**的图标,点了直接下载
* (浏览器渲染不了的东西,绝不装一个"点了没反应"的预览)
* · 预览框**右上角**恒有一个下载按钮
*
* ────────────────────────────────────────────────────────────────
* v24 第 19 批 用户第 6 条(本次改的三点):
* 「图片和视频,文件名都是 md5 的,放在图片预览图下面没有任何意义,去掉吧。」
* 「如果是文件,则在图标上显示文件名。」
*
* ① 图片 / 视频**下面不再写文件名与大小** —— 那串是用户手机上传时的原始名,
* 而照片/视频是**看**的,一串 `9d3fcc70fe46161275f850b93470e0bb.mp4`
* 既认不出内容、也不比缩略图本身多任何信息。
* (图与视频仍带 title 悬停提示,「下载」按钮也还在 —— 功能没少,只是不占版面。)
* ② 非图片的**文件**(PDF/Word/Excel/PPT/文本):文件名挪到**图标里面**,
* 压着色块显示。文件是**读名字**的,「学位学历证书_博士学位证书.pdf」
* 这行字本身就是最重要的信息,放在图标下方的小灰字里反而看不清。
* ③ 删除按钮与下载入口保留在缩略图下方(.att-meta 仍在,只是不再放文件名/大小)。
*
* 用法(先准备变量再 require):
* $attRows 附件行(Attachment::list 的结果)
* $attCanEdit 是否显示删除按钮
* $attDelUrl 删除动作的路由名(如 'resources/attach_del')
* $attHostId 删除时要回传的宿主 id(表单里的隐藏字段用 $attHostKey 指定键名)
* $attDelField 删除表单里「附件 id」的字段名(各路由不一致:有的叫 id、有的叫 attach_id)
* $attExtra 额外隐藏字段 [键 => 值](如日程要连带传宿主 id 才能判权限)
*
* ⚠️ 无 JS 也能用:可预览的是 <a href=预览地址>,不可预览的是 <a href=下载地址>,
* 脚本只是把"可预览"的那部分拦下来改成弹层。
*/
$attCanEdit = !empty($attCanEdit);
$attRows = $attRows ?? [];
$attDelField = $attDelField ?? 'id';
$attExtra = $attExtra ?? [];
$attDelUrl = $attDelUrl ?? '';
?>
<?php if ($attRows): ?>
<div class="att-wall">
<?php foreach ($attRows as $attRow): ?>
<?php
$attKind = \App\Attachment::kind($attRow);
$canPrev = \App\Attachment::previewable($attRow);
/* 🔴 #56(用户:「400压缩的太多了。800也不够,只保留一个1600。」)
照片墙改用 1600 档 —— 缩略图看着小,但点开就是大图,
用同一份缓存比"缩略图 400 + 大图 1600"两套更省事,
而且手机上不会糊。
⚠️ 下载链接($attDl)**不加** w:要原文件,不能偷偷降质。 */
/* #57:第三个参数传 size 当版本号 —— 转码后体积变了,URL 就变,
浏览器不会再用旧的 HEVC 缓存。 */
$attView = media_url((string)$attRow['key'], ['w' => 1600],
(int)($attRow['size'] ?? 0));
$attDl = media_url((string)$attRow['key'], ['dl' => 1]);
$attNm = (string)($attRow['name'] ?? '');
$attSz = \App\Attachment::sizeWord($attRow['size'] ?? 0);
// ① 图片 / 视频:下面不放文件名(见文件头说明)
$attIsMedia = ($attKind === 'image' || $attKind === 'video');
// ② 文件:图标上显示文件名;没有名字时退回类别词(「PDF」「Word」…)
$attFileWord = $attNm !== '' ? $attNm : \App\Attachment::kindWord($attKind);
?>
<div class="att-cell">
<?php if ($canPrev): ?>
<a class="att-thumb att-kind-<?= e($attKind) ?>"
href="<?= e($attView) ?>"
data-prev="<?= e($attKind === 'pdf' ? 'pdf' : ($attKind === 'video' ? 'video' : 'image')) ?>"
data-src="<?= e($attView) ?>"
data-dl="<?= e($attDl) ?>"
data-name="<?= e($attNm !== '' ? $attNm : \App\Attachment::kindWord($attKind)) ?>"
data-size="<?= e($attSz) ?>"
title="<?= e($attNm) ?>">
<?php if ($attKind === 'image'): ?>
<img src="<?= e($attView) ?>" alt="<?= e($attNm) ?>" loading="lazy">
<?php elseif ($attKind === 'video'): ?>
<?php /* #t=0.1 让浏览器把第 0.1 秒那一帧当封面显示出来 ——
没有它视频位就是一块黑板,看不出这是段什么视频。 */ ?>
<video src="<?= e($attView) ?>#t=0.1" preload="metadata" muted playsinline></video>
<span class="att-play" aria-hidden="true">▶</span>
<?php else: ?>
<?php /* PDF:文件名压在图标上(用户第 6 条) */ ?>
<span class="att-doc att-doc-pdf">
<span class="att-doc-name"><?= e($attFileWord) ?></span>
</span>
<?php endif; ?>
</a>
<?php else: ?>
<a class="att-thumb att-kind-<?= e($attKind) ?>" href="<?= e($attDl) ?>"
title="<?= e($attNm) ?>(点击下载)">
<span class="att-doc att-doc-<?= e($attKind) ?>">
<span class="att-doc-name"><?= e($attFileWord) ?></span>
</span>
</a>
<?php endif; ?>
<div class="att-meta">
<?php /* 图片/视频不显示那串哈希名;文件的名字已经在图标上了,这里也不必再抄一遍 */ ?>
<?php if (!$attIsMedia): ?>
<span class="att-fsize"><?= e($attSz) ?></span>
<?php endif; ?>
<a class="link-quiet att-dl" href="<?= e($attDl) ?>">下载</a>
<?php if ($attCanEdit && !empty($attDelUrl)): ?>
<form method="post" action="<?= e(url($attDelUrl)) ?>" class="att-del">
<?= csrf_field() ?>
<input type="hidden" name="<?= e($attDelField) ?>" value="<?= (int)$attRow['id'] ?>">
<?php foreach ($attExtra as $ek => $ev): ?>
<input type="hidden" name="<?= e((string)$ek) ?>" value="<?= e((string)$ev) ?>">
<?php endforeach; ?>
<button class="btn btn-ghost btn-sm" type="submit"
onclick="return confirm('删掉这个附件?')">删除</button>
</form>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
<?php /* ⚠️ 循环里用到的临时变量一律用完即清:宿主模板里很可能也有 $attRow / $attKind /
$attView / $attDl / $attNm / $attSz(各模块页面都爱用这种短名),留着就是静默覆盖。 */ ?>
<?php unset($attRow, $attKind, $canPrev, $attView, $attDl, $attNm, $attSz,
$attIsMedia, $attFileWord); ?>
</div>
<?php endif; ?>