From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/ai/music/index/list/index.vue | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 108 insertions(+), 0 deletions(-)
diff --git a/src/views/ai/music/index/list/index.vue b/src/views/ai/music/index/list/index.vue
new file mode 100644
index 0000000..6c33f56
--- /dev/null
+++ b/src/views/ai/music/index/list/index.vue
@@ -0,0 +1,108 @@
+<template>
+ <div class="flex flex-col">
+ <div class="flex-auto flex overflow-hidden">
+ <el-tabs v-model="currentType" class="flex-auto px-[var(--app-content-padding)]">
+ <!-- 鎴戠殑鍒涗綔 -->
+ <el-tab-pane v-loading="loading" label="鎴戠殑鍒涗綔" name="mine">
+ <el-row v-if="mySongList.length" :gutter="12">
+ <el-col v-for="song in mySongList" :key="song.id" :span="24">
+ <songCard :songInfo="song" @play="setCurrentSong(song)"/>
+ </el-col>
+ </el-row>
+ <el-empty v-else description="鏆傛棤闊充箰"/>
+ </el-tab-pane>
+
+ <!-- 璇曞惉骞垮満 -->
+ <el-tab-pane v-loading="loading" label="璇曞惉骞垮満" name="square">
+ <el-row v-if="squareSongList.length" v-loading="loading" :gutter="12">
+ <el-col v-for="song in squareSongList" :key="song.id" :span="24">
+ <songCard :songInfo="song" @play="setCurrentSong(song)"/>
+ </el-col>
+ </el-row>
+ <el-empty v-else description="鏆傛棤闊充箰"/>
+ </el-tab-pane>
+ </el-tabs>
+ <!-- songInfo -->
+ <songInfo class="flex-none"/>
+ </div>
+ <audioBar class="flex-none"/>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import songCard from './songCard/index.vue'
+import songInfo from './songInfo/index.vue'
+import audioBar from './audioBar/index.vue'
+
+defineOptions({ name: 'Index' })
+
+
+const currentType = ref('mine')
+// loading 鐘舵��
+const loading = ref(false)
+// 褰撳墠闊充箰
+const currentSong = ref({})
+
+const mySongList = ref<Recordable[]>([])
+const squareSongList = ref<Recordable[]>([])
+
+provide('currentSong', currentSong)
+
+/*
+ *@Description: 璋冩帴鍙ｇ敓鎴愰煶涔愬垪琛�
+ *@MethodAuthor: xiaohong
+ *@Date: 2024-06-27 17:06:44
+*/
+function generateMusic (formData: Recordable) {
+ console.log(formData);
+ 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)
+}
+
+/*
+ *@Description: 璁剧疆褰撳墠鎾斁鐨勯煶涔�
+ *@MethodAuthor: xiaohong
+ *@Date: 2024-07-19 11:22:33
+*/
+function setCurrentSong (music: Recordable) {
+ currentSong.value = music
+}
+
+defineExpose({
+ generateMusic
+})
+</script>
+
+
+<style lang="scss" scoped>
+:deep(.el-tabs) {
+ display: flex;
+ flex-direction: column;
+ .el-tabs__content {
+ padding: 0 7px;
+ overflow: auto;
+ }
+}
+</style>
--
Gitblit v1.8.0