fix: 修改首页展示

apps/designer/src/pages/home/All.tsx

@@ -15,6 +15,7 @@ import {
   message,
   TreeDataNode,
   Tag,
+  Tooltip,
 } from "antd";
 import type { MenuProps } from "antd";
 import { Icon, useRequest } from "umi";
@@ -56,7 +57,7 @@ export default function All({
   const [dataSource, setDataSource] = useState<any[]>([]);
   const [total, setTotal] = useState(0);
   const [searchName, setSearchName] = useState("");
-  const [graphType, setGraphType] = useState<GraphType | ''>('');
+  const [graphType, setGraphType] = useState<GraphType | "">("");
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(12);
   const [open, setOpen] = useState(false);
@@ -136,7 +137,7 @@ export default function All({
     useState<BreadcrumbItem[]>(defultData);
   const breadcrumbDataRef = useRef<BreadcrumbItem[]>(breadcrumbData);
 
-  const getData = (page: number, pageSize: number, type?: GraphType | '') => {
+  const getData = (page: number, pageSize: number, type?: GraphType | "") => {
     setCurrentPage(page);
     setPageSize(pageSize);
     run({
@@ -294,7 +295,7 @@ export default function All({
   };
 
   // 搜索图形类型
-  const setSearchGraphType = (type: GraphType | '') => {
+  const setSearchGraphType = (type: GraphType | "") => {
     setGraphType(type);
     getData(1, pageSize, type);
   };
@@ -327,7 +328,7 @@ export default function All({
       refresh();
       setOpen(false);
     });
-    if(moveSource.current?.type === 'folder') {
+    if (moveSource.current?.type === "folder") {
       refreshFolderAll();
     }
   };
@@ -343,61 +344,64 @@ export default function All({
   return (
     <>
       <PageContainer
-        extra={[
-          <span key="1">
-            {graphType ? (
-              <Tag
-                color="#108ee9"
-                closable
-                onClose={() => setSearchGraphType('')}
-              >
-                { graphOptions.find(item => item.value === graphType)?.label}
-              </Tag>
-            ) : (
-              <Dropdown
-                key="1"
-                menu={{
-                  items: graphOptions.map((item) => {
-                    return {
-                      key: item.key,
-                      label: item.label,
-                      value: item.value,
-                      onClick: () => {
-                        setSearchGraphType(item.value);
-                      },
-                    };
-                  }),
-                }}
-              >
-                <Button
-                  key="1"
-                  icon={<i className="iconfont icon-shaixuan" />}
-                />
-              </Dropdown>
-            )}
-          </span>,
-          <Button
-            key="2"
-            onClick={() => {
-              setDisplay(display === "card" ? "list" : "card");
-            }}
-            icon={display === "card" ? <MenuOutlined /> : <AppstoreOutlined />}
-          />,
-        ]}
-        title={
-          <Input
-            placeholder="搜索文件"
-            prefix={<i className="iconfont icon-chazhao" />}
-            value={searchName}
-            onChange={(e) => {
-              setSearchName(e.target.value);
-            }}
-            onPressEnter={handleSearch}
-          />
-        }
+        pageHeaderRender={() => <div className="mt-12px"></div>}
+        title={false}
         footer={[]}
       >
-        <Breadcrumb items={breadcrumbData} />
+        <div className="flex justify-between items-center">
+          <Breadcrumb items={breadcrumbData} />
+          <div className="right flex gap-12px">
+            <Input
+              placeholder="搜索文件"
+              prefix={<i className="iconfont icon-chazhao" />}
+              value={searchName}
+              onChange={(e) => {
+                setSearchName(e.target.value);
+              }}
+              onPressEnter={handleSearch}
+            />
+            <span>
+              {graphType ? (
+                <Tag
+                  color="#108ee9"
+                  closable
+                  onClose={() => setSearchGraphType("")}
+                >
+                  {graphOptions.find((item) => item.value === graphType)?.label}
+                </Tag>
+              ) : (
+                <Dropdown
+                  menu={{
+                    items: graphOptions.map((item) => {
+                      return {
+                        key: item.key,
+                        label: item.label,
+                        value: item.value,
+                        onClick: () => {
+                          setSearchGraphType(item.value);
+                        },
+                      };
+                    }),
+                  }}
+                >
+                  <Button icon={<i className="iconfont icon-shaixuan" />} />
+                </Dropdown>
+              )}
+            </span>
+            <span>
+              <Tooltip title={display === "card" ? "列表模式" : "卡片模式"}>
+                <Button
+                  onClick={() => {
+                    setDisplay(display === "card" ? "list" : "card");
+                  }}
+                  icon={
+                    display === "card" ? <MenuOutlined /> : <AppstoreOutlined />
+                  }
+                />
+              </Tooltip>
+            </span>
+          </div>
+        </div>
         <Dropdown
           menu={{
             items: contextMenu,
@@ -409,7 +413,6 @@ export default function All({
               <>
                 {folderData.length ? (
                   <>
-                    <div className="text-12px color-#999 my-8px">文件夹</div>
                     <div className="flex gap-12px flex-wrap">
                       {folderData.map((item, index) => {
                         return (
@@ -431,7 +434,7 @@ export default function All({
                               <Card
                                 hoverable
                                 bordered
-                                className="w-240px"
+                                className="w-240px mb-12px"
                                 onClick={() => handleOpenFolder(item)}
                                 key={index}
                               >
@@ -475,7 +478,7 @@ export default function All({
                                                       name,
                                                     });
                                                     refresh();
-                                                    refreshFolderAll
+                                                    refreshFolderAll;
                                                     message.success(
                                                       "重命名成功"
                                                     );
@@ -534,7 +537,6 @@ export default function All({
                     </div>
                   </>
                 ) : null}
-                <div className="text-12px color-#999 my-8px">文件</div>
                 <Row gutter={[8, 16]}>
                   {dataSource.map((item, index) => {
                     return (

apps/designer/src/pages/home/Recently.tsx

@@ -1,17 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { ProTable, PageContainer } from "@ant-design/pro-components";
-import {
-  Col,
-  Row,
-  Button,
-  Input,
-  Breadcrumb,
-  Empty,
-  Pagination,
-  Dropdown,
-  Modal,
-  Tree,
-} from "antd";
+import { Col, Row, Button, Breadcrumb, Empty, Modal, Tree } from "antd";
 import { useRequest } from "umi";
 import { AppstoreOutlined, MenuOutlined } from "@ant-design/icons";
 import { RecentFile } from "@/api/systemDesigner";
@@ -19,13 +8,7 @@ import ProjectCard from "./ProjectCard";
 import { graphOptions } from "./data";
 import { GraphType } from "@/enum";
 
-export default function Recently(
-  {
-    updateKey,
-  }: {
-    updateKey: number;
-  }
-) {
+export default function Recently({ updateKey }: { updateKey: number }) {
   const [display, setDisplay] = useState("card");
   const [dataSource, setDataSource] = useState<any[]>([]);
   const [total, setTotal] = useState(0);
@@ -35,7 +18,7 @@ export default function Recently(
 
   const { loading, run, refresh } = useRequest(RecentFile, {
     onSuccess: (res) => {
-      const list = res?.result || []
+      const list = res?.result || [];
       setDataSource(list);
       setTotal(list.length);
     },
@@ -82,29 +65,25 @@ export default function Recently(
 
   return (
     <>
-      <PageContainer
-        extra={[
+      <PageContainer extra={false} title={false} footer={[]}>
+        <div className="flex justify-between items-center mb-12px">
+          <Breadcrumb
+            items={[
+              {
+                title: "最近",
+              },
+            ]}
+          ></Breadcrumb>
           <Button
             key="2"
             onClick={() => {
               setDisplay(display === "card" ? "list" : "card");
             }}
             icon={display === "card" ? <MenuOutlined /> : <AppstoreOutlined />}
-          />,
-        ]}
-        title={''}
-        footer={[]}
-      >
-        <Breadcrumb
-          items={[
-            {
-              title: "最近",
-            },
-          ]}
-        ></Breadcrumb>
+          />
+        </div>
         {display === "card" ? (
           <>
-            <div className="text-12px color-#999 my-8px">文件</div>
             <Row gutter={[8, 16]}>
               {dataSource.map((item, index) => {
                 return (

apps/designer/src/pages/home/index.tsx

@@ -13,7 +13,6 @@ import {
   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";
@@ -204,7 +203,7 @@ export default () => {
     >
       <ProLayout
         headerTitleRender={() => null}
-        logo={logo}
+        logo={false}
         title={"系统设计"}
         collapsedButtonRender={() => <></>}
         location={{ pathname }}

apps/designer/src/pages/mindmap/components/HeaderToolbar/index.tsx

@@ -65,7 +65,7 @@ export default function index() {
     const graphInfo = {
       ...(mindProjectInfo || {}),
       ...mindProjectInfo?.pageSetting,
-      graphId: sessionStorage.getItem("projectId"),
+      id: sessionStorage.getItem("projectId"),
       type: GraphType.mindmap
     }
     delete graphInfo.pageSetting;

apps/er-designer/src/layouts/index.less

@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}