Gold Price Monitor (黄金价格监控悬浮窗)

一个基于 Electron + Vue 3 + TypeScript 开发的轻量级桌面悬浮窗应用，用于实时显示国际黄金价格。

✨ 功能特性

• 🪟 桌面悬浮窗：120x80 像素的小巧窗口，始终置顶显示
• 🎨 透明无边框：现代化的半透明设计，毛玻璃效果
• 🖱️ 可拖动：通过鼠标拖动调整窗口位置
• 📊 实时更新：每秒自动刷新金价数据
• 💹 涨跌显示：直观的涨跌幅和百分比展示
• 📍 系统托盘：最小化到系统托盘，不占用任务栏
• 🚀 开机自启：可选择开机自动启动（可在托盘菜单中配置）

🛠 技术栈

• 主框架：Electron 28
• 前端框架：Vue 3 (组合式 API)
• 开发语言：TypeScript
• 构建工具：Vite + electron-vite
• 打包工具：electron-builder

📂 项目结构

gold-monitor/
├── src/
│   ├── main/               # Electron 主进程
│   │   └── main.ts         # 主窗口、托盘、自启动逻辑
│   ├── preload/            # 预加载脚本
│   │   └── index.ts
│   ├── renderer/           # Vue 前端代码
│   │   ├── App.vue         # 主界面组件
│   │   ├── main.ts         # Vue 入口
│   │   └── style.css       # 全局样式
│   └── api/
│       └── gold.ts         # 金价 API (模拟数据)
├── public/
│   └── icon.svg            # 应用图标
├── electron.vite.config.ts # Electron 构建配置
├── package.json
└── tsconfig.json

🚀 快速开始

安装依赖

npm install

开发模式

npm run dev

构建应用

npm run build

打包为可执行文件

npm run dist

打包后的安装程序位于 release 目录。

💡 使用说明

1. 启动应用：运行后会在桌面显示一个悬浮窗
2. 拖动窗口：鼠标按住窗口任意位置拖动
3. 系统托盘：
   • 单击托盘图标：显示/隐藏窗口
   • 右键托盘图标：打开菜单
     • 显示：显示窗口
     • 隐藏：隐藏窗口
     • 开机自启：切换开机自启动
     • 退出：关闭应用
4. 关闭窗口：点击窗口关闭按钮会隐藏到托盘，不会退出程序

🎨 界面预览

悬浮窗显示内容：

• 当前金价（如：472.50）
• 涨跌金额和百分比（如：+1.20 (+0.26%)）
• 红色表示上涨，红色绿色表示下跌

📝 开发说明

模拟 API

当前使用模拟 API (src/api/gold.ts)，返回随机波动的金价数据。

如需接入真实 API，请修改 fetchGoldPrice 函数：

export async function fetchGoldPrice(): Promise<GoldPriceData> {
  const response = await fetch('https://your-api-endpoint.com/gold-price')
  const data = await response.json()
  return {
    price: data.price,
    change: data.change,
    changePercent: data.changePercent
  }
}

自定义样式

修改 src/renderer/App.vue 中的 <style> 部分可以自定义窗口外观。

调整更新频率

在 src/renderer/App.vue 的 onMounted 中修改定时器间隔：

// 每秒更新改为每 5 秒更新
intervalId = window.setInterval(updatePrice, 5000)

📦 打包配置

打包配置在 package.json 的 build 字段中：

• 输出目录：release/
• 支持平台：Windows (x64)
• 安装方式：NSIS 安装程序
• 支持自定义安装路径

🔧 故障排除

遇到问题？ 请查看 故障排除指南 获取详细帮助。

常见问题：

• ❓ npm run dev 无法启动
• ❓ 看不到应用窗口
• ❓ HTTP ERROR 404
• ❓ 托盘图标不显示

快速检查

如果应用无法启动，请先尝试：

# 重新安装依赖
npm install

# 启动开发模式
npm run dev

注意：应用启动后会显示一个小悬浮窗（200x60 像素）在屏幕左上角，同时在系统托盘（任务栏右下角）显示图标。

图标不显示

如果托盘图标不显示，请确保：

1. public/icon.svg 文件存在
2. 将 SVG 转换为 PNG 格式（推荐 256x256）
3. 更新 src/main/main.ts 中的图标路径

窗口无法拖动

确保 CSS 中包含：

-webkit-app-region: drag;

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！