diff --git a/src/components/ContinueWatching.tsx b/src/components/ContinueWatching.tsx
new file mode 100644
index 0000000..09f4e85
--- /dev/null
+++ b/src/components/ContinueWatching.tsx
@@ -0,0 +1,110 @@
+/* eslint-disable no-console */
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import type { PlayRecord } from '@/lib/db.client';
+import { getAllPlayRecords } from '@/lib/db.client';
+
+import ScrollableRow from '@/components/ScrollableRow';
+import VideoCard from '@/components/VideoCard';
+
+interface ContinueWatchingProps {
+ className?: string;
+}
+
+export default function ContinueWatching({ className }: ContinueWatchingProps) {
+ const [playRecords, setPlayRecords] = useState<
+ (PlayRecord & { key: string })[]
+ >([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const fetchPlayRecords = async () => {
+ try {
+ setLoading(true);
+
+ // 从 localStorage 获取所有播放记录
+ const allRecords = await getAllPlayRecords();
+
+ // 将记录转换为数组并根据 save_time 由近到远排序
+ const recordsArray = Object.entries(allRecords).map(
+ ([key, record]) => ({
+ ...record,
+ key,
+ })
+ );
+
+ // 按 save_time 降序排序（最新的在前面）
+ const sortedRecords = recordsArray.sort(
+ (a, b) => b.save_time - a.save_time
+ );
+
+ setPlayRecords(sortedRecords);
+ } catch (error) {
+ console.error('获取播放记录失败:', error);
+ setPlayRecords([]);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchPlayRecords();
+ }, []);
+
+ // 如果没有播放记录，则不渲染组件
+ if (!loading && playRecords.length === 0) {
+ return null;
+ }
+
+ // 计算播放进度百分比
+ const getProgress = (record: PlayRecord) => {
+ if (record.total_time === 0) return 0;
+ return (record.play_time / record.total_time) * 100;
+ };
+
+ // 从 key 中解析 source 和 id
+ const parseKey = (key: string) => {
+ const [source, id] = key.split('+');
+ return { source, id };
+ };
+
+ return (
+
+
+ 继续观看
+
+
+ {loading
+ ? // 加载状态显示灰色占位数据
+ Array.from({ length: 6 }).map((_, index) => (
+
+ ))
+ : // 显示真实数据
+ playRecords.map((record) => {
+ const { source, id } = parseKey(record.key);
+ return (
+
+
+
+ );
+ })}
+
+
+ );
+}
diff --git a/src/components/VideoCard.tsx b/src/components/VideoCard.tsx
index 2a7ef3b..86d6b4d 100644
--- a/src/components/VideoCard.tsx
+++ b/src/components/VideoCard.tsx
@@ -13,6 +13,7 @@ interface VideoCardProps {
source_name: string;
progress?: number;
from?: string;
+ currentEpisode?: number;
}
function CheckCircleCustom() {
@@ -76,6 +77,7 @@ export default function VideoCard({
source_name,
progress,
from,
+ currentEpisode,
}: VideoCardProps) {
const [playHover, setPlayHover] = useState(false);
const router = useRouter();
@@ -130,6 +132,15 @@ export default function VideoCard({
/>