1.修改homepage上的一个bug（setMidComponents方法）

2.episode页面的补充，在MusicAlbumView设置了到专辑页面的跳转

TODO: ，music页面的完成，main-view到以上两个页面的跳转

src/components/ArtistView.vue

@@ -585,7 +585,7 @@ p {
 
 .fixed-play-area {
   top: 0;
-  z-index: 11;
+  z-index: 2;
   opacity: 0;
   transition: opacity 0.2s ease-out;
   border-radius: 12px 12px 0 0;

src/components/EpisodeView.vue

@@ -7,6 +7,8 @@ import {ElMessage, ElPopover} from "element-plus";
 import {backgroundColor, updateBackground} from "../utils/getBackgroundColor";
 import pauseButton from "../icon/pauseButton.vue";
 import {removePlaylist, removeSongFromPlaylist} from "../api/playlist";
+import {formatTime} from "@/utils/formatTime";
+
 
 const emit = defineEmits();
 const props = defineProps({
@@ -21,8 +23,18 @@ const props = defineProps({
 	playFromLeftBar: null,
 	currentSongId: Number
 });
-
-const gradientColor = computed(() => `linear-gradient(to bottom, ${backgroundColor.value} , #1F1F1F 50%)`)
+const relatedEpisode = ref([{
+  id:1,
+  title:"相关歌单1",
+  picPath:"",
+  createTime : ""
+},{
+  id:2,
+  title:"相关歌单2",
+  picPath:"",
+  createTime : ""
+
+}]);
 
 let musicHoveredIndex = ref(null);
 let musicClickedIndex = ref(null);
@@ -30,7 +42,13 @@ let musicPlayIndex = ref(null);
 let musicPauseIndex = ref(null);
 
 const resizeObserver = ref(null)
+const gradientColor = computed(() => `linear-gradient(to bottom, ${backgroundColor.value} , #1F1F1F 50%)`)
 
+//获取歌曲时长
+const songDurations = ref(new Map());
+watch(() => props.musicList, (newSongs) => {
+  loadSongDurations(newSongs, songDurations);
+}, { immediate: true });
 
 // 放缩时的组件处理
 const handleResize = () => {
@@ -140,27 +158,6 @@ const handelScroll = (event) => {
 	}
 }
 
-window.onscroll = () => {
-	const playArea = document.querySelector(".play-area");
-	const fixedPlayArea = document.querySelector(".fixed-play-area");
-	const tipArea = document.querySelector(".tips");
-	const fixedTipArea = document.querySelector(".fixed-tips");
-	const stickyPlayY = playArea.offsetTop;
-	const stickyTipY = tipArea.offsetTop;
-	
-	if (window.scrollY >= stickyPlayY) {
-		fixedPlayArea.style.opacity = "1";
-	} else {
-		fixedPlayArea.style.opacity = "0";
-	}
-	if (window.scrollY + fixedPlayArea.scrollHeight >= stickyTipY) {
-		fixedTipArea.style.display = "flex";
-		fixedTipArea.style.top = fixedPlayArea.scrollHeight + 'px';
-	} else {
-		fixedTipArea.style.display = "none";
-	}
-}
-
 watch(props.playFromLeftBar, () => {
 	playFromId(props.playFromLeftBar)
 })
@@ -178,7 +175,64 @@ const closePopover = (e) => {
 	})
 }
 
+let timer = ref(null)
+const limit = 250;
+function leftSlide(event){
+  // 保存滚动盒子左侧已滚动的距离
+  const target = event.currentTarget.nextElementSibling;
+  let left=target.scrollLeft
+  console.log(target);
+  let num=1
+  clearInterval(timer)
+
+  timer=setInterval(()=>{
+    let distanceNextTime =(limit/2 - Math.abs( limit/2 - num))/3;
+    //   !left:已经滚动到最左侧
+    //   一次性滚动距离（可调节）
+    if(left<=0||num>=limit){
+      // 停止滚动
+      clearInterval(timer)
+      return
+    }
+    left-=distanceNextTime
+    // 给滚动盒子元素赋值向左滚动距离
+    target.scrollLeft=left < 0 ? 0 : left
+    // 保存向左滚动距离（方便判断一次性滚动多少距离）
+    num+=distanceNextTime
+
+  },18)
+  // 20：速度（可调节）
+}
+function rightSlide(event){
+  const target = event.currentTarget.previousElementSibling;
+  // 保存滚动盒子左侧已滚动的距离
+  let left=target.scrollLeft
+  // 保存元素的整体宽度
+  let scrollWidth=target.scrollWidth
+  // 保存元素的可见宽度
+  let clientWidth=target.clientWidth
+  let num=1
+  clearInterval(timer)
+  timer = setInterval(()=>{
+    let distanceNextTime =(limit/2 - Math.abs( limit/2 - num))/3;
+    // 已经滚动距离+可见宽度
+    // left+clientWidth>=scrollWidth：滚动到最右侧
+    // num>=300一次性滚动距离
+    if(left+clientWidth>=scrollWidth||num>=limit){
+      clearInterval(timer.value)
+      return
+    }
+    // 给滚动盒子元素赋值向左滚动距离
+    left+=distanceNextTime
+    target.scrollLeft= left +clientWidth > scrollWidth? scrollWidth - clientWidth : left;
+    // 保存向左滚动距离（方便判断一次性滚动多少距离）
+    num+=distanceNextTime
+  },18)
+  // 20：速度（可调节）
+}
+function  openEpisodeView(id){
 
+}
 //TODO:
 const enterArtistSpace = () => {
 }
@@ -212,7 +266,7 @@ const removeMusicFromAlbum = (albumId, songId) => {
 }
 const enterMusicDescription = (musicId) => {
 }
-const enterAuthorDescription = (authorName) => {
+const enterArtistDescription = (authorName) => {
 }
 
 const pauseMusic = (musicId) => {
@@ -240,7 +294,7 @@ const addRecommendMusic = (musicId) => {
 		<div class="header">
 			<img :src="episodeInfo.picPath" alt="" class="album-image" @load="updateBackground(episodeInfo.picPath)"/>
 			<div class="header-content">
-				<p style="text-align: left;margin:20px 0 0 15px">专辑</p>
+				<p style="text-align: left;margin:20px 0 0 15px">专辑EP</p>
 				<p class="header-album-name" style="font-weight: bolder;font-size:80px;margin:10px 0 35px 10px;">
 					{{ episodeInfo.title }}</p>
 				<div class="header-content-detail">
@@ -347,7 +401,7 @@ const addRecommendMusic = (musicId) => {
 							   :class="[musicPlayIndex === music.id ? 'music-after-click' : '']"
 							>{{ music.title }}</p>
 
-							<p @click="enterAuthorDescription(music.artist)" class="music-author"
+							<p @click="enterArtistDescription(music.artist)" class="music-author"
                  :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
 								{{ music.artist }}</p>
 						</div>
@@ -372,12 +426,10 @@ const addRecommendMusic = (musicId) => {
 								<li @click="addToFavorite(music.id)"></li>
 							</ul>
 						</el-popover>
-						
             <div style="margin-left: auto;margin-right: 15px; color: #b2b2b2"
-						     :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">{{
-								music.upload_time
-							}}
-							<!--TODO: 解决播放时间问题-->
+                 :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}"
+                 v-show="songDurations.get(music.id) !== undefined">
+              {{ formatTime(songDurations.get(music.id)) }}
             </div>
 						<el-popover
 							:ref="getPopoverIndex"
@@ -391,12 +443,32 @@ const addRecommendMusic = (musicId) => {
 								<dots class="music-more-info"/>
 							</template>
 							<ul @click="closePopover">
-								<li @click="removeMusicFromAlbum(music.id)">删除歌曲</li>
+
 							</ul>
 						</el-popover>
 					</div>
 				</div>
 			</div>
+      <div class="related-episodes">
+        <h1>推荐专辑</h1><!--这里暂时写歌单 最好改为专辑-->
+        <div id="click-scroll-X" >
+          <div class="left_btn" @click="leftSlide"> <p style="margin-bottom: 2px"><</p> </div>
+          <div class="scroll_wrapper" >
+            <div class="scroll_list">
+              <div v-for="ep in relatedEpisode"
+                   :key="ep.id"
+                   class="scroll-entry"
+                   @click="openEpisodeView(ep.id)">
+                <img class="big-img" :src="ep.picPath" alt="">
+                <div class="entry-text bolder-white-theme">{{ ep.title }}</div>
+                <div class="entry-text">{{ ep.createTime.substring(0,4) }}</div>
+              </div>
+
+            </div>
+          </div>
+          <div class="right_btn" @click="rightSlide">  <p style="margin-bottom: 2px">></p>  </div>
+        </div>
+      </div>
 		</div>
 	</div>
 </template>
@@ -688,4 +760,93 @@ li:hover {
 	cursor: pointer;
 	text-decoration: underline;
 }
+
+#click-scroll-X {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .left_btn,.right_btn {
+    font-size: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    width: 40px;
+    color: #fff;
+    background-color: #1f1f1f;
+    position: absolute;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.4s ease-in-out;
+    bottom: 140px;
+  }
+  .right_btn{
+    right: -10px;
+  }
+  .left_btn{
+    left: -10px;
+  }
+  .scroll_wrapper {
+
+    width: 100%;
+    overflow-x: scroll;
+    padding: 20px 0;
+
+    .scroll_list {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap:2px;
+    }
+  }
+}
+.scroll-entry {
+  padding:9px;
+  align-items: center;
+  box-shadow: 0 4px 15px rgb(17, 17, 17); /* 悬浮效果的阴影 */
+  width: 180px;
+  height: 210px;
+  display: flex;
+  flex-direction: column;
+  gap:5px;
+  &:hover{
+    cursor: pointer;
+    border-radius: 6px;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  &.large-scroll-entry{
+    height: 230px;
+  }
+}
+
+.big-img {
+  border-radius: 6px;
+  width: 160px;
+  height: 160px;
+}
+.entry-text{
+   width: 160px;
+   margin-left: 4px;
+   text-align: left;
+   color: #a6a6a6;
+   font-size: 14px;
+   white-space: nowrap;
+   overflow: hidden;
+   text-overflow: ellipsis;
+ }
+.bolder-white-theme{
+  font-size: 18px;
+  font-weight: bolder;
+  color: rgb(241, 241, 241);
+}
+h1 {
+  font-size: 24px;
+  margin-bottom: 15px;
+  margin-left: 10px;
+  color: #fff;
+  text-align: left;
+}
+
 </style>

src/components/MainView.vue

@@ -37,6 +37,7 @@ const newSongsRecommend = ref({
   id:6,
   picPath:"https://i.scdn.co/image/ab67616d000048511b822a1e27037ac21e4eaa6d"
 })
+
 /*先固定就这两位*/
 const artistRecommend = ref([{ id:1,picPath:"",name:"Marcus Warner"},{id:1,picPath:"",name: "朴树"}])
 const episodeRecommend = ref([{id:1,picPath:"",title:"热门专辑1"},{id:1,picPath:"",title:"热门专辑2"}])
@@ -54,7 +55,7 @@ const albums = ref([]);
 
 const currentTab = ref('all')
 let timer = ref(null)
-const limit = 230;
+const limit = 250;
 
 function leftSlide(event){
   // 保存滚动盒子左侧已滚动的距离
@@ -90,7 +91,6 @@ function rightSlide(event){
   let scrollWidth=target.scrollWidth
   // 保存元素的可见宽度
   let clientWidth=target.clientWidth
-
   let num=1
   clearInterval(timer)
   timer = setInterval(()=>{
@@ -145,10 +145,15 @@ onMounted(()=>{
   getSongsByPlaylist({
     playlist_id: 3,
   }).then((res) => {
-    songs.value = res.data.result.slice(0, 4);
+    songs.value = res.data.result.slice(0, 6);
+  }).catch(e => {
+    console.log("MainView Failed to get songs!");
   });
   albumIds.forEach((id)=>{
-    getPlaylistById({playlist_id:id}).then((res) => {
+    console.log("MainView");
+    getPlaylistById({playlist_id: id
+
+    }).then((res) => {
       albums.value.push(res.data.result);
 
     }).catch((err)=>{console.log(err)})
@@ -336,6 +341,7 @@ p{
   font-size: 16px;
   white-space: normal;
 }
+
 .main-view {
   border-radius: 12px;
 	padding: 20px;

src/components/MusicAlbumView.vue

@@ -24,7 +24,7 @@ const props = defineProps({
 		type: Object,
 		required: true,
 	},
-	playList: {
+	playList: { //指当前收藏的歌单列表
 		type: Array,
 		required: true,
 	},
@@ -218,9 +218,9 @@ const removeAlbum = (albumId) => {
 const playFromId = (musicId) => {
 	if (musicId === null) {
 		// 从头开始播放
-		musicPlayIndex = props.musicList[0].id;
+		musicPlayIndex.value  = props.musicList[0].id;
 	} else {
-		musicPlayIndex = musicId;
+		musicPlayIndex.value  = musicId;
 	}
 	emit('switchSongs', props.albumInfo, musicPlayIndex);
 	musicPauseIndex = null;
@@ -258,7 +258,7 @@ const removeMusicFromAlbum = (albumId, songId) => {
 }
 const enterMusicDescription = (musicId) => {
 }
-const enterAuthorDescription = (artistName) => {
+const enterArtistDescription = (artistName) => {
 	emit('switchToArtist', artistName);
 }
 
@@ -282,7 +282,6 @@ const confirmEdit = (albumId) => {
 
 	})
 }
-
 const quitEdit = () => {
 	const editDesc = document.querySelector(".edit-desc");
 	editDesc.style.visibility = "hidden";
@@ -299,7 +298,9 @@ const addRecommendMusic = (musicId) => {
 		duration: 4000,
 	})
 }
+const enterMusicEpisode = (episode) => {
 
+}
 watch(() => props.currentSongId, (newId) => {
 	if (newId) {
 		musicPlayIndex = newId;
@@ -343,6 +344,7 @@ const isCurrentSongInList = computed(() => {
 		<div class="content">
 			<div class="play-area">
 				<div class="play-button">
+<!--          musicPlayIndex改为了musicPlayIndex-->
 					<play-button v-if="!isCurrentSongInList||musicPauseIndex!==null"
 					             @click="playFromId(musicPauseIndex)"
 					             style="position: absolute; top:20%;left:24%;color: #000000"/>
@@ -455,8 +457,7 @@ const isCurrentSongInList = computed(() => {
 								<span class="edit-desc-button-1-1">收藏</span>
 							</button>
 						</div>
-						<p class="encore-text encore-text-marginal-bold final-tip" data-encore-id="text">继续下一步，则表示你已同意
-							Spotify 获取你选择上传的图像。请确保你有上传此图像的权利。</p>
+						<p class="encore-text encore-text-marginal-bold final-tip" data-encore-id="text">继续下一步，则表示你已同意获取你选择上传的图像。</p>
 					</div>
 				</div>
 			</div>
@@ -508,13 +509,13 @@ const isCurrentSongInList = computed(() => {
                  :class="[musicPlayIndex === music.id ? 'music-after-click' : '']"
               >{{ music.title }}</p>
 
-              <p @click="enterAuthorDescription(music.artist)" class="music-author"
+              <p @click="enterArtistDescription(music.artist)" class="music-author"
                  :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
                 {{ music.artist }}</p>
             </div>
           </div>
 
-          <div class="music-album-info" :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
+          <div class="music-album-info" @click="enterMusicEpisode()" :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
             {{ music.album }}
           </div>
           <div class="music-right-info">
@@ -639,7 +640,7 @@ const isCurrentSongInList = computed(() => {
 								   :class="[musicPlayIndex === music.id ? 'music-after-click' : '']"
 								>{{ music.title }}</p>
 
-								<p @click="enterAuthorDescription(music.artist)" class="music-author"
+								<p @click="enterArtistDescription(music.artist)" class="music-author"
                    :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
 									{{ music.artist }}</p>
 							</div>
@@ -1323,6 +1324,7 @@ li:hover {
 }
 
 .back-button {
+  z-index: 3;
 	position: relative;
 	margin: 24px 0 0 24px;
 	width: 32px;

src/views/HomePage.vue

@@ -440,34 +440,7 @@ const switchToPlaylist = (playlist, songId) => {
 	});
 }
 
-const switchToEpisode = (episode, songId) => {
-	console.log(episode, songId)
 
-	currentEpisode.value = episode;
-	displayingEpisode.value = episode;
-	currentEpisodeId.value = episode.id;
-	theme.change(currentEpisode.value.picPath);
-
-	getSongsByEpisode({
-		episode_id: currentEpisodeId.value,
-	}).then((res) => {
-		songs.value = res.data.result;
-		displayingSongs.value = res.data.result;
-		currentSongId.value = songId;
-		for (let i = 0; i < songs.value.length; i++) {
-			if (songs.value[i].id === songId) {
-				switchToSong(i, true);
-				parseLrc(songs.value[i].lyricsPath).then(res => {
-					lyrics.value = res;
-				});
-				break;
-			}
-		}
-
-	}).catch(e => {
-		console.log("Error while switching episodes!");
-	});
-}
 /*
     PLAYLISTS
  */
@@ -550,6 +523,8 @@ const midComponents = ref(0);
 const currentArtist = ref(null);
 const backStack = ref([]);
 
+
+
 const setMidComponents = (val, prop = null, isBack = false) => {
   console.log("from" + midComponents.value + " to " + val)
   if (val !== midComponents.value && !isBack) {
@@ -558,7 +533,10 @@ const setMidComponents = (val, prop = null, isBack = false) => {
   
   midComponents.value = val;
 
-  // if(val === 1) {
+  // if(val === 1)
+  // {
+  //   console.log("MainView");
+  //   if(prop != null) {
   //     getPlaylistById({playlist_id: prop}).then((res) => {
   //       displayingPlaylist.value = res.data.result;
   //       getSongsByPlaylist({
@@ -570,6 +548,7 @@ const setMidComponents = (val, prop = null, isBack = false) => {
   //       });
   //     })
   //   }
+  // }
   
   if (val === 5) {
     currentArtist.value = prop;