Merge pull request #80 from MCSManager/editor-optimization

Feat: Ace editor optimization

Author: yumao233

src/app/views/FileManagerEditor.vue

@@ -4,30 +4,139 @@
 
 <template>
   <Panel>
-    <template #title>{{ $t("fileManagerEditor.title") }} {{ target }}</template>
+    <template #title>
+      {{ $t("fileManagerEditor.title") }}
+      {{ target }}
+      <el-tag type="warning" effect="plain" size="small" v-if="editStatus === 'edit'">编辑中</el-tag>
+      <el-tag type="success" effect="plain" size="small" v-if="editStatus === 'success'">已保存</el-tag>
+    </template>
     <template #default>
       <div class="instance-table-wrapper">
         <div>
           <ItemGroup>
             <el-button size="small" type="success" @click="saveFile">
-              <i class="el-icon-refresh"></i> {{ $t("fileManagerEditor.updateFile") }}
+              <i class="el-icon-refresh"></i>
+              {{ $t("fileManagerEditor.updateFile") }}
             </el-button>
             <el-button size="small" @click="refresh">
-              <i class="el-icon-refresh"></i> {{ $t("general.refresh") }}
+              <i class="el-icon-refresh"></i>
+              {{ $t("general.refresh") }}
+            </el-button>
+            <el-button size="small" @click="jumpToLine">
+              <i class="el-icon-sort-down"></i>
+              跳转行
+            </el-button>
+            <el-dropdown :hide-on-click="false">
+              <el-button type="default" size="small">
+                <i class="el-icon-setting"></i>
+                编辑器设置
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item>
+                    <el-switch
+                      v-model="editorSettings.wrapMode"
+                      @change="setWrapMode($event)"
+                      active-color="#13ce66"
+                      inactive-color="#ff4949"
+                      active-text="自动换行"
+                    />
+                  </el-dropdown-item>
+                  <el-dropdown-item>
+                    <el-switch
+                      v-model="editorSettings.behavioursEnabled"
+                      @change="setBehavioursEnabled($event)"
+                      active-color="#13ce66"
+                      inactive-color="#ff4949"
+                      active-text="自动补全"
+                    />
+                  </el-dropdown-item>
+                  <el-dropdown-item>
+                    <el-switch
+                      v-model="editorSettings.highlightActiveLine"
+                      @change="setHighlightActiveLine($event)"
+                      active-color="#13ce66"
+                      inactive-color="#ff4949"
+                      active-text="高亮当前行"
+                    />
+                  </el-dropdown-item>
+                  <el-dropdown-item>
+                    <el-switch
+                      v-model="editorSettings.readOnly"
+                      @change="setReadOnly($event)"
+                      active-color="#13ce66"
+                      inactive-color="#ff4949"
+                      active-text="只读模式"
+                    />
+                  </el-dropdown-item>
+                  <el-dropdown-item>
+                    <el-switch
+                      v-model="editorSettings.showInvisibles"
+                      @change="setShowInvisibles($event)"
+                      active-color="#13ce66"
+                      inactive-color="#ff4949"
+                      active-text="显示隐藏字符"
+                    />
+                  </el-dropdown-item>
+                  <el-dropdown-item>
+                    <el-switch
+                      v-model="editorSettings.enableMultiselect"
+                      @change="setEnableMultiselect($event)"
+                      active-color="#13ce66"
+                      inactive-color="#ff4949"
+                      active-text="选中多行"
+                    />
+                  </el-dropdown-item>
+                  <el-dropdown-item>
+                    <el-switch
+                      v-model="editorSettings.showLineNumbers"
+                      @change="setShowLineNumbers($event)"
+                      active-color="#13ce66"
+                      inactive-color="#ff4949"
+                      active-text="显示行号"
+                    />
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <el-select
+              v-model="editorSettings.theme"
+              filterable
+              size="small"
+              placeholder="编辑器主题"
+              @change="changeEditorTheme($event)"
+            >
+            <el-option v-for="item in editorThemes" :key="item" :label="item" :value="item"></el-option>
+            </el-select>
+            <el-input-number v-model="editorSettings.fontSize" @change="changeEditorFontsize($event)" :min="1" :max="114.514" size="small"></el-input-number>
+            <el-button type="default" size="small" @click="toHotKey">
+              <i class="el-icon-sort-down"></i>
+              快捷键提示
             </el-button>
             <el-button size="small" @click="back" v-if="!backType">
