mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-05-18 03:17:29 +08:00
🦄 refactor: 重构整个项目 优化打包 修改后台服务为本地运行 添加更新版本检测功能
This commit is contained in:
alger
@@ -0,0 +1,258 @@
|
||||
import { ad as request, d as defineComponent, r as ref, G as computed, E as watch, O as createBlock, f as withCtx, u as unref, g as useStore, j as openBlock, b as createBaseVNode, e as createVNode, t as toDisplayString, a7 as getImgUrl, n as normalizeClass, s as setAnimationClass, c as createElementBlock, T as createCommentVNode, U as PlayBottom, a4 as renderList, a2 as normalizeStyle, a3 as Fragment, ac as isMobile, a5 as setAnimationDelay, S as Scrollbar, aj as __unplugin_components_0, am as getMusicDetail, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||||
import { S as SongItem } from "./SongItem-CoswpGn6.js";
|
||||
import { _ as __unplugin_components_2 } from "./Drawer-BEJ8Ydua.js";
|
||||
import { _ as __unplugin_components_2$2 } from "./Avatar-rQ2og-6c.js";
|
||||
import { _ as __unplugin_components_2$1 } from "./Ellipsis-D4R5dIX2.js";
|
||||
import { N as NImage } from "./Image-DXClIklC.js";
|
||||
function getListByCat(params) {
|
||||
return request.get("/top/playlist", {
|
||||
params
|
||||
});
|
||||
}
|
||||
function getListDetail(id) {
|
||||
return request.get("/playlist/detail", { params: { id } });
|
||||
}
|
||||
function getAlbum(id) {
|
||||
return request.get("/album", { params: { id } });
|
||||
}
|
||||
const _hoisted_1 = { class: "music-page" };
|
||||
const _hoisted_2 = { class: "music-header h-12 flex items-center justify-between" };
|
||||
const _hoisted_3 = { class: "music-title" };
|
||||
const _hoisted_4 = { class: "music-content" };
|
||||
const _hoisted_5 = { class: "music-info" };
|
||||
const _hoisted_6 = { class: "music-cover" };
|
||||
const _hoisted_7 = {
|
||||
key: 0,
|
||||
class: "creator-info"
|
||||
};
|
||||
const _hoisted_8 = { class: "creator-name" };
|
||||
const _hoisted_9 = {
|
||||
key: 0,
|
||||
class: "music-desc"
|
||||
};
|
||||
const _hoisted_10 = { class: "music-list-container" };
|
||||
const _hoisted_11 = { class: "music-list" };
|
||||
const _hoisted_12 = { class: "music-list-content" };
|
||||
const _hoisted_13 = {
|
||||
key: 0,
|
||||
class: "loading-more"
|
||||
};
|
||||
const pageSize = 20;
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
__name: "MusicList",
|
||||
props: {
|
||||
show: { type: Boolean },
|
||||
name: {},
|
||||
songList: {},
|
||||
loading: { type: Boolean, default: false },
|
||||
listInfo: {},
|
||||
cover: { type: Boolean, default: true }
|
||||
},
|
||||
emits: ["update:show", "update:loading"],
|
||||
setup(__props, { emit: __emit }) {
|
||||
const store = useStore();
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const page = ref(0);
|
||||
const isLoadingMore = ref(false);
|
||||
const displayedSongs = ref([]);
|
||||
const loadingList = ref(false);
|
||||
const total = computed(() => {
|
||||
if (props.listInfo?.trackIds) {
|
||||
return props.listInfo.trackIds.length;
|
||||
}
|
||||
return props.songList.length;
|
||||
});
|
||||
const formatDetail = computed(() => (detail) => {
|
||||
const song = {
|
||||
artists: detail.ar,
|
||||
name: detail.al.name,
|
||||
id: detail.al.id
|
||||
};
|
||||
detail.song = song;
|
||||
detail.picUrl = detail.al.picUrl;
|
||||
return detail;
|
||||
});
|
||||
const handlePlay = () => {
|
||||
const tracks = props.songList || [];
|
||||
store.commit(
|
||||
"setPlayList",
|
||||
tracks.map((item) => ({
|
||||
...item,
|
||||
picUrl: item.al.picUrl,
|
||||
song: {
|
||||
artists: item.ar
|
||||
}
|
||||
}))
|
||||
);
|
||||
};
|
||||
const close = () => {
|
||||
emit("update:show", false);
|
||||
};
|
||||
const loadMoreSongs = async () => {
|
||||
if (isLoadingMore.value || displayedSongs.value.length >= total.value) return;
|
||||
isLoadingMore.value = true;
|
||||
try {
|
||||
if (props.listInfo?.trackIds) {
|
||||
const start = page.value * pageSize;
|
||||
const end = Math.min((page.value + 1) * pageSize, total.value);
|
||||
const trackIds = props.listInfo.trackIds.slice(start, end).map((item) => item.id);
|
||||
if (trackIds.length > 0) {
|
||||
const { data } = await getMusicDetail(trackIds);
|
||||
displayedSongs.value = [...displayedSongs.value, ...data.songs];
|
||||
page.value++;
|
||||
}
|
||||
} else {
|
||||
const start = page.value * pageSize;
|
||||
const end = Math.min((page.value + 1) * pageSize, props.songList.length);
|
||||
const newSongs = props.songList.slice(start, end);
|
||||
displayedSongs.value = [...displayedSongs.value, ...newSongs];
|
||||
page.value++;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载歌曲失败:", error);
|
||||
} finally {
|
||||
isLoadingMore.value = false;
|
||||
loadingList.value = false;
|
||||
}
|
||||
};
|
||||
const getItemAnimationDelay = (index) => {
|
||||
const currentPageIndex = index % pageSize;
|
||||
return setAnimationDelay(currentPageIndex, 20);
|
||||
};
|
||||
const handleScroll = (e) => {
|
||||
const target = e.target;
|
||||
if (!target) return;
|
||||
const { scrollTop, scrollHeight, clientHeight } = target;
|
||||
if (scrollHeight - scrollTop - clientHeight < 100 && !isLoadingMore.value) {
|
||||
loadMoreSongs();
|
||||
}
|
||||
};
|
||||
watch(
|
||||
() => props.show,
|
||||
(newVal) => {
|
||||
loadingList.value = newVal;
|
||||
if (!props.cover) {
|
||||
loadingList.value = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.songList,
|
||||
(newSongs) => {
|
||||
page.value = 0;
|
||||
displayedSongs.value = newSongs.slice(0, pageSize);
|
||||
if (newSongs.length > pageSize) {
|
||||
page.value = 1;
|
||||
}
|
||||
loadingList.value = false;
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_ellipsis = __unplugin_components_2$1;
|
||||
const _component_n_image = NImage;
|
||||
const _component_n_avatar = __unplugin_components_2$2;
|
||||
const _component_n_scrollbar = Scrollbar;
|
||||
const _component_n_spin = __unplugin_components_0;
|
||||
const _component_n_drawer = __unplugin_components_2;
|
||||
return openBlock(), createBlock(_component_n_drawer, {
|
||||
show: _ctx.show,
|
||||
height: unref(isMobile) ? "100%" : "80%",
|
||||
placement: "bottom",
|
||||
"block-scroll": "",
|
||||
"mask-closable": "",
|
||||
style: { backgroundColor: "transparent" },
|
||||
to: `#layout-main`,
|
||||
onMaskClick: close
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("div", _hoisted_1, [
|
||||
createBaseVNode("div", _hoisted_2, [
|
||||
createVNode(_component_n_ellipsis, { "line-clamp": 1 }, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("div", _hoisted_3, toDisplayString(_ctx.name), 1)
|
||||
]),
|
||||
_: 1
|
||||
}),
|
||||
createBaseVNode("div", { class: "music-close" }, [
|
||||
createBaseVNode("i", {
|
||||
class: "icon iconfont icon-icon_error",
|
||||
onClick: close
|
||||
})
|
||||
])
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_4, [
|
||||
createBaseVNode("div", _hoisted_5, [
|
||||
createBaseVNode("div", _hoisted_6, [
|
||||
createVNode(_component_n_image, {
|
||||
src: unref(getImgUrl)(_ctx.cover ? _ctx.listInfo?.coverImgUrl : unref(displayedSongs)[0]?.picUrl, "500y500"),
|
||||
class: normalizeClass(["cover-img", unref(setAnimationClass)("animate__fadeIn")]),
|
||||
"preview-disabled": "",
|
||||
"object-fit": "cover"
|
||||
}, null, 8, ["src", "class"])
|
||||
]),
|
||||
_ctx.listInfo?.creator ? (openBlock(), createElementBlock("div", _hoisted_7, [
|
||||
createVNode(_component_n_avatar, {
|
||||
round: "",
|
||||
size: 24,
|
||||
src: unref(getImgUrl)(_ctx.listInfo.creator.avatarUrl, "50y50")
|
||||
}, null, 8, ["src"]),
|
||||
createBaseVNode("span", _hoisted_8, toDisplayString(_ctx.listInfo.creator.nickname), 1)
|
||||
])) : createCommentVNode("", true),
|
||||
createVNode(_component_n_scrollbar, { style: { "max-height": "200" } }, {
|
||||
default: withCtx(() => [
|
||||
_ctx.listInfo?.description ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(_ctx.listInfo.description), 1)) : createCommentVNode("", true),
|
||||
createVNode(PlayBottom)
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_10, [
|
||||
createBaseVNode("div", _hoisted_11, [
|
||||
createVNode(_component_n_scrollbar, { onScroll: handleScroll }, {
|
||||
default: withCtx(() => [
|
||||
createVNode(_component_n_spin, {
|
||||
show: unref(loadingList) || _ctx.loading
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("div", _hoisted_12, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayedSongs), (item, index) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
key: item.id,
|
||||
class: normalizeClass(["double-item", unref(setAnimationClass)("animate__bounceInUp")]),
|
||||
style: normalizeStyle(getItemAnimationDelay(index))
|
||||
}, [
|
||||
createVNode(SongItem, {
|
||||
item: unref(formatDetail)(item),
|
||||
onPlay: handlePlay
|
||||
}, null, 8, ["item"])
|
||||
], 6);
|
||||
}), 128)),
|
||||
unref(isLoadingMore) ? (openBlock(), createElementBlock("div", _hoisted_13, "加载更多...")) : createCommentVNode("", true),
|
||||
createVNode(PlayBottom)
|
||||
])
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["show"])
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
createVNode(PlayBottom)
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["show", "height"]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const MusicList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1b137c3d"]]);
|
||||
export {
|
||||
MusicList as M,
|
||||
getListDetail as a,
|
||||
getListByCat as b,
|
||||
getAlbum as g
|
||||
};
|
||||
Reference in New Issue
Block a user