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-11 04:28:44 -07:00
parent 130a2506ac
commit 62880768fa
21 changed files with 257 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user/app/(main)/(content)/(user)/dashboard/content.tsx
+17 -18
View File
@@ -77,7 +77,7 @@ export default function Content() {
},
});
/*const { data } = useQuery({
const { data } = useQuery({
queryKey: ['getStat'],
queryFn: async () => {
const { data } = await getStat({
@@ -86,13 +86,7 @@ export default function Content() {
return data.data;
},
refetchOnWindowFocus: false,
});*/
const data = {
user: 1,
node: 2,
country: 0,
protocol: ['vmess', 'vless'],
};
});
const { data: announcementData } = useQuery({
queryKey: ['queryAnnouncement'],
@@ -142,9 +136,11 @@ export default function Content() {
{/* 账户概况 Card */}
<Card className='rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
<div className='mb-1 sm:mb-4'>
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>
{t('accountOverview')}
</h3>
{userSubscribe?.[0]?.status === 1 ? (
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>
{t('accountOverview')}
</h3>
) : null}
<p className='mt-1 text-xs text-[#666666] sm:text-sm'>
{user?.auth_methods?.[0]?.auth_identifier}
</p>
@@ -204,12 +200,15 @@ export default function Content() {
<div className='flex items-center gap-2'>
<span className='text-xs sm:text-sm'>{t('availableDevices')}</span>
<div className='flex gap-2'>
<div className='h-4 w-4 rounded-full bg-[#225BA9]'></div>
<div className='h-4 w-4 rounded-full bg-[#D9D9D9]'></div>
<div className='h-4 w-4 rounded-full bg-[#D9D9D9]'></div>
<div className='h-4 w-4 rounded-full bg-[#D9D9D9]'></div>
<div className='h-4 w-4 rounded-full bg-[#D9D9D9]'></div>
<div className='h-4 w-4 rounded-full bg-[#D9D9D9]'></div>
{Array.from({ length: userSubscribe?.[0]?.subscribe.device_limit }).map(
(_, index) => {
return (
<div
className={`h-4 w-4 rounded-full ${index < (userSubscribe?.[0]?.subscribe.device_limit || 0) > 1 ? 'bg-[#225BA9]' : 'bg-[#D9D9D9]'}`}
></div>
);
},
)}
</div>
</div>
<span className='text-xs sm:text-sm'>
@@ -314,7 +313,7 @@ export default function Content() {
</Link>
</div>
{userSubscribe?.[0] && data.protocol ? (
{userSubscribe?.[0] && data?.protocol ? (
<div className='space-y-2 sm:space-y-4'>
<p className='text-xs font-light text-[#666666] sm:text-sm sm:font-normal'>
{t('copySubscriptionLinkOrScanQrCode')}
apps/user/app/(main)/(content)/(user)/order/page.tsx
+31 -9
View File
@@ -4,11 +4,13 @@ import { Display } from '@/components/display';
import { Empty } from '@/components/empty';
import { ProList, ProListActions } from '@/components/pro-list';
import { closeOrder, queryOrderList } from '@/services/user/order';
import { Button } from '@workspace/airo-ui/components/button';
import { purchaseCheckout } from '@/services/user/portal';
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
import { Card, CardContent } from '@workspace/airo-ui/components/card';
import { formatDate } from '@workspace/airo-ui/utils';
import { useTranslations } from 'next-intl';
import { useRef } from 'react';
import { toast } from 'sonner';
import OrderDetailDialog from './components/OrderDetailDialog';
export default function Page() {
@@ -16,6 +18,20 @@ export default function Page() {
const ref = useRef<ProListActions>(null);
const OrderDetailDialogRef = useRef<typeof OrderDetailDialog>(null);
const handlePayment = (orderNo) => {
const data = await purchaseCheckout({
orderNo: orderNo,
returnUrl: window.location.href,
});
if (data.data?.type === 'url' && data.data.checkout_url) {
window.open(data.data.checkout_url, '_blank');
} else {
toast.success(t('paymentSuccess'));
ref?.current.reset();
}
};
return (
<div>
<ProList<API.OrderDetail, Record<string, unknown>>
@@ -38,26 +54,32 @@ export default function Page() {
<div>
{item.status === 1 ? (
<>
<Button
className='min-w-[150px] rounded-full border-[#F8BFD2] bg-[#F8BFD2] px-[35px] py-[9px] text-center text-xl font-bold hover:border-[#F8BFD2] hover:bg-[#FF4248] hover:text-white'
<AiroButton
variant={'danger'}
onClick={async () => {
await closeOrder({ orderNo: item.order_no });
ref.current?.refresh();
}}
>
{t('cancelOrder')}
</Button>
<Button className='ml-3 min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xl font-bold hover:border-[#225BA9] hover:bg-[#225BA9] hover:text-white'>
</AiroButton>
<AiroButton
variant={'primary'}
className={'ml-2'}
onClick={() => {
handlePayment(item.order_no);
}}
>
{t('payment')}
</Button>
</AiroButton>
</>
) : (
<Button
<AiroButton
variant={'default'}
onClick={() => OrderDetailDialogRef?.current?.show(item.order_no)}
className='min-w-[150px] rounded-full border-[#0F2C53] bg-[#0F2C53] px-[35px] py-[9px] text-center text-xl font-bold hover:bg-[#225BA9] hover:text-white'
>
{t('detail')}
</Button>
</AiroButton>
)}
</div>
</div>
apps/user/app/(main)/(content)/(user)/sidebar-left.tsx
+9 -5
View File
@@ -1,4 +1,5 @@
'use client';
import LanguageSwitch from '@/components/language-switch';
import SvgIcon from '@/components/SvgIcon';
import { UserNav } from '@/components/user-nav';
import { navs } from '@/config/navs';
@@ -24,7 +25,7 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
<Sidebar side='left' {...props} className={'border-0 bg-transparent md:bg-white'}>
<div
className={
'relative ml-2.5 flex h-[calc(100dvh-10px-env(safe-area-inset-top))] flex-col rounded-[30px] bg-[#D9D9D9] px-4 md:ml-0 md:h-full md:rounded-none md:bg-white'
'relative ml-2.5 flex h-[calc(100dvh-10px-env(safe-area-inset-top))] flex-col rounded-[30px] bg-[#D9D9D9] px-4 md:ml-0 md:h-full md:rounded-none md:bg-white md:px-8'
}
>
<div className={'absolute -right-3 top-6 md:hidden'} onClick={toggleSidebar}>
@@ -35,7 +36,7 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
'absolute -left-2.5 top-2.5 -z-10 h-full w-full rounded-[30px] bg-[#225BA9] md:hidden'
}
></div>
<div className='pb-7 pl-4 pt-5 md:pt-12'>
<div className='pb-7 pl-4 pt-5 md:pt-9'>
<Link href={'/dashboard'}>
<Image
className={'cursor-pointer'}
@@ -59,14 +60,14 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
<SidebarMenuItem key={nav.title} className={''}>
<SidebarMenuButton
className={
'h-[40px] rounded-full bg-[#EAEAEA] px-5 font-medium hover:bg-[#EAEAEA] hover:text-[#0F2C53] focus-visible:!outline-none focus-visible:!ring-0 active:bg-[#EAEAEA] active:text-[#0F2C53] data-[active=true]:bg-[#0F2C53] md:h-[60px] md:bg-white md:text-xl md:font-normal'
'h-[40px] rounded-full bg-[#EAEAEA] px-5 font-medium hover:bg-[#EAEAEA] hover:text-[#0F2C53] focus-visible:!outline-none focus-visible:!ring-0 active:bg-[#EAEAEA] active:text-[#0F2C53] data-[active=true]:bg-[#0F2C53] md:bg-white md:font-medium'
}
asChild
tooltip={t(nav.title)}
isActive={nav.url === pathname}
>
<Link href={nav.url} onClick={toggleSidebar} className={'gap-4'}>
<div className={'relative size-4 md:!size-6'}>
<div className={'relative size-4'}>
<SvgIcon name={nav.image} />
</div>
<span>{t(nav.title)}</span>
@@ -78,7 +79,10 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
</SidebarMenu>
</SidebarContent>
<SidebarFooter className={'mt-4 px-0'}>
<SidebarFooter className={'mb-6 mt-4 px-0 pb-0'}>
<div>
<LanguageSwitch />
</div>
<UserNav from='profile' />
</SidebarFooter>
</div>
apps/user/app/(main)/(content)/(user)/subscribe/page.tsx
-6
View File
@@ -97,12 +97,6 @@ export default function Page() {
<span className='absolute -top-8 left-16 z-10 rounded-md bg-[#E22C2E] px-2 py-0.5 text-[10px] font-bold leading-none text-white shadow sm:text-xs'>
-20%
{/* 小三角箭头 */}
{/* <span className="
absolute right-0 top-full
block h-0 w-0
border-l-[6px] border-r-[6px] border-t-[16px]
border-l-transparent border-r-transparent border-t-[#E22C2E]
" />*/}
<span
className='absolute right-0 top-[80%] h-10 w-2 bg-[#E22C2E]'
style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)' }}
apps/user/app/(main)/(content)/(user)/ticket/page.tsx
+15 -25
View File
@@ -10,6 +10,7 @@ import {
updateUserTicketStatus,
} from '@/services/user/ticket';
import { useQuery } from '@tanstack/react-query';
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
import { Button } from '@workspace/airo-ui/components/button';
import {
Card,
@@ -89,13 +90,7 @@ export default function Page() {
toolbar: (
<Dialog open={create?.open} onOpenChange={(open) => setCreate({ open })}>
<DialogTrigger asChild>
<Button
className={
'rounded-full border-[#0F2C53] bg-[#0F2C53] px-[35px] py-[9px] text-center font-bold hover:bg-[#225BA9] hover:text-white sm:min-w-[150px] sm:text-xl'
}
>
{t('createTicket')}
</Button>
<AiroButton className={'mr-3'}>{t('createTicket')}</AiroButton>
</DialogTrigger>
<DialogContent className='sm:max-w-[425px]'>
<DialogHeader>
@@ -183,23 +178,20 @@ export default function Page() {
<CardDescription className='flex gap-2'>
{item.status !== 4 ? (
<>
<Button
key='reply'
variant='destructive'
className={
'hidden min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] text-center text-xl font-bold hover:border-[#225BA9] hover:bg-[#225BA9] hover:text-white sm:flex'
}
<AiroButton
variant={'primary'}
onClick={() => setTicketId(item.id)}
className={'hidden sm:flex'}
>
{t('reply')}
</Button>
</AiroButton>
<ConfirmButton
key='close'
trigger={
<Button
variant='destructive'
className={
'rounded-full border-white bg-transparent text-center font-bold text-[#FF4248] shadow-none hover:bg-transparent sm:min-w-[150px] sm:border-[#F8BFD2] sm:bg-[#F8BFD2] sm:text-xl sm:shadow sm:hover:border-[#F8BFD2] sm:hover:bg-[#FF4248] sm:hover:text-white'
'h-8 rounded-full border-white bg-transparent px-6 text-center text-sm font-bold text-[#FF4248] shadow-none hover:bg-transparent sm:min-w-[100px] sm:border-[#F8BFD2] sm:bg-[#F8BFD2] sm:text-white sm:shadow sm:hover:border-[#F8BFD2] sm:hover:bg-[#FF4248]'
}
>
{t('close')}
@@ -217,9 +209,13 @@ export default function Page() {
/>
</>
) : (
<Button key='check' size='sm' onClick={() => setTicketId(item.id)}>
<AiroButton
key='check'
variant={'primary'}
onClick={() => setTicketId(item.id)}
>
{t('check')}
</Button>
</AiroButton>
)}
</CardDescription>
</CardHeader>
@@ -241,15 +237,9 @@ export default function Page() {
</ul>
</CardContent>
<CardFooter className={'flex justify-center sm:hidden'}>
<Button
key='reply'
className={
'ml-3 min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center font-bold hover:border-[#225BA9] hover:bg-[#225BA9] hover:text-white sm:text-xl'
}
onClick={() => setTicketId(item.id)}
>
<AiroButton key='reply' variant={'primary'} onClick={() => setTicketId(item.id)}>
{t('reply')}
</Button>
</AiroButton>
</CardFooter>
</Card>
);
apps/user/app/(main)/(content)/(user)/wallet/page.tsx
+1 -5
View File
@@ -29,11 +29,7 @@ export default function Page() {
<CardContent className='p-0'>
<h2 className='mb-4 flex items-center justify-between text-base font-bold text-[#666] sm:text-xl'>
<span>{t('assetOverview')}</span>
<Recharge
className={
'rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-base font-bold hover:bg-[#225BA9] hover:text-white sm:text-xl'
}
/>
<Recharge />
</h2>
<div className='mb-4'>
<div className='flex items-center justify-between'>