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:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user