- add/remove/sort/alignCenter/moveToContainer/paste 新增 doNotSelect 选项,控制操作后是否自动触发选中变化 - doUpdate/doRemove 改为始终同步当前选中列表中的节点引用,避免 state 持有已被替换/已删除的过期节点 - 顺手修复 doUpdate 在 splice(-1) 时误改最后一个选中项的 bug - 移除 update/doUpdate 的 selectedAfterUpdate 参数(语义已内化),move 不再暴露无意义的 doNotSelect - 新增 safeOptions / safeParent 辅助函数,兜底插件机制将 dispatch 注入到形参位置的场景 Co-authored-by: Cursor <cursoragent@cursor.com>
TMagic
TMagic 可视化搭建平台。
- 💪 Vue 3.0 Composition API
- 🔥 Written in TypeScript
文档
文档请移步 https://tencent.github.io/tmagic-editor/docs/index.html
目前文档仍在逐步完善中,如有疑问欢迎给我们提 issue。
Playground 体验
https://tencent.github.io/tmagic-editor/playground/index.html
环境准备
node.js ^20.19.0 || >=22.12.0
pnpm >= 10
先安装 pnpm
$ npm install -g pnpm
然后安装依赖
$ pnpm bootstrap
运行项目
执行命令
$ pnpm playground
最后在浏览器中打开
http://localhost:8098/tmagic-editor/playground/
即可得到一个魔方编辑器示例项目
magic-admin
已迁移至 https://github.com/vft-magic/tmagic-admin
项目介绍
在本项目中,我们核心内容,是包含在 packages/editor 中的编辑器,以及 runtime 和 packages/ui 提供的各个前端框架相关的 runtime 和 ui。
packages目录中提供的内容,我们都以 npm 包形式输出,开发者可以通过安装对应的包来使用。runtime是我们提供的编辑器活动页和编辑器模拟器运行的页面项目示例。可以直接使用,也可以参考并自行实现。playground是一个简单的编辑器项目示例。即使用了packages和runtime内容的集成项目。开发者可以参考 playground,使用魔方提供的能力实现一个满足业务方需求的编辑器。
编辑器
通过安装和使用 @tmagic/editor,可以快速搭建起一个魔方编辑器。
页面渲染
runtime 是魔方提供的页面渲染环境。通过加载在编辑器中产出的 DSL,即可得到魔方编辑器希望拥有的最终产物,一个活动页面。我们提供了 vue2/vue3/react 几个版本的 runtime。
通过魔方编辑器和 runtime 渲染,以及通过自定义的复杂组件开发,可以在魔方项目上,搭建出复杂而精美的页面。
表单渲染
魔方的表单配置项,使用了我们开发的基于 element-ui 的 @tmagic/form,@tmagic/form 也可以在其他地方单独使用。支持渲染 JS Schema 提供的表单描述。
使用
playground 的示例项目,就是为开发者提供的基础应用示例。开发者可以基于此或者参考自行实现,搭建一个基于魔方的可视化搭建平台。
tmagic-editor主要定位是搭建生成移动端H5页面,如果有搭建PC端低代码平台的需求,可以了解一下腾讯出品的另外一个低代码平台:无极低代码平台。
参与贡献
如果你有好的意见或建议,欢迎给我们提 Issues 或 Pull Requests,为提升魔方可视化编辑器开发体验贡献力量。
详见:CONTRIBUTING.md
贡献者
欢迎入群交流