"use client"; import { useCallback, useState } from "react"; import { Field, Input, Textarea, Select, SelectTrigger, SelectContent, SelectItem, Button, Heading, Text, Spinner, Alert, toast, } from "@hulianui/ui"; import { Send, AlertCircle } from "lucide-react"; // 联系表单 Block —— 自包含、可整段复制。 // 内联表单校验 + 模拟提交（第一次失败展示 Alert，第二次成功）。 // 提交的网络延迟用本文件内联的 sleep + usePending 模拟，无外部依赖。 /** 模拟网络延迟。 */ const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms)); const jitter = (min = 300, max = 600) => min + Math.floor(Math.random() * (max - min)); /** 提交 pending：包一层延迟 + try/finally，配 Spinner + disabled。 */ function usePending() { const [pending, setPending] = useState(false); const run = useCallback(async (fn: () => void | Promise) => { setPending(true); try { await sleep(jitter()); await fn(); } finally { setPending(false); } }, []); return [pending, run] as const; } const inquiryTypes = [ { value: "sales", label: "了解套餐与报价" }, { value: "demo", label: "预约产品演示" }, { value: "migration", label: "迁移与技术评估" }, { value: "support", label: "技术支持" }, { value: "other", label: "其他" }, ]; interface FormState { name: string; email: string; company: string; type: string; message: string; } type Errors = Partial>; const empty: FormState = { name: "", email: "", company: "", type: "", message: "" }; function validate(values: FormState): Errors { const errors: Errors = {}; if (!values.name.trim()) errors.name = "请填写称呼"; if (!values.email.trim()) errors.email = "请填写邮箱"; else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) errors.email = "邮箱格式不正确"; if (!values.type) errors.type = "请选择需求类型"; if (!values.message.trim()) errors.message = "请简单描述你的需求"; return errors; } // 演示：第一次提交模拟失败（展示错误 Alert），第二次成功。 let _submitCount = 0; export function ContactFormBlock() { const [values, setValues] = useState(empty); const [errors, setErrors] = useState({}); const [submitError, setSubmitError] = useState(null); const [pending, run] = usePending(); const set = (key: K, value: FormState[K]) => { setValues((v) => ({ ...v, [key]: value })); setErrors((e) => (e[key] ? { ...e, [key]: undefined } : e)); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const found = validate(values); if (Object.keys(found).length > 0) { setErrors(found); toast({ title: "请检查表单", description: "还有必填项未填写或格式不正确。", tone: "danger" }); return; } setSubmitError(null); void run(async () => { _submitCount += 1; // 演示：第一次提交模拟后端 500，展示内联 Alert 错误态；第二次成功。 if (_submitCount === 1) { setSubmitError("服务器繁忙，请稍后重试（演示模拟失败）。"); return; } const email = values.email; setValues(empty); toast({ title: "已收到，谢谢！", description: `我们的团队会尽快通过 ${email} 与你联系。`, tone: "info", }); }); }; return (

联系我们留下信息，我们会在一个工作日内回复。

set("name", e.target.value)} /> set("email", e.target.value)} />

set("company", e.target.value)} />