2020-10-10 19:54:44 +08:00
|
|
|
<template>
|
|
|
|
<div id="app">
|
2020-11-23 16:04:45 +08:00
|
|
|
<Navbar ref="navbar" />
|
2021-01-06 20:53:47 +08:00
|
|
|
<main v-show="!this.$store.state.showLyrics">
|
2020-10-10 19:54:44 +08:00
|
|
|
<keep-alive>
|
|
|
|
<router-view v-if="$route.meta.keepAlive"></router-view>
|
|
|
|
</keep-alive>
|
|
|
|
<router-view v-if="!$route.meta.keepAlive"></router-view>
|
|
|
|
</main>
|
|
|
|
<transition name="slide-up">
|
2020-10-14 21:10:45 +08:00
|
|
|
<Player
|
2021-01-05 22:17:47 +08:00
|
|
|
v-if="this.$store.state.player.enabled"
|
2020-10-14 15:39:41 +08:00
|
|
|
ref="player"
|
2021-01-20 14:02:03 +08:00
|
|
|
v-show="showPlayer"
|
2020-10-10 19:54:44 +08:00
|
|
|
/></transition>
|
2020-12-09 16:00:38 +08:00
|
|
|
<Toast />
|
2021-01-05 22:21:01 +08:00
|
|
|
<ModalAddTrackToPlaylist v-if="isAccountLoggedIn" />
|
|
|
|
<ModalNewPlaylist v-if="isAccountLoggedIn" />
|
2021-01-06 20:53:47 +08:00
|
|
|
<transition name="slide-up">
|
2021-01-20 14:02:03 +08:00
|
|
|
<Lyrics v-show="this.$store.state.showLyrics" />
|
|
|
|
</transition>
|
2020-10-10 19:54:44 +08:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-12-17 18:18:19 +08:00
|
|
|
import ModalAddTrackToPlaylist from "./components/ModalAddTrackToPlaylist.vue";
|
|
|
|
import ModalNewPlaylist from "./components/ModalNewPlaylist.vue";
|
2020-10-10 19:54:44 +08:00
|
|
|
import Navbar from "./components/Navbar.vue";
|
2020-10-14 21:10:45 +08:00
|
|
|
import Player from "./components/Player.vue";
|
2020-12-09 16:00:38 +08:00
|
|
|
import Toast from "./components/Toast.vue";
|
2020-11-23 16:04:45 +08:00
|
|
|
import { ipcRenderer } from "./electron/ipcRenderer";
|
2021-01-05 22:21:01 +08:00
|
|
|
import { isAccountLoggedIn } from "@/utils/auth";
|
2021-01-06 20:53:47 +08:00
|
|
|
import Lyrics from "./views/lyrics.vue";
|
2020-10-10 19:54:44 +08:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "App",
|
|
|
|
components: {
|
|
|
|
Navbar,
|
2020-10-14 21:10:45 +08:00
|
|
|
Player,
|
2020-12-09 16:00:38 +08:00
|
|
|
Toast,
|
2020-12-17 18:18:19 +08:00
|
|
|
ModalAddTrackToPlaylist,
|
|
|
|
ModalNewPlaylist,
|
2021-01-06 20:53:47 +08:00
|
|
|
Lyrics,
|
2020-10-10 19:54:44 +08:00
|
|
|
},
|
2020-10-31 14:03:23 +08:00
|
|
|
data() {
|
|
|
|
return {
|
2020-11-23 16:44:17 +08:00
|
|
|
isElectron: process.env.IS_ELECTRON, // true || undefined
|
2020-10-31 14:03:41 +08:00
|
|
|
};
|
2020-10-31 14:03:23 +08:00
|
|
|
},
|
2021-01-05 22:21:01 +08:00
|
|
|
computed: {
|
|
|
|
isAccountLoggedIn() {
|
|
|
|
return isAccountLoggedIn();
|
|
|
|
},
|
2021-01-20 14:02:03 +08:00
|
|
|
showPlayer() {
|
|
|
|
return (
|
|
|
|
["mv", "loginUsername", "login", "loginAccount"].includes(
|
|
|
|
this.$route.name
|
|
|
|
) === false
|
|
|
|
);
|
|
|
|
},
|
2021-01-05 22:21:01 +08:00
|
|
|
},
|
2020-10-30 10:59:26 +08:00
|
|
|
created() {
|
2020-10-31 14:03:23 +08:00
|
|
|
if (this.isElectron) {
|
2020-11-23 16:04:45 +08:00
|
|
|
ipcRenderer(this);
|
2020-10-31 14:03:23 +08:00
|
|
|
}
|
2020-12-28 23:51:09 +08:00
|
|
|
window.addEventListener("keydown", this.handleKeydown);
|
2020-10-29 18:46:54 +08:00
|
|
|
},
|
2020-10-10 19:54:44 +08:00
|
|
|
methods: {
|
2020-12-28 23:51:09 +08:00
|
|
|
handleKeydown(e) {
|
|
|
|
if (e.code === "Space") {
|
|
|
|
if (e.target.tagName === "INPUT") return false;
|
|
|
|
if (this.$route.name === "mv") return false;
|
|
|
|
e.preventDefault();
|
|
|
|
this.$refs.player.play();
|
|
|
|
}
|
2020-10-22 21:44:34 +08:00
|
|
|
},
|
|
|
|
},
|
2020-10-10 19:54:44 +08:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700;1,800;1,900&display=swap");
|
|
|
|
|
2020-10-25 21:04:33 +08:00
|
|
|
:root {
|
|
|
|
--color-body-bg: #ffffff;
|
|
|
|
--color-text: #000;
|
|
|
|
--color-primary: #335eea;
|
|
|
|
--color-primary-bg: #eaeffd;
|
|
|
|
--color-secondary: #7a7a7b;
|
|
|
|
--color-secondary-bg: #f5f5f7;
|
|
|
|
--color-navbar-bg: rgba(255, 255, 255, 0.86);
|
2020-12-09 16:55:13 +08:00
|
|
|
--color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
|
|
|
|
--color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
|
2020-10-25 21:04:33 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
[data-theme="dark"] {
|
|
|
|
--color-body-bg: #222222;
|
|
|
|
--color-text: #ffffff;
|
|
|
|
--color-primary: #335eea;
|
|
|
|
--color-primary-bg: #bbcdff;
|
|
|
|
--color-secondary: #7a7a7b;
|
|
|
|
--color-secondary-bg: #323232;
|
|
|
|
--color-navbar-bg: rgba(34, 34, 34, 0.86);
|
2020-12-09 16:55:13 +08:00
|
|
|
--color-primary-bg-for-transparent: rgba(255, 255, 255, 0.12);
|
|
|
|
--color-secondary-bg-for-transparent: rgba(255, 255, 255, 0.08);
|
2020-10-25 21:04:33 +08:00
|
|
|
}
|
|
|
|
|
2020-10-10 19:54:44 +08:00
|
|
|
#app {
|
2020-12-28 23:51:09 +08:00
|
|
|
width: 100%;
|
|
|
|
transition: all 0.4s;
|
|
|
|
}
|
|
|
|
#app,
|
|
|
|
input {
|
2020-10-10 19:54:44 +08:00
|
|
|
font-family: "Barlow", -apple-system, BlinkMacSystemFont, Helvetica Neue,
|
|
|
|
PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC,
|
|
|
|
WenQuanYi Micro Hei, sans-serif;
|
2020-10-25 21:04:33 +08:00
|
|
|
}
|
|
|
|
body {
|
|
|
|
background-color: var(--color-body-bg);
|
2020-10-10 19:54:44 +08:00
|
|
|
}
|
2020-10-17 00:18:24 +08:00
|
|
|
|
2020-10-10 19:54:44 +08:00
|
|
|
html {
|
|
|
|
overflow-y: overlay;
|
2021-01-02 20:55:43 +08:00
|
|
|
min-width: 768px;
|
2020-10-10 19:54:44 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
main {
|
2021-01-02 20:55:43 +08:00
|
|
|
margin-top: 84px;
|
2020-10-10 19:54:44 +08:00
|
|
|
margin-bottom: 96px;
|
|
|
|
padding: {
|
|
|
|
right: 10vw;
|
|
|
|
left: 10vw;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-01-02 20:55:43 +08:00
|
|
|
@media (max-width: 1336px) {
|
|
|
|
main {
|
|
|
|
padding: 0 5vw;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-23 00:00:17 +08:00
|
|
|
select,
|
2020-10-10 19:54:44 +08:00
|
|
|
button {
|
2020-10-20 21:40:01 +08:00
|
|
|
font-family: inherit;
|
2020-10-23 00:00:17 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
button {
|
2020-10-10 19:54:44 +08:00
|
|
|
background: none;
|
|
|
|
border: none;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
input,
|
|
|
|
button {
|
|
|
|
&:focus {
|
|
|
|
outline: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
color: inherit;
|
|
|
|
text-decoration: none;
|
2020-10-31 12:05:28 +08:00
|
|
|
cursor: pointer;
|
2020-10-10 19:54:44 +08:00
|
|
|
&:hover {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Let's get this party started */
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
width: 8px;
|
|
|
|
}
|
|
|
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
background: transparent;
|
2020-10-25 21:04:33 +08:00
|
|
|
border-left: 1px solid rgba(128, 128, 128, 0.18);
|
2020-12-09 20:01:59 +08:00
|
|
|
background: var(--color-body-bg);
|
2020-10-10 19:54:44 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
-webkit-border-radius: 10px;
|
|
|
|
border-radius: 10px;
|
2020-10-25 21:04:33 +08:00
|
|
|
background: var(--color-secondary-bg);
|
2020-10-10 19:54:44 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.slide-up-enter-active,
|
|
|
|
.slide-up-leave-active {
|
|
|
|
transition: all 0.4s;
|
|
|
|
}
|
|
|
|
.slide-up-enter, .slide-up-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
|
|
|
transform: translateY(100%);
|
|
|
|
}
|
2020-12-17 18:18:19 +08:00
|
|
|
|
|
|
|
[data-electron="yes"] {
|
|
|
|
button,
|
|
|
|
.navigation-links a,
|
|
|
|
.playlist-info .description {
|
|
|
|
cursor: default !important;
|
|
|
|
}
|
|
|
|
}
|
2020-10-10 19:54:44 +08:00
|
|
|
</style>
|