-              <i class="el-icon-pie-chart"></i> {{ $t("fileManagerEditor.backToFileManager") }}
+              <i class="el-icon-pie-chart"></i>
+              {{ $t("fileManagerEditor.backToFileManager") }}
             </el-button>
           </ItemGroup>
         </div>
         <div>
-          <el-button size="small" @click="backViaHistory" type="primary" plain v-if="backType == 1">
-            {{ $t("fileManagerEditor.backViaHistory") }}
-          </el-button>
+          <el-button
+            size="small"
+            @click="backViaHistory"
+            type="primary"
+            plain
+            v-if="backType == 1"
+          >{{ $t("fileManagerEditor.backViaHistory") }}</el-button>
         </div>
       </div>
       <div v-show="!error" style="overflow: auto">
-        <div id="editor" style="height: 70vh" class="editor-code-font"></div>
+        <div
+          id="editor"
+          style="height: 70vh"
+          class="editor-code-font"
+          @keyup.ctrl.S="this.onkeydown"
+        ></div>
       </div>
       <div v-show="error" style="padding: 16px 0px">
         <el-alert
@@ -59,15 +168,88 @@ export default {
         text: "",
         fileName: this.$route.query.target
       },
-      editor: null
+      editor: null,
+      editorSettings: {
+        highlightActiveLine: true,
+        readOnly: false,
+        showInvisibles: true,
+        wrapMode: true,
+        enableMultiselect: true,
+        showLineNumbers: true,
+        behavioursEnabled: true,
+        fontSize: parseInt(localStorage.getItem("editorFontSize") || 16),
+        theme: localStorage.getItem("editorTheme") || "monokai"
+      },
+      editorThemes: [
+        "ambiance",
+        "chaos",
+        "chrome",
+        "clouds_midnight",
+        "clouds",
+        "cobalt",
+        "crimson_editor",
+        "dawn",
+        "dracula",
+        "dreamweaver",
+        "eclipse",
+        "github",
+        "gob",
+        "gruvbox",
+        "idle_fingers",
+        "iplastic",
+        "katzenmilch",
+        "kr_theme",
+        "kuroir",
+        "merbivore_soft",
+        "merbivore",
+        "mono_industrial",
+        "monokai",
+        "nord_dark",
+        "pastel_on_dark",
+        "solarized_dark",
+        "solarized_light",
+        "sqlserver",
+        "terminal",
+        "textmate",
+        "tomorrow_night",
+        "tomorrow_night_blue",
+        "tomorrow_night_bright",
+        "tomorrow_night_eighties",
+        "tomorrow",
+        "twilight",
+        "vibrant_ink",
+        "xcode"
+      ],
+      editStatus: null,
+      editorHotKey: false
     };
   },
