From 2ea88316d2c57af235db6626d2e4ccfc385d2c35 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Thu, 4 Jun 2026 01:16:22 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E9=87=8D=E6=9E=84=E7=B4=A0?=
 =?UTF-8?q?=E6=9D=90=E4=B8=8A=E4=BC=A0=E5=BC=B9=E7=AA=97=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构整个上传流程为清晰的三阶段结构：拖拽区、文件列表、上传进度
- 使用 BEM 命名规范替换原有嵌套 CSS 选择器，提升可维护性
- 简化模板逻辑和模板代码，移除冗余状态变量和条件判断
- 优化进度显示，新增剩余时间估算功能
- 替换 `Progress` 组件为原生样式实现，减少外部组件依赖
- 统一文件操作和上传逻辑的错误处理流程
- 优化视觉设计：调整弹窗宽度、改进拖拽区样式、精简按钮布局
---
 .../material/MaterialUploadModal.vue          | 810 +++++++-----------
 1 file changed, 321 insertions(+), 489 deletions(-)

diff --git a/frontend/app/web-gold/src/components/material/MaterialUploadModal.vue b/frontend/app/web-gold/src/components/material/MaterialUploadModal.vue
index 16f623a18b..c1bf01fa2e 100644
--- a/frontend/app/web-gold/src/components/material/MaterialUploadModal.vue
+++ b/frontend/app/web-gold/src/components/material/MaterialUploadModal.vue
@@ -1,129 +1,98 @@
 <template>
   <Dialog :open="props.visible" @update:open="handleVisibleChange">
-    <DialogContent class="max-w-[600px]">
+    <DialogContent class="max-w-[560px]">
       <DialogHeader>
         <DialogTitle>上传素材</DialogTitle>
       </DialogHeader>
 
-      <div class="upload-modal-content">
-        <!-- 文件上传区域 -->
-        <div class="upload-area" v-if="!uploading">
-          <div
-            class="upload-dragger"
-            :class="{ 'drag-over': isDragOver }"
-            @click="triggerFileInput"
-            @drop.prevent="handleDrop"
-            @dragover.prevent="isDragOver = true"
-            @dragleave.prevent="isDragOver = false"
-          >
-            <input
-              ref="fileInputRef"
-              type="file"
-              multiple
-              :accept="acceptTypes"
-              class="hidden"
-              @change="handleFileSelect"
-            />
-            <div class="upload-icon">
-              <Icon icon="lucide:cloud-upload" class="text-4xl text-blue-500" />
-            </div>
-            <p class="upload-text">点击或拖拽文件到此处上传</p>
-            <p class="upload-hint">
-              支持多文件上传，单文件最大 1GB
-              <br />
-              支持格式：视频（MP4、MOV、AVI等）、图片（JPG、PNG、GIF等）、音频（MP3、WAV等）
-            </p>
+      <div class="upload-body">
+        <!-- ═══ 阶段 1：拖拽区 ═══ -->
+        <div v-if="!uploading && fileList.length === 0" class="drop-zone" :class="{ 'drop-zone--active': isDragOver }"
+          @click="triggerFileInput" @drop.prevent="handleDrop" @dragover.prevent="isDragOver = true"
+          @dragleave.prevent="isDragOver = false">
+          <input ref="fileInputRef" type="file" multiple :accept="acceptTypes" hidden @change="handleFileSelect" />
+          <div class="drop-zone__icon">
+            <Icon icon="lucide:cloud-upload" />
           </div>
+          <p class="drop-zone__title">拖拽文件到此处，或点击选择</p>
+          <p class="drop-zone__hint">视频 · 图片 · 音频 ｜ 单文件最大 1GB</p>
         </div>
 
