完成产品审查剩余修复：新手指引、反馈入口、付费墙预览

P1-4：新增 WelcomeOverlay 新手指引 - 首次访问时显示 3 步引导：①从地图选城市 ②查看城市简报 ③解锁 Pro 深入分析 - 圆点进度指示、跳过/下一步按钮、点背景可关闭 - 看过一次后 localStorage 标记不再显示 P1-5：付费墙增加功能预览 - HistoryModal 在付费墙上方展示功能说明文案 - 新增 i18n 键 history.previewTitle / history.previewDesc（中英双语） P2-9：新增反馈入口 - 顶栏增加 Telegram 反馈按钮（MessageCircle 图标） - 点击跳转 PolyWeather 社群 Tested: npx tsc --noEmit
2026-05-10 16:19:21 +08:00
parent de0f037bf4
commit ce1da6a686
5 changed files with 259 additions and 1 deletions
@@ -0,0 +1,120 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { MapPin, FileText, Crown } from "lucide-react";
+
+const STORAGE_KEY = "polyweather_welcome_seen";
+
+type Props = {
+  locale: string;
+  onDismiss: () => void;
+};
+
+const steps = [
+  {
+    icon: MapPin,
+    titleEn: "Pick a city on the map",
+    titleZh: "从地图选城市",
+    descEn: "Click any colored bubble to view real-time weather and forecasts.",
+    descZh: "点击地图上的彩色气泡，查看实时天气和预报。",
+  },
+  {
+    icon: FileText,
+    titleEn: "Read the city briefing",
+    titleZh: "查看城市简报",
+    descEn: "The right panel shows current temperature, DEB forecast, and detailed metrics.",
+    descZh: "右侧面板展示当前温度、DEB 预报和各项指标。",
+  },
+  {
+    icon: Crown,
+    titleEn: "Unlock Pro for deep analysis",
+    titleZh: "解锁 Pro 深入分析",
+    descEn: "Pro unlocks AI-powered METAR reads, model evidence, market layer, and intraday analysis.",
+    descZh: "Pro 解锁 AI 机场报文解读、模型证据、市场层、日内分析。",
+  },
+];
+
+export function WelcomeOverlay({ locale, onDismiss }: Props) {
+  const [visible, setVisible] = useState(false);
+  const [step, setStep] = useState(0);
+  const isEn = locale === "en-US";
+
+  useEffect(() => {
+    const seen = localStorage.getItem(STORAGE_KEY);
+    if (!seen) {
+      setVisible(true);
+    }
+  }, []);
+
+  if (!visible) return null;
+
+  const current = steps[step];
+  const isLast = step === steps.length - 1;
+
+  const handleDismiss = () => {
+    localStorage.setItem(STORAGE_KEY, "1");
+    setVisible(false);
+    onDismiss();
+  };
+
+  const handleNext = () => {
+    if (isLast) {
+      handleDismiss();
+    } else {
+      setStep(step + 1);
+    }
+  };
+
+  return (
+    <div
+      className="scan-welcome-overlay"
+      role="dialog"
+      aria-label={isEn ? "Welcome guide" : "新手指引"}
+      onClick={handleDismiss}
+    >
+      <div
+        className="scan-welcome-card"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="scan-welcome-steps">
+          {steps.map((_, i) => (
+            <span
+              key={i}
+              className={`scan-welcome-dot ${i === step ? "active" : ""} ${i < step ? "done" : ""}`}
+            />
+          ))}
+        </div>
+
+        <div className="scan-welcome-icon-wrap">
+          <current.icon size={32} className="scan-welcome-icon" />
+        </div>
+
+        <h2 className="scan-welcome-title">
+          {isEn ? current.titleEn : current.titleZh}
+        </h2>
+        <p className="scan-welcome-desc">
+          {isEn ? current.descEn : current.descZh}
+        </p>
+
+        <div className="scan-welcome-actions">
+          <button
+            type="button"
+            className="scan-welcome-skip"
+            onClick={handleDismiss}
+          >
+            {isEn ? "Skip" : "跳过"}
+          </button>
+          <button
+            type="button"
+            className="scan-primary-button"
+            onClick={handleNext}
+          >
+            {isLast
+              ? isEn ? "Got it" : "知道了"
+              : isEn ? "Next" : "下一步"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}