Merge remote-tracking branch 'origin/master'

smsb-plus-ui/src/components/SmsbFileUpload/SmsbFileUploader.vue

@@ -16,14 +16,20 @@
     <div v-if="fileList.length > 0" class="file-list">
       <h3>文件列表：</h3>
       <el-scrollbar height="200px">
-        <el-table :data="fileList" style="width: 100%">
-          <el-table-column prop="name" label="文件名" />
-          <el-table-column prop="size" label="大小" width="120">
+        <el-table :data="fileList" style="width: 100%" :cell-style="{ textAlign: 'center' }">
+          <el-table-column prop="name" label="文件名" header-align="center">
+            <template #default="{ row }">
+              <el-tooltip :content="row.name" placement="top">
+                <span class="history-filename">{{ row.name }}</span>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column prop="size" label="大小" width="120" header-align="center">
             <template #default="{ row }">
               {{ formatFileSize(row.size || 0) }}
             </template>
           </el-table-column>
-          <el-table-column label="状态/进度" width="180">
+          <el-table-column label="状态/进度" width="180" header-align="center">
             <template #default="{ row }">
               <div v-if="uploadStates[row.uid]">
                 <el-progress v-if="uploadStates[row.uid]?.status === 'uploading'"
@@ -47,7 +53,7 @@
               <el-tag v-else type="info">待上传</el-tag>
             </template>
           </el-table-column>
-          <el-table-column fixed="right" label="操作" width="120">
+          <el-table-column fixed="right" label="操作" width="60" header-align="center">
             <template #default="{ row }">
               <el-button type="danger" link @click="handleManualRemove(row)"
                          :disabled="uploadStates[row.uid]?.status === 'uploading'">删除</el-button>
@@ -65,22 +71,28 @@
     <div v-if="uploadHistory.length > 0" class="history-list">
       <h3>上传历史记录 (最近 {{ MAX_HISTORY_ITEMS }} 条)：</h3>
       <el-scrollbar height="250px">
-        <el-table :data="uploadHistory" style="width: 100%">
-          <el-table-column prop="name" label="文件名" />
-          <el-table-column prop="size" label="大小" width="120">
+        <el-table :data="uploadHistory" style="width: 100%" :cell-style="{ textAlign: 'center' }">
+          <el-table-column prop="name" label="文件名" header-align="center">
+            <template #default="{ row }">
+              <el-tooltip :content="row.name" placement="top">
+                <span class="history-filename">{{ row.name }}</span>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column prop="size" label="大小" width="120" header-align="center">
             <template #default="{ row }">
               {{ formatFileSize(row.size || 0) }}
             </template>
           </el-table-column>
-          <el-table-column prop="status" label="状态" width="100">
+          <el-table-column prop="status" label="状态" width="100" header-align="center">
             <template #default="{ row }">
               <el-tag v-if="row.status === 'success'" type="success">成功</el-tag>
               <el-tag v-else-if="row.status === 'error'" type="danger">失败</el-tag>
               <el-tag v-else type="info">{{ row.status }}</el-tag>
             </template>
           </el-table-column>
-          <el-table-column prop="uploadTime" label="上传时间" width="180" />
-          <el-table-column label="操作" width="80">
+          <!-- <el-table-column prop="uploadTime" label="上传时间" width="180" /> -->
+          <el-table-column label="操作" width="60" header-align="center">
             <template #default="{ $index }">
               <el-button type="danger" link @click="removeHistoryItem($index)">删除</el-button>
             </template>
@@ -213,12 +225,20 @@ onMounted(() => {
 // 上传成功逻辑示例（请根据实际上传API修改）
 // TODO: 对接实际上传API，处理后端返回、进度、错误、合并等流程
 function handleUploadSuccess(response: any) {
-  // 假设 response.data.ossId 为后端返回的文件唯一ID
-  if (response && response.data && response.data.ossId) {
-    ossId.value = response.data.ossId;
-    uploadStates[response.data.ossId] = { status: 'success', progress: 100 };
-    // 追加到历史
-    addHistoryEntry({ ...fileList.value[0], ossId: response.data.ossId }, 'success');
+  const fileUid = response.config?.data?.get('fileUid');
+  if (fileUid) {
+    const fileIndex = fileList.value.findIndex(f => f.uid === fileUid);
+    if (fileIndex !== -1) {
+      // Maintain original functionality
+      if (response?.data?.ossId) {
+        ossId.value = response.data.ossId;
+        uploadStates[fileUid] = { status: 'success', progress: 100 };
+        addHistoryEntry({ ...fileList.value[fileIndex], ossId: response.data.ossId }, 'success');
+      }
+      // Remove successfully uploaded file
+      fileList.value.splice(fileIndex, 1);
+      delete uploadStates[fileUid];
+    }
   }
 }
 
@@ -258,6 +278,12 @@ async function sendChunkRequest(formData: FormData, fileUid: string | number, ch
           state.progress = 100;
           addHistoryEntry(file, "success", state.finalUrl, state.uploadId);
           state.historySaved = true;
+          // Remove successfully uploaded file
+          const fileIndex = fileList.value.findIndex(f => f.uid === fileUid);
+          if (fileIndex !== -1) {
+            fileList.value.splice(fileIndex, 1);
+            delete uploadStates[fileUid];
+          }
         }
       } else if (isLastChunk && !fileUrl) {
         if (
@@ -497,4 +523,33 @@ async function handleUpload() {
 .history-list {
   margin-top: 18px;
 }
+
+/* Add styles for filename truncation */
+:deep(.el-upload-list__item-name) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  max-width: 100%;
+}
+
+:deep(.el-upload-list__item-name:hover) {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.history-filename {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  max-width: 100%;
+}
+
+.history-filename:hover {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 </style>