diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index b06ec3c3f3..0000000000 --- a/.eslintignore +++ /dev/null @@ -1,10 +0,0 @@ -.vscode -dist -public -package-lock.json -**/node_modules/** -tmp -temp -mockServer -packages/vue-generator/**/output/** -packages/build/vite-plugin-meta-comments/src/test/code/** diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 9d1f4572d3..0000000000 --- a/.eslintrc.js +++ /dev/null @@ -1,31 +0,0 @@ -module.exports = { - env: { - browser: true, - es2015: true, - worker: true, - node: true, - jest: true - }, - extends: ['eslint:recommended', 'plugin:vue/vue3-essential'], - parser: 'vue-eslint-parser', - parserOptions: { - parser: '@babel/eslint-parser', - ecmaVersion: 'latest', - sourceType: 'module', - requireConfigFile: false, - babelOptions: { - parserOpts: { - plugins: ['jsx'] - } - } - }, - plugins: ['vue'], - rules: { - 'no-console': 'error', - 'no-debugger': 'error', - 'space-before-function-paren': 'off', - 'vue/multi-word-component-names': 'off', - 'no-use-before-define': 'error', - 'no-unused-vars': ['error', { ignoreRestSiblings: true, varsIgnorePattern: '^_', argsIgnorePattern: '^_' }] - } -} diff --git a/designer-demo/package.json b/designer-demo/package.json index 01a739937b..071e6253a2 100644 --- a/designer-demo/package.json +++ b/designer-demo/package.json @@ -1,7 +1,7 @@ { "name": "designer-demo", "private": true, - "version": "2.2.0", + "version": "2.3.0", "type": "module", "scripts": { "dev": "cross-env vite", diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000000..46f64c6d80 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,108 @@ +# 目录 + +## 使用指南 + +- 新手指引 + - [简介](./getting-started/introduction.md) + - [快速上手](./getting-started/quick-start.md) +- 基础功能 + - [初识设计器](./basic-features/intro-to-designer.md) + - [设计前端应用流程](./basic-features/frontend-application-flow.md) + - [设计器界面模块简介](./basic-features/designer-ui-modules.md) + - [页面管理](./basic-features/page-management.md) + - [使用组件](./basic-features/using-components.md) + - [样式设置](./basic-features/style-settings.md) + - [使用状态管理和变量绑定](./basic-features/state-management-and-variable-binding.md) + - [行内样式绑定状态变量](./basic-features/inline-style-variable-binding.md) + - [查看大纲树](./basic-features/outline-tree.md) + - [国际化](./basic-features/internationalization.md) + - [页面和区块预览](./basic-features/page-and-block-preview.md) +- 进阶功能 + - [区块管理](./advanced-features/block-management.md) + - [使用JS面板和事件绑定](./advanced-features/js-panel-and-event-binding.md) + - [使用工具类方法 utils](./advanced-features/using-utils-methods.md) + - [高级面板设置](./advanced-features/advanced-panel-settings.md) + - [如何使用插槽](./advanced-features/how-to-use-slots.md) + - [循环渲染](./advanced-features/loop-rendering.md) + - [条件渲染](./advanced-features/conditional-rendering.md) + - [集成ChatGPT搭建简单页面能力](./advanced-features/integrating-chatgpt-for-simple-pages.md) + - [数据源和Collection—远程字段](./advanced-features/data-source-and-collection-remote-fields.md) + - [数据源和Collection—mock数据](./advanced-features/data-source-and-collection-mock-data.md) + - [数据源和Collection—使用数据源](./advanced-features/data-source-and-collection-usage.md) +- 教程 + - [从零搭建一个页面](./tutorials/build-a-page-from-scratch.md) + - [第一期2023.10.27](./tutorials/issue-1-2023.10.27.md) + +## 平台开发指南 + +- 开始 + - [简介](./development-getting-started/dev-intro.md) + - [快速上手](./development-getting-started/dev-quick-start.md) + - [前后端启动联调(Java服务端)](./development-getting-started/debugging-of-java-backend.md) +- 解决方案 + - [Java服务端部署](./solutions/server-deployment-solution-java.md) + - [Node.js服务端部署](./solutions/server-deployment-solution.md) + - [区块发布方案(Node.js服务端)](./solutions/block-release-solution.md) + - [区块局域网发布方案(Node.js服务端)](./solutions/block-lan-release-solution.md) + - [设计器中引入第三方组件库](./solutions/third-party-library-in-designer.md) + - [物料同步方案](./solutions/material-sync-solution.md) +- 扩展能力介绍 + - [新架构介绍](./extension-capabilities-overview/new-architecture.md) + - [注册表](./extension-capabilities-overview/registry.md) + - [元服务和元应用](./extension-capabilities-overview/meta-services-and-meta-apps.md) +- 扩展能力使用教程 + - [如何开发插件](./extension-capabilities-tutorial/how-to-develop-plugins.md) + - 出码功能 + - [出码功能简介与使用](./extension-capabilities-tutorial/code-output-function/code-output-overview-and-usage.md) + - [如何自定义出码](./extension-capabilities-tutorial/code-output-function/how-to-customize-code-output.md) + - [如何自定义出码插件](./extension-capabilities-tutorial/code-output-function/how-to-customize-code-output-plugins.md) + - [自定义页面出码插件](./extension-capabilities-tutorial/code-output-function/custom-page-code-output-plugin.md) + - [官方出码能力API](./extension-capabilities-tutorial/code-output-function/official-code-output-api.md) + - [定制插件UI](./extension-capabilities-tutorial/customize-plugin-ui.md) + - [定制元服务逻辑](./extension-capabilities-tutorial/customize-meta-service-logic.md) + - [开发设置器组件](./extension-capabilities-tutorial/develop-configurator-components.md) + - [AI插件使用前配置](./extension-capabilities-tutorial/ai-plugin-configuration.md) +- API + - [API总览](./api/api-overview.md) + - 前端API + - [主包API](./api/frontend-api/main-package-api.md) + - [画布API](./api/frontend-api/canvas-api.md) + - [全局布局API](./api/frontend-api/global-layout-api.md) + - [物料API](./api/frontend-api/material-api.md) + - [设置面板API](./api/frontend-api/settings-panel-api.md) + - 后端API + - [AI功能接口](./api/backend-api/ai-function-api.md) + - [应用管理](./api/backend-api/app-management.md) + - [区块分类](./api/backend-api/block-categories.md) + - [应用工具类管理](./api/backend-api/app-utility-management.md) + - [区块管理](./api/backend-api/block-management-api.md) + - [数据源管理](./api/backend-api/data-source-management.md) + - [DSL代码生成](./api/backend-api/dsl-code-generation.md) + - [物料中心](./api/backend-api/material-center.md) + - [页面管理](./api/backend-api/page-management-api.md) + - [APP服务](./api/backend-api/app-services.md) +- 实战案例 + - [PDM元数据审批电子流](./practical-cases/pdm-metadata-approval-workflow.md) + - [图元编排设计器](./practical-cases/graphical-element-arrangement-designer.md) + - [SMB轻量应用服务](./practical-cases/smb-lightweight-application-service.md) + +## 网站文档 + +- 生态中心 + - [介绍](./ecosystem-center/ecosystem-intro.md) + - [如何导入组件库](./ecosystem-center/how-to-import-library.md) + - [如何发布区块](./ecosystem-center/how-to-publish-block.md) + - [发布其他生态](./ecosystem-center/publish-other-ecosystems.md) +- 关于应用 + - [创建应用(创建空白应用、从模板创建应用)](./about-applications/create-application-blank-or-template.md) + - [开发应用](./about-applications/develop-application.md) +- 关于物料 + - [介绍](./about-materials/materials-intro.md) + - [创建物料资产包](./about-materials/create-material-asset-package.md) + - [添加组件库和区块](./about-materials/add-library-and-blocks.md) + - [构建物料资产包](./about-materials/build-material-asset-package.md) +- 关于设计器 + - [介绍](./about-designer/designer-intro.md) + - [创建设计器](./about-designer/create-designer.md) + - [定制物料资产包、主题、DSL、工具栏和插件栏](./about-designer/customize-material-package-themes-dsl-toolbar-plugins.md) + - [定制设计器](./about-designer/customize-designer.md) diff --git a/docs/about-applications/create-application-blank-or-template.md b/docs/about-applications/create-application-blank-or-template.md new file mode 100644 index 0000000000..3f2405e93e --- /dev/null +++ b/docs/about-applications/create-application-blank-or-template.md @@ -0,0 +1,13 @@ +# 关于应用 + +## 如何创建应用 +设计器定制完成后,用户可以在 [我的设计器](https://www.opentiny.design/tiny-engine#/my-platform) 中创建应用。选择对应的设计器,在设计器右下方点击“创建应用”。 +创建应用有两种方式: + +1.创建空白应用 → 填写必要的字段 → 保存。 + +![创建应用方式一]( ./imgs/appCreateOne.png) + +2.从模板创建应用→ 选择应用模板 → 填写必要的字段 → 保存。 + +![创建应用方式二]( ./imgs/appCreateTwo.png) \ No newline at end of file diff --git a/docs/about-applications/develop-application.md b/docs/about-applications/develop-application.md new file mode 100644 index 0000000000..9e7463749f --- /dev/null +++ b/docs/about-applications/develop-application.md @@ -0,0 +1,11 @@ +# 关于应用 + +## 如何去开发应用 + +应用创建完成后,即可在 **我的应用** 中看到这个应用,点击 **开发应用** 即可前往可视化设计器进行可视化地搭建该应用下的 *页面* 和 *区块*。 + +![view-app1]( ./imgs/appDevOne.png) + +### 可视化设计器 + +![view-app2]( ./imgs/appDevTwo.png) \ No newline at end of file diff --git a/docs/about-applications/imgs/appCreateOne.png b/docs/about-applications/imgs/appCreateOne.png new file mode 100644 index 0000000000..983bf5a7ce Binary files /dev/null and b/docs/about-applications/imgs/appCreateOne.png differ diff --git a/docs/about-applications/imgs/appCreateTwo.png b/docs/about-applications/imgs/appCreateTwo.png new file mode 100644 index 0000000000..cb96ee518d Binary files /dev/null and b/docs/about-applications/imgs/appCreateTwo.png differ diff --git a/docs/about-applications/imgs/appDevOne.png b/docs/about-applications/imgs/appDevOne.png new file mode 100644 index 0000000000..0e9e70d1b2 Binary files /dev/null and b/docs/about-applications/imgs/appDevOne.png differ diff --git a/docs/about-applications/imgs/appDevTwo.png b/docs/about-applications/imgs/appDevTwo.png new file mode 100644 index 0000000000..7fe80fcb21 Binary files /dev/null and b/docs/about-applications/imgs/appDevTwo.png differ diff --git a/docs/about-designer/create-designer.md b/docs/about-designer/create-designer.md new file mode 100644 index 0000000000..bf7c4c35fc --- /dev/null +++ b/docs/about-designer/create-designer.md @@ -0,0 +1,6 @@ +# 关于设计器 + +## 如何创建一个设计器 + +用户可以在 [我的设计器](https://www.opentiny.design/tiny-engine#/my-platform) 中创建设计器,创建设计器 → 填写必要的字段 → 确定 +![create-platform]( ./imgs/createPlatform.png) diff --git a/docs/about-designer/customize-designer.md b/docs/about-designer/customize-designer.md new file mode 100644 index 0000000000..942b1b7c60 --- /dev/null +++ b/docs/about-designer/customize-designer.md @@ -0,0 +1,13 @@ +# 关于设计器 + +## 如何定制一个设计器 + +物料资产包、主题、工具、插件和DSL定制完成后,有两种方式可以构建设计器。 + +方式一:可视化构建 + +![build-platform1]( ./imgs/buildPlatform1.png) + +方式二:由源码构建 + +![build-platform2]( ./imgs/buildPlatform2.png) \ No newline at end of file diff --git a/docs/about-designer/customize-material-package-themes-dsl-toolbar-plugins.md b/docs/about-designer/customize-material-package-themes-dsl-toolbar-plugins.md new file mode 100644 index 0000000000..a081b62a0c --- /dev/null +++ b/docs/about-designer/customize-material-package-themes-dsl-toolbar-plugins.md @@ -0,0 +1,20 @@ +# 关于设计器 + +## 如何定制物料资产包、主题、DSL、工具栏和插件栏 + +设计器创建完成后会自动打开编辑页面,用户可以在这里定制设计器的*物料资产包*、*主题*、*工具*、*插件*和*DSL*,如下图: + +1. **定制物料资产包:** 物料资产包 **必选且唯一** , **不允许删除** 物料资产包,可以添加其他物料资产包来替换当前的。 +![define-material]( ./imgs/defineMaterial.png) + +2. **定制主题:** 主题 **必选且唯一** ,**不允许删除** 主题,可以添加其他主题来替换当前的 +![define-theme]( ./imgs/defineTheme.png) + +3. **定制DSL:** DSL为 **单选**。DSL是将物料的Schema 解析成不同技术栈源码的转换工具,所以DSL的必须和选择的物料在技术栈保持一致。 +![define-DSL]( ./imgs/defineDsl.png) + +4. **定制工具:** 可以将工具拖入上方位置栏,规划定制的设计器里工具的位置。工具可以多选,也可以删除。 +![define-tools]( ./imgs/defineTools.png) + +5. **定制插件:** 可以将插件拖入中间位置栏,规划定制的设计器里插件的位置。插件可以多选,也可以删除。 +![define-plugs]( ./imgs/definePlugs.png) \ No newline at end of file diff --git a/docs/about-designer/designer-intro.md b/docs/about-designer/designer-intro.md new file mode 100644 index 0000000000..f1bf2dc2be --- /dev/null +++ b/docs/about-designer/designer-intro.md @@ -0,0 +1,6 @@ +# 构建自定义设计器 + +## 什么是定制扩展能力 + +什么是扩展能力呢,一方面我们可以快速拥有一个官方标准的设计器,另外一方面如果用户有独特的业务功能需要,我们可以不用看它的源码、不用关心其实现,用户可以使用 API、插件等方式快速开发自己的工具,插件,DSL等的npm包,用于构建用户自定义的设计器。而设计器引擎对于设计器的扩展能力支持基本上覆盖了设计器的所有功能点。 +![expend]( ./imgs/platformExpend.png) \ No newline at end of file diff --git a/docs/about-designer/imgs/buildPlatform1.png b/docs/about-designer/imgs/buildPlatform1.png new file mode 100644 index 0000000000..85e66d4a88 Binary files /dev/null and b/docs/about-designer/imgs/buildPlatform1.png differ diff --git a/docs/about-designer/imgs/buildPlatform2.png b/docs/about-designer/imgs/buildPlatform2.png new file mode 100644 index 0000000000..073510fa8b Binary files /dev/null and b/docs/about-designer/imgs/buildPlatform2.png differ diff --git a/docs/about-designer/imgs/createPlatform.png b/docs/about-designer/imgs/createPlatform.png new file mode 100644 index 0000000000..93a6bc5094 Binary files /dev/null and b/docs/about-designer/imgs/createPlatform.png differ diff --git a/docs/about-designer/imgs/defineDsl.png b/docs/about-designer/imgs/defineDsl.png new file mode 100644 index 0000000000..bb76a24f6e Binary files /dev/null and b/docs/about-designer/imgs/defineDsl.png differ diff --git a/docs/about-designer/imgs/defineMaterial.png b/docs/about-designer/imgs/defineMaterial.png new file mode 100644 index 0000000000..df4cb5e3c8 Binary files /dev/null and b/docs/about-designer/imgs/defineMaterial.png differ diff --git a/docs/about-designer/imgs/definePlugs.png b/docs/about-designer/imgs/definePlugs.png new file mode 100644 index 0000000000..9da4ee32c7 Binary files /dev/null and b/docs/about-designer/imgs/definePlugs.png differ diff --git a/docs/about-designer/imgs/defineTheme.png b/docs/about-designer/imgs/defineTheme.png new file mode 100644 index 0000000000..33b5b5ed7f Binary files /dev/null and b/docs/about-designer/imgs/defineTheme.png differ diff --git a/docs/about-designer/imgs/defineTools.png b/docs/about-designer/imgs/defineTools.png new file mode 100644 index 0000000000..506c2c9b71 Binary files /dev/null and b/docs/about-designer/imgs/defineTools.png differ diff --git a/docs/about-designer/imgs/platformExpend.png b/docs/about-designer/imgs/platformExpend.png new file mode 100644 index 0000000000..26bf82749e Binary files /dev/null and b/docs/about-designer/imgs/platformExpend.png differ diff --git a/docs/about-materials/add-library-and-blocks.md b/docs/about-materials/add-library-and-blocks.md new file mode 100644 index 0000000000..b89ba8a028 --- /dev/null +++ b/docs/about-materials/add-library-and-blocks.md @@ -0,0 +1,19 @@ +# 添加组件库/区块 + +## 如何添加组件库与区块 + +可视化设计器已为您提供官方组件库与一些区块,物料资产包创建完成后会自动打开编辑页面,用户可以在这里添加组件库与区块,如下图: + +* **添加组件库:** 选中未选择的组件库 +![添加组件库](./imgs/createMaterialLib.png) + +* **添加区块:** 选中未选择的区块 +![添加区块](./imgs/createMaterialBlock.png) + +* **移除组件库:** 取消选中已经选择的组件库,并且确认 +![移除组件库](./imgs/createMaterialLibCancel.png) + +* **移除区块:** 取消选中已经选择的区块,并且确认 +![移除区块](./imgs/createMaterialBlockCancel.png) + +* 用户也可以在生态中心录入自己的组件库与区块。 \ No newline at end of file diff --git a/docs/about-materials/build-material-asset-package.md b/docs/about-materials/build-material-asset-package.md new file mode 100644 index 0000000000..fa8302e39d --- /dev/null +++ b/docs/about-materials/build-material-asset-package.md @@ -0,0 +1,6 @@ +# 构建物料资产包 + +## 如何构建物料资产包 + +添加完组件库与区块后,点击底部 **构建物料资产包** 按钮,即可完成物料资产包的构建。构建完成后即可看到发布地址。 +![构建物料资产包](./imgs/createMaterial.gif) \ No newline at end of file diff --git a/docs/about-materials/create-material-asset-package.md b/docs/about-materials/create-material-asset-package.md new file mode 100644 index 0000000000..68a2c7292e --- /dev/null +++ b/docs/about-materials/create-material-asset-package.md @@ -0,0 +1,10 @@ +# 创建物料资产包 + +## 如何创建物料资产包 + +用户可以在生态中心创建物料资产包,*新建物料资产包* → *填写必要的字段* → *保存。* +当前支持Vue和Angular两种技术栈,用户可以任意选择。当用户选择了Vue技术栈时,则只能添加Vue的组件与区块,不能添加Angular的组件库与区块。 + +物料资产包版本是用户自定义的,用户可以将物料资产包回退到任一版本。 + +![构建物料资产包](./imgs/createMaterial.gif) \ No newline at end of file diff --git a/docs/about-materials/imgs/createMaterial.gif b/docs/about-materials/imgs/createMaterial.gif new file mode 100644 index 0000000000..3193833473 Binary files /dev/null and b/docs/about-materials/imgs/createMaterial.gif differ diff --git a/docs/about-materials/imgs/createMaterialBlock.png b/docs/about-materials/imgs/createMaterialBlock.png new file mode 100644 index 0000000000..cdf2137596 Binary files /dev/null and b/docs/about-materials/imgs/createMaterialBlock.png differ diff --git a/docs/about-materials/imgs/createMaterialBlockCancel.png b/docs/about-materials/imgs/createMaterialBlockCancel.png new file mode 100644 index 0000000000..0873e2f7b0 Binary files /dev/null and b/docs/about-materials/imgs/createMaterialBlockCancel.png differ diff --git a/docs/about-materials/imgs/createMaterialLib.png b/docs/about-materials/imgs/createMaterialLib.png new file mode 100644 index 0000000000..7089dbe98b Binary files /dev/null and b/docs/about-materials/imgs/createMaterialLib.png differ diff --git a/docs/about-materials/imgs/createMaterialLibCancel.png b/docs/about-materials/imgs/createMaterialLibCancel.png new file mode 100644 index 0000000000..effb8527d1 Binary files /dev/null and b/docs/about-materials/imgs/createMaterialLibCancel.png differ diff --git a/docs/about-materials/imgs/materialPanel.png b/docs/about-materials/imgs/materialPanel.png new file mode 100644 index 0000000000..3d595dc699 Binary files /dev/null and b/docs/about-materials/imgs/materialPanel.png differ diff --git a/docs/about-materials/materials-intro.md b/docs/about-materials/materials-intro.md new file mode 100644 index 0000000000..1176371b22 --- /dev/null +++ b/docs/about-materials/materials-intro.md @@ -0,0 +1,16 @@ +# 关于物料资产包 + +## 什么是物料 + +物料是可视化页面搭建的原料,按照粒度可分为组件库和区块 + +1. **组件库**:组件库一般是按照组件的性质进行组织。组件是页面搭建最小的可复用单元,其只对外暴露配置项,用户无需感知其内部实现。组件库在设计器定制完成后 **不能再次添加与删除** 。 +2. **区块**:区块可以包含一个或多个组件也可以包含其他区块,带有一定的业务逻辑,能够实现更丰富的功能与表现。区块分为**消费侧**和**管理侧**,在区块管理侧,用户可以向设计器中拖入一个区块后可以编辑其内部的组件和区块配置,暴露区块的属性和事件供消费区块的时候使用,最后发布区块,消费侧区块就会更新为最新的区块内容。区块在设计器定制完成后仍能添加与删除。 + +设计器中的物料需要进行一定的配置和处理,才能让用户在设计器使用起来。这个过程中,需要一份配置文件,也就是物料资产包。物料资产包文件中,针对每个物料定义了它们在设计器中的使用描述。 + +## 什么是物料资产包 + +在设计器中,我们可以看到,组件与区块面板不只提供一个组件或区块,它们是以集合的形式提供给设计器的,而物料资产包正是这些组件与区块构成的集合。 + +![view-material](./imgs/materialPanel.png) \ No newline at end of file diff --git a/docs/advanced-features/advanced-panel-settings.md b/docs/advanced-features/advanced-panel-settings.md new file mode 100644 index 0000000000..ff00297eea --- /dev/null +++ b/docs/advanced-features/advanced-panel-settings.md @@ -0,0 +1,69 @@ +# 高级面板设置 + +> 选中组件之后,我们可以在高级面板对组件进行事件的绑定、以及循环渲染、条件渲染等高级设置 + +## 条件渲染 + +在页面开发中,我们可能需要根据某些条件来动态显示或隐藏页面中的内容,举个例子:我们希望当用户已经登录的时候,显示欢迎登录的文字,未登录的时候,显示请登录的文字。 +那么,我们可以在组件上面绑定条件渲染,点击绑定变量,选择变量 state.isLogin,那么,我们的组件就会根据变量 state.isLogin 的真假值来进行渲染。 + +![条件渲染示例](./imgs/conditionRender.gif) + +## 循环渲染 + +我们的页面可能有若干份重复的、动态生成的内容,比如商品列表页,比如表格数据。这时候,我们就需要用到循环渲染 + +我们可以在高级面板中指定循环数据绑定的变量、迭代的变量名、索引变量名、以及唯一的 key。 +举例:假如我们的状态变量中有一个镜像列表,我们希望渲染出来镜像的 icon、镜像名称以及镜像版本,那么我们可以使用循环渲染来实现: + +![循环渲染](./imgs/useLoop.gif) + +相关概念关联: + +- 循环数据,即需要循环渲染的数组,在这里是 state.imageList +- 迭代变量名,在循环渲染子项对应的变量名,默认为 item +- 索引变量名,循环渲染的索引变量名,默认为 index +- key,标识唯一的 key,默认为 index + +最终出码: + +```vue + +``` + +## 事件绑定 + +我们可以给选中的组件进行事件的绑定: + +- 在绑定事件下拉按钮中选中需要绑定的事件 +- 随后在事件绑定弹窗中指定方法名称 +- 指定拓展参数 +- 点击确定,在随后弹出的JS面板中进行绑定方法的具体逻辑实现 + +![事件绑定演示](./imgs/bindEvent.gif) + +### 拓展参数相关说明 + +在某些点击事件中,我们不仅仅希望得知事件是否被点击,我们还希望在点击事件中获得一些额外的参数,这时候,我们就可以用拓展参数,下面举例说明: +我们希望为镜像列表中的列表项绑定点击事件,然后将镜像的 id 和版本传入到事件处理函数中。那么,我们就可以使用拓展参数进行传入。 + +```bash +# 循环渲染项迭代变量名 item +# 拓展参数设置: +["item.imageId", "item.imageVersion"] +``` + +最终出码: + +```vue + +``` diff --git a/docs/advanced-features/block-management.md b/docs/advanced-features/block-management.md new file mode 100644 index 0000000000..473c495b8f --- /dev/null +++ b/docs/advanced-features/block-management.md @@ -0,0 +1,129 @@ +# 区块管理 + +> 区块的概念类似于前端开发中的 Component,我们可以将很多页面中都一样的结构(比如 Header),构建到区块中,发布之后直接在页面中拖入使用,提高开发效率 + +## 区块相关概念 + +假设我们有如下前端工程: + +```bash +- project + - components + |_ Header.vue + - Footer.vue + - Container.vue + - views + |_ Index.vue + - Page2.vue + - TodoFolder + |_ Todo.vue +``` + +其中,views 文件夹下 views每个页面都有路由一一对应,用户可以根据路由访问。components文件夹下的 Header、Footer、Container则没有对应路由可以访问,但是他们可以被页面1、2、3引用,提高代码复用率,我们的区块则对应 components 下的Header、Footer、Container等组件概念(即可重用的业务组件)。 + +### 区块发布相关概念 + +我们对区块编辑好之后,最终还是提供给另一个区块或者页面使用(即被另一个区块或者页面引用),所以我们设计了发布的概念,区块发布之后,会生成一个版本,可以在物料面板添加已经发布的区块,选择版本,然后拖入画布中消费使用 + +## 区块的基本使用与管理 + +创建区块可以有创建空白区块和从现有页面中创建区块两种 + +### 创建空白区块 + +![创建空白区块](./imgs/createEmptyBlock.png) + +如上图,按照步骤可创建空白区块 + +- 点击左侧区块插件打开区块插件面板 +- 点击右上角新增按钮 +- 在弹窗中输入区块ID与区块名称 + +相关概念 + +- 区块ID:区块的唯一ID,对应出码后的区块文件名 +- 区块名称:在区块管理面板和物料消费面板显示的名称 + +### 从现有页面中选中组件创建区块 + +![从现有页面中选中组件创建区块](./imgs/createBlockFromPage.gif) + +如上图,我们可以从现有页面中,按照步骤创建新区块 + +- 点击画布选中组件 +- 右键,在弹出的右键菜单中点击新建区块 +- 在弹出的弹窗中输入新区块的ID和名称,点击确认 +- 最终我们得到了有选中组件作为初始内容的区块 + +## 区块管理与设置 + +在上述创建空白区块的区块管理插件中,我们还能看到现有的区块,对现有的区块进行修改和删除等管理操作,下面,我们来学习区块的几个管理属性 + +### 区块基本设置 + +![区块基本设置](./imgs/blockBaseSetting.png) + +如上图,点击区块列表中区块的右上角的设置按钮,即可打开设置面板。区块的基本设置中,我们可以对区块的名称、描述、标签、公开范围进行设置,下面对相关设置项进行讲解 + +- 区块描述:区块的描述,可以让别人更好的明白该区块的用途以及含义 +- 区块标签:区块的标签,方便消费侧用户搜索 +- 公开范围:区块的公开范围,设置 区块发布之后别的用户是否可以搜索,私有即只有自己可以看到、公开即所有用户都可以看到、半公开可以选择可以搜索到该区块的组织 + +### 区块暴露属性设置 + +#### 区块暴露属性的相关概念 + +假设我们的前端工程中有一个 Header 组件,该组件定义了 title 和 description 两个 props 属性 + +```vue + + + +``` + +区块暴露属性的概念即对应 组件中的 props 属性。暴露属性声明了外部组件引用当前组件时,可以定义的相关属性 + +#### 区块暴露属性的相关设置 + +区块暴露属性的设置与我们代码 props 的设置相似,只是区块暴露属性多了一个指定属性面板组件和属性的相关配置 + +![区块暴露属性设置](./imgs/blockExposeAttr.gif) + +#### 区块暴露属性的消费 + +在区块发布之后,我们在物料面板拖出区块到画布中,选中我们拖出的区块,右侧属性面板的属性即是我们定义的暴露属性 + +![区块暴露属性的消费](./imgs/blockexposeattrusage.gif) + +### 区块事件设置 + +#### 区块事件的概念 + +既然区块暴露属性等同于 组件 中的 props 属性,类似的,区块的事件即等同于 vue 中的 emit 事件声明 + +```vue + +``` + +注意的是,这里仅仅是声明我们的区块会抛出什么事件,真正的事件需要引用方(即消费该区块的一方在高级面板进行定义) + +### 生命周期设置 + +同页面生命周期,即可以设置对应技术栈的生命周期函数 + +### 版本列表 + +可以预览对应版本的区块 diff --git a/docs/advanced-features/conditional-rendering.md b/docs/advanced-features/conditional-rendering.md new file mode 100644 index 0000000000..24f4bbde51 --- /dev/null +++ b/docs/advanced-features/conditional-rendering.md @@ -0,0 +1,30 @@ +# 条件渲染 + +在页面开发中,可能需要根据某些条件来动态显示或隐藏页面中的内容,例如:如果您希望当用户已经登录的时候,显示“欢迎登录“的文字,未登录的时候,显示“请登录“的文字。 + +1. 拖拽组件至画布,分别输入希望展示的文字。 +2. 添加变量,例如state.isLogin + + **图 1** 添加变量 + + ![addvar-15](./imgs/addvar-15.png) + +3. 选中组件,在组件属性设置面板选择“高级”。 +4. 单击“是否渲染“后的 ![变量绑定图标](./imgs/icon-code.png),进行变量绑定。 + + **图 2** 绑定变量 + + ![bindVariable-16.png](./imgs/bindVariable-16.png) + +5. 选项绑定的变量,单击“确定”。 + + 绑定成功后可根据变量state.isLogin的值,查看渲染效果。 + + **图 3** state.isLogin为false时 + + ![state-isLogin为false时](./imgs/state-isLogin为false时.png) + + **图 4** state.isLogin为ture时 + + ![state-isLogin为ture时.png](./imgs/state-isLogin为ture时.png) + diff --git a/docs/advanced-features/data-source-and-collection-mock-data.md b/docs/advanced-features/data-source-and-collection-mock-data.md new file mode 100644 index 0000000000..7fbb488824 --- /dev/null +++ b/docs/advanced-features/data-source-and-collection-mock-data.md @@ -0,0 +1,21 @@ +# 数据源Mock数据 + +目前数据源在编辑态时只能使用Mock数据,所以我们可能需要给数据源添加Mock数据 + +## 操作步骤 + +- 打开数据源面板,选中数据源 +- 点击新增数据,添加数据并保存 +![新增数据](./imgs/dataSource5.png) + +## 使用数据源Mock数据 + +- 拖动一个Collection组件到画布中,在Collection组件属性面板上选择数据源 +- 拖动格组件到Collection中,表格组件将自动生成数据源中的字段 +![使用数据源Mock数据](not-found/dataSource6.png) + +## 更新数据源到画布 + +添加完Mock数据后,画布上绑定的数据源不会同步改变,需要手动更新,操作如下: +选中画布中的数据源,打开属性面板,点击更新数据源 +![更新数据源到画布](./imgs/dataSource7.png) diff --git a/docs/advanced-features/data-source-and-collection-remote-fields.md b/docs/advanced-features/data-source-and-collection-remote-fields.md new file mode 100644 index 0000000000..81d0edbefc --- /dev/null +++ b/docs/advanced-features/data-source-and-collection-remote-fields.md @@ -0,0 +1,27 @@ +# 数据源获取远程字段 + +我们可以通过已有的远程Http接口,快速地生成数据源的字段 + +## 操作步骤 + +- 打开数据源面板,新建数据源。点击获取远程数据 +- 设置请求地址、请求方式、请求参数、请求结果回调 +![数据源设置](./imgs/dataSource1.png) +- 请求成功后获取到接口字段信息,填写字段名后,保存后即可生成数据源字段信息 +![请求结果](./imgs/dataSource2.png) +![字段配置](./imgs/dataSource3.png) +![保存数据源](./imgs/dataSource4.png) + + +## 请求完成回调函数示例 +- 解析对象数组 +```javascript +function dataHandler(data) { + return data.map(v => { + return { + name: v.aa.ss, + status: v.status + } + }) +} +``` \ No newline at end of file diff --git a/docs/advanced-features/data-source-and-collection-usage.md b/docs/advanced-features/data-source-and-collection-usage.md new file mode 100644 index 0000000000..708bdff7ea --- /dev/null +++ b/docs/advanced-features/data-source-and-collection-usage.md @@ -0,0 +1,127 @@ +## 数据源 + +### 前言 +设计器提供数据源来配合画布上的组件/区块渲染,数据源的配置既可以采取在设计器中静态配置的方式,也可以采取远程 API 请求 JSON 数据动态获取的方式。 + +> 目前**数据源**可便捷地应用于表格组件的表格列,也可灵活地应用于手动调用指定的远程 API。 + +### 创建数据源 + +创建数据源步骤: + +1. 选择左边操作栏 - 数据源 +2. 点击左上操作区 - 新建数据源 + + ![Alt text](./imgs/data-source-2.png) +3. 配置数据源类型(可选对象数组、树结构),配置数据源名称以及数据源字段 +4. 保存数据源 + + ![Alt text](./imgs/data-source-1.png) + + +### 表格组件中的应用 + +数据源主要载体为**Collection组件**,因此在使用数据源之前需要先在画布中拖放入**Collection组件**,然后在属性面板中选择需要绑定的数据源 + +![Alt text](./imgs/data-source-3.png) + +然后需要在Collection组件中放入Grid表格组件,根据提示引入配置数据,就会自动解析出表格列数据 + +![Alt text](./imgs/data-source-4.png) + +### 手动调用指定的远程 API + +低代码引擎,将所有数据源都挂载到了 `dataSourceMap` 中,并为每个数据源都提供了 `load` 方法,用于手动调用场景,比如:点击保存按钮时,需要调用后端的保存接口,提交用户填写的数据,此时可以通过数据源来提交。 + +#### 使用说明 + +`this.dataSourceMap.xxx.load()` + +- xxx 为在数据源面板设置的数据源名称 +- 支持传入请求参数,可用于覆盖在数据源面板中配置的请求参数(默认请求参数) +- load 方法返回一个 Promise + +#### 示例 + +以会议预订页面为例,为 `创建` 按钮绑定点击事件(`onClick`) + +![Alt text](./imgs/data-source-load-1.png) + +绑定点击事件处理器为 `createMeeting`,补充其实现,主要为 `this.dataSourceMap.createMeeting.load(this.state.meeting)`。 +表示将用户填写的会议信息(`this.state.meeting`),调用数据源 `addMeeting`(POST 请求),提交给后端。 +![Alt text](./imgs/data-source-load-2.png) + +其中,数据源 `addMeeting` 配置示例如下: +![Alt text](./imgs/data-source-load-3.png) + +完整代码示例如下: +```js +async function createMeeting() { + try { + const res = await this.dataSourceMap.addMeeting.load(this.state.meeting) + console.log('成功创建以下会议:', res) + } catch { + this.utils.toast({ + type: 'error', + title: '创建会议请求失败,请稍候重试或联系客服' + }) + } +} +``` + +# 数据源获取远程字段 + +在使用数据源之前,我们需要向数据源中添加属性字段,可以通过“新建字段”按钮逐个添加。 + +但某些场景下,有更高效的添加方式,比如:基于已有的 HTTP 接口响应数据,快速地创建数据源的字段。 + +## 操作步骤 + +- 打开数据源面板,新建数据源。点击获取远程数据 +- 设置请求地址、请求方式、请求参数、请求结果回调 +![数据源设置](./imgs/dataSource1.png) +- 请求成功后获取到接口字段信息,填写字段名后,保存后即可生成数据源字段信息 +![请求结果](./imgs/dataSource2.png) +![字段配置](./imgs/dataSource3.png) +![保存数据源](./imgs/dataSource4.png) + +> 如果接口请求存在跨域、鉴权等情况,无法通过“发送请求”自动填充响应数据时,可以手动将响应数据(比如:JSON 格式数据),粘贴至下方的“请求结果”编辑器中。 + +## 请求完成回调函数示例 + +- 解析对象数组 + +```javascript +function dataHandler(data) { + return data.map(v => ({ + name: v.nickName, + status: v.status + }) + ) +} +``` + + + + +# 数据源Mock数据 + +目前数据源在编辑态时只能使用Mock数据,所以我们可能需要给数据源添加Mock数据 + +## 操作步骤 + +- 打开数据源面板,选中数据源 +- 点击新增数据,添加数据并保存 +![新增数据](./imgs/dataSource5.png) + +## 使用数据源Mock数据 + +- 拖动一个Collection组件到画布中,在Collection组件属性面板上选择数据源 +- 拖动格组件到Collection中,表格组件将自动生成数据源中的字段 +![使用数据源Mock数据](not-found/dataSource6.png) + +## 更新数据源到画布 + +添加完Mock数据后,画布上绑定的数据源不会同步改变,需要手动更新,操作如下: +选中画布中的数据源,打开属性面板,点击更新数据源 +![更新数据源到画布](./imgs/dataSource7.png) diff --git a/docs/advanced-features/how-to-use-slots.md b/docs/advanced-features/how-to-use-slots.md new file mode 100644 index 0000000000..807f636d46 --- /dev/null +++ b/docs/advanced-features/how-to-use-slots.md @@ -0,0 +1,165 @@ +# 插槽的声明与使用 + +## 插槽的相关概念 + +> 插槽的概念与 vue.js 的插槽 [slot](https://cn.vuejs.org/guide/components/slots.html) 概念一致 + +我们以上述 Header组件为例,讲解插槽需要了解的核心概念: + +- 插槽名字:插槽名字默认为 default +- 作用域插槽:用于向插槽传入子组件状态 + +```vue +// Header.vue + +``` + +```vue + +``` + +如以上代码为例子,当我们使用 `Header` 组件的时候,我们可以声明 menu 插槽,并且在 menu 插槽里面获取到子组件 menu 的状态。此时即为作用域插槽。 + +## 插槽的声明 + +在区块中,我们可以通过拖入插槽的方式声明插槽。然后,我们可以在右侧设置面板设置插槽的名字,向插槽传入 props。 +如果需要传入 props,我们可以通过编辑代码写入我们需要的表达式,将 props 传入 插槽中。 + +![插槽声明](./imgs/defineslot.gif) + +我们得到的带有插槽的 schema 大致为以下样式: + +```json5 +{ + "componentName": "Slot", + "props": { + "name": "menu", + "params": [ + { + "name": "title", + "value": { + "type": "JSExpression", + "value": "this.state.ggggg" + } + } + ] + }, + "id": "25632b32", + "children": [ + { + "componentName": "Text", + "props": { + "text": "TinyEngine 前端可视化设计器,为设计器开发者提供定制服务,在线构建出自己专属的设计器。" + }, + "id": "63246b33" + } + ] +} +``` + +区块出码大致为: + +```vue + +``` + +最后,我们可以经过保存 -> 发布 -> 组件面板导入区块的流程,将区块变成可消费的组件。 + +## 插槽的使用 + +上一步,我们通过低代码的区块,或者导入的已有的组件声明插槽,那么我们将可以将组件或者区块拖入画布中,在右侧面板相关的配置项开启插槽。 + +然后画布会开启对应的插槽,我们可以往插槽中拖入编排插槽组件。 + +在拖入的组件中,我们可以通过绑定变量的方式获取传入的作用域插槽: + +![拖入使用区块插槽](./imgs/usingslot.gif) + +最终得到的 schema 大致为: + +```json5 +{ + // 组件或者区块名 + "componentName": "BlockFileName", + "props": {}, + "componentType": "Block", + "id": "363d84ba", + "children": [ + { + // 子组件是 template + "componentName": "Template", + "props": { + // slot 作为 props,说明是插槽 + "slot": { + // 插槽名称 + "name": "menu", + // 插槽参数 + "params": [ + "title" + ] + } + }, + // 插槽内容 + "children": [ + { + "componentName": "Text", + "props": { + // 这里 text 使用作用域插槽传入的变量,我们绑定变量 title 即可生效 + "text": { + "type": "JSExpression", + "value": "title" + } + }, + "id": "24212a32" + } + ], + "id": "42753254" + } + ] +} +``` + +组件的插槽,也类似于区块插槽,我们在组件物料定义插槽即可: + +```json5 +{ + // 物料 schema 定义 + "schema": { + // 定义插槽 + "slots": { + // 命名插槽,为 menu + "menu": { + // 在右侧属性面板显示的名称 + "label": { + "zh_CN": "menu" + }, + // 插槽参数名 + "params": ["title"] + } + } + } +} +``` diff --git a/docs/advanced-features/imgs/ScreenShot_20241029195609.png b/docs/advanced-features/imgs/ScreenShot_20241029195609.png new file mode 100644 index 0000000000..7a82913134 Binary files /dev/null and b/docs/advanced-features/imgs/ScreenShot_20241029195609.png differ diff --git a/docs/advanced-features/imgs/add-Function.png b/docs/advanced-features/imgs/add-Function.png new file mode 100644 index 0000000000..3e61cbc771 Binary files /dev/null and b/docs/advanced-features/imgs/add-Function.png differ diff --git a/docs/advanced-features/imgs/addAiPlugin.png b/docs/advanced-features/imgs/addAiPlugin.png new file mode 100644 index 0000000000..a9fca4c980 Binary files /dev/null and b/docs/advanced-features/imgs/addAiPlugin.png differ diff --git a/docs/advanced-features/imgs/addVar-17.png b/docs/advanced-features/imgs/addVar-17.png new file mode 100644 index 0000000000..ac217bb944 Binary files /dev/null and b/docs/advanced-features/imgs/addVar-17.png differ diff --git a/docs/advanced-features/imgs/addVar-19.png b/docs/advanced-features/imgs/addVar-19.png new file mode 100644 index 0000000000..a9db87640c Binary files /dev/null and b/docs/advanced-features/imgs/addVar-19.png differ diff --git a/docs/advanced-features/imgs/addvar-15.png b/docs/advanced-features/imgs/addvar-15.png new file mode 100644 index 0000000000..40aaf2eac8 Binary files /dev/null and b/docs/advanced-features/imgs/addvar-15.png differ diff --git a/docs/advanced-features/imgs/askToModifyPage.png b/docs/advanced-features/imgs/askToModifyPage.png new file mode 100644 index 0000000000..7c7706d865 Binary files /dev/null and b/docs/advanced-features/imgs/askToModifyPage.png differ diff --git a/docs/advanced-features/imgs/bindEvent.gif b/docs/advanced-features/imgs/bindEvent.gif new file mode 100644 index 0000000000..ec8e65e9fc Binary files /dev/null and b/docs/advanced-features/imgs/bindEvent.gif differ diff --git a/docs/advanced-features/imgs/bindVariable-16.png b/docs/advanced-features/imgs/bindVariable-16.png new file mode 100644 index 0000000000..d808d5c6d4 Binary files /dev/null and b/docs/advanced-features/imgs/bindVariable-16.png differ diff --git a/docs/advanced-features/imgs/bindVariable-18.png b/docs/advanced-features/imgs/bindVariable-18.png new file mode 100644 index 0000000000..5a6be606cf Binary files /dev/null and b/docs/advanced-features/imgs/bindVariable-18.png differ diff --git a/docs/advanced-features/imgs/blockBaseSetting.png b/docs/advanced-features/imgs/blockBaseSetting.png new file mode 100644 index 0000000000..57416ba916 Binary files /dev/null and b/docs/advanced-features/imgs/blockBaseSetting.png differ diff --git a/docs/advanced-features/imgs/blockExposeAttr.gif b/docs/advanced-features/imgs/blockExposeAttr.gif new file mode 100644 index 0000000000..d26df30c6c Binary files /dev/null and b/docs/advanced-features/imgs/blockExposeAttr.gif differ diff --git a/docs/advanced-features/imgs/blockexposeattrusage.gif b/docs/advanced-features/imgs/blockexposeattrusage.gif new file mode 100644 index 0000000000..78212fd921 Binary files /dev/null and b/docs/advanced-features/imgs/blockexposeattrusage.gif differ diff --git a/docs/advanced-features/imgs/conditionRender.gif b/docs/advanced-features/imgs/conditionRender.gif new file mode 100644 index 0000000000..6b01f916f0 Binary files /dev/null and b/docs/advanced-features/imgs/conditionRender.gif differ diff --git a/docs/advanced-features/imgs/createBlockFromPage.gif b/docs/advanced-features/imgs/createBlockFromPage.gif new file mode 100644 index 0000000000..6019158b64 Binary files /dev/null and b/docs/advanced-features/imgs/createBlockFromPage.gif differ diff --git a/docs/advanced-features/imgs/createEmptyBlock.png b/docs/advanced-features/imgs/createEmptyBlock.png new file mode 100644 index 0000000000..c0b816aa7d Binary files /dev/null and b/docs/advanced-features/imgs/createEmptyBlock.png differ diff --git a/docs/advanced-features/imgs/data-source-1.png b/docs/advanced-features/imgs/data-source-1.png new file mode 100644 index 0000000000..1c5db0484b Binary files /dev/null and b/docs/advanced-features/imgs/data-source-1.png differ diff --git a/docs/advanced-features/imgs/data-source-2.png b/docs/advanced-features/imgs/data-source-2.png new file mode 100644 index 0000000000..56a00811dc Binary files /dev/null and b/docs/advanced-features/imgs/data-source-2.png differ diff --git a/docs/advanced-features/imgs/data-source-3.png b/docs/advanced-features/imgs/data-source-3.png new file mode 100644 index 0000000000..f4f05b691d Binary files /dev/null and b/docs/advanced-features/imgs/data-source-3.png differ diff --git a/docs/advanced-features/imgs/data-source-4.png b/docs/advanced-features/imgs/data-source-4.png new file mode 100644 index 0000000000..38660039ef Binary files /dev/null and b/docs/advanced-features/imgs/data-source-4.png differ diff --git a/docs/advanced-features/imgs/data-source-load-1.png b/docs/advanced-features/imgs/data-source-load-1.png new file mode 100644 index 0000000000..0425dfef34 Binary files /dev/null and b/docs/advanced-features/imgs/data-source-load-1.png differ diff --git a/docs/advanced-features/imgs/data-source-load-2.png b/docs/advanced-features/imgs/data-source-load-2.png new file mode 100644 index 0000000000..72ab8101ad Binary files /dev/null and b/docs/advanced-features/imgs/data-source-load-2.png differ diff --git a/docs/advanced-features/imgs/data-source-load-3.png b/docs/advanced-features/imgs/data-source-load-3.png new file mode 100644 index 0000000000..556e106749 Binary files /dev/null and b/docs/advanced-features/imgs/data-source-load-3.png differ diff --git a/docs/advanced-features/imgs/dataSource1.png b/docs/advanced-features/imgs/dataSource1.png new file mode 100644 index 0000000000..83ba6ea9d1 Binary files /dev/null and b/docs/advanced-features/imgs/dataSource1.png differ diff --git a/docs/advanced-features/imgs/dataSource2.png b/docs/advanced-features/imgs/dataSource2.png new file mode 100644 index 0000000000..b36eb62653 Binary files /dev/null and b/docs/advanced-features/imgs/dataSource2.png differ diff --git a/docs/advanced-features/imgs/dataSource3.png b/docs/advanced-features/imgs/dataSource3.png new file mode 100644 index 0000000000..b18bdee65d Binary files /dev/null and b/docs/advanced-features/imgs/dataSource3.png differ diff --git a/docs/advanced-features/imgs/dataSource4.png b/docs/advanced-features/imgs/dataSource4.png new file mode 100644 index 0000000000..37cffa0ffb Binary files /dev/null and b/docs/advanced-features/imgs/dataSource4.png differ diff --git a/docs/advanced-features/imgs/dataSource5.png b/docs/advanced-features/imgs/dataSource5.png new file mode 100644 index 0000000000..ac3336285a Binary files /dev/null and b/docs/advanced-features/imgs/dataSource5.png differ diff --git a/docs/advanced-features/imgs/dataSource7.png b/docs/advanced-features/imgs/dataSource7.png new file mode 100644 index 0000000000..ba20405866 Binary files /dev/null and b/docs/advanced-features/imgs/dataSource7.png differ diff --git a/docs/advanced-features/imgs/defineslot.gif b/docs/advanced-features/imgs/defineslot.gif new file mode 100644 index 0000000000..f8218b1f3f Binary files /dev/null and b/docs/advanced-features/imgs/defineslot.gif differ diff --git a/docs/advanced-features/imgs/icon-code.png b/docs/advanced-features/imgs/icon-code.png new file mode 100644 index 0000000000..64f1cfa91c Binary files /dev/null and b/docs/advanced-features/imgs/icon-code.png differ diff --git a/docs/advanced-features/imgs/openAiWindow.png b/docs/advanced-features/imgs/openAiWindow.png new file mode 100644 index 0000000000..408b5f9ab8 Binary files /dev/null and b/docs/advanced-features/imgs/openAiWindow.png differ diff --git a/docs/advanced-features/imgs/pageJs.png b/docs/advanced-features/imgs/pageJs.png new file mode 100644 index 0000000000..ec37d640d1 Binary files /dev/null and b/docs/advanced-features/imgs/pageJs.png differ diff --git a/docs/advanced-features/imgs/pageJsContent.png b/docs/advanced-features/imgs/pageJsContent.png new file mode 100644 index 0000000000..b7ab3c0f92 Binary files /dev/null and b/docs/advanced-features/imgs/pageJsContent.png differ diff --git a/docs/advanced-features/imgs/pageJsJsxFunc.png b/docs/advanced-features/imgs/pageJsJsxFunc.png new file mode 100644 index 0000000000..ee02bc544b Binary files /dev/null and b/docs/advanced-features/imgs/pageJsJsxFunc.png differ diff --git a/docs/advanced-features/imgs/pageJsMethod.png b/docs/advanced-features/imgs/pageJsMethod.png new file mode 100644 index 0000000000..3189e5a982 Binary files /dev/null and b/docs/advanced-features/imgs/pageJsMethod.png differ diff --git a/docs/advanced-features/imgs/parseJxBindingJsxFunc.png b/docs/advanced-features/imgs/parseJxBindingJsxFunc.png new file mode 100644 index 0000000000..8f4f0adca8 Binary files /dev/null and b/docs/advanced-features/imgs/parseJxBindingJsxFunc.png differ diff --git a/docs/advanced-features/imgs/parseJxBindingJsxFuncResult.png b/docs/advanced-features/imgs/parseJxBindingJsxFuncResult.png new file mode 100644 index 0000000000..876aaf389a Binary files /dev/null and b/docs/advanced-features/imgs/parseJxBindingJsxFuncResult.png differ diff --git "a/docs/advanced-features/imgs/state-isLogin\344\270\272false\346\227\266.png" "b/docs/advanced-features/imgs/state-isLogin\344\270\272false\346\227\266.png" new file mode 100644 index 0000000000..538949c1f2 Binary files /dev/null and "b/docs/advanced-features/imgs/state-isLogin\344\270\272false\346\227\266.png" differ diff --git "a/docs/advanced-features/imgs/state-isLogin\344\270\272ture\346\227\266.png" "b/docs/advanced-features/imgs/state-isLogin\344\270\272ture\346\227\266.png" new file mode 100644 index 0000000000..f169ffec20 Binary files /dev/null and "b/docs/advanced-features/imgs/state-isLogin\344\270\272ture\346\227\266.png" differ diff --git a/docs/advanced-features/imgs/use-npm.png b/docs/advanced-features/imgs/use-npm.png new file mode 100644 index 0000000000..479ea0776c Binary files /dev/null and b/docs/advanced-features/imgs/use-npm.png differ diff --git a/docs/advanced-features/imgs/useBlock.png b/docs/advanced-features/imgs/useBlock.png new file mode 100644 index 0000000000..62413250ce Binary files /dev/null and b/docs/advanced-features/imgs/useBlock.png differ diff --git a/docs/advanced-features/imgs/useLoop.gif b/docs/advanced-features/imgs/useLoop.gif new file mode 100644 index 0000000000..b679331904 Binary files /dev/null and b/docs/advanced-features/imgs/useLoop.gif differ diff --git a/docs/advanced-features/imgs/usingslot.gif b/docs/advanced-features/imgs/usingslot.gif new file mode 100644 index 0000000000..372d179cd6 Binary files /dev/null and b/docs/advanced-features/imgs/usingslot.gif differ diff --git a/docs/advanced-features/imgs/utils4.png b/docs/advanced-features/imgs/utils4.png new file mode 100644 index 0000000000..4160e7f309 Binary files /dev/null and b/docs/advanced-features/imgs/utils4.png differ diff --git a/docs/advanced-features/imgs/viewRender.png b/docs/advanced-features/imgs/viewRender.png new file mode 100644 index 0000000000..6e1494fefd Binary files /dev/null and b/docs/advanced-features/imgs/viewRender.png differ diff --git a/docs/advanced-features/integrating-chatgpt-for-simple-pages.md b/docs/advanced-features/integrating-chatgpt-for-simple-pages.md new file mode 100644 index 0000000000..bbf45fdfc5 --- /dev/null +++ b/docs/advanced-features/integrating-chatgpt-for-simple-pages.md @@ -0,0 +1,22 @@ +### 一、创建引入AI插件的设计器 + +AI生成页面的能力,以可拔插插件的形式,依附在设计器上。同时,AI生成的页面,也将在设计器的画布中渲染出来。 +所以要使用AI生成页面的能力,需要先创建引入了AI插件的设计器,如下图所示。创建设计器参考[此文档](../about-designer/create-designer.md "portal") +![引入AI插件](./imgs/addAiPlugin.png) + +### 二、打开AI聊天窗口 + +如果设计器已经引入AI插件,进入设计器后,左下角会有个机器人图标,如下图所示,单击即可打开聊天窗,开始与AI交互。 +![打开AI聊天窗口](./imgs/openAiWindow.png) + +### 三、通过提问,让AI生成页面 + +我们知道如ChatGPT之类的大模型,可以依照指令生成代码。在这里AI生成的代码会直接渲染在画布中。 + +**特别提示**:我们可以让AI直接使用预置的区块 +![AI插件提问](./imgs/useBlock.png) + +### 四、通过继续提问,让AI修改生成的页面 + +![AI插件修改页面](./imgs/askToModifyPage.png) + diff --git a/docs/advanced-features/js-panel-and-event-binding.md b/docs/advanced-features/js-panel-and-event-binding.md new file mode 100644 index 0000000000..d155872bbe --- /dev/null +++ b/docs/advanced-features/js-panel-and-event-binding.md @@ -0,0 +1,103 @@ +# 页面JS +> 1 在常规代码开发中,我们需要为某个区块或者某个元素添加一些事件,比如点击事件,同一个页面或者区块的事件会统一保存到对应的页面JS中 +> 2 很多时候我们需要自定义一些方法去复用一些逻辑,也需要用到页面js +> 3 需要注意的是当前的页面js只能使用声明函数,不能使用函数表达式声明函数,也不能在页面js中定义其他的变量 +> 4 页面js中可以通过 **this** 访问当前页面的 **state**,全局的 **stores**, 以及**t**函数(获取国际化词条) + +## 页面JS基本使用与管理 +下面将通过两个示例分别展示如何使用 +### 为图片添加点击事件 +![为图片添加点击事件](./imgs/pageJs.png) +- 选中区块或者画布中元素 +- 右侧面板高级选项中点击添加 onClick事件出现弹框 +- 修改方法名,如果需要参数则打开开关 +- 点击保存 + +![修改事件代码](./imgs/pageJsContent.png) +- 代码保存之后点击左侧js面板,可以发现刚刚创建的getLink就在这里 +- 现在只需要在这里写对应的逻辑即可 + + +### 创建普通方法在生命周期中使用 +![创建普通方法在生命周期中使用](./imgs/pageJsMethod.png) +1. 在js页面中添加getA方法 +2. 点击页面 +3. 点击当前页面设置 +4. 点击添加生命周期 +5. 选中setup出现setup弹框 +6. 会自动创建一个setup函数,在里面使用getA()即可 +7. 也可以在这个弹框里面直接跳转到其他生命周期函数中调用,然后点击保存 + +### 出码结果 +通过上述的一些简单操作,我们可以通过TinyEngine提供的 “将代码生成本地Vue”的功能,将上述操作过后的代码生成到本地查看 +```vue + + + +``` +如上代码所示:在TinyEngine中编辑的方法,为图片添加的点击事件等都有生成,并且会默认暴露出 **t**函数(国际化,具体可参考国际化教程如何使用) 和全局stores(pinia)状态 + +## 页面JS高级功能 + +### 使用JSX + +部分组件需要使用到JSX代码来自定义渲染逻辑,可以在JS面板中定义好JSX渲染函数,然后绑定到组件的属性上。比如 TinyVue 中的 Tree 树形组件,此组件的 `render-content` 属性可以传递一个渲染函数,示例如下 + +> 函数类型或签名需参考组件的文档 + +1. 首先在页面JS中定义渲染函数,这里的函数参数的定义来自于 TinyVue 的文档 + +![在页面JS中定义渲染函数](./imgs/pageJsJsxFunc.png) + +2. 然后选中 Tree 树形组件,在属性面板中找到 `render-content` 属性,点击右侧变量绑定按钮,变量绑定弹窗打开后,绑定自定义处理函数 + +![绑定JSX函数](./imgs/parseJxBindingJsxFunc.png) + +3. 绑定成功后效果如下 + +![绑定JSX函数效果](./imgs/parseJxBindingJsxFuncResult.png) + +## 总结 +页面js能够很方便的为元素或区块添加事件,通过可视化的优势快速定位到某个元素。同时也很方便的提供一些状态获取方法,国际化词条获取方法等。 \ No newline at end of file diff --git a/docs/advanced-features/loop-rendering.md b/docs/advanced-features/loop-rendering.md new file mode 100644 index 0000000000..d78e66d8c0 --- /dev/null +++ b/docs/advanced-features/loop-rendering.md @@ -0,0 +1,47 @@ +# 循环渲染 + +页面可能有若干份重复的、动态生成的内容,例如商品列表页、表格数据。这时候需要用到循环渲染。您可以在高级面板中指定循环数据绑定的变量、迭代的变量名、索引变量名、以及唯一的key。 + +1. 拖拽组件至画布,例如拖拽一个“段落“组件。 +2. 添加变量,例如loop.isLogin。 + + **图 1** 添加变量 + + ![addVar-17](./imgs/addVar-17.png) + +3. 选中组件,在组件属性设置面板选择“高级”。 +4. 单击“循环数据“后的![](figures/icon-code.png),进行变量绑定。 +5. 选择绑定的变量,单击“确定”。 + + **图 2** 绑定变量 + + ![绑定变量-18](./imgs/bindVariable-18.png) + +6. 为展示内容添加变量,默认为item。 + + 绑定成功后,查看渲染效果。 + + **图 3** 添加变量 + ![绑定变量-19](./imgs/addVar-19.png) + + **图 4** 查看渲染效果 + + ![查看渲染效果](./imgs/viewRender.png) + +相关概念关联: + +- 循环数据,即需要循环渲染的数组,在这里是state.imageList。 +- 迭代变量名,在循环渲染子项对应的变量名,默认为item。 +- 索引变量名,循环渲染的索引变量名,默认为index。 +- key,标识唯一的key,默认为index。 + +最终出码: + +```html + +``` + diff --git a/docs/advanced-features/using-utils-methods.md b/docs/advanced-features/using-utils-methods.md new file mode 100644 index 0000000000..6894322a8e --- /dev/null +++ b/docs/advanced-features/using-utils-methods.md @@ -0,0 +1,169 @@ +# 工具类方法 utils + +## 基本概念 + +在常规代码开发中,我们通常会将一些高频率用到的一些代码片段抽离出来业务代码,使其成为一个公共函数,减少重复的代码,从而达到代码复用的目的。 +同样,在低代码开发中,我们不可避免的需要编写一些高代码进行组合开发,这里同样存在存储一些公共函数以供各处调用需求。工具类方法 utils 就是诞生在这样的背景之下,我们可以将一些可复用的公共函数编写到工具类方法中,也可以将一些 npm 包引用到utils中,供后续调用。 + +**注意:utils 是应用级别的,即引入之后,即可在该应用下任意页面中进行调用** + +## 分类 + +### function 工具类 + +提供输入框,直接编写函数代码 + +![添加工具类教程图](not-found/zh-cn_image_0000001994511922.png) + +如上图: +- 第一步,点击添加工具类,选择 function +- 第二步,输入工具类的名称 +- 第三步,编写函数代码 + +最后点击保存,函数工具类就添加成功了。 + +实际出码效果: + +```javascript +// utils.js +const testUtils = function utils() { + console.log(321) +} + +export { testUtils } +``` + +### npm 工具类 + +对于一些简单的公共函数来说,直接添加 function 工具类会很方便,但是对于一些比较复杂的公共函数或者第三方的一些公共函数来说,直接编写函数并不是一个理想的方式,所以,我们还提供了 npm 工具类,以供引入 npm 包。 + +![添加npm工具类](./imgs/use-npm.png) + +如上图: +- 第一步,点击添加工具类,选择 npm +- 第二步,按需填写各项参数 +- 第三部,点击保存按钮 + +各项参数解释: + +| 参数名 | 解释 | +| ---------- | ---------------| +| 名称 | utils 名称 | +| 包名 | npm 包名 | +| 导出名称 | import 时的命名,如果是非解构,则可以自由命名,如果是解构,则 npm 包的导出必须要有该名称 | +| 是否解构 | 解构则使用如 `import { export1 } from 'module'` 的方式导入 | +| 入口路径 | 有些 npm 包的方法并不在默认导出中,如 `import { foo , bar } from "module-name/path/to/specific/un-exported/file";` 这时候,我们就需要填写入口路径 | +| 版本号 | npm 包的版本号,需要符合 npm 包版本规范,详见 [semver](https://www.npmjs.com/package/semver),如不填则默认为 latest | +| cdn 链接 | 如果我们的页面使用了 npm utils,则需要在手动录入 npm cdn 链接,否则可能会造成页面预览失败 | + +#### 什么是 cdn 链接? + +cdn 链接就是 npm 包在浏览器直接可用的链接,如:[https://unpkg.com/](https://unpkg.com/),提供了大部分的 cdn 链接,我们可以从上面获取。 +在页面预览中,我们并不会对所有代码和依赖进行转译,npm 依赖需要以 cdn 方式进行引入,所以,如果添加了 npm 工具类,在预览失败时,请确保已添加 cdn 链接 + +**预置的 cdn 链接** + +目前在Vue技术栈中,为了使用的方便,我们已经预置了一部分 npm 包的 cdn 链接,所以使用以下 npm 包时,无需添加 cdn 链接 + +- @vueuse/core +- @vueuse/shared +- axios +- pinia +- vue +- vue-i18n +- vue-router +- vue/server/renderer +- @opentiny/vue + +#### 实际出码结果示例 + +假设我们添加了 lodash 工具类 + +![添加 lodash 工具类示例](./imgs/ScreenShot_20241029195609.png) + +则实际出码结果为: + +```javascript +// utils.js +import lodash from 'lodash' + +export { lodash } +``` +#### 应用发布 + +应用发布时,会对整体应用出码,这时候添加的 npm 工具类,也会将 npm 包写入到 package.json 依赖中 + +```json +// package.json +{ + "dependencies": { + "lodash": "latest" + } +} +``` + +## 示例 + +### 添加 npm utils + +以按钮组件点击时显示Loading效果为例 + +1. 在资源管理面板新建工具类,引入 Loading + +填写以下参数: + + +| 名称 | Loading | +| ---------- | ------------------- | +| 包名 | @opentiny/vue | +| 导出名称 | Loading | +| 是否解构 | 是 | +| 入口路径 | 不填 | +| 版本号 | 0.1.20 | + +2. 对元素绑定事件,以按钮组件的 onClick 为例 +3. 在事件回调函数中编写代码,使用 Loading 组件 + +代码示例: + +```javascript +function handleOnClick(event) { + this.loadingInstance = this.utils.Loading.service({ + text: "加载中", + target: document.getElementById("tiny-loading1"), + }); + setTimeout(() => { + this.loadingInstance.close(); + }, 3000); +} +``` + +4. 预览组件效果 + +![效果](./imgs/utils4.png) + +### 添加 function utils + +1. 点击添加工具类,选择 function ,填入名称和函数 + +![添加Function示意图](./imgs/add-Function.png) + +填入函数为 +```javascript +function isNil(value) { + return value == null +} +``` + +2. 在JS面板的函数中使用 + +我们可以在JS面板或者页面生命周期函数中通过 `this.utils.isNil` 方式使用我们自定义的函数 + +```javascript +function xxxHandler(value) { + if(this.utils.isNil(value)) { + return + } + // ... other logic +} +``` \ No newline at end of file diff --git a/docs/api/api-overview.md b/docs/api/api-overview.md new file mode 100644 index 0000000000..d62cd217b9 --- /dev/null +++ b/docs/api/api-overview.md @@ -0,0 +1,36 @@ +# API 总览 + +TinyEngine的API主要分为`TinyEngine能力API`和`开源后端接口API`。 + +## TinyEngine能力API +主要提供以下几类API +- 主包API +- 画布API +- 布局API +- 物料API +- 属性面板API + + +## 后端接口API +主要提供以下几类API +- AI功能接口 +- 应用管理 +- 区块分类 +- 应用工具类管理 +- 区块管理 +- 数据源管理 +- DSL代码生成 +- 国际化管理 +- 物料中心 +- 页面管理 +- APP服务 + + +## API约定 +### 元服务API + +所有的元服务,全都为use开头的驼峰式命名。如我们内置的useMaterial,useCanvas等。 + +## 声明 +以上API处于公测阶段,具体API可能会根据实际需求有所调整 + diff --git a/docs/api/backend-api/ai-function-api.md b/docs/api/backend-api/ai-function-api.md new file mode 100644 index 0000000000..5fbcb60a80 --- /dev/null +++ b/docs/api/backend-api/ai-function-api.md @@ -0,0 +1,49 @@ +# AI功能接口 + +## AI生成简单页面 + + + +### 基本信息 + +**Path:** /app-center/api/ai/chat + +**Method:** POST + +**接口描述:** + +

异常响应实例

+

{ "data":null, "locale":"zh-cn", "error": { "code":"CM002", "message":"参数错误"}, "err_msg":"Additional properties are not allowed ('role1' was unexpected) - 'messages.0'"}

+ + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
foundationModelobject非必须AI 大模型信息
├─ manufacturerstring非必须大模型厂商

枚举: openai,baidu

├─ modelstring非必须大模型名称

枚举: gpt-3.5-turbo,ERNIE-Bot-turbo

messagesobject []必须chat信息

item 类型: object

├─ rolestring必须信息角色
├─ contentstring必须信息内容
├─ namestring必须角色名称
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ originalResponseobject必须请求AI api返回对象
├─ idstring非必须请求的唯一标识符
├─ objectstring非必须响应对象的类型
├─ creatednumber非必须响应创建的时间戳
├─ choicesobject []必须

item 类型: object

├─ indexnumber非必须生成文本的索引号
├─ messageobject非必须AI返回的信息
├─ rolestring非必须角色
├─ contentstring非必须内容
├─ finish_reasonstring非必须完成生成的原因,通常是"stop"
├─ usageobject非必须token使用量
├─ prompt_tokensnumber非必须
├─ completion_tokensnumber非必须
├─ total_tokensnumber非必须
├─ schemaobject非必须页面schema
├─ statusnumber非必须状态
├─ messagestring非必须信息
├─ schemaobject非必须页面schema
├─ componentNamestring非必须组件或区块名
├─ cssstring非必须全局css样式
├─ propsobject非必须属性
├─ lifeCyclesobject非必须生命周期
├─ childrenstring []非必须子组件列表或字符串

item 类型: string

├─ 非必须
├─ dataSourceobject非必须数据源
├─ liststring []非必须

item 类型: string

├─ 非必须
├─ stateobject非必须页面的state
├─ methodsobject非必须声明的方法
├─ utilsstring []非必须工具类

item 类型: string

├─ 非必须
├─ bridgestring []非必须桥接源

item 类型: string

├─ 非必须
├─ inputsstring []非必须

item 类型: string

├─ 非必须
├─ outputsstring []非必须

item 类型: string

├─ 非必须
├─ replyWithoutCodestring非必须去掉代码的回复内容
localestring非必须
+ diff --git a/docs/api/backend-api/app-management.md b/docs/api/backend-api/app-management.md new file mode 100644 index 0000000000..0ab112eb84 --- /dev/null +++ b/docs/api/backend-api/app-management.md @@ -0,0 +1,627 @@ +# 应用管理 + +## 区块/物料构建类型任务状态查询 + + + +### 基本信息 + +**Path:** /material-center/api/tasks/:id + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ----- | ---------- | +| id | 12312 | 构建任务id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须任务id
├─ teamIdnumber非必须团队id 预留字段无用

枚举: 0

├─ taskTypeIdnumber非必须任务类型

枚举: 0,1,2,3,4,5

├─ uniqueIdnumber非必须被构建业务id 例如 应用、设计器等
├─ taskNamenull非必须任务名称
├─ taskStatusnumber非必须任务状态

枚举: 0,1,2,3

├─ taskResultstring非必须任务执行结果
├─ progressstring非必须当前执行步骤
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ progress_percentnumber非必须任务执行进度0-100

最大值: 100

最小值: 0

localestring非必须
+ + +## 应用schema + + + +### 基本信息 + +**Path:** /app-center/api/apps/schema/:id + +**Method:** GET + +**接口描述:** + +

version 暂且为空,预留

+ + +### 请求参数 + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| id | 866 | 应用id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ metaobject非必须应用基本信息
├─ namestring非必须应用名称
├─ tenantnumber非必须从属组织
├─ git_groupstring非必须应用git分组-预留字段
├─ project_namestring非必须git仓库地址
├─ descriptionstring非必须描述
├─ branchstring非必须git默认提交代码分支
├─ is_demonull非必须是否为系统内demo应用
├─ global_stateobject []非必须应用全局状态 前端管理 服务端存json

item 类型: object

├─ idstring非必须
├─ stateobject非必须
├─ namestring非必须
├─ gettersobject非必须
├─ countobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ actionsobject非必须
├─ actionsobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ appIdstring非必须应用id
├─ creatorstring非必须创建者
├─ gmt_createstring非必须
├─ gmt_modifiedstring非必须
├─ dataSourceobject非必须应用数据源
├─ listobject []非必须数据源列表

item 类型: object

├─ idnumber必须数据源id
├─ namestring必须数据源名称
├─ dataobject必须数据源内容
├─ dataobject []非必须

item 类型: object

├─ 1111string必须
├─ teststring必须
├─ test1string必须
├─ _idstring必须
├─ idstring必须
├─ urlstring必须
├─ namestring必须
├─ tenantstring必须
├─ contentstring必须
├─ versionstring必须
├─ frameworkstring必须
├─ publishedstring必须
├─ componentsstring必须
├─ created_atstring必须
├─ updated_atstring必须
├─ descriptionstring必须
├─ published_atstring必须
├─ last_build_infostring必须
├─ labelstring必须
├─ valuestring必须
├─ pidstring必须
├─ _RIDstring必须
├─ dslstring必须
├─ statestring必须
├─ themestring必须
├─ blocksstring必须
├─ lateststring必须
├─ pluginsstring必须
├─ toolbarstring必须
├─ materialstring必须
├─ sub_countstring必须
├─ editor_urlstring必须
├─ vscode_urlstring必须
├─ source_tplsstring必须
├─ platform_urlstring必须
├─ platform_descstring必须
├─ material_historystring必须
├─ isSelectedstring必须
├─ materialsstring必须
├─ material_versionstring必须
├─ appstring必须
├─ tplstring必须
├─ datastring必须
├─ descstring必须
├─ numbernumber必须
├─ linkstring必须
├─ switchnull必须
├─ slidernull必须
├─ agestring必须
├─ typestring非必须
├─ columnsobject []非必须

item 类型: object

├─ namestring必须
├─ titlestring必须
├─ fieldstring必须
├─ typestring必须
├─ formatobject必须
├─ maxnumber非必须
├─ minnumber非必须
├─ dateTimeboolean非必须
├─ requiredboolean非必须
├─ stringTypestring非必须
├─ optionsobject非必须
├─ uristring非必须
├─ methodstring非必须
├─ isSyncboolean非必须
├─ dataHandlerobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ willFetchobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ shouldFetchobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ errorHandlerobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ tplnull必须预留字段
├─ appstring必须关联app
├─ descnull必须描述
├─ created_bynull必须
├─ updated_bynull必须
├─ created_atstring必须创建时间
├─ updated_atstring必须更新时间
├─ dataHandlerobject非必须数据处理
├─ typestring非必须类型
├─ valuestring非必须
├─ i18nobject非必须国际化词条
├─ zh_CNobject非必须简体中文
├─ lowcode.c257d5e8string非必须
├─ lowcode.61c8ac8cstring非必须
├─ lowcode.f53187a0string非必须
├─ lowcode.97ad00ddstring非必须
├─ en_USobject非必须美式英语
├─ lowcode.c257d5e8string非必须
├─ lowcode.61c8ac8cstring非必须
├─ lowcode.f53187a0string非必须
├─ lowcode.97ad00ddstring非必须
├─ componentsTreeobject []非必须应用页面+文件夹

item 类型: object

├─ stateobject必须状态
├─ newsListobject []非必须

item 类型: object

├─ titlestring必须
├─ datestring必须
├─ pictureListobject []非必须

item 类型: object

├─ titlestring必须
├─ datestring必须
├─ titleListobject []非必须

item 类型: object

├─ titlestring必须
├─ datestring必须
├─ componentsobject []非必须

item 类型: object

├─ namestring必须
├─ textstring必须
├─ pageConfigobject非必须
├─ componentobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ attrsobject非必须
├─ currentPagenumber非必须
├─ pageSizenumber非必须
├─ pageSizesnumber []非必须

item 类型: number

├─ 非必须
├─ totalnumber非必须
├─ layoutstring非必须
├─ componentsTotalnumber非必须
├─ renderf5956ed2object []非必须

item 类型: object

├─ labelstring必须
├─ valuestring必须
├─ _RIDstring必须
├─ renderb52aeac9object []非必须

item 类型: object

├─ frameworkstring必须
├─ materialsstring必须
├─ namestring必须
├─ descriptionstring必须
├─ idstring必须
├─ _RIDstring必须
├─ render7e97d9c7object []非必须

item 类型: object

├─ namestring必须
├─ descriptionstring必须
├─ idstring必须
├─ _RIDstring必须
├─ listobject []非必须

item 类型: object

├─ imgUrlstring必须
├─ titlestring必须
├─ descriptionstring必须
├─ buttonTextstring非必须
├─ messageobject []非必须

item 类型: object

├─ titlestring必须
├─ descriptionstring必须
├─ buttonTextstring必须
├─ leftboolean非必须
├─ linkstring必须
├─ rightboolean非必须
├─ entranceDataobject []非必须

item 类型: object

├─ idstring必须
├─ titlestring必须
├─ descriptionstring必须
├─ showEditorboolean非必须
├─ showMoreboolean非必须
├─ visableDataobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ validRulesobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ newMaterialboolean非必须
├─ deleteModalboolean非必须
├─ chosePlatformModalboolean非必须
├─ materialNamestring非必须
├─ materialVersionstring非必须
├─ materialDescstring非必须
├─ materialStackstring非必须
├─ render1afb211aobject []非必须

item 类型: object

├─ labelstring必须
├─ valuestring必须
├─ idstring必须
├─ _RIDstring非必须
├─ render5e9a9729object []非必须

item 类型: object

├─ idstring非必须
├─ namestring非必须
├─ frameworkstring非必须
├─ componentsstring非必须
├─ contentstring非必须
├─ urlstring非必须
├─ published_atstring非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ publishedstring非必须
├─ last_build_infostring非必须
├─ tenantstring非必须
├─ versionstring非必须
├─ descriptionstring非必须
├─ render7536dfdcobject []非必须

item 类型: object

├─ idstring必须
├─ namestring必须
├─ frameworkstring必须
├─ componentsstring必须
├─ contentstring必须
├─ urlstring必须
├─ published_atstring必须
├─ created_atstring必须
├─ updated_atstring必须
├─ publishedstring必须
├─ last_build_infostring必须
├─ tenantstring必须
├─ versionstring必须
├─ descriptionstring必须
├─ _RIDstring非必须
├─ platformstring []非必须

item 类型: string

├─ 非必须
├─ optionsobject []非必须

item 类型: object

├─ valuestring必须
├─ labelstring必须
├─ searchTypestring非必须
├─ rendere091744cobject []非必须

item 类型: object

├─ idstring必须
├─ namestring必须
├─ themestring必须
├─ materialstring必须
├─ pluginsstring必须
├─ toolbarstring必须
├─ editor_urlstring必须
├─ platform_descstring必须
├─ published_atstring必须
├─ created_atstring必须
├─ updated_atstring必须
├─ statestring必须
├─ platform_urlstring必须
├─ vscode_urlstring必须
├─ publishedstring必须
├─ blocksstring必须
├─ last_build_infostring必须
├─ tenantstring必须
├─ descriptionstring必须
├─ lateststring必须
├─ material_historystring必须
├─ source_tplsstring必须
├─ dslstring必须
├─ sub_countstring必须
├─ _RIDstring必须
├─ showPopperboolean非必须
├─ formDataobject []非必须

item 类型: object

├─ keystring必须
├─ valuestring必须
├─ versionobject []非必须

item 类型: object

├─ labelstring必须
├─ valuestring必须
├─ companyobject []非必须

item 类型: object

├─ labelstring必须
├─ valuestring必须
├─ danweiobject []非必须

item 类型: object

├─ labelstring必须
├─ valuestring必须
├─ loop_6fcaf983object []非必须

item 类型: object

├─ titlestring必须
├─ numberstring必须
├─ idstring必须
├─ _RIDstring必须
├─ dataDisknumber []非必须

item 类型: number

├─ 非必须
├─ navActivenumber非必须
├─ methodsobject必须声明方法
├─ aaobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ linkClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ queryobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ getTableDataobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ clearSelectedobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ goCreateobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ playVideoobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ toRouterobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ gotoHomeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ showEditorobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ selectLadderobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ saveobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ cancelobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ handleAddMaterialobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ handleCloseNewMaterialobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ closeDeleteModalobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ handleCloseChosePlatformobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ openChosePlatformobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ openDeleteModalobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ handleConfirmCreateobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ handleClickzzcobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ gotoMymaterialobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ componentNamestring必须组件名称
├─ cssstring必须全局css样式
├─ propsobject必须属性
├─ lifeCyclesobject必须生命周期
├─ childrenobject []必须子组件或子节点

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ stylestring非必须
├─ classNamestring非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onGotoHomeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ dataSourcenumber非必须
├─ layoutstring非必须
├─ totalnumber非必须
├─ pageSizenumber非必须
├─ currentPagenumber非必须
├─ srcstring非必须
├─ visibleobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ titlestring非必须
├─ onCloseobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ widthnumber非必须
├─ triggerstring非必须
├─ modelValueboolean非必须
├─ textstring非必须
├─ editConfigobject非必须
├─ triggerstring非必须
├─ modestring非必须
├─ showStatusboolean非必须
├─ columnsobject []非必须

item 类型: object

├─ typestring必须
├─ widthnumber必须
├─ fieldstring必须
├─ titlestring必须
├─ dataobject []非必须

item 类型: object

├─ idstring必须
├─ namestring必须
├─ citystring必须
├─ employeesnumber必须
├─ created_datestring必须
├─ booleboolean必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ stylestring非必须
├─ spanstring,number非必须
├─ textstring非必须
├─ namestring非必须
├─ classNameobject,string非必须
├─ heightstring非必须
├─ arrowstring非必须
├─ indicator-positionstring非必须
├─ autoplayboolean非必须
├─ loopboolean非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ refstring非必须
├─ visible-arrowboolean非必须
├─ popper-classstring非必须
├─ placementstring非必须
├─ titlestring非必须
├─ widthstring非必须
├─ visibleobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ modelobject非必须
├─ propstring非必须
├─ append-to-bodyboolean非必须
├─ layoutstring非必须
├─ totalnumber非必须
├─ pageSizenumber非必须
├─ currentPagenumber非必须
├─ typestring非必须
├─ labelWidthstring非必须
├─ labelPositionstring非必须
├─ inlineboolean非必须
├─ sizestring非必须
├─ label-alignboolean非必须
├─ disabledboolean非必须
├─ label-positionstring非必须
├─ label-suffixstring非必须
├─ label-widthstring非必须
├─ editConfigobject非必须
├─ triggerstring非必须
├─ modestring非必须
├─ showStatusboolean非必须
├─ headerAlignstring非必须
├─ alignstring非必须
├─ columnsobject []非必须

item 类型: object

├─ titlestring必须
├─ widthnumber必须
├─ headerAlignstring必须
├─ childrenobject []必须

item 类型: object

├─ fieldstring必须
├─ titlestring必须
├─ headerAlignstring必须
├─ childrenobject []必须

item 类型: object

├─ fieldstring必须
├─ titlestring必须
├─ headerAlignstring必须
├─ childrenobject []必须

item 类型: object

├─ fieldstring必须
├─ titlestring必须
├─ headerAlignstring非必须
├─ alignstring必须
├─ widthnumber必须
├─ fieldstring必须
├─ typestring非必须
├─ slotsobject必须
├─ defaultobject非必须
├─ typestring非必须
├─ valueobject []非必须

item 类型: object

├─ componentNamestring必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ textobject,string非必须
├─ stylestring非必须
├─ modelValueobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ modelboolean非必须
├─ idstring必须
├─ propsobject非必须
├─ stylestring非必须
├─ dataobject []非必须

item 类型: object

├─ idstring必须
├─ itemstring必须
├─ citystring必须
├─ employeesnumber必须
├─ created_datestring必须
├─ created_date2string必须
├─ booleboolean必须
├─ namestring必须
├─ faultnull必须
├─ addressesobject必须
├─ 42a216b5-6f67-4cd0-9453-0da3ce0a1f3bobject []非必须

item 类型: object

├─ versionstring必须
├─ addrstring必须
├─ OS-EXT-IPS-MAC:mac_addrstring必须
├─ OS-EXT-IPS:typestring必须
├─ OS-EXT-IPS:port_idstring必须
├─ 9573a661-a105-4e92-b8be-e728ae37e5f0object []非必须

item 类型: object

├─ versionstring非必须
├─ addrstring非必须
├─ OS-EXT-IPS-MAC:mac_addrstring非必须
├─ OS-EXT-IPS:typestring非必须
├─ OS-EXT-IPS:port_idstring非必须
├─ flavorobject必须
├─ diskstring非必须
├─ vcpusstring非必须
├─ ramstring非必须
├─ idstring非必须
├─ namestring非必须
├─ accessIPv4string必须
├─ accessIPv6string必须
├─ statusstring必须
├─ progressnumber必须
├─ hostIdstring必须
├─ updatedstring必须
├─ createdstring必须
├─ metadataobject必须
├─ lockScenestring非必须
├─ agency_namestring非必须
├─ charging_modestring非必须
├─ vpc_idstring非必须
├─ lockSourcestring非必须
├─ lockSourceIdstring非必须
├─ metering.imagetypestring非必须
├─ image_namestring非必须
├─ metering.resourcespeccodestring非必须
├─ My Server Namestring非必须
├─ os_typestring非必须
├─ metering.resourcetypestring非必须
├─ metering.image_idstring非必须
├─ os_bitstring非必须
├─ lockCheckEndpointstring非必须
├─ cascaded.instance_extrainfostring非必须
├─ metering.product_idstring非必须
├─ metering.order_idstring非必须
├─ tagsstring []必须

item 类型: string

├─ 非必须
├─ descriptionstring必须
├─ lockedboolean必须
├─ config_drivestring必须
├─ tenant_idstring必须
├─ user_idstring必须
├─ key_namenull必须
├─ os-extended-volumes:volumes_attachedobject []必须

item 类型: object

├─ idstring必须
├─ delete_on_terminationstring必须
├─ devicestring必须
├─ bootIndexstring,null必须
├─ OS-EXT-STS:task_statenull必须
├─ OS-EXT-STS:power_statenumber必须
├─ OS-EXT-STS:vm_statestring必须
├─ OS-EXT-SRV-ATTR:hoststring必须
├─ OS-EXT-SRV-ATTR:instance_namestring必须
├─ OS-EXT-SRV-ATTR:hypervisor_hostnamestring必须
├─ OS-DCF:diskConfigstring必须
├─ OS-EXT-AZ:availability_zonestring必须
├─ os:scheduler_hintsobject必须
├─ groupstring []非必须

item 类型: string

├─ 非必须
├─ OS-EXT-SRV-ATTR:root_device_namestring必须
├─ OS-EXT-SRV-ATTR:ramdisk_idstring必须
├─ enterprise_project_idstring必须
├─ OS-EXT-SRV-ATTR:user_datastring必须
├─ OS-SRV-USG:launched_atstring必须
├─ OS-EXT-SRV-ATTR:kernel_idstring必须
├─ OS-EXT-SRV-ATTR:launch_indexnumber必须
├─ host_statusstring必须
├─ OS-EXT-SRV-ATTR:reservation_idstring必须
├─ OS-EXT-SRV-ATTR:hostnamestring必须
├─ OS-SRV-USG:terminated_atnull必须
├─ sys_tagsobject []必须

item 类型: object

├─ keystring必须
├─ valuestring必须
├─ security_groupsobject []必须

item 类型: object

├─ idstring必须
├─ namestring必须
├─ imageobject必须
├─ idstring非必须
├─ hypervisornull必须
├─ auto_terminate_timestring必须
├─ cpu_optionsobject必须
├─ hw:cpu_threadsnull非必须
├─ activestring非必须
├─ horizontalboolean非必须
├─ gutterstring非必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ spannumber,string非必须
├─ styleobject,string非必须
├─ textobject,string非必须
├─ offsetnumber非必须
├─ heightstring非必须
├─ autoplayboolean非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ namestring非必须
├─ activestring非必须
├─ dataobject []非必须

item 类型: object

├─ namestring必须
├─ horizontalboolean非必须
├─ classNameobject,string非必须
├─ verticalboolean非必须
├─ dataSourcenumber非必须
├─ layoutstring非必须
├─ totalobject,number非必须
├─ pageSizenumber非必须
├─ currentPagenumber非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ srcstring非必须
├─ widthstring非必须
├─ controlsboolean非必须
├─ typestring非必须
├─ titlestring非必须
├─ slotstring非必须
├─ validRulesobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onCancelobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onSaveobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ modelValueobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ modelboolean非必须
├─ placeholderstring非必须
├─ optionsobject []非必须

item 类型: object

├─ textstring必须
├─ labelstring必须
├─ labelWidthstring非必须
├─ labelPositionstring非必须
├─ inlineboolean非必须
├─ disabledboolean非必须
├─ labelstring非必须
├─ requiredboolean非必须
├─ xlnumber非必须
├─ lgnumber非必须
├─ mdnumber非必须
├─ smnumber非必须
├─ xsnumber非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ stylestring非必须
├─ textobject,string非必须
├─ classNameobject,string非必须
├─ modelValuestring非必须
├─ placeholderstring非必须
├─ miniboolean非必须
├─ transparentboolean非必须
├─ titlestring非必须
├─ namestring非必须
├─ spannumber,string非必须
├─ movenumber非必须
├─ labelstring非必须
├─ dataSourcenumber []非必须

item 类型: number

├─ 非必须
├─ srcstring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ requiredboolean非必须
├─ typestring非必须
├─ optionsobject []非必须

item 类型: object

├─ valuestring必须
├─ labelstring必须
├─ multipleboolean非必须
├─ sizestring非必须
├─ plainboolean非必须
├─ loadingboolean非必须
├─ autofocusboolean非必须
├─ circleboolean非必须
├─ roundboolean非必须
├─ dataobject []非必须

item 类型: object

├─ textstring必须
├─ valuestring必须
├─ idstring必须
├─ loopobject必须
├─ typestring非必须
├─ valuestring非必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ styleobject非必须
├─ marginstring非必须
├─ namestring非必须
├─ textobject,string非必须
├─ labelstring非必须
├─ spannumber,string非必须
├─ placeholderstring非必须
├─ modelValueobject,string非必须
├─ srcobject,string非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onChangeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ dataSourcenumber非必须
├─ roundboolean非必须
├─ classNamestring非必须
├─ borderboolean非必须
├─ typestring非必须
├─ dataobject []非必须

item 类型: object

├─ textstring必须
├─ valuestring必须
├─ idstring必须
├─ namestring必须
├─ citystring必须
├─ employeesnumber必须
├─ created_datestring必须
├─ booleboolean必须
├─ layoutstring非必须
├─ totalnumber非必须
├─ pageSizenumber非必须
├─ currentPagenumber非必须
├─ editConfigobject非必须
├─ triggerstring非必须
├─ modestring非必须
├─ showStatusboolean非必须
├─ columnsobject []非必须

item 类型: object

├─ typestring非必须
├─ widthnumber非必须
├─ fieldstring必须
├─ titlestring必须
├─ sortableboolean必须
├─ auto-resizeboolean非必须
├─ optionsobject []非必须

item 类型: object

├─ valuestring必须
├─ labelstring必须
├─ rowSpanobject []非必须

item 类型: object

├─ fieldstring非必须
├─ disabledboolean非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ stylestring非必须
├─ placeholderstring非必须
├─ modelValuestring,boolean非必须
├─ heightstring非必须
├─ autoplayboolean非必须
├─ namestring非必须
├─ textobject,string非必须
├─ spannumber非必须
├─ srcstring非必须
├─ optionsobject []非必须

item 类型: object

├─ valuestring必须
├─ labelstring必须
├─ classNameobject,string非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ hrefobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ widthnumber非必须
├─ titlestring非必须
├─ triggerstring非必须
├─ visible-arrowboolean非必须
├─ popper-classstring非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ titlestring非必须
├─ namestring非必须
├─ stylestring非必须
├─ spannumber非必须
├─ smnumber非必须
├─ classNamestring非必须
├─ textobject,string非必须
├─ checkedobject,boolean非必须
├─ modelValueobject,boolean非必须
├─ widthnumber非必须
├─ triggerstring非必须
├─ placementstring非必须
├─ activestring非必须
├─ dataobject []非必须

item 类型: object

├─ namestring必须
├─ verticalboolean非必须
├─ slotstring非必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ styleobject,string非必须
├─ spannumber非必须
├─ movenumber非必须
├─ classNamestring非必须
├─ textobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ namestring非必须
├─ slotstring非必须
├─ placeholderstring非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ namestring非必须
├─ textobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ stylestring非必须
├─ classNameobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ spannumber非必须
├─ placeholderstring非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ idstring必须
├─ childrenobject必须
├─ typestring非必须
├─ valuestring非必须
├─ loopobject必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ idstring必须
├─ loopobject必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ componentTypestring必须
├─ loopobject必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ loopobject必须
├─ typestring非必须
├─ valuestring非必须
├─ componentTypestring必须
├─ conditionboolean必须
├─ conditionobject必须
├─ typestring非必须
├─ valuestring非必须
├─ kindstring非必须
├─ loopArgsstring []必须

item 类型: string

├─ 非必须
├─ componentTypestring非必须
├─ loopobject必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []必须

item 类型: string

├─ 非必须
├─ fileNamestring非必须
├─ idstring必须
├─ loopobject必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ conditionobject必须
├─ typestring非必须
├─ valuestring非必须
├─ kindstring非必须
├─ idstring必须
├─ componentTypestring必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ fileNamestring必须
├─ metaobject必须
├─ idnumber非必须
├─ parentIdstring非必须
├─ groupstring非必须
├─ occupierobject非必须
├─ idnumber非必须
├─ usernamestring非必须
├─ emailstring非必须
├─ providernull非必须
├─ passwordnull非必须
├─ resetPasswordTokenstring非必须
├─ confirmationTokenstring非必须
├─ confirmedboolean非必须
├─ blockednull非必须
├─ rolenull非必须
├─ created_bynull非必须
├─ updated_bynull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ blocknull非必须
├─ is_adminboolean非必须
├─ is_publicnull非必须
├─ isHomeboolean非必须
├─ routerstring非必须
├─ rootElementstring非必须
├─ creatorstring非必须
├─ gmt_createstring非必须
├─ gmt_modifiedstring非必须
├─ idnumber必须文件夹id
├─ parentIdstring必须父节点id
├─ depthnumber必须
├─ folderNamestring必须文件夹名称
├─ routerstring必须路由
├─ gmt_createstring必须
├─ gmt_modifiedstring必须
├─ componentsMapobject []非必须应用用到的组件+区块构建产物

item 类型: object

├─ componentNamestring必须组件名称
├─ packagestring必须
├─ exportNamestring必须导出名称
├─ destructuringboolean必须
├─ versionstring必须版本
├─ mainstring必须
├─ bridgestring []非必须应用桥接源

item 类型: string

├─ 非必须
├─ utilsobject []非必须应用工具类

item 类型: object

├─ namestring必须名称
├─ typestring必须类型
├─ contentobject必须内容
├─ typestring非必须类型
├─ valuestring非必须
├─ packagestring非必须
├─ destructuringboolean非必须
├─ exportNamestring非必须导出名称
├─ versionstring非必须版本
├─ subNamestring非必须
├─ mainstring非必须
├─ configobject非必须应用全局配置
├─ sdkVersionstring非必须
├─ historyModestring非必须
├─ targetRootIDstring非必须
├─ constantsstring非必须应用全局变量
├─ cssstring非必须应用全局样式
├─ versionstring非必须应用版本
localestring非必须
+ + + + + +### 基本信息 + +**Path:** /app-center/api/apps/schema/:id + +**Method:** GET + +**接口描述:** + +

version 暂且为空,预留

+ + +### 请求参数 + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| id | 866 | 应用id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ metaobject非必须应用基本信息
├─ namestring非必须
├─ tenantnumber非必须
├─ git_groupstring非必须
├─ project_namestring非必须
├─ descriptionstring非必须
├─ branchstring非必须
├─ is_demonull非必须
├─ global_stateobject []非必须

item 类型: object

├─ idstring非必须
├─ stateobject非必须
├─ namestring非必须
├─ gettersobject非必须
├─ countobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ actionsobject非必须
├─ actionsobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ appIdstring非必须
├─ creatorstring非必须
├─ gmt_createstring非必须
├─ gmt_modifiedstring非必须
├─ dataSourceobject非必须应用数据源
├─ listobject []非必须

item 类型: object

├─ idnumber必须
├─ namestring必须
├─ dataobject必须
├─ dataobject []非必须

item 类型: object

├─ 1111string必须
├─ teststring必须
├─ test1string必须
├─ _idstring必须
├─ idstring必须
├─ urlstring必须
├─ namestring必须
├─ tenantstring必须
├─ contentstring必须
├─ versionstring必须
├─ frameworkstring必须
├─ publishedstring必须
├─ componentsstring必须
├─ created_atstring必须
├─ updated_atstring必须
├─ descriptionstring必须
├─ published_atstring必须
├─ last_build_infostring必须
├─ labelstring必须
├─ valuestring必须
├─ pidstring必须
├─ _RIDstring必须
├─ dslstring必须
├─ statestring必须
├─ themestring必须
├─ blocksstring必须
├─ lateststring必须
├─ pluginsstring必须
├─ toolbarstring必须
├─ materialstring必须
├─ sub_countstring必须
├─ editor_urlstring必须
├─ vscode_urlstring必须
├─ source_tplsstring必须
├─ platform_urlstring必须
├─ platform_descstring必须
├─ material_historystring必须
├─ isSelectedstring必须
├─ materialsstring必须
├─ material_versionstring必须
├─ appstring必须
├─ tplstring必须
├─ datastring必须
├─ descstring必须
├─ numbernumber必须
├─ linkstring必须
├─ switchnull必须
├─ slidernull必须
├─ agestring必须
├─ typestring非必须
├─ columnsobject []非必须

item 类型: object

├─ namestring必须
├─ titlestring必须
├─ fieldstring必须
├─ typestring必须
├─ formatobject必须
├─ maxnumber非必须
├─ minnumber非必须
├─ dateTimeboolean非必须
├─ requiredboolean非必须
├─ stringTypestring非必须
├─ optionsobject非必须
├─ uristring非必须
├─ methodstring非必须
├─ isSyncboolean非必须
├─ dataHandlerobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ willFetchobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ shouldFetchobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ errorHandlerobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ tplnull必须
├─ appstring必须
├─ descnull必须
├─ created_bynull必须
├─ updated_bynull必须
├─ created_atstring必须
├─ updated_atstring必须
├─ dataHandlerobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ i18nobject非必须国际化词条
├─ zh_CNobject非必须
├─ lowcode.c257d5e8string非必须
├─ lowcode.61c8ac8cstring非必须
├─ lowcode.f53187a0string非必须
├─ lowcode.97ad00ddstring非必须
├─ en_USobject非必须
├─ lowcode.c257d5e8string非必须
├─ lowcode.61c8ac8cstring非必须
├─ lowcode.f53187a0string非必须
├─ lowcode.97ad00ddstring非必须
├─ componentsTreeobject []非必须应用页面+文件夹

item 类型: object

├─ stateobject必须
├─ newsListobject []非必须

item 类型: object

├─ titlestring必须
├─ datestring必须
├─ pictureListobject []非必须

item 类型: object

├─ titlestring必须
├─ datestring必须
├─ titleListobject []非必须

item 类型: object

├─ titlestring必须
├─ datestring必须
├─ componentsobject []非必须

item 类型: object

├─ namestring必须
├─ textstring必须
├─ pageConfigobject非必须
├─ componentobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ attrsobject非必须
├─ currentPagenumber非必须
├─ pageSizenumber非必须
├─ pageSizesnumber []非必须

item 类型: number

├─ 非必须
├─ totalnumber非必须
├─ layoutstring非必须
├─ componentsTotalnumber非必须
├─ renderf5956ed2object []非必须

item 类型: object

├─ labelstring必须
├─ valuestring必须
├─ _RIDstring必须
├─ renderb52aeac9object []非必须

item 类型: object

├─ frameworkstring必须
├─ materialsstring必须
├─ namestring必须
├─ descriptionstring必须
├─ idstring必须
├─ _RIDstring必须
├─ render7e97d9c7object []非必须

item 类型: object

├─ namestring必须
├─ descriptionstring必须
├─ idstring必须
├─ _RIDstring必须
├─ listobject []非必须

item 类型: object

├─ imgUrlstring必须
├─ titlestring必须
├─ descriptionstring必须
├─ buttonTextstring非必须
├─ messageobject []非必须

item 类型: object

├─ titlestring必须
├─ descriptionstring必须
├─ buttonTextstring必须
├─ leftboolean非必须
├─ linkstring必须
├─ rightboolean非必须
├─ entranceDataobject []非必须

item 类型: object

├─ idstring必须
├─ titlestring必须
├─ descriptionstring必须
├─ showEditorboolean非必须
├─ showMoreboolean非必须
├─ visableDataobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ validRulesobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ newMaterialboolean非必须
├─ deleteModalboolean非必须
├─ chosePlatformModalboolean非必须
├─ materialNamestring非必须
├─ materialVersionstring非必须
├─ materialDescstring非必须
├─ materialStackstring非必须
├─ render1afb211aobject []非必须

item 类型: object

├─ labelstring必须
├─ valuestring必须
├─ idstring必须
├─ _RIDstring非必须
├─ render5e9a9729object []非必须

item 类型: object

├─ idstring非必须
├─ namestring非必须
├─ frameworkstring非必须
├─ componentsstring非必须
├─ contentstring非必须
├─ urlstring非必须
├─ published_atstring非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ publishedstring非必须
├─ last_build_infostring非必须
├─ tenantstring非必须
├─ versionstring非必须
├─ descriptionstring非必须
├─ render7536dfdcobject []非必须

item 类型: object

├─ idstring必须
├─ namestring必须
├─ frameworkstring必须
├─ componentsstring必须
├─ contentstring必须
├─ urlstring必须
├─ published_atstring必须
├─ created_atstring必须
├─ updated_atstring必须
├─ publishedstring必须
├─ last_build_infostring必须
├─ tenantstring必须
├─ versionstring必须
├─ descriptionstring必须
├─ _RIDstring非必须
├─ platformstring []非必须

item 类型: string

├─ 非必须
├─ optionsobject []非必须

item 类型: object

├─ valuestring必须
├─ labelstring必须
├─ searchTypestring非必须
├─ rendere091744cobject []非必须

item 类型: object

├─ idstring必须
├─ namestring必须
├─ themestring必须
├─ materialstring必须
├─ pluginsstring必须
├─ toolbarstring必须
├─ editor_urlstring必须
├─ platform_descstring必须
├─ published_atstring必须
├─ created_atstring必须
├─ updated_atstring必须
├─ statestring必须
├─ platform_urlstring必须
├─ vscode_urlstring必须
├─ publishedstring必须
├─ blocksstring必须
├─ last_build_infostring必须
├─ tenantstring必须
├─ descriptionstring必须
├─ lateststring必须
├─ material_historystring必须
├─ source_tplsstring必须
├─ dslstring必须
├─ sub_countstring必须
├─ _RIDstring必须
├─ showPopperboolean非必须
├─ formDataobject []非必须

item 类型: object

├─ keystring必须
├─ valuestring必须
├─ versionobject []非必须

item 类型: object

├─ labelstring必须
├─ valuestring必须
├─ companyobject []非必须

item 类型: object

├─ labelstring必须
├─ valuestring必须
├─ danweiobject []非必须

item 类型: object

├─ labelstring必须
├─ valuestring必须
├─ loop_6fcaf983object []非必须

item 类型: object

├─ titlestring必须
├─ numberstring必须
├─ idstring必须
├─ _RIDstring必须
├─ dataDisknumber []非必须

item 类型: number

├─ 非必须
├─ navActivenumber非必须
├─ methodsobject必须
├─ aaobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ linkClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ queryobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ getTableDataobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ clearSelectedobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ goCreateobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ playVideoobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ toRouterobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ gotoHomeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ showEditorobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ selectLadderobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ saveobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ cancelobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ handleAddMaterialobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ handleCloseNewMaterialobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ closeDeleteModalobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ handleCloseChosePlatformobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ openChosePlatformobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ openDeleteModalobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ handleConfirmCreateobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ handleClickzzcobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ gotoMymaterialobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ componentNamestring必须
├─ cssstring必须
├─ propsobject必须
├─ lifeCyclesobject必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ stylestring非必须
├─ classNamestring非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onGotoHomeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ dataSourcenumber非必须
├─ layoutstring非必须
├─ totalnumber非必须
├─ pageSizenumber非必须
├─ currentPagenumber非必须
├─ srcstring非必须
├─ visibleobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ titlestring非必须
├─ onCloseobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ widthnumber非必须
├─ triggerstring非必须
├─ modelValueboolean非必须
├─ textstring非必须
├─ editConfigobject非必须
├─ triggerstring非必须
├─ modestring非必须
├─ showStatusboolean非必须
├─ columnsobject []非必须

item 类型: object

├─ typestring必须
├─ widthnumber必须
├─ fieldstring必须
├─ titlestring必须
├─ dataobject []非必须

item 类型: object

├─ idstring必须
├─ namestring必须
├─ citystring必须
├─ employeesnumber必须
├─ created_datestring必须
├─ booleboolean必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ stylestring非必须
├─ spanstring,number非必须
├─ textstring非必须
├─ namestring非必须
├─ classNameobject,string非必须
├─ heightstring非必须
├─ arrowstring非必须
├─ indicator-positionstring非必须
├─ autoplayboolean非必须
├─ loopboolean非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ refstring非必须
├─ visible-arrowboolean非必须
├─ popper-classstring非必须
├─ placementstring非必须
├─ titlestring非必须
├─ widthstring非必须
├─ visibleobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ modelobject非必须
├─ propstring非必须
├─ append-to-bodyboolean非必须
├─ layoutstring非必须
├─ totalnumber非必须
├─ pageSizenumber非必须
├─ currentPagenumber非必须
├─ typestring非必须
├─ labelWidthstring非必须
├─ labelPositionstring非必须
├─ inlineboolean非必须
├─ sizestring非必须
├─ label-alignboolean非必须
├─ disabledboolean非必须
├─ label-positionstring非必须
├─ label-suffixstring非必须
├─ label-widthstring非必须
├─ editConfigobject非必须
├─ triggerstring非必须
├─ modestring非必须
├─ showStatusboolean非必须
├─ headerAlignstring非必须
├─ alignstring非必须
├─ columnsobject []非必须

item 类型: object

├─ titlestring必须
├─ widthnumber必须
├─ headerAlignstring必须
├─ childrenobject []必须

item 类型: object

├─ fieldstring必须
├─ titlestring必须
├─ headerAlignstring必须
├─ childrenobject []必须

item 类型: object

├─ fieldstring必须
├─ titlestring必须
├─ headerAlignstring必须
├─ childrenobject []必须

item 类型: object

├─ fieldstring必须
├─ titlestring必须
├─ headerAlignstring非必须
├─ alignstring必须
├─ widthnumber必须
├─ fieldstring必须
├─ typestring非必须
├─ slotsobject必须
├─ defaultobject非必须
├─ typestring非必须
├─ valueobject []非必须

item 类型: object

├─ componentNamestring必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ textobject,string非必须
├─ stylestring非必须
├─ modelValueobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ modelboolean非必须
├─ idstring必须
├─ propsobject非必须
├─ stylestring非必须
├─ dataobject []非必须

item 类型: object

├─ idstring必须
├─ itemstring必须
├─ citystring必须
├─ employeesnumber必须
├─ created_datestring必须
├─ created_date2string必须
├─ booleboolean必须
├─ namestring必须
├─ faultnull必须
├─ addressesobject必须
├─ 42a216b5-6f67-4cd0-9453-0da3ce0a1f3bobject []非必须

item 类型: object

├─ versionstring必须
├─ addrstring必须
├─ OS-EXT-IPS-MAC:mac_addrstring必须
├─ OS-EXT-IPS:typestring必须
├─ OS-EXT-IPS:port_idstring必须
├─ 9573a661-a105-4e92-b8be-e728ae37e5f0object []非必须

item 类型: object

├─ versionstring非必须
├─ addrstring非必须
├─ OS-EXT-IPS-MAC:mac_addrstring非必须
├─ OS-EXT-IPS:typestring非必须
├─ OS-EXT-IPS:port_idstring非必须
├─ flavorobject必须
├─ diskstring非必须
├─ vcpusstring非必须
├─ ramstring非必须
├─ idstring非必须
├─ namestring非必须
├─ accessIPv4string必须
├─ accessIPv6string必须
├─ statusstring必须
├─ progressnumber必须
├─ hostIdstring必须
├─ updatedstring必须
├─ createdstring必须
├─ metadataobject必须
├─ lockScenestring非必须
├─ agency_namestring非必须
├─ charging_modestring非必须
├─ vpc_idstring非必须
├─ lockSourcestring非必须
├─ lockSourceIdstring非必须
├─ metering.imagetypestring非必须
├─ image_namestring非必须
├─ metering.resourcespeccodestring非必须
├─ My Server Namestring非必须
├─ os_typestring非必须
├─ metering.resourcetypestring非必须
├─ metering.image_idstring非必须
├─ os_bitstring非必须
├─ lockCheckEndpointstring非必须
├─ cascaded.instance_extrainfostring非必须
├─ metering.product_idstring非必须
├─ metering.order_idstring非必须
├─ tagsstring []必须

item 类型: string

├─ 非必须
├─ descriptionstring必须
├─ lockedboolean必须
├─ config_drivestring必须
├─ tenant_idstring必须
├─ user_idstring必须
├─ key_namenull必须
├─ os-extended-volumes:volumes_attachedobject []必须

item 类型: object

├─ idstring必须
├─ delete_on_terminationstring必须
├─ devicestring必须
├─ bootIndexstring,null必须
├─ OS-EXT-STS:task_statenull必须
├─ OS-EXT-STS:power_statenumber必须
├─ OS-EXT-STS:vm_statestring必须
├─ OS-EXT-SRV-ATTR:hoststring必须
├─ OS-EXT-SRV-ATTR:instance_namestring必须
├─ OS-EXT-SRV-ATTR:hypervisor_hostnamestring必须
├─ OS-DCF:diskConfigstring必须
├─ OS-EXT-AZ:availability_zonestring必须
├─ os:scheduler_hintsobject必须
├─ groupstring []非必须

item 类型: string

├─ 非必须
├─ OS-EXT-SRV-ATTR:root_device_namestring必须
├─ OS-EXT-SRV-ATTR:ramdisk_idstring必须
├─ enterprise_project_idstring必须
├─ OS-EXT-SRV-ATTR:user_datastring必须
├─ OS-SRV-USG:launched_atstring必须
├─ OS-EXT-SRV-ATTR:kernel_idstring必须
├─ OS-EXT-SRV-ATTR:launch_indexnumber必须
├─ host_statusstring必须
├─ OS-EXT-SRV-ATTR:reservation_idstring必须
├─ OS-EXT-SRV-ATTR:hostnamestring必须
├─ OS-SRV-USG:terminated_atnull必须
├─ sys_tagsobject []必须

item 类型: object

├─ keystring必须
├─ valuestring必须
├─ security_groupsobject []必须

item 类型: object

├─ idstring必须
├─ namestring必须
├─ imageobject必须
├─ idstring非必须
├─ hypervisornull必须
├─ auto_terminate_timestring必须
├─ cpu_optionsobject必须
├─ hw:cpu_threadsnull非必须
├─ activestring非必须
├─ horizontalboolean非必须
├─ gutterstring非必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ spannumber,string非必须
├─ styleobject,string非必须
├─ textobject,string非必须
├─ offsetnumber非必须
├─ heightstring非必须
├─ autoplayboolean非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ namestring非必须
├─ activestring非必须
├─ dataobject []非必须

item 类型: object

├─ namestring必须
├─ horizontalboolean非必须
├─ classNameobject,string非必须
├─ verticalboolean非必须
├─ dataSourcenumber非必须
├─ layoutstring非必须
├─ totalobject,number非必须
├─ pageSizenumber非必须
├─ currentPagenumber非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ srcstring非必须
├─ widthstring非必须
├─ controlsboolean非必须
├─ typestring非必须
├─ titlestring非必须
├─ slotstring非必须
├─ validRulesobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onCancelobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onSaveobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ modelValueobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ modelboolean非必须
├─ placeholderstring非必须
├─ optionsobject []非必须

item 类型: object

├─ textstring必须
├─ labelstring必须
├─ labelWidthstring非必须
├─ labelPositionstring非必须
├─ inlineboolean非必须
├─ disabledboolean非必须
├─ labelstring非必须
├─ requiredboolean非必须
├─ xlnumber非必须
├─ lgnumber非必须
├─ mdnumber非必须
├─ smnumber非必须
├─ xsnumber非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ stylestring非必须
├─ textobject,string非必须
├─ classNameobject,string非必须
├─ modelValuestring非必须
├─ placeholderstring非必须
├─ miniboolean非必须
├─ transparentboolean非必须
├─ titlestring非必须
├─ namestring非必须
├─ spannumber,string非必须
├─ movenumber非必须
├─ labelstring非必须
├─ dataSourcenumber []非必须

item 类型: number

├─ 非必须
├─ srcstring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ requiredboolean非必须
├─ typestring非必须
├─ optionsobject []非必须

item 类型: object

├─ valuestring必须
├─ labelstring必须
├─ multipleboolean非必须
├─ sizestring非必须
├─ plainboolean非必须
├─ loadingboolean非必须
├─ autofocusboolean非必须
├─ circleboolean非必须
├─ roundboolean非必须
├─ dataobject []非必须

item 类型: object

├─ textstring必须
├─ valuestring必须
├─ idstring必须
├─ loopobject必须
├─ typestring非必须
├─ valuestring非必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ styleobject非必须
├─ marginstring非必须
├─ namestring非必须
├─ textobject,string非必须
├─ labelstring非必须
├─ spannumber,string非必须
├─ placeholderstring非必须
├─ modelValueobject,string非必须
├─ srcobject,string非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onChangeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ dataSourcenumber非必须
├─ roundboolean非必须
├─ classNamestring非必须
├─ borderboolean非必须
├─ typestring非必须
├─ dataobject []非必须

item 类型: object

├─ textstring必须
├─ valuestring必须
├─ idstring必须
├─ namestring必须
├─ citystring必须
├─ employeesnumber必须
├─ created_datestring必须
├─ booleboolean必须
├─ layoutstring非必须
├─ totalnumber非必须
├─ pageSizenumber非必须
├─ currentPagenumber非必须
├─ editConfigobject非必须
├─ triggerstring非必须
├─ modestring非必须
├─ showStatusboolean非必须
├─ columnsobject []非必须

item 类型: object

├─ typestring非必须
├─ widthnumber非必须
├─ fieldstring必须
├─ titlestring必须
├─ sortableboolean必须
├─ auto-resizeboolean非必须
├─ optionsobject []非必须

item 类型: object

├─ valuestring必须
├─ labelstring必须
├─ rowSpanobject []非必须

item 类型: object

├─ fieldstring非必须
├─ disabledboolean非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ stylestring非必须
├─ placeholderstring非必须
├─ modelValuestring,boolean非必须
├─ heightstring非必须
├─ autoplayboolean非必须
├─ namestring非必须
├─ textobject,string非必须
├─ spannumber非必须
├─ srcstring非必须
├─ optionsobject []非必须

item 类型: object

├─ valuestring必须
├─ labelstring必须
├─ classNameobject,string非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ hrefobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ widthnumber非必须
├─ titlestring非必须
├─ triggerstring非必须
├─ visible-arrowboolean非必须
├─ popper-classstring非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ titlestring非必须
├─ namestring非必须
├─ stylestring非必须
├─ spannumber非必须
├─ smnumber非必须
├─ classNamestring非必须
├─ textobject,string非必须
├─ checkedobject,boolean非必须
├─ modelValueobject,boolean非必须
├─ widthnumber非必须
├─ triggerstring非必须
├─ placementstring非必须
├─ activestring非必须
├─ dataobject []非必须

item 类型: object

├─ namestring必须
├─ verticalboolean非必须
├─ slotstring非必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ styleobject,string非必须
├─ spannumber非必须
├─ movenumber非必须
├─ classNamestring非必须
├─ textobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ namestring非必须
├─ slotstring非必须
├─ placeholderstring非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ namestring非必须
├─ textobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ stylestring非必须
├─ classNameobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ spannumber非必须
├─ placeholderstring非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ idstring必须
├─ childrenobject必须
├─ typestring非必须
├─ valuestring非必须
├─ loopobject必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ idstring必须
├─ loopobject必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ componentTypestring必须
├─ loopobject必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ loopobject必须
├─ typestring非必须
├─ valuestring非必须
├─ componentTypestring必须
├─ conditionboolean必须
├─ conditionobject必须
├─ typestring非必须
├─ valuestring非必须
├─ kindstring非必须
├─ loopArgsstring []必须

item 类型: string

├─ 非必须
├─ componentTypestring非必须
├─ loopobject必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []必须

item 类型: string

├─ 非必须
├─ fileNamestring非必须
├─ idstring必须
├─ loopobject必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ conditionobject必须
├─ typestring非必须
├─ valuestring非必须
├─ kindstring非必须
├─ idstring必须
├─ componentTypestring必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ fileNamestring必须
├─ metaobject必须
├─ idnumber非必须
├─ parentIdstring非必须
├─ groupstring非必须
├─ occupierobject非必须
├─ idnumber非必须
├─ usernamestring非必须
├─ emailstring非必须
├─ providernull非必须
├─ passwordnull非必须
├─ resetPasswordTokenstring非必须
├─ confirmationTokenstring非必须
├─ confirmedboolean非必须
├─ blockednull非必须
├─ rolenull非必须
├─ created_bynull非必须
├─ updated_bynull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ blocknull非必须
├─ is_adminboolean非必须
├─ is_publicnull非必须
├─ isHomeboolean非必须
├─ routerstring非必须
├─ rootElementstring非必须
├─ creatorstring非必须
├─ gmt_createstring非必须
├─ gmt_modifiedstring非必须
├─ idnumber必须
├─ parentIdstring必须
├─ depthnumber必须
├─ folderNamestring必须
├─ routerstring必须
├─ gmt_createstring必须
├─ gmt_modifiedstring必须
├─ componentsMapobject []非必须应用用到的组件+区块构建产物

item 类型: object

├─ componentNamestring必须
├─ packagestring必须
├─ exportNamestring必须
├─ destructuringboolean必须
├─ versionstring必须
├─ mainstring必须
├─ bridgestring []非必须应用桥接源

item 类型: string

├─ 非必须
├─ utilsobject []非必须应用工具类

item 类型: object

├─ namestring必须
├─ typestring必须
├─ contentobject必须
├─ typestring非必须
├─ valuestring非必须
├─ packagestring非必须
├─ destructuringboolean非必须
├─ exportNamestring非必须
├─ versionstring非必须
├─ subNamestring非必须
├─ mainstring非必须
├─ configobject非必须应用全局配置
├─ sdkVersionstring非必须
├─ historyModestring非必须
├─ targetRootIDstring非必须
├─ constantsstring非必须应用全局变量
├─ cssstring非必须应用全局样式
├─ versionstring非必须应用版本
localestring非必须
+ + +## 应用下国际化词条批量上传 + + + +### 基本信息 + +**Path:** /app-center/api/apps/:id/i18n/entries/update + +**Method:** POST + +**接口描述:** + +

上传zip 内部结构
+20230304-164001(WeLinkPC).png
+json文件名,大小写兼容
+zh_CN 简体中文
+en_US 美式英文
+en_GB 英文
+zh_TW 繁体中文(台湾地区)
+zh_HK 繁体中文(香港)
+en_HK 英语(香港)
+en_WW 英语(全球)
+en_CA 英语(加拿大)
+en_AU 英语(澳大利亚)
+en_IE 英语(爱尔兰)
+en_FI 英语(芬兰)
+fi_FI 芬兰语(芬兰)
+en_DK 英语(丹麦)
+da_DK 丹麦语(丹麦)
+en_IL 英语(以色列)
+he_IL 希伯来语(以色列)
+en_ZA 英语(南非)
+en_IN 英语(印度)
+en_NO 英语(挪威)
+en_SG 英语(新加坡)
+en_NZ 英语(新西兰)
+en_ID 英语(印度尼西亚)
+en_PH 英语(菲律宾)
+en_TH 英语(泰国)
+en_MY 英语(马来西亚)
+en_XA 英语(阿拉伯)
+ko_KR 韩文(韩国)
+ja_JP 日语(日本)
+nl_NL 荷兰语(荷兰)
+nl_BE 荷兰语(比利时)
+pt_PT 葡萄牙语(葡萄牙)
+pt_BR 葡萄牙语(巴西)
+fr_FR 法语(法国)
+fr_LU 法语(卢森堡)
+fr_CH 法语(瑞士)
+fr_BE 法语(比利时)
+fr_CA 法语(加拿大)
+es_LA 西班牙语(拉丁美洲)
+es_ES 西班牙语(西班牙)
+es_AR 西班牙语(阿根廷)
+es_US 西班牙语(美国)
+es_MX 西班牙语(墨西哥)
+es_CO 西班牙语(哥伦比亚)
+es_PR 西班牙语(波多黎各)
+de_DE 德语(德国)
+de_AT 德语(奥地利)
+de_CH 德语(瑞士)
+ru_RU 俄语(俄罗斯)
+it_IT 意大利语(意大利)
+el_GR 希腊语(希腊)
+no_NO 挪威语(挪威)
+hu_HU 匈牙利语(匈牙利)
+tr_TR 土耳其语(土耳其)
+cs_CZ 捷克语(捷克共和国)
+sl_SL 斯洛文尼亚语
+pl_PL 波兰语(波兰)
+sv_SE 瑞典语(瑞典)
+
+// 返回数据:data 第一条数据是插入和更新数据的结果信息
+{
+    "data": [
+        {
+            "fieldCount"0,
+            "affectedRows"2000,
+            "insertId"12106,
+            "serverStatus"2,
+            "warningCount"7,
+            "message"",Records: 1992  Duplicates: 1992  Warnings: 7",
+            "protocol41"true,
+            "changedRows"1992
+        },
+        null
+    ],
+    "locale""zh-cn"
+}

+ + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ------------------- | -------- | ---- | ---- | +| Content-Type | multipart/form-data | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ---- | +| id | | | + +**Body** + +| 参数名称 | 参数类型 | 是否必须 | 示例 | 备注 | +| -------- | -------- | -------- | ----------- | --------------------------------------------------------- | +| 1 | file | 是 | 1: i18n.zip | 此zip文件内无目录。且目录下只有国际化语言码命名的json文件 | +| 2 | file | 否 | | | + + + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ fieldCountnumber非必须字段数
├─ affectedRowsnumber非必须受影响的行数
├─ insertIdnumber非必须插入id
├─ serverStatusnumber非必须服务器状态
├─ warningCountnumber非必须警告数量
├─ messagestring非必须信息
├─ protocol41boolean非必须协议
├─ changedRowsnumber非必须改变的行数
localestring非必须
+ + +## 应用修改 + + + +### 基本信息 + +**Path:** /material-center/api/apps/update/:id + +**Method:** POST + +**接口描述:** + +

修改应用接口

+ + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| id | 28 | 应用id | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
namestring非必须应用名称
descriptionstring非必须应用介绍
app_websitestring非必须应用发布后的url
data_handlerobject非必须修改data_handler
extend_configobject非必须应用扩展对象 - 内容前端管理
project_namestring非必须应用git仓库地址
branchstring非必须应用分支
cssobject非必须全局css
constantsobject非必须全局变量
global_stateobject非必须全局状态
template_typestring非必须模板类型
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idstring非必须
├─ namestring非必须应用名称
├─ app_websitestring非必须应用发布后的url
├─ platformobject非必须应用关联的设计器
├─ idnumber非必须
├─ namestring非必须
├─ themenumber非必须
├─ created_bynull非必须
├─ updated_bynull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ platform_urlstring非必须
├─ vscode_urlstring非必须
├─ publishednull非必须
├─ createdBynumber非必须
├─ updatedBynumber非必须
├─ last_build_infoobject非必须
├─ resultboolean非必须
├─ platformVersionstring非必须
├─ prevPlatformVersionstring非必须
├─ versionsstring []非必须

item 类型: string

├─ 非必须
├─ builderVersionstring非必须
├─ endTimestring非必须
├─ materialIdnumber非必须
├─ materialPkgNamestring非必须
├─ materialVersionstring非必须
├─ tenantnumber非必须
├─ descriptionstring非必须
├─ latestnull非必须
├─ material_historynumber非必须
├─ image_urlstring非必须
├─ sort_pluginsnull非必须
├─ sort_toolbarnull非必须
├─ is_defaultnull非必须
├─ prettier_optsnull非必须
├─ set_default_bynull非必须
├─ app_extend_confignull非必须
├─ data_hashstring非必须
├─ business_categorynumber非必须
├─ obs_urlstring非必须应用上传obs地址
├─ created_bynull非必须
├─ updated_bynull非必须更新人
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ statenull非必须
├─ publishedboolean非必须应用是否正式上线 预留字段 无用
├─ createdByobject非必须创建人信息
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ providernull非必须预留字段
├─ passwordnull非必须预留字段
├─ resetPasswordTokenstring非必须w3账号
├─ confirmationTokenstring非必须w3账户uuid
├─ confirmedboolean非必须是否认证
├─ blockednull非必须账号是否被拉黑
├─ rolenull非必须角色
├─ created_bynull非必须
├─ updated_bynull非必须
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocknull非必须
├─ is_adminboolean非必须是否是超级管理员
├─ is_publicnull非必须是否为公共账号
├─ updatedByobject非必须
├─ idnumber非必须
├─ usernamestring非必须
├─ emailstring非必须
├─ providernull非必须
├─ passwordnull非必须
├─ resetPasswordTokenstring非必须
├─ confirmationTokenstring非必须
├─ confirmedboolean非必须
├─ blockednull非必须
├─ rolenull非必须
├─ created_bynull非必须
├─ updated_bynull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ blocknull非必须
├─ is_adminboolean非必须
├─ is_publicnull非必须
├─ tenantnumber非必须所在组织
├─ home_pagenull非必须主页面id
├─ cssnull非必须全局css json对象
├─ confignull非必须应用全局配置
├─ git_groupnull非必须git仓库分组
├─ project_namenull非必须应用git仓库地址
├─ constantsnull非必须应用全局变量
├─ data_handlerobject非必须应用通用数据处理-前端管理 服务端存json串
├─ typestring非必须
├─ valuestring非必须
├─ descriptionstring非必须应用描述
├─ latestnull非必须应用最后一次记录 预留字段
├─ platform_historynull非必须应用关联设计器最后一次构建记录 预留字段
├─ editor_urlstring非必须此应用的访问地址
├─ branchnull非必须应用发布的目标git 分支
├─ visit_urlnull非必须预留字段
├─ is_demonull非必须是否为系统内demo应用
├─ image_urlstring非必须应用封面图
├─ is_defaultnull非必须是否为系统内默认应用
├─ template_typenull非必须应用模板类型
├─ set_template_timenull非必须应用被设置为模板时间
├─ set_template_bynull非必须设置此应用为模板的用户
├─ set_default_bynull非必须
├─ frameworkstring非必须应用的前端框架
├─ global_statenull非必须应用全局状态 前端管理 服务端存json
├─ default_langnull非必须应用默认语言编码 预留字段
├─ extend_configobject非必须应用系统扩展配置 前端管理 服务端存json
├─ assets_urlstring非必须应用预览/发布生成代码zip包 obs地址
├─ data_hashstring非必须应用数据hash, 防止无数据变化构建
├─ block_groupsobject []非必须应用关联区块分组

item 类型: object

├─ idnumber非必须
├─ namestring非必须名称
├─ appnumber非必须关联应用
├─ descnull非必须描述
├─ created_bynull非必须创建人
├─ updated_bynull非必须更新人
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ block_categoriesobject []非必须区块封面类

item 类型: object

├─ idnumber非必须
├─ namestring非必须
├─ appnumber非必须
├─ descnull非必须
├─ createdBynumber非必须
├─ updatedBynumber非必须
├─ created_bynull非必须
├─ updated_bynull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ categoryIdstring非必须
├─ category_idstring非必须
├─ source_tplsstring []非必须应用关联数据模板 -- 预留字段

item 类型: string

├─ 非必须
├─ i18n_langsstring []非必须应用关联的非zh_CN en_US 之外的语言数据

item 类型: string

├─ 非必须
├─ tpl-groupsstring []非必须关联页面模板分组

item 类型: string

├─ 非必须
localestring非必须
+ + +## 应用发布 + + + +### 基本信息 + +**Path:** /app-center/api/apps/publish/:id + +**Method:** POST + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| id | 1482 | 应用id | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
allGenerateboolean必须是否需要生成工程的默认配置
branchstring必须分支名称
canCreateNewBranchboolean必须分支不存在的时候时候创建分支
commitMsgstring必须提交信息
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject必须
├─ codenumber必须成功状态码
├─ urlstring必须git url
├─ resultstring必须成功提示
+ + +## 应用构建类型任务状态查询 + + + +### 基本信息 + +**Path:** /app-center/api/tasks/status/:id + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ----- | ------ | +| id | 28545 | 任务id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须任务id
├─ teamIdnumber非必须团队id 预留字段无用

枚举: 0

├─ taskTypeIdnumber非必须任务类型

枚举: 0,1,2,3,4,5

├─ uniqueIdnumber非必须被构建业务id 例如 应用、设计器等
├─ taskNamenull非必须任务名称
├─ taskStatusnumber非必须任务状态

枚举: 0,1,2,3

├─ taskResultstring非必须任务执行结果
├─ progressstring非必须当前执行步骤
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ progress_percentnumber非必须任务执行进度0-100

最大值: 100

最小值: 0

localestring非必须
+ + +## 应用详情 + + + +### 基本信息 + +**Path:** /app-center/api/apps/detail/:id + +**Method:** GET + +**接口描述:** + +

获取应用信息

+ + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| id | 2 | 应用id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idstring非必须应用id
├─ namestring非必须应用名称
├─ app_websitestring非必须用户配置的正式环境应用访问地址
├─ platformobject非必须从属设计器
├─ idnumber非必须设计器id
├─ namestring非必须设计器名称
├─ obs_urlstring非必须应用资源obs地址
├─ created_atstring非必须
├─ updated_atstring非必须
├─ statenull非必须应用状态 预留字段-无用
├─ publishedboolean非必须应用是否正式上线 预留字段 无用
├─ createdByobject非必须应用创建者
├─ idnumber非必须用户id
├─ usernamestring非必须用户名
├─ tenantnumber非必须从属租户
├─ home_pagestring非必须首页页面id
├─ cssnull非必须全局css json对象
├─ configobject非必须应用全局配置
├─ git_groupstring非必须应用git分组-预留字段
├─ project_namestring非必须应用git仓库地址
├─ constantsnull非必须应用全局变量
├─ data_handlerobject非必须应用通用数据处理-前端管理 服务端存json串
├─ typestring非必须
├─ valuestring非必须
├─ descriptionstring非必须应用描述
├─ latestnull非必须应用最后一次记录 预留字段
├─ platform_historynull非必须应用关联设计器最后一次构建记录 预留字段
├─ editor_urlstring非必须此应用的访问地址
├─ branchstring非必须应用发布的目标git 分支
├─ visit_urlnull非必须预留字段
├─ is_demoboolean非必须是否为系统内demo应用
├─ image_urlstring非必须应用封面图
├─ is_defaultboolean非必须是否为系统内默认应用
├─ template_typenull非必须应用模板类型
├─ set_template_timenull非必须应用被设置为模板时间
├─ set_template_bynull非必须设置此应用为模板的用户
├─ frameworkstring非必须应用的前端框架

枚举: Vue,Angular

├─ global_stateobject []非必须应用全局状态 前端管理 服务端存json

item 类型: object

├─ idstring非必须
├─ stateobject非必须
├─ namestring非必须
├─ gettersobject非必须
├─ countobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ actionsobject非必须
├─ actionsobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ default_langnull非必须应用默认语言编码 预留字段
├─ extend_configobject非必须应用系统扩展配置 前端管理 服务端存json
├─ businessobject非必须
├─ serviceNamestring非必须
├─ endpointNamestring非必须
├─ endpointIdstring非必须
├─ serviceIdstring非必须
├─ routerstring非必须
├─ envobject非必须
├─ alphaobject非必须
├─ regionsobject []非必须

item 类型: object

├─ namestring非必须
├─ baseUrlstring非必须
├─ isDefaultboolean非必须
├─ isDefaultboolean非必须
├─ typestring非必须
├─ assets_urlnull非必须应用预览/发布生成代码zip包 obs地址
├─ data_hashstring非必须应用数据hash, 防止无数据变化构建
├─ block_groupsobject []非必须应用关联区块分组

item 类型: object

├─ idnumber必须
├─ namestring必须
├─ appnumber必须
├─ block_categoriesstring []非必须关联区块分类

item 类型: string

├─ 非必须区块数据
├─ source_tplsstring []非必须应用关联数据模板 -- 预留字段

item 类型: string

├─ 非必须
├─ i18n_langsstring []非必须应用关联的非zh_CN en_US 之外的语言数据

item 类型: string

├─ 非必须
├─ tpl-groupsstring []非必须关联页面模板分组

item 类型: string

├─ 非必须
├─ sub_countnumber非必须应用的页面数量(不包含文件夹)
localestring非必须
+ + +## 应用预览 + + + +### 基本信息 + +**Path:** /app-center/api/apps/preview/:id + +**Method:** GET + +**接口描述:** + +

返回一个标准的 任务数据

+ + +### 请求参数 + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| id | 12 | 应用id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须任务id
├─ teamIdnumber非必须团队id
├─ taskTypeIdnumber非必须任务类型

枚举: 1,2,3,4,5

枚举备注: 1: 物料构建 +2: 应用构建 +3. 设计器构建 +4. vscode构建 +5. 区块发布

├─ uniqueIdnumber非必须被构建业务id 例如 应用、设计器等
├─ taskNamenull非必须任务名称
├─ taskStatusnumber非必须任务状态

枚举: 0,1,2,3

枚举备注: 0 初始状态 +1 正在执行 +2 任务停止 +3 任务结束

├─ progressstring非必须当前执行步骤
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ progress_percentnumber非必须执行进度 0-100

最大值: 100

最小值: 0

├─ indicatornull非必须当前构建指标
├─ taskResultnull非必须任务执行结果
localestring非必须
+ + +## 查询应用下全部国际化词条 + + + +### 基本信息 + +**Path:** /api/apps/i18n/:id + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ---- | +| id | | | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ zh_CNobject非必须简体中文
├─ lowcode.35bb6f1astring非必须
├─ lowcode.7d39640fstring非必须
├─ lowcode.9ac379d2string非必须
├─ lowcode.dbb02724string非必须
├─ en_USobject非必须美式英语
├─ lowcode.35bb6f1astring非必须
├─ lowcode.7d39640fstring非必须
├─ lowcode.9ac379d2string非必须
├─ lowcode.dbb02724string非必须
+ + +## 查询所有应用模板 + + + +### 基本信息 + +**Path:** /api/template/all + +**Method:** GET + +**接口描述:** + +

通过平台id获取该平台下的全部应用

+ + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| -------------- | ---------------- | -------- | ---- | -------------- | +| Content-Type | application/json | 是 | | | +| x-lowcode-org | 1 | 是 | | 租户id | +| x-lowcode-mode | develop | 是 | | 调用方:开发者 | + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| --------- | -------- | --------------- | ------------------ | +| framework | 否 | Vue | 按技术栈过滤 | +| _sort | 否 | updated_at:DESC | 按更新时间降序返回 | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ idstring非必须
├─ app_descstring非必须应用描述
├─ project_namestring非必须应用git仓库地址
├─ updated_atstring非必须更新时间
├─ publishedboolean非必须应用是否正式上线 预留字段 无用
├─ app_websitestring非必须用户配置的正式环境应用访问地址
├─ block_groupsobject []非必须应用关联区块分组

item 类型: object

├─ idnumber必须
├─ namestring必须名称
├─ appnumber必须关联app
├─ descnull必须描述
├─ published_atstring必须
├─ created_atstring必须创建时间
├─ updated_atstring必须更新时间
├─ i18n_langsstring []非必须应用关联的非zh_CN en_US 之外的语言数据

item 类型: string

├─ 非必须
├─ namestring非必须
├─ cssstring非必须全局css json对象
├─ versionstring非必须
├─ published_atstring非必须
├─ git_groupstring非必须应用git分组-预留字段
├─ platformstring非必须关联的设计器
├─ createdByobject非必须创建人信息
├─ blocknull非必须
├─ updated_atstring非必须更新时间
├─ blockednull非必须是否被拉黑
├─ created_atstring非必须创建人
├─ usernamestring非必须用户名
├─ idnumber非必须
├─ emailstring非必须邮箱
├─ confirmedboolean非必须是否认证
├─ rolenumber非必须角色
├─ providernull非必须
├─ tenantnumber非必须所属组织
├─ home_pagestring非必须主页id
├─ source_tplsstring []非必须应用关联数据模板 -- 预留字段

item 类型: string

├─ 非必须
├─ created_atstring非必须创建时间
+ + +## 添加/修改应用支持的国际化语言 + + + +### 基本信息 + +**Path:** /api/apps/i18n/:id + +**Method:** POST + +**接口描述:** + +

post参数中传入的 i18n_langs 参数是一个数组, 该数组提交时不会对现有应用支持的国际化语言进行追加, 只会替换

+ + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| id | 866 | 应用id | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
i18n_langsnumber []必须

item 类型: number

├─ 非必须该应用支持的国际化语言id
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ i18n_langsobject []非必须国际化语言

item 类型: object

├─ idnumber必须
├─ langstring必须语言代码
├─ labelstring必须语言名称
├─ created_atstring必须创建时间
├─ updated_atstring必须更新时间
├─ idnumber非必须
├─ updated_atstring非必须更新时间
├─ created_atstring非必须修改时间
+ + +## 画布占用/释放 + + + +### 基本信息 + +**Path:** /api/apps/canvas/lock + +**Method:** GET + +**接口描述:** + +

当解锁/加锁操作失败时提示:
+{
+    operate: 'failed',
+    occupier: {
+           ......
+    }
+}

+

解锁成功时,返回值  occupier  字段值为 null
+锁页面成功时, 返回值 occupier 字段值为锁定该页面的用户信息

+ + + +### 请求参数 + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| -------- | -------- | ------ | ------------------------------------------------------------ | +| id | 是 | 12 | 页面id | +| state | 是 | occupy | 期望页面状态: occupy 用户锁定页面供自己编辑, release 释放页面占用 | +| type | 是 | block | block表示锁定区块, page表示锁定页面 | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ operatestring非必须操作是否成功 success 成功, failed 失败

枚举: success,failed

枚举备注: 操作是否成功

├─ occupierobject非必须当前控制该页面的用户信息
├─ idnumber非必须用户id
├─ usernamestring非必须用户名称
├─ emailstring非必须用户的邮箱
├─ resetPasswordTokenstring非必须用户的w3账号
├─ blockednull非必须用户是否被拉入系统黑名单
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ is_adminboolean非必须是否为系统超级管理员
+ diff --git a/docs/api/backend-api/app-services.md b/docs/api/backend-api/app-services.md new file mode 100644 index 0000000000..919fa84504 --- /dev/null +++ b/docs/api/backend-api/app-services.md @@ -0,0 +1,117 @@ + +# app-service + +## 传入schema生成代码 + + + +### 基本信息 + +**Path:** /api/schema2code + +**Method:** POST + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
frameworkstring非必须
pageInfoobject非必须
├─ namestring非必须
├─ schemaobject非必须
├─ componentNamestring非必须
├─ cssstring非必须
├─ propsobject非必须
├─ lifeCyclesobject非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ textobject非必须
├─ keystring非必须
├─ typestring非必须
├─ en_USstring非必须
├─ zh_CNstring非必须
├─ classNamestring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ stylestring非必须
├─ idstring必须
├─ componentTypestring非必须
├─ dataSourceobject非必须
├─ liststring []非必须

item 类型: string

├─ 非必须
├─ stateobject非必须
├─ methodsobject非必须
├─ onClick_newobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ utilsstring []非必须

item 类型: string

├─ 非必须
├─ bridgestring []非必须

item 类型: string

├─ 非必须
├─ inputsstring []非必须

item 类型: string

├─ 非必须
├─ outputsstring []非必须

item 类型: string

├─ 非必须
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ panelNamestring非必须文件名称
├─ panelValuestring非必须文件内容
├─ panelTypestring非必须文件类型
├─ prettierOptsobject非必须代码格式选项
├─ printWidthnumber非必须指定每行代码的最大列数
├─ semiboolean非必须控制是否在语句末尾添加分号
├─ singleQuoteboolean非必须控制是否使用单引号代替双引号作为字符串的引号样式
├─ trailingCommastring非必须控制对象和数组字面量中最后一个属性或元素后面是否添加尾随逗号
├─ parserstring非必须指定要使用的解析器
├─ htmlWhitespaceSensitivitystring非必须用于控制 HTML 文件中空白字符的敏感度。该选项支持三个值: "css":保留仅对 CSS 属性之前和之后的空白字符进行格式化。 "strict":保留所有空白字符,并尽可能保持原样。 "ignore":忽略所有空白字符,除非它们出现在标签之间。
├─ typestring非必须类型
├─ indexboolean非必须索引
├─ filePathstring非必须文件路径
+ + +## 获取页面/区块源码 + + + +### 基本信息 + +**Path:** /api/code + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| --------- | -------- | ------- | -------------- | +| type | 是 | Block | Page | +| id | 是 | 123 | 区块或者页面id | +| history | 否 | 123 | 历史记录id | +| framework | 是 | Angular | Vue | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ panelNamestring非必须文件名
├─ panelValuestring非必须文件内容
├─ panelTypestring非必须文件类型
├─ prettierOptsobject非必须代码样式选项
├─ printWidthnumber非必须每行长指定每行代码的最大列数度
├─ semiboolean非必须控制是否在语句末尾添加分号
├─ singleQuoteboolean非必须控制是否使用单引号代替双引号作为字符串的引号样式
├─ trailingCommastring非必须控制对象和数组字面量中最后一个属性或元素后面是否添加尾随逗号
├─ parserstring非必须指定要使用的解析器
├─ htmlWhitespaceSensitivitystring非必须用于控制 HTML 文件中空白字符的敏感度。该选项支持三个值: "css":保留仅对 CSS 属性之前和之后的空白字符进行格式化。 "strict":保留所有空白字符,并尽可能保持原样。 "ignore":忽略所有空白字符,除非它们出现在标签之间。
├─ typestring非必须类型
├─ indexboolean非必须索引
├─ filePathstring非必须文件路径
+## 页面/区块预览用元数据 + + + +### 基本信息 + +**Path:** /api/preview/metadata + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| -------- | -------- | ---- | -------- | +| type | 是 | Page | Page | +| id | 是 | 123 | | +| platform | 是 | 123 | 平台id | +| app | 是 | 123 | 应用id | +| history | 是 | 123 | 历史记录 | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ assetsobject非必须资产
├─ materialstring []非必须物料

item 类型: string

├─ 非必须
├─ scriptsstring []非必须脚本

item 类型: string

├─ 非必须
├─ stylesstring []非必须样式

item 类型: string

├─ 非必须
├─ i18nobject []非必须国际化

item 类型: object

├─ idnumber非必须
├─ keystring非必须
├─ contentstring非必须内容
├─ hostnumber非必须关联id:appid或blockid
├─ host_typestring非必须关联:app或block
├─ langobject非必须语言id
├─ idnumber非必须
├─ langstring非必须语言代码
├─ labelstring非必须语言名称
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ created_atstring非必须
├─ updated_atstring非必须
diff --git a/docs/api/backend-api/app-utility-management.md b/docs/api/backend-api/app-utility-management.md new file mode 100644 index 0000000000..c333c51bbb --- /dev/null +++ b/docs/api/backend-api/app-utility-management.md @@ -0,0 +1,160 @@ +# 应用工具类管理 + +## 修改工具类 + + + +### 基本信息 + +**Path:** /app-center/api/apps/extension/update + +**Method:** POST + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
categorystring非必须类型: utils: 工具类 bridge: 桥接源

枚举: utils,bridge

枚举备注: 类型: utils: 工具类 bridge: 桥接源

typestring非必须分类: npm 二方包 function 函数

枚举: npm,function

namestring非必须名称
appstring非必须从属应用id
contentobject非必须工具类内容 对象
├─ typestring非必须
├─ valuestring非必须
idnumber必须
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须工具类详情信息
├─ idnumber非必须
├─ namestring非必须名称
├─ typestring非必须类型
├─ contentobject非必须内容
├─ typestring非必须
├─ valuestring非必须
├─ appnumber非必须关联appId
├─ categorystring非必须分类
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
localestring非必须
+ + +## 创建工具类 + + + +### 基本信息 + +**Path:** /app-center/api/apps/extension/create + +**Method:** POST + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
categorystring必须utils 工具类 bridge 桥接源

枚举: utils,bridge

枚举备注: utils 工具类 bridge 桥接源

typestring必须npm 二方包 function 函数

枚举: npm,function

namestring必须名称
appnumber必须所属应用id
contentobject必须
├─ typestring必须
├─ valuestring必须
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须
├─ namestring非必须名称
├─ typestring非必须类型
├─ contentobject非必须内容
├─ typestring非必须
├─ valuestring非必须
├─ appnumber非必须关联appId
├─ categorystring非必须分类
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
localestring非必须
+ + +## 删除工具类 + + + +### 基本信息 + +**Path:** /app-center/api/apps/extension/delete + +**Method:** GET + +**接口描述:** + +

删除时校验此 工具类是否从属于这个应用

+ + +### 请求参数 + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| -------- | -------- | ---- | ---------- | +| id | 是 | 333 | 工具类id | +| app | 是 | 12 | 所属应用id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须
├─ namestring非必须名称
├─ typestring非必须类型
├─ contentobject非必须内容
├─ typestring非必须
├─ valuestring非必须
├─ appnumber非必须关联appId
├─ categorystring非必须分类
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
localestring非必须
+ + +## 工具类查询列表 + + + +### 基本信息 + +**Path:** /app-center/api/apps/extension/list + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| -------- | -------- | ----- | -------------------------------------- | +| app | 否 | 12 | 应用id | +| category | 否 | utils | 两种取值:utils 工具类 bridge 桥接源 | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ idnumber非必须
├─ namestring非必须名称
├─ typestring非必须类型

枚举: npm,function

├─ contentobject非必须内容
├─ typestring非必须
├─ valuestring非必须
├─ appnumber非必须关联appId
├─ categorystring非必须分类

枚举: utils,bridge

├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
localestring非必须
diff --git a/docs/api/backend-api/block-categories.md b/docs/api/backend-api/block-categories.md new file mode 100644 index 0000000000..722915daeb --- /dev/null +++ b/docs/api/backend-api/block-categories.md @@ -0,0 +1,169 @@ +# 区块分类 + +## 修改区块分类 + +### 基本信息 + +**Path:** /material-center/api/block-categories/:id + +**Method:** PUT + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ---------- | +| id | 12 | 区块分类id | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
appnumber非必须从属应用id
namestring非必须应用名称
descstring非必须描述
category_idstring非必须区块分组key
blocksnumber []非必须关联区块

item 类型: number

├─ 非必须区块id
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须
├─ namestring非必须区块分类名称
├─ appobject非必须关联app
├─ idnumber非必须
├─ namestring非必须
├─ app_websitenull非必须
├─ platformnumber非必须
├─ obs_urlnull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ statenull非必须
├─ publishedboolean非必须
├─ createdBynumber非必须
├─ tenantnull非必须
├─ home_pagenull非必须
├─ cssnull非必须
├─ confignull非必须
├─ git_groupnull非必须
├─ project_namenull非必须
├─ constantsnull非必须
├─ data_handlernull非必须
├─ descriptionstring非必须
├─ latestnull非必须
├─ platform_historynull非必须
├─ editor_urlnull非必须
├─ branchnull非必须
├─ visit_urlnull非必须
├─ is_demonull非必须
├─ image_urlnull非必须
├─ is_defaultnull非必须
├─ template_typenull非必须
├─ set_template_timenull非必须
├─ set_template_bynull非必须
├─ frameworkstring非必须
├─ global_statenull非必须
├─ default_langnull非必须
├─ extend_confignull非必须
├─ assets_urlnull非必须
├─ data_hashnull非必须
├─ descstring非必须描述
├─ createdByobject非必须创建人
├─ idnumber非必须
├─ usernamestring非必须
├─ emailstring非必须
├─ resetPasswordTokenstring非必须
├─ blockednull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ blocknull非必须
├─ is_adminboolean非必须
├─ is_publicnull非必须
├─ updatedByobject非必须更新人
├─ idnumber非必须
├─ usernamestring非必须
├─ emailstring非必须
├─ resetPasswordTokenstring非必须
├─ blockednull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ blocknull非必须
├─ is_adminboolean非必须
├─ is_publicnull非必须
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ category_idstring非必须区块分类唯一id
├─ blocksobject []非必须区块

item 类型: object

├─ idnumber必须
├─ labelstring必须区块编码
├─ frameworkstring必须技术栈
├─ contentobject必须内容
├─ componentNamestring非必须组件或区块名
├─ fileNamestring非必须页面名称
├─ cssstring非必须全局 css 样式
├─ schemaobject非必须数据结构
├─ eventsobject非必须事件
├─ linkobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onFormLayoutobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onCloseobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onCancelobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onBackobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onPreviousobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onNextobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onClickobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ propertiesobject []非必须属性

item 类型: object

├─ labelobject必须
├─ zh_CNstring非必须
├─ descriptionobject必须
├─ zh_CNstring非必须
├─ collapseobject必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentobject []必须

item 类型: object

├─ propertystring必须
├─ typestring必须
├─ defaultValuearray,string,boolean必须
├─ labelobject必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ colsnumber必须
├─ rulesstring []必须

item 类型: string

├─ 非必须
├─ handleobject必须
├─ getterstring非必须
├─ setterstring非必须
├─ hiddenboolean必须
├─ requiredboolean必须
├─ readOnlyboolean必须
├─ disabledboolean必须
├─ widgetobject必须
├─ componentstring非必须
├─ propsobject非必须
├─ modelValuearray,boolean非必须
├─ descriptionobject必须
├─ zh_CNstring非必须
├─ linkedobject必须
├─ idstring非必须
├─ componentNamestring非必须
├─ propertystring非必须
├─ methodsobject非必须声明的方法
├─ linkClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ formLayoutobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ goBackobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ goPreviousobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ goNextobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ triggerClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ triggerCancelobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ triggerCloseobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ childrenobject []非必须子组件列表或字符串

item 类型: object

├─ componentNamestring必须组件或区块名
├─ propsobject必须绑定的属性
├─ classNamestring非必须绑定的样式类名
├─ inlineobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ label-suffixstring非必须
├─ label-positionstring非必须
├─ label-widthstring非必须
├─ childrenobject []必须子组件列表或字符串

item 类型: object

├─ componentNamestring必须
├─ loopobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ propsobject必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ labelobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ classNamestring非必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ conditionobject必须
├─ typestring非必须
├─ valuestring非必须
├─ propsobject必须
├─ classNameobject,string非必须
├─ srcobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ namestring非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ conditionobject必须
├─ typestring非必须
├─ valuestring非必须
├─ propsobject必须
├─ classNamestring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ namestring非必须
├─ onLayoutobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ textobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ typestring非必须
├─ childrenobject必须
├─ typestring非必须
├─ valuestring非必须
├─ keystring非必须
├─ idstring必须
├─ fileNamestring非必须
├─ idstring必须
├─ conditionobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ idstring必须
├─ stateobject非必须页面的 state
├─ formDatastring []非必须

item 类型: string

├─ 非必须
├─ typestring非必须类型
├─ componentstring非必须组件
├─ labelstring非必须标签
├─ lifeCyclesobject非必须生命周期
├─ onMountedobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ configureobject非必须
├─ isContainerboolean非必须
├─ slotsstring []非必须

item 类型: string

├─ 非必须
├─ created_atstring必须创建时间
├─ updated_atstring必须更新时间
├─ assetsobject必须构建资源
├─ materialstring []非必须

item 类型: string

├─ 非必须
├─ scriptsstring []非必须

item 类型: string

├─ 非必须
├─ stylesstring []非必须

item 类型: string

├─ 非必须
├─ createdBynumber必须
├─ last_build_infoobject必须
├─ resultboolean非必须
├─ versionsstring []非必须

item 类型: string

├─ 非必须
├─ endTimestring非必须
├─ descriptionnull必须描述
├─ tagsstring []必须标签

item 类型: string

├─ 非必须
├─ current_historynumber必须当前历史id
├─ screenshotstring必须截屏
├─ pathstring必须区块路径
├─ occupiernull,number必须当前锁定人id
├─ isOfficialnull必须是否官方
├─ publicnumber必须公开状态
├─ isDefaultnull必须是否默认
├─ tiny_reservedboolean必须是否是tiny专有
├─ authornull必须
├─ name_cnnull必须组件名称
├─ npm_namestring必须npm包名
├─ created_appnull必须创建区块时所在appId
localestring非必须
+ + +## 创建区块分类 + + + +### 基本信息 + +**Path:** /material-center/api/block-categories + +**Method:** POST + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
appnumber必须从属应用id
namestring必须分组名称
descstring非必须
category_idstring必须分组唯一key
blocksnumber []非必须关联区块

item 类型: number

├─ 非必须区块id
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须分组id
├─ namestring非必须分组名称
├─ appobject非必须从属应用
├─ idnumber非必须应用id
├─ namestring非必须应用名称
├─ app_websitenull非必须用户配置的正式环境应用访问地址
├─ platformnumber非必须从属设计器
├─ obs_urlnull非必须应用资源obs地址
├─ created_atstring非必须
├─ updated_atstring非必须
├─ statenull非必须应用状态 预留字段-无用
├─ publishedboolean非必须应用是否正式上线 预留字段 无用
├─ createdBynumber非必须应用创建者
├─ tenantnull非必须从属租户
├─ home_pagenull非必须首页页面id
├─ cssnull非必须全局css json对象
├─ confignull非必须应用全局配置
├─ git_groupnull非必须应用git分组-预留字段
├─ project_namenull非必须应用git仓库地址
├─ constantsnull非必须应用全局变量
├─ data_handlernull非必须应用通用数据处理-前端管理 服务端存json串
├─ descriptionstring非必须应用描述
├─ latestnull非必须应用最后一次记录 预留字段
├─ platform_historynull非必须应用关联设计器最后一次构建记录 预留字段
├─ editor_urlnull非必须此应用的访问地址
├─ branchnull非必须应用发布的目标git 分支
├─ visit_urlnull非必须预留字段
├─ is_demonull非必须是否为系统内demo应用
├─ image_urlnull非必须应用封面图
├─ is_defaultnull非必须是否为系统内默认应用
├─ template_typenull非必须应用模板类型
├─ set_template_timestring非必须应用被设置为模板时间
├─ set_template_bynumber非必须设置此应用为模板的用户
├─ frameworkstring非必须应用的前端框架
├─ global_statenull非必须应用全局状态 前端管理 服务端存json
├─ default_langnull非必须应用默认语言编码 预留字段
├─ extend_confignull非必须应用系统扩展配置 前端管理 服务端存json
├─ assets_urlnull非必须应用预览/发布生成代码zip包 obs地址
├─ data_hashnull非必须应用数据hash, 防止无数据变化构建
├─ descstring非必须分组描述
├─ createdByobject非必须创建人
├─ idnumber非必须系统用户id
├─ usernamestring非必须系统用户名
├─ emailstring非必须用户邮箱
├─ resetPasswordTokenstring非必须用户唯一key
├─ blockednull非必须是否被系统拉黑 true表示拉黑
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocknull非必须预留字段
├─ is_adminboolean非必须是否为超级管理员 true 表示是
├─ is_publicnull非必须
├─ updatedByobject非必须更新人
├─ idnumber非必须
├─ usernamestring非必须
├─ emailstring非必须
├─ resetPasswordTokenstring非必须
├─ blockednull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ blocknull非必须
├─ is_adminboolean非必须
├─ is_publicnull非必须
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ category_idstring非必须分组key
├─ blocksobject []非必须关联区块

item 类型: object

├─ idnumber必须
├─ labelstring必须区块编码
├─ frameworkstring必须技术栈
├─ contentobject必须区块内容
├─ componentNamestring非必须组件名
├─ fileNamestring非必须文件名
├─ cssstring非必须页面全局 css 样式
├─ schemaobject非必须数据组织方式
├─ eventsobject非必须事件
├─ linkobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onFormLayoutobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onCloseobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onCancelobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onBackobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onPreviousobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onNextobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onClickobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ propertiesobject []非必须属性

item 类型: object

├─ labelobject必须语言名称
├─ zh_CNstring非必须简体中文
├─ descriptionobject必须描述
├─ zh_CNstring非必须简体中文
├─ collapseobject必须
├─ numbernumber非必须数字
├─ textobject非必须文本
├─ zh_CNstring非必须简体中文
├─ contentobject []必须内容

item 类型: object

├─ propertystring必须属性
├─ typestring必须类型
├─ defaultValuearray,string,boolean必须默认值
├─ labelobject必须标签
├─ textobject非必须
├─ zh_CNstring非必须
├─ colsnumber必须
├─ rulesstring []必须规则

item 类型: string

├─ 非必须
├─ handleobject必须处理
├─ getterstring非必须
├─ setterstring非必须
├─ hiddenboolean必须隐藏
├─ requiredboolean必须
├─ readOnlyboolean必须只读
├─ disabledboolean必须禁用
├─ widgetobject必须UI 控件
├─ componentstring非必须组件
├─ propsobject非必须页面或者区块绑定的属性
├─ modelValuearray,boolean非必须
├─ descriptionobject必须
├─ zh_CNstring非必须
├─ linkedobject必须链接
├─ idstring非必须
├─ componentNamestring非必须组件名
├─ propertystring非必须属性
├─ methodsobject非必须页面声明的方法
├─ linkClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ formLayoutobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ goBackobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ goPreviousobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ goNextobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ triggerClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ triggerCancelobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ triggerCloseobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ childrenobject []非必须页面的子组件列表或字符串

item 类型: object

├─ componentNamestring必须组件名
├─ propsobject必须页面或者区块绑定的属性
├─ classNamestring非必须绑定的样式类名
├─ inlineobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ label-suffixstring非必须
├─ label-positionstring非必须
├─ label-widthstring非必须
├─ childrenobject []必须页面的子组件列表或字符串

item 类型: object

├─ componentNamestring必须
├─ loopobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ propsobject必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ labelobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ classNamestring非必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ conditionobject必须
├─ typestring非必须
├─ valuestring非必须
├─ propsobject必须
├─ classNameobject,string非必须
├─ srcobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ namestring非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ conditionobject必须
├─ typestring非必须
├─ valuestring非必须
├─ propsobject必须
├─ classNamestring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ namestring非必须
├─ onLayoutobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ textobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ typestring非必须
├─ childrenobject必须
├─ typestring非必须
├─ valuestring非必须
├─ keystring非必须
├─ idstring必须
├─ fileNamestring非必须
├─ idstring必须
├─ conditionobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ idstring必须
├─ stateobject非必须页面的 state
├─ formDatastring []非必须

item 类型: string

├─ 非必须
├─ typestring非必须类型
├─ componentstring非必须组件
├─ labelstring非必须
├─ lifeCyclesobject非必须生命周期
├─ onMountedobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ configureobject非必须配置
├─ isContainerboolean非必须
├─ slotsstring []非必须

item 类型: string

├─ 非必须
├─ created_atstring必须创建时间
├─ updated_atstring必须更新时间
├─ assetsobject必须构建资源
├─ materialstring []非必须

item 类型: string

├─ 非必须
├─ scriptsstring []非必须

item 类型: string

├─ 非必须
├─ stylesstring []非必须

item 类型: string

├─ 非必须
├─ createdBynumber必须创建人
├─ last_build_infoobject必须 最后构建信息
├─ resultboolean非必须
├─ versionsstring []非必须

item 类型: string

├─ 非必须
├─ endTimestring非必须
├─ descriptionnull必须描述
├─ tagsstring []必须标签

item 类型: string

├─ 非必须
├─ current_historynumber必须当前历史记录id
├─ screenshotstring必须截屏
├─ pathstring必须区块路径
├─ occupiernull,number必须当前锁定人id
├─ isOfficialnull必须是否是官方
├─ publicnumber必须公开状态:0,1,2
├─ isDefaultnull必须是否默认
├─ tiny_reservedboolean必须是否是tiny专有
├─ authornull必须
├─ name_cnnull必须区块名称
├─ npm_namestring必须npm包名
├─ created_appnull必须创建区块时所在appId
localestring非必须
+ + + +## 删除区块分类 + + + +### 基本信息 + +**Path:** /material-center/api/block-categories/:id + +**Method:** DELETE + +**接口描述:** + +

只有未关联任何区块时,才能删除成功

+ + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | --------------------------------- | -------- | ---- | ---- | +| Content-Type | application/x-www-form-urlencoded | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ---------- | +| id | 14 | 区块分组id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须区块分组详情
├─ idnumber非必须
├─ namestring非必须
├─ appobject非必须
├─ idnumber非必须
├─ namestring非必须
├─ app_websitenull非必须
├─ platformnumber非必须
├─ obs_urlnull非必须
├─ created_bynull非必须
├─ updated_bynull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ statenull非必须
├─ publishedboolean非必须
├─ createdBynumber非必须
├─ updatedBynumber非必须
├─ tenantnull非必须
├─ home_pagenull非必须
├─ cssnull非必须
├─ confignull非必须
├─ git_groupnull非必须
├─ project_namenull非必须
├─ constantsnull非必须
├─ data_handlernull非必须
├─ descriptionstring非必须
├─ latestnull非必须
├─ platform_historynull非必须
├─ editor_urlnull非必须
├─ branchnull非必须
├─ visit_urlnull非必须
├─ is_demonull非必须
├─ image_urlnull非必须
├─ is_defaultnull非必须
├─ template_typenull非必须
├─ set_template_timenull非必须
├─ set_template_bynull非必须
├─ set_default_bynull非必须
├─ frameworkstring非必须
├─ global_statenull非必须
├─ default_langnull非必须
├─ extend_confignull非必须
├─ assets_urlnull非必须
├─ data_hashnull非必须
├─ descstring非必须
├─ createdByobject非必须
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ providernull非必须
├─ passwordnull非必须
├─ resetPasswordTokenstring非必须w3用户名
├─ confirmationTokenstring非必须w3账户uuid
├─ confirmedboolean非必须是否认证
├─ blockednull非必须账号是否被拉黑
├─ rolenull非必须
├─ created_bynull非必须
├─ updated_bynull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ blocknull非必须
├─ is_adminboolean非必须是否是超级管理员
├─ is_publicnull非必须是否为公共账号
├─ updatedByobject非必须
├─ idnumber非必须
├─ usernamestring非必须
├─ emailstring非必须
├─ providernull非必须
├─ passwordnull非必须
├─ resetPasswordTokenstring非必须
├─ confirmationTokenstring非必须
├─ confirmedboolean非必须
├─ blockednull非必须
├─ rolenull非必须
├─ created_bynull非必须
├─ updated_bynull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ blocknull非必须
├─ is_adminboolean非必须
├─ is_publicnull非必须
├─ created_bynull非必须
├─ updated_bynull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ category_idstring非必须
├─ blocksstring []非必须

item 类型: string

├─ 非必须
localestring非必须
+ + +## 查询区块分类列表 + + + +### 基本信息 + +**Path:** /material-center/api/block-categories + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| -------- | -------- | ---- | ------ | +| appId | 是 | 12 | 应用id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ idnumber非必须
├─ namestring非必须区块分类名称
├─ appobject非必须从属应用详情
├─ idnumber非必须
├─ namestring非必须
├─ app_websitenull非必须
├─ platformnumber非必须
├─ obs_urlnull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ statenull非必须
├─ publishedboolean非必须
├─ createdBynumber非必须
├─ tenantnumber非必须
├─ home_pagestring非必须
├─ cssnull非必须
├─ confignull非必须
├─ git_groupnull非必须
├─ project_namenull非必须
├─ constantsnull非必须
├─ data_handlerobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ descriptionnull非必须
├─ latestnumber非必须
├─ platform_historynull非必须
├─ editor_urlnull非必须
├─ branchnull非必须
├─ visit_urlnull非必须
├─ is_demonull非必须
├─ image_urlnull非必须
├─ is_defaultnull非必须
├─ template_typenull非必须
├─ set_template_timenull非必须
├─ set_template_bynull非必须
├─ frameworkstring非必须
├─ global_stateobject []非必须

item 类型: object

├─ hjkhjkobject非必须
├─ idstring非必须
├─ storeStateobject非必须
├─ hjnumber非必须
├─ gettersobject非必须
├─ handobject非必须
├─ tpyestring非必须
├─ valuestring非必须
├─ actionsobject非必须
├─ default_langnull非必须
├─ extend_confignull非必须
├─ assets_urlstring非必须
├─ data_hashstring非必须
├─ descnull非必须描述
├─ createdByobject非必须创建区块分类的用户
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ resetPasswordTokenstring非必须w3用户名
├─ blockednull非必须账号是否被拉黑
├─ created_atstring非必须
├─ updated_atstring非必须
├─ blocknull非必须
├─ is_adminboolean非必须是否是超级管理员
├─ is_publicnull非必须是否为公共账号
├─ updatedByobject非必须修改区块分类的用户信息
├─ idnumber非必须
├─ usernamestring非必须
├─ emailstring非必须
├─ resetPasswordTokenstring非必须
├─ blockednull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ blocknull非必须
├─ is_adminboolean非必须
├─ is_publicnull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ category_idstring非必须区块分组key
├─ blocksstring []非必须关联区块数据

item 类型: string

├─ 非必须
localestring非必须
diff --git a/docs/api/backend-api/block-management-api.md b/docs/api/backend-api/block-management-api.md new file mode 100644 index 0000000000..81b834346c --- /dev/null +++ b/docs/api/backend-api/block-management-api.md @@ -0,0 +1,440 @@ +# 区块管理 + +## 删除区块分组 + + + +### 基本信息 + +**Path:** /api/block-groups/delete/:id + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ---------- | +| id | 100 | 区块分组id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须被删除的区块分组详情
├─ idnumber非必须
├─ namestring非必须区块分组名称
├─ appobject非必须关联的应用app信息
├─ idnumber非必须
├─ namestring非必须应用名称
├─ app_websitenull非必须用户配置的正式环境应用访问地址
├─ platformnumber非必须从属设计器
├─ obs_urlnull非必须应用资源obs地址
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ statenull非必须状态
├─ publishedboolean非必须应用是否正式上线
├─ createdBynumber非必须创建人
├─ tenantnumber非必须从属组织
├─ home_pagenull非必须首页页面id
├─ cssnull非必须全局css json对象
├─ confignull非必须应用全局配置
├─ git_groupnull非必须应用git分组-预留字段
├─ project_namenull非必须应用git仓库地址
├─ constantsnull非必须应用全局变量
├─ data_handlernull非必须应用通用数据处理-前端管理 服务端存json串
├─ descriptionnull非必须应用描述
├─ latestnull非必须应用最后一次记录 预留字段
├─ platform_historynull非必须应用关联设计器最后一次构建记录 预留字段
├─ editor_urlnull非必须此应用的访问地址
├─ branchnull非必须应用发布的目标git 分支
├─ visit_urlnull非必须预留字段
├─ is_demonull非必须是否为系统内demo应用
├─ image_urlnull非必须应用封面图
├─ is_defaultnull非必须是否为系统内默认应用
├─ template_typenull非必须应用模板类型
├─ set_template_timenull非必须应用被设置为模板时间
├─ set_template_bynull非必须设置此应用为模板的用户
├─ frameworknull非必须应用的前端框架
├─ global_statenull非必须应用全局状态 前端管理 服务端存json
├─ default_langnull非必须应用默认语言编码 预留字段
├─ extend_confignull非必须应用系统扩展配置 前端管理 服务端存json
├─ assets_urlnull非必须应用预览/发布生成代码zip包 obs地址
├─ data_hashnull非必须应用数据hash, 防止无数据变化构建
├─ descnull非必须区块分组描述
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocksobject []非必须区块信息

item 类型: object

├─ idnumber必须
├─ labelstring必须区块编码
├─ frameworkstring必须前端技术栈
├─ contentobject必须区块neir
├─ componentNamestring非必须
├─ fileNamestring非必须
├─ cssstring非必须
├─ schemaobject非必须
├─ propertiesobject []非必须

item 类型: object

├─ labelobject必须
├─ zh_CNstring非必须
├─ descriptionobject必须
├─ zh_CNstring非必须
├─ collapseobject必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentobject []必须

item 类型: object

├─ propertystring必须
├─ typestring必须
├─ defaultValuearray,string,boolean必须
├─ labelobject必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ descriptionobject必须
├─ zh_CNstring非必须
├─ widgetobject必须
├─ componentstring非必须
├─ propsobject非必须
├─ modelValuearray,boolean非必须
├─ colsnumber必须
├─ rulesstring []必须

item 类型: string

├─ 非必须
├─ linkedobject必须
├─ componentNamestring非必须
├─ propertystring非必须
├─ idstring非必须
├─ handleobject必须
├─ getterstring非必须
├─ setterstring非必须
├─ hiddenboolean必须
├─ requiredboolean必须
├─ readOnlyboolean必须
├─ disabledboolean必须
├─ eventsobject非必须
├─ onAddobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ linkobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onFormLayoutobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onCloseobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onCancelobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onBackobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onPreviousobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onNextobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onClickobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ classNamestring非必须
├─ inlineobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ label-suffixstring非必须
├─ label-positionstring非必须
├─ label-widthstring非必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ idstring必须
├─ propsobject必须
├─ sizestring非必须
├─ styleobject非必须
├─ margin-leftstring非必须
├─ textobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ visibleobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ modelobject非必须
├─ propstring非必须
├─ titleobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ widthstring非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ labelobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ classNamestring非必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ classNamestring非必须
├─ valueobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ modelobject非必须
├─ propstring非必须
├─ placeholderobject非必须
├─ typestring非必须
├─ keystring非必须
├─ sizestring非必须
├─ onChangeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ refstring非必须
├─ dataobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ show-checkboxboolean非必须
├─ check-on-click-nodeboolean非必须
├─ icon-trigger-click-nodeboolean非必须
├─ shrink-iconobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ expand-iconobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ filter-node-methodobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onCheckChangeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ typestring非必须
├─ textobject非必须
├─ typestring非必须
├─ keystring非必须
├─ valuestring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ namestring非必须
├─ onLayoutobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ childrenobject必须
├─ typestring非必须
├─ keystring非必须
├─ valuestring非必须
├─ idstring必须
├─ conditionobject必须
├─ typestring非必须
├─ valuestring非必须
├─ fileNamestring非必须
├─ idstring必须
├─ propsobject必须
├─ classNameobject,string非必须
├─ slotobject非必须
├─ namestring非必须
├─ srcobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ namestring非必须
├─ conditionobject必须
├─ typestring非必须
├─ valuestring非必须
├─ loopobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ conditionobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ idstring必须
├─ stateobject非必须
├─ boxVisibilityboolean非必须
├─ checkedNodesstring []非必须

item 类型: string

├─ 非必须
├─ checkedNodesLengthnumber非必须
├─ filterTextstring非必须
├─ IconMinusSquareobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ IconPlusSquareobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ treeDataobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ formDatastring []非必须

item 类型: string

├─ 非必须
├─ methodsobject非必须
├─ openDialogobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ closeDialogobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ searchobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ checkChangeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ filterNodeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ confirmobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ linkClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ formLayoutobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ goBackobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ goPreviousobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ goNextobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ triggerClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ triggerCancelobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ triggerCloseobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ lifeCyclesobject非必须
├─ setupobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onMountedobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ idstring非必须
├─ typestring非必须
├─ componentstring非必须
├─ labelstring非必须
├─ configureobject非必须
├─ isContainerboolean非必须
├─ slotsstring []非必须

item 类型: string

├─ 非必须
├─ created_atstring必须创建时间
├─ updated_atstring必须更新时间
├─ assetsobject必须构建资源
├─ materialstring []非必须

item 类型: string

├─ 非必须
├─ scriptsstring []非必须

item 类型: string

├─ 非必须
├─ stylesstring []非必须

item 类型: string

├─ 非必须
├─ createdBynumber必须创建人
├─ last_build_infoobject必须最新一次构建信息
├─ resultboolean非必须
├─ versionsstring []非必须

item 类型: string

├─ 非必须
├─ endTimestring非必须
├─ descriptionnull必须区块描述
├─ tagsstring []必须标签

item 类型: string

├─ 非必须
├─ current_historynumber必须当前历史记录id
├─ screenshotstring必须截屏
├─ pathstring必须区块路径
├─ occupiernumber,null必须当前锁定人id
├─ isOfficialnull必须是否是官方
├─ publicnumber必须公开状态:0,1,2
├─ isDefaultnull必须是否是默认
├─ tiny_reservedboolean必须是否是tiny专有
├─ authornull必须预留字段
├─ name_cnnull必须区块名称
├─ npm_namestring必须区块npm包名
├─ created_appnull必须创建区块时所在appId
localestring非必须
+ + +## 删除区块历史记录 + + + +### 基本信息 + +**Path:** /api/block-history/delete/:id + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ---- | +| id | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
messagestring非必须
blocknumber非必须
timestring非必须
contentstring非必须
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须
├─ messagestring非必须历史记录描述消息
├─ blockobject非必须区块
├─ contentstring非必须区块内容
├─ published_atstring非必须发布时间
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
+ + +## 区块管理侧列表 + + + +### 基本信息 + +**Path:** /material-center/api/blocks + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| ---------- | -------- | ---- | ---------------- | +| appId | 是 | 112 | 应用id | +| categoryId | 否 | 12 | 区块所属区块分类 | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ idnumber必须区块id
├─ labelstring必须区块标签名
├─ created_atstring必须
├─ updated_atstring必须
├─ last_build_infoobject必须区块最后一次发布信息
├─ resultboolean非必须构建是否成功
├─ versionsstring []非必须区块发布使用的前端脚手架信息

item 类型: string

├─ 非必须模板信息,例如:@opentiny/tinybuilder-webcomp-vue-tiny@0.0.10
├─ endTimestring非必须发布结束时间
├─ screenshotstring必须区块封面图
├─ occupierobject必须区块编辑人
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ resetPasswordTokenstring非必须w3账号
├─ blockednull非必须是否被拉黑
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocknull非必须预留字段
├─ is_adminboolean非必须是否是超级管理员
├─ is_publicnull非必须是否为公共账号
├─ name_cnstring,null必须区块名称
├─ is_publishedboolean必须是否发布
├─ authorobject必须区块作者信息,和createdBy相同
localestring非必须
+ + +## 新增区块分组 + + + +### 基本信息 + +**Path:** /material-center/api/block-groups/create + +**Method:** POST + +**接口描述:** + +

app 和 blocks 需要查询出 apps表、blocks表关联的数据

+ + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
namestring必须区块分组名称
appnumber必须所属应用
descstring非必须描述
blocksobject []非必须包含的区块,可选

item 类型: object

├─ idstring必须区块id
├─ versionstring必须区块版本号
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须区块分组id
├─ namestring非必须名称
├─ appobject非必须所属应用数据
├─ idnumber非必须
├─ namestring非必须应用名称
├─ app_websitenull非必须用户配置的正式环境应用访问地址
├─ platformnumber非必须从属设计器
├─ obs_urlnull非必须应用资源obs地址
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ statenull非必须状态
├─ publishedboolean非必须应用是否正式上线
├─ createdBynumber非必须创建人
├─ tenantnumber非必须从属组织
├─ home_pagenull非必须首页页面id
├─ cssnull非必须全局css
├─ confignull非必须应用全局配置
├─ git_groupnull非必须应用git分组-预留字段
├─ project_namenull非必须应用git仓库地址
├─ constantsnull非必须应用全局变量
├─ data_handlernull非必须应用通用数据处理-前端管理 服务端存json串
├─ descriptionnull非必须应用描述
├─ latestnull非必须应用最后一次记录 预留字段
├─ platform_historynull非必须应用关联设计器最后一次构建记录 预留字段
├─ editor_urlnull非必须此应用的访问地址
├─ branchnull非必须应用发布的目标git 分支
├─ visit_urlnull非必须预留字段
├─ is_demonull非必须是否为系统内demo应用
├─ image_urlnull非必须应用封面图
├─ is_defaultnull非必须是否为系统内默认应用
├─ template_typenull非必须应用模板类型
├─ set_template_timenull非必须应用被设置为模板时间
├─ set_template_bynull非必须设置此应用为模板的用户
├─ frameworknull非必须应用的前端框架
├─ global_statenull非必须应用全局状态 前端管理 服务端存json
├─ default_langnull非必须应用默认语言编码 预留字段
├─ extend_confignull非必须应用系统扩展配置 前端管理 服务端存json
├─ assets_urlnull非必须应用预览/发布生成代码zip包 obs地址
├─ data_hashnull非必须应用数据hash, 防止无数据变化构建
├─ descnull非必须区块分组描述
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocksobject []非必须关联的区块数据

item 类型: object

├─ idnumber必须
├─ labelstring必须区块编码
├─ frameworkstring必须前端技术栈
├─ contentobject必须区块内容
├─ componentNamestring非必须
├─ fileNamestring非必须
├─ cssstring非必须
├─ schemaobject非必须
├─ propertiesobject []非必须

item 类型: object

├─ labelobject必须
├─ zh_CNstring非必须
├─ descriptionobject必须
├─ zh_CNstring非必须
├─ collapseobject必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentobject []必须

item 类型: object

├─ propertystring必须
├─ typestring必须
├─ defaultValuearray,string,boolean必须
├─ labelobject必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ descriptionobject必须
├─ zh_CNstring非必须
├─ widgetobject必须
├─ componentstring非必须
├─ propsobject非必须
├─ modelValuearray,boolean非必须
├─ colsnumber必须
├─ rulesstring []必须

item 类型: string

├─ 非必须
├─ linkedobject必须
├─ componentNamestring非必须
├─ propertystring非必须
├─ idstring非必须
├─ handleobject必须
├─ getterstring非必须
├─ setterstring非必须
├─ hiddenboolean必须
├─ requiredboolean必须
├─ readOnlyboolean必须
├─ disabledboolean必须
├─ eventsobject非必须
├─ onAddobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ linkobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onFormLayoutobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onCloseobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onCancelobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onBackobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onPreviousobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onNextobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ onClickobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ classNamestring非必须
├─ inlineobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ label-suffixstring非必须
├─ label-positionstring非必须
├─ label-widthstring非必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ idstring必须
├─ propsobject必须
├─ sizestring非必须
├─ styleobject非必须
├─ margin-leftstring非必须
├─ textobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ visibleobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ modelobject非必须
├─ propstring非必须
├─ titleobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ widthstring非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ labelobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ classNamestring非必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ classNamestring非必须
├─ valueobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ modelobject非必须
├─ propstring非必须
├─ placeholderobject非必须
├─ typestring非必须
├─ keystring非必须
├─ sizestring非必须
├─ onChangeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ refstring非必须
├─ dataobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ show-checkboxboolean非必须
├─ check-on-click-nodeboolean非必须
├─ icon-trigger-click-nodeboolean非必须
├─ shrink-iconobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ expand-iconobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ filter-node-methodobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onCheckChangeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ typestring非必须
├─ textobject非必须
├─ typestring非必须
├─ keystring非必须
├─ valuestring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ namestring非必须
├─ onLayoutobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ childrenobject必须
├─ typestring非必须
├─ keystring非必须
├─ valuestring非必须
├─ idstring必须
├─ conditionobject必须
├─ typestring非必须
├─ valuestring非必须
├─ fileNamestring非必须
├─ idstring必须
├─ propsobject必须
├─ classNameobject,string非必须
├─ slotobject非必须
├─ namestring非必须
├─ srcobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ namestring非必须
├─ conditionobject必须
├─ typestring非必须
├─ valuestring非必须
├─ loopobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ conditionobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ idstring必须
├─ stateobject非必须
├─ boxVisibilityboolean非必须
├─ checkedNodesstring []非必须

item 类型: string

├─ 非必须
├─ checkedNodesLengthnumber非必须
├─ filterTextstring非必须
├─ IconMinusSquareobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ IconPlusSquareobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ treeDataobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ formDatastring []非必须

item 类型: string

├─ 非必须
├─ methodsobject非必须
├─ openDialogobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ closeDialogobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ searchobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ checkChangeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ filterNodeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ confirmobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ linkClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ formLayoutobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ goBackobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ goPreviousobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ goNextobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ triggerClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ triggerCancelobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ triggerCloseobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ lifeCyclesobject非必须
├─ setupobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onMountedobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ idstring非必须
├─ typestring非必须
├─ componentstring非必须
├─ labelstring非必须
├─ configureobject非必须
├─ isContainerboolean非必须
├─ slotsstring []非必须

item 类型: string

├─ 非必须
├─ created_atstring必须创建时间
├─ updated_atstring必须更新时间
├─ assetsobject必须构建资源
├─ materialstring []非必须

item 类型: string

├─ 非必须
├─ scriptsstring []非必须

item 类型: string

├─ 非必须
├─ stylesstring []非必须

item 类型: string

├─ 非必须
├─ createdBynumber必须创建人
├─ last_build_infoobject必须最新一次构建信息
├─ resultboolean非必须
├─ versionsstring []非必须

item 类型: string

├─ 非必须
├─ endTimestring非必须
├─ descriptionnull必须描述
├─ tagsstring []必须标签

item 类型: string

├─ 非必须
├─ current_historynumber必须当前历史记录id
├─ screenshotstring必须截屏
├─ pathstring必须区块路径
├─ occupiernumber,null必须当前锁定人id
├─ isOfficialnull必须是否是官方
├─ publicnumber必须公开状态:0,1,2
├─ isDefaultnull必须是否是默认
├─ tiny_reservedboolean必须是否是tiny专有
├─ authornull必须预留字段
├─ name_cnnull必须区块名称
├─ npm_namestring必须npm包名
├─ created_appnull必须创建区块时所在appId
localestring非必须
+ + +## 新增区块历史记录 + + + +### 基本信息 + +**Path:** /api/block-history/create + +**Method:** POST + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
messagestring非必须修改信息
blocknumber必须区块ID
timestring非必须变更时间,等价于published_at
contentstring非必须区块内容
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须
├─ messagestring非必须历史记录描述消息
├─ blockobject非必须区块
├─ contentstring非必须区块内容
├─ published_atstring非必须发布时间
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
+ + +## 更新区块分组 + + + +### 基本信息 + +**Path:** /api/block-groups/update/:id + +**Method:** POST + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ---------- | +| id | 100 | 区块分组id | + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| -------- | -------- | ---- | ---- | +| name | 是 | | | +| app | 是 | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
appstring非必须从属应用
blocksobject []非必须

item 类型: object

├─ idnumber必须区块id

mock: 1393

├─ versionstring必须区块版本

mock: ~1.0.1

+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须区块分组详情
├─ idnumber非必须
├─ namestring非必须区块分组名称
├─ appobject非必须应用信息
├─ descstring非必须区块分组描述
├─ published_atstring非必须
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocksstring []非必须区块信息

item 类型: string

├─ 非必须
+ + +## 未在区块分组的全部区块综合查询列表 + + + +### 基本信息 + +**Path:** /material-center/api/block/notgroup/:id + +**Method:** GET + +**接口描述:** + +

查找去系统中未在此分组中的区块

+

区块的来源范围:

+
    +
  1. 正在使用此设计器用户的私有区块
  2. +
  3. 半公开给此设计器应用租户的区块
  4. +
  5. 公开的区块
  6. +
+ + + +### 请求参数 + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ---------- | +| id | 322 | 区块分组id | + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| ------------- | -------- | ---- | ----------------------------- | +| createdBy | 否 | 22 | 区块作者id | +| tags_contains | 否 | zzc | 标签名 | +| public | 否 | 2 | 区块公开状态 1 公开 2半公开 | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ idnumber必须区块id
├─ labelstring必须区块编码
├─ frameworkstring必须区块技术栈

枚举: Vue,Angular

├─ created_atstring必须创建时间
├─ updated_atstring必须更新时间
├─ createdBynumber必须创建人
├─ last_build_infoobject必须最新一次构建信息
├─ resultboolean非必须
├─ versionsstring []非必须

item 类型: string

├─ 非必须
├─ endTimestring非必须
├─ descriptionnull,string必须描述
├─ tagsstring []必须标签

item 类型: string

├─ 非必须
├─ current_historynumber必须当前历史记录id
├─ screenshotstring,null必须截屏
├─ pathstring,null必须区块路径
├─ occupiernumber,null必须当前锁定人id
├─ isOfficialnull,boolean必须是否是官方
├─ publicnumber必须公开状态:0,1,2
├─ isDefaultnull,boolean必须是否是默认
├─ tiny_reservedboolean必须是否是tiny专有
├─ authornull必须预留字段
├─ name_cnnull,string必须区块名称
├─ npm_namestring必须区块npm包名
├─ created_appnull必须创建区块时所在appId
├─ groupsobject []必须

item 类型: object

├─ idnumber必须
├─ namestring必须名称
├─ appnumber,null必须关联appid
├─ descnull必须描述
├─ created_atstring必须创建时间
├─ updated_atstring必须更新时间
├─ public_scope_tenantsstring []必须

item 类型: string

├─ 非必须
localestring非必须
+ + +## 查询区块历史记录 + + + +### 基本信息 + +**Path:** /api/block-history + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| -------- | -------- | ---- | ------ | +| block_id | 否 | 12 | 区块id | +| id | 否 | | | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ idnumber非必须
├─ messagestring非必须历史记录描述消息
├─ blockobject非必须区块
├─ contentstring非必须区块内容
├─ published_atstring非必须发布时间
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
+ + +## 添加/修改国际化语言 + + + +### 基本信息 + +**Path:** /api/block/i18n/:id + +**Method:** POST + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| id | 14 | 区块id | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
i18n_langsnumber []非必须

item 类型: number

├─ 非必须国际化语言id
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须
├─ labelstring非必须
├─ frameworkstring非必须
├─ contentobject非必须
├─ blockNamestring非必须
├─ idstring非必须
├─ propsobject非必须
├─ __style__string非必须
├─ lifeCyclesobject非必须
├─ ngOnChangesobject非必须
├─ typestring非必须
├─ compiledstring非必须
├─ sourcestring非必须
├─ cssstring非必须
├─ i18nobject非必须
├─ zh_CNobject非必须
├─ i18n-kv6bz5m1string非必须
├─ i18n-kv6bz5m2string非必须
├─ i18n-kv6bz5m3string非必须
├─ en_USobject非必须
├─ i18n-kv6bz5m1string非必须
├─ i18n-kv6bz5m2string非必须
├─ i18n-kv6bz5m3string非必须
├─ methodsobject非必须
├─ __initMethods__object非必须
├─ typestring非必须
├─ sourcestring非必须
├─ compiledstring非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring非必须
├─ idstring非必须
├─ propsobject非必须
├─ __style__string非必须
├─ classNamestring非必须
├─ childrenobject []非必须

item 类型: object

├─ idstring非必须
├─ componentNamestring非必须
├─ propsobject非必须
├─ typestring非必须
├─ __style__string非必须
├─ classNamestring非必须
├─ ngClassobject非必须
├─ typestring非必须
├─ variablestring非必须
├─ clickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ eventsobject []非必须

item 类型: object

├─ namestring非必须
├─ idstring非必须
├─ paramsobject非必须
├─ typestring非必须
├─ argsstring []非必须

item 类型: string

├─ 非必须
├─ valuestring非必须
├─ loopobject非必须
├─ typestring非必须
├─ variablestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ schemaobject非必须
├─ typestring非必须
├─ propertiesobject非必须
├─ FilterButtonsizk3object非必须
├─ typestring非必须
├─ propertiesobject非必须
├─ dataSourceobject非必须
├─ titlestring非必须
├─ typestring非必须
├─ searchKeyobject非必须
├─ titlestring非必须
├─ typestring非必须
├─ defaultstring非必须
├─ onSelectobject非必须
├─ titlestring非必须
├─ typestring非必须
├─ defaultstring非必须
├─ dataSourceobject非必须
├─ listobject []非必须

item 类型: object

├─ namestring必须
├─ protocalstring必须
├─ initialDataobject必须
├─ variablearray,string非必须
├─ typestring非必须
├─ valuestring非必须
├─ actionsobject非必须
├─ moduleobject非必须
├─ compiledstring非必须
├─ sourcestring非必须
├─ typestring非必须
├─ listobject []非必须

item 类型: object

├─ idstring非必须
├─ titlestring非必须
├─ published_atstring非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ platformnull非必须
├─ assetsnull非必须
├─ last_build_infonull非必须
├─ tenantnull非必须
├─ block_historynull非必须
├─ descriptionnull非必须
├─ tagsnull非必须
├─ authornull非必须
├─ current_historynull非必须
├─ historiesstring []非必须

item 类型: string

├─ 非必须
├─ groupsstring []非必须

item 类型: string

├─ 非必须
├─ i18n_langsobject []非必须

item 类型: object

├─ idnumber必须
├─ langstring必须
├─ labelstring必须
├─ created_atstring必须
├─ updated_atstring必须
+ + +## 获取区块分组 + + + +### 基本信息 + +**Path:** /material-center/api/block-groups + +**Method:** GET + +**接口描述:** + +

需要和前端 精简返回数据的关联值

+ + +### 请求参数 + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| -------- | -------- | ---- | ---------- | +| name | 否 | | 区块名称 | +| app | 否 | | 从属应用id | +| id | 否 | | 区块分组id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ idnumber非必须
├─ namestring非必须区块分组名称
├─ appobject非必须关联app信息
├─ idnumber非必须
├─ namestring非必须应用名称
├─ app_websitenull非必须用户配置的正式环境应用访问地址
├─ platformnumber非必须从属设计器
├─ obs_urlstring非必须应用资源obs地址
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ statenull非必须应用状态
├─ publishedboolean非必须应用是否正式上线
├─ createdBynumber非必须应用创建人
├─ tenantnumber非必须从属组织
├─ home_pagenull非必须首页页面id
├─ cssnull非必须全局css json对象
├─ configobject非必须应用全局配置
├─ git_groupnull非必须应用git分组
├─ project_namestring非必须应用git仓库地址
├─ constantsnull非必须应用全局变量
├─ data_handlernull非必须应用通用数据处理-前端管理 服务端存json串
├─ descriptionstring非必须应用描述
├─ latestnull非必须应用最后一次记录
├─ platform_historynull非必须应用关联设计器最后一次构建记录
├─ editor_urlstring非必须此应用的访问地址
├─ branchstring非必须应用发布的目标git 分支
├─ visit_urlnull非必须预留字段
├─ is_demonull非必须是否为系统内demo应用
├─ image_urlstring非必须应用封面图
├─ is_defaultnull非必须是否为系统内默认应用
├─ template_typenull非必须应用模板类型
├─ set_template_timenull非必须应用被设置为模板时间
├─ set_template_bynull非必须设置此应用为模板的用户
├─ frameworkstring非必须应用的前端框架
├─ global_statenull非必须应用全局状态 前端管理 服务端存json
├─ default_langnull非必须应用默认语言编码 预留字段
├─ extend_configobject非必须应用系统扩展配置 前端管理 服务端存json
├─ platform_build_modestring非必须
├─ app_typestring非必须
├─ bridgestring非必须
├─ utilsstring非必须
├─ i18nobject []非必须

item 类型: object

├─ namestring必须
├─ urlstring必须
├─ datasourcestring非必须
├─ assets_urlstring非必须应用预览/发布生成代码zip包 obs地址
├─ data_hashstring非必须应用数据hash, 防止无数据变化构建
├─ descnull非必须区块分组描述
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocksobject []非必须区块数组

item 类型: object

├─ idnumber必须
├─ labelstring必须区块编码
├─ frameworkstring必须技术栈
├─ contentobject必须区块内容
├─ stateobject非必须
├─ dataobject非必须
├─ extendobject非必须
├─ legendobject非必须
├─ xstring非必须
├─ ystring非必须
├─ textStyleobject非必须
├─ colorstring非必须
├─ fontSizenumber,string非必须
├─ itemWidthnumber非必须
├─ itemHeightnumber非必须
├─ showboolean非必须
├─ iconstring非必须
├─ bottomnumber,string非必须
├─ centernumber非必须
├─ itemGapnumber非必须
├─ orientstring非必须
├─ datastring []非必须

item 类型: string

├─ 非必须
├─ topstring非必须
├─ leftstring非必须
├─ xAxisobject []非必须

item 类型: object

├─ typestring必须
├─ axisLabelobject必须
├─ intervalnumber非必须
├─ textStyleobject非必须
├─ fontSizenumber非必须
├─ colorstring非必须
├─ axisTickobject必须
├─ showboolean非必须
├─ axisLineobject必须
├─ showboolean非必须
├─ yAxisobject []非必须

item 类型: object

├─ axisTickobject必须
├─ showboolean非必须
├─ axisLineobject必须
├─ showboolean非必须
├─ axisLabelobject必须
├─ textStyleobject非必须
├─ colorstring非必须
├─ fontSizenumber非必须
├─ fontSizenumber非必须
├─ colorstring非必须
├─ splitLineobject必须
├─ showboolean非必须
├─ lineStyleobject非必须
├─ colorstring []非必须

item 类型: string

├─ 非必须
├─ opacitynumber非必须
├─ gridobject非必须
├─ leftstring非必须
├─ rightstring非必须
├─ topstring非必须
├─ bottomstring非必须
├─ containLabelboolean非必须
├─ colorstring []非必须

item 类型: string

├─ 非必须
├─ radarobject非必须
├─ radiusstring非必须
├─ triggerEventboolean非必须
├─ nameobject非必须
├─ textStyleobject非必须
├─ colorstring非必须
├─ fontSizestring非必须
├─ paddingnumber []非必须

item 类型: number

├─ 非必须
├─ nameGapstring非必须
├─ splitAreaobject非必须
├─ areaStyleobject非必须
├─ colorstring非必须
├─ axisLineobject非必须
├─ lineStyleobject非必须
├─ colorstring非必须
├─ splitLineobject非必须
├─ lineStyleobject非必须
├─ widthnumber非必须
├─ colorstring非必须
├─ tooltipobject非必须
├─ showboolean非必须
├─ backgroundColorstring非必须
├─ borderColorstring非必须
├─ borderWidthnumber非必须
├─ textStyleobject非必须
├─ colorstring非必须
├─ fontSizenumber非必须
├─ extraCssTextstring非必须
├─ seriesobject []非必须

item 类型: object

├─ namestring非必须
├─ typestring必须
├─ radiusstring []必须

item 类型: string

├─ 非必须
├─ centerstring []必须

item 类型: string

├─ 非必须
├─ labelLineobject非必须
├─ normalobject非必须
├─ lengthnumber非必须
├─ lineStyleobject非必须
├─ typestring非必须
├─ colorstring非必须
├─ labelobject必须
├─ normalobject非必须
├─ borderWidthnumber非必须
├─ borderRadiusnumber非必须
├─ paddingnumber []非必须

item 类型: number

├─ 非必须
├─ heightnumber非必须
├─ fontSizenumber非必须
├─ alignstring非必须
├─ colorstring非必须
├─ showboolean非必须
├─ colorstring非必须
├─ datanumber []必须

item 类型: number

├─ 非必须
├─ settingsobject非必须
├─ optionobject非必须
├─ dataobject非必须
├─ typestring非必须
├─ viewConfigobject非必须
├─ themestring非必须
├─ navigatorobject非必须
├─ showboolean非必须
├─ scaleobject非必须
├─ overallobject非必须
├─ colorobject非必须
├─ methodsobject非必须
├─ onClickSystemobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onClickPageobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ componentNamestring非必须
├─ fileNamestring非必须
├─ cssstring非必须
├─ propsobject非必须
├─ stylestring非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ stylestring非必须
├─ refobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ srcobject,string非必须
├─ stylestring非必须
├─ textobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ titleobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ idstring必须
├─ componentTypestring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ stylestring非必须
├─ textobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ dataobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ heightstring非必须
├─ widthstring非必须
├─ extendobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ settingsobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ stylestring非必须
├─ optionobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ chartTypestring非必须
├─ idstring必须
├─ componentTypestring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ stylestring非必须
├─ spanstring,number非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ stylestring非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ stylestring非必须
├─ idstring必须
├─ schemaobject非必须
├─ propertiesobject []非必须

item 类型: object

├─ labelobject必须
├─ zh_CNstring非必须
├─ descriptionobject必须
├─ zh_CNstring非必须
├─ collapseobject必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentobject []必须

item 类型: object

├─ propertystring必须
├─ typestring必须
├─ defaultValuearray,string必须
├─ labelobject必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ colsnumber必须
├─ rulesstring []必须

item 类型: string

├─ 非必须
├─ handleobject必须
├─ getterstring非必须
├─ setterstring非必须
├─ hiddenboolean必须
├─ requiredboolean必须
├─ readOnlyboolean必须
├─ disabledboolean必须
├─ widgetobject必须
├─ componentstring非必须
├─ propsobject非必须
├─ modelValuearray,string非必须
├─ typestring非必须
├─ textFieldstring非必须
├─ languagestring非必须
├─ buttonTextstring非必须
├─ titlestring非必须
├─ expandboolean非必须
├─ optionsobject []非必须

item 类型: object

├─ labelstring必须
├─ valuestring必须
├─ propertiesobject []必须

item 类型: object

├─ labelobject必须
├─ zh_CNstring非必须
├─ contentobject []必须

item 类型: object

├─ propertystring必须
├─ typestring必须
├─ defaultValuestring必须
├─ labelobject必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ widgetobject必须
├─ componentstring非必须
├─ propsobject非必须
├─ modelValuestring,null非必须
├─ optionsobject []非必须

item 类型: object

├─ labelstring必须
├─ valuestring必须
├─ accessorobject必须
├─ setterobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ eventsobject非必须
├─ slotsobject非必须
├─ undefinedobject非必须
├─ labelobject非必须
├─ dataSourceobject非必须
├─ lifeCyclesobject非必须
├─ configureobject非必须
├─ isContainerboolean非必须
├─ created_atstring必须创建时间
├─ updated_atstring必须更新时间
├─ assetsobject必须构建资源
├─ materialstring []非必须

item 类型: string

├─ 非必须
├─ scriptsstring []非必须

item 类型: string

├─ 非必须
├─ stylesstring []非必须

item 类型: string

├─ 非必须
├─ createdBynumber必须创建人
├─ last_build_infoobject必须最新一次构建信息
├─ resultboolean非必须
├─ versionsstring []非必须

item 类型: string

├─ 非必须
├─ endTimestring非必须
├─ descriptionstring,null必须描述
├─ tagsstring []必须标签

item 类型: string

├─ 非必须
├─ current_historynumber必须当前历史记录id
├─ screenshotstring必须截图
├─ pathstring必须区块路径
├─ occupiernull,number必须当前锁定人id
├─ isOfficialboolean必须是否是官方
├─ publicnumber必须公开状态:0,1,2
├─ isDefaultboolean必须是否是默认
├─ tiny_reservedboolean必须是否是tiny专有
├─ authornull必须预留字段
├─ name_cnnull,string必须区块名称
├─ npm_namestring必须npm包名
├─ created_appnull必须创建区块时所在appId
├─ current_versionstring必须
localestring非必须
diff --git a/docs/api/backend-api/data-source-management.md b/docs/api/backend-api/data-source-management.md new file mode 100644 index 0000000000..6af379af44 --- /dev/null +++ b/docs/api/backend-api/data-source-management.md @@ -0,0 +1,266 @@ +# 数据源管理 + +## 修改数据源 + + + +### 基本信息 + +**Path:** /app-center/api/sources/update/:id + +**Method:** POST + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | -------- | +| id | 2 | 数据源ID | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ dataobject非必须数据源数据
├─ namestring非必须数据源名称

mock: @string

├─ tplnumber非必须必须为app所关联的tpl id

mock: @integer

├─ created_atstring非必须
├─ updated_atstring非必须
├─ descstring非必须

mock: @string

namestring非必须数据源名称
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须数据源基本信息
├─ dataobject非必须
├─ namestring非必须数据源名称
├─ idnumber非必须数据源id
├─ tplstring非必须数据源模板id
├─ appstring非必须数据源所属appid
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ descstring非必须数据源描述
+ + +## 创建数据源 + + + +### 基本信息 + +**Path:** /app-center/api/sources/create + +**Method:** POST + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
namestring必须数据源名称
appnumber必须应用ID
tplnumber必须模板ID
descstring非必须数据源描述
dataobject非必须数据源数据
├─ keystring非必须
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ dataobject非必须
├─ keystring非必须
├─ namestring必须数据源名称

mock: @string

├─ idnumber必须数据源ID

mock: @integer

├─ tplstring必须数据源模板ID

mock: @integer

├─ appstring必须数据源所属应用ID

mock: @integer

├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ descstring非必须数据源描述

mock: @string

+ + +## 删除数据源 + + + +### 基本信息 + +**Path:** /api/sources/delete/:id + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | -------- | +| id | 2 | 数据源id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须数据源id
├─ namestring非必须数据源名称
├─ dataobject非必须数据源json数据
├─ columnsobject []非必须

item 类型: object

├─ namestring必须
├─ titlestring必须
├─ fieldstring必须
├─ typestring必须
├─ formatobject必须
├─ requiredboolean非必须
├─ stringTypestring非必须
├─ minnumber非必须
├─ maxnumber非必须
├─ dateTimeboolean非必须
├─ datastring []非必须

item 类型: string

├─ 非必须
├─ typestring非必须
├─ tplnull非必须数据源模板id
├─ appstring非必须数据源所属appid
├─ descnull非必须数据源描述
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
localestring非必须
+ + +## 删除数据源模板 + + + +### 基本信息 + +**Path:** /api/source_tpl/delete/:id + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ---- | +| id | | | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须
├─ namestring非必须名称
├─ descstring非必须描述
├─ datastring非必须数据
├─ platformnumber非必须设计器
+ + +## 查询应用下的数据源列表 + + + +### 基本信息 + +**Path:** /app-center/api/sources/list/:appId + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| appId | 2 | 应用id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ idnumber非必须
├─ namestring非必须数据源名称
├─ dataobject非必须数据源json数据
├─ columnsobject []非必须

item 类型: object

├─ namestring必须
├─ titlestring必须
├─ fieldstring必须
├─ typestring必须
├─ formatobject必须
├─ requiredboolean非必须
├─ stringTypestring非必须
├─ minnumber非必须
├─ maxnumber非必须
├─ dateTimeboolean非必须
├─ datastring []非必须

item 类型: string

├─ 非必须
├─ typestring非必须
├─ tplnull非必须数据源模板id
├─ appstring非必须数据源所属appid
├─ descnull非必须数据源描述
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
localestring非必须
+ + +## 查询数据源模板 + + + +### 基本信息 + +**Path:** /app-center/api/source_tpl + +**Method:** GET + +**接口描述:** + +

未启用  预留接口

+ + +### 请求参数 + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| -------- | -------- | ---- | ---- | +| id | 否 | | | +| name | 否 | | | +| platform | 否 | | | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ idnumber非必须
├─ namestring非必须名称
├─ descstring非必须描述
├─ datastring非必须数据
├─ platformnumber非必须设计器
+ + +## 根据id查询数据源 + + + +### 基本信息 + +**Path:** /app-center/api/sources/detail/:id + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ---- | +| id | 10 | | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject必须
├─ idnumber必须数据源ID

mock: @integer

├─ namestring必须数据源名称: 字母下划线开头,只包含英文字母数字下划线,长度200以内

mock: @string

├─ dataobject必须数据源的数据json串
├─ tplstring必须数据源模板ID

mock: @integer

├─ appstring必须数据源所属应用ID

mock: @integer

├─ descstring非必须数据源描述
├─ created_atstring非必须创建时间

mock: @time

├─ updated_atstring非必须更新时间

mock: @time

+ diff --git a/docs/api/backend-api/dsl-code-generation.md b/docs/api/backend-api/dsl-code-generation.md new file mode 100644 index 0000000000..dd61638c0d --- /dev/null +++ b/docs/api/backend-api/dsl-code-generation.md @@ -0,0 +1,104 @@ +# DSL代码生成 + +## generateCode + + + +### 基本信息 + +**Path:** /generateCode + +**Method:** GET + +**接口描述:** + +

作为npm包使用generateCode方法生成代码示例:

+
const path = require('path')
+const fs = require('fs')
+const { generateCode } = require('@opentiny/tiny-engine-dsl-ng-tiny/lib/generate-code.js')
+
+
+
+const result = generateCode({ pageInfo, blocksData })
+result.forEach((item) => fs.writeFileSync(`dist/${item.filePath}/${item.panelName}`, item.panelValue))
+
+ +

输入示例: { pageInfo, blocksData };

+
// pageInfo为页面的schema信息, 
+// pageInfo: { schema, name });
+{
+  name: 'page1',
+  schema: {
+     // 页面schema
+  }
+}
+
+
+// blocksData为页面引用的区块的schema数据
+// blocksData: Array<{ label, content }>
+[
+  {
+    label: 'image-title',
+    content: {
+      // 区块的schema
+    }
+  },
+  {
+    // 其他区块...
+  }
+]
+
+ +

输出示例:

+
[
+  {
+    "panelName": "page1.component.html",  // 文件名
+    "panelValue": "xxx",    // 生成代码的内容
+    "panelType": "html",     // 生成代码的文件类型:html、css、ts
+    "prettierOpt": { "parser": "html", "tabWidth": 2, "printWidth": 120 }, // prettier格式化选项
+    "type": "page",  // 生成代码类型:page、block、service
+    "filePath": "pages/page1"   // 生成代码文件的相对目录路径
+  },
+  {
+    "panelName": "page1.component.ts",
+    "panelValue": "xxx",
+    "panelType": "ts",
+    "prettierOpt": { "parser": "typescript", "tabWidth": 2, "printWidth": 120 },
+    "type": "page",
+    "filePath": "pages/page1"
+  },
+  {
+    "panelName": "block1.component.ts",
+    "type": "block",
+    "panelType": "ts",
+    "prettierOpt": { "parser": "typescript", "tabWidth": 2, "printWidth": 120 },
+    "filePath": "blocks/block1",
+    "panelValue": "xxx"
+  },
+  {
+    "panelName": "fetch.service.ts",
+    "panelType": "ts",
+    "prettierOpt": { "parser": "typescript", "tabWidth": 2, "printWidth": 120 },
+    "type": "service",
+    "filePath": "service",
+    "panelValue": "xxx"
+  },
+  // ...
+]
+
+ + + +### 请求参数 + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
object []非必须

item 类型: object

├─ panelNamestring必须文件名
├─ panelValuestring必须文件文本
├─ panelTypestring必须代码类型
├─ prettierOptobject必须代码美化选项
├─ parserstring非必须指定要使用的解析器
├─ tabWidthnumber非必须指定使用几个空格来表示一个制表符(Tab)
├─ printWidthnumber非必须指定每行代码的最大列数
├─ typestring必须代码类型
├─ filePathstring必须文件路径
+ diff --git a/docs/api/backend-api/material-center.md b/docs/api/backend-api/material-center.md new file mode 100644 index 0000000000..b1cab5de9e --- /dev/null +++ b/docs/api/backend-api/material-center.md @@ -0,0 +1,329 @@ +# 物料中心 + +## 区块详情 + + + +### 基本信息 + +**Path:** /material-center/api/block/detail + +**Method:** GET + +**接口描述:** + +

区块的 unique_key 为 label + framework + tenant组合
+通过同时传递三个键值即可查询到唯一区块
+tenant 通过前端配置统一 x-lowcode-org 请求头传递,接口中不用填写

+ + + +### 请求参数 + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| --------- | -------- | ------------- | ---------- | +| id | 是 | 981 | 区块id | +| label | 否 | CrmSiteManage | 区块名称 | +| framework | 否 | Vue | 区块技术栈 | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须区块id
├─ labelstring非必须区块编码
├─ frameworkstring非必须前端框架
├─ contentobject非必须区块内容
├─ componentNamestring非必须组件名称
├─ fileNamestring非必须页面名称
├─ cssstring非必须全局 css 样式
├─ schemaobject非必须数据结构
├─ propertiesobject []非必须属性

item 类型: object

├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ collapseobject非必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentobject []非必须

item 类型: object

├─ propertystring必须
├─ typestring必须
├─ defaultValueobject []必须

item 类型: object

├─ field_idstring必须
├─ field_valuestring必须
├─ field_typestring必须
├─ percentnumber必须
├─ selectedboolean必须
├─ labelobject必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ descriptionobject必须
├─ zh_CNstring非必须
├─ widgetobject必须
├─ componentstring非必须
├─ propsobject非必须
├─ handleobject必须
├─ eventsobject非必须事件
├─ updateobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ methodsobject非必须声明方法
├─ percentChangeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ closeDialogobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ confirmobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ childrenobject []非必须子组件列表或字符串

item 类型: object

├─ componentNamestring非必须组件名称
├─ propsobject非必须属性
├─ classNamestring非必须
├─ visibleobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ modelobject非必须
├─ propstring非必须
├─ titleobject非必须
├─ typestring非必须
├─ keystring非必须
├─ widthstring非必须
├─ onClosedobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ childrenobject []非必须子组件列表或字符串

item 类型: object

├─ componentNamestring必须组件名称
├─ propsobject必须属性
├─ label-positionstring非必须
├─ label-widthstring非必须
├─ slotstring非必须
├─ childrenobject []必须子组件列表或字符串

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ labelobject,string非必须
├─ keyobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ textobject非必须
├─ typestring非必须
├─ keystring非必须
├─ typeobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onClickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ classNamestring非必须
├─ labelobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ childrenobject必须
├─ typestring非必须
├─ valuestring非必须
├─ idstring必须
├─ conditionobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ idstring必须
├─ loopobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ idstring非必须
├─ idstring非必须
├─ configureobject非必须配置
├─ stateobject非必须
├─ totalnumber非必须
├─ dialogVisibleobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ buttonTypestring非必须
├─ cloudDataobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ lifeCyclesobject非必须生命周期
├─ setupobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ onMountedobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ typestring非必须类型
├─ componentstring非必须组件
├─ labelstring非必须标签
├─ published_atstring非必须
├─ created_atstring非必须创建时间
├─ updated_atstring非必须
├─ platformnull非必须关联设计器
├─ assetsnull非必须构建资源
├─ last_build_infonull非必须最新一次构建信息
├─ tenantnumber非必须所属组织
├─ descriptionnull非必须描述
├─ tagsnull非必须标签
├─ authornull非必须预留字段
├─ current_historynull非必须当前历史记录id
├─ screenshotstring非必须截图
├─ pathstring非必须区块路径
├─ occupiernull非必须当前锁定人id
+ + +## 创建区块 + + + +### 基本信息 + +**Path:** /material-center/api/block/create + +**Method:** POST + +**接口描述:** + +

区块封面图为当前区块展示在画布中的外观,为 base64图片, 需要服务端解析上传到obs

+ + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
pathstring非必须区块路径
name_cnstring非必须区块名称
labelstring非必须区块标签名(区块编码)
categoriesnumber []非必须区块所属分类

item 类型: number

├─ 非必须分类id
publicnumber非必须是否公开, 私有: 0, 公开: 1, 半公开: 2

枚举: 0,1,2

frameworkstring非必须技术栈

枚举: Vue,Angular

contentobject非必须区块内容
├─ stateobject非必须
├─ methodsobject非必须
├─ componentNamestring非必须
├─ fileNamestring非必须
├─ cssstring非必须
├─ propsobject非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ textstring非必须
├─ idstring必须
├─ schemaobject非必须
├─ propertiesobject []非必须

item 类型: object

├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ collapseobject非必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentstring []非必须

item 类型: string

├─ 非必须
├─ eventsobject非必须
├─ slotsobject非必须
├─ dataSourceobject非必须
occupierobject非必须正在编辑区块的用户信息
├─ idnumber非必须
├─ usernamestring非必须
├─ emailstring非必须
├─ providernull非必须
├─ passwordnull非必须
├─ resetPasswordTokenstring非必须
├─ confirmationTokenstring非必须
├─ confirmedboolean非必须
├─ blockednull非必须
├─ rolenull非必须
├─ created_bynull非必须
├─ updated_bynull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ blocknull非必须
├─ is_adminboolean非必须
├─ is_publicnull非必须
├─ tenantobject非必须
├─ idstring非必须
├─ authsobject []非必须

item 类型: object

├─ idnumber必须
├─ unitobject必须
├─ typestring非必须
├─ idnumber非必须
├─ namestring非必须
├─ auth_typenumber必须
├─ expired_timenull必须
├─ roleobject必须
├─ namestring非必须
├─ idnumber非必须
├─ descriptionstring非必须
├─ tenantsobject []非必须

item 类型: object

├─ idnumber必须
├─ tenant_idstring必须
├─ name_cnstring,null必须
├─ name_enstring,null必须
├─ descriptionstring,null必须
├─ created_bynull必须
├─ updated_bynull,number必须
├─ created_atstring必须
├─ updated_atstring必须
├─ createdBynull,number必须
├─ updatedBynumber,null必须
├─ w3object非必须
├─ cnstring非必须
├─ displayNamestring非必须
├─ emailstring非必须
├─ employeeNumberstring非必须
├─ employeeTypestring非必须
├─ givenNamestring非必须
├─ snstring非必须
├─ telephoneNumberstring非必须
├─ uidstring非必须
├─ uuidstring非必须
screenshotstring非必须区块封面图
created_appnumber非必须从哪个应用被创建的应用id
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须区块id
├─ labelstring非必须区块编码
├─ frameworkstring非必须区块技术栈
├─ contentobject非必须区块内容
├─ stateobject非必须
├─ methodsobject非必须声明方法
├─ componentNamestring非必须组件名称
├─ fileNamestring非必须文件名称
├─ cssstring非必须全局css样式
├─ propsobject非必须属性
├─ childrenobject []非必须子组件列表或字符串

item 类型: object

├─ componentNamestring必须组件名称
├─ propsobject必须属性
├─ textstring非必须
├─ idstring必须
├─ schemaobject非必须数据结构
├─ propertiesobject []非必须属性

item 类型: object

├─ labelobject非必须标签
├─ zh_CNstring非必须
├─ descriptionobject非必须描述
├─ zh_CNstring非必须
├─ collapseobject非必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentstring []非必须内容

item 类型: string

├─ 非必须
├─ eventsobject非必须事件
├─ slotsobject非必须 定义插槽时使用,如: 默认页头
├─ dataSourceobject非必须数据源
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ assetsnull非必须区块发布后的资源信息
├─ createdByobject非必须区块创建者
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ resetPasswordTokenstring非必须w3账户
├─ blockednull非必须是否被拉黑
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocknull非必须预留字段
├─ is_adminboolean非必须是否是超级管理员
├─ is_publicnull非必须是否是公共账号
├─ last_build_infonull非必须区块最后一次发布信息
├─ descriptionnull非必须区块描述
├─ tagsnull非必须区块标签
├─ current_historynull非必须区块最后一次发布的数据信息
├─ screenshotstring非必须区块封面图
├─ pathstring非必须区块路径
├─ occupierobject非必须正在编辑区块的用户
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ resetPasswordTokenstring非必须w3账号
├─ blockednull非必须是否被拉黑
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocknull非必须预留字段
├─ is_adminboolean非必须是否是超级管理员
├─ is_publicnull非必须是否是公共账号
├─ isOfficialboolean非必须是否为官方区块
├─ publicnumber非必须是否公开, 私有: 0, 公开: 1, 半公开: 2
├─ isDefaultboolean非必须是否为默认区块
├─ tiny_reservedboolean非必须是否为tiny团队内置区块
├─ authornull非必须区块作者 - 预留字段
├─ name_cnstring非必须区块名称
├─ npm_namenull非必须区块发布的二方包名称
├─ created_appnull非必须区块被哪个应用创建 - 预留字段
├─ historiesstring []非必须区块发布版本记录列表

item 类型: string

├─ 非必须
├─ groupsstring []非必须区块从属分组列表

item 类型: string

├─ 非必须
├─ categoriesobject []非必须区块从属分类列表

item 类型: object

├─ idnumber非必须
├─ namestring非必须分类名称
├─ appnumber非必须关联app
├─ descnull非必须分类描述
├─ createdBynumber非必须创建人
├─ updatedBynumber非必须更新人
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ categoryIdstring非必须
├─ category_idstring非必须区块分类唯一id,业务用
├─ i18n_langsstring []非必须区块关联的国际化语言

item 类型: string

├─ 非必须
├─ public_scope_tenantsstring []非必须半公开区块 开放给的租户

item 类型: string

├─ 非必须
localestring非必须
+ + +## 更新区块 + + + +### 基本信息 + +**Path:** /material-center/api/block/update/:id + +**Method:** POST + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| id | 12 | 区块id | + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| -------- | -------- | --------- | ---- | +| appId | 是 | 当前appId | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
appIdstring非必须在哪个应用创建 应用id
contentobject非必须区块内容
├─ stateobject非必须
├─ methodsobject非必须
├─ componentNamestring非必须
├─ fileNamestring非必须
├─ cssstring非必须
├─ propsobject非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ textstring非必须
├─ idstring必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring非必须
├─ propsobject非必须
├─ placeholderstring非必须
├─ modelValuestring非必须
├─ idstring非必须
├─ schemaobject非必须
├─ propertiesobject []非必须

item 类型: object

├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ collapseobject非必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentstring []非必须

item 类型: string

├─ 非必须
├─ eventsobject非必须
├─ slotsobject非必须
├─ dataSourceobject非必须
screenshotstring非必须区块封面图
pathstring非必须区块路径
labelstring非必须区块标签值
public_scope_tenantsinteger []非必须半公开时公开给哪些租户

item 类型: integer

├─ 非必须租户id
publicnumber非必须是否公开, 私有: 0, 公开: 1, 半公开: 2

枚举: 0,1,2

tagsstring []非必须区块标签

item 类型: string

├─ 非必须
categoriesinteger []非必须区块从属区块分类

item 类型: integer

├─ 非必须区块分类id
descriptionnull非必须区块描述
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须区块详情数据
├─ idnumber非必须区块id
├─ labelstring非必须区块编码
├─ frameworkstring非必须前端框架
├─ contentobject非必须区块内容
├─ stateobject非必须
├─ methodsobject非必须声明的方法
├─ componentNamestring非必须组件名称
├─ fileNamestring非必须文件名
├─ cssstring非必须全局css样式
├─ propsobject非必须组件的属性
├─ childrenobject []非必须假如为容器组件时,可以有子组件,该字段描述子组件的信息

item 类型: object

├─ componentNamestring必须组件名称
├─ propsobject必须属性
├─ textstring非必须
├─ idstring必须
├─ childrenobject []非必须假如为容器组件时,可以有子组件,该字段描述子组件的信息

item 类型: object

├─ componentNamestring非必须组件名称
├─ propsobject非必须属性
├─ placeholderstring非必须
├─ modelValuestring非必须
├─ idstring非必须
├─ schemaobject非必须数据结构
├─ propertiesobject []非必须属性

item 类型: object

├─ labelobject非必须标签
├─ zh_CNstring非必须
├─ descriptionobject非必须描述
├─ zh_CNstring非必须
├─ collapseobject非必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentstring []非必须内容

item 类型: string

├─ 非必须
├─ eventsobject非必须事件
├─ slotsobject非必须定义插槽时使用,如: 默认页头
├─ dataSourceobject非必须数据源
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ assetsobject非必须构建资源
├─ materialstring []非必须物料

item 类型: string

├─ 非必须
├─ scriptsstring []非必须脚本

item 类型: string

├─ 非必须
├─ stylesstring []非必须样式

item 类型: string

├─ 非必须
├─ createdByobject非必须创建人
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ resetPasswordTokenstring非必须w3账号信息
├─ blockednull非必须是否被拉黑
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocknull非必须预留字段
├─ is_adminboolean非必须是否是超级管理员
├─ is_publicnull非必须是否是公共账号
├─ last_build_infoobject非必须最新一次构建信息
├─ resultboolean非必须
├─ endTimestring非必须
├─ descriptionnull非必须描述
├─ tagsstring []非必须标签

item 类型: string

├─ 非必须
├─ current_historyobject非必须当前历史记录id
├─ idnumber非必须
├─ messagestring非必须
├─ contentobject非必须
├─ stateobject非必须
├─ methodsobject非必须
├─ componentNamestring非必须
├─ fileNamestring非必须
├─ cssstring非必须
├─ propsobject非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ textstring非必须
├─ idstring必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring非必须
├─ propsobject非必须
├─ placeholderstring非必须
├─ modelValuestring非必须
├─ idstring非必须
├─ schemaobject非必须
├─ propertiesobject []非必须

item 类型: object

├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ collapseobject非必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentstring []非必须

item 类型: string

├─ 非必须
├─ eventsobject非必须
├─ slotsobject非必须
├─ dataSourceobject非必须
├─ assetsobject非必须
├─ materialstring []非必须

item 类型: string

├─ 非必须
├─ scriptsstring []非必须

item 类型: string

├─ 非必须
├─ stylesstring []非必须

item 类型: string

├─ 非必须
├─ build_infoobject非必须
├─ resultboolean非必须
├─ versionsstring []非必须

item 类型: string

├─ 非必须
├─ endTimestring非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ screenshotstring非必须
├─ pathstring非必须
├─ labelstring非必须
├─ descriptionnull非必须
├─ modenull非必须
├─ block_idnumber非必须
├─ versionstring非必须
├─ npm_namestring非必须
├─ i18nnull非必须
├─ created_appnull非必须
├─ screenshotstring非必须截图
├─ pathstring非必须区块路径
├─ occupierobject非必须当前锁定人id
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ resetPasswordTokenstring非必须w3账号
├─ blockednull非必须是否被拉黑
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocknull非必须
├─ is_adminboolean非必须是否是超级管理员
├─ is_publicnull非必须是否是公共账号
├─ isOfficialboolean非必须是否是官方
├─ publicnumber非必须公开状态:0,1,2
├─ isDefaultboolean非必须是否是默认
├─ tiny_reservedboolean非必须是否是tiny专有
├─ authornull非必须预留字段
├─ name_cnnull非必须区块名称
├─ npm_namestring非必须npm包名
├─ created_appnull非必须创建区块时所在appId
├─ historiesobject []非必须

item 类型: object

├─ idnumber必须
├─ messagestring必须
├─ contentobject必须
├─ stateobject非必须
├─ methodsobject非必须
├─ componentNamestring非必须
├─ fileNamestring非必须
├─ cssstring非必须
├─ propsobject非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ placeholderstring非必须
├─ modelValuestring非必须
├─ typestring非必须
├─ maxlengthstring非必须
├─ textstring非必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ textstring非必须
├─ placeholderstring非必须
├─ modelValuestring非必须
├─ idstring必须
├─ schemaobject非必须
├─ propertiesobject []非必须

item 类型: object

├─ labelobject必须
├─ zh_CNstring非必须
├─ descriptionobject必须
├─ zh_CNstring非必须
├─ collapseobject必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentstring []必须

item 类型: string

├─ 非必须
├─ eventsobject非必须
├─ slotsobject非必须
├─ dataSourceobject非必须
├─ assetsobject必须
├─ materialstring []非必须

item 类型: string

├─ 非必须
├─ scriptsstring []非必须

item 类型: string

├─ 非必须
├─ stylesstring []非必须

item 类型: string

├─ 非必须
├─ build_infoobject必须
├─ resultboolean非必须
├─ versionsstring []非必须

item 类型: string

├─ 非必须
├─ endTimestring非必须
├─ created_atstring必须
├─ updated_atstring必须
├─ screenshotstring必须
├─ pathstring必须
├─ labelnull,string必须
├─ descriptionnull必须
├─ modenull必须
├─ block_idnumber必须
├─ versionnull,string必须
├─ npm_namenull,string必须
├─ i18nnull必须
├─ created_appnull必须
├─ groupsobject []非必须区块关联分组

item 类型: object

├─ idnumber必须
├─ namestring必须
├─ appnumber必须
├─ descnull必须
├─ created_atstring必须
├─ updated_atstring必须
├─ categoriesobject []非必须区块从属区块分类

item 类型: object

├─ idnumber非必须
├─ namestring非必须分类名称
├─ appnumber非必须关联appid
├─ descnull非必须描述
├─ createdBynumber非必须创建人
├─ updatedBynumber非必须更新人
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ categoryIdstring非必须
├─ category_idstring非必须区块分类唯一id
├─ i18n_langsstring []非必须国际化

item 类型: string

├─ 非必须
├─ public_scope_tenantsstring []非必须半公开时公开给哪些租户

item 类型: string

├─ 非必须
localestring非必须
+ +## 区块查询 + + + +### 基本信息 + +**Path:** /api/block + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| -------- | -------- | ---- | -------------- | +| platform | 否 | 1 | 平台id | +| label | 否 | | | +| id | 否 | | | +| groups | 否 | | 组块关联的分组 | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ idnumber非必须区块id
├─ labelstring非必须区块编码
├─ frameworkstring非必须前端技术栈
├─ contentobject非必须区块内容
├─ stateobject非必须状态
├─ methodsobject非必须声明方法
├─ componentNamestring非必须组件名称
├─ fileNamestring非必须文件名称
├─ cssstring非必须css样式
├─ propsobject非必须属性
├─ childrenobject []非必须子组件列表或字符串

item 类型: object

├─ componentNamestring非必须组件名称
├─ propsobject非必须属性
├─ idstring非必须
├─ childrenobject []非必须子组件列表或字符串

item 类型: object

├─ componentNamestring非必须
├─ propsobject非必须
├─ namestring非必须
├─ paramsobject []非必须

item 类型: object

├─ namestring必须
├─ valueobject,number必须
├─ idstring非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring非必须
├─ propsobject非必须
├─ textstring非必须
├─ idstring非必须
├─ schemaobject非必须数据结构
├─ propertiesobject []非必须属性

item 类型: object

├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ collapseobject非必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentstring []非必须

item 类型: string

├─ 非必须
├─ eventsobject非必须事件
├─ slotsobject非必须插槽
├─ contentobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ paramsstring []非必须

item 类型: string

├─ 非必须
├─ dataSourceobject非必须数据源
├─ created_bynull非必须
├─ updated_bynull非必须
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ assetsobject非必须构建资源
├─ materialstring []非必须物料

item 类型: string

├─ 非必须
├─ scriptsstring []非必须脚本

item 类型: string

├─ 非必须
├─ stylesstring []非必须样式

item 类型: string

├─ 非必须
├─ createdByobject非必须创建人信息
├─ idnumber非必须用户id
├─ usernamestring非必须用户信息
├─ resetPasswordTokenstring非必须用户唯一key
├─ updatedBynumber非必须更新人信息
├─ last_build_infoobject非必须最新一次构建信息
├─ resultboolean非必须结果
├─ versionsstring []非必须版本

item 类型: string

├─ 非必须
├─ endTimestring非必须时间
├─ descriptionnull非必须描述
├─ tagsstring []非必须标签

item 类型: string

├─ 非必须
├─ current_historynumber非必须当前历史记录id
├─ screenshotstring非必须截图
├─ pathstring非必须路径
├─ occupierobject非必须区块锁定人信息
├─ idnumber非必须
├─ usernamestring非必须
├─ resetPasswordTokenstring非必须
├─ isOfficialboolean非必须是否是官方
├─ publicnumber非必须公开状态:0,1,2
├─ isDefaultboolean非必须是否是默认
├─ tiny_reservedboolean非必须是否是tiny专有
├─ authornull非必须预留字段
├─ name_cnstring非必须区块名称
├─ npm_namestring非必须npm包名
├─ created_appnumber非必须创建区块的应用id
├─ content_blocksnull非必须预留字段
├─ historiesobject []非必须区块历史记录

item 类型: object

├─ idnumber非必须
├─ messagestring非必须
├─ contentobject非必须
├─ stateobject非必须
├─ methodsobject非必须
├─ componentNamestring非必须
├─ fileNamestring非必须
├─ cssstring非必须
├─ propsobject非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring非必须
├─ propsobject非必须
├─ idstring非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring非必须
├─ propsobject非必须
├─ namestring非必须
├─ paramsobject []非必须

item 类型: object

├─ namestring必须
├─ valueobject,number必须
├─ idstring非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring非必须
├─ propsobject非必须
├─ textstring非必须
├─ idstring非必须
├─ schemaobject非必须
├─ propertiesobject []非必须

item 类型: object

├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ collapseobject非必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentstring []非必须

item 类型: string

├─ 非必须
├─ eventsobject非必须
├─ slotsobject非必须
├─ contentobject非必须
├─ labelobject非必须
├─ zh_CNstring非必须
├─ paramsstring []非必须

item 类型: string

├─ 非必须
├─ dataSourceobject非必须
├─ assetsobject非必须
├─ materialstring []非必须

item 类型: string

├─ 非必须
├─ scriptsstring []非必须

item 类型: string

├─ 非必须
├─ stylesstring []非必须

item 类型: string

├─ 非必须
├─ build_infoobject非必须
├─ resultboolean非必须
├─ versionsstring []非必须

item 类型: string

├─ 非必须
├─ endTimestring非必须
├─ created_bynull非必须
├─ updated_bynull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ screenshotstring非必须
├─ pathstring非必须
├─ labelstring非必须
├─ descriptionnull非必须
├─ modenull非必须
├─ block_idnumber非必须
├─ versionstring非必须
├─ npm_namestring非必须
├─ i18nobject非必须
├─ zh_CNobject非必须
├─ lowcode.9316fcffstring非必须
├─ en_USobject非必须
├─ lowcode.9316fcffstring非必须
├─ created_appnumber非必须
├─ content_blocksnull非必须
├─ categoriesobject []非必须分类

item 类型: object

├─ idnumber非必须
├─ namestring非必须
├─ appnumber非必须
├─ descnull非必须
├─ createdBynumber非必须
├─ updatedBynumber非必须
├─ created_bynull非必须
├─ updated_bynull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ category_idstring非必须
├─ public_scope_tenantsstring []非必须

item 类型: string

├─ 非必须
├─ histories_lengthnumber非必须历史记录数量
localestring非必须
+ + +## 区块综合筛选列表 + + + +### 基本信息 + +**Path:** /material-center/api/block/list + +**Method:** GET + +**接口描述:** + +

query参数:
+除了 appId、public_scope_mode 为特殊的query参数外,其余参数和strapi 的查询参数、表数据字段一致, appId、public_scope_mode 不能用strapi的方式加筛选条件
+筛选参数有哪些看文档   https://blog.csdn.net/weixin_40326107/article/details/105817870

+ + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| ----------------- | -------- | ---- | ------------------------------------------------------------ | +| appId | 否 | 918 | 应用id 用于筛选某个应用下的区块 | +| public_scope_mode | 否 | 1 | 不传将只显示公开的区块,传入1, 可根据public进行公开性筛选,默认展示全部私有/公开区块 | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ idnumber非必须区块id
├─ labelstring非必须区块编码
├─ frameworkstring非必须前端框架
├─ contentobject非必须区块内容
├─ blockNamestring非必须区块名称
├─ idstring非必须
├─ propsobject非必须属性
├─ __style__string非必须
├─ lifeCyclesobject非必须生命周期
├─ ngOnChangesobject非必须
├─ typestring非必须
├─ compiledstring非必须
├─ sourcestring非必须
├─ cssstring非必须全局css样式
├─ i18nobject非必须国际化
├─ zh_CNobject非必须
├─ i18n-kv6bz5m1string非必须
├─ i18n-kv6bz5m2string非必须
├─ i18n-kv6bz5m3string非必须
├─ en_USobject非必须
├─ i18n-kv6bz5m1string非必须
├─ i18n-kv6bz5m2string非必须
├─ i18n-kv6bz5m3string非必须
├─ methodsobject非必须声明的方法
├─ __initMethods__object非必须
├─ typestring非必须
├─ sourcestring非必须
├─ compiledstring非必须
├─ childrenobject []非必须子组件列表或字符串

item 类型: object

├─ componentNamestring非必须
├─ idstring非必须
├─ propsobject非必须
├─ __style__string非必须
├─ classNamestring非必须
├─ childrenobject []非必须

item 类型: object

├─ idstring非必须
├─ componentNamestring非必须
├─ propsobject非必须
├─ typestring非必须
├─ __style__string非必须
├─ classNamestring非必须
├─ ngClassobject非必须
├─ typestring非必须
├─ variablestring非必须
├─ clickobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ eventsobject []非必须

item 类型: object

├─ namestring非必须
├─ idstring非必须
├─ paramsobject非必须
├─ typestring非必须
├─ argsstring []非必须

item 类型: string

├─ 非必须
├─ valuestring非必须
├─ loopobject非必须
├─ typestring非必须
├─ variablestring非必须
├─ loopArgsstring []非必须

item 类型: string

├─ 非必须
├─ schemaobject非必须数据结构
├─ typestring非必须
├─ propertiesobject非必须
├─ FilterButtonsizk3object非必须
├─ typestring非必须
├─ propertiesobject非必须
├─ dataSourceobject非必须
├─ titlestring非必须
├─ typestring非必须
├─ searchKeyobject非必须
├─ titlestring非必须
├─ typestring非必须
├─ defaultstring非必须
├─ onSelectobject非必须
├─ titlestring非必须
├─ typestring非必须
├─ defaultstring非必须
├─ dataSourceobject非必须数据源
├─ listobject []非必须

item 类型: object

├─ namestring必须
├─ protocalstring必须
├─ initialDataobject必须
├─ variablearray,string非必须
├─ typestring非必须
├─ valuestring非必须
├─ actionsobject非必须
├─ moduleobject非必须
├─ compiledstring非必须
├─ sourcestring非必须
├─ typestring非必须
├─ listobject []非必须

item 类型: object

├─ idstring非必须
├─ titlestring非必须
├─ published_atstring非必须
├─ created_atstring非必须创建时间
├─ updated_atstring非必须修改时间
├─ platformnull非必须区块关联设计器id
├─ assetsnull非必须区块构建资源
├─ last_build_infonull非必须最新一次构建信息
├─ tenantnull非必须区块所属组织
├─ block_historynull非必须区块历史
├─ descriptionnull非必须描述
├─ tagsnull非必须标签
├─ block_historiesstring []非必须

item 类型: string

├─ 非必须
├─ block_groupsstring []非必须区块关联分组

item 类型: string

├─ 非必须
+ + +## + + + +### 基本信息 + +**Path:** /material-center/api/block/deploy + +**Method:** POST + +**接口描述:** + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
blockobject非必须区块数据
├─ idnumber非必须
├─ labelstring非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ last_build_infoobject非必须
├─ resultboolean非必须
├─ versionsstring []非必须

item 类型: string

├─ 非必须
├─ endTimestring非必须
├─ screenshotstring非必须
├─ occupiernull非必须
├─ authornull非必须
├─ name_cnstring非必须
├─ is_publishedboolean非必须
├─ frameworkstring非必须
├─ contentobject非必须
├─ stateobject非必须
├─ methodsobject非必须
├─ componentNamestring非必须
├─ fileNamestring非必须
├─ cssstring非必须
├─ propsobject非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ textstring非必须
├─ idstring必须
├─ schemaobject非必须
├─ propertiesobject []非必须

item 类型: object

├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ collapseobject非必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentstring []非必须

item 类型: string

├─ 非必须
├─ eventsobject非必须
├─ slotsobject非必须
├─ dataSourceobject非必须
├─ assetsobject非必须
├─ materialstring []非必须

item 类型: string

├─ 非必须
├─ scriptsstring []非必须

item 类型: string

├─ 非必须
├─ stylesstring []非必须

item 类型: string

├─ 非必须
├─ createdByobject非必须
├─ idnumber非必须
├─ usernamestring非必须
├─ emailstring非必须
├─ resetPasswordTokenstring非必须
├─ blockednull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ blocknull非必须
├─ is_adminboolean非必须
├─ is_publicnull非必须
├─ descriptionnull非必须
├─ tagsstring []非必须

item 类型: string

├─ 非必须
├─ current_historyobject非必须
├─ idnumber非必须
├─ messagestring非必须
├─ contentobject非必须
├─ stateobject非必须
├─ methodsobject非必须
├─ componentNamestring非必须
├─ fileNamestring非必须
├─ cssstring非必须
├─ propsobject非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ textstring非必须
├─ idstring必须
├─ schemaobject非必须
├─ propertiesobject []非必须

item 类型: object

├─ labelobject非必须
├─ zh_CNstring非必须
├─ descriptionobject非必须
├─ zh_CNstring非必须
├─ collapseobject非必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentstring []非必须

item 类型: string

├─ 非必须
├─ eventsobject非必须
├─ slotsobject非必须
├─ dataSourceobject非必须
├─ assetsobject非必须
├─ materialstring []非必须

item 类型: string

├─ 非必须
├─ scriptsstring []非必须

item 类型: string

├─ 非必须
├─ stylesstring []非必须

item 类型: string

├─ 非必须
├─ build_infoobject非必须
├─ resultboolean非必须
├─ versionsstring []非必须

item 类型: string

├─ 非必须
├─ endTimestring非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ screenshotstring非必须
├─ pathstring非必须
├─ labelstring非必须
├─ descriptionnull非必须
├─ modenull非必须
├─ block_idnumber非必须
├─ versionstring非必须
├─ npm_namestring非必须
├─ i18nobject非必须
├─ created_appnull非必须
├─ pathstring非必须
├─ isOfficialboolean非必须
├─ publicnumber非必须
├─ isDefaultboolean非必须
├─ tiny_reservedboolean非必须
├─ npm_namestring非必须
├─ created_appnull非必须
├─ historiesobject []非必须

item 类型: object

├─ idnumber必须
├─ messagestring必须
├─ contentobject必须
├─ stateobject非必须
├─ methodsobject非必须
├─ componentNamestring非必须
├─ fileNamestring非必须
├─ cssstring非必须
├─ propsobject非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ idstring必须
├─ childrenobject []必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ textstring非必须
├─ idstring必须
├─ schemaobject非必须
├─ propertiesobject []非必须

item 类型: object

├─ labelobject必须
├─ zh_CNstring非必须
├─ descriptionobject必须
├─ zh_CNstring非必须
├─ collapseobject必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentstring []必须

item 类型: string

├─ 非必须
├─ eventsobject非必须
├─ slotsobject非必须
├─ dataSourceobject非必须
├─ assetsobject必须
├─ materialstring []非必须

item 类型: string

├─ 非必须
├─ scriptsstring []非必须

item 类型: string

├─ 非必须
├─ stylesstring []非必须

item 类型: string

├─ 非必须
├─ build_infoobject必须
├─ resultboolean非必须
├─ versionsstring []非必须

item 类型: string

├─ 非必须
├─ endTimestring非必须
├─ created_atstring必须
├─ updated_atstring必须
├─ screenshotstring必须
├─ pathstring必须
├─ labelstring必须
├─ descriptionnull必须
├─ modenull必须
├─ block_idnumber必须
├─ versionstring必须
├─ npm_namestring必须
├─ i18nobject必须
├─ created_appnull必须
├─ groupsstring []非必须

item 类型: string

├─ 非必须
├─ categoriesstring []非必须

item 类型: string

├─ 非必须
├─ i18n_langsstring []非必须

item 类型: string

├─ 非必须
├─ public_scope_tenantsnumber []非必须

item 类型: number

├─ 非必须
├─ isAnimationboolean非必须
├─ isShowProgressboolean非必须
├─ publishProgressnumber非必须
├─ deployStatusnumber非必须
is_compileboolean非必须是否为线上发布 网页版总是true
deploy_infostring非必须发布信息
versionstring非必须发布版本号 x.y.z
needToSaveboolean必须发布成功后是否保存区块数据
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须构建任务通用数据
├─ idnumber非必须
├─ teamIdnumber非必须团队id
├─ taskTypeIdnumber非必须任务类型
├─ uniqueIdnumber非必须构建资源id
├─ taskNamenull非必须构建任务名称
├─ taskStatusnumber非必须任务状态:0 init ,1 running , 2 stopped ,3 finished
├─ taskResultnull非必须当前执行进度结果信息
├─ progressnull非必须当前进行的子任务名
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ rationull非必须预留字段
├─ progress_percentnumber非必须构建进度百分比数
├─ indicatornull非必须构建指标
localestring非必须
+ + +## 删除区块 + + + +### 基本信息 + +**Path:** /material-center/api/block/delete/:id + +**Method:** GET + +**接口描述:** + +

区块只有自己创建的才能删除

+ + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| id | 12 | 区块id | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须区块id
├─ labelstring非必须区块代码
├─ frameworkstring非必须前端框架
├─ contentobject非必须区块内容
├─ stateobject非必须
├─ methodsobject非必须声明的方法
├─ componentNamestring非必须组件名称
├─ fileNamestring非必须文件名
├─ cssstring非必须全局css样式
├─ propsobject非必须属性
├─ childrenobject []非必须子组件列表或字符串

item 类型: object

├─ componentNamestring必须组件名称
├─ propsobject必须属性
├─ textstring非必须
├─ idstring必须
├─ schemaobject非必须数据结构
├─ propertiesobject []非必须属性

item 类型: object

├─ labelobject非必须标签
├─ zh_CNstring非必须
├─ descriptionobject非必须描述
├─ zh_CNstring非必须
├─ collapseobject非必须
├─ numbernumber非必须
├─ textobject非必须
├─ zh_CNstring非必须
├─ contentstring []非必须内容

item 类型: string

├─ 非必须
├─ eventsobject非必须事件
├─ slotsobject非必须插槽
├─ dataSourceobject非必须数据源
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ assetsnull非必须构建资源
├─ createdByobject非必须创建人
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ resetPasswordTokenstring非必须w3账号
├─ blockednull非必须是否被拉黑
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocknull非必须
├─ is_adminboolean非必须是否是超级管理员
├─ is_publicnull非必须是否是公共账号
├─ last_build_infonull非必须最新一次构建信息
├─ descriptionnull非必须描述
├─ tagsnull非必须标签
├─ current_historynull非必须当前历史记录id
├─ screenshotstring非必须截图
├─ pathstring非必须区块路径
├─ occupierobject非必须当前锁定人id
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ resetPasswordTokenstring非必须w3账号
├─ blockednull非必须是否被拉黑
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocknull非必须
├─ is_adminboolean非必须是否是超级管理员
├─ is_publicnull非必须是否是公共账号
├─ isOfficialboolean非必须是否是官方
├─ publicnumber非必须公开状态:0,1,2
├─ isDefaultboolean非必须是否是默认
├─ tiny_reservedboolean非必须是否是tiny专有
├─ authornull非必须预留字段
├─ name_cnstring非必须区块名称
├─ npm_namenull非必须npm包名
├─ created_appnull非必须创建区块所在app
├─ historiesstring []非必须

item 类型: string

├─ 非必须
├─ groupsstring []非必须区块关联分组

item 类型: string

├─ 非必须
├─ categoriesobject []非必须区块关联分区

item 类型: object

├─ idnumber非必须
├─ namestring非必须区块名称
├─ appnumber非必须关联app
├─ descnull非必须描述
├─ createdBynumber非必须创建人
├─ updatedBynumber非必须更新人
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ categoryIdstring非必须区块分区id
├─ category_idstring非必须区块分区唯一id
├─ i18n_langsstring []非必须国际化

item 类型: string

├─ 非必须
├─ public_scope_tenantsstring []非必须

item 类型: string

├─ 非必须
localestring非必须
+ diff --git a/docs/api/backend-api/page-management-api.md b/docs/api/backend-api/page-management-api.md new file mode 100644 index 0000000000..3104f3c237 --- /dev/null +++ b/docs/api/backend-api/page-management-api.md @@ -0,0 +1,540 @@ +# 页面管理 + +## 【v1】更新页面 + + + +### 基本信息 + +**Path:** /v1/api/update/:id + +**Method:** POST + +**接口描述:** + +

相较基本版本,增加 content_blocks 字段及其输入校验

+ + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| id | 123 | 页面id | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
namestring非必须页面名称

mock: @string

routestring非必须页面路由

mock: @string

page_contentobject非必须
isBodyboolean非必须是否以body标签为页面根dom
parentIdinteger非必须父级文件夹id

mock: @id

content_blocksobject []非必须页面内容所使用的子区块

item 类型: object

├─ blocknumber非必须区块id
├─ versionstring非必须区块版本
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须
├─ namestring非必须
├─ appstring非必须
├─ routestring非必须
├─ page_contentobject非必须
├─ componentNamestring非必须
├─ cssstring非必须
├─ propsobject非必须
├─ lifeCyclesobject非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring非必须
├─ propsobject非必须
├─ componentTypestring非必须
├─ idstring非必须
├─ dataSourceobject非必须
├─ liststring []非必须

item 类型: string

├─ 非必须
├─ stateobject非必须
├─ methodsobject非必须
├─ utilsstring []非必须

item 类型: string

├─ 非必须
├─ bridgestring []非必须

item 类型: string

├─ 非必须
├─ inputsstring []非必须

item 类型: string

├─ 非必须
├─ outputsstring []非必须

item 类型: string

├─ 非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ createdBynull非必须
├─ tenantnumber非必须
├─ isBodyboolean非必须
├─ parentIdstring非必须
├─ groupstring非必须
├─ depthnumber非必须
├─ isPageboolean非必须
├─ occupierobject非必须
├─ idnumber非必须
├─ usernamestring非必须
├─ emailstring非必须
├─ resetPasswordTokenstring非必须
├─ blockednull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ blocknull非必须
├─ is_adminboolean非必须
├─ is_publicnull非必须
├─ isDefaultboolean非必须
├─ content_blocksobject []非必须

item 类型: object

├─ blocknumber非必须
├─ versionstring非必须
├─ isHomeboolean非必须
localestring非必须
+ + +## 【v1】页面/区块content出码 + + + +### 基本信息 + +**Path:** /v1/api/schema2code + +**Method:** POST + +**接口描述:** + +

接口未授权,使用前联系服务端加权限
+相较基础版本,对子区块进行精细化筛选,避免dsl传入全量子区块生成冗余信息

+ + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
platforminteger非必须设计器id 选填

mock: @id

appinteger必须页面所属应用id

mock: @id

pageInfoobject必须
├─ schemaobject必须页面 page_content
├─ stateobject非必须
├─ longNameobject非必须
├─ defaultValuestring非必须
├─ accessorobject非必须
├─ setterobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ firstNamestring非必须
├─ lastNamestring非必须
├─ methodsobject非必须
├─ componentNamestring非必须
├─ cssstring非必须
├─ propsobject非必须
├─ lifeCyclesobject非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring必须
├─ propsobject必须
├─ textobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ componentTypestring必须
├─ idstring必须
├─ dataSourceobject非必须
├─ liststring []非必须

item 类型: string

├─ 非必须
├─ bridgeobject非必须
├─ importsstring []非必须

item 类型: string

├─ 非必须
├─ inputsstring []非必须

item 类型: string

├─ 非必须
├─ outputsstring []非必须

item 类型: string

├─ 非必须
├─ namestring必须页面名称

mock: @string

├─ idnumber必须页面id

mock: @id

+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ panelNamestring必须文件名
├─ panelValuestring必须文件内容
├─ panelTypestring必须文件类型
├─ prettierOptsobject必须代码格式设置
├─ printWidthnumber非必须指定每行代码的最大列数
├─ semiboolean非必须控制是否在语句末尾添加分号
├─ singleQuoteboolean非必须控制是否使用单引号代替双引号作为字符串的引号样式
├─ trailingCommastring非必须控制对象和数组字面量中最后一个属性或元素后面是否添加尾随逗号
├─ parserstring非必须指定要使用的解析器
├─ htmlWhitespaceSensitivitystring非必须用于控制 HTML 文件中空白字符的敏感度
├─ typestring必须类型
├─ indexboolean必须索引
├─ filePathstring必须文件路径
├─ errorsstring []必须报错

item 类型: string

├─ 非必须
localestring非必须
+ + +## 【v1】页面/区块通过id查询出码 + + + +### 基本信息 + +**Path:** /v1/api/code + +**Method:** GET + +**接口描述:** + +

接口未启用,联系后端为各角色加权限
+相较基础版本,对子区块进行精细化筛选,避免dsl传入全量子区块,生成冗余信息

+ + + +### 请求参数 + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| -------- | -------- | ---- | --------------------------------- | +| type | 是 | Page | 查询类型 Page 或 Block | +| id | 是 | 213 | 页面或区块id | +| app | 是 | 1232 | 页面所属应用、创建此区块的应用 id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ panelNamestring必须文件名称
├─ panelValuestring必须文件内容
├─ panelTypestring必须文件类型
├─ prettierOptsobject必须代码格式设置
├─ printWidthnumber非必须指定每行代码的最大列数
├─ semiboolean非必须控制是否在语句末尾添加分号
├─ singleQuoteboolean非必须控制是否使用单引号代替双引号作为字符串的引号样式
├─ trailingCommastring非必须控制对象和数组字面量中最后一个属性或元素后面是否添加尾随逗号
├─ parserstring非必须指定要使用的解析器
├─ htmlWhitespaceSensitivitystring非必须用于控制 HTML 文件中空白字符的敏感度
├─ typestring必须类型
├─ indexboolean必须索引
├─ filePathstring必须文件路径
├─ errorsstring []必须报错

item 类型: string

├─ 非必须
localestring非必须
+ + +## 创建页面 + + + +### 基本信息 + +**Path:** /app-center/api/pages/create + +**Method:** POST + +**接口描述:** + +

app id 和 页面路由  组合构成唯一key, 不能重复添加

+

2022-2-23 修改点:(部分值数据库存储数据和返回有区别,需要转义字段名 和 值)
+1. 创建参数添加 isBody isHome parentId group
+2. 返回数据添加 isBody isHome parentId group

+ + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
namestring必须页面名称
appinteger必须所属应用id
routestring必须页面路由
page_contentobject非必须页面的schema.json
page_descstring非必须页面的描述信息
isHomeboolean必须是否为当前应用的主页
isBodyboolean必须body是否为根元素
parentIdnumber非必须父级目录id, 不传 或者传0 为根目录
groupstring必须public | static 表示公共分组或静态页面分组
isPageboolean必须是页面还是文件夹

mock: true

isDefaultboolean必须是否是默认静态页面

mock: false

+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber必须页面id
├─ namestring必须页面名称
├─ page_descstring必须页面描述
├─ routestring必须页面路由
├─ page_contentobject必须页面的schema.json
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ appstring必须页面所属的应用id
├─ isBodyboolean必须 body是否为根元素
├─ isHomeboolean必须是否为首页
├─ groupstring必须public 或者 static

枚举: public,static

├─ parentIdnumber必须父级id
├─ isPageboolean必须是页面还是文件夹

mock: true

├─ isDefaultboolean必须是否是默认静态页面

mock: false

localestring必须
+ + +## 创建页面历史记录 + + + +### 基本信息 + +**Path:** /api/pages/histories/create + +**Method:** POST + +**接口描述:** + +

改动点:
+将post参数 page_content 改为page_info ,  保存该页面包括page_content 以内的一些 其他页面必要数据

+ + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
pagenumber必须页面ID
messagestring非必须历史记录备注信息
pageInfoobject必须页面信息
├─ page_contentobject必须
├─ parentIdnumber必须所属父级id
├─ isHomeboolean必须是否为首页
├─ isBodyboolean必须body是否为根目录
├─ groupstring必须所在分组 public| static

枚举: public,static

├─ routestring必须页面路由
├─ namestring必须页面名称
+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ messagestring非必须信息
├─ idnumber非必须
├─ pagestring非必须页面id
├─ page_contentobject非必须页面schema数据
├─ timestring非必须时间
├─ isBodyboolean非必须根节点是否为 body元素
├─ isHomeboolean非必须是否是首页
├─ parentIdnumber非必须父节点id
├─ groupstring非必须页面分组 staticPages | publicPages
├─ routestring非必须路由
├─ namestring非必须名称
+ + +## 删除页面 + + + +### 基本信息 + +**Path:** /app-center/api/pages/delete/:id + +**Method:** GET + +**接口描述:** + +

删除该id页面信息

+ + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| id | 71 | 页面id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须页面详情
├─ idnumber非必须
├─ namestring非必须页面名称
├─ appstring非必须页面所属应用id
├─ routestring非必须页面路由
├─ page_contentstring非必须页面schema json
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ createdByobject非必须创建人信息
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ resetPasswordTokenstring非必须w3账户
├─ blockednull非必须是否被黧黑
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocknull非必须预留字段
├─ is_adminboolean非必须是否是超级管理员
├─ is_publicnull非必须是否为公共账号
├─ tenantnumber非必须所属组织
├─ isBodyboolean非必须根节点是否为 body元素
├─ parentIdstring非必须父节点 id
├─ groupstring非必须页面分组 staticPages | publicPages
├─ depthnumber非必须页面深度
├─ isPageboolean非必须是否为页面
├─ occupierobject非必须锁住当前页面的用户, null 表示页面未被任何人锁定
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ resetPasswordTokenstring非必须w3账号
├─ blockednull非必须是否被拉黑
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocknull非必须
├─ is_adminboolean非必须是否是超级管理员
├─ is_publicnull非必须是否是公共账号
├─ isDefaultboolean非必须是否是默认静态页面
localestring非必须
+ + +## 删除页面历史记录 + + + +### 基本信息 + +**Path:** /api/pages/histories/delete/:id + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ---- | +| id | 2 | | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ messagestring非必须信息
├─ idnumber非必须
├─ pagestring非必须页面id
├─ page_contentobject非必须页面schema json
├─ timestring非必须时间
├─ isBodyboolean非必须根节点是否为 body元素
├─ isHomeboolean非必须是否是首页
├─ parentIdnumber非必须父节点 id
├─ groupstring非必须页面分组 staticPages | publicPages
├─ routestring非必须路由
├─ namestring非必须名称
+ + +## 单条页面历史记录查询 + + + +### 基本信息 + +**Path:** /api/pages/histories/:id + +**Method:** GET + +**接口描述:** + + +### 请求参数 + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ---- | +| id | 1 | | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ messagestring非必须历史记录信息
├─ idnumber非必须历史记录ID
├─ pagestring非必须页面id
├─ page_contentobject非必须页面历史schema.json
├─ timestring非必须历史记录存储时间
├─ isBodyboolean非必须body是否问根元素
├─ isHomeboolean非必须是否为首页
├─ parentIdnumber非必须父级id
├─ groupstring非必须所属分组 public| static
├─ routestring非必须页面路由
├─ namestring非必须页面名称
+ + +## 更新页面 + + + +### 基本信息 + +**Path:** /app-center/api/pages/update/:id + +**Method:** POST + +**接口描述:** + +

修改一个已经存在的页面

+
    +
  1. 禁止修改 从属应用(app)
  2. +
  3. 禁止将文件夹页面转换(isPage)
  4. +
  5. 禁止自行修改页面/文件夹路径深度(depth)  当改变页面/文件夹位置时(parentId)计算应用目录树的路径深度(depth)
  6. +
  7. 禁止修改默认页面(isDefault)
  8. +
  9. 设置isHome时,需要更新apps home_page数据为当前页面id
  10. +
  11. 生成一条页面历史记录
  12. +
+ + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| id | 68 | 页面id | + +**Body** + + + + + + + + +
名称类型是否必须默认值备注其他信息
page_descstring非必须页面描述
namestring非必须页面名称
routestring非必须页面路由,只能由字母+字母|数字 组成
page_contentobject非必须页面schema.json
groupstring非必须所在分组

枚举: public,static

isHomeboolean非必须是否为首页
isBodyboolean非必须body是否跟根元素
parentIdnumber非必须父级id
content_blocksobject []必须

item 类型: object

├─ blocknumber必须区块id

mock: 123

├─ versionstring必须选择区块的版本

mock: x

+ + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须
├─ namestring非必须页面名称
├─ appstring非必须所再应用id
├─ routestring非必须路由
├─ page_contentobject非必须页面schema json
├─ stateobject非必须
├─ methodsobject非必须
├─ componentNamestring非必须
├─ cssstring非必须
├─ propsobject非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring非必须
├─ propsobject非必须
├─ textstring非必须
├─ idstring非必须
├─ fileNamestring非必须
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ createdByobject非必须创建人
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ resetPasswordTokenstring非必须w3账号
├─ blockednull非必须是否被拉黑
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocknull非必须
├─ is_adminboolean非必须是否是超级管理员
├─ is_publicnull非必须是否是公共账号
├─ tenantnumber非必须所属组织id
├─ isBodyboolean非必须根节点是否为 body元素
├─ parentIdstring非必须父节点 id
├─ groupstring非必须页面分组 staticPages | publicPages
├─ depthnumber非必须页面深度
├─ isPageboolean非必须是否为页面
├─ occupierobject非必须锁住当前页面的用户, null 表示页面未被任何人锁定
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ resetPasswordTokenstring非必须w3账号
├─ blockednull非必须是否被拉黑
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocknull非必须预留字段
├─ is_adminboolean非必须是否是超级管理员
├─ is_publicnull非必须是否是公共账号
├─ isDefaultboolean非必须是否是默认静态页面
├─ isHomeboolean非必须是否为首页
localestring非必须
+ + +## 页面列表 + + + +### 基本信息 + +**Path:** /app-center/api/pages/list/:aid + +**Method:** GET + +**接口描述:** + +

通过应用id获取该平台下的全部页面
+改动点:
+1. 根据当前mock数据调整 加入了文件夹树型结构的页面+文件夹列表 (注意空文件夹的树型结构构建)
+新增:
+2. 添加额外 group 参数生成新接口,获取该分组下的页面列表

+ + + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| aid | 2 | 应用id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须页面数据

item 类型: object

├─ idnumber必须页面id
├─ namestring必须页面英文名称
├─ appstring必须从属应用id
├─ routestring必须页面路由
├─ created_atstring必须创建时间
├─ updated_atstring必须更新时间
├─ parentIdstring必须父级文件夹id
├─ groupstring必须页面分类 publicPages staticPages

枚举: staticPages,publicPages,

├─ isPageboolean必须是页面还是文件夹
├─ occupierobject必须当前编辑人 信息
├─ idnumber非必须用户id
├─ usernamestring非必须
├─ emailstring非必须
├─ resetPasswordTokenstring非必须
├─ blockednull非必须
├─ created_atstring非必须
├─ updated_atstring非必须
├─ blocknull非必须
├─ is_adminboolean非必须
├─ is_publicnull非必须
├─ isDefaultboolean必须是否为默认页面
├─ isHomeboolean必须是否为首页
├─ createdBynull必须页面创建者
localestring非必须
+ + +## 页面历史记录列表 + + + +### 基本信息 + +**Path:** /api/pages/histories + +**Method:** GET + +**接口描述:** + +

添加事件范围获取列表的参数,以获取一定事件范围内的页面历史记录

+

version参数尽量和app参数同时出现,能够减少服务端查询数据库的次数
+新增应用历史版本号version参数,version参数筛选的优先级高于 time_lte time_glt 参数, 会拉取该版本应用发布时间以前的全部页面历史记录, 如果同时配置了 time_lte 或 time_glt  , time_lte 、time_glt将不生效

+ + + +### 请求参数 + +**Query** + +| 参数名称 | 是否必须 | 示例 | 备注 | +| -------- | -------- | ------------- | ----------------------------------------------- | +| page | 是 | 2 | 页面id | +| time_gte | 否 | 1645522730000 | 查询时间的起始范围 毫秒数 | +| time_lte | 否 | 1645522830000 | 查询时间的结束范围 毫秒数 | +| version | 否 | 1.2.3 | 应用的历史版本号 | +| app | 否 | 应用id | 应用id(当传入version字段时,能传就尽量传一下) | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject []非必须

item 类型: object

├─ messagestring非必须信息
├─ idnumber非必须
├─ pagestring非必须页面id
├─ page_contentobject非必须页面schema json
├─ timestring非必须时间
├─ isBodyboolean非必须根节点是否为 body元素
├─ isHomeboolean非必须是否为首页
├─ parentIdnumber非必须父节点 id
├─ groupstring非必须页面分组 staticPages | publicPages
├─ routestring非必须路由
├─ namestring非必须名称
+ + +## 页面详情 + + + +### 基本信息 + +**Path:** /app-center/api/pages/detail/:id + +**Method:** GET + +**接口描述:** + +

获取页面信息

+ + +### 请求参数 + +**Headers** + +| 参数名称 | 参数值 | 是否必须 | 示例 | 备注 | +| ------------ | ---------------- | -------- | ---- | ---- | +| Content-Type | application/json | 是 | | | + +**路径参数** + +| 参数名称 | 示例 | 备注 | +| -------- | ---- | ------ | +| id | 68 | 页面id | + +### 返回数据 + + + + + + + + +
名称类型是否必须默认值备注其他信息
dataobject非必须
├─ idnumber非必须页面id
├─ namestring非必须页面名称
├─ page_descstring非必须页面描述
├─ routestring非必须页面路由
├─ page_contentobject非必须页面schema json
├─ componentNamestring非必须
├─ cssstring非必须
├─ propsobject非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring非必须
├─ propsobject非必须
├─ dataSourcenumber非必须
├─ idstring非必须
├─ childrenobject []非必须

item 类型: object

├─ componentNamestring非必须
├─ propsobject非必须
├─ editConfigobject非必须
├─ triggerstring非必须
├─ modestring非必须
├─ showStatusboolean非必须
├─ columnsobject []非必须

item 类型: object

├─ namestring必须
├─ titleobject必须
├─ keystring非必须
├─ zh_CNstring非必须
├─ en_USstring非必须
├─ typestring非必须
├─ fieldstring必须
├─ typestring必须
├─ formatobject必须
├─ requiredboolean非必须
├─ stringTypestring非必须
├─ minnumber非必须
├─ maxnumber非必须
├─ dateTimeboolean非必须
├─ dataobject []非必须

item 类型: object

├─ faststring非必须
├─ supermanstring非必须
├─ idstring非必须
├─ idstring非必须
├─ stateobject非必须
├─ pageConfigobject非必须
├─ componentobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ attrsobject非必须
├─ currentPagenumber非必须
├─ pageSizenumber非必须
├─ pageSizesnumber []非必须

item 类型: number

├─ 非必须
├─ totalnumber非必须
├─ layoutstring非必须
├─ methodsobject非必须
├─ getTableDataobject非必须
├─ typestring非必须
├─ valuestring非必须
├─ fileNamestring非必须
├─ metaobject非必须
├─ idnumber非必须
├─ parentIdstring非必须
├─ groupstring非必须
├─ titlenull非必须
├─ isHomeboolean非必须
├─ descriptionstring非必须
├─ routerstring非必须
├─ rootElementstring非必须
├─ creatorstring非必须
├─ gmt_createstring非必须
├─ gmt_modifiedstring非必须
├─ idnumber非必须
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ appstring非必须页面所属应用id
├─ createdByobject非必须页面创建者
├─ idnumber非必须用户id
├─ usernamestring非必须用户名称
├─ emailstring非必须邮箱
├─ resetPasswordTokenstring非必须用户w3账号
├─ blockednull非必须是否被系统拉黑
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ is_adminboolean非必须是否为超级管理员
├─ tenantnumber非必须租户id
├─ isBodyboolean非必须根节点是否为 body元素
├─ parentIdstring非必须父节点 id
├─ groupstring非必须页面分组 staticPages | publicPages

枚举: staticPages,publicPages

├─ depthnumber非必须页面深度
├─ isPageboolean非必须是否为页面
├─ titlenull非必须页面title
├─ occupierobject非必须锁住当前页面的用户, null 表示页面未被任何人锁定
├─ idnumber非必须
├─ usernamestring非必须用户名
├─ emailstring非必须邮箱
├─ resetPasswordTokenstring非必须w3账号
├─ blockednull非必须是否被拉黑
├─ created_atstring非必须创建时间
├─ updated_atstring非必须更新时间
├─ blocknull非必须预留字段
├─ is_adminboolean非必须是否是超级管理员
├─ isHomeboolean非必须是否为首页
├─ isDefaultboolean非必须是否是默认静态页面
+ diff --git a/docs/api/frontend-api/canvas-api.md b/docs/api/frontend-api/canvas-api.md new file mode 100644 index 0000000000..edfe12c5a7 --- /dev/null +++ b/docs/api/frontend-api/canvas-api.md @@ -0,0 +1,176 @@ +# 画布模块API + +### 元服务useCanvas + +- `statePageState`:提供reactive对象`statePageState`,描述页面状态主数据,具体数据结构如下: + +``` +{ + currentVm: null, + currentSchema: null, // 当前画布渲染的schema + currentType: null, + pageSchema: null, // 当前画布的原始页面数据 + properties: null, + dataSource: null, + dataSourceMap: null, + isSaved: boolean,// 画布的修改是否已经保存, 修改后未推送到后端为false, 推送后端保存成功后为true + isLock: boolean,// 画布是否锁定 + isBlock: boolean,// 画布加载的是否是区块 + nodesStatus: {}, + loading: boolean // 画布是否加载中 +//隐藏属性 currenetPage +} +``` + +- ` isCanvasApiReady`: ref对象,判断画布是否初始化完成, 画布初始化前值为false,初始化后值为true +- useCanvas对外暴露出的API方法函数如下: + +``` + isBlock, // 方法函数, 单次获取pageState.isBlock值, 非响应式 + + isSaved,// 方法函数, 单次获取pageState.isSaved值, 非响应式 + + isLoading, // 方法函数,单次获取pageState.loading值, 非响应式 + + initData, // 方法函数,初始化页面数据后调用该函数来刷新pageState的值 + + setSaved, // 方法函数, 设设置为已经保存 + + clearCanvas, // 方法函数,清空画布(保留文件名和区块名, 其他pageState.pageSchema重置并设置为已经保存) + + getPageSchema,//方法函数,单次获取pageState.currentSchema值 ,如果不存在返回空对象, 非响应式, + + resetPageCanvasState,// 方法函数 重置画布数据并且设置为页面(isBlock=false) + + resetBlockCanvasState, // 方法函数 重置画布数据并且设置为区块(isBlock=true) + + clearCurrentState, // 方法函数,清理pageState以下属性属性currentVm、hoverVm、properties、pageSchema + + getCurrentSchema, //方法函数,单次获取pageState.currentSchema值, 非响应式, + + setCurrentSchema, //方法函数,单次设置pageState.currentSchema + + getCurrentPage,// 方法函数,单次获取pageState.currentPage值, 非响应式,( 默认没有定义currentPage,好像是函数硬塞进来的) + + initCanvasApi, // 方法函数, 用于画布初始化完后,调用该函数登记canvasApi +``` + +- `canvasApi` : ref对象,存放了可以对画布进行操作的方法函数,画布初始化后才有值, 如下 + + ``` + { + + dragStart, // 方法函数,开始拖拽方法,设置上下文 + + updateRect,// 方法函数,更新选中框的大小 + + getContext, // 转接的方法, 调用render的setDataSourceMap + + getNodePath, // 方法函数,递归获取节点的路径 直到body层 + + dragMove,// 方法函数,拖拽中的方法,设置上下文 + + setLocales, // 方法函数,重置/补充I18n词条 + + setState,// 转接的方法, 调用render的setState + + deleteState, // 转接的方法, 调用render的deleteState + + getRenderer, // 方法函数,获取renderer + + clearSelect, // 方法函数,清空画布内部选中状态 + + selectNode,// 方法函数,设置画布内部选中的元素为node + + hoverNode,// 方法函数,设置画布内部悬停的元素为node + + insertNode,// 方法函数,画布内插入一个node,可选before after等位置 + + removeNode,// 方法函数,画布内移除一个node + + addComponent,// 方法函数,画布内插入一个物料里的组件 + + setPageCss,// 方法函数,画布设置页面/区块的全局css, 如果不存在会新增style标签,如果存在会刷新style标签的内容 + + addScript, // 方法函数 给画布添加脚本,用于物料解析后添加脚本 (后面可能改为importMap 可能就没用了) + + addStyle,// 方法函数 给画布添加CSS,用于物料解析后添加css + + getNode,// 转接的方法, 调用render的getNode + + getCurrent, // 方法函数 返回canvasState的current/parent/loopId, 当前数据 + + setSchema,// 转接的方法, 调用render的setSchema + + setUtils,// 转接的方法, 调用render的setUtils + + updateUtils,// 转接的方法, 调用render的updateUtils + + deleteUtils, // 转接的方法, 调用render的deleteUtils + + getSchema,// 转接的方法, 调用render的getSchema + + setI18n, + + getCanvasType, // 方法函数 获取canvas的类型 + + setCanvasType,// 方法函数 设置canvas的类型,并且会设置画布body的样式名 + + setProps, + + setGlobalState, // 方法函数,设置resouce的resState的globalState, 然后调用render的setGlobalState方法 + + getGlobalState,// 转接的方法, 调用render的setDataSourceMap + + getDocument, // 方法函数,返回画布iframe的contentDcocument + + canvasDispatch,// 方法函数,在画布内document层派发一个事件 + + Builtin, // json对象, 画布内建物料的json + + setDataSourceMap // 转接的方法, 调用render的setDataSourceMap + + getDataSourceMap// 转接的方法, 调用render的getDataSourceMap + + } + ``` + + + +### renderer对象(来自画布实例) + +``` +{ + getApp, //方法函数, 放回当前画布的vue实例app + getI18n //方法函数, 放回当前画布vue实例初始化后的TinyI18nHost + getUtils, // 方法函数, 返回存放的utils + setUtils, // 方法函数,设置数据到内置存放的utils + updateUtils,// 方法函数,追加utils + deleteUtils,// 方法函数,删除特定的utils + getBridge, // 方法函数, 返回存放的bridge + setBridge,// 方法函数, 设置数据到内置存放的bridge + getMethods, //下同,全部为设置和存放 + setMethods, + setController, + setConfigure, + getSchema, + setSchema, + getState, + deleteState, + setState, + getProps, + setProps, + getContext, + getNode, + getRoot, + setPagecss, + setCondition, + getGlobalState, + getDataSourceMap, + setDataSourceMap, + setGlobalState +} +``` + + + diff --git a/docs/api/frontend-api/global-layout-api.md b/docs/api/frontend-api/global-layout-api.md new file mode 100644 index 0000000000..bfba2336f3 --- /dev/null +++ b/docs/api/frontend-api/global-layout-api.md @@ -0,0 +1,39 @@ +# 布局模块 + +## 布局元应用 + +布局元应用配置如下 + +```javascript +{ + options: { + configProvider, // 全局配置组件 + configProviderDesign // 规范,可以通过该属于定制一些自定义的交互规范 + }, + metas: [LayoutService] +} +``` + +## 布局元服务 + +布局元服务api如下 + +```javascript +{ + apis: { + PLUGIN_NAME, // 对象,插件对应的元应用id + activePlugin, // 激活plugin面板,参数(插件名,是否激活对应面板) + activeSetting, // 激活setting面板并高亮提示,参数(属性名) + closePlugin, // 关闭插件面板,参数(是否强制关闭) + getDimension, // 获取样式范围 + getPluginState, // 获取插件面板状态 + getScale, // 获取规定比例 + isEmptyPage, // 判断页面状态是否为空 + layoutState, // 对象,layout状态 + pluginState, // 对象,插件状态 + setDimension // 设置样式范围 + } +} +``` + +### \ No newline at end of file diff --git a/docs/api/frontend-api/main-package-api.md b/docs/api/frontend-api/main-package-api.md new file mode 100644 index 0000000000..4f3b42127f --- /dev/null +++ b/docs/api/frontend-api/main-package-api.md @@ -0,0 +1,200 @@ +# TinyEngine 主包使用API + +主包包名为@opentiny/tiny-engine,主要导出所有扩展插件包模块、元服务、meta-register API等,用户设计器中可以按需引用 + +导出模块如下: + +```js +export { init } from './src/init' + +// reexport all plugin, user can import ondemand +export { default as Breadcrumb, BreadcrumbService } from '@opentiny/tiny-engine-toolbar-breadcrumb' +export { default as Fullscreen } from '@opentiny/tiny-engine-toolbar-fullscreen' +export { default as Lang } from '@opentiny/tiny-engine-toolbar-lang' +export { default as Logo } from '@opentiny/tiny-engine-toolbar-logo' +export { default as Lock } from '@opentiny/tiny-engine-toolbar-lock' +export { default as Media } from '@opentiny/tiny-engine-toolbar-media' +export { default as Redoundo, HistoryService } from '@opentiny/tiny-engine-toolbar-redoundo' +export { default as Save } from '@opentiny/tiny-engine-toolbar-save' +export { default as Clean } from '@opentiny/tiny-engine-toolbar-clean' +export { default as Preview } from '@opentiny/tiny-engine-toolbar-preview' +export { default as GenerateCode, SaveLocalService } from '@opentiny/tiny-engine-toolbar-generate-code' +export { default as Refresh } from '@opentiny/tiny-engine-toolbar-refresh' +export { default as Collaboration } from '@opentiny/tiny-engine-toolbar-collaboration' +export { default as Setting } from '@opentiny/tiny-engine-toolbar-setting' +export { default as Materials, ResourceService, MaterialService } from '@opentiny/tiny-engine-plugin-materials' +export { default as State } from '@opentiny/tiny-engine-plugin-state' +export { default as Script } from '@opentiny/tiny-engine-plugin-script' +export { default as Tree } from '@opentiny/tiny-engine-plugin-tree' +export { default as Help, HelpService } from '@opentiny/tiny-engine-plugin-help' +export { default as Schema } from '@opentiny/tiny-engine-plugin-schema' +export { default as Page, PageService } from '@opentiny/tiny-engine-plugin-page' +export { default as I18n, TranslateService } from '@opentiny/tiny-engine-plugin-i18n' +export { default as Bridge } from '@opentiny/tiny-engine-plugin-bridge' +export { default as Block, BlockService } from '@opentiny/tiny-engine-plugin-block' +export { default as Datasource, DataSourceService } from '@opentiny/tiny-engine-plugin-datasource' +export { default as Robot } from '@opentiny/tiny-engine-plugin-robot' +export { default as Props, PropertiesService, PropertyService } from '@opentiny/tiny-engine-setting-props' +export { default as Events } from '@opentiny/tiny-engine-setting-events' +export { default as Styles } from '@opentiny/tiny-engine-setting-styles' +export { default as Layout, LayoutService } from '@opentiny/tiny-engine-layout' +export { default as Canvas } from '@opentiny/tiny-engine-canvas' +export { initPreview } from './src/preview/src/main' +export { + GenerateCodeService, + PluginPanel, + PluginSetting, + ToolbarBase, + GlobalService +} from '@opentiny/tiny-engine-common' + +export { default as defaultRegistry } from './registry' + +export * from '@opentiny/tiny-engine-meta-register' + +``` + +## 使用示例 + +1. 可以将主包导出的元服务、元应用按需引入到注册表中,如: +```js +// registry.js +import { + Breadcrumb, + Fullscreen, + Lang, + Logo, + Lock, + Media, + Redoundo, + Save, + Clean, + Preview, + GenerateCode, + Refresh, + Collaboration, + Materials, + State, + Script, + Tree, + Help, + Schema, + Page, + I18n, + Bridge, + Block, + Datasource, + Robot, + Props, + Events, + Styles, + Layout, + Canvas, + GenerateCodeService, + GlobalService +} from '@opentiny/tiny-engine' +import engineConfig from './engine.config' + +export default { + root: { + id: 'engine.root', + metas: [GenerateCodeService, GlobalService] + }, + config: engineConfig, + layout: { + ...Layout, + options: { + ...Layout.options, + isShowLine: true, + isShowCollapse: true, + toolbars: { + left: ['engine.toolbars.breadcrumb', 'engine.toolbars.lock', 'engine.toolbars.logo'], + center: ['engine.toolbars.media'], + right: [ + ['engine.toolbars.redoundo', 'engine.toolbars.clean'], + ['engine.toolbars.preview'], + ['engine.toolbars.generate-code', 'engine.toolbars.save'] + ], + collapse: [ + ['engine.toolbars.collaboration'], + ['engine.toolbars.refresh', 'engine.toolbars.fullscreen'], + ['engine.toolbars.lang'] + ] + } + } + }, + themes: [ + { + id: 'engine.theme.light' + }, + { + id: 'engine.theme.dark' + } + ], + toolbars: [ + Logo, + Breadcrumb, + Lock, + Media, + Redoundo, + Collaboration, + Clean, + Preview, + Refresh, + GenerateCode, + Save, + Fullscreen, + Lang + ], + plugins: [Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, State, Schema, Help, Robot], + dsls: [{ id: 'engine.dsls.dslvue' }], + settings: [Props, Styles, Events], + canvas: Canvas +} + +``` + +2. `defineEntry`:提供了defineEntry函数,作为注册表的注册入口,能够将用户注册表注册到TinyEngine中,如: +```js +import registry from '../registry.js' +import { defineEntry } from '@opentiny/tiny-engine' + +defineEntry(registry) + +export { registry } + +``` + +3. `getMergeMeta`:提供了在各个元服务、元应用获取到注册表的能力 +```js +import { getMergeMeta } from '@opentiny/tiny-engine' + +// 获取元应用/元服务注册表 +getMergeMeta('engine.config') + +// 获取完整注册表 +getMergeRegistry() +// 获取类型下所有注册表 +getMergeRegistry('toolbars') +// 获取元应用/元服务注册表 +getMergeRegistry('toolbars', 'engine.toolbars.lang') +``` + +4. `getMetaApi`:提供了获取元应用/元服务API的能力 + +```js +import { getMetaApi } from '@opentiny/tiny-engine' + +// 通过getMetaApi获取元应用/元服务API +const { selectNode } = getMetaApi('engine.canvas').canvasApi.value + + +``` + +5. `getOptions`:提供了在各个元服务、元应用获取到元服务API的能力 +```js +import { getOptions } from '@opentiny/tiny-engine' + +// 通过getOptions获取元应用/元服务配置项 +const options = getOptions('engine.canvas') +``` \ No newline at end of file diff --git a/docs/api/frontend-api/material-api.md b/docs/api/frontend-api/material-api.md new file mode 100644 index 0000000000..bf3fb7a34c --- /dev/null +++ b/docs/api/frontend-api/material-api.md @@ -0,0 +1,101 @@ +# 物料模块API +## 物料插件元应用 + +```js +export default { + id: 'engine.plugins.materials', // 元应用id + title: '物料', // 元应用名称 + type: 'plugins', // 元应用类型 + icon: 'plugin-icon-materials', // 元应用图标 + align: 'top', // 元应用在当前类型下的位置 + entry, // 入口文件 + layout: MaterialLayout, // 布局文件,可替换布局 + options: { + defaultTabId: 'engine.plugins.materials.component', // 默认激活的Tab的元应用ID + displayComponentIds: ['engine.plugins.materials.component', 'engine.plugins.materials.block'], // 需要展示的Tab组件ID列表,可以为单个,单个的时候,不展示tab,直接显示该元应用 + basePropertyOptions //基础属性配置 + }, + components: { + header: MaterialHeader // 公共组件,可自行提供 + }, + apis: { ...MaterialBlock.apis }, // 当前元应用暴露出来的api + metas: [MaterialBlock, MaterialComponent, ResourceService, MaterialService] // 当前元应用里依赖的元应用和元服务 +} + +export { entry, ResourceService, MaterialService } + +``` + +### 物料插件元应用暴露出来的API +```js + apis: { + fetchGroups: fetchGroups // 获取区块分组列表 + } +``` + +## 物料模块元服务 +### useResource 元服务 + +负责全局统一的资源管理,如:国际化、大纲树、工具类、全局状态,全局数据源 + +```js +const resState = reactive({ + dataSource: [], + pageTree: [], + langs: {}, + utils: {}, + globalState: [] +}) + + +return { + resState, // 保存着整个tiny-engine的国际化、大纲树、工具类、全局状态,全局数据源数据 + fetchResource, // 进行初始化,获取后端返回的资源信息 + initPageOrBlock, // 初始化页面或区块 + handlePopStateEvent //被app.vue主应用调用 ,可以用来进行页面、区块的刷新和国际化的重新初始化 +} +``` + +### useMaterial 元服务 + +负责物料插件的管理,如:物料数据,物料插件的初始化、物料插件的请求、物料插件的处理、物料插件的清空、物料插件的添加、物料插件的注册、物料插件的依赖更新等 + +#### API + +1. `materialState`:reative 对象,存放物料插件面板里的状态数据,包括组件、区块、第三方依赖等,具体数据结构如下: + +```js + +const materialState = reactive({ + components: [], // 这里存放的是物料插件面板里所有显示的组件 + blocks: [], // 这里存放的是物料插件面板里所有显示的区块 + thirdPartyDeps: { scripts: [], styles: new Set() } // 这里存放的是物料第三方依赖相关信息 +}) + +``` +> **使用示例** +> +> ```useMaterial().materialState``` + + +2. 暴露出来的方法函数如下 + +```js +{ + initMaterial, // 物料模块初始化 + fetchMaterial, // 请求物料并进行处理 + getMaterialsRes, // 获取物料,并返回符合物料协议的bundle.json内容,getMaterialsRes: () => Promise + generateNode, // 根据 包含{ type, componentName }的组件信息生成组件schema节点,结构: + clearMaterials, // 清空物料 + clearBlockResources, // 清空区块缓存,以便更新最新版区块 + getMaterial, // 获取单个物料,(property) getMaterial: (name: string) => Material + setMaterial, // 设置单个物料 (property) setMaterial: (name: string, data: Material) => void + addMaterials, // 添加多个物料 + registerBlock, // 注册新的区块 + updateCanvasDependencies, //传入新的区块,获取新增区块的依赖,更新画布中的组件依赖 + getConfigureMap // 获取物料组件的配置信息 + } +``` +> **使用示例** +> +> ```useMaterial().initMaterial({ isInit: true, appData }) // appData为远程拉取的应用数据``` \ No newline at end of file diff --git a/docs/api/frontend-api/settings-panel-api.md b/docs/api/frontend-api/settings-panel-api.md new file mode 100644 index 0000000000..69c644ba19 --- /dev/null +++ b/docs/api/frontend-api/settings-panel-api.md @@ -0,0 +1,106 @@ +# 设置面板模块API + +## 变量绑定 + +变量绑定列表中的变量可能来自于其他元应用。 + +目前提供一种在元应用中注册变量绑定列表来源的方法:首先在元应用配置中添加 getSharedOptions 接口,这个接口也是用其他需要共享的配置 + +```js +export default { + ...metaData, + entry, + apis: { + getSharedOptions + } +} +``` + + + +getSharedOptions 接口返回一个存储配置对象,这里约定了 variableConfiguratorList 字段为变量绑定列表。下面代码是各个元应用提供共享配置需要导出的函数 + +```javascript +export const getSharedOptions = () => ({ + variableConfiguratorList: [ /* 变量绑定列表 */ ] +}) +``` + +在变量绑定组件中获取共享配置 + +```javascript +getSharedOptions('variableConfiguratorList') +``` + +variableConfiguratorList 数组项目的格式如下 + +```javascript +{ + id: string; + content: string; // 列表项显示的文本 + getVariables: () => { + bindPrefix: string; + variables: any; + }; // 获取变量绑定列表的方法 + getVariablesAsync: () => { + bindPrefix: string; + variables: any; + }; // 获取变量绑定列表的异步方法。如果有同步方法,只会执行同步方法 + condition: () => boolean; // 控制是否显示的方法 + postConfirm: (context) => void, // 点击确定后执行的额外逻辑 + _order: number; // 用来排序的字段。因为组件导入过程中顺序不是确定的,所以需要增加一个字段用来确定顺序 +} +``` + + + +## 事件绑定 + +事件元应用扩展,提供配置项和可替换的组件。元应用部分配置如下 + +```javascript +{ + options: { + commonEvents // 默认绑定事件的列表 + }, + components: { + BindEventsDialogSidebar, + BindEventsDialogContent + } +} +``` + +`commonEvents` 是默认绑定事件的列表,是对象类型。另外物料层级可以针对组件增加额外的事件 + +增加默认绑定事件示例: + +```javascript +{ + options: { + commonEvents: { + ...commonEvents, + // 增加 onKeyDown 到默认绑定事件列表 + onKeyDown: { /* 事件描述格式请参考原有的默认事件或者schema协议 */ } + } + } +} +``` + +替换事件绑定弹窗组件 + +- `BindEventsDialogSidebar` 为弹窗左侧 响应方法 组件; + +- `BindEventsDialogContent` 为弹窗右侧 方法名称 组件 + + + + ![bindEvent]( ./imgs/bindEventApi.png) + +由于内部逻辑复杂,暂时无法提取细粒度更小的逻辑提供扩展或者替换。建议复制一份组件代码,在原有代码基础上修改后替换 + +例如给函数列表增加一些默认方法 + +```javascript +const defaultMethodList = [/* 默认函数列表 */] +filteredMethodList.value = [newMethod, ...defaultMethodList, ...methodList] +``` \ No newline at end of file diff --git a/docs/api/imgs/bindEventApi.png b/docs/api/imgs/bindEventApi.png new file mode 100644 index 0000000000..f7c7bba9ea Binary files /dev/null and b/docs/api/imgs/bindEventApi.png differ diff --git a/docs/basic-features/designer-ui-modules.md b/docs/basic-features/designer-ui-modules.md new file mode 100644 index 0000000000..d0a2bf6275 --- /dev/null +++ b/docs/basic-features/designer-ui-modules.md @@ -0,0 +1,62 @@ +# 设计器界面模块简介 + +> 本节主要简单介绍设计器界面模块 + +## 设计器界面概览 + +![设计器界面示例图](./imgs/platformExpend.png) + +如上图,设计器可以分为顶部工具栏、左侧插件栏、中间画布区、右侧设置面板等几个主要界面模块 + +## 顶部工具栏 + +![顶部工具栏示例图](./imgs/toolbaroverview.png) + +如上图所示,设计器顶部的工具栏从左到右包括: + +- 菜单按钮,点击可以展开菜单,菜单功能包括:前往物料中心、应用预览、应用发布等功能 +- 面包屑(展示当前编辑页面或区块) +- 多终端工具切换(画布宽度切换) +- 当前编辑者 +- 画布清除工具(清空当前画布) +- 保存功能,保存当前页面或区块数据 +- 下载源代码,将当前数据转换并生成代码到本地 +- 预览功能,打开新 Tab 预览当前页面或区块 +- 撤销回退功能,撤销或回退上一步操作 +- 全屏功能,将当前页面全屏(跟网页全屏功能一样) +- 设置功能,点击可展开左侧页面或区块的设置插件,管理当前页面或者区块 +- 画布中英文切换,点击可切换画布中英文,测试国际化能力 + +## 左侧插件栏 + +![插件栏示意图](./imgs/pluginoverview.png) + +如上图所示,插件面板主要有物料插件、大纲树插件、页面管理工具插件、区块管理插件、数据源管理插件、资源管理插件、国际化插件、JS 方法插件、状态管理插件 + +插件点击之后会向右展开对应插件的设置面板 + +## 中心画布 + +![中心画布](./imgs/canvasoverview.png) + +如上图所示,中心画布位于设计器中央,是可视化设计的核心模块,可以在插件栏中的物料面板往中心画布拖入组件,也可以点击画布选中组件,修改组件的属性、样式、绑定事件等等 + +## 右侧设置面板 + +右侧设置面板分为属性设置、样式设置、高级设置等面板 + +- 属性设置,设置组件的属性,比如按钮组件的 size、文案、按钮类型等等组件提供配置的属性 + +![属性设置图示](./imgs/settingPanelOverview.png) +- 样式设置,设置组件的样式,提供直接配置样式,也可以编写 CSS 代码配置样式 + +![样式设置图示](./imgs/stylePanelOverview.png) +- 高级设置,设置组件是否渲染、绑定点击事件、设置组件是否循环渲染等等 + +![高级设置图示](./imgs/eventOverview.png) + +## 底部节点树 + +![底部节点树图示](./imgs/treeselectOverview.png) + +底部节点树展示了从 body 到当前选中节点的层级,点击可切换层级 diff --git a/docs/basic-features/frontend-application-flow.md b/docs/basic-features/frontend-application-flow.md new file mode 100644 index 0000000000..b8e3709bd7 --- /dev/null +++ b/docs/basic-features/frontend-application-flow.md @@ -0,0 +1,63 @@ +# 设计前端应用流程 + +前端应用可以由一个或多个页面组成一个完整的业务系统。在TinyEngine中,通过创建应用、(可选)创建文件夹、创建页面、页面设计和生成应用代码五步,即可快速完成前端应用设计,具体流程如图1所示。 + +**图 1** 创建应用 +![创建应用](./imgs/createApp.png) + +## 步骤一:新建文件夹 + +1. 单击应用模块内的“应用开发”,进入设计器。 +2. 在左侧插件栏中,单击![页面管理插件图标](./imgs/icon-page.png),进入“页面管理“页面。 +3. 单击“页面管理“的新增文件夹按钮。 +4. 设置基本属性,如输入文件夹ID及设置路由。 + + **图 3** 创建文件夹 + ![创建文件夹](./imgs/createFolder.png) + +5. 单击“保存“,完成文件夹创建。 + +## 步骤二:新建一个页面 + +1. 单击“页面管理“的新增页面按钮。 +2. 设置页面基本属性。 + - 选择页面类型:可选“静态页面”或“公共页面”。 + - 页面名称:只允许包含英文字母,且以大写开头驼峰格式,如DemoPage。 + - 选择文件夹:下拉框中选择文件夹名称。 + - 路由:输入路由信息,只允许包含英文字母、数字、下划线、中划线和正斜杠组成, 且以英文字母开头。 + + **图 4** 创建页面 + ![createPage](./imgs/createPage.png) + +3. 单击“保存“。 +4. 在弹框中输入历史备份信息,单击“确定“。 + +## 步骤三:页面设计 + +前端应用由一个或多个组件拼装而成。在左侧插件栏打开物料资产包,选择合适的组件,拖拽到中间画布中。在画布选中组件,设置组件的属性、样式、以及绑定事件。 + +**图 5** 添加组件 +![添加组件](not-found/添加组件.png) + +**图 6** 设置组件基本属性 +![设置组件基本属性](./imgs/setCompoentBaseAttr.png) + +**图 7** 设置组件样式 +![设置组件样式](./imgs/setCompoentStyle.png) + +**图 8** 设置组件高级属性 +![设置组件高级属性](./imgs/setCompoentAttr.png) + +## 步骤四:生成代码 + +根据配置的页面设计,生成应用的基本代码。代码生成后,会下载至本地,供您使用。 + +1. 单击顶部工具栏的“下载源码“按钮。 +2. 选择下载路径。 +3. 选择生成到本地的文件。 + + **图 9** 选择生成文件 + ![choseFile](./imgs/choseFile.png) + +4. 单击“确定“,代码将下载至本地路径。 + diff --git a/docs/basic-features/imgs/addComponent-13.png b/docs/basic-features/imgs/addComponent-13.png new file mode 100644 index 0000000000..7e7600185f Binary files /dev/null and b/docs/basic-features/imgs/addComponent-13.png differ diff --git a/docs/basic-features/imgs/addFolder.png b/docs/basic-features/imgs/addFolder.png new file mode 100644 index 0000000000..d25a6c5ff5 Binary files /dev/null and b/docs/basic-features/imgs/addFolder.png differ diff --git a/docs/basic-features/imgs/addPage.png b/docs/basic-features/imgs/addPage.png new file mode 100644 index 0000000000..055b8a3466 Binary files /dev/null and b/docs/basic-features/imgs/addPage.png differ diff --git a/docs/basic-features/imgs/addVar.png b/docs/basic-features/imgs/addVar.png new file mode 100644 index 0000000000..a6fa48a721 Binary files /dev/null and b/docs/basic-features/imgs/addVar.png differ diff --git a/docs/basic-features/imgs/addWords.png b/docs/basic-features/imgs/addWords.png new file mode 100644 index 0000000000..2db4795b99 Binary files /dev/null and b/docs/basic-features/imgs/addWords.png differ diff --git a/docs/basic-features/imgs/bindVariable-25.png b/docs/basic-features/imgs/bindVariable-25.png new file mode 100644 index 0000000000..16214fbafe Binary files /dev/null and b/docs/basic-features/imgs/bindVariable-25.png differ diff --git a/docs/basic-features/imgs/canvasoverview.png b/docs/basic-features/imgs/canvasoverview.png new file mode 100644 index 0000000000..db9c098e21 Binary files /dev/null and b/docs/basic-features/imgs/canvasoverview.png differ diff --git a/docs/basic-features/imgs/choseClickCompontes.png b/docs/basic-features/imgs/choseClickCompontes.png new file mode 100644 index 0000000000..6941396932 Binary files /dev/null and b/docs/basic-features/imgs/choseClickCompontes.png differ diff --git a/docs/basic-features/imgs/choseComponent.png b/docs/basic-features/imgs/choseComponent.png new file mode 100644 index 0000000000..eb4d78a2a1 Binary files /dev/null and b/docs/basic-features/imgs/choseComponent.png differ diff --git a/docs/basic-features/imgs/choseComponentID.png b/docs/basic-features/imgs/choseComponentID.png new file mode 100644 index 0000000000..d802064053 Binary files /dev/null and b/docs/basic-features/imgs/choseComponentID.png differ diff --git a/docs/basic-features/imgs/choseFile.png b/docs/basic-features/imgs/choseFile.png new file mode 100644 index 0000000000..e7136ae2f5 Binary files /dev/null and b/docs/basic-features/imgs/choseFile.png differ diff --git a/docs/basic-features/imgs/clickNode.png b/docs/basic-features/imgs/clickNode.png new file mode 100644 index 0000000000..4cf7beea11 Binary files /dev/null and b/docs/basic-features/imgs/clickNode.png differ diff --git a/docs/basic-features/imgs/componentDown.png b/docs/basic-features/imgs/componentDown.png new file mode 100644 index 0000000000..59c67442ee Binary files /dev/null and b/docs/basic-features/imgs/componentDown.png differ diff --git a/docs/basic-features/imgs/componentUp.png b/docs/basic-features/imgs/componentUp.png new file mode 100644 index 0000000000..bfd7d858da Binary files /dev/null and b/docs/basic-features/imgs/componentUp.png differ diff --git a/docs/basic-features/imgs/copyComponent.png b/docs/basic-features/imgs/copyComponent.png new file mode 100644 index 0000000000..7752e40c32 Binary files /dev/null and b/docs/basic-features/imgs/copyComponent.png differ diff --git a/docs/basic-features/imgs/copyKeyValue.png b/docs/basic-features/imgs/copyKeyValue.png new file mode 100644 index 0000000000..0e41f42212 Binary files /dev/null and b/docs/basic-features/imgs/copyKeyValue.png differ diff --git a/docs/basic-features/imgs/createApp.png b/docs/basic-features/imgs/createApp.png new file mode 100644 index 0000000000..b9d8ed6656 Binary files /dev/null and b/docs/basic-features/imgs/createApp.png differ diff --git a/docs/basic-features/imgs/createFolder.png b/docs/basic-features/imgs/createFolder.png new file mode 100644 index 0000000000..44fdee09a3 Binary files /dev/null and b/docs/basic-features/imgs/createFolder.png differ diff --git a/docs/basic-features/imgs/createPage.png b/docs/basic-features/imgs/createPage.png new file mode 100644 index 0000000000..6ff737d269 Binary files /dev/null and b/docs/basic-features/imgs/createPage.png differ diff --git a/docs/basic-features/imgs/delBatchWord.png b/docs/basic-features/imgs/delBatchWord.png new file mode 100644 index 0000000000..97a52665db Binary files /dev/null and b/docs/basic-features/imgs/delBatchWord.png differ diff --git a/docs/basic-features/imgs/delWord.png b/docs/basic-features/imgs/delWord.png new file mode 100644 index 0000000000..3751143165 Binary files /dev/null and b/docs/basic-features/imgs/delWord.png differ diff --git a/docs/basic-features/imgs/deleteClassNameNew.gif b/docs/basic-features/imgs/deleteClassNameNew.gif new file mode 100644 index 0000000000..6a771b7f77 Binary files /dev/null and b/docs/basic-features/imgs/deleteClassNameNew.gif differ diff --git a/docs/basic-features/imgs/dragComponent.gif b/docs/basic-features/imgs/dragComponent.gif new file mode 100644 index 0000000000..853e9c8b99 Binary files /dev/null and b/docs/basic-features/imgs/dragComponent.gif differ diff --git a/docs/basic-features/imgs/editClassNameNew.gif b/docs/basic-features/imgs/editClassNameNew.gif new file mode 100644 index 0000000000..1fac60f535 Binary files /dev/null and b/docs/basic-features/imgs/editClassNameNew.gif differ diff --git a/docs/basic-features/imgs/editClassNameStatic.png b/docs/basic-features/imgs/editClassNameStatic.png new file mode 100644 index 0000000000..7fbdc814bd Binary files /dev/null and b/docs/basic-features/imgs/editClassNameStatic.png differ diff --git a/docs/basic-features/imgs/editGlobalStyleNew.gif b/docs/basic-features/imgs/editGlobalStyleNew.gif new file mode 100644 index 0000000000..5b4eb44c57 Binary files /dev/null and b/docs/basic-features/imgs/editGlobalStyleNew.gif differ diff --git a/docs/basic-features/imgs/editWord.png b/docs/basic-features/imgs/editWord.png new file mode 100644 index 0000000000..93e352912e Binary files /dev/null and b/docs/basic-features/imgs/editWord.png differ diff --git a/docs/basic-features/imgs/eventOverview.png b/docs/basic-features/imgs/eventOverview.png new file mode 100644 index 0000000000..564618991f Binary files /dev/null and b/docs/basic-features/imgs/eventOverview.png differ diff --git a/docs/basic-features/imgs/icon-add.png b/docs/basic-features/imgs/icon-add.png new file mode 100644 index 0000000000..e6848dd4be Binary files /dev/null and b/docs/basic-features/imgs/icon-add.png differ diff --git a/docs/basic-features/imgs/icon-code.png b/docs/basic-features/imgs/icon-code.png new file mode 100644 index 0000000000..64f1cfa91c Binary files /dev/null and b/docs/basic-features/imgs/icon-code.png differ diff --git a/docs/basic-features/imgs/icon-copy.png b/docs/basic-features/imgs/icon-copy.png new file mode 100644 index 0000000000..38859e6e48 Binary files /dev/null and b/docs/basic-features/imgs/icon-copy.png differ diff --git a/docs/basic-features/imgs/icon-del.png b/docs/basic-features/imgs/icon-del.png new file mode 100644 index 0000000000..98060ab097 Binary files /dev/null and b/docs/basic-features/imgs/icon-del.png differ diff --git a/docs/basic-features/imgs/icon-edit.png b/docs/basic-features/imgs/icon-edit.png new file mode 100644 index 0000000000..5fc5a4e7a4 Binary files /dev/null and b/docs/basic-features/imgs/icon-edit.png differ diff --git a/docs/basic-features/imgs/icon-i18n.png b/docs/basic-features/imgs/icon-i18n.png new file mode 100644 index 0000000000..a52180988a Binary files /dev/null and b/docs/basic-features/imgs/icon-i18n.png differ diff --git a/docs/basic-features/imgs/icon-page.png b/docs/basic-features/imgs/icon-page.png new file mode 100644 index 0000000000..2ce062bc55 Binary files /dev/null and b/docs/basic-features/imgs/icon-page.png differ diff --git a/docs/basic-features/imgs/icon-tree.png b/docs/basic-features/imgs/icon-tree.png new file mode 100644 index 0000000000..7ad990c558 Binary files /dev/null and b/docs/basic-features/imgs/icon-tree.png differ diff --git a/docs/basic-features/imgs/inlineSettingResultNew.png b/docs/basic-features/imgs/inlineSettingResultNew.png new file mode 100644 index 0000000000..26837fc05d Binary files /dev/null and b/docs/basic-features/imgs/inlineSettingResultNew.png differ diff --git a/docs/basic-features/imgs/inlineStyleBindVar.gif b/docs/basic-features/imgs/inlineStyleBindVar.gif new file mode 100644 index 0000000000..37b707be46 Binary files /dev/null and b/docs/basic-features/imgs/inlineStyleBindVar.gif differ diff --git a/docs/basic-features/imgs/inlineStyleSettingNew.gif b/docs/basic-features/imgs/inlineStyleSettingNew.gif new file mode 100644 index 0000000000..7bb68f180c Binary files /dev/null and b/docs/basic-features/imgs/inlineStyleSettingNew.gif differ diff --git a/docs/basic-features/imgs/inserPosition.png b/docs/basic-features/imgs/inserPosition.png new file mode 100644 index 0000000000..96883172b0 Binary files /dev/null and b/docs/basic-features/imgs/inserPosition.png differ diff --git a/docs/basic-features/imgs/insertComponent.gif b/docs/basic-features/imgs/insertComponent.gif new file mode 100644 index 0000000000..efff5e934c Binary files /dev/null and b/docs/basic-features/imgs/insertComponent.gif differ diff --git a/docs/basic-features/imgs/lifecycle.gif b/docs/basic-features/imgs/lifecycle.gif new file mode 100644 index 0000000000..947c72bda4 Binary files /dev/null and b/docs/basic-features/imgs/lifecycle.gif differ diff --git a/docs/basic-features/imgs/modifyStyle.png b/docs/basic-features/imgs/modifyStyle.png new file mode 100644 index 0000000000..85b1279666 Binary files /dev/null and b/docs/basic-features/imgs/modifyStyle.png differ diff --git a/docs/basic-features/imgs/modifyVar.png b/docs/basic-features/imgs/modifyVar.png new file mode 100644 index 0000000000..86e13d8d69 Binary files /dev/null and b/docs/basic-features/imgs/modifyVar.png differ diff --git a/docs/basic-features/imgs/modifyedStyle.png b/docs/basic-features/imgs/modifyedStyle.png new file mode 100644 index 0000000000..35b4429cba Binary files /dev/null and b/docs/basic-features/imgs/modifyedStyle.png differ diff --git a/docs/basic-features/imgs/pageManaHistoryRestore.png b/docs/basic-features/imgs/pageManaHistoryRestore.png new file mode 100644 index 0000000000..a52dd842cf Binary files /dev/null and b/docs/basic-features/imgs/pageManaHistoryRestore.png differ diff --git a/docs/basic-features/imgs/pageManaIndex.png b/docs/basic-features/imgs/pageManaIndex.png new file mode 100644 index 0000000000..df02f160d7 Binary files /dev/null and b/docs/basic-features/imgs/pageManaIndex.png differ diff --git a/docs/basic-features/imgs/pagedelOrCopy.png b/docs/basic-features/imgs/pagedelOrCopy.png new file mode 100644 index 0000000000..0768b6fc78 Binary files /dev/null and b/docs/basic-features/imgs/pagedelOrCopy.png differ diff --git a/docs/basic-features/imgs/platformExpend.png b/docs/basic-features/imgs/platformExpend.png new file mode 100644 index 0000000000..26bf82749e Binary files /dev/null and b/docs/basic-features/imgs/platformExpend.png differ diff --git a/docs/basic-features/imgs/pluginoverview.png b/docs/basic-features/imgs/pluginoverview.png new file mode 100644 index 0000000000..0dffd2f08e Binary files /dev/null and b/docs/basic-features/imgs/pluginoverview.png differ diff --git a/docs/basic-features/imgs/preview-btn.png b/docs/basic-features/imgs/preview-btn.png new file mode 100644 index 0000000000..82c045af96 Binary files /dev/null and b/docs/basic-features/imgs/preview-btn.png differ diff --git a/docs/basic-features/imgs/preview-pre.png b/docs/basic-features/imgs/preview-pre.png new file mode 100644 index 0000000000..ed9b0e5522 Binary files /dev/null and b/docs/basic-features/imgs/preview-pre.png differ diff --git a/docs/basic-features/imgs/preview.png b/docs/basic-features/imgs/preview.png new file mode 100644 index 0000000000..6ad087f527 Binary files /dev/null and b/docs/basic-features/imgs/preview.png differ diff --git a/docs/basic-features/imgs/selectClassNameNew.gif b/docs/basic-features/imgs/selectClassNameNew.gif new file mode 100644 index 0000000000..84c77cc7fc Binary files /dev/null and b/docs/basic-features/imgs/selectClassNameNew.gif differ diff --git a/docs/basic-features/imgs/selectParentID.png b/docs/basic-features/imgs/selectParentID.png new file mode 100644 index 0000000000..c01d06a226 Binary files /dev/null and b/docs/basic-features/imgs/selectParentID.png differ diff --git a/docs/basic-features/imgs/setClassNameNew.gif b/docs/basic-features/imgs/setClassNameNew.gif new file mode 100644 index 0000000000..908a237ed7 Binary files /dev/null and b/docs/basic-features/imgs/setClassNameNew.gif differ diff --git a/docs/basic-features/imgs/setClassNameStatic.png b/docs/basic-features/imgs/setClassNameStatic.png new file mode 100644 index 0000000000..2718cdaa70 Binary files /dev/null and b/docs/basic-features/imgs/setClassNameStatic.png differ diff --git a/docs/basic-features/imgs/setCompoentAttr.png b/docs/basic-features/imgs/setCompoentAttr.png new file mode 100644 index 0000000000..ce23190d34 Binary files /dev/null and b/docs/basic-features/imgs/setCompoentAttr.png differ diff --git a/docs/basic-features/imgs/setCompoentBaseAttr.png b/docs/basic-features/imgs/setCompoentBaseAttr.png new file mode 100644 index 0000000000..40392bd91a Binary files /dev/null and b/docs/basic-features/imgs/setCompoentBaseAttr.png differ diff --git a/docs/basic-features/imgs/setCompoentStyle.png b/docs/basic-features/imgs/setCompoentStyle.png new file mode 100644 index 0000000000..151e2022cf Binary files /dev/null and b/docs/basic-features/imgs/setCompoentStyle.png differ diff --git a/docs/basic-features/imgs/setStyleHoverNew.gif b/docs/basic-features/imgs/setStyleHoverNew.gif new file mode 100644 index 0000000000..562f082084 Binary files /dev/null and b/docs/basic-features/imgs/setStyleHoverNew.gif differ diff --git a/docs/basic-features/imgs/settingPanelOverview.png b/docs/basic-features/imgs/settingPanelOverview.png new file mode 100644 index 0000000000..3df0be5c5f Binary files /dev/null and b/docs/basic-features/imgs/settingPanelOverview.png differ diff --git a/docs/basic-features/imgs/state1.gif b/docs/basic-features/imgs/state1.gif new file mode 100644 index 0000000000..9740bffbf3 Binary files /dev/null and b/docs/basic-features/imgs/state1.gif differ diff --git a/docs/basic-features/imgs/state2.gif b/docs/basic-features/imgs/state2.gif new file mode 100644 index 0000000000..aee18f6714 Binary files /dev/null and b/docs/basic-features/imgs/state2.gif differ diff --git a/docs/basic-features/imgs/state3.png b/docs/basic-features/imgs/state3.png new file mode 100644 index 0000000000..ae2d1ae802 Binary files /dev/null and b/docs/basic-features/imgs/state3.png differ diff --git a/docs/basic-features/imgs/stylePanelOverview.png b/docs/basic-features/imgs/stylePanelOverview.png new file mode 100644 index 0000000000..fb35afd9a5 Binary files /dev/null and b/docs/basic-features/imgs/stylePanelOverview.png differ diff --git a/docs/basic-features/imgs/styleSettingNew.gif b/docs/basic-features/imgs/styleSettingNew.gif new file mode 100644 index 0000000000..79f87d0b11 Binary files /dev/null and b/docs/basic-features/imgs/styleSettingNew.gif differ diff --git a/docs/basic-features/imgs/styleSettingResult1.png b/docs/basic-features/imgs/styleSettingResult1.png new file mode 100644 index 0000000000..8664e4d747 Binary files /dev/null and b/docs/basic-features/imgs/styleSettingResult1.png differ diff --git a/docs/basic-features/imgs/styleSettingResult2.png b/docs/basic-features/imgs/styleSettingResult2.png new file mode 100644 index 0000000000..512cdfaab5 Binary files /dev/null and b/docs/basic-features/imgs/styleSettingResult2.png differ diff --git a/docs/basic-features/imgs/styleSettingStatic.png b/docs/basic-features/imgs/styleSettingStatic.png new file mode 100644 index 0000000000..07eb435e62 Binary files /dev/null and b/docs/basic-features/imgs/styleSettingStatic.png differ diff --git a/docs/basic-features/imgs/toolbaroverview.png b/docs/basic-features/imgs/toolbaroverview.png new file mode 100644 index 0000000000..44f8645411 Binary files /dev/null and b/docs/basic-features/imgs/toolbaroverview.png differ diff --git a/docs/basic-features/imgs/treeselectOverview.png b/docs/basic-features/imgs/treeselectOverview.png new file mode 100644 index 0000000000..0ae6719918 Binary files /dev/null and b/docs/basic-features/imgs/treeselectOverview.png differ diff --git a/docs/basic-features/inline-style-variable-binding.md b/docs/basic-features/inline-style-variable-binding.md new file mode 100644 index 0000000000..c395b0a494 --- /dev/null +++ b/docs/basic-features/inline-style-variable-binding.md @@ -0,0 +1,32 @@ +# 行内绑定状态变量 + +## 使用说明 + +设计器提供了一种功能,允许使用定义变量来动态计算组件的位置。这些计算结果随后可以直接应用到组件的行内样式style属性中,从而实现动态样式的调整和布局的优化。 + +## 操作步骤 + +1. 添加变量,例如:bgcolor,用来控制背景颜色。 + + **图 1** 添加变量 + ![addVar](./imgs/addVar.png) + +2. 画布中选中组件,在组件属性设置面板选择“样式”。 +3. 单击行内样式的编辑框后的![变量绑定图标](./imgs/icon-code.png)。 +4. 在弹框中进行变量绑定。 + + **图 2** 绑定变量 + ![绑定变量](not-found/绑定变量.png) + +5. 单击“确定”,变量绑定完成。 +6. 通过修改变量,查看组件样式展示效果。 + + **图 3** 修改前样式 + ![modifyStyle](./imgs/modifyStyle.png) + + **图 4** 修改变量 + ![modifyVar](./imgs/modifyVar.png) + + **图 5** 修改后样式 + ![modifyedStyle](./imgs/modifyedStyle.png) + diff --git a/docs/basic-features/internationalization.md b/docs/basic-features/internationalization.md new file mode 100644 index 0000000000..323cc1debd --- /dev/null +++ b/docs/basic-features/internationalization.md @@ -0,0 +1,79 @@ +# 国际化资源管理 + +## 使用说明 + +同一个项目,可能需要同时支持多个语言,设计器提供了中英文切换,在能够一键切换语言,提升开发效率与开发体验。 国际化是应用级别的,在任何一个页面都可以访问。 + +> ![](public_sys-resources/icon-note.gif) **说明:** +> 注意的是国际化只针对画布中的项目,不针对设计器本身。 + +## 添加国际化词条 + +1. 在左侧插件栏中,单击![国际化插件图标](./imgs/icon-i18n.png),展开国际化资源页面。 +2. 单击“新增词条”。 +3. 编辑key,中文和英文内容 + + > ![](public_sys-resources/icon-note.gif) **说明:** + >- 创建时key会自动生成,也可以自定义输入。 + >- key需为唯一值,不可与现有key重复。 + >- 创建后key值不可修改。 + + **图 1** 新增词条 + ![新增词条按钮](./imgs/addWords.png "addWords") + +4. 单击页面空白处,完成国际化词条创建。 + +## 编辑国际化词条 + +1. 在左侧插件栏中,单击![国际化插件图标](./imgs/icon-i18n.png),展开国际化资源页面。 +2. 选择待操作的词条,单击“操作”列的![编辑图标](./imgs/icon-edit.png)。 + + **图 2** 编辑词条 + ![编辑词条](./imgs/editWord.png "editWord") + +3. 重新编辑key,中文和英文内容。 +4. 单击页面空白处,完成国际化词条编辑。 + +## 单个删除国际化词条 + +1. 在左侧插件栏中,单击![国际化插件图标](./imgs/icon-i18n.png),展开国际化资源页面。 +2. 选择待操作的词条,单击“操作”列的![删除图标](./imgs/icon-del.png)。 +3. 在弹框中单击“确定”,完成国际化词条删除。 + + **图 3** 删除词条 + ![删除词条](./imgs/delWord.png "delWord") + +## 批量删除国际化词条 + +1. 在左侧插件栏中,单击![国际化插件图标](./imgs/icon-i18n.png),展开国际化资源页面。 +2. 勾选待操作的词条,单击“批量删除”。 + + **图 4** 批量删除词条 + ![批量删除词条](./imgs/delBatchWord.png "delBatchWord") + +3. 在弹框中单击“确定”,完成国际化词条批量删除。 + +## 复制词条键值 + +1. 在左侧插件栏中,单击![国际化插件图标](./imgs/icon-i18n.png),展开国际化资源页面。 +2. 选择待操作的词条,单击“操作”列的![复制图标](./imgs/icon-copy.png)。 + + 页面显示“复制成功”,完成词条键值复制。 + + **图 5** 复制词条键值 + ![复制词条键值](./imgs/copyKeyValue.png "复制词条键值") + +## 使用国际化词条 + +1. 在左侧插件栏中,单击![物料插件图标](./imgs/icon-add.png),展开物料资产包。 +2. 在物料资产包中选择组件,例如button组件,并拖拽至中心画布中。 +3. 选中组件,在组件属性设置面板选择“属性”。 +4. 选中文案参数旁的![变量绑定图标](./imgs/icon-code.png),进行变量绑定。 +5. 输入变量t\('lowcode.67564435'\),其中lowcode.67564435为词条的key值,可参考[复制词条键值](#复制词条键值)获取。 + + **图 6** 绑定变量 + ![绑定变量](./imgs/bindVariable-25.png "绑定变量-25") + +6. 单击“确定”,变量绑定完成。 +7. 单击顶部工具栏的中英文切换按钮,可进行中英文切换。 + diff --git a/docs/basic-features/intro-to-designer.md b/docs/basic-features/intro-to-designer.md new file mode 100644 index 0000000000..8b3aae0a4c --- /dev/null +++ b/docs/basic-features/intro-to-designer.md @@ -0,0 +1,62 @@ +# 初识设计器 + +> 本节主要简单介绍设计器界面模块 + +## 设计器界面概览 + +![设计器界面示例图](./imgs/platformExpend.png) + +如上图,设计器可以分为顶部工具栏、左侧插件栏、中间画布区、右侧设置面板等几个主要界面模块 + +## 顶部工具栏 + +![顶部工具栏示例图](./imgs/toolbaroverview.png) + +如上图所示,设计器顶部的工具栏从左到右包括: + +- 菜单按钮,点击可以展开菜单,菜单功能包括:前往物料中心、应用预览、应用发布等功能 +- 面包屑(展示当前编辑页面或区块) +- 多终端工具切换(画布宽度切换) +- 当前编辑者 +- 画布清除工具(清空当前画布) +- 保存功能,保存当前页面或区块数据 +- 下载源代码,将当前数据转换并生成代码到本地 +- 预览功能,打开新 Tab 预览当前页面或区块 +- 撤销回退功能,撤销或回退上一步操作 +- 全屏功能,将当前页面全屏(跟网页全屏功能一样) +- 设置功能,点击可展开左侧页面或区块的设置插件,管理当前页面或者区块 +- 画布中英文切换,点击可切换画布中英文,测试国际化能力 + +## 左侧插件栏 + +![插件栏示意图](./imgs/pluginoverview.png) + +如上图所示,插件面板主要有物料插件、大纲树插件、页面管理工具插件、区块管理插件、数据源管理插件、资源管理插件、国际化插件、JS 方法插件、状态管理插件 + +插件点击之后会向右展开对应插件的设置面板 + +## 中心画布 + +![中心画布](./imgs/canvasoverview.png) + +如上图所示,中心画布位于设计器中央,是可视化设计的核心模块,可以在插件栏中的物料面板往中心画布拖入组件,也可以点击画布选中组件,修改组件的属性、样式、绑定事件等等 + +## 右侧设置面板 + +右侧设置面板分为属性设置、样式设置、高级设置等面板 + +- 属性设置,设置组件的属性,比如按钮组件的 size、文案、按钮类型等等组件提供配置的属性 + +![属性设置图示](./imgs/settingPanelOverview.png) +- 样式设置,设置组件的样式,提供直接配置样式,也可以编写 CSS 代码配置样式 + +![样式设置图示](./imgs/stylePanelOverview.png) +- 高级设置,设置组件是否渲染、绑定点击事件、设置组件是否循环渲染等等 + +![高级设置图示](./imgs/eventOverview.png) + +## 底部节点树 + +![底部节点树图示](./imgs/treeselectOverview.png) + +底部节点树展示了从 body 到当前选中节点的层级,点击可切换层级 diff --git a/docs/basic-features/outline-tree.md b/docs/basic-features/outline-tree.md new file mode 100644 index 0000000000..6de4a7024b --- /dev/null +++ b/docs/basic-features/outline-tree.md @@ -0,0 +1,7 @@ +# 查看大纲树 + +在左侧插件栏中,单击![大纲树插件图标](./imgs/icon-tree.png),展开并查看页面大纲树。 + + **图 1** 设置主页 + ![设置主页](not-found/setIndex-20.png) + diff --git a/docs/basic-features/page-and-block-preview.md b/docs/basic-features/page-and-block-preview.md new file mode 100644 index 0000000000..9df1b5937b --- /dev/null +++ b/docs/basic-features/page-and-block-preview.md @@ -0,0 +1,25 @@ +## 页面/区块预览 + +### 前言 + +在一些场景下,设计器的画布并不能使得我们直观的感受到所设计的区块或者页面最终的表现。比如说,当页面上区块和组件应用层次较多,区块之间或者组件之间交互行为较为复杂时,我们在画布上去清晰的感知页面的静态布局以及动态交互很是困难,这时候就需要设计器的**页面/区块预览**能力来为开发提供帮助 + +### 页面/区块预览入口 + +![Alt text](./imgs/preview-btn.png) + +### 示例 + +画布上的页面结构 + +![Alt text](./imgs/preview-pre.png) + +预览页的页面效果 + +![Alt text](./imgs/preview.png) + +页面/区块预览界面除了帮助我们直观的看到整体页面结构以及进行交互动作外,还可以提供其他功能验证 +- 切换设备宽度 +- 国际化语言 +- state状态响应式 +- 表单验证提交 \ No newline at end of file diff --git a/docs/basic-features/page-management.md b/docs/basic-features/page-management.md new file mode 100644 index 0000000000..f4875bcff1 --- /dev/null +++ b/docs/basic-features/page-management.md @@ -0,0 +1,60 @@ +# 页面管理 + +> 页面管理插件可以管理该应用下的全部页面,可以新增页面,可以新增文件夹,以及对页面或者文件的增删改操作 + +## 页面相关概念 + +假如我们有一个前端工程: + +```bash +- project + - views + |_ Index.vue + - Page2.vue + - TodoFolder + |_ Todo.vue +``` + +我们设计器的页面概念就相当于上述工程中的一个页面或者文件夹,每个页面有对应的路由,用户可以根据路由访问对应的页面 + +## 基本操作 + +基本的操作包括页面的增删改 + +### 新增文件夹 + +![新增文件夹](./imgs/addFolder.png) + +文件夹的概念与操作系统中的文件夹概念一致,只需点击新增文件夹按钮,然后填入文件夹名称、路由,点击保存即可完成新增操作 + +### 新增页面 + +![新增页面](./imgs/addPage.png) +点击新增页面按钮,设置最基本的页面名称、路由,点击保存即可完成新增页面操作 + +### 删除页面/文件夹、复制页面 + +在页面列表右侧点击设置按钮,出来编辑面板,可以在右上角的按钮触发删除、复制页面功能 + +![删除或复制页面](./imgs/pagedelOrCopy.png) + +### 页面高级设置 + +除了基本的页面功能,我们还提供了一些相关的高级功能,比如设置主页、配置生命周期、还原页面到某一历史记录等功能 + +#### 设置主页 + +主页就是整个应用的 home 页面,我们可以在页面管理中配置主页(即 path 为 "/" 时渲染的页面) +操作:在主页设置复选框上打钩即可 +![主页设置](./imgs/pageManaIndex.png) + +#### 配置页面生命周期 + +在页面管理中,我们还可以配置页面的生命周期,比如在 Vue3 技术栈中,我们可以配置 onMounted、setUp、onUpdated 等生命周期函数 + +![声明周期配置](./imgs/lifecycle.gif) + +#### 还原页面历史 + +在历史备份列表中,可以点击右侧的页面按钮进行历史的备份或者还原 +![还原页面历史](./imgs/pageManaHistoryRestore.png) diff --git a/docs/basic-features/state-management-and-variable-binding.md b/docs/basic-features/state-management-and-variable-binding.md new file mode 100644 index 0000000000..53cb82c47f --- /dev/null +++ b/docs/basic-features/state-management-and-variable-binding.md @@ -0,0 +1,19 @@ +# 使用状态管理和变量绑定 + +state 是响应式的数据,状态管理面板对 state 的响应式变量进行系统管理,包含添加、删除、搜索、编辑 state + +- 在状态管理面板添加 state 变量。 + +![添加Sate变量](./imgs/state1.gif) + +- 使用添加的 state 变量 +- 在画布中选中需要绑定 state的组件。 +- 在右侧设置面板属性栏中点击代码 icon,选择需要绑定的 state。 + +![使用state](./imgs/state2.gif) + +- 改变state + +我们添加的 state 通常是一个可以随不同状态有不同值的变量,如果想要改变 state,可以在 JS 面板中通过 `this.state.xxx` 获取到 state并且改变之。 + +![改变state](./imgs/state3.png) diff --git a/docs/basic-features/style-settings.md b/docs/basic-features/style-settings.md new file mode 100644 index 0000000000..f53e8a5e15 --- /dev/null +++ b/docs/basic-features/style-settings.md @@ -0,0 +1,169 @@ +# 样式设置 + +> 在页面开发过程中,为了给用户友好的体验和交互能力,提供样式自定义是不可或缺的能力。因此,我们提供了样式面板提供用户修改样式的能力 + +在高代码编辑中,我们通常有两种方式可以对组件写入样式: + +1. 行内样式,比如: + +```html +
+
+``` + +2. 绑定 css 类名,然后在 css 类名中声明规则,比如: + +```vue + + + +``` + +在TinyEngine设计器中,我们同样提供了这两种声明样式的方式: + +## 通过样式面板配置样式 + +在设计器右侧的面板中,我们提供了样式面板,可以对当前选中组件进行样式的设置。 + +操作步骤如下: + +1. 选中组件 +2. 打开右侧样式面板 +3. 在样式面板设置布局、样式、间距...等等样式 +4. 设置完之后,设计器会自动将样式写入到类名样式中,并绑定类名到当前组件的属性中(假如没有类名,此时会自动生成随机类名) + +![通过样式面板设置样式](./imgs/styleSettingStatic.png) + +![通过样式面板配置样式](./imgs/styleSettingNew.gif) + +如上动图设置样式成功之后,样式面板会自动做以下操作: + +1. 如果当前样式选择器还没有选中任何一个类名或者 ID,会自动生成随机类名 +2. 将用户在样式面板设置的样式写入类名规则中 +3. 将样式选择器生成或者选中的类名绑定到当前组件当中 + +![样式面板设置样式结果1](./imgs/styleSettingResult1.png) +![样式面板设置样式结果2](./imgs/styleSettingResult2.png) + +## 直接编写样式代码 + +样式面板提供的直接配置的样式满足了大部分的基础样式需求,但是,如果还是不能满足我们的需求,我们还提供了直接编写样式代码的方式来配置样式。 + +直接编写样式代码的方式包括 + +### 编写行内样式 + +等效于直接在 html 标签 style 属性里直接声明样式,权重高,用于覆盖样式 + +![设置行内样式](./imgs/inlineStyleSettingNew.gif) + +如上动图设置成功之后,相当于做了以下操作:组件 schema 属性中,props 属性的 style 绑定了我们手动修改的样式 + +![设置行内样式结果](./imgs/inlineSettingResultNew.png) + +### 编写全局样式 + +点击编写全局样式,可以直接声明多条CSS样式或其他媒体查询的样式,然后通过组件的 class 或者 id 进行绑定 + +![通过编写代码设置样式](./imgs/editGlobalStyleNew.gif) + +## 高级操作 + +在样式面板配置样式的时候,如果没有生成或者绑定类名,我们会自动生成类名进行绑定。但是对于专业的开发者来说,可能还需要一些高级特性做支持。所以,我们增加了样式选择器,提供部分高级操作。 + +### 类名新增 + +假如我们选中了一个组件,但是此时还没有自动生成类名,那么此时,我们可以点击输入框手动输入类名。然后继续编辑样式面板的样式。 + +此时,组件会自动绑定我们输入的类名,然后将我们在样式面板编辑的样式生成代码,写入到全局样式中。 + +![类名新增](./imgs/setClassNameStatic.png) + +![类名新增](./imgs/setClassNameNew.gif) + +### 类名修改 + +假如我们想要修改已有的类名,则可以通过以下步骤修改类名: + +- 直接点击类名或者点击类名旁边的修改按钮(笔的 icon) +- 点击后,会自动 focus 到输入框,此时可以编辑类名 +- 通过回车或者失焦的方式,即可以成功修改类名 + +**注意此时类名修改范围**: + +- 当前组件绑定的类名会被修改 +- 全局样式中同类名会被修改成新类名 +- 其他组件绑定的同类名不会被修改 + +动图演示: + +![类名修改动图](./imgs/editClassNameNew.gif) +![类名修改示意图](./imgs/editClassNameStatic.png) + +### 类名删除 + +如果我们想删除当前类名,可以直接通过类名旁边的删除按钮进行删除。 + +删除范围:当前组件属性不再绑定该类名(也就是全局样式仍保留类名与样式,防止其他组件仍在使用该类名) + +动图演示: + +![类名删除](./imgs/deleteClassNameNew.gif) + +### 已有类名选择 + +除了自动生成和手动新增类名之外,我们也可以通过输入框的下拉框来选择已有的类名。比如我们已经有类名 .test1、.test2、.test3 等几个类名,那么,我们可以通过下拉框选择切换编辑对应的类名的样式。 + +动图演示: + +![已有类名选择](./imgs/selectClassNameNew.gif) + +### 使用样式选择器搭配样式面板编辑 hover、focused、pressed、disabled 等状态的样式 + +在样式选择器右侧,我们还提供了一个状态选择器的下拉框。可以选择 hover、focused、pressed、disabled 等状态,选择之后,我们此时编辑样式面板,就是相当于在编辑该类名对应状态的样式。 + +从全局样式面板中可以看到,等效于直接编辑一下样式: + +```css +.test1:hover{ + /** 这里会注入样式面板编辑的样式 */ +} +``` + +动图演示: + +![编辑 hover 状态](./imgs/setStyleHoverNew.gif) + +### 行内样式绑定状态变量 + +在实际业务场景中,我们可能会有以下场景:使用JavaScript 变量动态计算位置,然后传入行内样式 style 中。 + +```vue3 + +``` + +设计器最近(2023.12)也支持了对应的场景特性 + +动图演示:行内样式右侧有绑定变量的按钮,我们可以点击编辑绑定变量按钮的方式将动态变量绑定到 style 行内样式。 + +![行内样式绑定变量](./imgs/inlineStyleBindVar.gif) diff --git a/docs/basic-features/using-components.md b/docs/basic-features/using-components.md new file mode 100644 index 0000000000..531defe6fa --- /dev/null +++ b/docs/basic-features/using-components.md @@ -0,0 +1,72 @@ +# 使用组件 + +## 概述 + +组件是低代码开发的构建块,就像积木一样。它们是可重复使用的小部件,可以轻松搭建和管理网页。举个例子,按钮、导航栏和表单都可以是组件。这有助于您快速搭建网站。 + +下面介绍如何在低代码中使用组件,实现页面快速搭建。 + +## 从物料面板中添加组件 + +1. 在左侧插件栏中,单击![物料插件图标](./imgs/icon-add.png),展开物料资产包。 +2. 在物料资产包中选择组件,并拖拽至中心画布中。 + +![拖入组件](./imgs/dragComponent.gif) + +![addComponent-13](./imgs/addComponent-13.png) + +## 从画布中直接添加组件 + +对于复杂的页面,嵌套层级可能很深,直接拖拽并不能很好的拖入到指定的层级中,所以,设计器提供在画布中右键精准添加组件的能力。 + +1. 画布中选中组件,然后单击鼠标右键。 +2. 选择“插入“,可以向前、向后、向中间位置进行插入(相对于当前选中组件而言)。 + + **图 1** 插入组件 + ![insertComponent](./imgs/insertComponent.gif) + + **图 2** 选择插入位置 + ![inserPosition](./imgs/inserPosition.png) + +3. 弹框中选择待插入的组件,即可插入指定位置。 + + **图 3** 选择组件 + ![choseComponent](./imgs/choseComponent.png) + +## 选中组件 + +添加了组件之后,您可以选中组件,对组件进行修改、删除、移动等操作。 + +以下为选中组件的相关方法: + +- 从画布中直接单击组件选中组件 + + **图 4** 直接单击选中组件 + ![choseClickCompontes](./imgs/choseClickCompontes.png) + +- 在左侧大纲树插件中,以树的形式展示了当前页面中所有的组件,单击树节点选中画布中的组件 + + **图 5** 单击树节点选中组件 + ![clickNode](./imgs/clickNode.png) + +- 底部节点树展示了从根节点到当前选中组件的层级节点,单击底部的节点树的某一个节点,选中父组件 + + **图 6** 展示当前选中组件的层级节点 + ![choseComponentID](./imgs/choseComponentID.png) + + **图 7** 单击节点树的父点,选中父组件 + ![selectParentID](./imgs/selectParentID.png) + +## 编辑组件 + +选中了组件之后,您还可以设置组件的属性、样式和绑定事件,同时可以对组件进行上移、下移、复制和删除等操作。 + +**图 8** 组件上移 +![componentUp](./imgs/componentUp.png) + +**图 9** 组件下移 +![componentDown](./imgs/componentDown.png) + +**图 10** 复制组件 +![copyComponent](./imgs/copyComponent.png) + diff --git a/docs/catalog.json b/docs/catalog.json new file mode 100644 index 0000000000..2e73140f48 --- /dev/null +++ b/docs/catalog.json @@ -0,0 +1,211 @@ +{ + "chapters": [ + { + "title": "使用指南", + "type": "engine", + "sections": [ + { + "title": "新手指引", + "name": "getting-started", + "articles": [ + { "title": "简介", "name": "introduction.md" }, + { "title": "快速上手", "name": "quick-start.md" } + ] + }, + { + "title": "基础功能", + "name": "basic-features", + "articles": [ + { "title": "初识设计器", "name": "intro-to-designer.md" }, + { "title": "设计前端应用流程", "name": "frontend-application-flow.md" }, + { "title": "设计器界面模块简介", "name": "designer-ui-modules.md" }, + { "title": "页面管理", "name": "page-management.md" }, + { "title": "使用组件", "name": "using-components.md" }, + { "title": "样式设置", "name": "style-settings.md" }, + { "title": "使用状态管理和变量绑定", "name": "state-management-and-variable-binding.md" }, + { "title": "行内样式绑定状态变量", "name": "inline-style-variable-binding.md" }, + { "title": "查看大纲树", "name": "outline-tree.md" }, + { "title": "国际化", "name": "internationalization.md" }, + { "title": "页面和区块预览", "name": "page-and-block-preview.md" } + ] + }, + { + "title": "进阶功能", + "name": "advanced-features", + "articles": [ + { "title": "区块管理", "name": "block-management.md" }, + { "title": "使用JS面板和事件绑定", "name": "js-panel-and-event-binding.md" }, + { "title": "使用工具类方法 utils", "name": "using-utils-methods.md" }, + { "title": "高级面板设置", "name": "advanced-panel-settings.md" }, + { "title": "如何使用插槽", "name": "how-to-use-slots.md" }, + { "title": "循环渲染", "name": "loop-rendering.md" }, + { "title": "条件渲染", "name": "conditional-rendering.md" }, + { "title": "集成ChatGPT搭建简单页面能力", "name": "integrating-chatgpt-for-simple-pages.md" }, + { "title": "数据源和Collection—远程字段", "name": "data-source-and-collection-remote-fields.md" }, + { "title": "数据源和Collection—mock数据", "name": "data-source-and-collection-mock-data.md" }, + { "title": "数据源和Collection—使用数据源", "name": "data-source-and-collection-usage.md" } + ] + }, + { + "title": "教程", + "name": "tutorials", + "articles": [ + { "title": "从零搭建一个页面", "name": "build-a-page-from-scratch.md" }, + { "title": "第一期2023.10.27", "name": "issue-1-2023.10.27.md" } + ] + } + ] + }, + { + "title": "平台开发指南", + "type": "dev", + "sections": [ + { + "title": "开始", + "name": "development-getting-started", + "articles": [ + { "title": "简介", "name": "dev-intro.md" }, + { "title": "快速上手", "name": "dev-quick-start.md" }, + { "title": "前后端启动联调(Java服务端)", "name": "debugging-of-java-backend.md" } + ] + }, + { + "title": "解决方案", + "name": "solutions", + "articles": [ + { "title": "Java服务端部署", "name": "server-deployment-solution-java.md" }, + { "title": "Node.js服务端部署", "name": "server-deployment-solution.md" }, + { "title": "区块发布方案(Node.js服务端)", "name": "block-release-solution.md" }, + { "title": "区块局域网发布方案(Node.js服务端)", "name": "block-lan-release-solution.md" }, + { "title": "设计器中引入第三方组件库", "name": "third-party-library-in-designer.md" }, + { "title": "物料同步方案", "name": "material-sync-solution.md" } + ] + }, + { + "title": "扩展能力介绍", + "name": "extension-capabilities-overview", + "articles": [ + { "title": "新架构介绍", "name": "new-architecture.md" }, + { "title": "注册表", "name": "registry.md" }, + { "title": "元服务和元应用", "name": "meta-services-and-meta-apps.md" } + ] + }, + { + "title": "扩展能力使用教程", + "name": "extension-capabilities-tutorial", + "articles": [ + { "title": "如何开发插件", "name": "how-to-develop-plugins.md" }, + { + "title": "出码功能", + "name": "code-output-function", + "articles": [ + { "title": "出码功能简介与使用", "name": "code-output-overview-and-usage.md" }, + { "title": "如何自定义出码", "name": "how-to-customize-code-output.md" }, + { "title": "如何自定义出码插件", "name": "how-to-customize-code-output-plugins.md" }, + { "title": "自定义页面出码插件", "name": "custom-page-code-output-plugin.md" }, + { "title": "官方出码能力API", "name": "official-code-output-api.md" } + ] + }, + { "title": "定制插件UI", "name": "customize-plugin-ui.md" }, + { "title": "定制元服务逻辑", "name": "customize-meta-service-logic.md" }, + { "title": "开发设置器组件", "name": "develop-configurator-components.md" }, + { "title": "AI插件使用前配置", "name": "ai-plugin-configuration.md" } + ] + }, + { + "title": "API", + "name": "api", + "articles": [ + { "title": "API总览", "name": "api-overview.md" }, + { + "title": "前端API", + "name": "frontend-api", + "articles": [ + { "title": "主包API", "name": "main-package-api.md" }, + { "title": "画布API", "name": "canvas-api.md" }, + { "title": "全局布局API", "name": "global-layout-api.md" }, + { "title": "物料API", "name": "material-api.md" }, + { "title": "设置面板API", "name": "settings-panel-api.md" } + ] + }, + { + "title": "后端API", + "name": "backend-api", + "articles": [ + { "title": "AI功能接口", "name": "ai-function-api.md" }, + { "title": "应用管理", "name": "app-management.md" }, + { "title": "区块分类", "name": "block-categories.md" }, + { "title": "应用工具类管理", "name": "app-utility-management.md" }, + { "title": "区块管理", "name": "block-management-api.md" }, + { "title": "数据源管理", "name": "data-source-management.md" }, + { "title": "DSL代码生成", "name": "dsl-code-generation.md" }, + { "title": "物料中心", "name": "material-center.md" }, + { "title": "页面管理", "name": "page-management-api.md" }, + { "title": "APP服务", "name": "app-services.md" } + ] + } + ] + }, + { + "title": "实战案例", + "name": "practical-cases", + "articles": [ + { "title": "PDM元数据审批电子流", "name": "pdm-metadata-approval-workflow.md" }, + { "title": "图元编排设计器", "name": "graphical-element-arrangement-designer.md" }, + { "title": "SMB轻量应用服务", "name": "smb-lightweight-application-service.md" } + ] + } + ] + }, + { + "title": "网站文档", + "type": "portal", + "sections": [ + { + "title": "生态中心", + "name": "ecosystem-center", + "articles": [ + { "title": "介绍", "name": "ecosystem-intro.md" }, + { "title": "如何导入组件库", "name": "how-to-import-library.md" }, + { "title": "如何发布区块", "name": "how-to-publish-block.md" }, + { "title": "发布其他生态", "name": "publish-other-ecosystems.md" } + ] + }, + { + "title": "关于应用", + "name": "about-applications", + "articles": [ + { + "title": "创建应用(创建空白应用、从模板创建应用)", + "name": "create-application-blank-or-template.md" + }, + { "title": "开发应用", "name": "develop-application.md" } + ] + }, + { + "title": "关于物料", + "name": "about-materials", + "articles": [ + { "title": "介绍", "name": "materials-intro.md" }, + { "title": "创建物料资产包", "name": "create-material-asset-package.md" }, + { "title": "添加组件库和区块", "name": "add-library-and-blocks.md" }, + { "title": "构建物料资产包", "name": "build-material-asset-package.md" } + ] + }, + { + "title": "关于设计器", + "name": "about-designer", + "articles": [ + { "title": "介绍", "name": "designer-intro.md" }, + { "title": "创建设计器", "name": "create-designer.md" }, + { + "title": "定制物料资产包、主题、DSL、工具栏和插件栏", + "name": "customize-material-package-themes-dsl-toolbar-plugins.md" + }, + { "title": "定制设计器", "name": "customize-designer.md" } + ] + } + ] + } + ] +} diff --git a/docs/development-getting-started/debugging-of-java-backend.md b/docs/development-getting-started/debugging-of-java-backend.md new file mode 100644 index 0000000000..6f02a893f8 --- /dev/null +++ b/docs/development-getting-started/debugging-of-java-backend.md @@ -0,0 +1,97 @@ +# 前后端代码本地启动联调 + +本篇主要介绍在本地启动TinyEngine前端并对接本地Java版本后端方式(默认为前端使用mockServer方式)进行开发联调。 + +Tips: +- 对接Node.js版本服务端与Java版本服务端过程类似。另外Node.js版本后续不再进行新特性开发,只维护基础功能,建议使用Java版本服务端。 +- 本篇以Clone前端源码方式启动为例,使用CLI创建新设计器启动前端方式对接后端与之类似。 + +## 启动前的准备 + +- clone tiny-engine:[代码仓库](https://github.com/opentiny/tiny-engine/tree/refactor/develop) +- clone tiny-engine-backend-java:[代码仓库](https://github.com/opentiny/tiny-engine-backend-java) + +## 启动服务 + +### 1.前端启动 + +- 把前端项目工程导入 vscode 后下载依赖,进入项目根目录下执行  `pnpm i` + +- 在项目根目录下执行构建`pnpm run setup` + +- 修改文件配置 + +修改`tiny-engine/designer-demo/env/.env.development`中的 VITE_ORIGIN 变量为自己本地的服务端地址端口 + +![](./imgs/java-debugging-image33.png) + +修改`tiny-engine/designer-demo/engine.config.js`中的 material 获取物料组件 + +![](./imgs/java-debugging-image34.png) + +- 在项目根目录下执行启动`pnpm run serve:frontend` + +出现如下图所示表示启动成功,启动成功后浏览器会自动打开设计器页面 + +![](./imgs/java-debugging-image35.png) + +### 2.后端启动 + +#### 新建数据库 + +**步骤 1 鼠标右键选择“新建连接”->“MySQL”->“下一步”->输入连接名称、用户名、密码->“测试连接”->“确定”** + +如下图所示 + +![](./imgs/java-debugging-image36.png) + +**步骤二 在步骤一新建的连接上右键选择“新建数据库”->输入数据库名称** + +如下图所示 + +![](./imgs/java-debugging-image37.png) + +#### 执行脚本文件 + +**步骤一   在按照上述操作后的新建的数据库名称上右键选择“运行 SQL 文件”->在文件项选择下面两个 SQL 文件导入运行** + +如下图所示 + +![](./imgs/java-debugging-image38.png) + +执行以下 SQL 文件去创建设计器涉及的表,目录如下: + +`tiny-engine-backend-java/app/src/main/resources/sql/mysql/create_all_tables_ddl_v1.mysql.sql` + +执行以下 SQL 文件去添加表的基础数据,目录如下: + +`tiny-engine-backend-java/app/src/main/resources/sql/mysql/init_data_for_test.sql` + +#### 修改数据库等相关的配置项 + +在`tiny-engine-backend-java/app/src/main/resources/application-dev.yml`文件中设置自己的端口号 port(和前端`tiny-engine/designer-demo/env/.env.development`文件中的 VITE_ORIGIN 变量中的端口号保持一致)、还有数据库连接信息(用户名 username、密码 password、URL) + +![](./imgs/java-debugging-image39.png) + +#### 启动后端项目 + +步骤一   先安装 maven,若没有从[Maven 官网](https://maven.apache.org/download.cgi)下载并解压,Maven 3.5 以上即可,并配置环境变量 + +步骤二 在项目根目录执行构建打包`mvn clean package` + +步骤三 在项目根目录执行启动`java -jar app/target/tiny-engine-app-1.0-SNAPSHOT.jar` + +按照以上步骤执行前后端操作,即能成功启动本地前后端关联进行调试 + +![](./imgs/java-debugging-image40.png) + +前后端启动成功后页面会自动弹出,如下可看连接数据库数据接口调通能返回正常数据 + +![](./imgs/java-debugging-image41.png) + +三、swagger 访问链接路径: +`localhost:9091/swagger-ui.html` + +**可详细查看接口 api** + +![](./imgs/java-debugging-image42.png) diff --git a/docs/development-getting-started/dev-intro.md b/docs/development-getting-started/dev-intro.md new file mode 100644 index 0000000000..6d6905c5ad --- /dev/null +++ b/docs/development-getting-started/dev-intro.md @@ -0,0 +1,49 @@ +# 简介 + +## TinyEngine 低代码引擎 + +TinyEngine 是开源的低代码引擎,使能开发者定制低代码平台。它是低代码平台的底座,提供可视化搭建页面等基础能力,既可以通过线上搭配组合,也可以通过下载源码进行二次开发,实时定制出自己的低代码平台。 + +## 设计理念 + +TinyEngine 的设计理念是通过简化复杂的开发过程,使更多的企业或组织用户能够轻松创建高效、功能丰富的低代码平台。它采用模块化设计,开发者可以通过模块的配置、替换、覆盖来构建符合企业组织理念的的低代码平台,打造出专业级的企业应用程序生成器。 + +## 功能特性 + +- 跨端跨框架前端组件 +- 支持在线实时构建、支持二次开发或被集成 +- 直接生成可部署的源码,运行时无需引擎支撑 +- 允许接入第三方组件、允许定制扩展插件 +- 支持高代码与低代码,混合开发部署应用 +- 平台接入 AI 大模型能力,辅助开发者构建应用 + +## 应用场景 + +TinyEngine 适用于各种类型的企业和组织,包括中小型企业、非营利组织以及大型企业。它可以用于开发多种类型的应用程序,如内部工具、客户关系管理系统(CRM)、企业资源规划系统(ERP)、电子商务平台等。 + +通过物料的导入、画布和出码的定制,TinyEngine可以定制化成企业和组织内部专用的页面和应用生成平台。它具备强大的扩展性,开放的协议接口,使得定制化更加灵活,能覆盖大部分低代码编排场景。 + +## 基于TinyEngine定制低代码平台案例 + +1) 图元编排 +完备的画布拖拽绘图核心能力,灵活的属性配置面板,支持领域定制物料,轻松定制强大的图元编排设计器。 + +2) 流程编排 +一键成型的流程模板,丰富灵活的流程组件,高效快速完成流程审批页面的开发。提供强大的流程编排设计器。 + +3) 页面编排 +拥有丰富的图表组件,提供多种页面布局模式,轻松拖拽区块即可生成各种页面结构,同时支持移动端的屏幕编排。 + +## 社区贡献 + +作为一个开源项目,TinyEngine 鼓励开发者社区的贡献。用户不仅可以使用现有的功能和组件,还可以开发和共享自己的组件,丰富平台的生态系统。这种社区驱动的发展模式,不仅加速了功能的迭代,也提高了平台的可用性和可靠性。 + +## 未来发展 + +随着低代码平台的普及,TinyEngine 将不断优化和扩展其功能。未来,TinyEngine 可能会集成更多的人工智能和机器学习功能,使得应用程序更加智能化和自动化。同时,团队将继续提升用户体验,确保平台的易用性和灵活性。 + + + + + + diff --git a/docs/development-getting-started/dev-quick-start.md b/docs/development-getting-started/dev-quick-start.md new file mode 100644 index 0000000000..ca05663012 --- /dev/null +++ b/docs/development-getting-started/dev-quick-start.md @@ -0,0 +1,157 @@ +# 快速上手 + +本篇会讲解两种上手模式:一种是使用Cli工具快速搭建本地项目进行低代码平台开发,另外一种是下载/克隆源码,直接在源码上进行开发。 + +## 一、环境准备 + +在开始上手之前,先确保我们的开发环境以及⼯具齐全: + +- Node.js v18+版本 +- pnpm 包管理⼯具 +- 前端项目代码编辑器 +- git 代码版本管理⼯具 +- chrome浏览器 110+ 版本 +- 以及其他必要的开发前端开发环境、⼯具等。 + + + +## 二、Tiny Engine CLI + + TinyEngine提供了CLI⼯具⽅便⽤户⼆次开发,通过CLI,⼀⾏命令即可基于TinyEngine 创建出全新的低代码项⽬、低代码插件项⽬,未来还会陆续增加创建设置器插件,创建新主 题,新布局,新物料包等能⼒。 + +### 2.1 一行命令创建自己的专属低代码设计器 + + +#### 2.1.1 创建低代码设计器 + + +执行engine-cli create,选择platform以创建一个新的设计器 + +```sh +npx @opentiny/tiny-engine-cli@latest create +``` + +执行后首次会提示是否安装`@opentiny/tiny-engine-cli`,输入“Y”并回车 + +之后会提示选择要创建类型,选择platform之后,输入设计器名称,如:lowcode-designer,即可完成新设计器项目的创建。 + +查看当前文件目录,看发现已经创建出了 lowcode-designer 代码目录。 + +![lowcode-designer](./imgs/tiny-engine-cli.png) + +#### 2.1.2 启动低代码设计器 + +执行下面命令安装依赖并启动项目: + +```shell +# 安装依赖 +pnpm i + +# 启动项目 +pnpm dev +``` + +启动完项目之后,我们应该能看到浏览器打开的默认的低代码设计器: + +![打开默认设计器](./imgs/tiny-engine-cli-open.png) + + + +### 2.2 通过开发插件扩展设计器新功能 + +#### 2.2.1 一行命令创建新插件 + +另起一个终端,在当前目录下,输入下面命令,选择创建plugin类型,创建一个新的插件 + +```shell +npx @opentiny/tiny-engine-cli@latest create +``` + +![cli-create-plugin](./imgs/cli-create-plugin.png) + +输入插件名称:demo-plugin + +之后就可以在demo-plugin目录看到新创建的插件,进去该目录安装依赖: + +```shell +cd demo-plugin && npm install +``` + +#### 2.2.2 将插件接入设计器 + +使用VS Code打开设计器项目,修改registry.js + +```diff +import { Breadcrumb, Fullscreen, /* ... */, GenerateCodeService } from '@opentiny/tiny-engine' +import engineConfig from './engine.config' +++ import DemoPlugin from './demo-plugin' + +export default { + // ... +-- plugins: [Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, State, Schema, Help, Robot], +++ plugins: [DemoPlugin, Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, State, Schema, Help, Robot], + dsls: [{ id: 'engine.dsls.dslvue' }], + settings: [Props, Styles, Events], + canvas: Canvas +} + +``` + +#### 2.2.3 开发调试插件 + +重新打开项目页面,可以看到侧边栏多了一个新的插件: + +![cli-plugin-open](./imgs/cli-plugin-open.png) + +修改插件代码,设计器界面也会实时刷新。 + +之后可以尝试完成以下功能: + +- 为插件实现一个“添加按钮”,点击按钮展开插件二级页面 +- 在二级面板中添加一个输入框,并实现保存功能,点击保存按钮将输入框内容显示到一级面板中 + +如此即完成了一个简单的TinyEngine侧边栏插件开发全流程。 + +## 三、源码开发 +虽然不推荐此方案,但是 TinyEngine 2.0版本仍然提供了源码开发的模式给开发者使用。具体使用步骤如下: + +### 3.1 克隆或下载源码 + +前往[Tiny Engine github](https://github.com/opentiny/tiny-engine/tree/v2.0.0) 地址,选择分支为:`refactor/develop`,或者选择Tags为 v2.0.0或者其他2.0版本,克隆或下载源码。 + +克隆下来可以看到我们的目录结构如下 + +``` +... +├─ designer-demo # 此处为高度可定制化的低代码平台,即用户自己的低代码设计器 +│ ├─ env +│ ├─ public +│ ├─ src +│ ├─ engine.config.js +│ ├─ index.html +│ ├─ package.json +│ ├─ preview.html +│ ├─ registry.js # 用户注册表 +│ ├─ vite.config.js +├─ pnpm-workspace.yaml +├─ package.json +├─ README.md +└─ README.zh-CN.md +... +``` + +### 3.2 安装启动低代码设计器 + +执行下面命令安装依赖并启动项目: + +```shell +# 安装依赖 +pnpm i + +# 启动用户的低代码设计器 +pnpm dev:demo +``` + +启动完项目之后,我们应该能看到浏览器打开的默认的低代码设计器: + +![打开默认设计器](./imgs/tiny-engine-cli-open.png) diff --git a/docs/development-getting-started/imgs/cli-create-plugin.png b/docs/development-getting-started/imgs/cli-create-plugin.png new file mode 100644 index 0000000000..d12f04c4a4 Binary files /dev/null and b/docs/development-getting-started/imgs/cli-create-plugin.png differ diff --git a/docs/development-getting-started/imgs/cli-plugin-open.png b/docs/development-getting-started/imgs/cli-plugin-open.png new file mode 100644 index 0000000000..444c3ef6bb Binary files /dev/null and b/docs/development-getting-started/imgs/cli-plugin-open.png differ diff --git a/docs/development-getting-started/imgs/java-debugging-image33.png b/docs/development-getting-started/imgs/java-debugging-image33.png new file mode 100644 index 0000000000..f41a019662 Binary files /dev/null and b/docs/development-getting-started/imgs/java-debugging-image33.png differ diff --git a/docs/development-getting-started/imgs/java-debugging-image34.png b/docs/development-getting-started/imgs/java-debugging-image34.png new file mode 100644 index 0000000000..d56e210a60 Binary files /dev/null and b/docs/development-getting-started/imgs/java-debugging-image34.png differ diff --git a/docs/development-getting-started/imgs/java-debugging-image35.png b/docs/development-getting-started/imgs/java-debugging-image35.png new file mode 100644 index 0000000000..09c8168ebf Binary files /dev/null and b/docs/development-getting-started/imgs/java-debugging-image35.png differ diff --git a/docs/development-getting-started/imgs/java-debugging-image36.png b/docs/development-getting-started/imgs/java-debugging-image36.png new file mode 100644 index 0000000000..83dfe84e10 Binary files /dev/null and b/docs/development-getting-started/imgs/java-debugging-image36.png differ diff --git a/docs/development-getting-started/imgs/java-debugging-image37.png b/docs/development-getting-started/imgs/java-debugging-image37.png new file mode 100644 index 0000000000..1d5df58b2f Binary files /dev/null and b/docs/development-getting-started/imgs/java-debugging-image37.png differ diff --git a/docs/development-getting-started/imgs/java-debugging-image38.png b/docs/development-getting-started/imgs/java-debugging-image38.png new file mode 100644 index 0000000000..a122612df1 Binary files /dev/null and b/docs/development-getting-started/imgs/java-debugging-image38.png differ diff --git a/docs/development-getting-started/imgs/java-debugging-image39.png b/docs/development-getting-started/imgs/java-debugging-image39.png new file mode 100644 index 0000000000..45fda9e510 Binary files /dev/null and b/docs/development-getting-started/imgs/java-debugging-image39.png differ diff --git a/docs/development-getting-started/imgs/java-debugging-image40.png b/docs/development-getting-started/imgs/java-debugging-image40.png new file mode 100644 index 0000000000..e8be63bffc Binary files /dev/null and b/docs/development-getting-started/imgs/java-debugging-image40.png differ diff --git a/docs/development-getting-started/imgs/java-debugging-image41.png b/docs/development-getting-started/imgs/java-debugging-image41.png new file mode 100644 index 0000000000..64eacf20cf Binary files /dev/null and b/docs/development-getting-started/imgs/java-debugging-image41.png differ diff --git a/docs/development-getting-started/imgs/java-debugging-image42.png b/docs/development-getting-started/imgs/java-debugging-image42.png new file mode 100644 index 0000000000..50f4f1ca06 Binary files /dev/null and b/docs/development-getting-started/imgs/java-debugging-image42.png differ diff --git a/docs/development-getting-started/imgs/tiny-engine-cli-open.png b/docs/development-getting-started/imgs/tiny-engine-cli-open.png new file mode 100644 index 0000000000..86a18cd3b0 Binary files /dev/null and b/docs/development-getting-started/imgs/tiny-engine-cli-open.png differ diff --git a/docs/development-getting-started/imgs/tiny-engine-cli.png b/docs/development-getting-started/imgs/tiny-engine-cli.png new file mode 100644 index 0000000000..28d98ded81 Binary files /dev/null and b/docs/development-getting-started/imgs/tiny-engine-cli.png differ diff --git a/docs/ecosystem-center/ecosystem-intro.md b/docs/ecosystem-center/ecosystem-intro.md new file mode 100644 index 0000000000..a0516b1968 --- /dev/null +++ b/docs/ecosystem-center/ecosystem-intro.md @@ -0,0 +1,10 @@ +## 生态中心概述 + +生态中心包含了创建可视化设计器的重要组成部分,包括物料生态、插件生态、工具栏生态、主题生态和 DSL 生态,如下图所示: + +![生态中心](./imgs/ecology1.png) + +物料是可视化页面搭建的原料,按照粒度可分为组件和区块,物料包时组件与区块的集合。 +工具栏与插件是在可视化搭建时用到的功能,例如撤销、恢复、保存等工具,数据源、国际化等插件。 +主题决定了设计器的 UI 风格。DSL 是页面 Schema 生成源代码的能力。 +官方提供核心的组件、区块、物料包、主题、插件、工具、DSL 供用户使用,未来将支持接入第三方组件库以及支持用户自己开发生态。 \ No newline at end of file diff --git a/docs/ecosystem-center/how-to-import-library.md b/docs/ecosystem-center/how-to-import-library.md new file mode 100644 index 0000000000..f9bf699ac2 --- /dev/null +++ b/docs/ecosystem-center/how-to-import-library.md @@ -0,0 +1,76 @@ +# 如何导入组件库 + +## 介绍 + +组件是页面搭建最小的可复用单元,组件库是一系列已经封装好的可复用组件的集合。通过导入第三方组件库,可以利用已经开发好的功能,无需从头开始编写,大大节省了开发时间。同时,这些组件通常经过优化,具有较高的性能和可扩展性。 + +## 导入组件库 + +### 录入组件库基本信息 + +![组件库信息](./imgs/componentLibInfo.png) + +| 字段名称 | 描述 | +| ------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| 组件库名称 | 填写组件库名称,用于列表展示和搜索。 | +| npm 包名 | 发布到 npm 仓库中的组件库包名,可在 package.json 文件中查看 name 字段的值。 | +| 版本号 | 已发布的版本号。符合软件版本号规范。 | +| 技术栈 | 组件库依赖的 JavaScript 框架。 | +| JS 文件 CDN | 必填,[ESModule 格式](https://tc39.es/ecma262/#sec-modules)的 JS 文件 CDN 地址,如果地址错误或文件不可用将导致画布无法渲染组件。 | +| CSS 文件 CDN | 样式文件 CDN 地址。 | +| 组件库描述 | 关于组件库的描述信息,会在组件列表中展示。 | +| 缩略图地址 | 组件库列表中展示的图片。 | +| 公开范围 | 可选择的权限范围。私有,只能用户自己使用和编辑;公开,所有用户都可以使用;半公开,仅勾选的组织内成员可以使用。 | +| 标识官方物料 | 管理员可选,组件库列表中该物料会携带“官方”标识 | +| 标识默认物料 | 管理员可选,在构建物料包时,会默认勾选该组件库。 | + +### 组件配置 + +为了充分使用组件的功能,需要根据组件协议填写每个字段,以 TinyInput 为例: + +#### 基本信息 + +![基本信息](./imgs/componentConfigBase.png) + +| 字段名称 | 描述 | +| ----------- | -------------------------------------------------------------------------------------- | +| 组件 ID | 决定组件的使用方式 | +| 组件名称 | 设计器物料面板中组件显示的名称 | +| 图标 | 设计器物料面板中组件显示的图标 | +| schema 片段 | [决定组件在画布上的显示效果](./imgs/componentConfigSchema.png) | +| 组件属性 | 包含属性、事件、插槽,对应设计器中右侧属性面板可配置的属性、插槽及高级面板中的事件配置 | + +#### 高级属性 + +![高级属性](./imgs/componentConfigTec.png) + +| 字段名称 | 描述 | +| ------------------ | ----------------------------------------------------------------- | +| 导出组件名 | 该组件从组件库中导出时的命名,如 TinyInput 导出时命名为 Input | +| 研发模式 | 组件研发模式,proCode/lowcode。保留字段,暂未用到。 | +| 关键词 | 保留字段,暂未用到。 | +| 是否循环 | 设计器高级配置中是否打开循环渲染。 | +| 是否显示 | 设计器高级配置中是否打开是否渲染。 | +| 样式 | 是否显示样式面板 | +| 是否为容器 | 组件是否为容器组件,如布局组件为容器组件 | +| 是否带弹出层 | 组件是否带有弹出层,如 TinyDialogBox 组件带有弹出层 | +| 是否带悬浮层 | 组件是否带浮层,如 TinyTooltip 组件带有悬浮层 | +| 子节点类型白名单 | 一些组件需要组合使用,如 TinyForm 组件的子节点只能时 TinyFormItem | +| 父节点类型白名单 | 一些组件需要组合使用,如 TinyForm 组件的子节点只能时 TinyFormItem | +| 后裔节点类型黑名单 | 保留字段,暂未用到。 | +| 祖父节点类型白名单 | 保留字段,暂未用到。 | +| 根节点 | 保留字段,暂未用到。 | +| 布局 | 保留字段,暂未用到。 | +| 选择器 | 如.tiny-input | +| 使用原生组件 | 保留字段,暂未用到。 | +| 画布丢弃的属性 | 画布上不生效的属性,只在生成源代码时生效 | +| 禁用点击事件 | 设计器右侧高级面板中绑定事件时不可绑定点击事件 | +| 分组 | 决定设计器物料面板中该组件所在组件库分类下的分组 | +| 排序 | 所在分组的排序权重,数值越大越靠前 | +| 快捷面板属性 | 设计器画布中右键该组件弹出的右键菜单中可快捷配置的属性 | +| 菜单项 | 设计器画布中右键该组件弹出的右键菜单列表 | +| 禁用菜单 | 右键菜单禁用项 | + +### 完成 + +完成基本信息填写和组件配置后,可以在构建物料资产包时将该组件库添加到资产包中,在设计器中就可以正常使用该组件库下的组件搭建页面了。 diff --git a/docs/ecosystem-center/how-to-publish-block.md b/docs/ecosystem-center/how-to-publish-block.md new file mode 100644 index 0000000000..6047e6e77d --- /dev/null +++ b/docs/ecosystem-center/how-to-publish-block.md @@ -0,0 +1,9 @@ +## 如何发布区块 + +区块录入需要根据 + +[区块协议](https://www.opentiny.design/tiny-engine#/protocol) 填写 content 字段 +因为区块可以简单理解为组件的组合,content 内每个属性的含义也可以参考课程 如何发布组件,在那个课程里详细介绍了每个属性的含义。 +需要注意的是:区块录入之后,需要在设计器中发布区块之后,才能够加入物料包中使用,用户可以参考应用开发者-区块管理课程。 +也就是说,区块录入只是替代了在设计器里新建和搭建区块的步骤。 +![发布区块](./imgs/ecology2.png) diff --git a/docs/ecosystem-center/imgs/componentConfigBase.png b/docs/ecosystem-center/imgs/componentConfigBase.png new file mode 100644 index 0000000000..92e698304a Binary files /dev/null and b/docs/ecosystem-center/imgs/componentConfigBase.png differ diff --git a/docs/ecosystem-center/imgs/componentConfigSchema.png b/docs/ecosystem-center/imgs/componentConfigSchema.png new file mode 100644 index 0000000000..18bc6012f9 Binary files /dev/null and b/docs/ecosystem-center/imgs/componentConfigSchema.png differ diff --git a/docs/ecosystem-center/imgs/componentConfigTec.png b/docs/ecosystem-center/imgs/componentConfigTec.png new file mode 100644 index 0000000000..328f6ac61c Binary files /dev/null and b/docs/ecosystem-center/imgs/componentConfigTec.png differ diff --git a/docs/ecosystem-center/imgs/componentLibInfo.png b/docs/ecosystem-center/imgs/componentLibInfo.png new file mode 100644 index 0000000000..bd6bb9b5d5 Binary files /dev/null and b/docs/ecosystem-center/imgs/componentLibInfo.png differ diff --git a/docs/ecosystem-center/imgs/ecology1.png b/docs/ecosystem-center/imgs/ecology1.png new file mode 100644 index 0000000000..0289bb1b8a Binary files /dev/null and b/docs/ecosystem-center/imgs/ecology1.png differ diff --git a/docs/ecosystem-center/imgs/ecology2.png b/docs/ecosystem-center/imgs/ecology2.png new file mode 100644 index 0000000000..4f0a0e7fcb Binary files /dev/null and b/docs/ecosystem-center/imgs/ecology2.png differ diff --git a/docs/ecosystem-center/imgs/ecology3.png b/docs/ecosystem-center/imgs/ecology3.png new file mode 100644 index 0000000000..42bd8a8c60 Binary files /dev/null and b/docs/ecosystem-center/imgs/ecology3.png differ diff --git a/docs/ecosystem-center/publish-other-ecosystems.md b/docs/ecosystem-center/publish-other-ecosystems.md new file mode 100644 index 0000000000..f63f3a77e2 --- /dev/null +++ b/docs/ecosystem-center/publish-other-ecosystems.md @@ -0,0 +1,9 @@ + ## 如何发布其他生态 + + 主题、插件、工具、DSL 的发布相似,这里以插件为例: +![发布插件](./imgs/ecology3.png) + 插件仓库地址为插件 npm 包所在的仓库地址 + 版本号决定了安装哪一个版本的 npm 包 + 被标识为官方的插件会显示“官方”字样 + 被标识为默认的插件会在创建设计器时默认被选中 + 公开决定了插件的可见范围,私有代表仅自己可见,公开代表所有用户可见,半公开只对选中组织内的用户可见 \ No newline at end of file diff --git a/docs/extension-capabilities-overview/meta-services-and-meta-apps.md b/docs/extension-capabilities-overview/meta-services-and-meta-apps.md new file mode 100644 index 0000000000..335e89f2a4 --- /dev/null +++ b/docs/extension-capabilities-overview/meta-services-and-meta-apps.md @@ -0,0 +1,74 @@ +# 元应用&元服务 + +## 什么是元应用和元服务 + +在我们与用户沟通的过程中,我们发现,用户有一类"轻定制"的需求,他们希望能够定制页面上的一些UI、主题,或者一些布局的显隐。核心的功能不需要定制。 +但是,我们提供的插件对于单纯的UI定制能力跟核心的功能绑定在一起,如果用户只希望定制UI,而不需要定制功能,则需要重新实现一个插件。 +这样的成本同样是很高的,于是,我们基于这种场景的问题,把插件拆分出来了元应用与元服务两种概念: + +元应用:负责插件的UI布局显示、负责响应用户的交互动作,然后调用元服务的数据、API进行交互。 +元服务:负责抽象插件的核心功能(数据响应、提供给UI的API、与服务端交互的接口API),做到与UI无关,方便二次开发用户定制低代码平台时定制UI。 + +## 如何使用元应用和元服务 + +元应用和元服务都经过注册表传入到TinyEngine中。 + +读取元应用并渲染的方式: + +```vue + + +``` + +读取元服务的方式: + +```javascript +import { getMetaApi } from '@opentiny/tiny-engine-meta-register' + +// 获取元服务的 api +const { getAllNestedBlocksSchema, generatePageCode } = getMetaApi('engine.service.generateCode') +``` + +## 如何自定义开发元应用元服务 + +自定义元应用: + +```javascript +// UI 模板 +import entry from './src/Main.vue' +import metaData from './meta' + +export default { + // 元应用定制项 + ...metaData, + // 元应用入口 + entry +} +``` + +自定义元服务: + +```javascript +export const GenerateCodeService = { + // 元服务的 id + id: 'engine.service.generateCode', + // 元服务的类型 + type: 'MetaService', + // 元服务定制项 + options: {}, + // 元服务的 api + apis: { + parseRequiredBlocks, + getAllNestedBlocksSchema, + generatePageCode, + generateAppCode + } +} +``` diff --git a/docs/extension-capabilities-overview/new-architecture.md b/docs/extension-capabilities-overview/new-architecture.md new file mode 100644 index 0000000000..edf51ac645 --- /dev/null +++ b/docs/extension-capabilities-overview/new-architecture.md @@ -0,0 +1,17 @@ +# TinyEngine 洛书架构介绍 + +## 为什么需要 TinyEngine 洛书架构 + +在 TinyEngine 开源以来,我们发现很多用户基于自身业务的场景,会对低代码引擎有定制化的需求,比如基于业务定制特殊的插件,定制设置器、出码定制等等。 +一开始,我们提供扩展的方式很简单,用户只需要 fork 我们的开源代码,直接修改即可,这种方式的优点是:用户定制的自由度高,定制方式也简单,可以深入源码进行定制修改。同时,这个方案面临着一个问题:随着定制化程度的加深,低代码平台二次开发者对官方项目代码的修改程度也逐渐增多,与此同时,TinyEngine引擎官方在慢慢的增加新特性,以及修复 bug,导致 fork 出来的代码与官方引擎项目差异越来越大,同步我们的新特性以及 bug 的时候,冲突越来越多。 + +于是,我们需要一种新的架构,让用户既能够同步我们低代码引擎的新代码(新特性+bug修复),同时能够能够基于自身业务属性,对插件、设计器、布局、出码等等方式进行定制。 + +基于这个需求与思路,我们设计了新的可扩展架构——洛书架构 + +## 扩展架构核心特性 + +- 提供 cli 工具,使用 cli 快速创建出来基于 TinyEngine 引擎的低代码平台。 +- 提供一个灵活的 Layout 布局组件,让用户可以选择布局、定制布局。也可以传入自实现的布局。 +- 将插件拆分成元服务+元应用的定制形式,并提供配置、替换的能力。 +- 提供一个注册表机制,让能够配置元服务、元应用,并加载到TinyEngine低代码引擎中。 diff --git a/docs/extension-capabilities-overview/registry.md b/docs/extension-capabilities-overview/registry.md new file mode 100644 index 0000000000..ff5caf2176 --- /dev/null +++ b/docs/extension-capabilities-overview/registry.md @@ -0,0 +1,123 @@ +# 注册表 + +## 什么是注册表 + +在 新架构介绍中,我们引入了注册表的概念,二次低代码平台开发用户通过注册表配置元服务元应用,TinyEngine底层引擎读取注册表的配置,完成元应用元服务的定制,然后加载对应的元应用元服务,完成低代码平台的启动。 + +所以注册表就是完成元应用元服务注册、配置、覆盖的TinyEngine提供的底层核心功能。 + +注册表的作用: + +- 接收元应用元服务的配置,传递到低代码底层引擎,完成低代码平台的定制化。 +- 合并默认的元应用元服务的配置项以及用户的自定义配置项。 +- 提供查询能力,使得元服务与元服务之间能够相互通信,或者相关状态变量。 + +## 注册表配置结构 + +传入到TinyEngine底层引擎的示例: + +```javascript +// 注册表配置示例 +const register = { + root: { + id: 'engine.root', + metas: [GenerateCodeService, GlobalService] + }, + config: engineConfig, + layout: { + ...Layout + options: {...} + }, + themes: [ + { + id: 'engine.theme.light' + }, + { + id: 'engine.theme.dark' + } + ], + toolbars: [Media, Save], + plugins: [Materials, Tree], + settings: [Props, Styles], + Canvas: Canvas +} +``` + +示例解读: + +1. 最外层为一个对象结构。 +2. root: 配置核心的元服务,许多的插件依赖这些核心的元服务。 +3. config: 低代码引擎的配置,主要配置物料、主题等等。 +4. layout:配置低代码引擎的布局。 +5. theme: 传入主题插件,然后可以通过 config 进行选择这些插件。 +6. toolbars: 传入顶部工具栏的插件以及配置。 +7. plugins: 传入左侧列表的插件,以及配置。 +8. settings: 传入右侧设置面板的插件以及配置。 +9. Canvas:画布插件的配置。 + +## 注册表使用 + +### 注册表注册 + +```javascript +import { defineEntry } from '@opentiny/tiny-engine' + +const registry = { + root: { + id: 'engine.root', + metas: [GenerateCodeService, GlobalService] + }, + config: engineConfig, + layout: { + ...Layout + options: {...} + }, + themes: [ + { + id: 'engine.theme.light' + }, + { + id: 'engine.theme.dark' + } + ], + toolbars: [Media, Save], + plugins: [Materials, Tree], + settings: [Props, Styles], + Canvas: Canvas +} + +defineEntry(registry) +``` + +### 通过注册表获取元服务、元应用、配置 + +```vue + +``` + +### 通过注册表传入配置、定制覆盖项 + +```javascript +const register = { + + layout: { + ...Layout + // 传输配置项 + options: {...} + }, + toolbars: [ + // 第二个对象传入配置、覆盖项 + [Media, { ... }] + ], + // 传入自定义插件 + plugins: [Materials, Tree, customPlugin], +} +``` diff --git a/docs/extension-capabilities-tutorial/ai-plugin-configuration.md b/docs/extension-capabilities-tutorial/ai-plugin-configuration.md new file mode 100644 index 0000000000..9c4c508ba8 --- /dev/null +++ b/docs/extension-capabilities-tutorial/ai-plugin-configuration.md @@ -0,0 +1,55 @@ +# AI 插件使用前配置 + +## 一、AI 插件使用在本地代码里调试及要改动的配置,以文心一言举例 + +### 后端代码改动 + +1、在`tiny-engine-webservice/config/config.default.ts`文件变更如下 + +![](./imgs/ai-image21.png) + +**想获取以上 access_token 值,请看最后标题的“使用前先获取 access_token,拿文心一言举例”** + +2、在`tiny-engine-webservice/app/lib/enum.ts`文件变更如下 + +![](./imgs/ai-image22.png) + +### 前端代码改动 + +在`tiny-engine/packages/plugins/robot/src/js/robotSetting.js`文件改动如下 + +![](./imgs/ai-image23.png) + +- ### 前后端代码启动后使用 AI 插件 + +1、点击 AI 对话框 + +![](./imgs/ai-image24.png) + +2、在对话框里选择使用的 AI 模型 +![](./imgs/ai-image25.png) + +3、输入问题,即能成功回答 + +![](./imgs/ai-image26.png) + +### 使用前先获取 access_token,拿文心一言举例 + +1、在网上搜索[文心一言 API 使用教程](https://blog.csdn.net/weixin_73654895/article/details/133799269),按照操作[登录百度智能云](https://login.bce.baidu.com)后先[创建应用](https://console.bce.baidu.com/qianfan/ais/console/applicationConsole/application/v1)申请一个 API 获取密钥 + +![](./imgs/ai-image27.png) +2、在线调试[获取 access_token](https://cloud.baidu.com/doc/WENXINWORKSHOP/s/llkkrb0i5) + +![](./imgs/ai-image28.png) +跳转到[进入示例代码中心调试调用 API 获取 access_token](https://console.bce.baidu.com/support/?u=qfdc#/api?product=QIANFAN&project=千帆ModelBuilder&parent=鉴权认证机制) + +![](./imgs/ai-image29.png) + +查看 access_token 值,下图可看到在线运行成功,成功获取 token 值 + +![](./imgs/ai-image30.png) + +3、调用 API 接口 + +![](./imgs/ai-image31.png) +![](./imgs/ai-image32.png) diff --git a/docs/extension-capabilities-tutorial/code-output-function/code-output-overview-and-usage.md b/docs/extension-capabilities-tutorial/code-output-function/code-output-overview-and-usage.md new file mode 100644 index 0000000000..90b3569327 --- /dev/null +++ b/docs/extension-capabilities-tutorial/code-output-function/code-output-overview-and-usage.md @@ -0,0 +1,60 @@ +# 出码功能简介与使用 + +## 什么是出码 + +在TinyEngine低代码引擎中,用户搭建的页面,会使用符合TinyEngine页面搭建协议规范的JSON数据来描述,也即页面Schema,而用户需要的最终产出物为源代码文件,出码模块就是沟通两者的桥梁,它的作用是将符合协议规范的JSON格式Schema数据,转换成符合语义的、可读性好的源代码文件。 + +```json +{ + "componentName": "div", + "props": { + "style": "color: red; text-align: center;" + }, + "children": [ + { + "componentName": "Text", + "props": { + "text": "TinyEngine 前端可视化设计器,为设计器开发者提供定制服务,在线构建出自己专属的设计器。" + } + } + ] +} +``` + +转换成 vue 代码之后则会变成: + +```vue +
+ TinyEngine 前端可视化设计器,为设计器开发者提供定制服务,在线构建出自己专属的设计器。 +
+``` + +## 为什么需要出码 + +基于 schema 自定义运行时引擎固然有保存之后即可看到渲染效果的好处,但是,在我们实战经验中却发现随着需求的变更以及时间的变迁,运行时引擎的代码会膨胀的非常巨大,运行时引擎内部的架构也越来越复杂,会带来一些明显的痛点: + +- 由于运行时引擎代码复杂,正常的需求迭代与变更中,如果场景测试不完全,可能会导致线上基于运行时引擎的页面崩溃。 +- 运行时为了兼容各种功能与需求,本身体积会越来越大,导致页面打开速度与响应速度会受到一定影响。 +- 运行时引擎需无法很好地与现有项目进行相结合(部分页面使用低代码搭建,或者是部分子页面使用低代码搭建的场景)。 + +在经历一番探索之后,我们发现使用出码的方案可以相对完美的解决以上痛点: + +- 运行时引擎仅在设计态搭建页面的时候存在,正式上线的代码是人工可读的高代码,可以走代码托管平台(比如GitHub或者Gitlab)的MR review 流程。及时发现出码的错误。即使当前页面出码有 bug,只会影响当前页面,而不会导致整个应用的崩溃 +- 生产环境不存在运行时引擎,也就不会因为运行时引擎体积的问题导致页面打开速度与相应速度变慢,理论上来说,出码之后,还可以正常走 SSR 等服务端渲染方案。 +- 支持仅出码部分页面,直接与现有项目相结合。 + +基于以上的一些考虑,TinyEngine提供了schema to code 的出码能力,以及自定义出码的能力。 + +## 如何使用出码 + +使用出码包括使用官方自带出码能力以及自定义出码两种。 + +### 直接使用官方自带出码能力 + +在工具栏顶部,自带有应用出码的工具。点击即可将当前应用转换成应用代码。 + +![应用出码示例](./imgs/exportcode.gif) + +### 使用官方出码能力进行自定义调整 + +请查看[如何自定义出码](./how-to-customize-code-output.md)章节 diff --git a/docs/extension-capabilities-tutorial/code-output-function/custom-page-code-output-plugin.md b/docs/extension-capabilities-tutorial/code-output-function/custom-page-code-output-plugin.md new file mode 100644 index 0000000000..7f181ede9c --- /dev/null +++ b/docs/extension-capabilities-tutorial/code-output-function/custom-page-code-output-plugin.md @@ -0,0 +1,549 @@ +# 自定义页面出码插件 + +页面出码是整体应用出码中的核心组成部分。关于页面出码也有很多的定制化需求,比如 vue 出码可以选择 composition api 的风格、可以选择 options 的风格,可以选择 return jsx 的出码风格。为了满足二次开发用户自定义页面出码的需求。我们提供两种自定的方式,下面是具体介绍: + +## 自定义插件替换页面出码与区块出码 + +第一种方式,假如用户想出码成 vue options 风格的页面,与官方的出码存在较大差异,则官方建议自定义插件。替换官方的页面出码插件与区块出码插件。 +例如: + +```javascript +import { generateApp } from '@opentiny/tiny-engine-dsl-vue' + +const customOptionStylePlugin = () => { + return { + name: '', + description: '', + run(schema, context) { + // ... 自定义出码逻辑 + const res = '' // ... 这里自定义 option style 的 vue 文件 + + const file = { + fileType: 'vue', + fileName: 'fileName.vue', + path: blockBasePath, + fileContent: res + } + + this.addFile(file) + } + } +} + +const instance = generateApp({ + customPlugins: { + // 替换官方页面出码插件 + page: customOptionStylePlugin(), + // 替换官方区块出码插件 + block: customOptionStylePlugin(), + } +}) + +const res = await instance.generate(appSchema) +``` + +## 基于官方出码自定义 + +第二种方式,假如用户想在官方出码的基础上进行一些增量或者细节调整,则可以传入 hook 函数到官方插件中。进行出码的细节或者增量调整。 + +### 官方页面出码流程 + +在说明如何传入 hook 到官方插件中实现细节调整之前,我们不妨先看看官方页面的出码流程。对整体页面出码流程有大致的印象。 + +单页面出码流程图: + +![页面出码流程](./imgs/pageGenerate.png) + +#### 单页面出码流程说明 + +##### 输入页面 schema + +调用 `genSFCWithDefaultPlugin(schema)` 函数,传入页面 schema + +##### 处理生成 template + +遍历传入的页面 schema,递归处理 schema.children,得到 template 内容 + +```javascript +// 大致逻辑 +function genTemplate(schemWithRes, globalHooks, config) { + schema.schema.children.map(() => { + // 存储中间态的数据 + const optionData = { + schema: schemaItem, + voidElement: false, + componentName: componentName ?? component ?? '', + prefix: [], + attributes: [], + children: [], + suffix: [] + } + + for (const hookItem of [...genTemplateHooks, genTemplate]) { + // 使用 genTemplateHooks 处理 componentName、attributes、children + // 数组最后是 genTemplate 函数,即调用自身递归处理 children + } + + // 拼接得到 jsx,比如
+ return ` +${optionData.prefix.join('')}${startTag}${optionData.children.join('')}${endTag}${optionData.suffix.join('')}` + }) +} +``` + +处理完成最终得到如 `` 的template 内容 + +##### 生成 script + +从流程图可以看到,我们按顺序调用指定的 hook 生成依赖引入、props 声明、emit 声明、state声明、方法声明、生命周期。最终得到单页面中的 script,如: + +```vue + +``` + +##### 生成 style + +生成 style 的内容很简单,我们只需简单拼接 css 字符串即可,最终得到 style 内容,如: + +```vue + +``` + +##### 返回最终结果,得到vue单页面文件内容 + +最终我们拼接得到的 template、script、style,最终得到单文件字符串 + +### 官方页面出码能力详解 + +得知了官方页面出码插件的出码流程之后,让我们看看我们能够用他来做些什么。 + +#### 生成 template + +##### 转换 componentName + +比如将内置的 Text 组件转换成 html 的 span 标签: + +```javascript +function handleComponentName(optionData) { + if (optionData.componentName === 'Text') { + optionData.componentName = 'span' + } +} +``` + +##### 处理 attributes + +以官方的 TinyGrid 组件为例,我们可以处理其中的 mock 属性,处理插槽组件的特殊 props。 +假如我们有如下的 schema 片段: + +```javascript +{ + "componentName": "TinyGrid", + "props": { + // data 和 fetchData 同时存在,tinyGrid 会优先使用 data + // 但是 data 可能仅只有 Mock数据,实际生成代码时 + "data": {...}, + "fetchData": {...}, + "columns": [ + { + "editor": { + // 这里的 component 当前只是一个字符串,实际出码过程中,我们需要变成 TinySelect 的引用 + // 并且在 script 中声明引入依赖 + "component": "TinySelect" + // ... 其他属性 + } + } + ] + + }, + "children": [] +} +``` + +则我们可以使用如下的 hooks 进行处理: + +```javascript +const handleTinyGrid = (optionData, globalHooks, config) => { + const { componentName, props } = optionData.schema + + // 同时存在 data 和 fetchData 的时候,删除 data + if (componentName === 'TinyGrid' && props?.data && props?.fetchData) { + delete props.data + } + + // 处理 TinyGrid 插槽 + if (componentName !== 'TinyGrid' || !Array.isArray(props?.columns)) { + return + } + + // 处理 TinyGrid 组件 editor 插槽组件使用 opentiny/vue 组件的场景,需要在 import 中添加对应Tiny组件的引入 + props.columns.forEach((item) => { + if (item.editor?.component?.startsWith?.('Tiny')) { + const name = item.editor?.component + + // 使用 globalHooks 往 script 中注入依赖引入 + globalHooks.addImport('@opentiny/vue', { + destructuring: true, + exportName: name.slice(4), + componentName: name, + package: '@opentiny/vue' + }) + + // 处理 component 组件,变成引用 + item.editor.component = { + type: 'JSExpression', + value: name + } + } + + if (typeof item.slots === 'object') { + Object.values(item.slots).forEach((slotItem) => handleTinyGridSlots(slotItem?.value, globalHooks, config)) + } + }) +} + +// 传递到页面和区块出码插件 +const instance = generateApp({ + pluginConfig: { + page: { sfcConfig: { genTemplate: [handleTinyGrid] } } + block: { sfcConfig: { genTemplate: [handleTinyGrid] } } + } +}) +``` + +##### 处理children + +假如我们的 schema 片段有特殊的 children,那么我们可以提前处理,而不需要等到递归处理 + +比如:我们有如下的 schema 片段: + +```javascript +{ + "componentsName": "div", + "props": {}, + // children 是一个表达式 + "children": { + "type": "JSExpression", + "value": "should render ? 'aa' : 'bbb'" + } +} +``` + +则我们可以使用函数处理该 children + +```javascript +const handleExpressionChildren = (schemaData = {}, globalHooks, config) => { + const { children, schema } = schemaData + const type = schema?.children?.type + const isJSX = config.isJSX + const prefix = isJSX ? '{' : '{{' + const suffix = isJSX ? '}' : '}}' + + // 如果是 js expression 类型 + if (type === JS_EXPRESSION) { + specialTypeHandler[JS_RESOURCE](schema.children, globalHooks, config) + + // 直接生成 children 字符串 + children.push( + `${prefix} ${schema.children?.value.replace(isJSX ? thisRegexp : thisPropsBindRe, '') || ''} ${suffix}` + ) + + // 删除 schem.children 属性,避免后续 hooks 重复处理 children + delete schema.children + return + } +} + +// 传递到页面和区块出码插件 +const instance = generateApp({ + pluginConfig: { + page: { sfcConfig: { genTemplate: [handleExpressionChildren] } } + block: { sfcConfig: { genTemplate: [handleExpressionChildren] } } + } +}) +``` + +#### globalHooks使用 + +相信细心的你已经看到了,在上述的例子中,我们可能会频繁的使用 globalHooks,接下来,让我们看看 globalHooks 的相关能力。 + +globalHooks 在 genTemplate、parseScript、genScript 等钩子函数中都可以使用。可以往 script 中注入相关引用,可以往 style 中注入 css。 + +##### 插入声明语句 + +我们可以往 script 中插入声明语句 + +```javascript +globalHooks.addStatement({ + // position 标识插入位置 + position: 'AFTER_IMPORT', + // 插入的 javascript 语句 + value: 'const test = "hello world"', + // 语句的 唯一 key,可以避免重复插入,如果 key 重复,会导致插入失败 + key: 'test' +}) +``` + +同样,我们可以使用 `globalHooks.getStatements()` 获取当前所有的语句 + +##### 插入、获取方法声明 + +```javascript +// 插入方法,第一个参数为 唯一 key,唯一 key 冲突则插入不成功,建议使用函数名作为 唯一 key +globalHooks.addMethod('testfun', 'function testfun() { console.log("插入方法成功") }') + +// 获取schema以及注册的方法 +globalHooks.getMethods() +``` + +##### 增加、获取状态变量 + +```javascript +globalHooks.addState(key: any, value: any): boolean + +// 示例: +// 第一个参数 key 为唯一 key,避免冲突,第二个参数为增加的 状态变量字符串,为实际向状态变量注入的 key 和 value +globalHooks.addState('test', 'test: "hello world"') + +// 注入成功后出码示例: +const state = reactive({ + //... 其他状态变量省略 + test: "hello world" +}) +``` + +获取状态变量: + +```javascript +// 返回使用 globalHooks.addState 方法注入的 state +globalHooks.getState() +``` + +##### 注入、获取依赖 + +```typescript +interface IConfig { + destructuring: boolean; // 是否解构 + exportName: string; // 导出名称 + componentName: string; // 别名 +} +// 插入依赖声明 +globalHooks.addImport(packageName: string, config: IConfig) + +// 获取当前所有的 import +globalHooks.getImport(): IConfig[] +``` + +比如,我们想要注入指定的依赖 @vueuse/core: + +```javascript +globalHooks.addImport('@vueuse/core', { + destructuring: true, + exportName: 'useLocalStorage', + componentName: 'useLocalStorageAlias' +}) +``` + +则会生成声明语句:`import { useLocalStorage as useLocalStorageAlias } from '@vueuse/core'` + +##### 设置、获取 script 标签配置 + +在生成 script 标签的时候,我们可以有:` +``` + +![替换整个插件页面](./imgs/custom-plugin-page-full.png) diff --git a/docs/extension-capabilities-tutorial/develop-configurator-components.md b/docs/extension-capabilities-tutorial/develop-configurator-components.md new file mode 100644 index 0000000000..9ffeb59263 --- /dev/null +++ b/docs/extension-capabilities-tutorial/develop-configurator-components.md @@ -0,0 +1,144 @@ +# 开发设置器组件 + +## 相关概念 + +设置器组件本质上就是一个 Vue 单文件组件。在设计器页面右侧的属性面板中,设置器组件用于设置画布中选中的组件的属性的值。你可以把属性面板看做一个大表单,每个设置器组件用于一个表单项的输入。比如下图的输入框设置器组件 + +![输入框设置器组件](./imgs/input-configurator.png) + +## 开发 + +设置器组件可以有多种形式,它们都需要遵循以下规范: + +- 是一个 vue 的单文件组件 +- 组件的 props 必须要有 `modelValue` 属性 +- 组件的 emits 必须支持 `update:modelValue` 事件 + +例如我们使用 TinyVue 的 Input 组件开发一个输入框设置器,输入的字符只支持字母或者数字,代码如下 + +```vue + + + +``` + +你会发现写设置器组件和平时写地组件似乎没有很大区别,只需要输入(props)和输出(emits)都满足规范即可 + +## 使用 + +开发了设置器组件后,接下来我们想用在属性面板上 + +1. 注册设置器 + 通过 engine-cli 工具创建出来的设计器平台,在 `src/configurators/index.js` 文件中配置我们需要使用到的设置器 + + ```js + import MyInputConfigurator from './MyInputConfigurator.vue' + + export const configurators = { + MyInputConfigurator + } + ``` + +2. 物料中使用设置器 + + 使用 TinyInput 组件的物料为例。将 `component` 替换成我们注册设置器组件时对应的名称,这里是 `MyInputConfigurator`。另外,与 `component` 同级的 `props` 对象则会传入到设置器组件中 + +```json +{ + "name": { + "zh_CN": "输入框" + }, + "component": "TinyInput", + "icon": "input", + "description": "通过鼠标或键盘输入字符", + // ... + "schema": { + "properties": [ + { + "label": { + "zh_CN": "基础信息" + }, + "description": { + "zh_CN": "基础信息" + }, + "content": [ + { + "property": "modelValue", + "label": { + "text": { + "zh_CN": "绑定值" + } + }, + "required": true, + "readOnly": false, + "disabled": false, + "cols": 12, + "widget": { + // "component": "I18nConfigurator", + "component": "MyInputConfigurator", + "props": {} + }, + "description": { + "zh_CN": "双向绑定值" + }, + "labelPosition": "left" + } + ] + } + ], + "events": { + //... + }, + "slots": { + // ... + } + }, + "configure": { + // ... + } +} +``` + +按照上述步骤配置好了之后,启动 TinyEngine 设计器。最终效果如下 +![自定义输入框设置器组件效果](./imgs/my-input-configurator.gif) diff --git a/docs/extension-capabilities-tutorial/how-to-develop-plugins.md b/docs/extension-capabilities-tutorial/how-to-develop-plugins.md new file mode 100644 index 0000000000..ae4192dec0 --- /dev/null +++ b/docs/extension-capabilities-tutorial/how-to-develop-plugins.md @@ -0,0 +1,348 @@ +# 插件开发 + +## 插件相关概念 + +在设计器中,插件的范围包括顶部工具栏、左侧插件栏。 +![插件示意图](./imgs/plugin1.png) + +官方实现了很多插件,但是可能无法满足部分人的需求,所以,我们提供插件定制功能,通过插件定制和使用我们提供的能力,可以满足绝大部分人的需求。 + +插件提供的能力: + +- 获取 schema 或操作 schema +- 通过画布暴露的逻辑与画布交互 +- 通过插件面板实现其他自定义逻辑 + +## 插件从开发到上线使用的完整流程 + +- 开发插件 +- 联调 +- 发布插件 +- 在生态中心中录入插件(左侧插件则到插件生态中录入,工具栏插件则到工具栏生态中录入) +- 在编辑设计器页面中选择刚刚发布的插件,重新构建设计器 +- 到应用中查看并使用插件 + +## 插件模板工程 + +一个 minimal 的插件模板工程的核心文件或文件夹有以下几个: + +```bash +pluginProject + - src 插件源码 + - index.js 注册插件入口,需要导出约定的数据结构 + - package.json +``` + +其中 index.js 文件需要导出一个对象来声明插件的 id、标题、icon、插件位置、插件面板打开时渲染的组件,这样,核心工程里面才能正确注册并渲染插件。同时,还可以暴露出来其他 api,提供给其他插件调用 + +```javascript +import component, { api } from './src/Main.vue' + +export default { + id: 'pluginId', // 插件id + title: 'pluginName', // 插件名 + icon: 'js', // 插件 icon + align: 'top', // 插件位置,左侧插件可选值:'top' | 'bottom' 工具栏可选值:'right' | 'center' | 'left' + component, // 插件面板打开时渲染的组件 + api, // 插件暴露的 api,可以提供给其他插件调用 +} +``` + +## 插件UI + +- 对于左侧插件,我们提供了 `PluginPanel` 和 `PluginSetting` 两个组件给用户使用 + - PluginPanel + + ![pluginPanel示意图](./imgs/plugin2.png) + + `PluginPanel` 用于点击左侧插件后展开的面板,分为 header 区域和 content 区域,其中 Header 区域主要显示插件标题、关闭按钮,具体使用方法请看下一节 + + - PluginSetting + + ![pluginSetting 示意图](./imgs/plugin3.png) + + `PluginSetting` 是在插件展开面板之后展开的面板,主要是可以提供更多的空间展示并提供设置更具体的细节,同样分为两部分,一部分是 Header 区域,一部分是 content 内容区域,具体使用方法请看下一节 + +- 对于工具栏插件,我们建议不要放置复杂的UI到工具栏插件中,顶部工具栏插件应该是一些快捷操作的按钮或者是一些状态的展示 + +### 插件面板组件 + +左侧的插件展开组件 `PluginPanel` ,引入方式为: + +```javascript +import { PluginPanel } from '@opentiny/tiny-engine-common' +``` + +使用方式为: + +```vue + + + + +``` + +头部插槽示意图(天蓝色背景区域): + +![头部插槽示意图](./imgs/plugin4.png) + +`isCloseLeft: false` 默认关闭按钮在 Header插槽后面 + +![closeLeft示意图](./imgs/plugin5.png) + +`isCloseLeft: true` 关闭按钮在 title 后面 + +![closeLeft示意图](./imgs/plugin6.png) + +如果不使用提供的面板组件,实现自定义的UI(比如 Script 面板),则需要额外定义关闭按钮,并且在关闭按钮点击的时候 emit close 事件,这样,才能将面板关闭。例如 + +```vue + + + +``` + +### 插件设置面板组件 + +插件设置面板组件 `PluginSetting` 为在插件面板右侧展开的组件 + +引入方式: + +```javascript +import { PluginSetting } from '@opentiny/tiny-engine-common' +``` + +使用方式: + +```vue + + + + +``` + +头部插槽示意图(红框区域): +![头部插槽示意图](./imgs/plugin7.png) + +props 说明 + +- title 设置面板的标题 +- isSecond 是否为二级设置面板(一级设置面板为挨着展开组件 PluginPanel 展开,二级设置面板挨着一级设置面板展开) +- cancel 点击取消按钮的回调(用户关闭设置面板) + +注意: + +- 展开关闭需要用 `v-if` 来主动控制 +- 如果需要更改设置面板的宽度,可以声明 css 变量 `--base-collection-panel-width` 如: + +```html +... +``` + +## 插件使用其他核心 API + +插件本身仅仅是一个暴露给用户的插槽,如果想要实现与画布交互、与 schema 交互,还需要使用我们提供的其他核心能力。 + +### 获取 Schema + +schema (生成页面的 JSON 信息) 基本结构: + +```javascript +{ + componentName: 'Page', // 当前页面类型,"Page" 表示 页面 "Block" 表示区块 + css: '', // 当前页面或者区块的 CSS + props: {}, // 当前页面或者区块接收外部传入的 props + lifeCycles: {}, // 绑定的生命周期,以 vue 为 例,可以绑定:onMounted setUp onUpdated 等等 + children: [], // 用户拖拽搭建的组件数据 + dataSource: { // 数据源 + list: [] // 数据源列表 + }, + methods: {}, // 自定义的 JS 方法 + bridge: { // 桥接源 + imports: [] // 数据源列表 + }, + state: {}, // 自定义的状态 + inputs: [], // 页面接口:输入类型 + outputs: [] // 页面接口:输出类型 +} +``` + +schema 中 children 的结构: + +```javascript +interface IComponentSchema { // 组件 schema + componentName?: string; // 页面 + blockName?: string; // 区块 + id: string; + props?: { // 组件绑定的属性 + condition?: boolean | IBindProps; // 条件渲染判断值 + ref?: { // 定义组件引用 ID + name: string; + type: string; + }; + style?: string; // 行内样式 + className?: string; // 绑定的样式类名 + [prop:string]?: IEventProps | IBindProps | any; + }; + children?: Array< IComponentSchema > | string; +} +``` + +详细的协议规范、数据含义及类型请阅读[低代码协议](https://www.opentiny.design/tiny-engine#/protocol) + +了解了基本的协议规范之后,我们就可以通过 `useCanvas` 拿到当前页面的许多页面状态信息。比如拿到页面 schema 或者当前选中节点的 schema 了 + +```javascript +import { useCanvas } from '@opentiny/tiny-engine-controller' +const schema = useCanvas().getPageSchema() // 获取整个页面的 schema +const currentSchema = useCanvas().getCurrentSchema() // 获取当前选中节点的 schema +``` + +### 获取页面状态 + +在设计器中,除了 schema 之外,还有许多表示当前页面的状态,我们先了解一下这些状态有哪些 + +```javascript +{ + currentSchema: null, // 当前选中节点的 schema + pageSchema: null, // 页面 schema + isSaved: true, // 页面是否已保存 + isLock: false, // 页面是否上锁 + isBlock: false, // 当前页面类型是否是区块 + nodesStatus: {}, // 节点状态是否隐藏(设计态隐藏,即仅仅在画布中隐藏) + loading: false // 页面状态,是否在加载中 +} +``` + +了解了有哪些页面状态之后,我们看看如何拿到这些状态 + +```javascript +import { useCanvas } from '@opentiny/tiny-engine-controller' +const isBlock = useCanvas().isBlock(); // 当前编辑类型是否是区块 +const isSaved = useCanvas().isSaved(); // 当前保存态,是否已保存 +const isLoading = useCanvas().isLoading(); // 当前loading状态,是否已完成页面 loading +// 清空当前画布,将当前 schema 从画布中移除 +useCanvas().clearCanvas(); +// 重置画布状态 +useCanvas().resetCanvasState(pageState); +const { pageState } = useCanvas(); // 可以拿到全部的 pageState +``` + +### 获取全局配置 + +全局配置可以获取在新增设计器、编辑设计器时候的配置,主要的全局配置有: + +```javascript +{ + dslMode: 'Vue', // 当前的技术栈 Vue 或者 Angular + theme: 'dark', // 设计器的主题,dark 或者 light + lifeCyclesOptions: { // 生命周期 + Vue: ['setup', 'onBeforeMount', 'onMounted', ...], + Angular: [...], + }, + platformId: 666, // 当前设计器编辑的应用所属的平台 id +} +``` + +获取全局配置 + +```javascript +import { getGlobalConfig } from '@opentiny/tiny-engine-controller' +const lifeCycles = getGlobalConfig()?.lifeCyclesOptions[getGlobalConfig()?.dslMode] // 生命周期 +const theme = getGlobalConfig()?.theme?.includes('dark') // 设计器的主题 +``` + +### 插件调用画布核心API + +#### 选中组件 + +```javascript +import { selectNode } from '@opentiny/tiny-engine-canvas'; + +selectNode(node) // node: 节点 id,传入节点 id,选中组件,返回选中组件的 schema +``` + +#### 插入组件 + +```typescript +// 使用 +import { insertNode } from '@opentiny/tiny-engine-canvas'; + +insertNode(...参数) + +interface Node { + node: NodeSchema; // 父节点的 schema,需要从api中拿到(getCurrent),而不是直接写 schema,如果不传的话,则是插入根节点中 + data: NodeSchema; // 要插入的新节点的 schema +} +// insertNode 接口 +function insertNode ( + node: Node, + position: 'top' | 'bottom' | 'left' | 'right' | 'in' | 'forbid', // 插入位置 + select = true // 插入后是否选中插入组件 +): void; +``` + +#### 移除组件 + +```typescript +interface Param { + parent: NodeSchema + node: NodeSchema +} +// 接口描述 +function removeNode(param: Param): void; + +// 使用例子 +import { removeNode, getCurrent } from '@opentiny/tiny-engine-canvas'; + +let { schema, parent } = getCurrent() // 获取当前选中节点的 schema,当前父节点的 schema + +removeNode({ parent, node: schema }) // 移除当前节点 + +``` + +#### 拖拽组件到画布 + +在物料插件中,我们可以将组件或区块使用拖拽的方式拖拽到画布中,其背后的原理就是: + +- 监听拖拽定位 +- 监听拖拽释放,释放后,定位释放的位置对应的 schema,插入 schema +- 画布响应式更新 + +假如我们也想实现自己的拖拽组件到画布中,我们提供了 `CanvasDragItem` 帮助用户快速实现这一功能,具体用法是: + +```vue + + +``` diff --git a/docs/extension-capabilities-tutorial/imgs/ai-image21.png b/docs/extension-capabilities-tutorial/imgs/ai-image21.png new file mode 100644 index 0000000000..6afebb788d Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/ai-image21.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/ai-image22.png b/docs/extension-capabilities-tutorial/imgs/ai-image22.png new file mode 100644 index 0000000000..0b7dfc4ee5 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/ai-image22.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/ai-image23.png b/docs/extension-capabilities-tutorial/imgs/ai-image23.png new file mode 100644 index 0000000000..5f8005f611 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/ai-image23.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/ai-image24.png b/docs/extension-capabilities-tutorial/imgs/ai-image24.png new file mode 100644 index 0000000000..60b45e1ca6 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/ai-image24.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/ai-image25.png b/docs/extension-capabilities-tutorial/imgs/ai-image25.png new file mode 100644 index 0000000000..76e1355f7a Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/ai-image25.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/ai-image26.png b/docs/extension-capabilities-tutorial/imgs/ai-image26.png new file mode 100644 index 0000000000..936a4ea4be Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/ai-image26.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/ai-image27.png b/docs/extension-capabilities-tutorial/imgs/ai-image27.png new file mode 100644 index 0000000000..0411eeca84 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/ai-image27.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/ai-image28.png b/docs/extension-capabilities-tutorial/imgs/ai-image28.png new file mode 100644 index 0000000000..cacd087c88 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/ai-image28.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/ai-image29.png b/docs/extension-capabilities-tutorial/imgs/ai-image29.png new file mode 100644 index 0000000000..b1dac805cd Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/ai-image29.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/ai-image30.png b/docs/extension-capabilities-tutorial/imgs/ai-image30.png new file mode 100644 index 0000000000..cd7e4161d0 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/ai-image30.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/ai-image31.png b/docs/extension-capabilities-tutorial/imgs/ai-image31.png new file mode 100644 index 0000000000..1a59012061 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/ai-image31.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/ai-image32.png b/docs/extension-capabilities-tutorial/imgs/ai-image32.png new file mode 100644 index 0000000000..638980034b Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/ai-image32.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/custom-plugin-page-full.png b/docs/extension-capabilities-tutorial/imgs/custom-plugin-page-full.png new file mode 100644 index 0000000000..ea4ab7a582 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/custom-plugin-page-full.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/custom-plugin-page-pos.png b/docs/extension-capabilities-tutorial/imgs/custom-plugin-page-pos.png new file mode 100644 index 0000000000..2a96fb5d18 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/custom-plugin-page-pos.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/input-configurator.png b/docs/extension-capabilities-tutorial/imgs/input-configurator.png new file mode 100644 index 0000000000..6c521015ff Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/input-configurator.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/my-input-configurator.gif b/docs/extension-capabilities-tutorial/imgs/my-input-configurator.gif new file mode 100644 index 0000000000..0e0d6329a6 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/my-input-configurator.gif differ diff --git a/docs/extension-capabilities-tutorial/imgs/plugin1.png b/docs/extension-capabilities-tutorial/imgs/plugin1.png new file mode 100644 index 0000000000..3619ffde78 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/plugin1.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/plugin2.png b/docs/extension-capabilities-tutorial/imgs/plugin2.png new file mode 100644 index 0000000000..8f15910a37 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/plugin2.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/plugin3.png b/docs/extension-capabilities-tutorial/imgs/plugin3.png new file mode 100644 index 0000000000..6073a7141e Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/plugin3.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/plugin4.png b/docs/extension-capabilities-tutorial/imgs/plugin4.png new file mode 100644 index 0000000000..cd876a474b Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/plugin4.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/plugin5.png b/docs/extension-capabilities-tutorial/imgs/plugin5.png new file mode 100644 index 0000000000..43335d5816 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/plugin5.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/plugin6.png b/docs/extension-capabilities-tutorial/imgs/plugin6.png new file mode 100644 index 0000000000..154b0399f8 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/plugin6.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/plugin7.png b/docs/extension-capabilities-tutorial/imgs/plugin7.png new file mode 100644 index 0000000000..933b5a3bb1 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/plugin7.png differ diff --git a/docs/generateCatalogMd.js b/docs/generateCatalogMd.js new file mode 100644 index 0000000000..2ecddb911f --- /dev/null +++ b/docs/generateCatalogMd.js @@ -0,0 +1,45 @@ +const fs = require('fs') +const path = require('path') + +// 读取 catalog.json 文件 +const catalog = require('./catalog.json') + +// 生成 markdown 文件 +function generateMarkdown(catalog) { + let markdown = '# 目录\n' + + catalog.chapters.forEach((chapter) => { + markdown += `\n## ${chapter.title}\n\n` + + chapter.sections.forEach((section) => { + markdown += `- ${section.title}\n` + + section.articles.forEach((article) => { + const articlePath = path.join(section.name, article.name).replaceAll('\\', '/') + + // 如果存在子文章,则添加子文章 + if (Array.isArray(article.articles) && article.articles.length > 0) { + markdown += ` - ${article.title}\n` + article.articles.forEach((subarticle) => { + const subarticlePath = path.join(articlePath, subarticle.name).replaceAll('\\', '/') + markdown += ` - [${subarticle.title}](./${subarticlePath})\n` + }) + } else { + markdown += ` - [${article.title}](./${articlePath})\n` + } + }) + }) + }) + + return markdown +} + +// 写入到 markdown 文件 +function writeToFile(markdown) { + const outputPath = path.join(__dirname, 'README.md') + fs.writeFileSync(outputPath, markdown, 'utf8') +} + +// 执行生成过程 +const markdown = generateMarkdown(catalog) +writeToFile(markdown) diff --git a/docs/getting-started/imgs/addComponent.png b/docs/getting-started/imgs/addComponent.png new file mode 100644 index 0000000000..54d8698a45 Binary files /dev/null and b/docs/getting-started/imgs/addComponent.png differ diff --git a/docs/getting-started/imgs/addState.png b/docs/getting-started/imgs/addState.png new file mode 100644 index 0000000000..8c82e8bfe5 Binary files /dev/null and b/docs/getting-started/imgs/addState.png differ diff --git a/docs/getting-started/imgs/bangEnv.png b/docs/getting-started/imgs/bangEnv.png new file mode 100644 index 0000000000..bb7bd532c1 Binary files /dev/null and b/docs/getting-started/imgs/bangEnv.png differ diff --git a/docs/getting-started/imgs/firstPage.png b/docs/getting-started/imgs/firstPage.png new file mode 100644 index 0000000000..39d0ba7fa6 Binary files /dev/null and b/docs/getting-started/imgs/firstPage.png differ diff --git a/docs/getting-started/imgs/imgswitch.png b/docs/getting-started/imgs/imgswitch.png new file mode 100644 index 0000000000..60c7ab05cb Binary files /dev/null and b/docs/getting-started/imgs/imgswitch.png differ diff --git a/docs/getting-started/imgs/page1.png b/docs/getting-started/imgs/page1.png new file mode 100644 index 0000000000..9d1332a068 Binary files /dev/null and b/docs/getting-started/imgs/page1.png differ diff --git a/docs/getting-started/imgs/preImgChange.png b/docs/getting-started/imgs/preImgChange.png new file mode 100644 index 0000000000..eb75e28cc4 Binary files /dev/null and b/docs/getting-started/imgs/preImgChange.png differ diff --git a/docs/getting-started/imgs/setImgSrc.png b/docs/getting-started/imgs/setImgSrc.png new file mode 100644 index 0000000000..62ec9a1784 Binary files /dev/null and b/docs/getting-started/imgs/setImgSrc.png differ diff --git a/docs/getting-started/imgs/setImgSta.png b/docs/getting-started/imgs/setImgSta.png new file mode 100644 index 0000000000..496f187e07 Binary files /dev/null and b/docs/getting-started/imgs/setImgSta.png differ diff --git a/docs/getting-started/imgs/setImgSty.png b/docs/getting-started/imgs/setImgSty.png new file mode 100644 index 0000000000..0f158bf937 Binary files /dev/null and b/docs/getting-started/imgs/setImgSty.png differ diff --git a/docs/getting-started/imgs/showImg.png b/docs/getting-started/imgs/showImg.png new file mode 100644 index 0000000000..c725d3ad69 Binary files /dev/null and b/docs/getting-started/imgs/showImg.png differ diff --git a/docs/getting-started/imgs/tinyengine.png b/docs/getting-started/imgs/tinyengine.png new file mode 100644 index 0000000000..f462445b6f Binary files /dev/null and b/docs/getting-started/imgs/tinyengine.png differ diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md new file mode 100644 index 0000000000..82794e932b --- /dev/null +++ b/docs/getting-started/introduction.md @@ -0,0 +1,37 @@ +# 简介 + +低代码平台是一种应用程序开发平台,允许用户以图形化方式构建应用程序,通过拖放组件、模板和可视化界面,降低了开发者和非技术用户的技能门槛。用户只需编写少量代码,便可以实现复杂的功能。这种方式不仅提高了开发速度, +随着数字化转型的加速,企业越来越多地寻求降低开发成本、提升开发效率的解决方案。 + +## 低代码引擎背景: + +随着公司的发展,各种垂直领域的低代码平台如雨后春笋般涌现。这些低代码平台在基本需求上大致一致,包括物料导入、页面编排以及属性和样式设置等功能。然而,这种高度的一致性导致了大量重复的基础建设。因此,低代码引擎应运而生,以解决这一问题。 + +## 低代码引擎的定位: + +低代码引擎它内置了一个功能强大的低代码设计器,用户可以基于低代码引擎定制(开发)出各种低代码平台,如:流程编排平台、页面编排平台、图元编排平台、移动端页面开发平台 +、大屏开发平台等等...... + +![基于低代码引擎的应用开发流程](./imgs/tinyengine.png) + +## TinyEngine 低代码引擎介绍 + +![TinyEngine平台界面预览](./imgs/firstPage.png) + +1. 可以定制开发低码平台: TinyEngine 提供了一套完善的插件体系,涵盖了插件开发所需的基础 UI 库、工具库、插件面板的显示控制、生命周期管理、公共 API 注册与共享等。 + +2. TinyEngine 有开放的物料协议和扩展接口:得益于 TinyEngine 强大的开放物料设计,可直接导入第三方组件库,例如 elementUI 和 AntDesign 等UI组件库 + +3. TinyEngine 支持高低代码混合开发:高低代码混合的方式,则可以通过低代码进行常规业务的快速开发,对于特殊的业务逻辑,则由专业开发人员通过高代码进行实现,这样就可以更好地满足业务需求的变化 + +4. TinyEngine 支持 AI 辅助开发:低代码平台与 AI 的结合具有巨大的发展潜力 + +5. 基于洛书一体化的架构,能够快速对TinyEngine进行定制化开发,满足业务系统的需求 + + + + + + + + diff --git a/docs/getting-started/quick-start.md b/docs/getting-started/quick-start.md new file mode 100644 index 0000000000..2524e7f709 --- /dev/null +++ b/docs/getting-started/quick-start.md @@ -0,0 +1,46 @@ +# 快速上手 + +为了帮助开发者迅速掌握TinyEngine并深入理解其核心特性,我们设计了一个简单的实践上手案例:“开关按钮控制图片显示与隐藏”。 +这个案例直观展示了TinyEngine在交互设计,允许用户通过一个简单的开关按钮来控制图片的显示与隐藏状态。 + +通过这个案例,开发者可以快速学习如何利用TinyEngine的低代码特性,实现界面交互逻辑。 + +## 效果图 + +![案例的效果图](./imgs/showImg.png) + +## 第一步,新建页面 + +![步骤1 - 新建页面的操作界面](./imgs/page1.png) + +## 第二步,拖入元素 + +![步骤2 - 拖入元素的操作演示](./imgs/addComponent.png) + +## 第三步,设置状态变量 + +![步骤3 - 设置状态变量的配置界面](./imgs/addState.png) + +## 第四步,设置文本和图片地址: + +修改text属性,修改文本为:“图片显示开关” +设置src属性,修改图片地址为:`https://res.hc-cdn.com/lowcode-portal/1.1.65/img/home/top-banner.jpg` + +![步骤4.1 - 设置文本属性](./imgs/imgswitch.png) +![步骤4.2 - 设置图片地址](./imgs/setImgSrc.png) + +## 第五步,设置图片样式和绑定显示变量 + +![步骤5.1 - 设置图片样式](./imgs/setImgSty.png) +![步骤5.2 - 绑定显示变量](./imgs/setImgSta.png) + +## 第六步,给开关绑定事件 + +![步骤6 - 绑定事件配置界面](./imgs/bangEnv.png) + +## 第七步,绑定点击事件并预览 + +![步骤7 - 绑定点击事件并预览](./imgs/preImgChange.png) + +## 恭喜你,完成了这个小案例。 + diff --git a/docs/practical-cases/graphical-element-arrangement-designer.md b/docs/practical-cases/graphical-element-arrangement-designer.md new file mode 100644 index 0000000000..1fa0124cbf --- /dev/null +++ b/docs/practical-cases/graphical-element-arrangement-designer.md @@ -0,0 +1,127 @@ +# 图元编排设计器 + +‍ + +​![image](./imgs/image-20230919202709-5khs9h1.png)​ + +## 背景 + +图形编排有着广泛的使用场景,如在各类流程图,审批流,部署流水线,架构图中都能看到它的身影。资源编排正是这样一个类似的场景,只是编排的主体变成了云服务资源。 + +资源编排遵循基础设施即代码(Infrastructure as Code, IaC)的设计理念,区别于之前需要单独管理每一种云服务资源,通过资源编排设计器,用户无需手动创建多个资源,在平台通过设计器拖拽配置即可生成模板,并一键部署多个资源。 + +因此,对于资源编排服务场景,需要定制一个专用的设计器来满足用户编排的需求。 + +## 述求与选型 + +核心诉求围绕拖拽配置与模板生成,因此需要有完备的画布拖拽、绘图核心能力与灵活的配置及自定义能力,并通过人性化的交互,来为用户提供强大的在线设计器,顺利生成资源模板,实现一键部署。 + +考虑到需要支持大量的云服务资源,同时每一个云服务资源需要配置的属性也是不一样的,因而采用传统开发方式,为每一种云服务资源开发专门的属性设置页面是不可行的。在属性配置上需要能够能力自定义渲染。 + +同时模板是极为重要的一环,关系到最终资源的部署,模板需要符合特定的标准格式,因此画布和属性面板的输入需要最终体现到最终的模板中。 + +整理出主要的述求: + +* 整体页面需要至少包含:资源列表、画布、属性设置 +* 画布有拖拽、连线等绘图核心能力 +* 属性面板需要能支持自定义配置渲染 +* 支持拓展出其他能力 + +分析述求后,可以判断使用传统方式工作量极大,实现上不太现实,同时发现,资源编排设计器与低代码设计器有许多的相似性,都涉及到基础的资源、拖拽、配置,只有画布区域有差异:由前端组件搭建的页面变成云服务资源图元组成的自由图形,因此考虑借助低代码设计器能力搭建的思路。 + +针对低代码设计器场景,TinyEngine通过优秀的整体架构提供了高度自由的定制能力,可以像搭积木一样选择不同的积木搭建一个专属的设计器,同时属性面板全部通过JSON配置文件渲染,无需编写代码,灵活而强大,能够大大减少开发的成本。设计器布局类似VS Code,核心模板与功能区域划分清晰,上手即用。插件化架构也方便了自由拓展业务相关功能。最终决定使用TinyEinge开发图元编排设计器。 + +## 快速原型 + +​![image](./imgs/image-20230920083516-hg4vhhs.png)​ + +TinyEngine基础设计器中分为顶部工具栏、左侧插件栏、右侧属性配置栏、中央画布区四个部分,同时还可以支持自定义主题配置。 + +因此基于TinyEngine开发资源编排设计器,变成了一件较为简单的事情,只需替换Web专用画布为绘图画布,再添加必要的功能插件即可。 + +遵循TinyEngine推荐的开发风格,按照以下目录来进行开发,canvas中为画布模块,controller为控制器逻辑,common存放公共逻辑,toolbars/plugins/settings对应上、左、右区域的插件,theme对应主题,addons为当前应用所引入的插件: + +```js +. +|-- canvas +|-- controller +|-- common +|-- plugins +|-- settings +|-- toolbars +|-- theme +|-- index.html +|-- main.js +|-- App.vue +|-- addons.js +`-- vite.config.js +``` + +引入TinyEngine相关模块后,对比分析后使用开源的Antv X6开发画布区域,同时按照物料协议与属性面板协议录入一份资源编排所需的物料后,即完成一个简陋但初具雏形的资源编排设计器Demo了。 + +​![image](./imgs/image-20230920084925-yirmz91.png)​ + +## 开发插件 + +### 整体插件架构介绍 + +TinyEngine整体架构优秀之处在于,提供了一套完备的插件体系,包含了插件开发所有的基础UI库、工具库、插件面板的显示控制、生命周期管理、公共API注册与共享等,因而遵循简单的规范即可快速开发出业务所需的功能插件。 + +TinyEngine中的插件根据位置,有大致分为三类:toolbars/plugins/settings,分别对应顶部区域、左侧区域、右侧区域,toolbars插件主要偏向于无需UI或者UI较为简单的工具插件,plugins是业务功能插件,显示在左侧(或下方)抽屉页面,可以通过点击进行展开收起或切换。 + +### 遵循插件规范开发 + +TinyEngine插件开发需要遵循一定的开发规范,主要是文件规范与导出规范: + +* 文件规范,必须包含下面几个文件 + +```bash +pluginProject + - src 插件源码 + - index.js 注册插件入口,需要导出约定的数据结构 + - package.json +``` + +* 导出规范, index.js 文件需要导出一个对象来声明基础信息 + +```javascript +import component, { api } from './src/Main.vue' + +export default { + id: 'pluginId', // 插件id + title: 'pluginName', // 插件名 + icon: 'js', // 插件 icon + align: 'top', // 插件位置,左侧插件可选值:'top' | 'bottom' 工具栏可选值:'right' | 'center' | 'left' + component, // 插件面板打开时渲染的组件 + api, // 插件暴露的 api,可以提供给其他插件调用 +} +``` + +在此基础上就可以按照业务需要自由开发相关逻辑代码。 + +最后在addons插件配置文件中引入,就完成一个完整的插件开发了。 + +```js +import Materials from '@xxxx/lowcode-plugin-materials' + +export default { + plugins: [ + Materials, + // ... + ], + toolbars: [ + // ... + ], + settings: [ + // ... + ] +} +``` + +如此根据业务需要开发基本工具栏插件、导出插件、主题、属性配置插件、模板转换插件,微调整体设计器样式,就快速的完成了一个资源编排领域的图元编排设计器。 + +​​![image](./imgs/image-20230920093120-jdzux3h.png)​​ + +## 总结 + +在资源编排等图元编排场景,与低代码Web页面编排有很多相似之处,也同样可以借助TinyEngine的基础引擎能力,快速搭建出PoC原型,再此基础上,利用其优秀的插件架构和提供的插件公共能力,添加业务相关插件,快速开发出一个领域定制的专属设计器。 \ No newline at end of file diff --git a/docs/practical-cases/imgs/app.png b/docs/practical-cases/imgs/app.png new file mode 100644 index 0000000000..fb4e344660 Binary files /dev/null and b/docs/practical-cases/imgs/app.png differ diff --git a/docs/practical-cases/imgs/blockProps.png b/docs/practical-cases/imgs/blockProps.png new file mode 100644 index 0000000000..0107cba467 Binary files /dev/null and b/docs/practical-cases/imgs/blockProps.png differ diff --git a/docs/practical-cases/imgs/blockSettings.png b/docs/practical-cases/imgs/blockSettings.png new file mode 100644 index 0000000000..0d6c3a6a6d Binary files /dev/null and b/docs/practical-cases/imgs/blockSettings.png differ diff --git a/docs/practical-cases/imgs/code.png b/docs/practical-cases/imgs/code.png new file mode 100644 index 0000000000..ac04b1a673 Binary files /dev/null and b/docs/practical-cases/imgs/code.png differ diff --git a/docs/practical-cases/imgs/download.png b/docs/practical-cases/imgs/download.png new file mode 100644 index 0000000000..ee33ffa181 Binary files /dev/null and b/docs/practical-cases/imgs/download.png differ diff --git a/docs/practical-cases/imgs/image-20230919202709-5khs9h1.png b/docs/practical-cases/imgs/image-20230919202709-5khs9h1.png new file mode 100644 index 0000000000..c55887ece0 Binary files /dev/null and b/docs/practical-cases/imgs/image-20230919202709-5khs9h1.png differ diff --git a/docs/practical-cases/imgs/image-20230920083516-hg4vhhs.png b/docs/practical-cases/imgs/image-20230920083516-hg4vhhs.png new file mode 100644 index 0000000000..7af54c9152 Binary files /dev/null and b/docs/practical-cases/imgs/image-20230920083516-hg4vhhs.png differ diff --git a/docs/practical-cases/imgs/image-20230920084925-yirmz91.png b/docs/practical-cases/imgs/image-20230920084925-yirmz91.png new file mode 100644 index 0000000000..57db36dacb Binary files /dev/null and b/docs/practical-cases/imgs/image-20230920084925-yirmz91.png differ diff --git a/docs/practical-cases/imgs/image-20230920093120-jdzux3h.png b/docs/practical-cases/imgs/image-20230920093120-jdzux3h.png new file mode 100644 index 0000000000..f8b32f55a6 Binary files /dev/null and b/docs/practical-cases/imgs/image-20230920093120-jdzux3h.png differ diff --git a/docs/practical-cases/imgs/pdm.png b/docs/practical-cases/imgs/pdm.png new file mode 100644 index 0000000000..78da410633 Binary files /dev/null and b/docs/practical-cases/imgs/pdm.png differ diff --git a/docs/practical-cases/imgs/process.png b/docs/practical-cases/imgs/process.png new file mode 100644 index 0000000000..1919962c4b Binary files /dev/null and b/docs/practical-cases/imgs/process.png differ diff --git a/docs/practical-cases/imgs/smbHome.png b/docs/practical-cases/imgs/smbHome.png new file mode 100644 index 0000000000..e9764440f5 Binary files /dev/null and b/docs/practical-cases/imgs/smbHome.png differ diff --git a/docs/practical-cases/pdm-metadata-approval-workflow.md b/docs/practical-cases/pdm-metadata-approval-workflow.md new file mode 100644 index 0000000000..f9971e08da --- /dev/null +++ b/docs/practical-cases/pdm-metadata-approval-workflow.md @@ -0,0 +1,105 @@ +## PDM 元数据审批电子流 + +审批流业务场景是现代企业运营中不可或缺的一环。业务流程从某个特定点开始,然后经过一系列的审批节点,完成流程的审批。这些节点通常由不同级别的人员担任,例如主管、经理、财务、法务和总经理等,每个人都扮演着特定的角色和职责。 + +假设场景如下:流程发起人 A 启动了一个电子审批流程。这个流程首先会被传递到主管进行审批。在审批过程中,主管会仔细检查初始业务流程信息和其他相关数据,然后决定是否进一步推进流程,或退回给 A 进行修订。如果主管批准了这个流程,那么它将被移交给下一级审批人,也就是经理。在经理的审批环节,他/她也会详查相关数据和信息,并基于这些以及自己的独立判断来做出决策。值得注意的是,尽管经理可以查看到主管填写的一些技术信息,但这些信息并不对财务和法务公开。也就是说,只有经理和总经理可以看到这些技术信息,财务和法务无法获知。经理会根据这些保密信息以及自己的专业判断来决定是否继续推进流程。 + +如果经理也批准了该流程,那么它将被送至财务节点进行审批。在审批过程中,财务主要关注经济相关的问题,例如价格、付款方式等等。一旦财务审批通过,流程会被移交给法务进行审批。 + +与财务审批类似,法务审批主要关注法律风险和合规性问题。在审批时,法务会仔细检查相关的合同、协议等法律文件,并评估是否存在任何法律风险或合规性问题。一旦法务批准了流程,流程将被移交给总经理进行最后的审批,以完成整个审批流程。 + +![PDM](./imgs/process.png) + +需要注意的是,这种审批流业务场景并不是只有一个,而是有很多个。例如,除了上述的采购流程,还有其他业务流程需要进行审批,比如:数据入库流程、报价流程等等。每个流程都有自己的特点和审批节点数量不一。有些流程可能只需要两三个节点就可以完成审批,有些则可能需要十几个节点才能完成。但是,所有类型的审批流大致相似。如:页面上常见的元素包括表单、表格以及常用的审批组件等。 + +技术分析:若采用传统的开发方式,每当新增一种流程时,前端开发人员都需要开发所有审批节点的审批页面,并重新进行发布流程。同样地,服务端开发人员也需要重新建立一个审批流,通过特定页面录入各节点审批人,并编写相应的审批流规则。显然,这对于前端和服务端开发人员来说都是十分繁琐的工作。 + +**解决方案:** 基于 TinyEngine 低代码引擎,开发出一个专为电子审批流设计的低代码平台。然后,将所有与流程相关的组件,如模板、评审记录和流程指引等导入到平台的物料区域。最后,将这个专注于开发审批流的低代码平台集成到 PDM 元数据电子流业务模块中。在低代码平台上,想要开发任意一个流程的审批页面,只需要将流程模板拖入,并在模板中嵌入本流程的表单或表格,即可轻松完成该节点的审批页面,极大地提高了开发效率和便利性! +服务端也将采用另一种特定于 flow 类型的低代码平台(将在后续内容中详细介绍),以实现对审批流程人员编排。这样,前后端之间的连接就实现了完美的贯通。 + +![PDM](./imgs/pdm.png) + +### 技术实现细节 + +第一步:下载源码,熟悉文件内容。 + +遵循 TinyEngine 推荐的开发风格,按照以下目录来进行开发,canvas 中为画布模块,controller 为控制器逻辑,common 存放公共逻辑,toolbars/plugins/settings 对应上、左、右区域的插件,theme 对应主题,addons 为当前应用所引入的插件: + +```js +|-- canvas +|-- controller +|-- common +|-- plugins +|-- settings +|-- toolbars +|-- theme +|-- index.html +|-- main.js +|-- App.vue +|-- addons.js +`-- vite.config.js +``` + +第二步: 增加流程审批树,用于编辑各个审批节点的页面。 + +经过调研,发现 TinyEngine 提供了一套完善的插件体系,涵盖了插件开发所需的基础 UI 库、工具库、插件面板的显示控制、生命周期管理、公共 API 注册与共享等。这一体系使得开发者只需遵循简单的规范,即可快速开发出业务所需的插件,从而极大地提高了开发效率和灵活性。通过使用 TinyEngine 提供的插件体系,开发者可以更加轻松地管理和维护复杂的插件生态系统,同时降低维护成本。那么只需要按照规范开发一个流程审批树的插件即可。 +最后在 addons 插件配置文件中引入,就完成一个完整的插件开发了 + +```js +import Materials from '@xxxx/lowcode-plugin-materials' + +export default { + plugins: [ + Materials, + // ... + ], + toolbars: [ + // ... + ], + settings: [ + // ... + ], +} +``` + +第三步: 增加审批流程的模板和组件,并暴露各个组件的配置项 + +由于该低代码平台主要是用来开发流程审批流,所以有大量流程中用到的组件和模板。需要安装组件录入协议导进平台里面使用 + +```json +// 以下JSON为节选按钮暴露的属性 +{ + "schema": { + "type": "object", + "properties": { + "size": { + "title": "定义按钮尺寸", + "type": "string", + "enum": ["large", "medium", "small", "mini"], + "enumNames": ["较大尺寸", "中等尺寸", "较小尺寸", "迷你尺寸"], + "default": "" + }, + "text": { + "title": "设置按钮显示的文本", + "type": "string", + "default": "" + } + }, + "events": { + "onClick": { + "label": { + "zh_CN": "鼠标单击时触发", + "en_US": "Triggered on mouse click" + }, + "description": { + "zh_CN": "鼠标单击时触发的回调函数" + }, + "type": "event", + "defaultValue": "" + } + } + } +} +``` + +第四步:服务端接收页面保存的 schema,然后生成源代码。并进行构建部署 diff --git a/docs/practical-cases/smb-lightweight-application-service.md b/docs/practical-cases/smb-lightweight-application-service.md new file mode 100644 index 0000000000..6ee2164e52 --- /dev/null +++ b/docs/practical-cases/smb-lightweight-application-service.md @@ -0,0 +1,45 @@ +## 前言 + +SMB项目立项之初即采取TinyEngine设计器进行开发以及项目管理,其中很多区块以及页面都是在设计器上开发完成的,在积累使用设计器进行应用开发经验的同时也帮助不断完善设计器。下面主要介绍下SMB项目中如何使用设计器进行应用开发。 + +## 基于TinyEngine设计器开发的SMB项目 + +在使用TinyEngine设计器开发SMB项目初期,主要是先了解设计器所具备的能力,重点关注点在组件、区块、页面三个模块。 +这里以SMB项目中的首页举例,首先看下SMB项目中使用设计器搭建的首页部分内容 + +![Alt text](./imgs/smbHome.png) + +可以看到这个页面中包含众多信息,比如说资源的搜索栏、资源的概览信息、增量服务、最佳实践、了解更多等等内容,而这些内容都是从设计器最基本的能力开始一步步聚沙成塔,都是由组件与区块之间的嵌合形成。 + +以其中的轻量应用区块进行详细的开发流程解析 +![Alt text](./imgs/app.png) + +### 如何开发区块 + +区块的主要目的有两点: + +1. 对多页面中可复用的功能或是逻辑组件化 +2. 对复杂页面中的功能可以进行多人协作开发并将模块之间解耦开 + +在开发区块时主要关注点如下图 + +![Alt text](./imgs/blockSettings.png) + + 区块的公开范围会影响到他人使用集成区块 + 区块的暴露属性等同于vue component 中的 props属性 + 区块的事件则是区块emit出去的事件,可以在上层应用区块的页面或区块进行监听捕获 + 同时在这里我们还可以设置区块的生命周期函数,来完成开发中在某一生命周期对应的逻辑,比如说对区块初始化处理 + +开发区块过程中还需要关注搭建区块时使用的组件的属性和事件,利用好这些条件能让区块的开发工作更加顺利,如下图,我们可以通过绑定事件来对交互逻辑进行实现。从图中可以看到,设计器还提供了配置循环数据的能力,示例区块中的4个相同的小区块就是使用这种能力实现的 + +![Alt text](./imgs/blockProps.png) + +### 下载代码到本地 + +开发完成后,我们可以将区块以及页面代码下载到本地进行高代码开发去完善逻辑,具体操作过程如图所示,之后就可以在本地项目中看到区块对应的代码了 + +![Alt text](./imgs/download.png) + +本地代码生成结果 + +![Alt text](./imgs/code.png) diff --git a/docs/solutions/block-lan-release-solution.md b/docs/solutions/block-lan-release-solution.md new file mode 100644 index 0000000000..d41cec2dd4 --- /dev/null +++ b/docs/solutions/block-lan-release-solution.md @@ -0,0 +1,393 @@ +# 区块局域网发布方案 + +在TinyEngine开源后,对私有化部署存在诉求的用户越来越多,而当前TinyEngine多项内容都依托在公网中,当前官网提供的[区块发布方案](./block-release-solution.md),为公网环境下的发布,不能完全满足部分用户的需求。因此需要提供用户能够在内网环境下,也能够正常使用TinyEngine全部功能的方案。 + +现在提出区块发布私有化的两种解决方案给用户自行选择: + +- 公司内部搭建unpkg(npm cdn)和私仓环境,将区块发布到npm私仓中; +- 将区块发布到数据库中,从库中直接读取区块产物。 + +**我们推荐使用第一种方式**,因为采用私仓的方式能尽可能保留我们当前的模式,以及能够使用区块版本浮动功能,并且在我们基础物料组件库中,我们也能将组件库上传到私仓里,达到基础物料的私有化。 + +> 注: +> - 搭建 unpkg:基于开源unpkg([https://github.com/mjackson/unpkg](https://github.com/mjackson/unpkg)),在公司内部搭建 npm 的 cdn 环境 +> - 私仓环境:在公司内部搭建一个私有的 npm registry,提供发布和拉取能力。 + + +# 方案一、将区块发布到npm私仓中 + +![私仓架构图](./imgs/block-publish-12.png) + +## 一、安装 verdaccio + +当前业界内存在很多搭建 npm 私仓的方案,如: verdaccio, neuxs, cnpmjs 等,大家可以自行选择。在此以使用 verdaccio为例,可以查看verdaccio 官网文档或者相关学习文档来安装使用verdaccio ,在这里只做简单介绍。 + +### 1.1 verdaccio安装 + +本地直接通过npm下载 + +```shell +npm install verdaccio -g +``` + +本地启动 + +```shell +verdaccio +``` + +或者使用pm2本地启动 + +```shell +# 启动verdaccio +pm2 start verdaccio +# 查看进程 +pm2 log verdaccio +``` +> 若windows系统下启动verdaccio报错,可以尝试到verdaccio的全局安装目录的bin目录下执行pm2 start ./verdaccio,或者根据报错内容自行搜索解决方案。 + + +通过docker拉取镜像 + +```shell +docker pull verdaccio/verdaccio +``` + +启动 + +```shell +docker run -it -p 4873:4873 verdaccio/verdaccio +``` + +**线上使用请配置数据持久保存,以免数据丢失** + +### 1.2 注册用户 + +```shell +npm login --registry=http://localhost:4873/ +``` +### 1.3 创建token,此token替换原npm上申请的token,用于发包 + +```shell +npm token create --registry=http://localhost:4873/ +``` +token生成完后,需要配置到环境变量`NPM_AUTH_TOKEN`中,后续webService会使用;本地运行时的配置: + +`vi ~/.bashrc` + +```shell +export NPM_AUTH_TOKEN=xxxx # 填入刚生成的token + +``` +设置完后,重新打开命令行或在当前命令行执行以下命令,让设置的环境变量生效。(git bash中设置的环境变量无法适用于powershell 和cmd) + +`source ~/.bashrc` + +### 1.4 安装后验证 + +安装完毕后,可以在本地发布一个npm包进行测试,使用npm publish发布。如: + +![测试私仓](./imgs/block-publish-9.png) + +![测试私仓](./imgs/block-publish-10.png) + +发布完成后, 访问 [http://localhost:4873/](http://localhost:4873/) ,在 verdaccio 的管理界面能看到发布上去的npm包表示安装成功。 + +![测试私仓](./imgs/block-publish-11.png) + +建议发布的测试包名称格式:@公司码/组件名,以便于后续搭建 unpkg 时测试使用。 + +## 二、安装 unpkg + +在 verdaccio 安装好后,我们的包已经能够正常发布在私仓上,如果想要在TinyEngine的页面上去获取到私仓里的包,正确的显示区块,我们还需要借助unpkg去获取到包的数据,而由于公网的unpkg无法直接读取npm私仓里的包,因此还需要搭建自己的unpkg服务器,结合私有的unpkg,才能在TinyEngine的页面上显示你所建的区块。 + +unpkg的搭建,大家可以自行在网上参考相关文档,将官方的unpkg源码下载下来,进行改造,也可以参考别人的成功案例。改造成功后,访问 [http://localhost:8080/](http://localhost:8080/) 能看到 unpkg 服务启动成功![image-20240416214349551](./imgs/block-publish-2.png) + + + +然后访问之前发布的测试包: `http://localhost:8080/@公司码/组件名` ,如能显示 js 文件内容, 则表示 unpkg 安装成功。 + +![image-20240417002104364](./imgs/block-publish-3.png) + +## 三、修改 tiny-engine-webservice + +### 3.1 修改 app/service/material-center/blockBuilder.ts 的 代码 + +```typescript +public unpkgBaseUrl = 'http://localhost:8080'; // 修改为unpkg服务的ip端口 +``` + +```typescript +generatePackageJson(blockInfo, version) { + let { label, id } = blockInfo + label = label.replace(/\W|_/g, '').toLocaleLowerCase() || 'default' + const name = `@opentiny-assets/tinyengine-block-${label}-${id}` // 修改点:发包的名称根据自己情况更改, @opentiny-assets改成 @用户的公司码 + this.pkgName = name + return { + name, + version, + description: '', + main: `js/web-component.es.js`, // 修改点:main 必须是 js/web-component.es.js , 否则 unpkg 无法读取到 js 文件 + keywords: [], + author: '', + license: 'ISC' + } +} +``` + +### 3.2 修改 config.default.ts 的代码 + +替换registry为自己的私仓地址 + +```typescript + config.registry = 'http://127.0.0.1:4873/'; // 修改点:替换为自己的私仓地址 +``` +![代码片段](./imgs/block-publish-8.png) + +**注意:** 在1.3小节里,我们已经生成了npm token,写入到了`NPM_AUTH_TOKEN`环境变量。因此本文件中`authToken`的赋值就不用再修改了,若是没有更换的话,记得参考1.3小节,去替换你的环境变量。 + +### 3.3 修改app/service/cnpm.ts的代码 + +去掉 `--access=public` + +``` typescript + +  async publishCnpm(packagePath) { +   const commands = ['npm publish']; // 修改点:去掉原先的--access=public +    return this.ctx.helper.execCommandWithCatch(commands, { cwd: packagePath }, 'publish cnpm'); +  } + +``` + + +## 四、在 TinyEngine 中发布区块 + +以上步骤完成后,可以启动tiny-engine进行区块发布测试。验证过程中可以通过查看 tiny-engine-webservice的发布过程排查问题,TinyEngine会生成组件包: + +![image-20240417002104364](./imgs/block-publish-4.png) + +然后发布到私仓: + +![image-20240417002104364](./imgs/block-publish-5.png) + +发布完成之后,可以打开 [http://localhost:4873/](http://localhost:4873/) 验证是否发布成功 + +![image-20240417002104364](./imgs/block-publish-6.png) + +并且查看本地启动的unpkg,是否能够正常访问刚才发布的区块。 + +![image-20240417002104364](./imgs/block-publish-7.png) + +验证完成后,可以在物料中把刚才发布的区块进行添加,添加完毕后就可以正常的使用区块功能。 + +## 五、服务部署 + +当前步骤都是在电脑本地环境下运行调试的,在本地验证正确后,可以自行部署到服务器中。实际生产部署模式以企业、组织内部具体情况具体分析,具体安装以及启动操作流程都跟本地一致,可能会有安装目录位置的差异。 + + + +# 方案二、将区块发布到数据库 + + +## 一、方案目的 + +原有的区块托管于npm,通过cdn获取已发布区块内的文件,如果没有公网环境,且不使用私仓的情况下,为区块的托管提供数据库托管方案,使得区块的使用不在依赖于公网环境和cdn + +## 二、设计思路 + +- 将原有的区块发布修改成把区块构建产物转成二进制数据存储到数据库 + +- 后端生成构建产物链接,替换原有区块发布后托管在unpkg的连接,格式为:http://localhost:7011/material-center/api/block/read/@opentiny-assets/tinyengine-dev-block-testceshi11-2328@1.0.17/js/web-components.umd.js + +- 提供链接访问获取文件的后端方法 + +## 三、简单demo,仅供参考 + +### 1. 新增存储数据库的表,字段如下: + +| id   |int(10) |自增id +|------ |------ |------| +| file_name   |varchar(255) |文件名 +|package_name  |varchar(255) |包名 +|file_content   |longtext |文件内容 +|version |varchar(255) |版本 +|created_at |timestamp |创建时间 +|updated_at |timestamp |更新时间 + +strapi生成表可以在管理面板创建,也可以在tiny-engine-data-center服务根目录api文件夹下自己编辑代码,无需手动在mysql创建表 + + +```json +{ + "kind": "collectionType", + "collectionName": "block_file_store", + "info": { + "name": "block-file-store", + "description": "" + }, + "options": { + "increments": true, + "timestamps": true + }, + "attributes": { + "package_name": { + "type": "string", + "required": true + }, + "file_name": { + "type": "string", + "required": true + }, + "version": { + "type": "string", + "required": true + }, + "file_content": { + "type": "text", + "required": true + } + } +} +``` + + +### 2. 修改发布方法 + +config.default.ts文件中新增配置 + + +```typescript +config.dataBaseUrl = 'http://localhost:7011/material-center/api/block/read'; + +``` +发布接口在文件夹路径`/tiny-engine-webservice/app/service/material-center/blockBuilder.ts`下,实现如下: + + +```typescript +private async publish(folder, blockInfo, version): Promise { + let { label, id } = blockInfo; + label = (label as String).replace(/\W|_/g, '').toLocaleLowerCase() || 'default'; + const env = 'alpha'; // 视具体情况而定,可以从RUN_MODE环境变量取,也可以不使用 + const name = `@opentiny-assets/tinyengine-${env}-block-${label}-${id}`; + this.pkgName = name; + + const prefix = `${this.config.dataBaseUrl}/${this.pkgName}@${version}`; + const files = await globPromise(`**/*.*`, { + cwd: folder + }); + for(const file of files){ + const fileContent = await fs.readFile( path.join(folder, file)); + // 文件转二进制 + const base64Data = fileContent.toString('base64'); + const filename = file.substring(file.lastIndexOf('/') + 1); + // 存储数据库 + await this.service.material.blockFilesStore.create({ + package_name: name, + file_name: filename, + version: version, + file_content: base64Data + }); + } + return this.filterFiles(files, prefix); + } +``` + +### 3、新增后端获取区块产物api接口: + +#### 3.1 接口 + +|Method |URI |Description +|------ |------|------| +|GET |material-center/api/block/read/|根据区块链接信息读取文件 + + + +##### 3.1.1 请求request + +|Name |Mandatory |Type |position |Description +|------|------ |------|------ |------| +|file_name|M|string|body|文件名| +|version|M|string|body|版本 +|package_name|M|string|body|包名 + + + +##### 3.1.2 响应Response + +|Name|Mandatory|Type|Description +|------|------|------|------ +|data|O|object|响应数据实体 + + +在 `router/materialCenter/base.ts` 新增路由: + +```typescript +// 路由获取文件链接读取文件 +subRouter.get('/block/read/*', controller.materialCenter.block.readFileContentLink); +``` + + + +**接口实现**: + + +```typescript +async readFileContentLink() { + const params = this.ctx.params; + const paramTemp = params[0]; + const filename = paramTemp.substring(paramTemp.lastIndexOf('/') + 1); + const versionRegex = /@([\d.]+)/; + const version = paramTemp.match(versionRegex) + ? paramTemp.match(versionRegex)[1] + : null; + const package_name = '@' + paramTemp.split('@')[1]; + const paramTemps = { + file_name: filename, + version: version, + package_name: package_name, + }; + const res = await this.service.materialCenter.blockFileStore.find(paramTemps); + this.ctx.type = 'text/javascript'; + this.ctx.body = Buffer.from(res.data[0]?.file_content, 'base64').toString( + 'utf8' + ); +} + +``` + + + + 在data-center里block-file-store/controller下block-file-store.js新增根据文件名和包名查询最新一条的最高版本的文件信息的方法: + + +```typescript + module.exports = { + async find(ctx) { + const { fileName, packageName} = ctx.request.query; + return strapi.services['block-file-store'].find({ + file_name: fileName, + package_name: packageName, + _sort: 'version:DESC', + _limit: 1 + }); + } +}; +``` + +**效果展示** + +1. 后端用postman调用访问文件链接效果如下: + + ![block-publish-db-1](./imgs/block-publish-db-1.png) + +2. 在环境上部署后,新建区块,对区块进行发布后,将区块加入在物料中,在画布里使用区块时,会成功返回`web-components.umd.js`文件,并且与刚才发布的区块版本、包名一致,能够正确显示区块内容。 + + +# 总结 + +当前介绍了两种方案的具体实现方式 + +- 使用方案一可以最大的提高区块发布的灵活性,并且也可以使用版本浮动功能,但是代价就是需要搭建局域网内的私仓服务和unpkg服务; +- 使用方案二数据库存托管的方式看似更加方便,但是可能会造成数据库存储的内容过于庞大。 + +大家可以根据实际情况选择最符合自己场景需求的方案,若是您有不同的想法或者建议,也欢迎您一起参与讨论,在[这里](https://github.com/opentiny/tiny-engine/discussions) 留下您宝贵的思路。 \ No newline at end of file diff --git a/docs/solutions/block-release-solution.md b/docs/solutions/block-release-solution.md new file mode 100644 index 0000000000..e24ab65a06 --- /dev/null +++ b/docs/solutions/block-release-solution.md @@ -0,0 +1,192 @@ +# 区块发布方案 + +## 介绍 + +### 背景 + +区块发布,就是把区块的实时数据当前状态固定下来,并用相应逻辑将区块schema构建为前端可用的webcomponent,并且将构建结果(区块web component)和区块数据快照保存在block_histories表中的一个动作; + +为了区块webcomponent 能够快捷引用, 服务端将区块的web component 作为一个npm包发布到npm仓库, 同时设计器通过unpkg cdn的方式加载, 利用unpkg服务的版本浮动特性, 解决设计器引入高版本区块时需重新构建的问题。 + +### npm发布 + +通过注册npmjs.com 账号,生成具有publish权限的 access token + +![npm官网 access token入口](./imgs/npm1.png) + +![创建Classic Token](./imgs/npm2.png) + +![npm包发布](./imgs/npm3.png) + +生成token 后, 配置 `NPM_AUTH_TOKEN` 环境变量, 具体配置方法参看 [此文档](./server-deployment-solution.md) + +#### 自定义unpkg服务及区块包名 + +选择合适的unpkg服务后,通过修改以下代码配置,替换成自己的unpkg服务和 区块包名 + +##### 修改unpkg服务链接,替换cdn服务 + +修改代码位置: [tiny-engine-webservice/app/service/material-center/blockBuilder.ts](https://github.com/opentiny/tiny-engine-webservice/blob/main/app/service/material-center/blockBuilder.ts) + +```js +unpkgBaseUrl = 'https://npm.onmicrosoft.cn' // 替换为自己的cdn服务 +``` + +![修改unpkg链接位置](./imgs/backend_code3.png) + +##### 修改区块包名 + +npm包名的私域和npmjs 的账号名有关,所以开发者在生成npm access token 后需要修改开源代码中的 区块包名 + +修改代码位置: [tiny-engine-webservice/app/service/material-center/blockBuilder.ts](https://github.com/opentiny/tiny-engine-webservice/blob/main/app/service/material-center/blockBuilder.ts) + +```js +const name = `@opentiny-assets/tinyengine-${env}-block-${label}-${id}` //包名根据实际情况修改 +``` + +![修改区块包名](./imgs/backend_code.png) + +#### unpkg选择 + +##### unpkg + +`https://www.unpkg.com/ ` 是同步npm发布最快的unpkg服务,缺点是国内访问困难; + +##### 微软 + +开源代码示例使用[微软cdn](https://cdn.onmicrosoft.cn/) : `https://npm.onmicrosoft.cn` + +cdn的使用方式和unpkg是一样的,这里不再赘述; + +##### 阿里云私有仓库 + +阿里云私有仓库的unpkg格式和 https://www.unpkg.com/ 略有区别, cdn链接组成为: + +``` +https://registry.npmmirror.com/${包名}/${版本号}/files/${文件路径及文件名} +``` + +以vue为例: +`https://registry.npmmirror.com/vue/^3/files/package.json` + +使用阿里云私有仓库的缺陷是同步npm 仓库的时限较长,导致区块在npm发布成功后,阿里云私有仓库不能及时更新版本; + +### npm 私仓发布 + +npm 私仓部署更具公司或团体内部的npm仓库呈现形式,获取具有publish 权限 access token, 然后配置 `NPM_AUTH_TOKEN` 环境变量,配置方法可查看 [此文档](./server-deployment-solution.md) + +注意:开发者自己公司内部的 npm 私仓需要同时支持unpkg cdn, 否则区块版本浮动功能无法使用, 在区块消费时固定区块包的版本; + +## 研发准备 + +- mysql 数据库 +- npm 或内部npm仓库的 auth token , npm 账号创建地址 +- 配置环境变量 NPM_AUTH_TOKEN, 值为npm仓库的 access token + +## 服务启动 + +- 启动data-center 服务,请查看 [此文档](https://github.com/opentiny/tiny-engine-data-center/blob/main/README.md) +- 启动webservice 服务 请查看 [此文档](https://github.com/opentiny/tiny-engine-webservice/blob/main/README.md) + +## 区块发布服务前端调用 + +执行流程如下: + + - 创建区块 + + ![创建区块](./imgs/create_block.png) + + - 编辑区块并保存 + + ![编辑区块并保存](./imgs/save_block.png) + + - 区块发布 + + ![区块发布](./imgs/publish_block.png) + + 输入区块发布版本及描述 + + ![输入区块发布版本及描述](./imgs/publish_block2.png) + + 发布完之后,就能将区块添加到物料中 + + - 添加区块到物料 + + ![添加区块](./imgs/add_block.png) + + 点击可选区块列表刚才发布的区块,移动到右侧已选区块列表,点击保存 + + ![保存添加区块](./imgs/add_block1.png) + + 至此就可以在物料的区块里找到自己发布的区块并使用了 + + ![使用区块](./imgs/add_block2.png) + +- 先调用区块发布接口 触发区块发布任务 + +- 根据区块发布接口返回的任务id 轮询 任务查询接口,更新前端展示的区块发布进度 + +### 1. 区块发布接口 + +- 接口地址: /material-center/block/deploy + +- 请求方式: POST + +- 参数: + + ```js + { + "deploy_info": "构建某某区块", // 发布区块时的信息 + "block": {}, // 区块信息 + "needToSave": true, // boolean 是否保存当前区块信息到block表 + "version": "1.0.0" // 区块包的版本号,需符合npm仓库版本号规范 + } + ``` + +- 接口说明:发布区块到npm仓库, 在nodejs中执行一个异步任务, 并返回此任务信息 + +- 返回值:返回一个任务信息 + + ```js + { + "data": { + "id": 100, + "teamId": 0, + "taskTypeId": 5, // 任务类型 5为区块发布任务 + "uniqueId": 1001, // 被发布区块的id + "taskName": "PortalBlock", // 任务名称 + "taskStatus": 0, // 任务状态 + "taskResult": null, + "progress": "", // 任务进度 描述 + } + ``` + +### 2. 任务查询接口 + +- 接口地址:`/app-center/api/tasks/status/:taskId` + +- 请求方式:GET + +- 参数: taskId 任务id, 从区块发布接口返回数据获取 + +- 接口说明: 轮询此接口,获取区块发布异步任务的执行状态 + +- 返回值: + + ```js + { + "data": { + "id": 100, + "teamId": 0, + "taskTypeId": 5, + "uniqueId": 2020, + "taskName": null, + "taskStatus": 2, + "taskResult": "", + "progress": "building completed", + "ratio": null, + "progress_percent": 80, + "indicator": null + } + } + ``` \ No newline at end of file diff --git a/docs/solutions/imgs/add_block.png b/docs/solutions/imgs/add_block.png new file mode 100644 index 0000000000..2224e40a16 Binary files /dev/null and b/docs/solutions/imgs/add_block.png differ diff --git a/docs/solutions/imgs/add_block1.png b/docs/solutions/imgs/add_block1.png new file mode 100644 index 0000000000..c1f8c57286 Binary files /dev/null and b/docs/solutions/imgs/add_block1.png differ diff --git a/docs/solutions/imgs/add_block2.png b/docs/solutions/imgs/add_block2.png new file mode 100644 index 0000000000..b7f2d7920b Binary files /dev/null and b/docs/solutions/imgs/add_block2.png differ diff --git a/docs/solutions/imgs/backend_code.png b/docs/solutions/imgs/backend_code.png new file mode 100644 index 0000000000..bc2df80d1a Binary files /dev/null and b/docs/solutions/imgs/backend_code.png differ diff --git a/docs/solutions/imgs/backend_code3.png b/docs/solutions/imgs/backend_code3.png new file mode 100644 index 0000000000..b5b7fa601c Binary files /dev/null and b/docs/solutions/imgs/backend_code3.png differ diff --git a/docs/solutions/imgs/backend_deploy_1.png b/docs/solutions/imgs/backend_deploy_1.png new file mode 100644 index 0000000000..99d067e856 Binary files /dev/null and b/docs/solutions/imgs/backend_deploy_1.png differ diff --git a/docs/solutions/imgs/backend_deploy_10.png b/docs/solutions/imgs/backend_deploy_10.png new file mode 100644 index 0000000000..8bbe12f87e Binary files /dev/null and b/docs/solutions/imgs/backend_deploy_10.png differ diff --git a/docs/solutions/imgs/backend_deploy_2.png b/docs/solutions/imgs/backend_deploy_2.png new file mode 100644 index 0000000000..609047ee4b Binary files /dev/null and b/docs/solutions/imgs/backend_deploy_2.png differ diff --git a/docs/solutions/imgs/backend_deploy_4.png b/docs/solutions/imgs/backend_deploy_4.png new file mode 100644 index 0000000000..33b75129da Binary files /dev/null and b/docs/solutions/imgs/backend_deploy_4.png differ diff --git a/docs/solutions/imgs/backend_deploy_5.png b/docs/solutions/imgs/backend_deploy_5.png new file mode 100644 index 0000000000..b450810875 Binary files /dev/null and b/docs/solutions/imgs/backend_deploy_5.png differ diff --git a/docs/solutions/imgs/backend_deploy_6.png b/docs/solutions/imgs/backend_deploy_6.png new file mode 100644 index 0000000000..4b2f150be6 Binary files /dev/null and b/docs/solutions/imgs/backend_deploy_6.png differ diff --git a/docs/solutions/imgs/backend_deploy_7.png b/docs/solutions/imgs/backend_deploy_7.png new file mode 100644 index 0000000000..3a07d86f59 Binary files /dev/null and b/docs/solutions/imgs/backend_deploy_7.png differ diff --git a/docs/solutions/imgs/backend_deploy_8.png b/docs/solutions/imgs/backend_deploy_8.png new file mode 100644 index 0000000000..d1575a50f4 Binary files /dev/null and b/docs/solutions/imgs/backend_deploy_8.png differ diff --git a/docs/solutions/imgs/backend_deploy_9.png b/docs/solutions/imgs/backend_deploy_9.png new file mode 100644 index 0000000000..851befe882 Binary files /dev/null and b/docs/solutions/imgs/backend_deploy_9.png differ diff --git a/docs/solutions/imgs/block-publish-10.png b/docs/solutions/imgs/block-publish-10.png new file mode 100644 index 0000000000..c573c05f57 Binary files /dev/null and b/docs/solutions/imgs/block-publish-10.png differ diff --git a/docs/solutions/imgs/block-publish-11.png b/docs/solutions/imgs/block-publish-11.png new file mode 100644 index 0000000000..422b8061b2 Binary files /dev/null and b/docs/solutions/imgs/block-publish-11.png differ diff --git a/docs/solutions/imgs/block-publish-12.png b/docs/solutions/imgs/block-publish-12.png new file mode 100644 index 0000000000..cce62fdd73 Binary files /dev/null and b/docs/solutions/imgs/block-publish-12.png differ diff --git a/docs/solutions/imgs/block-publish-2.png b/docs/solutions/imgs/block-publish-2.png new file mode 100644 index 0000000000..7dc8e34aac Binary files /dev/null and b/docs/solutions/imgs/block-publish-2.png differ diff --git a/docs/solutions/imgs/block-publish-3.png b/docs/solutions/imgs/block-publish-3.png new file mode 100644 index 0000000000..78a29c8f08 Binary files /dev/null and b/docs/solutions/imgs/block-publish-3.png differ diff --git a/docs/solutions/imgs/block-publish-4.png b/docs/solutions/imgs/block-publish-4.png new file mode 100644 index 0000000000..31d4006960 Binary files /dev/null and b/docs/solutions/imgs/block-publish-4.png differ diff --git a/docs/solutions/imgs/block-publish-5.png b/docs/solutions/imgs/block-publish-5.png new file mode 100644 index 0000000000..d4dc9f9240 Binary files /dev/null and b/docs/solutions/imgs/block-publish-5.png differ diff --git a/docs/solutions/imgs/block-publish-6.png b/docs/solutions/imgs/block-publish-6.png new file mode 100644 index 0000000000..ce33180852 Binary files /dev/null and b/docs/solutions/imgs/block-publish-6.png differ diff --git a/docs/solutions/imgs/block-publish-7.png b/docs/solutions/imgs/block-publish-7.png new file mode 100644 index 0000000000..b2c229636c Binary files /dev/null and b/docs/solutions/imgs/block-publish-7.png differ diff --git a/docs/solutions/imgs/block-publish-8.png b/docs/solutions/imgs/block-publish-8.png new file mode 100644 index 0000000000..fc4841827c Binary files /dev/null and b/docs/solutions/imgs/block-publish-8.png differ diff --git a/docs/solutions/imgs/block-publish-9.png b/docs/solutions/imgs/block-publish-9.png new file mode 100644 index 0000000000..280330a015 Binary files /dev/null and b/docs/solutions/imgs/block-publish-9.png differ diff --git a/docs/solutions/imgs/block-publish-db-1.png b/docs/solutions/imgs/block-publish-db-1.png new file mode 100644 index 0000000000..8789c02490 Binary files /dev/null and b/docs/solutions/imgs/block-publish-db-1.png differ diff --git a/docs/solutions/imgs/create_block.png b/docs/solutions/imgs/create_block.png new file mode 100644 index 0000000000..6f4472b245 Binary files /dev/null and b/docs/solutions/imgs/create_block.png differ diff --git a/docs/solutions/imgs/events.png b/docs/solutions/imgs/events.png new file mode 100644 index 0000000000..d8ed9001a4 Binary files /dev/null and b/docs/solutions/imgs/events.png differ diff --git a/docs/solutions/imgs/java-deploy-image1.png b/docs/solutions/imgs/java-deploy-image1.png new file mode 100644 index 0000000000..a5ea9c55ce Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image1.png differ diff --git a/docs/solutions/imgs/java-deploy-image10.png b/docs/solutions/imgs/java-deploy-image10.png new file mode 100644 index 0000000000..931c19c966 Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image10.png differ diff --git a/docs/solutions/imgs/java-deploy-image11.png b/docs/solutions/imgs/java-deploy-image11.png new file mode 100644 index 0000000000..09fe980b61 Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image11.png differ diff --git a/docs/solutions/imgs/java-deploy-image12.png b/docs/solutions/imgs/java-deploy-image12.png new file mode 100644 index 0000000000..af7f39d991 Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image12.png differ diff --git a/docs/solutions/imgs/java-deploy-image13.png b/docs/solutions/imgs/java-deploy-image13.png new file mode 100644 index 0000000000..503465a676 Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image13.png differ diff --git a/docs/solutions/imgs/java-deploy-image14.png b/docs/solutions/imgs/java-deploy-image14.png new file mode 100644 index 0000000000..497f18a6db Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image14.png differ diff --git a/docs/solutions/imgs/java-deploy-image15.png b/docs/solutions/imgs/java-deploy-image15.png new file mode 100644 index 0000000000..637ba914f4 Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image15.png differ diff --git a/docs/solutions/imgs/java-deploy-image16.png b/docs/solutions/imgs/java-deploy-image16.png new file mode 100644 index 0000000000..39d924d6a5 Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image16.png differ diff --git a/docs/solutions/imgs/java-deploy-image17.png b/docs/solutions/imgs/java-deploy-image17.png new file mode 100644 index 0000000000..7d25a32250 Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image17.png differ diff --git a/docs/solutions/imgs/java-deploy-image18.png b/docs/solutions/imgs/java-deploy-image18.png new file mode 100644 index 0000000000..849b24a4c4 Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image18.png differ diff --git a/docs/solutions/imgs/java-deploy-image19.png b/docs/solutions/imgs/java-deploy-image19.png new file mode 100644 index 0000000000..56fc9e194b Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image19.png differ diff --git a/docs/solutions/imgs/java-deploy-image2.png b/docs/solutions/imgs/java-deploy-image2.png new file mode 100644 index 0000000000..0c22fd0729 Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image2.png differ diff --git a/docs/solutions/imgs/java-deploy-image20.png b/docs/solutions/imgs/java-deploy-image20.png new file mode 100644 index 0000000000..828e733aeb Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image20.png differ diff --git a/docs/solutions/imgs/java-deploy-image3.png b/docs/solutions/imgs/java-deploy-image3.png new file mode 100644 index 0000000000..9ecfbe49d3 Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image3.png differ diff --git a/docs/solutions/imgs/java-deploy-image4.png b/docs/solutions/imgs/java-deploy-image4.png new file mode 100644 index 0000000000..a152d45afb Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image4.png differ diff --git a/docs/solutions/imgs/java-deploy-image5.png b/docs/solutions/imgs/java-deploy-image5.png new file mode 100644 index 0000000000..d54bc07196 Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image5.png differ diff --git a/docs/solutions/imgs/java-deploy-image6.png b/docs/solutions/imgs/java-deploy-image6.png new file mode 100644 index 0000000000..c26f28c63e Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image6.png differ diff --git a/docs/solutions/imgs/java-deploy-image7.png b/docs/solutions/imgs/java-deploy-image7.png new file mode 100644 index 0000000000..14b9730e10 Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image7.png differ diff --git a/docs/solutions/imgs/java-deploy-image8.png b/docs/solutions/imgs/java-deploy-image8.png new file mode 100644 index 0000000000..c897d8c9e4 Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image8.png differ diff --git a/docs/solutions/imgs/java-deploy-image9.png b/docs/solutions/imgs/java-deploy-image9.png new file mode 100644 index 0000000000..ce27811995 Binary files /dev/null and b/docs/solutions/imgs/java-deploy-image9.png differ diff --git a/docs/solutions/imgs/npm1.png b/docs/solutions/imgs/npm1.png new file mode 100644 index 0000000000..59324aa653 Binary files /dev/null and b/docs/solutions/imgs/npm1.png differ diff --git a/docs/solutions/imgs/npm2.png b/docs/solutions/imgs/npm2.png new file mode 100644 index 0000000000..5bb42b9ab2 Binary files /dev/null and b/docs/solutions/imgs/npm2.png differ diff --git a/docs/solutions/imgs/npm3.png b/docs/solutions/imgs/npm3.png new file mode 100644 index 0000000000..3878856fef Binary files /dev/null and b/docs/solutions/imgs/npm3.png differ diff --git a/docs/solutions/imgs/property.png b/docs/solutions/imgs/property.png new file mode 100644 index 0000000000..1ca637da5b Binary files /dev/null and b/docs/solutions/imgs/property.png differ diff --git a/docs/solutions/imgs/publish_block.png b/docs/solutions/imgs/publish_block.png new file mode 100644 index 0000000000..cacaef5212 Binary files /dev/null and b/docs/solutions/imgs/publish_block.png differ diff --git a/docs/solutions/imgs/publish_block2.png b/docs/solutions/imgs/publish_block2.png new file mode 100644 index 0000000000..0d9a234ed8 Binary files /dev/null and b/docs/solutions/imgs/publish_block2.png differ diff --git a/docs/solutions/imgs/save_block.png b/docs/solutions/imgs/save_block.png new file mode 100644 index 0000000000..eb4d880b7d Binary files /dev/null and b/docs/solutions/imgs/save_block.png differ diff --git a/docs/solutions/imgs/slots.png b/docs/solutions/imgs/slots.png new file mode 100644 index 0000000000..3973bfea8e Binary files /dev/null and b/docs/solutions/imgs/slots.png differ diff --git a/docs/solutions/imgs/snippets.png b/docs/solutions/imgs/snippets.png new file mode 100644 index 0000000000..4a0208807b Binary files /dev/null and b/docs/solutions/imgs/snippets.png differ diff --git a/docs/solutions/imgs/synchronize-materials.png b/docs/solutions/imgs/synchronize-materials.png new file mode 100644 index 0000000000..8502e35398 Binary files /dev/null and b/docs/solutions/imgs/synchronize-materials.png differ diff --git a/docs/solutions/material-sync-solution.md b/docs/solutions/material-sync-solution.md new file mode 100644 index 0000000000..3a7cda1cc4 --- /dev/null +++ b/docs/solutions/material-sync-solution.md @@ -0,0 +1,42 @@ +## 物料同步方案 + +由于当前情况下物料无法通过页面交互维护,提供一个临时方案,由前端托管物料。 +在本地运行时提供nodejs脚本维护物料,执行脚本保证mockServer工程和前端工程物料的同步。如果启动了后端服务,还可以连接数据库,保证本地json文件和数据库的一致性。 + +![物料同步数据流转图](./imgs/synchronize-materials.png '物料同步数据流转图') +### 拆分脚本 + +```shell +pnpm splitMaterials +``` + +之前对物料的修改要先从大文件bundle.json中找到对应组件,然后进行修改调试,很容易出现找错组件或难以对比历史的情况。 +执行该脚本可以将物料资产包拆分为单个组件或区块,再结合构建的脚本,可以将修改限制在相对较小的文件中,便于维护物料和对比变更。 + +### 构建脚本 + +```shell +pnpm buildMaterials +``` + +结合拆分物料的脚本,只关心单个组件的变化。通过读取、写入本地文件和执行 sql 语句,同步更新物料资产包、应用数据和数据库,保证物料的一致性: + +- 读取单个组件或区块文件,构建为物料资产包 +- 读取单个组件文件,更新应用 mock 数据 appinfo 中的组件数据 +- 连接数据库,初始化组件表,将组件数据写入数据库 +- 监听组件文件变化,重新构建物料资产包和应用 mock 数据,新增或更新数据库中组件数据 + +### 注意事项 + +1. 本地还没有执行过拆分脚本的,先执行一次,后续可以不用再执行,只需要对单个组件进行维护 +2. 单个组件文件需要遵循物料协议,更新文件后保存即可触发重新构建物料资产包,刷新页面后生效 +3. 连接数据库失败,不影响构建本地物料资产包即bundle.json +4. 连接数据库需要的配置项在`.env.local`中 + +### 部署建议 + +需要将设计器进行部署时,关于物料的部署方案,以下供参考: + +1. 将bundle.json上传到CDN或是自己搭建的静态服务器,获得文件地址,修改lowcode.config.js中物料请求地址 +2. 将bundle.json随设计器一起打包,修改`useResource.fetchMaterial`中的实现,物料资产包数据由请求接口改为加载本地文件 +3. 新增构建物料资产包接口,从数据库获取组件表数据,组装成符合物料协议的物料资产包,将物料资产包的请求方式由CDN地址改为请求接口 \ No newline at end of file diff --git a/docs/solutions/server-deployment-solution-java.md b/docs/solutions/server-deployment-solution-java.md new file mode 100644 index 0000000000..1b20b8d1b0 --- /dev/null +++ b/docs/solutions/server-deployment-solution-java.md @@ -0,0 +1,158 @@ +# Java 服务端部署到服务器 + +## 1、配置服务器环境 + +以 Linux 类型 Huawei Cloud EulerOS 为例 + +- **安装 jdk 8** + +``` +suto yum install java-1.8.0-openjdk-devel +``` + +安装完成后,可以使用`java -version`命令来验证 JDK 是否安装成功 + +设置环境变量,在~/.bash_profile 文件中添加以下内容 + +``` +export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk +export PATH=$JAVA_HOME/bin:$PATH +``` + +再使用 source 命令使配置生效`source ~/.bash_profile` + +- **安装 maven** `suto yum install maven` + +若执行命令后报错如下,那么就进行手动安装 + +![](./imgs/java-deploy-image1.png) + +手动安装 maven + +1、添加 EPEL 仓库 + +maven 可能不在默认的仓库里,但在 EPEL(Extra Packages for Enterprise Linux)仓库中可以找到,因此首先安装 EPEL 仓库`sudo yum install epel-release`,安装完成后尝试重新安装 maven `sudo yum install maven` + +若报错如下图,继续以下步骤 + +![](./imgs/java-deploy-image2.png) + +2、从 Apache Maven 官方网站下载 Maven + +可以用 wget 下载到你服务器上,例如下载 maven 3.9.9 版本 wget `https://downloads.apache.org/maven/maven-3/3.9.9/binaries/apache-maven-3.9.9-bin.tar.gz +` + +![](./imgs/java-deploy-image3.png) +3、解压并安装 maven + +- 解压下载的 tar 文件`tar -zxvf apache-maven-3.9.9-bin.tar.gz` + +- 将 maven 移动到喜欢的位置,例如 tinyengine/maven,进入 tinyengine/maven 路径下执行`sudo mv /root/apache-maven-3.9.9 .` + + ![](./imgs/java-deploy-image4.png) + +4、设置环境变量 + +在~/.bash_profile 文件中添加以下内容 + +``` +export M2_HOME=/root/tinyengine/maven +export M2=$M2_HOME/apache-maven-3.9.9/bin +export PATH=$M2:$PATH +``` + +再使用 source 命令使配置生效`source ~/.bash_profile` + +5、验证 maven 安装是否成功`mvn -version` + +如果一切正常将会看到 maven 的版本信息,如下图所示 + +![](./imgs/java-deploy-image5.png) + +- **安装 mysql** + +1、添加 mysql 仓库 + +首先下载并添加 mysql 仓库 wget` https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm` + +2、安装 mysql 仓库`sudo rpm -ivh mysql80-community-release-el7-3.noarch.rpm` + +3、安装 mysql`sudo yum install mysql-server` + +4、启动 mysql 服务并设置为开机自启动 + +``` +sudo systemctl start mysqld +sudo systemctl enable mysqld +``` + +若启动 mysql 报错查看 mysql 日志`cat /var/log/mysqld.log`,如下图所示,端口 3306 已占用 + +![](./imgs/java-deploy-image6.png) + +执行`lsof -i :3306`查看端口占用情况,以下可以看出 docker-pr 进程正在占用 mysql 默认的 3306 端口 + +![](./imgs/java-deploy-image7.png) +修改 mysql 配置文件/etc/my.cnf 中端口号,再重新启动 mysql`sudo systemctl restart mysqld` + +![](./imgs/java-deploy-image8.png) +![](./imgs/java-deploy-image9.png) + +5、查看 mysql 是否安装`mysql -V` + +![](./imgs/java-deploy-image10.png) + +6、查看 mysql 服务状态,以下表示正在运行`sudo systemctl status mysqld` + +![](./imgs/java-deploy-image11.png) + +## 2、登录 mysql 创建数据库并执行 SQL 文件 + +- 登录执行`sudo mysql -u root -p`,输入密码,若忘记想重置密码进行以下步骤: + +1、以系统管理员身份登录进入 mysql `sudo mysql` + +2、重置 root 用户密码`ALTER USER 'root'@'localhost' IDENTIFIED BY 'new_password';` + +`'new_password'`为设置的新密码 + +3、退出 mysql `exit;` + +4、用新密码重新登录`sudo mysql -u root -p` + +- 创建数据库 `CREATE DATABASE tiny_engine_data_java;` + + ![](./imgs/java-deploy-image12.png) + +- 查看是否创建成功`SHOW DATABASES;` + + ![](./imgs/java-deploy-image13.png) + +- 切换数据库`USE tiny_engine_data_java;` + ![](./imgs/java-deploy-image14.png) + +- 执行 SQL 创表文件`source /root/tiny-engine-backend-java/app/src/main/resources/sql/mysql/create_all_tables_ddl_v1.mysql.sql;` + + ![](./imgs/java-deploy-image15.png) + +- 执行 SQL 初始化数据文件`source /root/tiny-engine-backend-java/app/src/main/resources/sql/mysql/init_data_for_test.sql;` + +![](./imgs/java-deploy-image16.png) + +- 检查是否执行成功`SHOW TABLES;` + +![](./imgs/java-deploy-image17.png) + +## 3、克隆 Java 项目并启动 + +- 在 github 上通过生成 access_token 下载代码到虚拟机上 + + ![](./imgs/java-deploy-image18.png) + +- 在项目根目录运行构建命令`mvn clean package`生成 jar 包,生成的 jar 包文件目录在`tiny-engine-backend-java/app/target`下的 tiny-engine-app-1.0-SNAPSHOT.jar + +![](./imgs/java-deploy-image19.png) + +- 在 tiny-engine-backend-java/app 下执行`java -jar target/tiny-engine-app-1.0-SNAPSHOT.jar`启动工程 + +![](./imgs/java-deploy-image20.png) diff --git a/docs/solutions/server-deployment-solution.md b/docs/solutions/server-deployment-solution.md new file mode 100644 index 0000000000..747afa86a4 --- /dev/null +++ b/docs/solutions/server-deployment-solution.md @@ -0,0 +1,343 @@ +# 部署前的准备 + +* clone tiny-engine-webservice 微服务 : [代码仓库](https://github.com/opentiny/tiny-engine-webservice) +* clone tiny-engine-data-center 微服务: [代码仓库](https://github.com/opentiny/tiny-engine-data-center) +* mysql 数据库 + +mysql官网下载 https://dev.mysql.com/downloads/ + +选择如图所示 + +![mysql官网下载](./imgs/backend_deploy_1.png) + +根据操作系统选择相应版本下载 + +![mysql官网下载](./imgs/backend_deploy_2.png) + +下载sql文件 + +- [基础数据SQL文件](https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/%E5%9F%BA%E7%A1%80%E6%95%B0%E6%8D%AE.sql) + +- [自实现数据中心-设计器涉及表](https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/%E8%87%AA%E5%AE%9E%E7%8E%B0%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%BF%83-%E8%AE%BE%E8%AE%A1%E5%99%A8%E6%B6%89%E5%8F%8A%E8%A1%A8.sql) + +**注意** + +1. 我们推荐使用mysql 5.7, 遇到其他版本如果data-center服务启动报错: + `Client does not support authentication protocol requested by server; consider upgrading MySQL...` + mysql 8 之前的版本中加密规则是`mysql_native_password`,而在mysql8之后,加密规则是`caching_sha2_password`,所以需要**改变mysql的加密规则。** + +2. 请先执行 `自实现数据中心-设计器涉及表.sql` 创建数据库和表, 之后再执行 `基础数据.sql` 插入示例数据。再启动data-center服务。 + *如果您不想使用我们的data-center,准备自实现数据中心或无数据中心直连数据库,步骤顺序也是跟上面一致* + +# 环境变量配置 + +TinyEngine服务端需要配置的环境变量清单如下: + +## 环境变量清单 + +### tiny-engine-webservice 环境变量配置 + +|变量名称|说明 +|---|---| +|GIT_USERNAME|应用发布时具备push代码权限的代码仓用户名| +|GIT_EMAIL|应用发布时具备push代码权限的代码仓的用户邮箱| +|GIT_USER_TOKEN|应用发布时具备push代码权限的代码仓token| +|GIT_REPO|应用发布时的代码仓地址| +|GIT_BRANCH|应用发布时默认提交代码的分支 +|DATA_CENTER_URL|数据中心地址,例如: `https://www.mydatacenter.com` | +|PROXY_SERVER|选择性设置,如果自己的服务器需要代理服务才能访问外部数据,需要配置代理服务的地址| +|OPENAI_API_KEY|AI接口 openai的 API key| +|WENXIN_ACCESS_TOKEN|AI接口 文心一言的access_token (30天一更新)| +|NPM_AUTH_TOKEN| npmjs.com 的用户具备publish权限的authToken, 用户发布区块| + +以下为参考环境变量配置项: + +#### obs 配置 + +此次开源代码提供了搭配华为云obs的使用示例: + +|变量名称|说明 +|---|---| +|OBS_AK|obs AK 本示例代码使用华为云obs,如果使用其他云服务产品请搜索相关代码修改逻辑适配| +|OBS_SK|obs SK 本示例代码使用华为云obs,如果使用其他云服务产品请搜索相关代码修改逻辑适配| +|OBS_ACCESS_URL|obs的资源访问url,例如:`https://tinyengine.obs.cn-north-4.myhuaweicloud.com/somepath/somefile.tar.gz`| +|OBS_SERVICE_URL|使用obs sdk时传入的obs服务链接参数,例如:`https://obs.cn-north-4.myhuaweicloud.com` | + +#### RabbitMQ 配置 + +此次开源代码提供了连接RabbitMQ任务队列的使用示例(开源代码中RabbitMQ 插件处于关闭状态,如果需要请开启。 同时恢复项目根目录下`app.ts`中被注释的代码): + +|变量名称|说明 +|---|---| +|MQ_IP|任务队列服务ip地址| +|MQ_PORT|任务队列服务端口,例如 5671| +|MQ_USERNAME|任务队列服务用户名| +|MQ_PASSWORD|任务队列服务密码| + +如果涉及到自身服务的CI/CD 部署 或容器化部署请根据自身所属产品、工具的特点按照上面的清单配置环境变量; + +### tiny-engine-data-center 环境变量配置 + +|变量名称|说明 +|---|---| +|MYSQL_HOST|mysql服务ip地址| +|MYSQL_PORT|mysql服务端口,默认 3306| +|MYSQL_DBNAME|mysql 服务数据库名称| +|MYSQL_PASSWORD|mysql服务密码| + +如果使用了redis, 配置示例如下: + +|变量名称|说明 +|---|---| +|REDIS_HOST|redis服务ip地址| +|REDIS_PORT|redis服务端口,默认 6380| +|RADIS_PASSWORD|redis服务密码| +|REDIS_DB|redis连接的存储区编号, 默认 2| + +## 本地运行时配置方式: + +### git-bash 或 bash + +`vi ~/.bashrc` + +```shell +export MQ_IP=192.168.0.11 +export MQ_PORT=5671 +# 等等环境变量 +``` + +设置完后,重新打开命令行或在当前命令行执行以下命令,让设置的环境变量生效。(git bash中设置的环境变量无法适用于powershell 和cmd) + +```sh +source ~/.bashrc +``` + + +### windows环境 + +![windows环境](./imgs/backend_deploy_4.png) + +配置完毕后,关闭命令行工具重新打开 + +# 启动服务 + +## tiny-engine-data-center + +进入到项目根目录下,依次执行 + +```sh +npm install --ignore-engines +npm run build +npm run dev +``` + +出现如下图所示,表示启动成功 + +![启动脚本](./imgs/backend_deploy_8.png) + +## tiny-engine-webservice + +nodejs版本选择: `>= 16` + +进入到项目根目录下,一次执行: + +```sh +npm install --ignore-engines +npm run dev +``` + +出现如下图所示,表示启动成功 + +![启动脚本](./imgs/backend_deploy_7.png) + + + +## TinyEngine + +修改tiny-engine项目(v1.x分支代码) `packages/design-core` 目录下 `vite.config.js` 中**origin**的值为自己本地webService项目的地址端口(webService端口默认为7011) + +![TinyEngine](./imgs/backend_deploy_5.png) + +运行如下脚本启动 +```sh +pnpm install # 第一次启动项目需要 +pnpm serve:frontend +``` + +![TinyEngine](./imgs/backend_deploy_6.png) + + +初次启动后,需要进行一次物料编译初始化编译,前后端同步,具体请查看 [此文档](./material-sync-solution.md) + +启动成功后浏览器会自动打开设计器页面 + + +# 服务部署 + +本位的服务部署,以将设计器前端资源放入webService静态服务托管,并分别启动 webService 和 data-center 为例。 + +此示例仅供参考,实际生产部署以企业、组织内部具体情况具体分析。 + +## 前端资源打包 + +在tiny-engine项目中 + +修改 [此处代码](https://github.com/opentiny/tiny-engine/blob/develop/packages/design-core/vite.config.js#L18) 为: + +```js +const config = { + base: '/' + .... +} +``` + +先执行`pnpm build:plugin` + +再执行`pnpm run build:prod` + +## Web Service 整改 + +### 第一步:存放静态资源 + +将设计器构建产物(在`tiny-engine/packages/design-core/dist`目录下)存放到 web-service 里的`/app/public` 文件夹下 + +![image](./imgs/backend_deploy_9.png) + +在 `app` 目录下新建`view` 文件夹, 再将`public` 文件夹中的 .html 文件放入`view` 目录中: + +![image](./imgs/backend_deploy_10.png) + +### 第二步:安装并配置渲染引擎 + +安装模板渲染引擎: +`npm install egg-view-nunjucks --save` + +安装完毕后配置插件: `/config/plugin.ts` + +```js +const plugin: EggPlugin = { + .... + nunjucks: { + enable: true, + package: 'egg-view-nunjucks' + } +} +``` + +修改配置文件: `/config/config.default.ts` + +```js +export default (appInfo) => { + .... + config.static = { + prefix: '' + }; + config.view = { + root: path.join(appInfo.baseDir, 'app/view'), + defaultViewEngine: 'nunjucks' + } + .... +} +``` + +### 第三步:配置路由 + +新增Controller: `/app/controller/home.ts` + +```js +export default class HomeController extends Controller { + + .... + + public async index() { + await this.ctx.render('index'); + } + + public async canvas() { + await this.ctx.render('canvas'); + } + + public async preview() { + await this.ctx.render('preview'); + } + + public async previewApp() { + await this.ctx.render('previewApp') + } +} +``` + +新增路由:`/app/router.ts` + +```js +export default (app: Application) => { + const { controller, router } = app; + .... + + router.get('/entry', controller.home.index); + router.get('/entry/canvas', controller.home.canvas); + router.get('/entry/preview', controller.home.preview); + router.get('/entry/previewApp', controller.home.previewApp); +}; +``` + +使用本地开发流程,启动服务成功后访问 + +`http://localhost:7011/entry?id=918&type=app` + +验证是否存在问题,如正常则部署服务 + +## 部署服务 + +在本地开发 `npm run dev` 验证正确后部署服务: + +### 部署data-center + +进入项目根目录,依次执行以下命令: + +```sh +npm install --ignore-engines +npm run build +npm run start +``` + +### 部署webService + +首先:配置数据中心环境变量`DATA_CENTER_URL` + +其次:调整日志保存路径(此处修改仅为参考,请根据实际情况修改日志保存路径):`package.json` + +```json +{ + "scripts": { + "start": "egg-scripts start --daemon --stdout=./logs/master-stdout.log --stderr=./logs/master-stderr.log --title=lowcode-webservice", + "stop": "egg-scripts stop --stdout=./logs/master-stdout.log --stderr=./logs/master-stderr.log --title=lowcode-webservice", + .... + }, +} +``` +> **注意:** 如果是通过docker容器的方式部署,去掉start脚本中的--daemon参数,不然docker会自动停止服务 + +接着进入项目根目录,依次执行以下命令: + +```sh +npm install --ignore-engines +npm install egg-view-nunjucks --save +npm run tsc +npm run start +``` + +停止服务,执行 + +```sh +npm run stop +``` + +**注意: 生产部署启动的端口号为 7001, 此处和本地开发存在区别** + +## 基础数据SQL文件 +[基础数据SQL文件](https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/%E5%9F%BA%E7%A1%80%E6%95%B0%E6%8D%AE.sql) + + +## 自实现数据中心-设计器涉及表SQL +[自实现数据中心-设计器涉及表SQL](https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/%E8%87%AA%E5%AE%9E%E7%8E%B0%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%BF%83-%E8%AE%BE%E8%AE%A1%E5%99%A8%E6%B6%89%E5%8F%8A%E8%A1%A8.sql) diff --git a/docs/solutions/third-party-library-in-designer.md b/docs/solutions/third-party-library-in-designer.md new file mode 100644 index 0000000000..d4b73054ba --- /dev/null +++ b/docs/solutions/third-party-library-in-designer.md @@ -0,0 +1,454 @@ +# 如何在设计器中引入第三方组件库 + +## 前置介绍 +可拖拽到画布中渲染的我们称之为物料,物料来源于内置组件包和物料资产包,物料资产包包含组件和区块。物料资产包的配置参考[物料资产包协议](https://www.opentiny.design/tiny-engine#/protocol)。 + +## 配置第三方组件库组件 +物料资产包默认提供了@opentiny/vue组件库的组件。在一些场景下,需要用到第三方的组件库,下面将以element-plus组件库中的输入框组件(ElInput)为例,介绍如何引入第三方组件库的组件,打通包括画布渲染,配置属性、事件、插槽以及预览的全流程。 + +### 配置组件 +在前置介绍,我们知道了在画布中渲染组件需要将组件配置到物料资产包中,根据[物料资产包协议](https://www.opentiny.design/tiny-engine#/protocol),配置包含两大类:组件配置components、组件面板配置snippets。下面将在协议基础上对**核心字段**作进一步的解释,可以打开源码中物料资产包文件(packages\design-core\public\mock\bundle.json)逐个理解。 + +#### 组件配置-components + +| 字段 | 类型 | 说明 | +| --- | --- | --- | +| component | String | 组件名。在画布中渲染时的组件名,对标vue组件的名称,如ElInput | +| npm | Object | 组件npm包信息。在动态导入组件模块和预览出码时必需 | +| npm.package | String | npm包名。组件所在包的名称,可在[npm](https://www.npmjs.com/)中查找到的包名,用于生成导入语句 | +| npm.version | String | npm包的版本号。用于出码时写入package.json文件的依赖信息 | +| npm.exportName | String | 导出名称。从npm包中import的名称,如import { ElInput } from 'element-plus' | +| npm.destructuring | String | 是否解构。取决于npm包导出当前组件的方式是export还是export default | +| npm.script | String | 脚本文件CDN。用于画布动态导入组件和预览的importmap,必须是ESModule格式。
*如何获取:先到[unpkg](https://unpkg.com/)查找。如果没有找到,可以使用[esm](https://esm.sh/#docs)尝试,如:[https://esm.sh/element-plus@2.4.1]* | +| npm.css | String | css文件CDN。获取方式可参考上面脚本CDN | +| schema | Object | 属性-properties、事件-events、插槽-slots | + +##### 属性-properties + +以ElInput的属性举例: + +![property]( ./imgs/property.png) + +| 字段 | 类型 | 说明 | +| --- | --- | --- | +| property | String | 属性名。如:placeholder | +| type | String | 属性类型。如:string、boolean | +| label | Object | 属性显示的名称。如:输入框占位文本 | +| defaultValue | String | 属性的默认值。 | +| widget | Object | 配置属性的渲染组件和传入渲染组件的属性配置 | +| widget.component | String | 配置属性的渲染组件。如MetaInput、MetaSelect。一般可以通过属性的类型判断选用哪个组件,string类型一般选择MetaInput或MetaBindI18n、enum类型一般选择MetaSelect、object类型一般选择MetaCodeEditor | +| widget.props | Object | 配置传入渲染组件的属性配置。如options | + +```json +// materials.components[index].schema.properties[0].content +[ + { + "property": "placeholder", // 属性字段名 + "label": { // 属性名称 + "text": { + "zh_CN": "输入框占位文本" + } + }, + "description": { // 属性说明,鼠标悬浮属性名称时显示 + "zh_CN": "输入框占位文本" + }, + "required": false, + "readOnly": false, + "disabled": false, + "cols": 12, // 属性所占宽度格数,一共12 + "labelPosition": "top", // 属性名称位置 + "type": "string", // 属性类型 + "defaultValue": "请输入", // 属性默认值 + "widget": { // 属性配置选用的组件配置 + "component": "MetaBindI18n", // 属性配置的组件 + "props": {} // 传入组件的属性 + }, + "device": [] + }, + { + "property": "size", + "label": { + "text": { + "zh_CN": "尺寸" + } + }, + "description": { + "zh_CN": "输入框尺寸,只在 type 不为 'textarea' 时有效" + }, + "required": true, + "readOnly": false, + "disabled": false, + "cols": 12, + "labelPosition": "top", + "type": "string", + "defaultValue": "large", + "widget": { + "component": "MetaInput", + "props": {} + } + } +] +``` + +##### 事件-events + +以ElInput的事件举例: + +![events]( ./imgs/events.png) + +```json +// materials.components[index].schema.events +{ + "onBlur": { // 事件的名称为 on+大写字母 开头 + "label": { + "zh_CN": "失焦事件" // 事件名称 + }, + "description": { + "zh_CN": "在 Input 失去焦点时触发" + }, + "type": "event", + "functionInfo": { + "params": [ // 事件参数 + { + "name": "event", + "type": "Object", + "defaultValue": "", + "description": { + "zh_CN": "原生 event" + } + } + ], + "returns": {} + }, + "defaultValue": "" + } +} +``` + +##### 插槽-slots + +以ElInput的插槽举例: + +![slots]( ./imgs/slots.png) + +```json +// materials.components[index].schema.slots +{ + "prefix": { + "label": { + "zh_CN": "头部内容" // 插槽名称 + }, + "description": { + "zh_CN": "输入框头部内容,只对非 type='textarea' 有效" // 插槽说明,在鼠标悬浮提示图标时显示 + } + }, + "suffix": { + "label": { + "zh_CN": "尾部内容" + }, + "description": { + "zh_CN": "输入框尾部内容,只对非 type='textarea' 有效" + } + }, + "prepend": { + "label": { + "zh_CN": "前置内容" + }, + "description": { + "zh_CN": "输入框前置内容,只对非 type='textarea' 有效" + } + }, + "append": { + "label": { + "zh_CN": "后置内容" + }, + "description": { + "zh_CN": "输入框后置内容,只对非 type='textarea' 有效" + } + } +} +``` + +#### 组件面板配置-snippets + +![snippets]( ./imgs/snippets.png) + +```json +// materials.snippets +[ + { + "group": "element-plus", // 分类名称,折叠面板标题 + "children": [ + { + "name": { + "zh_CN": "ElInput" // 面板中的组件名称 + }, + "icon": "input", // 组件显示的图标,对应目录packages\design-core\assets\下的svg文件名称,如input.svg + "screenshot": "/img/logo.png", + "snippetName": "ElInput", // 用于检索components中的组件配置,对应组件配置中的component字段 + "schema": { // 拖拽组件到画布后插入组件schema的内容 + "children": [ // 拖拽组件到画布后默认渲染的子节点 + { + "componentName": "Template", // Template会被识别为插槽,实际渲染时会忽略 + "props": { + "slot": { + "name": "prefix" // 插槽名 + } + }, + "children": [] + } + ] + } + } + ] + } +] +``` + +### 预览 +本地预览调用mockServer的接口,修改的物料资产包需要同步到mockServer的数据。 +- 打开应用数据文件:mockServer\src\services\appinfo.json +- 将组件数据(bundle.json中的data.material.components)拷贝到appinfo.materialHistory.components +- 刷新页面,点击预览 + +## 完整的物料资产包 +经过上面的介绍,我们可以生成一个以ElInput为例的物料资产包,如果需要添加其他的组件,参照本示例添加组件配置和组件面板配置即可。 + +```json +{ + "data": { + "framework": "Vue", + "materials": { + "components": [ + { + "id": 456, + "version": "2.3.8", + "name": { + "zh_CN": "ElInput" + }, + "component": "ElInput", + "icon": "input", + "description": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型", + "doc_url": "", + "screenshot": "/img/logo.png", + "tags": "", + "keywords": "", + "dev_mode": "proCode", + "npm": { + "package": "element-plus", + "version": "2.3.8", + "script": "https://unpkg.com/element-plus@2.3.8/dist/index.full.mjs", + "css": "https://unpkg.com/element-plus@2.3.8/dist/index.css", + "dependencies": null, + "exportName": "ElInput" + }, + "group": "表单组件", + "category": "element-plus", + "configure": { + "loop": true, + "condition": true, + "styles": true, + "isContainer": false, + "isModal": false, + "isPopper": false, + "nestingRule": { + "childWhitelist": "", + "parentWhitelist": "", + "descendantBlacklist": "", + "ancestorWhitelist": "" + }, + "isNullNode": false, + "isLayout": false, + "rootSelector": "", + "shortcuts": { + "properties": ["text", "size"] + }, + "contextMenu": { + "actions": ["copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock"], + "disable": [] + }, + "invalidity": [""], + "clickCapture": true, + "framework": "Vue" + }, + "createdBy": 86, + "created_at": "2023-08-29T07:45:28.000Z", + "updated_at": "2023-09-11T09:52:11.000Z", + "public": 1, + "framework": "Vue", + "isOfficial": false, + "isDefault": false, + "tiny_reserved": false, + "tenant": null, + "component_metadata": { + "events": [], + "attrs": [ + { + "property": "placeholder", + "type": "string", + "defaultValue": null, + "enumerateValue": null, + "title": null, + "_RID": "row_1" + }, + { + "property": "size", + "type": "string", + "defaultValue": null, + "enumerateValue": null, + "title": null, + "_RID": "row_2" + } + ], + "slots": [] + }, + "library": 1, + "schema": { + "properties": [ + { + "name": "0", + "label": { + "zh_CN": "分组1" + }, + "content": [ + { + "property": "size", + "label": { + "text": { + "zh_CN": "size" + } + }, + "required": true, + "readOnly": false, + "disabled": false, + "cols": 12, + "labelPosition": "left", + "type": "string", + "widget": { + "component": "MetaInput", + "props": {} + } + }, + { + "property": "placeholder", + "label": { + "text": { + "zh_CN": "placeholder" + } + }, + "required": true, + "readOnly": false, + "disabled": false, + "cols": 12, + "labelPosition": "left", + "type": "string", + "widget": { + "component": "MetaBindI18n", + "props": {} + }, + "description": { + "zh_CN": "" + }, + "device": [] + } + ], + "description": { + "zh_CN": "" + } + } + ], + "events": { + "onBlur": { + "label": { + "zh_CN": "失焦事件" + }, + "description": { + "zh_CN": "在 Input 失去焦点时触发" + }, + "type": "event", + "functionInfo": { + "params": [ + { + "name": "event", + "type": "Object", + "defaultValue": "", + "description": { + "zh_CN": "原生 event" + } + } + ], + "returns": {} + }, + "defaultValue": "" + } + }, + "slots": { + "prefix": { + "label": { + "zh_CN": "头部内容" + }, + "description": { + "zh_CN": "输入框头部内容,只对非 type='textarea' 有效" + } + }, + "suffix": { + "label": { + "zh_CN": "尾部内容" + }, + "description": { + "zh_CN": "输入框尾部内容,只对非 type='textarea' 有效" + } + }, + "prepend": { + "label": { + "zh_CN": "前置内容" + }, + "description": { + "zh_CN": "输入框前置内容,只对非 type='textarea' 有效" + } + }, + "append": { + "label": { + "zh_CN": "后置内容" + }, + "description": { + "zh_CN": "输入框后置内容,只对非 type='textarea' 有效" + } + } + } + } + } + ], + "snippets": [ + { + "group": "element-plus", + "children": [ + { + "name": { + "zh_CN": "ElInput" + }, + "icon": "button", + "screenshot": "/img/logo.png", + "snippetName": "ElInput", + "schema": { + "children": [ + { + "componentName": "Template", + "props": { + "slot": { + "name": "prefix" + } + }, + "children": [] + } + ] + } + } + ] + } + ], + "blocks": [] + } + } +} +``` \ No newline at end of file diff --git a/docs/tutorials/build-a-page-from-scratch.md b/docs/tutorials/build-a-page-from-scratch.md new file mode 100644 index 0000000000..784dc9447c --- /dev/null +++ b/docs/tutorials/build-a-page-from-scratch.md @@ -0,0 +1,3 @@ +# 从零搭建一个页面 + + diff --git a/docs/tutorials/issue-1-2023.10.27.md b/docs/tutorials/issue-1-2023.10.27.md new file mode 100644 index 0000000000..9e1e585c68 --- /dev/null +++ b/docs/tutorials/issue-1-2023.10.27.md @@ -0,0 +1,201 @@ +# 直播答疑视频链接 + +- [https://www.bilibili.com/video/BV16j411e7y2/](https://www.bilibili.com/video/BV16j411e7y2/) + +# 基础功能使用类问题 + +### 问题1:如何使用第三方组件库? + +答:详情可以查看[如何在设计器中引入第三方组件库](../solutions/third-party-library-in-designer.md "dev") + +### 问题2:如何使用插槽? + +答:详情可以查看[插槽的声明与使用](../advanced-features/how-to-use-slots.md "engine") + +### 问题3:通过 TinyEngine 低代码引擎生成代码到本地时,如何将生成的源码页面独立放置在自己的项目中,提供example? + +> 当前我们的出码结果依赖官方出码模板,暂时无法放置在自己项目中独立运行 + +第一步:下载 github.com/opentiny/ti… 工程,解压 +第二步:将代码下载到解压好的文件夹中(提示选择文件夹的时候,选择我们解压出来的文件夹) +第三步:用代码编辑器打开文件夹,确认出码结果,安装依赖并运行 npm run dev 启动服务,查看效果 +后续相关的规划: + +- 支持开发插件,自定义出码结果 +- 支持自定义工程模板,结合自定义出码结果,可以无缝在自身项目中运行 + +### 问题4:怎样在 TinyEngine 低代码引擎中扩展左侧组件,比如创建用户、单位选择。在 form 表单里面使用,拖入这2个控件,可以弹出 dialog 框选择用户和单位,点击确定后回填到表单上 input 框上? + +答:如果是想从零搭建业务组件,可以查看官方的文档教程尝试一步一步搭建(目前使用手册已更新) +如果是已有的业务组件,可以尝试通过导入第三方组件库的方式导入到左侧物料中。 + +### 问题5:分析下 TinyEngine 低代码引擎中左侧组件、中间区域渲染和右侧组件属性的代码在整体上协调一致的思路? + +答:先简要介绍一下我们工程中主要的 package: + + ```js +  |_ canvas  负责中间画布渲染 +  |_ common  公共的组件以及 metaComponent  +  |_ controller  公共逻辑控制层 +  |_ design-core 总入口 +  |_ http  负责 http 相关请求 +  |_ i18n lowcode-i18n 包裹层 +  |_ plugins  左侧面板相关插件 +  |_ settings 右侧设置面板相关组件 +  |_ svgs svg 封装组件 +  |_ theme  主题相关样式 +  |_ toolbars 顶部工具栏相关 package +  |_ utils 公共utils +  |_ vue-generator 出码package +  |_ webcomponent webcomponent 封装 + ``` + +区域大致职责划分: + +- 左侧面板相关的范围:负责设置一些应用状态、页面状态、以及逻辑的控制、编写 +- 中间画布:负责视图层的编排 +- 右侧属性面板:负责视图层的属性控制、样式精细编排、事件绑定等属性相关 + +主要的功能入口: + +1、资源请求 + + ```js +// packages/design-core/src/App.vue +// 这里发起请求物料、请求数据源、请求页面等相关资源请求,很关键 +useResource().fetchResource() + ``` + +2、画布渲染相关入口 + + ```js +packages +  |_ canvas +    |_ src +      |_ components +        |_ render +          |_ runner.js # 用于画布相关的资源请求,预设 +          |_ RenderMain.js # 画布渲染的入口,同时也暴露了许多 api 供修改 schema +          |_ render.js # RenderMain.js 会调用该文件的 renderer 方法,递归渲染 schema + ``` + +3、画布选中后,如何关联渲染右侧属性面板? + + ```js +// DesignCanvas.vue + +// 画布中节点选中后,会触发该方法 +const nodeSelected = (node, parent, type) => { +  const { toolbars } = useLayout().layoutState +  if (type !== 'clickTree') { +    useLayout().closePlugin() +  } +  // 动态计算该方法需要渲染的 属性面板 +  useProperties().getProps(node, parent) +  // 设置当前 schema +  useCanvas().setCurrentSchema(node) +  footData.value = getNodePath(node?.id) +  toolbars.visiblePopover = false +} + ``` + + ```js +// settings/props/src/Main.vue + + + + + + ``` + +上面就是一些简单的入口简介,后续,我们会增加更多详细的架构原理、功能设计相关的文档,敬请期待 + +### 问题6:TinyEngine 低代码引擎是否提供排版组件,怎么实现灵活排版? + +答:我们目前有内置的排版组件——行列容器,可以通过简单的剪切方式实现轻松的 flex 布局。 + +### 问题7:在使用 TinyEngine 低代码引擎时,组件内的静态资源(图片或者音频)如何引用? + +答:这个问题要分多种情况讨论, + +- 设计器开发: +可以拉下来源代码,按照原来静态资源图片等分类,放置进去要用的图片,在开发设计器的时候可以直接使用。 + +- 页面运行态: +可以通过 标签选中你要的静态资源,这部分的逻辑完全取决于用户 + +- 页面设计态: +低代码引擎在开源之前是有这样的功能的,但是为了开源的合规,屏蔽了该功能。因为在设计态想用到静态资源的话,要选中静态资源,并上传到公司的文件管理系统,然后文件系统返回静态资源地址,然后再展示在画布中。如果用户想要这样的功能,只需要开发一个文件上传按钮,并把上传的内容放置用户的文件管理系统。 + +### 问题8:修改 TinyEngine 低代码引擎的物料描述文件 bundle.json 之后,无变化是什么原因? + +答:可以关注一下以下 bundle.json 这个文件的设置是否正确,尤其是 widget.component 这个字段 +以下为 bundle.json 这个文件的节选: + +```json +{ "property": "text", +    "label": { +      "text": { +        "zh_CN": "按钮名称", +        "en_US": "Button Name" +       } +    }, +    "required": true, +     "readOnly": false, +     "disabled": false, +     "cols": 12, +     "widget": { +       "component": "MetaBindI18n", +       "props": {} +      }, +     "description": { +         "zh_CN": "按钮名称", +         "en_US": "Name of the button." +       } +   } +``` + +### 问题9:在使用 TinyEngine 低代码引擎后,组件之间应该如何联动? + +答:实现的方式是多种的, +方式一:假如 A(输入框)与 B(显示框)联动,那么可以给 A 绑定一个 change 事件,直接影响 B的显示 +方式二:给 B 绑定一个值,通过影响 B 的值,从而影响 B 的显示。 +方式三:通过 watch 监听 + +# 功能增强拓展类问题 + +### 问题1:如何将 TinyEngine 低代码引擎项目集成到 .net 项目中? + +答:原来的.net 系统可以继续独立运行,当需要跳转到低代码系统时候。从原来的.net系统带出关键参数。如 projectId, itemId, processId 等,通过URL的传参形式:https://xxxxxxxxxxx?projectId=1111&itemId=2222222&processId=33333333。 跳转到低代码系统后,在代码系统初始化时候获取URL的参数,通过服务端API接口获取到相应的流程、页面、物料等等信息。通过低代码系统搭建页面会产生schema或者源代码,在点击保存按钮的时候可以把想要的产物保存回来原来的.net系统中。 + +### 问题2:Java 后端开源的规划? + +答:目前服务端有两套源代码,一套技术栈是 node.js ,一套技术栈是 Java。因为要从公司流程流程审批、技术评估还有后面的迭代演进等维度考虑,目前还不知最终会开源哪种技术栈的服务端。大家敬请期待12月30号左右的公告 + +### 问题3:TinyEngine 低代码引擎是否会增加 typescript 支持? + +答:目前暂不支持,后续有在规划增加 typescript 的支持,大家敬请期待 + +### 问题4:TinyEngine 低代码引擎是否提供商业版本或者商业上的技术支持? + +答:目前只有一个开源版本的代码,没有商业版本。至于商业技术上的支持,可以找到 OpenTiny 的小助手沟通,详细沟通一下贵司具体需要的商业支持。 + +### 问题5:后续是否会继续迭代 AI 能力? + +答:AI 能力目前已经在 TinyEngine 官网部署,当前采用的大模型是文心一言,通过 AI生成代码->生成 AST->页面 schema->展示在页面->下载源代码 ,后续会切回华为的盘古大模型。现在 AI 能力的取决于文心一言生成的代码。同时我们也通过数据和资源的不断投入在持续训练我们的 AI 能力,大家敬请期待 AI 能力的持续迭代。 + +### 问题6:TinyEngine 低代码引擎是否支持 nuxt.js 作为后端的开发? + +答:后端的开发与技术栈无关,是可以采用任意的技术栈的。我们提供了所有后端接口的文档,只需要按照设计器的文档来,给出对应接口的出入参即可。 + +### 问题7:目前 TinyEngine 低代码引擎的物料平台是否会开源? + +答:TinyEngine 目前是用到的物料是已开源的 TinyVue 组件库,欢迎大家使用~ \ No newline at end of file diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 0000000000..29d90a357d --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,76 @@ +import js from '@eslint/js' +import { configureVueProject, defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript' +import pluginVue from 'eslint-plugin-vue' +import globals from 'globals' + +configureVueProject({ + scriptLangs: ['ts', 'js', 'tsx', 'jsx'] +}) + +export default defineConfigWithVueTs( + { + ignores: [ + '.vscode', + 'docs', + '**/dist', + '**/public', + '**/package-lock.json', + '**/node_modules', + '**/tmp', + '**/temp', + 'mockServer', + '**/bin', + '**/expected', + '**/output', + '**/test' + ] + }, + { + files: ['**/*.{js,mjs,jsx,ts,mts,tsx,vue}'] + }, + js.configs.recommended, + pluginVue.configs['flat/essential'], + vueTsConfigs.recommended, + { + languageOptions: { + globals: { + ...globals.browser, + ...globals.worker, + ...globals.node, + ...globals.jest + } + }, + rules: { + 'no-console': 'error', + 'no-debugger': 'error', + 'no-eq-null': 'error', + 'no-extra-semi': 'off', + 'no-eval': 'error', + 'space-before-function-paren': 'off', + 'vue/multi-word-component-names': 'off', + 'vue/prefer-import-from-vue': 'off', + // 允许 @ts-ignore + '@typescript-eslint/ban-ts-comment': 'off', + // 允许非空断言 + '@typescript-eslint/no-non-null-asserted-optional-chain': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-use-before-define': 'error', + '@typescript-eslint/no-unused-vars': [ + 'error', + { + ignoreRestSiblings: true, + varsIgnorePattern: '^_', + argsIgnorePattern: '^_', + caughtErrors: 'none' + } + ] + } + }, + { + files: ['scripts/**/*'], + rules: { + 'no-console': 'off', + '@typescript-eslint/no-require-imports': 'off' + } + } +) diff --git a/lint-staged.config.js b/lint-staged.config.js index d673344c2e..f794152af8 100644 --- a/lint-staged.config.js +++ b/lint-staged.config.js @@ -1,4 +1,4 @@ module.exports = { - './packages/**/**.{js,vue,jsx}': 'eslint', - './packages/**/**.{vue,js,ts,html,json,less}': 'prettier --write' + './packages/**/**.{js,mjs,jsx,ts,mts,tsx,vue}': 'eslint', + './packages/**/**.{js,mjs,jsx,ts,mts,tsx,vue,html,json,less}': 'prettier --write' } diff --git a/mockServer/package.json b/mockServer/package.json index eed0f6bea4..adcf658da2 100644 --- a/mockServer/package.json +++ b/mockServer/package.json @@ -1,6 +1,6 @@ { "name": "@opentiny/tiny-engine-mock", - "version": "2.2.0", + "version": "2.3.0", "publishConfig": { "access": "public" }, diff --git a/package.json b/package.json index b6d3bead50..439d992387 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,8 @@ "build:alpha": "pnpm --filter designer-demo build:alpha", "build:prod": "pnpm --filter designer-demo build", "buildComponentSchemas": "node scripts/buildComponentSchemas.js", - "lint": "eslint . --ext .js,.vue,.jsx --fix", - "format": "prettier --write **/*{.vue,.js,.ts,.html,.json}", + "lint": "eslint . --ext .js,.mjs,.jsx,.ts,.mts,.tsx,.vue --fix", + "format": "prettier --write --list-different **/*{.vue,.js,.mjs,.jsx,.ts,.mts,.tsx,.html,.json}", "prepare": "node -e \"if(require('fs').existsSync('.git')){process.exit(1)}\" || husky install", "pub:premajor": "pnpm run build:plugin && pnpm run build:alpha && pnpm lerna version premajor --preid beta --no-push --yes && lerna publish from-package --pre-dist-tag beta --yes", "pub:preminor": "pnpm run build:plugin && pnpm run build:alpha && pnpm lerna version preminor --preid beta --no-push --yes && lerna publish from-package --pre-dist-tag beta --yes", @@ -23,24 +23,26 @@ "updateTemplate": "node ./scripts/updateTemplate.mjs" }, "devDependencies": { - "@babel/eslint-parser": "^7.21.3", + "@eslint/js": "^8.57.1", "@types/node": "^18.0.0", - "@vue/eslint-config-typescript": "^11.0.3", + "@vue/eslint-config-typescript": "^14.4.0", + "@vue/tsconfig": "^0.7.0", "chokidar": "^3.5.3", "concurrently": "^8.2.0", "cross-env": "^7.0.3", "dotenv": "^16.3.1", - "eslint": "^8.38.0", - "eslint-plugin-vue": "^8.0.0", + "eslint": "^9.21.0", + "eslint-plugin-vue": "^9.32.0", "fast-glob": "^3.3.2", "fs-extra": "^10.1.0", + "globals": "^16.0.0", "husky": "^8.0.0", "lerna": "^7.2.0", "lint-staged": "^13.2.0", "mysql": "^2.18.1", "picocolors": "^1.0.0", "prettier": "^2.7.1", - "vue-eslint-parser": "^8.0.1" + "typescript": "~5.4.5" }, "browserslist": [ "> 1%", diff --git a/packages/block-compiler/.eslintrc.cjs b/packages/block-compiler/.eslintrc.cjs deleted file mode 100644 index eb1014c689..0000000000 --- a/packages/block-compiler/.eslintrc.cjs +++ /dev/null @@ -1,27 +0,0 @@ -const path = require('path') -const { rules } = require('../../.eslintrc') - -module.exports = { - extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], - root: true, - parser: '@typescript-eslint/parser', - parserOptions: { - projectService: true, - project: [path.join(__dirname, './tsconfig.json') ], - ecmaVersion: 'latest', - }, - plugins: ['@typescript-eslint'], - env: { - browser: true, - es2015: true, - node: true - }, - rules: { - ...rules, - // 允许 @ts-ignore - "@typescript-eslint/ban-ts-comment": "off", - // 允许非空断言 - "@typescript-eslint/no-non-null-asserted-optional-chain": "off" - }, - ignorePatterns: ['test/sample/*.vue', '.eslintrc.cjs'] -} diff --git a/packages/block-compiler/eslint.config.mjs b/packages/block-compiler/eslint.config.mjs new file mode 100644 index 0000000000..0b4237a604 --- /dev/null +++ b/packages/block-compiler/eslint.config.mjs @@ -0,0 +1,19 @@ +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import rootConfig from '../../eslint.config.mjs' + +const __filename = fileURLToPath(import.meta.url) +const __dirname = path.dirname(__filename) + +/** @type {import('eslint').Linter.Config[]} */ +export default [ + ...rootConfig, + { + languageOptions: { + parserOptions: { + projectService: true, + project: [path.join(__dirname, './tsconfig.json')] + } + } + } +] diff --git a/packages/block-compiler/package.json b/packages/block-compiler/package.json index 58a7dc9e2d..8c5e0cc11c 100644 --- a/packages/block-compiler/package.json +++ b/packages/block-compiler/package.json @@ -1,6 +1,6 @@ { "name": "@opentiny/tiny-engine-block-compiler", - "version": "2.2.0", + "version": "2.3.0", "publishConfig": { "access": "public" }, diff --git a/packages/block-compiler/tsconfig.node.json b/packages/block-compiler/tsconfig.node.json index 1020d544b9..16bb2100f9 100644 --- a/packages/block-compiler/tsconfig.node.json +++ b/packages/block-compiler/tsconfig.node.json @@ -20,5 +20,5 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "include": ["vite.config.ts", ".eslintrc.cjs"] + "include": ["vite.config.ts", "eslint.config.mjs"] } diff --git a/packages/blockToWebComponentTemplate/package.json b/packages/blockToWebComponentTemplate/package.json index be31465c85..710bdf2995 100644 --- a/packages/blockToWebComponentTemplate/package.json +++ b/packages/blockToWebComponentTemplate/package.json @@ -1,6 +1,6 @@ { "name": "@opentiny/tiny-engine-block-build", - "version": "2.2.0", + "version": "2.3.0", "description": "translate block to webcomponent template", "main": "./dist/web-components.es.js", "type": "module", diff --git a/packages/build/vite-config/package.json b/packages/build/vite-config/package.json index 707ad0b50f..f52dcfc498 100644 --- a/packages/build/vite-config/package.json +++ b/packages/build/vite-config/package.json @@ -1,6 +1,6 @@ { "name": "@opentiny/tiny-engine-vite-config", - "version": "2.2.0", + "version": "2.3.0", "description": "", "type": "module", "main": "./index.js", diff --git a/packages/build/vite-config/src/localCdnFile/replaceImportPath.mjs b/packages/build/vite-config/src/localCdnFile/replaceImportPath.mjs index 47ae67ed72..877945d54b 100644 --- a/packages/build/vite-config/src/localCdnFile/replaceImportPath.mjs +++ b/packages/build/vite-config/src/localCdnFile/replaceImportPath.mjs @@ -11,7 +11,8 @@ export function relativePathPattern(relativePath) { } export function resolvePath(importPath, currentFilePath) { - if (['js', 'mjs'].some(suffix =>importPath.endsWith(suffix))) { // 文件名已经带有.js,.mjs后缀 + if (['js', 'mjs'].some((suffix) => importPath.endsWith(suffix))) { + // 文件名已经带有.js,.mjs后缀 return importPath } const parentPath = path.resolve(currentFilePath, '../') @@ -21,9 +22,9 @@ export function resolvePath(importPath, currentFilePath) { const stat = fs.statSync(filePrefix) if (stat.isDirectory()) { let mainFileName = 'index.js' - + const packageFile = path.resolve(filePrefix, 'package.json') - + if (fs.existsSync(packageFile)) { const packageFileContent = fs.readFileSync(packageFile, { encoding: 'utf-8' }) const packageJson = JSON.parse(packageFileContent) @@ -39,7 +40,7 @@ export function resolvePath(importPath, currentFilePath) { return importPath } const possibleSuffix = ['.js', '.mjs'] - const suffix = possibleSuffix.find(suf => fs.existsSync(filePrefix + suf)) + const suffix = possibleSuffix.find((suf) => fs.existsSync(filePrefix + suf)) if (suffix) { return relativePathPattern(path.relative(path.resolve(currentFilePath, '../'), filePrefix + suffix)) } @@ -62,16 +63,16 @@ export function babelReplaceImportPathWithCertainFileName(content, currentFilePa return } const importPath = node.source.value - if(importPath.startsWith('.')) { + if (importPath.startsWith('.')) { const certainPath = resolvePath(importPath, currentFilePath) - if(!certainPath) { + if (!certainPath) { logger.warn(`File not found: ${importPath} used in ${currentFilePath}`) result.error.push(importPath) } - if(certainPath !== importPath) { + if (certainPath !== importPath) { node.source.value = certainPath fileChangedMark = true - result.success.push({before: importPath, after: certainPath}) + result.success.push({ before: importPath, after: certainPath }) } } } @@ -86,4 +87,3 @@ export function babelReplaceImportPathWithCertainFileName(content, currentFilePa } return result } - diff --git a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js index a4bf54d386..28b4c11d6b 100644 --- a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js +++ b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js @@ -22,7 +22,7 @@ const getDevAlias = (useSourceAlias) => { '@opentiny/tiny-engine-plugin-datasource': path.resolve(basePath, 'packages/plugins/datasource/index.js'), '@opentiny/tiny-engine-plugin-script': path.resolve(basePath, 'packages/plugins/script/index.js'), '@opentiny/tiny-engine-plugin-tree': path.resolve(basePath, 'packages/plugins/tree/index.js'), - '@opentiny/tiny-engine-plugin-help': path.resolve(basePath, 'packages/plugins/help/index.js'), + '@opentiny/tiny-engine-plugin-help': path.resolve(basePath, 'packages/plugins/help/index.ts'), '@opentiny/tiny-engine-plugin-schema': path.resolve(basePath, 'packages/plugins/schema/index.js'), '@opentiny/tiny-engine-plugin-page': path.resolve(basePath, 'packages/plugins/page/index.js'), '@opentiny/tiny-engine-plugin-i18n': path.resolve(basePath, 'packages/plugins/i18n/index.js'), diff --git a/packages/build/vite-plugin-meta-comments/package.json b/packages/build/vite-plugin-meta-comments/package.json index d8bef26392..3424f19bce 100644 --- a/packages/build/vite-plugin-meta-comments/package.json +++ b/packages/build/vite-plugin-meta-comments/package.json @@ -1,6 +1,6 @@ { "name": "@opentiny/tiny-engine-vite-plugin-meta-comments", - "version": "2.2.0", + "version": "2.3.0", "description": "", "type": "module", "main": "dist/index.cjs", diff --git a/packages/builtinComponent/package.json b/packages/builtinComponent/package.json index 2ac55c378d..5c6d3d8b59 100644 --- a/packages/builtinComponent/package.json +++ b/packages/builtinComponent/package.json @@ -1,6 +1,6 @@ { "name": "@opentiny/tiny-engine-builtin-component", - "version": "2.2.0", + "version": "2.3.0", "description": "", "main": "dist/index.mjs", "module": "dist/index.mjs", diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue index 27d99cd9e1..17ccad33de 100644 --- a/packages/canvas/DesignCanvas/src/DesignCanvas.vue +++ b/packages/canvas/DesignCanvas/src/DesignCanvas.vue @@ -160,6 +160,9 @@ export default { const schemaItem = useCanvas().getNodeById(id) const pageSchema = getSchema() + if (!schemaItem) { + pageSchema.id = 'body' + } // 如果选中的节点是画布,就设置成默认选中最外层schema useProperties().getProps(schemaItem || pageSchema, parent) diff --git a/packages/canvas/DesignCanvas/src/api/useCanvas.js b/packages/canvas/DesignCanvas/src/api/useCanvas.js index 58fac1cdda..7dda1d3b50 100644 --- a/packages/canvas/DesignCanvas/src/api/useCanvas.js +++ b/packages/canvas/DesignCanvas/src/api/useCanvas.js @@ -10,7 +10,6 @@ * */ -/* eslint-disable no-new-func */ import { reactive, ref, toRaw } from 'vue' import * as jsonDiffPatch from 'jsondiffpatch' import DiffMatchPatch from 'diff-match-patch' @@ -90,7 +89,7 @@ const handleTinyGridColumnsSlots = (node) => { nodesMap.value.set(item.id, { node: item, parent: node }) if (Array.isArray(item.children)) { - // eslint-disable-next-line no-use-before-define + // eslint-disable-next-line @typescript-eslint/no-use-before-define generateNodesMap(item.children, item) } }) @@ -240,6 +239,11 @@ const initData = (schema = { ...defaultSchema }, currentPage) => { }) } + publish({ + topic: 'pageOrBlockInit', + data: schema + }) + useHistory().addHistory(schema) } @@ -318,15 +322,13 @@ const operationTypeMap = { // 4. 根据position参数选择插入位置 let index = parentNode.children.indexOf(referenceNode) - if (index === -1 && referTargetNodeId) { - index = parentNode.children.length - } // 5. 插入节点的逻辑 const childrenNode = toRaw(referenceNode) switch (position) { case 'before': - parentNode.children.unshift(newNodeData) + index = index === -1 ? 0 : index + parentNode.children.splice(index, 0, newNodeData) break case 'out': if (childrenNode) { @@ -338,7 +340,8 @@ const operationTypeMap = { parentNode.children.splice(index + 1, 0, newNodeData) break default: - parentNode.children.push(newNodeData) + index = index === -1 ? parentNode.children.length : index + 1 + parentNode.children.splice(index, 0, newNodeData) break } @@ -585,10 +588,12 @@ const getSchema = () => { const getNodePath = (id, nodes = []) => { const { parent, node } = getNodeWithParentById(id) || {} - node && nodes.unshift({ name: node.componentName, node: id }) + if (node) { + nodes.unshift({ name: node.componentName, node: id }) + } if (parent) { - parent && getNodePath(parent.id, nodes) + getNodePath(parent.id, nodes) } else { nodes.unshift({ name: 'BODY', node: id }) } diff --git a/packages/canvas/container/src/CanvasContainer.vue b/packages/canvas/container/src/CanvasContainer.vue index a050fc1c0a..9da26ae258 100644 --- a/packages/canvas/container/src/CanvasContainer.vue +++ b/packages/canvas/container/src/CanvasContainer.vue @@ -3,7 +3,7 @@ useCanvas().isLoading()) - let showSettingModel = ref(false) - let target = ref(null) + const showSettingModel = ref(false) + const target = ref(null) const srcAttrName = computed(() => (props.canvasSrc ? 'src' : 'srcdoc')) const containerPanel = ref(null) const insertContainer = ref(false) - const multiStateLength = computed(() => multiSelectedStates.value.length) + const { multiSelectedStates, multiStateLength, toggleMultiSelection } = useMultiSelect() - const setCurrentNode = async (event, doc = null) => { + const setCurrentNode = async (event) => { const { clientX, clientY } = event const element = getElement(event.target) closeMenu() @@ -121,9 +119,6 @@ export default { const currentElement = querySelectById(getCurrent().schema?.id) if (!currentElement?.contains(element) || event.button === 0) { - const selectedState = getMultiState(element, doc) - setMultiState(multiSelectedStates, selectedState) - const loopId = element.getAttribute(NODE_LOOP) if (loopId) { node = await selectNode(element.getAttribute(NODE_UID), `loop-id=${loopId}`) @@ -210,20 +205,15 @@ export default { return } - // 多选组合键触发 - if (element) { - const selectedState = getMultiState(element, doc) - if ((event.ctrlKey || event.metaKey) && event.button === 0) { - handleMultiState(multiSelectedStates, selectedState) - return - } - } + toggleMultiSelection(event, element) insertPosition.value = false insertContainer.value = false - setCurrentNode(event, doc) + setCurrentNode(event) target.value = event.target }) + + useMessage().publish({ topic: 'canvas-mousedown', data: { event } }) }) win.addEventListener('scroll', () => { @@ -265,7 +255,7 @@ export default { registerHotkeyEvent(doc) - win.addEventListener('scroll', updateRect, true) + win.addEventListener('scroll', syncNodeScroll, true) } } // 设置弹窗 diff --git a/packages/canvas/container/src/components/CanvasAction.vue b/packages/canvas/container/src/components/CanvasAction.vue index b82392e6e9..572f7dbe6d 100644 --- a/packages/canvas/container/src/components/CanvasAction.vue +++ b/packages/canvas/container/src/components/CanvasAction.vue @@ -132,7 +132,7 @@ import { dragStart, getCurrentElement } from '../container' -import { useLayout, useMaterial, useCanvas } from '@opentiny/tiny-engine-meta-register' +import { useLayout, useMaterial, useCanvas, useMessage } from '@opentiny/tiny-engine-meta-register' import { Popover } from '@opentiny/vue' import shortCutPopover from './shortCutPopover.vue' @@ -208,9 +208,9 @@ export default { const toIndex = index + addend if (toIndex > -1 && toIndex < list.length) { - // eslint-disable-next-line no-extra-semi ;[list[index], list[toIndex]] = [list[toIndex], list[index]] + useMessage().publish({ topic: 'schemaChange', data: {} }) updateRect() } } @@ -228,7 +228,9 @@ export default { const selectParent = () => { const parentId = getCurrent().parent?.id - parentId && selectNode(parentId) + if (parentId) { + selectNode(parentId) + } } const copy = () => { @@ -266,20 +268,20 @@ export default { const optionRef = ref(null) const fixStyle = ref('') - let showPopover = ref(false) + const showPopover = ref(false) const activeSetting = () => { showPopover.value = false } const findParentHasClass = (target) => { - let parent = target.parentNode + const parent = target.parentNode if (parent.className === undefined) { return false } - let name = JSON.stringify(parent.className) + const name = JSON.stringify(parent.className) const preventClassNameList = ['short-cut-set', 'tiny-dialog-box', 'icon-popover', 'i18n-input-popover'] @@ -313,7 +315,7 @@ export default { () => props.windowGetClickEventTarget, (newProps) => { if (newProps) { - let flag = findParentHasClass(newProps) + const flag = findParentHasClass(newProps) if (!flag) { showPopover.value = false } diff --git a/packages/canvas/container/src/components/CanvasResizeBorder.vue b/packages/canvas/container/src/components/CanvasResizeBorder.vue index 1a5d6f538b..d15d733529 100644 --- a/packages/canvas/container/src/components/CanvasResizeBorder.vue +++ b/packages/canvas/container/src/components/CanvasResizeBorder.vue @@ -84,7 +84,7 @@ export default { } if (state.direction === 'vertical') { - let target = schema.componentName === 'CanvasRow' ? schema : parent + const target = schema.componentName === 'CanvasRow' ? schema : parent const dis = clientY - state.startPosition.y const minHeight = state.startPosition.height + dis diff --git a/packages/canvas/container/src/components/CanvasViewerSwitcher.vue b/packages/canvas/container/src/components/CanvasViewerSwitcher.vue index 82783cbbb9..73777b2177 100644 --- a/packages/canvas/container/src/components/CanvasViewerSwitcher.vue +++ b/packages/canvas/container/src/components/CanvasViewerSwitcher.vue @@ -40,7 +40,7 @@ diff --git a/packages/plugins/datasource/src/DataSourceFieldList.vue b/packages/plugins/datasource/src/DataSourceFieldList.vue index 3d6a27bf7a..6e7ae5109a 100644 --- a/packages/plugins/datasource/src/DataSourceFieldList.vue +++ b/packages/plugins/datasource/src/DataSourceFieldList.vue @@ -23,7 +23,7 @@
- +
diff --git a/packages/plugins/datasource/src/DataSourceFieldType.vue b/packages/plugins/datasource/src/DataSourceFieldType.vue index c4f408cc88..a065bd462f 100644 --- a/packages/plugins/datasource/src/DataSourceFieldType.vue +++ b/packages/plugins/datasource/src/DataSourceFieldType.vue @@ -25,7 +25,7 @@ import { reactive, ref } from 'vue' import { iconArrowDown } from '@opentiny/vue-icon' import fieldTypes from './config' -let isOpen = ref(false) +const isOpen = ref(false) export const open = () => { isOpen.value = true diff --git a/packages/plugins/datasource/src/DataSourceForm.vue b/packages/plugins/datasource/src/DataSourceForm.vue index 12b2bc5015..d36c358883 100644 --- a/packages/plugins/datasource/src/DataSourceForm.vue +++ b/packages/plugins/datasource/src/DataSourceForm.vue @@ -44,7 +44,7 @@ import { import { useModal, useDataSource, useNotify, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register' import { extend } from '@opentiny/vue-renderless/common/object' -let isOpen = ref(false) +const isOpen = ref(false) export const open = () => { isOpen.value = true diff --git a/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue b/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue index c2b0a8f17f..1cfc9d7a83 100644 --- a/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue +++ b/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue @@ -80,7 +80,9 @@ export default { () => isOpen.value, (value) => { nextTick(() => { - value && window.dispatchEvent(new Event('resize')) + if (value) { + window.dispatchEvent(new Event('resize')) + } }) } ) diff --git a/packages/plugins/datasource/src/DataSourceList.vue b/packages/plugins/datasource/src/DataSourceList.vue index 217e253852..d69b27ce1c 100644 --- a/packages/plugins/datasource/src/DataSourceList.vue +++ b/packages/plugins/datasource/src/DataSourceList.vue @@ -1,5 +1,5 @@