Flux Pro Max ^2.6.2

复制按钮看似普通，却直接影响一个文档是否“可用”。Flux Pro Max 内置的 flux:x-copy 组件，就是专门为文档和后台页面准备的复制模块：无需额外脚本，直接包裹代码或内容即可复制，还自带高亮与状态提示。本文延续 Skeleton 博文的节奏，完整剖析它的结构与高级玩法。

核心特性一览

• Slot 即内容：组件会 trim((string) $slot)，把你包裹的文本当作复制源，零配置就能用。

• clipboard 覆盖复制值：如果展示内容和复制文本不同，可通过 clipboard="..." 指定，组件内部会 base64 编码后写进 data-clipboard。

• 双外观：variant="card" 提供圆角卡片、标题栏与内置按钮；variant="bare" 则只保留复制功能，让你自己控制排版。

• 代码高亮一键启用：默认 highlight=true，组件会按需加载 Shiki (via https://esm.sh/shiki@3.0.0)，支持 language 指定语法。

• 内置反馈动效：点击按钮会写入剪贴板、展示 “拷贝 / 已拷贝” 状态，并在 2 秒后自动恢复。

• 自定义样式钩子：codeClass 可追加到代码容器；容器类名同时包含 flux-pro-max-copy 与 flux-data-x-copy，方便全局定制。

基础用法

1. 直接包裹代码块

<flux:x-copy title="安装命令" language="bash">
@verbatim
composer require fluxui/flux-pro-max
php artisan flux-pro-max:install
@endverbatim
</flux:x-copy>

• title 会渲染在卡片顶部。

• Slot 中的代码自动成为复制文本，并参与高亮。

2. 展示与复制内容不同

<flux:x-copy
    clipboard="npm create fluxapp@latest"
    variant="bare"
>
    <flux:button size="sm">复制 CLI 命令</flux:button>
</flux:x-copy>

• variant="bare" 只渲染一个透明容器 + 浮动按钮；slot 内你可以放任意元素。

• 复制的是真实 CLI 字符串，而非按钮文本。

组件内部是如何运作的？

编码与按钮点击

$clipboardEncoded = $clipboardSource !== '' ? base64_encode($clipboardSource) : null;

前端脚本调用 window.navigator.clipboard.writeText()，并用 decodeURIComponent(escape(atob(...))) 恢复原文，避免编码问题。

Shiki 按需加载

• 首次使用时，组件会初始化 window.__fluxShikiPromise，只加载一次。

• 渲染完成后通过 codeToHtml 将 pre > code 替换成高亮 HTML，支持明/暗两套主题 (github-light-default / github-dark-default)。

结构化类名

• 容器：flux-pro-max-copy（可全局样式）

• 代码区：flux-data-x-copy

• 复制按钮放在绝对定位的角标里，使用 flux:button + flux:icon，风格与其它组件统一

实战示例：文档页复制区块

<div class="rounded-2xl border bg-white dark:bg-zinc-900">
    <div class="px-6 py-6">
        {{-- 真正的组件示例 --}}
        <flux:x-copy clipboard="flux:x-copy">
            <flux:button size="sm" variant="outline">
                在任意 Blade 中写 <code>&lt;flux:x-copy&gt;</code>
            </flux:button>
        </flux:x-copy>
    </div>

    {{-- 展示可复制的代码 --}}
    <flux:x-copy
        variant="bare"
        language="blade"
        code-class="border-t border-zinc-200 dark:border-white/10"
    >
@verbatim
<flux:x-copy clipboard="git clone git@fluxui.cn:repo.git">
    <flux:button size="sm">复制命令</flux:button>
</flux:x-copy>
@endverbatim
    </flux:x-copy>
</div>

进阶技巧

1. 自定义“已拷贝”状态时间
   修改组件源码中 setTimeout 的间隔即可（默认 2000ms），或者挂载 flux-data-x-copy 的 MutationObserver，在外部控制状态。

2. 无高亮场景
   将 highlight 设为 false，可避免加载 Shiki，对于纯文本/短命令非常轻量：

<flux:x-copy highlight="false" clipboard="php artisan migrate">
    <span class="text-sm text-zinc-600">php artisan migrate</span>
</flux:x-copy>

3. 监听复制事件
   复制逻辑写在按钮的 x-on:click 中，你可以拦截或扩展这个逻辑，例如添加统计、Toast 等。

结语

flux:x-copy 把“复制”变成了一个可视、可控、可扩展的体验：你只需写标签，组件就负责代码高亮、按钮状态、剪贴板调用等琐事。无论是在 Flux Pro Max 文档里展示示例，还是在后台给运营同事提供可复制的配置项，这个组件都可以直接复用。

想了解更多属性与示例，请访问官方文档：拷贝组件。

版本 ^2.9.0

项目管理、任务跟踪、流程可视化——看板无处不在。
从零设计一个看板会很繁琐，所以我们认为 Flux 应该让这件事变得简单。

来看看我们全新的看板系统，它是一组用于构建漂亮工作流看板的组件集合。
看一眼你就会明白。

<flux:kanban>
    @foreach ($columns as $column)
        <flux:kanban.column>
            <flux:kanban.column.header :heading="$column->title" :count="count($column->cards)" />
            <flux:kanban.column.cards>
                @foreach ($column->cards as $card)
                    <flux:kanban.card :heading="$card->title" />
                @endforeach
            </flux:kanban.column.cards>
        </flux:kanban.column>
    @endforeach
</flux:kanban>

列布局

列支持标题、计数和操作插槽。
你可以为列管理添加下拉菜单，或添加快速新建按钮：

<flux:kanban.column.header heading="In Progress" count="5">
    <x-slot name="actions">
        <flux:dropdown>
            <flux:button variant="subtle" icon="ellipsis-horizontal" size="sm" />
            <flux:menu>
                <flux:menu.item icon="plus">New card</flux:menu.item>
                <!-- ... -->
            </flux:menu>
        </flux:dropdown>
        <flux:button variant="subtle" icon="plus" size="sm" />
    </x-slot>
</flux:kanban.column.header>

灵活的卡片

卡片通过头部和底部插槽组合，可以获得最大的灵活性。

卡片头部

在 header 插槽中可以放徽章、标签或标记：

<flux:kanban.card heading="Update privacy policy">
    <x-slot name="header">
        <div class="flex gap-2">
            <flux:badge color="blue" size="sm">UI</flux:badge>
            <flux:badge color="green" size="sm">Backend</flux:badge>
            <flux:badge color="red" size="sm">Bug</flux:badge>
        </div>
    </x-slot>
</flux:kanban.card>

卡片底部

在 footer 插槽中可以放头像、图标或元信息：

<flux:kanban.card heading="Update privacy policy">
    <x-slot name="footer">
        <flux:icon name="bars-3-bottom-left" variant="micro" class="text-zinc-400" />
        <flux:avatar.group>
            <flux:avatar circle size="xs" src="..." />
            <!-- ... -->
        </flux:avatar.group>
    </x-slot>
</flux:kanban.card>

卡片也可以通过 as="button" 变成可点击，用于打开弹窗或详情视图：

<flux:kanban.card as="button" wire:click="edit({{ $card->id }})" heading="{{ $card->title }}">
    <!-- ... -->
</flux:kanban.card>

拖拽排序

Flux 本身不内置拖拽功能，但你可以使用 Alpine 的 x-sort 插件，或者（更推荐）使用 Livewire 4（当前为 beta）的 wire:sort 来实现：

<flux:kanban wire:sort="moveColumn">
    @foreach ($columns as $column)
        <flux:kanban.column
            :wire:key="$column->id"
            :wire:sort:item="$column->id"
        >
            <flux:kanban.column.header :heading="$column->title" :count="count($column->cards)" />
            <flux:kanban.column.cards wire:sort="moveCards">
                @foreach ($column->cards as $card)
                    <flux:kanban.card
                        :heading="$card->title"
                        :wire:key="$card->id"
                        :wire:sort:item="$card->id"
                    />
                @endforeach
            </flux:kanban.column.cards>
        </flux:kanban.column>
    @endforeach
</flux:kanban>

更多示例和完整 API 参考，请查看看板组件文档。

版本 ^2.9.0

加载状态很重要。精心设计的骨架屏可以在内容加载时保持用户的专注，让你的应用感觉更快、更精致。

下面介绍骨架屏，这是一个用于创建占位内容的灵活组件。

<flux:skeleton.group animate="shimmer" class="flex items-center gap-4">
    <flux:skeleton class="size-10 rounded-full" />
    <div class="flex-1">
        <flux:skeleton.line />
        <flux:skeleton.line class="w-1/2" />
    </div>
</flux:skeleton.group>

文本占位符

skeleton.line 组件会模拟真实文本——它占据完整的行高，但只渲染一条更细的条形，从而获得更接近真实文本的自然比例：

<flux:skeleton.group>
    <flux:skeleton.line class="mb-2 w-1/4" />
    <flux:skeleton.line />
    <flux:skeleton.line />
    <flux:skeleton.line class="w-3/4" />
</flux:skeleton.group>

动画选项

你可以在闪动（shimmer）和呼吸（pulse）动画之间选择，或者完全不使用动画。skeleton.group 组件允许你只设置一次动画，然后所有子骨架组件都会继承这个设置：

<!-- 闪动动画 -->
<flux:skeleton.group animate="shimmer">
    <flux:skeleton.line />
</flux:skeleton.group>

<!-- 呼吸动画 -->
<flux:skeleton.group animate="pulse">
    <flux:skeleton.line />
</flux:skeleton.group>

<!-- 无动画 -->
<flux:skeleton.line />

真实场景示例

你可以为任何东西构建骨架状态——表格、卡片、图表、个人资料等。下面是一个表格加载状态示例：

<flux:skeleton.group animate="shimmer">
    <flux:table>
        <flux:table.columns>
            <flux:table.column>Customer</flux:table.column>
            <flux:table.column>Date</flux:table.column>
            <flux:table.column>Status</flux:table.column>
        </flux:table.columns>
        <flux:table.rows>
            @foreach (range(1, 5) as $i)
                <flux:table.row>
                    <flux:table.cell>
                        <div class="flex items-center gap-2">
                            <flux:skeleton class="rounded-full size-5" />
                            <flux:skeleton.line />
                        </div>
                    </flux:table.cell>
                    <flux:table.cell>
                        <flux:skeleton.line />
                    </flux:table.cell>
                    <flux:table.cell>
                        <flux:skeleton.line />
                    </flux:table.cell>
                </flux:table.row>
            @endforeach
        </flux:table.rows>
    </flux:table>
</flux:skeleton.group>

查看 骨架屏 文档，了解更多示例和完整的 API 参考。