Flux Pro Max · x-comment：把“评论区”做成可复用组件
版本 ^2.6.2
评论区往往是一个产品最容易“半成品化”的地方：要做登录态、分页、楼中楼、点赞、删除、审核、Markdown、暗色模式……一项都不少。Flux Pro Max 的 flux:x-comment 把这些复杂度收进一个组件里：你只要放一行标签，就能得到一套可交互、可扩展、风格统一的评论系统。
这篇文章沿用 x-copy 博文的写法，用组件真实实现（stub）+ 官方文档的信息，带你快速掌握 x-comment 的用法与关键细节。
功能特性（你真正会用到的那一批）
来自官方文档的特性列表，结合实际交互体验，x-comment 重点解决这些问题：
发表评论 / 回复评论：支持多级嵌套（建议 1-5 层）。
点赞 / 取消点赞：评论互动最核心的反馈。
删除自己的评论：降低后台介入成本。
分页显示：避免长评论拖垮页面。
用户认证：与 Laravel Auth 配合，按用户身份操作。
响应式 + 深色模式：不用额外适配。
Markdown 支持：评论可读性显著提升。
代码块语法高亮（Shiki）：技术社区、文档评论尤其受用。
配套审核组件：适合需要内容治理的站点。
文档入口：<https://fluxui.cn/promax/docs/components/comment>
最小可用：一行上评论区
<flux:x-comment />在 stub 实现里，flux:x-comment 本质上是一个“壳”，真正的逻辑由 Livewire 组件 comment-list 承担：
@livewire('comment-list', [
'commentKey' => $commentKey,
'perPage' => $perPage,
'defaultAvatar' => $defaultAvatar,
'maxDepth' => $maxDepth,
'defaultStatus' => (int) $defaultStatus,
'commentMinLength' => $commentMinLength,
'replyMinLength' => $replyMinLength,
'supportMarkdown' => (bool) $supportMarkdown,
])也因此：你调的大多数参数，最终都会变成 Livewire 的 props。
最重要的概念：comment-key（评论隔离）
commentKey 决定“这块评论区属于谁”。典型场景：
文章详情页：用文章 ID / slug
产品详情页：用产品 ID
文档某个章节：用章节路径或唯一 key
推荐写法：
<flux:x-comment comment-key="blog:{{ $post->id }}" />如果你不传 comment-key，组件会尽可能用 当前路由名 作为标识；路由未命名则回退到 当前 URL。所以大多数页面可以直接 <flux:x-comment /> 开箱即用。
常用属性：控制体验，而不是“堆功能”
1) 每页数量：per-page
<flux:x-comment per-page="20" />2) 回复层级：max-depth
<flux:x-comment max-depth="2" />多级回复很爽，但层数越深越容易让移动端难读。通常 2-3 层是平衡点。
3) 默认头像：default-avatar
stub 默认值是 txt，表示用“文字头像”做兜底：
<flux:x-comment default-avatar="txt" />（具体支持哪些值以你项目里 comment-list 的实现为准；文档里展示的是“图片/文字”两种思路。）
4) 默认状态：default-status
<flux:x-comment default-status="1" />适合“默认待审核/默认可见”等策略切换（取决于你的评论模型约定）。
5) 标题与描述：label / description
stub 会在组件顶部渲染一段标题区：
<flux:x-comment
label="讨论区"
description="欢迎留言，文明交流。"
/>Markdown 与代码高亮：两段开关，按需开启
1) 开启 Markdown：support-markdown
<flux:x-comment support-markdown="true" />2) 开启代码高亮：support-markdown-code-highlight
<flux:x-comment
support-markdown="true"
support-markdown-code-highlight="true"
/>这里有一个实现细节很值得一提：
当 supportMarkdown && supportMarkdownCodeHighlight 时，stub 会按需加载 Shiki（同 x-copy 一样走 https://esm.sh/shiki@3.0.0），并注入一组专门针对评论 Markdown 内容（.prose）的样式覆盖，包括：
pre code的 padding、圆角暗色模式下
.shiki的颜色变量覆盖标题字号层级修正（h1~h6）
列表缩进与嵌套表现
blockquote（含嵌套）更柔和的背景与边框
table 的排版与边框
link 的下划线样式与 hover 行为
这意味着：打开 Markdown 之后，评论区的排版已经被“产品化”处理过，不会像很多项目那样只是“能渲染”，但观感粗糙。
字数限制：避免“水贴”和无意义回复
stub 暴露了两个最小长度参数：
commentMinLength（默认 5）replyMinLength（默认 5）
用法：
<flux:x-comment
comment-min-length="10"
reply-min-length="3"
/>一个推荐配置（适合大多数内容站）
<flux:x-comment
comment-key="blog:{{ $post->id }}"
per-page="10"
max-depth="2"
default-avatar="txt"
label="评论"
description="欢迎讨论：请保持友善与克制。"
support-markdown="true"
support-markdown-code-highlight="true"
comment-min-length="5"
reply-min-length="3"
/>小结
flux:x-comment 的价值不在于“把评论做出来”，而在于它把评论这块最碎、最难统一体验的模块，变成了一个：
一行接入
默认好看
细节完整
可控可扩展
与 Flux 设计语言一致
如果你正在做文档站、博客、SaaS 后台的反馈区或社区模块，它会是非常省心的一步。
