From 9ebae5cbf311dc5baec0a45a9dbfba51e4260a2c Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Sat, 21 Dec 2024 21:34:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=BF=AB=E6=8D=B7=E5=8A=A8?=
 =?UTF-8?q?=E4=BD=9C=E7=9A=84send=E4=BD=BF=E7=94=A8utools=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=EF=BC=8C=E6=8C=89=E9=92=AE=E9=87=8D=E6=96=B0=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 plugin/preload.js                            |   3 +-
 src/components/editor/CommandLanguageBar.vue | 216 +++++++++++++------
 2 files changed, 150 insertions(+), 69 deletions(-)

diff --git a/plugin/preload.js b/plugin/preload.js
index 481d488..481e84a 100644
--- a/plugin/preload.js
+++ b/plugin/preload.js
@@ -94,8 +94,7 @@ const shortCodes = [
     electron.clipboard.writeText(text);
   }),
   (send = (text) => {
-    copyTo(text);
-    quickcommand.simulatePaste();
+    utools.hideMainWindowTypeString(text);
   }),
 ];
 
diff --git a/src/components/editor/CommandLanguageBar.vue b/src/components/editor/CommandLanguageBar.vue
index eb48c01..7957d8e 100644
--- a/src/components/editor/CommandLanguageBar.vue
+++ b/src/components/editor/CommandLanguageBar.vue
@@ -35,32 +35,34 @@
     </div>
     <q-separator vertical />
     <div class="col-auto justify-end flex">
-      <q-btn-group unelevated>
+      <q-btn-group unelevated class="button-group">
+        <template v-if="modelValue.program === 'quickcommand'">
+          <q-btn
+            v-for="(item, index) in ['keyboard', 'rocket_launch', 'help_center']"
+            :key="index"
+            dense
+            flat
+            color="primary"
+            class="settings-btn"
+            :icon="item"
+            @click="handleQuickCommandAction(index)"
+          >
+            <q-tooltip>
+              {{ ["录制按键", "快捷动作", "查看文档"][index] }}
+            </q-tooltip>
+          </q-btn>
+        </template>
+
         <q-btn-dropdown
-          v-show="modelValue.program !== 'html'"
-          style="padding: 0 10px"
+          v-else-if="modelValue.program !== 'html'"
+          class="settings-btn"
           dense
           flat
           ref="settings"
           color="primary"
-          :icon="modelValue.program === 'quickcommand' ? 'insights' : 'settings'"
+          icon="settings"
         >
           <q-list>
-            <!-- quickcommand系列按键 -->
-            <q-item
-              clickable
-              v-for="(item, index) in ['keyboard', 'ads_click', 'help']"
-              :key="index"
-              @click="handleQuickCommandAction(index)"
-              v-show="modelValue.program === 'quickcommand'"
-            >
-              <q-item-section avatar>
-                <q-icon :name="item" />
-              </q-item-section>
-              <q-item-section>{{
-                ["录制按键", "快捷动作", "查看文档"][index]
-              }}</q-item-section>
-            </q-item>
             <!-- 自定义解释器 -->
             <q-item
               v-for="(item, index) in Object.keys(modelValue.customOptions)"
@@ -74,11 +76,13 @@
                 outlined
                 class="full-width"
                 @blur="matchLanguage"
-                :label="[
-                  '解释器路径，如：/opt/python',
-                  '运行参数，如：-u',
-                  '脚本后缀，不含点，如：py',
-                ][index]"
+                :label="
+                  [
+                    '解释器路径，如：/opt/python',
+                    '运行参数，如：-u',
+                    '脚本后缀，不含点，如：py',
+                  ][index]
+                "
                 :model-value="modelValue.customOptions[item]"
                 @update:model-value="(val) => updateCustomOption(item, val)"
               >
@@ -130,7 +134,7 @@
         </q-btn-dropdown>
         <q-separator vertical inset />
         <q-btn
-          style="padding: 0 10px"
+          class="action-btn run-btn"
           dense
           flat
           color="primary"
@@ -139,8 +143,8 @@
           @click="$emit('run')"
         ></q-btn>
         <q-btn
+          class="action-btn save-btn"
           flat
-          style="padding: 0 10px"
           dense
           v-if="!isRunCodePage"
           :disable="!canCommandSave"
