节点详情页:所有附件统一展示,不再把图片和其它附件分开列

之前照片墙只显示图片,非图片附件只给一句「另有 N 个非图片附件」,要看得再进管理页。
现在全部附件同列在照片与附件区:图片仍是缩略图,视频 / PDF / Word 等按 MIME
显示类型图标(🎬 / 📄 / 📎),和缩略图一样占满 4:3 格子。

点击行为沿用批 7 的灯箱四态:图片 / 视频 / PDF 直接预览(视频可拖进度条、
PDF 内嵌阅读器),预览不了的(Word / ZIP 等)灯箱里给下载按钮。
页头与底部入口文案同步改为「附件 (N) / 管理附件(N)」,
最多展示 12 个,超出给「+N 个」入口进管理页。

已验证:本地全链 11 步全绿(渲染检查 316 项,新增图标格 / 四态标记 /
不再出现「另有」等 8 项断言);远端 e2e 322 项 0 失败(新增详情页统一展示
专项断言 7 项);部署后双 PHP 渲染逐字节一致、60 文件哈希一致。
This commit is contained in:
2026-09-23 17:36:58 +08:00
parent cbfdcb9d16
commit a24099fc53
2 changed files with 48 additions and 25 deletions
+44 -25
View File
@@ -57,7 +57,7 @@ if (!empty($node['duration_minutes'])) {
</div>
<div class="actions" style="display:flex; gap:8px; flex-wrap:wrap;">
<a href="<?= url('nodes/edit', ['id' => $node['id']]) ?>" class="btn">编辑节点</a>
<a href="<?= url('attachments/node', ['id' => $node['id']]) ?>" class="btn">📷 照片 (<?= (int)$attachmentCount ?>)</a>
<a href="<?= url('attachments/node', ['id' => $node['id']]) ?>" class="btn">📎 附件 (<?= (int)$attachmentCount ?>)</a>
<a href="<?= url('activities/show', ['id' => $node['activity_id']]) ?>" class="btn">返回活动</a>
<form method="post" action="<?= url('nodes/destroy') ?>" style="display:inline;"
onsubmit="return confirm('确定删除这个节点?它的附件、参与记录、花销和讨论都会一并删除。');">
@@ -144,33 +144,55 @@ if (!empty($node['duration_minutes'])) {
</div>
<?php
/* 照片墙:地址一律走 media/show 代理,页面里不出现存储后端的真实地址 */
$photoRows = [];
$otherCount = 0;
foreach (($attachments ?? []) as $attRow) {
if (Attachments::isImageRow($attRow)) {
$photoRows[] = $attRow;
} else {
$otherCount++;
}
}
$showPhotos = array_slice($photoRows, 0, 12);
/* 附件墙(批 8 起统一展示):不再把图片和其它附件分开列 ——
图片给缩略图,视频 / PDF / 其它给类型图标;全部走 media/show 代理,
能预览的(图片 / 视频 / PDF)点击进灯箱直接看,
预览不了的(Word / ZIP 等)灯箱里给下载按钮(见 _lightbox.php) */
$showAtts = array_slice(array_values($attachments ?? []), 0, 12);
$attIcon = static function (string $mime): string {
if (strpos($mime, 'video/') === 0) return '🎬';
if ($mime === 'application/pdf') return '📄';
return '📎';
};
?>
<?php if (!empty($attachments)): ?>
<h2 class="section-title" id="photos">照片与附件(<?= count($attachments) ?>)</h2>
<?php if (!empty($showPhotos)): ?>
<?php if (!empty($showAtts)): ?>
<div class="photo-grid photo-grid-sm">
<?php foreach ($showPhotos as $attRow): ?>
<?php /* js-photo:点击在当前页灯箱里看大图,不再新开窗口(见 _lightbox.php) */ ?>
<a class="photo-card js-photo" href="<?= e(media_att((int)$attRow['id'])) ?>"
data-cap="<?= e($attRow['file_name']) ?>" title="<?= e($attRow['file_name']) ?>">
<img src="<?= e(media_att((int)$attRow['id'])) ?>" alt="<?= e($attRow['file_name']) ?>" loading="lazy">
</a>
<?php foreach ($showAtts as $attRow):
$attId = (int)$attRow['id'];
$attName = (string)($attRow['file_name'] ?? '');
$attMime = (string)($attRow['mime_type'] ?? '');
$isImg = Attachments::isImageRow($attRow);
if ($isImg) {
$kind = 'image';
} elseif (strpos($attMime, 'video/') === 0) {
$kind = 'video';
} elseif ($attMime === 'application/pdf') {
$kind = 'pdf';
} else {
$kind = 'file';
}
?>
<?php if ($isImg): ?>
<?php /* js-photo:图片点击在当前页灯箱里看大图 */ ?>
<a class="photo-card js-photo" href="<?= e(media_att($attId)) ?>"
data-cap="<?= e($attName) ?>" title="<?= e($attName) ?>">
<img src="<?= e(media_att($attId)) ?>" alt="<?= e($attName) ?>" loading="lazy">
</a>
<?php else: ?>
<?php /* js-media:非图片走四态灯箱(视频/PDF 可预览,其它给下载) */ ?>
<a class="photo-card photo-card-icon js-media" href="<?= e(media_att($attId)) ?>"
data-kind="<?= $kind ?>" data-cap="<?= e($attName) ?>"
data-dl="<?= e(media_att($attId, true)) ?>" title="<?= e($attName) ?>">
<span class="attachment-icon"><?= $attIcon($attMime) ?></span>
</a>
<?php endif; ?>
<?php endforeach; ?>
<?php if (count($photoRows) > count($showPhotos)): ?>
<?php if (count($attachments) > count($showAtts)): ?>
<a class="photo-more" href="<?= url('attachments/node', ['id' => (int)$node['id']]) ?>#photos">
+<?= count($photoRows) - count($showPhotos) ?><span>张</span>
+<?= count($attachments) - count($showAtts) ?><span>个</span>
</a>
<?php endif; ?>
</div>
@@ -178,11 +200,8 @@ $showPhotos = array_slice($photoRows, 0, 12);
<div class="photo-bar">
<a class="btn btn-sm" href="<?= url('attachments/node', ['id' => (int)$node['id']]) ?>">
📷 管理照片(<?= count($attachments) ?>)
📎 管理附件(<?= count($attachments) ?>)
</a>
<?php if ($otherCount > 0): ?>
<span class="muted">另有 <?= (int)$otherCount ?> 个非图片附件</span>
<?php endif; ?>
</div>
<?php endif; ?>