52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import FlowCanvas from "@/components/FlowCanvas";
|
||
import type { FlowData } from "@/components/FlowCanvas";
|
||
import MermaidBlock from "@/components/MermaidBlock";
|
||
|
||
/**
|
||
* 流程图页示例：FlowCanvas（可拖拽/缩放的交互流程图）+ MermaidBlock（静态图）。
|
||
*/
|
||
const flowData: FlowData = {
|
||
direction: "TB",
|
||
nodes: [
|
||
{ id: "n1", label: "开始", type: "start" },
|
||
{ id: "n2", label: "数据收集", type: "stage" },
|
||
{ id: "n3", label: "清洗与校验", type: "process" },
|
||
{ id: "n4", label: "质量达标?", type: "decision" },
|
||
{ id: "n5", label: "分析建模", type: "stage" },
|
||
{ id: "n6", label: "报告产出", type: "deliverable" },
|
||
{ id: "n7", label: "异常处理", type: "risk" },
|
||
{ id: "n8", label: "结束", type: "end" },
|
||
],
|
||
edges: [
|
||
{ source: "n1", target: "n2" },
|
||
{ source: "n2", target: "n3" },
|
||
{ source: "n3", target: "n4" },
|
||
{ source: "n4", target: "n5", label: "是" },
|
||
{ source: "n4", target: "n7", label: "否" },
|
||
{ source: "n7", target: "n3", label: "重新处理" },
|
||
{ source: "n5", target: "n6" },
|
||
{ source: "n6", target: "n8" },
|
||
],
|
||
};
|
||
|
||
export default function ProcessPage() {
|
||
return (
|
||
<div className="page">
|
||
<header className="page-header">
|
||
<h1 className="page-title">流程图</h1>
|
||
<p className="page-subtitle">交互式流程图（可拖拽节点、缩放画布）与静态示意图。</p>
|
||
</header>
|
||
|
||
<section className="card" style={{ marginBottom: 20 }}>
|
||
<h2 className="card-title">业务主流程</h2>
|
||
<FlowCanvas data={flowData} height={480} />
|
||
</section>
|
||
|
||
<section className="card">
|
||
<h2 className="card-title">静态示意图（Mermaid）</h2>
|
||
<MermaidBlock source={"flowchart LR\n A[需求输入] --> B{评审}\n B -->|通过| C[排期开发]\n B -->|驳回| A"} />
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|