haiwei-module-admin 1.2.2 → 1.2.3

package/package.json

@@ -2,7 +2,7 @@
   "id": 0,
   "name": "haiwei-module-admin",
   "code": "admin",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "haiwei前端Admin模块组件",
   "author": "Eric",
   "license": "ISC",  

package/src/api/components/file.js

@@ -68,7 +68,7 @@ export default name => {
     // 如果提供了账户ID参数，则添加到请求中（仅在授权模式下需要）
     if (accounts) {
       formData.append('accounts', accounts)
-    } 
+    }
     // 发送POST请求到文件上传接口
     // 使用multipart/form-data内容类型，适合文件上传
     return $http.post(urls.upload, formData, {

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

@@ -1,31 +1,27 @@
 <template>
   <div class="file-preview">
-    <!-- 当fullPath有效时显示内容 -->
     <template v-if="hasValidFullPath">
-      <!-- 图片预览链接 -->
       <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" />
     </template>
-
-    <!-- 图片预览对话框 -->
     <nm-dialog
       v-if="isImage"
       ref="previewDialog"
       :visible.sync="previewVisible"
       :title="previewTitle"
-      width="800px"
-      height="800px"
-      :fullscreen="false"
+      icon="photo"
+      width="1200px"
+      height="80%"
+      fullscreen
+      draggable
+      no-scrollbar
       :footer="false"
       custom-class="image-preview-dialog"
       @closed="resetState"
     >
       <div class="preview-wrapper">
-        <!-- 使用CSS实现图片居中，而不是JS计算 -->
         <div class="preview-container" ref="previewContainer">
           <img
             :src="previewUrl"
@@ -40,8 +36,6 @@
             @dblclick="resetImage"
           />
         </div>
-
-        <!-- 操作按钮栏 -->
         <div class="toolbar">
           <button class="toolbar-btn" @click="zoomIn">
             <span class="icon">+</span>
@@ -51,11 +45,18 @@
             <span class="icon">-</span>
             <span class="text">缩小</span>
           </button>
+          <button class="toolbar-btn" @click="rotateLeft">
+            <span class="icon">↺</span>
+            <span class="text">左转90°</span>
+          </button>
+          <button class="toolbar-btn" @click="rotateRight">
+            <span class="icon">↻</span>
+            <span class="text">右转90°</span>
+          </button>
           <button class="toolbar-btn" @click="resetImage">
             <span class="icon">⟳</span>
             <span class="text">重置</span>
           </button>
-          <!-- 非图片文件下载 -->
           <nm-file-download
             v-if="hasValidFullPath"
             :url="downloadUrl"
@@ -89,147 +90,116 @@ export default {
       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处理居中）
+      // 图片原始尺寸（transform 计算需要）
+      imgNaturalWidth: 0,
+      imgNaturalHeight: 0,
+
+      // 变换状态
       position: { x: 0, y: 0 },
       scale: 1,
       minScale: 0.1,
       maxScale: 5,
+      rotation: 0,
+
+      // 自适应比例
+      initScale: 1,
 
-      // 拖拽状态
       isDragging: false,
-      startPosition: { x: 0, y: 0 }
+      startPosition: { x: 0, y: 0 },
+      enableTransition: true
     }
   },
-
   computed: {
-    // 缓存路径处理结果，避免重复计算
+    rotationRad() {
+      return (this.rotation * Math.PI) / 180
+    },
     normalizedPath() {
       if (!this.fullPath) return null
       return this.fullPath.replace(/\\/g, '/')
     },
-
-    // 缓存文件名，避免重复提取
     fileName() {
       if (!this.normalizedPath) return ''
       const filename = this.normalizedPath.split('/').pop()
       return filename || ''
     },
-
-    // 缓存文件扩展名
     fileExt() {
       const filename = this.fileName
       if (!filename) return ''
       const dotIndex = filename.lastIndexOf('.')
       return dotIndex > -1 ? filename.slice(dotIndex + 1).toLowerCase() : ''
     },
-
     hasValidFullPath() {
-      // 检查fullPath是否有效：不为空且不是空字符串
-      if (!this.fullPath || this.fullPath.trim() === '') {
-        return false
-      }
-
-      // 检查是否是目录路径（以斜杠结尾）
-      if (this.fullPath.endsWith('/') || this.fullPath.endsWith('\\')) {
-        return false
-      }
-
-      // 使用已计算的文件名
+      if (!this.fullPath || this.fullPath.trim() === '') return false
+      if (this.fullPath.endsWith('/') || this.fullPath.endsWith('\\')) return false
       const filename = this.fileName
-
-      // 文件名不能为空
-      if (!filename || filename.trim() === '') {
-        return false
-      }
-
+      if (!filename || filename.trim() === '') return false
       return true
     },
-
     isImage() {
       return this.imageExtensions.includes(this.fileExt)
     },
-
     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'
+        transform: `translate(${this.position.x}px, ${this.position.y}px) scale(${this.scale}) rotate(${this.rotation}deg)`,
+        transformOrigin: 'center center',
+        cursor: this.isDragging ? 'grabbing' : 'grab',
+        transition: this.enableTransition ? 'transform 0.2s ease' : 'none'
       }
     }
   },
