优化仿真求解性能并修复流量闭合问题（初版）

frontend/src/CanvasGridBackground.tsx

@@ -0,0 +1,39 @@
+import { Background, BackgroundVariant } from "@xyflow/react";
+
+export const CANVAS_GRID_SIZE = 18;
+
+export type CanvasGridVisibility = {
+  lines: boolean;
+  dots: boolean;
+};
+
+type CanvasGridBackgroundProps = {
+  visibility: CanvasGridVisibility;
+};
+
+export function CanvasGridBackground({
+  visibility,
+}: CanvasGridBackgroundProps) {
+  return (
+    <>
+      {visibility.lines ? (
+        <Background
+          color="#d6e0ea"
+          gap={CANVAS_GRID_SIZE * 5}
+          id="major-grid-lines"
+          lineWidth={1}
+          variant={BackgroundVariant.Lines}
+        />
+      ) : null}
+      {visibility.dots ? (
+        <Background
+          color="#c4d0dd"
+          gap={CANVAS_GRID_SIZE}
+          id="minor-grid-dots"
+          size={1}
+          variant={BackgroundVariant.Dots}
+        />
+      ) : null}
+    </>
+  );
+}