From 9a19ecaea26557d5fe01548656a344585445123d Mon Sep 17 00:00:00 2001
From: vanoneang <525650856@qq.com>
Date: Mon, 29 Mar 2021 16:34:23 +0800
Subject: [PATCH] feat: remove preview component using el-image instead

---
 .env.development                              |   2 +-
 .../style/realize/element-variable.scss       |   4 +-
 src/component/base/preview/preview.vue        | 225 ------------------
 src/component/base/search/lin-search.vue      |   4 +-
 src/component/base/upload-image/index.vue     |  45 ++--
 src/component/layout/user.vue                 |   4 +-
 src/lin/plugin/preview/index.js               |  51 ----
 src/lin/plugin/preview/readme.md              |  30 ---
 src/plugin/custom/README.md                   |  33 +--
 src/plugin/custom/package.json                |  10 +-
 src/plugin/custom/stage-config.js             |  10 -
 src/plugin/custom/view/gallery.vue            | 120 ----------
 src/plugin/custom/view/multiple-input.vue     |   4 +-
 src/plugin/custom/view/upload-image.vue       |  11 +-
 .../lin-cms-ui/assets/style/container.scss    |   4 +-
 src/plugin/lin-cms-ui/view/data/tag/tag.vue   |   4 +-
 src/plugin/lin-cms-ui/view/form/input.vue     |   2 +-
 src/plugin/lin-cms-ui/view/form/slider.vue    |   2 +-
 src/plugin/lin-cms-ui/view/notice/loading.vue |   2 +-
 src/plugin/lin-cms-ui/view/other/dialog.vue   |   2 +-
 src/plugin/lin-cms-ui/view/other/timeline.vue |   6 +-
 .../lin-cms-ui/view/table/table-combo.vue     |   6 +-
 src/view/about/about.vue                      |   4 +-
 src/view/admin/group/group-list.vue           |   6 +-
 src/view/admin/user/user-password.vue         |   2 +-
 src/view/log/log.vue                          |   2 +-
 26 files changed, 67 insertions(+), 528 deletions(-)
 delete mode 100644 src/component/base/preview/preview.vue
 delete mode 100644 src/lin/plugin/preview/index.js
 delete mode 100644 src/lin/plugin/preview/readme.md
 delete mode 100644 src/plugin/custom/view/gallery.vue

diff --git a/.env.development b/.env.development
index 783495b0..db26413b 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,3 @@
 ENV = 'development'
 
-VUE_APP_BASE_URL = 'http://face.api.talelin.com/'
\ No newline at end of file
+VUE_APP_BASE_URL = 'http://localhost:5000/'
\ No newline at end of file
diff --git a/src/assets/style/realize/element-variable.scss b/src/assets/style/realize/element-variable.scss
index 1417dabd..ad53c713 100644
--- a/src/assets/style/realize/element-variable.scss
+++ b/src/assets/style/realize/element-variable.scss
@@ -423,11 +423,11 @@ thead tr {
   overflow-y: auto;
 }
 
