haiwei-module-admin 1.0.1 → 1.0.2

package/package.json

@@ -2,9 +2,9 @@
   "id": 0,
   "name": "haiwei-module-admin",
   "code": "admin",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "haiwei前端Admin模块组件",
-  "author": "Oldli",
+  "author": "Eric",
   "license": "ISC",
   "main": "src/index.js",
   "scripts": {
@@ -13,13 +13,13 @@
     "lint": "vue-cli-service lint",
     "cm": "rimraf node_modules",
     "cc": "rimraf node_modules/.cache",
-    "i": "cd ./script && npm_install.ps1",
-    "up": "cd ./script && npm_update.ps1",
-    "pub": "cd ./script && npm_publish.ps1"
+    "i": "cd ./script && npm_install.bat",
+    "up": "cd ./script && npm_update.bat",
+    "pub": "cd ./script && npm_publish.bat"
   },
   "dependencies": {
     "haiwei-skins-classics": "^1.0.2",
-    "haiwei-ui": "^1.0.2"
+    "haiwei-ui": "^1.0.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.4.4",

package/script/npm_install.bat

@@ -0,0 +1,4 @@
+@echo off
+REM 执行 npm 安装脚本
+powershell -ExecutionPolicy Bypass -File "%~dp0npm_install.ps1"
+pause

package/script/npm_publish.bat

@@ -0,0 +1,4 @@
+@echo off
+REM 执行 npm 发布脚本
+powershell -ExecutionPolicy Bypass -File "%~dp0npm_publish.ps1"
+pause

package/script/npm_update.bat

@@ -0,0 +1,4 @@
+@echo off
+REM 执行 npm 更新脚本
+powershell -ExecutionPolicy Bypass -File "%~dp0npm_update.ps1"
+pause

package/src/api/components/file.js

@@ -3,6 +3,9 @@ import module from '../../module'
 export default name => {
   const root = `${module.code}/${name}/`
   const crud = $http.crud(root)
+
+  console.log('crud', crud)
+
   const urls = {
     upload: root + 'Upload',
     hardDelete: root + 'HardDelete'

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>

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

@@ -0,0 +1,534 @@
+<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>
+          <!-- 非图片文件下载 -->
+         <nm-file-download  :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 },
+    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>

package/src/views/file/components/save/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <nm-form-dialog ref="form" v-bind="form" v-on="on" :visible.sync="visible_">
+    <el-row>
+      <el-col :span="20" :offset="1">
+        <el-form-item label="模块：" prop="moduleCode">
+          <nm-module-select v-model="form.model.moduleCode" />
+        </el-form-item>
+        <el-form-item label="分组：" prop="group">
+          <el-input v-model="form.model.group" />
+        </el-form-item>
+        <el-form-item label="访问方式：" prop="accessMode">
+          <el-select v-model="form.model.accessMode" placeholder="请选择访问方式">
+            <el-option label="私有" :value="0" />
+            <el-option label="公开" :value="1" />
+            <el-option label="授权" :value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="form.model.accessMode === 2" label="授权账户：" prop="accounts">
+          <el-input v-model="form.model.accounts" placeholder="请输入账户ID，多个用逗号分隔" clearable />
+        </el-form-item>
+        <el-form-item label="文件：" prop="filePath" :rules="[{ required: true, message: '请选择要上传的文件' }]">
+          <nm-file-upload
+            v-model="form.model.filePath"
+            :module="form.model.moduleCode"
+            :group="form.model.group"
+            :access-mode="form.model.accessMode"
+            :accounts="form.model.accounts"
+            max-size="50MB"
+            @success="onUploadSuccess"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </nm-form-dialog>
+</template>
+<script>
+import { mixins } from 'haiwei-ui'
+
+export default {
+  mixins: [mixins.formSave],
+  data() {
+    return {
+      title: '文件上传',
+      actions: {
+        add: null, // 将在created中设置
+        edit: null, // 禁用编辑功能
+        update: null // 禁用更新功能
+      },
+      form: {
+        width: '600px',
+        footer: false, // 隐藏确定/取消按钮
+        model: {
+          id: '',
+          moduleCode: '',
+          group: '',
+          accessMode: 1, // 默认公开
+          accounts: '',
+          filePath: '' // 文件路径
+        },
+        rules: {
+          moduleCode: [{ required: true, message: '请选择模块' }],
+          group: [{ required: true, message: '请输入分组' }],
+          accessMode: [{ required: true, message: '请选择访问方式' }],
+          filePath: [{ required: true, message: '请选择要上传的文件' }]
+        }
+      }
+    }
+  },
+  created() {
+    // 由于隐藏了按钮，不需要设置actions.add
+    // this.actions.add = this.handleAdd
+  },
+  methods: {
+    // 上传成功处理（由nm-file-upload组件触发）
+    onUploadSuccess(data, file) {
+      // 文件上传成功后，nm-file-upload会自动更新form.model.filePath
+      // 显示成功消息
+      this.$message.success('文件上传成功')
+
+      // 触发success事件，通知父组件刷新列表
+      this.$emit('success')
+
+      // 自动关闭对话框
+      this.visible_ = false
+
+      // 重置表单
+      this.reset()
+
+      // 可以添加额外的成功处理逻辑
+      console.log('文件上传成功:', data, file)
+    },
+
+    // 重置表单
+    reset() {
+      this.form.model = {
+        id: '',
+        moduleCode: '',
+        group: '',
+        accessMode: 1,
+        accounts: '',
+        filePath: ''
+      }
+    }
+  }
+}
+</script>

package/src/views/file/index/index.vue

@@ -11,6 +11,42 @@
         </el-form-item>
       </template>
 
+      <!--高级查询-->
+      <template v-slot:querybar-advanced>
+        <el-row>
+          <el-col :span="20" :offset="1">
+            <el-form-item label="分组：" prop="group">
+              <el-input v-model="list.model.group" clearable />
+            </el-form-item>
+            <el-form-item label="访问方式：" prop="accessMode">
+              <el-select v-model="list.model.accessMode" placeholder="请选择访问方式" clearable>
+                <el-option label="私有" :value="0" />
+                <el-option label="公开" :value="1" />
+                <el-option label="授权" :value="2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </template>
+
+      <!--按钮-->
+      <template v-slot:querybar-buttons>
+        <nm-button v-bind="buttons.add" @click="add" />
+      </template>
+
+      <!-- 文件预览列 -->
+      <template v-slot:col-fullPath="{ row }">
+        <nm-file-preview :fullPath="row.fullPath" :fileName="row.fileName" :ext="row.ext" :isPrivate="row.accessMode !== 1" />
+        <!-- <nm-file-preview :fullPath="row.fullPath"/> -->
+      </template>
+
+      <!--访问方式-->
+      <template v-slot:col-accessModeName="{ row }">
+        <el-tag v-if="row.accessMode === 0" type="info">私有</el-tag>
+        <el-tag v-else-if="row.accessMode === 1" type="success">公开</el-tag>
+        <el-tag v-else-if="row.accessMode === 2" type="warning">授权</el-tag>
+      </template>
+
       <!--操作列-->
       <template v-slot:col-operation="{ row }">
         <nm-file-download v-bind="buttons.export" :url="row.url" :private="row.accessMode !== 1" @success="refresh" />
@@ -18,12 +54,16 @@
         <nm-button-delete v-bind="buttons.hardDel" :id="row.id" :action="hardRemoveAction" @success="refresh" />
       </template>
     </nm-list>
+
+    <!--保存页-->
+    <save-page :visible.sync="dialog.save" @success="refresh" />
   </nm-container>
 </template>
 <script>
 import { mixins } from 'haiwei-ui'
 import page from './page'
 import cols from './cols'
+import SavePage from '../components/save'
 
 // 接口
 const api = $api.admin.file
@@ -31,22 +71,33 @@ const api = $api.admin.file
 export default {
   name: page.name,
   mixins: [mixins.list],
+  components: { SavePage },
   data() {
     return {
       list: {
         title: page.title,
         cols,
         action: api.query,
-        operationWidth: '200',
+        operationWidth: '270',
+        advanced: {
+          enabled: true,
+          width: '400px'
+        },
         model: {
           moduleCode: '',
-          fileName: ''
+          fileName: '',
+          group: '',
+          accessMode: ''
         }
       },
       removeAction: api.remove,
       hardRemoveAction: api.hardDelete,
       buttons: page.buttons
     }
+  },
+  methods: {
+    // 上传（新增）- 使用混入的add方法打开对话框
+    // add方法已在mixins.list中定义，会设置dialog.save = true
   }
 }
 </script>

package/src/views/file/index/page.js

@@ -8,7 +8,15 @@ const page = new (function() {
   // 关联权限
   this.permissions = [`${this.name}_query_get`]
 
+  // 按钮
   this.buttons = {
+    add: {
+      text: '上传',
+      type: 'success',
+      icon: 'upload',
+      code: `${this.name}_add`,
+      permissions: [`${this.name}_add_post`]
+    },
     export: {
       text: '导出',
       type: 'text',

package/vue.config.js

@@ -105,5 +105,14 @@ module.exports = {
           name: 'manifest'
         })
       })
+  },
+  css: {
+    loaderOptions: {
+      sass: {
+        sassOptions: {
+          silenceDeprecations: ['import', 'legacy-js-api', 'bogus-combinators', 'slash-div']
+        }
+      }
+    }
   }
 }