perf(views): 优化 “添加接口”步骤表单校验

src/views/register-gateway/AddInterface.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { inject, onMounted, ref, useTemplateRef, watch } from 'vue';
-import { message } from 'ant-design-vue';
 
 import ConfirmModal from '@/components/ConfirmModal.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
@@ -17,6 +16,8 @@ import { IS_USED_IN_MODAL_GUIDANCE } from '@/constants/inject-key';
 
 import deviceInterface from '@/assets/img/device-interface.png';
 
+import type { FormInstance } from 'ant-design-vue';
+import type { Rule } from 'ant-design-vue/es/form';
 import type {
   InterfaceData,
   ListInterfaces,
@@ -26,7 +27,7 @@ import type {
 } from '@/types';
 
 const isUsedInModalGuidance = inject(IS_USED_IN_MODAL_GUIDANCE, false);
-
+const formRef = ref<FormInstance>();
 const props = defineProps<UseGuideStepItemProps<RegisterGatewayForm>>();
 const modalComponentRef = useTemplateRef('modalComponent');
 const currentStep = props.steps[props.stepIndex];
@@ -39,6 +40,22 @@ const listPhysicalInterfaces = ref<ListPhysicalInterfaces[]>([]);
 
 const { handleRequest } = useRequest();
 
+const rules: Record<string, Rule[]> = {
+  interfaceId: [
+    {
+      required: true,
+      message: t('registerGateway.pleaseSelectInterface'),
+      trigger: 'change',
+    },
+  ],
+  protocolId: [
+    {
+      required: true,
+      message: t('setupProtocol.plzSelectProtocolType'),
+      trigger: 'change',
+    },
+  ],
+};
 interface InterfaceStyle {
   background: string;
   backgroundSize: string;
@@ -79,34 +96,28 @@ const interfaceShow = (value: string) => {
 
 // 添加接口列表
 const addInterface = () => {
-  if (!props.form.interfaceId) {
-    return message.warning(t('registerGateway.pleaseSelectInterface'));
-  }
-
-  if (!props.form.protocolId) {
-    return message.warning(t('setupProtocol.plzSelectProtocolType'));
-  }
-
-  interfaceList.value.forEach((item) => {
-    if (item.id === props.form.interfaceId) {
-      linkName.value = item.name;
-    }
-  });
+  formRef.value?.validate().then(() => {
+    interfaceList.value.forEach((item) => {
+      if (item.id === props.form.interfaceId) {
+        linkName.value = item.name;
+      }
+    });
 
-  listPhysicalInterfaces.value.forEach((item) => {
-    if (item.id === props.form.protocolId) {
-      protocolName.value = item.protocolName;
-    }
-  });
+    listPhysicalInterfaces.value.forEach((item) => {
+      if (item.id === props.form.protocolId) {
+        protocolName.value = item.protocolName;
+      }
+    });
 
-  handleRequest(async () => {
-    await gatewayLinkAdd({
-      interfaceId: props.form.interfaceId,
-      linkName: linkName.value,
-      gatewayId: props.form.id,
-      protocolType: protocolName.value,
+    handleRequest(async () => {
+      await gatewayLinkAdd({
+        interfaceId: props.form.interfaceId,
+        linkName: linkName.value,
+        gatewayId: props.form.id,
+        protocolType: protocolName.value,
+      });
+      postGetList();
     });
-    postGetList();
   });
 };
 
@@ -172,25 +183,27 @@ onMounted(() => {
   <div>
     <AFlex>
       <div class="interface-width">
-        <AFormItem :label="$t('registerGateway.selectInterface')" name="interfaceId">
-          <ASelect
-            ref="select"
-            v-model:value="form.interfaceId"
-            class="interface-select"
-            :options="interfaceList"
-            :field-names="{ label: 'name', value: 'id' }"
-          />
-        </AFormItem>
-
-        <AFormItem :label="$t('setupProtocol.selectProtocolType')" name="protocolId">
-          <ASelect
-            ref="select"
-            v-model:value="form.protocolId"
-            class="interface-select"
-            :field-names="{ label: 'protocolName', value: 'id' }"
-            :options="listPhysicalInterfaces"
-          />
-        </AFormItem>
+        <AForm ref="formRef" :model="form" label-align="left" :rules="rules" :label-col="{ span: 8 }">
+          <AFormItem :label="$t('registerGateway.selectInterface')" name="interfaceId">
+            <ASelect
+              ref="select"
+              v-model:value="form.interfaceId"
+              class="interface-select"
+              :options="interfaceList"
+              :field-names="{ label: 'name', value: 'id' }"
+            />
+          </AFormItem>
+
+          <AFormItem :label="$t('setupProtocol.selectProtocolType')" name="protocolId">
+            <ASelect
+              ref="select"
+              v-model:value="form.protocolId"
+              class="interface-select"
+              :field-names="{ label: 'protocolName', value: 'id' }"
+              :options="listPhysicalInterfaces"
+            />
+          </AFormItem>
+        </AForm>
       </div>
 
       <div :style="interfaceStyle" class="interface-img">

src/views/register-gateway/RegisterGateway.vue

@@ -23,8 +23,6 @@ const steps = ref<UseGuideStepItem[]>([
     component: shallowRef(AddInterface),
     nextStepButtonDisabled: true,
     stepDescription: '文本描述',
-    labelAlign: 'left',
-    labelCol: { span: 7 },
   },
   {
     title: t('registerGateway.bindingAgreement'),