fix: correct membership back flow and add onboarding paywall

frontend/src/app/globals.css

@@ -749,6 +749,7 @@ button:disabled { cursor: default; opacity: .45; }
 .avatar-randomize { justify-self: start; }
 .avatar-notice { margin-top: var(--space-4); }
 .redeem-modal { width: min(100%, 420px); }
+.paywall-modal { width: min(100%, 480px); }
 .logout-modal { width: min(100%, 400px); }
 .account-modal h2, .auth-panel h1, .admin-header h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.5px; text-wrap: balance; }
 .account-modal h2 { margin: 0; font-size: var(--type-display-sm); letter-spacing: -.025em; }
@@ -758,6 +759,14 @@ button:disabled { cursor: default; opacity: .45; }
 .redeem-balance span { color: var(--color-ink-secondary); font-size: var(--type-caption); }
 .redeem-balance strong { color: var(--color-ink); font-size: var(--type-title-lg); font-variant-numeric: tabular-nums; font-weight: 400; }
 .account-redeem-form { padding-top: var(--space-5); }
+.paywall-intro { display: flex; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-5); }
+.paywall-mark { width: 44px; height: 44px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--color-action-soft); color: var(--color-action); }
+.paywall-mark svg { width: 20px; height: 20px; }
+.paywall-intro b { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: var(--type-title-md); font-weight: 400; }
+.paywall-intro p { margin: var(--space-1) 0 0; color: var(--color-ink-secondary); font-size: var(--type-body-sm); line-height: 1.6; text-wrap: pretty; }
+.paywall-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
+.paywall-footer span { color: var(--color-ink-secondary); font-size: var(--type-caption); }
+.paywall-footer > a, .paywall-footer > button { flex: 0 0 auto; text-decoration: none; }
 .logout-copy { margin: 0; color: var(--color-ink-secondary); font-size: var(--type-body-md); line-height: 1.6; text-wrap: pretty; }
 .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }
 .sheet-section { border-bottom: 1px solid var(--color-border); padding: var(--space-6) 0; border-color: var(--color-border); }
@@ -910,6 +919,8 @@ input:not([class^="ant-"]):not([class*=" ant-"]):not(.ant-picker input):disabled
   .starter-content span { font-size: var(--type-title-sm); }
   .account-modal h2 { font-size: var(--type-title-lg); }
   .account-redeem-form > div { grid-template-columns: 1fr; }
+  .paywall-footer { align-items: stretch; flex-direction: column; }
+  .paywall-footer > a, .paywall-footer > button { width: 100%; }
   .dialog-actions { flex-direction: column-reverse; }
   .dialog-actions > button { width: 100%; }
   .auth-story { min-height: 220px; padding: var(--space-6) var(--space-5); }

frontend/src/app/membership/orders/page.tsx

