feat: 添加写了一半的人机验证通用组件

apps/frontend/components/human-verification.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { ReactNode, useEffect, useState } from "react"
+
+interface HumanVerificationProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onSuccess?: () => void;
+    onFail?: (reason?: string) => void;
+    children: ReactNode;
+}
+
+export function HumanVerification({ open, onOpenChange, onSuccess, onFail, children }: HumanVerificationProps) {
+    const [i_open, i_setOpen] = useState(false);
+    const setOpen = (o: boolean) => {
+        i_setOpen(o);
+        onOpenChange?.(o);
+    };
+
+    useEffect(() => {
+        if (i_open) {
+            setOpen(false);
+            onSuccess?.();
+        }
+    }, [i_open]);
+
+    return (
+        <Dialog open={open ?? i_open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                {children}
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-80">
+                <DialogHeader>
+                    <DialogTitle>人机验证</DialogTitle>
+                    <DialogDescription>
+                        请拖动滑块以使得图片水平
+                    </DialogDescription>
+                </DialogHeader>
+                <div>
+
+                </div>
+            </DialogContent>
+        </Dialog>
+    )
+}