-        <!-- 已选文件列表 -->
-        <div v-if="fileList.length > 0 && !uploading" class="upload-file-list">
-          <div class="upload-file-list-title">
-            已选择 {{ fileList.length }} 个文件，总大小：{{ getTotalSize() }}
-            <span v-if="getTotalSizeBytes() > MAX_TOTAL_SIZE" class="text-red-500 ml-2">
-              （已超出 1GB 限制）
+        <!-- ═══ 阶段 2：已选文件列表 ═══ -->
+        <div v-if="fileList.length > 0 && !uploading" class="file-pick-list">
+          <div class="file-pick-list__header">
+            <span>已选 <strong>{{ fileList.length }}</strong> 个文件</span>
+            <span class="file-pick-list__total" :class="{ 'text-danger': getTotalSizeBytes() > MAX_TOTAL_SIZE }">
+              {{ getTotalSize() }} / 1GB
             </span>
           </div>
-          <div class="upload-file-items">
-            <div
-              v-for="(fileItem, index) in fileList"
-              :key="fileItem.uid || index"
-              class="upload-file-item"
-            >
-              <Icon icon="lucide:file" class="file-icon" />
-              <span class="file-name">{{ getFileName(fileItem) }}</span>
-              <span class="file-size">{{ formatFileSize(getFileSize(fileItem)) }}</span>
-              <Button
-                variant="ghost"
-                size="sm"
-                class="text-red-500 hover:text-red-600"
-                @click="handleRemove(fileItem)"
-              >
-                删除
-              </Button>
+          <div class="file-pick-list__items">
+            <div v-for="(fileItem, index) in fileList" :key="fileItem.uid || index" class="pick-item">
+              <Icon icon="lucide:file" class="pick-item__icon" />
+              <span class="pick-item__name" :title="getFileName(fileItem)">{{ getFileName(fileItem) }}</span>
+              <span class="pick-item__size">{{ formatFileSize(getFileSize(fileItem)) }}</span>
+              <button class="pick-item__remove" @click="handleRemove(fileItem)" title="移除">
+                <Icon icon="lucide:x" />
+              </button>
             </div>
           </div>
         </div>
 
-        <!-- 上传进度区域 -->
-        <div v-if="uploading" class="upload-progress-area">
-          <div class="upload-progress-header">
-            <span class="custom-spinner"></span>
-            <span>正在上传 {{ currentUploadIndex }} / {{ totalUploadCount }}</span>
+        <!-- ═══ 阶段 3：上传进度 ═══ -->
+        <div v-if="uploading" class="upload-stage">
+          <!-- 头部状态 -->
+          <div class="upload-stage__status">
+            <span class="upload-stage__spinner" />
+            <span class="upload-stage__label">{{ currentUploadIndex }} / {{ totalUploadCount }}</span>
+            <span class="upload-stage__eta" v-if="currentFileProgress > 0 && currentFileProgress < 100">
+              剩余约 {{ estimatedRemaining }}
+            </span>
           </div>
 
-          <!-- 总体进度 -->
-          <div class="upload-total-progress">
-            <div class="progress-info">
-              <span>总体进度</span>
-              <span>{{ totalProgress }}%</span>
+          <!-- 总进度条 -->
+          <div class="total-bar">
+            <div class="total-bar__track">
+              <div class="total-bar__fill" :style="{ width: totalProgress + '%' }" />
             </div>
-            <Progress :value="totalProgress" class="h-2" />
+            <span class="total-bar__pct">{{ totalProgress }}%</span>
           </div>
 
-          <!-- 当前文件进度 -->
-          <div class="upload-current-file">
-            <div class="current-file-name">
+          <!-- 当前文件 -->
+          <div class="live-file">
+            <div class="live-file__name">
               <Icon icon="lucide:file" />
               <span>{{ currentFileName }}</span>
             </div>
-            <div class="current-file-progress">
-              <div class="progress-info">
-                <span>{{ formatFileSize(currentFileUploaded) }} / {{ formatFileSize(currentFileSize) }}</span>
-                <span>{{ currentFileProgress }}%</span>
+            <div class="live-file__bar">
+              <div class="live-file__track">
+                <div class="live-file__fill" :style="{ width: currentFileProgress + '%' }" />
               </div>
