评论卡片外壳

CommentCardShell评论

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

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

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

青

青禾作者昨天 17:30

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

阿

阿木昨天 18:02

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

青

青禾作者今天 09:15

谢谢，愿你也有好天气。

叶

叶子访客刚刚审核中

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

本地演示，内容不会保存

属性

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

用法

src/components/comments/card.rs

let author_element = view! { <span class="font-medium text-fg">{author_name.clone()}</span> }.into_any();
let author_badge = view! {
    <span class="px-1.5 py-0.5 rounded text-[10px] bg-clay-text/10 text-clay-text">"\u4F5C\u8005"</span>
}
.into_any();
let timestamp = view! { <time class="text-fg-3">"\u6628\u5929 17:30"</time> }.into_any();

view! {
    <CommentCardShell
        depth=0
        muted=false
        avatar_url=author_avatar.clone()
        author_name=author_name.clone()
        author_element=author_element
        author_badge=author_badge
        timestamp=timestamp
        status_badge=().into_any()
        content_html="<p>\u6625\u5929\u7684\u7B2C\u4E00\u7247\u53F6\u5B50\uFF0C\u603B\u4F1A\u8BB0\u5F97\u6765\u65F6\u7684\u98CE\u3002</p>"
        content_extra_class="md-content"
    >
        <div class="flex items-center gap-3 mt-2">
            <button class="text-xs text-fg-3 hover:text-clay-text cursor-pointer">"\u56DE\u590D"</button>
        </div>
    </CommentCardShell>
}