docs: auto-generate component list (#2749)

* docs: update graph api docs

* feat: auto-generate component list

site/.dumirc.ts

@@ -43,7 +43,7 @@ export default defineConfig({
         },
       },
       {
-        slug: 'docs/options/plots/overview',
+        slug: 'docs/options',
         title: {
           zh: '选项',
           en: 'Option',

site/docs/options/demos/components-list.tsx

@@ -0,0 +1,56 @@
+/**
+ * inline: true
+ */
+import { Card, Col, Flex, Row, Tag } from 'antd';
+import React, { Suspense, useMemo } from 'react';
+import { useLocale, useFullSidebarData, useNavigate } from 'dumi';
+
+enum ChartType {
+  PLOT = 'Plot',
+  GRAPH = 'Graph',
+}
+
+const locales = {
+  en: {
+    [ChartType.PLOT]: 'Statistics',
+    [ChartType.GRAPH]: 'Relations'
+  },
+  zh: {
+    [ChartType.PLOT]: '统计图',
+    [ChartType.GRAPH]: '关系图'
+  },
+};
+
+const URLS = ['/options/plots/special', '/options/graphs'];
+
+export default () => {
+  const lang = useLocale().id;
+  const locale = locales[lang];
+  const data = useFullSidebarData();
+  const navigate = useNavigate();
+
+  const metas = useMemo(() => URLS.flatMap(url => data[lang === 'zh' ? url : `/en${url}`][0].children)
+    .filter(meta => meta.frontmatter.category === 'Components').map(meta => ({
+      ...meta,
+      ...meta.frontmatter,
+      color: meta.frontmatter.type === ChartType.GRAPH ? "purple" : "volcano"
+    })).sort((a, b) => a.title.localeCompare(b.title)), [data, lang]);
+
+  return <Suspense fallback={null}>
+    <Row gutter={[16, 16]}>
+      {metas.map((meta, index) => <Col span={6} key={index}>
+        <Card
+          size="small"
+          onClick={() => navigate(meta.link)}
+          hoverable
+          title={meta.title}
+          extra={<Tag bordered={false} style={{ borderRadius: 2 }} color={meta.color}>{locale[meta.type]}</Tag>}
+          style={{ borderRadius: 4 }}
+        >
+          <Flex justify="center" align="center">
+            <img alt={meta.title} src={meta.cover} height={148} />
+          </Flex>
+        </Card></Col>)}
+    </Row>
+  </Suspense >
+};

site/docs/options/graphs/demos/mind-map/custom-node.tsx

@@ -48,7 +48,7 @@ export default () => {
       },
     },
     edge: {
-      style: { stroke: '#873bf4' },
+      style: { stroke: '#873bf4', endArrow: true },
     },
     animation: false,
   };

site/docs/options/graphs/demos/mind-map/default.tsx

@@ -1,3 +1,9 @@
+/**
+ * title: 基本用法
+ * description:
+ *  zh: 简单的展示1。
+ *  en: 简单的展示。
+ */
 import { MindMap, type MindMapOptions } from '@ant-design/graphs';
 import React from 'react';
 
@@ -26,6 +32,7 @@ export default () => {
     containerStyle: { height: '200px' },
     autoFit: 'view',
     data,
+    edge: { style: { endArrow: true } },
     animation: false,
   };
   return <MindMap {...options} />;

site/docs/options/graphs/demos/mind-map/direction.tsx

@@ -29,6 +29,7 @@ export default () => {
     containerStyle: { height: '200px' },
     direction,
     autoFit: 'view',
+    edge: { style: { endArrow: true } },
     data,
     animation: false,
   };

site/docs/options/graphs/dendrogram.en.md

@@ -1,5 +1,8 @@
 ---
+category: Components
+type: Graph
 title: Dendrogram
+cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mvnUTaA91H0AAAAAAAAAAAAADmJ7AQ/original
 order: 3
 ---
 
@@ -13,7 +16,7 @@ import { Dendrogram } from '@ant-design/graphs';
 
 It is suitable for displaying hierarchical data relationships, clarifying key points of an issue, and outlining logical steps to achieve a goal.
 
-## Code Examples
+## Examples
 
 <code id="demo-dendrogram-default" src="./demos/dendrogram/default.tsx" description="A simple demonstration.">Basic Usage</code>
 
@@ -25,7 +28,7 @@ It is suitable for displaying hierarchical data relationships, clarifying key po
 
 ## API
 
-For general configuration, refer to: [Common Graph Properties](./overview#common-graph-properties)
+Common props ref: [Common Graph Properties](./overview#common-graph-properties)
 
 ### Dendrogram
 

site/docs/options/graphs/dendrogram.zh.md

@@ -1,5 +1,8 @@
 ---
-title: 生态树图
+category: Components
+type: Graph
+title: Dendrogram 生态树图
+cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mvnUTaA91H0AAAAAAAAAAAAADmJ7AQ/original
 order: 3
 ---
 

site/docs/options/graphs/flow-direction-graph.en.md

@@ -1,5 +1,8 @@
 ---
-title: Flow Direction Graph
+category: Components
+type: Graph
+title: FlowDirectionGraph
+cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jOEPRKWxPE0AAAAAAAAAAAAADmJ7AQ/original
 order: 6
 ---
 
@@ -13,13 +16,13 @@ import { FlowDirectionGraph } from '@ant-design/graphs';
 
 Ideal for complex information that requires clear logical relationships or decision support. It visually and clearly shows data flow and relationships, improving understanding and decision-making efficiency.
 
-## Code Examples
+## Examples
 
 <code id="demo-flow-direction-graph-default" src="./demos/flow-direction-graph/default.tsx" description="A simple demonstration.<br> Adjust `edge.style.lineWidth` via the interaction `map-edge-line-width`. It includes the following properties:<br> - `value` (number or function to compute the value of the edge)<br> - `minValue` and `maxValue` (optional, minimum and maximum values, can be numbers or functions)<br> - `minLineWidth` and `maxLineWidth` (optional, minimum and maximum line widths, can be numbers or functions)<br> - `scale` (optional, interpolation function to map values to line widths, supports `'linear'`, `'log'`, `'pow'`, `'sqrt'`, and custom interpolation functions)">Basic Usage</code>
 
 ## API
 
-For general configuration, refer to: [Common Graph Properties](./overview#common-graph-properties)
+Common props ref: [Common Graph Properties](./overview#common-graph-properties)
 
 | Property  | Description | Type | Default Value |
 | ---       | ---         | ---  | ---           |

site/docs/options/graphs/flow-direction-graph.zh.md

@@ -1,5 +1,8 @@
 ---
-title: 流向图
+category: Components
+type: Graph
+title: FlowDirectionGraph 流向图
+cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jOEPRKWxPE0AAAAAAAAAAAAADmJ7AQ/original
 order: 6
 ---
 

site/docs/options/graphs/flow-graph.en.md

@@ -1,5 +1,8 @@
 ---
-title: Flow Graph
+category: Components
+type: Graph
+title: FlowGraph
+cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*n9JgQIGi9BQAAAAAAAAAAAAADmJ7AQ/original
 order: 5
 ---
 
@@ -17,7 +20,7 @@ A flowchart shows the entire process from start to finish. Each node represents
 - Useful for planning and tracking project progress, clarifying task order and dependencies.
 - Ideal for building decision trees, showing different decision points and paths.
 
-## Code Examples
+## Examples
 
 <code id="demo-flow-graph-default" src="./demos/flow-graph/default.tsx" description="A simple demonstration.">Basic Usage</code>
 
@@ -27,11 +30,11 @@ A flowchart shows the entire process from start to finish. Each node represents
 
 ## API
 
-For general configuration, refer to: [Common Graph Properties](./overview#common-graph-properties)
+Common props ref: [Common Graph Properties](./overview#common-graph-properties)
 
-| Property  | Description | Type | Default Value |
-| ---       | ---         | ---  | ---           |
-| layout    | AntV Dagre layout configuration | [`AntVDagreLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` |
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| layout | AntV Dagre layout configuration | [`AntVDagreLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` |
 | behaviors | Set user interaction events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins   | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
+| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
 | transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |

site/docs/options/graphs/flow-graph.zh.md

@@ -1,5 +1,8 @@
 ---
-title: 流程图
+category: Components
+type: Graph
+title: FlowGraph 流程图
+cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*n9JgQIGi9BQAAAAAAAAAAAAADmJ7AQ/original
 order: 5
 ---
 

site/docs/options/graphs/indented-tree.en.md

@@ -1,5 +1,8 @@
 ---
-title: Indented Tree
+category: Components
+type: Graph
+title: IndentedTree
+cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JZZVT5PsWPQAAAAAAAAAAAAADmJ7AQ/original
 order: 2
 ---
 
@@ -16,7 +19,7 @@ import { IndentedTree } from '@ant-design/graphs';
 - **Navigation Menus**: Show hierarchical navigation menus for websites or applications.
 - **Category Hierarchy**: Represent hierarchical relationships in classification systems, such as product categories or article categories.
 
-## Code Examples
+## Examples
 
 <code id="demo-indented-tree-default" src="./demos/indented-tree/default.tsx" description="A simple demonstration.">Basic Usage</code>
 
@@ -34,7 +37,7 @@ Adjust the `collapse-expand-react-node` interaction configuration to control exp
 
 ## API
 
-For general configuration, refer to: [Common Graph Properties](./overview#common-graph-properties)
+Common props ref: [Common Graph Properties](./overview#common-graph-properties)
 
 ### IndentedTree
 

site/docs/options/graphs/indented-tree.zh.md

@@ -1,5 +1,8 @@
 ---
-title: 缩进树图
+category: Components
+type: Graph
+title: IndentedTree 缩进树图
+cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JZZVT5PsWPQAAAAAAAAAAAAADmJ7AQ/original
 order: 2
 ---
 

site/docs/options/graphs/mind-map.en.md

@@ -1,5 +1,8 @@
 ---
-title: Mind Map
+category: Components
+type: Graph
+title: MindMap
+cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cce0Sa7DR3cAAAAAAAAAAAAADmJ7AQ/original
 order: 1
 ---
 
@@ -13,7 +16,7 @@ import { MindMap } from '@ant-design/graphs';
 
 When information is complex or requires clear logical relationships, organize it into a series of nodes and branches to simplify understanding.
 
-## Code Examples
+## Examples
 
 <code id="demo-mind-map-default" src="./demos/mind-map/default.tsx" description="A simple demonstration.">Basic Usage</code>
 
@@ -31,7 +34,7 @@ Adjust the `collapse-expand-react-node` interaction configuration to control exp
 
 ## API
 
-For general configuration, refer to: [Common Graph Properties](./overview#common-graph-properties)
+Common props ref: [Common Graph Properties](./overview#common-graph-properties)
 
 ### MindMap
 

site/docs/options/graphs/mind-map.zh.md

@@ -1,5 +1,8 @@
 ---
-title: 思维导图
+category: Components
+type: Graph
+title: MindMap 思维导图
+cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cce0Sa7DR3cAAAAAAAAAAAAADmJ7AQ/original
 order: 1
 ---
 
@@ -15,7 +18,7 @@ import { MindMap } from '@ant-design/graphs';
 
 ## 代码演示
 
-<code id="demo-mind-map-default" src="./demos/mind-map/default.tsx" description="简单的展示。">基本用法</code>
+<code id="demo-mind-map-default" src="./demos/mind-map/default.tsx">基本用法</code>
 
 <code id="demo-mind-map-type" src="./demos/mind-map/type.tsx" description="通过 `type` 语法糖，使用预设的风格：线条风格和方框风格。">风格</code>
 

site/docs/options/graphs/network-graph.en.md

@@ -1,5 +1,8 @@
 ---
-title: Network Graph
+category: Components
+type: Graph
+title: NetworkGraph
+cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*q9AkRIF8fF4AAAAAAAAAAAAADmJ7AQ/original
 order: 7
 ---
 
@@ -13,7 +16,7 @@ import { NetworkGraph } from '@ant-design/graphs';
 
 Use when you need to visualize nodes and their relationships in a complex network structure, revealing connection patterns and data flow intuitively.
 
-## Code Examples
+## Examples
 
 <code id="demo-network-graph-default" src="./demos/network-graph/default.tsx" description="A simple demonstration.">Basic Usage</code>
 
@@ -23,7 +26,7 @@ Use when you need to visualize nodes and their relationships in a complex networ
 
 ## API
 
-For general configuration, refer to: [Common Graph Properties](./overview#common-graph-properties)
+Common props ref: [Common Graph Properties](./overview#common-graph-properties)
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |

site/docs/options/graphs/network-graph.zh.md

@@ -1,5 +1,8 @@
 ---
-title: 网络图
+category: Components
+type: Graph
+title: NetworkGraph 网络图
+cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*q9AkRIF8fF4AAAAAAAAAAAAADmJ7AQ/original
 order: 7
 ---