给monoca添加placeholder

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);
       // 默认命令不可编辑

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>