Skip to content

Commit 375a302

Browse files
zyh320888zyh320888
committed
feat(auth): 添加订阅对话框组件
1 parent 26fa196 commit 375a302

File tree

1 file changed

+123
-7
lines changed

1 file changed

+123
-7
lines changed

‎app/components/auth/SubscriptionDialog.tsx

+123-7
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,137 @@
11
import { Dialog, DialogTitle, DialogDescription, DialogRoot } from '~/components/ui/Dialog';
2+
import { useState } from 'react';
3+
import { useAuth } from '~/hooks/useAuth';
24

35
interface SubscriptionDialogProps {
46
isOpen: boolean;
57
onClose: () => void;
68
}
79

10+
interface SubscriptionPlan {
11+
name: string;
12+
tokens: number;
13+
price: number;
14+
description: string;
15+
savePercentage?: number;
16+
}
17+
18+
const subscriptionPlans: SubscriptionPlan[] = [
19+
{
20+
name: "专业版",
21+
tokens: 10000000,
22+
price: 20,
23+
description: "适合业余爱好者和轻度用户进行探索性使用。"
24+
},
25+
{
26+
name: "专业版 50",
27+
tokens: 26000000,
28+
price: 50,
29+
description: "为每周需要使用多八多几次的专业人士设计。",
30+
savePercentage: 3
31+
},
32+
{
33+
name: "专业版 100",
34+
tokens: 55000000,
35+
price: 100,
36+
description: "适合希望提升日常工作流程的重度用户。",
37+
savePercentage: 9
38+
},
39+
{
40+
name: "专业版 200",
41+
tokens: 120000000,
42+
price: 200,
43+
description: "最适合将多八多作为核心工具持续使用的超级用户。",
44+
savePercentage: 17
45+
}
46+
];
47+
848
export function SubscriptionDialog({ isOpen, onClose }: SubscriptionDialogProps) {
49+
const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>('monthly');
50+
const { user } = useAuth();
51+
52+
if (!user) return null;
53+
54+
const currentPlan = subscriptionPlans[1]; // 假设当前用户使用的是"专业版 50"
55+
956
return (
1057
<DialogRoot open={isOpen}>
11-
<Dialog onBackdrop={onClose} onClose={onClose}>
12-
<DialogTitle>订阅信息</DialogTitle>
58+
<Dialog onBackdrop={onClose} onClose={onClose} className="w-full max-w-4xl">
59+
<DialogTitle>订阅管理</DialogTitle>
1360
<DialogDescription>
14-
<div className="space-y-4">
15-
<p className="text-bolt-elements-textSecondary">
16-
这里显示用户的订阅信息。您可以根据实际需求添加更多详细内容。
17-
</p>
18-
{/* 可以添加更多订阅相关的信息 */}
61+
<div className="space-y-6">
62+
<div className="text-center">
63+
<p className="text-bolt-elements-textSecondary">
64+
注册免费账户以加速您在公共项目上的工作流程，或通过即时打开的生产环境提升整个团队的效率。
65+
</p>
66+
</div>
67+
68+
<div className="bg-bolt-elements-background-depth-2 p-4 rounded-lg">
69+
<div className="flex justify-between items-center">
70+
<div>
71+
<span className="text-bolt-elements-textPrimary font-bold">300万</span>
72+
<span className="text-bolt-elements-textSecondary"> 代币剩余。</span>
73+
<span className="text-bolt-elements-textSecondary">2600万代币将在17天后添加。</span>
74+
</div>
75+
<div className="text-right">
76+
<span className="text-bolt-elements-textSecondary">需要更多代币？</span>
77+
<br />
78+
<span className="text-bolt-elements-textSecondary">
79+
升级您的计划或购买
80+
<a href="#" className="text-bolt-elements-item-contentAccent hover:underline">代币充值包</a>
81+
</span>
82+
</div>
83+
</div>
84+
</div>
85+
86+
<div className="flex justify-center space-x-4">
87+
<button
88+
onClick={() => setBillingCycle('monthly')}
89+
className={`px-4 py-2 rounded-md ${
90+
billingCycle === 'monthly'
91+
? 'bg-bolt-elements-button-primary-background text-bolt-elements-button-primary-text'
92+
: 'bg-bolt-elements-button-secondary-background text-bolt-elements-button-secondary-text'
93+
}`}
94+
>
95+
月付
96+
</button>
97+
<button
98+
onClick={() => setBillingCycle('yearly')}
99+
className={`px-4 py-2 rounded-md ${
100+
billingCycle === 'yearly'
101+
? 'bg-bolt-elements-button-primary-background text-bolt-elements-button-primary-text'
102+
: 'bg-bolt-elements-button-secondary-background text-bolt-elements-button-secondary-text'
103+
}`}
104+
>
105+
年付
106+
</button>
107+
</div>
108+
109+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
110+
{subscriptionPlans.map((plan) => (
111+
<div key={plan.name} className={`bg-bolt-elements-background-depth-2 p-4 rounded-lg ${plan.name === currentPlan.name ? 'border-2 border-bolt-elements-item-contentAccent' : ''}`}>
112+
<h3 className="text-bolt-elements-textPrimary font-bold text-lg">{plan.name}</h3>
113+
<div className="text-bolt-elements-textSecondary mb-2">
114+
{(plan.tokens / 1000000).toFixed(0)}M 代币
115+
{plan.savePercentage && (
116+
<span className="ml-2 text-green-500">节省 {plan.savePercentage}%</span>
117+
)}
118+
</div>
119+
<p className="text-bolt-elements-textTertiary text-sm mb-4">{plan.description}</p>
120+
<div className="text-bolt-elements-textPrimary font-bold text-2xl mb-2">
121+
¥{plan.price * (billingCycle === 'yearly' ? 10 : 1)}/{billingCycle === 'yearly' ? '年' : '月'}
122+
</div>
123+
<button
124+
className={`w-full py-2 rounded-md ${
125+
plan.name === currentPlan.name
126+
? 'bg-bolt-elements-button-secondary-background text-bolt-elements-button-secondary-text'
127+
: 'bg-bolt-elements-button-primary-background text-bolt-elements-button-primary-text'
128+
}`}
129+
>
130+
{plan.name === currentPlan.name ? '管理当前计划' : `升级到${plan.name}`}
131+
</button>
132+
</div>
133+
))}
134+
</div>
19135
</div>
20136
</DialogDescription>
21137
</Dialog>

0 commit comments

Comments
 (0)