lxm_front/tmagic-editor
1
0
Fork 0
mirror of synced 2026-02-04 18:47:57 +08:00
Code Issues Projects Releases Wiki Activity

chore: 删除vue2 runtime，后续vue-components里的组件不再考虑vue2的支持

Browse Source
This commit is contained in:
roymondchen
2025-08-27 14:24:15 +08:00
parent 0967c3449e
commit 7d3a2df793
53 changed files with 64 additions and 784 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/api/editor/props.md
View File

@@ -375,7 +375,7 @@ const stageContentMenu = ref([
```html
<template>
<m-editor
runtime-url="https://tencent.github.io/tmagic-editor/playground/runtime/vue3/playground/index.html"
runtime-url="https://tencent.github.io/tmagic-editor/playground/runtime/vue/playground/index.html"
></m-editor>
</template>
```

5
docs/guide/advanced/page.md
View File

@@ -60,6 +60,5 @@ export default defineComponent({
## 渲染器示例
在tmagic-editor的示例项目中，我们提供了三个版本的 @tmagic/ui。可以参考对应前端框架的渲染器实现。
- [vue3 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui/src/container/src/Container.vue)
- [vue2 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-vue2/src/container/Container.vue)
- [react 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-react/src/container/Container.tsx)
- [vue 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/vue-components/container/src/Container.vue)
- [react 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/react-components/container/src/Container.tsx)

13
docs/guide/advanced/tmagic-ui.md
View File

@@ -5,15 +5,13 @@ tmagic-editor的设计是希望发布的页面支持多个前端框架，即各
所以tmagic-editor的设计中，针对每个前端框架，都需要有一个对应的 @tmagic/ui 来承担渲染器职责。同时，也需要一个使用和 @tmagic/ui 相同前端框架的 runtime 来 @tmagic/ui 和业务组件的，具体 runtime 概念，可以参考[页面发布](../publish)。
@tmagic/ui 在tmagic-editor设计中，承担的是业务逻辑无关的，基础组件渲染的功能。一切和业务相关的逻辑，都应该在 [runtime](../runtime.html) 中实现。这样 @tmagic/ui 就能保持其通用性。
我们以项目代码中提供的 vue3 版本的 @tmagic/ui 作为示例介绍其中包含的内容。
我们以项目代码中提供的 vue 版本的 [vue-components](https://tencent.github.io/tmagic-editor/vue-components) 作为示例介绍其中包含的内容。
## 渲染器
在 vue3 中，实现渲染器的具体形式参考[页面渲染](../advanced/page)中描述的[容器渲染](../advanced/page.html#容器渲染)和[组件渲染](../advanced/page.html#容器渲染)。
在 vue 中，实现渲染器的具体形式参考[页面渲染](../advanced/page)中描述的[容器渲染](../advanced/page.html#容器渲染)和[组件渲染](../advanced/page.html#容器渲染)。
## 基础组件
在 @tmagic/ui vue3 中，我们提供了几个基础组件，可以在项目源码中找到对应内容。
在 [vue-components](https://tencent.github.io/tmagic-editor/vue-components) 中，我们提供了几个基础组件，可以在项目源码中找到对应内容。
- page tmagic-editor的页面基础
- container tmagic-editor的容器渲染器
@@ -23,8 +21,3 @@ tmagic-editor的设计是希望发布的页面支持多个前端框架，即各
其中 page/container/Component 是 UI 的基础，是每个框架的 UI 都应该实现的。
button/text 其实就是一个组件开发的示例，具体组件开发相关规范可以参考[组件开发](../component)。
## @tmagic/ui 示例
- [vue3 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui)
- [vue2 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-vue2)
- [react 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-react)

14
docs/guide/component.md
View File

@@ -2,14 +2,14 @@
tmagic-editor支持业务方进行自定义组件开发。在tmagic-editor中，组件是以 npm 包形式存在的，组件和插件只要按照规范开发，就可以在tmagic-editor的 runtime 中被加入并正确渲染组件。
## 组件开发
以 vue3 的组件开发为例。运行项目中的 playground 示例，会自动加载 vue3 的 runtime。runtime会加载[@tmagic/ui](https://github.com/Tencent/tmagic-editor/tree/master/packages/ui)
以 vue 的组件开发为例。运行项目中的 playground 示例，会自动加载 vue 的 runtime。runtime会加载[@tmagic/ui](https://github.com/Tencent/tmagic-editor/tree/master/packages/ui)
## 组件注册
在 [playground](https://tencent.github.io/tmagic-editor/playground/index.html#/) 中，我们可以尝试点击添加一个组件，在模拟器区域里，就会出现这个组件。其中就涉及到组件注册。
这一步需要开发者基于tmagic-editor搭建了平台后，实现组件列表的注册、获取机制，tmagic-editor组件注册其实就是保存好组件 `type` 的映射关系。`type` 可以参考[组件介绍](../guide/conception.html#组件)。
可以参考 vue3 版本的 @tmagic/ui 中，[组件渲染](../guide/advanced/page.html#组件渲染)逻辑里，type 会作为组件名进入渲染。所以在 vue3 的组件开发中，我们也需要在为 vue 组件声明 name 字段时，和 type 值对应起来，才能正确渲染组件。
可以参考 vue 版本的 @tmagic/ui 中，[组件渲染](../guide/advanced/page.html#组件渲染)逻辑里，type 会作为组件名进入渲染。所以在 vue 的组件开发中，我们也需要在为 vue 组件声明 name 字段时，和 type 值对应起来，才能正确渲染组件。
### 组件规范
组件的基础形式，需要有四个文件
@@ -22,7 +22,7 @@ tmagic-editor支持业务方进行自定义组件开发。在tmagic-editor中，
@tmagic/ui 中的 button/text 就是基础的组件示例。我们要求声明 index 入口，因为我们希望在后续的配套打包工具实现上，可以有一个统一规范入口。
### 1. 创建组件
在项目中，如 runtime vue3 目录中，创建一个名为 test-component 的组件目录，其中包含上面四个规范文件。
在项目中，如 runtime 目录中，创建一个名为 test-component 的组件目录，其中包含上面四个规范文件。
```javascript
// index.js
// vue
@@ -69,7 +69,7 @@ export default {
};
```
vue3 版本的组件代码示例
版本的组件代码示例
```vue
<!-- Test.vue -->
<template>
@@ -119,7 +119,7 @@ export default Test;
```
### 2. 使用tmagic-cli
在 runtime vue3 中，我们已经提供好一份示例。在 tmagic.config.ts 文件中。只需要在 packages 加入你创建的组件的路径（如果是个 npm 包，则将路径替换为包名即可），打包工具就会自动识别到你的组件。
在 runtime vue 中，我们已经提供好一份示例。在 tmagic.config.ts 文件中。只需要在 packages 加入你创建的组件的路径（如果是个 npm 包，则将路径替换为包名即可），打包工具就会自动识别到你的组件。
### 3. 启动 playground
在上面的步骤完成后，在 playground/src/configs/componentGroupList 中。找到组件栏的基础组件列表，在其中加入你的开发组件
@@ -155,7 +155,7 @@ npm run playground
<img src="https://image.video.qpic.cn/oa_fd3c9c-3_548108267_1636719045199471">
### 4. 启动 runtime
在完成开发中组件在编辑器中的实现后，我们将编辑器中的 DSL 源码📄 打开，复制 DSL。并在 runtime/vue3/src/page 下。创建一个 page-config.js 文件。将 DSL 作为配置导出。
在完成开发中组件在编辑器中的实现后，我们将编辑器中的 DSL 源码📄 打开，复制 DSL。并在 runtime/vue/src/page 下。创建一个 page-config.js 文件。将 DSL 作为配置导出。
```javascript
window.magicDSL = [
@@ -168,7 +168,7 @@ window.magicDSL = [
import './page-config.js';
```
然后执行在 runtime/vue3 目录下执行
然后执行在 runtime/ 目录下执行
```
npm run build:libs
npm run dev

5
docs/guide/conception.md
View File

@@ -60,11 +60,6 @@ DSL 是编辑器搭建页面的最终产物（描述文件），其中包含了
### runtime
我们把页面统一称为 runtime，更具体的 runtime 概念可以查看[页面发布](./publish.html#runtime)。**runtime 是承载tmagic-editor项目页面的运行环境**。编辑器的工作区是 runtime 的一个具体实例，另一个就是我们发布上线后，用户访问的真实项目页面。
### @tmagic/ui
@tmagic/ui 包含了tmagic-editor的基础组件库，提供了容器、文本、按钮这样的基础组件。我们提供了不同语言框架的 @tmagic/ui，如 vue2 和 vue3。
@tmagic/ui 和 runtime 是配套出现的，runtime 必须基于 @tmagic/ui 才可以实现渲染。因为 @tmagic/ui 需要提供 runtime 所需要的渲染器。
## 联动
页面搭建过程中，会涉及到两种联动形式
- 在编辑器中，组件的表单配置项之间需要联动。

6
docs/guide/index.md
View File

@@ -125,7 +125,7 @@ app.mount('#app');
// 初始化页面数据
}),
runtimeUrl: "/runtime/vue3/playground/index.html",
runtimeUrl: "/runtime/vue/playground/index.html",
propsConfigs: [
// 组件属性列表
@@ -208,10 +208,10 @@ npm install sass -D
```javascript
setup() {
asyncLoadJs(`/runtime/vue3/assets/config.js`).then(() => {
asyncLoadJs(`/runtime/vue/assets/config.js`).then(() => {
propsConfigs.value = window.magicPresetConfigs;
});
asyncLoadJs(`/runtime/vue3/assets/value.js`).then(() => {
asyncLoadJs(`/runtime/vue/assets/value.js`).then(() => {
propsValues.value = window.magicPresetValues;
});
}

3
docs/guide/introduction.md
View File

@@ -36,9 +36,6 @@ tmagic-editor可视化开源项目是从魔方平台演化而来的开源项目
- **@tmagic/core** 实现对组件进行跨框架管理与一些通用复杂逻辑的实现。
- **@tmagic/data-source** 实现数据源的管理与编译。
- **@tmagic/stage** 实现在编辑器中对组件的位置拖动与大小拖拉。
- **@tmagic/ui** 提供一些vue3基础组件。
- **@tmagic/ui-vue2** 提供一些vue2基础组件。
- **@tmagic/ui-react** 提供一些react基础组件。
- **runtime** 实现在编辑器中对使用不同框架的组件的渲染。
可以查阅 tmagic 的[源代码](https://github.com/Tencent/tmagic-editor)，与文档描述内容可以逐一对应上，希望文档内容可以为开发者带来比较好的开发体验。

5
docs/guide/publish.md
View File

@@ -13,7 +13,7 @@ runtime 的概念，是理解tmagic-editor项目页运行的重要概念，runti
所以更深入描述，runtime 是tmagic-editor页面的渲染环境，提供不同场景下的能力封装。如果理解了tmagic-editor的设计，阅读了tmagic-editor的源码，可以发现，runtime 只是对tmagic-editor的渲染器做了一层包装，在不同 runtime 中，tmagic-editor的渲染逻辑和组件代码都是相同的。
并且，由于tmagic-editor在编辑器中的模拟器是通过 iframe 渲染的，和tmagic-editor平台本身可以做到框架解耦，所以 runtime 也可以用不同框架开发。目前tmagic-editor提供了 vue2/vue3 和 react 的 runtime 示例。
并且，由于tmagic-editor在编辑器中的模拟器是通过 iframe 渲染的，和tmagic-editor平台本身可以做到框架解耦，所以 runtime 也可以用不同框架开发。目前tmagic-editor提供了 vue 和 react 的 runtime 示例。
各个 runtime 的作用除了作为不同场景下的渲染环境，同时也是不同环境的打包构建载体。tmagic-editor示例代码中的打包就是基于 runtime 进行的。
@@ -21,8 +21,7 @@ runtime 的概念，是理解tmagic-editor项目页运行的重要概念，runti
由于 runtime 是页面渲染的承载环境，其中会加载 @tmagic/ui 以及各个业务组件，业务发布项目页也是基于 runtime，所以在 runtime 中实现业务方的自定义逻辑是最合适的。runtime 可以提供一些全局 API，供业务组件调用。我们可以把下面的模拟器中的 runtime 视为一个业务方runtime。
tmagic-editor提供了三个版本的 runtime 示例，可以参考：
- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3)
- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2)
- [vue runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue)
- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react)
### 真实页面渲染（Page）

6
docs/guide/runtime.md
View File

@@ -14,8 +14,7 @@ runtime 的 `page` 部分，就是真实项目页面的渲染环境。发布出
- 加载第三方全局组件/插件等
具体的 page 实现示例，可以参考
- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3/page)
- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2/page)
- [vue runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue/page)
- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react/page)
### playground
@@ -45,8 +44,7 @@ window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
|sortNode| 组件在容器间排序 |{ `src` , `dist`, `root` }: `SortEventData` |
runtime 的实现示例，可以参考tmagic-editor提供的：
- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3)
- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2)
- [vue runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue)
- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react)
### 页面发布

2
docs/guide/tutorial/render.md
View File

@@ -1,6 +1,6 @@
# 3.[DSL](../conception.md#dsl) 解析渲染
tmagic 提供了 vue3/vue2/react 三个版本的解析渲染组件，可以直接使用
tmagic 提供了 vue/react 两个个版本的解析渲染组件，可以直接使用
[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)