haiwei-module-admin 1.0.0 → 1.0.2

package/src/components/file-preview/index copy.vue

@@ -0,0 +1,531 @@
+<template>
+  <div class="file-preview">
+    <!-- 图片预览链接 -->
+    <a v-if="isImage" class="preview-link" @click="showPreviewDialog">
+      查看
+    </a>
+
+    <!-- 非图片文件下载 -->
+    <nm-file-download v-else :url="downloadUrl" :private="isPrivate" :fileName="fileName" :text="downloadText" :icon="downloadIcon" :size="downloadSize" :type="downloadType" @click="onDownload" />
+
+    <!-- 图片预览对话框 -->
+    <nm-dialog
+      v-if="isImage"
+      ref="previewDialog"
+      :visible.sync="previewVisible"
+      :title="previewTitle"
+      width="800px"
+      height="800px"
+      :fullscreen="false"
+      :footer="false"
+      custom-class="image-preview-dialog"
+      @closed="resetState"
+    >
+      <div class="preview-wrapper">
+        <!-- 使用CSS实现图片居中，而不是JS计算 -->
+        <div class="preview-container" ref="previewContainer">
+          <img
+            :src="previewUrl"
+            :alt="fileName"
+            class="preview-image"
+            ref="previewImage"
+            @load="handleImageLoad"
+            @error="handleImageError"
+            :style="imageStyle"
+            @mousedown="startDrag"
+            @wheel="handleWheel"
+            @dblclick="resetImage"
+          />
+        </div>
+
+        <!-- 操作按钮栏 -->
+        <div class="toolbar">
+          <button class="toolbar-btn" @click="zoomIn">
+            <span class="icon">+</span>
+            <span class="text">放大</span>
+          </button>
+          <button class="toolbar-btn" @click="zoomOut">
+            <span class="icon">-</span>
+            <span class="text">缩小</span>
+          </button>
+          <button class="toolbar-btn" @click="resetImage">
+            <span class="icon">⟳</span>
+            <span class="text">重置</span>
+          </button>
+        </div>
+      </div>
+    </nm-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FilePreview',
+  props: {
+    fullPath: { type: String, required: true },
+    fileName: String,
+    isPrivate: { type: Boolean, default: false },
+    ext: String,
+    downloadText: { type: String, default: '下载' },
+    downloadIcon: { type: String, default: 'download' },
+    downloadSize: String,
+    downloadType: { type: String, default: 'primary' },
+    previewTitle: { type: String, default: '图片预览' },
+    imageExtensions: {
+      type: Array,
+      default: () => ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico']
+    }
+  },
+
+  data() {
+    return {
+      previewVisible: false,
+      previewUrl: '',
+      fileInfo: null,
+
+      // 图片状态
+      imageLoading: false,
+      imageError: false,
+      loadingTimeout: null,
+
+      // 图片位置和缩放（使用CSS transform，但让CSS处理居中）
+      position: { x: 0, y: 0 },
+      scale: 1,
+      minScale: 0.1,
+      maxScale: 5,
+
+      // 拖拽状态
+      isDragging: false,
+      startPosition: { x: 0, y: 0 }
+    }
+  },
+
+  computed: {
+    isImage() {
+      // return false;
+      const ext = this.ext || (this.fileName || '').split('.').pop() || ''
+      return this.imageExtensions.includes(ext.toLowerCase())
+    },
+
+    downloadUrl() {
+      console.log('this.fileInfo?.url ', this.fileInfo?.url)
+      return this.fileInfo?.url || this.fullPath
+    },
+
+    imageStyle() {
+      return {
+        transform: `translate(${this.position.x}px, ${this.position.y}px) scale(${this.scale})`,
+        cursor: this.isDragging ? 'grabbing' : 'grab'
+      }
+    }
+  },
+
+  watch: {
+    fullPath(val) {
+      if (val && this.isImage && !this.isPrivate) {
+        this.previewUrl = val
+      }
+    },
+
+    previewVisible(val) {
+      if (!val) {
+        this.resetState()
+      }
+    }
+  },
+
+  mounted() {
+    // 监听全局鼠标事件用于拖拽
+    document.addEventListener('mousemove', this.handleDrag)
+    document.addEventListener('mouseup', this.stopDrag)
+  },
+
+  beforeDestroy() {
+    // 清理事件监听
+    document.removeEventListener('mousemove', this.handleDrag)
+    document.removeEventListener('mouseup', this.stopDrag)
+
+    // 清理超时
+    if (this.loadingTimeout) {
+      clearTimeout(this.loadingTimeout)
+      this.loadingTimeout = null
+    }
+  },
+
+  methods: {
+    getFileExtension() {
+      if (this.ext) return this.ext.toLowerCase()
+      const name = this.fileName || this.fullPath || ''
+      const dotIndex = name.lastIndexOf('.')
+      return dotIndex > -1 ? name.slice(dotIndex + 1).toLowerCase() : ''
+    },
+
+    async getFileInfo() {
+      if (!this.fullPath) return null
+
+      try {
+        const result = await $api.admin.file.getByFullPath(this.fullPath)
+        this.fileInfo = result
+
+        console.log('result', result)
+
+        return result
+      } catch (error) {
+        console.error('获取文件信息失败:', error)
+        return null
+      }
+    },
+
+    async showPreviewDialog() {
+      if (!this.isImage) return
+
+      this.resetState()
+      this.imageLoading = true
+      this.previewVisible = true
+
+      try {
+        const fileInfo = await this.getFileInfo()
+        if (!fileInfo) {
+          this.imageLoading = false
+          this.imageError = true
+          return
+        }
+
+        await this.setPreviewUrl(fileInfo)
+
+        // 设置一个立即检查，防止缓存图片不触发load事件
+        this.$nextTick(() => {
+          setTimeout(() => {
+            if (this.imageLoading && this.$refs.previewImage && this.$refs.previewImage.complete) {
+              this.handleImageLoad()
+            }
+          }, 300) // 300ms后检查
+        })
+
+        // 设置超时，防止图片加载事件未触发
+        this.loadingTimeout = setTimeout(() => {
+          if (this.imageLoading) {
+            console.warn('图片加载超时，强制结束加载状态')
+            this.imageLoading = false
+            // 检查图片是否已经加载完成
+            if (this.$refs.previewImage && this.$refs.previewImage.complete) {
+              this.handleImageLoad()
+            }
+          }
+        }, 2000) // 2秒超时
+      } catch (error) {
+        console.error('打开预览对话框失败:', error)
+        this.imageLoading = false
+        this.imageError = true
+      }
+    },
+
+    async setPreviewUrl(fileInfo) {
+      let newUrl
+      if (this.isPrivate && fileInfo.url) {
+        try {
+          newUrl = await $api.admin.file.preview(fileInfo.url)
+        } catch {
+          newUrl = fileInfo.url
+        }
+      } else {
+        newUrl = fileInfo.url || this.fullPath
+      }
+
+      // 先清空URL，强制重新加载（即使URL相同）
+      if (this.previewUrl) {
+        this.previewUrl = ''
+        // 等待一个tick确保DOM更新
+        await this.$nextTick()
+      }
+
+      // 设置新的URL
+      this.previewUrl = newUrl
+
+      // 等待DOM更新后检查图片是否已经加载完成
+      this.$nextTick(() => {
+        // 如果图片元素存在且已经加载完成，直接触发加载完成事件
+        if (this.$refs.previewImage && this.$refs.previewImage.complete) {
+          // 小延迟确保图片完全渲染
+          setTimeout(() => {
+            if (this.imageLoading) {
+              this.handleImageLoad()
+            }
+          }, 100)
+        }
+      })
+    },
+
+    async onDownload() {
+      const fileInfo = await this.getFileInfo()
+      const url = fileInfo?.url || this.fullPath
+      this.$emit('download', url, this.fileName)
+    },
+
+    handleImageLoad() {
+      // 清理超时
+      if (this.loadingTimeout) {
+        clearTimeout(this.loadingTimeout)
+        this.loadingTimeout = null
+      }
+      this.imageLoading = false
+      // 图片加载完成后自动居中
+      this.resetImage()
+    },
+
+    handleImageError() {
+      // 清理超时
+      if (this.loadingTimeout) {
+        clearTimeout(this.loadingTimeout)
+        this.loadingTimeout = null
+      }
+      this.imageLoading = false
+      this.imageError = true
+    },
+
+    // 鼠标滚轮缩放 - 以鼠标为中心点缩放
+    handleWheel(event) {
+      event.preventDefault()
+
+      const delta = event.deltaY < 0 ? 0.1 : -0.1
+      const newScale = Math.max(this.minScale, Math.min(this.maxScale, this.scale + delta))
+
+      // 计算缩放中心（相对于图片）
+      if (this.$refs.previewContainer) {
+        const containerRect = this.$refs.previewContainer.getBoundingClientRect()
+        const mouseX = event.clientX - containerRect.left
+        const mouseY = event.clientY - containerRect.top
+
+        // 计算鼠标相对于图片原始坐标系的位置
+        // 注意：position.x 和 position.y 是图片相对于容器的平移
+        const relativeX = (mouseX - this.position.x) / this.scale
+        const relativeY = (mouseY - this.position.y) / this.scale
+
+        // 更新位置以保持鼠标点不变
+        this.position.x = mouseX - relativeX * newScale
+        this.position.y = mouseY - relativeY * newScale
+        this.scale = newScale
+      } else {
+        this.scale = newScale
+      }
+    },
+
+    // 开始拖拽
+    startDrag(event) {
+      if (event.button !== 0) return // 只响应左键
+      this.isDragging = true
+      this.startPosition = {
+        x: event.clientX - this.position.x,
+        y: event.clientY - this.position.y
+      }
+      event.preventDefault()
+    },
+
+    // 处理拖拽
+    handleDrag(event) {
+      if (!this.isDragging) return
+
+      this.position.x = event.clientX - this.startPosition.x
+      this.position.y = event.clientY - this.startPosition.y
+    },
+
+    // 停止拖拽
+    stopDrag() {
+      this.isDragging = false
+    },
+
+    // 放大
+    zoomIn() {
+      const newScale = Math.min(this.maxScale, this.scale + 0.2)
+      if (newScale !== this.scale) {
+        this.centerZoom(newScale)
+      }
+    },
+
+    // 缩小
+    zoomOut() {
+      const newScale = Math.max(this.minScale, this.scale - 0.2)
+      if (newScale !== this.scale) {
+        this.centerZoom(newScale)
+      }
+    },
+
+    // 以当前视图中心点缩放（用于工具栏按钮）
+    centerZoom(newScale) {
+      if (this.$refs.previewContainer) {
+        const containerRect = this.$refs.previewContainer.getBoundingClientRect()
+        // 使用容器中心作为缩放中心点
+        const centerX = containerRect.width / 2
+        const centerY = containerRect.height / 2
+
+        // 计算中心点相对于图片原始坐标系的位置
+        const relativeX = (centerX - this.position.x) / this.scale
+        const relativeY = (centerY - this.position.y) / this.scale
+
+        // 更新位置以保持中心点不变
+        this.position.x = centerX - relativeX * newScale
+        this.position.y = centerY - relativeY * newScale
+      }
+      this.scale = newScale
+    },
+
+    // 重置图片位置和大小
+    resetImage() {
+      this.position = { x: 0, y: 0 }
+      this.scale = 1
+    },
+
+    // 重置所有状态
+    resetState() {
+      // 清理超时
+      if (this.loadingTimeout) {
+        clearTimeout(this.loadingTimeout)
+        this.loadingTimeout = null
+      }
+      this.position = { x: 0, y: 0 }
+      this.scale = 1
+      this.imageLoading = false
+      this.imageError = false
+      this.isDragging = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.file-preview {
+  display: inline-block;
+
+  .preview-link {
+    color: #409eff;
+    cursor: pointer;
+    text-decoration: none;
+    transition: color 0.2s;
+
+    &:hover {
+      color: #66b1ff;
+      text-decoration: underline;
+    }
+  }
+}
+
+.preview-wrapper {
+  width: 100%;
+  height: 750px;
+  background: #000;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  touch-action: none;
+  /* 防止移动端默认行为 */
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  /* 关键：保持比例并适应容器 */
+  transform-origin: 0 0;
+  /* 设置为左上角以匹配我们的数学计算 */
+  transition: transform 0.2s ease;
+  user-select: none;
+  -webkit-user-drag: none;
+
+  /* 平滑的拖拽和缩放效果 */
+  will-change: transform;
+}
+
+/* 操作工具栏 */
+.toolbar {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 10px;
+  background: rgba(0, 0, 0, 0.7);
+  padding: 10px;
+  border-radius: 4px;
+  z-index: 10;
+}
+
+.toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  .icon {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .text {
+    white-space: nowrap;
+  }
+}
+</style>
+
+<style lang="scss">
+/* 对话框全局样式 */
+.image-preview-dialog {
+  .el-dialog {
+    background: #000;
+    border: 1px solid #333;
+  }
+
+  .el-dialog__header {
+    background: #000;
+    border-bottom: 1px solid #333;
+    padding: 10px 20px;
+
+    .el-dialog__title {
+      color: #fff;
+      font-size: 14px;
+    }
+
+    .el-dialog__close {
+      color: #fff;
+
+      &:hover {
+        color: #409eff;
+      }
+    }
+  }
+
+  .el-dialog__body {
+    padding: 0 !important;
+    background: #000 !important;
+    overflow: hidden !important;
+  }
+}
+</style>