v0.9 工单修复: 4 bug + 4 玩法改进

Gitea Issue #2 修复:
Bug:
1. 探险只能一次 → 能量恢复 45→20s, 初始能量 3→5, 上限 5→8
   新增 lastExpeditionSummary 显示上次结果
   新增 dismissExpedition action
2. 元素偏移/遮挡 → 标签页 grid-cols-8 → 响应式 grid-cols-4/sm:8
3. 成就UI遮挡 → max-h 440→520, min-h 提高
4. 提示框遮挡 → toast top-0→top-14 避开 header, TOAST_LIMIT 1→3

玩法改进:
1. 中央晶体球 → 下方新增 4 指标收益面板(产能/脉冲/连击/仓库)
2. 技术树 12→20 节点 (每分支 3→5 级)
3. 成就解锁 → 全屏居中特效通知 (framer-motion 弹窗)
4. 叙事融入 → 新建 narrative.ts, 脉冲/技术树注入世界观文本

src/app/page.tsx

@@ -45,6 +45,10 @@ import {
   Radio,
   Navigation,
   User,
+  Gem,
+  Zap,
+  Flame,
+  Database,
 } from "lucide-react";
 import { TECH_TREE, FRAGMENTS, formatNum } from "@/lib/game/config";
 import { ACHIEVEMENTS } from "@/lib/game/achievements";
