From a259d66f7c8e55270226d9fecdd5e5cc7304c3c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=B7=E9=BE=99?= Date: Fri, 29 Aug 2025 06:45:11 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=BE=88=E5=A4=9A=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/layout.tsx | 1 - app/pricing/page.tsx | 45 +++++- components/ChatInputBox/ChatInputBox.tsx | 12 +- components/layout/top-bar.tsx | 184 ++++++++++++----------- components/pages/home-page2.tsx | 2 +- 5 files changed, 144 insertions(+), 100 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 4f3600b..a55a4a8 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -26,7 +26,6 @@ export default function RootLayout({ }) { const [showCallbackModal, setShowCallbackModal] = useState(false) const openCallback = async function (ev: MessageEvent) { - console.log(ev) if (ev.data.type === 'waiting-payment') { setShowCallbackModal(true) } diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx index a79c0aa..a0f6381 100644 --- a/app/pricing/page.tsx +++ b/app/pricing/page.tsx @@ -15,8 +15,39 @@ import { fetchSubscriptionPlans, SubscriptionPlan } from "@/lib/stripe"; export default function PricingPage() { + useEffect(() => { + // 获取当前窗口尺寸 + const currentWidth = window.innerWidth; + const currentHeight = window.innerHeight; + // 计算缩放比例 (1920x1080) + const wScale = currentWidth / 1920; + const hScale = currentHeight / 1080; + + // 检查app节点是否存在 + const pricingPage = document.getElementById("pricing-page"); + if (!pricingPage) { + console.error("未找到app节点"); + return; + } + // setHPading((hScale || 1) * 10); + // 创建样式元素 + const style = document.createElement("style"); + + // 设置CSS样式 + style.textContent = ` + #pricing-page { + transform-origin: top left; + transform: scale(${wScale}, ${hScale}); + width: 1920px; + height: 1080px; + } + `; + + // 将样式添加到head + document.head.appendChild(style); + }, []); return ( -
+
{/* Main Content */}
@@ -66,7 +97,7 @@ function HomeModule5() { }, [plans, billingType]); const handleSubscribe = async (planName: string) => { - if (planName === "hobby") { + if (planName === "Kickoff") { return; } @@ -103,14 +134,14 @@ function HomeModule5() { return (

- Start Creating + Pick a plan and make it yours

{/* 计费切换 */} @@ -133,7 +164,7 @@ function HomeModule5() { : "text-white hover:text-gray-300" }`} > - Yearly - 10% + Yearly - 20%
@@ -143,7 +174,7 @@ function HomeModule5() { {pricingPlans.map((plan, index) => (

{plan.title} diff --git a/components/ChatInputBox/ChatInputBox.tsx b/components/ChatInputBox/ChatInputBox.tsx index f2ea722..d0ed1c1 100644 --- a/components/ChatInputBox/ChatInputBox.tsx +++ b/components/ChatInputBox/ChatInputBox.tsx @@ -714,7 +714,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) { {!isExpanded && (
{/* 使用 Dropdown 替代手动控制显示/隐藏 */} - ( @@ -730,7 +730,6 @@ export function ChatInputBox({ noData }: { noData: boolean }) { placement={"left" as any} trigger={["click"]} > - {/* 配置项显示控制按钮 - 齿轮图标 */} - + */}
)} @@ -771,7 +770,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
{/* 左侧功能按钮区域 */}
- {/* 获取创意按钮 */} + {/* 获取创意按钮 )} - + */} {/* 分隔线 */} -
+ {/*
*/} {/* 模板故事按钮 */} @@ -830,6 +829,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) { isCreating={isCreating} handleCreateVideo={handleCreateVideo} icon={} + className="mr-1 mb-1" />
diff --git a/components/layout/top-bar.tsx b/components/layout/top-bar.tsx index 6c66cbf..9bdb9b9 100644 --- a/components/layout/top-bar.tsx +++ b/components/layout/top-bar.tsx @@ -12,14 +12,17 @@ import { LogOut, PanelsLeftBottom, Bell, -} from 'lucide-react'; -import { motion } from 'framer-motion'; -import ReactDOM from 'react-dom'; -import { useRouter, usePathname } from 'next/navigation'; -import React, { useRef, useEffect, useLayoutEffect, useState } from 'react'; -import { logoutUser } from '@/lib/auth'; -import { createPortalSession, redirectToPortal, getUserSubscriptionInfo } from '@/lib/stripe'; - +} from "lucide-react"; +import { motion } from "framer-motion"; +import ReactDOM from "react-dom"; +import { useRouter, usePathname } from "next/navigation"; +import React, { useRef, useEffect, useLayoutEffect, useState } from "react"; +import { logoutUser } from "@/lib/auth"; +import { + createPortalSession, + redirectToPortal, + getUserSubscriptionInfo, +} from "@/lib/stripe"; interface User { id: string; @@ -27,6 +30,7 @@ interface User { email: string; avatar: string; username: string; + plan_name?: string; } export function TopBar({ @@ -40,14 +44,14 @@ export function TopBar({ const [isOpen, setIsOpen] = React.useState(false); const menuRef = useRef(null); const buttonRef = useRef(null); - const currentUser: User = JSON.parse( - localStorage.getItem("currentUser") || "{}" + const [currentUser, setCurrentUser] = useState( + JSON.parse(localStorage.getItem("currentUser") || "{}") ); - const pathname = usePathname() + const pathname = usePathname(); const [mounted, setMounted] = React.useState(false); const [isLogin, setIsLogin] = useState(false); const [isManagingSubscription, setIsManagingSubscription] = useState(false); - const [subscriptionStatus, setSubscriptionStatus] = useState(''); + const [subscriptionStatus, setSubscriptionStatus] = useState(""); const [credits, setCredits] = useState(100); const [isLoadingSubscription, setIsLoadingSubscription] = useState(false); @@ -59,11 +63,18 @@ export function TopBar({ try { const response = await getUserSubscriptionInfo(String(currentUser.id)); if (response.successful && response.data) { - setSubscriptionStatus(response.data.subscription_status); + const status = response.data.subscription_status; + setSubscriptionStatus(status); setCredits(response.data.credits); + + // 更新 currentUser 的 plan_name + setCurrentUser((prev) => ({ + ...prev, + plan_name: response.data.plan_name, + })); } } catch (error) { - console.error('获取订阅信息失败:', error); + console.error("获取订阅信息失败:", error); } finally { setIsLoadingSubscription(false); } @@ -86,7 +97,7 @@ export function TopBar({ // 处理订阅管理 const handleManageSubscription = async () => { if (!currentUser?.id) { - console.error('用户未登录'); + console.error("用户未登录"); return; } @@ -94,7 +105,7 @@ export function TopBar({ try { const response = await createPortalSession({ user_id: String(currentUser.id), - return_url: window.location.origin + '/dashboard' + return_url: window.location.origin + "/dashboard", }); if (response.successful && response.data?.portal_url) { @@ -199,20 +210,31 @@ export function TopBar({

- { - isLogin ?(
+ {isLogin ? ( +
{/* Pricing Link */} - + {pathname === "/" ? ( + + ) : ( + + )} {/* Notifications */} {/*
-

- {currentUser.name || currentUser.username} -

+
+

+ {currentUser.name || currentUser.username} +

+ {currentUser.plan_name && + currentUser.plan_name !== "none" && ( + + {currentUser.plan_name} + + )} +

{currentUser.email}

@@ -298,7 +338,9 @@ export function TopBar({
- {isLoadingSubscription ? '...' : `${credits} credits`} + {isLoadingSubscription + ? "..." + : `${credits} credits`}
- {subscriptionStatus === 'ACTIVE' && ( + {subscriptionStatus === "ACTIVE" && (
- - {/* Menu Items */} -
- {/* router.push('/my-library')} - data-alt="my-library-button" - > - - My Library - - - { - // 处理退出登录 - setIsOpen(false); - }} - data-alt="logout-button" - > - - Logout - */} - - {/* Footer */} -
-
Privacy Policy · Terms of Service
-
250819215404 | 2025/8/20 06:00:50
-
-
, document.body ) : null}
- ):( -
- - -
- ) - } + + ) : ( +
+ + +
+ )} ); diff --git a/components/pages/home-page2.tsx b/components/pages/home-page2.tsx index abbc84f..c7ae742 100644 --- a/components/pages/home-page2.tsx +++ b/components/pages/home-page2.tsx @@ -622,7 +622,7 @@ function HomeModule5() { >

Pick a plan and make it yours