@@ -84,7 +84,7 @@ export default function MembershipOrdersPage() {
       <div className="membership-shell">
         <header className="membership-header">
           <div className="membership-header-left">
-            <Link className="membership-back" href="/membership" aria-label="返回套餐与会员">
+            <Link className="membership-back" href="/membership" replace aria-label="返回套餐与会员">
               <ArrowLeft aria-hidden="true" />
               <span>返回</span>
             </Link>

frontend/src/app/page.tsx

@@ -20,6 +20,7 @@ import { ChatMessageContent } from "@/components/chat-message-content";
 import { GeneratePersonalReportButton } from "@/components/personal-report/generate-personal-report-button";
 import { AgentAvatar, ChatMessageRow } from "@/components/chat-message-row";
 import { ModelSelector } from "@/components/model-selector";
+import { OnboardingRedeemPaywall } from "@/components/onboarding-redeem-paywall";
 import {
   LocationSearchCombobox,
   type ResolvedBirthLocation,
@@ -74,7 +75,11 @@ import {
 } from "@/lib/birth-time-guided-preview";
 import { defaultGuidedJyotishTopics, generalGuidedJyotishTopics } from "@/lib/guided-jyotish-topics";
 import { keepFocusWithin } from "@/lib/focus-trap";
-import { BALANCE_SYNC_KEY, BALANCE_CHANGED_EVENT, membershipHref } from "@/lib/membership";
+import {
+  BALANCE_SYNC_KEY,
+  BALANCE_CHANGED_EVENT,
+  membershipHref,
+} from "@/lib/membership";
 import { chatMessageViews, type ChatMessage } from "@/lib/chat-message-view";
 import { writeChatSession } from "@/lib/chat-session-write-contract";
 import { consultationReportMarkdown } from "@/lib/consultation-report-export";
@@ -1027,6 +1032,7 @@ export default function Home() {
   const [onboardingError, setOnboardingError] = useState("");
   const [onboardingStep, setOnboardingStep] = useState<OnboardingStep>("name");
   const [onboardingJustCompleted, setOnboardingJustCompleted] = useState(false);
+  const [onboardingPaywallOpen, setOnboardingPaywallOpen] = useState(false);
   const [birthTimeJourney, setBirthTimeJourney] = useState<JourneyClientResponse | null>(null);
   const [birthTimeError, setBirthTimeError] = useState("");
   const [birthTimeAssessmentPhase, setBirthTimeAssessmentPhase] = useState<BirthTimeAssessmentPhase | null>(null);
@@ -1037,6 +1043,7 @@ export default function Home() {
   const accountDialog = useRef<HTMLElement>(null);
   const dialogReturnTarget = useRef<HTMLButtonElement | null>(null);
   const closeButton = useRef<HTMLButtonElement>(null);
+  const onboardingPaywallShown = useRef(false);
   const composerInput = useRef<HTMLTextAreaElement>(null);
   const starterWorkbench = useRef<HTMLDivElement>(null);
   const pendingConsultation = useRef<PendingConsultation | null>(null);
@@ -1709,6 +1716,18 @@ export default function Home() {
     }
   }, [accountId, activeAccountDialog, hydrated, onboardingStep, presetMessageFinished, profileComplete]);
 
+  useEffect(() => {
+    if (uiPreview.current
+      || onboardingPaywallShown.current
+      || !starterHomeVisible
+      || !account
+      || account.credits > 0
+      || account.activeSubscription?.status === "active"
+      || activeAccountDialog !== null) return;
+    onboardingPaywallShown.current = true;
+    setOnboardingPaywallOpen(true);
+  }, [account, activeAccountDialog, starterHomeVisible]);
+
   useEffect(() => {
     if (activeAccountDialog === null) return;
     window.requestAnimationFrame(() => {
@@ -1964,18 +1983,10 @@ export default function Home() {
     dialogReturnTarget.current = returnTarget ?? accountTrigger.current;
     setAccountMenuOpen(false);
     setAccountError("");
-    switch (dialog) {
-      case "profile":
-        setProfileDraft(profile);
-        setProfileNotice("");
-        setAvatarNotice("");
-        break;
-      case "logout":
-        break;
-      default: {
-        const unreachable: never = dialog;
-        return unreachable;
-      }
+    if (dialog === "profile") {
+      setProfileDraft(profile);
+      setProfileNotice("");
+      setAvatarNotice("");
     }
     setActiveAccountDialog(dialog);
   }
@@ -3048,9 +3059,10 @@ export default function Home() {
     pinned: pinnedSessionIds.includes(session.id),
     archived: archivedSessionIds.includes(session.id),
   }));
+  const modalOpen = activeAccountDialog !== null || onboardingPaywallOpen;
 
   return (
-    <SidebarProvider escapeBlocked={accountMenuOpen || activeAccountDialog !== null}>
+    <SidebarProvider escapeBlocked={accountMenuOpen || modalOpen}>
       <main className="chat-app">
         <AppSidebar
           sessions={sidebarSessions}
@@ -3108,7 +3120,7 @@ export default function Home() {
             </section>
           </div>
         ) : null}
-        <SidebarInset className="chat-panel" inert={activeAccountDialog !== null}>
+        <SidebarInset className="chat-panel" inert={modalOpen}>
           <header className="chat-header">
             <SidebarTrigger placement="inset" />
           <div>
@@ -3552,6 +3564,13 @@ export default function Home() {
           </section>
         </div>
       )}
+      {onboardingPaywallOpen && account && (
+        <OnboardingRedeemPaywall
+          credits={account.credits}
+          onClose={() => setOnboardingPaywallOpen(false)}
+          onCreditsChanged={(credits) => setAccount((current) => current ? { ...current, credits } : current)}
+        />
+      )}
       </main>
     </SidebarProvider>
   );

frontend/src/components/onboarding-redeem-paywall.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import Link from "next/link";
+import { Gift, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import type { FormEvent } from "react";
+import { keepFocusWithin } from "@/lib/focus-trap";
+import { membershipHref, notifyBalanceChanged, redeemErrorMessage } from "@/lib/membership";
+
+type OnboardingRedeemPaywallProps = {
+  credits: number;
+  onClose: () => void;
+  onCreditsChanged: (credits: number) => void;
+};
+
+export function OnboardingRedeemPaywall({
+  credits,
+  onClose,
+  onCreditsChanged,
+}: OnboardingRedeemPaywallProps) {
+  const [code, setCode] = useState("");
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const [pending, setPending] = useState(false);
+  const [unlocked, setUnlocked] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const returnTarget = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const focusFrame = window.requestAnimationFrame(() => inputRef.current?.focus());
+    return () => {
+      window.cancelAnimationFrame(focusFrame);
+      window.requestAnimationFrame(() => returnTarget?.focus());
+    };
+  }, []);
+
+  function close() {
+    if (!pending) onClose();
+  }
+
+  async function redeem(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const trimmedCode = code.trim();
+    if (!trimmedCode || pending || unlocked) return;
+    setPending(true);
+    setError("");
+    setMessage("");
+    try {
+      const response = await fetch("/api/redeem", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ code: trimmedCode }),
+      });
+      const payload = await response.json().catch(() => null);
+      if (response.status === 401) {
+        window.location.assign("/login");
+        return;
+      }
+      if (!response.ok) throw new Error(redeemErrorMessage(response.status, payload));
+      const result = payload as { awardedCredits?: number; credits: number; message?: string };
+      const awarded = typeof result.awardedCredits === "number" ? result.awardedCredits : result.credits;
+      onCreditsChanged(result.credits);
+      setCode("");
+      setUnlocked(true);
+      setMessage(result.message || `已到账 ${awarded} 点，现在可以开始完整咨询。`);
+      notifyBalanceChanged(result.credits);
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "兑换失败，请稍后重试");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="account-modal-overlay" onMouseDown={close}>
+      <section
+        className="account-modal paywall-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="onboarding-paywall-title"
+        onMouseDown={(event) => event.stopPropagation()}
+        onKeyDown={(event) => {
+          if (event.key === "Escape") close();
+          else keepFocusWithin(event.nativeEvent, event.currentTarget);
+        }}
+      >
+        <div className="dialog-header">
+          <h2 id="onboarding-paywall-title">解锁完整咨询</h2>
+          <button className="dialog-close" aria-label="关闭" type="button" onClick={close} disabled={pending}>
+            <X aria-hidden="true" />
+          </button>
+        </div>
+        <div className="paywall-intro">
+          <span className="paywall-mark" aria-hidden="true"><Gift /></span>
+          <div>
+            <b>入门问题已经准备好</b>
+            <p>填写兑换码，解锁后续咨询、生时校正与完整解读。</p>
+          </div>
+        </div>
+        <div className="redeem-balance">
+          <span>当前可用点数</span>
+          <strong>{credits} 点</strong>
+        </div>
+        <form className="redeem-form account-redeem-form" onSubmit={redeem}>
+          <label htmlFor="onboarding-redeem-code">兑换码</label>
+          <div>
+            <input
+              id="onboarding-redeem-code"
+              ref={inputRef}
+              autoComplete="off"
+              value={code}
+              onChange={(event) => {
+                setCode(event.target.value);
+                setError("");
+                setMessage("");
+                setUnlocked(false);
+              }}
+              placeholder="输入完整兑换码"
+            />
+            <button className="button-primary" type="submit" disabled={!code.trim() || pending || unlocked}>
+              {pending ? "兑换中" : unlocked ? "已解锁" : "兑换并继续"}
+            </button>
+          </div>
+          {error && <p className="form-error" role="alert">{error}</p>}
+          {message && <p className="form-success" role="status">{message}</p>}
+        </form>
+        <div className="paywall-footer">
+          <span>{unlocked ? "点数已到账，可以继续选择问题。" : "还没有兑换码？"}</span>
+          {unlocked ? (
+            <button className="button-primary" type="button" onClick={close}>开始咨询</button>
+          ) : (
+            <Link className="button-secondary" href={membershipHref("onboarding-paywall")}>查看套餐与会员</Link>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}