adds ManageSubscription method

components/layout/top-bar.tsx

@@ -18,7 +18,8 @@ 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 { showQueueNotification } from '@/components/QueueBox/QueueNotification2';
+import { createPortalSession, redirectToPortal } from '@/lib/stripe';
+
 
 interface User {
   id: string;
@@ -43,7 +44,7 @@ export function TopBar({
   );
   const [mounted, setMounted] = React.useState(false);
   const [isLogin, setIsLogin] = useState(false);
-  const pathname = usePathname()
+  const [isManagingSubscription, setIsManagingSubscription] = useState(false);
   useEffect(() => {
     const currentUser = localStorage.getItem("currentUser");
     if (JSON.parse(currentUser || "{}")?.token) {
@@ -58,6 +59,34 @@ export function TopBar({
     return () => console.log("Cleanup mounted effect");
   }, []);
 
+  // 处理订阅管理
+  const handleManageSubscription = async () => {
+    if (!currentUser?.id) {
+      console.error('用户未登录');
+      return;
+    }
+
+    setIsManagingSubscription(true);
+    try {
+      const response = await createPortalSession({
+        user_id: String(currentUser.id),
+        return_url: window.location.origin + '/dashboard'
+      });
+
+      if (response.successful && response.data?.portal_url) {
+        redirectToPortal(response.data.portal_url);
+      } else {
+        console.error('创建订阅管理会话失败:', response.message);
+        alert('无法打开订阅管理页面，请稍后重试');
+      }
+    } catch (error) {
+      console.error('打开订阅管理页面失败:', error);
+      alert('无法打开订阅管理页面，请稍后重试');
+    } finally {
+      setIsManagingSubscription(false);
+    }
+  };
+  
   // 处理点击事件
   useEffect(() => {
     if (!isOpen) return;
@@ -255,7 +284,8 @@ export function TopBar({
                         variant="outline"
                         size="sm"
                         className="text-white border-white hover:bg-white/10 rounded-full px-3 py-1 text-[10px]"
-                        onClick={() => router.push("/pricing")}
+                        onClick={handleManageSubscription}
+                        disabled={isManagingSubscription}
                       >
                         Manage
                       </Button>