@ganwei-web/gw-base-components-plus 1.0.55 → 1.0.57

package/file-preview/filePreview.vue

@@ -1,96 +1,92 @@
 <template>
   <span class="file-preview">
     <span class="file-name">{{ showFileName ? filename : $t("login.framePro.label.attachment") }}</span>
-    <el-button v-if="isPreview" type="primary" link @click="handlePreview">
-      {{$t("login.framePro.label.preview")}}
-    </el-button>
-    <el-button v-if="isDownload" type="primary" link @click="handleDownload">
-      {{$t("login.framePro.label.download")}}
-    </el-button>
+    <span v-if="isPreview" class="file-action" @click="handlePreview">{{ $t("login.framePro.label.preview") }}</span>
+    <span v-if="isDownload" class="file-action" @click="handleDownload">{{ $t("login.framePro.label.download") }}</span>
   </span>
 </template>
 
-<script setup>
-import { computed } from 'vue'
+<script>
 import 'js-base64'
 
 const Base64 = window.Base64
 
-const props = defineProps({
-  // 文件地址
-  url: {
-    type: String,
-    required: true
+export default {
+  props: {
+    // 文件地址
+    url: {
+      type: String,
+      required: true
+    },
+    // 文件地址的域名前缀，未传入时默认使用当前站点 origin
+    fileDomain: {
+      type: String,
+      default: ''
+    },
+    // 是否显示预览按钮
+    isPreview: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示下载按钮
+    isDownload: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示文件名，false 时显示“附件”
+    showFileName: {
+      type: Boolean,
+      default: true
+    }
   },
-  // 文件地址的域名前缀，未传入时默认使用当前站点 origin
-  fileDomain: {
-    type: String,
-    default: ''
+  computed: {
+    // 从 url 中截取文件名
+    filename() {
+      const value = this.url || ''
+      const raw = value.substring(value.lastIndexOf('/') + 1).split('?')[0]
+      try {
+        return decodeURIComponent(raw)
+      } catch (e) {
+        return raw
+      }
+    }
   },
-  // 是否显示预览按钮
-  isPreview: {
-    type: Boolean,
-    default: true
-  },
-  // 是否显示下载按钮
-  isDownload: {
-    type: Boolean,
-    default: true
-  },
-  // 是否显示文件名，false 时显示“附件”
-  showFileName: {
-    type: Boolean,
-    default: true
-  }
-})
-
-// 从 url 中截取文件名
-const filename = computed(() => {
-  const value = props.url || ''
-  const raw = value.substring(value.lastIndexOf('/') + 1).split('?')[0]
-  try {
-    return decodeURIComponent(raw)
-  } catch (e) {
-    return raw
-  }
-})
-
-// 从 localStorage.webConfig 读取预览服务域名
-function getPreviewDomain() {
-  try {
-    const webConfig = JSON.parse(localStorage.getItem('webConfig') || '{}')
-    return webConfig?.httpConfig?.configPreviewDomain || ''
-  } catch (e) {
-    return ''
+  methods: {
+    // 从 localStorage.webConfig 读取预览服务域名
+    getPreviewDomain() {
+      try {
+        const webConfig = JSON.parse(localStorage.getItem('webConfig') || '{}')
+        return webConfig?.httpConfig?.configPreviewDomain || ''
+      } catch (e) {
+        return ''
+      }
+    },
+    // 预览：使用预览服务器打开文件
+    handlePreview() {
+      const domain = this.getPreviewDomain().replace(/\/+$/, '') || ''
+      if (!domain) {
+        console.warn('[file-preview] 未配置预览服务域名')
+        return
+      }
+      // 文件地址需带上域名：优先使用外部传入的域名，否则使用当前站点 origin
+      const fileDomain = (this.fileDomain || window.location.origin).replace(/\/+$/, '')
+      const fileUrl = /^https?:\/\//i.test(this.url)
+        ? this.url
+        : `${fileDomain}/${String(this.url).replace(/^\/+/, '')}`
+      const previewUrl = `${domain}/onlinePreview?url=${encodeURIComponent(Base64.encode(fileUrl))}`
+      window.open(previewUrl)
+    },
+    // 下载
+    handleDownload() {
+      const link = document.createElement('a')
+      link.href = this.url
+      link.download = this.filename
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    }
   }
 }
-
-// 预览：使用预览服务器打开文件
-function handlePreview() {
-  const domain = getPreviewDomain().replace(/\/+$/, '') || ""
-  if (!domain) {
-    console.warn('[file-preview] 未配置预览服务域名')
-    return
-  }
-  // 文件地址需带上域名：优先使用外部传入的域名，否则使用当前站点 origin
-  const fileDomain = (props.fileDomain || window.location.origin).replace(/\/+$/, '')
-  const fileUrl = /^https?:\/\//i.test(props.url)
-    ? props.url
-    : `${fileDomain}/${String(props.url).replace(/^\/+/, '')}`
-    console.log('fileUrl', fileUrl)
-  const previewUrl = `${domain}/onlinePreview?url=${encodeURIComponent(Base64.encode(fileUrl))}`
-  window.open(previewUrl)
-}
-
-// 下载
-function handleDownload() {
-  const link = document.createElement('a')
-  link.href = props.url
-  link.download = filename.value
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-}
 </script>
 
 <style scoped>
@@ -108,4 +104,13 @@ function handleDownload() {
   margin-right: 12px;
   line-height: 16px;
 }
+
+.file-action {
+  cursor: pointer;
+  color: var(--gw-color-primary);
+  white-space: nowrap;
+  &+.file-action {
+    margin-left: 6px;
+  }
+}
 </style>

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@ganwei-web/gw-base-components-plus",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "description": "components",
   "main": "./dist/index.es.js",
+  "dependencies": {
+    "js-base64": "^2.6.4"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },