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/AdaptiveImageFrame.tsx

@@ -0,0 +1,85 @@
+import { useState, type CSSProperties, type ReactNode } from "react";
+import type { Attachment } from "../../../types/post";
+import {
+  SINGLE_IMAGE_FALLBACK_HEIGHT_CLASS,
+  SINGLE_IMAGE_MAX_HEIGHT,
+} from "../../../constants/media";
+import { BubbleImage } from "../BubbleImage";
+
+/**
+ * Shared frame that sizes an image to its real aspect ratio. The image always
+ * fills the full width (never any left/right black bars). Behaviour by
+ * orientation:
+ *  - Landscape/square: height capped at SINGLE_IMAGE_MAX_HEIGHT; images taller
+ *    than the cap are cropped top/bottom (object-cover).
+ *  - Portrait (height > width): no height cap — the frame grows to the real
+ *    ratio so the whole image shows, uncropped and without side bars (the
+ *    bubble is correspondingly tall).
+ * Used by single-image bubbles and 2-image albums.
+ *
+ * The ratio is taken from backend width/height when present (no layout shift),
+ * then refined from the loaded image's intrinsic size so it works even when the
+ * backend omits those fields. See `constants/media.ts`.
+ */
+export function AdaptiveImageFrame({
+  attachment,
+  src,
+  fallbackSrc,
+  onOpen,
+  ariaLabel,
+  children,
+}: {
+  attachment: Attachment;
+  /** Display source; defaults to the attachment's full url. */
+  src?: string;
+  fallbackSrc?: (string | undefined)[];
+  onOpen: () => void;
+  ariaLabel: string;
+  /** Overlays rendered on top of the image (download pill, "+N", etc.). */
+  children?: ReactNode;
+}) {
+  const [ratio, setRatio] = useState<number | undefined>(
+    attachment.width && attachment.height
+      ? attachment.width / attachment.height
+      : undefined,
+  );
+
+  const isPortrait = ratio !== undefined && ratio < 1;
+
+  let frameStyle: CSSProperties | undefined;
+  if (ratio !== undefined) {
+    frameStyle = isPortrait
+      ? // Portrait: follow the real ratio with no cap → full image, full width,
+        // no crop, no side bars (the frame is tall).
+        { aspectRatio: String(ratio) }
+      : // Landscape/square: real ratio, capped height, cropped top/bottom past it.
+        { aspectRatio: String(ratio), maxHeight: SINGLE_IMAGE_MAX_HEIGHT };
+  }
+
+  return (
+    <div
+      className={`relative w-full overflow-hidden bg-black ${
+        ratio ? "" : SINGLE_IMAGE_FALLBACK_HEIGHT_CLASS
+      }`}
+      style={frameStyle}
+    >
+      <button
+        type="button"
+        onClick={onOpen}
+        className="block h-full w-full"
+        aria-label={ariaLabel}
+      >
+        <BubbleImage
+          src={src ?? attachment.url}
+          fallbackSrc={fallbackSrc}
+          loading="lazy"
+          className="h-full w-full object-cover"
+          onNaturalSize={(w, h) => {
+            if (w && h) setRatio(w / h);
+          }}
+        />
+      </button>
+      {children}
+    </div>
+  );
+}

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]"

src/components/messageStream/bubbles/ImageBubble.tsx

@@ -1,27 +1,8 @@
 import type { Post } from "../../../types/post";
-import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
-import { BubbleImage } from "../BubbleImage";
-import { useLightbox } from "../overlays/ImageLightbox";
+import { SingleImageFrame } from "./SingleImageFrame";
 
 export function ImageBubble({ post }: { post: Post }) {
-  const { openLightbox } = useLightbox();
   const att = post.attachments[0];
   if (!att) return null;
-  return (
-    <div className="relative h-[180px] w-full overflow-hidden bg-black min-[440px]:h-[210px] md:h-[260px] lg:h-[300px]">
-      <button
-        type="button"
-        onClick={() => openLightbox([att], 0, undefined, post.id)}
-        className="block h-full w-full"
-        aria-label="View image"
-      >
-        <BubbleImage
-          src={att.url}
-          loading="lazy"
-          className="h-full w-full object-cover"
-        />
-      </button>
-      <AttachmentDownloadPill postId={post.id} attachment={att} />
-    </div>
-  );
+  return <SingleImageFrame postId={post.id} attachment={att} />;
 }

src/components/messageStream/bubbles/ImageWithTextBubble.tsx

@@ -1,34 +1,17 @@
 import { useI18n } from "../../../i18n";
 import type { Post } from "../../../types/post";
-import { useLightbox } from "../overlays/ImageLightbox";
-import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
-import { BubbleImage } from "../BubbleImage";
 import { autolink } from "../utils/autolink";
 import { postDisplayText } from "../utils/postText";
+import { SingleImageFrame } from "./SingleImageFrame";
 
 export function ImageWithTextBubble({ post }: { post: Post }) {
-  const { openLightbox } = useLightbox();
   const { lang } = useI18n();
   const att = post.attachments[0];
   const text = postDisplayText(post, lang);
   if (!att) return null;
   return (
     <div className="flex flex-col">
-      <div className="relative h-[180px] w-full overflow-hidden bg-black min-[440px]:h-[210px] md:h-[260px] lg:h-[300px]">
-        <button
-          type="button"
-          onClick={() => openLightbox([att], 0, text, post.id)}
-          className="block h-full w-full"
-          aria-label="View image"
-        >
-          <BubbleImage
-            src={att.url}
-            loading="lazy"
-            className="h-full w-full object-cover"
-          />
-        </button>
-        <AttachmentDownloadPill postId={post.id} attachment={att} />
-      </div>
+      <SingleImageFrame postId={post.id} attachment={att} text={text} />
       {text ? (
         <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words px-4 pt-3 text-[14px] leading-6 text-neutral-100">
           {autolink(text)}

src/components/messageStream/bubbles/SingleImageFrame.tsx

@@ -0,0 +1,29 @@
+import type { Attachment } from "../../../types/post";
+import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
+import { useLightbox } from "../overlays/ImageLightbox";
+import { AdaptiveImageFrame } from "./AdaptiveImageFrame";
+
+/**
+ * A single image inside a message bubble. Shown at its real aspect ratio (no
+ * top/bottom cropping) via {@link AdaptiveImageFrame}.
+ */
+export function SingleImageFrame({
+  postId,
+  attachment,
+  text,
+}: {
+  postId: string;
+  attachment: Attachment;
+  text?: string;
+}) {
+  const { openLightbox } = useLightbox();
+  return (
+    <AdaptiveImageFrame
+      attachment={attachment}
+      onOpen={() => openLightbox([attachment], 0, text, postId)}
+      ariaLabel="View image"
+    >
+      <AttachmentDownloadPill postId={postId} attachment={attachment} />
+    </AdaptiveImageFrame>
+  );
+}