From 2905728772a58fcace36f12cc088fbaa2ff20a79 Mon Sep 17 00:00:00 2001
From: zilong <zilong.yang@gmail.com>
Date: Tue, 19 Oct 2021 19:17:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=80=E8=BF=91=E6=92=AD=E6=94=BE=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E4=B8=80=E5=8D=8A,=E5=B7=AE=E6=B8=85=E9=99=A4?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/Add.svg          |   1 +
 src/assets/svgs/JiaHao.svg       |   1 +
 src/store/index.js               |  17 ++-
 src/views/Played.vue             | 234 +++++++++++++++++++++++--------
 src/views/common/SongCtrl.vue    |  12 +-
 src/views/common/SongInfo.vue    |  14 +-
 src/views/discover/Discover.vue  |   5 +-
 src/views/discover/Recommend.vue |  31 ++--
 8 files changed, 237 insertions(+), 78 deletions(-)
 create mode 100644 src/assets/svgs/Add.svg
 create mode 100644 src/assets/svgs/JiaHao.svg

diff --git a/src/assets/svgs/Add.svg b/src/assets/svgs/Add.svg
new file mode 100644
index 0000000..3763eec
--- /dev/null
+++ b/src/assets/svgs/Add.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 112v288"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M400 256H112"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/JiaHao.svg b/src/assets/svgs/JiaHao.svg
new file mode 100644
index 0000000..d3c7082
--- /dev/null
+++ b/src/assets/svgs/JiaHao.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1634561096494" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2039" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M533.333333 490.666667V128h-42.666666v362.666667H128v42.666666h362.666667v362.666667h42.666666V533.333333h362.666667v-42.666666z" fill="#3D3D3D" p-id="2040"></path></svg>
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 01a4f03..3e91d47 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,4 +1,4 @@
-import { createStore } from "vuex";
+import { createStore, storeKey } from "vuex";
 
 export default createStore({
   state: {
@@ -62,6 +62,16 @@ export default createStore({
       state.theme = { ...state.theme, ...theme };
       saveLoaclTheme(state.theme);
     },
+    savePlayed(state, played) {
+      // console.log(played)
+      let p = state.settings.lastPlayed.filter(
+        (item, idx) => item.id !== played.id && idx < 99
+      );
+      p.unshift(played);
+      // console.log(p)
+      state.settings.lastPlayed = p;
+      saveLoaclSettings(state.settings);
+    },
   },
   actions: {},
   modules: {},
@@ -74,8 +84,5 @@ function saveLoaclSettings(s) {
   );
 }
 function saveLoaclTheme(s) {
-  localStorage.setItem(
-    "zmusic.theme",
-    JSON.stringify(s)
-  );
+  localStorage.setItem("zmusic.theme", JSON.stringify(s));
 }
diff --git a/src/views/Played.vue b/src/views/Played.vue
index 7bd4b20..8530350 100644
--- a/src/views/Played.vue
+++ b/src/views/Played.vue
@@ -1,17 +1,137 @@
 <script setup>
-import { h } from "vue";
-import { RouterLink, useRoute } from "vue-router";
-import { NButton, NSpace, NIcon, NMenu } from "naive-ui";
+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 menuOptions = [
   {
-    label: '最近播放',
+    label: "最近播放",
     key: "/played",
   },
 ];
 
-const route = useRoute()
+const router = useRouter();
+const store = useStore();
+let lastPlayed = ref([]);
 
+const createColumns = ({ play ,singerInfo }) => {
+  return [
+    {
+      title: "",
+      key: "index",
+      align: "right",
+      width: 40
+    },
+    {
+      title: "音乐标题",
+      key: "name",
+      align: "left",
+      render(row){
+        return h(
+            NButton,
+            {
+              style: {
+                marginRight: "6px",
+              },
+              text: true,
+              size: "small",
+              onClick: () => play(row.id),
+            },
+            {
+              default: () => row.name,
+            }
+          );
+      }
+    },
+    {
+      title: "歌手",
+      key: "artists",
+      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 message = useMessage();
+const columns = createColumns({
+  play(id){
+    pubsub.publish('zp.play', {id, im:true})
+  },
+  singerInfo(id) {
+    router.push("/singer/" + id);
+  },
+});
+const pagination = {
+  pageSize: 10,
+};
+
+watch(
+  () => store.state.settings.lastPlayed,
+  (val, oldVal) => {
+    lastPlayed.value = toRaw(
+      store.state.settings.lastPlayed
+    ).map((item,idx)=>{
+      return {...{index: idx+1}, ...item}
+    });
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+const route = useRoute();
 </script>
 <template>
   <div class="top-menu">
@@ -23,61 +143,61 @@ const route = useRoute()
     />
   </div>
   <div class="main-content">
-      <div class="ld-width">
-        <div class="lmt-width">
-          <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌块放假啊来得及发司法局啊水电费家啊练腹肌块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌块放假啊来得及发司法局啊水电费家啊练腹肌块放假啊来得及发司法局啊水电费家啊练腹肌块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
-        </div>
-        
+    <div class="ld-width">
+      <div class="lmt-width">
+        <n-layout>
+          <n-layout-header
+            style="padding: 6px 12px; font-size: 10px"
+          >
+            共{{ lastPlayed.length }}首（最多100）
+          </n-layout-header>
+          <n-layout has-sider>
+            <n-layout-content style="padding: 6px 12px">
+              <n-button-group size="small">
+                <n-button
+                  type="primary"
+                  round
+                  style="padding-right: 6px"
+                >
+                  <template #icon>
+                    <n-icon><Play /></n-icon>
+                  </template>
+                  播放全部
+                </n-button>
+                <n-button
+                  type="primary"
+                  round
+                  style="
+                    font-size: 26px;
+                    padding: 0 6px 0 2px;
+                  "
+                >
+                  <!-- <template #icon> -->
+                  <n-icon>
+                    <Add />
+                  </n-icon>
+                  <!-- </template> -->
+                </n-button>
+              </n-button-group>
+            </n-layout-content>
+            <n-layout-sider width="100">
+              <n-button size="small">清除列表</n-button>
+            </n-layout-sider>
+          </n-layout>
+        </n-layout>
+        <n-data-table
+          :bordered="false"
+          :single-line="true"
+          :columns="columns"
+          :data="lastPlayed"
+          size="small"
+        />
       </div>
+    </div>
   </div>
 </template>
 <script>
-export default {
-
-}
+export default {};
 </script>
 
-<style>
-
-</style>
\ No newline at end of file
+<style></style>
diff --git a/src/views/common/SongCtrl.vue b/src/views/common/SongCtrl.vue
index b89f5fd..bf8cf8e 100644
--- a/src/views/common/SongCtrl.vue
+++ b/src/views/common/SongCtrl.vue
@@ -12,7 +12,7 @@ import { getSongUrl } from "@/network/song";
 import pubsub from "pubsub-js";
 
 const store = useStore();
-const { settings } = store.state;
+// const { settings } = store.state;
 const audioEl = ref("");
 const playing = ref(false);
 let currentTime = 0;
@@ -23,9 +23,9 @@ onMounted(() => {
   audioEl.value.addEventListener("pause", onPause);
   audioEl.value.addEventListener("ended", onEnd);
 
-  if (settings.songId) {
+  if (store.state.settings.songId) {
     pubsub.publish("zp.play", {
-      id: settings.songId,
+      id: store.state.settings.songId,
       im: false,
     });
     // play(settings.songId, false)
@@ -60,12 +60,13 @@ const play = async (id, im = true) => {
         store.commit("saveSettings", {
           songId: id,
         });
-        pubsub.publish('zp.getSongInfo', {id})
+        pubsub.publish('zp.getSongInfo', {id: store.state.settings.songId, im})
 
         if (im) {
           audioEl.value.play();
           playing.value = true;
         }
+
       }
     })
     .catch((err) => {
@@ -84,11 +85,12 @@ const resume = async () => {
     // console.log(Date.now() - lastPause);
     if (Date.now() - lastPause > 1000 * 60 * 5) {
       console.log("暂停过了5分钟，再次载入歌曲");
-      await play(settings.songId, false);
+      await play(store.state.settings.songId, false);
       audioEl.value.currentTime = currentTime;
     }
     audioEl.value.play();
     playing.value = true;
+    pubsub.publish('zp.getSongInfo', {id: store.state.settings.songId, im: true})
   }
 };
 
diff --git a/src/views/common/SongInfo.vue b/src/views/common/SongInfo.vue
index 35fa435..73d5012 100644
--- a/src/views/common/SongInfo.vue
+++ b/src/views/common/SongInfo.vue
@@ -5,7 +5,9 @@ import {
   reactive,
   toRef,
   toRefs,
+  toRaw,
 } from "vue";
+import {useStore} from 'vuex'
 import { NAvatar } from "naive-ui";
 import pubsub from "pubsub-js";
 import { getSongDetial } from "@/network/song";
@@ -14,6 +16,7 @@ import 'dayjs/locale/zh-cn'
 import duration from 'dayjs/plugin/duration'
 import ArtistsSpan from "@/components/ArtistsSpan.vue";
 
+const store = useStore()
 const showInfo = ref(false);
 const info = reactive({
   name: "",
@@ -22,13 +25,20 @@ const info = reactive({
 });
 
 //#region 取得歌曲信息
-const songInfo = (id) => {
+const songInfo = (id, im) => {
   getSongDetial(id)
     .then((res) => {
       showInfo.value = true;
       info.name = res.data.songs[0].name;
       info.artists = res.data.songs[0].ar;
       info.albumPicUrl = res.data.songs[0].al.picUrl;
+      if(im){
+        store.commit('savePlayed', {...{
+          id,
+          date: Date.now(),
+        }, ...toRaw(info)})
+        console.log('savePlayed');
+      }
     })
     .catch((err) => {});
 };
@@ -46,7 +56,7 @@ function zpTime(time) {
 const psToken = pubsub.subscribe("zp", (msg, data) => {
   switch (msg) {
     case "zp.getSongInfo":
-      songInfo(data.id);
+      songInfo(data.id, data.im);
       break;
     case "zp.progress":
       totalTime.value = zpTime(data.total * 1000)
diff --git a/src/views/discover/Discover.vue b/src/views/discover/Discover.vue
index bd657ef..5f73d8e 100644
--- a/src/views/discover/Discover.vue
+++ b/src/views/discover/Discover.vue
@@ -111,7 +111,10 @@ const route = useRoute();
   <div class="main-content">
     <!-- <NScrollbar > -->
       <div class="ld-width">
-        <router-view />
+        <keep-alive>
+          <router-view  />
+        </keep-alive>
+        
       </div>
     <!-- </NScrollbar> -->
   </div>
diff --git a/src/views/discover/Recommend.vue b/src/views/discover/Recommend.vue
index a44ed4a..40745b5 100644
--- a/src/views/discover/Recommend.vue
+++ b/src/views/discover/Recommend.vue
@@ -66,13 +66,16 @@
             <div class="title">
               <span class="name">
                 {{ song.name }}
-                <span class="alias"><template
-                  v-for="(al, idx) in song.alias"
-                > {{al}}
-                </template></span>
+                <span class="alias"
+                  ><template
+                    v-for="(al, idx) in song.alias"
+                  >
+                    {{ al }}
+                  </template></span
+                >
               </span>
               <span class="artist">
-                <ArtistsSpan :artists="song.artists"/>
+                <ArtistsSpan :artists="song.artists" />
               </span>
             </div>
             <span class="icon"></span>
@@ -184,7 +187,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { useStore } from "vuex";
 import {
   NCarousel,
@@ -213,6 +216,8 @@ import {
 import pubsub from "pubsub-js";
 import ArtistsSpan from "@/components/ArtistsSpan.vue";
 
+console.log("recommend 初始化");
+
 const store = useStore();
 
 const play = (id) => {
@@ -230,18 +235,28 @@ getBanner(0)
   .catch((err) => {
     console.log("getBanner err", err);
   });
-//最新音乐
+
 let topSongs = ref([]);
+//最新音乐
 getTopSong()
   .then((res) => {
     topSongs.value = res.data.data.filter((item, index) => {
-      return index < 20;
+      return index < 10;
     });
     // console.log(topSongs.value);
   })
   .catch((err) => {
     console.log("getTopSong err", err);
   });
+
+
+// onMounted(() => {
+//   console.log("onMounted");
+// });
+// onUnmounted(() => {
+//   console.log("卸载组件");
+// });
+
 function songAlias(alias) {
   if (alias.length > 0) return "[" + alias.join(",") + "]";
 }