Electron + Vue3开源跨平台壁纸工具实战（一）集成NASA、Unsplash、Pixabay等多个优质壁纸源

系列

项目初衷

众里寻她千百度，没有找到心意的壁纸软件，于是乎就自己试着造一个。

源码

省流点我进Github获取源码，欢迎fork、star、PR

界面预览

搜索

窗口浏览

内联浏览

图片信息

工具

设置

H5首页

H5设置

核心功能

多源壁纸 - 集成NASA、Unsplash、Pixabay等多个优质壁纸源，支持自定义壁纸源插件，同时支持本地目录图片。
智能搜索 - 支持关键词搜索与智能分类，快速定位心仪壁纸。
一键管理 - 一键设置壁纸、收藏图片、本地保存，操作简便高效。
桌面悬浮球 - 快速切换壁纸功能，无需打开主界面。
H5端 - 支持手机端访问，随时随地浏览壁纸。
多语言支持 - 内置多语言界面，满足国际化需求。
自动更新 - 自动检测更新，保持应用最新状态。
跨平台兼容 - 完美支持Windows和macOS系统。
定时任务 - 支持设置定时更换壁纸、刷新目录、下载资源，自动切换桌面背景。
词库功能 - 通过分词自动生成词库，方便用户快速搜索关键词。
历史记录 - 记录使用过的壁纸，方便回顾和重复使用。
收藏功能 - 收藏喜爱的壁纸，建立个人壁纸库。
隐私空间 - 提供隐私保护的壁纸存储空间，确保个人隐私。
图片预览 - 支持壁纸预览功能，查看壁纸细节和效果。

实验室功能

动态壁纸 - 支持动态壁纸，为桌面增添生动效果。
网页壁纸 - 支持将网页设置为壁纸，创意无限。

技术栈

Electron框架 - 确保跨平台兼容性
Vue 3前端 - 构建现代化用户界面
模块化设计 - 提高应用稳定性
插件系统 - 支持扩展新壁纸源
SQLite数据库 - 本地存储用户数据
WebSocket通信 - 实现前后端实时交互

目录结构

Flying-Bird-Wallpaper/
├── .github/                    # GitHub工作流配置
├── .vscode/                    # VS Code编辑器配置
├── build/                      # 构建相关资源
│   ├── Flying-Bird-Wallpaper.iss  # Windows安装程序脚本
│   ├── entitlements.mac.plist  # macOS权限配置
│   └── icon.*                  # 应用图标文件
├── docs/                       # 项目文档
├── resources/                  # 资源文件
│   ├── api/                    # API集成模块
│   │   ├── bing.mjs            # Bing壁纸API
│   │   ├── nasa.mjs            # NASA图片API
│   │   ├── pexels.mjs          # Pexels API
│   │   ├── pixabay.mjs         # Pixabay API
│   │   ├── unsplash.mjs        # Unsplash API
│   │   └── birdpaper.mjs       # Birdpaper API
│   ├── icons/                  # 应用图标资源
│   ├── lib/                    # 原生库文件
│   └── plugin-templates/       # 插件模板
├── scripts/                    # 构建脚本
├── src/                        # 源代码
│   ├── common/                 # 共享代码
│   │   ├── config.js           # 配置文件
│   │   └── publicData.js       # 公共数据
│   ├── h5/                     # H5网页版代码
│   │   ├── api/                # H5请求API
│   │   ├── assets/             # H5静态资源
│   │   ├── components/         # H5组件
│   │   ├── pages/              # H5页面
│   │   ├── stores/             # 状态管理
│   │   └── main.js             # H5入口文件
│   ├── i18n/                   # 国际化
│   │   ├── locale/             # 语言文件
│   │   ├── i18next.js          # i18next配置
│   │   ├── server.js           # 服务端i18n
│   │   └── web.js              # 网页端i18n
│   ├── main/                   # Electron主进程
│   │   ├── child_server/       # 子进程服务
│   │   ├── jobs/               # 定时任务
│   │   ├── store/              # 数据存储
│   │   ├── utils/              # 工具函数
│   │   ├── ApiBase.js          # API基类
│   │   ├── cache.mjs           # 缓存管理
│   │   ├── logger.mjs          # 日志系统
│   │   ├── updater.mjs         # 自动更新
│   │   └── index.mjs           # 主进程入口
│   ├── preload/                # 预加载脚本
│   └── renderer/               # 渲染进程
│       ├── assets/             # 前端资源
│       ├── components/         # UI组件
│       ├── stores/             # 状态管理
│       ├── utils/              # 工具函数
│       └── windows/            # 窗口管理
├── electron.vite.config.mjs    # Electron Vite配置
├── h5.vite.config.mjs          # H5 Vite配置
├── electron-builder.yml        # 应用打包配置
├── package.json                # 项目依赖
└── README.md                   # 项目说明