上传模型时自动生成预览图

web/src/pages/app/dialogs.css

@@ -64,6 +64,105 @@
   color: #405469;
 }
 
+.selected-file-summary {
+  display: block;
+  color: #1f6f8b;
+  font-weight: 600;
+}
+
+.selected-file-list {
+  display: block;
+  max-height: 58px;
+  overflow: auto;
+  color: #405469;
+  line-height: 1.45;
+  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-progress-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100000;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(15, 23, 42, 0.58);
+}
+
+.upload-progress-overlay[hidden] {
+  display: none;
+}
+
+.upload-progress-panel {
+  width: min(460px, 100%);
+  display: grid;
+  gap: 12px;
+  padding: 22px 24px;
+  border: 1px solid #dbe5ec;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24);
+}
+
+.upload-progress-title {
+  color: #1c2733;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.upload-progress-message {
+  color: #405469;
+  font-size: 14px;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.upload-progress-track {
+  height: 10px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #e8eef3;
+}
+
+.upload-progress-bar {
+  width: 0;
+  height: 100%;
+  border-radius: inherit;
+  background: #1f6f8b;
+  transition: width 180ms ease;
+}
+
+.upload-progress-meta {
+  color: #27613a;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.upload-progress-file {
+  max-height: 48px;
+  overflow: auto;
+  color: #647586;
+  font-size: 12px;
+  line-height: 1.4;
+  word-break: break-all;
+}
+
 .upload-target-path {
   display: grid;
   grid-template-columns: 64px minmax(0, 1fr);

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

@@ -7,9 +7,12 @@ import { downloadFileFromUrl } from "../../../utils/fileDownload";
 import { escapeHtml, modelNameFromFile } from "../../../utils/format";
 import { resolveStorageUrl } from "../../../config/runtime";
 import { appState } from "../appState";
+import { generateModelThumbnailFromFile } from "./thumbnail";
 
 type UploadFormState = {
   file: File | null;
+  files: File[];
+  thumbnailFailures: string[];
 };
 
 type UploadModelPayload = {
@@ -23,6 +26,10 @@ type UploadModelPayload = {
   properties?: Record<string, string>;
 };
 
+type UploadModelResponse = {
+  id: number;
+};
+
 const defaultOperationTree = JSON.stringify({ OperationTree: "[]" });
 const requestSceneModelMessageType = "DMT_MODEL_LIBRARY_REQUEST_SCENE_MODEL";
 const sceneModelMessageType = "DMT_MODEL_LIBRARY_SCENE_MODEL";
@@ -469,10 +476,11 @@ export async function uploadModelToBackend(payload: UploadModelPayload) {
     form.set(`prop.${key}`, value);
   }
 
-  await api("/api/models/upload", {
+  const result = await api<UploadModelResponse>("/api/models/upload", {
     method: "POST",
     body: form
   });
+  return result.id;
 }
 
 async function openUploadModelDialog() {
@@ -481,7 +489,7 @@ async function openUploadModelDialog() {
     return;
   }
 
-  const state: UploadFormState = { file: null };
+  const state: UploadFormState = { file: null, files: [], thumbnailFailures: [] };
   await loadDictionaries();
   const result = await formDialog<boolean>({
     title: "增加模型",
@@ -493,9 +501,9 @@ async function openUploadModelDialog() {
         <label>
           <span>模型文件</span>
           <div id="modelDropZone" class="drop-zone">
-            <input id="modelUploadFile" type="file" accept=".glb" />
+            <input id="modelUploadFile" type="file" accept=".glb" multiple />
             <strong>选择模型</strong>
-            <em>或拖拽 .glb 模型到这里</em>
+            <em>或拖拽一个或多个 .glb 模型到这里</em>
             <small id="selectedFileName">未选择文件</small>
           </div>
         </label>
@@ -508,35 +516,92 @@ 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>
     `,
     onOpen: () => bindUploadDialogEvents(state),
     onSubmit: async () => {
-      if (!state.file) {
+      if (state.files.length === 0) {
         throw new Error("请选择 .glb 模型文件");
       }
       const name = document.querySelector<HTMLInputElement>("#modelUploadName")?.value.trim();
-      if (!name) {
+      if (state.files.length === 1 && !name) {
         throw new Error("模型名称不能为空");
       }
       const form = new FormData(document.querySelector<HTMLFormElement>("#modelUploadPopupForm")!);
-      await uploadModelToBackend({
-        file: state.file,
-        name,
-        fileName: state.file.name,
-        brandName: String(form.get("brandName") ?? ""),
-        typeName: String(form.get("typeName") ?? ""),
-        operationTree: defaultOperationTree,
-        properties: {
-          model: String(form.get("model") ?? "")
+      const brandName = String(form.get("brandName") ?? "");
+      const typeName = String(form.get("typeName") ?? "");
+      const properties = {
+        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()) {
+          const uploadingMessage = `正在上传 ${index + 1}/${totalCount}：${file.name}`;
+          updateUploadStatus(uploadingMessage);
+          updateUploadProgressOverlay({
+            total: totalCount,
+            completed: completedCount,
+            message: uploadingMessage,
+            fileName: file.name
+          });
+          await waitForUploadStatusPaint();
+          const modelId = await uploadModelToBackend({
+            file,
+            name: state.files.length === 1 ? name ?? "" : modelNameFromFile(file.name),
+            fileName: file.name,
+            brandName,
+            typeName,
+            operationTree: defaultOperationTree,
+            properties
+          });
+          const thumbnailMessage = `正在生成预览图 ${index + 1}/${totalCount}：${file.name}`;
+          updateUploadStatus(thumbnailMessage);
+          updateUploadProgressOverlay({
+            total: totalCount,
+            completed: completedCount,
+            message: thumbnailMessage,
+            fileName: file.name
+          });
+          await waitForUploadStatusPaint();
+          try {
+            await generateAndSaveModelThumbnail(modelId, file);
+          } catch {
+            state.thumbnailFailures.push(file.name);
+          }
+          completedCount += 1;
+          const completedMessage = `已完成 ${completedCount}/${totalCount}`;
+          updateUploadStatus(completedMessage);
+          updateUploadProgressOverlay({
+            total: totalCount,
+            completed: completedCount,
+            message: completedMessage,
+            fileName: file.name
+          });
         }
-      });
+      } catch (error) {
+        updateUploadStatus(`上传失败，已完成 ${completedCount}/${totalCount}，请处理后重试。`);
+        throw error;
+      } finally {
+        hideUploadProgressOverlay();
+        if (completedCount < state.files.length) {
+          setUploadDialogBusy(state, false);
+        }
+      }
       return true;
     }
   });
 
   if (result) {
+    if (state.thumbnailFailures.length > 0) {
+      notify(`模型上传完成，${state.thumbnailFailures.length} 个预览图生成失败，可稍后在预览窗口手动更新。`);
+    } else {
+      notify("模型上传和预览图生成完成");
+    }
     invalidateDictionaries();
     await reloadFoldersAndModels();
   }
@@ -552,7 +617,7 @@ export async function openProcessModelUploadDialog(input?: {
     return;
   }
 
-  const state: UploadFormState = { file: input?.file ?? null };
+  const state: UploadFormState = { file: input?.file ?? null, files: input?.file ? [input.file] : [], thumbnailFailures: [] };
   await loadDictionaries();
   const initialName = input?.modelName || (input?.file ? modelNameFromFile(input.file.name) : "");
   const result = await formDialog<boolean>({
@@ -578,7 +643,7 @@ export async function openProcessModelUploadDialog(input?: {
       }
       const form = new FormData(document.querySelector<HTMLFormElement>("#processModelUploadPopupForm")!);
       const name = String(form.get("name") ?? "").trim();
-      await uploadModelToBackend({
+      const modelId = await uploadModelToBackend({
         file: state.file,
         name,
         fileName: state.file.name,
@@ -589,6 +654,11 @@ export async function openProcessModelUploadDialog(input?: {
           model: String(form.get("model") ?? "")
         }
       });
+      try {
+        await generateAndSaveModelThumbnail(modelId, state.file);
+      } catch {
+        notify("模型已上传，预览图生成失败，可稍后在预览窗口手动更新。");
+      }
       return true;
     }
   });
@@ -605,21 +675,48 @@ function bindUploadDialogEvents(state: UploadFormState) {
   const nameInput = document.querySelector<HTMLInputElement>("#modelUploadName")!;
   const selectedFileName = document.querySelector<HTMLElement>("#selectedFileName")!;
 
-  const selectFile = (file: File) => {
-    if (!file.name.toLowerCase().endsWith(".glb")) {
+  const renderSelectedFiles = () => {
+    if (state.files.length === 0) {
+      selectedFileName.textContent = "未选择文件";
+      nameInput.disabled = false;
+      nameInput.value = "";
+      nameInput.placeholder = "选择文件后自动填入";
+      return;
+    }
+
+    if (state.files.length === 1) {
+      const [file] = state.files;
+      selectedFileName.textContent = file.name;
+      nameInput.disabled = false;
+      nameInput.value = modelNameFromFile(file.name);
+      nameInput.placeholder = "选择文件后自动填入";
+      return;
+    }
+
+    selectedFileName.innerHTML = `
+      <span class="selected-file-summary">已选择 ${state.files.length} 个模型，名称按文件名自动生成</span>
+      <span class="selected-file-list">${state.files.map((file) => escapeHtml(file.name)).join("<br>")}</span>
+    `;
+    nameInput.disabled = true;
+    nameInput.value = `${state.files.length} 个模型按文件名自动命名`;
+    nameInput.placeholder = "";
+  };
+
+  const selectFiles = (files: FileList | File[]) => {
+    const selectedFiles = Array.from(files);
+    if (selectedFiles.length === 0) return;
+    const invalidFiles = selectedFiles.filter((file) => !file.name.toLowerCase().endsWith(".glb"));
+    if (invalidFiles.length > 0) {
       notify("当前阶段只允许上传 .glb 模型");
       return;
     }
-    state.file = file;
-    selectedFileName.textContent = file.name;
-    if (!nameInput.value.trim()) {
-      nameInput.value = modelNameFromFile(file.name);
-    }
+    state.files = selectedFiles;
+    state.file = selectedFiles[0] ?? null;
+    renderSelectedFiles();
   };
 
   fileInput.addEventListener("change", () => {
-    const file = fileInput.files?.[0];
-    if (file) selectFile(file);
+    if (fileInput.files) selectFiles(fileInput.files);
   });
 
   dropZone.addEventListener("click", (event) => {
@@ -636,8 +733,90 @@ function bindUploadDialogEvents(state: UploadFormState) {
   dropZone.addEventListener("drop", (event) => {
     event.preventDefault();
     dropZone.classList.remove("is-dragover");
-    const file = event.dataTransfer?.files?.[0];
-    if (file) selectFile(file);
+    const files = event.dataTransfer?.files;
+    if (files) selectFiles(files);
+  });
+}
+
+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 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;
+}
+
+async function generateAndSaveModelThumbnail(modelId: number, file: File) {
+  const thumbnail = await generateModelThumbnailFromFile(file);
+  await api(`/api/models/${modelId}/thumbnail`, {
+    method: "PUT",
+    body: JSON.stringify({ thumbnail })
+  });
+}
+
+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);
   });
 }
 

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

@@ -0,0 +1,96 @@
+import type { Material, Object3D, PerspectiveCamera, Texture } from "three";
+import type { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+
+const THUMBNAIL_WIDTH = 512;
+const THUMBNAIL_HEIGHT = 384;
+
+type ThreeModule = typeof import("three");
+type LoadedGltf = Awaited<ReturnType<GLTFLoader["loadAsync"]>>;
+type ParseableGltfLoader = GLTFLoader & {
+  parseAsync(data: ArrayBuffer | string, path: string): Promise<LoadedGltf>;
+};
+
+export async function generateModelThumbnailFromFile(file: File) {
+  const [THREE, { GLTFLoader }] = await Promise.all([
+    import("three"),
+    import("three/examples/jsm/loaders/GLTFLoader.js")
+  ]);
+
+  THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(45, THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT, 0.01, 1000);
+  camera.up.set(0, 0, 1);
+
+  const renderer = new THREE.WebGLRenderer({
+    antialias: true,
+    alpha: true,
+    preserveDrawingBuffer: true
+  });
+  renderer.setPixelRatio(1);
+  renderer.setSize(THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT, false);
+  renderer.setClearColor(0x000000, 0);
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+
+  const ambientLight = new THREE.HemisphereLight(0xffffff, 0x9aa8b5, 2.2);
+  const keyLight = new THREE.DirectionalLight(0xffffff, 2.8);
+  keyLight.position.set(3, -4, 5);
+  scene.add(ambientLight, keyLight);
+
+  let object: Object3D | null = null;
+  try {
+    const buffer = await file.arrayBuffer();
+    const gltf = await (new GLTFLoader() as ParseableGltfLoader).parseAsync(buffer, "");
+    if (!gltf.scene) {
+      throw new Error("模型文件中未找到可渲染场景");
+    }
+    object = gltf.scene;
+    scene.add(object);
+    fitCameraToObject(THREE, camera, object);
+    renderer.render(scene, camera);
+    return renderer.domElement.toDataURL("image/png");
+  } finally {
+    if (object) disposeObject3D(object);
+    renderer.dispose();
+    renderer.forceContextLoss();
+    renderer.domElement.remove();
+  }
+}
+
+function fitCameraToObject(THREE: ThreeModule, camera: PerspectiveCamera, object: Object3D) {
+  const box = new THREE.Box3().setFromObject(object);
+  const size = box.getSize(new THREE.Vector3());
+  const center = box.getCenter(new THREE.Vector3());
+  const maxSize = Math.max(size.x, size.y, size.z) || 1;
+  const distance = maxSize / (2 * Math.tan((camera.fov * Math.PI) / 360));
+
+  camera.position.copy(center).add(new THREE.Vector3(distance * 0.9, -distance * 1.15, distance * 0.65));
+  camera.near = Math.max(distance / 100, 0.01);
+  camera.far = distance * 100;
+  camera.lookAt(center);
+  camera.updateProjectionMatrix();
+}
+
+function disposeObject3D(root: Object3D) {
+  root.traverse((object) => {
+    const maybeMesh = object as Object3D & {
+      geometry?: { dispose?: () => void };
+      material?: Material | Material[];
+    };
+    maybeMesh.geometry?.dispose?.();
+    const materials = Array.isArray(maybeMesh.material) ? maybeMesh.material : maybeMesh.material ? [maybeMesh.material] : [];
+    for (const material of materials) {
+      disposeMaterial(material);
+    }
+  });
+}
+
+function disposeMaterial(material: Material) {
+  const values = Object.values(material as Material & Record<string, unknown>);
+  for (const value of values) {
+    if (value && typeof value === "object" && "isTexture" in value) {
+      (value as Texture).dispose();
+    }
+  }
+  material.dispose();
+}