lowcode-asa

一个灵活、可扩展的低代码 React 框架，支持通过 JSON Schema 快速构建应用界面。

✨ 特性

• 🎯 Schema 驱动 - 通过 JSON Schema 定义界面结构
• 🔌 完全解耦 - 核心框架不依赖任何 UI 库，Ant Design 等作为可选插件
• 🎨 组件抽象 - 提供基础组件层，可独立使用或通过 Schema 渲染
• 🔧 插件系统 - 支持验证、权限、生命周期等插件扩展
• 📦 类型安全 - 完整的 TypeScript 类型支持
• 🚀 高性能 - 优化的渲染机制和事件处理
• ⚡ Tree Shaking - 按需加载，未使用的适配器不会打包

📦 安装

# 核心包（必需）
pnpm add lowcode-asa

# Ant Design（可选，仅在使用 antdAdapter 时需要）
pnpm add antd

注意：antd 是可选依赖，只有在使用 antdAdapter 时才需要安装。框架核心完全不依赖任何 UI 库。

🚀 快速开始

方式一：使用 Schema 渲染（推荐）

import { Renderer, LowCodeProvider, antdAdapter } from "lowcode-asa";

const schema = {
  type: "page",
  children: [
    {
      type: "form",
      props: {
        layout: "vertical",
      },
      children: [
        {
          type: "input",
          props: {
            name: "username",
            label: "用户名",
            placeholder: "请输入用户名",
          },
        },
        {
          type: "button",
          props: {
            text: "提交",
            type: "primary",
            htmlType: "submit",
          },
        },
      ],
    },
  ],
};

const context = {
  services: {},
  effects: {},
};

function App() {
  return (
    <LowCodeProvider context={context}>
      <Renderer schema={schema} adapter={antdAdapter} />
    </LowCodeProvider>
  );
}

方式二：直接使用组件

import {
  Form,
  Input,
  Button,
  Table,
  LowCodeProvider,
} from "lowcode-asa";

function App() {
  const handleSubmit = (values) => {
    console.log("表单提交:", values);
  };

  const columns = [
    { key: "id", title: "ID", dataIndex: "id" },
    { key: "name", title: "姓名", dataIndex: "name" },
  ];

  const dataSource = [
    { id: 1, name: "张三" },
    { id: 2, name: "李四" },
  ];

  return (
    <LowCodeProvider context={{}}>
      <Form onSubmit={handleSubmit}>
        <Input name="name" label="姓名" placeholder="请输入姓名" />
        <Button type="primary" htmlType="submit" text="提交" />
      </Form>

      <Table columns={columns} dataSource={dataSource} />
    </LowCodeProvider>
  );
}

📚 核心概念

Schema 结构

interface SchemaNode {
  type: ComponentType; // 组件类型
  props?: Record<string, any>; // 组件属性
  children?: SchemaNode[]; // 子节点
  events?: {
    // 事件配置
    onClick?: SchemaEvent;
    onSubmit?: SchemaEvent;
    // ...
  };
}

Context 上下文

interface LowCodeContext {
  // 数据与状态
  data?: Record<string, any>;
  [key: string]: any;

  // 服务注册
  services?: Record<string, ServiceHandler>;

  // Effect 处理器
  effects?: Record<string, (payload: any, context: any) => any>;

  // 组件注册
  components?: Record<string, React.ComponentType<any>>;
}

🎨 组件

Form - 表单容器

<Form
  name="userForm"
  layout="vertical"
  initialValues={{ username: "admin" }}
  onSubmit={(values) => console.log(values)}
>
  {/* 表单项 */}
</Form>

Input - 输入框

<Input
  name="username"
  label="用户名"
  placeholder="请输入用户名"
  required
  maxLength={20}
  onChange={(value) => console.log(value)}
/>

Button - 按钮

<Button
  type="primary"
  size="large"
  text="提交"
  loading={false}
  disabled={false}
  onClickHandler={() => console.log("clicked")}
/>

Table - 表格

<Table
  columns={[
    { key: "id", title: "ID", dataIndex: "id" },
    { key: "name", title: "姓名", dataIndex: "name" },
  ]}
  dataSource={[
    { id: 1, name: "张三" },
    { id: 2, name: "李四" },
  ]}
  rowKey="id"
  bordered
  pagination={{ pageSize: 10 }}
/>

🔌 适配器系统

核心理念：完全解耦

框架核心完全不依赖任何 UI 库。所有 UI 库（包括 Ant Design）都以可插拔适配器的形式存在。

┌──────────────────────────────────────────────┐
│  应用层（你的代码）                            │
├──────────────────────────────────────────────┤
│  Schema 层（JSON 配置）                       │
├──────────────────────────────────────────────┤
│  Renderer（渲染引擎 - 框架核心）              │
│     ↓                                        │
│  Adapter（可插拔，完全可选）                  │
│     - antdAdapter  ← 插件（需要 antd）        │
│     - muiAdapter   ← 插件（需要 @mui）        │
│     - 不使用       ← 原生 HTML（无需任何库）   │
├──────────────────────────────────────────────┤
│  Components（框架组件层 - 原生 HTML 实现）    │
└──────────────────────────────────────────────┘

