feat: 调整批量下载页的样式和下载功能

src/views/Tracking/src/components/DownloadAttachment/src/DownloadAttachment.vue

@@ -151,7 +151,7 @@ const handleFileDownload = (row: any) => {
   const url = row?.url
   // 创建一个隐藏的 <a> 标签
   const link = document.createElement('a')
-  link.href = url
+  link.href = row?.is_topocean ? url : import.meta.env.VITE_API_HOST + '/' + url
   link.target = '_blank'
 
   // 指定下载文件名（可选）
@@ -249,8 +249,10 @@ const handleDownloadAllSelectedFiles = (label?: string) => {
               v-model="attItem.isSelect"
             >
               <span class="font_family icon-icon_ocean_b"></span>
-              <span class="label">Attachment {{ attItem.no }}</span></el-checkbox
-            >
+              <el-tooltip effect="dark" :content="`Attachment ${attItem.no}`" placement="top">
+                <span class="label ellipsis-text">Attachment {{ attItem.no }}</span>
+              </el-tooltip>
+            </el-checkbox>
           </div>
           <div class="attachment-content">
             <div
@@ -398,11 +400,9 @@ const handleDownloadAllSelectedFiles = (label?: string) => {
   }
   & > .attachment-list {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(326px, 1fr));
     grid-template-rows: 320px;
-    // display: flex;
     gap: 8px;
-    // flex-wrap: wrap;
     padding-bottom: 36px;
     height: calc(100% - 64px);
     overflow: auto;
@@ -420,13 +420,20 @@ const handleDownloadAllSelectedFiles = (label?: string) => {
   border: 1px solid var(--color-border);
   border-radius: 12px;
   overflow: hidden;
-  // background-color: var(--color-mode);
+
   .top-number {
     display: flex;
     align-items: center;
     height: 48px;
     padding: 13px 8px;
     background-color: var(--color-dialog-header-bg);
+    :deep(.el-checkbox) {
+      width: 100%;
+      .el-checkbox__label {
+        width: calc(100% - 8px);
+      }
+    }
+
     .font_family {
       font-size: 24px;
       margin-right: 8px;
@@ -434,6 +441,13 @@ const handleDownloadAllSelectedFiles = (label?: string) => {
     .label {
       font-size: 18px;
     }
+    .ellipsis-text {
+      width: calc(100% - 50px);
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
     :deep(.el-checkbox__inner) {
       width: 16px;
       height: 16px;