v0.15: 叙事深化 + 放置平衡 + UX 增强

- loreLayers 多层碎片文本（8 碎片 × 2 层 = 16 层深层叙事，5 条暗线交织） - 永久加成 softcap（≤30 全额 / 30-100 ×0.5 / >100 ×0.25，防滚雪球） - 批量领取全部工程 + 工程完成 toast 通知 - StatsPanel 独立组件 + idle 统计行（永久加成/完成工程/产出晶体/历史） - Codex 分层渲染（L0 emerald 表层 / L1 amber 隐秘注脚 / L2 fuchsia 深层回响） - 修复 v0.14 双重计算 bug（idleTotalPerSec） - 严格 4 色全息，lint 零错误，agent-browser 端到端验证通过
2026-06-24 12:32:56 +00:00
parent 20dc1f252f
commit 96748d726f
14 changed files with 1168 additions and 2338 deletions
@@ -1,25 +1,131 @@
 "use client";
-// 回响星核 / Echo Nexus — 记忆图谱（碎片叙事）
-import { useState } from "react";
-import { useGameStore, FRAGMENTS } from "@/store/gameStore";
-import { nextFragmentThreshold } from "@/store/gameStore";
+// 回响星核 / Echo Nexus — 记忆图谱（碎片叙事 + v0.15 多层文本）
+import { useState, useMemo } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useGameStore, FRAGMENTS, nextFragmentThreshold } from "@/store/gameStore";
+import { isLoreLayerUnlocked } from "@/lib/game/config";
 import { Card } from "@/components/ui/card";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { BookOpen, Lock, Sparkles } from "lucide-react";
-import type { Fragment } from "@/lib/game/types";
+import type { Fragment, FragmentLoreLayer } from "@/lib/game/types";

 const ERA_NAMES = ["", "寂灭前夜", "谐振纪", "飞升潮", "回响纪", "接触纪"];

