fix: react suspense

src/app/detail/page.tsx

@@ -2,7 +2,7 @@
 
 import Image from 'next/image';
 import { useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 
 import type { PlayRecord } from '@/lib/db.client';
 import { generateStorageKey, getAllPlayRecords } from '@/lib/db.client';
@@ -10,7 +10,7 @@ import { VideoDetail } from '@/lib/video';
 
 import PageLayout from '@/components/PageLayout';
 
-export default function DetailPage() {
+function DetailPageClient() {
   const searchParams = useSearchParams();
   const [detail, setDetail] = useState<VideoDetail | null>(null);
   const [loading, setLoading] = useState(true);
@@ -269,3 +269,11 @@ export default function DetailPage() {
     </PageLayout>
   );
 }
+
+export default function DetailPage() {
+  return (
+    <Suspense>
+      <DetailPageClient />
+    </Suspense>
+  );
+}

src/app/douban/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useSearchParams } from 'next/navigation';
+import { Suspense } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
 import DemoCard from '@/components/DemoCard';
@@ -20,7 +21,7 @@ interface DoubanResponse {
   list: DoubanItem[];
 }
 
-export default function DoubanPage() {
+function DoubanPageClient() {
   const searchParams = useSearchParams();
   const [doubanData, setDoubanData] = useState<DoubanItem[]>([]);
   const [loading, setLoading] = useState(true);
@@ -248,3 +249,11 @@ export default function DoubanPage() {
     </PageLayout>
   );
 }
+
+export default function DoubanPage() {
+  return (
+    <Suspense>
+      <DoubanPageClient />
+    </Suspense>
+  );
+}

src/app/page.tsx

@@ -9,7 +9,7 @@ import {
   Tv,
   VenetianMask,
 } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 
 import CapsuleSwitch from '@/components/CapsuleSwitch';
 import CollectionCard from '@/components/CollectionCard';
@@ -52,7 +52,7 @@ const collections = [
   { icon: VenetianMask, title: '日漫', href: '/douban?type=tv&tag=日本动画' },
 ];
 
-export default function Home() {
+function HomeClient() {
   const [activeTab, setActiveTab] = useState('home');
   const [hotMovies, setHotMovies] = useState<DoubanItem[]>([]);
   const [hotTvShows, setHotTvShows] = useState<DoubanItem[]>([]);
@@ -177,3 +177,11 @@ export default function Home() {
     </PageLayout>
   );
 }
+
+export default function Home() {
+  return (
+    <Suspense>
+      <HomeClient />
+    </Suspense>
+  );
+}

src/app/play/page.tsx

@@ -3,6 +3,7 @@
 'use client';
 
 import { useSearchParams } from 'next/navigation';
+import { Suspense } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import React from 'react';
 
@@ -35,7 +36,7 @@ interface SearchResult {
   source_name: string;
 }
 
-export default function PlayPage() {
+function PlayPageClient() {
   const searchParams = useSearchParams();
   const artRef = useRef<HTMLDivElement>(null);
   const artPlayerRef = useRef<any>(null);
@@ -1344,3 +1345,11 @@ export default function PlayPage() {
     </div>
   );
 }
+
+export default function PlayPage() {
+  return (
+    <Suspense>
+      <PlayPageClient />
+    </Suspense>
+  );
+}

src/app/search/page.tsx

@@ -2,25 +2,26 @@
 
 import { Search } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { Suspense } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
 import PageLayout from '@/components/PageLayout';
 import VideoCard from '@/components/VideoCard';
 
-// 模拟搜索历史数据
+function SearchPageClient() {
-const mockSearchHistory = ['流浪地球', '三体', '狂飙', '满江红'];
+  // 模拟搜索历史数据
+  const mockSearchHistory = ['流浪地球', '三体', '狂飙', '满江红'];
 
-// 定义搜索结果类型
+  // 定义搜索结果类型
-type SearchResult = {
+  type SearchResult = {
-  id: string;
+    id: string;
-  title: string;
+    title: string;
-  poster: string;
+    poster: string;
-  source: string;
+    source: string;
-  source_name: string;
+    source_name: string;
-  episodes?: number;
+    episodes?: number;
-};
+  };
 
-export default function SearchPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [searchQuery, setSearchQuery] = useState('');
@@ -140,3 +141,11 @@ export default function SearchPage() {
     </PageLayout>
   );
 }
+
+export default function SearchPage() {
+  return (
+    <Suspense>
+      <SearchPageClient />
+    </Suspense>
+  );
+}