perf(views): 优化“验证设备”步骤 UI

src/views/register-gateway/RegisterGateway.vue

@@ -15,20 +15,29 @@ const steps = ref<UseGuideStepItem[]>([
     title: t('registerGateway.verificationEquipment'),
     component: shallowRef(VerifyDevice),
     nextStepButtonDisabled: true,
+    labelAlign: 'left',
+    labelCol: { span: 6 },
+    stepDescription: t('registerGateway.tip'),
   },
   {
     title: t('registerGateway.addInterface'),
     component: shallowRef(AddInterface),
     nextStepButtonDisabled: true,
+    stepDescription: '文本描述',
+    labelAlign: 'left',
+    labelCol: { span: 7 },
   },
   {
     title: t('registerGateway.bindingAgreement'),
     component: shallowRef(BindProtocol),
+    stepDescription: '文本描述',
   },
   {
     title: t('registerGateway.verificationAgreement'),
     component: shallowRef(VerifyProtocol),
-    contentOffset: 40,
+    stepDescription: '文本描述',
+    nextStepButtonText: t('common.finishSetup'),
+    isLastStep: true,
   },
 ]);
 
@@ -42,6 +51,15 @@ const registerGatewayForm = reactive<RegisterGatewayForm>({
   protocolId: undefined,
   linkName: '',
   protocolName: '',
+  state: 0,
+  docUrl: '',
+  iconUrl: '',
+  interfaceNum: '',
+  modelName: '',
+  surfMode: '',
+  surfModeEn: '',
+  show: false,
+  judgmentRegistration: false,
 });
 
 const rules = computed<FormRules<RegisterGatewayForm>>(() => {
@@ -60,6 +78,13 @@ const rules = computed<FormRules<RegisterGatewayForm>>(() => {
         trigger: 'change',
       },
     ],
+    interfaceId: [
+      {
+        required: true,
+        message: t('common.plzSelect', { name: t('registerGateway.interface') }),
+        trigger: 'change',
+      },
+    ],
   };
 });
 </script>

src/views/register-gateway/VerifyDevice.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue';
+import { computed } from 'vue';
 
+import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
 import { getGatewayModelInfo, orgGatewayRegister, validateGatewayInfo } from '@/api';
@@ -9,16 +10,10 @@ import deviceCard1 from '@/assets/img/device-card1.png';
 import deviceCard2 from '@/assets/img/device-card2.png';
 import deviceCard3 from '@/assets/img/device-card3.png';
 import deviceCard4 from '@/assets/img/device-card4.png';
-import deviceLabel from '@/assets/img/device-label.jpg';
+import deviceLabel from '@/assets/img/device-label.png';
 import deviceManual from '@/assets/img/device-manual.png';
 
-import type {
-  EquipmentInformation,
-  InterfaceNum,
-  RegisterGatewayForm,
-  UseGuideStepItemExpose,
-  UseGuideStepItemProps,
-} from '@/types';
+import type { InterfaceNum, RegisterGatewayForm, UseGuideStepItemExpose, UseGuideStepItemProps } from '@/types';
 
 const props = defineProps<UseGuideStepItemProps<RegisterGatewayForm>>();
 
@@ -26,22 +21,8 @@ const currentStep = props.steps[props.stepIndex];
 
 const { handleRequest } = useRequest();
 
-const show = ref(false);
-
-const equipmentInformation = reactive<EquipmentInformation>({
-  id: 0,
-  modelId: 0,
-  state: 0,
-  docUrl: '',
-  iconUrl: '',
-  interfaceNum: '',
-  modelName: '',
-  surfMode: '',
-  surfModeEn: '',
-});
-
 const interfaceNum = computed<InterfaceNum | undefined>(() => {
-  const { interfaceNum } = equipmentInformation;
+  const { interfaceNum } = props.form;
 
   return interfaceNum === '' ? undefined : JSON.parse(interfaceNum);
 });
