'小红书解析

app/join/page.tsx

@@ -1,139 +1,222 @@
 "use client";
 
-import { useState, useEffect, type FormEvent } from "react";
+import { useState, type FormEvent } from "react";
 import Link from "next/link";
-import SessionCoverImage from "../components/SessionCoverImage";
-import { SESSIONS } from "@/config/home.config";
-import CitySelect from "../components/CitySelect";
 import ThemeToggle from "../components/ThemeToggle";
+import { DIGITAL_NOMAD_WECHAT_QR } from "@/config/home.config";
 
-const ageOptions = ["18-24", "25-30", "31-35", "36-40", "40+"];
-const statusOptions = [
-  { value: "student", label: "学生" },
-  { value: "working", label: "上班" },
-  { value: "freelance", label: "自由职业" },
-  { value: "startup", label: "创业" },
-  { value: "other", label: "其他" },
-];
-const activityTypeOptions = [
-  { value: "loft", label: "loft民宿" },
-  { value: "side-hustle", label: "轻副业交流" },
-  { value: "any", label: "都可以" },
-];
-const firstTimeOptions = ["是，第一次参加", "否，参加过类似活动"];
-const availableTimeOptions = [
-  { value: "sat-pm", label: "周六下午" },
-  { value: "sun-pm", label: "周日下午" },
-  { value: "both", label: "都可以" },
-];
-
-const REGIONS: Record<string, string[]> = {
-  深圳: ["南山区", "福田区", "罗湖区", "宝安区", "龙岗区", "其他"],
+/** 各学历对应的典型毕业年龄，用于推算年龄 */
+const EDUCATION_GRAD_AGE: Record<string, number> = {
+  "高中及以下": 18,
+  "大专": 21,
+  "本科": 22,
+  "硕士": 25,
+  "博士": 28,
 };
+const educationOptions = ["高中及以下", "大专", "本科", "硕士", "博士"];
+const graduationYears = Array.from({ length: 41 }, (_, i) => String(2026 - i));
 
-interface FormData {
-  city: string;
-  session: string;
-  ageRange: string;
-  status: string;
-  activityType: string;
-  intro: string;
-  whyJoin: string;
-  nickname: string;
-  wechatOrPhone: string;
-  xiaohongshuUrl: string;
-  region: string;
-  firstTime: string;
-  availableTime: string;
-  agreeRules: boolean;
+function getDisplayCount(text?: string, value?: number | string, suffix = ""): string | null {
+  if (typeof text === "string" && text.trim()) {
+    return `${text}${suffix}`;
+  }
+  if (typeof value === "number" || typeof value === "string") {
+    return `${value}${suffix}`;
+  }
+  return null;
 }
 
-function getSessionFromUrl(): string {
-  if (typeof window === "undefined") return "";
-  return new URLSearchParams(window.location.search).get("session") || "";
-}
-
-function getSessionInfo(sessionId: string) {
-  return SESSIONS.find((s) => s.id === sessionId);
+function getGenderLabel(gender?: string): string {
+  if (gender === "female") return "\u5973";
+  if (gender === "male") return "\u7537";
+  return "\u65e0";
 }
 
 export default function JoinPage() {
-  const [step, setStep] = useState<1 | 2>(1);
-  const [form, setForm] = useState<FormData>({
-    city: "",
-    session: "",
-    ageRange: "",
-    status: "",
-    activityType: "",
-    intro: "",
-    whyJoin: "",
-    nickname: "",
-    wechatOrPhone: "",
-    xiaohongshuUrl: "",
-    region: "",
-    firstTime: "",
-    availableTime: "",
-    agreeRules: false,
-  });
+  const [xiaohongshuUrl, setXiaohongshuUrl] = useState("");
+  const [profession, setProfession] = useState("");
+  const [wechat, setWechat] = useState("");
+  const [phone, setPhone] = useState("");
+  const [intro, setIntro] = useState("");
+  const [education, setEducation] = useState("");
+  const [graduationYear, setGraduationYear] = useState("");
+  const [agreeRules, setAgreeRules] = useState(false);
+  const [urlError, setUrlError] = useState<string | null>(null);
+  const [profile, setProfile] = useState<{
+    nickname: string;
+    gender?: string;
+    followers: number | string;
+    followersText?: string;
+    following?: number | string;
+    followingText?: string;
+    likesAndCollects?: number | string;
+    likesAndCollectsText?: string;
+    postCount: number;
+    postCountText?: string;
+    redbookId?: string;
+    ipLocation?: string;
+    personalLink?: string;
+    avatarUrl?: string;
+    resolvedUrl?: string;
+  } | null>(null);
+  const [validating, setValidating] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const [submitting, setSubmitting] = useState(false);
+  const [qualify, setQualify] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
-    const sid = getSessionFromUrl();
-    if (sid) {
-      const s = SESSIONS.find((x) => x.id === sid);
-      setForm((prev) => ({
-        ...prev,
-        session: sid,
-        city: s?.city || prev.city,
-      }));
+  const handleUrlBlur = async () => {
+    const url = xiaohongshuUrl.trim();
+    if (!url) {
+      setUrlError(null);
+      setProfile(null);
+      return;
     }
-  }, []);
 
-  const set = (key: keyof FormData, value: string | boolean) =>
-    setForm((prev) => ({ ...prev, [key]: value }));
+    setValidating(true);
+    setUrlError(null);
+    setProfile(null);
 
-  const canProceedStep1 = form.city && form.session && form.ageRange && form.status && form.activityType && form.intro.trim() && form.whyJoin.trim();
+    try {
+      const validateRes = await fetch("/api/xiaohongshu/validate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url }),
+      });
+      const validateData = await validateRes.json();
+
+      if (!validateData.valid) {
+        setUrlError(validateData.error || "小红书link异常");
+        return;
+      }
+
+      const profileRes = await fetch("/api/xiaohongshu/profile", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url }),
+      });
+      const profileData = await profileRes.json();
+
+      if (profileData.ok) {
+        setProfile({
+          nickname: profileData.nickname,
+          gender: profileData.gender,
+          followers: profileData.followers ?? 0,
+          followersText: profileData.followersText,
+          following: profileData.following,
+          followingText: profileData.followingText,
+          likesAndCollects: profileData.likesAndCollects,
+          likesAndCollectsText: profileData.likesAndCollectsText,
+          postCount: profileData.postCount ?? 0,
+          postCountText: profileData.postCountText,
+          redbookId: profileData.redbookId,
+          ipLocation: profileData.ipLocation,
+          personalLink: profileData.personalLink,
+          avatarUrl: profileData.avatarUrl,
+          resolvedUrl: profileData.resolvedUrl,
+        });
+      } else {
+        setUrlError(profileData.error || "获取资料失败");
+      }
+    } catch {
+      setUrlError("网络异常，请重试");
+    } finally {
+      setValidating(false);
+    }
+  };
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setError(null);
+
+    if (!xiaohongshuUrl.trim()) {
+      setError("请填写小红书主页链接");
+      return;
+    }
+    if (urlError) {
+      setError("请先修正小红书链接");
+      return;
+    }
+    if (!education || !graduationYear) {
+      setError("请选择学历和毕业时间");
+      return;
+    }
+    if (!profession.trim()) {
+      setError("请填写职业");
+      return;
+    }
+    if (!wechat.trim() && !phone.trim()) {
+      setError("请填写微信号或手机号");
+      return;
+    }
+    if (!intro.trim()) {
+      setError("请填写自我介绍");
+      return;
+    }
+    if (!agreeRules) {
+      setError("请同意社区规则");
+      return;
+    }
+
     setSubmitting(true);
     try {
+      const gradAge = EDUCATION_GRAD_AGE[education] ?? 22;
+      const estimatedAge = new Date().getFullYear() - parseInt(graduationYear, 10) + gradAge;
+      const ageOk = estimatedAge < 28;
+      const isFemale = profile?.gender === "female";
+      const genderLabel = getGenderLabel(profile?.gender);
+      const postCountOk = (profile?.postCount ?? 0) > 5;
+      const postCountLabel = getDisplayCount(profile?.postCountText, profile?.postCount) ?? "0";
+      const submitXiaohongshuUrl = profile?.resolvedUrl || xiaohongshuUrl.trim();
+
       const reasonParts = [
-        form.intro,
-        form.whyJoin,
-        form.status && `状态: ${statusOptions.find((o) => o.value === form.status)?.label || form.status}`,
-        form.activityType && `活动偏好: ${activityTypeOptions.find((o) => o.value === form.activityType)?.label || form.activityType}`,
-        form.region && `常活动区域: ${form.region}`,
-        form.availableTime && `可参加时间: ${availableTimeOptions.find((o) => o.value === form.availableTime)?.label || form.availableTime}`,
+        intro,
+        `学历:${education}`,
+        `毕业:${graduationYear}`,
+        profile?.gender && `性别:${profile.gender}`,
+        `发帖:${profile?.postCount ?? 0}`,
+      ].filter(Boolean);
+
+      const submitReasonParts = [
+        reasonParts[0],
+        `\u5b66\u5386:${education}`,
+        `\u6bd5\u4e1a:${graduationYear}`,
+        `\u6027\u522b:${genderLabel}`,
+        `\u53d1\u5e16:${postCountLabel}`,
       ].filter(Boolean);
 
       const res = await fetch("/api/join", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          city: form.city,
-          session: form.session,
-          nickname: form.nickname,
-          age_range: form.ageRange,
-          wechat_or_phone: form.wechatOrPhone,
-          xiaohongshu_url: form.xiaohongshuUrl.trim(),
-          intro: reasonParts.join(" | "),
-          first_time: form.firstTime,
-          agree_rules: form.agreeRules,
-          status: form.status,
-          activity_type: form.activityType,
-          why_join: form.whyJoin,
-          region: form.region,
-          available_time: form.availableTime,
+          nickname: profile?.nickname || "匿名",
+          wechat: wechat.trim(),
+          phone: phone.trim(),
+          profession: profession.trim(),
+          xiaohongshu_url: submitXiaohongshuUrl,
+          xiaohongshu_avatar_url: profile?.avatarUrl || "",
+          gender: genderLabel,
+          intro: submitReasonParts.join(" | "),
+          city: "深圳",
+          session: "digital-nomad",
+          education,
+          graduation_year: graduationYear,
+          agree_rules: true,
+          first_time: "",
+          status: "",
+          activity_type: "",
+          why_join: "",
+          region: "",
+          available_time: "",
         }),
       });
       const data = await res.json();
