评论 / COMPONENT ATLAS

评论项CommentItem

CommentItem 负责渲染单条已审核评论：展示作者头像、昵称（支持外部网站跳转）、专属作者徽章与格式化时间；支持点击展开内嵌回复表单，表单自动使用负 margin 抵消嵌套缩进对齐左边缘，且折叠取消后依然保留输入草稿；当嵌套深度达 20 层时自动隐藏回复按钮防止版面破坏。

亲手试一试。

01 / LIVE PREVIEW
● CommentItem

本地演示，可切换不同形态体验 CommentItem 的回复表单联动、草稿保留与身份样式。

标准嵌套链：展示博主顶层评论与嵌套子回复，点击“回复”可展开内嵌表单并输入草稿。

青
青禾作者·昨天 17:30

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

阿
阿木·昨天 18:02

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

STATES / 示例状态

标准回复链展开回复与草稿身份与外链深层缩进 (depth=20)
本地演示，内容不会保存。
INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

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

RUST · DIOXUS RSX
// 位于 CommentContext 作用域中
rsx! {
    CommentItem {
        comment: PublicComment {
            id: 101,
            parent_id: None,
            depth: 0,
            author_name: "青禾".to_string(),
            author_url: None,
            avatar_url: String::new(),
            is_author: true,
            content_html: Some("<p>春天的第一片叶子，总会记得来时的风。</p>".to_string()),
            created_at: "昨天 17:30".to_string(),
            created_at_iso: "2026-09-22T10:00:00Z".to_string(),
        },
        post_id: 1,
    }
}

主要属性

03 / PROPERTIES
属性 / 类型默认值说明
commentPublicComment由调用方提供已审核的评论数据，包含评论 ID、父评论 ID、嵌套深度、作者信息、发布时间与安全 HTML 正文。
post_idi32由调用方提供所属文章 ID，传给下方的内嵌 CommentForm 回复表单。
YGGDRASIL · 每一个细节，都有回应。src/components/comments/item.rs
© 2026 Yggdrasil