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