@@ -56,21 +37,21 @@ const verificationGateway = () => {
     props.form.modelId = modelId;
     props.form.id = id;
 
-    Object.assign(equipmentInformation, {
+    Object.assign(props.form, {
       modelId,
       state,
       id,
     });
 
-    show.value = true;
+    props.form.show = true;
     currentStep.nextStepButtonDisabled = false;
 
-    if (equipmentInformation.modelId) {
+    if (props.form.modelId) {
       const { docUrl, iconUrl, interfaceNum, modelName, surfMode, surfModeEn } = await getGatewayModelInfo(
-        equipmentInformation.modelId,
+        props.form.modelId,
       );
 
-      Object.assign(equipmentInformation, {
+      Object.assign(props.form, {
         docUrl,
         iconUrl,
         interfaceNum,
@@ -83,22 +64,25 @@ const verificationGateway = () => {
 };
 
 const productManual = () => {
-  const fileUrl = 'http://192.168.1.136:9000' + equipmentInformation.docUrl; // 替换为你的文件URL
+  const fileUrl = 'http://192.168.1.136:9000' + props.form.docUrl; // 替换为你的文件URL
   window.open(fileUrl, '_blank');
 };
 
 const ternaryExpression = (value: boolean) => {
   if (value) {
-    return equipmentInformation.state === 1 ? t('common.online') : t('common.offline');
+    return props.form.state === 1 ? t('common.online') : t('common.offline');
   } else {
-    return equipmentInformation.state === 1 ? 'background-color: #52C41A;' : 'background-color: #666666;';
+    return props.form.state === 1 ? 'background-color: #52C41A;' : 'background-color: #666666;';
   }
 };
 
 const finish = () => {
-  handleRequest(async () => {
-    await orgGatewayRegister(equipmentInformation.id);
-  });
+  if (!props.form.judgmentRegistration) {
+    handleRequest(async () => {
+      await orgGatewayRegister(props.form.id);
+      props.form.judgmentRegistration = true;
+    });
+  }
 };
 
 defineExpose<UseGuideStepItemExpose>({
@@ -108,20 +92,19 @@ defineExpose<UseGuideStepItemExpose>({
 
 <template>
   <div>
-    <div class="use-guide-title">{{ $t('registerGateway.verificationEquipment') }}</div>
-    <div class="use-guide-description">{{ $t('registerGateway.tip') }}</div>
-
     <ARow>
-      <ACol :span="6">
+      <ACol :span="5">
         <AFormItem :label="$t('registerGateway.snCode')" name="snCode">
-          <AInput class="dev-input" :placeholder="$t('common.pleaseEnter')" v-model:value="form.snCode" />
+          <AInput :placeholder="$t('common.pleaseEnter')" v-model:value="form.snCode" />
         </AFormItem>
         <AFormItem :label="$t('registerGateway.devicePassword')" name="password">
-          <AInputPassword class="dev-input1" v-model:value="form.password" :placeholder="$t('common.pleaseEnter')" />
+          <AInput v-model:value="form.password" :placeholder="$t('common.pleaseEnter')" />
         </AFormItem>
         <AFormItem>
-          <AButton class="dev-but" type="primary" @click="verificationGateway">
-            {{ show ? '验证成功' : $t('common.verification') }}
+          <AButton class="dev-but icon-button" type="primary" @click="verificationGateway">
+            <SvgIcon v-if="form.show" name="check-circle-o" />
+            <SvgIcon v-else name="shield-o" />
+            {{ form.show ? $t('registerGateway.verificationSuccessful') : $t('common.verification') }}
           </AButton>
         </AFormItem>
       </ACol>
@@ -132,7 +115,7 @@ defineExpose<UseGuideStepItemExpose>({
       </ACol>
     </ARow>
 
-    <div v-if="show" class="dev-card">
+    <div v-if="form.show" class="dev-card">
       <div class="dev-title">
         <AFlex :vertical="false">
           <div class="dev-title-signal" :style="ternaryExpression(false)"></div>
@@ -142,12 +125,10 @@ defineExpose<UseGuideStepItemExpose>({
       <ARow style="padding: 0 30px 20px">
         <ACol :span="10">
           <AFlex justify="center" style="width: 100%" :vertical="true" align="center">
-            <img class="dev-card-left-img" :src="'http://192.168.1.136:9000' + equipmentInformation.iconUrl" alt="" />
-            <div class="dev-card-left-text1">{{ equipmentInformation.modelName }}</div>
+            <img class="dev-card-left-img" :src="'http://192.168.1.136:9000' + props.form.iconUrl" alt="" />
+            <div class="dev-card-left-text1">{{ props.form.modelName }}</div>
             <div class="dev-card-left-text2">
-              {{ equipmentInformation.surfMode[0] }}｜{{ equipmentInformation.surfMode[1] }}｜{{
-                equipmentInformation.surfMode[2]
-              }}
+              {{ props.form.surfMode[0] }}｜{{ props.form.surfMode[1] }}｜{{ props.form.surfMode[2] }}
             </div>
           </AFlex>
         </ACol>
@@ -201,28 +182,30 @@ defineExpose<UseGuideStepItemExpose>({
 </template>
 
 <style lang="scss" scoped>
+.ant-form-item {
+  margin-bottom: 24px;
+}
+
 .dev-but {
   width: 130px;
   height: 40px;
-  margin-top: 10px;
+  margin-top: 16px;
 }
 
 .dev-input {
-  width: 224px;
-  height: 40px;
+  width: 256px;
   margin-left: 29px;
 }
 
 .dev-input1 {
-  width: 224px;
-  height: 40px;
+  width: 256px;
   margin-left: 5px;
 }
 
 .register-img {
-  width: 154px;
-  height: 95px;
-  margin-left: 20px;
+  width: 194px;
+  height: 120px;
+  margin-left: 24px;
 }
 
 .dev-card {
@@ -233,10 +216,6 @@ defineExpose<UseGuideStepItemExpose>({
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 15%);
 }
 
-.ant-form-item {
-  margin-bottom: 15px;
-}
-
 .dev-title {
   margin-left: 10px;
 }
@@ -299,7 +278,7 @@ defineExpose<UseGuideStepItemExpose>({
 
 .dev-card-right-but {
   width: 97px;
-  height: 24px;
+  height: 32px;
   padding: 0;
   margin-top: 10px;
   margin-left: 15%;