地图与正文同宽 / 详情页封面改列表行样式 / 封面拖拽上传（批 21）

① 带地图的页面（首页旅行地图、详情页行程地图）原本铺满整个视口（批 18 的负 margin 出血），用户反馈「上面正文固定宽、下面地图铺满屏」看着奇怪 → 改回与正文版心同宽，bleed() 已删、CSS 去边框覆盖已删。 ② 活动详情页顶部整幅 16:9 大封面太大 → 改用活动列表同款「封面行」（.act-row-static：小封面 + 参与人 + 统计），数据复用 collectStats 同一聚合口径；.activity-cover 样式删除。 ③ 创建/编辑活动封面支持直接把图片拖进上传区：drop→DataTransfer 塞给原有 file input 并触发 change，类型/大小校验与裁剪流程原样复用；拖入悬停给高亮反馈。验证：本地全链（含 _map12/_map16 同宽与封面行断言、5 档视口）全绿；部署哨兵同步改向（批 17/18 锚定旧实现的断言全部反向或改口径）。
2026-09-24 22:13:29 +08:00
parent 08f491c7ab
commit 331fadfb48
5 changed files with 108 additions and 71 deletions
@@ -352,19 +352,8 @@ hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
 .card-body h3 a { color: var(--text); }
 .card-body h3 a:hover { color: var(--accent); text-decoration: none; }

-/* 封面是按 16:9 裁的（activities/form.php 里的 Cropper aspectRatio 就是 16/9），
-   展示端必须同比例 —— 不然辛苦裁好的构图在这里又被切掉一块。
-   ⚠️ 别再加 max-height：容器比例一旦被改，object-fit: cover 就重新裁一次图。 */
-.activity-cover {
-    position: relative; border-radius: var(--radius-lg); overflow: hidden;
-    margin-bottom: 20px; background: var(--bg-soft);
-    aspect-ratio: 16 / 9;
-}
-.activity-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.activity-cover .cover-placeholder {
-    width: 100%; height: 100%;
-    display: flex; align-items: center; justify-content: center;
-}
+/* 批 21：详情页顶部不再放整幅 16:9 大封面（原大图容器样式已删），
+   改用列表同款 .act-row（含 .act-row-cover，仍是 16:9）—— 见「活动列表」一节。 */

 /* ── 8. 时间轴与节点卡片 ─────────────────────────────────────────────────── */
 .timeline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@@ -923,7 +912,7 @@ video.video-thumb.video-thumb-mini {
   ⚠️ width / height / object-fit 必须写在 **img** 上，不能写在外层 div 上 ——
      写错地方图片就完全不受约束，会按原始尺寸铺出来：头像 400×400、封面
      1920×1080，直接把下面的表单盖住（这就是「头像非常大、整页错位」的根）。
-      对照写对了的 .card-cover img / .activity-cover img。 */
+      对照写对了的 .card-cover img / .act-row-cover img。 */
 .avatar-preview {
    position: relative; flex: none;
    width: 84px; height: 84px; border-radius: 50%;
@@ -979,6 +968,8 @@ video.video-thumb.video-thumb-mini {
 .avatar-preview, .cover-preview { transition: border-color .15s, background .15s; }
 .avatar-upload:hover .avatar-preview,
 .cover-upload:hover .cover-preview { border-color: var(--accent); background: var(--accent-soft); }
+/* 批 21：把图片拖进上传区时给个高亮反馈（松手即走原有的裁剪流程） */
+.cover-upload.dragover .cover-preview { border-color: var(--accent); background: var(--accent-soft); }

 .avatar-upload-actions, .cover-upload-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 0;
@@ -1393,31 +1384,23 @@ video.video-thumb.video-thumb-mini {
 .act-member-more { font-size: 12.5px; color: var(--text-mute); align-self: center; }
 .act-row-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }

+/* 批 21：详情页顶部复用列表行样式展示「小封面 + 参与人/统计」。
+   它不是链接（详情页就在这儿），压掉 hover 反馈、留出与标题区的间距。 */
+.act-row-static { margin-bottom: 20px; cursor: default; }
+.act-row-static:hover { border-color: var(--border); box-shadow: none; }
+
@media (max-width: 560px) {
    .act-row { grid-template-columns: 104px 1fr; gap: 12px; padding: 10px; }
 }

-/* ── 23. 地图铺满整屏（批 18）──────────────────────────────────────────── */
-/* 行程路线 / 旅行地图：**突破正文版心，占满整个视口宽度**；
-   高度跟着视口高度走 —— 屏幕越大容器越大，地图显示的地理范围也越大
-   （AMap 填满容器，fitView 按当前视野重算，等于跟着分辨率自动缩放）。
-   ⚠️ 左右出血的 margin **由 JS 给**：版心留白是 `max(gutter, (100% - 1080px)/2)`，
-      而这个 100% 在**使用它的元素**上解析 —— 直接写「负的版心留白」在地图元素上
-      算出来只有 -gutter（实测 156px vs 该有的 180px），铺不满。
-      所以改成读 container 实际渲染出来的 padding-left 再取负（见模板里的 bleed()）。
-      ⚠️ 更不能写 `width: 100vw`：它含滚动条宽度，会让整页横向溢出。
-   ⚠️ 已经贴着视口边缘了，就不要左右边框和圆角了（看着才像一整屏）。 */
+/* ── 23. 地图尺寸（批 21 调整）──────────────────────────────────────────── */
+/* 行程路线 / 旅行地图：**与正文版心同宽**。
+   批 18 曾让它突破版心铺满整个视口（JS 负 margin 出血），用户反馈
+   「上面正文固定宽、下面地图铺满屏」看着奇怪，批 21 改回一致 ——
+   宽度跟随 .container 的内容区，模板里的 bleed() 已删，这里也不再有
+   border-radius/border 的去边框覆盖（恢复 .route-map 默认圆角与描边）。
+   高度仍跟着视口高度走 —— 屏幕越大容器越大，地图显示的地理范围也越大。 */
 #home-panel-map .route-map,
 #route-panel-map .route-map {
    height: clamp(460px, calc(100vh - 190px), 1000px);
-    border-radius: 0;
-    border-left: 0;
-    border-right: 0;
-}
-/* 地图下面那句说明：跟着一起出血，只留一个 gutter
-   （不然会孤零零悬在离地图左边缘很远的地方） */
-#home-panel-map .route-map-hint,
-#route-panel-map .route-map-hint {
-    padding-left: var(--gutter);
-    padding-right: var(--gutter);
 }
@@ -348,12 +348,17 @@ class ActivityController
            array_column($realityNodes, 'id')
        ));

