From a109ebbf9a300321b94cafeb62357a443241b513 Mon Sep 17 00:00:00 2001
From: jiangchu <jiangchu.wzy@antgroup.com>
Date: Fri, 3 Jan 2025 15:52:51 +0800
Subject: [PATCH] :sparkles: feat: type

---
 src/Background/demos/swim.tsx | 79 ++++++++++++++++++-----------------
 src/Background/index.zh-CN.md | 19 +++++++++
 src/index.ts                  |  2 +
 3 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/src/Background/demos/swim.tsx b/src/Background/demos/swim.tsx
index f74900c..d55974d 100644
--- a/src/Background/demos/swim.tsx
+++ b/src/Background/demos/swim.tsx
@@ -1,10 +1,9 @@
 /**
  * compact: true
  */
-import { FlowView } from '@ant-design/pro-flow';
+import { FlowView, SwimLaneProps, SwimlaneBackground } from '@ant-design/pro-flow';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
-import SwimlaneBackground from '../components/SwimBg';
 
 const useStyles = createStyles(({ css }) => ({
   container: css`
@@ -20,44 +19,46 @@ const BackgroundDemo = memo(() => {
     <div className={styles.container}>
       <FlowView nodes={[]} edges={[]} miniMap={false} background={false}>
         <SwimlaneBackground
-          lanes={[
-            {
-              id: '1',
-              label: 'Swimlane 1',
-              labelColor: '#FECCCB',
-            },
-            {
-              id: '2',
-              label: 'Swimlane 2',
-              labelColor: '#FDCDE6',
-            },
-            {
-              id: '3',
-              label: 'Swimlane 3',
-              labelColor: '#CEFFE7',
-            },
-            {
-              id: '4',
+          lanes={
+            [
+              {
+                id: '1',
+                label: 'Swimlane 1',
+                labelColor: '#FECCCB',
+              },
+              {
+                id: '2',
+                label: 'Swimlane 2',
+                labelColor: '#FDCDE6',
+              },
+              {
+                id: '3',
+                label: 'Swimlane 3',
+                labelColor: '#CEFFE7',
+              },
+              {
+                id: '4',
 
-              label: 'Swimlane 4',
-              labelColor: '#CDFECE',
-            },
-            {
-              id: '5',
-              label: 'Swimlane 5',
-              labelColor: '#E7FFCC',
-            },
-            {
-              id: '6',
-              label: 'Swimlane 6',
-              labelColor: '#CEFFE7',
-            },
-            {
-              id: '7',
-              label: 'Swimlane 7',
-              labelColor: '#CBE5FF',
-            },
-          ]}
+                label: 'Swimlane 4',
+                labelColor: '#CDFECE',
+              },
+              {
+                id: '5',
+                label: 'Swimlane 5',
+                labelColor: '#E7FFCC',
+              },
+              {
+                id: '6',
+                label: 'Swimlane 6',
+                labelColor: '#CEFFE7',
+              },
+              {
+                id: '7',
+                label: 'Swimlane 7',
+                labelColor: '#CBE5FF',
+              },
+            ] as SwimLaneProps[]
+          }
         ></SwimlaneBackground>
       </FlowView>
     </div>
diff --git a/src/Background/index.zh-CN.md b/src/Background/index.zh-CN.md
index fb0f134..a042298 100644
--- a/src/Background/index.zh-CN.md
+++ b/src/Background/index.zh-CN.md
@@ -43,3 +43,22 @@ description:
 | lines  | `string` | 线   | -      | -    |
 | dots   | `string` | 点   | -      | -    |
 | cross  | `string` | 十字 | -      | -    |
+
+### Swim Background Props
+
+| 属性名    | 类型                  | 描述     | 默认值 | 必选 |
+| --------- | --------------------- | -------- | ------ | ---- |
+| lanes     | `SwimLaneProps[]`     | 泳道列表 | -      | -    |
+| className | `string`              | 类名     | -      | -    |
+| style     | `React.CSSProperties` | 样式     | -      | -    |
+
+### Swim Lane Props
+
+| 属性名          | 类型                  | 描述       | 默认值 | 必选 |
+| --------------- | --------------------- | ---------- | ------ | ---- |
+| id              | `string]`             | id         | -      | -    |
+| label           | `string`              | 标签       | -      | -    |
+| labelColor      | `string`              | 标签的背景 | -      | -    |
+| backgroundColor | `string`              | 泳道的背景 | -      | -    |
+| width           | `string`              | 宽度       | -      | -    |
+| style           | `React.CSSProperties` | 样式       | -      | -    |
diff --git a/src/index.ts b/src/index.ts
index e969a0f..5d571d0 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -11,6 +11,7 @@ export {
   getStraightPath,
 } from 'reactflow';
 export { default as Background } from './Background';
+export { default as SwimlaneBackground } from './Background/components/SwimBg';
 export { default as BasicGroupNode } from './BasicGroupNode';
 export { default as BasicNode } from './BasicNode';
 export { default as CanvasLoading } from './CanvasLoading';
@@ -44,5 +45,6 @@ export type {
   NodeChange,
   NodeProps,
 } from 'reactflow';
+export type { SwimLaneProps, SwimlaneBackgroundProps } from './Background/components/SwimBg';
 export type { FlowEditorStoreProviderProps } from './FlowStoreProvider';
 export type { ExtraAction } from './NodeField';