perf: 优化图片浏览

resources/assets/js/components/ImgUpload.vue

@@ -46,7 +46,7 @@
         </div>
         <Modal :title="$L('浏览图片空间')" v-model="browseVisible" class="img-upload-modal" width="710">
             <div class="browse-load" v-if="isLoading">{{$L('加载中...')}}</div>
-            <div class="browse-list" :class="httpType==='input'?'browse-list-disabled':''" ref="browselistbox">
+            <div class="browse-list" v-else :class="httpType==='input'?'browse-list-disabled':''" ref="browselistbox">
                 <div v-if="browseList.length <= 0">{{$L('无内容')}}</div>
                 <div v-else class="browse-item" v-for="item in browseList" @click="browseItem(item)">
                     <Icon v-if="item.active" class="browse-icon" type="ios-checkmark-circle"></Icon>
@@ -217,8 +217,9 @@
             },
             handleView (item) {
                 //查看
-                this.visible = true;
+                this.$store.dispatch("previewImage", item.url)
-                this.imgVisible = item.url;
+                // this.visible = true;
+                // this.imgVisible = item.url;
             },
             handleRemove (item) {
                 //删除

resources/assets/js/components/PreviewImage/state.vue

@@ -23,8 +23,7 @@ export default {
     watch: {
         show(v) {
             if (v) {
-                this.$store.state.previewImageIndex = Math.max(this.$store.state.previewImageIndex, 0)
+                this.$store.state.previewImageIndex = Math.min(Math.max(this.$store.state.previewImageIndex, 0), this.$store.state.previewImageList.length - 1)
-                this.$store.state.previewImageIndex = Math.min(this.$store.state.previewImageIndex, this.$store.state.previewImageList.length - 1)
             } else {
                 this.$store.state.previewImageIndex = 0;
                 this.$store.state.previewImageList = [];
@@ -33,9 +32,8 @@ export default {
         previewImageList(l) {
             if (l.length > 0) {
                 if ($A.isEEUiApp) {
-                    let position = Math.max(this.$store.state.previewImageIndex, 0)
+                    const position = Math.min(Math.max(this.$store.state.previewImageIndex, 0), this.$store.state.previewImageList.length - 1)
-                    position = Math.min(position, this.$store.state.previewImageList.length - 1)
+                    const paths = l.map(item => {
-                    let paths = l.map(item => {
                         if ($A.isJson(item)) {
                             return $A.rightDelete(item.src, "_thumb.jpg");
                         }

resources/assets/js/components/TEditor.vue

@@ -333,8 +333,7 @@
                                 if (imgElm && imgElm.nodeName === "IMG") {
                                     index = array.findIndex(item => item.src === imgElm.getAttribute("src"));
                                 }
-                                this.$store.state.previewImageIndex = index;
+                                this.$store.dispatch("previewImage", {index, list: array})
-                                this.$store.state.previewImageList = array;
                             }
                         });
                         editor.ui.registry.addButton('uploadFiles', {

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -18,7 +18,7 @@
                     </div>
 
                     <div class="dialog-block">
-                        <div class="dialog-avatar">
+                        <div class="dialog-avatar" @click="onViewAvatar">
                             <template v-if="dialogData.type=='group'">
                                 <EAvatar v-if="dialogData.avatar" class="img-avatar" :src="dialogData.avatar" :size="42"></EAvatar>
                                 <i v-else-if="dialogData.group_type=='department'" class="taskfont icon-avatar department">&#xe75c;</i>
@@ -2226,8 +2226,7 @@ export default {
                     if (target.classList.contains('browse')) {
                         this.onViewPicture(target.currentSrc);
                     } else {
-                        this.$store.state.previewImageIndex = 0;
+                        this.$store.dispatch("previewImage", $A.getTextImagesInfo(target.outerHTML))
-                        this.$store.state.previewImageList = $A.getTextImagesInfo(target.outerHTML);
                     }
                     break;
 
@@ -2310,11 +2309,9 @@ export default {
             //
             const index = list.findIndex(({src}) => src === currentUrl);
             if (index > -1) {
-                this.$store.state.previewImageIndex = index;
+                this.$store.dispatch("previewImage", {index, list})
-                this.$store.state.previewImageList = list;
             } else {
-                this.$store.state.previewImageIndex = 0;
+                this.$store.dispatch("previewImage", currentUrl)
-                this.$store.state.previewImageList = [currentUrl];
             }
         },
 
@@ -2628,6 +2625,18 @@ export default {
                 img.src = url;
             })
         },
+
+        onViewAvatar(e) {
+            let src = null
+            if (e.target.tagName === "IMG") {
+                src = e.target.src
+            } else {
+                src = $A(e.target).find("img").attr("src")
+            }
+            if (src) {
+                this.$store.dispatch("previewImage", src)
+            }
+        }
     }
 }
 </script>

resources/assets/js/pages/manage/components/IFrame.vue

@@ -33,8 +33,7 @@ export default {
             }
             data = $A.jsonParse(data);
             if (data.source === 'fileView' && data.action === 'picture') {
-                this.$store.state.previewImageIndex = data.params.index;
+                this.$store.dispatch("previewImage", {index: data.params.index, list: data.params.array})
-                this.$store.state.previewImageList = data.params.array;
             }
             this.$emit("on-message", data)
         },

resources/assets/js/pages/manage/components/TaskDetail.vue

@@ -1454,21 +1454,23 @@ export default {
                 const list = this.fileList.filter(item => ['jpg', 'jpeg', 'gif', 'png'].includes(item.ext))
                 const index = list.findIndex(item => item.id === file.id);
                 if (index > -1) {
-                    this.$store.state.previewImageIndex = index;
+                    this.$store.dispatch("previewImage", {
-                    this.$store.state.previewImageList = list.map(item => {
+                        index, list: list.map(item => {
-                        return {
+                            return {
-                            src: item.path,
+                                src: item.path,
-                            width: item.width,
+                                width: item.width,
-                            height: item.height,
+                                height: item.height,
-                        }
+                            }
-                    });
+                        })
+                    })
                 } else {
-                    this.$store.state.previewImageIndex = 0;
+                    this.$store.dispatch("previewImage", {
-                    this.$store.state.previewImageList = [{
+                        index: 0, list: [{
-                        src: file.path,
+                            src: file.path,
-                        width: file.width,
+                            width: file.width,
-                        height: file.height,
+                            height: file.height,
-                    }];
+                        }]
+                    })
                 }
                 return
             }

resources/assets/js/store/actions.js

@@ -2677,6 +2677,19 @@ export default {
         }
     },
 
+    /**
+     * 预览图片
+     * @param state
+     * @param data
+     */
+    previewImage({state}, data) {
+        if (!$A.isJson(data)) {
+            data = {index:0, list: [data]}
+        }
+        state.previewImageIndex = data.index;
+        state.previewImageList = data.list;
+    },
+
     /** *****************************************************************************************/
     /** *********************************** websocket *******************************************/
     /** *****************************************************************************************/

resources/assets/sass/components/img-update.scss

@@ -192,8 +192,10 @@
 }
 
 .browse-load {
-    margin: 20px;
+    display: flex;
-    text-align: center;
+    align-items: center;
+    justify-content: center;
+    min-height: 110px;
 }
 
 .browse-list {