优化批量上传模型提示

web/src/pages/app/dialogs.css

@@ -79,6 +79,22 @@
   word-break: break-all;
 }
 
+.upload-status {
+  padding: 8px 10px;
+  border: 1px solid #b9d7c1;
+  border-radius: 6px;
+  background: #eef8f1;
+  color: #27613a;
+  font-size: 13px;
+  line-height: 1.45;
+  word-break: break-all;
+}
+
+.upload-popup-form.is-uploading .drop-zone {
+  cursor: progress;
+  opacity: 0.72;
+}
+
 .upload-target-path {
   display: grid;
   grid-template-columns: 64px minmax(0, 1fr);

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

@@ -509,6 +509,7 @@ async function openUploadModelDialog() {
           <label><span>类型</span><input name="typeName" list="typeOptions" /></label>
           <label><span>型号</span><input name="model" /></label>
         </div>
+        <div id="modelUploadStatus" class="upload-status" aria-live="polite" hidden></div>
         ${dictionaryDatalistHtml()}
       </form>
     `,
@@ -527,22 +528,38 @@ async function openUploadModelDialog() {
       const properties = {
         model: String(form.get("model") ?? "")
       };
-      for (const file of state.files) {
+      let completedCount = 0;
-        await uploadModelToBackend({
+      setUploadDialogBusy(state, true);
-          file,
+      try {
-          name: state.files.length === 1 ? name ?? "" : modelNameFromFile(file.name),
+        for (const [index, file] of state.files.entries()) {
-          fileName: file.name,
+          updateUploadStatus(`正在上传 ${index + 1}/${state.files.length}：${file.name}`);
-          brandName,
+          await waitForUploadStatusPaint();
-          typeName,
+          await uploadModelToBackend({
-          operationTree: defaultOperationTree,
+            file,
-          properties
+            name: state.files.length === 1 ? name ?? "" : modelNameFromFile(file.name),
-        });
+            fileName: file.name,
+            brandName,
+            typeName,
+            operationTree: defaultOperationTree,
+            properties
+          });
+          completedCount += 1;
+          updateUploadStatus(`已完成 ${completedCount}/${state.files.length}`);
+        }
+      } catch (error) {
+        updateUploadStatus(`上传失败，已完成 ${completedCount}/${state.files.length}，请处理后重试。`);
+        throw error;
+      } finally {
+        if (completedCount < state.files.length) {
+          setUploadDialogBusy(state, false);
+        }
       }
       return true;
     }
   });
 
   if (result) {
+    notify("模型上传完成");
     invalidateDictionaries();
     await reloadFoldersAndModels();
   }
@@ -674,6 +691,28 @@ function bindUploadDialogEvents(state: UploadFormState) {
   });
 }
 
+function updateUploadStatus(message: string) {
+  const status = document.querySelector<HTMLElement>("#modelUploadStatus");
+  if (!status) return;
+  status.hidden = false;
+  status.textContent = message;
+}
+
+function waitForUploadStatusPaint() {
+  return new Promise<void>((resolve) => {
+    window.requestAnimationFrame(() => window.setTimeout(resolve, 0));
+  });
+}
+
+function setUploadDialogBusy(state: UploadFormState, busy: boolean) {
+  const form = document.querySelector<HTMLFormElement>("#modelUploadPopupForm");
+  if (!form) return;
+  form.classList.toggle("is-uploading", busy);
+  form.querySelectorAll<HTMLInputElement>("input").forEach((input) => {
+    input.disabled = busy || (input.id === "modelUploadName" && state.files.length > 1);
+  });
+}
+
 function bindProcessUploadDialogEvents(state: UploadFormState) {
   // const dropZone = document.querySelector<HTMLDivElement>("#processModelDropZone")!;
   // const fileInput = document.querySelector<HTMLInputElement>("#processModelUploadFile")!;