From 0f4a2130412ab5b385a306dd914ac027bde0cc9e Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Mon, 22 Dec 2025 10:47:38 +0800
Subject: [PATCH] fix(Data Source): The import and export buttons are too close
 together; it is recommended to add a gap between them.

---
 frontend/src/views/ds/DataTable.vue           | 55 ++++++++++---------
 .../system/excel-upload/UploaderRemark.vue    |  3 -
 2 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/frontend/src/views/ds/DataTable.vue b/frontend/src/views/ds/DataTable.vue
index 89aed990..b2e4a3b7 100644
--- a/frontend/src/views/ds/DataTable.vue
+++ b/frontend/src/views/ds/DataTable.vue
@@ -354,16 +354,18 @@ const btnSelectClick = (val: any) => {
         <icon_right_outlined></icon_right_outlined>
       </el-icon>
       <div class="name">{{ info.name }}</div>
-      <el-button @click="downloadTemplate" class="export-remark" secondary>
-        <template #icon>
-          <icon_import_outlined></icon_import_outlined>
-        </template>
-        {{ $t('professional.export') }}
-      </el-button>
-      <UploaderRemark
-        :upload-path="`/datasource/uploadDsSchema/${info.id}`"
-        @upload-finished="init"
-      ></UploaderRemark>
+      <div class="export-remark">
+        <el-button style="margin-right: 12px" @click="downloadTemplate" secondary>
+          <template #icon>
+            <icon_import_outlined></icon_import_outlined>
+          </template>
+          {{ $t('professional.export') }}
+        </el-button>
+        <UploaderRemark
+          :upload-path="`/datasource/uploadDsSchema/${info.id}`"
+          @upload-finished="init"
+        ></UploaderRemark>
+      </div>
     </div>
     <div class="content">
       <div class="side-list">
@@ -579,16 +581,18 @@ const btnSelectClick = (val: any) => {
               <div class="preview-num">
                 {{ t('ds.pieces_in_total', { msg: total, ms: showNum }) }}
               </div>
-              <el-table :data="previewData.data" style="width: 100%">
-                <el-table-column
-                  v-for="(c, index) in previewData.fields"
-                  :key="index"
-                  :prop="c"
-                  :label="c"
-                  min-width="150"
-                  :render-header="renderHeader"
-                />
-              </el-table>
+              <div class="table-container">
+                <el-table :data="previewData.data" style="width: 100%; height: 100%">
+                  <el-table-column
+                    v-for="(c, index) in previewData.fields"
+                    :key="index"
+                    :prop="c"
+                    :label="c"
+                    min-width="150"
+                    :render-header="renderHeader"
+                  />
+                </el-table>
+              </div>
             </template>
           </div>
         </div>
@@ -675,7 +679,7 @@ const btnSelectClick = (val: any) => {
 
     .export-remark {
       position: absolute;
-      right: 116px;
+      right: 24px;
       top: 12px;
     }
 
@@ -936,10 +940,6 @@ const btnSelectClick = (val: any) => {
           margin-top: 16px;
           height: calc(100% - 50px);
 
-          &.overflow-preview {
-            overflow-y: auto;
-          }
-
           .table-content_preview {
             max-height: calc(100% - 50px);
             overflow-y: auto;
@@ -1006,6 +1006,11 @@ const btnSelectClick = (val: any) => {
             line-height: 22px;
             color: #646a73;
           }
+
+          .table-container {
+            width: 100%;
+            height: calc(100% - 46px);
+          }
         }
       }
     }
diff --git a/frontend/src/views/system/excel-upload/UploaderRemark.vue b/frontend/src/views/system/excel-upload/UploaderRemark.vue
index 0f3362dc..c910ac31 100644
--- a/frontend/src/views/system/excel-upload/UploaderRemark.vue
+++ b/frontend/src/views/system/excel-upload/UploaderRemark.vue
@@ -276,9 +276,6 @@ const submitUpload = () => {
 <style scoped lang="less">
 .up-loader-remark {
   margin: 0;
-  position: absolute;
-  top: 12px;
-  right: 24px;
 }
 .import-container {
   display: flex;