Ma/LunaTV
1
0
Fork 0
mirror of https://github.com/MoonTechLab/LunaTV.git synced 2026-02-22 02:24:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: adjust douban page mobile style

Browse Source
This commit is contained in:
shinya
2025-07-17 21:20:20 +08:00
parent a007b7a50f
commit 880b6282c0
3 changed files with 45 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
public/manifest.json Normal file
View File

@@ -0,0 +1,33 @@
{
"name": "MoonTV",
"short_name": "MoonTV",
"description": "影视聚合",
"start_url": "/",
"scope": "/",
"display": "standalone",
"background_color": "#000000",
"apple-mobile-web-app-capable": "yes",
"apple-mobile-web-app-status-bar-style": "black",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

6
src/app/douban/page.tsx
View File

@@ -255,13 +255,13 @@ function DoubanPageClient() {
<PageLayout activePath={getActivePath()}>
<div className='px-4 sm:px-10 py-4 sm:py-8 overflow-visible'>
{/* 页面标题和选择器 */}
<div className='mb-8 space-y-6'>
<div className='mb-6 sm:mb-8 space-y-4 sm:space-y-6'>
{/* 页面标题 */}
<div>
<h1 className='text-3xl font-bold text-gray-800 mb-2 dark:text-gray-200'>
<h1 className='text-2xl sm:text-3xl font-bold text-gray-800 mb-1 sm:mb-2 dark:text-gray-200'>
{getPageTitle()}
</h1>
<p className='text-gray-600 dark:text-gray-400'>
<p className='text-sm sm:text-base text-gray-600 dark:text-gray-400'>
来自豆瓣的精选内容
</p>
</div>

18
src/components/DoubanSelector.tsx
View File

@@ -217,12 +217,12 @@ const DoubanSelector: React.FC<DoubanSelectorProps> = ({
return (
<div
ref={containerRef}
className='relative inline-flex bg-gray-200/60 rounded-full p-1 dark:bg-gray-700/60 backdrop-blur-sm'
className='relative inline-flex bg-gray-200/60 rounded-full p-0.5 sm:p-1 dark:bg-gray-700/60 backdrop-blur-sm'
>
{/* 滑动的白色背景指示器 */}
{indicatorStyle.width > 0 && (
<div
className='absolute top-1 bottom-1 bg-white dark:bg-gray-500 rounded-full shadow-sm transition-all duration-300 ease-out'
className='absolute top-0.5 bottom-0.5 sm:top-1 sm:bottom-1 bg-white dark:bg-gray-500 rounded-full shadow-sm transition-all duration-300 ease-out'
style={{
left: `${indicatorStyle.left}px`,
width: `${indicatorStyle.width}px`,
@@ -239,7 +239,7 @@ const DoubanSelector: React.FC<DoubanSelectorProps> = ({
buttonRefs.current[index] = el;
}}
onClick={() => onChange(option.value)}
className={`relative z-10 px-4 py-2 text-sm font-medium rounded-full transition-all duration-200 whitespace-nowrap ${
className={`relative z-10 px-2 py-1 sm:px-4 sm:py-2 text-xs sm:text-sm font-medium rounded-full transition-all duration-200 whitespace-nowrap ${
isActive
? 'text-gray-900 dark:text-gray-100'
: 'text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'
@@ -254,13 +254,13 @@ const DoubanSelector: React.FC<DoubanSelectorProps> = ({
};
return (
<div className='space-y-6'>
<div className='space-y-4 sm:space-y-6'>
{/* 电影类型 - 显示两级选择器 */}
{type === 'movie' && (
<div className='space-y-4'>
<div className='space-y-3 sm:space-y-4'>
{/* 一级选择器 */}
<div className='flex flex-col sm:flex-row sm:items-center gap-2'>
<span className='text-sm font-medium text-gray-600 dark:text-gray-400 min-w-[48px]'>
<span className='text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 min-w-[48px]'>
分类
</span>
<div className='overflow-x-auto'>
@@ -275,7 +275,7 @@ const DoubanSelector: React.FC<DoubanSelectorProps> = ({
{/* 二级选择器 */}
<div className='flex flex-col sm:flex-row sm:items-center gap-2'>
<span className='text-sm font-medium text-gray-600 dark:text-gray-400 min-w-[48px]'>
<span className='text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 min-w-[48px]'>
地区
</span>
<div className='overflow-x-auto'>
@@ -293,7 +293,7 @@ const DoubanSelector: React.FC<DoubanSelectorProps> = ({
{/* 电视剧类型 - 只显示一级选择器 */}
{type === 'tv' && (
<div className='flex flex-col sm:flex-row sm:items-center gap-2'>
<span className='text-sm font-medium text-gray-600 dark:text-gray-400 min-w-[48px]'>
<span className='text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 min-w-[48px]'>
类型
</span>
<div className='overflow-x-auto'>
@@ -310,7 +310,7 @@ const DoubanSelector: React.FC<DoubanSelectorProps> = ({
{/* 综艺类型 - 只显示一级选择器 */}
{type === 'show' && (
<div className='flex flex-col sm:flex-row sm:items-center gap-2'>
<span className='text-sm font-medium text-gray-600 dark:text-gray-400 min-w-[48px]'>
<span className='text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 min-w-[48px]'>
类型
</span>
<div className='overflow-x-auto'>