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,138 @@
+"use client";
+// 回响星核 / Echo Nexus — 技术树
+import { useGameStore } from "@/store/gameStore";
+import { TECH_TREE, TECH_BRANCH_META, formatNum } from "@/lib/game/config";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Pickaxe,
+  ScanLine,
+  Rocket,
+  BookOpen,
+  Check,
+  Lock,
+} from "lucide-react";
+import type { TechBranch } from "@/lib/game/types";
+
+const ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  Pickaxe,
+  ScanLine,
+  Rocket,
+  BookOpen,
+};
+
+const BRANCH_COLOR: Record<string, string> = {
+  mining: "#34d399",
+  decoding: "#fb7185",
+  expedition: "#fbbf24",
+  narrative: "#e879f9",
+};
+
+export function TechTree() {
+  const tech = useGameStore((s) => s.tech);
+  const insights = useGameStore((s) => s.insights);
+  const buyTech = useGameStore((s) => s.buyTech);
+
+  const branches: TechBranch[] = ["mining", "decoding", "expedition", "narrative"];
+
+  return (
+    <div className="flex flex-col gap-3 h-full">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold">技术树</h3>
+        <span className="text-xs text-muted-foreground">
+          洞见 <span className="text-amber-300 font-mono">{formatNum(insights)}</span>
+        </span>
+      </div>
+
+      <div className="flex-1 overflow-y-auto echo-scroll pr-1 space-y-3">
+        {branches.map((b) => {
+          const meta = TECH_BRANCH_META[b];
+          const Icon = ICONS[meta.icon];
+          const color = BRANCH_COLOR[b];
+          const nodes = TECH_TREE.filter((t) => t.branch === b);
+          return (
+            <div key={b}>
+              <div className="flex items-center gap-2 mb-1.5 px-1">
+                <Icon className="h-3.5 w-3.5" />
+                <span className="text-xs font-medium" style={{ color }}>
+                  {meta.name}
+                </span>
+                <span className="text-[10px] text-muted-foreground/70">
+                  {meta.desc}
+                </span>
+              </div>
+              <div className="grid gap-1.5">
+                {nodes.map((node) => {
+                  const owned = (tech[node.id] ?? 0) >= 1;
+                  const affordable = insights >= node.cost;
+                  return (
+                    <Card
+                      key={node.id}
+                      className={`p-2.5 transition-all duration-200 ${
+                        owned
+                          ? "bg-white/5 border-white/10"
+                          : affordable
+                          ? "bg-black/30 border-white/15 hover:border-white/30 cursor-pointer"
+                          : "bg-black/20 border-white/5 opacity-60"
+                      }`}
+                      style={
+                        owned
+                          ? { boxShadow: `inset 0 0 0 1px ${color}44, 0 0 12px ${color}22` }
+                          : undefined
+                      }
+                    >
+                      <div className="flex items-center gap-2">
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-1.5">
+                            <span
+                              className="text-xs font-semibold truncate"
+                              style={{ color: owned ? color : undefined }}
+                            >
+                              {node.name}
+                            </span>
+                            {owned && (
+                              <Check className="h-3 w-3" style={{ color }} />
+                            )}
+                          </div>
+                          <p className="text-[10px] text-muted-foreground/80 truncate">
+                            {node.desc}
+                          </p>
+                        </div>
+                        {!owned && (
+                          <Button
+                            size="sm"
+                            variant={affordable ? "default" : "ghost"}
+                            disabled={!affordable}
+                            onClick={() => buyTech(node.id)}
+                            className="h-7 px-2 text-[11px] shrink-0"
+                            style={
+                              affordable
+                                ? {
+                                    background: `${color}22`,
+                                    border: `1px solid ${color}66`,
+                                    color,
+                                  }
+                                : undefined
+                            }
+                          >
+                            <Lock className="h-2.5 w-2.5 mr-1" />
+                            {node.cost}
+                          </Button>
+                        )}
+                      </div>
+                    </Card>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <style jsx global>{`
+        .echo-scroll::-webkit-scrollbar { width: 5px; }
+        .echo-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
+        .echo-scroll::-webkit-scrollbar-track { background: transparent; }
+      `}</style>
+    </div>
+  );
+}