feat: add xflow docs (#4171)

* feat: add xflow docs

* feat: update xflow docs

* fix: update xflow docs img

* fix: update xflow docs img

sites/x6-sites/.dumirc.ts

@@ -67,6 +67,14 @@ export default defineConfig({
         },
         order: 4,
       },
+      {
+        slug: 'docs/xflow/guide/introduction.md',
+        title: {
+          zh: 'XFlow',
+          en: 'XFlow',
+        },
+        order: 5,
+      },
     ],
     detail: {
       engine: {
@@ -248,6 +256,30 @@ export default defineConfig({
         },
         order: 4,
       },
+      {
+        slug: 'xflow/guide',
+        title: {
+          zh: '开始',
+          en: 'start',
+        },
+        order: 1,
+      },
+      {
+        slug: 'xflow/components',
+        title: {
+          zh: '组件',
+          en: 'component',
+        },
+        order: 2,
+      },
+      {
+        slug: 'xflow/hooks',
+        title: {
+          zh: 'Hook',
+          en: 'Hook',
+        },
+        order: 3,
+      },
     ],
     examples: [
       {

sites/x6-sites/docs/xflow/components/background.md

@@ -0,0 +1,61 @@
+---
+title: Background 背景
+order: 3
+redirect_from:
+  - /zh/docs
+  - /zh/docs/xflow
+  - /zh/docs/xflow/components
+---
+
+画布的背景
+
+## 基础用法
+
+:::info{title="注意"}
+
+ `<Background />` 组件只能在 `<XFlow />` 组件之内方可正常使用
+
+:::
+
+引入  `<Background />` 组件后,  即可设置 `<XFlowGraph />` 的画布背景。
+
+```tsx
+<XFlow>
+  ...
+  <Background color="#F2F7FA" />
+</XFlow>
+```
+
+## 背景颜色
+
+通过 `color` 属性指定画布的背景颜色
+
+<code id="xflow-components-background-color" src="@/src/xflow/components/background/color/index.tsx"></code>
+
+## 背景图片
+
+添加 `image` 属性, 指定一张背景图设置为画布的背景图片
+
+<code id="xflow-components-background-image" src="@/src/xflow/components/background/image/index.tsx"></code>
+
+## 背景水印
+
+将 `repeat` 属性 设置为 `watermark`, 则将背景图片设置为水印效果，可以使用 `angle` 属性控制水印旋转角度
+
+<code id="xflow-components-background-watermark" src="@/src/xflow/components/background/watermark/index.tsx"></code>
+
+## API
+
+### Background
+
+| 参数名 | 描述 | 类型 | 默认值 |
+|--------|------|------|-------|
+| image | 背景图片URL  | string | -  |
+| color | 背景颜色 支持所有 [CSS background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) 属性 | string |  -   |
+| size | 背景图片大小 支持所有 [CSS background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) 属性| string | - |
+| position| 背景图片位置 支持所有 [CSS background-position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) 属性 | string  | `center` |
+| repeat | 背景图片重复方式 支持所有 [CSS background-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) 属性 以及内置属性 `watermark` `flip-x` `flip-y` `flip-xy` | string| `no-repeat` |
+| angle | 水印旋转角度 仅当 `repeat` 属性为 `watermark` 时有效   | number | 20 |
+| opacity | 背景图片透明度 | number | 1 |
+| quality | 背景图片质量 | number | 1 |
+

sites/x6-sites/docs/xflow/components/clipboard.md

@@ -0,0 +1,39 @@
+---
+title: Clipboard 复制粘贴
+order: 5
+redirect_from:
+  - /zh/docs
+  - /zh/docs/xflow
+  - /zh/docs/xflow/components
+---
+
+复制粘贴节点和边
+
+## 基础用法
+
+:::info{title="注意"}
+
+ `<Clipboard />` 组件只能在 `<XFlow />` 组件之内方可正常使用
+
+:::
+
+在 XFlow 组件下引入该组件，即可使画布开启复制粘贴节点和边的能力
+
+配合 [useClipboard](/xflow/hooks/use-clipboard) 可快速实现复制粘贴功能
+
+```tsx
+<XFlow>
+  ...
+  <Clipboard />
+</XFlow>
+```
+
+<code id="xflow-components-clipboard" src="@/src/xflow/components/clipboard/index.tsx"></code>
+
+## API
+
+### Clipboard
+
+| 参数名 | 描述 | 类型 | 默认值 |
+|--------|------|------|-------|
+| useLocalStorage| 开启后被复制的节点/边同时被保存到 `localStorage` 中，浏览器刷新或者关闭后重新打开，复制/粘贴也能正常工作 | boolean | `false` |

sites/x6-sites/docs/xflow/components/control.md

@@ -0,0 +1,46 @@
+---
+title: Control 控制器
+order: 10
+redirect_from:
+  - /zh/docs
+  - /zh/docs/xflow
+  - /zh/docs/xflow/components
+---
+
+画布常用操作控制器
+
+## 基础用法
+
+:::info{title="注意"}
+
+ `<Control />` 组件只能在 `<XFlow />` 组件之内方可正常使用
+
+:::
+
+Control 组件对画布的常用操作提供了快捷方式
+
+```tsx
+<XFlow>
+  ...
+  <Control
+    items={['zoomOut', 'zoomTo', 'zoomIn', 'zoomToFit', 'zoomToOrigin']}
+  />
+</XFlow>
+```
+
+<code id="xflow-components-control" src="@/src/xflow/components/control/index.tsx"></code>
+
+## API
+
+### Control
+
+| 参数名 | 描述 | 类型 | 默认值 |
+| ------ | ---- | ---- | ------ |
+| items | 控制器展示的items | ControlAction[] | - |
+| direction | 控制器展示的类型 | `horizontal` ｜ `vertical` | `horizontal` |
+| placement | 控制器Tooltip展示的方向 | `top` ｜ `right` ｜ `bottom` ｜ `left` | `top` |
+
+ControlAction 的类型
+| 参数名 | 类型 | 默认值 |
+| ------ | ---- | ------ |
+| ControlAction | ("zoomTo" ｜ "zoomToFit" ｜ "zoomIn" ｜"zoomOut" ｜ "zoomToOrigin")[] | - |