xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-12-27 02:25:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

style:样式切换

Browse Source
This commit is contained in:
lqins
2024-12-19 16:57:57 +08:00
parent 710b008453
commit 357c77ef30
59 changed files with 4775 additions and 3420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
web/src/views/Song.vue
View File

@@ -1,93 +1,104 @@
<template>
<div class="page-song" :style="{ height: winHeight + 'px' }">
<div class="inner">
<h2 class="title">{{song.title}}</h2>
<h2 class="title">{{ song.title }}</h2>
<div class="row tags" v-if="song.tags">
<span>{{song.tags}}</span>
<span>{{ song.tags }}</span>
</div>
<div class="row author">
<span>
<el-avatar :size="32" :src="song.user?.avatar" />
</span>
<span class="nickname">{{song.user?.nickname}}</span>
<span class="nickname">{{ song.user?.nickname }}</span>
<button class="btn btn-icon" @click="play">
<i class="iconfont icon-play"></i> {{song.play_times}}
<i class="iconfont icon-play"></i> {{ song.play_times }}
</button>
<el-tooltip effect="light" content="复制歌曲链接" placement="top">
<button class="btn btn-icon copy-link" :data-clipboard-text="getShareURL(song)" >
<el-tooltip content="复制歌曲链接" placement="top">
<button
class="btn btn-icon copy-link"
:data-clipboard-text="getShareURL(song)"
>
<i class="iconfont icon-share1"></i>
</button>
</el-tooltip>
</div>
<div class="row date">
<span>{{dateFormat(song.created_at)}}</span>
<span class="version">{{song.raw_data?.major_model_version}}</span>
<span>{{ dateFormat(song.created_at) }}</span>
<span class="version">{{ song.raw_data?.major_model_version }}</span>
</div>
<div class="row">
<textarea class="prompt" maxlength="2000" rows="18" readonly>{{song.prompt}}</textarea>
<textarea class="prompt" maxlength="2000" rows="18" readonly>{{
song.prompt
}}</textarea>
</div>
</div>
<div class="music-player" v-if="playList.length > 0">
<music-player :songs="playList" ref="playerRef" @play="song.play_times += 1"/>
<music-player
:songs="playList"
ref="playerRef"
@play="song.play_times += 1"
/>
</div>
</div>
</template>
<script setup>
import {onMounted, onUnmounted, ref} from "vue"
import {useRouter} from "vue-router";
import {httpGet} from "@/utils/http";
import {showMessageError} from "@/utils/dialog";
import {dateFormat} from "@/utils/libs";
import { onMounted, onUnmounted, ref } from "vue";
import { useRouter } from "vue-router";
import { httpGet } from "@/utils/http";
import { showMessageError } from "@/utils/dialog";
import { dateFormat } from "@/utils/libs";
import Clipboard from "clipboard";
import {ElMessage} from "element-plus";
import { ElMessage } from "element-plus";
import MusicPlayer from "@/components/MusicPlayer.vue";
const router = useRouter()
const id = router.currentRoute.value.params.id
const song = ref({title:""})
const playList = ref([])
const playerRef = ref(null)
const router = useRouter();
const id = router.currentRoute.value.params.id;
const song = ref({ title: "" });
const playList = ref([]);
const playerRef = ref(null);
httpGet("/api/suno/detail",{song_id:id}).then(res => {
song.value = res.data
playList.value = [song.value]
document.title = song.value?.title+ " | By "+song.value?.user.nickname+" | Suno音乐"
}).catch(e => {
showMessageError("获取歌曲详情失败："+e.message)
})
httpGet("/api/suno/detail", { song_id: id })
.then((res) => {
song.value = res.data;
playList.value = [song.value];
document.title =
song.value?.title + " | By " + song.value?.user.nickname + " | Suno音乐";
})
.catch((e) => {
showMessageError("获取歌曲详情失败：" + e.message);
});
const clipboard = ref(null)
const clipboard = ref(null);
onMounted(() => {
clipboard.value = new Clipboard('.copy-link');
clipboard.value.on('success', () => {
clipboard.value = new Clipboard(".copy-link");
clipboard.value.on("success", () => {
ElMessage.success("复制歌曲链接成功！");
})
});
clipboard.value.on('error', () => {
ElMessage.error('复制失败！');
})
})
clipboard.value.on("error", () => {
ElMessage.error("复制失败！");
});
});
onUnmounted(() => {
clipboard.value.destroy()
})
clipboard.value.destroy();
});
// 播放歌曲
const play = () => {
playerRef.value.play()
}
playerRef.value.play();
};
const winHeight = ref(window.innerHeight-50)
const winHeight = ref(window.innerHeight - 50);
const getShareURL = (item) => {
return `${location.protocol}//${location.host}/song/${item.id}`
}
return `${location.protocol}//${location.host}/song/${item.id}`;
};
</script>
<style lang="stylus" scoped>