fix: 修改代办联动

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

@@ -8,7 +8,7 @@ export default function index() {
       title="页面不存在"
       subTitle="抱歉，您访问的页面不存在。"
       extra={
-        <a href="/">
+        <a href="/#/">
           返回首页
         </a>
       }

apps/er-designer/src/components/TableNode.tsx

@@ -66,13 +66,11 @@ function TableNode({ node, graph }: { node: Node; graph: Graph }) {
     }
   }, []);
 
-  // 连接桩，1用于开始连接拖拽，2用于关系连线连接
-  useEffect(() => {
+  const renderPort = () => {
     const ports = node.getPorts();
     ports?.forEach((item) => {
       if (!tableColumnList.find((column) => item.id?.includes(column.id))) {
         node.removePort(item);
-        console.log("removePort", item);
       }
     });
 
@@ -82,15 +80,15 @@ function TableNode({ node, graph }: { node: Node; graph: Graph }) {
           id: item.id + "_port1",
           group: "columnPort",
           args: {
-            y: 44 + 16 + index * 27,
+            y: 47 + 12 + index * 28,
           },
           attrs: {
             circle: {
               r: 4,
               magnet: true,
               stroke: "#31d0c6",
-              strokeWidth: 2,
-              fill: "#fff",
+              strokeWidth: 0,
+              fill: "rgba(255,255,255,0)",
             },
           },
           zIndex: 5,
@@ -100,12 +98,12 @@ function TableNode({ node, graph }: { node: Node; graph: Graph }) {
           group: "columnPort",
           args: {
             x: 0,
-            y: 42 + index * 27,
+            y: 43 + index * 28,
           },
           attrs: {
             rect: {
               magnet: true,
-              fill: "rgba(255,255,255,0)",
+              fill: "rgba(255,255,255, 0)",
               strokeWidth: 0,
               width: node.size().width,
               height: 27,
@@ -115,8 +113,14 @@ function TableNode({ node, graph }: { node: Node; graph: Graph }) {
         });
       }
     });
+  };
+
+  // 连接桩，1用于开始连接拖拽，2用于关系连线连接
+  useEffect(() => {
+    renderPort();
   }, [tableColumnList]);
 
+
   // 触发添加关系操作
   // 字段位置鼠标抬起，判断有没有开始连线操作
   const handleColumnMouseUp = (record: ColumnItem) => {
@@ -153,12 +157,12 @@ function TableNode({ node, graph }: { node: Node; graph: Graph }) {
     )?.value;
     return (
       <div
-        className="w-full flex py-4px px-8px"
+        className="w-full h-28px flex px-8px leading-28px overflow-hidden"
         onMouseUp={() => handleColumnMouseUp(record)}
       >
         <span className="flex-1 truncate flex items-center justify-between">
           <span className="flex items-center truncate">
-            <span className=" w-6px h-6px rounded-full mr-4px shrink-0 inline-block cursor-pointer" />
+            <span className=" w-8px h-8px rounded-full mr-4px shrink-0 inline-block bg-#fff border-solid border-2px border-#31d0c6" />
             <span className="flex-1 truncate">
               {record.schemaName}
               {columnName ? `(${columnName})` : ""}

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

@@ -610,6 +610,12 @@ export default function erModel() {
         canAdd: false,
       };
     }
+    if ( sourceColumn.tableId === targetColumn.tableId) {
+      return {
+        relations: project.relations,
+        canAdd: false,
+      };
+    }
 
     return {
       relations: [

apps/er-designer/src/models/renderer.ts

@@ -190,7 +190,7 @@ export const render = (graph: Graph, project: ProjectInfo) => {
     } else {
       const cell = graph.getCellById(tableItem.table.id);
       if (cell?.isNode()) {
-        cell.setSize(project.setting.tableWidth, cell.size().height);
+        cell.size(project.setting.tableWidth, cell.size().height);
         cell.setPosition(tableItem.table.style?.x, tableItem.table.style?.y);
         cell.setData(tableItem);
       }

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

@@ -8,7 +8,7 @@ export default function index() {
       title="页面不存在"
       subTitle="抱歉，您访问的页面不存在。"
       extra={
-        <a href="/er">
+        <a href="/#/">
           返回首页
         </a>
       }

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

@@ -75,6 +75,18 @@ export default function Menu() {
     graph?.zoomTo(value);
   };
 
+  const handleExportImage = () => {
+    if (!graph) return;
+
+    graph.exportPNG("", {
+      quality: 1,
+      copyStyles: false,
+      stylesheet: `
+      
+      `
+    });
+  };
+
   const menuData: {
     key: string;
     label: string;
@@ -115,7 +127,7 @@ export default function Menu() {
         {
           key: "1-7",
           label: "导出为图片",
-          onClick: () => graph && graph?.exportPNG(),
+          onClick: () => handleExportImage(),
         },
       ],
     },
@@ -384,7 +396,7 @@ export default function Menu() {
             return (
               <div
                 key={index}
-                className="flex items-center leading-32px odd:bg-gray-100 p-x-8px"
+                className="flex items-center leading-48px odd:bg-gray-100 p-x-8px"
               >
                 <div className="flex-1 font-bold text-16px">{item.key}</div>
                 <div className="flex-1 text-right color-#666">{item.label}</div>

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { Button, Modal, Input } from "antd";
-import { SearchOutlined } from "@ant-design/icons";
+import { Button, Modal, Input, Dropdown } from "antd";
+import { DownOutlined, ImportOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons";
 import TableItem from "./TableItem";
 import { useModel } from "umi";
 import noData from "@/assets/no-data.png";
@@ -50,10 +50,12 @@ export default function TablePanel() {
     >
       <div className="search-box flex gap-4px mb-12px">
         <Input placeholder="输入关键字搜索" suffix={<SearchOutlined />} />
-        <Button type="primary" onClick={() => addTable()}>
-          添加表
-        </Button>
-        <Button type="primary">导入表</Button>
+        <Dropdown menu={{items: [
+          {key: 'add', label: '新建表', icon: <PlusOutlined />, onClick: () => addTable()},
+          {key: 'import', label: '导入表', icon: <ImportOutlined />}
+        ]}}>
+          <Button type="primary">添加表<DownOutlined/></Button>
+        </Dropdown>
       </div>
       {project.tables.map((item) => {
         return (

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

@@ -1,4 +1,4 @@
-import React, { useImperativeHandle, forwardRef } from "react";
+import React, { useImperativeHandle, forwardRef, useState, useEffect } from "react";
 import { DownOutlined, PlusOutlined, DeleteOutlined } from "@ant-design/icons";
 import type { MenuProps } from "antd";
 import {
@@ -22,6 +22,12 @@ const TodoDrawer = forwardRef((props: {}, ref) => {
   const { project, setProject } = useModel("erModel");
   const [activeKey, setActiveKey] = React.useState("");
 
+  const [todoList, setTodoList] = useState<TodoItem[]>(project.todos);
+
+  useEffect(() => {
+    setTodoList(project.todos);
+  }, [project.todos]);
+
   useImperativeHandle(ref, () => ({
     open: () => setOpen(true),
     close: () => setOpen(false),
@@ -62,11 +68,12 @@ const TodoDrawer = forwardRef((props: {}, ref) => {
   };
 
   const handleChange = (index: number, key: string, value: any) => {
-    const newTodos = [...project.todos];
+    const newTodos = [...todoList];
     newTodos[index] = {
       ...newTodos[index],
       [key]: value,
     };
+    setTodoList(newTodos);
     setProject(
       {
         ...project,
@@ -83,7 +90,7 @@ const TodoDrawer = forwardRef((props: {}, ref) => {
       {
         ...project,
         todos: [
-          ...project.todos,
+          ...todoList,
           {
             id: uuid(),
             dataModelId: project.id,
@@ -101,7 +108,7 @@ const TodoDrawer = forwardRef((props: {}, ref) => {
   };
 
   const handleDelete = (index: number) => {
-    const newTodos = [...project.todos];
+    const newTodos = [...todoList];
     newTodos.splice(index, 1);
     setProject(
       {
@@ -133,7 +140,7 @@ const TodoDrawer = forwardRef((props: {}, ref) => {
           新建待办
         </Button>
       </div>
-      {project.todos.map((todo: TodoItem, index: number) => (
+      {todoList.map((todo: TodoItem, index: number) => (
         <div
           className="todo-item flex border-b-1 border-b-solid border-#eee p-b-12px m-b-12px"
           key={todo.id}