feat: 文档预览图改方形放大,下载胶囊整体放大
- FileDocBubble 预览缩略图 52px 圆形 → 64px 方形圆角(rounded-lg),行高自适应 - AttachmentDownloadPill 放大:图标框 24→30px、图标 14→18px、文字 11→12px Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -43,23 +43,23 @@ export function AttachmentDownloadPill({
|
||||
type="button"
|
||||
onClick={handleDownload}
|
||||
disabled={isDownloading}
|
||||
className={`group z-10 inline-flex overflow-hidden rounded-full bg-black/80 text-[11px] text-white shadow-lg ring-1 ring-inset ring-white/20 backdrop-blur-md transition hover:bg-black/90 disabled:cursor-wait ${className}`}
|
||||
className={`group z-10 inline-flex overflow-hidden rounded-full bg-black/80 text-[12px] text-white shadow-lg ring-1 ring-inset ring-white/20 backdrop-blur-md transition hover:bg-black/90 disabled:cursor-wait ${className}`}
|
||||
aria-label={
|
||||
isDownloading ? t("downloading") : `Download ${attachment.filename}`
|
||||
}
|
||||
aria-busy={isDownloading}
|
||||
>
|
||||
<span className="flex h-6 w-6 items-center justify-center bg-[#545454]/50 transition group-hover:bg-[#545454]/70">
|
||||
<span className="flex h-[30px] w-[30px] items-center justify-center bg-[#545454]/50 transition group-hover:bg-[#545454]/70">
|
||||
{isDownloading ? (
|
||||
<LoaderCircle
|
||||
className="h-3.5 w-3.5 animate-spin"
|
||||
className="h-[18px] w-[18px] animate-spin"
|
||||
strokeWidth={2.3}
|
||||
/>
|
||||
) : (
|
||||
<DownloadCloudIcon className="h-3.5 w-3.5" />
|
||||
<DownloadCloudIcon className="h-[18px] w-[18px]" />
|
||||
)}
|
||||
</span>
|
||||
<span className="flex h-6 items-center gap-0.5 px-2">
|
||||
<span className="flex h-[30px] items-center gap-0.5 px-2.5">
|
||||
{isDownloading ? (
|
||||
t("downloading")
|
||||
) : (
|
||||
|
||||
@@ -40,22 +40,22 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
|
||||
att.thumbnailUrl ?? att.posterUrl ?? (isImage ? att.url : undefined);
|
||||
|
||||
return (
|
||||
<div className="group flex h-[52px] items-center gap-3">
|
||||
<div className="group flex min-h-[64px] items-center gap-3">
|
||||
{previewUrl && !previewFailed ? (
|
||||
<img
|
||||
src={previewUrl}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
onError={() => setPreviewFailed(true)}
|
||||
className="h-[52px] w-[52px] shrink-0 rounded-full object-cover"
|
||||
className="h-16 w-16 shrink-0 rounded-lg object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-full"
|
||||
className="flex h-16 w-16 shrink-0 items-center justify-center rounded-lg"
|
||||
style={{ backgroundColor: color }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<Icon className="h-8 w-8 text-white" strokeWidth={2.1} />
|
||||
<Icon className="h-9 w-9 text-white" strokeWidth={2.1} />
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
|
||||
Reference in New Issue
Block a user