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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
apps/user/app/(main)/(content)/(user)/Header.tsx Normal file
View File

@ -0,0 +1,52 @@
'use client';
import { findNavByUrl } from '@/config/navs';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@workspace/airo-ui/components/breadcrumb';
import { SidebarTrigger } from '@workspace/airo-ui/components/sidebar';
import { useTranslations } from 'next-intl';
import { usePathname } from 'next/navigation';
import { Fragment, useMemo } from 'react';
export function Header() {
const t = useTranslations('menu');
const pathname = usePathname();
const items = useMemo(() => findNavByUrl(pathname), [pathname]);
return (
<header className='flex h-[84px] w-full items-center justify-between gap-2 sm:hidden'>
<SidebarTrigger />
<Breadcrumb>
<BreadcrumbList className={'text-[36px] font-semibold'}>
{items.map((item, index) => {
return (
<Fragment key={item?.title}>
{index !== items.length - 1 && (
<BreadcrumbItem>
<BreadcrumbLink
href={item?.url || '/dashboard'}
className={'font-semibold text-[#0F2C53]'}
>
{t(item?.title)}
</BreadcrumbLink>
</BreadcrumbItem>
)}
{index < items.length - 1 && <BreadcrumbSeparator />}
{index === items.length - 1 && (
<BreadcrumbPage className={'font-semibold text-[#0F2C53]'}>
{t(item?.title)}
</BreadcrumbPage>
)}
</Fragment>
);
})}
</BreadcrumbList>
</Breadcrumb>
</header>
);
}

34
apps/user/app/(main)/(content)/(user)/announcement/page.tsx
View File

@ -1,34 +0,0 @@
'use client';
import { Empty } from '@/components/empty';
import { queryAnnouncement } from '@/services/user/announcement';
import { useQuery } from '@tanstack/react-query';
import { Timeline } from '@workspace/ui/components/timeline';
import { Markdown } from '@workspace/ui/custom-components/markdown';
export default function Page() {
const { data } = useQuery({
queryKey: ['queryAnnouncement'],
queryFn: async () => {
const { data } = await queryAnnouncement({
page: 1,
size: 99,
pinned: false,
popup: false,
});
return data.data?.announcements || [];
},
});
return data && data.length > 0 ? (
<Timeline
data={
data.map((item) => ({
title: item.title,
content: <Markdown>{item.content}</Markdown>,
})) || []
}
/>
) : (
<Empty />
);
}

158
apps/user/app/(main)/(content)/(user)/dashboard/components/Announcement/Dialog.tsx Normal file
View File

@ -0,0 +1,158 @@
'use client';
import { queryAnnouncement } from '@/services/user/announcement';
import { useQuery } from '@tanstack/react-query';
import {
ColumnFiltersState,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
PaginationState,
useReactTable,
} from '@tanstack/react-table';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from '@workspace/airo-ui/components/dialog';
import { Pagination } from '@workspace/airo-ui/custom-components/pro-table/pagination';
import { useImperativeHandle, useRef, useState } from 'react';
import { Popup, PopupData, PopupRef } from './Popup';
export interface AnnouncementItem {
id: number;
title: string;
content: string;
pinned?: boolean;
}
export interface DialogRef {
open: () => void;
close: () => void;
}
interface DialogProps {
ref?: React.Ref<DialogRef>;
}
export const AnnouncementDialog = ({ ref }: DialogProps) => {
const [open, setOpen] = useState(false);
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const popupRef = useRef<PopupRef>(null);
const { data: announcementData, isLoading } = useQuery({
queryKey: ['queryAnnouncement', pagination.pageIndex + 1, pagination.pageSize],
queryFn: async () => {
const { data } = await queryAnnouncement({
page: pagination.pageIndex + 1,
size: pagination.pageSize,
pinned: true,
popup: true,
});
return {
list: data.data?.announcements || [],
total: data.data?.total || 0,
};
},
enabled: open, // 只在弹窗打开时查询数据
});
const table = useReactTable({
data: announcementData?.list || [],
columns: [],
onPaginationChange: setPagination,
onColumnFiltersChange: setColumnFilters,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getFilteredRowModel: getFilteredRowModel(),
state: {
columnFilters,
pagination,
},
manualPagination: true,
manualFiltering: true,
rowCount: announcementData?.total || 0,
});
useImperativeHandle(ref, () => ({
open: () => {
setOpen(true);
},
close: () => {
setOpen(false);
},
}));
const handleOpenPopup = (item: AnnouncementItem) => {
const popupData: PopupData = {
title: item.title,
content: item.content,
};
popupRef.current?.open(popupData);
};
return (
<>
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className='flex flex-col sm:grid sm:max-w-[600px]'>
<DialogHeader>
<DialogTitle className={'text-left text-2xl sm:text-4xl'}>网站公告</DialogTitle>
</DialogHeader>
<div className='space-y-4'>
{isLoading ? (
<div className='py-8 text-center'>加载中...</div>
) : (
<>
{announcementData?.list?.map((item: AnnouncementItem) => {
return (
<div
key={item.id}
className='flex items-center rounded-[20px] bg-[#B5C9E2] px-4 py-2 sm:p-4'
>
<p className='line-clamp-2 flex-1 text-[10px] text-[#225BA9] sm:text-sm'>
{item.pinned && '【置顶公告】'}{' '}
<span className={`${item.pinned ? 'text-white' : 'text-[#4D4D4D]'}`}>
{item.content}
</span>
</p>
<div className='ml-2 w-[65px] text-right'>
<span
className='cursor-pointer text-xs text-[#225BA9] sm:text-sm'
onClick={() => handleOpenPopup(item)}
>
查看详情
</span>
</div>
</div>
);
})}
{/* 使用 table 的分页器组件 */}
{announcementData && announcementData.list && announcementData.list.length > 0 && (
<div className='mt-6'>
<Pagination
table={table}
text={{
textRowsPerPage: '每页显示',
textPageOf: (pageIndex, pageCount) =>
`第 ${pageIndex} 页，共 ${pageCount} 页`,
}}
/>
</div>
)}
</>
)}
</div>
</DialogContent>
</Dialog>
<Popup ref={popupRef} />
</>
);
};

