feat(ui): new workflow node panel

ui/src/components/workflow/panel/Panel.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+import { useControllableValue } from "ahooks";
+import { Drawer } from "antd";
+
+export type PanelProps = {
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  extra?: React.ReactNode;
+  footer?: React.ReactNode;
+  open?: boolean;
+  title?: React.ReactNode;
+  onClose?: () => void | Promise<unknown>;
+  onOpenChange?: (open: boolean) => void;
+};
+
+const Panel = ({ children, extra, footer, title, onClose, ...props }: PanelProps) => {
+  const [open, setOpen] = useControllableValue<boolean>(props, {
+    valuePropName: "open",
+    defaultValuePropName: "defaultOpen",
+    trigger: "onOpenChange",
+  });
+
+  const handleClose = async () => {
+    try {
+      const ret = await onClose?.();
+      if (ret != null && !ret) return;
+
+      setOpen(false);
+    } catch {
+      return;
+    }
+  };
+
+  return (
+    <Drawer destroyOnClose extra={extra} footer={footer} open={open} title={title} width={640} onClose={handleClose}>
+      {children}
+    </Drawer>
+  );
+};
+
+export default Panel;