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

import React, { useEffect, useState } from "react";
import { Button, Tooltip, Divider, Dropdown } from "antd";
import { DownOutlined } from "@ant-design/icons";
import { useModel } from "umi";
import TodoDrawer from "./TodoDrawer";
import AICreator from "./AICreator";
export default function Toolbar() {
  const {
    addTable,
    addTopicArea,
    addRemark,
    graph,
    canRedo,
    canUndo,
    onRedo,
    onUndo,
    project,
    setProject,
    onSave,
    onCreateByAi
  } = useModel("erModel");
  const todoRef = React.useRef<{ open: () => void }>();
  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 [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="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>}
                onChange={onCreateByAi}
              />
            </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-12px 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>
  );
}