feat(ui): shared workflow node dropdown menu

ui/src/components/workflow/node/AddNode.tsx

@@ -35,8 +35,6 @@ const AddNode = ({ node, disabled }: AddNodeProps) => {
         label: t(label as string),
         icon: icon,
         onClick: () => {
-          if (disabled) return;
-
           const nextNode = newNode(type as WorkflowNodeType);
           addNode(nextNode, node.id);
         },

ui/src/components/workflow/node/ApplyNode.tsx

@@ -71,9 +71,9 @@ const ApplyNode = ({ node, disabled }: ApplyNodeProps) => {
 
   return (
     <>
-      <SharedNode.Wrapper node={node} disabled={disabled} onClick={() => setDrawerOpen(true)}>
+      <SharedNode.Block node={node} disabled={disabled} onClick={() => setDrawerOpen(true)}>
         {wrappedEl}
-      </SharedNode.Wrapper>
+      </SharedNode.Block>
 
       <SharedNode.ConfigDrawer
         node={node}

ui/src/components/workflow/node/ConditionNode.tsx

@@ -1,14 +1,9 @@
 import { memo } from "react";
-import { useTranslation } from "react-i18next";
+import { MoreOutlined as MoreOutlinedIcon } from "@ant-design/icons";
-import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
+import { Button, Card, Popover } from "antd";
-import { Button, Card, Dropdown, Popover } from "antd";
-import { produce } from "immer";
-
-import { useZustandShallowSelector } from "@/hooks";
-import { useWorkflowStore } from "@/stores/workflow";
 
 import AddNode from "./AddNode";
-import { type SharedNodeProps } from "./_SharedNode";
+import SharedNode, { type SharedNodeProps } from "./_SharedNode";
 
 export type ConditionNodeProps = SharedNodeProps & {
   branchId: string;
@@ -16,24 +11,6 @@ export type ConditionNodeProps = SharedNodeProps & {
 };
 
 const ConditionNode = ({ node, disabled, branchId, branchIndex }: ConditionNodeProps) => {
-  const { t } = useTranslation();
-
-  const { updateNode, removeBranch } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeBranch"]));
-
-  const handleNodeNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
-    const oldName = node.name;
-    const newName = e.target.innerText.trim().substring(0, 64);
-    if (oldName === newName) {
-      return;
-    }
-
-    updateNode(
-      produce(node, (draft) => {
-        draft.name = newName;
-      })
-    );
-  };
-
   // TODO: 条件分支
 
   return (
@@ -41,27 +18,13 @@ const ConditionNode = ({ node, disabled, branchId, branchIndex }: ConditionNodeP
       <Popover
         arrow={false}
         content={
-          <Dropdown
+          <SharedNode.Menu
-            menu={{
+            node={node}
-              items: [
+            branchId={branchId}
-                {
+            branchIndex={branchIndex}
-                  key: "delete",
+            disabled={disabled}
-                  disabled: disabled,
+            trigger={<Button color="primary" icon={<MoreOutlinedIcon />} variant="text" />}
-                  label: t("workflow_node.action.delete_branch"),
+          />
-                  icon: <CloseCircleOutlinedIcon />,
-                  danger: true,
-                  onClick: () => {
-                    if (disabled) return;
-
-                    removeBranch(branchId!, branchIndex!);
-                  },
-                },
-              ],
-            }}
-            trigger={["click"]}
-          >
-            <Button color="primary" icon={<EllipsisOutlinedIcon />} variant="text" />
-          </Dropdown>
         }
         overlayClassName="shadow-md"
         overlayInnerStyle={{ padding: 0 }}
@@ -69,14 +32,11 @@ const ConditionNode = ({ node, disabled, branchId, branchIndex }: ConditionNodeP
       >
         <Card className="relative z-[1] mt-10 w-[256px] shadow-md" styles={{ body: { padding: 0 } }} hoverable>
           <div className="flex h-[48px] flex-col items-center justify-center truncate px-4 py-2">
-            <div
+            <SharedNode.Title
-              className="focus:bg-background focus:text-foreground w-full overflow-hidden text-center outline-slate-200 focus:rounded-sm"
+              className="focus:bg-background focus:text-foreground overflow-hidden outline-slate-200 focus:rounded-sm"
-              contentEditable
+              node={node}
-              suppressContentEditableWarning
+              disabled={disabled}
-              onBlur={handleNodeNameBlur}
+            />
-            >
-              {node.name}
-            </div>
           </div>
         </Card>
       </Popover>

ui/src/components/workflow/node/DeployNode.tsx

@@ -81,9 +81,9 @@ const DeployNode = ({ node, disabled }: DeployNodeProps) => {
 
   return (
     <>
-      <SharedNode.Wrapper node={node} disabled={disabled} onClick={() => setDrawerOpen(true)}>
+      <SharedNode.Block node={node} disabled={disabled} onClick={() => setDrawerOpen(true)}>
         {wrappedEl}
-      </SharedNode.Wrapper>
+      </SharedNode.Block>
 
       <SharedNode.ConfigDrawer
         node={node}

ui/src/components/workflow/node/NotifyNode.tsx

@@ -74,9 +74,9 @@ const NotifyNode = ({ node, disabled }: NotifyNodeProps) => {
 
   return (
     <>
-      <SharedNode.Wrapper node={node} disabled={disabled} onClick={() => setDrawerOpen(true)}>
+      <SharedNode.Block node={node} disabled={disabled} onClick={() => setDrawerOpen(true)}>
         {wrappedEl}
-      </SharedNode.Wrapper>
+      </SharedNode.Block>
 
       <SharedNode.ConfigDrawer
         node={node}

ui/src/components/workflow/node/StartNode.tsx

@@ -78,9 +78,9 @@ const StartNode = ({ node, disabled }: StartNodeProps) => {
 
   return (
     <>
-      <SharedNode.Wrapper node={node} disabled={disabled} onClick={() => setDrawerOpen(true)}>
+      <SharedNode.Block node={node} disabled={disabled} onClick={() => setDrawerOpen(true)}>
         {wrappedEl}
-      </SharedNode.Wrapper>
+      </SharedNode.Block>
 
       <SharedNode.ConfigDrawer
         node={node}

ui/src/components/workflow/node/_SharedNode.tsx

@@ -1,12 +1,16 @@
-import { memo } from "react";
+import { memo, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
+import {
+  CloseCircleOutlined as CloseCircleOutlinedIcon,
+  EllipsisOutlined as EllipsisOutlinedIcon,
+  FormOutlined as FormOutlinedIcon,
+  MoreOutlined as MoreOutlinedIcon,
+} from "@ant-design/icons";
 import { useControllableValue } from "ahooks";
-import { Button, Card, Drawer, Dropdown, Modal, Popover, Space } from "antd";
+import { Button, Card, Drawer, Dropdown, Input, Modal, Popover, Space } from "antd";
 import { produce } from "immer";
 import { isEqual } from "radash";
 
-import Show from "@/components/Show";
 import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
 import { useZustandShallowSelector } from "@/hooks";
 import { useWorkflowStore } from "@/stores/workflow";
@@ -18,23 +22,18 @@ export type SharedNodeProps = {
   disabled?: boolean;
 };
 
-type SharedNodeWrapperProps = SharedNodeProps & {
+// #region Title
-  children: React.ReactNode;
+type SharedNodeTitleProps = SharedNodeProps & {
-  onClick?: (e: React.MouseEvent) => void;
+  className?: string;
+  style?: React.CSSProperties;
 };
 
-const SharedNodeWrapper = ({ children, node, disabled, onClick }: SharedNodeWrapperProps) => {
+const SharedNodeTitle = ({ className, style, node, disabled }: SharedNodeTitleProps) => {
-  const { t } = useTranslation();
+  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
 
-  const { updateNode, removeNode } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeNode"]));
+  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
-
-  const handleNodeClick = (e: React.MouseEvent) => {
-    onClick?.(e);
-  };
-
-  const handleNodeNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
     const oldName = node.name;
-    const newName = e.target.innerText.trim().substring(0, 64);
+    const newName = e.target.innerText.trim().substring(0, 64) || oldName;
     if (oldName === newName) {
       return;
     }
@@ -46,49 +45,154 @@ const SharedNodeWrapper = ({ children, node, disabled, onClick }: SharedNodeWrap
     );
   };
 
+  return (
+    <div className="w-full cursor-text overflow-hidden text-center">
+      <div className={className} style={style} contentEditable={!disabled} suppressContentEditableWarning onBlur={handleBlur}>
+        {node.name}
+      </div>
+    </div>
+  );
+};
+// #endregion
+
+// #region Menu
+type SharedNodeMenuProps = SharedNodeProps & {
+  branchId?: string;
+  branchIndex?: number;
+  trigger: React.ReactNode;
+  afterUpdate?: () => void;
+  afterDelete?: () => void;
+};
+
+const SharedNodeMenu = ({ trigger, node, disabled, branchId, branchIndex, afterUpdate, afterDelete }: SharedNodeMenuProps) => {
+  const { t } = useTranslation();
+
+  const { updateNode, removeNode, removeBranch } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeNode", "removeBranch"]));
+
+  const [modalApi, ModelContextHolder] = Modal.useModal();
+
+  const nameRef = useRef<string>();
+
+  const handleRenameClick = async () => {
+    const oldName = node.name;
+    const newName = nameRef.current?.trim()?.substring(0, 64) || oldName;
+    if (oldName === newName) {
+      return;
+    }
+
+    await updateNode(
+      produce(node, (draft) => {
+        draft.name = newName;
+      })
+    );
+
+    afterUpdate?.();
+  };
+
+  const handleDeleteClick = async () => {
+    if (node.type === WorkflowNodeType.Branch || node.type === WorkflowNodeType.Condition) {
+      await removeBranch(branchId!, branchIndex!);
+    } else {
+      await removeNode(node.id);
+    }
+
+    afterDelete?.();
+  };
+
+  return (
+    <>
+      {ModelContextHolder}
+
+      <Dropdown
+        menu={{
+          items: [
+            {
+              key: "rename",
+              disabled: disabled,
+              label:
+                node.type === WorkflowNodeType.Branch || node.type === WorkflowNodeType.Condition
+                  ? t("workflow_node.action.rename_branch")
+                  : t("workflow_node.action.rename_node"),
+              icon: <FormOutlinedIcon />,
+              onClick: () => {
+                nameRef.current = node.name;
+
+                const dialog = modalApi.confirm({
+                  title:
+                    node.type === WorkflowNodeType.Branch || node.type === WorkflowNodeType.Condition
+                      ? t("workflow_node.action.rename_branch")
+                      : t("workflow_node.action.rename_node"),
+                  content: (
+                    <div className="pb-2 pt-4">
+                      <Input
+                        ref={(ref) => setTimeout(() => ref?.focus({ cursor: "end" }), 0)}
+                        defaultValue={node.name}
+                        onChange={(e) => (nameRef.current = e.target.value)}
+                        onPressEnter={async () => {
+                          await handleRenameClick();
+                          dialog.destroy();
+                        }}
+                      />
+                    </div>
+                  ),
+                  icon: null,
+                  okText: t("common.button.save"),
+                  onOk: handleRenameClick,
+                });
+              },
+            },
+            {
+              type: "divider",
+            },
+            {
+              key: "remove",
+              disabled: disabled || node.type === WorkflowNodeType.Start,
+              label:
+                node.type === WorkflowNodeType.Branch || node.type === WorkflowNodeType.Condition
+                  ? t("workflow_node.action.remove_branch")
+                  : t("workflow_node.action.remove_node"),
+              icon: <CloseCircleOutlinedIcon />,
+              danger: true,
+              onClick: handleDeleteClick,
+            },
+          ],
+        }}
+        trigger={["click"]}
+      >
+        {trigger}
+      </Dropdown>
+    </>
+  );
+};
+// #endregion
+
+// #region Wrapper
+type SharedNodeBlockProps = SharedNodeProps & {
+  children: React.ReactNode;
+  onClick?: (e: React.MouseEvent) => void;
+};
+
+const SharedNodeBlock = ({ children, node, disabled, onClick }: SharedNodeBlockProps) => {
+  const handleNodeClick = (e: React.MouseEvent) => {
+    onClick?.(e);
+  };
+
   return (
     <>
       <Popover
         arrow={false}
-        content={
+        content={<SharedNodeMenu node={node} disabled={disabled} trigger={<Button color="primary" icon={<MoreOutlinedIcon />} variant="text" />} />}
-          <Show when={node.type !== WorkflowNodeType.Start}>
-            <Dropdown
-              menu={{
-                items: [
-                  {
-                    key: "delete",
-                    disabled: disabled,
-                    label: t("workflow_node.action.delete_node"),
-                    icon: <CloseCircleOutlinedIcon />,
-                    danger: true,
-                    onClick: () => {
-                      if (disabled) return;
-
-                      removeNode(node.id);
-                    },
-                  },
-                ],
-              }}
-              trigger={["click"]}
-            >
-              <Button color="primary" icon={<EllipsisOutlinedIcon />} variant="text" />
-            </Dropdown>
-          </Show>
-        }
         overlayClassName="shadow-md"
         overlayInnerStyle={{ padding: 0 }}
         placement="rightTop"
       >
         <Card className="relative w-[256px] overflow-hidden shadow-md" styles={{ body: { padding: 0 } }} hoverable>
           <div className="bg-primary flex h-[48px] flex-col items-center justify-center truncate px-4 py-2 text-white">
-            <div
+            <SharedNodeTitle
-              className="focus:bg-background focus:text-foreground w-full overflow-hidden text-center outline-none focus:rounded-sm"
+              className="focus:bg-background focus:text-foreground overflow-hidden outline-none focus:rounded-sm"
-              contentEditable
+              node={node}
-              suppressContentEditableWarning
+              disabled={disabled}
-              onBlur={handleNodeNameBlur}
+            />
-            >
-              {node.name}
-            </div>
           </div>
 
           <div className="flex cursor-pointer flex-col justify-center px-4 py-2" onClick={handleNodeClick}>
@@ -101,7 +205,9 @@ const SharedNodeWrapper = ({ children, node, disabled, onClick }: SharedNodeWrap
     </>
   );
 };
+// #endregion
 
+// #region EditDrawer
 type SharedNodeEditDrawerProps = SharedNodeProps & {
   children: React.ReactNode;
   footer?: boolean;
@@ -174,7 +280,16 @@ const SharedNodeConfigDrawer = ({
       <Drawer
         afterOpenChange={(open) => setOpen(open)}
         destroyOnClose
-        loading={loading}
+        extra={
+          <SharedNodeMenu
+            node={node}
+            disabled={disabled}
+            trigger={<Button icon={<EllipsisOutlinedIcon />} type="text" />}
+            afterDelete={() => {
+              setOpen(false);
+            }}
+          />
+        }
         footer={
           !!footer && (
             <Space className="w-full justify-end">
@@ -185,7 +300,9 @@ const SharedNodeConfigDrawer = ({
             </Space>
           )
         }
+        loading={loading}
         open={open}
+        title={<div className="max-w-[480px] truncate">{node.name}</div>}
         width={640}
         onClose={handleClose}
       >
@@ -194,8 +311,11 @@ const SharedNodeConfigDrawer = ({
     </>
   );
 };
+// #endregion
 
 export default {
-  Wrapper: memo(SharedNodeWrapper),
+  Title: memo(SharedNodeTitle),
+  Menu: memo(SharedNodeMenu),
+  Block: memo(SharedNodeBlock),
   ConfigDrawer: memo(SharedNodeConfigDrawer),
 };

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

@@ -1,9 +1,11 @@
 {
   "workflow_node.action.configure_node": "Configure",
   "workflow_node.action.add_node": "Add node",
-  "workflow_node.action.delete_node": "Delete node",
+  "workflow_node.action.rename_node": "Rename node",
+  "workflow_node.action.remove_node": "Delete node",
   "workflow_node.action.add_branch": "Add branch",
-  "workflow_node.action.delete_branch": "Delete branch",
+  "workflow_node.action.rename_branch": "Rename branch",
+  "workflow_node.action.remove_branch": "Delete branch",
 
   "workflow_node.unsaved_changes.confirm": "You have unsaved changes. Do you really want to close the panel and drop those changes?",
 

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

@@ -1,9 +1,11 @@
 {
   "workflow_node.action.configure_node": "配置节点",
   "workflow_node.branch.add_node": "添加节点",
-  "workflow_node.action.delete_node": "删除节点",
+  "workflow_node.action.rename_node": "重命名",
+  "workflow_node.action.remove_node": "删除节点",
   "workflow_node.action.add_branch": "添加分支",
-  "workflow_node.action.delete_branch": "删除分支",
+  "workflow_node.action.rename_branch": "重命名",
+  "workflow_node.action.remove_branch": "删除分支",
 
   "workflow_node.unsaved_changes.confirm": "你有尚未保存的更改。你确定要关闭面板吗？",