vue2-client 1.18.45 → 1.18.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.18.45",
+  "version": "1.18.46",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/ImagePreviewModal/ImagePreviewModal.vue

@@ -17,52 +17,22 @@
     <div class="preview-toolbar top-toolbar">
       <div class="toolbar-content">
         <a-tooltip title="放大">
-          <a-button
-            type="primary"
-            icon="zoom-in"
-            @click="zoomIn"
-            size="small"
-            class="toolbar-btn"
-          />
+          <a-button type="primary" icon="zoom-in" @click="zoomIn" size="small" class="toolbar-btn" />
         </a-tooltip>
         <a-tooltip title="缩小">
-          <a-button
-            type="primary"
-            icon="zoom-out"
-            @click="zoomOut"
-            size="small"
-            class="toolbar-btn"
-          />
+          <a-button type="primary" icon="zoom-out" @click="zoomOut" size="small" class="toolbar-btn" />
         </a-tooltip>
         <a-tooltip title="重置">
-          <a-button
-            type="primary"
-            icon="reload"
-            @click="resetImageTransform"
-            size="small"
-            class="toolbar-btn"
-          />
+          <a-button type="primary" icon="reload" @click="resetImageTransform" size="small" class="toolbar-btn" />
         </a-tooltip>
         <div class="zoom-display">
           <span class="zoom-percentage">{{ Math.round(scale * 100) }}%</span>
         </div>
         <a-tooltip title="向左旋转">
-          <a-button
-            type="primary"
-            icon="undo"
-            @click="rotateLeft"
-            size="small"
-            class="toolbar-btn"
-          />
+          <a-button type="primary" icon="undo" @click="rotateLeft" size="small" class="toolbar-btn" />
         </a-tooltip>
         <a-tooltip title="向右旋转">
-          <a-button
-            type="primary"
-            icon="redo"
-            @click="rotateRight"
-            size="small"
-            class="toolbar-btn"
-          />
+          <a-button type="primary" icon="redo" @click="rotateRight" size="small" class="toolbar-btn" />
         </a-tooltip>
         <a-tooltip title="下载图片">
           <a-button
@@ -71,6 +41,7 @@
             @click="downloadImage"
             size="small"
             class="toolbar-btn"
+            :loading="downloading"
           />
         </a-tooltip>
       </div>
@@ -81,24 +52,33 @@
       class="image-preview-container"
       @wheel="handleWheel"
       @mousedown="startDrag"
-      @mousemove="onDrag"
-      @mouseup="endDrag"
-      @mouseleave="endDrag"
       ref="previewContainer"
-      :class="{ 'dragging': isDragging }"
+      :class="{ dragging: isDragging }"
       tabindex="0"
       @keydown="handleKeydown"
     >
-      <div
-        class="image-wrapper"
-        :style="wrapperStyle"
-      >
+      <!-- 加载中状态 -->
+      <div v-if="loading" class="loading-wrapper">
+        <a-spin size="large" tip="图片加载中..." />
+      </div>
+
+      <!-- 加载失败状态 -->
+      <div v-else-if="loadError" class="error-wrapper">
+        <a-icon type="picture" class="error-icon" />
+        <p>图片加载失败</p>
+        <a-button type="link" @click="retryLoad">点击重试</a-button>
+      </div>
+
+      <!-- 图片内容 -->
+      <div v-show="!loading && !loadError" class="image-wrapper" :style="wrapperStyle">
         <img
           :src="imageUrl"
           alt="预览图片"
           class="preview-image"
           :style="imageStyle"
           ref="previewImage"
+          @load="onImageLoad"
+          @error="onImageError"
         />
       </div>
     </div>
@@ -106,6 +86,16 @@
 </template>
 
 <script>
