wanwu/sub2apipay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 订阅套餐卡片也适配平台颜色(按钮、倍率、价格)

Browse Source
This commit is contained in:
erio
2026-03-14 02:11:06 +08:00
parent 8dd0d1144b
commit 45713aeb57
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/SubscriptionPlanCard.tsx
View File

@@ -4,7 +4,7 @@ import React from 'react';
import type { Locale } from '@/lib/locale'; import type { Locale } from '@/lib/locale';
import { pickLocaleText } from '@/lib/locale'; import { pickLocaleText } from '@/lib/locale';
import { formatValidityLabel, formatValiditySuffix, type ValidityUnit } from '@/lib/subscription-utils'; import { formatValidityLabel, formatValiditySuffix, type ValidityUnit } from '@/lib/subscription-utils';
import { PlatformBadge } from '@/lib/platform-style'; import { PlatformBadge, getPlatformStyle } from '@/lib/platform-style';
export interface PlanInfo { export interface PlanInfo {
id: string; id: string;
@@ -47,6 +47,8 @@ export default function SubscriptionPlanCard({ plan, onSubscribe, isDark, locale
); );
const isOpenAI = plan.platform?.toLowerCase() === 'openai'; const isOpenAI = plan.platform?.toLowerCase() === 'openai';
const ps = getPlatformStyle(plan.platform ?? '');
const accentCls = isDark ? ps.accent.dark : ps.accent.light;
return ( return (
<div <div
@@ -87,7 +89,7 @@ export default function SubscriptionPlanCard({ plan, onSubscribe, isDark, locale
¥{plan.originalPrice} ¥{plan.originalPrice}
</span> </span>
)} )}
<span className="text-3xl font-bold text-emerald-500">¥{plan.price}</span> <span className={['text-3xl font-bold', accentCls].join(' ')}>¥{plan.price}</span>
<span className={['text-sm', isDark ? 'text-slate-400' : 'text-slate-500'].join(' ')}> <span className={['text-sm', isDark ? 'text-slate-400' : 'text-slate-500'].join(' ')}>
{periodSuffix} {periodSuffix}
</span> </span>
@@ -110,9 +112,9 @@ export default function SubscriptionPlanCard({ plan, onSubscribe, isDark, locale
{pickLocaleText(locale, '倍率', 'Rate')} {pickLocaleText(locale, '倍率', 'Rate')}
</span> </span>
<div className="flex items-baseline"> <div className="flex items-baseline">
<span className="text-lg font-bold text-emerald-500">1</span> <span className={['text-lg font-bold', accentCls].join(' ')}>1</span>
<span className={['mx-1 text-base', isDark ? 'text-slate-500' : 'text-slate-400'].join(' ')}>:</span> <span className={['mx-1 text-base', isDark ? 'text-slate-500' : 'text-slate-400'].join(' ')}>:</span>
<span className="text-lg font-bold text-emerald-500">{plan.rateMultiplier}</span> <span className={['text-lg font-bold', accentCls].join(' ')}>{plan.rateMultiplier}</span>
</div> </div>
</div> </div>
)} )}
@@ -193,7 +195,10 @@ export default function SubscriptionPlanCard({ plan, onSubscribe, isDark, locale
<button <button
type="button" type="button"
onClick={() => onSubscribe(plan.id)} onClick={() => onSubscribe(plan.id)}
className="mt-2 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 py-3 text-sm font-semibold text-white transition-colors hover:bg-emerald-600 active:bg-emerald-700" className={[
'mt-2 inline-flex w-full items-center justify-center gap-2 rounded-xl py-3 text-sm font-semibold text-white transition-colors',
ps.button,
].join(' ')}
> >
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}> <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /> <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />