@yl2/designer

低代码可视化设计器组件，支持拖拽式表单/CRUD 页面设计，提供组件物料面板、属性配置面板、画布预览、代码编辑等完整设计能力。

✨ 特性

• 🎨 拖拽式界面设计，所见即所得
• 📦 内置基础组件、高级组件、布局组件物料库
• 🔧 支持自定义业务组件扩展
• 📝 JSON Schema 驱动，数据模型可视化
• 🖥️ 支持 Form 和 Crud 两种页面模板
• 🌓 亮色/暗色主题切换
• 💻 内嵌 Monaco 代码编辑器，支持状态管理代码编写
• 📄 多页面设计（Modal / Drawer 子页面）

📦 安装

# pnpm
pnpm install @yl2/designer

# npm
npm install @yl2/designer

前置依赖

{
  "peerDependencies": {
    "react": "^18.x",
    "react-dom": "^18.x",
    "shineout": "^3.x",
    "@yl2/reactive": "*",
    "@yl2/editor": "*",
    "@yl2/transcoder": "*",
    "@yl2/components": "*"
  }
}

🚀 使用

import { TemplateDesign } from "@yl2/designer";

const App = () => {
  const jsonSchema = {
    type: "Form", // 或 "Crud"
    // ... 表单/表格配置
  };

  return (
    <TemplateDesign
      theme="light"
      moduleName="user-manage"
      jsonSchema={jsonSchema}
      onSave={(schemaStr, name) => {
        console.log("保存:", schemaStr, name);
      }}
    />
  );
};

📖 API

TemplateDesign Props

| 属性 | 类型 | 默认值 | 说明 | | ------------------ | -------------------------------------- | --------- | ---------------------------------------------------- | | theme | 'light' \| 'dark' \| null | 'light' | 主题模式 | | moduleName | string | - | 模型名称，用于标识当前设计的模块 | | jsonSchema | object | - | 数据模型，type 字段决定模板类型（Form / Crud） | | businessMaterial | BusinessMaterialProps[] | [] | 自定义业务组件列表 | | headerExtraContent | (v?: string) => ReactNode | - | 头部操作区域自定义渲染 | | onSave | (str: string, name?: string) => void | - | 保存回调，返回序列化后的 Schema 字符串 | | logo | ReactNode | - | 设计器 Logo | | readOnly | boolean | false | 是否只读模式 | | designerRequire | Record<string, any> | {} | 注入到设计器运行时的外部模块依赖 |

BusinessMaterialProps

| 属性 | 类型 | 说明 | | --------- | -------- | ----------------------------------------- | | tag | string | 组件标签文案 | | tagColor | string | 标签颜色 | | component | any | 组件实例 | | assets | any | 组件物料描述（包含 type、label、name 等） |

🏗️ 架构

src/
├── template/       # 模板入口（Form / Crud）
├── sider/          # 左侧物料面板（基础/高级/布局/业务组件）
├── canvas/         # 中间画布区域（设计器视图 + 数据模型查看）
├── panel/          # 右侧属性配置面板
├── header/         # 顶部操作栏
├── bar/            # 工具条
├── folders/        # 多页面管理（Page / Modal / Drawer）
├── monaco/         # 内嵌代码编辑器
├── schema/         # 物料 Schema 定义（表单/表格/Tabs）
├── icon/           # 组件图标
├── store.ts        # 全局状态管理（基于 @yl2/reactive）
└── util.ts         # 工具函数

📄 License

MIT