🐞 fix: 修复偶发性客户端状态栏异常

- 修复客户端导航栏显示异常的问题
- 优化频谱动画的显示效果
- 修复Tab栏移动效果 #144
- 优化字体粗体时的显示效果 #156

.dockerignore

@@ -0,0 +1,12 @@
+node_modules
+npm-debug.log
+Dockerfile*
+docker-compose*
+.dockerignore
+.git
+.github
+.gitignore
+README.md
+LICENSE
+.vscode
+dist

.editorconfig

@@ -1,9 +1,18 @@
+# 根配置文件
+## 编辑器在查找配置时会停止查找更高层次的配置文件
 root = true
 
+# 通配符，匹配所有文件
 [*]
+# 设置字符集为 UTF-8，确保文件中的文本使用 UTF-8 编码
 charset = utf-8
+# 使用空格作为缩进风格
 indent_style = space
+# 设置每个缩进级别的空格数量为 2
 indent_size = 2
+# 设置行尾换行符为LF（Line Feed）
 end_of_line = lf
+# 在文件的末尾插入一个新行
 insert_final_newline = true
-trim_trailing_whitespace = true
+# 删除每一行末尾的尾随空格
+trim_trailing_whitespace = true

.env.example

@@ -21,8 +21,6 @@ RENDERER_VITE_SITE_ANTHOR = "無名"
 RENDERER_VITE_SITE_KEYWORDS = "SPlayer,云音乐,播放器,在线音乐,在线播放器,音乐播放器"
 RENDERER_VITE_SITE_DES = "一个简约的在线音乐播放器，具有音乐搜索、播放、每日推荐、私人FM、歌词显示、歌曲评论、网易云登录与云盘等功能"
 RENDERER_VITE_SITE_URL = "imsyy.top"
-RENDERER_VITE_SITE_LOGO = "/images/logo/favicon.svg"
-RENDERER_VITE_SITE_APPLE_LOGO = "/images/logo/favicon-apple.png"
 
 # Cookie
 ## 咪咕音乐 Cookie

.eslintignore

@@ -2,3 +2,5 @@ node_modules
 dist
 out
 .gitignore
+auto-imports.d.ts
+components.d.ts

.eslintrc.cjs

@@ -49,7 +49,8 @@ module.exports = {
     $notification: true,
     $changeThemeColor: true,
     $canNotConnect: true,
-    $refreshCloudList: true,
+    $refreshCloudCatch: true,
     $cleanAll: true,
+    $player: true,
   },
 };

.github/ISSUE_TEMPLATE/add.yml

@@ -1,17 +0,0 @@
-name: 添加功能
-description: 请填写希望添加的功能的具体信息
-title: "添加功能"
-labels: [add]
-body:
-  - type: input
-    id: name
-    validations:
-      required: true
-    attributes:
-      label: "希望添加什么功能？"
-      placeholder: "请填写功能名称"
-  - type: textarea
-    id: other
-    attributes:
-      label: "具体信息"
-      description: "请详细描述希望添加的功能的具体信息"

.github/ISSUE_TEMPLATE/bug.yml

@@ -1,5 +1,6 @@
 name: 遇到问题
 description: 关于使用过程中遇到的问题
+title: 请填写标题
 labels: [bug]
 body:
   - type: input
@@ -30,4 +31,5 @@ body:
     id: other
     attributes:
       label: "具体信息"
-      description: "有需要补充的信息吗？比如控制台的报错什么的"
+      description: "请填写完整的复现步骤和遇到的问题，包括但不限于报错信息、控制台输出、网络请求等"
+      placeholder: "请填写具体的复现步骤和遇到的问题"

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,8 @@
 blank_issues_enabled: false
 contact_links:
+  - name: 添加功能
+    url: https://github.com/imsyy/SPlayer/discussions/new?category=%E6%83%B3%E6%B3%95-ideas
+    about: 新的功能建议和提问答疑请到讨论区发起
   - name: 转到讨论区
     url: https://github.com/imsyy/SPlayer/discussions
     about: Issues 用于反馈 Bug, 新的功能建议和提问答疑请到讨论区发起

.github/workflows/docker.yml