-
   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: {
     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) {
@@ -237,36 +207,29 @@ export default {
           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后检查
+          }, 300)
         })
-
-        // 设置超时，防止图片加载事件未触发
         this.loadingTimeout = setTimeout(() => {
           if (this.imageLoading) {
             console.warn('图片加载超时，强制结束加载状态')
             this.imageLoading = false
-            // 检查图片是否已经加载完成
             if (this.$refs.previewImage && this.$refs.previewImage.complete) {
               this.handleImageLoad()
             }
           }
-        }, 2000) // 2秒超时
+        }, 2000)
       } catch (error) {
         console.error('打开预览对话框失败:', error)
         this.imageLoading = false
         this.imageError = true
       }
     },
-
     async setPreviewUrl(fileInfo) {
       let newUrl
       if (this.isPrivate && fileInfo.url) {
@@ -278,22 +241,13 @@ export default {
       } 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()
@@ -302,26 +256,51 @@ export default {
         }
       })
     },
-
     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()
+      this.$nextTick(() => {
+        const img = this.$refs.previewImage
+        const container = this.$refs.previewContainer
+        if (!img || !container) return
+
+        const cw = container.clientWidth
+        const ch = container.clientHeight
+        const iw = img.naturalWidth
+        const ih = img.naturalHeight
+        if (!iw || !ih || !cw || !ch) return
+
+        // 记录原始尺寸（后续 zoom/rotate 需要）
+        this.imgNaturalWidth = iw
+        this.imgNaturalHeight = ih
+
+        // ✅ 自适应比例：contain 铺满容器
+        this.initScale = Math.min(cw / iw, ch / ih)
+        this.scale = this.initScale
+        this.rotation = 0
+
+        // ✅ 动态缩放边界：自适应比例 × [0.1, 10]，至少允许 5 倍放大
+        this.minScale = this.initScale * 0.1
+        this.maxScale = Math.max(this.initScale * 10, 5)
+
+        // ✅ 居中：transform-origin 是 center center，
+        //    图片布局盒子的中心在 (iw/2, ih/2)，需要平移到 (cw/2, ch/2)
+        this.position.x = (cw - iw) / 2
+        this.position.y = (ch - ih) / 2
+      })
     },
 
     handleImageError() {
-      // 清理超时
       if (this.loadingTimeout) {
         clearTimeout(this.loadingTimeout)
         this.loadingTimeout = null
@@ -330,36 +309,42 @@ export default {
       this.imageError = true
     },
 
-    // 鼠标滚轮缩放 - 以鼠标为中心点缩放
+    /**
+     * 以 (anchorX, anchorY) 为锚点缩放。
+     * 在 transform-origin: center center 的变换模型下：
+     *   p' = O + t + s·R·(p − O)
+     * 缩放前后锚点 p 在容器坐标不变，可解得：
+     *   t_new = q − O − (s_new / s_old)·(q − O − t_old)
+     * 其中 O = (iw/2, ih/2) 为图片布局盒子中心。
+     */
+    zoomTo(newScale, anchorX, anchorY) {
+      newScale = Math.max(this.minScale, Math.min(this.maxScale, newScale))
+      if (Math.abs(this.scale - newScale) < 0.0001) return
+
+      const Ox = this.imgNaturalWidth / 2
+      const Oy = this.imgNaturalHeight / 2
+      const k = newScale / this.scale
+
+      this.position.x = anchorX - Ox - k * (anchorX - Ox - this.position.x)
+      this.position.y = anchorY - Oy - k * (anchorY - Oy - this.position.y)
+      this.scale = newScale
+    },
+
     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))
-
-      // 计算缩放中心（相对于图片）
+      // ✅ 乘法缩放：手感顺滑，且不受当前 scale 大小影响
+      const factor = event.deltaY < 0 ? 1.15 : 1 / 1.15
+      const newScale = this.scale * factor
       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
+        const rect = this.$refs.previewContainer.getBoundingClientRect()
+        const mouseX = event.clientX - rect.left
+        const mouseY = event.clientY - rect.top
+        this.zoomTo(newScale, mouseX, mouseY)
       }
     },
 
