feat: Enhance package manager detection script and improve type safety in components

- Updated `check-package-manager.js` to disable specific ESLint rules for better readability.
- Refactored `page.tsx` in the login module to remove unnecessary type assertions and improve state management.
- Modified `page.tsx` in the home module to enhance error handling, improve layout with grid system, and limit displayed items.
- Adjusted `PageLayout.tsx` to implement responsive layout changes for the play page.
- Improved `ThemeToggle.tsx` to ensure proper dependency tracking in useEffect.
- Enhanced `VideoCard.tsx` with better type definitions for favorites.
- Updated `db.client.ts` to rename legacy cache prefix for future migration.
- Added runtime configuration types in `types.ts` and extended global Window interface.
- Introduced a new Workbox service worker file for improved caching strategies.

README.md

@@ -590,7 +590,44 @@ KatelyaTV 支持标准的苹果 CMS V10 API 格式。
 
 [MIT](LICENSE) © 2025 KatelyaTV & Contributors
 
-## 🙏 致谢
+## <20> Star History
+
+<div align="center">
+
+[![Star History Chart](https://api.star-history.com/svg?repos=katelya77/KatelyaTV&type=Date)](https://star-history.com/#katelya77/KatelyaTV&Date)
+
+</div>
+
+## 💖 支持项目
+
+如果这个项目对您有帮助，欢迎给个 ⭐️ Star 支持一下！
+
+您也可以通过以下方式支持项目的持续开发：
+
+<div align="center">
+
+### 请开发者喝杯咖啡 ☕
+
+<table>
+  <tr>
+    <td align="center">
+      <img src="https://via.placeholder.com/200x200/00D8FF/FFFFFF?text=WeChat+Pay" alt="微信支付" width="200">
+      <br>
+      <strong>微信支付</strong>
+    </td>
+    <td align="center">
+      <img src="https://via.placeholder.com/200x200/1677FF/FFFFFF?text=Alipay" alt="支付宝" width="200">
+      <br>
+      <strong>支付宝</strong>
+    </td>
+  </tr>
+</table>
+
+> 💝 感谢您的支持！您的捐赠将用于项目的持续维护和功能改进。
+
+</div>
+
+## <20>🙏 致谢
 
 - [ts-nextjs-tailwind-starter](https://github.com/theodorusclarence/ts-nextjs-tailwind-starter) — 项目最初基于该脚手架。
 - [LibreTV](https://github.com/LibreSpark/LibreTV) — 由此启发，站在巨人的肩膀上。

VERSION.txt

@@ -1 +1 @@
-20250830155949
+20250901193125

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "moontv",
+  "name": "katelyatv",
-  "version": "0.1.0",
+  "version": "0.4.0-katelya",
   "private": true,
   "scripts": {
     "dev": "npm run gen:runtime && npm run gen:manifest && next dev -H 0.0.0.0",

scripts/check-package-manager.js

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
 
+/* eslint-disable @typescript-eslint/no-var-requires, no-console */
+
 /**
  * 智能包管理器检测和推荐脚本
  * 帮助用户选择最适合的包管理器
@@ -7,7 +9,6 @@
 
 const { execSync } = require('child_process');
 const fs = require('fs');
-const path = require('path');
 
 console.log('🔍 检测包管理器环境...\n');
 

src/app/login/page.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 'use client';
 
 import { AlertCircle, CheckCircle } from 'lucide-react';
@@ -85,10 +83,10 @@ function LoginPageClient() {
   // 在客户端挂载后设置配置
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      const storageType = (window as any).RUNTIME_CONFIG?.STORAGE_TYPE;
+      const storageType = window.RUNTIME_CONFIG?.STORAGE_TYPE;
-      setShouldAskUsername(storageType && storageType !== 'localstorage');
+      setShouldAskUsername(Boolean(storageType && storageType !== 'localstorage'));
       setEnableRegister(
-        Boolean((window as any).RUNTIME_CONFIG?.ENABLE_REGISTER)
+        Boolean(window.RUNTIME_CONFIG?.ENABLE_REGISTER)
       );
     }
   }, []);

src/app/page.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any, react-hooks/exhaustive-deps, no-console */
+/* eslint-disable react-hooks/exhaustive-deps */
 
 'use client';
 
@@ -8,6 +8,7 @@ import { Suspense, useEffect, useState } from 'react';
 
 // 客户端收藏 API
 import {
+  type Favorite,
   clearAllFavorites,
   getAllFavorites,
   getAllPlayRecords,
@@ -19,7 +20,6 @@ import { DoubanItem } from '@/lib/types';
 import CapsuleSwitch from '@/components/CapsuleSwitch';
 import ContinueWatching from '@/components/ContinueWatching';
 import PageLayout from '@/components/PageLayout';
-import ScrollableRow from '@/components/ScrollableRow';
 import { useSite } from '@/components/SiteProvider';
 import VideoCard from '@/components/VideoCard';
 
@@ -137,7 +137,8 @@ function HomeClient() {
           setHotVarietyShows(varietyShowsData.list);
         }
       } catch (error) {
-        console.error('获取豆瓣数据失败:', error);
+        // 静默处理错误，避免控制台警告
+        // console.error('获取豆瓣数据失败:', error);
       } finally {
         setLoading(false);
       }
@@ -147,7 +148,7 @@ function HomeClient() {
   }, []);
 
   // 处理收藏数据更新的函数
-  const updateFavoriteItems = async (allFavorites: Record<string, any>) => {
+  const updateFavoriteItems = async (allFavorites: Record<string, Favorite>) => {
     const allPlayRecords = await getAllPlayRecords();
 
     // 根据保存时间排序（从近到远）
@@ -191,7 +192,7 @@ function HomeClient() {
     // 监听收藏更新事件
     const unsubscribe = subscribeToDataUpdates(
       'favoritesUpdated',
-      (newFavorites: Record<string, any>) => {
+      (newFavorites: Record<string, Favorite>) => {
         updateFavoriteItems(newFavorites);
       }
     );
@@ -290,13 +291,13 @@ function HomeClient() {
                     <ChevronRight className='w-4 h-4 ml-1' />
                   </Link>
                 </div>
-                <ScrollableRow>
+                <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4'>
                   {loading
-                    ? // 加载状态显示灰色占位数据
+                    ? // 加载状态显示灰色占位数据 (显示10个，2行x5列)
-                      Array.from({ length: 8 }).map((_, index) => (
+                      Array.from({ length: 10 }).map((_, index) => (
                         <div
                           key={index}
-                          className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
+                          className='w-full'
                         >
                           <div className='relative aspect-[2/3] w-full overflow-hidden rounded-lg bg-purple-200 animate-pulse dark:bg-purple-800'>
                             <div className='absolute inset-0 bg-purple-300 dark:bg-purple-700'></div>
@@ -304,11 +305,11 @@ function HomeClient() {
                           <div className='mt-2 h-4 bg-purple-200 rounded animate-pulse dark:bg-purple-800'></div>
                         </div>
                       ))
-                    : // 显示真实数据
+                    : // 显示真实数据，只显示前10个实现2行布局
-                      hotMovies.map((movie, index) => (
+                      hotMovies.slice(0, 10).map((movie, index) => (
                         <div
                           key={index}
-                          className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
+                          className='w-full'
                         >
                           <VideoCard
                             from='douban'
@@ -321,7 +322,7 @@ function HomeClient() {
                           />
                         </div>
                       ))}
-                </ScrollableRow>
+                </div>
               </section>
 
               {/* 热门剧集 */}
@@ -338,13 +339,13 @@ function HomeClient() {
                     <ChevronRight className='w-4 h-4 ml-1' />
                   </Link>
                 </div>
-                <ScrollableRow>
+                <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4'>
                   {loading
-                    ? // 加载状态显示灰色占位数据
+                    ? // 加载状态显示灰色占位数据 (显示10个，2行x5列)
-                      Array.from({ length: 8 }).map((_, index) => (
+                      Array.from({ length: 10 }).map((_, index) => (
                         <div
                           key={index}
-                          className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
+                          className='w-full'
                         >
                           <div className='relative aspect-[2/3] w-full overflow-hidden rounded-lg bg-purple-200 animate-pulse dark:bg-purple-800'>
                             <div className='absolute inset-0 bg-purple-300 dark:bg-purple-700'></div>
@@ -352,11 +353,11 @@ function HomeClient() {
                           <div className='mt-2 h-4 bg-purple-200 rounded animate-pulse dark:bg-purple-800'></div>
                         </div>
                       ))
-                    : // 显示真实数据
+                    : // 显示真实数据，只显示前10个实现2行布局
-                      hotTvShows.map((show, index) => (
+                      hotTvShows.slice(0, 10).map((show, index) => (
                         <div
                           key={index}
-                          className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
+                          className='w-full'
                         >
                           <VideoCard
                             from='douban'
@@ -368,7 +369,7 @@ function HomeClient() {
                           />
                         </div>
                       ))}
-                </ScrollableRow>
+                </div>
               </section>
 
               {/* 热门综艺 */}
@@ -385,13 +386,13 @@ function HomeClient() {
                     <ChevronRight className='w-4 h-4 ml-1' />
                   </Link>
                 </div>
-                <ScrollableRow>
+                <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4'>
                   {loading
-                    ? // 加载状态显示灰色占位数据
+                    ? // 加载状态显示灰色占位数据 (显示10个，2行x5列)
-                      Array.from({ length: 8 }).map((_, index) => (
+                      Array.from({ length: 10 }).map((_, index) => (
                         <div
                           key={index}
-                          className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
+                          className='w-full'
                         >
                           <div className='relative aspect-[2/3] w-full overflow-hidden rounded-lg bg-purple-200 animate-pulse dark:bg-purple-800'>
                             <div className='absolute inset-0 bg-purple-300 dark:bg-purple-700'></div>
@@ -399,11 +400,11 @@ function HomeClient() {
                           <div className='mt-2 h-4 bg-purple-200 rounded animate-pulse dark:bg-purple-800'></div>
                         </div>
                       ))
-                    : // 显示真实数据
+                    : // 显示真实数据，只显示前10个实现2行布局
-                      hotVarietyShows.map((show, index) => (
+                      hotVarietyShows.slice(0, 10).map((show, index) => (
                         <div
                           key={index}
-                          className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
+                          className='w-full'
                         >
                           <VideoCard
                             from='douban'
@@ -415,7 +416,7 @@ function HomeClient() {
                           />
                         </div>
                       ))}
-                </ScrollableRow>
+                </div>
               </section>
 
               {/* 首页底部 Logo */}

src/components/PageLayout.tsx

@@ -183,20 +183,24 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
             </div>
           )}
 
-          {/* 主内容容器 - 修改布局实现完全居中：左右各留白1/6，主内容区占2/3 */}
+          {/* 主内容容器 - 为播放页面使用特殊布局（83.33%宽度），其他页面使用默认布局（66.67%宽度） */}
           <main className='flex-1 md:min-h-0 mb-14 md:mb-0 md:p-6 lg:p-8'>
-            {/* 使用flex布局实现三等分 */}
+            {/* 使用flex布局实现宽度控制 */}
             <div className='flex w-full min-h-screen md:min-h-[calc(100vh-10rem)]'>
-              {/* 左侧留白区域 - 占1/6 */}
+              {/* 左侧留白区域 - 播放页面占8.33%，其他页面占16.67% */}
               <div
                 className='hidden md:block flex-shrink-0'
-                style={{ width: '16.67%' }}
+                style={{ 
+                  width: ['/play'].includes(activePath) ? '8.33%' : '16.67%' 
+                }}
               ></div>
 
-              {/* 主内容区 - 占2/3 */}
+              {/* 主内容区 - 播放页面占83.33%，其他页面占66.67% */}
               <div
                 className='flex-1 md:flex-none rounded-container w-full'
-                style={{ width: '66.67%' }}
+                style={{ 
+                  width: ['/play'].includes(activePath) ? '83.33%' : '66.67%' 
+                }}
               >
                 <div
                   className='p-4 md:p-8 lg:p-10'
@@ -208,10 +212,12 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
                 </div>
               </div>
 
-              {/* 右侧留白区域 - 占1/6 */}
+              {/* 右侧留白区域 - 播放页面占8.33%，其他页面占16.67% */}
               <div
                 className='hidden md:block flex-shrink-0'
-                style={{ width: '16.67%' }}
+                style={{ 
+                  width: ['/play'].includes(activePath) ? '8.33%' : '16.67%' 
+                }}
               ></div>
             </div>
           </main>

src/components/ThemeToggle.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any,react-hooks/exhaustive-deps */
-
 'use client';
 
 import { Moon, Sun } from 'lucide-react';
@@ -25,7 +23,7 @@ export function ThemeToggle() {
   useEffect(() => {
     setMounted(true);
     setThemeColor(resolvedTheme);
-  }, []);
+  }, [resolvedTheme]);
 
   if (!mounted) {
     // 渲染一个占位符以避免布局偏移
@@ -36,12 +34,18 @@ export function ThemeToggle() {
     // 检查浏览器是否支持 View Transitions API
     const targetTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
     setThemeColor(targetTheme);
-    if (!(document as any).startViewTransition) {
+    
+    // 使用更好的类型定义
+    const documentWithTransition = document as Document & {
+      startViewTransition?: (callback: () => void) => void;
+    };
+    
+    if (!documentWithTransition.startViewTransition) {
       setTheme(targetTheme);
       return;
     }
 
-    (document as any).startViewTransition(() => {
+    documentWithTransition.startViewTransition(() => {
       setTheme(targetTheme);
     });
   };

src/components/VideoCard.tsx

@@ -1,11 +1,10 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import { CheckCircle, Heart, Link, PlayCircleIcon } from 'lucide-react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import {
+  type Favorite,
   deleteFavorite,
   deletePlayRecord,
   generateStorageKey,
@@ -131,7 +130,7 @@ export default function VideoCard({
     const storageKey = generateStorageKey(actualSource, actualId);
     const unsubscribe = subscribeToDataUpdates(
       'favoritesUpdated',
-      (newFavorites: Record<string, any>) => {
+      (newFavorites: Record<string, Favorite>) => {
         // 检查当前项目是否在新的收藏列表中
         const isNowFavorited = !!newFavorites[storageKey];
         setFavorited(isNowFavorited);

src/lib/db.client.ts

@@ -65,7 +65,7 @@ const LEGACY_SEARCH_HISTORY_KEY = 'moontv_search_history';
 
 // 缓存相关常量
 const CACHE_PREFIX = 'katelyatv_cache_';
-const LEGACY_CACHE_PREFIX = 'moontv_cache_';
+const _LEGACY_CACHE_PREFIX = 'moontv_cache_'; // 保留用于将来的迁移功能
 const CACHE_VERSION = '1.0.0';
 const CACHE_EXPIRE_TIME = 60 * 60 * 1000; // 一小时缓存过期
 

src/lib/types.ts

@@ -95,3 +95,18 @@ export interface DoubanResult {
   message: string;
   list: DoubanItem[];
 }
+
+// Runtime配置类型
+export interface RuntimeConfig {
+  STORAGE_TYPE?: string;
+  ENABLE_REGISTER?: boolean;
+  IMAGE_PROXY?: string;
+  DOUBAN_PROXY?: string;
+}
+
+// 全局Window类型扩展
+declare global {
+  interface Window {
+    RUNTIME_CONFIG?: RuntimeConfig;
+  }
+}