最近播放完成一半,差清除列表

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>
+<style></style>