update

packages/frontend/src/components/FileUploadPopup.vue

@@ -31,82 +31,20 @@ const handleCancel = (uploadId: string) => {
 
 <template>
   <!-- 仅当有上传任务时显示 -->
-  <div v-if="uploadList.length > 0" class="upload-popup">
-    <h4>{{ t('fileManager.uploadTasks') }}:</h4>
-    <ul>
-      <li v-for="upload in uploadList" :key="upload.id">
-        <span>{{ upload.filename }} ({{ t(`fileManager.uploadStatus.${upload.status}`) }})</span>
-        <progress v-if="upload.status === 'uploading' || upload.status === 'pending'" :value="upload.progress" max="100"></progress>
-        <span v-if="upload.status === 'uploading'"> {{ upload.progress }}%</span>
-        <span v-if="upload.status === 'error'" class="error"> {{ t('fileManager.errors.generic') }}: {{ upload.error }}</span>
-        <span v-if="upload.status === 'success'"> ✅</span>
-        <span v-if="upload.status === 'cancelled'"> ❌ {{ t('fileManager.uploadStatus.cancelled') }}</span>
+  <div v-if="uploadList.length > 0" class="fixed bottom-4 right-4 bg-background border border-border rounded-md shadow-md p-3 max-w-xs max-h-48 overflow-y-auto z-[1001] text-sm">
+    <h4 class="m-0 mb-2 text-sm font-semibold border-b border-border pb-1">{{ t('fileManager.uploadTasks') }}:</h4>
+    <ul class="list-none p-0 m-0">
+      <li v-for="upload in uploadList" :key="upload.id" class="mb-1.5 text-xs flex items-center flex-wrap gap-2">
+        <span class="flex-grow truncate" :title="upload.filename">{{ upload.filename }} ({{ t(`fileManager.uploadStatus.${upload.status}`) }})</span>
+        <progress v-if="upload.status === 'uploading' || upload.status === 'pending'" :value="upload.progress" max="100" class="w-20 h-2 flex-shrink-0 [&::-webkit-progress-bar]:rounded-lg [&::-webkit-progress-value]:rounded-lg [&::-webkit-progress-bar]:bg-gray-300 [&::-webkit-progress-value]:bg-blue-600 [&::-moz-progress-bar]:bg-blue-600"></progress>
+        <span v-if="upload.status === 'uploading'" class="text-xs flex-shrink-0"> {{ upload.progress }}%</span>
+        <span v-if="upload.status === 'error'" class="text-red-600 basis-full text-xs"> {{ t('fileManager.errors.generic') }}: {{ upload.error }}</span>
+        <span v-if="upload.status === 'success'" class="text-green-600"> ✅</span>
+        <span v-if="upload.status === 'cancelled'" class="text-red-600"> ❌ {{ t('fileManager.uploadStatus.cancelled') }}</span>
         <!-- 只有在可取消状态时显示取消按钮 -->
-        <button v-if="['pending', 'uploading', 'paused'].includes(upload.status)" @click="handleCancel(upload.id)" class="cancel-btn">{{ t('fileManager.actions.cancel') }}</button>
+        <button v-if="['pending', 'uploading', 'paused'].includes(upload.status)" @click="handleCancel(upload.id)" class="ml-auto px-1.5 py-0.5 text-xs bg-red-100 border border-red-300 text-red-700 cursor-pointer rounded hover:bg-red-200 flex-shrink-0">{{ t('fileManager.actions.cancel') }}</button>
       </li>
     </ul>
   </div>
 </template>
 
-<style scoped>
-/* 样式从 FileManager.vue 迁移并保持一致 */
-.upload-popup {
-  position: fixed;
-  bottom: 1rem;
-  right: 1rem;
-  background-color: white;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-  padding: 0.8rem;
-  max-width: 300px;
-  max-height: 200px;
-  overflow-y: auto;
-  z-index: 1001; /* 确保在文件列表之上 */
-  font-size: 0.9rem; /* 保持字体大小一致 */
-}
-.upload-popup h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 0.9em;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 0.3rem;
-}
-.upload-popup ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.upload-popup li {
-  margin-bottom: 0.4rem;
-  font-size: 0.85em;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.5rem; /* 添加一些间隙 */
-}
-.upload-popup progress {
-  /* margin: 0 0.5rem; */ /* 使用 gap 代替 */
-  width: 80px;
-  height: 0.8em;
-  flex-shrink: 0; /* 防止进度条被压缩 */
-}
-.upload-popup .error {
-  color: red;
-  /* margin-left: 0.5rem; */ /* 使用 gap 代替 */
-  flex-basis: 100%; /* 错误信息换行 */
-  font-size: 0.8em;
-}
-.upload-popup .cancel-btn {
-  margin-left: auto; /* 将按钮推到右侧 */
-  padding: 0.1rem 0.4rem;
-  font-size: 0.8em;
-  background-color: #f8d7da;
-  border: 1px solid #f5c6cb;
-  color: #721c24;
-  cursor: pointer;
-  border-radius: 3px;
-}
-.upload-popup .cancel-btn:hover {
-    background-color: #f5c6cb;
-}
-</style>