roymondchen 3d038513e3 feat(editor): 新增 DSL 修改方法的 doNotSwitchPage 选项
在 add / remove / doRemove / sort / paste / alignCenter / moveToContainer
的 options 对象中新增 doNotSwitchPage,与 doNotSelect 合并为同一配置 DslOpOptions,
用于在 DSL 操作(新增 / 删除 / 跨页移动)会引发当前页面切换时跳过该次切换。

- 抽取共用类型 DslOpOptions 到 type.ts 并对外导出
- 新增 editorService.isOnDifferentPage 辅助方法用于跨页判断
- 修复 doUpdate 同步 state.page 时无条件覆盖的问题:只在被更新页就是当前页时才同步引用,避免「更新非当前页」误把编辑器切到该页
- doRemove 中对已删除节点的引用清理与当前页清空逻辑提升为无条件执行,避免 doNotSelect / doNotSwitchPage 跳过后续 select 时 state 持有已删除节点
- 补充对应单元测试与 API 文档

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-22 16:49:52 +08:00
2026-05-14 15:26:22 +08:00
2026-05-21 16:10:48 +08:00
2026-05-21 16:10:48 +08:00
2022-02-17 14:47:39 +08:00
2025-12-29 20:16:45 +08:00
2026-05-21 16:10:48 +08:00
2025-06-05 20:14:23 +08:00
2022-10-26 10:59:16 +08:00
2026-03-17 17:31:43 +08:00
2026-05-21 16:10:48 +08:00
2026-04-23 11:24:53 +08:00
2026-04-07 18:25:35 +08:00
2026-05-18 12:49:04 +08:00

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 中的编辑器,以及 runtimepackages/ui 提供的各个前端框架相关的 runtime 和 ui。

  • packages 目录中提供的内容,我们都以 npm 包形式输出,开发者可以通过安装对应的包来使用。
  • runtime 是我们提供的编辑器活动页和编辑器模拟器运行的页面项目示例。可以直接使用,也可以参考并自行实现。
  • playground 是一个简单的编辑器项目示例。即使用了 packagesruntime 内容的集成项目。开发者可以参考 playground使用魔方提供的能力实现一个满足业务方需求的编辑器。

编辑器

通过安装和使用 @tmagic/editor可以快速搭建起一个魔方编辑器。

魔方demo图

页面渲染

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

贡献者

欢迎入群交流

Description
No description provided
Readme Multiple Licenses 209 MiB
Languages
TypeScript 73.8%
Vue 21.8%
JavaScript 2.2%
SCSS 1.7%
CSS 0.4%
Other 0.1%