1. 背景 (Background)

作为一名开发者，我经常需要关注两件事：一是窗外的天气（决定待会儿出门穿什么），二是电脑的健康状态（CPU 炸了没有，内存还剩多少）。

虽然 Windows 和 macOS 都有自带的小组件，但它们的自定义程度往往不高，且风格难以统一。既然我熟悉 Web 前端技术（HTML/CSS/JS），为什么不利用 Electron 技术，自己动手编写一个轻量级、透明毛玻璃风格的桌面挂件（Widget）呢？
C:\pythoncode\new\desktop_organizer.py

2. 目标 (Goal)

本项目的核心目标是开发一个运行在桌面端的 实用工具栏 (Widget)，具体需求如下：

1. UI 交互：
   • 窗口无边框、背景半透明（毛玻璃效果）。
   • 支持鼠标拖拽移动位置。
   • 支持一键切换主题颜色（黑/蓝/紫），并自动保存用户偏好。
2. 功能模块：
   • 时钟：实时显示当前时间与日期。
   • 天气：基于 OpenWeatherMap API 获取指定城市的实时天气与温度。
   • 系统监控：实时获取 CPU 占用率、内存使用情况以及硬盘剩余空间，并以可视化进度条展示。
     

3. 方法 (Method)

为了快速实现跨平台桌面应用，技术选型如下：

• 核心框架：Electron (v33+)。它允许使用 Web 技术构建桌面应用，且拥有 Node.js 的底层能力。
• 前端技术：HTML5 + CSS3 (Flexbox 布局, Backdrop-filter 滤镜)。
• 硬件信息获取：systeminformation 库。这是一个强大的 Node.js 库，无需复杂底层代码即可跨平台获取系统数据。
• 天气数据：OpenWeatherMap API。
• 开发环境：VS Code + Node.js。

4. 过程 (Process)

4.1 环境搭建与坑点解决

项目初始化非常简单，通过 npm init 生成项目，但在安装 Electron 时，由于国内网络原因，经常遇到二进制文件下载失败 (ETIMEDOUT 或 ECONNRESET) 的问题。

解决方案：在项目根目录创建 .npmrc 文件，强制指定淘宝镜像源：

registry=https://registry.npmmirror.com/
electron_mirror=https://npmmirror.com/mirrors/electron/

解决依赖后，安装核心库：

npm install electron --save-dev
npm install systeminformation

4.2 主进程配置：打造“透明窗口”

Electron 的默认窗口是有标题栏和白色背景的。为了实现“挂件”效果，需要在 main.js 中进行特殊配置：

const win = new BrowserWindow({
    width: 480,
    height: 220,
    frame: false,            // 1. 去掉系统原生标题栏
    transparent: true,       // 2. 开启背景透明
    resizable: false,        // 3. 禁止用户调整大小
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
    }
});

4.3 界面实现：毛玻璃与拖拽

在 style.css 中，我们利用 CSS3 的 backdrop-filter 属性实现类似 macOS 的磨砂玻璃质感。

同时，由于去掉了原生标题栏，窗口无法被拖动。Electron 提供了一个简单的 CSS 属性来解决这个问题：

.header {
    -webkit-app-region: drag; /* 允许按住此区域拖拽窗口 */
}
/* 注意：按钮区域必须设为 no-drag，否则无法点击 */
button {
    -webkit-app-region: no-drag;
}

4.4 业务逻辑实现 (renderer.js)

A. 系统监控功能
利用 systeminformation 库，我们可以轻松获取硬件数据。为了避免阻塞主线程，我们使用 async/await 异步获取：

const si = require('systeminformation');

async function updateSystemInfo() {
    const cpuLoad = await si.currentLoad(); // 获取CPU负载
    const mem = await si.mem();             // 获取内存信息
    const disks = await si.fsSize();        // 获取硬盘信息
    
    // 更新 UI 进度条宽度
    document.getElementById('cpu-bar').style.width = `${cpuLoad.currentLoad}%`;
}

B. 天气获取
使用原生 fetch 请求 OpenWeatherMap 接口。为了防止 API 调用过于频繁，设置了 10 分钟的轮询间隔，而系统监控则设置为 2 秒刷新一次。

C. 主题切换与持久化
为了提升体验，我增加了三种背景主题。通过监听颜色按钮的点击事件切换 CSS 类名，并使用 localStorage 记录用户的选择：

function setTheme(themeName) {
    // 切换 class
    container.className = `widget-container ${themeName}-bg`;
    // 本地持久化存储
    localStorage.setItem('savedTheme', themeName);
}

5. 结果 (Result)

经过编码与调试，最终产出了一个体积小巧、功能完备的桌面小工具。

• 视觉效果：半透明的深色背景完美融入桌面，不突兀。
• 功能表现：
  • 打开软件后，自动加载上次选择的“赛博紫”主题。
  • 左侧清晰显示“Beijing 24°C”以及当前时间。
  • 右侧的进度条随着我打开 Chrome 浏览器，CPU 和内存的数值实时跳动，非常直观。
  • 按住头部可以随意将它拖到屏幕右上角，不遮挡视线。