-    // 开始拖拽
     startDrag(event) {
-      if (event.button !== 0) return // 只响应左键
+      if (event.button !== 0) return
       this.isDragging = true
       this.startPosition = {
         x: event.clientX - this.position.x,
@@ -367,73 +352,87 @@ export default {
       }
       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)
-      }
+      const container = this.$refs.previewContainer
+      if (!container) return
+      const cx = container.clientWidth / 2
+      const cy = container.clientHeight / 2
+      // ✅ 乘法缩放：每次放大 20%
+      this.zoomTo(this.scale * 1.2, cx, cy)
     },
-
-    // 缩小
     zoomOut() {
-      const newScale = Math.max(this.minScale, this.scale - 0.2)
-      if (newScale !== this.scale) {
-        this.centerZoom(newScale)
-      }
+      const container = this.$refs.previewContainer
+      if (!container) return
+      const cx = container.clientWidth / 2
+      const cy = container.clientHeight / 2
+      this.zoomTo(this.scale / 1.2, cx, cy)
     },
 
-    // 以当前视图中心点缩放（用于工具栏按钮）
-    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
+    rotateLeft() {
+      this.enableTransition = false
+      this.rotation = (this.rotation - 90 + 360) % 360
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.enableTransition = true
+        }, 0)
+      })
+    },
+    rotateRight() {
+      this.enableTransition = false
+      this.rotation = (this.rotation + 90) % 360
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.enableTransition = true
+        }, 0)
+      })
     },
 
-    // 重置图片位置和大小
+    // ✅ 重置：角度归零，scale 回到自适应比例，重新居中
     resetImage() {
-      this.position = { x: 0, y: 0 }
-      this.scale = 1
+      const img = this.$refs.previewImage
+      const container = this.$refs.previewContainer
+      if (!img || !container) return
+
+      const cw = container.clientWidth
+      const ch = container.clientHeight
+      const iw = img.naturalWidth || this.imgNaturalWidth
+      const ih = img.naturalHeight || this.imgNaturalHeight
+      if (!iw || !ih || !cw || !ch) return
+
+      this.rotation = 0
+      this.scale = this.initScale
+
+      // transform-origin: center center，居中平移量 = (cw - iw)/2, (ch - ih)/2
+      this.position.x = (cw - iw) / 2
+      this.position.y = (ch - ih) / 2
     },
 
-    // 重置所有状态
     resetState() {
-      // 清理超时
       if (this.loadingTimeout) {
         clearTimeout(this.loadingTimeout)
         this.loadingTimeout = null
       }
       this.position = { x: 0, y: 0 }
       this.scale = 1
+      this.minScale = 0.1
+      this.maxScale = 5
+      this.rotation = 0
+      this.initScale = 1
+      this.imgNaturalWidth = 0
+      this.imgNaturalHeight = 0
       this.imageLoading = false
       this.imageError = false
       this.isDragging = false
+      this.enableTransition = true
     }
   }
 }
@@ -442,59 +441,42 @@ export default {
 <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;
+  /* 撑满对话框内容区（高度由 nm-dialog 的 height 决定），
+     不写固定高度，避免弹窗缩放/全屏后图片区与内容区高度不一致 */
+  height: 100%;
   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;
+  /* ✅ 绝对定位在左上角，保证 transform 计算以容器 (0,0) 为基准 */
+  position: absolute;
+  top: 0;
+  left: 0;
 }
-
-/* 操作工具栏 */
 .toolbar {
   position: absolute;
   bottom: 20px;
@@ -507,7 +489,6 @@ export default {
   border-radius: 4px;
   z-index: 10;
 }
-
 .toolbar-btn {
   display: flex;
   align-items: center;
@@ -521,21 +502,17 @@ export default {
   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;
   }
@@ -543,23 +520,38 @@ export default {
 </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 {
+    /* nm-dialog 的标题结构：图标 + 标题 + 工具栏(全屏/关闭按钮) */
+    .nm-dialog-title {
       color: #fff;
       font-size: 14px;
+      cursor: move; /* 与 draggable 配合，提示可拖动 */
     }
 
+    .nm-dialog-icon {
+      color: #fff;
+    }
+
+    /* 工具栏里的全屏/关闭按钮：深色底上要显示为白色，
+       否则继承框架默认深色图标导致看不见 */
+    .nm-dialog-toolbar .nm-button {
+      color: #fff;
+
+      &:hover {
+        color: #409eff;
+      }
+    }
+
+    /* 兼容 element-ui 原生关闭按钮 */
     .el-dialog__close {
       color: #fff;
 
@@ -568,11 +560,10 @@ export default {
       }
     }
   }
-
   .el-dialog__body {
     padding: 0 !important;
     background: #000 !important;
     overflow: hidden !important;
   }
 }
-</style>
+</style>