feat(ui): workflow designer minimap

ui/package-lock.json

@@ -14,6 +14,7 @@
         "@codemirror/legacy-modes": "^6.5.1",
         "@flowgram.ai/document": "^0.3.2",
         "@flowgram.ai/fixed-layout-editor": "^0.3.2",
+        "@flowgram.ai/minimap-plugin": "^0.3.2",
         "@tabler/icons-react": "^3.34.1",
         "@uiw/codemirror-extensions-basic-setup": "^4.24.2",
         "@uiw/codemirror-theme-vscode": "^4.24.2",
@@ -3183,6 +3184,25 @@
         "styled-components": ">=4"
       }
     },
+    "node_modules/@flowgram.ai/minimap-plugin": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/@flowgram.ai/minimap-plugin/-/minimap-plugin-0.3.2.tgz",
+      "integrity": "sha512-p3MH1sbMt6QJuBrcbDIOdZrEH7T//0oA2Yv7htdCmkqkkTyvfa+X34ZwzrkJcfWcL/ExJWtAsGDY9Ocz0XX9hg==",
+      "dependencies": {
+        "@flowgram.ai/core": "0.3.2",
+        "@flowgram.ai/document": "0.3.2",
+        "@flowgram.ai/renderer": "0.3.2",
+        "@flowgram.ai/utils": "0.3.2",
+        "inversify": "^6.0.1",
+        "lodash": "^4.17.21",
+        "reflect-metadata": "~0.2.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8",
+        "styled-components": ">=4"
+      }
+    },
     "node_modules/@flowgram.ai/node": {
       "version": "0.3.2",
       "resolved": "https://registry.npmmirror.com/@flowgram.ai/node/-/node-0.3.2.tgz",

ui/package.json

@@ -14,8 +14,9 @@
     "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/language": "^6.11.2",
     "@codemirror/legacy-modes": "^6.5.1",
-    "@flowgram.ai/fixed-layout-editor": "^0.3.2",
     "@flowgram.ai/document": "^0.3.2",
+    "@flowgram.ai/fixed-layout-editor": "^0.3.2",
+    "@flowgram.ai/minimap-plugin": "^0.3.2",
     "@tabler/icons-react": "^3.34.1",
     "@uiw/codemirror-extensions-basic-setup": "^4.24.2",
     "@uiw/codemirror-theme-vscode": "^4.24.2",

ui/src/components/workflow/designer/Editor.tsx

@@ -8,6 +8,7 @@ import {
   type FlowDocumentJSON,
   FlowTextKey,
 } from "@flowgram.ai/fixed-layout-editor";
+import { createMinimapPlugin } from "@flowgram.ai/minimap-plugin";
 import "@flowgram.ai/fixed-layout-editor/index.css";
 import { useDeepCompareEffect } from "ahooks";
 import { theme } from "antd";
@@ -92,6 +93,13 @@ const Editor = ({ className, style, children, initialData, readonly }: EditorPro
         };
       },
 
