haiwei-module-admin 1.1.0 → 1.1.2

package/package.json

@@ -2,7 +2,7 @@
   "id": 0,
   "name": "haiwei-module-admin",
   "code": "admin",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "haiwei前端Admin模块组件",
   "author": "Eric",
   "license": "ISC",  
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "haiwei-skins-classics": "^1.0.2",
-    "haiwei-ui": "^1.0.9"
+    "haiwei-ui": "^1.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.4.4",

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

@@ -0,0 +1,55 @@
+<template>
+  <div :style="{ width, height }" class="nm-file-img-preview">
+    <img v-if="url__" :src="url__" />
+    <nm-icon class="no-picture" v-else name="photo" />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      url_: this.url,
+      url__: ''
+    }
+  },
+  props: {
+    url: {
+      type: String
+    },
+    //是否私有
+    private: Boolean,
+    width: {
+      type: String,
+      default: 'auto'
+    },
+    height: {
+      type: String,
+      default: 'auto'
+    }
+  },
+  watch: {
+    url: {
+      immediate: true,
+      handler(val) {
+        if (val !== this.url_) {
+          if (this.private && this.url) {
+            $api.admin.file.preview(this.url).then(url => {
+              this.url__ = url
+            })
+          } else {
+            this.url__ = val
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.nm-file-img-preview {
+  display: block;
+  img {
+    width: 100%;
+  }
+}
+</style>

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

@@ -16,6 +16,10 @@ export default {
     url: {
       type: String
     },
+    // 完整路径（公有图片）
+    fullPath: {
+      type: String
+    },
     //是否私有
     private: Boolean,
     width: {
@@ -27,19 +31,89 @@ export default {
       default: 'auto'
     }
   },
+  computed: {
+    baseUrl() {
+      // 优先使用全局变量，否则使用默认值
+      return window.__HAIWEI_API_BASE_URL__ || '/api/'
+    }
+  },
   watch: {
     url: {
       immediate: true,
       handler(val) {
         if (val !== this.url_) {
-          if (this.private && this.url) {
-            $api.admin.file.preview(this.url).then(url => {
-              this.url__ = url
-            })
+          this.updatePreviewUrl()
+        }
+      }
+    },
+    fullPath: {
+      immediate: true,
+      handler() {
+        this.updatePreviewUrl()
+      }
+    },
+    private: {
+      immediate: true,
+      handler() {
+        this.updatePreviewUrl()
+      }
+    }
+  },
+  methods: {
+    // 判断是否为绝对 URL
+    isAbsoluteUrl(path) {
+      return /^(https?:)?\/\//.test(path)
+    },
+    
+    // 规范化路径拼接
+    normalizePath(base, path) {
+      // 如果 path 已经是绝对 URL，直接返回
+      if (this.isAbsoluteUrl(path)) {
+        return path
+      }
+      // 确保 base 以 / 结尾，path 不以 / 开头
+      let baseUrl = base.endsWith('/') ? base.slice(0, -1) : base
+      let fullPath = path.startsWith('/') ? path.slice(1) : path
+      return `${baseUrl}/${fullPath}`
+    },
+    
+    updatePreviewUrl() {
+      // 重置内部状态
+      this.url_ = this.url
+      
+      // 优先使用 fullPath
+      if (this.fullPath) {
+        if (this.private) {
+          // 私有图片，调用预览接口
+          $api.admin.file.preview(this.fullPath).then(url => {
+            this.url__ = url
+          }).catch(() => {
+            // 如果接口调用失败，使用原始路径
+            this.url__ = this.fullPath
+          })
+        } else {
+          // 公有图片，拼接 OSS 路径
+          if (this.isAbsoluteUrl(this.fullPath)) {
+            // 如果已经是绝对 URL，直接使用
+            this.url__ = this.fullPath
           } else {
-            this.url__ = val
+            // 拼接 OSS 路径
+            this.url__ = this.normalizePath(this.baseUrl + '/oss/o', this.fullPath)
           }
         }
+      } else if (this.url) {
+        // 原有逻辑
+        if (this.private) {
+          $api.admin.file.preview(this.url).then(url => {
+            this.url__ = url
+          }).catch(() => {
+            this.url__ = this.url
+          })
+        } else {
+          this.url__ = this.url
+        }
+      } else {
+        this.url__ = ''
       }
     }
   }

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

@@ -77,7 +77,7 @@
 export default {
   name: 'FilePreview',
   props: {
-    fullPath: { type: String, required: true },
+    fullPath: { type: String, default: null },
     isPrivate: { type: Boolean, default: false },
     downloadText: { type: String, default: '下载' },
     downloadIcon: { type: String, default: 'download' },
@@ -114,6 +114,27 @@ export default {
   },
 
   computed: {
+    // 缓存路径处理结果，避免重复计算
+    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() === '') {
@@ -125,9 +146,8 @@ export default {
         return false
       }
 
-      // 检查是否有文件名（路径的最后一部分）
-      const path = this.fullPath.replace(/\\/g, '/')
-      const filename = path.split('/').pop()
+      // 使用已计算的文件名
+      const filename = this.fileName
 
       // 文件名不能为空
       if (!filename || filename.trim() === '') {
@@ -137,27 +157,12 @@ export default {
       return true
     },
 
-    fileName() {
-      // 从fullPath中提取文件名
-      if (!this.fullPath) return ''
-      const path = this.fullPath.replace(/\\/g, '/')
-      const filename = path.split('/').pop()
-      return filename || ''
-    },
-
-    fileExt() {
-      // 从fullPath中提取文件扩展名
-      const filename = this.fileName
-      const dotIndex = filename.lastIndexOf('.')
-      return dotIndex > -1 ? filename.slice(dotIndex + 1).toLowerCase() : ''
-    },
-
     isImage() {
       return this.imageExtensions.includes(this.fileExt)
     },
 
     downloadUrl() {
-      console.log('this.fileInfo?.url ', this.fileInfo?.url)
+      // console.log('this.fileInfo?.url ', this.fileInfo?.url)
       return this.fileInfo?.url || this.fullPath
     },
 

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

@@ -1,573 +0,0 @@
-<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"
-      :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>
-          <!-- 非图片文件下载 -->
-          <nm-file-download
-            v-if="hasValidFullPath"
-            :url="downloadUrl"
-            :private="isPrivate"
-            :fileName="fileName"
-            :text="downloadText"
-            :icon="downloadIcon"
-            :size="downloadSize"
-            :type="downloadType"
-            @click="onDownload"
-          />
-        </div>
-      </div>
-    </nm-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'FilePreview',
-  props: {
-    fullPath: { type: String, required: true },
-    isPrivate: { type: Boolean, default: false },
-    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: {
-    hasValidFullPath() {
-      // 检查fullPath是否有效：不为空且不是空字符串
-      if (!this.fullPath || this.fullPath.trim() === '') {
-        return false
-      }
-
-      // 检查是否是目录路径（以斜杠结尾）
-      if (this.fullPath.endsWith('/') || this.fullPath.endsWith('\\')) {
-        return false
-      }
-
-      // 检查是否有文件名（路径的最后一部分）
-      const path = this.fullPath.replace(/\\/g, '/')
-      const filename = path.split('/').pop()
-
-      // 文件名不能为空
-      if (!filename || filename.trim() === '') {
-        return false
-      }
-
-      return true
-    },
-
-    fileName() {
-      // 从fullPath中提取文件名
-      if (!this.fullPath) return ''
-      const path = this.fullPath.replace(/\\/g, '/')
-      const filename = path.split('/').pop()
-      return filename || ''
-    },
-
-    fileExt() {
-      // 从fullPath中提取文件扩展名
-      const filename = this.fileName
-      const dotIndex = filename.lastIndexOf('.')
-      return dotIndex > -1 ? filename.slice(dotIndex + 1).toLowerCase() : ''
-    },
-
-    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'
-      }
-    }
-  },
-
-  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) {
-          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>