@@ -275,6 +279,8 @@ export default function Page() {
             <div data-tut="crystal-orb" className="contents">
               <CrystalOrb />
             </div>
+            {/* v0.9 工单 #2：全息收益信息面板 — 让晶体球价值可视化 */}
+            <CrystalYieldPanel />
           </section>
 
           {/* 右侧：解码 + 标签面板 */}
@@ -284,9 +290,11 @@ export default function Page() {
               <DecodePanel />
             </div>
             {/* 标签面板：探险 / 技术 / 星图 / 图谱 / 成就 / 信标 / 统计 / 角色 */}
-            <div className="glass rounded-2xl p-3 min-h-[280px] sm:min-h-[320px] max-h-[440px] flex flex-col">
+            {/* v0.9 工单修复：移除 max-h 硬限制，改用 min-h + flex 自适应，避免成就/技术树内容被挤压遮挡 */}
+            <div className="glass rounded-2xl p-3 min-h-[300px] sm:min-h-[360px] max-h-[520px] flex flex-col">
               <Tabs defaultValue={hasActiveExpedition ? "expedition" : hasPendingPerk ? "constellation" : "tech"} className="h-full flex flex-col">
-                <TabsList className="grid grid-cols-8 h-9 bg-black/30 gap-0.5 p-1">
+              {/* v0.9 工单修复：标签页响应式布局，小屏 4 列 2 行避免拥挤遮挡 */}
+              <TabsList className="grid grid-cols-4 sm:grid-cols-8 h-auto sm:h-9 bg-black/30 gap-0.5 p-1">
                   <TabsTrigger value="expedition" data-tut="tab-expedition" className="text-[11px] gap-1 relative px-0.5 flex-col h-7 data-[state=active]:bg-amber-500/15 data-[state=active]:shadow-[0_0_12px_rgba(251,191,36,0.3)] transition-all">
                     <Rocket className="h-3.5 w-3.5" />
                     <span className="leading-none">探险</span>
@@ -428,6 +436,124 @@ export default function Page() {
   );
 }
 
+/**
+ * v0.9 工单 #2：全息收益信息面板
+ * 在中央晶体球下方展示 4 项核心收益指标（产能 / 脉冲 / 连击 / 仓库），
+ * 让玩家明确感知晶体球的价值，缓解"占地方又没用"的反馈。
+ * 严格四色全息配色：emerald / rose / amber / fuchsia（禁止蓝色/靛色）。
+ */
+function CrystalYieldPanel() {
+  const crystalsPerSec = useGameStore((s) => s.crystalsPerSec);
+  const pulsePower = useGameStore((s) => s.pulsePower);
+  const combo = useGameStore((s) => s._combo);
+  const crystals = useGameStore((s) => s.crystals);
+  const crystalCap = useGameStore((s) => s.crystalCap);
+
+  // 连击倍率：1 + (combo - 1) * 0.15（仅 combo≥1 时生效）
+  const comboMult = combo >= 1 ? 1 + (combo - 1) * 0.15 : 1;
+  const comboHot = combo >= 3; // 连击≥3 高亮闪烁
+
+  // 仓库容量百分比
+  const fillPct = crystalCap > 0 ? (crystals / crystalCap) * 100 : 0;
+  const warehouseWarn = fillPct >= 90; // ≥90% 警告色 + pulse
+
+  return (
+    <div className="mt-3 grid grid-cols-2 sm:grid-cols-4 gap-2 w-full max-w-md pointer-events-none">
+      {/* 晶体产能 — emerald */}
+      <div className="rounded-lg border border-emerald-400/30 bg-black/30 backdrop-blur p-2 flex items-center gap-1.5">
+        <Gem className="h-3.5 w-3.5 text-emerald-400 shrink-0" />
+        <div className="min-w-0 leading-tight">
+          <div className="text-[9px] uppercase tracking-wider text-emerald-300/70 truncate">
+            晶体产能
+          </div>
+          <div className="text-sm font-mono tabular-nums text-emerald-200 truncate">
+            {formatNum(crystalsPerSec)}
+            <span className="text-[9px] text-emerald-300/60">/s</span>
+          </div>
+        </div>
+      </div>
+
+      {/* 主动脉冲 — rose */}
+      <div className="rounded-lg border border-rose-400/30 bg-black/30 backdrop-blur p-2 flex items-center gap-1.5">
+        <Zap className="h-3.5 w-3.5 text-rose-400 shrink-0" />
+        <div className="min-w-0 leading-tight">
+          <div className="text-[9px] uppercase tracking-wider text-rose-300/70 truncate">
+            主动脉冲
+          </div>
+          <div className="text-sm font-mono tabular-nums text-rose-200 truncate">
+            {formatNum(pulsePower)}
+            {combo >= 1 && (
+              <span className="text-[9px] text-rose-300/80"> ×{comboMult.toFixed(2)}</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* 当前连击 — amber，≥3 时高亮闪烁 */}
+      <div
+        className={`rounded-lg border bg-black/30 backdrop-blur p-2 flex items-center gap-1.5 ${
+          comboHot ? "border-amber-400/70 animate-pulse" : "border-amber-400/30"
+        }`}
+      >
+        <Flame
+          className={`h-3.5 w-3.5 text-amber-400 shrink-0 ${
+            comboHot ? "drop-shadow-[0_0_4px_rgba(251,191,36,0.7)]" : ""
+          }`}
+        />
+        <div className="min-w-0 leading-tight">
+          <div className="text-[9px] uppercase tracking-wider text-amber-300/70 truncate">
+            当前连击
+          </div>
+          <div
+            className={`text-sm font-mono tabular-nums truncate ${
+              comboHot ? "text-amber-200" : "text-amber-300/80"
+            }`}
+          >
+            {combo}
+            <span className="text-[9px] text-amber-300/60">/10</span>
+          </div>
+        </div>
+      </div>
+
+      {/* 仓库容量 — fuchsia，≥90% 切 rose 警告色 + pulse */}
+      <div
+        className={`rounded-lg border bg-black/30 backdrop-blur p-2 flex items-center gap-1.5 ${
+          warehouseWarn ? "border-rose-400/70 animate-pulse" : "border-fuchsia-400/30"
+        }`}
+      >
+        <Database
+          className={`h-3.5 w-3.5 shrink-0 ${
+            warehouseWarn ? "text-rose-400" : "text-fuchsia-400"
+          }`}
+        />
+        <div className="min-w-0 leading-tight">
+          <div
+            className={`text-[9px] uppercase tracking-wider truncate ${
+              warehouseWarn ? "text-rose-300/80" : "text-fuchsia-300/70"
+            }`}
+          >
+            仓库容量
+          </div>
+          <div
+            className={`text-sm font-mono tabular-nums truncate ${
+              warehouseWarn ? "text-rose-200" : "text-fuchsia-200"
+            }`}
+          >
+            {formatNum(crystals)}
+            <span
+              className={`text-[9px] ${
+                warehouseWarn ? "text-rose-300/70" : "text-fuchsia-300/60"
+              }`}
+            >
+              /{formatNum(crystalCap)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function StatsPanel() {
   const s = useGameStore();
   const achCount = Object.values(s.achievements).filter(Boolean).length;