{!failed && paused && ( )} ); } function VlogFallbackScene() { return ( <>

); } // time helpers — slider 0..1 maps to 17:00 → 18:30 (90min) function tToClock(t) { const totalMin = 17 * 60 + Math.round(t * 90); const h = Math.floor(totalMin / 60), m = totalMin % 60; return `${h}:${String(m).padStart(2, "0")}`; } // ───────────────────────────────────────── // 装饰：上海天际线（东方明珠 + 上海中心 + 金茂 + SWFC） // 纯几何体：矩形 + 圆 + 梯形，不是写实插画 // ───────────────────────────────────────── function CitySilhouette({ height = 180, color = "#0a0a0d", opacity = 1 }) { return ( ); } // 占位图（取代真实图片） function PhotoPlaceholder({ skyT = 0.62, label, height = 240, showCity = true, children }) { const top = skyColor(Math.max(0, skyT - 0.18)); const mid = skyColor(skyT); const bot = skyColor(Math.min(1, skyT + 0.15)); const cityH = typeof height === "number" ? height * 0.55 : "55%"; return (

{/* 太阳 / 圆 */}

{/* 云带 */}

{/* 城市轮廓 */} {showCity && (

)} {/* 标签 */} {label && (

{label}

)} {children}

); } // ───────────────────────────────────────── // 评分 → 文案 / 颜色 // ───────────────────────────────────────── function scoreInfo(score) { if (score >= 80) return { label: "值得跑出门", tone: "high", c: "#ff8a3d", sub: "今晚的天空有戏" }; if (score >= 50) return { label: "天空一般", tone: "mid", c: "#e0a060", sub: "明天可能更好" }; return { label: "今天歇着", tone: "low", c: "#7a7a85", sub: "晚上换个事做" }; } // ───────────────────────────────────────── // Scene 0 — 街景 vlog (入口) // ───────────────────────────────────────── function SceneVlog({ score = 87, sunsetPayload }) { const info = scoreInfo(score); return (

{/* 抖音号 + 来源 */}

抖音号：guang_chaser

⌕ 上海·南京西路

{/* 卡片浮层 — 视频底部信息 */}

@光 · 追光者 ✓

今天天气不错，出来走走。 #晚霞预警 #citywalk #{sunsetPayload?.recommendation?.spot || "上海江边"}

{/* 引导：左滑发现 */}

← 左滑查看今晚的天空

); } // ───────────────────────────────────────── // Scene 1 — AI 加载（瞬态过渡） // ───────────────────────────────────────── function SceneLoading({ progress = 0 }) { return (

追

正在为你查看今晚的天空

云量 · 湿度 · 太阳方位 · 能见度

); } // ───────────────────────────────────────── // Scene 2 — 晚霞卡片封面 (核心 · 强视觉) // 设计目标：刷到的一瞬间就明白「我要去拍」 // - 全屏晚霞渐变背景（用 refined 色卡的爆发段） // - 上海标志性天际线剪影 + 落日 // - 大号衬线中文标语 + 评分徽章 // - 底部机位卡：距离 + 峰值时刻 + 左滑提示 // ───────────────────────────────────────── function SceneSunsetCard({ score = 87, peak = "18:15", sunsetPayload, loading = false, mode = "live" }) { const info = { ...scoreInfo(score), label: sunsetPayload?.scoreLabel || scoreInfo(score).label }; const recommendation = sunsetPayload?.recommendation || {}; const burst = getTimelineColorAt(sunsetPayload, 0.78, 0.78); // 峰值红 const golden = getTimelineColorAt(sunsetPayload, 0.50, 0.50); // 橘 const violet = getTimelineColorAt(sunsetPayload, 0.92, 0.92); // 紫 const current = hexToRgbTuple(sunsetPayload?.currentSkyColor, burst); const spot = recommendation.spot || "苏州河乍浦路桥"; const distanceText = recommendation.distance || "步行 16 分钟"; const distanceKm = displayKmFromDistance(distanceText); const cityLabel = sunsetPayload?.meta?.city === "Los Angeles" ? "洛杉矶" : "上海"; return (

{/* 背景：分层晚霞渐变 */}

{/* 顶部光晕 */}

{/* 太阳：落到天际线上方 */}

{/* 大号衬线标语 — 左侧 */}

今晚
西天
会烧

峰值 {peak} · 约 {sunsetPayload?.peakDuration || 14} 分钟 · 向{recommendation.direction || "西"}看
——AI 译自今天的气象

{/* 右上：评分徽章 */}

SUNSET SCORE

{score}/100

{info.label}

{/* 中段：天际线剪影 */}

{/* 倒映水面：很薄的渐变带 */}

{/* 底部：机位卡 */}

◎

{spot} · {recommendation.direction || "西"}望机位

{distanceKm}km · {distanceText} · 峰值 {peak}

