✨ feat(FlowView): 组件文档 (#27)

* 📝 feat: proflow controller doc

* 📝 feat: background doc

* 📝 feat: default proflow background

* 📝 feat: flow panel component and docs

* 📝 feat: rename proflow to flowview

* ✨ feat: 新增default节点样式

* 📝 feat: flowview docs

* 📝 feat: lineage node docs

* 📝 feat: lineage group node docs

* 📝 feat: quick doc

* 🐛 fix: ci

---------

Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>

docs/useDocs/intro.md

@@ -6,5 +6,3 @@ group:
 title: 为什么选择 ReactFlow ？
 description:
 ---
-
-dsfsaf

docs/useDocs/quickDoc.md

@@ -8,4 +8,34 @@ order: 1
 description:
 ---
 
-asd aws
+## 快速入门
+
+如果您想尽快启动并运行，那么您来对地方了！ 此页面将在几分钟内带您从零到一创建一个有效的 ProFlow 应用程序。如果您想深入的了解 ProFlow 的全部内容，请查看示例，或深入了解 API 文档。
+
+## 安装
+
+若要在本地开始，应具备以下几点：
+
+- [Nodejs](https://nodejs.org/en) 安装
+- npm 或其他包管理工具，比如 [yarn](https://yarnpkg.com/) 或 [pnpm](https://pnpm.io/)
+- 以及 [React]（https://reactjs.org/）的基础知识
+
+首先启动一个 React 应用，推荐使用 [vite](https://vitejs.dev/), 但选择权在你手中。
+
+```bash
+pnpm create vite@latest my-pro-flow-app --template react
+```
+
+ProFlow 在 npm 上发布为 [@ant-design/pro-flow](https://www.npmjs.com/package/@ant-design/pro-flow) ，推荐使用 pnpm 安装。
+
+```bash
+pnpm i @ant-design/pro-flow -S
+```
+
+最后 React 服务，就可以开始了。
+
+```bash
+pnpm run dev
+```
+
+## 创建第一个 ProFlow

src/Background/demos/double.tsx

@@ -0,0 +1,26 @@
+import { ProFlow } from '@/index';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import Background, { BackgroundVariant } from '..';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    width: 100%;
+    height: 600px;
+  `,
+}));
+
+const BackgroundDemo = memo(() => {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.container}>
+      <ProFlow nodes={[]} edges={[]} miniMap={false} background={false}>
+        <Background id="1" gap={10} color="yellow" variant={BackgroundVariant.Lines} />
+        <Background id="2" gap={100} offset={1} color="red" variant={BackgroundVariant.Lines} />
+      </ProFlow>
+    </div>
+  );
+});
+
+export default BackgroundDemo;

src/Background/demos/index.tsx

@@ -0,0 +1,39 @@
+import { ProFlow } from '@/index';
+import { createStyles } from 'antd-style';
+import { memo, useState } from 'react';
+import { Panel } from 'reactflow';
+import Background, { BackgroundVariant } from '..';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    width: 100%;
+    height: 600px;
+  `,
+}));
+
+const BackgroundDemo = memo(() => {
+  const [variant, setVariant] = useState<BackgroundVariant>(BackgroundVariant.Cross);
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.container}>
+      <ProFlow nodes={[]} edges={[]} miniMap={false} background={false}>
+        <Panel position={'top-left'}>
+          <div>variant:</div>
+          <button type="button" onClick={() => setVariant(BackgroundVariant.Dots)}>
+            dots
+          </button>
+          <button type="button" onClick={() => setVariant(BackgroundVariant.Lines)}>
+            lines
+          </button>
+          <button type="button" onClick={() => setVariant(BackgroundVariant.Cross)}>
+            cross
+          </button>
+        </Panel>
+        <Background variant={variant} />
+      </ProFlow>
+    </div>
+  );
+});
+
+export default BackgroundDemo;

src/Background/index.md

@@ -0,0 +1,35 @@
+---
+group: 辅助
+title: Background 画布背景
+description: 配合ProFLow组件使用，控制背景展示
+---
+
+## Default
+
+<code src="./demos/index.tsx" center></code>
+
+## Double Background
+
+<code src="./demos/double.tsx" center></code>
+
+## APIs
+
+| 属性名    | 类型                        | 描述                                                                     | 默认值 | 必选 |
+| --------- | --------------------------- | ------------------------------------------------------------------------ | ------ | ---- |
+| id        | `string`                    | 如果要显示多个背景，则需要                                               | -      | -    |
+| className | `string`                    | 自定义类名                                                               | -      | -    |
+| variant   | `BackgroundVariant`         | 背景图案类型                                                             | -      | -    |
+| gap       | `number \|[number, number]` | 模式之间的差距。您可以传递一个包含两个数字的数组来指定 x 间隙和 y 间隙。 | -      | -    |
+| size      | `number`                    | ”点“的半径或”十字“的尺寸                                                 | -      | -    |
+| lineWidth | `number`                    | ”线“或”十字“的宽度                                                       | -      | -    |
+| offset    | `number`                    | 图案偏移                                                                 | -      | -    |
+| color     | `string`                    | 图案颜色                                                                 | -      | -    |
+| style     | `CSSProperties`             | 样式属性                                                                 | -      | -    |
+
+### BackgroundVariant
+
+| 属性名 | 类型     | 描述 | 默认值 | 必选 |
+| ------ | -------- | ---- | ------ | ---- |
+| lines  | `string` | 线   | -      | -    |
+| dots   | `string` | 点   | -      | -    |
+| cross  | `string` | 十字 | -      | -    |

