feat(ui): improve workflow elements scroll area

ui/src/components/DrawerForm.tsx

@@ -49,9 +49,7 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
 
   const triggerEl = useTriggerElement(trigger, {
     onClick: () => {
-      console.log("click");
       setOpen(true);
-      console.log(open);
     },
   });
 

ui/src/components/certificate/CertificateDetail.tsx

@@ -27,7 +27,7 @@ const CertificateDetail = ({ data, ...props }: CertificateDetailProps) => {
       const blob = new Blob([u8arr], { type: "application/zip" });
       saveAs(blob, `${data.id}-${data.subjectAltNames}.zip`);
     } catch (err) {
-      console.log(err);
+      console.error(err);
       messageApi.warning(t("common.text.operation_failed"));
     }
   };

ui/src/components/workflow/WorkflowElementsContainer.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { ExpandOutlined as ExpandOutlinedIcon, MinusOutlined as MinusOutlinedIcon, PlusOutlined as PlusOutlinedIcon } from "@ant-design/icons";
+import { Button, Card, Typography } from "antd";
+
+import WorkflowElements from "@/components/workflow/WorkflowElements";
+import { mergeCls } from "@/utils/css";
+
+export type WorkflowElementsProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+};
+
+const WorkflowElementsContainer = ({ className, style, disabled }: WorkflowElementsProps) => {
+  const [scale, setScale] = useState(1);
+
+  return (
+    <div className={mergeCls("relative size-full overflow-hidden", className)} style={style}>
+      <div className="size-full overflow-auto">
+        <div className="relative z-[1]">
+          <div className="origin-center transition-transform duration-300" style={{ zoom: `${scale}` }}>
+            <div className="p-4">
+              <WorkflowElements disabled={disabled} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Card className="absolute bottom-4 right-6 z-[2] rounded-lg p-2 shadow-lg" styles={{ body: { padding: 0 } }}>
+        <div className="flex items-center gap-2">
+          <Button icon={<MinusOutlinedIcon />} disabled={scale <= 0.5} onClick={() => setScale((s) => Math.max(0.5, s - 0.1))} />
+          <Typography.Text className="min-w-[3em] text-center">{Math.round(scale * 100)}%</Typography.Text>
+          <Button icon={<PlusOutlinedIcon />} disabled={scale >= 2} onClick={() => setScale((s) => Math.min(2, s + 0.1))} />
+          <Button icon={<ExpandOutlinedIcon />} onClick={() => setScale(1)} />
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default WorkflowElementsContainer;