+
       if (!res.ok || !data?.ok) {
         throw new Error(data?.error || "提交失败，请稍后重试");
       }
+
+      setQualify(isFemale && ageOk && postCountOk);
       setSubmitted(true);
     } catch (err) {
       setError(err instanceof Error ? err.message : "网络错误，请重试");
@@ -142,20 +225,53 @@ export default function JoinPage() {
     }
   };
 
-  const selectedSession = getSessionInfo(form.session);
-  const regions = form.city ? (REGIONS[form.city] || []) : [];
+  const followingDisplay = getDisplayCount(profile?.followingText, profile?.following);
+  const followersDisplay = getDisplayCount(profile?.followersText, profile?.followers);
+  const likesDisplay = getDisplayCount(profile?.likesAndCollectsText, profile?.likesAndCollects);
+  const safePostCountDisplay = getDisplayCount(profile?.postCountText, profile?.postCount, " \u7bc7");
+  const postCountDisplay = getDisplayCount(profile?.postCountText, profile?.postCount, " 篇");
+
+  const profileGenderLabel = getGenderLabel(profile?.gender);
 
   if (submitted) {
     return (
       <div className="flex min-h-screen items-center justify-center bg-[#faf8f5] dark:bg-stone-950 px-4 py-8">
         <div className="w-full max-w-md animate-fade-in rounded-2xl bg-white dark:bg-stone-900 p-6 sm:p-10 text-center shadow-lg border border-stone-200 dark:border-stone-800">
-          <div className="mx-auto mb-4 sm:mb-5 flex h-16 w-16 sm:h-20 sm:w-20 items-center justify-center rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-4xl sm:text-5xl">
-            ✅
-          </div>
-          <h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">报名成功</h2>
-          <p className="mt-2 sm:mt-3 text-sm sm:text-base text-stone-500 dark:text-stone-400">
-            我们会尽快通过您留下的联系方式与您确认。不是所有报名都会自动确认，我们会根据场次与匹配度联系合适报名者。
-          </p>
+          {qualify ? (
+            <>
+              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-4xl">
+                ✅
+              </div>
+              <h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">
+                恭喜，符合条件
+              </h2>
+              <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">
+                扫码添加微信，加入活动群
+              </p>
+              <div className="mt-6 flex justify-center">
+                <img
+                  src={DIGITAL_NOMAD_WECHAT_QR}
+                  alt="微信二维码"
+                  className="w-40 h-40 object-contain border border-stone-200 dark:border-stone-700 rounded-lg"
+                />
+              </div>
+              <p className="mt-4 text-xs text-stone-400 dark:text-stone-500">
+                添加时请备注：活动报名
+              </p>
+            </>
+          ) : (
+            <>
+              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-amber-50 dark:bg-amber-900/30 text-4xl">
+                ⏳
+              </div>
+              <h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">
+                资料审核中
+              </h2>
+              <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">
+                我们会在 1-3 个工作日内审核您的资料，通过后将通过小红书私信联系您。
+              </p>
+            </>
+          )}
           <Link
             href="/"
             className="mt-6 sm:mt-8 inline-flex items-center gap-2 rounded-xl bg-amber-600 px-6 sm:px-8 py-2.5 sm:py-3 font-medium text-white text-sm sm:text-base transition-colors hover:bg-amber-700"
@@ -169,7 +285,6 @@ export default function JoinPage() {
 
   return (
     <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
-      {/* 顶部栏 */}
       <header className="sticky top-0 z-40 w-full border-b border-stone-200/80 dark:border-stone-800 bg-[#faf8f5]/95 dark:bg-stone-950/95 backdrop-blur">
         <div className="max-w-2xl mx-auto px-4 h-12 sm:h-14 flex items-center justify-between">
           <Link href="/" className="text-sm font-medium text-stone-600 dark:text-stone-400">
@@ -179,301 +294,204 @@ export default function JoinPage() {
         </div>
       </header>
 
-      <div className="mx-auto max-w-2xl px-0 py-0 sm:px-6 sm:py-8 lg:py-10">
-        {/* Trust bar */}
-        <div className="mx-4 sm:mx-0 mt-4 flex flex-wrap justify-center gap-x-6 gap-y-2 text-xs sm:text-sm text-stone-600 dark:text-stone-400 py-3">
-          <span>📍 公开场地</span>
-          <span>👥 6–8 人小组</span>
-          <span>🆓 不收费</span>
-          <span>🤝 尊重边界</span>
-        </div>
-
-        <div className="overflow-hidden bg-white dark:bg-stone-900 shadow-sm sm:rounded-t-2xl">
-          <div className="relative h-28 sm:h-36 md:h-44 overflow-hidden bg-gradient-to-br from-amber-500 via-amber-600 to-amber-700">
+      <div className="mx-auto max-w-2xl px-4 sm:px-6 py-8 lg:py-10">
+        <div className="overflow-hidden bg-white dark:bg-stone-900 shadow-sm sm:rounded-2xl">
+          <div className="relative h-28 sm:h-36 overflow-hidden bg-gradient-to-br from-amber-500 via-amber-600 to-amber-700">
             <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
-              <div className="text-4xl sm:text-5xl md:text-6xl" aria-hidden>☕</div>
-              <div className="mt-1.5 sm:mt-2 text-xs sm:text-sm font-medium opacity-90 flex items-center gap-1.5">
-                <span>📍</span> 深圳
-              </div>
+              <div className="text-4xl sm:text-5xl" aria-hidden>🌍</div>
             </div>
           </div>
 
-          <div className="px-4 sm:px-6 py-4 sm:py-5 text-center">
-            <h1 className="text-lg sm:text-xl md:text-2xl font-bold text-stone-800 dark:text-stone-100">
-              报名参加
-            </h1>
-            <p className="mt-2 sm:mt-3 text-xs sm:text-sm leading-relaxed text-stone-500 dark:text-stone-400">
-              填个表，我们会根据场次联系你～
-            </p>
-            <p className="mt-1.5 text-xs text-stone-400 dark:text-stone-500">
-              不是所有报名都会确认，看场次匹配
-            </p>
-
-            {/* 进度提示 */}
-            <div className="mt-4 flex items-center justify-center gap-2">
-              <div className={`h-1.5 flex-1 max-w-[120px] rounded-full transition-colors ${step === 1 ? "bg-amber-500" : "bg-amber-200 dark:bg-amber-800"}`} />
-              <span className="text-xs font-medium text-stone-500 dark:text-stone-400">
-                {step === 1 ? "第一步" : "第二步"}
-              </span>
-              <div className={`h-1.5 flex-1 max-w-[120px] rounded-full transition-colors ${step === 2 ? "bg-amber-500" : "bg-stone-200 dark:bg-stone-700"}`} />
-            </div>
-          </div>
-        </div>
-
-        {selectedSession && (
-          <div className="mt-4 sm:mt-5 mx-4 sm:mx-0 rounded-xl bg-white dark:bg-stone-900 px-4 sm:px-5 py-3 sm:py-4 shadow-sm border border-stone-200 dark:border-stone-800 flex gap-3">
-            {selectedSession.coverImage && (
-              <div className="relative w-16 h-16 sm:w-20 sm:h-20 shrink-0 rounded-lg overflow-hidden">
-                <SessionCoverImage src={selectedSession.coverImage} alt="" type={selectedSession.type} fill sizes="72px" className="object-cover" />
-              </div>
-            )}
-            <div className="min-w-0 flex-1 text-left">
-              <p className="text-[10px] sm:text-xs text-stone-500 dark:text-stone-500 mb-0.5">已选场次</p>
-              <p className="font-medium text-stone-800 dark:text-stone-100 text-sm sm:text-base">{selectedSession.title}</p>
-              <p className="text-xs sm:text-sm text-stone-500 dark:text-stone-500">{selectedSession.date} {selectedSession.time} · {selectedSession.place}</p>
-            </div>
-          </div>
-        )}
-
-        <form
-          onSubmit={handleSubmit}
-          className="mt-0 sm:mt-5 bg-white dark:bg-stone-900 px-4 sm:px-6 md:px-8 pb-8 pt-6 sm:pt-8 shadow-sm sm:rounded-b-2xl sm:shadow-md border border-t-0 sm:border border-stone-200 dark:border-stone-800"
-        >
-          {step === 1 ? (
-            <div className="space-y-6">
-              <div className="space-y-4">
-                <h3 className="text-sm font-semibold text-stone-700 dark:text-stone-300">基本信息</h3>
-                <Field label="城市">
-                  <CitySelect value={form.city} onChange={(v) => set("city", v)} required />
-                </Field>
-                <Field label="想参加的场次">
-                  <select
-                    value={form.session}
-                    onChange={(e) => {
-                      const sid = e.target.value;
-                      const s = SESSIONS.find((x) => x.id === sid);
-                      setForm((prev) => ({ ...prev, session: sid, city: s?.city || prev.city }));
-                    }}
-                    required
-                    className={`form-input appearance-none ${form.session ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
-                  >
-                    <option value="" disabled>请选择</option>
-                    {SESSIONS.map((s) => (
-                      <option key={s.id} value={s.id}>
-                        {s.title} · {s.city} · {s.date} {s.time}
-                      </option>
-                    ))}
-                  </select>
-                </Field>
-                <Field label="年龄段">
-                  <select
-                    value={form.ageRange}
-                    onChange={(e) => set("ageRange", e.target.value)}
-                    required
-                    className={`form-input appearance-none ${form.ageRange ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
-                  >
-                    <option value="" disabled>请选择</option>
-                    {ageOptions.map((o) => (
-                      <option key={o} value={o}>{o}</option>
-                    ))}
-                  </select>
-                </Field>
-                <Field label="当前状态">
-                  <select
-                    value={form.status}
-                    onChange={(e) => set("status", e.target.value)}
-                    required
-                    className={`form-input appearance-none ${form.status ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
-                  >
-                    <option value="" disabled>请选择</option>
-                    {statusOptions.map((o) => (
-                      <option key={o.value} value={o.value}>{o.label}</option>
-                    ))}
-                  </select>
-                </Field>
-                <Field label="想参加的活动类型">
-                  <select
-                    value={form.activityType}
-                    onChange={(e) => set("activityType", e.target.value)}
-                    required
-                    className={`form-input appearance-none ${form.activityType ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
-                  >
-                    <option value="" disabled>请选择</option>
-                    {activityTypeOptions.map((o) => (
-                      <option key={o.value} value={o.value}>{o.label}</option>
-                    ))}
-                  </select>
-                </Field>
+          <div className="px-4 sm:px-6 py-5 sm:py-6">
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <div>
+                <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">
+                  小红书主页链接 <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="url"
+                  value={xiaohongshuUrl}
+                  onChange={(e) => {
+                    setXiaohongshuUrl(e.target.value);
+                    setUrlError(null);
+                  }}
+                  onBlur={handleUrlBlur}
+                  placeholder="https://www.xiaohongshu.com/user/profile/xxx"
+                  required
+                  className="form-input"
+                />
+                {validating && (
+                  <p className="mt-1.5 text-xs text-amber-600 dark:text-amber-400">校验中…</p>
+                )}
+                {urlError && !validating && (
+                  <p className="mt-1.5 text-xs text-red-600 dark:text-red-400">{urlError}</p>
+                )}
+                {profile && !urlError && (
+                  <p className="mt-1.5 text-xs text-emerald-600 dark:text-emerald-400">
+                    {"\u2713 \u5df2\u83b7\u53d6\uff1a"}{profile.nickname}
+                    {profile.redbookId && ` \u00b7 @${profile.redbookId}`}
+                    {profile.ipLocation && ` \u00b7 ${profile.ipLocation}`}
+                    {profile.personalLink && ` \u00b7 ${profile.personalLink}`}
+                    {followingDisplay && ` \u00b7 \u5173\u6ce8 ${followingDisplay}`}
+                    {followersDisplay && ` \u00b7 \u7c89\u4e1d ${followersDisplay}`}
+                    {likesDisplay && ` \u00b7 \u83b7\u8d5e\u4e0e\u6536\u85cf ${likesDisplay}`}
+                    {safePostCountDisplay && ` \u00b7 \u53d1\u5e16 ${safePostCountDisplay}`}
+                    {` \u00b7 ${profileGenderLabel}`}
+                  </p>
+                )}
+                {((profile) => false ? (
+                  <p className="mt-1.5 text-xs text-emerald-600 dark:text-emerald-400">
+                    ✓ 已获取：{profile.nickname}
+                    {profile.redbookId && ` · @${profile.redbookId}`}
+                    {profile.ipLocation && ` · ${profile.ipLocation}`}
+                    {profile.personalLink && ` · ${profile.personalLink}`}
+                    {profile.following != null && ` · 关注 ${profile.following}`}
+                    {profile.followers != null && ` · 粉丝 ${profile.followers}`}
+                    {profile.likesAndCollects != null && ` · 获赞与收藏 ${profile.likesAndCollects}`}
+                    {profile.postCount != null && ` · 发帖 ${profile.postCount} 篇`}
+                    {profile.gender && ` · ${profile.gender === "female" ? "女" : "男"}`}
+                  </p>
+                ) : null)(profile as NonNullable<typeof profile>)}
               </div>
 
-              <div className="pt-4 border-t border-stone-100 dark:border-stone-700 space-y-4">
-                <h3 className="text-sm font-semibold text-stone-700 dark:text-stone-300">简单介绍</h3>
-                <Field label="一句话介绍自己">
+              <div>
+                <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">
+                  职业 <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="text"
+                  maxLength={140}
+                  placeholder="您的职业或专业"
+                  value={profession}
+                  onChange={(e) => setProfession(e.target.value)}
+                  required
+                  className="form-input"
+                />
+              </div>
+
+              <div className="grid sm:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">
+                    微信号
+                  </label>
                   <input
                     type="text"
                     maxLength={140}
-                    placeholder="简单介绍一下自己"
-                    value={form.intro}
-                    onChange={(e) => set("intro", e.target.value)}
-                    required
+                    placeholder="用于拉群"
+                    value={wechat}
+                    onChange={(e) => setWechat(e.target.value)}
                     className="form-input"
                   />
-                </Field>
-                <Field label="为什么想参加">
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">
+                    手机号
+                  </label>
                   <input
-                    type="text"
-                    maxLength={200}
-                    placeholder="简单说说你的期待"
-                    value={form.whyJoin}
-                    onChange={(e) => set("whyJoin", e.target.value)}
-                    required
+                    type="tel"
+                    maxLength={11}
+                    pattern="^\d{11}$"
+                    placeholder="请输入11位手机号"
+                    value={phone}
+                    onChange={(e) => setPhone(e.target.value.replace(/\D/g, "").slice(0, 11))}
                     className="form-input"
                   />
-                </Field>
+                </div>
+              </div>
+              <p className="text-xs text-stone-500 dark:text-stone-400 -mt-2">
+                微信号和手机号至少填写一项
+              </p>
+
+              <div>
+                <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">
+                  自我介绍 <span className="text-red-500">*</span>
+                </label>
+                <textarea
+                  maxLength={500}
+                  rows={5}
+                  placeholder="分享您的经历、兴趣或加入原因，越详细越好哦~"
+                  value={intro}
+                  onChange={(e) => setIntro(e.target.value)}
+                  required
+                  className="form-input min-h-[120px] resize-none"
+                />
+                <span className="text-xs text-stone-400 dark:text-stone-500">
+                  {intro.length}/500
+                </span>
               </div>
 
-              <button
-                type="button"
-                onClick={() => setStep(2)}
-                disabled={!canProceedStep1}
-                className="w-full rounded-xl bg-amber-600 py-3 sm:py-3.5 text-base font-medium text-white transition-colors hover:bg-amber-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-amber-600 mt-6"
-              >
-                下一步：填写联系方式
-              </button>
-            </div>
-          ) : (
-            <div className="space-y-6">
-              <button
-                type="button"
-                onClick={() => setStep(1)}
-                className="text-sm text-stone-500 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400"
-              >
-                ← 返回上一步
-              </button>
-
-              <div className="space-y-4">
-                <h3 className="text-sm font-semibold text-stone-700 dark:text-stone-300">联系方式与确认</h3>
-                <Field label="昵称">
-                  <input
-                    type="text"
-                    maxLength={40}
-                    placeholder="活动中使用的称呼"
-                    value={form.nickname}
-                    onChange={(e) => set("nickname", e.target.value)}
-                    required
-                    className="form-input"
-                  />
-                </Field>
-                <Field label="微信号或手机号">
-                  <div>
-                    <input
-                      type="text"
-                      maxLength={50}
-                      placeholder="用于活动联系"
-                      value={form.wechatOrPhone}
-                      onChange={(e) => set("wechatOrPhone", e.target.value)}
-                      required
-                      className="form-input"
-                    />
-                    <p className="mt-1.5 text-xs text-stone-500 dark:text-stone-400">
-                      仅用于活动确认，不会公开给其他报名者
-                    </p>
-                  </div>
-                </Field>
-                <Field label="小红书主页地址">
-                  <div>
-                    <input
-                      type="url"
-                      maxLength={200}
-                      placeholder="https://www.xiaohongshu.com/user/profile/xxx"
-                      value={form.xiaohongshuUrl}
-                      onChange={(e) => set("xiaohongshuUrl", e.target.value)}
-                      required
-                      className="form-input"
-                    />
-                    <p className="mt-1.5 text-xs text-stone-500 dark:text-stone-400">
-                      用于展示头像与昵称，提交前会校验
-                    </p>
-                  </div>
-                </Field>
-                <Field label="平时常活动区域">
+              <div className="grid sm:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">
+                    学历 <span className="text-red-500">*</span>
+                  </label>
                   <select
-                    value={form.region}
-                    onChange={(e) => set("region", e.target.value)}
-                    className={`form-input appearance-none ${form.region ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
-                  >
-                    <option value="">请选择（选填）</option>
-                    {regions.map((r) => (
-                      <option key={r} value={r}>{r}</option>
-                    ))}
-                  </select>
-                </Field>
-                <Field label="是否第一次参加类似活动">
-                  <select
-                    value={form.firstTime}
-                    onChange={(e) => set("firstTime", e.target.value)}
+                    value={education}
+                    onChange={(e) => setEducation(e.target.value)}
                     required
-                    className={`form-input appearance-none ${form.firstTime ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                    className={`form-input appearance-none ${education ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
                   >
-                    <option value="" disabled>请选择</option>
-                    {firstTimeOptions.map((o) => (
+                    <option value="">请选择</option>
+                    {educationOptions.map((o) => (
                       <option key={o} value={o}>{o}</option>
                     ))}
                   </select>
-                </Field>
-                <Field label="可参加时间">
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">
+                    毕业时间 <span className="text-red-500">*</span>
+                  </label>
                   <select
-                    value={form.availableTime}
-                    onChange={(e) => set("availableTime", e.target.value)}
-                    className={`form-input appearance-none ${form.availableTime ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                    value={graduationYear}
+                    onChange={(e) => setGraduationYear(e.target.value)}
+                    required
+                    className={`form-input appearance-none ${graduationYear ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
                   >
-                    <option value="">请选择（选填）</option>
-                    {availableTimeOptions.map((o) => (
-                      <option key={o.value} value={o.value}>{o.label}</option>
+                    <option value="">请选择</option>
+                    {graduationYears.map((y) => (
+                      <option key={y} value={y}>{y}</option>
                     ))}
                   </select>
-                </Field>
+                </div>
               </div>
+              <p className="text-xs text-stone-500 dark:text-stone-400 -mt-2">
+                年龄将根据学历和毕业时间推算
+              </p>
 
-              <div className="pt-4 border-t border-stone-100 dark:border-stone-700">
+              <div>
                 <label className="flex items-start gap-3 cursor-pointer">
                   <input
                     type="checkbox"
-                    checked={form.agreeRules}
-                    onChange={(e) => set("agreeRules", e.target.checked)}
+                    checked={agreeRules}
+                    onChange={(e) => setAgreeRules(e.target.checked)}
                     required
                     className="mt-1 rounded border-stone-300 text-amber-600 focus:ring-amber-500"
                   />
                   <span className="text-xs sm:text-sm text-stone-600 dark:text-stone-400">
-                    我已阅读并同意活动规则（公开场地、尊重边界、如有不适可随时离开）
+                    我已阅读并同意社区规则
                   </span>
                 </label>
               </div>
 
-              <p className="text-xs text-stone-500 dark:text-stone-400">
-                提交后我们会根据场次与匹配度联系合适报名者，通过微信/短信确认地点与时间。若当前场次不匹配，不会反复打扰。
-              </p>
+              {error && (
+                <p className="rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-3 text-sm text-red-600 dark:text-red-400">
+                  {error}
+                </p>
+              )}
 
-              <div className="pt-2">
-                {error && (
-                  <p className="mb-4 rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-3 text-center text-sm text-red-600 dark:text-red-400">
-                    {error}
-                  </p>
-                )}
-                <button
-                  type="submit"
-                  disabled={submitting}
-                  className="w-full rounded-xl bg-amber-600 py-3 sm:py-3.5 sm:py-4 text-base sm:text-lg font-medium text-white transition-colors hover:bg-amber-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-70"
-                >
-                  {submitting ? "提交中…" : "提交报名"}
-                </button>
-              </div>
-            </div>
-          )}
-        </form>
+              <button
+                type="submit"
+                disabled={submitting || !!urlError || validating}
+                className="w-full rounded-xl bg-amber-600 py-3.5 text-base font-medium text-white transition-colors hover:bg-amber-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {submitting ? "提交中…" : "提交报名"}
+              </button>
+            </form>
+          </div>
+        </div>
 
-        <div className="mt-4 sm:mt-6 text-center px-4">
-          <Link href="/" className="text-xs sm:text-sm text-stone-400 dark:text-stone-500 transition-colors hover:text-amber-600">
+        <div className="mt-4 text-center">
+          <Link href="/" className="text-xs sm:text-sm text-stone-400 dark:text-stone-500 hover:text-amber-600">
             ← 返回首页
           </Link>
         </div>
@@ -481,20 +499,3 @@ export default function JoinPage() {
     </div>
   );
 }
-
-function Field({
-  label,
-  children,
-}: {
-  label: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="flex flex-col gap-2 py-3">
-      <label className="text-sm sm:text-base font-medium text-stone-700 dark:text-stone-300">
-        {label}
-      </label>
-      <div className="min-w-0">{children}</div>
-    </div>
-  );
-}