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); + } + } + } +}