From 897d5978851f71e171ed8b17624dccca2fc33c13 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Mon, 6 May 2024 23:44:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=84=9A=E6=9C=AC=E8=BF=90=E8=A1=8C=E5=90=8E?=
 =?UTF-8?q?=E5=B0=B1=E8=87=AA=E5=8A=A8=E4=BF=9D=E5=AD=98=EF=BC=8C=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=E6=97=B6=E4=B8=8D=E5=85=B3=E9=97=AD=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandEditor.vue              | 189 +++++++++++++-----
 .../quickcommandUI/QuickCommand.vue           |   4 +-
 src/pages/ConfigurationPage.vue               |   2 +-
 3 files changed, 146 insertions(+), 49 deletions(-)

diff --git a/src/components/CommandEditor.vue b/src/components/CommandEditor.vue
index 65bf832..51b8bf4 100644
--- a/src/components/CommandEditor.vue
+++ b/src/components/CommandEditor.vue
@@ -1,18 +1,27 @@
 <template>
   <div class="absolute-full container" style="overflow: 'hidden'">
     <!-- 命令设置栏 -->
-    <CommandSideBar ref="sidebar" :canCommandSave="canCommandSave" :quickcommandInfo="quickcommandInfo"
-      class="absolute-left shadow-10" :style="{
+    <CommandSideBar
+      ref="sidebar"
+      :canCommandSave="canCommandSave"
+      :quickcommandInfo="quickcommandInfo"
+      class="absolute-left shadow-10"
+      :style="{
         width: sideBarWidth + 'px',
         zIndex: 1,
         // transition: '0.3s',
-      }" v-if="showSidebar"></CommandSideBar>
+      }"
+      v-if="showSidebar"
+    ></CommandSideBar>
     <!-- 编程语言栏 -->
-    <div class="absolute-top" :style="{
-      left: showSidebar ? sideBarWidth + 'px' : 65,
-      zIndex: 1,
-      // transition: '0.3s',
-    }">
+    <div
+      class="absolute-top"
+      :style="{
+        left: showSidebar ? sideBarWidth + 'px' : 65,
+        zIndex: 1,
+        // transition: '0.3s',
+      }"
+    >
       <div class="row" v-show="!!languageBarHeight">
         <!-- 去掉收起侧栏功能，处理侧栏宽度变化时，Monaco调整大小导致ResizeObserver loop limit exceeded错误 -->
         <!-- <div class="col-auto flex">
@@ -21,9 +30,19 @@
         </div> -->
         <div class="col">
           <div>
-            <q-select dense standout="bg-primary text-white" square hide-bottom-space color="primary"
-              transition-show="jump-down" transition-hide="jump-up" @update:model-value="programChanged"
-              v-model="quickcommandInfo.program" :options="programLanguages" label="环境">
+            <q-select
+              dense
+              standout="bg-primary text-white"
+              square
+              hide-bottom-space
+              color="primary"
+              transition-show="jump-down"
+              transition-hide="jump-up"
+              @update:model-value="programChanged"
+              v-model="quickcommandInfo.program"
+              :options="programLanguages"
+              label="环境"
+            >
               <template v-slot:append>
                 <q-avatar size="lg" square>
                   <img :src="$root.programs[quickcommandInfo.program].icon" />
@@ -45,20 +64,34 @@
         <q-separator vertical />
         <div class="col-auto justify-end flex">
           <q-btn-group unelevated>
-            <q-btn-dropdown v-show="quickcommandInfo.program !== 'html'" style="padding: 0 10px" dense flat ref="settings"
-              color="primary" :icon="quickcommandInfo.program === 'quickcommand'
-                ? 'insights'
-                : 'settings'
-                ">
+            <q-btn-dropdown
+              v-show="quickcommandInfo.program !== 'html'"
+              style="padding: 0 10px"
+              dense
+              flat
+              ref="settings"
+              color="primary"
+              :icon="
+                quickcommandInfo.program === 'quickcommand'
+                  ? 'insights'
+                  : 'settings'
+              "
+            >
               <q-list>
                 <!-- quickcommand系列按键 -->
