diff --git a/src/App.vue b/src/App.vue index 198c6b7..dbf971e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -111,6 +111,7 @@ export default { --color-navbar-bg: rgba(255, 255, 255, 0.86); --color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28); --color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28); + --html-overflow-y: overlay; } [data-theme='dark'] { @@ -140,7 +141,7 @@ body { } html { - overflow-y: overlay; + overflow-y: var(--html-overflow-y); min-width: 768px; overscroll-behavior: none; } diff --git a/src/components/TrackList.vue b/src/components/TrackList.vue index 712b875..8b1108e 100644 --- a/src/components/TrackList.vue +++ b/src/components/TrackList.vue @@ -43,6 +43,7 @@ import { mapActions, mapMutations, mapState } from 'vuex'; import { addOrRemoveTrackFromPlaylist } from '@/api/playlist'; import { isAccountLoggedIn } from '@/utils/auth'; +import { disableScrolling, enableScrolling } from '@/utils/ui'; import TrackListItem from '@/components/TrackListItem.vue'; import ContextMenu from '@/components/ContextMenu.vue'; @@ -122,8 +123,10 @@ export default { openMenu(e, track) { this.rightClickedTrack = track; this.$refs.menu.openMenu(e); + disableScrolling(); }, closeMenu() { + enableScrolling(); this.rightClickedTrack = { id: 0, name: '', diff --git a/src/electron/services.js b/src/electron/services.js index 27f8667..c538bf2 100644 --- a/src/electron/services.js +++ b/src/electron/services.js @@ -1,8 +1,8 @@ -const express = require("express"); -const bodyParser = require("body-parser"); -const cache = require("../../netease_api/util/apicache").middleware; -const fileUpload = require("express-fileupload"); -import routes from "../../netease_api/routes"; +const express = require('express'); +const bodyParser = require('body-parser'); +const cache = require('../../netease_api/util/apicache').middleware; +const fileUpload = require('express-fileupload'); +import routes from '../../netease_api/routes'; export function startNeteaseMusicApi() { // Integrate API @@ -10,23 +10,23 @@ export function startNeteaseMusicApi() { // CORS & Preflight request app.use((req, res, next) => { - if (req.path !== "/" && !req.path.includes(".")) { + if (req.path !== '/' && !req.path.includes('.')) { res.set({ - "Access-Control-Allow-Credentials": true, - "Access-Control-Allow-Origin": req.headers.origin || "*", - "Access-Control-Allow-Headers": "X-Requested-With,Content-Type", - "Access-Control-Allow-Methods": "PUT,POST,GET,DELETE,OPTIONS", - "Content-Type": "application/json; charset=utf-8", + 'Access-Control-Allow-Credentials': true, + 'Access-Control-Allow-Origin': req.headers.origin || '*', + 'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type', + 'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS', + 'Content-Type': 'application/json; charset=utf-8', }); } - req.method === "OPTIONS" ? res.status(204).end() : next(); + req.method === 'OPTIONS' ? res.status(204).end() : next(); }); // cookie parser app.use((req, res, next) => { req.cookies = {}; - (req.headers.cookie || "").split(/\s*;\s*/).forEach((pair) => { - let crack = pair.indexOf("="); + (req.headers.cookie || '').split(/\s*;\s*/).forEach(pair => { + let crack = pair.indexOf('='); if (crack < 1 || crack == pair.length - 1) return; req.cookies[ decodeURIComponent(pair.slice(0, crack)).trim() @@ -42,17 +42,17 @@ export function startNeteaseMusicApi() { app.use(fileUpload()); // cache - app.use(cache("2 minutes", (req, res) => res.statusCode === 200)); + app.use(cache('2 minutes', (req, res) => res.statusCode === 200)); // router - Object.keys(routes).forEach((route) => { + Object.keys(routes).forEach(route => { app.use(route, routes[route]); }); const port = process.env.PORT || 10754; - const host = process.env.HOST || "127.0.0.1"; + const host = process.env.HOST || '127.0.0.1'; app.server = app.listen(port, host, () => { - console.log(`server running @ http://${host ? host : "localhost"}:${port}`); + console.log(`server running @ http://${host ? host : 'localhost'}:${port}`); }); } diff --git a/src/store/mutations.js b/src/store/mutations.js index 5cb3540..52bceac 100644 --- a/src/store/mutations.js +++ b/src/store/mutations.js @@ -1,3 +1,5 @@ +import { disableScrolling, enableScrolling } from '@/utils/ui'; + export default { updateLikedXXX(state, { name, data }) { state.liked[name] = data; @@ -40,6 +42,12 @@ export default { }, updateModal(state, { modalName, key, value }) { state.modals[modalName][key] = value; + if (key === 'show') { + // 100ms的延迟是为等待右键菜单blur之后再disableScrolling + value === true + ? setTimeout(() => disableScrolling(), 100) + : enableScrolling(); + } }, toggleLyrics(state) { state.showLyrics = !state.showLyrics; diff --git a/src/utils/ui.js b/src/utils/ui.js new file mode 100644 index 0000000..d005bb8 --- /dev/null +++ b/src/utils/ui.js @@ -0,0 +1,7 @@ +export function disableScrolling() { + document.documentElement.style.setProperty('--html-overflow-y', 'hidden'); +} + +export function enableScrolling() { + document.documentElement.style.setProperty('--html-overflow-y', 'overlay'); +} diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue index 376ec01..de62390 100644 --- a/src/views/lyrics.vue +++ b/src/views/lyrics.vue @@ -189,6 +189,7 @@ import VueSlider from 'vue-slider-component'; import { formatTrackTime } from '@/utils/common'; import { getLyric } from '@/api/track'; import { lyricParser } from '@/utils/lyrics'; +import { disableScrolling, enableScrolling } from '@/utils/ui'; import ButtonIcon from '@/components/ButtonIcon.vue'; export default { @@ -286,8 +287,10 @@ export default { showLyrics(show) { if (show) { this.setLyricsInterval(); + disableScrolling(); } else { clearInterval(this.lyricsInterval); + enableScrolling(); } }, },