编排新增按钮组弹窗

src/components/composer/MultiParams.vue

@@ -53,6 +53,9 @@
             :icon="item.icon"
           />
         </div>
+        <div v-else-if="item.type === 'arrayEditor'">
+          <ArrayEditor :model-value="argvs[index]" />
+        </div>
       </div>
     </div>
   </div>
@@ -62,13 +65,20 @@
 import { defineComponent } from "vue";
 import VariableInput from "components/composer/ui/VariableInput.vue";
 import NumberInput from "components/composer/ui/NumberInput.vue";
-import { stringifyWithType, parseToHasType } from "js/composer/formatString";
+import ArrayEditor from "components/composer/ui/ArrayEditor.vue";
+import {
+  stringifyWithType,
+  stringifyObject,
+  parseToHasType,
+  parseFunction,
+} from "js/composer/formatString";
 
 export default defineComponent({
   name: "MultiParams",
   components: {
     VariableInput,
     NumberInput,
+    ArrayEditor,
   },
   props: {
     modelValue: {
@@ -119,7 +129,11 @@ export default defineComponent({
     },
     generateCode(funcName, argvs) {
       const newArgvs = argvs
-        .map((argv) => stringifyWithType(argv))
+        .map((argv) => {
+          return typeof argv === "string"
+            ? stringifyWithType(argv)
+            : stringifyObject(argv);
+        })
         .filter((item) => item != null && item !== "");
       console.log(newArgvs);
       return `${funcName}(${newArgvs.join(",")})`;
@@ -167,6 +181,11 @@ export default defineComponent({
             } else if (config.type === "numInput") {
               // 对于 NumberInput 类型，转换为数字
               argvs[index] = Number(param) || 0;
+            } else if (config.type === "arrayEditor") {
+              let result = parseFunction(`${this.funcName}(${param})`, [
+                "arg0[*]",
+              ]);
+              argvs[index] = result.argv;
             } else {
               // 其他类型直接使用值
               argvs[index] = param;

src/js/composer/commands/index.js

@@ -6,6 +6,7 @@ import { dataCommands } from "./dataCommands";
 import { otherCommands } from "./otherCommands";
 import { simulateCommands } from "./simulateCommands";
 import { controlCommands } from "./controlCommands";
+import { uiCommands } from "./uiCommand";
 
 export const commandCategories = [
   fileCommands,
@@ -16,4 +17,5 @@ export const commandCategories = [
   controlCommands,
   otherCommands,
   simulateCommands,
+  uiCommands,
 ];

src/js/composer/commands/uiCommand.js

@@ -0,0 +1,30 @@
+export const uiCommands = {
+  label: "UI操作",
+  icon: "auto_graph",
+  defaultOpened: false,
+  commands: [
+    {
+      value: "quickcommand.showButtonBox",
+      label: "按钮组弹窗",
+      isAsync: true,
+      config: [
+        {
+          label: "按钮组",
+          type: "arrayEditor",
+          defaultValue: [
+            {
+              value: "按钮1",
+              isString: true,
+              __varInputVal__: true,
+            },
+            {
+              value: "按钮2",
+              isString: true,
+              __varInputVal__: true,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};

src/js/composer/formatString.js

@@ -95,6 +95,9 @@ const processObject = (obj, parentPath = "") => {
  * @returns {string} 格式化后的JSON字符串
  */
 export const stringifyObject = (jsonObj) => {
+  if (jsonObj instanceof Array) {
+    return `[${jsonObj.map((item) => stringifyObject(item)).join(",")}]`;
+  }
   if (jsonObj?.hasOwnProperty("__varInputVal__")) {
     return stringifyWithType(jsonObj);
   }