feat: 联调更新及分页请求参数

apps/er-designer/.umirc.ts

@@ -9,7 +9,7 @@ export default defineConfig({
   ],
   styles: [
     '//at.alicdn.com/t/c/font_4676747_4jkbw9dya3f.css',
-    '//at.alicdn.com/t/c/font_4767192_cvhfdnhsd79.css',
+    '//at.alicdn.com/t/c/font_4767192_twj930g7m9m.css',
   ],
   metas: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }
@@ -22,9 +22,7 @@ export default defineConfig({
     },
   },
   scripts: [
-    // 字体加载
-    // '//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js'
-    '//at.alicdn.com/t/c/font_4767192_wzcidzyqjen.js'
+    '//at.alicdn.com/t/c/font_4767192_twj930g7m9m.js'
   ],
   plugins: [
     require.resolve('@umijs/plugins/dist/unocss'),

apps/er-designer/src/api/dataModel.ts

@@ -1,13 +1,18 @@
 import { request } from "umi";
 import { commonParams } from "./";
 import { ProjectInfo } from "@/type";
+import { TableType } from "@/enum";
 
 /**
  * 查询数据模型列表
  * @param
  * @returns
  */
-export const GetDataModelList = (data: { name: string }) => {
+export const GetDataModelList = (data: {
+  name?: string;
+  folder?: string;
+  type?: TableType;
+}) => {
   return request("/api/erDiagram/dataModel/list", {
     method: "POST",
     data,

apps/er-designer/src/models/erModel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { EventArgs, Graph, Shape, Point } from "@antv/x6";
+import { EventArgs, Graph, Shape } from "@antv/x6";
 import { Transform } from "@antv/x6-plugin-transform";
 import { Scroller } from "@antv/x6-plugin-scroller";
 import { Snapline } from "@antv/x6-plugin-snapline";
@@ -7,10 +7,10 @@ import { Keyboard } from "@antv/x6-plugin-keyboard";
 import { Export } from "@antv/x6-plugin-export";
 import { Selection } from "@antv/x6-plugin-selection";
 import { SaveDataModel } from "@/api";
-import { useRequest } from "umi";
-import { useFullscreen } from "ahooks";
+import { useFullscreen, useSessionStorageState } from "ahooks";
 import { throttle } from "lodash-es";
-import { createTable } from "@/utils";
+import { createTable, uuid } from "@/utils";
+import dayjs from "dayjs";
 
 import type {
   ColumnItem,
@@ -20,17 +20,24 @@ import type {
   TableItemType,
   TopicAreaInfo,
 } from "@/type";
-import { createColumn, uuid } from "@/utils";
-import { DataType, RelationLineType, RelationType, TableType } from "@/enum";
+import { RelationLineType } from "@/enum";
 import { render } from "./renderer";
-import { useSessionStorageState } from "ahooks";
-import { useSearchParams } from "umi";
 
 import "@/components/TableNode";
 import "@/components/TopicNode";
 import "@/components/NoticeNode";
 import { message } from "antd";
 
+const DEFAULT_SETTING = {
+  showMenu: true,
+  showSidebar: true,
+  showColumnDetail: true,
+  showGrid: true,
+  showRelation: true,
+  autoUpdate: false,
+  tableWidth: 220,
+};
+
 export default function erModel() {
   const graphRef = useRef<Graph>();
   const [graph, setGraph] = useState<Graph>();
@@ -41,6 +48,7 @@ export default function erModel() {
     defaultValue: false,
     listenStorageChange: true
   });
+  const [saveTime, setSaveTime] = useState<string>();
   const [project, setProjectInfo] = useState<ProjectInfo>({
     id: "1",
     name: "新建模型",
@@ -56,15 +64,10 @@ export default function erModel() {
     remarkInfos: [],
     todos: [],
     setting: {
-      showMenu: true,
-      showSidebar: true,
-      showColumnDetail: true,
-      showGrid: true,
-      showRelation: true,
-      autoUpdate: false,
-      tableWidth: 220,
+      ...DEFAULT_SETTING
     },
   });
+
   const [_tabActiveKey, setTabActiveKey] =
     useSessionStorageState("tabs-active-key");
   const [_relationActive, setRelationActive] =
@@ -119,6 +122,8 @@ export default function erModel() {
     // 提交服务器
     if(!isInit) {
       SaveDataModel(project);
+      // 格式化当前时间
+      setSaveTime(dayjs().format('YYYY-MM-DD HH:mm:ss'));
     }
   };
 
@@ -251,10 +256,9 @@ export default function erModel() {
       }
     );
 
-    instance.on("node:change:position", throttle((args) => {
-      console.log(args);
+    instance.on("node:moved", throttle((args) => {
+      console.log('moved', args);
       const data = args.node.data;
-      const current = args.current;
       if(data.isTable) {
         updateTable({
           ...data,
@@ -262,8 +266,8 @@ export default function erModel() {
             ...data.table,
             style: {
               ...data.table.style,
-              x: current.x,
-              y: current.y,
+              x: args.x,
+              y: args.y,
             }
           }
         })
@@ -273,8 +277,8 @@ export default function erModel() {
           ...data,
           style: {
             ...data.style,
-            x: current.x,
-            y: current.y,
+            x: args.x,
+            y: args.y,
           }
         })
       }
@@ -283,8 +287,8 @@ export default function erModel() {
           ...data,
           style: {
             ...data.style,
-            x: current.x,
-            y: current.y,
+            x: args.x,
+            y: args.y,
           }
         })
       }
@@ -347,8 +351,7 @@ export default function erModel() {
     const x = area?.center.x || 300;
     const y = area?.center.y || 300;
     // 数据表类型动态路由传参
-    const [searchParams] = useSearchParams();
-    const newTable = createTable(searchParams.get('type') as unknown as TableType || 3, parentId);
+    const newTable = createTable(project.type || 3, parentId);
     newTable.table.style.x = x;
     newTable.table.style.y = y;
 
@@ -364,6 +367,7 @@ export default function erModel() {
       ...project,
       tables: list
     })
+    setTabActiveKey("1");
   };
 
   /**
@@ -429,6 +433,7 @@ export default function erModel() {
       ...project,
       topicAreas: [...project.topicAreas, newTopicArea],
     });
+    setTabActiveKey("3");
   };
 
   /**
@@ -481,6 +486,7 @@ export default function erModel() {
       ...project,
       remarkInfos: [...project.remarkInfos, newRemark],
     });
+    setTabActiveKey("4");
   };
 
   /**
@@ -590,6 +596,7 @@ export default function erModel() {
         return state;
       }
     });
+    setTabActiveKey("2");
   };
 
   /**
@@ -847,6 +854,7 @@ export default function erModel() {
     enterPlayMode,
     playModeEnable,
     setPlayModeEnable,
-    exitPlayMode
+    exitPlayMode,
+    saveTime
   };
 }

apps/er-designer/src/pages/detail/components/ER.tsx

@@ -1,7 +1,17 @@
 import React, { useEffect } from "react";
 import { useModel } from "umi";
 import Navigator from "@/pages/er/components/Navigator";
-export default function ER(props: { showNavigator: boolean }) {
+import {
+  EnvironmentOutlined,
+  FullscreenExitOutlined,
+  UnorderedListOutlined,
+} from "@ant-design/icons";
+export default function ER(props: {
+  showNavigator: boolean;
+  isFullScreen: boolean;
+  onExitFullscreen: () => void;
+  onChangeShowNavigator: (show: boolean) => void;
+}) {
   const contianerRef = React.useRef<HTMLDivElement>(null);
   const { graph, project, initGraph } = useModel("erModel");
 
@@ -16,6 +26,62 @@ export default function ER(props: { showNavigator: boolean }) {
     <div className="w-full h-full relative">
       <div className="w-full h-full" ref={contianerRef} />
       {props.showNavigator && <Navigator />}
+      {props.isFullScreen && (
+        <div className="absolute top-32px right-32px z-2">
+          <div className="left bg-#fff shadow-md p-x-4px p-y-4px flex items-center gap-8px">
+            <div
+              className="
+            rounded-4px 
+            cus-btn 
+            w-32px 
+            h-32px
+            bg-#eee 
+            flex-none 
+            text-center 
+            leading-32px 
+            cursor-pointer 
+            hover:bg-#ddd"
+            >
+              <UnorderedListOutlined />
+            </div>
+            <div
+              className="
+            rounded-4px 
+            cus-btn 
+            w-32px 
+            h-32px
+            bg-#eee 
+            flex-none 
+            text-center 
+            leading-32px 
+            cursor-pointer 
+            hover:bg-#ddd"
+            >
+              <EnvironmentOutlined
+                onClick={() => {
+                  props.onChangeShowNavigator(!props.showNavigator);
+                }}
+              />
+            </div>
+            <div
+              className="
+            rounded-4px 
+            cus-btn 
+            w-32px 
+            h-32px
+            bg-#eee 
+            flex-none 
+            text-center 
+            leading-32px 
+            cursor-pointer 
+            hover:bg-#ddd"
+              onClick={() => props.onExitFullscreen()}
+            >
+              <FullscreenExitOutlined />
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

apps/er-designer/src/pages/detail/index.tsx

@@ -16,57 +16,68 @@ import AddTable from "./components/AddTable";
 import { useModel, history } from "umi";
 import NoData from "@/assets/no-data.png";
 import { TableItemType } from "@/type";
+import { useFullscreen } from "ahooks";
 
 const { Content, Header } = Layout;
 export default function index() {
   const [active, setActive] = useState(0);
   const [showNavigator, setShowNavigator] = useState(true);
   const addTableRef = useRef<{ open: () => void }>();
-  const { project, setProject, setPlayModeEnable } = useModel("erModel");
+  const { project, setProject, setPlayModeEnable, graph } = useModel("erModel");
   const [searchKeyword, setSearchKeyword] = useState("");
-  const [selectKey, setSelectKey] = useState<string>("");
+  const [selectKey, setSelectKey] = useState<string>(project.tables?.[0]?.table?.id || '');
+  const erRef = useRef<HTMLDivElement>(null);
+  const [isFullscreen, { enterFullscreen, exitFullscreen }] =
+    useFullscreen(erRef);
 
   useEffect(() => {
     setPlayModeEnable(true);
   }, [project]);
 
-  const descItems: DescriptionsProps["items"] = [
-    {
-      key: "1",
-      label: "模型名称",
-      children: "用户模型名称",
-    },
-    {
-      key: "2",
-      label: "创建用户",
-      children: "张XX",
-    },
-    {
-      key: "3",
-      label: "创建时间",
-      children: "2024-12-12 13:45",
-    },
-    {
-      key: "4",
-      label: "更新时间",
-      children: "2024-12-12 13:45",
-    },
-    {
-      key: "5",
-      label: "发布状态",
-      children: "未发布",
-    },
-    {
-      key: "6",
-      label: "数据库同步",
-      children: "5/6",
-    },
-    {
-      key: "7",
-      label: "描述",
-      children: "模型说明啊多发点是否，的发射点发射点，打发打发",
-    },
-  ];
+  const descItems: DescriptionsProps["items"] = useMemo(() => {
+    return [
+      {
+        key: "1",
+        label: "模型名称",
+        children: project?.name || '-',
+      },
+      {
+        key: "2",
+        label: "创建用户",
+        children: project?.createdBy || '-',
+      },
+      {
+        key: "3",
+        label: "创建时间",
+        children: project?.createTime || '-',
+      },
+      {
+        key: "4-1",
+        label: "更新用户",
+        children: project?.updatedBy || '-',
+      },
+      {
+        key: "4",
+        label: "更新时间",
+        children: project?.updateTime || '-',
+      },
+      {
+        key: "5",
+        label: "发布状态",
+        children: project?.publishStatus || '-',
+      },
+      {
+        key: "6",
+        label: "数据库同步",
+        children: "5/6",
+      },
+      {
+        key: "7",
+        label: "描述",
+        children: project?.description || '-',
+      },
+    ];
+  }, [project]);
 
   const tableData: MenuProps["items"] = useMemo(() => {
     const { tables } = project;
@@ -85,7 +96,6 @@ export default function index() {
         key: item.table.id,
         label: item.table.schemaName + `${name ? `(${name})}` : ""}`,
         icon: <i className="iconfont icon-biaogebeifen" />,
-        // children: [],
       };
       if (!item.table.parentBusinessTableId) {
         treeList.push(newItem);
@@ -94,7 +104,7 @@ export default function index() {
           (tableItem) => tableItem?.key === item.table.parentBusinessTableId
         );
         if (parent) {
-          if(!parent?.children) {
+          if (!parent?.children) {
             parent.children = [];
           }
           parent.children?.push(newItem);
@@ -113,8 +123,16 @@ export default function index() {
       ...project,
       tables: [...project.tables, tableItem],
     });
+    setSelectKey(tableItem.table.id);
   };
 
+  const handleEnterFullscreen = () => {
+    enterFullscreen();
+  }
+  const handleExitFullscreen = () => {
+    exitFullscreen();
+  }
+
   const extra = (
     <div className="flex gap-12px">
       <a>
@@ -163,7 +181,7 @@ export default function index() {
         ></Descriptions>
       </Header>
 
-      <Content className="flex-1 flex gap-12px">
+      <Content className="flex-1 overflow-auto flex gap-12px">
         <div className="left w-300px shrink-0 h-full shadow-sm bg-#fff rounded-8px">
           <div
             className="
@@ -212,7 +230,7 @@ export default function index() {
             <Empty image={NoData} description="点击+添加数据表！" />
           )}
         </div>
-        <div className="right flex-1 h-full shadow-sm bg-#fff rounded-8px p-12px flex flex-col">
+        <div className="right flex-1 overflow-hidden h-full shadow-sm bg-#fff rounded-8px p-12px flex flex-col">
           <div className="head flex justify-between">
             <div className="left flex gap-8px">
               <Button
@@ -242,6 +260,7 @@ export default function index() {
                   <Button
                     type="primary"
                     icon={<i className="iconfont icon-quanping_o text-14px" />}
+                    onClick={handleEnterFullscreen}
                   >
                     全屏
                   </Button>
@@ -253,10 +272,15 @@ export default function index() {
               )}
             </div>
           </div>
-          <div className="content w-full flex-1">
+          <div className="content w-full flex-1 overflow-auto">
             {active === 0 ? (
-              <div className="er w-full h-full bg-#ccc">
-                <ER showNavigator={showNavigator} />
+              <div className="er w-full h-full bg-#ccc overflow-hidden" ref={erRef}>
+                <ER
+                  showNavigator={showNavigator}
+                  isFullScreen={isFullscreen}
+                  onExitFullscreen={handleExitFullscreen}
+                  onChangeShowNavigator={setShowNavigator}
+                />
               </div>
             ) : (
               <TableEdit data={currentTable?.tableColumnList || []} />

apps/er-designer/src/pages/er/components/Menu.tsx

@@ -18,6 +18,7 @@ export default function Menu() {
     onPaste,
     onDelete,
     enterPlayMode,
+    saveTime,
   } = useModel("erModel");
   const [modal, contextHolder] = Modal.useModal();
   const [isFullscreen, { toggleFullscreen }] = useFullscreen(document.body);
@@ -349,9 +350,11 @@ export default function Menu() {
               onBlur={handleChangeName}
               onPressEnter={handleChangeName}
             />
-            <div className="bg-#eee text-12px leading-20px color-#666 rounded-4px p-x-4px p-y-2px">
-              上次保存时间：2024-12-13 13:21:23
+            {
+              saveTime && <div className="bg-#eee text-12px leading-20px color-#666 rounded-4px p-x-4px p-y-2px">
+              上次保存时间：{saveTime}
             </div>
+            }
           </div>
           <div className="flex">
             {menuData.map((item) => {

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { ProTable, PageContainer, } from "@ant-design/pro-components";
+import { ProTable, PageContainer } from "@ant-design/pro-components";
 import {
   Card,
   Col,
@@ -15,7 +15,6 @@ import {
   message,
   TreeDataNode,
   Tooltip,
-  Form,
 } from "antd";
 import type { MenuProps } from "antd";
 import { useRequest } from "umi";
@@ -57,15 +56,17 @@ export default function All({
   const [open, setOpen] = useState(false);
   const currentFolder = useRef("root");
   const { confirm } = Modal;
-  const moveSource = useRef<{ id: string; type: "folder" | "chart" }>();
+  const moveSource = useRef<{ id: string; type: string }>();
   const [folderList, setFolderList] = useState<any[]>([]);
   const [selectFolder, setSelectFolder] = useState("");
-  const addModelRef = useRef<{open: (type: TableType) => void}>();
+  const addModelRef = useRef<{ open: (type: TableType) => void }>();
 
   const { loading, run, refresh } = useRequest(GetDataModelList, {
     defaultParams: [
       {
-        name: '1'
+        name: searchName,
+        folder: "",
+        type,
       },
     ],
     onSuccess: (res) => {
@@ -73,7 +74,7 @@ export default function All({
       setDataSource(result);
       // setFolderData(result?.folders || []);
       setTotal(result.length || 0);
-    }
+    },
   });
 
   // const { refresh: refreshFolderAll } = useRequest(GetAllFolders, {
@@ -106,7 +107,7 @@ export default function All({
     {
       title: (
         <span className="ant-breadcrumb-link">
-          <a>{type === TableType.BusinessTable ? '业务表' : '流程表'}</a>
+          <a>{type === TableType.BusinessTable ? "业务模型" : "流程模型"}</a>
         </span>
       ),
       index: 0,
@@ -121,17 +122,19 @@ export default function All({
     useState<BreadcrumbItem[]>(defultData);
   const breadcrumbDataRef = useRef<BreadcrumbItem[]>(breadcrumbData);
 
-  const getData = (page: number, pageSize: number, type?: string) => {
+  const getData = (page: number, pageSize: number) => {
     setCurrentPage(page);
     setPageSize(pageSize);
     run({
-      name: '1'
-    });
+      name: searchName,
+      folder: "",
+      type,
+    },);
   };
 
   const FolderIcon = function () {
     return (
-      <svg className="icon" aria-hidden="true">
+      <svg className="icon w-20px h-20px" aria-hidden="true">
         <use xlinkHref="#icon-weibiaoti-_huabanfuben"></use>
       </svg>
     );
@@ -157,23 +160,21 @@ export default function All({
   // 构建文件夹树
   const folderTreeData = useMemo((): TreeDataNode[] => {
     return [
-        folderList.map((item) => {
-          return {
-            ...item,
-            key: item.id,
-            title: (
-              <span>
-                {item.name}
-                {currentFolder.current === item.id ? (
-                  <span className="text-12px color-#999">(当前)</span>
-                ) : null}
-              </span>
-            ),
-            icon: <FolderIcon />,
-          };
-        },
-        root
-      ),
+      folderList.map((item) => {
+        return {
+          ...item,
+          key: item.id,
+          title: (
+            <span>
+              {item.name}
+              {currentFolder.current === item.id ? (
+                <span className="text-12px color-#999">(当前)</span>
+              ) : null}
+            </span>
+          ),
+          icon: <FolderIcon />,
+        };
+      }, root),
     ] as unknown as TreeDataNode[];
   }, [folderList, currentFolder.current]);
 
@@ -212,8 +213,7 @@ export default function All({
       label: <span className="ml-4px">添加模型</span>,
       // icon: <Icon icon="local:flow" width="22px" />,
       onClick: async () => {
-        // await createNew(GraphType.flowchart, currentFolder.current);
-        getData(1, pageSize);
+        addModelRef.current?.open(type);
       },
     },
   ];
@@ -315,16 +315,16 @@ export default function All({
       >
         <div className="flex justify-between items-center m-b-12px">
           <Breadcrumb items={breadcrumbData} />
-          <AddModel ref={addModelRef}/>
+          <AddModel ref={addModelRef} />
           <div className="right flex items-center gap-12px">
             <Button
               type="primary"
               icon={<PlusOutlined />}
               onClick={() => {
-                addModelRef.current?.open(type)
+                addModelRef.current?.open(type);
               }}
             >
-              新建项目
+              新建
             </Button>
             <Input
               placeholder="搜索文件"
@@ -520,7 +520,9 @@ export default function All({
                 </Row>
                 <div className="flex justify-end py-16px">
                   <Pagination
-                    showTotal={(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`}
+                    showTotal={(total, range) =>
+                      `${range[0]}-${range[1]} 共 ${total} 条`
+                    }
                     total={total}
                     current={currentPage}
                     pageSize={12}

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Card, Dropdown, Modal, Input, message } from "antd";
 import defaultImg from "@/assets/image/default.png"
-import { GetFile } from "@/api";
+import { GetFile, DeleteDataModel, SaveDataModel } from "@/api";
 
 export default function ProjectCard({
   record,
@@ -20,6 +20,9 @@ export default function ProjectCard({
   const handleToEdit = () => {
     const { origin, pathname } = window.location;
     const enterpriseCode = sessionStorage.getItem("enterpriseCode");
+    window.open(
+      `${origin}${pathname}#/detail/${record.id}?enterpriseCode=${enterpriseCode}`
+    );
   };
 
   const { confirm } = Modal;
@@ -30,7 +33,6 @@ export default function ProjectCard({
       GetFile({ fileId: record.coverImage }).then((res) => {
        const blob = new Blob([res], { type: "image/png" });
        const url = URL.createObjectURL(blob);
-       console.log(url)
        setCoverImg(url);
       });
     }
@@ -77,7 +79,12 @@ export default function ProjectCard({
                       />
                     ),
                     onOk: async () => {
-                      // todo 重命名
+                      await SaveDataModel({
+                        ...record,
+                        name
+                      });
+                      message.success('更新成功');
+                      onFresh();
                     },
                   });
                 },
@@ -98,10 +105,14 @@ export default function ProjectCard({
                 onClick: () => {
                   confirm({
                     title: "删除",
-                    content: "确定删除该图形？",
+                    content: "确定删除该模型？",
                     centered: true,
                     onOk: async () => {
-                      // todo
+                      await DeleteDataModel({
+                        id: record.id,
+                      });
+                      onDelete?.();
+                      message.success("删除成功");
                     },
                   });
                 },

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

@@ -12,7 +12,6 @@ import {
 } 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() {

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

@@ -1,9 +1,6 @@
-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 { ConfigProvider } from "antd";
 import React, { useMemo, useRef, useState } from "react";
-import { Icon } from "umi";
 import All from "./All";
 import Collect from "./Collect";
 import Template from "./Template";
@@ -13,64 +10,6 @@ export default () => {
   const currentFolder = useRef("root");
   const [updateKey, setUpdateKey] = useState(0);
 
-
-  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 handleChangeFolder = (id: string) => {
     currentFolder.current = id;
   };
@@ -85,20 +24,34 @@ export default () => {
         {
           path: "/all/business",
           name: "业务模型",
-          component: <All onChangeCurrentFolder={handleChangeFolder} updateKey={updateKey} type={TableType.BusinessTable} />
+          component: (
+            <All
+              onChangeCurrentFolder={handleChangeFolder}
+              updateKey={updateKey}
+              type={TableType.BusinessTable}
+              key="1"
+            />
+          ),
         },
         {
           path: "/all/flow",
           name: "流程模型",
-          component: <All onChangeCurrentFolder={handleChangeFolder} updateKey={updateKey} type={TableType.FlowTable} />
+          component: (
+            <All
+              onChangeCurrentFolder={handleChangeFolder}
+              updateKey={updateKey}
+              type={TableType.FlowTable}
+              key="2"
+            />
+          ),
         },
-      ]
+      ],
     },
     {
       path: "/recently",
       name: "模型市场",
       icon: <i className="iconfont icon-shijian" />,
-      component: <div></div>
+      component: <div></div>,
     },
     {
       path: "/template",
@@ -117,16 +70,16 @@ export default () => {
   const content = useMemo(() => {
     currentFolder.current = "root";
     let comp: React.ReactNode;
-    routes.forEach(item => {
+    routes.forEach((item) => {
       if (item.path === pathname) {
         comp = item.component;
       }
       if (item.children) {
-        item.children.forEach(child => {
+        item.children.forEach((child) => {
           if (child.path === pathname) {
             comp = child.component;
           }
-        })
+        });
       }
     });
     return comp;

package.json

@@ -58,6 +58,7 @@
     "ahooks": "^3.8.1",
     "antd": "^5.23.0",
     "axios": "^1.7.7",
+    "dayjs": "^1.11.13",
     "insert-css": "^2.0.0",
     "lodash-es": "^4.17.21",
     "react-draggable": "^4.4.6",

pnpm-lock.yaml

@@ -115,7 +115,7 @@ importers:
         version: 4.17.12
       '@uiw/react-codemirror':
         specifier: ^4.23.3
-        version: 4.23.3(@babel/runtime@7.25.6)(@codemirror/autocomplete@6.18.1)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1)(react-dom@18.3.1)(react@18.3.1)
+        version: 4.23.3(@babel/runtime@7.26.0)(@codemirror/autocomplete@6.18.1)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1)(react-dom@18.3.1)(react@18.3.1)
       '@unocss/cli':
         specifier: ^0.62.3
         version: 0.62.3
@@ -128,6 +128,9 @@ importers:
       axios:
         specifier: ^1.7.7
         version: 1.7.7
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.13
       insert-css:
         specifier: ^2.0.0
         version: 2.0.0
@@ -4582,7 +4585,7 @@ packages:
       '@codemirror/view': 6.34.1
     dev: false
 
-  /@uiw/react-codemirror@4.23.3(@babel/runtime@7.25.6)(@codemirror/autocomplete@6.18.1)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1)(react-dom@18.3.1)(react@18.3.1):
+  /@uiw/react-codemirror@4.23.3(@babel/runtime@7.26.0)(@codemirror/autocomplete@6.18.1)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-TBBLUbeqXmfQSfO+f3rPNOAb+QXbSm7KPB64FHQWLGg2WJNbpOhjLOWMyL+C4ZP3aSCNc2Y5aftEK1vp3wCKTA==}
     peerDependencies:
       '@babel/runtime': '>=7.11.0'
@@ -4593,7 +4596,7 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      '@babel/runtime': 7.25.6
+      '@babel/runtime': 7.26.0
       '@codemirror/commands': 6.6.2
       '@codemirror/state': 6.4.1
       '@codemirror/theme-one-dark': 6.1.2
@@ -7394,7 +7397,7 @@ packages:
     peerDependencies:
       redux: 3.x
     dependencies:
-      '@babel/runtime': 7.25.6
+      '@babel/runtime': 7.26.0
       flatten: 1.0.3
       global: 4.4.0
       invariant: 2.2.4
@@ -7444,7 +7447,7 @@ packages:
       react: 15.x || ^16.0.0-0
       react-dom: 15.x || ^16.0.0-0
     dependencies:
-      '@babel/runtime': 7.25.6
+      '@babel/runtime': 7.26.0
       '@types/isomorphic-fetch': 0.0.34
       '@types/react-router-dom': 4.3.5
       '@types/react-router-redux': 5.0.27
@@ -9183,7 +9186,7 @@ packages:
   /history@4.10.1:
     resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==}
     dependencies:
-      '@babel/runtime': 7.25.6
+      '@babel/runtime': 7.26.0
       loose-envify: 1.4.0
       resolve-pathname: 3.0.0
       tiny-invariant: 1.3.3
@@ -12160,9 +12163,9 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.25.6
+      '@babel/runtime': 7.26.0
       async-validator: 4.2.5
-      rc-util: 5.43.0(react-dom@18.3.1)(react@18.3.1)
+      rc-util: 5.44.3(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
@@ -12702,7 +12705,7 @@ packages:
       react: ^0.14.0 || ^15.0.0-0 || ^16.0.0-0
       redux: ^2.0.0 || ^3.0.0 || ^4.0.0-0
     dependencies:
-      '@babel/runtime': 7.25.6
+      '@babel/runtime': 7.26.0
       hoist-non-react-statics: 3.3.2
       invariant: 2.2.4
       loose-envify: 1.4.0