From 624cb9b084ec0c2a3c9fdb48799eb591ec4cfea4 Mon Sep 17 00:00:00 2001
From: mtvpls <mtvpls@redaaa.ip-ddns.com>
Date: Fri, 8 May 2026 15:28:05 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96=E7=94=B5=E5=AD=90=E4=B9=A6?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/books/read/page.tsx | 38 +++++++++++++++++++++++++++++--------
 src/app/globals.css         | 25 ++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/app/books/read/page.tsx b/src/app/books/read/page.tsx
index f2a9b8b..adee9ea 100644
--- a/src/app/books/read/page.tsx
+++ b/src/app/books/read/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ChevronRight, ChevronUp, Gauge, Headphones, Loader2, Moon, Pause, Play, SkipBack, SkipForward, Square, Sun, Volume2, Waves, X } from 'lucide-react';
+import { BookOpen, ChevronRight, ChevronUp, Gauge, Headphones, Loader2, Moon, Pause, Play, SkipBack, SkipForward, Square, Sun, Volume2, Waves, X } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -1642,7 +1642,18 @@ export default function BookReadPage() {
   const displayedTtsTime = ttsSeeking ? ttsSeekValue : ttsCurrentTime;
 
   if (error) return <div className='p-4 text-sm text-red-500'>{error}</div>;
-  if (!manifest) return <div className='p-4 text-sm text-gray-500'>准备阅读器中...</div>;
+  if (!manifest) {
+    return (
+      <div className='flex h-[calc(100vh-3.5rem)] items-center justify-center bg-white px-4 dark:bg-gray-950'>
+        <div className='flex flex-col items-center gap-4 text-center'>
+          <div className='reader-book-loader'>
+            <BookOpen className='h-10 w-10' strokeWidth={1.75} />
+          </div>
+          <div className='text-sm text-gray-500 dark:text-gray-400'>准备阅读器中...</div>
+        </div>
+      </div>
+    );
+  }
 
   if (manifest.format === 'pdf') {
     if (!pdfBlobUrl) return <div className='p-4 text-sm text-gray-500'>PDF 加载中... {progressLabel}</div>;
@@ -1681,12 +1692,23 @@ export default function BookReadPage() {
                 <span>{progressLabel}</span>
               </div>
             </div>
-            <div className='space-y-3 rounded-3xl bg-gray-50 p-6 dark:bg-gray-900 animate-pulse'>
-              <div className='h-4 w-full rounded bg-gray-200 dark:bg-gray-800' />
-              <div className='h-4 w-11/12 rounded bg-gray-200 dark:bg-gray-800' />
-              <div className='h-4 w-10/12 rounded bg-gray-200 dark:bg-gray-800' />
-              <div className='h-4 w-full rounded bg-gray-200 dark:bg-gray-800' />
-              <div className='h-4 w-9/12 rounded bg-gray-200 dark:bg-gray-800' />
+            <div className='rounded-3xl bg-gray-50 p-6 dark:bg-gray-900'>
+              {fileLoadState === 'opening' ? (
+                <div className='flex min-h-32 flex-col items-center justify-center gap-4 text-center'>
+                  <div className='reader-book-loader'>
+                    <BookOpen className='h-10 w-10' strokeWidth={1.75} />
+                  </div>
+                  <div className='text-sm text-gray-500 dark:text-gray-400'>正在打开电子书...</div>
+                </div>
+              ) : (
+                <div className='space-y-3 animate-pulse'>
+                  <div className='h-4 w-full rounded bg-gray-200 dark:bg-gray-800' />
+                  <div className='h-4 w-11/12 rounded bg-gray-200 dark:bg-gray-800' />
+                  <div className='h-4 w-10/12 rounded bg-gray-200 dark:bg-gray-800' />
+                  <div className='h-4 w-full rounded bg-gray-200 dark:bg-gray-800' />
+                  <div className='h-4 w-9/12 rounded bg-gray-200 dark:bg-gray-800' />
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 2a0697a..92be39e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -245,3 +245,28 @@ div[data-media-provider] video {
     transform: scale(1.08);
   }
 }
+
+@keyframes reader-book-flip {
+  0%, 100% {
+    transform: perspective(120px) rotateY(0deg) translateY(0);
+  }
+  30% {
+    transform: perspective(120px) rotateY(-24deg) translateY(-2px);
+  }
+  60% {
+    transform: perspective(120px) rotateY(24deg) translateY(0);
+  }
+}
+
+.reader-book-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #0284c7;
+  animation: reader-book-flip 1.5s ease-in-out infinite;
+  transform-origin: center;
+}
+
+.dark .reader-book-loader {
+  color: #38bdf8;
+}