加强变量校验，重复和非法时自动重命名，优化变量管理，实时获取最新变量，不再进行增删操作

src/components/composer/CommandComposer.vue

@@ -29,6 +29,7 @@ import {
   findCommandByValue,
 } from "js/composer/composerConfig";
 import { generateCode } from "js/composer/generateCode";
+import { parseVariables } from "js/composer/variableManager";
 
 export default defineComponent({
   name: "CommandComposer",
@@ -37,37 +38,32 @@ export default defineComponent({
     ComposerFlow,
   },
   setup() {
-    const variables = ref([]);
+    const commandFlow = ref([]);
 
-    const addVariable = (name, command) => {
-      if (!variables.value.find((v) => v.name === name)) {
-        variables.value.push({
-          name,
-          sourceCommand: command,
-        });
+    // 提供获取当前变量的函数，直接返回解析后的变量列表
+    const getCurrentVariables = () => {
+      const variables = [];
+      for (const cmd of commandFlow.value) {
+        if (cmd.saveOutput && cmd.outputVariable) {
+          variables.push(
+            ...parseVariables(cmd.outputVariable).map((variable) => ({
+              name: variable,
+              sourceCommand: cmd,
+            }))
+          );
+        }
       }
+      return variables;
     };
 
-    const removeVariable = (name) => {
-      const index = variables.value.findIndex((v) => v.name === name);
-      if (index !== -1) {
-        variables.value.splice(index, 1);
-      }
-    };
-
-    provide("composerVariables", variables);
-    provide("addVariable", addVariable);
-    provide("removeVariable", removeVariable);
+    provide("getCurrentVariables", getCurrentVariables);
 
     return {
-      variables,
-      addVariable,
-      removeVariable,
+      commandFlow,
     };
   },
   data() {
     return {
-      commandFlow: [],
       availableCommands,
     };
   },

src/components/composer/ComposerCard.vue

@@ -66,11 +66,11 @@
 
 <script>
 import { defineComponent, inject } from "vue";
-import { validateVariableName } from "js/common/variableValidator";
 import VariableInput from "components/composer/common/VariableInput.vue";
 import MultiParams from "components/composer/MultiParams.vue";
 import CommandHead from "components/composer/card/CommandHead.vue";
 import * as CardComponents from "js/composer/cardComponents";
+import { processVariable } from "js/composer/variableManager";
 
 export default defineComponent({
   name: "ComposerCard",
@@ -110,46 +110,27 @@ export default defineComponent({
     },
   },
   setup() {
-    const addVariable = inject("addVariable");
-    const removeVariable = inject("removeVariable");
-    const variables = inject("composerVariables", []);
-
-    return {
-      addVariable,
-      removeVariable,
-      variables,
-    };
+    const getCurrentVariables = inject("getCurrentVariables");
+    return { getCurrentVariables };
   },
   methods: {
     handleOutputVariableUpdate(value) {
-      // 检查变量名是否合法
-      const validation = validateVariableName(value);
-      if (!validation.isValid) {
-        quickcommand.showMessageBox(validation.error, "warning");
-        return;
+      const result = processVariable({
+        value,
+        existingVars: this.getCurrentVariables().map((v) => v.name),
+      });
+
+      if (result.warning) {
+        quickcommand.showMessageBox(result.warning, "info");
       }
 
-      // 检查变量名是否重复
-      if (this.variables.some((v) => v.name === value)) {
-        quickcommand.showMessageBox(`变量名 "${value}" 已经存在`, "warning");
-        return;
-      }
-
-      // 处理变量管理
-      if (this.localCommand.outputVariable) {
-        this.removeVariable(this.localCommand.outputVariable);
-      }
-      if (value) {
-        this.addVariable(value, this.localCommand);
-      }
-      this.localCommand.outputVariable = value;
+      this.localCommand.outputVariable = result.processedValue;
     },
     handleToggleOutput() {
       this.localCommand.saveOutput = !this.localCommand.saveOutput;
 
       // 如果关闭输出，清空变量名
-      if (!this.localCommand.saveOutput && this.localCommand.outputVariable) {
-        this.removeVariable(this.localCommand.outputVariable);
+      if (!this.localCommand.saveOutput) {
         this.localCommand.outputVariable = null;
       }
     },

src/components/composer/ComposerFlow.vue

@@ -74,6 +74,7 @@ import ChainStyles from "./flow/ChainStyles.vue";
 import EmptyFlow from "./flow/EmptyFlow.vue";
 import DropArea from "./flow/DropArea.vue";
 import { findCommandByValue } from "js/composer/composerConfig";
+import { processVariable } from "js/composer/variableManager";
 
 export default defineComponent({
   name: "ComposerFlow",
@@ -96,11 +97,11 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ["update:modelValue", "add-command", "action"],
   setup() {
-    const removeVariable = inject("removeVariable");
-    return { removeVariable };
+    const getCurrentVariables = inject("getCurrentVariables");
+    return { getCurrentVariables };
   },
+  emits: ["update:modelValue", "add-command", "action"],
   data() {
     return {
       dragIndex: -1,
@@ -261,13 +262,17 @@ export default defineComponent({
       } catch (error) {}
     },
     createNewCommand(parsedAction) {
-      return {
+      const newCommand = {
         ...parsedAction,
         id: this.getUniqueId(),
-        saveOutput: false,
-        useOutput: null,
-        outputVariable: null,
       };
+      if (newCommand.saveOutput && newCommand.outputVariable) {
+        newCommand.outputVariable = processVariable({
+          value: newCommand.outputVariable,
+          existingVars: this.getCurrentVariables().map((v) => v.name),
+        }).processedValue;
+      }
+      return newCommand;
     },
     getUniqueId() {
       return this.$root.getUniqueId();
@@ -284,9 +289,6 @@ export default defineComponent({
         const cmd = newCommands[i];
         // 如果chainId不为空，则只删除指定chainId的命令
         if (chainId && cmd.chainId !== chainId) continue;
-        if (cmd.outputVariable) {
-          this.removeVariable(cmd.outputVariable);
-        }
         newCommands.splice(i, 1);
       }
       this.$emit("update:modelValue", newCommands);
@@ -326,7 +328,7 @@ export default defineComponent({
         command,
         {
           //没有输出，则不打印
-          code: `${command.outputVariable} && console.log(${command.outputVariable})`,
+          code: `if(${command.outputVariable}!==undefined){console.log(${command.outputVariable})}`,
         },
       ];
       // 触发运行事件

src/components/composer/MultiParams.vue

@@ -179,15 +179,13 @@ export default defineComponent({
       )?.label;
       const subFeature = funcNameLabel ? `${funcNameLabel} ` : "";
       const allArgvs = argvs
+        .filter((item) => item != null && item != "")
         .map((item) =>
-          item?.hasOwnProperty("__varInputVal__")
-            ? window.lodashM.truncate(item.value, {
-                length: 30,
-                omission: "...",
-              })
-            : item
-        )
-        .filter((item) => item != null && item != "");
+          window.lodashM.truncate(stringifyArgv(item).toString(), {
+            length: 30,
+            omission: "...",
+          })
+        );
       return `${subFeature}${allArgvs.join(",")}`;
     },
     updateModelValue(funcName, argvs) {

src/components/composer/card/CommandButtons.vue

@@ -9,8 +9,9 @@
         <!-- 变量输入框 -->
         <q-input
           v-if="command.saveOutput"
-          :model-value="command.outputVariable"
-          @update:model-value="$emit('update:outputVariable', $event)"
+          v-model="inputValue"
+          @focus="sourceValue = inputValue"
+          @blur="handleBlur"
           outlined
           placeholder="变量名"
           class="variable-input"
@@ -91,6 +92,17 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      inputValue: this.command.outputVariable || "",
+      sourceValue: "",
+    };
+  },
+  watch: {
+    "command.outputVariable"(newVal) {
+      this.inputValue = newVal || "";
+    },
+  },
   emits: [
     "update:outputVariable",
     "toggle-output",
@@ -98,6 +110,17 @@ export default {
     "remove",
     "toggle-collapse",
   ],
+  methods: {
+    handleBlur() {
+      // 如果输入框的值和源值相同，则不更新
+      if (
+        this.inputValue.replace(/[ ]/g, "") ===
+        this.sourceValue.replace(/[ ]/g, "")
+      )
+        return;
+      this.$emit("update:outputVariable", this.inputValue);
+    },
+  },
 };
 </script>
 
@@ -115,7 +138,7 @@ export default {
 }
 
 .variable-input {
-  width: 100px;
+  width: 120px;
 }
 
 .output-section :deep(.q-field) {

src/components/composer/common/VariableInput.vue

@@ -79,7 +79,7 @@
         }"
         class="variable-dropdown prepend-btn"
         size="sm"
-        v-if="variables.length"
+        @click="variables = getCurrentVariables()"
       >
         <q-list class="variable-list">
           <q-item-label header class="variable-label">
@@ -108,6 +108,15 @@
               </q-item-section>
             </q-item>
           </template>
+          <template v-else>
+            <q-item>
+              <q-item-section>
+                <q-item-label
+                  >无可用变量，请先点击命令卡片输出变量按钮设置变量</q-item-label
+                >
+              </q-item-section>
+            </q-item>
+          </template>
         </q-list>
       </q-btn-dropdown>
     </template>
@@ -176,13 +185,14 @@ export default defineComponent({
 
   emits: ["update:modelValue"],
   setup() {
-    const variables = inject("composerVariables", []);
-    return { variables };
+    const getCurrentVariables = inject("getCurrentVariables");
+    return { getCurrentVariables };
   },
 
   data() {
     return {
       selectedVariable: null,
+      variables: [],
     };
   },
 

src/components/composer/ubrowser/UBrowserOperations.vue

@@ -136,7 +136,6 @@ export default defineComponent({
           id: this.$root.getUniqueId(),
           argv: "",
           saveOutput: false,
-          useOutput: null,
           cmd: action.value || action.cmd,
           value: action.value || action.cmd,
         };

src/js/common/variableValidator.js

@@ -117,6 +117,9 @@ const reservedWords = [
  * @returns {object} - 包含验证结果和错误信息的对象
  */
 export function validateVariableName(name) {
+  // 去除空格
+  name = name.trim();
+
   // 检查是否为空
   if (!name) {
     return {

src/js/composer/commands/uiCommand.js

@@ -7,6 +7,8 @@ export const uiCommands = {
       value: "quickcommand.showButtonBox",
       label: "按钮组弹窗",
       isAsync: true,
+      outputVariable: "{id,text}",
+      saveOutput: true,
       config: [
         {
           label: "按钮组",

src/js/composer/variableManager.js

@@ -0,0 +1,177 @@
+import { validateVariableName } from "js/common/variableValidator";
+
+/**
+ * 生成随机后缀
+ * @param {number} varCount - 当前变量数量
+ * @returns {string} 随机后缀
+ */
+function generateRandomSuffix(varCount) {
+  // 根据变量数量决定后缀长度
+  let length = 1; // 默认1位
+  if (varCount >= 100) {
+    length = 3;
+  } else if (varCount >= 10) {
+    length = 2;
+  }
+
+  return (
+    "_" +
+    Math.random()
+      .toString(36)
+      .substring(2, 2 + length)
+  );
+}
+
+/**
+ * 解析变量名
+ * @param {string} value - 变量表达式
+ * @returns {string[]} 解析出的所有变量名
+ */
+export function parseVariables(value) {
+  if (!value) return [];
+
+  const destructured = extractDestructuredVars(value);
+  if (!destructured) {
+    return [value.trim()];
+  }
+
+  // 处理解构变量
+  return destructured.vars.map((name) => {
+    // 处理重命名格式 (key:value)
+    const parts = name.split(":").map((p) => p.trim());
+    return parts[parts.length - 1]; // 返回实际的变量名
+  });
+}
+
+/**
+ * 生成有效的变量名
+ * @param {string} baseName - 基础变量名
+ * @param {string[]} existingVars - 已存在的变量列表
+ * @param {string} [currentName] - 当前的变量名（如果有）
+ * @returns {string} 有效的变量名
+ */
+function generateValidVarName(baseName, existingVars, currentName = null) {
+  // 如果当前名称有效且不重复，直接返回
+  if (
+    currentName &&
+    validateVariableName(currentName).isValid &&
+    !existingVars.includes(currentName)
+  ) {
+    return currentName;
+  }
+
+  // 如果变量名无效，生成一个随机变量名
+  if (!validateVariableName(baseName).isValid) {
+    baseName = "var" + generateRandomSuffix(existingVars.length);
+  }
+
+  // 如果变量名重复，添加随机后缀直到不重复
+  let finalName = baseName;
+  while (existingVars.includes(finalName)) {
+    let suffix;
+    do {
+      suffix = generateRandomSuffix(existingVars.length);
+    } while (existingVars.includes(baseName + suffix));
+    finalName = baseName + suffix;
+  }
+
+  return finalName;
+}
+
+/**
+ * 处理变量更新
+ * @param {Object} params - 参数对象
+ * @param {string} params.value - 新的变量名
+ * @param {string[]} params.existingVars - 当前已存在的变量列表
+ * @returns {Object} - 处理结果
+ */
+export function processVariable({ value, existingVars }) {
+  if (!value) {
+    return { isValid: true, processedValue: value };
+  }
+
+  const destructured = extractDestructuredVars(value);
+
+  if (!destructured) {
+    // 处理单个变量
+    const processedVar = generateValidVarName(value, existingVars);
+    return {
+      isValid: true,
+      processedValue: processedVar,
+      warning:
+        processedVar !== value ? `变量名已被修改为: ${processedVar}` : null,
+    };
+  }
+
+  // 处理解构变量
+  const processedVars = destructured.vars.map((name) => {
+    const parts = name.split(":").map((p) => p.trim());
+    const key = parts.length > 1 ? parts[0] : parts[0];
+    const varName = parts[parts.length - 1];
+    const processedName = generateValidVarName(varName, existingVars, varName);
+
+    return {
+      key,
+      processedName,
+      needsRename: processedName !== varName,
+    };
+  });
+
+  // 如果有变量需要重命名，使用对象解构格式
+  if (processedVars.some((v) => v.needsRename)) {
+    const pairs = processedVars.map((v) =>
+      v.needsRename ? `${v.key}:${v.processedName}` : v.key
+    );
+    const format = `{${pairs.join(", ")}}`;
+    return {
+      isValid: true,
+      processedValue: format,
+      warning: `变量名已被修改为: ${format}`,
+    };
+  }
+
+  // 保持原始格式
+  const format =
+    destructured.format === "array"
+      ? `[${processedVars.map((v) => v.key).join(", ")}]`
+      : `{${processedVars.map((v) => v.key).join(", ")}}`;
+
+  return {
+    isValid: true,
+    processedValue: format,
+  };
+}
+
+/**
+ * 提取解构变量
+ * @param {string} value - 输入的变量名
+ * @returns {Object|null} - 解构的变量数组和格式，如果不是解构模式则返回null
+ */
+export function extractDestructuredVars(value) {
+  if (!value) return null;
+  value = value.trim();
+
+  // 检查是否是数组解构模式 [a, b, c]
+  if (value.startsWith("[") && value.endsWith("]")) {
+    return {
+      vars: value
+        .slice(1, -1)
+        .split(",")
+        .map((v) => v.trim()),
+      format: "array",
+    };
+  }
+
+  // 检查是否是对象解构模式 {a, b, c}
+  if (value.startsWith("{") && value.endsWith("}")) {
+    return {
+      vars: value
+        .slice(1, -1)
+        .split(",")
+        .map((v) => v.trim()),
+      format: "object",
+    };
+  }
+
+  return null;
+}