feat: 调整3D生成前端界面与预览交互

components/canvas/model3d/Model3DViewer.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import React, { Suspense, useEffect, useMemo } from "react";
-import { Canvas } from "@react-three/fiber";
 import { Environment, Grid, OrbitControls, useGLTF } from "@react-three/drei";
-import { AlertCircle, Box, ExternalLink, Loader2 } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Canvas } from "@react-three/fiber";
+import { AlertCircle, Box, ExternalLink } from "lucide-react";
+import React, { Suspense, useEffect, useMemo } from "react";
 import type { Mesh, Object3D } from "three";
+import { Button } from "@/components/ui/button";
 
 export interface Model3DLayer {
   id: string;
@@ -99,7 +99,10 @@ function collectSceneMeta(scene: Object3D): {
     meshIndex += 1;
     const indexCount = geometry.index?.count || 0;
     const positionCount = geometry.attributes.position?.count || 0;
-    const meshTriangles = indexCount > 0 ? Math.floor(indexCount / 3) : Math.floor(positionCount / 3);
+    const meshTriangles =
+      indexCount > 0
+        ? Math.floor(indexCount / 3)
+        : Math.floor(positionCount / 3);
     const meshVertices = positionCount;
 
     triangles += meshTriangles;
@@ -157,7 +160,9 @@ function ModelScene({
 
   useEffect(() => {
     for (const { mesh } of meta.meshRefs) {
-      const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+      const materials = Array.isArray(mesh.material)
+        ? mesh.material
+        : [mesh.material];
       for (const material of materials) {
         if (!material) continue;
         if ("wireframe" in material) {
@@ -181,14 +186,16 @@ function EmptyState({ previewImageUrl }: { previewImageUrl?: string | null }) {
     <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-muted/20 p-4">
       {previewImageUrl ? (
         <img
-          src={previewImageUrl}
           alt="3D 预览"
           className="max-h-[65%] max-w-full rounded-lg border object-contain"
+          src={previewImageUrl}
         />
       ) : (
         <Box className="h-14 w-14 text-muted-foreground/60" />
       )}
-      <p className="text-sm text-muted-foreground">生成完成后可在此区域预览 3D 资产</p>
+      <p className="text-muted-foreground text-sm">
+        生成完成后可在此区域预览 3D 资产
+      </p>
     </div>
   );
 }
@@ -209,11 +216,11 @@ export function Model3DViewer({
     return (
       <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-muted/20 p-4">
         <AlertCircle className="h-8 w-8 text-amber-500" />
-        <p className="text-sm text-muted-foreground">
+        <p className="text-muted-foreground text-sm">
           当前文件格式不支持内嵌预览，请在新窗口打开
         </p>
-        <Button asChild variant="secondary" className="gap-2">
-          <a href={modelUrl} target="_blank" rel="noreferrer">
+        <Button asChild className="gap-2" variant="secondary">
+          <a href={modelUrl} rel="noreferrer" target="_blank">
             <ExternalLink className="h-4 w-4" />
             打开3D文件
           </a>
@@ -227,9 +234,11 @@ export function Model3DViewer({
       fallback={
         <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-muted/20 p-4">
           <AlertCircle className="h-8 w-8 text-destructive" />
-          <p className="text-sm text-muted-foreground">3D 预览加载失败，请尝试在新窗口打开</p>
-          <Button asChild variant="secondary" className="gap-2">
-            <a href={modelUrl} target="_blank" rel="noreferrer">
+          <p className="text-muted-foreground text-sm">
+            3D 预览加载失败，请尝试在新窗口打开
+          </p>
+          <Button asChild className="gap-2" variant="secondary">
+            <a href={modelUrl} rel="noreferrer" target="_blank">
               <ExternalLink className="h-4 w-4" />
               打开3D文件
             </a>
@@ -239,17 +248,20 @@ export function Model3DViewer({
     >
       <Canvas camera={{ position: [2, 1.5, 2], fov: 45 }}>
         <ambientLight intensity={0.5 * settings.lightIntensity} />
-        <directionalLight position={[5, 8, 5]} intensity={1.2 * settings.lightIntensity} />
+        <directionalLight
+          intensity={1.2 * settings.lightIntensity}
+          position={[5, 8, 5]}
+        />
         {settings.showGrid ? (
           <Grid
-            position={[0, -0.01, 0]}
             args={[12, 12]}
             cellColor="#8c8c8c"
-            sectionColor="#525252"
             cellSize={0.5}
-            sectionSize={2}
             fadeDistance={40}
             fadeStrength={1.5}
+            position={[0, -0.01, 0]}
+            sectionColor="#525252"
+            sectionSize={2}
           />
         ) : null}
         <Suspense
@@ -261,23 +273,21 @@ export function Model3DViewer({
           }
         >
           <ModelScene
-            url={modelUrl}
-            settings={settings}
             layerVisibility={layerVisibility}
             onLayersChange={onLayersChange}
             onStatsChange={onStatsChange}
+            settings={settings}
+            url={modelUrl}
           />
           <Environment preset={settings.envPreset} />
         </Suspense>
-        <OrbitControls enablePan enableZoom enableRotate autoRotate={settings.autoRotate} />
+        <OrbitControls
+          autoRotate={settings.autoRotate}
+          enablePan
+          enableRotate
+          enableZoom
+        />
       </Canvas>
-      <div className="pointer-events-none absolute left-3 top-3 rounded-md bg-background/80 px-2 py-1 text-xs text-muted-foreground">
-        <span className="inline-flex items-center gap-1">
-          <Loader2 className="h-3 w-3" />
-          拖拽旋转 / 滚轮缩放
-        </span>
-      </div>
     </ViewerErrorBoundary>
   );
 }
-