From 6ea0837cce42280e048638eb47a99e5f42fa1eaf Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Thu, 17 Oct 2019 14:05:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=85=BE=E8=AE=AF=E3=80=81?=
 =?UTF-8?q?=E7=BD=91=E6=98=93=E4=BA=91=E6=AD=8C=E5=8D=95=E9=93=BE=E6=8E=A5?=
 =?UTF-8?q?=E6=89=93=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/components/core/Toolbar.vue      |   3 +
 .../components/material/SearchInput.vue       |  26 +++-
 src/renderer/store/modules/songList.js        |   6 +-
 src/renderer/utils/music/tx/songList.js       |  11 +-
 src/renderer/utils/music/wy/songList.js       |   7 ++
 src/renderer/views/SongList.vue               | 114 +++++++++++++++---
 6 files changed, 139 insertions(+), 28 deletions(-)

diff --git a/src/renderer/components/core/Toolbar.vue b/src/renderer/components/core/Toolbar.vue
index ae95ee16..9d2ed72a 100644
--- a/src/renderer/components/core/Toolbar.vue
+++ b/src/renderer/components/core/Toolbar.vue
@@ -129,6 +129,9 @@ export default {
 }
 .input {
   -webkit-app-region: no-drag;
+  position: absolute;
+  left: 15px;
+  top: 13px;
 }
 
 // img {
diff --git a/src/renderer/components/material/SearchInput.vue b/src/renderer/components/material/SearchInput.vue
index 49946761..f08046b6 100644
--- a/src/renderer/components/material/SearchInput.vue
+++ b/src/renderer/components/material/SearchInput.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-div(:class="[$style.search, focus ? $style.active : '']")
+div(:class="[$style.search, focus ? $style.active : '', big ? $style.big : '', small ? $style.small : '']")
   div(:class="$style.form")
     input(:placeholder="placeholder" v-model.trim="text"
           @focus="handleFocus" @blur="handleBlur" @input="$emit('input', text)"
@@ -36,6 +36,14 @@ export default {
       type: String,
       default: '',
     },
+    big: {
+      type: Boolean,
+      default: false,
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -101,9 +109,6 @@ export default {
 @import '../../assets/styles/layout.less';
 
 .search {
-  position: absolute;
-  left: 15px;
-  top: 13px;
   border-radius: 3px;
   transition: box-shadow .4s ease, background-color @transition-theme;
   display: flex;
@@ -193,6 +198,19 @@ export default {
   }
 }
 
+.big {
+  width: 500px;
+  // input {
+  //   line-height: 30px;
+  // }
+  .form {
+    height: 30px;
+    button {
+      padding: 6px 10px;
+    }
+  }
+}
+
 each(@themes, {
   :global(#container.@{value}) {
 
diff --git a/src/renderer/store/modules/songList.js b/src/renderer/store/modules/songList.js
index af64d54c..f493fb5b 100644
--- a/src/renderer/store/modules/songList.js
+++ b/src/renderer/store/modules/songList.js
@@ -25,6 +25,7 @@ const state = {
     page: 1,
     limit: 30,
     key: null,
+    info: {},
   },
   selectListInfo: {},
   isVisibleListDetail: false,
@@ -84,15 +85,16 @@ const mutations = {
     state.list.page = page
     state.list.key = key
   },
-  setListDetail(state, { result, key, page, desc }) {
+  setListDetail(state, { result, key, page }) {
     state.listDetail.list = result.list
     state.listDetail.total = result.total
     state.listDetail.limit = result.limit
     state.listDetail.page = page
     state.listDetail.key = key
-    state.listDetail.desc = result.desc
+    state.listDetail.info = result.info || {}
   },
   setVisibleListDetail(state, bool) {
+    if (!bool) state.listDetail.list = []
     state.isVisibleListDetail = bool
   },
   setSelectListInfo(state, info) {
diff --git a/src/renderer/utils/music/tx/songList.js b/src/renderer/utils/music/tx/songList.js
index 5ccceda0..6c0b9e64 100644
--- a/src/renderer/utils/music/tx/songList.js
+++ b/src/renderer/utils/music/tx/songList.js
@@ -1,5 +1,6 @@
 import { httpFetch } from '../../request'
 import { formatPlayTime, sizeFormate } from '../../index'
+import jshtmlencode from 'js-htmlencode'
 
 export default {
   _requestObj_tags: null,
@@ -153,7 +154,7 @@ export default {
         // time: basic.publish_time,
         img: basic.cover.medium_url || basic.cover.default_url,
         // grade: basic.favorcnt / 10,
-        desc: basic.desc.replace(/<br>/g, '\n'),
+        desc: jshtmlencode.htmlDecode(basic.desc).replace(/<br>/g, '\n'),
         source: 'tx',
       })),
       total: content.total_cnt,
@@ -182,8 +183,14 @@ export default {
         page: 1,
         limit: cdlist.songlist.length + 1,
         total: cdlist.songlist.length,
-        desc: cdlist.desc.replace(/<br>/g, '\n'),
         source: 'tx',
+        info: {
+          name: cdlist.dissname,
+          img: cdlist.logo,
+          desc: jshtmlencode.htmlDecode(cdlist.desc).replace(/<br>/g, '\n'),
+          author: cdlist.nickname,
+          play_count: this.formatPlayCount(cdlist.visitnum),
+        },
       }
     })
   },
diff --git a/src/renderer/utils/music/wy/songList.js b/src/renderer/utils/music/wy/songList.js
index 8e45c721..5ab652d0 100644
--- a/src/renderer/utils/music/wy/songList.js
+++ b/src/renderer/utils/music/wy/songList.js
@@ -65,6 +65,13 @@ export default {
         limit: this.limit_song,
         total: body.playlist.tracks.length,
         source: 'wy',
+        info: {
+          play_count: this.formatPlayCount(body.playlist.playCount),
+          name: body.playlist.name,
+          img: body.playlist.coverImgUrl,
+          desc: body.playlist.description,
+          author: body.playlist.creator.nickname,
+        },
       }
     })
   },
diff --git a/src/renderer/views/SongList.vue b/src/renderer/views/SongList.vue
index f5079f24..d9805012 100644
--- a/src/renderer/views/SongList.vue
+++ b/src/renderer/views/SongList.vue
@@ -1,34 +1,41 @@
 <template lang="pug">
   div(:class="$style.container")
     transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-      div(:class="$style.songListDetailContent" v-show="isVisibleListDetail")
+      div(:class="$style.songListDetailContent" v-if="isVisibleListDetail")
         div(:class="$style.songListHeader")
           div(:class="$style.songListHeaderLeft")
-            img(:src="selectListInfo.img")
-            span(:class="$style.playNum" v-if="selectListInfo.play_count") {{selectListInfo.play_count}}
+            img(:src="listDetail.info.img || selectListInfo.img")
+            span(:class="$style.playNum" v-if="listDetail.info.play_count || selectListInfo.play_count") {{listDetail.info.play_count || selectListInfo.play_count}}
           div(:class="$style.songListHeaderMiddle")
-            h3(:title="selectListInfo.name") {{selectListInfo.name}}
-            p(:title="selectListInfo.desc") {{listDetail.desc || selectListInfo.desc}}
+            h3(:title="listDetail.info.name || selectListInfo.name") {{listDetail.info.name || selectListInfo.name}}
+            p(:title="listDetail.info.desc || selectListInfo.desc") {{listDetail.info.desc || selectListInfo.desc}}
           div(:class="$style.songListHeaderRight")
             material-btn(:class="$style.closeDetailButton" @click="hideListDetail") 返回
         material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="listDetail.page" :limit="listDetail.limit" :total="listDetail.total" :list="listDetail.list")
     transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-      div(:class="$style.songListContent" v-show="!isVisibleListDetail")
