photo-live/apps/viewer/src/components/PhotoLightbox.vue

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import type { DownloadVariant } from '../api/client';
import type { PhotoSequence } from '../feed/sequence';
import type { DownloadController } from '../download/useDownload';
import type { LikesController } from '../likes/useLikes';
import type { LikeBubble } from '../realtime/useAlbumRealtime';
import PhotoActionBar from './viewer/PhotoActionBar.vue';
import HeartParticles from './viewer/HeartParticles.vue';
import InteractionNotice from './viewer/InteractionNotice.vue';
import ThumbnailStrip, { type ThumbnailItem } from './viewer/ThumbnailStrip.vue';
import { shareOrCopy } from '../support/share';
import { reducedMotion, toggleReducedMotion } from '../ui/prefs';
import { positionDisplay } from '../viewer/position';
import { MIN_SCALE, panBy, resetZoom, wheelFactor, zoomAt, type ZoomState } from '../viewer/zoom';

// 大图查看器（Task 8 业务编排 + UI-02 V04 深色沉浸布局）：
//   · 布局层级（§5.1）：顶栏（关闭 × / 位置计数 / ⋯ 菜单）→ 图片舞台（contain
//     大图 + 边缘 ‹ › 切换 + 粒子/互动占位层）→ 缩略图条 → 底部操作栏；
//   · 业务逻辑不变：browse URL 展示、保持列表序列的左右切换（越过末尾且
//     hasMore 时翻页扩展）、zoom.ts 缩放/平移、签名过期静默重取（复用
//     sequence.refreshPhotoUrls）、下载两级开关与微信引导（useDownload）、
//     点赞乐观计数（useLikes）；
//   · 位置计数（§5.2 真实回退）：见 viewer/position.ts——深链 solo 显示
//     「照片预览」，无 total 未到末页显示「已加载 N 张」，全部加载完成才
//     显示筛选序列 i/n；当前 API 无 total，不伪造总数；
//   · 模态可用性：打开锁 body 滚动、焦点进入对话框并困于其内（Tab 循环）、
//     关闭/卸载时焦点回到触发元素；Esc 先收菜单再关查看器；左右键在菜单
//     焦点内不抢占（§5.3）；
//   · 关闭回位（滚动锚点 savedScrollY）与 URL push/replace/back 语义由
//     ActivityPage 负责（见 ActivityPage 注释）。
//
// 手势（Pointer Events，无第三方依赖；与 V04 布局的协作）：
//   · 手势绑定在根元素，但顶栏/缩略图条/底部操作栏（data-lightbox-chrome）
//     内的指针不参与手势——条带横滚、按钮点击不会误触轻扫切图；
//   · 双指：捏合缩放（不动点 = 手势中心）+ 中点漂移平移；
//   · 单指且 scale>1：拖拽平移；scale=1：横向轻扫切换上一张/下一张；
//   · 双击（dblclick / 触控双 tap）：复位缩放；滚轮：以光标为不动点缩放
//     （缩略图条 data-native-scroll 区域内的滚轮留给条带横滚）；
//   · 舞台空白区（非图片）点击关闭；手势位移后的 click 不关闭。

const props = defineProps<{
  sequence: PhotoSequence;
  photoId: string;
  /** 点赞控制器（Task 10）：缺省时 Like 位退化为静态计数（组件单测/降级组装）。 */
  likes?: LikesController;
  /** 下载控制器（P4a Task 4）：缺省时不渲染下载位（组件单测/降级组装）。 */
  download?: DownloadController;
  /** 相册标题（§5.4 navigator.share 的分享标题）。 */
  albumTitle?: string;
  /** 当前照片分享深链（含 lang 参数，ActivityPage 组装；缺省回退当前地址）。 */
  shareUrl?: string;
  /** 他人点赞气泡（WS likes.burst，realtime router 已滤自身回声/隐藏/减少动画）：
   * 当前照片 → 心形粒子，其他照片 → 跨照片互动提示（§6.2 分层）。 */
  likeBubbles?: LikeBubble[];
}>();

const emit = defineEmits<{
  'update:photoId': [photoId: string];
  /** 当前照片经刷新确认已下线（404）：neighborIndex 为移除前下标，供回退邻居。 */
  removed: [photoId: string, neighborIndex: number];
  close: [];
}>();

const { t } = useI18n();

