feat(viewer): photo viewer with zoom, navigation and deep link
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
@@ -0,0 +1,458 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import type { PhotoSequence } from '../feed/sequence';
|
||||
import { MIN_SCALE, panBy, resetZoom, wheelFactor, zoomAt, type ZoomState } from '../viewer/zoom';
|
||||
|
||||
// 大图查看器（Task 8）：browse URL 全屏展示 + 左右切换（保持列表浏览序列，越过
|
||||
// 末尾且 hasMore 时取下一页扩展）+ 滚轮/双指缩放与平移（受控 CSS transform，数学
|
||||
// 见 viewer/zoom.ts）+ 签名过期静默重取（复用 sequence.refreshPhotoUrls）。
|
||||
//
|
||||
// 状态归属：序列数据/分页在 ActivityPage 创建的 PhotoSequence（共享 composable），
|
||||
// 本组件只持视图态（缩放/平移、加载失败标记、扩展中标记）；当前照片以 photoId
|
||||
// （v-model）为准而非下标——序列追加/solo 归位/条目移除都会移动下标，photoId 键
|
||||
// 控让重排自动保持指向同一张照片。
|
||||
//
|
||||
// 手势（Pointer Events，无第三方依赖）：
|
||||
// · 双指：捏合缩放（transform 不动点 = 手势中心）+ 中点漂移平移；
|
||||
// · 单指且 scale>1：拖拽平移；scale=1：横向轻扫切换上一张/下一张；
|
||||
// · 双击（鼠标 dblclick / 触控双 tap）：复位缩放；
|
||||
// · 滚轮（无需 ctrl）：以光标为不动点缩放；Esc/关闭按钮/背景点击关闭。
|
||||
//
|
||||
// 关闭回位（滚动锚点）与 URL 同步由 ActivityPage 负责（见 ActivityPage 注释）。
|
||||
|
||||
const props = defineProps<{
|
||||
sequence: PhotoSequence;
|
||||
photoId: string;
|
||||
}>();
|
||||
|
||||
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);
|
||||
|
||||
// —— 视图状态（按 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);
|
||||
|
||||
const imgStyle = computed(() => ({
|
||||
transform: `translate(${zoom.tx}px, ${zoom.ty}px) scale(${zoom.scale})`,
|
||||
}));
|
||||
|
||||
/** 手势中心（相对图片未变换时中心的坐标）：图片经 flex 居中，未变换中心 = 容器中心。 */
|
||||
function center(): { x: number; y: number } {
|
||||
const rect = rootEl.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 {
|
||||
const { x, y } = center();
|
||||
Object.assign(zoom, zoomAt({ ...zoom }, wheelFactor(event.deltaY), event.clientX - x, event.clientY - y));
|
||||
}
|
||||
|
||||
function onDblClick(): void {
|
||||
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;
|
||||
|
||||
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 {
|
||||
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）。
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
function onBackdropClick(): void {
|
||||
if (dragged) return; // 手势收尾的 click 不关闭
|
||||
emit('close');
|
||||
}
|
||||
|
||||
// —— 键盘 ——
|
||||
|
||||
function onKeydown(event: KeyboardEvent): void {
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
emit('close');
|
||||
} else if (event.key === 'ArrowLeft') {
|
||||
event.preventDefault();
|
||||
void goTo(index.value - 1);
|
||||
} else if (event.key === 'ArrowRight') {
|
||||
event.preventDefault();
|
||||
void goTo(index.value + 1);
|
||||
}
|
||||
}
|
||||
|
||||
// —— 导航（保持列表浏览序列；越过末尾且 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);
|
||||
}
|
||||
|
||||
// 相邻预取（±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;
|
||||
}
|
||||
|
||||
// —— 签名过期/下线处理 ——
|
||||
|
||||
/** 大图加载失败：静默重取单图接口换新签名 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> 重挂载，重新触发加载/错误链
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('keydown', onKeydown);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKeydown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="photo !== null"
|
||||
ref="rootEl"
|
||||
class="lightbox"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-label="t('viewer.title')"
|
||||
@wheel.prevent="onWheel"
|
||||
@pointerdown="onPointerDown"
|
||||
@pointermove="onPointerMove"
|
||||
@pointerup="onPointerEnd"
|
||||
@pointercancel="onPointerEnd"
|
||||
@pointerleave="onPointerEnd"
|
||||
@dblclick="onDblClick"
|
||||
>
|
||||
<div class="backdrop" @click="onBackdropClick" />
|
||||
|
||||
<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>
|
||||
|
||||
<header class="bar">
|
||||
<span class="counter">{{ t('viewer.counter', { current: index + 1, total }) }}</span>
|
||||
<span class="likes">{{ t('viewer.likeCount', { count: photo.likeCount }) }}</span>
|
||||
<!-- P4a 预留：下载 / 分享操作位（P1b 不实现）。 -->
|
||||
<button type="button" class="control close" :aria-label="t('viewer.close')" @click="emit('close')">
|
||||
✕
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="control nav prev"
|
||||
:disabled="!hasPrev"
|
||||
:aria-label="t('viewer.previous')"
|
||||
@click="goTo(index - 1)"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="control nav next"
|
||||
:disabled="!hasNext"
|
||||
:aria-label="t('viewer.next')"
|
||||
@click="goTo(index + 1)"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
|
||||
<p v-if="extending" class="loading">{{ t('album.loading') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 极简基线样式：视觉打磨留待 P4a。 */
|
||||
.lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
.backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(17, 24, 39, 0.92);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 10px 16px;
|
||||
color: #f9fafb;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.45), transparent);
|
||||
}
|
||||
.counter {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.likes {
|
||||
color: #d1d5db;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.control {
|
||||
border: none;
|
||||
background: rgba(17, 24, 39, 0.55);
|
||||
color: #f9fafb;
|
||||
cursor: pointer;
|
||||
}
|
||||
.control:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: default;
|
||||
}
|
||||
.control.close {
|
||||
margin-left: auto;
|
||||
font-size: 1.1rem;
|
||||
border-radius: 6px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
.control.nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
border-radius: 999px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.control.nav.prev {
|
||||
left: 12px;
|
||||
}
|
||||
.control.nav.next {
|
||||
right: 12px;
|
||||
}
|
||||
.loading {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin: 0;
|
||||
color: #d1d5db;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user