🔧 build: 修复部分构建图标显示错误

.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

README.md

@@ -1,3 +1,13 @@
+<div align="center">
+<img alt="logo" height="80" src="./public/images/icons/favicon.png" />
+<h2>SPlayer</h2>
+<p>一个简约的音乐播放器</p>
+<img alt="main" src="./screenshots/main.png" />
+</div>
+<br />
+
+## 说明
+
 > [!IMPORTANT]
 >
 > ## 严肃警告
@@ -8,16 +18,6 @@
 > - 若发现未遵守 **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`，其他平台可自行构建
 - ~~仅对移动端做了基础适配，**不保证功能全部可用**~~

electron-builder.yml

@@ -19,9 +19,9 @@ asarUnpack:
 # Windows 平台配置
 win:
   # 可执行文件名
-  executableName: splayer
+  executableName: SPlayer
   # 应用程序的图标文件路径
-  icon: public/images/logo/favicon_256.png
+  icon: public/images/icons/favicon-512x512.png
   # 构建类型
   target: nsis
   # 管理员权限
@@ -42,12 +42,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 +71,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.js

@@ -106,12 +106,22 @@ export default defineConfig(({ mode }) => {
             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,10 @@
 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 +15,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 +93,7 @@ class MainProcess {
     }
 
     // 注册应用协议
-    app.setAsDefaultProtocolClient("splayer");
+    app.setAsDefaultProtocolClient("SPlayer");
     // 应用程序准备好之前注册
     protocol.registerSchemesAsPrivileged([
       { scheme: "app", privileges: { secure: true, standard: true } },
@@ -107,6 +107,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,7 +118,7 @@ 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
@@ -133,8 +134,6 @@ class MainProcess {
       this.mainWindow.show();
       // mainWindow.maximize();
       this.store.set("windowSize", this.mainWindow.getBounds());
-      // 创建系统信息
-      createSystemInfo(this.mainWindow);
     });
 
     // 主窗口事件
@@ -166,6 +165,8 @@ class MainProcess {
       configureAutoUpdater();
       // 引入主 Ipc
       mainIpcMain(this.mainWindow);
+      // 系统托盘
+      createSystemTray(this.mainWindow);
       // 注册快捷键
       createGlobalShortcut(this.mainWindow);
     });

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"),
@@ -128,35 +131,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

@@ -3,16 +3,17 @@
 
 <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%" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/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="/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#da532c">
   <meta name="theme-color" content="#ffffff" />
 </head>
 

package.json

@@ -15,7 +15,7 @@
     "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",

public/images/icons/safari-pinned-tab.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2400 4444 c-14 -2 -63 -8 -110 -14 -407 -50 -737 -184 -1077 -436
+-124 -93 -348 -309 -406 -394 -100 -144 -190 -286 -223 -352 -101 -200 -199
+-506 -226 -707 -17 -127 -22 -436 -8 -546 40 -338 161 -687 327 -942 138 -213
+226 -319 372 -450 237 -211 471 -353 761 -460 147 -54 156 -57 330 -88 383
+-71 516 -67 965 25 76 16 288 91 370 132 28 13 66 31 85 38 39 16 158 88 270
+164 242 164 474 410 628 668 254 422 362 920 308 1408 -16 139 -23 172 -73
+344 -80 273 -188 496 -346 711 -104 143 -302 348 -404 421 l-48 34 -192 0
+c-184 0 -193 -1 -203 -21 -8 -14 -11 -271 -10 -882 1 -474 -1 -896 -5 -937
+-29 -306 -228 -596 -507 -737 -207 -104 -426 -126 -663 -66 -168 43 -300 125
+-453 283 -118 122 -203 310 -223 495 -10 86 -3 271 11 320 41 135 58 180 95
+248 103 193 330 376 545 441 157 47 364 49 513 5 38 -11 78 -19 90 -17 l22 3
+-3 635 c-2 349 -7 638 -10 642 -22 22 -413 47 -502 32z"/>
+</g>
+</svg>

src/App.vue

@@ -111,8 +111,8 @@ if ("serviceWorker" in navigator) {
   navigator.serviceWorker.addEventListener("controllerchange", () => {
     if (checkPlatform.electron()) {
       $notification.create({
-        title: "🎉 更新提醒",
-        content: "检测到软件有更新，是否重新启动软件以应用更新？",
+        title: "🎉 有更新啦",
+        content: "检测到软件内资源有更新，是否重新启动软件以应用更新？",
         meta: "v " + (packageJson.version || "1.0.0"),
         action: () =>
           h(
@@ -129,14 +129,14 @@ if ("serviceWorker" in navigator) {
             },
           ),
         onAfterLeave: () => {
-          $message.info("已取消本次更新，将在下次启动软件后生效", {
+          $message.info("已取消本次更新，更新将在下次启动软件后生效", {
             duration: 6000,
           });
         },
       });
     } else {
-      console.info("站点已更新，刷新后生效");
-      $message.info("站点已更新，刷新后生效", {
+      console.info("站点资源有更新，请刷新以应用更新");
+      $message.info("站点资源有更新，请刷新以应用更新", {
         closable: true,
         duration: 0,
       });

src/components/Modal/Login.vue

@@ -14,7 +14,7 @@
   >
     <div class="login-content">
       <div class="title">
-        <img class="logo" src="/images/logo/favicon.png?asset" alt="logo" />
+        <img class="logo" src="/images/icons/favicon.png?asset" alt="logo" />
       </div>
       <!-- 登录方式 -->
       <n-tabs class="login-tabs" default-value="login-qr" type="segment" animated>

src/components/Nav/MainNav.vue

@@ -6,7 +6,7 @@
         :class="['logo', status.asideMenuCollapsed ? 'collapsed' : null]"
         @click="router.push('/')"
       >
-        <n-avatar class="logo-img" src="/images/logo/favicon.png?asset" />
+        <n-avatar class="logo-img" src="/images/icons/favicon.png?asset" />
         <Transition name="fade" mode="out-in">
           <n-text v-if="!status.asideMenuCollapsed && showSider" class="site-name">
             {{ siteName }}

src/views/Setting/index.vue

@@ -206,8 +206,11 @@
           <n-switch v-model:value="autoPlay" :disabled="!checkPlatform.electron()" :round="false" />
         </n-card>
         <n-card class="set-item">
-          <div class="name">记忆上次播放位置</div>
-          <n-switch v-model:value="memorySeek" :round="false" />
+          <div class="name">
+            记忆上次播放位置
+            <n-text v-if="autoPlay" class="tip"> 与自动播放相冲突，已禁用 </n-text>
+          </div>
+          <n-switch v-model:value="memorySeek" :disabled="autoPlay" :round="false" />
         </n-card>
         <n-card class="set-item">
           <div class="name">音乐渐入渐出</div>