280 lines
13 KiB
TypeScript
280 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useMemo, useSyncExternalStore } from "react";
|
||
import { useTranslation } from "@/app/digital/i18n/navigation";
|
||
import { mediaUrl } from "@/app/lib/media";
|
||
import type { ResourceData } from "@/app/digital/lib/theme-data";
|
||
import DigitalThemeIcon, { type IconName } from "./DigitalThemeIcon";
|
||
|
||
const PER_PAGE_MOBILE = 4;
|
||
const PER_PAGE_PC = 8;
|
||
const BREAKPOINT = 768;
|
||
|
||
const panCategoryIconNames: Record<string, IconName> = {
|
||
docs: "file",
|
||
templates: "check",
|
||
firmware: "spark",
|
||
storage: "cloud",
|
||
};
|
||
|
||
function useIsPC() {
|
||
return useSyncExternalStore(
|
||
(callback) => {
|
||
if (typeof window === "undefined") return () => {};
|
||
const mq = window.matchMedia(`(min-width: ${BREAKPOINT}px)`);
|
||
const fn = () => callback();
|
||
mq.addEventListener("change", fn);
|
||
return () => mq.removeEventListener("change", fn);
|
||
},
|
||
() =>
|
||
typeof window !== "undefined" &&
|
||
window.matchMedia(`(min-width: ${BREAKPOINT}px)`).matches,
|
||
() => false
|
||
);
|
||
}
|
||
|
||
/** 每页条数：H5=4，PC=8；总数不足则全显 */
|
||
function getPerPage(total: number, isPC: boolean): number {
|
||
const cap = isPC ? PER_PAGE_PC : PER_PAGE_MOBILE;
|
||
return total <= cap ? total : cap;
|
||
}
|
||
|
||
type ResourceNavigationProps = {
|
||
data: ResourceData;
|
||
};
|
||
|
||
export default function ResourceNavigation({ data }: ResourceNavigationProps) {
|
||
const { t } = useTranslation("community");
|
||
const isPC = useIsPC();
|
||
const firstCategoryId = data.pan.categories[0]?.id ?? "";
|
||
const [activePanCategory, setActivePanCategory] = useState(firstCategoryId);
|
||
const [booksPage, setBooksPage] = useState(0);
|
||
const [productsPage, setProductsPage] = useState(0);
|
||
|
||
const activeCategory = data.pan.categories.find((c) => c.id === activePanCategory);
|
||
|
||
const booksPerPage = getPerPage(data.books.length, isPC);
|
||
const productsPerPage = getPerPage(data.products.length, isPC);
|
||
const booksTotalPages = Math.ceil(data.books.length / booksPerPage) || 1;
|
||
const productsTotalPages = Math.ceil(data.products.length / productsPerPage) || 1;
|
||
const safeBooksPage = Math.max(0, Math.min(booksPage, booksTotalPages - 1));
|
||
const safeProductsPage = Math.max(0, Math.min(productsPage, productsTotalPages - 1));
|
||
|
||
const paginatedBooks = useMemo(() => {
|
||
const start = safeBooksPage * booksPerPage;
|
||
return data.books.slice(start, start + booksPerPage);
|
||
}, [data.books, safeBooksPage, booksPerPage]);
|
||
|
||
const paginatedProducts = useMemo(() => {
|
||
const start = safeProductsPage * productsPerPage;
|
||
return data.products.slice(start, start + productsPerPage);
|
||
}, [data.products, safeProductsPage, productsPerPage]);
|
||
|
||
return (
|
||
<div className="dn-resources mt-12 space-y-16">
|
||
{/* 图书 - 封面+书名，数量少则大封面，多则分页 */}
|
||
<div>
|
||
<h3 className="dn-subsection-title mb-4 flex items-center gap-2 text-xl font-bold text-slate-900 dark:text-slate-100">
|
||
<DigitalThemeIcon name="book" emoji="📚" className="h-5 w-5" />
|
||
{t("resourceSections.books")}
|
||
{data.books.length > 0 && (
|
||
<span className="text-sm font-normal text-slate-500 dark:text-slate-400">
|
||
（{t("resourceSections.totalBooks").replace("{count}", String(data.books.length))}）
|
||
</span>
|
||
)}
|
||
</h3>
|
||
<div
|
||
className="grid grid-cols-2 gap-3 gap-y-4 sm:gap-4 md:grid-cols-8"
|
||
>
|
||
{paginatedBooks.map((book, i) => (
|
||
<a
|
||
key={`book-${booksPage}-${i}`}
|
||
href={book.href}
|
||
target="_blank"
|
||
rel="noopener noreferrer sponsored"
|
||
className="dn-resource-tile group flex cursor-pointer flex-col text-left focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-slate-50 dark:focus:ring-offset-slate-950"
|
||
>
|
||
<div
|
||
className="overflow-hidden rounded-lg border border-slate-200 bg-slate-100 shadow-sm transition-all group-hover:shadow-md dark:border-slate-700 dark:bg-slate-800"
|
||
style={{ aspectRatio: "2/3" }}
|
||
>
|
||
<img
|
||
src={mediaUrl(book.cover)}
|
||
alt={book.title}
|
||
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||
/>
|
||
</div>
|
||
<p className="mt-2 line-clamp-2 text-center text-xs font-medium text-slate-700 dark:text-slate-300 sm:text-sm">
|
||
{book.title}
|
||
</p>
|
||
</a>
|
||
))}
|
||
</div>
|
||
{booksTotalPages > 1 && (
|
||
<div className="dn-pagination mt-6 flex items-center justify-center gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => setBooksPage((p) => Math.max(0, p - 1))}
|
||
disabled={safeBooksPage === 0}
|
||
className="dn-icon-button flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
|
||
aria-label="上一页"
|
||
>
|
||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||
</svg>
|
||
</button>
|
||
<span className="px-4 text-sm text-slate-600 dark:text-slate-400">
|
||
{safeBooksPage + 1} / {booksTotalPages}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => setBooksPage((p) => Math.min(booksTotalPages - 1, p + 1))}
|
||
disabled={safeBooksPage === booksTotalPages - 1}
|
||
className="dn-icon-button flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
|
||
aria-label="下一页"
|
||
>
|
||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 商业数码 - 商品图+跳转电商 */}
|
||
<div>
|
||
<h3 className="dn-subsection-title mb-4 flex items-center gap-2 text-xl font-bold text-slate-900 dark:text-slate-100">
|
||
<DigitalThemeIcon name="shopping" emoji="🛒" className="h-5 w-5" />
|
||
{t("resourceSections.products")}
|
||
{data.products.length > 0 && (
|
||
<span className="text-sm font-normal text-slate-500 dark:text-slate-400">
|
||
（{t("resourceSections.totalProducts").replace("{count}", String(data.products.length))}）
|
||
</span>
|
||
)}
|
||
</h3>
|
||
<div
|
||
className="grid grid-cols-2 gap-3 gap-y-4 sm:gap-4 md:grid-cols-8"
|
||
>
|
||
{paginatedProducts.map((product, i) => (
|
||
<a
|
||
key={`product-${productsPage}-${i}`}
|
||
href={product.href}
|
||
target="_blank"
|
||
rel="noopener noreferrer sponsored"
|
||
className="dn-resource-tile group flex cursor-pointer flex-col text-left focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-slate-50 dark:focus:ring-offset-slate-950"
|
||
>
|
||
<div
|
||
className="overflow-hidden rounded-xl border border-slate-200 bg-white p-3 shadow-sm transition-all group-hover:shadow-md dark:border-slate-700 dark:bg-slate-900"
|
||
style={{ aspectRatio: "1/1" }}
|
||
>
|
||
<img
|
||
src={mediaUrl(product.image)}
|
||
alt={product.name}
|
||
className="h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
|
||
/>
|
||
</div>
|
||
<p className="mt-2 line-clamp-2 text-center text-xs font-medium text-slate-700 dark:text-slate-300 sm:text-sm">
|
||
{product.name}
|
||
</p>
|
||
</a>
|
||
))}
|
||
</div>
|
||
{productsTotalPages > 1 && (
|
||
<div className="dn-pagination mt-6 flex items-center justify-center gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => setProductsPage((p) => Math.max(0, p - 1))}
|
||
disabled={safeProductsPage === 0}
|
||
className="dn-icon-button flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
|
||
aria-label="上一页"
|
||
>
|
||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||
</svg>
|
||
</button>
|
||
<span className="px-4 text-sm text-slate-600 dark:text-slate-400">
|
||
{safeProductsPage + 1} / {productsTotalPages}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => setProductsPage((p) => Math.min(productsTotalPages - 1, p + 1))}
|
||
disabled={safeProductsPage === productsTotalPages - 1}
|
||
className="dn-icon-button flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
|
||
aria-label="下一页"
|
||
>
|
||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 网盘 - 分类 Tab */}
|
||
<div>
|
||
<h3 className="dn-subsection-title mb-4 flex items-center gap-2 text-xl font-bold text-slate-900 dark:text-slate-100">
|
||
<DigitalThemeIcon name="cloud" emoji="☁️" className="h-5 w-5" />
|
||
{t("resourceSections.pan")}
|
||
</h3>
|
||
<div className="dn-card dn-pan rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
|
||
<div className="dn-tabs flex flex-wrap gap-1 border-b border-slate-200 p-2 dark:border-slate-700">
|
||
{data.pan.categories.map((cat) => (
|
||
<button
|
||
key={cat.id}
|
||
type="button"
|
||
onClick={() => setActivePanCategory(cat.id)}
|
||
className={`dn-tab rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
|
||
activePanCategory === cat.id
|
||
? "dn-tab-active bg-sky-100 text-sky-700 dark:bg-sky-900/50 dark:text-sky-300"
|
||
: "text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
|
||
}`}
|
||
>
|
||
<DigitalThemeIcon
|
||
name={panCategoryIconNames[cat.id] ?? "file"}
|
||
emoji={cat.icon}
|
||
className="mr-1.5 inline h-4 w-4"
|
||
/>
|
||
{cat.title}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="p-4">
|
||
{activeCategory && (
|
||
<div
|
||
className="grid gap-3"
|
||
style={{
|
||
gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 260px), 1fr))",
|
||
}}
|
||
>
|
||
{activeCategory.items.map((item, i) => (
|
||
<a
|
||
key={i}
|
||
href={item.href}
|
||
target="_blank"
|
||
rel="noopener noreferrer sponsored"
|
||
className="dn-resource-link flex items-center gap-3 rounded-xl border border-slate-100 p-3 transition-colors hover:border-sky-200 hover:bg-sky-50/50 dark:border-slate-700 dark:hover:border-sky-800 dark:hover:bg-sky-900/20"
|
||
>
|
||
<div className="dn-icon-box flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-100 text-lg dark:bg-slate-800">
|
||
<DigitalThemeIcon
|
||
name={panCategoryIconNames[activeCategory.id] ?? "file"}
|
||
emoji={activeCategory.icon}
|
||
className="h-5 w-5"
|
||
/>
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="font-medium text-slate-900 dark:text-slate-100">{item.name}</div>
|
||
<div className="text-xs text-slate-500 dark:text-slate-400">{item.desc}</div>
|
||
</div>
|
||
<span className="shrink-0 text-sm font-medium text-sky-600">→</span>
|
||
</a>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
);
|
||
}
|