评论列表

CommentList评论

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

预览

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

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

青
青禾作者

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

阿
阿木

我也喜欢这句话。

叶
叶子访客审核中
这条样例评论正在等待审核。
青
青禾作者

谢谢,愿你也有好天气。

本地演示,内容不会保存

属性

名称类型默认值说明
commentsSignal<Vec<PublicComment>>由调用方提供服务端返回的已审核评论列表。
pendingSignal<Vec<PendingComment>>由调用方提供本地存储的待审核评论列表,与已审核评论混合组装为树形展示。
post_idi32由调用方提供所属文章 ID,供子级每条评论的回复表单使用。

用法

src/components/comments/list.rs
Leptos view!
// \u4F4D\u4E8E CommentContext \u4F5C\u7528\u57DF\u4E2D
view! {
    <CommentList
        comments=approved_comments
        pending=pending_comments
        post_id=1
    />
}