const photos = computed(() => props.sequence.photos);
const index = computed(() => photos.value.findIndex((photo) => photo.photoId === props.photoId));
const photo = computed(() => photos.value[index.value] ?? null);
const total = computed(() => photos.value.length);
const hasPrev = computed(() => index.value > 0);
// 末张且仍有下一页 → 允许继续向右（导航触发序列扩展）。
const hasNext = computed(() => index.value < total.value - 1 || props.sequence.hasMore);

// —— 位置计数（§5.2）：形态判定在 viewer/position.ts，此处只拼接文案 ——

const positionText = computed(() => {
  const display = positionDisplay({
    index: index.value,
    loaded: photos.value.length,
    // 当前公开端点为游标分页（CursorPageMeta 无 total）——不伪造总数；
    // 接口将来提供准确 total 时改传实值即得「12 / 248」形态。
    total: null,
    atEnd: !props.sequence.hasMore,
    solo: props.sequence.isSolo(props.photoId),
  });
  switch (display.kind) {
    case 'preview':
      return t('viewer.photoPreview');
    case 'loaded':
      return t('viewer.loadedCount', { count: display.count });
    default:
      return `${display.current} / ${display.total}`;
  }
});

// —— 视图状态（按 photoId；切换照片即复位） ——

/** 图片单次重试的缓存击穿键：重试按钮点击后 +1 强制 <img> 重挂载重触发加载。 */
const retryCount = ref(0);
const failedIds = reactive(new Set<string>());
const retriedIds = reactive(new Set<string>());
const extending = ref(false);

watch(
  () => props.photoId,
  () => {
    failedIds.clear();
    retriedIds.clear();
    retryCount.value = 0;
    Object.assign(zoom, resetZoom());
  },
);

// —— 缩放/平移 ——

const zoom = reactive<ZoomState>({ ...resetZoom() });
const rootEl = ref<HTMLElement | null>(null);
/** 舞台（图片容器）：缩放不动点坐标系的原点（图片经 flex 居中于其中）。 */
const stageEl = ref<HTMLElement | null>(null);

const imgStyle = computed(() => ({
  transform: `translate(${zoom.tx}px, ${zoom.ty}px) scale(${zoom.scale})`,
}));

/** 手势中心（相对图片未变换时中心的坐标）：图片经 flex 居中，未变换中心 = 舞台中心。 */
function center(): { x: number; y: number } {
  const rect = stageEl.value?.getBoundingClientRect();
  if (rect === undefined) return { x: 0, y: 0 };
  return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
}

function onWheel(event: WheelEvent): void {
  // 缩略图条等原生滚动区（data-native-scroll）内的滚轮留给自身横滚。
  if (event.target instanceof HTMLElement && event.target.closest('[data-native-scroll]') !== null) return;
  event.preventDefault();
  const { x, y } = center();
  Object.assign(zoom, zoomAt({ ...zoom }, wheelFactor(event.deltaY), event.clientX - x, event.clientY - y));
}

function onDblClick(event: MouseEvent): void {
  if (inChrome(event.target)) return;
  Object.assign(zoom, resetZoom());
}

// —— 指针手势（双指捏合 / 单指平移 / 单指轻扫 / 双 tap 复位） ——

const pointers = new Map<number, { x: number; y: number }>();
let pinchDistance = 0;
let pinchMid = { x: 0, y: 0 };
let swipe: { x: number; y: number; dx: number; dy: number } | null = null;
let lastTap = { time: 0, x: 0, y: 0 };
/** 手势期间发生过位移：抑制手势收尾时的舞台 click 误关闭。 */
let dragged = false;

const SWIPE_MIN_DISTANCE = 50;

/** 顶栏/缩略图条/底部操作栏（data-lightbox-chrome）：不参与手势与双击复位。 */
function inChrome(target: EventTarget | null): boolean {
  return target instanceof HTMLElement && target.closest('[data-lightbox-chrome]') !== null;
}

/** 菜单（role=menu）焦点内左右键不抢占切图（§5.3）。 */
function inMenu(target: EventTarget | null): boolean {
  return target instanceof HTMLElement && target.closest('[role="menu"]') !== null;
}

function pointerPair(): { a: { x: number; y: number }; b: { x: number; y: number } } | null {
  if (pointers.size < 2) return null;
  const [first, second] = pointers.values();
  if (first === undefined || second === undefined) return null;
  return { a: first, b: second };
}

