feat: 完成代码编写
This commit is contained in:
@@ -18,9 +18,8 @@ export function Header() {
|
||||
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'>
|
||||
<header className='flex h-[84px] w-full items-center justify-between gap-2 md:hidden'>
|
||||
<SidebarTrigger />
|
||||
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList className={'text-[36px] font-semibold'}>
|
||||
{items.map((item, index) => {
|
||||
|
||||
@@ -39,11 +39,11 @@ export const Popup = ({ ref }: PopupProps) => {
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className='max-h-[350px] min-h-[220px] max-w-[80%] rounded-[25px] sm:max-w-[425px]'>
|
||||
<DialogContent className='flex max-h-[350px] min-h-[420px] max-w-[80%] flex-col justify-center rounded-[25px] sm:max-w-[425px]'>
|
||||
<DialogHeader>
|
||||
<DialogTitle className={'sr-only'}>{data.title}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className={'pt-[30%]'}>
|
||||
<div className={'font-light'}>
|
||||
<div className={'mb-4 text-xl'}>{data.title}</div>
|
||||
<Markdown>{data.content}</Markdown>
|
||||
</div>
|
||||
|
||||
@@ -30,6 +30,7 @@ import {
|
||||
PopupRef,
|
||||
} from '@/app/(main)/(content)/(user)/dashboard/components/Announcement/Popup';
|
||||
import { Empty } from '@/components/empty';
|
||||
import SvgIcon from '@/components/SvgIcon';
|
||||
import { queryAnnouncement } from '@/services/user/announcement';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@workspace/airo-ui/components/popover';
|
||||
import {
|
||||
@@ -46,6 +47,7 @@ import {
|
||||
import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
|
||||
import { differenceInDays, formatDate } from '@workspace/ui/utils';
|
||||
import { QRCodeCanvas } from 'qrcode.react';
|
||||
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
||||
|
||||
const platforms: (keyof API.ApplicationPlatform)[] = [
|
||||
'windows',
|
||||
@@ -351,12 +353,12 @@ export default function Content() {
|
||||
onValueChange={setProtocol}
|
||||
className='w-full max-w-full md:w-auto'
|
||||
>
|
||||
<TabsList className='flex h-full flex-wrap gap-2 bg-transparent p-0 *:flex-auto'>
|
||||
<TabsList className='flex h-full flex-wrap gap-2 bg-transparent p-0'>
|
||||
{['all', ...(data?.protocol || [])].map((item) => (
|
||||
<TabsTrigger
|
||||
value={item === 'all' ? '' : item}
|
||||
key={item}
|
||||
className='un rounded-full bg-[#EAEAEA] px-6 py-1 text-[10px] uppercase text-[#66666673] shadow-[inset_0px_0px_4px_0px_rgba(0,0,0,0.25)] data-[state=active]:bg-[#225BA9] data-[state=active]:text-white'
|
||||
className='rounded-full bg-[#EAEAEA] px-6 py-1 text-[10px] uppercase text-[#66666673] shadow-[inset_0px_0px_4px_0px_rgba(0,0,0,0.25)] data-[state=active]:bg-[#225BA9] data-[state=active]:text-white'
|
||||
>
|
||||
{item}
|
||||
</TabsTrigger>
|
||||
@@ -399,20 +401,32 @@ export default function Content() {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<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 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:text-xs'>
|
||||
<div className={'flex items-center gap-4 py-1 text-[10px] sm:text-[16px]'}>
|
||||
<div className={'line-clamp-2 flex-1 break-all'}>
|
||||
{userSubscribeProtocolCurrent}
|
||||
</div>
|
||||
<CopyToClipboard
|
||||
text={userSubscribeProtocolCurrent}
|
||||
onCopy={(text, result) => {
|
||||
if (result) {
|
||||
toast.success(t('copySuccess'));
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className={'cursor-pointer p-1'}>
|
||||
<SvgIcon name={'copy'}></SvgIcon>
|
||||
</span>
|
||||
</CopyToClipboard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<div
|
||||
className={
|
||||
'ml-3 h-[40px] w-[40px] flex-shrink-0 cursor-pointer rounded-lg bg-black'
|
||||
}
|
||||
></div>
|
||||
<div className={'size-10'}>
|
||||
<SvgIcon name={'qrcode'} width={'100%'} height={'100%'}></SvgIcon>
|
||||
</div>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className='w-auto rounded-xl p-4' align='end'>
|
||||
<div className='flex flex-col items-center gap-2'>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
'use client';
|
||||
import SvgIcon from '@/components/SvgIcon';
|
||||
import { UserNav } from '@/components/user-nav';
|
||||
import { navs } from '@/config/navs';
|
||||
import {
|
||||
@@ -10,9 +11,8 @@ import {
|
||||
SidebarMenuItem,
|
||||
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';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
@@ -21,18 +21,21 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
|
||||
const pathname = usePathname();
|
||||
const { toggleSidebar } = useSidebar();
|
||||
return (
|
||||
<Sidebar side='left' {...props} className={'border-0 bg-transparent sm:bg-white'}>
|
||||
<Sidebar side='left' {...props} className={'border-0 bg-transparent md:bg-white'}>
|
||||
<div
|
||||
className={
|
||||
'relative ml-2.5 flex h-[calc(100dvh-10px-env(safe-area-inset-top))] flex-col rounded-[30px] bg-[#D9D9D9] px-4 sm:ml-0 sm:h-full sm:rounded-none sm:bg-white'
|
||||
'relative ml-2.5 flex h-[calc(100dvh-10px-env(safe-area-inset-top))] flex-col rounded-[30px] bg-[#D9D9D9] px-4 md:ml-0 md:h-full md:rounded-none md:bg-white'
|
||||
}
|
||||
>
|
||||
<div className={'absolute -right-3 top-6'} onClick={toggleSidebar}>
|
||||
<Image src={'shrink.png'} height={30} width={30} alt='close' unoptimized></Image>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
'absolute -left-2.5 top-2.5 -z-10 h-full w-full rounded-[30px] bg-[#225BA9] sm:hidden'
|
||||
'absolute -left-2.5 top-2.5 -z-10 h-full w-full rounded-[30px] bg-[#225BA9] md:hidden'
|
||||
}
|
||||
></div>
|
||||
<div className='pb-7 pl-4 pt-5 sm:pt-12'>
|
||||
<div className='pb-7 pl-4 pt-5 md:pt-12'>
|
||||
<Link href={'/dashboard'}>
|
||||
<Image
|
||||
className={'cursor-pointer'}
|
||||
@@ -45,25 +48,27 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
|
||||
</Link>
|
||||
</div>
|
||||
<SidebarContent className={''}>
|
||||
<SidebarMenu className={'gap-1 sm:gap-2.5'}>
|
||||
<SidebarMenu className={'gap-1 md:gap-2.5'}>
|
||||
{navs
|
||||
.filter((v) => !v.hidden)
|
||||
.map((nav, navIndex) => (
|
||||
<SidebarMenu
|
||||
key={navIndex}
|
||||
className={navIndex === 0 ? 'mb-4 sm:mb-[42px]' : 'mb-0'}
|
||||
className={navIndex === 0 ? 'mb-4 md:mb-[42px]' : 'mb-0'}
|
||||
>
|
||||
<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'
|
||||
'h-[40px] rounded-full bg-[#EAEAEA] px-5 font-medium hover:bg-[#EAEAEA] hover:text-[#0F2C53] focus-visible:!outline-none focus-visible:!ring-0 active:bg-[#EAEAEA] active:text-[#0F2C53] data-[active=true]:bg-[#0F2C53] md:h-[60px] md:bg-white md:text-xl md:font-normal'
|
||||
}
|
||||
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} />}
|
||||
<Link href={nav.url} onClick={toggleSidebar} className={'gap-4'}>
|
||||
<div className={'relative size-4 md:!size-6'}>
|
||||
<SvgIcon name={nav.image} />
|
||||
</div>
|
||||
<span>{t(nav.title)}</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
@@ -73,7 +78,7 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
|
||||
</SidebarMenu>
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarFooter className={'mt-4'}>
|
||||
<SidebarFooter className={'mt-4 px-0'}>
|
||||
<UserNav from='profile' />
|
||||
</SidebarFooter>
|
||||
</div>
|
||||
|
||||
@@ -10,15 +10,16 @@ import { useRef } from 'react';
|
||||
|
||||
import { Empty } from '@/components/empty';
|
||||
import Recharge from '@/components/subscribe/recharge';
|
||||
import SvgIcon from '@/components/SvgIcon';
|
||||
import { Button } from '@workspace/ui/components/button';
|
||||
import { formatDate } from '@workspace/ui/utils';
|
||||
import { Copy } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export default function Page() {
|
||||
const t = useTranslations('wallet');
|
||||
const dashboardT = useTranslations('dashboard');
|
||||
const { user } = useGlobalStore();
|
||||
const ref = useRef<ProListActions>(null);
|
||||
const totalAssets = (user?.balance || 0) + (user?.commission || 0) + (user?.gift_amount || 0);
|
||||
@@ -44,7 +45,7 @@ export default function Page() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='grid grid-cols-2 gap-2 sm:grid-cols-4 sm:gap-6'>
|
||||
<div className='grid grid-cols-2 gap-2 sm:grid-cols-2 sm:gap-6 md:grid-cols-4'>
|
||||
<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'>
|
||||
@@ -80,12 +81,12 @@ export default function Page() {
|
||||
text={`${location?.origin}/?invite=${user?.refer_code}`}
|
||||
onCopy={(text, result) => {
|
||||
if (result) {
|
||||
toast.success(t('copySuccess'));
|
||||
toast.success(dashboardT('copySuccess'));
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button variant='secondary' size='sm' className='gap-2'>
|
||||
<Copy className='h-4 w-4' />
|
||||
<Button variant='link' size='sm' className='h-auto p-0 px-0 [&_svg]:size-5'>
|
||||
<SvgIcon name={'copy'}></SvgIcon>
|
||||
</Button>
|
||||
</CopyToClipboard>
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user