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

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" />
-                  <span>透明背景截图</span>
-                </label>
-              ` : ""}
-              <button id="previewImportSceneBtn" class="primary-btn" type="button">导入场景</button>
                 <label class="preview-switch">
                   <input id="previewUseBasePoint" type="checkbox" />
-                <span>启用基点导入</span>
+                  <span>启用基点</span>
                 </label>
+              </div>
+            
               <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,7 +485,14 @@ 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",  () => {
+    screenshotModel(modelId, onThumbnailSaved).catch((error) => {
+
+    })
+  });
+}
+
+async function screenshotModel(modelId: number, onThumbnailSaved?: () => Promise<void> | void) {
   try {
     if (!runtime) {
       throw new Error("模型还未加载完成");
@@ -490,7 +501,7 @@ function bindThumbnailCapture(modelId: number, onThumbnailSaved?: () => Promise<
     if (!renderer || !scene || !camera || !controls) {
       throw new Error("模型还未加载完成");
     }
-      const transparent = document.querySelector<HTMLInputElement>("#previewTransparentThumb")?.checked ?? false;
+    const transparent = true; // document.querySelector<HTMLInputElement>("#previewTransparentThumb")?.checked ?? false;
     controls.update();
     const oldBackground = scene.background;
     const oldClearAlpha = renderer.getClearAlpha();
@@ -514,7 +525,6 @@ function bindThumbnailCapture(modelId: number, onThumbnailSaved?: () => Promise<
   } catch (error) {
     notifyError(error);
   }
-  });
 }
 
 function getSelectedOperation(operations: PreviewOperation[]) {