diff --git a/src/views/playlist.vue b/src/views/playlist.vue
index 6377cb6..a0aedc4 100644
--- a/src/views/playlist.vue
+++ b/src/views/playlist.vue
@@ -79,8 +79,22 @@
+
{{
playlist.subscribed ? "从音乐库删除" : "保存到音乐库"
}}
+
歌单内搜索
+ track.name
+ .toLowerCase()
+ .includes(this.searchKeyWords.toLowerCase()) ||
+ track.al.name
+ .toLowerCase()
+ .includes(this.searchKeyWords.toLowerCase()) ||
+ track.ar.find((artist) =>
+ artist.name
+ .toLowerCase()
+ .includes(this.searchKeyWords.toLowerCase())
+ )
+ );
+ },
},
methods: {
...mapMutations(["appendTrackToPlayerList"]),
@@ -384,11 +420,11 @@ export default {
}
});
},
- loadMore() {
+ loadMore(loadNum = 50) {
let trackIDs = this.playlist.trackIds.filter((t, index) => {
if (
index > this.lastLoadedTrackIndex &&
- index <= this.lastLoadedTrackIndex + 50
+ index <= this.lastLoadedTrackIndex + loadNum
)
return t;
});
@@ -438,6 +474,15 @@ export default {
editPlaylist() {
alert("此功能开发中");
},
+ searchInPlaylist() {
+ this.displaySearchInPlaylist = !this.displaySearchInPlaylist;
+ if (this.displaySearchInPlaylist == false) {
+ this.searchKeyWords = "";
+ this.inputSearchKeyWords = "";
+ } else {
+ this.loadMore(500);
+ }
+ },
removeTrack(trackID) {
if (!isAccountLoggedIn()) {
this.showToast("此操作需要登录网易云账号");
@@ -445,6 +490,19 @@ export default {
}
this.tracks = this.tracks.filter((t) => t.id !== trackID);
},
+ inputDebounce() {
+ if (this.debounceTimeout) clearTimeout(this.debounceTimeout);
+ this.debounceTimeout = setTimeout(() => {
+ this.searchKeyWords = this.inputSearchKeyWords;
+ }, 600);
+ },
+ },
+ directives: {
+ focus: {
+ inserted: function (el) {
+ el.focus();
+ },
+ },
},
};
@@ -453,6 +511,7 @@ export default {
.playlist-info {
display: flex;
margin-bottom: 72px;
+ position: relative;
.info {
display: flex;
flex-direction: column;
@@ -711,4 +770,63 @@ export default {
}
}
}
+
+.search-box {
+ display: flex;
+ position: absolute;
+ right: 20px;
+ bottom: -55px;
+ justify-content: flex-end;
+ -webkit-app-region: no-drag;
+
+ .container {
+ display: flex;
+ align-items: center;
+ height: 32px;
+ background: var(--color-secondary-bg-for-transparent);
+ border-radius: 8px;
+ width: 200px;
+ }
+
+ .svg-icon {
+ height: 15px;
+ width: 15px;
+ color: var(--color-text);
+ opacity: 0.28;
+ margin: {
+ left: 8px;
+ right: 4px;
+ }
+ }
+
+ input {
+ font-size: 16px;
+ border: none;
+ background: transparent;
+ width: 96%;
+ font-weight: 600;
+ margin-top: -1px;
+ color: var(--color-text);
+ }
+
+ .active {
+ background: var(--color-primary-bg-for-transparent);
+ input,
+ .svg-icon {
+ opacity: 1;
+ color: var(--color-primary);
+ }
+ }
+}
+
+[data-theme="dark"] {
+ .search-box {
+ .active {
+ input,
+ .svg-icon {
+ color: var(--color-text);
+ }
+ }
+ }
+}