探索 UI Builder：让 React 组件构建更简单

UI Builder：项目的核心功能

UI Builder 是一款基于 React 的组件，它通过一个视觉化的无代码编辑器，允许用户快速创建和编辑用户界面。它自带一系列核心组件，可以轻松集成到现有的 shadcn/ui 项目中，并且可以扩展以使用你自己的自定义组件。

项目介绍

UI Builder 的诞生，解决了许多开发者在构建用户界面时所面临的痛点。这款工具的核心在于其无代码编辑器，使得设计人员能够以更直观、更快速的方式构建 UI，无论是用于创建登录页面、表单、仪表板还是其他任何你想象得到的内容。

它的应用场景非常广泛，可以在组织内部作为storybook的替代品或原型设计工具，也可以集成到产品中，为用户提供一种无代码构建应用程序的方式，类似于Shopify、Builder.io、Framer等。

项目技术分析

UI Builder 采用 React 进行开发，它利用了现代前端框架的诸多优势，如组件化、声明式编程等。项目使用了以下关键技术和架构：

• 无代码编辑器：提供直观的拖放界面，用户无需编写代码即可创建和编辑UI。
• 组件化架构：将UI拆分为可复用的组件，便于维护和扩展。
• 状态管理：利用浏览器本地存储，使得UI状态可以在会话之间持久化。
• 自定义组件支持：用户可以轻松地将自定义组件集成到编辑器中。

项目技术应用场景

UI Builder 的应用场景非常丰富，以下是一些主要的应用实例：

1. 快速原型设计：设计师可以使用UI Builder快速构建原型，以便于与团队沟通和迭代设计。
2. 内部工具开发：组织可以使用UI Builder作为内部工具，用于快速开发和管理内部系统。
3. 产品集成：产品可以集成UI Builder，为用户提供无代码的UI构建体验，提升产品的易用性和吸引力。

项目特点

UI Builder 的以下特点使其在众多UI构建工具中脱颖而出：

• 易于集成：与 shadcn/ui 的无缝集成，让现有项目能够轻松引入UI Builder。
• 自定义组件支持：用户可以自由地添加自定义组件，使工具更加灵活和强大。
• 状态持久化：利用本地存储，确保UI状态在会话之间得以保持。
• 交互式编辑：直观的拖放界面，使得UI构建变得简单而有趣。

以下是具体的项目特点和用法：

安装

如果你在项目中使用了最新的 shadcn/ui，可以直接从注册表中安装组件：

npx shadcn@latest add https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/block-registry.json

或者，可以使用UI Builder开始一个新项目：

npx shadcn@latest init https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/block-registry.json

注意：为了使页面主题正常工作，需要使用 style variables。

使用方法

UI Builder 的基本使用方法如下：

import UIBuilder from "@/components/ui/ui-builder";

export function App() {
  return <UIBuilder />;
}

默认情况下，UI的状态会存储在浏览器的本地存储中，因此在会话之间会保持状态。

初始状态和回调

你也可以为UI Builder设置初始状态，并定义状态变化时的回调：

import React from "react";
import UIBuilder from "@/components/ui/ui-builder";
import { PageLayer } from "@/lib/ui-builder/store/layer-store";

const initialLayers: PageLayer[] = [
  // ...定义初始层
];

const App = () => {
  const handleLayersChange = (updatedLayers: PageLayer[]) => {
    // 可以在这里将更新的层发送到后端
    console.log(updatedLayers);
  };

  return (
    <div>
      <UIBuilder initialLayers={initialLayers} onChange={handleLayersChange} />
    </div>
  );
};

export default App;

添加自定义组件

开发者可以将自定义组件添加到注册表中，以便在UI Builder中使用：

import { ComponentRegistry } from "@/lib/ui-builder/registry/component-registry";
import { z } from 'zod';
import { FancyComponent } from '@/components/ui/fancy-component';

export const customComponentDefinitions: ComponentRegistry = {
    FancyComponent: {
        component: FancyComponent,
        schema: z.object({
            // ...定义组件属性
        }),
        from: "@/components/ui/fancy-component",
        // ...其他配置
    },
};

生成组件注册表

为了生成项目组件的组件定义，可以运行以下命令：

npx tsx lib/ui-builder/scripts/zod-gen.ts

这将生成每个文件夹中的组件定义，但可能需要手动调整生成的文件以适应复杂的组件。

总结而言，UI Builder 是一款强大的无代码UI构建工具，它简化了React组件的构建过程，使得设计师和开发者能够更高效地构建用户界面。通过其丰富的特性和灵活的集成方式，UI Builder 无疑是当前市场上值得推荐的UI构建工具之一。