我的博客“游戏大厅”搭建与同步全记录
我打算在自己的博客里加一个“游戏大厅”，经过一番折腾，最终把整个流程跑通了。我把这整个从无到有的过程，以及中间踩过的坑、救火的经验，完完整整地记下来。
📂 一、 最终确立的项目文件结构
所有游戏相关的文件，都在我的 my-blog-manager 项目里：
my-blog-manager/
├── app/
│ └── games/
│ ├── page.tsx (游戏页面的服务端骨架，定义游戏列表)
│ └── GameHub.tsx (游戏大厅的客户端组件，处理大厅与全屏逻辑)
├── components/
│ ├── Navbar.tsx (导航栏，我在这里加了“游戏”按钮)
│ ├── toolbox/
│ │ └── SnakeGame.tsx (贪吃蛇，原本在这里，后引入游戏大厅)
│ └── games/ (新建的专门存放游戏的文件夹)
│ └── Minesweeper.tsx (全新编写的扫雷游戏)
🛠️ 二、 详细操作步骤
第一步：修改导航栏，增加游戏入口
在本地 my-blog-manager/components/Navbar.tsx 里，找到 navLinks 数组，在“友链”和“关于”之间加入了
{ name: '🎮 游戏', href: '/games' }
因为我这里的手机端有旋转圆盘，它会自动识别并加入这个按钮。
第二步：搭建游戏大厅框架
我新建了 my-blog-manager/app/games/page.tsx**（服务端组件，负责定义** gameList**）和** my-blog-manager/app/games/GameHub.tsx**（客户端组件）**
在 GameHub 里，我设置了当点击卡片时，锁死页面滚动，隐藏大厅标题，留出一个居中盒子展示游戏，并提供一个“返回大厅”的按钮。
第三步：引入贪吃蛇到游戏大厅
我的贪吃蛇（components/toolbox/SnakeGame.tsx）最初是在悬浮工具箱里写的，适应窄小的 w-64 尺寸。为了能在游戏大厅用，我把最外层样式改成了 w-full aspect-square**，并给它增加了** isFullscreen 属性。
在 isFullscreen={true} 时
我加入了手机端触摸滑动，并在底部添加了虚拟十字方向键。最后在 GameHub.tsx 里用
case 'snake': return <SnakeGame isFullscreen={true} />;
把它引入进来。
第四步：编写扫雷游戏
我新建了 my-blog-manager/components/games/Minesweeper.tsx。为了防止“首次点击秒通关”，我用同步函数生成雷区，避开 React 异步状态陷阱；为了避免中高级在大屏上溢出和手机端缩得太小，我决定只保留初级（9x9，10颗雷）。电脑端我用左键挖、右键插旗；手机端则加了一个“挖雷 / 插旗”的模式切换按钮。UI 则复刻了经典 Win7 的灰色 3D 边框。
第五步：控制台代码手动落地到本地 XHBlogs（极其关键）
因为我的控制台（my-blog-manager）和本地仓库（XHBlogs）有同步白名单限制，我坚决不能盲目点“同步本地”，必须手动搬运：
- 可以直接粘贴的文件：游戏本身对应的新建文件、文件夹，比如
components/games目录、app/games/GameHub.tsx和Minesweeper.tsx等。我在本地XHBlogs建好对应文件夹，全选复制粘贴进去。 - 绝对不能直接粘贴的系统文件：比如
Navbar.tsx，因为控制台版包含了窗口控制和后台同步逻辑，而本地版是网页展示逻辑，直接覆盖会让本地崩溃。我必须打开两个文件对比，在本地XHBlogs的Navbar.tsx里，只手动敲入那行新增的
{ name: '🎮 游戏', href: '/games' } 代码。
第六步：本地构建与推送
在本地 XHBlogs 对齐完代码后，我在终端跑 npm run build，看到 ✓ Compiled successfully 且无红字后，执行 git add .、git commit、git push，等待 Vercel 变绿。
🚑 三、 终极救火指南（如果 Vercel 报错且本地没有备份）
有时候如果我大意了，直接把控制台不兼容的代码粘贴到本地，直接 push 后 Vercel 报错，而本地正确的代码又被覆盖丢了，这时只能靠 Git 救场（前提是之前的代码已经提交过）：
方案一：单文件精准恢复（我最推荐）
如果我搞砸了 Navbar.tsx 文件，我在终端输入 git log --oneline，找到最近一次正常的提交哈希值（比如 a1b2c3d），然后执行 git checkout a1b2c3d -- components/Navbar.tsx。此时本地文件瞬间回到那个版本，我再手工把“游戏”那行代码一行一行敲进去。
方案二：全项目时光机
如果我搞砸了多个文件，直接用 git log --oneline 找到正常的那次提交，执行 git reset --hard f4e3d2c。本地项目整体就回到了完美的历史时刻。注意这操作会丢弃所有未提交的修改，用的时候要谨慎。
方案三：GitHub 网页端恢复（最适合新手）
我去 GitHub 仓库网页，找到被弄坏的文件，点右上角的 History。找到上一条正常记录，把代码复制出来，回本地全删粘贴，再把“游戏”那行手动敲进去，重新打包推送。
⚠️ 四、 我总结的铁律
- 新增文件必须在本地
XHBlogs手动建好，绝不能指望控制台的“同步本地”能自动识别。 - “同步本地”按钮只适用于修改白名单里已有的文件，每次点击前务必确认本地没有新代码。
- 本地
Navbar.tsx的代码是前端网页，控制台Navbar.tsx是后台系统，这两个文件永远只互相复制代码片段，绝不整体覆盖。 - 只要管好本地
XHBlogs这个源头，代码文件及时commit，Vercel 就全绿！