perf: 优化默认字段展示，优化画布抖动问题

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

@@ -7,7 +7,7 @@ import { Keyboard } from "@antv/x6-plugin-keyboard";
 import { Export } from "@antv/x6-plugin-export";
 import { Selection } from "@antv/x6-plugin-selection";
 import { SaveDataModel, UploadFile } from "@/api";
-import { useFullscreen, useSessionStorageState } from "ahooks";
+import { useFullscreen, useSessionStorageState, useLocalStorageState } from "ahooks";
 import { createTable } from "@/utils";
 import dayjs from "dayjs";
 import { getClassRules, base64ToFile, uuid } from "@repo/utils";
@@ -151,6 +151,22 @@ export default function erModel() {
     graphRef.current && render(graphRef.current, project);
   }, [project.setting.showRelation]);
 
+  const [hideDefaultColumn] = useLocalStorageState(
+    "er-hideDefaultColumn",
+    {
+      defaultValue: false,
+      listenStorageChange: true
+    }
+  );
+
+  useEffect(() => {
+    if(graph) {
+      requestAnimationFrame(() => {
+        render(graph, project);
+      });
+    }
+  }, [hideDefaultColumn, graph]);
+
   /**
    * 初始化画布
    * @param container

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

@@ -221,57 +221,56 @@ export const render = (graph: Graph, project: ProjectInfo) => {
     }
   });
   relations.forEach((relation) => {
-    if (!graph.getCellById(relation.id)) {
+    const relationEdge = graph.getCellById(relation.id);
+
+    if (!relationEdge) {
       renderRelationEdge(relation);
-    } else {
-      const relationEdge = graph.getCellById(relation.id);
-      if (relationEdge.isEdge()) {
-        if (project.setting.showRelation) {
-          // 更新标签
-          relationEdge.setLabelAt(0, {
-            attrs: {
-              txt: {
-                text:
-                  relation.relationType === RelationType.OneToOne ||
-                  relation.relationType === RelationType.OneToMany
-                    ? "1"
-                    : "n",
-              },
-              bg: {
-                fill: relation.style?.color || "#333",
-              }
-            },
-            position: {
-              distance: 25,
+    } else if(relationEdge.isEdge()) {
+      if (project.setting.showRelation) {
+        // 更新标签
+        relationEdge.setLabelAt(0, {
+          attrs: {
+            txt: {
+              text:
+                relation.relationType === RelationType.OneToOne ||
+                relation.relationType === RelationType.OneToMany
+                  ? "1"
+                  : "n",
             },
-          });
-          relationEdge.setLabelAt(1, {
-            attrs: {
-              txt: {
-                text:
-                  relation.relationType === RelationType.OneToMany
-                    ? "n"
-                    : "1",
-              },
-              bg: {
-                fill: relation.style?.color || "#333",
-              }
-            },
-            position: {
-              distance: -25,
+            bg: {
+              fill: relation.style?.color || "#333",
+            }
+          },
+          position: {
+            distance: 25,
+          },
+        });
+        relationEdge.setLabelAt(1, {
+          attrs: {
+            txt: {
+              text:
+                relation.relationType === RelationType.OneToMany
+                  ? "n"
+                  : "1",
             },
-          });
-        } else {
-          relationEdge.setLabels([]);
-        }
-        relationEdge.setAttrs({
-          line: {
-            stroke: relation.style?.color || "#333",
-            strokeWidth: relation.style?.width || 1,
-            strokeDasharray: dasharrayMap[relation.style?.lineType as RelationLineType || RelationLineType.Solid]
+            bg: {
+              fill: relation.style?.color || "#333",
+            }
+          },
+          position: {
+            distance: -25,
           },
         });
+      } else {
+        relationEdge.setLabels([]);
       }
+      relationEdge.setAttrs({
+        line: {
+          stroke: relation.style?.color || "#333",
+          strokeWidth: relation.style?.width || 1,
+          strokeDasharray: dasharrayMap[relation.style?.lineType as RelationLineType || RelationLineType.Solid]
+        },
+      });
     }
   });
 };

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

@@ -24,7 +24,7 @@ export default function ER(props: {
     );
   }, []);
   return (
-    <div className="w-full h-full relative">
+    <div className="w-full h-full relative overflow-hidden">
       <div className="w-full h-full" ref={contianerRef} />
       {props.showNavigator && <Navigator key="detail"/>}
       {props.isFullScreen && (

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

@@ -16,11 +16,11 @@ import { DownOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons";
 import TableEdit from "@/components/TableEdit";
 import ER from "./components/ER";
 import AddTable from "./components/AddTable";
-import { useModel, history, useRequest, useParams } from "umi";
+import { useModel, useRequest, useParams } from "umi";
 import { GetDataModelDetail } from "@/api";
 import NoData from "@/assets/no-data.png";
 import { ColumnItem, ProjectInfo, TableItemType } from "@/type";
-import { useFullscreen } from "ahooks";
+import { useFullscreen, useLocalStorageState } from "ahooks";
 import AddModel from "@/components/AddModel";
 import insertCss from "insert-css";
 import LangInput from "@/components/LangInput";
@@ -94,6 +94,14 @@ export default function index() {
     },
   });
 
+  const [hideDefaultColumn, setHideDefaultColumn] = useLocalStorageState(
+    "er-hideDefaultColumn",
+    {
+      defaultValue: false,
+      listenStorageChange: true
+    }
+  );
+
   useEffect(() => {
     if (params?.id) {
       run({ id: params.id });
@@ -388,6 +396,12 @@ export default function index() {
                 {active === 0 ? (
                   <>
                     {/* <Input placeholder="搜索" suffix={<SearchOutlined />} /> */}
+                    <Button
+                      type={!hideDefaultColumn ? "primary" : "default"}
+                      onClick={() => setHideDefaultColumn(!hideDefaultColumn)}
+                    >
+                      默认字段
+                    </Button>
                     <Button
                       type={showNavigator ? "primary" : "default"}
                       onClick={() => setShowNavigator(!showNavigator)}

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

@@ -157,7 +157,7 @@ const App: React.FC = () => {
             </Sider>
           )}
           <Layout>
-            <Content>
+            <Content className="overflow-hidden">
               <div id="graph-container" ref={containerRef}></div>
               <Navigator key="editor" />
               {playModeEnable && (