docs: 数据源文档

re #603

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',

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下看到当前活动的代码块列表
-<img src="https://vip.image.video.qpic.cn/vupload/20230228/4d17861677585336888.png" alt="代码块列表">
+<img src="/code-block.png" alt="代码块列表">
 
 ## 组件绑定
 代码块的初衷是为了实现对组件逻辑的在线干预（代码执行的时机平台提供了组件created, mounted两个钩子），因此我们需要将创建的代码与组件进行关联。
@@ -78,7 +78,7 @@
 
 ## 代码块界面展示
 侧边栏的代码块列表可以查看当前创建的代码块，以及每个代码块绑定的组件，点击代码块下方展示的组件icon可以在画布中选中该组件
-<img src="https://vip.image.video.qpic.cn/vupload/20230228/92dcfe1677636899649.png" alt="代码块列表">
+<img src="/code-block-list.png" alt="代码块列表">
 
 代码块编辑面板，可以在这里编写代码内容，申明参数
 <img src="https://vip.image.video.qpic.cn/vupload/20230228/1fd2e11677637006239.png" alt="代码块编辑面板">

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 数据源逻辑代码
+

docs/guide/conception.md

@@ -1,6 +1,8 @@
 # 基础概念
 我们通过讲述tmagic-editor的一些基础概念。帮助开发者可以了解tmagic-editor是如何运行以及如何在基础项目之上开发、使用它。
 
+[![alt 原理](/flow.png "原理")](/flow.png){target="_blank"}
+
 ## 编辑器
 编辑器基础布局上分为：左面板、工作区、右面板、工具栏，如下图。
 - **左面板**，包含了组件库的展示，以及工作区中已添加组件的组件树展示。

docs/guide/introduction.md

@@ -2,7 +2,7 @@
 
 tmagic-editor可视化开源项目是从魔方平台演化而来的开源项目，意在提供一个供开发者快速搭建可视化搭建平台的解决方案。
 
-<img src="https://image.video.qpic.cn/oa_88b7d-32_509802977_1635842258505918" alt="魔方demo图">
+<img src="/tmagic.png" alt="魔方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同城本地生活服务