diff --git a/apps/user/components/affiliate/index.tsx b/apps/user/components/affiliate/index.tsx index 571f145..db8d2d7 100644 --- a/apps/user/components/affiliate/index.tsx +++ b/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() { - +

邀请记录

+ +
+

佣金计算

+
+
+ 在下方填入对应邀请用户数量，即可计算不同比例返佣金额 *该表以Pro + Plan计算，其它套餐比例不变，以实际金额计算为准 +
+ + {(() => { + // 假设以 Pro 计划计算：$60/月，$576/年 + const MONTHLY_PRICE = 60; + const YEARLY_PRICE = 576; + + const [count, setCount] = useState(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 ( +
+ {/* 计算面板容器 */} +
+ {/* 左：行表头（月付套餐 / 年付套餐） */} +
+
+
+ 月付套餐 +
+
+ 年付套餐 +
+
+ + {/* 中：首充用户（双层圆角 + 三行） */} +
+
+
+
+
+
+
+ 首充用户 +
+
+ +
+
+
+ 50% +
+
+ up to{' '} + + + +
+
+
+
+
+
+ 30% +
+
+ up to{' '} + + + +
+
+
+
+
+ {/* 蓝色投影块 */} +
+
+ + {/* 右：再次充值用户（灰卡 + 三行） */} +
+
+ 再次充值用户 +
+ +
+
+ 20% +
+
+ up to{' '} + + + {' '} + / 月 +
+
+ +
+
+ 20% +
+
+ up to{' '} + + + {' '} + / 年 +
+
+
+
+ {/* 用户数调节 */} +
+ +
+ 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` }} + /> + Users +
+ +
+
+ ); + })()} +
); diff --git a/packages/airo-ui/src/components/sidebar.tsx b/packages/airo-ui/src/components/sidebar.tsx index 6c68da7..eb9fdcb 100644 --- a/packages/airo-ui/src/components/sidebar.tsx +++ b/packages/airo-ui/src/components/sidebar.tsx @@ -288,7 +288,7 @@ const SidebarTrigger = React.forwardRef< }} {...props} > - + {'list'} Toggle Sidebar );