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

适配修复

Browse Source
This commit is contained in:
海龙 2025-08-28 16:30:19 +08:00
parent bc2302d907
commit 1b80180102
3 changed files with 90 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@ -33,7 +33,7 @@ export default function RootLayout({
}} }}
> >
<Providers> <Providers>
<ScreenAdapter /> {/* <ScreenAdapter /> */}
<div id="app" className='h-full w-full'> <div id="app" className='h-full w-full'>
{children} {children}
</div> </div>

8
components/ChatInputBox/ChatInputBox.tsx
View File

@ -173,8 +173,8 @@ const RenderTemplateStoryMode = ({
// 模板列表渲染 // 模板列表渲染
const templateListRender = () => { const templateListRender = () => {
return ( return (
<div className="w-1/3 p-4 border-r border-white/[0.1]"> <div className="w-1/3 p-4 border-r border-white/[0.1] overflow-y-auto">
<div className="space-y-4 max-h-[700px] overflow-y-auto template-list-scroll"> <div className="space-y-4 overflow-y-auto template-list-scroll">
{templateStoryList.map((template, index) => ( {templateStoryList.map((template, index) => (
<div <div
key={template.id} key={template.id}
@ -562,7 +562,7 @@ const RenderTemplateStoryMode = ({
className="photo-story-modal !pb-0 rounded-lg bg-white/[0.08] backdrop-blur-[20px] [&_.ant-modal-content]:bg-white/[0.00]" className="photo-story-modal !pb-0 rounded-lg bg-white/[0.08] backdrop-blur-[20px] [&_.ant-modal-content]:bg-white/[0.00]"
> >
<GlobalLoad show={isLoading} progress={localLoading}> <GlobalLoad show={isLoading} progress={localLoading}>
<div className="rounded-2xl min-h-min transition-all duration-700 ease-out"> <div className="rounded-2xl h-[70vh] overflow-y-hidden flex flex-col">
{/* 弹窗头部 */} {/* 弹窗头部 */}
<div className="flex items-center justify-between px-4 pb-6 border-b border-white/[0.1]"> <div className="flex items-center justify-between px-4 pb-6 border-b border-white/[0.1]">
<h2 className="text-2xl font-bold text-white"> <h2 className="text-2xl font-bold text-white">
@ -576,7 +576,7 @@ const RenderTemplateStoryMode = ({
</button> </button>
</div> </div>
<div className="flex gap-4 pb-8 "> <div className="flex gap-4 pb-8 flex-1 overflow-y-hidden">
{templateListRender()} {templateListRender()}
<div className="flex-1">{storyEditorRender()}</div> <div className="flex-1">{storyEditorRender()}</div>
</div> </div>

100
components/pages/home-page2.tsx
View File

@ -31,14 +31,42 @@ import { fetchSubscriptionPlans, SubscriptionPlan } from "@/lib/stripe";
export function HomePage2() { export function HomePage2() {
const [hPading, setHPading] = useState(0); const [hPading, setHPading] = useState(0);
useEffect(() => { useEffect(() => {
// 为兼容不同屏幕的padding进行三次方处理 // 获取当前窗口尺寸
setHPading(((window as any).Scale?.hScale || 1)**3 * 10); const currentWidth = window.innerWidth;
const currentHeight = window.innerHeight;
// 计算缩放比例 (1920x1080)
const wScale = currentWidth / 1920;
const hScale = currentHeight / 1080;
// 检查app节点是否存在
const homePage = document.getElementById("home-page");
if (!homePage) {
console.error("未找到app节点");
return;
}
// setHPading((hScale || 1) * 10);
// 创建样式元素
const style = document.createElement("style");
// 设置CSS样式
style.textContent = `
#home-page {
transform-origin: top left;
transform: scale(${wScale}, ${hScale});
width: 1920px;
height: 1080px;
}
`;
// 将样式添加到head
document.head.appendChild(style);
}, []); }, []);
return ( return (
// //
<div <div
className="w-full h-screen overflow-y-auto" className="w-full h-screen overflow-y-auto"
style={{ paddingBottom: `${hPading}rem` }} id="home-page"
style={{ paddingBottom: `2rem` }}
> >
<HomeModule1 /> <HomeModule1 />
<HomeModule2 /> <HomeModule2 />
@ -54,7 +82,7 @@ export function HomePage2() {
function HomeModule1() { function HomeModule1() {
const router = useRouter(); const router = useRouter();
return ( return (
<div className="home-module1 relative flex justify-center items-start pt-[14rem] w-full h-[1280px] bg-black snap-start"> <div className="home-module1 relative flex justify-center items-start pt-[28rem] w-full h-[1280px] bg-black snap-start">
<video <video
src="/assets/home.mp4" src="/assets/home.mp4"
autoPlay autoPlay
@ -64,7 +92,7 @@ function HomeModule1() {
className="absolute top-0 left-0 z-1 w-full h-full object-cover" className="absolute top-0 left-0 z-1 w-full h-full object-cover"
></video> ></video>
<div className="center z-10 flex flex-col items-center"> <div className="center z-10 flex flex-col items-center">
<h1 className="text-white text-[5.75rem] leading-[100%] font-bold mb-[28rem]"> <h1 className="text-white text-[5.75rem] leading-[100%] font-bold mb-[1rem]">
Ideas Become Movies Ideas Become Movies
</h1> </h1>
<p className="text-white text-[2rem] leading-[140%] font-normal"> <p className="text-white text-[2rem] leading-[140%] font-normal">
@ -98,8 +126,8 @@ function HomeModule2() {
{ {
title: "Template to Movie", title: "Template to Movie",
video: "/assets/module2 (3).mp4", video: "/assets/module2 (3).mp4",
} },
] ];
return ( return (
<div <div
data-alt="core-value-section" data-alt="core-value-section"
@ -143,7 +171,6 @@ function HomeModule2() {
</h3> </h3>
</div> </div>
))} ))}
</div> </div>
</div> </div>
); );
@ -201,11 +228,12 @@ function HomeModule3() {
<div <div
className="absolute -top-[1rem] -left-0 w-full h-[20rem] z-20 pointer-events-none" className="absolute -top-[1rem] -left-0 w-full h-[20rem] z-20 pointer-events-none"
style={{ style={{
backdropFilter: 'blur(12px)', backdropFilter: "blur(12px)",
WebkitBackdropFilter: 'blur(12px)', WebkitBackdropFilter: "blur(12px)",
backgroundColor: 'rgba(0,0,0,0.9)', backgroundColor: "rgba(0,0,0,0.9)",
mask: 'linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)', mask: "linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
WebkitMask: 'linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)' WebkitMask:
"linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
}} }}
></div> ></div>
@ -213,11 +241,12 @@ function HomeModule3() {
<div <div
className="absolute -bottom-[1rem] -left-0 w-full h-[20rem] z-20 pointer-events-none" className="absolute -bottom-[1rem] -left-0 w-full h-[20rem] z-20 pointer-events-none"
style={{ style={{
backdropFilter: 'blur(12px)', backdropFilter: "blur(12px)",
WebkitBackdropFilter: 'blur(12px)', WebkitBackdropFilter: "blur(12px)",
backgroundColor: 'rgba(0,0,0,0.9)', backgroundColor: "rgba(0,0,0,0.9)",
mask: 'linear-gradient(to top, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)', mask: "linear-gradient(to top, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
WebkitMask: 'linear-gradient(to top, black 0%, black 20%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)' WebkitMask:
"linear-gradient(to top, black 0%, black 20%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
}} }}
></div> ></div>
{videoList.map((column, columnIndex) => ( {videoList.map((column, columnIndex) => (
@ -375,12 +404,10 @@ function HomeModule4() {
} }
/**价格方案 */ /**价格方案 */
function HomeModule5() { function HomeModule5() {
const [billingType, setBillingType] = useState<'month' | 'year'>( const [billingType, setBillingType] = useState<"month" | "year">("month");
"month"
);
const [plans, setPlans] = useState<SubscriptionPlan[]>([]); const [plans, setPlans] = useState<SubscriptionPlan[]>([]);
const pathname = usePathname() const pathname = usePathname();
// 从后端获取订阅计划数据 // 从后端获取订阅计划数据
useEffect(() => { useEffect(() => {
const loadPlans = async () => { const loadPlans = async () => {
@ -388,24 +415,29 @@ function HomeModule5() {
const plansData = await fetchSubscriptionPlans(); const plansData = await fetchSubscriptionPlans();
setPlans(plansData); setPlans(plansData);
} catch (err) { } catch (err) {
console.error('加载订阅计划失败:', err); console.error("加载订阅计划失败:", err);
} }
}; };
loadPlans(); loadPlans();
}, []); }, []);
const pricingPlans = useMemo<{ const pricingPlans = useMemo<
{
title: string; title: string;
price: number; price: number;
credits: string; credits: string;
buttonText: string; buttonText: string;
features: string[]; features: string[];
}[]>(() => { }[]
>(() => {
return plans.map((plan) => { return plans.map((plan) => {
return { return {
title: plan.display_name || plan.name, title: plan.display_name || plan.name,
price: billingType === "month" ? plan.price_month/100 : plan.price_year/100, price:
billingType === "month"
? plan.price_month / 100
: plan.price_year / 100,
credits: plan.description, credits: plan.description,
buttonText: plan.is_free ? "Try For Free" : "Subscribe Now", buttonText: plan.is_free ? "Try For Free" : "Subscribe Now",
features: plan.features || [], features: plan.features || [],
@ -414,13 +446,15 @@ function HomeModule5() {
}, [plans, billingType]); }, [plans, billingType]);
const handleSubscribe = async (planName: string) => { const handleSubscribe = async (planName: string) => {
if (planName === 'hobby') { if (planName === "hobby") {
return; return;
} }
localStorage.setItem('callBackUrl', pathname) localStorage.setItem("callBackUrl", pathname);
try { try {
// 使用新的Checkout Session方案（更简单！） // 使用新的Checkout Session方案（更简单！）
const { createCheckoutSession, redirectToCheckout } = await import('@/lib/stripe'); const { createCheckoutSession, redirectToCheckout } = await import(
"@/lib/stripe"
);
// 从localStorage获取当前用户信息 // 从localStorage获取当前用户信息
const User = JSON.parse(localStorage.getItem("currentUser") || "{}"); const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
@ -433,7 +467,7 @@ function HomeModule5() {
const result = await createCheckoutSession({ const result = await createCheckoutSession({
user_id: String(User.id), user_id: String(User.id),
plan_name: planName, plan_name: planName,
billing_cycle: billingType billing_cycle: billingType,
}); });
if (!result.successful || !result.data) { if (!result.successful || !result.data) {
@ -442,7 +476,6 @@ function HomeModule5() {
// 2. 直接跳转到Stripe托管页面（就这么简单！） // 2. 直接跳转到Stripe托管页面（就这么简单！）
redirectToCheckout(result.data.checkout_url); redirectToCheckout(result.data.checkout_url);
} catch (error) { } catch (error) {
throw new Error("create checkout session failed, please try again later"); throw new Error("create checkout session failed, please try again later");
} }
@ -504,7 +537,10 @@ function HomeModule5() {
<p className="text-white text-[0.875rem] mb-[1rem]"> <p className="text-white text-[0.875rem] mb-[1rem]">
{plan.credits} {plan.credits}
</p> </p>
<button onClick={() => handleSubscribe(plan.title)} className="w-full bg-white text-black py-[0.75rem] rounded-full mb-[1rem] hover:bg-black hover:text-white transition-colors border border-white/20"> <button
onClick={() => handleSubscribe(plan.title)}
className="w-full bg-white text-black py-[0.75rem] rounded-full mb-[1rem] hover:bg-black hover:text-white transition-colors border border-white/20"
>
{plan.buttonText} {plan.buttonText}
</button> </button>
<p className="w-full text-center text-white/60 text-[0.75rem] mb-[2rem]"> <p className="w-full text-center text-white/60 text-[0.75rem] mb-[2rem]">