-              <Progress :value="currentFileProgress" class="h-1.5" />
+              <span class="live-file__pct">{{ currentFileProgress }}%</span>
             </div>
+            <div class="live-file__bytes">{{ formatFileSize(currentFileUploaded) }} / {{ formatFileSize(currentFileSize)
+            }}</div>
           </div>
 
-          <!-- 已完成文件列表 -->
-          <div v-if="completedFiles.length > 0" class="completed-files">
-            <div class="completed-header">
-              <Icon icon="lucide:check-circle" class="text-green-500" />
-              <span>已完成 {{ completedFiles.length }} 个文件</span>
-            </div>
-            <div class="completed-list">
-              <div v-for="file in completedFiles" :key="file.name" class="completed-item">
-                <Icon icon="lucide:check" class="text-green-500 text-xs" />
-                <span>{{ file.name }}</span>
-              </div>
+          <!-- 已完成 / 失败 列表 -->
+          <div v-if="completedFiles.length > 0" class="done-list">
+            <div v-for="(f, i) in completedFiles" :key="i" class="done-item" :class="f.success ? 'done-item--ok' : 'done-item--fail'">
+              <Icon :icon="f.success ? 'lucide:check-circle' : 'lucide:x-circle'" class="done-item__icon" />
+              <span class="done-item__name">{{ f.name }}</span>
+              <span class="done-item__tag">{{ f.success ? '成功' : '失败' }}</span>
             </div>
           </div>
         </div>
 
-        <!-- 操作按钮 -->
-        <div class="upload-actions">
-          <div class="flex gap-2 justify-end">
-            <Button v-if="!uploading" variant="outline" @click="handleCancel">取消</Button>
-            <Button
-              v-if="!uploading"
-              :disabled="fileList.length === 0"
-              @click="handleConfirm"
-            >
-              {{ uploading ? '上传中...' : `上传 (${fileList.length})` }}
+        <!-- ═══ 底部操作栏 ═══ -->
+        <div class="upload-footer">
+          <template v-if="!uploading">
+            <Button variant="outline" size="sm" @click="handleCancel">取消</Button>
+            <Button size="sm" :disabled="fileList.length === 0" @click="handleConfirm">
+              <Icon icon="lucide:upload" class="mr-1.5 size-4" />
+              上传 {{ fileList.length }} 个文件
             </Button>
-            <span v-if="uploading" class="upload-tip">上传中请勿关闭窗口...</span>
-          </div>
+          </template>
+          <p v-else class="upload-footer__hint">上传中，请勿关闭窗口</p>
         </div>
       </div>
     </DialogContent>
@@ -135,47 +104,31 @@ import { ref, watch, computed } from 'vue'
 import { toast } from 'vue-sonner'
 import { Icon } from '@iconify/vue'
 import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
+  Dialog, DialogContent, DialogHeader, DialogTitle,
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
-import { Progress } from '@/components/ui/progress'
 import { getFileName, getFileSize, formatFileSize } from '@/utils/file'
 import { useUpload } from '@/composables/useUpload'
 
 const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  fileCategory: {
-    type: String,
-    default: 'video'
-  },
-  groupId: {
-    type: Number,
-    default: null
-  }
+  visible: { type: Boolean, default: false },
+  fileCategory: { type: String, default: 'video' },
+  groupId: { type: Number, default: null }
 })
 
 const emit = defineEmits(['update:visible', 'confirm', 'cancel', 'complete'])
 
-// Hooks
 const { upload } = useUpload()
 
-// 数据
+// ── 状态 ──
 const fileList = ref([])
 const acceptTypes = 'video/*,image/*,audio/*,.mp4,.mov,.avi,.mkv,.jpg,.jpeg,.png,.gif,.webp,.mp3,.wav,.aac'
 const isDragOver = ref(false)
 const fileInputRef = ref(null)
 
