Skip to content

Commit aee9c38

Browse files
committed
feat: add tinyengine docs
1 parent b2ce522 commit aee9c38

File tree

102 files changed

+13984
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

102 files changed

+13984
-0
lines changed
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# 关于应用
2+
3+
## 如何创建应用
4+
设计器定制完成后,用户可以在 [我的设计器](https://www.opentiny.design/tiny-engine#/my-platform) 中创建应用。选择对应的设计器,在设计器右下方点击“创建应用”。
5+
创建应用有两种方式:
6+
7+
1.创建空白应用 → 填写必要的字段 → 保存。
8+
9+
![创建应用方式一]( ./imgs/appCreateOne.png)
10+
11+
2.从模板创建应用→ 选择应用模板 → 填写必要的字段 → 保存。
12+
13+
![创建应用方式二]( ./imgs/appCreateTwo.png)
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# 关于应用
2+
3+
## 如何去开发应用
4+
5+
应用创建完成后,即可在 **我的应用** 中看到这个应用,点击 **开发应用** 即可前往可视化设计器进行可视化地搭建该应用下的 *页面**区块*
6+
7+
![view-app1]( ./imgs/appDevOne.png)
8+
9+
### 可视化设计器
10+
11+
![view-app2]( ./imgs/appDevTwo.png)
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# 关于设计器
2+
3+
## 如何创建一个设计器
4+
5+
用户可以在 [我的设计器](https://www.opentiny.design/tiny-engine#/my-platform) 中创建设计器,创建设计器 → 填写必要的字段 → 确定
6+
![create-platform]( ./imgs/createPlatform.png)
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# 关于设计器
2+
3+
## 如何定制一个设计器
4+
5+
物料资产包、主题、工具、插件和DSL定制完成后,有两种方式可以构建设计器。
6+
7+
方式一:可视化构建
8+
9+
![build-platform1]( ./imgs/buildPlatform1.png)
10+
11+
方式二:由源码构建
12+
13+
![build-platform2]( ./imgs/buildPlatform2.png)
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# 关于设计器
2+
3+
## 如何定制物料资产包、主题、DSL、工具栏和插件栏
4+
5+
设计器创建完成后会自动打开编辑页面,用户可以在这里定制设计器的*物料资产包**主题**工具**插件**DSL*,如下图:
6+
7+
1. **定制物料资产包:** 物料资产包 **必选且唯一** , **不允许删除** 物料资产包,可以添加其他物料资产包来替换当前的。
8+
![define-material]( ./imgs/defineMaterial.png)
9+
10+
2. **定制主题:** 主题 **必选且唯一****不允许删除** 主题,可以添加其他主题来替换当前的
11+
![define-theme]( ./imgs/defineTheme.png)
12+
13+
3. **定制DSL:** DSL为 **单选**。DSL是将物料的Schema 解析成不同技术栈源码的转换工具,所以DSL的必须和选择的物料在技术栈保持一致。
14+
![define-DSL]( ./imgs/defineDsl.png)
15+
16+
4. **定制工具:** 可以将工具拖入上方位置栏,规划定制的设计器里工具的位置。工具可以多选,也可以删除。
17+
![define-tools]( ./imgs/defineTools.png)
18+
19+
5. **定制插件:** 可以将插件拖入中间位置栏,规划定制的设计器里插件的位置。插件可以多选,也可以删除。
20+
![define-plugs]( ./imgs/definePlugs.png)
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# 构建自定义设计器
2+
3+
## 什么是定制扩展能力
4+
5+
什么是扩展能力呢,一方面我们可以快速拥有一个官方标准的设计器,另外一方面如果用户有独特的业务功能需要,我们可以不用看它的源码、不用关心其实现,用户可以使用 API、插件等方式快速开发自己的工具,插件,DSL等的npm包,用于构建用户自定义的设计器。而设计器引擎对于设计器的扩展能力支持基本上覆盖了设计器的所有功能点。
6+
![expend]( ./imgs/platformExpend.png)
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# 添加组件库/区块
2+
3+
## 如何添加组件库与区块
4+
5+
可视化设计器已为您提供官方组件库与一些区块,物料资产包创建完成后会自动打开编辑页面,用户可以在这里添加组件库与区块,如下图:
6+
7+
* **添加组件库:** 选中未选择的组件库
8+
![添加组件库](./imgs/createMaterialLib.png)
9+
10+
* **添加区块:** 选中未选择的区块
11+
![添加区块](./imgs/createMaterialBlock.png)
12+
13+
* **移除组件库:** 取消选中已经选择的组件库,并且确认
14+
![移除组件库](./imgs/createMaterialLibCancel.png)
15+
16+
* **移除区块:** 取消选中已经选择的区块,并且确认
17+
![移除区块](./imgs/createMaterialBlockCancel.png)
18+
19+
* 用户也可以在生态中心录入自己的组件库与区块。
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# 构建物料资产包
2+
3+
## 如何构建物料资产包
4+
5+
添加完组件库与区块后,点击底部 **构建物料资产包** 按钮,即可完成物料资产包的构建。构建完成后即可看到发布地址。
6+
![构建物料资产包](./imgs/createMaterial.gif)
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# 创建物料资产包
2+
3+
## 如何创建物料资产包
4+
5+
用户可以在生态中心创建物料资产包,*新建物料资产包**填写必要的字段**保存。*
6+
当前支持Vue和Angular两种技术栈,用户可以任意选择。当用户选择了Vue技术栈时,则只能添加Vue的组件与区块,不能添加Angular的组件库与区块。
7+
8+
物料资产包版本是用户自定义的,用户可以将物料资产包回退到任一版本。
9+
10+
![构建物料资产包](./imgs/createMaterial.gif)
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# 关于物料资产包
2+
3+
## 什么是物料
4+
5+
物料是可视化页面搭建的原料,按照粒度可分为组件库和区块
6+
7+
1. **组件库**:组件库一般是按照组件的性质进行组织。组件是页面搭建最小的可复用单元,其只对外暴露配置项,用户无需感知其内部实现。组件库在设计器定制完成后 **不能再次添加与删除**
8+
2. **区块**:区块可以包含一个或多个组件也可以包含其他区块,带有一定的业务逻辑,能够实现更丰富的功能与表现。区块分为**消费侧****管理侧**,在区块管理侧,用户可以向设计器中拖入一个区块后可以编辑其内部的组件和区块配置,暴露区块的属性和事件供消费区块的时候使用,最后发布区块,消费侧区块就会更新为最新的区块内容。区块在设计器定制完成后仍能添加与删除。
9+
10+
设计器中的物料需要进行一定的配置和处理,才能让用户在设计器使用起来。这个过程中,需要一份配置文件,也就是物料资产包。物料资产包文件中,针对每个物料定义了它们在设计器中的使用描述。
11+
12+
## 什么是物料资产包
13+
14+
在设计器中,我们可以看到,组件与区块面板不只提供一个组件或区块,它们是以集合的形式提供给设计器的,而物料资产包正是这些组件与区块构成的集合。
15+
16+
![view-material](./imgs/materialPanel.png)

0 commit comments

Comments
 (0)