新增终端大洲分组与移动端卡片 CSS 模块

包含分组标题行、移动端 Tab 隐藏滚动条、信号卡片样式及浅色主题适配。

frontend/app/entitlement-required/EntitlementRequiredClient.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import Link from "next/link";
+import { useI18n } from "@/hooks/useI18n";
+
+export function EntitlementRequiredClient({ nextPath }: { nextPath: string }) {
+  const { locale } = useI18n();
+  const isEn = locale === "en-US";
+
+  const copy = {
+    title: isEn ? "Sign in required" : "需要登录方可访问此页面",
+    desc: isEn
+      ? "This page requires you to sign in. Please sign in and try again."
+      : "本页面需要登录权限。请登录后重试。",
+    signIn: isEn ? "Sign in" : "去登录",
+    backHome: isEn ? "Back to Home" : "返回首页",
+    legacyNote: isEn ? "Legacy token mode still supported" : "传统令牌模式仍支持",
+    requestedPath: isEn ? "Requested path" : "请求路径",
+  };
+
+  return (
+    <main
+      style={{
+        minHeight: "100vh",
+        display: "grid",
+        placeItems: "center",
+        background:
+          "radial-gradient(circle at 20% 20%, #13264f 0%, #071127 45%, #040812 100%)",
+        color: "#d6e2ff",
+        padding: "24px",
+      }}
+    >
+      <section
+        style={{
+          width: "100%",
+          maxWidth: 480,
+          border: "1px solid rgba(68, 92, 140, 0.45)",
+          borderRadius: 16,
+          padding: 24,
+          background: "rgba(9, 18, 36, 0.88)",
+          boxShadow: "0 20px 50px rgba(0, 0, 0, 0.35)",
+          textAlign: "center",
+        }}
+      >
+        <h1
+          style={{
+            margin: 0,
+            fontSize: 22,
+            lineHeight: 1.3,
+            fontWeight: 800,
+          }}
+        >
+          {copy.title}
+        </h1>
+        <p style={{ marginTop: 12, color: "#9fb2da", lineHeight: 1.6 }}>
+          {copy.desc}
+        </p>
+        <div
+          style={{
+            marginTop: 20,
+            display: "flex",
+            gap: 12,
+            justifyContent: "center",
+            flexWrap: "wrap",
+          }}
+        >
+          <Link
+            href={`/auth/login?next=${encodeURIComponent(nextPath)}`}
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              minHeight: 40,
+              padding: "8px 20px",
+              borderRadius: 12,
+              background: "linear-gradient(135deg, #2563EB, #4F46E5)",
+              color: "#fff",
+              fontWeight: 700,
+              textDecoration: "none",
+              fontSize: 14,
+            }}
+          >
+            {copy.signIn}
+          </Link>
+          <Link
+            href="/"
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              minHeight: 40,
+              padding: "8px 20px",
+              borderRadius: 12,
+              border: "1px solid rgba(68, 92, 140, 0.45)",
+              background: "rgba(68, 92, 140, 0.2)",
+              color: "#d6e2ff",
+              fontWeight: 600,
+              textDecoration: "none",
+              fontSize: 14,
+            }}
+          >
+            {copy.backHome}
+          </Link>
+        </div>
+        <p
+          style={{
+            marginTop: 20,
+            fontSize: 12,
+            color: "#7891b5",
+            lineHeight: 1.5,
+          }}
+        >
+          {copy.legacyNote}{" "}
+          <code
+            style={{
+              background: "rgba(255,255,255,0.06)",
+              padding: "2px 6px",
+              borderRadius: 4,
+            }}
+          >
+            ?access_token=&lt;your-token&gt;
+          </code>
+          <br />
+          <span style={{ marginTop: 4, display: "inline-block" }}>
+            {copy.requestedPath}: <code>{nextPath}</code>
+          </span>
+        </p>
+      </section>
+    </main>
+  );
+}

frontend/app/entitlement-required/page.tsx

@@ -1,4 +1,5 @@
-import Link from "next/link";
+import { EntitlementRequiredClient } from "./EntitlementRequiredClient";
+import { I18nProvider } from "@/hooks/useI18n";
 
 type Props = {
   searchParams?: Promise<{ next?: string }>;
@@ -9,98 +10,8 @@ export default async function EntitlementRequiredPage({ searchParams }: Props) {
   const nextPath = params.next || "/";
 
   return (
-    <main
-      style={{
-        minHeight: "100vh",
-        display: "grid",
-        placeItems: "center",
-        background:
-          "radial-gradient(circle at 20% 20%, #13264f 0%, #071127 45%, #040812 100%)",
-        color: "#d6e2ff",
-        padding: "24px",
-      }}
-    >
-      <section
-        style={{
-          width: "100%",
-          maxWidth: 480,
-          border: "1px solid rgba(68, 92, 140, 0.45)",
-          borderRadius: 16,
-          padding: 24,
-          background: "rgba(9, 18, 36, 0.88)",
-          boxShadow: "0 20px 50px rgba(0, 0, 0, 0.35)",
-          textAlign: "center",
-        }}
-      >
-        <h1
-          style={{
-            margin: 0,
-            fontSize: 22,
-            lineHeight: 1.3,
-            fontWeight: 800,
-          }}
-        >
-          需要登录方可访问此页面
-        </h1>
-        <p style={{ marginTop: 12, color: "#9fb2da", lineHeight: 1.6 }}>
-          本页面需要登录权限。请登录后重试。
-          <br />
-          Sign in required to access this page.
-        </p>
-        <div style={{ marginTop: 20, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
-          <Link
-            href={`/auth/login?next=${encodeURIComponent(nextPath)}`}
-            style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 6,
-              minHeight: 40,
-              padding: "8px 20px",
-              borderRadius: 12,
-              background: "linear-gradient(135deg, #2563EB, #4F46E5)",
-              color: "#fff",
-              fontWeight: 700,
-              textDecoration: "none",
-              fontSize: 14,
-            }}
-          >
-            去登录 / Sign in
-          </Link>
-          <Link
-            href="/"
-            style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 6,
-              minHeight: 40,
-              padding: "8px 20px",
-              borderRadius: 12,
-              border: "1px solid rgba(68, 92, 140, 0.45)",
-              background: "rgba(68, 92, 140, 0.2)",
-              color: "#d6e2ff",
-              fontWeight: 600,
-              textDecoration: "none",
-              fontSize: 14,
-            }}
-          >
-            返回首页 / Back to Home
-          </Link>
-        </div>
-        <p
-          style={{
-            marginTop: 20,
-            fontSize: 12,
-            color: "#7891b5",
-            lineHeight: 1.5,
-          }}
-        >
-          传统令牌模式仍支持 <code style={{ background: "rgba(255,255,255,0.06)", padding: "2px 6px", borderRadius: 4 }}>?access_token=&lt;your-token&gt;</code>
-          <br />
-          <span style={{ marginTop: 4, display: "inline-block" }}>
-            请求路径 / Requested path: <code>{nextPath}</code>
-          </span>
-        </p>
-      </section>
-    </main>
+    <I18nProvider>
+      <EntitlementRequiredClient nextPath={nextPath} />
+    </I18nProvider>
   );
 }