perf: 优化文本编辑器和流程图的使用体验

src/components/Minder/minder.vue

@@ -417,6 +417,7 @@ export default {
         this.saved = true
         this.title = this.file.name
         this.$emit('onEdit', this.saved)
+        this.bakValue = value
         this.$refs.historyPopover.loadHistoryList(this.file.id)
       }).catch(() => {
         this.saveBtnUpdating = false

src/components/MonacoEditorVue/index.js

@@ -119,6 +119,19 @@ export default {
         theme: theme,
         ...options
       });
+      this.editor.addAction({
+        id: 'my-unique-id',
+        label: 'Hello World',
+        keybindings: [
+          monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_M,
+        ],
+        contextMenuGroupId: 'navigation',
+        contextMenuOrder: 1.5,
+        run: function(ed) {
+          alert('Hello World!');
+        }
+      });
+
       this.diffEditor && this._setModel(this.value, this.original);
       this._editorMounted(this.editor);      //编辑器初始化后
     },

src/components/ShowFile/ShowFile.vue

@@ -449,9 +449,10 @@
       title="提示"
       content="此文件不支持预览, 是否下载该文件?"
       :show.sync="notPreviewDialogVisible"
-      operatButtonText="强行使用文本编辑器打开"
+      button-size="mini"
+      operatButtonText="取消"
       confirmButtonText="下载"
-      @operating="forciblyOpen(openingFile)"
+      @operating="notPreviewDialogVisible = false"
       @confirm="determineDownload(openingFile)"
     >
     </message-dialog>

src/components/message/MessageDialog.vue

@@ -1,7 +1,5 @@
 <template>
   <div>
-<!--    <el-container v-loading="loading">-->
-<!--    </el-container>-->
       <el-dialog
         class="jmal-message-dialog"
         :title="title"
@@ -14,7 +12,6 @@
           <svg-icon v-if="!loading" icon-class="warring"></svg-icon> <span class="dialog-msg">{{content}}</span>
           <span v-if="!loading" slot="footer" class="dialog-footer">
             <el-button :size="buttonSize" @click="operating">{{operatButtonText}}</el-button>
-                <!--        <el-button :size="buttonSize" @click="cancel">{{cancelButtonText}}</el-button>-->
             <el-button :size="buttonSize" type="primary" @click=confirm>{{confirmButtonText}}</el-button>
         </span>
       </el-dialog>

src/components/office/Drawio.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="drawio-content" :style="{'top': readOnly ? '0': '2.5rem'}">
     <div class="drawio-title">
-      <div class="drawio-title-name" :style="{'color': saved ? '': '#ff8200'}">{{title}}</div>
+      <div class="drawio-title-name" :style="{'color': saved ? (lightTheme ? '':'#ffffff'): '#ff8200'}">{{title}}</div>
       <div class="drawio-operation">
         <div style="margin-right: 15px">
-          <el-button v-if="historyVersion.metadata.time" @click="cancelPreview" size="mini">取消预览</el-button>
+          <el-button v-if="historyVersion.metadata.time" @click="cancelPreview" size="mini" :class="lightTheme ? '':'dark-button'">取消预览</el-button>
         </div>
         <history-popover
           ref="historyPopover"
+          :light-theme.sync="lightTheme"
           :has-history-version.sync="hasHistoryVersion"
           :history-list-popover-visible.sync="historyListPopoverVisible"
           :history-operation-loading="!loading.closed"
@@ -17,7 +18,7 @@
         >
         </history-popover>
 
-        <div><el-button v-if="!saved" @click="save" size="mini" :loading="saveBtnUpdating">保存</el-button></div>
+        <div><el-button v-if="!saved" @click="save" size="mini" :loading="saveBtnUpdating" :class="lightTheme ? '':'dark-button'">保存</el-button></div>
       </div>
     </div>
     <iframe ref="myFlow" class="drawio-iframe" :src="url" :title="file.name"></iframe>
