压缩历史至 95081aff

2026-10-12 02:06:37 +08:00 · 2026-06-08 20:34:27 +08:00
commit 8a782525de
435 changed files with 71146 additions and 0 deletions
@@ -0,0 +1,182 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { toast } from "sonner"
+import { Spinner } from "@/components/ui/spinner"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { motion, useAnimation } from "motion/react"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+import { SquareArrowUpRight } from 'lucide-react';
+
+import { cn } from "@/lib/utils"
+import services from "@/lib/services"
+import { termsSections } from "@/components/common/docs/terms"
+import { privacySections } from "@/components/common/docs/privacy"
+
+
+/**
+ * 登录表单组件
+ * 显示登录表单和登录按钮
+ * 
+ * @example
+ * ```tsx
+ * <LoginForm />
+ * ```
+ * @param {React.ComponentProps<"div">} props - 组件属性
+ * @param {string} className - 组件类名
+ * @returns {React.ReactNode} 登录表单组件
+ */
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const [isLoading, setIsLoading] = useState(false)
+  const [hasAgreed, setHasAgreed] = useState(false)
+  const controls = useAnimation()
+
+
+  useEffect(() => {
+    const agreed = localStorage.getItem("loginPromptAgreed") === "true"
+    if (agreed) {
+      setHasAgreed(true)
+    }
+  }, [])
+
+  const handleAgreementChange = (checked: boolean | string) => {
+    const isChecked = checked === true
+    setHasAgreed(isChecked)
+    if (isChecked) {
+      localStorage.setItem("loginPromptAgreed", "true")
+    } else {
+      localStorage.removeItem("loginPromptAgreed")
+    }
+  }
+
+  /* 处理登录 */
+  const handleLogin = async () => {
+    if (!hasAgreed) {
+      toast.error("请先阅读并勾选服务条款和隐私政策")
+      controls.start({
+        x: [0, -4, 4, -4, 4, 0],
+        color: ["#ef4444", "inherit"],
+        transition: { duration: 0.5 }
+      })
+      return
+    }
+
+    setIsLoading(true)
+    try {
+      await services.auth.initiateLogin()
+    } catch (error) {
+      setIsLoading(false)
+      console.error('Login error:', error)
+      const message = error instanceof Error ? error.message : "登录失败，请重试"
+      toast.error(message, {
+        duration: 5000,
+        description: error instanceof Error && error.name === 'NetworkError'
+          ? '请确认后端服务已启动'
+          : undefined
+      })
+    }
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <div className="grid gap-4 mx-4">
+        <Button
+          variant="default"
+          type="button"
+          className="w-full h-9 rounded-full tracking-wide bg-primary hover:bg-primary/90 text-primary-foreground text-sm font-bold shadow-lg shadow-primary/20 hover:shadow-primary/30 transition-all active:scale-95"
+          onClick={handleLogin}
+          disabled={isLoading}
+        >
+          {isLoading ? <Spinner className="mr-2" /> : <SquareArrowUpRight className="mr-2 h-4 w-4" />}
+          {isLoading ? "正在跳转..." : "使用 LINUX DO 登录"}
+        </Button>
+      </div>
+
+      <motion.div
+        animate={controls}
+        className="flex items-center justify-center space-x-2 px-4"
+      >
+        <Checkbox
+          id="terms"
+          checked={hasAgreed}
+          onCheckedChange={handleAgreementChange}
+        />
+        <label
+          htmlFor="terms"
+          className="text-muted-foreground text-xs text-balance opacity-75 hover:opacity-100 transition-opacity cursor-pointer leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          我已阅读并同意
+          {" "}
+          <Dialog>
+            <DialogTrigger asChild>
+              <button
+                type="button"
+                className="underline underline-offset-4 hover:text-foreground"
+                onClick={(e) => e.stopPropagation()}
+              >
+                服务条款
+              </button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>服务条款</DialogTitle>
+                <DialogDescription>请仔细阅读以下条款，使用本服务即表示您接受。</DialogDescription>
+              </DialogHeader>
+              <Accordion type="single" collapsible className="w-full">
+                {termsSections.map((section) => (
+                  <AccordionItem key={section.value} value={section.value}>
+                    <AccordionTrigger>{section.title}</AccordionTrigger>
+                    <AccordionContent>{section.content}</AccordionContent>
+                  </AccordionItem>
+                ))}
+              </Accordion>
+            </DialogContent>
+          </Dialog>
+          {" "}及{" "}
+          <Dialog>
+            <DialogTrigger asChild>
+              <button
+                type="button"
+                className="underline underline-offset-4 hover:text-foreground"
+                onClick={(e) => e.stopPropagation()}
+              >
+                隐私政策
+              </button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>隐私政策</DialogTitle>
+                <DialogDescription>我们重视您的隐私，以下说明信息如何收集与使用。</DialogDescription>
+              </DialogHeader>
+              <Accordion type="single" collapsible className="w-full">
+                {privacySections.map((section) => (
+                  <AccordionItem key={section.value} value={section.value}>
+                    <AccordionTrigger>{section.title}</AccordionTrigger>
+                    <AccordionContent>{section.content}</AccordionContent>
+                  </AccordionItem>
+                ))}
+              </Accordion>
+            </DialogContent>
+          </Dialog>
+        </label>
+      </motion.div>
+    </div>
+  )
+}