优化移动端体验

This commit is contained in:
mtvpls
2025-12-02 19:35:38 +08:00
parent 72c2540f69
commit 5bc17b4b0e
+16 -16
View File
@@ -2996,8 +2996,8 @@ function PlayPageClient() {
{/* 第三方应用打开按钮 */} {/* 第三方应用打开按钮 */}
{videoUrl && ( {videoUrl && (
<div className='mt-3 px-2 lg:flex-shrink-0 flex justify-end'> <div className='mt-3 px-2 lg:flex-shrink-0 flex justify-end'>
<div className='bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-lg p-2 border border-gray-200/50 dark:border-gray-700/50 w-auto'> <div className='bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-lg p-2 border border-gray-200/50 dark:border-gray-700/50 w-full lg:w-auto overflow-x-auto'>
<div className='flex flex-wrap gap-1.5 justify-end'> <div className='flex gap-1.5 justify-end lg:flex-wrap'>
{/* 下载按钮 */} {/* 下载按钮 */}
<button <button
onClick={(e) => { onClick={(e) => {
@@ -3030,7 +3030,7 @@ function PlayPageClient() {
} }
} }
}} }}
className='group relative flex items-center gap-1 px-2 py-1.5 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-green-400' className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-green-400 flex-shrink-0'
title='下载视频' title='下载视频'
> >
<svg <svg
@@ -3046,7 +3046,7 @@ function PlayPageClient() {
d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
/> />
</svg> </svg>
<span className='max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-white'> <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-white'>
</span> </span>
</button> </button>
@@ -3057,7 +3057,7 @@ function PlayPageClient() {
e.preventDefault(); e.preventDefault();
window.open(`potplayer://${videoUrl}`, '_blank'); window.open(`potplayer://${videoUrl}`, '_blank');
}} }}
className='group relative flex items-center gap-1 px-2 py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600' className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
title='PotPlayer' title='PotPlayer'
> >
<img <img
@@ -3065,7 +3065,7 @@ function PlayPageClient() {
alt='PotPlayer' alt='PotPlayer'
className='w-4 h-4 flex-shrink-0' className='w-4 h-4 flex-shrink-0'
/> />
<span className='max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'> <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
PotPlayer PotPlayer
</span> </span>
</button> </button>
@@ -3076,7 +3076,7 @@ function PlayPageClient() {
e.preventDefault(); e.preventDefault();
window.open(`vlc://${videoUrl}`, '_blank'); window.open(`vlc://${videoUrl}`, '_blank');
}} }}
className='group relative flex items-center gap-1 px-2 py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600' className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
title='VLC' title='VLC'
> >
<img <img
@@ -3084,7 +3084,7 @@ function PlayPageClient() {
alt='VLC' alt='VLC'
className='w-4 h-4 flex-shrink-0' className='w-4 h-4 flex-shrink-0'
/> />
<span className='max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'> <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
VLC VLC
</span> </span>
</button> </button>
@@ -3095,7 +3095,7 @@ function PlayPageClient() {
e.preventDefault(); e.preventDefault();
window.open(`mpv://${videoUrl}`, '_blank'); window.open(`mpv://${videoUrl}`, '_blank');
}} }}
className='group relative flex items-center gap-1 px-2 py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600' className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
title='MPV' title='MPV'
> >
<img <img
@@ -3103,7 +3103,7 @@ function PlayPageClient() {
alt='MPV' alt='MPV'
className='w-4 h-4 flex-shrink-0' className='w-4 h-4 flex-shrink-0'
/> />
<span className='max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'> <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
MPV MPV
</span> </span>
</button> </button>
@@ -3122,7 +3122,7 @@ function PlayPageClient() {
'_blank' '_blank'
); );
}} }}
className='group relative flex items-center gap-1 px-2 py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600' className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
title='MX Player' title='MX Player'
> >
<img <img
@@ -3130,7 +3130,7 @@ function PlayPageClient() {
alt='MX Player' alt='MX Player'
className='w-4 h-4 flex-shrink-0' className='w-4 h-4 flex-shrink-0'
/> />
<span className='max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'> <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
MX Player MX Player
</span> </span>
</button> </button>
@@ -3141,7 +3141,7 @@ function PlayPageClient() {
e.preventDefault(); e.preventDefault();
window.open(`nplayer-${videoUrl}`, '_blank'); window.open(`nplayer-${videoUrl}`, '_blank');
}} }}
className='group relative flex items-center gap-1 px-2 py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600' className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
title='nPlayer' title='nPlayer'
> >
<img <img
@@ -3149,7 +3149,7 @@ function PlayPageClient() {
alt='nPlayer' alt='nPlayer'
className='w-4 h-4 flex-shrink-0' className='w-4 h-4 flex-shrink-0'
/> />
<span className='max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'> <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
nPlayer nPlayer
</span> </span>
</button> </button>
@@ -3165,7 +3165,7 @@ function PlayPageClient() {
'_blank' '_blank'
); );
}} }}
className='group relative flex items-center gap-1 px-2 py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600' className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
title='IINA' title='IINA'
> >
<img <img
@@ -3173,7 +3173,7 @@ function PlayPageClient() {
alt='IINA' alt='IINA'
className='w-4 h-4 flex-shrink-0' className='w-4 h-4 flex-shrink-0'
/> />
<span className='max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'> <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
IINA IINA
</span> </span>
</button> </button>