feat: 修改样式

apps/user/app/(main)/(content)/(user)/dashboard/content.tsx

@@ -5,6 +5,7 @@ import Recharge from '@/components/subscribe/recharge';
 import Renewal from '@/components/subscribe/renewal';
 import ResetTraffic from '@/components/subscribe/reset-traffic';
 import useGlobalStore from '@/config/use-global';
+import { getStat } from '@/services/common/common';
 import { queryUserSubscribe, resetUserSubscribeToken } from '@/services/user/user';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/airo-ui/components/button';
@@ -136,11 +137,9 @@ 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='mb-1 sm:mb-4'>
-            {userSubscribe?.[0]?.status === 1 ? (
+            <h3 className='text-base font-medium text-[#666666] sm:text-xl'>
-              <h3 className='text-base font-medium text-[#666666] sm:text-xl'>
+              {t('accountOverview')}
-                {t('accountOverview')}
+            </h3>
-              </h3>
-            ) : null}
             <p className='mt-1 text-xs text-[#666666] sm:text-sm'>
               {user?.auth_methods?.[0]?.auth_identifier}
             </p>
@@ -148,7 +147,7 @@ export default function Content() {
 
           <div className='mb-3 sm:mb-6'>
             <span className='text-2xl font-medium text-[#091B33] sm:text-3xl'>
-              {t('annualPlanUser')}
+              {userSubscribe?.length > 0 ? <div>1</div> : t('noYPlan')}
             </span>
           </div>
 
@@ -173,9 +172,11 @@ export default function Content() {
             <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>
-                <span className={'ml-2.5 rounded-full bg-[#A8D4ED] px-2 text-[8px] text-white'}>
+                {userSubscribe?.length > 0 && userSubscribe?.[0]?.status === 1 ? (
-                  {t('inEffect')}
+                  <span className={'ml-2.5 rounded-full bg-[#A8D4ED] px-2 text-[8px] text-white'}>
-                </span>
+                    {t('inEffect')}
+                  </span>
+                ) : null}
               </div>
               <ResetTraffic
                 className={
@@ -185,73 +186,79 @@ export default function Content() {
                 replacement={userSubscribe?.[0]?.subscribe.replacement}
               />
             </h3>
-            <div className='mb-2 text-sm text-[#666666] sm:mb-[22px] sm:mt-1'>
-              {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'>
-                {userSubscribe?.[0]?.subscribe.name}
-              </span>
-            </div>
           </div>
-
+          {userSubscribe?.length ? (
-          <div className='mb-4 flex items-center justify-between'>
+            <>
-            <div className='flex items-center gap-2'>
+              <div className='mb-2 text-sm text-[#666666] sm:mb-[22px] sm:mt-1'>
-              <span className='text-xs sm:text-sm'>{t('availableDevices')}</span>
+                {t('planExpirationTime')}
-              <div className='flex gap-2'>
+                {formatDate(userSubscribe?.[0]?.expire_time, false)}
-                {Array.from({ length: userSubscribe?.[0]?.subscribe.device_limit }).map(
-                  (_, index) => {
-                    return (
-                      <div
-                        className={`h-4 w-4 rounded-full ${index < (userSubscribe?.[0]?.subscribe.device_limit || 0) > 1 ? 'bg-[#225BA9]' : 'bg-[#D9D9D9]'}`}
-                      ></div>
-                    );
-                  },
-                )}
               </div>
-            </div>
+              <div className='mb-3 sm:mb-6'>
-            <span className='text-xs sm:text-sm'>
+                <span className='text-2xl font-medium text-[#091B33] sm:text-3xl'>
-              {t('online')}
+                  {userSubscribe?.[0]?.subscribe.name}
-              {userSubscribe?.[0]?.subscribe.device_limit}
+                </span>
-            </span>
+              </div>
-          </div>
+              <div className='mb-4 flex items-center justify-between'>
-          <div>
+                <div className='flex items-center gap-2'>
-            <div className='mb-1 flex items-center justify-between'>
+                  <span className='text-xs sm:text-sm'>{t('availableDevices')}</span>
-              <span className='text-xs sm:text-sm'>
+                  <div className='flex gap-2'>
-                {t('usedTrafficTotalTraffic')}
+                    {Array.from({ length: userSubscribe?.[0]?.subscribe.device_limit }).map(
-                <Display
+                      (_, index) => {
-                  type='traffic'
+                        return (
-                  value={userSubscribe?.[0]?.upload + userSubscribe?.[0]?.download}
+                          <div
-                  unlimited={!userSubscribe?.[0]?.traffic}
+                            key={index}
-                />
+                            className={`h-4 w-4 rounded-full ${index < (userSubscribe?.[0]?.subscribe.device_limit || 0) > 1 ? 'bg-[#225BA9]' : 'bg-[#D9D9D9]'}`}
-                /{' '}
+                          ></div>
-                <Display
+                        );
-                  type='traffic'
+                      },
-                  value={userSubscribe?.[0]?.traffic}
+                    )}
-                  unlimited={!userSubscribe?.[0]?.traffic}
+                  </div>
-                />
+                </div>
-              </span>
+                <span className='text-xs sm:text-sm'>
-              <span className='text-xs sm:text-sm'>
+                  {t('online')}
-                {t('remaining')}
+                  {userSubscribe?.[0]?.subscribe.device_limit}
-                {100 -
+                </span>
-                  Math.round(
+              </div>
-                    (((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) /
+              <div>
-                      (userSubscribe?.[0]?.traffic || 1)) *
+                <div className='mb-1 flex items-center justify-between'>
-                      100,
+                  <span className='text-xs sm:text-sm'>
-                  )}
+                    {t('usedTrafficTotalTraffic')}
-                %
+                    <Display
-              </span>
+                      type='traffic'
-            </div>
+                      value={userSubscribe?.[0]?.upload + userSubscribe?.[0]?.download}
-            <div className='flex h-5 w-full items-center rounded-[20px] bg-[#EAEAEA] p-0.5'>
+                      unlimited={!userSubscribe?.[0]?.traffic}
-              <div
+                    />
-                className={'h-full rounded-[20px] bg-[#225BA9]'}
+                    /{' '}
-                style={{
+                    <Display
-                  width: `${Math.round((((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) / (userSubscribe?.[0]?.traffic || 1)) * 100)}%`,
+                      type='traffic'
-                }}
+                      value={userSubscribe?.[0]?.traffic}
-              ></div>
+                      unlimited={!userSubscribe?.[0]?.traffic}
-            </div>
+                    />
-          </div>
+                  </span>
+                  <span className='text-xs sm:text-sm'>
+                    {t('remaining')}
+                    {100 -
+                      Math.round(
+                        (((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) /
+                          (userSubscribe?.[0]?.traffic || 1)) *
+                          100,
+                      )}
+                    %
+                  </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: `${Math.round((((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) / (userSubscribe?.[0]?.traffic || 1)) * 100)}%`,
+                    }}
+                  ></div>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div>{t('noPlanAvailable')}</div>
+          )}
         </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'>
@@ -339,7 +346,7 @@ export default function Content() {
                       {t('nextResetDays')}
                     </p>
                     <p className='text-xs font-medium text-[#0F2C53] sm:text-lg'>
-                      {userSubscribe?.[0]
+                      {userSubscribe?.[0].reset_time
                         ? differenceInDays(new Date(userSubscribe?.[0].reset_time), new Date())
                         : t('noReset')}
                     </p>

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

@@ -19,7 +19,7 @@ export default function Page() {
   const ref = useRef<ProListActions>(null);
   const OrderDetailDialogRef = useRef<typeof OrderDetailDialog>(null);
 
-  const handlePayment = (orderNo) => {
+  const handlePayment = async (orderNo) => {
     const data = await purchaseCheckout({
       orderNo: orderNo,
       returnUrl: window.location.href,

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

@@ -3,7 +3,8 @@
   "accountOverview": "Account Overview",
   "address1": "Address 1",
   "announcementTitle": "Site Announcements",
-  "annualPlanUser": "Annual Plan User",
+  "annualMonthPlanUser": "Monthly Plan User",
+  "annualYearPlanUser": "Annual Plan User",
   "availableDevices": "Available Devices",
   "beginnerTutorial": "Beginner Tutorial",
   "cancel": "Cancel",
@@ -28,7 +29,9 @@
   "mySubscriptions": "My Subscriptions",
   "nextResetDays": "Next Reset in Days",
   "noLimit": "No Limit",
+  "noPlanAvailable": "No Plan Available",
   "noReset": "No Reset",
+  "noYPlan": "No Plan Active",
   "online": "Online: ",
   "pageOf": "Page {pageIndex} of {pageCount}",
   "pinnedAnnouncement": "[Pinned]",

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

@@ -3,7 +3,8 @@
   "accountOverview": "账户概况",
   "address1": "地址1",
   "announcementTitle": "网站公告",
-  "annualPlanUser": "年度套餐用户",
+  "annualMonthPlanUser": "月度套餐用户",
+  "annualYearPlanUser": "年度套餐用户",
   "availableDevices": "可用设备",
   "beginnerTutorial": "新手教程",
   "cancel": "取消",
@@ -28,7 +29,9 @@
   "mySubscriptions": "我的订阅",
   "nextResetDays": "下次重置/天",
   "noLimit": "无限制",
+  "noPlanAvailable": "暂无套餐",
   "noReset": "不重置",
+  "noYPlan": "尚未有套餐生效",
   "online": "在线：",
   "pageOf": "第 {pageIndex} 页，共 {pageCount} 页",
   "pinnedAnnouncement": "【置顶公告】",