perf(views): 优化“上传文件”步骤 UI

src/views/setup-protocol/UploadProtocolFile.vue

@@ -2,6 +2,7 @@
 import { onMounted } from 'vue';
 import { message } from 'ant-design-vue';
 
+import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
 import { downloadProtocolTemplate, getDictTypeData } from '@/api';
@@ -52,8 +53,8 @@ const downloadTemplate = () => {
 <template>
   <div>
     <div class="upload-step-text">1. {{ $t('setupProtocol.clickToDownloadTemplate') }}</div>
-    <AButton class="upload-template-button" type="primary" @click="downloadTemplate">
-      <img src="@/assets/img/file-white.png" />
+    <AButton class="icon-button upload-template-button" type="primary" @click="downloadTemplate">
+      <SvgIcon name="download" />
       {{ $t('setupProtocol.downloadTemplate') }}
     </AButton>
     <div class="upload-step-text">2. {{ $t('setupProtocol.clickToUpload') }}</div>
@@ -64,11 +65,9 @@ const downloadTemplate = () => {
         :multiple="false"
         :before-upload="() => false"
       >
-        <p class="ant-upload-drag-icon">
-          <un-i-mdi-folder-open class="upload-folder-icon" />
-        </p>
-        <p class="ant-upload-text">{{ $t('setupProtocol.uploadFileTip') }}</p>
-        <p class="ant-upload-hint">{{ $t('setupProtocol.uploadFileFormat') }}</p>
+        <SvgIcon class="upload-folder-icon" name="cloud-upload" />
+        <div class="ant-upload-text">{{ $t('setupProtocol.uploadFileTip') }}</div>
+        <div class="ant-upload-hint">{{ $t('setupProtocol.uploadFileFormat') }}</div>
       </AUploadDragger>
     </AFormItem>
   </div>
@@ -76,28 +75,48 @@ const downloadTemplate = () => {
 
 <style lang="scss" scoped>
 .upload-step-text {
-  margin-bottom: 8px;
+  margin-bottom: 16px;
   font-size: 14px;
   line-height: 22px;
-  color: var(--antd-color-text-secondary);
+  color: #333;
 }
 
 .upload-template-button {
-  display: flex;
-  align-items: center;
-  margin-bottom: 52px;
-
-  img {
-    margin-right: 10px;
-  }
+  height: 40px;
+  margin-bottom: 40px;
 }
 
 .upload-drag-area {
-  width: 617px;
+  width: 100%;
+  max-width: 468px;
+
+  :deep(.ant-upload-drag) {
+    height: 176px;
+    background-color: #f5f7fa;
+    border-color: #dcdfe6;
+
+    .ant-upload {
+      padding: 40px 0;
+    }
+
+    .ant-upload-text {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 24px;
+      color: #333;
+    }
+
+    .ant-upload-hint {
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 24px;
+      color: #666;
+    }
+  }
 }
 
 .upload-folder-icon {
   font-size: 40px;
-  color: #269cf8;
+  color: var(--antd-color-primary);
 }
 </style>