function distance(a: { x: number; y: number }, b: { x: number; y: number }): number {
  return Math.hypot(a.x - b.x, a.y - b.y);
}

function onPointerDown(event: PointerEvent): void {
  if (inChrome(event.target)) return;
  pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
  dragged = false;

  // 触控双 tap：400ms 内同点两落 → 复位缩放。
  if (event.pointerType === 'touch' && pointers.size === 1) {
    const now = performance.now();
    if (now - lastTap.time < 400 && Math.hypot(event.clientX - lastTap.x, event.clientY - lastTap.y) < 40) {
      Object.assign(zoom, resetZoom());
      lastTap = { time: 0, x: 0, y: 0 };
    } else {
      lastTap = { time: now, x: event.clientX, y: event.clientY };
    }
  }

  const pair = pointerPair();
  if (pair !== null) {
    pinchDistance = distance(pair.a, pair.b);
    pinchMid = { x: (pair.a.x + pair.b.x) / 2, y: (pair.a.y + pair.b.y) / 2 };
    swipe = null;
  } else if (zoom.scale <= MIN_SCALE) {
    swipe = { x: event.clientX, y: event.clientY, dx: 0, dy: 0 };
  }
}

function onPointerMove(event: PointerEvent): void {
  const previous = pointers.get(event.pointerId);
  if (previous === undefined) return;
  const current = { x: event.clientX, y: event.clientY };
  pointers.set(event.pointerId, current);

  const pair = pointerPair();
  if (pair !== null) {
    // 双指：距离比 → 缩放因子（不动点 = 当前中点）；中点位移 → 平移。
    const nextDistance = distance(pair.a, pair.b);
    const mid = { x: (pair.a.x + pair.b.x) / 2, y: (pair.a.y + pair.b.y) / 2 };
    const { x, y } = center();
    const factor = pinchDistance > 0 ? nextDistance / pinchDistance : 1;
    Object.assign(zoom, zoomAt({ ...zoom }, factor, mid.x - x, mid.y - y));
    Object.assign(zoom, panBy({ ...zoom }, mid.x - pinchMid.x, mid.y - pinchMid.y));
    pinchDistance = nextDistance;
    pinchMid = mid;
    dragged = true;
    return;
  }

  if (zoom.scale > MIN_SCALE) {
    // 单指平移（scale>1）：平移期间不触发轻扫切图（§5.3）。
    Object.assign(zoom, panBy({ ...zoom }, current.x - previous.x, current.y - previous.y));
    dragged = true;
  } else if (swipe !== null) {
    swipe.dx = current.x - swipe.x;
    swipe.dy = current.y - swipe.y;
    if (Math.abs(swipe.dx) > 10 || Math.abs(swipe.dy) > 10) dragged = true;
  }
}

/** 手势结束（抬起/取消/离开全屏层）。不使用 setPointerCapture：捕获会把后续
   * click 重定向到捕获元素，按钮（关闭/切换）将收不到点击。 */
function onPointerEnd(event: PointerEvent): void {
  pointers.delete(event.pointerId);
  if (pointers.size < 2) pinchDistance = 0;
  if (pointers.size === 1) {
    // 双指 → 单指：剩余指针重新作为平移/轻扫基线。
    const [remaining] = pointers.values();
    if (remaining !== undefined) {
      swipe = zoom.scale <= MIN_SCALE ? { x: remaining.x, y: remaining.y, dx: 0, dy: 0 } : null;
    }
    return;
  }
  if (pointers.size > 0) return;

  const gesture = swipe;
  swipe = null;
  if (gesture === null) return;
  // 以抬起坐标结算总位移（最后一帧 move 可能早于抬起点）。
  gesture.dx = event.clientX - gesture.x;
  gesture.dy = event.clientY - gesture.y;
  if (Math.abs(gesture.dx) > SWIPE_MIN_DISTANCE && Math.abs(gesture.dx) > Math.abs(gesture.dy) * 1.2) {
    if (gesture.dx < 0) void goTo(index.value + 1);
    else void goTo(index.value - 1);
  }
}

/** 舞台空白区（目标=容器自身，非图片/占位）点击关闭；手势位移后的 click 不关闭。 */
function onStageClick(event: MouseEvent): void {
  if (dragged) return;
  if (event.target !== event.currentTarget) return;
  emit('close');
}

