From 880b6282c0bcce01df38d77d8ff5e5eba40f25da Mon Sep 17 00:00:00 2001
From: shinya <kobayashi_shinya@outlook.com>
Date: Thu, 17 Jul 2025 21:20:20 +0800
Subject: [PATCH] feat: adjust douban page mobile style

---
 public/manifest.json              | 33 +++++++++++++++++++++++++++++++
 src/app/douban/page.tsx           |  6 +++---
 src/components/DoubanSelector.tsx | 18 ++++++++---------
 3 files changed, 45 insertions(+), 12 deletions(-)
 create mode 100644 public/manifest.json

diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..c1f9fed
--- /dev/null
+++ b/public/manifest.json
@@ -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"
+    }
+  ]
+}
diff --git a/src/app/douban/page.tsx b/src/app/douban/page.tsx
index ab9d4fe..8660bd2 100644
--- a/src/app/douban/page.tsx
+++ b/src/app/douban/page.tsx
@@ -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>
diff --git a/src/components/DoubanSelector.tsx b/src/components/DoubanSelector.tsx
index 9ce4889..c297622 100644
--- a/src/components/DoubanSelector.tsx
+++ b/src/components/DoubanSelector.tsx
@@ -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'>