From feaf1ccf64f4a1b2fa45286cc6e72a9fa3305a15 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Thu, 23 Jan 2025 15:39:06 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=20OptionEditor=20=E5=92=8C?=
 =?UTF-8?q?=20ParamInput=20=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=EF=BC=9A?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=88=97=E5=AE=BD=E8=AE=A1=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../composer/card/CommandButtons.vue          |  2 +-
 .../composer/common/OptionEditor.vue          | 24 ++++++++++---------
 src/components/composer/param/ParamInput.vue  | 23 ++++++++++++++----
 src/js/composer/commands/macosCommands.js     |  3 ---
 src/js/composer/commands/windowsCommands.js   |  2 +-
 5 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/components/composer/card/CommandButtons.vue b/src/components/composer/card/CommandButtons.vue
index 707e28a..cc74117 100644
--- a/src/components/composer/card/CommandButtons.vue
+++ b/src/components/composer/card/CommandButtons.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="command-buttons q-px-sm">
+  <div class="command-buttons q-pl-sm">
     <div class="row items-center no-wrap">
       <!-- 输出变量设置和按钮 -->
       <div
diff --git a/src/components/composer/common/OptionEditor.vue b/src/components/composer/common/OptionEditor.vue
index 642408f..30ebb8d 100644
--- a/src/components/composer/common/OptionEditor.vue
+++ b/src/components/composer/common/OptionEditor.vue
@@ -5,11 +5,11 @@
     :icon="icon"
     :model-value="isCollapse"
   >
-    <div class="param-grid">
+    <div class="option-grid">
       <div
         v-for="([key, config], index) in Object.entries(options)"
         :key="`${key}-${index}`"
-        class="grid-item"
+        class="option-item"
         :style="getColumnStyle(config.width)"
       >
         <ParamImporter
@@ -72,8 +72,9 @@ export default defineComponent({
         };
       }
       const columnWidth = (width / 12) * 100;
+      const gapWidth = 8;
       return {
-        width: `calc(${columnWidth}% - var(--grid-gap))`,
+        width: `calc(${columnWidth}% - ${gapWidth * (1 - width / 12)}px)`,
         flex: "0 0 auto",
       };
     },
@@ -85,7 +86,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.param-grid {
+.option-grid {
   display: flex;
   flex-wrap: wrap;
   gap: var(--grid-gap);
@@ -93,28 +94,29 @@ export default defineComponent({
   --grid-gap: 8px;
 }
 
-.grid-item {
+.option-item {
   min-width: 50px;
-  margin-bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.grid-item > * {
+.option-item > * {
   flex: 1;
   min-width: 0;
+  width: 100%;
 }
 
 /* 让开关、复选框和按钮组居中显示 */
-.grid-item > .q-toggle,
-.grid-item > .q-checkbox,
-.grid-item > .q-btn-group {
+.option-item > .q-toggle,
+.option-item > .q-checkbox,
+.option-item > .q-btn-group {
   flex: 0 1 auto;
+  width: auto;
 }
 
 @media (max-width: 600px) {
-  .grid-item {
+  .option-item {
     width: 100% !important;
     flex: 1 1 100% !important;
   }
diff --git a/src/components/composer/param/ParamInput.vue b/src/components/composer/param/ParamInput.vue
index daa2a04..2239115 100644
--- a/src/components/composer/param/ParamInput.vue
+++ b/src/components/composer/param/ParamInput.vue
@@ -3,7 +3,10 @@
     <div
       v-for="(config, index) in configs"
       :key="index"
-      class="grid-item"
+      :class="{
+        'grid-item': config.component !== 'OptionEditor',
+        'option-container': config.component === 'OptionEditor',
+      }"
       :style="getColumnStyle(config.width)"
     >
       <OptionEditor
@@ -64,8 +67,9 @@ export default defineComponent({
         };
       }
       const columnWidth = (width / 12) * 100;
+      const gapWidth = 8; // 与 CSS 中的 --grid-gap 保持一致
       return {
-        width: `calc(${columnWidth}% - var(--grid-gap))`,
+        width: `calc(${columnWidth}% - ${gapWidth * (1 - width / 12)}px)`,
         flex: "0 0 auto",
       };
     },
@@ -80,14 +84,13 @@ export default defineComponent({
 .param-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--grid-gap);
+  gap: 8px;
   width: 100%;
   --grid-gap: 8px;
 }
 
 .grid-item {
   min-width: 50px;
-  margin-bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -103,6 +106,7 @@ export default defineComponent({
 .grid-item > .q-checkbox,
 .grid-item > .q-btn-group {
   flex: 0 1 auto;
+  width: auto;
 }
 
 @media (max-width: 600px) {
@@ -111,4 +115,15 @@ export default defineComponent({
     flex: 1 1 100% !important;
   }
 }
+
+.option-container {
+  min-width: 50px;
+  width: 100%;
+  display: flex;
+}
+
+.option-container > * {
+  flex: 1;
+  min-width: 0;
+}
 </style>
diff --git a/src/js/composer/commands/macosCommands.js b/src/js/composer/commands/macosCommands.js
index 88ed474..ecffa32 100644
--- a/src/js/composer/commands/macosCommands.js
+++ b/src/js/composer/commands/macosCommands.js
@@ -1,6 +1,3 @@
-import { newVarInputVal } from "js/composer/varInputValManager";
-import { browserCommands } from "js/composer/commands/browserCommands";
-
 export const macosCommands = {
   label: "Mac自动化",
   icon: "laptop_mac",
diff --git a/src/js/composer/commands/windowsCommands.js b/src/js/composer/commands/windowsCommands.js
index 299cbf4..139b5ff 100644
--- a/src/js/composer/commands/windowsCommands.js
+++ b/src/js/composer/commands/windowsCommands.js
@@ -1,5 +1,5 @@
 import { newVarInputVal } from "js/composer/varInputValManager.js";
-import { browserCommands } from "js/composer/commands/browserCommands.js";
+
 const sendKeys = [
   // 特殊按键
   { value: "{ENTER}", label: "回车键 (Enter)" },