Super_Z/echo-nexus
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy: v0.5.1 static export

Browse Source 
- New: Tutorial system (7-step onboarding with spotlight + action detection)
- UI: ResourceBar spacing optimization (gap, dividers, tabular-nums)
- UI: SettingsDialog adds tutorial replay + online play link
- Anim: tutorial pulse + pop-in keyframes
This commit is contained in:
Super_Z
2026-06-23 16:34:00 +00:00
parent 084387174b
commit 00a46a0bf9
12 changed files with 531 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/game/ResourceBar.tsx
+22 -19
View File
@@ -14,7 +14,7 @@ export function ResourceBar({ onPrestige }: { onPrestige: () => void }) {
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">
<div className="flex flex-wrap items-center gap-x-3 gap-y-2 sm:gap-x-4 px-3.5 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" />}
@@ -23,7 +23,7 @@ export function ResourceBar({ onPrestige }: { onPrestige: () => void }) {
sub={`+${crystalsPerSec.toFixed(1)}/s`}
glow="rgba(52,211,153,0.4)"
/>
<div className="h-8 w-px bg-white/10 hidden sm:block" />
<div className="h-9 w-px bg-gradient-to-b from-transparent via-white/15 to-transparent hidden sm:block" />
{/* 洞见 */}
<Stat
icon={<Lightbulb className="h-4 w-4 text-amber-400" />}
@@ -32,19 +32,19 @@ export function ResourceBar({ onPrestige }: { onPrestige: () => void }) {
sub="解码产出"
glow="rgba(251,191,36,0.4)"
/>
<div className="h-8 w-px bg-white/10 hidden sm:block" />
<div className="h-9 w-px bg-gradient-to-b from-transparent via-white/15 to-transparent hidden sm:block" />
{/* 接触进度 */}
<div className="flex-1 min-w-[180px] flex flex-col gap-1">
<div className="flex-1 min-w-[200px] flex flex-col gap-1.5">
<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">
<Waves className="h-4 w-4 text-fuchsia-400 shrink-0" />
<span className="text-xs text-muted-foreground whitespace-nowrap">接触进度</span>
<span className="text-xs font-mono font-semibold text-fuchsia-300 ml-auto tabular-nums">
{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"
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 whitespace-nowrap ml-1"
>
飞升
</button>
@@ -55,15 +55,18 @@ export function ResourceBar({ onPrestige }: { onPrestige: () => void }) {
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="h-9 w-px bg-gradient-to-b from-transparent via-white/15 to-transparent hidden sm:block" />
{/* 飞升 */}
<div className="flex items-center gap-2">
<RotateCcw className="h-4 w-4 text-rose-400" />
<div className="flex flex-col">
<div className="flex items-center gap-2.5">
<RotateCcw className="h-4 w-4 text-rose-400 shrink-0" />
<div className="flex flex-col gap-0.5">
<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 className="flex items-baseline gap-1.5">
<span className="text-sm font-mono font-semibold leading-none">
{ascensions}
</span>
<span className="text-amber-300 text-xs leading-none">×{blueprints.length}</span>
</div>
</div>
</div>
</div>
@@ -84,13 +87,13 @@ function Stat({
glow: string;
}) {
return (
<div className="flex items-center gap-2" style={{ filter: `drop-shadow(0 0 6px ${glow})` }}>
<div className="flex items-center gap-2.5" style={{ filter: `drop-shadow(0 0 6px ${glow})` }}>
{icon}
<div className="flex flex-col">
<div className="flex flex-col gap-0.5">
<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>
<span className="text-sm font-mono font-semibold leading-none tabular-nums">{value}</span>
<span className="text-[10px] text-muted-foreground/80 whitespace-nowrap">{sub}</span>
</div>
</div>
</div>