+// 缩放配置常量
+const ZOOM_CONFIG = {
+  MIN: 0.1, // 最小缩放比例 10%
+  MAX: 3, // 最大缩放比例 300%
+  STEP: 0.25 // 统一缩放步长
+}
+
+// 旋转配置常量
+const ROTATE_STEP = 90
+
 export default {
   name: 'ImagePreviewModal',
   props: {
@@ -125,7 +115,7 @@ export default {
       default: 'preview_image'
     }
   },
-  data () {
+  data() {
     return {
       scale: 1, // 缩放比例
       rotate: 0, // 旋转角度
@@ -134,22 +124,20 @@ export default {
       dragStartY: 0, // 拖动起始Y坐标
       translateX: 0, // X轴平移距离
       translateY: 0, // Y轴平移距离
-      lastTranslateX: 0, // 上一次X轴平移距离
-      lastTranslateY: 0 // 上一次Y轴平移距离
+      loading: true, // 图片加载中
+      loadError: false, // 图片加载失败
+      downloading: false // 下载中状态
     }
   },
   computed: {
-    // 图片样式
-    imageStyle () {
+    // 图片样式（仅处理缩放和旋转）
+    imageStyle() {
       return {
-        transform: `scale(${this.scale}) rotate(${this.rotate}deg)`,
-        maxWidth: '100%',
-        maxHeight: '100%',
-        objectFit: 'contain'
+        transform: `scale(${this.scale}) rotate(${this.rotate}deg)`
       }
     },
     // 图片容器样式
-    wrapperStyle () {
+    wrapperStyle() {
       return {
         transform: `translate(${this.translateX}px, ${this.translateY}px)`,
         cursor: this.isDragging ? 'grabbing' : 'grab'
@@ -157,50 +145,46 @@ export default {
     }
   },
   watch: {
-    // 监听visible变化，重置状态和焦点管理
-    visible (newVal) {
+    // 监听visible变化，重置状态
+    visible(newVal) {
       if (newVal) {
         this.resetImageTransform()
-        // 下一个tick确保DOM已更新
+        this.loading = true
+        this.loadError = false
         this.$nextTick(() => {
           this.focusContainer()
         })
-      } else {
-        this.removeKeydownListener()
       }
+    },
+    // 监听图片URL变化，重新加载
+    imageUrl() {
+      this.loading = true
+      this.loadError = false
     }
   },
-  mounted () {
+  mounted() {
     // 组件挂载时添加全局键盘事件监听
-    this.addKeydownListener()
+    document.addEventListener('keydown', this.handleGlobalKeydown)
   },
-  beforeDestroy () {
-    // 组件销毁前移除事件监听
-    this.removeKeydownListener()
+  beforeDestroy() {
+    // 组件销毁前移除所有事件监听（防止内存泄漏）
+    document.removeEventListener('keydown', this.handleGlobalKeydown)
+    document.removeEventListener('mousemove', this.onDrag)
+    document.removeEventListener('mouseup', this.endDrag)
   },
   methods: {
-    // 添加键盘事件监听
-    addKeydownListener () {
-      document.addEventListener('keydown', this.handleGlobalKeydown)
-    },
-
-    // 移除键盘事件监听
-    removeKeydownListener () {
-      document.removeEventListener('keydown', this.handleGlobalKeydown)
-    },
-
-    // 处理全局键盘事件（ESC键）
-    handleGlobalKeydown (event) {
-      if (event.keyCode === 27 && this.visible) { // ESC键
+    // 处理全局键盘事件（使用 event.key 替代废弃的 keyCode）
+    handleGlobalKeydown(event) {
+      if (event.key === 'Escape' && this.visible) {
         event.preventDefault()
         event.stopPropagation()
         this.handleClose()
       }
     },
 
-    // 处理容器内键盘事件（备用）
-    handleKeydown (event) {
-      if (event.keyCode === 27) { // ESC键
+    // 处理容器内键盘事件
+    handleKeydown(event) {
+      if (event.key === 'Escape') {
         event.preventDefault()
         event.stopPropagation()
         this.handleClose()
@@ -208,104 +192,170 @@ export default {
     },
 
     // 聚焦到预览容器
-    focusContainer () {
+    focusContainer() {
       if (this.$refs.previewContainer) {
         this.$refs.previewContainer.focus()
       }
     },
 
-    // 放大
-    zoomIn () {
-      this.scale = Math.min(this.scale + 0.25, 3) // 最大放大到300%
+    // 图片加载完成
+    onImageLoad() {
+      this.loading = false
+      this.loadError = false
+    },
+
+    // 图片加载失败
+    onImageError() {
+      this.loading = false
+      this.loadError = true
+    },
+
+    // 重试加载图片
+    retryLoad() {
+      this.loading = true
+      this.loadError = false
+      // 通过添加时间戳强制重新加载
+      const img = this.$refs.previewImage
+      if (img) {
+        const separator = this.imageUrl.includes('?') ? '&' : '?'
+        img.src = `${this.imageUrl}${separator}_t=${Date.now()}`
+      }
+    },
+
+    // 放大（同时回归居中）
+    zoomIn() {
+      this.scale = Math.min(this.scale + ZOOM_CONFIG.STEP, ZOOM_CONFIG.MAX)
+      this.centerImage()
+    },
+
+    // 缩小（同时回归居中）
+    zoomOut() {
+      this.scale = Math.max(this.scale - ZOOM_CONFIG.STEP, ZOOM_CONFIG.MIN)
+      this.centerImage()
     },
 
-    // 缩小
-    zoomOut () {
-      this.scale = Math.max(this.scale - 0.25, 0.1) // 最小缩小到10%
+    // 图片回归居中
+    centerImage() {
+      this.translateX = 0
+      this.translateY = 0
     },
 
-    // 向左旋转
-    rotateLeft () {
-      this.rotate -= 90
+    // 向左旋转（同时回归居中）
+    rotateLeft() {
+      this.rotate -= ROTATE_STEP
+      this.centerImage()
     },
 
-    // 向右旋转
-    rotateRight () {
-      this.rotate += 90
+    // 向右旋转（同时回归居中）
+    rotateRight() {
+      this.rotate += ROTATE_STEP
+      this.centerImage()
     },
 
     // 重置图片变换
-    resetImageTransform () {
+    resetImageTransform() {
       this.scale = 1
       this.rotate = 0
       this.translateX = 0
       this.translateY = 0
-      this.lastTranslateX = 0
-      this.lastTranslateY = 0
     },
 
-    // 鼠标滚轮缩放
-    handleWheel (event) {
+    // 鼠标滚轮缩放（放大以鼠标为中心，缩小居中）
+    handleWheel(event) {
       event.preventDefault()
-      const delta = event.deltaY > 0 ? -0.1 : 0.1
-      const newScale = Math.min(Math.max(0.1, this.scale + delta), 3)
-
-      // 计算缩放中心点
-      const rect = this.$refs.previewContainer.getBoundingClientRect()
-      const mouseX = event.clientX - rect.left
-      const mouseY = event.clientY - rect.top
-
-      // 计算缩放前后的位置偏移，实现以鼠标位置为中心的缩放
-      const scaleRatio = newScale / this.scale
-      this.translateX = mouseX - (mouseX - this.translateX) * scaleRatio
-      this.translateY = mouseY - (mouseY - this.translateY) * scaleRatio
+      const delta = event.deltaY > 0 ? -ZOOM_CONFIG.STEP : ZOOM_CONFIG.STEP
+      const newScale = Math.min(Math.max(ZOOM_CONFIG.MIN, this.scale + delta), ZOOM_CONFIG.MAX)
+
+      // 判断是放大还是缩小
+      const isZoomIn = newScale > this.scale
+
+      if (isZoomIn) {
+        // 放大时：始终以鼠标位置为中心缩放
+        const rect = this.$refs.previewContainer.getBoundingClientRect()
+        const mouseX = event.clientX - rect.left
+        const mouseY = event.clientY - rect.top
+        const scaleRatio = newScale / this.scale
+        this.translateX = mouseX - (mouseX - this.translateX) * scaleRatio
+        this.translateY = mouseY - (mouseY - this.translateY) * scaleRatio
+      } else {
+        // 缩小时：回归居中
+        this.centerImage()
+      }
 
       this.scale = newScale
     },
 
-    // 开始拖动
-    startDrag (event) {
-      if (event.button !== 0) return // 只响应左键拖动
+    // 开始拖动（鼠标按下）
+    startDrag(event) {
+      // 只响应左键拖动
+      if (event.button !== 0) return
+      // 防止选中文字等默认行为
+      event.preventDefault()
       this.isDragging = true
       this.dragStartX = event.clientX - this.translateX
       this.dragStartY = event.clientY - this.translateY
+      // 添加全局鼠标事件监听，确保在容器外松开也能停止拖动
+      document.addEventListener('mousemove', this.onDrag)
+      document.addEventListener('mouseup', this.endDrag)
     },
 
     // 拖动中
-    onDrag (event) {
+    onDrag(event) {
       if (!this.isDragging) return
       this.translateX = event.clientX - this.dragStartX
       this.translateY = event.clientY - this.dragStartY
     },
 
-    // 结束拖动
-    endDrag () {
+    // 结束拖动（鼠标松开）
+    endDrag() {
+      if (!this.isDragging) return
       this.isDragging = false
-      this.lastTranslateX = this.translateX
-      this.lastTranslateY = this.translateY
+      // 移除全局鼠标事件监听
+      document.removeEventListener('mousemove', this.onDrag)
+      document.removeEventListener('mouseup', this.endDrag)
     },
 
-    // 下载图片
-    downloadImage () {
-      if (!this.imageUrl) return
-
-      // 创建下载链接
-      const link = document.createElement('a')
-      link.href = this.imageUrl
-      link.download = `${this.imageName}_${new Date().getTime()}.${this.getImageExtension(this.imageUrl)}`
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
+    // 下载图片（支持跨域）
+    async downloadImage() {
+      if (!this.imageUrl || this.downloading) return
+
+      this.downloading = true
+      try {
+        // 尝试通过 fetch 下载（支持跨域）
+        const response = await fetch(this.imageUrl, { mode: 'cors' })
+        if (!response.ok) throw new Error('下载失败')
+
+        const blob = await response.blob()
+        const blobUrl = URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = blobUrl
+        link.download = `${this.imageName}_${Date.now()}.${this.getImageExtension(this.imageUrl)}`
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        URL.revokeObjectURL(blobUrl)
+      } catch {
+        // 降级方案：直接使用 a 标签下载（可能会打开新窗口）
+        const link = document.createElement('a')
+        link.href = this.imageUrl
+        link.download = `${this.imageName}_${Date.now()}.${this.getImageExtension(this.imageUrl)}`
+        link.target = '_blank'
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      } finally {
+        this.downloading = false
+      }
     },
 
     // 获取图片扩展名
-    getImageExtension (url) {
-      const match = url.match(/\.(jpeg|jpg|gif|png|bmp|webp)/)
-      return match ? match[1] : 'png'
+    getImageExtension(url) {
+      const match = url.match(/\.(jpeg|jpg|gif|png|bmp|webp)/i)
+      return match ? match[1].toLowerCase() : 'png'
     },
 
     // 关闭模态框
-    handleClose () {
+    handleClose() {
       this.resetImageTransform()
       this.$emit('close')
     }
@@ -325,7 +375,7 @@ export default {
   background: #f5f5f5;
   position: relative;
   cursor: grab;
-  outline: none; /* 移除焦点时的轮廓线 */
+  outline: none;
 
   &.dragging {
     cursor: grabbing;
@@ -333,14 +383,55 @@ export default {
 }
 
 .image-wrapper {
-  display: inline-block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
   transition: transform 0.1s ease;
   will-change: transform;
 }
 
 .preview-image {
   display: block;
+  max-width: calc(100% - 40px);
+  max-height: calc(60vh - 40px);
+  width: auto;
+  height: auto;
+  object-fit: contain;
   transition: transform 0.3s ease;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+// 加载中样式
+.loading-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+// 加载失败样式
+.error-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  color: #999;
+
+  .error-icon {
+    font-size: 64px;
+    margin-bottom: 16px;
+  }
+
+  p {
+    margin-bottom: 8px;
+  }
 }
 
 // 顶部工具栏样式
@@ -352,7 +443,7 @@ export default {
   z-index: 10;
   display: flex;
   justify-content: center;
-  pointer-events: none; // 允许点击穿透到图片
+  pointer-events: none;
 
   .toolbar-content {
     display: flex;
@@ -362,7 +453,7 @@ export default {
     backdrop-filter: blur(5px);
     border-radius: 20px;
     padding: 8px 16px;
-    pointer-events: auto; // 恢复按钮的点击事件
+    pointer-events: auto;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);