移除首页的收藏夹切换卡，改成从用户菜单进入

src/app/page.tsx

@@ -10,18 +10,10 @@ import {
   BangumiCalendarData,
   GetBangumiCalendarData,
 } from '@/lib/bangumi.client';
-// 客户端收藏 API
-import {
-  clearAllFavorites,
-  getAllFavorites,
-  getAllPlayRecords,
-  subscribeToDataUpdates,
-} from '@/lib/db.client';
 import { getDoubanCategories } from '@/lib/douban.client';
 import { getTMDBImageUrl, TMDBItem } from '@/lib/tmdb.client';
 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';
@@ -31,7 +23,7 @@ import HttpWarningDialog from '@/components/HttpWarningDialog';
 import BannerCarousel from '@/components/BannerCarousel';
 
 function HomeClient() {
-  const [activeTab, setActiveTab] = useState<'home' | 'favorites'>('home');
+  // 移除了 activeTab 状态，收藏夹功能已移到 UserMenu
   const [hotMovies, setHotMovies] = useState<DoubanItem[]>([]);
   const [hotTvShows, setHotTvShows] = useState<DoubanItem[]>([]);
   const [hotVarietyShows, setHotVarietyShows] = useState<DoubanItem[]>([]);
@@ -58,22 +50,6 @@ function HomeClient() {
     }
   }, [announcement]);
 
