一飞开源 2022-07-12 23:26 发表于湖南
一飞开源，介绍创意、新奇、有趣、实用的免费开源应用、系统、软件、硬件及技术，一个探索、发现、分享、使用与互动交流的开源技术社区平台。致力于打造活力开源社区，共建开源新生态！
一、开源项目简介
TMagic 可视化搭建平台。
Vue 3.0 Composition API
Written in TypeScript
使用Apache-2.0开源协议
通过安装和使用 @tmagic/editor，可以快速搭建起一个魔方编辑器。
runtime 是魔方提供的页面渲染环境。通过加载在编辑器中产出的 DSL，即可得到魔方编辑器希望拥有的最终产物，一个活动页面。我们提供了 vue2/vue3/react 几个版本的 runtime。
通过魔方编辑器和 runtime 渲染，以及通过自定义的复杂组件开发，可以在魔方项目上，搭建出复杂而精美的页面。
魔方的表单配置项，使用了我们开发的基于 element-ui 的 @tmagic/form，@tmagic/form 也可以在其他地方单独使用。支持渲染 JS Schema 提供的表单描述。
playground 的示例项目，就是为开发者提供的基础应用示例。开发者可以基于此或者参考自行实现，搭建一个基于魔方的可视化搭建平台。
所见即所得，体验友好的拖拽编辑方式。
丰富的拓展能力，支持业务方自定义组件、插件、扩展编辑器能力。
支持多种布局方式，tmagic-editor的容器概念，支持配置项目时，自由组合嵌套业务组件，提供超强的组件布局方式。
支持不同前端框架，使用编辑器的业务方可以采用自己熟悉的前端框架，来开发自己的业务组件，比如vue2、vue3、react。
强大的配置，支持表单联动的配置能力。
组件联动，支持组件通信、组件联动，允许页面内各组件提供丰富配置能力。
低代码，支持针对具体配置的页面写代码，修改页面样式属性等，提供除组件外的高级编码能力。
编辑器是可视化搭建平台的主要内容，其中包含以下内容：
编辑器，承载整个拖拽布局的页面，包含了下述的其他页面可见元素。
模拟器，居中位置渲染了当前页面配置的组件内容，模拟真实页面的展示内容。
组件库，左侧展示当前业务下的相关组件内容，包含tmagic-editor提供的基础组件和业务自定义组件。
组件树，左侧展示当前页面添加的组件内容，以树状结构展示。
表单配置，右侧表单项目，展示由组件内提供的配置描述，提供修改组件行为的配置项。
DSL 源码，右上角的 图标可以展示当前页面，各个组件配置，页面基础配置组合而成的配置源码。
通过编辑器，可以创建、编辑、保存一个项目页面。同时，tmagic-editor开源项目提供了一个页面搭建管理平台的示例：magic-admin，可以用于快速构建一个完整的页面可视化搭建系统。
@tmagic/editor 实现一个可视化编辑器。
@tmagic/form 实现组件在编辑器中自定义表单配置。
@tmagic/core 实现对组件进行跨框架管理与一些通用复杂逻辑的实现。
@tmagic/stage 实现在编辑器中对组件的位置拖动与大小拖拉。
@tmagic/ui 提供一些vue3基础组件。
@tmagic/ui-vue2 提供一些vue2基础组件。
@tmagic/ui-react 提供一些react基础组件。
runtime 实现在编辑器中对使用不同框架的组件的渲染。
page 项目提供最终页面发布的执行环境与组件构建。
可以查阅 tmagic 的源代码open in new window，与文档描述内容可以逐一对应上，希望文档内容可以为开发者带来比较好的开发体验。
在本项目中，我们核心内容，是包含在 packages/editor 中的编辑器，以及 runtime 和 packages/ui 提供的各个前端框架相关的 runtime 和 ui。
packages 目录中提供的内容，我们都以 npm 包形式输出，开发者可以通过安装对应的包来使用。
runtime 是我们提供的编辑器活动页和编辑器模拟器运行的页面项目示例。可以直接使用，也可以参考并自行实现。
playground 是一个简单的编辑器项目示例。即使用了 packages 和 runtime 内容的集成项目。开发者可以参考 playground，使用魔方提供的能力实现一个满足业务方需求的编辑器。
node.js >= 16
先安装 pnpm
$ npm install -g pnpm
然后安装依赖
$ pnpm bootstrap
执行命令
$ pnpm playground
最后在浏览器中打开
http://localhost:8098/tmagic-editor/playground/
即可得到一个魔方编辑器示例项目
访问一飞开源：https://code.exmay.com/
联系客服
