feat: auth page

src/app/play/page.tsx

@@ -5,7 +5,7 @@
 import Artplayer from 'artplayer';
 import Hls from 'hls.js';
 import { Heart } from 'lucide-react';
-import { useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { Suspense, useEffect, useRef, useState } from 'react';
 
 import {
@@ -33,6 +33,7 @@ declare global {
 }
 
 function PlayPageClient() {
+  const router = useRouter();
   const searchParams = useSearchParams();
 
   // -----------------------------------------------------------------------------
@@ -50,7 +51,7 @@ function PlayPageClient() {
   const [favorited, setFavorited] = useState(false);
 
   // 去广告开关（从 localStorage 继承，默认 true）
-  const [blockAdEnabled, _setBlockAdEnabled] = useState<boolean>(() => {
+  const [blockAdEnabled, setBlockAdEnabled] = useState<boolean>(() => {
     if (typeof window !== 'undefined') {
       const v = localStorage.getItem('enable_blockad');
       if (v !== null) return v === 'true';
@@ -953,12 +954,22 @@ function PlayPageClient() {
             onClick() {
               const newVal = !blockAdEnabled;
               try {
-                saveCurrentPlayProgress();
                 localStorage.setItem('enable_blockad', String(newVal));
+                if (artPlayerRef.current) {
+                  resumeTimeRef.current = artPlayerRef.current.currentTime;
+                  if (
+                    artPlayerRef.current.video &&
+                    artPlayerRef.current.video.hls
+                  ) {
+                    artPlayerRef.current.video.hls.destroy();
+                  }
+                  artPlayerRef.current.destroy();
+                  artPlayerRef.current = null;
+                }
+                setBlockAdEnabled(newVal);
               } catch (_) {
                 // ignore
               }
-              window.location.reload();
               return newVal ? '当前开启' : '当前关闭';
             },
           },
@@ -1067,7 +1078,7 @@ function PlayPageClient() {
       console.error('创建播放器失败:', err);
       setError('播放器初始化失败');
     }
-  }, [Artplayer, Hls, videoUrl, loading]);
+  }, [Artplayer, Hls, videoUrl, loading, blockAdEnabled]);
 
   // ---------------------------------------------------------------------------
   // 视频元素事件监听
@@ -1194,7 +1205,7 @@ function PlayPageClient() {
   if (loading) {
     return (
       <PageLayout activePath='/play'>
-        <div className='flex items-center justify-center min-h-screen bg-gradient-to-br from-green-50 via-white to-emerald-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900'>
+        <div className='flex items-center justify-center min-h-screen bg-transparent'>
           <div className='text-center max-w-md mx-auto px-6'>
             {/* 动画影院图标 */}
             <div className='relative mb-8'>
@@ -1283,7 +1294,7 @@ function PlayPageClient() {
   if (error) {
     return (
       <PageLayout activePath='/play'>
-        <div className='flex items-center justify-center min-h-screen bg-gradient-to-br from-red-50 via-white to-orange-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900'>
+        <div className='flex items-center justify-center min-h-screen bg-transparent'>
           <div className='text-center max-w-md mx-auto px-6'>
             {/* 错误图标 */}
             <div className='relative mb-8'>
@@ -1327,10 +1338,8 @@ function PlayPageClient() {
               <button
                 onClick={() =>
                   videoTitle
-                    ? (window.location.href = `/search?q=${encodeURIComponent(
-                        videoTitle
-                      )}`)
-                    : window.history.back()
+                    ? router.push(`/search?q=${encodeURIComponent(videoTitle)}`)
+                    : router.back()
                 }
                 className='w-full px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-xl font-medium hover:from-green-600 hover:to-emerald-700 transform hover:scale-105 transition-all duration-200 shadow-lg hover:shadow-xl'
               >

src/components/AuthProvider.tsx

@@ -58,20 +58,47 @@ export default function AuthProvider({ children }: Props) {
   // 认证状态未知时显示加载状态
   if (!isAuthenticated) {
     return (
-      <div className='relative min-h-screen flex items-center justify-center px-4 overflow-hidden'>
+      <div className='flex items-center justify-center min-h-screen bg-transparent'>
         <div className='absolute top-4 right-4'>
           <ThemeToggle />
         </div>
-        <div className='relative z-10 w-full max-w-md rounded-3xl bg-gradient-to-b from-white/90 via-white/70 to-white/40 dark:from-zinc-900/90 dark:via-zinc-900/70 dark:to-zinc-900/40 backdrop-blur-xl shadow-2xl p-10 dark:border dark:border-zinc-800'>
+        <div className='text-center max-w-md mx-auto px-6'>
+          {/* 动画认证图标 */}
+          <div className='relative mb-8'>
+            <div className='relative mx-auto w-24 h-24 bg-gradient-to-r from-green-500 to-emerald-600 rounded-2xl shadow-2xl flex items-center justify-center transform hover:scale-105 transition-transform duration-300'>
+              <div className='text-white text-4xl'>🔐</div>
+              {/* 旋转光环 */}
+              <div className='absolute -inset-2 bg-gradient-to-r from-green-500 to-emerald-600 rounded-2xl opacity-20 animate-spin'></div>
+            </div>
+
+            {/* 浮动粒子效果 */}
+            <div className='absolute top-0 left-0 w-full h-full pointer-events-none'>
+              <div className='absolute top-2 left-2 w-2 h-2 bg-green-400 rounded-full animate-bounce'></div>
+              <div
+                className='absolute top-4 right-4 w-1.5 h-1.5 bg-emerald-400 rounded-full animate-bounce'
+                style={{ animationDelay: '0.5s' }}
+              ></div>
+              <div
+                className='absolute bottom-3 left-6 w-1 h-1 bg-lime-400 rounded-full animate-bounce'
+                style={{ animationDelay: '1s' }}
+              ></div>
+            </div>
+          </div>
+
+          {/* 品牌标题 */}
           <h1 className='text-green-600 tracking-tight text-center text-3xl font-extrabold mb-8 bg-clip-text drop-shadow-sm'>
             {siteName}
           </h1>
-          <div className='flex justify-center my-10'>
-            <div className='animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-green-500' />
+
+          {/* 加载消息 */}
+          <div className='space-y-2'>
+            <p className='text-xl font-semibold text-gray-800 dark:text-gray-200 animate-pulse'>
+              正在验证您的身份...
+            </p>
+            <p className='text-sm text-gray-500 dark:text-gray-400'>
+              请稍候，马上就好
+            </p>
           </div>
-          <p className='text-gray-700 dark:text-gray-300 font-medium text-lg text-center'>
-            正在验证您的身份，请稍候...
-          </p>
         </div>
       </div>
     );

src/components/EpisodeSelector.tsx

@@ -149,7 +149,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
             className={`flex-1 py-3 px-6 text-center cursor-pointer transition-all duration-200 font-medium
               ${
                 activeTab === 'episodes'
-                  ? 'text-green-500 dark:text-green-400'
+                  ? 'text-green-600 dark:text-green-400'
                   : 'text-gray-700 hover:text-green-600 bg-black/5 dark:bg-white/5 dark:text-gray-300 dark:hover:text-green-400 hover:bg-black/3 dark:hover:bg-white/3'
               }
             `.trim()}
@@ -162,7 +162,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
           className={`flex-1 py-3 px-6 text-center cursor-pointer transition-all duration-200 font-medium
             ${
               activeTab === 'sources'
-                ? 'text-green-500 dark:text-green-400'
+                ? 'text-green-600 dark:text-green-400'
                 : 'text-gray-700 hover:text-green-600 bg-black/5 dark:bg-white/5 dark:text-gray-300 dark:hover:text-green-400 hover:bg-black/3 dark:hover:bg-white/3'
             }
           `.trim()}