freefire
ff2ab286fb
新增： - 书库导入导出（library_import/library_export）及测试 - 图片变体生成（image_variants）与响应式图片（responsiveImage） - 书籍搜索（bookSearch）+ BookSearch/LibrarySearchGrid 组件 - 小组件运行时（widgetRuntime）与静态检查（widgetLint） - 上传缓存中间件（upload_cache）与字体 CSS 提取脚本 其它： - 后端 handlers/services 全量调整 - 前端页面、组件、库函数与配置更新
63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import ImageLightbox from "@/components/markdown/ImageLightbox";
|
||
import { variantURL, widthSrcSet } from "@/lib/responsiveImage";
|
||
|
||
/**
|
||
* 静态图片图箱入口（区别于 markdown 管线的 MdImage）：
|
||
* 封面等非 markdown 图片点击进全屏图箱（单图，无多图切换）。
|
||
* 在 Link 内使用时 preventDefault + stopPropagation 阻断外层导航——
|
||
* 点图片本身是看图，点卡片其余区域仍走原链接。
|
||
*
|
||
* 可变宽度位可传 variantWidths（白名单档位）+ sizes：页面内显示变体，
|
||
* 图箱始终打开 data-full 指向的原图。
|
||
*/
|
||
export default function LightboxImage({
|
||
src,
|
||
alt,
|
||
className,
|
||
variantWidths,
|
||
sizes,
|
||
}: {
|
||
src: string;
|
||
alt: string;
|
||
className?: string;
|
||
/** 传入白名单档位则输出宽度 srcset；不传则直连原图 */
|
||
variantWidths?: readonly number[];
|
||
/** 配合 srcset 的 sizes 提示 */
|
||
sizes?: string;
|
||
}) {
|
||
const [open, setOpen] = useState(false);
|
||
const hasVariants = !!variantWidths && variantWidths.length > 0;
|
||
return (
|
||
<>
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src={hasVariants ? variantURL(src, variantWidths[0]) : src}
|
||
srcSet={hasVariants ? widthSrcSet(src, variantWidths) : undefined}
|
||
sizes={hasVariants ? sizes : undefined}
|
||
alt={alt}
|
||
data-full={src}
|
||
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={() => {}}
|
||
/>
|
||
)}
|
||
</>
|
||
);
|
||
}
|