@huyooo/file-explorer-preview 0.4.29 → 0.4.30

package/src/components/ImageViewer.vue

@@ -0,0 +1,681 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { Icon } from '@iconify/vue';
+
+const props = withDefaults(
+  defineProps<{
+    url: string;
+    name: string;
+    /** 图片加载完成后的初始显示模式，来自用户偏好 */
+    initialImageFitMode?: 'fit' | 'actual';
+  }>(),
+  { initialImageFitMode: 'fit' },
+);
+
+const emit = defineEmits<{
+  loaded: [];
+  metadata: [value: { width: number; height: number }];
+  'update:imageFitMode': [value: 'fit' | 'actual'];
+}>();
+
+const containerRef = ref<HTMLDivElement>();
+const imgRef = ref<HTMLImageElement>();
+
+const isLoading = ref(true);
+const hasError = ref(false);
+const isFullscreen = ref(false);
+const showControls = ref(true);
+let controlsTimer: number | undefined;
+
+/**
+ * 视图模式：
+ *  - 'fit'    适应窗口（缩放跟随容器尺寸，不可手动平移）
+ *  - 'manual' 用户手动控制缩放/平移（包含「实际像素」、滚轮缩放、按钮缩放、拖拽）
+ */
+type ViewMode = 'fit' | 'manual';
+const viewMode = ref<ViewMode>('fit');
+const scale = ref(1);
+const rotation = ref(0);
+const translateX = ref(0);
+const translateY = ref(0);
+
+/** 图片原始尺寸（不含 EXIF 旋转，浏览器已自动处理 orientation） */
+const naturalWidth = ref(0);
+const naturalHeight = ref(0);
+
+/** 容器尺寸（由 ResizeObserver 更新） */
+const containerWidth = ref(0);
+const containerHeight = ref(0);
+
+/** 拖拽状态 */
+const isDragging = ref(false);
+let dragStartX = 0;
+let dragStartY = 0;
+let dragStartTranslateX = 0;
+let dragStartTranslateY = 0;
+
+/** 双指缩放状态 */
+let lastPinchDistance = 0;
+
+/** 仅按钮/双击/快捷键触发时启用过渡 */
+const useTransition = ref(false);
+
+const MAX_SCALE = 10;
+let resizeObserver: ResizeObserver | null = null;
+
+/** 旋转后的图片包围盒尺寸（90/270 度时长宽互换） */
+const rotatedBox = computed(() => {
+  const rotated = ((rotation.value % 180) + 180) % 180 === 90;
+  return {
+    width: rotated ? naturalHeight.value : naturalWidth.value,
+    height: rotated ? naturalWidth.value : naturalHeight.value,
+  };
+});
+
+/** 适应窗口缩放（同时考虑旋转后的包围盒） */
+const fitScale = computed(() => {
+  const { width, height } = rotatedBox.value;
+  if (!width || !height || !containerWidth.value || !containerHeight.value) return 1;
+  return Math.min(containerWidth.value / width, containerHeight.value / height);
+});
+
+const minScale = computed(() => Math.max(0.1, fitScale.value * 0.5));
+
+const isFitMode = computed(() => viewMode.value === 'fit');
+
+/**
+ * 适合窗口：外层槽固定素材宽高比，浏览器在 max 约束下解「最大内接矩形」；
+ * 子图用 fill 铺满槽（槽与像素比一致，无拉伸），避免 100%×100%+contain 与亚像素容器失配出细边。
+ */
+const fitSlotStyle = computed(() => {
+  const { width, height } = rotatedBox.value;
+  if (!width || !height) return undefined;
+  return { aspectRatio: `${width} / ${height}` };
+});
+
+const zoomPercent = computed(() => {
+  const s = viewMode.value === 'fit' ? fitScale.value : scale.value;
+  return Math.round(s * 100) + '%';
+});
+const toggleButtonText = computed(() => isFitMode.value ? '实际像素' : '适合窗口');
+
+/** 手动模式：flex 居中 + 像素级 transform；适合窗口由 fit-slot + aspect-ratio 处理 */
+const manualImageStyle = computed(() => {
+  if (viewMode.value === 'fit') return undefined;
+  if (!naturalWidth.value || !naturalHeight.value) return undefined;
+  return {
+    width: `${naturalWidth.value}px`,
+    height: `${naturalHeight.value}px`,
+    transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value}) rotate(${rotation.value}deg)`,
+    transformOrigin: 'center center',
+  };
+});
+
+/** 进入手动模式时：保留当前视觉缩放、清零位移 */
+function enterManualMode() {
+  if (viewMode.value === 'manual') return;
+  scale.value = fitScale.value;
+  translateX.value = 0;
+  translateY.value = 0;
+  viewMode.value = 'manual';
+}
+
+function fitToWindow() {
+  viewMode.value = 'fit';
+  scale.value = 1;
+  translateX.value = 0;
+  translateY.value = 0;
+}
+
+function fitToActual() {
+  viewMode.value = 'manual';
+  scale.value = 1;
+  translateX.value = 0;
+  translateY.value = 0;
+}
+
+/** 应用初始/同步的显示模式偏好 */
+function applyInitialFitMode() {
+  if ((props.initialImageFitMode ?? 'fit') === 'actual') fitToActual();
+  else fitToWindow();
+}
+
+watch(() => props.initialImageFitMode, applyInitialFitMode);
+
+function withTransition(fn: () => void) {
+  useTransition.value = true;
+  fn();
+  setTimeout(() => { useTransition.value = false; }, 250);
+}
+
+function toggleFitMode() {
+  withTransition(() => {
+    if (isFitMode.value) {
+      fitToActual();
+      emit('update:imageFitMode', 'actual');
+    } else {
+      fitToWindow();
+      emit('update:imageFitMode', 'fit');
+    }
+  });
+}
+
+function zoomIn() {
+  withTransition(() => {
+    enterManualMode();
+    scale.value = Math.min(MAX_SCALE, scale.value * 1.2);
+  });
+}
+
+function zoomOut() {
+  withTransition(() => {
+    enterManualMode();
+    scale.value = Math.max(minScale.value, scale.value / 1.2);
+  });
+}
+
+function rotateLeft() {
+  withTransition(() => {
+    if (viewMode.value === 'fit') enterManualMode();
+    rotation.value -= 90;
+  });
+}
+
+function rotateRight() {
+  withTransition(() => {
+    if (viewMode.value === 'fit') enterManualMode();
+    rotation.value += 90;
+  });
+}
+
+function resetView() {
+  withTransition(() => {
+    rotation.value = 0;
+    fitToWindow();
+    emit('update:imageFitMode', 'fit');
+  });
+}
+
+async function toggleFullscreen() {
+  if (!containerRef.value) return;
+  if (!document.fullscreenElement) await containerRef.value.requestFullscreen();
+  else await document.exitFullscreen();
+}
+
+/** 容器尺寸更新（ResizeObserver / 全屏切换都会调用） */
+function updateContainerSize() {
+  if (!containerRef.value) return;
+  const rect = containerRef.value.getBoundingClientRect();
+  containerWidth.value = rect.width;
+  containerHeight.value = rect.height;
+}
+
+function handleFullscreenChange() {
+  isFullscreen.value = !!document.fullscreenElement;
+  updateContainerSize();
+  if (isFullscreen.value) resetControlsTimer();
+  else { showControls.value = true; clearControlsTimer(); }
+}
+
+function resetControlsTimer() {
+  showControls.value = true;
+  clearControlsTimer();
+  if (isFullscreen.value) {
+    controlsTimer = window.setTimeout(() => { showControls.value = false; }, 2000);
+  }
+}
+
+function clearControlsTimer() {
+  if (controlsTimer) { clearTimeout(controlsTimer); controlsTimer = undefined; }
+}
+
+function handleContainerMouseMove() {
+  if (isFullscreen.value) resetControlsTimer();
+}
+
+/**
+ * 滚轮缩放（参考 pixflow）：
+ *  - 无动画，直接更新；以鼠标位置为锚点；步长 5%
+ */
+function handleWheel(e: WheelEvent) {
+  e.preventDefault();
+  if (!containerRef.value) return;
+  const rect = containerRef.value.getBoundingClientRect();
+  enterManualMode();
+
+  const mouseX = e.clientX - rect.left - rect.width / 2;
+  const mouseY = e.clientY - rect.top - rect.height / 2;
+
+  const oldScale = scale.value;
+  const direction = e.deltaY > 0 ? -1 : 1;
+  const step = oldScale * 0.05;
+  const newScale = Math.max(minScale.value, Math.min(MAX_SCALE, oldScale + direction * step));
+
+  if (Math.abs(newScale - oldScale) < 0.001) return;
+
+  const ratio = newScale / oldScale;
+  translateX.value = mouseX - (mouseX - translateX.value) * ratio;
+  translateY.value = mouseY - (mouseY - translateY.value) * ratio;
+  scale.value = newScale;
+}
+
+function handleMouseDown(e: MouseEvent) {
+  if ((e.target as HTMLElement).closest('.toolbar')) return;
+  isDragging.value = true;
+  dragStartX = e.clientX;
+  dragStartY = e.clientY;
+  dragStartTranslateX = translateX.value;
+  dragStartTranslateY = translateY.value;
+  e.preventDefault();
+}
+
+function handleMouseMove(e: MouseEvent) {
+  if (!isDragging.value) return;
+  enterManualMode();
+  translateX.value = dragStartTranslateX + e.clientX - dragStartX;
+  translateY.value = dragStartTranslateY + e.clientY - dragStartY;
+}
+
+function handleMouseUp() { isDragging.value = false; }
+
+function handleTouchStart(e: TouchEvent) {
+  if ((e.target as HTMLElement).closest('.toolbar')) return;
+  if (e.touches.length === 1) {
+    isDragging.value = true;
+    dragStartX = e.touches[0].clientX;
+    dragStartY = e.touches[0].clientY;
+    dragStartTranslateX = translateX.value;
+    dragStartTranslateY = translateY.value;
+  } else if (e.touches.length === 2) {
+    lastPinchDistance = getPinchDistance(e.touches);
+  }
+}
+
+function handleTouchMove(e: TouchEvent) {
+  e.preventDefault();
+  if (e.touches.length === 1 && isDragging.value) {
+    enterManualMode();
+    translateX.value = dragStartTranslateX + e.touches[0].clientX - dragStartX;
+    translateY.value = dragStartTranslateY + e.touches[0].clientY - dragStartY;
+  } else if (e.touches.length === 2) {
+    enterManualMode();
+    const distance = getPinchDistance(e.touches);
+    if (lastPinchDistance > 0) {
+      const ratio = distance / lastPinchDistance;
+      scale.value = Math.min(Math.max(scale.value * ratio, minScale.value), MAX_SCALE);
+    }
+    lastPinchDistance = distance;
+  }
+}
+
+function handleTouchEnd() { isDragging.value = false; lastPinchDistance = 0; }
+
+function getPinchDistance(touches: TouchList): number {
+  const dx = touches[0].clientX - touches[1].clientX;
+  const dy = touches[0].clientY - touches[1].clientY;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+function handleDoubleClick(e: MouseEvent) {
+  if ((e.target as HTMLElement).closest('.toolbar')) return;
+  toggleFullscreen();
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  switch (e.key) {
+    case '+': case '=': zoomIn(); break;
+    case '-': zoomOut(); break;
+    case '1': withTransition(() => { fitToActual(); emit('update:imageFitMode', 'actual'); }); break;
+    case '0': withTransition(() => { fitToWindow(); emit('update:imageFitMode', 'fit'); }); break;
+    case 'f': case 'F': toggleFullscreen(); break;
+    case 'Escape': if (isFullscreen.value) { e.preventDefault(); document.exitFullscreen(); } break;
+    case '[': rotateLeft(); break;
+    case ']': rotateRight(); break;
+    case 'r': case 'R': resetView(); break;
+    case ' ': e.preventDefault(); toggleFitMode(); break;
+  }
+}
+
+function handleImageLoad() {
+  if (!imgRef.value) return;
+  naturalWidth.value = imgRef.value.naturalWidth;
+  naturalHeight.value = imgRef.value.naturalHeight;
+  emit('metadata', { width: naturalWidth.value, height: naturalHeight.value });
+  isLoading.value = false;
+  updateContainerSize();
+  emit('loaded');
+  applyInitialFitMode();
+}
+
+function handleImageError() {
+  isLoading.value = false;
+  hasError.value = true;
+  emit('loaded');
+}
+
+onMounted(() => {
+  updateContainerSize();
+  if (containerRef.value) {
+    resizeObserver = new ResizeObserver(updateContainerSize);
+    resizeObserver.observe(containerRef.value);
+  }
+  document.addEventListener('keydown', handleKeyDown);
+  document.addEventListener('mousemove', handleMouseMove);
+  document.addEventListener('mouseup', handleMouseUp);
+  document.addEventListener('fullscreenchange', handleFullscreenChange);
+});
+
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+  clearControlsTimer();
+  document.removeEventListener('keydown', handleKeyDown);
+  document.removeEventListener('mousemove', handleMouseMove);
+  document.removeEventListener('mouseup', handleMouseUp);
+  document.removeEventListener('fullscreenchange', handleFullscreenChange);
+});
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="viewer"
+    :class="{
+      dragging: isDragging,
+      animated: useTransition,
+      fullscreen: isFullscreen,
+      'hide-controls': isFullscreen && !showControls,
+    }"
+    @wheel.prevent="handleWheel"
+    @mousedown="handleMouseDown"
+    @mousemove="handleContainerMouseMove"
+    @touchstart="handleTouchStart"
+    @touchmove.prevent="handleTouchMove"
+    @touchend="handleTouchEnd"
+    @dblclick="handleDoubleClick"
+  >
+    <div v-if="isLoading" class="loading">
+      <div class="spinner"></div>
+      <span>加载中...</span>
+    </div>
+
+    <div v-else-if="hasError" class="error">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="3" y="3" width="18" height="18" rx="2" />
+        <circle cx="8.5" cy="8.5" r="1.5" />
+        <path d="M21 15l-5-5L5 21" />
+      </svg>
+      <p>无法加载图片</p>
+    </div>
+
+    <div v-show="!isLoading && !hasError" class="media-stage">
+      <div
+        class="slot-root"
+        :class="isFitMode ? 'slot-root--fit' : 'slot-root--manual'"
+        :style="isFitMode ? fitSlotStyle : undefined"
+      >
+        <img
+          ref="imgRef"
+          class="image"
+          :class="isFitMode ? 'image--fit-slot' : 'image--manual'"
+          :src="url"
+          :alt="name"
+          :style="manualImageStyle"
+          draggable="false"
+          @load="handleImageLoad"
+          @error="handleImageError"
+        />
+      </div>
+    </div>
+
+    <div v-if="!isLoading && !hasError" class="toolbar">
+      <button @click="zoomOut" title="缩小 (-)">
+        <Icon icon="lucide:zoom-out" />
+      </button>
+      <span class="zoom-label">{{ zoomPercent }}</span>
+      <button @click="zoomIn" title="放大 (+)">
+        <Icon icon="lucide:zoom-in" />
+      </button>
+      <div class="divider"></div>
+      <button @click="rotateLeft" title="逆时针旋转 ([)">
+        <Icon icon="lucide:rotate-ccw" />
+      </button>
+      <button @click="rotateRight" title="顺时针旋转 (])">
+        <Icon icon="lucide:rotate-cw" />
+      </button>
+      <div class="divider"></div>
+      <button class="fit-toggle" @click="toggleFitMode" :title="`${toggleButtonText} (空格)`">
+        <Icon v-if="isFitMode" icon="lucide:maximize-2" />
+        <Icon v-else icon="lucide:minimize-2" />
+        <span>{{ toggleButtonText }}</span>
+      </button>
+      <div class="divider"></div>
+      <button @click="resetView" title="重置 (R)">
+        <Icon icon="lucide:refresh-ccw" />
+      </button>
+      <button @click="toggleFullscreen" :title="isFullscreen ? '退出全屏 (F)' : '全屏 (F)'">
+        <Icon v-if="isFullscreen" icon="lucide:minimize-2" />
+        <Icon v-else icon="lucide:fullscreen" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.viewer {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+  background: #000;
+  cursor: grab;
+  overflow: hidden;
+}
+
+.viewer.dragging {
+  cursor: grabbing;
+}
+
+.viewer.fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+}
+
+.viewer.fullscreen.hide-controls {
+  cursor: none;
+}
+
+.viewer.fullscreen.hide-controls .toolbar {
+  opacity: 0 !important;
+  pointer-events: none;
+}
+
+.loading,
+.error {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.loading {
+  color: var(--huyooo-text-muted);
+  font-size: 14px;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid color-mix(in srgb, var(--huyooo-text) 10%, transparent);
+  border-top-color: var(--huyooo-text);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.error svg {
+  width: 48px;
+  height: 48px;
+  color: var(--huyooo-danger);
+}
+
+.error p {
+  color: var(--huyooo-text);
+  font-size: 14px;
+}
+
+/* 与 VideoPlayer 一致：整块舞台铺满；适合窗口时子槽用 aspect-ratio 由浏览器解「最大内接矩形」 */
+.media-stage {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.slot-root--fit {
+  margin: auto;
+  max-width: 100%;
+  max-height: 100%;
+  min-width: 0;
+  min-height: 0;
+  width: auto;
+  height: auto;
+  box-sizing: border-box;
+}
+
+.slot-root--manual {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image {
+  user-select: none;
+  -webkit-user-drag: none;
+  box-shadow: var(--huyooo-shadow-lg);
+}
+
+/* 槽与像素比一致，子图铺满槽 → 无 contain 在错比例矩形里的细边 */
+.image.image--fit-slot {
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+  display: block;
+}
+
+.image.image--manual {
+  max-width: none;
+  max-height: none;
+  flex-shrink: 0;
+  will-change: transform;
+}
+
+.viewer.animated .image.image--manual {
+  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+/*
+ * 工具栏：fit-content 胶囊，水平居中浮在图片底部（macOS Preview 风格）。
+ * position: absolute + 仅指定 left（不指定 right）→ 元素宽度自然 shrink-to-fit；
+ * inline-flex 让内部按内容布局；transform translateX(-50%) 把胶囊中心对齐到容器中心。
+ */
+.toolbar {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  z-index: 3;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  background: var(--huyooo-panel-bg);
+  backdrop-filter: blur(20px);
+  border-radius: 12px;
+  border: 1px solid var(--huyooo-border);
+  box-shadow: var(--huyooo-shadow-lg);
+  opacity: 0;
+  transform: translate(-50%, 8px);
+  transition: opacity 0.25s, transform 0.25s;
+  -webkit-app-region: no-drag;
+}
+
+.viewer:hover .toolbar,
+.viewer.fullscreen .toolbar {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+.toolbar button {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--huyooo-text);
+  transition: all 0.15s;
+}
+
+.toolbar button:hover {
+  background: var(--huyooo-muted-hover);
+  color: var(--huyooo-on-primary, #ffffff);
+}
+
+.toolbar button:active {
+  transform: scale(0.95);
+}
+
+.toolbar button svg,
+.toolbar button :deep(svg) {
+  width: 18px;
+  height: 18px;
+}
+
+.toolbar button :deep(.iconify) {
+  font-size: 18px;
+}
+
+.toolbar .divider {
+  width: 1px;
+  height: 20px;
+  background: var(--huyooo-border);
+  margin: 0 6px;
+}
+
+.zoom-label {
+  color: var(--huyooo-text-muted);
+  font-size: 11px;
+  font-weight: 500;
+  min-width: 42px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.fit-toggle {
+  width: auto !important;
+  min-width: 80px;
+  padding: 0 10px !important;
+  gap: 5px;
+}
+
+.fit-toggle span {
+  font-size: 11px;
+  white-space: nowrap;
+}
+</style>