重构 OptionEditor 和 ParamInput 组件样式：调整列宽计算

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

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;
   }

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>

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",

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)" },