feat: 添加列表文件夹弹窗

apps/designer/src/app.ts

@@ -13,7 +13,9 @@ export const request: RequestConfig = {
   requestInterceptors: [
     (url, options) => {
       const baseUrl = 'http://ab.dev.jbpm.shalu.com' // https://edesign.shalu.com'
-      const token = localStorage.getItem('token')
+      const enterpriseCode = sessionStorage.getItem('enterpriseCode');
+      const token = localStorage.getItem('token_' + enterpriseCode);
+ 
       if(token) {
         if(!options.headers) {
           options.headers = {}

apps/designer/src/components/FlowExtra.tsx

@@ -6,7 +6,8 @@ import { CorrelationType } from "@/enum";
 export default function FlowExtra({ node }: { node: Node }) {
   const { attrs } = node.getData();
 
-  const token = localStorage.getItem("token");
+  const enterpriseCode = sessionStorage.getItem("enterpriseCode");
+  const token = localStorage.getItem("token_" + enterpriseCode);
 
   function objectToUrlParams(obj: Record<string, any>) {
     const params = new URLSearchParams();

apps/designer/src/components/basic/cloud.tsx

@@ -68,7 +68,7 @@ Graph.registerPortLayout("cloudLeft", (portsPositionArgs, elemBBox) => {
     return {
       ...item,
       position: {
-        x: elemBBox.width / 4,
+        x: 0,
         y: elemBBox.height / 2,
       },
     };
@@ -81,7 +81,7 @@ Graph.registerPortLayout("cloudRight", (portsPositionArgs, elemBBox) => {
     return {
       ...item,
       position: {
-        x: elemBBox.width * (3 / 4),
+        x: elemBBox.width,
         y: elemBBox.height / 2,
       },
     };

apps/designer/src/events/flowEvent.ts

@@ -1,6 +1,6 @@
 import { Graph, Node, EventArgs } from "@antv/x6";
 import { AddFlowchartElement, EditFlowchartElement, DeleteFlowchartElement } from "@/api/systemDesigner";
-import { debounce } from "lodash-es";
+import { debounce, throttle } from "lodash-es";
 export const handleGraphEvent = (graph: Graph) => {
   const sourceArrowhead = {
     name: "source-arrowhead",
@@ -99,7 +99,7 @@ export const handleGraphApiEvent = (graph: Graph) => {
     });
   });
 
-  graph.on("cell:change:*", debounce((args: EventArgs["cell:change:*"]) => {
+  graph.on("cell:change:*", throttle((args: EventArgs["cell:change:*"]) => {
     if(args.cell?.data?.isPage) return;
     
     const graphId = sessionStorage.getItem("projectId");
@@ -109,7 +109,7 @@ export const handleGraphApiEvent = (graph: Graph) => {
       graphId,
       tools: ''
     });
-  }, 500));
+  }, 300));
 
   graph.on("cell:removed", (args) => {
     DeleteFlowchartElement({

apps/designer/src/layouts/index.tsx

@@ -7,10 +7,10 @@ export default function Layout() {
   const [searchParams] = useSearchParams();
 
   useEffect(() => {
-    const token = searchParams.get('token');
-    
-    if(token) {
-      localStorage.setItem('token', token);
+    const enterpriseCode = searchParams.get('enterpriseCode');
+  
+    if(enterpriseCode) {
+      sessionStorage.setItem('enterpriseCode', enterpriseCode);
     }
   }, [searchParams]);
   return (

apps/designer/src/models/graphModel.ts

@@ -110,7 +110,6 @@ export default function GraphModel() {
       })
 
       graphRef.current.on("cell:change:*", handleChangeAll);
-      addPageNode();
       handleGraphApiEvent(graphRef.current);
     }
   };

apps/designer/src/models/mindMapModel.ts

@@ -43,6 +43,10 @@ export default function mindMapModel() {
       },
     });
 
+  // const setMindProjectInfo = (info: MindMapProjectInfo) => {
+
+  // };
+
   // 监听页面设置更新数据
   useEffect(() => {
     const pageSetting = mindProjectInfo?.pageSetting;
@@ -50,6 +54,8 @@ export default function mindMapModel() {
       EditGraph({
         id: sessionStorage.getItem("projectId"),
         ...pageSetting,
+        structure: mindProjectInfo?.structure,
+        theme: mindProjectInfo?.theme,
         langNameList: [
           {
             name: "zh-CN",

apps/designer/src/pages/flow/components/MenuBar/index.tsx

@@ -225,12 +225,12 @@ export default function MenuBar() {
           icon: <i className="w-20px iconfont icon-bianji-" />,
           onClick: handleRename,
         },
-        {
-          key: "1-3",
-          label: "预览",
-          icon: <i className="w-20px iconfont icon-yulan" />,
-          onClick: handlePreview,
-        },
+        // {
+        //   key: "1-3",
+        //   label: "预览",
+        //   icon: <i className="w-20px iconfont icon-yulan" />,
+        //   onClick: handlePreview,
+        // },
         {
           key: "1-4",
           label: (

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { ProCard, ProTable, PageContainer } from "@ant-design/pro-components";
+import { ProTable, PageContainer } from "@ant-design/pro-components";
 import {
   Card,
   Col,
@@ -9,22 +9,36 @@ import {
   Breadcrumb,
   Empty,
   Pagination,
+  Modal,
+  Tree,
+  Dropdown,
 } from "antd";
 import { useRequest } from "umi";
 import { AppstoreOutlined, MenuOutlined } from "@ant-design/icons";
 import { FlowchartMindMapList } from "@/api/systemDesigner";
 import ProjectCard from "./ProjectCard";
+import { graphOptions } from "./data";
+import { GraphType } from "@/enum";
 
 export default function All() {
   const [display, setDisplay] = useState("card");
   const [dataSource, setDataSource] = useState<any[]>([]);
   const [total, setTotal] = useState(0);
+  const [searchName, setSearchName] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [open, setOpen] = useState(false);
 
   const { loading, run, refresh } = useRequest(FlowchartMindMapList, {
     defaultParams: [
       {
-        currentPage: 1,
-        pageSize: 10,
+        currentPage,
+        pageSize: 12,
+        filters: [
+          {
+            name: "name",
+            value: searchName,
+          },
+        ],
       },
     ],
     onSuccess: (res) => {
@@ -33,20 +47,79 @@ export default function All() {
     },
   });
 
+  const FolderIcon = function () {
+    return (
+      <svg className="icon" aria-hidden="true">
+        <use xlinkHref="#icon-weibiaoti-_huabanfuben"></use>
+      </svg>
+    );
+  };
+
+  const folderTreeData = [
+    {
+      key: "1",
+      title: (
+        <span>
+          我的文件<span className="text-12px color-#999">(当前)</span>
+        </span>
+      ),
+      icon: <FolderIcon />,
+      children: [
+        {
+          key: "1-1",
+          title: "文件夹1",
+          icon: <FolderIcon />,
+        },
+      ],
+    },
+  ];
+
   // 打开文件夹
   const handleOpenFolder = () => {};
 
+  // 搜索文件
+  const handleSearch = () => {
+    setCurrentPage(1);
+    run({
+      currentPage: 1,
+      pageSize: 12,
+      filters: [
+        {
+          name: "name",
+          value: searchName,
+        },
+      ],
+    });
+  };
+
+  // 搜索图形类型
+  const setSearchGraphType = (type: GraphType) => {
+
+  }
+
+  const handleOpenFolderModal = (id: string) => {
+    setOpen(true);
+  };
+
   return (
     <>
       <PageContainer
         extra={[
-          <Button
-            key="1"
-            onClick={() => {
-              setDisplay(display === "card" ? "list" : "card");
-            }}
-            icon={<i className="iconfont icon-shaixuan" />}
-          />,
+          <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>,
           <Button
             key="2"
             onClick={() => {
@@ -59,126 +132,163 @@ export default function All() {
           <Input
             placeholder="搜索文件/文件夹"
             prefix={<i className="iconfont icon-chazhao" />}
+            value={searchName}
+            onChange={(e) => {
+              setSearchName(e.target.value);
+            }}
+            onPressEnter={handleSearch}
           />
         }
         footer={[]}
       >
-        {/* <ProCard
-          style={{
-            height: "calc(100vh - 140px)",
-            minHeight: 800,
-            overflow: "auto",
-          }}
-        > */}
-          <Breadcrumb
-            items={[
+        <Breadcrumb
+          items={[
+            {
+              title: "我的文件",
+            },
+            {
+              title: "文件夹",
+            },
+          ]}
+        ></Breadcrumb>
+        {display === "card" ? (
+          <>
+            <div className="text-12px color-#999 my-8px">文件夹</div>
+            <div className="flex gap-12px flex-wrap">
+              {new Array(2).fill(0).map((item, index) => {
+                return (
+                  <Card
+                    hoverable
+                    bordered
+                    className="w-240px"
+                    onClick={() => handleOpenFolder()}
+                    key={index}
+                  >
+                    <Card.Meta
+                      title={
+                        <span>
+                          <svg className="icon" aria-hidden="true">
+                            <use xlinkHref="#icon-weibiaoti-_huabanfuben"></use>
+                          </svg>
+                          <span className="ml-8px">文件夹</span>
+                        </span>
+                      }
+                    />
+                  </Card>
+                );
+              })}
+            </div>
+            <div className="text-12px color-#999 my-8px">文件</div>
+            <Row gutter={[8, 16]}>
+              {dataSource.map((item, index) => {
+                return (
+                  <Col xs={12} sm={8} md={6} lg={6} xl={6} xxl={6} key={index}>
+                    <ProjectCard
+                      record={item}
+                      onFresh={refresh}
+                      onDelete={refresh}
+                      onChangeLocation={handleOpenFolderModal}
+                    />
+                  </Col>
+                );
+              })}
+            </Row>
+            <div className="flex justify-end py-16px">
+              <Pagination
+                total={total}
+                current={currentPage}
+                pageSize={12}
+                pageSizeOptions={["12", "24", "36"]}
+                onChange={(page, pageSize) => {
+                  setCurrentPage(page);
+                  run({
+                    currentPage: page,
+                    pageSize: pageSize,
+                    filters: [
+                      {
+                        name: "name",
+                        value: searchName,
+                      },
+                    ],
+                  });
+                }}
+                hideOnSinglePage
+              />
+            </div>
+            {dataSource.length == 0 ? <Empty description="暂无数据" /> : null}
+          </>
+        ) : (
+          <ProTable
+            loading={loading}
+            columns={[
+              {
+                title: "名称",
+                dataIndex: "name",
+              },
               {
-                title: "我的文件",
+                title: "类型",
+                dataIndex: "type",
               },
               {
-                title: "文件夹",
+                title: "修改时间",
+                dataIndex: "updatedTime",
+                sorter: (a, b) => a.updateTime - b.updateTime,
               },
             ]}
-          ></Breadcrumb>
-          {display === "card" ? (
-            <>
-              <div className="text-12px color-#999 my-8px">文件夹</div>
-              <div className="flex gap-12px flex-wrap">
-                {new Array(2).fill(0).map((item, index) => {
-                  return (
-                    <Card
-                      hoverable
-                      bordered
-                      className="w-240px"
-                      onClick={() => handleOpenFolder()}
-                      key={index}
-                    >
-                      <Card.Meta
-                        title={
-                          <span>
-                            <svg className="icon" aria-hidden="true">
-                              <use xlinkHref="#icon-weibiaoti-_huabanfuben"></use>
-                            </svg>
-                            <span className="ml-8px">文件夹</span>
-                          </span>
-                        }
-                      />
-                    </Card>
-                  );
-                })}
-              </div>
-              <div className="text-12px color-#999 my-8px">文件</div>
-              <Row gutter={[8, 16]}>
-                {dataSource.map((item, index) => {
-                  return (
-                    <Col
-                      xs={12}
-                      sm={8}
-                      md={6}
-                      lg={6}
-                      xl={6}
-                      xxl={6}
-                      key={index}
-                    >
-                      <ProjectCard record={item} onFresh={refresh} onDelete={refresh}/>
-                    </Col>
-                  );
-                })}
-              </Row>
-              <div className="flex justify-end py-16px">
-                <Pagination
-                  total={total}
-                  defaultCurrent={1}
-                  pageSize={10}
-                  pageSizeOptions={["10", "20", "30"]}
-                  onChange={(page, pageSize) => {
-                    run({
-                      currentPage: page,
-                      pageSize: pageSize,
-                    });
-                  }}
-                  hideOnSinglePage
-                />
-              </div>
-              {dataSource.length == 0 ? <Empty description="暂无数据" /> : null}
-            </>
-          ) : (
-            <ProTable
-              loading={loading}
-              columns={[
-                {
-                  title: "名称",
-                  dataIndex: "name",
-                },
-                {
-                  title: "类型",
-                  dataIndex: "type",
-                },
-                {
-                  title: "修改时间",
-                  dataIndex: "updatedTime",
-                  sorter: (a, b) => a.updateTime - b.updateTime,
-                },
-              ]}
-              dataSource={dataSource}
-              rowKey={"id"}
-              search={false}
-              pagination={{
-                total: total,
-                pageSize: 10,
-                defaultCurrent: 1,
-                pageSizeOptions: ["10", "20", "30"],
-                onChange: (page, pageSize) => {
-                  run({
-                    currentPage: page,
-                    pageSize: pageSize,
-                  });
-                },
-              }}
-            />
-          )}
-        {/* </ProCard> */}
+            dataSource={dataSource}
+            rowKey={"id"}
+            search={false}
+            pagination={{
+              total: total,
+              pageSize: 12,
+              current: currentPage,
+              pageSizeOptions: ["12", "24", "36"],
+              onChange: (page, pageSize) => {
+                setCurrentPage(page);
+                run({
+                  currentPage: page,
+                  pageSize: pageSize,
+                  filters: [
+                    {
+                      name: "name",
+                      value: searchName,
+                    },
+                  ],
+                });
+              },
+            }}
+          />
+        )}
       </PageContainer>
+
+      <Modal
+        title="移动/复制到"
+        width={440}
+        open={open}
+        onCancel={() => setOpen(false)}
+        centered
+        footer={
+          <div>
+            <Button className="m-r-8px" onClick={() => setOpen(false)}>
+              取消
+            </Button>
+            <Button
+              className="m-r-8px"
+              type="primary"
+              onClick={() => setOpen(false)}
+            >
+              移动
+            </Button>
+            <Button type="primary" onClick={() => setOpen(false)}>
+              复制
+            </Button>
+          </div>
+        }
+      >
+        <div className="min-h-300px">
+          <Tree treeData={folderTreeData} showIcon blockNode />
+        </div>
+      </Modal>
     </>
   );
 }

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

@@ -1,9 +1,145 @@
-import React from 'react'
+import React, { useState } from "react";
+import { ProTable, PageContainer } from "@ant-design/pro-components";
+import {
+  Card,
+  Col,
+  Row,
+  Button,
+  Input,
+  Breadcrumb,
+  Empty,
+  Pagination,
+} from "antd";
+import { useRequest } from "umi";
+import { AppstoreOutlined, MenuOutlined } from "@ant-design/icons";
+import { FlowchartMindMapList } from "@/api/systemDesigner";
+import ProjectCard from "./ProjectCard";
 
 export default function Collect() {
+  const [display, setDisplay] = useState("card");
+  const [dataSource, setDataSource] = useState<any[]>([]);
+  const [total, setTotal] = useState(0);
+
+  // const { loading, run, refresh } = useRequest(FlowchartMindMapList, {
+  //   defaultParams: [
+  //     {
+  //       currentPage: 1,
+  //       pageSize: 12,
+  //     },
+  //   ],
+  //   onSuccess: (res) => {
+  //     setDataSource(res?.result?.model || []);
+  //     setTotal(res?.result?.totalCount || 0);
+  //   },
+  // });
+
   return (
-    <div>
-      模版收藏
-    </div>
-  )
+    <>
+      <PageContainer
+        extra={[
+          <Button
+            key="1"
+            onClick={() => {
+              setDisplay(display === "card" ? "list" : "card");
+            }}
+            icon={<i className="iconfont icon-shaixuan" />}
+          />,
+          <Button
+            key="2"
+            onClick={() => {
+              setDisplay(display === "card" ? "list" : "card");
+            }}
+            icon={display === "card" ? <MenuOutlined /> : <AppstoreOutlined />}
+          />,
+        ]}
+        title={
+          <Input
+            placeholder="搜索模版"
+            prefix={<i className="iconfont icon-chazhao" />}
+          />
+        }
+        footer={[]}
+      >
+          <Breadcrumb
+            items={[
+              {
+                title: "模版收藏",
+              },
+            ]}
+          ></Breadcrumb>
+          {display === "card" ? (
+            <>
+              {/* <div className="text-12px color-#999 my-8px">文件</div> */}
+              <Row gutter={[8, 16]}>
+                {dataSource.map((item, index) => {
+                  return (
+                    <Col
+                      xs={12}
+                      sm={8}
+                      md={6}
+                      lg={6}
+                      xl={6}
+                      xxl={6}
+                      key={index}
+                    >
+                      {/* <ProjectCard record={item} onFresh={refresh} onDelete={refresh}/> */}
+                    </Col>
+                  );
+                })}
+              </Row>
+              <div className="flex justify-end py-16px">
+                <Pagination
+                  total={total}
+                  defaultCurrent={1}
+                  pageSize={12}
+                  pageSizeOptions={["12", "24", "36"]}
+                  onChange={(page, pageSize) => {
+                    // run({
+                    //   currentPage: page,
+                    //   pageSize: pageSize,
+                    // });
+                  }}
+                  hideOnSinglePage
+                />
+              </div>
+              {dataSource.length == 0 ? <Empty description="暂无数据" /> : null}
+            </>
+          ) : (
+            <ProTable
+              // loading={loading}
+              columns={[
+                {
+                  title: "名称",
+                  dataIndex: "name",
+                },
+                {
+                  title: "类型",
+                  dataIndex: "type",
+                },
+                {
+                  title: "修改时间",
+                  dataIndex: "updatedTime",
+                  sorter: (a, b) => a.updateTime - b.updateTime,
+                },
+              ]}
+              dataSource={dataSource}
+              rowKey={"id"}
+              search={false}
+              pagination={{
+                total: total,
+                pageSize: 10,
+                defaultCurrent: 1,
+                pageSizeOptions: ["12", "24", "36"],
+                onChange: (page, pageSize) => {
+                  // run({
+                  //   currentPage: page,
+                  //   pageSize: pageSize,
+                  // });
+                },
+              }}
+            />
+          )}
+      </PageContainer>
+    </>
+  );
 }

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

@@ -9,18 +9,21 @@ export default function ProjectCard({
   record,
   onFresh,
   onDelete,
+  onChangeLocation,
 }: {
   record: any;
   onFresh: () => void;
   onDelete: () => void;
+  onChangeLocation: (id: string) => void;
 }) {
   const [showMenu, setShowMenu] = useState(false);
   const handleToEdit = () => {
     const { origin, pathname } = window.location;
+    const enterpriseCode = sessionStorage.getItem("enterpriseCode");
     if (record.type === GraphType.mindmap) {
-      window.open(`${origin}${pathname}#/mindmap/${record.id}`);
+      window.open(`${origin}${pathname}#/mindmap/${record.id}?enterpriseCode=${enterpriseCode}`);
     } else {
-      window.open(`${origin}${pathname}#/flow/${record.id}`);
+      window.open(`${origin}${pathname}#/flow/${record.id}?enterpriseCode=${enterpriseCode}`);
     }
   };
 
@@ -59,6 +62,7 @@ export default function ProjectCard({
                   let name = record.name;
                   confirm({
                     title: "重命名",
+                    centered: true,
                     content: (
                       <Input
                         defaultValue={name}
@@ -86,7 +90,9 @@ export default function ProjectCard({
               {
                 key: "2",
                 label: "移动或复制",
-                onClick: () => {},
+                onClick: () => {
+                  onChangeLocation?.(record.id);
+                },
               },
               {
                 key: "3",
@@ -96,6 +102,7 @@ export default function ProjectCard({
                   confirm({
                     title: "删除",
                     content: "确定删除该图形？",
+                    centered: true,
                     onOk: async () => {
                       await DeleteGraph({
                         id: record.id,

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

@@ -1,41 +1,110 @@
 import React, { useState } from "react";
-import { ProCard, ProTable, PageContainer } from "@ant-design/pro-components";
-import { Card, Col, Row, Button, Input, Breadcrumb, Empty } from "antd";
-import { history, useRequest } from "umi";
+import { ProTable, PageContainer } from "@ant-design/pro-components";
+import {
+  Col,
+  Row,
+  Button,
+  Input,
+  Breadcrumb,
+  Empty,
+  Pagination,
+  Dropdown,
+  Modal,
+  Tree,
+} from "antd";
+import { useRequest } from "umi";
 import { AppstoreOutlined, MenuOutlined } from "@ant-design/icons";
 import { FlowchartMindMapList } from "@/api/systemDesigner";
+import ProjectCard from "./ProjectCard";
+import { graphOptions } from "./data";
 import { GraphType } from "@/enum";
 
-import defaultFlowImg from "@/assets/image/flow.png";
-import defaultMindImg from "@/assets/image/mindmap.png";
 export default function Recently() {
   const [display, setDisplay] = useState("card");
   const [dataSource, setDataSource] = useState<any[]>([]);
-  const handleToEdit = (record: any) => {
-    if(record.type === GraphType.mindmap) {
-      history.push(`/mindmap/${record.id}`);
-    } else {
-      history.push(`/flow/${record.id}`);
-    }
-  };
+  const [total, setTotal] = useState(0);
+  const [searchName, setSearchName] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [open, setOpen] = useState(false);
 
-  const { loading, run } = useRequest(FlowchartMindMapList, {
+  const { loading, run, refresh } = useRequest(FlowchartMindMapList, {
+    defaultParams: [
+      {
+        currentPage: 1,
+        pageSize: 12,
+      },
+    ],
     onSuccess: (res) => {
       setDataSource(res?.result?.model || []);
+      setTotal(res?.result?.totalCount || 0);
     },
   });
 
+  const FolderIcon = function () {
+    return (
+      <svg className="icon" aria-hidden="true">
+        <use xlinkHref="#icon-weibiaoti-_huabanfuben"></use>
+      </svg>
+    );
+  };
+
+  const folderTreeData = [
+    {
+      key: "1",
+      title: (
+        <span>
+          我的文件<span className="text-12px color-#999">(当前)</span>
+        </span>
+      ),
+      icon: <FolderIcon />,
+      children: [
+        {
+          key: "1-1",
+          title: "文件夹1",
+          icon: <FolderIcon />,
+        },
+      ],
+    },
+  ];
+
+  // 搜索文件
+  const handleSearch = () => {
+    setCurrentPage(1);
+    run({
+      currentPage: 1,
+      pageSize: 12,
+      filters: [
+        {
+          name: "name",
+          value: searchName,
+        },
+      ],
+    });
+  };
+  // 搜索图形类型
+  const setSearchGraphType = (type: GraphType) => {};
+
   return (
     <>
       <PageContainer
         extra={[
-          <Button
+          <Dropdown
             key="1"
-            onClick={() => {
-              setDisplay(display === "card" ? "list" : "card");
+            menu={{
+              items: graphOptions.map((item) => {
+                return {
+                  key: item.key,
+                  label: item.label,
+                  value: item.value,
+                  onClick: () => {
+                    setSearchGraphType(item.value);
+                  },
+                };
+              }),
             }}
-            icon={<i className="iconfont icon-shaixuan" />}
-          />,
+          >
+            <Button key="1" icon={<i className="iconfont icon-shaixuan" />} />
+          </Dropdown>,
           <Button
             key="2"
             onClick={() => {
@@ -46,104 +115,125 @@ export default function Recently() {
         ]}
         title={
           <Input
-            placeholder="搜索文件/文件夹"
+            placeholder="搜索最近文件"
             prefix={<i className="iconfont icon-chazhao" />}
+            value={searchName}
+            onChange={(e) => {
+              setSearchName(e.target.value);
+            }}
+            onPressEnter={handleSearch}
           />
         }
         footer={[]}
       >
-        <ProCard
-          style={{
-            height: "calc(100vh - 140px)",
-            minHeight: 800,
-            overflow: "auto",
-          }}
-        >
-          <Breadcrumb
-            items={[
+        <Breadcrumb
+          items={[
+            {
+              title: "最近",
+            },
+          ]}
+        ></Breadcrumb>
+        {display === "card" ? (
+          <>
+            <div className="text-12px color-#999 my-8px">文件</div>
+            <Row gutter={[8, 16]}>
+              {dataSource.map((item, index) => {
+                return (
+                  <Col xs={12} sm={8} md={6} lg={6} xl={6} xxl={6} key={index}>
+                    <ProjectCard
+                      record={item}
+                      onFresh={refresh}
+                      onDelete={refresh}
+                      onChangeLocation={() => {}}
+                    />
+                  </Col>
+                );
+              })}
+            </Row>
+            <div className="flex justify-end py-16px">
+              <Pagination
+                total={total}
+                defaultCurrent={1}
+                pageSize={12}
+                pageSizeOptions={["12", "24", "36"]}
+                onChange={(page, pageSize) => {
+                  setCurrentPage(page);
+                  run({
+                    currentPage: page,
+                    pageSize: pageSize,
+                  });
+                }}
+                hideOnSinglePage
+              />
+            </div>
+            {dataSource.length == 0 ? <Empty description="暂无数据" /> : null}
+          </>
+        ) : (
+          <ProTable
+            loading={loading}
+            columns={[
               {
-                title: "最近",
+                title: "名称",
+                dataIndex: "name",
+              },
+              {
+                title: "类型",
+                dataIndex: "type",
               },
-            ]}
-          ></Breadcrumb>
-          {display === "card" ? (
-            <>
-              <div className="text-12px color-#999 my-8px">文件</div>
-              <Row gutter={[8, 16]}>
-                {dataSource.map((item, index) => {
-                  return (
-                    <Col
-                      xs={12}
-                      sm={8}
-                      md={6}
-                      lg={6}
-                      xl={6}
-                      xxl={6}
-                      key={index}
-                    >
-                      <Card
-                        hoverable
-                        bordered
-                        cover={
-                          <img
-                            style={{ height: 200, objectFit: "cover" }}
-                            alt="example"
-                            src={item?.coverImage || (item.type === GraphType.mindmap ? defaultMindImg : defaultFlowImg)}
-                          />
-                        }
-                        onClick={() => handleToEdit(item)}
-                      >
-                        <Card.Meta
-                          title={
-                            <span>
-                              {item.type === GraphType.mindmap ? (
-                                <i
-                                  className={`iconfont icon-siweidaotu_huaban1 color-#3bc9c1 mr-8px`}
-                                />
-                              ) : (
-                                <i
-                                  className={`iconfont icon-liuchengtu color-#067bef mr-8px`}
-                                />
-                              )}
-                              {item.name}
-                            </span>
-                          }
-                          description={`更新于: ${item.updatedTime}`}
-                        />
-                      </Card>
-                    </Col>
-                  );
-                })}
-              </Row>
               {
-                dataSource.length == 0 ?
-                <Empty description="暂无数据" />
-                : null
-              }
-            </>
-          ) : (
-            <ProTable
-              columns={[
-                {
-                  title: "名称",
-                  dataIndex: "name",
-                },
-                {
-                  title: "类型",
-                  dataIndex: "type",
-                },
-                {
-                  title: "修改时间",
-                  dataIndex: "updatedTime",
-                },
-              ]}
-              dataSource={dataSource}
-              rowKey={"id"}
-              search={false}
-            />
-          )}
-        </ProCard>
+                title: "修改时间",
+                dataIndex: "updatedTime",
+                sorter: (a, b) => a.updateTime - b.updateTime,
+              },
+            ]}
+            dataSource={dataSource}
+            rowKey={"id"}
+            search={false}
+            pagination={{
+              total: total,
+              pageSize: 10,
+              current: currentPage,
+              pageSizeOptions: ["12", "24", "36"],
+              onChange: (page, pageSize) => {
+                setCurrentPage(page);
+                run({
+                  currentPage: page,
+                  pageSize: pageSize,
+                });
+              },
+            }}
+          />
+        )}
       </PageContainer>
+
+      <Modal
+        title="移动/复制到"
+        width={440}
+        open={open}
+        onCancel={() => setOpen(false)}
+        centered
+        footer={
+          <div>
+            <Button className="m-r-8px" onClick={() => setOpen(false)}>
+              取消
+            </Button>
+            <Button
+              className="m-r-8px"
+              type="primary"
+              onClick={() => setOpen(false)}
+            >
+              移动
+            </Button>
+            <Button type="primary" onClick={() => setOpen(false)}>
+              复制
+            </Button>
+          </div>
+        }
+      >
+        <div className="min-h-300px">
+          <Tree treeData={folderTreeData} showIcon blockNode />
+        </div>
+      </Modal>
     </>
   );
 }

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

@@ -1,9 +1,145 @@
-import React from 'react'
+import React, { useState } from "react";
+import { ProTable, PageContainer } from "@ant-design/pro-components";
+import {
+  Card,
+  Col,
+  Row,
+  Button,
+  Input,
+  Breadcrumb,
+  Empty,
+  Pagination,
+} from "antd";
+import { useRequest } from "umi";
+import { AppstoreOutlined, MenuOutlined } from "@ant-design/icons";
+import { FlowchartMindMapList } from "@/api/systemDesigner";
+import ProjectCard from "./ProjectCard";
 
 export default function Template() {
+  const [display, setDisplay] = useState("card");
+  const [dataSource, setDataSource] = useState<any[]>([]);
+  const [total, setTotal] = useState(0);
+
+  // const { loading, run, refresh } = useRequest(FlowchartMindMapList, {
+  //   defaultParams: [
+  //     {
+  //       currentPage: 1,
+  //       pageSize: 12,
+  //     },
+  //   ],
+  //   onSuccess: (res) => {
+  //     setDataSource(res?.result?.model || []);
+  //     setTotal(res?.result?.totalCount || 0);
+  //   },
+  // });
+
   return (
-    <div>
-      模版
-    </div>
-  )
+    <>
+      <PageContainer
+        extra={[
+          <Button
+            key="1"
+            onClick={() => {
+              setDisplay(display === "card" ? "list" : "card");
+            }}
+            icon={<i className="iconfont icon-shaixuan" />}
+          />,
+          <Button
+            key="2"
+            onClick={() => {
+              setDisplay(display === "card" ? "list" : "card");
+            }}
+            icon={display === "card" ? <MenuOutlined /> : <AppstoreOutlined />}
+          />,
+        ]}
+        title={
+          <Input
+            placeholder="搜索模版"
+            prefix={<i className="iconfont icon-chazhao" />}
+          />
+        }
+        footer={[]}
+      >
+          <Breadcrumb
+            items={[
+              {
+                title: "我的模版",
+              },
+            ]}
+          ></Breadcrumb>
+          {display === "card" ? (
+            <>
+              {/* <div className="text-12px color-#999 my-8px">文件</div> */}
+              <Row gutter={[8, 16]}>
+                {dataSource.map((item, index) => {
+                  return (
+                    <Col
+                      xs={12}
+                      sm={8}
+                      md={6}
+                      lg={6}
+                      xl={6}
+                      xxl={6}
+                      key={index}
+                    >
+                      {/* <ProjectCard record={item} onFresh={refresh} onDelete={refresh}/> */}
+                    </Col>
+                  );
+                })}
+              </Row>
+              <div className="flex justify-end py-16px">
+                <Pagination
+                  total={total}
+                  defaultCurrent={1}
+                  pageSize={12}
+                  pageSizeOptions={["12", "24", "36"]}
+                  onChange={(page, pageSize) => {
+                    // run({
+                    //   currentPage: page,
+                    //   pageSize: pageSize,
+                    // });
+                  }}
+                  hideOnSinglePage
+                />
+              </div>
+              {dataSource.length == 0 ? <Empty description="暂无数据" /> : null}
+            </>
+          ) : (
+            <ProTable
+              // loading={loading}
+              columns={[
+                {
+                  title: "名称",
+                  dataIndex: "name",
+                },
+                {
+                  title: "类型",
+                  dataIndex: "type",
+                },
+                {
+                  title: "修改时间",
+                  dataIndex: "updatedTime",
+                  sorter: (a, b) => a.updateTime - b.updateTime,
+                },
+              ]}
+              dataSource={dataSource}
+              rowKey={"id"}
+              search={false}
+              pagination={{
+                total: total,
+                pageSize: 10,
+                defaultCurrent: 1,
+                pageSizeOptions: ["12", "24", "36"],
+                onChange: (page, pageSize) => {
+                  // run({
+                  //   currentPage: page,
+                  //   pageSize: pageSize,
+                  // });
+                },
+              }}
+            />
+          )}
+      </PageContainer>
+    </>
+  );
 }

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

@@ -0,0 +1,49 @@
+import { GraphType } from "@/enum";
+
+export const graphOptions = [
+  {
+    key: 1,
+    label: "流程图",
+    value: GraphType.flowchart,
+  },
+  {
+    key: 2,
+    label: "思维导图",
+    value: GraphType.mindmap,
+  },
+  {
+    key: 3,
+    label: "BPMN",
+    value: GraphType.bpmn,
+  },
+  {
+    key: 4,
+    label: "ER图",
+    value: GraphType.er,
+  },
+  {
+    key: 5,
+    label: "泳道图",
+    value: GraphType.lane,
+  },
+  {
+    key: 6,
+    label: "网络拓扑图",
+    value: GraphType.net,
+  },
+  {
+    key: 7,
+    label: "组织结构体",
+    value: GraphType.org,
+  },
+  {
+    key: 8,
+    label: "UML",
+    value: GraphType.uml,
+  },
+  {
+    key: 9,
+    label: "韦恩图",
+    value: GraphType.venn,
+  },
+];

apps/designer/src/utils/index.ts

@@ -47,11 +47,11 @@ export const createNew = async (type: string) => {
   const id = res?.result?.graph?.id;
   if(!id) return false;
   const { origin, pathname } = window.location;
-  // todo创建图形
+  const enterpriseCode = sessionStorage.getItem("enterpriseCode");
   if(type === GraphType.mindmap) {
-    window.open(`${origin}${pathname}#/mindmap/${id}`);
+    window.open(`${origin}${pathname}#/mindmap/${id}?enterpriseCode=${enterpriseCode}`);
   } else {
-    window.open(`${origin}${pathname}#/flow/${id}`);
+    window.open(`${origin}${pathname}#/flow/${id}?enterpriseCode=${enterpriseCode}`);
   }
   return id;
 };