+/** 锁定层用的乱码占位文本（视觉上像被加密的全息碎片） */
+const LOCKED_PLACEHOLDER =
+  "▓░▒░ ▓▒░▒▓ ░▒▓░ ▒▓░▒░ ▓▒░ ▓░▒░▒ ░▒▓░▒ ▓░▒ ░▒▓░ ▒▓░▒▓░ ▓▒░░▒▓ ░▒▓ ▓░▒▒░ ▓▒░▓░▒ ░▒▓░ ▒▓░▒░ ▓▒░ ░▒▓░";
+
+/** 渲染单层叙事文本（已解锁 / 未解锁两态）。L1=amber / L2=fuchsia */
+function LoreLayerBlock({
+  layer,
+  unlocked,
+}: {
+  layer: FragmentLoreLayer;
+  unlocked: boolean;
+}) {
+  const isL1 = layer.layer === 1;
+  const accentText = isL1 ? "text-amber-300" : "text-fuchsia-300";
+  const accentBorder = isL1 ? "border-amber-400/30" : "border-fuchsia-400/30";
+  const accentBg = isL1 ? "bg-amber-950/20" : "bg-fuchsia-950/20";
+  const accentBody = isL1 ? "text-amber-50/90" : "text-fuchsia-50/90";
+  const accentChipBg = isL1 ? "bg-amber-500/15" : "bg-fuchsia-500/15";
+  const accentChipText = isL1 ? "text-amber-300" : "text-fuchsia-300";
+  const layerTag = isL1 ? "L1" : "L2";
+
+  return (
+    <div
+      className={`rounded-lg border ${
+        unlocked ? accentBorder : "border-white/5"
+      } ${unlocked ? accentBg : "bg-black/20"} p-3`}
+    >
+      <div className="flex items-center justify-between mb-2 gap-2">
+        <div className="flex items-center gap-1.5 min-w-0">
+          <span
+            className={`text-[9px] font-mono px-1.5 py-0.5 rounded shrink-0 ${
+              unlocked ? `${accentChipBg} ${accentChipText}` : "bg-white/5 text-muted-foreground/60"
+            }`}
+          >
+            {layerTag}
+          </span>
+          <span
+            className={`text-[11px] font-semibold truncate ${
+              unlocked ? accentText : "text-muted-foreground/70"
+            }`}
+          >
+            {unlocked ? layer.title : "???"}
+          </span>
+        </div>
+        {!unlocked && (
+          <span className="flex items-center gap-1 text-[10px] text-amber-200/50 shrink-0">
+            <Lock className="h-2.5 w-2.5" />
+            <span className="font-mono hidden xs:inline sm:inline">{layer.unlockHint}</span>
+          </span>
+        )}
+      </div>
+
+      {unlocked ? (
+        <p className={`text-[12px] leading-relaxed italic ${accentBody}`}>
+          「{layer.text}」
+        </p>
+      ) : (
+        <p
+          className="text-[12px] leading-relaxed blur-sm select-none text-muted-foreground/40 pointer-events-none"
+          aria-hidden="true"
+        >
+          「{LOCKED_PLACEHOLDER}」
+        </p>
+      )}
+
+      {!unlocked && (
+        <div className="mt-2 pt-2 border-t border-white/5 text-[10px] text-amber-200/50">
+          <span className="font-mono">🔒 {layer.unlockHint}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function Codex() {
-  const fragments = useGameStore((s) => s.fragments);
-  const totalDecoded = useGameStore((s) => s.totalDecoded);
+  // useShallow 一次性订阅所有判定所需的 state 切片
+  const { fragments, totalDecoded, ascensions, contact, bossKills } = useGameStore(
+    useShallow((s) => ({
+      fragments: s.fragments,
+      totalDecoded: s.totalDecoded,
+      ascensions: s.ascensions,
+      contact: s.contact,
+      bossKills: s.bossKills,
+    })),
+  );
  const nextThreshold = nextFragmentThreshold(totalDecoded);
  const [selected, setSelected] = useState<Fragment | null>(null);

  // v0.1 只展示第一纪元
-  const era1 = FRAGMENTS.filter((f) => f.era === 1);
+  const era1 = useMemo(() => FRAGMENTS.filter((f) => f.era === 1), []);
  const unlockedCount = era1.filter((f) => fragments[f.id]).length;

+  // 用于判定解锁的快照对象（结构匹配 isLoreLayerUnlocked 的 Pick）
+  const stateSnapshot = {
+    ascensions,
+    totalDecoded,
+    contact,
+    fragments,
+    bossKills,
+  };
+
+  // 深层叙事统计：所有 loreLayer 中已解锁数 / 总数
+  const loreStats = useMemo(() => {
+    let total = 0;
+    let unlocked = 0;
+    for (const f of era1) {
+      if (!f.loreLayers) continue;
+      for (const layer of f.loreLayers) {
+        total += 1;
+        if (isLoreLayerUnlocked(layer.unlock, stateSnapshot)) unlocked += 1;
+      }
+    }
+    return { total, unlocked };
+  }, [era1, ascensions, totalDecoded, contact, fragments, bossKills]);
+
  return (
    <div className="flex flex-col gap-2 h-full">
      <div className="flex items-center justify-between">
@@ -32,6 +138,16 @@ export function Codex() {
        </span>
      </div>

+      {/* v0.15 深层叙事统计 */}
+      <div className="flex items-center justify-between text-[10px] px-1">
+        <span className="text-muted-foreground/80">深层叙事</span>
+        <span className="font-mono">
+          <span className="text-amber-300">{loreStats.unlocked}</span>
+          <span className="text-muted-foreground/60"> / {loreStats.total} </span>
+          <span className="text-muted-foreground/60">已解锁</span>
+        </span>
+      </div>
+
      {nextThreshold && (
        <div className="text-[10px] text-muted-foreground/80 px-1">
          再解码 <span className="text-fuchsia-300 font-mono">{nextThreshold - totalDecoded}</span> 颗 → 下一个碎片
@@ -42,6 +158,17 @@ export function Codex() {
        <div className="grid grid-cols-2 gap-2 pr-2">
          {era1.map((f, i) => {
            const unlocked = !!fragments[f.id];
+            // 计算此碎片 L1 / L2 解锁状态（用于标题旁标记）
+            const l1Layer = f.loreLayers?.find((l) => l.layer === 1);
+            const l2Layer = f.loreLayers?.find((l) => l.layer === 2);
+            const l1Unlocked = l1Layer
+              ? isLoreLayerUnlocked(l1Layer.unlock, stateSnapshot)
+              : false;
+            const l2Unlocked = l2Layer
+              ? isLoreLayerUnlocked(l2Layer.unlock, stateSnapshot)
+              : false;
+            const hasDeepUnlocked = l1Unlocked || l2Unlocked;
+
            return (
              <button
                key={f.id}
@@ -69,7 +196,22 @@ export function Codex() {
                {unlocked ? (
                  <>
                    <div className="absolute -top-3 -right-3 h-12 w-12 rounded-full bg-fuchsia-500/20 blur-xl" />
-                    <Sparkles className="h-3 w-3 text-fuchsia-300 mb-1" />
+                    <div className="flex items-center gap-1 mb-1">
+                      <Sparkles className="h-3 w-3 text-fuchsia-300" />
+                      {hasDeepUnlocked && (
+                        <span
+                          className="flex items-center gap-0.5"
+                          title="此碎片含已解锁的深层文本"
+                        >
+                          {l1Unlocked && (
+                            <span className="inline-block h-1.5 w-1.5 rounded-full bg-amber-400 shadow-[0_0_4px_rgba(251,191,36,0.8)]" />
+                          )}
+                          {l2Unlocked && (
+                            <span className="inline-block h-1.5 w-1.5 rounded-full bg-fuchsia-400 shadow-[0_0_4px_rgba(232,121,249,0.8)]" />
+                          )}
+                        </span>
+                      )}
+                    </div>
                    <div className="text-[11px] font-semibold text-fuchsia-100 leading-tight">
                      {f.title}
                    </div>
@@ -91,14 +233,14 @@ export function Codex() {
        </div>
      </ScrollArea>

-      {/* 详情弹层 */}
+      {/* 详情弹层 — v0.15 分层渲染 */}
      {selected && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm"
          onClick={() => setSelected(null)}
        >
          <Card
-            className="max-w-md w-full p-5 bg-gradient-to-br from-fuchsia-950/60 to-black/80 border-fuchsia-400/40"
+            className="max-w-md w-full max-h-[88vh] overflow-y-auto p-5 bg-gradient-to-br from-fuchsia-950/40 to-black/80 border-fuchsia-400/40 [scrollbar-width:thin] [scrollbar-color:rgba(232,121,249,0.4)_transparent]"
            onClick={(e) => e.stopPropagation()}
            style={{ boxShadow: "0 0 40px rgba(232,121,249,0.25)" }}
          >
@@ -108,15 +250,52 @@ export function Codex() {
                第 {selected.era} 纪元 · {ERA_NAMES[selected.era] || ""}
              </span>
            </div>
-            <h4 className="text-lg font-bold text-fuchsia-100 mb-3">
+            <h4 className="text-lg font-bold text-fuchsia-100 mb-4">
              {selected.title}
            </h4>
-            <p className="text-sm text-foreground/90 leading-relaxed italic">
-              「{selected.echo}」
-            </p>
+
+            {/* L0 表层回响（永远显示，emerald 主题） */}
+            <div className="rounded-lg border border-emerald-400/30 bg-emerald-950/20 p-3 mb-3">
+              <div className="flex items-center gap-1.5 mb-2">
+                <span className="text-[9px] font-mono px-1.5 py-0.5 rounded bg-emerald-500/15 text-emerald-300">
+                  L0
+                </span>
+                <span className="text-[11px] font-semibold text-emerald-300">
+                  表层回响
+                </span>
+              </div>
+              <p className="text-[12px] leading-relaxed italic text-emerald-50/90">
+                「{selected.echo}」
+              </p>
+            </div>
+
+            {/* L1 / L2 深层叙事（条件渲染，按 layer 升序） */}
+            {selected.loreLayers
+              ?.slice()
+              .sort((a, b) => a.layer - b.layer)
+              .map((layer) => {
+                const unlocked = isLoreLayerUnlocked(layer.unlock, stateSnapshot);
+                return (
+                  <div
+                    key={`${selected.id}-L${layer.layer}`}
+                    className="mt-3 first:mt-0"
+                  >
+                    <div className="border-t border-white/5 mb-3" />
+                    <LoreLayerBlock layer={layer} unlocked={unlocked} />
+                  </div>
+                );
+              })}
+
+            {/* 若该碎片没有 loreLayers */}
+            {!selected.loreLayers?.length && (
+              <div className="mt-4 pt-3 border-t border-white/5 text-[10px] text-muted-foreground/50 italic">
+                此碎片暂无更深层叙事。
+              </div>
+            )}
+
            <button
              onClick={() => setSelected(null)}
-              className="mt-4 text-xs text-muted-foreground hover:text-foreground transition"
+              className="mt-5 text-xs text-muted-foreground hover:text-foreground transition"
            >
              关闭
            </button>
@@ -1,6 +1,7 @@
 "use client";
 // 回响星核 / Echo Nexus — v0.14 放置系统面板（主「放置」标签内容）
-import { useEffect, useMemo, useState } from "react";
+// v0.15：永久加成 softcap 展示 + 批量领取按钮
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { useGameStore } from "@/store/gameStore";
 import { Card } from "@/components/ui/card";
@@ -21,6 +22,7 @@ import {
  formatReward,
  isIdleProjectUnlocked,
 } from "@/lib/game/idle";
+import { applyIdleSoftcap } from "@/lib/game/engine";
 import { formatNum, OFFLINE_CAP_HOURS } from "@/lib/game/config";
 import type { IdleProjectDef, IdleProjectSlot } from "@/lib/game/types";

@@ -51,6 +53,8 @@ export function IdleOperationsPanel() {
  const startIdleProject = useGameStore((s) => s.startIdleProject);
  const cancelIdleProject = useGameStore((s) => s.cancelIdleProject);
  const claimIdleProject = useGameStore((s) => s.claimIdleProject);
+  // v0.15：批量领取全部已完成工程
+  const claimAllIdleProjects = useGameStore((s) => s.claimAllIdleProjects);

  // 本地 now 状态，每秒刷新倒计时
  const [now, setNow] = useState(() => Date.now());
@@ -71,7 +75,12 @@ export function IdleOperationsPanel() {
  );

  const totalOutput = fleet.reduce((sum, f) => sum + f.outputPerSec, 0);
-  const idleTotalPerSec = crystalsPerSec + idlePermanentBonus;
+  // v0.15：softcap 有效/原始永久加成
+  const rawPermBonus = idlePermanentBonus;
+  const effectivePermBonus = applyIdleSoftcap(rawPermBonus);
+  const isSoftcapped = effectivePermBonus < rawPermBonus;
+  // crystalsPerSec 已包含 softcap 后的永久加成（recomputeStats 已应用）
+  const idleTotalPerSec = crystalsPerSec;

  // 当前已运行/已完成的工程 id 集合（用于禁用"派遣"按钮）
  const runningProjectIds = useMemo(() => {
@@ -82,6 +91,12 @@ export function IdleOperationsPanel() {
    return set;
  }, [idleProjectSlots]);

+  // v0.15：可领取工程数量（用于"领取全部"按钮显示）
+  const claimableCount = useMemo(
+    () => idleProjectSlots.filter((s) => s !== null && s.completed).length,
+    [idleProjectSlots]
+  );
+
  return (
    <div className={`max-h-[520px] overflow-y-auto pr-1 ${SCROLLBAR_CLS} space-y-3`}>
      {/* ====== Section 1: 放置收益概览 ====== */}
@@ -103,9 +118,16 @@ export function IdleOperationsPanel() {
          />
          <StatTile
            label="永久加成"
-            value={`+${formatNum(idlePermanentBonus)}/s`}
+            value={`+${formatNum(effectivePermBonus)}/s`}
            color="fuchsia"
            icon="✦"
+            sub={
+              isSoftcapped ? (
+                <span className="text-[9px] text-amber-300/90 leading-tight mt-0.5 block">
+                  有效 +{formatNum(effectivePermBonus)}/s（原始 +{formatNum(rawPermBonus)}/s · 衰减中）
+                </span>
+              ) : null
+            }
          />
          <StatTile
            label="完成工程"
@@ -192,9 +214,23 @@ export function IdleOperationsPanel() {
          <h3 className="text-[11px] font-semibold text-fuchsia-300 tracking-wide flex items-center gap-1">
            <span className="text-sm">⚙</span> 放置工程槽位
          </h3>
-          <span className="text-[10px] text-muted-foreground/70 font-mono">
-            {idleProjectSlots.filter((s) => s !== null).length} / {IDLE_SLOT_COUNT}
-          </span>
+          <div className="flex items-center gap-1.5">
+            <span className="text-[10px] text-muted-foreground/70 font-mono">
+              {idleProjectSlots.filter((s) => s !== null).length} / {IDLE_SLOT_COUNT}
+            </span>
+            {/* v0.15：批量领取全部已完成工程（仅当有可领取项时显示） */}
+            {claimableCount > 0 && (
+              <Button
+                size="sm"
+                onClick={claimAllIdleProjects}
+                className="h-5 px-2 text-[10px] gap-0.5 bg-emerald-500/15 border border-emerald-400/40 text-emerald-200 hover:bg-emerald-500/25 hover:text-emerald-100"
+                title={`批量领取 ${claimableCount} 项已完成工程`}
+              >
+                <span className="text-[11px] leading-none">✓</span>
+                领取全部
+              </Button>
+            )}
+          </div>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-1.5">
          {idleProjectSlots.map((slot, i) => (
@@ -281,11 +317,14 @@ function StatTile({
  value,
  color,
  icon,
+  sub,
 }: {
  label: string;
  value: string;
  color: keyof typeof IDLE_COLOR_CLASSES;
  icon: string;
+  /** v0.15: 可选的副文本（如 softcap 提示），渲染在 value 下方 */
+  sub?: ReactNode;
 }) {
  const c = IDLE_COLOR_CLASSES[color];
  return (
@@ -297,6 +336,7 @@ function StatTile({
      <div className={`text-[13px] font-mono font-bold ${c.text} mt-0.5`}>
        {value}
      </div>
+      {sub}
    </div>
  );
 }
@@ -0,0 +1,111 @@
+"use client";
+// 回响星核 / Echo Nexus — 统计面板（v0.15 从 page.tsx 抽出为独立组件，useShallow 订阅）
+import { useEffect, useState } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useGameStore } from "@/store/gameStore";
+import { TECH_TREE, FRAGMENTS, formatNum } from "@/lib/game/config";
+import { ACHIEVEMENTS } from "@/lib/game/achievements";
+import { CONSTELLATION_PERKS } from "@/lib/game/constellation";
+import { loadLeaderboard } from "@/lib/game/beacon";
+
+/**
+ * 统计面板 — 综合统计 + 放置系统（idle）行。
+ * v0.15 重构：从 page.tsx 内联函数抽出为独立组件，使用 useShallow 精细订阅避免 re-render。
+ * 新增「放置工程历史」行：idleProjectHistory.length 条记录（最近 50 条，跨周目）。
+ */
+export function StatsPanel() {
+  // 使用 useShallow 一次性订阅所有渲染所需字段，避免整个 store 变化触发 re-render
+  const s = useGameStore(
+    useShallow((st) => ({
+      totalDecoded: st.totalDecoded,
+      ascensions: st.ascensions,
+      blueprintsLen: st.blueprints?.length ?? 0,
+      techCount: Object.values(st.tech ?? {}).filter((v) => v > 0).length,
+      fragmentsCount: Object.values(st.fragments ?? {}).filter(Boolean).length,
+      achievementsCount: Object.values(st.achievements ?? {}).filter(Boolean)
+        .length,
+      constellationLen: st.constellation?.length ?? 0,
+      contact: st.contact,
+      crystalsPerSec: st.crystalsPerSec,
+      crystalCap: st.crystalCap,
+      insightMult: st.insightMult,
+      totalExpeditions: st.totalExpeditions,
+      bossKills: st.bossKills ?? 0,
+      starTidesCount: (st.starTidesEncountered ?? []).length,
+      chronicleLen: (st.chronicle ?? []).length,
+      energy: st.energy,
+      energyMax: st.energyMax,
+      exploration: st.attributes?.exploration ?? 0,
+      wisdom: st.attributes?.wisdom ?? 0,
+      courage: st.attributes?.courage ?? 0,
+      inspiration: st.attributes?.inspiration ?? 0,
+      pendingAttrPoints: st.pendingAttrPoints ?? 0,
+      idlePermanentBonus: st.idlePermanentBonus ?? 0,
+      idleProjectsCompleted: st.idleStats?.projectsCompleted ?? 0,
+      idleCrystalsFromIdle: st.idleStats?.crystalsFromIdle ?? 0,
+      idleHistoryLen: (st.idleProjectHistory ?? []).length,
+    }))
+  );
+
+  // 深空信标本地排行榜最高分（独立 localStorage）
+  const [beaconBest, setBeaconBest] = useState<number | null>(null);
+  useEffect(() => {
+    try {
+      const lb = loadLeaderboard();
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setBeaconBest(lb.length > 0 ? lb[0].score : null);
+    } catch {
+      setBeaconBest(null);
+    }
+  }, []);
+
+  const rows: { label: string; value: string }[] = [
+    { label: "累计解码晶体", value: `${s.totalDecoded} 颗` },
+    { label: "飞升周目", value: `${s.ascensions}` },
+    { label: "持有蓝图", value: `${s.blueprintsLen} / 6` },
+    { label: "已学技术", value: `${s.techCount} / ${TECH_TREE.length}` },
+    { label: "已获碎片", value: `${s.fragmentsCount} / ${FRAGMENTS.length}` },
+    { label: "已解锁成就", value: `${s.achievementsCount} / ${ACHIEVEMENTS.length}` },
+    {
+      label: "星图天赋",
+      value: `${s.constellationLen} / ${CONSTELLATION_PERKS.length}`,
+    },
+    { label: "接触进度", value: `${s.contact.toFixed(1)}%` },
+    { label: "晶体产能", value: `${s.crystalsPerSec.toFixed(2)} /s` },
+    { label: "仓库上限", value: `${formatNum(s.crystalCap)}` },
+    { label: "洞见倍率", value: `×${s.insightMult.toFixed(2)}` },
+    { label: "累计探险", value: `${s.totalExpeditions} 次` },
+    { label: "BOSS 击破", value: `${s.bossKills} 次` },
+    { label: "星潮亲历", value: `${s.starTidesCount} / 6` },
+    { label: "编年史条目", value: `${s.chronicleLen} 纪元` },
+    { label: "探险能量", value: `${Math.floor(s.energy)} / ${s.energyMax}` },
+    {
+      label: "信标最高分",
+      value: beaconBest !== null ? formatNum(beaconBest) : "—",
+    },
+    { label: "探索力", value: `${s.exploration} / 100` },
+    { label: "智慧", value: `${s.wisdom} / 100` },
+    { label: "勇气", value: `${s.courage} / 100` },
+    { label: "灵感", value: `${s.inspiration} / 100` },
+    { label: "待分配属性点", value: `${s.pendingAttrPoints}` },
+    // === 放置系统（v0.14 + v0.15）===
+    { label: "放置永久加成", value: `+${formatNum(s.idlePermanentBonus)} /s` },
+    { label: "完成放置工程", value: `${s.idleProjectsCompleted} 项` },
+    { label: "放置产出晶体", value: formatNum(s.idleCrystalsFromIdle) },
+    { label: "放置工程历史", value: `${s.idleHistoryLen} 条` },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 gap-1.5 text-xs">
+      {rows.map((r) => (
+        <div
+          key={r.label}
+          className="flex items-center justify-between rounded-md bg-black/25 border border-white/5 px-2 py-1.5"
+        >
+          <span className="text-muted-foreground">{r.label}</span>
+          <span className="font-mono text-foreground">{r.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}