docs: update feature intro

lyn-boyu · lyn-boyu · commit df04d4c6d652 · 2021-11-21T01:25:58.000+08:00
diff --git a/packages/xflow-docs/docs/index.en-US.md b/packages/xflow-docs/docs/index.en-US.md
@@ -13,7 +13,7 @@ banner:
     - type: Heavy Released
       title: AntV BPMN solution is coming～
       date: 2021.11.22
-      link: https://www.yuque.com/antv/x6/solution
+      link: https://www.yuque.com/antv/blog/2021xflow
     - type: First Try
       title: XFlow 1.0.0 will publish!
       date: 2021.11.22
diff --git a/packages/xflow-docs/docs/index.zh-CN.md b/packages/xflow-docs/docs/index.zh-CN.md
@@ -11,11 +11,11 @@ banner:
       type: primary
   notifications:
     - type: Heavy Released
-      title: AntV BPMN solution is coming～
+      title: AntV 图编辑应用级解决方案发布啦！
       date: 2021.11.22
-      link: https://www.yuque.com/antv/x6/solution
+      link: https://www.yuque.com/antv/blog/2021xflow
     - type: First Try
-      title: XFlow 1.0.0 will publish!
+      title: XFlow 1.0.0 开源啦!
       date: 2021.11.22
       link: https://github.com/antvis/xflow
 ideas:
diff --git a/packages/xflow-docs/docs/index.zh.md b/packages/xflow-docs/docs/index.zh.md
@@ -11,11 +11,11 @@ banner:
       type: primary
   notifications:
     - type: Heavy Released
-      title: AntV BPMN solution is coming～
+      title: AntV 图编辑应用级解决方案发布啦！
       date: 2021.11.22
-      link: https://www.yuque.com/antv/x6/solution
+      link: https://www.yuque.com/antv/blog/2021xflow
     - type: First Try
-      title: XFlow 1.0.0 will publish!
+      title: XFlow 1.0.0 开源啦!
       date: 2021.11.22
       link: https://github.com/antvis/xflow
 ideas:
diff --git a/packages/xflow-docs/docs/tutorial/about/index.en-US.md b/packages/xflow-docs/docs/tutorial/about/index.en-US.md
@@ -3,8 +3,8 @@ title: 简介
 path: index
 order: -1
 group:
-  path: /tutorial
-  title: 简介
+  path: /tutorial/intro
+  title: XFlow
   order: 1
 nav:
   title: 教程
@@ -28,13 +28,13 @@ XFlow 的 X 代表从属于 X6 体系, Flow 可以理解为流程图也可以理
 
 ## ✨ 特性
 
-🌱　极易定制：支持使用 React 组件 开发节点/连线样式。
+🌱 　极易定制：支持使用 React 组件 开发节点/连线样式。
 
-🚀　开箱即用：内置1个快速上手 + 3个解决方案, 内置若干 React 交互组件, 如小地图、对齐线、右键菜单等。
+🚀 　开箱即用：内置 1 个快速上手 + 3 个解决方案, 内置若干 React 交互组件, 如小地图、对齐线、右键菜单等。
 
-💯　生产可用：源自蚂蚁体验技术部数据智能团队, 在蚂蚁大数据部、人工智能中台业务场景深度打磨验证。
+💯 　生产可用：源自蚂蚁体验技术部数据智能团队, 在蚂蚁大数据部、人工智能中台业务场景深度打磨验证。
 
-🧲　 一切皆可扩展：内置统一的扩展模式, 可按照自己的业务需求扩展图交互, 所有组件皆可扩展。
+🧲 　 一切皆可扩展：内置统一的扩展模式, 可按照自己的业务需求扩展图交互, 所有组件皆可扩展。
 
 ## 🍉 使用文档
 
diff --git a/packages/xflow-docs/docs/tutorial/about/index.zh-CN.md b/packages/xflow-docs/docs/tutorial/about/index.zh-CN.md
@@ -3,8 +3,8 @@ title: 简介
 path: index
 order: -1
 group:
-  path: /tutorial
-  title: 简介
+  path: /tutorial/intro
+  title: XFlow
   order: 1
 nav:
   title: 教程
@@ -28,13 +28,13 @@ XFlow 的 X 代表从属于 X6 体系, Flow 可以理解为流程图也可以理
 
 ## ✨ 特性
 
-🌱　极易定制：支持使用 React 组件 开发节点/连线样式。
+🌱 　极易定制：支持使用 React 组件 开发节点/连线样式。
 
