feat: 相册下载胶囊自适应尺寸(随图块大小缩放)

- AttachmentDownloadPill 新增 adaptive 模式:用容器查询单位 cqw + clamp,
  尺寸随所在容器宽度缩放(图标框 22~30px、图标 13~18px、文字 10~12px)
- 相册图块设 container-type: inline-size 作为查询容器,小缩略图上的下载按钮
  自动缩小;单图/视频默认固定尺寸不受影响

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-30 00:52:23 +08:00
parent d7e2e56cde
commit 15bcb6bdf0
2 changed files with 35 additions and 6 deletions

View File

@@ -51,6 +51,8 @@ export function AlbumBubble({ post }: { post: Post }) {
top: `${tile.top * 100}%`,
width: `calc(${tile.width * 100}% - ${ALBUM_GAP}px)`,
height: `calc(${tile.height * 100}% - ${ALBUM_GAP}px)`,
// Query container so the download pill scales with this tile.
containerType: "inline-size",
}}
>
<button
@@ -76,7 +78,11 @@ export function AlbumBubble({ post }: { post: Post }) {
) : null}
</button>
{!isLastSlot ? (
<AttachmentDownloadPill postId={post.id} attachment={att} />
<AttachmentDownloadPill
postId={post.id}
attachment={att}
adaptive
/>
) : null}
</div>
);