perf: 优化文本编辑器

src/components/preview/SimTextPreview.vue

@@ -55,16 +55,16 @@
 
           <el-button v-if="isShowUpdateBtn" @click="saveAll(false)" :class="lightTheme?'':'dark-button'" size="small" :loading="updating">保存所有</el-button>
 
-<!--          <el-button-->
+          <el-button
-<!--            v-if="editableTabsValue.endsWith('.md')"-->
+            v-if="editableTabsValue.endsWith('.md') && editableTabs.length > 0"
-<!--            :class="lightTheme?'':'dark-button'"-->
+            :class="lightTheme?'':'dark-button'"
-<!--            size="small"-->
+            size="small"
-<!--            circle-->
+            circle
-<!--            @click="changePreviewMode"-->
+            @click="changePreviewMode"
-<!--            :title="previewMode?'编辑':'预览'"-->
+            :title="previewMode?'编辑':'预览'"
-<!--          >-->
+          >
-<!--            <icon :type="previewMode?lightTheme?'icon-quxiaoyulan1':'icon-quxiaoyulan1-copy':lightTheme?'icon-yulan':'icon-yulan-copy'"></icon>-->
+            <icon :type="previewMode?lightTheme?'icon-quxiaoyulan1':'icon-quxiaoyulan1-copy':lightTheme?'icon-yulan':'icon-yulan-copy'"></icon>
-<!--          </el-button>-->
+          </el-button>
           <el-button
             :class="lightTheme?'':'dark-button'"
             size="small"
@@ -82,7 +82,7 @@
         </div>
       </div>
       <div class="content" :style="{height: editorHieght+26+'px'}">
-        <div class="file-contents" :style="{width: contentsWidth+'px',height: editorHieght+32+'px',transition: transition,left: panelReadOnly || moblie ?`-${contentsWidth}px`:`0px`}">
+        <div class="file-contents" :style="{width: contentsWidth+'px',height: editorHieght+32+'px',transition: transition,left: panelReadOnly || moblie || contentsHide ?`-${contentsWidth}px`:`0px`}">
           <div class="content-tree">
             <fancy-tree
               ref="fancTree"
@@ -101,12 +101,12 @@
             </fancy-tree>
           </div>
         </div>
-        <div class="editor-resize" :style="{marginLeft: panelReadOnly || moblie ?`0px`:`${contentsWidth}px`,transition: transition}">
+        <div class="editor-resize" :style="{marginLeft: panelReadOnly || moblie || contentsHide ?`0px`:`${contentsWidth}px`,transition: transition}">
           <div class="darg-resize-conter"></div>
           <i v-show="!panelReadOnly && !moblie " class="editor-resize-conter" icon="el-icon-arrow-right" title="隐藏文件目录" @click="hideContents"/>
         </div>
         <div :style="{width: editorWidth-2+'px'}">
-          <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="clickTab">
+          <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="clickTab()">
             <el-tab-pane
               v-for="(item,index) in editableTabs"
               :key="item.name"
@@ -199,7 +199,7 @@
     data(){
       return{
         lightTheme: true,
-        contentsHide: false,
+        contentsHide: true,
         defalutLanguage: 'redis',
         lineWrapping: false,
         moblie: false,
@@ -402,6 +402,7 @@
       },
       // loading
       viewHistoryFile({historyInfo, diff, recovery}) {
+        this.previewMode = false
         const pathname = this.editableTabsValue
         let currentIndex = this.editableTabs.findIndex(editable => editable.name === pathname)
         const tab = this.editableTabs[currentIndex]
@@ -590,7 +591,7 @@
                 that.dialogWidth = dialogWidth + moveX
                 that.editorWidth = editorWidth + moveX
                 that.editorHieght = editorHieght + (endY - startY)
-                that.loadConterSize()
+                that.loadContentSize()
               }
             }
             // 鼠标松开事件
@@ -714,7 +715,7 @@
             fileName: row.name,
             username: this.$store.state.user.name
           }
-          api.previewTextByPath(params).then((res)=>{
+          api.previewTextByPath(params).then(()=>{
             this.loading.close()
             // 添加一个tab
             let tab = {
@@ -797,11 +798,7 @@
         this.loadEditorSize()
       },
       checkMobile() {
-        if (!this.$pc) {
+        this.moblie = !this.$pc;
-          this.moblie = true
-        } else {
-          this.moblie = false
-        }
       },
       checkReadOnly(fileUserId){
         if(this.$store.state.user.token && this.$store.state.user.userId === fileUserId){
@@ -827,12 +824,12 @@
           this.editorWidth = this.dialogWidth - this.contentsWidth
         }
         this.editorHieght = document.body.clientHeight * this.dialogWidthPercent - 76
-        this.loadConterSize()
+        this.loadContentSize()
       },
-      loadConterSize(){
+      loadContentSize(){
-        let conter = document.querySelector('.editor-resize .editor-resize-conter');
+        let content = document.querySelector('.editor-resize .editor-resize-conter');
-        if(conter){
+        if(content){
-          conter.style.marginTop = ((this.editorHieght+26)/2 - conter.clientHeight/2) + 'px'
+          content.style.marginTop = ((this.editorHieght+26)/2 - content.clientHeight/2) + 'px'
         }
       },
       handleClose(done) {
@@ -866,6 +863,7 @@
         }
       },
       closeDialog() {
+        this.previewMode = false
         this.textPreviewVisible = false
         this.$emit('update:status', this.textPreviewVisible)
         this.isSaveDialogVisible = false
@@ -1037,8 +1035,10 @@
         this.clickTab()
       },
       clickTab() {
-        // this.editorWidth += 0.001
+        this.editorWidth += 0.001
-        // this.editorHieght += 0.001
+        this.editorHieght += 0.001
+        // 加载历史版本
+        this.$refs.historyPopover.loadHistoryPathList(this.editableTabsValue)
       },
       removeTab(targetName) {
         let tabs = this.editableTabs;
@@ -1534,13 +1534,20 @@
       .nwse-resize {
         z-index: 99999;
         position: fixed;
-        width: 15px;
+        width: 12px;
-        background: #00000000;
+        margin-left: 3px;
+        background: #f0f0f0;
         height: 15px;
         margin-top: -15px;
         float: right;
         cursor: nwse-resize;
       }
+      .nwse-resize::before {
+        content: "⠿";
+        display: inline-block;
+        padding-right: 5px;
+        vertical-align: middle;
+      }
       .el-button--small.is-circle {
         padding: 9px 9px;
       }