数据处理分类新增数组处理、时间处理、字符串处理

src/components/composer/CommandComposer.vue

@@ -96,7 +96,18 @@ export default defineComponent({
     },
     saveFlow() {
       const flow = window.lodashM.cloneDeep(this.commandFlow);
-      const uselessProps = ["config", "argvs", "label", "component", "subCommands", "options", "defaultValue"];
+      const uselessProps = [
+        "config",
+        "argvs",
+        "label",
+        "component",
+        "subCommands",
+        "options",
+        "defaultValue",
+        "icon",
+        "width",
+        "placeholder",
+      ];
       // 移除不必要属性
       flow.forEach((cmd) => {
         for (const props of uselessProps) {

src/components/composer/common/ArrayEditor.vue

@@ -6,15 +6,16 @@
     :model-value="isCollapse"
   >
     <div class="array-editor">
-      <div v-for="(row, index) in rows" :key="index" class="row items-center">
-        <template v-if="columns">
+      <div
+        v-for="(row, index) in rows"
+        :key="index"
+        class="row items-center q-gutter-sm"
+      >
+        <template v-if="!!columns">
           <div
             v-for="column in processedColumns"
             :key="column.key"
-            :class="[
-              column.width ? `col-${column.width}` : 'col',
-              Object.keys(columns).length > 1 ? 'q-pr-sm' : '',
-            ]"
+            :class="[column.width ? `col-${column.width}` : 'col']"
           >
             <VariableInput
               :model-value="row[column.key]"

src/components/composer/common/CheckButton.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="check-btn-group">
+    <q-btn
+      :color="modelValue ? 'primary' : 'grey-7'"
+      :flat="!modelValue"
+      :outline="modelValue"
+      dense
+      :class="['check-btn', { 'check-btn--selected': modelValue }]"
+      @click="toggleValue"
+    >
+      <template #default>
+        <div class="row items-center full-width">
+          <div class="check-btn-content">
+            <div class="check-btn-label">{{ label }}</div>
+          </div>
+          <q-icon
+            :name="modelValue ? 'check_circle' : 'radio_button_unchecked'"
+            size="14px"
+            class="q-ml-xs check-btn-icon"
+          />
+        </div>
+        <q-tooltip v-if="tooltip">{{ tooltip }}</q-tooltip>
+      </template>
+    </q-btn>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "CheckButton",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    tooltip: {
+      type: String,
+      default: "",
+    },
+    isCollapse: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  methods: {
+    toggleValue() {
+      this.$emit("update:model-value", !this.modelValue);
+    },
+  },
+});
+</script>
+
+<style scoped>
+.check-btn-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: 100%;
+}
+
+.check-btn {
+  min-width: 100%;
+  max-width: 100% !important;
+  height: auto !important;
+  min-height: 36px;
+  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 4px !important;
+  transition: all 0.3s;
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.check-btn :deep(.q-btn__content) {
+  min-width: 0;
+  height: auto;
+  white-space: normal;
+}
+
+.check-btn-content {
+  flex: 1;
+  min-width: 0;
+  margin-right: 4px;
+}
+
+.check-btn-label {
+  text-align: center;
+  line-height: 1.2;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.check-btn-icon {
+  flex: none;
+  opacity: 0.8;
+  transition: all 0.3s;
+  margin-top: 2px;
+}
+
+.check-btn--selected .check-btn-icon {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.check-btn:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+  border-color: var(--q-primary);
+}
+
+.body--dark .check-btn {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.check-btn--selected {
+  background-color: transparent !important;
+  border-color: var(--q-primary) !important;
+}
+
+.check-btn.q-btn--flat {
+  color: var(--q-primary);
+  opacity: 0.8;
+}
+
+.body--dark .check-btn.q-btn--flat {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.check-btn.q-btn--outline {
+  opacity: 1;
+  background-color: transparent;
+}
+</style>

src/components/composer/common/OperationCard.vue

@@ -4,6 +4,7 @@
       <div class="cards-wrapper">
         <div
           v-for="option in options"
+          ref="operationCard"
           :key="option.value"
           :class="['operation-card', { active: modelValue === option.value }]"
           :data-value="option.value"
@@ -71,14 +72,19 @@ export default {
     },
   },
   watch: {
-    modelValue(newVal) {
-      document
-        .querySelector(`.operation-card[data-value="${newVal}"]`)
-        ?.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest",
-          inline: "nearest",
+    modelValue: {
+      immediate: true,
+      handler(newVal) {
+        this.$nextTick(() => {
+          this.$refs.operationCard
+            ?.find((card) => card.dataset.value === newVal)
+            ?.scrollIntoView({
+              behavior: "smooth",
+              block: "nearest",
+              inline: "nearest",
+            });
         });
+      },
     },
   },
 };

src/components/composer/common/OptionEditor.vue

@@ -41,7 +41,7 @@ import DictEditor from "./DictEditor.vue";
 import ButtonGroup from "./ButtonGroup.vue";
 import ControlInput from "./ControlInput.vue";
 import CheckGroup from "./CheckGroup.vue";
-
+import CheckButton from "./CheckButton.vue";
 export default defineComponent({
   name: "OptionEditor",
   components: {
@@ -53,6 +53,7 @@ export default defineComponent({
     ButtonGroup,
     ControlInput,
     CheckGroup,
+    CheckButton,
   },
   emits: ["update:modelValue"],
   props: {

src/components/composer/common/ParamInput.vue

@@ -34,6 +34,7 @@ import ButtonGroup from "./ButtonGroup.vue";
 import ControlInput from "./ControlInput.vue";
 import CheckGroup from "./CheckGroup.vue";
 import OptionEditor from "./OptionEditor.vue";
+import CheckButton from "./CheckButton.vue";
 
 /**
  * 参数输入组件
@@ -57,6 +58,7 @@ export default defineComponent({
     ControlInput,
     CheckGroup,
     OptionEditor,
+    CheckButton,
   },
   props: {
     configs: {

src/components/composer/ui/SelectListEditor.vue

@@ -223,13 +223,12 @@ export default defineComponent({
         },
         title: {
           label: "标题",
-          width: 4,
           noIcon: true,
         },
         description: {
           label: "描述",
-          width: 4,
           noIcon: true,
+          width: 4,
         },
       },
     };

src/js/composer/commands/networkCommands.js

@@ -259,7 +259,7 @@ export const networkCommands = {
             },
             {
               label: "返回所有地址",
-              component: "q-checkbox",
+              component: "CheckButton",
               defaultValue: false,
               width: 2.5,
             },

src/js/composer/commands/systemCommands.js

@@ -270,7 +270,7 @@ export const systemCommands = {
             },
             {
               label: "包含内部接口",
-              component: "q-checkbox",
+              component: "CheckButton",
               defaultValue: false,
               width: 12,
               condition: "values[0] === 'networkInterfaces'",

src/js/composer/commands/uiCommands.js

@@ -115,6 +115,7 @@ export const uiCommands = {
       isAsync: true,
       outputVariable: "{id,text}",
       saveOutput: true,
+      width: 12,
       config: [
         {
           label: "按钮",
@@ -133,6 +134,7 @@ export const uiCommands = {
       isAsync: true,
       outputVariable: "[inputValue1]",
       saveOutput: true,
+      width: 12,
       config: [
         {
           label: "输入框",

src/js/composer/commands/userdataCommands.js

@@ -40,7 +40,7 @@ export const userdataCommands = {
         },
         {
           label: "不同步",
-          component: "q-checkbox",
+          component: "CheckButton",
           defaultValue: true,
           width: 2,
         },

src/js/composer/commands/utoolsCommand.js

@@ -113,32 +113,32 @@ export const utoolsCommands = {
                 forward: {
                   label: "向前查找",
                   icon: "arrow_right",
-                  width: 2,
-                  component: "q-checkbox",
+                  width: 2.4,
+                  component: "CheckButton",
                 },
                 findNext: {
                   label: "查找下一个",
                   icon: "arrow_down",
-                  width: 2,
-                  component: "q-checkbox",
+                  width: 2.4,
+                  component: "CheckButton",
                 },
                 matchCase: {
                   label: "区分大小写",
                   icon: "arrow_up",
-                  width: 2,
-                  component: "q-checkbox",
+                  width: 2.4,
+                  component: "CheckButton",
                 },
                 wordStart: {
                   label: "单词开头",
                   icon: "arrow_right",
-                  width: 2,
-                  component: "q-checkbox",
+                  width: 2.4,
+                  component: "CheckButton",
                 },
                 medialCapitalAsWordStart: {
-                  label: "中缀大写作为单词开头",
+                  label: "中缀大写开头",
                   icon: "arrow_right",
-                  width: 4,
-                  component: "q-checkbox",
+                  width: 2.4,
+                  component: "CheckButton",
                 },
               },
               defaultValue: {

src/js/composer/composerConfig.js

@@ -16,7 +16,11 @@ export const availableCommands = categories.reduce((commands, category) => {
 }, []);
 
 export const findCommandByValue = (value) => {
-  return availableCommands.find((cmd) => cmd.value === value);
+  return availableCommands.find(
+    (cmd) =>
+      cmd.value === value ||
+      cmd.subCommands?.find((subCmd) => subCmd.value === value)
+  );
 };
 
 export const commandCategories = categories;