feat: 收益计算器

apps/user/components/affiliate/index.tsx

@@ -12,6 +12,7 @@ import { queryUserAffiliate, queryUserAffiliateList } from '@/services/user/user
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import { Card, CardContent } from '@workspace/ui/components/card';
+import { Input } from '@workspace/ui/components/input';
 import { formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
 import { useRef, useState } from 'react';
@@ -108,7 +109,7 @@ export default function Affiliate() {
           </div>
         </CardContent>
       </Card>
-      <Card className='rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6'>
+      <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>
           <span
@@ -149,6 +150,156 @@ export default function Affiliate() {
           )}
         </div>
       </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>
+        </div>
+        <div className={'mb-4 text-[10px] font-light text-[#0F2C53] sm:text-base'}>
+          在下方填入对应邀请用户数量，即可计算不同比例返佣金额 *该表以Pro
+          Plan计算，其它套餐比例不变，以实际金额计算为准
+        </div>
+
+        {(() => {
+          // 假设以 Pro 计划计算：$60/月，$576/年
+          const MONTHLY_PRICE = 60;
+          const YEARLY_PRICE = 576;
+
+          const [count, setCount] = useState<number>(10);
+          const clamp = (n: number) => Math.max(0, Math.min(10000, Math.floor(n)));
+
+          const firstMonth = count * MONTHLY_PRICE * 0.5; // 50%
+          const firstYear = count * YEARLY_PRICE * 0.3; // 30%
+          const recurMonth = count * MONTHLY_PRICE * 0.2; // 20%
+          const recurYear = count * YEARLY_PRICE * 0.2; // 20%
+
+          return (
+            <div className='space-y-4'>
+              {/* 计算面板容器 */}
+              <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)]'>
+                {/* 左：行表头（月付套餐 / 年付套餐） */}
+                <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'>
+                    月付套餐
+                  </div>
+                  <div className='flex h-[81px] items-center justify-center border-b-[3px] border-white'>
+                    年付套餐
+                  </div>
+                </div>
+
+                {/* 中：首充用户（双层圆角 + 三行） */}
+                <div className='relative'>
+                  <div
+                    className={
+                      'absolute left-1 top-6 z-10 h-[90%] w-full rounded-[14px] bg-[#225BA9] sm:left-2.5 sm:top-8'
+                    }
+                  ></div>
+                  <div className={'absolute bottom-0 z-0 h-[3px] w-full bg-white'}></div>
+                  <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'>
+                          首充用户
+                        </div>
+                      </div>
+
+                      <div className={'bg-[#A8D4ED] px-1 sm:px-4'}>
+                        <div className='grid h-[81px] grid-cols-1 grid-rows-2 border-b-[3px] border-white'>
+                          <div className='flex h-full items-center justify-center border-b-[1px] border-white font-semibold'>
+                            50%
+                          </div>
+                          <div className='flex h-full flex-1 items-center justify-center text-[10px] text-[#225BA9] sm:text-[15px]'>
+                            up to{' '}
+                            <span className='font-semibold'>
+                              <Display type='currency' value={firstMonth} />
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div className={'bg-[#A8D4ED]'}>
+                        <div className='grid h-[81px] grid-cols-1 grid-rows-2 bg-[#A8D4ED]'>
+                          <div className='flex h-full items-center justify-center border-b-[1px] border-white font-semibold'>
+                            30%
+                          </div>
+                          <div className='flex h-full items-center justify-center text-[10px] text-[#225BA9] sm:text-[15px]'>
+                            up to{' '}
+                            <span className='font-semibold'>
+                              <Display type='currency' value={firstYear} />
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  {/* 蓝色投影块 */}
+                  <div className='pointer-events-none absolute inset-0 -z-10 translate-x-2 translate-y-2 rounded-[20px] bg-[#225BA9]' />
+                </div>
+
+                {/* 右：再次充值用户（灰卡 + 三行） */}
+                <div className='text-center text-[#0F2C53]'>
+                  <div className='flex h-[56px] items-center justify-center border-b-[3px] border-white pt-3 font-bold'>
+                    再次充值用户
+                  </div>
+
+                  <div className='grid h-[81px] grid-cols-1 grid-rows-2 items-center justify-center border-b-[3px] border-white'>
+                    <div className='flex h-full items-center justify-center border-b-[1px] border-white font-semibold'>
+                      20%
+                    </div>
+                    <div className='flex h-full w-full items-center justify-center text-[10px] text-[#225BA9] sm:text-[15px]'>
+                      up to{' '}
+                      <span className='font-semibold'>
+                        <Display type='currency' value={recurMonth} />
+                      </span>{' '}
+                      / 月
+                    </div>
+                  </div>
+
+                  <div className='grid h-[81px] grid-cols-1 grid-rows-2 border-b-[3px] border-white'>
+                    <div className='flex h-full items-center justify-center border-b-[1px] border-white font-semibold'>
+                      20%
+                    </div>
+                    <div className='flex h-full items-center justify-center text-[10px] text-[#225BA9] sm:text-[15px]'>
+                      up to{' '}
+                      <span className='font-semibold'>
+                        <Display type='currency' value={recurYear} />
+                      </span>{' '}
+                      / 年
+                    </div>
+                  </div>
+                </div>
+              </div>
+              {/* 用户数调节 */}
+              <div className='flex items-center justify-center gap-4'>
+                <Button
+                  variant='secondary'
+                  size='icon'
+                  className='h-6 w-9 rounded-full bg-[#0F2C53] font-bold text-white hover:bg-[#225BA9] sm:h-9'
+                  onClick={() => setCount((v) => clamp(v - 1))}
+                >
+                  –
+                </Button>
+                <div className='inline-flex items-center gap-1 rounded-full bg-[#D9D9D9] px-3 font-medium text-[#0F2C53] shadow-[inset_0px_0px_4px_0px_rgba(0,0,0,0.25)]'>
+                  <Input
+                    value={count}
+                    onChange={(e) => setCount(clamp(Number(e.target.value) || 0))}
+                    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>
+                </div>
+                <Button
+                  variant='secondary'
+                  size='icon'
+                  className='h-6 w-9 rounded-full bg-[#0F2C53] font-bold text-white hover:bg-[#225BA9] sm:h-9'
+                  onClick={() => setCount((v) => clamp(v + 1))}
+                >
+                  +
+                </Button>
+              </div>
+            </div>
+          );
+        })()}
+      </Card>
       <AffiliateDialog ref={dialogRef} />
     </div>
   );

packages/airo-ui/src/components/sidebar.tsx

@@ -288,7 +288,7 @@ const SidebarTrigger = React.forwardRef<
       }}
       {...props}
     >
-      <Image src={'list.png'} width={61} height={61} unoptimized />
+      <Image src={'list.png'} width={61} alt={'list'} height={61} unoptimized />
       <span className='sr-only'>Toggle Sidebar</span>
     </Button>
   );