's'

app/checkout/page.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { createCheckoutOrder } from "@/services/order.service";
+
+export default async function CheckoutPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ plan?: string; slug?: string }>;
+}) {
+  const { plan: rawPlan = "pro", slug = "unknown-app" } = await searchParams;
+  const plan = rawPlan === "free" || rawPlan === "pro" || rawPlan === "ultra" ? rawPlan : "pro";
+  const order = await createCheckoutOrder(plan, slug);
+
+  return (
+    <div className="space-y-6 py-8">
+      <section className="card-glass">
+        <p className="text-xs text-cyan-300">支付确认（占位）</p>
+        <h1 className="mt-1 text-3xl font-bold">订单确认</h1>
+        <p className="mt-2 text-sm text-slate-300">计划：{order.plan.toUpperCase()} · 资源：{order.slug}</p>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-2">
+        <div className="card-glass space-y-2 text-sm">
+          <p>订单号：{order.id}</p>
+          <p>支付金额：¥{order.amount}</p>
+          <p>支付方式：PayJS（预留）</p>
+          <p className="text-slate-400">后续可接支付二维码、轮询支付状态与回调签名校验。</p>
+        </div>
+        <div className="card-glass grid place-items-center">
+          <div className="grid h-44 w-44 place-items-center rounded-2xl border border-dashed border-cyan-300/40 text-xs text-slate-400">
+            支付二维码占位
+          </div>
+        </div>
+      </section>
+
+      <section className="card-glass flex flex-wrap gap-2">
+        <Link href={`/orders/${order.id}?status=pending&plan=${order.plan}&slug=${order.slug}`} className="cta-main">
+          我已支付，查看订单状态
+        </Link>
+        <Link href="/pricing" className="cta-sub">返回套餐页</Link>
+      </section>
+    </div>
+  );
+}