shalu-system-designer/apps/er-designer/src/pages/detail/components/ER.tsx

import React, { useEffect } from "react";
import { useModel } from "umi";
import Navigator from "@/pages/er/components/Navigator";
import {
  EnvironmentOutlined,
  FullscreenExitOutlined,
  UnorderedListOutlined,
} from "@ant-design/icons";
export default function ER(props: {
  showNavigator: boolean;
  isFullScreen: boolean;
  onExitFullscreen: () => void;
  onChangeShowNavigator: (show: boolean) => void;
}) {
  const contianerRef = React.useRef<HTMLDivElement>(null);
  const { graph, project, initGraph } = useModel("erModel");

  useEffect(() => {
    initGraph(
      contianerRef.current!,
      contianerRef.current?.clientWidth!,
      contianerRef.current?.clientHeight!
    );
  }, []);
  return (
    <div className="w-full h-full relative">
      <div className="w-full h-full" ref={contianerRef} />
      {props.showNavigator && <Navigator />}
      {props.isFullScreen && (
        <div className="absolute top-32px right-32px z-2">
          <div className="left bg-#fff shadow-md p-x-4px p-y-4px flex items-center gap-8px">
            <div
              className="
            rounded-4px 
            cus-btn 
            w-32px 
            h-32px
            bg-#eee 
            flex-none 
            text-center 
            leading-32px 
            cursor-pointer 
            hover:bg-#ddd"
            >
              <UnorderedListOutlined />
            </div>
            <div
              className="
            rounded-4px 
            cus-btn 
            w-32px 
            h-32px
            bg-#eee 
            flex-none 
            text-center 
            leading-32px 
            cursor-pointer 
            hover:bg-#ddd"
            >
              <EnvironmentOutlined
                onClick={() => {
                  props.onChangeShowNavigator(!props.showNavigator);
                }}
              />
            </div>
            <div
              className="
            rounded-4px 
            cus-btn 
            w-32px 
            h-32px
            bg-#eee 
            flex-none 
            text-center 
            leading-32px 
            cursor-pointer 
            hover:bg-#ddd"
              onClick={() => props.onExitFullscreen()}
            >
              <FullscreenExitOutlined />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}