feat: 完成代码编写
This commit is contained in:
parent
19fe24660e
commit
aead2ff68f
52
apps/user/app/(main)/(content)/(user)/Header.tsx
Normal file
52
apps/user/app/(main)/(content)/(user)/Header.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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 />
|
||||
);
|
||||
}
|
||||
@ -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} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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'>
|
||||
更多
|
||||
</Button>
|
||||
<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隧道中继，避免直连线路的拥堵，提供更低的延迟和更高的...
|
||||
</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>
|
||||
{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='cursor-pointer text-xs text-[#225BA9] sm:text-sm'
|
||||
onClick={() => popupRef.current.open(item)}
|
||||
>
|
||||
查看详情
|
||||
</span>
|
||||
</div>
|
||||
</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>
|
||||
</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}
|
||||
/>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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')}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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,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>
|
||||
|
||||
@ -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'
|
||||
}
|
||||
>
|
||||
保存
|
||||
|
||||
@ -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,46 +19,63 @@ 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'>
|
||||
<Link href={'/dashboard'}>
|
||||
<Image
|
||||
className={'cursor-pointer'}
|
||||
src={'image.png'}
|
||||
width={102}
|
||||
height={49}
|
||||
alt='logo'
|
||||
unoptimized
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<SidebarContent className={''}>
|
||||
<SidebarMenu className={'gap-2.5'}>
|
||||
{navs.map((nav, navIndex) => (
|
||||
<SidebarMenu key={navIndex} className={navIndex === 0 ? '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]'
|
||||
}
|
||||
asChild
|
||||
tooltip={t(nav.title)}
|
||||
isActive={nav.url === pathname}
|
||||
<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'}
|
||||
src={'image.png'}
|
||||
width={102}
|
||||
height={49}
|
||||
alt='logo'
|
||||
unoptimized
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<SidebarContent className={''}>
|
||||
<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'}
|
||||
>
|
||||
<Link href={nav.url}>
|
||||
{nav.icon && <Icon className={'!size-6'} icon={nav.icon} />}
|
||||
<span>{t(nav.title)}</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarContent>
|
||||
<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] 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} 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>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarContent>
|
||||
|
||||
<div className={'mt-4'}>
|
||||
<UserNav from='profile' />
|
||||
<SidebarFooter className={'mt-4'}>
|
||||
<UserNav from='profile' />
|
||||
</SidebarFooter>
|
||||
</div>
|
||||
</Sidebar>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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} />
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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'} />
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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)}
|
||||
|
||||
@ -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];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user