Skip to content
Snippets Groups Projects
Commit 3a8060cc authored by 张 达's avatar 张 达
Browse files

Merge remote-tracking branch 'origin/main' 

# Conflicts:
#	src/views/HomePage.vue
parents 42ce4200 10267a86
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1017 additions and 989 deletions
src/App.vue
+ 21
− 14
View file @ 3a8060cc
<template>
<div id="opacity-bg" style="position: fixed; width: 100%; height: 100%; transition: 0.5s"></div>
<div id="opacity-bg1" style="position: fixed; width: 100%; height: 100%; transition: 0.5s"></div>
<router-view/>
<div id="opacity-bg" style="position: fixed; width: 100%; height: 100%; transition: 0.5s"></div>
<div id="opacity-bg1" style="position: fixed; width: 100%; height: 100%; transition: 0.5s"></div>
<router-view/>
</template>
<script>
......@@ -10,21 +10,28 @@
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 0;
padding: 0;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
display: none;
}
#opacity-bg, #opacity-bg1 {
z-index: -1;
z-index: -1;
}
html, body {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
\ No newline at end of file
src/assets/pictures/logos/logo1.png 0 → 100644
+ 0
− 0
View file @ 3a8060cc
src/assets/pictures/logos/logo1.png

77.5 KiB

src/assets/pictures/logos/logo2.png 0 → 100644
+ 0
− 0
View file @ 3a8060cc
src/assets/pictures/logos/logo2.png

59.8 KiB

src/assets/pictures/logos/logo3.png 0 → 100644
+ 0
− 0
View file @ 3a8060cc
src/assets/pictures/logos/logo3.png

63.9 KiB

src/components/Empty.vue
+ 1
− 1
View file @ 3a8060cc
......@@ -5,7 +5,7 @@ const color = ref("#72d1fa")
const magic = defineProps({
magic: {}
});
const emptyTitle = ref("歌曲未找到 :(")
const emptyTitle = ref("未找到结果 :(")
const emptyMessage = ref([
"抱歉，我们的数据库没跟上你的品味！",
"找不到歌曲，就像音符没有五线谱，太难了！",
......
src/components/LeftSideBar.vue
+ 252
− 265
View file @ 3a8060cc
......@@ -10,164 +10,149 @@ import {ElPopover} from "element-plus";
const emit = defineEmits();
const musicAlbums = ref([
{ id: 1, image: require('../assets/pictures/playlists/1.jpg'), title: '歌单 1' },
{ id: 2, image: require('../assets/pictures/playlists/2.jpg'), title: '歌单 2' },
{ id: 3, image: require('../assets/pictures/playlists/3.jpg'), title: '歌单 3' },
{ id: 4, image: require('../assets/pictures/playlists/1.jpg'), title: '歌单 1' },
{ id: 5, image: require('../assets/pictures/playlists/2.jpg'), title: '歌单 2' },
{ id: 6, image: require('../assets/pictures/playlists/3.jpg'), title: '歌单 3' },
{ id: 7, image: require('../assets/pictures/playlists/1.jpg'), title: '歌单 1' },
{ id: 8, image: require('../assets/pictures/playlists/2.jpg'), title: '歌单 2' },
{ id: 9, image: require('../assets/pictures/playlists/3.jpg'), title: '歌单 3' },
{ id: 10, image: require('../assets/pictures/playlists/1.jpg'), title: '歌单 1' },
{ id: 11 ,image: require('../assets/pictures/playlists/2.jpg'), title: '歌单 2' },
{ id: 12, image: require('../assets/pictures/playlists/3.jpg'), title: '歌单 3' },
// 更多歌单
]);
const musicAlbums = ref([]);
let albumHoveredIndex = ref(null);
let hoverOnAlbum= ref(false);
let hoverOnAlbum = ref(false);
let isSideBarOpen = ref(true);
let sideBarWidth = ref(180);
let sideBarWidth = ref(250);
let user = ref("HanG");
const criticalWidth = 180;
const maximumWidth = 310;
const minWidth = 75;
function toggleSideBar() {
isSideBarOpen = !isSideBarOpen;
sideBarWidth.value = isSideBarOpen? criticalWidth : minWidth;
isSideBarOpen = !isSideBarOpen;
sideBarWidth.value = isSideBarOpen ? criticalWidth : minWidth;
}
function startResizing(event) {
event.preventDefault();
const initialWidth = sideBarWidth.value;
const initialMouseX = event.clientX;
const onMouseMove = (moveEvent) => {
sideBarWidth.value = initialWidth + (moveEvent.clientX - initialMouseX);
// 确保宽度不小于最小值
if(sideBarWidth.value <= criticalWidth) {
isSideBarOpen = false;
sideBarWidth.value = minWidth;
}
// 确保宽度不大于最大值
else if(sideBarWidth.value >= maximumWidth)
{
sideBarWidth.value = maximumWidth;
}
else
isSideBarOpen = true;
};
const onMouseUp = () => {
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
};
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
event.preventDefault();
const initialWidth = sideBarWidth.value;
const initialMouseX = event.clientX;
const onMouseMove = (moveEvent) => {
sideBarWidth.value = initialWidth + (moveEvent.clientX - initialMouseX);
// 确保宽度不小于最小值
if (sideBarWidth.value <= criticalWidth) {
isSideBarOpen = false;
sideBarWidth.value = minWidth;
}
// 确保宽度不大于最大值
else if (sideBarWidth.value >= maximumWidth) {
sideBarWidth.value = maximumWidth;
} else
isSideBarOpen = true;
};
const onMouseUp = () => {
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
};
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
}
function addAlbum() {
//TODO：添加新的空歌单
//TODO：添加新的空歌单
}
function toggleSearchBar() {
const input = document.querySelector(".search-input");
input.classList.toggle('active'); // 切换输入框的显示状态
input.focus(); // 点击搜索图标后聚焦输入框
const input = document.querySelector(".search-input");
input.classList.toggle('active'); // 切换输入框的显示状态
input.focus(); // 点击搜索图标后聚焦输入框
}
function blurSearchBar() {
const input = document.querySelector(".search-input");
if (input.classList.contains('active'))
input.classList.remove('active');
const input = document.querySelector(".search-input");
if (input.classList.contains('active'))
input.classList.remove('active');
}
function searchAlbum() {
const input = document.querySelector(".search-input").value;
// TODO:提交表单
const input = document.querySelector(".search-input").value;
// TODO:提交表单
}
onMounted(() => {
getPlaylistsByUser({
user_id: 1,
}).then(res => {
musicAlbums.value = res.data.result || []
}).catch(e => {
})
getPlaylistsByUser({
user_id: 1,
}).then(res => {
musicAlbums.value = res.data.result || []
}).catch(e => {
})
})
defineProps({
callParentFunction: Function
callParentFunction: Function
})
</script>
<template>
<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"/>
<p style="margin-left: 15px;font:normal small-caps bold 20px Arial, sans-serif ;" v-if="isSideBarOpen">
音乐库</p>
</div>
<el-popover v-if="isSideBarOpen" class="dropdown-options"
:width="200"
trigger="click"
:hide-after=0>
<template #reference >
<div class="add-album">
<plus-icon class="plus-icon"/>
</div>
</template>
<ul>
<li @click="addAlbum">添加歌单</li>
</ul>
</el-popover>
</div>
<div class="search-container">
<div class="search-album" v-if="isSideBarOpen" @click="toggleSearchBar">
<search-icon class="search-icon"/>
</div>
<input type="text" class="search-input" placeholder="输入搜索歌单" @keydown.enter="searchAlbum"
@blur="blurSearchBar"/>
</div>
<div class="musicAlbums"
@mouseenter="()=>{hoverOnAlbum=true}"
@mouseleave="()=>{hoverOnAlbum=false}"
:style="{ scrollbarWidth : hoverOnAlbum? 'auto':'none'}">
<div v-if="musicAlbums !== undefined" v-for="album in musicAlbums"
:key="album.id"
@mouseenter="()=>{albumHoveredIndex = album.id}"
@mouseleave="()=>{albumHoveredIndex = null}"
:style="{backgroundColor: albumHoveredIndex === album.id ? '#1F1F1F' : '#171717' }"
class="musicAlbum-item">
<img
src='../assets/pictures/playlists/1.jpg'
:src="album.image"
alt="playlist"
class="musicAlbum-image"
:style="{opacity:albumHoveredIndex === album.id ? 0.4 :1}"
/>
<play-button @click="emit('setCurrentPlaylist', album.id);" v-if="albumHoveredIndex === album.id"
class="play-button"/>
<div class="musicAlbum-description">
<p style="padding-bottom: 5px;font-size: 18px">{{ album.title }}</p>
<p style="color: #b2b2b2;font-size: 13px">歌单 • {{ user }}</p>
</div>
</div>
</div>
<div class="resizer" @mousedown="startResizing" :style="{left:(sideBarWidth+8) +'px'}"></div>
</nav>
<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"/>
<p style="margin-left: 15px;font:normal small-caps bold 20px Arial, sans-serif ;" v-if="isSideBarOpen">
音乐库</p>
</div>
<el-popover v-if="isSideBarOpen" class="dropdown-options"
:width="200"
trigger="click"
:hide-after=0>
<template #reference>
<div class="add-album">
<plus-icon class="plus-icon"/>
</div>
</template>
<ul>
<li @click="addAlbum">添加歌单</li>
</ul>
</el-popover>
</div>
<div class="search-container">
<div class="search-album" v-if="isSideBarOpen" @click="toggleSearchBar">
<search-icon class="search-icon"/>
</div>
<input type="text" class="search-input" placeholder="输入搜索歌单" @keydown.enter="searchAlbum"
@blur="blurSearchBar"/>
</div>
<div class="musicAlbums"
@mouseenter="()=>{hoverOnAlbum=true}"
@mouseleave="()=>{hoverOnAlbum=false}"
:style="{ scrollbarWidth : hoverOnAlbum? 'auto':'none'}">
<div v-if="musicAlbums !== undefined" v-for="album in musicAlbums"
:key="album.id"
@mouseenter="()=>{albumHoveredIndex = album.id}"
@mouseleave="()=>{albumHoveredIndex = null}"
:style="{backgroundColor: albumHoveredIndex === album.id ? '#1F1F1F' : '#171717' }"
class="musicAlbum-item">
<img
:src="album.picPath"
alt="playlist"
class="musicAlbum-image"
:style="{opacity:albumHoveredIndex === album.id ? 0.4 :1}"
/>
<play-button @click="emit('setCurrentPlaylist', album);" v-if="albumHoveredIndex === album.id"
class="play-button"/>
<div class="musicAlbum-description">
<p style="padding-bottom: 5px;font-size: 18px">{{ album.title }}</p>
<p style="color: #b2b2b2;font-size: 13px">歌单 • {{ user }}</p>
</div>
</div>
</div>
<div class="resizer" @mousedown="startResizing" :style="{left:(sideBarWidth+8) +'px'}"></div>
</nav>
</template>
<style scoped>
......@@ -175,182 +160,184 @@ defineProps({
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul {
background-color: #282828;
list-style-type: none;
margin: 0;
border-radius: 10px;
padding: 12px 8px;
background-color: #282828;
list-style-type: none;
margin: 0;
border-radius: 10px;
padding: 12px 8px;
}
li {
color: white;
padding: 10px 12px;
color: white;
padding: 10px 12px;
}
li:hover {
cursor: pointer;
background-color: #404040;
text-decoration: underline;
cursor: pointer;
background-color: #404040;
text-decoration: underline;
}
nav {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
}
.main-menu.resizable-box {
/* position: relative; /*使得子元素的absotute是相对于该元素 这里不设置，位置通过js控制 不然的话resizer会被gap遮蔽*/
display: flex;
flex-direction: column;
border: none;
border-radius: 12px;
padding: 12px 0 20px;
overflow: hidden;
font-family: inherit;
background-color: #171717;
/* position: relative; /*使得子元素的absotute是相对于该元素 这里不设置，位置通过js控制 不然的话resizer会被gap遮蔽*/
display: flex;
flex-direction: column;
border: none;
border-radius: 12px;
padding: 12px 0 20px;
overflow: hidden;
font-family: inherit;
background-color: #171717;
}
.top-control {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.add-album {
color: #b2b2b2;
margin-top: 5px;
margin-right: 10px;
width: 30px;
cursor: pointer;
color: #b2b2b2;
margin-top: 5px;
margin-right: 10px;
width: 30px;
cursor: pointer;
}
.search-container {
margin: 12px 10px;
display: flex;
align-items: center;
cursor: pointer;
margin: 12px 10px;
display: flex;
align-items: center;
cursor: pointer;
}
.search-icon {
font-size: 24px;
transition: margin-right 0.3s ease;
font-size: 24px;
transition: margin-right 0.3s ease;
}
.search-input {
background-color: #404040;
font-size: 15px;
color: #ffffff;
height: 35px;
border: none;
width: 0;
opacity: 0;
transition: width 0.3s ease, opacity 0.3s ease;
padding: 5px;
border-radius: 4px;
outline: none;
background-color: #404040;
font-size: 15px;
color: #ffffff;
height: 35px;
border: none;
width: 0;
opacity: 0;
transition: width 0.3s ease, opacity 0.3s ease;
padding: 5px;
border-radius: 4px;
outline: none;
}
.search-input.active {
width: 70%; /* 设置输入框拉伸后的宽度 */
opacity: 1;
width: 70%; /* 设置输入框拉伸后的宽度 */
opacity: 1;
}
.search-album {
display: flex;
color: #b2b2b2;
width: 35px;
height: 35px;
cursor: pointer;
align-items: center;
justify-content: center;
display: flex;
color: #b2b2b2;
width: 35px;
height: 35px;
cursor: pointer;
align-items: center;
justify-content: center;
}
.plus-icon {
border-radius: 50%;
transition: width, color, background-color ease-in-out 0.2s;
border-radius: 50%;
transition: width, color, background-color ease-in-out 0.2s;
}
.plus-icon:hover {
transform: scale(1.1);
color: #efeeee;
background-color: #404040;
transform: scale(1.1);
color: #efeeee;
background-color: #404040;
}
.search-icon {
padding: 3px;
border-radius: 50%;
transition: width, color, background-color ease-in-out 0.2s;
padding: 3px;
border-radius: 50%;
transition: width, color, background-color ease-in-out 0.2s;
}
.search-icon:hover {
transform: scale(1.05);
color: #efeeee;
background-color: #404040;
transform: scale(1.05);
color: #efeeee;
background-color: #404040;
}
.toggle-button:hover {
color: #efeeee;
color: #efeeee;
}
.toggle-button {
display: flex;
align-items: center;
width: 120px;
margin: 0 0 0 16px;
background-color: transparent;
cursor: pointer;
transition: color 0.2s ease;
color: #b2b2b2;
display: flex;
align-items: center;
width: 120px;
margin: 0 0 0 16px;
background-color: transparent;
cursor: pointer;
transition: color 0.2s ease;
color: #b2b2b2;
}
.resizer {
position: absolute;
width: 7px;
background-color: transparent;
height: 92%;
top: 85px;
cursor: ew-resize; /* 水平调整光标 */
&::before {
opacity: 0;
position: absolute;
content: '';
left: 3px;
width: 1px;
height: 100%;
background-color: #9d9d9d;
transition: opacity 0.2s ease-in-out;
}
&:hover::before{
opacity: 1;
}
position: absolute;
width: 7px;
background-color: transparent;
height: 92%;
top: 85px;
cursor: ew-resize; /* 水平调整光标 */
&::before {
opacity: 0;
position: absolute;
content: '';
left: 3px;
width: 1px;
height: 100%;
background-color: #9d9d9d;
transition: opacity 0.2s ease-in-out;
}
&:hover::before {
opacity: 1;
}
}
.musicAlbums {
height: 100%;
padding: 0 10px 0 10px;
overflow: auto;
/*默认情况 滚动条消失*/
height: 100%;
padding: 0 10px 0 10px;
overflow: auto;
/*默认情况 滚动条消失*/
}
/*滑动条*/
.musicAlbums::-webkit-scrollbar {
width: 12px; /* 滚动条宽度 */
width: 12px; /* 滚动条宽度 */
}
.musicAlbums::-webkit-scrollbar:window-inactive {
......@@ -358,59 +345,59 @@ nav {
}
.musicAlbums::-webkit-scrollbar-track {
background: transparent; /* 滚动条背景 */
background: transparent; /* 滚动条背景 */
}
.musicAlbums::-webkit-scrollbar-thumb {
background: #888; /* 滚动条颜色 */
border-radius: 10px; /* 圆角 */
background: #888; /* 滚动条颜色 */
border-radius: 10px; /* 圆角 */
}
.musicAlbums::-webkit-scrollbar-thumb:hover {
background-color: #555; /* 悬停时的颜色 */
background-color: #555; /* 悬停时的颜色 */
}
.musicAlbum-item {
display: flex;
position: relative;
align-items: center;
border-radius: 10px;
padding: 10px 0;
color: #f6f6f6;
display: flex;
position: relative;
align-items: center;
border-radius: 10px;
padding: 10px 0;
color: #f6f6f6;
}
.musicAlbum-description {
text-align: left;
display: flex;
flex-direction: column;
text-align: left;
display: flex;
flex-direction: column;
}
.musicAlbum-image {
width: 55px; /* 调整图片大小 */
height: 55px; /* 调整图片大小 */
margin-right: 10px;
border-radius: 10px;
width: 55px; /* 调整图片大小 */
height: 55px; /* 调整图片大小 */
margin-right: 10px;
border-radius: 10px;
}
.play-button {
position: absolute;
top: 20px;
left: 10px;
color: #f1f1f1; /* 播放键的颜色 */
cursor: pointer; /* 鼠标移动到播放键上时显示为点击手型 */
transition: transform 0.3s ease;
position: absolute;
top: 20px;
left: 10px;
color: #f1f1f1; /* 播放键的颜色 */
cursor: pointer; /* 鼠标移动到播放键上时显示为点击手型 */
transition: transform 0.3s ease;
}
.play-button:hover {
transform: scale(1.1);
transform: scale(1.1);
}
.musicAlbum-description {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 单行显示文本 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 单行显示文本 */
}
......
src/components/MusicAlbumView.vue
+ 517
− 562
View file @ 3a8060cc
This diff is collapsed.
src/components/SearchView.vue
+ 8
− 6
View file @ 3a8060cc
......@@ -21,15 +21,12 @@ const handleTabClick = (tab) => {
class="tab-button"
:class="{ 'active': currentTab === 'songs' }"
@click="handleTabClick('songs')"
>💿歌曲</button>
>歌曲</button>
<button
class="tab-button"
:class="{ 'active': currentTab === 'playlists' }"
@click="handleTabClick('playlists')"
>📕歌单</button>
<button
class="tab-button"
>🙂用户</button>
>歌单</button>
</div>
<div class="search-results">
<ul v-if="currentTab === 'songs'">
......@@ -59,7 +56,8 @@ const handleTabClick = (tab) => {
</li>
</ul>
</div>
<div v-if="songResult.length === 0 && playlistResult.length === 0">
<div v-if="(songResult.length === 0 && currentTab === 'songs')
|| (playlistResult.length === 0 && currentTab === 'playlists')">
<Empty :magic="Math.floor(Math.random() * 8)"/>
</div>
</div>
......@@ -179,4 +177,8 @@ const handleTabClick = (tab) => {
margin: 0;
}
.active {
background-color: #fff;
color: #000;
}
</style>
src/views/HomePage.vue
+ 209
− 140
View file @ 3a8060cc
This diff is collapsed.
src/views/LoginPage.vue
+ 9
− 1
View file @ 3a8060cc
......@@ -42,7 +42,6 @@ function handleRegister() {
password: register_password.value,
}).then(res => {
if (res.data.code === '000' || res.data.code === '200') {
let userForms = document.getElementById('user_options-forms')
userForms.classList.remove('bounceLeft')
userForms.classList.add('bounceRight')
......@@ -91,6 +90,7 @@ onMounted(() => {
<source src="../assets/videos/1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<img class="logo" src="../assets/pictures/logos/logo1.png" alt="">
<section class="user">
<div class="user_options-container">
<div class="user_options-text">
......@@ -180,6 +180,14 @@ body {
background-size: cover;
}
.logo {
position: absolute;
top: -10px;
left: -10px;
width: 150px;
height: 150px;
}
#video-background {
position: absolute;
top: 0;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment