<script setup lang="ts">
|
import type { Recordable } from '@vben/types';
|
import type { MusicSong } from './types';
|
|
import { provide, ref } from 'vue';
|
|
import { Col, Empty, Row, TabPane, Tabs } from 'ant-design-vue';
|
|
import audioBar from './audioBar/index.vue';
|
import songCard from './songCard/index.vue';
|
import songInfo from './songInfo/index.vue';
|
import { currentSongKey } from './types';
|
|
defineOptions({ name: 'AiMusicListIndex' });
|
|
const currentType = ref('mine');
|
const loading = ref(false); // loading 状态
|
const currentSong = ref<MusicSong>({}); // 当前音乐
|
const mySongList = ref<MusicSong[]>([]);
|
const squareSongList = ref<MusicSong[]>([]);
|
|
function generateMusic(_formData: Recordable<any>) {
|
loading.value = true;
|
setTimeout(() => {
|
mySongList.value = Array.from({ length: 20 }, (_, index) => {
|
return {
|
id: index,
|
audioUrl: '',
|
videoUrl: '',
|
title: `我走后${index}`,
|
imageUrl:
|
'https://www.carsmp3.com/data/attachment/forum/201909/19/091020q5kgre20fidreqyt.jpg',
|
desc: 'Metal, symphony, film soundtrack, grand, majesticMetal, dtrack, grand, majestic',
|
date: '2024年04月30日 14:02:57',
|
lyric: `<div class="_words_17xen_66"><div>大江东去，浪淘尽，千古风流人物。
|
</div><div>故垒西边，人道是，三国周郎赤壁。
|
</div><div>乱石穿空，惊涛拍岸，卷起千堆雪。
|
</div><div>江山如画，一时多少豪杰。
|
</div><div>
|
</div><div>遥想公瑾当年，小乔初嫁了，雄姿英发。
|
</div><div>羽扇纶巾，谈笑间，樯橹灰飞烟灭。
|
</div><div>故国神游，多情应笑我，早生华发。
|
</div><div>人生如梦，一尊还酹江月。</div></div>`,
|
};
|
});
|
loading.value = false;
|
}, 3000);
|
}
|
|
function setCurrentSong(music: MusicSong) {
|
currentSong.value = music;
|
}
|
|
defineExpose({
|
generateMusic,
|
});
|
|
provide(currentSongKey, currentSong);
|
</script>
|
|
<template>
|
<div class="flex flex-col">
|
<div class="flex flex-auto overflow-hidden">
|
<Tabs
|
v-model:active-key="currentType"
|
class="flex-auto px-5"
|
tab-position="bottom"
|
>
|
<!-- 我的创作 -->
|
<TabPane key="mine" tab="我的创作" v-loading="loading">
|
<Row v-if="mySongList.length > 0" :gutter="12">
|
<Col v-for="song in mySongList" :key="song.id" :span="24">
|
<songCard :song-info="song" @play="setCurrentSong(song)" />
|
</Col>
|
</Row>
|
<Empty v-else description="暂无音乐" />
|
</TabPane>
|
|
<!-- 试听广场 -->
|
<TabPane key="square" tab="试听广场" v-loading="loading">
|
<Row v-if="squareSongList.length > 0" :gutter="12">
|
<Col v-for="song in squareSongList" :key="song.id" :span="24">
|
<songCard :song-info="song" @play="setCurrentSong(song)" />
|
</Col>
|
</Row>
|
<Empty v-else description="暂无音乐" />
|
</TabPane>
|
</Tabs>
|
<!-- songInfo -->
|
<songInfo class="flex-none" />
|
</div>
|
<audioBar class="flex-none" />
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
:deep(.ant-tabs) {
|
.ant-tabs__content {
|
padding: 0 7px;
|
overflow: auto;
|
}
|
}
|
</style>
|