-// 常量
-const MAX_TOTAL_SIZE = 1 * 1024 * 1024 * 1024 // 1GB
-const MAX_SINGLE_FILE_SIZE = 1 * 1024 * 1024 * 1024 // 1GB (单个文件最大1GB)
+const MAX_TOTAL_SIZE = 1 * 1024 * 1024 * 1024
+const MAX_SINGLE_FILE_SIZE = 1 * 1024 * 1024 * 1024
 
-// 上传状态
 const uploading = ref(false)
 const currentUploadIndex = ref(0)
 const totalUploadCount = ref(0)
@@ -185,458 +138,337 @@ const currentFileSize = ref(0)
 const currentFileUploaded = ref(0)
 const completedFiles = ref([])
 
-// 计算总进度
+// ── 计算 ──
 const totalProgress = computed(() => {
   if (totalUploadCount.value === 0) return 0
-  const baseProgress = ((currentUploadIndex.value - 1) / totalUploadCount.value) * 100
-  const currentContribution = (currentFileProgress.value / 100) / totalUploadCount.value * 100
-  return Math.round(baseProgress + currentContribution)
+  const base = ((currentUploadIndex.value - 1) / totalUploadCount.value) * 100
+  const cur = (currentFileProgress.value / 100) / totalUploadCount.value * 100
+  return Math.round(base + cur)
 })
 
-// 计算总大小（字节）
-const getTotalSizeBytes = () => {
-  return fileList.value.reduce((total, item) => {
-    return total + getFileSize(item)
-  }, 0)
-}
+const estimatedRemaining = computed(() => {
+  if (currentFileProgress.value === 0) return '计算中…'
+  const remainingFiles = totalUploadCount.value - currentUploadIndex.value
+  const totalRemaining = remainingFiles * currentFileSize.value + (currentFileSize.value - currentFileUploaded.value)
+  if (totalRemaining < 1024 * 1024) return '不到 1 分钟'
+  return '约 ' + Math.ceil(totalRemaining / (10 * 1024 * 1024)) + ' 分钟'
+})
 
-// 计算总大小（格式化）
-const getTotalSize = () => {
-  return formatFileSize(getTotalSizeBytes())
-}
+const getTotalSizeBytes = () => fileList.value.reduce((t, i) => t + getFileSize(i), 0)
+const getTotalSize = () => formatFileSize(getTotalSizeBytes())
 
-// 触发文件选择
-const triggerFileInput = () => {
-  fileInputRef.value?.click()
-}
+// ── 文件操作 ──
+const triggerFileInput = () => fileInputRef.value?.click()
 
-// 处理文件选择
 const handleFileSelect = (e) => {
-  const files = e.target.files
-  if (files) {
-    addFiles(Array.from(files))
-  }
-  // 重置 input 以便可以再次选择相同文件
+  if (e.target.files) addFiles(Array.from(e.target.files))
   e.target.value = ''
 }
 
-// 处理拖放
 const handleDrop = (e) => {
   isDragOver.value = false
-  const files = e.dataTransfer?.files
-  if (files) {
-    addFiles(Array.from(files))
-  }
+  if (e.dataTransfer?.files) addFiles(Array.from(e.dataTransfer.files))
 }
 
