CodeLikeDemo/views/screen-game.html

<div id="screen-game" class="screen absolute inset-0 hidden z-10">
        <!-- 桌面背景网格 -->
        <div class="absolute inset-0 bg-desktop-pattern pointer-events-none opacity-50"></div>
        <svg id="svg-connections" class="absolute inset-0 w-full h-full pointer-events-none z-[15]"></svg>

        <!-- 顶部 HUD (状态栏) -->
        <header class="absolute top-0 left-0 w-full h-16 bg-slate-900/80 backdrop-blur-md border-b border-slate-700 flex items-center justify-between px-6 z-50 shadow-lg">
            <!-- 左侧：项目信息 -->
            <div class="flex items-center gap-4 w-1/3">
                <div class="flex items-center gap-2 bg-slate-800/80 px-3 py-1.5 rounded-md border border-slate-600/50">
                    <span class="text-xs text-slate-400 uppercase font-bold tracking-wider">Sprint</span>
                    <span id="hud-sprint" class="text-lg font-bold text-white">1</span>
                </div>
                <div class="hidden xl:flex items-center gap-2 bg-slate-800/80 px-3 py-1.5 rounded-md border border-slate-600/50">
                    <span class="text-xs text-slate-400 uppercase font-bold tracking-wider">复杂度额度</span>
                    <span id="hud-capacity" class="text-sm font-mono font-bold text-cyan-300">20 / 20</span>
                </div>
                <div class="hidden xl:flex items-center gap-2 bg-slate-800/80 px-3 py-1.5 rounded-md border border-slate-600/50">
                    <span class="text-xs text-slate-400 uppercase font-bold tracking-wider">延期阶段</span>
                    <span id="hud-overdue-stage" class="text-sm font-bold text-emerald-300">正常</span>
                </div>
            </div>
            
            <!-- 中侧：挣值管理 (EVM) -->
            <div class="flex-1 flex justify-center gap-4">
                <div class="bg-slate-950/80 px-6 py-2 rounded-full border border-amber-900/50 shadow-inner flex items-center gap-3">
                    <span class="text-amber-500">📈</span>
                    <span class="text-sm text-slate-300 font-bold tracking-wide">挣值(EV):</span>
                    <span class="text-sm font-mono text-amber-400 font-bold bg-amber-900/30 px-2 py-0.5 rounded" id="hud-ev">$0 / $5000</span>
                </div>
                <div class="bg-slate-950/80 px-6 py-2 rounded-full border border-blue-900/50 shadow-inner flex items-center gap-3">
                    <span class="text-blue-500">🛡️</span>
                    <span class="text-sm text-slate-300 font-bold tracking-wide">应急储备:</span>
                    <span class="text-sm font-mono text-blue-400 font-bold bg-blue-900/30 px-2 py-0.5 rounded" id="hud-reserve">$10000</span>
                </div>
            </div>

            <!-- 右侧：核心资源与控制 (只留按钮，条移到右侧边栏) -->
            <div class="flex items-center gap-6 w-1/3 justify-end">
                <div id="hud-negative" class="hidden xl:block text-xs text-rose-200 bg-rose-950/40 px-3 py-1.5 rounded border border-rose-700/40">红卡压力：无</div>
                <div id="hud-status" class="hidden lg:block text-xs text-slate-300 bg-slate-800/80 px-3 py-1.5 rounded border border-slate-600/50">动作完成后才扣项目天数</div>
                <div class="flex gap-2 border-slate-700">
                    <button onclick="toggleRecipeModal()" class="w-8 h-8 flex items-center justify-center bg-slate-800 hover:bg-slate-700 rounded text-slate-300 border border-slate-600 transition-colors" title="图鉴/配方手册">📖</button>
                    <button class="w-8 h-8 flex items-center justify-center bg-slate-800 hover:bg-slate-700 rounded text-slate-300 border border-slate-600 transition-colors" title="暂停/继续" id="btn-pause">⏸</button>
                    <button class="w-8 h-8 flex items-center justify-center bg-slate-800 hover:bg-slate-700 rounded text-slate-300 border border-slate-600 transition-colors" title="加速 (未启用)" id="btn-fast">▶▶</button>
                </div>
            </div>
        </header>

        <!-- 右侧边栏 (竖向进度条区) -->
        <div class="absolute right-6 top-24 bottom-10 z-30 flex gap-6 pointer-events-none">
            <!-- 资金竖条 -->
            <div class="flex flex-col items-center justify-end h-full">
                <div class="text-[10px] text-slate-400 font-bold uppercase tracking-wider mb-2 bg-slate-900/80 px-2 py-1 rounded">项目资金</div>
                <div class="relative flex-1 w-6 bg-slate-800/80 border border-slate-600 rounded-full overflow-hidden shadow-inner flex flex-col justify-end">
                    <div id="hud-funds-bar" class="w-full bg-gradient-to-t from-emerald-600 to-emerald-400 transition-all duration-500 ease-out" style="height: 100%;"></div>
                </div>
                <div class="mt-2 text-center pointer-events-auto bg-slate-900/80 px-3 py-1.5 rounded-lg border border-emerald-900/50 relative">
                    <span id="hud-funds-delta" class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm font-mono font-bold text-emerald-400 opacity-0 transition-all duration-500"></span>
                    <span id="hud-funds" class="text-xl font-mono font-bold text-emerald-400 drop-shadow-[0_0_8px_rgba(52,211,153,0.4)] transition-colors duration-300">$15,000</span>
                </div>
            </div>

            <!-- 周期竖条 -->
            <div class="flex flex-col items-center justify-end h-full">
                <div class="text-[10px] text-slate-400 font-bold uppercase tracking-wider mb-2 bg-slate-900/80 px-2 py-1 rounded">迭代周期(天)</div>
                <div class="relative flex-1 w-6 bg-slate-800/80 border border-slate-600 rounded-full overflow-hidden shadow-inner flex flex-col justify-end">
                    <div id="hud-time-bar" class="w-full bg-gradient-to-t from-rose-600 to-rose-400 transition-all duration-1000 ease-linear" style="height: 100%;"></div>
                </div>
                <div class="mt-2 text-center pointer-events-auto bg-slate-900/80 px-3 py-1.5 rounded-lg border border-rose-900/50 relative">
                    <div class="text-xl font-mono font-bold text-rose-400 drop-shadow-[0_0_8px_rgba(244,63,94,0.4)]" id="hud-time">30天</div>
                </div>
            </div>
        </div>

        <!-- 桌面固定图标 (Shop & Zones) -->
        <div class="absolute inset-0 pt-20 px-6 pointer-events-none z-30 flex flex-col flex-wrap gap-6">
            <!-- 基础资源包 -->
            <button class="w-24 flex flex-col items-center pointer-events-auto group hover:-translate-y-2 transition-transform" onclick="addFunds(-100); addCard('focus', 150, 100); addCard('focus', 200, 100); renderBoard(); updateHUD();">
                <div class="w-16 h-16 bg-slate-800/80 border border-slate-600 rounded-2xl flex items-center justify-center text-4xl shadow-lg group-hover:border-blue-400 group-hover:shadow-blue-500/50">📦</div>
                <span class="text-xs font-bold mt-2 text-white drop-shadow-md text-center leading-tight">基础资源包<br><span class="text-emerald-400">$100</span></span>
            </button>
            
            <!-- 社招简历包 -->
            <button class="w-24 flex flex-col items-center pointer-events-auto group hover:-translate-y-2 transition-transform" onclick="addFunds(-1000); addCard('developer', 150, 220); renderBoard(); updateHUD();">
                <div class="w-16 h-16 bg-blue-900/80 border border-blue-700 rounded-2xl flex items-center justify-center text-4xl shadow-lg group-hover:border-blue-400 group-hover:shadow-blue-500/50">💼</div>
                <span class="text-xs font-bold mt-2 text-white drop-shadow-md text-center leading-tight">社招简历包<br><span class="text-emerald-400">$1000</span></span>
            </button>
            
            <!-- 云服务包 -->
            <button class="w-24 flex flex-col items-center pointer-events-auto group hover:-translate-y-2 transition-transform" onclick="addFunds(-500); addCard('qa', 150, 340); renderBoard(); updateHUD();">
                <div class="w-16 h-16 bg-purple-900/80 border border-purple-700 rounded-2xl flex items-center justify-center text-4xl shadow-lg group-hover:border-purple-400 group-hover:shadow-purple-500/50">☁️</div>
                <span class="text-xs font-bold mt-2 text-white drop-shadow-md text-center leading-tight">云服务包<br><span class="text-emerald-400">$500</span></span>
            </button>

            <!-- 交付打包区 -->
            <div id="delivery-zone" class="w-24 mt-auto flex flex-col items-center pointer-events-auto group">
                <div class="w-20 h-20 bg-emerald-900/40 border-2 border-dashed border-emerald-500/50 rounded-2xl flex items-center justify-center text-5xl shadow-lg group-hover:bg-emerald-800/60 group-hover:border-emerald-400 transition-colors">🚀</div>
                <span class="text-xs font-bold mt-2 text-emerald-200 drop-shadow-md text-center leading-tight bg-slate-900/80 px-2 py-1 rounded">交付模块</span>
            </div>

            <!-- 垃圾回收站 -->
            <div id="trash-zone" class="w-24 flex flex-col items-center pointer-events-auto group mb-4">
                <div class="w-20 h-20 bg-rose-950/40 border-2 border-dashed border-rose-600/50 rounded-2xl flex items-center justify-center text-5xl shadow-lg group-hover:bg-rose-900/60 group-hover:border-rose-400 transition-colors">🗑️</div>
                <span class="text-xs font-bold mt-2 text-rose-200 drop-shadow-md text-center leading-tight bg-slate-900/80 px-2 py-1 rounded">回收出售</span>
            </div>
        </div>

        <!-- 桌面交互区 (放置卡牌) -->
        <main id="desktop-board" class="w-full h-full pt-16 relative z-20">
            <svg id="svg-connections" class="absolute inset-0 w-full h-full pointer-events-none z-[15]"></svg>
            <!-- 卡牌将由 JS 动态渲染 -->
        </main>

        <!-- 卡池图鉴与配方手册 (Recipe Book Modal) -->
        <div id="recipe-modal" class="absolute inset-0 z-[100] bg-slate-900/90 backdrop-blur-md hidden flex items-center justify-center">
            <div class="bg-slate-800 border border-slate-600 rounded-2xl w-full max-w-4xl h-[600px] flex flex-col shadow-2xl overflow-hidden relative">
                <div class="p-4 border-b border-slate-700 flex justify-between items-center bg-slate-900/50">
                    <h2 class="text-xl font-bold text-white flex items-center gap-2">📖 卡池图鉴与合成说明</h2>
                    <button onclick="document.getElementById('recipe-modal').classList.add('hidden')" class="w-8 h-8 flex items-center justify-center bg-slate-700 hover:bg-rose-600 rounded text-white transition-colors">✕</button>
                </div>
                <div class="flex-1 flex overflow-hidden">
                    <!-- 左侧边栏 -->
                    <div class="w-48 border-r border-slate-700 bg-slate-900/30 p-4 flex flex-col gap-2">
                        <button class="text-left px-4 py-2 bg-blue-900/50 text-blue-200 rounded font-bold border border-blue-700">基础合成</button>
                        <button class="text-left px-4 py-2 bg-slate-800 text-slate-400 hover:text-slate-200 hover:bg-slate-700 rounded font-bold transition-colors">职场摸鱼 (未解锁)</button>
                        <button class="text-left px-4 py-2 bg-slate-800 text-slate-400 hover:text-slate-200 hover:bg-slate-700 rounded font-bold transition-colors">系统危机 (查看)</button>
                    </div>
                    <!-- 右侧内容区 -->
                    <div class="flex-1 p-6 overflow-y-auto bg-[#1e293b] flex flex-col gap-4" id="recipe-list-container">
                        <!-- JS 动态渲染配方 -->
                    </div>
                </div>
            </div>
        </div>
    </div>