332 lines
7.3 KiB
Vue
332 lines
7.3 KiB
Vue
<script setup>
|
|
import { h, ref, onMounted, onUnmounted, toRaw, watch } from "vue";
|
|
import { useStore } from "vuex";
|
|
import styled from "vue3-styled-components";
|
|
import Nav from "@/views/common/Nav.vue";
|
|
import TopMenu from "./views/common/TopMenu.vue";
|
|
import Search from "./views/common/Search.vue";
|
|
import Settings from "./views/common/Settings.vue";
|
|
import MainMenu from "./views/common/MainMenu.vue";
|
|
import SongInfo from "./views/common/SongInfo.vue";
|
|
import SongCtrl from "./views/common/SongCtrl.vue";
|
|
import SongStatus from "./views/common/SongStatus.vue";
|
|
import SongProgress from "@/views/common/SongProgress.vue";
|
|
import PlayingList from "@/views/common/PlayingList.vue";
|
|
import ZPlayingList from "@/views/common/ZPlayingList.vue";
|
|
import Searching from "@/views/common/Searching.vue";
|
|
import SongDetail from "@/views/common/SongDetail.vue";
|
|
import pubsub from "pubsub-js";
|
|
import {
|
|
NConfigProvider,
|
|
darkTheme,
|
|
NMessageProvider,
|
|
} from "naive-ui";
|
|
import router from "./router";
|
|
|
|
// import { CloudCircleSharp } from "@vicons/ionicons5";
|
|
|
|
const store = useStore();
|
|
|
|
/**
|
|
* @type import('naive-ui').GlobalThemeOverrides
|
|
*/
|
|
// const themeOverrides = {
|
|
// common: {
|
|
// primaryColor: "#5C18A0FF",
|
|
// primaryColorHover: "#7536ADFF",
|
|
// primaryColorPressed: "#690D7EFF",
|
|
// primaryColorSuppl: "#511D77FF",
|
|
// textColorBase: "#1F1F1FFF",
|
|
// },
|
|
// };
|
|
|
|
//载入localstorage的设置
|
|
store.commit("loadSettings");
|
|
store.state.settings.playing = false; //默认停止播放
|
|
store.commit("loadCaches");
|
|
|
|
// onMounted(() => {
|
|
// window.addEventListener('popstate', popstate, false);
|
|
// })
|
|
// const popstate = (event)=>{
|
|
// console.log('popstate--',event);
|
|
// }
|
|
// onUnmounted(() => {
|
|
// window.removeEventListener('popstate',pop)
|
|
// })
|
|
|
|
// router.replace('/discover/recommend')
|
|
|
|
const showPlaying = ref(false); //是否显示播放列表
|
|
const showSongDetail = ref(false); //是否显示歌曲详细信息
|
|
const showSearch = ref(false); //是否显示搜索
|
|
|
|
watch(
|
|
()=> store.state.showSongDetail,
|
|
()=>{
|
|
showSongDetail.value = toRaw(store.state.showSongDetail)
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
)
|
|
|
|
|
|
//处理route消息
|
|
const routeToken = pubsub.subscribe("router", (msg, data) => {
|
|
switch (msg) {
|
|
case "router.beforeEach":
|
|
case "router.afterEach":
|
|
// store.commit("saveSettings", {
|
|
// currentRoute: data.to.fullPath,
|
|
// });
|
|
break;
|
|
}
|
|
});
|
|
|
|
const token = pubsub.subscribe("zp", (msg, data) => {
|
|
switch (msg) {
|
|
case "zp.togglePlaying":
|
|
showPlaying.value = !showPlaying.value;
|
|
break;
|
|
case "zp.toggleSongDetail":
|
|
showSongDetail.value = store.state.showSongDetail = !showSongDetail.value;
|
|
break;
|
|
case "zp.showSearch":
|
|
showSearch.value = true;
|
|
break;
|
|
case "zp.toggleSearch":
|
|
showSearch.value = !showSearch.value ;
|
|
break;
|
|
}
|
|
});
|
|
|
|
//卸载组件
|
|
onUnmounted(() => {
|
|
pubsub.unsubscribe(routeToken);
|
|
pubsub.unsubscribe(token);
|
|
});
|
|
|
|
|
|
const wpEl = ref('')
|
|
const hideWins = (e) => {
|
|
// console.log(e.clientX > 0,e, wpEl.value.clientWidth);
|
|
//显示当前播放
|
|
if (showPlaying.value
|
|
&& e.clientX > 0
|
|
&& e.clientX < wpEl.value.clientWidth - 500
|
|
&& e.clientY > 40
|
|
&& e.clientY < wpEl.value.clientHeight - 64
|
|
) {
|
|
showPlaying.value = false;
|
|
}
|
|
//显示搜索
|
|
if (showSearch.value
|
|
&& e.clientX > 0
|
|
&& e.clientX < wpEl.value.clientWidth - 360
|
|
&& e.clientY > 40
|
|
&& e.clientY < wpEl.value.clientHeight - 64
|
|
) {
|
|
showSearch.value = false;
|
|
}
|
|
};
|
|
|
|
const keyup = (e) => {
|
|
console.log(e);
|
|
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<n-config-provider
|
|
:theme-overrides="store.state.theme.themeOverrides"
|
|
>
|
|
<n-message-provider>
|
|
<div id="wp" ref="wpEl" @click="hideWins">
|
|
<!-- <NThemeEditor/> -->
|
|
<div id="top">
|
|
<Nav></Nav>
|
|
<TopMenu></TopMenu>
|
|
<Search></Search>
|
|
<Settings></Settings>
|
|
</div>
|
|
<div id="content">
|
|
<div id="side">
|
|
<!-- <Personal></Personal> -->
|
|
<MainMenu></MainMenu>
|
|
</div>
|
|
<div id="main">
|
|
<router-view v-slot="{ Component, route }">
|
|
<keep-alive exclude="FM,Friends">
|
|
<component :is="Component" />
|
|
</keep-alive>
|
|
</router-view>
|
|
<!-- <router-view v-slot="{ Component, route }">
|
|
<keep-alive v-if="route.meta.keepAlive">
|
|
<component :is="Component" />
|
|
</keep-alive>
|
|
<component :is="Component" v-else />
|
|
</router-view> -->
|
|
<!-- <router-view>
|
|
</router-view> -->
|
|
</div>
|
|
</div>
|
|
<div id="wpSongDetail" v-show="showSongDetail">
|
|
<SongDetail/>
|
|
</div>
|
|
<div id="wpPlayingList" v-show="showPlaying">
|
|
<div id="playingList">
|
|
<ZPlayingList />
|
|
</div>
|
|
</div>
|
|
<div id="wpSearch" v-show="showSearch">
|
|
<div id="search">
|
|
<Searching />
|
|
</div>
|
|
</div>
|
|
<div id="footer">
|
|
<div id="songDetail"></div>
|
|
<div id="songProgress">
|
|
<SongProgress />
|
|
</div>
|
|
<div id="songCtrl">
|
|
<SongInfo />
|
|
<SongCtrl />
|
|
<SongStatus />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</n-message-provider>
|
|
</n-config-provider>
|
|
</template>
|
|
|
|
<style lang="less">
|
|
@import "@/assets/css/common.less";
|
|
body {
|
|
// margin: 0;
|
|
// padding: 0;
|
|
font-size: 15px;
|
|
color: #333;
|
|
// line-height: 1.3;
|
|
overflow-y: hidden;
|
|
|
|
img {
|
|
display: block;
|
|
}
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
// scroll-behavior: smooth;
|
|
}
|
|
|
|
.top-menu {
|
|
margin-top: -44px;
|
|
position: absolute;
|
|
|
|
.zm-top-menu.n-menu.n-menu--horizontal .n-menu-item-content {
|
|
padding: 0 12px;
|
|
}
|
|
}
|
|
.main-content {
|
|
position: absolute;
|
|
top: 40px;
|
|
left: 160px;
|
|
right: 0;
|
|
bottom: 64px;
|
|
overflow-y: auto;
|
|
|
|
padding-right: 2px;
|
|
|
|
.lmt-width {
|
|
margin: 0 auto;
|
|
padding: 8px 6px 8px 8px;
|
|
max-width: 800px;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
#wp {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
user-select: none;
|
|
#top {
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #f9f9f9;
|
|
}
|
|
#content {
|
|
flex: 1;
|
|
display: flex;
|
|
|
|
#side {
|
|
width: 160px;
|
|
background-color: #f6f6f6;
|
|
}
|
|
#main {
|
|
flex: 1;
|
|
padding: 6px;
|
|
}
|
|
}
|
|
#wpSongDetail {
|
|
z-index: 100;
|
|
}
|
|
#wpPlayingList {
|
|
// position: absolute;
|
|
// left: 0;
|
|
// top: 0;
|
|
// right: 0;
|
|
// bottom: 0;
|
|
|
|
#playingList {
|
|
position: absolute;
|
|
top: 40px;
|
|
right: 0;
|
|
bottom: 64px;
|
|
// left: 0;
|
|
width: 500px;
|
|
background-color: #fff;
|
|
z-index: 1000;
|
|
border: #ddd solid 1px;
|
|
// border-top-left-radius: 8px;
|
|
// border-bottom-left-radius: 8px;
|
|
}
|
|
}
|
|
|
|
#wpSearch{
|
|
#search{
|
|
position: absolute;
|
|
top: 40px;
|
|
right: 0;
|
|
bottom: 64px;
|
|
width: 360px;
|
|
background-color: #fff;
|
|
z-index: 2000;
|
|
border: #ddd solid 1px;
|
|
|
|
overflow-y: auto;
|
|
// padding: 8px;
|
|
}
|
|
}
|
|
|
|
#footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
#songDetail {
|
|
}
|
|
#songProgress {
|
|
height: 3px;
|
|
// background-color: red;
|
|
z-index: 2000;
|
|
}
|
|
#songCtrl {
|
|
height: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #f9f9f9;
|
|
}
|
|
}
|
|
}
|
|
</style>
|