评论项

CommentItem评论

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

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

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

青

青禾作者昨天 17:30

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

阿

阿木昨天 18:02

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

本地演示，内容不会保存

属性

名称	类型	默认值	说明
`comment`	`PublicComment`	`由调用方提供`	已审核的评论数据，包含评论 ID、父评论 ID、嵌套深度、作者信息、发布时间与安全 HTML 正文。
`post_id`	`i32`	`由调用方提供`	所属文章 ID，传给下方的内嵌 CommentForm 回复表单。

用法

src/components/comments/item.rs

// \u4F4D\u4E8E CommentContext \u4F5C\u7528\u57DF\u4E2D
let comment = PublicComment {
    id: 101,
    parent_id: None,
    depth: 0,
    author_name: "\u9752\u79BE".to_string(),
    author_url: None,
    avatar_url: String::new(),
    is_author: true,
    content_html: Some("<p>\u6625\u5929\u7684\u7B2C\u4E00\u7247\u53F6\u5B50\uFF0C\u603B\u4F1A\u8BB0\u5F97\u6765\u65F6\u7684\u98CE\u3002</p>".to_string()),
    created_at: "\u6628\u5929 17:30".to_string(),
    created_at_iso: "2026-09-22T10:00:00Z".to_string(),
};

view! {
    <CommentItem comment=comment post_id=1/>
}

预览

属性

用法