From f7811fdb2488c72f0ec31fcbf9ce7ceaf8c5e4ba Mon Sep 17 00:00:00 2001 From: roymondchen Date: Thu, 11 Dec 2025 14:20:39 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/editor/componentListServiceMethods.md | 87 ++- docs/api/editor/dataSourceServiceMethods.md | 512 +++++++++++++++++- docs/api/editor/eventsServiceMethods.md | 185 ++++++- docs/api/editor/props.md | 263 ++++++++- docs/api/editor/slots.md | 268 ++++++++- docs/api/editor/storageServiceMethods.md | 210 ++++++- docs/api/editor/uiServiceMethods.md | 199 ++++++- docs/api/table/events.md | 95 ++++ docs/api/table/methods.md | 34 ++ docs/api/table/props.md | 129 +++-- docs/guide/editor-expand.md | 101 +++- 11 files changed, 1938 insertions(+), 145 deletions(-) diff --git a/docs/api/editor/componentListServiceMethods.md b/docs/api/editor/componentListServiceMethods.md index 7a8d0204..73a51052 100644 --- a/docs/api/editor/componentListServiceMethods.md +++ b/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}` - **详情：** + 设置左侧面板的组件列表配置 + + :::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}` + - {[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}` - **详情：** + + 销毁 componentListService，清空状态并移除所有事件监听和插件 + +- **示例：** + +```js +import { componentListService } from '@tmagic/editor'; + +componentListService.destroy(); +``` diff --git a/docs/api/editor/dataSourceServiceMethods.md b/docs/api/editor/dataSourceServiceMethods.md index 74f6243a..38c365c8 100644 --- a/docs/api/editor/dataSourceServiceMethods.md +++ b/docs/api/editor/dataSourceServiceMethods.md @@ -2,30 +2,540 @@ ## get +- **参数：** + + - `{StateKey}` name 状态键名 + +- **返回：** + + - `{any}` 对应的状态值 + +- **详情：** + + 获取数据源服务的内部状态 + + 可用的状态键： + - `datasourceTypeList`: 数据源类型列表 + - `dataSources`: 当前数据源列表 + - `editable`: 是否可编辑 + - `configs`: 数据源表单配置 + - `values`: 数据源默认值 + - `events`: 数据源事件列表 + - `methods`: 数据源方法列表 + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +const dataSources = dataSourceService.get('dataSources'); +console.log(dataSources); +``` + +## set + +- **参数：** + + - `{StateKey}` name 状态键名 + - `{any}` value 状态值 + +- **返回：** + + - `{void}` + +- **详情：** + + 设置数据源服务的内部状态 + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +dataSourceService.set('editable', false); +``` + ## getFormConfig +- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 + +- **参数：** + + - `{string}` type 数据源类型，默认为 'base' + +- **返回：** + + - {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} 表单配置 + +- **详情：** + + 获取指定类型数据源的表单配置 + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +const config = dataSourceService.getFormConfig('http'); +console.log(config); +``` + ## setFormConfig +- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 + +- **参数：** + + - `{string}` type 数据源类型 + - {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} config 表单配置 + +- **返回：** + + - `{void}` + +- **详情：** + + 设置指定类型数据源的表单配置 + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +dataSourceService.setFormConfig('http', [ + { + name: 'url', + text: '请求地址', + type: 'text', + }, + { + name: 'method', + text: '请求方法', + type: 'select', + options: [ + { text: 'GET', value: 'GET' }, + { text: 'POST', value: 'POST' }, + ], + }, +]); +``` + ## getFormValue +- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 + +- **参数：** + + - `{string}` type 数据源类型，默认为 'base' + +- **返回：** + + - {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} 数据源默认值 + +- **详情：** + + 获取指定类型数据源的默认值 + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +const defaultValue = dataSourceService.getFormValue('http'); +console.log(defaultValue); +``` + ## setFormValue +- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 + +- **参数：** + + - `{string}` type 数据源类型 + - {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} value 数据源默认值 + +- **返回：** + + - `{void}` + +- **详情：** + + 设置指定类型数据源的默认值 + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +dataSourceService.setFormValue('http', { + type: 'http', + method: 'GET', + url: '', +}); +``` + ## getFormEvent +- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 + +- **参数：** + + - `{string}` type 数据源类型，默认为 'base' + +- **返回：** + + - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 事件列表 + +- **详情：** + + 获取指定类型数据源的事件列表 + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +const events = dataSourceService.getFormEvent('http'); +console.log(events); +``` + ## setFormEvent +- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 + +- **参数：** + + - `{string}` type 数据源类型 + - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 事件列表 + +- **返回：** + + - `{void}` + +- **详情：** + + 设置指定类型数据源的事件列表 + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +dataSourceService.setFormEvent('http', [ + { label: '请求成功', value: 'success' }, + { label: '请求失败', value: 'error' }, +]); +``` + ## getFormMethod +- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 + +- **参数：** + + - `{string}` type 数据源类型，默认为 'base' + +- **返回：** + + - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 方法列表 + +- **详情：** + + 获取指定类型数据源的方法列表 + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +const methods = dataSourceService.getFormMethod('http'); +console.log(methods); +``` + ## setFormMethod +- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 + +- **参数：** + + - `{string}` type 数据源类型 + - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 方法列表 + +- **返回：** + + - `{void}` + +- **详情：** + + 设置指定类型数据源的方法列表 + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +dataSourceService.setFormMethod('http', [ + { label: '发起请求', value: 'request' }, + { label: '重试', value: 'retry' }, +]); +``` + ## add +- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 + +- **参数：** + + - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置 + +- **返回：** + + - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} 添加后的数据源配置 + +- **详情：** + + 添加一个数据源，如果配置中没有id或id已存在，会自动生成新的id + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +const newDs = dataSourceService.add({ + type: 'http', + title: '用户信息', + url: '/api/user', + method: 'GET', +}); + +console.log(newDs.id); // 自动生成的id +``` + ## update +- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 + +- **参数：** + + - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置 + - `{Object}` options 可选配置 + - {[ChangeRecord](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)[]} changeRecords 变更记录 + +- **返回：** + + - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} 更新后的数据源配置 + +- **详情：** + + 更新数据源 + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +const updatedDs = dataSourceService.update({ + id: 'ds_123', + type: 'http', + title: '用户详情', + url: '/api/user/detail', +}); + +console.log(updatedDs); +``` + ## remove +- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 + +- **参数：** + + - `{string}` id 数据源id + +- **返回：** + + - `{void}` + +- **详情：** + + 删除指定id的数据源 + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +dataSourceService.remove('ds_123'); +``` + +## createId + +- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 + +- **参数：** 无 + +- **返回：** + + - `{string}` 生成的唯一id + +- **详情：** + + 生成一个唯一的数据源id，格式为 `ds_` + guid + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +const id = dataSourceService.createId(); +console.log(id); // 'ds_xxx-xxx-xxx' +``` + ## getDataSourceById +- **参数：** + + - `{string}` id 数据源id + +- **返回：** + + - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221) | undefined} 数据源配置 + +- **详情：** + + 根据id获取数据源配置 + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +const ds = dataSourceService.getDataSourceById('ds_123'); +console.log(ds); +``` + +## copyWithRelated + +- **参数：** + + - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]} config 组件节点配置 + - `{TargetOptions}` collectorOptions 可选的收集器配置 + +- **返回：** + + - `{void}` + +- **详情：** + + 复制组件时会带上组件关联的数据源，将关联的数据源存储到 localStorage + +- **示例：** + +```js +import { dataSourceService, editorService } from '@tmagic/editor'; + +const node = editorService.get('node'); +dataSourceService.copyWithRelated(node); +``` + +## paste + +- **参数：** 无 + +- **返回：** + + - `{void}` + +- **详情：** + + 粘贴数据源，从 localStorage 中读取复制的数据源并添加到当前页面 + + 如果数据源id已存在，则不会覆盖 + +- **示例：** + +```js +import { dataSourceService } from '@tmagic/editor'; + +dataSourceService.paste(); +``` + ## resetState -## destroy \ No newline at end of file +- **参数：** 无 + +- **返回：** + + - `{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(); +``` \ No newline at end of file diff --git a/docs/api/editor/eventsServiceMethods.md b/docs/api/editor/eventsServiceMethods.md index 878fbc07..e740dc91 100644 --- a/docs/api/editor/eventsServiceMethods.md +++ b/docs/api/editor/eventsServiceMethods.md @@ -1,97 +1,244 @@ -# eventService方法 +# eventsService方法 ## init - **参数：** - - + - {Record} eventMethodList 事件方法列表配置 - **返回：** - - `{Promise}` + - `{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} events 事件配置对象 - **返回：** - - `{Promise}` + - `{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}` - **详情：** + 设置指定组件类型的事件列表 + +- **示例：** + +```js +import { eventsService } from '@tmagic/editor'; + +eventsService.setEvent('button', [ + { label: '点击', value: 'click' }, + { label: '长按', value: 'longpress' }, +]); +``` + ## getEvent - **参数：** - - + - `{string}` type 组件类型 - **返回：** - - `{Promise}` + - {[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} methods 方法配置对象 - **返回：** - - `{Promise}` + - `{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}` - **详情：** + 设置指定组件类型的方法列表 + +- **示例：** + +```js +import { eventsService } from '@tmagic/editor'; + +eventsService.setMethod('video', [ + { label: '播放', value: 'play' }, + { label: '暂停', value: 'pause' }, + { label: '停止', value: 'stop' }, +]); +``` + ## getMethod - **参数：** - - + - `{string}` type 组件类型 - **返回：** - - `{Promise}` + - {[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}` - **详情：** + + 销毁 eventsService，重置状态并移除所有事件监听和插件 + +- **示例：** + +```js +import { eventsService } from '@tmagic/editor'; + +eventsService.destroy(); +``` diff --git a/docs/api/editor/props.md b/docs/api/editor/props.md index 73144703..ec179e5a 100644 --- a/docs/api/editor/props.md +++ b/docs/api/editor/props.md @@ -967,83 +967,316 @@ const updateDragEl = (el, target) => { - **详情：** -标尺配置 + 画布标尺和参考线的配置选项 + +- **默认值：** `undefined` - **类型：** `Partial` - + +- **示例：** + +```html + + + +``` ## disabledPageFragment - **详情：** -禁用页面片 + 禁用页面片功能 + + 页面片是可以在多个页面中复用的组件集合 + +- **默认值：** `false` - **类型：** `boolean` - + +- **示例：** + +```html + +``` + ## disabledStageOverlay - **详情：** -禁用双击在浮层中单独编辑选中组件 + 禁用双击在浮层中单独编辑选中组件的功能 + + 启用时，双击组件可以在浮层中单独编辑，避免其他组件干扰 + +- **默认值：** `false` - **类型：** `boolean` - + +- **示例：** + +```html + +``` + ## disabledShowSrc - **详情：** -禁用属性配置面板右下角显示源码的按钮 + 禁用属性配置面板右下角"显示源码"的按钮 + + 该按钮可以查看和编辑组件的 JSON 配置 + +- **默认值：** `false` - **类型：** `boolean` +- **示例：** + +```html + +``` + ## disabledDataSource - **详情：** -禁用数据源 + 禁用数据源功能 + + 禁用后，左侧面板将不显示数据源选项卡 + +- **默认值：** `false` - **类型：** `boolean` +- **示例：** + +```html + +``` + ## disabledCodeBlock - **详情：** -禁用代码块 + 禁用代码块功能 + + 禁用后，左侧面板将不显示代码块选项卡 + +- **默认值：** `false` - **类型：** `boolean` +- **示例：** + +```html + +``` + ## treeIndent - **详情：** -已选组件、代码编辑、数据源缩进配置 + 组件树、代码块列表、数据源列表的缩进配置（单位：px） + +- **默认值：** `undefined` - **类型：** `number` +- **示例：** + +```html + +``` + ## treeNextLevelIndentIncrement - **详情：** -已选组件、代码编辑、数据源子节点缩进增量配置 + 组件树、代码块列表、数据源列表子节点缩进增量配置（单位：px） + + 每一级子节点会在父节点缩进基础上增加该值 + +- **默认值：** `undefined` - **类型：** `number` +- **示例：** + +```html + +``` + ## customContentMenu - **详情：** -用于自定义组件树与画布的右键菜单 + 用于自定义组件树与画布的右键菜单 -- **类型：** `function` + 该函数会在显示右键菜单前被调用，接收默认菜单项作为参数，返回最终显示的菜单项 + +- **默认值：** `(menus) => menus` + +- **类型：** `(menus: (MenuButton | MenuComponent)[], data: { node?: MNode; page?: MPage; parent?: MContainer; stage?: StageCore }) => (MenuButton | MenuComponent)[]` + +- **示例：** + +```html + + + +``` + +## extendFormState + +- **详情：** + + 扩展表单状态 + + 用于在属性表单中注入自定义的状态数据，这些数据可以在表单配置的各个字段为函数时的第一个参数中获取 + +- **默认值：** `undefined` + +- **类型：** `(state: FormState) => Record | Promise>` + +- **示例：** + +```html + + + +``` + +:::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 + + + +``` ## pageFilterFunction - **详情：** -页面搜索函数 + 页面搜索/过滤函数 + + 用于自定义页面的搜索逻辑，在页面列表中输入关键词时会调用该函数进行过滤 + +- **默认值：** `undefined` + +- **类型：** `(page: MPage | MPageFragment, keyword: string) => boolean` + +- **示例：** + +```html + + + +``` diff --git a/docs/api/editor/slots.md b/docs/api/editor/slots.md index 29904914..3f0a1f4d 100644 --- a/docs/api/editor/slots.md +++ b/docs/api/editor/slots.md @@ -1,29 +1,111 @@ # Editor组件 slots +## header + +- **详情：** 编辑器最顶部区域 + +- **默认：** 无 + +- **示例：** + +```html + +``` + ## 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 + +``` + +## 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 + +``` + +## component-list + +- **详情：** 左边栏中的组件列表 + +- **默认：** 默认的组件列表 + +- **插槽 Props：** + - `componentGroupList`: 组件分组列表 + +:::warning +如设置了[sidebar](#sidebar)插槽，此插槽将失效 +::: + ## component-list-panel-header - **详情：** 左边栏中的组件列表内上方位置 +- **默认：** 无 + :::warning 如设置了[sidebar](#sidebar)插槽，此插槽将失效 ::: @@ -34,24 +116,84 @@ - **默认：** 图片加文案 +- **插槽 Props：** + - `component`: 组件配置对象 + :::warning 如设置了[sidebar](#sidebar)插槽，此插槽将失效 ::: +- **示例：** + +```html + +``` + ## 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 + +``` + +## 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 + +``` + ## 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 + +``` diff --git a/docs/api/editor/storageServiceMethods.md b/docs/api/editor/storageServiceMethods.md index 3ba84d50..2fd611f5 100644 --- a/docs/api/editor/storageServiceMethods.md +++ b/docs/api/editor/storageServiceMethods.md @@ -4,114 +4,250 @@ - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 -- **参数：** - - - +- **参数：** 无 - **返回：** - - `{Promise}` + - `{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}` + - `{string}` 命名空间字符串 - **详情：** + 获取存储项的命名空间，默认为 'tmagic' + + 命名空间用于区分不同应用的存储数据 + +- **示例：** + +```js +import { storageService } from '@tmagic/editor'; + +const namespace = storageService.getNamespace(); +console.log(namespace); // 'tmagic' +``` + ## clear - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 -- **参数：** - - - +- **参数：** 无 - **返回：** - - `{Promise}` + - `{void}` - **详情：** + 清空当前存储对象中的所有数据 + +- **示例：** + +```js +import { storageService } from '@tmagic/editor'; + +storageService.clear(); +``` + ## getItem - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 - **参数：** - - + - `{string}` key 存储项的键名 + - `{Options}` options 可选配置 + - `namespace?: string` 自定义命名空间 + - `protocol?: Protocol` 数据协议类型 - **返回：** - - `{Promise}` + - `{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}` + - `{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}` - **详情：** + 移除指定的存储项 + +- **示例：** + +```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}` - **详情：** + 设置存储项，自动序列化复杂数据类型 + +- **示例：** + +```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}` - **详情：** + 销毁 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(); +``` + diff --git a/docs/api/editor/uiServiceMethods.md b/docs/api/editor/uiServiceMethods.md index b95b0836..33871947 100644 --- a/docs/api/editor/uiServiceMethods.md +++ b/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}` + - `{Promise}` 计算出的缩放倍数 - **详情：** -计算出缩放以适应的倍数 + 计算"缩放以适应"的倍数 + + 根据画布容器的尺寸和画布尺寸自动计算出合适的缩放比例，使画布完全显示在容器内 + +- **示例：** + +```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(); +``` + diff --git a/docs/api/table/events.md b/docs/api/table/events.md index 91ffe832..c7c36df5 100644 --- a/docs/api/table/events.md +++ b/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` - 当前选中的行数据数组 + - `row: any` - 刚刚被选中的行数据 + +- **说明：** 当用户手动勾选某一行时触发 + +- **示例：** + ```js + const handleSelect = (selection, row) => { + console.log('选中行:', row); + console.log('当前选中:', selection); + }; + ``` + ## select-all +- **参数：** + - `selection: Array` - 当前选中的行数据数组 + +- **说明：** 当用户手动勾选全选 Checkbox 时触发 + +- **示例：** + ```js + const handleSelectAll = (selection) => { + console.log('全选/取消全选:', selection.length); + }; + ``` + ## selection-change +- **参数：** + - `selection: Array` - 当前选中的行数据数组 + +- **说明：** 当选择项发生变化时触发 + +- **示例：** + ```js + const handleSelectionChange = (selection) => { + console.log('选中项变化:', selection); + }; + ``` + ## expand-change +- **参数：** + - `row: any` - 被展开/收起的行数据 + - `expandedRows: Array` - 当前所有展开的行数据数组 + +- **说明：** 当用户展开或收起某一行时触发（用于可展开表格） + +- **示例：** + ```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); + }; + ``` diff --git a/docs/api/table/methods.md b/docs/api/table/methods.md index 07f7b706..4e395ae5 100644 --- a/docs/api/table/methods.md +++ b/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(); + ``` diff --git a/docs/api/table/props.md b/docs/api/table/props.md index c6dc44e6..9bfcd046 100644 --- a/docs/api/table/props.md +++ b/docs/api/table/props.md @@ -2,123 +2,122 @@ ## data -- **详情：** - +- **详情：** 表格数据，数组格式 +- **默认值：** `[]` -- **默认值：** - - - -- **类型：** +- **类型：** `Array` +- **示例：** + ```js + [ + { id: 1, name: '张三', age: 20 }, + { id: 2, name: '李四', age: 25 } + ] + ``` ## columns -- **详情：** - +- **详情：** 表格列配置 +- **默认值：** `[]` -- **默认值：** - - - -- **类型：** +- **类型：** `Array` +- **示例：** + ```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` diff --git a/docs/guide/editor-expand.md b/docs/guide/editor-expand.md index 8ac2bce5..8ab5f644 100644 --- a/docs/guide/editor-expand.md +++ b/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 + + + +``` + +#### 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({ ``` -### 四、中间工作区域 - ## 行为扩展 + +### 二、服务扩展 + +可以通过监听事件和使用插件来扩展 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; + } +}); +```