+      div(:class="$style.songListContainer" v-if="!isVisibleListDetail")
         div(:class="$style.header")
           material-tag-list(:class="$style.tagList" :list="tagList" v-model="tagInfo")
           material-tab(:class="$style.tab" :list="sorts" item-key="id" item-name="name" v-model="sortId")
           material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
-        div.scroll(:class="$style.songList" ref="dom_scrollContent")
-          ul
-            li(:class="$style.item" v-for="(item, index) in listData.list" @click="handleItemClick(index)")
-              div(:class="$style.left")
-                img(:src="item.img")
-              div(:class="$style.right" :src="item.img")
-                h4(:title="item.name") {{item.name}}
-                p(:title="item.desc") {{item.desc}}
-            li(:class="$style.item" style="cursor: default;" v-if="listData.list && listData.list.length && listData.list.length % 3 == 2")
-          div(:class="$style.pagination")
-            material-pagination(:count="listData.total" :limit="listData.limit" :page="listData.page" @btn-click="handleToggleListPage")
+        div(:class="$style.songListContent")
+          transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
+            div.scroll(:class="$style.songList" v-if="sortId !== 'importSongList'" ref="dom_scrollContent")
+              ul
+                li(:class="$style.item" v-for="(item, index) in listData.list" @click="handleItemClick(index)")
+                  div(:class="$style.left")
+                    img(:src="item.img")
+                  div(:class="$style.right" :src="item.img")
+                    h4(:title="item.name") {{item.name}}
+                    p(:title="item.desc") {{item.desc}}
+                li(:class="$style.item" style="cursor: default;" v-if="listData.list && listData.list.length && listData.list.length % 3 == 2")
+              div(:class="$style.pagination")
+                material-pagination(:count="listData.total" :limit="listData.limit" :page="listData.page" @btn-click="handleToggleListPage")
+          transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
+            div(:class="$style.importSongListContent" v-show="sortId === 'importSongList'")
+              material-search-input(v-model="importSongListText" @event="handleImportSongListEvent" big placeholder="输入歌单链接或歌单ID")
+                svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
+                  use(xlink:href='#icon-right')
     material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
     material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
     material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