src/Background/index.tsx

@@ -0,0 +1,22 @@
+import { CSSProperties } from 'react';
+import { Background, BackgroundVariant } from 'reactflow';
+
+interface BackgroundProps {
+  variant?: BackgroundVariant;
+  gap?: number | [number, number];
+  size?: number;
+  lineWidth?: number;
+  offset?: number;
+  color?: string;
+  style?: CSSProperties;
+  className?: string;
+  id?: string;
+}
+
+export default (props: BackgroundProps) => {
+  const { gap = 10, color = '#bac3d4' } = props;
+
+  return <Background {...props} gap={gap} color={color} />;
+};
+
+export { BackgroundVariant };

src/ControlInput/index.md

@@ -1,6 +1,6 @@
 ---
 title: ControlInput 可控输入框
-group: 输入控件
+group: 控件
 description: 针对编辑场景优化的输入框控件
 ---
 

src/EditableText/index.md

@@ -1,5 +1,5 @@
 ---
-group: 输入控件
+group: 控件
 title: EditableText 可编辑文本
 description: EditableText is a component that allows users to edit text inline. It displays the text in a non-editable state by default, but when the user clicks the edit icon, it switches to an editable input field where the user can make changes. Once the user is done editing, they can click outside the input field or press the enter key to save the changes. The component uses the ControlInput component to display the input field and passes the value and onChange props to it.
 ---

src/FlowPanel/demos/index.tsx

