使用Fluent UI在React JS中创建带按钮的流程图求助

Fluent UI确实没有原生的流程图组件，你可以通过以下两种方案实现需求：

方案一：用Fluent UI基础组件自定义搭建 #

利用Fluent UI的Card、Button、Stack等基础组件构建节点，再通过自定义CSS绘制连接线，完全贴合Fluent UI的设计风格。

示例代码 #

import { Card, CardContent, Button, Stack, makeStyles } from '@fluentui/react-components';

const useStyles = makeStyles({
  flowContainer: {
    position: 'relative',
    padding: '2rem',
  },
  nodeRow: {
    display: 'flex',
    gap: '4rem',
    justifyContent: 'center',
    marginBottom: '3rem',
  },
  node: {
    minWidth: '180px',
    textAlign: 'center',
  },
  connector: {
    position: 'absolute',
    height: '2px',
    backgroundColor: '#605E5C',
    top: '40%',
    left: 'calc(25% + 90px)',
    right: 'calc(25% + 90px)',
  },
});

export default function CustomFlowChart() {
  const styles = useStyles();

  return (
    <div className={styles.flowContainer}>
      <div className={styles.nodeRow}>
        <Card className={styles.node}>
          <CardContent>
            <Stack spacing="medium" align="center">
              <div>发起申请</div>
              <Button appearance="primary">操作</Button>
            </Stack>
          </CardContent>
        </Card>
      </div>
      <div className={styles.connector}></div>
      <div className={styles.nodeRow}>
        <Card className={styles.node}>
          <CardContent>
            <Stack spacing="medium" align="center">
              <div>审核中</div>
              <Button appearance="secondary">查看</Button>
            </Stack>
          </CardContent>
        </Card>
        <Card className={styles.node}>
          <CardContent>
            <Stack spacing="medium" align="center">
              <div>已驳回</div>
              <Button appearance="primary">重新提交</Button>
            </Stack>
          </CardContent>
        </Card>
      </div>
      {/* 可根据需求继续添加节点和连接线 */}
    </div>
  );
}

这种方案优势是完全基于Fluent UI生态，样式统一度高，适合流程结构相对简单的场景。

方案二：集成第三方流程图库并适配Fluent UI样式 #

如果你的流程结构复杂（比如需要拖拽、动态节点），可以使用成熟的流程图库如react-flow，然后自定义节点样式，替换为Fluent UI的组件，保证视觉一致性。

步骤示例 #

1. 安装依赖：

npm install reactflow @fluentui/react-components

2. 自定义Fluent UI风格的节点：

import { Button, Card, CardContent } from '@fluentui/react-components';
import { Handle, Position } from 'reactflow';

export const FluentFlowNode = ({ data }) => {
  return (
    <Card>
      <Handle type="target" position={Position.Top} />
      <CardContent>
        <div style={{ marginBottom: '1rem' }}>{data.label}</div>
        <Button appearance={data.buttonAppearance || 'primary'}>{data.buttonText}</Button>
      </CardContent>
      <Handle type="source" position={Position.Bottom} />
    </Card>
  );
};

3. 构建流程图：

import { ReactFlowProvider, useNodesState, useEdgesState, addEdge } from 'reactflow';
import { FluentFlowNode } from './FluentFlowNode';

const nodeTypes = {
  fluentNode: FluentFlowNode,
};

export default function FlowChartWithReactFlow() {
  const [nodes, setNodes, onNodesChange] = useNodesState([
    {
      id: '1',
      type: 'fluentNode',
      position: { x: 250, y: 0 },
      data: { label: '发起申请', buttonText: '操作' },
    },
    {
      id: '2',
      type: 'fluentNode',
      position: { x: 100, y: 150 },
      data: { label: '审核中', buttonText: '查看', buttonAppearance: 'secondary' },
    },
    {
      id: '3',
      type: 'fluentNode',
      position: { x: 400, y: 150 },
      data: { label: '已驳回', buttonText: '重新提交' },
    },
  ]);

  const [edges, setEdges, onEdgesChange] = useEdgesState([
    { id: 'e1-2', source: '1', target: '2' },
    { id: 'e1-3', source: '1', target: '3' },
  ]);

  const onConnect = (params) => setEdges((eds) => addEdge(params, eds));

  return (
    <ReactFlowProvider>
      <div style={{ height: '500px', width: '100%' }}>
        <ReactFlow
          nodes={nodes}
          edges={edges}
          onNodesChange={onNodesChange}
          onEdgesChange={onEdgesChange}
          onConnect={onConnect}
          nodeTypes={nodeTypes}
        />
      </div>
    </ReactFlowProvider>
  );
}

这种方案适合复杂交互的流程图场景，react-flow提供了拖拽、缩放、节点编辑等丰富功能，同时通过自定义节点可以完美适配Fluent UI的样式。

目标流程图样式：

内容的提问来源于stack exchange，提问作者Sharique Khan