docs: 完善文档

fix #664

CHANGELOG.md

@@ -1,3 +1,53 @@
+## [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)
+
+
+### Bug Fixes
+
+* **design:** dialog 默认参数 ([8d7c8fa](https://github.com/Tencent/tmagic-editor/commit/8d7c8fa725dba507c3a4874f879989ad9c050603))
+* **form:** datetime如果设置为时间戳，然后初始值是一个字符串的数字显示不正确 ([7e71c07](https://github.com/Tencent/tmagic-editor/commit/7e71c070f1ee9857fd5610000188ef1a222fade1))
+* **form:** table拖拽排序后重新渲染组件 ([2667981](https://github.com/Tencent/tmagic-editor/commit/2667981e4c0c451ded88e06f412dd4bcb5ec41dc))
+* **form:** 生成表单values时将initValus深拷贝,避免修改到传入的对象 ([b536eba](https://github.com/Tencent/tmagic-editor/commit/b536eba81c33f8e532179b69072ea7c5d4033235))
+
+
+### Features
+
+* **editor:** 代码编辑器支持配置自动高度 ([8d55d0c](https://github.com/Tencent/tmagic-editor/commit/8d55d0cd8d1059dcbca86fc5b72ec82f22c35d9c))
+* **form:** table支持配置拖动操作中的按钮排序而不是拖动整行 ([69ac90f](https://github.com/Tencent/tmagic-editor/commit/69ac90fe22778fedb9e35b95595428395fd65cc5))
+* **form:** table支持配置操作按钮的icon ([0dd7f54](https://github.com/Tencent/tmagic-editor/commit/0dd7f54ebc3518404653d6e43ee428e05566dd28))
+
+
+
+# [1.7.0-beta.5](https://github.com/Tencent/tmagic-editor/compare/v1.7.0-beta.4...v1.7.0-beta.5) (2025-11-24)
+
+
+### Bug Fixes
+
+* **element-plus-adapter:** 构建时将vue源码构建入目标代码中,导致页面存在多个版本vue ([bb7ec0a](https://github.com/Tencent/tmagic-editor/commit/bb7ec0aa1b55f83f68d7021fb98090d8e555ed65))
+* **tdesign-vue-next-adapter:** 没有extra时form item不渲染help节点 ([849b4dc](https://github.com/Tencent/tmagic-editor/commit/849b4dc319b03a54dc1cfcccc1f505e61e1ccd5b))
+
+
+
 # [1.7.0-beta.4](https://github.com/Tencent/tmagic-editor/compare/v1.6.1...v1.7.0-beta.4) (2025-11-24)
 
 

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
 
+- **参数：** 无
+
+- **返回：**
+
+  - `{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-beta.4",
+  "version": "1.7.2",
   "name": "tmagic",
   "private": true,
   "type": "module",

packages/cli/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0-beta.4",
+  "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-beta.4",
+  "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-beta.4",
+  "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-beta.4",
+  "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-beta.4",
+  "version": "1.7.2",
   "name": "@tmagic/design",
   "type": "module",
   "sideEffects": [

packages/design/src/Dialog.vue

@@ -24,7 +24,11 @@ defineOptions({
   name: 'TMDialog',
 });
 
-const props = defineProps<DialogProps>();
+const props = withDefaults(defineProps<DialogProps>(), {
+  closeOnClickModal: true,
+  closeOnPressEscape: true,
+  showClose: true,
+});
 
 const emit = defineEmits(['close', 'update:modelValue']);
 

packages/editor/package.json

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

packages/editor/src/components/CodeBlockEditor.vue

@@ -201,7 +201,7 @@ const functionConfig = computed<FormConfig>(() => [
     name: 'content',
     type: 'vs-code',
     options: inject('codeOptions', {}),
-    height: '500px',
+    autosize: { minRows: 10, maxRows: 30 },
     onChange: (formState: FormState | undefined, code: string) => {
       try {
         // 检测js代码是否存在语法错误

packages/editor/src/fields/Code.vue

@@ -7,6 +7,7 @@
       ...config.options,
       readOnly: disabled,
     }"
+    :autosize="config.autosize"
     :parse="config.parse"
     @save="save"
   ></MagicCodeEditor>

packages/editor/src/fields/DataSourceFields.vue

@@ -233,7 +233,6 @@ const dataSourceFieldsConfig: FormConfig = [
   {
     name: 'defaultValue',
     text: '默认值',
-    height: '200px',
     parse: true,
     type: (mForm: FormState | undefined, { model }: any) => {
       if (model.type === 'number') return 'number';
@@ -242,6 +241,7 @@ const dataSourceFieldsConfig: FormConfig = [
 
       return 'vs-code';
     },
+    autosize: { minRows: 1, maxRows: 30 },
     options: [
       { text: 'true', value: true },
       { text: 'false', value: false },
@@ -267,7 +267,7 @@ const jsonFromConfig: FormConfig = [
     type: 'vs-code',
     labelWidth: '0',
     language: 'json',
-    height: '600px',
+    autosize: { minRows: 30, maxRows: 50 },
     options: inject('codeOptions', {}),
   },
 ];

packages/editor/src/fields/DataSourceMocks.vue

@@ -96,7 +96,7 @@ const formConfig: FormConfig = [
     language: 'json',
     options: inject('codeOptions', {}),
     defaultValue: '{}',
-    height: '400px',
+    autosize: { minRows: 30, maxRows: 50 },
     onChange: (formState: FormState | undefined, v: string | any) => {
       if (typeof v !== 'string') return v;
       return JSON.parse(v);

packages/editor/src/fields/KeyValue.vue

@@ -37,12 +37,15 @@
 
     <MagicCodeEditor
       v-if="config.advanced && showCode"
-      height="200px"
       :init-values="model[name]"
       language="javascript"
       :options="{
         readOnly: disabled,
       }"
+      :autosize="{
+        minRows: 1,
+        maxRows: 20,
+      }"
       :parse="true"
       @save="save"
     ></MagicCodeEditor>

packages/editor/src/index.ts

@@ -92,6 +92,7 @@ export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
 export { default as CodeBlockListPanel } from './layouts/sidebar/code-block/CodeBlockListPanel.vue';
 export { default as DataSourceConfigPanel } from './layouts/sidebar/data-source/DataSourceConfigPanel.vue';
+export { default as DataSourceAddButton } from './layouts/sidebar/data-source/DataSourceAddButton.vue';
 export { default as PropsPanel } from './layouts/props-panel/PropsPanel.vue';
 export { default as PropsFormPanel } from './layouts/props-panel/FormPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';

packages/editor/src/layouts/CodeEditor.vue

@@ -1,10 +1,7 @@
 <template>
   <div :class="`magic-code-editor`">
     <Teleport to="body" :disabled="!fullScreen">
-      <div
-        :class="`magic-code-editor-wrapper${fullScreen ? ' full-screen' : ''}`"
-        :style="!fullScreen && height ? `height: ${height}` : '100%'"
-      >
+      <div :class="{ 'magic-code-editor-wrapper': true, 'full-screen': fullScreen }" :style="{ height: computeHeight }">
         <TMagicButton
           v-if="!disabledFullScreen"
           class="magic-code-editor-full-screen-icon"
@@ -20,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import serialize from 'serialize-javascript';
@@ -46,6 +43,10 @@ const props = withDefaults(
     autoSave?: boolean;
     parse?: boolean;
     disabledFullScreen?: boolean;
+    autosize?: {
+      minRows?: number;
+      maxRows?: number;
+    };
   }>(),
   {
     initValues: '',
@@ -61,6 +62,58 @@ const props = withDefaults(
 
 const emit = defineEmits(['initd', 'save']);
 
+const autoHeight = ref<string>('');
+
+const computeHeight = computed(() => {
+  if (fullScreen.value) {
+    return '100%';
+  }
+
+  if (props.height) {
+    return props.height;
+  }
+
+  if (props.autosize) {
+    return autoHeight.value;
+  }
+
+  return '100%';
+});
+
+const setAutoHeight = (v = '') => {
+  let lines = Math.max(v.split('\n').length, props.autosize?.minRows || 1);
+  if (v) {
+    if (props.autosize?.maxRows) {
+      lines = Math.min(lines, props.autosize.maxRows);
+    }
+  }
+
+  // 获取编辑器实际行高，如果编辑器还未初始化则使用默认值
+  let lineHeight = 20;
+  if (vsEditor) {
+    const editorOptions = vsEditor.getOptions();
+    lineHeight = editorOptions.get(monaco.editor.EditorOption.lineHeight) || 20;
+  }
+
+  const newHeight = `${lines * lineHeight + 10}px`;
+
+  // 只有当高度真正改变时才更新
+  if (autoHeight.value !== newHeight) {
+    autoHeight.value = newHeight;
+
+    // 高度变化后需要重新布局编辑器
+    nextTick(() => {
+      vsEditor?.layout();
+
+      // 确保内容在可视区域内，滚动到顶部
+      if (vsEditor) {
+        vsEditor.setScrollTop(0);
+        vsEditor.revealLine(1);
+      }
+    });
+  }
+};
+
 const toString = (v: string | any, language: string): string => {
   let value: string;
   if (typeof v !== 'string') {
@@ -110,6 +163,8 @@ const resizeObserver = new globalThis.ResizeObserver(
 const setEditorValue = (v: string | any, m: string | any) => {
   values.value = toString(v, props.language.toLocaleLowerCase());
 
+  setAutoHeight(values.value);
+
   if (props.type === 'diff') {
     const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
     const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript');
@@ -147,6 +202,7 @@ const handleKeyDown = (e: KeyboardEvent) => {
     emit('save', props.parse ? parseCode(newValue, props.language) : newValue);
   }
 };
+
 const init = async () => {
   if (!codeEditorEl.value) return;
 
@@ -163,8 +219,24 @@ const init = async () => {
 
   if (props.type === 'diff') {
     vsDiffEditor = getEditorConfig('customCreateMonacoDiffEditor')(monaco, codeEditorEl.value, options);
+
+    // 监听diff编辑器内容变化
+    vsDiffEditor.getModifiedEditor().onDidChangeModelContent(() => {
+      // 如果使用 autosize，内容变化时重新计算高度
+      if (props.autosize) {
+        setAutoHeight(getEditorValue());
+      }
+    });
   } else {
     vsEditor = getEditorConfig('customCreateMonacoEditor')(monaco, codeEditorEl.value, options);
+
+    // 监听编辑器内容变化
+    vsEditor.onDidChangeModelContent(() => {
+      // 如果使用 autosize，内容变化时重新计算高度
+      if (props.autosize) {
+        setAutoHeight(getEditorValue());
+      }
+    });
   }
 
   setEditorValue(props.initValues, props.modifiedValues);

packages/editor/src/layouts/sidebar/data-source/DataSourceAddButton.vue

@@ -0,0 +1,46 @@
+<template>
+  <TMagicPopover
+    placement="right"
+    trigger="hover"
+    popper-class="data-source-list-panel-add-menu"
+    :destroy-on-close="true"
+  >
+    <template #reference>
+      <TMagicButton v-bind="addButtonConfig || {}">{{ addButtonText || '' }}</TMagicButton>
+    </template>
+    <ToolButton
+      v-for="(item, index) in datasourceTypeList"
+      :data="{
+        type: 'button',
+        text: item.text,
+        handler: () => {
+          $emit('add', item.type);
+        },
+      }"
+      :key="index"
+    ></ToolButton>
+  </TMagicPopover>
+</template>
+
+<script setup lang="ts">
+import { type ButtonProps, TMagicButton, TMagicPopover } from '@tmagic/design';
+
+import ToolButton from '@editor/components/ToolButton.vue';
+
+defineOptions({
+  name: 'MEditorDataSourceAddButton',
+});
+
+defineProps<{
+  datasourceTypeList: {
+    text: string;
+    type: string;
+  }[];
+  addButtonConfig?: ButtonProps;
+  addButtonText?: string;
+}>();
+
+defineEmits<{
+  add: [type: string];
+}>();
+</script>

packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -2,28 +2,13 @@
   <TMagicScrollbar class="data-source-list-panel m-editor-layer-panel">
     <div class="search-wrapper">
       <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <TMagicPopover
+      <DataSourceAddButton
         v-if="editable"
-        placement="right"
-        trigger="hover"
-        popper-class="data-source-list-panel-add-menu"
-        :destroy-on-close="true"
-      >
-        <template #reference>
-          <TMagicButton type="primary" size="small">新增</TMagicButton>
-        </template>
-        <ToolButton
-          v-for="(item, index) in datasourceTypeList"
-          :data="{
-            type: 'button',
-            text: item.text,
-            handler: () => {
-              addHandler(item.type);
-            },
-          }"
-          :key="index"
-        ></ToolButton>
-      </TMagicPopover>
+        add-button-text="新增"
+        :add-button-config="{ type: 'primary', size: 'small' }"
+        :datasource-type-list="datasourceTypeList"
+        @add="addHandler"
+      ></DataSourceAddButton>
 
       <slot name="data-source-panel-search"></slot>
     </div>
@@ -63,15 +48,15 @@
 import { computed, inject, useTemplateRef, watch } from 'vue';
 import { mergeWith } from 'lodash-es';
 
-import { TMagicButton, tMagicMessageBox, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
+import { tMagicMessageBox, TMagicScrollbar } from '@tmagic/design';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
-import ToolButton from '@editor/components/ToolButton.vue';
 import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
 import { useServices } from '@editor/hooks/use-services';
 import type { CustomContentMenuFunction, DataSourceListSlots, EventBus, MenuButton, MenuComponent } from '@editor/type';
 
+import DataSourceAddButton from './DataSourceAddButton.vue';
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 import DataSourceList from './DataSourceList.vue';
 import { useContentMenu } from './useContentMenu';

packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue

@@ -1,7 +1,12 @@
 <template>
   <template v-if="data.type !== 'page'">
-    <MIcon v-if="data.visible === false" :icon="Hide" @click.stop="setNodeVisible(true)" title="点击显示"></MIcon>
-    <MIcon v-else :icon="View" @click.stop="setNodeVisible(false)" class="node-lock" title="点击隐藏"></MIcon>
+    <TMagicButton
+      link
+      :type="data.visible === false ? 'primary' : 'default'"
+      :icon="data.visible === false ? Hide : View"
+      :title="data.visible === false ? '点击显示' : '点击隐藏'"
+      @click.stop="setNodeVisible(data.visible === false)"
+    ></TMagicButton>
   </template>
 </template>
 
@@ -9,8 +14,8 @@
 import { Hide, View } from '@element-plus/icons-vue';
 
 import type { MNode } from '@tmagic/core';
+import { TMagicButton } from '@tmagic/design';
 
-import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
 
 const props = defineProps<{

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

@@ -5,6 +5,22 @@
 
   .m-editor-tree {
     padding-top: 48px;
+
+    .tree-node-tool {
+      padding-right: 10px;
+
+      .tmagic-design-button + .tmagic-design-button {
+        margin-left: 2px;
+      }
+    }
+
+    .tree-node.selected {
+      .tree-node-tool {
+        .tmagic-design-button {
+          color: #fff;
+        }
+      }
+    }
   }
 
   .search-wrapper {

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

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

packages/editor/src/utils/data-source/index.ts

@@ -64,7 +64,7 @@ const fillConfig = (config: FormConfig): FormConfig => [
             name: 'beforeRequest',
             type: 'vs-code',
             parse: true,
-            height: '600px',
+            autosize: { minRows: 10, maxRows: 30 },
           },
         ],
       },
@@ -76,7 +76,7 @@ const fillConfig = (config: FormConfig): FormConfig => [
             name: 'afterResponse',
             type: 'vs-code',
             parse: true,
-            height: '600px',
+            autosize: { minRows: 10, maxRows: 30 },
           },
         ],
       },

packages/element-plus-adapter/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0-beta.4",
+  "version": "1.7.2",
   "name": "@tmagic/element-plus-adapter",
   "type": "module",
   "main": "dist/tmagic-element-plus-adapter.umd.cjs",
@@ -37,6 +37,7 @@
   "peerDependencies": {
     "@tmagic/design": "workspace:*",
     "element-plus": ">=2.9.0",
+    "vue": "catalog:",
     "typescript": "catalog:"
   },
   "peerDependenciesMeta": {

packages/form-schema/package.json

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

packages/form-schema/src/base.ts

@@ -721,6 +721,10 @@ export interface TableConfig extends FormItem {
   defaultSort?: SortProp;
   /** 是否支持拖拽排序 */
   dropSort?: boolean;
+  dropSortHandle?: boolean;
+  dropActionButtonIcon?: any;
+  copyActionButtonIcon?: any;
+  deleteActionButtonIcon?: any;
   /** 是否显示全屏按钮 */
   enableFullscreen?: boolean;
   fixed?: boolean | 'left' | 'right';

packages/form-schema/src/editor.ts

@@ -39,6 +39,10 @@ export interface CodeConfig extends FormItem {
   };
   height?: string;
   parse?: boolean;
+  autosize?: {
+    minRows?: number;
+    maxRows?: number;
+  };
 }
 
 export interface CodeLinkConfig extends FormItem {

packages/form/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0-beta.4",
+  "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/form/src/table/ActionsColumn.vue

@@ -1,12 +1,21 @@
 <template>
   <slot name="operateCol" :scope="{ $index: index, row: row }"></slot>
+  <TMagicTooltip v-if="config.dropSort && config.dropSortHandle" content="拖动排序" placement="left-start">
+    <TMagicButton
+      size="small"
+      link
+      :class="{ 'tmagic-form-table-drag-target': config.dropSortHandle }"
+      :icon="config.dropActionButtonIcon || Sort"
+    >
+    </TMagicButton>
+  </TMagicTooltip>
   <TMagicButton
     v-show="showDelete(index + 1 + currentPage * pageSize - 1)"
     size="small"
     type="danger"
     link
     title="删除"
-    :icon="Delete"
+    :icon="config.deleteActionButtonIcon || Delete"
     @click="removeHandler(index + 1 + currentPage * pageSize - 1)"
   ></TMagicButton>
 
@@ -16,7 +25,7 @@
     size="small"
     type="primary"
     title="复制"
-    :icon="DocumentCopy"
+    :icon="config.copyActionButtonIcon || DocumentCopy"
     :disabled="disabled"
     @click="copyHandler(index + 1 + currentPage * pageSize - 1)"
   ></TMagicButton>
@@ -24,10 +33,10 @@
 
 <script setup lang="ts">
 import { inject } from 'vue';
-import { Delete, DocumentCopy } from '@element-plus/icons-vue';
+import { Delete, DocumentCopy, Sort } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
-import { TMagicButton } from '@tmagic/design';
+import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 
 import type { FormState, TableConfig } from '../schema';
 

packages/form/src/table/Table.vue

@@ -8,7 +8,11 @@
     >
       <div class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
         <span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
-        <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
+        <TMagicTooltip
+          content="拖拽可排序"
+          placement="left-start"
+          :disabled="config.dropSort !== true || config.dropSortHandle"
+        >
           <TMagicTable
             v-if="model[modelName]"
             ref="tMagicTable"
@@ -133,16 +137,15 @@ const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentCh
 );
 
 const { nextZIndex } = useZIndex();
+const updateKey = ref(1);
 
 const { addable, newHandler } = useAdd(props, emit);
 const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
-useSortable(props, emit, tMagicTableRef, modelName);
+useSortable(props, emit, tMagicTableRef, modelName, updateKey);
 const { isFullscreen, toggleFullscreen } = useFullscreen();
 const { importable, excelHandler, clearHandler } = useImport(props, emit, newHandler);
 const { selectHandle, toggleRowSelection } = useSelection(props, emit, tMagicTableRef);
 
-const updateKey = ref(1);
-
 const data = computed(() => (props.config.pagination ? paginationData.value : props.model[modelName.value]));
 
 const toggleMode = () => {

packages/form/src/table/useSortable.ts

@@ -1,4 +1,4 @@
-import { inject, type Ref, type ShallowRef, watchEffect } from 'vue';
+import { inject, nextTick, type Ref, type ShallowRef, watchEffect } from 'vue';
 import Sortable, { type SortableEvent } from 'sortablejs';
 
 import { type TMagicTable } from '@tmagic/design';
@@ -13,6 +13,7 @@ export const useSortable = (
   emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
   tMagicTableRef: ShallowRef<InstanceType<typeof TMagicTable> | null>,
   modelName: Ref<string | number>,
+  updateKey: Ref<number>,
 ) => {
   const mForm = inject<FormState | undefined>('mForm');
 
@@ -29,6 +30,7 @@ export const useSortable = (
       filter: 'input', // 表单组件选字操作和触发拖拽会冲突，优先保证选字操作
       preventOnFilter: false, // 允许选字
       direction: 'vertical',
+      handle: props.config.dropSortHandle ? '.tmagic-form-table-drag-target' : undefined,
       onEnd: ({ newIndex, oldIndex }: SortableEvent) => {
         if (typeof newIndex === 'undefined') return;
         if (typeof oldIndex === 'undefined') return;
@@ -36,6 +38,12 @@ export const useSortable = (
 
         emit('change', newData);
         mForm?.$emit('field-change', newData);
+
+        nextTick(() => {
+          sortable?.destroy();
+          sortable = undefined;
+          updateKey.value += 1;
+        });
       },
     });
   };

packages/form/src/table/useTableColumns.ts

@@ -107,11 +107,11 @@ export const useTableColumns = (
       actionFixed = props.config.fixed;
     }
 
-    const actionClumn = {
+    const actionColumn = {
       props: {
         label: '操作',
         fixed: actionFixed,
-        width: props.config.operateColWidth || 112,
+        width: props.config.operateColWidth ?? (props.config.dropSortHandle && props.config.dropSort ? 132 : 112),
         align: 'center',
       },
       cell: ({ row, $index }: any) =>
@@ -133,7 +133,7 @@ export const useTableColumns = (
     };
 
     if (actionFixed !== 'right') {
-      columns.push(actionClumn);
+      columns.push(actionColumn);
     }
 
     if (props.sort && props.model[modelName.value] && props.model[modelName.value].length > 1) {
@@ -237,7 +237,7 @@ export const useTableColumns = (
     }
 
     if (actionFixed === 'right') {
-      columns.push(actionClumn);
+      columns.push(actionColumn);
     }
 
     return columns;

packages/form/src/theme/table.scss

@@ -65,4 +65,8 @@
   .el-form-item {
     margin-bottom: 0;
   }
+
+  .tmagic-form-table-drag-target {
+    cursor: move;
+  }
 }

packages/form/src/utils/form.ts

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import { toRaw } from 'vue';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { cloneDeep } from 'lodash-es';
@@ -121,12 +120,12 @@ const initValueItem = function (
   asyncLoadConfig(value, initValue, item as HtmlField);
 
   // 这种情况比较多，提前结束
-  if (name && !items && typeof initValue[name] !== 'undefined') {
+  if (name && !items && typeof initValue?.[name] !== 'undefined') {
     if (typeof value[name] === 'undefined') {
       if (type === 'number') {
         value[name] = Number(initValue[name]);
       } else {
-        value[name] = typeof initValue[name] === 'object' ? cloneDeep(initValue[name]) : initValue[name];
+        value[name] = typeof initValue[name] === 'object' ? initValue[name] : initValue[name];
       }
     }
 
@@ -281,13 +280,15 @@ export const initValue = async (
 ) => {
   if (!Array.isArray(config)) throw new Error('config应该为数组');
 
-  let valuesTmp = createValues(mForm, config, toRaw(initValues), {});
+  const initValuesCopy = cloneDeep(initValues);
+
+  let valuesTmp = createValues(mForm, config, initValuesCopy, {});
 
   const [firstForm] = config as [ContainerCommonConfig];
   if (firstForm && typeof firstForm.onInitValue === 'function') {
     valuesTmp = await firstForm.onInitValue(mForm, {
       formValue: valuesTmp,
-      initValue: initValues,
+      initValue: initValuesCopy,
     });
   }
 
@@ -302,7 +303,7 @@ export const datetimeFormatter = (
   if (v) {
     let time: string | number;
     if (['x', 'timestamp'].includes(format)) {
-      time = dayjs(v).valueOf();
+      time = dayjs(Number.isNaN(Number(v)) ? v : Number(v)).valueOf();
     } else if ((typeof v === 'string' && v.includes('Z')) || v.constructor === Date) {
       dayjs.extend(utc);
       // UTC字符串时间或Date对象格式化为北京时间

packages/schema/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0-beta.4",
+  "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-beta.4",
+  "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-beta.4",
+  "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-beta.4",
+  "version": "1.7.2",
   "name": "@tmagic/tdesign-vue-next-adapter",
   "type": "module",
   "main": "dist/tmagic-tdesign-vue-next-adapter.umd.cjs",

packages/tdesign-vue-next-adapter/src/index.ts

@@ -354,7 +354,7 @@ const adapter: any = {
         labelWidth: props.labelWidth,
         name: props.prop,
         rules: props.rules,
-        help: () => h('div', { innerHTML: props.extra }),
+        help: props.extra ? () => h('div', { innerHTML: props.extra }) : undefined,
         labelAlign: props.labelPosition,
       }),
     },
@@ -439,7 +439,6 @@ const adapter: any = {
         disabled: props.disabled,
         placeholder: props.placeholder,
         multiple: props.multiple,
-        valueType: props.valueKey,
         remoteMethod: props.onSearch,
         creatable: props.allowCreate,
         size: props.size === 'default' ? 'medium' : props.size,

packages/utils/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0-beta.4",
+  "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-beta.4",
+  "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-beta.4",
-    "@tmagic/design": "1.7.0-beta.4",
-    "@tmagic/editor": "1.7.0-beta.4",
-    "@tmagic/element-plus-adapter": "1.7.0-beta.4",
-    "@tmagic/tdesign-vue-next-adapter": "1.7.0-beta.4",
+    "@tmagic/core": "1.7.2",
+    "@tmagic/design": "1.7.2",
+    "@tmagic/editor": "1.7.2",
+    "@tmagic/element-plus-adapter": "1.7.2",
+    "@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",

playground/src/main.ts

@@ -50,19 +50,19 @@ globalThis.MonacoEnvironment = {
   },
 };
 
-const adpter = sessionStorage.getItem('tmagic-playground-ui-adapter') || 'element-plus';
+const adapter = sessionStorage.getItem('tmagic-playground-ui-adapter') || 'element-plus';
 
-let adpterModule;
+let adapterModule;
 
-if (adpter === 'tdesign-vue-next') {
+if (adapter === 'tdesign-vue-next') {
   import('tdesign-vue-next/es/style/index.css');
-  adpterModule = import('@tmagic/tdesign-vue-next-adapter');
+  adapterModule = import('@tmagic/tdesign-vue-next-adapter');
 } else {
   import('element-plus/dist/index.css');
-  adpterModule = import('@tmagic/element-plus-adapter');
+  adapterModule = import('@tmagic/element-plus-adapter');
 }
 
-adpterModule.then((module: any) => {
+adapterModule.then((module: any) => {
   const app = createApp(App);
   app.use(router);
   app.use(editorPlugin, module.default);

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/stage": ">=1.6.0-beta.0",
+    "@tmagic/core": ">=1.7.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-beta.4",
+  "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-beta.4",
-    "@tmagic/react-runtime-help": "0.2.1",
-    "@tmagic/stage": "1.7.0-beta.4",
+    "@tmagic/core": "1.7.2",
+    "@tmagic/react-runtime-help": "0.2.2",
+    "@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-beta.4",
+    "@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",
-  "module": "dist/tmagic-form-runtime.js",
+  "main": "dist/tmagic-tmagic-form.umd.cjs",
+  "module": "dist/tmagic-tmagic-form.js",
   "types": "types/index.d.ts",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
-      "import": "./dist/tmagic-form-runtime.js",
-      "require": "./dist/tmagic-form.umd-runtime.cjs"
+      "import": "./dist/tmagic-tmagic-form.js",
+      "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/editor": ">=1.5.0",
+    "@tmagic/core": ">=1.7.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) {
-        if (!root.value) throw new Error('error');
+      add({ config, parentId, root: appConfig }: UpdateData) {
+        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) {
-        if (!root.value || !app) throw new Error('error');
+      update({ config, parentId, root: appConfig }: UpdateData) {
+        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/stage": ">=1.6.0-beta.0",
-    "@vue/composition-api": ">=1.7.2",
+    "@tmagic/core": ">=1.7.0",
+    "@tmagic/stage": ">=1.7.0",
     "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-beta.4",
+  "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-beta.4",
-    "@tmagic/stage": "1.7.0-beta.4",
-    "@tmagic/vue-runtime-help": "^1.2.3",
+    "@tmagic/core": "1.7.2",
+    "@tmagic/stage": "1.7.2",
+    "@tmagic/vue-runtime-help": "^2.0.0",
     "axios": "^1.13.2",
     "vue": "catalog:"
   },
   "devDependencies": {
-    "@tmagic/cli": "1.7.0-beta.4",
+    "@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:^",
-    "vue-demi": "^0.14.10"
+    "@tmagic/form-schema": "workspace:^"
   },
   "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">
-import { defineComponent, type PropType } from 'vue-demi';
-
+<script lang="ts" setup>
 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: () => ({}),
-    },
-  },
+const props = defineProps<ComponentProps<ButtonSchema>>();
 
-  setup(props) {
-    const { app, node } = useApp(props);
-
-    const clickHandler = () => {
+const { app, node } = useApp(props);
+const clickHandler = () => {
   if (app && node) {
     app.emit(`${COMMON_EVENT_PREFIX}click`, node);
   }
-    };
-
-    return {
-      clickHandler,
-    };
-  },
-});
+};
 </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:^",
-    "vue-demi": "^0.14.10"
+    "@tmagic/form-schema": "workspace:^"
   },
   "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">
-import { defineComponent, inject, type PropType } from 'vue-demi';
+<script lang="ts" setup>
+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: () => ({}),
-    },
-  },
+const props = defineProps<ComponentProps<ContainerSchema>>();
 
-  components: { ItemComponent },
+const app = inject<TMagicApp>('app');
+const node = useNode(props, app);
+registerNodeHooks(node);
 
-  setup(props) {
-    const app = inject<TMagicApp>('app');
-    const node = useNode(props, app);
-    registerNodeHooks(node);
-
-    const clickHandler = () => {
+const clickHandler = () => {
   if (app && node) {
     app.emit(`${COMMON_EVENT_PREFIX}click`, node);
   }
-    };
-
-    return {
-      clickHandler,
-    };
-  },
-});
+};
 </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:^",
-    "vue-demi": "^0.14.10"
+    "@tmagic/form-schema": "workspace:^"
   },
   "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">
-import { defineComponent, type PropType } from 'vue-demi';
-
+<script lang="ts" setup>
 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:^",
-    "vue-demi": "^0.14.10"
+    "@tmagic/form-schema": "workspace:^"
   },
   "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">
-import { computed, defineComponent, type PropType, watch } from 'vue-demi';
+<script lang="ts" setup>
+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,31 +40,16 @@ interface IteratorItemSchema {
   };
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-iterator-container',
+});
 
-  components: { IteratorItem },
+const props = defineProps<ComponentProps<IteratorContainerSchema>>();
 
-  props: {
-    config: {
-      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: () => ({}),
-    },
-  },
+const { app, node } = useApp(props);
+registerNodeHooks(node);
 
-  setup(props) {
-    const { app, node } = useApp(props);
-    registerNodeHooks(node);
-
-    const configs = computed<IteratorItemSchema[]>(() => {
+const configs = computed<IteratorItemSchema[]>(() => {
   let { iteratorData = [] } = props.config;
   const { itemConfig, dsField, items } = props.config;
 
@@ -95,9 +80,9 @@ export default defineComponent({
       },
     };
   });
-    });
+});
 
-    watch(
+watch(
   configs,
   (configs) => {
     if (!props.config.id) {
@@ -123,18 +108,11 @@ export default defineComponent({
   {
     immediate: true,
   },
-    );
+);
 
-    const clickHandler = () => {
+const clickHandler = () => {
   if (app && node) {
     app.emit(`${COMMON_EVENT_PREFIX}click`, node);
   }
-    };
-
-    return {
-      configs,
-      clickHandler,
-    };
-  },
-});
+};
 </script>

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

@@ -10,8 +10,8 @@
   ></component>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, type PropType } from 'vue-demi';
+<script lang="ts" setup>
+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:^",
-    "vue-demi": "^0.14.10"
+    "@tmagic/form-schema": "workspace:^"
   },
   "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">
-import { defineComponent, inject, onBeforeUnmount, type PropType, ref } from 'vue-demi';
+<script lang="ts" setup>
+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: {
-    config: {
-      type: Object as PropType<OverlaySchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
+const props = defineProps<ComponentProps<OverlaySchema>>();
 
-  setup(props) {
-    const visible = ref(false);
+const visible = ref(false);
 
-    const app = inject<TMagicApp>('app');
-    const containerComponent = useComponent({ componentType: 'container', app });
+const app = inject<TMagicApp>('app');
+const containerComponent = useComponent({ componentType: 'container', app });
 
-    const openOverlay = () => {
+const openOverlay = () => {
   visible.value = true;
   app?.emit('overlay:open', node);
-    };
+};
 
-    const closeOverlay = () => {
+const closeOverlay = () => {
   visible.value = false;
   app?.emit('overlay:close', node);
-    };
+};
 
-    const editorSelectHandler = (
-      info: {
+const editorSelectHandler = (
+  _info: {
     node: MNode;
     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);
+
+app?.on('page-change', () => {
   app?.page?.on('editor:select', editorSelectHandler);
+});
 
-    onBeforeUnmount(() => {
+onBeforeUnmount(() => {
   app?.page?.off('editor:select', editorSelectHandler);
-    });
+});
 
-    const node = useNode(props, app);
-    registerNodeHooks(node, {
+const node = useNode(props, app);
+registerNodeHooks(node, {
   openOverlay,
   closeOverlay,
-    });
+});
 
-    return {
-      containerComponent,
-      visible,
-      IS_DSL_NODE_KEY,
-    };
-  },
+defineExpose({
+  openOverlay,
+  closeOverlay,
 });
 </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:^",
-    "vue-demi": "^0.14.10"
+    "@tmagic/form-schema": "workspace:^"
   },
   "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">
-import { computed, defineComponent, type PropType, provide } from 'vue-demi';
+<script lang="ts" setup>
+import { computed, provide } from 'vue';
 
-import { type Id, type MComponent, NodeType, PAGE_FRAGMENT_CONTAINER_ID_KEY } from '@tmagic/core';
-import { registerNodeHooks, useApp, useComponent, useDsl } from '@tmagic/vue-runtime-help';
+import { type MComponent, NodeType, PAGE_FRAGMENT_CONTAINER_ID_KEY } from '@tmagic/core';
+import { type ComponentProps, registerNodeHooks, useApp, useComponent, useDsl } from '@tmagic/vue-runtime-help';
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-page-fragment-container',
+});
 
-  props: {
-    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: () => ({}),
-    },
-  },
+const props = defineProps<ComponentProps<MComponent>>();
 
-  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);
-    registerNodeHooks(node);
+const { app, node } = useApp(props);
+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');
-    }
+}
 
-    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 };
 
   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:^",
-    "vue-demi": "^0.14.10"
+    "@tmagic/form-schema": "workspace:^"
   },
   "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">
-import { defineComponent, inject, type PropType } from 'vue-demi';
+<script lang="ts" setup>
+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:^",
-    "vue-demi": "^0.14.10"
+    "@tmagic/form-schema": "workspace:^"
   },
   "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">
-import { defineComponent, inject, nextTick, type PropType, watch } from 'vue-demi';
+<script lang="ts" setup>
+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,37 +37,36 @@ const createJs = (config: MPage) => {
   }
 };
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-page',
+});
 
-  props: {
-    config: {
-      type: Object as PropType<MPage>,
-      required: true,
-    },
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
+const props = withDefaults(
+  defineProps<{
+    config: MPage;
+    model?: Record<string, any>;
+  }>(),
+  {
+    model: () => ({}),
   },
+);
 
-  setup(props) {
-    const app = inject<TMagicApp>('app');
+const app = inject<TMagicApp>('app');
 
-    if (app?.jsEngine === 'browser') {
+if (app?.jsEngine === 'browser') {
   createCss(props.config);
   createJs(props.config);
-    }
+}
 
-    const containerComponent = useComponent({ componentType: 'container', app });
+const containerComponent = useComponent({ componentType: 'container', app });
 
-    const { style, className } = useComponentStatus(props);
+const { style, className } = useComponentStatus(props);
 
-    const refresh = () => {
+const refresh = () => {
   window.location.reload();
-    };
+};
 
-    watch(
+watch(
   () => props.config,
   async (config, preConfig) => {
     const node = useNode({ config: { ...config, [IS_DSL_NODE_KEY]: true } }, app);
@@ -87,14 +86,5 @@ export default defineComponent({
   {
     immediate: true,
   },
-    );
-
-    return {
-      style,
-      className,
-      containerComponent,
-      IS_DSL_NODE_KEY,
-    };
-  },
-});
+);
 </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",
-    "vue-demi": "^0.14.10"
+    "qrcode": "^1.5.0"
   },
   "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">
-import { defineComponent, inject, type PropType, ref, watch } from 'vue-demi';
+<script lang="ts" setup>
+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,28 +16,15 @@ 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: () => ({}),
-    },
-  },
+const props = defineProps<ComponentProps<QrCodeSchema>>();
 
-  setup(props) {
-    const imgUrl = ref();
+const imgUrl = ref();
 
-    watch(
+watch(
   () => props.config.url,
   (url = '') => {
     QRCode.toDataURL(url, (e: any, url: string) => {
@@ -48,22 +35,15 @@ export default defineComponent({
   {
     immediate: true,
   },
-    );
+);
 
-    const app = inject<TMagicApp>('app');
-    const node = useNode(props);
-    registerNodeHooks(node);
+const app = inject<TMagicApp>('app');
+const node = useNode(props);
+registerNodeHooks(node);
 
-    const clickHandler = () => {
+const clickHandler = () => {
   if (app && node) {
     app.emit(`${COMMON_EVENT_PREFIX}click`, node);
   }
-    };
-
-    return {
-      imgUrl,
-      clickHandler,
-    };
-  },
-});
+};
 </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:^",
-    "vue-demi": "^0.14.10"
+    "@tmagic/form-schema": "workspace:^"
   },
   "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">
-import { defineComponent, inject, type PropType } from 'vue-demi';
+<script lang="ts" setup>
+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: () => ({}),
-    },
-  },
+const props = defineProps<ComponentProps<TextSchema>>();
 
-  setup(props) {
-    const app = inject<TMagicApp>('app');
-    const node = useNode(props);
-    registerNodeHooks(node);
+const app = inject<TMagicApp>('app');
+const node = useNode(props);
+registerNodeHooks(node);
 
-    const clickHandler = () => {
+const clickHandler = () => {
   if (app && node) {
     app.emit(`${COMMON_EVENT_PREFIX}click`, node);
   }
-    };
-
-    return {
-      clickHandler,
-    };
-  },
-});
+};
 </script>