အနှစ်ချုပ်
Frontend workflow node များသည် React Flow node များ ဖြစ်ပါသည်။ @quan-erp/base-frontend မှ shared WorkflowNode wrapper ကို ဦးစားပေးအသုံးပြုပါ — base source မှ relative path ဖြင့် မကူးယူရပါ။ Backend → @Workflow နှင့် တွဲသုံးရပါသည်။
- React Flow မှ props: { id, data, selected? }
- ရိုးရှင်းသော node များ — createDefaultWorkflowNodeComponent
- Custom handle / styling — WorkflowNode + @xyflow/react Handle
- Workflow designer ရှာဖွေတွေ့ရှိနိုင်ရန် node component ကို register လုပ်ရပါသည်
1. Default node
createDefaultWorkflowNodeComponent ဖြင့် မြန်ဆန်စွာ ဖန်တီးနိုင်ပါသည်။
TSXdefault
1import { AlarmClock } from "@icon-park/react";
2import { createDefaultWorkflowNodeComponent } from "@quan-erp/base-frontend";
3import metadata from "../../module.metadata.json" with { type: "json" };
4
5export const OnBookingWorkflowNode = createDefaultWorkflowNodeComponent({
6 defaultIcon: <AlarmClock size={20} />,
7 defaultLabel: "On Hotel booking",
8 pluginName: metadata.name,
9 defaultIconBg:
10 "bg-pink-50 dark:bg-pink-950/40 text-pink-600 dark:text-pink-400",
11 hasOutput: true,
12 hasInput: false,
13});2. Custom WorkflowNode
Custom port များအတွက် Handle များကို children အဖြစ် ထည့်ရပါသည်။
- WorkflowNode သည် card chrome၊ play နှင့် delete control များကို ပေးပြီးသား ဖြစ်ပါသည်
- Custom port များအတွက် Handle children ကို ပေးရပါသည်
- Default များကို override လုပ်သည့်အခါ ! important class များကို အသုံးပြုရပါသည်
TSXcustom
1import { Handle, Position } from "@xyflow/react";
2import { Tool } from "@icon-park/react";
3import { WorkflowNode } from "@quan-erp/base-frontend";
4import metadata from "../../module.metadata.json" with { type: "json" };
5
6export function CustomNode({
7 id,
8 data,
9 selected,
10}: {
11 id: string;
12 data: { label?: string };
13 selected?: boolean;
14}) {
15 return (
16 <WorkflowNode
17 pluginName={metadata.name}
18 id={id}
19 data={data}
20 selected={selected}
21 defaultIcon={<Tool size={18} theme="outline" />}
22 defaultLabel="Custom Tool"
23 defaultIconBg="bg-yellow-50 text-yellow-600"
24 >
25 <Handle type="source" id="output" position={Position.Top} />
26 </WorkflowNode>
27 );
28}