vue2-client 1.4.36 → 1.4.38

package/src/components/FilePreview/FilePreview.vue

@@ -0,0 +1,110 @@
+<template>
+  <div v-if="!pathError">
+    <!-- 文件 -->
+    <div v-if="!showImagePreview" class="preview-doc-container">
+      <a-spin size="large" :spinning="previewDocLoading" />
+      <iframe
+        v-show="!previewDocLoading"
+        :src="previewDocUrl"
+        width="100%"
+        height="100%"
+        frameborder="0"
+        @load="previewDocLoading = false" />
+    </div>
+    <!-- 图片 -->
+    <div v-else style="text-align: center">
+      <img :src="previewImageSrc" alt="image" class="preview-image">
+    </div>
+  </div>
+  <a-empty v-else description="文件路径为空" />
+</template>
+
+<script>
+import { Base64 } from 'js-base64'
+
+export default {
+  name: 'FilePreview',
+  props: {
+    path: {
+      type: String,
+      required: true
+    },
+    // 文件服务器
+    fileServer: {
+      type: String,
+      default: 'http://123.60.214.109:8406'
+    },
+    // 文档预览服务 API
+    previewDocService: {
+      type: String,
+      default: 'http://123.60.214.109:8012/onlinePreview?url='
+    }
+  },
+  data () {
+    return {
+      // 文档预览
+      previewDocLoading: true,
+      previewDocUrl: '',
+      // 图片预览
+      showImagePreview: false,
+      previewImageSrc: '',
+      // 路径是否为空
+      pathError: false
+    }
+  },
+  watch: {
+    // 路径改变时刷新预览
+    path: function () {
+      this.preview()
+    }
+  },
+  mounted () {
+    this.preview()
+  },
+  methods: {
+    preview () {
+      if (!this.path) {
+        this.pathError = true
+        return
+      }
+      this.pathError = false
+      if (this.isImage()) {
+        this.previewImageSrc = this.path
+        this.showImagePreview = true
+      } else {
+        const previewDocUrl = this.previewDocService + encodeURIComponent(Base64.encode(this.fileServer + this.path))
+        if (this.previewDocUrl !== previewDocUrl) {
+          this.previewDocLoading = true
+          this.previewDocUrl = previewDocUrl
+        }
+        this.showImagePreview = false
+      }
+    },
+    // 判断是否为图片
+    isImage () {
+      const index = this.path.lastIndexOf('.')
+      if (index === -1) {
+        return false
+      }
+      const suffix = this.path.substr(index + 1)
+      if (!suffix || !IMAGE_SUFFIX_ARRAY.includes(suffix)) {
+        return false
+      }
+      return true
+    }
+  }
+}
+// 图片后缀
+const IMAGE_SUFFIX_ARRAY = ['xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif', 'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif']
+</script>
+
+<style>
+.preview-doc-container {
+  height: calc(100vh - 60px);
+  padding-top: 20px;
+}
+.preview-image {
+  max-width: 100%;
+  max-height: 100vh;
+}
+</style>

package/src/components/FilePreview/index.js

@@ -0,0 +1,3 @@
+import FilePreview from '@vue2-client/components/FilePreview/FilePreview'
+
+export default FilePreview

package/src/components/NumberInfo/index.md

@@ -1,43 +1,43 @@
-# NumberInfo 数据文本
-
-常用在数据卡片中，用于突出展示某个业务数据。
-
-
-
-引用方式：
-
-```javascript
-import NumberInfo from '@vue2-client/components/NumberInfo'
-
-export default {
-    components: {
-        NumberInfo
-    }
-}
-```
-
-
-
-## 代码演示  [demo](https://pro.loacg.com/test/home)
-
-```html
-<number-info
-    :sub-title="() => { return 'Visits this week' }"
-    :total="12321"
-    status="up"
-    :sub-total="17.1"></number-info>
-```
-
-
-
-## API
-
-| 参数       | 说明               | 类型         | 默认值     |
-|----------|------------------|------------|---------|
-| title    | 标题               | ReactNode\ | string  | -
-| subTitle | 子标题              | ReactNode\ | string  | -
-| total    | 总量               | ReactNode\ | string  | -
-| subTotal | 子总量              | ReactNode\ | string  | -
-| status   | 增加状态             | 'up \      | down'   | -
-| theme    | 状态样式             | string     | 'light' |
-| gap      | 设置数字和描述之间的间距（像素） | number     | 8       |
+# NumberInfo 数据文本
+
+常用在数据卡片中，用于突出展示某个业务数据。
+
+
+
+引用方式：
+
+```javascript
+import NumberInfo from '@vue2-client/components/NumberInfo'
+
+export default {
+    components: {
+        NumberInfo
+    }
+}
+```
+
+
+
+## 代码演示  [demo](https://pro.loacg.com/test/home)
+
+```html
+<number-info
+    :sub-title="() => { return 'Visits this week' }"
+    :total="12321"
+    status="up"
+    :sub-total="17.1"></number-info>
+```
+
+
+
+## API
+
+| 参数       | 说明               | 类型         | 默认值     |
+|----------|------------------|------------|---------|
+| title    | 标题               | ReactNode\ | string  | -
+| subTitle | 子标题              | ReactNode\ | string  | -
+| total    | 总量               | ReactNode\ | string  | -
+| subTotal | 子总量              | ReactNode\ | string  | -
+| status   | 增加状态             | 'up \      | down'   | -
+| theme    | 状态样式             | string     | 'light' |
+| gap      | 设置数字和描述之间的间距（像素） | number     | 8       |