From 50c9957be87358ba41222e088cad63379d2d64c2 Mon Sep 17 00:00:00 2001 From: shinya Date: Mon, 23 Jun 2025 13:24:18 +0800 Subject: [PATCH] feat: adjust mobile style, add force landscape button --- src/app/detail/page.tsx | 6 ++-- src/app/douban/page.tsx | 2 +- src/app/page.tsx | 14 ++++---- src/app/play/page.tsx | 51 ++++++++++++++++++++++++++- src/app/search/page.tsx | 9 +++-- src/components/CollectionCard.tsx | 4 +-- src/components/ContinueWatching.tsx | 4 +-- src/components/DemoCard.tsx | 2 +- src/components/DoubanCardSkeleton.tsx | 2 +- src/components/ScrollableRow.tsx | 2 +- src/components/VideoCard.tsx | 24 +++++++------ 11 files changed, 87 insertions(+), 33 deletions(-) diff --git a/src/app/detail/page.tsx b/src/app/detail/page.tsx index 0e8c4dd..3753e45 100644 --- a/src/app/detail/page.tsx +++ b/src/app/detail/page.tsx @@ -111,7 +111,7 @@ function DetailPageClient() { return ( -
+
{/* 顶部返回按钮已移入右侧信息容器 */} {loading ? (
@@ -144,7 +144,7 @@ function DetailPageClient() { window.location.href = '/'; } }} - className='absolute top-0 left-0 -translate-x-[60%] -translate-y-[30%] sm:-translate-x-[180%] sm:-translate-y-1/2 p-2 rounded transition-colors' + className='absolute top-0 left-0 -translate-x-[40%] -translate-y-[30%] sm:-translate-x-[180%] sm:-translate-y-1/2 p-2 rounded transition-colors' >
-
+
{detail.episodes.map((episode, idx) => ( {/* 内容网格 */} -
+
{loading ? // 显示骨架屏 skeletonData.map((index) => ( diff --git a/src/app/page.tsx b/src/app/page.tsx index 5962824..de74eed 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -130,7 +130,7 @@ function HomeClient() { return ( -
+
{/* 顶部 Tab 切换 */}
我的收藏 -
+
{favoriteItems.map((item) => (
@@ -175,7 +175,7 @@ function HomeClient() { {collections.map((collection) => (
(
@@ -213,7 +213,7 @@ function HomeClient() { hotMovies.map((movie, index) => (
@@ -232,7 +232,7 @@ function HomeClient() { Array.from({ length: 8 }).map((_, index) => (
@@ -244,7 +244,7 @@ function HomeClient() { hotTvShows.map((show, index) => (
diff --git a/src/app/play/page.tsx b/src/app/play/page.tsx index 408f1a2..5268765 100644 --- a/src/app/play/page.tsx +++ b/src/app/play/page.tsx @@ -90,6 +90,12 @@ function PlayPageClient() { // 是否显示旋转提示（5s 后自动隐藏） const [showOrientationTip, setShowOrientationTip] = useState(false); const orientationTipTimeoutRef = useRef(null); + // 当前是否处于竖屏，用于控制"强制横屏"按钮显隐 + const [isPortrait, setIsPortrait] = useState( + typeof window !== 'undefined' + ? window.matchMedia('(orientation: portrait)').matches + : true + ); // 长按三倍速相关状态 const [isLongPressing, setIsLongPressing] = useState(false); @@ -1029,6 +1035,9 @@ function PlayPageClient() { const update = () => { const portrait = mql.matches; + // 更新竖屏状态 + setIsPortrait(portrait); + // 在进入竖屏时显示提示，5 秒后自动隐藏 if (portrait) { setShowOrientationTip(true); @@ -1068,7 +1077,25 @@ function PlayPageClient() { }; }, []); - // 进入/退出全屏时锁定/解锁横屏 + // 用户点击悬浮按钮 -> 请求全屏并锁定横屏 + const handleForceLandscape = async () => { + try { + const el: any = artRef.current || document.documentElement; + if (el.requestFullscreen) { + await el.requestFullscreen(); + } else if (el.webkitRequestFullscreen) { + el.webkitRequestFullscreen(); + } + + if (screen.orientation && (screen.orientation as any).lock) { + await (screen.orientation as any).lock('landscape'); + } + } catch (err) { + console.warn('强制横屏失败:', err); + } + }; + + // 进入/退出全屏时锁定/解锁横屏（保持原有逻辑） useEffect(() => { if (typeof document === 'undefined') return; @@ -1293,6 +1320,28 @@ function PlayPageClient() {
)} + {/* 强制横屏按钮：仅在移动端竖屏时显示 */} + {isPortrait && ( + + )} + {/* 换源加载遮罩 */} {sourceChanging && (
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index fcd602f..2bdb86a 100644 --- a/src/app/search/page.tsx +++ b/src/app/search/page.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/exhaustive-deps */ 'use client'; import { Search } from 'lucide-react'; @@ -37,8 +38,10 @@ function SearchPageClient() { const searchInputRef = useRef(null); useEffect(() => { - // 自动聚焦搜索框 - searchInputRef.current?.focus(); + // 自动聚焦搜索框：仅当 URL 中没有搜索参数时 + if (!searchParams.get('q')) { + searchInputRef.current?.focus(); + } // 加载搜索历史 (async () => { @@ -125,7 +128,7 @@ function SearchPageClient() {
) : showResults ? ( // 搜索结果 -
+
{searchResults.map((item) => (
diff --git a/src/components/CollectionCard.tsx b/src/components/CollectionCard.tsx index 6ac2485..5313300 100644 --- a/src/components/CollectionCard.tsx +++ b/src/components/CollectionCard.tsx @@ -19,7 +19,7 @@ export default function CollectionCard({
{/* 图标容器 */}
- +
{/* Hover 蒙版效果 - 参考 DemoCard */} @@ -29,7 +29,7 @@ export default function CollectionCard({ {/* 标题 - absolute 定位，类似 DemoCard */}
-

+

{title}

diff --git a/src/components/ContinueWatching.tsx b/src/components/ContinueWatching.tsx index faafafc..1c06a22 100644 --- a/src/components/ContinueWatching.tsx +++ b/src/components/ContinueWatching.tsx @@ -80,7 +80,7 @@ export default function ContinueWatching({ className }: ContinueWatchingProps) { Array.from({ length: 6 }).map((_, index) => (
@@ -95,7 +95,7 @@ export default function ContinueWatching({ className }: ContinueWatchingProps) { return (
{ {/* 信息层 */}
- + {title}
diff --git a/src/components/DoubanCardSkeleton.tsx b/src/components/DoubanCardSkeleton.tsx index f806d88..4c44f65 100644 --- a/src/components/DoubanCardSkeleton.tsx +++ b/src/components/DoubanCardSkeleton.tsx @@ -10,7 +10,7 @@ const DoubanCardSkeleton = () => { {/* 信息层骨架 */}
-
+
diff --git a/src/components/ScrollableRow.tsx b/src/components/ScrollableRow.tsx index fd48ad3..171e9fb 100644 --- a/src/components/ScrollableRow.tsx +++ b/src/components/ScrollableRow.tsx @@ -102,7 +102,7 @@ export default function ScrollableRow({ >
{children} diff --git a/src/components/VideoCard.tsx b/src/components/VideoCard.tsx index d22e3ae..986ba37 100644 --- a/src/components/VideoCard.tsx +++ b/src/components/VideoCard.tsx @@ -177,7 +177,7 @@ export default function VideoCard({
-
+
{!hideCheckCircle && ( )} {favorited && ( - + )} {!favorited && ( 1 && ( -
- {episodes} +
+ + {episodes} +
)} @@ -226,8 +228,8 @@ export default function VideoCard({ {/* 当前播放集数 */} {currentEpisode && episodes && episodes > 1 && ( -
- +
+ {currentEpisode}
@@ -237,11 +239,11 @@ export default function VideoCard({ {/* 信息层 */}
- + {title} {source && ( - + {source_name} @@ -252,14 +254,14 @@ export default function VideoCard({ {/* 收藏夹始终显示红心 */} {favorited && ( -
+