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>

src/components/messageStream/bubbles/AlbumBubble.tsx

@@ -1,24 +1,16 @@
 import { useI18n } from "../../../i18n";
 import type { Post } from "../../../types/post";
+import { ALBUM_GAP, ALBUM_MAX_HEIGHT } from "../../../constants/media";
 import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
 import { BubbleImage } from "../BubbleImage";
+import { useImageRatios } from "../hooks/useImageRatios";
 import { useLightbox } from "../overlays/ImageLightbox";
 import { autolink } from "../utils/autolink";
+import { computeAlbumLayout } from "../utils/albumLayout";
 import { postDisplayText } from "../utils/postText";
 
 const MAX_VISIBLE = 4;
 
-function albumGridClass(count: number) {
-  const height = "h-[230px] min-[440px]:h-[250px] md:h-[300px] lg:h-[340px]";
-  if (count === 2) return `${height} grid grid-cols-1 grid-rows-2`;
-  return `${height} grid grid-cols-2 grid-rows-2`;
-}
-
-function albumItemClass(index: number, count: number) {
-  if (count === 3 && index === 0) return "row-span-2";
-  return "";
-}
-
 export function AlbumBubble({ post }: { post: Post }) {
   const { openLightbox } = useLightbox();
   const { lang } = useI18n();
@@ -26,20 +18,40 @@ export function AlbumBubble({ post }: { post: Post }) {
   const text = postDisplayText(post, lang);
   const visible = images.slice(0, MAX_VISIBLE);
   const extra = images.length - MAX_VISIBLE;
-  const layoutCount = Math.min(images.length, MAX_VISIBLE);
+
+  const sources = visible.map(
+    (att) => att.thumbnailUrl ?? att.thumbUrl ?? att.url,
+  );
+  const ratios = useImageRatios(visible, sources);
+  const layout = computeAlbumLayout(ratios);
 
   return (
     <div className="flex flex-col">
-      <div className={`${albumGridClass(layoutCount)} gap-px overflow-hidden`}>
+      <div
+        className="grid overflow-hidden bg-black"
+        style={{
+          gap: ALBUM_GAP,
+          gridTemplateColumns: layout?.gridTemplateColumns,
+          gridTemplateRows: layout?.gridTemplateRows,
+          aspectRatio: layout?.aspectRatio,
+          maxHeight: ALBUM_MAX_HEIGHT,
+        }}
+      >
         {visible.map((att, i) => {
           const isLastSlot = i === MAX_VISIBLE - 1 && extra > 0;
+          const tile = layout?.tiles[i];
           return (
             <div
               key={att.id}
-              className={`relative h-full w-full overflow-hidden ${albumItemClass(
-                i,
-                layoutCount,
-              )}`}
+              className="relative overflow-hidden"
+              style={
+                tile
+                  ? {
+                      gridColumn: `${tile.colStart} / ${tile.colEnd}`,
+                      gridRow: `${tile.rowStart} / ${tile.rowEnd}`,
+                    }
+                  : undefined
+              }
             >
               <button
                 type="button"
@@ -50,7 +62,7 @@ export function AlbumBubble({ post }: { post: Post }) {
                 }
               >
                 <BubbleImage
-                  src={att.thumbnailUrl ?? att.thumbUrl ?? att.url}
+                  src={sources[i]}
                   fallbackSrc={[att.thumbUrl, att.url]}
                   loading="lazy"
                   className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]"