zilong/vite-zmusic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

解决keepAlive缓存设置

Browse Source
This commit is contained in:
zilong 2021-10-21 23:57:50 +08:00
parent 8448b293a9
commit 4ade4395d4
19 changed files with 390 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/App.vue
View File

@ -11,8 +11,10 @@ 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 pubsub from "pubsub-js";
import { NConfigProvider, darkTheme } from "naive-ui";
import router from "./router";
// import { CloudCircleSharp } from "@vicons/ionicons5";
const store = useStore();
@ -34,6 +36,8 @@ const store = useStore();
store.commit("loadSettings");
store.commit("loadCaches");
router.replace('/discover/recommend')
const showPlaying = ref(false); //是否显示播放列表
//处理route消息
@ -68,7 +72,6 @@ onUnmounted(() => {
<template>
<n-config-provider
theme
:theme-overrides="store.state.theme.themeOverrides"
>
<div id="wp">
@ -81,15 +84,33 @@ onUnmounted(() => {
</div>
<div id="content">
<div id="side">
<Personal></Personal>
<!-- <Personal></Personal> -->
<MainMenu></MainMenu>
</div>
<div id="main">
<router-view />
<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="wpPlaying" v-show="showPlaying" @click.self="showPlaying = false">
<div id="playing"></div>
<div
id="wpPlayingList"
v-show="showPlaying"
@click.self="showPlaying = false"
>
<div id="playingList">
<PlayingList />
</div>
</div>
<div id="footer">
<div id="songDetail"></div>
@ -174,23 +195,25 @@ body {
padding: 6px;
}
}
#wpPlaying {
#wpPlayingList {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
#playing {
#playingList {
position: absolute;
top: 40px;
right: 0;
bottom: 64px;
// left: 0;
width: 600px;
width: 500px;
background-color: #f6f6f6;
z-index: 1000;
border: #ddd solid 1px;
// border-top-left-radius: 8px;
// border-bottom-left-radius: 8px;
}
}

30
src/router/index.js
View File

@ -3,24 +3,30 @@ import pubsub from 'pubsub-js'
import Home from "../views/Home.vue";
const routes = [
{
path: "/",
redirect: "/discover/recommend",
name: "index",
component: ()=> import('@/views/Home.vue'),
meta:{
title:'zmusic',
}
},
// {
// path: "/",
// redirect: "/discover/recommend",
// name: "index",
// // component: ()=> import('@/views/Home.vue'),
// // meta:{
// // title:'zmusic',
// // }
// },
{
path: "/discover",
name: "discover",
component: ()=> import('../views/discover/Discover.vue'),
meta:{
keepAlive: true,
},
children:[
{
path: "recommend",
name: "discover.recommend",
component: ()=> import('@/views/discover/Recommend.vue'),
meta:{
keepAlive: true,
},
},
{
path: "songlist",
@ -58,6 +64,9 @@ const routes = [
path: "/videos",
name: "videos",
component: ()=> import('../views/videos/Videos.vue'),
meta:{
keepAlive: true,
},
children: [
{
path: "v",
@ -75,6 +84,9 @@ const routes = [
path: "/played",
name: "played",
component: ()=> import('@/views/Played.vue'),
meta:{
keepAlive: true,
},
},
{
path: "/friends",

1
src/store/index.js
View File

@ -8,6 +8,7 @@ export default createStore({
currentRoute: "/discover/recommend", //当前路由
songId: 0, //歌曲id
lastPlayed: [], //最近播放
playingList: [], //当前播放
},
caches: {},
theme: {

7
src/views/Played.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { ref, reactive, h, watch, toRaw } from "vue";
import { ref, reactive, h, watch, toRaw, onUnmounted } from "vue";
import {
RouterLink,
useRoute,
@ -27,6 +27,11 @@ import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import pubsub from "pubsub-js";
console.log('Played 初始化');
onUnmounted(() => {
console.log('Played 卸载');
})
const menuOptions = [
{
label: "最近播放",

52
src/views/common/MainMenu.vue
View File

@ -65,32 +65,32 @@ const menuOptions = ref([
icon: renderIcon(ZuiJin),
},
//#region 其他
// {
// label: () =>
// h(
// RouterLink,
// {
// to: {
// path: '/fm'
// }
// },
// { default: () => '私人FM' }
// ),
// key: '/fm',
// },
// {
// label: () =>
// h(
// RouterLink,
// {
// to: {
// path: '/friends'
// }
// },
// { default: () => '朋友' }
// ),
// key: '/friends',
// },
{
label: () =>
h(
RouterLink,
{
to: {
path: '/fm'
}
},
{ default: () => '私人FM' }
),
key: '/fm',
},
{
label: () =>
h(
RouterLink,
{
to: {
path: '/friends'
}
},
{ default: () => '朋友' }
),
key: '/friends',
},
//#endregion
]);

158
src/views/common/PlayingList.vue Normal file
View File

@ -0,0 +1,158 @@
<script setup>
import { ref, reactive, h, watch, toRaw } from "vue";
import {
RouterLink,
useRoute,
useRouter,
} from "vue-router";
import { useStore } from "vuex";
import {
NButton,
NButtonGroup,
NSpace,
NIcon,
NMenu,
NLayout,
NLayoutHeader,
NLayoutFooter,
NLayoutContent,
NLayoutSider,
NTag,
NDataTable,
useMessage,
} from "naive-ui";
import Play from "@/assets/svgs/Play_.svg";
import Add from "@/assets/svgs/Add.svg";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import pubsub from "pubsub-js";
const store = useStore();
const playingList = ref([])
const createColumns = ({ play ,singerInfo }) => {
return [
{
title: "",
key: "index",
align: "right",
width: 20
},
{
title: "音乐标题",
key: "name",
align: "left",
ellipsis: true,
render(row){
return h(
NButton,
{
style: {
marginRight: "6px",
},
text: true,
size: "small",
onClick: () => play(row.id),
},
{
default: () => row.name,
}
);
}
},
{
title: "歌手",
key: "artists",
ellipsis: true,
render(row) {
const ars = row.artists.map((ar, idx) => {
let r = h(
NButton,
{
style: {
marginRight: "6px",
},
text: true,
size: "small",
onClick: () => singerInfo(ar.id),
},
{
default: () => ar.name,
}
);
return h("span", [idx == 0 ? "" : "/ ", r]);
});
// console.log(ars);
return ars;
},
},
{
title: "播放时间",
key: "date",
width: 100,
render(row){
return h('span', [dayjs(row.date).format('YYYY-MM-DD')])
}
},
];
};
const columns = createColumns({
play(id){
pubsub.publish('zp.play', {id, im:true})
},
singerInfo(id) {
router.push("/singer/" + id);
},
});
// watch(
// () => store.state.settings.playingList,
// (val, oldVal) => {
// playingList.value = toRaw(store.state.settings.playingList)
// },
// {
// immediate: true,
// deep: true,
// }
// );
</script>
<template>
<n-layout>
<n-layout-header
style="padding: 6px 12px 0px 12px; font-size: 24px"
>当前播放
</n-layout-header>
<n-layout has-sider>
<n-layout-content
style="padding: 6px 12px; font-size: 12px"
>
共{{ playingList }}首
</n-layout-content>
<n-layout-sider width="100" style="padding: 0 12px 6px 12px">
<n-button size="tiny">清除列表</n-button>
</n-layout-sider>
</n-layout>
</n-layout>
<n-data-table
:bordered="false"
:single-line="true"
:columns="columns"
:data="playingList"
size="tiny"
/>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.n-layout-header,
.n-layout-content,
.n-layout-side {
// background-color: #eee;
}
</style>

4
src/views/common/SongCtrl.vue
View File

@ -51,7 +51,7 @@ const onEnd = () => {
console.log("onEnd");
};
const play = async (id, im = true) => {
const play = async (id, name, im = true) => {
console.log(id);
await getSongUrl(id)
.then((res) => {
@ -127,7 +127,7 @@ watch(playing, (val, old) => {
const psToken = pubsub.subscribe("zp", (msg, data) => {
switch (msg) {
case "zp.play":
play(data.id, data.im);
play(data.id, data.name, data.im);
break;
case "zp.setProgressScale":
setProgressScale(data.scale);

13
src/views/discover/Anchor.vue
View File

@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>

24
src/views/discover/Discover.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { h, ref, onMounted, onUnmounted } from "vue";
import { h, ref, onMounted, onUnmounted, onActivated } from "vue";
import {
RouterLink,
useRoute,
@ -16,6 +16,14 @@ import {
NScrollbar,
} from "naive-ui";
console.log('Discove 初始化');
onUnmounted(() => {
console.log('Discove 卸载');
})
// onActivated(()=>{
// console.log('Discove Actived');
// })
const menuOptions = [
{
label: () =>
@ -109,12 +117,19 @@ const route = useRoute();
/>
</div>
<div class="main-content">
<!-- <input type="text"> -->
<!-- <NScrollbar > -->
<div class="ld-width">
<router-view v-slot="{ Component }">
<keep-alive>
<router-view />
<component :is="Component" />
</keep-alive>
</router-view>
<!-- <keep-alive>
<router-view></router-view>
</keep-alive> -->
<!-- <router-view>
</router-view> -->
</div>
<!-- </NScrollbar> -->
</div>
@ -129,5 +144,4 @@ export default {
};
</script>
<style lang="less" scoped>
</style>
<style lang="less" scoped></style>

13
src/views/discover/Latest.vue
View File

@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>

13
src/views/discover/Ranking.vue
View File

@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>

7
src/views/discover/Recommend.vue
View File

@ -217,8 +217,10 @@ import {
import pubsub from "pubsub-js";
import ArtistsSpan from "@/components/ArtistsSpan.vue";
// console.log("recommend 初始化");
console.log("recommend 初始化");
onUnmounted(() => {
console.log('recommend 卸载');
})
const store = useStore();
const play = (id) => {
@ -235,6 +237,7 @@ getBanner(0)
banners: { data: banners.value, time: Date.now() },
});
// console.log(banners.value);
console.log("recommend 轮播图片初始化");
})
.catch((err) => {
console.log("getBanner err", err);

13
src/views/discover/Singer.vue
View File

@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>

13
src/views/discover/Songlist.vue
View File

@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>

7
src/views/fm/FM.vue
View File

@ -1,10 +1,15 @@
<script setup>
console.log('FM 初始化');
</script>
<template>
FM
</template>
<script>
export default {
export default {
name: 'FM'
}
</script>

7
src/views/friends/Friends.vue
View File

@ -1,10 +1,15 @@
<script setup>
console.log('Friends 初始化');
</script>
<template>
朋友
</template>
<script>
export default {
export default {
name: 'Friends',
}
</script>

13
src/views/videos/MV.vue
View File

@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>

13
src/views/videos/V.vue
View File

@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>

26
src/views/videos/Videos.vue
View File

@ -1,8 +1,13 @@
<script setup>
import { h } from "vue";
import { h, onUnmounted } from "vue";
import { RouterLink, useRoute } from "vue-router";
import { NButton, NSpace, NIcon, NMenu } from "naive-ui";
console.log("Videos 初始化");
onUnmounted(() => {
console.log("Videos 卸载");
});
const menuOptions = [
{
label: () =>
@ -29,11 +34,10 @@ const menuOptions = [
{ default: () => "MV" }
),
key: "/videos/mv",
}
},
];
const route = useRoute()
const route = useRoute();
</script>
<template>
<div class="top-menu">
@ -44,14 +48,14 @@ const route = useRoute()
:value="route.path"
/>
</div>
<router-view />
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</template>
<script>
export default {
}
export default {};
</script>
<style>
</style>
<style></style>