diff --git a/src/components/composer/card/CommandHead.vue b/src/components/composer/card/CommandHead.vue
index 0eb933f..eafd989 100644
--- a/src/components/composer/card/CommandHead.vue
+++ b/src/components/composer/card/CommandHead.vue
@@ -20,8 +20,16 @@
     </div>
 
     <!-- 标题 -->
-    <div class="text-subtitle2 command-label q-px-sm drag-handle">
-      {{ command.label }}
+    <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>
 
     <!-- 主要内容区域 -->
@@ -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>
diff --git a/src/components/composer/control/ConditionalJudgment.vue b/src/components/composer/control/ConditionalJudgment.vue
index 5fdac12..d149acc 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/control/ForEachControl.vue b/src/components/composer/control/ForEachControl.vue
index 6738887..05397ad 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/control/ForInControl.vue b/src/components/composer/control/ForInControl.vue
index 39367fd..cbbfc43 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/control/LoopControl.vue b/src/components/composer/control/LoopControl.vue
index efc55e5..3ebad8f 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/control/SwitchControl.vue b/src/components/composer/control/SwitchControl.vue
index 02e26d0..416d982 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/control/TryCatchControl.vue b/src/components/composer/control/TryCatchControl.vue
index eaab2ea..be60e0b 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/control/WhileControl.vue b/src/components/composer/control/WhileControl.vue
index 4c0030c..b338bb4 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/crypto/AsymmetricCryptoEditor.vue b/src/components/composer/crypto/AsymmetricCryptoEditor.vue
index c976de5..40b71d0 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/crypto/SymmetricCryptoEditor.vue b/src/components/composer/crypto/SymmetricCryptoEditor.vue
index 6c915f3..a23ffe0 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/file/FileOperationEditor.vue b/src/components/composer/file/FileOperationEditor.vue
index f9459a8..45b45e8 100644
--- a/src/components/composer/file/FileOperationEditor.vue
+++ b/src/components/composer/file/FileOperationEditor.vue
@@ -486,18 +486,10 @@ export default defineComponent({
     };
   },
   computed: {
-    argvs: {
-      get() {
-        return (
-          this.modelValue.argvs || this.parseCodeToArgvs(this.modelValue.code)
-        );
-      },
-      set(value) {
-        this.$emit("update:modelValue", {
-          ...this.modelValue,
-          argvs: value,
-        });
-      },
+    argvs() {
+      return (
+        this.modelValue.argvs || this.parseCodeToArgvs(this.modelValue.code)
+      );
     },
     shouldSelectDirectory() {
       return (
@@ -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);
     }
   },
 });
diff --git a/src/components/composer/http/AxiosConfigEditor.vue b/src/components/composer/http/AxiosConfigEditor.vue
index 4e4c26c..3fcc9da 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/regex/RegexEditor.vue b/src/components/composer/regex/RegexEditor.vue
index 11b8ee0..ce35077 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/simulate/ImageSearchEditor.vue b/src/components/composer/simulate/ImageSearchEditor.vue
index ea870c5..26359a2 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/system/OsEditor.vue b/src/components/composer/system/OsEditor.vue
index 6ab7b54..aeb17b2 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/system/PathEditor.vue b/src/components/composer/system/PathEditor.vue
index 9dfed1f..881812c 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/system/SystemCommandEditor.vue b/src/components/composer/system/SystemCommandEditor.vue
index e480219..4aa93a3 100644
--- 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);
     }
   },
 });
diff --git a/src/components/composer/ubrowser/UBrowserEditor.vue b/src/components/composer/ubrowser/UBrowserEditor.vue
index 3776f43..416a2e0 100644
--- 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),
         });
       },
diff --git a/src/components/composer/ui/MultiParams.vue b/src/components/composer/ui/MultiParams.vue
index d5e7062..c8716bd 100644
--- 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);
     }
   },
 });
diff --git a/src/js/composer/customComponentGuide.js b/src/js/composer/customComponentGuide.js
index d40bc83..ebe2b26 100644
--- 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: "组件初始化时的处理",
diff --git a/src/js/composer/formatString.js b/src/js/composer/formatString.js
index 399c2d3..412f547 100644
--- 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) {