feat: save play record using localstorage

src/app/page.tsx

@@ -13,13 +13,10 @@ import { useEffect, useState } from 'react';
 
 import CapsuleSwitch from '@/components/CapsuleSwitch';
 import CollectionCard from '@/components/CollectionCard';
+import ContinueWatching from '@/components/ContinueWatching';
 import DemoCard from '@/components/DemoCard';
 import PageLayout from '@/components/layout/PageLayout';
 import ScrollableRow from '@/components/ScrollableRow';
-import VideoCard from '@/components/VideoCard';
-
-const defaultPoster =
-  'https://vip.dytt-img.com/upload/vod/20250326-1/9857e2e8581f231e24747ee32e633a3b.jpg';
 
 interface DoubanItem {
   title: string;
@@ -32,76 +29,6 @@ interface DoubanResponse {
   list: DoubanItem[];
 }
 
-// 模拟数据
-const mockData = {
-  recentMovies: [
-    {
-      id: '1',
-      title: '流浪地球2',
-      poster: defaultPoster,
-      source: 'dyttzy',
-      source_name: '电影天堂',
-    },
-    {
-      id: '2',
-      title: '满江红',
-      poster: defaultPoster,
-      source: 'dyttzy',
-      source_name: '电影天堂',
-    },
-  ],
-  recentTvShows: [
-    {
-      id: '3',
-      title: '三体',
-      poster: defaultPoster,
-      source: 'dyttzy',
-      source_name: '电影天堂',
-      episodes: 30,
-    },
-    {
-      id: '4',
-      title: '狂飙',
-      poster: defaultPoster,
-      episodes: 39,
-      source: 'dyttzy',
-      source_name: '电影天堂',
-    },
-    {
-      id: '332',
-      title: '三体',
-      poster: defaultPoster,
-      source: 'dyttzy',
-      source_name: '电影天堂',
-      episodes: 30,
-    },
-    {
-      id: '4231',
-      title: '狂飙',
-      poster: defaultPoster,
-      episodes: 39,
-      source: 'dyttzy',
-      source_name: '电影天堂',
-    },
-    {
-      id: '3342',
-      title: '三体',
-      poster: defaultPoster,
-      source: 'dyttzy',
-      source_name: '电影天堂',
-      episodes: 30,
-    },
-    {
-      id: '8',
-      title: '狂飙',
-      poster: defaultPoster,
-      episodes: 39,
-      source: 'dyttzy',
-      source_name: '电影天堂',
-    },
-  ],
-};
-
 // 合集数据
 const collections = [
   {
@@ -194,20 +121,7 @@ export default function Home() {
           </section>
 
           {/* 继续观看 */}
-          <section className='mb-8'>
-            <h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
-              继续观看
-            </h2>
-            <ScrollableRow>
-              {[...mockData.recentMovies, ...mockData.recentTvShows].map(
-                (item) => (
-                  <div key={item.id} className='min-w-[180px] w-44'>
-                    <VideoCard {...item} progress={Math.random() * 100} />
-                  </div>
-                )
-              )}
-            </ScrollableRow>
-          </section>
+          <ContinueWatching />
 
           {/* 热门电影 */}
           <section className='mb-8'>