53
apps/user/app/(main)/(content)/(user)/dashboard/components/Announcement/Popup.tsx Normal file
View File

@ -0,0 +1,53 @@
'use client';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from '@workspace/airo-ui/components/dialog';
import { Markdown } from '@workspace/ui/custom-components/markdown';
import { useImperativeHandle, useState } from 'react';
export interface PopupData {
title: string;
content: string;
}
export interface PopupRef {
open: (data: PopupData) => void;
close: () => void;
}
interface PopupProps {
ref?: React.Ref<PopupRef>;
}
export const Popup = ({ ref }: PopupProps) => {
const [open, setOpen] = useState(false);
const [data, setData] = useState<PopupData>({ title: '', content: '' });
useImperativeHandle(ref, () => ({
open: (newData: PopupData) => {
setData(newData);
setOpen(true);
},
close: () => {
setOpen(false);
},
}));
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className='max-h-[350px] min-h-[220px] max-w-[80%] rounded-[25px] sm:max-w-[425px]'>
<DialogHeader>
<DialogTitle className={'sr-only'}>{data.title}</DialogTitle>
</DialogHeader>
<div className={'pt-[30%]'}>
<div className={'mb-4 text-xl'}>{data.title}</div>
<Markdown>{data.content}</Markdown>
</div>
</DialogContent>
</Dialog>
);
};

209
apps/user/app/(main)/(content)/(user)/dashboard/content.tsx
View File

