fix img dark

frontend/src/components/ModelViewer.jsx

@@ -7,6 +7,42 @@ import { Spin } from 'antd';
 import JSZip from 'jszip';
 import * as THREE from 'three';
 
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("3D Model Viewer Error:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ 
+          display: 'flex', 
+          alignItems: 'center', 
+          justifyContent: 'center', 
+          height: '100%', 
+          color: '#888',
+          padding: 20,
+          textAlign: 'center',
+          fontSize: '14px'
+        }}>
+          3D 模型加载失败
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
 const Model = ({ objPath, mtlPath, scale = 1 }) => {
   // If mtlPath is provided, load materials first
   const materials = mtlPath ? useLoader(MTLLoader, mtlPath) : null;
@@ -158,21 +194,23 @@ const ModelViewer = ({ objPath, mtlPath, scale = 1, autoRotate = true }) => {
 
   return (
     <div style={{ position: 'relative', width: '100%', height: '100%' }}>
-      <LoadingOverlay />
+      <ErrorBoundary>
-      <Canvas shadows dpr={[1, 2]} camera={{ fov: 45, position: [0, 0, 5] }} style={{ height: '100%', width: '100%' }}>
+        <LoadingOverlay />
-        <ambientLight intensity={0.7} />
+        <Canvas shadows dpr={[1, 2]} camera={{ fov: 45, position: [0, 0, 5] }} style={{ height: '100%', width: '100%' }}>
-        <pointLight position={[10, 10, 10]} intensity={1} />
+          <ambientLight intensity={0.7} />
-        <spotLight position={[-10, 10, 10]} angle={0.15} penumbra={1} intensity={1} />
+          <pointLight position={[10, 10, 10]} intensity={1} />
-        
+          <spotLight position={[-10, 10, 10]} angle={0.15} penumbra={1} intensity={1} />
-        <Suspense fallback={null}>
+          
-          <Stage environment="city" intensity={0.6} adjustCamera={true}>
+          <Suspense fallback={null}>
-            <Model objPath={paths.obj} mtlPath={paths.mtl} scale={scale} />
+            <Stage environment="city" intensity={0.6} adjustCamera={true}>
-          </Stage>
+              <Model objPath={paths.obj} mtlPath={paths.mtl} scale={scale} />
-          <Environment preset="city" />
+            </Stage>
-          <ContactShadows position={[0, -0.8, 0]} opacity={0.4} scale={10} blur={2} far={0.8} />
+            <Environment preset="city" />
-        </Suspense>
+            <ContactShadows position={[0, -0.8, 0]} opacity={0.4} scale={10} blur={2} far={0.8} />
-        <OrbitControls autoRotate={autoRotate} makeDefault />
+          </Suspense>
-      </Canvas>
+          <OrbitControls autoRotate={autoRotate} makeDefault />
+        </Canvas>
+      </ErrorBoundary>
     </div>
   );
 };

frontend/src/pages/ProductDetail.jsx

@@ -82,20 +82,6 @@ const ProductDetail = () => {
       return { obj: p.model_3d_url };
     }
 
-    // 如果有静态图，且没有特定的 3D 模型 URL，则优先显示静态图，不进入下方的通用 3D 模板匹配
-    if (p.static_image_url) {
-      return null;
-    }
-
-    const text = (p.name + p.description).toLowerCase();
-    
-    if (text.includes('mini')) {
-      return { obj: '/3dmimi/3D_PCB_V3-mini.obj', mtl: '/3dmimi/3D_PCB_V3-mini.mtl' };
-    } else if (text.includes('v2')) {
-      return { obj: '/3dV2/xiaoliangV2.obj', mtl: '/3dV2/xiaoliangV2.mtl' };
-    } else if (text.includes('vision') || text.includes('视觉') || text.includes('camera')) {
-      return { obj: '/3dmodo/xiaoliang1.obj', mtl: '/3dmodo/xiaoliang1.mtl' };
-    }
     return null;
   };
 
@@ -207,8 +193,15 @@ const ProductDetail = () => {
         )}
         
         {product.display_detail_image ? (
-            <div style={{ margin: '60px 0', width: '100%', overflow: 'hidden', borderRadius: 12 }}>
+            <div style={{ 
-                <img src={product.display_detail_image} alt="产品详情" style={{ width: '100%', display: 'block' }} />
+                margin: '60px auto', 
+                maxWidth: '900px', 
+                width: '100%',
+                overflow: 'hidden', 
+                borderRadius: 12,
+                boxShadow: '0 10px 40px rgba(0,0,0,0.5)'
+            }}>
+                <img src={product.display_detail_image} alt="产品详情" style={{ width: '100%', display: 'block', height: 'auto' }} />
             </div>
         ) : (
             <div style={{ margin: '60px 0', height: 800, background: '#111', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#333', fontSize: 24, border: '1px dashed #333' }}>

frontend/src/pages/ServiceDetail.jsx

@@ -132,16 +132,18 @@ const ServiceDetail = () => {
                 {service.display_detail_image ? (
                     <div style={{ 
                         width: '100%', 
+                        maxWidth: '900px',
+                        margin: '0 auto',
                         background: '#111', 
                         borderRadius: 12, 
                         overflow: 'hidden',
-                        boxShadow: `0 0 30px ${service.color}22`,
+                        boxShadow: `0 10px 40px ${service.color}22`,
                         border: `1px solid ${service.color}33`
                     }}>
                         <img 
                             src={service.display_detail_image} 
                             alt={service.title} 
-                            style={{ width: '100%', display: 'block' }} 
+                            style={{ width: '100%', display: 'block', height: 'auto' }} 
                         />
                     </div>
                 ) : (