S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成代码编写

Browse Source
This commit is contained in:
speakeloudest
2025-08-08 03:03:59 -07:00
parent 19fe24660e
commit aead2ff68f
26 changed files with 793 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user/components/main/OfferDialog/index.tsx
+31 -11
View File
@@ -52,11 +52,11 @@ const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => (
<div className='mb-2 sm:mb-4'>
<div className='mb-1 flex items-baseline gap-2'>
{plan.origin_price && (
<span className='text-lg font-bold leading-[1.125em] text-[#666666] line-through sm:text-xl md:text-[24px]'>
<span className='text-2xl font-bold leading-[1.125em] text-[#666666] line-through'>
${plan.origin_price}
</span>
)}
<span className='text-lg font-bold leading-[1.125em] text-[#091B33] sm:text-xl md:text-[24px]'>
<span className='text-2xl font-bold leading-[1.125em] text-[#091B33]'>
${plan.discount_price}
</span>
<span className='text-sm font-normal leading-[1.8em] text-[#4D4D4D] sm:text-[15px]'>/年</span>
@@ -68,8 +68,10 @@ const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => (
);
import { useLoginDialog } from '@/app/auth/LoginDialogContext';
import { Display } from '@/components/display';
import Purchase from '@/components/subscribe/purchase';
import useGlobalStore from '@/config/use-global';
import { useTranslations } from 'next-intl';
// 订阅按钮组件
const SubscribeButton = ({ onClick }: { onClick?: () => void }) => {
const { user } = useGlobalStore();
@@ -108,18 +110,36 @@ const StarRating = ({ rating, maxRating = 5 }: { rating: number; maxRating?: num
// 功能列表组件
const FeatureList = ({ plan }: { plan: ProcessedPlanData }) => {
const features = [
{ label: '可用流量', value: plan.features?.traffic || '1' },
{ label: '套餐时长', value: plan.features?.duration || '1' },
{ label: '在线IP', value: plan.features?.onlineIPs || '2' },
{ label: '在线连接数', value: plan.features?.connections || '3' },
{ label: '峰值带宽', value: plan.features?.bandwidth || '2' },
{ label: '可用节点', value: plan.features?.nodes || '11' },
];
const t = useTranslations('subscribe.detail');
const features = [{ label: '可用节点', value: plan.features?.nodes || '11' }];
return (
<div className='mt-6 space-y-0 sm:mt-6'>
<ul className='list-disc space-y-1 pl-5'>
<li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
<div className={'flex items-start justify-between'}>
<span className=''>{t('availableTraffic')}</span>
<span>
<Display type='traffic' value={plan?.traffic} unlimited />
</span>
</div>
</li>
<li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
<div className={'flex items-start justify-between'}>
<span className=''>{t('connectionSpeed')}</span>
<span>
<Display type='trafficSpeed' value={plan?.speed_limit} unlimited />
</span>
</div>
</li>
<li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
<div className={'flex items-start justify-between'}>
<span className=''>{t('connectedDevices')}</span>
<span>
<Display value={plan?.device_limit} type='number' unlimited />
</span>
</div>
</li>
{features.map((feature) => (
<li
key={feature.label}
@@ -164,7 +184,7 @@ const PlanCard = forwardRef<
className='relative w-full max-w-[345px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-8 transition-all duration-300 hover:shadow-lg sm:p-10'
>
{/* 套餐名称 */}
<h3 className='mb-4 text-left text-sm font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
<h3 className='mb-4 text-left text-xl font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
{/* 价格区域 */}
<PriceDisplay plan={plan} />