解决keepAlive缓存设置

src/views/common/MainMenu.vue

@@ -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
 ]);
 

src/views/common/PlayingList.vue

@@ -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>

src/views/common/SongCtrl.vue

@@ -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);