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

fofolee · fofolee · commit 5947e537fe6a · 2025-01-07T00:41:28.000+08:00
diff --git a/src/components/composer/CommandComposer.vue b/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 removeVariable = (name) => {
-      const index = variables.value.findIndex((v) => v.name === name);
-      if (index !== -1) {
-        variables.value.splice(index, 1);
+    // 提供获取当前变量的函数，直接返回解析后的变量列表
+    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;
     };
 
-    provide("composerVariables", variables);
-    provide("addVariable", addVariable);
-    provide("removeVariable", removeVariable);
+    provide("getCurrentVariables", getCurrentVariables);
 
     return {
-      variables,
-      addVariable,
-      removeVariable,
+      commandFlow,
     };
   },
   data() {
     return {
-      commandFlow: [],
       availableCommands,
     };
   },
diff --git a/src/components/composer/ComposerCard.vue b/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 (this.variables.some((v) => v.name === value)) {
-        quickcommand.showMessageBox(`变量名 "${value}" 已经存在`, "warning");
-        return;
+      if (result.warning) {
+        quickcommand.showMessageBox(result.warning, "info");
       }
 
-      // 处理变量管理
-      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;
       }
     },
diff --git a/src/components/composer/ComposerFlow.vue b/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})}`,
         },
       ];
       // 触发运行事件
diff --git a/src/components/composer/MultiParams.vue b/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) {
diff --git a/src/components/composer/card/CommandButtons.vue b/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,13 +92,35 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      inputValue: this.command.outputVariable || "",
+      sourceValue: "",
+    };
+  },
+  watch: {
+    "command.outputVariable"(newVal) {
+      this.inputValue = newVal || "";
+    },
+  },
   emits: [
     "update:outputVariable",
     "toggle-output",
     "run",
     "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) {
diff --git a/src/components/composer/common/VariableInput.vue b/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: [],
     };
   },
 
diff --git a/src/components/composer/ubrowser/UBrowserOperations.vue b/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,
         };
diff --git a/src/js/common/variableValidator.js b/src/js/common/variableValidator.js
@@ -117,6 +117,9 @@ const reservedWords = [
  * @returns {object} - 包含验证结果和错误信息的对象
  */
 export function validateVariableName(name) {
+  // 去除空格
+  name = name.trim();
+
   // 检查是否为空
   if (!name) {
     return {
diff --git a/src/js/composer/commands/uiCommand.js b/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: "按钮组",
diff --git a/src/js/composer/variableManager.js b/src/js/composer/variableManager.js

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,8 @@ export const uiCommands = {`
`7`	`7`	`value: "quickcommand.showButtonBox",`
`8`	`8`	`label: "按钮组弹窗",`
`9`	`9`	`isAsync: true,`
	`10`	`+ outputVariable: "{id,text}",`
	`11`	`+ saveOutput: true,`
`10`	`12`	`config: [`
`11`	`13`	`{`
`12`	`14`	`label: "按钮组",`