images-viewer-js 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,1811 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var imageViewer = {exports: {}};
+
+(function (module, exports) {
+	// image-viewer.js - 修复居中问题的版本
+	(function (global, factory) {
+	  // UMD包装器，支持CommonJS、AMD和全局变量
+	  {
+	    // CommonJS/Node.js环境
+	    module.exports = factory();
+	  }
+	})(typeof self !== 'undefined' ? self : commonjsGlobal, function () {
+
+	  // 节流函数
+	  function throttle(func, delay) {
+	    let timeoutId;
+	    let lastExecTime = 0;
+	    return function (...args) {
+	      const currentTime = Date.now();
+	      const timeSinceLastExec = currentTime - lastExecTime;
+
+	      if (timeSinceLastExec > delay) {
+	        func.apply(this, args);
+	        lastExecTime = currentTime;
+	      } else {
+	        clearTimeout(timeoutId);
+	        timeoutId = setTimeout(() => {
+	          func.apply(this, args);
+	          lastExecTime = currentTime;
+	        }, delay - timeSinceLastExec);
+	      }
+	    };
+	  }
+
+	  class ImageViewer {
+	    constructor(options) {
+	      // 默认配置
+	      this.defaultOptions = {
+	        closeOnMaskClick: false,
+	        loop: true,
+	        buttons: {
+	          zoomIn: true,
+	          zoomOut: true,
+	          rotateLeft: true,
+	          rotateRight: true,
+	          reset: true,
+	          download: true,
+	          fullscreen: true,
+	          prev: true,
+	          next: true,
+	          close: true,
+	          topClose: true,
+	          thumbnails: true,
+	          info: true,
+	          originalSize: true,
+	        },
+	        imageInfo: {
+	          visible: false,
+	          showName: true,
+	          showDimensions: true,
+	        },
+	        theme: {
+	          // 背景相关
+	          viewerBgColor: 'rgba(0, 0, 0, 0.4)',
+
+	          // 工具栏相关（半透明浅灰，营造朦胧感）
+	          toolbarBgColor: 'rgba(150, 150, 150, 0.7)',
+	          toolbarBorderRadius: '30px',
+	          toolbarPadding: '8px 12px',
+	          toolbarBottom: '20px',
+
+	          // 按钮相关（半透明中灰）
+	          buttonBgColor: 'rgba(150, 150, 150, 0.7)',
+	          buttonHoverBg: 'rgba(200, 200, 200, 0.4)',
+	          buttonSize: '50px',
+	          buttonFontSize: '20px',
+	          buttonBorderRadius: '50%',
+
+	          // 右上角关闭按钮
+	          topCloseBtnSize: '44px',
+	          topCloseBtnTop: '20px',
+	          topCloseBtnRight: '20px',
+
+	          // 信息栏相关（半透明浅灰）
+	          infoBgColor: 'rgba(150, 150, 150, 0.7)',
+	          infoBorderRadius: '12px',
+	          infoPadding: '10px 15px',
+	          infoFontSize: '13px',
+	          infoTop: '70px',
+	          infoLeft: '20px',
+
+	          // 缩放指示器
+	          zoomIndicatorBg: 'rgba(150, 150, 150, 0.7)',
+	          zoomIndicatorBorderRadius: '18px',
+	          zoomIndicatorPadding: '6px 12px',
+	          zoomIndicatorFontSize: '14px',
+	          zoomIndicatorTop: '20px',
+	          zoomIndicatorLeft: '20px',
+
+	          // 通用
+	          activeColor: 'rgba(100, 150, 255, 0.8)',
+	          textColor: 'rgba(255, 255, 255, 0.9)',
+	          shadowColor: 'rgba(0, 0, 0, 0.2)',
+	          transitionSpeed: '0.3s',
+	        },
+	      };
+
+	      // 合并用户配置
+	      this.options = {
+	        ...this.defaultOptions,
+	        ...options,
+	        buttons: { ...this.defaultOptions.buttons, ...(options?.buttons || {}) },
+	        imageInfo: { ...this.defaultOptions.imageInfo, ...(options?.imageInfo || {}) },
+	        theme: { ...this.defaultOptions.theme, ...(options?.theme || {}) },
+	      };
+
+	      // 解析图片参数
+	      this.parseImageOptions(options);
+	      if (this.images.length === 0) {
+	        throw new Error('未提供有效的图片URL');
+	      }
+
+	      // 初始化状态变量
+	      this.currentIndex = 0;
+	      this.scale = 1.0;
+	      this.rotation = 0;
+	      this.translateX = 0;
+	      this.translateY = 0;
+	      this.isDragging = false;
+	      this.startX = 0;
+	      this.startY = 0;
+	      this.startTranslateX = 0;
+	      this.startTranslateY = 0;
+	      this.isFullscreen = false;
+	      this.imageInfoVisible = this.options.imageInfo.visible;
+	      this.imageMetadata = [];
+	      this.loadedImages = new Map();
+
+	      // 双击相关状态
+	      this.lastTapTime = 0;
+	      this.lastScale = 1.0;
+	      this.lastTranslateX = 0;
+	      this.lastTranslateY = 0;
+	      this.hasPreviousState = false;
+	      this.isToggledState = false;
+
+	      // 触摸状态
+	      this.touchState = {
+	        isDragging: false,
+	        isPinching: false,
+	        initialDistance: null,
+	        initialScale: null,
+	        initialTranslateX: null,
+	        initialTranslateY: null,
+	        centerX: null,
+	        centerY: null,
+	        relativeCenterX: null,
+	        relativeCenterY: null,
+	        lastTouchTime: 0,
+	        startX: 0,
+	        startY: 0,
+	        startTranslateX: 0,
+	        startTranslateY: 0,
+	        minScaleChange: 0.005,
+	        scaleRatio: 1,
+	        stabilizationThreshold: 3,
+	        movementCount: 0,
+	      };
+
+	      // 事件监听器引用
+	      this.eventListeners = new Map();
+
+	      // 注入CSS样式
+	      this.injectStyles();
+
+	      // 创建优化的DOM元素
+	      this.createOptimizedElements();
+
+	      // 绑定事件
+	      this.bindEvents();
+
+	      // 预加载图片
+	      this.preloadImages();
+
+	      // 加载第一张图片
+	      this.loadCurrentImage();
+
+	      // 显示预览器
+	      this.show();
+	    }
+
+	    // 注入CSS样式
+	    injectStyles() {
+	      const style = document.createElement('style');
+	      style.id = 'image-viewer-styles';
+	      style.textContent = `
+        :root {
+          /* 背景相关变量 */
+          --viewer-bg-color: ${this.options.theme.viewerBgColor};
+          
+          /* 工具栏相关变量 */
+          --toolbar-bg-color: ${this.options.theme.toolbarBgColor};
+          --toolbar-border-radius: ${this.options.theme.toolbarBorderRadius};
+          --toolbar-padding: ${this.options.theme.toolbarPadding};
+          --toolbar-bottom: ${this.options.theme.toolbarBottom};
+          
+          /* 按钮相关变量 */
+          --button-bg-color: ${this.options.theme.buttonBgColor};
+          --button-hover-bg: ${this.options.theme.buttonHoverBg};
+          --button-size: ${this.options.theme.buttonSize};
+          --button-font-size: ${this.options.theme.buttonFontSize};
+          --button-border-radius: ${this.options.theme.buttonBorderRadius};
+          
+          /* 右上角关闭按钮变量 */
+          --top-close-btn-size: ${this.options.theme.topCloseBtnSize};
+          --top-close-btn-top: ${this.options.theme.topCloseBtnTop};
+          --top-close-btn-right: ${this.options.theme.topCloseBtnRight};
+          
+          /* 信息栏相关变量 */
+          --info-bg-color: ${this.options.theme.infoBgColor};
+          --info-border-radius: ${this.options.theme.infoBorderRadius};
+          --info-padding: ${this.options.theme.infoPadding};
+          --info-font-size: ${this.options.theme.infoFontSize};
+          --info-top: ${this.options.theme.infoTop};
+          --info-left: ${this.options.theme.infoLeft};
+          
+          /* 缩放指示器变量 */
+          --zoom-indicator-bg: ${this.options.theme.zoomIndicatorBg};
+          --zoom-indicator-border-radius: ${this.options.theme.zoomIndicatorBorderRadius};
+          --zoom-indicator-padding: ${this.options.theme.zoomIndicatorPadding};
+          --zoom-indicator-font-size: ${this.options.theme.zoomIndicatorFontSize};
+          --zoom-indicator-top: ${this.options.theme.zoomIndicatorTop};
+          --zoom-indicator-left: ${this.options.theme.zoomIndicatorLeft};
+          
+          /* 通用变量 */
+          --active-color: ${this.options.theme.activeColor};
+          --text-color: ${this.options.theme.textColor};
+          --shadow-color: ${this.options.theme.shadowColor};
+          --transition-speed: ${this.options.theme.transitionSpeed};
+        }
+
+        .image-viewer-container {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          z-index: 9999;
+          opacity: 0;
+          transition: opacity var(--transition-speed) ease;
+          touch-action: none;
+          -webkit-user-select: none;
+          user-select: none;
+          display: none;
+          background-color: var(--viewer-bg-color);
+        }
+
+        /* 修复图片容器样式 - 确保居中 */
+        .image-viewer-image-container {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 2;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+        }
+
+        /* 修复图片样式 - 确保居中 */
+        .image-viewer-image {
+          position: relative;
+          object-fit: contain;
+          cursor: grab;
+          transition: transform 0.1s ease-out, opacity var(--transition-speed) ease;
+          transform-origin: center center;
+          opacity: 0;
+          box-shadow: 0 8px 25px var(--shadow-color);
+          border-radius: 4px;
+          user-select: none;
+          touch-action: none;
+        }
+
+        .image-viewer-image.loaded {
+          opacity: 1;
+        }
+
+        .image-viewer-image.dragging {
+          cursor: grabbing;
+          transition: none;
+        }
+
+        /* 加载指示器 */
+        .image-viewer-loading {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          background-color: rgba(127, 127, 127, 0.7);
+          padding: 20px 30px;
+          border-radius: 10px;
+          display: flex;
+          align-items: center;
+          gap: 15px;
+          color: var(--text-color);
+          font-size: 18px;
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity var(--transition-speed) ease;
+          z-index: 3;
+        }
+
+        .image-viewer-loading.active {
+          opacity: 1;
+        }
+
+        .image-viewer-loading-spinner {
+          width: 40px;
+          height: 40px;
+          border: 4px solid rgba(255, 255, 255, 0.2);
+          border-top-color: var(--active-color);
+          border-radius: 50%;
+          animation: imageViewerSpin 1s linear infinite;
+        }
+
+        @keyframes imageViewerSpin {
+          to {
+            transform: rotate(360deg);
+          }
+        }
+
+        /* 右上角关闭按钮样式 */
+        .image-viewer-top-close-btn {
+          position: absolute;
+          top: var(--top-close-btn-top);
+          right: var(--top-close-btn-right);
+          width: var(--top-close-btn-size);
+          height: var(--top-close-btn-size);
+          border-radius: 50%;
+          background-color: var(--button-bg-color);
+          color: var(--text-color);
+          border: none;
+          font-size: 20px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all var(--transition-speed);
+          z-index: 10;
+          backdrop-filter: blur(4px);
+          box-shadow: 0 2px 8px var(--shadow-color);
+        }
+
+        .image-viewer-top-close-btn:hover {
+          background-color: rgba(255, 50, 50, 0.3);
+          transform: scale(1.1);
+        }
+
+        /* 缩放指示器样式 */
+        .image-viewer-zoom-indicator {
+          position: absolute;
+          top: var(--zoom-indicator-top);
+          left: var(--zoom-indicator-left);
+          color: var(--text-color);
+          background-color: var(--zoom-indicator-bg);
+          padding: var(--zoom-indicator-padding);
+          border-radius: var(--zoom-indicator-border-radius);
+          font-size: var(--zoom-indicator-font-size);
+          z-index: 10;
+          min-width: 60px;
+          text-align: center;
+          backdrop-filter: blur(4px);
+          box-shadow: 0 2px 8px var(--shadow-color);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        /* 信息栏样式 */
+        .image-viewer-image-info {
+          position: absolute;
+          top: var(--info-top);
+          left: var(--info-left);
+          color: var(--text-color);
+          background-color: var(--info-bg-color);
+          padding: var(--info-padding);
+          border-radius: var(--info-border-radius);
+          font-size: var(--info-font-size);
+          z-index: 10;
+          max-width: calc(100% - 40px);
+          backdrop-filter: blur(4px);
+          box-shadow: 0 4px 12px var(--shadow-color);
+          display: none;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .image-viewer-image-info.visible {
+          display: block;
+          animation: imageViewerFadeIn 0.3s ease;
+        }
+
+        .image-viewer-image-info p {
+          margin: 4px 0;
+          line-height: 1.4;
+        }
+
+        .image-viewer-image-info .info-label {
+          color: #ddd;
+          margin-right: 5px;
+        }
+
+        .image-viewer-shortcuts-title {
+          margin-top: 10px;
+          padding-top: 10px;
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+          font-weight: bold;
+          margin-bottom: 5px;
+        }
+
+        @keyframes imageViewerFadeIn {
+          from {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        /* 图片计数器 */
+        .image-viewer-image-counter {
+          position: absolute;
+          top: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          color: var(--text-color);
+          background-color: var(--info-bg-color);
+          padding: 6px 12px;
+          border-radius: 18px;
+          font-size: 14px;
+          z-index: 10;
+          backdrop-filter: blur(4px);
+          box-shadow: 0 2px 8px var(--shadow-color);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        /* 导航按钮 */
+        .image-viewer-nav-buttons {
+          position: absolute;
+          top: 50%;
+          left: 0;
+          right: 0;
+          transform: translateY(-50%);
+          display: flex;
+          justify-content: space-between;
+          pointer-events: none;
+          z-index: 5;
+          padding: 0 10px;
+        }
+
+        .image-viewer-nav-btn {
+          width: var(--button-size);
+          height: var(--button-size);
+          border-radius: 50%;
+          background-color: var(--button-bg-color);
+          color: var(--text-color);
+          border: none;
+          font-size: 24px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.2s;
+          pointer-events: auto;
+          opacity: 0.9;
+          backdrop-filter: blur(4px);
+          box-shadow: 0 2px 8px var(--shadow-color);
+          z-index: 6;
+        }
+
+        .image-viewer-nav-btn:hover {
+          background-color: var(--button-hover-bg);
+          opacity: 1;
+          transform: scale(1.1);
+        }
+
+        .image-viewer-nav-btn:disabled {
+          opacity: 0.3;
+          cursor: not-allowed;
+          transform: none;
+        }
+
+        /* 工具栏样式 */
+        .image-viewer-toolbar {
+          position: absolute;
+          bottom: var(--toolbar-bottom);
+          left: 50%;
+          transform: translateX(-50%);
+          background-color: var(--toolbar-bg-color);
+          backdrop-filter: blur(12px);
+          padding: var(--toolbar-padding);
+          border-radius: var(--toolbar-border-radius);
+          display: flex;
+          gap: 2px;
+          z-index: 10;
+          box-shadow: 0 6px 25px var(--shadow-color);
+          max-width: calc(100% - 40px);
+          overflow-x: auto;
+          overflow-y: hidden;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        .image-viewer-toolbar::-webkit-scrollbar {
+          display: none;
+        }
+
+        .image-viewer-tool-btn {
+          width: var(--button-size);
+          height: var(--button-size);
+          background-color: transparent;
+          border: none;
+          color: var(--text-color);
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: var(--button-font-size);
+          transition: all 0.2s;
+          flex-shrink: 0;
+          position: relative;
+          border-radius: var(--button-border-radius);
+          margin: 0 2px;
+          z-index: 11;
+        }
+
+        .image-viewer-tool-btn:hover {
+          background-color: var(--button-hover-bg);
+          transform: translateY(-2px);
+          box-shadow: 0 4px 10px var(--shadow-color);
+        }
+
+        .image-viewer-tool-btn:active {
+          background-color: rgba(255, 255, 255, 0.3);
+          transform: translateY(0);
+        }
+
+        .image-viewer-tool-btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        /* 缩略图容器 */
+        .image-viewer-thumbnails-container {
+          position: absolute;
+          bottom: 90px;
+          left: 50%;
+          transform: translateX(-50%);
+          padding: 10px 15px;
+          background-color: var(--toolbar-bg-color);
+          backdrop-filter: blur(8px);
+          border-radius: 12px;
+          display: flex;
+          gap: 10px;
+          overflow-x: auto;
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+          z-index: 10;
+          box-shadow: 0 3px 15px var(--shadow-color);
+          max-width: calc(100% - 40px);
+          -webkit-overflow-scrolling: touch;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .image-viewer-thumbnails-container::-webkit-scrollbar {
+          display: none;
+        }
+
+        .image-viewer-thumbnail-item {
+          width: 70px;
+          height: 45px;
+          border: 2px solid transparent;
+          border-radius: 6px;
+          overflow: hidden;
+          cursor: pointer;
+          flex-shrink: 0;
+          transition: all 0.2s;
+          z-index: 11;
+        }
+
+        .image-viewer-thumbnail-item img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
+        .image-viewer-thumbnail-item.active {
+          border-color: var(--active-color);
+          transform: scale(1.05);
+        }
+
+        .image-viewer-thumbnail-item:hover {
+          transform: scale(1.05);
+        }
+
+        @media (max-width: 768px) {
+          .image-viewer-tool-btn {
+            width: 44px;
+            height: 44px;
+            font-size: 18px;
+          }
+
+          .image-viewer-toolbar {
+            padding: 6px 8px;
+            bottom: 15px;
+            border-radius: 25px;
+            max-width: 95%;
+          }
+
+          .image-viewer-thumbnails-container {
+            bottom: 80px;
+            padding: 8px 10px;
+            gap: 8px;
+            max-width: 95%;
+          }
+
+          .image-viewer-thumbnail-item {
+            width: 60px;
+            height: 40px;
+          }
+
+          .image-viewer-nav-btn {
+            width: 44px;
+            height: 44px;
+            font-size: 20px;
+          }
+
+          .image-viewer-top-close-btn {
+            width: 40px;
+            height: 40px;
+            top: 15px;
+            right: 15px;
+          }
+
+          .image-viewer-image-info {
+            font-size: 12px;
+            padding: 8px 12px;
+          }
+
+          .image-viewer-zoom-indicator,
+          .image-viewer-image-counter {
+            font-size: 12px;
+          }
+        }
+
+        @media (max-width: 480px) {
+          .image-viewer-thumbnails-container {
+            max-width: 95%;
+            padding: 6px 8px;
+          }
+
+          .image-viewer-thumbnail-item {
+            width: 50px;
+            height: 35px;
+          }
+
+          .image-viewer-toolbar {
+            max-width: 95%;
+          }
+        }
+      `;
+	      document.head.appendChild(style);
+	    }
+
+	    // 创建优化的DOM结构
+	    createOptimizedElements() {
+	      // 主容器
+	      this.container = document.createElement('div');
+	      this.container.className = 'image-viewer-container';
+	      document.body.appendChild(this.container);
+
+	      // 图片容器 - 使用flex确保居中
+	      this.imageContainer = document.createElement('div');
+	      this.imageContainer.className = 'image-viewer-image-container';
+	      this.container.appendChild(this.imageContainer);
+
+	      // 图片元素
+	      this.image = document.createElement('img');
+	      this.image.className = 'image-viewer-image';
+	      this.image.alt = '预览图片';
+	      this.image.crossOrigin = 'anonymous';
+	      this.imageContainer.appendChild(this.image);
+
+	      // 加载指示器
+	      this.loading = document.createElement('div');
+	      this.loading.className = 'image-viewer-loading';
+	      this.loading.innerHTML = `
+        <div class="image-viewer-loading-spinner"></div>
+        <div>加载中...</div>
+      `;
+	      this.imageContainer.appendChild(this.loading);
+
+	      // 右上角关闭按钮
+	      if (this.options.buttons.topClose) {
+	        this.topCloseBtn = document.createElement('button');
+	        this.topCloseBtn.className = 'image-viewer-top-close-btn';
+	        this.topCloseBtn.textContent = '×';
+	        this.topCloseBtn.title = '关闭预览 (ESC)';
+	        this.container.appendChild(this.topCloseBtn);
+	      }
+
+	      // 缩放比例显示元素
+	      this.zoomIndicator = document.createElement('div');
+	      this.zoomIndicator.className = 'image-viewer-zoom-indicator';
+	      this.container.appendChild(this.zoomIndicator);
+
+	      // 图片信息面板
+	      if (this.options.buttons.info) {
+	        this.imageInfoPanel = document.createElement('div');
+	        this.imageInfoPanel.className = `image-viewer-image-info ${this.imageInfoVisible ? 'visible' : ''}`;
+	        this.container.appendChild(this.imageInfoPanel);
+	      }
+
+	      // 图片计数器
+	      if (this.images.length > 1) {
+	        this.counter = document.createElement('div');
+	        this.counter.className = 'image-viewer-image-counter';
+	        this.container.appendChild(this.counter);
+	      }
+
+	      // 左右导航按钮
+	      if (this.images.length > 1 && (this.options.buttons.prev || this.options.buttons.next)) {
+	        this.createNavButtons();
+	      }
+
+	      // 底部工具栏
+	      this.createToolbar();
+
+	      // 缩略图导航
+	      if (this.images.length > 1 && this.options.buttons.thumbnails) {
+	        this.createThumbnails();
+	      }
+	    }
+
+	    // 创建导航按钮
+	    createNavButtons() {
+	      const navContainer = document.createElement('div');
+	      navContainer.className = 'image-viewer-nav-buttons';
+
+	      navContainer.addEventListener('click', e => {
+	        e.stopPropagation();
+	      });
+
+	      if (this.options.buttons.prev) {
+	        this.prevBtn = document.createElement('button');
+	        this.prevBtn.className = 'image-viewer-nav-btn image-viewer-prev-btn';
+	        this.prevBtn.textContent = '←';
+	        this.prevBtn.title = '上一张 (←)';
+	        this.prevBtn.addEventListener('click', e => {
+	          e.stopPropagation();
+	          this.prevImage();
+	        });
+	        navContainer.appendChild(this.prevBtn);
+	      }
+
+	      if (this.options.buttons.next) {
+	        this.nextBtn = document.createElement('button');
+	        this.nextBtn.className = 'image-viewer-nav-btn image-viewer-next-btn';
+	        this.nextBtn.textContent = '→';
+	        this.nextBtn.title = '下一张 (→)';
+	        this.nextBtn.addEventListener('click', e => {
+	          e.stopPropagation();
+	          this.nextImage();
+	        });
+	        navContainer.appendChild(this.nextBtn);
+	      }
+
+	      this.container.appendChild(navContainer);
+	    }
+
+	    // 创建工具栏
+	    createToolbar() {
+	      const toolbar = document.createElement('div');
+	      toolbar.className = 'image-viewer-toolbar';
+
+	      toolbar.addEventListener('click', e => {
+	        e.stopPropagation();
+	      });
+
+	      // 导航按钮
+	      if (this.images.length > 1) {
+	        if (this.options.buttons.prev) {
+	          this.toolbarPrevBtn = this.createToolButton('←', () => this.prevImage());
+	          toolbar.appendChild(this.toolbarPrevBtn);
+	        }
+
+	        if (this.options.buttons.next) {
+	          this.toolbarNextBtn = this.createToolButton('→', () => this.nextImage());
+	          toolbar.appendChild(this.toolbarNextBtn);
+	        }
+
+	        const separator = document.createElement('div');
+	        separator.style.width = '10px';
+	        separator.style.flexShrink = '0';
+	        toolbar.appendChild(separator);
+	      }
+
+	      // 缩放按钮
+	      if (this.options.buttons.zoomOut) {
+	        this.zoomOutBtn = this.createToolButton('−', () => this.zoom(-0.1));
+	        toolbar.appendChild(this.zoomOutBtn);
+	      }
+
+	      if (this.options.buttons.zoomIn) {
+	        this.zoomInBtn = this.createToolButton('+', () => this.zoom(0.1));
+	        toolbar.appendChild(this.zoomInBtn);
+	      }
+
+	      // 旋转按钮
+	      if (this.options.buttons.rotateLeft) {
+	        this.rotateLeftBtn = this.createToolButton('↺', () => this.rotate(-90));
+	        toolbar.appendChild(this.rotateLeftBtn);
+	      }
+
+	      if (this.options.buttons.rotateRight) {
+	        this.rotateRightBtn = this.createToolButton('↻', () => this.rotate(90));
+	        toolbar.appendChild(this.rotateRightBtn);
+	      }
+
+	      // 其他功能按钮
+	      if (this.options.buttons.reset) {
+	        this.resetBtn = this.createToolButton('⟳', () => this.resetTransform());
+	        toolbar.appendChild(this.resetBtn);
+	      }
+
+	      if (this.options.buttons.originalSize) {
+	        this.originalSizeBtn = this.createToolButton('1:1', () => this.showOriginalSize());
+	        toolbar.appendChild(this.originalSizeBtn);
+	      }
+
+	      if (this.options.buttons.info) {
+	        this.infoBtn = this.createToolButton('ⓘ', () => this.toggleImageInfo());
+	        toolbar.appendChild(this.infoBtn);
+	      }
+
+	      if (this.options.buttons.download) {
+	        this.downloadBtn = this.createToolButton('↓', () => this.downloadImage());
+	        toolbar.appendChild(this.downloadBtn);
+	      }
+
+	      if (this.options.buttons.fullscreen) {
+	        this.fullscreenBtn = this.createToolButton('⛶', () => this.toggleFullscreen());
+	        toolbar.appendChild(this.fullscreenBtn);
+	      }
+
+	      if (this.options.buttons.close) {
+	        this.closeBtn = this.createToolButton('×', () => this.close());
+	        toolbar.appendChild(this.closeBtn);
+	      }
+
+	      this.container.appendChild(toolbar);
+	    }
+
+	    // 创建工具按钮
+	    createToolButton(icon, onClick) {
+	      const button = document.createElement('button');
+	      button.className = 'image-viewer-tool-btn';
+
+	      const iconSpan = document.createElement('span');
+	      iconSpan.textContent = icon;
+
+	      button.appendChild(iconSpan);
+
+	      button.addEventListener('click', e => {
+	        e.stopPropagation();
+	        onClick();
+	      });
+
+	      return button;
+	    }
+
+	    // 创建缩略图
+	    createThumbnails() {
+	      const thumbContainer = document.createElement('div');
+	      thumbContainer.className = 'image-viewer-thumbnails-container';
+
+	      thumbContainer.addEventListener('click', e => {
+	        e.stopPropagation();
+	      });
+
+	      this.images.forEach((url, index) => {
+	        const thumbItem = document.createElement('div');
+	        thumbItem.className = `image-viewer-thumbnail-item ${index === 0 ? 'active' : ''}`;
+	        thumbItem.dataset.index = index;
+
+	        const thumbImg = document.createElement('img');
+	        thumbImg.src = url;
+	        thumbImg.alt = `缩略图 ${index + 1}`;
+	        thumbImg.crossOrigin = 'anonymous';
+
+	        thumbImg.onerror = () => {
+	          thumbImg.src =
+	            'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDJDMTEuMzcgMiAxMC43NyAyLjAzIDEwLjIzIDIuMDljLS41MSAwLS45Ni40NS0uOTYuOTZzLjQ1Ljk2Ljk2Ljk2Ljk2LS40NS45Ni0uOTYuNDUtLjk2Ljk2LS45NiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yMCAxMkg0Yy0uNTUgMC0xIC40NS0xIDEgMCAuMTguMDIuMzUuMDcuNTFMMiAxOWMwLjU1IDAgMS0uNDUgMS0xVjVjMC0uNTUuNDUtMSAxLTEgMiAwIDMuOTggLjkgNS41IDIgMi42MyAxLjMgNC4xNyAzLjEgNS41IDMgMiAwIDUgMiA1IDV2MmMwIC41NS40NSAxIDEgMWgxNmMuNTUgMCAxLS40NSAxLTF2LTEyYzAtLjU1LS40NS0xLTEtMXptLTggMTRjLTQuNDIgMC04LTMuNTgtOC04czMuNTgtOCA4LTggOCAzLjU4IDggOFMzMC40MiAxNiAyNCAxNnoiLz48L3N2Zz4=';
+	        };
+
+	        thumbItem.appendChild(thumbImg);
+
+	        thumbItem.addEventListener('click', e => {
+	          e.stopPropagation();
+	          const index = parseInt(thumbItem.dataset.index);
+	          if (index !== this.currentIndex) {
+	            this.currentIndex = index;
+	            this.loadCurrentImage();
+	            this.updateThumbnails();
+	          }
+	        });
+
+	        thumbContainer.appendChild(thumbItem);
+	      });
+
+	      this.container.appendChild(thumbContainer);
+	    }
+
+	    // 更新图片变换 - 修复居中问题
+	    updateImageTransform() {
+	      // 使用绝对定位和transform来确保居中
+	      const transform = `
+        translate(${this.translateX}px, ${this.translateY}px)
+        scale(${this.scale})
+        rotate(${this.rotation}deg)
+      `;
+
+	      this.image.style.transform = transform;
+	    }
+
+	    // 调整图片大小以适应屏幕 - 修复居中问题
+	    fitImageToScreen(imageWidth, imageHeight) {
+	      this.scale = 1;
+	      this.translateX = 0;
+	      this.translateY = 0;
+
+	      const containerWidth = this.imageContainer.clientWidth;
+	      const containerHeight = this.imageContainer.clientHeight;
+
+	      const angle = this.rotation % 360;
+	      let effectiveWidth = imageWidth;
+	      let effectiveHeight = imageHeight;
+
+	      if (angle === 90 || angle === 270) {
+	        effectiveWidth = imageHeight;
+	        effectiveHeight = imageWidth;
+	      }
+
+	      if (effectiveWidth > containerWidth || effectiveHeight > containerHeight) {
+	        const widthRatio = containerWidth / effectiveWidth;
+	        const heightRatio = containerHeight / effectiveHeight;
+	        this.scale = Math.min(widthRatio, heightRatio);
+	      }
+
+	      this.scale = Math.max(0.1, this.scale);
+
+	      this.updateImageTransform();
+	      this.updateZoomIndicator();
+	    }
+
+	    parseImageOptions(options) {
+	      this.images = [];
+
+	      if (typeof options === 'string') {
+	        this.images = [options];
+	      } else if (Array.isArray(options)) {
+	        this.images = options.filter(url => typeof url === 'string' && url.trim() !== '');
+	      } else if (typeof options === 'object') {
+	        if (options.images && Array.isArray(options.images)) {
+	          this.images = options.images.filter(url => typeof url === 'string' && url.trim() !== '');
+	        }
+	      }
+	    }
+
+	    preloadImages() {
+	      this.images.forEach((url, index) => {
+	        if (!this.loadedImages.has(url)) {
+	          const img = new Image();
+	          img.crossOrigin = 'anonymous';
+	          img.src = url;
+	          img.onload = () => {
+	            this.loadedImages.set(url, img);
+	            this.imageMetadata[index] = {
+	              name: this.extractFileName(url),
+	              width: img.width,
+	              height: img.height,
+	            };
+	          };
+	          img.onerror = () => {
+	            console.error(`图片预加载失败: ${url}`);
+	          };
+	        }
+	      });
+	    }
+
+	    extractFileName(url) {
+	      try {
+	        const urlObj = new URL(url);
+	        const pathParts = urlObj.pathname.split('/');
+	        let fileName = pathParts[pathParts.length - 1];
+
+	        const queryIndex = fileName.indexOf('?');
+	        if (queryIndex > -1) {
+	          fileName = fileName.substring(0, queryIndex);
+	        }
+
+	        return fileName || 'unknown-image';
+	      } catch (e) {
+	        return 'unknown-image';
+	      }
+	    }
+
+	    loadCurrentImage() {
+	      const currentUrl = this.images[this.currentIndex];
+	      const isLoaded = this.loadedImages.has(currentUrl);
+
+	      // 重置双击状态
+	      this.hasPreviousState = false;
+	      this.isToggledState = false;
+
+	      // 更新计数器
+	      if (this.images.length > 1 && this.counter) {
+	        this.counter.textContent = `${this.currentIndex + 1} / ${this.images.length}`;
+	      }
+
+	      // 更新导航按钮状态
+	      this.updateNavButtons();
+	      // 更新缩略图状态
+	      this.updateThumbnails();
+
+	      // 重置变换状态
+	      this.scale = 1.0;
+	      this.rotation = 0;
+	      this.translateX = 0;
+	      this.translateY = 0;
+
+	      // 如果图片已加载，直接显示
+	      if (isLoaded) {
+	        // this.showLoading();
+
+	        const cachedImg = this.loadedImages.get(currentUrl);
+	        const tempImg = new Image();
+	        tempImg.crossOrigin = 'anonymous';
+	        tempImg.src = cachedImg.src;
+
+	        tempImg.onload = () => {
+	          this.image.src = tempImg.src;
+	          this.image.classList.add('loaded');
+
+	          const metadata = this.imageMetadata[this.currentIndex];
+	          if (metadata) {
+	            this.fitImageToScreen(metadata.width, metadata.height);
+	            this.updateImageInfo();
+	          }
+
+	          setTimeout(() => {
+	            this.hideLoading();
+	          }, 300);
+	        };
+
+	        return;
+	      }
+
+	      // 新图片加载流程
+	      this.showLoading();
+	      this.image.classList.remove('loaded');
+
+	      const tempImg = new Image();
+	      tempImg.crossOrigin = 'anonymous';
+	      tempImg.src = currentUrl;
+
+	      tempImg.onload = () => {
+	        this.loadedImages.set(currentUrl, tempImg);
+	        this.imageMetadata[this.currentIndex] = {
+	          name: this.extractFileName(currentUrl),
+	          width: tempImg.width,
+	          height: tempImg.height,
+	        };
+
+	        this.image.src = tempImg.src;
+	        this.image.classList.add('loaded');
+	        this.fitImageToScreen(tempImg.width, tempImg.height);
+	        this.updateImageInfo();
+
+	        setTimeout(() => {
+	          this.hideLoading();
+	        }, 300);
+	      };
+
+	      tempImg.onerror = () => {
+	        this.hideLoading();
+	        alert('图片加载失败');
+	      };
+	    }
+
+	    updateZoomIndicator() {
+	      const percentage = Math.round(this.scale * 100);
+	      this.zoomIndicator.textContent = `${percentage}%`;
+	    }
+
+	    updateImageInfo() {
+	      if (!this.options.buttons.info || !this.imageInfoPanel) return;
+
+	      const metadata = this.imageMetadata[this.currentIndex];
+	      if (!metadata) return;
+
+	      let infoHtml = '';
+
+	      if (this.options.imageInfo.showName) {
+	        infoHtml += `<p><span class="info-label">名称:</span> ${metadata.name}</p>`;
+	      }
+
+	      if (this.options.imageInfo.showDimensions) {
+	        infoHtml += `<p><span class="info-label">尺寸:</span> ${metadata.width} × ${metadata.height} px</p>`;
+	      }
+
+	      infoHtml += `
+        <div class="image-viewer-shortcuts-title">快捷键</div>
+        <p><span class="info-label">放大:</span> + / =</p>
+        <p><span class="info-label">缩小:</span> -</p>
+        <p><span class="info-label">上一张:</span> ←</p>
+        <p><span class="info-label">下一张:</span> →</p>
+        <p><span class="info-label">重置:</span> 0</p>
+        <p><span class="info-label">全屏:</span> F</p>
+        <p><span class="info-label">信息:</span> I</p>
+        <p><span class="info-label">关闭:</span> ESC</p>
+      `;
+
+	      this.imageInfoPanel.innerHTML = infoHtml;
+	    }
+
+	    toggleImageInfo() {
+	      if (!this.options.buttons.info || !this.imageInfoPanel) return;
+
+	      this.imageInfoVisible = !this.imageInfoVisible;
+	      if (this.imageInfoVisible) {
+	        this.imageInfoPanel.classList.add('visible');
+	      } else {
+	        this.imageInfoPanel.classList.remove('visible');
+	      }
+	    }
+
+	    updateNavButtons() {
+	      if (this.images.length <= 1) return;
+
+	      const canGoPrev = this.options.loop ? true : this.currentIndex > 0;
+	      const canGoNext = this.options.loop ? true : this.currentIndex < this.images.length - 1;
+
+	      if (this.prevBtn) this.prevBtn.disabled = !canGoPrev;
+	      if (this.nextBtn) this.nextBtn.disabled = !canGoNext;
+	      if (this.toolbarPrevBtn) this.toolbarPrevBtn.disabled = !canGoPrev;
+	      if (this.toolbarNextBtn) this.toolbarNextBtn.disabled = !canGoNext;
+	    }
+
+	    updateThumbnails() {
+	      if (this.images.length <= 1) return;
+
+	      document.querySelectorAll('.image-viewer-thumbnail-item').forEach(item => {
+	        item.classList.remove('active');
+	      });
+
+	      const activeItem = document.querySelector(`.image-viewer-thumbnail-item[data-index="${this.currentIndex}"]`);
+	      if (activeItem) {
+	        activeItem.classList.add('active');
+	        activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+	      }
+	    }
+
+	    showLoading() {
+	      if (this.loading) {
+	        this.loading.classList.add('active');
+	      }
+	    }
+
+	    hideLoading() {
+	      if (this.loading) {
+	        this.loading.classList.remove('active');
+	      }
+	    }
+
+	    prevImage() {
+	      if (this.images.length <= 1) return;
+
+	      let newIndex = this.currentIndex - 1;
+	      if (newIndex < 0) {
+	        newIndex = this.options.loop ? this.images.length - 1 : 0;
+	      }
+
+	      if (newIndex !== this.currentIndex) {
+	        this.currentIndex = newIndex;
+	        this.loadCurrentImage();
+	      }
+	    }
+
+	    nextImage() {
+	      if (this.images.length <= 1) return;
+
+	      let newIndex = this.currentIndex + 1;
+	      if (newIndex >= this.images.length) {
+	        newIndex = this.options.loop ? 0 : this.images.length - 1;
+	      }
+
+	      if (newIndex !== this.currentIndex) {
+	        this.currentIndex = newIndex;
+	        this.loadCurrentImage();
+	      }
+	    }
+
+	    bindEvents() {
+	      // 关闭按钮事件
+	      if (this.topCloseBtn) {
+	        this.addEvent(this.topCloseBtn, 'click', () => this.close());
+	      }
+
+	      // 点击遮罩关闭
+	      if (this.options.closeOnMaskClick) {
+	        this.addEvent(this.imageContainer, 'click', e => {
+	          if (e.target == this.imageContainer) this.close();
+	        });
+	      }
+
+	      // 键盘事件
+	      this.addEvent(document, 'keydown', e => this.handleKeydown(e));
+
+	      // 窗口大小改变事件
+	      const throttledResize = throttle(() => {
+	        this.handleResize();
+	      }, 300);
+	      this.addEvent(window, 'resize', throttledResize);
+
+	      // 鼠标/触摸事件 - 直接绑定到图片
+	      this.bindDragEvents();
+	      this.bindTouchEvents();
+	    }
+
+	    addEvent(element, event, handler, options) {
+	      element.addEventListener(event, handler, options);
+	      const key = `${event}-${Date.now()}-${Math.random()}`;
+	      this.eventListeners.set(key, { element, event, handler });
+	    }
+
+	    removeAllEvents() {
+	      this.eventListeners.forEach(({ element, event, handler }) => {
+	        element.removeEventListener(event, handler);
+	      });
+	      this.eventListeners.clear();
+	    }
+
+	    rotatePoint(x, y, angleDegrees) {
+	      const angle = (angleDegrees * Math.PI) / 180;
+	      const cos = Math.cos(angle);
+	      const sin = Math.sin(angle);
+	      return {
+	        x: x * cos - y * sin,
+	        y: x * sin + y * cos,
+	      };
+	    }
+
+	    bindDragEvents() {
+	      // 鼠标按下 - 直接绑定到图片
+	      this.addEvent(this.image, 'mousedown', e => {
+	        if (e.button !== 0) return;
+
+	        this.isDragging = true;
+	        this.image.classList.add('dragging');
+	        this.startX = e.clientX;
+	        this.startY = e.clientY;
+	        this.startTranslateX = this.translateX;
+	        this.startTranslateY = this.translateY;
+	        e.preventDefault();
+	      });
+
+	      // 鼠标移动
+	      this.addEvent(document, 'mousemove', e => {
+	        if (!this.isDragging) return;
+
+	        const deltaX = e.clientX - this.startX;
+	        const deltaY = e.clientY - this.startY;
+
+	        const rotatedDelta = this.rotatePoint(deltaX, deltaY, -this.rotation);
+
+	        this.translateX = this.startTranslateX + rotatedDelta.x;
+	        this.translateY = this.startTranslateY + rotatedDelta.y;
+
+	        this.updateImageTransform();
+	        e.preventDefault();
+	      });
+
+	      // 鼠标释放
+	      this.addEvent(document, 'mouseup', () => {
+	        if (this.isDragging) {
+	          this.isDragging = false;
+	          this.image.classList.remove('dragging');
+	        }
+	      });
+
+	      // 鼠标离开窗口
+	      this.addEvent(document, 'mouseleave', () => {
+	        if (this.isDragging) {
+	          this.isDragging = false;
+	          this.image.classList.remove('dragging');
+	        }
+	      });
+
+	      // 鼠标滚轮缩放
+	      this.addEvent(this.imageContainer, 'wheel', e => {
+	        e.preventDefault();
+
+	        const rect = this.imageContainer.getBoundingClientRect();
+	        const mouseX = e.clientX - rect.left;
+	        const mouseY = e.clientY - rect.top;
+
+	        const delta = e.deltaY > 0 ? -0.05 : 0.05;
+	        this.zoomAtPoint(delta, mouseX, mouseY);
+	      });
+
+	      // 双击缩放
+	      this.addEvent(this.image, 'dblclick', e => {
+	        e.preventDefault();
+
+	        const rect = this.imageContainer.getBoundingClientRect();
+	        const mouseX = e.clientX - rect.left;
+	        const mouseY = e.clientY - rect.top;
+
+	        if (Math.abs(this.scale - 1.0) < 0.01) {
+	          if (this.hasPreviousState) {
+	            this.scale = this.lastScale;
+	            this.translateX = this.lastTranslateX;
+	            this.translateY = this.lastTranslateY;
+	            this.hasPreviousState = false;
+	          } else {
+	            this.lastScale = this.scale;
+	            this.lastTranslateX = this.translateX;
+	            this.lastTranslateY = this.translateY;
+	            this.hasPreviousState = true;
+
+	            const targetScale = 1.5;
+	            const oldScale = this.scale;
+	            const scaleDiff = targetScale / oldScale;
+	            const containerWidth = this.imageContainer.clientWidth;
+	            const containerHeight = this.imageContainer.clientHeight;
+
+	            this.translateX =
+	              this.translateX * scaleDiff + mouseX - containerWidth / 2 - scaleDiff * (mouseX - containerWidth / 2);
+	            this.translateY =
+	              this.translateY * scaleDiff + mouseY - containerHeight / 2 - scaleDiff * (mouseY - containerHeight / 2);
+
+	            this.scale = targetScale;
+	          }
+	        } else {
+	          this.lastScale = this.scale;
+	          this.lastTranslateX = this.translateX;
+	          this.lastTranslateY = this.translateY;
+	          this.hasPreviousState = true;
+
+	          const targetScale = 1.0;
+	          const oldScale = this.scale;
+	          const scaleDiff = targetScale / oldScale;
+	          const containerWidth = this.imageContainer.clientWidth;
+	          const containerHeight = this.imageContainer.clientHeight;
+
+	          this.translateX =
+	            this.translateX * scaleDiff + mouseX - containerWidth / 2 - scaleDiff * (mouseX - containerWidth / 2);
+	          this.translateY =
+	            this.translateY * scaleDiff + mouseY - containerHeight / 2 - scaleDiff * (mouseY - containerHeight / 2);
+
+	          this.scale = targetScale;
+	        }
+
+	        this.updateImageTransform();
+	        this.updateZoomIndicator();
+	      });
+	    }
+
+	    bindTouchEvents() {
+	      // 触摸开始
+	      this.addEvent(this.image, 'touchstart', e => {
+	        this.touchState.lastTouchTime = Date.now();
+
+	        if (e.touches.length === 1) {
+	          if (!this.touchState.isPinching) {
+	            this.touchState.isDragging = true;
+	            this.touchState.startX = e.touches[0].clientX;
+	            this.touchState.startY = e.touches[0].clientY;
+	            this.touchState.startTranslateX = this.translateX;
+	            this.touchState.startTranslateY = this.translateY;
+	            this.image.classList.add('dragging');
+	          }
+	        } else if (e.touches.length === 2) {
+	          this.touchState.isPinching = true;
+	          this.touchState.isDragging = false;
+	          this.image.classList.remove('dragging');
+
+	          const touch1 = e.touches[0];
+	          const touch2 = e.touches[1];
+
+	          this.touchState.initialDistance = this.getDistance(touch1, touch2);
+	          this.touchState.initialScale = this.scale;
+	          this.touchState.initialTranslateX = this.translateX;
+	          this.touchState.initialTranslateY = this.translateY;
+
+	          this.touchState.centerX = (touch1.clientX + touch2.clientX) / 2;
+	          this.touchState.centerY = (touch1.clientY + touch2.clientY) / 2;
+
+	          const rect = this.imageContainer.getBoundingClientRect();
+	          const containerX = this.touchState.centerX - rect.left;
+	          const containerY = this.touchState.centerY - rect.top;
+
+	          this.calculateRelativeCenter(containerX, containerY);
+
+	          this.touchState.movementCount = 0;
+	          this.touchState.scaleRatio = 1;
+	        }
+
+	        e.preventDefault();
+	      });
+
+	      // 触摸移动
+	      this.addEvent(this.image, 'touchmove', e => {
+	        if (Date.now() - this.touchState.lastTouchTime < 16) {
+	          return;
+	        }
+	        this.touchState.lastTouchTime = Date.now();
+
+	        if (e.touches.length === 1 && this.touchState.isDragging && !this.touchState.isPinching) {
+	          const deltaX = e.touches[0].clientX - this.touchState.startX;
+	          const deltaY = e.touches[0].clientY - this.touchState.startY;
+
+	          const rotatedDelta = this.rotatePoint(deltaX, deltaY, -this.rotation);
+
+	          this.touchState.movementCount++;
+
+	          if (
+	            this.touchState.movementCount > this.touchState.stabilizationThreshold ||
+	            Math.abs(deltaX) > 5 ||
+	            Math.abs(deltaY) > 5
+	          ) {
+	            this.translateX = this.touchState.startTranslateX + rotatedDelta.x;
+	            this.translateY = this.touchState.startTranslateY + rotatedDelta.y;
+	            this.updateImageTransform();
+	          }
+	        } else if (e.touches.length === 2 && this.touchState.isPinching) {
+	          const touch1 = e.touches[0];
+	          const touch2 = e.touches[1];
+
+	          const currentDistance = this.getDistance(touch1, touch2);
+	          this.touchState.scaleRatio = currentDistance / this.touchState.initialDistance;
+	          const newScale = this.touchState.initialScale * this.touchState.scaleRatio;
+
+	          const minScale = 0.1;
+	          const maxScale = 5;
+	          const clampedScale = Math.max(minScale, Math.min(maxScale, newScale));
+
+	          if (Math.abs(clampedScale - this.scale) > this.touchState.minScaleChange) {
+	            const scaleDiff = clampedScale / this.touchState.initialScale;
+
+	            const rect = this.imageContainer.getBoundingClientRect();
+	            const containerWidth = rect.width;
+	            const containerHeight = rect.height;
+
+	            this.translateX =
+	              this.touchState.initialTranslateX * scaleDiff +
+	              this.touchState.centerX -
+	              containerWidth / 2 -
+	              scaleDiff * (this.touchState.centerX - containerWidth / 2);
+
+	            this.translateY =
+	              this.touchState.initialTranslateY * scaleDiff +
+	              this.touchState.centerY -
+	              containerHeight / 2 -
+	              scaleDiff * (this.touchState.centerY - containerHeight / 2);
+
+	            this.scale = clampedScale;
+	            this.updateImageTransform();
+	            this.updateZoomIndicator();
+	          }
+	        }
+
+	        e.preventDefault();
+	      });
+
+	      // 触摸结束/取消
+	      this.addEvent(this.image, 'touchend', e => {
+	        if (e.touches.length === 0) {
+	          this.touchState.isDragging = false;
+	          this.touchState.isPinching = false;
+	          this.image.classList.remove('dragging');
+	        } else if (e.touches.length === 1 && this.touchState.isPinching) {
+	          this.touchState.isPinching = false;
+	          this.touchState.isDragging = true;
+	          this.touchState.startX = e.touches[0].clientX;
+	          this.touchState.startY = e.touches[0].clientY;
+	          this.touchState.startTranslateX = this.translateX;
+	          this.touchState.startTranslateY = this.translateY;
+	          this.image.classList.add('dragging');
+	        }
+
+	        e.preventDefault();
+	      });
+
+	      this.addEvent(this.image, 'touchcancel', () => {
+	        this.touchState.isDragging = false;
+	        this.touchState.isPinching = false;
+	        this.image.classList.remove('dragging');
+	      });
+	    }
+
+	    getDistance(touch1, touch2) {
+	      const dx = touch1.clientX - touch2.clientX;
+	      const dy = touch1.clientY - touch2.clientY;
+	      return Math.sqrt(dx * dx + dy * dy);
+	    }
+
+	    calculateRelativeCenter(x, y) {
+	      const metadata = this.imageMetadata[this.currentIndex];
+	      if (!metadata) return;
+
+	      const containerWidth = this.imageContainer.clientWidth;
+	      const containerHeight = this.imageContainer.clientHeight;
+	      const containerCenterX = containerWidth / 2;
+	      const containerCenterY = containerHeight / 2;
+
+	      const offsetX = x - containerCenterX - this.translateX;
+	      const offsetY = y - containerCenterY - this.translateY;
+
+	      this.touchState.relativeCenterX = offsetX / this.scale;
+	      this.touchState.relativeCenterY = offsetY / this.scale;
+	    }
+
+	    zoomAtPoint(delta, x, y) {
+	      const oldScale = this.scale;
+	      const maxScale = 5;
+	      const newScale = Math.max(0.1, Math.min(maxScale, this.scale + delta));
+
+	      if (newScale === this.scale) return;
+
+	      const scaleDiff = newScale / oldScale;
+	      const containerWidth = this.imageContainer.clientWidth;
+	      const containerHeight = this.imageContainer.clientHeight;
+
+	      this.translateX = this.translateX * scaleDiff + x - containerWidth / 2 - scaleDiff * (x - containerWidth / 2);
+	      this.translateY = this.translateY * scaleDiff + y - containerHeight / 2 - scaleDiff * (y - containerHeight / 2);
+
+	      this.scale = newScale;
+	      this.updateImageTransform();
+	      this.updateZoomIndicator();
+	    }
+
+	    zoom(delta) {
+	      const containerWidth = this.imageContainer.clientWidth;
+	      const containerHeight = this.imageContainer.clientHeight;
+	      this.zoomAtPoint(delta, containerWidth / 2, containerHeight / 2);
+	    }
+
+	    rotate(degrees) {
+	      const oldRotation = this.rotation;
+	      const newRotation = oldRotation + degrees;
+
+	      if (oldRotation === newRotation) return;
+
+	      const containerRect = this.imageContainer.getBoundingClientRect();
+	      const viewportCenterX = containerRect.width / 2;
+	      const viewportCenterY = containerRect.height / 2;
+
+	      const currentCenterX = viewportCenterX + this.translateX;
+	      const currentCenterY = viewportCenterY + this.translateY;
+
+	      this.rotation = newRotation;
+
+	      this.translateX = 0;
+	      this.translateY = 0;
+
+	      const metadata = this.imageMetadata[this.currentIndex];
+	      if (metadata) {
+	        const newBoundingBox = this.calculateBoundingBox(metadata.width, metadata.height, newRotation);
+	        const scaledWidth = newBoundingBox.width * this.scale;
+	        const scaledHeight = newBoundingBox.height * this.scale;
+
+	        this.translateX = (currentCenterX - viewportCenterX) * (scaledWidth / (scaledWidth - this.translateX));
+	        this.translateY = (currentCenterY - viewportCenterY) * (scaledHeight / (scaledHeight - this.translateY));
+	      }
+
+	      this.updateImageTransform();
+	      this.updateZoomIndicator();
+	    }
+
+	    calculateBoundingBox(width, height, rotation) {
+	      const rad = (rotation * Math.PI) / 180;
+	      const absCos = Math.abs(Math.cos(rad));
+	      const absSin = Math.abs(Math.sin(rad));
+
+	      return {
+	        width: width * absCos + height * absSin,
+	        height: width * absSin + height * absCos,
+	      };
+	    }
+
+	    resetTransform() {
+	      this.rotation = 0;
+	      const metadata = this.imageMetadata[this.currentIndex];
+	      if (metadata) {
+	        this.fitImageToScreen(metadata.width, metadata.height);
+	      }
+	    }
+
+	    showOriginalSize() {
+	      this.rotation = 0;
+	      this.scale = 1;
+	      this.translateX = 0;
+	      this.translateY = 0;
+	      this.updateImageTransform();
+	      this.updateZoomIndicator();
+	    }
+
+	    downloadImage() {
+	      const currentUrl = this.images[this.currentIndex];
+	      const metadata = this.imageMetadata[this.currentIndex];
+
+	      const img = new Image();
+	      img.crossOrigin = 'anonymous';
+	      img.onload = () => {
+	        try {
+	          const canvas = document.createElement('canvas');
+	          canvas.width = img.width;
+	          canvas.height = img.height;
+
+	          const ctx = canvas.getContext('2d');
+	          ctx.drawImage(img, 0, 0);
+
+	          const dataURL = canvas.toDataURL('image/jpeg');
+
+	          const a = document.createElement('a');
+	          a.href = dataURL;
+	          a.download = metadata ? metadata.name : 'image.jpg';
+	          document.body.appendChild(a);
+	          a.click();
+	          document.body.removeChild(a);
+	        } catch (error) {
+	          console.error('图片下载失败:', error);
+	          this.downloadOriginalImage(currentUrl, metadata);
+	        }
+	      };
+
+	      img.onerror = () => {
+	        this.downloadOriginalImage(currentUrl, metadata);
+	      };
+
+	      img.src = currentUrl;
+	    }
+
+	    downloadOriginalImage(url, metadata) {
+	      try {
+	        const a = document.createElement('a');
+	        a.href = url;
+	        a.download = metadata ? metadata.name : 'image.jpg';
+	        document.body.appendChild(a);
+	        a.click();
+	        document.body.removeChild(a);
+	      } catch (error) {
+	        console.error('原图下载失败:', error);
+	        alert('图片下载失败，可能是跨域限制导致的');
+	      }
+	    }
+
+	    toggleFullscreen() {
+	      if (!document.fullscreenElement) {
+	        this.container.requestFullscreen().catch(err => {
+	          console.error(`全屏请求失败: ${err.message}`);
+	        });
+	        this.isFullscreen = true;
+	      } else {
+	        if (document.exitFullscreen) {
+	          document.exitFullscreen();
+	          this.isFullscreen = false;
+	        }
+	      }
+	    }
+
+	    handleKeydown(e) {
+	      if (this.container.style.display !== 'block') return;
+
+	      switch (e.key) {
+	        case 'Escape':
+	          this.close();
+	          e.preventDefault();
+	          break;
+	        case 'ArrowLeft':
+	          this.prevImage();
+	          e.preventDefault();
+	          break;
+	        case 'ArrowRight':
+	          this.nextImage();
+	          e.preventDefault();
+	          break;
+	        case '+':
+	        case '=':
+	          this.zoom(0.1);
+	          e.preventDefault();
+	          break;
+	        case '-':
+	          this.zoom(-0.1);
+	          e.preventDefault();
+	          break;
+	        case '0':
+	          this.resetTransform();
+	          e.preventDefault();
+	          break;
+	        case 'f':
+	        case 'F':
+	          this.toggleFullscreen();
+	          e.preventDefault();
+	          break;
+	        case 'i':
+	        case 'I':
+	          this.toggleImageInfo();
+	          e.preventDefault();
+	          break;
+	      }
+	    }
+
+	    handleResize() {
+	      const metadata = this.imageMetadata[this.currentIndex];
+	      if (!metadata) return;
+
+	      const containerWidth = this.imageContainer.clientWidth;
+	      const containerHeight = this.imageContainer.clientHeight;
+
+	      // 计算旋转后的有效尺寸
+	      const angle = this.rotation % 360;
+	      let effectiveWidth = metadata.width;
+	      let effectiveHeight = metadata.height;
+
+	      if (angle === 90 || angle === 270) {
+	        effectiveWidth = metadata.height;
+	        effectiveHeight = metadata.width;
+	      }
+
+	      // 计算适合容器的缩放比例
+	      const fitScale = Math.min(containerWidth / effectiveWidth, containerHeight / effectiveHeight);
+
+	      // 当前缩放后的图片尺寸
+	      const currentScaledWidth = effectiveWidth * this.scale;
+	      const currentScaledHeight = effectiveHeight * this.scale;
+
+	      // 判断是否超出容器
+	      const isOverflowing = currentScaledWidth > containerWidth || currentScaledHeight > containerHeight;
+
+	      let targetScale = this.scale;
+
+	      if (isOverflowing) {
+	        // 图片超出容器，缩小到适合比例
+	        targetScale = Math.max(0.1, fitScale);
+	      } else if (fitScale >= 1.0) {
+	        // 图片小于100%且有足够空间，放大到100%
+	        targetScale = 1.0;
+	      } else {
+	        targetScale = fitScale;
+	      }
+
+	      // 只有当变化显著时才更新（避免微小调整）
+	      if (Math.abs(targetScale - this.scale) > 0.01) {
+	        this.scale = targetScale;
+	        this.translateX = 0;
+	        this.translateY = 0;
+	        this.updateImageTransform();
+	        this.updateZoomIndicator();
+	      }
+	    }
+
+	    show() {
+	      this.container.style.display = 'block';
+	      setTimeout(() => {
+	        this.container.style.opacity = '1';
+	      }, 10);
+	    }
+
+	    close() {
+	      this.removeAllEvents();
+
+	      this.container.style.opacity = '0';
+	      setTimeout(() => {
+	        this.container.style.display = 'none';
+	        const styles = document.getElementById('image-viewer-styles');
+	        if (styles) styles.remove();
+	        if (this.container) this.container.remove();
+	      }, 300);
+	    }
+	  }
+
+	  // 返回ImageViewer类
+	  return ImageViewer;
+	}); 
+} (imageViewer));
+
+var imageViewerExports = imageViewer.exports;
+var index = /*@__PURE__*/getDefaultExportFromCjs(imageViewerExports);
+
+export { index as default };