@@ -56,6 +63,7 @@ export default {
       isToggleSource: false,
       isShowListAdd: false,
       isShowListAddMultiple: false,
+      importSongListText: '',
     }
   },
   computed: {
@@ -63,7 +71,17 @@ export default {
     ...mapGetters('songList', ['sourceInfo', 'tags', 'listData', 'isVisibleListDetail', 'selectListInfo', 'listDetail']),
     ...mapGetters('list', ['defaultList']),
     sorts() {
-      return this.source ? this.sourceInfo.sortList[this.source] : []
+      let list
+      list = this.source ? [...this.sourceInfo.sortList[this.source]] : []
+      switch (this.source) {
+        case 'wy':
+        case 'tx':
+          list.push({
+            name: `打开${this.sourceInfo.sources.find(s => s.id == this.source).name}歌单`,
+            id: 'importSongList',
+          })
+      }
+      return list
     },
     isAPITemp() {
       return this.setting.apiSource == 'temp'
@@ -76,6 +94,7 @@ export default {
     sortId(n, o) {
       this.setSongList({ sortId: n })
       if (o === undefined && this.listData.page !== 1) return
+      if (n == 'importSongList') return
       this.$nextTick(() => {
         this.getList(1).then(() => {
           this.$nextTick(() => {
@@ -88,6 +107,7 @@ export default {
     tagInfo(n, o) {
       this.setSongList({ tagInfo: n })
       if (!o && this.listData.page !== 1) return
+      if (this.sortId == 'importSongList') this.sortId = this.sorts[0] && this.sorts[0].id
       if (this.isToggleSource) {
         this.isToggleSource = false
         return
@@ -104,6 +124,7 @@ export default {
     source(n, o) {
       this.setSongList({ source: n })
       if (!this.tags[n]) this.getTags()
+      this.importSongListText = ''
       if (o) {
         this.isToggleSource = true
         this.tagInfo = {
@@ -253,6 +274,49 @@ export default {
       if (isSelect) this.resetSelect()
       this.isShowListAddMultiple = false
     },
+    handleImportSongListEvent({ action }) {
+      switch (action) {
+        case 'submit':
+          this.handleGetSongListDetail()
+          break
+        case 'blur':
+          this.handleParseImportSongListInputText()
+          break
+      }
+    },
+    handleGetSongListDetail() {
+      this.handleParseImportSongListInputText()
+      this.setSelectListInfo({
+        play_count: null,
+        id: this.importSongListText,
+        author: '',
+        name: '',
+        img: null,
+        desc: '',
+        source: this.source,
+      })
+      this.clearListDetail()
+      this.$nextTick(() => {
+        this.setVisibleListDetail(true)
+        this.getListDetail({ id: this.importSongListText, page: 1 })
+      })
+    },
+    handleParseImportSongListInputText() {
+      if (!/[?&:/]/.test(this.importSongListText)) return
+      let id
+      switch (this.source) {
+        case 'wy':
+          id = this.importSongListText.replace(/^.+(?:\?|&)id=(\d+)(?:&.*$|#.*$|$)/, '$1')
+          break
+        case 'tx':
+          // https://y.qq.com/n/yqq/playsquare/4385581243.html#stat=y_new.index.playlist.pic
+          id = this.importSongListText.replace(/^.+\/(\d+)\.html(?:&.*$|#.*$|$)/, '$1')
+          break
+        default:
+          return
+      }
+      this.importSongListText = id
+    },
   },
 }
 </script>
@@ -281,18 +345,28 @@ export default {
   width: 80px;
 }
 
-.songListContent, .song-list-detail-content {
+.songListContainer, .song-list-detail-content, .songListContent, .importSongListContent {
   // flex: auto;
   overflow: hidden;
 }
 
-.songListContent {
+.songListContainer, .songListContent, .importSongListContent {
+  position: relative;
   display: flex;
   flex-flow: column nowrap;
   height: 100%;
   // position: relative;
 }
 
+.importSongListContent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  align-items: center;
+  padding-top: 20%;
+}
+
 .song-list-header {
   display: flex;
   flex-flow: row nowrap;