diff --git a/packages/plugins/@nocobase/plugin-block-lowcode/index.md b/packages/plugins/@nocobase/plugin-block-lowcode/index.md index 589f33b3e8..b1b7b4e54a 100644 --- a/packages/plugins/@nocobase/plugin-block-lowcode/index.md +++ b/packages/plugins/@nocobase/plugin-block-lowcode/index.md @@ -1,12 +1,12 @@ # 低代码区块文档 -让用户用纯 JavaScript 动态创建和运行自定义的交互式前端组件。 +低代码区块让用户能够用纯 JavaScript 动态创建和运行自定义的交互式前端组件。 --- ## 全局上下文对象 `ctx` -低代码区块为用户代码提供了统一的全局上下文对象 `ctx`。你可以通过解构方式快速访问常用的变量和方法: +低代码区块为用户代码提供了统一的全局上下文对象 `ctx`。你可以通过解构的方式,快速访问常用变量和方法: ```js type LowcodeCtx = { @@ -43,8 +43,8 @@ declare const ctx: LowcodeCtx; ### `ctx.element` * **类型**:`HTMLElement` -* **说明**:当前组件的根 DOM 元素。每个低代码区块都会被渲染到一个独立的 DOM 元素中,`element` 即为该元素的引用。你可以通过它进行内容渲染、事件绑定、集成第三方前端库等操作。该元素的生命周期与区块一致,区块销毁时会自动清理。 -* **使用场景**:适用于需要自定义渲染、挂载第三方库、绑定事件监听等场景。 +* **说明**:当前组件的根 DOM 元素。每个低代码区块会被渲染到一个独立的 DOM 元素中,`element` 即为该元素的引用。你可以通过它进行内容渲染、事件绑定、集成第三方前端库等操作。该元素的生命周期与区块一致,区块销毁时会自动清理。 +* **使用场景**:适用于自定义渲染、挂载第三方库、绑定事件监听等。 * **注意事项**: - 请勿直接替换 `element` 节点本身(如通过 `replaceWith` 或重新赋值),否则会导致区块生命周期异常。 - 推荐只操作 `element` 的内容或子节点,例如通过 `element.innerHTML`、`appendChild`、`addEventListener` 等方式进行 DOM 操作。 @@ -176,6 +176,103 @@ ctx.element.innerHTML = ctx.i18n.t('welcome_user', { user: 'Tom', ns: 'ns1' }); - 推荐始终通过 `ctx.Resources` 获取资源类型,避免直接从全局导入,确保兼容性和可维护性。 - 可扩展:如有自定义资源类型,也可通过插件机制扩展到 `ctx.Resources`。 +Resource 相关类的接口说明,更多说明参考 [FlowResource 及资源体系 +](https://pr-7056.client.docs-cn.nocobase.com/core/flow-engine/flow-resource) + +```ts +// FlowResource interface +interface IFlowResource { + getData(): TData; + setData(value: TData): this; + getMeta(metaKey?: string): any; + setMeta(meta: Record): this; +} + +// APIResource interface +interface IAPIResource extends IFlowResource { + loading: boolean; + + setAPIClient(api: APIClient): this; + getURL(): string; + setURL(value: string): this; + + clearRequestParameters(): this; + setRequestParameters(params: Record): this; + setRequestMethod(method: string): this; + + addRequestHeader(key: string, value: string): this; + removeRequestHeader(key: string): this; + + addRequestParameter(key: string, value: any): this; + getRequestParameter(key: string): any | null; + removeRequestParameter(key: string): this; + + setRequestBody(data: any): this; + setRequestOptions(key: string, value: any): this; + + refresh(): Promise; +} + +// BaseRecordResource interface +interface IBaseRecordResource extends IAPIResource { + setResourceName(resourceName: string): this; + getResourceName(): string; + setSourceId(sourceId: string | number): this; + getSourceId(): string | number; + setDataSourceKey(dataSourceKey: string): this; + getDataSourceKey(): string; + setFilter(filter: Record): this; + getFilter(): Record; + resetFilter(): void; + addFilterGroup(key: string, filter: any): void; + removeFilterGroup(key: string): void; + setAppends(appends: string[]): this; + getAppends(): string[]; + addAppends(appends: string | string[]): this; + removeAppends(appends: string | string[]): this; + setFilterByTk(filterByTk: string | number | string[] | number[]): this; + getFilterByTk(): string | number | string[] | number[]; + setFields(fields: string[] | string): this; + getFields(): string[]; + setSort(sort: string | string[]): this; + getSort(): string[]; + setExcept(except: string | string[]): this; + getExcept(): string[]; + setWhitelist(whitelist: string | string[]): this; + getWhitelist(): string[]; + setBlacklist(blacklist: string | string[]): this; + getBlacklist(): string[]; + refresh(): Promise; +} + +// SingleRecordResource interface +interface ISingleRecordResource extends IBaseRecordResource { + setFilterByTk(filterByTk: string | number): this; + save(data: TData): Promise; + destroy(): Promise; + refresh(): Promise; +} + +// MultiRecordResource interface +interface IMultiRecordResource extends IBaseRecordResource { + setSelectedRows(selectedRows: TDataItem[]): this; + getSelectedRows(): TDataItem[]; + setPage(page: number): this; + getPage(): number; + setPageSize(pageSize: number): this; + getPageSize(): number; + getCell(rowIndex: number, columnKey: string): TDataItem | undefined; + next(): Promise; + previous(): Promise; + goto(page: number): Promise; + create(data: TDataItem): Promise; + update(filterByTk: string | number, data: Partial): Promise; + destroySelectedRows(): Promise; + destroy(filterByTk: string | number | string[] | number[] | TDataItem | TDataItem[]): Promise; + refresh(): Promise; +} +``` + * **示例**: ```js