feat(navigation): add external entry routing

2026-07-09 14:43:28 +08:00
parent 0659e52d29
commit 9159f5346d
17 changed files with 398 additions and 152 deletions
@@ -1,64 +0,0 @@
-"use client";
-
-/**
- * 深链落地：把 deviceId + fbid/avatarUrl 写进本地存储，然后跳 `/chat`。
- *
- * 设计：
- *   - 不走 Server `redirect()`：避免把 fbid 暴露在 URL 里。
- *   - deviceId / fbid / avatarUrl 统一交给 `lib/chat` 落地。
- *   - 写入完成后通过统一导航回到 `/chat`，URL 不留深链痕迹。
- */
-
-import { useEffect, useState } from "react";
-
-import { persistExternalBrowserChatDeepLink } from "@/lib/chat/chat_external_browser";
-import { useAppNavigator } from "@/router/use-app-navigator";
-import { Logger } from "@/utils";
-
-const log = new Logger("AppChatDeviceidDeviceIdDeepLinkPersist");
-
-interface DeepLinkPersistProps {
-  deviceId: string;
-  fbid: string | null;
-  avatarUrl: string | null;
-}
-
-export default function DeepLinkPersist({
-  deviceId,
-  fbid,
-  avatarUrl,
-}: DeepLinkPersistProps) {
-  const navigator = useAppNavigator();
-  const [done, setDone] = useState(false);
-
-  useEffect(() => {
-    void (async () => {
-      try {
-        await persistExternalBrowserChatDeepLink({
-          deviceId,
-          facebookId: fbid,
-          avatarUrl,
-        });
-      } catch (err) {
-        // 写不进 localStorage 时（例如隐私模式）也不阻塞跳转；记录到 console 即可。
-        log.warn("[DeepLinkPersist] failed to persist", err);
-      } finally {
-        setDone(true);
-        navigator.openChat({ replace: true });
-      }
-    })();
-  }, [avatarUrl, deviceId, fbid, navigator]);
-
-  return (
-    <div
-      className="flex flex-1 items-center justify-center"
-      style={{ minHeight: "100dvh" }}
-    >
-      <div
-        aria-label={done ? "Redirecting" : "Loading"}
-        className="size-10 animate-spin rounded-full border-4 border-t-transparent"
-        style={{ borderColor: "var(--color-accent)" }}
-      />
-    </div>
-  );
-}
@@ -1,35 +0,0 @@
-/**
- * 深链入口（Server Component）
- *
- * 对齐 Flutter `lib/router/app_router.dart:60-78` 的 `GoRoute(path: '/chat/deviceid/:deviceId')`：
- * 把 `deviceId` 路径参数与 `fbid` / `avatarUrl` 查询参数透传给 Client 组件
- * `<DeepLinkPersist>`，由它把数据写入 localStorage 后通过统一导航回到 `/chat`。
- *
- * Next.js 15+ 约定：`params` / `searchParams` 是 Promise，必须 await。
- * Next.js 16 全局 helper `PageProps<'/literal'>` 由 `next dev` / `next build` /
- * `next typegen` 生成。
- *
- * 这里不调用 `redirect()`：把 fbid / avatarUrl 暴露在 URL 上对用户不友好；
- * 跳转推迟到 Client 完成持久化之后。
- */
-
-import DeepLinkPersist from "./DeepLinkPersist";
-
-export default async function ChatDeviceIdPage(
-  props: PageProps<"/chat/deviceid/[deviceId]">,
-) {
-  const { deviceId } = await props.params;
-  const { avatarUrl, fbid } = await props.searchParams;
-  const fbidStr = Array.isArray(fbid) ? fbid[0] : fbid ?? null;
-  const avatarUrlStr = Array.isArray(avatarUrl)
-    ? avatarUrl[0]
-    : avatarUrl ?? null;
-
-  return (
-    <DeepLinkPersist
-      deviceId={deviceId}
-      fbid={fbidStr}
-      avatarUrl={avatarUrlStr}
-    />
-  );
-}
@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+import {
+  persistExternalEntryPayload,
+  resolveExternalEntryTarget,
+} from "@/lib/navigation/external_entry";
+import { Logger } from "@/utils";
+
+const log = new Logger("ExternalEntryPersist");
+
+interface ExternalEntryPersistProps {
+  deviceId: string | null;
+  facebookId: string | null;
+  facebookAppId: string | null;
+  avatarUrl: string | null;
+  target: string | null;
+  redirect: string | null;
+  next: string | null;
+}
+
+export default function ExternalEntryPersist({
+  deviceId,
+  facebookId,
+  facebookAppId,
+  avatarUrl,
+  target,
+  redirect,
+  next,
+}: ExternalEntryPersistProps) {
+  const router = useRouter();
+
+  useEffect(() => {
+    const destination = resolveExternalEntryTarget({
+      target,
+      redirect,
+      next,
+    });
+
+    void (async () => {
+      try {
+        await persistExternalEntryPayload({
+          deviceId,
+          facebookId,
+          facebookAppId,
+          avatarUrl,
+        });
+      } catch (error) {
+        log.warn("[ExternalEntryPersist] failed to persist payload", error);
+      } finally {
+        router.replace(destination);
+      }
+    })();
+  }, [
+    avatarUrl,
+    deviceId,
+    facebookAppId,
+    facebookId,
+    next,
+    redirect,
+    router,
+    target,
+  ]);
+
+  return (
+    <div
+      className="flex flex-1 items-center justify-center"
+      style={{ minHeight: "100dvh" }}
+    >
+      <div
+        aria-label="Redirecting"
+        className="size-10 animate-spin rounded-full border-4 border-t-transparent"
+        style={{ borderColor: "var(--color-accent)" }}
+      />
+    </div>
+  );
+}
@@ -0,0 +1,61 @@
+/**
+ * 外部入口落地页（Server Component）
+ *
+ * 外部应用可以通过 query 传入 Facebook 相关信息和最终目标页，例如：
+ * `/external-entry?target=chat&fbid=xxx&fb_app_id=yyy`
+ *
+ * 页面不直接 `redirect()`，而是把数据交给 Client 组件先写入本地存储，
+ * 再通过 `router.replace()` 清理 URL 并跳转到最终页面。
+ */
+
+import ExternalEntryPersist from "./external-entry-persist";
+
+type SearchParams = Promise<Record<string, string | string[] | undefined>>;
+
+interface ExternalEntryPageProps {
+  searchParams: SearchParams;
+}
+
+export default async function ExternalEntryPage({
+  searchParams,
+}: ExternalEntryPageProps) {
+  const params = await searchParams;
+
+  return (
+    <ExternalEntryPersist
+      deviceId={pickFirst(params.deviceId, params.device_id)}
+      facebookId={pickFirst(
+        params.fbid,
+        params.fb_id,
+        params.facebookId,
+        params.facebook_id,
+      )}
+      facebookAppId={pickFirst(
+        params.fbAppId,
+        params.fb_app_id,
+        params.facebookAppId,
+        params.facebook_app_id,
+        params.appId,
+        params.app_id,
+      )}
+      avatarUrl={pickFirst(params.avatarUrl, params.avatar_url)}
+      target={pickFirst(params.target)}
+      redirect={pickFirst(params.redirect)}
+      next={pickFirst(params.next)}
+    />
+  );
+}
+
+function pickFirst(
+  ...values: Array<string | string[] | undefined>
+): string | null {
+  for (const value of values) {
+    if (Array.isArray(value)) {
+      const first = value.find((item) => item.trim().length > 0);
+      if (first) return first;
+      continue;
+    }
+    if (value && value.trim().length > 0) return value;
+  }
+  return null;
+}
@@ -136,6 +136,14 @@
  gap: clamp(8px, 1.852vw, 10px);
 }