+      plugins: () => [
+        createMinimapPlugin({
+          disableLayer: true,
+          enableDisplayAllNodes: true,
+        }),
+      ],
+
       onAllLayersRendered: (ctx) => {
         // 画布初始化后向下滚动一点，露出可能被 Alert 遮挡的部分
         setTimeout(() => {

ui/src/components/workflow/designer/Minimap.tsx

@@ -0,0 +1,36 @@
+import { useService } from "@flowgram.ai/fixed-layout-editor";
+import { FlowMinimapService, MinimapRender } from "@flowgram.ai/minimap-plugin";
+
+export interface MinimapProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const Minimap = ({ className, style }: MinimapProps) => {
+  const minimapService = useService(FlowMinimapService);
+
+  return (
+    <div className={className} style={style}>
+      <MinimapRender
+        service={minimapService}
+        panelStyles={{}}
+        containerStyles={{
+          pointerEvents: "auto",
+          position: "relative",
+          top: "unset",
+          right: "unset",
+          bottom: "unset",
+          left: "unset",
+        }}
+        inactiveStyle={{
+          opacity: 1,
+          scale: 0.5,
+          translateX: 0,
+          translateY: 0,
+        }}
+      />
+    </div>
+  );
+};
+
+export default Minimap;

ui/src/components/workflow/designer/Toolbar.tsx

@@ -1,11 +1,13 @@
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { EditorState, FlowLayoutDefault, useClientContext, usePlaygroundTools, useRefresh } from "@flowgram.ai/fixed-layout-editor";
-import { IconHandStop, IconLayoutCards, IconMaximize, IconMinus, IconPlus, IconPointer } from "@tabler/icons-react";
+import { IconHandStop, IconLayoutCards, IconMatrix, IconMaximize, IconMinus, IconPlus } from "@tabler/icons-react";
 import { Button, Tooltip } from "antd";
 
 import { mergeCls } from "@/utils/css";
 
+import Minimap from "./Minimap";
+
 export interface ToolbarProps {
   className?: string;
   style?: React.CSSProperties;
@@ -25,6 +27,8 @@ const Toolbar = ({ className, style }: ToolbarProps) => {
     return () => disposable.dispose();
   }, [playground]);
 
+  const [isMinimapVisible, setIsMinimapVisible] = useState(window.screen.availWidth >= 1024);
+
   const [isMouseFriendly, setIsMouseFriendly] = useState(playground.editorState.is(EditorState.STATE_MOUSE_FRIENDLY_SELECT.id));
 
   const handleToggleLayout = useCallback(() => {
@@ -35,6 +39,10 @@ const Toolbar = ({ className, style }: ToolbarProps) => {
     }
   }, [tools.isVertical]);
 
+  const handleToggleMinimap = useCallback(() => {
+    setIsMinimapVisible((prev) => !prev);
+  }, [isMinimapVisible]);
+
   const handleToggleMouseFriendly = useCallback(() => {
     if (isMouseFriendly) {
       playground.editorState.changeState(EditorState.STATE_SELECT.id);
@@ -47,7 +55,16 @@ const Toolbar = ({ className, style }: ToolbarProps) => {
 
   return (
     <div className={className} style={style}>
-      <div className="flex items-center gap-2">
+      <div className="relative flex items-center gap-2">
+        <Tooltip title={isMouseFriendly ? t("workflow.detail.design.toolbar.hand_mode") : t("workflow.detail.design.toolbar.pointer_mode")}>
+          <Button
+            ghost={isMouseFriendly}
+            icon={<IconHandStop size="1.25em" />}
+            type={isMouseFriendly ? "primary" : "default"}
+            onClick={handleToggleMouseFriendly}
+          />
+        </Tooltip>
+
         <Tooltip title={t("workflow.detail.design.toolbar.zoomout")}>
           <Button icon={<IconMinus size="1.25em" />} onClick={() => tools.zoomout()} />
         </Tooltip>
@@ -67,9 +84,10 @@ const Toolbar = ({ className, style }: ToolbarProps) => {
           <Button icon={<IconLayoutCards className={mergeCls({ ["rotate-90"]: tools.isVertical })} size="1.25em" />} onClick={handleToggleLayout} />
         </Tooltip>
 
-        <Tooltip title={isMouseFriendly ? t("workflow.detail.design.toolbar.hand_mode") : t("workflow.detail.design.toolbar.pointer_mode")}>
-          <Button icon={isMouseFriendly ? <IconHandStop size="1.25em" /> : <IconPointer size="1.25em" />} onClick={handleToggleMouseFriendly} />
+        <Tooltip title={t("workflow.detail.design.toolbar.minimap")}>
+          <Button icon={<IconMatrix size="1.25em" />} ghost={isMinimapVisible} type={isMinimapVisible ? "primary" : "default"} onClick={handleToggleMinimap} />
         </Tooltip>
+        {isMinimapVisible && <Minimap className="absolute right-0 bottom-[42px]" />}
       </div>
     </div>
   );

ui/src/components/workflow/designer/flowgram.css

@@ -13,6 +13,10 @@
   position: absolute !important;
   top: -99999px !important;
   left: -99999px !important;
+  width: 0 !important;
+  height: 0 !important;
+  visibility: hidden !important;
+  transform: scale(0) !important;
 }
 
 /* 控制 flowgram 线条样式 */

ui/src/components/workflow/designer/nodes/BusinessNode.tsx

@@ -1,6 +1,6 @@
 import { getI18n } from "react-i18next";
 import { IconCloudUpload, IconContract, IconDeviceDesktopSearch, IconPackage, IconSend } from "@tabler/icons-react";
-import { Avatar, Typography } from "antd";
+import { Avatar } from "antd";
 import { nanoid } from "nanoid";
 
 import { deploymentProvidersMap, notificationProvidersMap } from "@/domain/provider";

ui/src/components/workflow/designer/nodes/StartNode.tsx

@@ -1,6 +1,5 @@
 import { getI18n } from "react-i18next";
 import { IconRocket } from "@tabler/icons-react";
-import { Typography } from "antd";
 
 import { WORKFLOW_TRIGGERS } from "@/domain/workflow";
 

ui/src/components/workflow/designer/nodes/_shared.tsx

@@ -99,7 +99,7 @@ export const NodeMenuButton = ({ className, style, ...props }: ButtonProps) => {
 
   return playground.config.readonlyOrDisabled ? null : (
     <Dropdown menu={{ items: menuItems }} trigger={["click"]} arrow={false}>
-      <Button className={className} style={style} ghost icon={<IconDotsVertical color="grey" size="1.25em" />} type="text" {...props} />
+      <Button className={className} style={style} icon={<IconDotsVertical color="grey" size="1.25em" />} type="text" {...props} />
     </Dropdown>
   );
 };

ui/src/i18n/locales/en/nls.workflow.json

@@ -68,6 +68,7 @@
   "workflow.detail.design.toolbar.auto_fit": "Auto fit view",
   "workflow.detail.design.toolbar.horizontal_layout": "Horizontal Layout",
   "workflow.detail.design.toolbar.vertical_layout": "Vertical Layout",
+  "workflow.detail.design.toolbar.minimap": "Minimap",
   "workflow.detail.design.toolbar.hand_mode": "Hand mode",
   "workflow.detail.design.toolbar.pointer_mode": "Pointer mode",
   "workflow.detail.design.nodes.placeholder": "Please configure",

ui/src/i18n/locales/zh/nls.workflow.json

@@ -68,6 +68,7 @@
   "workflow.detail.design.toolbar.auto_fit": "自适应视图",
   "workflow.detail.design.toolbar.horizontal_layout": "横向布局",
   "workflow.detail.design.toolbar.vertical_layout": "竖向布局",
+  "workflow.detail.design.toolbar.minimap": "小地图",
   "workflow.detail.design.toolbar.hand_mode": "触摸模式",
   "workflow.detail.design.toolbar.pointer_mode": "指针模式",
   "workflow.detail.design.nodes.placeholder": "请完成配置",

ui/src/pages/workflows/WorkflowDetailRuns.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { IconBrowserShare, IconDotsVertical, IconHistory, IconPlayerPause, IconTrash } from "@tabler/icons-react";
 import { useRequest } from "ahooks";
-import { Alert, App, Button, Dropdown, Skeleton, Table, type TableProps, Tooltip } from "antd";
+import { Alert, App, Button, Dropdown, Skeleton, Table, type TableProps } from "antd";
 import dayjs from "dayjs";
 import { ClientResponseError } from "pocketbase";