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-13 05:20:51 -07:00
parent a918cdab68
commit 1b9e97ab3c
17 changed files with 52 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/user/app/(main)/(content)/(user)/payment/page.tsx
View File

@ -80,7 +80,7 @@ export default function Page() {
);
return (
<div className=''>
<div className='max-w-[490px]'>
<Card className='border-none shadow-none sm:border sm:shadow'>
<CardContent className='grid gap-2 p-6 text-sm'>
<div className='relative'>

11
apps/user/app/(main)/(content)/(user)/profile/change-password.tsx
View File

@ -2,6 +2,7 @@
import { updateUserPassword } from '@/services/user/user';
import { zodResolver } from '@hookform/resolvers/zod';
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 {
@ -100,16 +101,14 @@ export default function ChangePassword() {
</form>
</Form>
<div className={'mt-8 hidden justify-center sm:flex'}>
<Button
<AiroButton
type='submit'
size='sm'
variant={'default'}
form='password-form'
className={
'h-full rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] px-[55px] py-[9px] text-xl font-bold text-white transition hover:bg-[#225BA9] hover:text-white'
}
className={'h-full rounded-[50px] px-[55px] py-[9px] text-xl'}
>
{t('save')}
</Button>
</AiroButton>
</div>
</Card>
);

11
apps/user/app/(main)/(content)/(user)/profile/notify-settings.tsx
View File

@ -5,6 +5,8 @@ import { updateUserNotify } from '@/services/user/user';
import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@workspace/airo-ui/components/button';
import { Card } from '@workspace/airo-ui/components/card';
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
import {
Form,
FormControl,
@ -102,16 +104,13 @@ export default function NotifySettings() {
</form>
</Form>
<div className={'mt-8 hidden justify-center sm:flex'}>
<Button
<AiroButton
type='submit'
size='sm'
form='notify-form'
className={
'h-full rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] px-[55px] py-[9px] text-xl font-bold text-white transition hover:bg-[#225BA9] hover:text-white'
}
className={'h-full px-[55px] py-[9px] text-xl'}
>
{t('notify.save')}
</Button>
</AiroButton>
</div>
</Card>
);

4
apps/user/app/(main)/(content)/(user)/subscribe/page.tsx
View File

@ -30,10 +30,10 @@ export default function Page() {
const discountItem = item.discount?.find((v) => v.quantity === 12);
return {
...item,
origin_price: unitConversion('centsToDollars', item.unit_price * 12).toString(), // 原价
origin_price: unitConversion('centsToDollars', item.unit_price).toString(), // 原价
discount_price: unitConversion(
'centsToDollars',
item.unit_price * ((discountItem?.discount || 100) / 100) * 12,
item.unit_price * ((discountItem?.discount || 100) / 100),
).toString(), // 优惠价格
};
} else {

2
apps/user/app/(main)/(content)/(user)/ticket/page.tsx
View File

@ -158,7 +158,7 @@ export default function Page() {
}}
renderItem={(item) => {
return (
<Card className='overflow-hidden sm:pl-16'>
<Card className='overflow-hidden rounded-[32px] 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

4
apps/user/app/layout.tsx
View File

@ -8,6 +8,8 @@ import { NextIntlClientProvider } from 'next-intl';
import { getLocale, getMessages } from 'next-intl/server';
import { PublicEnvScript } from 'next-runtime-env';
import { unstable_noStore as noStore } from 'next/cache';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
// import { Geist, Geist_Mono } from 'next/font/google';
import { cookies } from 'next/headers';
import { Metadata, Viewport } from 'next/types';
@ -107,7 +109,7 @@ export default async function RootLayout({
<body
suppressHydrationWarning
// ${fontSans.variable} ${fontMono.variable}
className={`size-full min-h-[calc(100dvh-env(safe-area-inset-top))] font-sans antialiased`}
className={`size-full min-h-[calc(100dvh-env(safe-area-inset-top))] font-sans ${inter.className} antialiased`}
>
<NextIntlClientProvider messages={messages}>
<NextTopLoader showSpinner={false} />

4
apps/user/components/affiliate/components/AffiliateDialog.tsx
View File

@ -1,6 +1,7 @@
'use client';
import { Empty } from '@/components/empty';
import { ProList } from '@/components/pro-list';
import { queryUserAffiliateList } from '@/services/user/user';
import {
Dialog,
@ -8,7 +9,6 @@ import {
DialogHeader,
DialogTitle,
} from '@workspace/airo-ui/components/dialog';
import { ProList } from '@workspace/airo-ui/custom-components/pro-list/pro-list';
import { formatDate } from '@workspace/airo-ui/utils';
import { useTranslations } from 'next-intl';
import { useImperativeHandle, useState } from 'react';
@ -55,7 +55,7 @@ export const AffiliateDialog = ({ ref }: AffiliateDialogProps) => {
}}
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 className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2 text-[10px] shadow-[0_0_4.5px_0_rgba(0,0,0,0.25)] sm:text-base'>
<div>
<div className={'text-[#225BA9]'}>{t('userIdentifier')}</div>
<div className={'font-bold text-[#091B33]'}>{invite.identifier}</div>

14
apps/user/components/main/OfferDialog/index.tsx
View File

@ -179,7 +179,7 @@ const PlanCard = forwardRef<
return (
<div
ref={ref}
className='relative w-full min-w-[300px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-8 transition-all duration-300 hover:shadow-lg sm:w-[345px] sm:p-10'
className='relative w-full min-w-[300px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-8 shadow-[0_0_52.6px_1px_rgba(15,44,83,0.05)] transition-all duration-300 sm:w-[345px] sm:p-10'
>
{/* 套餐名称 */}
<h3 className='mb-4 text-left text-xl font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
@ -237,8 +237,8 @@ export const PlanList = ({
if (plans.length === 0) return <EmptyState message={emptyMessage} />;
return (
<div className={'flex justify-center'}>
<div className='flex flex-col flex-wrap gap-6 sm:flex-row'>
<div className={'flex w-full justify-center px-[6px] sm:px-0'}>
<div className='flex w-full flex-col flex-wrap gap-6 sm:w-auto md:flex-row'>
{plans.map((plan, index) => (
<PlanCard
key={`${plan.id}-${plan.name}`}
@ -308,10 +308,10 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
const discountItem = item.discount?.find((v) => v.quantity === 12);
return {
...item,
origin_price: unitConversion('centsToDollars', item.unit_price * 12).toString(), // 原价
origin_price: unitConversion('centsToDollars', item.unit_price).toString(), // 原价
discount_price: unitConversion(
'centsToDollars',
item.unit_price * ((discountItem?.discount || 100) / 100) * 12,
item.unit_price * ((discountItem?.discount || 100) / 100),
).toString(), // 优惠价格
};
} else {
@ -338,15 +338,17 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent
ref={dialogRef}
className='rounded-0 h-full gap-0 px-8 py-8 sm:max-h-[95%] sm:!rounded-[32px] sm:px-8 sm:py-12 md:max-w-full'
className='rounded-0 h-full gap-0 px-4 py-8 sm:max-h-[95%] sm:!rounded-[32px] sm:px-8 sm:py-12 md:max-w-full'
>
<DialogTitle className={'sr-only'}></DialogTitle>
<div className={'ml-6 sm:ml-0'}>
<div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
{t('selectPlan')}
</div>
<div className={'text-lg font-medium text-[#666666] md:text-center'}>
{t('selectYourPlan')}
</div>
</div>
<div>
<Tabs
defaultValue='year'

2
apps/user/components/user-nav.tsx
View File

@ -114,7 +114,7 @@ export function UserNav({ from = '' }: { from?: string }) {
Logout();
setUser();
}}
className='flex cursor-pointer items-center gap-3 rounded-full bg-[#E22C2E] px-5 py-2 text-base font-medium text-white focus:bg-[#E22C2E] focus:text-white md:bg-white md:text-sm md:text-[#0F2C53]'
className='flex cursor-pointer items-center gap-3 rounded-full bg-[#E22C2E] px-5 py-2.5 text-base font-medium text-white focus:bg-[#E22C2E] focus:text-white md:bg-white md:text-sm md:text-[#0F2C53]'
>
<SvgIcon className='!size-4 flex-none' width='99' height='100' name={'exit'} />
<span className='flex-grow'>{t('logout')}</span>

2
apps/user/locales/en-US/common.json
View File

@ -12,7 +12,7 @@
"This empty space is waiting for its protagonist to take the stage!"
],
"list": {
"pageInfo": "Page {current} of {total}",
"pageInfo": "Page {current} / {total}",
"rowsPerPage": "Rows per page",
"selectedItems": "{total} items selected"
},

2
apps/user/locales/en-US/components.json
View File

@ -21,7 +21,7 @@
"loading": "Loading...",
"loadFailed": "Failed to load, please try again",
"reload": "Reload",
"perYear": "/year",
"perYear": "/Month",
"yearlyDiscount": "Enjoy a 20% discount on annual payment",
"subscribe": "Subscribe",
"availableNodes": "Available Nodes",

2
apps/user/locales/en-US/profile.json
View File

@ -16,7 +16,7 @@
"login": "Login",
"notificationSettings": "Notification Settings",
"notificationTypes": "Notification Types",
"save": "Save Changes",
"save": "Save",
"subscribe": "Subscribe",
"updateSuccess": "Update Successful",
"description": "Enable or disable email notifications"

2
apps/user/locales/zh-CN/common.json
View File

@ -12,7 +12,7 @@
"这片空地在等它的主角登场！"
],
"list": {
"pageInfo": "第 {current} 页，共 {total} 页",
"pageInfo": "第 {current} / {total} 页",
"rowsPerPage": "每页行数",
"selectedItems": "已选择 {total} 行"
},

2
apps/user/locales/zh-CN/components.json
View File

@ -21,7 +21,7 @@
"loading": "加载中...",
"loadFailed": "加载失败，请重试",
"reload": "重新加载",
"perYear": "/年",
"perYear": "/月",
"yearlyDiscount": "年付享受8折优惠",
"subscribe": "订阅",
"availableNodes": "可用节点",

2
apps/user/locales/zh-CN/profile.json
View File

@ -16,7 +16,7 @@
"login": "登录",
"notificationSettings": "通知设置",
"notificationTypes": "通知类型",
"save": "保存更改",
"save": "保存",
"subscribe": "订阅",
"updateSuccess": "更新成功",
"description": "是否邮箱通知推送"

20
packages/airo-ui/src/custom-components/pro-list/pagination.tsx
View File

@ -26,13 +26,13 @@ interface PaginationProps<TData> {
export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
return (
<div className='flex flex-wrap items-center justify-between gap-2'>
<div className='text-muted-foreground flex-1 whitespace-nowrap text-center sm:text-left'>
<div className='flex flex-wrap items-center justify-center gap-2'>
<div className='whitespace-nowrap text-center text-[15px] text-[#666]'>
{text?.textPageOf?.(table.getState().pagination.pageIndex + 1, table.getPageCount()) ||
`Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`}
</div>
<div className='flex flex-grow items-center justify-center gap-2 sm:justify-end'>
<div className='flex items-center space-x-2'>
<div className='ml-[34px] flex items-center justify-center gap-3'>
{/*<div className='flex items-center space-x-2'>
<p className='font-medium'>{text?.textRowsPerPage || 'Rows per page'}</p>
<Select
value={`${table.getState().pagination.pageSize}`}
@ -51,11 +51,11 @@ export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
))}
</SelectContent>
</Select>
</div>
</div>*/}
<Button
variant='outline'
size='icon'
className='hidden lg:flex'
className='h-[30px] w-[30px] rounded-full bg-[#EAEAEA] text-[#848484]'
onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()}
>
@ -64,6 +64,7 @@ export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
</Button>
<Button
variant='outline'
className='h-[30px] w-[30px] rounded-full bg-[#EAEAEA] text-[#848484]'
size='icon'
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
@ -75,8 +76,8 @@ export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
value={`${table.getState().pagination.pageIndex + 1}`}
onValueChange={(value) => table.setPageIndex(Number(value) - 1)}
>
<SelectTrigger className='w-[70px]'>
<SelectValue placeholder='Select page number' />
<SelectTrigger className='h-[30px] w-[70px] rounded-full bg-[#EAEAEA] text-[#848484]'>
<SelectValue placeholder='Select page number' className={''} />
</SelectTrigger>
<SelectContent className='w-12'>
{Array.from({ length: table.getPageCount() }, (_, i) => (
@ -88,6 +89,7 @@ export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
</Select>
<Button
variant='outline'
className='h-[30px] w-[30px] rounded-full bg-[#EAEAEA] text-[#848484]'
size='icon'
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
@ -98,7 +100,7 @@ export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
<Button
variant='outline'
size='icon'
className='hidden lg:flex'
className='h-[30px] w-[30px] rounded-full bg-[#EAEAEA] text-[#848484]'
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>

2
packages/airo-ui/src/custom-components/pro-list/pro-list.tsx
View File

@ -171,7 +171,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
)}
<div
className={cn('relative overflow-x-auto', {
className={cn('relative', {
'rounded-xl border': data.length === 0,
})}
>