编排卡片收缩时显示摘要

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>

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);
     }
   },
 });

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);
     }
   },
 });

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);
     }
   },
 });

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);
     }
   },
 });

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);
     }
   },
 });

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);
     }
   },
 });

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);
     }
   },
 });

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);
     }
   },
 });

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);
     }
   },
 });

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);
     }
   },
 });

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);
     }
   },
 });

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);
     }
   },
 });

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);
     }
   },
 });

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);
     }
   },
 });

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);
     }
   },
 });

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);
     }
   },
 });

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),
         });
       },

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);
     }
   },
 });