shalu-system-designer/apps/designer/src/pages/home/index.tsx

import {
  PlusOutlined,
} from "@ant-design/icons";
import {
  ProConfigProvider,
  ProLayout,
} from "@ant-design/pro-components";
import { css } from "@emotion/css";
import {
  Space,
  Button,
  ConfigProvider,
  Popover,
} from "antd";
import React, { useMemo, useRef, useState } from "react";
import logo from "@/assets/logo.png";
import { Icon } from "umi";
import { createNew } from "@/utils";
import All from "./All";
import Recently from "./Recently";
import Collect from "./Collect";
import Template from "./Template";
import { GraphType } from "@/enum";

export default () => {
  const currentFolder = useRef('root');

  const basicGraph = [
    {
      id: "1",
      title: "流程图",
      subtitle: "图形化表单方式",
      color: "#dfecff",
      icon: <Icon icon="local:flow" />,
      onClick: () => createNew(GraphType.flowchart, currentFolder.current),
    },
    {
      id: "2",
      title: "思维导图",
      subtitle: "结构化表单方式",
      color: "#dff4ea",
      icon: <Icon icon="local:mind" />,
      onClick: () => createNew(GraphType.mindmap, currentFolder.current),
    },
  ];
  
  const appList = [
    {
      id: "1",
      title: "UML",
      icon: <Icon icon="local:uml" />,
      onClick: () => createNew(GraphType.uml, currentFolder.current),
    },
    {
      id: "2",
      title: "E-R图",
      icon: <Icon icon="local:er" />,
      onClick: () => createNew(GraphType.er, currentFolder.current),
    },
    {
      id: "3",
      title: "泳道图",
      icon: <Icon icon="local:swimlane" />,
      onClick: () => createNew(GraphType.lane, currentFolder.current),
    },
    {
      id: "4",
      title: "BPMN",
      icon: <Icon icon="local:bpmn" />,
      onClick: () => createNew(GraphType.bpmn, currentFolder.current),
    },
    {
      id: "5",
      title: "韦恩图",
      icon: <Icon icon="local:we" />,
      onClick: () => createNew(GraphType.venn, currentFolder.current),
    },
    {
      id: "6",
      title: "网络拓扑图",
      icon: <Icon icon="local:net" />,
      onClick: () => createNew(GraphType.net, currentFolder.current),
    },
  ];
  
  const handleMenuClick = (item: any) => {
    console.log("click", item);
    item?.onClick?.();
  };
  
  const renderBasicItem = (props: {
    title: string;
    subtitle: string;
    color: string;
    id: string;
    icon: React.ReactNode;
  }) => {
    return (
      <div
        key={props.id}
        className={css`
          width: 136px;
          height: 60px;
          padding: 8px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          cursor: pointer;
          margin-top: 8px;
          background: ${props.color + "70"};
          &:hover {
            background: ${props.color};
          }
        `}
        onClick={() => handleMenuClick(props)}
      >
        <span className="w-32px h-33px">{props.icon}</span>
        <div className="flex flex-col justify-center ml-4px">
          <div className="text-14px">{props.title}</div>
          <div className="text-12px text-#9aa5b8">{props.subtitle}</div>
        </div>
      </div>
    );
  };
  
  const renderProItem = (props: {
    id: string;
    title: string;
    icon: React.ReactNode;
  }) => {
    return (
      <div
        key={props.id}
        className="w-66px h-70px flex flex-col items-center justify-center mt-8px rounded-lg hover:bg-#f3f5f9 cursor-pointer"
        onClick={() => handleMenuClick(props)}
      >
        {props.icon}
        <span className="text-12px">{props.title}</span>
      </div>
    );
  };
  
  const RenderAppList = () => {
    return (
      <div className="w-460px">
        <div className="color-#6c7d8f text-xs">基础图形</div>
        <Space>{basicGraph.map((item) => renderBasicItem(item))}</Space>
        <div className="color-#6c7d8f text-xs mt-8px">专业图形</div>
        <Space>{appList.map((item) => renderProItem(item))}</Space>
      </div>
    );
  };

  const handleChangeFolder = (id: string) => {
    currentFolder.current = id;
  }

  const [pathname, setPathname] = useState("/all");
  const routes = [
    {
      path: "/all",
      name: "全部",
      icon: <i className="iconfont icon-xitong" />,
      component: <All onChangeCurrentFolder={ handleChangeFolder }/>,
    },
    {
      path: "/recently",
      name: "最近项目",
      icon: <i className="iconfont icon-shijian" />,
      component: <Recently />,
    },
    {
      path: "/template",
      name: "我的模版",
      icon: <i className="iconfont icon-yingyong" />,
      component: <Template />,
    },
    {
      path: "/collect",
      name: "模版收藏",
      icon: <i className="iconfont icon-xihuan" />,
      component: <Collect />,
    },
  ];

  const content = useMemo(() => {
    currentFolder.current = "root";
    return routes.find((item) => item.path === pathname)?.component;
  }, [pathname]);

  return (
    <div
      id="test-pro-layout"
      style={{
        height: "100vh",
        overflow: "auto",
      }}
    >
      <ProLayout
        headerTitleRender={() => null}
        logo={logo}
        title={"系统设计"}
        collapsedButtonRender={() => <></>}
        location={{ pathname }}
        route={{
          routes,
        }}
        bgLayoutImgList={[
          {
            src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
            left: 85,
            bottom: 100,
            height: '303px',
          },
          {
            src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
            bottom: -68,
            right: -45,
            height: '303px',
          },
          {
            src: 'https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png',
            bottom: 0,
            left: 0,
            width: '331px',
          },
        ]}
        menuHeaderRender={(logo, title) => {
          return (
            <div className="flex-1">
              <div className="flex items-center h-20px">
                {logo}
                {title}
              </div>
              <div className="mt-32px">
                <Popover key="1" placement="left" content={<RenderAppList />}>
                  <Button
                    type="primary"
                    className="w-full"
                    onClick={() => {}}
                    icon={<PlusOutlined />}
                  >
                    新建
                  </Button>
                </Popover>
              </div>
            </div>
          );
        }}
        menuItemRender={(item, dom) => (
          <div
            onClick={() => {
              setPathname(item.path || "/all");
            }}
          >
            {dom}
          </div>
        )}
      >
        <ProConfigProvider hashed={false}>
          <ConfigProvider
            getTargetContainer={() => {
              return (
                document.getElementById("test-pro-layout") || document.body
              );
            }}
          >
            {content}
          </ConfigProvider>
        </ProConfigProvider>
      </ProLayout>
    </div>
  );
};