diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index c809db02..2a4d51b1 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -93,6 +93,10 @@ export default defineConfig({ text: '代码块', link: '/guide/advanced/code-block.md', }, + { + text: '数据源', + link: '/guide/advanced/data-source.md' + }, { text: '@tmagic/ui', link: '/guide/advanced/tmagic-ui.md', diff --git a/docs/guide/advanced/code-block.md b/docs/guide/advanced/code-block.md index b22b3b6f..faa8c7e5 100644 --- a/docs/guide/advanced/code-block.md +++ b/docs/guide/advanced/code-block.md @@ -3,10 +3,10 @@ ## 能力展示 代码块支持的能力有 -1、在线编辑 -2、参数定义，包括：参数类型定义 -3、自动保存草稿 -4、参数注释 +- 1、在线编辑 +- 2、参数定义，包括：参数类型定义 +- 3、自动保存草稿 +- 4、参数注释 下面将主要介绍代码块的实现原理，包含dsl结构定义，以及代码块挂载执行时机等 ## 协议描述 我们将在线编写的代码内容保存在[DSL](../advanced/js-schema.md)中，与app同一层级，这样的好处是代码块可以在同一活动，不同页面中实现灵活编排。 @@ -38,7 +38,7 @@ 在页面中创建代码块也就是会将新的代码内容添加到DSL中的codeBlocks数组并保存下来，这里涉及的逻辑可以参见CodeBlock类中的[setCodeDslById](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/services/codeBlock.ts#L107)方法。 并且可以在编辑器左侧的“代码块”tab下看到当前活动的代码块列表 -代码块列表 +代码块列表 ## 组件绑定 代码块的初衷是为了实现对组件逻辑的在线干预（代码执行的时机平台提供了组件created, mounted两个钩子），因此我们需要将创建的代码与组件进行关联。 @@ -78,7 +78,7 @@ ## 代码块界面展示 侧边栏的代码块列表可以查看当前创建的代码块，以及每个代码块绑定的组件，点击代码块下方展示的组件icon可以在画布中选中该组件 -代码块列表 +代码块列表 代码块编辑面板，可以在这里编写代码内容，申明参数 代码块编辑面板 diff --git a/docs/guide/advanced/data-source.md b/docs/guide/advanced/data-source.md new file mode 100644 index 00000000..c4e149b1 --- /dev/null +++ b/docs/guide/advanced/data-source.md @@ -0,0 +1,105 @@ +# 数据源 + +## 使用数据源 + +### 添加数据源 + +在编辑器左侧边栏中选中数据源，在数据源面板右上角添加中选择对应的数据源类型（默认提供了两种基础的数据源） + +[![alt 数据源列表](/data-source.png "数据源列表")](/data-source.png){target="_blank"} + +### 配置属性字段 + +[![alt 新增数据源](/create-data-source.png "新增数据源")](/create-data-source.png){target="_blank"} + +#### 基础数据源 + +静态数据，不会自动更新，可以通过配置方法，在方法中更新数据源 + +```js +({ dataSource, app }) => { + dataSource.setData({ + // 数据 + }); +} +``` + +然后再组件的事件联动中关联此方法，来触发数据源更新 + +#### HTTP数据源 + +通过配置HTTP相关参数(url, query, body, header等)通过网络api获取数据，该数据源拥有request方法，可通过此方法来刷新数据源 + +```js +({ dataSource, app }) => { + dataSource.request(); +} +``` + + +### 在组件中使用 + + +#### 数据源模板输入框（data-source-input） + +formConfig.js +```js +[ + { + type: 'data-source-input' + } +] +``` + +[![alt 数据源模版](/data-source-input.png "数据源模版")](/data-source-input.png){target="_blank"} + +#### 数据源字段选择器输入框（data-source-field-select) + +formConfig.js +```js +[ + { + type: 'data-source-filed-select' + } +] +``` + +#### 数据源选择器（data-source-select) + + +formConfig.js +```js +[ + { + type: 'data-source-select' + } +] +``` +#### 数据源方法选择器（data-source-method-select) + +formConfig.js +```js +[ + { + type: 'data-source-method-select' + } +] +``` + +#### 显示条件 + +当配置的条件成立时显示，反之隐藏 + +[![alt 显示条件](/display-cond.png "显示条件")](/display-cond.png){target="_blank"} + +## 数据源开发 + +### 数据源规范 + +数据源的基础形式，需要有四个文件 +- index 入口文件，引入下面几个文件 +- formConfig 表单配置描述 +- initValue 表单初始值 +- event 定义联动事件，具体可以参考[组件联动](../guide/advanced/coupling.html#组件联动) +- dataSource 数据源逻辑代码 + diff --git a/docs/guide/conception.md b/docs/guide/conception.md index 6b9c66df..4dddc789 100644 --- a/docs/guide/conception.md +++ b/docs/guide/conception.md @@ -1,6 +1,8 @@ # 基础概念 我们通过讲述tmagic-editor的一些基础概念。帮助开发者可以了解tmagic-editor是如何运行以及如何在基础项目之上开发、使用它。 +[![alt 原理](/flow.png "原理")](/flow.png){target="_blank"} + ## 编辑器 编辑器基础布局上分为：左面板、工作区、右面板、工具栏，如下图。 - **左面板**，包含了组件库的展示，以及工作区中已添加组件的组件树展示。 diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md index 7dc7f674..1ba9229e 100644 --- a/docs/guide/introduction.md +++ b/docs/guide/introduction.md @@ -2,7 +2,7 @@ tmagic-editor可视化开源项目是从魔方平台演化而来的开源项目，意在提供一个供开发者快速搭建可视化搭建平台的解决方案。 -魔方demo图 +魔方demo图 ## 特性 @@ -22,16 +22,19 @@ tmagic-editor可视化开源项目是从魔方平台演化而来的开源项目 - **模拟器**，居中位置渲染了当前页面配置的组件内容，模拟真实页面的展示内容。 - **组件库**，左侧展示当前业务下的相关组件内容，包含tmagic-editor提供的基础组件和业务自定义组件。 - **组件树**，左侧展示当前页面添加的组件内容，以树状结构展示。 +- **[代码块](./advanced/code-block.md)**，左侧展示添加的函数，可供组件事件中联动所用，或者组件声明周期中调用。 +- **[数据源](./advanced/data-source.md)**，左侧展示添加的数据源，用于组件中的各项配置。 - **表单配置**，右侧表单项目，展示由组件内提供的配置描述，提供修改组件行为的配置项。 - **DSL 源码**，右上角的 📄 图标可以展示当前页面，各个组件配置，页面基础配置组合而成的配置源码。 -通过编辑器，可以创建、编辑、保存一个项目页面。同时，tmagic-editor开源项目提供了一个页面搭建管理平台的示例：magic-admin，可以用于快速构建一个完整的页面可视化搭建系统。 +通过编辑器，可以创建、编辑、保存一个项目页面。 ## 核心库 - **@tmagic/editor** 实现一个可视化编辑器。 - **@tmagic/form** 实现组件在编辑器中自定义表单配置。 - **@tmagic/core** 实现对组件进行跨框架管理与一些通用复杂逻辑的实现。 +- **@tmagic/data-source** 实现数据源的管理与编译。 - **@tmagic/stage** 实现在编辑器中对组件的位置拖动与大小拖拉。 - **@tmagic/ui** 提供一些vue3基础组件。 - **@tmagic/ui-vue2** 提供一些vue2基础组件。 @@ -44,3 +47,5 @@ tmagic-editor可视化开源项目是从魔方平台演化而来的开源项目 - 腾讯视频：视频会员，体育会员，WETV 国际版，TV，doki 商城，小企鹅，小说，漫画 - 腾讯会议 +- 腾讯新闻 +- 58同城本地生活服务 \ No newline at end of file diff --git a/docs/public/code-block-list.png b/docs/public/code-block-list.png new file mode 100644 index 00000000..6d82bb04 Binary files /dev/null and b/docs/public/code-block-list.png differ diff --git a/docs/public/code-block.png b/docs/public/code-block.png new file mode 100644 index 00000000..b5027ed6 Binary files /dev/null and b/docs/public/code-block.png differ diff --git a/docs/public/create-data-source.png b/docs/public/create-data-source.png new file mode 100644 index 00000000..12ea607c Binary files /dev/null and b/docs/public/create-data-source.png differ diff --git a/docs/public/data-source-input.png b/docs/public/data-source-input.png new file mode 100644 index 00000000..209a22e1 Binary files /dev/null and b/docs/public/data-source-input.png differ diff --git a/docs/public/data-source.png b/docs/public/data-source.png new file mode 100644 index 00000000..f35cca7f Binary files /dev/null and b/docs/public/data-source.png differ diff --git a/docs/public/display-cond.png b/docs/public/display-cond.png new file mode 100644 index 00000000..90bcb634 Binary files /dev/null and b/docs/public/display-cond.png differ diff --git a/docs/public/flow.png b/docs/public/flow.png new file mode 100644 index 00000000..1ee4f43d Binary files /dev/null and b/docs/public/flow.png differ diff --git a/docs/public/tmagic.png b/docs/public/tmagic.png new file mode 100644 index 00000000..026f40c4 Binary files /dev/null and b/docs/public/tmagic.png differ