d9404a31-1970-4e79-ac9a-f4f9db60350b

2026-06-23 12:47:49 +00:00
parent e193530f24
commit f73b96026c
101 changed files with 12685 additions and 2 deletions
@@ -0,0 +1,98 @@
+"use client";
+// 回响星核 / Echo Nexus — 顶栏资源栏
+import { useGameStore } from "@/store/gameStore";
+import { formatNum, PRESTIGE } from "@/lib/game/config";
+import { Gem, Lightbulb, Waves, RotateCcw } from "lucide-react";
+import { Progress } from "@/components/ui/progress";
+
+export function ResourceBar({ onPrestige }: { onPrestige: () => void }) {
+  const crystals = useGameStore((s) => s.crystals);
+  const crystalsPerSec = useGameStore((s) => s.crystalsPerSec);
+  const insights = useGameStore((s) => s.insights);
+  const contact = useGameStore((s) => s.contact);
+  const ascensions = useGameStore((s) => s.ascensions);
+  const blueprints = useGameStore((s) => s.blueprints);
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 sm:gap-3 px-3 py-2.5 rounded-2xl border border-white/10 bg-black/40 backdrop-blur-md">
+      {/* 晶体 */}
+      <Stat
+        icon={<Gem className="h-4 w-4 text-emerald-400" />}
+        label="记忆晶体"
+        value={formatNum(crystals)}
+        sub={`+${crystalsPerSec.toFixed(1)}/s`}
+        glow="rgba(52,211,153,0.4)"
+      />
+      <div className="h-8 w-px bg-white/10 hidden sm:block" />
+      {/* 洞见 */}
+      <Stat
+        icon={<Lightbulb className="h-4 w-4 text-amber-400" />}
+        label="技术洞见"
+        value={formatNum(insights)}
+        sub="解码产出"
+        glow="rgba(251,191,36,0.4)"
+      />
+      <div className="h-8 w-px bg-white/10 hidden sm:block" />
+      {/* 接触进度 */}
+      <div className="flex-1 min-w-[180px] flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <Waves className="h-4 w-4 text-fuchsia-400" />
+          <span className="text-xs text-muted-foreground">接触进度</span>
+          <span className="text-xs font-mono font-semibold text-fuchsia-300 ml-auto">
+            {contact.toFixed(1)}%
+          </span>
+          {contact >= 100 && (
+            <button
+              onClick={onPrestige}
+              className="text-[10px] px-2 py-0.5 rounded-full bg-fuchsia-500/20 border border-fuchsia-400/50 text-fuchsia-200 hover:bg-fuchsia-500/30 transition animate-pulse"
+            >
+              飞升
+            </button>
+          )}
+        </div>
+        <Progress
+          value={contact}
+          className="h-1.5 bg-white/10 [&>div]:bg-gradient-to-r [&>div]:from-fuchsia-500 [&>div]:to-rose-400"
+        />
+      </div>
+      <div className="h-8 w-px bg-white/10 hidden sm:block" />
+      {/* 飞升 */}
+      <div className="flex items-center gap-2">
+        <RotateCcw className="h-4 w-4 text-rose-400" />
+        <div className="flex flex-col">
+          <span className="text-[10px] text-muted-foreground leading-none">飞升</span>
+          <span className="text-sm font-mono font-semibold leading-none mt-0.5">
+            {ascensions} <span className="text-amber-300 text-xs">×{blueprints.length}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Stat({
+  icon,
+  label,
+  value,
+  sub,
+  glow,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  sub: string;
+  glow: string;
+}) {
+  return (
+    <div className="flex items-center gap-2" style={{ filter: `drop-shadow(0 0 6px ${glow})` }}>
+      {icon}
+      <div className="flex flex-col">
+        <span className="text-[10px] text-muted-foreground leading-none">{label}</span>
+        <div className="flex items-baseline gap-1.5">
+          <span className="text-sm font-mono font-semibold leading-none mt-0.5">{value}</span>
+          <span className="text-[10px] text-muted-foreground/80">{sub}</span>
+        </div>
+      </div>
+    </div>
+  );
+}