feat: 消息气泡长文字支持「展开全部/收起全部」折叠

- 新增 CollapsibleText 组件:超过 8 行文字自动折叠,按行高对齐裁切,底部柔和渐隐遮罩暗示有更多内容
- 折叠按钮左对齐,胶囊样式 + chevron 图标,hover 浅背景高亮,点击 chevron 旋转 180°
- 应用到全部 5 种气泡:Text/ImageWithText/Album/Video/FileDoc
- 动画统一使用 motion 包的 EASE_OUT 缓动,尊重 reducedMotion=user
- i18n 七种语言新增 showMore/showLess 文案
This commit is contained in:
TerryM
2026-05-29 23:49:59 +08:00
parent a7792c117d
commit b283ba74da
7 changed files with 170 additions and 12 deletions

View File

@@ -5,6 +5,7 @@ import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
import { BubbleImage } from "../BubbleImage";
import { autolink } from "../utils/autolink";
import { postDisplayText } from "../utils/postText";
import { CollapsibleText } from "../CollapsibleText";
export function ImageWithTextBubble({ post }: { post: Post }) {
const { openLightbox } = useLightbox();
@@ -30,9 +31,12 @@ export function ImageWithTextBubble({ post }: { post: Post }) {
<AttachmentDownloadPill postId={post.id} attachment={att} />
</div>
{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">
<CollapsibleText
wrapperClassName="px-4 pt-3"
className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-6 text-neutral-100"
>
{autolink(text)}
</div>
</CollapsibleText>
) : null}
</div>
);