feat: Introduce premium map dashboard with dark theme, pro features, and payment processing.

frontend/components/dashboard/ProFeaturePaywall.tsx

@@ -13,7 +13,7 @@ import {
 } from "lucide-react";
 import { useI18n } from "@/hooks/useI18n";
 import { useDashboardStore } from "@/hooks/useDashboardStore";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 type ProFeaturePaywallProps = {
   feature: "today" | "history" | "future";
@@ -32,148 +32,143 @@ export function ProFeaturePaywall({
 
   // Redemption logic: 500 points = $1 discount
   // Max discount $3 (requires 1500 points)
-  const maxRedeemablePoints = 1500;
+  const PRO_PRICE = 5;
+  const POINTS_VAL = 500;
+  const MAX_DISCOUNT = 3;
+
   const pointsAvailable = proAccess.points || 0;
-  const effectivePoints = Math.min(pointsAvailable, maxRedeemablePoints);
-  const discountAmount = usePoints ? Math.floor(effectivePoints / 500) : 0;
-  const originalPrice = 5.0;
-  const finalPrice = originalPrice - discountAmount;
-  const pointsToConsume = discountAmount * 500;
+
+  const billing = useMemo(() => {
+    const maxRedeemable = MAX_DISCOUNT * POINTS_VAL;
+    const actualRedeem = Math.min(pointsAvailable, maxRedeemable);
+    const discount = Math.floor(actualRedeem / POINTS_VAL);
+    return {
+      pointsUsed: discount * POINTS_VAL,
+      discountAmount: discount,
+      payAmount: PRO_PRICE - (usePoints ? discount : 0),
+    };
+  }, [usePoints, pointsAvailable]);
 
   return (
-    <div className="flex w-full flex-col items-center justify-center py-6 md:py-10">
-      <div className="relative w-full max-w-xl rounded-[2.5rem] border border-white/10 bg-slate-900/80 p-8 shadow-3xl backdrop-blur-3xl md:p-12">
+    <div className="flex w-full flex-col items-center justify-center py-6 md:py-10 z-30 p-4">
+      <div className="w-full max-w-2xl bg-[#161b2a]/90 backdrop-blur-2xl border border-white/10 rounded-[2.5rem] p-8 md:p-12 shadow-[0_0_80px_-10px_rgba(79,70,229,0.3)] text-center relative">
+        {/* 关闭按钮 */}
         {onClose && (
           <button
             onClick={onClose}
-            className="absolute right-6 top-6 flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-slate-400 transition hover:bg-white/10 hover:text-white z-10"
+            className="absolute top-6 right-6 p-2 bg-white/5 hover:bg-white/10 rounded-full text-slate-500 hover:text-white transition-all z-10"
+            title={isEn ? "Close" : "稍后再说"}
           >
             <X size={20} />
           </button>
         )}
 
         {/* Crown Badge */}
-        <div className="absolute left-1/2 top-0 flex h-20 w-20 -translate-x-1/2 -translate-y-1/2 rotate-[-6deg] items-center justify-center rounded-[1.5rem] border-4 border-slate-950 bg-gradient-to-tr from-amber-400 via-orange-500 to-yellow-500 text-white shadow-2xl shadow-orange-500/30">
-          <Crown size={32} fill="white" />
+        <div className="absolute -top-10 left-1/2 -translate-x-1/2 w-20 h-20 bg-gradient-to-tr from-yellow-500 to-amber-400 rounded-3xl flex items-center justify-center shadow-2xl rotate-12">
+          <Crown className="text-white w-10 h-10" fill="currentColor" />
         </div>
 
-        <div className="mt-4 text-center">
-          <h3 className="text-3xl font-extrabold tracking-tight text-white md:text-4xl">
-            {isEn ? "Unlock PolyWeather Pro" : "开启 PolyWeather Pro"}
-          </h3>
-          <p className="mx-auto mt-4 max-w-sm text-base leading-relaxed text-slate-400">
-            {isEn
-              ? "Unlock 15-day precision trends, real-time radar, and ad-free experience across all platforms."
-              : "解锁 15 天高精度趋势分析、实时雷达与闪电追踪。尊享全平台无广告体验。"}
-          </p>
-        </div>
+        <h2 className="text-3xl font-bold text-white mb-4 mt-4">
+          {isEn ? "Unlock PolyWeather Pro" : "开启 PolyWeather Pro"}
+        </h2>
+        <p className="text-slate-400 mb-10 max-w-md mx-auto">
+          {isEn
+            ? "Unlock 15-day precision trends, real-time radar, and ad-free experience across all platforms."
+            : "解锁 15 天高精度趋势分析、实时雷达与闪电追踪。尊享全平台无广告体验。"}
+        </p>
 
-        {/* Pricing Cards */}
-        <div className="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2">
-          {/* Plan Card */}
-          <div className="relative overflow-hidden rounded-3xl border border-blue-500/30 bg-blue-500/5 p-6 transition hover:bg-blue-500/10">
-            <div className="absolute -right-2 -top-1 rotate-12 rounded-lg bg-blue-500 px-2 py-0.5 text-[10px] font-bold text-white uppercase tracking-tighter shadow-lg">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-left mb-10">
+          {/* 订阅方案卡片 */}
+          <div className="p-6 bg-blue-600/10 border-2 border-blue-500/50 rounded-3xl relative">
+            <div className="absolute -top-3 right-6 bg-blue-500 text-[10px] px-2 py-1 rounded font-bold text-white uppercase tracking-tighter">
               {isEn ? "Monthly" : "月付套餐"}
             </div>
-            <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">
+            <p className="text-slate-500 text-[10px] font-bold uppercase tracking-widest mb-1">
               PRO PLAN
-            </div>
-            <div className="mt-2 flex items-baseline">
+            </p>
+            <div className="flex items-baseline gap-1">
               <span className="text-3xl font-black text-white">$5.00</span>
-              <span className="ml-1 text-sm font-medium text-slate-500">
+              <span className="text-slate-500 text-sm">
                 / {isEn ? "mo" : "月"}
               </span>
             </div>
           </div>
 
-          {/* Points Card */}
+          {/* 积分抵扣卡片 */}
           <div
-            className={`relative rounded-3xl border p-6 transition ${
-              usePoints && pointsAvailable >= 500
-                ? "border-indigo-500/30 bg-indigo-500/5"
-                : "border-white/5 bg-white/5 opacity-60"
-            }`}
+            className={`p-6 rounded-3xl border transition-all ${usePoints && pointsAvailable >= 500 ? "bg-indigo-600/20 border-indigo-500/50" : "bg-white/5 border-white/10"}`}
           >
-            <div className="flex items-center justify-between">
+            <div className="flex items-center justify-between mb-2">
               <span
-                className={`text-[10px] font-bold uppercase tracking-widest ${
-                  usePoints && pointsAvailable >= 500
-                    ? "text-indigo-400"
-                    : "text-slate-500"
-                }`}
+                className={`text-[10px] font-bold uppercase tracking-widest ${usePoints && pointsAvailable >= 500 ? "text-indigo-400" : "text-slate-500"}`}
               >
                 {isEn ? "Points Credit" : "积分抵扣"}
               </span>
               <button
                 onClick={() => setUsePoints(!usePoints)}
                 disabled={pointsAvailable < 500}
-                className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${
-                  usePoints && pointsAvailable >= 500
-                    ? "bg-indigo-600"
-                    : "bg-slate-700"
-                } ${pointsAvailable < 500 ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}`}
+                className={`w-10 h-5 rounded-full relative transition-all ${usePoints && pointsAvailable >= 500 ? "bg-indigo-500" : "bg-slate-700"} ${pointsAvailable < 500 ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}`}
               >
                 <div
-                  className={`absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform ${
-                    usePoints && pointsAvailable >= 500
-                      ? "translate-x-5"
-                      : "translate-x-0"
-                  }`}
+                  className={`absolute top-1 w-3 h-3 rounded-full bg-white transition-all ${usePoints && pointsAvailable >= 500 ? "right-1" : "left-1"}`}
                 />
               </button>
             </div>
-            <div className="mt-2 flex items-baseline">
+            <div className="flex items-baseline gap-1">
               <span
                 className={`text-3xl font-black ${usePoints && pointsAvailable >= 500 ? "text-emerald-400" : "text-slate-500"}`}
               >
-                -${discountAmount.toFixed(2)}
+                -${billing.discountAmount.toFixed(2)}
               </span>
-              <span className="ml-1 text-[10px] font-bold text-slate-500 uppercase">
+              <span className="text-slate-500 text-[10px] font-bold uppercase">
                 OFF
               </span>
             </div>
-            <div className="mt-1 text-[10px] font-medium text-slate-500">
+            <p className="text-[10px] text-slate-500 mt-1 italic">
               {pointsAvailable < 500
                 ? isEn
-                  ? "Need 500+ points"
+                  ? `Need 500+ points (Current: ${pointsAvailable})`
                   : `积分不足 (当前 ${pointsAvailable})`
-                : isEn
-                  ? `Auto-consume ${pointsToConsume} points`
-                  : `已自动消耗 ${pointsToConsume} 积分`}
-            </div>
+                : usePoints
+                  ? isEn
+                    ? `Consumed ${billing.pointsUsed} points`
+                    : `已自动消耗 ${billing.pointsUsed} 积分`
+                  : isEn
+                    ? "Up to $3.00 off"
+                    : "开启后最多抵扣 $3.00"}
+            </p>
           </div>
         </div>
 
-        {/* Total & Action */}
-        <div className="mt-10 space-y-6">
-          <div className="flex items-center justify-between px-2">
-            <span className="text-sm font-medium text-slate-400">
+        <div className="space-y-6">
+          <div className="flex items-center justify-between px-2 text-sm">
+            <span className="text-slate-400">
               {isEn ? "Total Due:" : "应付总计:"}
             </span>
             <span className="text-3xl font-black text-white">
-              ${finalPrice.toFixed(2)}
+              ${billing.payAmount.toFixed(2)}
             </span>
           </div>
 
           <Link
             href="/account"
-            className="group flex w-full items-center justify-center rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-5 text-lg font-bold text-white shadow-2xl shadow-blue-600/30 transition hover:from-blue-500 hover:to-indigo-500 active:scale-[0.98]"
+            className="w-full py-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold rounded-2xl shadow-xl shadow-blue-600/30 transition-all flex items-center justify-center gap-2 group active:scale-95 text-lg"
           >
             {isEn ? "Connect Wallet & Pay" : "连接钱包并支付"}
             <ArrowRight
               size={20}
-              className="ml-2 transition-transform group-hover:translate-x-1"
+              className="group-hover:translate-x-1 transition-transform"
             />
           </Link>
 
-          <div className="flex items-center justify-center gap-6">
-            <span className="flex items-center gap-1.5 text-[10px] font-medium text-slate-500">
-              <Lock size={12} className="opacity-50" />
+          <div className="flex justify-center items-center gap-6 text-[10px] font-medium text-slate-500 uppercase tracking-widest">
+            <span className="flex items-center gap-1.5">
+              <Lock size={12} className="opacity-50" />{" "}
               {isEn ? "Secured Payment" : "安全加密支付"}
             </span>
             <Link
               href="/account"
-              className="text-[10px] font-medium text-slate-500 transition hover:text-slate-300"
+              className="hover:text-white cursor-pointer transition-colors"
             >
               {isEn ? "FAQ" : "常见问题 (FAQ)"}
             </Link>