Function to determine display condition | (nodes: IPublicModelNode[]) => boolean (optional) | | +| disabled | 禁用条件函数，可选
Function to determine disabled condition, optional | (nodes: IPublicModelNode[]) => boolean (optional) | | + +**ContextMenu 示例** + +```typescript +const App = () => { + const menuItems: IPublicTypeContextMenuAction[] = [ + { + name: 'a', + title: '选项 1', + action: () => console.log('选项 1 被点击'), + }, + { + name: 'b', + title: '选项 2', + action: () => console.log('选项 2 被点击'), + }, + ]; + + const ContextMenu = ctx.commonUI.ContextMenu; + + return ( +
+
+
+
+ );
+};
+
+export default App;
+```
+
+**ContextMenu.create 示例**
+
+```typescript
+const App = () => {
+ const menuItems: IPublicTypeContextMenuAction[] = [
+ {
+ name: 'a',
+ title: '选项 1',
+ action: () => console.log('选项 1 被点击'),
+ },
+ {
+ name: 'b',
+ title: '选项 2',
+ action: () => console.log('选项 2 被点击'),
+ },
+ ];
+
+ const ContextMenu = ctx.commonUI.ContextMenu;
+
+ return (
+ 右键点击这里
+
+
+ );
+};
+
+export default App;
+```
+
+### Balloon
+
+详细文档： [Balloon Documentation](https://fusion.design/pc/component/balloon)
+
+### Breadcrumb
+详细文档： [Breadcrumb Documentation](https://fusion.design/pc/component/breadcrumb)
+
+### Button
+详细文档： [Button Documentation](https://fusion.design/pc/component/button)
+
+### Card
+详细文档：[Card Documentation](https://fusion.design/pc/component/card)
+
+### Checkbox
+详细文档：[Checkbox Documentation](https://fusion.design/pc/component/checkbox)
+
+### DatePicker
+详细文档：[DatePicker Documentation](https://fusion.design/pc/component/datepicker)
+
+### Dialog
+详细文档：[Dialog Documentation](https://fusion.design/pc/component/dialog)
+
+### Dropdown
+详细文档：[Dropdown Documentation](https://fusion.design/pc/component/dropdown)
+
+### Form
+详细文档：[Form Documentation](https://fusion.design/pc/component/form)
+
+### Icon
+详细文档：[Icon Documentation](https://fusion.design/pc/component/icon)
+
+引擎默认主题支持的 icon 列表：https://fusion.design/64063/component/icon?themeid=20133
+
+
+### Input
+详细文档：[Input Documentation](https://fusion.design/pc/component/input)
+
+### Loading
+详细文档：[Loading Documentation](https://fusion.design/pc/component/loading)
+
+### Message
+详细文档：[Message Documentation](https://fusion.design/pc/component/message)
+
+### Overlay
+详细文档：[Overlay Documentation](https://fusion.design/pc/component/overlay)
+
+### Pagination
+详细文档：[Pagination Documentation](https://fusion.design/pc/component/pagination)
+
+### Radio
+详细文档：[Radio Documentation](https://fusion.design/pc/component/radio)
+
+### Search
+详细文档：[Search Documentation](https://fusion.design/pc/component/search)
+
+### Select
+详细文档：[Select Documentation](https://fusion.design/pc/component/select)
+
+### SplitButton
+详细文档：[SplitButton Documentation](https://fusion.design/pc/component/splitbutton)
+
+### Step
+详细文档：[Step Documentation](https://fusion.design/pc/component/step)
+
+### Switch
+详细文档：[Switch Documentation](https://fusion.design/pc/component/switch)
+
+### Tab
+详细文档：[Tab Documentation](https://fusion.design/pc/component/tab)
+
+### Table
+详细文档：[Table Documentation](https://fusion.design/pc/component/table)
+
+### Tree
+详细文档：[Tree Documentation](https://fusion.design/pc/component/tree)
+
+### TreeSelect
+详细文档：[TreeSelect Documentation](https://fusion.design/pc/component/treeselect)
+
+### Upload
+详细文档：[Upload Documentation](https://fusion.design/pc/component/upload)
+
+### Divider
+详细文档：[Divider Documentation](https://fusion.design/pc/component/divider)
+
+## 说明
+
+如果需要其他组件，可以提 issue 给我们。
diff --git a/docs/docs/api/config.md b/docs/docs/api/config.md
index ea4c7dbfcc..414cfc979f 100644
--- a/docs/docs/api/config.md
+++ b/docs/docs/api/config.md
@@ -1,6 +1,6 @@
---
title: config - 配置 API
-sidebar_position: 8
+sidebar_position: 5
---
> **@types** [IPublicModelEngineConfig](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/engine-config.ts) {
+ ContextMenu.create(menuItems, e);
+ }}>点击这里
+ @@ -24,7 +24,7 @@ sidebar_position: 8 */ get(key: string, defaultValue?: any): any; ``` -#### 示例 +**示例** ```typescript import { config } from '@alilc/lowcode-engine'; @@ -43,7 +43,7 @@ config.get('keyB', { a: 1 }); */ set(key: string, value: any): void; ``` -#### 示例 +**示例** ```typescript import { config } from '@alilc/lowcode-engine'; @@ -63,7 +63,7 @@ config.set('keyC', 1); has(key: string): boolean; ``` -#### 示例 +**示例** ```typescript import { config } from '@alilc/lowcode-engine'; @@ -81,7 +81,7 @@ config.has('keyD'); */ setConfig(config: { [key: string]: any }): void; ``` -#### 示例 +**示例** ```typescript import { config } from '@alilc/lowcode-engine'; @@ -105,6 +105,17 @@ getPreference(): IPublicModelPreference; **@since v1.1.0** +示例 + +```javascript +import { config } from '@alilc/lowcode-engine'; + +const panelName = 'outline-master-pane'; + +// 设置大纲树面板钉住，在大纲树下次重新打开时生效 +config.getPreference().set(`${panelName}-pinned-status-isFloat`, false, 'skeleton') +``` + ## 事件 ### onceGot @@ -123,7 +134,7 @@ getPreference(): IPublicModelPreference; */ onceGot(key: string): Promise
+ +## 配置方式 + +#### init API + +```javascript +import { init } from '@alilc/lowcode-engine'; + +init(document.getElementById('engine'), { + enableCondition: false, +}); +``` + +[**init api**](./init) + +#### config API + +```javascript +import { config } from '@alilc/lowcode-engine'; + +config.set('enableCondition', false) +``` + +[**config api**](./config) + +## 配置详情 + +> 源码详见 [IPublicTypeEngineOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/engine-options.ts) + + +### 画布 + +#### locale - 语言 + +`@type {string}`、`@default {zh-CN}` + +语言 + +#### device - 设备类型 + +`@type {string}` + +引擎默认支持的 device 类型有 `default`、`mobile`、`iphonex`、`iphone6`。 + +插件 `@alilc/lowcode-plugin-simulator-select` 支持的 device 类型有 `default`、`phone`、`tablet`、`desktop`。 + +如果需要自定义的 device 类型，需要补充 device 类型对应的样式，例如 device 为 phone 时，需要补充样式如下： + +```css +.lc-simulator-device-phone { + top: 16px; + bottom: 16px; + left: 50%; + width: 375px; + transform: translateX(-50%); + margin: auto; +} +``` + +#### deviceClassName + +`@type {string}` + +指定初始化的 deviceClassName，挂载到画布的顶层节点上 + +#### appHelper + +与 react-renderer 的 appHelper 一致，https://lowcode-engine.cn/site/docs/guide/expand/runtime/renderer#apphelper + + +#### enableCondition + +`@type {boolean}` + +是否开启 condition 的能力，默认在设计器中不管 condition 是啥都正常展示 + +#### disableAutoRender + +`@type {boolean}` `@default {false}` + +关闭画布自动渲染，在资产包多重异步加载的场景有效 + +#### renderEnv - 渲染器类型 + +渲染器类型 + +`@type {string}`、`@default {react}` + +#### simulatorUrl + +`@type {string[]}` + +设置 simulator 相关的 url + +#### enableStrictNotFoundMode + +`@type {boolean}` `@default {false}` + +当开启组件未找到严格模式时，渲染模块不会默认给一个容器组件 + +### 编排 + +#### focusNodeSelector - 指定根组件 + +配置指定节点为根组件 + +类型定义 + +```typescript + focusNodeSelector?: (rootNode: IPublicModelNode) => Node; +``` + +#### supportVariableGlobally - 全局变量配置 + +`@type {boolean}` `@default {false}` + +设置所有属性支持变量配置 + +开启拖拽组件时，即将被放入的容器是否有视觉反馈 + +#### customizeIgnoreSelectors - 点击忽略 + +配置画布中，需要屏蔽点击事件的元素，即配置的元素默认点击行为均不生效。 + +类型定义: + +```typescript + customizeIgnoreSelectors?: (defaultIgnoreSelectors: string[], e: MouseEvent) => string[]; +``` + +默认值: + +```javascript +() => { + return [ + '.next-input-group', + '.next-checkbox-group', + '.next-checkbox-wrapper', + '.next-date-picker', + '.next-input', + '.next-month-picker', + '.next-number-picker', + '.next-radio-group', + '.next-range', + '.next-range-picker', + '.next-rating', + '.next-select', + '.next-switch', + '.next-time-picker', + '.next-upload', + '.next-year-picker', + '.next-breadcrumb-item', + '.next-calendar-header', + '.next-calendar-table', + '.editor-container', // 富文本组件 + ] +} +``` + +#### enableCanvasLock + +`@type {boolean}` `@default {false}` + +打开画布的锁定操作 + +#### enableLockedNodeSetting + +`@type {boolean}` `@default {false}` + +容器锁定后，容器本身是否可以设置属性，仅当画布锁定特性开启时生效 + +#### enableMouseEventPropagationInCanvas + +`@type {boolean}` `@default {false}` + +鼠标事件（mouseover、mouseleave、mousemove）在画布中是否允许冒泡，默认不允许。 + +#### enableReactiveContainer + +`@type {boolean}` `@default {false}` + +#### enableContextMenu - 开启右键菜单 + +`@type {boolean}` `@default {false}` + +是否开启右键菜单 + +#### disableDetecting + +`@type {boolean}` `@default {false}` + +关闭拖拽组件时的虚线响应，性能考虑 + + +#### disableDefaultSettingPanel + +`@type {boolean}` `@default {false}` + +禁止默认的设置面板 + +#### disableDefaultSetters + +`@type {boolean}` `@default {false}` + +禁止默认的设置器 + +#### stayOnTheSameSettingTab + +`@type {boolean}` `@default {false}` + +当选中节点切换时，是否停留在相同的设置 tab 上 + +#### hideSettingsTabsWhenOnlyOneItem + +`@type {boolean}` `@default {false}` + +是否在只有一个 item 的时候隐藏设置 tabs + +#### hideComponentAction + +`@type {boolean}` `@default {false}` + +隐藏设计器辅助层 + +#### thisRequiredInJSE + +`@type {boolean}` `@default {true}` + +JSExpression 是否只支持使用 this 来访问上下文变量，假如需要兼容原来的 'state.xxx'，则设置为 false + +### 应用级设计器 + +#### enableWorkspaceMode - 应用级设计模式 + +`@type {boolean}` `@default {false}` + +开启应用级设计模式 + +#### enableAutoOpenFirstWindow + +`@type {boolean}` `@default {true}` + +应用级设计模式下，自动打开第一个窗口 + +#### workspaceEmptyComponent + +应用级设计模式下，当窗口为空时，展示的占位组件 + +### 定制组件 + +#### faultComponent + +组件渲染错误时的占位组件 + +#### notFoundComponent + +组件不存在时的占位组件 + +#### loadingComponent - loading 组件 + +自定义 loading 组件 + +### 插件 + +#### defaultSettingPanelProps + +内置设置面板插件的 panelProps + +#### defaultOutlinePaneProps + +内置大纲树面板插件的 panelProps + +### 其他 + +#### enableStrictPluginMode + +`@type {boolean}` + +开启严格插件模式，默认值：STRICT_PLUGIN_MODE_DEFAULT , 严格模式下，插件将无法通过 engineOptions 传递自定义配置项 + +#### requestHandlersMap + +数据源引擎的请求处理器映射 + +#### customPluginTransducer + +插件处理中间件，方便提供插件调试能力 + +类型定义 + +```typescript +customPluginTransducer: async (originPlugin: IPublicTypePlugin, ctx: IPublicModelPluginContext, options): IPublicTypePlugin; +``` + +#### defaultOutlinePaneProps + +`@type {object}` + +大纲树插件面板默认 props + diff --git a/docs/docs/api/event.md b/docs/docs/api/event.md index 0eb8b97382..c2e86f7106 100644 --- a/docs/docs/api/event.md +++ b/docs/docs/api/event.md @@ -1,6 +1,6 @@ --- title: event - 事件 API -sidebar_position: 7 +sidebar_position: 10 --- > **@types** [IPublicApiEvent](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/event.ts)
@@ -25,6 +25,19 @@ on(event: string, listener: (...args: any[]) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) +### prependListener +监听事件，会在其他回调函数之前执行 + +```typescript +/** + * 监听事件，会在其他回调函数之前执行 + * @param event 事件名称 + * @param listener 事件回调 + */ +prependListener(event: string, listener: (...args: any[]) => void): IPublicTypeDisposable; +``` +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + ### off 取消监听事件 @@ -43,12 +56,13 @@ off(event: string, listener: (...args: any[]) => void): void; ```typescript /** - * 取消监听事件 - * cancel a monitor from a event + * 触发事件 + * emit a message for a event * @param event 事件名称 - * @param listener 事件回调 + * @param args 事件参数 + * @returns */ -off(event: string, listener: (...args: any[]) => void): void; +emit(event: string, ...args: any[]): void; ``` ## 使用示例 diff --git a/docs/docs/api/hotkey.md b/docs/docs/api/hotkey.md index a244b94c27..be6a3033d0 100644 --- a/docs/docs/api/hotkey.md +++ b/docs/docs/api/hotkey.md @@ -1,6 +1,6 @@ --- title: hotkey - 快捷键 API -sidebar_position: 5 +sidebar_position: 10 --- > **@types** [IPublicApiHotkey](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/hotkey.ts)
diff --git a/docs/docs/api/index.md b/docs/docs/api/index.md index 993c39e881..383b2952ce 100644 --- a/docs/docs/api/index.md +++ b/docs/docs/api/index.md @@ -29,12 +29,17 @@ sidebar_position: 0 - node-children 节点孩子 - props 属性集 - prop 属性 -- setting-prop-entry 设置属性 +- setting-field 设置属性 - setting-top-entry 设置属性集 - component-meta 物料元数据 - selection 画布选中 - detecting 画布 hover - history 操作历史 +- window 低代码设计器窗口模型 +- detecting 画布节点悬停模型 +- modal-nodes-manager 模态节点管理器模型 +- plugin-instance 插件实例 +- drop-location 拖拽放置位置模型 ## API 设计约定 diff --git a/docs/docs/api/init.md b/docs/docs/api/init.md index f8bf2cdbe3..dd84d9c00f 100644 --- a/docs/docs/api/init.md +++ b/docs/docs/api/init.md @@ -1,6 +1,6 @@ --- title: init - 初始化 API -sidebar_position: 10 +sidebar_position: 0 --- > **@since** v1.0.0 @@ -9,7 +9,7 @@ sidebar_position: 10 ## 模块简介 提供 init 等方法 ## 方法 -#### 1. init +#### init 初始化引擎 **方法定义** @@ -17,97 +17,7 @@ sidebar_position: 10 function init(container?: Element, options?: IPublicTypeEngineOptions): void ``` -**初始化引擎的参数** - -```typescript -interface IPublicTypeEngineOptions { - /** - * 指定初始化的 device - */ - device?: 'default' | 'mobile'; - /** - * 指定初始化的 deviceClassName，挂载到画布的顶层节点上 - */ - deviceClassName?: string; - /** - * 是否开启 condition 的能力，默认在设计器中不管 condition 是啥都正常展示 - */ - enableCondition?: boolean; - /** - * 开启拖拽组件时，即将被放入的容器是否有视觉反馈，默认值：false - */ - enableReactiveContainer?: boolean; - /** - * 关闭画布自动渲染，在资产包多重异步加载的场景有效，默认值：false - */ - disableAutoRender?: boolean; - /** - * 打开画布的锁定操作，默认值：false - */ - enableCanvasLock?: boolean; - /** - * 容器锁定后，容器本身是否可以设置属性，仅当画布锁定特性开启时生效，默认值为：false - */ - enableLockedNodeSetting?: boolean; - /** - * 开启画布上的鼠标事件的冒泡，默认值：false - */ - enableMouseEventPropagationInCanvas?: boolean; - /** - * 关闭拖拽组件时的虚线响应，性能考虑，默认值：false - */ - disableDetecting?: boolean; - /** - * 定制画布中点击被忽略的 selectors，默认值：undefined - */ - customizeIgnoreSelectors?: (defaultIgnoreSelectors: string[]) => string[]; - /** - * 禁止默认的设置面板，默认值：false - */ - disableDefaultSettingPanel?: boolean; - /** - * 禁止默认的设置器，默认值：false - */ - disableDefaultSetters?: boolean; - /** - * 当选中节点切换时，是否停留在相同的设置 tab 上，默认值：false - */ - stayOnTheSameSettingTab?: boolean; - /** - * 自定义 loading 组件 - */ - loadingComponent?: ComponentType; - - /** - * @default true - * JSExpression 是否只支持使用 this 来访问上下文变量，假如需要兼容原来的 'state.xxx'，则设置为 false - */ - thisRequiredInJSE?: boolean; - - /** - * @default false - * >= 1.0.14 - * 当开启组件未找到严格模式时，渲染模块不会默认给一个容器组件 - */ - enableStrictNotFoundMode?: boolean; - - /** - * 配置指定节点为根组件 - * >= 1.0.15 - */ - focusNodeSelector?: (rootNode: Node) => Node; - - /** - * 工具类扩展 - */ - appHelper?: { - utils?: {}; - } - - [key: string]: any; -} -``` -> 源码详见 [IPublicTypeEngineOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/engine-options.ts) +[**初始化引擎配置参数列表**](./configOptions) ## 使用示例 @@ -118,7 +28,7 @@ init(document.getElementById('engine'), { enableCondition: false, }); ``` -### + ### 默认打开移动端画布 ```typescript import { init } from '@alilc/lowcode-engine'; diff --git a/docs/docs/api/logger.md b/docs/docs/api/logger.md index 7493f34dc2..38d986258b 100644 --- a/docs/docs/api/logger.md +++ b/docs/docs/api/logger.md @@ -1,6 +1,6 @@ --- title: logger - 日志 API -sidebar_position: 9 +sidebar_position: 10 --- > **@types** [IPublicApiLogger](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/logger.ts)
diff --git a/docs/docs/api/material.md b/docs/docs/api/material.md index b52ad8cb27..0e09441275 100644 --- a/docs/docs/api/material.md +++ b/docs/docs/api/material.md @@ -1,6 +1,6 @@ --- title: material - 物料 API -sidebar_position: 2 +sidebar_position: 10 --- > **@types** [IPublicApiMaterial](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/material.ts)
@@ -39,7 +39,7 @@ setAssets(assets: IPublicTypeAssetsJson): void; 相关类型：[IPublicTypeAssetsJson](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/assets-json.ts) -##### 示例 +**示例** 直接在项目中引用 npm 包 ```javascript import { material } from '@alilc/lowcode-engine'; @@ -85,7 +85,7 @@ getAssets(): IPublicTypeAssetsJson; 相关类型：[IPublicTypeAssetsJson](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/assets-json.ts) -##### 示例 +**示例** ```typescript import { material } from '@alilc/lowcode-engine'; @@ -102,11 +102,11 @@ material.getAssets(); * @param incrementalAssets * @returns */ -loadIncrementalAssets(incrementalAssets: IPublicTypeAssetsJson): void; +loadIncrementalAssets(incrementalAssets: IPublicTypeAssetsJson): Promise
+> **@types** [IPublicModelEditorView](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/editor-view.ts)
+> **@since** v1.1.7 + +窗口编辑视图 + +## 类型定义 + +``` +import { IPublicModelPluginContext } from "./plugin-context"; + +export interface IPublicModelEditorView extends IPublicModelPluginContext {}; + +``` + +相关类型定义: [IPublicModelPluginContext](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/plugin-context.ts) diff --git a/docs/docs/api/model/modal-nodes-manager.md b/docs/docs/api/model/modal-nodes-manager.md index fbab6a83a5..fead53f0a1 100644 --- a/docs/docs/api/model/modal-nodes-manager.md +++ b/docs/docs/api/model/modal-nodes-manager.md @@ -71,7 +71,7 @@ hideModalNodes(): void; /** * 设置指定节点为可见态 * set specific model node as visible - * @param node Node + * @param node IPublicModelNode */ setVisible(node: IPublicModelNode): void; ``` @@ -86,7 +86,7 @@ setVisible(node: IPublicModelNode): void; /** * 设置指定节点为不可见态 * set specific model node as invisible - * @param node Node + * @param node IPublicModelNode */ setInvisible(node: IPublicModelNode): void; ``` diff --git a/docs/docs/api/model/node-children.md b/docs/docs/api/model/node-children.md index 10488a7337..5507fcbfb8 100644 --- a/docs/docs/api/model/node-children.md +++ b/docs/docs/api/model/node-children.md @@ -62,11 +62,11 @@ delete(node: IPublicModelNode): boolean; ```typescript /** - * 删除指定节点 - * delete the node + * 插入一个节点 + * insert the node * @param node */ -delete(node: IPublicModelNode): boolean; +insert(node: IPublicModelNode): boolean; ``` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) @@ -156,6 +156,21 @@ forEach(fn: (node: IPublicModelNode, index: number) => void): void; 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) +### reverse + +类似数组的 reverse + +```typescript +/** + * 类似数组的 reverse + * provide the same function with {Array.prototype.reverse} + */ +reverse(): IPublicModelNode[]; + +``` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + ### map diff --git a/docs/docs/api/model/node.md b/docs/docs/api/model/node.md index 333e973f01..43de96a33d 100644 --- a/docs/docs/api/model/node.md +++ b/docs/docs/api/model/node.md @@ -254,6 +254,8 @@ sidebar_position: 1 `@type {IPublicModelSettingTopEntry}` +相关章节：[设置器顶层操作对象](./setting-top-entry) + 相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts) ### visible @@ -645,3 +647,32 @@ setConditionalVisible(): void; ``` **@since v1.1.0** + +### getDOMNode +获取节点实例对应的 dom 节点 + +```typescript +/** + * 获取节点实例对应的 dom 节点 + */ +getDOMNode(): HTMLElement; + +``` + +### getRGL + +获取磁贴相关信息 + +```typescript +/** + * 获取磁贴相关信息 + */ +getRGL(): { + isContainerNode: boolean; + isEmptyNode: boolean; + isRGLContainerNode: boolean; + isRGLNode: boolean; + isRGL: boolean; + rglNode: IPublicModelNode | null; +} +``` \ No newline at end of file diff --git a/docs/docs/api/model/resource.md b/docs/docs/api/model/resource.md index 3977234545..a5fdeaf782 100644 --- a/docs/docs/api/model/resource.md +++ b/docs/docs/api/model/resource.md @@ -15,6 +15,12 @@ sidebar_position: 13 `@type {string}` +### id + +资源 id + +`@type {string}` + ### name 资源名字 @@ -44,3 +50,9 @@ sidebar_position: 13 资源配置信息 `@type {Object}` + +### config + +资源配置信息 + +`@type {Object}` \ No newline at end of file diff --git a/docs/docs/api/model/setting-field.md b/docs/docs/api/model/setting-field.md new file mode 100644 index 0000000000..226a0c7e5b --- /dev/null +++ b/docs/docs/api/model/setting-field.md @@ -0,0 +1,342 @@ +--- +title: SettingField +sidebar_position: 6 +--- +> **@types** [IPublicModelSettingField](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-field.ts)
+ +## 基本介绍 + +setter 设置器操作对象 + +## 属性 + +#### isGroup + +获取设置属性的 isGroup + +`@type {boolean}` + + +#### id + +获取设置属性的 id + +`@type {string}` + +#### name + +获取设置属性的 name + +`@type {string | number | undefined}` + +#### key + +获取设置属性的 key + +`@type {string | number | undefined}` + +#### path + +获取设置属性的 path + +`@type {(string | number)[]}` + +#### title + +获取设置属性的 title + +`@type {string}` + +#### setter + +获取设置属性的 setter + +`@type {IPublicTypeSetterType | null}` + +#### expanded + +获取设置属性的 expanded + +`@type {boolean}` + +#### extraProps + +获取设置属性的 extraProps + +`@type {IPublicTypeFieldExtraProps}` + +#### props + +`@type {IPublicModelSettingTopEntry}` + +相关章节：[设置器顶层操作对象](./setting-top-entry) + +相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts) + +#### node + +获取设置属性对应的节点实例 + +`@type {IPublicModelNode | null}` + + +#### parent + +获取设置属性的父设置属性 + +`@type {IPublicModelSettingTopEntry | IPublicModelSettingField}` + +相关章节：[设置器顶层操作对象](./setting-top-entry) + +相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts) + +#### top + +获取顶级设置属性 + +`@type {IPublicModelSettingTopEntry}` + +相关章节：[设置器顶层操作对象](./setting-top-entry) + +相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts) + +#### isSettingField + +是否是 SettingField 实例 + +`@type {boolean}` + +#### componentMeta + +`@type {IPublicModelComponentMeta}` + +相关类型：[IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts) + +#### items + +获取设置属性的 items + +`@type {Array
+ +## 基本介绍 + +setter 设置器顶层操作对象 + +## 属性 + +#### node + +返回所属的节点实例 + +`@type {IPublicModelNode | null}` + +## 方法 + +#### get + +获取子级属性对象 + +``` +/** + * 获取子级属性对象 + * @param propName + * @returns + */ +get(propName: string | number): IPublicModelSettingField | null; +``` +相关章节：[设置器操作对象](./setting-field) + +相关类型：[IPublicModelSettingField](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-field.ts) + + +#### getPropValue + +获取指定 propName 的值 + +``` +/** + * 获取指定 propName 的值 + * @param propName + * @returns + */ +getPropValue(propName: string | number): any; +``` + +#### setPropValue + +设置指定 propName 的值 + +``` +/** + * 设置指定 propName 的值 + * @param propName + * @param value + */ +setPropValue(propName: string | number, value: any): void; +``` + +#### clearPropValue + +清除指定 propName 的值 + +``` +/** + * 清除指定 propName 的值 + * @param propName + */ +clearPropValue(propName: string | number): void; +``` \ No newline at end of file diff --git a/docs/docs/api/model/simulatorRender.md b/docs/docs/api/model/simulatorRender.md new file mode 100644 index 0000000000..f5bacec493 --- /dev/null +++ b/docs/docs/api/model/simulatorRender.md @@ -0,0 +1,38 @@ +--- +title: SimulatorRender +sidebar_position: 6 +--- +> **@types** [IPublicModelSimulatorRender](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/simulator-render.ts)
+> **@since** v1.0.0 + +## 基本介绍 + +画布节点选中模型 + +## 属性 +### components + +画布组件列表 + +```typescript +/** + * 画布组件列表 + */ +components: { + [key: string]: any; +} +``` + +## 方法 + +### rerender + +触发画布重新渲染 + +```typescript +/** + * 触发画布重新渲染 + */ +rerender: () => void; +``` + diff --git a/docs/docs/api/model/window.md b/docs/docs/api/model/window.md index f102c0cab3..9db39996fa 100644 --- a/docs/docs/api/model/window.md +++ b/docs/docs/api/model/window.md @@ -38,6 +38,25 @@ sidebar_position: 12 关联模型 [IPublicModelResource](./resource) +### currentEditorView +窗口当前视图 + +`@type {IPublicModelEditorView}` + +关联模型 [IPublicModelEditorView](./editor-view) + +**@since v1.1.7** + +### editorViews + +窗口所有视图 + +`@type {IPublicModelEditorView[]}` + +关联模型 [IPublicModelEditorView](./editor-view) + +**@since v1.1.7** + ## 方法 ### importSchema @@ -74,3 +93,15 @@ onChangeViewType(fn: (viewName: string) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + +### onSave + +窗口视图保存事件 + +``` +onSave(fn: () => void): IPublicTypeDisposable; +``` + +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + +**@since v1.1.7** diff --git a/docs/docs/api/plugins.md b/docs/docs/api/plugins.md index e35411d3a8..df025f49e9 100644 --- a/docs/docs/api/plugins.md +++ b/docs/docs/api/plugins.md @@ -1,6 +1,6 @@ --- title: plugins - 插件 API -sidebar_position: 4 +sidebar_position: 2 --- > **@types** [IPublicApiPlugins](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/plugins.ts)
> **@since** v1.0.0 diff --git a/docs/docs/api/project.md b/docs/docs/api/project.md index 0c7213aaca..54bd1474cf 100644 --- a/docs/docs/api/project.md +++ b/docs/docs/api/project.md @@ -1,6 +1,6 @@ --- title: project - 模型 API -sidebar_position: 3 +sidebar_position: 10 --- ## 模块简介 @@ -182,19 +182,6 @@ importSchema(schema?: IPublicTypeProjectSchema): void; ``` 相关类型：[IPublicTypeProjectSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/project-schema.ts) -### getCurrentDocument -获取当前的 document - -```typescript -/** - * 获取当前的 document - * get current document - * @returns - */ -getCurrentDocument(): IPublicModelDocumentModel | null; -``` -相关类型：[IPublicModelDocumentModel](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/document-model.ts) - ### addPropsTransducer 增加一个属性的管道处理函数 @@ -214,7 +201,7 @@ addPropsTransducer( - [IPublicTypePropsTransducer](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/props-transducer.ts) - [IPublicEnumTransformStage](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/enum/transform-stage.ts) -#### 示例 +**示例** 在保存的时候删除每一个组件的 props.hidden ```typescript import { project } from '@alilc/lowcode-engine'; @@ -252,6 +239,35 @@ setI18n(value: object): void; **@since v1.0.17** +### setConfig +设置当前项目配置 + +```typescript +/** + * 设置当前项目配置 + * set config for this project + * @param value object + * @since v1.1.4 + */ + setConfig(value: IPublicTypeAppConfig): void; + setConfig
> **@since** v1.0.0 @@ -145,7 +145,7 @@ export default class AltStringSetter extends React.PureComponent
> **@since** v1.0.0 @@ -20,7 +20,7 @@ sidebar_position: 3 */ set(key: string, value: any): void; ``` -#### 示例 +**示例** 设置若干用于画布渲染的变量，比如画布大小、locale 等。 以设置画布大小为例： @@ -50,11 +50,11 @@ get(key: string): any; ``` ### rerender -刷新渲染画布 +触发组件构建，并刷新渲染画布 ```typescript /** - * 刷新渲染画布 + * 触发组件构建，并刷新渲染画布 * make simulator render again */ rerender(): void; diff --git a/docs/docs/api/skeleton.md b/docs/docs/api/skeleton.md index 6c8d898ff1..396fad9e9e 100644 --- a/docs/docs/api/skeleton.md +++ b/docs/docs/api/skeleton.md @@ -1,6 +1,6 @@ --- title: skeleton - 面板 API -sidebar_position: 1 +sidebar_position: 10 --- > **@types** [IPublicApiSkeleton](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/skeleton.ts)
> **@since** v1.0.0 @@ -69,6 +69,7 @@ skeleton.add({ props: { align: "left", icon: "wenjian", + title: '标题', // 图标下方展示的标题 description: "JS 面板", }, panelProps: { @@ -90,7 +91,7 @@ Widget 形式是直接渲染在当前编辑器的对应位置上。如 demo 中 接入可以参考代码： ```javascript -import {skeleton} from "@alilc/lowcode-engine"; +import { skeleton } from "@alilc/lowcode-engine"; // 注册 logo 面板 skeleton.add({ area: "topArea", @@ -119,18 +120,15 @@ skeleton.add({ area: "leftArea", type: "Dock", name: "opener", - content: Opener, // Widget 组件实例 - contentProps: { // Widget 插件 props - xxx: "1", - }, props: { + icon: Icon, // Icon 组件实例 align: "bottom", - }, - onClick: function() { - // 打开外部链接 - window.open('https://lowcode-engine.cn'); - // 显示 widget - skeleton.showWidget('xxx'); + onClick: function () { + // 打开外部链接 + window.open('https://lowcode-engine.cn'); + // 显示 widget + skeleton.showWidget('xxx'); + } } }); ``` @@ -159,7 +157,7 @@ IWidgetBaseConfig 定义如下： | --- | --- | --- | | name | 面板名称 | | | area | 扩展区位置，可选值：'topArea' | 'leftArea' | 'rightArea' | 'toolbar' | 'bottomArea' | 'mainArea' | | -| type | 面板类型，可选值：'Widget' | 'PanelDock' | 'Panel' | 详见前文中对**展示类型**的描述 | +| type | 面板类型，可选值：'Widget' | 'PanelDock' | 'Panel' | Dock | 详见前文中对**展示类型**的描述 | | content | 面板的实现类/节点，类型是 ReactClass | ReactElement | | | props | 面板属性 | align: 'top' | 'bottom' | 'left' | 'center' | 'right'; // 指定面板 icon 位置区域
icon: string | ReactElement; // icon 为字符串时，请确定当前 fusion 主题包中包含该 icon
description: string;
condition: Function; // 指定当前面板的显影状态 | | contentProps | 面板的实现类/节点的参数 | | @@ -181,6 +179,21 @@ IWidgetBaseConfig 定义如下： remove(config: IPublicTypeWidgetBaseConfig): number | undefined; ``` +### getPanel + +获取面板实例 + +```typescript +/** + * 获取面板实例 + * @param name 面板名称 + */ +getPanel(name: string): IPublicModelSkeletonItem | undefined; +``` + +相关类型：[IPublicModelSkeletonItem](https://github.com/alibaba/lowcode-engine/blob/main/packages/shell/src/model/skeleton-item.ts) + +@since v1.1.10 ### showPanel @@ -283,6 +296,85 @@ showArea(areaName: string): void; */ hideArea(areaName: string): void; ``` + +### getAreaItems + +获取某个区域下的所有面板实例 + +```typescript +/** + * 获取某个区域下的所有面板实例 + * @param areaName IPublicTypeWidgetConfigArea + */ +getAreaItems(areaName: IPublicTypeWidgetConfigArea): IPublicModelSkeletonItem[] | undefined; +``` + +相关类型：[IPublicModelSkeletonItem](https://github.com/alibaba/lowcode-engine/blob/main/packages/shell/src/model/skeleton-item.ts) + + + +### registerConfigTransducer + +注册一个面板的配置转换器（transducer）。 + +```typescript +/** + * 注册一个面板的配置转换器（transducer）。 + * Registers a configuration transducer for a panel. + * @param {IPublicTypeConfigTransducer} transducer + * - 要注册的转换器函数。该函数接受一个配置对象（类型为 IPublicTypeSkeletonConfig）作为输入，并返回修改后的配置对象。 + * - The transducer function to be registered. This function takes a configuration object + * + * @param {number} level + * - 转换器的优先级。优先级较高的转换器会先执行。 + * - The priority level of the transducer. Transducers with higher priority levels are executed first. + * + * @param {string} [id] + * - （可选）转换器的唯一标识符。用于在需要时引用或操作特定的转换器。 + * - (Optional) A unique identifier for the transducer. Used for referencing or manipulating a specific transducer when needed. + */ +registerConfigTransducer(transducer: IPublicTypeConfigTransducer, level: number, id?: string): void; +``` + +使用示例 + +```typescript +import { IPublicModelPluginContext, IPublicTypeSkeletonConfig } from '@alilc/lowcode-types'; + +function updatePanelWidth(config: IPublicTypeSkeletonConfig) { + if (config.type === 'PanelDock') { + return { + ...config, + panelProps: { + ...(config.panelProps || {}), + width: 240, + }, + } + } + + return config; +} + +const controlPanelWidthPlugin = (ctx: IPublicModelPluginContext) => { + const { skeleton } = ctx; + (skeleton as any).registerConfigTransducer?.(updatePanelWidth, 1, 'update-panel-width'); + + return { + init() {}, + }; +}; + +controlPanelWidthPlugin.pluginName = 'controlPanelWidthPlugin'; +controlPanelWidthPlugin.meta = { + dependencies: [], + engines: { + lowcodeEngine: '^1.2.3', // 插件需要配合 ^1.0.0 的引擎才可运行 + }, +}; + +export default controlPanelWidthPlugin; +``` + ## 事件 ### onShowPanel @@ -295,7 +387,7 @@ hideArea(areaName: string): void; * @param listener * @returns */ -onShowPanel(listener: (...args: any[]) => void): IPublicTypeDisposable; +onShowPanel(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) @@ -311,11 +403,38 @@ onShowPanel(listener: (...args: any[]) => void): IPublicTypeDisposable; * @param listener * @returns */ -onHidePanel(listener: (...args: any[]) => void): IPublicTypeDisposable; +onHidePanel(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; +``` + +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + +### onDisableWidget + +监听 Widget 实例 Disable 事件 + +```typescript +/** + * 监听 Widget 实例 Disable 事件 + * @param listener + */ +onDisableWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) +### onEnableWidget + +监听 Widget 实例 Enable 事件 + +```typescript +/** + * 监听 Widget 实例 Enable 事件 + * @param listener + */ +onEnableWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; +``` + +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) ### onShowWidget @@ -328,7 +447,7 @@ onHidePanel(listener: (...args: any[]) => void): IPublicTypeDisposable; * @param listener * @returns */ -onShowWidget(listener: (...args: any[]) => void): IPublicTypeDisposable; +onShowWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) @@ -344,7 +463,7 @@ onShowWidget(listener: (...args: any[]) => void): IPublicTypeDisposable; * @param listener * @returns */ -onHideWidget(listener: (...args: any[]) => void): IPublicTypeDisposable; +onHideWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) @@ -420,7 +539,7 @@ skeleton.disableWidget('sourceEditor'); import { skeleton } from '@alilc/lowcode-engine'; skeleton.add({ - name: 'bottomAreaPanelName', + name: 'bottomAreaPanelName', area: 'bottomArea', type: 'Panel', content: () => 'demoText', diff --git a/docs/docs/api/workspace.md b/docs/docs/api/workspace.md index 9d99609270..74f7d6950f 100644 --- a/docs/docs/api/workspace.md +++ b/docs/docs/api/workspace.md @@ -1,6 +1,6 @@ --- title: workspace - 应用级 API -sidebar_position: 12 +sidebar_position: 10 --- > **[@experimental](./#experimental)**
@@ -37,6 +37,16 @@ get plugins(): IPublicApiPlugins 关联模型 [IPublicApiPlugins](./plugins) +### skeleton + +应用级别的面板管理 + +```typescript +get skeleton(): IPublicApiSkeleton +``` + +关联模型 [IPublicApiSkeleton](./skeleton) + ### windows 当前设计器的编辑窗口 @@ -77,14 +87,21 @@ registerResourceType(resourceTypeModel: IPublicTypeResourceType): void; setResourceList(resourceList: IPublicResourceList) {} ``` -相关类型：[IPublicResourceOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-options.ts) +相关类型：[IPublicResourceData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-list.ts) ### openEditorWindow 打开视图窗口 ```typescript -openEditorWindow(resourceName: string, title: string, options: Object, viewName?: string): void; +/** + * 打开视图窗口 + * @deprecated + */ +openEditorWindow(resourceName: string, id: string, extra: Object, viewName?: string, sleep?: boolean): Promise
/* 组件内容 */
;
+};
+```
+
+**定义全局插件**：定义一个函数，这个函数会在插件被注册时调用。这个函数通常接受一个上下文对象 **ctx**，它提供了对引擎功能的访问。
+
+```javascript
+const globalPlugin = (ctx) => {
+ const { skeleton } = ctx;
+
+ skeleton.add({
+ type: 'PanelDock',
+ name: 'datapool',
+ content: ProvideViewPluginContext((props) => {
+ // 组件内容
+ return (
+ 自定义 react 标签
, content)
+ }
+ })
+ }
+ }
+}
+
+pluginX6DesignerExtension.pluginName = 'plugin-x6-designer-extension';
+
+export default pluginX6DesignerExtension;
+```
+x6Designer为图实例暴露出来的一些接口，可基于此进行一些图的必要插件的封装，整个插件的封装完全follow低代码引擎的插件，详情可参考 https://lowcode-engine.cn/site/docs/guide/expand/editor/pluginWidget
+
+## 开发物料
+```bash
+npm init @alilc/element your-material-demo
+```
+
+
+仓库初始化完成
+
+
+接下来即可编写物料内容了
+图物料与低代码的dom场景存在画布的差异，因此暂不支持物料单独调试，须通过项目demo进行物料调试
+
+### 资产描述
+```bash
+npm run lowcode:build
+```
+如果物料是个React组件，则在执行上述命令时会自动生成对应的meta.ts，但图物料很多时候并非一个React组件，因此须手动生产meta.ts
+
+可参考： https://github.com/alibaba/lowcode-materials/blob/main/packages/graph-x6-materials/lowcode/send-email/meta.ts
+同时会自动生成物料描述文件
+
+### 物料调试
+#### 物料侧
+物料想要支持被项目动态inject调试，须在build.lowcode.js中加入
+```javascript
+[
+ '@alilc/build-plugin-alt',
+ {
+ type: 'component',
+ inject: true,
+ library
+ },
+]
+```
+
+
+本地启动
+```bash
+npm run lowcode:dev
+```
+#### 项目侧
+通过@alilc/lce-graph-core加载物料的天然支持了debug，因此无须特殊处理。
+若项目中自行加载，则参考 https://lowcode-engine.cn/site/docs/guide/expand/editor/cli
+项目访问地址后拼接query "?debug"即可进入物料调试
+
+
+
diff --git a/docs/docs/guide/expand/editor/metaSpec.md b/docs/docs/guide/expand/editor/metaSpec.md
index 2f874925fd..dda16a9cb3 100644
--- a/docs/docs/guide/expand/editor/metaSpec.md
+++ b/docs/docs/guide/expand/editor/metaSpec.md
@@ -460,7 +460,6 @@ import parse from '@alilc/lowcode-material-parser';
{
name: 'back',
title: ' ',
- virtual: () => true,
display: 'plain',
setter: BackwardSetter,
}
diff --git a/docs/docs/guide/expand/editor/pluginContextMenu.md b/docs/docs/guide/expand/editor/pluginContextMenu.md
index e9dbdf3c48..962c913e7e 100644
--- a/docs/docs/guide/expand/editor/pluginContextMenu.md
+++ b/docs/docs/guide/expand/editor/pluginContextMenu.md
@@ -12,23 +12,22 @@ sidebar_position: 6
```typescript
import { plugins } from '@alilc/lowcode-engine';
-import { IPublicModelPluginContext } from '@alilc/lowcode-types';
+import { IPublicModelPluginContext, IPublicModelNode } from '@alilc/lowcode-types';
import { Icon, Message } from '@alifd/next';
const addHelloAction = (ctx: IPublicModelPluginContext) => {
return {
async init() {
- const { addBuiltinComponentAction } = ctx.material;
- addBuiltinComponentAction({
+ ctx.material.addBuiltinComponentAction({
name: 'hello',
content: {
icon: **对于 Window 环境来说，之后所有需要执行命令的操作都是在 WSL 终端执行的。** diff --git a/docs/docs/participate/config.md b/docs/docs/participate/config.md deleted file mode 100644 index 1d70a7a89e..0000000000 --- a/docs/docs/participate/config.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 工程化配置 -sidebar_position: 3 ---- -目前引擎体系共包含 2 个 js 文件 (配套 2 个 css)，即： - - -```html - - - - - - - - - -``` - -> 注，这里的版本号是示例，请尽量选用最新版 - -工程化配置我们进行了统一，具体如下： -```shell -{ - "entry": { - ... - }, - "library": "...", - "libraryTarget": "umd", - "externals": { - "react": "var window.React", - "react-dom": "var window.ReactDOM", - "prop-types": "var window.PropTypes", - "@alilc/lowcode-engine": "var window.AliLowCodeEngine", - "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt", - "moment": "var moment", - "lodash": "var _", - "@alifd/next": "var Next" - }, - "polyfill": false, - "outputDir": "dist", - "vendor": false, - "ignoreHtmlTemplate": true, - "sourceMap": true, - "plugins": [ - "build-plugin-react-app", - ["build-plugin-fusion", { - }], - ["build-plugin-moment-locales", { - "locales": ["zh-CN"] - }], - "./build.plugin.js" - ] -} - -``` -总结一下，有 2 点： - -1. **都不包含 polyfill，**需要应用级别单独引入 polyfill，推荐动态 polyfill -2. **都不包含 lodash / moment / next** - - -#### 前置依赖资源： -```html - - - - - - -``` - - -#### 所有资源： -```html - - - - - - - - - - - - -``` diff --git a/docs/docs/participate/doc.md b/docs/docs/participate/doc.md deleted file mode 100644 index 1e19918db5..0000000000 --- a/docs/docs/participate/doc.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: 参与文档贡献 -sidebar_position: 3 ---- - -## 基本原则 - -### 维护方式 - -- 官方文档通过 github 管理文档源，官网文档与[主仓库 develop 分支](https://github.com/alibaba/lowcode-engine/tree/develop/docs)保持同步。 -- 点击每篇文档下发的 `编辑此页` 可直接定位到 github 中位置。 -- 欢迎 PR，文档 PR 也会作为贡献者贡献，会用于贡献度统计。 -- **文档同步到官方网站由官方人员进行操作**，如有需要可以通过 issue 或 贡献者群与相关人员沟通。 -- 为了提供更好的阅读和使用体验，文档中的图片文件会定期转换成可信的 CDN 地址。 - -### PR 提交注意事项 - -- 指向 develop 分支。 -- 涉及到图片的，需附在文档同级的 img 目录下，通过相对地址引用。 - -### 文档格式 - -本项目文档参考[文档编写指南](https://github.com/sparanoid/chinese-copywriting-guidelines)。 - -使用 vscode 进行编辑的朋友可以安装 vscode 插件 [huacnlee.autocorrect](https://github.com/huacnlee/autocorrect) 辅助文档 lint。 diff --git a/docs/docs/participate/index.md b/docs/docs/participate/index.md index ea87651ffd..e09f2ddad2 100644 --- a/docs/docs/participate/index.md +++ b/docs/docs/participate/index.md @@ -1,31 +1,118 @@ --- -title: 贡献者指南 +title: 参与贡献 sidebar_position: 0 --- -### 首个 Pull Request -在写第一个 Pull Request？你可以从这一系列视频中学习怎么做： -[How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) -为了使你能够快速上手和熟悉贡献流程，我们这里有个列表 [good first issues](https://github.com/alibaba/lowcode-engine/issues?q=is:open+is:issue+label:%22good+first+issue%22)，里面有相对没那么笼统的漏洞，从这开始是个不错的选择。 +### 环境准备 + +开发 LowcodeEngine 需要 Node.js 16+。 + +推荐使用 nvm 管理 Node.js，避免权限问题的同时，还能够随时切换当前使用的 Node.js 的版本。 + +### 贡献低代码引擎 + +#### clone 项目 + +``` +git clone git@github.com:alibaba/lowcode-engine.git +cd lowcode-engine +``` + +#### 安装依赖并构建 + +``` +npm install && npm run setup +``` + +#### 调试环境配置 + +本质上是将 demo 页面引入的几个 js/css 代理到 engine 项目，可以使用趁手的代理工具，这里推荐 [XSwitch](https://chrome.google.com/webstore/detail/xswitch/idkjhjggpffolpidfkikidcokdkdaogg?hl=en-US)。 + +本地开发代理规则如下： +```json +{ + "proxy": [ + [ + "https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/engine-core.js", + "http://localhost:5555/js/AliLowCodeEngine.js" + ], + [ + "https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/engine-core.css", + "http://localhost:5555/css/AliLowCodeEngine.css" + ], + [ + "https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/react-simulator-renderer.js", + "http://localhost:5555/js/ReactSimulatorRenderer.js" + ], + [ + "https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/react-simulator-renderer.css", + "http://localhost:5555/css/ReactSimulatorRenderer.css" + ] + ] +} +``` + +#### 开发 + +``` +npm start +``` + +选择一个环境进行调试，例如[低代码引擎在线 DEMO](https://lowcode-engine.cn/demo/demo-general/index.html) + +开启代理之后，就可以进行开发调试了。 -如果你想解决一个 issue，请确定检查了该 issue 下的评论以防有人正在处理它。如果目前没人在处理该 issue，那么请留下评论去表明你想处理该 issue 以便其他人不会意外重复你的工作。 -如果有人留言表明要处理该 issue 但是超过两周没有跟进，你可以接手工作，不过也应该留言说明。 +### 贡献低代码引擎文档 -### 提交 Pull Request -核心团队时刻关注 pull requests，我们会先评审你的 pull request，之后可能会合并，可能会要求再次更改，也可能会关闭该 pull request 并对此作出解释。我们会尽力全程更新和反馈。 +#### 开发文档 -**提交 pull request 前**，请确保完成以下步骤： +在 lowcode-engine 目录下执行下面命令 +``` +cd docs -1. Fork [此仓库](https://github.com/alibaba/lowcode-engine)，从 main 创建分支。 -2. 在仓库根目录下执行 yarn。 -3. 如果你修复了 bug 或者添加了代码，而这些内容需要测试，请添加测试！ -4. 确保通过测试套件（yarn test）。 -5. 请签订贡献者许可证协议（Contributor License Agreement）。 - > 如已签署 CLA 仍被提示需要签署，[解决办法](/site/docs/faq/faq021) +npm start +``` -### 核心贡献者交流 -如果你想长期参与到项目维护中，我们提供了一个核心贡献者交流群。 +#### 维护方式 +- 官方文档通过 github 管理文档源，官网文档与[主仓库 develop 分支](https://github.com/alibaba/lowcode-engine/tree/develop/docs)保持同步。 +- 点击每篇文档下发的 `编辑此页` 可直接定位到 github 中位置。 +- 欢迎 PR，文档 PR 也会作为贡献者贡献，会用于贡献度统计。 +- **文档同步到官方网站由官方人员进行操作**，如有需要可以通过 issue 或 贡献者群与相关人员沟通。 +- 为了提供更好的阅读和使用体验，文档中的图片文件会定期转换成可信的 CDN 地址。 + +#### 文档格式 + +本项目文档参考[文档编写指南](https://github.com/sparanoid/chinese-copywriting-guidelines)。 + +使用 vscode 进行编辑的朋友可以安装 vscode 插件 [huacnlee.autocorrect](https://github.com/huacnlee/autocorrect) 辅助文档 lint。 + + +### 贡献低代码引擎生态 + +相关源码详见[NPM 包对应源码位置汇总](/site/docs/guide/appendix/npms) + +开发调试方式详见[低代码生态脚手架 & 调试机制](/site/docs/guide/expand/editor/cli) + +### 发布 + +PR 被合并之后，我们会尽快发布相关的正式版本或者 beta 版本。 + +### 加入 Contributor 群 +提交过 Bugfix 或 Feature 类 PR 的同学，如果有兴趣一起参与维护 LowcodeEngine，我们提供了一个核心贡献者交流群。 1. 可以通过[填写问卷](https://survey.taobao.com/apps/zhiliao/4YEtu9gHF)的方式，参与到其中。 -2. 填写问卷后加微信号 `wxidvlalalalal` 说明一下。 +2. 填写问卷后加微信号 `wxidvlalalalal` （注明 github id）我们会拉你到群里。 + +如果你不知道可以贡献什么，可以到源码里搜 TODO 或 FIXME 找找。 + +为了使你能够快速上手和熟悉贡献流程，我们这里有个列表 [good first issues](https://github.com/alibaba/lowcode-engine/issues?q=is:open+is:issue+label:%22good+first+issue%22)，里面有相对没那么笼统的漏洞，从这开始是个不错的选择。 + +### PR 提交注意事项 + +- lowcode-engine 仓库建议从 develop 创建分支，PR 指向 develop 分支。 +- 其他仓库从 main 分支创建分支，PR 指向 main 分支 +- 如果你修复了 bug 或者添加了代码，而这些内容需要测试，请添加测试！ +- 确保通过测试套件（yarn test）。 +- 请签订贡献者许可证协议（Contributor License Agreement）。 + > 如已签署 CLA 仍被提示需要签署，[解决办法](/site/docs/faq/faq021) \ No newline at end of file diff --git a/docs/docs/participate/meet.md b/docs/docs/participate/meet.md new file mode 100644 index 0000000000..23226bf1cd --- /dev/null +++ b/docs/docs/participate/meet.md @@ -0,0 +1,55 @@ +--- +title: 开源社区例会 +sidebar_position: 0 +--- + +## **简介** + +低代码引擎开源社区致力于共同推动低代码技术的发展和创新。本社区汇集了低代码技术领域的开发者、技术专家和行业观察者，通过定期的例会来交流思想、分享经验、讨论新技术，并探索低代码技术的未来发展方向。 + +## 参与要求 + +为了确保例会的质量和效果，我们建议以下人员参加： + +- **已参与低代码引擎贡献的成员**：那些对低代码引擎有实际贡献的社区成员。 +- **参考贡献指南**：可查阅[贡献指南](https://lowcode-engine.cn/site/docs/participate/)获取更多信息。 +- **提供过优秀建议的成员**：那些在过去为低代码引擎提供过有价值建议的成员。 + +## **时间周期** + +- **周期性**：月例会 + +### **特别说明** + +- 例会周期可根据成员反馈进行调整。如果讨论的议题较多，可增加例会频率；若议题较少，单次例会可能取消。若多次取消，可能会暂停例会。 + +## **例会流程** + +### **准备阶段** + +- **定期确定议题**：会前一周确定下一次会议的议题。 +- **分发会议通知**：提前发送会议时间、议程和参与方式。 + +### **会议阶段** + +- **开场和介绍**：简短开场和自我介绍，特别是新成员加入时。 +- **议题讨论**：按照议程进行议题讨论，每个议题分配一定时间，并留足够时间供讨论和提问。 +- **记录要点和决定**：记录讨论要点、决策和任何行动事项。 + +### **后续阶段** + +- **分享会议纪要**：会后将会议纪要和行动计划分发给所有成员。 +- **执行和跟进**：根据会议中的讨论和决策执行相关任务，并在下次会议中进行跟进汇报。 + +## **开源例会议题** + +开源例会议题包括但不限于： + +- **共建低代码行业发展**：探讨通过开源社区合作加速低代码行业发展。 +- **改进建议和反馈收集**：讨论社区成员对低代码引擎的使用体验和改进建议。 +- **前端技术与低代码的结合**：针对前端开发者，讨论将前端技术与低代码引擎结合的方式。 +- **低代码业务场景和经验分享**：邀请社区成员分享低代码引擎的实际应用经验。 +- **低代码技术原理介绍**：深入理解低代码引擎的技术原理和实现方式。 +- **低代码引擎的最新进展**：分享低代码引擎的最新进展，包括新版本发布和新功能实现等。 +- **低代码技术的未来展望**：讨论低代码技术的未来发展方向。 +- **最新低代码平台功能和趋势分析**：分享和讨论当前低代码平台的新功能、趋势和发展方向。 \ No newline at end of file diff --git a/docs/docs/participate/prepare.md b/docs/docs/participate/prepare.md deleted file mode 100644 index c0e1d5880e..0000000000 --- a/docs/docs/participate/prepare.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 调试环境配置 -sidebar_position: 1 ---- -低代码引擎的核心仓库是不包含任何物料、插件、setter 的，它本身用于生成低代码引擎的主包。 - -如果您需要对低代码的主包进行开发和调试，需要用到本文里介绍的知识。 - -如果您需要对低代码编辑器进行定制，您可能只需要 clone [lowcode-demo 项目](https://github.com/alibaba/lowcode-demo)并进行修改，参考“[配置低代码扩展点](/site/docs/guide/expand/editor/summary)”章节。 - -> 前置条件： -> node 推荐使用 16.18.0（14.x 也可以） - -### 1. 拉取代码，启动项目 -```bash -git clone git@github.com:alibaba/lowcode-engine.git -cd lowcode-engine -npm install && npm run setup -npm start - - -git clone git@github.com:alibaba/lowcode-demo.git -cd lowcode-demo -npm install && npm start -``` - -### 2. 配置资源代理 -本质上是将 demo 页面引入的几个 js/css 代理到 engine 项目，可以使用趁手的代理工具，这里推荐 [XSwitch](https://chrome.google.com/webstore/detail/xswitch/idkjhjggpffolpidfkikidcokdkdaogg?hl=en-US)。 - -本地开发代理规则如下： -```json -{ - "proxy": [ - [ - "https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/engine-core.js", - "http://localhost:5555/js/engine-core.js" - ], - [ - "https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/engine-core.css", - "http://localhost:5555/css/engine-core.css" - ], - [ - "https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/react-simulator-renderer.js", - "http://localhost:5555/js/react-simulator-renderer.js" - ], - [ - "https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/react-simulator-renderer.css", - "http://localhost:5555/css/react-simulator-renderer.css" - ], - [ - "https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/rax-simulator-renderer.js", - "http://localhost:5555/js/rax-simulator-renderer.js" - ], - [ - "https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/rax-simulator-renderer.css", - "http://localhost:5555/css/rax-simulator-renderer.css" - ], - ] -} -``` - -### 3. 本地调试物料/插件/设置器 - -详见[低代码生态脚手架 & 调试机制](/site/docs/guide/expand/editor/cli) diff --git a/docs/docs/specs/lowcode-spec.md b/docs/docs/specs/lowcode-spec.md index 7deeedc2c9..c277214106 100644 --- a/docs/docs/specs/lowcode-spec.md +++ b/docs/docs/specs/lowcode-spec.md @@ -25,7 +25,7 @@ sidebar_position: 0 ### 1.3 版本号 -1.0.0 +1.1.0 ### 1.4 协议版本号规范（A） @@ -124,7 +124,8 @@ sidebar_position: 0 - config: { Object } 当前应用配置信息 - meta: { Object } 当前应用元数据信息 - dataSource: { Array } 当前应用的公共数据源 - +- router: { Object } 当前应用的路由配置信息 +- pages: { Array } 当前应用的所有页面信息 描述举例： @@ -163,6 +164,7 @@ sidebar_position: 0 } }], "componentsTree": [{ // 描述内容，值类型 Array + "id": "page1", "componentName": "Page", // 单个页面，枚举类型 Page|Block|Component "fileName": "Page1", "props": {}, @@ -213,7 +215,7 @@ sidebar_position: 0 "css": "body {font-size: 12px;} .table { width: 100px;}", "config": { // 当前应用配置信息 "sdkVersion": "1.0.3", // 渲染模块版本 - "historyMode": "hash", // 浏览器路由：browser 哈希路由：hash + "historyMode": "hash", // 不推荐，推荐在 router 字段中配置 "targetRootID": "J_Container", "layout": { "componentName": "BasicLayout", @@ -250,7 +252,23 @@ sidebar_position: 0 "i18n-jwg27yo4": "Hello", "i18n-jwg27yo3": "China" } - } + }, + "router": { + "baseUrl": "/", + "historyMode": "hash", // 浏览器路由：browser 哈希路由：hash + "routes": [ + { + "path": "home", + "page": "page1" + } + ] + }, + "pages": [ + { + "id": "page1", + "treeId": "page1" + } + ] } ``` @@ -481,7 +499,6 @@ try { - 说明：组件即将从 DOM 中移除 - componentDidCatch(error, info) - 说明：组件捕获到异常 -- Rax：目前没有使用生命周期，使用 hooks 替代生命周期； 该对象由一系列 key-value 组成，key 为生命周期方法名，value 为 JSFunction 的描述，详见下方示例： @@ -1252,7 +1269,7 @@ export const recordEvent = function(logkey, gmkey, gokey, reqMethod) { ### 2.8 当前应用配置信息（AA） -用于描述当前应用的配置信息，比如当前应用的路由模式、Shell/Layout、主题等。 +用于描述当前应用的配置信息，比如当前应用的 Shell/Layout、主题等。 > 注意：该字段为扩展字段，消费方式由各自场景自己决定，包括运行时和出码。 @@ -1267,6 +1284,192 @@ export const recordEvent = function(logkey, gmkey, gokey, reqMethod) { 用于描述当前应用的公共数据源，数据结构跟容器结构里的 ComponentDataSource 保持一致。 在运行时 / 出码使用时，API 和应用级数据源 API 保持一致，都是 `this.dataSourceMap['globalDSName'].load()` +### 2.11 当前应用的路由信息（AA） + +用于描述当前应用的路径 - 页面的关系。通过声明路由信息，应用能够在不同的路径里显示对应的页面。 + +##### 2.11.1 Router （应用路由配置）结构描述 + +路由配置的结构说明： + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 备注 | +| ----------- | ---------------------- | ------------------------------- | ------ | --------- | ------ | +| baseName | 应用根路径 | String | - | '/' | 选填｜ | +| historyMode | history 模式 | 枚举类型，包括'browser'、'hash' | - | 'browser' | 选填｜ | +| routes | 路由对象组，路径与页面的关系对照组 | Route[] | - | - | 必填｜ | + + +##### 2.11.2 Route （路由记录）结构描述 + +路由记录，路径与页面的关系对照。Route 的结构说明： + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 备注 | +| -------- | ---------------------------- | ---------------------------- | ------ | ------ | ---------------------------------------------------------------------- | +| name | 该路径项的名称 | String | - | - | 选填 | +| path | 路径 | String | - | - | 必填，路径规则详见下面说明 | +| query | 路径的 query 参数 | Object | - | - | 选填 | +| page | 路径对应的页面 ID | String | - | - | 选填，page 与 redirect 字段中必须要有有一个存在 | +| redirect | 此路径需要重定向到的路由信息 | String \| Object \| Function | - | - | 选填，page 与 redirect 字段中必须要有有一个存在，详见下文 **redirect** | +| meta | 路由元数据 | Object | - | - | 选填 | +| children | 子路由 | Route[] | - | - | 选填 | + +以上结构仅说明了路由记录需要的必需字段，如果需要更多的信息字段可以自行实现。 + +关于 **path** 字段的详细说明： + +路由记录通常通过声明 path 字段来匹配对应的浏览器 URL 来确认是否满足匹配条件，如 `path=abc` 能匹配到 `/abc` 这个 URL。 + +> 在声明 path 字段的时候，可省略 `/`，只声明后面的字符，如 `/abc` 可声明为 `abc`。 + +path（页面路径）是浏览器URL的组成部分，同时大部分网站的 URL 也都受到了 Restful 思想的影响，所以我们也是用类似的形式作为路径的规则基底。 +路径规则是路由配置的重要组成部分，我们希望一个路径配置的基本能力需要支持具体的路径（/xxx）与路径参数 (/:abc）。 + +以一个 `/one/:two?/three/:four?/:five?` 路径为例，它能够解析以下路径： +- `/one/three` +- `/one/:two/three` +- `/one/three/:four` +- `/one/three/:five` +- `/one/:two/three/:four` +- `/one/:two/three/:five` +- `/one/three/:four/:five` +- `/one/:two/three/:four/:five` + +更多的路径规则，如路径中的通配符、多次匹配等能力如有需要可自行实现。 + +关于 **redirect** 字段的详细说明： + +**redirect** 字段有三种填入类型，分别是 `String`、`Object`、`Function`： +1. 字符串(`String`)格式下默认处理为重定向到路径，支持传入 '/xxx'、'/xxx?ab=c'。 +2. 对象(`String`)格式下可传入路由对象，如 { name: 'xxx' }、{ path: '/xxx' }，可重定向到对应的路由对象。 +3. 函数`Function`格式为`(to) => Route`，它的入参为当前路由项信息，支持返回一个 Route 对象或者字符串，存在一些特殊情况，在重定向的时候需要对重定向之后的路径进行处理的情况下，需要使用函数声明。 + +```json +{ + "redirect": { + "type": "JSFunction", + "value": "(to) => { return { path: '/a', query: { fromPath: to.path } } }", + } +} +``` + +##### 完整描述示例 + +``` json +{ + "router": { + "baseName": "/", + "historyMode": "hash", + "routes": [ + { + "path": "home", + "page": "home" + }, + { + "path": "/*", + "redirect": "notFound" + } + ] + }, + "componentsTree": [ + { + "id": "home", + ... + }, + { + "id": "notFound", + ... + } + ] +} +``` + +### 2.12 当前应用的页面信息（AA） + +用于描述当前应用的页面信息，比如页面对应的低代码搭建内容、页面标题、页面配置等。 +在一些比较复杂的场景下，允许声明一层页面映射关系，以支持页面声明更多信息与配置，同时能够支持不同类型的产物。 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 备注 | +| ------- | --------------------- | ------ | ------ | ------ | -------------------------------------------------------- | +| id | 页面 id | String | - | - | 必填 | +| type | 页面类型 | String | - | - | 选填，可用来区分页面的类型 | +| treeId | 对应的低代码树中的 id | String | - | - | 选填，页面对应的 componentsTree 中的子项 id | +| packageId | 对应的资产包对象 | String | - | - | 选填，页面对应的资产包对象，一般用于微应用场景下，当路由匹配到当前页面的时候，会加载 `packageId` 对应的微应用进行渲染。 | +| meta | 页面元信息 | Object | - | - | 选填，用于描述当前应用的配置信息 | +| config | 页面配置 | Object | - | - | 选填，用于描述当前应用的元数据信息 | + + +#### 2.12.1 微应用（低代码+）相关说明 + +在开发过程中，我们经常会遇到一些特殊的情况，比如一个低代码应用想要集成一些别的系统的页面或者系统中的一些页面只能是源码开发（与低代码相对的纯工程代码形式），为了满足更多的使用场景，应用级渲染引擎引入了微应用（微前端）的概念，使低代码页面与其他的页面结合成为可能。 + +微应用对象通过资产包加载，需要暴露两个生命周期方法： +- mount(container: HTMLElement, props: any) + - 说明：微应用挂载到 container（dom 节点）的调用方法，会在渲染微应用时调用 +- unmout(container: HTMLElement, props: any) + - 说明：微应用从容器节点（container）卸载的调用方法，会在卸载微应用时调用 + +> 在微应用的场景下，可能会存在多个页面路由到同一个应用，应用可通过资产包加载，所以需要将对应的页面配置指向对应的微应用（资产包）对象。 + +**描述示例** + +```json +{ + "router": { + "baseName": "/", + "historyMode": "hash", + "routes": [ + { + "path": "home", + "page": "home" + }, + { + "page": "guide", + "page": "guide" + }, + { + "path": "/*", + "redirect": "notFound" + } + ] + }, + "pages": [ + { + "id": "home", + "treeId": "home", + "meta": { + "title": "首页" + } + }, + { + "id": "notFound", + "treeId": "notFound", + "meta": { + "title": "404页面" + } + }, + { + "id": "guide", + "packagId": "microApp" + } + ] +} + +// 资产包 +[ + { + "id": "microApp", + "package": "microApp", + "version": "1.23.0", + "urls": [ + "https://g.alicdn.com/code/lib/microApp.min.css", + "https://g.alicdn.com/code/lib/microApp.min.js" + ], + "library": "microApp" + }, +] +``` + + ## 3 应用描述 ### 3.1 文件目录 @@ -1320,9 +1523,78 @@ export const recordEvent = function(logkey, gmkey, gokey, reqMethod) { ### 3.2 应用级别 APIs > 下文中 `xxx` 代指任意 API #### 3.2.1 路由 Router API - - this.location.`xxx` - - this.history.`xxx` - - this.match.`xxx` + - this.location.`xxx` 「不推荐，推荐统一通过 this.router api」 + - this.history.`xxx` 「不推荐，推荐统一通过 this.router api」 + - this.match.`xxx` 「不推荐，推荐统一通过 this.router api」 + - this.router.`xxx` + +##### Router 结构说明 + +| API | 函数签名 | 说明 | +| -------------- | ---------------------------------------------------------- | -------------------------------------------------------------- | +| getCurrentRoute | () => RouteLocation | 获取当前解析后的路由信息，RouteLocation 结构详见下面说明 | +| push | (target: string \| Route) => void | 路由跳转方法，跳转到指定的路径或者 Route | +| replace | (target: string \| Route) => void | 路由跳转方法，与 `push` 的区别在于不会增加一条历史记录而是替换当前的历史记录 | +| beforeRouteLeave | (guard: (to: RouteLocation, from: RouteLocation) => boolean \| Route) => void | 路由跳转前的守卫方法，详见下面说明 | +| afterRouteChange | (fn: (to: RouteLocation, from: RouteLocation) => void) => void | 路由跳转后的钩子函数，会在每次路由改变后执行 | + +##### 3.2.1.1 RouteLocation（路由信息）结构说明 + +**RouteLocation** 是路由控制器匹配到对应的路由记录后进行解析产生的对象，它的结构如下： + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 备注 | +| -------------- | ---------------------- | ------ | ------ | ------ | ------ | +| path | 当前解析后的路径 | String | - | - | 必填 | +| hash | 当前路径的 hash 值，以 # 开头 | String | - | - | 必填 | +| href | 当前的全部路径 | String | - | - | 必填 | +| params | 匹配到的路径参数 | Object | - | - | 必填 | +| query | 当前的路径 query 对象 | Object | - | - | 必填，代表当前地址的 search 属性的对象 | +| name | 匹配到的路由记录名 | String | - | - | 选填 | +| meta | 匹配到的路由记录元数据 | Object | - | - | 选填 | +| redirectedFrom | 原本指向向的路由记录 | Route | - | - | 选填，在重定向到当前地址之前，原先想访问的地址 | +| fullPath | 包括 search 和 hash 在内的完整地址 | String | - | - | 选填 | + + +##### beforeRouteLeave +通过 beforeRouteLeave 注册的路由守卫方法会在每次路由跳转前执行。该方法一般会在应用鉴权，路由重定向等场景下使用。 + +> `beforeRouteLeave` 只在 `router.push/replace` 的方法调用时生效。 + +传入守卫的入参为： +* to: 即将要进入的目标路由(RouteLocation) +* from: 当前导航正要离开的路由(RouteLocation) + +该守卫返回一个 `boolean` 或者路由对象来告知路由控制器接下来的行为。 +* 如果返回 `false`， 则停止跳转 +* 如果返回 `true`，则继续跳转 +* 如果返回路由对象，则重定向至对应的路由 + +**使用范例：** + +```json +{ + "componentsTree": [{ + "componentName": "Page", + "fileName": "Page1", + "props": {}, + "children": [{ + "componentName": "Div", + "props": {}, + "children": [{ + "componentName": "Button", + "props": { + "text": "跳转到首页", + "onClick": { + "type": "JSFunction", + "value": "function () { this.router.push('/home'); }" + } + }, + }] + }], + }] +} +``` + #### 3.2.2 应用级别的公共函数或第三方扩展 - this.utils.`xxx` @@ -1370,11 +1642,11 @@ export const recordEvent = function(logkey, gmkey, gokey, reqMethod) { "i18n": { "zh-CN": { "i18n-hello": "你好", - "i18n-chicken": "我有${count}只鸡" + "i18n-chicken": "我有{count}只鸡" }, "en-US": { "i18n-hello": "Hello", - "i18n-chicken": "I have ${count} chicken" + "i18n-chicken": "I have {count} chicken" } } } diff --git a/docs/docs/specs/material-spec.md b/docs/docs/specs/material-spec.md index 3bee847c09..c766c68347 100644 --- a/docs/docs/specs/material-spec.md +++ b/docs/docs/specs/material-spec.md @@ -833,11 +833,12 @@ props 数组下对象字段描述： | name | 属性名 | String | type = 'field' 生效 | | defaultValue | 默认值 | Any(视字段类型而定) | type = 'field' 生效 | | supportVariable | 是否支持配置变量 | Boolean | type = 'field' 生效 | -| condition | 配置当前 prop 是否展示 | (target: SettingTarget) => boolean; | - | +| condition | 配置当前 prop 是否展示 | (target: IPublicModelSettingField) => boolean; | - | +| ignoreDefaultValue | 配置当前 prop 是否忽略默认值处理逻辑，如果返回值是 true 引擎不会处理默认值 | (target: IPublicModelSettingField) => boolean; | - | | setter | 单个控件 (setter) 描述，搭建基础协议组件的描述对象，支持 JSExpression / JSFunction / JSSlot | `String\|Object\|Function` | type = 'field' 生效 | | extraProps | 其他配置属性（不做流通要求） | Object | 其他配置 | -| extraProps.getValue | setter 渲染时被调用，setter 会根据该函数的返回值设置 setter 当前值 | Function | (target: SettingTarget, value: any) => any; | -| extraProps.setValue | setter 内容修改时调用，开发者可在该函数内部修改节点 schema 或者进行其他操作 | Function | (target: SettingTarget, value: any) => void; | +| extraProps.getValue | setter 渲染时被调用，setter 会根据该函数的返回值设置 setter 当前值 | Function | (target: IPublicModelSettingField, value: any) => any; | +| extraProps.setValue | setter 内容修改时调用，开发者可在该函数内部修改节点 schema 或者进行其他操作 | Function | (target: IPublicModelSettingField, value: any) => void; | 根据属性值类型 propType，确定对应控件类型 (setter) 。 @@ -922,7 +923,7 @@ props 数组下对象字段描述： | 字段 | 用途 | 类型 | 备注 | | ------------------------------- | --------------------------------------------------------------------------------------------------- | ------- | --- | -|initialChildren | 组件拖入“设计器”时根据此配置自动生成 children 节点 schema |NodeData[]/Function NodeData[] | ((target: SettingTarget) => NodeData[]);| +|initialChildren | 组件拖入“设计器”时根据此配置自动生成 children 节点 schema |NodeData[]/Function NodeData[] | ((target: IPublicModelSettingField) => NodeData[]);| |getResizingHandlers| 用于配置设计器中组件 resize 操作工具的样式和内容 | Function| (currentNode: any) => Array<{ type: 'N' | 'W' | 'S' | 'E' | 'NW' | 'NE' | 'SE' | 'SW'; content?: ReactElement; propTarget?: string; appearOn?: 'mouse-enter' | 'mouse-hover' | 'selected' | 'always'; }> / ReactElement[]; |callbacks| 配置 callbacks 可捕获引擎抛出的一些事件，例如 onNodeAdd、onResize 等 | Callback| - |callbacks.onNodeAdd| 在容器中拖入组件时触发的事件回调 | Function| (e: MouseEvent, currentNode: any) => any @@ -1098,7 +1099,7 @@ export interface Advanced { /** * 拖入容器时，自动带入 children 列表 */ - initialChildren?: NodeData[] | ((target: SettingTarget) => NodeData[]); + initialChildren?: NodeData[] | ((target: IPublicModelSettingField) => NodeData[]); /** * @todo 待补充文档 */ diff --git a/docs/docs/video/index.md b/docs/docs/video/index.md new file mode 100644 index 0000000000..38a0e8a5ce --- /dev/null +++ b/docs/docs/video/index.md @@ -0,0 +1,16 @@ +# 官方视频 +- [2023/11/20 云栖大会｜阿里开源低代码引擎及商业解决方案](https://www.bilibili.com/video/BV1Ku4y1w7Zr) +- [2023/08/03 初识低代码引擎](https://www.bilibili.com/video/BV1gu411p7TC) + +# 社区视频 +- [低代码从入门到实战：低代码引擎实践](https://www.bilibili.com/video/BV1aP4y1Q7Xa/) +- [低代码技术在研发团队的应用模式](https://www.bilibili.com/video/BV1L14y1Y72J/) +- [阿里低代码引擎项目实战 (1)-引擎 demo 部署到 faas 服务](https://www.bilibili.com/video/BV1B44y1P7GM/) +- [【有翻车】阿里低代码引擎项目实战 (2)-保存页面到远端存储](https://www.bilibili.com/video/BV1AS4y1K7DP/) +- [阿里巴巴低代码引擎项目实战 (3)-自定义组件接入](https://www.bilibili.com/video/BV1dZ4y1m76S/) +- [阿里低代码引擎项目实战 (4)-自定义插件 - 页面管理](https://www.bilibili.com/video/BV17a411i73f/) +- [阿里低代码引擎项目实战 (4)-用户登录](https://www.bilibili.com/video/BV1Wu411e7EQ/) +- [【有翻车】阿里低代码引擎项目实战 (5)-表单回显](https://www.bilibili.com/video/BV1UY4y1v7D7/) +- [阿里低代码引擎项目实战 (6)-自定义插件 - 页面管理 - 后端](https://www.bilibili.com/video/BV1uZ4y1U7Ly/) +- [阿里低代码引擎项目实战 (6)-自定义插件 - 页面管理 - 前端](https://www.bilibili.com/video/BV1Yq4y1a74P/) +- [阿里低代码引擎项目实战 (7)-自定义插件 - 页面管理 (完结)](https://www.bilibili.com/video/BV13Y4y1e7EV/) diff --git a/docs/package.json b/docs/package.json index c72e1804ef..7facd9db8b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-engine-docs", - "version": "1.0.20", + "version": "1.2.31", "description": "低代码引擎版本化文档", "license": "MIT", "files": [ diff --git a/docs/scripts/sync-oss.js b/docs/scripts/sync-oss.js index 9518a8ea7f..2d052dfa12 100644 --- a/docs/scripts/sync-oss.js +++ b/docs/scripts/sync-oss.js @@ -19,7 +19,7 @@ const onResponse = function (res) { chunks.push(chunk); }); - res.on('end', (chunk) => { + res.on('end', () => { const body = Buffer.concat(chunks); console.table(JSON.stringify(JSON.parse(body.toString()), null, 2)); }); @@ -39,9 +39,9 @@ const postData = JSON.stringify({ }, ], // 可以发布指定源的 npm 包，默认公网 npm - useTnpm: false, + useTnpm: true, }); req.write(postData); -req.end(); \ No newline at end of file +req.end(); diff --git a/lerna.json b/lerna.json index 8ca861e34c..7fad993f66 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "lerna": "4.0.0", - "version": "1.1.2", + "version": "1.3.2", "npmClient": "yarn", "useWorkspaces": true, "packages": [ diff --git a/modules/code-generator/README.md b/modules/code-generator/README.md index 03ce94b54e..1d67b3aa16 100644 --- a/modules/code-generator/README.md +++ b/modules/code-generator/README.md @@ -94,16 +94,26 @@ await CodeGenerator.init(); 4. 出码 ```js -const result = await CodeGenerator.generateCode({ +const project = await CodeGenerator.generateCode({ solution: 'icejs', // 出码方案 (目前内置有 icejs 和 rax ) schema, // 编排搭建出来的 schema }); -console.log(result); // 出码结果(默认是递归结构描述的，可以传 flattenResult: true 以生成扁平结构的结果) +console.log(project); // 出码结果(默认是递归结构描述的，可以传 flattenResult: true 以生成扁平结构的结果) ``` 注：一般来说在浏览器中出码适合做即时预览功能。 +5. 下载 zip 包 + +```js +// 写入到 zip 包 +await CodeGenerator.publishers.zip().publish({ + project, // 上一步生成的 project + projectSlug: 'your-project-slug', // 项目标识 -- 对应下载 your-project-slug.zip 文件 +}); +``` + ### 5）自定义出码 前端框架灵活多变，默认内置的出码方案很难满足所有人的需求，好在此代码生成器支持非常灵活的插件机制 -- 欢迎参考 ./src/plugins/xxx 来编写您自己的出码插件，然后参考 ./src/solutions/xxx 将各种插件组合成一套适合您的业务场景的出码方案。 diff --git a/modules/code-generator/example-schema.json b/modules/code-generator/example-schema.json index aaf3a3e0d8..5e31b1bea9 100644 --- a/modules/code-generator/example-schema.json +++ b/modules/code-generator/example-schema.json @@ -62,17 +62,17 @@ "router": "/" }, "props": { - "ref": "outterView", + "ref": "outerView", "autoLoading": true }, "fileName": "test", "state": { - "text": "outter" + "text": "outer" }, "lifeCycles": { "componentDidMount": { - "type": "JSExpression", - "value": "function() { console.log('componentDidMount'); }" + "type": "JSFunction", + "value": "function componentDidMount() { console.log('componentDidMount'); }" } }, "dataSource": { @@ -91,7 +91,7 @@ "isSync": true }, "dataHandler": { - "type": "JSExpression", + "type": "JSFunction", "value": "function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data;\n}" } }, @@ -105,13 +105,13 @@ "isSync": true }, "dataHandler": { - "type": "JSExpression", + "type": "JSFunction", "value": "function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data.result;\n}" } } ], "dataHandler": { - "type": "JSExpression", + "type": "JSFunction", "value": "function (dataMap) {\n console.info(\"All datasources loaded:\", dataMap);\n}" } }, diff --git a/modules/code-generator/example-schema.json5 b/modules/code-generator/example-schema.json5 index f71096fc41..4ab02999ec 100644 --- a/modules/code-generator/example-schema.json5 +++ b/modules/code-generator/example-schema.json5 @@ -62,17 +62,17 @@ router: '/', }, props: { - ref: 'outterView', + ref: 'outerView', autoLoading: true, }, fileName: 'test', state: { - text: 'outter', + text: 'outer', }, lifeCycles: { componentDidMount: { - type: 'JSExpression', - value: "function() { console.log('componentDidMount'); }", + type: 'JSFunction', + value: "function componentDidMount() { console.log('componentDidMount'); }", }, }, dataSource: { @@ -91,7 +91,7 @@ isSync: true, }, dataHandler: { - type: 'JSExpression', + type: 'JSFunction', value: 'function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data;\n}', }, }, @@ -105,13 +105,13 @@ isSync: true, }, dataHandler: { - type: 'JSExpression', + type: 'JSFunction', value: 'function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data.result;\n}', }, }, ], dataHandler: { - type: 'JSExpression', + type: 'JSFunction', value: 'function (dataMap) {\n console.info("All datasources loaded:", dataMap);\n}', }, }, diff --git a/modules/code-generator/package.json b/modules/code-generator/package.json index ee4ef1970a..cd114fa067 100644 --- a/modules/code-generator/package.json +++ b/modules/code-generator/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-code-generator", - "version": "1.0.7", + "version": "1.1.7", "description": "出码引擎 for LowCode Engine", "license": "MIT", "main": "lib/index.js", @@ -80,6 +80,7 @@ "change-case": "^3.1.0", "commander": "^6.1.0", "debug": "^4.3.2", + "file-saver": "^2.0.5", "fp-ts": "^2.11.9", "fs-extra": "9.x", "glob": "^7.2.0", @@ -109,6 +110,7 @@ "devDependencies": { "@iceworks/spec": "^1.4.2", "@types/babel__traverse": "^7.11.0", + "@types/file-saver": "^2.0.7", "@types/jest": "^27.0.2", "@types/lodash": "^4.14.162", "@types/node": "^14.14.20", @@ -144,5 +146,10 @@ "access": "public", "registry": "https://registry.npmjs.org/" }, - "repository": "git@github.com:alibaba/lowcode-engine.git" -} \ No newline at end of file + "repository": { + "type": "http", + "url": "https://github.com/alibaba/lowcode-engine/tree/main/modules/code-generator" + }, + "bugs": "https://github.com/alibaba/lowcode-engine/issues", + "homepage": "https://github.com/alibaba/lowcode-engine/#readme" +} diff --git a/modules/code-generator/src/cli/solutions/example-solution.ts b/modules/code-generator/src/cli/solutions/example-solution.ts index fe303f360f..bfb9d079b1 100644 --- a/modules/code-generator/src/cli/solutions/example-solution.ts +++ b/modules/code-generator/src/cli/solutions/example-solution.ts @@ -289,8 +289,8 @@ codealike.json }, "lifeCycles": { "componentDidMount": { - "type": "JSExpression", - "value": "function() { console.log('componentDidMount'); }" + "type": "JSFunction", + "value": "function componentDidMount() {\\n console.log('componentDidMount');\\n}" } }, "methodsModule": { @@ -635,18 +635,20 @@ export default function createHelloWorldProjectBuilder() { template: CodeGen.solutionParts.icejs.template, plugins: { components: [ - CodeGen.plugins.react.reactCommonDeps(), - CodeGen.plugins.common.esmodule({ fileType: 'jsx' }), - CodeGen.plugins.react.containerClass(), - CodeGen.plugins.react.containerInjectContext(), - CodeGen.plugins.react.containerInjectUtils(), - CodeGen.plugins.react.containerInjectDataSourceEngine(), - CodeGen.plugins.react.containerInjectI18n(), - CodeGen.plugins.react.containerInitState(), - CodeGen.plugins.react.containerLifeCycle(), - CodeGen.plugins.react.containerMethod(), + CodeGen.plugins.icejs.reactCommonDeps(), + CodeGen.plugins.common.esModule({ fileType: 'jsx' }), + CodeGen.plugins.common.styleImport(), + CodeGen.plugins.icejs.containerClass(), + CodeGen.plugins.icejs.containerInjectContext(), + CodeGen.plugins.icejs.containerInjectUtils(), + CodeGen.plugins.icejs.containerInjectDataSourceEngine(), + CodeGen.plugins.icejs.containerInjectI18n(), + CodeGen.plugins.icejs.containerInjectConstants(), + CodeGen.plugins.icejs.containerInitState(), + CodeGen.plugins.icejs.containerLifeCycle(), + CodeGen.plugins.icejs.containerMethod(), examplePlugin(), - CodeGen.plugins.react.jsx({ + CodeGen.plugins.icejs.jsx({ nodeTypeMapping: { Div: 'div', Component: 'div', @@ -657,18 +659,20 @@ export default function createHelloWorldProjectBuilder() { CodeGen.plugins.style.css(), ], pages: [ - CodeGen.plugins.react.reactCommonDeps(), - CodeGen.plugins.common.esmodule({ fileType: 'jsx' }), - CodeGen.plugins.react.containerClass(), - CodeGen.plugins.react.containerInjectContext(), - CodeGen.plugins.react.containerInjectUtils(), - CodeGen.plugins.react.containerInjectDataSourceEngine(), - CodeGen.plugins.react.containerInjectI18n(), - CodeGen.plugins.react.containerInitState(), - CodeGen.plugins.react.containerLifeCycle(), - CodeGen.plugins.react.containerMethod(), + CodeGen.plugins.icejs.reactCommonDeps(), + CodeGen.plugins.common.esModule({ fileType: 'jsx' }), + CodeGen.plugins.common.styleImport(), + CodeGen.plugins.icejs.containerClass(), + CodeGen.plugins.icejs.containerInjectContext(), + CodeGen.plugins.icejs.containerInjectUtils(), + CodeGen.plugins.icejs.containerInjectDataSourceEngine(), + CodeGen.plugins.icejs.containerInjectI18n(), + CodeGen.plugins.icejs.containerInjectConstants(), + CodeGen.plugins.icejs.containerInitState(), + CodeGen.plugins.icejs.containerLifeCycle(), + CodeGen.plugins.icejs.containerMethod(), examplePlugin(), - CodeGen.plugins.react.jsx({ + CodeGen.plugins.icejs.jsx({ nodeTypeMapping: { Div: 'div', Component: 'div', @@ -679,13 +683,13 @@ export default function createHelloWorldProjectBuilder() { CodeGen.plugins.style.css(), ], router: [ - CodeGen.plugins.common.esmodule(), + CodeGen.plugins.common.esModule(), CodeGen.solutionParts.icejs.plugins.router(), ], entry: [CodeGen.solutionParts.icejs.plugins.entry()], constants: [CodeGen.plugins.project.constants()], utils: [ - CodeGen.plugins.common.esmodule(), + CodeGen.plugins.common.esModule(), CodeGen.plugins.project.utils('react'), ], i18n: [CodeGen.plugins.project.i18n()], diff --git a/modules/code-generator/src/const/index.ts b/modules/code-generator/src/const/index.ts index 103d912db6..24449ca429 100644 --- a/modules/code-generator/src/const/index.ts +++ b/modules/code-generator/src/const/index.ts @@ -8,5 +8,26 @@ export const CONTAINER_TYPE = { export const SUPPORT_SCHEMA_VERSION_LIST = ['0.0.1', '1.0.0']; +// built-in slot names which have been handled in ProjectBuilder +export const BUILTIN_SLOT_NAMES = [ + 'pages', + 'components', + 'router', + 'entry', + 'appConfig', + 'buildConfig', + 'constants', + 'utils', + 'i18n', + 'globalStyle', + 'htmlEntry', + 'packageJSON', + 'demo', +]; + +export const isBuiltinSlotName = function (name: string) { + return BUILTIN_SLOT_NAMES.includes(name); +}; + export * from './file'; export * from './generator'; diff --git a/modules/code-generator/src/generator/ModuleBuilder.ts b/modules/code-generator/src/generator/ModuleBuilder.ts index 755ca20c6c..e172f716e5 100644 --- a/modules/code-generator/src/generator/ModuleBuilder.ts +++ b/modules/code-generator/src/generator/ModuleBuilder.ts @@ -62,10 +62,9 @@ export function createModuleBuilder( if (options.postProcessors.length > 0) { files = files.map((file) => { - let { content } = file; - const type = file.ext; + let { content, ext: type, name } = file; options.postProcessors.forEach((processer) => { - content = processer(content, type); + content = processer(content, type, name); }); return createResultFile(file.name, type, content); diff --git a/modules/code-generator/src/generator/ProjectBuilder.ts b/modules/code-generator/src/generator/ProjectBuilder.ts index 819f37c5c4..a910b49002 100644 --- a/modules/code-generator/src/generator/ProjectBuilder.ts +++ b/modules/code-generator/src/generator/ProjectBuilder.ts @@ -16,6 +16,7 @@ import { createResultDir, addDirectory, addFile } from '../utils/resultHelper'; import { createModuleBuilder } from './ModuleBuilder'; import { ProjectPreProcessor, ProjectPostProcessor, IContextData } from '../types/core'; import { CodeGeneratorError } from '../types/error'; +import { isBuiltinSlotName } from '../const'; interface IModuleInfo { moduleName?: string; @@ -24,22 +25,31 @@ interface IModuleInfo { } export interface ProjectBuilderInitOptions { + /** 项目模板 */ template: IProjectTemplate; + /** 项目插件 */ plugins: IProjectPlugins; + /** 模块后置处理器 */ postProcessors: PostProcessor[]; + /** Schema 解析器 */ schemaParser?: ISchemaParser; + /** 项目级别的前置处理器 */ projectPreProcessors?: ProjectPreProcessor[]; + /** 项目级别的后置处理器 */ projectPostProcessors?: ProjectPostProcessor[]; + /** 是否处于严格模式 */ inStrictMode?: boolean; + /** 一些额外的上下文数据 */ extraContextData?: Record
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && 
}
+ {text}
+
+
+ );
+}
+ `,
+ );
+
+ return [['src', 'layouts', 'BasicLayout', 'components', 'Logo'], file];
+}
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/components/Logo/index.style.ts b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/components/Logo/index.style.ts
new file mode 100644
index 0000000000..dfd00dd3e0
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/components/Logo/index.style.ts
@@ -0,0 +1,31 @@
+import { ResultFile } from '@alilc/lowcode-types';
+import { createResultFile } from '../../../../../../../../../../../utils/resultHelper';
+
+export default function getFile(): [string[], ResultFile] {
+ const file = createResultFile(
+ 'index',
+ 'module.scss',
+ `
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+ `,
+ );
+
+ return [['src', 'layouts', 'BasicLayout', 'components', 'Logo'], file];
+}
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/components/PageNav/index.jsx.ts b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/components/PageNav/index.jsx.ts
new file mode 100644
index 0000000000..1713057566
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/components/PageNav/index.jsx.ts
@@ -0,0 +1,79 @@
+import { ResultFile } from '@alilc/lowcode-types';
+import { createResultFile } from '../../../../../../../../../../../utils/resultHelper';
+
+export default function getFile(): [string[], ResultFile] {
+ const file = createResultFile(
+ 'index',
+ 'jsx',
+ `import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+
+
+ );
+ }
+}
+
+export default Test$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+
+ );
+ }
+}
+
+export default Aaaa$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+
+
+ );
+ }
+}
+
+export default Test$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+ this.state.title)} />
+
+ );
+ }
+}
+
+export default Test$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+
+ 员工列表
+
+ }
+ headerTest={[]}
+ headerProps={{ background: 'surface' }}
+ footer={null}
+ minHeight="100vh"
+ >
+
+
+
+ this.state.users.data)}
+ rowKey="workid"
+ columns={[
+ { title: '花名', dataIndex: 'cname' },
+ { title: 'user_id', dataIndex: 'workid' },
+ { title: '部门', dataIndex: 'dep' },
+ ]}
+ searchItems={[
+ { label: '姓名', name: 'cname' },
+ { label: '部门', name: 'dep' },
+ ]}
+ onSearch={function () {
+ return this.onSearch.apply(
+ this,
+ Array.prototype.slice.call(arguments).concat([])
+ );
+ }.bind(this)}
+ onClear={function () {
+ return this.onClear.apply(
+ this,
+ Array.prototype.slice.call(arguments).concat([])
+ );
+ }.bind(this)}
+ pagination={{
+ defaultPageSize: '',
+ onPageChange: function () {
+ return this.onPageChange.apply(
+ this,
+ Array.prototype.slice.call(arguments).concat([])
+ );
+ }.bind(this),
+ showSizeChanger: true,
+ }}
+ />
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Test$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+
+
+
+
+
+
+ 所在网关：
+
+
+ this.state.modalVisible)}
+ footer=""
+ __events={{
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onCancel',
+ relatedEventName: 'onCancelModal',
+ },
+ ],
+ eventList: [
+ { name: 'onCancel', disabled: true },
+ { name: 'onOk', disabled: false },
+ ],
+ }}
+ onCancel={function () {
+ this.onCancelModal.apply(
+ this,
+ Array.prototype.slice.call(arguments).concat([])
+ );
+ }.bind(this)}
+ zIndex={2000}
+ >
+
+
+ this.state.records)}
+ columns={[
+ {
+ title: '发布名称',
+ dataIndex: 'order_name',
+ key: 'name',
+ },
+ {
+ title: '类型',
+ dataIndex: 'order_type_desc',
+ key: 'age',
+ },
+ {
+ title: '发布状态',
+ dataIndex: 'order_status_desc',
+ key: 'address',
+ },
+ { title: '发布人', dataIndex: 'creator_name' },
+ { title: '当前批次/总批次', dataIndex: 'cur_batch_no' },
+ {
+ title: '发布机器/总机器',
+ dataIndex: 'pubblish_ip_finish_num',
+ },
+ { title: '发布时间', dataIndex: 'publish_id' },
+ ]}
+ actions={__$$eval(() => this.actions || [])}
+ getActions={function () {
+ return this.getActions.apply(
+ this,
+ Array.prototype.slice.call(arguments).concat([])
+ );
+ }.bind(this)}
+ />
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Test$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+
+
+ );
+ }
+}
+
+export default Test$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+ this.state.isModifyDialogVisible)}
+ okText="确认"
+ okType=""
+ forceRender={false}
+ cancelText="取消"
+ zIndex={2000}
+ destroyOnClose={false}
+ confirmLoading={false}
+ __events={{
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onOk',
+ relatedEventName: 'onOkModifyDialogThird',
+ },
+ {
+ type: 'componentEvent',
+ name: 'onCancel',
+ relatedEventName: 'onCancelModifyDialogThird',
+ },
+ ],
+ eventList: [
+ { name: 'onCancel', disabled: true },
+ { name: 'onOk', disabled: true },
+ ],
+ }}
+ onOk={function () {
+ this.onOkModifyDialogThird.apply(
+ this,
+ Array.prototype.slice.call(arguments).concat([])
+ );
+ }.bind(this)}
+ onCancel={function () {
+ this.onCancelModifyDialogThird.apply(
+ this,
+ Array.prototype.slice.call(arguments).concat([])
+ );
+ }.bind(this)}
+ >
+
+ 修改将撤回此前填写的信息
+
+
+
+
+
+
+ this.state.currentStep)}>
+
+
+ {!!__$$eval(() => this.state.currentStep === 0) && (
+
+
+
+ )}
+ {!!__$$eval(() => this.state.currentStep === 1) && (
+
+
+
+ )}
+ {!!__$$eval(() => this.state.currentStep === 2) && (
+
+
+
+ )}
+
+
+
+
+ );
+ }
+}
+
+export default Test$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+ this.dataSourceMap['userList'])}
+ columns={[
+ { dataIndex: 'name', title: '姓名' },
+ { dataIndex: 'age', title: '年龄' },
+ ]}
+ />
+
+ );
+ }
+}
+
+export default Example$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+