1. 背景 (Background)
作为一名开发者，我经常需要关注两件事：一是窗外的天气（决定待会儿出门穿什么），二是电脑的健康状态（CPU 炸了没有，内存还剩多少）。
虽然 Windows 和 macOS 都有自带的小组件，但它们的自定义程度往往不高，且风格难以统一。既然我熟悉 Web 前端技术（HTML/CSS/JS），为什么不利用Electron技术，自己动手编写一个轻量级、透明毛玻璃风格的桌面挂件（Widget）呢？
C:\pythoncode\new\desktop_organizer.py
2. 目标 (Goal)
本项目的核心目标是开发一个运行在桌面端的实用工具栏 (Widget)，具体需求如下：
- UI 交互：
- 窗口无边框、背景半透明（毛玻璃效果）。
- 支持鼠标拖拽移动位置。
- 支持一键切换主题颜色（黑/蓝/紫），并自动保存用户偏好。
- 功能模块：
- 时钟：实时显示当前时间与日期。
- 天气：基于 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/解决依赖后，安装核心库：
npminstallelectron --save-devnpminstallsysteminformation4.2 主进程配置：打造“透明窗口”
Electron 的默认窗口是有标题栏和白色背景的。为了实现“挂件”效果，需要在main.js中进行特殊配置：
constwin=newBrowserWindow({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异步获取：
constsi=require('systeminformation');asyncfunctionupdateSystemInfo(){constcpuLoad=awaitsi.currentLoad();// 获取CPU负载constmem=awaitsi.mem();// 获取内存信息constdisks=awaitsi.fsSize();// 获取硬盘信息// 更新 UI 进度条宽度document.getElementById('cpu-bar').style.width=`${cpuLoad.currentLoad}%`;}B. 天气获取
使用原生fetch请求 OpenWeatherMap 接口。为了防止 API 调用过于频繁，设置了 10 分钟的轮询间隔，而系统监控则设置为 2 秒刷新一次。
C. 主题切换与持久化
为了提升体验，我增加了三种背景主题。通过监听颜色按钮的点击事件切换 CSS 类名，并使用localStorage记录用户的选择：
functionsetTheme(themeName){// 切换 classcontainer.className=`widget-container${themeName}-bg`;// 本地持久化存储localStorage.setItem('savedTheme',themeName);}5. 结果 (Result)
经过编码与调试，最终产出了一个体积小巧、功能完备的桌面小工具。
- 视觉效果：半透明的深色背景完美融入桌面，不突兀。
- 功能表现：
- 打开软件后，自动加载上次选择的“赛博紫”主题。
- 左侧清晰显示“Beijing 24°C”以及当前时间。
- 右侧的进度条随着我打开 Chrome 浏览器，CPU 和内存的数值实时跳动，非常直观。
- 按住头部可以随意将它拖到屏幕右上角，不遮挡视线。