// —— 键盘：Esc 关闭（菜单开时先收菜单）、←→ 切换、Tab 焦点困于对话框 ——

function onKeydown(event: KeyboardEvent): void {
  if (event.key === 'Escape') {
    event.preventDefault();
    if (moreMenuOpen.value) {
      moreMenuOpen.value = false;
      return;
    }
    emit('close');
  } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
    if (inMenu(event.target)) return;
    event.preventDefault();
    void goTo(event.key === 'ArrowLeft' ? index.value - 1 : index.value + 1);
  }
}

/** Tab 循环限制在对话框内（模态焦点不穿透，§5.3）。 */
function onTrapTab(event: KeyboardEvent): void {
  const root = rootEl.value;
  if (root === null) return;
  const focusables = Array.from(
    root.querySelectorAll<HTMLElement>('button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
  );
  if (focusables.length === 0) {
    event.preventDefault();
    return;
  }
  const first = focusables[0];
  const last = focusables[focusables.length - 1];
  const active = document.activeElement;
  if (event.shiftKey) {
    if (active === first || !root.contains(active)) {
      event.preventDefault();
      last.focus();
    }
  } else if (active === last || !root.contains(active)) {
    event.preventDefault();
    first.focus();
  }
}

// —— 导航（保持列表浏览序列；越过末尾且 hasMore → 扩展） ——

async function goTo(targetIndex: number): Promise<void> {
  if (targetIndex < 0 || targetIndex === index.value) return;
  if (targetIndex >= total.value) {
    if (!props.sequence.hasMore) return;
    extending.value = true;
    try {
      await props.sequence.loadMore();
    } finally {
      extending.value = false;
    }
    if (targetIndex >= photos.value.length) return; // 翻页失败/无新增：留在原处
  }
  const target = photos.value[targetIndex];
  if (target === undefined || target.photoId === props.photoId) return;
  emit('update:photoId', target.photoId);
}

/** 缩略图条选择：与手势/键盘共用 goTo 入口（update:photoId → 父级 replace 路由，
   * 不新增浏览器历史）。 */
function selectThumbnail(photoId: string): void {
  if (photoId === props.photoId) return;
  const targetIndex = photos.value.findIndex((item) => item.photoId === photoId);
  if (targetIndex >= 0) void goTo(targetIndex);
}

// 相邻预取（±1 browse URL）+ 临近末尾预拉下一页，让右切更顺滑。
watch(
  () => [props.photoId, photos.value] as const,
  () => {
    if (index.value === -1) return;
    for (const neighbor of [index.value - 1, index.value + 1]) {
      const target = photos.value[neighbor];
      if (target !== undefined) void preload(target.browse.url);
    }
    if (index.value >= photos.value.length - 2 && props.sequence.hasMore && !props.sequence.loadingMore) {
      void props.sequence.loadMore();
    }
  },
  { immediate: true },
);

function preload(url: string): void {
  const img = new Image();
  img.src = url;
}

// —— 点赞（Task 10）：乐观 +1 与心跳动画由 LikesController 承担 ——

const displayLikeCount = computed(() => {
  if (photo.value === null) return 0;
  return props.likes !== undefined ? props.likes.displayFor(photo.value) : photo.value.likeCount;
});

function likeCurrent(): void {
  if (photo.value === null || props.likes === undefined) return;
  props.likes.like(photo.value.photoId);
}

// —— 互动编排（Task 5 / V05 §6.2）：当前照片心形粒子 + 其他照片互动提示分层 ——

const heartParticles = ref<{ burst: (count: number) => void } | null>(null);
const interactionNotice = ref<{ notify: (entry: { photoId: string; delta: number; thumbUrl: string | null }) => void } | null>(null);

/** 本地点赞每次有效点击的粒子数（1-3 取中，§6.1 立即轻量反馈）。 */
const LOCAL_LIKE_PARTICLES = 2;

// 本地点击（useLikes 动效事件）：当前照片 → 舞台右区心形粒子。
let stopLocalLikeListener: (() => void) | undefined;
if (props.likes !== undefined) {
  stopLocalLikeListener = props.likes.onLocalLike((photoId) => {
    if (photoId === props.photoId) heartParticles.value?.burst(LOCAL_LIKE_PARTICLES);
  });
}

// 他人点赞气泡（§6.2 两类反馈分开）：当前照片 → 粒子（1-2 枚按 delta 采样，
// 数值仍按真实 delta 校准——视觉采样不改变统计，§6.3）；其他照片 → 互动提示。
// 仅处理挂载后新到的气泡：打开大图瞬间已在屏的不回放（§6.3 不回放历史动画）。
let bubblesInitialized = false;
let maxSeenBubbleKey = Number.NEGATIVE_INFINITY;
watch(
  () => props.likeBubbles,
  (bubbles) => {
    if (bubbles === undefined) return;
    if (!bubblesInitialized) {
      bubblesInitialized = true;
      for (const bubble of bubbles) maxSeenBubbleKey = Math.max(maxSeenBubbleKey, bubble.key);
      return;
    }
    for (const bubble of bubbles) {
      if (bubble.key <= maxSeenBubbleKey) continue;
      maxSeenBubbleKey = bubble.key;
      if (bubble.photoId === props.photoId) {
        heartParticles.value?.burst(Math.min(2, Math.max(1, bubble.delta)));
      } else {
        interactionNotice.value?.notify({
          photoId: bubble.photoId,
          delta: bubble.delta,
          thumbUrl: bubble.thumbUrl,
        });
      }
    }
  },
  { immediate: true },
);

// —— 下载（P4a Task 4）：入口与二级菜单在 PhotoActionBar，控制器编排在此 ——

const canDownload = computed(() => props.download !== undefined && props.download.canDownload);
const canDownloadOriginal = computed(() => canDownload.value && props.download !== undefined && props.download.canDownloadOriginal);

function onDownloadVariant(variant: DownloadVariant): void {
  void props.download?.download(variant);
}

// —— 分享（V05 §5.4）：navigator.share 优先（成功/取消无额外反馈——原生面板
//    已收尾；AbortError 静默），不可用或其他失败回退剪贴板；复制失败保留
//    可选中文本。分享目标为照片深链（含 lang 参数，ActivityPage 组装），
//    不分享 OSS 签名 URL ——

const shareState = ref<'idle' | 'copied' | 'failed'>('idle');
const shareUrlText = ref('');
let shareResetTimer: ReturnType<typeof setTimeout> | undefined;

async function shareCurrent(): Promise<void> {
  shareUrlText.value = props.shareUrl ?? window.location.href;
  const outcome = await shareOrCopy({ title: props.albumTitle ?? '', url: shareUrlText.value });
  shareState.value = outcome === 'copied' ? 'copied' : outcome === 'failed' ? 'failed' : 'idle';
  if (shareResetTimer !== undefined) clearTimeout(shareResetTimer);
  // 失败时保留可选中文本（不自动消失），成功反馈数秒后收起。
  if (outcome === 'copied') {
    shareResetTimer = setTimeout(() => {
      shareState.value = 'idle';
    }, 3000);
  }
}

// —— 顶栏「⋯」更多菜单（§5.1：必须有实际功能——减少动画开关） ——

const moreMenuOpen = ref(false);
const moreRootEl = ref<HTMLElement | null>(null);

function onOuterPointerDown(event: PointerEvent): void {
  if (moreMenuOpen.value && moreRootEl.value !== null && !moreRootEl.value.contains(event.target as Node)) {
    moreMenuOpen.value = false;
  }
}

// —— 签名过期/下线处理 ——

/** 大图加载失败：静默重取单图接口换新签名 URL；404 → 通知父级移除；其他失败可重试。 */
async function onImgError(): Promise<void> {
  const current = photo.value;
  if (current === null) return;
  const { photoId } = current;
  if (retriedIds.has(photoId)) {
    failedIds.add(photoId);
    return;
  }
  retriedIds.add(photoId);
  const neighborIndex = index.value;
  const result = await props.sequence.refreshPhotoUrls(photoId);
  if (result === 'replaced') return; // 新签名 URL 换绑后 <img> 自动重载
  if (result === 'removed') {
    if (props.photoId === photoId) emit('removed', photoId, neighborIndex);
    return;
  }
  failedIds.add(photoId); // 网络等其他失败：收起图片，展示可重试占位
}

function retryFailed(): void {
  const current = photo.value;
  if (current === null) return;
  failedIds.delete(current.photoId);
  retriedIds.delete(current.photoId);
  retryCount.value += 1; // 强制 <img> 重挂载，重新触发加载/错误链
}

// —— 模态可用性：body 滚动锁 + 焦点进入/困住/归还（§5.1/§5.3） ——

let savedBodyOverflow = '';
let savedFocus: HTMLElement | null = null;
let focusClaimed = false;

// 根节点渲染时（深链下序列就位前组件先挂载、photo 后到）：焦点进入对话框。
watch(rootEl, (el) => {
  if (el === null || focusClaimed) return;
  focusClaimed = true;
  savedFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
  el.focus();
});

const thumbItems = computed<ThumbnailItem[]>(() =>
  photos.value.map((item) => ({ photoId: item.photoId, thumbUrl: item.thumb.url })),
);

onMounted(() => {
  window.addEventListener('keydown', onKeydown);
  document.addEventListener('pointerdown', onOuterPointerDown, true);
  savedBodyOverflow = document.body.style.overflow;
  document.body.style.overflow = 'hidden'; // 锁背景滚动（§5.1）
});

onBeforeUnmount(() => {
  window.removeEventListener('keydown', onKeydown);
  document.removeEventListener('pointerdown', onOuterPointerDown, true);
  document.body.style.overflow = savedBodyOverflow;
  if (shareResetTimer !== undefined) clearTimeout(shareResetTimer);
  stopLocalLikeListener?.(); // 粒子订阅随大图卸载解除（useLikes 侧不残留）
  // 焦点归还触发元素（瀑布流单元格；深链直达时为 body——无可归还则不动）。
  if (savedFocus !== null && savedFocus.isConnected) savedFocus.focus();
});
</script>

<template>
  <div
    v-if="photo !== null"
    ref="rootEl"
    class="photo-viewer"
    role="dialog"
    aria-modal="true"
    :aria-label="t('viewer.photoViewer')"
    tabindex="-1"
    @wheel="onWheel"
    @pointerdown="onPointerDown"
    @pointermove="onPointerMove"
    @pointerup="onPointerEnd"
    @pointercancel="onPointerEnd"
    @pointerleave="onPointerEnd"
    @dblclick="onDblClick"
    @keydown.tab="onTrapTab"
  >
    <!-- 顶栏（§5.1：52-56px 深色半透明）：关闭 / 位置计数 / ⋯ 更多菜单 -->
    <header class="viewer-topbar" data-lightbox-chrome>
      <button type="button" class="viewer-close" :aria-label="t('viewer.close')" @click="emit('close')">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M6 6l12 12" />
          <path d="M18 6 6 18" />
        </svg>
      </button>
      <p class="position-indicator">{{ positionText }}</p>
      <div ref="moreRootEl" class="more-menu">
        <button
          type="button"
          class="viewer-more"
          :aria-label="t('viewer.more')"
          aria-haspopup="menu"
          :aria-expanded="moreMenuOpen"
          @click="moreMenuOpen = !moreMenuOpen"
        >
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <circle cx="5" cy="12" r="2" fill="currentColor" />
            <circle cx="12" cy="12" r="2" fill="currentColor" />
            <circle cx="19" cy="12" r="2" fill="currentColor" />
          </svg>
        </button>
        <div v-if="moreMenuOpen" class="more-popover" role="menu" :aria-label="t('viewer.more')">
          <button
            type="button"
            class="more-item"
            role="menuitemcheckbox"
            :aria-checked="reducedMotion"
            @click="toggleReducedMotion"
          >
            <span class="more-check" aria-hidden="true">{{ reducedMotion ? '✓' : '' }}</span>
            {{ t('viewer.reduceMotion') }}
          </button>
        </div>
      </div>
    </header>

    <!-- 图片舞台（flex:1）：contain 大图 + 边缘切换 + 粒子/互动占位层 -->
    <main class="viewer-stage">
      <div ref="stageEl" class="image-container" @click="onStageClick">
        <img
          v-if="!failedIds.has(photo.photoId)"
          :key="`${photo.photoId}:${retryCount}`"
          class="photo"
          :src="photo.browse.url"
          :alt="t('route.photoLabel')"
          :style="imgStyle"
          draggable="false"
          @error="onImgError"
        >
        <div v-else class="img-failed" role="alert">
          <p>{{ t('viewer.loadFailed') }}</p>
          <button type="button" @click="retryFailed">{{ t('album.retry') }}</button>
        </div>
      </div>

      <button
        type="button"
        class="nav prev"
        :disabled="!hasPrev"
        :aria-label="t('viewer.previous')"
        @click="goTo(index - 1)"
      >
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="m15 18-6-6 6-6" />
        </svg>
      </button>
      <button
        type="button"
        class="nav next"
        :disabled="!hasNext"
        :aria-label="t('viewer.next')"
        @click="goTo(index + 1)"
      >
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="m9 6 6 6-6 6" />
        </svg>
      </button>

      <!-- 心形粒子层（Task 5 / V05 §6.2）：装饰性、不可交互；触发见上方互动编排 -->
      <HeartParticles ref="heartParticles" />
      <!-- 跨照片互动提示层（Task 5 / V05 §6.2）：底部操作栏上方安全区；
           点击定位 = 缩略图条共用入口（序列未含该照片时忽略——不伪造定位） -->
      <InteractionNotice ref="interactionNotice" @select="selectThumbnail" />

      <div class="stage-notices">
        <p v-if="extending" class="loading">{{ t('album.loading') }}</p>
        <!-- 分享反馈轻提示（回退复制成功/失败；失败保留可选中文本；原生分享
             成功/取消不显示——面板已收尾，§5.4） -->
        <p v-if="shareState !== 'idle'" class="share-status" role="status">
          {{ shareState === 'copied' ? t('viewer.shareCopied') : t('viewer.shareCopyFailed') }}
          <span v-if="shareState === 'failed'" class="share-url">{{ shareUrlText }}</span>
        </p>
        <!-- 下载失败轻提示（端点失败/网络；DOWNLOAD_DISABLED 专属文案）：
             仅归属到触发下载的那张照片（§5.4 异步错误归属）。 -->
        <p
          v-if="download !== undefined && download.failed && download.failedFor === photo.photoId"
          class="download-failed"
          role="alert"
        >
          {{ t(download.failed) }}
        </p>
      </div>
    </main>

    <!-- 缩略图条（§5.3）：当前 ±3 窗口；点击选择（不新增历史） -->
    <ThumbnailStrip :photos="thumbItems" :current-photo-id="photoId" @select="selectThumbnail" />

    <!-- 底部操作栏（§5.1：88-104px + 安全区）：Like / Share / Download -->
    <footer class="viewer-actionbar" data-lightbox-chrome>
      <PhotoActionBar
        :like-count="displayLikeCount"
        :like-pop="likes !== undefined && photo !== null ? likes.popNonce(photo.photoId) : 0"
        :can-download="canDownload"
        :can-download-original="canDownloadOriginal"
        @like="likeCurrent"
        @share="shareCurrent"
        @download="onDownloadVariant"
      />
    </footer>

    <!-- 微信内置浏览器引导（P4a Task 4）：替代直接下载——长按保存 + 复制深链。 -->
    <div
      v-if="download !== undefined && download.wechatGuide"
      class="wechat-guide"
      role="dialog"
      aria-modal="true"
      :aria-label="t('download.wechatTitle')"
    >
      <div class="wechat-card">
        <h2>{{ t('download.wechatTitle') }}</h2>
        <p>{{ t('download.wechatHint') }}</p>
        <!-- clipboard 不可用降级：展示可选中文本供手动长按复制。 -->
        <p v-if="download.copyNotice === 'failed'" class="copy-fallback">{{ download.shareUrl() }}</p>
        <div class="guide-actions">
          <button type="button" class="guide-copy" @click="download.copyShareLink()">
            {{ t('download.copyLink') }}
          </button>
          <span v-if="download.copyNotice === 'copied'" class="copy-status" role="status">
            {{ t('download.copied') }}
          </span>
          <span v-else-if="download.copyNotice === 'failed'" class="copy-status" role="status">
            {{ t('download.copyFailed') }}
          </span>
          <button type="button" class="guide-dismiss" @click="download.dismissWechatGuide()">
            {{ t('download.dismiss') }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* —— UI-02 V04 深色沉浸布局（§5.1）：dvh + 安全区；token 经祖先 .viewer-shell
   * 提供，独立挂载（无 shell）时 var() 回退同值 —— */
.photo-viewer {
  position: fixed;
  inset: 0;
  /* 200：盖住 sticky 顶栏（z=120）与偏好菜单（z=130）——全屏模态下顶栏不可
   * 点也不可见；下线轻提示（z=210）仍在其上。 */
  z-index: 200;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--viewer-dark-bg, #0e1218);
  color: #ffffff;
  user-select: none;
}
.photo-viewer:focus {
  outline: none;
}

/* 顶栏：grid 三列（44px | 1fr 居中计数 | 44px），半透明深色。 */
.viewer-topbar {
  flex: none;
  display: grid;
  grid-template-columns: var(--viewer-touch-target, 44px) 1fr var(--viewer-touch-target, 44px);
  align-items: center;
  min-height: 52px;
  padding: 0 8px;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(14, 18, 24, 0.72);
}
.viewer-close,
.viewer-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--viewer-touch-target, 44px);
  height: var(--viewer-touch-target, 44px);
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}
.viewer-close:hover,
.viewer-more:hover {
  background: rgba(255, 255, 255, 0.1);
}
.viewer-close:focus-visible,
.viewer-more:focus-visible {
  outline: 2px solid var(--viewer-primary, #1a73e8);
}
.viewer-close svg,
.viewer-more svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.position-indicator {
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
}
.more-menu {
  position: relative;
  justify-self: end;
}
.more-popover {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 6;
  display: grid;
  min-width: 176px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(22, 28, 36, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 4px;
}
.more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--viewer-touch-target, 44px);
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  padding: 0 12px;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}
.more-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.more-item:focus-visible {
  outline: 2px solid var(--viewer-primary, #1a73e8);
}
.more-check {
  display: inline-block;
  width: 1em;
  color: var(--viewer-primary, #1a73e8);
  font-weight: 700;
}

/* 舞台：占剩余空间；contain 完整大图（不裁切）；手势区 touch-action none。 */
.viewer-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}
.image-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center;
  will-change: transform;
}
.img-failed {
  position: relative;
  color: #f3f4f6;
  text-align: center;
}
.img-failed button {
  margin-top: 8px;
  border: 1px solid #4b5563;
  border-radius: 6px;
  background: transparent;
  color: #e5e7eb;
  padding: 4px 12px;
  cursor: pointer;
}
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--viewer-touch-target, 44px);
  height: var(--viewer-touch-target, 44px);
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
}
.nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}
.nav:focus-visible {
  outline: 2px solid var(--viewer-primary, #1a73e8);
}
.nav:disabled {
  opacity: 0.3;
  cursor: default;
}
.nav svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav.prev {
  left: 8px;
}
.nav.next {
  right: 8px;
}

/* 粒子层/互动提示层的定位与样式由 HeartParticles / InteractionNotice 自带
 * （Task 5：舞台右侧上浮 / 操作栏上方安全区）。 */
.stage-notices {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 4;
}
.loading {
  margin: 0;
  color: #d1d5db;
}
.share-status {
  margin: 0;
  border-radius: var(--viewer-radius-pill, 20px);
  background: rgba(22, 28, 36, 0.92);
  color: #f3f4f6;
  padding: 6px 16px;
  font-size: 0.8125rem;
  pointer-events: auto;
  max-width: min(92%, 480px);
}
.share-url {
  user-select: all;
  word-break: break-all;
  color: #9fc3f5;
}
.download-failed {
  margin: 0;
  border-radius: var(--viewer-radius-pill, 20px);
  background: rgba(185, 28, 28, 0.92);
  color: #fef2f2;
  padding: 6px 16px;
  font-size: 0.8125rem;
}

/* 底部操作栏容器：安全区 padding；按钮编排（Like/Share/Download）在
 * PhotoActionBar（§5.4：下载关闭移除整项并均分剩余栏宽）。 */
.viewer-actionbar {
  flex: none;
  padding: 6px 12px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(14, 18, 24, 0.72);
}

/* —— 微信引导浮层 —— */
.wechat-guide {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.72);
  padding: 24px;
}
.wechat-card {
  max-width: 420px;
  border-radius: 12px;
  background: #f9fafb;
  color: #111827;
  padding: 20px 24px;
}
.wechat-card h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.wechat-card p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-line;
}
.copy-fallback {
  user-select: all;
  word-break: break-all;
  background: #e5e7eb;
  border-radius: 6px;
  padding: 6px 8px;
}
.guide-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.guide-actions button {
  border: none;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.9rem;
  cursor: pointer;
}
.guide-copy {
  background: #1d4ed8;
  color: #fff;
}
.guide-dismiss {
  background: #e5e7eb;
  color: #374151;
}
.copy-status {
  font-size: 0.8rem;
  color: #6b7280;
}
</style>