+.freeAllowanceContent {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
 .freeAllowanceItem {
  display: inline-flex;
  align-items: baseline;
@@ -153,6 +161,15 @@
  font-weight: 900;
 }

+.dailyFreeLimit {
+  margin: 0;
+  color: rgba(81, 70, 75, 0.68);
+  font-size: var(--responsive-caption, 12px);
+  font-weight: 720;
+  line-height: 1.2;
+  text-align: right;
+}
+
 .activateButton,
 .topUpButton {
  display: inline-flex;
@@ -242,4 +259,12 @@
  .freeAllowanceItems {
    justify-content: flex-start;
  }
+
+  .freeAllowanceContent {
+    align-items: flex-start;
+  }
+
+  .dailyFreeLimit {
+    text-align: left;
+  }
 }
@@ -6,7 +6,9 @@ import styles from "./sidebar-wallet-card.module.css";

 export interface SidebarWalletCardProps {
  creditBalance: number;
+  dailyFreeChatLimit?: number;
  dailyFreeChatRemaining?: number;
+  dailyFreePrivateLimit?: number;
  dailyFreePrivateRemaining?: number;
  onActivateVip?: () => void;
  onTopUp: () => void;
@@ -18,7 +20,9 @@ const formatCoins = (value: number): string =>

 export function SidebarWalletCard({
  creditBalance,
+  dailyFreeChatLimit = 0,
  dailyFreeChatRemaining = 0,
+  dailyFreePrivateLimit = 0,
  dailyFreePrivateRemaining = 0,
  onActivateVip,
  onTopUp,
@@ -63,17 +67,22 @@ export function SidebarWalletCard({
        </button>
      </div>

-      <div className={styles.freeAllowance} aria-label="Everyday Free allowance">
+      <div className={styles.freeAllowance} aria-label="Free allowance">
        <p className={styles.freeAllowanceTitle}>Free Allowance</p>
-        <div className={styles.freeAllowanceItems}>
-          <span className={styles.freeAllowanceItem}>
-            <strong>{dailyFreeChatRemaining}</strong>
-            <span> chats left</span>
-          </span>
-          <span className={styles.freeAllowanceItem}>
-            <strong>{dailyFreePrivateRemaining}</strong>
-            <span> private left</span>
-          </span>
+        <div className={styles.freeAllowanceContent}>
+          <div className={styles.freeAllowanceItems}>
+            <span className={styles.freeAllowanceItem}>
+              <strong>{dailyFreeChatRemaining}</strong>
+              <span> chats left</span>
+            </span>
+            <span className={styles.freeAllowanceItem}>
+              <strong>{dailyFreePrivateRemaining}</strong>
+              <span> private left</span>
+            </span>
+          </div>
+          <p className={styles.dailyFreeLimit}>
+            Daily free: {dailyFreeChatLimit} chats / {dailyFreePrivateLimit} private
+          </p>
        </div>
      </div>
    </section>
@@ -109,7 +109,9 @@ export function SidebarScreen() {
        <section className={`${styles.cardSlot} ${styles.revealTwo}`}>
          <SidebarWalletCard
            creditBalance={user.creditBalance}
+            dailyFreeChatLimit={user.currentUser?.dailyFreeChatLimit}
            dailyFreeChatRemaining={user.currentUser?.dailyFreeChatRemaining}
+            dailyFreePrivateLimit={user.currentUser?.dailyFreePrivateLimit}
            dailyFreePrivateRemaining={
              user.currentUser?.dailyFreePrivateRemaining
            }