freefire
4f3f3a265c
新增模块： - 友链（friendlink）后端处理 + 前端管理页与友链板 - 书库（library）：导入、章节、封面、阅读页、横竖版自适应 AdaptiveCoverSlot - 顶栏导航（header_nav）配置与 MobileTabBar/MobileRailDrawers 移动端抽屉 - 排行榜 service 测试、站点页面测试、时间线发布（timeline_release） 其它改动： - 后端 handlers/services 全量小幅调整 - 前端组件、库函数、URL/品牌/站点 URL 工具更新 - Lightbox 图片、MdEntries 条目卡、coverColor 派生色相等前端能力
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import ImageLightbox from "@/components/markdown/ImageLightbox";
|
||
|
||
/**
|
||
* 静态图片图箱入口（区别于 markdown 管线的 MdImage）：
|
||
* 封面等非 markdown 图片点击进全屏图箱（单图，无多图切换）。
|
||
* 在 Link 内使用时 preventDefault + stopPropagation 阻断外层导航——
|
||
* 点图片本身是看图，点卡片其余区域仍走原链接。
|
||
*/
|
||
export default function LightboxImage({
|
||
src,
|
||
alt,
|
||
className,
|
||
}: {
|
||
src: string;
|
||
alt: string;
|
||
className?: string;
|
||
}) {
|
||
const [open, setOpen] = useState(false);
|
||
return (
|
||
<>
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src={src}
|
||
alt={alt}
|
||
className={`cursor-zoom-in${className ? ` ${className}` : ""}`}
|
||
loading="lazy"
|
||
decoding="async"
|
||
draggable={false}
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setOpen(true);
|
||
}}
|
||
/>
|
||
{open && (
|
||
<ImageLightbox
|
||
items={[{ src, alt }]}
|
||
index={0}
|
||
onClose={() => setOpen(false)}
|
||
onIndexChange={() => {}}
|
||
/>
|
||
)}
|
||
</>
|
||
);
|
||
}
|