perf: 文件预览不能滚动的问题

resources/assets/js/components/MDEditor/components/preview/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="preview">
+    <div ref="preview" class="markdown-preview-warp">
         <div
             :class="`markdown-preview ${'markdown-theme-' + theme}`"
             v-html="html"

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

@@ -62,7 +62,7 @@
                 <OnlyOffice v-else-if="['word', 'excel', 'ppt'].includes(file.type)" v-model="contentDetail"/>
             </div>
         </template>
-        <div v-if="loadContent > 0 || previewLoad" class="content-load"><Loading/></div>
+        <div v-if="contentLoad" class="content-load"><Loading/></div>
     </div>
 </template>
 
@@ -182,6 +182,10 @@ export default {
             return this.contentBak == $A.jsonStringify(this.contentDetail);
         },
 
+        contentLoad() {
+            return this.loadContent > 0 || this.previewLoad;
+        },
+
         isPreview() {
             return this.contentDetail && this.contentDetail.preview === true;
         },

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

@@ -1,11 +1,15 @@
 <template>
-    <div class="file-content">
+    <div class="file-preview">
         <iframe v-if="isPreview" ref="myPreview" class="preview-iframe" :src="previewUrl"></iframe>
         <template v-else>
             <div v-show="!['word', 'excel', 'ppt'].includes(file.type)" class="edit-header">
                 <div class="header-title">
                     {{formatName(file)}}
                     <Tag color="default">{{$L('只读')}}</Tag>
+                    <div class="refresh">
+                        <Loading v-if="contentLoad"/>
+                        <Icon v-else type="ios-refresh" @click="getContent" />
+                    </div>
                 </div>
                 <Dropdown v-if="file.type=='mind' || file.type=='flow' || file.type=='sheet'"
                           trigger="click"
@@ -35,7 +39,7 @@
                 <OnlyOffice v-else-if="['word', 'excel', 'ppt'].includes(file.type)" v-model="contentDetail" :code="code" readOnly/>
             </div>
         </template>
-        <div v-if="loadContent > 0 || previewLoad" class="content-load"><Loading/></div>
+        <div v-if="contentLoad" class="content-load"><Loading/></div>
     </div>
 </template>
 
@@ -69,7 +73,6 @@ export default {
     data() {
         return {
             loadContent: 0,
-            loadIng: 0,
             contentDetail: null,
             loadPreview: true,
         }
@@ -96,6 +99,10 @@ export default {
     },
 
     computed: {
+        contentLoad() {
+            return this.loadContent > 0 || this.previewLoad;
+        },
+
         isPreview() {
             return this.contentDetail && this.contentDetail.preview === true;
         },
@@ -128,7 +135,6 @@ export default {
                 this.contentDetail = $A.cloneJSON(this.file);
                 return;
             }
-            this.loadIng++;
             this.loadContent++;
             this.$store.dispatch("call", {
                 url: 'file/content',
@@ -136,12 +142,10 @@ export default {
                     id: this.code || this.file.id,
                 },
             }).then(({data}) => {
-                this.loadIng--;
                 this.loadContent--;
                 this.contentDetail = data.content;
             }).catch(({msg}) => {
                 $A.modalError(msg);
-                this.loadIng--;
                 this.loadContent--;
             })
         },

resources/assets/sass/pages/components/file-content.scss

@@ -1,4 +1,5 @@
-.file-content {
+.file-content,
+.file-preview {
     position: absolute;
     top: 0;
     left: 0;
@@ -54,9 +55,6 @@
                     color: #000000;
                 }
             }
-            .ivu-tag {
-                margin-left: 4px;
-            }
         }
         .header-user {
             margin-right: 24px;
@@ -206,6 +204,51 @@
         }
     }
 }
+
+.file-preview {
+    .edit-header {
+        .header-title {
+            display: flex;
+            align-items: center;
+
+            .ivu-tag {
+                margin-left: 6px;
+                padding: 0 6px;
+                line-height: 20px;
+            }
+
+            .refresh {
+                display: flex;
+                align-items: center;
+                margin-left: 6px;
+
+                .common-loading {
+                    margin: 2px;
+                    width: 16px;
+                    height: 16px;
+                }
+
+                > i {
+                    opacity: 0.6;
+                    font-size: 20px;
+                    cursor: pointer;
+                    transition: all 0.2s;
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+    .content-body {
+        overflow: hidden;
+        .markdown-preview-warp {
+            flex: 1;
+            overflow: auto;
+        }
+    }
+}
+
 .luckysheet-input-box {
     z-index: 99999 !important;
 }
@@ -215,7 +258,7 @@
         overflow: auto;
         .edit-header,
         .content-body {
-            min-width: 1200px;
+            min-width: 900px;
         }
     }
 }