perf(views): 优化“添加接口”步骤 UI

src/views/register-gateway/AddInterface.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref, watch } from 'vue';
 import { message } from 'ant-design-vue';
 
+import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
 import {
@@ -33,7 +34,8 @@ const listPhysicalInterfaces = ref<ListPhysicalInterfaces[]>([]);
 const { handleRequest } = useRequest();
 
 interface InterfaceStyle {
-  backgroundImage: string;
+  background: string;
+  backgroundSize: string;
 }
 
 interface LeftStyle {
@@ -42,7 +44,8 @@ interface LeftStyle {
 
 // 定义一个响应式变量来存储样式对象
 const interfaceStyle = ref<InterfaceStyle>({
-  backgroundImage: `url(${deviceInterface})`,
+  background: `url(${deviceInterface})`,
+  backgroundSize: '410px 120px',
 });
 
 const leftStyle = ref<LeftStyle>({
@@ -57,6 +60,8 @@ const postGetList = () => {
 
     if (interfaceData.value.length) {
       currentStep.nextStepButtonDisabled = false;
+    } else {
+      currentStep.nextStepButtonDisabled = true;
     }
   });
 };
@@ -123,13 +128,13 @@ watch(
   (count) => {
     if (count) {
       if (count === 3) {
-        leftStyle.value.left = '126px';
+        leftStyle.value.left = '85px';
       } else if (count === 4) {
-        leftStyle.value.left = '229px';
+        leftStyle.value.left = '154px';
       } else if (count === 1) {
-        leftStyle.value.left = '276px';
+        leftStyle.value.left = '186px';
       } else if (count === 2) {
-        leftStyle.value.left = '324px';
+        leftStyle.value.left = '218px';
       }
       getListPhysicalInterfaces(count);
     }
@@ -141,7 +146,7 @@ onMounted(() => {
     interfaceList.value = await obtainListInterfaces(props.form.modelId);
     if (interfaceList.value.length) {
       props.form.interfaceId = interfaceList.value[0].id;
-      leftStyle.value.left = '126px';
+      leftStyle.value.left = '85px';
       getListPhysicalInterfaces(interfaceList.value[0].id);
     }
     postGetList();
@@ -151,100 +156,114 @@ onMounted(() => {
 
 <template>
   <div>
-    <div class="use-guide-title">{{ $t('registerGateway.addInterface') }}</div>
-    <div class="use-guide-description">文本描述！！！</div>
-
-    <AFormItem :label="$t('registerGateway.selectInterface')">
-      <ASelect
-        size="large"
-        ref="select"
-        v-model:value="form.interfaceId"
-        style="margin-left: 37px"
-        class="interface-select"
-        :options="interfaceList"
-        :field-names="{ label: 'name', value: 'id' }"
-      />
-    </AFormItem>
-
-    <AFormItem :label="$t('registerGateway.selectProtocolParameters')">
-      <ASelect
-        size="large"
-        ref="select"
-        v-model:value="form.protocolId"
-        class="interface-select"
-        :field-names="{ label: 'protocolName', value: 'id' }"
-        :options="listPhysicalInterfaces"
-      />
-    </AFormItem>
-
+    <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('registerGateway.selectProtocolParameters')" name="protocolId">
+          <ASelect
+            ref="select"
+            v-model:value="form.protocolId"
+            class="interface-select"
+            :field-names="{ label: 'protocolName', value: 'id' }"
+            :options="listPhysicalInterfaces"
+          />
+        </AFormItem>
+      </div>
+
+      <div :style="interfaceStyle" class="interface-img">
+        <div v-if="form.interfaceId" class="interface-bgc" :style="leftStyle"></div>
+      </div>
+    </AFlex>
     <AButton class="dev-but" type="primary" @click="addInterface">{{ $t('common.add') }}</AButton>
 
-    <div :style="interfaceStyle" class="interface-img">
-      <div v-if="form.interfaceId" class="interface-bgc" :style="leftStyle"></div>
-    </div>
     <div class="use-guide-title">{{ $t('registerGateway.interfaceList') }}</div>
-    <div class="interface-container main-container">
-      <AFlex v-for="item in interfaceData" :key="item.id" class="interface-div" justify="flex-start" align="center">
-        <ARow style="width: 100%">
-          <ACol :span="14">
-            <AFlex justify="flex-start" align="center">
-              <AFlex class="interface-div1" :style="interfaceShow(item.interfaceType)" justify="center" align="center">
-                <span class="interface-div1-span">{{ item.interfaceType }}</span>
-              </AFlex>
-              <div class="interface-div2">{{ item.linkName }}</div>
-            </AFlex>
-          </ACol>
-          <ACol :span="10">
-            <AFlex justify="space-between" align="center">
-              <div class="interface-div2" style="margin-top: 6px; margin-right: 17px">{{ item.protocolType }}</div>
-              <AButton class="interface-but" type="link" danger @click="addDelete(item.id)">{{
-                $t('common.delete')
-              }}</AButton>
+    <AFlex wrap="wrap">
+      <AFlex v-for="item in interfaceData" :key="item.id" class="interface-list" align="center">
+        <AFlex class="interface-div" justify="space-between" align="center">
+          <AFlex align="center">
+            <AFlex class="interface-div1" :style="interfaceShow(item.interfaceType)" justify="center" align="center">
+              <span class="interface-div1-span">{{ item.interfaceType }}</span>
             </AFlex>
-          </ACol>
-        </ARow>
+            <div class="interface-div2">{{ item.linkName }}</div>
+          </AFlex>
+
+          <AFlex align="center">
+            <div class="interface-agreement">{{ item.protocolType }}</div>
+          </AFlex>
+        </AFlex>
+
+        <div @click="addDelete(item.id)">
+          <AFlex class="interface-but" justify="center" align="center">
+            <SvgIcon class="interface-but-icon" name="delete" />
+          </AFlex>
+        </div>
       </AFlex>
-    </div>
+    </AFlex>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.interface-width {
+  width: 364px;
+}
+
+.interface-but-icon {
+  font-size: 14px;
+  color: #f56e6e;
+}
+
+.use-guide-title {
+  margin-top: 40px;
+  margin-bottom: 16px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  color: rgb(0 0 0 / 85%);
+  text-align: left;
+}
+
 .dev-but {
-  width: 108px;
+  width: 96px;
   height: 40px;
-  margin-left: 30px;
+  margin-top: 10px;
   border-radius: 3px;
 }
 
 .interface-select {
-  width: 240px;
-  margin-left: 10px;
+  width: 256px;
 }
 
 .interface-bgc {
   position: relative;
-  top: 66px;
-  width: 53px;
-  height: 53px;
+  top: 46px;
+  width: 36px;
+  height: 36px;
   background-color: rgb(82 196 26 / 35%);
   border-radius: 8px;
 }
 
 .interface-div {
-  width: 457px;
-  height: 67px;
-  margin-top: 14px;
-  background-color: rgb(240 240 240 / 100%);
+  width: 458px;
+  height: 72px;
+  background: #f5f7fa;
   border-radius: 8px;
 }
 
 .interface-img {
   position: 'static';
-  width: 608px;
-  height: 178px;
-  margin-top: 25px;
-  margin-bottom: 20px;
-  background-size: '100% 100%';
+  width: 410px;
+  height: 120px;
+  margin-left: 32px;
 }
 
 .interface-div1 {
@@ -272,13 +291,34 @@ onMounted(() => {
   text-align: left;
 }
 
+.interface-agreement {
+  margin-top: 6px;
+  margin-right: 24px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: #666;
+  text-align: right;
+}
+
 .interface-but {
-  margin-top: 8px;
-  margin-right: 10px;
+  width: 32px;
+  height: 32px;
+  margin-left: 16px;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
 }
 
 .interface-container {
   width: 565px;
   height: 410px;
 }
+
+.interface-list {
+  margin-right: 80px;
+  margin-bottom: 16px;
+}
 </style>