Flux 2 来了
起初只是个好奇——从零构建一个日期选择器
但这份好奇最终演变成了数月的专注开发，孕育出了 Flux 的全新版本。
现在，我们自豪地发布：
Flux v2
Flux v2 带来了强大的新组件，同时仍然保持轻量、无依赖。
本次版本包括：
轻量级日期选择器 & 日历
用于分析的折线图与面积图
完整支持 Tailwind 4
免费层（Free Tier）包含所有基础 UI 组件
Laravel 启动套件，让你开箱即用
零额外依赖
保持 Flux 的轻量是首要任务。
我们没有引入第三方日期选择器或图表库，而是选择从零构建。
最终，这仅为打包体积增加了 13kb。
为什么要为了区区几 KB 费这么大劲？
在调研第三方日期与图表库时，我们遇到了以下痛点：
配置复杂且难以理解
难以匹配自定义设计风格
缺乏可访问性（Accessibility）和本地化支持
于是我们决定亲自动手。
现在，我们拥有完全契合自身需求的组件，而且可以自由扩展——
不需要插件，不需要 Pull Request，只需修改自己的代码。
日期选择器
日期选择器无处不在，但大多数库都臃肿且难以自定义样式。
在 Flux v2 中，添加一个优雅且完全无障碍（accessible）的日期选择器，只需一行：
<flux:date-picker />和 Flux 的其他组件一样，我们为此组件注入了额外的关怀：
移动端友好
键盘可操作
支持国际化
日历组件
有时候，你可能想直接在页面上展示一个完整的日历，而不是隐藏在下拉框中。
例如预约类页面（如 Shopify、Airbnb 常见的设计）。
Flux v2 提供了专用的 Calendar 组件：
<flux:calendar />日期范围选择器
日期范围选择器是分析界面和预订系统的必备组件。
在 Flux v2 中，只需添加 mode="range" 即可：
<flux:date-picker mode="range" months="2" with-presets />无论是带预设（Presets）的高级版本，还是简单的双月选择，都轻松实现。
图表组件
我们原本没打算从零做图表库，但当我们动手实验时，灵感不断涌现，
最终，我们决定彻底重构图表体验。
“它们其实就是 SVG”
Flux 的图表库让你感觉自己在直接构建 SVG。
语法略微比其他组件详细，但体验极其直观——
你无需学习复杂配置，只是在写 <div> 和 Tailwind 样式。
例如一个简单的折线图（Sparkline）：
<flux:chart wire:model="data" class="min-h-32">
<flux:chart.svg>
<flux:chart.line class="text-blue-500" stroke="currentColor" stroke-width="2" />
</flux:chart.svg>
</flux:chart>渲染结果相当于：
<div class="min-h-32">
<svg viewBox="...">
<path d="..." class="text-blue-500" stroke="currentColor" stroke-width="2" />
</svg>
</div>每个图表组件都直接映射到 HTML 或 SVG 元素。
你拥有完全的控制权，可以随心定制外观与渲染逻辑。
此外，你可以随时复制官方示例快速上手，
也可以深入 API 构建任意复杂图表。
组合式设计（Composable）
Flux 图表最大的魅力在于它的可组合性。
你可以自由堆叠不同组件来实现各种效果：
<!-- 折线在上 -->
<flux:chart.area class="text-blue-500/50" />
<flux:chart.line class="text-blue-500" />
<!-- 面积在上 -->
<flux:chart.line class="text-blue-500" />
<flux:chart.area class="text-blue-500/50" />渲染顺序直观：后写的在上层，就像堆叠 <div> 一样。
不再需要繁琐的配置项，一切都变得自然直觉。
支持 Tailwind 4
Tailwind 4 简化了配置，让自定义样式可以直接写在 CSS 中。
Flux v2 利用这一特性，使样式引入更轻巧：
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';这比 v1 的方式更加干净。
无需 @fluxStyles 指令，也无需额外的 tailwind.config.js 配置。
此外，Tailwind 4 的改进细节令人欣喜：
例如不再需要方括号来处理 data 属性样式：
<!-- Tailwind 3 -->
<div class="data-[checked]:bg-zinc-800">
<!-- Tailwind 4 -->
<div class="data-checked:bg-zinc-800">改进的暗色模式控制
在 Flux v1 中，Flux 会自动为 <html> 添加或移除 .dark 类。
但许多用户希望能手动控制暗色模式。
因此，在 Flux v2 中，我们引入了新的属性：@fluxAppearance
...
@fluxAppearance
</head>通过它，你可以：
轻松禁用暗色模式（不加此指令即可）
或完全由服务器端逻辑控制 .dark 类
Laravel 启动套件 + 新的免费层
Flux 现已正式加入 Laravel 新版 Starter Kits（下周发布）。
为此，我们强化了免费层（Free Tier），
包含所有基础 Web 应用所需的核心组件：
按钮、模态框、下拉菜单、表单输入等。
高级组件将划归 Pro 版本，
但所有老用户都将自动升级至 Pro 权限。
展望未来
Livewire 一直是最具生产力的 Web 开发方式之一，
但前端组件生态却长期不尽如人意。
Flux 的使命就是改变这一现状。
随着 Flux v2 的发布，我们终于奠定了坚实的基础。
接下来，我们将持续推出更多新组件与模板。
敬请期待！
