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

包含分组标题行、移动端 Tab 隐藏滚动条、信号卡片样式及浅色主题适配。
2026-05-25 01:55:55 +08:00
parent 0b47f4b487
commit 9a49ff3f5e
14 changed files with 237 additions and 392 deletions
@@ -2,14 +2,18 @@

 import { RefreshCw } from "lucide-react";
 import { useEffect } from "react";
+import { I18nProvider, useI18n } from "@/hooks/useI18n";

-export default function AccountErrorPage({
+function AccountErrorContent({
  error,
  reset,
 }: {
  error: Error & { digest?: string };
  reset: () => void;
 }) {
+  const { locale } = useI18n();
+  const isEn = locale === "en-US";
+
  useEffect(() => {
    console.error("Account page error:", error);
  }, [error]);
@@ -38,7 +42,7 @@ export default function AccountErrorPage({
          color: "var(--color-accent-primary, #4DA3FF)",
        }}
      >
-        账户页面出错
+        {isEn ? "Account Page Error" : "账户页面出错"}
      </h1>
      <p
        style={{
@@ -49,21 +53,9 @@ export default function AccountErrorPage({
          lineHeight: 1.7,
        }}
      >
-        如果是在支付或绑定钱包时出现此问题，常见原因是钱包插件冲突（例如同时开启了 MetaMask 和
-        Rabby）。请尝试关闭其他钱包插件后刷新页面重试。
-      </p>
-      <p
-        style={{
-          color: "var(--color-text-muted, #7D8FA3)",
-          fontSize: "0.8rem",
-          margin: 0,
-          maxWidth: 420,
-          lineHeight: 1.6,
-        }}
-      >
-        If this happened during payment or wallet binding, the most common cause is
-        conflicting wallet extensions. Try disabling other wallet extensions (e.g.
-        MetaMask + Rabby) and refresh.
+        {isEn
+          ? "If this happened during payment or wallet binding, the most common cause is conflicting wallet extensions (e.g. MetaMask and Rabby open at the same time). Try disabling other wallet extensions and refresh."
+          : "如果是在支付或绑定钱包时出现此问题，常见原因是钱包插件冲突（例如同时开启了 MetaMask 和 Rabby）。请尝试关闭其他钱包插件后刷新页面重试。"}
      </p>
      <button
        type="button"
@@ -84,8 +76,22 @@ export default function AccountErrorPage({
        }}
      >
        <RefreshCw size={14} />
-        重试
+        {isEn ? "Retry" : "重试"}
      </button>
    </div>
  );
 }
+
+export default function AccountErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <I18nProvider>
+      <AccountErrorContent error={error} reset={reset} />
+    </I18nProvider>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
  );
 }