+        // 批 21：详情页顶部改用列表同款「封面行」（小封面 + 参与人/统计），
+        // 复用与列表同一份聚合口径（collectStats），不另写一套查询
+        $actStats = $this->collectStats([$id]);
+
        view('activities/show', [
            'activity'        => $activity,
            'planNodes'       => $planNodes,
            'realityNodes'    => $realityNodes,
            'executedPlanIds' => $executedPlanIds,
            'nodeMembers'     => $nodeMembers,
+            'actStats'        => $actStats,
            // 路线地图：每个执行节点第一张图片附件 id（圆形标记用），一条 GROUP BY 防止 N+1
            'nodeFirstImage'  => Attachments::firstImageIdsForNodes(array_column($realityNodes, 'id')),
            // 批 19：路线地图标记图标按出行方式映射（回退节点类型图标）
@@ -29,7 +29,7 @@ $coverPreview = ($isEdit && $cover !== '') ? media_cover((int)$activity['id']) :

    <div class="form-row">
        <label>封面图</label>
-        <div class="cover-upload">
+        <div class="cover-upload" id="cover-upload-box">
            <div class="cover-preview" id="cover-preview">
                <img id="cover-preview-img" src="<?= e($coverPreview) ?>" alt=""
                     style="<?= $coverPreview === '' ? 'display:none;' : '' ?>">
@@ -43,7 +43,7 @@ $coverPreview = ($isEdit && $cover !== '') ? media_cover((int)$activity['id']) :
                <button type="button" class="btn-sm" id="btn-upload-cover"><?= $cover === '' ? '选择图片' : '更换图片' ?></button>
                <button type="button" class="btn-sm btn-danger" id="btn-remove-cover"
                        style="<?= $cover === '' ? 'display:none;' : '' ?>">移除</button>
-                <span class="muted" style="font-size:12px;">支持 JPG/PNG/WebP，裁剪为 800×450</span>
+                <span class="muted" style="font-size:12px;">支持 JPG/PNG/WebP，可直接拖进来或点选，裁剪为 800×450</span>
            </div>
            <input type="file" id="cover-file-input" accept="image/*" style="display:none;">
            <input type="hidden" name="cover_image" id="cover-url-input" value="<?= e($cover) ?>">
@@ -103,6 +103,31 @@ $coverPreview = ($isEdit && $cover !== '') ? media_cover((int)$activity['id']) :

    btnUpload.addEventListener('click', function () { fileInput.click(); });

+    /* 批 21：直接把图片拖进上传区 —— 走 DataTransfer 塞给原有 file input，
+       后面的「校验类型/大小 → 打开裁剪」流程原样复用，不另写一套。
+       dragenter/dragover 必须 preventDefault，否则浏览器会直接打开图片文件。 */
+    var dropBox = document.getElementById('cover-upload-box');
+    ['dragenter', 'dragover'].forEach(function (t) {
+        dropBox.addEventListener(t, function (e) {
+            e.preventDefault();
+            dropBox.classList.add('dragover');
+        });
+    });
+    ['dragleave', 'drop'].forEach(function (t) {
+        dropBox.addEventListener(t, function (e) {
+            e.preventDefault();
+            dropBox.classList.remove('dragover');
+        });
+    });
+    dropBox.addEventListener('drop', function (e) {
+        var files = e.dataTransfer && e.dataTransfer.files;
+        if (!files || !files.length) return;
+        var dt = new DataTransfer();
+        dt.items.add(files[0]);   // 封面只有一张：一次拖多张也只取第一张
+        fileInput.files = dt.files;
+        fileInput.dispatchEvent(new Event('change'));
+    });
+
    fileInput.addEventListener('change', function (e) {
        var file = e.target.files && e.target.files[0];
        if (!file) return;
@@ -161,20 +161,8 @@ foreach ($activities as $a) {
            .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }

-    /* 地图铺满整个视口宽度：把正文版心的左右留白用负 margin 还回去。
-       ⚠️ 不能用 CSS `calc(-1 * var(--shell-pad))`：自定义属性里的 `100%` 是在
-          **使用它的元素**上解析的，写在地图（它在版心内部，宽 1080）上算出来
-          只有 -gutter，实测只能铺到 1128/1440。这里按 container 实际渲染出的
-          padding 反推，才铺得满；也不用 100vw（含滚动条宽度会撑出横向滚动条）。 */
-    function bleed() {
-        var host = el.closest('.container');
-        if (!host) return;
-        var pad = parseFloat(window.getComputedStyle(host).paddingLeft) || 0;
-        if (pad <= 0) return;
-        el.style.marginLeft = (-pad) + 'px';
-        el.style.marginRight = (-pad) + 'px';
-    }
-    bleed();
+    /* 批 21：地图不再铺满整个视口 —— 用户反馈「上面正文固定宽、下面地图铺满屏」
+       看着奇怪，改回与正文版心同宽（批 18 的负 margin 出血逻辑 bleed() 已删）。 */

    map = new AMap.Map(el, { viewMode: '2D', zoom: 5 });
    window.__homeMap = map;
@@ -260,14 +248,13 @@ foreach ($activities as $a) {
    relayout();
    map.on('zoomend', relayout);

-    /* 改窗口大小 / 旋转屏幕 / 换分辨率：地图容器跟着变（宽度是铺满视口的），
-       视野和图标排布都得按新尺寸重算一次。防抖 200ms，别在拖动时反复重排。 */
+    /* 改窗口大小 / 旋转屏幕 / 换分辨率：地图容器跟着版心变，视野和图标排布
+       都得按新尺寸重算一次。防抖 200ms，别在拖动时反复重排。 */
    var resizeTimer = null;
    window.addEventListener('resize', function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            if (!map) return;
-            bleed();            // 版心留白变了，出血量跟着变
            map.resize();
            fitView();
            relayout();
@@ -16,9 +16,58 @@
    </div>
 </div>

-<?php if (!empty($activity['cover_image'])): ?>
-    <div class="activity-cover">
+<?php
+/* 批 21：顶部不再放整幅 16:9 大封面（太大），改用活动列表同款的「封面行」——
+   左边小封面、右边参与人与统计（去了几个地方 / 几天 / 几个节点）。
+   数据与列表同一口径（ActivityController::collectStats）；没传 stats 时只渲染封面。 */
+$actSt = $actStats[(int)$activity['id']] ?? null;
+$placeCount  = (int)($actSt['place_count'] ?? 0);
+$placeMain   = (string)($actSt['place_main'] ?? '');
+$days        = (int)($actSt['days'] ?? 0);
+$spanText    = (string)($actSt['span_text'] ?? '');
+$nodeCount   = (int)($actSt['node_count'] ?? 0);
+$membersTop  = array_slice($actSt['members'] ?? [], 0, 5);
+$memberCount = (int)($actSt['member_count'] ?? 0);
+?>
+<?php if (!empty($activity['cover_image']) || $actSt): ?>
+    <div class="act-row act-row-static">
+        <div class="act-row-cover">
+            <?php if (!empty($activity['cover_image'])): ?>
                <img src="<?= e(media_cover((int)$activity['id'])) ?>" alt="">
+            <?php else: ?>
+                <div class="act-row-cover-ph">📸</div>
+            <?php endif; ?>
+        </div>
+        <?php if ($actSt): ?>
+        <div class="act-row-body">
+            <?php if ($membersTop): ?>
+                <div class="act-row-members">
+                    <?php foreach ($membersTop as $m): ?>
+                        <span class="act-member">
+                            <?php if (!empty($m['avatar'])): ?>
+                                <img src="<?= e($m['avatar']) ?>" alt="">
+                            <?php else: ?>
+                                <span class="act-member-initial"><?= e(mb_substr((string)$m['name'], 0, 1)) ?></span>
+                            <?php endif; ?>
+                            <span class="act-member-name"><?= e($m['name']) ?></span>
+                        </span>
+                    <?php endforeach; ?>
+                    <?php if ($memberCount > count($membersTop)): ?>
+                        <span class="act-member-more">等 <?= $memberCount ?> 人</span>
+                    <?php endif; ?>
+                </div>
+            <?php endif; ?>
+            <div class="meta act-row-meta">
+                <?php if ($placeCount > 0): ?>
+                    <span>📍 <?= $placeCount ?> 个地方<?= $placeMain !== '' ? '（' . e($placeMain) . '）' : '' ?></span>
+                <?php endif; ?>
+                <?php if ($days > 0): ?>
+                    <span>🕒 <?= $days ?> 天<?= $spanText !== '' ? '（' . e($spanText) . '）' : '' ?></span>
+                <?php endif; ?>
+                <span>🧳 <?= $nodeCount ?> 个节点</span>
+            </div>
+        </div>
+        <?php endif; ?>
    </div>
 <?php endif; ?>

@@ -174,19 +223,8 @@ require dirname(__DIR__) . '/comments/_block.php';
    }
    if (!route.length) return;

-    /* 地图铺满整个视口宽度：把正文版心的左右留白用负 margin 还回去。
-       ⚠️ 不能写 CSS `calc(-1 * var(--shell-pad))`：自定义属性里的 `100%` 在使用它的
-          元素上解析，地图在版心内部（宽 1080），算出来只有 -gutter，铺不满。
-          这里读 container 实际渲染出的 padding 反推；也不用 100vw（含滚动条会溢出）。 */
-    function bleed() {
-        var host = el.closest('.container');
-        if (!host) return;
-        var pad = parseFloat(window.getComputedStyle(host).paddingLeft) || 0;
-        if (pad <= 0) return;
-        el.style.marginLeft = (-pad) + 'px';
-        el.style.marginRight = (-pad) + 'px';
-    }
-    bleed();
+    /* 批 21：地图不再铺满整个视口 —— 用户反馈「上面正文固定宽、下面地图铺满屏」
+       看着奇怪，改回与正文版心同宽（批 18 的负 margin 出血逻辑 bleed() 已删）。 */

    map = new AMap.Map(el, { viewMode: '2D', zoom: 5 });
    /* 挂到 window 供自动化测试（真浏览器量标记位置）与线上排查用；页面卸载即释放 */
@@ -386,14 +424,13 @@ require dirname(__DIR__) . '/comments/_block.php';
       所以缩放结束后按新的像素位置重排一次（不重新适配视野）。 */
    map.on('zoomend', function () { drawRoute(true); });

-    /* 改窗口大小 / 旋转屏幕 / 换分辨率：地图宽度是铺满视口的，容器一变
+    /* 改窗口大小 / 旋转屏幕 / 换分辨率：地图容器跟着版心变，容器一变
       就要按新尺寸重新适配视野并重排标记。防抖 200ms。 */
    var resizeTimer = null;
    window.addEventListener('resize', function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            if (!map) return;
-            bleed();            // 版心留白变了，出血量跟着变
            map.resize();
            drawRoute();        // 重新适配视野 + 按新像素重排标记
        }, 200);