使用 Ant Design 适配器（可选）

import { antdAdapter } from "lowcode-asa";
// ⚠️ 需要先安装：pnpm add antd

<Renderer schema={schema} adapter={antdAdapter} />;

不使用任何 UI 库（默认）

// ✅ 无需安装任何 UI 库
<Renderer schema={schema} /> // 使用原生 HTML 渲染

创建自定义适配器

如果想使用其他 UI 库（如 Material-UI、Chakra UI），创建自己的适配器：

import type { AdapterConfig } from "lowcode-asa";
import { Button as MuiButton, TextField } from "@mui/material";

export const muiAdapter: AdapterConfig = {
  name: "mui",
  render(type, props, children, context) {
    switch (type) {
      case "button":
        return <MuiButton {...props}>{children}</MuiButton>;
      case "input":
        return <TextField {...props} />;
      // ... 其他组件映射
      default:
        console.warn(`Unsupported component type: ${type}`);
        return null;
    }
  },
};

// 使用
<Renderer schema={schema} adapter={muiAdapter} />;

优势对比

| 特性 | 使用适配器 | 不使用适配器 | | ------------ | ------------------------- | ----------------- | | 依赖包 | 需要安装 UI 库 | 无需任何依赖 | | 打包体积 | 包含 UI 库 | 最小化 | | 视觉效果 | 完整的 UI 样式 | 基础原生样式 | | 适用场景 | 低代码平台/可视化搭建 | 轻量级应用/嵌入式 | | Tree Shaking | ✅ 未使用的适配器不会打包 | ✅ 零依赖 |

🔧 Hooks

useLowCode

获取完整的低代码上下文：

const context = useLowCode();
console.log(context.services, context.data);

useLowCodeData

获取特定的上下文数据：

const tableData = useLowCodeData("tableData");

useLowCodeService

获取注册的服务：

const userService = useLowCodeService("userService");
await userService.fetchUsers();

useLowCodeEffect

获取 Effect 处理器：

const submitEffect = useLowCodeEffect("submit");
submitEffect?.({ action: "/api/submit", data: formData });

🧩 插件系统

验证插件

import { validationPlugin } from "lowcode-asa";

// 在应用中使用
const config = {
  schema,
  context,
  plugins: [validationPlugin],
};

权限插件

import { permissionPlugin } from "lowcode-asa";

const config = {
  schema,
  context,
  plugins: [permissionPlugin],
};

生命周期插件

import { lifecyclePlugin } from "lowcode-asa";

const config = {
  schema,
  context,
  plugins: [lifecyclePlugin],
};

📖 API 文档

核心导出

• Renderer - Schema 渲染器
• LowCodeProvider - 上下文提供者
• createLowCodeContext - 创建上下文工具函数

组件导出

• Form - 表单组件
• Input - 输入框组件
• Button - 按钮组件
• Table - 表格组件

Hooks 导出

• useLowCode - 获取完整上下文
• useLowCodeOptional - 可选的上下文获取
• useLowCodeData - 获取特定数据
• useLowCodeService - 获取服务
• useLowCodeEffect - 获取 Effect

适配器导出

• antdAdapter - Ant Design 适配器

工具导出

• handleEffect - Effect 处理函数
• collectFields - 表单字段收集
• warning - 警告工具
• isPromise - Promise 判断

🗂️ 项目结构

lowcode-react/
├── src/
│   ├── core/              # 核心渲染逻辑
│   │   ├── Renderer.tsx
│   │   ├── handleEffect.ts
│   │   ├── collectForm.ts
│   │   └── runtime.ts
│   ├── components/        # 基础组件
│   │   ├── Form.tsx
│   │   ├── Input.tsx
│   │   ├── Button.tsx
│   │   └── Table.tsx
│   ├── adapters/          # UI 适配器
│   │   ├── antdAdapter.tsx
│   │   └── types.ts
│   ├── provider/          # Context Provider
│   │   ├── LowCodeProvider.tsx
│   │   └── useLowCode.ts
│   ├── plugins/           # 插件系统
│   │   ├── validation.ts
│   │   ├── permission.ts
│   │   └── lifecycle.ts
│   ├── devtools/          # 开发工具
│   │   └── Logger.ts
│   └── utils/             # 工具函数
│       ├── isPromise.ts
│       ├── warning.ts
│       └── typeCheck.ts
└── dist/                  # 构建输出

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可

MIT License

📝 更新日志

v1.0.0 (2026-02-04)

• ✨ 新增 components/ 目录，提供基础组件层
  • Form - 表单容器组件
  • Input - 输入框组件
  • Button - 按钮组件
  • Table - 表格组件
• ✨ 新增 adapters/types.ts 定义适配器类型系统
• ✨ 新增 provider/useLowCode.ts 提供更多上下文 Hooks
  • useLowCodeData - 获取特定数据
  • useLowCodeService - 获取服务
  • useLowCodeEffect - 获取 Effect
• 🎨 完善类型系统，添加 ComponentProps 基础类型
• 📚 完善文档和示例