feat: 修改样式

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

@@ -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'>

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

@@ -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={
+          className={'h-full rounded-[50px] px-[55px] py-[9px] text-xl'}
-            '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'
-          }
         >
           {t('save')}
-        </Button>
+        </AiroButton>
       </div>
     </Card>
   );

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

@@ -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={
+          className={'h-full px-[55px] py-[9px] text-xl'}
-            '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'
-          }
         >
           {t('notify.save')}
-        </Button>
+        </AiroButton>
       </div>
     </Card>
   );

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

@@ -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 {

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

@@ -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

apps/user/app/layout.tsx

@@ -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} />

apps/user/components/affiliate/components/AffiliateDialog.tsx

@@ -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>

apps/user/components/main/OfferDialog/index.tsx

@@ -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 w-full justify-center px-[6px] sm:px-0'}>
-      <div className='flex flex-col flex-wrap gap-6 sm:flex-row'>
+      <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,14 +338,16 @@ 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={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
+        <div className={'ml-6 sm:ml-0'}>
-          {t('selectPlan')}
+          <div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
-        </div>
+            {t('selectPlan')}
-        <div className={'text-lg font-medium text-[#666666] md:text-center'}>
+          </div>
-          {t('selectYourPlan')}
+          <div className={'text-lg font-medium text-[#666666] md:text-center'}>
+            {t('selectYourPlan')}
+          </div>
         </div>
         <div>
           <Tabs

apps/user/components/user-nav.tsx

@@ -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>

apps/user/locales/en-US/common.json

@@ -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"
   },

apps/user/locales/en-US/components.json

@@ -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",

apps/user/locales/en-US/profile.json

@@ -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"

apps/user/locales/zh-CN/common.json

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

apps/user/locales/zh-CN/components.json

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

apps/user/locales/zh-CN/profile.json

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

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

@@ -26,14 +26,14 @@ 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='flex flex-wrap items-center justify-center gap-2'>
-      <div className='text-muted-foreground flex-1 whitespace-nowrap text-center sm:text-left'>
+      <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='ml-[34px] flex items-center justify-center gap-3'>
-        <div className='flex items-center space-x-2'>
+        {/*<div className='flex items-center space-x-2'>
-          <p className='font-medium'>{text?.textRowsPerPage || 'Rows per page'}</p>
+           <p className='font-medium'>{text?.textRowsPerPage || 'Rows per page'}</p>
           <Select
             value={`${table.getState().pagination.pageSize}`}
             onValueChange={(value) => {
@@ -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]'>
+          <SelectTrigger className='h-[30px] w-[70px] rounded-full bg-[#EAEAEA] text-[#848484]'>
-            <SelectValue placeholder='Select page number' />
+            <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()}
         >

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

@@ -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,
         })}
       >