← 左滑·看天空变色

); } function Metric({ label, value, accent }) { return (

{label}

{value}

); } // ───────────────────────────────────────── // Scene 3 — 时间条 + 色卡 (产品灵魂) // ───────────────────────────────────────── function SceneTimeSlider({ sunsetPayload }) { const [t, setT] = useState(0.62); // 默认在 18:02 日落 const trackRef = useRef(null); const dragging = useRef(false); const c = getTimelineColorAt(sunsetPayload, t, t); const cTop = getTimelineColorAt(sunsetPayload, Math.max(0, t - 0.18), Math.max(0, t - 0.18)); const cMid = c; const cBot = getTimelineColorAt(sunsetPayload, Math.min(1, t + 0.15), Math.min(1, t + 0.15)); function handleDrag(clientX) { const el = trackRef.current; if (!el) return; const r = el.getBoundingClientRect(); const nt = Math.max(0, Math.min(1, (clientX - r.left) / r.width)); setT(nt); } function onDown(e) { dragging.current = true; const x = e.touches ? e.touches[0].clientX : e.clientX; handleDrag(x); e.preventDefault(); } function onMove(e) { if (!dragging.current) return; const x = e.touches ? e.touches[0].clientX : e.clientX; handleDrag(x); } function onUp() { dragging.current = false; } useEffect(() => { window.addEventListener("pointermove", onMove); window.addEventListener("pointerup", onUp); window.addEventListener("touchmove", onMove, { passive: false }); window.addEventListener("touchend", onUp); return () => { window.removeEventListener("pointermove", onMove); window.removeEventListener("pointerup", onUp); window.removeEventListener("touchmove", onMove); window.removeEventListener("touchend", onUp); }; }, []); const anchors = [ { t: 0.00, label: "17:00", note: "现在" }, { t: 0.33, label: sunsetPayload?.meta?.goldenHourStart || "17:30", note: "黄金时刻" }, { t: 0.62, label: sunsetPayload?.meta?.sunsetTime || "18:02", note: "日落" }, { t: 0.78, label: sunsetPayload?.peakTime || "18:15", note: "峰值" }, { t: 1.00, label: "18:30", note: "结束" }, ]; // 当前最近锚点的 note let nearestNote = anchors[0].note; let minD = 1; for (const a of anchors) { const d = Math.abs(a.t - t); if (d < minD) { minD = d; nearestNote = a.note; } } return (

{/* 太阳 - 高度随时间变化 */}

{/* 远景城市 */}

{/* 顶部 hud */}

{rgb(c).toUpperCase().replace("RGB", "").replace(/[()]/g, "").split(",").map(s => Number(s).toString(16).padStart(2,"0")).join("")}

{/* 大时间显示 */}

{nearestNote.toUpperCase()}

{tToClock(t)}

{timeNarration(t)}

{/* 时间条 */}

{/* 色卡轨 */}

{/* 锚点 */} {anchors.map((a, i) => (

))} {/* 拇指 */}

{/* 锚点标签 */}

{anchors.map((a, i) => (

{a.label}

))}

{/* 评分 mini */}

评分 87 /100

); } function timeNarration(t) { if (t < 0.2) return "日落前 · 西边天空泛起轻微金光"; if (t < 0.4) return "黄金时刻开始 · 光线变软"; if (t < 0.6) return "建筑反射开始变暖 · 拍人最佳"; if (t < 0.7) return "日落 · 等十分钟，最好的还在后面"; if (t < 0.85) return "晚霞峰值 · 整个西天在烧"; return "余晖散去 · 蓝调时刻接管天空"; } function buildSkyGradient(sunsetPayload) { if (sunsetPayload?.timelineColors?.length) { const colors = sunsetPayload.timelineColors; const stops = colors.map((color, index) => `${color} ${((index / (colors.length - 1)) * 100).toFixed(1)}%`).join(", "); return `linear-gradient(90deg, ${stops})`; } const stops = CURRENT_PALETTE.map(k => `${rgb(k.c)} ${(k.t * 100).toFixed(1)}%`).join(", "); return `linear-gradient(90deg, ${stops})`; } // ───────────────────────────────────────── // Scene 4 — 机位详情 / 拍摄指令 / 附近作品 // ───────────────────────────────────────── function SceneSpotDetail() { return (

{/* 顶部实景占位 */}

{/* 机位 pin */}

站这里 ↓

{/* 顶部 hud */}

● 已收藏

{/* 下半部信息卡 */}

{/* 距离 + 导航 */}

◎

距你位置

1.2km 步行约 16 分钟

{/* 拍摄小贴士 */}

☀

三条拍摄指令

BY · AI

{[ { n: "01", t: "站在邮筒右边", s: "构图前景压住" }, { n: "02", t: "等一辆车开过", s: "让车窗反射夕阳" }, { n: "03", t: "拍车窗反光、不是车", s: "ISO 200 / 1/160s" }, ].map((x, i) => (

{x.n}

{x.t}

{x.s}

))}

{/* 附近作品 */}

🔥

附近用户作品

{[ { skyT: 0.7, user: "摄影小白", likes: 128 }, { skyT: 0.55, user: "魔都旅人", likes: 96 }, { skyT: 0.85, user: "光影捕手", likes: 75 }, { skyT: 0.92, user: "日落收藏家", likes: 63 }, ].map((p, i) => (

@{p.user} ♥{p.likes}

))}

); } // ───────────────────────────────────────── // Scene 5 — 下一条视频 (回到 feed) // ───────────────────────────────────────── function SceneNextVideo() { return (

{/* 不同的色调 — 蓝调 */}

{/* 城市 */}

{/* 灯光点 */} {Array.from({ length: 14 }).map((_, i) => (

))} {/* 视频信息 */}

@夜行人小K

外滩蓝调时刻，整座城市在发光 #bluehour

抖音号：nightwalk_k · 上海·外滩

); } Object.assign(window, { SceneVlog, SceneLoading, SceneSunsetCard, SceneTimeSlider, SceneSpotDetail, SceneNextVideo, scoreInfo, skyColor, rgb, CitySilhouette, PhotoPlaceholder, setPalette, getPalette, PALETTE_REFINED, PALETTE_DRAMATIC, buildSkyGradient, getTimelineColorAt, VideoBackdrop, });