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:
@@ -5,6 +5,7 @@ import { BubbleImage } from "../BubbleImage";
|
||||
import { useLightbox } from "../overlays/ImageLightbox";
|
||||
import { autolink } from "../utils/autolink";
|
||||
import { postDisplayText } from "../utils/postText";
|
||||
import { CollapsibleText } from "../CollapsibleText";
|
||||
|
||||
const MAX_VISIBLE = 4;
|
||||
|
||||
@@ -71,9 +72,12 @@ export function AlbumBubble({ post }: { post: Post }) {
|
||||
})}
|
||||
</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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user