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

import {
  MenuOutlined,
  AppstoreOutlined,
  PlusOutlined,
} from "@ant-design/icons";
import {
  PageContainer,
  ProCard,
  ProConfigProvider,
  ProTable
} from "@ant-design/pro-components";
import { css } from "@emotion/css";
import {
  Space,
  Input,
  Button,
  Row,
  Col,
  Card,
  ConfigProvider,
  Divider,
  Popover,
} from "antd";
import React, { useState } from "react";
import { history } from "umi";
import logo from "@/assets/logo.png";
import { Icon } from "umi";
import { createNew } from "@/utils";

const MenuCard = () => {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
      }}
    >
      <Divider
        style={{
          height: "1.5em",
        }}
        type="vertical"
      />
    </div>
  );
};

const basicGraph = [
  {
    id: "1",
    title: "流程图",
    subtitle: "图形化表单方式",
    color: "#dfecff",
    icon: <Icon icon="local:flow" />,
    onClick: () => createNew("flow"),
  },
  {
    id: "2",
    title: "思维导图",
    subtitle: "结构化表单方式",
    color: "#dff4ea",
    icon: <Icon icon="local:mind" />,
    path: "/mindmap",
    onClick: () => createNew("flow"),
  },
];

const appList = [
  {
    id: "1",
    title: "UML",
    icon: <Icon icon="local:uml" />,
    onClick: () => createNew("uml"),
  },
  {
    id: "2",
    title: "E-R图",
    icon: <Icon icon="local:er" />,
    onClick: () => createNew("er"),
  },
  {
    id: "3",
    title: "泳道图",
    icon: <Icon icon="local:swimlane" />,
    onClick: () => createNew("swimlane"),
  },
  {
    id: "4",
    title: "BPMN",
    icon: <Icon icon="local:bpmn" />,
    onClick: () => createNew("bpmn"),
  },
  {
    id: "5",
    title: "韦恩图",
    icon: <Icon icon="local:we" />,
    onClick: () => createNew("we"),
  },
  {
    id: "6",
    title: "网络拓扑图",
    icon: <Icon icon="local:net" />,
    onClick: () => createNew("net"),
  },
];

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>
  );
};

export default () => {
  const [display, setDisplay] = useState<"card" | "list">("card");
  const handleToEdit = () => {
    history.push("/flow");
  };

  return (
    <div
      id="test-pro-layout"
      style={{
        height: "100vh",
        overflow: "auto",
      }}
    >
      <ProConfigProvider hashed={false}>
        <ConfigProvider
          getTargetContainer={() => {
            return document.getElementById("test-pro-layout") || document.body;
          }}
        >
          <PageContainer
            extra={[
              <Popover key="1" placement="left" content={<RenderAppList />}>
                <Button
                  type="primary"
                  onClick={() => {}}
                  icon={<PlusOutlined />}
                >
                  新建
                </Button>
              </Popover>,
              <Button
                key="2"
                onClick={() => {
                  setDisplay(display === "card" ? "list" : "card");
                }}
                icon={
                  display === "card" ? <MenuOutlined /> : <AppstoreOutlined />
                }
              />,
            ]}
            title={
              <span>
                <img className="w-24px h-24px mr-8px" src={logo} />
                系统设计
              </span>
            }
            footer={[]}
            header={undefined}
          >
            {display === "card" ? (
              <ProCard
                style={{
                  height: "calc(100vh - 140px)",
                  minHeight: 800,
                }}
              >
                <Row gutter={[8, 16]}>
                  {new Array(10).fill(0).map((item, index) => {
                    return (
                      <Col
                        xs={8}
                        sm={8}
                        md={6}
                        lg={6}
                        xl={4}
                        xxl={3}
                        key={index}
                      >
                        <Card
                          hoverable
                          bordered
                          cover={
                            <img
                              style={{ height: 200, objectFit: "cover" }}
                              alt="example"
                              src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                            />
                          }
                          onClick={() => handleToEdit()}
                        >
                          <Card.Meta
                            title={<>xx流程图</>}
                            description="更新于：2024.09.06"
                          />
                        </Card>
                      </Col>
                    );
                  })}
                </Row>
              </ProCard>
            ) : <ProTable
              columns={[
                {
                  title: "名称",
                  dataIndex: "name"
                },
                {
                  title: "类型",
                  dataIndex: "type"
                },
                {
                  title: "修改时间",
                  dataIndex: "updateTime",
                  sorter: (a, b) => a.updateTime - b.updateTime,
                },
              ]}
              request={(params, sorter, filter) => {
                // 表单搜索项会从 params 传入，传递给后端接口。
                console.log(params, sorter, filter);
                return Promise.resolve({
                  data: new Array(10).fill({
                    id: 1,
                    name: "xxx流程图",
                    type: '流程图',
                    updateTime: '2024-09-06 14:00:00'
                  }),
                  success: true,
                });
              }}
              rowKey={'id'}
              search={false}
            />}
          </PageContainer>
        </ConfigProvider>
      </ProConfigProvider>
    </div>
  );
};