fix: 修复快捷键异常占用 & 去除部分动画效果

imsyy · Dec 4, 2023 · dd1081c · dd1081c
1 parent 046b8f3
commit dd1081c
Show file tree

Hide file tree

Showing 20 changed files with 195 additions and 194 deletions.
diff --git a/electron/main/index.js b/electron/main/index.js
@@ -1,6 +1,6 @@
 import { join } from "path";
 import { app, protocol, shell, BrowserWindow, globalShortcut } from "electron";
-import { optimizer, is } from "@electron-toolkit/utils";
+import { platform, optimizer, is } from "@electron-toolkit/utils";
 import { startNcmServer } from "@main/startNcmServer";
 import { startMainServer } from "@main/startMainServer";
 import { configureAutoUpdater } from "@main/utils/checkUpdates";
@@ -49,7 +49,7 @@ class MainProcess {
     });
   }
 
-  // 检查上次程序
+  // 单例锁
   async checkApp() {
     if (!app.requestSingleInstanceLock()) {
       log.error("已有一个程序正在运行，本次启动阻止");
@@ -164,7 +164,7 @@ class MainProcess {
       // 创建主窗口
       this.createWindow();
       // 检测更新
-      configureAutoUpdater(process.platform);
+      configureAutoUpdater();
       // 创建系统信息
       createSystemInfo(this.mainWindow);
       // 引入主 Ipc
@@ -173,7 +173,7 @@ class MainProcess {
       createGlobalShortcut(this.mainWindow);
     });
 
-    // 在开发模式下默认通过 F12 打开或关闭 DevTools
+    // 开发环境下 F12 打开控制台
     app.on("browser-window-created", (_, window) => {
       optimizer.watchWindowShortcuts(window);
     });
@@ -196,7 +196,7 @@ class MainProcess {
 
     // 当所有窗口都关闭时退出应用，macOS 除外
     app.on("window-all-closed", () => {
-      if (process.platform !== "darwin") {
+      if (!platform.isMacOS) {
         app.quit();
       }
     });

diff --git a/electron/main/utils/createGlobalShortcut.js b/electron/main/utils/createGlobalShortcut.js
@@ -6,9 +6,19 @@ import { globalShortcut } from "electron";
  */
 const createGlobalShortcut = (win) => {
   // 刷新程序
-  globalShortcut.register("CommandOrControl+R", () => {
+  globalShortcut.register("CmdOrCtrl+Shift+R", () => {
     if (win && win.isFocused()) win?.reload();
   });
+
+  // 打开开发者工具
+  globalShortcut.register("CmdOrCtrl+Shift+I", () => {
+    if (win && win.isFocused()) {
+      win?.webContents.openDevTools({
+        mode: "right",
+        activate: true,
+      });
+    }
+  });
 };
 
 export default createGlobalShortcut;
diff --git a/electron/main/utils/createSystemInfo.js b/electron/main/utils/createSystemInfo.js
@@ -1,4 +1,5 @@
 import { join } from "path";
+import { platform } from "@electron-toolkit/utils";
 import { Tray, Menu, app, ipcMain, nativeImage, nativeTheme } from "electron";
 
 // 当前播放歌曲数据
@@ -39,7 +40,7 @@ const createSystemInfo = (win) => {
     mainTray.popUpContextMenu(Menu.buildFromTemplate(createTrayMenu(win)));
   });
   // linux 右键菜单
-  if (process.platform === "linux") {
+  if (platform.isLinux) {
     mainTray.setContextMenu(Menu.buildFromTemplate(createTrayMenu(win)));
   }
 };
@@ -75,23 +76,23 @@ const createTrayMenu = (win) => {
     {
       label: "上一曲",
       icon: createIcon("prev"),
-      accelerator: "CommandOrControl+Left",
+      accelerator: "CmdOrCtrl+Left",
       click: () => {
         win.webContents.send("playNextOrPrev", "prev");
       },
     },
     {
       label: playSongState ? "暂停" : "播放",
       icon: createIcon(playSongState ? "pause" : "play"),
-      accelerator: "Space",
+      accelerator: "CmdOrCtrl+Space",
       click: () => {
         win.webContents.send("playOrPause");
       },
     },
     {
       label: "下一曲",
       icon: createIcon("next"),
-      accelerator: "CommandOrControl+Right",
+      accelerator: "CmdOrCtrl+Right",
       click: () => {
         win.webContents.send("playNextOrPrev", "next");
       },

diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <Provider>
     <!-- 主框架 -->
-    <n-layout :class="['all-layout', status.showFullPlayer ? 'full-player' : null]">
+    <n-layout class="all-layout">
       <!-- 导航栏 -->
       <n-layout-header bordered>
         <MainNav />
@@ -183,8 +183,5 @@ onUnmounted(() => {
       padding: 24px;
     }
   }
-  &.full-player {
-    transform: scale(0.95);
-  }
 }
 </style>
diff --git a/src/components/Global/Provider.vue b/src/components/Global/Provider.vue
@@ -35,12 +35,13 @@ import {
   useNotification,
 } from "naive-ui";
 import { storeToRefs } from "pinia";
-import { siteSettings, siteData } from "@/stores";
+import { siteSettings, siteStatus } from "@/stores";
 import themeColorData from "@/assets/themeColor.json";
 
-const data = siteData();
-const osThemeRef = useOsTheme();
+const status = siteStatus();
 const settings = siteSettings();
+const osThemeRef = useOsTheme();
+const { coverTheme } = storeToRefs(status);
 const { themeType, themeAuto, themeTypeName, themeTypeData, themeAutoCover } =
   storeToRefs(settings);
 
@@ -63,62 +64,63 @@ const changeTheme = () => {
 
 // 配置主题色
 const changeThemeColor = (val, isCover = false) => {
-  const color =
-    isCover && Object.keys(val)?.length
+  try {
+    // 获取主色数据
+    const mainColorData =
+      isCover && Object.keys(val)?.length
+        ? val[themeType.value]
+        : val !== "custom"
+        ? themeColorData[val]
+        : themeTypeData.value;
+    // 微调主题色
+    const primaryColor = isCover ? `rgb(${mainColorData.bg})` : mainColorData.primaryColor;
+    const primaryColorHover = isCover ? `rgba(${mainColorData.bg}, 0.29)` : primaryColor + "29";
+    const primaryColorPressed = isCover ? `rgba(${mainColorData.bg}, 0.26)` : primaryColor + "26";
+    const primaryColorSuppl = isCover ? `rgba(${mainColorData.bg}, 0.05)` : primaryColor + "05";
+    // 自适应主题背景色
+    const coverAutobgCover = isCover
       ? themeType.value === "dark"
         ? val.light.bg
-        : val.dark.bg
-      : val !== "custom"
-      ? themeColorData[val]
-      : themeTypeData.value;
-  // 微调主题色
-  const primaryColor = isCover ? `rgb(${color})` : color.primaryColor;
-  const primaryColorHover = isCover ? `rgba(${color}, 0.29)` : primaryColor + "29";
-  const primaryColorPressed = isCover ? `rgba(${color}, 0.26)` : primaryColor + "26";
-  const primaryColorSuppl = isCover ? `rgba(${color}, 0.05)` : primaryColor + "05";
-  // 自适应主题背景色
-  const coverAutobgCover = isCover
-    ? themeType.value === "dark"
-      ? val.dark.bg
-      : "239, 239, 239"
-    : null;
-  // 更新主题覆盖
-  themeOverrides.value = {
-    common:
-      isCover && Object.keys(val)?.length
-        ? {
-            primaryColor,
-            primaryColorHover,
-            primaryColorPressed,
-            primaryColorSuppl,
-            textColor1: `rgba(${color}, 0.9)`,
-            textColor2: `rgba(${color}, 0.82)`,
-            textColor3: `rgba(${color}, 0.52)`,
-            bodyColor: `rgba(${val.dark.mainBg}, 0.52)`,
-            cardColor: `rgb(${coverAutobgCover})`,
-            tagColor: `rgb(${coverAutobgCover})`,
-            modalColor: `rgb(${coverAutobgCover})`,
-            popoverColor: `rgb(${coverAutobgCover})`,
-          }
-        : color,
-    Icon: { color: isCover ? primaryColor : null },
-  };
-  if (!isCover) themeTypeData.value = color;
-  // 更新全局颜色变量
-  setCssVariable("--main-color", primaryColor);
-  setCssVariable(
-    "--main-color-bg",
-    isCover ? `rgb(${val[themeType.value]?.bg})` : "rgb(16, 16, 20)",
-  );
-  setCssVariable("--main-second-color", primaryColorHover);
-  setCssVariable("--main-boxshadow-color", primaryColorPressed);
-  setCssVariable("--main-boxshadow-hover-color", primaryColorSuppl);
+        : "239, 239, 239"
+      : null;
+    // 更新主题覆盖
+    themeOverrides.value = {
+      common:
+        isCover && Object.keys(val)?.length
+          ? {
+              primaryColor,
+              primaryColorHover,
+              primaryColorPressed,
+              primaryColorSuppl,
+              textColor1: `rgba(${mainColorData.bg}, 0.9)`,
+              textColor2: `rgba(${mainColorData.bg}, 0.82)`,
+              textColor3: `rgba(${mainColorData.bg}, 0.52)`,
+              bodyColor: `rgba(${val.dark.mainBg}, 0.52)`,
+              cardColor: `rgb(${coverAutobgCover})`,
+              tagColor: `rgb(${coverAutobgCover})`,
+              modalColor: `rgb(${coverAutobgCover})`,
+              popoverColor: `rgb(${coverAutobgCover})`,
+            }
+          : mainColorData,
+      Icon: { color: isCover ? primaryColor : null },
+    };
+    if (!isCover) themeTypeData.value = mainColorData;
+    // 更新全局颜色变量
+    setCssVariable("--main-color", primaryColor);
+    setCssVariable("--main-second-color", primaryColorHover);
+    setCssVariable("--main-boxshadow-color", primaryColorPressed);
+    setCssVariable("--main-boxshadow-hover-color", primaryColorSuppl);
+  } catch (error) {
+    themeOverrides.value = {};
+    console.error("切换主题色出现错误：", error);
+    $message.error("切换主题色出现错误，已使用默认配置");
+  }
 };
 
 // 修改全局颜色
 const setCssVariable = (name, value) => {
-  document.documentElement.style.setProperty(name, value);
-  // document.body.style.setProperty(name, value);
+  // document.documentElement.style.setProperty(name, value);
+  document.body.style.setProperty(name, value);
 };
 
 // 挂载 naive 组件
@@ -148,8 +150,10 @@ watch(
   () => {
     changeTheme();
     changeThemeColor(
-      themeAutoCover.value ? data.coverTheme : themeTypeName.value,
-      themeAutoCover.value,
+      themeAutoCover.value && Object.keys(coverTheme.value)?.length
+        ? coverTheme.value
+        : themeTypeName.value,
+      themeAutoCover.value && Object.keys(coverTheme.value)?.length,
     );
   },
 );
@@ -170,9 +174,8 @@ watch(
   (val) => changeThemeColor(val.label),
 );
 watch(
-  () => data.coverTheme,
+  () => coverTheme.value,
   (val) => {
-    console.log(val);
     if (themeAutoCover.value) changeThemeColor(val, themeAutoCover.value);
   },
 );

diff --git a/src/components/Nav/MainNav.vue b/src/components/Nav/MainNav.vue
@@ -29,25 +29,28 @@
     <!-- 搜索框 -->
     <SearchInp />
     <!-- GitHub -->
-    <n-button class="github" circle quaternary @click="openGithub">
-      <template #icon>
-        <n-icon size="20">
-          <SvgIcon icon="github" />
-        </n-icon>
-      </template>
-    </n-button>
+    <Transition name="fade" mode="out-in">
+      <n-button v-if="setting.showGithub" class="github" circle quaternary @click="openGithub">
+        <template #icon>
+          <n-icon size="20">
+            <SvgIcon icon="github" />
+          </n-icon>
+        </template>
+      </n-button>
+    </Transition>
     <!-- 用户信息 -->
     <userData />
   </nav>
 </template>
 
 <script setup>
-import { siteStatus } from "@/stores";
+import { siteStatus, siteSettings } from "@/stores";
 import { useRouter } from "vue-router";
 import packageJson from "@/../package.json";
 
 const router = useRouter();
 const status = siteStatus();
+const setting = siteSettings();
 
 // 站点信息
 const siteName = import.meta.env.RENDERER_VITE_SITE_TITLE;

diff --git a/src/components/Player/FullPlayer.vue b/src/components/Player/FullPlayer.vue
@@ -4,8 +4,8 @@
     <div
       v-if="showFullPlayer"
       :style="{
-        '--cover-main-color': `rgb(${coverTheme?.dark?.shadeTwo})` || '#efefef',
-        '--cover-second-color': `rgba(${coverTheme?.dark?.shadeTwo}, 0.14)` || '#efefef14',
+        '--cover-main-color': `rgb(${coverTheme?.light?.shadeTwo})` || '#efefef',
+        '--cover-second-color': `rgba(${coverTheme?.light?.shadeTwo}, 0.14)` || '#efefef14',
         '--cover-bg': coverBackground,
         cursor: playerControlShow ? 'auto' : 'none',
       }"
@@ -183,20 +183,24 @@
 <script setup>
 import { storeToRefs } from "pinia";
 import { useRouter } from "vue-router";
-import { musicData, siteStatus, siteSettings, siteData } from "@/stores";
+import { musicData, siteStatus, siteSettings } from "@/stores";
 import screenfull from "screenfull";
 import throttle from "@/utils/throttle";
 
 const router = useRouter();
-const data = siteData();
 const music = musicData();
 const status = siteStatus();
 const settings = siteSettings();
 const { playList, playSongLyric } = storeToRefs(music);
 const { playerBackgroundType, showYrc } = storeToRefs(settings);
-const { coverTheme, coverBackground } = storeToRefs(data);
-const { playerControlShow, controlTimeOut, showFullPlayer, playUseOtherSource } =
-  storeToRefs(status);
+const {
+  playerControlShow,
+  controlTimeOut,
+  showFullPlayer,
+  playUseOtherSource,
+  coverTheme,
+  coverBackground,
+} = storeToRefs(status);
 
 // 全屏状态
 const screenfullStatus = ref(false);

diff --git a/src/components/Player/MainControl.vue b/src/components/Player/MainControl.vue
@@ -171,7 +171,7 @@
         <!-- 播放暂停 -->
         <n-button
           :loading="playLoading"
-          :keyboard="false"
+          tag="div"
           type="primary"
           class="play-control"
           strong