新增operationcard组件

src/components/composer/network/DnsEditor.vue

@@ -1,22 +1,11 @@
 <template>
   <div class="dns-editor">
     <!-- 操作类型选择 -->
-    <div class="operation-cards">
-      <div
-        v-for="op in operations"
-        :key="op.name"
-        :class="['operation-card', { active: argvs.operation === op.name }]"
-        @click="updateArgvs('operation', op.name)"
-        :data-value="op.name"
-      >
-        <q-icon
-          :name="op.icon"
-          size="16px"
-          :color="argvs.operation === op.name ? 'primary' : 'grey'"
-        />
-        <div class="text-caption">{{ op.label }}</div>
-      </div>
-    </div>
+    <OperationCard
+      :model-value="argvs.operation"
+      @update:model-value="(val) => updateArgvs('operation', val)"
+      :options="operations"
+    />
 
     <!-- 操作配置 -->
     <div class="operation-options">
@@ -75,11 +64,12 @@
 import { defineComponent } from "vue";
 import { stringifyArgv, parseFunction } from "js/composer/formatString";
 import VariableInput from "components/composer/common/VariableInput.vue";
-
+import OperationCard from "components/composer/common/OperationCard.vue";
 export default defineComponent({
   name: "DnsEditor",
   components: {
     VariableInput,
+    OperationCard,
   },
   props: {
     modelValue: {
@@ -91,19 +81,19 @@ export default defineComponent({
   data() {
     return {
       operations: [
-        { name: "lookupHost", label: "DNS查询", icon: "search" },
-        { name: "resolveAll", label: "解析所有记录", icon: "all_inclusive" },
-        { name: "resolveIpv4", label: "解析IPv4", icon: "filter_4" },
-        { name: "resolveIpv6", label: "解析IPv6", icon: "filter_6" },
-        { name: "resolveMxRecords", label: "解析MX记录", icon: "mail" },
+        { value: "lookupHost", label: "DNS查询", icon: "search" },
+        { value: "resolveAll", label: "解析所有记录", icon: "all_inclusive" },
+        { value: "resolveIpv4", label: "解析IPv4", icon: "filter_4" },
+        { value: "resolveIpv6", label: "解析IPv6", icon: "filter_6" },
+        { value: "resolveMxRecords", label: "解析MX记录", icon: "mail" },
         {
-          name: "resolveTxtRecords",
+          value: "resolveTxtRecords",
           label: "解析TXT记录",
           icon: "text_fields",
         },
-        { name: "resolveNsRecords", label: "解析NS记录", icon: "dns" },
-        { name: "resolveCnameRecords", label: "解析CNAME记录", icon: "link" },
-        { name: "reverseResolve", label: "反向解析", icon: "swap_horiz" },
+        { value: "resolveNsRecords", label: "解析NS记录", icon: "dns" },
+        { value: "resolveCnameRecords", label: "解析CNAME记录", icon: "link" },
+        { value: "reverseResolve", label: "反向解析", icon: "swap_horiz" },
       ],
       families: [
         { label: "自动", value: 0 },
@@ -214,7 +204,7 @@ export default defineComponent({
     },
     getSummary(argvs) {
       const op = this.operations.find(
-        (op) => op.name === argvs.operation
+        (op) => op.value === argvs.operation
       )?.label;
       return op === "反向解析"
         ? "反向解析 " + argvs.ip.value
@@ -234,22 +224,6 @@ export default defineComponent({
       this.updateModelValue(this.defaultArgvs);
     }
   },
-  watch: {
-    "argvs.operation": {
-      immediate: true,
-      handler(newVal) {
-        this.$nextTick(() => {
-          document
-            .querySelector(`.operation-card[data-value="${newVal}"]`)
-            ?.scrollIntoView({
-              behavior: "smooth",
-              block: "nearest",
-              inline: "nearest",
-            });
-        });
-      },
-    },
-  },
 });
 </script>
 
@@ -264,8 +238,4 @@ export default defineComponent({
   gap: 8px;
   padding-top: 8px;
 }
-
-.command-composer .operation-card {
-  min-width: 95px;
-}
 </style>

src/components/composer/network/UrlEditor.vue

@@ -1,22 +1,11 @@
 <template>
   <div class="url-editor">
     <!-- 操作类型选择 -->
-    <div class="operation-cards">
-      <div
-        v-for="op in operations"
-        :key="op.name"
-        :class="['operation-card', { active: argvs.operation === op.name }]"
-        @click="updateArgvs('operation', op.name)"
-        :data-value="op.name"
-      >
-        <q-icon
-          :name="op.icon"
-          size="16px"
-          :color="argvs.operation === op.name ? 'primary' : 'grey'"
-        />
-        <div class="text-caption">{{ op.label }}</div>
-      </div>
-    </div>
+    <OperationCard
+      :model-value="argvs.operation"
+      @update:model-value="(val) => updateArgvs('operation', val)"
+      :options="operations"
+    />
 
     <!-- 操作配置 -->
     <div class="operation-options q-mt-sm">
@@ -172,12 +161,14 @@ import { defineComponent } from "vue";
 import { stringifyArgv, parseFunction } from "js/composer/formatString";
 import VariableInput from "components/composer/common/VariableInput.vue";
 import DictEditor from "components/composer/common/DictEditor.vue";
+import OperationCard from "components/composer/common/OperationCard.vue";
 
 export default defineComponent({
   name: "UrlEditor",
   components: {
     VariableInput,
     DictEditor,
+    OperationCard,
   },
   props: {
     modelValue: {
@@ -189,17 +180,17 @@ export default defineComponent({
   data() {
     return {
       operations: [
-        { name: "parse", label: "解析URL", icon: "link_off" },
-        { name: "format", label: "格式化URL", icon: "link" },
-        { name: "parseQuery", label: "解析查询字符串", icon: "search" },
-        { name: "formatQuery", label: "格式化查询字符串", icon: "edit" },
-        { name: "parsePath", label: "解析路径", icon: "folder_open" },
-        { name: "parseHost", label: "解析主机名", icon: "dns" },
-        { name: "getQueryParam", label: "获取参数", icon: "find_in_page" },
-        { name: "addQueryParam", label: "添加参数", icon: "add_circle" },
-        { name: "removeQueryParam", label: "移除参数", icon: "remove_circle" },
-        { name: "isAbsolute", label: "检查绝对URL", icon: "check_circle" },
-        { name: "parseComponents", label: "解析组成部分", icon: "category" },
+        { value: "parse", label: "解析URL", icon: "link_off" },
+        { value: "format", label: "格式化URL", icon: "link" },
+        { value: "parseQuery", label: "解析查询字符串", icon: "search" },
+        { value: "formatQuery", label: "格式化查询字符串", icon: "edit" },
+        { value: "parsePath", label: "解析路径", icon: "folder_open" },
+        { value: "parseHost", label: "解析主机名", icon: "dns" },
+        { value: "getQueryParam", label: "获取参数", icon: "find_in_page" },
+        { value: "addQueryParam", label: "添加参数", icon: "add_circle" },
+        { value: "removeQueryParam", label: "移除参数", icon: "remove_circle" },
+        { value: "isAbsolute", label: "检查绝对URL", icon: "check_circle" },
+        { value: "parseComponents", label: "解析组成部分", icon: "category" },
       ],
       defaultArgvs: {
         operation: "parse",
@@ -428,7 +419,7 @@ export default defineComponent({
     },
     getSummary(argvs) {
       const op = this.operations.find(
-        (op) => op.name === argvs.operation
+        (op) => op.value === argvs.operation
       )?.label;
       return op + " " + argvs.url.value;
     },
@@ -446,22 +437,6 @@ export default defineComponent({
       this.updateModelValue(this.defaultArgvs);
     }
   },
-  watch: {
-    "argvs.operation": {
-      immediate: true,
-      handler(newVal) {
-        this.$nextTick(() => {
-          document
-            .querySelector(`.operation-card[data-value="${newVal}"]`)
-            ?.scrollIntoView({
-              behavior: "smooth",
-              block: "nearest",
-              inline: "nearest",
-            });
-        });
-      },
-    },
-  },
 });
 </script>
 
@@ -477,9 +452,4 @@ export default defineComponent({
   flex-direction: column;
   justify-content: center;
 }
-
-/* 覆盖command-composer的样式 */
-.command-composer .operation-card {
-  min-width: 100px;
-}
 </style>