'style3

app/join/page.tsx

@@ -2,7 +2,10 @@
 
 import { useState, useEffect, 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";
 
 const ageOptions = ["18-24", "25-30", "31-35", "36-40", "40+"];
 const firstTimeOptions = ["是，第一次参加", "否，参加过类似活动"];
@@ -29,7 +32,7 @@ function getSessionInfo(sessionId: string) {
 
 export default function JoinPage() {
   const [form, setForm] = useState<FormData>({
-    city: "北京",
+    city: "",
     session: "",
     nickname: "",
     ageRange: "",
@@ -44,7 +47,14 @@ export default function JoinPage() {
 
   useEffect(() => {
     const sid = getSessionFromUrl();
-    if (sid) setForm((prev) => ({ ...prev, session: sid }));
+    if (sid) {
+      const s = SESSIONS.find((x) => x.id === sid);
+      setForm((prev) => ({
+        ...prev,
+        session: sid,
+        city: s?.city || prev.city,
+      }));
+    }
   }, []);
 
   const set = (key: keyof FormData, value: string | boolean) =>
@@ -85,18 +95,18 @@ export default function JoinPage() {
 
   if (submitted) {
     return (
-        <div className="flex min-h-screen items-center justify-center bg-[#faf8f5] dark:bg-stone-950 px-4">
-        <div className="w-full max-w-md animate-fade-in rounded-2xl bg-white dark:bg-stone-900 p-10 text-center shadow-lg border border-stone-200 dark:border-stone-800">
-          <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-5xl">
+      <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-2xl font-bold text-slate-800 dark:text-slate-100">报名成功</h2>
-          <p className="mt-3 text-slate-500 dark:text-slate-400">
+          <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>
           <Link
             href="/"
-            className="mt-8 inline-flex items-center gap-2 rounded-xl bg-amber-600 px-8 py-3 font-medium text-white transition-colors hover:bg-amber-700"
+            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"
           >
             ← 返回首页
           </Link>
@@ -107,69 +117,83 @@ export default function JoinPage() {
 
   return (
     <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
-      <div className="mx-auto max-w-2xl px-0 py-0 sm:px-6 sm:py-10 lg:py-14">
+      {/* 顶部栏 */}
+      <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">
+            ← 返回
+          </Link>
+          <ThemeToggle />
+        </div>
+      </header>
+
+      <div className="mx-auto max-w-2xl px-0 py-0 sm:px-6 sm:py-8 lg:py-10">
         <div className="overflow-hidden bg-white dark:bg-stone-900 shadow-sm sm:rounded-t-2xl">
-          <div className="relative h-40 overflow-hidden bg-gradient-to-br from-amber-500 via-amber-600 to-amber-700 sm:h-52">
+          <div className="relative h-32 sm:h-40 md:h-52 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-6xl sm:text-7xl">☕</div>
-              <div className="mt-2 text-sm font-medium opacity-90">
-                北京周末新朋友活动
+              <div className="text-5xl sm:text-6xl md:text-7xl" 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>
           </div>
 
-          <div className="px-5 py-5 text-center sm:px-8 sm:py-7">
-            <h1 className="text-xl font-bold text-slate-800 dark:text-slate-100 sm:text-2xl">
+          <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-3 whitespace-pre-line text-sm leading-relaxed text-slate-500 dark:text-slate-400 sm:text-base">
-              填个简单表单即可，无需注册登录，不收费
+            <p className="mt-2 sm:mt-3 text-xs sm:text-sm leading-relaxed text-stone-500 dark:text-stone-400">
+              ✍️ 填表即可 · 无需注册 · 不收费
             </p>
           </div>
         </div>
 
         {selectedSession && (
-          <div className="mt-5 rounded-xl bg-white dark:bg-stone-900 px-5 py-4 shadow-sm border border-stone-200 dark:border-stone-800">
-            <p className="text-xs text-slate-500 dark:text-slate-500 mb-1">已选场次</p>
-            <p className="font-medium text-slate-800 dark:text-slate-100">{selectedSession.title}</p>
-            <p className="text-sm text-slate-500 dark:text-slate-500">{selectedSession.date} {selectedSession.time} · {selectedSession.place}</p>
+          <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="80px" 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 bg-white dark:bg-stone-900 px-5 pb-8 pt-2 shadow-sm sm:mt-5 sm:rounded-xl sm:px-8 sm:py-8 sm:shadow-md border border-stone-200 dark:border-stone-800"
+          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"
         >
-          <div className="grid gap-0 sm:grid-cols-2 sm:gap-6">
+          <div className="space-y-4 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6">
             <Field label="📍 城市">
-              <input
-                type="text"
-                placeholder="如：北京"
-                value={form.city}
-                onChange={(e) => set("city", e.target.value)}
-                required
-                className="form-input"
-              />
+              <CitySelect value={form.city} onChange={(v) => set("city", v)} required />
             </Field>
 
             <Field label="📅 想参加的场次">
               <select
                 value={form.session}
-                onChange={(e) => set("session", e.target.value)}
+                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-slate-800 dark:text-slate-100" : "text-slate-400 dark:text-slate-500"}`}
+                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.date} {s.time}
+                    {s.title} · {s.city} · {s.date} {s.time}
                   </option>
                 ))}
               </select>
             </Field>
           </div>
 
-          <div className="grid gap-0 sm:grid-cols-2 sm:gap-6">
+          <div className="mt-4 sm:mt-6 space-y-4 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6">
             <Field label="昵称">
               <input
                 type="text"
@@ -187,7 +211,7 @@ export default function JoinPage() {
                 value={form.ageRange}
                 onChange={(e) => set("ageRange", e.target.value)}
                 required
-                className={`form-input appearance-none ${form.ageRange ? "text-slate-800 dark:text-slate-100" : "text-slate-400 dark:text-slate-500"}`}
+                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) => (
@@ -197,8 +221,8 @@ export default function JoinPage() {
             </Field>
           </div>
 
-          <div className="border-b border-slate-100 dark:border-gray-700 py-4 sm:py-5">
-            <label className="mb-2 block text-base font-bold text-slate-700 dark:text-slate-300 sm:text-[17px]">
+          <div className="mt-4 sm:mt-6 pt-4 sm:pt-5 border-t border-stone-100 dark:border-stone-700">
+            <label className="mb-2 block text-sm sm:text-base font-bold text-stone-700 dark:text-stone-300">
               微信号或手机号
             </label>
             <input
@@ -212,8 +236,8 @@ export default function JoinPage() {
             />
           </div>
 
-          <div className="border-b border-slate-100 dark:border-gray-700 py-4 sm:py-5">
-            <label className="mb-2 block text-base font-bold text-slate-700 dark:text-slate-300 sm:text-[17px]">
+          <div className="mt-4 sm:mt-5 pt-4 sm:pt-5 border-t border-stone-100 dark:border-stone-700">
+            <label className="mb-2 block text-sm sm:text-base font-bold text-stone-700 dark:text-stone-300">
               一句话自我介绍
             </label>
             <input
@@ -227,15 +251,15 @@ export default function JoinPage() {
             />
           </div>
 
-          <div className="border-b border-slate-100 dark:border-gray-700 py-4 sm:py-5">
-            <label className="mb-2 block text-base font-bold text-slate-700 dark:text-slate-300 sm:text-[17px]">
+          <div className="mt-4 sm:mt-5 pt-4 sm:pt-5 border-t border-stone-100 dark:border-stone-700">
+            <label className="mb-2 block text-sm sm:text-base font-bold text-stone-700 dark:text-stone-300">
               是否第一次参加类似活动
             </label>
             <select
               value={form.firstTime}
               onChange={(e) => set("firstTime", e.target.value)}
               required
-              className={`form-input appearance-none ${form.firstTime ? "text-slate-800 dark:text-slate-100" : "text-slate-400 dark:text-slate-500"}`}
+              className={`form-input appearance-none ${form.firstTime ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
             >
               <option value="" disabled>请选择</option>
               {firstTimeOptions.map((o) => (
@@ -244,7 +268,7 @@ export default function JoinPage() {
             </select>
           </div>
 
-          <div className="py-4 sm:py-5">
+          <div className="mt-4 sm:mt-5 pt-4 sm:pt-5 border-t border-stone-100 dark:border-stone-700">
             <label className="flex items-start gap-3 cursor-pointer">
               <input
                 type="checkbox"
@@ -253,13 +277,13 @@ export default function JoinPage() {
                 required
                 className="mt-1 rounded border-stone-300 text-amber-600 focus:ring-amber-500"
               />
-              <span className="text-sm text-slate-600 dark:text-slate-400">
+              <span className="text-xs sm:text-sm text-stone-600 dark:text-stone-400">
                 我已阅读并同意活动规则（公开场地、尊重边界、如有不适可随时离开）
               </span>
             </label>
           </div>
 
-          <div className="mt-8 sm:mt-10">
+          <div className="mt-6 sm:mt-8 sm:mt-10">
             {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}
@@ -268,15 +292,15 @@ export default function JoinPage() {
             <button
               type="submit"
               disabled={submitting}
-              className="w-full rounded-xl bg-amber-600 py-3.5 text-lg font-medium text-white transition-colors hover:bg-amber-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-70 sm:py-4"
+              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>
         </form>
 
-        <div className="mt-6 text-center">
-          <Link href="/" className="text-sm text-stone-400 dark:text-stone-500 transition-colors hover:text-amber-600">
+        <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">
             ← 返回首页
           </Link>
         </div>
@@ -293,8 +317,8 @@ function Field({
   children: React.ReactNode;
 }) {
   return (
-    <div className="relative flex items-center gap-3 py-3.5 sm:flex-col sm:items-stretch sm:gap-0 sm:py-4 border-b border-slate-100 dark:border-gray-700 sm:border-b-0">
-      <label className="w-[90px] shrink-0 text-[15px] font-bold text-slate-700 dark:text-slate-300 sm:mb-2 sm:w-auto sm:text-[17px]">
+    <div className="relative flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-0 py-3 sm:py-4 border-b border-stone-100 dark:border-stone-700 sm:border-b-0 last:border-b-0">
+      <label className="shrink-0 text-sm sm:text-base font-bold text-stone-700 dark:text-stone-300 sm:mb-0 sm:w-[100px]">
         {label}
       </label>
       <div className="relative min-w-0 flex-1">{children}</div>