@@ -167,7 +171,7 @@ import QuickAction from "components/popup/QuickAction";
 import KeyRecorder from "components/popup/KeyRecorder";
 
 export default {
-  name: 'CommandLanguageBar',
+  name: "CommandLanguageBar",
   components: {
     QuickAction,
     KeyRecorder,
@@ -175,94 +179,172 @@ export default {
   props: {
     modelValue: {
       type: Object,
-      required: true
+      required: true,
     },
     height: {
       type: Number,
-      default: 40
+      default: 40,
     },
     canCommandSave: {
       type: Boolean,
-      default: true
+      default: true,
     },
     isRunCodePage: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
       showActions: false,
       showRecorder: false,
-    }
+    };
   },
-  emits: ['update:modelValue', 'program-changed', 'run', 'save', 'show-recorder', 'show-actions', 'show-help', 'add-action'],
+  emits: [
+    "update:modelValue",
+    "program-changed",
+    "run",
+    "save",
+    "show-recorder",
+    "show-actions",
+    "show-help",
+    "add-action",
+  ],
   computed: {
     programLanguages() {
-      return Object.keys(this.$root.programs)
-    }
+      return Object.keys(this.$root.programs);
+    },
   },
   methods: {
     updateProgram(value) {
-      this.$emit('update:modelValue', {
+      this.$emit("update:modelValue", {
         ...this.modelValue,
-        program: value
-      })
-      this.programChanged(value)
+        program: value,
+      });
+      this.programChanged(value);
     },
     updateCustomOption(key, value) {
-      this.$emit('update:modelValue', {
+      this.$emit("update:modelValue", {
         ...this.modelValue,
         customOptions: {
           ...this.modelValue.customOptions,
-          [key]: value
-        }
-      })
+          [key]: value,
+        },
+      });
     },
     updateScptarg(value) {
-      this.$emit('update:modelValue', {
+      this.$emit("update:modelValue", {
         ...this.modelValue,
-        scptarg: value
-      })
+        scptarg: value,
+      });
     },
     updateCharset(key, value) {
-      this.$emit('update:modelValue', {
+      this.$emit("update:modelValue", {
         ...this.modelValue,
         charset: {
           ...this.modelValue.charset,
-          [key]: value
-        }
-      })
+          [key]: value,
+        },
+      });
     },
     programChanged(value) {
-      this.$emit('program-changed', value)
-      if (value === 'custom') {
-        this.$refs.settings.show()
+      this.$emit("program-changed", value);
+      if (value === "custom") {
+        this.$refs.settings.show();
       }
     },
     matchLanguage() {
-      if (!this.modelValue.customOptions.ext) return
+      if (!this.modelValue.customOptions.ext) return;
       let language = Object.values(this.$root.programs).filter(
-        program => program.ext === this.modelValue.customOptions.ext
-      )
+        (program) => program.ext === this.modelValue.customOptions.ext
+      );
       if (language.length) {
-        this.$emit('program-changed', language[0].name)
+        this.$emit("program-changed", language[0].name);
       }
     },
     handleQuickCommandAction(index) {
       const actions = [
-        () => this.showRecorder = true,
-        () => this.showActions = true,
-        () => this.showHelp()
-      ]
-      actions[index]()
+        () => (this.showRecorder = true),
+        () => (this.showActions = true),
+        () => this.showHelp(),
+      ];
+      actions[index]();
     },
     addAction(text) {
-      this.$emit('add-action', text)
+      this.$emit("add-action", text);
     },
     showHelp() {
-      window.showUb.docs()
-    }
+      window.showUb.docs();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.button-group {
+  .action-btn {
+    padding: 0 10px;
   }
 }
-</script>
+
+/* 运行按钮动画 */
+.run-btn:hover :deep(.q-icon) {
+  display: inline-block;
+  animation: slideRight 1.5s infinite;
+}
+
+/* 保存按钮动画 */
+.save-btn:not([disabled]):hover :deep(.q-icon) {
+  display: inline-block;
+  animation: saveAnimation 1.2s infinite;
+}
+
+/* 设置按钮动画 */
+.settings-btn :deep(.q-icon:first-child) {
+  display: inline-block;
+  transform: scale(1);
+  transition: transform 0.5s ease;
+}
+
+.settings-btn:hover :deep(.q-icon:first-child) {
+  transform: scale(1.05);
+}
+
+@keyframes slideRight {
+  0% {
+    transform: translateX(-2px);
+    opacity: 0.7;
+  }
+  50% {
+    transform: translateX(2px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-2px);
+    opacity: 0.7;
+  }
+}
+
+@keyframes saveAnimation {
+  0% {
+    transform: translateY(-1px);
+    opacity: 1;
+  }
+  50% {
+    transform: translateY(1px);
+    opacity: 0.6;
+  }
+  75% {
+    transform: translateY(0.5px);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(-1px);
+    opacity: 1;
+  }
+}
+
+.settings-btn:hover :deep(.q-icon) {
+  display: inline-block;
+}
+</style>