Initial CMPP frontend prototype

2026-06-30 16:09:46 +08:00
commit 2f3c274a30
98 changed files with 25255 additions and 0 deletions
@@ -0,0 +1,35 @@
+import { CreditCard } from 'lucide-react';
+import { Button, Tag } from '@/components/ui';
+import { clientService } from '@/mock';
+
+export function ClientBillingPage() {
+  const plans = clientService.getBillingPlans();
+
+  return (
+    <section className="page-stack">
+      <div className="page-heading">
+        <div>
+          <p className="eyebrow">账户</p>
+          <h1>充值套餐</h1>
+        </div>
+      </div>
+      <div className="surface">
+        <div className="plan-grid">
+          {plans.map((plan) => (
+            <article className={['plan-card', plan.highlight ? 'plan-card--highlight' : ''].filter(Boolean).join(' ')} key={plan.id}>
+              <div className="section-heading">
+                <h2>{plan.name}</h2>
+                {plan.highlight ? <Tag tone="accent">推荐</Tag> : null}
+              </div>
+              <strong>{plan.messages.toLocaleString('zh-CN')} 条</strong>
+              <p className="muted">适合阶段性短信发送和活动通知。</p>
+              <Button icon={<CreditCard size={16} />} variant={plan.highlight ? 'primary' : 'ghost'}>
+                ¥{plan.price.toLocaleString('zh-CN')} 立即充值
+              </Button>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}