feat: 国际化处理

2025-08-10 03:07:37 -07:00
parent 0d3b63c2fc
commit 01ac12c171
33 changed files with 268 additions and 123 deletions
@@ -57,11 +57,11 @@ export const AffiliateDialog = ({ ref }: AffiliateDialogProps) => {
              return (
                <div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2 text-[10px] sm:text-base'>
                  <div>
-                    <div className={'text-[#225BA9]'}>用户识别代码</div>
+                    <div className={'text-[#225BA9]'}>{t('userIdentifier')}</div>
                    <div className={'font-bold text-[#091B33]'}>{invite.identifier}</div>
                  </div>
                  <div>
-                    <div className={'text-[#225BA9]'}>时间</div>
+                    <div className={'text-[#225BA9]'}>{t('time')}</div>
                    <div className={'font-bold text-[#091B33]'}>
                      {formatDate(invite.registered_at)}
                    </div>
@@ -52,23 +52,23 @@ export default function Affiliate() {
        <CardContent className={'p-0 text-[#666]'}>
          <div className={'sm:mb-6'}>
            <div className={'font-bold sm:text-xl'}>{t('totalCommission')}</div>
-            <div className={'text-xs font-light sm:text-[15px]'}>
-              佣金金额，邀请成功后自动转入钱包余额
-            </div>
+            <div className={'text-xs font-light sm:text-[15px]'}>{t('commissionInfo')}</div>
          </div>
          <div className={'mb-3 text-xl font-bold text-[#091B33] sm:text-[32px]'}>
-            历史推荐用户：7
+            {t('historicalRecommendedUsers')}
          </div>
          <div className={'grid grid-cols-2 gap-[10px] sm:grid-cols-1 sm:gap-5 lg:grid-cols-2'}>
            <div className='rounded-[20px] bg-[#EAEAEA] px-4 py-2 shadow-sm transition-all duration-300 hover:shadow-md sm:py-4'>
-              <p className='font-medium text-[#666] opacity-80 sm:mb-3 sm:text-sm'>佣金总额</p>
+              <p className='font-medium text-[#666] opacity-80 sm:mb-3 sm:text-sm'>
+                {t('totalCommission')}
+              </p>
              <p className='text-xl font-bold text-[#225BA9] sm:text-2xl'>
                <Display type='currency' value={data?.total_commission} />
              </p>
            </div>
            <div className='rounded-[20px] border-2 border-[#D9D9D9] px-4 py-2 shadow-sm transition-all duration-300 hover:shadow-md sm:py-4'>
              <p className='flex justify-between font-medium text-[#666] opacity-80 sm:mb-3 sm:text-sm'>
-                返佣邀请码
+                {t('commissionInviteCode')}
                <CopyToClipboard
                  text={`${location?.origin}/?invite=${user?.refer_code}`}
                  onCopy={(text, result) => {
@@ -111,12 +111,12 @@ export default function Affiliate() {
      </Card>
      <Card className='order-2 rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6 md:order-none'>
        <div className='mb-4 flex items-center justify-between'>
-          <h3 className='font-medium text-[#666666] sm:text-xl'>邀请记录</h3>
+          <h3 className='font-medium text-[#666666] sm:text-xl'>{t('inviteRecords')}</h3>
          <span
            className='cursor-pointer text-sm text-[#225BA9]'
-            onClick={() => dialogRef.current.open()}
+            onClick={() => dialogRef.current?.open()}
          >
-            更多
+            {t('more')}
          </span>
        </div>

@@ -132,11 +132,11 @@ export default function Affiliate() {
                return (
                  <div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2 text-[10px] sm:text-base'>
                    <div>
-                      <div className={'text-[#225BA9]'}>用户识别代码</div>
+                      <div className={'text-[#225BA9]'}>{t('userIdentifier')}</div>
                      <div className={'font-bold text-[#091B33]'}>{invite.identifier}</div>
                    </div>
                    <div>
-                      <div className={'text-[#225BA9]'}>时间</div>
+                      <div className={'text-[#225BA9]'}>{t('time')}</div>
                      <div className={'font-bold text-[#091B33]'}>
                        {formatDate(invite.registered_at)}
                      </div>
@@ -152,15 +152,16 @@ export default function Affiliate() {
      </Card>
      <Card className='min-w-[322px] rounded-[20px] border border-[#EAEAEA] bg-[#EAEAEA] p-6 text-[12px] sm:text-[16px] md:min-w-[496px]'>
        <div className='flex items-center justify-between'>
-          <h3 className='text-[15px] font-medium text-[#0F2C53] sm:text-xl'>佣金计算</h3>
+          <h3 className='text-[15px] font-medium text-[#0F2C53] sm:text-xl'>
+            {t('commissionCalculation')}
+          </h3>
        </div>
        <div className={'mb-4 text-[10px] font-light text-[#0F2C53] sm:text-base'}>
-          在下方填入对应邀请用户数量，即可计算不同比例返佣金额 *该表以Pro
-          Plan计算，其它套餐比例不变，以实际金额计算为准
+          {t('commissionCalculationInfo')}
        </div>

        {(() => {
-          // 假设以 Pro 计划计算：$60/月，$576/年
+          // Pro plan: $60/month, $576/year
          const MONTHLY_PRICE = 60;
          const YEARLY_PRICE = 576;

@@ -174,20 +175,20 @@ export default function Affiliate() {

          return (
            <div className='space-y-4'>
-              {/* 计算面板容器 */}
+              {/* Calculator panel container */}
              <div className='grid grid-cols-[1.5fr_2.5fr_3fr] items-stretch rounded-[34px] bg-white/10 px-5 pb-6 shadow-[inset_0_0_15.7px_0_rgba(0,0,0,0.25)]'>
-                {/* 左：行表头（月付套餐 / 年付套餐） */}
+                {/* Left: row headers (Monthly Plan / Yearly Plan) */}
                <div className='flex flex-col justify-stretch font-semibold text-[#0F2C53]'>
                  <div className='flex h-[56px] items-center justify-center border-b-[3px] border-white'></div>
                  <div className='flex h-[81px] items-center justify-center border-b-[3px] border-white'>
-                    月付套餐
+                    {t('monthlyPackage')}
                  </div>
                  <div className='flex h-[81px] items-center justify-center border-b-[3px] border-white'>
-                    年付套餐
+                    {t('annualPackage')}
                  </div>
                </div>

-                {/* 中：首充用户（双层圆角 + 三行） */}
+                {/* Middle: First-time top-up users (double rounded corners + three rows) */}
                <div className='relative'>
                  <div
                    className={
@@ -195,11 +196,11 @@ export default function Affiliate() {
                    }
                  ></div>
                  <div className={'absolute bottom-0 z-0 h-[3px] w-full bg-white'}></div>
-                  <div className='absolute z-20 w-full'>
+                  <div className={'absolute z-20 w-full'}>
                    <div className='overflow-hidden rounded-[14px] text-center text-[#0F2C53]'>
                      <div className={'rounded-t-[14px] bg-[#A8D4ED] px-1 sm:px-4'}>
                        <div className='mt-3 flex h-[44px] items-center justify-center border-b-[3px] border-white font-bold'>
-                          首充用户
+                          {t('firstTimeTopUpUser')}
                        </div>
                      </div>

@@ -231,14 +232,14 @@ export default function Affiliate() {
                      </div>
                    </div>
                  </div>
-                  {/* 蓝色投影块 */}
+                  {/* Blue shadow block */}
                  <div className='pointer-events-none absolute inset-0 -z-10 translate-x-2 translate-y-2 rounded-[20px] bg-[#225BA9]' />
                </div>

-                {/* 右：再次充值用户（灰卡 + 三行） */}
+                {/* Right: Repeat top-up users (gray card + three rows) */}
                <div className='text-center text-[#0F2C53]'>
                  <div className='flex h-[56px] items-center justify-center border-b-[3px] border-white pt-3 font-bold'>
-                    再次充值用户
+                    {t('repeatTopUpUser')}
                  </div>

                  <div className='grid h-[81px] grid-cols-1 grid-rows-2 items-center justify-center border-b-[3px] border-white'>
@@ -250,7 +251,7 @@ export default function Affiliate() {
                      <span className='font-semibold'>
                        <Display type='currency' value={recurMonth} />
                      </span>{' '}
-                      / 月
+                      {t('perMonth')}
                    </div>
                  </div>

@@ -263,12 +264,12 @@ export default function Affiliate() {
                      <span className='font-semibold'>
                        <Display type='currency' value={recurYear} />
                      </span>{' '}
-                      / 年
+                      {t('perYear')}
                    </div>
                  </div>
                </div>
              </div>
-              {/* 用户数调节 */}
+              {/* User count adjustment */}
              <div className='flex items-center justify-center gap-4'>
                <Button
                  variant='secondary'
@@ -285,7 +286,7 @@ export default function Affiliate() {
                    className='h-6 border-0 p-0 text-center text-sm focus-visible:ring-0 sm:h-8'
                    style={{ width: `${Math.max(3, String(count).length + 1)}ch` }}
                  />
-                  <span className='text-sm'>Users</span>
+                  <span className='text-sm'>{t('users')}</span>
                </div>
                <Button
                  variant='secondary'
@@ -31,7 +31,7 @@ interface PurchaseProps {
 }

 interface PurchaseDialogRef {
-  show: (subscribe: API.Subscribe) => void;
+  show: (subscribe: API.Subscribe, tabValue: string) => void;
  hide: () => void;
 }

@@ -123,7 +123,7 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
        </DialogHeader>
        <div>
          <div className='pl-4 text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:pl-0 sm:text-center sm:text-4xl'>
-            购买套餐
+            {t('purchaseTitle')}
          </div>
          <div>
            <Tabs
@@ -142,7 +142,7 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
              <TabsList className='relative mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5'>
                {tabValue === 'year' ? (
                  <span className='absolute -top-8 left-16 z-10 rounded-md bg-[#E22C2E] px-2 py-0.5 text-[10px] font-bold leading-none text-white shadow sm:text-xs'>
-                    -20%
+                    {t('discount20')}
                    {/* 小三角箭头 */}
                    {/* <span className="
                  absolute right-0 top-full
@@ -160,13 +160,13 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
                  className='rounded-full px-10 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
                  value='year'
                >
-                  年付套餐
+                  {t('yearlyPlan')}
                </TabsTrigger>
                <TabsTrigger
                  className='rounded-full px-10 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
                  value='month'
                >
-                  月付套餐
+                  {t('monthlyPlan')}
                </TabsTrigger>
              </TabsList>
            </Tabs>
@@ -188,8 +188,8 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
            />
            <Separator className='mb-3 mt-4 bg-[#225BA9]' />
            <div className='flex items-center justify-between text-[15px] text-[#225BA9]'>
-              <div>支付方式</div>
-              <div className='font-light text-[#666]'>钱包余额</div>
+              <div>{t('paymentMethod')}</div>
+              <div className='font-light text-[#666]'>{t('walletBalance')}</div>
            </div>
          </div>
          <div className='mt-8 flex items-center justify-center'>
@@ -36,7 +36,7 @@ export default function Recharge(props: Readonly<ButtonProps>) {
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
-        <Button {...props}>钱包充值</Button>
+        <Button {...props}>{t('walletRecharge')}</Button>
      </DialogTrigger>
      <DialogContent className='flex h-full flex-col overflow-hidden md:h-auto'>
        <DialogHeader>
@@ -103,7 +103,7 @@ export default function Renewal({ id, subscribe, className }: Readonly<RenewalPr
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button size='sm' className={className}>
-          续订套餐
+          {t('renewPlan')}
        </Button>
      </DialogTrigger>
      <DialogContent className='flex h-full max-w-screen-lg flex-col overflow-hidden md:h-auto'>