Merge pull request #1583 from alibaba/xflow

Xflow
alibaba · Dec 4, 2024 · 63573e7 · 63573e7
2 parents b77b34d + dc726a5
commit 63573e7
Show file tree

Hide file tree

Showing 100 changed files with 6,439 additions and 11 deletions.
diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.dumi/theme/slots/Header/Navigation.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { CodeOutlined, DownOutlined } from '@ant-design/icons';
 import { Menu } from 'antd';
 import { Link } from 'dumi';
-import { CodeOutlined, DownOutlined, MobileOutlined, SwapOutlined, ToolOutlined } from '@ant-design/icons';
+import React from 'react';
 
 const Navigation: React.FC = () => {
   const items: any = [
@@ -13,17 +13,21 @@ const Navigation: React.FC = () => {
       label: <Link to="/table-render">TableRender</Link>,
       key: 'table-render',
     },
+    // {
+    //   label: <Link to="/xflow">XFlow</Link>,
+    //   key: 'xflow',
+    // },
     {
       label: <Link to="/form-render-mobile">FRMobile</Link>,
-      key: 'form-render-mobile'
+      key: 'form-render-mobile',
     },
     // {
     //   label: <Link to="/data-render">DataView</Link>,
     //   key: 'data-render'
     // },
     {
       label: <Link to="/playground">Playground</Link>,
-      key: 'playground'
+      key: 'playground',
     },
     {
       label: <Link to="/schema-builder">SchemaBuilder</Link>,
@@ -33,17 +37,23 @@ const Navigation: React.FC = () => {
       label: (
         <div>
           <span>更多</span>
-          <DownOutlined style={{fontSize: 12, color: '#666', marginLeft: 3}} />
+          <DownOutlined
+            style={{ fontSize: 12, color: '#666', marginLeft: 3 }}
+          />
         </div>
       ),
       children: [
         {
-          label: <a href="https://1.xrender.fun/chart-render" target='_black'>ChartRender</a>,
+          label: (
+            <a href="https://1.xrender.fun/chart-render" target="_black">
+              ChartRender
+            </a>
+          ),
           key: 'chart-render',
           icon: <CodeOutlined />,
-        }
-      ]
-    }
+        },
+      ],
+    },
   ];
 
   return <Menu disabledOverflow items={items} mode="horizontal" />;

diff --git a/.dumirc.ts b/.dumirc.ts
@@ -76,6 +76,7 @@ export default defineConfig({
     'form-render-mobile':  path.resolve(__dirname, 'packages/form-render-mobile/src'),
     '@xrenders/schema-builder':  path.resolve(__dirname, 'tools/schema-builder/src'),
     '@xrenders/data-render':  path.resolve(__dirname, 'packages/data-render/src'),
+    '@xrenders/xflow':  path.resolve(__dirname, 'packages/x-flow/src'),
   },
   codeSplitting: { jsStrategy: 'granularChunks' },
   //...(process.env.NODE_ENV === 'development' ? {} : { ssr: {} }),

diff --git a/.npmrc b/.npmrc
@@ -1 +1 @@
-registry=https://registry.npmjs.org/
+registry=https://registry.npmmirror.com/
diff --git a/.turbo/daemon/58af6c43ce0c4d29-turbo.log.2024-12-04 b/.turbo/daemon/58af6c43ce0c4d29-turbo.log.2024-12-04
@@ -0,0 +1,8 @@
+2024-12-04T00:52:39.144082Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf("packages/x-flow/package.json")}
+2024-12-04T00:52:39.144107Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Other("@xrenders/xflow"), path: AnchoredSystemPathBuf("packages/x-flow") }}))
+2024-12-04T00:54:43.043002Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf("docs/data-render/index.md")}
+2024-12-04T00:54:43.043046Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Root, path: AnchoredSystemPathBuf("") }}))
+2024-12-04T00:55:35.341519Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf("docs/xflow/index.md")}
+2024-12-04T00:55:35.341535Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Root, path: AnchoredSystemPathBuf("") }}))
+2024-12-04T00:56:31.240344Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf(".dumi/theme/slots/Header/Navigation.tsx")}
+2024-12-04T00:56:31.240359Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Root, path: AnchoredSystemPathBuf("") }}))
diff --git a/.turbo/daemon/9af73f40ad414c73-turbo.log.2024-12-03 b/.turbo/daemon/9af73f40ad414c73-turbo.log.2024-12-03
@@ -0,0 +1,10 @@
+2024-12-03T17:26:27.588772Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf("packages/x-flow/src/types.ts")}
+2024-12-03T17:26:27.588794Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Other("@xrenders/xflow"), path: AnchoredSystemPathBuf("packages/x-flow") }}))
+2024-12-03T17:27:03.185223Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf("packages/x-flow/src/types.ts")}
+2024-12-03T17:27:03.185237Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Other("@xrenders/xflow"), path: AnchoredSystemPathBuf("packages/x-flow") }}))
+2024-12-03T17:27:46.488909Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf("packages/x-flow/src/withProvider.tsx")}
+2024-12-03T17:27:46.488931Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Other("@xrenders/xflow"), path: AnchoredSystemPathBuf("packages/x-flow") }}))
+2024-12-03T17:27:51.584147Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf("packages/x-flow/src/types.ts")}
+2024-12-03T17:27:51.584179Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Other("@xrenders/xflow"), path: AnchoredSystemPathBuf("packages/x-flow") }}))
+2024-12-03T17:29:05.583324Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf("packages/x-flow/src/withProvider.tsx")}
+2024-12-03T17:29:05.583342Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Other("@xrenders/xflow"), path: AnchoredSystemPathBuf("packages/x-flow") }}))
diff --git a/docs/form-render/advanced-widget.md b/docs/form-render/advanced-widget.md
@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 2
 toc: content
 mobile: false
 group: 

