评论组件
flux:x-comment 是 Flux Pro Max 提供的功能完整的评论系统组件，支持评论、回复、点赞、Markdown 格式及代码高亮等功能，适合在文章、产品详情页等场景中使用。
功能特性
- 发表评论
- 多层级回复评论（支持1-5层深度）
- 点赞/取消点赞
- 删除自己的评论
- 分页显示
- 用户认证
- 响应式设计 & 深色模式支持
- 评论树结构缓存优化
- 自定义头像显示（图片/文字）
- Markdown 格式支持
- 代码语法高亮（基于 Shiki）
- 有配套的评论审核组件
- 支持多语言，中文/英文
安装步骤
使用 flux:x-comment 组件前，需要先发布迁移文件并运行迁移。
1. 发布迁移文件
php artisan flux-pro-max:publish x-comment --migrations2. 发布视图文件（可选）
php artisan flux-pro-max:publish x-comment --views3. 发布配置文件（可选）
php artisan flux-pro-max:publish x-comment --configs4. 发布语言包文件（可选）
php artisan flux-pro-max:publish x-comment --langs5. 运行迁移
php artisan migrate6. 重新构建资源
npm run build迁移将创建以下数据表：
- flux_x_comments - 评论表
- flux_x_comment_votes - 评论投票表
comment-key：评论标识
通过 comment-key 为不同页面或内容指定唯一的评论标识，实现评论隔离。例如文章详情页可以使用文章 ID 作为标识。
如果未显式传入 comment-key，组件会自动使用当前路由名称作为评论标识；如果当前路由未命名，则回退为当前页面 URL。这样在大多数页面上可以直接使用 flux:x-comment 而无需手动设置标识。
14 天前
来一条消息在这时
{{-- 为文章指定评论标识 --}}
<flux:x-comment comment-key="article-101" />
{{-- 为产品指定评论标识 --}}
<flux:x-comment comment-key="product-501" />
{{-- 动态绑定 --}}
<flux:x-comment :comment-key="'article-demo-'.$article->id" />per-page：每页显示数量
通过 per-page 控制每页显示的评论数量，默认值为 10。
来发表第一条评论吧！
{{-- 每页显示 5 条评论 --}}
<flux:x-comment comment-key="article-103" :per-page="5" />
{{-- 每页显示 20 条评论 --}}
<flux:x-comment comment-key="article-102" :per-page="20" />max-depth：评论嵌套深度
通过 max-depth 控制评论回复的最大嵌套层级，支持 1-5 层，默认值为 2。
来发表第一条评论吧！
{{-- 仅支持 1 层（不允许嵌套回复） --}}
<flux:x-comment comment-key="article-201" :max-depth="1" />
{{-- 支持 3 层评论深度 --}}
<flux:x-comment comment-key="article-202" :max-depth="3" />
{{-- 支持 5 层评论深度（最大值） --}}
<flux:x-comment comment-key="article-203" :max-depth="5" />default-avatar：默认头像类型
通过 default-avatar 控制用户没有头像时的默认显示方式。用户有自定义头像时会优先使用该头像；否则根据该值选择展示策略。支持以下值：
- txt（默认） - 使用用户名生成首字母头像（本地生成，不依赖外部服务）
- img - 使用根据用户 ID 生成的占位图片头像
14 天前
谁啊这是。。。。
{{-- 使用图片占位头像 --}}
<flux:x-comment comment-key="avatar-501" default-avatar="img" />
{{-- 使用用户名首字母作为头像（默认） --}}
<flux:x-comment comment-key="avatar-502" default-avatar="txt" />default-status：默认评论状态
通过 default-status 控制新评论的默认状态。支持以下值：
- 1（默认）- 已发布，评论立即可见
- 0 - 待审核，需要管理员审核后才可见
来发表第一条评论吧！
{{-- 评论需要审核 --}}
<flux:x-comment comment-key="status-501" :default-status="0" />
{{-- 评论直接发布（默认） --}}
<flux:x-comment comment-key="status-502" :default-status="1" />label / description：标签与描述
通过 label 和 description 自定义评论区的标题和描述文字。
来发表第一条评论吧！
{{-- 自定义标签 --}}
<flux:x-comment comment-key="label-501" label="产品评价" description="分享您对这款产品的使用体验" />
{{-- 自定义标签和描述 --}}
<flux:x-comment
label="产品评价"
description="分享您对这款产品的使用体验"
/>
{{-- 隐藏标签 --}}
<flux:x-comment comment-key="label-503" :label="null" />comment-min-length / reply-min-length：最小字数
通过 comment-min-length 和 reply-min-length 分别控制评论和回复的最小字数限制，默认均为 5。
来发表第一条评论吧！
{{-- 评论最少 10 个字，回复最少 3 个字 --}}
<flux:x-comment comment-key="length-501" :comment-min-length="10" :reply-min-length="3"/>
{{-- 统一设置最小字数 --}}
<flux:x-comment comment-key="length-502" :comment-min-length="20" :reply-min-length="20"/>support-markdown：Markdown 支持
通过 support-markdown 启用 Markdown 格式支持，允许用户使用 Markdown 语法编写评论。默认为 false。
来发表第一条评论吧！
{{-- 启用 Markdown 支持 --}}
<flux:x-comment comment-key="md-501" :support-markdown="true" />support-markdown-code-highlight：代码高亮
当启用 Markdown 支持后，可以通过 support-markdown-code-highlight 进一步启用代码语法高亮功能（基于 Shiki）。默认为 false。
来发表第一条评论吧！
{{-- 启用 Markdown 和代码高亮 --}}
<flux:x-comment
comment-key="md-502"
:support-markdown="true"
:support-markdown-code-highlight="true"
/>完整示例
以下是一个包含多个属性配置的完整示例：
1 个月前
评论组件支持markdown语法，以下以回复形式依次展示
1 个月前
Emoji
直接输入 Emoji：
😀 🎉 🚀 ⭐ 👍
1 个月前
基础表格：
| 列1 | 列2 | 列3 |
|---|---|---|
| 数据1 | 数据2 | 数据3 |
| A | B | C |
| 带对齐的表格： | ||
| 左对齐 | 居中对齐 | 右对齐 |
| :------- | :--------: | -------: |
| 内容1 | 内容2 | 内容3 |
1 个月前
文本样式
粗体文本
斜体文本
粗斜体文本
删除线文本
行内代码
1 个月前
标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
<flux:x-comment
comment-key="article-123"
:per-page="15"
:max-depth="3"
default-avatar="gravatar"
:default-status="1"
label="文章评论"
description="欢迎分享您的观点和见解"
:comment-min-length="10"
:reply-min-length="5"
:support-markdown="true"
:support-markdown-code-highlight="true"
/>属性参考
下面列出了 flux:x-comment 支持的所有属性。
|
属性
|
类型
|
默认值
|
说明
|
|---|---|---|---|
| comment-key | string | '' | 评论标识，用于区分不同页面或内容的评论。未设置时会自动使用当前路由名或当前页面 URL 作为标识。 |
| per-page | int | 10 | 每页显示的评论数量。 |
| default-avatar | string | 'txt' | 默认使用首字母头像。可选值：txt、img。用户有自定义头像时会优先使用自定义头像，否则根据该值选择首字母头像或占位图片。 |
| max-depth | int | 2 | 评论嵌套的最大深度，支持 1-5 层。 |
| default-status | int | 1 | 新评论的默认状态。1 表示已发布，0 表示待审核。 |
| label | string|null | '评论' | 评论区标题。设置为 null 可隐藏。 |
| description | string|null | null | 评论区描述文字。 |
| support-markdown | bool | false | 是否启用 Markdown 格式支持。 |
| support-markdown-code-highlight | bool | false | 是否启用代码语法高亮（需先启用 Markdown 支持）。 |
| comment-min-length | int | 5 | 评论内容的最小字数限制。 |
| reply-min-length | int | 5 | 回复内容的最小字数限制。 |
14 天前
内容测试一下。
14 天前
你好啊，这是啥啊。
1 个月前
这个评论组件真的很易用