处理控制台报错

components/parallax.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
+import dynamic from 'next/dynamic';
 
 // 导入图片资源
 import mono from '@/assets/3dr_mono.png';
@@ -56,7 +57,8 @@ const Parallax = () => {
     };
     
     if (pageX) {
-      pageX.addEventListener('mousemove', parallax as EventListener, false);
+      // Add the passive flag to the event listener to improve scrolling performance
+      pageX.addEventListener('mousemove', parallax as EventListener, { passive: true });
       
       return () => {
         pageX.removeEventListener('mousemove', parallax as EventListener);
@@ -226,4 +228,5 @@ const CardTitle = styled.p`
   color: #fff;
 `;
 
-export default Parallax;
+// Export with noSSR to prevent server-side rendering issues
+export default dynamic(() => Promise.resolve(Parallax), { ssr: false });

components/vanta-halo-background.tsx

@@ -3,8 +3,8 @@
 
 import React, { useRef, useEffect, memo } from 'react'
 import dynamic from 'next/dynamic'
-// Import THREE only once and use it consistently
-import * as THREE from 'three'
+// Remove direct import of THREE to avoid SSR issues
+// import * as THREE from 'three'
 
 interface VantaHaloBackgroundProps {
   onLoaded?: () => void;
@@ -14,6 +14,7 @@ interface VantaHaloBackgroundProps {
 declare global {
   interface Window {
     VANTA: any;
+    THREE: any; // Add THREE to window type
   }
 }
 
@@ -68,7 +69,7 @@ const VantaHaloBackground = memo(({ onLoaded }: VantaHaloBackgroundProps) => {
             if (window.VANTA && window.VANTA.HALO) {
               effectInstance.current = window.VANTA.HALO({
                 el: vantaRef.current,
-                THREE, // Pass the imported THREE instance
+                THREE: window.THREE, // Use THREE from window instead of import
                 mouseControls: true,
                 touchControls: true,
                 gyroControls: false,
@@ -136,4 +137,5 @@ const VantaHaloBackground = memo(({ onLoaded }: VantaHaloBackgroundProps) => {
 
 VantaHaloBackground.displayName = 'VantaHaloBackground'
 
-export default VantaHaloBackground
+// Export with noSSR to prevent server-side rendering
+export default dynamic(() => Promise.resolve(VantaHaloBackground), { ssr: false })

components/video-grid-layout.tsx

@@ -1,6 +1,9 @@
+'use client'; // Add this to ensure it's a client component
+
 import React, { useState } from 'react';
 import { Edit2, Trash2, Play } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import dynamic from 'next/dynamic';
 
 interface VideoGridLayoutProps {
   videos: {
@@ -13,7 +16,7 @@ interface VideoGridLayoutProps {
   onDelete?: (id: string) => void;
 }
 
-export function VideoGridLayout({ videos, onEdit, onDelete }: VideoGridLayoutProps) {
+function VideoGridLayoutComponent({ videos, onEdit, onDelete }: VideoGridLayoutProps) {
   const [hoveredId, setHoveredId] = useState<string | null>(null);
   const [isPlaying, setIsPlaying] = useState<{ [key: string]: boolean }>({});
 
@@ -58,6 +61,7 @@ export function VideoGridLayout({ videos, onEdit, onDelete }: VideoGridLayoutPro
             <video
               id={`video-${video.id}`}
               src={video.url}
+              suppressHydrationWarning
               className="w-full h-full object-cover"
               loop
               muted
@@ -112,4 +116,9 @@ export function VideoGridLayout({ videos, onEdit, onDelete }: VideoGridLayoutPro
       ))}
     </div>
   );
-} 
+}
+
+// Export as a client-only component to prevent hydration issues
+export const VideoGridLayout = dynamic(() => Promise.resolve(VideoGridLayoutComponent), {
+  ssr: false
+}); 

components/video-screen-layout.tsx

@@ -1,6 +1,9 @@
+'use client'; // Add this to ensure it's a client component
+
 import React, { useState, useRef, useEffect } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import dynamic from 'next/dynamic';
 
 interface VideoScreenLayoutProps {
   videos: {
@@ -10,7 +13,7 @@ interface VideoScreenLayoutProps {
   }[];
 }
 
-export function VideoScreenLayout({ videos }: VideoScreenLayoutProps) {
+function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isAnimating, setIsAnimating] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -74,9 +77,10 @@ export function VideoScreenLayout({ videos }: VideoScreenLayoutProps) {
             style={getPanelStyle(index)}
           >
             <div className="relative w-full h-full overflow-hidden rounded-lg">
-              {/* 视频 */}
+              {/* 视频 - Add suppressHydrationWarning to prevent className mismatch warnings */}
               <video
                 src={video.url}
+                suppressHydrationWarning
                 className="w-full h-full object-cover"
                 autoPlay
                 loop
@@ -122,4 +126,9 @@ export function VideoScreenLayout({ videos }: VideoScreenLayoutProps) {
       </Button>
     </div>
   );
-} 
+}
+
+// Export as a client-only component to prevent hydration issues
+export const VideoScreenLayout = dynamic(() => Promise.resolve(VideoScreenLayoutComponent), {
+  ssr: false
+});