vite-zmusic/src/views/Played.vue

<script setup>
import { ref, reactive, h, watch, toRaw, onUnmounted } 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";

console.log('Played 初始化');
onUnmounted(() => {
  console.log('Played 卸载');
})

const menuOptions = [
  {
    label: "最近播放",
    key: "/played",
  },
];

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",
      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 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">
    <n-menu
      :options="menuOptions"
      mode="horizontal"
      class="zm-top-menu"
      :value="route.path"
    />
  </div>
  <div class="main-content">
    <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 {};
</script>

<style></style>