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

frontend/src/SimulationResultsView.tsx

@@ -20,15 +20,19 @@ import {
   X,
 } from "lucide-react";
 import {
-  Background,
   ConnectionLineType,
   ConnectionMode,
-  Controls,
   ReactFlow,
+  useReactFlow,
   type Edge,
   type Node,
   type NodeTypes,
 } from "@xyflow/react";
+import {
+  CanvasGridBackground,
+  type CanvasGridVisibility,
+} from "./CanvasGridBackground";
+import { hasComponentSymbol } from "./ComponentSymbol";
 import {
   WorkspaceViewTabs,
   type WorkspaceView,
@@ -52,6 +56,7 @@ type ResultNodeData = {
   label: string;
   componentType: string;
   modelType: string;
+  symbol?: string;
   ports: ResultPortDefinition[];
   parameters: Record<string, number | string>;
   parameterUnits?: Record<string, string>;
@@ -170,6 +175,7 @@ type SimulationResultFile = {
 
 type SimulationResultsViewProps = {
   snapshot: SimulationResultsSnapshot;
+  gridVisibility: CanvasGridVisibility;
   nodeTypes: NodeTypes;
   onViewChange: (view: WorkspaceView) => void;
   onSnapshotLoad: (snapshot: SimulationResultsSnapshot) => void;
@@ -335,10 +341,12 @@ const RESULT_UNIT_OPTIONS: Record<string, ResultUnitOption[]> = {
 
 export function SimulationResultsView({
   snapshot,
+  gridVisibility,
   nodeTypes,
   onViewChange,
   onSnapshotLoad,
 }: SimulationResultsViewProps) {
+  const reactFlow = useReactFlow();
   const resultStatus = simulationResultStatus(snapshot.result);
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(
     snapshot.project.nodes[0]?.id ?? null,
@@ -467,7 +475,15 @@ export function SimulationResultsView({
     () =>
       snapshot.project.nodes.map((node) => ({
         ...node,
-        className: "results-readonly-node",
+        className: [
+          "results-readonly-node",
+          hasComponentSymbol(node.data.symbol ?? node.data.componentType) ||
+          hasComponentSymbol(node.data.modelType)
+            ? "component-icon-node"
+            : "",
+        ]
+          .filter(Boolean)
+          .join(" "),
         connectable: false,
         draggable: false,
         focusable: true,
@@ -1134,7 +1150,23 @@ export function SimulationResultsView({
           <section className="results-system-panel">
             <div className="results-section-heading">
               <strong>系统图</strong>
-              <span>{snapshot.project.nodes.length} 个组件</span>
+              <div className="results-system-heading-tools">
+                <span>{snapshot.project.nodes.length} 个组件</span>
+                <button
+                  aria-label="适应系统图窗口"
+                  onClick={() => {
+                    void reactFlow.fitView({
+                      duration: 180,
+                      minZoom: 0.1,
+                      padding: 0.18,
+                    });
+                  }}
+                  title="适应窗口"
+                  type="button"
+                >
+                  <Scaling aria-hidden="true" size={14} strokeWidth={1.8} />
+                </button>
+              </div>
             </div>
             <div className="results-system-canvas">
               <ReactFlow
@@ -1166,10 +1198,7 @@ export function SimulationResultsView({
                   fitOnMount
                   requestKey={snapshot.id}
                 />
-                <Background gap={18} />
-                <Controls
-                  fitViewOptions={{ duration: 180, minZoom: 0.1, padding: 0.18 }}
-                />
+                <CanvasGridBackground visibility={gridVisibility} />
               </ReactFlow>
             </div>
           </section>