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

import React, { useEffect, useState } from "react";
import { Tooltip, Dropdown, DropDownProps } from "antd";
import { CheckOutlined, DownOutlined } from "@ant-design/icons";
import { useModel } from "umi";
import TodoDrawer from "./TodoDrawer";
import AICreator from "./AICreator";
import { useFullscreen, useLocalStorageState } from "ahooks";

export default function Toolbar() {
  const {
    addTable,
    addTopicArea,
    addRemark,
    graph,
    canRedo,
    canUndo,
    onRedo,
    onUndo,
    project,
    setProject,
    onSave,
  } = useModel("erModel");
  const todoRef = React.useRef<{ open: () => void }>();
  const [isFullscreen, { toggleFullscreen }] = useFullscreen(document.body);
  const scaleMenu = {
    style: {
      width: 200,
    },
    items: [
      {
        key: "1",
        label: "25%",
        onClick: () => {
          handleZoom(25);
        },
      },
      {
        key: "2",
        label: "50%",
        onClick: () => {
          handleZoom(50);
        },
      },
      {
        key: "3",
        label: "75%",
        onClick: () => {
          handleZoom(75);
        },
      },
      {
        key: "4",
        label: "100%",
        onClick: () => {
          handleZoom(100);
        },
      },
      {
        key: "5",
        label: "150%",
        onClick: () => {
          handleZoom(150);
        },
      },
      {
        key: "6",
        label: "200%",
        onClick: () => {
          handleZoom(200);
        },
      },
    ],
  };

  // 隐藏默认字段
  const [hideDefaultColumn, setHideDefaultColumn] = useLocalStorageState(
    "er-hideDefaultColumn",
    {
      defaultValue: false,
      listenStorageChange: true
    }
  );

  const layoutMenu: DropDownProps["menu"] = {
    style: {
      width: 120,
    },
    items: [
      {
        key: "1",
        label: (
          <span className="flex items-center">
            <span className="inlineblock w-25px">
              {project.setting.showMenu ? (
                <CheckOutlined className="text-12px" />
              ) : (
                ""
              )}
            </span>
            <span>菜单栏</span>
          </span>
        ),
        onClick: () => {
          setProject({
            ...project,
            setting: {
              ...project.setting,
              showMenu: !project.setting.showMenu,
            },
          });
        },
      },
      {
        key: "2",
        label: (
          <span className="flex items-center">
            <span className="inlineblock w-25px">
              {project.setting.showSidebar ? (
                <CheckOutlined className="text-12px" />
              ) : (
                ""
              )}
            </span>
            <span>侧边栏</span>
          </span>
        ),
        onClick: () => {
          setProject({
            ...project,
            setting: {
              ...project.setting,
              showSidebar: !project.setting.showSidebar,
            },
          });
        },
      },
      {
        key: "3",
        type: "divider",
      },
      {
        key: "4",
        label: (
          <span className="flex items-center">
            <span className="inlineblock w-25px">
              {isFullscreen && <CheckOutlined className="text-12px" />}
            </span>
            <span>全屏</span>
          </span>
        ),
        onClick: () => {
          toggleFullscreen();
        },
      },
    ],
  };

  const [scale, setScale] = useState(100);

  useEffect(() => {
    graph?.on("scale", (scaleInfo) => {
      setScale(parseInt(scaleInfo.sx * 100 + ""));
    });
  }, [graph]);

  const handleZoom = (value: number) => {
    if (value > 200) {
      graph?.zoomTo(2);
      return;
    }
    if (value < 20) {
      graph?.zoomTo(0.2);
      return;
    }
    graph?.zoomTo(value / 100);
  };

  const handleChangeShowMenu = () => {
    setProject({
      ...project,
      setting: { ...project.setting, showMenu: !project.setting.showMenu },
    });
  };

  return (
    <div className="flex justify-between bg-#fafafa">
      <div>
        <TodoDrawer ref={todoRef} />
      </div>
      <div className="flex items-center py-0px justify-center h-32px">
        <div className="group">
          <div className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200">
            <Dropdown menu={layoutMenu} placement="bottomLeft">
              <span className="text-14px leading-18px">
                <i className="iconfont icon-layout-5-line text-20px text-#666" />
                <DownOutlined className="text-10px ml-4px" />
              </span>
            </Dropdown>
          </div>
        </div>
        <div className="group">
          <div className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200">
            <Tooltip
              title={`${hideDefaultColumn ? "隐藏" : "显示"}默认字段`}
            >
              <i
                className={`iconfont text-20px leading-24px ${!hideDefaultColumn ? "icon-view" : "icon-hide"}`}
                onClick={() => {
                  setHideDefaultColumn(!hideDefaultColumn);
                }}
              />
            </Tooltip>
          </div>
        </div>
        <div className="group">
          <div className="flex items-center">
            <Tooltip title="撤销上一步操作">
              <div
                className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200"
                style={{
                  opacity: canUndo ? 1 : 0.5,
                }}
                onClick={() => canUndo && onUndo()}
              >
                <svg className="icon h-24px w-24px" aria-hidden="true">
                  <use xlinkHref="#icon-undo"></use>
                </svg>
              </div>
            </Tooltip>
            <Tooltip title="恢复上一步操作">
              <div
                className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200"
                style={{
                  opacity: canRedo ? 1 : 0.5,
                }}
                onClick={() => canRedo && onRedo()}
              >
                <svg className="icon h-24px w-24px" aria-hidden="true">
                  <use xlinkHref="#icon-redo"></use>
                </svg>
              </div>
            </Tooltip>
          </div>
        </div>

        <div className="h-30px border-transparent border-r-1px border-solid border-r-#eee m-x-8px"></div>

        <div className="group">
          <div className="flex items-center">
            <Tooltip title="创建表">
              <div
                className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200"
                onClick={() => addTable()}
              >
                <svg className="icon h-24px w-24px" aria-hidden="true">
                  <use xlinkHref="#icon-biaoge"></use>
                </svg>
              </div>
            </Tooltip>
            <Tooltip title="创建主题域">
              <div
                className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200"
                onClick={addTopicArea}
              >
                <svg className="icon h-24px w-24px" aria-hidden="true">
                  <use xlinkHref="#icon-ditukuangxuan"></use>
                </svg>
              </div>
            </Tooltip>
            <Tooltip title="创建备注">
              <div
                className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200"
                onClick={addRemark}
              >
                <svg className="icon h-24px w-24px" aria-hidden="true">
                  <use xlinkHref="#icon-beizhu"></use>
                </svg>
              </div>
            </Tooltip>
          </div>
        </div>

        <div className="h-30px border-transparent border-r-1px border-solid border-r-#eee m-x-8px"></div>

        <div className="group">
          <div className="flex items-center">
            <Tooltip title="保存模型">
              <div
                className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200"
                onClick={onSave}
              >
                <svg
                  className="icon h-24px w-24px color-#666"
                  aria-hidden="true"
                >
                  <use xlinkHref="#icon-baocun"></use>
                </svg>
              </div>
            </Tooltip>
            <Tooltip title="待办项">
              <div
                className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200"
                onClick={() => todoRef.current?.open()}
              >
                <svg
                  className="icon h-24px w-24px color-#666"
                  aria-hidden="true"
                >
                  <use xlinkHref="#icon-daiban"></use>
                </svg>
              </div>
            </Tooltip>
          </div>
        </div>

        <div className="h-30px border-transparent border-r-1px border-solid border-r-#eee m-x-8px"></div>

        <div className="group">
          <div className="flex items-center">
            <Tooltip title="AI助手">
              <AICreator
                trigger={
                  <div className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200">
                    <svg
                      className="icon h-24px w-24px color-#666"
                      aria-hidden="true"
                    >
                      <use xlinkHref="#icon-AI1"></use>
                    </svg>
                  </div>
                }
              />
            </Tooltip>
          </div>
        </div>

        <div className="h-30px border-transparent border-r-1px border-solid border-r-#eee m-x-8px"></div>

        <div className="group">
          <div className="flex items-center">
            <Tooltip title="放大">
              <div
                className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200"
                style={{ opacity: scale >= 200 ? 0.5 : 1 }}
                onClick={() => handleZoom(scale + 25)}
              >
                <svg className="icon h-24px w-24px" aria-hidden="true">
                  <use xlinkHref="#icon-suofangda"></use>
                </svg>
              </div>
            </Tooltip>
            <Tooltip title="缩小">
              <div
                className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200"
                style={{ opacity: scale <= 20 ? 0.5 : 1 }}
                onClick={() => handleZoom(scale - 25)}
              >
                <svg className="icon h-24px w-24px" aria-hidden="true">
                  <use xlinkHref="#icon-suofangxiao"></use>
                </svg>
              </div>
            </Tooltip>
            <Dropdown menu={scaleMenu}>
              <span className="text-14px leading-18px w-120px">
                <span>{scale}%</span>
                <DownOutlined className="text-10px ml-4px" />
              </span>
            </Dropdown>
          </div>
        </div>
      </div>
      <div>
        <div
          className="btn py-4px px-10px hover:bg-gray-200 opacity-50 flex items-center justify-center cursor-pointer"
          onClick={handleChangeShowMenu}
        >
          <i
            className="iconfont icon-open leading-24px inline-block"
            style={{
              transition: "all 0.3s",
              transform: project.setting.showMenu
                ? "rotate(180deg)"
                : "rotate(0deg)",
            }}
          ></i>
        </div>
      </div>
    </div>
  );
}