fix: 账户概览布局
This commit is contained in:
parent
08eca0c9e8
commit
0a34f95587
@ -95,8 +95,207 @@ export default function Content() {
|
||||
4: t('deducted'),
|
||||
};
|
||||
|
||||
const { user } = useGlobalStore();
|
||||
return (
|
||||
<>
|
||||
<div className={'grid grid-cols-1 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]'>
|
||||
{user?.auth_methods?.[0]?.auth_identifier}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='mb-6'>
|
||||
<span className='text-3xl font-medium text-[#091B33]'>年度套餐用户</span>
|
||||
</div>
|
||||
|
||||
<div className='rounded-[20px] bg-[#EAEAEA] p-4'>
|
||||
<div className='mb-2 flex items-center justify-between'>
|
||||
<span className='text-sm text-[#666666]'>账户余额</span>
|
||||
<span className='text-sm text-[#225BA9]'>钱包充值</span>
|
||||
</div>
|
||||
<div className='text-3xl font-medium text-[#225BA9]'>$1680.00</div>
|
||||
</div>
|
||||
</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)]'>
|
||||
<div className='mb-4'>
|
||||
<h3 className='flex items-center justify-between text-[#666666]'>
|
||||
<div>
|
||||
<span className={'text-xl'}>套餐状态</span>
|
||||
<span className={'ml-2.5 rounded-full bg-[#A8D4ED] px-2 text-[8px] text-white'}>
|
||||
生效中
|
||||
</span>
|
||||
</div>
|
||||
<span className={'text-sm text-[#225BA9]'}>流量重置</span>
|
||||
</h3>
|
||||
<div>
|
||||
<p className='mb-2 text-sm text-[#666666]'>套餐到期时间：2026-07-29</p>
|
||||
</div>
|
||||
<div className='mt-2'>
|
||||
<span className='text-3xl font-medium text-[#091B33]'>Pro Plan</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='space-y-4'>
|
||||
<div className='space-y-3'>
|
||||
<div className='mb-2 flex items-center justify-between'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='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>
|
||||
<div className='h-4 w-4 rounded-full bg-[#D9D9D9]'></div>
|
||||
<div className='h-4 w-4 rounded-full bg-[#D9D9D9]'></div>
|
||||
<div className='h-4 w-4 rounded-full bg-[#D9D9D9]'></div>
|
||||
<div className='h-4 w-4 rounded-full bg-[#D9D9D9]'></div>
|
||||
</div>
|
||||
</div>
|
||||
<span className='text-sm'>在线：1/6</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className='mb-1 flex items-center justify-between'>
|
||||
<span className='text-sm'>已使用流量/总流量：5.52GB/100GB</span>
|
||||
<span className='text-sm'>剩余：94%</span>
|
||||
</div>
|
||||
<div className='flex h-5 w-full items-center rounded-[20px] bg-[#EAEAEA] p-0.5'>
|
||||
<div className='h-full rounded-[20px] bg-[#225BA9]' style={{ width: '6%' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
{/* 网站公告 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>
|
||||
</div>
|
||||
|
||||
<div className='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='rounded-[20px] border bg-white p-4'>
|
||||
<p className='mb-2 line-clamp-2 text-sm text-[#225BA9]'>
|
||||
【系统通知】充值成功
|
||||
<br />
|
||||
订单 ID：R20250729115302USDT 充值成功，钱包余额...
|
||||
</p>
|
||||
<div className='text-right'>
|
||||
<span className='text-sm text-[#225BA9]'>查看详情</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='rounded-[20px] border bg-white p-4'>
|
||||
<p className='mb-2 line-clamp-2 text-sm text-[#225BA9]'>
|
||||
【系统通知】充值成功
|
||||
<br />
|
||||
订单 ID：R20250729115302USDT 充值成功，钱包余额...
|
||||
</p>
|
||||
<div className='text-right'>
|
||||
<span className='text-sm text-[#225BA9]'>查看详情</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='rounded-[20px] border bg-white p-4'>
|
||||
<p className='mb-2 line-clamp-2 text-sm text-[#225BA9]'>
|
||||
【系统通知】充值成功
|
||||
<br />
|
||||
订单 ID：R20250729115302USDT 充值成功，钱包余额...
|
||||
</p>
|
||||
<div className='text-right'>
|
||||
<span className='text-sm text-[#225BA9]'>查看详情</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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'>
|
||||
<h3 className='text-xl font-medium text-[#666666]'>我的订阅</h3>
|
||||
</div>
|
||||
|
||||
<div className='space-y-4'>
|
||||
<p className='text-sm text-[#666666]'>直接复制订阅链接或点击二维码按钮扫码获取</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]'>100.00 GB</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className='text-xs text-[rgba(132,132,132,0.7)]'>下次重置/天</p>
|
||||
<p className='text-lg font-medium text-[#0F2C53]'>28</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className='text-xs text-[rgba(132,132,132,0.7)]'>到期时间/天</p>
|
||||
<p className='text-lg font-medium text-[#0F2C53]'>363</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 订阅链接 */}
|
||||
<div className='rounded-[26px] bg-[#EAEAEA] p-4'>
|
||||
<div className='mb-2'>
|
||||
{/* 协议选择 */}
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
<button className='rounded-full bg-[#225BA9] px-4 py-1 text-xs text-white'>
|
||||
ALL
|
||||
</button>
|
||||
<button className='rounded-full bg-[#EAEAEA] px-4 py-1 text-xs text-[#666666] shadow-[inset_0px_0px_4px_0px_rgba(0,0,0,0.25)]'>
|
||||
VMESS
|
||||
</button>
|
||||
<button className='rounded-full bg-[#EAEAEA] px-4 py-1 text-xs text-[#666666] shadow-[inset_0px_0px_4px_0px_rgba(0,0,0,0.25)]'>
|
||||
VLESS
|
||||
</button>
|
||||
<button className='rounded-full bg-[#EAEAEA] px-4 py-1 text-xs text-[#666666] shadow-[inset_0px_0px_4px_0px_rgba(0,0,0,0.25)]'>
|
||||
TROJAN
|
||||
</button>
|
||||
<button className='rounded-full bg-[#EAEAEA] px-4 py-1 text-xs text-[#666666] shadow-[inset_0px_0px_4px_0px_rgba(0,0,0,0.25)]'>
|
||||
SHADOW SOCKS
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'mb-2 flex items-center justify-center gap-1'}>
|
||||
<span className='w-20 flex-shrink-0 text-sm font-medium text-[#666666]'>
|
||||
订阅地址 1
|
||||
</span>
|
||||
<div className='line-clamp-2 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)]'>
|
||||
https://api.kxsw.us/api/subscribe?token=512ce3958ef939c668aaf8442d51dd5f
|
||||
</div>
|
||||
<div className={'size-6 flex-shrink-0 rounded-lg bg-black'}></div>
|
||||
</div>
|
||||
<div className='flex justify-between gap-2'>
|
||||
<button className='rounded-full bg-[#E22C2E] px-3 py-1 text-xs text-white'>
|
||||
重置订阅地址
|
||||
</button>
|
||||
<button className='rounded-full bg-[#A8D4ED] px-3 py-1 text-xs text-white'>
|
||||
续订套餐
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
{userSubscribe.length ? (
|
||||
<>
|
||||
<div className='flex items-center justify-between'>
|
||||
@ -121,31 +320,6 @@ export default function Content() {
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-wrap justify-between gap-4'>
|
||||
{/*<Tabs
|
||||
value={platform}
|
||||
onValueChange={(value) => setPlatform(value as keyof API.ApplicationPlatform)}
|
||||
className='w-full max-w-full md:w-auto'
|
||||
>
|
||||
<TabsList className='flex *:flex-auto'>
|
||||
{platforms.map((item) => (
|
||||
<TabsTrigger value={item} key={item} className='px-1 lg:px-3'>
|
||||
<Icon
|
||||
icon={`${
|
||||
{
|
||||
windows: 'mdi:microsoft-windows',
|
||||
macos: 'uil:apple',
|
||||
linux: 'uil:linux',
|
||||
ios: 'simple-icons:ios',
|
||||
android: 'uil:android',
|
||||
harmony: 'simple-icons:harmonyos',
|
||||
}[item]
|
||||
}`}
|
||||
className='size-5'
|
||||
/>
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
</Tabs>*/}
|
||||
{data?.protocol && data?.protocol.length > 1 && (
|
||||
<Tabs
|
||||
value={protocol}
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
import { queryAnnouncement } from '@/services/user/announcement';
|
||||
import { Card } from '@workspace/ui/components/card';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@workspace/ui/components/dialog';
|
||||
import { Icon } from '@workspace/ui/custom-components/icon';
|
||||
import { Markdown } from '@workspace/ui/custom-components/markdown';
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
import { Empty } from '../empty';
|
||||
|
||||
export default async function Announcement({
|
||||
type,
|
||||
@ -48,17 +45,4 @@ export default async function Announcement({
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
if (type === 'pinned') {
|
||||
return (
|
||||
<>
|
||||
<h2 className='flex items-center gap-1.5 font-semibold'>
|
||||
<Icon icon='uil:bell' className='size-5' />
|
||||
{t('latestAnnouncement')}
|
||||
</h2>
|
||||
<Card className='p-6'>
|
||||
{data?.content ? <Markdown>{data?.content}</Markdown> : <Empty />}
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user