diff --git a/web/src/pages/HomePage.tsx b/web/src/pages/HomePage.tsx index 45b3804..e62af65 100644 --- a/web/src/pages/HomePage.tsx +++ b/web/src/pages/HomePage.tsx @@ -1,14 +1,16 @@ import { useEffect, useMemo, useState } from 'react' -import { Link } from 'react-router-dom' -import { motion } from 'framer-motion' -import { ArrowRight, Clock, Film, Play, Sparkles } from 'lucide-react' import { libraryAPI, mediaAPI } from '../api/library' import { playbackAPI, type HistoryItem } from '../api/playback' -import { imageURL } from '../api/client' -import { MediaCard } from '../components/MediaCard' import type { Library, Media } from '../types' -import { groupSeries, seriesCardLink } from '../utils/groupSeries' +import { groupSeries } from '../utils/groupSeries' +import { + ContinueWatchingSection, + HomeEmptyState, + HomeFeaturedSection, + HomeLoadingState, + RecentMediaSection, +} from './HomePageSections' const hasArtwork = (media?: Media | null) => !!(media?.poster_url || media?.backdrop_url) const asArray = (value: unknown): T[] => (Array.isArray(value) ? value as T[] : []) @@ -56,219 +58,26 @@ export function HomePage() { const empty = !loading && libraries.length === 0 && recentCards.length === 0 && history.length === 0 if (loading) { - return ( -
- -
-
- -
- 首页内容准备中… - -
- ) + return } if (empty) { - return ( -
-
- -
-

您的家庭影视站暂无内容

-

- 前往管理后台添加媒体目录，扫描后首页将展示本周力荐、继续观看和最近入库。 -

- - 前往管理后台 - -
- ) + return } return (
{featuredItem && ( -
-
-
- {featuredVisual && ( - { event.currentTarget.style.display = 'none' }} - /> - )} -
-
-
- -
-
-
- - 本周力荐 / Featured -
- -
-
- - {featuredMark} -
-

- {featuredItem.title} -

-
- -

- {featuredItem.overview || '家庭私人媒体中心收藏。支持多端播放、外部播放器、智能刮削与订阅下载。'} -

- -
- {featuredItem.year > 0 && ( - {featuredItem.year} 年 - )} - {featuredItem.video_codec && ( - - {featuredItem.video_codec} - - )} - {featuredItem.container && ( - - {featuredItem.container} - - )} -
- -
- - - 立即播放 - - - 发现更多精彩 - - -
-
- -
-
-
-
- - {featuredItem.title} -
- {featuredPoster && ( - {featuredItem.title} { event.currentTarget.style.display = 'none' }} - /> - )} -
-
-
-
+ )} - {history.length > 0 && ( -
-
- - - -

继续观看

- {history.length} 个记录 -
- -
- {history.slice(0, 8).map((h) => { - const media = h.media! - const progress = h.duration_ms > 0 ? h.position_ms / h.duration_ms : 0 - return - })} -
-
- )} - - {recentCards.length > 0 && ( -
-
-
- - - -
-

最近入库

-

按整部电影、剧集、番剧和综艺合集展示新增内容。

-
-
- - 海报墙 - - -
- -
- {recentCards.map((card) => ( - - ))} -
-
- )} + {history.length > 0 && } + {recentCards.length > 0 && }
) } - -function ContinueCard({ media, progress }: { media: Media; progress: number }) { - return ( - -
- {media.poster_url ? ( - - ) : ( -
- -
- )} -
- -
-
-
-

- {media.title} -

-
-
- -
-

- 已观看到 {Math.round(progress * 100)}% -

-
-
- - ) -} diff --git a/web/src/pages/HomePageSections.tsx b/web/src/pages/HomePageSections.tsx new file mode 100644 index 0000000..9b81c81 --- /dev/null +++ b/web/src/pages/HomePageSections.tsx @@ -0,0 +1,239 @@ +import { Link } from 'react-router-dom' +import { motion } from 'framer-motion' +import { ArrowRight, Clock, Film, Play, Sparkles } from 'lucide-react' + +import { imageURL } from '../api/client' +import { MediaCard } from '../components/MediaCard' +import type { HistoryItem } from '../api/playback' +import type { Media } from '../types' +import type { SeriesCard } from '../utils/groupSeries' +import { seriesCardLink } from '../utils/groupSeries' + +export function HomeLoadingState() { + return ( +
+ +
+
+ +
+ 首页内容准备中… + +
+ ) +} + +export function HomeEmptyState() { + return ( +
+
+ +
+

您的家庭影视站暂无内容

+

+ 前往管理后台添加媒体目录，扫描后首页将展示本周力荐、继续观看和最近入库。 +

+ + 前往管理后台 + +
+ ) +} + +export function HomeFeaturedSection({ + featuredItem, + featuredVisual, + featuredPoster, + featuredMark, +}: { + featuredItem: Media + featuredVisual: string + featuredPoster: string + featuredMark: string +}) { + return ( +
+
+
+ {featuredVisual && ( + { event.currentTarget.style.display = 'none' }} + /> + )} +
+
+
+ +
+
+
+ + 本周力荐 / Featured +
+ +
+
+ + {featuredMark} +
+

+ {featuredItem.title} +

+
+ +

+ {featuredItem.overview || '家庭私人媒体中心收藏。支持多端播放、外部播放器、智能刮削与订阅下载。'} +

+ +
+ {featuredItem.year > 0 && ( + {featuredItem.year} 年 + )} + {featuredItem.video_codec && ( + + {featuredItem.video_codec} + + )} + {featuredItem.container && ( + + {featuredItem.container} + + )} +
+ +
+ + + 立即播放 + + + 发现更多精彩 + + +
+
+ +
+
+
+
+ + {featuredItem.title} +
+ {featuredPoster && ( + {featuredItem.title} { event.currentTarget.style.display = 'none' }} + /> + )} +
+
+
+
+ ) +} + +export function ContinueWatchingSection({ history }: { history: HistoryItem[] }) { + return ( +
+
+ + + +

继续观看

+ {history.length} 个记录 +
+ +
+ {history.slice(0, 8).map((h) => { + const media = h.media! + const progress = h.duration_ms > 0 ? h.position_ms / h.duration_ms : 0 + return + })} +
+
+ ) +} + +export function RecentMediaSection({ recentCards }: { recentCards: SeriesCard[] }) { + return ( +
+
+
+ + + +
+

最近入库

+

按整部电影、剧集、番剧和综艺合集展示新增内容。

+
+
+ + 海报墙 + + +
+ +
+ {recentCards.map((card) => ( + + ))} +
+
+ ) +} + +function ContinueCard({ media, progress }: { media: Media; progress: number }) { + return ( + +
+ {media.poster_url ? ( + + ) : ( +
+ +
+ )} +
+ +
+
+
+

+ {media.title} +

+
+
+ +
+

+ 已观看到 {Math.round(progress * 100)}% +

+
+
+ + ) +}