From 3022a497d5e4aedabbfea9c8ddf6f31765efa142 Mon Sep 17 00:00:00 2001
From: Zixin Zhou <zhouzixin@apache.org>
Date: Tue, 9 Sep 2025 21:14:06 +0800
Subject: [PATCH] adds alipay

---
 components/layout/top-bar.tsx | 115 ++++++++++++++++++++++++++++++----
 lib/stripe.ts                 |  32 ++++++++++
 2 files changed, 136 insertions(+), 11 deletions(-)

diff --git a/components/layout/top-bar.tsx b/components/layout/top-bar.tsx
index 2516a30..49a438e 100644
--- a/components/layout/top-bar.tsx
+++ b/components/layout/top-bar.tsx
@@ -23,6 +23,7 @@ import {
   createPortalSession,
   redirectToPortal,
   getUserSubscriptionInfo,
+  buyTokens,
 } from "@/lib/stripe";
 import UserCard from "@/components/common/userCard";
 import { showInsufficientPointsNotification } from "@/utils/notifications";
@@ -51,6 +52,8 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
   const [subscriptionStatus, setSubscriptionStatus] = useState<string>("");
   const [credits, setCredits] = useState<number>(0);
   const [isLoadingSubscription, setIsLoadingSubscription] = useState(false);
+  const [isBuyingTokens, setIsBuyingTokens] = useState(false);
+  const [customAmount, setCustomAmount] = useState<string>("");
 
   // 获取用户订阅信息
   const fetchSubscriptionInfo = async () => {
@@ -77,6 +80,49 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
     }
   };
 
