From 8f479fa5458efff2136aa8d89f6a9f37928bfb0c Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Wed, 13 Apr 2022 13:24:01 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=99monoca=E6=B7=BB=E5=8A=A0placeholder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandEditor.vue              | 27 +++-------
 .../{MonocaEditor.vue => MonacoEditor.vue}    | 54 ++++++++++++++++---
 2 files changed, 54 insertions(+), 27 deletions(-)
 rename src/components/{MonocaEditor.vue => MonacoEditor.vue} (79%)

diff --git a/src/components/CommandEditor.vue b/src/components/CommandEditor.vue
index 9d817a9..3086e2b 100644
--- a/src/components/CommandEditor.vue
+++ b/src/components/CommandEditor.vue
@@ -117,7 +117,6 @@
               ><q-tooltip>脚本及输出编码设置</q-tooltip></q-btn
             >
             <q-separator vertical inset />
-
             <q-btn
               dense
               flat
@@ -140,39 +139,28 @@
         </div>
       </div>
     </div>
-    <MonocaEditor
+    <MonacoEditor
       class="absolute-bottom"
       ref="editor"
+      @typing="(val) => (quickcommandInfo.cmd = val)"
       :style="{
         top: languageBarHeight + 'px',
-        left: editorLeft,
+        left: this.action.type === 'run' ? 0 : this.sideBarWidth + 'px',
         transition: '0.3s',
       }"
     />
-    <div
-      class="absolute-bottom flex justify-center content-center"
-      :style="{
-        top: languageBarHeight + 'px',
-        left: editorLeft,
-        userSelect: 'none',
-      }"
-    >
-      ctrl + s 保存 <br />
-      ctrl + b 运行 <br />
-      alt + z 自动换行
-    </div>
     <!-- 运行结果 -->
     <CommandRunResult :action="action" ref="result"></CommandRunResult>
   </div>
 </template>
 
 <script>
-import MonocaEditor from "components/MonocaEditor";
+import MonacoEditor from "components/MonacoEditor";
 import CommandSideBar from "components/CommandSideBar";
 import CommandRunResult from "components/CommandRunResult";
 
 export default {
-  components: { MonocaEditor, CommandSideBar, CommandRunResult },
+  components: { MonacoEditor, CommandSideBar, CommandRunResult },
   data() {
     return {
       programLanguages: Object.keys(this.$programmings),
@@ -217,9 +205,6 @@ export default {
         "搜索结果"
       );
     },
-    editorLeft() {
-      return this.action.type === "run" ? "0" : this.sideBarWidth + "px";
-    },
   },
   created() {},
   methods: {
@@ -231,7 +216,7 @@ export default {
               ?.codeHistory
           : this.action.data;
       _.merge(this.quickcommandInfo, quickCommandInfo);
-      // monoca 相关
+      // monaco 相关
       this.$refs.editor.setEditorValue(this.quickcommandInfo.cmd);
       this.setLanguage(this.quickcommandInfo.program);
       // 默认命令不可编辑
diff --git a/src/components/MonocaEditor.vue b/src/components/MonacoEditor.vue
similarity index 79%
rename from src/components/MonocaEditor.vue
rename to src/components/MonacoEditor.vue
index 70b5e48..c02c60e 100644
--- a/src/components/MonocaEditor.vue
+++ b/src/components/MonacoEditor.vue
@@ -1,5 +1,16 @@
 <template>
-  <div id="monocaEditor"></div>
+  <div>
+    <div id="monacoEditor" style="width: 100%; height: 100%"></div>
+    <div class="absolute-center flex" v-show="!value">
+      <div class="placeholder text-center q-gutter-md">
+        <div v-for="shortCut in shortCuts" :key="shortCut">
+          <span>{{ shortCut[0] }}</span
+          ><span class="shortcut-key">{{ shortCut[1] }}</span
+          ><span class="shortcut-key">{{ shortCut[2] }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -17,12 +28,20 @@ let languageCompletions = importAll(
   require.context("../plugins/monaco/completions/", false, /\.js$/)
 );
 
+let cmdCtrlKey = utools.isMacOs() ? "⌘" : "Ctrl";
+let optAltKey = utools.isMacOs() ? "⌥" : "Alt";
+
 export default {
   data() {
     return {
       editor: null,
+      value: null,
       wordWrap: "off",
-      commandString: this.$q.platform.is.mac ? "⌘" : "ctrl",
+      shortCuts: [
+        ["保存", cmdCtrlKey, "S"],
+        ["运行", cmdCtrlKey, "B"],
+        ["换行", optAltKey, "Z"],
+      ],
     };
   },
   mounted() {
@@ -49,13 +68,13 @@ export default {
         },
       };
       this.editor = monaco.editor.create(
-        document.getElementById("monocaEditor"),
+        document.getElementById("monacoEditor"),
         monacoEditorPreferences
       );
       this.loadTypes();
       this.registerLanguage();
       this.setEditorTheme();
-      this.listenEditroValue();
+      this.listenEditorValue();
       this.bindKeys();
     },
     loadTypes() {
@@ -177,9 +196,11 @@ export default {
     destoryEditor() {
       this.rawEditor.dispose();
     },
-    listenEditroValue() {
+    listenEditorValue() {
+      this.rawEditor.focus();
       this.rawEditor.onDidChangeModelContent(() => {
-        this.$parent.quickcommandInfo.cmd = this.getEditorValue();
+        this.value = this.getEditorValue();
+        this.$emit("typing", this.value);
       });
     },
     bindKeys() {
@@ -207,3 +228,24 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.placeholder {
+  font-size: 12px;
+  font-family: sans-serif;
+  color: #a3a3a3;
+  user-select: none;
+}
+.shortcut-key {
+  background-color: #f3f4f6;
+  border-radius: 0.25rem;
+  margin-left: 0.5rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  transition-property: background-color, border-color, color, fill, stroke,
+    opacity, box-shadow, -webkit-box-shadow, transform, -webkit-transform,
+    filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+</style>