diff --git a/electron/electron.js b/electron/electron.js index bb0e73d..4248fff 100644 --- a/electron/electron.js +++ b/electron/electron.js @@ -11,13 +11,20 @@ let p = require('path').join(NMApiPath + '/node_modules'); require('module').globalPaths.unshift(p); //加入到module的路径列表 console.log(process.resourcesPath, NMApiPath) -if(!isDev)const svc = require(NMApiPath + '/app.js') +let svc +if(!isDev)svc = require(NMApiPath + '/app.js') function createWindow() { // Create the browser window. const mainWindow = new BrowserWindow({ width: 800, height: 600, + minWidth: 800, + minHeight: 600, + maxWidth: 1000, + maxHeight: 800, + maximizable: false, + minimizable: false, webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegration: true, diff --git a/src/App.vue b/src/App.vue index 3bc0f9a..7a5c065 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,5 @@ @@ -155,8 +182,7 @@ body { margin-top: -44px; position: absolute; - .zm-top-menu.n-menu.n-menu--horizontal - .n-menu-item-content { + .zm-top-menu.n-menu.n-menu--horizontal .n-menu-item-content { padding: 0 12px; } } @@ -200,13 +226,16 @@ body { flex: 1; padding: 6px; } + } + #wpSongDetail { + } #wpPlayingList { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; + // position: absolute; + // left: 0; + // top: 0; + // right: 0; + // bottom: 0; #playingList { position: absolute; diff --git a/src/assets/images/disk.png b/src/assets/images/disk.png new file mode 100644 index 0000000..2b1319c Binary files /dev/null and b/src/assets/images/disk.png differ diff --git a/src/assets/images/needle.png b/src/assets/images/needle.png new file mode 100644 index 0000000..6bf0e66 Binary files /dev/null and b/src/assets/images/needle.png differ diff --git a/src/assets/svgs/ArrowMaximize24Regular.svg b/src/assets/svgs/ArrowMaximize24Regular.svg new file mode 100644 index 0000000..2e838bc --- /dev/null +++ b/src/assets/svgs/ArrowMaximize24Regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svgs/ArrowMaximizeVertical24Regular.svg b/src/assets/svgs/ArrowMaximizeVertical24Regular.svg new file mode 100644 index 0000000..d077e62 --- /dev/null +++ b/src/assets/svgs/ArrowMaximizeVertical24Regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svgs/ArrowMinimize24Regular.svg b/src/assets/svgs/ArrowMinimize24Regular.svg new file mode 100644 index 0000000..17ad685 --- /dev/null +++ b/src/assets/svgs/ArrowMinimize24Regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svgs/ArrowMinimizeVertical24Regular.svg b/src/assets/svgs/ArrowMinimizeVertical24Regular.svg new file mode 100644 index 0000000..0e2007f --- /dev/null +++ b/src/assets/svgs/ArrowMinimizeVertical24Regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svgs/ChevronDown.svg b/src/assets/svgs/ChevronDown.svg new file mode 100644 index 0000000..3eac07a --- /dev/null +++ b/src/assets/svgs/ChevronDown.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svgs/ChevronUp.svg b/src/assets/svgs/ChevronUp.svg new file mode 100644 index 0000000..e80ee20 --- /dev/null +++ b/src/assets/svgs/ChevronUp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index e3aea71..c86635a 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -4,6 +4,7 @@ export default createStore({ state: { // appVersion: "0.0.1", // debugStr: "测试debug字符", + showSongDetail: false, //是否显示歌曲详情 settings: { currentRoute: "/discover/recommend", //当前路由 songId: 0, //歌曲id @@ -11,8 +12,6 @@ export default createStore({ playMode: 0, //播放模式：0-3，顺序，循环，单曲，随机。 lastPlayed: [], //最近播放 playingList: [], //当前播放 - tArr: [], //测试数组 - ts: "", //测试字符 }, caches: {}, theme: { diff --git a/src/views/common/SongDetail.vue b/src/views/common/SongDetail.vue new file mode 100644 index 0000000..9a65d46 --- /dev/null +++ b/src/views/common/SongDetail.vue @@ -0,0 +1,177 @@ + + + + + + + diff --git a/src/views/common/SongInfo.vue b/src/views/common/SongInfo.vue index ce8d6b6..34b59cb 100644 --- a/src/views/common/SongInfo.vue +++ b/src/views/common/SongInfo.vue @@ -7,17 +7,19 @@ import { toRefs, toRaw, } from "vue"; -import {useStore} from 'vuex' -import { NAvatar } from "naive-ui"; +import { useStore } from "vuex"; +import { NAvatar, NIcon } from "naive-ui"; import pubsub from "pubsub-js"; -import { getSongDetial } from "@/network/song"; -import dayjs from 'dayjs' -import 'dayjs/locale/zh-cn' -import duration from 'dayjs/plugin/duration' +import { getSongDetial, getLyric } from "@/network/song"; +import dayjs from "dayjs"; +import "dayjs/locale/zh-cn"; +import duration from "dayjs/plugin/duration"; import ArtistsSpan from "@/components/ArtistsSpan.vue"; +import svgArrowMin from "@/assets/svgs/ArrowMinimize24Regular.svg"; +import svgArrowMax from "@/assets/svgs/ArrowMaximize24Regular.svg"; -const store = useStore() -const showInfo = ref(false); +const store = useStore(); +const showInfo = ref(true); const info = reactive({ name: "", artists: [], @@ -26,7 +28,7 @@ const info = reactive({ mv: 0, }); -//#region 取得歌曲信息 +//#region 取得歌曲信息、歌词 const songInfo = (id, im) => { getSongDetial(id) .then((res) => { @@ -36,17 +38,37 @@ const songInfo = (id, im) => { info.album = res.data.songs[0].al; info.duration = res.data.songs[0].dt; info.mv = res.data.songs[0].mv; - currTime.value = '00:00' - totalTime.value = zpTime(info.duration) - if(im){ - const p = {...{ + currTime.value = "00:00"; + totalTime.value = zpTime(info.duration); + if (im) { + const p = { + ...{ + id, + date: Date.now(), + }, + ...toRaw(info), + }; + store.commit("savePlayed", p); + store.commit("addToPlayingList", p); + console.log("savePlayed"); + } + pubsub.publish("zp.songInfo", { + ...{ id, date: Date.now(), - }, ...toRaw(info)} - store.commit('savePlayed', p) - store.commit('addToPlayingList', p) - console.log('savePlayed'); - } + }, + ...toRaw(info), + }); + }) + .catch((err) => {}); +}; +const songLyric = (id) => { + getLyric(id) + .then((res) => { + if (res.data.code == 200) + pubsub.publish("zp.lyric", res.data.lrc.lyric ); + else + pubsub.publish("zp.lyric", null); }) .catch((err) => {}); }; @@ -56,22 +78,23 @@ const songInfo = (id, im) => { let totalTime = ref("03:13"); let currTime = ref("00:03"); -dayjs.extend(duration) +dayjs.extend(duration); function zpTime(time) { - return dayjs.duration(time).format('mm:ss') + return dayjs.duration(time).format("mm:ss"); } // totalTime.value = zpTime(12345) const psToken = pubsub.subscribe("zp", (msg, data) => { switch (msg) { case "zp.getSongInfo": songInfo(data.id, data.im); + songLyric(data.id); break; case "zp.hideSongInfo": - showInfo.value = false + showInfo.value = false; break; case "zp.progress": - totalTime.value = zpTime(data.total * 1000) - currTime.value = zpTime(data.progress * 1000) + totalTime.value = zpTime(data.total * 1000); + currTime.value = zpTime(data.progress * 1000); break; } }); @@ -80,25 +103,40 @@ onUnmounted(() => { pubsub.unsubscribe(psToken); }); //#endregion + +const toggleSongDetail = () => { + console.log( + "显示/隐藏歌曲详细界面，包括歌词、模拟唱机以及其他操作。" + ); + pubsub.publish("zp.toggleSongDetail"); +};