-.el-menu--vertical ::v-deep .icon-erjizhibiao {
+.el-menu--vertical :v-deep(.icon-erjizhibiao) {
   display: none;
 }
 
-.el-menu--vertical ::v-deep .two-folder {
+.el-menu--vertical :v-deep(.two-folder) {
   margin-left: 40px;
 }
 
diff --git a/src/component/base/preview/preview.vue b/src/component/base/preview/preview.vue
deleted file mode 100644
index b13022b4..00000000
--- a/src/component/base/preview/preview.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-<template>
-  <div v-if="data.length">
-    <div ref="myGallery" class="my-gallery" :data-pswp-uid="radom">
-      <div v-if="slides.length">
-        <div :key="radom + '_' + index" v-for="(l, index) in slides"><img preview :src="l" alt="" /></div>
-      </div>
-    </div>
-    <div ref="pswpWrap" class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="pswp__bg"></div>
-      <div class="pswp__scroll-wrap">
-        <div class="pswp__container">
-          <div class="pswp__item"></div>
-          <div class="pswp__item"></div>
-          <div class="pswp__item"></div>
-        </div>
-        <div class="pswp__ui pswp__ui--hidden">
-          <div class="pswp__top-bar">
-            <div class="pswp__counter"></div>
-            <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
-            <button class="pswp__button pswp__button--share" title="Share"></button>
-            <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
-            <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
-            <div class="pswp__preloader">
-              <div class="pswp__preloader__icn">
-                <div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div>
-              </div>
-            </div>
-          </div>
-          <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
-            <div class="pswp__share-tooltip"></div>
-          </div>
-          <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
-          <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
-          <div class="pswp__caption"><div class="pswp__caption__center"></div></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-// photoswipe接口文档 http://photoswipe.com/documentation/api.html
-
-import { ElLoading } from 'element-plus'
-import 'photoswipe/dist/photoswipe.css'
-import 'photoswipe/dist/default-skin/default-skin.css'
-import PhotoSwipe from 'photoswipe/dist/photoswipe'
-import PhotoSwipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'
-/** 生成随机字符串 */
-function createId() {
-  return Math.random()
-    .toString(36)
-    .substring(2)
-}
-export default {
-  name: 'PreviewImage',
-  props: {
-    data: {
-      type: Array,
-      default: () => [],
-    },
-    imageIndex: {
-      type: Number,
-      default: 0,
-    },
-    options: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      radom: createId(),
-      slides: this.data || [],
-      gallery: null,
-    }
-  },
-  watch: {
-    data(newVal) {
-      if (Array.isArray(newVal)) {
-        this.slides = Object.assign([], newVal)
-        if (newVal.length > 0) {
-          this.$nextTick(() => {
-            this.initPhotoSwipe()
-          })
-        }
-      }
-    },
-  },
-  mounted() {
-    if (this.slides.length > 0) {
-      this.$nextTick(() => {
-        this.initPhotoSwipe()
-      })
-    }
-  },
-  methods: {
-    /* eslint-disable */
-    async initPhotoSwipe() {
-      const that = this
-      const defaultOptions = {
-        fullscreenEl: true,
-        shareEl: false,
-        arrowEl: true,
-        preloaderEl: true,
-        history: false,
-        loop: false,
-        bgOpacity: 0.85,
-        showHideOpacity: true,
-        errorMsg: '<div class="pswp__error-msg">图片加载失败</div>',
-      }
-      let { options, imageIndex } = this
-      options = options || {}
-      options = Object.assign(defaultOptions, options, {
-        index: imageIndex,
-      })
-      const loadingInstance = ElLoading.service()
-      const galleryElement = this.$refs.myGallery
-      this.radom = createId()
-      let pswpElement = this.$refs.pswpWrap
-      const items = await this.transThumbnailElements()
-      let photoSwipeOptions = {
-        galleryUID: this.radom,
-        getThumbBoundsFn: function(index) {
-          let thumbnail = items[index].el
-          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
-          let rect = thumbnail.getBoundingClientRect()
-          return {
-            x: rect.left,
-            y: rect.top + pageYScroll,
-            w: rect.width,
-          }
-        },
-        ...options,
-      }
-      this.gallery = new PhotoSwipe(pswpElement, PhotoSwipeUIDefault, items, photoSwipeOptions)
-      this.gallery.init()
-      loadingInstance.close()
-      // Gallery starts closing
-      this.gallery.listen('close', () => {
-        if (this.gallery) {
-          this.gallery.close()
-          this.gallery = null
-          this.slides = []
-        }
-        that.$emit('close')
-      })
-    },
-    async getWH(elem) {
-      return new Promise((resolve, reject) => {
-        if (typeof elem.naturalWidth === 'undefined') {
-          // IE 6/7/8
-          let img = new window.Image()
-          img.src = elem.getAttribute('src')
-          img.onload = function() {
-            resolve({
-              w: this.width,
-              h: this.height,
-            })
-          }
-          img.onerror = function() {
-            reject({
-              w: 0,
-              h: 0,
-            })
-          }
-        } else {
-          if (elem.naturalWidth > 0) {
-            resolve({
-              w: elem.naturalWidth,
-              h: elem.naturalHeight,
-            })
-          } else {
-            elem.onload = function() {
-              resolve({
-                w: this.naturalWidth,
-                h: this.naturalHeight,
-              })
-            }
-          }
-        }
-      })
-    },
-    async transThumbnailElements() {
-      const galleryElement = this.$refs.myGallery
-      const items = []
-      const previewElements = galleryElement.querySelectorAll('img[preview]')
-
-      for (let i = 0, l = previewElements.length; i < l; i++) {
-        let elem = previewElements[i]
-        let rw = 0
-        let rh = 0
-        const wh = await this.getWH(elem)
-        rw = wh.w
-        rh = wh.h
-
-        items.push({
-          el: elem,
-          src: elem.getAttribute('src'),
-          w: rw,
-          h: rh,
-        })
-      }
-      return items
-    },
-    destroy() {
-      // 销毁
-      if (this.gallery) {
-        this.gallery.close()
-        this.gallery = null
-      }
-    },
-  },
-  beforeDestroy() {
-    this.destroy()
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.my-gallery {
-  opacity: 0;
-  display: none;
-}
-</style>
diff --git a/src/component/base/search/lin-search.vue b/src/component/base/search/lin-search.vue
index 316d95e0..b10e863f 100644
--- a/src/component/base/search/lin-search.vue
+++ b/src/component/base/search/lin-search.vue
@@ -43,7 +43,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.lin-search ::v-deep .el-input__inner {
+.lin-search :v-deep(.el-input__inner) {
   width: 150px;
   border-radius: 20px;
   transition: all 0.2s linear;
@@ -53,7 +53,7 @@ export default {
     transition: all 0.3s linear;
   }
 }
-.lin-search ::v-deep .el-input__suffix {
+.lin-search :v-deep(.el-input__suffix) {
   cursor: pointer;
 }
 </style>
diff --git a/src/component/base/upload-image/index.vue b/src/component/base/upload-image/index.vue
index d7ed6b3a..145d739e 100644
--- a/src/component/base/upload-image/index.vue
+++ b/src/component/base/upload-image/index.vue
@@ -11,7 +11,15 @@ todo: 文件判断使用 serveWorker 优化性能
     <template v-for="(item, i) in itemList">
       <template v-if="item.display">
         <div class="thumb-item" :key="item.id" :style="boxStyle" v-loading="item.loading">
-          <el-image class="thumb-item-img" :src="item.display" :fit="fit" style="width: 100%; height: 100%;"></el-image>
+          <el-image
+            :fit="fit"
+            :ref="setImageRef"
+            :src="item.display"
+            class="thumb-item-img"
+            :previewSrcList="srcList"
+            style="width: 100%; height: 100%;"
+          >
+          </el-image>
           <div class="info">
             <i
               v-if="item.file"
@@ -73,6 +81,7 @@ todo: 文件判断使用 serveWorker 优化性能
       :multiple="multiple"
       :accept="accept"
     />
+    <!-- <el-image-viewer v-if="showViewer" @close="closeViewer" :initial-index="imageInitialIndex" :url-list="srcList" /> -->
   </div>
 </template>
 
@@ -221,10 +230,12 @@ export default {
   name: 'UploadImgs',
   data() {
     return {
+      srcList: [],
       itemList: [],
+      imageRefs: [],
       loading: false,
       currentId: '', // 正在操作项的id
-      globalImgPriview: '$imagePreview', // 全局图片预览方法名
+      imageInitialIndex: 0,
     }
   },
   props: {
@@ -714,23 +725,13 @@ export default {
      * @param {Number} index 索引序号
      */
     previewImg(data, index) {
-      // 如果有全局预览方法
-      if (this[this.globalImgPriview]) {
-        const images = []
-        this.itemList.forEach(element => {
-          if (element.display) {
-            images.push(element.display)
-          }
-        })
-        this[this.globalImgPriview]({
-          images,
-          index,
-        })
-      } else {
-        // element 原生粗糙模式
-        this.$confirm(`<img src="${data.display}" style="width: 100%;" />`, '预览', {
-          dangerouslyUseHTMLString: true,
-        })
+      const usable = this.itemList.filter(item => item.status !== 'input')
+      this.srcList = usable.map(item => item.display)
+      this.imageRefs[index].showViewer = true
+    },
+    setImageRef(el) {
+      if (el) {
+        this.imageRefs.push(el)
       }
     },
     /**
@@ -1079,6 +1080,12 @@ export default {
   }
 
   .thumb-item {
+    :v-deep(.el-image-viewer__canvas) {
+      position: absolute;
+      max-width: 800px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
     .info {
       display: flex;
       align-items: center;
diff --git a/src/component/layout/user.vue b/src/component/layout/user.vue
index be485dcf..114343c1 100644
--- a/src/component/layout/user.vue
+++ b/src/component/layout/user.vue
@@ -392,12 +392,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.user-dialog ::v-deep .el-dialog .el-dialog__header {
+.user-dialog :v-deep(.el-dialog .el-dialog__header) {
   border-bottom: 1px solid #dae1ed;
   padding-bottom: 20px;
 }
 
-.user-dialog ::v-deep .el-dialog .el-dialog__body {
+.user-dialog :v-deep(.el-dialog .el-dialog__body) {
   padding-bottom: 00px;
 }
 
diff --git a/src/lin/plugin/preview/index.js b/src/lin/plugin/preview/index.js
deleted file mode 100644
index 8162b590..00000000
--- a/src/lin/plugin/preview/index.js
+++ /dev/null
@@ -1,51 +0,0 @@
-// TODO: Vue3 Plugin
-import { createApp } from 'vue'
-import Preview from '@/component/base/preview/preview'
-
-const previewImage = {}
-const app = createApp()
-previewImage.install = vue => {
-  // eslint-disable-line
-  const PreviewConstructor = vue.extend(Preview)
-
-  let instance = null
-
-  // eslint-disable-next-line func-names
-  PreviewConstructor.prototype.close = function () {
-    this.data = []
-    this.options = {}
-    this.imageIndex = 0
-  }
-
-  const getInstance = () => {
-    if (!instance) {
-      instance = new PreviewConstructor()
-    }
-    return instance
-  }
-
-  app.config.globalProperties.$imagePreview = (opts = {}) => {
-    // eslint-disable-line
-    const elem = document.createElement('div')
-    if (!instance) {
-      let myInstance = getInstance()
-      vue.prototype.$previewInstance = myInstance // eslint-disable-line
-      myInstance.$mount(elem)
-      myInstance.data = opts.images || []
-      myInstance.imageIndex = opts.index || 0
-      myInstance.options = opts.defaultOpt || {}
-      document.body.appendChild(myInstance.$el)
-      myInstance.$on('close', () => {
-        myInstance.close()
-        document.body.removeChild(myInstance.$el)
-        myInstance.$destroy()
-        myInstance = null
-        instance = null
-      })
-    }
-  }
-}
-
-// Vue.use(previewImage)
-
-export default previewImage
diff --git a/src/lin/plugin/preview/readme.md b/src/lin/plugin/preview/readme.md
deleted file mode 100644
index 569464c4..00000000
--- a/src/lin/plugin/preview/readme.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# 图片预览插件
-
-## methods
-
-```
-this.$imagePreview(options = {})
-```
-
-options有三个参数
-
-参数 | 默认值 | 说明
---- | ---| ---
-images | 空数组 | 图片的url数组
-index | 0 | 预览图片的索引值, 默认是0
-defaultOpt | {} | 配置项
-
-defaultOpt 的配置项请参考[photoswipe配置项](http://photoswipe.com/documentation/options.html)，
-
-```
-defaultOpt: {
-  fullscreenEl: true,
-  shareEl: false,
-  arrowEl: true,
-  preloaderEl: true,
-  loop: false,
-  bgOpacity: 0.85,
-  showHideOpacity: true,
-  errorMsg: '<div class="pswp__error-msg">图片加载失败</div>',
-}
-```
\ No newline at end of file
diff --git a/src/plugin/custom/README.md b/src/plugin/custom/README.md
index 0a2c3234..f06aa550 100644
--- a/src/plugin/custom/README.md
+++ b/src/plugin/custom/README.md
@@ -1,32 +1,3 @@
-# 插件名: 图像上传组件示例(ImgsUpload)
+# 插件名: 自定义组件展示
 
-插件描述, 图像上传组件示例 用于处于xxx业务场景, 提供了xxx功能
-
-## 舞台视口列表
-
-### TestView
-
-地址: `/ImgsUpload/test.vue`
-显示xxx内容, 可进行xxx操作
-
-## 自由视口列表
-
-### Test
-
-属性:
-
-| Require | Name |  Type  | Default | Desc |
-|:-------:|:----:|:------:|:-------:|:----:|
-|  true   | name | String |   val   | 描述 |
-  
-事件:
-
-| Name |   Argument   | Desc |
-|:----:|:------------:|:----:|
-| name | 事件参数描述 | 描述 |
-
-方法:
-
-| Name |   Argument   |   Result   | Desc |
-|:----:|:------------:|:----------:|:----:|
-| name | 方法参数描述 | 返回值描述 | 描述 |
\ No newline at end of file
+展示 Lin-CMS 自行封装的组件，开发者可根据需求选择是否使用。
\ No newline at end of file
diff --git a/src/plugin/custom/package.json b/src/plugin/custom/package.json
index b7f9befe..1e078deb 100644
--- a/src/plugin/custom/package.json
+++ b/src/plugin/custom/package.json
@@ -1,10 +1,12 @@
 {
   "name": "lc-plugin-custom",
-  "title": "图像上传组件示例",
+  "title": "自定义组件展示",
   "version": "1.0.0",
-  "_linVersion": "0.0.1-alpha.3",
-  "description": "展示图像上传组件能力",
+  "_linVersion": "0.4.0",
+  "description": "自定义组件展示",
   "author": "",
-  "dependencies": {},
+  "dependencies": {
+    "element-plus": "^1.0.2-beta.36"
+  },
   "devDependencies": {}
 }
diff --git a/src/plugin/custom/stage-config.js b/src/plugin/custom/stage-config.js
index a0edc174..468caf4b 100644
--- a/src/plugin/custom/stage-config.js
+++ b/src/plugin/custom/stage-config.js
@@ -18,16 +18,6 @@ const CustomRouter = {
       icon: 'iconfont icon-upload',
       permission: null,
     },
-    {
-      title: 'gallery 画廊',
-      type: 'view',
-      name: 'GalleryDemo',
-      route: '/custom/gallery',
-      filePath: 'plugin/custom/view/gallery.vue',
-      inNav: true,
-      icon: 'iconfont icon-art-gallery-',
-      permission: null,
-    },
     {
       title: 'editor 富文本',
       type: 'view',
diff --git a/src/plugin/custom/view/gallery.vue b/src/plugin/custom/view/gallery.vue
deleted file mode 100644
index 7b4d5df0..00000000
--- a/src/plugin/custom/view/gallery.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <div class="lin-container">
-    <div class="lin-title">画廊插件演示</div>
-    <div class="lin-wrap container">
-      <div class="imgs-upload-container">
-        <div class="img-box" @click="preview(index)" v-for="(url, index) in thumbs" :key="index">
-          <el-image class="thumb-item-img" :src="url" fit="cover" style="width: 100%; height: 100%;"></el-image>
-          <div class="control">
-            <div class="preview"><i class="el-icon-view"></i></div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <source-code
-      link="https://github.com/TaleLin/lin-cms-vue/blob/master/src/plugins/LinCmsUi/views/table/TableCombo.vue"
-    ></source-code>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      urls: [
-        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/gallery1.jpg',
-        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/gallery2.jpg',
-        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/gallery3.jpg',
-        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/gallery4.jpg',
-        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/gallery5.jpg',
-      ],
-      thumbs: [
-        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/thumb/gallery1.jpg',
-        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/thumb/gallery2.jpg',
-        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/thumb/gallery3.jpg',
-        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/thumb/gallery4.jpg',
-        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/thumb/gallery5.jpg',
-      ],
-    }
-  },
-  methods: {
-    preview(index) {
-      this.$imagePreview({
-        images: this.urls,
-        index,
-      })
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.container {
-  padding: 20px 30px;
-
-  .imgs-upload-container {
-    display: flex;
-    flex-wrap: wrap;
-
-    .img-box {
-      border: 1px dashed #d9d9d9;
-      border-radius: 3px;
-      -webkit-transition: all 0.1s;
-      transition: all 0.1s;
-      color: #666666;
-      margin-right: 1em;
-      margin-bottom: 1em;
-      width: 200px;
-      height: 150px;
-      cursor: pointer;
-      font-size: 12px;
-      text-align: center;
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      line-height: 1.3;
-      flex-direction: column;
-
-      .el-image {
-        width: 100%;
-        height: 100%;
-      }
-
-      .control {
-        display: flex;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        -webkit-box-pack: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        opacity: 0;
-        background-color: rgba(0, 0, 0, 0.3);
-        -webkit-transition: all 0.3s;
-        transition: all 0.3s;
-        -webkit-transition-delay: 0.1s;
-        transition-delay: 0.1s;
-
-        .preview {
-          color: white;
-          font-size: 2em;
-          transition: all 0.2s;
-        }
-      }
-
-      &:hover {
-        .control {
-          opacity: 1;
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/plugin/custom/view/multiple-input.vue b/src/plugin/custom/view/multiple-input.vue
index e478261e..2b45db7b 100644
--- a/src/plugin/custom/view/multiple-input.vue
+++ b/src/plugin/custom/view/multiple-input.vue
@@ -78,11 +78,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.lin-wrap-ui ::v-deep .el-card__body {
+.lin-wrap-ui :v-deep(.el-card__body) {
   padding-top: 30px;
   padding-bottom: 0px;
 }
-.lin-wrap-ui ::v-deep .el-collapse {
+.lin-wrap-ui :v-deep(.el-collapse) {
   border-top: none;
   border-bottom: none;
   cursor: pointer;
diff --git a/src/plugin/custom/view/upload-image.vue b/src/plugin/custom/view/upload-image.vue
index 66592687..4d50ff12 100644
--- a/src/plugin/custom/view/upload-image.vue
+++ b/src/plugin/custom/view/upload-image.vue
@@ -101,16 +101,16 @@ export default {
     return {
       remoteName: 'remoteFucAsync',
       remoteNameObj: {
-        remoteFucAsync: this.remoteFucAsync,
         remoteFuc: this.remoteFuc,
-        remoteFucSuccessAsync: this.remoteFucSuccessAsync,
+        remoteFucAsync: this.remoteFucAsync,
         remoteFucSuccess: this.remoteFucSuccess,
+        remoteFucSuccessAsync: this.remoteFucSuccessAsync,
       },
       fit: 'cover',
       rules: {
+        maxSize: 5,
         minWidth: 100,
         minHeight: 100,
-        maxSize: 5,
       },
       rules2: {
         minWidth: 100,
@@ -166,11 +166,6 @@ export default {
       ],
     }
   },
-  // 计算属性设置
-  computed: {},
-  // 数据变更监听
-  watch: {},
-  mounted() {},
   // 当页面使用路由参数时, 参数部分变化触发的动作在本函数中操作
   // https://router.vuejs.org/zh/guide/advanced/navigation-guards.htmll#组件内的守卫
   // beforeRouteUpdate(to, from, next) {
diff --git a/src/plugin/lin-cms-ui/assets/style/container.scss b/src/plugin/lin-cms-ui/assets/style/container.scss
index 16b70ade..1b36e482 100644
--- a/src/plugin/lin-cms-ui/assets/style/container.scss
+++ b/src/plugin/lin-cms-ui/assets/style/container.scss
@@ -1,8 +1,8 @@
-.lin-wrap-ui ::v-deep .el-card__body {
+.lin-wrap-ui :v-deep(.el-card__body) {
   padding-top: 30px;
   padding-bottom: 0px;
 }
-.lin-wrap-ui ::v-deep .el-collapse {
+.lin-wrap-ui :v-deep(.el-collapse) {
   border-top: none;
   border-bottom: none;
   cursor: pointer;
diff --git a/src/plugin/lin-cms-ui/view/data/tag/tag.vue b/src/plugin/lin-cms-ui/view/data/tag/tag.vue
index 9f88ccbc..af91c84d 100644
--- a/src/plugin/lin-cms-ui/view/data/tag/tag.vue
+++ b/src/plugin/lin-cms-ui/view/data/tag/tag.vue
@@ -217,7 +217,7 @@ export default {
               margin-left: 10px;
               vertical-align: bottom;
             }
-            .input-new-tag ::v-deep .el-input__inner {
+            .input-new-tag :v-deep(.el-input__inner) {
               height: 24px;
             }
           </style>
@@ -370,7 +370,7 @@ export default {
   margin-left: 10px;
   vertical-align: bottom;
 }
-.input-new-tag ::v-deep .el-input__inner {
+.input-new-tag :v-deep(.el-input__inner) {
   height: 24px;
 }
 </style>
diff --git a/src/plugin/lin-cms-ui/view/form/input.vue b/src/plugin/lin-cms-ui/view/form/input.vue
index 01bcbc1d..941225a7 100644
--- a/src/plugin/lin-cms-ui/view/form/input.vue
+++ b/src/plugin/lin-cms-ui/view/form/input.vue
@@ -189,7 +189,7 @@ export default {
 <style lang="scss" scoped>
 @import '../../assets/style/container.scss';
 
-.input-with-select ::v-deep .el-input-group__prepend {
+.input-with-select :v-deep(.el-input-group__prepend) {
   background-color: #fff;
   width: 100px;
   border-top: 1px solid #dcdfe6;
diff --git a/src/plugin/lin-cms-ui/view/form/slider.vue b/src/plugin/lin-cms-ui/view/form/slider.vue
index e821c5c2..ab39c9eb 100644
--- a/src/plugin/lin-cms-ui/view/form/slider.vue
+++ b/src/plugin/lin-cms-ui/view/form/slider.vue
@@ -336,7 +336,7 @@ export default {
 <style lang="scss" scoped>
 @import '../../assets/style/container.scss';
 
-.base-box-card ::v-deep .el-card__body {
+.base-box-card :v-deep(.el-card__body) {
   padding-top: 0px;
   padding-bottom: 0px;
 }
diff --git a/src/plugin/lin-cms-ui/view/notice/loading.vue b/src/plugin/lin-cms-ui/view/notice/loading.vue
index 691cf968..49d8640b 100644
--- a/src/plugin/lin-cms-ui/view/notice/loading.vue
+++ b/src/plugin/lin-cms-ui/view/notice/loading.vue
@@ -205,7 +205,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/style/container.scss';
-.loadingDemo ::v-deep .el-table {
+.loadingDemo :v-deep(.el-table) {
   border: none;
 }
 </style>
diff --git a/src/plugin/lin-cms-ui/view/other/dialog.vue b/src/plugin/lin-cms-ui/view/other/dialog.vue
index 6511d252..c4255845 100644
--- a/src/plugin/lin-cms-ui/view/other/dialog.vue
+++ b/src/plugin/lin-cms-ui/view/other/dialog.vue
@@ -355,7 +355,7 @@ export default {
   margin-bottom: 20px;
 }
 
-.dialogForm ::v-deep .el-select {
+.dialogForm :v-deep(.el-select) {
   width: 100%;
 }
 </style>
diff --git a/src/plugin/lin-cms-ui/view/other/timeline.vue b/src/plugin/lin-cms-ui/view/other/timeline.vue
index 3f434915..95165569 100644
--- a/src/plugin/lin-cms-ui/view/other/timeline.vue
+++ b/src/plugin/lin-cms-ui/view/other/timeline.vue
@@ -276,15 +276,15 @@ export default {
   margin-bottom: 20px;
 }
 
-.timeLineCard ::v-deep .el-card__body {
+.timeLineCard :v-deep(.el-card__body) {
   padding: 20px;
 }
 
-.timeLineCard ::v-deep .el-card__body h4 {
+.timeLineCard :v-deep(.el-card__body h4) {
   margin: 20px 0px;
 }
 
-.timeLineCard ::v-deep .el-card__body {
+.timeLineCard :v-deep(.el-card__body) {
   margin: 14px 0px;
 }
 </style>
diff --git a/src/plugin/lin-cms-ui/view/table/table-combo.vue b/src/plugin/lin-cms-ui/view/table/table-combo.vue
index e07e4c88..1319786a 100644
--- a/src/plugin/lin-cms-ui/view/table/table-combo.vue
+++ b/src/plugin/lin-cms-ui/view/table/table-combo.vue
@@ -518,16 +518,16 @@ export default {
   }
 }
 // dialog
-.tableSample ::v-deep .el-dialog__footer {
+.tableSample :v-deep(.el-dialog__footer) {
   text-align: left;
   padding-left: 30px;
 }
 
-.tableSample ::v-deep .el-dialog__header {
+.tableSample :v-deep(.el-dialog__header) {
   padding-left: 30px;
 }
 
-.tableSample ::v-deep .el-dialog__body {
+.tableSample :v-deep(.el-dialog__body) {
   padding: 30px;
 }
 </style>
diff --git a/src/view/about/about.vue b/src/view/about/about.vue
index b4aa67ed..6c7b7596 100644
--- a/src/view/about/about.vue
+++ b/src/view/about/about.vue
@@ -466,12 +466,12 @@ export default {
       .personal-tabs {
         margin-bottom: 20px;
       }
-      .personal-tabs ::v-deep .is-top {
+      .personal-tabs :v-deep(.is-top) {
         width: 320px;
         display: flex;
         justify-content: space-around;
       }
-      .personal-tabs ::v-deep .el-tabs__content {
+      .personal-tabs :v-deep(.el-tabs__content) {
         text-indent: 20px;
       }
     }
diff --git a/src/view/admin/group/group-list.vue b/src/view/admin/group/group-list.vue
index 1327917d..1c3cb6ba 100644
--- a/src/view/admin/group/group-list.vue
+++ b/src/view/admin/group/group-list.vue
@@ -118,15 +118,15 @@ export default {
     font-weight: 500;
   }
 }
-.groupListInfoDialog ::v-deep .el-dialog__footer {
+.groupListInfoDialog :v-deep(.el-dialog__footer) {
   text-align: left;
   padding-left: 30px;
 }
-.groupListInfoDialog ::v-deep .el-dialog__header {
+.groupListInfoDialog :v-deep(.el-dialog__header) {
   padding-left: 30px;
 }
 
-.groupListInfoDialog ::v-deep .el-dialog__body {
+.groupListInfoDialog :v-deep(.el-dialog__body) {
   padding: 30px;
 }
 </style>
diff --git a/src/view/admin/user/user-password.vue b/src/view/admin/user/user-password.vue
index 38005ca5..b12eb5f5 100644
--- a/src/view/admin/user/user-password.vue
+++ b/src/view/admin/user/user-password.vue
@@ -127,7 +127,7 @@ function getRules(ctx, info, form) {
 </script>
 
 <style lang="scss" scoped>
-.el-form-item ::v-deep .el-form-item__label {
+.el-form-item :v-deep(.el-form-item__label) {
   padding-right: 10px !important;
 }
 </style>
diff --git a/src/view/log/log.vue b/src/view/log/log.vue
index f065e4a4..7f800b6b 100644
--- a/src/view/log/log.vue
+++ b/src/view/log/log.vue
@@ -313,7 +313,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.log ::v-deep .el-button {
+.log :v-deep(.el-button) {
   padding-top: 10px;
   padding-bottom: 10px;
 }