diff --git a/package-lock.json b/package-lock.json
index 7c525648a3ca1a621b1088d693def4ae608632e9..11757d64d18c6d86d0762896b72369febfb7b80c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,9 +16,11 @@
"element-plus": "^2.8.2",
"pinia": "^2.2.2",
"swiper": "^11.1.14",
+ "tippy.js": "^6.3.7",
"uuid": "^11.0.3",
"vue": "^3.5.12",
- "vue-router": "^4.4.5"
+ "vue-router": "^4.4.5",
+ "vue-tippy": "^6.5.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
@@ -16751,6 +16753,15 @@
"node": ">=0.6.0"
}
},
+ "node_modules/tippy.js": {
+ "version": "6.3.7",
+ "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+ "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@popperjs/core": "^2.9.0"
+ }
+ },
"node_modules/tmp": {
"version": "0.2.3",
"resolved": "https://repo.huaweicloud.com/repository/npm/tmp/-/tmp-0.2.3.tgz",
@@ -17490,6 +17501,18 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/vue-tippy": {
+ "version": "6.5.0",
+ "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-6.5.0.tgz",
+ "integrity": "sha512-U44UDETTLuZWZGosagslEwgimWQdt1JVSxfWStVPnVdeqo2jo9X5zW3SB04k7JaTFosdgrDhFsUDrd6n42Nh7Q==",
+ "license": "MIT",
+ "dependencies": {
+ "tippy.js": "^6.3.7"
+ },
+ "peerDependencies": {
+ "vue": "^3.2.0"
+ }
+ },
"node_modules/watchpack": {
"version": "2.4.2",
"resolved": "https://repo.huaweicloud.com/repository/npm/watchpack/-/watchpack-2.4.2.tgz",
@@ -29904,6 +29927,14 @@
"setimmediate": "^1.0.4"
}
},
+ "tippy.js": {
+ "version": "6.3.7",
+ "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+ "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+ "requires": {
+ "@popperjs/core": "^2.9.0"
+ }
+ },
"tmp": {
"version": "0.2.3",
"resolved": "https://repo.huaweicloud.com/repository/npm/tmp/-/tmp-0.2.3.tgz",
@@ -30394,6 +30425,14 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
+ "vue-tippy": {
+ "version": "6.5.0",
+ "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-6.5.0.tgz",
+ "integrity": "sha512-U44UDETTLuZWZGosagslEwgimWQdt1JVSxfWStVPnVdeqo2jo9X5zW3SB04k7JaTFosdgrDhFsUDrd6n42Nh7Q==",
+ "requires": {
+ "tippy.js": "^6.3.7"
+ }
+ },
"watchpack": {
"version": "2.4.2",
"resolved": "https://repo.huaweicloud.com/repository/npm/watchpack/-/watchpack-2.4.2.tgz",
diff --git a/package.json b/package.json
index 0252b3146c4c0ead33b58bf4c916602df77f574f..0062ab5fd2f86db67b59d73184fd312a866a51ab 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,11 @@
"element-plus": "^2.8.2",
"pinia": "^2.2.2",
"swiper": "^11.1.14",
+ "tippy.js": "^6.3.7",
"uuid": "^11.0.3",
"vue": "^3.5.12",
- "vue-router": "^4.4.5"
+ "vue-router": "^4.4.5",
+ "vue-tippy": "^6.5.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
diff --git a/src/components/LeftSideBar.vue b/src/components/LeftSideBar.vue
index 43b3b22431bc4368ec2df4cedf7e5e5c750b70ec..01845ca17e042fea3568465d4f93b4f70cf48fa2 100644
--- a/src/components/LeftSideBar.vue
+++ b/src/components/LeftSideBar.vue
@@ -8,8 +8,10 @@ import playButton from "../icon/playButton.vue";
import {createPlaylist, getPlaylistsByUser} from "../api/playlist";
import {ElPopover} from "element-plus";
-const emit = defineEmits();
+
+
+const emit = defineEmits();
const musicAlbums = ref([]);
let albumHoveredIndex = ref(null);
@@ -108,17 +110,22 @@ const closePopover = () => {
popover1.value.hide();
}
+
defineProps({
callParentFunction: Function
})
+
+
+
+
</script>
<template>
- <nav class="main-menu resizable-box" :style="{ width: sideBarWidth + 'px'}">
+ <nav class="main-menu resizable-box" :style="{ width: sideBarWidth + 'px'}">
<div class="top-control">
<div class="toggle-button" @click="toggleSideBar">
- <music-album-opened v-if="isSideBarOpen"/>
- <music-album-closed v-if="!isSideBarOpen"/>
+ <music-album-opened v-tippy="{ content: '鎵撳紑闊充箰搴�' }" v-if="isSideBarOpen"/>
+ <music-album-closed v-tippy="{ content: '鎶樺彔闊充箰搴�' }" v-if="!isSideBarOpen"/>
<p style="margin-left: 15px;font:normal small-caps bold 20px Arial, sans-serif ;" v-if="isSideBarOpen">
闊充箰搴�</p>
</div>
@@ -131,7 +138,7 @@ defineProps({
popper-class="left-popover">
<template #reference>
<div class="add-album">
- <plus-icon class="plus-icon"/>
+ <plus-icon v-tippy="{ content: '鍒涘缓鏂版瓕鍗�' }" class="plus-icon"/>
</div>
</template>
<ul @click="closePopover">
@@ -142,7 +149,7 @@ defineProps({
</div>
<div class="search-container">
<div class="search-album" v-if="isSideBarOpen" @click="toggleSearchBar">
- <search-icon class="search-icon"/>
+ <search-icon v-tippy="{ content: '鎼滅储姝屽崟' }" class="search-icon"/>
</div>
<input type="text" class="search-input" placeholder="杈撳叆鎼滅储姝屽崟" @keydown.enter="searchAlbum"
@blur="blurSearchBar"/>
@@ -169,7 +176,7 @@ defineProps({
class="musicAlbum-image"
:style="{opacity:albumHoveredIndex === album.id ? 0.4 :1}"
/>
- <play-button @click="" v-if="albumHoveredIndex === album.id"
+ <play-button v-tippy="{ content: '浠庡ご鎾斁闊充箰' }" @click="" v-if="albumHoveredIndex === album.id"
class="play-button"/>
<div class="musicAlbum-description">
diff --git a/src/components/MusicAlbumView.vue b/src/components/MusicAlbumView.vue
index f8118aefdcbe1e9a7338bd438c587603e9d09cfd..20fa87880fa85519593f6bb56066668f5f8e0078 100644
--- a/src/components/MusicAlbumView.vue
+++ b/src/components/MusicAlbumView.vue
@@ -7,6 +7,8 @@ import {ElMessage, ElPopover} from "element-plus";
import {backgroundColor, updateBackground} from "../utils/getBackgroundColor";
import pauseButton from "../icon/pauseButton.vue";
import {modifyPlaylist, removePlaylist, removeSongFromPlaylist} from "../api/playlist";
+import tippy from 'tippy.js';
+
const emit = defineEmits();
const props = defineProps({
@@ -176,7 +178,10 @@ const closePopover = (e) => {
item.hide();
})
}
-
+// 榧犳爣鎮仠鎻愮ず
+tippy('#myButton', {
+ content: "I'm a Tippy tooltip!",
+});
//TODO:
const enterPersonalSpace = () => {
@@ -304,7 +309,7 @@ const addRecommendMusic = (musicId) => {
:ref="getPopoverIndex"
:hide-after=0>
<template #reference>
- <dots class="more-info"/>
+ <dots v-tippy="'姝屽崟璇︽儏'" class="more-info"/>
</template>
<ul @click="closePopover">
<li @click="()=>{editAlbumDescription(albumInfo.id)}">缂栬緫姝屽崟璇︽儏</li>
@@ -330,7 +335,7 @@ const addRecommendMusic = (musicId) => {
<p style="position:absolute; left:45px">#</p>
<p style="position:absolute; left:140px">鏍囬</p>
<p class="album-text" style="position:absolute; left:62%">涓撹緫</p>
- <p style="margin-left: auto; margin-right:55px">鏃堕棿</p>
+ <p style="margin-left: auto; margin-right:20px">璇︽儏</p> <!--鏃堕棿鍙樹负璇︾粏淇℃伅-->
</div>
<div class="edit-desc" @blur="quitEdit">
<div data-testid="playlist-edit-details-modal" class="main-edit-desc">
@@ -470,7 +475,7 @@ const addRecommendMusic = (musicId) => {
>
<template #reference>
- <check-mark class="check-mark"
+ <check-mark class="check-mark" v-tippy="'鍔犲叆姝屽崟'"
:style="{visibility: musicHoveredIndex === music.id ? 'visible' : 'hidden'}"/>
</template>
@@ -500,7 +505,7 @@ const addRecommendMusic = (musicId) => {
:hide-after=0
>
<template #reference>
- <dots class="music-more-info"/>
+ <dots v-tippy="'姝屾洸璇︽儏'" class="music-more-info"/>
</template>
<ul @click="closePopover">
<li @click="removeMusicFromAlbum(music.id)">鍒犻櫎姝屾洸</li>
diff --git a/src/main.js b/src/main.js
index b9ab5940a3476263a9d74ca9ad203fdfb33fa5ce..2211d9dbc1b1597b0a88084570a3911b36e0ddb3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,10 @@ import ElementPlus from 'element-plus'
import pinia from './store/store'
import 'element-plus/dist/index.css'
import '@/style/ElStyle.css'
+
+import 'tippy.js/dist/tippy.css';
+import VueTippy from 'vue-tippy'
+
// const { app, BrowserWindow } = require('electron');
// // const path = require('path');
//
@@ -48,4 +52,20 @@ axios.defaults.baseURL = ("http://localhost:8081")
// axios.defaults.baseURL = ("http://172.29.4.13:8081")
axios.defaults.timeout = 30000;
-createApp(App).use(ElementPlus).use(router).use(pinia).mount('#app')
\ No newline at end of file
+createApp(App)
+ .use(ElementPlus).use(
+ VueTippy,
+ // optional
+ {
+ directive: 'tippy', // => v-tippy
+ componentSingleton: 'tippy-singleton', // => <tippy-singleton/>,
+ defaultProps: {
+ placement: 'top',
+ allowHTML: true,
+ arrow: false,
+ }, // => Global default options * see all props
+ }
+)
+ .use(router)
+ .use(pinia)
+ .mount('#app')
\ No newline at end of file
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 6da219884015749dbaa2d784c5d59fb2a79bab38..e86aa553fc9a1ff498989665795f05cd876bd294 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -1,7 +1,7 @@
/* eslint-disable */
<script setup>
// Vue Basics
-import {computed, onMounted, ref} from "vue"
+import {computed, onMounted, ref, watch} from "vue"
// Assets
import defaultBg from '../assets/pictures/Eason.png'
@@ -353,6 +353,7 @@ const togglePlayingPage = () => {
isPlayingPage.value = !isPlayingPage.value;
registerDOMs();
}
+
const switchSongs = (del) => {
console.log(playingMode.value, currentSongIndex.value, songs.value.length)
switch (playingMode.value) {
@@ -515,13 +516,10 @@ function receiveDataFromHeader(data) {
setMidComponents(3);
}
-/*
- HOME
- */
+/*HOME*/
function receiveDataFromHome() {
setMidComponents(0);
}
-
/*
MID COMPONENTS
0 - Main View
@@ -600,7 +598,7 @@ let playFromLeftBarAlbum = ref(null);
<div v-if="midComponents == 1" class="playlist-container"
style="overflow: scroll; border-radius: 12px">
<MusicAlbumView :album-info="displayingPlaylist" :music-list="displayingSongs"
- @switchSongs="switchToPlaylist" :playFromLeftBar="playFromLeftBarAlbum"/>
+ @switchSongs="switchToPlaylist" :playFromLeftBar="playFromLeftBarAlbum" :play-list="playlists"/>
</div>
<el-container v-if="midComponents == 2" class="playlist-container"
style="overflow: auto; height: 730px ;border-radius: 12px">
@@ -952,7 +950,7 @@ h1 {
"left-sidebar main-view main-view"
"now-playing-bar now-playing-bar now-playing-bar";
grid-template-columns: auto 1fr;
- grid-template-rows: 10% 81% 9%;
+ grid-template-rows: 10% 80% 10%;
grid-auto-rows: min-content;
column-gap: 8px;