为 Rails 选择合适的设计系统方案
Business Class Blog Rails starter kit
为 Rails 选择合适的设计系统方案
目录 构建设计系统 Rails 的组件系统 shadcn/ui Rails 上的 shadcn/ui daisyUI Flowbite Preline RubyUI 结论
你可能会认为，在 2025 年为你的应用程序选择一个完善的设计系统应该是一件很简单的事情。但对于 Rails 来说并非如此，因此对于 Business Class 来说也不是。 当我开始做 Business Class 时，并没有真正可以采用的东西，而且不知何故现在感觉仍然如此。
构建设计系统
我不是一个资深的设计师，尽管我确实在努力提高这方面的能力（我买了 Tailwind 作者写的《Refactoring UI》这本书，以及其他一些东西），而且我也参与过几次设计系统的实施。 上一次我们使用 ViewComponent 库从头开始为 Phrase 实现它。
我最初的想法是 Business Class 应该直接采用一些现有的东西，因为从头开始构建东西非常耗时。 然而，当时的选择并没有说服我，所以我直接从 Bulma 开始。 后来随着 Tailwind 3 的发布，我进行了切换，并使用纯 Tailwind 和 @apply 构建了一个简单的设计。
我认为基本设计效果不错，但它不是人们可能期望在 2025 年使用的组件设计系统。 因此，让我们重新评估我们未来的选择，看看我们是否最终可以选择一些现成的。
Rails 的组件系统
仍然只有少数几个选项我们可以真正考虑用于 Business Class。 请注意，我只能包含免费或至少是免费增值的设计系统，而不是付费的。
shadcn/ui
Shadcn/UI 是一个开源的、设计精美的可重用 UI 组件集合，构建在 React, Tailwind CSS 和 Radix UI 之上。 它提供了干净、可访问且可定制的构建块，可帮助开发人员快速创建现代 Web 应用程序。 Shadcn/UI 强调简洁性、开发人员体验以及遵守行业标准最佳实践，使其易于集成到各种项目和工作流程中。
由于它是为 React 构建的，因此你可以像这样使用它：
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"
export function AccordionDemo() {
return (
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Is it styled?</AccordionTrigger>
<AccordionContent>
Yes. It comes with default styles that matches the other
components' aesthetic.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Is it animated?</AccordionTrigger>
<AccordionContent>
Yes. It's animated by default, but you can disable it if you prefer.
</AccordionContent>
</AccordionItem>
</Accordion>
)
}
如果想在 Rails 中使用它，我们必须提供我们自己的实现。
Rails 上的 shadcn/ui
最初的 shadcn/ui 是为 React 制作的，对于纯 Hotwire 应用程序的帮助不大。 幸运的是，已经有人开始 shadcn/ui on Rails ，它是 shadcn/ui 的 Rails 实现，带有 helpers, partials 和 Stimulus controllers。
乍一看，这看起来很完美。 获得一个成熟项目的 Rails 版本本身就是一个胜利，但能够构建带有 React 的混合应用程序并使用相同的系统就更好了。 但是，这只是第一印象。 第二眼会发现它不完整，也不是原始版本的 1:1 版本。
以下是如何在视图中使用组件：
<% items = [{:value => "Ruby on Rails", name: "Ruby on Rails"}, {:value => "Next.js", name: "Next.js"}, {:value => "Remix.run", name: "Remix.run"}] %>
<%= render_combobox items do %>
<%= combobox_trigger do %>
Select framework
<% end %>
<% end %>
不过，我仍然喜欢使用 partials 和 Stimulus controllers 以及将所有内容包装在 helpers 中的决定。 这是一种非常 Rails 的方法。 这是一个强大的竞争者。
daisyUI
另一个用于 Tailwind CSS 的组件库是 daisyUI，旨在通过提供可定制的、随时可用的 UI 组件来简化 Web 开发。 它是 shadcn/ui 最常用的替代品之一，并且有自己不错的历史。
daisyUI 为所有常见的 UI 组件实现了 Tailwind 类名，因此在实践中我们可以使用像 btn 或 card 这样的不错的快捷方式。 这有点像 Bootstrap 和 Bulma，但基于 Tailwind。 就我个人而言，我很欣赏简短的类名，并且不会污染 HTML。
这是一个例子：
<div class="avatar">
<div class="w-24 rounded-xl">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
</div>
</div>
<div class="avatar">
<div class="w-24 rounded-full">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
</div>
</div>
基于 Taiwind 4 构建的最新 daisyUI 5 看起来非常不错，并提供了许多不错的预构建主题：
最大的缺点是 DaisyUI 没有附带 JavaScript。 它主要是一个视觉系统。
Flowbite
Flowbite 是一个构建在 Tailwind CSS 之上的开源 UI 库，它提供了一系列组件和实用程序，以简化响应式和现代 Web 应用程序的开发。
我喜欢的是 Flowbite 官方支持包括 Rails 在内的多个框架。 JavaScript 是通用的，而不是 React 特定的。 仅这一点就非常好，因为我们不需要自己重新实现任何东西。
这是 Flowbite 中的一个组件代码片段：
<!-- Modal toggle -->
<div class="flex justify-center m-5">
<button id="updateProductButton" data-modal-target="updateProductModal" data-modal-toggle="updateProductModal" class="block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
Update product
</button>
</div>
<!-- Main modal -->
<div id="updateProductModal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full">
<div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
<!-- Modal content -->
<div class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5">
<!-- Modal header -->
<div class="flex justify-between items-center pb-4 mb-4 rounded-t border-b sm:mb-5 dark:border-gray-600">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Update Product
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="updateProductModal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Close modal</span>
</button>
</div>
正如你所看到的，你直接将 Tailwind 与 data attributes 和 aria labels 一起使用。 这是我们需要添加的相应 JavaScript：
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('updateProductButton').click();
});
与之前的选项不同，Flowbite 并非完全开源。 不过，基本构建块就足够用于新的 Business Class 主题。
Preline
Preline 是另一个基于 Tailwind CSS 构建的 freemium UI 库，带有其自己独立于框架的 JavaScript。 它具有许多组件和示例，包括用于构建营销页面等的组件和示例。
这是使用 Preline 的身份验证框在代码中的样子：
# Sign in
Don't have an account yet? [ Sign up here ](https://businessclasskit.com/blog/<../examples/html/signup.html>)
Sign in with Google
Or
### RubyUI
到目前为止，我们研究了流行的设计系统及其在 Rails 中的使用。 但是，有一个重要的工作正在直接为 Ruby 开发，称为 [RubyUI](https://businessclasskit.com/blog/<https:/rubyui.com/>)。 它也构建在 Tailwind 之上，并为 JavaScript bundlers 和 Importmaps 提供了简单的安装说明。
整个项目确实充满了绿灯信号，但并非没有潜在的缺点。 这是一个为 Phlex 构建的系统，Phlex 是 Ruby 的替代视图层。 如果你从未听说过它，这是组件的样子：
AspectRatio(aspect_ratio: "4/3", class: "rounded-md overflow-hidden border shadow-sm") do img( alt: "Placeholder", loading: "lazy", src: image_path('pattern.jpg') ) end
这是一个纯 Ruby 组件，将包含在纯 Ruby 视图中。 因此，没有 ERB 或任何类似的东西。 一方面，这很酷，另一方面，我并不是 100% 确信要离开 ERB 去寻找更绿色的牧场。 我一直很喜欢能够在 HTML 中工作。
## 结论
那么我们学到了什么？ 这些选择比以前更好了一些，但是没有一个单一的最终选择可以超越其他选择。 但有一点很清楚，走 Tailwind 路线可能是一个不错的选择，无论是在预制的 UI 还是 Business Class 自己的主题中，我们都应该继续在 Tailwind 之上构建。
 © Business Class Blog