shalu-system-designer/apps/designer/src/components/FlowExtra.tsx

import React from "react";
import { Node } from "@antv/x6";
import { Tooltip } from "antd";
import linkConfig from "@/config/linkConfig";
import { CorrelationType } from "@/enum";
export default function FlowExtra({ node }: { node: Node }) {
  const { attrs } = node.getData();

  const enterpriseCode = sessionStorage.getItem("enterpriseCode");
  const token = localStorage.getItem("token_" + enterpriseCode);

  function objectToUrlParams(obj: Record<string, any>) {
    const params = new URLSearchParams();
    for (const [key, value] of Object.entries(obj)) {
      params.append(key, value);
    }
    return params.toString();
  }

  const linkTypeMap = {
    [CorrelationType.scene]: {
      name: "场景",
      url: linkConfig.scene,
      param: `#/${attrs?.linkValue?.value}`
    },
    [CorrelationType.flow]: {
      name: "流程",
      url: linkConfig.flow,
      param: `#/${attrs?.linkValue?.value}`
    },
    [CorrelationType.page]: {
      name: "页面",
      url: linkConfig.page,
      param: objectToUrlParams({
        token,
        pageId: attrs?.linkValue?.value
      })
    },
    [CorrelationType.table]: {
      name: "数据表",
      url: linkConfig.table,
      param: objectToUrlParams({
        id: attrs?.linkValue?.value,
        isSvg: true,
        type: 16
      })
    },
    [CorrelationType.view]: {
      name: "视图",
      url: linkConfig.view,
      param: objectToUrlParams({
        id: attrs?.linkValue?.value,
        isSvg: true,
        type: 16
      })
    },
  };

  const handleOpenLink = () => {
    const url = linkTypeMap[attrs.linkType as CorrelationType]?.url;
    const param = linkTypeMap[attrs.linkType as CorrelationType]?.param;
    if (!url) return;
    window.open(url + '?' + param, "_blank");
  }

  return (
    <div className="absolute w-50px h-30px bottom--20px right-0 text-14px">
      {attrs?.linkValue?.value && (
        <Tooltip
          title={`关联${linkTypeMap[attrs.linkType as CorrelationType].name}`}
        >
          <i className="iconfont icon-lianjie color-#239edd cursor-pointer text-16px absolute right-0px bottom-0px rotate-45deg" onClick={handleOpenLink}/>
        </Tooltip>
      )}
    </div>
  );
}