-  // 收藏夹数据
-  type FavoriteItem = {
-    id: string;
-    source: string;
-    title: string;
-    poster: string;
-    episodes: number;
-    source_name: string;
-    currentEpisode?: number;
-    search_title?: string;
-    origin?: 'vod' | 'live';
-  };
-
-  const [favoriteItems, setFavoriteItems] = useState<FavoriteItem[]>([]);
-  const favoritesFetchedRef = useRef(false);
-
   useEffect(() => {
     const fetchRecommendData = async () => {
       try {
@@ -147,74 +123,7 @@ function HomeClient() {
     fetchRecommendData();
   }, []);
 
-  // 处理收藏数据更新的函数
-  const updateFavoriteItems = useCallback(
-    async (allFavorites: Record<string, any>) => {
-      const allPlayRecords = await getAllPlayRecords();
 
-      // 根据保存时间排序（从近到远）
-      const sorted = Object.entries(allFavorites)
-        .sort(([, a], [, b]) => b.save_time - a.save_time)
-        .map(([key, fav]) => {
-          const plusIndex = key.indexOf('+');
-          const source = key.slice(0, plusIndex);
-          const id = key.slice(plusIndex + 1);
-
-          // 查找对应的播放记录，获取当前集数
-          const playRecord = allPlayRecords[key];
-          const currentEpisode = playRecord?.index;
-
-          return {
-            id,
-            source,
-            title: fav.title,
-            year: fav.year,
-            poster: fav.cover,
-            episodes: fav.total_episodes,
-            source_name: fav.source_name,
-            currentEpisode,
-            search_title: fav?.search_title,
-            origin: fav?.origin,
-          } as FavoriteItem;
-        });
-      setFavoriteItems(sorted);
-    },
-    []
-  );
-
-  // 当切换到收藏夹时加载收藏数据（使用 ref 防止重复加载）
-  useEffect(() => {
-    if (activeTab !== 'favorites') {
-      favoritesFetchedRef.current = false;
-      return;
-    }
-
-    // 已经加载过就不再加载
-    if (favoritesFetchedRef.current) return;
-
-    favoritesFetchedRef.current = true;
-
-    const loadFavorites = async () => {
-      const allFavorites = await getAllFavorites();
-      await updateFavoriteItems(allFavorites);
-    };
-
-    loadFavorites();
-  }, [activeTab, updateFavoriteItems]);
-
-  // 监听收藏更新事件（独立的 useEffect）
-  useEffect(() => {
-    if (activeTab !== 'favorites') return;
-
-    const unsubscribe = subscribeToDataUpdates(
-      'favoritesUpdated',
-      (newFavorites: Record<string, any>) => {
-        updateFavoriteItems(newFavorites);
-      }
-    );
-
-    return unsubscribe;
-  }, [activeTab, updateFavoriteItems]);
 
   const handleCloseAnnouncement = (announcement: string) => {
     setShowAnnouncement(false);
@@ -223,67 +132,15 @@ function HomeClient() {
 
   return (
     <PageLayout>
-      {/* TMDB 热门轮播图 - 只在首页显示，且占满宽度 */}
+      {/* TMDB 热门轮播图 */}
-      {activeTab === 'home' && (
+      <div className='w-full mb-6 sm:mb-8'>
-        <div className='w-full mb-6 sm:mb-8'>
+        <BannerCarousel />
-          <BannerCarousel />
+      </div>
-        </div>
-      )}
 
       <div className='px-2 sm:px-10 py-4 sm:py-8 overflow-visible'>
-        {/* Tab 切换移到轮播图下方 */}
-        <div className='mb-8 flex justify-center'>
-          <CapsuleSwitch
-            options={[
-              { label: '首页', value: 'home' },
-              { label: '收藏夹', value: 'favorites' },
-            ]}
-            active={activeTab}
-            onChange={(value) => setActiveTab(value as 'home' | 'favorites')}
-          />
-        </div>
-
         <div className='max-w-[95%] mx-auto'>
-          {activeTab === 'favorites' ? (
+          {/* 首页内容 */}
-            // 收藏夹视图
+          <>
-            <section className='mb-8'>
-              <div className='mb-4 flex items-center justify-between'>
-                <h2 className='text-xl font-bold text-gray-800 dark:text-gray-200'>
-                  我的收藏
-                </h2>
-                {favoriteItems.length > 0 && (
-                  <button
-                    className='text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
-                    onClick={async () => {
-                      await clearAllFavorites();
-                      setFavoriteItems([]);
-                    }}
-                  >
-                    清空
-                  </button>
-                )}
-              </div>
-              <div className='justify-start grid grid-cols-3 gap-x-2 gap-y-14 sm:gap-y-20 px-0 sm:px-2 sm:grid-cols-[repeat(auto-fill,_minmax(11rem,_1fr))] sm:gap-x-8'>
-                {favoriteItems.map((item) => (
-                  <div key={item.id + item.source} className='w-full'>
-                    <VideoCard
-                      query={item.search_title}
-                      {...item}
-                      from='favorite'
-                      type={item.episodes > 1 ? 'tv' : ''}
-                    />
-                  </div>
-                ))}
-                {favoriteItems.length === 0 && (
-                  <div className='col-span-full text-center text-gray-500 py-8 dark:text-gray-400'>
-                    暂无收藏内容
-                  </div>
-                )}
-              </div>
-            </section>
-          ) : (
-            // 首页视图
-            <>
               {/* 继续观看 */}
               <ContinueWatching />
 
@@ -566,8 +423,7 @@ function HomeClient() {
                   </ScrollableRow>
                 </section>
               )}
-            </>
+          </>
-          )}
         </div>
       </div>
 

src/components/FavoritesPanel.tsx

@@ -0,0 +1,192 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+'use client';
+
+import { Star, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+import {
+  clearAllFavorites,
+  getAllFavorites,
+  getAllPlayRecords,
+  subscribeToDataUpdates,
+} from '@/lib/db.client';
+import VideoCard from '@/components/VideoCard';
+
+interface FavoriteItem {
+  id: string;
+  source: string;
+  title: string;
+  year: string;
+  poster: string;
+  episodes?: number;
+  source_name?: string;
+  currentEpisode?: number;
+  search_title?: string;
+  origin?: string;
+}
+
+interface FavoritesPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const FavoritesPanel: React.FC<FavoritesPanelProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const [favoriteItems, setFavoriteItems] = useState<FavoriteItem[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  // 加载收藏数据
+  const loadFavorites = async () => {
+    setLoading(true);
+    try {
+      const allFavorites = await getAllFavorites();
+      const allPlayRecords = await getAllPlayRecords();
+
+      // 根据保存时间排序（从近到远）
+      const sorted = Object.entries(allFavorites)
+        .sort(([, a], [, b]) => b.save_time - a.save_time)
+        .map(([key, fav]) => {
+          const plusIndex = key.indexOf('+');
+          const source = key.slice(0, plusIndex);
+          const id = key.slice(plusIndex + 1);
+
+          // 查找对应的播放记录，获取当前集数
+          const playRecord = allPlayRecords[key];
+          const currentEpisode = playRecord?.index;
+
+          return {
+            id,
+            source,
+            title: fav.title,
+            year: fav.year,
+            poster: fav.cover,
+            episodes: fav.total_episodes,
+            source_name: fav.source_name,
+            currentEpisode,
+            search_title: fav?.search_title,
+            origin: fav?.origin,
+          } as FavoriteItem;
+        });
+      setFavoriteItems(sorted);
+    } catch (error) {
+      console.error('加载收藏失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 清空所有收藏
+  const handleClearAll = async () => {
+    try {
+      await clearAllFavorites();
+      setFavoriteItems([]);
+    } catch (error) {
+      console.error('清空收藏失败:', error);
+    }
+  };
+
+  // 打开面板时加载收藏
+  useEffect(() => {
+    if (isOpen) {
+      loadFavorites();
+    }
+  }, [isOpen]);
+
+  // 监听收藏变化,实时移除已取消收藏的项目
+  useEffect(() => {
+    const unsubscribe = subscribeToDataUpdates(async (event) => {
+      if (event === 'favoritesUpdated' && isOpen) {
+        // 获取最新的收藏列表
+        const allFavorites = await getAllFavorites();
+        const currentKeys = Object.keys(allFavorites);
+        
+        // 过滤掉已经不在收藏中的项目
+        setFavoriteItems((prevItems) => 
+          prevItems.filter((item) => {
+            const key = `${item.source}+${item.id}`;
+            return currentKeys.includes(key);
+          })
+        );
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [isOpen]);
+
+  return (
+    <>
+      {/* 背景遮罩 */}
+      <div
+        className='fixed inset-0 bg-black/50 backdrop-blur-sm z-[1000]'
+        onClick={onClose}
+      />
+
+      {/* 收藏面板 */}
+      <div className='fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl max-h-[85vh] bg-white dark:bg-gray-900 rounded-xl shadow-xl z-[1001] flex flex-col overflow-hidden'>
+        {/* 标题栏 */}
+        <div className='flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700'>
+          <div className='flex items-center gap-2'>
+            <Star className='w-5 h-5 text-yellow-500' />
+            <h3 className='text-lg font-bold text-gray-800 dark:text-gray-200'>
+              我的收藏
+            </h3>
+            {favoriteItems.length > 0 && (
+              <span className='px-2 py-0.5 text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 rounded-full'>
+                {favoriteItems.length} 项
+              </span>
+            )}
+          </div>
+          <div className='flex items-center gap-2'>
+            {favoriteItems.length > 0 && (
+              <button
+                onClick={handleClearAll}
+                className='text-xs text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors'
+              >
+                清空全部
+              </button>
+            )}
+            <button
+              onClick={onClose}
+              className='w-8 h-8 p-1 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors'
+              aria-label='Close'
+            >
+              <X className='w-full h-full' />
+            </button>
+          </div>
+        </div>
+
+        {/* 收藏列表 */}
+        <div className='flex-1 overflow-y-auto p-6'>
+          {loading ? (
+            <div className='flex items-center justify-center py-12'>
+              <div className='w-8 h-8 border-4 border-yellow-500 border-t-transparent rounded-full animate-spin'></div>
+            </div>
+          ) : favoriteItems.length === 0 ? (
+            <div className='flex flex-col items-center justify-center py-12 text-gray-500 dark:text-gray-400'>
+              <Star className='w-12 h-12 mb-3 opacity-30' />
+              <p className='text-sm'>暂无收藏内容</p>
+            </div>
+          ) : (
+            <div className='grid grid-cols-3 gap-x-2 gap-y-14 sm:gap-y-20 px-0 sm:px-2 sm:grid-cols-[repeat(auto-fill,_minmax(11rem,_1fr))] sm:gap-x-8'>
+              {favoriteItems.map((item) => (
+                <div key={item.id + item.source} className='w-full'>
+                  <VideoCard
+                    query={item.search_title}
+                    {...item}
+                    from='favorite'
+                    type={item.episodes && item.episodes > 1 ? 'tv' : ''}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};

src/components/UserMenu.tsx

@@ -14,6 +14,7 @@ import {
   Rss,
   Settings,
   Shield,
+  Star,
   User,
   X,
 } from 'lucide-react';
@@ -30,6 +31,7 @@ import { useVersionCheck } from './VersionCheckProvider';
 import { VersionPanel } from './VersionPanel';
 import { OfflineDownloadPanel } from './OfflineDownloadPanel';
 import { NotificationPanel } from './NotificationPanel';
+import { FavoritesPanel } from './FavoritesPanel';
 
 interface AuthInfo {
   username?: string;
@@ -46,6 +48,7 @@ export const UserMenu: React.FC = () => {
   const [isVersionPanelOpen, setIsVersionPanelOpen] = useState(false);
   const [isOfflineDownloadPanelOpen, setIsOfflineDownloadPanelOpen] = useState(false);
   const [isNotificationPanelOpen, setIsNotificationPanelOpen] = useState(false);
+  const [isFavoritesPanelOpen, setIsFavoritesPanelOpen] = useState(false);
   const [authInfo, setAuthInfo] = useState<AuthInfo | null>(null);
   const [storageType, setStorageType] = useState<string>('localstorage');
   const [mounted, setMounted] = useState(false);
@@ -700,6 +703,18 @@ export const UserMenu: React.FC = () => {
             )}
           </button>
 
+          {/* 我的收藏按钮 */}
+          <button
+            onClick={() => {
+              setIsOpen(false);
+              setIsFavoritesPanelOpen(true);
+            }}
+            className='w-full px-3 py-2 text-left flex items-center gap-2.5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-sm relative'
+          >
+            <Star className='w-4 h-4 text-gray-500 dark:text-gray-400' />
+            <span className='font-medium'>我的收藏</span>
+          </button>
+
           {/* 设置按钮 */}
           <button
             onClick={handleSettings}
@@ -1533,6 +1548,17 @@ export const UserMenu: React.FC = () => {
           />,
           document.body
         )}
+
+      {/* 使用 Portal 将收藏面板渲染到 document.body */}
+      {isFavoritesPanelOpen &&
+        mounted &&
+        createPortal(
+          <FavoritesPanel
+            isOpen={isFavoritesPanelOpen}
+            onClose={() => setIsFavoritesPanelOpen(false)}
+          />,
+          document.body
+        )}
     </>
   );
 };