feat: 新版样式
This commit is contained in:
@@ -7,6 +7,7 @@ import useGlobalStore from '@/config/use-global';
|
||||
import { getStat } from '@/services/common/common';
|
||||
import { queryUserSubscribe } from '@/services/user/user';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
|
||||
import { Button } from '@workspace/airo-ui/components/button';
|
||||
import { Card } from '@workspace/airo-ui/components/card';
|
||||
import { useTranslations } from 'next-intl';
|
||||
@@ -23,6 +24,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 { queryOrderList } from '@/services/user/order';
|
||||
import { default as Airo_Empty } from '@workspace/airo-ui/custom-components/empty';
|
||||
@@ -91,11 +93,120 @@ export default function Content() {
|
||||
|
||||
const popupRef = useRef<PopupRef>(null);
|
||||
const dialogRef = useRef<DialogRef>(null);
|
||||
|
||||
function openPopupWindow(item) {
|
||||
// features 字符串用于控制窗口的特性
|
||||
const pageWidth = 600; // 弹出窗口的宽度
|
||||
const pageHeight = 550; // 弹出窗口的高度
|
||||
const {
|
||||
availLeft, // 返回浏览器可用空间左边距离屏幕（系统桌面）左边界的距离。
|
||||
availHeight, // 浏览器在显示屏上的可用高度，即当前屏幕高度
|
||||
availWidth, // 浏览器在显示屏上的可用宽度，即当前屏幕宽度
|
||||
} = window.screen;
|
||||
const pageTop = (availHeight - pageHeight) / 2; // 窗口的垂直位置
|
||||
let pageLeft = (availWidth - pageWidth) / 2; // 窗口的水平位置;
|
||||
|
||||
pageLeft += availLeft; // 加上屏幕偏移值
|
||||
|
||||
const features = `width=${pageWidth},height=${pageHeight},left=${pageLeft},top=${pageTop},toolbar=no,location=no,menubar=no`;
|
||||
console.log(features);
|
||||
window.open(item.download, item.title, features);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={'grid grid-cols-1 gap-[10px] sm:gap-6 lg:grid-cols-2'}>
|
||||
<div className={'grid grid-cols-1 gap-[10px] sm:gap-5 2xl:grid-cols-4'}>
|
||||
{/* 快捷下载 Card */}
|
||||
<Card className='rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] 2xl:order-2 2xl:col-span-1'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>快捷下载</h3>
|
||||
</div>
|
||||
<div className={'text-xs font-normal leading-[1.5] text-[#666]'}>
|
||||
选择对应操作系统下载客户端
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
'mt-2.5 flex items-center justify-around rounded-2xl bg-[#EAEAEA] px-4 pb-3 pt-[18px] text-xs text-[#0F2C53]'
|
||||
}
|
||||
>
|
||||
{[
|
||||
{
|
||||
label: 'iOS',
|
||||
icon: 'Group 77',
|
||||
href: 'https://apps.apple.com/us/app/shadowrocket/id932747118?l=zh-Hans-CN',
|
||||
},
|
||||
{
|
||||
label: 'Mac',
|
||||
icon: 'Group 77',
|
||||
href: 'https://apps.apple.com/us/app/shadowrocket/id932747118?l=zh-Hans-CN',
|
||||
},
|
||||
{ label: 'Win', icon: 'Group 75', href: '' },
|
||||
{ label: 'Android', icon: 'Group 75', href: '' },
|
||||
].map((v) => {
|
||||
return (
|
||||
<a href={v.href} target={'_blank'} className={'cursor-pointer text-center'}>
|
||||
<div className={''}>
|
||||
<SvgIcon name={v.icon}></SvgIcon>
|
||||
</div>
|
||||
{v.label}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
'mt-2.5 flex h-[37px] items-center justify-between rounded-full bg-[#EAEAEA] pl-4 text-[#666]'
|
||||
}
|
||||
>
|
||||
<span className={'text-sm font-medium'}>免费美区Apple ID</span>
|
||||
<AiroButton
|
||||
className={'m-1'}
|
||||
variant={'primary'}
|
||||
onClick={() => {
|
||||
openPopupWindow({
|
||||
download: 'https://aunlock.laomaos.com/share/DEXVzMSP',
|
||||
title: 'Shadowrocket',
|
||||
});
|
||||
}}
|
||||
>
|
||||
获取
|
||||
</AiroButton>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 我的订阅 Card */}
|
||||
<Card className='rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] 2xl:order-3 2xl:col-span-2'>
|
||||
<div className=''>
|
||||
<div className={'flex items-center justify-between'}>
|
||||
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>
|
||||
{t('mySubscription')}
|
||||
</h3>
|
||||
<Link
|
||||
href={'/document'}
|
||||
className='border-0 bg-transparent p-0 text-sm font-semibold text-[#225BA9] shadow-none outline-0 hover:bg-transparent sm:font-normal'
|
||||
>
|
||||
{t('beginnerTutorial')}
|
||||
</Link>
|
||||
</div>
|
||||
<div className={'text-xs font-light leading-[1.5] text-[#666]'}>
|
||||
复制订阅链接或点击二维码按钮扫码
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{userSubscribe?.[0] && data?.protocol ? (
|
||||
<SubScribeCard
|
||||
userSubscribeData={userSubscribe?.[0]}
|
||||
protocol={data.protocol}
|
||||
refetch={refetch}
|
||||
/>
|
||||
) : (
|
||||
<Empty />
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 账户概况 Card */}
|
||||
<Card className='rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
|
||||
<Card className='rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] 2xl:order-1 2xl:col-span-1'>
|
||||
<div className='mb-1'>
|
||||
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>
|
||||
{t('accountOverview')}
|
||||
@@ -120,7 +231,7 @@ export default function Content() {
|
||||
<span className='text-sm font-light text-[#666666]'>{t('accountBalance')}</span>
|
||||
<Recharge
|
||||
className={
|
||||
'min-w-[50px] border-0 bg-transparent p-0 text-sm font-normal text-[#225BA9] shadow-none outline-0 hover:bg-transparent'
|
||||
'min-w-[50px] border-0 bg-transparent p-0 text-sm font-semibold text-[#225BA9] shadow-none outline-0 hover:bg-transparent'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
@@ -131,7 +242,7 @@ export default function Content() {
|
||||
</Card>
|
||||
|
||||
{/* 套餐状态 Card */}
|
||||
<Card className='rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
|
||||
<Card className='2xl:order-0 rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] 2xl:col-span-2'>
|
||||
<div className=''>
|
||||
<h3 className='flex items-center justify-between text-[#666666]'>
|
||||
<div className={'flex items-center justify-between'}>
|
||||
@@ -224,8 +335,9 @@ export default function Content() {
|
||||
<Airo_Empty className={'py-0'} description={t('noPlanAvailable')} />
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 网站公告 Card */}
|
||||
<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'>
|
||||
<Card className='relative rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6 pb-0 2xl:order-4 2xl:col-span-2'>
|
||||
<div className='mb-3 flex items-center justify-between sm:mb-1'>
|
||||
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>
|
||||
{t('siteAnnouncements')}
|
||||
@@ -282,31 +394,6 @@ export default function Content() {
|
||||
<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='flex items-center justify-between'>
|
||||
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>
|
||||
{t('mySubscription')}
|
||||
</h3>
|
||||
<Link
|
||||
href={'/document'}
|
||||
className='border-0 bg-transparent p-0 text-sm font-semibold text-[#225BA9] shadow-none outline-0 hover:bg-transparent sm:font-normal'
|
||||
>
|
||||
{t('beginnerTutorial')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{userSubscribe?.[0] && data?.protocol ? (
|
||||
<SubScribeCard
|
||||
userSubscribeData={userSubscribe?.[0]}
|
||||
protocol={data.protocol}
|
||||
refetch={refetch}
|
||||
/>
|
||||
) : (
|
||||
<Empty />
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user