↩ revert: 回退
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 961 B |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
BIN
public/images/pic/avatar.png
Normal file
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 158 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 2.8 KiB |
BIN
public/images/pic/video.jpg
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 243 KiB After Width: | Height: | Size: 164 KiB |
|
Before Width: | Height: | Size: 261 KiB After Width: | Height: | Size: 176 KiB |
|
Before Width: | Height: | Size: 241 KiB After Width: | Height: | Size: 149 KiB |
|
Before Width: | Height: | Size: 126 KiB After Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 171 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 208 KiB After Width: | Height: | Size: 149 KiB |
|
Before Width: | Height: | Size: 126 KiB After Width: | Height: | Size: 126 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
@@ -95,3 +95,24 @@ export const likeComment = (id, cid, t, type = 0) => {
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 电台节目评论
|
||||
* @param {number} id - 电台节目的 id
|
||||
* @param {number} limit - 取出评论数量 , 默认为 20
|
||||
* @param {number} offset - 偏移数量 , 用于分页 , 如 :( 评论页数 -1)*20, 其中 20 为 limit 的值
|
||||
* @param {string} before - 分页参数,取上一页最后一项的 time 获取下一页数据(获取超过 5000 条评论的时候需要用到)
|
||||
*/
|
||||
export const commentDj = (id, limit, offset, before) => {
|
||||
return axios({
|
||||
method: "GET",
|
||||
url: "/comment/dj",
|
||||
params: {
|
||||
id,
|
||||
limit,
|
||||
offset,
|
||||
before,
|
||||
timestamp: new Date().getTime(),
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@@ -118,6 +118,20 @@ export const getDjProgram = (rid, limit = 50, offset = 0) => {
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 电台 - 节目详情
|
||||
* @param {string} id - 电台 的 id
|
||||
*/
|
||||
export const getDjProgramDetail = (id) => {
|
||||
return axios({
|
||||
method: "GET",
|
||||
url: "/dj/program/detail",
|
||||
params: {
|
||||
id,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 电台 - 订阅
|
||||
* @param {number} rid - 电台 的 id
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
class="loading-img"
|
||||
:src="
|
||||
type === 'mv'
|
||||
? '/images/pic/video.png?assest'
|
||||
? '/images/pic/video.jpg?assest'
|
||||
: type === 'artist'
|
||||
? '/images/pic/artist.jpg?assest'
|
||||
: '/images/pic/album.jpg?assest'
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
>
|
||||
<template #placeholder>
|
||||
<div class="cover-loading">
|
||||
<img class="loading-img" src="/images/pic/avatar.jpg?assest" alt="avatar" />
|
||||
<img class="loading-img" src="/images/pic/avatar.png?assest" alt="avatar" />
|
||||
</div>
|
||||
</template>
|
||||
</n-image>
|
||||
|
||||
@@ -79,13 +79,16 @@
|
||||
class="main-player"
|
||||
>
|
||||
<div
|
||||
v-show="!(pureLyricMode && isHasLrc)"
|
||||
v-show="!(pureLyricMode && isHasLrc) || playMode === 'dj'"
|
||||
:class="['content', { 'no-lrc': !isHasLrc || playMode === 'dj' }]"
|
||||
>
|
||||
<!-- 封面 -->
|
||||
<PlayerCover />
|
||||
<!-- 信息 -->
|
||||
<div v-show="playCoverType === 'cover' || !isHasLrc" :class="['data', playCoverType]">
|
||||
<div
|
||||
v-show="playCoverType === 'cover' || !isHasLrc || playMode === 'dj'"
|
||||
:class="['data', playCoverType]"
|
||||
>
|
||||
<div class="desc">
|
||||
<div class="title">
|
||||
<span class="name">{{ music.getPlaySongData.name || "未知曲目" }}</span>
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
</n-icon>
|
||||
<!-- 更多操作 -->
|
||||
<n-dropdown
|
||||
v-if="playMode !== 'dj' && !music.getPlaySongData?.path"
|
||||
v-if="!music.getPlaySongData?.path"
|
||||
:options="songMoreOptions"
|
||||
:show-arrow="true"
|
||||
placement="top-start"
|
||||
@@ -415,6 +415,7 @@ const songMoreOptions = computed(() => [
|
||||
{
|
||||
key: "add-pl",
|
||||
label: "添加到歌单",
|
||||
show: playMode.value !== "dj",
|
||||
props: {
|
||||
onClick: () => {
|
||||
addPlaylistRef.value?.openAddToPlaylist(music.getPlaySongData?.id);
|
||||
@@ -431,6 +432,7 @@ const songMoreOptions = computed(() => [
|
||||
path: "/comment",
|
||||
query: {
|
||||
id: music.getPlaySongData?.id,
|
||||
type: playMode.value,
|
||||
},
|
||||
});
|
||||
},
|
||||
@@ -440,7 +442,9 @@ const songMoreOptions = computed(() => [
|
||||
{
|
||||
key: "mv",
|
||||
label: "观看 MV",
|
||||
show: music.getPlaySongData?.mv && music.getPlaySongData?.mv !== 0 ? true : false,
|
||||
show:
|
||||
playMode.value !== "dj" &&
|
||||
(music.getPlaySongData?.mv && music.getPlaySongData?.mv !== 0 ? true : false),
|
||||
props: {
|
||||
onClick: () => {
|
||||
router.push({
|
||||
@@ -456,7 +460,7 @@ const songMoreOptions = computed(() => [
|
||||
{
|
||||
key: "download",
|
||||
label: "下载歌曲",
|
||||
show: music.getPlaySongData?.path ? false : true,
|
||||
show: playMode.value !== "dj" && (music.getPlaySongData?.path ? false : true),
|
||||
props: {
|
||||
onClick: () => {
|
||||
downloadSongRef.value?.openDownloadModal(music.getPlaySongData);
|
||||
|
||||
@@ -122,12 +122,10 @@
|
||||
</n-icon>
|
||||
<!-- 评论 -->
|
||||
<n-icon
|
||||
v-if="!music.getPlaySongData?.path && playMode !== 'dj'"
|
||||
v-if="!music.getPlaySongData?.path"
|
||||
class="hidden"
|
||||
size="22"
|
||||
@click.stop="
|
||||
(showFullPlayer = false), router.push(`/comment?id=${music.getPlaySongData?.id}`)
|
||||
"
|
||||
@click.stop="jumpToComment"
|
||||
>
|
||||
<SvgIcon icon="comment-text" />
|
||||
</n-icon>
|
||||
@@ -311,6 +309,18 @@ const controlEnter = () => {
|
||||
const controlMove = (e) => {
|
||||
if (!e.target.closest(".slider")) e.stopPropagation();
|
||||
};
|
||||
|
||||
// 跳转至评论
|
||||
const jumpToComment = () => {
|
||||
showFullPlayer.value = false;
|
||||
router.push({
|
||||
path: "/comment",
|
||||
query: {
|
||||
id: music.getPlaySongData?.id,
|
||||
type: playMode.value,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<!-- 播放器 - 专辑封面 -->
|
||||
<template>
|
||||
<div :class="['cover', playCoverType, { playing: playState }]">
|
||||
<div :class="['mian-cover', playCoverType, { playing: playState }]">
|
||||
<!-- 指针 -->
|
||||
<img
|
||||
v-if="playCoverType === 'record'"
|
||||
@@ -57,7 +57,7 @@ const { playState } = storeToRefs(status);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cover {
|
||||
.mian-cover {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -66,7 +66,6 @@ const { playState } = storeToRefs(status);
|
||||
max-width: 55vh;
|
||||
height: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
.cover-img {
|
||||
width: 100%;
|
||||
@@ -208,9 +207,13 @@ const { playState } = storeToRefs(status);
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.playing {
|
||||
transform: scale(1);
|
||||
&.cover {
|
||||
transform: scale(0.9);
|
||||
&.playing {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
&.record {
|
||||
.pointer {
|
||||
|
||||
@@ -57,13 +57,15 @@ export const initPlayer = async (playNow = false) => {
|
||||
if (playMode === "fm") music.playSongData = {};
|
||||
// 在线歌曲
|
||||
if (!isLocalSong) {
|
||||
// 获取歌曲信息
|
||||
const { id } = playSongData;
|
||||
if (!id) return false;
|
||||
// 获取歌曲 ID
|
||||
let songId = playSongData?.id;
|
||||
if (!songId) return false;
|
||||
// 若为电台模式
|
||||
if (playMode === "dj") songId = music.getPlaySongData?.djId;
|
||||
// 开启加载状态
|
||||
status.playLoading = true;
|
||||
// 获取播放地址
|
||||
const url = await getNormalSongUrl(id, status, playNow);
|
||||
const url = await getNormalSongUrl(songId, status, playNow);
|
||||
// 正常播放地址
|
||||
if (url) {
|
||||
status.playUseOtherSource = false;
|
||||
@@ -91,7 +93,7 @@ export const initPlayer = async (playNow = false) => {
|
||||
// 下一曲
|
||||
else {
|
||||
if (playIndex !== playList.length - 1) {
|
||||
changePlayIndex();
|
||||
// changePlayIndex();
|
||||
} else {
|
||||
status.playLoading = false;
|
||||
status.playState = false;
|
||||
@@ -236,7 +238,7 @@ export const createPlayer = async (src, autoPlay = true) => {
|
||||
const audioDom = player._sounds[0]._node;
|
||||
audioDom.crossOrigin = "anonymous";
|
||||
// 写入播放历史
|
||||
music.setPlayHistory(playSongData);
|
||||
if (playMode !== "dj") music.setPlayHistory(playSongData);
|
||||
// 生成音乐频谱
|
||||
// 由于浏览器安全策略,无法在此处启动
|
||||
if (showSpectrums && checkPlatform.electron()) processSpectrum(player);
|
||||
|
||||
@@ -112,7 +112,8 @@ const formatData = (data, type = "playlist", noTracks = false) => {
|
||||
// dj
|
||||
case "dj":
|
||||
return {
|
||||
id: v.mainTrackId || v.id || v.vid,
|
||||
id: v.id || v.vid,
|
||||
djId: v.mainTrackId || v.id,
|
||||
name: v.name,
|
||||
creator: v.dj,
|
||||
count: v.programCount,
|
||||
|
||||
@@ -11,7 +11,6 @@ const globalEvents = (router) => {
|
||||
// 显示播放器
|
||||
electron.ipcRenderer.on("showPlayer", () => {
|
||||
const status = siteStatus();
|
||||
if (status.playMode === "dj") return false;
|
||||
status.showFullPlayer = true;
|
||||
});
|
||||
// 播放或暂停
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
>
|
||||
<template #placeholder>
|
||||
<div class="cover-loading">
|
||||
<img class="loading-img" src="/images/pic/avatar.jpg?assest" alt="avatar" />
|
||||
<img class="loading-img" src="/images/pic/avatar.png?assest" alt="avatar" />
|
||||
</div>
|
||||
</template>
|
||||
</n-image>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
</n-image>
|
||||
<div class="content">
|
||||
<div class="name">{{ songDetail?.name || "未知曲目" }}</div>
|
||||
<div class="artist">
|
||||
<div v-if="commentType === 'normal'" class="artist">
|
||||
<n-icon depth="3" size="20">
|
||||
<SvgIcon icon="account-music" />
|
||||
</n-icon>
|
||||
@@ -45,6 +45,14 @@
|
||||
<span class="ar"> {{ songDetail?.artists || "未知艺术家" }} </span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="songDetail?.creator" class="artist dj">
|
||||
<n-icon depth="3" size="20">
|
||||
<SvgIcon icon="record" />
|
||||
</n-icon>
|
||||
<span class="all-ar dj-name">
|
||||
{{ songDetail.creator?.brand || "未知电台" }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</n-card>
|
||||
</Transition>
|
||||
@@ -86,7 +94,8 @@
|
||||
<script setup>
|
||||
import { useRouter } from "vue-router";
|
||||
import { getSongDetail } from "@/api/song";
|
||||
import { getComment, getHotComment } from "@/api/comment";
|
||||
import { getDjProgramDetail } from "@/api/dj";
|
||||
import { getComment, getHotComment, commentDj } from "@/api/comment";
|
||||
import formatData from "@/utils/formatData";
|
||||
|
||||
const router = useRouter();
|
||||
@@ -94,6 +103,9 @@ const router = useRouter();
|
||||
// 歌曲 id
|
||||
const songId = ref(router.currentRoute.value.query.id);
|
||||
|
||||
// 评论类型
|
||||
const commentType = ref(router.currentRoute.value.query.type || "normal");
|
||||
|
||||
// 歌曲信息
|
||||
const songDetail = ref(null);
|
||||
|
||||
@@ -105,9 +117,15 @@ const hotCommentData = ref(null);
|
||||
// 获取歌曲详情
|
||||
const getSongDetailData = async (id) => {
|
||||
try {
|
||||
const detail = await getSongDetail(id);
|
||||
const data = formatData(detail?.songs?.[0], "song");
|
||||
songDetail.value = data?.[0] ?? null;
|
||||
if (commentType.value === "normal") {
|
||||
const detail = await getSongDetail(id);
|
||||
const data = formatData(detail?.songs?.[0], "song");
|
||||
songDetail.value = data?.[0] ?? null;
|
||||
} else if (commentType.value === "dj") {
|
||||
const detail = await getDjProgramDetail(id);
|
||||
const data = formatData(detail?.program, "dj");
|
||||
songDetail.value = data?.[0] ?? null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取歌曲详情失败:", error);
|
||||
}
|
||||
@@ -120,14 +138,24 @@ const getCommentData = async (id, pageNo = 1, sortType = 3, pageSize = 20) => {
|
||||
const cursor =
|
||||
pageNo !== 1 && commentData.value?.cursor !== "0" ? commentData.value.cursor : null;
|
||||
// 获取热门评论和普通评论
|
||||
const [hotComments, comments] = await Promise.all([
|
||||
pageNo === 1 ? getHotComment(id, 0, 10) : null,
|
||||
getComment(id, 0, pageNo, sortType, pageSize, cursor),
|
||||
]);
|
||||
// 更新数据
|
||||
if (comments?.data.totalCount === 0) return (commentData.value = "empty");
|
||||
commentData.value = comments?.data;
|
||||
hotCommentData.value = hotComments?.hotComments?.[0] ? hotComments.hotComments : "no-comment";
|
||||
if (commentType.value === "normal") {
|
||||
const [hotComments, comments] = await Promise.all([
|
||||
pageNo === 1 ? getHotComment(id, 0, 10) : null,
|
||||
getComment(id, 0, pageNo, sortType, pageSize, cursor),
|
||||
]);
|
||||
// 更新数据
|
||||
if (comments?.data.totalCount === 0) return (commentData.value = "empty");
|
||||
commentData.value = comments?.data;
|
||||
hotCommentData.value = hotComments?.hotComments?.[0] ? hotComments.hotComments : "no-comment";
|
||||
} else if (commentType.value === "dj") {
|
||||
const offset = (pageNo - 1) * pageSize;
|
||||
const { hotComments, comments, total } = await commentDj(id, pageSize, offset, cursor);
|
||||
// 更新数据
|
||||
if (total === 0) return (commentData.value = "empty");
|
||||
commentData.value = { totalCount: comments?.length, comments };
|
||||
hotCommentData.value = hotComments?.[0] ? hotComments : "no-comment";
|
||||
console.log(commentData.value, hotCommentData.value);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取评论数据出错:", error);
|
||||
$message.error("获取评论数据出错");
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
<div class="creator">
|
||||
<n-avatar
|
||||
:src="(djDetail.creator?.avatarUrl + '?param=300y$300').replace(/^http:/, 'https:')"
|
||||
fallback-src="/images/pic/avatar.jpg?assest"
|
||||
fallback-src="/images/pic/avatar.png?assest"
|
||||
round
|
||||
/>
|
||||
<n-text class="nickname">{{ djDetail.creator?.nickname || "未知创建者" }}</n-text>
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
:src="
|
||||
(playListDetail.creator?.avatarUrl + '?param=300y$300').replace(/^http:/, 'https:')
|
||||
"
|
||||
fallback-src="/images/pic/avatar.jpg?assest"
|
||||
fallback-src="/images/pic/avatar.png?assest"
|
||||
round
|
||||
/>
|
||||
<n-text class="nickname">{{ playListDetail.creator?.nickname || "未知创建者" }}</n-text>
|
||||
|
||||
@@ -174,7 +174,7 @@
|
||||
>
|
||||
<template #placeholder>
|
||||
<div class="cover-loading">
|
||||
<img class="loading-img" src="/images/pic/avatar.jpg?assest" alt="song" />
|
||||
<img class="loading-img" src="/images/pic/avatar.png?assest" alt="song" />
|
||||
</div>
|
||||
</template>
|
||||
</n-image>
|
||||
|
||||