S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成代码编写

Browse Source
This commit is contained in:
speakeloudest
2025-08-08 03:03:59 -07:00
parent 19fe24660e
commit aead2ff68f
26 changed files with 793 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user/components/affiliate/components/AffiliateDialog.tsx
+78
View File
@@ -0,0 +1,78 @@
'use client';
import { Empty } from '@/components/empty';
import { queryUserAffiliateList } from '@/services/user/user';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from '@workspace/airo-ui/components/dialog';
import { ProList } from '@workspace/ui/custom-components/pro-list/pro-list';
import { formatDate } from '@workspace/ui/utils';
import { useTranslations } from 'next-intl';
import { useImperativeHandle, useState } from 'react';
export interface AffiliateDialogRef {
open: () => void;
close: () => void;
}
interface AffiliateDialogProps {
ref?: React.Ref<AffiliateDialogRef>;
}
export const AffiliateDialog = ({ ref }: AffiliateDialogProps) => {
const [open, setOpen] = useState(false);
const [sum, setSum] = useState<number>();
const t = useTranslations('affiliate');
useImperativeHandle(ref, () => ({
open: () => {
setOpen(true);
},
close: () => {
setOpen(false);
},
}));
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className='overflow-y-auto sm:max-w-[800px]'>
<DialogHeader>
<DialogTitle className='text-left text-2xl sm:text-4xl'>{t('inviteRecords')}</DialogTitle>
</DialogHeader>
<div className='mt-6'>
<ProList<API.UserAffiliate, Record<string, unknown>>
request={async (pagination, filter) => {
const response = await queryUserAffiliateList({ ...pagination, ...filter });
setSum(response.data.data?.sum);
return {
list: response.data.data?.list || [],
total: response.data.data?.total || 0,
};
}}
renderItem={(invite) => {
return (
<div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2 text-[10px] sm:text-base'>
<div>
<div className={'text-[#225BA9]'}>用户识别代码</div>
<div className={'font-bold text-[#091B33]'}>{invite.identifier}</div>
</div>
<div>
<div className={'text-[#225BA9]'}>时间</div>
<div className={'font-bold text-[#091B33]'}>
{formatDate(invite.registered_at)}
</div>
</div>
</div>
);
}}
empty={<Empty />}
/>
</div>
</DialogContent>
</Dialog>
);
};
apps/user/components/affiliate/index.tsx
+45 -52
View File
@@ -1,5 +1,9 @@
'use client';
import {
AffiliateDialog,
AffiliateDialogRef,
} from '@/components/affiliate/components/AffiliateDialog';
import { Display } from '@/components/display';
import { Empty } from '@/components/empty';
import useGlobalStore from '@/config/use-global';
@@ -10,7 +14,7 @@ import { Card, CardContent } from '@workspace/ui/components/card';
import { formatDate } from '@workspace/ui/utils';
import { Copy } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { useRef, useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { toast } from 'sonner';
@@ -36,32 +40,50 @@ export default function Affiliate() {
return response.data.data?.list || [];
},
});
const dialogRef = useRef<AffiliateDialogRef>(null);
return (
<div className='grid grid-cols-2 gap-4'>
<div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
<Card
className={
'rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'
}
>
<CardContent className={'p-0 text-[#666]'}>
<div className={'mb-6'}>
<div className={'text-xl font-bold'}>{t('totalCommission')}</div>
<div className={'text-[15px] font-light'}>佣金金额，邀请成功后自动转入钱包余额</div>
<div className={'sm:mb-6'}>
<div className={'font-bold sm:text-xl'}>{t('totalCommission')}</div>
<div className={'text-xs font-light sm:text-[15px]'}>
佣金金额，邀请成功后自动转入钱包余额
</div>
</div>
<div className={'text-[32px] font-bold text-[#091B33]'}>历史推荐用户：7</div>
<div className={'grid grid-cols-2 gap-5'}>
<div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
<p className='mb-3 text-sm font-medium text-[#666] opacity-80'>佣金总额</p>
<p className='text-2xl font-bold text-[#225BA9]'>
<div className={'mb-3 text-xl font-bold text-[#091B33] sm:text-[32px]'}>
历史推荐用户：7
</div>
<div className={'grid grid-cols-2 gap-[10px] sm:gap-5'}>
<div className='rounded-[20px] bg-[#EAEAEA] px-4 py-2 shadow-sm transition-all duration-300 hover:shadow-md sm:py-4'>
<p className='font-medium text-[#666] opacity-80 sm:mb-3 sm:text-sm'>佣金总额</p>
<p className='text-xl font-bold text-[#225BA9] sm:text-2xl'>
<Display type='currency' value={data?.total_commission} />
</p>
</div>
<div className='rounded-[20px] border-2 border-[#D9D9D9] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
<p className='mb-3 flex justify-between text-sm font-medium text-[#666] opacity-80'>
<span>返佣邀请码</span>
<div className='rounded-[20px] border-2 border-[#D9D9D9] px-4 py-2 shadow-sm transition-all duration-300 hover:shadow-md sm:py-4'>
<p className='flex justify-between font-medium text-[#666] opacity-80 sm:mb-3 sm:text-sm'>
<span className={'flex'}>
返佣邀请码
<CopyToClipboard
text={`${location?.origin}/?invite=${user?.refer_code}`}
onCopy={(text, result) => {
if (result) {
toast.success(t('copySuccess'));
}
}}
>
<Button variant='secondary' size='sm' className='px-0 sm:hidden'>
<Copy className='h-4 w-4' />
</Button>
</CopyToClipboard>
</span>
</p>
<p className='flex justify-between text-2xl font-bold text-[#225BA9]'>
<p className='flex justify-between text-xl font-bold text-[#225BA9] sm:text-2xl'>
<span> {user?.refer_code}</span>
<CopyToClipboard
text={`${location?.origin}/?invite=${user?.refer_code}`}
@@ -71,7 +93,7 @@ export default function Affiliate() {
}
}}
>
<Button variant='secondary' size='sm' className='gap-2'>
<Button variant='secondary' size='sm' className='hidden gap-2 sm:block'>
<Copy className='h-4 w-4' />
</Button>
</CopyToClipboard>
@@ -82,11 +104,13 @@ export default function Affiliate() {
</Card>
<Card className='rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6'>
<div className='mb-4 flex items-center justify-between'>
<h3 className='text-xl font-medium text-[#666666]'>邀请记录</h3>
<span className='text-sm text-[#225BA9]'>更多</span>
<h3 className='font-medium text-[#666666] sm:text-xl'>邀请记录</h3>
<span className='text-sm text-[#225BA9]' onClick={() => dialogRef.current.open()}>
更多
</span>
</div>
<div className='space-y-4'>
<div className='space-y-2 sm:space-y-4'>
{inviteList?.length ? (
<div className='relative space-y-3'>
<div
@@ -96,7 +120,7 @@ export default function Affiliate() {
></div>
{inviteList?.map((invite) => {
return (
<div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2'>
<div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2 text-[10px] sm:text-base'>
<div>
<div className={'text-[#225BA9]'}>用户识别代码</div>
<div className={'font-bold text-[#091B33]'}>{invite.identifier}</div>
@@ -116,38 +140,7 @@ export default function Affiliate() {
)}
</div>
</Card>
{/*<ProList<API.UserAffiliate, Record<string, unknown>>
request={async (pagination, filter) => {
const response = await queryUserAffiliateList({ ...pagination, ...filter });
setSum(response.data.data?.sum);
return {
list: response.data.data?.list || [],
total: response.data.data?.total || 0,
};
}}
header={{
title: t('inviteRecords'),
}}
renderItem={(item) => {
return (
<Card className='overflow-hidden'>
<CardContent className='p-3 text-sm'>
<ul className='grid grid-cols-2 gap-3 *:flex *:flex-col'>
<li className='font-semibold'>
<span className='text-muted-foreground'>{t('userIdentifier')}</span>
<span>{item.identifier}</span>
</li>
<li className='font-semibold'>
<span className='text-muted-foreground'>{t('registrationTime')}</span>
<time>{formatDate(item.registered_at)}</time>
</li>
</ul>
</CardContent>
</Card>
);
}}
empty={<Empty />}
/>*/}
<AffiliateDialog ref={dialogRef} />
</div>
);
}
apps/user/components/main/OfferDialog/index.tsx
+31 -11
View File
@@ -52,11 +52,11 @@ const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => (
<div className='mb-2 sm:mb-4'>
<div className='mb-1 flex items-baseline gap-2'>
{plan.origin_price && (
<span className='text-lg font-bold leading-[1.125em] text-[#666666] line-through sm:text-xl md:text-[24px]'>
<span className='text-2xl font-bold leading-[1.125em] text-[#666666] line-through'>
${plan.origin_price}
</span>
)}
<span className='text-lg font-bold leading-[1.125em] text-[#091B33] sm:text-xl md:text-[24px]'>
<span className='text-2xl font-bold leading-[1.125em] text-[#091B33]'>
${plan.discount_price}
</span>
<span className='text-sm font-normal leading-[1.8em] text-[#4D4D4D] sm:text-[15px]'>/年</span>
@@ -68,8 +68,10 @@ const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => (
);
import { useLoginDialog } from '@/app/auth/LoginDialogContext';
import { Display } from '@/components/display';
import Purchase from '@/components/subscribe/purchase';
import useGlobalStore from '@/config/use-global';
import { useTranslations } from 'next-intl';
// 订阅按钮组件
const SubscribeButton = ({ onClick }: { onClick?: () => void }) => {
const { user } = useGlobalStore();
@@ -108,18 +110,36 @@ const StarRating = ({ rating, maxRating = 5 }: { rating: number; maxRating?: num
// 功能列表组件
const FeatureList = ({ plan }: { plan: ProcessedPlanData }) => {
const features = [
{ label: '可用流量', value: plan.features?.traffic || '1' },
{ label: '套餐时长', value: plan.features?.duration || '1' },
{ label: '在线IP', value: plan.features?.onlineIPs || '2' },
{ label: '在线连接数', value: plan.features?.connections || '3' },
{ label: '峰值带宽', value: plan.features?.bandwidth || '2' },
{ label: '可用节点', value: plan.features?.nodes || '11' },
];
const t = useTranslations('subscribe.detail');
const features = [{ label: '可用节点', value: plan.features?.nodes || '11' }];
return (
<div className='mt-6 space-y-0 sm:mt-6'>
<ul className='list-disc space-y-1 pl-5'>
<li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
<div className={'flex items-start justify-between'}>
<span className=''>{t('availableTraffic')}</span>
<span>
<Display type='traffic' value={plan?.traffic} unlimited />
</span>
</div>
</li>
<li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
<div className={'flex items-start justify-between'}>
<span className=''>{t('connectionSpeed')}</span>
<span>
<Display type='trafficSpeed' value={plan?.speed_limit} unlimited />
</span>
</div>
</li>
<li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
<div className={'flex items-start justify-between'}>
<span className=''>{t('connectedDevices')}</span>
<span>
<Display value={plan?.device_limit} type='number' unlimited />
</span>
</div>
</li>
{features.map((feature) => (
<li
key={feature.label}
@@ -164,7 +184,7 @@ const PlanCard = forwardRef<
className='relative w-full max-w-[345px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-8 transition-all duration-300 hover:shadow-lg sm:p-10'
>
{/* 套餐名称 */}
<h3 className='mb-4 text-left text-sm font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
<h3 className='mb-4 text-left text-xl font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
{/* 价格区域 */}
<PriceDisplay plan={plan} />
apps/user/components/subscribe/purchase.tsx
+9 -10
View File
@@ -1,16 +1,19 @@
'use client';
import CloseSvg from '@/components/CustomIcon/icons/close.svg';
import useGlobalStore from '@/config/use-global';
import { preCreateOrder, purchase } from '@/services/user/order';
import { useQuery } from '@tanstack/react-query';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from '@workspace/airo-ui/components/dialog';
import { Button } from '@workspace/ui/components/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@workspace/ui/components/dialog';
import { Separator } from '@workspace/ui/components/separator';
import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
import { LoaderCircle } from 'lucide-react';
import { useTranslations } from 'next-intl';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import {
forwardRef,
@@ -114,16 +117,12 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent
className='rounded-0 flex h-full w-full max-w-full flex-col gap-0 overflow-hidden border-none px-[120px] py-8 sm:h-auto sm:w-[675px] sm:!rounded-[32px] sm:py-12'
closeIcon={<Image src={CloseSvg} alt='close' />}
closeClassName='right-6 top-6 font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
>
<DialogContent className='px-4 sm:h-auto sm:w-[675px] sm:py-12'>
<DialogHeader className='p-6 pb-0'>
<DialogTitle className='sr-only'>{t('buySubscription')}</DialogTitle>
</DialogHeader>
<div>
<div className='text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:text-center sm:text-4xl'>
<div className='pl-4 text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:pl-0 sm:text-center sm:text-4xl'>
购买套餐
</div>
<div>
@@ -156,7 +155,7 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
</TabsList>
</Tabs>
</div>
<div>
<div className={'px-4 sm:px-0'}>
<SubscribeDetail
subscribe={{
...subscribe,
apps/user/components/user-nav.tsx
+16 -13
View File
@@ -2,6 +2,7 @@
import useGlobalStore from '@/config/use-global';
import { Logout } from '@/utils/common';
import { useSidebar } from '@workspace/airo-ui/components/sidebar';
import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/avatar';
import {
DropdownMenu,
@@ -18,23 +19,24 @@ export function UserNav({ from = '' }: { from?: string }) {
const { user, setUser } = useGlobalStore();
const router = useRouter();
const pathname = usePathname();
const { toggleSidebar } = useSidebar();
if (user) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
{from === 'profile' ? (
<div className='mb-3 flex cursor-pointer items-center gap-2 rounded-full bg-[#EAEAEA] p-1 pr-6'>
<Avatar className='h-[52px] w-[52px]'>
<Avatar className='h-[34px] w-[34px] sm:h-[52px] sm:w-[52px]'>
<AvatarImage
alt={user?.avatar ?? ''}
src={user?.avatar ?? ''}
className='object-cover'
/>
<AvatarFallback className='to-primary text-background bg-[#0F2C53] bg-gradient-to-br text-[40px] font-bold'>
<AvatarFallback className='to-primary text-background bg-[#0F2C53] bg-gradient-to-br text-[28px] font-bold sm:text-[40px]'>
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
</AvatarFallback>
</Avatar>
<div className='flex flex-1 items-center justify-between'>
<div className='flex flex-1 items-center justify-between text-xs sm:text-base'>
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
</div>
<Icon icon='lucide:ellipsis' className='text-muted-foreground !size-6' />
@@ -56,24 +58,24 @@ export function UserNav({ from = '' }: { from?: string }) {
forceMount
align='end'
side={from === 'profile' ? 'right' : undefined}
className='w-64 gap-3 rounded-[42px] p-3'
className='flex w-64 flex-col gap-1 rounded-[42px] p-3 sm:gap-3'
>
<div className='mb-3 flex items-center justify-start gap-2 rounded-full bg-[#EAEAEA] p-1'>
<Avatar className='h-[52px] w-[52px]'>
<div className='flex items-center justify-start gap-2 rounded-full bg-[#EAEAEA] p-1'>
<Avatar className='h-[34px] w-[34px] sm:h-[52px] sm:w-[52px]'>
<AvatarImage
alt={user?.avatar ?? ''}
src={user?.avatar ?? ''}
className='object-cover'
/>
<AvatarFallback className='to-primary text-background bg-[#225BA9] bg-gradient-to-br text-2xl font-bold'>
<AvatarFallback className='to-primary text-background bg-[#225BA9] bg-gradient-to-br text-[18px] font-bold sm:text-2xl'>
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
</AvatarFallback>
</Avatar>
<div className='flex flex-col space-y-0.5'>
<p className='text-xl font-medium leading-none'>
<p className='text-xs font-medium leading-none sm:text-xl'>
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
</p>
<p className='text-muted-foreground text-xs'>
<p className='text-muted-foreground text-[10px] sm:text-xs'>
{user?.auth_methods?.[0]?.auth_identifier}
</p>
</div>
@@ -90,11 +92,12 @@ export function UserNav({ from = '' }: { from?: string }) {
data-active={pathname === item.url}
onClick={() => {
if (pathname === item.url) return;
toggleSidebar();
router.push(`${item.url}`);
}}
className='mb-3 flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-xl font-medium focus:bg-[#0F2C53] focus:text-white data-[active=true]:bg-[#0F2C53] data-[active=true]:text-white'
className='flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-base font-medium focus:bg-[#0F2C53] focus:text-white data-[active=true]:bg-[#0F2C53] data-[active=true]:text-white sm:text-xl'
>
<Icon className='!size-6 flex-none' icon={item.icon!} />
<Icon className='!size-4 flex-none sm:!size-6' icon={item.icon!} />
<span className='flex-grow truncate'>{t(item.title)}</span>
</DropdownMenuItem>
))}
@@ -103,9 +106,9 @@ export function UserNav({ from = '' }: { from?: string }) {
Logout();
setUser();
}}
className='flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-xl font-medium text-[#0F2C53] focus:bg-[#E22C2E] focus:text-white'
className='flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-base font-medium text-[#0F2C53] focus:bg-[#E22C2E] focus:text-white sm:text-xl'
>
<Icon className='!size-6 flex-none' icon='uil:exit' />
<Icon className='!size-4 flex-none sm:!size-6' icon='uil:exit' />
<span className='flex-grow'>{t('logout')}</span>
</DropdownMenuItem>
</DropdownMenuContent>