@@ -56,6 +57,7 @@ export default {
       url: null,
       bakData: '',
       xml: '',
+      drawioUrlValid: false,
       saveBtnUpdating: false,
       title: this.file.name,
       saved: true,
@@ -69,6 +71,7 @@ export default {
       loading: {
         closed: true
       },
+      lightTheme: true
     }
   },
   created() {
@@ -109,7 +112,11 @@ export default {
           path: encodeURI(this.file.path),
           username: this.$store.state.user.name,
           content: true,
-        }).then((res) => {
+        }).then(async (res) => {
+          await this.checkDrawioUrl()
+          if (!this.drawioUrlValid) {
+            return
+          }
           this.file.path = res.data.path
           this.xml = res.data.contentText
           if (this.bakData === res.data.contentText) {
@@ -127,6 +134,19 @@ export default {
     },
   },
   methods: {
+    async checkDrawioUrl() {
+      await axios.get(this.url).then(response => {
+        if (response.status === 200) {
+          this.drawioUrlValid = true
+        } else {
+          this.$emit('onClose')
+          Bus.$emit('loadFileFaild')
+        }
+      }).catch(() => {
+        this.$emit('onClose')
+        Bus.$emit('loadFileFaild')
+      })
+    },
     viewHistoryFile({historyInfo, recovery}) {
       if (!this.saved) {
         this.$message({type: 'info', message: "请先保存当前修改的内容"})
@@ -207,11 +227,25 @@ export default {
         this.saved = true
         this.title = this.file.name
         this.$emit('onEdit', this.saved)
+        this.bakData = this.xml
+        this.updateContent()
         this.$refs.historyPopover.loadHistoryList(this.file.id)
       }).catch(() => {
         this.saveBtnUpdating = false
       })
     },
+    onSwitchTheme() {
+      let isDarkMode = false;
+      let linkElements = this.$refs.myFlow.contentWindow.document.getElementsByTagName("link");
+      for (let i = 0; i < linkElements.length; i++) {
+        let link = linkElements[i];
+        if (link.href.includes("styles/dark.css")) {
+          isDarkMode = true;
+          break;
+        }
+      }
+      this.lightTheme = !isDarkMode
+    },
     handleMessage(event) {
       const editWindow = this.$refs.myFlow.contentWindow
       if (event.source !== editWindow) {
@@ -221,11 +255,17 @@ export default {
       const payload = $J.jsonParse(event.data)
       switch (payload.event) {
         case "init":
+          console.log('init')
           this.ready = true
           this.$emit('onReady')
           this.updateContent()
           let helpMenu = doc.querySelector('.geMenubarContainer .geMenubar').childNodes[5]
+          doc.addEventListener('click', this.$refs.historyPopover.onGlobalClick)
           helpMenu.style.display = 'none'
+          let elementTheme = doc.querySelector('.geToolbarContainer').querySelector('[title="主题"][class="geButton geAdaptiveAsset"]');
+          if (elementTheme) {
+            elementTheme.addEventListener('click', this.onSwitchTheme)
+          }
           break
         case "load":
           if (this.xml.length < 1) {
@@ -271,24 +311,38 @@ export default {
   width: 100%;
   height: 100%;
 
+  >>>.dark-button {
+    background: #3e3e3e;
+    border: 1px solid #3e3e3e;
+    color: #ffffff;
+  }
+  >>>.dark-button:hover {
+    color: #409EFF;
+    background-color: #181818;
+  }
+
   .drawio-title {
-    text-align: left;
-    background-color: #fbfbfb;
     z-index: 2001;
-    position: absolute;
+    position: relative;
-    top: 0;
-    width: calc(50% + 121px);
-    margin-left: calc(50% - 121px);
-    height: 0;
 
     .drawio-title-name {
       line-height: 32px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      z-index: 2001;
+      position: absolute;
+      text-align: center;
+      width: 40%;
+      top: 16px;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
     }
 
     .drawio-operation {
       display: flex;
       float: right;
-      margin-top: -32px;
       margin-right: 15px;
       line-height: 32px;
     }

src/components/preview/SimTextPreview.vue

@@ -1123,348 +1123,188 @@
       border-radius: unset!important;
     }
   }
-
+  .simtext-dialog {
-  >>>.el-dialog {
+    >>>.el-dialog {
-    /*width: 1035px;*/
+      /*width: 1035px;*/
-    margin: 0 !important;
+      margin: 0 !important;
-    overflow: hidden;
-
-    .el-button--small.is-circle {
-      padding: 9px 10px;
-    }
-
-    .light-button {
-      background: #ececec;
-      border: 1px solid #ececec;
-    }
-    .light-button:hover {
-      background: #DCDFE6;
-    }
-    .dark-button {
-      background: #3e3e3e;
-      border: 1px solid #3e3e3e;
-      color: #ffffff;
-    }
-    .dark-button:hover {
-      color: #409EFF;
-      background-color: #181818;
-    }
-
-    .el-dialog__header {
-      padding: 5px 10px 5px;
       overflow: hidden;
 
-      .el-dialog__headerbtn {
+      .el-button--small.is-circle {
-        display: none;
+        padding: 9px 10px;
       }
-      .title-name {
-        line-height: 34px;
-      }
-      .title-extension {
-        float: right;
-        margin-right: 0;
-        margin-top: 3px;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-pack: end;
-        -ms-flex-pack: end;
-        justify-content: flex-end;
 
-        .title-extension-button {
+      .light-button {
-          padding: 0;
+        background: #ececec;
-          margin-left: 15px;
+        border: 1px solid #ececec;
-          background: 0 0;
+      }
-          border: none;
+      .light-button:hover {
-          outline: 0;
+        background: #DCDFE6;
-          cursor: pointer;
+      }
-          color: #909399;
+      .dark-button {
-          .svg-icon {
+        background: #3e3e3e;
-            font-size: 18px;
+        border: 1px solid #3e3e3e;
+        color: #ffffff;
+      }
+      .dark-button:hover {
+        color: #409EFF;
+        background-color: #181818;
+      }
+
+      .el-dialog__header {
+        padding: 5px 10px 5px;
+        overflow: hidden;
+
+        .el-dialog__headerbtn {
+          display: none;
+        }
+        .title-name {
+          line-height: 34px;
+        }
+        .title-extension {
+          float: right;
+          margin-right: 0;
+          margin-top: 3px;
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-pack: end;
+          -ms-flex-pack: end;
+          justify-content: flex-end;
+
+          .title-extension-button {
+            padding: 0;
+            margin-left: 15px;
+            background: 0 0;
+            border: none;
+            outline: 0;
+            cursor: pointer;
+            color: #909399;
+            .svg-icon {
+              font-size: 18px;
+            }
+            .svg-icon:hover {
+              color: #409EFF;
+            }
+            .el-icon-close {
+              font-size: 28px;
+            }
+            .el-icon-close:hover {
+              color: #409EFF;
+            }
           }
-          .svg-icon:hover {
+
-            color: #409EFF;
+        }
+
+        &[data-theme=dark] {
+          .redirect{
+            color: #f5f5f5;
           }
-          .el-icon-close {
+          .no-redirect {
-            font-size: 28px;
+            color: #b7b7b7;
           }
-          .el-icon-close:hover {
+          .home-link {
-            color: #409EFF;
+            color: #f5f5f5;
           }
         }
 
       }
-
+      .el-dialog__body {
-      &[data-theme=dark] {
+        padding: 0;
-        .redirect{
+        word-break: normal;
-          color: #f5f5f5;
-        }
-        .no-redirect {
-          color: #b7b7b7;
-        }
-        .home-link {
-          color: #f5f5f5;
-        }
       }
-
+      .content {
-    }
+        background: #F3F3F3;
-    .el-dialog__body {
+        border-top: unset!important;
-      padding: 0;
+        display: inline-flex;
-      word-break: normal;
-    }
-    .content {
-      background: #F3F3F3;
-      border-top: unset!important;
-      display: inline-flex;
-
-      .monaco-editor .minimap-shadow-visible {
-        position: absolute;
-        left: 0px;
-        width: 6px;
-        box-shadow: -2px 0px 5px #dddddd;
-      }
-
-      .el-tabs__header {
-        margin: 0 0 0;
-        .el-tabs__item {
-          height: 32px;
-          line-height: 32px;
-        }
-      }
-
-      .tabs-icon-svg {
-        font-size: 14px;
-      }
-
-      .el-tabs--card>.el-tabs__header {
-        border-bottom: unset;
-        .el-tabs__nav {
-          border: unset;
-        }
-        .el-tabs__item {
-          border-left: 1px solid #f3f3f3;
-          color: #6A6A6A;
-          background-color: #ebebeb;
-        }
-        .el-tabs__item:first-child {
-          border-left: none;
-        }
-        .el-tabs__item.is-active {
-          border-bottom-color: #ffffff;
-          background-color: #ffffff;
-          color: #2F302F;
-        }
-      }
-
-      .editor_main_storey {
-        display: inline-block;
-        position: absolute;
-        z-index: 999;
-        width: 100%;
-        height: 5px;
-        background: linear-gradient(rgba(221,221,221,1), rgba(255, 255, 255, 0));
-      }
-
-      .el-tabs__nav-wrap {
-        //margin-left: -1px;
-      }
-
-      .el-tabs--card>.el-tabs__header .el-tabs__nav {
-        border-radius: 0 0 0 0;
-      }
-
-      .el-tabs__nav-next, .el-tabs__nav-prev {
-        line-height: 32px;
-      }
-
-      .file-contents{
-
-        left: 0;
-        position: absolute;
-
-        .content-tree{
-          background-color: #F3F3F3;
-          //box-shadow: inset #ececec -7px 0px;
-
-          .svg-icon {
-            font-size: 18px;
-          }
-          #dir-tree {
-
-            $fancytreeTitleHoverColor: #E9E9E9;
-            $fancytreeTitleActiveColor: #b6d8fb;
-
-            overflow-x: hidden;
-            @include scrollBarLightStyle;
-
-            ul.fancytree-container{
-              padding: 3px 0 0 0;
-              background-color: #F3F3F3;
-            }
-
-            span.fancytree-title {
-              padding: 2.5px 3px 0 3px;
-            }
-
-            .fancytree-active {
-              background-color: $fancytreeTitleActiveColor;
-            }
-
-            .fancytree-active:hover {
-              background-color: $fancytreeTitleActiveColor!important;
-            }
-
-            .fancytree-node:hover {
-              background-color: $fancytreeTitleHoverColor;
-            }
-
-            .fancytree-plain span.fancytree-active span.fancytree-title{
-              background-color: $fancytreeTitleActiveColor;
-              border-color: $fancytreeTitleActiveColor;
-              color: #000000;
-            }
-            .fancytree-plain span.fancytree-active:hover span.fancytree-title{
-              background-color: $fancytreeTitleActiveColor!important;
-              border-color: $fancytreeTitleActiveColor!important;
-            }
-
-            .fancytree-plain span.fancytree-node:hover span.fancytree-title{
-              background-color: $fancytreeTitleHoverColor;
-              border-color: $fancytreeTitleHoverColor;
-            }
-
-            .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{
-              background-color: $fancytreeTitleActiveColor;
-              border-color: $fancytreeTitleActiveColor;
-            }
-
-          }
-        }
-
-        .dir-tools {
-          background: #ececec;
-          .el-button--small {
-            padding: 9px 10px;
-          }
-          .el-button-group {
-          display: unset;
-          vertical-align: middle;
-          }
-        }
-
-      }
-
-      .editor-resize {
-        width: 2px;
-        bottom: 0;
-        top: 0;
-        cursor: col-resize;
-        background-color: #ffffff;
-        .darg-resize-conter {
-          width: 2px;
-        }
-        .editor-resize-conter{
-          height: 50px;
-          width: 14px;
-          position: absolute;
-          z-index: 999;
-          // top: 48%;
-          background: #e2e2e2;
-          border-top-right-radius: 15px;
-          border-bottom-right-radius: 15px;
-          border: 1px solid #ececec;
-          border-left: none;
-          cursor: pointer;
-        }
-        .editor-resize-conter:after {
-          content: " ";
-          display: inline-block;
-          height: 10px;
-          width: 10px;
-          position: absolute;
-          top: 50%;
-          margin-top: -5px;
-          left: 3px;
-          z-index: 999;
-          border-width: 2px 2px 0 0;
-          border-color: #9a9a9a;
-          border-style: solid;
-          -webkit-transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
-          transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
-        }
-
-        &[icon-style=hide] {
-          .editor-resize-conter:after {
-            left: -2px;
-            -webkit-transform: matrix(0.71, -0.71, -0.71, -0.71, 0, 0);
-            transform: matrix(0.71, -0.71, -0.71, -0.71, 0, 0);
-          }
-        }
-
-      }
-
-      &[data-theme=dark] {
-
-        background: #202020;
 
         .monaco-editor .minimap-shadow-visible {
-         box-shadow: -2px 0px 5px #000000;
+          position: absolute;
+          left: 0px;
+          width: 6px;
+          box-shadow: -2px 0px 5px #dddddd;
         }
 
-        .editor-resize {
+        .el-tabs__header {
-          background-color: #181818;
+          margin: 0 0 0;
-          .editor-resize-conter{
+          .el-tabs__item {
-            background: #292929;
+            height: 32px;
-            border: 1px solid #3e3e3e;
+            line-height: 32px;
-            border-left: 1px solid #292929;
-          }
-          .editor-resize-conter:after {
-            border-color: #b2b2b2;
           }
         }
 
+        .tabs-icon-svg {
+          font-size: 14px;
+        }
+
         .el-tabs--card>.el-tabs__header {
           border-bottom: unset;
           .el-tabs__nav {
             border: unset;
           }
           .el-tabs__item {
-            border-left: 1px solid #202021;
+            border-left: 1px solid #f3f3f3;
-            color: #aaaaaa;
+            color: #6A6A6A;
-            background-color: #292929;
+            background-color: #ebebeb;
           }
           .el-tabs__item:first-child {
             border-left: none;
           }
           .el-tabs__item.is-active {
-            border-bottom-color: #181818;
+            border-bottom-color: #ffffff;
-            background-color: #181818;
+            background-color: #ffffff;
-            color: #fefefe;
+            color: #2F302F;
           }
         }
 
+        .editor_main_storey {
+          display: inline-block;
+          position: absolute;
+          z-index: 999;
+          width: 100%;
+          height: 5px;
+          background: linear-gradient(rgba(221,221,221,1), rgba(255, 255, 255, 0));
+        }
+
+        .el-tabs__nav-wrap {
+          //margin-left: -1px;
+        }
+
+        .el-tabs--card>.el-tabs__header .el-tabs__nav {
+          border-radius: 0 0 0 0;
+        }
+
+        .el-tabs__nav-next, .el-tabs__nav-prev {
+          line-height: 32px;
+        }
+
         .file-contents{
 
-          background: #3e3e3e;
+          left: 0;
+          position: absolute;
 
-          .dir-tools {
+          .content-tree{
-            background: #3e3e3e;
+            background-color: #F3F3F3;
-          }
+            //box-shadow: inset #ececec -7px 0px;
 
-          .content-tree {
+            .svg-icon {
-            background: #202021;
+              font-size: 18px;
-            //box-shadow: inset #2d2d2d -7px 0px;
+            }
             #dir-tree {
-              @include scrollBarDarkStyle;
+
-              span.fancytree-title {
+              $fancytreeTitleHoverColor: #E9E9E9;
-                color: #dedede;
+              $fancytreeTitleActiveColor: #b6d8fb;
-              }
+
-              ul.fancytree-container {
+              overflow-x: hidden;
-                background: #202021;
+              @include scrollBarLightStyle;
+
+              ul.fancytree-container{
+                padding: 3px 0 0 0;
+                background-color: #F3F3F3;
               }
 
-              $fancytreeTitleHoverColor: #242A2B;
+              span.fancytree-title {
-              $fancytreeTitleActiveColor: #004471;
+                padding: 2.5px 3px 0 3px;
+              }
 
               .fancytree-active {
                 background-color: $fancytreeTitleActiveColor;
@@ -1481,7 +1321,7 @@
               .fancytree-plain span.fancytree-active span.fancytree-title{
                 background-color: $fancytreeTitleActiveColor;
                 border-color: $fancytreeTitleActiveColor;
-                color: #FFFFFF;
+                color: #000000;
               }
               .fancytree-plain span.fancytree-active:hover span.fancytree-title{
                 background-color: $fancytreeTitleActiveColor!important;
@@ -1498,42 +1338,203 @@
                 border-color: $fancytreeTitleActiveColor;
               }
 
-              .fancytree-edit-input {
-                background-color: #202021;
-                border: unset;
-              }
-
             }
           }
-        }
+
-        .editor_main_storey {
+          .dir-tools {
-          background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0));
+            background: #ececec;
+            .el-button--small {
+              padding: 9px 10px;
+            }
+            .el-button-group {
+              display: unset;
+              vertical-align: middle;
+            }
+          }
+
         }
 
-        .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input {
+        .editor-resize {
-          background-color: #181818;
+          width: 2px;
+          bottom: 0;
+          top: 0;
+          cursor: col-resize;
+          background-color: #ffffff;
+          .darg-resize-conter {
+            width: 2px;
+          }
+          .editor-resize-conter{
+            height: 50px;
+            width: 14px;
+            position: absolute;
+            z-index: 999;
+            // top: 48%;
+            background: #e2e2e2;
+            border-top-right-radius: 15px;
+            border-bottom-right-radius: 15px;
+            border: 1px solid #ececec;
+            border-left: none;
+            cursor: pointer;
+          }
+          .editor-resize-conter:after {
+            content: " ";
+            display: inline-block;
+            height: 10px;
+            width: 10px;
+            position: absolute;
+            top: 50%;
+            margin-top: -5px;
+            left: 3px;
+            z-index: 999;
+            border-width: 2px 2px 0 0;
+            border-color: #9a9a9a;
+            border-style: solid;
+            -webkit-transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
+            transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
+          }
+
+          &[icon-style=hide] {
+            .editor-resize-conter:after {
+              left: -2px;
+              -webkit-transform: matrix(0.71, -0.71, -0.71, -0.71, 0, 0);
+              transform: matrix(0.71, -0.71, -0.71, -0.71, 0, 0);
+            }
+          }
+
         }
 
-        .monaco-editor{
+        &[data-theme=dark] {
-          .margin {
+
+          background: #202020;
+
+          .monaco-editor .minimap-shadow-visible {
+            box-shadow: -2px 0px 5px #000000;
+          }
+
+          .editor-resize {
+            background-color: #181818;
+            .editor-resize-conter{
+              background: #292929;
+              border: 1px solid #3e3e3e;
+              border-left: 1px solid #292929;
+            }
+            .editor-resize-conter:after {
+              border-color: #b2b2b2;
+            }
+          }
+
+          .el-tabs--card>.el-tabs__header {
+            border-bottom: unset;
+            .el-tabs__nav {
+              border: unset;
+            }
+            .el-tabs__item {
+              border-left: 1px solid #202021;
+              color: #aaaaaa;
+              background-color: #292929;
+            }
+            .el-tabs__item:first-child {
+              border-left: none;
+            }
+            .el-tabs__item.is-active {
+              border-bottom-color: #181818;
+              background-color: #181818;
+              color: #fefefe;
+            }
+          }
+
+          .file-contents{
+
+            background: #3e3e3e;
+
+            .dir-tools {
+              background: #3e3e3e;
+            }
+
+            .content-tree {
+              background: #202021;
+              //box-shadow: inset #2d2d2d -7px 0px;
+              #dir-tree {
+                @include scrollBarDarkStyle;
+                span.fancytree-title {
+                  color: #dedede;
+                }
+                ul.fancytree-container {
+                  background: #202021;
+                }
+
+                $fancytreeTitleHoverColor: #242A2B;
+                $fancytreeTitleActiveColor: #004471;
+
+                .fancytree-active {
+                  background-color: $fancytreeTitleActiveColor;
+                }
+
+                .fancytree-active:hover {
+                  background-color: $fancytreeTitleActiveColor!important;
+                }
+
+                .fancytree-node:hover {
+                  background-color: $fancytreeTitleHoverColor;
+                }
+
+                .fancytree-plain span.fancytree-active span.fancytree-title{
+                  background-color: $fancytreeTitleActiveColor;
+                  border-color: $fancytreeTitleActiveColor;
+                  color: #FFFFFF;
+                }
+                .fancytree-plain span.fancytree-active:hover span.fancytree-title{
+                  background-color: $fancytreeTitleActiveColor!important;
+                  border-color: $fancytreeTitleActiveColor!important;
+                }
+
+                .fancytree-plain span.fancytree-node:hover span.fancytree-title{
+                  background-color: $fancytreeTitleHoverColor;
+                  border-color: $fancytreeTitleHoverColor;
+                }
+
+                .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{
+                  background-color: $fancytreeTitleActiveColor;
+                  border-color: $fancytreeTitleActiveColor;
+                }
+
+                .fancytree-edit-input {
+                  background-color: #202021;
+                  border: unset;
+                }
+
+              }
+            }
+          }
+          .editor_main_storey {
+            background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0));
+          }
+
+          .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input {
             background-color: #181818;
           }
-        }
 
+          .monaco-editor{
+            .margin {
+              background-color: #181818;
+            }
+          }
+
+        }
+      }
+      .nwse-resize {
+        z-index: 99999;
+        position: fixed;
+        width: 15px;
+        background: #00000000;
+        height: 15px;
+        margin-top: -15px;
+        float: right;
+        cursor: nwse-resize;
+      }
+      .el-button--small.is-circle {
+        padding: 9px 9px;
       }
-    }
-    .nwse-resize {
-      z-index: 99999;
-      position: fixed;
-      width: 15px;
-      background: #00000000;
-      height: 15px;
-      margin-top: -15px;
-      float: right;
-      cursor: nwse-resize;
-    }
-    .el-button--small.is-circle {
-      padding: 9px 9px;
     }
   }
 </style>
@@ -1542,7 +1543,6 @@
     width: 420px;
     height: 200px;
     top: calc(50% - 100px);
-    left: calc(50% - 210px);
     .el-dialog {
       .el-dialog__header {
         padding: 15px 20px 15px;

src/utils/file-type.js

@@ -5,7 +5,7 @@ export const suffix = {
     'vue','asp','jsp','TXT',
     'xml','xsl','iml','m','bas','prg','cmd',
     'sass','sas','php','lst','key','pem','log',
-    'cmake','db','gradle','bat','','conf','dart','plist'
+    'cmake','db','gradle','bat','conf','dart','plist'
   ],
   compressedFile: [
     'zip','tar','jar','tar.gz','tgz','tar.bz2'