🚀 一次 AI 辅助编程的实践：从零到一打造一款赛博朋克风格的域名监控工具
前言
作为一个运维多个网站的开发者，我一直需要一个简单、好用的工具来监控这些网站的在线状态。市面上虽然有很多成熟的监控服务，但它们要么需要付费，要么配置复杂，要么界面老旧。
于是我决定：用 Cursor + Gemini 3 Pro 自己写一个！
最终成果是一个完全开源、可部署在 GitHub Pages 上的纯前端监控工具 —— Domain Monitor。
🎯 项目功能一览
核心监控功能
- ✅ 批量导入监控目标 - 支持一次性导入多个 URL，自动去重
- ✅ 自动定时扫描 - 可配置扫描间隔
- ✅ 时间窗口控制 - 设置监控时段，非工作时间自动暂停
- ✅ 实时状态显示 - ONLINE / OFFLINE / PENDING 状态一目了然
- ✅ 响应时间监控 - 显示每个站点的响应延迟
- ✅ HTTP 状态码展示 - 200/304/500 等状态码清晰可见
通知与提醒
- 🔔 浏览器推送通知 - 站点异常时立即收到系统通知
- 🔔 Toast 提示 - 操作反馈即时可见
- 🔔 离线站点优先排序 - 异常状态自动置顶，第一时间发现问题
数据管理
- 💾 本地持久化存储 - 数据保存在 localStorage，刷新不丢失
- 📤 配置导入/导出 - JSON 格式，方便备份和迁移
- 🔄 单站点快速扫描 - 支持对单个站点手动触发检测
- 🔘 监控开关 - 可以暂时禁用某个站点的监控
🛠 技术栈
这个项目使用了现代化的前端技术栈：
React 19 + Vite 7 + Tailwind CSS 3
├── lucide-react # 精美的图标库
├── react-hot-toast # 优雅的通知组件
└── Web Workers # 后台定时任务
为什么选择纯前端方案？
- 零服务器成本 - 可以直接部署到 GitHub Pages
- 隐私友好 - 所有数据都保存在本地浏览器
- 即开即用 - 无需注册账号，打开网页就能用
🎨 赛博朋克风格 UI
这个项目最让我满意的就是 UI 设计了。在 Cursor 的帮助下，我实现了一个充满科技感的赛博朋克界面：
- 🌟 霓虹渐变标题 - 青色到紫色的渐变配合发光效果
- 🌟 状态发光条 - 绿色/红色/黄色侧边栏直观显示状态
- 🌟 毛玻璃效果 - backdrop-blur 打造层次感
- 🌟 微交互动画 - hover 效果、扫描动画、shimmer 特效
- 🌟 终端风格日志 - 仿命令行的系统日志显示
📝 开发过程
Step 1: 需求梳理
告诉 Cursor 我需要什么：
"我需要一个网站监控工具，可以批量添加 URL，定时检测它们是否在线，离线时发送浏览器通知。使用 React + Tailwind，风格要有科技感。"
Step 2: 架构设计
Cursor + Gemini 帮我规划了组件结构：
src/
├── App.jsx # 主应用逻辑
├── components/
│ ├── Header.jsx # 顶部导航栏
│ ├── FilterBar.jsx # 状态筛选器
│ ├── DomainCard.jsx # 单个域名卡片
│ ├── DomainList.jsx # 域名列表容器
│ ├── SettingsModal.jsx # 设置面板
│ ├── BatchImportModal.jsx # 批量导入弹窗
│ └── PermissionWarning.jsx # 权限提示
└── timerWorker.js # Web Worker 定时器
Step 3: 迭代优化
在开发过程中，我不断向 AI 提出优化需求：
- "加一个时间窗口功能，只在工作时间监控"
- "离线的站点要自动排到最前面"
- "加入配置导入导出功能"
- "优化一下卡片的视觉效果"
每一次对话，项目都在变得更好。
🚀 快速部署
本地运行
# 克隆项目
git clone https://github.com/your-username/domain-monitor.git
cd domain-monitor
# 安装依赖
npm install
# 启动开发服务器
npm run start
部署到 GitHub Pages
# 构建生产版本
npm run build
# 构建产物在 docs/ 目录，直接推送即可
git add docs/
git commit -m "Deploy to GitHub Pages"
git push
然后在仓库 Settings → Pages 中选择 docs/ 目录作为源即可。
💡 使用技巧
1. 批量导入域名
点击 ADD_TARGET 按钮，每行输入一个 URL：
https://example.com
https://mysite.org
google.com
不带协议头的会自动加上 https://。
2. 配置监控参数
- INTERVAL - 扫描间隔（秒），建议 60-300
- START HOUR - 开始监控的小时（0-23）
- END HOUR - 结束监控的小时（0-24）
支持跨午夜设置，如 22:00 到 06:00。
3. 导出备份
点击 EXPORT 可以导出 JSON 配置文件，包含所有监控目标和设置，方便备份和迁移。
🤔 AI 辅助编程心得
使用 Cursor + Gemini 3 Pro 开发这个项目，我有几点深刻体会：
优点
- 快速原型 - 从 0 到可用原型只需要几个小时
- 代码质量 - 生成的代码结构清晰，注释完整
- 创意激发 - AI 会提供很多我没想到的功能点
- 样式实现 - 复杂的 CSS 效果描述需求就能实现
需要注意的
- 明确需求 - 越具体的描述，效果越好
- 分步迭代 - 不要一次提太多需求，分步骤来
- 代码审查 - AI 生成的代码仍需人工检查
- 理解原理 - 知道代码为什么这样写，才能有效调整
🔗 项目地址
- GitHub: github.com/lilililee/d…
欢迎 Star ⭐ 和 Fork！有任何问题或建议，欢迎提 Issue。
结语
这个项目证明了：借助 AI 工具，个人开发者可以快速实现自己的想法。Cursor + Gemini 3 Pro 的组合确实让开发效率提升了一个档次。
如果你也有类似的需求，不妨 fork 这个项目，根据自己的需要进行定制。
Happy Monitoring! 🖥️✨
本文由 Cursor AI 辅助撰写，人工润色修改
