227 lines
10 KiB
TypeScript
227 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
BookOpen,
|
|
CheckCircle2,
|
|
Compass,
|
|
Library,
|
|
Search,
|
|
Sparkles,
|
|
XCircle,
|
|
} from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { useEffect, useMemo, useState } from 'react';
|
|
|
|
import { BookSource } from '@/lib/book.types';
|
|
|
|
function BooksHomeSkeleton() {
|
|
return (
|
|
<div className='grid gap-4 md:grid-cols-2 xl:grid-cols-3 animate-pulse'>
|
|
{Array.from({ length: 6 }).map((_, index) => (
|
|
<div
|
|
key={index}
|
|
className='rounded-[2rem] border border-emerald-100/80 bg-white/80 p-5 shadow-sm dark:border-emerald-500/10 dark:bg-gray-950/70'
|
|
>
|
|
<div className='h-5 w-32 rounded bg-emerald-100 dark:bg-gray-800' />
|
|
<div className='mt-3 flex gap-2'>
|
|
<div className='h-6 w-16 rounded-full bg-emerald-100 dark:bg-gray-800' />
|
|
<div className='h-6 w-16 rounded-full bg-emerald-100 dark:bg-gray-800' />
|
|
</div>
|
|
<div className='mt-5 flex gap-2'>
|
|
<div className='h-10 w-24 rounded-2xl bg-emerald-100 dark:bg-gray-800' />
|
|
<div className='h-10 w-24 rounded-2xl bg-emerald-100 dark:bg-gray-800' />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CapabilityPill({
|
|
enabled,
|
|
children,
|
|
}: {
|
|
enabled?: boolean;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const Icon = enabled ? CheckCircle2 : XCircle;
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium ${
|
|
enabled
|
|
? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300 dark:ring-emerald-500/20'
|
|
: 'bg-gray-100 text-gray-500 ring-1 ring-gray-200 dark:bg-gray-900 dark:text-gray-400 dark:ring-gray-800'
|
|
}`}
|
|
>
|
|
<Icon className='h-3.5 w-3.5' />
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export default function BooksHomePage() {
|
|
const [sources, setSources] = useState<BookSource[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (
|
|
typeof window !== 'undefined' &&
|
|
!(window as Window & { RUNTIME_CONFIG?: { BOOKS_ENABLED?: boolean } })
|
|
.RUNTIME_CONFIG?.BOOKS_ENABLED
|
|
) {
|
|
window.location.href = '/';
|
|
return;
|
|
}
|
|
fetch('/api/books/sources')
|
|
.then((res) => res.json())
|
|
.then((data) => setSources(data.sources || []))
|
|
.catch((err) => setError(err.message || '加载书源失败'))
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
const stats = useMemo(() => {
|
|
const catalogCount = sources.filter(
|
|
(source) => source.capabilities?.catalogSupported
|
|
).length;
|
|
const searchCount = sources.filter(
|
|
(source) => source.capabilities?.searchSupported
|
|
).length;
|
|
return [
|
|
{ label: '可用书源', value: sources.length },
|
|
{ label: '支持目录', value: catalogCount },
|
|
{ label: '支持搜索', value: searchCount },
|
|
];
|
|
}, [sources]);
|
|
|
|
return (
|
|
<div className='space-y-7'>
|
|
<section className='relative overflow-hidden rounded-[2.25rem] border border-emerald-100 bg-gradient-to-br from-emerald-50 via-white to-amber-50 p-6 shadow-sm dark:border-emerald-500/10 dark:from-emerald-950/30 dark:via-gray-950 dark:to-amber-950/20 sm:p-8'>
|
|
<div className='absolute -right-16 -top-20 h-56 w-56 rounded-full bg-emerald-300/20 blur-3xl dark:bg-emerald-500/10' />
|
|
<div className='absolute -bottom-24 left-1/3 h-56 w-56 rounded-full bg-amber-300/20 blur-3xl dark:bg-amber-500/10' />
|
|
<div className='relative grid gap-8 lg:grid-cols-[1.25fr_0.75fr] lg:items-end'>
|
|
<div>
|
|
<div className='inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-white/70 px-3 py-1 text-xs font-medium text-emerald-700 shadow-sm backdrop-blur dark:border-emerald-500/20 dark:bg-gray-950/50 dark:text-emerald-200'>
|
|
<Sparkles className='h-3.5 w-3.5' />
|
|
MoonTVPlus Reading Library
|
|
</div>
|
|
<h1 className='mt-5 max-w-3xl text-4xl font-black tracking-[-0.06em] text-emerald-950 dark:text-emerald-50 sm:text-6xl lg:text-7xl'>
|
|
电子书馆
|
|
</h1>
|
|
<div className='mt-6 flex flex-wrap gap-3'>
|
|
<Link
|
|
href='/books/search'
|
|
className='inline-flex cursor-pointer items-center gap-2 rounded-2xl bg-emerald-600 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-600/20 transition-colors duration-200 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-950'
|
|
>
|
|
<Search className='h-4 w-4' />
|
|
搜索书籍
|
|
</Link>
|
|
<Link
|
|
href='/books/shelf'
|
|
className='inline-flex cursor-pointer items-center gap-2 rounded-2xl border border-emerald-200 bg-white/70 px-5 py-3 text-sm font-semibold text-emerald-900 transition-colors duration-200 hover:bg-emerald-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:border-emerald-500/20 dark:bg-gray-950/50 dark:text-emerald-100 dark:hover:bg-emerald-950/30 dark:focus:ring-offset-gray-950'
|
|
>
|
|
<BookOpen className='h-4 w-4' />
|
|
我的书架
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className='grid grid-cols-3 gap-3'>
|
|
{stats.map((stat) => (
|
|
<div
|
|
key={stat.label}
|
|
className='rounded-3xl border border-white/80 bg-white/75 p-4 text-center shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/5'
|
|
>
|
|
<div className='text-2xl font-black text-emerald-700 dark:text-emerald-200'>
|
|
{stat.value}
|
|
</div>
|
|
<div className='mt-1 text-xs text-slate-500 dark:text-slate-400'>
|
|
{stat.label}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div className='flex items-end justify-between gap-3'>
|
|
<div>
|
|
<h2 className='text-xl font-bold tracking-tight text-slate-950 dark:text-white'>
|
|
书源入口
|
|
</h2>
|
|
<p className='mt-1 text-sm text-slate-500 dark:text-slate-400'>
|
|
选择一个书源开始浏览，或直接进入搜索。
|
|
</p>
|
|
</div>
|
|
<Library className='hidden h-6 w-6 text-emerald-500 sm:block' />
|
|
</div>
|
|
|
|
{loading ? <BooksHomeSkeleton /> : null}
|
|
{error ? (
|
|
<div className='rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-500/20 dark:bg-red-950/20 dark:text-red-300'>
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className='grid gap-4 md:grid-cols-2 xl:grid-cols-3'>
|
|
{sources.map((source) => (
|
|
<article
|
|
key={source.id}
|
|
className='group relative overflow-hidden rounded-[2rem] border border-emerald-100/80 bg-white/85 p-5 shadow-sm transition-colors duration-200 hover:border-emerald-200 hover:bg-white dark:border-emerald-500/10 dark:bg-gray-950/70 dark:hover:border-emerald-500/30'
|
|
>
|
|
<div className='absolute -right-10 -top-12 h-28 w-28 rounded-full bg-emerald-200/40 blur-2xl transition-opacity duration-200 group-hover:opacity-80 dark:bg-emerald-500/10' />
|
|
<div className='relative flex items-start justify-between gap-4'>
|
|
<div className='min-w-0'>
|
|
<div className='truncate text-base font-bold text-slate-950 dark:text-white'>
|
|
{source.name}
|
|
</div>
|
|
<div className='mt-1 text-xs font-medium uppercase tracking-[0.2em] text-emerald-500'>
|
|
{source.type === 'legado' ? 'Legado' : 'OPDS'}
|
|
</div>
|
|
</div>
|
|
<div className='flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600 ring-1 ring-emerald-100 dark:bg-emerald-500/10 dark:text-emerald-200 dark:ring-emerald-500/20'>
|
|
<Compass className='h-5 w-5' />
|
|
</div>
|
|
</div>
|
|
<div className='relative mt-4 flex flex-wrap gap-2'>
|
|
<CapabilityPill enabled={source.capabilities?.catalogSupported}>
|
|
分类{source.capabilities?.catalogSupported ? '可用' : '不可用'}
|
|
</CapabilityPill>
|
|
<CapabilityPill enabled={source.capabilities?.searchSupported}>
|
|
搜索{source.capabilities?.searchSupported ? '可用' : '不可用'}
|
|
</CapabilityPill>
|
|
</div>
|
|
<div className='relative mt-5 flex flex-wrap gap-2'>
|
|
{source.capabilities?.catalogSupported && (
|
|
<Link
|
|
href={`/books/catalog?sourceId=${encodeURIComponent(
|
|
source.id
|
|
)}`}
|
|
className='inline-flex cursor-pointer items-center gap-2 rounded-2xl bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors duration-200 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-950'
|
|
>
|
|
浏览目录
|
|
</Link>
|
|
)}
|
|
{source.capabilities?.searchSupported && (
|
|
<Link
|
|
href={`/books/search?sourceId=${encodeURIComponent(
|
|
source.id
|
|
)}`}
|
|
className='inline-flex cursor-pointer items-center gap-2 rounded-2xl border border-emerald-200 px-4 py-2.5 text-sm font-semibold text-emerald-800 transition-colors duration-200 hover:bg-emerald-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:border-emerald-500/20 dark:text-emerald-100 dark:hover:bg-emerald-950/30 dark:focus:ring-offset-gray-950'
|
|
>
|
|
搜索书籍
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
{!loading && !error && sources.length === 0 ? (
|
|
<div className='rounded-3xl border border-dashed border-emerald-200 bg-white/70 p-8 text-center text-sm text-slate-500 dark:border-emerald-500/20 dark:bg-gray-950/50 dark:text-slate-400'>
|
|
暂无可用书源
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|