docs: 完善文档

fix #664

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [1.7.2](https://github.com/Tencent/tmagic-editor/compare/v1.7.1...v1.7.2) (2025-12-09)
+
+
+
+## [1.7.1](https://github.com/Tencent/tmagic-editor/compare/v1.7.0...v1.7.1) (2025-12-09)
+
+
+### Bug Fixes
+
+* **core:** getNode 添加stict参数来表示必须知道页面片容器id才会返回页面内的节点 ([83664cd](https://github.com/Tencent/tmagic-editor/commit/83664cd44019c3b5f05d2ad60bbb8fcf751f6b35))
+* **form:** tabs组件子项配置了name后,配置生成的数据出错 ([b3ce1a3](https://github.com/Tencent/tmagic-editor/commit/b3ce1a3b930e9cbfc74b72bfb7dd9268fe341626))
+* **tmagic-form:** runtime刷新导致root丢失 ([d039cee](https://github.com/Tencent/tmagic-editor/commit/d039cee9136e7e892161dafe25ff34ee95bce958))
+
+
+### Features
+
+* **vue-components:** 不再兼容vue2 ([756612e](https://github.com/Tencent/tmagic-editor/commit/756612eda51fa8079420203eaca585175b039e8b))
+* **vue-runtime-help:** 去掉vue2的兼容 ([2a7ab4e](https://github.com/Tencent/tmagic-editor/commit/2a7ab4e916444a68c7cc05af4fa57ddd59994393))
+
+
+
 # [1.7.0](https://github.com/Tencent/tmagic-editor/compare/v1.7.0-beta.5...v1.7.0) (2025-12-04)
 
 

docs/api/editor/componentListServiceMethods.md

@@ -4,34 +4,101 @@
 
 - **参数：**
 
-  - 
+  - {[ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355)[]} componentGroupList 组件列表配置
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  设置左侧面板的组件列表配置
+
+  :::tip
+  该方法通常由编辑器内部调用，开发者可以通过 [m-editor 的 componentGroupList prop](./props.md#componentgrouplist) 来配置组件列表
+  :::
+
+- **示例：**
+
+```js
+import { componentListService } from '@tmagic/editor';
+
+componentListService.setList([
+  {
+    title: '基础组件',
+    items: [
+      {
+        icon: 'text-icon',
+        text: '文本',
+        type: 'text',
+      },
+      {
+        icon: 'button-icon',
+        text: '按钮',
+        type: 'button',
+      },
+    ],
+  },
+]);
+```
+
 ## getList
 
-- **参数：**
+- **参数：** 无
-
-  - 
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - {[ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355)[]} 组件列表配置
 
 - **详情：**
 
+  获取当前的组件列表配置
+
+- **示例：**
+
+```js
+import { componentListService } from '@tmagic/editor';
+
+const list = componentListService.getList();
+console.log(list);
+```
+
+## resetState
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  重置组件列表状态，清空所有配置
+
+- **示例：**
+
+```js
+import { componentListService } from '@tmagic/editor';
+
+componentListService.resetState();
+```
+
 ## destroy
 
-- **参数：**
+- **参数：** 无
-
-  - 
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
+
+  销毁 componentListService，清空状态并移除所有事件监听和插件
+
+- **示例：**
+
+```js
+import { componentListService } from '@tmagic/editor';
+
+componentListService.destroy();
+```

docs/api/editor/dataSourceServiceMethods.md

@@ -2,30 +2,540 @@
 
 ## get
 
+- **参数：**
+
+  - `{StateKey}` name 状态键名
+
+- **返回：**
+
+  - `{any}` 对应的状态值
+
+- **详情：**
+
+  获取数据源服务的内部状态
+
+  可用的状态键：
+  - `datasourceTypeList`: 数据源类型列表
+  - `dataSources`: 当前数据源列表
+  - `editable`: 是否可编辑
+  - `configs`: 数据源表单配置
+  - `values`: 数据源默认值
+  - `events`: 数据源事件列表
+  - `methods`: 数据源方法列表
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const dataSources = dataSourceService.get('dataSources');
+console.log(dataSources);
+```
+
+## set
+
+- **参数：**
+
+  - `{StateKey}` name 状态键名
+  - `{any}` value 状态值
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  设置数据源服务的内部状态
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.set('editable', false);
+```
+
 ## getFormConfig
 
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型，默认为 'base'
+
+- **返回：**
+
+  - {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} 表单配置
+
+- **详情：**
+
+  获取指定类型数据源的表单配置
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const config = dataSourceService.getFormConfig('http');
+console.log(config);
+```
+
 ## setFormConfig
 
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型
+  - {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} config 表单配置
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  设置指定类型数据源的表单配置
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.setFormConfig('http', [
+  {
+    name: 'url',
+    text: '请求地址',
+    type: 'text',
+  },
+  {
+    name: 'method',
+    text: '请求方法',
+    type: 'select',
+    options: [
+      { text: 'GET', value: 'GET' },
+      { text: 'POST', value: 'POST' },
+    ],
+  },
+]);
+```
+
 ## getFormValue
 
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型，默认为 'base'
+
+- **返回：**
+
+  - {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} 数据源默认值
+
+- **详情：**
+
+  获取指定类型数据源的默认值
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const defaultValue = dataSourceService.getFormValue('http');
+console.log(defaultValue);
+```
+
 ## setFormValue
 
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型
+  - {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} value 数据源默认值
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  设置指定类型数据源的默认值
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.setFormValue('http', {
+  type: 'http',
+  method: 'GET',
+  url: '',
+});
+```
+
 ## getFormEvent
 
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型，默认为 'base'
+
+- **返回：**
+
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 事件列表
+
+- **详情：**
+
+  获取指定类型数据源的事件列表
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const events = dataSourceService.getFormEvent('http');
+console.log(events);
+```
+
 ## setFormEvent
 
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 事件列表
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  设置指定类型数据源的事件列表
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.setFormEvent('http', [
+  { label: '请求成功', value: 'success' },
+  { label: '请求失败', value: 'error' },
+]);
+```
+
 ## getFormMethod
 
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型，默认为 'base'
+
+- **返回：**
+
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 方法列表
+
+- **详情：**
+
+  获取指定类型数据源的方法列表
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const methods = dataSourceService.getFormMethod('http');
+console.log(methods);
+```
+
 ## setFormMethod
 
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 方法列表
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  设置指定类型数据源的方法列表
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.setFormMethod('http', [
+  { label: '发起请求', value: 'request' },
+  { label: '重试', value: 'retry' },
+]);
+```
+
 ## add
 
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置
+
+- **返回：**
+
+  - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} 添加后的数据源配置
+
+- **详情：**
+
+  添加一个数据源，如果配置中没有id或id已存在，会自动生成新的id
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const newDs = dataSourceService.add({
+  type: 'http',
+  title: '用户信息',
+  url: '/api/user',
+  method: 'GET',
+});
+
+console.log(newDs.id); // 自动生成的id
+```
+
 ## update
 
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置
+  - `{Object}` options 可选配置
+    - {[ChangeRecord](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)[]} changeRecords 变更记录
+
+- **返回：**
+
+  - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} 更新后的数据源配置
+
+- **详情：**
+
+  更新数据源
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const updatedDs = dataSourceService.update({
+  id: 'ds_123',
+  type: 'http',
+  title: '用户详情',
+  url: '/api/user/detail',
+});
+
+console.log(updatedDs);
+```
+
 ## remove
 
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` id 数据源id
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  删除指定id的数据源
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.remove('ds_123');
+```
+
+## createId
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{string}` 生成的唯一id
+
+- **详情：**
+
+  生成一个唯一的数据源id，格式为 `ds_` + guid
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const id = dataSourceService.createId();
+console.log(id); // 'ds_xxx-xxx-xxx'
+```
+
 ## getDataSourceById
 
+- **参数：**
+
+  - `{string}` id 数据源id
+
+- **返回：**
+
+  - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221) | undefined} 数据源配置
+
+- **详情：**
+
+  根据id获取数据源配置
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const ds = dataSourceService.getDataSourceById('ds_123');
+console.log(ds);
+```
+
+## copyWithRelated
+
+- **参数：**
+
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]} config 组件节点配置
+  - `{TargetOptions}` collectorOptions 可选的收集器配置
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  复制组件时会带上组件关联的数据源，将关联的数据源存储到 localStorage
+
+- **示例：**
+
+```js
+import { dataSourceService, editorService } from '@tmagic/editor';
+
+const node = editorService.get('node');
+dataSourceService.copyWithRelated(node);
+```
+
+## paste
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  粘贴数据源，从 localStorage 中读取复制的数据源并添加到当前页面
+  
+  如果数据源id已存在，则不会覆盖
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.paste();
+```
+
 ## resetState
 
-## destroy
+- **参数：** 无
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  重置数据源服务状态，清空所有数据源
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.resetState();
+```
+
+## destroy
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  销毁 dataSourceService，移除所有事件监听并重置状态
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.destroy();
+```
+
+## usePlugin
+
+- **详情：**
+
+相对于[use](#use), usePlugin支持更加灵活更加细致的扩展， 上述方法中标记有`扩展支持： 是`的方法都支持使用usePlugin扩展
+
+每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.usePlugin({
+  beforeAdd(config) {
+    console.log('添加前:', config);
+    return [config];
+  },
+  
+  afterAdd(result, config) {
+    console.log('添加后:', result);
+    return result;
+  },
+});
+```
+
+## removeAllPlugins
+
+- **详情：**
+
+删掉当前设置的所有扩展
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.removeAllPlugins();
+```

docs/api/editor/eventsServiceMethods.md

@@ -1,97 +1,244 @@
-# eventService方法
+# eventsService方法
 
 ## init
 
 - **参数：**
 
-  - 
+  - {Record<string, { events: [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]; methods: [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[] }>} eventMethodList 事件方法列表配置
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  初始化事件服务，设置所有组件的事件和方法列表
+
+  :::tip
+  该方法通常由编辑器内部调用，开发者可以通过 [m-editor 的 eventMethodList prop](./props.md#eventmethodlist) 来配置
+  :::
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+eventsService.init({
+  page: {
+    events: [
+      { label: '页面加载', value: 'load' },
+      { label: '页面卸载', value: 'unload' },
+    ],
+    methods: [
+      { label: '刷新', value: 'refresh' },
+      { label: '返回', value: 'back' },
+    ],
+  },
+  button: {
+    events: [
+      { label: '点击', value: 'click' },
+    ],
+    methods: [],
+  },
+});
+```
+
 ## setEvents
 
 - **参数：**
 
-  - 
+  - {Record<string, [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]>} events 事件配置对象
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  批量设置多个组件类型的事件列表
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+eventsService.setEvents({
+  page: [
+    { label: '页面加载', value: 'load' },
+    { label: '页面显示', value: 'show' },
+  ],
+  text: [
+    { label: '点击', value: 'click' },
+  ],
+});
+```
+
 ## setEvent
 
 - **参数：**
 
-  - 
+  - `{string}` type 组件类型
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} events 事件列表
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  设置指定组件类型的事件列表
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+eventsService.setEvent('button', [
+  { label: '点击', value: 'click' },
+  { label: '长按', value: 'longpress' },
+]);
+```
+
 ## getEvent
 
 - **参数：**
 
-  - 
+  - `{string}` type 组件类型
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 事件列表
 
 - **详情：**
 
+  获取指定组件类型的事件列表
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+const events = eventsService.getEvent('button');
+console.log(events); // [{ label: '点击', value: 'click' }, ...]
+```
+
 ## setMethods
 
 - **参数：**
 
-  - 
+  - {Record<string, [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]>} methods 方法配置对象
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  批量设置多个组件类型的方法列表
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+eventsService.setMethods({
+  page: [
+    { label: '刷新', value: 'refresh' },
+    { label: '滚动到顶部', value: 'scrollToTop' },
+  ],
+  video: [
+    { label: '播放', value: 'play' },
+    { label: '暂停', value: 'pause' },
+  ],
+});
+```
+
 ## setMethod
 
 - **参数：**
 
-  - 
+  - `{string}` type 组件类型
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} methods 方法列表
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  设置指定组件类型的方法列表
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+eventsService.setMethod('video', [
+  { label: '播放', value: 'play' },
+  { label: '暂停', value: 'pause' },
+  { label: '停止', value: 'stop' },
+]);
+```
+
 ## getMethod
 
 - **参数：**
 
-  - 
+  - `{string}` type 组件类型
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 方法列表
 
 - **详情：**
 
+  获取指定组件类型的方法列表
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+const methods = eventsService.getMethod('video');
+console.log(methods); // [{ label: '播放', value: 'play' }, ...]
+```
+
+## resetState
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  重置事件服务状态，清空所有事件和方法配置
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+eventsService.resetState();
+```
+
 ## destroy
 
-- **参数：**
+- **参数：** 无
-
-  - 
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
+
+  销毁 eventsService，重置状态并移除所有事件监听和插件
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+eventsService.destroy();
+```

docs/api/editor/props.md

@@ -967,83 +967,316 @@ const updateDragEl = (el, target) => {
 
 - **详情：**
   
-标尺配置
+  画布标尺和参考线的配置选项
+
+- **默认值：** `undefined`
 
 - **类型：** `Partial<GuidesOptions>`
-  
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :guides-options="guidesOptions"></m-editor>
+</template>
+
+<script setup>
+const guidesOptions = {
+  // 标尺刻度单位
+  unit: 1,
+  // 标尺背景色
+  backgroundColor: '#f0f0f0',
+  // 标尺文字颜色
+  textColor: '#333',
+  // 参考线颜色
+  lineColor: '#ff0000',
+};
+</script>
+```
 
 ## disabledPageFragment
 
 - **详情：**
   
-禁用页面片
+  禁用页面片功能
+
+  页面片是可以在多个页面中复用的组件集合
+
+- **默认值：** `false`
 
 - **类型：** `boolean`
-  
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :disabled-page-fragment="true"></m-editor>
+</template>
+```
+
 ## disabledStageOverlay
 
 - **详情：**
   
-禁用双击在浮层中单独编辑选中组件
+  禁用双击在浮层中单独编辑选中组件的功能
+
+  启用时，双击组件可以在浮层中单独编辑，避免其他组件干扰
+
+- **默认值：** `false`
 
 - **类型：** `boolean`
-  
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :disabled-stage-overlay="true"></m-editor>
+</template>
+```
+
 ## disabledShowSrc
 
 - **详情：**
   
-禁用属性配置面板右下角显示源码的按钮
+  禁用属性配置面板右下角"显示源码"的按钮
+
+  该按钮可以查看和编辑组件的 JSON 配置
+
+- **默认值：** `false`
 
 - **类型：** `boolean`
 
+- **示例：**
+
+```html
+<template>
+  <m-editor :disabled-show-src="true"></m-editor>
+</template>
+```
+
 ## disabledDataSource
 
 - **详情：**
   
-禁用数据源
+  禁用数据源功能
+
+  禁用后，左侧面板将不显示数据源选项卡
+
+- **默认值：** `false`
 
 - **类型：** `boolean`
 
+- **示例：**
+
+```html
+<template>
+  <m-editor :disabled-data-source="true"></m-editor>
+</template>
+```
+
 ## disabledCodeBlock
 
 - **详情：**
   
-禁用代码块
+  禁用代码块功能
+
+  禁用后，左侧面板将不显示代码块选项卡
+
+- **默认值：** `false`
 
 - **类型：** `boolean`
 
+- **示例：**
+
+```html
+<template>
+  <m-editor :disabled-code-block="true"></m-editor>
+</template>
+```
+
 ## treeIndent
 
 - **详情：**
   
-已选组件、代码编辑、数据源缩进配置
+  组件树、代码块列表、数据源列表的缩进配置（单位：px）
+
+- **默认值：** `undefined`
 
 - **类型：** `number`
 
+- **示例：**
+
+```html
+<template>
+  <m-editor :tree-indent="20"></m-editor>
+</template>
+```
+
 ## treeNextLevelIndentIncrement
 
 - **详情：**
   
-已选组件、代码编辑、数据源子节点缩进增量配置
+  组件树、代码块列表、数据源列表子节点缩进增量配置（单位：px）
+
+  每一级子节点会在父节点缩进基础上增加该值
+
+- **默认值：** `undefined`
 
 - **类型：** `number`
 
+- **示例：**
+
+```html
+<template>
+  <!-- 第一级缩进20px，第二级缩进35px，第三级缩进50px -->
+  <m-editor :tree-indent="20" :tree-next-level-indent-increment="15"></m-editor>
+</template>
+```
+
 ## customContentMenu
 
 - **详情：**
   
-用于自定义组件树与画布的右键菜单
+  用于自定义组件树与画布的右键菜单
 
-- **类型：** `function`
+  该函数会在显示右键菜单前被调用，接收默认菜单项作为参数，返回最终显示的菜单项
+
+- **默认值：** `(menus) => menus`
+
+- **类型：** `(menus: (MenuButton | MenuComponent)[], data: { node?: MNode; page?: MPage; parent?: MContainer; stage?: StageCore }) => (MenuButton | MenuComponent)[]`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :custom-content-menu="customContentMenu"></m-editor>
+</template>
+
+<script setup>
+const customContentMenu = (menus, { node }) => {
+  // 为特定类型的组件添加自定义菜单
+  if (node?.type === 'container') {
+    menus.push({
+      type: 'button',
+      text: '清空容器',
+      handler: () => {
+        // 清空容器的逻辑
+      },
+    });
+  }
+  
+  // 可以过滤掉某些菜单项
+  return menus.filter(menu => menu.text !== '删除');
+};
+</script>
+```
+
+## extendFormState
+
+- **详情：**
+  
+  扩展表单状态
+
+  用于在属性表单中注入自定义的状态数据，这些数据可以在表单配置的各个字段为函数时的第一个参数中获取
+
+- **默认值：** `undefined`
+
+- **类型：** `(state: FormState) => Record<string, any> | Promise<Record<string, any>>`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :extend-form-state="extendFormState"></m-editor>
+</template>
+
+<script setup>
+const extendFormState = async (state) => {
+  // 返回自定义的状态数据
+  return {
+    // 可以是同步数据
+    currentUser: {
+      name: 'Admin',
+      role: 'admin',
+    },
+    // 也可以是异步获取的数据
+    projectConfig: await fetchProjectConfig(),
+  };
+};
+</script>
+```
+
+:::tip
+扩展的状态可以在表单配置中通过 `state` 访问，例如：
+
+```js
+{
+  name: 'title',
+  text: '标题',
+  // 根据扩展的状态动态设置
+  disabled: (state) => state.currentUser.role !== 'admin',
+}
+```
+:::
 
 ## pageBarSortOptions
 
 - **详情：**
   
-页面顺序拖拽配置参数
+  页面标签栏的拖拽排序配置参数
+
+  用于配置页面标签的拖拽排序行为
+
+- **默认值：** `undefined`
+
+- **类型：** [PageBarSortOptions](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :page-bar-sort-options="sortOptions"></m-editor>
+</template>
+
+<script setup>
+const sortOptions = {
+  // 是否启用拖拽排序
+  animation: 150,
+  // 拖拽手柄的class
+  handle: '.page-bar-item',
+  // 其他 sortablejs 配置
+};
+</script>
+```
 
 ## pageFilterFunction
 
 - **详情：**
   
-页面搜索函数
+  页面搜索/过滤函数
+
+  用于自定义页面的搜索逻辑，在页面列表中输入关键词时会调用该函数进行过滤
+
+- **默认值：** `undefined`
+
+- **类型：** `(page: MPage | MPageFragment, keyword: string) => boolean`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :page-filter-function="pageFilterFunction"></m-editor>
+</template>
+
+<script setup>
+const pageFilterFunction = (page, keyword) => {
+  // 自定义搜索逻辑
+  // 不仅搜索页面名称，还搜索页面的其他属性
+  return (
+    page.name?.includes(keyword) ||
+    page.title?.includes(keyword) ||
+    page.id?.includes(keyword)
+  );
+};
+</script>
+```

docs/api/editor/slots.md

@@ -1,29 +1,111 @@
 # Editor组件 slots
 
+## header
+
+- **详情：** 编辑器最顶部区域
+
+- **默认：** 无
+
+- **示例：**
+
+```html
+<template>
+  <m-editor>
+    <template #header>
+      <div class="custom-header">自定义头部内容</div>
+    </template>
+  </m-editor>
+</template>
+```
+
 ## nav
 
 - **详情：** 编辑器顶部菜单栏
 
 - **默认：** [NavMenu.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/NavMenu.vue)
 
+- **插槽 Props：**
+  - `editorService`: editorService 实例
+
 :::warning
 属性配置[menu](./props.md#menu)由默认组件接收，如设置该slot，[menu](./props.md#menu)配置将失效
 :::
 
+- **示例：**
+
+```html
+<template>
+  <m-editor>
+    <template #nav="{ editorService }">
+      <div class="custom-nav">
+        <button @click="save">保存</button>
+      </div>
+    </template>
+  </m-editor>
+</template>
+```
+
+## content-before
+
+- **详情：** 编辑器主要内容区域之前
+
+- **默认：** 无
+
+## src-code
+
+- **详情：** 源码查看区域
+
+- **默认：** 默认的代码编辑器
+
+- **插槽 Props：**
+  - `editorService`: editorService 实例
+
 ## sidebar
 
 - **详情：** 左边栏
 
 - **默认：** [Sidebar.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/sidebar/Sidebar.vue)
 
+- **插槽 Props：**
+  - `editorService`: editorService 实例
+
 :::warning
 属性配置[sidebar](./props.md#sidebar)由默认组件接收，如设置该slot，[sidebar](./props.md#sidebar)配置将失效
 :::
 
+- **示例：**
+
+```html
+<template>
+  <m-editor>
+    <template #sidebar="{ editorService }">
+      <div class="custom-sidebar">
+        <!-- 自定义侧边栏内容 -->
+      </div>
+    </template>
+  </m-editor>
+</template>
+```
+
+## component-list
+
+- **详情：** 左边栏中的组件列表
+
+- **默认：** 默认的组件列表
+
+- **插槽 Props：**
+  - `componentGroupList`: 组件分组列表
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
 ## component-list-panel-header
 
 - **详情：** 左边栏中的组件列表内上方位置
 
+- **默认：** 无
+
 :::warning
 如设置了[sidebar](#sidebar)插槽，此插槽将失效
 :::
@@ -34,24 +116,84 @@
 
 - **默认：** 图片加文案
 
+- **插槽 Props：**
+  - `component`: 组件配置对象
+
 :::warning
 如设置了[sidebar](#sidebar)插槽，此插槽将失效
 :::
 
+- **示例：**
+
+```html
+<template>
+  <m-editor>
+    <template #component-list-item="{ component }">
+      <div class="custom-item">
+        <span>{{ component.text }}</span>
+      </div>
+    </template>
+  </m-editor>
+</template>
+```
+
 ## layer-panel-header
 
 - **详情：** 左边栏中的已选组件（组件树）内顶部位置
 
+- **默认：** 无
+
 :::warning
 如设置了[sidebar](#sidebar)插槽，此插槽将失效
 :::
 
 ## layer-node-content
 
-- **详情：** 左边栏中的已选组件（组件树）节点
+- **详情：** 左边栏中的已选组件（组件树）节点完整内容
+
+- **默认：** 组件名称加id和工具按钮
+
+- **插槽 Props：**
+  - `data`: 节点数据
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+## layer-node-label
+
+- **详情：** 左边栏中的已选组件（组件树）节点标签部分
 
 - **默认：** 组件名称加id
 
+- **插槽 Props：**
+  - `data`: 节点数据
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+- **示例：**
+
+```html
+<template>
+  <m-editor>
+    <template #layer-node-label="{ data }">
+      <span>{{ data.type }} - {{ data.name }}</span>
+    </template>
+  </m-editor>
+</template>
+```
+
+## layer-node-tool
+
+- **详情：** 左边栏中的已选组件（组件树）节点右侧工具区域
+
+- **默认：** 无
+
+- **插槽 Props：**
+  - `data`: 节点数据
+
 :::warning
 如设置了[sidebar](#sidebar)插槽，此插槽将失效
 :::
@@ -60,6 +202,8 @@
 
 - **详情：** 左边栏中的代码块列表内顶部位置
 
+- **默认：** 无
+
 :::warning
 如设置了[sidebar](#sidebar)插槽，此插槽将失效
 :::
@@ -68,13 +212,44 @@
 
 - **详情：** 左边栏中的代码块列表中代码块右侧位置
 
+- **默认：** 无
+
+- **插槽 Props：**
+  - `id`: 代码块id
+  - `data`: 代码块数据
+
 :::warning
 如设置了[sidebar](#sidebar)插槽，此插槽将失效
 :::
 
-## code-block-edit-panel-header
+## code-block-panel-search
 
-- **详情：** 代码块弹窗编辑器中弹窗顶部区域
+- **详情：** 左边栏中的代码块列表搜索框位置
+
+- **默认：** 无
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+## data-source-panel-tool
+
+- **详情：** 左边栏中的数据源列表中数据源右侧位置
+
+- **默认：** 无
+
+- **插槽 Props：**
+  - `data`: 数据源数据
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+## data-source-panel-search
+
+- **详情：** 左边栏中的数据源列表搜索框位置
+
+- **默认：** 无
 
 :::warning
 如设置了[sidebar](#sidebar)插槽，此插槽将失效
@@ -86,6 +261,9 @@
 
 - **默认：** [Workspace.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/workspace/Workspace.vue)
 
+- **插槽 Props：**
+  - `editorService`: editorService 实例
+
 ## stage
 
 - **详情：** 画布
@@ -94,15 +272,63 @@
 
 ## workspace-content
 
-- **详情：** 编辑器中间区域内
+- **详情：** 编辑器中间区域内，画布上方位置
+
+- **默认：** 无
+
+- **插槽 Props：**
+  - `editorService`: editorService 实例
+
+## page-bar
+
+- **详情：** 编辑器中间区域底部页面标签栏
+
+- **默认：** 默认的页面标签栏
+
+## page-bar-add-button
+
+- **详情：** 页面标签栏中的"添加页面"按钮
+
+- **默认：** 默认的添加按钮
 
 ## page-bar-title
 
 - **详情：** 编辑器中间区域底部页面标题
 
+- **默认：** 页面名称
+
+- **插槽 Props：**
+  - `page`: 页面配置对象
+
+- **示例：**
+
+```html
+<template>
+  <m-editor>
+    <template #page-bar-title="{ page }">
+      <span>{{ page.name }} - {{ page.id }}</span>
+    </template>
+  </m-editor>
+</template>
+```
+
 ## page-bar-popover
 
-- **详情：** 编辑器中间区域底部页面标题悬浮框
+- **详情：** 编辑器中间区域底部页面标题悬浮框内容
+
+- **默认：** 页面详细信息
+
+- **插槽 Props：**
+  - `page`: 页面配置对象
+
+## page-list-popover
+
+- **详情：** 页面列表弹出框内容
+
+- **默认：** 页面列表
+
+- **插槽 Props：**
+  - `list`: 页面列表
 
 ## props-panel
 
@@ -114,8 +340,40 @@
 
 - **详情：** 编辑器右侧属性配置内顶部区域
 
+- **默认：** 无
+
+## content-after
+
+- **详情：** 编辑器主要内容区域之后
+
+- **默认：** 无
+
+## footer
+
+- **详情：** 编辑器底部区域
+
+- **默认：** 无
+
 ## empty
 
 - **详情：** 当前没有页面时，编辑器中间区域
 
 - **默认：** [AddPageBox.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/AddPageBox.vue)
+
+- **插槽 Props：**
+  - `editorService`: editorService 实例
+
+- **示例：**
+
+```html
+<template>
+  <m-editor>
+    <template #empty="{ editorService }">
+      <div class="custom-empty">
+        <p>暂无页面</p>
+        <button @click="createFirstPage">创建第一个页面</button>
+      </div>
+    </template>
+  </m-editor>
+</template>
+```

docs/api/editor/storageServiceMethods.md

@@ -4,114 +4,250 @@
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
-- **参数：**
+- **参数：** 无
-
-  - 
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{Storage}` Storage 对象
 
 - **详情：**
 
+  获取数据存储对象，默认返回 localStorage
+  
+  可以通过插件机制替换为其他存储对象（如 sessionStorage）
+
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+const storage = storageService.getStorage();
+console.log(storage); // localStorage
+
+// 通过插件替换为 sessionStorage
+storageService.usePlugin({
+  afterGetStorage() {
+    return window.sessionStorage;
+  },
+});
+```
+
 ## getNamespace
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
-- **参数：**
+- **参数：** 无
-
-  - 
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{string}` 命名空间字符串
 
 - **详情：**
 
+  获取存储项的命名空间，默认为 'tmagic'
+  
+  命名空间用于区分不同应用的存储数据
+
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+const namespace = storageService.getNamespace();
+console.log(namespace); // 'tmagic'
+```
+
 ## clear
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
-- **参数：**
+- **参数：** 无
-
-  - 
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  清空当前存储对象中的所有数据
+
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+storageService.clear();
+```
+
 ## getItem
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
 - **参数：**
 
-  - 
+  - `{string}` key 存储项的键名
+  - `{Options}` options 可选配置
+    - `namespace?: string` 自定义命名空间
+    - `protocol?: Protocol` 数据协议类型
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{any}` 存储的值，如果不存在返回 null
 
 - **详情：**
 
+  获取存储项，支持多种数据类型的自动解析
+  
+  支持的协议类型：
+  - `Protocol.OBJECT`: JavaScript 对象
+  - `Protocol.JSON`: JSON 格式
+  - `Protocol.NUMBER`: 数字类型
+  - `Protocol.BOOLEAN`: 布尔类型
+  - `Protocol.STRING`: 字符串类型
+
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+// 获取字符串
+const str = storageService.getItem('myKey');
+
+// 使用自定义命名空间
+const value = storageService.getItem('key', { namespace: 'custom' });
+
+// 指定协议类型
+const num = storageService.getItem('count', { protocol: Protocol.NUMBER });
+```
+
 ## key
 
 - **参数：**
 
-  - 
+  - `{number}` index 索引位置
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{string | null}` 指定位置的键名，不存在返回 null
 
 - **详情：**
 
+  获取存储对象中指定索引位置的键名
+
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+const firstKey = storageService.key(0);
+console.log(firstKey);
+```
+
 ## removeItem
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
 - **参数：**
 
-  - 
+  - `{string}` key 存储项的键名
+  - `{Options}` options 可选配置
+    - `namespace?: string` 自定义命名空间
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  移除指定的存储项
+
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+// 移除默认命名空间下的存储项
+storageService.removeItem('myKey');
+
+// 移除自定义命名空间下的存储项
+storageService.removeItem('key', { namespace: 'custom' });
+```
+
 ## setItem
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
 - **参数：**
 
-  - 
+  - `{string}` key 存储项的键名
+  - `{any}` value 要存储的值
+  - `{Options}` options 可选配置
+    - `namespace?: string` 自定义命名空间
+    - `protocol?: Protocol` 数据协议类型
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  设置存储项，自动序列化复杂数据类型
+
+- **示例：**
+
+```js
+import { storageService, Protocol } from '@tmagic/editor';
+
+// 存储字符串
+storageService.setItem('name', 'tmagic');
+
+// 存储对象
+storageService.setItem('config', { a: 1, b: 2 }, { protocol: Protocol.OBJECT });
+
+// 存储数字
+storageService.setItem('count', 100, { protocol: Protocol.NUMBER });
+
+// 使用自定义命名空间
+storageService.setItem('key', 'value', { namespace: 'custom' });
+```
+
 ## destroy
 
-- **参数：**
+- **参数：** 无
-
-  - 
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  销毁 storageService，移除所有事件监听和插件
+
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+storageService.destroy();
+```
+
 ## use
 
 使用中间件的方式扩展方法，上述方法中标记有`扩展支持： 是`的方法都支持使用use扩展
 
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+storageService.use({
+  getItem(key, options, next) {
+    console.log('获取存储项:', key);
+    return next();
+  },
+});
+```
+
 ## usePlugin
 
 - **详情：**
@@ -120,9 +256,35 @@
 
 每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
 
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+storageService.usePlugin({
+  beforeSetItem(key, value, options) {
+    console.log('设置前:', key, value);
+    return [key, value, options];
+  },
+  
+  afterGetItem(result, key, options) {
+    console.log('获取后:', result);
+    return result;
+  },
+});
+```
+
 ## removeAllPlugins
 
 - **详情：**
 
 删掉当前设置的所有扩展
 
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+storageService.removeAllPlugins();
+```
+

docs/api/editor/uiServiceMethods.md

@@ -1,12 +1,89 @@
 # uiService方法
 
+## set
+
+- **参数：**
+
+  - `{keyof UiState}` name 状态键名
+  - `{any}` value 状态值
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  设置UI服务的状态
+  
+  可用的状态键：
+  - `uiSelectMode`: UI选择模式
+  - `showSrc`: 是否显示源码
+  - `showStylePanel`: 是否显示样式面板
+  - `zoom`: 缩放比例
+  - `stageContainerRect`: 画布容器尺寸
+  - `stageRect`: 画布尺寸
+  - `columnWidth`: 列宽度配置
+  - `showGuides`: 是否显示参考线
+  - `showRule`: 是否显示标尺
+  - `propsPanelSize`: 属性面板尺寸
+  - `showAddPageButton`: 是否显示添加页面按钮
+  - `showPageListButton`: 是否显示页面列表按钮
+  - `hideSlideBar`: 是否隐藏侧边栏
+  - `sideBarItems`: 侧边栏项目
+  - `navMenuRect`: 导航菜单尺寸
+  - `frameworkRect`: 框架尺寸
+
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+// 设置缩放比例
+uiService.set('zoom', 1.5);
+
+// 设置画布尺寸
+uiService.set('stageRect', { width: 375, height: 667 });
+
+// 显示/隐藏参考线
+uiService.set('showGuides', true);
+
+// 显示/隐藏标尺
+uiService.set('showRule', true);
+```
+
+## get
+
+- **参数：**
+
+  - `{keyof UiState}` name 状态键名
+
+- **返回：**
+
+  - `{any}` 对应的状态值
+
+- **详情：**
+
+  获取UI服务的状态值
+
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+const zoom = uiService.get('zoom');
+console.log('当前缩放:', zoom);
+
+const stageRect = uiService.get('stageRect');
+console.log('画布尺寸:', stageRect);
+```
+
 ## zoom
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
 - **参数：**
 
-  - `{number}` zoom 缩放倍数
+  - `{number}` zoom 缩放增量（可以为负数）
 
 - **返回：**
 
@@ -14,24 +91,111 @@
 
 - **详情：**
 
-设置缩放倍数，最小为0.1
+  调整缩放倍数，最小为0.1
+  
+  传入的值会被累加到当前缩放倍数上
+
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+// 放大0.1倍
+await uiService.zoom(0.1);
+
+// 缩小0.1倍
+await uiService.zoom(-0.1);
+
+// 当前缩放如果是1.0，执行zoom(0.5)后变为1.5
+await uiService.zoom(0.5);
+```
 
 ## calcZoom
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
+- **参数：** 无
+
 - **返回：**
 
-  - `{Promise<number>}`
+  - `{Promise<number>}` 计算出的缩放倍数
 
 - **详情：**
 
-计算出缩放以适应的倍数
+  计算"缩放以适应"的倍数
+  
+  根据画布容器的尺寸和画布尺寸自动计算出合适的缩放比例，使画布完全显示在容器内
+
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+const fitZoom = await uiService.calcZoom();
+console.log('适应缩放:', fitZoom);
+
+// 应用缩放以适应
+uiService.set('zoom', fitZoom);
+```
+
+## resetState
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  重置UI服务状态到初始值
+
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+uiService.resetState();
+```
+
+## destroy
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  销毁 uiService，重置状态并移除所有事件监听和插件
+
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+uiService.destroy();
+```
 
 ## use
 
 使用中间件的方式扩展方法，上述方法中标记有`扩展支持： 是`的方法都支持使用use扩展
 
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+uiService.use({
+  async zoom(value, next) {
+    console.log('缩放前:', uiService.get('zoom'));
+    await next();
+    console.log('缩放后:', uiService.get('zoom'));
+  },
+});
+```
+
 ## usePlugin
 
 - **详情：**
@@ -40,9 +204,36 @@
 
 每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
 
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+uiService.usePlugin({
+  beforeZoom(value) {
+    console.log('缩放增量:', value);
+    return [value];
+  },
+  
+  afterCalcZoom(result) {
+    console.log('计算的缩放:', result);
+    // 可以修改返回值
+    return result;
+  },
+});
+```
+
 ## removeAllPlugins
 
 - **详情：**
 
 删掉当前设置的所有扩展
 
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+uiService.removeAllPlugins();
+```
+

docs/api/table/events.md

@@ -2,14 +2,109 @@
 
 ## sort-change
 
+- **参数：**
+  - `{ column, prop, order }` - 排序信息对象
+    - `column: Object` - 排序的列配置
+    - `prop: string` - 排序的列属性名
+    - `order: 'ascending' | 'descending' | null` - 排序方式
+
+- **说明：** 当表格的排序条件发生变化时触发
+
+- **示例：**
+  ```js
+  const handleSortChange = ({ column, prop, order }) => {
+    console.log('排序变化:', prop, order);
+  };
+  ```
+
 ## after-action
 
+- **参数：**
+  - `action: string` - 操作类型
+  - `data: any` - 操作相关数据
+
+- **说明：** 表格操作完成后触发
+
+- **示例：**
+  ```js
+  const handleAfterAction = (action, data) => {
+    console.log('操作完成:', action, data);
+  };
+  ```
+
 ## select
 
+- **参数：**
+  - `selection: Array<any>` - 当前选中的行数据数组
+  - `row: any` - 刚刚被选中的行数据
+
+- **说明：** 当用户手动勾选某一行时触发
+
+- **示例：**
+  ```js
+  const handleSelect = (selection, row) => {
+    console.log('选中行:', row);
+    console.log('当前选中:', selection);
+  };
+  ```
+
 ## select-all
 
+- **参数：**
+  - `selection: Array<any>` - 当前选中的行数据数组
+
+- **说明：** 当用户手动勾选全选 Checkbox 时触发
+
+- **示例：**
+  ```js
+  const handleSelectAll = (selection) => {
+    console.log('全选/取消全选:', selection.length);
+  };
+  ```
+
 ## selection-change
 
+- **参数：**
+  - `selection: Array<any>` - 当前选中的行数据数组
+
+- **说明：** 当选择项发生变化时触发
+
+- **示例：**
+  ```js
+  const handleSelectionChange = (selection) => {
+    console.log('选中项变化:', selection);
+  };
+  ```
+
 ## expand-change
 
+- **参数：**
+  - `row: any` - 被展开/收起的行数据
+  - `expandedRows: Array<any>` - 当前所有展开的行数据数组
+
+- **说明：** 当用户展开或收起某一行时触发（用于可展开表格）
+
+- **示例：**
+  ```js
+  const handleExpandChange = (row, expandedRows) => {
+    console.log('展开状态变化:', row);
+    console.log('当前展开行:', expandedRows);
+  };
+  ```
+
 ## cell-click
+
+- **参数：**
+  - `row: any` - 行数据
+  - `column: Object` - 列配置
+  - `cell: HTMLElement` - 单元格 DOM 元素
+  - `event: Event` - 原生事件对象
+
+- **说明：** 当某个单元格被点击时触发
+
+- **示例：**
+  ```js
+  const handleCellClick = (row, column, cell, event) => {
+    console.log('单元格点击:', row, column.property);
+  };
+  ```

docs/api/table/methods.md

@@ -2,6 +2,40 @@
 
 ## toggleRowSelection
 
+- **参数：**
+  - `row: any` - 要切换选中状态的行数据
+  - `selected?: boolean` - 是否选中，不传则切换当前状态
+
+- **说明：** 切换某一行的选中状态
+
+- **示例：**
+  ```js
+  tableRef.value.toggleRowSelection(row, true); // 选中
+  tableRef.value.toggleRowSelection(row, false); // 取消选中
+  tableRef.value.toggleRowSelection(row); // 切换状态
+  ```
+
 ## toggleRowExpansion
 
+- **参数：**
+  - `row: any` - 要展开/收起的行数据
+  - `expanded?: boolean` - 是否展开，不传则切换当前状态
+
+- **说明：** 切换某一行的展开状态（用于可展开表格）
+
+- **示例：**
+  ```js
+  tableRef.value.toggleRowExpansion(row, true); // 展开
+  tableRef.value.toggleRowExpansion(row, false); // 收起
+  ```
+
 ## clearSelection
+
+- **参数：** 无
+
+- **说明：** 清空所有选中的行
+
+- **示例：**
+  ```js
+  tableRef.value.clearSelection();
+  ```

docs/api/table/props.md

@@ -2,123 +2,122 @@
 
 ## data
 
-- **详情：**
+- **详情：** 表格数据，数组格式
-  
   
+- **默认值：** `[]`
 
-- **默认值：** 
+- **类型：** `Array<any>`
-
-
-
-- **类型：** 
 
+- **示例：**
+  ```js
+  [
+    { id: 1, name: '张三', age: 20 },
+    { id: 2, name: '李四', age: 25 }
+  ]
+  ```
 
 ## columns
 
-- **详情：**
+- **详情：** 表格列配置
-  
   
+- **默认值：** `[]`
 
-- **默认值：** 
+- **类型：** `Array<ColumnConfig>`
-
-
-
-- **类型：** 
 
+- **示例：**
+  ```js
+  [
+    { prop: 'name', label: '姓名', width: 120 },
+    { prop: 'age', label: '年龄', width: 80 }
+  ]
+  ```
 
 ## spanMethod
 
 - **详情：** 合并行或列的计算方法
   
+- **默认值：** `undefined`
+
+- **类型：** `Function`
+
+- **参数：**
+  - `{ row, column, rowIndex, columnIndex }`
   
+- **返回值：** `[rowspan, colspan]` 或 `{ rowspan, colspan }`
 
-- **默认值：** 
+- **示例：**
-
+  ```js
-
+  ({ rowIndex, columnIndex }) => {
-
+    if (rowIndex % 2 === 0) {
-- **类型：** 
+      if (columnIndex === 0) {
+        return [1, 2];
+      } else if (columnIndex === 1) {
+        return [0, 0];
+      }
+    }
+  }
+  ```
 
 ## loading
 
-- **详情：**
+- **详情：** 是否显示加载状态
-  
   
+- **默认值：** `false`
 
-- **默认值：** 
+- **类型：** `boolean`
-
-
-
-- **类型：** 
-
 
 ## showHeader
 
 - **详情：** 是否显示表头
   
+- **默认值：** `true`
 
-- **默认值：** 
+- **类型：** `boolean`
-
-
-
-- **类型：** 
 
 ## bodyHeight
 
-- **详情：** Table的最大高度。合法的值为数字或者单位为 px 的高度
+- **详情：** Table 的最大高度。合法的值为数字或者单位为 px 的高度
   
-- **默认值：** 
+- **默认值：** `undefined`
 
+- **类型：** `string | number`
 
-
+- **示例：**
-- **类型：** 
+  ```js
+  bodyHeight: 400
+  bodyHeight: '400px'
+  ```
 
 ## emptyText
 
 - **详情：** 空数据时显示的文本内容
   
-- **默认值：** 
+- **默认值：** `'暂无数据'`
-
-
-
-- **类型：** 
-
-
 
+- **类型：** `string`
 
 ## defaultExpandAll
 
-- **详情：** 是否默认展开所有行，当Table包含展开行存在或者为树形表格时有效
+- **详情：** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
   
-- **默认值：** 
+- **默认值：** `false`
-
-
-- **类型：** 
-
-
 
+- **类型：** `boolean`
 
 ## rowkeyName
 
-- **详情：**
+- **详情：** 行数据的 Key，用来优化 Table 的渲染
-  
   
+- **默认值：** `'id'`
 
-- **默认值：** 
+- **类型：** `string`
-
-
-
-- **类型：** 
 
+- **说明：** 在使用 reserve-selection 功能与显示树形数据时，该属性是必填的
 
 ## border
 
-- **详情：**
+- **详情：** 是否显示边框
-  
   
+- **默认值：** `false`
 
-- **默认值：** 
+- **类型：** `boolean`
-
-
-
-- **类型：** 
-

docs/guide/editor-expand.md

@@ -62,6 +62,59 @@ MenuButton 的[定义](https://github.com/Tencent/tmagic-editor/blob/239b5d3efea
 
 ### 二、左侧菜单栏
 
+左侧菜单栏主要展示组件列表、组件树、代码块、数据源等内容。可以通过 `m-editor` 组件的 [sidebar](/api/editor/props.html#sidebar) `prop` 来进行配置。
+
+#### 1. 自定义左侧面板
+
+可以使用 `sidebar` slot 来完全自定义左侧面板：
+
+```html
+<m-editor>
+  <template #sidebar>
+    <your-sidebar></your-sidebar>
+  </template>
+</m-editor>
+```
+
+#### 2. 扩展组件列表
+
+通过 [componentGroupList](/api/editor/props.html#componentgrouplist) prop 配置组件分组和列表：
+
+```js
+const componentGroupList = [
+  {
+    title: '基础组件',
+    items: [
+      {
+        text: '文本',
+        type: 'text',
+        icon: 'text-icon'
+      },
+      {
+        text: '按钮',
+        type: 'button',
+        icon: 'button-icon'
+      }
+    ]
+  },
+  {
+    title: '业务组件',
+    items: [
+      // 自定义业务组件
+    ]
+  }
+]
+```
+
+#### 3. 组件树扩展
+
+组件树会自动根据页面配置生成，可以通过 `editorService` 监听组件树相关事件：
+
+```js
+editorService.on('select', (node) => {
+  console.log('选中组件:', node);
+});
+```
 
 ### 三、右侧属性配置栏
 
@@ -118,6 +171,50 @@ propsService.usePlugin({
 </m-editor>
 ```
 
-### 四、中间工作区域
-
 ## 行为扩展
+
+### 二、服务扩展
+
+可以通过监听事件和使用插件来扩展 EditorService：
+
+```js
+// 监听编辑器事件
+editorService.on('add', (node) => {
+  console.log('添加组件:', node);
+});
+
+// 使用插件扩展
+editorService.usePlugin({
+  beforeAdd(node) {
+    // 在添加组件前执行
+    return node;
+  },
+  afterAdd(node) {
+    // 在添加组件后执行
+    return node;
+  }
+});
+```
+
+#### 2. PropsService 扩展
+
+自定义属性配置的处理逻辑：
+
+```js
+propsService.usePlugin({
+  // 修改属性配置
+  beforeGetPropsConfig(type) {
+    console.log('获取配置前:', type);
+  },
+  
+  afterGetPropsConfig(config, type) {
+    // 添加自定义配置
+    return config;
+  },
+  
+  // 自定义配置填充逻辑
+  afterFillConfig(config, type) {
+    return config;
+  }
+});
+```

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "tmagic",
   "private": true,
   "type": "module",

packages/cli/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/cli",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

packages/core/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/core",
   "type": "module",
   "main": "dist/tmagic-core.umd.cjs",

packages/core/src/EventHelper.ts

@@ -279,13 +279,13 @@ export default class EventHelper extends EventEmitter {
     }
 
     const toNodes = [];
-    const toNode = this.app.getNode(to);
+    const toNode = this.app.getNode(to, { strict: true });
     if (toNode) {
       toNodes.push(toNode);
     }
 
     for (const [, page] of this.app.pageFragments) {
-      const node = page.getNode(to);
+      const node = page.getNode(to, { strict: true });
       if (node) {
         toNodes.push(node);
       }

packages/core/src/Node.ts

@@ -191,7 +191,7 @@ class Node extends EventEmitter {
         if (this.app.eventHelper) {
           for (const eventConfig of this.app.eventHelper.getEventQueue()) {
             for (const [, page] of this.app.pageFragments) {
-              const node = page.getNode(eventConfig.toId);
+              const node = page.getNode(eventConfig.toId, { strict: true });
               if (node && node === this) {
                 if (typeof instance[eventConfig.method] === 'function') {
                   await instance[eventConfig.method](eventConfig.fromCpt, ...eventConfig.args);

packages/core/src/Page.ts

@@ -84,14 +84,16 @@ class Page extends Node {
 
   public getNode<T extends TMagicNode = TMagicNode>(
     id: Id,
-    { iteratorContainerId, iteratorIndex, pageFragmentContainerId }: GetNodeOptions = {},
+    { iteratorContainerId, iteratorIndex, pageFragmentContainerId, strict }: GetNodeOptions = {},
   ): T | undefined {
     if (this.nodes.has(id)) {
       return this.nodes.get(id) as T;
     }
 
     if (pageFragmentContainerId) {
-      return this.app.pageFragments.get(pageFragmentContainerId)?.getNode(id, { iteratorContainerId, iteratorIndex });
+      return this.app.pageFragments
+        .get(pageFragmentContainerId)
+        ?.getNode(id, { iteratorContainerId, iteratorIndex, strict: true });
     }
 
     if (Array.isArray(iteratorContainerId) && iteratorContainerId.length && Array.isArray(iteratorIndex)) {
@@ -107,7 +109,7 @@ class Page extends Node {
       return iteratorContainer?.getNode(id, iteratorIndex[iteratorIndex.length - 1]) as T;
     }
 
-    if (this.app.pageFragments.size) {
+    if (!strict && this.app.pageFragments.size) {
       for (const [, pageFragment] of this.app.pageFragments) {
         if (pageFragment.nodes.has(id)) {
           return pageFragment.nodes.get(id) as T;

packages/core/src/type.ts

@@ -48,4 +48,6 @@ export interface GetNodeOptions {
   iteratorContainerId?: Id[];
   iteratorIndex?: number[];
   pageFragmentContainerId?: Id;
+  /** 严格模式，如果为true，页面片中的节点必须指定pageFragmentContainerId，为false时，没有pageFragmentContainerId的时候获得第一个页面片容器中的节点 */
+  strict?: boolean;
 }

packages/data-source/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/data-source",
   "type": "module",
   "main": "dist/tmagic-data-source.umd.cjs",

packages/data-source/src/createDataSourceManager.ts

@@ -78,13 +78,13 @@ export const createDataSourceManager = (app: TMagicApp, useMock?: boolean, initi
               replaceChildNode(newNode, [app.page.data]);
             }
 
-            app.getNode(node.id)?.setData(newNode);
+            app.getNode(node.id, { strict: true })?.setData(newNode);
 
             for (const [, pageFragment] of app.pageFragments) {
               if (pageFragment.data.id === newNode.id) {
                 pageFragment.setData(newNode);
               } else if (pageFragment.data.id === page.id) {
-                pageFragment.getNode(newNode.id)?.setData(newNode);
+                pageFragment.getNode(newNode.id, { strict: true })?.setData(newNode);
                 if (!pageFragment.instance) {
                   replaceChildNode(newNode, [pageFragment.data]);
                 }

packages/dep/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/dep",
   "type": "module",
   "main": "dist/tmagic-dep.umd.cjs",

packages/design/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/design",
   "type": "module",
   "sideEffects": [

packages/editor/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [

packages/editor/src/theme/props-panel.scss

@@ -40,7 +40,7 @@
             top: 0;
             width: 100%;
             background: #fff;
-            z-index: 2;
+            z-index: 3;
           }
         }
       }

packages/element-plus-adapter/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/element-plus-adapter",
   "type": "module",
   "main": "dist/tmagic-element-plus-adapter.umd.cjs",

packages/form-schema/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/form-schema",
   "type": "module",
   "main": "dist/tmagic-form-schema.umd.cjs",

packages/form/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [

packages/form/src/containers/Tabs.vue

@@ -58,7 +58,13 @@
                   : lastValues
         "
         :is-compare="isCompare"
-        :prop="config.dynamic ? `${prop}${prop ? '.' : ''}${String(tabIndex)}` : prop"
+        :prop="
+          config.dynamic
+            ? `${prop}${prop ? '.' : ''}${String(tabIndex)}`
+            : tab.name
+              ? `${prop}${prop ? '.' : ''}${tab.name}`
+              : prop
+        "
         :size="size"
         :label-width="tab.labelWidth || labelWidth"
         :expand-more="expandMore"
@@ -88,6 +94,26 @@ type DiffCount = {
   [tabIndex: number]: number;
 };
 
+const props = withDefaults(
+  defineProps<{
+    model: any;
+    lastValues?: any;
+    isCompare?: boolean;
+    config: TabConfig;
+    name: string;
+    size?: string;
+    labelWidth?: string;
+    prop?: string;
+    expandMore?: boolean;
+    disabled?: boolean;
+  }>(),
+  {
+    lastValues: () => ({}),
+    isCompare: false,
+    prop: '',
+  },
+);
+
 const tabPaneComponent = getDesignConfig('components')?.tabPane;
 const tabsComponent = getDesignConfig('components')?.tabs;
 
@@ -118,25 +144,6 @@ const tabClick = (mForm: FormState | undefined, tab: any, props: any) => {
   }
 };
 
-const props = withDefaults(
-  defineProps<{
-    model: any;
-    lastValues?: any;
-    isCompare?: boolean;
-    config: TabConfig;
-    name: string;
-    size?: string;
-    labelWidth?: string;
-    prop?: string;
-    expandMore?: boolean;
-    disabled?: boolean;
-  }>(),
-  {
-    lastValues: () => ({}),
-    isCompare: false,
-  },
-);
-
 const emit = defineEmits<{
   change: [v: any, eventData?: ContainerChangeEventData];
   addDiffCount: [];

packages/schema/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/schema",
   "type": "module",
   "main": "dist/tmagic-schema.umd.cjs",

packages/stage/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/stage",
   "type": "module",
   "main": "dist/tmagic-stage.umd.cjs",

packages/table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/table",
   "type": "module",
   "sideEffects": [

packages/tdesign-vue-next-adapter/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/tdesign-vue-next-adapter",
   "type": "module",
   "main": "dist/tmagic-tdesign-vue-next-adapter.umd.cjs",

packages/utils/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/utils",
   "type": "module",
   "main": "dist/tmagic-utils.umd.cjs",

playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tmagic-playground",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "type": "module",
   "private": true,
   "scripts": {
@@ -12,11 +12,11 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
-    "@tmagic/core": "1.7.0",
+    "@tmagic/core": "1.7.2",
-    "@tmagic/design": "1.7.0",
+    "@tmagic/design": "1.7.2",
-    "@tmagic/editor": "1.7.0",
+    "@tmagic/editor": "1.7.2",
-    "@tmagic/element-plus-adapter": "1.7.0",
+    "@tmagic/element-plus-adapter": "1.7.2",
-    "@tmagic/tdesign-vue-next-adapter": "1.7.0",
+    "@tmagic/tdesign-vue-next-adapter": "1.7.2",
     "@tmagic/tmagic-form-runtime": "1.1.3",
     "element-plus": "^2.11.8",
     "lodash-es": "^4.17.21",

runtime/react-runtime-help/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "0.2.2",
   "name": "@tmagic/react-runtime-help",
   "type": "module",
   "sideEffects": false,
@@ -31,8 +31,8 @@
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",
-    "@tmagic/core": ">=1.6.0-beta.0",
+    "@tmagic/core": ">=1.7.0",
-    "@tmagic/stage": ">=1.6.0-beta.0",
+    "@tmagic/stage": ">=1.7.0",
     "react": ">=18.3.1",
     "typescript": "catalog:"
   },

runtime/react-runtime-help/src/hooks/use-app.ts

@@ -47,6 +47,7 @@ export const useNode = <T extends TMagicNode = TMagicNode>(
       iteratorContainerId: props.iteratorContainerId,
       iteratorIndex: props.iteratorIndex,
       pageFragmentContainerId: props.pageFragmentContainerId,
+      strict: true,
     });
   }
   return void 0;

runtime/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-react",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "type": "module",
   "private": true,
   "engines": {
@@ -16,16 +16,16 @@
     "build:playground": "node scripts/build.mjs --type=playground"
   },
   "dependencies": {
-    "@tmagic/core": "1.7.0",
+    "@tmagic/core": "1.7.2",
-    "@tmagic/react-runtime-help": "0.2.1",
+    "@tmagic/react-runtime-help": "0.2.2",
-    "@tmagic/stage": "1.7.0",
+    "@tmagic/stage": "1.7.2",
     "axios": "^1.13.2",
     "qrcode": "^1.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@tmagic/cli": "1.7.0",
+    "@tmagic/cli": "1.7.2",
     "@types/fs-extra": "^11.0.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

runtime/tmagic-form/package.json

@@ -1,15 +1,15 @@
 {
-  "version": "1.1.3",
+  "version": "1.1.6",
   "name": "@tmagic/tmagic-form-runtime",
   "type": "module",
-  "main": "dist/tmagic-form-runtime.umd.cjs",
+  "main": "dist/tmagic-tmagic-form.umd.cjs",
-  "module": "dist/tmagic-form-runtime.js",
+  "module": "dist/tmagic-tmagic-form.js",
   "types": "types/index.d.ts",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
-      "import": "./dist/tmagic-form-runtime.js",
+      "import": "./dist/tmagic-tmagic-form.js",
-      "require": "./dist/tmagic-form.umd-runtime.cjs"
+      "require": "./dist/tmagic-tmagic-form.umd.cjs"
     },
     "./*": "./*"
   },
@@ -26,8 +26,8 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "peerDependencies": {
-    "@tmagic/core": ">=1.5.0",
+    "@tmagic/core": ">=1.7.0",
-    "@tmagic/editor": ">=1.5.0",
+    "@tmagic/editor": ">=1.7.0",
     "element-plus": ">=2.8.0",
     "vue": "catalog:",
     "typescript": "catalog:"

runtime/tmagic-form/src/App.vue

@@ -12,7 +12,7 @@ import { useFormConfig } from './useFormConfig';
 
 const props = defineProps<AppProps>();
 
-const { mForm, formConfig, config, values } = useFormConfig(props);
+const { formConfig, config, values } = useFormConfig(props);
 
 watch(formConfig, async () => {
   setTimeout(() => {

runtime/tmagic-form/src/useFormConfig.ts

@@ -73,8 +73,15 @@ export const useFormConfig = (props: AppProps) => {
         return nextTick().then(() => getElById()(document, `${id}`) as HTMLElement);
       },
 
-      add({ config, parentId }: UpdateData) {
+      add({ config, parentId, root: appConfig }: UpdateData) {
-        if (!root.value) throw new Error('error');
+        if (!root.value) {
+          if (appConfig) {
+            root.value = appConfig;
+            resetValues();
+            return;
+          }
+          throw new Error('error');
+        }
         if (!selectedId.value) throw new Error('error');
         if (!parentId) throw new Error('error');
 
@@ -82,7 +89,7 @@ export const useFormConfig = (props: AppProps) => {
         if (!parent) throw new Error('未找到父节点');
 
         if (config.type !== 'page') {
-          const parentNode = app?.page?.getNode(parent.id);
+          const parentNode = app?.page?.getNode(parent.id, { strict: true });
           parentNode && app?.page?.initNode(config, parentNode);
         }
 
@@ -97,13 +104,22 @@ export const useFormConfig = (props: AppProps) => {
         resetValues();
       },
 
-      update({ config, parentId }: UpdateData) {
+      update({ config, parentId, root: appConfig }: UpdateData) {
-        if (!root.value || !app) throw new Error('error');
+        if (!root.value) {
+          if (appConfig) {
+            root.value = appConfig;
+            resetValues();
+            return;
+          }
+          throw new Error('error');
+        }
+
+        if (!app) throw new Error('error');
 
         const newNode = app.dataSourceManager?.compiledNode(config) || config;
         replaceChildNode(reactive(newNode), [root.value], parentId);
 
-        const nodeInstance = app.page?.getNode(config.id);
+        const nodeInstance = app.page?.getNode(config.id, { strict: true });
         if (nodeInstance) {
           nodeInstance.setData(config);
         }

runtime/vue-runtime-help/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.3",
+  "version": "2.0.0",
   "name": "@tmagic/vue-runtime-help",
   "type": "module",
   "sideEffects": false,
@@ -26,20 +26,13 @@
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
-  "dependencies": {
-    "vue-demi": "^0.14.10"
-  },
   "peerDependencies": {
-    "@tmagic/core": ">=1.6.0-beta.0",
+    "@tmagic/core": ">=1.7.0",
-    "@tmagic/stage": ">=1.6.0-beta.0",
+    "@tmagic/stage": ">=1.7.0",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    },
     "@tmagic/core": {
       "optional": true
     },

runtime/vue-runtime-help/src/hooks/use-app.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { inject, onBeforeUnmount, onMounted } from 'vue-demi';
+import { inject, onBeforeUnmount, onMounted } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import type { Id, MNodeInstance, Node as TMagicNode } from '@tmagic/core';
@@ -43,6 +43,7 @@ export const useNode = <T extends TMagicNode = TMagicNode>(
       iteratorContainerId: props.iteratorContainerId,
       iteratorIndex: props.iteratorIndex,
       pageFragmentContainerId: props.pageFragmentContainerId,
+      strict: true,
     });
   }
   return void 0;

runtime/vue-runtime-help/src/hooks/use-component-status.ts

@@ -1,4 +1,4 @@
-import { computed, inject, onScopeDispose, ref, shallowReactive, watchEffect } from 'vue-demi';
+import { computed, inject, onScopeDispose, ref, shallowReactive, watchEffect } from 'vue';
 
 import type TMagicCore from '@tmagic/core';
 import { type MComponent, type StyleSchema, toLine } from '@tmagic/core';

runtime/vue-runtime-help/src/hooks/use-component.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { ConcreteComponent, inject } from 'vue-demi';
+import { ConcreteComponent, inject } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { toLine } from '@tmagic/core';

runtime/vue-runtime-help/src/hooks/use-dsl.ts

@@ -1,4 +1,4 @@
-import { inject, nextTick, onBeforeUnmount, reactive, ref } from 'vue-demi';
+import { inject, nextTick, onBeforeUnmount, reactive, ref } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import type { ChangeEvent, Id, MNode } from '@tmagic/core';

runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts

@@ -1,4 +1,4 @@
-import { computed, inject, nextTick, reactive, ref, watch } from 'vue-demi';
+import { computed, inject, nextTick, reactive, ref, watch } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import type { Id, MApp, MNode } from '@tmagic/core';
@@ -74,7 +74,7 @@ export const useEditorDsl = (app = inject<TMagicApp>('app'), win = window) => {
       if (!parent) throw new Error('未找到父节点');
 
       if (config.type !== 'page') {
-        const parentNode = app?.page?.getNode(parent.id);
+        const parentNode = app?.page?.getNode(parent.id, { strict: true });
         parentNode && app?.page?.initNode(config, parentNode);
       }
 
@@ -99,7 +99,7 @@ export const useEditorDsl = (app = inject<TMagicApp>('app'), win = window) => {
 
       replaceChildNode(reactive(newNode), [root.value], parentId);
 
-      const nodeInstance = app.getNode(config.id);
+      const nodeInstance = app.getNode(config.id, { strict: true });
       if (nodeInstance) {
         nodeInstance.setData(newNode);
       }

runtime/vue-runtime-help/src/index.ts

@@ -1,4 +1,4 @@
-import { h } from 'vue-demi';
+import { h } from 'vue';
 
 import type { Id, MComponent, StyleSchema } from '@tmagic/core';
 

runtime/vue-runtime-help/tests/use-component.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest';
-import { defineComponent, isVue3, provide } from 'vue-demi';
+import { defineComponent, provide } from 'vue';
 import { mount } from '@vue/test-utils';
 
 import Core from '@tmagic/core';
@@ -34,7 +34,7 @@ describe('useComponent', () => {
   });
 
   // node_modules中的vue版本不是3.0.0，所以跳过
-  test.runIf(isVue3).skip('auto inject and empty para', () => {
+  test('auto inject and empty para', () => {
     const child = defineComponent({
       setup() {
         const component = useComponent();

runtime/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-vue",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "type": "module",
   "private": true,
   "engines": {
@@ -16,14 +16,14 @@
     "build:playground": "node scripts/build.mjs --type=playground"
   },
   "dependencies": {
-    "@tmagic/core": "1.7.0",
+    "@tmagic/core": "1.7.2",
-    "@tmagic/stage": "1.7.0",
+    "@tmagic/stage": "1.7.2",
-    "@tmagic/vue-runtime-help": "^1.2.3",
+    "@tmagic/vue-runtime-help": "^2.0.0",
     "axios": "^1.13.2",
     "vue": "catalog:"
   },
   "devDependencies": {
-    "@tmagic/cli": "1.7.0",
+    "@tmagic/cli": "1.7.2",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^24.0.10",
     "@vitejs/plugin-legacy": "^7.2.1",

runtime/vue/vite.config.ts

@@ -55,10 +55,6 @@ export default defineConfig({
 
   publicDir: 'public',
 
-  optimizeDeps: {
-    exclude: ['vue-demi'],
-  },
-
   server: {
     host: '0.0.0.0',
     port: 8078,

vue-components/button/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-button",
   "type": "module",
   "main": "src/index.ts",
@@ -14,21 +14,15 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    },
-
     "typescript": {
       "optional": true
     }

vue-components/button/src/index.vue

@@ -6,11 +6,9 @@
   </button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, type PropType } from 'vue-demi';
-
 import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
-import { useApp } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, useApp } from '@tmagic/vue-runtime-help';
 
 interface ButtonSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -18,36 +16,16 @@ interface ButtonSchema extends Omit<MComponent, 'id'> {
   text: string;
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-button',
-
-  props: {
-    config: {
-      type: Object as PropType<ButtonSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const { app, node } = useApp(props);
-
-    const clickHandler = () => {
-      if (app && node) {
-        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
-      }
-    };
-
-    return {
-      clickHandler,
-    };
-  },
 });
+
+const props = defineProps<ComponentProps<ButtonSchema>>();
+
+const { app, node } = useApp(props);
+const clickHandler = () => {
+  if (app && node) {
+    app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+  }
+};
 </script>

vue-components/container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.1",
+  "version": "2.0.0",
   "name": "@tmagic/vue-container",
   "type": "module",
   "main": "src/index.ts",
@@ -14,22 +14,17 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
-    },
-    "@vue/composition-api": {
-      "optional": true
     }
   }
 }

vue-components/container/src/Component.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, type PropType, provide } from 'vue-demi';
+import { defineComponent, h, inject, type PropType, provide } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { Id, IS_DSL_NODE_KEY, MComponent, NODE_CONDS_RESULT_KEY } from '@tmagic/core';

vue-components/container/src/Container.vue

@@ -14,12 +14,12 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType } from 'vue-demi';
+import { inject } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { COMMON_EVENT_PREFIX, type Id, type MContainer } from '@tmagic/core';
-import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 import ItemComponent from './Component';
 
@@ -28,46 +28,19 @@ interface ContainerSchema extends Omit<MContainer, 'id'> {
   type?: 'container';
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-container',
-
-  props: {
-    config: {
-      type: Object as PropType<ContainerSchema>,
-      required: true,
-    },
-    iteratorIndex: {
-      type: Array as PropType<number[]>,
-      default: () => [],
-    },
-    iteratorContainerId: {
-      type: Array as PropType<Id[]>,
-      default: () => [],
-    },
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  components: { ItemComponent },
-
-  setup(props) {
-    const app = inject<TMagicApp>('app');
-    const node = useNode(props, app);
-    registerNodeHooks(node);
-
-    const clickHandler = () => {
-      if (app && node) {
-        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
-      }
-    };
-
-    return {
-      clickHandler,
-    };
-  },
 });
+
+const props = defineProps<ComponentProps<ContainerSchema>>();
+
+const app = inject<TMagicApp>('app');
+const node = useNode(props, app);
+registerNodeHooks(node);
+
+const clickHandler = () => {
+  if (app && node) {
+    app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+  }
+};
 </script>

vue-components/img/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-img",
   "type": "module",
   "main": "src/index.ts",
@@ -14,20 +14,15 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

vue-components/img/src/index.vue

@@ -2,11 +2,9 @@
   <img :src="config.src" @click="clickHandler" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, type PropType } from 'vue-demi';
-
 import type { Id, MComponent } from '@tmagic/core';
-import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 interface ImgSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -15,35 +13,16 @@ interface ImgSchema extends Omit<MComponent, 'id'> {
   url?: string;
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-img',
-
-  props: {
-    config: {
-      type: Object as PropType<ImgSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const clickHandler = () => {
-      if (props.config.url) window.location.href = props.config.url;
-    };
-
-    const node = useNode(props);
-    registerNodeHooks(node);
-
-    return {
-      clickHandler,
-    };
-  },
 });
+
+const props = defineProps<ComponentProps<ImgSchema>>();
+
+const clickHandler = () => {
+  if (props.config.url) window.location.href = props.config.url;
+};
+
+const node = useNode(props);
+registerNodeHooks(node);
 </script>

vue-components/iterator-container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "1.0.0",
   "name": "@tmagic/vue-iterator-container",
   "type": "module",
   "main": "src/index.ts",
@@ -14,20 +14,15 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

vue-components/iterator-container/src/IteratorContainer.vue

@@ -13,8 +13,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, type PropType, watch } from 'vue-demi';
+import { computed, watch } from 'vue';
 
 import {
   COMMON_EVENT_PREFIX,
@@ -23,7 +23,7 @@ import {
   type MIteratorContainer,
   type MNode,
 } from '@tmagic/core';
-import { registerNodeHooks, useApp } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useApp } from '@tmagic/vue-runtime-help';
 
 import IteratorItem from './IteratorItem.vue';
 
@@ -40,101 +40,79 @@ interface IteratorItemSchema {
   };
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-iterator-container',
+});
 
-  components: { IteratorItem },
+const props = defineProps<ComponentProps<IteratorContainerSchema>>();
 
-  props: {
+const { app, node } = useApp(props);
-    config: {
+registerNodeHooks(node);
-      type: Object as PropType<IteratorContainerSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
 
-  setup(props) {
+const configs = computed<IteratorItemSchema[]>(() => {
-    const { app, node } = useApp(props);
+  let { iteratorData = [] } = props.config;
-    registerNodeHooks(node);
+  const { itemConfig, dsField, items } = props.config;
 
-    const configs = computed<IteratorItemSchema[]>(() => {
+  if (!Array.isArray(iteratorData)) {
-      let { iteratorData = [] } = props.config;
+    iteratorData = [];
-      const { itemConfig, dsField, items } = props.config;
+  }
 
-      if (!Array.isArray(iteratorData)) {
+  if (app?.platform === 'editor' && !iteratorData.length) {
-        iteratorData = [];
+    iteratorData.push({});
-      }
+  }
 
-      if (app?.platform === 'editor' && !iteratorData.length) {
+  return iteratorData.map((itemData: any) => {
-        iteratorData.push({});
+    const condResult =
-      }
+      app?.platform !== 'editor'
+        ? (app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true)
+        : true;
 
-      return iteratorData.map((itemData: any) => {
+    const newItems = app?.dataSourceManager?.compliedIteratorItems(itemData, items, dsField) ?? items;
-        const condResult =
-          app?.platform !== 'editor'
-            ? (app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true)
-            : true;
-
-        const newItems = app?.dataSourceManager?.compliedIteratorItems(itemData, items, dsField) ?? items;
-
-        return {
-          items: newItems,
-          condResult,
-          style: {
-            position: 'relative',
-            left: 0,
-            top: 0,
-            ...itemConfig.style,
-          },
-        };
-      });
-    });
-
-    watch(
-      configs,
-      (configs) => {
-        if (!props.config.id) {
-          return;
-        }
-
-        const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(props.config.id, {
-          iteratorContainerId: props.iteratorContainerId,
-          iteratorIndex: props.iteratorIndex,
-          pageFragmentContainerId: props.pageFragmentContainerId,
-        });
-
-        if (!iteratorContainerNode) {
-          return;
-        }
-
-        iteratorContainerNode.resetNodes();
-
-        configs.forEach((config, index) => {
-          iteratorContainerNode.setNodes(config.items, index);
-        });
-      },
-      {
-        immediate: true,
-      },
-    );
-
-    const clickHandler = () => {
-      if (app && node) {
-        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
-      }
-    };
 
     return {
-      configs,
+      items: newItems,
-      clickHandler,
+      condResult,
+      style: {
+        position: 'relative',
+        left: 0,
+        top: 0,
+        ...itemConfig.style,
+      },
     };
-  },
+  });
 });
+
+watch(
+  configs,
+  (configs) => {
+    if (!props.config.id) {
+      return;
+    }
+
+    const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(props.config.id, {
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
+      pageFragmentContainerId: props.pageFragmentContainerId,
+    });
+
+    if (!iteratorContainerNode) {
+      return;
+    }
+
+    iteratorContainerNode.resetNodes();
+
+    configs.forEach((config, index) => {
+      iteratorContainerNode.setNodes(config.items, index);
+    });
+  },
+  {
+    immediate: true,
+  },
+);
+
+const clickHandler = () => {
+  if (app && node) {
+    app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+  }
+};
 </script>

vue-components/iterator-container/src/IteratorItem.vue

@@ -10,8 +10,8 @@
   ></component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType } from 'vue-demi';
+import { inject } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { type Id } from '@tmagic/core';
@@ -19,37 +19,25 @@ import { useComponent, useComponentStatus } from '@tmagic/vue-runtime-help';
 
 import { IteratorItemSchema } from './type';
 
-export default defineComponent({
+interface IteratorItemProps {
+  config: IteratorItemSchema;
+  iteratorIndex?: number[];
+  iteratorContainerId?: Id[];
+  containerIndex?: number;
+  pageFragmentContainerId?: Id;
+  index?: number;
+  model?: Record<string, any>;
+}
+
+defineOptions({
   name: 'tmagic-iterator-container-item',
-
-  props: {
-    config: {
-      type: Object as PropType<IteratorItemSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    index: Number,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const app = inject<TMagicApp>('app');
-
-    const containerComponent = useComponent({ componentType: 'container', app });
-
-    const { style, className } = useComponentStatus(props);
-
-    return {
-      style,
-      className,
-      containerComponent,
-    };
-  },
 });
+
+const props = defineProps<IteratorItemProps>();
+
+const app = inject<TMagicApp>('app');
+
+const containerComponent = useComponent({ componentType: 'container', app });
+
+const { style, className } = useComponentStatus(props);
 </script>

vue-components/overlay/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-overlay",
   "type": "module",
   "main": "src/index.ts",
@@ -14,14 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "vue-demi": ">=0.14.7",
+    "typescript": "catalog:",
-    "typescript": "catalog:"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

vue-components/overlay/src/index.vue

@@ -4,84 +4,72 @@
   </component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, onBeforeUnmount, type PropType, ref } from 'vue-demi';
+import { inject, onBeforeUnmount, ref } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { type Id, IS_DSL_NODE_KEY, type MContainer, type MNode, type MPage } from '@tmagic/core';
-import { registerNodeHooks, useComponent, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useComponent, useNode } from '@tmagic/vue-runtime-help';
 
 interface OverlaySchema extends Omit<MContainer, 'id'> {
   id?: Id;
   type?: 'overlay';
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-overlay',
+});
 
-  props: {
+const props = defineProps<ComponentProps<OverlaySchema>>();
-    config: {
+
-      type: Object as PropType<OverlaySchema>,
+const visible = ref(false);
-      required: true,
+
-    },
+const app = inject<TMagicApp>('app');
-    iteratorIndex: Array as PropType<number[]>,
+const containerComponent = useComponent({ componentType: 'container', app });
-    iteratorContainerId: Array as PropType<Id[]>,
+
-    containerIndex: Number,
+const openOverlay = () => {
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
+  visible.value = true;
-    model: {
+  app?.emit('overlay:open', node);
-      type: Object,
+};
-      default: () => ({}),
+
-    },
+const closeOverlay = () => {
+  visible.value = false;
+  app?.emit('overlay:close', node);
+};
+
+const editorSelectHandler = (
+  _info: {
+    node: MNode;
+    page: MPage;
+    parent: MContainer;
   },
+  path: MNode[],
+) => {
+  if (path.find((node: MNode) => node.id === props.config.id)) {
+    openOverlay();
+  } else {
+    closeOverlay();
+  }
+};
 
-  setup(props) {
+app?.page?.on('editor:select', editorSelectHandler);
-    const visible = ref(false);
 
-    const app = inject<TMagicApp>('app');
+app?.on('page-change', () => {
-    const containerComponent = useComponent({ componentType: 'container', app });
+  app?.page?.on('editor:select', editorSelectHandler);
+});
 
-    const openOverlay = () => {
+onBeforeUnmount(() => {
-      visible.value = true;
+  app?.page?.off('editor:select', editorSelectHandler);
-      app?.emit('overlay:open', node);
+});
-    };
 
-    const closeOverlay = () => {
+const node = useNode(props, app);
-      visible.value = false;
+registerNodeHooks(node, {
-      app?.emit('overlay:close', node);
+  openOverlay,
-    };
+  closeOverlay,
+});
 
-    const editorSelectHandler = (
+defineExpose({
-      info: {
+  openOverlay,
-        node: MNode;
+  closeOverlay,
-        page: MPage;
-        parent: MContainer;
-      },
-      path: MNode[],
-    ) => {
-      if (path.find((node: MNode) => node.id === props.config.id)) {
-        openOverlay();
-      } else {
-        closeOverlay();
-      }
-    };
-
-    app?.page?.on('editor:select', editorSelectHandler);
-
-    onBeforeUnmount(() => {
-      app?.page?.off('editor:select', editorSelectHandler);
-    });
-
-    const node = useNode(props, app);
-    registerNodeHooks(node, {
-      openOverlay,
-      closeOverlay,
-    });
-
-    return {
-      containerComponent,
-      visible,
-      IS_DSL_NODE_KEY,
-    };
-  },
 });
 </script>

vue-components/page-fragment-container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.2",
+  "version": "1.0.0",
   "name": "@tmagic/vue-page-fragment-container",
   "type": "module",
   "main": "src/index.ts",
@@ -14,13 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

vue-components/page-fragment-container/src/PageFragmentContainer.vue

@@ -11,55 +11,35 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, type PropType, provide } from 'vue-demi';
+import { computed, provide } from 'vue';
 
-import { type Id, type MComponent, NodeType, PAGE_FRAGMENT_CONTAINER_ID_KEY } from '@tmagic/core';
+import { type MComponent, NodeType, PAGE_FRAGMENT_CONTAINER_ID_KEY } from '@tmagic/core';
-import { registerNodeHooks, useApp, useComponent, useDsl } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useApp, useComponent, useDsl } from '@tmagic/vue-runtime-help';
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-page-fragment-container',
+});
 
-  props: {
+const props = defineProps<ComponentProps<MComponent>>();
-    config: {
-      type: Object as PropType<MComponent>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
 
-  setup(props) {
+provide(PAGE_FRAGMENT_CONTAINER_ID_KEY, props.config.id);
-    provide(PAGE_FRAGMENT_CONTAINER_ID_KEY, props.config.id);
 
-    const { app, node } = useApp(props);
+const { app, node } = useApp(props);
-    registerNodeHooks(node);
+registerNodeHooks(node);
 
-    const containerComponent = useComponent({ componentType: 'container', app });
+const containerComponent = useComponent({ componentType: 'container', app });
 
-    if (!props.config.id) {
+if (!props.config.id) {
-      throw new Error('page-fragment-container must have id');
+  throw new Error('page-fragment-container must have id');
-    }
+}
 
-    const { pageConfig: fragment } = useDsl(app, props.config.id);
+const { pageConfig: fragment } = useDsl(app, props.config.id);
 
-    const containerConfig = computed(() => {
+const containerConfig = computed(() => {
-      if (!fragment.value) return { items: [], id: '', type: NodeType.CONTAINER };
+  if (!fragment.value) return { items: [], id: '', type: NodeType.CONTAINER };
 
-      return fragment.value;
+  return fragment.value;
-    });
-
-    return {
-      containerComponent,
-      containerConfig,
-    };
-  },
 });
 </script>
 

vue-components/page-fragment/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-page-fragment",
   "type": "module",
   "main": "src/index.ts",
@@ -14,13 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

vue-components/page-fragment/src/PageFragment.vue

@@ -8,40 +8,29 @@
   ></component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType } from 'vue-demi';
+import { inject } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { IS_DSL_NODE_KEY, type MPageFragment } from '@tmagic/core';
-import { registerNodeHooks, useComponent, useComponentStatus, useNode } from '@tmagic/vue-runtime-help';
+import {
+  type ComponentProps,
+  registerNodeHooks,
+  useComponent,
+  useComponentStatus,
+  useNode,
+} from '@tmagic/vue-runtime-help';
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-page-fragment',
-
-  props: {
-    config: {
-      type: Object as PropType<MPageFragment>,
-      required: true,
-    },
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const app = inject<TMagicApp>('app');
-    const node = useNode(props, app);
-    registerNodeHooks(node);
-
-    const containerComponent = useComponent({ componentType: 'container', app });
-    const { style, className } = useComponentStatus(props);
-    return {
-      style,
-      className,
-      containerComponent,
-      IS_DSL_NODE_KEY,
-    };
-  },
 });
+
+const props = defineProps<ComponentProps<MPageFragment>>();
+
+const app = inject<TMagicApp>('app');
+const node = useNode(props, app);
+registerNodeHooks(node);
+
+const containerComponent = useComponent({ componentType: 'container', app });
+const { style, className } = useComponentStatus(props);
 </script>

vue-components/page/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "1.0.0",
   "name": "@tmagic/vue-page",
   "type": "module",
   "main": "src/index.ts",
@@ -14,13 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

vue-components/page/src/formConfig.ts

@@ -78,6 +78,9 @@ export default defineFormConfig([
     name: 'css',
     type: 'vs-code',
     language: 'css',
-    height: '500px',
+    autosize: {
+      minRows: 3,
+      maxRows: 20,
+    },
   },
 ]);

vue-components/page/src/index.vue

@@ -8,8 +8,8 @@
   ></component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, nextTick, type PropType, watch } from 'vue-demi';
+import { inject, nextTick, watch } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { asyncLoadCss, asyncLoadJs, IS_DSL_NODE_KEY, type MPage } from '@tmagic/core';
@@ -37,64 +37,54 @@ const createJs = (config: MPage) => {
   }
 };
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-page',
-
-  props: {
-    config: {
-      type: Object as PropType<MPage>,
-      required: true,
-    },
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const app = inject<TMagicApp>('app');
-
-    if (app?.jsEngine === 'browser') {
-      createCss(props.config);
-      createJs(props.config);
-    }
-
-    const containerComponent = useComponent({ componentType: 'container', app });
-
-    const { style, className } = useComponentStatus(props);
-
-    const refresh = () => {
-      window.location.reload();
-    };
-
-    watch(
-      () => props.config,
-      async (config, preConfig) => {
-        const node = useNode({ config: { ...config, [IS_DSL_NODE_KEY]: true } }, app);
-
-        if (config.id !== preConfig?.id) {
-          node?.setInstance({ config: props.config, refresh });
-          node?.emit('created');
-        }
-        await nextTick();
-
-        if (config.id !== preConfig?.id) {
-          node?.emit('mounted');
-          const preNode = useNode({ config: { ...preConfig, [IS_DSL_NODE_KEY]: true } }, app);
-          preNode?.emit('destroy');
-        }
-      },
-      {
-        immediate: true,
-      },
-    );
-
-    return {
-      style,
-      className,
-      containerComponent,
-      IS_DSL_NODE_KEY,
-    };
-  },
 });
+
+const props = withDefaults(
+  defineProps<{
+    config: MPage;
+    model?: Record<string, any>;
+  }>(),
+  {
+    model: () => ({}),
+  },
+);
+
+const app = inject<TMagicApp>('app');
+
+if (app?.jsEngine === 'browser') {
+  createCss(props.config);
+  createJs(props.config);
+}
+
+const containerComponent = useComponent({ componentType: 'container', app });
+
+const { style, className } = useComponentStatus(props);
+
+const refresh = () => {
+  window.location.reload();
+};
+
+watch(
+  () => props.config,
+  async (config, preConfig) => {
+    const node = useNode({ config: { ...config, [IS_DSL_NODE_KEY]: true } }, app);
+
+    if (config.id !== preConfig?.id) {
+      node?.setInstance({ config: props.config, refresh });
+      node?.emit('created');
+    }
+    await nextTick();
+
+    if (config.id !== preConfig?.id) {
+      node?.emit('mounted');
+      const preNode = useNode({ config: { ...preConfig, [IS_DSL_NODE_KEY]: true } }, app);
+      preNode?.emit('destroy');
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 </script>

vue-components/qrcode/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-qrcode",
   "type": "module",
   "main": "src/index.ts",
@@ -15,22 +15,17 @@
   },
   "dependencies": {
     "@tmagic/form-schema": "workspace:^",
-    "qrcode": "^1.5.0",
+    "qrcode": "^1.5.0"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
-    },
-    "@vue/composition-api": {
-      "optional": true
     }
   },
   "devDependencies": {

vue-components/qrcode/src/index.vue

@@ -2,13 +2,13 @@
   <img :src="imgUrl" @click="clickHandler" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType, ref, watch } from 'vue-demi';
+import { inject, ref, watch } from 'vue';
 import QRCode from 'qrcode';
 
 import type TMagicApp from '@tmagic/core';
 import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
-import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 interface QrCodeSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -16,54 +16,34 @@ interface QrCodeSchema extends Omit<MComponent, 'id'> {
   url: string;
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-qrcode',
-
-  props: {
-    config: {
-      type: Object as PropType<QrCodeSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const imgUrl = ref();
-
-    watch(
-      () => props.config.url,
-      (url = '') => {
-        QRCode.toDataURL(url, (e: any, url: string) => {
-          if (e) console.error(e);
-          imgUrl.value = url;
-        });
-      },
-      {
-        immediate: true,
-      },
-    );
-
-    const app = inject<TMagicApp>('app');
-    const node = useNode(props);
-    registerNodeHooks(node);
-
-    const clickHandler = () => {
-      if (app && node) {
-        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
-      }
-    };
-
-    return {
-      imgUrl,
-      clickHandler,
-    };
-  },
 });
+
+const props = defineProps<ComponentProps<QrCodeSchema>>();
+
+const imgUrl = ref();
+
+watch(
+  () => props.config.url,
+  (url = '') => {
+    QRCode.toDataURL(url, (e: any, url: string) => {
+      if (e) console.error(e);
+      imgUrl.value = url;
+    });
+  },
+  {
+    immediate: true,
+  },
+);
+
+const app = inject<TMagicApp>('app');
+const node = useNode(props);
+registerNodeHooks(node);
+
+const clickHandler = () => {
+  if (app && node) {
+    app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+  }
+};
 </script>

vue-components/text/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "1.0.0",
   "name": "@tmagic/vue-text",
   "type": "module",
   "main": "src/index.ts",
@@ -14,22 +14,17 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
-    },
-    "@vue/composition-api": {
-      "optional": true
     }
   }
 }

vue-components/text/src/index.vue

@@ -2,12 +2,12 @@
   <p @click="clickHandler" v-html="config.text"></p>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType } from 'vue-demi';
+import { inject } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
-import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 interface TextSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -15,38 +15,19 @@ interface TextSchema extends Omit<MComponent, 'id'> {
   text: string;
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-text',
-
-  props: {
-    config: {
-      type: Object as PropType<TextSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const app = inject<TMagicApp>('app');
-    const node = useNode(props);
-    registerNodeHooks(node);
-
-    const clickHandler = () => {
-      if (app && node) {
-        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
-      }
-    };
-
-    return {
-      clickHandler,
-    };
-  },
 });
+
+const props = defineProps<ComponentProps<TextSchema>>();
+
+const app = inject<TMagicApp>('app');
+const node = useNode(props);
+registerNodeHooks(node);
+
+const clickHandler = () => {
+  if (app && node) {
+    app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+  }
+};
 </script>