-// 添加文件
 const addFiles = (files) => {
   files.forEach(file => {
-    // 检查单个文件大小
-    if (file.size > MAX_SINGLE_FILE_SIZE) {
-      toast.warning(`文件 ${file.name} 超过 1GB，已跳过`)
-      return
-    }
-
-    // 计算当前文件列表的总大小（包括新文件）
-    const currentTotalSize = getTotalSizeBytes()
-    const newTotalSize = currentTotalSize + file.size
-
-    // 检查总大小
-    if (newTotalSize > MAX_TOTAL_SIZE) {
-      toast.warning(`文件总大小超过 1GB（当前：${formatFileSize(currentTotalSize)}，新增：${formatFileSize(file.size)}），已跳过`)
-      return
-    }
-
-    // 检查是否已存在相同文件
-    const exists = fileList.value.some(item => {
-      const itemName = getFileName(item)
-      const itemSize = getFileSize(item)
-      return itemName === file.name && itemSize === file.size
-    })
-    if (exists) {
-      toast.warning(`文件 ${file.name} 已存在，已跳过`)
-      return
-    }
-
-    fileList.value.push({
-      uid: `${Date.now()}-${Math.random()}`,
-      file,
-      name: file.name,
-      size: file.size
-    })
+    if (file.size > MAX_SINGLE_FILE_SIZE) return toast.warning(`文件 ${file.name} 超过 1GB，已跳过`)
+    const currentTotal = getTotalSizeBytes()
+    if (currentTotal + file.size > MAX_TOTAL_SIZE) return toast.warning(`总大小超过 1GB，已跳过 ${file.name}`)
+    if (fileList.value.some(i => getFileName(i) === file.name && getFileSize(i) === file.size)) return
+    fileList.value.push({ uid: `${Date.now()}-${Math.random()}`, file, name: file.name, size: file.size })
   })
 }
 
-// 监听 visible 变化，重置文件列表
-watch(() => props.visible, (newVal) => {
-  if (!newVal) {
-    fileList.value = []
-    resetUploadState()
-  }
-})
-
-// 重置上传状态
-const resetUploadState = () => {
-  uploading.value = false
-  currentUploadIndex.value = 0
-  totalUploadCount.value = 0
-  currentFileName.value = ''
-  currentFileProgress.value = 0
-  currentFileSize.value = 0
-  currentFileUploaded.value = 0
-  completedFiles.value = []
-}
-
-// 移除文件
 const handleRemove = (fileItem) => {
-  const index = fileList.value.findIndex(item =>
-    (item.uid && item.uid === fileItem.uid) ||
-    (getFileName(item) === getFileName(fileItem))
-  )
-  if (index > -1) {
-    fileList.value.splice(index, 1)
-  }
+  const idx = fileList.value.findIndex(i => (i.uid && i.uid === fileItem.uid) || getFileName(i) === getFileName(fileItem))
+  if (idx > -1) fileList.value.splice(idx, 1)
 }
 
-// 确认上传
+// ── 生命周期 ──
+watch(() => props.visible, (v) => { if (!v) { fileList.value = []; resetUploadState() } })
+
+const resetUploadState = () => {
+  uploading.value = false; currentUploadIndex.value = 0; totalUploadCount.value = 0
+  currentFileName.value = ''; currentFileProgress.value = 0; currentFileSize.value = 0
+  currentFileUploaded.value = 0; completedFiles.value = []
+}
+
+// ── 上传 ──
 const handleConfirm = async () => {
-  if (fileList.value.length === 0) {
-    toast.warning('请选择文件')
-    return
-  }
-
-  // 检查总大小
-  if (getTotalSizeBytes() > MAX_TOTAL_SIZE) {
-    toast.warning(`文件总大小超过 1GB 限制，请移除部分文件`)
-    return
-  }
-
-  // 提取文件对象
-  const files = fileList.value
-    .map(item => {
-      const fileObj = item.file || item.originFileObj || item
-      if (!(fileObj instanceof File)) return null
-      return fileObj
-    })
-    .filter(item => item !== null)
-
-  if (files.length === 0) {
-    toast.error('无法获取文件对象，请重新选择文件')
-    return
-  }
-
-  // 开始上传
+  if (fileList.value.length === 0) return toast.warning('请选择文件')
+  if (getTotalSizeBytes() > MAX_TOTAL_SIZE) return toast.warning('总大小超过 1GB，请移除部分文件')
+  const files = fileList.value.map(i => i.file || i.originFileObj || i).filter(f => f instanceof File)
+  if (files.length === 0) return toast.error('无法获取文件对象，请重新选择')
   await performUpload(files)
 }
 
