feat(ui): shared workflow node dropdown menu

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

@@ -1,14 +1,9 @@
 import { memo } from "react";
-import { useTranslation } from "react-i18next";
-import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
-import { Button, Card, Dropdown, Popover } from "antd";
-import { produce } from "immer";
-
-import { useZustandShallowSelector } from "@/hooks";
-import { useWorkflowStore } from "@/stores/workflow";
+import { MoreOutlined as MoreOutlinedIcon } from "@ant-design/icons";
+import { Button, Card, Popover } from "antd";
 
 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
-            menu={{
-              items: [
-                {
-                  key: "delete",
-                  disabled: disabled,
-                  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>
+          <SharedNode.Menu
+            node={node}
+            branchId={branchId}
+            branchIndex={branchIndex}
+            disabled={disabled}
+            trigger={<Button color="primary" icon={<MoreOutlinedIcon />} variant="text" />}
+          />
         }
         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
-              className="focus:bg-background focus:text-foreground w-full overflow-hidden text-center outline-slate-200 focus:rounded-sm"
-              contentEditable
-              suppressContentEditableWarning
-              onBlur={handleNodeNameBlur}
-            >
-              {node.name}
-            </div>
+            <SharedNode.Title
+              className="focus:bg-background focus:text-foreground overflow-hidden outline-slate-200 focus:rounded-sm"
+              node={node}
+              disabled={disabled}
+            />
           </div>
         </Card>
       </Popover>