评论卡片外壳`CommentCardShell`

CommentCardShell 抽离了已审核与待审核评论卡片的共享布局：头像与内容两栏布局、作者名与时间头部行、深度嵌套左侧引导线与阶梯缩进、以及待审核半透明淡化与状态徽章。

亲手试一试。

01 / LIVE PREVIEW

本地演示，切换下方的形态标签可预览卡片骨架的不同状态与缩进效果。

完整树形展示：包含顶层评论、一级嵌套引导线、二级阶梯缩进与待审核半透明状态。

青

青禾作者·昨天 17:30

春天的第一片叶子，总会记得来时的风。

阿

阿木·昨天 18:02

我也喜欢这句话，愿新的一年枝繁叶茂。

青

青禾作者·今天 09:15

谢谢，愿你也有好天气。

叶

叶子访客·刚刚审核中

这条样例回复正在等待审核，卡片整体呈半透明淡化展示。

STATES / 示例状态

全部形态顶层评论嵌套回复深层缩进待审核

本地演示，内容不会保存。

INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

下方展示组件的调用方式。

rsx! {
    CommentCardShell {
        depth: 0,
        muted: false,
        avatar_url: author_avatar.clone(),
        author_name: author_name.clone(),
        author_element: rsx! { span { class: "font-medium text-paper-primary", "{author_name}" } },
        author_badge: rsx! { span { class: "px-1.5 py-0.5 rounded text-[10px] bg-paper-accent/10 text-paper-accent", "作者" } },
        timestamp: rsx! { time { class: "text-paper-tertiary", "昨天 17:30" } },
        status_badge: rsx! {},
        content_html: "<p>春天的第一片叶子，总会记得来时的风。</p>".to_string(),
        content_extra_class: "md-content",
        div { class: "flex items-center gap-3 mt-2",
            button { class: "text-xs text-paper-tertiary hover:text-paper-accent cursor-pointer", "回复" }
        }
    }
}

主要属性

03 / PROPERTIES

属性 / 类型	默认值	说明
`depth`i32	0	归一化后的嵌套深度。depth > 0 显示左侧引导线，depth > 1 产生 margin-left 阶梯缩进。
`muted`bool	false	是否降低整体透明度（opacity-75），用于待审核评论。
`avatar_url`String	String::new()	作者头像图片 URL，为空时由 UserAvatar 显示首字缩略图。
`author_name`String	由调用方提供	作者昵称与无障碍 alt 文本。
`author_element`Element	由调用方提供	作者名展示节点，可为纯文本或指向主页的超链接。
`author_badge`Element	rsx! {}	作者名右侧的身份徽章（如博主专属'作者'徽章）。
`timestamp`Element	由调用方提供	时间展示节点（如绝对时间或实时相对时间）。
`status_badge`Element	rsx! {}	时间右侧的状态徽章（如待审核评论的'审核中'徽章）。
`content_html`String	由调用方提供	经过消毒安全渲染的 HTML 评论正文。
`content_extra_class`&'static str	""	正文容器附加类名（如 md-content 用于 Markdown 排版与代码高亮）。
`children`Element	rsx! {}	正文下方的附加操作区（如回复按钮或回复编辑器容器）。

YGGDRASIL · 每一个细节，都有回应。src/components/comments/card.rs