@@ -0,0 +1,46 @@
+name: Publish Docker image
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  push_to_registry:
+    name: Push Docker image to multiple registries
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: read
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            imsyy/splayer
+            ghcr.io/${{ github.repository }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.npmrc

@@ -1,2 +1,5 @@
-ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
+registry=https://registry.npmmirror.com
+disturl=https://registry.npmmirror.com/-/binary/node
+# ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
+ELECTRON_MIRROR=https://registry.npmmirror.com/-/binary/electron/
 shamefully-hoist=true

.prettierignore

@@ -4,3 +4,5 @@ pnpm-lock.yaml
 LICENSE.md
 tsconfig.json
 tsconfig.*.json
+auto-imports.d.ts
+components.d.ts

.prettierrc.yaml

@@ -1,4 +1,8 @@
+# 是否使用单引号而不是双引号
 singleQuote: false
+# 是否在语句末尾使用分号
 semi: true
+# 每行的最大打印宽度
 printWidth: 100
+# 是否在对象和数组的末尾加上逗号
 trailingComma: all

Dockerfile

@@ -0,0 +1,29 @@
+# build
+FROM node:18-alpine as builder
+
+RUN apk update && apk add --no-cache git
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+RUN [ ! -e ".env" ] && cp .env.example .env || true
+
+RUN npm run build
+
+# nginx
+FROM nginx:1.25.3-alpine-slim as app
+
+COPY --from=builder /app/out/renderer /usr/share/nginx/html
+
+COPY --from=builder /app/nginx.conf /etc/nginx/conf.d/default.conf
+
+RUN apk add --no-cache npm
+
+RUN npm install -g NeteaseCloudMusicApi
+
+CMD nginx && npx NeteaseCloudMusicApi

README.md

@@ -1,6 +1,14 @@
+# SPlayer
+
+> 一个简约的音乐播放器
+
+![main](/screenshots/SPlayer.jpg)
+
+## 说明
+
 > [!IMPORTANT]
 >
-> ## 严肃警告
+> ### 严肃警告
 >
 > - 请务必遵守 [GNU Affero General Public License (AGPL-3.0)](https://www.gnu.org/licenses/agpl-3.0.html) 许可协议
 > - 在您的修改、演绎、分发或派生项目中，必须同样采用 **AGPL-3.0** 许可协议，**并在适当的位置包含本项目的许可和版权信息**
@@ -8,20 +16,13 @@
 > - 若发现未遵守 **AGPL-3.0** 许可协议的行为，**本项目将永久停更**
 > - 感谢您的尊重与理解
 
-<div align="center">
-<img alt="logo" height="80" src="./public/images/logo/favicon.png" />
-<h2>SPlayer</h2>
-<p>一个简约的音乐播放器</p>
-<img alt="main" src="./screenshots/main.png" />
-</div>
-<br />
-
-## 说明
-
 - 本项目采用 [Vue 3](https://cn.vuejs.org/) 全家桶和 [Naïve UI](https://www.naiveui.com/) 组件库及 [Electron](https://www.electronjs.org/zh/docs/latest/) 开发
-- 支持网页端与客户端，由于设备有限，目前仅适配 `Win`，其他平台可自行构建
-- ~~仅对移动端做了基础适配，**不保证功能全部可用**~~
-- 欢迎各位大佬指点和 `Star` 哦 😍
+- 支持网页端与客户端，由于设备有限，目前仅适配 `Win`，其他平台可自行解决兼容性后进行构建
+- 仅对移动端做了基础适配，**不保证功能全部可用**
+
+  > 请注意，本程序不打算开发移动端，也不会对移动端进行完美适配，仅保证基础可用性
+
+- 欢迎各位大佬 `Star` 😍
 
 ## 👀 Demo
 
@@ -29,38 +30,32 @@
 
 ## 🎉 功能
 
-- 支持扫码登录
-- 支持手机号登录
-- 自动进行每日签到及云贝签到
-- 封面主题色自适应
-- 本地歌曲管理及分类 ~~以及音乐标签编辑~~
-- **支持播放部分无版权歌曲（可能会与原曲不匹配，客户端独占功能）**
-- 下载歌曲（最高支持 Hi-Res）
-- 新建歌单及歌单编辑
-- 收藏 / 取消收藏歌单或歌手
-- 每日推荐歌曲
-- 私人 FM
-- 云盘音乐上传
-- 云盘内歌曲播放
-- 云盘内歌曲纠正
-- 云盘歌曲删除
-- 支持逐字歌词
-- 歌词滚动以及歌词翻译
-- MV 与视频播放
-- 音乐频谱显示（ 暂时去除，还待完善 ）
-- 音乐渐入渐出
-- 支持 PWA
-- 支持评论区及评论点赞
-- 明暗模式自动 / 手动切换
-- ~~移动端基础适配~~
-- ~~`i18n` 支持~~
-
-#### 待办
-
-- [ ] 完善音乐频谱
-- [ ] 添加桌面歌词
-- [ ] 多种布局方式
-- [ ] 发表评论
+- ✨ 支持扫码登录
+- 📱 支持手机号登录
+- 📅 自动进行每日签到及云贝签到
+- 🎨 封面主题色自适应
+- 🌚 Light / Dark 模式自动切换
+- 📁 本地歌曲管理及分类（建议先使用 [音乐标签](https://www.cnblogs.com/vinlxc/p/11347744.html) 进行匹配后再使用）
+- 🎵 **支持播放部分无版权歌曲（可能会与原曲不匹配，客户端独占功能）**
+- ⬇️ 下载歌曲（最高支持 Hi-Res）
+- ➕ 新建歌单及歌单编辑
+- ❤️ 收藏 / 取消收藏歌单或歌手
+- 🎶 每日推荐歌曲
+- 📻 私人 FM
+- ☁️ 云盘音乐上传
+- 📂 云盘内歌曲播放
+- 🔄 云盘内歌曲纠正
+- 🗑️ 云盘歌曲删除
+- 📝 支持逐字歌词
+- 🔄 歌词滚动以及歌词翻译
+- 📹 MV 与视频播放
+- 🎶 音乐频谱显示
+- ⏭️ 音乐渐入渐出
+- 🔄 支持 PWA
+- 💬 支持评论区及评论点赞
+- 🌓 明暗模式自动 / 手动切换
+- 📱 移动端基础适配
+- ~~🌐 `i18n` 支持~~
 
 ## 🖼️ Screenshots
 
@@ -120,6 +115,38 @@
 
 [Dev Workflow](https://github.com/imsyy/SPlayer/actions/workflows/build.yml)
 
+## ⚙️ Docker 部署
+
+> 安装及配置 `Docker` 将不在此处说明，请自行解决
+
+### 本地构建
+
+> 请尽量拉取最新分支后使用本地构建方式，在线部署的仓库可能更新不及时
+
+```bash
+# 构建
+docker build -t splayer .
+
+# 运行
+docker run -d --name SPlayer -p 7899:7899 splayer
+# 或使用 Docker Compose
+docker-compose up -d
+```
+
+### 在线部署
+
+```bash
+# 从 Docker Hub 拉取
+docker pull imsyy/splayer:latest
+# 从 GitHub ghcr 拉取
+docker pull ghcr.io/imsyy/splayer:latest
+
+# 运行
+docker run -d --name SPlayer -p 7899:7899 imsyy/splayer:latest
+```
+
+以上步骤成功后，将会在本地 [localhost:7899](http://localhost:7899/) 启动，如需更换端口，请自行修改命令行中的端口号
+
 ## ⚙️ Vercel 部署
 
 > 其他部署平台大致相同，在此不做说明
@@ -132,6 +159,7 @@
    ```js
    RENDERER_VITE_SERVER_URL = "https://example.com";
    ```
+
 5. 将 `Build and Output Settings` 中的 `Output Directory` 改为 `out/renderer`
 
    ![build](/screenshots/build.png)
@@ -185,11 +213,11 @@
 5. 复制 `/.env.example` 文件并重命名为 `/.env` 并修改配置
 6. 打包客户端，请依据你的系统类型来选择，打包成功后，会输出安装包或可执行文件在 `/dist` 目录中，可自行安装
 
-   | 命令 | 系统类型 |
-   | --- | --- |
-   | `pnpm build:win`  | Windows |
-   | `pnpm build:linux` | Linux |
-   | `pnpm build:mac`   | MacOS |
+   | 命令               | 系统类型 |
+   | ------------------ | -------- |
+   | `pnpm build:win`   | Windows  |
+   | `pnpm build:linux` | Linux    |
+   | `pnpm build:mac`   | MacOS    |
 
 ## 😘 鸣谢
 
@@ -198,7 +226,6 @@
 - [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)
 - [YesPlayMusic](https://github.com/qier222/YesPlayMusic)
 - [UnblockNeteaseMusic](https://github.com/UnblockNeteaseMusic/server)
-- [BlurLyric](https://github.com/Project-And-Factory/BlurLyric)
 - [Vue-mmPlayer](https://github.com/maomao1996/Vue-mmPlayer)
 
 ## 📢 免责声明
@@ -221,3 +248,180 @@
   4. **免责声明：** 根据 AGPL-3.0，本项目不提供任何明示或暗示的担保。请详细阅读 [GNU Affero General Public License (AGPL-3.0)](https://www.gnu.org/licenses/agpl-3.0.html) 以了解完整的免责声明内容
   5. **社区参与：** 欢迎社区的参与和贡献，我们鼓励开发者一同改进和维护本项目
   6. **许可证链接：** 请阅读 [GNU Affero General Public License (AGPL-3.0)](https://www.gnu.org/licenses/agpl-3.0.html) 了解更多详情
+
+## 📂 目录结构
+
+<details>
+<summary>查看目录结构详情</summary>
+
+> ChatGPT 写的，如有错误，请见谅
+
+```dir
+├── auto-imports.d.ts                     # 自动导入
+├── components.d.ts                       # 自动导入
+├── docker-compose.yml                    # Docker Compose
+├── Dockerfile                            # Docker
+├── electron                              # Electron
+│   ├── main                              # Electron 主进程
+│   │   ├── index.js                      # 主进程入口
+│   │   ├── mainIpcMain.js                # 主进程与渲染进程通信
+│   │   ├── startMainServer.js            # 启动主进程服务器
+│   │   ├── startNcmServer.js             # 启动网易云音乐服务
+│   │   └── utils                         # 主进程工具函数
+│   │       ├── checkUpdates.js           # 检查更新
+│   │       ├── createGlobalShortcut.js   # 创建全局快捷键
+│   │       ├── createSystemTray.js       # 创建系统托盘
+│   │       ├── getNeteaseMusicUrl.js     # 解灰
+│   │       ├── kwDES.js                  # DES加密算法
+│   │       └── readDirAsync.js           # 异步读取目录
+│   └── preload                           # Electron 预加载脚本
+│       └── index.js                      # 预加载脚本入口文件
+├── electron-builder.yml                  # Electron Builder
+├── electron.vite.config.js               # Electron Vite
+├── index.html                            # 主页面 HTML
+├── LICENSE                               # 项目许可证
+├── nginx.conf                            # Nginx 配置
+├── src                                   # 项目源代码
+│   ├── api                               # API 相关
+│   │   ├── ./..
+│   ├── App.vue                           # 根组件
+│   ├── assets                            # 静态资源
+│   │   ├── emoji.json                    # 表情数据
+│   │   ├── icon.json                     # 图标数据
+│   │   └── themeColor.json               # 主题颜色数据
+│   ├── components                        # 组件目录
+│   │   ├── Cover                         # 封面相关组件目录
+│   │   │   ├── CoverDropdown.vue         # 封面下拉组件
+│   │   │   ├── MainCover.vue             # 主封面组件
+│   │   │   ├── SpecialCoverCard.vue      # 特殊封面卡片组件
+│   │   │   └── SpecialCover.vue          # 特殊封面组件
+│   │   ├── Global                        # 全局组件目录
+│   │   │   ├── MainLayout.vue            # 主布局组件
+│   │   │   ├── Menu.vue                  # 菜单组件
+│   │   │   ├── Pagination.vue            # 分页组件
+│   │   │   ├── Playlist.vue              # 歌单组件
+│   │   │   ├── Provider.vue              # 全局化配置组件
+│   │   │   └── SvgIcon.vue               # SVG 图标组件
+│   │   ├── List                          # 列表组件目录
+│   │   │   ├── CommentList.vue           # 评论列表组件
+│   │   │   ├── SongListDropdown.vue      # 歌曲下拉组件
+│   │   │   └── SongList.vue              # 歌曲列表组件
+│   │   ├── Modal                         # 弹窗相关组件目录
+│   │   │   ├── AddPlaylist.vue           # 添加歌单组件
+│   │   │   ├── CloudSongMatch.vue        # 云盘歌曲匹配组件
+│   │   │   ├── CreatePlaylist.vue        # 创建歌单组件
+│   │   │   ├── DownloadSong.vue          # 下载歌曲组件
+│   │   │   ├── LoginPhone.vue            # 手机登录组件
+│   │   │   ├── LoginQRCode.vue           # 二维码登录组件
+│   │   │   ├── Login.vue                 # 登录组件
+│   │   │   ├── PlaylistUpdate.vue        # 歌单编辑组件
+│   │   │   └── UpCloudSong.vue           # 上传云盘歌曲组件
+│   │   ├── Nav                           # 导航相关组件目录
+│   │   │   ├── MainNav.vue               # 主导航组件
+│   │   │   └── UserData.vue              # 用户数据组件
+│   │   ├── Player                        # 播放器相关组件目录
+│   │   │   ├── CountDown.vue             # 倒计时组件
+│   │   │   ├── FullPlayer.vue            # 全屏播放器组件
+│   │   │   ├── Lyric.vue                 # 歌词组件
+│   │   │   ├── MainControl.vue           # 主控制组件
+│   │   │   ├── PlayerControl.vue         # 播放器控制组件
+│   │   │   ├── PlayerCover.vue           # 播放器封面组件
+│   │   │   └── PrivateFm.vue             # 私人 FM 组件
+│   │   ├── Search                        # 搜索相关组件
+│   │   │   ├── SearchHot.vue             # 热门搜索组件
+│   │   │   ├── SearchInp.vue             # 搜索输入组件
+│   │   │   └── SearchSuggestions.vue     # 搜索建议组件
+│   │   └── WinDom                        # 窗口 DOM 相关组件
+│   │       └── TitleBar.vue              # 标题栏组件
+│   ├── main.js                           # Vue 应用的入口文件
+│   ├── router                            # Vue Router 相关文件夹
+│   │   ├── index.js                      # Vue Router 入口文件
+│   │   └── routes.js                     # 路由配置文件
+│   ├── stores                            # Vuex Store 相关文件夹
+│   │   ├── indexedDB.js                  # IndexedDB 数据库相关文件
+│   │   ├── index.js                      # Vuex Store 入口文件
+│   │   ├── musicData.js                  # 音乐数据相关文件
+│   │   ├── siteData.js                   # 网站数据相关文件
+│   │   ├── siteSettings.js               # 网站设置相关文件
+│   │   └── siteStatus.js                 # 网站状态相关文件
+│   ├── style                             # 样式相关文件夹
+│   │   ├── animate.scss                  # 动画样式文件
+│   │   └── main.scss                     # 主样式文件
+│   ├── utils                             # 工具函数文件夹
+│   │   ├── auth.js                       # 认证相关函数
+│   │   ├── base64.js                     # Base64编码解码相关函数
+│   │   ├── color-utils.js                # 颜色工具函数
+│   │   ├── cover-color.js                # 封面颜色相关函数
+│   │   ├── debounce.js                   # 防抖函数
+│   │   ├── formatData.js                 # 数据格式化函数
+│   │   ├── formRules.js                  # 表单验证规则
+│   │   ├── globalEvents.js               # 全局事件处理函数
+│   │   ├── globalShortcut.js             # 全局快捷键相关函数
+│   │   ├── helper.js                     # 辅助函数
+│   │   ├── parseLyric.js                 # 解析歌词函数
+│   │   ├── Player.js                     # 播放器控制相关函数
+│   │   ├── request.js                    # 网络请求相关函数
+│   │   ├── throttle.js                   # 节流函数
+│   │   ├── timeTools.js                  # 时间工具函数
+│   │   └── userSignIn.js                 # 用户登录相关函数
+│   └── views                             # Vue组件文件夹
+│       ├── Artist                        # 艺术家相关组件
+│       │   ├── albums.vue                # 艺术家专辑组件
+│       │   ├── hot.vue                   # 艺术家热门组件
+│       │   ├── index.vue                 # 艺术家主组件
+│       │   ├── songs.vue                 # 艺术家歌曲组件
+│       │   └── videos.vue                # 艺术家视频组件
+│       ├── Cloud.vue                     # 云盘组件
+│       ├── Comment.vue                   # 评论组件
+│       ├── DailySongs.vue                # 每日推荐组件
+│       ├── Discover                      # 发现音乐相关组件
+│       │   ├── artists.vue               # 发现音乐艺术家组件
+│       │   ├── index.vue                 # 发现音乐主组件
+│       │   ├── new.vue                   # 发现音乐新歌组件
+│       │   ├── playlists.vue             # 发现音乐歌单组件
+│       │   └── toplists.vue              # 发现音乐排行榜组件
+│       ├── History.vue                   # 历史记录组件
+│       ├── Home.vue                      # 主页组件
+│       ├── Like                          # 我喜欢的相关组件
+│       │   ├── albums.vue                # 我喜欢的专辑组件
+│       │   ├── artists.vue               # 我喜欢的艺术家组件
+│       │   ├── index.vue                 # 我喜欢的主组件
+│       │   ├── playlists.vue             # 我喜欢的歌单组件
+│       │   └── videos.vue                # 我喜欢的视频组件
+│       ├── List                          # 列表相关组件
+│       │   ├── album.vue                 # 专辑组件
+│       │   └── playlist.vue              # 歌单组件
+│       │   └── dj.vue                    # 电台组件
+│       ├── Local                         # 本地音乐相关组件
+│       │   ├── albums.vue                # 本地音乐专辑组件
+│       │   ├── artists.vue               # 本地音乐艺术家组件
+│       │   ├── index.vue                 # 本地音乐主组件
+│       │   └── songs.vue                 # 本地音乐歌曲组件
+│       ├── Player.vue                    # 视频播放器组件
+│       ├── Dj                            # 电台相关组件
+│       │   └── index.vue                 # 电台主组件
+│       │   └── type.vue                  # 电台分类组件
+│       ├── Search                        # 搜索相关组件
+│       │   ├── albums.vue                # 搜索专辑组件
+│       │   ├── artists.vue               # 搜索艺术家组件
+│       │   ├── index.vue                 # 搜索主组件
+│       │   ├── playlists.vue             # 搜索歌单组件
+│       │   ├── songs.vue                 # 搜索歌曲组件
+│       │   └── videos.vue                # 搜索视频组件
+│       │   └── djs.vue                   # 搜索电台组件
+│       ├── Setting                       # 设置相关组件
+│       │   └── index.vue                 # 设置主组件
+│       ├── Song.vue
+│       ├── State
+│       │   ├── 403.vue
+│       │   ├── 404.vue
+│       │   └── 500.vue
+│       └── Test.vue
+└── vercel.json                           # Vercel 部署配置
+```
+
+</details>
+
+## ⭐ Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=imsyy/SPlayer&type=Date)](https://star-history.com/#imsyy/SPlayer&Date)

auto-imports.d.ts

@@ -65,5 +65,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }

components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     CommentList: typeof import('./src/components/List/CommentList.vue')['default']
     CountDown: typeof import('./src/components/Player/CountDown.vue')['default']
     CoverDropdown: typeof import('./src/components/Cover/CoverDropdown.vue')['default']
+    CoverPlayBtn: typeof import('./src/components/Cover/CoverPlayBtn.vue')['default']
     CreatePlaylist: typeof import('./src/components/Modal/CreatePlaylist.vue')['default']
     DownloadSong: typeof import('./src/components/Modal/DownloadSong.vue')['default']
     FullPlayer: typeof import('./src/components/Player/FullPlayer.vue')['default']
@@ -27,11 +28,11 @@ declare module 'vue' {
     NAlert: typeof import('naive-ui')['NAlert']
     NAvatar: typeof import('naive-ui')['NAvatar']
     NBackTop: typeof import('naive-ui')['NBackTop']
+    NBadge: typeof import('naive-ui')['NBadge']
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
@@ -39,6 +40,7 @@ declare module 'vue' {
     NDropdown: typeof import('naive-ui')['NDropdown']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NEmpty: typeof import('naive-ui')['NEmpty']
+    NFlex: typeof import('naive-ui')['NFlex']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NGi: typeof import('naive-ui')['NGi']
@@ -67,6 +69,7 @@ declare module 'vue' {
     NPagination: typeof import('naive-ui')['NPagination']
     NPopover: typeof import('naive-ui')['NPopover']
     NProgress: typeof import('naive-ui')['NProgress']
+    NQrCode: typeof import('naive-ui')['NQrCode']
     NRadio: typeof import('naive-ui')['NRadio']
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NResult: typeof import('naive-ui')['NResult']
@@ -74,7 +77,6 @@ declare module 'vue' {
     NSelect: typeof import('naive-ui')['NSelect']
     NSkeleton: typeof import('naive-ui')['NSkeleton']
     NSlider: typeof import('naive-ui')['NSlider']
-    NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTab: typeof import('naive-ui')['NTab']
@@ -83,6 +85,7 @@ declare module 'vue' {
     NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
     NThing: typeof import('naive-ui')['NThing']
+    NVirtualList: typeof import('naive-ui')['NVirtualList']
     Pagination: typeof import('./src/components/Global/Pagination.vue')['default']
     PlayerControl: typeof import('./src/components/Player/PlayerControl.vue')['default']
     PlayerCover: typeof import('./src/components/Player/PlayerCover.vue')['default']
@@ -96,9 +99,11 @@ declare module 'vue' {
     SearchInp: typeof import('./src/components/Search/SearchInp.vue')['default']
     SearchSuggestions: typeof import('./src/components/Search/SearchSuggestions.vue')['default']
     SongList: typeof import('./src/components/List/SongList.vue')['default']
+    SongListDrawer: typeof import('./src/components/List/SongListDrawer.vue')['default']
     SongListDropdown: typeof import('./src/components/List/SongListDropdown.vue')['default']
     SpecialCover: typeof import('./src/components/Cover/SpecialCover.vue')['default']
     SpecialCoverCard: typeof import('./src/components/Cover/SpecialCoverCard.vue')['default']
+    Spectrum: typeof import('./src/components/Player/Spectrum.vue')['default']
     SvgIcon: typeof import('./src/components/Global/SvgIcon.vue')['default']
     TitleBar: typeof import('./src/components/WinDom/TitleBar.vue')['default']
     UpCloudSong: typeof import('./src/components/Modal/UpCloudSong.vue')['default']

docker-compose.yml

@@ -0,0 +1,12 @@
+services:
+  SPlayer:
+    build:
+      context: .
+    image: splayer
+    container_name: SPlayer
+    volumes:
+      - /etc/localtime:/etc/localtime:ro
+      - /etc/timezone:/etc/timezone:ro
+    ports:
+      - 7899:7899
+    restart: always

electron-builder.yml

@@ -19,13 +19,11 @@ asarUnpack:
 # Windows 平台配置
 win:
   # 可执行文件名
-  executableName: splayer
+  executableName: SPlayer
   # 应用程序的图标文件路径
-  icon: public/images/logo/favicon_256.png
+  icon: public/images/icons/favicon-512x512.png
   # 构建类型
   target: nsis
-  # 管理员权限
-  requestedExecutionLevel: highestAvailable
 # NSIS 安装器配置
 nsis:
   # 一键式安装程序还是辅助安装程序
@@ -42,12 +40,16 @@ nsis:
   allowElevation: true
   # 是否允许用户更改安装目录
   allowToChangeInstallationDirectory: true
+  # 安装包图标
+  installerIcon: public/images/icons/favicon.ico
+  # 卸载命令图标
+  uninstallerIcon: public/images/icons/favicon.ico
 # macOS 平台配置
 mac:
   # 可执行文件名
-  executableName: splayer
+  executableName: SPlayer
   # 应用程序的图标文件路径
-  icon: public/images/logo/favicon_512.png
+  icon: public/images/icons/favicon-512x512.png
   # 权限继承的文件路径
   entitlementsInherit: build/entitlements.mac.plist
   # 扩展信息，如权限描述
@@ -67,9 +69,9 @@ dmg:
 # Linux 平台配置
 linux:
   # 可执行文件名
-  executableName: splayer
+  executableName: SPlayer
   # 应用程序的图标文件路径
-  icon: public/images/logo/favicon_256.png
+  icon: public/images/icons/favicon-512x512.png
   # 构建类型
   target:
     - AppImage

electron.vite.config.mjs

@@ -42,7 +42,7 @@ export default defineConfig(({ mode }) => {
       build: {
         rollupOptions: {
           input: {
-            index: resolve(__dirname, "electron/preload/index.js"),
+            index: resolve(__dirname, "electron/preload/index.mjs"),
           },
         },
       },
@@ -97,21 +97,31 @@ export default defineConfig(({ mode }) => {
             ],
           },
           manifest: {
-            name: loadEnv(mode, process.cwd()).RENDERER_VITE_SITE_TITLE,
-            short_name: loadEnv(mode, process.cwd()).RENDERER_VITE_SITE_TITLE,
-            description: loadEnv(mode, process.cwd()).RENDERER_VITE_SITE_DES,
+            name: getEnv("RENDERER_VITE_SITE_TITLE"),
+            short_name: getEnv("RENDERER_VITE_SITE_TITLE"),
+            description: getEnv("RENDERER_VITE_SITE_DES"),
             display: "standalone",
             start_url: "/",
             theme_color: "#fff",
             background_color: "#efefef",
             icons: [
               {
-                src: "/images/logo/favicon.png",
-                sizes: "200x200",
+                src: "/images/icons/favicon-32x32.png",
+                sizes: "32x32",
                 type: "image/png",
               },
               {
-                src: "/images/logo/favicon_512.png",
+                src: "/images/icons/favicon-96x96.png",
+                sizes: "96x96",
+                type: "image/png",
+              },
+              {
+                src: "/images/icons/favicon-256x256.png",
+                sizes: "256x256",
+                type: "image/png",
+              },
+              {
+                src: "/images/icons/favicon-512x512.png",
                 sizes: "512x512",
                 type: "image/png",
               },
@@ -147,12 +157,6 @@ export default defineConfig(({ mode }) => {
           },
         },
         sourcemap: false,
-        win: {
-          icon: resolve(__dirname, "/public/images/logo/favicon.png"),
-        },
-        linux: {
-          icon: resolve(__dirname, "/public/images/logo/favicon.png"),
-        },
       },
     },
   };

electron/main/index.js

@@ -1,10 +1,9 @@
 import { join } from "path";
-import { app, protocol, shell, BrowserWindow, globalShortcut } from "electron";
+import { app, protocol, shell, BrowserWindow, globalShortcut, nativeImage } from "electron";
 import { platform, optimizer, is } from "@electron-toolkit/utils";
 import { startNcmServer } from "@main/startNcmServer";
 import { startMainServer } from "@main/startMainServer";
-import { configureAutoUpdater } from "@main/utils/checkUpdates";
-import createSystemInfo from "@main/utils/createSystemInfo";
+import createSystemTray from "@main/utils/createSystemTray";
 import createGlobalShortcut from "@main/utils/createGlobalShortcut";
 import mainIpcMain from "@main/mainIpcMain";
 import Store from "electron-store";
@@ -15,7 +14,7 @@ process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = "true";
 
 // 配置 log
 log.transports.file.resolvePathFn = () =>
-  join(app.getPath("documents"), "/SPlayer/splayer-log.txt");
+  join(app.getPath("documents"), "/SPlayer/SPlayer-log.txt");
 // 设置日志文件的最大大小为 2 MB
 log.transports.file.maxSize = 2 * 1024 * 1024;
 // 绑定 console 事件
@@ -93,7 +92,7 @@ class MainProcess {
     }
 
     // 注册应用协议
-    app.setAsDefaultProtocolClient("splayer");
+    app.setAsDefaultProtocolClient("SPlayer");
     // 应用程序准备好之前注册
     protocol.registerSchemesAsPrivileged([
       { scheme: "app", privileges: { secure: true, standard: true } },
@@ -107,6 +106,7 @@ class MainProcess {
   createWindow() {
     // 创建浏览器窗口
     this.mainWindow = new BrowserWindow({
+      title: app.getName() || "SPlayer",
       width: this.store.get("windowSize.width") || 1280, // 窗口宽度
       height: this.store.get("windowSize.height") || 740, // 窗口高度
       minHeight: 700, // 最小高度
@@ -117,11 +117,11 @@ class MainProcess {
       titleBarStyle: "customButtonsOnHover", // Macos 隐藏菜单栏
       autoHideMenuBar: true, // 失去焦点后自动隐藏菜单栏
       // 图标配置
-      icon: join(__dirname, "../../public/images/logo/favicon.png"),
+      icon: nativeImage.createFromPath(join(__dirname, "../../public/images/icons/favicon.png")),
       // 预加载
       webPreferences: {
-        // devTools: is.dev, //是否开启 DevTools
-        preload: join(__dirname, "../preload/index.js"),
+        // devTools: is.dev,
+        preload: join(__dirname, "../preload/index.mjs"),
         sandbox: false,
         webSecurity: false,
         hardwareAcceleration: true,
@@ -133,8 +133,6 @@ class MainProcess {
       this.mainWindow.show();
       // mainWindow.maximize();
       this.store.set("windowSize", this.mainWindow.getBounds());
-      // 创建系统信息
-      createSystemInfo(this.mainWindow);
     });
 
     // 主窗口事件
@@ -155,6 +153,14 @@ class MainProcess {
     else {
       this.mainWindow.loadURL(`http://127.0.0.1:${import.meta.env.MAIN_VITE_MAIN_PORT ?? 7899}`);
     }
+
+    // 配置网络代理
+    const proxyRules = this.store.get("proxy");
+    if (proxyRules) {
+      this.mainWindow.webContents.session.setProxy({ proxyRules }, (result) => {
+        console.info("网络代理配置：", result);
+      });
+    }
   }
 
   // 主应用程序事件
@@ -162,10 +168,10 @@ class MainProcess {
     app.whenReady().then(async () => {
       // 创建主窗口
       this.createWindow();
-      // 检测更新
-      configureAutoUpdater();
       // 引入主 Ipc
-      mainIpcMain(this.mainWindow);
+      mainIpcMain(this.mainWindow, this.store);
+      // 系统托盘
+      createSystemTray(this.mainWindow);
       // 注册快捷键
       createGlobalShortcut(this.mainWindow);
     });

electron/main/mainIpcMain.js

@@ -1,8 +1,10 @@
 import { ipcMain, dialog, app, clipboard, shell } from "electron";
+import { File, Picture, Id3v2Settings } from "node-taglib-sharp";
+import { configureAutoUpdater } from "@main/utils/checkUpdates";
 import { readDirAsync } from "@main/utils/readDirAsync";
 import { parseFile } from "music-metadata";
-import { write } from "node-id3";
 import { download } from "electron-dl";
+import { getFonts } from "font-list";
 import getNeteaseMusicUrl from "@main/utils/getNeteaseMusicUrl";
 import axios from "axios";
 import fs from "fs/promises";
@@ -10,9 +12,10 @@ import fs from "fs/promises";
 /**
  * 监听主进程的 IPC 事件
  * @param {BrowserWindow} win - 要监听 IPC 事件的程序窗口
+ * @param {Store} store - 存储对象
  */
 
-const mainIpcMain = (win) => {
+const mainIpcMain = (win, store) => {
   // 窗口操作部分
   ipcMain.on("window-min", (ev) => {
     // 阻止最小化
@@ -41,6 +44,10 @@ const mainIpcMain = (win) => {
     app.relaunch();
     app.quit();
   });
+  ipcMain.on("check-updates", () => {
+    console.info("开始检查更新");
+    configureAutoUpdater();
+  });
 
   // 显示进度
   ipcMain.on("setProgressBar", (_, val) => {
@@ -193,32 +200,39 @@ const mainIpcMain = (win) => {
   });
 
   // 下载文件至指定目录
-  ipcMain.handle("downloadFile", async (_, data, song, songName, songType, path) => {
+  ipcMain.handle("downloadFile", async (_, songData, options) => {
     try {
+      const { url, data, lyric, name, type } = JSON.parse(songData);
+      const { path, downloadMeta, downloadCover, downloadLyrics } = JSON.parse(options);
       if (fs.access(path)) {
-        const songData = JSON.parse(song);
-        console.info("开始下载：", songData, data);
+        console.info("开始下载：", name, url);
         // 下载歌曲
-        const songDownload = await download(win, data.url, {
+        const songDownload = await download(win, url, {
           directory: path,
-          filename: `${songName}.${songType}`,
+          filename: `${name}.${type}`,
         });
+        // 若关闭，则不进行元信息写入
+        if (!downloadMeta) return true;
         // 下载封面
-        const coverDownload = await download(win, songData.cover, {
+        const coverDownload = await download(win, data.cover, {
           directory: path,
-          filename: `${songName}.jpg`,
+          filename: `${name}.jpg`,
         });
-        // 生成歌曲文件的元数据
-        const songTag = {
-          title: songData.name,
-          artist: Array.isArray(songData.artists)
-            ? songData.artists.map((ar) => ar.name).join(" / ")
-            : songData.artists || "未知歌手",
-          album: songData.album?.name || songData.album,
-          image: coverDownload.getSavePath(),
-        };
+        // 读取歌曲文件
+        const songFile = File.createFromPath(songDownload.getSavePath());
+        // 生成图片信息
+        const songCover = Picture.fromPath(coverDownload.getSavePath());
         // 保存修改后的元数据
-        write(songTag, songDownload.getSavePath());
+        Id3v2Settings.forceDefaultVersion = true;
+        Id3v2Settings.defaultVersion = 3;
+        songFile.tag.title = data.name || "未知曲目";
+        songFile.tag.album = data.album?.name || "未知专辑";
+        songFile.tag.performers = data?.artists?.map((ar) => ar.name) || ["未知艺术家"];
+        if (downloadLyrics) songFile.tag.lyrics = lyric;
+        if (downloadCover) songFile.tag.pictures = [songCover];
+        // 保存元信息
+        songFile.save();
+        songFile.dispose();
         // 删除封面
         await fs.unlink(coverDownload.getSavePath());
         return true;
@@ -231,6 +245,35 @@ const mainIpcMain = (win) => {
       return false;
     }
   });
+
+  // 读取系统全部字体
+  ipcMain.handle("getAllFonts", async () => {
+    try {
+      const fonts = await getFonts();
+      return fonts;
+    } catch (error) {
+      console.error("获取系统字体时出错：", error);
+      return [];
+    }
+  });
+
+  // 配置网络代理
+  ipcMain.on("set-proxy", (_, config) => {
+    console.log(config);
+    const proxyRules = `${config.protocol}://${config.server}:${config.port}`;
+    store.set("proxy", proxyRules);
+    win.webContents.session.setProxy({ proxyRules }, () => {
+      console.info("网络代理配置完成");
+    });
+  });
+
+  // 取消代理
+  ipcMain.on("remove-proxy", () => {
+    store.set("proxy", "");
+    win.webContents.session.setProxy({ proxyRules: "" }, () => {
+      console.info("取消网络代理配置");
+    });
+  });
 };
 
 /**

electron/main/startNcmServer.js

@@ -1,4 +1,4 @@
-const netEaseApi = require("NeteaseCloudMusicApi");
+import netEaseApi from "NeteaseCloudMusicApi";
 
 /**
  * 启动网易云音乐 API 服务器

electron/main/utils/checkUpdates.js

@@ -1,6 +1,8 @@
-import { dialog, shell } from "electron";
+import { dialog } from "electron";
 import { is } from "@electron-toolkit/utils";
-import { autoUpdater } from "electron-updater";
+import pkg from "electron-updater";
+
+const { autoUpdater } = pkg;
 
 // 更新弹窗
 const hasNewVersion = (info) => {
@@ -8,23 +10,56 @@ const hasNewVersion = (info) => {
     .showMessageBox({
       title: "发现新版本 v" + info.version,
       message: "发现新版本 v" + info.version,
-      detail: "是否前往 GitHub 下载新版本安装包？",
-      buttons: ["前往", "取消"],
+      detail: "是否立即下载并安装新版本？",
+      buttons: ["立即下载", "取消"],
       type: "question",
       noLink: true,
     })
     .then((result) => {
       if (result.response === 0) {
-        shell.openExternal("https://github.com/imsyy/SPlayer/releases");
+        // 触发手动下载
+        autoUpdater.downloadUpdate();
       }
     });
 };
 
 export const configureAutoUpdater = () => {
   if (is.dev) return false;
-  autoUpdater.checkForUpdatesAndNotify();
+
+  // 监听下载进度事件
+  autoUpdater.on("download-progress", (progressObj) => {
+    console.log(`更新下载进度: ${progressObj.percent}%`);
+  });
+
+  // 下载完成
+  autoUpdater.on("update-downloaded", () => {
+    // 显示安装弹窗
+    dialog
+      .showMessageBox({
+        title: "下载完成",
+        message: "新版本已下载完成，是否现在安装？",
+        buttons: ["是", "稍后"],
+        type: "question",
+      })
+      .then((result) => {
+        if (result.response === 0) {
+          // 安装更新
+          autoUpdater.quitAndInstall();
+        }
+      });
+  });
+
+  // 下载失败
+  autoUpdater.on("error", (err) => {
+    console.error("下载更新失败:", err);
+    dialog.showErrorBox("下载更新失败", "请检查网络连接并稍后重试！");
+  });
+
   // 若有更新
   autoUpdater.on("update-available", (info) => {
     hasNewVersion(info);
   });
+
+  // 检查更新
+  autoUpdater.checkForUpdatesAndNotify();
 };

electron/main/utils/createSystemTray.js

@@ -1,55 +1,58 @@
-import { join } from "path";
-import { platform } from "@electron-toolkit/utils";
 import { Tray, Menu, app, ipcMain, nativeImage, nativeTheme } from "electron";
+import { join } from "path";
 
-// 当前播放歌曲数据
+// 当前歌曲数据
 let playSongName = "当前暂无播放歌曲";
 let playSongState = false;
 
 /**
- * 创建系统自定义信息
+ * 创建系统托盘
  * @param {BrowserWindow} win - 程序窗口
  */
-const createSystemInfo = (win) => {
-  // 弹出列表
-  app.setUserTasks([]);
+const createSystemTray = (win) => {
   // 系统托盘
-  const mainTray = new Tray(join(__dirname, "../../public/images/logo/favicon.png"));
-  // 默认托盘菜单
-  Menu.setApplicationMenu(Menu.buildFromTemplate(createTrayMenu(win)));
-  // 给托盘图标设置气球提示
+  const mainTray = new Tray(
+    nativeImage
+      .createFromPath(
+        join(
+          __dirname,
+          process.platform === "win32"
+            ? "../../public/images/icons/favicon.ico"
+            : "../../public/images/icons/favicon-32x32.png",
+        ),
+      )
+      .resize({
+        height: 32,
+        width: 32,
+      }),
+  );
+  // 应用内菜单
+  Menu.setApplicationMenu(createTrayMenu(win));
+  // 默认名称
+  win.setTitle(app.getName());
+  mainTray.setTitle(app.getName());
   mainTray.setToolTip(app.getName());
-  // 自定义任务栏缩略图
-  createThumbar(win);
-  // 歌曲数据改变时
+  // 左键事件
+  mainTray.on("click", () => win.show());
+  // 托盘菜单
+  mainTray.setContextMenu(createTrayMenu(win));
+  // 系统主题改变
+  nativeTheme.on("updated", () => {
+    mainTray.setContextMenu(createTrayMenu(win));
+  });
+  // 播放歌曲改变
   ipcMain.on("songNameChange", (_, val) => {
     playSongName = val;
-    // 托盘图标标题
-    mainTray.setToolTip(val);
-    // 更改应用标题
     win.setTitle(val);
+    mainTray.setTitle(val);
+    mainTray.setToolTip(val);
+    mainTray.setContextMenu(createTrayMenu(win));
   });
+  // 播放状态改变
   ipcMain.on("songStateChange", (_, val) => {
     playSongState = val;
-    createThumbar(win);
+    mainTray.setContextMenu(createTrayMenu(win));
   });
-  // 监听系统主题改变
-  nativeTheme.on("updated", () => {
-    createThumbar(win);
-  });
-  // 左键事件
-  mainTray.on("click", () => {
-    // 显示窗口
-    win.show();
-  });
-  // 右键事件
-  mainTray.on("right-click", () => {
-    mainTray.popUpContextMenu(Menu.buildFromTemplate(createTrayMenu(win)));
-  });
-  // linux 右键菜单
-  if (platform.isLinux) {
-    mainTray.setContextMenu(Menu.buildFromTemplate(createTrayMenu(win)));
-  }
 };
 
 // 生成图标
@@ -60,8 +63,8 @@ const createIcon = (name) => {
   return nativeImage
     .createFromPath(
       isDarkMode
-        ? join(__dirname, `../../public/images/icon/${name}-dark.png`)
-        : join(__dirname, `../../public/images/icon/${name}-light.png`),
+        ? join(__dirname, `../../public/images/icons/${name}-dark.png`)
+        : join(__dirname, `../../public/images/icons/${name}-light.png`),
     )
     .resize({ width: 16, height: 16 });
 };
@@ -69,7 +72,7 @@ const createIcon = (name) => {
 // 生成右键菜单
 const createTrayMenu = (win) => {
   // 返回菜单
-  return [
+  return Menu.buildFromTemplate([
     {
       label: playSongName,
       icon: createIcon("open"),
@@ -113,7 +116,9 @@ const createTrayMenu = (win) => {
       label: "全局设置",
       icon: createIcon("setting"),
       click: () => {
-        win.webContents.send("setting");
+        win.show();
+        win.focus();
+        win.webContents.send("open-setting");
       },
     },
     {
@@ -128,35 +133,7 @@ const createTrayMenu = (win) => {
         app.quit();
       },
     },
-  ];
-};
-
-// 自定义任务栏缩略图 - Win
-const createThumbar = (win) => {
-  win.setThumbarButtons([]);
-  win.setThumbarButtons([
-    {
-      tooltip: "上一曲",
-      icon: createIcon("prev"),
-      click: () => {
-        win.webContents.send("playNextOrPrev", "prev");
-      },
-    },
-    {
-      tooltip: playSongState ? "暂停" : "播放",
-      icon: createIcon(playSongState ? "pause" : "play"),
-      click() {
-        win.webContents.send("playOrPause");
-      },
-    },
-    {
-      tooltip: "下一曲",
-      icon: createIcon("next"),
-      click: () => {
-        win.webContents.send("playNextOrPrev", "next");
-      },
-    },
   ]);
 };
 
-export default createSystemInfo;
+export default createSystemTray;

index.html

@@ -1,24 +1,23 @@
 <!doctype html>
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>%RENDERER_VITE_SITE_TITLE%</title>
+    <meta name="apple-mobile-web-app-title" content="%RENDERER_VITE_SITE_TITLE%" />
+    <meta name="author" content="%RENDERER_VITE_SITE_ANTHOR%" />
+    <meta name="keywords" content="%RENDERER_VITE_SITE_KEYWORDS%" />
+    <meta name="description" content="%RENDERER_VITE_SITE_DES%" />
+    <link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#ffffff" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" href="%RENDERER_VITE_SITE_LOGO%" />
-  <link rel="apple-touch-icon" href="%RENDERER_VITE_SITE_APPLE_LOGO%" />
-  <link rel="bookmark" href="%RENDERER_VITE_SITE_APPLE_LOGO%" />
-  <link rel="apple-touch-icon-precomposed" sizes="200x200" href="%RENDERER_VITE_SITE_APPLE_LOGO%" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>%RENDERER_VITE_SITE_TITLE%</title>
-  <meta name="apple-mobile-web-app-title" content="%RENDERER_VITE_SITE_TITLE%" />
-  <meta name="author" content="%RENDERER_VITE_SITE_ANTHOR%" />
-  <meta name="keywords" content="%RENDERER_VITE_SITE_KEYWORDS%" />
-  <meta name="description" content="%RENDERER_VITE_SITE_DES%" />
-  <meta name="theme-color" content="#ffffff" />
-</head>
-
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-</body>
-
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
 </html>

nginx.conf

@@ -0,0 +1,28 @@
+server {
+  gzip on;
+  listen       7899;
+  listen  [::]:7899;
+  server_name  localhost;
+
+  location / {
+    root      /usr/share/nginx/html;
+    index     index.html;
+    try_files $uri $uri/ /index.html;
+  }
+
+  location @rewrites {
+    rewrite ^(.*)$ /index.html last;
+  }
+
+  location /api/ {
+    proxy_buffers           16 32k;
+    proxy_buffer_size       128k;
+    proxy_busy_buffers_size 128k;
+    proxy_set_header        Host $host;
+    proxy_set_header        X-Real-IP $remote_addr;
+    proxy_set_header        X-Forwarded-For $remote_addr;
+    proxy_set_header        X-Forwarded-Host $remote_addr;
+    proxy_set_header        X-NginX-Proxy true;
+    proxy_pass              http://localhost:3000/;
+  }
+}

package.json

@@ -1,21 +1,25 @@
 {
   "name": "splayer",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.7",
   "description": "A minimalist music player",
   "main": "./out/main/index.js",
   "author": "imsyy",
   "home": "https://imsyy.top",
   "github": "https://github.com/imsyy/SPlayer",
   "repository": "github:imsyy/SPlayer",
+  "license": "AGPL-3.0",
+  "license-file": "LICENSE",
   "engines": {
-    "node": ">=16.16.0"
+    "node": ">=18.16.0",
+    "npm": ">=9.6.7",
+    "pnpm": ">=8.14.0"
   },
-  "packageManager": "pnpm@8.12.0",
+  "type": "module",
   "scripts": {
     "format": "prettier --write .",
     "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts,.vue --fix",
     "start": "electron-vite preview",
-    "dev": "chcp 65001 && electron-vite dev --watch",
+    "dev": "electron-vite dev --watch",
     "build": "electron-vite build",
     "postinstall": "electron-builder install-app-deps",
     "build:win": "npm run build && electron-builder --win --config",
@@ -23,51 +27,51 @@
     "build:linux": "npm run build && electron-builder --linux --config"
   },
   "dependencies": {
-    "@electron-toolkit/preload": "^2.0.0",
-    "@electron-toolkit/utils": "^2.0.0",
+    "@electron-toolkit/preload": "^3.0.1",
+    "@electron-toolkit/utils": "^3.0.0",
     "@material/material-color-utilities": "^0.2.7",
-    "NeteaseCloudMusicApi": "git+https://github.com/imsyy/NeteaseCloudMusicApi.git",
-    "axios": "^1.4.0",
+    "NeteaseCloudMusicApi": "^4.15.8",
+    "axios": "^1.6.8",
     "colorthief": "^2.4.0",
-    "electron-dl": "^3.5.1",
-    "electron-store": "^8.1.0",
-    "electron-updater": "^6.1.7",
-    "express": "^4.18.2",
-    "express-http-proxy": "^1.6.3",
-    "howler": "^2.2.3",
+    "electron-dl": "^3.5.2",
+    "electron-store": "^8.2.0",
+    "electron-updater": "^6.1.8",
+    "express": "^4.19.2",
+    "express-http-proxy": "^2.0.0",
+    "font-list": "^1.5.1",
+    "howler": "^2.2.4",
     "js-cookie": "^3.0.5",
     "localforage": "^1.10.0",
-    "music-metadata": "7.13.4",
-    "node-id3": "^0.2.6",
-    "pinia": "^2.1.6",
-    "pinia-plugin-persistedstate": "^3.2.0",
+    "music-metadata": "7.14.0",
+    "node-taglib-sharp": "^5.2.3",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "plyr": "^3.7.8",
-    "qrcode.vue": "^3.4.1",
     "screenfull": "^6.0.2",
-    "vue-router": "^4.2.4",
+    "vue-router": "^4.3.0",
     "vue-slider-component": "4.1.0-beta.7"
   },
   "devDependencies": {
-    "@electron-toolkit/eslint-config": "^1.0.1",
-    "@rushstack/eslint-patch": "^1.3.3",
-    "@vitejs/plugin-vue": "^4.3.1",
-    "@vue/eslint-config-prettier": "^8.0.0",
+    "@electron-toolkit/eslint-config": "^1.0.2",
+    "@rushstack/eslint-patch": "^1.10.2",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^9.0.0",
     "ajv": "^8.12.0",
-    "electron": "^27.0.0",
-    "electron-builder": "^24.9.1",
-    "electron-log": "^5.0.1",
-    "electron-vite": "^1.0.29",
-    "eslint": "^8.47.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "naive-ui": "^2.35.0",
-    "prettier": "^3.0.2",
-    "sass": "^1.66.1",
-    "terser": "^5.19.2",
-    "unplugin-auto-import": "^0.16.6",
-    "unplugin-vue-components": "^0.25.1",
-    "vite": "^4.4.9",
+    "electron": "^28.3.0",
+    "electron-builder": "^24.13.3",
+    "electron-log": "^5.1.2",
+    "electron-vite": "^2.1.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.25.0",
+    "naive-ui": "^2.38.1",
+    "prettier": "^3.2.5",
+    "sass": "^1.75.0",
+    "terser": "^5.30.3",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^5.2.9",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-pwa": "^0.17.4",
-    "vue": "^3.3.4"
+    "vite-plugin-pwa": "^0.17.5",
+    "vue": "3.4.8"
   }
 }

public/font/font.css

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: "HarmonyOS Sans";
+  src: url("./HarmonyOS_Sans_SC.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  src: url("./HarmonyOS_Sans_SC_Bold.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+}