fix: 修改首页，思维图添加节点属性

apps/designer/.umirc.ts

@@ -7,7 +7,7 @@ export default defineConfig({
     '/favicon.ico'
   ],
   styles: [
-    '//at.alicdn.com/t/c/font_4676747_rdn63brs09d.css'
+    '//at.alicdn.com/t/c/font_4676747_03msrsspji49.css'
   ],
   metas: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }

apps/designer/src/components/FlowExtra.tsx

@@ -21,11 +21,7 @@ export default function FlowExtra({ node }: { node: Node }) {
     [CorrelationType.scene]: {
       name: "场景",
       url: linkConfig.scene,
-      param: objectToUrlParams({
-        enterpriseCode,
-        token,
-        id: attrs?.linkValue?.value
-      })
+      param: `enterpriseCode=${enterpriseCode}#/${attrs?.linkValue?.value}`
     },
     [CorrelationType.flow]: {
       name: "流程",
@@ -63,7 +59,6 @@ export default function FlowExtra({ node }: { node: Node }) {
   };
 
   const handleOpenLink = () => {
-    console.log(attrs);
     const url = linkTypeMap[attrs.linkType as CorrelationType]?.url;
     const param = linkTypeMap[attrs.linkType as CorrelationType]?.param;
     if (!url) return;
@@ -71,8 +66,8 @@ export default function FlowExtra({ node }: { node: Node }) {
   }
 
   return (
-    <div className="absolute w-full h-full text-14px">
-      {attrs?.linkValue && (
+    <div className="absolute w-full h-full left-0 top-0 text-14px">
+      {attrs?.linkValue?.value && (
         <Tooltip
           title={`关联${linkTypeMap[attrs.linkType as CorrelationType].name}`}
         >

apps/designer/src/components/mindMap/Topic.tsx

@@ -15,6 +15,7 @@ import { selectTopic } from "@/utils/mindmapHander";
 import { Tooltip, Popover } from "antd";
 import LinkForm from "./LinkForm";
 import Text from "./Text";
+import FlowExtra from "../FlowExtra";
 const component = ({ node, graph }: { node: Node; graph: Graph }) => {
   const {
     fill,
@@ -218,7 +219,7 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
           style={{
             width: fixedWidth ? "100%" : "fit-content",
             opacity: opacity / 100,
-            border: `solid ${strokeWidth}px ${strokeColor}`,
+            border: `${stroke.type} ${strokeWidth}px ${strokeColor}`,
             background: fillContent,
             borderRadius: borderSize,
             padding: `${padding.y}px ${padding.x}px`,
@@ -226,6 +227,7 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
           onMouseOver={() => !collapsed && setShowCollapsePoint(true)}
           onMouseLeave={() => !collapsed && setShowCollapsePoint(false)}
         >
+          <FlowExtra node={node}/>
           {/* 扩展模块 */}
           {extraModules && (
             <div className="extra" ref={extraModuleRef}>

apps/designer/src/models/mindMapModel.ts

@@ -17,10 +17,9 @@ import { TopicType } from "@/enum";
 import { isEqual, cloneDeep } from "lodash-es";
 import { bindMindmapKeys } from "@/utils/fastKey";
 import { handleCreateCorrelationEdge } from "@/utils/mindmapHander";
-import { Dnd } from '@antv/x6-plugin-dnd';
+import { Dnd } from "@antv/x6-plugin-dnd";
 export default function mindMapModel() {
-  const [rightToobarActive, setRightToolbarActive] =
-    useState<string>();
+  const [rightToobarActive, setRightToolbarActive] = useState<string>();
   // 格式刷启用
   const [enableFormatBrush, setEnableFormatBrush] = useState(false);
   // 格式刷样式
@@ -33,22 +32,21 @@ export default function mindMapModel() {
   const [selectedCell, setSelectedCell] = useState<Cell[]>([]);
   const correlationEdgeRef = useRef<Edge>();
 
-  const [mindProjectInfo, setMindProjectInfo] = useState<MindMapProjectInfo>();
-    // useLocalStorageState<MindMapProjectInfo>("minMapProjectInfo", {
-    //   listenStorageChange: true,
-    //   // defaultValue: defaultProject,
-    //   serializer: (val) => {
-    //     return JSON.stringify(val);
-    //   },
-    //   deserializer: (val) => {
-    //     return JSON.parse(val);
-    //   }
-    // });
+  const [mindProjectInfo, setMindProjectInfo] =
+    useLocalStorageState<MindMapProjectInfo>("minMapProjectInfo", {
+      listenStorageChange: true,
+      // defaultValue: defaultProject,
+      serializer: (val) => {
+        return JSON.stringify(val);
+      },
+      deserializer: (val) => {
+        return JSON.parse(val);
+      },
+    });
 
   useEffect(() => {
-    localStorage.setItem('minMapProjectInfo', JSON.stringify(mindProjectInfo));
-  }, [mindProjectInfo])
-
+    localStorage.setItem("minMapProjectInfo", JSON.stringify(mindProjectInfo));
+  }, [mindProjectInfo]);
 
   if (!mindProjectInfo) {
     setMindProjectInfo(defaultProject);
@@ -65,11 +63,11 @@ export default function mindMapModel() {
       theme: mindProjectInfo?.theme,
       topics: mindProjectInfo?.topics,
     });
-    if(!flagRef.current) {
+    if (!flagRef.current) {
       flagRef.current = true;
       graph.centerContent();
     }
-    localStorage.setItem('minMapProjectInfo', JSON.stringify(mindProjectInfo))
+    localStorage.setItem("minMapProjectInfo", JSON.stringify(mindProjectInfo));
   }, [mindProjectInfo, graph]);
 
   const pageSettingRef = useRef<MindMapProjectInfo["pageSetting"]>();
@@ -79,7 +77,9 @@ export default function mindMapModel() {
       if (isEqual(pageSettingRef.current, mindProjectInfo?.pageSetting)) {
         return;
       }
-      pageSettingRef.current = cloneDeep(mindProjectInfo?.pageSetting) as MindMapProjectInfo["pageSetting"];
+      pageSettingRef.current = cloneDeep(
+        mindProjectInfo?.pageSetting
+      ) as MindMapProjectInfo["pageSetting"];
       const pageSetting = pageSettingRef.current;
       if (pageSetting?.fillType === "color") {
         graph.drawBackground({
@@ -114,7 +114,7 @@ export default function mindMapModel() {
 
   const getMindProject = () => {
     return mindProjectInfo;
-  }
+  };
 
   // 初始化脑图
   const initMindMap = (container: HTMLElement) => {
@@ -172,13 +172,15 @@ export default function mindMapModel() {
         },
       })
     );
-    instance.use(new History({
-      enabled: true,
-      // beforeAddCommand: (e, args) => {
-      //   // @ts-ignore
-      //   return !args.cell.isEdge()
-      // }
-    }));
+    instance.use(
+      new History({
+        enabled: true,
+        // beforeAddCommand: (e, args) => {
+        //   // @ts-ignore
+        //   return !args.cell.isEdge()
+        // },
+      })
+    );
     instance.on("history:change", () => {
       setCanRedo(instance.canRedo());
       setCanUndo(instance.canUndo());
@@ -198,7 +200,7 @@ export default function mindMapModel() {
       mindProjectInfo,
       setMindProjectInfo,
       setSelectedCell,
-      dndRef,
+      dndRef
     );
     // 绑定键盘
     bindMindmapKeys(instance, mindProjectInfo, setMindProjectInfo);
@@ -208,8 +210,8 @@ export default function mindMapModel() {
       setRightToolbarActive,
       correlationEdgeRef,
       setMindProjectInfo,
-      getMindProject
-    }
+      getMindProject,
+    };
 
     setGraph(instance);
   };
@@ -270,48 +272,53 @@ export default function mindMapModel() {
   };
 
   const setCorrelationEdgeInfo = (sourceNode?: Node) => {
-    graph && handleCreateCorrelationEdge(graph, correlationEdgeRef, sourceNode)
-  }
+    graph && handleCreateCorrelationEdge(graph, correlationEdgeRef, sourceNode);
+  };
 
   const handleAddCorrelation = (source: Cell, target: Cell) => {
-    const link = graph?.createEdge({
-      source: {
-        cell: source.id,
-        connectionPoint: "rect",
-        anchor: "center"
-      },
-      target: {
-        cell: target.id,
-        connectionPoint: "rect",
-        anchor: "center"
-      },
-      zIndex: 0,
-      connector: "smooth",
-      attrs: {
-        line: {
-          stroke: "#71cb2d",
-          strokeWidth: 2,
+    const link = graph
+      ?.createEdge({
+        source: {
+          cell: source.id,
+          connectionPoint: "rect",
+          anchor: "center",
         },
-      },
-      data: {
-        isLink: true
-      },
-      tools: ["vertices", "edge-editor", "button-remove"]
-    }).toJSON();
-    if(link) {
+        target: {
+          cell: target.id,
+          connectionPoint: "rect",
+          anchor: "center",
+        },
+        zIndex: 0,
+        connector: "smooth",
+        attrs: {
+          line: {
+            stroke: "#71cb2d",
+            strokeWidth: 2,
+          },
+        },
+        data: {
+          isLink: true,
+        },
+        tools: ["vertices", "edge-editor", "button-remove"],
+      })
+      .toJSON();
+    if (link) {
       source.setData({
-        links: [...(source.data?.links || []), link]
+        links: [...(source.data?.links || []), link],
       });
     }
-  }
+  };
 
   useEffect(() => {
-    if(graph) {
+    if (graph) {
       graph.on("node:click", (args) => {
-        if(correlationEdgeRef.current) {
-          handleAddCorrelation(correlationEdgeRef.current.getSourceCell()!, args.node);
+        if (correlationEdgeRef.current) {
+          handleAddCorrelation(
+            correlationEdgeRef.current.getSourceCell()!,
+            args.node
+          );
         }
-      })
+      });
       graph.on("blank:click", () => {
         setTimeout(() => {
           setCorrelationEdgeInfo(undefined);

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

@@ -23,6 +23,7 @@ import {
   handleLock,
   handleUnLock,
   handleDelete,
+  createNew
 } from "@/utils";
 
 InsertCss(`
@@ -43,8 +44,6 @@ export default function MenuBar() {
   } = useModel("appModel");
   const { graph, canRedo, canUndo, selectedCell } = useModel("graphModel");
   const inputRef = useRef<InputRef>(null);
-  // 创建新作品 todo
-  const createNew = (type: string) => {};
 
   // 重命名
   const handleRename = () => {
@@ -119,7 +118,7 @@ export default function MenuBar() {
               label: "思维导图",
               icon: <Icon width="20" className="mt-5px" icon="local:mind" />,
               onClick: () => {
-                createNew("mind");
+                createNew("mindmap");
               },
             },
             {

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

@@ -1,23 +1,31 @@
 import {
-  ProductOutlined,
-  ClockCircleOutlined,
   MenuOutlined,
   AppstoreOutlined,
+  PlusOutlined,
 } from "@ant-design/icons";
-import type { ProSettings } from "@ant-design/pro-components";
 import {
   PageContainer,
   ProCard,
   ProConfigProvider,
-  ProLayout,
-  AppListProps,
+  ProTable
 } from "@ant-design/pro-components";
 import { css } from "@emotion/css";
-import { Space, Input, Button, Row, Col, Card, ConfigProvider, Divider } from "antd";
+import {
+  Space,
+  Input,
+  Button,
+  Row,
+  Col,
+  Card,
+  ConfigProvider,
+  Divider,
+  Popover,
+} from "antd";
 import React, { useState } from "react";
-import { history } from 'umi';
+import { history } from "umi";
 import logo from "@/assets/logo.png";
 import { Icon } from "umi";
+import { createNew } from "@/utils";
 
 const MenuCard = () => {
   return (
@@ -43,16 +51,17 @@ const basicGraph = [
     title: "流程图",
     subtitle: "图形化表单方式",
     color: "#dfecff",
-    icon: <Icon icon="local:flow"/>,
-    path: "/flow",
+    icon: <Icon icon="local:flow" />,
+    onClick: () => createNew("flow"),
   },
   {
     id: "2",
     title: "思维导图",
     subtitle: "结构化表单方式",
     color: "#dff4ea",
-    icon: <Icon icon="local:mind"/>,
+    icon: <Icon icon="local:mind" />,
     path: "/mindmap",
+    onClick: () => createNew("flow"),
   },
 ];
 
@@ -60,38 +69,44 @@ const appList = [
   {
     id: "1",
     title: "UML",
-    icon: <Icon icon="local:uml"/>,
+    icon: <Icon icon="local:uml" />,
+    onClick: () => createNew("uml"),
   },
   {
     id: "2",
     title: "E-R图",
-    icon: <Icon icon="local:er"/>,
+    icon: <Icon icon="local:er" />,
+    onClick: () => createNew("er"),
   },
   {
     id: "3",
     title: "泳道图",
-    icon: <Icon icon="local:swimlane"/>,
+    icon: <Icon icon="local:swimlane" />,
+    onClick: () => createNew("swimlane"),
   },
   {
     id: "4",
     title: "BPMN",
-    icon: <Icon icon="local:bpmn"/>,
+    icon: <Icon icon="local:bpmn" />,
+    onClick: () => createNew("bpmn"),
   },
   {
     id: "5",
     title: "韦恩图",
-    icon: <Icon icon="local:we"/>,
+    icon: <Icon icon="local:we" />,
+    onClick: () => createNew("we"),
   },
   {
     id: "6",
     title: "网络拓扑图",
-    icon: <Icon icon="local:net"/>,
+    icon: <Icon icon="local:net" />,
+    onClick: () => createNew("net"),
   },
 ];
 
 const handleMenuClick = (item: any) => {
   console.log("click", item);
-  history.push(item.path);
+  item?.onClick?.();
 };
 
 const renderBasicItem = (props: {
@@ -120,9 +135,7 @@ const renderBasicItem = (props: {
       `}
       onClick={() => handleMenuClick(props)}
     >
-      <span className="w-32px h-33px">
-        {props.icon}
-      </span>
+      <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>
@@ -131,7 +144,11 @@ const renderBasicItem = (props: {
   );
 };
 
-const renderProItem = (props: { id: string; title: string; icon: React.ReactNode }) => {
+const renderProItem = (props: {
+  id: string;
+  title: string;
+  icon: React.ReactNode;
+}) => {
   return (
     <div
       key={props.id}
@@ -144,7 +161,7 @@ const renderProItem = (props: { id: string; title: string; icon: React.ReactNode
   );
 };
 
-const renderAppList = (_props: AppListProps) => {
+const RenderAppList = () => {
   return (
     <div className="w-460px">
       <div className="color-#6c7d8f text-xs">基础图形</div>
@@ -156,21 +173,11 @@ const renderAppList = (_props: AppListProps) => {
 };
 
 export default () => {
-  const [settings, setSetting] = useState<Partial<ProSettings> | undefined>({
-    fixSiderbar: false,
-    layout: "mix",
-    splitMenus: true,
-  });
-
-  const [pathname, setPathname] = useState("/");
-  if (typeof document === "undefined") {
-    return <div />;
-  }
-
+  const [display, setDisplay] = useState<"card" | "list">("card");
   const handleToEdit = () => {
-    history.push('/flow')
-  }
-  
+    history.push("/flow");
+  };
+
   return (
     <div
       id="test-pro-layout"
@@ -185,107 +192,37 @@ export default () => {
             return document.getElementById("test-pro-layout") || document.body;
           }}
         >
-          <ProLayout
-            prefixCls="shalu"
-            logo={logo}
-            title="系统设计"
-            bgLayoutImgList={[
-              {
-                src: "https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png",
-                left: 85,
-                bottom: 100,
-                height: "303px",
-              },
-              {
-                src: "https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png",
-                bottom: -68,
-                right: -45,
-                height: "303px",
-              },
-              {
-                src: "https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png",
-                bottom: 0,
-                left: 0,
-                width: "331px",
-              },
-            ]}
-            route={{
-              path: "/",
-              routes: [
-                {
-                  path: "/welcome",
-                  name: "最近",
-                  icon: <ClockCircleOutlined />,
-                },
-                {
-                  path: "/flow",
-                  name: "模版",
-                  icon: <ProductOutlined />,
-                },
-              ],
-            }}
-            appList={[
-              {
-                icon: "",
-                title: "应用占位",
-              },
-            ]}
-            appListRender={renderAppList}
-            location={{
-              pathname,
-            }}
-            token={{
-              header: {
-                colorBgMenuItemSelected: "rgba(0,0,0,0.04)",
-              },
-            }}
-            siderMenuType="group"
-            menu={{
-              collapsedShowGroupTitle: true,
-            }}
-            actionsRender={(props) => {
-              if (props.isMobile) return [];
-              if (typeof window === "undefined") return [];
-              return [
-              ];
-            }}
-            headerTitleRender={(logo, title, _) => {
-              const defaultDom = (
-                <a>
-                  {logo}
-                  {title}
-                </a>
-              );
-              if (typeof window === "undefined") return defaultDom;
-              if (document.body.clientWidth < 1400) {
-                return defaultDom;
-              }
-              if (_.isMobile) return defaultDom;
-              return (
-                <>
-                  {defaultDom}
-                  <MenuCard />
-                </>
-              );
-            }}
-            menuItemRender={(item, dom) => (
-              <div
+          <PageContainer
+            extra={[
+              <Popover key="1" placement="left" content={<RenderAppList />}>
+                <Button
+                  type="primary"
+                  onClick={() => {}}
+                  icon={<PlusOutlined />}
+                >
+                  新建
+                </Button>
+              </Popover>,
+              <Button
+                key="2"
                 onClick={() => {
-                  setPathname(item.path || "/welcome");
+                  setDisplay(display === "card" ? "list" : "card");
                 }}
-              >
-                {dom}
-              </div>
-            )}
-            {...settings}
+                icon={
+                  display === "card" ? <MenuOutlined /> : <AppstoreOutlined />
+                }
+              />,
+            ]}
+            title={
+              <span>
+                <img className="w-24px h-24px mr-8px" src={logo} />
+                系统设计
+              </span>
+            }
+            footer={[]}
+            header={undefined}
           >
-            <PageContainer
-              extra={[
-                <Button key="1" onClick={() => {}} icon={false ? <MenuOutlined/> : <AppstoreOutlined/>}/>,
-              ]}
-              subTitle="流程设计器"
-              footer={[]}
-            >
+            {display === "card" ? (
               <ProCard
                 style={{
                   height: "calc(100vh - 140px)",
@@ -293,15 +230,23 @@ export default () => {
                 }}
               >
                 <Row gutter={[8, 16]}>
-                  {new Array(10).fill(0).map((item) => {
+                  {new Array(10).fill(0).map((item, index) => {
                     return (
-                      <Col xs={8} sm={8} md={6} lg={6} xl={4} xxl={3}>
+                      <Col
+                        xs={8}
+                        sm={8}
+                        md={6}
+                        lg={6}
+                        xl={4}
+                        xxl={3}
+                        key={index}
+                      >
                         <Card
                           hoverable
                           bordered
                           cover={
                             <img
-                              style={{height: 200, objectFit: 'cover'}}
+                              style={{ height: 200, objectFit: "cover" }}
                               alt="example"
                               src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                             />
@@ -309,11 +254,7 @@ export default () => {
                           onClick={() => handleToEdit()}
                         >
                           <Card.Meta
-                            title={
-                              <>
-                                xx流程图
-                              </>
-                            }
+                            title={<>xx流程图</>}
                             description="更新于：2024.09.06"
                           />
                         </Card>
@@ -322,8 +263,39 @@ export default () => {
                   })}
                 </Row>
               </ProCard>
-            </PageContainer>
-          </ProLayout>
+            ) : <ProTable
+              columns={[
+                {
+                  title: "名称",
+                  dataIndex: "name"
+                },
+                {
+                  title: "类型",
+                  dataIndex: "type"
+                },
+                {
+                  title: "修改时间",
+                  dataIndex: "updateTime",
+                  sorter: (a, b) => a.updateTime - b.updateTime,
+                },
+              ]}
+              request={(params, sorter, filter) => {
+                // 表单搜索项会从 params 传入，传递给后端接口。
+                console.log(params, sorter, filter);
+                return Promise.resolve({
+                  data: new Array(10).fill({
+                    id: 1,
+                    name: "xxx流程图",
+                    type: '流程图',
+                    updateTime: '2024-09-06 14:00:00'
+                  }),
+                  success: true,
+                });
+              }}
+              rowKey={'id'}
+              search={false}
+            />}
+          </PageContainer>
         </ConfigProvider>
       </ProConfigProvider>
     </div>

apps/designer/src/pages/mindmap/components/Config/NodeStyle.tsx

@@ -381,7 +381,6 @@ export default function GraphStyle() {
               { label: "实线", value: "solid" },
               { label: "虚线", value: "dashed" },
               { label: "点线", value: "dotted" },
-              { label: "点划线", value: "dashdot" },
             ]}
             disabled={!formModel.isStroke}
             value={formModel.stroke.type}

apps/designer/src/pages/mindmap/components/Config/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import { useModel } from "umi";
 import { Tabs } from "antd";
 import InsertCss from "insert-css"
@@ -10,6 +10,7 @@ import Theme from "./Theme";
 import TagConfig from "./TagConfig";
 import IconConfig from "./IconConfig";
 import Remark from "./Remark";
+import NodeAttrs from "@/components/NodeAttrs";
 
 InsertCss(`
   .shalu-tabs-nav {
@@ -26,6 +27,18 @@ export default function index() {
       setActiveKey("1");
     }
   }, [selectedCell]);
+
+  const firstNode = useMemo(() => {
+    return selectedCell.find(cell => cell.isNode());
+  }, [selectedCell]);
+
+  // 设置节点属性
+  const handleSetNodeAttr = (attrs: any) => {
+    firstNode?.setData({
+      attrs
+    });
+  }
+
   return (
     <div className="relative">
       <div className="absolute w-16px h-16px right-10px top-10px cursor-pointer z-99" onClick={() => rightToolbarActive("")}>
@@ -52,6 +65,20 @@ export default function index() {
           />
         </>
       )}
+      {/* 节点属性 */}
+      {rightToobarActive === "attrs" && (
+        <>
+          <Tabs
+            items={[
+              {
+                key: "1",
+                label: "节点属性",
+                children: <NodeAttrs cell={firstNode} onChange={handleSetNodeAttr} />,
+              },
+            ]}
+          />
+        </>
+      )}
       {/* 结构 */}
       {
         rightToobarActive === "structure" && (

apps/designer/src/pages/mindmap/components/HeaderToolbar/index.tsx

@@ -6,6 +6,7 @@ import { useModel, Icon } from "umi";
 import { addTopic } from "../../mindMap";
 import { TopicType } from "@/enum";
 import { selectTopic, addBorder, addSummary } from "@/utils/mindmapHander";
+import { createNew } from "@/utils";
 
 export default function index() {
   const {
@@ -38,9 +39,6 @@ export default function index() {
       name: title,
     })
   }
-
-  // 创建新作品 todo
-  const createNew = (type: string) => {};
   // 预览 todo
   const handlePreview = () => {};
 
@@ -105,7 +103,7 @@ export default function index() {
           label: "思维导图",
           icon: <Icon width="20" className="mt-5px" icon="local:mind" />,
           onClick: () => {
-            createNew("mind");
+            createNew("mindmap");
           },
         },
         {
@@ -142,12 +140,12 @@ export default function index() {
         },
       ],
     },
-    {
-      key: "2",
-      label: "预览",
-      icon: <i className="w-20px iconfont icon-yulan" />,
-      onClick: handlePreview,
-    },
+    // {
+    //   key: "2",
+    //   label: "预览",
+    //   icon: <i className="w-20px iconfont icon-yulan" />,
+    //   onClick: handlePreview,
+    // },
     {
       key: "3",
       label: (

apps/designer/src/pages/mindmap/components/RightToolbar/index.tsx

@@ -23,11 +23,19 @@ export default function index() {
       <Tooltip placement="bottom" title="样式">
         <Button
           type="text"
-          icon={<SwapOutlined />}
+          icon={<i className="iconfont icon-yangshi" />}
           className={rightToobarActive === "style" ? "active" : ""}
           onClick={() => rightToolbarActive("style")}
         />
       </Tooltip>
+      <Tooltip placement="bottom" title="属性">
+        <Button
+          type="text"
+          icon={<i className="iconfont icon-shuxing-shouqi" />}
+          className={rightToobarActive === "attrs" ? "active" : ""}
+          onClick={() => rightToolbarActive("attrs")}
+        />
+      </Tooltip>
       <Tooltip placement="bottom" title="结构">
         <Button
           type="text"

apps/designer/src/utils/hander.tsx

@@ -9,6 +9,7 @@ import { set, cloneDeep, get } from "lodash-es";
 import { defaultData } from "@/config/data";
 import codeBlock from "@/components/basic/CodeBlock";
 import { ConnectorType } from "@/enum";
+import { history } from 'umi'
 
 /**
  * 右键菜单处理方法
@@ -853,3 +854,15 @@ export const handleSetEdgeStyle = (edge: Cell, style: ConnectorType, jumpover: b
     }
   }
 }
+
+/**
+ * 创建新的图形
+ */
+export const createNew = (type: string) => {
+  // todo创建图形
+  if(type === "mindmap") {
+    window.open("/mindmap?id=1111")
+  } else {
+    window.open("/flow?id=2222")
+  }
+};