交付第三版：把完整的交互体验推上线

这一章你做了四件事：暗色模式、实时搜索、联系表单、响应式适配。

现在把这一切推上线，让所有人都能看到你的第三版作品集。

回顾这一章做了什么

在开始部署之前，先回顾一下这一章的成果：

暗色模式：用户可以根据自己的偏好切换主题，选择会被记住，刷新后不丢失。这是一个完整的"用户偏好管理"功能。

实时搜索：输入关键词，作品卡片实时过滤。这是一个完整的"前端状态管理"功能——搜索词是状态，卡片列表根据状态动态渲染。

联系表单：有验证、有反馈、有错误处理。这是一个完整的"表单交互"功能，也是后面接入真实邮件服务的基础。

响应式适配：手机、平板、桌面都好看。这是一个完整的"多端适配"功能。

这四个功能加在一起，让你的作品集从"静态展示"变成了"有交互的产品"。

第一步：本地最终检查

部署前，在本地快速过一遍：

• 切换暗色/亮色模式，确认样式正常
• 在作品页搜索框输入关键词，确认过滤正常
• 打开联系页，填写表单并提交，确认有成功反馈
• 用浏览器开发者工具切换到手机模式，确认导航菜单可以开关

发现问题就告诉 AI 修复，没问题就继续。

---

第二步：提交并推送

打开终端，在项目目录下运行：

git add .
git commit -m "feat: 暗色模式、搜索过滤、联系表单、响应式适配"
git push

或者对 AI 说：

帮我把所有改动提交并推送到 GitHub，commit message 写"feat: 暗色模式、搜索过滤、联系表单、响应式适配"

---

第三步：确认 Vercel 部署成功

推送后，打开 vercel.com，进入你的项目，等待部署完成（通常 1-2 分钟）。

部署完成后，用手机打开你的网站链接，测试一下：

• 导航菜单能正常开关
• 暗色模式切换正常
• 联系表单可以提交

---

关于 Commit Message 的规范

你可能注意到 commit message 写的是 feat: 暗色模式、搜索过滤...，这是一种叫 Conventional Commits 的规范。

常用的前缀：

• feat: 新功能
• fix: 修复 bug
• style: 样式调整（不影响功能）
• refactor: 重构（不是新功能也不是修 bug）
• docs: 文档更新

这个规范不是强制的，但养成好习惯，以后看 git 历史时能快速知道每次提交做了什么。

---

通关条件

完成以下三步即可通关：

1. 代码已推送到 GitHub
2. Vercel 部署成功（状态显示绿色）
3. 用手机访问网站，导航菜单正常工作

第三章完成！

你的作品集现在有了完整的交互体验：

• 暗色模式，照顾不同偏好的访客
• 实时搜索，让访客快速找到感兴趣的作品
• 联系表单，把访客变成合作机会
• 响应式适配，在任何设备上都好看

下一章，我们来做更有技术含量的东西——用 API 路由让网站真正"活"起来。你的作品数据将不再写死在代码里，而是存在真正的数据库里，可以随时通过后台管理页面更新。