perf(components): 优化“协议内容”表单组件样式

src/views/setup-protocol/ProtocolContent.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, ref, useTemplateRef } from 'vue';
 import { message, Modal } from 'ant-design-vue';
 import { debounce } from 'lodash-es';
 
+import SvgIcon from '@/components/SvgIcon.vue';
 import { useDictData } from '@/hooks/dict-data';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
@@ -261,7 +262,7 @@ defineExpose({
 
 <template>
   <div>
-    <AForm class="protocol-container" ref="formRef" :model="info" :rules="rules" layout="vertical">
+    <AForm ref="formRef" :model="info" :rules="rules" layout="vertical">
       <div class="protocol-label">{{ $t('common.basicInfo') }}</div>
       <ARow>
         <ACol :span="6">
@@ -450,16 +451,23 @@ defineExpose({
     </AForm>
     <div class="protocol-label params-label">
       {{ $t('setupProtocol.protocolParams') }}
-      <span class="protocol-params-tip">{{ $t('setupProtocol.protocolTypeTipForPlc') }}</span>
+      <span class="protocol-params-tip">
+        <SvgIcon name="info-cirlce-o" />
+        {{ $t('setupProtocol.protocolTypeTipForPlc') }}
+      </span>
     </div>
-    <div class="protocol-container protocol-params-query">
+    <div class="protocol-params-query">
       <AInput
         v-model:value="paramNameOrCode"
         class="protocol-input"
         :placeholder="$t('setupProtocol.plzEnterParamOrCode')"
         allow-clear
         @change="handleParamNameOrCodeChange"
-      />
+      >
+        <template #prefix>
+          <SvgIcon name="search-o" :size="12" color="#B2B2B2" />
+        </template>
+      </AInput>
       <div>
         <AButton danger :disabled="selectedParamIds.length === 0" @click="deleteSelectedParams">
           {{ $t('setupProtocol.deleteSelected') }}
@@ -555,43 +563,52 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
-.protocol-container {
-  width: 62%;
-}
-
 .protocol-label {
+  padding-left: 8px;
   margin-bottom: 24px;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 22px;
-  color: var(--antd-color-text);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  color: #000;
+  border-left: 2px solid var(--antd-color-primary);
 
-  &.advanced-label {
-    margin-top: 46px;
+  &.advanced-label,
+  &.params-label {
+    margin-top: 16px;
   }
 
   &.params-label {
-    margin-top: 56px;
+    display: flex;
+    align-items: center;
   }
 }
 
 .protocol-input {
-  width: 224px;
+  width: 256px;
 }
 
 .protocol-params-tip {
-  font-size: 11px;
-  font-weight: normal;
-  color: var(--antd-color-text-tertiary);
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 22px;
+  color: #b2b2b2;
+
+  i {
+    margin-right: 5px;
+    margin-left: 16px;
+  }
 }
 
 .protocol-params-query {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 
   button + button {
-    margin-left: 23px;
+    margin-left: 16px;
   }
 }
 </style>