上传模型时显示全屏进度

web/src/pages/app/modules/models.ts

@@ -529,10 +529,19 @@ async function openUploadModelDialog() {
         model: String(form.get("model") ?? "")
       };
       let completedCount = 0;
+      const totalCount = state.files.length;
       setUploadDialogBusy(state, true);
+      showUploadProgressOverlay(totalCount);
       try {
         for (const [index, file] of state.files.entries()) {
-          updateUploadStatus(`正在上传 ${index + 1}/${state.files.length}：${file.name}`);
+          const uploadingMessage = `正在上传 ${index + 1}/${totalCount}：${file.name}`;
+          updateUploadStatus(uploadingMessage);
+          updateUploadProgressOverlay({
+            total: totalCount,
+            completed: completedCount,
+            message: uploadingMessage,
+            fileName: file.name
+          });
           await waitForUploadStatusPaint();
           await uploadModelToBackend({
             file,
@@ -544,12 +553,20 @@ async function openUploadModelDialog() {
             properties
           });
           completedCount += 1;
-          updateUploadStatus(`已完成 ${completedCount}/${state.files.length}`);
+          const completedMessage = `已完成 ${completedCount}/${totalCount}`;
+          updateUploadStatus(completedMessage);
+          updateUploadProgressOverlay({
+            total: totalCount,
+            completed: completedCount,
+            message: completedMessage,
+            fileName: file.name
+          });
         }
       } catch (error) {
-        updateUploadStatus(`上传失败，已完成 ${completedCount}/${state.files.length}，请处理后重试。`);
+        updateUploadStatus(`上传失败，已完成 ${completedCount}/${totalCount}，请处理后重试。`);
         throw error;
       } finally {
+        hideUploadProgressOverlay();
         if (completedCount < state.files.length) {
           setUploadDialogBusy(state, false);
         }
@@ -704,6 +721,58 @@ function waitForUploadStatusPaint() {
   });
 }
 
+function showUploadProgressOverlay(total: number) {
+  let overlay = document.querySelector<HTMLElement>("#modelUploadProgressOverlay");
+  if (!overlay) {
+    overlay = document.createElement("div");
+    overlay.id = "modelUploadProgressOverlay";
+    overlay.className = "upload-progress-overlay";
+    overlay.setAttribute("role", "status");
+    overlay.setAttribute("aria-live", "polite");
+    overlay.innerHTML = `
+      <div class="upload-progress-panel">
+        <div class="upload-progress-title">模型上传中</div>
+        <div id="modelUploadProgressMessage" class="upload-progress-message">正在准备上传...</div>
+        <div class="upload-progress-track">
+          <div id="modelUploadProgressBar" class="upload-progress-bar"></div>
+        </div>
+        <div id="modelUploadProgressMeta" class="upload-progress-meta">0/${total}</div>
+        <div id="modelUploadProgressFile" class="upload-progress-file"></div>
+      </div>
+    `;
+    document.body.appendChild(overlay);
+  }
+  overlay.hidden = false;
+  updateUploadProgressOverlay({
+    total,
+    completed: 0,
+    message: "正在准备上传...",
+    fileName: ""
+  });
+}
+
+function updateUploadProgressOverlay(options: {
+  total: number;
+  completed: number;
+  message: string;
+  fileName: string;
+}) {
+  const message = document.querySelector<HTMLElement>("#modelUploadProgressMessage");
+  const meta = document.querySelector<HTMLElement>("#modelUploadProgressMeta");
+  const file = document.querySelector<HTMLElement>("#modelUploadProgressFile");
+  const bar = document.querySelector<HTMLElement>("#modelUploadProgressBar");
+  const percent = options.total > 0 ? Math.round((options.completed / options.total) * 100) : 0;
+  if (message) message.textContent = options.message;
+  if (meta) meta.textContent = `${options.completed}/${options.total}`;
+  if (file) file.textContent = options.fileName;
+  if (bar) bar.style.width = `${percent}%`;
+}
+
+function hideUploadProgressOverlay() {
+  const overlay = document.querySelector<HTMLElement>("#modelUploadProgressOverlay");
+  if (overlay) overlay.hidden = true;
+}
+
 function setUploadDialogBusy(state: UploadFormState, busy: boolean) {
   const form = document.querySelector<HTMLFormElement>("#modelUploadPopupForm");
   if (!form) return;