-// 执行上传
 const performUpload = async (files) => {
-  uploading.value = true
-  totalUploadCount.value = files.length
-  currentUploadIndex.value = 0
-  completedFiles.value = []
-
-  // 使用传入的fileCategory
-  const category = props.fileCategory || 'video'
-  let successCount = 0
-  let failCount = 0
+  uploading.value = true; totalUploadCount.value = files.length; currentUploadIndex.value = 0; completedFiles.value = []
+  let ok = 0, fail = 0
 
   for (let i = 0; i < files.length; i++) {
     const file = files[i]
-    currentUploadIndex.value = i + 1
-    currentFileName.value = file.name
-    currentFileSize.value = file.size
-    currentFileUploaded.value = 0
-    currentFileProgress.value = 0
-
+    currentUploadIndex.value = i + 1; currentFileName.value = file.name
+    currentFileSize.value = file.size; currentFileUploaded.value = 0; currentFileProgress.value = 0
     try {
       await upload(file, {
-        fileCategory: category,
+        fileCategory: props.fileCategory || 'video',
         groupId: props.groupId,
-        onProgress: (progress) => {
-          currentFileProgress.value = progress
-          currentFileUploaded.value = Math.round((progress / 100) * currentFileSize.value)
-        },
-        onSuccess: () => {
-          console.log('文件上传成功:', file.name)
-          successCount++
-          completedFiles.value.push({
-            name: file.name,
-            success: true
-          })
-        },
-        onError: (error) => {
-          console.error('文件上传失败:', file.name, error)
-          failCount++
-          completedFiles.value.push({
-            name: file.name,
-            success: false
-          })
-        }
+        onProgress: (p) => { currentFileProgress.value = p; currentFileUploaded.value = Math.round((p / 100) * file.size) },
+        onSuccess: () => { ok++; completedFiles.value.push({ name: file.name, success: true }) },
+        onError: () => { fail++; completedFiles.value.push({ name: file.name, success: false }) }
       })
-    } catch (error) {
-      console.error('上传异常:', error)
-      failCount++
-      completedFiles.value.push({
-        name: file.name,
-        success: false
-      })
-    }
+    } catch { fail++; completedFiles.value.push({ name: file.name, success: false }) }
   }
 
   uploading.value = false
-
-  // 显示结果
-  if (successCount > 0 && failCount === 0) {
-    toast.success(`成功上传 ${successCount} 个文件`)
-  } else if (successCount > 0 && failCount > 0) {
-    toast.warning(`上传完成：${successCount} 个成功，${failCount} 个失败`)
-  } else {
-    toast.error('上传失败，请重试')
-  }
-
-  // 通知父组件上传完成
-  emit('complete', { successCount, failCount })
-
-  // 关闭弹窗
+  if (ok > 0 && fail === 0) toast.success(`成功上传 ${ok} 个文件`)
+  else if (ok > 0) toast.warning(`上传完成：${ok} 成功，${fail} 失败`)
+  else toast.error('上传失败，请重试')
+  emit('complete', { successCount: ok, failCount: fail })
   emit('update:visible', false)
 }
 
-// 处理 visible 变化
-const handleVisibleChange = (value) => {
-  if (!value && uploading.value) return
-  emit('update:visible', value)
-}
-
-// 取消
-const handleCancel = () => {
-  if (uploading.value) return
-  emit('update:visible', false)
-  emit('cancel')
-}
+const handleVisibleChange = (v) => { if (!v && uploading.value) return; emit('update:visible', v) }
+const handleCancel = () => { if (uploading.value) return; emit('update:visible', false); emit('cancel') }
 </script>
 
 <style scoped lang="less">
