diff --git a/packages/theme/package.json b/packages/theme/package.json
index cbf32b7..ee7f7ec 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -20,8 +20,7 @@
     "sharp": "^0.34.4",
     "subset-font": "^2.4.0",
     "swiper": "^12.0.2",
-    "thumbhash": "^0.1.1",
-    "viewerjs": "^1.11.7"
+    "thumbhash": "^0.1.1"
   },
   "peerDependencies": {
     "@vueuse/core": "^10.0.0",
diff --git a/packages/theme/src/client/Viewer/ImageViewer.vue b/packages/theme/src/client/Viewer/ImageViewer.vue
new file mode 100644
index 0000000..65a678d
--- /dev/null
+++ b/packages/theme/src/client/Viewer/ImageViewer.vue
@@ -0,0 +1,366 @@
+<template>
+  <Teleport to="body">
+    <Transition name="viewer-fade">
+      <div v-if="visible" class="image-viewer" @click="handleBackdropClick">
+        <!-- 工具栏 -->
+        <div class="image-viewer-toolbar">
+          <button
+            type="button"
+            class="toolbar-button"
+            title="关闭 (ESC)"
+            @click="close"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+
+        <!-- 图片容器 -->
+        <div class="image-container" @click.stop>
+          <img
+            ref="imageRef"
+            :src="imageSrc"
+            class="viewer-image"
+            :style="imageStyle"
+            draggable="false"
+            @dblclick="handleDoubleClick"
+            @wheel="handleWheel"
+            @mousedown="handleMouseDown"
+            @touchstart="handleTouchStart"
+            @touchmove="handleTouchMove"
+            @touchend="handleTouchEnd"
+          />
+        </div>
+
+        <!-- 缩放提示 -->
+        <div class="zoom-hint">
+          双击放大 · 滚轮缩放 · 拖动移动 · ESC 关闭
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from "vue";
+
+interface Props {
+  visible: boolean;
+  imageSrc: string;
+}
+
+interface Emits {
+  (e: "update:visible", value: boolean): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const imageRef = ref<HTMLImageElement | null>(null);
+
+// 图片变换状态
+const scale = ref(1);
+const translateX = ref(0);
+const translateY = ref(0);
+const isDragging = ref(false);
+
+// 鼠标拖动状态
+const dragStartX = ref(0);
+const dragStartY = ref(0);
+
+// 保存原始 body overflow 值
+const originalBodyOverflow = ref("");
+
+// 触摸状态
+interface TouchState {
+  startDistance: number;
+  startScale: number;
+  lastX: number;
+  lastY: number;
+}
+
+const touchState = ref<TouchState>({
+  startDistance: 0,
+  startScale: 1,
+  lastX: 0,
+  lastY: 0,
+});
+
+// 计算图片样式
+const imageStyle = computed(() => ({
+  transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,
+  cursor: scale.value > 1 ? (isDragging.value ? "grabbing" : "grab") : "zoom-in",
+  transition: isDragging.value ? "none" : "transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+}));
+
+// 重置变换
+function resetTransform() {
+  scale.value = 1;
+  translateX.value = 0;
+  translateY.value = 0;
+}
+
+// 关闭查看器
+function close() {
+  emit("update:visible", false);
+}
+
+// 点击背景关闭
+function handleBackdropClick(e: MouseEvent) {
+  if (e.target === e.currentTarget) {
+    close();
+  }
+}
+
+// 双击缩放
+function handleDoubleClick(event: MouseEvent) {
+  event.preventDefault();
+  
+  if (scale.value > 1) {
+    resetTransform();
+  } else {
+    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    const centerX = rect.width / 2;
+    const centerY = rect.height / 2;
+    
+    scale.value = 2;
+    translateX.value = (centerX - x) * 0.5;
+    translateY.value = (centerY - y) * 0.5;
+  }
+}
+
+// 滚轮缩放
+function handleWheel(event: WheelEvent) {
+  event.preventDefault();
+  
+  const delta = -event.deltaY;
+  const scaleChange = delta > 0 ? 1.1 : 0.9;
+  const newScale = scale.value * scaleChange;
+  
+  scale.value = Math.max(1, Math.min(4, newScale));
+  
+  if (scale.value <= 1) {
+    translateX.value = 0;
+    translateY.value = 0;
+  }
+}
+
+// 鼠标拖动
+function handleMouseDown(event: MouseEvent) {
+  if (scale.value > 1) {
+    isDragging.value = true;
+    dragStartX.value = event.clientX - translateX.value;
+    dragStartY.value = event.clientY - translateY.value;
+    event.preventDefault();
+  }
+}
+
+function handleMouseMove(event: MouseEvent) {
+  if (isDragging.value) {
+    translateX.value = event.clientX - dragStartX.value;
+    translateY.value = event.clientY - dragStartY.value;
+    event.preventDefault();
+  }
+}
+
+function handleMouseUp() {
+  isDragging.value = false;
+}
+
+// 触摸手势
+function getDistance(touch1: Touch, touch2: Touch): number {
+  const dx = touch1.clientX - touch2.clientX;
+  const dy = touch1.clientY - touch2.clientY;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+function handleTouchStart(event: TouchEvent) {
+  if (event.touches.length === 2) {
+    event.preventDefault();
+    touchState.value.startDistance = getDistance(
+      event.touches[0],
+      event.touches[1]
+    );
+    touchState.value.startScale = scale.value;
+  } else if (event.touches.length === 1 && scale.value > 1) {
+    event.preventDefault();
+    touchState.value.lastX = event.touches[0].clientX;
+    touchState.value.lastY = event.touches[0].clientY;
+  }
+}
+
+function handleTouchMove(event: TouchEvent) {
+  if (event.touches.length === 2) {
+    event.preventDefault();
+    const currentDistance = getDistance(event.touches[0], event.touches[1]);
+    const newScale =
+      (currentDistance / touchState.value.startDistance) *
+      touchState.value.startScale;
+    
+    scale.value = Math.max(1, Math.min(4, newScale));
+    
+    if (scale.value <= 1) {
+      translateX.value = 0;
+      translateY.value = 0;
+    }
+  } else if (event.touches.length === 1 && scale.value > 1) {
+    event.preventDefault();
+    const deltaX = event.touches[0].clientX - touchState.value.lastX;
+    const deltaY = event.touches[0].clientY - touchState.value.lastY;
+    
+    translateX.value += deltaX;
+    translateY.value += deltaY;
+    
+    touchState.value.lastX = event.touches[0].clientX;
+    touchState.value.lastY = event.touches[0].clientY;
+  }
+}
+
+function handleTouchEnd() {
+  if (scale.value <= 1) {
+    translateX.value = 0;
+    translateY.value = 0;
+  }
+}
+
+// 键盘事件
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === "Escape" && props.visible) {
+    close();
+  }
+}
+
+// 监听可见性变化，重置状态
+watch(
+  () => props.visible,
+  (newValue) => {
+    if (newValue) {
+      resetTransform();
+      // 保存原始 overflow 值并锁定滚动
+      originalBodyOverflow.value = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+    } else {
+      // 恢复原始 overflow 值
+      document.body.style.overflow = originalBodyOverflow.value;
+    }
+  }
+);
+
+onMounted(() => {
+  window.addEventListener("keydown", handleKeydown);
+  window.addEventListener("mousemove", handleMouseMove);
+  window.addEventListener("mouseup", handleMouseUp);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", handleKeydown);
+  window.removeEventListener("mousemove", handleMouseMove);
+  window.removeEventListener("mouseup", handleMouseUp);
+  // 恢复原始 overflow 值
+  document.body.style.overflow = originalBodyOverflow.value;
+});
+</script>
+
+<style scoped>
+.image-viewer {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.95);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-viewer-toolbar {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10;
+}
+
+.toolbar-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.toolbar-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.1);
+}
+
+.image-container {
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  touch-action: none;
+}
+
+.viewer-image {
+  max-width: 100%;
+  max-height: 90vh;
+  object-fit: contain;
+  user-select: none;
+  transform-origin: center center;
+  will-change: transform;
+}
+
+.zoom-hint {
+  position: absolute;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.75rem 1.5rem;
+  border-radius: 2rem;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  font-size: 0.875rem;
+  opacity: 0.8;
+  pointer-events: none;
+}
+
+/* 过渡动画 */
+.viewer-fade-enter-active,
+.viewer-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.viewer-fade-enter-from,
+.viewer-fade-leave-to {
+  opacity: 0;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+  .zoom-hint {
+    font-size: 0.75rem;
+    padding: 0.5rem 1rem;
+    bottom: 1rem;
+  }
+}
+</style>
diff --git a/packages/theme/src/client/Viewer/Viewer.vue b/packages/theme/src/client/Viewer/Viewer.vue
index 3f85d8f..ccf625f 100644
--- a/packages/theme/src/client/Viewer/Viewer.vue
+++ b/packages/theme/src/client/Viewer/Viewer.vue
@@ -1,78 +1,44 @@
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { onContentUpdated } from "vitepress";
-import "viewerjs/dist/viewer.css";
+import ImageViewer from "./ImageViewer.vue";
 
-let viewer: any = null;
+const viewerVisible = ref(false);
+const currentImageSrc = ref("");
 
-async function initViewer() {
-  const docDomContainer = document.querySelector("#VPContent") as HTMLElement;
-  if (!docDomContainer) return;
-
-  const ViewerModule = await import("viewerjs");
-  viewer = new ViewerModule.default(docDomContainer, {
-    toolbar: {
-      prev: {
-        show: 1,
-        size: "large",
-      },
-      next: {
-        show: 1,
-        size: "large",
-      },
-    },
-  });
-}
-
-function destroyViewer() {
-  if (viewer) {
-    viewer.destroy();
-    viewer = null;
-  }
-}
-
-async function previewImage(e: Event) {
+function previewImage(e: Event) {
   const target = e.target as HTMLElement;
   if (target.tagName.toLowerCase() !== "img") return;
 
   // 排除 link card 中的图片
   if (target.closest(".link-card")) return;
 
-  if (!viewer) {
-    await initViewer();
-  }
-  viewer?.show();
+  const imgSrc = (target as HTMLImageElement).src;
+  if (!imgSrc) return;
+
+  currentImageSrc.value = imgSrc;
+  viewerVisible.value = true;
 }
 
 onMounted(() => {
   const docDomContainer = document.querySelector("#VPContent");
   docDomContainer?.addEventListener("click", previewImage);
-
-  // 空闲时预加载 viewer.js，避免点击延迟
-  if ("requestIdleCallback" in window) {
-    requestIdleCallback(() => initViewer());
-  } else {
-    setTimeout(() => initViewer(), 2000);
-  }
 });
 
-// 在路由切换/内容更新时重新初始化 viewer
+// 在路由切换/内容更新时关闭查看器
 onContentUpdated(() => {
-  destroyViewer();
-
-  // 使用 nextTick 确保 DOM 已更新
-  if ("requestIdleCallback" in window) {
-    requestIdleCallback(() => initViewer());
-  } else {
-    setTimeout(() => initViewer(), 100);
-  }
+  viewerVisible.value = false;
 });
 
 onUnmounted(() => {
   const docDomContainer = document.querySelector("#VPContent");
   docDomContainer?.removeEventListener("click", previewImage);
-  destroyViewer();
 });
 </script>
 
-<template></template>
+<template>
+  <ImageViewer
+    v-model:visible="viewerVisible"
+    :image-src="currentImageSrc"
+  />
+</template>
diff --git a/packages/theme/src/client/components/PhotoViewer.vue b/packages/theme/src/client/components/PhotoViewer.vue
index 812dab2..2c1763c 100644
--- a/packages/theme/src/client/components/PhotoViewer.vue
+++ b/packages/theme/src/client/components/PhotoViewer.vue
@@ -67,23 +67,32 @@
           :keyboard="{ enabled: true }"
           :navigation="true"
           :loop="false"
+          :allow-touch-move="!isDragging && !touchState.isDragging"
           @swiperslidechange="onSlideChange"
         >
           <swiper-slide v-for="(photo, index) in photos" :key="index">
             <div class="slide-content">
               <div
                 class="photo-container"
-                :class="{ zoomed: zoomedSlides.has(index) }"
-                @dblclick="toggleZoom(index)"
+                @dblclick="(e) => handleDoubleClick(e, index)"
+                @wheel="(e) => handleWheel(e, index)"
+                @mousedown="(e) => handleMouseDown(e, index)"
+                @mousemove="(e) => handleMouseMove(e, index)"
+                @mouseup="handleMouseUp"
+                @mouseleave="handleMouseUp"
+                @touchstart="(e) => handleTouchStart(e, index)"
+                @touchmove="(e) => handleTouchMove(e, index)"
+                @touchend="(e) => handleTouchEnd(e, index)"
               >
                 <img
                   :src="photo.url"
                   :alt="photo.caption || `Photo ${index + 1}`"
                   class="viewer-image"
+                  :style="getImageStyle(index)"
                   draggable="false"
                 />
               </div>
-              <div class="zoom-hint">双击或捏合缩放</div>
+              <div class="zoom-hint">双击或捏合缩放 · 滚轮缩放</div>
             </div>
           </swiper-slide>
         </swiper-container>
@@ -205,13 +214,211 @@ const emit = defineEmits<Emits>();
 
 const swiperRef = ref<any>(null);
 const currentIndex = ref(props.initialIndex);
-const zoomedSlides = ref(new Set<number>());
 const thumbnailsContainerRef = ref<HTMLElement | null>(null);
 const thumbnailRefs: HTMLElement[] = [];
 const toastRef = ref<InstanceType<typeof Toast> | null>(null);
 
+// 图片缩放和平移状态
+interface ImageTransform {
+  scale: number;
+  translateX: number;
+  translateY: number;
+}
+
+const imageTransforms = ref<Map<number, ImageTransform>>(new Map());
+
 const currentPhoto = computed(() => props.photos[currentIndex.value]);
 
+// 获取或初始化图片变换状态
+function getTransform(index: number): ImageTransform {
+  if (!imageTransforms.value.has(index)) {
+    imageTransforms.value.set(index, {
+      scale: 1,
+      translateX: 0,
+      translateY: 0,
+    });
+  }
+  return imageTransforms.value.get(index)!;
+}
+
+// 重置图片变换状态
+function resetTransform(index: number) {
+  imageTransforms.value.set(index, {
+    scale: 1,
+    translateX: 0,
+    translateY: 0,
+  });
+}
+
+// 触摸和手势状态
+interface TouchState {
+  startDistance: number;
+  startScale: number;
+  lastX: number;
+  lastY: number;
+  isDragging: boolean;
+}
+
+const touchState = ref<TouchState>({
+  startDistance: 0,
+  startScale: 1,
+  lastX: 0,
+  lastY: 0,
+  isDragging: false,
+});
+
+// 计算两点间距离（用于pinch缩放）
+function getDistance(touch1: Touch, touch2: Touch): number {
+  const dx = touch1.clientX - touch2.clientX;
+  const dy = touch1.clientY - touch2.clientY;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+// 处理触摸开始
+function handleTouchStart(event: TouchEvent, index: number) {
+  const transform = getTransform(index);
+  
+  if (event.touches.length === 2) {
+    // 双指触摸：准备缩放
+    event.preventDefault();
+    touchState.value.startDistance = getDistance(
+      event.touches[0],
+      event.touches[1]
+    );
+    touchState.value.startScale = transform.scale;
+  } else if (event.touches.length === 1 && transform.scale > 1) {
+    // 单指触摸且已放大：准备拖动
+    event.preventDefault();
+    touchState.value.isDragging = true;
+    touchState.value.lastX = event.touches[0].clientX;
+    touchState.value.lastY = event.touches[0].clientY;
+  }
+}
+
+// 处理触摸移动
+function handleTouchMove(event: TouchEvent, index: number) {
+  const transform = getTransform(index);
+  
+  if (event.touches.length === 2) {
+    // 双指缩放
+    event.preventDefault();
+    const currentDistance = getDistance(event.touches[0], event.touches[1]);
+    const scale = (currentDistance / touchState.value.startDistance) * touchState.value.startScale;
+    
+    // 限制缩放范围 1x-4x
+    transform.scale = Math.max(1, Math.min(4, scale));
+    
+    // 如果缩放到1，重置平移
+    if (transform.scale <= 1) {
+      transform.translateX = 0;
+      transform.translateY = 0;
+    }
+  } else if (event.touches.length === 1 && touchState.value.isDragging && transform.scale > 1) {
+    // 单指拖动
+    event.preventDefault();
+    const deltaX = event.touches[0].clientX - touchState.value.lastX;
+    const deltaY = event.touches[0].clientY - touchState.value.lastY;
+    
+    transform.translateX += deltaX;
+    transform.translateY += deltaY;
+    
+    touchState.value.lastX = event.touches[0].clientX;
+    touchState.value.lastY = event.touches[0].clientY;
+  }
+}
+
+// 处理触摸结束
+function handleTouchEnd(event: TouchEvent, index: number) {
+  touchState.value.isDragging = false;
+  
+  // 如果缩放回到1，确保重置平移
+  const transform = getTransform(index);
+  if (transform.scale <= 1) {
+    transform.translateX = 0;
+    transform.translateY = 0;
+  }
+}
+
+// 双击缩放
+function handleDoubleClick(event: MouseEvent, index: number) {
+  event.preventDefault();
+  const transform = getTransform(index);
+  
+  if (transform.scale > 1) {
+    // 已放大，缩小到原始大小
+    resetTransform(index);
+  } else {
+    // 原始大小，放大到2倍
+    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    const centerX = rect.width / 2;
+    const centerY = rect.height / 2;
+    
+    transform.scale = 2;
+    // 以点击位置为中心放大
+    transform.translateX = (centerX - x) * 0.5;
+    transform.translateY = (centerY - y) * 0.5;
+  }
+}
+
+// 鼠标滚轮缩放
+function handleWheel(event: WheelEvent, index: number) {
+  event.preventDefault();
+  const transform = getTransform(index);
+  
+  const delta = -event.deltaY;
+  const scaleChange = delta > 0 ? 1.1 : 0.9;
+  const newScale = transform.scale * scaleChange;
+  
+  // 限制缩放范围
+  transform.scale = Math.max(1, Math.min(4, newScale));
+  
+  // 如果缩放到1，重置平移
+  if (transform.scale <= 1) {
+    transform.translateX = 0;
+    transform.translateY = 0;
+  }
+}
+
+// 鼠标拖动（当放大时）
+let isDragging = false;
+let dragStartX = 0;
+let dragStartY = 0;
+
+function handleMouseDown(event: MouseEvent, index: number) {
+  const transform = getTransform(index);
+  if (transform.scale > 1) {
+    isDragging = true;
+    dragStartX = event.clientX - transform.translateX;
+    dragStartY = event.clientY - transform.translateY;
+    event.preventDefault();
+  }
+}
+
+function handleMouseMove(event: MouseEvent, index: number) {
+  if (isDragging) {
+    const transform = getTransform(index);
+    transform.translateX = event.clientX - dragStartX;
+    transform.translateY = event.clientY - dragStartY;
+    event.preventDefault();
+  }
+}
+
+function handleMouseUp() {
+  isDragging = false;
+}
+
+// 获取图片变换样式
+function getImageStyle(index: number): Record<string, string> {
+  const transform = getTransform(index);
+  return {
+    transform: `translate(${transform.translateX}px, ${transform.translateY}px) scale(${transform.scale})`,
+    cursor: transform.scale > 1 ? 'grab' : 'zoom-in',
+    transition: isDragging || touchState.value.isDragging ? 'none' : 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+  };
+}
+
 function onSlideChange(event: any) {
   // Swiper Web Components 事件格式：event.detail[0] 是 swiper 实例
   const swiper = event.detail?.[0];
@@ -226,14 +433,6 @@ function goToSlide(index: number) {
   }
 }
 
-function toggleZoom(index: number) {
-  if (zoomedSlides.value.has(index)) {
-    zoomedSlides.value.delete(index);
-  } else {
-    zoomedSlides.value.add(index);
-  }
-}
-
 function close() {
   emit("close");
 }
@@ -312,11 +511,17 @@ function handleKeydown(event: KeyboardEvent) {
   }
 }
 
-// 监听当前索引变化，自动滚动缩略图
-watch(currentIndex, () => {
+// 监听当前索引变化，自动滚动缩略图并重置上一个图片的缩放
+watch(currentIndex, (newIndex, oldIndex) => {
   nextTick(() => {
     scrollThumbnailIntoView();
   });
+  
+  // 重置上一个图片的变换状态（可选）
+  if (oldIndex !== undefined && oldIndex !== newIndex) {
+    // 可以选择重置或保留缩放状态
+    // resetTransform(oldIndex);
+  }
 });
 
 onMounted(() => {
@@ -325,6 +530,14 @@ onMounted(() => {
 
   // 监听键盘事件
   window.addEventListener("keydown", handleKeydown);
+  
+  // 添加全局鼠标事件监听，确保拖动平滑
+  window.addEventListener("mousemove", (e) => {
+    if (isDragging) {
+      handleMouseMove(e as MouseEvent, currentIndex.value);
+    }
+  });
+  window.addEventListener("mouseup", handleMouseUp);
 
   // 初始化时滚动到当前缩略图
   nextTick(() => {
@@ -338,6 +551,9 @@ onUnmounted(() => {
 
   // 移除键盘监听
   window.removeEventListener("keydown", handleKeydown);
+  
+  // 移除全局鼠标监听
+  window.removeEventListener("mouseup", handleMouseUp);
 });
 </script>
 
@@ -443,13 +659,8 @@ swiper-slide {
   position: relative;
   max-width: 90%;
   max-height: 80%;
-  transition: transform 0.3s ease;
-  cursor: zoom-in;
-}
-
-.photo-container.zoomed {
-  transform: scale(1.5);
-  cursor: zoom-out;
+  overflow: hidden;
+  touch-action: none; /* 禁用浏览器默认手势 */
 }
 
 .viewer-image {
@@ -457,6 +668,8 @@ swiper-slide {
   max-height: 80vh;
   object-fit: contain;
   user-select: none;
+  transform-origin: center center;
+  will-change: transform; /* 优化性能 */
 }
 
 .zoom-hint {