opentiny · gene9831 · Dec 3, 2024 · Dec 3, 2024 · Dec 14, 2024 · Dec 19, 2024
diff --git a/docs/about-applications/create-application-blank-or-template.md b/docs/about-applications/create-application-blank-or-template.md
@@ -0,0 +1,13 @@
+# 关于应用
+
+## 如何创建应用
+设计器定制完成后，用户可以在 [我的设计器](https://www.opentiny.design/tiny-engine#/my-platform) 中创建应用。选择对应的设计器，在设计器右下方点击“创建应用”。
+创建应用有两种方式：
+
+1.创建空白应用 &rarr; 填写必要的字段 &rarr; 保存。
+
+![创建应用方式一]( ./imgs/appCreateOne.png)
+
+2.从模板创建应用&rarr; 选择应用模板 &rarr; 填写必要的字段 &rarr; 保存。
+
+![创建应用方式二]( ./imgs/appCreateTwo.png)
diff --git a/docs/about-applications/develop-application.md b/docs/about-applications/develop-application.md
@@ -0,0 +1,11 @@
+# 关于应用
+
+## 如何去开发应用
+
+应用创建完成后，即可在 **我的应用** 中看到这个应用，点击 **开发应用** 即可前往可视化设计器进行可视化地搭建该应用下的 *页面* 和 *区块*。
+
+![view-app1]( ./imgs/appDevOne.png)
+
+### 可视化设计器
+
+![view-app2]( ./imgs/appDevTwo.png)
diff --git a/docs/about-applications/imgs/appCreateOne.png b/docs/about-applications/imgs/appCreateOne.png
diff --git a/docs/about-applications/imgs/appCreateTwo.png b/docs/about-applications/imgs/appCreateTwo.png
diff --git a/docs/about-applications/imgs/appDevOne.png b/docs/about-applications/imgs/appDevOne.png
diff --git a/docs/about-applications/imgs/appDevTwo.png b/docs/about-applications/imgs/appDevTwo.png
diff --git a/docs/about-designer/create-designer.md b/docs/about-designer/create-designer.md
@@ -0,0 +1,6 @@
+# 关于设计器
+
+## 如何创建一个设计器
+
+用户可以在 [我的设计器](https://www.opentiny.design/tiny-engine#/my-platform) 中创建设计器，创建设计器 &rarr; 填写必要的字段 &rarr; 确定
+![create-platform]( ./imgs/createPlatform.png)
diff --git a/docs/about-designer/customize-designer.md b/docs/about-designer/customize-designer.md
@@ -0,0 +1,13 @@
+# 关于设计器
+
+## 如何定制一个设计器
+
+物料资产包、主题、工具、插件和DSL定制完成后，有两种方式可以构建设计器。
+
+方式一：可视化构建
+
+![build-platform1]( ./imgs/buildPlatform1.png)
+
+方式二：由源码构建
+
+![build-platform2]( ./imgs/buildPlatform2.png)
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
@@ -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)
diff --git a/docs/about-designer/imgs/buildPlatform1.png b/docs/about-designer/imgs/buildPlatform1.png
diff --git a/docs/about-designer/imgs/buildPlatform2.png b/docs/about-designer/imgs/buildPlatform2.png
diff --git a/docs/about-designer/imgs/createPlatform.png b/docs/about-designer/imgs/createPlatform.png
diff --git a/docs/about-designer/imgs/defineDsl.png b/docs/about-designer/imgs/defineDsl.png
diff --git a/docs/about-designer/imgs/defineMaterial.png b/docs/about-designer/imgs/defineMaterial.png
diff --git a/docs/about-designer/imgs/definePlugs.png b/docs/about-designer/imgs/definePlugs.png
diff --git a/docs/about-designer/imgs/defineTheme.png b/docs/about-designer/imgs/defineTheme.png
diff --git a/docs/about-designer/imgs/defineTools.png b/docs/about-designer/imgs/defineTools.png
diff --git a/docs/about-designer/imgs/platformExpend.png b/docs/about-designer/imgs/platformExpend.png
diff --git a/docs/about-designer/introduction.md b/docs/about-designer/introduction.md
@@ -0,0 +1,6 @@
+# 构建自定义设计器
+
+## 什么是定制扩展能力
+
+什么是扩展能力呢，一方面我们可以快速拥有一个官方标准的设计器，另外一方面如果用户有独特的业务功能需要，我们可以不用看它的源码、不用关心其实现，用户可以使用 API、插件等方式快速开发自己的工具，插件，DSL等的npm包，用于构建用户自定义的设计器。而设计器引擎对于设计器的扩展能力支持基本上覆盖了设计器的所有功能点。
+![expend]( ./imgs/platformExpend.png)
diff --git a/docs/about-materials/add-library-and-blocks.md 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)
+
+* 用户也可以在生态中心录入自己的组件库与区块。
diff --git a/docs/about-materials/build-material-asset-package.md b/docs/about-materials/build-material-asset-package.md
@@ -0,0 +1,6 @@
+# 构建物料资产包
+
+## 如何构建物料资产包
+
+添加完组件库与区块后，点击底部 **构建物料资产包** 按钮，即可完成物料资产包的构建。构建完成后即可看到发布地址。
+![构建物料资产包](./imgs/createMaterial.gif)
diff --git a/docs/about-materials/create-material-asset-package.md b/docs/about-materials/create-material-asset-package.md
@@ -0,0 +1,10 @@
+# 创建物料资产包
+
+## 如何创建物料资产包
+
+用户可以在生态中心创建物料资产包，*新建物料资产包* → *填写必要的字段* → *保存。*
+当前支持Vue和Angular两种技术栈，用户可以任意选择。当用户选择了Vue技术栈时，则只能添加Vue的组件与区块，不能添加Angular的组件库与区块。
+
+物料资产包版本是用户自定义的，用户可以将物料资产包回退到任一版本。
+
+![构建物料资产包](./imgs/createMaterial.gif)
diff --git a/docs/about-materials/imgs/createMaterial.gif b/docs/about-materials/imgs/createMaterial.gif
diff --git a/docs/about-materials/imgs/createMaterialBlock.png b/docs/about-materials/imgs/createMaterialBlock.png
diff --git a/docs/about-materials/imgs/createMaterialBlockCancel.png b/docs/about-materials/imgs/createMaterialBlockCancel.png
diff --git a/docs/about-materials/imgs/createMaterialLib.png b/docs/about-materials/imgs/createMaterialLib.png
diff --git a/docs/about-materials/imgs/createMaterialLibCancel.png b/docs/about-materials/imgs/createMaterialLibCancel.png
diff --git a/docs/about-materials/imgs/materialPanel.png b/docs/about-materials/imgs/materialPanel.png
diff --git a/docs/about-materials/introduction.md b/docs/about-materials/introduction.md
@@ -0,0 +1,16 @@
+# 关于物料资产包
+
+## 什么是物料
+
+物料是可视化页面搭建的原料，按照粒度可分为组件库和区块
+
+1. **组件库**：组件库一般是按照组件的性质进行组织。组件是页面搭建最小的可复用单元，其只对外暴露配置项，用户无需感知其内部实现。组件库在设计器定制完成后 **不能再次添加与删除** 。
+2. **区块**：区块可以包含一个或多个组件也可以包含其他区块，带有一定的业务逻辑，能够实现更丰富的功能与表现。区块分为**消费侧**和**管理侧**，在区块管理侧，用户可以向设计器中拖入一个区块后可以编辑其内部的组件和区块配置，暴露区块的属性和事件供消费区块的时候使用，最后发布区块，消费侧区块就会更新为最新的区块内容。区块在设计器定制完成后仍能添加与删除。
+
+设计器中的物料需要进行一定的配置和处理，才能让用户在设计器使用起来。这个过程中，需要一份配置文件，也就是物料资产包。物料资产包文件中，针对每个物料定义了它们在设计器中的使用描述。
+
+## 什么是物料资产包
+
+在设计器中，我们可以看到，组件与区块面板不只提供一个组件或区块，它们是以集合的形式提供给设计器的，而物料资产包正是这些组件与区块构成的集合。
+
+![view-material](./imgs/materialPanel.png)
diff --git a/docs/advanced-features/advanced-panel-settings.md 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
+<template>
+  <div v-for="(item, index) in state.imageList" :key="index">
+    <span>{{ item.title }}</span>
+  <!---列表细节--->
+  </div>
+</template>
+```
+
+## 事件绑定
+
+我们可以给选中的组件进行事件的绑定：
+
+- 在绑定事件下拉按钮中选中需要绑定的事件
+- 随后在事件绑定弹窗中指定方法名称
+- 指定拓展参数
+- 点击确定，在随后弹出的JS面板中进行绑定方法的具体逻辑实现
+
+![事件绑定演示](./imgs/bindEvent.gif)
+
+### 拓展参数相关说明
+
+在某些点击事件中，我们不仅仅希望得知事件是否被点击，我们还希望在点击事件中获得一些额外的参数，这时候，我们就可以用拓展参数，下面举例说明：
+我们希望为镜像列表中的列表项绑定点击事件，然后将镜像的 id 和版本传入到事件处理函数中。那么，我们就可以使用拓展参数进行传入。
+
+```bash
+# 循环渲染项迭代变量名 item
+# 拓展参数设置：
+["item.imageId", "item.imageVersion"]
+```
+
+最终出码：
+
+```vue
+<template>
+  <div v-for="(item, index) in state.imageList" @click="(e) => handleClick(e, item.imageId, item.imageVersion)">
+  <!---列表细节--->
+  </div>
+</template>
+```
diff --git a/docs/advanced-features/block-management.md 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
+<template>
+  <header>
+    <h1>{{props.title}}</h1>
+    <span>{{props.description}}</span>
+  </header>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  description: { type: String, default: '' }
+})
+</script>
+```
+
+区块暴露属性的概念即对应 组件中的 props 属性。暴露属性声明了外部组件引用当前组件时，可以定义的相关属性
+
+#### 区块暴露属性的相关设置
+
+区块暴露属性的设置与我们代码 props 的设置相似，只是区块暴露属性多了一个指定属性面板组件和属性的相关配置
+
+![区块暴露属性设置](./imgs/blockExposeAttr.gif)
+
+#### 区块暴露属性的消费
+
+在区块发布之后，我们在物料面板拖出区块到画布中，选中我们拖出的区块，右侧属性面板的属性即是我们定义的暴露属性
+
+![区块暴露属性的消费](./imgs/blockexposeattrusage.gif)
+
+### 区块事件设置
+
+#### 区块事件的概念
+
+既然区块暴露属性等同于 组件 中的 props 属性，类似的，区块的事件即等同于 vue 中的 emit 事件声明
+
+```vue
+<script setup>
+  const emit = defineEmits(['update:modelValue', 'success'])
+</script>
+```
+
+注意的是，这里仅仅是声明我们的区块会抛出什么事件，真正的事件需要引用方（即消费该区块的一方在高级面板进行定义）
+
+### 生命周期设置
+
+同页面生命周期，即可以设置对应技术栈的生命周期函数
+
+### 版本列表
+
+可以预览对应版本的区块
diff --git a/docs/advanced-features/conditional-rendering.md 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
@@ -0,0 +1,21 @@
+# 数据源Mock数据
+
+目前数据源在编辑态时只能使用Mock数据，所以我们可能需要给数据源添加Mock数据
+
+## 操作步骤
+
+- 打开数据源面板，选中数据源
+- 点击新增数据，添加数据并保存
+![新增数据](./imgs/dataSource5.png)
+
+## 使用数据源Mock数据
+
+- 拖动一个Collection组件到画布中，在Collection组件属性面板上选择数据源
+- 拖动格组件到Collection中，表格组件将自动生成数据源中的字段
+![使用数据源Mock数据](not-found/dataSource6.png)
+
+## 更新数据源到画布
+
+添加完Mock数据后，画布上绑定的数据源不会同步改变，需要手动更新，操作如下：
+选中画布中的数据源，打开属性面板，点击更新数据源
+![更新数据源到画布](./imgs/dataSource7.png)