haiwei-module-admin 1.0.0 → 1.0.2

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/components/index.js

@@ -1,4 +1,4 @@
-import library from 'netmodular-ui/packages/library'
+import library from 'haiwei-ui/packages/library'
 let components = []
 const requireComponent = require.context('./', true, /index\.vue$/)
 requireComponent.keys().map(fileName => {

package/src/components/login-mode-select/index.vue

@@ -1,5 +1,5 @@
 <script>
-import { mixins } from 'netmodular-ui'
+import { mixins } from 'haiwei-ui'
 export default {
   mixins: [mixins.select],
   data() {

package/src/components/module-select/index.vue

@@ -1,5 +1,5 @@
 <script>
-import { mixins } from 'netmodular-ui'
+import { mixins } from 'haiwei-ui'
 export default {
   mixins: [mixins.select],
   data() {

package/src/components/platform-select/index.vue

@@ -1,5 +1,5 @@
 <script>
-import { mixins } from 'netmodular-ui'
+import { mixins } from 'haiwei-ui'
 export default {
   mixins: [mixins.select],
   data() {

package/src/components/role-select/index.vue

@@ -1,5 +1,5 @@
 <script>
-import { mixins } from 'netmodular-ui'
+import { mixins } from 'haiwei-ui'
 export default {
   mixins: [mixins.select],
   data() {

package/src/index.js

@@ -1,10 +1,10 @@
-import NetModularUI from 'netmodular-ui'
+import haiweiUI from 'haiwei-ui'
 import './api'
 import module from './module'
 import routes from './routes'
 import store from './store'
 import components from './components'
-import NetmodularSkinsClassics from 'netmodular-skins-classics'
+import haiweiSkinsClassics from 'haiwei-skins-classics'
 
 const admin = {
   module,
@@ -29,16 +29,16 @@ export default {
    * @param {object} skin 皮肤
    */
   registerSkin(skin) {
-    if (skin) NetModularUI.registerSkin(skin)
+    if (skin) haiweiUI.registerSkin(skin)
   },
   /**
    * @description 启动
    */
   async start(config) {
     // 设置接口信息
-    NetModularUI.configApi(config)
+    haiweiUI.configApi(config)
     // 使用皮肤
-    NetModularUI.registerSkin(NetmodularSkinsClassics)
+    haiweiUI.registerSkin(haiweiSkinsClassics)
 
     // 获取UI配置信息
     const UIConfig = await $api.admin.config.getUI()
@@ -62,7 +62,7 @@ export default {
     const t = setInterval(() => {
       if (window.loadProgress > 98) {
         clearInterval(t)
-        NetModularUI.use({ config: UIConfig, modules, actions })
+        haiweiUI.use({ config: UIConfig, modules, actions })
       }
     }, 20)
   }

package/src/routes/index.js

@@ -1,3 +1,3 @@
-import loadRoutes from 'netmodular-ui/packages/utils/load-routes'
+import loadRoutes from 'haiwei-ui/packages/utils/load-routes'
 const requireComponent = require.context('../views', true, /\page.js$/)
 export default loadRoutes(requireComponent.keys().map(fileName => requireComponent(fileName).route))

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

@@ -25,7 +25,7 @@
   </nm-form-dialog>
 </template>
 <script>
-import { mixins } from 'netmodular-ui'
+import { mixins } from 'haiwei-ui'
 
 // 接口
 const { add, edit, update } = $api.admin.account

package/src/views/account/index/index.vue

@@ -69,7 +69,7 @@
 </template>
 <script>
 import { mapState } from 'vuex'
-import { mixins } from 'netmodular-ui'
+import { mixins } from 'haiwei-ui'
 import page from './page'
 import cols from './cols'
 import SavePage from '../components/save'

package/src/views/auditInfo/components/details/index.vue

@@ -22,7 +22,7 @@
   </nm-drawer>
 </template>
 <script>
-import { mixins } from 'netmodular-ui'
+import { mixins } from 'haiwei-ui'
 
 // 接口
 const api = $api.admin.auditInfo

package/src/views/button/permission-bind/index.vue

@@ -4,7 +4,7 @@
   </nm-dialog>
 </template>
 <script>
-import { mixins } from 'netmodular-ui'
+import { mixins } from 'haiwei-ui'
 import BindPage from '../../permission/components/bind'
 
 // 接口

package/src/views/cache/index/index.vue

@@ -16,7 +16,7 @@
   </nm-container>
 </template>
 <script>
-import { mixins } from 'netmodular-ui'
+import { mixins } from 'haiwei-ui'
 import page from './page'
 import cols from './cols'