📝 feat: demos path

src/Background/demos/index.tsx

@@ -1,8 +1,7 @@
-import { FlowView } from '@/index';
+import { Background, BackgroundVariant, FlowPanel, FlowView } from '@ant-design/pro-flow';
+import { Button } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo, useState } from 'react';
-import { Panel } from 'reactflow';
-import Background, { BackgroundVariant } from '..';
 
 const useStyles = createStyles(({ css }) => ({
   container: css`
@@ -18,18 +17,12 @@ const BackgroundDemo = memo(() => {
   return (
     <div className={styles.container}>
       <FlowView nodes={[]} edges={[]} miniMap={false} background={false}>
-        <Panel position={'top-left'}>
+        <FlowPanel 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>
+          <Button onClick={() => setVariant(BackgroundVariant.Dots)}>dots</Button>
+          <Button onClick={() => setVariant(BackgroundVariant.Lines)}>lines</Button>
+          <Button onClick={() => setVariant(BackgroundVariant.Cross)}>cross</Button>
+        </FlowPanel>
         <Background variant={variant} />
       </FlowView>
     </div>

src/FlowPanel/demos/index.tsx

@@ -1,7 +1,6 @@
-import { FlowView } from '@/index';
+import { FlowPanel, FlowView } from '@ant-design/pro-flow';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
-import FlowPanel from '..';
 
 const useStyles = createStyles(({ css }) => ({
   container: css`

src/LineageGroupNode/demos/index.tsx

@@ -1,5 +1,4 @@
-import { FlowViewEdge, FlowViewNode, SelectType } from '@/index';
-import { FlowView } from '@ant-design/pro-flow';
+import { FlowView, FlowViewEdge, FlowViewNode, SelectType } from '@/index';
 import { createStyles } from 'antd-style';
 import { useState } from 'react';
 

src/LineageNode/demos/index.tsx

@@ -1,5 +1,4 @@
-import { FlowViewEdge, FlowViewNode, SelectType } from '@/index';
-import { FlowView } from '@ant-design/pro-flow';
+import { FlowView, FlowViewEdge, FlowViewNode, SelectType } from '@ant-design/pro-flow';
 import { Progress } from 'antd';
 import { createStyles } from 'antd-style';
 import React, { useState } from 'react';

src/ProFlowController/demos/FlowControllerDemo.tsx

@@ -1,4 +1,4 @@
-import { FlowView, ProFlowController } from '@/index';
+import { FlowView, ProFlowController } from '@ant-design/pro-flow';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 
@@ -13,7 +13,21 @@ const FlowControllerDemo = memo(() => {
   const { styles } = useStyles();
   return (
     <div className={styles.container}>
-      <FlowView nodes={[]} edges={[]} miniMap={false}>
+      <FlowView
+        nodes={[
+          {
+            id: 'a1',
+            label: 'default',
+            data: {
+              title: 'XXX_API_b3',
+              logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+              describe: 'XXX_XXX_XXX_API',
+            },
+          },
+        ]}
+        edges={[]}
+        miniMap={false}
+      >
         <ProFlowController position={{ x: 200, y: 50 }} />
       </FlowView>
     </div>

src/index.ts

@@ -1,4 +1,5 @@
 export * from './Background';
+export { default as Background } from './Background';
 export { default as BasicNode } from './BasicNode';
 export { default as CanvasLoading } from './CanvasLoading';
 export * from './ControlInput';