xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

更新 重定向页增加loading,使用英文

Browse Source
This commit is contained in:
moux1024 2025-09-15 21:22:46 +08:00
parent 5a0a920703
commit a00aa3d46a
2 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/pay-redirect/page.tsx
View File

@ -1,9 +1,10 @@
"use client";
import React from "react";
import { TailwindSpinner } from "@/components/common/GlobalLoad";
export default function PayRedirectPage() {
const [status, setStatus] = React.useState<string>("等待安全收银台跳转...");
const [status, setStatus] = React.useState<string>("Waiting for secure checkout redirect...");
const [error, setError] = React.useState<string>("");
React.useEffect(() => {
@ -12,21 +13,20 @@ export default function PayRedirectPage() {
if (event.origin !== window.location.origin) return;
const data = event.data || {};
if (data?.type === "redirect-to-payment" && typeof data?.url === "string") {
setStatus("即将跳转到 Stripe 收银台...");
setStatus("Redirecting to Stripe Checkout...");
window.location.href = data.url as string;
} else if (data?.type === "redirect-error") {
setError(typeof data?.message === "string" ? data.message : "创建支付失败，请关闭此页重试");
setError(typeof data?.message === "string" ? data.message : "Failed to create payment. Please close this page and try again.");
}
} catch {
setError("处理跳转信息时发生错误，请关闭此页重试");
setError("An error occurred while processing redirect info. Please close this page and try again.");
}
};
window.addEventListener("message", handleMessage);
// 超时兜底：若 15 秒内未收到跳转指令，提示用户
const timeoutId = window.setTimeout(() => {
setStatus("");
setError("未收到跳转指令，可能网络异常或页面被拦截。请返回重试。");
setError("No redirect instruction received. It may be a network issue or the page was blocked. Please go back and try again.");
}, 15000);
return () => {
@ -38,11 +38,16 @@ export default function PayRedirectPage() {
return (
<div data-alt="pay-redirect-page" className="min-h-screen w-full flex items-center justify-center bg-black text-white">
<div data-alt="pay-redirect-card" className="max-w-md w-full p-6 rounded-xl border border-white/10 bg-white/5 backdrop-blur">
<h1 className="text-lg font-semibold mb-2">正在准备跳转</h1>
<h1 className="text-lg font-semibold mb-2">Preparing to redirect</h1>
{status && <p className="text-sm text-white/80 mb-2">{status}</p>}
{!error && (
<div data-alt="loading-indicator" className="flex items-center justify-center my-3">
<TailwindSpinner diameter={40} />
</div>
)}
{error && <p className="text-sm text-red-300">{error}</p>}
{!error && (
<p className="text-xs text-white/60 mt-2">如长时间未跳转，请返回原页重试或检查网络。</p>
<p className="text-xs text-white/60 mt-2">If it takes too long, please return to the previous page or check your network.</p>
)}
</div>
</div>

6
components/layout/top-bar.tsx
View File

@ -113,7 +113,7 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
type: "waiting-payment",
paymentType: "token"
}, "*");
sessionStorage.setItem('session_id', response.data.session_id);
// 通过 postMessage 通知新页面进行重定向
redirectWindow.postMessage({
type: "redirect-to-payment",
@ -407,7 +407,7 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
? "Loading..."
: `${credits} credits`}
</span>
<button
{/* <button
type="button"
onClick={() => window.open("/usage", "_blank")}
className="ml-1 inline-flex items-center justify-center h-6 w-6 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
@ -415,7 +415,7 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
title="Usage"
>
<Info className="h-4 w-4 text-white" />
</button>
</button> */}
</div>
{/* Purchase Credits 按钮 */}