评论 / COMPONENT ATLAS

评论列表CommentList

CommentList 将服务端已审核评论与本地待审核评论统一合并为树形结构(merge_and_treeify):同父子评论按时间戳升序排序,采用深度优先前序遍历展开;待审核评论展示为带审核中呼吸灯的半透明卡片;若父评论不存在则自动作为顶层孤儿评论容错渲染。

亲手试一试。

01 / LIVE PREVIEW
● CommentList

本地演示,可切换不同形态体验 CommentList 的树形合并、排序与孤儿容错。

评论与待审核:服务端已审核评论与本地待审核评论统一合并为树形结构;待审核评论展示为带呼吸指示灯的半透明卡片,按时间升序插入对应层级。

青
青禾作者·昨天 17:30

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

阿
阿木·昨天 18:02

我也喜欢这句话。

叶
叶子访客·2026-01-01审核中
这条样例评论正在等待审核。
青
青禾作者·今天 09:15

谢谢,愿你也有好天气。

STATES / 示例状态

评论与待审核仅已审核空列表多分支与孤儿容错
本地演示,内容不会保存。
INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

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

RUST · DIOXUS RSX
// 位于 CommentContext 作用域中
rsx! {
    CommentList {
        comments: approved_comments,
        pending: pending_comments,
        post_id: 1,
    }
}

主要属性

03 / PROPERTIES
属性 / 类型默认值说明
commentsVec<PublicComment>由调用方提供服务端返回的已审核评论列表。
pendingVec<PendingComment>由调用方提供本地存储的待审核评论列表,与已审核评论混合组装为树形展示。
post_idi32由调用方提供所属文章 ID,供子级每条评论的回复表单使用。
YGGDRASIL · 每一个细节,都有回应。src/components/comments/list.rs
© 2026 Yggdrasil