1→     1→"use client";
     2→     2→// 回响星核 / Echo Nexus — 深空信标面板
     3→     3→// v0.5：每日挑战 + 本地排行榜
     4→     4→// v0.8：周挑战 + 信标链（连续完成奖励）
     5→     5→import { useState, useEffect, useCallback } from "react";
     6→     6→import { useGameStore } from "@/store/gameStore";
     7→     7→import { useToast } from "@/hooks/use-toast";
     8→     8→import { sfx } from "@/hooks/useAudio";
     9→     9→import {
    10→    10→  generateDailyChallenge,
    11→    11→  generateWeeklyChallenge,
    12→    12→  loadDailyProgress,
    13→    13→  loadWeeklyProgress,
    14→    14→  loadLeaderboard,
    15→    15→  loadChainState,
    16→    16→  claimBeaconReward,
    17→    17→  BEACON_DIFFICULTY,
    18→    18→  BEACON_TYPE_META,
    19→    19→  BEACON_CHAIN_MILESTONES,
    20→    20→  BEACON_CHAIN_REWARDS,
    21→    21→  getWeekKey,
    22→    22→  getTodayKey,
    23→    23→  getNextMilestone,
    24→    24→  getChainProgress,
    25→    25→  msUntilNextDay,
    26→    26→  msUntilNextWeek,
    27→    27→  formatCountdown,
    28→    28→  type BeaconDailyChallenge,
    29→    29→  type BeaconDailyProgress,
    30→    30→  type BeaconWeeklyChallenge,
    31→    31→  type BeaconWeeklyProgress,
    32→    32→  type BeaconScoreEntry,
    33→    33→  type BeaconChallengeType,
    34→    34→  type BeaconDifficulty,
    35→    35→  type BeaconChainState,
    36→    36→} from "@/lib/game/beacon";
    37→    37→import { formatNum } from "@/lib/game/config";
    38→    38→import { Button } from "@/components/ui/button";
    39→    39→import { Progress } from "@/components/ui/progress";
    40→    40→import {
    41→    41→  Radio,
    42→    42→  Clock,
    43→    43→  Trophy,
    44→    44→  Sparkles,
    45→    45→  Award,
    46→    46→  Crown,
    47→    47→  Medal,
    48→    48→  Link2,
    49→    49→  Flame,
    50→    50→  Zap,
    51→    51→} from "lucide-react";
    52→    52→
    53→    53→const DIFFICULTY_ORDER: BeaconDifficulty[] = ["routine", "anomaly", "singular"];
    54→    54→
    55→    55→function rankBadge(rank: number) {
    56→    56→  if (rank === 0) return { icon: Crown, color: "#fbbf24", label: "1st" };
    57→    57→  if (rank === 1) return { icon: Medal, color: "#cbd5e1", label: "2nd" };
    58→    58→  if (rank === 2) return { icon: Award, color: "#f97316", label: "3rd" };
    59→    59→  return null;
    60→    60→}
    61→    61→
    62→    62→export function BeaconPanel() {
    63→    63→  const grantBeaconReward = useGameStore((s) => s.grantBeaconReward);
    64→    64→  const claimWeeklyBeacon = useGameStore((s) => s.claimWeeklyBeacon);
    65→    65→  const claimChainReward = useGameStore((s) => s.claimChainReward);
    66→    66→  const { toast } = useToast();
    67→    67→
    68→    68→  const [challenge, setChallenge] = useState<BeaconDailyChallenge | null>(null);
    69→    69→  const [progress, setProgress] = useState<BeaconDailyProgress | null>(null);
    70→    70→  const [weeklyChallenge, setWeeklyChallenge] =
    71→    71→    useState<BeaconWeeklyChallenge | null>(null);
    72→    72→  const [weeklyProgress, setWeeklyProgress] =
    73→    73→    useState<BeaconWeeklyProgress | null>(null);
    74→    74→  const [chainState, setChainState] = useState<BeaconChainState | null>(null);
    75→    75→  const [leaderboard, setLeaderboard] = useState<BeaconScoreEntry[]>([]);
    76→    76→  const [dayCountdown, setDayCountdown] = useState("00:00:00");
    77→    77→  const [weekCountdown, setWeekCountdown] = useState("00:00:00");
    78→    78→  const [now, setNow] = useState(Date.now());
    79→    79→
    80→    80→  // 初始化 + 每秒刷新（进度 + 倒计时）
    81→    81→  useEffect(() => {
    82→    82→    setChallenge(generateDailyChallenge());
    83→    83→    setProgress(loadDailyProgress());
    84→    84→    setWeeklyChallenge(generateWeeklyChallenge());
    85→    85→    setWeeklyProgress(loadWeeklyProgress());
    86→    86→    setChainState(loadChainState());
    87→    87→    setLeaderboard(loadLeaderboard());
    88→    88→    const id = setInterval(() => {
    89→    89→      setNow(Date.now());
    90→    90→      setProgress(loadDailyProgress());
    91→    91→      setWeeklyProgress(loadWeeklyProgress());
    92→    92→      setChainState(loadChainState());
    93→    93→      setChallenge((c) => c ?? generateDailyChallenge());
    94→    94→      setWeeklyChallenge((c) => c ?? generateWeeklyChallenge());
    95→    95→    }, 1000);
    96→    96→    return () => clearInterval(id);
    97→    97→  }, []);
    98→    98→
    99→    99→  useEffect(() => {
   100→   100→    setDayCountdown(formatCountdown(msUntilNextDay(new Date(now))));
   101→   101→    setWeekCountdown(formatCountdown(msUntilNextWeek(new Date(now))));
   102→   102→  }, [now]);
   103→   103→
   104→   104→  const handleClaimDaily = useCallback(() => {
   105→   105→    if (!challenge || !progress) return;
   106→   106→    if (progress.completedAt === null || progress.claimed) return;
   107→   107→    const res = claimBeaconReward(challenge, progress);
   108→   108→    setLeaderboard(res.leaderboard);
   109→   109→    setProgress(loadDailyProgress());
   110→   110→    // 发放奖励到游戏状态
   111→   111→    grantBeaconReward(res.rewardInsight, res.rewardContact);
   112→   112→    sfx("achievement");
   113→   113→    toast({
   114→   114→      title: "✦ 每日信标奖励已领取",
   115→   115→      description: `+${res.rewardInsight} 洞见 · +${res.rewardContact.toFixed(
   116→   116→        1
   117→   117→      )} 接触 · 得分 ${res.score}`,
   118→   118→    });
   119→   119→  }, [challenge, progress, toast, grantBeaconReward]);
   120→   120→
   121→   121→  const handleClaimWeekly = useCallback(() => {
   122→   122→    if (!weeklyChallenge || !weeklyProgress) return;
   123→   123→    if (weeklyProgress.completedAt === null || weeklyProgress.claimed) return;
   124→   124→    const res = claimWeeklyBeacon();
   125→   125→    setLeaderboard(loadLeaderboard());
   126→   126→    setWeeklyProgress(loadWeeklyProgress());
   127→   127→    if (res.rewardInsight > 0 || res.rewardContact > 0) {
   128→   128→      sfx("achievement");
   129→   129→      toast({
   130→   130→        title: "✦ 周挑战奖励已领取",
   131→   131→        description: `+${res.rewardInsight} 洞见 · +${res.rewardContact.toFixed(
   132→   132→          1
   133→   133→        )} 接触 · 得分 ${res.score}`,
   134→   134→      });
   135→   135→    }
   136→   136→  }, [weeklyChallenge, weeklyProgress, toast, claimWeeklyBeacon]);
   137→   137→
   138→   138→  const handleClaimChain = useCallback(
   139→   139→    (milestone: number) => {
   140→   140→      const reward = BEACON_CHAIN_REWARDS.find(
   141→   141→        (r) => r.milestone === milestone
   142→   142→      );
   143→   143→      const res = claimChainReward(milestone);
   144→   144→      setChainState(loadChainState());
   145→   145→      if (res.ok) {
   146→   146→        sfx("achievement");
   147→   147→        toast({
   148→   148→          title: `✦ ${res.label || reward?.label || "里程碑"} 已领取`,
   149→   149→          description: `+${res.rewardInsight} 洞见 · +${res.rewardContact.toFixed(
   150→   150→            1
   151→   151→          )} 接触`,
   152→   152→        });
   153→   153→      }
   154→   154→    },
   155→   155→    [toast, claimChainReward]
   156→   156→  );
   157→   157→
   158→   158→  if (!challenge || !progress || !weeklyChallenge || !weeklyProgress || !chainState) {
   159→   159→    return (
   160→   160→      <div className="flex items-center justify-center h-full text-xs text-muted-foreground/60">
   161→   161→        正在校准深空信标…
   162→   162→      </div>
   163→   163→    );
   164→   164→  }
   165→   165→
   166→   166→  const diffMeta = BEACON_DIFFICULTY[challenge.difficulty];
   167→   167→  const typeMeta = BEACON_TYPE_META[challenge.type];
   168→   168→  const pct = Math.min(100, (progress.progress / challenge.goal) * 100);
   169→   169→  const isCompleted = progress.completedAt !== null;
   170→   170→  const isClaimed = progress.claimed;
   171→   171→  const canClaim = isCompleted && !isClaimed;
   172→   172→
   173→   173→  // 周挑战派生量
   174→   174→  const wDiffMeta = BEACON_DIFFICULTY[weeklyChallenge.difficulty];
   175→   175→  const wTypeMeta = BEACON_TYPE_META[weeklyChallenge.type];
   176→   176→  const wPct = Math.min(100, (weeklyProgress.progress / weeklyChallenge.goal) * 100);
   177→   177→  const wCompleted = weeklyProgress.completedAt !== null;
   178→   178→  const wClaimed = weeklyProgress.claimed;
   179→   179→  const wCanClaim = wCompleted && !wClaimed;
   180→   180→
   181→   181→  // 信标链派生量
   182→   182→  const chainProgress = getChainProgress(chainState.currentStreak);
   183→   183→  const nextMilestone = getNextMilestone(chainState.currentStreak);
   184→   184→  const todayKey = getTodayKey();
   185→   185→  const completedToday = chainState.lastCompletedDateKey === todayKey;
   186→   186→
   187→   187→  return (
   188→   188→    <div className="flex flex-col gap-2.5 h-full overflow-y-auto echo-scroll pr-0.5">
   189→   189→      <style jsx global>{`
   190→   190→        .echo-scroll::-webkit-scrollbar { width: 4px; }
   191→   191→        .echo-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
   192→   192→        .echo-scroll::-webkit-scrollbar-track { background: transparent; }
   193→   193→        @keyframes beacon-pulse-ring {
   194→   194→          0% { transform: scale(0.8); opacity: 0.8; }
   195→   195→          100% { transform: scale(2.2); opacity: 0; }
   196→   196→        }
   197→   197→        @keyframes beacon-glow {
   198→   198→          0%, 100% { box-shadow: 0 0 18px ${diffMeta.glow}, inset 0 0 12px ${diffMeta.glow}; }
   199→   199→          50% { box-shadow: 0 0 32px ${diffMeta.glow}, inset 0 0 20px ${diffMeta.glow}; }
   200→   200→        }
   201→   201→        @keyframes weekly-glow {
   202→   202→          0%, 100% { box-shadow: 0 0 18px rgba(232,121,249,0.35), inset 0 0 12px rgba(232,121,249,0.25); }
   203→   203→          50% { box-shadow: 0 0 32px rgba(232,121,249,0.5), inset 0 0 20px rgba(232,121,249,0.35); }
   204→   204→        }
   205→   205→        @keyframes chain-milestone-pulse {
   206→   206→          0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(251,113,133,0.55); }
   207→   207→          50% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(251,113,133,0); }
   208→   208→        }
   209→   209→        .chain-milestone-reachable {
   210→   210→          animation: chain-milestone-pulse 1.8s ease-in-out infinite;
   211→   211→        }
   212→   212→        @keyframes chain-streak-flux {
   213→   213→          0%, 100% { background-position: 0% 50%; }
   214→   214→          50% { background-position: 100% 50%; }
   215→   215→        }
   216→   216→        .chain-streak-text {
   217→   217→          background: linear-gradient(90deg, #fbbf24, #fb7185, #fbbf24);
   218→   218→          background-size: 200% 100%;
   219→   219→          -webkit-background-clip: text;
   220→   220→          background-clip: text;
   221→   221→          -webkit-text-fill-color: transparent;
   222→   222→          animation: chain-streak-flux 4s ease-in-out infinite;
   223→   223→        }
   224→   224→      `}</style>
   225→   225→
   226→   226→      {/* 头部：信标 + 倒计时 */}
   227→   227→      <div className="flex items-center justify-between">
   228→   228→        <h3 className="text-sm font-semibold flex items-center gap-1.5">
   229→   229→          <Radio className="h-4 w-4 text-fuchsia-400" />
   230→   230→          深空信标
   231→   231→        </h3>
   232→   232→        <div className="flex items-center gap-1 text-[10px] text-muted-foreground/70">
   233→   233→          <Clock className="h-3 w-3" />
   234→   234→          次日重置
   235→   235→          <span className="font-mono text-fuchsia-300/90">{dayCountdown}</span>
   236→   236→        </div>
   237→   237→      </div>
   238→   238→
   239→   239→      {/* 每日挑战卡片 */}
   240→   240→      <div
   241→   241→        className="relative rounded-xl border p-3 overflow-hidden"
   242→   242→        style={{
   243→   243→          borderColor: `${diffMeta.color}55`,
   244→   244→          background: `linear-gradient(135deg, ${diffMeta.color}1f, rgba(0,0,0,0.45))`,
   245→   245→          animation: isCompleted ? "none" : "beacon-glow 3s ease-in-out infinite",
   246→   246→        }}
   247→   247→      >
   248→   248→        {/* 背景装饰：脉冲环 */}
   249→   249→        {!isCompleted && (
   250→   250→          <>
   251→   251→            <div
   252→   252→              className="absolute top-4 right-4 h-10 w-10 rounded-full pointer-events-none"
   253→   253→              style={{
   254→   254→                border: `1.5px solid ${diffMeta.color}`,
   255→   255→                animation: "beacon-pulse-ring 2.5s ease-out infinite",
   256→   256→              }}
   257→   257→            />
   258→   258→            <div
   259→   259→              className="absolute top-4 right-4 h-10 w-10 rounded-full pointer-events-none"
   260→   260→              style={{
   261→   261→                border: `1.5px solid ${diffMeta.color}`,
   262→   262→                animation: "beacon-pulse-ring 2.5s ease-out infinite 1.25s",
   263→   263→              }}
   264→   264→            />
   265→   265→          </>
   266→   266→        )}
   267→   267→
   268→   268→        <div className="relative">
   269→   269→          {/* 难度 + 类型 标签 */}
   270→   270→          <div className="flex items-center gap-1.5 mb-2">
   271→   271→            <span
   272→   272→              className="text-[10px] font-mono px-1.5 py-0.5 rounded flex items-center gap-1"
   273→   273→              style={{ background: `${diffMeta.color}22`, color: diffMeta.color, border: `1px solid ${diffMeta.color}55` }}
   274→   274→            >
   275→   275→              <span>{diffMeta.icon}</span>
   276→   276→              {diffMeta.label}
   277→   277→            </span>
   278→   278→            <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-white/5 text-muted-foreground border border-white/10">
   279→   279→              {typeMeta.icon} {typeMeta.label}
   280→   280→            </span>
   281→   281→            {isCompleted && (
   282→   282→              <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 flex items-center gap-1">
   283→   283→                <Sparkles className="h-2.5 w-2.5" /> 已完成
   284→   284→              </span>
   285→   285→            )}
   286→   286→          </div>
   287→   287→
   288→   288→          {/* 挑战标题 */}
   289→   289→          <h4 className="text-sm font-semibold mb-1" style={{ color: diffMeta.color, textShadow: `0 0 10px ${diffMeta.glow}` }}>
   290→   290→            {challenge.title}
   291→   291→          </h4>
   292→   292→          <p className="text-[11px] text-muted-foreground/80 leading-relaxed mb-2.5">
   293→   293→            {challenge.desc}
   294→   294→          </p>
   295→   295→
   296→   296→          {/* 进度条 */}
   297→   297→          <div className="mb-2">
   298→   298→            <div className="flex items-center justify-between mb-1">
   299→   299→              <span className="text-[10px] text-muted-foreground/70">进度</span>
   300→   300→              <span className="text-[11px] font-mono font-semibold" style={{ color: diffMeta.color }}>
   301→   301→                {Math.min(progress.progress, challenge.goal)} / {challenge.goal} {typeMeta.unit}
   302→   302→              </span>
   303→   303→            </div>
   304→   304→            <Progress
   305→   305→              value={pct}
   306→   306→              className="h-2 bg-black/40"
   307→   307→              style={{
   308→   308→                ["--progress-color" as string]: diffMeta.color,
   309→   309→              }}
   310→   310→            />
   311→   311→          </div>
   312→   312→
   313→   313→          {/* 奖励 + 领取按钮 */}
   314→   314→          <div className="flex items-center justify-between gap-2">
   315→   315→            <div className="flex items-center gap-2 text-[10px]">
   316→   316→              <span className="text-muted-foreground/60">奖励：</span>
   317→   317→              {challenge.rewardInsight > 0 && (
   318→   318→                <span className="text-amber-300 font-mono">+{formatNum(challenge.rewardInsight)}洞见</span>
   319→   319→              )}
   320→   320→              <span className="text-fuchsia-300 font-mono">+{challenge.rewardContact.toFixed(1)}接触</span>
   321→   321→            </div>
   322→   322→            <Button
   323→   323→              onClick={handleClaimDaily}
   324→   324→              disabled={!canClaim}
   325→   325→              size="sm"
   326→   326→              className="h-7 px-3 text-[11px] border-0"
   327→   327→              style={{
   328→   328→                background: canClaim
   329→   329→                  ? `linear-gradient(90deg, ${diffMeta.color}, ${diffMeta.color}cc)`
   330→   330→                  : `${diffMeta.color}1a`,
   331→   331→                color: canClaim ? "#022c22" : `${diffMeta.color}99`,
   332→   332→              }}
   333→   333→            >
   334→   334→              {isClaimed ? "已领取" : canClaim ? "领取奖励" : isCompleted ? "已领取" : "进行中…"}
   335→   335→            </Button>
   336→   336→          </div>
   337→   337→
   338→   338→          {/* 完成时长 */}
   339→   339→          {isCompleted && progress.durationSec > 0 && (
   340→   340→            <div className="mt-1.5 text-[10px] text-muted-foreground/50 text-center">
   341→   341→              完成用时 {Math.floor(progress.durationSec / 60)}分{progress.durationSec % 60}秒
   342→   342→            </div>
   343→   343→          )}
   344→   344→        </div>
   345→   345→      </div>
   346→   346→
   347→   347→      {/* 周挑战 + 信标链（桌面端并排，移动端单列） */}
   348→   348→      <div className="grid grid-cols-1 lg:grid-cols-2 gap-2.5">
   349→   349→        {/* ===== 周挑战卡片（fuchsia 主题） ===== */}
   350→   350→        <div
   351→   351→          className="relative rounded-xl border p-3 overflow-hidden"
   352→   352→          style={{
   353→   353→            borderColor: "rgba(232,121,249,0.4)",
   354→   354→            background: `linear-gradient(135deg, rgba(232,121,249,0.12), rgba(0,0,0,0.45))`,
   355→   355→            animation: wCompleted ? "none" : "weekly-glow 3.5s ease-in-out infinite",
   356→   356→          }}
   357→   357→        >
   358→   358→          {/* 头部：标题 + weekKey + 倒计时 */}
   359→   359→          <div className="flex items-center justify-between mb-2">
   360→   360→            <div className="flex items-center gap-1.5">
   361→   361→              <Zap className="h-3.5 w-3.5 text-fuchsia-400" />
   362→   362→              <span className="text-xs font-semibold text-fuchsia-200">
   363→   363→                周挑战 · WEEKLY
   364→   364→              </span>
   365→   365→            </div>
   366→   366→            <div className="flex items-center gap-1 text-[9px] text-muted-foreground/70">
   367→   367→              <span className="font-mono text-fuchsia-300/80">
   368→   368→                {weeklyChallenge.weekKey}
   369→   369→              </span>
   370→   370→              <Clock className="h-2.5 w-2.5" />
   371→   371→              <span className="font-mono text-fuchsia-300/90">{weekCountdown}</span>
   372→   372→            </div>
   373→   373→          </div>
   374→   374→
   375→   375→          {/* 难度 + 类型 标签 */}
   376→   376→          <div className="flex items-center gap-1.5 mb-2">
   377→   377→            <span
   378→   378→              className="text-[10px] font-mono px-1.5 py-0.5 rounded flex items-center gap-1"
   379→   379→              style={{ background: `${wDiffMeta.color}22`, color: wDiffMeta.color, border: `1px solid ${wDiffMeta.color}55` }}
   380→   380→            >
   381→   381→              <span>{wDiffMeta.icon}</span>
   382→   382→              {wDiffMeta.label}
   383→   383→            </span>
   384→   384→            <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-white/5 text-muted-foreground border border-white/10">
   385→   385→              {wTypeMeta.icon} {wTypeMeta.label}
   386→   386→            </span>
   387→   387→            {wCompleted && (
   388→   388→              <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 flex items-center gap-1">
   389→   389→                <Sparkles className="h-2.5 w-2.5" /> 已完成
   390→   390→              </span>
   391→   391→            )}
   392→   392→          </div>
   393→   393→
   394→   394→          {/* 标题 */}
   395→   395→          <h4
   396→   396→            className="text-sm font-semibold mb-1"
   397→   397→            style={{ color: wDiffMeta.color, textShadow: `0 0 10px ${wDiffMeta.glow}` }}
   398→   398→          >
   399→   399→            {weeklyChallenge.title}
   400→   400→          </h4>
   401→   401→          <p className="text-[10px] text-muted-foreground/80 leading-relaxed mb-2">
   402→   402→            {weeklyChallenge.desc}
   403→   403→          </p>
   404→   404→
   405→   405→          {/* 进度条 */}
   406→   406→          <div className="mb-2">
   407→   407→            <div className="flex items-center justify-between mb-1">
   408→   408→              <span className="text-[10px] text-muted-foreground/70">进度</span>
   409→   409→              <span className="text-[11px] font-mono font-semibold" style={{ color: wDiffMeta.color }}>
   410→   410→                {Math.min(weeklyProgress.progress, weeklyChallenge.goal)} / {weeklyChallenge.goal} {wTypeMeta.unit}
   411→   411→              </span>
   412→   412→            </div>
   413→   413→            <Progress
   414→   414→              value={wPct}
   415→   415→              className="h-2 bg-black/40"
   416→   416→              style={{
   417→   417→                ["--progress-color" as string]: wDiffMeta.color,
   418→   418→              }}
   419→   419→            />
   420→   420→          </div>
   421→   421→
   422→   422→          {/* 奖励 + 领取按钮 */}
   423→   423→          <div className="flex items-center justify-between gap-2">
   424→   424→            <div className="flex items-center gap-1.5 text-[10px]">
   425→   425→              <span className="text-muted-foreground/60">奖励：</span>
   426→   426→              {weeklyChallenge.rewardInsight > 0 && (
   427→   427→                <span className="text-amber-300 font-mono">
   428→   428→                  +{formatNum(weeklyChallenge.rewardInsight)}洞见
   429→   429→                </span>
   430→   430→              )}
   431→   431→              <span className="text-fuchsia-300 font-mono">
   432→   432→                +{weeklyChallenge.rewardContact.toFixed(1)}接触
   433→   433→              </span>
   434→   434→            </div>
   435→   435→            <Button
   436→   436→              onClick={handleClaimWeekly}
   437→   437→              disabled={!wCanClaim}
   438→   438→              size="sm"
   439→   439→              className="h-7 px-3 text-[11px] border-0"
   440→   440→              style={{
   441→   441→                background: wCanClaim
   442→   442→                  ? `linear-gradient(90deg, #34d399, #34d399cc)`
   443→   443→                  : "rgba(232,121,249,0.10)",
   444→   444→                color: wCanClaim
   445→   445→                  ? "#022c22"
   446→   446→                  : "rgba(232,121,249,0.55)",
   447→   447→              }}
   448→   448→            >
   449→   449→              {wClaimed
   450→   450→                ? "已领取"
   451→   451→                : wCanClaim
   452→   452→                ? "领取奖励"
   453→   453→                : wCompleted
   454→   454→                ? "已领取"
   455→   455→                : "进行中…"}
   456→   456→            </Button>
   457→   457→          </div>
   458→   458→
   459→   459→          {wCompleted && weeklyProgress.durationSec > 0 && (
   460→   460→            <div className="mt-1.5 text-[10px] text-muted-foreground/50 text-center">
   461→   461→              完成用时 {Math.floor(weeklyProgress.durationSec / 60)}分{weeklyProgress.durationSec % 60}秒
   462→   462→            </div>
   463→   463→          )}
   464→   464→        </div>
   465→   465→
   466→   466→        {/* ===== 信标链卡片（amber→rose 渐变） ===== */}
   467→   467→        <div
   468→   468→          className="relative rounded-xl border p-3 overflow-hidden"
   469→   469→          style={{
   470→   470→            borderColor: "rgba(251,191,36,0.35)",
   471→   471→            background: `linear-gradient(135deg, rgba(251,191,36,0.10), rgba(251,113,133,0.10), rgba(0,0,0,0.4))`,
   472→   472→          }}
   473→   473→        >
   474→   474→          {/* 头部：标题 + 当前连续天数 */}
   475→   475→          <div className="flex items-center justify-between mb-2">
   476→   476→            <div className="flex items-center gap-1.5">
   477→   477→              <Link2 className="h-3.5 w-3.5 text-amber-400" />
   478→   478→              <span className="text-xs font-semibold text-amber-200">
   479→   479→                信标链 · CHAIN
   480→   480→              </span>
   481→   481→            </div>
   482→   482→            <div className="flex items-baseline gap-1">
   483→   483→              <Flame className="h-3 w-3 text-rose-400" />
   484→   484→              <span className="text-[10px] text-muted-foreground/60">连续</span>
   485→   485→              <span className="chain-streak-text text-2xl font-bold font-mono leading-none">
   486→   486→                {chainState.currentStreak}
   487→   487→              </span>
   488→   488→              <span className="text-[10px] text-muted-foreground/60">天</span>
   489→   489→            </div>
   490→   490→          </div>
   491→   491→
   492→   492→          {/* 今日完成状态 */}
   493→   493→          <div className="mb-2 flex items-center justify-between">
   494→   494→            <span className="text-[10px] text-muted-foreground/70">
   495→   495→              {completedToday
   496→   496→                ? "今日已贡献"
   497→   497→                : "今日尚未完成日挑战"}
   498→   498→            </span>
   499→   499→            <span
   500→   500→              className={`text-[10px] font-mono px-1.5 py-0.5 rounded border ${
   501→   501→                completedToday
   502→   502→                  ? "bg-emerald-500/15 text-emerald-300 border-emerald-500/30"
   503→   503→                  : "bg-white/5 text-muted-foreground/70 border-white/10"
   504→   504→              }`}
   505→   505→            >
   506→   506→              {completedToday ? "✓ 已记录" : "○ 待完成"}
   507→   507→            </span>
   508→   508→          </div>
   509→   509→
   510→   510→          {/* 4 个里程碑节点横向排列 */}
   511→   511→          <div className="flex items-center justify-between mb-2 relative">
   512→   512→            {/* 节点之间的连线（背景灰） */}
   513→   513→            <div className="absolute top-6 left-[12.5%] right-[12.5%] h-[2px] bg-white/10" />
   514→   514→            {/* 已达成部分高亮（基于 prev→next 插值） */}
   515→   515→            {(() => {
   516→   516→              // 节点圆心水平位置（百分比）
   517→   517→              const MILESTONE_POS: Record<number, number> = {
   518→   518→                0: 12.5,
   519→   519→                3: 12.5,
   520→   520→                7: 37.5,
   521→   521→                14: 62.5,
   522→   522→                30: 87.5,
   523→   523→              };
   524→   524→              const prevPos =
   525→   525→                MILESTONE_POS[chainProgress.prev] ?? 12.5;
   526→   526→              const nextPos =
   527→   527→                chainProgress.next !== null
   528→   528→                  ? MILESTONE_POS[chainProgress.next] ?? 87.5
   529→   529→                  : 87.5;
   530→   530→              const pct = chainProgress.progressPct / 100;
   531→   531→              const activeEndPos = prevPos + (nextPos - prevPos) * pct;
   532→   532→              const widthPct = Math.max(0, activeEndPos - 12.5);
   533→   533→              if (widthPct <= 0) return null;
   534→   534→              return (
   535→   535→                <div
   536→   536→                  className="absolute top-6 h-[2px]"
   537→   537→                  style={{
   538→   538→                    left: "12.5%",
   539→   539→                    width: `${widthPct}%`,
   540→   540→                    background:
   541→   541→                      "linear-gradient(90deg, #fbbf24, #fb7185)",
   542→   542→                    boxShadow: "0 0 8px rgba(251,113,133,0.5)",
   543→   543→                  }}
   544→   544→                />
   545→   545→              );
   546→   546→            })()}
   547→   547→
   548→   548→            {BEACON_CHAIN_MILESTONES.map((m) => {
   549→   549→              const reward = BEACON_CHAIN_REWARDS.find((r) => r.milestone === m);
   550→   550→              const claimed = chainState.milestonesClaimed.includes(m);
   551→   551→              const reachable =
   552→   552→                chainState.currentStreak >= m && !claimed;
   553→   553→              const inProgress = chainState.currentStreak > 0 && nextMilestone === m;
   554→   554→              // 节点配色
   555→   555→              let nodeBg = "rgba(255,255,255,0.05)";
   556→   556→              let nodeBorder = "rgba(255,255,255,0.15)";
   557→   557→              let textColor = "rgba(255,255,255,0.4)";
   558→   558→              if (claimed) {
   559→   559→                nodeBg = "rgba(52,211,153,0.25)";
   560→   560→                nodeBorder = "#34d399";
   561→   561→                textColor = "#34d399";
   562→   562→              } else if (reachable) {
   563→   563→                nodeBg = "rgba(251,113,133,0.20)";
   564→   564→                nodeBorder = "#fb7185";
   565→   565→                textColor = "#fb7185";
   566→   566→              } else if (inProgress) {
   567→   567→                nodeBg = "rgba(251,191,36,0.20)";
   568→   568→                nodeBorder = "#fbbf24";
   569→   569→                textColor = "#fbbf24";
   570→   570→              }
   571→   571→
   572→   572→              return (
   573→   573→                <div
   574→   574→                  key={m}
   575→   575→                  className="flex flex-col items-center gap-1 z-10 flex-1"
   576→   576→                >
   577→   577→                  <div
   578→   578→                    className={`w-12 h-12 rounded-full flex items-center justify-center font-mono font-bold text-sm border-2 ${
   579→   579→                      reachable ? "chain-milestone-reachable" : ""
   580→   580→                    }`}
   581→   581→                    style={{
   582→   582→                      background: nodeBg,
   583→   583→                      borderColor: nodeBorder,
   584→   584→                      color: textColor,
   585→   585→                    }}
   586→   586→                  >
   587→   587→                    {claimed ? (
   588→   588→                      <Sparkles className="h-4 w-4" />
   589→   589→                    ) : (
   590→   590→                      m
   591→   591→                    )}
   592→   592→                  </div>
   593→   593→                  <span
   594→   594→                    className="text-[9px] text-center leading-tight"
   595→   595→                    style={{ color: textColor }}
   596→   596→                  >
   597→   597→                    {reward?.label}
   598→   598→                  </span>
   599→   599→                  {claimed ? (
   600→   600→                    <span className="text-[9px] text-emerald-400/80 font-mono">
   601→   601→                      已领
   602→   602→                    </span>
   603→   603→                  ) : reachable ? (
   604→   604→                    <Button
   605→   605→                      onClick={() => handleClaimChain(m)}
   606→   606→                      size="sm"
   607→   607→                      className="h-5 px-2 text-[9px] py-0 border-0"
   608→   608→                      style={{
   609→   609→                        background:
   610→   610→                          "linear-gradient(90deg, #fb7185, #f43f5e)",
   611→   611→                        color: "#1c0608",
   612→   612→                      }}
   613→   613→                    >
   614→   614→                      领取
   615→   615→                    </Button>
   616→   616→                  ) : (
   617→   617→                    <span className="text-[9px] text-muted-foreground/40 font-mono">
   618→   618→                      +{reward?.rewardInsight}洞
   619→   619→                    </span>
   620→   620→                  )}
   621→   621→                </div>
   622→   622→              );
   623→   623→            })}
   624→   624→          </div>
   625→   625→
   626→   626→          {/* 进度条 */}
   627→   627→          <div className="mb-2">
   628→   628→            <div className="flex items-center justify-between mb-1">
   629→   629→              <span className="text-[10px] text-muted-foreground/70">
   630→   630→                {chainProgress.next === null
   631→   631→                  ? "已通关全部里程碑"
   632→   632→                  : `下一目标：${chainProgress.next} 天`}
   633→   633→              </span>
   634→   634→              <span className="text-[10px] font-mono text-amber-300">
   635→   635→                {chainProgress.current}
   636→   636→                {chainProgress.next !== null && ` / ${chainProgress.next}`} 天
   637→   637→              </span>
   638→   638→            </div>
   639→   639→            <Progress
   640→   640→              value={chainProgress.progressPct}
   641→   641→              className="h-1.5 bg-black/40"
   642→   642→              style={{
   643→   643→                ["--progress-color" as string]: "#fbbf24",
   644→   644→              }}
   645→   645→            />
   646→   646→          </div>
   647→   647→
   648→   648→          {/* 底部统计 */}
   649→   649→          <div className="flex items-center justify-between gap-2 text-[10px]">
   650→   650→            <div className="flex items-center gap-2">
   651→   651→              <span className="text-muted-foreground/60">最长</span>
   652→   652→              <span className="font-mono text-amber-300">
   653→   653→                {chainState.longestStreak}天
   654→   654→              </span>
   655→   655→            </div>
   656→   656→            <div className="flex items-center gap-2">
   657→   657→              <span className="text-muted-foreground/60">累计</span>
   658→   658→              <span className="font-mono text-rose-300">
   659→   659→                {chainState.totalCompletions}次
   660→   660→              </span>
   661→   661→            </div>
   662→   662→            <div className="flex items-center gap-1">
   663→   663→              <span className="text-muted-foreground/60">续命</span>
   664→   664→              {chainState.graceUsed >= 1 ? (
   665→   665→                <span className="font-mono text-rose-400/80">已用</span>
   666→   666→              ) : (
   667→   667→                <span className="font-mono text-emerald-400/80">可用</span>
   668→   668→              )}
   669→   669→            </div>
   670→   670→          </div>
   671→   671→        </div>
   672→   672→      </div>
   673→   673→
   674→   674→      {/* 本地排行榜 */}
   675→   675→      <div className="rounded-xl border border-white/10 bg-black/30 p-2.5">
   676→   676→        <div className="flex items-center gap-1.5 mb-2">
   677→   677→          <Trophy className="h-3.5 w-3.5 text-amber-400" />
   678→   678→          <span className="text-xs font-semibold">深空排行榜</span>
   679→   679→          <span className="text-[10px] text-muted-foreground/50">本地 · Top {leaderboard.length || 0}</span>
   680→   680→        </div>
   681→   681→
   682→   682→        {leaderboard.length === 0 ? (
   683→   683→          <div className="text-center py-4 text-[11px] text-muted-foreground/40">
   684→   684→            <Trophy className="h-6 w-6 mx-auto mb-1 opacity-30" />
   685→   685→            尚无记录。完成今日或本周信标即可登榜。
   686→   686→          </div>
   687→   687→        ) : (
   688→   688→          <div className="space-y-0.5 max-h-[180px] overflow-y-auto echo-scroll">
   689→   689→            {leaderboard.map((entry, i) => {
   690→   690→              const rb = rankBadge(i);
   691→   691→              const eDiff = BEACON_DIFFICULTY[entry.difficulty];
   692→   692→              const eType = BEACON_TYPE_META[entry.challenge as BeaconChallengeType];
   693→   693→              const isMine = entry.dateKey === getTodayKey() || entry.dateKey === getWeekKey();
   694→   694→              return (
   695→   695→                <div
   696→   696→                  key={`${entry.timestamp}-${i}`}
   697→   697→                  className={`flex items-center gap-2 px-2 py-1 rounded-lg text-[11px] ${
   698→   698→                    entry.isWeekly
   699→   699→                      ? "bg-fuchsia-500/10 border border-fuchsia-500/20"
   700→   700→                      : isMine
   701→   701→                      ? "bg-fuchsia-500/10 border border-fuchsia-500/20"
   702→   702→                      : "hover:bg-white/5"
   703→   703→                  }`}
   704→   704→                >
   705→   705→                  {/* 排名 */}
   706→   706→                  <span className="w-6 flex items-center justify-center">
   707→   707→                    {rb ? (
   708→   708→                      <rb.icon className="h-3.5 w-3.5" style={{ color: rb.color }} />
   709→   709→                    ) : (
   710→   710→                      <span className="text-muted-foreground/50 font-mono">{i + 1}</span>
   711→   711→                    )}
   712→   712→                  </span>
   713→   713→                  {/* 类型 + 难度 + 周挑战标记 */}
   714→   714→                  <span className="flex items-center gap-1 flex-1 min-w-0">
   715→   715→                    <span style={{ color: eDiff.color }} className="font-mono">{eDiff.icon}</span>
   716→   716→                    <span className="text-muted-foreground/80 truncate">{eType.label}</span>
   717→   717→                    {entry.isWeekly && (
   718→   718→                      <span className="text-[9px] font-mono px-1 rounded bg-fuchsia-500/20 text-fuchsia-300 border border-fuchsia-500/40">
   719→   719→                        WEEK
   720→   720→                      </span>
   721→   721→                    )}
   722→   722→                    {entry.progress >= 1 && <span className="text-emerald-400/70">✓</span>}
   723→   723→                  </span>
   724→   724→                  {/* 用时 */}
   725→   725→                  <span className="text-muted-foreground/50 font-mono text-[10px] w-16 text-right">
   726→   726→                    {Math.floor(entry.durationSec / 60)}m{entry.durationSec % 60}s
   727→   727→                  </span>
   728→   728→                  {/* 分数 */}
   729→   729→                  <span className="font-mono font-semibold w-12 text-right" style={{ color: eDiff.color }}>
   730→   730→                    {formatNum(entry.score)}
   731→   731→                  </span>
   732→   732→                </div>
   733→   733→              );
   734→   734→            })}
   735→   735→          </div>
   736→   736→        )}
   737→   737→      </div>
   738→   738→
   739→   739→      {/* 难度图例 */}
   740→   740→      <div className="flex items-center justify-center gap-3 text-[9px] text-muted-foreground/50">
   741→   741→        {DIFFICULTY_ORDER.map((d) => {
   742→   742→          const m = BEACON_DIFFICULTY[d];
   743→   743→          return (
   744→   744→            <span key={d} className="flex items-center gap-1">
   745→   745→              <span style={{ color: m.color }}>{m.icon}</span>
   746→   746→              {m.label} ×{m.mult}
   747→   747→            </span>
   748→   748→          );
   749→   749→        })}
   750→   750→      </div>
   751→   751→    </div>
   752→   752→  );
   753→   753→}
   754→   754→