受 Chrome OS 启发的作品集：美感与功能的完美融合
Source: Dev.to
大家好！我是 Depa Panjie，一名拥有 7 年以上专业“破坏”经验（随后再修复）的软件质量保证工程师。
实时演示：
下面嵌入的预览尺寸有限。若想获得完整的桌面体验（包括可拖动窗口、多个应用以及所有交互功能），请在新标签页中打开链接。此作品集针对宽度超过 768 px 的屏幕进行优化。
你即将体验的内容
这不是一个典型的作品集。这是一个受 Chrome OS 启发的全功能桌面，完全在你的浏览器中运行：
- 🪟 像真实操作系统一样拖动、最小化、最大化窗口
- 📁 Files App – 通过惊艳的玻璃拟态设计浏览我的个人简介
- 🌐 Browser App – 在带标签的 Chrome‑style 浏览器中浏览我的项目
- 💻 Terminal App – 在交互式 CLI 中查看我的技术栈
- 📄 Docs App – 在 Google Docs‑style 界面中查看我的简历
- ✉️ Mail App – 通过 Gmail‑inspired 界面与我联系
- 🌓 Dark Mode – 使用 Material You 颜色实现流畅的主题切换
- 🎯 Interactive Tour – 如同游戏教程般的引导式入门
- 📱 Smart Mobile Detection – 为移动用户提供精美的阻止屏幕
小技巧： 打开多个应用，随意拖动，并切换暗黑模式，体验奇妙的满足感。
技术栈
前端魔法
├── React 18 + TypeScript
├── Vite (lightning‑fast builds)
├── Pure CSS (no frameworks)
└── Lucide React (beautiful icons)AI 超能力
├── Antigravity (AI pair programmer)
└── Gemini 3 Pro (the brain)部署
├── Docker (multi‑stage builds)
├── Nginx (serving with style)
├── Google Cloud Run (serverless)
└── Cloud Build (auto‑deploy from GitHub)开发阶段
第1阶段 – 基础
目标： 构建窗口管理系统。
结果： 基于 React Context 的架构，具备 z‑index 管理、拖拽处理程序和状态持久化。
第2阶段 – 应用
创建了五个完整的应用：
- Files – 玻璃拟态卡片
- Browser – 标签页管理
- Terminal – 命令历史
- Docs – Google 风格工具栏
- Mail – 表单验证
每个应用都在 Gemini 的建议下，采用最佳模式和最佳实践进行构建。
第3阶段 – 打磨
问题： 暗模式文字难以阅读。
解决方案： 采用蓝色调的玻璃拟态设计并确保合适的对比度，最终在 Files 应用中呈现出 “Who am I?” 卡片。
第4阶段 – 导览系统
将 Driver.js 与事件驱动的面板管理集成，生成一个完整的导览循环，能够自动关闭面板。
第5阶段 – 移动策略
实现了移动设备检测，显示礼貌的阻止屏幕，以在更大的设备上保留桌面操作系统的体验。
第6阶段 – 云部署
提供了 Dockerfile、Nginx 配置和带 CI/CD 的 Cloud Run 设置。
工作流：GitHub Push → Cloud Build → Container Registry → Cloud Run → Live!
与 Antigravity & Gemini 一起工作
永不疲倦 – 即时建议最佳实践。
捕获错误 – 在它们发生之前。
解释概念 – 清晰简明。
迭代 – 以思维的速度。
实际案例
当我说“Files 应用需要更好的暗模式配色”时，Gemini 不仅仅是更改颜色；它提出了完整的设计系统：
- 玻璃拟态背景
- 合适的对比度比例
- 背景模糊效果
- 一致的间距
- 可访问的配色组合
这就是由 AI 驱动的设计思维。
功能亮点
- 同时打开 5 个应用
- 拖动、最小化、恢复和最大化窗口
- 会话中切换暗模式
- 引导式导览入门
- 通过 Mail 应用联系
/* Glassmorphic card style */
background: rgba(138, 180, 248, 0.08);
border: 2px solid rgba(138, 180, 248, 0.2);
backdrop-filter: blur(10px);在暗模式下 UI 如 Chrome OS 梦境般发光！
附加行为：
- 首次访问自动启动
- 智能面板关闭
- 完整流程：登录 → 桌面 → 注销
- 在移动设备上跳过
- 可从快速设置重新启动
- 拖拽定位、z‑index 层叠、焦点管理
- 最小化/最大化动画，状态持久化
零停机，自动扩展，默认 HTTPS——全部由 AI 助手配置。
要点
这个项目展示了 AI 并没有取代开发者，而是 supercharging 了他们。Gemini 帮助我：
- 编写更简洁的代码
- 做出更好的设计决策
- 提前捕获边缘情况
- 优化性能
- 专业部署
祝您探索受 Chrome OS 启发的作品集时玩得开心！