-.upload-modal-content {
-  padding: 8px 0;
+/* ═══════════════════════════════════════════════════════════════
+   上传弹窗 - 清晰三段式
+   ═══════════════════════════════════════════════════════════════ */
+.upload-body {
+  padding: 4px 0;
 }
 
-.upload-area {
-  margin-bottom: 24px;
-}
-
-.upload-dragger {
+/* ── 拖拽区 ── */
+.drop-zone {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 32px;
-  border: 2px dashed var(--color-border);
+  padding: 40px 24px;
+  border: 2px dashed var(--border);
   border-radius: var(--radius-lg);
-  background: var(--color-surface);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all .2s;
 
-  &:hover, &.drag-over {
-    border-color: #3B82F6;
-    background: rgba(59, 130, 246, 0.05);
+  &:hover,
+  &--active {
+    border-color: var(--primary);
+    background: hsl(var(--primary) / .04);
   }
 
-  .upload-icon {
-    margin-bottom: 12px;
+  &__icon {
+    width: 52px; height: 52px;
+    display: flex; align-items: center; justify-content: center;
+    background: hsl(var(--primary) / .08);
+    border-radius: 50%;
+    color: var(--primary);
+    font-size: 24px;
+    margin-bottom: 16px;
   }
 
-  .upload-text {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-text);
-    margin-bottom: 8px;
+  &__title {
+    font-size: 15px; font-weight: 500; color: var(--foreground); margin-bottom: 6px;
   }
 
-  .upload-hint {
-    font-size: 12px;
-    color: var(--color-text-3);
-    text-align: center;
-    line-height: 1.6;
+  &__hint {
+    font-size: 12px; color: var(--muted-foreground);
   }
 }
 
-.hidden {
-  display: none;
-}
-
-.upload-file-list {
-  margin-bottom: 24px;
-  padding: 16px;
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-  border: 1px solid var(--color-border);
-}
-
-.upload-file-list-title {
-  font-weight: 500;
-  margin-bottom: 12px;
-  color: var(--color-text);
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.upload-file-items {
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.upload-file-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px;
-  border-radius: 4px;
-}
-
-.upload-file-item:hover {
-  background: var(--color-bg-2);
-}
-
-.file-icon {
-  font-size: 20px;
-  color: var(--color-text-3);
-}
-
-.file-name {
-  flex: 1;
-  min-width: 0;
-  max-width: 240px;
-  font-size: 14px;
-  color: var(--color-text);
+/* ── 已选文件列表 ── */
+.file-pick-list {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+  &__header {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 10px 16px;
+    font-size: 13px; color: var(--muted-foreground);
+    background: var(--muted);
+    border-bottom: 1px solid var(--border);
+    strong { color: var(--foreground); }
+  }
+
+  &__total {
+    &.text-danger { color: var(--destructive); font-weight: 500; }
+  }
+
+  &__items {
+    max-height: 220px; overflow-y: auto;
+  }
 }
 
-.file-size {
-  font-size: 12px;
-  color: var(--color-text-3);
-}
-
-.upload-actions {
-  text-align: right;
-  padding-top: 16px;
-  border-top: 1px solid var(--color-border);
-}
-
-.upload-tip {
-  color: var(--color-text-3);
+.pick-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
   font-size: 13px;
+  &:last-child { border-bottom: none; }
+
+  &__icon { color: var(--muted-foreground); flex-shrink: 0; }
+
+  &__name {
+    flex: 1; min-width: 0;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    color: var(--foreground);
+  }
+
+  &__size {
+    color: var(--muted-foreground); font-size: 12px; flex-shrink: 0;
+  }
+
+  &__remove {
+    width: 28px; height: 28px;
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 6px; border: none; background: transparent;
+    color: var(--muted-foreground); cursor: pointer;
+    &:hover { background: var(--destructive)/.1; color: var(--destructive); }
+  }
 }
 
-/* 上传进度区域 */
-.upload-progress-area {
-  padding: 16px;
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-  border: 1px solid var(--color-border);
+/* ── 上传进度 ── */
+.upload-stage {
+  &__status {
+    display: flex; align-items: center; gap: 10px;
+    margin-bottom: 16px;
+    font-size: 14px; font-weight: 500;
+  }
+
+  &__spinner {
+    width: 18px; height: 18px;
+    border: 2px solid hsl(var(--primary) / .15);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    animation: spin .7s linear infinite;
+  }
+
+  &__label { color: var(--foreground); }
+
+  &__eta {
+    margin-left: auto;
+    font-size: 12px; font-weight: 400; color: var(--muted-foreground);
+  }
 }
 
-.upload-progress-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* 总进度条 */
+.total-bar {
+  display: flex; align-items: center; gap: 12px;
   margin-bottom: 20px;
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--color-text);
+
+  &__track {
+    flex: 1; height: 8px;
+    background: var(--muted);
+    border-radius: 4px; overflow: hidden;
+  }
+
+  &__fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary), hsl(var(--primary) / .7));
+    border-radius: 4px;
+    transition: width .3s ease;
+  }
+
+  &__pct {
+    font-size: 14px; font-weight: 600; color: var(--primary);
+    min-width: 36px; text-align: right;
+  }
 }
 
-.custom-spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid rgba(59, 130, 246, 0.2);
-  border-top-color: #3B82F6;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.upload-total-progress {
-  margin-bottom: 20px;
-}
-
-.progress-info {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 8px;
-  font-size: 13px;
-  color: var(--color-text-2);
-}
-
-.upload-current-file {
-  padding: 12px;
-  background: var(--color-bg-2);
-  border-radius: 8px;
-  margin-bottom: 16px;
-}
-
-.current-file-name {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+/* 当前文件 */
+.live-file {
+  padding: 14px;
+  background: var(--muted);
+  border-radius: 10px;
   margin-bottom: 12px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text);
+
+  &__name {
+    display: flex; align-items: center; gap: 8px;
+    font-size: 13px; font-weight: 500; color: var(--foreground);
+    margin-bottom: 10px;
+    span {
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    }
+  }
+
+  &__bar {
+    display: flex; align-items: center; gap: 10px;
+    margin-bottom: 6px;
+  }
+
+  &__track {
+    flex: 1; height: 5px;
+    background: var(--border);
+    border-radius: 3px; overflow: hidden;
+  }
+
+  &__fill {
+    height: 100%; background: var(--primary);
+    border-radius: 3px;
+    transition: width .15s ease;
+  }
+
+  &__pct {
+    font-size: 12px; font-weight: 500; color: var(--primary);
+    min-width: 32px; text-align: right;
+  }
+
+  &__bytes {
+    font-size: 11px; color: var(--muted-foreground);
+  }
 }
 
-.current-file-name span {
-  min-width: 0;
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+/* 已完成 / 失败 */
+.done-list {
+  max-height: 140px; overflow-y: auto;
 }
 
-.current-file-progress .progress-info {
-  margin-bottom: 6px;
-}
-
-.completed-files {
-  margin-top: 12px;
-}
-
-.completed-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
+.done-item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 7px 0;
   font-size: 13px;
-  font-weight: 500;
-  color: var(--color-text-2);
+
+  &__icon { flex-shrink: 0; }
+
+  &--ok &__icon { color: var(--success); }
+  &--fail &__icon { color: var(--destructive); }
+
+  &__name {
+    flex: 1; min-width: 0;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    color: var(--foreground);
+  }
+
+  &__tag {
+    font-size: 11px; font-weight: 500;
+    padding: 1px 8px; border-radius: 100px;
+    flex-shrink: 0;
+
+    .done-item--ok & {
+      background: hsl(var(--success) / .1);
+      color: var(--success);
+    }
+
+    .done-item--fail & {
+      background: hsl(var(--destructive) / .1);
+      color: var(--destructive);
+    }
+  }
 }
 
-.completed-list {
-  max-height: 120px;
-  overflow-y: auto;
-}
+/* ── 底部栏 ── */
+.upload-footer {
+  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
+  padding-top: 16px; margin-top: 4px;
+  border-top: 1px solid var(--border);
 
-.completed-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 0;
-  font-size: 12px;
-  color: var(--color-text-3);
-}
-
-.completed-item span {
-  min-width: 0;
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  &__hint {
+    font-size: 13px; color: var(--muted-foreground); margin: 0;
+  }
 }
 </style>