修改预览界面样式和按钮位置

web/src/pages/app/dialogs.css

@@ -134,7 +134,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 10px;
+  padding: 0 10px;
   border-bottom: 1px solid #d8e0e8;
 }
 
@@ -150,7 +150,7 @@
   overscroll-behavior: contain;
   list-style: none;
   margin: 0;
-  padding: 8px;
+  padding: 5px 0;
 }
 
 .preview-model-meta {
@@ -211,6 +211,7 @@
 }
 
 .preview-process-status {
+  display: none;
   min-height: 44px;
   max-height: 78px;
   overflow: auto;

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

@@ -153,18 +153,14 @@ export function openModelPreview(
           </div>
           <div class="preview-scene-section">
             <div class="preview-scene-body">
-              ${canWrite ? `
+              <div style="display: flex; align-items: center; ">
-                <button id="previewCaptureThumbBtn" type="button">截缩略图</button>
+                <button id="previewImportSceneBtn" class="primary-btn" type="button">导入</button>
                 <label class="preview-switch">
-                  <input id="previewTransparentThumb" type="checkbox" />
+                  <input id="previewUseBasePoint" type="checkbox" />
-                  <span>透明背景截图</span>
+                  <span>启用基点</span>
                 </label>
-              ` : ""}
+              </div>
-              <button id="previewImportSceneBtn" class="primary-btn" type="button">导入场景</button>
+            
-              <label class="preview-switch">
-                <input id="previewUseBasePoint" type="checkbox" />
-                <span>启用基点导入</span>
-              </label>
               <div class="preview-basepoint-grid">
                 <label><span>X</span><input name="baseX" type="number" value="0" step="0.001" /></label>
                 <label><span>Y</span><input name="baseY" type="number" value="0" step="0.001" /></label>
@@ -184,6 +180,13 @@ export function openModelPreview(
       </div>
     `,
     actions: {
+      更新缩略图() {
+        if (canWrite) {
+          screenshotModel(model.id, onThumbnailSaved).catch((error) => {
+
+          })
+        }
+      },
       关闭() {
         disposePreview();
         w2popup.close();
@@ -192,7 +195,8 @@ export function openModelPreview(
   });
 
   popup.self
-    .on("open:after", () => {
+    .on("open:after", () => {popup
+      console.log(popup)
       bindProcessPlaceholder(operations);
       bindImportScene(model, operations, options.onImportScene);
       if (canWrite) bindThumbnailCapture(model.id, onThumbnailSaved);
@@ -481,42 +485,48 @@ function disposeMaterial(material: unknown) {
 }
 
 function bindThumbnailCapture(modelId: number, onThumbnailSaved?: () => Promise<void> | void) {
-  document.querySelector<HTMLButtonElement>("#previewCaptureThumbBtn")?.addEventListener("click", async () => {
+  document.querySelector<HTMLButtonElement>("#previewCaptureThumbBtn")?.addEventListener("click",  () => {
-    try {
+    screenshotModel(modelId, onThumbnailSaved).catch((error) => {
-      if (!runtime) {
+
-        throw new Error("模型还未加载完成");
+    })
-      }
-      const { renderer, scene, camera, controls } = runtime.context;
-      if (!renderer || !scene || !camera || !controls) {
-        throw new Error("模型还未加载完成");
-      }
-      const transparent = document.querySelector<HTMLInputElement>("#previewTransparentThumb")?.checked ?? false;
-      controls.update();
-      const oldBackground = scene.background;
-      const oldClearAlpha = renderer.getClearAlpha();
-      if (transparent) {
-        scene.background = null;
-        renderer.setClearColor(0x000000, 0);
-      }
-      renderer.render(scene, camera);
-      const thumbnail = renderer.domElement.toDataURL("image/png");
-      if (transparent) {
-        scene.background = oldBackground;
-        renderer.setClearAlpha(oldClearAlpha);
-        renderer.render(scene, camera);
-      }
-      await api(`/api/models/${modelId}/thumbnail`, {
-        method: "PUT",
-        body: JSON.stringify({ thumbnail })
-      });
-      await onThumbnailSaved?.();
-      notify("缩略图已保存");
-    } catch (error) {
-      notifyError(error);
-    }
   });
 }
 
+async function screenshotModel(modelId: number, onThumbnailSaved?: () => Promise<void> | void) {
+  try {
+    if (!runtime) {
+      throw new Error("模型还未加载完成");
+    }
+    const { renderer, scene, camera, controls } = runtime.context;
+    if (!renderer || !scene || !camera || !controls) {
+      throw new Error("模型还未加载完成");
+    }
+    const transparent = true; // document.querySelector<HTMLInputElement>("#previewTransparentThumb")?.checked ?? false;
+    controls.update();
+    const oldBackground = scene.background;
+    const oldClearAlpha = renderer.getClearAlpha();
+    if (transparent) {
+      scene.background = null;
+      renderer.setClearColor(0x000000, 0);
+    }
+    renderer.render(scene, camera);
+    const thumbnail = renderer.domElement.toDataURL("image/png");
+    if (transparent) {
+      scene.background = oldBackground;
+      renderer.setClearAlpha(oldClearAlpha);
+      renderer.render(scene, camera);
+    }
+    await api(`/api/models/${modelId}/thumbnail`, {
+      method: "PUT",
+      body: JSON.stringify({ thumbnail })
+    });
+    await onThumbnailSaved?.();
+    notify("缩略图已保存");
+  } catch (error) {
+    notifyError(error);
+  }
+}
+
 function getSelectedOperation(operations: PreviewOperation[]) {
   const selectedButton = document.querySelector<HTMLButtonElement>(".preview-process-tree li.is-active button");
   const index = Number(selectedButton?.dataset.processIndex ?? 0);