命令编辑界面样式调整

src/components/CommandEditor.vue

@@ -2,16 +2,28 @@
   <div class="relative">
     <!-- 命令设置栏 -->
     <div
-      class="absolute-left"
+      class="absolute-left shadow-10"
       :style="{
-        top: languageBarHeight,
         width: sideBarWidth,
         background: $q.dark.isActive ? '#2d2d2d' : '#f2f2f2',
+        zIndex: 1,
       }"
-      v-if="notRunCodePage"
+      v-if="showSidebar"
     >
       <div class="row q-pa-md q-gutter-md">
-        <q-img width="48px" :src="commandIcon" />
+        <div class="row">
+          <q-btn
+            dense
+            flat
+            color="grey"
+            icon="arrow_back_ios_new"
+            @click="closeEditor"
+          />
+          <div class="q-pa-md">
+            <q-img class="commandLogo" width="80px" :src="commandIcon" />
+          </div>
+        </div>
+        <div class="row">
           <div>
             <q-input
               standout="bg-primary text-white"
@@ -69,20 +81,16 @@
             />
           </div>
         </div>
-      <div>
-        <q-btn-group spread class="absolute-bottom">
-          <q-btn color="red" icon="close" label="退出" @click="closeEditor" />
-          <q-btn
-            color="blue-9"
-            icon="save"
-            label="保存"
-            @click="clickHandler2"
-          />
-        </q-btn-group>
       </div>
-      <div class="row"></div>
+      <div></div>
     </div>
     <!-- 编程语言栏 -->
+    <div
+      class="absolute-top"
+      :style="{
+        left: showSidebar ? sideBarWidth : 0,
+      }"
+    >
       <div class="row" v-show="languageBarHeight">
         <div class="col">
           <div>
@@ -157,12 +165,25 @@
               v-show="quickcommandInfo.program !== 'quickcommand'"
               ><q-tooltip>脚本及输出编码设置</q-tooltip></q-btn
             >
-          <q-btn flat color="primary" icon="send" @click="runCurrentCommand()"
-            ><q-tooltip>运行命令</q-tooltip></q-btn
+            <q-btn
+              flat
+              color="primary"
+              icon="play_arrow"
+              @click="runCurrentCommand()"
+              ><q-tooltip>运行命令 {{ commandString }}+b</q-tooltip></q-btn
+            >
+            <q-btn
+              flat
+              v-if="!isRunCodePage"
+              color="primary"
+              icon="save"
+              @click="saveCurrentCommand()"
+              ><q-tooltip>保存 {{ commandString }}+s</q-tooltip></q-btn
             >
           </q-btn-group>
         </div>
       </div>
+    </div>
     <MonocaEditor
       class="absolute-bottom"
       ref="editor"
@@ -237,6 +258,9 @@ export default {
       runResult: "",
       runResultStatus: true,
       resultMaxLength: 10000,
+      showSidebar: this.action.type !== "run",
+      isRunCodePage: this.action.type === "run",
+      commandString: this.$q.platform.is.mac ? "⌘" : "ctrl",
     };
   },
   props: {
@@ -246,9 +270,6 @@ export default {
     this.init();
   },
   computed: {
-    notRunCodePage() {
-      return this.action.type !== "run";
-    },
     commandIcon() {
       return this.quickcommandInfo.features?.icon || this.currentProgramLogo;
     },
@@ -448,6 +469,20 @@ export default {
         data: {},
       });
     },
+    // 保存
+    saveCurrentCommand() {},
   },
 };
 </script>
+
+<style scoped>
+.commandLogo {
+  cursor: pointer;
+  transition: 10s;
+  filter: drop-shadow(2px 1px 1px grey);
+}
+.commandLogo:hover {
+  transition: 10s;
+  transform: rotate(360deg);
+}
+</style>