@@ -0,0 +1,29 @@
+import { ProFlow } from '@/index';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import FlowPanel from '..';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    width: 100%;
+    height: 600px;
+  `,
+}));
+
+const FlowControllerDemo = memo(() => {
+  const { styles } = useStyles();
+  return (
+    <div className={styles.container}>
+      <ProFlow nodes={[]} edges={[]} miniMap={false}>
+        <FlowPanel position="top-left">top-left</FlowPanel>
+        <FlowPanel position="top-center">top-center</FlowPanel>
+        <FlowPanel position="top-right">top-right</FlowPanel>
+        <FlowPanel position="bottom-left">bottom-left</FlowPanel>
+        <FlowPanel position="bottom-center">bottom-center</FlowPanel>
+        <FlowPanel position="bottom-right">bottom-right</FlowPanel>
+      </ProFlow>
+    </div>
+  );
+});
+
+export default FlowControllerDemo;

src/FlowPanel/index.md

@@ -0,0 +1,24 @@
+---
+group: 辅助
+title: FlowPanel 画布面板
+description: 配合ProFLow组件使用，提供一个展示在画布上的面板
+---
+
+## Default
+
+<code src="./demos/index.tsx" center></code>
+
+## APIs
+
+| 属性名    | 类型              | 描述                 | 默认值 | 必选 |
+| --------- | ----------------- | -------------------- | ------ | ---- |
+| className | `string`          | 自定义类名           | -      | -    |
+| visible   | `boolean`         | 是否展示             | -      | -    |
+| position  | `MiniMapPosition` | 控制器在画布中的坐标 | -      | -    |
+
+### MiniMapPosition
+
+| 属性名 | 类型     | 描述                           | 默认值 | 必选 |
+| ------ | -------- | ------------------------------ | ------ | ---- |
+| x      | `number` | x 坐标，正数向左偏移，负数反之 | 0      | -    |
+| y      | `number` | y 坐标，正数向上偏移，负数反之 | 0      | -    |

src/FlowPanel/index.tsx

@@ -0,0 +1,16 @@
+import { Panel, PanelPosition } from 'reactflow';
+
+interface PanelProps {
+  position?: PanelPosition;
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default (props: PanelProps) => {
+  const { position = 'top-left', children } = props;
+
+  return <Panel position={position}>{children}</Panel>;
+};
+
+export { PanelPosition };

src/FlowStoreProvider/index.md

@@ -2,7 +2,7 @@
 title: FlowStoreProvider 流数据容器
 atomId: FlowStoreProvider
 nav: 组件
-group: 容器组件
+group: 辅助
 ---
 
 # FlowStoreProvider

src/ProFlow/FlowView.tsx → src/FlowView/FlowView.tsx

@@ -1,10 +1,10 @@
-import { ProFlowProps } from '@/constants';
+import { FlowViewProps } from '@/constants';
 import { FC, useContext } from 'react';
 import FlowView from '.';
 import { FlowViewProvider } from './provider/FlowViewProvider';
 import { FlowViewContext } from './provider/provider';
 
-const ProFlow: FC<ProFlowProps> = (props) => {
+const ProFlow: FC<FlowViewProps> = (props) => {
   const { isUseProvider } = useContext(FlowViewContext);
 
   if (isUseProvider) {

src/FlowView/components/DefaultNode.tsx

@@ -0,0 +1,12 @@
+import { DefaultNodeData } from '@/constants';
+import { FC } from 'react';
+import { useStyles } from '../styles';
+
+const DefaultNode: FC<DefaultNodeData> = (props) => {
+  const { styles, cx } = useStyles();
+  const { className, children } = props;
+
+  return <div className={cx(styles.nodeWrap, className)}>{children}</div>;
+};
+
+export default DefaultNode;

src/ProFlow/constants.tsx → src/FlowView/constants.tsx

@@ -1,5 +1,5 @@
 import { Node } from 'reactflow';
-import { ProFlowNode, ProFlowNodeData } from '../constants';
+import { DefaultNodeType, FlowNodeType, NodeTypeDataMap } from '../constants';
 
 export enum NodeSelect {
   SELECT = 'SELECT',
@@ -15,7 +15,7 @@ export interface InitialNode extends Node {
   height?: number;
 }
 
-export interface NodeMapItem {
+export interface NodeMapItem<T extends FlowNodeType = DefaultNodeType<FlowNodeType>> {
   id: string;
   key?: string;
   left?: string[];
@@ -29,6 +29,7 @@ export interface NodeMapItem {
   danger?: boolean;
   dangerCount?: number;
   type?: 'input' | 'output' | 'default';
+  flowNodeType?: T;
   className?: string;
   select?: NodeSelect;
   isGroup?: boolean;
@@ -38,7 +39,7 @@ export interface NodeMapItem {
   qualityScore?: string;
   subDanger?: boolean;
   logo?: string;
-  data: ProFlowNodeData | ProFlowNode[];
+  data: NodeTypeDataMap[T];
   nodeType?: string;
   zoom?: number;
   label?: string;

src/ProFlow/demos/ProFlowDemo.tsx → src/FlowView/demos/ProFlowDemo.tsx

@@ -1,4 +1,4 @@
-import { EdgeType, NodeSelect, ProFlowEdge, ProFlowNode } from '@/index';
+import { EdgeType, FlowViewEdge, FlowViewNode, NodeSelect } from '@/index';
 import { ProFlow } from '@ant-design/pro-flow';
 import { Progress } from 'antd';
 import { createStyles } from 'antd-style';
@@ -49,14 +49,13 @@ const DangerLogo = styled.div`
   }
 `;
 
-const nodes: ProFlowNode[] = [
+const nodes: FlowViewNode[] = [
   {
     id: 'a1',
     label: '123',
+    type: 'default',
     data: {
-      title: 'XXX数据源',
-      describe: 'cksadjfnf',
-      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
+      children: <div>default node, 123123</div>,
     },
   },
   {
@@ -118,8 +117,8 @@ const nodes: ProFlowNode[] = [
   },
   {
     id: 'd1',
-    group: true,
     label: '456',
+    type: 'lineageGroup',
     data: [
       {
         id: 'a5',
@@ -181,7 +180,7 @@ const nodes: ProFlowNode[] = [
   },
 ];
 
-const edges: ProFlowEdge[] = [
+const edges: FlowViewEdge[] = [
   {
     id: 'a1-b1',
     source: 'a1',
@@ -240,11 +239,11 @@ const edges: ProFlowEdge[] = [
 ];
 
 const ProFlowDemo = () => {
-  const [_nodes, setNodes] = useState<ProFlowNode[]>([...nodes]);
-  const [_edges, setEdges] = useState<ProFlowEdge[]>([...edges]);
+  const [_nodes, setNodes] = useState<FlowViewNode[]>([...nodes]);
+  const [_edges, setEdges] = useState<FlowViewEdge[]>([...edges]);
   const { styles } = useStyles();
 
-  const handleHighlight = (node: ProFlowNode) => {
+  const handleHighlight = (node: FlowViewNode) => {
     _nodes.forEach((_node) => {
       if (_node.id === node.id) {
         _node.select = NodeSelect.SELECT;