一个现代化的、可扩展的、跨框架的低代码可视化搭建平台

📖 概览

🚀 在线体验

🎯 项目目标

✨ 核心特性

🔧 技术特性

🚀 开发特性

🛠️ 工程特性

🏗️ 项目架构

整体架构图

数据流向图

🛠️ 技术栈

前端技术栈

工程化工具

📦 模块介绍

核心模块

1. 📚 Core（核心库）

// 数据模型(schemas)定义、存储与处理、以及事件状态的存储import{LowCodeRoot,LowCodePage,LowCodeNode}from'@quantum-lowcode/core';

2. 🎨 Editor（编辑器）

// 可视化编辑器模块，包括画布、布局、服务import{Editor}from'@quantum-lowcode/editor';

3. 📱 Sandbox（沙箱）

// 画布功能，负责编辑器与运行时通信import{BoxCore}from'@quantum-lowcode/sandbox';

4. 📊 Data-Source（数据源）

// 全局数据源和方法管理import{DataSourceManager}from'@quantum-lowcode/data-source';

5. 🎭 Runtime（运行时）

// 运行时渲染，与低代码引擎完全脱离importVue2Runtimefrom'@quantum-lowcode/runtime-vue2-active';importVue3Runtimefrom'@quantum-lowcode/runtime-vue3';

6. 🧩 UI组件库

// Vue组件库import{QButton,QContainer,QText}from'@quantum-lowcode/ui';// Vue3import{QButton,QContainer,QText}from'@quantum-lowcode/ui-vue2';// Vue2

🚀 快速开始

环境要求

安装步骤

# 1. 克隆项目git clone https://github.com/little-littleprogrammer/quantum-lowcode.gitcd quantum-lowcode# 2. 安装依赖pnpm install# 3. 启动开发环境pnpm playground

开发命令

# 安装所有依赖pnpm install# 构建所有包pnpm build# 启动开发模式pnpm dev# 启动playground演示pnpm playground# 代码格式化pnpm format# 代码检查pnpm lint# 生成changelogpnpm changelog

📚 使用指南

基本使用流程

Schema标准示例

// Schema最终协议，低代码协议标准{type:'root',// root | page | containerchildren:[{type:'page',// 支持多页面应用field:'page1',children:[{type:'container',field:'container1',// 唯一key，映射为HTML element的idstyle:{backgroundColor:'#f0f0f0',padding:'20px'},children:[{field:'button1',component:'q-button',componentProps:{text:'点击我',type:'primary'},events:{click:'handleButtonClick'}}]},{field:'slide',component:'q-carousel',style:{backgroundImage:'url(https://cdn.example.com/bg.jpg)'},componentProps:{autoplay:true,interval:3000}}]}]}

组件开发示例

<!-- 自定义组件示例--><template>  <divclass="q-custom-component">    <h3>{{ title }}</h3>    <p>{{ content }}</p>    <button@click="handleClick">{{ buttonText }}</button>  </div></template><script setup lang="ts">import {defineProps,defineEmits }from'vue';// 定义组件属性const props=defineProps<{  title:string;  content:string;  buttonText:string;}>();// 定义事件const emit=defineEmits<{  click: [event:MouseEvent];}>();const handleClick= (event:MouseEvent)=> {emit('click',event);};</script>

// 组件配置示例exportdefault[{field:'api',label:'请求接口',component:'InputSelect',},{// 此组件支持的事件, 需要在组件中emit出来,目的为配置化界面配置事件时可以选择一下事件field:'events',label:'事件',component:'EventSelect',// 事件必须填这个组件componentProps:{options:[{label:'点击',value:'onClick',},{label:'change',value:'onChange',}],},}];

📖 API文档

核心API

LowCodeRoot

classLowCodeRoot{constructor(options:ILowCodeRootOptions)// 设置配置setConfig(config:ILowCodeRootConfig,pageId?:string):void// 切换页面setPage(pageId:string):void// 注册组件registerComponent(name:string,component:any):void// 注册事件registerEvent(name:string,handler:Function):void}

BoxCore (沙箱核心)

classBoxCore{constructor(options:IBoxCoreConfig)// 设置运行时setRuntime(runtime:IRuntime):Promise<void>// 更新组件updateNode(data:IUpdateData):void// 删除组件removeNode(data:IRemoveEventData):void// 选中组件selectNode(id:string):void}

🔧 开发指南

组件开发

调试组件

二次开发

🚧 开发路线图

✅ 已完成功能

🚧 正在开发

📋 规划中

🎯 最终目标

🤝 贡献指南

贡献方式

开发流程

代码规范

📄 许可证

🙏 致谢

📞 支持与反馈

如果这个项目对你有帮助，请给我们一个⭐️

Made with ❤️ by Quantum Team