-                <q-item clickable v-for="(item, index) in ['keyboard', 'ads_click', 'help']" :key="index" @click="
-                  [
-                    () => (showRecorder = true),
-                    () => (showActions = true),
-                    showHelp,
-                  ][index]
-                  " v-show="quickcommandInfo.program === 'quickcommand'">
+                <q-item
+                  clickable
+                  v-for="(item, index) in ['keyboard', 'ads_click', 'help']"
+                  :key="index"
+                  @click="
+                    [
+                      () => (showRecorder = true),
+                      () => (showActions = true),
+                      showHelp,
+                    ][index]
+                  "
+                  v-show="quickcommandInfo.program === 'quickcommand'"
+                >
                   <q-item-section avatar>
                     <q-icon :name="item" />
                   </q-item-section>
@@ -67,15 +100,29 @@
                   }}</q-item-section>
                 </q-item>
                 <!-- 自定义解释器 -->
-                <q-item v-for="(item, index) in Object.keys(
-                  quickcommandInfo.customOptions
-                )" :key="index" v-show="quickcommandInfo.program === 'custom'">
-                  <q-input stack-label autofocus dense outlined class="full-width" @blur="matchLanguage" :label="[
-                    '解释器路径，如：/opt/python',
-                    '运行参数，如：-u',
-                    '脚本后缀，不含点，如：py',
-                  ][index]
-                    " v-model="quickcommandInfo.customOptions[item]">
+                <q-item
+                  v-for="(item, index) in Object.keys(
+                    quickcommandInfo.customOptions
+                  )"
+                  :key="index"
+                  v-show="quickcommandInfo.program === 'custom'"
+                >
+                  <q-input
+                    stack-label
+                    autofocus
+                    dense
+                    outlined
+                    class="full-width"
+                    @blur="matchLanguage"
+                    :label="
+                      [
+                        '解释器路径，如：/opt/python',
+                        '运行参数，如：-u',
+                        '脚本后缀，不含点，如：py',
+                      ][index]
+                    "
+                    v-model="quickcommandInfo.customOptions[item]"
+                  >
                     <template v-slot:prepend>
                       <q-icon name="code" />
                     </template>
@@ -83,17 +130,36 @@
                 </q-item>
                 <!-- 脚本参数 -->
                 <q-item v-show="quickcommandInfo.program !== 'quickcommand'">
-                  <q-input dense stack-label outlined label="脚本参数" class="full-width" v-model="quickcommandInfo.scptarg">
+                  <q-input
+                    dense
+                    stack-label
+                    outlined
+                    label="脚本参数"
+                    class="full-width"
+                    v-model="quickcommandInfo.scptarg"
+                  >
                     <template v-slot:prepend>
                       <q-icon name="input" />
                     </template>
                   </q-input>
                 </q-item>
                 <!-- 编码设置 -->
-                <q-item v-for="(item, index) in Object.keys(quickcommandInfo.charset)" :key="index"
-                  v-show="quickcommandInfo.program !== 'quickcommand'">
-                  <q-select dense outlined stack-label clearable class="full-width" :label="['脚本编码', '输出编码'][index]"
-                    v-model="quickcommandInfo.charset[item]" :options="['GBK', 'utf8', 'Big5']" type="text">
+                <q-item
+                  v-for="(item, index) in Object.keys(quickcommandInfo.charset)"
+                  :key="index"
+                  v-show="quickcommandInfo.program !== 'quickcommand'"
+                >
+                  <q-select
+                    dense
+                    outlined
+                    stack-label
+                    clearable
+                    class="full-width"
+                    :label="['脚本编码', '输出编码'][index]"
+                    v-model="quickcommandInfo.charset[item]"
+                    :options="['GBK', 'utf8', 'Big5']"
+                    type="text"
+                  >
                     <template v-slot:prepend>
                       <q-icon :name="['format_size', 'output'][index]" />
                     </template>
@@ -102,10 +168,26 @@
               </q-list>
             </q-btn-dropdown>
             <q-separator vertical inset />
