S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 修改文案大小

Browse Source
This commit is contained in:
speakeloudest
2025-08-16 09:38:50 -07:00
parent 9cde4cb0a1
commit bf8c01048c
32 changed files with 218 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user/app/(main)/(content)/(user)/dashboard/components/Announcement/Dialog.tsx
+3 -3
View File
@@ -51,8 +51,8 @@ export const AnnouncementDialog = ({ ref }: AnnouncementDialogProps) => {
const response = await queryAnnouncement({
...pagination,
...filter,
pinned: false,
popup: false,
// pinned: false,
// popup: false,
});
return {
list: response.data.data?.announcements || [],
@@ -62,7 +62,7 @@ export const AnnouncementDialog = ({ ref }: AnnouncementDialogProps) => {
renderItem={(item) => {
return (
<div
className={`${item.pinned ? 'bg-[#B5C9E2]' : 'bg-white'} flex items-center rounded-[20px] px-4 py-2 shadow-[0_0_4.5px_0_rgba(0,0,0,0.25)]`}
className={`${item.pinned ? 'bg-[#B5C9E2]' : 'bg-white'} flex items-center rounded-[20px] px-4 py-1.5 shadow-[0_0_4.5px_0_rgba(0,0,0,0.25)]`}
>
<p
className={`${item.pinned ? 'text-white' : 'text-[#4D4D4D]'} line-clamp-2 flex-1 text-[10px] sm:text-sm`}
apps/user/app/(main)/(content)/(user)/dashboard/components/SubscribeCard/index.tsx
+17 -23
View File
@@ -1,7 +1,6 @@
import { Display } from '@/components/display';
import Renewal from '@/components/subscribe/renewal';
import { resetUserSubscribeToken } from '@/services/user/user';
import { Button } from '@workspace/airo-ui/components/button';
import {
Select,
SelectContent,
@@ -14,6 +13,7 @@ import { toast } from 'sonner';
import SvgIcon from '@/components/SvgIcon';
import useGlobalStore from '@/config/use-global';
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
import {
AlertDialog,
AlertDialogAction,
@@ -62,13 +62,13 @@ const SubscribeCard = (props: SubscribeCardProps) => {
</p>
{/* 统计信息 */}
<div className='rounded-[20px] bg-[#EAEAEA] p-4'>
<div className='rounded-[20px] bg-[#EAEAEA] py-4'>
<div className='grid grid-cols-3 gap-4 text-center'>
<div>
<p className='text-[10px] text-[rgba(132,132,132,0.7)] sm:text-xs'>
<p className='text-[10px] text-[rgba(132,132,132,0.7)] sm:text-sm'>
{t('totalTraffic')}
</p>
<p className='text-xs font-medium text-[#0F2C53] sm:text-lg'>
<p className='text-xs font-medium text-[#0F2C53] sm:text-base'>
<Display
type='traffic'
value={userSubscribeData.traffic}
@@ -77,20 +77,20 @@ const SubscribeCard = (props: SubscribeCardProps) => {
</p>
</div>
<div>
<p className='text-[10px] text-[rgba(132,132,132,0.7)] sm:text-xs'>
<p className='text-[10px] text-[rgba(132,132,132,0.7)] sm:text-sm'>
{t('nextResetDays')}
</p>
<p className='text-xs font-medium text-[#0F2C53] sm:text-lg'>
<p className='text-xs font-medium text-[#0F2C53] sm:text-base'>
{userSubscribeData.reset_time
? differenceInDays(new Date(userSubscribeData.reset_time), new Date())
: t('noReset')}
</p>
</div>
<div>
<p className='text-[10px] text-[rgba(132,132,132,0.7)] sm:text-xs'>
<p className='text-[10px] text-[rgba(132,132,132,0.7)] sm:text-sm'>
{t('expirationDays')}
</p>
<p className='text-xs font-medium text-[#0F2C53] sm:text-lg'>
<p className='text-xs font-medium text-[#0F2C53] sm:text-base'>
{userSubscribeData.expire_time
? differenceInDays(new Date(userSubscribeData.expire_time), new Date()) ||
t('unknown')
@@ -123,7 +123,7 @@ const SubscribeCard = (props: SubscribeCardProps) => {
</Tabs>
)}
</div>
<div className={'mb-3 flex items-center justify-center gap-1'}>
<div className={'mb-3 flex items-center justify-center gap-3'}>
<div
className={
'flex flex-1 items-center gap-1 rounded-full bg-[#BABABA] pl-1 sm:gap-2 sm:rounded-[16px] sm:pl-2'
@@ -133,14 +133,14 @@ const SubscribeCard = (props: SubscribeCardProps) => {
value={userSubscribeProtocolCurrent}
onValueChange={setUserSubscribeProtocolCurrent}
>
<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'>
<SelectTrigger className='h-auto w-auto flex-shrink-0 rounded-[16px] border-none bg-[#D9D9D9] px-2.5 py-0.5 text-[13px] font-medium text-[#0F2C53] shadow-none hover:bg-[#848484] focus:ring-0 sm:h-[35px] sm:rounded-[8px] sm:px-2 sm:py-1.5 [&>svg]:hidden'>
<SelectValue>
<div className='flex flex-col items-center justify-center text-[10px] sm:text-sm'>
<div className='flex flex-col items-center justify-between text-[10px] sm:text-xs'>
<div>
{t('subscriptionUrl')}
{userSubscribeProtocolCurrent + 1}
</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 className='-mt-0.5 h-0 w-0 scale-50 border-l-[3px] border-r-[3px] border-t-[3px] border-l-transparent border-r-transparent border-t-[#0F2C53] sm:scale-100'></div>
</div>
</SelectValue>
</SelectTrigger>
@@ -158,8 +158,8 @@ const SubscribeCard = (props: SubscribeCardProps) => {
</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:text-xs'>
<div className={'flex items-center gap-4 py-1 text-[10px] sm:text-[16px]'}>
<div className='flex-1 rounded-full bg-white px-3 py-2 text-[10px] leading-tight text-[#225BA9] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)] sm:rounded-[16px]'>
<div className={'flex items-center gap-4 py-1'}>
<div className={'line-clamp-2 flex-1 break-all'}>
{userSubscribeProtocol[userSubscribeProtocolCurrent]}
</div>
@@ -203,15 +203,9 @@ const SubscribeCard = (props: SubscribeCardProps) => {
<div className='flex justify-between gap-2'>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button
size='sm'
className={
'h-fit rounded-full bg-[#E22C2E] px-3 py-1 text-[10px] text-white sm:h-9 sm:text-xs'
}
variant='destructive'
>
<AiroButton variant='danger' className={'px-2 text-xs'}>
{t('resetSubscription')}
</Button>
</AiroButton>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
@@ -235,7 +229,7 @@ const SubscribeCard = (props: SubscribeCardProps) => {
</AlertDialogContent>
</AlertDialog>
<Renewal
className='h-fit rounded-full bg-[#A8D4ED] px-3 py-1 text-[10px] text-white sm:h-9 sm:text-xs'
className='px-2 text-xs'
id={userSubscribeData.id}
subscribe={userSubscribeData.subscribe}
/>
apps/user/app/(main)/(content)/(user)/dashboard/content.tsx
+15 -15
View File
@@ -64,9 +64,9 @@ export default function Content() {
queryFn: async () => {
const { data } = await queryAnnouncement({
page: 1,
size: 4,
pinned: false,
popup: false,
size: 5,
// pinned: false,
// popup: false,
});
return data.data?.announcements || [];
},
@@ -96,7 +96,7 @@ export default function Content() {
<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-1 sm:mb-4'>
<div className='mb-1'>
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>
{t('accountOverview')}
</h3>
@@ -105,8 +105,8 @@ export default function Content() {
</p>
</div>
<div className='mb-3 sm:mb-6'>
<span className='text-2xl font-medium text-[#091B33] sm:text-3xl'>
<div className='mb-3 sm:mb-3.5'>
<span className='text-2xl font-medium text-[#091B33]'>
{userSubscribe?.length > 0 && userSubscribe[0]?.status === 1 && orderData
? orderData?.quantity === 1
? t('annualMonthPlanUser')
@@ -115,7 +115,7 @@ export default function Content() {
</span>
</div>
<div className='rounded-[20px] bg-[#EAEAEA] px-4 py-[10px]'>
<div className='rounded-[20px] bg-[#EAEAEA] px-5 py-2.5'>
<div className='flex items-center justify-between'>
<span className='text-sm font-light text-[#666666]'>{t('accountBalance')}</span>
<Recharge
@@ -124,7 +124,7 @@ export default function Content() {
}
/>
</div>
<div className='text-xl font-medium text-[#225BA9] sm:text-4xl'>
<div className='text-xl font-medium text-[#225BA9] sm:text-2xl'>
<Display type='currency' value={totalAssets} />
</div>
</div>
@@ -132,7 +132,7 @@ export default function Content() {
{/* 套餐状态 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'>
<div className=''>
<h3 className='flex items-center justify-between text-[#666666]'>
<div className={'flex items-center justify-between'}>
<span className={'text-base font-medium sm:text-xl'}>{t('planStatus')}</span>
@@ -153,12 +153,12 @@ export default function Content() {
</div>
{userSubscribe?.length ? (
<>
<div className='mb-2 text-sm text-[#666666] sm:mb-[22px] sm:mt-1'>
<div className='mt-1 text-xs text-[#666666] sm:text-sm'>
{t('planExpirationTime')}
{formatDate(userSubscribe?.[0]?.expire_time, false)}
</div>
<div className='mb-3 sm:mb-6'>
<span className='text-2xl font-medium text-[#091B33] sm:text-3xl'>
<div className='mb-3 sm:mb-5'>
<span className='text-2xl font-medium text-[#091B33]'>
{userSubscribe?.[0]?.subscribe.name}
</span>
</div>
@@ -226,7 +226,7 @@ export default function Content() {
</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'>
<div className='mb-3 flex items-center justify-between sm:mb-4'>
<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')}
</h3>
@@ -248,7 +248,7 @@ export default function Content() {
return (
<div
key={item.id}
className={`${item.pinned ? 'bg-[#B5C9E2]' : 'bg-white'} flex items-center rounded-[20px] px-4 py-2`}
className={`${item.pinned ? 'bg-[#B5C9E2]' : 'bg-white'} flex items-center rounded-[20px] px-4 py-1.5`}
>
<p
className={`${item.pinned ? 'text-white' : 'text-[#4D4D4D]'} line-clamp-2 flex-1 text-[10px] sm:text-sm`}
@@ -285,7 +285,7 @@ export default function Content() {
{/* 我的订阅 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 sm:mb-4'>
<div className='flex items-center justify-between'>
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>
{t('mySubscription')}
</h3>