feat: integrate AMESim media models and editor UI

frontend/src/ComponentSymbol.tsx

@@ -0,0 +1,235 @@
+import type { ReactNode } from "react";
+
+export type ComponentSymbolSurface = "palette" | "canvas";
+export type ComponentSymbolPresentation = "framed" | "bare";
+
+type ComponentSymbolProps = {
+  symbol: string;
+  surface: ComponentSymbolSurface;
+  className?: string;
+};
+
+type SymbolDefinition = {
+  presentation: ComponentSymbolPresentation;
+  render: () => ReactNode;
+};
+
+type SymbolSvgProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+function SymbolSvg({ children, className }: SymbolSvgProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={["component-symbol-svg", className].filter(Boolean).join(" ")}
+      fill="none"
+      focusable="false"
+      viewBox="0 0 64 48"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {children}
+    </svg>
+  );
+}
+
+function CylinderSymbol() {
+  return (
+    <SymbolSvg>
+      <path d="M3 24h7M54 24h7" stroke="currentColor" strokeWidth="2" />
+      <rect
+        fill="#dbeafe"
+        height="26"
+        rx="11"
+        stroke="currentColor"
+        strokeWidth="2"
+        width="44"
+        x="10"
+        y="11"
+      />
+      <path d="M33 12v24M33 24h21" stroke="currentColor" strokeWidth="2" />
+    </SymbolSvg>
+  );
+}
+
+function TankSymbol() {
+  return (
+    <SymbolSvg>
+      <path d="M32 2v5M32 41v5" stroke="currentColor" strokeWidth="2" />
+      <path
+        d="M16 13c0-4 7.2-7 16-7s16 3 16 7v22c0 4-7.2 7-16 7s-16-3-16-7V13Z"
+        fill="#dcfce7"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path d="M16 13c0 4 7.2 7 16 7s16-3 16-7" stroke="currentColor" strokeWidth="2" />
+    </SymbolSvg>
+  );
+}
+
+function PipeSymbol() {
+  return (
+    <SymbolSvg>
+      <path d="M2 19h60M2 29h60" stroke="currentColor" strokeWidth="2" />
+      <path d="M9 17v14M55 17v14" stroke="currentColor" strokeWidth="2" />
+    </SymbolSvg>
+  );
+}
+
+function OrificeSymbol() {
+  return (
+    <SymbolSvg>
+      <path d="M2 24h18M44 24h18" stroke="currentColor" strokeWidth="2" />
+      <path
+        d="m19 9 13 15-13 15V9ZM45 9 32 24l13 15V9Z"
+        fill="#ffedd5"
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </SymbolSvg>
+  );
+}
+
+function TeeSymbol() {
+  return (
+    <SymbolSvg>
+      <path d="M2 27h60M32 27V3" stroke="currentColor" strokeWidth="8" />
+      <path d="M2 27h60M32 27V3" stroke="#f8fafc" strokeWidth="4" />
+    </SymbolSvg>
+  );
+}
+
+function GenericSymbol() {
+  return (
+    <SymbolSvg>
+      <path d="M2 24h9M53 24h9" stroke="currentColor" strokeWidth="2" />
+      <rect
+        fill="#f8fafc"
+        height="30"
+        rx="3"
+        stroke="currentColor"
+        strokeWidth="2"
+        width="42"
+        x="11"
+        y="9"
+      />
+      <path d="m23 30 18-12M23 18h18v12" stroke="currentColor" strokeWidth="1.5" />
+    </SymbolSvg>
+  );
+}
+
+function SignalSymbol() {
+  return (
+    <SymbolSvg>
+      <path d="M2 24h8M54 24h8" stroke="currentColor" strokeWidth="2" />
+      <circle cx="32" cy="24" fill="#f8fafc" r="22" stroke="currentColor" strokeWidth="2" />
+      <path
+        d="M16 25c4-13 8-13 12 0s8 13 12 0 6-10 8-4"
+        stroke="#2563eb"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </SymbolSvg>
+  );
+}
+
+function JunctionSymbol() {
+  return (
+    <SymbolSvg>
+      <path d="M2 24h60M32 2v44" stroke="currentColor" strokeWidth="2" />
+      <circle cx="32" cy="24" fill="currentColor" r="5" />
+    </SymbolSvg>
+  );
+}
+
+function MediumSymbol({ label }: { label: "Air" | "He" }) {
+  return (
+    <SymbolSvg className="component-symbol-medium-svg">
+      <circle cx="32" cy="24" fill="#ffffff" r="22" stroke="#c026d3" strokeWidth="2" />
+      <text
+        className="component-symbol-medium-label"
+        data-symbol-label={label}
+        dominantBaseline="central"
+        fill="#a21caf"
+        fontFamily="Arial, sans-serif"
+        fontSize={label === "Air" ? 12 : 16}
+        fontWeight="500"
+        textAnchor="middle"
+        x="32"
+        y="24"
+      >
+        {label}
+      </text>
+    </SymbolSvg>
+  );
+}
+
+const symbolRegistry = {
+  cylinder: { presentation: "framed", render: CylinderSymbol },
+  tank: { presentation: "framed", render: TankSymbol },
+  pipe: { presentation: "framed", render: PipeSymbol },
+  orifice: { presentation: "framed", render: OrificeSymbol },
+  tee: { presentation: "framed", render: TeeSymbol },
+  generic: { presentation: "framed", render: GenericSymbol },
+  signal: { presentation: "framed", render: SignalSymbol },
+  junction: { presentation: "framed", render: JunctionSymbol },
+  amesim_ideal_air_medium: {
+    presentation: "bare",
+    render: () => <MediumSymbol label="Air" />,
+  },
+  amesim_helium_medium: {
+    presentation: "bare",
+    render: () => <MediumSymbol label="He" />,
+  },
+} satisfies Record<string, SymbolDefinition>;
+
+type RegisteredComponentSymbol = keyof typeof symbolRegistry;
+
+function isRegisteredComponentSymbol(symbol: string): symbol is RegisteredComponentSymbol {
+  return Object.prototype.hasOwnProperty.call(symbolRegistry, symbol);
+}
+
+export function hasComponentSymbol(symbol: string): boolean {
+  return isRegisteredComponentSymbol(symbol);
+}
+
+export function componentSymbolPresentation(
+  symbol: string,
+): ComponentSymbolPresentation {
+  return isRegisteredComponentSymbol(symbol)
+    ? symbolRegistry[symbol].presentation
+    : "framed";
+}
+
+export function ComponentSymbol({
+  symbol,
+  surface,
+  className,
+}: ComponentSymbolProps) {
+  const resolvedSymbol: RegisteredComponentSymbol = isRegisteredComponentSymbol(symbol)
+    ? symbol
+    : "generic";
+  const definition = symbolRegistry[resolvedSymbol];
+  const rootClassName = [
+    "component-symbol",
+    `component-symbol-${surface}`,
+    `component-symbol-${resolvedSymbol}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <span
+      aria-hidden="true"
+      className={rootClassName}
+      data-component-symbol={resolvedSymbol}
+      data-symbol-presentation={definition.presentation}
+    >
+      {definition.render()}
+    </span>
+  );
+}

frontend/src/ParameterTable.tsx

@@ -0,0 +1,484 @@
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import type {
+  CSSProperties,
+  FocusEvent as ReactFocusEvent,
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  PointerEvent as ReactPointerEvent,
+  ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+
+export type ParameterColumnLayout = {
+  nameWidth: number;
+  unitWidth: number;
+};
+
+export type ParameterTableRow = {
+  id: string;
+  name: string;
+  value: ReactNode;
+  unit?: ReactNode;
+  help?: string;
+  error?: string;
+  readOnly?: boolean;
+  description?: string;
+  defaultValue?: string;
+  range?: string;
+  currentUnit?: string;
+};
+
+type ParameterTableProps = {
+  ariaLabel: string;
+  rows: readonly ParameterTableRow[];
+  columnLayout: ParameterColumnLayout;
+  availableWidth: number;
+  onColumnLayoutChange: (layout: ParameterColumnLayout) => void;
+};
+
+type ColumnName = "name" | "unit";
+
+type ColumnDragState = {
+  column: ColumnName;
+  pointerId: number;
+  startX: number;
+  startLayout: ParameterColumnLayout;
+};
+
+type HelpPreviewState = {
+  rowId: string;
+  left: number;
+  top: number;
+  transform: string;
+};
+
+type HelpPreviewAnchor = {
+  rowId: string;
+  clientX: number;
+  clientY: number;
+};
+
+export const PARAMETER_COLUMN_LAYOUT_KEY =
+  "system-simulation-flow:parameter-column-layout";
+
+export const DEFAULT_PARAMETER_COLUMN_LAYOUT: ParameterColumnLayout = {
+  nameWidth: 112,
+  unitWidth: 72,
+};
+
+const MIN_NAME_WIDTH = 80;
+const MAX_NAME_WIDTH = 220;
+const MIN_VALUE_WIDTH = 96;
+const MIN_UNIT_WIDTH = 48;
+const MAX_UNIT_WIDTH = 112;
+const COLUMN_KEYBOARD_STEP = 8;
+const HELP_PREVIEW_DELAY_MS = 500;
+const HELP_PREVIEW_GAP = 12;
+const HELP_PREVIEW_MARGIN = 8;
+const HELP_PREVIEW_MAX_WIDTH = 300;
+const HELP_PREVIEW_ESTIMATED_HEIGHT = 156;
+
+function boundedWidth(value: number, minimum: number, maximum: number) {
+  return Math.min(maximum, Math.max(minimum, value));
+}
+
+export function loadParameterColumnLayout(): ParameterColumnLayout {
+  try {
+    const parsed = JSON.parse(
+      localStorage.getItem(PARAMETER_COLUMN_LAYOUT_KEY) ?? "null",
+    ) as Partial<ParameterColumnLayout> | null;
+    if (
+      !parsed ||
+      !Number.isFinite(parsed.nameWidth) ||
+      !Number.isFinite(parsed.unitWidth)
+    ) {
+      return { ...DEFAULT_PARAMETER_COLUMN_LAYOUT };
+    }
+    return {
+      nameWidth: boundedWidth(Number(parsed.nameWidth), MIN_NAME_WIDTH, MAX_NAME_WIDTH),
+      unitWidth: boundedWidth(Number(parsed.unitWidth), MIN_UNIT_WIDTH, MAX_UNIT_WIDTH),
+    };
+  } catch {
+    return { ...DEFAULT_PARAMETER_COLUMN_LAYOUT };
+  }
+}
+
+export function saveParameterColumnLayout(layout: ParameterColumnLayout) {
+  try {
+    localStorage.setItem(PARAMETER_COLUMN_LAYOUT_KEY, JSON.stringify(layout));
+  } catch {
+    // Column resizing remains available when browser storage is unavailable.
+  }
+}
+
+function effectiveColumnLayout(
+  preferred: ParameterColumnLayout,
+  availableWidth: number,
+): ParameterColumnLayout {
+  const usableWidth = Number.isFinite(availableWidth)
+    ? Math.max(MIN_NAME_WIDTH + MIN_VALUE_WIDTH + MIN_UNIT_WIDTH, availableWidth)
+    : MIN_NAME_WIDTH + MIN_VALUE_WIDTH + MIN_UNIT_WIDTH;
+  let nameWidth = boundedWidth(preferred.nameWidth, MIN_NAME_WIDTH, MAX_NAME_WIDTH);
+  let unitWidth = boundedWidth(preferred.unitWidth, MIN_UNIT_WIDTH, MAX_UNIT_WIDTH);
+  let overflow = nameWidth + MIN_VALUE_WIDTH + unitWidth - usableWidth;
+  if (overflow > 0) {
+    const unitReduction = Math.min(overflow, unitWidth - MIN_UNIT_WIDTH);
+    unitWidth -= unitReduction;
+    overflow -= unitReduction;
+  }
+  if (overflow > 0) {
+    nameWidth -= Math.min(overflow, nameWidth - MIN_NAME_WIDTH);
+  }
+  return { nameWidth, unitWidth };
+}
+
+function rowHasHelpPreview(row: ParameterTableRow) {
+  return Boolean(
+    row.description ||
+      (typeof row.help === "string" && row.help) ||
+      row.defaultValue ||
+      row.range ||
+      row.currentUnit,
+  );
+}
+
+function helpPreviewPosition(clientX: number, clientY: number) {
+  const placeOnRight =
+    clientX + HELP_PREVIEW_GAP + HELP_PREVIEW_MAX_WIDTH <=
+    window.innerWidth - HELP_PREVIEW_MARGIN;
+  const placeBelow =
+    clientY + HELP_PREVIEW_GAP + HELP_PREVIEW_ESTIMATED_HEIGHT <=
+    window.innerHeight - HELP_PREVIEW_MARGIN;
+  return {
+    left: clientX + (placeOnRight ? HELP_PREVIEW_GAP : -HELP_PREVIEW_GAP),
+    top: clientY + (placeBelow ? HELP_PREVIEW_GAP : -HELP_PREVIEW_GAP),
+    transform: `translate(${placeOnRight ? "0" : "-100%"}, ${
+      placeBelow ? "0" : "-100%"
+    })`,
+  };
+}
+
+export function ParameterTable({
+  ariaLabel,
+  rows,
+  columnLayout,
+  availableWidth,
+  onColumnLayoutChange,
+}: ParameterTableProps) {
+  const effectiveLayout = effectiveColumnLayout(columnLayout, availableWidth);
+  const columnDragRef = useRef<ColumnDragState | null>(null);
+  const helpPreviewTimerRef = useRef<number | null>(null);
+  const helpPreviewAnchorRef = useRef<HelpPreviewAnchor | null>(null);
+  const [activeColumnResize, setActiveColumnResize] =
+    useState<ColumnName | null>(null);
+  const [helpPreview, setHelpPreview] = useState<HelpPreviewState | null>(null);
+
+  const dismissHelpPreview = useCallback(() => {
+    if (helpPreviewTimerRef.current !== null) {
+      window.clearTimeout(helpPreviewTimerRef.current);
+      helpPreviewTimerRef.current = null;
+    }
+    helpPreviewAnchorRef.current = null;
+    setHelpPreview(null);
+  }, []);
+
+  const scheduleHelpPreview = useCallback(
+    (
+      target: HTMLElement,
+      row: ParameterTableRow,
+      pointer?: { clientX: number; clientY: number },
+    ) => {
+      dismissHelpPreview();
+      if (!rowHasHelpPreview(row)) {
+        return;
+      }
+      const bounds = target.getBoundingClientRect();
+      const fallbackAnchor = {
+        clientX: bounds.left + bounds.width / 2,
+        clientY: bounds.top + bounds.height / 2,
+      };
+      helpPreviewAnchorRef.current = {
+        rowId: row.id,
+        ...(pointer ?? fallbackAnchor),
+      };
+      helpPreviewTimerRef.current = window.setTimeout(() => {
+        helpPreviewTimerRef.current = null;
+        const anchor =
+          helpPreviewAnchorRef.current?.rowId === row.id
+            ? helpPreviewAnchorRef.current
+            : { rowId: row.id, ...fallbackAnchor };
+        setHelpPreview({
+          rowId: row.id,
+          ...helpPreviewPosition(anchor.clientX, anchor.clientY),
+        });
+      }, HELP_PREVIEW_DELAY_MS);
+    },
+    [dismissHelpPreview],
+  );
+
+  const trackHelpPointer = (
+    event: ReactMouseEvent<HTMLTableRowElement>,
+    row: ParameterTableRow,
+  ) => {
+    helpPreviewAnchorRef.current = {
+      rowId: row.id,
+      clientX: event.clientX,
+      clientY: event.clientY,
+    };
+  };
+
+  useEffect(() => {
+    const dismissOnViewportChange = () => dismissHelpPreview();
+    window.addEventListener("scroll", dismissOnViewportChange, true);
+    window.addEventListener("resize", dismissOnViewportChange);
+    return () => {
+      window.removeEventListener("scroll", dismissOnViewportChange, true);
+      window.removeEventListener("resize", dismissOnViewportChange);
+      if (helpPreviewTimerRef.current !== null) {
+        window.clearTimeout(helpPreviewTimerRef.current);
+        helpPreviewTimerRef.current = null;
+      }
+    };
+  }, [dismissHelpPreview]);
+
+  const changeColumnLayout = (
+    column: ColumnName,
+    boundaryDelta: number,
+    startLayout = effectiveLayout,
+  ) => {
+    const proposed =
+      column === "name"
+        ? { ...startLayout, nameWidth: startLayout.nameWidth + boundaryDelta }
+        : { ...startLayout, unitWidth: startLayout.unitWidth - boundaryDelta };
+    onColumnLayoutChange(effectiveColumnLayout(proposed, availableWidth));
+  };
+
+  const startColumnResize = (
+    event: ReactPointerEvent<HTMLDivElement>,
+    column: ColumnName,
+  ) => {
+    dismissHelpPreview();
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    columnDragRef.current = {
+      column,
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startLayout: effectiveLayout,
+    };
+    setActiveColumnResize(column);
+  };
+
+  const moveColumnResize = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const drag = columnDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) {
+      return;
+    }
+    changeColumnLayout(drag.column, event.clientX - drag.startX, drag.startLayout);
+  };
+
+  const stopColumnResize = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (columnDragRef.current?.pointerId !== event.pointerId) {
+      return;
+    }
+    columnDragRef.current = null;
+    setActiveColumnResize(null);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+
+  const resizeColumnWithKeyboard = (
+    event: ReactKeyboardEvent<HTMLDivElement>,
+    column: ColumnName,
+  ) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+      return;
+    }
+    event.preventDefault();
+    dismissHelpPreview();
+    const step = event.shiftKey ? COLUMN_KEYBOARD_STEP * 3 : COLUMN_KEYBOARD_STEP;
+    changeColumnLayout(column, event.key === "ArrowRight" ? step : -step);
+  };
+
+  const nameColumnMaximum = Math.max(
+    MIN_NAME_WIDTH,
+    Math.min(MAX_NAME_WIDTH, availableWidth - MIN_VALUE_WIDTH - effectiveLayout.unitWidth),
+  );
+  const unitColumnMaximum = Math.max(
+    MIN_UNIT_WIDTH,
+    Math.min(MAX_UNIT_WIDTH, availableWidth - MIN_VALUE_WIDTH - effectiveLayout.nameWidth),
+  );
+  const tableStyle = {
+    "--parameter-name-width": `${effectiveLayout.nameWidth}px`,
+    "--parameter-unit-width": `${effectiveLayout.unitWidth}px`,
+  } as CSSProperties;
+  const previewRow = helpPreview
+    ? rows.find((row) => row.id === helpPreview.rowId) ?? null
+    : null;
+  const previewDescription = previewRow?.description ||
+    (typeof previewRow?.help === "string" ? previewRow.help : "");
+
+  const renderColumnResizer = (column: ColumnName) => {
+    const currentWidth =
+      column === "name" ? effectiveLayout.nameWidth : effectiveLayout.unitWidth;
+    const minimum = column === "name" ? MIN_NAME_WIDTH : MIN_UNIT_WIDTH;
+    const maximum = column === "name" ? nameColumnMaximum : unitColumnMaximum;
+    const label = column === "name" ? "调整参数名列宽" : "调整单位列宽";
+    return (
+      <div
+        aria-label={label}
+        aria-orientation="vertical"
+        aria-valuemax={Math.round(maximum)}
+        aria-valuemin={minimum}
+        aria-valuenow={Math.round(currentWidth)}
+        aria-valuetext={`${column === "name" ? "参数名" : "单位"}列 ${Math.round(currentWidth)} 像素`}
+        className="parameter-table-column-resizer"
+        data-column={column}
+        onDoubleClick={() => {
+          dismissHelpPreview();
+          onColumnLayoutChange({ ...DEFAULT_PARAMETER_COLUMN_LAYOUT });
+        }}
+        onKeyDown={(event) => resizeColumnWithKeyboard(event, column)}
+        onLostPointerCapture={stopColumnResize}
+        onPointerCancel={stopColumnResize}
+        onPointerDown={(event) => startColumnResize(event, column)}
+        onPointerMove={moveColumnResize}
+        onPointerUp={stopColumnResize}
+        role="separator"
+        tabIndex={0}
+      />
+    );
+  };
+
+  const rowBlurred = (event: ReactFocusEvent<HTMLTableRowElement>) => {
+    if (!event.currentTarget.contains(event.relatedTarget as globalThis.Node | null)) {
+      dismissHelpPreview();
+    }
+  };
+
+  return (
+    <div
+      className={`parameter-table-wrap ${activeColumnResize ? `resizing-${activeColumnResize}` : ""}`}
+      data-resizing-column={activeColumnResize ?? undefined}
+    >
+      <table aria-label={ariaLabel} className="parameter-table" style={tableStyle}>
+        <colgroup>
+          <col style={{ width: effectiveLayout.nameWidth }} />
+          <col />
+          <col style={{ width: effectiveLayout.unitWidth }} />
+        </colgroup>
+        <thead className="parameter-table-head">
+          <tr className="parameter-table-row parameter-table-head-row">
+            <th className="parameter-table-cell parameter-table-name-cell" scope="col">
+              参数
+              {renderColumnResizer("name")}
+            </th>
+            <th className="parameter-table-cell parameter-table-value-cell" scope="col">
+              值
+              {renderColumnResizer("unit")}
+            </th>
+            <th className="parameter-table-cell parameter-table-unit-cell" scope="col">
+              单位
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => {
+            const hasPreview = rowHasHelpPreview(row);
+            const hasUnit = row.unit !== undefined && row.unit !== null;
+            return (
+              <Fragment key={row.id}>
+                <tr
+                  aria-describedby={
+                    helpPreview?.rowId === row.id
+                      ? "parameter-help-preview"
+                      : undefined
+                  }
+                  className={`parameter-table-row ${row.error ? "invalid" : ""} ${hasUnit ? "" : "unitless"} ${row.readOnly ? "read-only" : ""}`}
+                  onBlurCapture={rowBlurred}
+                  onFocusCapture={(event) =>
+                    scheduleHelpPreview(event.currentTarget, row)
+                  }
+                  onMouseEnter={(event) =>
+                    scheduleHelpPreview(event.currentTarget, row, {
+                      clientX: event.clientX,
+                      clientY: event.clientY,
+                    })
+                  }
+                  onMouseLeave={dismissHelpPreview}
+                  onMouseMove={(event) => trackHelpPointer(event, row)}
+                  tabIndex={row.readOnly && hasPreview ? 0 : undefined}
+                >
+                  <th
+                    className="parameter-table-cell parameter-table-name-cell"
+                    scope="row"
+                  >
+                    {row.name}
+                  </th>
+                  <td className="parameter-table-cell parameter-table-value-cell">
+                    {row.value}
+                  </td>
+                  <td className="parameter-table-cell parameter-table-unit-cell">
+                    {hasUnit ? row.unit : <span aria-label="无单位">—</span>}
+                  </td>
+                </tr>
+                {row.error ? (
+                  <tr className="parameter-table-message-row">
+                    <td className="parameter-table-cell" colSpan={3}>
+                      <small className="field-error">{row.error}</small>
+                    </td>
+                  </tr>
+                ) : null}
+              </Fragment>
+            );
+          })}
+        </tbody>
+      </table>
+      {helpPreview && previewRow && typeof document !== "undefined"
+        ? createPortal(
+            <div
+              className="parameter-help-preview"
+              id="parameter-help-preview"
+              role="tooltip"
+              style={{
+                left: helpPreview.left,
+                position: "fixed",
+                top: helpPreview.top,
+                transform: helpPreview.transform,
+              }}
+            >
+              <strong className="parameter-help-preview-title">
+                {previewRow.name}
+              </strong>
+              {previewDescription ? (
+                <span className="parameter-help-preview-description">
+                  {previewDescription}
+                </span>
+              ) : null}
+              {previewRow.defaultValue ||
+              previewRow.range ||
+              previewRow.currentUnit ? (
+                <span className="parameter-help-preview-meta">
+                  {previewRow.defaultValue ? (
+                    <span>默认值：{previewRow.defaultValue}</span>
+                  ) : null}
+                  {previewRow.range ? <span>范围：{previewRow.range}</span> : null}
+                  {previewRow.currentUnit ? (
+                    <span>当前单位：{previewRow.currentUnit}</span>
+                  ) : null}
+                </span>
+              ) : null}
+            </div>,
+            document.body,
+          )
+        : null}
+    </div>
+  );
+}

frontend/src/styles.css

@@ -387,11 +387,385 @@ textarea {
   padding: 12px;
 }
 
+.parameter-table-wrap {
+  width: 100%;
+  min-width: 0;
+  padding: 0 12px 12px;
+  overflow-x: hidden;
+}
+
+.parameter-table-wrap.parameter-form {
+  display: block;
+  padding: 0 12px 12px;
+}
+
+.parameter-table {
+  --parameter-name-width: 116px;
+  --parameter-unit-width: 72px;
+  width: 100%;
+  min-width: 0;
+  border: 1px solid #cbd5df;
+  border-spacing: 0;
+  border-radius: 4px;
+  color: #263442;
+  background: #ffffff;
+  table-layout: fixed;
+  font-size: 11px;
+}
+
+.parameter-table-head .parameter-table-cell {
+  position: relative;
+  z-index: 1;
+  height: 30px;
+  padding: 0 7px;
+  overflow: visible;
+  border-bottom-color: #bfcbd7;
+  color: #475569;
+  background: #edf1f5;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 30px;
+}
+
+.parameter-table-head .parameter-table-name-cell {
+  z-index: 3;
+}
+
+.parameter-table-head .parameter-table-value-cell {
+  z-index: 2;
+}
+
+.parameter-table-row {
+  height: 36px;
+}
+
+.parameter-table-cell {
+  min-width: 0;
+  height: 36px;
+  padding: 2px 6px;
+  overflow: hidden;
+  border-right: 1px solid #d9e0e7;
+  border-bottom: 1px solid #d9e0e7;
+  vertical-align: middle;
+}
+
+.parameter-table-cell:last-child {
+  border-right: 0;
+}
+
+.parameter-table > tbody > .parameter-table-row:hover > .parameter-table-cell {
+  background: #f8fbfe;
+}
+
+.parameter-table-row:focus-visible {
+  outline: 2px solid rgba(29, 111, 184, 0.5);
+  outline-offset: -2px;
+}
+
+.parameter-name-cell,
+.parameter-table-name-cell {
+  overflow: hidden;
+  color: #344256;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.parameter-value-cell,
+.parameter-table-value-cell,
+.parameter-unit-cell,
+.parameter-table-unit-cell {
+  min-width: 0;
+  padding: 2px;
+}
+
+.parameter-unit-cell,
+.parameter-table-unit-cell {
+  color: #526172;
+  text-align: center;
+}
+
+.parameter-table-cell input,
+.parameter-table-cell select {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  height: 30px;
+  margin: 0;
+  padding: 0 6px;
+  border: 1px solid #d5dde6;
+  border-radius: 2px;
+  outline: 0;
+  color: #1f2933;
+  background: #ffffff;
+  font-size: 11px;
+}
+
+.parameter-table-cell select {
+  padding-right: 4px;
+}
+
+.parameter-table-cell input:hover:not(:disabled),
+.parameter-table-cell select:hover:not(:disabled) {
+  border-color: #aebdcb;
+}
+
+.parameter-table-cell input:focus,
+.parameter-table-cell select:focus {
+  border-color: #1d6fb8;
+  outline: 0;
+  box-shadow: inset 0 0 0 1px #1d6fb8;
+}
+
+.parameter-table-cell input:focus-visible,
+.parameter-table-cell select:focus-visible {
+  outline: 2px solid rgba(29, 111, 184, 0.28);
+  outline-offset: -2px;
+}
+
+.parameter-table-row.read-only .parameter-value-cell,
+.parameter-table-row.read-only .parameter-table-value-cell,
+.parameter-table-cell input:read-only {
+  background: #f4f6f8;
+}
+
+.parameter-read-only-value,
+.parameter-table-read-only-value {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 30px;
+  padding: 0 7px;
+  overflow: hidden;
+  border: 1px solid #d5dde6;
+  border-radius: 2px;
+  color: #526172;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: #f4f6f8;
+  font-variant-numeric: tabular-nums;
+}
+
+.parameter-table-row.unitless .parameter-unit-cell,
+.parameter-table-row.unitless .parameter-table-unit-cell {
+  color: #8a96a4;
+}
+
+.parameter-table-row.unitless .parameter-unit-cell:empty::before,
+.parameter-table-row.unitless .parameter-table-unit-cell:empty::before {
+  content: "—";
+}
+
+.parameter-table-row.invalid > .parameter-table-cell {
+  background: #fff8f7;
+}
+
+.parameter-table-row.invalid input,
+.parameter-table-row.invalid select,
+.parameter-table-cell input[aria-invalid="true"],
+.parameter-table-cell select[aria-invalid="true"] {
+  border-color: #c63b32;
+  box-shadow: inset 0 0 0 1px rgba(198, 59, 50, 0.18);
+}
+
+.parameter-table-message-row {
+  height: auto;
+}
+
+.parameter-table-message-row > .parameter-table-cell {
+  height: auto;
+  min-height: 24px;
+  padding: 4px 7px 5px;
+  overflow: visible;
+  white-space: normal;
+}
+
+.parameter-table-message-row .field-error,
+.parameter-table-message-row .field-hint {
+  display: block;
+  margin: 0;
+  overflow-wrap: anywhere;
+  line-height: 1.35;
+}
+
+.parameter-table-row.invalid + .parameter-table-message-row > .parameter-table-cell {
+  color: #b42318;
+  background: #fff8f7;
+}
+
+.parameter-table > tbody > tr:last-child > .parameter-table-cell {
+  border-bottom: 0;
+}
+
+.parameter-column-resizer,
+.parameter-table-column-resizer {
+  position: absolute;
+  z-index: 4;
+  top: 0;
+  right: -5px;
+  bottom: 0;
+  width: 9px;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+
+.parameter-column-resizer::after,
+.parameter-table-column-resizer::after {
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 4px;
+  width: 1px;
+  background: #aebac7;
+  content: "";
+}
+
+.parameter-column-resizer:hover::after,
+.parameter-column-resizer:focus-visible::after,
+.parameter-column-resizer:active::after,
+.parameter-table-column-resizer:hover::after,
+.parameter-table-column-resizer:focus-visible::after,
+.parameter-table-column-resizer:active::after {
+  width: 2px;
+  background: #1d6fb8;
+}
+
+.parameter-column-resizer:focus-visible,
+.parameter-table-column-resizer:focus-visible {
+  outline: 2px solid rgba(29, 111, 184, 0.42);
+  outline-offset: -2px;
+}
+
+.parameter-table-wrap[data-resizing-column],
+.parameter-table-wrap[data-resizing-column] * {
+  cursor: col-resize;
+  user-select: none;
+}
+
+.parameter-table-wrap[data-resizing-column="name"]
+  .parameter-column-resizer[data-column="name"]::after,
+.parameter-table-wrap[data-resizing-column="unit"]
+  .parameter-column-resizer[data-column="unit"]::after,
+.parameter-table-wrap.resizing-name
+  .parameter-column-resizer[data-column="name"]::after,
+.parameter-table-wrap.resizing-unit
+  .parameter-column-resizer[data-column="unit"]::after,
+.parameter-table-wrap[data-resizing-column="name"]
+  .parameter-table-column-resizer[data-column="name"]::after,
+.parameter-table-wrap[data-resizing-column="unit"]
+  .parameter-table-column-resizer[data-column="unit"]::after,
+.parameter-table-wrap.resizing-name
+  .parameter-table-column-resizer[data-column="name"]::after,
+.parameter-table-wrap.resizing-unit
+  .parameter-table-column-resizer[data-column="unit"]::after {
+  width: 2px;
+  background: #1d6fb8;
+}
+
+.parameter-table .field,
+.parameter-table .parameter-control {
+  display: contents;
+}
+
+.parameter-help-preview {
+  position: fixed;
+  z-index: 10020;
+  width: max-content;
+  max-width: min(300px, calc(100vw - 16px));
+  box-sizing: border-box;
+  padding: 10px 12px;
+  border: 1px solid #c7d1dc;
+  border-radius: 5px;
+  color: #263442;
+  background: #ffffff;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.2);
+  pointer-events: none;
+}
+
+.parameter-help-preview .title,
+.parameter-help-preview-title {
+  display: block;
+  overflow-wrap: anywhere;
+  color: #17212b;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.parameter-help-preview .description,
+.parameter-help-preview-description {
+  display: block;
+  margin-top: 6px;
+  overflow-wrap: anywhere;
+  color: #475569;
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.parameter-help-preview .meta,
+.parameter-help-preview-meta {
+  display: grid;
+  gap: 2px;
+  margin-top: 7px;
+  padding-top: 6px;
+  overflow-wrap: anywhere;
+  border-top: 1px solid #e2e8f0;
+  color: #64748b;
+  font-size: 10px;
+  line-height: 1.4;
+}
+
 .palette-panel-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
+  flex-wrap: wrap;
+}
+
+.palette-display-mode {
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 1px;
+  padding: 1px;
+  border: 1px solid #cad5e1;
+  border-radius: 5px;
+  background: #f4f7fa;
+}
+
+.palette-display-mode-button {
+  display: grid;
+  width: 23px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  place-items: center;
+  color: #64748b;
+  background: transparent;
+  cursor: pointer;
+}
+
+.palette-display-mode-button:hover {
+  color: #155a94;
+  background: #e6f0f8;
+}
+
+.palette-display-mode-button:focus-visible {
+  outline: 2px solid #1d6fb8;
+  outline-offset: 1px;
+}
+
+.palette-display-mode-button[aria-pressed="true"] {
+  color: #155a94;
+  background: #ffffff;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
 }
 
 .catalog-source {
@@ -455,11 +829,57 @@ textarea {
   font-weight: 700;
 }
 
+.palette-collapse-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+  padding: 2px 0;
+  border: 0;
+  border-radius: 3px;
+  color: inherit;
+  text-align: left;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+}
+
+.palette-collapse-toggle:hover {
+  color: #155a94;
+}
+
+.palette-collapse-toggle:focus-visible {
+  outline: 2px solid #1d6fb8;
+  outline-offset: 2px;
+}
+
+.palette-collapse-chevron {
+  flex: 0 0 auto;
+  transform: rotate(0deg);
+  transition: transform 120ms ease;
+}
+
+.palette-collapse-toggle[aria-expanded="false"] .palette-collapse-chevron {
+  transform: rotate(-90deg);
+}
+
+.palette-library-toggle {
+  flex: 1 1 auto;
+  width: auto;
+}
+
 .palette-category-items {
   display: grid;
   gap: 8px;
 }
 
+.palette[data-view-mode="icons"] .palette-category-items {
+  grid-template-columns: repeat(auto-fill, 76px);
+  gap: 6px;
+  justify-content: start;
+}
+
 .compact-form {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -481,6 +901,37 @@ textarea {
   text-align: left;
   background: #ffffff;
   cursor: grab;
+  transition: border-color 120ms ease, box-shadow 120ms ease,
+    background 120ms ease, transform 80ms ease;
+}
+
+.palette-item:hover {
+  border-color: #85add0;
+  background: #f5faff;
+  box-shadow: 0 2px 6px rgba(21, 90, 148, 0.1);
+}
+
+.palette-item:focus-visible {
+  border-color: #1d6fb8;
+  outline: 2px solid rgba(29, 111, 184, 0.32);
+  outline-offset: 1px;
+}
+
+.palette-item:active {
+  cursor: grabbing;
+  transform: translateY(1px);
+}
+
+.palette-item-copy {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.palette-item-copy strong {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .palette-item small {
@@ -494,11 +945,116 @@ textarea {
 }
 
 .palette-icon {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+}
+
+.component-symbol {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+  pointer-events: none;
+}
+
+.component-symbol-svg {
   display: block;
-  width: 32px;
-  height: 32px;
-  border: 2px solid #4b5563;
-  background: #f8fafc;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.component-symbol-medium-label {
+  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
+  font-weight: 600;
+}
+
+.palette[data-view-mode="icons"] .palette-list {
+  padding: 10px;
+}
+
+.palette[data-view-mode="icons"] .palette-item {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: 48px 16px;
+  gap: 4px;
+  width: 76px;
+  height: 82px;
+  min-height: 82px;
+  box-sizing: border-box;
+  padding: 6px 5px;
+  place-items: center;
+  text-align: center;
+}
+
+.palette[data-view-mode="icons"] .palette-item-copy {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  line-height: 16px;
+  text-align: center;
+}
+
+.palette[data-view-mode="icons"] .palette-item-copy strong {
+  width: 100%;
+  overflow: hidden;
+  font-size: 10px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.palette[data-view-mode="icons"] .palette-item-copy small {
+  display: none;
+}
+
+.palette[data-view-mode="icons"] .palette-icon {
+  flex: 0 0 48px;
+  width: 48px;
+  height: 48px;
+}
+
+.palette-icon-preview {
+  position: fixed;
+  z-index: 10000;
+  display: grid;
+  grid-template-rows: 56px auto;
+  min-width: 104px;
+  max-width: 220px;
+  box-sizing: border-box;
+  padding: 9px 11px 10px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  place-items: center;
+  color: #1f2937;
+  background: #ffffff;
+  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.2);
+  pointer-events: none;
+}
+
+.palette-icon-preview-symbol {
+  display: grid;
+  flex: 0 0 56px;
+  width: 56px;
+  height: 56px;
+  place-items: center;
+}
+
+.palette-icon-preview-symbol > .component-symbol {
+  width: 100%;
+  height: 100%;
+}
+
+.palette-icon-preview-label {
+  max-width: 198px;
+  margin-top: 5px;
+  overflow-wrap: anywhere;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.35;
+  text-align: center;
 }
 
 .component-drag-preview {
@@ -521,38 +1077,8 @@ textarea {
 }
 
 .component-drag-preview .palette-icon {
-  width: 28px;
-  height: 28px;
-  border-width: 1.5px;
-}
-
-.component-drag-preview .icon-pipe {
-  width: 34px;
-  height: 10px;
-}
-
-.component-drag-preview .icon-orifice {
-  width: 22px;
-  height: 22px;
-}
-
-.component-drag-preview .icon-tee {
   width: 30px;
-  height: 28px;
-}
-
-.component-drag-preview .icon-tee::before {
-  top: 10px;
-  width: 30px;
-  height: 8px;
-  border-width: 1.5px;
-}
-
-.component-drag-preview .icon-tee::after {
-  left: 10px;
-  width: 8px;
-  height: 28px;
-  border-width: 1.5px;
+  height: 30px;
 }
 
 .component-drag-preview-label {
@@ -565,82 +1091,6 @@ textarea {
   white-space: nowrap;
 }
 
-.icon-cylinder {
-  border-radius: 13px;
-  background: #dbeafe;
-}
-
-.icon-tank {
-  border-radius: 50%;
-  background: #dcfce7;
-}
-
-.icon-pipe {
-  height: 14px;
-  border-radius: 8px;
-  background: #f8fafc;
-}
-
-.icon-orifice {
-  transform: rotate(45deg);
-  background: #ffedd5;
-}
-
-.icon-tee {
-  position: relative;
-  border: 0;
-}
-
-.icon-generic {
-  position: relative;
-  border-radius: 4px;
-  background: #ffffff;
-}
-
-.icon-generic::before,
-.icon-generic::after {
-  position: absolute;
-  top: 50%;
-  width: 6px;
-  height: 6px;
-  box-sizing: border-box;
-  border: 1.5px solid #4b5563;
-  border-radius: 50%;
-  background: #ffffff;
-  content: "";
-  transform: translateY(-50%);
-}
-
-.icon-generic::before {
-  left: -4px;
-}
-
-.icon-generic::after {
-  right: -4px;
-}
-
-.icon-tee::before,
-.icon-tee::after {
-  position: absolute;
-  content: "";
-  border-radius: 6px;
-  background: #e5e7eb;
-  border: 2px solid #4b5563;
-}
-
-.icon-tee::before {
-  top: 12px;
-  left: 0;
-  width: 32px;
-  height: 10px;
-}
-
-.icon-tee::after {
-  top: 0;
-  left: 11px;
-  width: 10px;
-  height: 32px;
-}
 
 .flow-canvas {
   position: relative;
@@ -756,6 +1206,38 @@ textarea {
   transform-origin: center;
 }
 
+.node-symbol > .component-symbol {
+  width: 100%;
+  height: 100%;
+}
+
+.sim-node.symbol-presentation-bare .sim-node-frame,
+.sim-node.symbol-presentation-bare.selected .sim-node-frame {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+.sim-node.symbol-presentation-bare .node-label {
+  background: transparent;
+}
+
+.sim-node.symbol-presentation-bare.selected .component-symbol-svg {
+  filter: drop-shadow(0 0 3px rgba(29, 111, 184, 0.62));
+}
+
+.react-flow__node.validation-error
+  .sim-node.symbol-presentation-bare
+  .component-symbol-svg {
+  filter: drop-shadow(0 0 3px rgba(198, 59, 50, 0.68));
+}
+
+.react-flow__node.validation-warning
+  .sim-node.symbol-presentation-bare
+  .component-symbol-svg {
+  filter: drop-shadow(0 0 3px rgba(192, 138, 22, 0.68));
+}
+
 .node-label {
   position: absolute;
   z-index: 2;
@@ -790,72 +1272,6 @@ textarea {
   -webkit-line-clamp: 2;
 }
 
-.symbol-cylinder,
-.symbol-tank,
-.symbol-pipe,
-.symbol-orifice,
-.symbol-tee {
-  box-sizing: border-box;
-  width: 42px;
-  height: 22px;
-  border: 2px solid #4b5563;
-  background: #f8fafc;
-}
-
-.symbol-cylinder {
-  height: 28px;
-  border-radius: 12px;
-  background: #dbeafe;
-}
-
-.symbol-tank {
-  height: 28px;
-  border-radius: 50%;
-  background: #dcfce7;
-}
-
-.symbol-pipe {
-  height: 12px;
-  border-radius: 8px;
-}
-
-.symbol-orifice {
-  width: 26px;
-  height: 26px;
-  transform: rotate(45deg);
-  background: #ffedd5;
-}
-
-.symbol-tee {
-  position: relative;
-  height: 32px;
-  border: 0;
-}
-
-.symbol-tee::before,
-.symbol-tee::after {
-  position: absolute;
-  box-sizing: border-box;
-  content: "";
-  border: 2px solid #4b5563;
-  border-radius: 6px;
-  background: #f8fafc;
-}
-
-.symbol-tee::before {
-  top: 10px;
-  left: 0;
-  width: 42px;
-  height: 12px;
-}
-
-.symbol-tee::after {
-  top: 0;
-  left: 15px;
-  width: 12px;
-  height: 32px;
-}
-
 .port-handle {
   z-index: 3;
   width: 10px;
@@ -941,6 +1357,13 @@ textarea {
   font-weight: 500;
 }
 
+.field-hint {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
 .node-id {
   padding-bottom: 8px;
   border-bottom: 1px solid #e3e8ef;