feat: scrollbar and logic update for electron

package.json

@@ -79,7 +79,8 @@
   "eslintConfig": {
     "root": true,
     "env": {
-      "node": true
+      "node": true,
+      "browser": true
     },
     "extends": [
       "plugin:vue/essential",
@@ -88,6 +89,9 @@
     "parserOptions": {
       "parser": "babel-eslint"
     },
+    "globals": {
+      "ipcRenderer": "off"
+    },
     "rules": {}
   },
   "browserslist": [

src/App.vue

@@ -25,8 +25,6 @@
 import Navbar from "./components/Navbar.vue";
 import Player from "./components/Player.vue";
 import GlobalEvents from "vue-global-events";
-const electron = window.require("electron");
-const ipcRenderer = electron.ipcRenderer;
 
 export default {
   name: "App",
@@ -35,7 +33,18 @@ export default {
     Player,
     GlobalEvents,
   },
+  data() {
+    return {
+      isElectron: process.env.IS_ELECTRON // "true" || undefined
+    }
+  },
   created() {
+    if (this.isElectron) {
+      // 添加专有的类名
+      document.body.classList.add('is-electron')
+      // ipc message channel
+      const electron = window.require("electron");
+      const ipcRenderer = electron.ipcRenderer;
       // listens to the main process 'changeRouteTo' event and changes the route from
       // inside this Vue instance, according to what path the main process requires.
       // responds to Menu click() events at the main process and changes the route accordingly.
@@ -73,6 +82,7 @@ export default {
       ipcRenderer.on("shuffle", () => {
         this.$refs.player.shuffle();
       });
+    }
   },
   methods: {
     play(e) {
@@ -161,6 +171,11 @@ a {
   }
 }
 
+// for electron
+body.is-electron::-webkit-scrollbar {
+  width: 0;
+}
+
 /* Let's get this party started */
 ::-webkit-scrollbar {
   width: 8px;