diff --git a/components/layout/dashboard-layout.tsx b/components/layout/dashboard-layout.tsx
index 6008f28..0d77dd4 100644
--- a/components/layout/dashboard-layout.tsx
+++ b/components/layout/dashboard-layout.tsx
@@ -1,6 +1,6 @@
"use client";
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
import { Sidebar } from './sidebar';
import { TopBar } from './top-bar';
import { useDeviceType } from '@/hooks/useDeviceType';
@@ -10,9 +10,28 @@ interface DashboardLayoutProps {
}
export function DashboardLayout({ children }: DashboardLayoutProps) {
- const [sidebarCollapsed, setSidebarCollapsed] = useState(true); // 默认收起状态
+ const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
const { deviceType, isMobile, isTablet, isDesktop } = useDeviceType();
+ // 处理移动端视口高度动态计算
+ useEffect(() => {
+ if (isMobile || isTablet) {
+ const setVH = () => {
+ const vh = window.innerHeight * 0.01;
+ document.documentElement.style.setProperty('--vh', `${vh}px`);
+ };
+
+ setVH();
+ window.addEventListener('resize', setVH);
+ window.addEventListener('orientationchange', setVH);
+
+ return () => {
+ window.removeEventListener('resize', setVH);
+ window.removeEventListener('orientationchange', setVH);
+ };
+ }
+ }, [isMobile, isTablet]);
+
// 根据设备类型设置布局样式
const getLayoutStyles = () => {
if (isMobile || isTablet) {
@@ -29,13 +48,28 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
};
};
+ // 获取移动端容器类名
+ const getMobileContainerClasses = () => {
+ if (isMobile || isTablet) {
+ return "mobile-viewport-height mobile-safe-bottom";
+ }
+ return "";
+ };
+
return (
-
+
{isDesktop &&
}
+ className={`top-[4rem] fixed right-0 bottom-0 px-4 ${getMobileContainerClasses()}`}
+ style={{
+ ...getLayoutStyles(),
+ // 移动端使用动态高度计算
+ height: (isMobile || isTablet)
+ ? 'calc(100dvh - 4rem)'
+ : 'calc(100vh - 4rem)'
+ }}
+ >
{children}
diff --git a/components/layout/top-bar.tsx b/components/layout/top-bar.tsx
index 365fab3..92d6839 100644
--- a/components/layout/top-bar.tsx
+++ b/components/layout/top-bar.tsx
@@ -88,7 +88,7 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
}
};
- // 处理Token购买（同域新页 + postMessage 方式重定向）
+ // 处理Token购买（改为携带参数打开 pay-redirect）
const handleBuyTokens = async (tokenAmount: number) => {
if (!currentUser?.id) {
console.error("用户未登录");
@@ -99,52 +99,14 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
console.error("Token数量必须大于0");
return;
}
-
- // 先同步打开同域新页面，避免被拦截
- const redirectWindow = window.open("/pay-redirect", "_blank");
- if (!redirectWindow) {
- console.error("无法打开支付重定向页面，可能被浏览器拦截");
- return;
- }
-
- setIsBuyingTokens(true);
- try {
- const response = await buyTokens({
- token_amount: tokenAmount,
- package_type: "basic"
- });
-
- if (response.successful && response.data?.checkout_url) {
- // 通知当前窗口等待支付，标识为Token购买
- window.postMessage({
- type: "waiting-payment",
- paymentType: "token"
- }, "*");
- sessionStorage.setItem('session_id', response.data.session_id);
- // 通过 postMessage 通知新页面进行重定向
- redirectWindow.postMessage({
- type: "redirect-to-payment",
- url: response.data.checkout_url
- }, window.location.origin);
- } else {
- console.error("创建Token购买失败:", response.message);
- // 通知新页显示错误
- redirectWindow.postMessage({
- type: "redirect-error",
- message: response.message || "创建支付失败"
- }, window.location.origin);
- }
- } catch (error: unknown) {
- console.error("Token购买失败:", error);
- try {
- redirectWindow.postMessage({
- type: "redirect-error",
- message: "网络或服务异常，请关闭此页重试"
- }, window.location.origin);
- } catch {}
- } finally {
- setIsBuyingTokens(false);
- }
+ // 直接打开带参数的 pay-redirect，新窗口内自行创建会话并跳转
+ const url = `/pay-redirect?type=token&amount=${encodeURIComponent(tokenAmount)}&pkg=basic`;
+ window.open(url, "_blank");
+ // 通知当前窗口等待支付（显示loading模态框）
+ window.postMessage({
+ type: 'waiting-payment',
+ paymentType: 'subscription',
+ }, '*');
};
// 处理自定义金额购买
@@ -255,7 +217,7 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
return (
window.removeEventListener('home-menu-toggle' as any, handler as any);
}, []);
return (
-
+
{/* 桌面端菜单（居中，仅三个项） */}
@@ -1249,34 +1249,16 @@ function HomeModule5() {
const handleSubscribe = async (planName: string) => {
localStorage.setItem("callBackUrl", pathname);
- try {
- // 使用新的Checkout Session方案（更简单！）
- const { createCheckoutSession, redirectToCheckout } = await import(
- "@/lib/stripe"
- );
-
- // 从localStorage获取当前用户信息
- const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
-
- if (!User.id) {
- throw new Error("无法获取用户ID，请重新登录");
- }
-
- // 1. 创建Checkout Session
- const result = await createCheckoutSession({
- user_id: String(User.id),
- plan_name: planName,
- billing_cycle: billingType,
- });
-
- if (!result.successful || !result.data) {
- throw new Error("create checkout session failed");
- }
-
- setShowCallbackModal(true);
- window.open(result.data.checkout_url, "_blank");
- } catch (error) {
- throw new Error("create checkout session failed, please try again later");
+ // 改为直接携带参数打开 pay-redirect，由其内部完成创建与跳转
+ const url = `/pay-redirect?type=subscription&plan=${encodeURIComponent(planName)}&billing=${encodeURIComponent(billingType)}`;
+ const win = window.open(url, "_blank");
+ // 通知当前窗口等待支付（显示loading模态框）
+ window.postMessage({
+ type: 'waiting-payment',
+ paymentType: 'subscription',
+ }, '*');
+ if (!win) {
+ throw new Error("Unable to open redirect window, please check popup settings");
}
};
return (
diff --git a/components/pages/work-flow/H5MediaViewer.tsx b/components/pages/work-flow/H5MediaViewer.tsx
index 6ddcf36..8a4940f 100644
--- a/components/pages/work-flow/H5MediaViewer.tsx
+++ b/components/pages/work-flow/H5MediaViewer.tsx
@@ -301,7 +301,7 @@ export function H5MediaViewer({