Comment

comment

评论 · 嵌套回复缩进 + 可选连接线 + 操作区 + comment/log 类型(复用 Avatar/Link·RSC)

用法

基础用法

头像 + 作者 + 时间 + 正文，字符串正文自动高亮 @提及。

瑚

瑚琏2 小时前

工单已分配，请 @李四跟进处理。

tsx

<Comment
  author="瑚琏"
  avatar={{ fallback: "瑚" }}
  datetime="2 小时前"
  content="工单已分配，请 @李四 跟进处理。"
/>

操作区

actions 槽放 CommentAction，传 href 渲染为链接型操作。

瑚

瑚琏2 小时前

这条评论带点赞与回复操作。

tsx

<Comment
  author="瑚琏"
  avatar={{ fallback: "瑚" }}
  datetime="2 小时前"
  content="这条评论带点赞与回复操作。"
  actions={
    <>
      <CommentAction>👍 赞 12</CommentAction>
      <CommentAction href="#reply">回复</CommentAction>
    </>
  }
/>

嵌套回复 + 连接线

children 递归 Comment 自动缩进，connector 画左侧连接线。

瑚

瑚琏2 小时前

问题已复现。

李

李四1 小时前

收到，正在排查根因。

tsx

<Comment
  author="瑚琏"
  avatar={{ fallback: "瑚" }}
  datetime="2 小时前"
  content="问题已复现。"
  connector
>
  <Comment
    author="李四"
    avatar={{ fallback: "李" }}
    datetime="1 小时前"
    content="收到，正在排查根因。"
  />
</Comment>

系统日志

type="log" 弱化为点标记 + 单行内联（工单状态变更等）。

系统将工单状态改为「处理中」14:25

张三指派给 @李四14:26

tsx

<>
  <Comment type="log" author="系统" content="将工单状态改为「处理中」" datetime="14:25" />
  <Comment type="log" author="张三" content="指派给 @李四" datetime="14:26" />
</>

复用 User 作者卡

author 可直接传入瑚琏 User 组合件。

瑚

瑚琏@hulian

刚刚

作者区可直接传入瑚琏 User 组合件。

tsx

<Comment
  author={<User name="瑚琏" description="@hulian" avatarProps={{ fallback: "瑚", size: "sm" }} />}
  datetime="刚刚"
  content="作者区可直接传入瑚琏 User 组合件。"
/>

何时用

讨论线程 / 工单评论 / 系统操作日志的混排（嵌套回复缩进 + 操作区）。type="comment" 渲气泡正文，type="log" 渲弱化单行日志。作者区可直接塞 [User]；纯时间戳用 RelativeTime。

导入

import { Comment, CommentActions, CommentAction, commentActionVariants } from "@hulianui/ui"

Props

Comment

Props

名称	类型	默认	说明
avatar	`AvatarProps`	—	透传瑚琏 Avatar（src/alt/fallback/size）；type=log 时忽略，改渲系统点标记。
type	`"comment" \| "log"`	`"comment"`	评论类型。
connector	`boolean`	`false`	子评论区是否画左侧连接线（默认仅缩进）。
className	`string`	—	其余 `HTMLAttributes<HTMLElement>`（已 Omit `content`/`title`）。

Slots

插槽	类型	说明
author*	`ReactNode`	作者名（必填）；可传 User 组合件。
datetime	`ReactNode`	时间戳（相对/绝对皆可）。
content	`ReactNode`	正文：comment 渲为下方段落；log 内联在作者后。
actions	`ReactNode`	操作区（点赞/回复等），建议用 CommentAction 组合。
children	`ReactNode`	嵌套子评论（递归 Comment）；自动缩进 + 可选左侧连接线。

CommentAction

Props

名称	类型	默认	说明
href	`string`	—	传则渲为瑚琏 Link（链接型操作，如「回复」跳锚点）；否则 `<button>`。

Slots

插槽	类型	说明
children	`ReactNode`	操作内容；其余透传 button 属性。

禁忌 / 坑

type="log" 会忽略 avatar（改渲系统点标记）、content 内联在作者后；想要头像气泡正文用默认 comment。
嵌套靠 children 放子 Comment 递归实现，缩进自动；connector 连接线默认关，需显式开。
CommentAction 有无 href 决定渲染成 Link 还是 button，跳锚点回复传 href，纯交互（点赞）不传。

Playground

类型连接线

瑚

瑚琏2 小时前

这是一条评论内容，可嵌套子回复。

李

李四1 小时前

这是子回复。

<Comment
  author="瑚琏"
  avatar={{ fallback: "瑚" }}
  datetime="2 小时前"
  content="这是一条评论内容"
  connector
>
  <Comment author="李四" content="这是子回复。" />
</Comment>

Comment

comment