+
   async mounted() {
     await this.render();
     this.editor = window.ace.edit("editor");
-    this.editor.setTheme("ace/theme/monokai");
-    this.editor.setShowPrintMargin(false);
-    this.editor.setFontSize(16);
+    this.editor.setTheme("ace/theme/" + this.editorSettings.theme);
+    this.editor.setOptions({
+      highlightActiveLine: this.editorSettings.highlightActiveLine,
+      readOnly: this.editorSettings.readOnly,
+      showInvisibles: this.editorSettings.showInvisibles,
+      wrap: this.editorSettings.wrapMode,
+      enableMultiselect: this.editorSettings.enableMultiselect,
+      showPrintMargin: false,
+      showLineNumbers: this.editorSettings.showLineNumbers,
+      fontSize: this.editorSettings.fontSize
+    });
+    this.editor.session.on("change", () => {
+      this.editStatus = "edit";
+    });
+    this.editor.commands.addCommand({
+      name: "saveFile",
+      bindKey: { win: "Ctrl-S", mac: "Command-S" },
+      exec: () => {
+        this.saveFile();
+        this.editStatus = "success";
+      }
+    });
     const extName = path.extname(this.target);
     if (extName === ".js") this.editor.session.setMode("ace/mode/javascript");
     if (extName === ".json") this.editor.session.setMode("ace/mode/json");
@@ -88,6 +270,53 @@ export default {
     this.editor.setValue(this.edit.text);
   },
   methods: {
+    changeEditorFontsize(val) {
+      this.editor.setFontSize(val);
+      localStorage.setItem("editorFontSize", val);
+    },
+    jumpToLine() {
+      this.editor.find();
+      this.$prompt("跳转到指定行", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputPattern: /^[0-9]*$/,
+        inputErrorMessage: "格式不正确"
+      }).then(({ value }) => {
+        this.$message({
+          type: "success",
+          message: "已跳转到第 " + value + " 行"
+        });
+        this.editor.gotoLine(value);
+      });
+    },
+    setWrapMode(val) {
+      this.editor.getSession().setUseWrapMode(val);
+    },
+    setHighlightActiveLine(val) {
+      this.editor.setOption("highlightActiveLine", val);
+    },
+    setReadOnly(val) {
+      this.editor.setOption("readOnly", val);
+    },
+    setShowInvisibles(val) {
+      this.editor.setOption("showInvisibles", val);
+    },
+    setEnableMultiselect(val) {
+      this.editor.setOption("enableMultiselect", val);
+    },
+    setShowLineNumbers(val) {
+      this.editor.setOption("showLineNumbers", val);
+    },
+    setBehavioursEnabled(val) {
+      this.editor.setOption("behavioursEnabled", val);
+    },
+    changeEditorTheme(val) {
+      this.editor.setTheme("ace/theme/" + val);
+      localStorage.setItem("editorTheme", val);
+    },
+    toHotKey() {
+      window.open('https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts')
+    },
     async refresh() {
       await this.render();
       this.$message({ message: this.$t("general.refreshFinish"), type: "success" });
@@ -98,12 +327,28 @@ export default {
       });
     },
     async back() {
-      this.$router.push({
-        path: `/file/${this.serviceUuid}/${this.instanceUuid}/`,
-        query: {
-          path: path.dirname(this.target)
-        }
-      });
+      if (this.editStatus === "edit") {
+        this.$confirm("你还未保存文件, 是否继续返回?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            this.$router.push({
+              path: `/file/${this.serviceUuid}/${this.instanceUuid}/`,
+              query: {
+                path: path.dirname(this.target)
+              }
+            });
+          })
+      } else {
+        this.$router.push({
+          path: `/file/${this.serviceUuid}/${this.instanceUuid}/`,
+          query: {
+            path: path.dirname(this.target)
+          }
+        });
+      }
     },
     backViaHistory() {
       this.$router.go(-1);
@@ -155,7 +400,7 @@ export default {
 .editor-code-font {
   font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", "Droid Sans Mono",
     monospace;
-  font-size: 12px;
+  font-size: 16px;
   white-space: pre-wrap;
 }
 </style>

src/assets/css/dark-mode.scss

@@ -183,6 +183,14 @@
   .el-tag.el-tag--info {
     background-color: #060606;
   }
+
+  .el-switch__label {
+    color: #eeeeee
+  }
+
+  .el-input-number__decrease,.el-input-number__increase{
+    background-color: rgb(42, 42, 42)
+  }
 }
 
 .dark {