v-viewer转化成cdn文件,优化包

2024-01-22 17:12:32 +08:00
parent 1aa2e264d7
commit ad0a91750c
46 changed files with 2283 additions and 1054 deletions
--- a/components/AiOkrTree/model/node.js
+++ b/components/AiOkrTree/model/node.js
@@ -1,4 +1,4 @@
-import { markNodeData, NODE_KEY } from './util';
+import {markNodeData} from './util';
 import objectAssign from './merge';

 const getPropertyFromData = function (node, prop) {
--- a/components/AiOkrTree/model/tree-store.js
+++ b/components/AiOkrTree/model/tree-store.js
@@ -1,5 +1,6 @@
 import Node from "./node";
-import { getNodeKey } from "./util";
+import {getNodeKey} from "./util";
+
 export default class TreeStore {
  constructor(options) {
    this.currentNode = null;
--- a/components/layout/AiDvDisplay/asset/displayItem-bg1.svg
+++ b/components/layout/AiDvDisplay/asset/displayItem-bg1.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <title>编组 3</title>
    <defs>
        <linearGradient x1="100%" y1="0%" x2="0%" y2="100%" id="linearGradient-1">
@@ -31,4 +31,4 @@
            </g>
        </g>
    </g>
-</svg>
+</svg>
--- a/components/layout/AiDvSummary/asset/summary3-big.svg
+++ b/components/layout/AiDvSummary/asset/summary3-big.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="280px" height="218px" viewBox="0 0 280 218" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="280px" height="218px" viewBox="0 0 280 218" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <title>编组备份 3</title>
    <defs>
        <linearGradient x1="100%" y1="37.8854658%" x2="1.48868591%" y2="37.8854658%" id="linearGradient-1">
@@ -55,4 +55,4 @@
            </g>
        </g>
    </g>
-</svg>
+</svg>
--- a/components/layout/AiDvSummary/asset/summary3-small.svg
+++ b/components/layout/AiDvSummary/asset/summary3-small.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="214px" height="164px" viewBox="0 0 214 164" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="214px" height="164px" viewBox="0 0 214 164" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <title>编组备份 4</title>
    <defs>
        <linearGradient x1="100%" y1="37.8854658%" x2="1.48868591%" y2="37.8854658%" id="linearGradient-1">
@@ -55,4 +55,4 @@
            </g>
        </g>
    </g>
-</svg>
+</svg>
--- a/components/layout/AiDvSummary/asset/summary8-bg.svg
+++ b/components/layout/AiDvSummary/asset/summary8-bg.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="480px" height="124px" viewBox="0 0 480 124" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="480px" height="124px" viewBox="0 0 480 124" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <title>矩形</title>
    <defs>
        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="219.598516%" gradientTransform="translate(0.500000,0.500000),scale(0.258333,1.000000),scale(1.000000,1.764370),translate(-0.500000,-0.500000)" id="radialGradient-1">
@@ -12,4 +12,4 @@
            <polygon id="矩形" points="56 214 504 214 520 226 520 326 504 338 56 338 40 326 40 226"></polygon>
        </g>
    </g>
-</svg>
+</svg>
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@jiaminghi/data-view": "^2.10.0",
    "@logicflow/core": "^1.2.1",
+    "ag-grid-community": "^31.0.2",
+    "ag-grid-vue": "^31.0.2",
    "bin-ace-editor": "^3.2.0",
    "dayjs": "^1.8.35",
    "dui": "^2.0.0",
@@ -61,7 +63,6 @@
    "sass": "~1.32.6",
    "sass-loader": "^7.3.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
-    "v-viewer": "^1.6.4",
    "vue": "^2.7.14",
    "vue-router": "^3.3.4",
    "vue-template-compiler": "^2.7.14",
--- a/packages/bigscreen/designer/components/datasourcePicker.vue
+++ b/packages/bigscreen/designer/components/datasourcePicker.vue
@@ -3,6 +3,8 @@
    <config-item label="数据类型">
      <ai-select v-model="source.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
    </config-item>
+    <config-item label="静态数据" v-if="source.dataType === 'staticData'">
+    </config-item>
    <div class="codeEditor" v-if="['htmlData','staticData'].includes(source.dataType)">
      <ai-dialog-btn :modal="false" dialog-title="编辑器" :customFooter="false"
                     @confirm="changeData(JSON.parse(content))" @open="content=contentstr">
--- a/packages/bigscreen/designer/components/tableEditor.vue
+++ b/packages/bigscreen/designer/components/tableEditor.vue
@@ -0,0 +1,23 @@
+<script>
+import {AgGridVue} from "ag-grid-vue";
+import "ag-grid-community/styles/ag-grid.min.css"
+import "ag-grid-community/styles/ag-theme-balham.min.css"
+
+export default {
+  name: "tableEditor",
+  props: {
+    tableData: {default: () => []},
+    configs: {default: () => []}
+  },
+  components: {AgGridVue},
+  computed: {
+    columns: v => v.configs
+  },
+}
+</script>
+
+<template>
+  <section class="tableEditor">
+    <ag-grid-vue class="ag-theme-balham" :columnDefs="columns" :rowData="tableData"/>
+  </section>
+</template>
--- a/packages/conv/AppVillageAlbum/components/List.vue
+++ b/packages/conv/AppVillageAlbum/components/List.vue
@@ -7,18 +7,18 @@
      <ai-search-bar>
        <template #left>
          <ai-select
-            v-model="search.type"
-            @change="search.current = 1, getList()"
-            placeholder="请选择相册主题"
-            :selectList="dict.getDict('villagePictureAlbumType')">
+              v-model="search.type"
+              @change="search.current = 1, getList()"
+              placeholder="请选择相册主题"
+              :selectList="dict.getDict('villagePictureAlbumType')">
          </ai-select>
          <el-date-picker
-            v-model="search.timeTag"
-            type="month"
-            size="small"
-            @change="search.current = 1, getList()"
-            value-format="yyyy-MM"
-            placeholder="请选择日期">
+              v-model="search.timeTag"
+              type="month"
+              size="small"
+              @change="search.current = 1, getList()"
+              value-format="yyyy-MM"
+              placeholder="请选择日期">
          </el-date-picker>
        </template>
      </ai-search-bar>
@@ -41,17 +41,17 @@
            </div>
            <div class="list-item__operate">
              <el-button
-                type="text"
-                icon="iconfont iconExported"
-                class="list-item__operate--item"
-                @click="downloadImg(item.url, dict.getLabel('villagePictureAlbumType', item.type))">
+                  type="text"
+                  icon="iconfont iconExported"
+                  class="list-item__operate--item"
+                  @click="downloadImg(item.url, dict.getLabel('villagePictureAlbumType', item.type))">
                下载
              </el-button>
              <el-button
-                @click="remove(item.id)"
-                type="text"
-                icon="iconfont iconDelete"
-                class="list-item__operate--item">
+                  @click="remove(item.id)"
+                  type="text"
+                  icon="iconfont iconDelete"
+                  class="list-item__operate--item">
                删除
              </el-button>
            </div>
@@ -66,473 +66,473 @@
 </template>

 <script>
-  import { mapState } from 'vuex'
-  import Viewer from 'v-viewer'
-  import Vue from 'vue'
-  Vue.use(Viewer)
+import {mapState} from 'vuex'

-  export default {
-    name: 'FormList',
-    props: {
-      instance: Function,
-      dict: Object,
-      areaId: String
-    },
+export default {
+  name: 'FormList',
+  props: {
+    instance: Function,
+    dict: Object,
+    areaId: String
+  },

-    data () {
-      return {
-        search: {
-          current: 1,
-          areaId: '',
-          size: 1000000,
-          type: '',
-          timeTag: ''
-        },
-        isShowAdd: false,
-        form: {
-        },
-        list: [],
-        total: 0,
-        loading: false,
-        id: '',
-        disabledLevel: 0
-      }
-    },
+  data() {
+    return {
+      search: {
+        current: 1,
+        areaId: '',
+        size: 1000000,
+        type: '',
+        timeTag: ''
+      },
+      isShowAdd: false,
+      form: {},
+      list: [],
+      total: 0,
+      loading: false,
+      id: '',
+      disabledLevel: 0
+    }
+  },

-    computed: {
-      ...mapState(['user']),
+  computed: {
+    ...mapState(['user']),

-      imgList () {
-        return this.list.map(v => v.url)
-      }
-    },
+    imgList() {
+      return this.list.map(v => v.url)
+    }
+  },

-    created () {
+  created() {
+    this.loading = true
+    this.disabledLevel = this.user.info.areaList.length - 1
+    this.search.areaId = this.user.info.areaId
+    this.dict.load(['villagePictureAlbumType']).then(() => {
+      this.getList()
+    })
+  },
+
+  methods: {
+    changeArea() {
      this.loading = true
-      this.disabledLevel = this.user.info.areaList.length - 1
-      this.search.areaId = this.user.info.areaId
-      this.dict.load(['villagePictureAlbumType']).then(() => {
+      this.search.current = 1
+
+      this.$nextTick(() => {
        this.getList()
      })
    },

-    methods: {
-      changeArea () {
-        this.loading = true
-        this.search.current = 1
+    prevImg(index) {
+      const viewer = this.$el.querySelector('.images').$viewer
+      viewer.view(index)
+    },

-        this.$nextTick(() => {
-          this.getList()
-        })
-      },
-
-      prevImg (index) {
-        const viewer = this.$el.querySelector('.images').$viewer
-        viewer.view(index)
-      },
-
-      getList () {
-        this.instance.post(`/app/appvillagepicturealbum/list`, null, {
-          params: {
-            ...this.search
-          }
-        }).then(res => {
-          if (res.code == 0) {
-            this.list = res.data.records
-            this.total = res.data.total
-            this.loading = false
-          } else {
-            this.loading = false
-          }
-        }).catch(() => {
-          this.loading = false
-        })
-      },
-
-      remove (id) {
-        this.$confirm('确定删除该相片？').then(() => {
-          this.instance.post(`/app/appvillagepicturealbum/delete?ids=${id}`).then(res => {
-            if (res.code == 0) {
-              this.$message.success('删除成功！')
-              this.getList()
-            }
-          })
-        })
-      },
-
-      downloadImg (url, name) {
-        let image = new Image()
-        image.setAttribute('crossOrigin', 'anonymous')
-        image.onload = function() {
-          let canvas = document.createElement('canvas')
-          canvas.width = image.width
-          canvas.height = image.height
-          let context = canvas.getContext('2d')
-          context.drawImage(image, 0, 0, image.width, image.height)
-          let url = canvas.toDataURL("image/png")
-          let a = document.createElement("a")
-          let event = new MouseEvent("click")
-          a.download = name
-          a.href = url
-          a.dispatchEvent(event)
+    getList() {
+      this.instance.post(`/app/appvillagepicturealbum/list`, null, {
+        params: {
+          ...this.search
        }
-        image.src = url
-      },
+      }).then(res => {
+        if (res.code == 0) {
+          this.list = res.data.records
+          this.total = res.data.total
+          this.loading = false
+        } else {
+          this.loading = false
+        }
+      }).catch(() => {
+        this.loading = false
+      })
+    },

-      toStop (id) {
-        this.$confirm('确定停止该表单？').then(() => {
-          this.instance.post(`/app/appquestionnairetemplate/stopRelease?id=${id}`).then(res => {
-            if (res.code === 0) {
-              this.$message.success('停止成功!')
-              this.getList()
+    remove(id) {
+      this.$confirm('确定删除该相片？').then(() => {
+        this.instance.post(`/app/appvillagepicturealbum/delete?ids=${id}`).then(res => {
+          if (res.code == 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    },
+
+    downloadImg(url, name) {
+      let image = new Image()
+      image.setAttribute('crossOrigin', 'anonymous')
+      image.onload = function () {
+        let canvas = document.createElement('canvas')
+        canvas.width = image.width
+        canvas.height = image.height
+        let context = canvas.getContext('2d')
+        context.drawImage(image, 0, 0, image.width, image.height)
+        let url = canvas.toDataURL("image/png")
+        let a = document.createElement("a")
+        let event = new MouseEvent("click")
+        a.download = name
+        a.href = url
+        a.dispatchEvent(event)
+      }
+      image.src = url
+    },
+
+    toStop(id) {
+      this.$confirm('确定停止该表单？').then(() => {
+        this.instance.post(`/app/appquestionnairetemplate/stopRelease?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.$message.success('停止成功!')
+            this.getList()
+          }
+        })
+      })
+    },
+
+    showShare(info, isPreview) {
+      this.loading = true
+      this.info = info
+
+      this.instance.post(`/app/appquestionnairetemplate/queryQrCode?id=${info.id}`).then(res => {
+        if (res.code == 0) {
+          this.info.linkUrl = res.data.linkUrl
+          this.info.qrCodeUrl = res.data.qrCodeUrl
+
+          this.$nextTick(() => {
+            if (isPreview) {
+              this.isShowPreview = true
+              this.info.linkUrl = `${res.data.linkUrl}&preview=true#form`
+            } else {
+              this.isShowSuccess = true
            }
          })
-        })
-      },
+        }

-      showShare (info, isPreview) {
-        this.loading = true
-        this.info = info
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },

-        this.instance.post(`/app/appquestionnairetemplate/queryQrCode?id=${info.id}`).then(res => {
-          if (res.code == 0) {
-            this.info.linkUrl = res.data.linkUrl
-            this.info.qrCodeUrl = res.data.qrCodeUrl
-
-            this.$nextTick(() => {
-              if (isPreview) {
-                this.isShowPreview = true
-                this.info.linkUrl = `${res.data.linkUrl}&preview=true#form`
-              } else {
-                this.isShowSuccess = true
-              }
-            })
-          }
-
-          this.loading = false
-        }).catch(() => {
-          this.loading = false
-        })
-      },
-
-      toAdd (id) {
-        this.$emit('change', {
-          type: 'add',
-          params: {
-            id
-          }
-        })
-      }
+    toAdd(id) {
+      this.$emit('change', {
+        type: 'add',
+        params: {
+          id
+        }
+      })
    }
  }
+}
 </script>

 <style scoped lang="scss">
-  .list {
-    :deep( .ai-list__content ){
-      width: 100%;
-      .ai-list__content--right {
-        width: 100%!important;
+.list {
+  :deep( .ai-list__content ) {
+    width: 100%;

-        .ai-list__content--right-wrapper {
-          padding: 0!important;
-          background: transparent!important;
-          box-shadow: none!important;
-        }
+    .ai-list__content--right {
+      width: 100% !important;
+
+      .ai-list__content--right-wrapper {
+        padding: 0 !important;
+        background: transparent !important;
+        box-shadow: none !important;
      }
    }
-    :deep(.el-pager ){
-      li.active + li {
-        border-left: 1px solid #D0D4DC;
-      }
+  }
+
+  :deep(.el-pager ) {
+    li.active + li {
+      border-left: 1px solid #D0D4DC;
+    }
+  }
+
+  .newPagination {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 64px;
+    padding: 0 40px !important;
+
+    .el-pagination {
+      width: 100%;
+      padding: 0;
    }

-    .newPagination {
-      width: 100%;
+    :deep( .el-pager li.active ) {
+      background-color: #fff !important;
+      color: #2266FF !important;
+      border-color: #2266FF;
+    }
+
+    :deep( .el-pager li ) {
+      background-color: #fff;
+      border: solid 1px #d0d4dc;
+      margin-left: 8px;
+      border-radius: 4px !important;
+      line-height: 26px !important;
+    }
+
+    .paginationPre {
      display: flex;
+      height: 28px;
+      line-height: 1;
+      font-size: 14px;
+      font-weight: normal;
      align-items: center;
-      height: 64px;
-      padding: 0 40px!important;

-      .el-pagination {
-        width: 100%;
-        padding: 0;
-      }
-      :deep( .el-pager li.active ){
-        background-color: #fff !important;
-        color: #2266FF !important;
-        border-color: #2266FF;
-      }
-
-      :deep( .el-pager li ){
-        background-color: #fff;
-        border: solid 1px #d0d4dc;
-        margin-left: 8px;
-        border-radius: 4px !important;
-        line-height: 26px !important;
-      }
-
-      .paginationPre {
+      .pagination-btns {
        display: flex;
-        height: 28px;
-        line-height: 1;
-        font-size: 14px;
-        font-weight: normal;
        align-items: center;
+        gap: 8px;
+        color: #2266FF !important;

-        .pagination-btns {
-          display: flex;
-          align-items: center;
-          gap: 8px;
+        :deep( span), :deep( div ) {
+          font-size: 12px;
+          cursor: pointer;
          color: #2266FF !important;

-          :deep( span), :deep( div ){
-            font-size: 12px;
-            cursor: pointer;
-            color: #2266FF !important;
-
-            &:hover {
-              opacity: 0.8;
-            }
+          &:hover {
+            opacity: 0.8;
          }
        }
+      }

-        .paginationPre-total {
-          font-size: 12px;
-          color: #555;
+      .paginationPre-total {
+        font-size: 12px;
+        color: #555;

-          label {
-            padding: 0 2px;
-            font-weight: 700;
-          }
+        label {
+          padding: 0 2px;
+          font-weight: 700;
        }
+      }

-        & > * + * {
-          margin-left: 24px;
-        }
+      & > * + * {
+        margin-left: 24px;
+      }

-        :deep( .el-pagination button), .el-pagination span:not([class*=suffix]) {
+      :deep( .el-pagination button), .el-pagination span:not([class*=suffix]) {
+        line-height: 1 !important;
+      }
+
+      :deep(.el-checkbox ) {
+        padding-left: 14px;
+        display: flex;
+        align-items: center;
+
+        .el-checkbox__input, .el-checkbox__inner {
+          width: 14px;
+          height: 14px;
+          min-width: 0 !important;
          line-height: 1 !important;
        }

-        :deep(.el-checkbox ){
-          padding-left: 14px;
-          display: flex;
-          align-items: center;
-
-          .el-checkbox__input, .el-checkbox__inner {
-            width: 14px;
-            height: 14px;
-            min-width: 0 !important;
-            line-height: 1 !important;
-          }
-
-          .el-checkbox__label {
-            font-size: 12px;
-            color: #222222;
-            height: auto !important;
-            line-height: 1 !important;
-            padding-left: 3px !important;
-          }
-        }
-      }
-    }
-
-    .form-list__list {
-      display: flex;
-      flex-wrap: wrap;
-      margin-top: 8px;
-
-      .list-item {
-        display: flex;
-        position: relative;
-        flex-direction: column;
-        justify-content: space-between;
-        margin-bottom: 12px;
-        padding: 18px 16px 16px;
-
-        .list-item__img {
-          width: 100%;
-          height: 140px;
-          cursor: pointer;
-
-          img {
-            width: 100%;
-            height: 140px;
-            object-fit: none;
-          }
-        }
-
-        &:hover {
-          .list-item__operate {
-            display: flex;
-          }
-        }
-
-        .list-item__operate {
-          display: none;
-          align-items: center;
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          z-index: 1;
-          width: 100%;
-          height: 52px;
-          text-align: center;
-          background: #F7F8FA;
-
-          & > div {
-            flex: 1;
-          }
-
-          :deep( .el-button ){
-            margin-left: 0;
-            padding: 0;
-            i {
-              color: #8899BB;
-              font-size: 14px;
-              transition: all 0.3s;
-            }
-
-            .el-button + .el-button {
-              margin-left: 0;
-            }
-
-            span {
-              margin-left: 0;
-              color: #555555;
-              font-size: 12px;
-              transition: all 0.3s;
-            }
-
-            &:hover {
-              &.is-disabled {
-                i {
-                  color: #8899BB;
-                }
-
-                span {
-                  color: #555555;
-                }
-              }
-            }
-          }
-
-          .list-item__operate--item {
-            flex: 1;
-
-            &:hover {
-              :deep( i), :deep( span ){
-                color: #2266FF;
-              }
-            }
-          }
-        }
-
-        .list-item__bottom {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          color: #888888;
+        .el-checkbox__label {
          font-size: 12px;
-
-          i {
-            font-style: normal;
-          }
-
-          .left {
-            display: flex;
-            align-items: center;
-
-            .tag {
-              height: 26px;
-              line-height: 26px;
-              margin-right: 8px;
-              padding: 0 6px;
-              border-radius: 4px;
-              background: #42D784;
-              color: #fff;
-            }
-          }
-        }
-
-        p {
-          line-height: 22px;
-          color: #333333;
-          font-size: 14px;
-          font-weight: 700;
-        }
-
-        .list-item__user {
-          display: flex;
-          align-items: center;
-          margin-top: 12px;
-          color: #888888;
-          font-size: 12px;
-          line-height: 20px;
-
-          & > div:first-child {
-            margin-right: 8px;
-          }
-        }
-
-        .list-item__title {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          margin-bottom: 14px;
-
-          h2 {
-            color: #2EA222;
-            font-size: 12px;
-          }
-
-          span {
-            width: 64px;
-            height: 24px;
-            line-height: 24px;
-            text-align: center;
-            border-radius: 4px;
-            font-size: 12px;
-          }
-        }
-      }
-
-      .list-add {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        padding: 0;
-        cursor: pointer;
-
-        span {
-          font-size: 32px;
-          color: #8899bb;
-        }
-
-        h2 {
-          color: #555555;
-          font-size: 12px;
-        }
-
-        &:hover {
-          opacity: 0.6;
-        }
-      }
-
-      & > div {
-        width: calc((100% - 60px) / 4);
-        height: 216px;
-        margin: 0 20px 20px 0;
-        background: #FFFFFF;
-        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
-        border-radius: 2px;
-
-        &:nth-of-type(4n) {
-          margin-right: 0;
+          color: #222222;
+          height: auto !important;
+          line-height: 1 !important;
+          padding-left: 3px !important;
        }
      }
    }
  }
+
+  .form-list__list {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 8px;
+
+    .list-item {
+      display: flex;
+      position: relative;
+      flex-direction: column;
+      justify-content: space-between;
+      margin-bottom: 12px;
+      padding: 18px 16px 16px;
+
+      .list-item__img {
+        width: 100%;
+        height: 140px;
+        cursor: pointer;
+
+        img {
+          width: 100%;
+          height: 140px;
+          object-fit: none;
+        }
+      }
+
+      &:hover {
+        .list-item__operate {
+          display: flex;
+        }
+      }
+
+      .list-item__operate {
+        display: none;
+        align-items: center;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        z-index: 1;
+        width: 100%;
+        height: 52px;
+        text-align: center;
+        background: #F7F8FA;
+
+        & > div {
+          flex: 1;
+        }
+
+        :deep( .el-button ) {
+          margin-left: 0;
+          padding: 0;
+
+          i {
+            color: #8899BB;
+            font-size: 14px;
+            transition: all 0.3s;
+          }
+
+          .el-button + .el-button {
+            margin-left: 0;
+          }
+
+          span {
+            margin-left: 0;
+            color: #555555;
+            font-size: 12px;
+            transition: all 0.3s;
+          }
+
+          &:hover {
+            &.is-disabled {
+              i {
+                color: #8899BB;
+              }
+
+              span {
+                color: #555555;
+              }
+            }
+          }
+        }
+
+        .list-item__operate--item {
+          flex: 1;
+
+          &:hover {
+            :deep( i), :deep( span ) {
+              color: #2266FF;
+            }
+          }
+        }
+      }
+
+      .list-item__bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: #888888;
+        font-size: 12px;
+
+        i {
+          font-style: normal;
+        }
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          .tag {
+            height: 26px;
+            line-height: 26px;
+            margin-right: 8px;
+            padding: 0 6px;
+            border-radius: 4px;
+            background: #42D784;
+            color: #fff;
+          }
+        }
+      }
+
+      p {
+        line-height: 22px;
+        color: #333333;
+        font-size: 14px;
+        font-weight: 700;
+      }
+
+      .list-item__user {
+        display: flex;
+        align-items: center;
+        margin-top: 12px;
+        color: #888888;
+        font-size: 12px;
+        line-height: 20px;
+
+        & > div:first-child {
+          margin-right: 8px;
+        }
+      }
+
+      .list-item__title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 14px;
+
+        h2 {
+          color: #2EA222;
+          font-size: 12px;
+        }
+
+        span {
+          width: 64px;
+          height: 24px;
+          line-height: 24px;
+          text-align: center;
+          border-radius: 4px;
+          font-size: 12px;
+        }
+      }
+    }
+
+    .list-add {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      padding: 0;
+      cursor: pointer;
+
+      span {
+        font-size: 32px;
+        color: #8899bb;
+      }
+
+      h2 {
+        color: #555555;
+        font-size: 12px;
+      }
+
+      &:hover {
+        opacity: 0.6;
+      }
+    }
+
+    & > div {
+      width: calc((100% - 60px) / 4);
+      height: 216px;
+      margin: 0 20px 20px 0;
+      background: #FFFFFF;
+      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
+      border-radius: 2px;
+
+      &:nth-of-type(4n) {
+        margin-right: 0;
+      }
+    }
+  }
+}
 </style>
--- a/packages/party/AppMeetingChinaunion/components/meetingDetail.vue
+++ b/packages/party/AppMeetingChinaunion/components/meetingDetail.vue
@@ -47,28 +47,28 @@
                        </span>
                      </span>
                <span class="value" v-else>-</span></el-form-item>
-<!--              <ai-title title="附件" isShowBottomBorder>-->
-<!--                <template #rightBtn>-->
-<!--                  <el-button type="text" icon="iconfont iconDownload" @click="downLoadAll">下载全部</el-button>-->
-<!--                </template>-->
-<!--              </ai-title>-->
-<!--              <el-form-item label-width="0">-->
-<!--                <div v-if="obj.annex.length">-->
-<!--                  <div class="flie" v-for="(item, index) in obj.annex" :key="index"-->
-<!--                       @click="downFile(item)">-->
-<!--                    <p>-->
-<!--                      <svg aria-hidden="true" style="width:24px;height:24px;">-->
-<!--                        <use xlink:href="#iconAppendix_UNdownload"></use>-->
-<!--                      </svg>-->
-<!--                      <span>{{ item.name }}</span>-->
-<!--                    </p>-->
-<!--                    <span style="color:#999;">{{ (item.size / 1024).toFixed(2) + "KB" }}-->
-<!--                            <span class="iconfont iconDownload" style="color:#5088FF"></span>-->
-<!--                        </span>-->
-<!--                  </div>-->
-<!--                </div>-->
-<!--                <div class="no-data" style="height:160px;width:100%;" v-else></div>-->
-<!--              </el-form-item>-->
+              <!--              <ai-title title="附件" isShowBottomBorder>-->
+              <!--                <template #rightBtn>-->
+              <!--                  <el-button type="text" icon="iconfont iconDownload" @click="downLoadAll">下载全部</el-button>-->
+              <!--                </template>-->
+              <!--              </ai-title>-->
+              <!--              <el-form-item label-width="0">-->
+              <!--                <div v-if="obj.annex.length">-->
+              <!--                  <div class="flie" v-for="(item, index) in obj.annex" :key="index"-->
+              <!--                       @click="downFile(item)">-->
+              <!--                    <p>-->
+              <!--                      <svg aria-hidden="true" style="width:24px;height:24px;">-->
+              <!--                        <use xlink:href="#iconAppendix_UNdownload"></use>-->
+              <!--                      </svg>-->
+              <!--                      <span>{{ item.name }}</span>-->
+              <!--                    </p>-->
+              <!--                    <span style="color:#999;">{{ (item.size / 1024).toFixed(2) + "KB" }}-->
+              <!--                            <span class="iconfont iconDownload" style="color:#5088FF"></span>-->
+              <!--                        </span>-->
+              <!--                  </div>-->
+              <!--                </div>-->
+              <!--                <div class="no-data" style="height:160px;width:100%;" v-else></div>-->
+              <!--              </el-form-item>-->
              <ai-title title="人员信息" isShowBottomBorder/>
              <el-form-item label="与会组织">{{ arrLabel(obj.appThreeMeetingOrganizationList, 'name') }}</el-form-item>
              <el-form-item label="主持人">{{ arrLabel(obj.hostList, 'userName') }}</el-form-item>
@@ -213,12 +213,8 @@
 </template>

 <script>
-import Vue from 'vue'
 import {mapState} from "vuex";
 import moment from 'dayjs';
-import Viewer from 'v-viewer'
-
-Vue.use(Viewer)

 export default {
  name: "meetingDetail",
@@ -272,7 +268,7 @@ export default {
    voteConfigs() {
      return [
        {label: "人员姓名", prop: "userName", align: 'center'},
-        {label: "投票选项", prop: "myVote", format: v => v ? (v === '1' ? '同意' : '不同意') : '-' },
+        {label: "投票选项", prop: "myVote", format: v => v ? (v === '1' ? '同意' : '不同意') : '-'},
        {label: "投票时间", prop: "voteTime"},
      ]
    },
@@ -430,7 +426,7 @@ export default {
    },
    //获取会议详请
    getDetailInfo() {
-      this.detail.id&& this.instance.post(`/app/appthreemeetinginfo/queryDetailById?id=${this.detail.id}`).then(res => {
+      this.detail.id && this.instance.post(`/app/appthreemeetinginfo/queryDetailById?id=${this.detail.id}`).then(res => {
        if (res?.data) {
          res.data.annex = JSON.parse(res.data.annex);
          res.data.meetingClassification = res.data.meetingClassification.split(',');
@@ -564,7 +560,7 @@ export default {
 .addThreeMeeting {
  height: 100%;

-  :deep( .el-form ){
+  :deep( .el-form ) {
    .ailist-title {
      padding: 0;
      margin-bottom: 8px;
@@ -579,7 +575,7 @@ export default {
    }
  }

-  :deep(.ai-detail__content--wrapper ){
+  :deep(.ai-detail__content--wrapper ) {
    .el-form {
      width: 1000px;
      margin: 0 auto;
@@ -591,11 +587,11 @@ export default {
    margin-bottom: 8px;
  }

-  :deep( .el-dialog__body ){
+  :deep( .el-dialog__body ) {
    padding-top: 16px !important;
  }

-  :deep( .iconfont ){
+  :deep( .iconfont ) {
    color: #2266FF;
    cursor: pointer;
  }
@@ -680,7 +676,7 @@ export default {
    }
  }

-  :deep( .el-form-item__label ){
+  :deep( .el-form-item__label ) {
    color: #999;
  }

@@ -711,7 +707,7 @@ export default {
    width: 100%;
  }

-  :deep( .AiEchart ){
+  :deep( .AiEchart ) {
    height: 160px;
  }
 }
--- a/packages/publicity/AppHotTopic/components/hotDetail.vue
+++ b/packages/publicity/AppHotTopic/components/hotDetail.vue
@@ -9,13 +9,13 @@
        <ai-card title="标题信息">
          <template slot="content">
            <ai-wrapper label-width="70px" :columnsNumber="1">
-              <ai-info-item label="话题标题">{{detailObj.title}}</ai-info-item>
+              <ai-info-item label="话题标题">{{ detailObj.title }}</ai-info-item>
              <ai-info-item label="关键字" v-if="detailObj.keyWords">
                <el-tag
-                  v-for="tag in detailObj.keyWords.split(',')"
-                  :key="tag"
-                  effect="plain">
-                  {{tag}}
+                    v-for="tag in detailObj.keyWords.split(',')"
+                    :key="tag"
+                    effect="plain">
+                  {{ tag }}
                </el-tag>
              </ai-info-item>
              <ai-info-item label="封面图片">
@@ -26,14 +26,14 @@
          </template>
        </ai-card>
        <ai-card class="card" v-for="(item,index) in detailObj.contents" :key="index">
-          <template slot="title">{{item.question}}</template>
-          <template slot="right">话题来源：{{item.questionSource}}</template>
+          <template slot="title">{{ item.question }}</template>
+          <template slot="right">话题来源：{{ item.questionSource }}</template>
          <template slot="content">
            <div class="wrap">
              <header>
-                <b>{{item.answerSource}}</b>&nbsp;&nbsp;回复
+                <b>{{ item.answerSource }}</b>&nbsp;&nbsp;回复
              </header>
-              <p>{{item.answer}}</p>
+              <p>{{ item.answer }}</p>
              <div v-viewer>
                <img :src="p.url"
                     v-for="(p,q) in item.files" :key="q" alt="">
@@ -47,113 +47,109 @@
 </template>

 <script>
-  import Viewer from 'v-viewer' ;
-  import Vue from 'vue' ;
-
-  Vue.use(Viewer);
-  export default {
-    name: "hotDetail",
-    label: "热点详情",
-    props: {
-      instance: Function,
-      dict: Object,
-      permissions: Function,
-      areaId: String,
-      detail: Object
-    },
-    data() {
-      return {
-        detailObj: {},
-      }
-    },
-    methods: {
-      getDetail() {
-        this.instance.post(`/app/apphotsubject/detail`, null, {
-          params: {id: this.detail.id}
-        }).then(res => {
-          if (res && res.data) {
-            this.detailObj = res.data
-          }
-        })
-      },
-    },
-    created() {
-      this.getDetail()
+export default {
+  name: "hotDetail",
+  label: "热点详情",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    areaId: String,
+    detail: Object
+  },
+  data() {
+    return {
+      detailObj: {},
    }
+  },
+  methods: {
+    getDetail() {
+      this.instance.post(`/app/apphotsubject/detail`, null, {
+        params: {id: this.detail.id}
+      }).then(res => {
+        if (res && res.data) {
+          this.detailObj = res.data
+        }
+      })
+    },
+  },
+  created() {
+    this.getDetail()
  }
+}
 </script>

 <style lang="scss" scoped>
-  .hotDetail {
-    height: 100%;
-    overflow: hidden;
+.hotDetail {
+  height: 100%;
+  overflow: hidden;

-    .card {
-      :deep( .aibar ){
-        height: 94px !important;
-        flex-direction: column;
-        align-items: flex-start;
-        margin-bottom: 0px !important;
-        padding: 16px !important;
+  .card {
+    :deep( .aibar ) {
+      height: 94px !important;
+      flex-direction: column;
+      align-items: flex-start;
+      margin-bottom: 0px !important;
+      padding: 16px !important;

-        & > div {
-          line-height: 24px;
+      & > div {
+        line-height: 24px;

-          &:last-child {
-            font-size: 14px;
-            color: #888888;
-          }
-        }
-
-      }
-
-      :deep( .ai-card__body ){
-        padding: 12px 20px 22px !important;
-      }
-
-      .wrap {
-        background-color: #F5F6F9;
-        box-sizing: border-box;
-        padding: 16px;
-
-        header {
-          height: 40px;
-          font-size: 16px;
-          color: #222222;
-          line-height: 24px;
-          display: flex;
-          align-items: center;
-          border-bottom: 1px solid #EEEEEE;
-
-          b {
-            color: #2266FF;
-          }
-        }
-
-        p {
-          margin-top: 16px;
-          font-size: 16px;
-          color: #222222;
-          line-height: 32px;
-          text-indent: 2em;
+        &:last-child {
+          font-size: 14px;
+          color: #888888;
        }
      }
+
    }

-    :deep( .el-tag){
-      background: #F3F4F7;
-      border-radius: 2px;
-      color: #222222;
-      border: 1px solid #D0D4DC;
-      margin-right: 8px;
+    :deep( .ai-card__body ) {
+      padding: 12px 20px 22px !important;
    }

-    img {
-      width: 160px;
-      height: 160px;
-      border-radius: 2px;
-      margin-top: 16px;
-      margin-right: 8px;
+    .wrap {
+      background-color: #F5F6F9;
+      box-sizing: border-box;
+      padding: 16px;
+
+      header {
+        height: 40px;
+        font-size: 16px;
+        color: #222222;
+        line-height: 24px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #EEEEEE;
+
+        b {
+          color: #2266FF;
+        }
+      }
+
+      p {
+        margin-top: 16px;
+        font-size: 16px;
+        color: #222222;
+        line-height: 32px;
+        text-indent: 2em;
+      }
    }
  }
+
+  :deep( .el-tag) {
+    background: #F3F4F7;
+    border-radius: 2px;
+    color: #222222;
+    border: 1px solid #D0D4DC;
+    margin-right: 8px;
+  }
+
+  img {
+    width: 160px;
+    height: 160px;
+    border-radius: 2px;
+    margin-top: 16px;
+    margin-right: 8px;
+  }
+}
 </style>
--- a/packages/publicity/AppPressCenter/components/newsDetail.vue
+++ b/packages/publicity/AppPressCenter/components/newsDetail.vue
@@ -31,10 +31,6 @@
 </template>

 <script>
-import Viewer from 'v-viewer';
-import Vue from 'vue';
-
-Vue.use(Viewer);
 export default {
  name: "newsDetail",
  props: {
--- a/packages/publicity/AppPressCenter/components/videoDetail.vue
+++ b/packages/publicity/AppPressCenter/components/videoDetail.vue
@@ -29,11 +29,8 @@
 </template>

 <script>
-import Viewer from 'v-viewer';
-
 export default {
  name: "videoDetail",
-  components: {Viewer},
  props: {
    instance: Function,
    dict: Object,
--- a/packages/work/processManagement/approvalManage/components/approvalDetail.vue
+++ b/packages/work/processManagement/approvalManage/components/approvalDetail.vue
@@ -326,10 +326,6 @@
 <script>
 import moment from 'dayjs'
 import {mapState} from "vuex";
-import Viewer from 'v-viewer'
-import Vue from 'vue'
-
-Vue.use(Viewer)

 export default {
  name: "approvalDetail",
--- a/packages/work/processManagement/massesMessage/components/messageDetail.vue
+++ b/packages/work/processManagement/massesMessage/components/messageDetail.vue
@@ -89,10 +89,6 @@
 </template>
 <script>
 import { mapState } from 'vuex'
-// import 'viewerjs/dist/viewer.css'
-import Viewer from 'v-viewer'
-import Vue from 'vue'
-Vue.use(Viewer)

 export default {
  name: 'messageDetail',
--- a/packages/xbot/AppSensitiveXbot/components/Detail.vue
+++ b/packages/xbot/AppSensitiveXbot/components/Detail.vue
@@ -45,7 +45,7 @@
          <h2 v-for="(item, index) in msgTypeList" :key="index" :class="msgType == index ? 'tab-active' : ''" @click="msgTypeClick(index)">{{item.name}}</h2>
        </div>
        <div class="search-content">
-          <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd" 
+          <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
          </el-date-picker>
          <el-input size="small" placeholder="输入搜索内容" v-model="searchMsg" clearable
@@ -90,7 +90,7 @@

                <video style="width: 300px; object-fit: fill;" controls :src="item.sdkFileUrl" v-if="item.msgType == 'video'"></video>

-                <ai-file-list v-if="item.msgType == 'file'" 
+                <ai-file-list v-if="item.msgType == 'file'"
                  :fileList="item.files"
                  :fileOps="{ name: 'name', size: 'fileSizeStr' }"
                ></ai-file-list>
@@ -170,16 +170,11 @@

 <script>
  import { mapState } from 'vuex'
-  import Viewer from 'v-viewer'
  import AMapLoader from '@amap/amap-jsapi-loader'
-  import Vue from 'vue'
-  Vue.use(Viewer);
-
  import html2canvas from "html2canvas";
  import jsPDF from "jspdf";
-
  import { Loading } from "element-ui";
-  
+
  const PdfLoader = (ele, pdfFileName) => {
    let loadingInstance = Loading.service({ fullscreen: true, text: '正在导出（请勿刷新/关闭页面）' });
    ele.style.fontFamily = "宋体";
@@ -447,7 +442,7 @@
        this.getMsgList()
      },
      getKeyWordList() {
-        var url = this.listInfo.seq ? `/app/appsessionarchiveinfo/listByKeywordRecord?seq=${this.listInfo.seq}` 
+        var url = this.listInfo.seq ? `/app/appsessionarchiveinfo/listByKeywordRecord?seq=${this.listInfo.seq}`
                  : `/app/appsessionarchiveinfo/listByKeywordRecord?msgId=${this.params.msgId}`
        this.instance.post(url, null, {
          params: {
@@ -545,9 +540,9 @@
                var height = document.querySelector('.content-right-info').scrollHeight - preveHeight
                document.querySelector('.content-right-info').scrollTop = height
              }
-              
+
            })
-            
+
          }
          this.isLoading = false
        }).catch(() => {
@@ -606,7 +601,7 @@
                var height = document.querySelector('.content-right-info').scrollHeight - preveHeight
                document.querySelector('.content-right-info').scrollTop = height
              }
-              
+
            })
          }
          this.isLoading = false
@@ -655,7 +650,7 @@
      },
      openLink(row) {
        document.write('<a href="" target="new"></a>');
-        window.open(row.linkUrl, "new"); 
+        window.open(row.linkUrl, "new");
      },
      cancel () {
        this.$emit('change', {
@@ -878,7 +873,7 @@
            max-width: calc(100% - 144px);
            position: relative;
            background-color: #f3f6f9;
-            
+
            span {
              width: 0px;
              height: 0px;
@@ -1000,7 +995,7 @@
        }
      }
      .item-left {
-        .item-content-flex { 
+        .item-content-flex {
          .user-img {
            margin: 0 20px 0 0;
          }
@@ -1014,7 +1009,7 @@
            margin-left: 16px;
          }
        }
-        
+
      }
      .item-right {
        width: 100%;
@@ -1042,7 +1037,7 @@
            text-align: right;
          }
        }
-        
+
      }
    }
    .addressBook-left__list--wrapper::-webkit-scrollbar,
--- a/packages/xbot/AppSessionArchiveXbot/components/Detail.vue
+++ b/packages/xbot/AppSessionArchiveXbot/components/Detail.vue
@@ -289,14 +289,9 @@

 <script>
 import { mapState } from "vuex";
-import Viewer from "v-viewer";
 import AMapLoader from "@amap/amap-jsapi-loader";
-import Vue from "vue";
-Vue.use(Viewer);
-
 import html2canvas from "html2canvas";
 import jsPDF from "jspdf";
-
 import { Loading } from "element-ui";

 const PdfLoader = (ele, pdfFileName) => {
@@ -631,7 +626,7 @@ export default {
        var dataURL = canvas.toDataURL("image/"+ext);
        return dataURL;
    },
-    
+
    initMap(lng, lat, zoom, mapId) {
      AMapLoader.load({
        key: "54a02a43d9828a8f9cd4f26fe281e74e",
--- a/project/biaopin/AppIntegratingOrder/components/ResidentList.vue
+++ b/project/biaopin/AppIntegratingOrder/components/ResidentList.vue
@@ -113,9 +113,6 @@
 </template>

 <script>
-  import Viewer from 'v-viewer'
-  import Vue from 'vue'
-  Vue.use(Viewer)
  export default {
    name: 'ResidentList',

--- a/project/biaopin/AppIntegratingSupermarket/components/GoodsList.vue
+++ b/project/biaopin/AppIntegratingSupermarket/components/GoodsList.vue
@@ -79,9 +79,6 @@
 </template>

 <script>
-  import Viewer from 'v-viewer'
-  import Vue from 'vue'
-  Vue.use(Viewer)
  export default {
    name: 'GoodsList',

--- a/project/fengdu/app/AppIntegratingOrder/components/ResidentList.vue
+++ b/project/fengdu/app/AppIntegratingOrder/components/ResidentList.vue
@@ -4,74 +4,74 @@
      <ai-search-bar>
        <template slot="left">
          <ai-select
-            v-model="search.goodsType"
-            @change="(search.current = 1), getList()"
-            placeholder="请选择商品类型"
-            :selectList="dict.getDict('integralSGType')">
+              v-model="search.goodsType"
+              @change="(search.current = 1), getList()"
+              placeholder="请选择商品类型"
+              :selectList="dict.getDict('integralSGType')">
          </ai-select>
          <ai-select
-            v-model="search.status"
-            @change="(search.current = 1), getList()"
-            placeholder="请选择订单状态"
-            :selectList="dict.getDict('integralSGOStatus')">
+              v-model="search.status"
+              @change="(search.current = 1), getList()"
+              placeholder="请选择订单状态"
+              :selectList="dict.getDict('integralSGOStatus')">
          </ai-select>
          <el-date-picker
-            v-model="search.startTime"
-            type="date"
-            size="small"
-            value-format="yyyy-MM-dd"
-            placeholder="选择订单开始日期"
-            @change="search.current = 1, getList()">
+              v-model="search.startTime"
+              type="date"
+              size="small"
+              value-format="yyyy-MM-dd"
+              placeholder="选择订单开始日期"
+              @change="search.current = 1, getList()">
          </el-date-picker>
          <el-date-picker
-            v-model="search.endTime"
-            type="date"
-            size="small"
-            value-format="yyyy-MM-dd"
-            placeholder="选择订单结束日期"
-            @change="search.current = 1, getList()">
+              v-model="search.endTime"
+              type="date"
+              size="small"
+              value-format="yyyy-MM-dd"
+              placeholder="选择订单结束日期"
+              @change="search.current = 1, getList()">
          </el-date-picker>
          <ai-select
-            v-model="search.agentOrder"
-            @change="(search.current = 1), getList()"
-            placeholder="是否代兑换"
-            :selectList="dict.getDict('yesOrNo')">
+              v-model="search.agentOrder"
+              @change="(search.current = 1), getList()"
+              placeholder="是否代兑换"
+              :selectList="dict.getDict('yesOrNo')">
          </ai-select>
          <ai-download
-            v-if="permissions('app_appintegralsupermarketorder_export')"
-            :instance="instance"
-            url="/app/appintegralsupermarketorder/export"
-            :params="search"
-            fileName="订单列表"
-            :disabled="tableData.length == 0">
+              v-if="permissions('app_appintegralsupermarketorder_export')"
+              :instance="instance"
+              url="/app/appintegralsupermarketorder/export"
+              :params="search"
+              fileName="订单列表"
+              :disabled="tableData.length == 0">
          </ai-download>
        </template>
        <template slot="right">
          <el-input
-            v-model="search.goodsTitle"
-            class="search-input"
-            size="small"
-            v-throttle="() => {search.current = 1, getList()}"
-            placeholder="请输入商品名称、兑换人"
-            clearable
-            @clear="search.current = 1, search.goodsTitle = '', getList()"
-            suffix-icon="iconfont iconSearch">
+              v-model="search.goodsTitle"
+              class="search-input"
+              size="small"
+              v-throttle="() => {search.current = 1, getList()}"
+              placeholder="请输入商品名称、兑换人"
+              clearable
+              @clear="search.current = 1, search.goodsTitle = '', getList()"
+              suffix-icon="iconfont iconSearch">
          </el-input>
        </template>
      </ai-search-bar>
      <ai-table
-        style="margin-top: 8px;"
-        :tableData="tableData"
-        :col-configs="colConfigs"
-        :total="total"
-        :current.sync="search.current"
-        :size.sync="search.size"
-        @getList="getList">
+          style="margin-top: 8px;"
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="total"
+          :current.sync="search.current"
+          :size.sync="search.size"
+          @getList="getList">
        <el-table-column
-          label="商品"
-          slot="goods"
-          align="left"
-          width="350">
+            label="商品"
+            slot="goods"
+            align="left"
+            width="350">
          <template v-slot="{ row }">
            <div class="goods">
              <div class="img-content">
@@ -79,7 +79,7 @@

                <!-- <span class="type type0" v-if="row.goodsType === '0'">积分兑换</span>
                <span class="type type1" v-else>京东低价商品</span> -->
-                <span class="type" :class="`type${row.typeText}`">{{dict.getLabel('integralSGTypeText', row.typeText)}}</span>
+                <span class="type" :class="`type${row.typeText}`">{{ dict.getLabel('integralSGTypeText', row.typeText) }}</span>
              </div>
              <p>{{ row.goodsTitle }}</p>
            </div>
@@ -96,12 +96,12 @@
        </el-table-column>
      </ai-table>
      <ai-dialog
-        title="订单核销"
-        :visible.sync="isShow"
-        :destroyOnClose="true"
-        width="650px"
-        @onConfirm="onConfirm"
-        @close="form.verificationCode = '', id = ''">
+          title="订单核销"
+          :visible.sync="isShow"
+          :destroyOnClose="true"
+          width="650px"
+          @onConfirm="onConfirm"
+          @close="form.verificationCode = '', id = ''">
        <el-form style="height: 200px" class="ai-form" ref="form" :model="form" label-width="120px">
          <el-form-item label="核销码" style="width: 100%" prop="verificationCode" :rules="[{required: true, message: '请输入核销码', trigger: 'blur'}]">
            <el-input v-model="form.verificationCode" placeholder="请输入核销码" size="small"></el-input>
@@ -113,153 +113,154 @@
 </template>

 <script>
-  import Viewer from 'v-viewer'
-  import Vue from 'vue'
-  Vue.use(Viewer)
-  export default {
-    name: 'ResidentList',
+export default {
+  name: 'ResidentList',

-    props: {
-      instance: Function,
-      dict: Object,
-      permissions: Function,
-      areaId: String,
-    },
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    areaId: String,
+  },

-    data() {
-      return {
-        search: {
-          goodsType: '',
-          goodsTitle: '',
-          current: 1,
-          status: '',
-          size: 10,
-          startTime: '',
-          type: 1,
-          endTime: '',
-          agentOrder: ''
-        },
-        isShow: false,
-        form: {
-          verificationCode: ''
-        },
-        id: '',
-        total: 0,
-        tableData: [],
-        colConfigs: [
-          { prop: 'goodsSerialNumber',  label: '商品ID', align: 'left' },
-          { slot: 'goods', align: 'center' },
-          { prop: 'goodsType',  label: '商品类型', align: 'center', format: v => this.dict.getLabel('integralSGType', v) },
-          { prop: 'quantity',  label: '数量', align: 'center', format: v => `${v}` },
-          { prop: 'usedIntegral',  label: '消耗积分', align: 'center' },
-          { prop: 'payMoney',  label: '兑换后再付', align: 'center' },
-          { prop: 'integralUserName',  label: '兑换人', align: 'center' },
-          { prop: 'agentOrder',  label: '是否代兑换', align: 'center', format: v => this.dict.getLabel('yesOrNo', v) },
-          { prop: 'createTime', width: 150,  label: '创建时间', align: 'center' },
-          { prop: 'status',  label: '状态', align: 'center', format: v => this.dict.getLabel('integralSGOStatus', v) }
-        ]
-      }
-    },
+  data() {
+    return {
+      search: {
+        goodsType: '',
+        goodsTitle: '',
+        current: 1,
+        status: '',
+        size: 10,
+        startTime: '',
+        type: 1,
+        endTime: '',
+        agentOrder: ''
+      },
+      isShow: false,
+      form: {
+        verificationCode: ''
+      },
+      id: '',
+      total: 0,
+      tableData: [],
+      colConfigs: [
+        {prop: 'goodsSerialNumber', label: '商品ID', align: 'left'},
+        {slot: 'goods', align: 'center'},
+        {prop: 'goodsType', label: '商品类型', align: 'center', format: v => this.dict.getLabel('integralSGType', v)},
+        {prop: 'quantity', label: '数量', align: 'center', format: v => `${v}`},
+        {prop: 'usedIntegral', label: '消耗积分', align: 'center'},
+        {prop: 'payMoney', label: '兑换后再付', align: 'center'},
+        {prop: 'integralUserName', label: '兑换人', align: 'center'},
+        {prop: 'agentOrder', label: '是否代兑换', align: 'center', format: v => this.dict.getLabel('yesOrNo', v)},
+        {prop: 'createTime', width: 150, label: '创建时间', align: 'center'},
+        {prop: 'status', label: '状态', align: 'center', format: v => this.dict.getLabel('integralSGOStatus', v)}
+      ]
+    }
+  },

-    computed: {
-    },
+  computed: {},

-    created () {
-      this.dict.load('integralSGType', 'integralSGOStatus', 'yesOrNo', 'integralSGTypeText').then(() => {
-        this.getList()
+  created() {
+    this.dict.load('integralSGType', 'integralSGOStatus', 'yesOrNo', 'integralSGTypeText').then(() => {
+      this.getList()
+    })
+  },
+
+  methods: {
+    getList() {
+      this.instance.post(`/app/appintegralsupermarketorder/list`, null, {
+        params: {
+          ...this.search,
+          girdCode: this.areaId
+        }
+      }).then((res) => {
+        if (res.code == 0) {
+          res.data.records.map((item) => {
+            item.typeText = item.goodsType == 0 ? 0 : 1
+          })
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
      })
    },

-    methods: {
-      getList () {
-        this.instance.post(`/app/appintegralsupermarketorder/list`, null, {
-          params: {
-            ...this.search,
-            girdCode: this.areaId
-          }
-        }).then((res) => {
-          if (res.code == 0) {
-            res.data.records.map((item) => {
-              item.typeText = item.goodsType == 0 ? 0 : 1
-            })
-            this.tableData = res.data.records
-            this.total = res.data.total
-          }
-        })
-      },
-
-      onConfirm () {
-        this.$refs.form.validate((valid)=> {
-          if(valid) {
-            this.instance.post(`/app/appintegralsupermarketorder/examine`, null, {
-              params: {
-                ...this.form,
-                id: this.id
-              }
-            }).then(res => {
-              if(res.code == 0) {
-                this.isShow = false
-                this.getList()
-                this.$message.success('核销成功')
-              }
-            })
-          }
-        })
-      },
-
-      toDetail (id) {
-        this.$emit('change', {
-          type: 'ResidentDetail',
-          params: {
-            id
-          }
-        })
-      },
-
-      cancel (id) {
-        this.$confirm('确定取消该订单吗？').then(() => {
-          this.instance.post(`/app/appintegralsupermarketorder/cancel?id=${id}`).then(res => {
+    onConfirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.instance.post(`/app/appintegralsupermarketorder/examine`, null, {
+            params: {
+              ...this.form,
+              id: this.id
+            }
+          }).then(res => {
            if (res.code == 0) {
-              this.$message.success('取消成功！')
+              this.isShow = false
              this.getList()
+              this.$message.success('核销成功')
            }
          })
+        }
+      })
+    },
+
+    toDetail(id) {
+      this.$emit('change', {
+        type: 'ResidentDetail',
+        params: {
+          id
+        }
+      })
+    },
+
+    cancel(id) {
+      this.$confirm('确定取消该订单吗？').then(() => {
+        this.instance.post(`/app/appintegralsupermarketorder/cancel?id=${id}`).then(res => {
+          if (res.code == 0) {
+            this.$message.success('取消成功！')
+            this.getList()
+          }
        })
-      }
+      })
    }
  }
+}
 </script>

 <style lang="scss" scoped>
-  .GoodsList {
-    .goods {
-      display: flex;
-      align-items: center;
-    }
-    .img-content {
-      position: relative;
-      margin-right: 8px;
-      img {
-        width: 120px;
-        height: 120px;
-        cursor: pointer;
-      }
-    }
-    .type {
-      position: absolute;
-      top: 0;
-      left: 0;
-      font-size: 12px;
+.GoodsList {
+  .goods {
+    display: flex;
+    align-items: center;
+  }
+
+  .img-content {
+    position: relative;
+    margin-right: 8px;
+
+    img {
      width: 120px;
-      text-align: center;
-      color: #fff;
-      z-index: 999;
-    }
-    .type1 {
-      background-color: #E64E39;
-    }
-    .type0 {
-      background-color: #FF6900;
+      height: 120px;
+      cursor: pointer;
    }
  }
+
+  .type {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 12px;
+    width: 120px;
+    text-align: center;
+    color: #fff;
+    z-index: 999;
+  }
+
+  .type1 {
+    background-color: #E64E39;
+  }
+
+  .type0 {
+    background-color: #FF6900;
+  }
+}
 </style>
--- a/project/fengdu/app/AppIntegratingSupermarket/components/GoodsList.vue
+++ b/project/fengdu/app/AppIntegratingSupermarket/components/GoodsList.vue
@@ -5,44 +5,44 @@
        <template slot="left">
          <el-button type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
          <ai-select
-            v-model="search.type"
-            @change="(search.current = 1), getList()"
-            placeholder="请选择商品类型"
-            :selectList="dict.getDict('integralSGType')">
+              v-model="search.type"
+              @change="(search.current = 1), getList()"
+              placeholder="请选择商品类型"
+              :selectList="dict.getDict('integralSGType')">
          </ai-select>
          <ai-select
-            v-model="search.status"
-            @change="(search.current = 1), getList()"
-            placeholder="请选择类型"
-            :selectList="dict.getDict('integralSGStatus')">
+              v-model="search.status"
+              @change="(search.current = 1), getList()"
+              placeholder="请选择类型"
+              :selectList="dict.getDict('integralSGStatus')">
          </ai-select>
        </template>
        <template slot="right">
          <el-input
-            v-model="search.title"
-            class="search-input"
-            size="small"
-            v-throttle="() => {search.current = 1, getList()}"
-            placeholder="请输入商品名称"
-            clearable
-            @clear="search.current = 1, search.title = '', getList()"
-            suffix-icon="iconfont iconSearch">
+              v-model="search.title"
+              class="search-input"
+              size="small"
+              v-throttle="() => {search.current = 1, getList()}"
+              placeholder="请输入商品名称"
+              clearable
+              @clear="search.current = 1, search.title = '', getList()"
+              suffix-icon="iconfont iconSearch">
          </el-input>
        </template>
      </ai-search-bar>
      <ai-table
-        style="margin-top: 8px;"
-        :tableData="tableData"
-        :col-configs="colConfigs"
-        :total="total"
-        :current.sync="search.current"
-        :size.sync="search.size"
-        @getList="getList">
+          style="margin-top: 8px;"
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="total"
+          :current.sync="search.current"
+          :size.sync="search.size"
+          @getList="getList">
        <el-table-column
-          label="商品"
-          slot="goods"
-          align="left"
-          width="450">
+            label="商品"
+            slot="goods"
+            align="left"
+            width="450">
          <template v-slot="{ row }">
            <div class="goods">
              <!-- <ai-uploader class="upload"
@@ -56,7 +56,7 @@
                <img :src="row.picUrl" alt="" v-viewer>
                <!-- <span class="type type0" v-if="row.type === '0'">积分兑换</span>
                <span class="type type1" v-else>京东低价商品</span> -->
-                <span class="type" :class="`type${row.typeText}`">{{dict.getLabel('integralSGTypeText', row.typeText)}}</span>
+                <span class="type" :class="`type${row.typeText}`">{{ dict.getLabel('integralSGTypeText', row.typeText) }}</span>
              </div>

              <p>{{ row.title }}</p>
@@ -79,151 +79,151 @@
 </template>

 <script>
-  import Viewer from 'v-viewer'
-  import Vue from 'vue'
-  Vue.use(Viewer)
-  export default {
-    name: 'GoodsList',
+export default {
+  name: 'GoodsList',
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },

-    props: {
-      instance: Function,
-      dict: Object,
-      permissions: Function
-    },
+  data() {
+    return {
+      search: {
+        type: '',
+        title: '',
+        current: 1,
+        status: '',
+        size: 10,
+      },
+      total: 0,
+      tableData: [],
+      colConfigs: [
+        {prop: 'serialNumber', label: '商品ID', align: 'left'},
+        {slot: 'goods', align: 'center'},
+        {prop: 'type', label: '商品类型', align: 'center', format: v => this.dict.getLabel('integralSGType', v)},
+        {prop: 'onlineTime', label: '上架时间', align: 'center'},
+        {prop: 'status', label: '状态', align: 'center', format: v => this.dict.getLabel('integralSGStatus', v)}
+      ],
+      userList: []
+    }
+  },

-    data() {
-      return {
-        search: {
-          type: '',
-          title: '',
-          current: 1,
-          status: '',
-          size: 10,
-        },
-        total: 0,
-        tableData: [],
-        colConfigs: [
-          { prop: 'serialNumber',  label: '商品ID', align: 'left' },
-          { slot: 'goods', align: 'center' },
-          { prop: 'type',  label: '商品类型', align: 'center', format: v => this.dict.getLabel('integralSGType', v) },
-          { prop: 'onlineTime',  label: '上架时间', align: 'center' },
-          { prop: 'status',  label: '状态', align: 'center', format: v => this.dict.getLabel('integralSGStatus', v) }
-        ],
-        userList: []
-      }
-    },
+  computed: {},

-    computed: {
-    },
+  created() {
+    this.dict.load('integralSGType', 'integralSGStatus', 'integralSGTypeText').then(() => {
+      this.getList()
+    })
+  },

-    created () {
-      this.dict.load('integralSGType', 'integralSGStatus', 'integralSGTypeText').then(() => {
-        this.getList()
+  methods: {
+    getList() {
+      this.instance.post(`/app/appintegralsupermarketgoods/list`, null, {
+        params: {
+          ...this.search
+        }
+      }).then((res) => {
+        if (res.code == 0) {
+          res.data.records.map((item) => {
+            item.typeText = item.type == 0 ? 0 : 1
+          })
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
      })
    },

-    methods: {
-      getList () {
-        this.instance.post(`/app/appintegralsupermarketgoods/list`, null, {
-          params: {
-            ...this.search
-          }
-        }).then((res) => {
+    onAreaChange() {
+      this.search.current = 1
+
+      this.$nextTick(() => {
+        this.getTableData()
+      })
+    },
+
+    toAdd(id) {
+      this.$emit('change', {
+        type: 'AddGoods',
+        params: {
+          id: id || ''
+        }
+      })
+    },
+
+    copy(url) {
+      let oInput = document.createElement('input')
+      oInput.value = url
+      document.body.appendChild(oInput)
+      oInput.select()
+      document.execCommand('Copy')
+      this.$message({
+        message: '已复制',
+        type: 'success'
+      })
+      oInput.remove()
+    },
+
+    remove(id) {
+      this.$confirm('确定删除该商品吗？').then(() => {
+        this.instance.post(`/app/appintegralsupermarketgoods/delete?id=${id}`).then(res => {
          if (res.code == 0) {
-            res.data.records.map((item) => {
-              item.typeText = item.type == 0 ? 0 : 1
-            })
-            this.tableData = res.data.records
-            this.total = res.data.total
+            this.$message.success('删除成功！')
+            this.getList()
          }
        })
-      },
+      })
+    },

-      onAreaChange () {
-        this.search.current = 1
-
-        this.$nextTick(() => {
-          this.getTableData()
-        })
-      },
-
-      toAdd (id) {
-        this.$emit('change', {
-          type: 'AddGoods',
-          params: {
-            id: id || ''
+    changeStatus(row) {
+      this.$confirm(`确定${row.status === '0' ? '上架' : '下架'}该商品？`).then(() => {
+        this.instance.post(`/app/appintegralsupermarketgoods/online?id=${row.id}`).then(res => {
+          if (res.code == 0) {
+            this.$message.success(`${row.status === '0' ? '上架' : '下架'}成功`)
+            this.getList()
          }
        })
-      },
-
-      copy (url) {
-        let oInput = document.createElement('input')
-        oInput.value = url
-        document.body.appendChild(oInput)
-        oInput.select()
-        document.execCommand('Copy')
-        this.$message({
-          message: '已复制',
-          type: 'success'
-        })
-        oInput.remove()
-      },
-
-      remove (id) {
-        this.$confirm('确定删除该商品吗？').then(() => {
-          this.instance.post(`/app/appintegralsupermarketgoods/delete?id=${id}`).then(res => {
-            if (res.code == 0) {
-              this.$message.success('删除成功！')
-              this.getList()
-            }
-          })
-        })
-      },
-
-      changeStatus (row) {
-        this.$confirm(`确定${row.status === '0' ? '上架' : '下架'}该商品？`).then(() => {
-          this.instance.post(`/app/appintegralsupermarketgoods/online?id=${row.id}`).then(res => {
-            if (res.code == 0) {
-              this.$message.success(`${row.status === '0' ? '上架' : '下架'}成功`)
-              this.getList()
-            }
-          })
-        })
-      }
+      })
    }
  }
+}
 </script>

 <style lang="scss" scoped>
-  .GoodsList {
-    .goods {
-      display: flex;
-      align-items: center;
-    }
-    .img-content {
-      position: relative;
-      margin-right: 8px;
-      img {
-        width: 120px;
-        height: 120px;
-        cursor: pointer;
-      }
-    }
-    .type {
-      position: absolute;
-      top: 0;
-      left: 0;
+.GoodsList {
+  .goods {
+    display: flex;
+    align-items: center;
+  }
+
+  .img-content {
+    position: relative;
+    margin-right: 8px;
+
+    img {
      width: 120px;
-      text-align: center;
-      color: #fff;
-      z-index: 999;
-      font-size: 12px;
-    }
-    .type1 {
-      background-color: #E64E39;
-    }
-    .type0 {
-      background-color: #FF6900;
+      height: 120px;
+      cursor: pointer;
    }
  }
+
+  .type {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 120px;
+    text-align: center;
+    color: #fff;
+    z-index: 999;
+    font-size: 12px;
+  }
+
+  .type1 {
+    background-color: #E64E39;
+  }
+
+  .type0 {
+    background-color: #FF6900;
+  }
+}
 </style>
--- a/project/lulong/AppIntegratingOrder/components/ResidentList.vue
+++ b/project/lulong/AppIntegratingOrder/components/ResidentList.vue
@@ -113,9 +113,6 @@
 </template>

 <script>
-  import Viewer from 'v-viewer'
-  import Vue from 'vue'
-  Vue.use(Viewer)
  export default {
    name: 'ResidentList',

--- a/project/lulong/AppIntegratingSupermarket/components/GoodsList.vue
+++ b/project/lulong/AppIntegratingSupermarket/components/GoodsList.vue
@@ -79,9 +79,6 @@
 </template>

 <script>
-  import Viewer from 'v-viewer'
-  import Vue from 'vue'
-  Vue.use(Viewer)
  export default {
    name: 'GoodsList',

--- a/project/pidu/app/AppSensitive/components/Detail.vue
+++ b/project/pidu/app/AppSensitive/components/Detail.vue
@@ -45,7 +45,7 @@
          <h2 v-for="(item, index) in msgTypeList" :key="index" :class="msgType == index ? 'tab-active' : ''" @click="msgTypeClick(index)">{{item.name}}</h2>
        </div>
        <div class="search-content">
-          <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd" 
+          <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
          </el-date-picker>
          <el-input size="small" placeholder="输入搜索内容" v-model="searchMsg" clearable
@@ -90,7 +90,7 @@

                <video style="width: 300px; object-fit: fill;" controls :src="item.sdkFileUrl" v-if="item.msgType == 'video'"></video>

-                <ai-file-list v-if="item.msgType == 'file'" 
+                <ai-file-list v-if="item.msgType == 'file'"
                  :fileList="item.files"
                  :fileOps="{ name: 'name', size: 'fileSizeStr' }"
                ></ai-file-list>
@@ -170,16 +170,11 @@

 <script>
  import { mapState } from 'vuex'
-  import Viewer from 'v-viewer'
  import AMapLoader from '@amap/amap-jsapi-loader'
-  import Vue from 'vue'
-  Vue.use(Viewer);
-
  import html2canvas from "html2canvas";
  import jsPDF from "jspdf";
-
  import { Loading } from "element-ui";
-  
+
  const PdfLoader = (ele, pdfFileName) => {
    let loadingInstance = Loading.service({ fullscreen: true, text: '正在导出（请勿刷新/关闭页面）' });
    ele.style.fontFamily = "宋体";
@@ -447,7 +442,7 @@
        this.getMsgList()
      },
      getKeyWordList() {
-        var url = this.listInfo.seq ? `/app/appsessionarchiveinfo/listByKeywordRecord?seq=${this.listInfo.seq}` 
+        var url = this.listInfo.seq ? `/app/appsessionarchiveinfo/listByKeywordRecord?seq=${this.listInfo.seq}`
                  : `/app/appsessionarchiveinfo/listByKeywordRecord?msgId=${this.params.msgId}`
        this.instance.post(url, null, {
          params: {
@@ -546,9 +541,9 @@
                var height = document.querySelector('.content-right-info').scrollHeight - preveHeight
                document.querySelector('.content-right-info').scrollTop = height
              }
-              
+
            })
-            
+
          }
          this.isLoading = false
        }).catch(() => {
@@ -607,7 +602,7 @@
                var height = document.querySelector('.content-right-info').scrollHeight - preveHeight
                document.querySelector('.content-right-info').scrollTop = height
              }
-              
+
            })
          }
          this.isLoading = false
@@ -656,7 +651,7 @@
      },
      openLink(row) {
        document.write('<a href="" target="new"></a>');
-        window.open(row.linkUrl, "new"); 
+        window.open(row.linkUrl, "new");
      },
      cancel () {
        this.$emit('change', {
@@ -879,7 +874,7 @@
            max-width: calc(100% - 144px);
            position: relative;
            background-color: #f3f6f9;
-            
+
            span {
              width: 0px;
              height: 0px;
@@ -1001,7 +996,7 @@
        }
      }
      .item-left {
-        .item-content-flex { 
+        .item-content-flex {
          .user-img {
            margin: 0 20px 0 0;
          }
@@ -1015,7 +1010,7 @@
            margin-left: 16px;
          }
        }
-        
+
      }
      .item-right {
        width: 100%;
@@ -1043,7 +1038,7 @@
            text-align: right;
          }
        }
-        
+
      }
    }
    .addressBook-left__list--wrapper::-webkit-scrollbar,
--- a/project/pidu/app/AppSessionArchive/components/Detail.vue
+++ b/project/pidu/app/AppSessionArchive/components/Detail.vue
@@ -289,14 +289,9 @@

 <script>
 import { mapState } from "vuex";
-import Viewer from "v-viewer";
 import AMapLoader from "@amap/amap-jsapi-loader";
-import Vue from "vue";
-Vue.use(Viewer);
-
 import html2canvas from "html2canvas";
 import jsPDF from "jspdf";
-
 import { Loading } from "element-ui";

 const PdfLoader = (ele, pdfFileName) => {
@@ -636,7 +631,7 @@ export default {
        var dataURL = canvas.toDataURL("image/"+ext);
        return dataURL;
    },
-    
+
    initMap(lng, lat, zoom, mapId) {
      AMapLoader.load({
        key: "54a02a43d9828a8f9cd4f26fe281e74e",
--- a/project/pingchang/apps/AppCheckpointManage/components/List.vue
+++ b/project/pingchang/apps/AppCheckpointManage/components/List.vue
@@ -55,9 +55,6 @@
 </template>

 <script>
-  import Viewer from 'v-viewer'
-  import Vue from 'vue'
-  Vue.use(Viewer)
  export default {
    name: 'List',

--- a/project/shuzipingchang/app/AppIntegratingOrder/components/ResidentList.vue
+++ b/project/shuzipingchang/app/AppIntegratingOrder/components/ResidentList.vue
@@ -111,9 +111,6 @@
 </template>

 <script>
-  import Viewer from 'v-viewer'
-  import Vue from 'vue'
-  Vue.use(Viewer)
  export default {
    name: 'ResidentList',

--- a/project/shuzipingchang/app/AppIntegratingSupermarket/components/GoodsList.vue
+++ b/project/shuzipingchang/app/AppIntegratingSupermarket/components/GoodsList.vue
@@ -78,9 +78,6 @@
 </template>

 <script>
-  import Viewer from 'v-viewer'
-  import Vue from 'vue'
-  Vue.use(Viewer)
  export default {
    name: 'GoodsList',

--- a/project/xiushan/apps/AppNewsCenter/components/newsDetail.vue
+++ b/project/xiushan/apps/AppNewsCenter/components/newsDetail.vue
@@ -31,10 +31,6 @@
 </template>

 <script>
-import Viewer from 'v-viewer';
-import Vue from 'vue';
-
-Vue.use(Viewer);
 export default {
  name: "newsDetail",
  props: {
--- a/project/xiushan/apps/AppNewsCenter/components/videoDetail.vue
+++ b/project/xiushan/apps/AppNewsCenter/components/videoDetail.vue
@@ -27,11 +27,8 @@
 </template>

 <script>
-import Viewer from 'v-viewer';
-
 export default {
  name: "videoDetail",
-  components: {Viewer},
  props: {
    instance: Function,
    dict: Object,
--- a/project/xiushan/apps/processManagement/approvalManage/components/approvalDetail.vue
+++ b/project/xiushan/apps/processManagement/approvalManage/components/approvalDetail.vue
@@ -300,13 +300,9 @@
 <script>
 import moment from 'dayjs'
 import {mapState} from "vuex";
-import Viewer from 'v-viewer'
-import Vue from 'vue'
 import PersonCreditReport from "../../../../components/personCreditReport";
 import EnterpriseDialog from "../../../../components/enterpriseDialog";

-Vue.use(Viewer)
-
 export default {
  name: "approvalDetail",
  components: {EnterpriseDialog, PersonCreditReport},
--- a/project/xiushan/apps/processManagement/massesMessage/components/messageDetail.vue
+++ b/project/xiushan/apps/processManagement/massesMessage/components/messageDetail.vue
@@ -89,10 +89,6 @@
 </template>
 <script>
 import { mapState } from 'vuex'
-// import 'viewerjs/dist/viewer.css'
-import Viewer from 'v-viewer'
-import Vue from 'vue'
-Vue.use(Viewer)

 export default {
  name: 'messageDetail',
--- a/public/cdn/viewerjs/1.11.6/viewer.css
+++ b/public/cdn/viewerjs/1.11.6/viewer.css
@@ -0,0 +1,446 @@
+/*!
+ * Viewer.js v1.11.6
+ * https://fengyuanchen.github.io/viewerjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2023-09-17T03:16:35.830Z
+ */
+
+.viewer-zoom-in::before, .viewer-zoom-out::before, .viewer-one-to-one::before, .viewer-reset::before, .viewer-prev::before, .viewer-play::before, .viewer-next::before, .viewer-rotate-left::before, .viewer-rotate-right::before, .viewer-flip-horizontal::before, .viewer-flip-vertical::before, .viewer-fullscreen::before, .viewer-fullscreen-exit::before, .viewer-close::before {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC');
+    background-repeat: no-repeat;
+    background-size: 280px;
+    color: transparent;
+    display: block;
+    font-size: 0;
+    height: 20px;
+    line-height: 0;
+    width: 20px;
+  }
+
+.viewer-zoom-in::before {
+  background-position: 0 0;
+  content: 'Zoom In';
+}
+
+.viewer-zoom-out::before {
+  background-position: -20px 0;
+  content: 'Zoom Out';
+}
+
+.viewer-one-to-one::before {
+  background-position: -40px 0;
+  content: 'One to One';
+}
+
+.viewer-reset::before {
+  background-position: -60px 0;
+  content: 'Reset';
+}
+
+.viewer-prev::before {
+  background-position: -80px 0;
+  content: 'Previous';
+}
+
+.viewer-play::before {
+  background-position: -100px 0;
+  content: 'Play';
+}
+
+.viewer-next::before {
+  background-position: -120px 0;
+  content: 'Next';
+}
+
+.viewer-rotate-left::before {
+  background-position: -140px 0;
+  content: 'Rotate Left';
+}
+
+.viewer-rotate-right::before {
+  background-position: -160px 0;
+  content: 'Rotate Right';
+}
+
+.viewer-flip-horizontal::before {
+  background-position: -180px 0;
+  content: 'Flip Horizontal';
+}
+
+.viewer-flip-vertical::before {
+  background-position: -200px 0;
+  content: 'Flip Vertical';
+}
+
+.viewer-fullscreen::before {
+  background-position: -220px 0;
+  content: 'Enter Full Screen';
+}
+
+.viewer-fullscreen-exit::before {
+  background-position: -240px 0;
+  content: 'Exit Full Screen';
+}
+
+.viewer-close::before {
+  background-position: -260px 0;
+  content: 'Close';
+}
+
+.viewer-container {
+  bottom: 0;
+  direction: ltr;
+  font-size: 0;
+  left: 0;
+  line-height: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  -webkit-tap-highlight-color: transparent;
+  top: 0;
+  -ms-touch-action: none;
+      touch-action: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.viewer-container::-moz-selection, .viewer-container *::-moz-selection {
+    background-color: transparent;
+  }
+
+.viewer-container::selection,
+  .viewer-container *::selection {
+    background-color: transparent;
+  }
+
+.viewer-container:focus {
+    outline: 0;
+  }
+
+.viewer-container img {
+    display: block;
+    height: auto;
+    max-height: none !important;
+    max-width: none !important;
+    min-height: 0 !important;
+    min-width: 0 !important;
+    width: 100%;
+  }
+
+.viewer-canvas {
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.viewer-canvas > img {
+    height: auto;
+    margin: 15px auto;
+    max-width: 90% !important;
+    width: auto;
+  }
+
+.viewer-footer {
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  text-align: center;
+}
+
+.viewer-navbar {
+  background-color: rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+
+.viewer-list {
+  box-sizing: content-box;
+  height: 50px;
+  margin: 0;
+  overflow: hidden;
+  padding: 1px 0;
+}
+
+.viewer-list > li {
+    color: transparent;
+    cursor: pointer;
+    float: left;
+    font-size: 0;
+    height: 50px;
+    line-height: 0;
+    opacity: 0.5;
+    overflow: hidden;
+    transition: opacity 0.15s;
+    width: 30px;
+  }
+
+.viewer-list > li:focus,
+    .viewer-list > li:hover {
+      opacity: 0.75;
+    }
+
+.viewer-list > li:focus {
+      outline: 0;
+    }
+
+.viewer-list > li + li {
+      margin-left: 1px;
+    }
+
+.viewer-list > .viewer-loading {
+    position: relative;
+  }
+
+.viewer-list > .viewer-loading::after {
+      border-width: 2px;
+      height: 20px;
+      margin-left: -10px;
+      margin-top: -10px;
+      width: 20px;
+    }
+
+.viewer-list > .viewer-active,
+  .viewer-list > .viewer-active:focus,
+  .viewer-list > .viewer-active:hover {
+    opacity: 1;
+  }
+
+.viewer-player {
+  background-color: #000;
+  bottom: 0;
+  cursor: none;
+  display: none;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+
+.viewer-player > img {
+    left: 0;
+    position: absolute;
+    top: 0;
+  }
+
+.viewer-toolbar > ul {
+    display: inline-block;
+    margin: 0 auto 5px;
+    overflow: hidden;
+    padding: 6px 3px;
+  }
+
+.viewer-toolbar > ul > li {
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      cursor: pointer;
+      float: left;
+      height: 24px;
+      overflow: hidden;
+      transition: background-color 0.15s;
+      width: 24px;
+    }
+
+.viewer-toolbar > ul > li:focus,
+      .viewer-toolbar > ul > li:hover {
+        background-color: rgba(0, 0, 0, 0.8);
+      }
+
+.viewer-toolbar > ul > li:focus {
+        box-shadow: 0 0 3px #fff;
+        outline: 0;
+        position: relative;
+        z-index: 1;
+      }
+
+.viewer-toolbar > ul > li::before {
+        margin: 2px;
+      }
+
+.viewer-toolbar > ul > li + li {
+        margin-left: 1px;
+      }
+
+.viewer-toolbar > ul > .viewer-small {
+      height: 18px;
+      margin-bottom: 3px;
+      margin-top: 3px;
+      width: 18px;
+    }
+
+.viewer-toolbar > ul > .viewer-small::before {
+        margin: -1px;
+      }
+
+.viewer-toolbar > ul > .viewer-large {
+      height: 30px;
+      margin-bottom: -3px;
+      margin-top: -3px;
+      width: 30px;
+    }
+
+.viewer-toolbar > ul > .viewer-large::before {
+        margin: 5px;
+      }
+
+.viewer-tooltip {
+  background-color: rgba(0, 0, 0, 0.8);
+  border-radius: 10px;
+  color: #fff;
+  display: none;
+  font-size: 12px;
+  height: 20px;
+  left: 50%;
+  line-height: 20px;
+  margin-left: -25px;
+  margin-top: -10px;
+  position: absolute;
+  text-align: center;
+  top: 50%;
+  width: 50px;
+}
+
+.viewer-title {
+  color: #ccc;
+  display: inline-block;
+  font-size: 12px;
+  line-height: 1.2;
+  margin: 5px 5%;
+  max-width: 90%;
+  min-height: 14px;
+  opacity: 0.8;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: opacity 0.15s;
+  white-space: nowrap;
+}
+
+.viewer-title:hover {
+    opacity: 1;
+  }
+
+.viewer-button {
+  -webkit-app-region: no-drag;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  cursor: pointer;
+  height: 80px;
+  overflow: hidden;
+  position: absolute;
+  right: -40px;
+  top: -40px;
+  transition: background-color 0.15s;
+  width: 80px;
+}
+
+.viewer-button:focus,
+  .viewer-button:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+
+.viewer-button:focus {
+    box-shadow: 0 0 3px #fff;
+    outline: 0;
+  }
+
+.viewer-button::before {
+    bottom: 15px;
+    left: 15px;
+    position: absolute;
+  }
+
+.viewer-fixed {
+  position: fixed;
+}
+
+.viewer-open {
+  overflow: hidden;
+}
+
+.viewer-show {
+  display: block;
+}
+
+.viewer-hide {
+  display: none;
+}
+
+.viewer-backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.viewer-invisible {
+  visibility: hidden;
+}
+
+.viewer-move {
+  cursor: move;
+  cursor: grab;
+}
+
+.viewer-fade {
+  opacity: 0;
+}
+
+.viewer-in {
+  opacity: 1;
+}
+
+.viewer-transition {
+  transition: all 0.3s;
+}
+
+@keyframes viewer-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.viewer-loading::after {
+    animation: viewer-spinner 1s linear infinite;
+    border: 4px solid rgba(255, 255, 255, 0.1);
+    border-left-color: rgba(255, 255, 255, 0.5);
+    border-radius: 50%;
+    content: '';
+    display: inline-block;
+    height: 40px;
+    left: 50%;
+    margin-left: -20px;
+    margin-top: -20px;
+    position: absolute;
+    top: 50%;
+    width: 40px;
+    z-index: 1;
+  }
+
+@media (max-width: 767px) {
+  .viewer-hide-xs-down {
+    display: none;
+  }
+}
+
+@media (max-width: 991px) {
+  .viewer-hide-sm-down {
+    display: none;
+  }
+}
+
+@media (max-width: 1199px) {
+  .viewer-hide-md-down {
+    display: none;
+  }
+}
--- a/public/cdn/viewerjs/1.11.6/viewer.min.js
+++ b/public/cdn/viewerjs/1.11.6/viewer.min.js
--- a/public/index.html
+++ b/public/index.html
@@ -1,17 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <title>web端应用库-展示页面</title>
-  <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
-  <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico"/>
+    <link rel="stylesheet" href="<%= BASE_URL %>cdn/viewerjs/1.11.6/viewer.css"/>
+    <script src="<%= BASE_URL %>cdn/viewerjs/1.11.6/viewer.min.js"></script>
+    <title>web端应用库-展示页面</title>
+    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
+    <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>
 </head>
 <body>
 <noscript>
-  <strong>We're sorry but vc-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    <strong>We're sorry but vc-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 <!-- built files will be auto injected -->
--- a/ui/lib/cdn/v-viewer/1.7.4/v-viewer.js
+++ b/ui/lib/cdn/v-viewer/1.7.4/v-viewer.js
@@ -0,0 +1,826 @@
+import Viewer from "viewerjs";
+import Vue from "vue";
+
+export { default as Viewer } from "viewerjs";
+var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
+var freeGlobal$1 = freeGlobal;
+var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+var root = freeGlobal$1 || freeSelf || Function("return this")();
+var root$1 = root;
+var Symbol$1 = root$1.Symbol;
+var Symbol$2 = Symbol$1;
+var objectProto$8 = Object.prototype;
+var hasOwnProperty$6 = objectProto$8.hasOwnProperty;
+var nativeObjectToString$1 = objectProto$8.toString;
+var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : void 0;
+function getRawTag(value) {
+  var isOwn = hasOwnProperty$6.call(value, symToStringTag$1), tag = value[symToStringTag$1];
+  try {
+    value[symToStringTag$1] = void 0;
+    var unmasked = true;
+  } catch (e) {
+  }
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+var objectProto$7 = Object.prototype;
+var nativeObjectToString = objectProto$7.toString;
+function objectToString(value) {
+  return nativeObjectToString.call(value);
+}
+var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
+var symToStringTag = Symbol$2 ? Symbol$2.toStringTag : void 0;
+function baseGetTag(value) {
+  if (value == null) {
+    return value === void 0 ? undefinedTag : nullTag;
+  }
+  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+}
+function isObjectLike(value) {
+  return value != null && typeof value == "object";
+}
+var symbolTag = "[object Symbol]";
+function isSymbol(value) {
+  return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
+}
+var isArray = Array.isArray;
+var isArray$1 = isArray;
+var reWhitespace = /\s/;
+function trimmedEndIndex(string) {
+  var index2 = string.length;
+  while (index2-- && reWhitespace.test(string.charAt(index2))) {
+  }
+  return index2;
+}
+var reTrimStart = /^\s+/;
+function baseTrim(string) {
+  return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
+}
+function isObject(value) {
+  var type = typeof value;
+  return value != null && (type == "object" || type == "function");
+}
+var NAN = 0 / 0;
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+var reIsBinary = /^0b[01]+$/i;
+var reIsOctal = /^0o[0-7]+$/i;
+var freeParseInt = parseInt;
+function toNumber(value) {
+  if (typeof value == "number") {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject(value)) {
+    var other = typeof value.valueOf == "function" ? value.valueOf() : value;
+    value = isObject(other) ? other + "" : other;
+  }
+  if (typeof value != "string") {
+    return value === 0 ? value : +value;
+  }
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+}
+function identity(value) {
+  return value;
+}
+var asyncTag = "[object AsyncFunction]", funcTag$1 = "[object Function]", genTag = "[object GeneratorFunction]", proxyTag = "[object Proxy]";
+function isFunction(value) {
+  if (!isObject(value)) {
+    return false;
+  }
+  var tag = baseGetTag(value);
+  return tag == funcTag$1 || tag == genTag || tag == asyncTag || tag == proxyTag;
+}
+var coreJsData = root$1["__core-js_shared__"];
+var coreJsData$1 = coreJsData;
+var maskSrcKey = function() {
+  var uid = /[^.]+$/.exec(coreJsData$1 && coreJsData$1.keys && coreJsData$1.keys.IE_PROTO || "");
+  return uid ? "Symbol(src)_1." + uid : "";
+}();
+function isMasked(func) {
+  return !!maskSrcKey && maskSrcKey in func;
+}
+var funcProto$1 = Function.prototype;
+var funcToString$1 = funcProto$1.toString;
+function toSource(func) {
+  if (func != null) {
+    try {
+      return funcToString$1.call(func);
+    } catch (e) {
+    }
+    try {
+      return func + "";
+    } catch (e) {
+    }
+  }
+  return "";
+}
+var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+var reIsHostCtor = /^\[object .+?Constructor\]$/;
+var funcProto = Function.prototype, objectProto$6 = Object.prototype;
+var funcToString = funcProto.toString;
+var hasOwnProperty$5 = objectProto$6.hasOwnProperty;
+var reIsNative = RegExp(
+  "^" + funcToString.call(hasOwnProperty$5).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
+);
+function baseIsNative(value) {
+  if (!isObject(value) || isMasked(value)) {
+    return false;
+  }
+  var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
+  return pattern.test(toSource(value));
+}
+function getValue(object, key) {
+  return object == null ? void 0 : object[key];
+}
+function getNative(object, key) {
+  var value = getValue(object, key);
+  return baseIsNative(value) ? value : void 0;
+}
+function apply(func, thisArg, args) {
+  switch (args.length) {
+    case 0:
+      return func.call(thisArg);
+    case 1:
+      return func.call(thisArg, args[0]);
+    case 2:
+      return func.call(thisArg, args[0], args[1]);
+    case 3:
+      return func.call(thisArg, args[0], args[1], args[2]);
+  }
+  return func.apply(thisArg, args);
+}
+var HOT_COUNT = 800, HOT_SPAN = 16;
+var nativeNow = Date.now;
+function shortOut(func) {
+  var count = 0, lastCalled = 0;
+  return function() {
+    var stamp = nativeNow(), remaining = HOT_SPAN - (stamp - lastCalled);
+    lastCalled = stamp;
+    if (remaining > 0) {
+      if (++count >= HOT_COUNT) {
+        return arguments[0];
+      }
+    } else {
+      count = 0;
+    }
+    return func.apply(void 0, arguments);
+  };
+}
+function constant(value) {
+  return function() {
+    return value;
+  };
+}
+var defineProperty = function() {
+  try {
+    var func = getNative(Object, "defineProperty");
+    func({}, "", {});
+    return func;
+  } catch (e) {
+  }
+}();
+var defineProperty$1 = defineProperty;
+var baseSetToString = !defineProperty$1 ? identity : function(func, string) {
+  return defineProperty$1(func, "toString", {
+    "configurable": true,
+    "enumerable": false,
+    "value": constant(string),
+    "writable": true
+  });
+};
+var baseSetToString$1 = baseSetToString;
+var setToString = shortOut(baseSetToString$1);
+var setToString$1 = setToString;
+var MAX_SAFE_INTEGER$1 = 9007199254740991;
+var reIsUint = /^(?:0|[1-9]\d*)$/;
+function isIndex(value, length) {
+  var type = typeof value;
+  length = length == null ? MAX_SAFE_INTEGER$1 : length;
+  return !!length && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
+}
+function baseAssignValue(object, key, value) {
+  if (key == "__proto__" && defineProperty$1) {
+    defineProperty$1(object, key, {
+      "configurable": true,
+      "enumerable": true,
+      "value": value,
+      "writable": true
+    });
+  } else {
+    object[key] = value;
+  }
+}
+function eq(value, other) {
+  return value === other || value !== value && other !== other;
+}
+var objectProto$5 = Object.prototype;
+var hasOwnProperty$4 = objectProto$5.hasOwnProperty;
+function assignValue(object, key, value) {
+  var objValue = object[key];
+  if (!(hasOwnProperty$4.call(object, key) && eq(objValue, value)) || value === void 0 && !(key in object)) {
+    baseAssignValue(object, key, value);
+  }
+}
+function copyObject(source, props, object, customizer) {
+  var isNew = !object;
+  object || (object = {});
+  var index2 = -1, length = props.length;
+  while (++index2 < length) {
+    var key = props[index2];
+    var newValue = customizer ? customizer(object[key], source[key], key, object, source) : void 0;
+    if (newValue === void 0) {
+      newValue = source[key];
+    }
+    if (isNew) {
+      baseAssignValue(object, key, newValue);
+    } else {
+      assignValue(object, key, newValue);
+    }
+  }
+  return object;
+}
+var nativeMax$1 = Math.max;
+function overRest(func, start, transform) {
+  start = nativeMax$1(start === void 0 ? func.length - 1 : start, 0);
+  return function() {
+    var args = arguments, index2 = -1, length = nativeMax$1(args.length - start, 0), array = Array(length);
+    while (++index2 < length) {
+      array[index2] = args[start + index2];
+    }
+    index2 = -1;
+    var otherArgs = Array(start + 1);
+    while (++index2 < start) {
+      otherArgs[index2] = args[index2];
+    }
+    otherArgs[start] = transform(array);
+    return apply(func, this, otherArgs);
+  };
+}
+function baseRest(func, start) {
+  return setToString$1(overRest(func, start, identity), func + "");
+}
+var MAX_SAFE_INTEGER = 9007199254740991;
+function isLength(value) {
+  return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+}
+function isArrayLike(value) {
+  return value != null && isLength(value.length) && !isFunction(value);
+}
+function isIterateeCall(value, index2, object) {
+  if (!isObject(object)) {
+    return false;
+  }
+  var type = typeof index2;
+  if (type == "number" ? isArrayLike(object) && isIndex(index2, object.length) : type == "string" && index2 in object) {
+    return eq(object[index2], value);
+  }
+  return false;
+}
+function createAssigner(assigner) {
+  return baseRest(function(object, sources) {
+    var index2 = -1, length = sources.length, customizer = length > 1 ? sources[length - 1] : void 0, guard = length > 2 ? sources[2] : void 0;
+    customizer = assigner.length > 3 && typeof customizer == "function" ? (length--, customizer) : void 0;
+    if (guard && isIterateeCall(sources[0], sources[1], guard)) {
+      customizer = length < 3 ? void 0 : customizer;
+      length = 1;
+    }
+    object = Object(object);
+    while (++index2 < length) {
+      var source = sources[index2];
+      if (source) {
+        assigner(object, source, index2, customizer);
+      }
+    }
+    return object;
+  });
+}
+var objectProto$4 = Object.prototype;
+function isPrototype(value) {
+  var Ctor = value && value.constructor, proto = typeof Ctor == "function" && Ctor.prototype || objectProto$4;
+  return value === proto;
+}
+function baseTimes(n, iteratee) {
+  var index2 = -1, result = Array(n);
+  while (++index2 < n) {
+    result[index2] = iteratee(index2);
+  }
+  return result;
+}
+var argsTag$1 = "[object Arguments]";
+function baseIsArguments(value) {
+  return isObjectLike(value) && baseGetTag(value) == argsTag$1;
+}
+var objectProto$3 = Object.prototype;
+var hasOwnProperty$3 = objectProto$3.hasOwnProperty;
+var propertyIsEnumerable = objectProto$3.propertyIsEnumerable;
+var isArguments = baseIsArguments(function() {
+  return arguments;
+}()) ? baseIsArguments : function(value) {
+  return isObjectLike(value) && hasOwnProperty$3.call(value, "callee") && !propertyIsEnumerable.call(value, "callee");
+};
+var isArguments$1 = isArguments;
+function stubFalse() {
+  return false;
+}
+var freeExports$1 = typeof exports == "object" && exports && !exports.nodeType && exports;
+var freeModule$1 = freeExports$1 && typeof module == "object" && module && !module.nodeType && module;
+var moduleExports$1 = freeModule$1 && freeModule$1.exports === freeExports$1;
+var Buffer = moduleExports$1 ? root$1.Buffer : void 0;
+var nativeIsBuffer = Buffer ? Buffer.isBuffer : void 0;
+var isBuffer = nativeIsBuffer || stubFalse;
+var isBuffer$1 = isBuffer;
+var argsTag = "[object Arguments]", arrayTag = "[object Array]", boolTag = "[object Boolean]", dateTag = "[object Date]", errorTag = "[object Error]", funcTag = "[object Function]", mapTag = "[object Map]", numberTag = "[object Number]", objectTag = "[object Object]", regexpTag = "[object RegExp]", setTag = "[object Set]", stringTag = "[object String]", weakMapTag = "[object WeakMap]";
+var arrayBufferTag = "[object ArrayBuffer]", dataViewTag = "[object DataView]", float32Tag = "[object Float32Array]", float64Tag = "[object Float64Array]", int8Tag = "[object Int8Array]", int16Tag = "[object Int16Array]", int32Tag = "[object Int32Array]", uint8Tag = "[object Uint8Array]", uint8ClampedTag = "[object Uint8ClampedArray]", uint16Tag = "[object Uint16Array]", uint32Tag = "[object Uint32Array]";
+var typedArrayTags = {};
+typedArrayTags[float32Tag] = typedArrayTags[float64Tag] = typedArrayTags[int8Tag] = typedArrayTags[int16Tag] = typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] = typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] = typedArrayTags[uint32Tag] = true;
+typedArrayTags[argsTag] = typedArrayTags[arrayTag] = typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] = typedArrayTags[dataViewTag] = typedArrayTags[dateTag] = typedArrayTags[errorTag] = typedArrayTags[funcTag] = typedArrayTags[mapTag] = typedArrayTags[numberTag] = typedArrayTags[objectTag] = typedArrayTags[regexpTag] = typedArrayTags[setTag] = typedArrayTags[stringTag] = typedArrayTags[weakMapTag] = false;
+function baseIsTypedArray(value) {
+  return isObjectLike(value) && isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
+}
+function baseUnary(func) {
+  return function(value) {
+    return func(value);
+  };
+}
+var freeExports = typeof exports == "object" && exports && !exports.nodeType && exports;
+var freeModule = freeExports && typeof module == "object" && module && !module.nodeType && module;
+var moduleExports = freeModule && freeModule.exports === freeExports;
+var freeProcess = moduleExports && freeGlobal$1.process;
+var nodeUtil = function() {
+  try {
+    var types = freeModule && freeModule.require && freeModule.require("util").types;
+    if (types) {
+      return types;
+    }
+    return freeProcess && freeProcess.binding && freeProcess.binding("util");
+  } catch (e) {
+  }
+}();
+var nodeUtil$1 = nodeUtil;
+var nodeIsTypedArray = nodeUtil$1 && nodeUtil$1.isTypedArray;
+var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
+var isTypedArray$1 = isTypedArray;
+var objectProto$2 = Object.prototype;
+var hasOwnProperty$2 = objectProto$2.hasOwnProperty;
+function arrayLikeKeys(value, inherited) {
+  var isArr = isArray$1(value), isArg = !isArr && isArguments$1(value), isBuff = !isArr && !isArg && isBuffer$1(value), isType = !isArr && !isArg && !isBuff && isTypedArray$1(value), skipIndexes = isArr || isArg || isBuff || isType, result = skipIndexes ? baseTimes(value.length, String) : [], length = result.length;
+  for (var key in value) {
+    if ((inherited || hasOwnProperty$2.call(value, key)) && !(skipIndexes && (key == "length" || isBuff && (key == "offset" || key == "parent") || isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || isIndex(key, length)))) {
+      result.push(key);
+    }
+  }
+  return result;
+}
+function overArg(func, transform) {
+  return function(arg) {
+    return func(transform(arg));
+  };
+}
+var nativeKeys = overArg(Object.keys, Object);
+var nativeKeys$1 = nativeKeys;
+var objectProto$1 = Object.prototype;
+var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
+function baseKeys(object) {
+  if (!isPrototype(object)) {
+    return nativeKeys$1(object);
+  }
+  var result = [];
+  for (var key in Object(object)) {
+    if (hasOwnProperty$1.call(object, key) && key != "constructor") {
+      result.push(key);
+    }
+  }
+  return result;
+}
+function keys(object) {
+  return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
+}
+var objectProto = Object.prototype;
+var hasOwnProperty = objectProto.hasOwnProperty;
+var assign = createAssigner(function(object, source) {
+  if (isPrototype(source) || isArrayLike(source)) {
+    copyObject(source, keys(source), object);
+    return;
+  }
+  for (var key in source) {
+    if (hasOwnProperty.call(source, key)) {
+      assignValue(object, key, source[key]);
+    }
+  }
+});
+var assign$1 = assign;
+var now = function() {
+  return root$1.Date.now();
+};
+var now$1 = now;
+var FUNC_ERROR_TEXT = "Expected a function";
+var nativeMax = Math.max, nativeMin = Math.min;
+function debounce(func, wait, options) {
+  var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
+  if (typeof func != "function") {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject(options)) {
+    leading = !!options.leading;
+    maxing = "maxWait" in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
+  }
+  function invokeFunc(time) {
+    var args = lastArgs, thisArg = lastThis;
+    lastArgs = lastThis = void 0;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+  function leadingEdge(time) {
+    lastInvokeTime = time;
+    timerId = setTimeout(timerExpired, wait);
+    return leading ? invokeFunc(time) : result;
+  }
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
+    return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+  }
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
+    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+  }
+  function timerExpired() {
+    var time = now$1();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+  function trailingEdge(time) {
+    timerId = void 0;
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = void 0;
+    return result;
+  }
+  function cancel() {
+    if (timerId !== void 0) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = void 0;
+  }
+  function flush() {
+    return timerId === void 0 ? result : trailingEdge(now$1());
+  }
+  function debounced() {
+    var time = now$1(), isInvoking = shouldInvoke(time);
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+    if (isInvoking) {
+      if (timerId === void 0) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === void 0) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+var render = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", [_vm._t("default", null, { "images": _vm.images, "options": _vm.options })], 2);
+};
+var staticRenderFns = [];
+function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render2) {
+    options.render = render2;
+    options.staticRenderFns = staticRenderFns2;
+    options._compiled = true;
+  }
+  if (functionalTemplate) {
+    options.functional = true;
+  }
+  if (scopeId) {
+    options._scopeId = "data-v-" + scopeId;
+  }
+  var hook;
+  if (moduleIdentifier) {
+    hook = function(context) {
+      context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
+        context = __VUE_SSR_CONTEXT__;
+      }
+      if (injectStyles) {
+        injectStyles.call(this, context);
+      }
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier);
+      }
+    };
+    options._ssrRegister = hook;
+  } else if (injectStyles) {
+    hook = shadowMode ? function() {
+      injectStyles.call(
+        this,
+        (options.functional ? this.parent : this).$root.$options.shadowRoot
+      );
+    } : injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+const __vue2_script = {
+  props: {
+    images: {
+      type: Array
+    },
+    rebuild: {
+      type: Boolean,
+      default: false
+    },
+    trigger: {},
+    options: {
+      type: Object
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {
+    images() {
+      this.$nextTick(() => {
+        this.onChange();
+      });
+    },
+    trigger: {
+      handler() {
+        this.$nextTick(() => {
+          this.onChange();
+        });
+      },
+      deep: true
+    },
+    options: {
+      handler() {
+        this.$nextTick(() => {
+          this.rebuildViewer();
+        });
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.createViewer();
+  },
+  unmounted() {
+    this.destroyViewer();
+  },
+  methods: {
+    onChange() {
+      if (this.rebuild) {
+        this.rebuildViewer();
+      } else {
+        this.updateViewer();
+      }
+    },
+    rebuildViewer() {
+      this.destroyViewer();
+      this.createViewer();
+    },
+    updateViewer() {
+      if (this.$viewer) {
+        this.$viewer.update();
+        this.$emit("inited", this.$viewer);
+      } else {
+        this.createViewer();
+      }
+    },
+    destroyViewer() {
+      this.$viewer && this.$viewer.destroy();
+    },
+    createViewer() {
+      this.$viewer = new Viewer(this.$el, this.options);
+      this.$emit("inited", this.$viewer);
+    }
+  }
+};
+const __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
+  false,
+  __vue2_injectStyles,
+  null,
+  null,
+  null
+);
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var component = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+const directive = ({ name = "viewer", debug = false } = {}) => {
+  function createViewer(el, options, rebuild = false, observer = false) {
+    Vue.nextTick(() => {
+      if (observer && !imageDiff(el))
+        return;
+      if (rebuild || !el[`$${name}`]) {
+        destroyViewer(el);
+        el[`$${name}`] = new Viewer(el, options);
+        log("Viewer created");
+      } else {
+        el[`$${name}`].update();
+        log("Viewer updated");
+      }
+    });
+  }
+  function imageDiff(el) {
+    const imageContent = el.innerHTML.match(/<img([\w\W]+?)[\\/]?>/g);
+    const viewerImageText = imageContent ? imageContent.join("") : void 0;
+    if (el.__viewerImageDiffCache === viewerImageText) {
+      log("Element change detected, but image(s) has not changed");
+      return false;
+    } else {
+      log("Image change detected");
+      el.__viewerImageDiffCache = viewerImageText;
+      return true;
+    }
+  }
+  function createObserver(el, options, debouncedCreateViewer, rebuild) {
+    destroyObserver(el);
+    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+    if (!MutationObserver) {
+      log("Observer not supported");
+      return;
+    }
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        log(`Viewer mutation:${mutation.type}`);
+        debouncedCreateViewer(el, options, rebuild, true);
+      });
+    });
+    const config = { attributes: true, childList: true, characterData: true, subtree: true };
+    observer.observe(el, config);
+    el.__viewerMutationObserver = observer;
+    log("Observer created");
+  }
+  function createWatcher(el, { expression }, vnode, debouncedCreateViewer) {
+    const simplePathRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/;
+    if (!expression || !simplePathRE.test(expression)) {
+      log("Only simple dot-delimited paths can create watcher");
+      return;
+    }
+    el.__viewerUnwatch = vnode.context.$watch(expression, (newVal, oldVal) => {
+      log("Change detected by watcher: ", expression);
+      debouncedCreateViewer(el, newVal, true);
+    }, {
+      deep: true
+    });
+    log("Watcher created, expression: ", expression);
+  }
+  function destroyViewer(el) {
+    if (!el[`$${name}`]) {
+      return;
+    }
+    el[`$${name}`].destroy();
+    delete el[`$${name}`];
+    log("Viewer destroyed");
+  }
+  function destroyObserver(el) {
+    if (!el.__viewerMutationObserver) {
+      return;
+    }
+    el.__viewerMutationObserver.disconnect();
+    delete el.__viewerMutationObserver;
+    log("Observer destroyed");
+  }
+  function destroyWatcher(el) {
+    if (!el.__viewerUnwatch) {
+      return;
+    }
+    el.__viewerUnwatch();
+    delete el.__viewerUnwatch;
+    log("Watcher destroyed");
+  }
+  function log() {
+    debug && console.log(...arguments);
+  }
+  const directive2 = {
+    bind(el, binding, vnode) {
+      log("Viewer bind");
+      const debouncedCreateViewer = debounce(createViewer, 50);
+      debouncedCreateViewer(el, binding.value);
+      createWatcher(el, binding, vnode, debouncedCreateViewer);
+      if (!binding.modifiers.static) {
+        createObserver(el, binding.value, debouncedCreateViewer, binding.modifiers.rebuild);
+      }
+    },
+    unbind(el, binding) {
+      log("Viewer unbind");
+      destroyObserver(el);
+      destroyWatcher(el);
+      destroyViewer(el);
+    }
+  };
+  return directive2;
+};
+const api = ({ images = [], options = {} } = {}) => {
+  options = assign$1(options, {
+    inline: false
+  });
+  const ViewerToken = Vue.extend({
+    render(h) {
+      return h(
+        "div",
+        {
+          style: {
+            display: "none"
+          },
+          class: ["__viewer-token"]
+        },
+        images.map((attr) => {
+          return h(
+            "img",
+            {
+              attrs: typeof attr === "string" ? { src: attr } : attr
+            }
+          );
+        })
+      );
+    }
+  });
+  const token = new ViewerToken();
+  token.$mount();
+  document.body.appendChild(token.$el);
+  const $viewer = new Viewer(token.$el, options);
+  const $destroy = $viewer.destroy.bind($viewer);
+  $viewer.destroy = function() {
+    $destroy();
+    token.$destroy();
+    document.body.removeChild(token.$el);
+    return $viewer;
+  };
+  $viewer.show();
+  token.$el.addEventListener("hidden", function() {
+    if (this.viewer === $viewer) {
+      $viewer.destroy();
+    }
+  });
+  return $viewer;
+};
+var index = {
+  install(Vue2, { name = "viewer", debug = false, defaultOptions } = {}) {
+    Viewer.setDefaults(defaultOptions);
+    Vue2.component(name, assign$1(component, { name }));
+    Vue2.directive(name, directive({ name, debug }));
+    Vue2.prototype[`$${name}Api`] = api;
+  },
+  setDefaults(defaultOptions) {
+    Viewer.setDefaults(defaultOptions);
+  }
+};
+export { api, component, index as default, directive };
--- a/ui/lib/js/directives.js
+++ b/ui/lib/js/directives.js
@@ -1,3 +1,5 @@
+import {directive as viewer} from '../cdn/v-viewer/1.7.4/v-viewer'
+
 const map = {
  throttle: {
    bind: function (el, obj) {
@@ -24,7 +26,8 @@ const map = {
        el.style.display = 'none'
      }
    }
-  }
+  },
+  viewer: viewer({debug: true})
 }


--- a/ui/lib/js/encryption.js
+++ b/ui/lib/js/encryption.js
@@ -1,4 +1,4 @@
-import CryptoJs from  "crypto-js";
+import CryptoJs from "crypto-js";

 /**
 * 密码加密工具
--- a/ui/package.json
+++ b/ui/package.json
@@ -19,7 +19,6 @@
    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.1",
    "echarts": "^5.1.2",
-    "v-viewer": "^1.5.1",
    "vue-cropper": "^0.5.5",
    "vue-qr": "^2.2.1",
    "vuedraggable": "^2.24.3",
--- a/ui/packages/basic/AiUploader.vue
+++ b/ui/packages/basic/AiUploader.vue
@@ -89,14 +89,8 @@

 <script>
 import {VueCropper} from 'vue-cropper'
-import 'viewerjs/dist/viewer.css'
-import Viewer from 'v-viewer'
 import Vue from "vue";

-Viewer.setDefaults({
-  zIndex: 20170
-})
-Vue.use(Viewer)
 export default {
  name: 'AiUploader',
  components: {VueCropper},
@@ -279,7 +273,6 @@ export default {
    },
    handlePictureCardPreview(file) {
      if (this.fileType !== 'img') return
-
      const index = this.imgList.indexOf(file.url)
      const viewer = this.$el.querySelector('.images').$viewer
      viewer.view(index)
@@ -343,7 +336,7 @@ export default {
                item.id = res.data.file.id
                item.path = res.data.file.url
                item.url = res.data.file.url,
-                item.media = res.data.media
+                    item.media = res.data.media
              }
            })
            this.emitChange(this.fileList)
@@ -409,7 +402,7 @@ export default {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
-  }
+  },
 }
 </script>

@@ -417,33 +410,33 @@ export default {
 .uploader {
  line-height: 1;

-  :deep(.el-upload ){
+  :deep(.el-upload ) {
    width: 100%;
    text-align: start;
  }

-  :deep(.validError ){
+  :deep(.validError ) {
    .el-button {
      border-color: #f46;
      color: #f46;
    }
  }

-  :deep(.el-upload--picture-card ){
+  :deep(.el-upload--picture-card ) {
    border: none;
  }

-  :deep( .el-list-leave-active), :deep( .el-upload-list__item ){
+  :deep( .el-list-leave-active), :deep( .el-upload-list__item ) {
    transition: all 0s !important;
  }

-  :deep(.el-upload-list--picture-card .el-upload-list__item ){
+  :deep(.el-upload-list--picture-card .el-upload-list__item ) {
    width: 120px;
    height: 120px;
    border-radius: 4px;
  }

-  :deep(.el-upload--picture-card ){
+  :deep(.el-upload--picture-card ) {
    width: auto;
    height: auto;
  }
@@ -453,7 +446,7 @@ export default {
    line-height: 16px;
  }

-  :deep(.fileItem ){
+  :deep(.fileItem ) {
    width: 100%;
    height: 60px;
    background: #FFFFFF;
--- a/ui/packages/common/AiUserGet/tree/model/node.js
+++ b/ui/packages/common/AiUserGet/tree/model/node.js
@@ -1,6 +1,6 @@
 import objectAssign from 'element-ui/src/utils/merge';
-import { markNodeData, NODE_KEY } from './util';
-import { arrayFindIndex } from 'element-ui/src/utils/util';
+import {markNodeData, NODE_KEY} from './util';
+import {arrayFindIndex} from 'element-ui/src/utils/util';

 export const getChildState = node => {
  let all = true;
--- a/ui/packages/common/AiUserGet/tree/model/tree-store.js
+++ b/ui/packages/common/AiUserGet/tree/model/tree-store.js
@@ -1,5 +1,5 @@
 import Node from './node';
-import { getNodeKey } from './util';
+import {getNodeKey} from './util';

 export default class TreeStore {
 	constructor(options) {
--- a/ui/packages/common/AiWechatSelecter/tree/model/node.js
+++ b/ui/packages/common/AiWechatSelecter/tree/model/node.js
@@ -1,6 +1,6 @@
 import objectAssign from 'element-ui/src/utils/merge';
-import { markNodeData, NODE_KEY } from './util';
-import { arrayFindIndex } from 'element-ui/src/utils/util';
+import {markNodeData, NODE_KEY} from './util';
+import {arrayFindIndex} from 'element-ui/src/utils/util';

 export const getChildState = node => {
  let all = true;
--- a/ui/packages/common/AiWechatSelecter/tree/model/tree-store.js
+++ b/ui/packages/common/AiWechatSelecter/tree/model/tree-store.js
@@ -1,5 +1,5 @@
 import Node from './node';
-import { getNodeKey } from './util';
+import {getNodeKey} from './util';

 export default class TreeStore {
 	constructor(options) {
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const proxy = {
-  dv: "https://pingchangdjweb.icunwei.com/",
+  // dv: "https://pingchangdjweb.icunwei.com/",
+  dv: "http://192.168.1.87:9000",
  fengdu: "https://web.fdfengshou.cn/"
 }[process.env.VUE_APP_SCOPE] || "http://192.168.1.87:9000"
 module.exports = {