shalu-system-designer/apps/designer/src/pages/mindmap/components/RightToolbar/index.tsx

import React from "react";
import { Button, Divider, Tooltip } from "antd";
import {
  ApartmentOutlined,
  FileImageOutlined,
  SmileOutlined,
  StarOutlined,
  SwapOutlined,
  TagOutlined,
} from "@ant-design/icons";
import { useModel } from "umi";
export default function index() {
  const { rightToobarActive, rightToolbarActive, selectedCell } =
    useModel("mindMapModel");

  return (
    <div className="absolute top-8px right-8px bg-white shadow-md rounded-4px flex flex-col p-8px">
      <Tooltip placement="bottom" title="样式">
        <Button
          type="text"
          icon={<SwapOutlined />}
          className={rightToobarActive === "style" ? "active" : ""}
          onClick={() => rightToolbarActive("style")}
        />
      </Tooltip>
      <Tooltip placement="bottom" title="结构">
        <Button
          type="text"
          icon={<ApartmentOutlined />}
          className={rightToobarActive === "structure" ? "active" : ""}
          onClick={() => rightToolbarActive("structure")}
        />
      </Tooltip>
      <Tooltip placement="bottom" title="风格">
        <Button
          type="text"
          icon={<StarOutlined />}
          className={rightToobarActive === "theme" ? "active" : ""}
          onClick={() => rightToolbarActive("theme")}
        />
      </Tooltip>
      <Divider className="my-8px" />
      <Tooltip placement="bottom" title="图标">
        <Button
          type="text"
          disabled={!selectedCell.length}
          icon={<SmileOutlined />}
          className={rightToobarActive === "icon" ? "active" : ""}
          onClick={() => rightToolbarActive("icon")}
        />
      </Tooltip>
      <Tooltip placement="bottom" title="图片">
        <Button
          type="text"
          disabled={!selectedCell.length}
          icon={<FileImageOutlined />}
          className={rightToobarActive === "image" ? "active" : ""}
          onClick={() => rightToolbarActive("image")}
        />
      </Tooltip>
      <Tooltip placement="bottom" title="标签">
        <Button
          type="text"
          disabled={!selectedCell.length}
          icon={<TagOutlined />}
          className={rightToobarActive === "tag" ? "active" : ""}
          onClick={() => rightToolbarActive("tag")}
        />
      </Tooltip>
    </div>
  );
}