yeyinly/MoonTVPlus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

美化电子书加载界面

Browse Source
This commit is contained in:
mtvpls
2026-05-08 15:28:05 +08:00
parent 85162d7413
commit 624cb9b084
2 changed files with 55 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/books/read/page.tsx
+30 -8
View File
@@ -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>
src/app/globals.css
+25
View File
@@ -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;
}