-🚀　开箱即用：内置1个快速上手 + 3个解决方案, 内置若干 React 交互组件, 如小地图、对齐线、右键菜单等。
+🚀 　开箱即用：内置 1 个快速上手 + 3 个解决方案, 内置若干 React 交互组件, 如小地图、对齐线、右键菜单等。
 
-💯　生产可用：源自蚂蚁体验技术部数据智能团队, 在蚂蚁大数据部、人工智能中台业务场景深度打磨验证。
+💯 　生产可用：源自蚂蚁体验技术部数据智能团队, 在蚂蚁大数据部、人工智能中台业务场景深度打磨验证。
 
-🧲　 一切皆可扩展：内置统一的扩展模式, 可按照自己的业务需求扩展图交互, 所有组件皆可扩展。
+🧲 　 一切皆可扩展：内置统一的扩展模式, 可按照自己的业务需求扩展图交互, 所有组件皆可扩展。
 
 ## 🍉 使用文档
 
diff --git a/packages/xflow-docs/docs/tutorial/about/index.zh.md b/packages/xflow-docs/docs/tutorial/about/index.zh.md
@@ -3,8 +3,8 @@ title: 简介
 path: index
 order: -1
 group:
-  path: /tutorial
-  title: 简介
+  path: /tutorial/intro
+  title: XFlow
   order: 1
 nav:
   title: 教程
@@ -28,13 +28,13 @@ XFlow 的 X 代表从属于 X6 体系, Flow 可以理解为流程图也可以理
 
 ## ✨ 特性
 
-🌱　极易定制：支持使用 React 组件 开发节点/连线样式。
+🌱 　极易定制：支持使用 React 组件 开发节点/连线样式。
 
-🚀　开箱即用：内置1个快速上手 + 3个解决方案, 内置若干 React 交互组件, 如小地图、对齐线、右键菜单等。
+🚀 　开箱即用：内置 1 个快速上手 + 3 个解决方案, 内置若干 React 交互组件, 如小地图、对齐线、右键菜单等。
 
-💯　生产可用：源自蚂蚁体验技术部数据智能团队, 在蚂蚁大数据部、人工智能中台业务场景深度打磨验证。
+💯 　生产可用：源自蚂蚁体验技术部数据智能团队, 在蚂蚁大数据部、人工智能中台业务场景深度打磨验证。
 
-🧲　 一切皆可扩展：内置统一的扩展模式, 可按照自己的业务需求扩展图交互, 所有组件皆可扩展。
+🧲 　 一切皆可扩展：内置统一的扩展模式, 可按照自己的业务需求扩展图交互, 所有组件皆可扩展。
 
 ## 🍉 使用文档
 
diff --git a/packages/xflow-docs/docs/tutorial/getting-started/index.en-US.md b/packages/xflow-docs/docs/tutorial/getting-started/index.en-US.md
@@ -3,8 +3,8 @@ title: 快速上手
 path: index
 order: 1
 group:
-  path: /tutorial
-  title: 快速上手
+  path: /tutorial/intro
+  title: XFlow
   order: 1
 nav:
   title: 教程
@@ -183,11 +183,19 @@ const onLoad: IAppLoad = async app => {
 
 本章仅仅介绍了如何安装 XFlow 以及简单的使用场景, 在后续的教程中您可以了解更多 XFlow 的核心能力。
 
+解决方案：
+
 - [DAG 解决方案](/docs/tutorial/solutions/dag)
 - [ER 建模解决方案](/docs/tutorial/solutions/er)
 - [流程图解决方案](/docs/tutorial/solutions/flow)
+
+核心组件：
+
 - [XFlow 工作台组件](/docs/tutorial-core-components/xflow-component)
 - [XFlowCanvas 画布组件](/docs/tutorial-core-components/xflow-canvas-component)
+
+UI 交互组件：
+
 - [Toolbar 工具栏](/docs/tutorial-ext-components/canvas-toolbar)
 - [ScaleToolbar 缩放工具栏](/docs/tutorial-ext-components/canvas-scale-toolbar)
 - [ContextMenu 右键菜单](/docs/tutorial-ext-components/context-menu)
diff --git a/packages/xflow-docs/docs/tutorial/getting-started/index.zh-CN.md b/packages/xflow-docs/docs/tutorial/getting-started/index.zh-CN.md
@@ -3,8 +3,8 @@ title: 快速上手
 path: index
 order: 1
 group:
-  path: /tutorial
-  title: 快速上手
+  path: /tutorial/intro
+  title: XFlow
   order: 1
 nav:
   title: 教程
@@ -183,11 +183,19 @@ const onLoad: IAppLoad = async app => {
 
 本章仅仅介绍了如何安装 XFlow 以及简单的使用场景, 在后续的教程中您可以了解更多 XFlow 的核心能力。
 
+解决方案：
+
 - [DAG 解决方案](/docs/tutorial/solutions/dag)
 - [ER 建模解决方案](/docs/tutorial/solutions/er)
 - [流程图解决方案](/docs/tutorial/solutions/flow)
+
+核心组件：
+
 - [XFlow 工作台组件](/docs/tutorial-core-components/xflow-component)
 - [XFlowCanvas 画布组件](/docs/tutorial-core-components/xflow-canvas-component)
+
+UI 交互组件：
+
 - [Toolbar 工具栏](/docs/tutorial-ext-components/canvas-toolbar)
 - [ScaleToolbar 缩放工具栏](/docs/tutorial-ext-components/canvas-scale-toolbar)
 - [ContextMenu 右键菜单](/docs/tutorial-ext-components/context-menu)
diff --git a/packages/xflow-docs/docs/tutorial/getting-started/index.zh.md b/packages/xflow-docs/docs/tutorial/getting-started/index.zh.md
@@ -3,8 +3,8 @@ title: 快速上手
 path: index
 order: 1
 group:
-  path: /tutorial
-  title: 快速上手
+  path: /tutorial/intro
+  title: XFlow
   order: 1
 nav:
   title: 教程
@@ -183,11 +183,19 @@ const onLoad: IAppLoad = async app => {
 
 本章仅仅介绍了如何安装 XFlow 以及简单的使用场景, 在后续的教程中您可以了解更多 XFlow 的核心能力。
 
+解决方案：
+
 - [DAG 解决方案](/docs/tutorial/solutions/dag)
 - [ER 建模解决方案](/docs/tutorial/solutions/er)
 - [流程图解决方案](/docs/tutorial/solutions/flow)
+
+核心组件：
+
 - [XFlow 工作台组件](/docs/tutorial-core-components/xflow-component)
 - [XFlowCanvas 画布组件](/docs/tutorial-core-components/xflow-canvas-component)
+
+UI 交互组件：
+
 - [Toolbar 工具栏](/docs/tutorial-ext-components/canvas-toolbar)
 - [ScaleToolbar 缩放工具栏](/docs/tutorial-ext-components/canvas-scale-toolbar)
 - [ContextMenu 右键菜单](/docs/tutorial-ext-components/context-menu)
diff --git a/packages/xflow-docs/docs/tutorial/solutions/dag/index.md b/packages/xflow-docs/docs/tutorial/solutions/dag/index.md
@@ -21,84 +21,30 @@ nav:
 
 DAG: 在图论中，如果一个有向图从任意顶点出发无法经过若干条边回到该点，则这个图是一个有向无环图（DAG, Directed Acyclic Graph）。利用 DAG 图的数据结构可以使用算法解决拓扑排序/构建子图/路径查找等问题，因被应用在任务调度/因果结构/族谱血缘等场景。
 
-## DAG 图编辑场景
+## 功能介绍
 
-在任务编排的场景，用户需要通过操作可视化的图编辑应用将任务的依赖关系转化成为 DAG 图数据。这里我们要解决以下 3 个问题：
+### 节点交互（Node）
 
-1. 如何通过交互实现图关系数据的编排
-2. 如何通过交互实现图业务数据的编辑
-3. 如何保存数据/更新状态
+图由节点和连接这些节点的边所构成, 图编辑的第一步需要实现节点的的新建和删除，XFlow 流程图解决方案内置节点面板组件和事件封装来实现节点的增删改查交互。
 
-### 关系数据的构建（Create/Delete）
+<img src="https://gw.alipayobjects.com/mdn/rms_19b204/afts/img/A*_-PERKth6egAAAAAAAAAAAAAARQnAQ" style="display: block;padding: 12px 0;width: 61.88%;"/>
 
-1. 新建/删除节点
+### 连线交互（Edge）
 
-- 内置可拖拽的组件树用于新建节点
-- 组件树节点支持 popover 展示更多业务数据
-- 组件树树支持搜索
+图编辑的第二步需要实现节点间连线的增，删，改，查的交互
+<img src="https://gw.alipayobjects.com/mdn/rms_19b204/afts/img/A*xKGASoivL-wAAAAAAAAAAAAAARQnAQ" style="display: block;padding: 12px 0;width: 61.88%;" />
 
-- 自定义节点/状态显示
-- 自定义节点的连接桩
-- 节点的连接桩内置 tooltip
+### 群组交互（Group）
 
-- 选中快捷键删除节点
-- 右键选中删除节点
-- 框选批量删除节点
+在节点和边的基础上我们还可以把有逻辑关系的节点组装成组
+<img src="https://gw.alipayobjects.com/mdn/rms_19b204/afts/img/A*lgNQRYOtEI8AAAAAAAAAAAAAARQnAQ" style="display: block;padding: 12px 0;width: 61.88%;" />
 
-2. 新建/删除连线
+### 画布交互（Graph）
 
-- 直接连线
-- 吸附连线
-- 高亮可用
-- 拒绝连线/环检测
+XFlow 内置累常用的画布缩放，复制粘贴，撤销重做，MiniMap 等能力。
+<img src="https://gw.alipayobjects.com/mdn/rms_19b204/afts/img/A*cRchRaLf_6gAAAAAAAAAAAAAARQnAQ" style="display: block;padding: 12px 0;width: 61.88%;"/>
 
-- 选中快捷键删除连线
-- 右键选中删除连线
+### DAG 交互（Graph）
 
-3. 新建/删除群组
-
-- 框选新建
-- 选中解散
-- 折叠群组
-
-### 业务数据的操作（Update）
-
-1. toolbar/scale toolbar
-
-- 基础渲染/分组/左右
-- 联动画布状态
-- 自定义渲染 Popconfirm
-
-2. JsonSchemaForm
-
-- 基础渲染
-- 联动画布
-- modal
-
-3. ContextMenu
-
-- menu/分组二级
-- 动态
-
-4. Modal
-
-- form
-- confirm
-- view data/log
-
-### 保存和渲染数据 （Read）
-
-1. 数据的保存图的渲染
-
-- 保存图数据
-- 还原图渲染
-
-2. 数据的轮询问更新
-
-- 节点状态
-- 节点状态更新
-
-3. 画布操作
-
-- 放大缩小
-- minimap
+内置 DAG 特需的执行/停止执行/轮询更新画布节点状态的交互
+<img src="https://gw.alipayobjects.com/mdn/rms_19b204/afts/img/A*4SkDRpv79goAAAAAAAAAAAAAARQnAQ" style="display: block;padding: 12px 0;width: 61.88%;"/>
diff --git a/packages/xflow-docs/docs/tutorial/solutions/flow/demos/index.tsx b/packages/xflow-docs/docs/tutorial/solutions/flow/demos/index.tsx
@@ -2,24 +2,30 @@ import type { IAppLoad } from '@antv/xflow'
 import React, { useRef, useEffect } from 'react'
 /** 交互组件 */
 import {
+  /** XFlow核心组件 */
   XFlow,
+  /** 流程图画布组件 */
+  FlowchartCanvas,
+  /** 流程图配置扩展 */
+  FlowchartExtension,
+  /** 流程图节点组件 */
+  FlowchartNodePanel,
+  /** 流程图表单组件 */
+  FlowchartFormPanel,
+  /** 通用组件：快捷键 */
   KeyBindings,
-  /** 触发Command的交互组件 */
+  /** 通用组件：画布缩放 */
   CanvasScaleToolbar,
+  /** 通用组件：右键菜单 */
   CanvasContextMenu,
-  /** Graph的扩展交互组件 */
+  /** 通用组件：工具栏 */
   CanvasToolbar,
+  /** 通用组件：对齐线 */
   CanvasSnapline,
+  /** 通用组件：节点连接桩 */
   CanvasNodePortTooltip,
-  FlowchartExtension,
-  FlowchartNodePanel,
-  FlowchartCanvas,
-  FlowchartFormPanel,
 } from '@antv/xflow'
-import { Graph } from '@antv/x6'
-/** app 组件配置  */
-/** 配置Command */
-// import { useCmdConfig, initGraphCmds } from './config-cmd'
+import type { Graph } from '@antv/x6'
 /** 配置Menu */
 import { useMenuConfig } from './config-menu'
 /** 配置Toolbar */
@@ -39,7 +45,6 @@ export const Demo: React.FC<IProps> = props => {
   const { meta } = props
   const toolbarConfig = useToolbarConfig()
   const menuConfig = useMenuConfig()
-  // const cmdConfig = useCmdConfig()
   const keybindingConfig = useKeybindingConfig()
   const graphRef = useRef<Graph>()
   /**
@@ -105,7 +110,3 @@ export const Demo: React.FC<IProps> = props => {
 }
 
 export default Demo
-
-Demo.defaultProps = {
-  meta: { flowId: 'test-meta-flowchart-id' },
-}
diff --git a/packages/xflow-docs/docs/tutorial/solutions/flow/index.md b/packages/xflow-docs/docs/tutorial/solutions/flow/index.md
