feat: 新增tootip 工具栏隐藏图标

apps/er-designer/.umirc.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   ],
   styles: [
     '//at.alicdn.com/t/c/font_4676747_4jkbw9dya3f.css',
-    '//at.alicdn.com/t/c/font_4767192_twj930g7m9m.css',
+    '//at.alicdn.com/t/c/font_4767192_5rinbe5e4f6.css',
   ],
   metas: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }
@@ -24,7 +24,7 @@ export default defineConfig({
     },
   },
   scripts: [
-    '//at.alicdn.com/t/c/font_4767192_w9at5kfn7o.js'
+    '//at.alicdn.com/t/c/font_4767192_5rinbe5e4f6.js'
   ],
   plugins: [
     require.resolve('@umijs/plugins/dist/unocss'),

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

@@ -4,6 +4,7 @@ import { Graph, Node } from "@antv/x6";
 import type { ColumnItem, TableItemType } from "@/type";
 import { DATA_TYPE_OPTIONS } from "@/constants";
 import { useSessionStorageState, useLocalStorageState } from "ahooks";
+import { Tooltip } from "antd";
 
 function TableNode({ node, graph }: { node: Node; graph: Graph }) {
   const { table, tableColumnList: columnsList } = node.getData<TableItemType>();
@@ -176,8 +177,10 @@ function TableNode({ node, graph }: { node: Node; graph: Graph }) {
           <span className="flex items-center truncate">
             <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})` : ""}
+              <Tooltip title={`${record.schemaName}${columnName ? `(${columnName})` : ""}`}>
+                {record.schemaName}
+                {columnName ? `(${columnName})` : ""}
+              </Tooltip>
             </span>
           </span>
           <span>
@@ -231,7 +234,9 @@ function TableNode({ node, graph }: { node: Node; graph: Graph }) {
           <span className="text-12px font-normal">
             {table.parentBusinessTableId && "[子]"}
           </span>
-          {table.schemaName}({tableName})
+          <Tooltip title={`table.schemaName(${tableName})`}>
+            {table.schemaName}({tableName})
+          </Tooltip>
         </div>
         {showEdit && !playModeEnable && (
           <div

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

@@ -13,7 +13,7 @@ import {
   Popover,
   Popconfirm,
 } from "antd";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import CustomColorPicker from "@/components/CustomColorPicker";
 import { ColumnItem as ColumnItemType, TableItemType } from "@/type";
 import { TABLE_TYPE_OPTIONS } from "@/constants";
@@ -31,6 +31,7 @@ import ColumnItem from "./ColumnItem";
 import LangInput from "@/components/LangInput";
 import LangInputTextarea from "@/components/LangInputTextarea";
 import { validateAliasName, validateTableCode } from "@/utils/validator";
+import { useLocalStorageState } from "ahooks";
 
 export default function TableItem({
   data,
@@ -52,6 +53,22 @@ export default function TableItem({
     setList(tableColumnList);
   }, [tableColumnList]);
 
+  // 隐藏默认字段
+  const [hideDefaultColumn, setHideDefaultColumn] = useLocalStorageState(
+    "er-hideDefaultColumn",
+    {
+      defaultValue: false,
+      listenStorageChange: true
+    }
+  );
+
+  const filterList = useMemo(() => {
+    if (hideDefaultColumn) {
+      return list.filter((item) => !item.isPreDefined);
+    }
+    return list;
+  }, [hideDefaultColumn, list]);
+
   const handleTableChange = (key: string, value: any) => {
     onChange({
       tableColumnList,
@@ -318,10 +335,10 @@ export default function TableItem({
               modifiers={[restrictToParentElement]}
             >
               <SortableContext
-                items={list.map((item) => item.id)}
+                items={filterList.map((item) => item.id)}
                 strategy={verticalListSortingStrategy}
               >
-                {list.map((column, index) => {
+                {filterList.map((column, index) => {
                   return (
                     <ColumnItem
                       key={column.id}

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

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from "react";
-import { Button, Tooltip, Divider, Dropdown } from "antd";
-import { DownOutlined } from "@ant-design/icons";
+import { Tooltip, Dropdown, DropDownProps } from "antd";
+import { CheckOutlined, DownOutlined } from "@ant-design/icons";
 import { useModel } from "umi";
 import TodoDrawer from "./TodoDrawer";
 import AICreator from "./AICreator";
+import { useFullscreen, useLocalStorageState } from "ahooks";
+
 export default function Toolbar() {
   const {
     addTable,
@@ -17,9 +19,10 @@ export default function Toolbar() {
     project,
     setProject,
     onSave,
-    onCreateByAi
+    onCreateByAi,
   } = useModel("erModel");
   const todoRef = React.useRef<{ open: () => void }>();
+  const [isFullscreen, { toggleFullscreen }] = useFullscreen(document.body);
   const scaleMenu = {
     style: {
       width: 200,
@@ -70,6 +73,89 @@ export default function Toolbar() {
     ],
   };
 
+  // 隐藏默认字段
+  const [hideDefaultColumn, setHideDefaultColumn] = useLocalStorageState(
+    "er-hideDefaultColumn",
+    {
+      defaultValue: false,
+      listenStorageChange: true
+    }
+  );
+
+  const layoutMenu: DropDownProps["menu"] = {
+    style: {
+      width: 120,
+    },
+    items: [
+      {
+        key: "1",
+        label: (
+          <span className="flex items-center">
+            <span className="inlineblock w-25px">
+              {project.setting.showMenu ? (
+                <CheckOutlined className="text-12px" />
+              ) : (
+                ""
+              )}
+            </span>
+            <span>菜单栏</span>
+          </span>
+        ),
+        onClick: () => {
+          setProject({
+            ...project,
+            setting: {
+              ...project.setting,
+              showMenu: !project.setting.showMenu,
+            },
+          });
+        },
+      },
+      {
+        key: "2",
+        label: (
+          <span className="flex items-center">
+            <span className="inlineblock w-25px">
+              {project.setting.showSidebar ? (
+                <CheckOutlined className="text-12px" />
+              ) : (
+                ""
+              )}
+            </span>
+            <span>侧边栏</span>
+          </span>
+        ),
+        onClick: () => {
+          setProject({
+            ...project,
+            setting: {
+              ...project.setting,
+              showSidebar: !project.setting.showSidebar,
+            },
+          });
+        },
+      },
+      {
+        key: "3",
+        type: "divider",
+      },
+      {
+        key: "4",
+        label: (
+          <span className="flex items-center">
+            <span className="inlineblock w-25px">
+              {isFullscreen && <CheckOutlined className="text-12px" />}
+            </span>
+            <span>全屏</span>
+          </span>
+        ),
+        onClick: () => {
+          toggleFullscreen();
+        },
+      },
+    ],
+  };
+
   const [scale, setScale] = useState(100);
 
   useEffect(() => {
@@ -103,6 +189,30 @@ export default function Toolbar() {
         <TodoDrawer ref={todoRef} />
       </div>
       <div className="flex items-center py-0px justify-center h-32px">
+        <div className="group">
+          <div className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200">
+            <Dropdown menu={layoutMenu} placement="bottomLeft">
+              <span className="text-14px leading-18px">
+                <i className="iconfont icon-layout-5-line text-20px text-#666" />
+                <DownOutlined className="text-10px ml-4px" />
+              </span>
+            </Dropdown>
+          </div>
+        </div>
+        <div className="group">
+          <div className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200">
+            <Tooltip
+              title={`${hideDefaultColumn ? "隐藏" : "显示"}默认字段`}
+            >
+              <i
+                className={`iconfont text-20px leading-24px ${!hideDefaultColumn ? "icon-view" : "icon-hide"}`}
+                onClick={() => {
+                  setHideDefaultColumn(!hideDefaultColumn);
+                }}
+              />
+            </Tooltip>
+          </div>
+        </div>
         <div className="group">
           <div className="flex items-center">
             <Tooltip title="撤销上一步操作">
@@ -176,15 +286,27 @@ export default function Toolbar() {
         <div className="group">
           <div className="flex items-center">
             <Tooltip title="保存模型">
-              <div className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200" onClick={onSave}>
-                <svg className="icon h-24px w-24px color-#666" aria-hidden="true">
+              <div
+                className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200"
+                onClick={onSave}
+              >
+                <svg
+                  className="icon h-24px w-24px color-#666"
+                  aria-hidden="true"
+                >
                   <use xlinkHref="#icon-baocun"></use>
                 </svg>
               </div>
             </Tooltip>
             <Tooltip title="待办项">
-              <div className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200" onClick={() => todoRef.current?.open()}>
-                <svg className="icon h-24px w-24px color-#666" aria-hidden="true">
+              <div
+                className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200"
+                onClick={() => todoRef.current?.open()}
+              >
+                <svg
+                  className="icon h-24px w-24px color-#666"
+                  aria-hidden="true"
+                >
                   <use xlinkHref="#icon-daiban"></use>
                 </svg>
               </div>
@@ -197,12 +319,17 @@ export default function Toolbar() {
         <div className="group">
           <div className="flex items-center">
             <Tooltip title="AI助手">
-              <AICreator 
-                trigger={<div className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200">
-                  <svg className="icon h-24px w-24px color-#666" aria-hidden="true">
-                    <use xlinkHref="#icon-AI1"></use>
-                  </svg>
-                </div>}
+              <AICreator
+                trigger={
+                  <div className="btn flex flex-col items-center cursor-pointer py-4px px-10px hover:bg-gray-200">
+                    <svg
+                      className="icon h-24px w-24px color-#666"
+                      aria-hidden="true"
+                    >
+                      <use xlinkHref="#icon-AI1"></use>
+                    </svg>
+                  </div>
+                }
                 onChange={onCreateByAi}
               />
             </Tooltip>
@@ -238,7 +365,7 @@ export default function Toolbar() {
             <Dropdown menu={scaleMenu}>
               <span className="text-14px leading-18px w-120px">
                 <span>{scale}%</span>
-                <DownOutlined className="text-12px ml-4px" />
+                <DownOutlined className="text-10px ml-4px" />
               </span>
             </Dropdown>
           </div>