'小红书解析

2026-03-16 04:28:16 -05:00
parent ff135563fb
commit ff31ef8001
15 changed files with 700 additions and 403 deletions
--- a/app/api/join/route.ts
+++ b/app/api/join/route.ts
@@ -28,8 +28,15 @@ export async function POST(request: NextRequest) {
    const city = String(formData.city || "").trim();
    const session = String(formData.session || "").trim();
    const ageRange = String(formData.age_range || "").trim();
-    const wechatOrPhone = String(formData.wechat_or_phone || "").trim();
+    const wechatOrPhone = String(formData.wechat_or_phone || formData.wechat || "").trim();
+    const wechat = String(formData.wechat || "").trim();
+    const phone = String(formData.phone || "").trim();
+    const profession = String(formData.profession || "").trim();
+    const education = String(formData.education || "").trim();
+    const graduationYear = String(formData.graduation_year || formData.gradYear || "").trim();
    const xiaohongshuUrl = String(formData.xiaohongshu_url || "").trim();
+    const xiaohongshuAvatarUrl = String(formData.xiaohongshu_avatar_url || formData.media || "").trim();
+    const gender = String(formData.gender || "").trim() || "\u65e0";
    let intro = String(formData.intro || "").trim();
    const firstTime = String(formData.first_time || "").trim();
    const agreeRules = !!formData.agree_rules;
@@ -43,32 +50,59 @@ export async function POST(request: NextRequest) {
      intro = extra;
    }

-    if (!nickname || !wechatOrPhone || !intro || !session || !agreeRules || !xiaohongshuUrl) {
+    const isDigitalNomad = session === "digital-nomad";
+    const contact = wechatOrPhone || wechat || phone;
+    if (!nickname || !intro || !session || !agreeRules || !xiaohongshuUrl) {
      return NextResponse.json(
-        { ok: false, error: "请填写必填项（含小红书主页地址）" },
+        { ok: false, error: "请填写必填项（含小红书主页地址、自我介绍）" },
+        { status: 400 }
+      );
+    }
+    if (!contact) {
+      return NextResponse.json(
+        { ok: false, error: "请填写微信号或手机号" },
+        { status: 400 }
+      );
+    }
+    if (isDigitalNomad && (!education || !graduationYear)) {
+      return NextResponse.json(
+        { ok: false, error: "请选择学历和毕业时间" },
        { status: 400 }
      );
    }

    const userId = getUserIdFromCookie(request) || generateAnonId();

+    const EDUCATION_GRAD_AGE: Record<string, number> = {
+      "高中及以下": 18,
+      大专: 21,
+      本科: 22,
+      硕士: 25,
+      博士: 28,
+    };
+    const gradAge = EDUCATION_GRAD_AGE[education] ?? 22;
+    const estimatedAge = new Date().getFullYear() - parseInt(graduationYear, 10) + gradAge;
+    const ageRangeForRecord = isDigitalNomad && education && graduationYear
+      ? `推算约${estimatedAge}岁(学历${education}+${graduationYear}毕业)`
+      : ageRange;
+
    const record = {
      user_id: userId,
      nickname,
-      occupation: city,
+      occupation: isDigitalNomad ? profession : city,
      reason: intro,
-      wechatId: wechatOrPhone,
+      wechatId: wechat || wechatOrPhone,
      xiaohongshu_url: xiaohongshuUrl,
-      gender: "",
-      education: "",
-      gradYear: "",
-      phone: wechatOrPhone,
+      gender,
+      education: education,
+      gradYear: graduationYear,
+      phone: phone || wechatOrPhone,
      single: "",
-      media: "",
+      media: xiaohongshuAvatarUrl,
      type: session,
      order_id: "",
      amount: 0,
-      age_range: ageRange,
+      age_range: ageRangeForRecord,
      first_time: firstTime,
    };

--- a/app/api/xiaohongshu/profile/route.ts
+++ b/app/api/xiaohongshu/profile/route.ts
@@ -0,0 +1,63 @@
+import { NextRequest, NextResponse } from "next/server";
+import { resolvePaymentApiUrl } from "@/config/domain.config";
+
+export const maxDuration = 60;
+
+/** 开发环境优先使用本地 salonapi，避免 PAYMENT_API_URL 指向远程时 404 */
+function getSalonApiBase(): string {
+  if (process.env.NODE_ENV === "development") {
+    const port = process.env.PAYJSAPI_PORT || "8007";
+    const host = process.env.SALONAPI_HOST || "127.0.0.1";
+    return `http://${host}:${port}`;
+  }
+  return resolvePaymentApiUrl();
+}
+
+/** 代理到 salonapi 获取小红书用户资料 */
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const url = String(body?.url || "").trim();
+
+    if (!url) {
+      return NextResponse.json({ ok: false, error: "请输入小红书链接" }, { status: 400 });
+    }
+
+    const apiBase = getSalonApiBase();
+    const res = await fetch(`${apiBase}/api/salon/xiaohongshu/profile`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ url }),
+      signal: AbortSignal.timeout(50000),
+    });
+
+    const data = await res.json().catch(() => ({}));
+
+    if (res.ok && data?.ok) {
+      return NextResponse.json({
+        ok: true,
+        nickname: data.nickname,
+        gender: data.gender,
+        avatarUrl: data.avatarUrl ?? undefined,
+        followers: data.followersText ?? data.followers ?? 0,
+        followersText: data.followersText ?? undefined,
+        following: data.followingText ?? data.following ?? 0,
+        followingText: data.followingText ?? undefined,
+        likesAndCollects: data.likesAndCollectsText ?? data.likesAndCollects ?? 0,
+        likesAndCollectsText: data.likesAndCollectsText ?? undefined,
+        postCount: data.postCount ?? 0,
+        postCountText: data.postCountText ?? undefined,
+        redbookId: data.redbookId ?? undefined,
+        ipLocation: data.ipLocation ?? undefined,
+        personalLink: data.personalLink ?? undefined,
+        resolvedUrl: data.resolvedUrl ?? undefined,
+      });
+    }
+
+    const error = data?.detail ?? data?.error ?? "无法解析用户资料，请确认链接有效";
+    return NextResponse.json({ ok: false, error }, { status: res.status >= 400 ? res.status : 400 });
+  } catch (e) {
+    const msg = e instanceof Error ? e.message : "获取资料失败";
+    return NextResponse.json({ ok: false, error: msg }, { status: 500 });
+  }
+}
--- a/app/api/xiaohongshu/validate/route.ts
+++ b/app/api/xiaohongshu/validate/route.ts
@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from "next/server";
+
+/** 支持：xiaohongshu.com/user/profile/xxx、xhslink.com/user/profile/xxx、xhslink.com/m/xxx 短链 */
+const XH_PROFILE_PATTERN = /^https?:\/\/(www\.)?(xiaohongshu\.com|xhslink\.com)\/user\/profile\/[a-zA-Z0-9_-]+/i;
+const XH_SHORT_PATTERN = /^https?:\/\/xhslink\.com\/m\/[a-zA-Z0-9_-]+/i;
+
+function isValidUrl(url: string): boolean {
+  return XH_PROFILE_PATTERN.test(url) || XH_SHORT_PATTERN.test(url);
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const url = String(body?.url || "").trim();
+
+    if (!url) {
+      return NextResponse.json({ valid: false, error: "请输入小红书链接" }, { status: 400 });
+    }
+
+    const valid = isValidUrl(url);
+    if (!valid) {
+      return NextResponse.json({ valid: false, error: "小红书link异常" }, { status: 200 });
+    }
+
+    return NextResponse.json({ valid: true });
+  } catch {
+    return NextResponse.json({ valid: false, error: "校验失败" }, { status: 500 });
+  }
+}
--- a/app/components/AddressLink.tsx
+++ b/app/components/AddressLink.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+interface AddressLinkProps {
+  place: string;
+  city: string;
+  className?: string;
+}
+
+/** 可点击的地址，点击打开地图（使用 span 避免嵌套在 Link 内时的 a 标签冲突） */
+export default function AddressLink({ place, city, className = "" }: AddressLinkProps) {
+  const query = encodeURIComponent(`${city}${place}`);
+  const mapUrl = `https://www.google.com/maps/search/?api=1&query=${query}`;
+
+  return (
+    <span
+      role="link"
+      tabIndex={0}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        window.open(mapUrl, "_blank", "noopener,noreferrer");
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          window.open(mapUrl, "_blank", "noopener,noreferrer");
+        }
+      }}
+      className={`inline-flex items-center gap-1 text-stone-500 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors cursor-pointer ${className}`}
+      title="点击打开地图"
+    >
+      <span className="inline-block" aria-hidden>📍</span>
+      {place}
+    </span>
+  );
+}
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -4,11 +4,12 @@ export default function Footer() {
  return (
    <footer className="border-t border-stone-200 dark:border-stone-800 mt-12 py-8">
      <div className="max-w-[900px] mx-auto px-5 sm:px-8 text-center text-sm text-stone-500 dark:text-stone-400">
-        <div className="flex flex-wrap justify-center gap-x-4 gap-y-1 mb-3">
-          <Link href="/history" className="hover:text-amber-600 dark:hover:text-amber-400">
-            历史活动
-          </Link>
-        </div>
+        <Link
+          href="/join"
+          className="inline-flex items-center gap-1.5 mb-4 text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300 font-medium"
+        >
+          <span aria-hidden>🙋</span> 招募志愿者
+        </Link>
        <p>© {new Date().getFullYear()} Salon · 深圳 周末轻社交</p>
      </div>
    </footer>
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -11,9 +11,6 @@ export default function Header() {
          Salon
        </Link>
        <nav className="flex items-center gap-4 sm:gap-6">
-          <Link href="/history" className="text-sm text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400">
-            历史活动
-          </Link>
          <ThemeToggle />
        </nav>
      </div>
--- a/app/components/HeroSection.tsx
+++ b/app/components/HeroSection.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import SessionCoverImage from "./SessionCoverImage";
+import AddressLink from "./AddressLink";
 import { SESSIONS, RECENT_JOINERS } from "@/config/home.config";

 const MOCK_JOINERS = RECENT_JOINERS.slice(0, 3);
@@ -35,7 +36,7 @@ export default function HeroSection() {
            <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-[2.5rem] xl:text-[2.75rem] font-bold tracking-tight leading-[1.25]">
              <span className="hero-gradient-text">周末留两小时</span>
              <br />
-              <span className="text-stone-800 dark:text-stone-100">去loft民宿，认识几位同频的人</span>
+              <span className="text-stone-800 dark:text-stone-100">认识几位同频的人</span>
            </h1>
            <p className="mt-4 sm:mt-5 text-stone-600 dark:text-stone-400 text-sm sm:text-base max-w-lg leading-relaxed">
              深圳 · 6–8 人小圈子
@@ -92,7 +93,7 @@ export default function HeroSection() {
                  </p>
                  <h3 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base">{mainSession.title}</h3>
                  <p className="text-xs sm:text-sm text-stone-500 dark:text-stone-400 mt-0.5">
-                    {mainSession.date} {mainSession.time} · {mainSession.place}
+                    {mainSession.date} {mainSession.time} · <AddressLink place={mainSession.place} city={mainSession.city} />
                  </p>
                  <span className="inline-flex items-center gap-1 mt-3 text-amber-600 dark:text-amber-400 font-medium text-xs sm:text-sm">
                    报名这场 →
--- a/app/components/SessionCard.tsx
+++ b/app/components/SessionCard.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import SessionCoverImage from "./SessionCoverImage";
+import AddressLink from "./AddressLink";
 import { SESSIONS, ACTIVITY_TYPES, SESSION_TAGS, RECENT_JOINERS } from "@/config/home.config";

 interface JoinStats {
@@ -73,7 +74,7 @@ export default function SessionCard({
          {session.title}
        </h3>
        <p className="text-xs sm:text-sm text-stone-500 dark:text-stone-400 mt-0.5">
-          {session.date} {session.time} · {session.place}
+          {session.date} {session.time} · <AddressLink place={session.place} city={session.city} />
        </p>
        <span className="inline-flex items-center gap-1 mt-2 sm:mt-3 text-amber-600 dark:text-amber-400 text-xs sm:text-sm font-medium">
          报名这场 →
--- a/app/globals.css
+++ b/app/globals.css
@@ -127,3 +127,12 @@ body {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
 }
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.4s ease-out forwards;
+}
--- a/app/history/[id]/page.tsx
+++ b/app/history/[id]/page.tsx
@@ -3,6 +3,7 @@
 import { useParams } from "next/navigation";
 import Link from "next/link";
 import SessionCoverImage from "../../components/SessionCoverImage";
+import AddressLink from "../../components/AddressLink";
 import Header from "../../components/Header";
 import Footer from "../../components/Footer";
 import { PAST_SESSIONS } from "@/config/home.config";
@@ -64,7 +65,9 @@ export default function HistoryDetailPage() {
              </div>
              <div>
                <dt className="text-stone-500 dark:text-stone-400">地点</dt>
-                <dd className="font-medium text-stone-800 dark:text-stone-100">{session.place}</dd>
+                <dd className="font-medium text-stone-800 dark:text-stone-100">
+                  <AddressLink place={session.place} city={session.city} className="text-stone-800 dark:text-stone-100" />
+                </dd>
              </div>
              <div>
                <dt className="text-stone-500 dark:text-stone-400">城市</dt>
--- a/app/host/[id]/page.tsx
+++ b/app/host/[id]/page.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import Image from "next/image";
+import Link from "next/link";
+import Header from "../../components/Header";
+import Footer from "../../components/Footer";
+import { HOSTS } from "@/config/home.config";
+
+export default function HostDetailPage() {
+  const params = useParams();
+  const id = typeof params.id === "string" ? params.id : "";
+  const host = HOSTS.find((h) => h.id === id);
+
+  if (!host) {
+    return (
+      <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950 flex items-center justify-center">
+        <div className="text-center px-4">
+          <p className="text-stone-500 dark:text-stone-400 mb-4">主理人不存在</p>
+          <Link href="/" className="text-amber-600 dark:text-amber-400">
+            返回首页
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
+      <Header />
+      <main className="max-w-[600px] mx-auto px-4 sm:px-6 py-8 sm:py-12">
+        <Link
+          href="/"
+          className="inline-flex items-center gap-1 text-sm text-stone-500 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 mb-6"
+        >
+          ← 返回首页
+        </Link>
+
+        <article className="rounded-2xl overflow-hidden bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-700">
+          <div className="p-6 sm:p-8 text-center">
+            <div className="relative w-24 h-24 sm:w-28 sm:h-28 mx-auto rounded-full overflow-hidden border-4 border-amber-100 dark:border-amber-900/30">
+              <Image
+                src={host.avatar}
+                alt={host.name}
+                fill
+                sizes="112px"
+                className="object-cover"
+                unoptimized
+              />
+            </div>
+            <h1 className="mt-4 text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">
+              {host.name}
+            </h1>
+            <p className="mt-2 text-sm text-amber-600 dark:text-amber-400">
+              {host.bio}
+            </p>
+            <div className="mt-6 pt-6 border-t border-stone-100 dark:border-stone-700 text-left">
+              <p className="text-sm text-stone-600 dark:text-stone-400 leading-relaxed">
+                {host.intro}
+              </p>
+            </div>
+          </div>
+        </article>
+
+        <Link
+          href="/"
+          className="mt-6 inline-flex justify-center w-full sm:w-auto bg-amber-600 hover:bg-amber-700 text-white px-6 py-2.5 rounded-xl text-sm font-medium"
+        >
+          看看本周活动
+        </Link>
+      </main>
+      <Footer />
+    </div>
+  );
+}
--- a/app/join/page.tsx
+++ b/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>
-  );
-}
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,12 @@
 "use client";

 import Link from "next/link";
+import Image from "next/image";
 import HeroSection from "./components/HeroSection";
 import SessionCard from "./components/SessionCard";
 import Footer from "./components/Footer";
 import Header from "./components/Header";
-import { SESSIONS } from "@/config/home.config";
+import { SESSIONS, HOSTS } from "@/config/home.config";

 export default function Home() {
  return (
@@ -116,6 +117,37 @@ export default function Home() {
          </div>
        </section>

+        {/* 主理人 */}
+        <section>
+          <h2 className="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4 sm:mb-5 flex items-center gap-2">
+            <span>👤</span> 主理人
+          </h2>
+          <div className="grid sm:grid-cols-2 gap-3 sm:gap-4">
+            {HOSTS.map((host) => (
+              <Link
+                key={host.id}
+                href={`/host/${host.id}`}
+                className="flex gap-3 sm:gap-4 p-4 sm:p-5 rounded-xl sm:rounded-2xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 hover:border-amber-200 dark:hover:border-amber-900/50 hover:shadow-lg transition-all"
+              >
+                <div className="relative w-14 h-14 sm:w-16 sm:h-16 shrink-0 rounded-full overflow-hidden border-2 border-amber-100 dark:border-amber-900/30">
+                  <Image src={host.avatar} alt={host.name} fill sizes="64px" className="object-cover" unoptimized />
+                </div>
+                <div className="min-w-0 flex-1 text-left">
+                  <h3 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base">
+                    {host.name}
+                  </h3>
+                  <p className="mt-0.5 text-xs sm:text-sm text-stone-500 dark:text-stone-400 line-clamp-2">
+                    {host.bio}
+                  </p>
+                  <span className="inline-flex items-center gap-1 mt-2 text-amber-600 dark:text-amber-400 text-xs font-medium">
+                    查看详情 →
+                  </span>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </section>
+
        {/* FAQ */}
        <section id="faq">
          <h2 className="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4 sm:mb-5 flex items-center gap-2">
--- a/config/home.config.ts
+++ b/config/home.config.ts
@@ -38,6 +38,15 @@ export const PAST_SESSIONS = [
  { id: "past-5", date: "2月24日 周六", time: "14:00", place: "南山区某loft民宿", city: "深圳", type: "skill-exchange" as const, title: "周末技能交换", coverImage: IMG_LOFT_1, tags: ["loft"] as const },
 ];

+/** 主理人 */
+export const HOSTS = [
+  { id: "host-1", name: "主理人1", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120&h=120&fit=crop&crop=face", bio: "数字游民社区发起人，热爱连接同频的人。", intro: "主理人1的详细介绍... 负责周末沙龙的策划与运营，希望打造一个轻松、有温度的线下社交空间。" },
+  { id: "host-2", name: "主理人2", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=120&h=120&fit=crop&crop=face", bio: "副业探索者，相信小圈子有大能量。", intro: "主理人2的详细介绍... 专注副业沙龙与技能交换，帮助大家发现更多可能性。" },
+];
+
+/** 数字游民社区 - 符合条件时显示的微信二维码（需替换为实际图片 URL） */
+export const DIGITAL_NOMAD_WECHAT_QR = "/images/wechat-qr-placeholder.svg";
+
 /** 最近报名意向 - mock 数据，含小红书昵称与主页链接（悬浮显示昵称，点击不跳转） */
 export const RECENT_JOINERS = [
  { name: "晓琪", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face", xiaohongshu_url: "https://www.xiaohongshu.com/user/profile/xxx" },
--- a/public/images/wechat-qr-placeholder.svg
+++ b/public/images/wechat-qr-placeholder.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
+  <rect width="200" height="200" fill="#f5f5f5"/>
+  <text x="100" y="95" text-anchor="middle" font-size="14" fill="#999">®áŒô</text>
+  <text x="100" y="115" text-anchor="middle" font-size="12" fill="#bbb">÷ÿb:žEþG</text>
+</svg>