@ -18,10 +18,20 @@ import {
} from '@workspace/ui/components/select';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { useEffect, useState } from 'react';
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 { queryAnnouncement } from '@/services/user/announcement';
import { Popover, PopoverContent, PopoverTrigger } from '@workspace/airo-ui/components/popover';
import {
AlertDialog,
AlertDialogAction,
@ -35,6 +45,7 @@ import {
} 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';
const platforms: (keyof API.ApplicationPlatform)[] = [
'windows',
@ -81,6 +92,19 @@ export default function Content() {
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);
@ -97,20 +121,31 @@ export default function Content() {
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}` : '地址1';
};
const popupRef = useRef<PopupRef>(null);
const dialogRef = useRef<DialogRef>(null);
return (
<>
<div className={'grid grid-cols-1 gap-6 lg:grid-cols-2'}>
<div className={'grid grid-cols-1 gap-[10px] sm:gap-6 lg:grid-cols-2'}>
{/* 账户概况 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-4'>
<h3 className='text-xl font-medium text-[#666666]'>账户概况</h3>
<p className='mt-1 text-sm text-[#666666]'>
<div className='mb-1 sm:mb-4'>
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>账户概况</h3>
<p className='mt-1 text-xs text-[#666666] sm:text-sm'>
{user?.auth_methods?.[0]?.auth_identifier}
</p>
</div>
<div className='mb-6'>
<span className='text-3xl font-medium text-[#091B33]'>年度套餐用户</span>
<div className='mb-3 sm:mb-6'>
<span className='text-2xl font-medium text-[#091B33] sm:text-3xl'>年度套餐用户</span>
</div>
<div className='rounded-[20px] bg-[#EAEAEA] px-4 py-[10px]'>
@ -122,7 +157,7 @@ export default function Content() {
}
/>
</div>
<div className='text-4xl font-medium text-[#225BA9]'>
<div className='text-xl font-medium text-[#225BA9] sm:text-4xl'>
<Display type='currency' value={totalAssets} />
</div>
</div>
@ -133,7 +168,7 @@ export default function Content() {
<div className='mb-4'>
<h3 className='flex items-center justify-between text-[#666666]'>
<div className={'flex items-center justify-between'}>
<span className={'text-xl font-medium'}>套餐状态</span>
<span className={'text-base font-medium sm:text-xl'}>套餐状态</span>
<span className={'ml-2.5 rounded-full bg-[#A8D4ED] px-2 text-[8px] text-white'}>
生效中
</span>
@ -146,11 +181,11 @@ export default function Content() {
replacement={userSubscribe?.[0]?.subscribe.replacement}
/>
</h3>
<div className='mb-[22px] mt-1 text-sm text-[#666666]'>
<div className='mb-2 text-sm text-[#666666] sm:mb-[22px] sm:mt-1'>
套餐到期时间：{formatDate(userSubscribe?.[0]?.expire_time, false)}
</div>
<div className='mb-6'>
<span className='text-3xl font-medium text-[#091B33]'>
<div className='mb-3 sm:mb-6'>
<span className='text-2xl font-medium text-[#091B33] sm:text-3xl'>
{userSubscribe?.[0]?.subscribe.name}
</span>
</div>
@ -158,7 +193,7 @@ export default function Content() {
<div className='mb-4 flex items-center justify-between'>
<div className='flex items-center gap-2'>
<span className='text-sm'>可用设备</span>
<span className='text-xs sm:text-sm'>可用设备</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>
@ -168,13 +203,13 @@ export default function Content() {
<div className='h-4 w-4 rounded-full bg-[#D9D9D9]'></div>
</div>
</div>
<span className='text-sm'>
在线：undefined/{userSubscribe?.[0]?.subscribe.device_limit}
<span className='text-xs sm:text-sm'>
在线：uu/{userSubscribe?.[0]?.subscribe.device_limit}
</span>
</div>
<div>
<div className='mb-1 flex items-center justify-between'>
<span className='text-sm'>
<span className='text-xs sm:text-sm'>
已使用流量/总流量：
<Display
type='traffic'
@ -188,7 +223,7 @@ export default function Content() {
unlimited={!userSubscribe?.[0]?.traffic}
/>
</span>
<span className='text-sm'>
<span className='text-xs sm:text-sm'>
剩余：
{100 -
(
@ -209,78 +244,73 @@ export default function Content() {
</div>
</Card>
{/* 网站公告 Card */}
<Card className='relative rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6 pb-0'>
<Card className='relative order-4 rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6 pb-0 sm:order-none'>
<div
className={'absolute bottom-0 left-0 right-0 h-[60px] bg-white/30 backdrop-blur-[1px]'}
></div>
<div className='mb-4 flex items-center justify-between'>
<h3 className='text-xl font-medium text-[#666666]'>网站公告</h3>
<Button className='border-0 bg-transparent p-0 text-sm font-normal text-[#225BA9] shadow-none outline-0 hover:bg-transparent'>
<div className='mb-3 flex items-center justify-between sm:mb-4'>
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>网站公告</h3>
{announcementData?.length ? (
<Button
className='border-0 bg-transparent p-0 text-sm font-normal text-[#225BA9] shadow-none outline-0 hover:bg-transparent'
onClick={() => dialogRef.current.open()}
>
更多
</Button>
) : null}
</div>
<div className='space-y-4'>
<div className='space-y-3 sm:space-y-4'>
{/* 置顶公告 */}
<div className='flex items-center rounded-[20px] bg-[#B5C9E2] p-4'>
<p className='mb-2 line-clamp-2 flex-1 text-sm text-[#225BA9]'>
【置顶公告】Airo
Port提供IPLC/IEPL专线或BGP隧道中继，避免直连线路的拥堵，提供更低的延迟和更高的...
{announcementData?.map((item) => {
return (
<div className='flex items-center rounded-[20px] bg-[#B5C9E2] px-4 py-2 sm:p-4'>
<p className='line-clamp-2 flex-1 text-[10px] text-[#225BA9] sm:text-sm'>
{item.pinned && '【置顶公告】'}{' '}
<span className={`${item.pinned ? 'text-white' : 'text-[#4D4D4D]'}`}>
{item.content}
</span>
</p>
<div className='ml-2 w-[65px] text-right'>
<span className='text-sm text-[#225BA9]'>查看详情</span>
</div>
</div>
{/* 系统通知列表 */}
<div className='space-y-3'>
<div className='flex items-center gap-2 rounded-[20px] border bg-white p-4'>
<p className='mb-2 line-clamp-2 flex-1 text-sm text-[#225BA9]'>
【系统通知】充值成功
<br />
订单 ID：R20250729115302USDT 充值成功，钱包余额...
</p>
<div className='text-right'>
<span className='text-sm text-[#225BA9]'>查看详情</span>
</div>
</div>
<div className='rounded-[20px] border bg-white p-4'>
<p className='mb-2 line-clamp-2 flex-1 text-sm text-[#225BA9]'>
【系统通知】充值成功
<br />
订单 ID：R20250729115302USDT 充值成功，钱包余额...
</p>
<div className='text-right'>
<span className='text-sm text-[#225BA9]'>查看详情</span>
</div>
<span
className='cursor-pointer text-xs text-[#225BA9] sm:text-sm'
onClick={() => popupRef.current.open(item)}
>
查看详情
</span>
</div>
</div>
);
})}
</div>
<Popup ref={popupRef} />
<AnnouncementDialog ref={dialogRef} />
</Card>
{/* 我的订阅 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-4 flex items-center justify-between'>
<h3 className='text-xl font-medium text-[#666666]'>我的订阅</h3>
<div className='flex items-center justify-between sm:mb-4'>
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>我的订阅</h3>
<Link
href={'/document'}
className='border-0 bg-transparent p-0 text-sm font-normal text-[#225BA9] shadow-none outline-0 hover:bg-transparent'
className='border-0 bg-transparent p-0 text-sm font-semibold text-[#225BA9] shadow-none outline-0 hover:bg-transparent sm:font-normal'
>
新手教程
</Link>
</div>
{userSubscribe?.[0] && data.protocol ? (
<div className='space-y-4'>
<p className='text-sm text-[#666666]'>直接复制订阅链接或点击二维码按钮扫码获取</p>
<div className='space-y-2 sm:space-y-4'>
<p className='text-xs font-light text-[#666666] sm:text-sm sm:font-normal'>
复制订阅链接或点击二维码按钮扫码
</p>
{/* 统计信息 */}
<div className='rounded-[20px] bg-[#EAEAEA] p-4'>
<div className='grid grid-cols-3 gap-4 text-center'>
<div>
<p className='text-xs text-[rgba(132,132,132,0.7)]'>总流量</p>
<p className='text-lg font-medium text-[#0F2C53]'>
<p className='text-[10px] text-[rgba(132,132,132,0.7)] sm:text-xs'>总流量</p>
<p className='text-xs font-medium text-[#0F2C53] sm:text-lg'>
<Display
type='traffic'
value={userSubscribe?.[0]?.traffic}
@ -289,16 +319,20 @@ export default function Content() {
</p>
</div>
<div>
<p className='text-xs text-[rgba(132,132,132,0.7)]'>{t('nextResetDays')}</p>
<p className='text-lg font-medium text-[#0F2C53]'>
<p className='text-[10px] text-[rgba(132,132,132,0.7)] sm:text-xs'>
{t('nextResetDays')}
</p>
<p className='text-xs font-medium text-[#0F2C53] sm:text-lg'>
{userSubscribe?.[0]
? differenceInDays(new Date(userSubscribe?.[0].reset_time), new Date())
: t('noReset')}
</p>
</div>
<div>
<p className='text-xs text-[rgba(132,132,132,0.7)]'>{t('expirationDays')}</p>
<p className='text-lg font-medium text-[#0F2C53]'>
<p className='text-[10px] text-[rgba(132,132,132,0.7)] sm:text-xs'>
{t('expirationDays')}
</p>
<p className='text-xs font-medium text-[#0F2C53] sm:text-lg'>
{userSubscribe?.[0]?.expire_time
? differenceInDays(new Date(userSubscribe?.[0].expire_time), new Date()) ||
t('unknown')
@ -309,7 +343,7 @@ export default function Content() {
</div>
{/* 订阅链接 */}
<div className='rounded-[26px] bg-[#EAEAEA] p-4'>
<div className='rounded-[26px] bg-[#EAEAEA] p-2 sm:p-4'>
<div className='mb-3 flex flex-wrap justify-between gap-4'>
{data?.protocol && data?.protocol.length > 1 && (
<Tabs
@ -332,16 +366,20 @@ export default function Content() {
)}
</div>
<div className={'mb-3 flex items-center justify-center gap-1'}>
<div className={'flex items-center gap-2 rounded-[16px] bg-[#BABABA] pl-2'}>
<div
className={
'flex items-center gap-1 rounded-full bg-[#BABABA] pl-1 sm:gap-2 sm:rounded-[16px] sm:pl-2'
}
>
<Select
value={userSubscribeProtocolCurrent}
onValueChange={setUserSubscribeProtocolCurrent}
>
<SelectTrigger className='h-[35px] w-20 flex-shrink-0 rounded-[8px] border-none bg-[#D9D9D9] bg-transparent p-2 text-[13px] text-sm font-medium text-white shadow-none hover:bg-[#848484] focus:ring-0 [&>svg]:hidden'>
<SelectTrigger className='h-auto w-auto flex-shrink-0 rounded-[16px] border-none bg-[#D9D9D9] px-2.5 py-0.5 text-[13px] text-sm font-medium text-white shadow-none hover:bg-[#848484] focus:ring-0 sm:h-[35px] sm:rounded-[8px] sm:p-2 [&>svg]:hidden'>
<SelectValue>
<div className='flex flex-col items-center justify-center'>
<div>{t('subscriptionUrl')}1</div>
<div className='h-0 w-0 border-l-[5px] border-r-[5px] border-t-[5px] border-l-transparent border-r-transparent border-t-white'></div>
<div className='flex flex-col items-center justify-center text-[10px] sm:text-sm'>
<div>{getCurrentLabel()}</div>
<div className='-mt-0.5 h-0 w-0 scale-50 border-l-[5px] border-r-[5px] border-t-[5px] border-l-transparent border-r-transparent border-t-white sm:scale-100'></div>
</div>
</SelectValue>
</SelectTrigger>
@ -361,19 +399,42 @@ export default function Content() {
</SelectContent>
</Select>
<div className='flex-1 rounded-[16px] bg-white p-3 text-xs text-[#225BA9] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)]'>
<div className={'line-clamp-2 break-all'}>{userSubscribeProtocolCurrent}</div>
<div className='flex-1 rounded-full bg-white px-3 py-1 text-[10px] leading-tight text-[#225BA9] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)] sm:rounded-[16px] sm:p-3 sm:text-xs'>
<div className={'line-clamp-2 break-all text-[10px] sm:text-base'}>
{userSubscribeProtocolCurrent}
</div>
</div>
</div>
<div className={'ml-3 h-[40px] w-[40px] flex-shrink-0 rounded-lg bg-black'}></div>
<Popover>
<PopoverTrigger asChild>
<div
className={
'ml-3 h-[40px] w-[40px] flex-shrink-0 cursor-pointer rounded-lg bg-black'
}
></div>
</PopoverTrigger>
<PopoverContent className='w-auto rounded-xl p-4' align='end'>
<div className='flex flex-col items-center gap-2'>
<p className='text-muted-foreground text-center text-xs'>扫描码订阅</p>
<QRCodeCanvas
value={userSubscribeProtocolCurrent}
size={120}
bgColor='transparent'
fgColor='rgb(34, 91, 169)'
/>
</div>
</PopoverContent>
</Popover>
</div>
<div className='flex justify-between gap-2'>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button
size='sm'
className={'rounded-full bg-[#E22C2E] px-3 py-1 text-xs text-white'}
className={
'h-fit rounded-full bg-[#E22C2E] px-3 py-1 text-[10px] text-white sm:h-9 sm:text-xs'
}
variant='destructive'
>
{t('resetSubscription')}
@ -403,7 +464,7 @@ export default function Content() {
</AlertDialogContent>
</AlertDialog>
<Renewal
className='rounded-full bg-[#A8D4ED] px-3 py-1 text-xs text-white'
className='h-fit rounded-full bg-[#A8D4ED] px-3 py-1 text-[10px] text-white sm:h-9 sm:text-xs'
id={userSubscribe?.[0]?.id}
subscribe={userSubscribe?.[0]?.subscribe}
/>

13
apps/user/app/(main)/(content)/(user)/document/page.tsx
View File

@ -5,7 +5,6 @@ import { getTutorialList } from '@/utils/tutorial';
import { useQuery } from '@tanstack/react-query';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
import { useLocale, useTranslations } from 'next-intl';
import { DocumentButton } from './document-button';
import { TutorialButton } from './tutorial-button';
export default function Page() {
@ -35,7 +34,7 @@ export default function Page() {
return (
<div className='max-w-[532px] space-y-4'>
{DocumentList?.length > 0 && (
{/*{DocumentList?.length > 0 && (
<>
<h2 className='flex items-center gap-1.5 font-semibold'>{t('document')}</h2>
<Tabs defaultValue='all'>
@ -59,14 +58,16 @@ export default function Page() {
))}
</Tabs>
</>
)}
)}*/}
{TutorialList && TutorialList?.length > 0 && (
<div className='rounded-[46px] bg-[#EAEAEA] px-[34px] py-[28px]'>
<div className='rounded-[46px] bg-[#EAEAEA] px-[23px] py-[19px] sm:px-[34px] sm:py-[28px]'>
<div className='font-semibold text-[#666]'>新手教程</div>
<div className={'mb-2.5 text-sm text-[#666]'}>选择对应操作系统，查看对应软件配置教程</div>
<div className={'mb-2.5 text-xs text-[#666] sm:text-sm'}>
选择对应操作系统，查看对应软件配置教程
</div>
<Tabs defaultValue={TutorialList?.[0]?.title}>
<TabsList className='h-full flex-wrap gap-1 bg-transparent'>
<TabsList className='h-full flex-wrap justify-start gap-1 bg-transparent'>
{TutorialList?.map((tutorial) => (
<TabsTrigger
key={tutorial.title}

10
apps/user/app/(main)/(content)/(user)/document/tutorial-button.tsx
View File

@ -121,11 +121,11 @@ export function TutorialButton({ items }: { items: Item[] }) {
layoutId={`card-${item.title}-${id}`}
key={`card-${item.title}-${id}`}
onClick={() => setActive(item)}
className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-[40px] border p-4'
className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-[40px] border p-1 sm:p-4'
>
<div className='flex flex-row items-center gap-4'>
<motion.div layoutId={`image-${item.title}-${id}`}>
<Avatar className='size-12'>
<Avatar className='size-7 sm:size-12'>
<AvatarImage alt={item.title ?? ''} src={item.icon ?? ''} />
<AvatarFallback className='bg-primary/80 text-white'>
{item.title.split('')[0]}
@ -135,14 +135,14 @@ export function TutorialButton({ items }: { items: Item[] }) {
<div className=''>
<motion.h3
layoutId={`title-${item.title}-${id}`}
className='font-medium text-[#225BA9]'
className='text-[10px] font-medium text-[#225BA9] sm:text-base'
>
{item.title}
</motion.h3>
{item.updated_at && (
<motion.p
layoutId={`description-${item.title}-${id}`}
className='text-center font-bold text-[#848484] md:text-left'
className='text-left text-[10px] font-bold text-[#848484] sm:text-base'
>
{formatDate(new Date(item.updated_at), false)}
</motion.p>
@ -155,7 +155,7 @@ export function TutorialButton({ items }: { items: Item[] }) {
buttonVariants({
variant: 'secondary',
}),
'min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xl font-bold text-white hover:bg-[#225BA9] hover:text-white',
'rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xs font-bold text-white hover:bg-[#225BA9] hover:text-white sm:min-w-[150px] sm:text-xl',
)}
>
{t('read')}

12
apps/user/app/(main)/(content)/(user)/layout.tsx
View File

@ -1,8 +1,8 @@
import Announcement from '@/components/announcement';
import { SidebarInset, SidebarProvider } from '@workspace/ui/components/sidebar';
import { SidebarInset, SidebarProvider } from '@workspace/airo-ui/components/sidebar';
import { cookies } from 'next/headers';
import { Header } from './Header';
import { SidebarLeft } from './sidebar-left';
// import { SidebarTrigger } from '@workspace/ui/components/sidebar';
export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
const cookieStore = await cookies();
@ -12,10 +12,12 @@ export default async function DashboardLayout({ children }: { children: React.Re
<SidebarProvider className='' defaultOpen={defaultOpen}>
<SidebarLeft className='w-[288px] border-r-0 bg-transparent lg:flex' />
<SidebarInset className='relative flex-grow overflow-hidden'>
{/*<SidebarTrigger />*/}
<div className='h-[calc(100vh-56px)] flex-grow gap-4 overflow-auto p-4'>{children}</div>
<div className='h-[calc(100vh-56px)] flex-grow gap-4 overflow-auto p-4'>
{' '}
<Header />
{children}
</div>
</SidebarInset>
{/*<SidebarRight className='sticky top-[84px] hidden w-[288px] border-r-0 bg-transparent 2xl:flex' />*/}
<Announcement type='popup' Authorization={(await cookies()).get('Authorization')?.value} />
</SidebarProvider>
);

24
apps/user/app/(main)/(content)/(user)/profile/change-password.tsx
View File

@ -34,10 +34,22 @@ export default function ChangePassword() {
}
return (
<Card className='min-w-80 rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
<Card className='min-w-80 rounded-[20px] border border-[#D9D9D9] p-4 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:p-6'>
<div className={'mb-3'}>
<div className={'text-xl font-bold'}>{t('accountSettings')}</div>
<div className={'text-[15px] font-light'}>修改登录密码</div>
<div className={'flex items-center justify-between font-bold sm:text-xl'}>
{t('accountSettings')}
<Button
type='submit'
size='sm'
form='password-form'
className={
'h-[32px] w-[110px] rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] text-center text-base font-medium leading-[32px] text-white transition hover:bg-[#225BA9] hover:text-white sm:hidden'
}
>
保存
</Button>
</div>
<div className={'text-xs font-light sm:text-[15px]'}>修改登录密码</div>
</div>
<Form {...form}>
<form id='password-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
@ -49,7 +61,7 @@ export default function ChangePassword() {
<FormControl>
<Input
className={
'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
'h-[60px] rounded-[20px] text-base shadow-[inset_0_0_7.6px_0_#00000040] sm:text-xl md:text-xl'
}
type='password'
placeholder={t('newPassword')}
@ -68,7 +80,7 @@ export default function ChangePassword() {
<FormControl>
<Input
className={
'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
'h-[60px] rounded-[20px] text-base shadow-[inset_0_0_7.6px_0_#00000040] sm:text-xl md:text-xl'
}
type='password'
placeholder={t('repeatNewPassword')}
@ -81,7 +93,7 @@ export default function ChangePassword() {
/>
</form>
</Form>
<div className={'mt-8 flex justify-center'}>
<div className={'mt-8 hidden justify-center sm:flex'}>
<Button
type='submit'
size='sm'

30
apps/user/app/(main)/(content)/(user)/profile/notify-settings.tsx
View File

@ -39,14 +39,30 @@ export default function NotifySettings() {
}
return (
<Card className='flex h-full flex-col justify-between rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
<Card className='flex h-full flex-col justify-between rounded-[20px] border border-[#D9D9D9] p-4 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:p-6'>
<div className={'mb-3'}>
<div className={'text-xl font-bold'}>{t('notify.notificationSettings')}</div>
<div className={'text-[15px] font-light'}>是否邮箱通知推送</div>
<div className={'flex items-center justify-between font-bold sm:text-xl'}>
{t('notify.notificationSettings')}
<Button
type='submit'
size='sm'
form='notify-form'
className={
'h-[32px] w-[110px] rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] text-center text-base font-medium leading-[32px] text-white transition hover:bg-[#225BA9] hover:text-white sm:hidden'
}
>
保存
</Button>
</div>
<div className={'text-xs font-light sm:text-[15px]'}>是否邮箱通知推送</div>
</div>
<Form {...form}>
<form id='notify-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
<div className='space-y-4'>
<form
id='notify-form'
onSubmit={form.handleSubmit(onSubmit)}
className='space-y-2 sm:space-y-4'
>
<div className='grid grid-cols-2 gap-2.5 sm:grid-cols-1 sm:gap-4'>
{[
{ name: 'enable_balance_notify', label: 'balanceChange' },
{ name: 'enable_login_notify', label: 'login' },
@ -58,7 +74,7 @@ export default function NotifySettings() {
control={form.control}
name={name as any}
render={({ field }) => (
<FormItem className='flex flex-col items-center justify-between space-x-4 rounded-[20px] bg-[#EAEAEA] py-2.5'>
<FormItem className='flex flex-col items-center justify-center rounded-[20px] bg-[#EAEAEA] py-2.5'>
<FormLabel className='text-muted-foreground text-sm text-[#848484]'>
{t(`notify.${label}`)}
</FormLabel>
@ -79,7 +95,7 @@ export default function NotifySettings() {
</div>
</form>
</Form>
<div className={'mt-8 flex justify-center'}>
<div className={'mt-8 hidden justify-center sm:flex'}>
<Button
type='submit'
size='sm'

4
apps/user/app/(main)/(content)/(user)/profile/page.tsx
View File

@ -4,8 +4,8 @@ import ThirdPartyAccounts from './third-party-accounts';
export default function Page() {
return (
<div className='flex flex-col gap-[30px] lg:flex-row lg:flex-wrap lg:*:flex-auto'>
<div className={'flex max-w-[543px] flex-auto flex-col gap-[30px]'}>
<div className='flex flex-col gap-[10px] sm:gap-[30px] lg:flex-row lg:flex-wrap lg:*:flex-auto'>
<div className={'flex max-w-[543px] flex-auto flex-col gap-[10px] sm:gap-[30px]'}>
<ThirdPartyAccounts />
<ChangePassword />
</div>

21
apps/user/app/(main)/(content)/(user)/profile/third-party-accounts.tsx
View File

@ -235,25 +235,34 @@ export default function ThirdPartyAccounts() {
<>
<Card
className={
'rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'
'rounded-[20px] border border-[#D9D9D9] p-4 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:p-6'
}
>
<div className={'text-xl font-bold'}>{t('title')}</div>
<div className='mb-4 mt-1 text-sm text-[#666666]'>
<div className={'flex items-center justify-between text-base font-bold sm:text-xl'}>
<span>{t('title')}</span>
<div
className={
'h-[32px] w-[110px] rounded-full bg-[#D9D9D9] text-center font-medium leading-[32px] text-white sm:hidden'
}
>
保存
</div>
</div>
<div className='mb-2 text-xs text-[#666666] sm:mb-4 sm:mt-1 sm:text-sm'>
{user?.auth_methods?.[0]?.auth_identifier}
</div>
<div className={'mb-3'}>Email</div>
<div className={'mb-1 sm:mb-3'}>Email</div>
<div className={'flex items-center gap-2'}>
<div
className={
'line-clamp-1 h-[60px] flex-1 rounded-[20px] bg-[#EAEAEA] px-5 text-xl leading-[60px] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)]'
'line-clamp-1 h-[60px] flex-1 rounded-[20px] bg-[#EAEAEA] px-5 text-base !leading-[60px] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)] sm:text-xl'
}
>
{user?.auth_methods?.[0]?.auth_identifier}
</div>
<div
className={
'h-[32px] w-[110px] rounded-full bg-[#D9D9D9] text-center text-[16px] font-medium leading-[32px] text-white'
'hidden h-[32px] w-[110px] rounded-full bg-[#D9D9D9] text-center text-[16px] font-medium leading-[32px] text-white sm:block'
}
>
保存

39
apps/user/app/(main)/(content)/(user)/sidebar-left.tsx
View File

@ -4,10 +4,12 @@ import { navs } from '@/config/navs';
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@workspace/ui/components/sidebar';
useSidebar,
} from '@workspace/airo-ui/components/sidebar';
import { Icon } from '@workspace/ui/custom-components/icon';
import { useTranslations } from 'next-intl';
import Image from 'next/legacy/image';
@ -17,9 +19,20 @@ import { usePathname } from 'next/navigation';
export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {
const t = useTranslations('menu');
const pathname = usePathname();
const { toggleSidebar } = useSidebar();
return (
<Sidebar collapsible='none' side='left' {...props} className={'h-screen bg-white'}>
<div className='pb-7 pl-4 pt-12'>
<Sidebar side='left' {...props} className={'border-0 bg-transparent sm: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 sm:ml-0 sm:h-full sm:rounded-none sm:bg-white'
}
>
<div
className={
'absolute -left-2.5 top-2.5 -z-10 h-full w-full rounded-[30px] bg-[#225BA9] sm:hidden'
}
></div>
<div className='pb-7 pl-4 pt-5 sm:pt-12'>
<Link href={'/dashboard'}>
<Image
className={'cursor-pointer'}
@ -32,20 +45,25 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
</Link>
</div>
<SidebarContent className={''}>
<SidebarMenu className={'gap-2.5'}>
{navs.map((nav, navIndex) => (
<SidebarMenu key={navIndex} className={navIndex === 0 ? 'mb-[42px]' : 'mb-0'}>
<SidebarMenu className={'gap-1 sm:gap-2.5'}>
{navs
.filter((v) => !v.hidden)
.map((nav, navIndex) => (
<SidebarMenu
key={navIndex}
className={navIndex === 0 ? 'mb-4 sm:mb-[42px]' : 'mb-0'}
>
<SidebarMenuItem key={nav.title} className={''}>
<SidebarMenuButton
className={
'h-[60px] rounded-full px-5 py-[18px] text-xl 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]'
'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] sm:h-[60px] sm:bg-white sm:text-xl sm:font-normal'
}
asChild
tooltip={t(nav.title)}
isActive={nav.url === pathname}
>
<Link href={nav.url}>
{nav.icon && <Icon className={'!size-6'} icon={nav.icon} />}
<Link href={nav.url} onClick={toggleSidebar} className={'gap-4 sm:gap-0.5'}>
{nav.icon && <Icon className={'!size-4 sm:!size-6'} icon={nav.icon} />}
<span>{t(nav.title)}</span>
</Link>
</SidebarMenuButton>
@ -55,8 +73,9 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
</SidebarMenu>
</SidebarContent>
<div className={'mt-4'}>
<SidebarFooter className={'mt-4'}>
<UserNav from='profile' />
</SidebarFooter>
</div>
</Sidebar>
);

12
apps/user/app/(main)/(content)/(user)/subscribe/page.tsx
View File

@ -71,10 +71,18 @@ export default function Page() {
return (
<>
<LoginDialogProvider>
<div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
<div
className={
'hidden text-4xl font-bold text-[#0F2C53] sm:block md:mb-4 md:text-center md:text-5xl'
}
>
选择套餐
</div>
<div className={'text-lg font-medium text-[#666666] md:text-center'}>
<div
className={
'-mt-5 text-right text-lg font-bold text-[#666666] sm:mt-0 sm:text-center sm:font-medium'
}
>
选择最适合您的服务套餐
</div>
<div>

38
apps/user/app/(main)/(content)/(user)/ticket/page.tsx
View File

@ -15,6 +15,7 @@ import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@workspace/ui/components/card';
@ -90,7 +91,7 @@ export default function Page() {
<DialogTrigger asChild>
<Button
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'
'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')}
@ -162,8 +163,8 @@ export default function Page() {
}}
renderItem={(item) => {
return (
<Card className='overflow-hidden pl-16'>
<CardHeader className='flex flex-row items-center justify-between gap-2 space-y-0 bg-transparent p-3'>
<Card className='overflow-hidden sm:pl-16'>
<CardHeader className='flex flex-row items-center justify-between gap-2 space-y-0 bg-transparent p-3 pb-0 sm:pb-3'>
<CardTitle>
<span
className={cn(
@ -184,8 +185,9 @@ export default function Page() {
<>
<Button
key='reply'
variant='destructive'
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'
'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'
}
onClick={() => setTicketId(item.id)}
>
@ -197,9 +199,8 @@ export default function Page() {
<Button
variant='destructive'
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'
'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'
}
size='sm'
>
{t('close')}
</Button>
@ -223,24 +224,33 @@ export default function Page() {
</CardDescription>
</CardHeader>
<CardContent className='p-3 text-sm'>
<ul className='grid gap-3 *:flex *:flex-col lg:grid-cols-3'>
<CardContent className='p-3 text-[10px] sm:text-sm'>
<ul className='grid grid-cols-2 gap-3 *:flex *:flex-col lg:grid-cols-3'>
<li>
<span className='text-[15px] font-normal text-[#225BA9]'>{t('title')}</span>
<span className='font-normal text-[#225BA9]'>{t('title')}</span>
<span className={'font-bold'}> {item.title}</span>
</li>
<li className=''>
<span className='text-[15px] font-normal text-[#225BA9]'>
{t('description')}
</span>
<li className='order-2 sm:order-3'>
<span className='font-normal text-[#225BA9]'>{t('description')}</span>
<time className={'font-bold'}>{item.description}</time>
</li>
<li className=''>
<span className='text-[15px] font-normal text-[#225BA9]'>{t('updatedAt')}</span>
<span className='font-normal text-[#225BA9]'>{t('updatedAt')}</span>
<time className={'font-bold'}>{formatDate(item.updated_at)}</time>
</li>
</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)}
>
{t('reply')}
</Button>
</CardFooter>
</Card>
);
}}

40
apps/user/app/(main)/(content)/(user)/wallet/page.tsx
View File

@ -24,13 +24,13 @@ export default function Page() {
const totalAssets = (user?.balance || 0) + (user?.commission || 0) + (user?.gift_amount || 0);
return (
<>
<Card className='mb-4 rounded-[40px] border border-[#D9D9D9] px-[30px] pb-[30px] pt-[20px] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
<Card className='rounded-[40px] border border-[#D9D9D9] px-[24px] pb-[30px] pt-[20px] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:mb-4 sm:px-[30px]'>
<CardContent className='p-0'>
<h2 className='mb-4 flex items-center justify-between text-xl font-bold text-[#666]'>
<h2 className='mb-4 flex items-center justify-between text-base font-bold text-[#666] sm:text-xl'>
<span>{t('assetOverview')}</span>
<Recharge
className={
'min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xl font-bold hover:bg-[#225BA9] hover:text-white'
'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'
}
/>
</h2>
@ -38,39 +38,43 @@ export default function Page() {
<div className='flex items-center justify-between'>
<div>
<p className='text-sm font-light text-[#666]'>总资产</p>
<p className='text-[32px] font-bold'>
<p className='text-2xl font-bold sm:text-[32px]'>
<Display type='currency' value={totalAssets} />
</p>
</div>
</div>
</div>
<div className='grid grid-cols-1 gap-6 md:grid-cols-4'>
<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='grid grid-cols-2 gap-2 sm:grid-cols-4 sm:gap-6'>
<div className='col-span-2 rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md sm:col-span-1'>
<p className='text-sm font-medium text-[#666] opacity-80 sm:mb-3'>账户余额</p>
<p className='text-xl font-bold text-[#225BA9] sm:text-2xl'>
<Display type='currency' value={user?.balance} />
</p>
</div>
<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'>{t('giftAmount')}</p>
<p className='text-2xl font-bold text-[#225BA9]'>
<p className='t text-sm font-medium text-[#666] opacity-80 sm:mb-3'>
{t('giftAmount')}
</p>
<p className='text-xl font-bold text-[#225BA9] sm:text-2xl'>
<Display type='currency' value={user?.gift_amount} />
</p>
</div>
<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'>{t('commission')}</p>
<p className='text-2xl font-bold text-[#225BA9]'>
<p className='t text-sm font-medium text-[#666] opacity-80 sm:mb-3'>
{t('commission')}
</p>
<p className='text-xl font-bold text-[#225BA9] sm:text-2xl'>
<Display type='currency' value={user?.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'>
<div className='col-span-2 rounded-[20px] border-2 border-[#D9D9D9] p-4 shadow-sm transition-all duration-300 hover:shadow-md sm:col-span-1'>
<p className='mb-1 flex justify-between text-sm font-medium text-[#666] opacity-80 sm:mb-3'>
<span>返佣邀请码</span>
<Link href='/affiliate' className={'text-[#225BA9]'}>
返佣详情
</Link>
</p>
<p className='flex justify-between text-2xl font-bold text-[#225BA9]'>
<p className='flex justify-between text-base font-bold text-[#225BA9] sm:text-2xl'>
<span> {user?.refer_code}</span>
<CopyToClipboard
text={`${location?.origin}/?invite=${user?.refer_code}`}
@ -100,9 +104,9 @@ export default function Page() {
}}
renderItem={(item) => {
return (
<Card className='rounded-[32px] px-[55px]'>
<CardContent className='p-3 text-sm'>
<ul className='grid grid-cols-2 gap-3 *:flex *:flex-col lg:grid-cols-4'>
<Card className='rounded-[32px] px-[20px] sm:px-[55px]'>
<CardContent className='px-0 py-3 text-[10px] sm:p-3 sm:text-sm'>
<ul className='grid grid-cols-4 gap-3 *:flex *:flex-col'>
<li className='font-semibold'>
<span className='text-[#225BA9]'>{t('createdAt')}</span>
<time>{formatDate(item.created_at)}</time>

78
apps/user/components/affiliate/components/AffiliateDialog.tsx Normal file
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>
);
};

97
apps/user/components/affiliate/index.tsx
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 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>
<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>
);
}

42
apps/user/components/main/OfferDialog/index.tsx
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} />

19
apps/user/components/subscribe/purchase.tsx
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,

29
apps/user/components/user-nav.tsx
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>

9
apps/user/config/navs.ts
View File

@ -29,11 +29,12 @@ export const navs = [
icon: 'uil:book-alt',
title: 'document',
},
/*{
url: '/announcement',
{
url: '/profile',
icon: 'uil:megaphone',
title: 'announcement',
},*/
title: 'profile',
hidden: true,
},
{
url: '/ticket',
icon: 'uil:message',

10
packages/airo-ui/src/components/dialog.tsx
View File

@ -32,20 +32,17 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
// 扩展 DialogContentProps 接口
interface DialogContentProps
extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
closeIcon?: React.ReactNode;
closeClassName?: string;
}
extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {}
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
DialogContentProps
>(({ className, closeClassName, closeIcon, children, ...props }, ref) => (
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-0 !container fixed left-[50%] top-[50%] z-50 grid h-full w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-0 gap-4 border p-6 px-8 py-8 shadow-lg duration-200 sm:h-auto sm:!rounded-[32px] sm:rounded-lg sm:px-12 sm:py-12',
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-0 container fixed left-[50%] top-[50%] z-50 h-full w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-auto border p-6 px-8 py-8 shadow-lg duration-200 sm:h-auto sm:!rounded-[32px] sm:px-12 sm:py-12',
className,
)}
{...props}
@ -54,7 +51,6 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Close
className={cn(
'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-6 top-6 rounded-sm font-bold text-black opacity-100 transition-opacity hover:opacity-100 focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:pointer-events-none',
closeClassName,
)}
>
<Image src={CloseSvg} alt={'close'} />

16
packages/airo-ui/src/components/sidebar.tsx
View File

@ -8,7 +8,7 @@ import * as React from 'react';
import { Button } from '@workspace/airo-ui/components/button';
import { Input } from '@workspace/airo-ui/components/input';
import { Separator } from '@workspace/airo-ui/components/separator';
import { Sheet, SheetContent } from '@workspace/airo-ui/components/sheet';
import { Sheet, SheetContent, SheetTitle } from '@workspace/airo-ui/components/sheet';
import { Skeleton } from '@workspace/airo-ui/components/skeleton';
import {
Tooltip,
@ -22,8 +22,8 @@ import { cn } from '@workspace/airo-ui/lib/utils';
const SIDEBAR_COOKIE_NAME = 'sidebar:state';
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
const SIDEBAR_WIDTH = '16rem';
const SIDEBAR_WIDTH_MOBILE = '18rem';
const SIDEBAR_WIDTH_ICON = '3rem';
const SIDEBAR_WIDTH_MOBILE = '14rem';
const SIDEBAR_WIDTH_ICON = '2rem';
const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
type SidebarContext = {
@ -91,8 +91,8 @@ const SidebarProvider = React.forwardRef<
// Helper to toggle the sidebar.
const toggleSidebar = React.useCallback(() => {
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
}, [isMobile, setOpen, setOpenMobile]);
return setOpenMobile((open) => !open);
}, [isMobile, setOpenMobile]);
// Adds a keyboard shortcut to toggle the sidebar.
React.useEffect(() => {
@ -190,10 +190,14 @@ const Sidebar = React.forwardRef<
if (isMobile) {
return (
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
<SheetTitle className={'sr-only'}>Logo</SheetTitle>
<SheetContent
data-sidebar='sidebar'
data-mobile='true'
className='bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden'
className={cn(
'bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden',
className,
)}
style={
{
'--sidebar-width': SIDEBAR_WIDTH_MOBILE,

2
packages/airo-ui/src/custom-components/pro-list/column-filter.tsx
View File

@ -48,7 +48,7 @@ export function ColumnFilter<TData>({ table, params, filters }: ColumnFilterProp
return (
<Input
key={param.key}
className='w-64 rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
className='w-16 rounded-[20px] text-xs shadow-[inset_0_0_7.6px_0_#00000040] sm:w-64 sm:text-xl'
placeholder={param.placeholder || 'Search...'}
value={filters[param.key] || ''}
onChange={(event) => updateFilter(param.key, event.target.value)}

4
packages/airo-ui/src/custom-components/pro-list/pro-list.tsx
View File

@ -132,7 +132,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
const selectedCount = selectedRows.length;
return (
<div className='flex max-w-full flex-col gap-4'>
<div className='flex max-w-full flex-col gap-2 sm:gap-4'>
<div className='flex flex-wrap-reverse items-center justify-between gap-4'>
<div>
{params ? (
@ -171,7 +171,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
'rounded-xl border': data.length === 0,
})}
>
<div className='grid grid-cols-1 gap-4'>
<div className='grid grid-cols-1 gap-2 sm:gap-4'>
{data.length ? (
data.map((item, index) => {
const isSelected = !!rowSelection[index];