评论 · 嵌套回复缩进 + 可选连接线 + 操作区 + comment/log 类型(复用 Avatar/Link·RSC)

用法

基础用法

头像 + 作者 + 时间 + 正文，字符串正文自动高亮 @提及。

瑚

瑚琏2 小时前

工单已分配，请 @李四跟进处理。

tsx

<Comment
  author="瑚琏"
  avatar={{ fallback: "瑚" }}
  datetime="2 小时前"
  content="工单已分配，请 @李四 跟进处理。"
/>

操作区

actions 槽放 CommentAction，传 href 渲染为链接型操作。

瑚

瑚琏2 小时前

这条评论带点赞与回复操作。

tsx

<Comment
  author="瑚琏"
  avatar={{ fallback: "瑚" }}
  datetime="2 小时前"
  content="这条评论带点赞与回复操作。"
  actions={
    <>
      <CommentAction>👍 赞 12</CommentAction>
      <CommentAction href="#reply">回复</CommentAction>
    </>
  }
/>

嵌套回复 + 连接线

children 递归 Comment 自动缩进，connector 画左侧连接线。

瑚

瑚琏2 小时前

问题已复现。

李

李四1 小时前

收到，正在排查根因。

tsx

<Comment
  author="瑚琏"
  avatar={{ fallback: "瑚" }}
  datetime="2 小时前"
  content="问题已复现。"
  connector
>
  <Comment
    author="李四"
    avatar={{ fallback: "李" }}
    datetime="1 小时前"
    content="收到，正在排查根因。"
  />
</Comment>

系统日志

type="log" 弱化为点标记 + 单行内联（工单状态变更等）。

系统将工单状态改为「处理中」14:25

张三指派给 @李四14:26

tsx

<>
  <Comment type="log" author="系统" content="将工单状态改为「处理中」" datetime="14:25" />
  <Comment type="log" author="张三" content="指派给 @李四" datetime="14:26" />
</>

复用 User 作者卡

author 可直接传入瑚琏 User 组合件。

瑚

瑚琏@hulian

刚刚

作者区可直接传入瑚琏 User 组合件。

tsx

<Comment
  author={<User name="瑚琏" description="@hulian" avatarProps={{ fallback: "瑚", size: "sm" }} />}
  datetime="刚刚"
  content="作者区可直接传入瑚琏 User 组合件。"
/>

何时用

导入

import { Comment, CommentActions, CommentAction, commentActionVariants } from "@hulianui/ui"

Props

Comment

Props

名称	类型	默认	说明
avatar	`AvatarProps`	—	透传瑚琏 Avatar（src/alt/fallback/size）；type=log 时忽略，改渲系统点标记。
type	`"comment" \| "log"`	`"comment"`	评论类型。
connector	`boolean`	`false`	子评论区是否画左侧连接线（默认仅缩进）。
className	`string`	—	其余 `HTMLAttributes<HTMLElement>`（已 Omit `content`/`title`）。

Slots

插槽	类型	说明
author*	`ReactNode`	作者名（必填）；可传 User 组合件。
datetime	`ReactNode`	时间戳（相对/绝对皆可）。
content	`ReactNode`	正文：comment 渲为下方段落；log 内联在作者后。
actions	`ReactNode`	操作区（点赞/回复等），建议用 CommentAction 组合。
children	`ReactNode`	嵌套子评论（递归 Comment）；自动缩进 + 可选左侧连接线。

CommentAction

Props

名称	类型	默认	说明
href	`string`	—	传则渲为瑚琏 Link（链接型操作，如「回复」跳锚点）；否则 `<button>`。

Slots

插槽	类型	说明
children	`ReactNode`	操作内容；其余透传 button 属性。

禁忌 / 坑

type="log" 会忽略 avatar（改渲系统点标记）、content 内联在作者后；想要头像气泡正文用默认 comment。
嵌套靠 children 放子 Comment 递归实现，缩进自动；connector 连接线默认关，需显式开。
CommentAction 有无 href 决定渲染成 Link 还是 button，跳锚点回复传 href，纯交互（点赞）不传。

Playground

类型连接线

瑚

瑚琏2 小时前

这是一条评论内容，可嵌套子回复。

李

李四1 小时前

这是子回复。

<Comment
  author="瑚琏"
  avatar={{ fallback: "瑚" }}
  datetime="2 小时前"
  content="这是一条评论内容"
  connector
>
  <Comment author="李四" content="这是子回复。" />
</Comment>

Comment

用法

基础用法

操作区

嵌套回复 + 连接线

系统日志

复用 User 作者卡

何时用

导入

Props

Comment

CommentAction

禁忌 / 坑

相关

Playground

Comment

用法

基础用法

操作区

嵌套回复 + 连接线

系统日志

复用 User 作者卡

何时用

导入

Props

Comment

CommentAction

禁忌 / 坑

相关

Playground