'use client'; import { Display } from '@/components/display'; import Recharge from '@/components/subscribe/recharge'; import Renewal from '@/components/subscribe/renewal'; import ResetTraffic from '@/components/subscribe/reset-traffic'; import useGlobalStore from '@/config/use-global'; import { queryUserSubscribe, resetUserSubscribeToken } from '@/services/user/user'; import { useQuery } from '@tanstack/react-query'; import { Button } from '@workspace/ui/components/button'; import { Card } from '@workspace/ui/components/card'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@workspace/ui/components/select'; import { useTranslations } from 'next-intl'; import Link from 'next/link'; import { useEffect, useRef, useState } from 'react'; import { toast } from 'sonner'; import { AnnouncementDialog, DialogRef, } from '@/app/(main)/(content)/(user)/dashboard/components/Announcement/Dialog'; import { Popup, PopupRef, } from '@/app/(main)/(content)/(user)/dashboard/components/Announcement/Popup'; import { Empty } from '@/components/empty'; import SvgIcon from '@/components/SvgIcon'; import { queryAnnouncement } from '@/services/user/announcement'; import { Popover, PopoverContent, PopoverTrigger } from '@workspace/airo-ui/components/popover'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from '@workspace/ui/components/alert-dialog'; import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs'; import { differenceInDays, formatDate } from '@workspace/ui/utils'; import { QRCodeCanvas } from 'qrcode.react'; import { CopyToClipboard } from 'react-copy-to-clipboard'; const platforms: (keyof API.ApplicationPlatform)[] = [ 'windows', 'macos', 'linux', 'ios', 'android', 'harmony', ]; export default function Content() { const t = useTranslations('dashboard'); const { getUserSubscribe, getAppSubLink } = useGlobalStore(); const [protocol, setProtocol] = useState(''); const [userSubscribeProtocol, setUserSubscribeProtocol] = useState([]); const [userSubscribeProtocolCurrent, setUserSubscribeProtocolCurrent] = useState(''); const { data: userSubscribe = [], refetch, isLoading, } = useQuery({ queryKey: ['queryUserSubscribe'], queryFn: async () => { const { data } = await queryUserSubscribe(); return data.data?.list || []; }, }); /*const { data } = useQuery({ queryKey: ['getStat'], queryFn: async () => { const { data } = await getStat({ skipErrorHandler: true, }); return data.data; }, refetchOnWindowFocus: false, });*/ const data = { user: 1, node: 2, country: 0, protocol: ['vmess', 'vless'], }; const { data: announcementData } = useQuery({ queryKey: ['queryAnnouncement'], queryFn: async () => { const { data } = await queryAnnouncement({ page: 1, size: 4, pinned: true, popup: true, }); return data.data?.announcements || []; }, }); useEffect(() => { if (data && userSubscribe?.length > 0 && !userSubscribeProtocol.length) { const list = getUserSubscribe(userSubscribe[0]?.token, data.protocol); setUserSubscribeProtocol(list); if (list.length > 0) { setUserSubscribeProtocolCurrent(list[0]); } } }, [data, userSubscribe, userSubscribeProtocol.length]); const statusWatermarks = { 2: t('finished'), 3: t('expired'), 4: t('deducted'), }; const { user } = useGlobalStore(); const totalAssets = (user?.balance || 0) + (user?.commission || 0) + (user?.gift_amount || 0); // 获取当前选中项的显示标签 const getCurrentLabel = () => { const currentIndex = userSubscribeProtocol.findIndex( (url) => url === userSubscribeProtocolCurrent, ); return currentIndex !== -1 ? `${t('subscriptionUrl')}${currentIndex + 1}` : t('address1'); }; const popupRef = useRef(null); const dialogRef = useRef(null); return ( <>
{/* 账户概况 Card */}

{t('accountOverview')}

{user?.auth_methods?.[0]?.auth_identifier}

{t('annualPlanUser')}
{t('accountBalance')}
{/* 套餐状态 Card */}

{t('planStatus')} {t('inEffect')}

{t('planExpirationTime')} {formatDate(userSubscribe?.[0]?.expire_time, false)}
{userSubscribe?.[0]?.subscribe.name}
{t('availableDevices')}
{t('online')} {userSubscribe?.[0]?.subscribe.device_limit}
{t('usedTrafficTotalTraffic')} /{' '} {t('remaining')} {100 - Math.round( (((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) / (userSubscribe?.[0]?.traffic || 1)) * 100, )} %
{/* 网站公告 Card */}

{t('siteAnnouncements')}

{announcementData?.length ? ( ) : null}
{/* 置顶公告 */} {announcementData?.map((item) => { return (

{item.pinned && t('pinnedAnnouncement')}{' '} {item.content}

popupRef.current?.open(item)} > {t('viewDetails')}
); })}
{/* 我的订阅 Card */}

{t('mySubscription')}

{t('beginnerTutorial')}
{userSubscribe?.[0] && data.protocol ? (

{t('copySubscriptionLinkOrScanQrCode')}

{/* 统计信息 */}

{t('totalTraffic')}

{t('nextResetDays')}

{userSubscribe?.[0] ? differenceInDays(new Date(userSubscribe?.[0].reset_time), new Date()) : t('noReset')}

{t('expirationDays')}

{userSubscribe?.[0]?.expire_time ? differenceInDays(new Date(userSubscribe?.[0].expire_time), new Date()) || t('unknown') : t('noLimit')}

{/* 订阅链接 */}
{data?.protocol && data?.protocol.length > 1 && ( {['all', ...(data?.protocol || [])].map((item) => ( {item} ))} )}
{userSubscribeProtocolCurrent}
{ if (result) { toast.success(t('copySuccess')); } }} >

{t('scanCodeToSubscribe')}

{t('prompt')} {t('confirmResetSubscription')} {t('cancel')} { await resetUserSubscribeToken({ user_subscribe_id: userSubscribe?.[0]?.id || 0, }); await refetch(); toast.success(t('resetSuccess')); }} > {t('confirm')}
) : ( )}
{/*{userSubscribe.length ? ( <>

{t('mySubscriptions')}

{userSubscribe.map((item) => { return ( ); })} ) : ( <>

{t('purchaseSubscription')}

)}*/} ); }