feat: 媒体流图片自适应显示(单图/2图/Telegram式相册)
- 单图气泡按真实比例显示:横图限高260px、过高裁上下;竖图完整铺满宽度不裁、无黑边 - 2张同类相册:都竖图左右并排、都横图上下堆叠,按比例不裁 - 3+张相册:Telegram式马赛克拼贴(竖主图占左+其余堆右 / 横主图占顶+其余排底) - 图片比例优先用后端width/height,缺失时从加载后的naturalWidth/Height读取 - 新增 constants/media.ts 统一尺寸规范;albumLayout 纯算法附单测 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -11,6 +11,12 @@ type BubbleImageProps = {
|
||||
fallbackSrc?: string | (string | undefined)[];
|
||||
className?: string;
|
||||
loading?: "lazy" | "eager";
|
||||
/**
|
||||
* Called once the active source loads, with the image's intrinsic pixel
|
||||
* size. Lets callers (e.g. single-image bubbles) adopt the real aspect
|
||||
* ratio without depending on backend-provided width/height.
|
||||
*/
|
||||
onNaturalSize?: (width: number, height: number) => void;
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -24,6 +30,7 @@ export function BubbleImage({
|
||||
fallbackSrc,
|
||||
className,
|
||||
loading,
|
||||
onNaturalSize,
|
||||
}: BubbleImageProps) {
|
||||
// Ordered, de-duplicated list of sources to attempt in turn.
|
||||
const candidates = useMemo(() => {
|
||||
@@ -62,6 +69,11 @@ export function BubbleImage({
|
||||
alt=""
|
||||
loading={loading}
|
||||
className={className}
|
||||
onLoad={(e) => {
|
||||
const img = e.currentTarget;
|
||||
if (img.naturalWidth && img.naturalHeight)
|
||||
onNaturalSize?.(img.naturalWidth, img.naturalHeight);
|
||||
}}
|
||||
onError={() => setAttempt((i) => i + 1)}
|
||||
/>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user