-            <q-btn style="padding: 0 10px" dense flat color="primary" icon="play_arrow" label="运行"
-              @click="runCurrentCommand()"></q-btn>
-            <q-btn flat style="padding: 0 10px" dense v-if="!isRunCodePage" :disable="!canCommandSave"
-              :color="canCommandSave ? 'primary' : 'grey'" icon="save" label="保存" @click="saveCurrentCommand()"></q-btn>
+            <q-btn
+              style="padding: 0 10px"
+              dense
+              flat
+              color="primary"
+              icon="play_arrow"
+              label="运行"
+              @click="runCurrentCommand()"
+            ></q-btn>
+            <q-btn
+              flat
+              style="padding: 0 10px"
+              dense
+              v-if="!isRunCodePage"
+              :disable="!canCommandSave"
+              :color="canCommandSave ? 'primary' : 'grey'"
+              icon="save"
+              label="保存"
+              @click="saveCurrentCommand()"
+            ></q-btn>
           </q-btn-group>
         </div>
         <q-dialog v-model="showActions">
@@ -116,12 +198,19 @@
         </q-dialog>
       </div>
     </div>
-    <MonacoEditor class="absolute-bottom" :placeholder="true" ref="editor" @loaded="monacoInit"
-      @typing="(val) => monacoTyping(val)" @keyStroke="monacoKeyStroke" :style="{
+    <MonacoEditor
+      class="absolute-bottom"
+      :placeholder="true"
+      ref="editor"
+      @loaded="monacoInit"
+      @typing="(val) => monacoTyping(val)"
+      @keyStroke="monacoKeyStroke"
+      :style="{
         top: languageBarHeight + 'px',
         left: action.type === 'run' ? 0 : sideBarWidth + 'px',
         // transition: '0.3s',
-      }" />
+      }"
+    />
     <!-- 运行结果 -->
     <CommandRunResult :action="action" ref="result"></CommandRunResult>
   </div>
@@ -195,7 +284,7 @@ export default {
         this.configurationPage.allQuickCommandTags,
         "默认",
         "未分类",
-        "搜索结果",
+        "搜索结果"
         // "来自分享"
       );
     },
@@ -256,7 +345,7 @@ export default {
       this.sideBarWidth = !!this.sideBarWidth ? 0 : defaultSideBarWidth;
     },
     // 保存
-    saveCurrentCommand() {
+    saveCurrentCommand(config = { silent: false }) {
       let updatedData = this.$refs.sidebar?.SaveMenuData();
       if (!updatedData) return;
       Object.assign(this.quickcommandInfo, _.cloneDeep(updatedData));
@@ -269,9 +358,17 @@ export default {
         type: "save",
         data: newQuickcommandInfo,
       });
+      if (!config.silent)
+        quickcommand.showMessageBox(
+          "保存成功！",
+          "success",
+          1000,
+          "bottom-right"
+        );
     },
     // 运行
     runCurrentCommand(cmd) {
+      this.saveCurrentCommand({ silent: true });
       let command = _.cloneDeep(this.quickcommandInfo);
       if (cmd) command.cmd = cmd;
       command.output =
diff --git a/src/components/quickcommandUI/QuickCommand.vue b/src/components/quickcommandUI/QuickCommand.vue
index ac10501..f0d6a9c 100644
--- a/src/components/quickcommandUI/QuickCommand.vue
+++ b/src/components/quickcommandUI/QuickCommand.vue
@@ -89,7 +89,7 @@ export default {
           );
         }),
 
-      showMessageBox: (message, icon = "success", time) => {
+      showMessageBox: (message, icon = "success", time, position = "top") => {
         message = _.truncate(message, { length: 1200 });
         if (icon === "success") icon = "positive";
         if (icon === "error") icon = "negative";
@@ -99,7 +99,7 @@ export default {
           type: icon,
           message: message,
           timeout: time,
-          position: "top",
+          position: position,
           actions:
             time === 0
               ? [
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index 9d44495..0af0dc6 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -619,7 +619,7 @@ export default {
       switch (event.type) {
         case "save":
           this.saveCommand(event.data);
-          this.isCommandEditorShow = false;
+          // this.isCommandEditorShow = false;
         default:
           return;
       }