feat: 友链/书库/移动端导航/排行榜等多模块功能
新增模块: - 友链(friendlink)后端处理 + 前端管理页与友链板 - 书库(library):导入、章节、封面、阅读页、横竖版自适应 AdaptiveCoverSlot - 顶栏导航(header_nav)配置与 MobileTabBar/MobileRailDrawers 移动端抽屉 - 排行榜 service 测试、站点页面测试、时间线发布(timeline_release) 其它改动: - 后端 handlers/services 全量小幅调整 - 前端组件、库函数、URL/品牌/站点 URL 工具更新 - Lightbox 图片、MdEntries 条目卡、coverColor 派生色相等前端能力
This commit is contained in:
48
frontend/components/LightboxImage.tsx
Normal file
48
frontend/components/LightboxImage.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
"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={() => {}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user