编排卡片收缩时显示摘要

2025-07-04 23:22:46 +08:00 · 2025-01-05 14:40:00 +08:00 · 2025-01-05 14:40:00 +08:00 · 54bb43dcc8
commit 54bb43dcc8
parent 923fc9e4de
21 changed files with 325 additions and 213 deletions
--- a/src/components/composer/card/CommandHead.vue
+++ b/src/components/composer/card/CommandHead.vue
@ -20,9 +20,17 @@
    </div>

    <!-- 标题 -->
-    <div class="text-subtitle2 command-label q-px-sm drag-handle">
+    <div class="drag-handle command-label">
+      <div class="text-subtitle2 command-label-text">
        {{ command.label }}
      </div>
+      <div
+        class="text-caption text-grey command-summary"
+        v-if="command.summary && isCollapsed"
+      >
+        {{ command.summary }}
+      </div>
+    </div>

    <!-- 主要内容区域 -->
    <div :class="contentClass">
@ -119,10 +127,20 @@ export default {
  pointer-events: all;
  cursor: grab;
  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }

 .command-label:hover {
  color: var(--q-primary);
  transition: all 0.3s ease;
 }
+
+.command-summary {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>
--- a/src/components/composer/control/ConditionalJudgment.vue
+++ b/src/components/composer/control/ConditionalJudgment.vue
@ -99,19 +99,11 @@ export default defineComponent({
    toggleCondition() {
      this.argvs.showMidCondition = !this.argvs.showMidCondition;
      if (this.argvs.showMidCondition === false) this.argvs.condition = "";
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: this.argvs,
-        code: this.generateCode(this.argvs),
-      });
+      this.updateModelValue(this.argvs);
    },
    updateArgvs(key, value) {
      const argvs = { ...this.argvs, [key]: value };
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs,
-        code: this.generateCode(argvs),
-      });
+      this.updateModelValue(argvs);
    },
    generateCode(argvs) {
      switch (this.type) {
@ -148,14 +140,17 @@ export default defineComponent({
      }
      return argvs;
    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        argvs,
+        code: this.generateCode(argvs),
+      });
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: this.defaultArgvs,
-        code: this.generateCode(this.defaultArgvs),
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/control/ForEachControl.vue
+++ b/src/components/composer/control/ForEachControl.vue
@ -116,11 +116,7 @@ export default defineComponent({
  methods: {
    updateArgvs(key, value) {
      const argvs = { ...this.argvs, [key]: value };
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs,
-        code: this.generateCode(argvs),
-      });
+      this.updateModelValue(argvs);
    },
    generateCode(argvs = this.argvs) {
      switch (this.type) {
@ -155,14 +151,17 @@ export default defineComponent({
      }
      return argvs;
    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        argvs,
+        code: this.generateCode(argvs),
+      });
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: this.defaultArgvs,
-        code: this.generateCode(this.defaultArgvs),
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/control/ForInControl.vue
+++ b/src/components/composer/control/ForInControl.vue
@ -116,11 +116,7 @@ export default defineComponent({
  methods: {
    updateArgvs(key, value) {
      const argvs = { ...this.argvs, [key]: value };
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs,
-        code: this.generateCode(argvs),
-      });
+      this.updateModelValue(argvs);
    },
    generateCode(argvs = this.argvs) {
      switch (this.type) {
@ -152,14 +148,17 @@ export default defineComponent({
      }
      return argvs;
    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        argvs,
+        code: this.generateCode(argvs),
+      });
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: this.defaultArgvs,
-        code: this.generateCode(this.defaultArgvs),
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/control/LoopControl.vue
+++ b/src/components/composer/control/LoopControl.vue
@ -122,11 +122,7 @@ export default defineComponent({
  methods: {
    updateArgvs(key, value) {
      const argvs = { ...this.argvs, [key]: value };
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs,
-        code: this.generateCode(argvs),
-      });
+      this.updateModelValue(argvs);
    },
    generateCode(argvs = this.argvs) {
      switch (this.type) {
@ -163,14 +159,17 @@ export default defineComponent({
      }
      return argvs;
    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        argvs,
+        code: this.generateCode(argvs),
+      });
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: this.defaultArgvs,
-        code: this.generateCode(this.defaultArgvs),
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/control/SwitchControl.vue
+++ b/src/components/composer/control/SwitchControl.vue
@ -113,11 +113,7 @@ export default defineComponent({
  methods: {
    updateArgvs(key, value) {
      const argvs = { ...this.argvs, [key]: value };
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs,
-        code: this.generateCode(argvs),
-      });
+      this.updateModelValue(argvs);
    },
    generateCode(argvs = this.argvs) {
      switch (this.type) {
@ -151,14 +147,17 @@ export default defineComponent({
      }
      return argvs;
    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        argvs,
+        code: this.generateCode(argvs),
+      });
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: this.defaultArgvs,
-        code: this.generateCode(this.defaultArgvs),
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/control/TryCatchControl.vue
+++ b/src/components/composer/control/TryCatchControl.vue
@ -103,11 +103,7 @@ export default defineComponent({
  methods: {
    updateArgvs(key, value) {
      const argvs = { ...this.argvs, [key]: value };
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs,
-        code: this.generateCode(argvs),
-      });
+      this.updateModelValue(argvs);
    },
    generateCode(argvs = this.argvs) {
      switch (this.type) {
@ -135,14 +131,17 @@ export default defineComponent({
      }
      return argvs;
    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        argvs,
+        code: this.generateCode(argvs),
+      });
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: this.defaultArgvs,
-        code: this.generateCode(this.defaultArgvs),
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/control/WhileControl.vue
+++ b/src/components/composer/control/WhileControl.vue
@ -103,11 +103,7 @@ export default defineComponent({
  methods: {
    updateArgvs(key, value) {
      const argvs = { ...this.argvs, [key]: value };
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs,
-        code: this.generateCode(argvs),
-      });
+      this.updateModelValue(argvs);
    },
    generateCode(argvs = this.argvs) {
      switch (this.type) {
@ -137,14 +133,17 @@ export default defineComponent({
      }
      return argvs;
    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        argvs,
+        code: this.generateCode(argvs),
+      });
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: this.defaultArgvs,
-        code: this.generateCode(this.defaultArgvs),
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/crypto/AsymmetricCryptoEditor.vue
+++ b/src/components/composer/crypto/AsymmetricCryptoEditor.vue
@ -299,21 +299,31 @@ export default defineComponent({
        }
      }

+      this.updateModelValue(argvs);
+    },
+    updateModelValue(argvs) {
      this.$emit("update:modelValue", {
        ...this.modelValue,
+        summary: this.getSummary(argvs),
        argvs,
        code: this.generateCode(argvs),
      });
    },
+    getSummary(argvs) {
+      const text = window.lodashM.truncate(argvs.text.value, {
+        length: 30,
+        omission: "...",
+      });
+
+      return argvs.operation === "encrypt"
+        ? "加密" + " " + text
+        : "解密" + " " + text;
+    },
  },
  mounted() {
    // 只在没有 argvs 和 code 的情况下生成默认代码
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: this.defaultArgvs,
-        code: this.generateCode(this.defaultArgvs),
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/crypto/SymmetricCryptoEditor.vue
+++ b/src/components/composer/crypto/SymmetricCryptoEditor.vue
@ -223,13 +223,9 @@ export default defineComponent({
  },
  computed: {
    argvs() {
-      if (this.modelValue.argvs) {
-        return this.modelValue.argvs;
-      }
-      if (!this.modelValue.code) {
-        return window.lodashM.cloneDeep(this.defaultArgvs);
-      }
-      return this.parseCodeToArgvs(this.modelValue.code);
+      return (
+        this.modelValue.argvs || this.parseCodeToArgvs(this.modelValue.code)
+      );
    },
    keyCodecs() {
      return [
@ -324,11 +320,7 @@ export default defineComponent({
        }
      }

-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs,
-        code: this.generateCode(argvs),
-      });
+      this.updateModelValue(argvs);
    },
    parseCodeToArgvs(code) {
      const argvs = window.lodashM.cloneDeep(this.defaultArgvs);
@ -342,14 +334,27 @@ export default defineComponent({
      }
      return argvs;
    },
+    getSummary(argvs) {
+      const text = window.lodashM.truncate(argvs.text.value, {
+        length: 30,
+        omission: "...",
+      });
+      return argvs.operation === "encrypt"
+        ? "加密" + " " + text
+        : "解密" + " " + text;
+    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        summary: this.getSummary(argvs),
+        argvs,
+        code: this.generateCode(argvs),
+      });
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: this.defaultArgvs,
-        code: this.generateCode(this.defaultArgvs),
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/file/FileOperationEditor.vue
+++ b/src/components/composer/file/FileOperationEditor.vue
@ -486,19 +486,11 @@ export default defineComponent({
    };
  },
  computed: {
-    argvs: {
-      get() {
+    argvs() {
      return (
        this.modelValue.argvs || this.parseCodeToArgvs(this.modelValue.code)
      );
    },
-      set(value) {
-        this.$emit("update:modelValue", {
-          ...this.modelValue,
-          argvs: value,
-        });
-      },
-    },
    shouldSelectDirectory() {
      return (
        this.argvs.operation === "list" ||
@ -589,11 +581,7 @@ export default defineComponent({
        }
      }

-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs,
-        code: this.generateCode(argvs),
-      });
+      this.updateModelValue(argvs);
    },
    async selectFile() {
      const result = window.utools.showOpenDialog({
@ -676,14 +664,39 @@ export default defineComponent({
      }
      return argvs;
    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        summary: this.getSummary(argvs),
+        argvs,
+        code: this.generateCode(argvs),
+      });
+    },
+    getSummary(argvs) {
+      const operationDict = {
+        read: "读取",
+        write: "写入",
+        list: "列目录",
+        delete: "删除",
+        manage: "管理",
+        stat: "状态",
+      };
+      const findOptionsLabel = (options, value) => {
+        return options.find((option) => option.value === value)?.label || value;
+      };
+      let operationInfo =
+        argvs.operation === "manage"
+          ? findOptionsLabel(MANAGE_OPERATION_OPTIONS, argvs.manageOperation) +
+            " "
+          : argvs.operation === "stat"
+          ? findOptionsLabel(STAT_MODE_OPTIONS, argvs.statMode) + " "
+          : operationDict[argvs.operation] + " ";
+      return operationInfo + argvs.filePath.value;
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: this.defaultArgvs,
-        code: this.generateCode(this.defaultArgvs),
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/http/AxiosConfigEditor.vue
+++ b/src/components/composer/http/AxiosConfigEditor.vue
@ -472,7 +472,9 @@ export default defineComponent({
        ? `, ${stringifyObject(restConfig)}`
        : "";

-      return `${this.modelValue.value}.${method.toLowerCase()}(${stringifyWithType(url)}${
+      return `${
+        this.modelValue.value
+      }.${method.toLowerCase()}(${stringifyWithType(url)}${
        this.hasRequestData ? `, ${stringifyObject(data)}` : ""
      }${configStr})`;
    },
@ -490,11 +492,7 @@ export default defineComponent({
        }
      }

-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs,
-        code: this.generateCode(argvs),
-      });
+      this.updateModelValue(argvs);
    },
    updateHeaders(headers) {
      // 保留 Content-Type 和 User-Agent
@ -535,14 +533,21 @@ export default defineComponent({
    setFieldValue(path, value) {
      this.updateArgvs(path, value);
    },
+    getSummary(argvs) {
+      return argvs.method + " " + argvs.url.value;
+    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        summary: this.getSummary(argvs),
+        argvs,
+        code: this.generateCode(argvs),
+      });
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: this.defaultArgvs,
-        code: this.generateCode(this.defaultArgvs),
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/regex/RegexEditor.vue
+++ b/src/components/composer/regex/RegexEditor.vue
@ -163,19 +163,11 @@ export default defineComponent({
        isReplace: this.argvs.isReplace,
        replaceValue: this.argvs.replaceValue,
      };
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs,
-        code: this.generateCode(argvs),
-      });
+      this.updateModelValue(argvs);
    },
    updateArgvs(key, value) {
      const argvs = { ...this.argvs, [key]: value };
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs,
-        code: this.generateCode(argvs),
-      });
+      this.updateModelValue(argvs);
    },
    generateCode(argvs) {
      const flagStr = Object.entries(argvs.flags)
@ -270,14 +262,27 @@ export default defineComponent({
        };
      }
    },
+    getSummary(argvs) {
+      return argvs.isReplace
+        ? argvs.textValue.value +
+            " 匹配 " +
+            argvs.regexValue +
+            " 替换为 " +
+            argvs.replaceValue.value
+        : argvs.textValue.value + " 匹配 " + argvs.regexValue;
+    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        summary: this.getSummary(argvs),
+        argvs,
+        code: this.generateCode(argvs),
+      });
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: this.defaultArgvs,
-        code: this.generateCode(this.defaultArgvs),
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/simulate/ImageSearchEditor.vue
+++ b/src/components/composer/simulate/ImageSearchEditor.vue
@ -145,11 +145,7 @@ export default defineComponent({

    updateArgvs(key, value) {
      const argvs = { ...this.argvs, [key]: value };
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs,
-        code: this.generateCode(argvs),
-      });
+      this.updateModelValue(argvs);
    },

    // 处理文件上传
@ -244,14 +240,17 @@ export default defineComponent({
        return argvs;
      }
    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        argvs,
+        code: this.generateCode(argvs),
+      });
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: this.defaultArgvs,
-        code: this.generateCode(this.defaultArgvs),
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/system/OsEditor.vue
+++ b/src/components/composer/system/OsEditor.vue
@ -186,11 +186,7 @@ export default defineComponent({
          }
        }

-        this.$emit("update:modelValue", {
-          ...this.modelValue,
-          code: this.generateCode(newValue),
-          argvs: newValue,
-        });
+        this.updateModelValue(newValue);
      },
    },
    hasOptions() {
@ -281,14 +277,21 @@ export default defineComponent({
        [key]: value,
      };
    },
+    getSummary(argvs) {
+      return this.operations.find((op) => op.name === argvs.operation).label;
+    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        summary: this.getSummary(argvs),
+        argvs,
+        code: this.generateCode(argvs),
+      });
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        code: this.generateCode(this.defaultArgvs),
-        argvs: { ...this.defaultArgvs },
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/system/PathEditor.vue
+++ b/src/components/composer/system/PathEditor.vue
@ -263,11 +263,7 @@ export default defineComponent({
        );
      },
      set(value) {
-        this.$emit("update:modelValue", {
-          ...this.modelValue,
-          code: this.generateCode(value),
-          argvs: value,
-        });
+        this.updateModelValue(value);
      },
    },
    pointerStyle() {
@ -420,14 +416,21 @@ export default defineComponent({
      newPaths.splice(index, 1);
      this.updateArgvs("paths", newPaths);
    },
+    getSummary(argvs) {
+      return this.operations.find((op) => op.name === argvs.operation)?.label;
+    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        summary: this.getSummary(argvs),
+        argvs,
+        code: this.generateCode(argvs),
+      });
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        code: this.generateCode(this.defaultArgvs),
-        argvs: { ...this.defaultArgvs },
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/system/SystemCommandEditor.vue
+++ b/src/components/composer/system/SystemCommandEditor.vue
@ -204,11 +204,7 @@ export default defineComponent({
        );
      },
      set(value) {
-        this.$emit("update:modelValue", {
-          ...this.modelValue,
-          code: this.generateCode(value),
-          argvs: value,
-        });
+        this.updateModelValue(value);
      },
    },
  },
@ -279,14 +275,21 @@ export default defineComponent({
        this.argvs = { ...this.argvs, [key]: value };
      }
    },
+    getSummary(argvs) {
+      return argvs.command.value;
+    },
+    updateModelValue(argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        summary: this.getSummary(argvs),
+        code: this.generateCode(argvs),
+        argvs,
+      });
+    },
  },
  mounted() {
    if (!this.modelValue.argvs && !this.modelValue.code) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        code: this.generateCode(this.defaultArgvs),
-        argvs: this.defaultArgvs,
-      });
+      this.updateModelValue(this.defaultArgvs);
    }
  },
 });
--- a/src/components/composer/ubrowser/UBrowserEditor.vue
+++ b/src/components/composer/ubrowser/UBrowserEditor.vue
@ -79,6 +79,10 @@ export default defineComponent({
      };
    }

+    const getSummary = (argvs) => {
+      return argvs.goto.url.value;
+    };
+
    // 计算 argvs
    const argvs = computed({
      get: () => localConfigs.value,
@ -95,6 +99,7 @@ export default defineComponent({
        emit("update:modelValue", {
          ...props.modelValue,
          argvs: newConfigs,
+          summary: getSummary(newConfigs),
          code: generateUBrowserCode(newConfigs, selectedActions.value),
        });
      },
--- a/src/components/composer/ui/MultiParams.vue
+++ b/src/components/composer/ui/MultiParams.vue
@ -89,11 +89,7 @@ export default defineComponent({
        );
      },
      set(value) {
-        this.$emit("update:modelValue", {
-          ...this.modelValue,
-          functionName: value,
-          code: this.generateCode(value, this.argvs),
-        });
+        this.updateModelValue(value, this.defaultArgvs);
      },
    },
    argvs() {
@ -110,13 +106,7 @@ export default defineComponent({
      const newArgvs = [...this.argvs];
      newArgvs[index] = value;

-      const newCode = this.generateCode(this.functionName, newArgvs);
-
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        argvs: newArgvs,
-        code: newCode,
-      });
+      this.updateModelValue(this.functionName, newArgvs);
    },
    generateCode(functionName, argvs) {
      const newArgvs = argvs.map((argv) => stringifyWithType(argv));
@ -178,6 +168,29 @@ export default defineComponent({
      }
      return argvs;
    },
+    getSummary(argvs) {
+      // 虽然header里对溢出做了处理，但是这里截断主要是为了节省存储空间
+      return argvs
+        .map((item) =>
+          item?.hasOwnProperty("__varInputVal__")
+            ? window.lodashM.truncate(item.value, {
+                length: 30,
+                omission: "...",
+              })
+            : item
+        )
+        .filter((item) => item != null)
+        .join("、");
+    },
+    updateModelValue(functionName, argvs) {
+      this.$emit("update:modelValue", {
+        ...this.modelValue,
+        functionName,
+        summary: this.getSummary(argvs),
+        argvs,
+        code: this.generateCode(functionName, argvs),
+      });
+    },
  },
  mounted() {
    if (
@ -185,12 +198,7 @@ export default defineComponent({
      !this.modelValue.code &&
      !this.modelValue.functionName
    ) {
-      this.$emit("update:modelValue", {
-        ...this.modelValue,
-        functionName: this.functionName,
-        argvs: this.defaultArgvs,
-        code: this.generateCode(this.functionName, this.defaultArgvs),
-      });
+      this.updateModelValue(this.functionName, this.defaultArgvs);
    }
  },
 });
--- a/src/js/composer/customComponentGuide.js
+++ b/src/js/composer/customComponentGuide.js
@ -124,6 +124,49 @@ const customComponentGuide = {
              `,
            },
          },
+          getSummary: {
+            description: "生成命令的简短描述，用于在命令列表中显示",
+            parameters: "argvs - 当前参数对象",
+            implementation: {
+              simpleCase: `
+                // 返回操作类型的标签
+                return this.operations.find(op => op.name === argvs.operation).label;
+              `,
+              complexCase: `
+                // 返回关键参数的值
+                return argvs.command.value;
+              `,
+            },
+            notes: [
+              "返回值应该简洁明了，帮助用户快速识别命令的功能",
+              "对于复杂命令，应该返回最关键的参数信息",
+              "返回的文本长度应该适中，避免过长",
+            ],
+          },
+          updateModelValue: {
+            description: "更新组件的值并触发更新事件",
+            parameters: "argvs - 当前参数对象",
+            implementation: `
+              this.$emit("update:modelValue", {
+                ...this.modelValue,
+                summary: this.getSummary(argvs),
+                code: this.generateCode(argvs),
+                argvs,
+              });
+            `,
+            notes: [
+              "必须保留原有的 modelValue 属性",
+              "必须包含 summary、code 和 argvs 三个字段",
+              "summary 用于在命令列表中显示",
+              "code 是生成的代码字符串",
+              "argvs 是当前的参数对象",
+            ],
+            usage: [
+              "在 mounted 钩子中初始化组件值",
+              "在 argvs setter 中更新组件值",
+              "在任何需要更新组件值的地方调用",
+            ],
+          },
        },
        mounted: {
          description: "组件初始化时的处理",
--- a/src/js/composer/formatString.js
+++ b/src/js/composer/formatString.js
@ -30,13 +30,13 @@ export const stringifyWithType = (argv) => {
 */
 const removeEmptyValues = (obj) => {
  return window.lodashM.omitBy(obj, (value) => {
-    if (
-      window.lodashM.isNil(value) ||
-      value === "" ||
-      (value.isString && value.value === "")
-    )
-      return true;
-    if (typeof value === "object")
+    // 如果value是VariableInput的输出，则取其value值
+    const realValue = value?.hasOwnProperty("__varInputVal__")
+      ? value.value
+      : value;
+    if (window.lodashM.isNil(realValue) || realValue === "") return true;
+    // 如果value是对象，并且不是VariableInput的输出，则递归移除空值
+    if (typeof value === "object" && !value.hasOwnProperty("__varInputVal__"))
      return window.lodashM.isEmpty(removeEmptyValues(value));
    return false;
  });
@ -52,7 +52,7 @@ const processObject = (obj, parentPath = "") => {
  // 移除空值
  obj = removeEmptyValues(obj);
  // 如果是 VariableInput 的输出，直接用 stringifyWithType 处理
-  if (obj && typeof obj === "object" && obj.hasOwnProperty("__varInputVal__")) {
+  if (obj?.hasOwnProperty("__varInputVal__")) {
    return stringifyWithType(obj);
  }

@ -95,6 +95,9 @@ const processObject = (obj, parentPath = "") => {
 * @returns {string} 格式化后的JSON字符串
 */
 export const stringifyObject = (jsonObj) => {
+  if (jsonObj?.hasOwnProperty("__varInputVal__")) {
+    return stringifyWithType(jsonObj);
+  }
  try {
    return processObject(jsonObj);
  } catch (e) {