+  // 处理Token购买
+  const handleBuyTokens = async (tokenAmount: number) => {
+    if (!currentUser?.id) {
+      console.error("用户未登录");
+      return;
+    }
+
+    if (tokenAmount <= 0) {
+      console.error("Token数量必须大于0");
+      return;
+    }
+
+    setIsBuyingTokens(true);
+    try {
+      const response = await buyTokens({
+        token_amount: tokenAmount,
+        package_type: "basic"
+      });
+
+      if (response.successful && response.data?.checkout_url) {
+        // 跳转到Stripe支付页面
+        window.location.href = response.data.checkout_url;
+      } else {
+        console.error("创建Token购买失败:", response.message);
+      }
+    } catch (error) {
+      console.error("Token购买失败:", error);
+    } finally {
+      setIsBuyingTokens(false);
+    }
+  };
+
+  // 处理自定义金额购买
+  const handleCustomAmountBuy = async () => {
+    const amount = parseInt(customAmount);
+    if (isNaN(amount) || amount <= 0) {
+      console.error("请输入有效的Token数量");
+      return;
+    }
+    await handleBuyTokens(amount);
+    setCustomAmount(""); // 清空输入框
+  };
+
   useEffect(() => {
     const token = localStorage.getItem("token");
     if (token) {
@@ -299,12 +345,12 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
                         right: "1rem",
                         zIndex: 9999,
                       }}
-                      className="overflow-hidden rounded-xl"
+                      className="overflow-hidden rounded-xl max-h-[90vh]"
                       data-alt="user-menu-dropdown"
                       onClick={(e) => e.stopPropagation()}
                     >
                       <UserCard plan_name={currentUser.plan_name}>
-                        <div className="relative z-[2] w-full h-full flex flex-col text-white p-3">
+                        <div className="relative z-[2] w-full max-h-[80vh] flex flex-col text-white p-3 overflow-y-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent">
                           {/* 顶部用户信息 */}
                           <div className="flex items-center space-x-3 mb-3">
                             <div className="h-10 w-10 rounded-full bg-[#C73BFF] flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
@@ -323,19 +369,66 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
                           </div>
 
                           {/* AI 积分 */}
-                          <div className="flex items-center justify-center space-x-3 mb-4">
-                            <div className="p-2 rounded-full bg-white/10 backdrop-blur-sm">
-                              <Sparkles className="h-5 w-5 text-white" />
+                          <div className="flex flex-col items-center mb-3">
+                            <div className="flex items-center justify-center space-x-3 mb-2">
+                              <div className="p-2 rounded-full bg-white/10 backdrop-blur-sm">
+                                <Sparkles className="h-5 w-5 text-white" />
+                              </div>
+                              <span className="text-white text-base font-semibold">
+                                {isLoadingSubscription
+                                  ? "Loading..."
+                                  : `${credits} credits`}
+                              </span>
+                            </div>
+                            
+                            {/* Purchase Credits 按钮 */}
+                            <div className="flex flex-wrap gap-1 justify-center mb-1">
+                              <button
+                                className="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors disabled:opacity-50"
+                                onClick={() => handleBuyTokens(100)}
+                                disabled={isBuyingTokens}
+                              >
+                                +100 ($1)
+                              </button>
+                              <button
+                                className="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors disabled:opacity-50"
+                                onClick={() => handleBuyTokens(500)}
+                                disabled={isBuyingTokens}
+                              >
+                                +500 ($5)
+                              </button>
+                              <button
+                                className="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors disabled:opacity-50"
+                                onClick={() => handleBuyTokens(1000)}
+                                disabled={isBuyingTokens}
+                              >
+                                +1000 ($10)
+                              </button>
+                            </div>
+                            
+                            {/* 自定义金额输入 */}
+                            <div className="flex items-center space-x-1">
+                              <input
+                                type="number"
+                                value={customAmount}
+                                onChange={(e) => setCustomAmount(e.target.value)}
+                                placeholder="Custom amount"
+                                className="flex-1 px-2 py-1 text-xs bg-white/10 text-white placeholder-white/60 border border-white/20 rounded focus:outline-none focus:border-blue-400"
+                                min="1"
+                                disabled={isBuyingTokens}
+                              />
+                              <button
+                                className="px-2 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700 transition-colors disabled:opacity-50"
+                                onClick={handleCustomAmountBuy}
+                                disabled={isBuyingTokens || !customAmount || parseInt(customAmount) <= 0}
+                              >
+                                Buy (${customAmount ? (parseInt(customAmount) / 100).toFixed(2) : '0.00'})
+                              </button>
                             </div>
-                            <span className="text-white text-base font-semibold">
-                              {isLoadingSubscription
-                                ? "Loading..."
-                                : `${credits} credits`}
-                            </span>
                           </div>
 
                           {/* 操作按钮区域 */}
-                          <div className="flex-1 flex flex-row justify-center items-end">
+                          <div className="flex-1 flex flex-row justify-center items-end space-x-1">
                             <button
                               className="flex-1 bg-transparent border border-white/30 text-white text-xs py-0.5 h-6 rounded hover:bg-white/10 transition-colors"
                               onClick={() => {
diff --git a/lib/stripe.ts b/lib/stripe.ts
index 822268e..a06159d 100644
--- a/lib/stripe.ts
+++ b/lib/stripe.ts
@@ -61,6 +61,22 @@ export interface CreatePortalSessionData {
 
 export type CreatePortalSessionResponse = ApiResponse<CreatePortalSessionData>;
 
+export interface BuyTokensRequest {
+    token_amount: number;
+    package_type?: string;
+}
+
+export interface BuyTokensData {
+    checkout_url: string;
+    session_id: string;
+    biz_order_no: string;
+    amount: number;
+    currency: string;
+    token_amount: number;
+}
+
+export type BuyTokensResponse = ApiResponse<BuyTokensData>;
+
 /**
  * 获取订阅计划列表
  * 从后端API获取所有活跃的订阅计划，后端已经过滤了活跃计划
@@ -187,6 +203,22 @@ export function redirectToCheckout(checkoutUrl: string) {
     }
 }
 
+/**
+ * 购买Token
+ * 
+ * 创建Token购买的Stripe Checkout Session
+ * 定价规则：1美元 = 100 Token
+ */
+export async function buyTokens(
+    request: BuyTokensRequest
+): Promise<BuyTokensResponse> {
+    try {
+        return await post<BuyTokensResponse>('/api/payment/buy-tokens', request);
+    } catch (error) {
+        throw error;
+    }
+}
+
 /**
  * 简单的跳转到Customer Portal页面的工具函数
  */