diff --git a/docs/xflow/FlowProvider.md b/docs/xflow/FlowProvider.md
@@ -0,0 +1,12 @@
+---
+order: 3
+title: '多实例画布'
+mobile: false
+group:
+  title: 最佳展示
+  order: 4
+---
+
+# 基础交互
+
+<code src="./demo/flow-provider/index.tsx"></code>
diff --git a/docs/xflow/api.md b/docs/xflow/api.md
@@ -0,0 +1,49 @@
+---
+order: 1
+toc: content
+title: API
+---
+# API
+
+## XFlow
+
+| 属性          | 描述                                 | 类型                                                        | 默认值 |
+| ------------- | ------------------------------------ | ----------------------------------------------------------- | ------ |
+| initialValues | 初始的节点和边数据                   | `{nodes:any[],edges:any[]}`                                 | -      | - |
+| layout        | 节点布局的方向                       | `LR \| TB`                                                  | LR     | - |
+| widgets       | 自定义组件                           | `Record<string, ReactNode>`                                 | -      | - |
+| settings      | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] |        |
+| nodeSelector  | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector`                                             |        |
+
+### TNodeGroup
+
+节点分组配置
+
+| 属性  | 描述         | 类型          | 默认值 |
+| ----- | ------------ | ------------- | ------ |
+| title | 分组名称     | `string`      |        |
+| type  | 分组类型     | `_group`      | _group |
+| items | 节点配置信息 | `TNodeItem[]` |        |
+
+## TNodeItem
+
+单个节点配置
+
+| 属性               | 描述                                                                                                      | 类型                                                                                                                                                                                                                                | 默认值 |
+| ------------------ | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
+| title              | 节点名称                                                                                                  | `string`                                                                                                                                                                                                                            |        |
+| type               | 节点类型                                                                                                  | `string`                                                                                                                                                                                                                            |        |
+| hidden             | 是否在配置面板中显示节点                                                                                  | `boolean`                                                                                                                                                                                                                           | false  |
+| targetHandleHidden | 是否隐藏左侧输入连接头                                                                                    | `boolean`                                                                                                                                                                                                                           | false  |
+| sourceHandleHidden | 是否隐藏右侧输出连接头                                                                                    | `boolean`                                                                                                                                                                                                                           | false  |
+| icon               | 节点的图标配置                                                                                            | `{type:string;bgColor:string}`                                                                                                                                                                                                      |        |
+| settingSchema      | 节点的业务配置信息，详见[form-render 文档](/form-render/api-schema)。同时设置`settingSchema`和`settingWidget`只生效`settingWidget`                                      | <a target="_blank" href="https://github.com/alibaba/x-render/blob/e2feff8fdb3bef5537b92a2157dbbf40b9d4eb17/packages/form-render/src/type.ts#L32">SchemaBase</a> |        |
+| settingWidget      | 自定义节点的业务配置组件，在弹窗中展示。同时设置`settingSchema`和`settingWidget`只生效`settingWidget`。定义之后需要在`widgets`中引入自定义组件。 | `string`                                                                                                                                                                                                                            |        |
+| nodeWidget         | 自定义节点的业务配置信息展示组件，在节点内部展示业务配置信息。定义之后需要在`widgets`中引入自定义组件。                                             | `string`                                                                                                                                                                                                                            |        |
+
+## TNodeSelector
+
+| 属性       | 描述             | 类型                                                        | 默认值 |
+| ---------- | ---------------- | ----------------------------------------------------------- | ------ |
+| showSearch | 节点是否可被搜索 | `boolean`                                                   | false  |
+| items      | 节点配置         | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] |        |
diff --git a/docs/xflow/custom-node-setting.md b/docs/xflow/custom-node-setting.md
@@ -0,0 +1,75 @@
+---
+order: 2
+toc: content
+mobile: false
+group: 
+  title: 最佳展示
+  order: 1
+---
+
+# 节点配置面板
+节点配置面板支持以下两种渲染方式自定义：
+
+- **Schema 方式**: 适用于节点配置较为简单的场景。通过 FormRender 配置 schema 来实现快速渲染。
+- **Widget 方式**: 针对复杂的配置需求，schema 无法满足时，可以通过自定义组件进行灵活渲染。
+
+
+## Schema
+通过配置节点的 settingSchema 属性，实现节点数据配置项的自定义渲染。
+
+```jsx
+import { Input } from 'antd';
+import React from 'react';
+import XFlow from '@xrenders/xflow';
+import settings from './schema/custom-settings.ts';
+
+
+const customWidget=({value,onChange})=>{
+  return <Input  value={value}  onChange={onChange}/>
+}
+export default () => {
+  const nodes = [
+    {
+      id: '1',
+      type: 'Start',
+      data: {
+        inputVal:'我是自定义组件'
+      },
+      position: {
+        x: 40,
+        y: 240,
+      }
+    },
+    {
+      id: '2',
+      type: 'End',
+      data: {},
+      position: {
+        x: 500,
+        y: 240,
+      }
+    }
+  ];
+
+  const edges = [
+    { source: '1', target: '2', id: '234123' }
+  ]
+
+  return (
+    <div style={{ height: '600px' }}>
+      <XFlow
+        initialValues={{ nodes, edges }}
+        settings={settings}
+        widgets={{ customWidget }}
+      />
+    </div>
+  );
+}
+
+
+``` 
+
+## Widget
+通过配置节点的 `settingWidget` 属性，实现节点数据配置项的自定义渲染。
+
+<code src="./demo/custom-flow/index.tsx"></code>
diff --git a/docs/xflow/custom-node-view.md b/docs/xflow/custom-node-view.md
@@ -0,0 +1,15 @@
+---
+order: 2
+toc: content
+mobile: false
+group: 
+  title: 最佳展示
+  order: 1
+---
+
+# 节点内容展示
+当需要额外展示节点内容时，可以通过 `nodeWidget` 进行灵活渲染。
+
+使用`nodeWidget`自定义节点的业务配置信息展示组件，在节点内部展示业务配置信息 
+
+<code src="./demo/nodeWidget"></code>
diff --git a/docs/xflow/data/basic.ts b/docs/xflow/data/basic.ts
@@ -0,0 +1,51 @@
+export default {
+  "creator": "清风徐来",
+  "relevanceCode": "421421",
+  "desc": "浙江省杭州市工专路",
+  "create-time": "2019-10-10",
+  "effective-date": "2019-10-10 ～ 2020-10-31",
+  "safety": {
+    "name": "Test demo 001",
+    "app": "中后台详情页面",
+    "mode": "代码包",
+    "yum": "592342323904823489",
+    "fore": "23"
+  },
+  "operLog": [{
+    "type": "创建测试",
+    "creator": "清风徐来",
+    "time": "2019-10-30 12:23:45",
+    "result": "1",
+    "desc": "这是备注"
+  }, {
+    "type": "创建测试",
+    "creator": "清风徐来",
+    "time": "2019-10-30 12:23:45",
+    "result": "1",
+    "desc": "这是备注"
+  }, {
+    "type": "创建测试",
+    "creator": "清风徐来",
+    "time": "2019-10-30 12:23:45",
+    "result": "1",
+    "desc": "这是备注"
+  }, {
+    "type": "创建测试",
+    "creator": "清风徐来",
+    "time": "2019-10-30 12:23:45",
+    "result": "1",
+    "desc": "这是备注"
+  }, {
+    "type": "创建测试",
+    "creator": "清风徐来",
+    "time": "2019-10-30 12:23:45",
+    "result": "1",
+    "desc": "这是备注"
+  }, {
+    "type": "创建测试",
+    "creator": "清风徐来",
+    "time": "2019-10-30 12:23:45",
+    "result": "1",
+    "desc": "这是备注"
+  }]
+}
diff --git a/docs/xflow/demo/basic/index.tsx b/docs/xflow/demo/basic/index.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import XFlow from '@xrenders/xflow';
+import settings from './setting';
+
+export default () => {
+  const nodes = [
+    {
+      id: '1',
+      type: 'Start',
+      data: {},
+      position: {
+        x: 40,
+        y: 240,
+      }
+    },
+    {
+      id: '2',
+      type: 'End',
+      data: {},
+      position: {
+        x: 500,
+        y: 240,
+      }
+    }
+  ];
+
+  const edges = [
+    { source: '1', target: '2', id: '234123' }
+  ]
+
+  return (
+    <div style={{ height: '600px' }}>
+      <XFlow
+        initialValues={{ nodes, edges }}
+        settings={settings}
+        nodeSelector={{
+          showSearch: true,
+        }}
+      />
+    </div>
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		registry=https://registry.npmjs.org/
		registry=https://registry.npmmirror.com/