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

@@ -11,6 +11,7 @@ import {
} from "../utils/filenameDisplay";
import { formatBytes } from "../utils/formatBytes";
import { postDisplayText } from "../utils/postText";
import { CollapsibleText } from "../CollapsibleText";
import { useToast } from "../../Toast";
function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
@@ -97,9 +98,9 @@ export function FileDocBubble({ post }: { post: Post }) {
<AttachmentRow key={att.id} postId={post.id} att={att} />
))}
{text ? (
<div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[15px] font-medium leading-6 text-neutral-100">
<CollapsibleText className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[15px] font-medium leading-6 text-neutral-100">
{text}
</div>
</CollapsibleText>
) : null}
</div>
);