707 lines
26 KiB
TypeScript
707 lines
26 KiB
TypeScript
import Link from "next/link"
|
|
import { ArrowRight, Clock3, Flame, MessageSquare, Shuffle, Trophy } from "lucide-react"
|
|
import { formatViews } from "@/lib/utils"
|
|
import connectToMongoDB from "@/lib/mongoose"
|
|
import { Chapter } from "@/lib/models/chapter"
|
|
import { EditorRecommendation } from "@/lib/models/editor-recommendation"
|
|
import { UserRecommendation } from "@/lib/models/user-recommendation"
|
|
import { HomeHotCarousel, type HotCarouselItem } from "@/components/home-hot-carousel"
|
|
import { HomeRecommendationBoards } from "@/components/home-recommendation-boards"
|
|
|
|
import { prisma } from "@/lib/prisma"
|
|
|
|
export const dynamic = "force-dynamic"
|
|
|
|
type HomeNovel = {
|
|
id: string
|
|
slug: string
|
|
title: string
|
|
authorName: string
|
|
coverColor: string | null
|
|
coverUrl: string | null
|
|
rating: number
|
|
views: number
|
|
totalChapters: number
|
|
status: string
|
|
description: string
|
|
bookmarkCount: number
|
|
seriesId: string | null
|
|
updatedAt: Date
|
|
uploader?: {
|
|
name: string | null
|
|
role: "USER" | "MOD" | "ADMIN"
|
|
} | null
|
|
}
|
|
|
|
type EditorRecommendedItem = {
|
|
novel: HomeNovel
|
|
editorName: string
|
|
recommendCount: number
|
|
}
|
|
|
|
type RecommendedByCountItem = {
|
|
novel: HomeNovel
|
|
recommendCount: number
|
|
}
|
|
|
|
type RankingEntry = {
|
|
id: string
|
|
seriesId: string | null
|
|
novel: HomeNovel
|
|
aggregatedViews: number
|
|
}
|
|
|
|
type RecentCommentItem = {
|
|
id: string
|
|
content: string
|
|
createdAt: Date
|
|
user: {
|
|
name: string | null
|
|
}
|
|
novel: {
|
|
slug: string
|
|
title: string
|
|
}
|
|
}
|
|
|
|
type LatestChapterInfo = {
|
|
chapterNumber: number | null
|
|
chapterTitle: string | null
|
|
chapterCreatedAt: Date | null
|
|
}
|
|
|
|
const BASE_NOVEL_SELECT = {
|
|
id: true,
|
|
slug: true,
|
|
title: true,
|
|
authorName: true,
|
|
coverColor: true,
|
|
coverUrl: true,
|
|
rating: true,
|
|
views: true,
|
|
totalChapters: true,
|
|
status: true,
|
|
description: true,
|
|
bookmarkCount: true,
|
|
seriesId: true,
|
|
updatedAt: true,
|
|
uploader: {
|
|
select: {
|
|
name: true,
|
|
role: true,
|
|
},
|
|
},
|
|
} as const
|
|
|
|
function toUTCDateOnly(value: Date): Date {
|
|
return new Date(Date.UTC(value.getUTCFullYear(), value.getUTCMonth(), value.getUTCDate()))
|
|
}
|
|
|
|
function shuffleRows<T>(rows: T[]): T[] {
|
|
const next = [...rows]
|
|
for (let i = next.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1))
|
|
const tmp = next[i]
|
|
next[i] = next[j]
|
|
next[j] = tmp
|
|
}
|
|
return next
|
|
}
|
|
|
|
function fillUniqueRows<T extends { id: string }>(primary: T[], fallback: T[], target: number): T[] {
|
|
const picked = new Set<string>()
|
|
const output: T[] = []
|
|
|
|
for (const row of primary) {
|
|
if (picked.has(row.id)) continue
|
|
picked.add(row.id)
|
|
output.push(row)
|
|
if (output.length >= target) return output
|
|
}
|
|
|
|
for (const row of fallback) {
|
|
if (picked.has(row.id)) continue
|
|
picked.add(row.id)
|
|
output.push(row)
|
|
if (output.length >= target) return output
|
|
}
|
|
|
|
return output
|
|
}
|
|
|
|
function formatRelativeTime(value: Date | null | undefined): string {
|
|
if (!value) return "Vừa cập nhật"
|
|
|
|
const now = Date.now()
|
|
const ts = value.getTime()
|
|
const diff = Math.max(0, now - ts)
|
|
const minute = 60 * 1000
|
|
const hour = 60 * minute
|
|
const day = 24 * hour
|
|
|
|
if (diff < minute) return "Vừa xong"
|
|
if (diff < hour) return `${Math.floor(diff / minute)} phút trước`
|
|
if (diff < day) return `${Math.floor(diff / hour)} giờ trước`
|
|
if (diff < day * 30) return `${Math.floor(diff / day)} ngày trước`
|
|
|
|
return value.toLocaleDateString("vi-VN")
|
|
}
|
|
|
|
function compactLine(text: string, max = 140): string {
|
|
const normalized = text.replace(/\s+/g, " ").trim()
|
|
if (normalized.length <= max) return normalized
|
|
return `${normalized.slice(0, max).trim()}...`
|
|
}
|
|
|
|
function collapseSeriesRows<T extends { id: string; seriesId?: string | null }>(rows: T[]): T[] {
|
|
const pickedSeries = new Set<string>()
|
|
const output: T[] = []
|
|
|
|
for (const row of rows) {
|
|
if (!row.seriesId) {
|
|
output.push(row)
|
|
continue
|
|
}
|
|
|
|
if (pickedSeries.has(row.seriesId)) continue
|
|
pickedSeries.add(row.seriesId)
|
|
output.push(row)
|
|
}
|
|
|
|
return output
|
|
}
|
|
|
|
function withTimeout<T>(promise: Promise<T>, label: string, timeoutMs = 4000): Promise<T> {
|
|
return new Promise<T>((resolve, reject) => {
|
|
const timer = setTimeout(() => {
|
|
reject(new Error(`${label} timed out after ${timeoutMs}ms`))
|
|
}, timeoutMs)
|
|
|
|
promise.then(
|
|
(value) => {
|
|
clearTimeout(timer)
|
|
resolve(value)
|
|
},
|
|
(error) => {
|
|
clearTimeout(timer)
|
|
reject(error)
|
|
}
|
|
)
|
|
})
|
|
}
|
|
|
|
async function fetchRankingByDailyViews(options?: { since?: Date; take?: number }): Promise<RankingEntry[]> {
|
|
const delegate = (prisma as any).novelViewDaily
|
|
if (!delegate || typeof delegate.groupBy !== "function") {
|
|
return []
|
|
}
|
|
|
|
let grouped: Array<{ novelId: string; _sum: { views: number | null } }> = []
|
|
try {
|
|
grouped = await delegate.groupBy({
|
|
by: ["novelId"],
|
|
where: options?.since ? { day: { gte: toUTCDateOnly(options.since) } } : undefined,
|
|
_sum: { views: true },
|
|
orderBy: { _sum: { views: "desc" } },
|
|
take: options?.take || 300,
|
|
})
|
|
} catch (error) {
|
|
console.warn("novelViewDaily aggregate unavailable, fallback to Novel.views", error)
|
|
return []
|
|
}
|
|
|
|
if (grouped.length === 0) return []
|
|
|
|
const ids = grouped.map((row) => row.novelId)
|
|
const novels = await prisma.novel.findMany({
|
|
where: { id: { in: ids } },
|
|
select: BASE_NOVEL_SELECT,
|
|
})
|
|
|
|
const novelMap = new Map(novels.map((novel) => [novel.id, novel as HomeNovel]))
|
|
const entries: RankingEntry[] = []
|
|
|
|
for (const row of grouped) {
|
|
const novel = novelMap.get(row.novelId)
|
|
if (!novel) continue
|
|
|
|
entries.push({
|
|
id: novel.id,
|
|
seriesId: novel.seriesId,
|
|
novel,
|
|
aggregatedViews: row._sum.views || 0,
|
|
})
|
|
}
|
|
|
|
return entries
|
|
}
|
|
|
|
function toHotCarouselItems(rows: Array<RankingEntry & { source: HotCarouselItem["hotSource"] }>): HotCarouselItem[] {
|
|
return rows.map((row) => ({
|
|
id: row.novel.id,
|
|
slug: row.novel.slug,
|
|
title: row.novel.title,
|
|
authorName: row.novel.authorName,
|
|
description: row.novel.description,
|
|
coverUrl: row.novel.coverUrl,
|
|
totalChapters: row.novel.totalChapters,
|
|
rating: row.novel.rating,
|
|
views: row.aggregatedViews,
|
|
status: row.novel.status,
|
|
hotSource: row.source,
|
|
}))
|
|
}
|
|
|
|
async function fetchManualRecommendationData(): Promise<{
|
|
recommendedByCountItems: RecommendedByCountItem[]
|
|
editorRecommendedItems: EditorRecommendedItem[]
|
|
}> {
|
|
try {
|
|
await connectToMongoDB()
|
|
const editorDocs = (await EditorRecommendation.find({}).sort({ createdAt: -1 }).limit(2000).lean()) as Array<{
|
|
novelId: string
|
|
editorId: string
|
|
createdAt?: Date
|
|
}>
|
|
const userDocs = (await UserRecommendation.find({}).sort({ createdAt: -1 }).limit(5000).lean()) as Array<{
|
|
novelId: string
|
|
createdAt?: Date
|
|
}>
|
|
|
|
if (editorDocs.length === 0 && userDocs.length === 0) {
|
|
return {
|
|
recommendedByCountItems: [],
|
|
editorRecommendedItems: [],
|
|
}
|
|
}
|
|
|
|
const novelIds = Array.from(
|
|
new Set(
|
|
[...editorDocs.map((doc) => doc.novelId), ...userDocs.map((doc) => doc.novelId)].filter(Boolean)
|
|
)
|
|
)
|
|
const editorIds = Array.from(new Set(editorDocs.map((doc) => doc.editorId).filter(Boolean)))
|
|
|
|
const [novels, editors] = await Promise.all([
|
|
prisma.novel.findMany({
|
|
where: { id: { in: novelIds } },
|
|
select: BASE_NOVEL_SELECT,
|
|
}),
|
|
prisma.user.findMany({
|
|
where: { id: { in: editorIds } },
|
|
select: { id: true, name: true },
|
|
}),
|
|
])
|
|
|
|
const novelMap = new Map(novels.map((novel) => [novel.id, novel as HomeNovel]))
|
|
const editorMap = new Map(editors.map((editor) => [editor.id, editor]))
|
|
const recommendCountMap = new Map<string, number>()
|
|
|
|
for (const doc of editorDocs) {
|
|
recommendCountMap.set(doc.novelId, (recommendCountMap.get(doc.novelId) || 0) + 1)
|
|
}
|
|
|
|
for (const doc of userDocs) {
|
|
recommendCountMap.set(doc.novelId, (recommendCountMap.get(doc.novelId) || 0) + 1)
|
|
}
|
|
|
|
const recommendedByCountItems = Array.from(recommendCountMap.entries())
|
|
.map(([novelId, recommendCount]) => ({
|
|
novel: novelMap.get(novelId),
|
|
recommendCount,
|
|
}))
|
|
.filter((row): row is { novel: HomeNovel; recommendCount: number } => Boolean(row.novel))
|
|
.sort((a, b) => {
|
|
if (b.recommendCount !== a.recommendCount) return b.recommendCount - a.recommendCount
|
|
if (b.novel.rating !== a.novel.rating) return b.novel.rating - a.novel.rating
|
|
return b.novel.views - a.novel.views
|
|
})
|
|
|
|
const editorRecommendedItems = editorDocs
|
|
.map((doc) => {
|
|
const novel = novelMap.get(doc.novelId)
|
|
if (!novel) return null
|
|
|
|
return {
|
|
novel,
|
|
editorName: editorMap.get(doc.editorId)?.name || "Biên tập viên",
|
|
recommendCount: recommendCountMap.get(doc.novelId) || 0,
|
|
createdAt: doc.createdAt ? new Date(doc.createdAt).getTime() : 0,
|
|
}
|
|
})
|
|
.filter((item): item is NonNullable<typeof item> => Boolean(item))
|
|
.sort((a, b) => {
|
|
if (b.recommendCount !== a.recommendCount) return b.recommendCount - a.recommendCount
|
|
return b.createdAt - a.createdAt
|
|
})
|
|
.map((item) => ({
|
|
novel: item.novel,
|
|
editorName: item.editorName,
|
|
recommendCount: item.recommendCount,
|
|
}))
|
|
|
|
return {
|
|
recommendedByCountItems,
|
|
editorRecommendedItems,
|
|
}
|
|
} catch (error) {
|
|
console.warn("Homepage manual recommendation query failed", error)
|
|
return {
|
|
recommendedByCountItems: [],
|
|
editorRecommendedItems: [],
|
|
}
|
|
}
|
|
}
|
|
|
|
function RankingBoard({
|
|
title,
|
|
entries,
|
|
emptyText,
|
|
}: {
|
|
title: string
|
|
entries: RankingEntry[]
|
|
emptyText: string
|
|
}) {
|
|
return (
|
|
<section className="rounded-2xl border border-border/70 bg-card/70 p-4 backdrop-blur">
|
|
<div className="mb-3 flex items-center gap-2">
|
|
<Trophy className="h-4 w-4 text-primary" />
|
|
<h3 className="text-sm font-semibold uppercase tracking-wide text-foreground/90">{title}</h3>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{entries.length > 0 ? entries.map((entry, index) => (
|
|
<Link
|
|
key={entry.id}
|
|
href={`/truyen/${entry.novel.slug}`}
|
|
className="group flex items-center gap-3 rounded-lg border border-border/70 bg-background/70 p-2.5 transition hover:border-primary/40"
|
|
>
|
|
<span className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/15 text-xs font-bold text-primary">
|
|
{index + 1}
|
|
</span>
|
|
<img
|
|
src={entry.novel.coverUrl || "/default-cover.svg"}
|
|
alt={entry.novel.title}
|
|
className="h-12 w-9 shrink-0 rounded-md border border-border/70 object-cover"
|
|
/>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium text-foreground group-hover:text-primary">{entry.novel.title}</p>
|
|
<p className="text-xs text-muted-foreground">{formatViews(entry.aggregatedViews)} lượt đọc</p>
|
|
</div>
|
|
</Link>
|
|
)) : (
|
|
<p className="text-sm text-muted-foreground">{emptyText}</p>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default async function HomePage() {
|
|
let hotSlides: HotCarouselItem[] = []
|
|
let randomNovels: HomeNovel[] = []
|
|
let recommendedByCountItems: RecommendedByCountItem[] = []
|
|
let editorRecommendedItems: EditorRecommendedItem[] = []
|
|
let latestNovels: HomeNovel[] = []
|
|
let recentComments: RecentCommentItem[] = []
|
|
let weeklyRanking: RankingEntry[] = []
|
|
let monthlyRanking: RankingEntry[] = []
|
|
let allTimeRanking: RankingEntry[] = []
|
|
const latestChapterMap = new Map<string, LatestChapterInfo>()
|
|
|
|
try {
|
|
const now = new Date()
|
|
const weekStart = new Date(now)
|
|
weekStart.setDate(now.getDate() - 7)
|
|
const monthStart = new Date(now)
|
|
monthStart.setDate(now.getDate() - 30)
|
|
|
|
const [
|
|
weeklyResult,
|
|
monthlyResult,
|
|
allTimeResult,
|
|
popularFallbackResult,
|
|
randomPoolResult,
|
|
recommendationResult,
|
|
commentsResult,
|
|
] = await Promise.allSettled([
|
|
withTimeout(fetchRankingByDailyViews({ since: weekStart, take: 600 }), "Homepage weekly ranking"),
|
|
withTimeout(fetchRankingByDailyViews({ since: monthStart, take: 600 }), "Homepage monthly ranking"),
|
|
withTimeout(fetchRankingByDailyViews({ take: 800 }), "Homepage all-time ranking"),
|
|
withTimeout(prisma.novel.findMany({
|
|
take: 400,
|
|
select: BASE_NOVEL_SELECT,
|
|
orderBy: [{ views: "desc" }, { updatedAt: "desc" }],
|
|
}), "Homepage popular fallback"),
|
|
withTimeout(prisma.novel.findMany({
|
|
take: 420,
|
|
select: BASE_NOVEL_SELECT,
|
|
orderBy: [{ updatedAt: "desc" }],
|
|
}), "Homepage random pool"),
|
|
withTimeout(fetchManualRecommendationData(), "Homepage recommendations"),
|
|
withTimeout(prisma.comment.findMany({
|
|
take: 10,
|
|
orderBy: { createdAt: "desc" },
|
|
select: {
|
|
id: true,
|
|
content: true,
|
|
createdAt: true,
|
|
user: { select: { name: true } },
|
|
novel: { select: { slug: true, title: true } },
|
|
},
|
|
}), "Homepage comments"),
|
|
])
|
|
|
|
if (weeklyResult.status === "rejected") console.warn("Homepage weekly ranking query failed", weeklyResult.reason)
|
|
if (monthlyResult.status === "rejected") console.warn("Homepage monthly ranking query failed", monthlyResult.reason)
|
|
if (allTimeResult.status === "rejected") console.warn("Homepage all-time ranking query failed", allTimeResult.reason)
|
|
if (popularFallbackResult.status === "rejected") console.warn("Homepage popular fallback query failed", popularFallbackResult.reason)
|
|
if (randomPoolResult.status === "rejected") console.warn("Homepage random pool query failed", randomPoolResult.reason)
|
|
if (recommendationResult.status === "rejected") console.warn("Homepage recommendation query failed", recommendationResult.reason)
|
|
if (commentsResult.status === "rejected") console.warn("Homepage comments query failed", commentsResult.reason)
|
|
|
|
const weeklyRaw = weeklyResult.status === "fulfilled" ? weeklyResult.value : []
|
|
const monthlyRaw = monthlyResult.status === "fulfilled" ? monthlyResult.value : []
|
|
const allTimeRaw = allTimeResult.status === "fulfilled" ? allTimeResult.value : []
|
|
const popularFallbackRaw = popularFallbackResult.status === "fulfilled" ? popularFallbackResult.value : []
|
|
const randomPoolRaw = randomPoolResult.status === "fulfilled" ? randomPoolResult.value : []
|
|
const recommendationData = recommendationResult.status === "fulfilled"
|
|
? recommendationResult.value
|
|
: { recommendedByCountItems: [], editorRecommendedItems: [] }
|
|
const commentsPool = commentsResult.status === "fulfilled" ? commentsResult.value : []
|
|
|
|
const popularFallbackRows: RankingEntry[] = (popularFallbackRaw as HomeNovel[]).map((novel) => ({
|
|
id: novel.id,
|
|
seriesId: novel.seriesId,
|
|
novel,
|
|
aggregatedViews: novel.views,
|
|
}))
|
|
|
|
weeklyRanking = fillUniqueRows(collapseSeriesRows(weeklyRaw), collapseSeriesRows(popularFallbackRows), 5)
|
|
monthlyRanking = fillUniqueRows(collapseSeriesRows(monthlyRaw), collapseSeriesRows(popularFallbackRows), 5)
|
|
allTimeRanking = fillUniqueRows(collapseSeriesRows(allTimeRaw), collapseSeriesRows(popularFallbackRows), 5)
|
|
|
|
const hotWeekly = weeklyRanking.slice(0, 5).map((entry) => ({ ...entry, source: "week" as const }))
|
|
const hotMonthly = monthlyRanking.slice(0, 5).map((entry) => ({ ...entry, source: "month" as const }))
|
|
const hotAllTime = allTimeRanking.slice(0, 8).map((entry) => ({ ...entry, source: "all" as const }))
|
|
|
|
hotSlides = fillUniqueRows(
|
|
toHotCarouselItems([...hotWeekly, ...hotMonthly]),
|
|
toHotCarouselItems(hotAllTime),
|
|
10,
|
|
)
|
|
|
|
const usedHotIds = new Set(hotSlides.map((item) => item.id))
|
|
const randomPool = randomPoolRaw as HomeNovel[]
|
|
const randomCandidates = collapseSeriesRows(shuffleRows(randomPool)).filter((item) => !usedHotIds.has(item.id))
|
|
randomNovels = fillUniqueRows(randomCandidates, shuffleRows(randomPool), 12)
|
|
|
|
recommendedByCountItems = recommendationData.recommendedByCountItems
|
|
editorRecommendedItems = recommendationData.editorRecommendedItems
|
|
|
|
recentComments = commentsPool as RecentCommentItem[]
|
|
|
|
try {
|
|
// Latest-updated list is based only on newly created chapters, not on novel metadata edits.
|
|
// Sampling recent inserts by Mongo _id keeps this query on the default index and avoids scanning the whole collection.
|
|
await withTimeout(connectToMongoDB(), "Homepage chapter Mongo connect")
|
|
const recentChapterRows = await withTimeout(
|
|
Chapter.find(
|
|
{},
|
|
{
|
|
novelId: 1,
|
|
number: 1,
|
|
title: 1,
|
|
createdAt: 1,
|
|
}
|
|
)
|
|
.sort({ _id: -1 })
|
|
.limit(400)
|
|
.lean() as Promise<Array<{
|
|
novelId?: string
|
|
number?: number
|
|
title?: string
|
|
createdAt?: Date
|
|
}>>,
|
|
"Homepage recent chapters"
|
|
)
|
|
|
|
const latestNovelIdsByChapter: string[] = []
|
|
const latestSeenNovelIds = new Set<string>()
|
|
|
|
for (const row of recentChapterRows) {
|
|
const novelId = String(row.novelId || "").trim()
|
|
if (!novelId || latestSeenNovelIds.has(novelId)) continue
|
|
|
|
latestSeenNovelIds.add(novelId)
|
|
latestNovelIdsByChapter.push(novelId)
|
|
latestChapterMap.set(novelId, {
|
|
chapterNumber: typeof row.number === "number" ? row.number : null,
|
|
chapterTitle: typeof row.title === "string" ? row.title : null,
|
|
chapterCreatedAt: row.createdAt ? new Date(row.createdAt) : null,
|
|
})
|
|
|
|
if (latestNovelIdsByChapter.length >= 500) break
|
|
}
|
|
|
|
if (latestNovelIdsByChapter.length > 0) {
|
|
const latestNovelPool = await withTimeout(
|
|
prisma.novel.findMany({
|
|
where: { id: { in: latestNovelIdsByChapter } },
|
|
select: BASE_NOVEL_SELECT,
|
|
}),
|
|
"Homepage latest novel pool"
|
|
)
|
|
|
|
const latestNovelMap = new Map(latestNovelPool.map((novel) => [novel.id, novel as HomeNovel]))
|
|
const orderedLatestByChapter = latestNovelIdsByChapter
|
|
.map((id) => latestNovelMap.get(id))
|
|
.filter((row): row is HomeNovel => Boolean(row))
|
|
|
|
latestNovels = collapseSeriesRows(orderedLatestByChapter).slice(0, 5)
|
|
}
|
|
} catch (error) {
|
|
console.warn("Homepage latest chapter section skipped", error)
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch data for homepage during build/runtime", error)
|
|
}
|
|
|
|
return (
|
|
<div className="mx-auto max-w-7xl space-y-10 px-4 py-6">
|
|
<section>
|
|
<div className="mb-4 flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<h1 className="inline-flex items-center gap-2 text-2xl font-bold text-foreground md:text-3xl">
|
|
<Flame className="h-6 w-6 text-primary" />
|
|
Truyện hot hôm nay
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">Mỗi lần trượt hiển thị 1 truyện, dữ liệu lấy từ log đọc theo tuần và tháng.</p>
|
|
</div>
|
|
<Link href="/tim-kiem?sort=popular" className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline">
|
|
Xem tất cả <ArrowRight className="h-3.5 w-3.5" />
|
|
</Link>
|
|
</div>
|
|
|
|
{hotSlides.length > 0 ? (
|
|
<HomeHotCarousel items={hotSlides} />
|
|
) : (
|
|
<p className="rounded-xl border border-border bg-card p-4 text-sm text-muted-foreground">Chưa có dữ liệu hot để hiển thị.</p>
|
|
)}
|
|
</section>
|
|
|
|
<section>
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h2 className="inline-flex items-center gap-2 text-xl font-bold text-foreground"><Shuffle className="h-5 w-5 text-primary" />Truyện ngẫu nhiên</h2>
|
|
<span className="text-xs text-muted-foreground">Luôn cố gắng lấp đầy đủ 2 hàng</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
|
|
{randomNovels.length > 0 ? randomNovels.map((novel) => (
|
|
<Link
|
|
key={novel.id}
|
|
href={`/truyen/${novel.slug}`}
|
|
className="group overflow-hidden rounded-xl border border-border/70 bg-card transition hover:border-primary/40"
|
|
>
|
|
<div className="relative aspect-[3/4] w-full overflow-hidden bg-muted/50">
|
|
<img
|
|
src={novel.coverUrl || "/default-cover.svg"}
|
|
alt={novel.title}
|
|
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1 p-3">
|
|
<h3 className="line-clamp-2 text-sm font-semibold text-foreground group-hover:text-primary">{novel.title}</h3>
|
|
<p className="truncate text-xs text-muted-foreground">{novel.authorName}</p>
|
|
<p className="text-[11px] text-muted-foreground">{formatViews(novel.views)} lượt đọc</p>
|
|
</div>
|
|
</Link>
|
|
)) : (
|
|
<p className="col-span-full text-sm text-muted-foreground">Không có truyện để hiển thị.</p>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<HomeRecommendationBoards topItems={recommendedByCountItems} editorItems={editorRecommendedItems} pageSize={5} />
|
|
|
|
<section>
|
|
<div className="mb-4">
|
|
<h2 className="text-xl font-bold text-foreground">Bảng xếp hạng độ hot</h2>
|
|
<p className="text-sm text-muted-foreground">So sánh độ nóng theo tuần, tháng và toàn thời gian.</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 lg:grid-cols-3">
|
|
<RankingBoard title="Hot theo tuần" entries={weeklyRanking} emptyText="Tuần này chưa có dữ liệu nổi bật." />
|
|
<RankingBoard title="Hot theo tháng" entries={monthlyRanking} emptyText="Tháng này chưa có dữ liệu nổi bật." />
|
|
<RankingBoard title="Hot toàn thời gian" entries={allTimeRanking} emptyText="Chưa có dữ liệu toàn thời gian." />
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid gap-6 lg:grid-cols-2">
|
|
<div className="rounded-2xl border border-border/70 bg-card/70 p-4">
|
|
<div className="mb-4 flex flex-wrap items-center justify-between gap-2">
|
|
<h2 className="inline-flex items-center gap-2 text-xl font-bold text-foreground"><Clock3 className="h-5 w-5 text-primary" />Truyện mới cập nhật</h2>
|
|
<Link href="/tim-kiem?sort=latest" className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline">
|
|
Xem tất cả <ArrowRight className="h-3.5 w-3.5" />
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{latestNovels.length > 0 ? latestNovels.map((novel) => {
|
|
const chapter = latestChapterMap.get(novel.id)
|
|
const chapterLabel = chapter?.chapterNumber ? `Chương ${chapter.chapterNumber}` : "Chưa có chương"
|
|
const chapterTitle = chapter?.chapterTitle ? compactLine(chapter.chapterTitle, 100) : "Đang cập nhật nội dung chương"
|
|
const updatedTime = formatRelativeTime(chapter?.chapterCreatedAt || novel.updatedAt)
|
|
|
|
return (
|
|
<Link
|
|
key={novel.id}
|
|
href={`/truyen/${novel.slug}`}
|
|
className="group flex items-center gap-3 rounded-xl border border-border bg-background/80 p-3 transition hover:border-primary/40"
|
|
>
|
|
<img
|
|
src={novel.coverUrl || "/default-cover.svg"}
|
|
alt={novel.title}
|
|
className="h-20 w-14 shrink-0 rounded-md border border-border/70 object-cover"
|
|
/>
|
|
<div className="min-w-0 flex-1">
|
|
<h3 className="line-clamp-1 text-sm font-semibold text-foreground group-hover:text-primary">{novel.title}</h3>
|
|
<p className="text-xs text-muted-foreground">{novel.authorName}</p>
|
|
<p className="mt-1 text-xs text-primary">{chapterLabel}</p>
|
|
<p className="line-clamp-1 text-xs text-muted-foreground">{chapterTitle}</p>
|
|
</div>
|
|
<div className="text-right text-[11px] text-muted-foreground">{updatedTime}</div>
|
|
</Link>
|
|
)
|
|
}) : (
|
|
<p className="text-sm text-muted-foreground">Chưa có truyện mới cập nhật.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<aside className="rounded-2xl border border-border/70 bg-card/70 p-4">
|
|
<h2 className="mb-4 inline-flex items-center gap-2 text-xl font-bold text-foreground"><MessageSquare className="h-5 w-5 text-primary" />Bình luận mới</h2>
|
|
|
|
<div className="space-y-2">
|
|
{recentComments.length > 0 ? recentComments.map((comment) => (
|
|
<Link
|
|
key={comment.id}
|
|
href={`/truyen/${comment.novel.slug}`}
|
|
className="group block rounded-lg border border-border bg-background/80 p-3 transition hover:border-primary/40"
|
|
>
|
|
<div className="mb-1 flex items-center justify-between gap-2 text-xs text-muted-foreground">
|
|
<span className="truncate">{comment.user.name || "Người dùng"}</span>
|
|
<span>{formatRelativeTime(comment.createdAt)}</span>
|
|
</div>
|
|
<p className="truncate text-xs font-medium text-primary">{comment.novel.title}</p>
|
|
<p className="mt-1 line-clamp-2 text-sm text-foreground/90">{compactLine(comment.content, 120)}</p>
|
|
</Link>
|
|
)) : (
|
|
<p className="text-sm text-muted-foreground">Chưa có bình luận mới.</p>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|