新增自定义列表

2020-05-16 19:21:21 +08:00
parent eed8b36dc1
commit afc3f48f51
39 changed files with 1486 additions and 309 deletions
@@ -154,6 +154,8 @@ export default {
      if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
    },
    handle_key_mod_a_down({ event }) {
+      if (event.target.tagName == 'INPUT') return
+      event.preventDefault()
      if (event.repeat) return
      this.keyEvent.isModDown = false
      this.handleSelectAllData()
@@ -236,7 +238,7 @@ export default {
    async handlePlay(index) {
      const targetSong = this.list[index]
      if (!await checkPath(path.join(this.setting.download.savePath, targetSong.fileName))) return
-      this.setList({ list: this.list, listId: 'download', index: this.list.findIndex(i => i.key === targetSong.key) })
+      this.setList({ list: { list: this.list, id: 'download' }, index: this.list.findIndex(i => i.key === targetSong.key) })
    },
    handleListBtnClick(info) {
      let item = this.showList[info.index]
@@ -364,7 +366,7 @@ export default {
  }
  tr {
    &.active {
-      color: @color-theme;
+      color: @color-btn;
    }
  }
 }
@@ -374,7 +376,7 @@ each(@themes, {
    .tbody {
      tr {
        &.active {
-          color: ~'@{color-@{value}-theme}';
+          color: ~'@{color-@{value}-btn}';
        }
      }
      td {
@@ -96,8 +96,7 @@ export default {
      )
      if (targetIndex > -1) {
        this.setList({
-          list: this.defaultList.list,
-          listId: this.defaultList.id,
+          list: this.defaultList,
          index: targetIndex,
        })
      }
@@ -1,7 +1,24 @@
 <template lang="pug">
-  div(:class="$style.list")
-    //- transition
-    div(v-if="delayShow && list.length" :class="$style.content")
+  div(:class="$style.container" @click="handleContainerClick($event)")
+    div(:class="$style.lists" ref="dom_lists")
+      div(:class="$style.listHeader")
+        h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
+        button(:class="$style.listsAdd" @click="handleShowNewList" :title="$t('view.list.lists_new_list_btn')")
+          svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='70%' viewBox='0 0 24 24' space='preserve')
+            use(xlink:href='#icon-list-add')
+      ul.scroll(:class="$style.listsContent" ref="dom_lists_list")
+        li(:class="[$style.listsItem, defaultList.id == listId ? $style.active : null]" :title="defaultList.name" @click="handleListToggle(defaultList.id)")
+          span(:class="$style.listsLabel") {{defaultList.name}}
+        li(:class="[$style.listsItem, loveList.id == listId ? $style.active : null]" :title="loveList.name" @click="handleListToggle(loveList.id)")
+          span(:class="$style.listsLabel") {{loveList.name}}
+        li.user-list(:class="[$style.listsItem, item.id == listId ? $style.active : null, listsData.rightClickItemIndex == index ? $style.clicked : null]" @contextmenu="handleListsItemRigthClick($event, index)" :title="item.name" v-for="(item, index) in userList" :key="item.id")
+          span(:class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)") {{item.name}}
+          input.key-bind(:class="$style.listsInput" type="text" @keyup.enter="handleListsSave(index, $event)" @blur="handleListsSave(index, $event)" :value="item.name" :placeholder="item.name")
+        transition(enter-active-class="animated-fast slideInLeft" leave-active-class="animated-fast fadeOut" @after-leave="handleListsNewAfterLeave")
+          li(:class="[$style.listsItem, $style.listsNew, listsData.isNewLeave ? $style.newLeave : null]" v-if="listsData.isShowNewList")
+            input.key-bind(:class="$style.listsInput" ref="dom_listsNewInput" type="text" @keyup.enter="handleListsCreate($event)" @blur="handleListsCreate($event)" :placeholder="$t('view.list.lists_new_list_input')")
+    div(:class="$style.list")
+      //- transition
      div(:class="$style.thead")
        table
          thead
@@ -10,41 +27,43 @@
              th.nobreak(style="width: 25%;") {{$t('view.list.name')}}
              th.nobreak(style="width: 20%;") {{$t('view.list.singer')}}
              th.nobreak(style="width: 20%;") {{$t('view.list.album')}}
-              th.nobreak(style="width: 10%;") {{$t('view.list.time')}}
-              th.nobreak(style="width: 20%;") {{$t('view.list.action')}}
-      div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
-        table
-          tbody(@contextmenu="handleContextMenu" ref="dom_tbody")
-            tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"
-              @click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]")
-              td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
-              td.break(style="width: 25%;")
-                span.select {{item.name}}
-                span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
-                //- span.badge.badge-light(v-if="item._types['128k']") 128K
-                //- span.badge.badge-light(v-if="item._types['192k']") 192K
-                //- span.badge.badge-secondary(v-if="item._types['320k']") 320K
-                //- span.badge.badge-theme-info(v-if="item._types.ape") APE
-                //- span.badge.badge-theme-success(v-if="item._types.flac") FLAC
-              td.break(style="width: 20%;")
-                span.select {{item.singer}}
-              td.break(style="width: 20%;")
-                span.select {{item.albumName}}
-              td(style="width: 10%;")
-                span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
-              td(style="width: 20%; padding-left: 0; padding-right: 0;")
-                material-list-buttons(:index="index" @btn-click="handleListBtnClick")
-                //- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
-                //- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
-                //- button.btn-secondary(type='button' @click.stop='handleRemove(index)') 删除
-                //- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
-    div(:class="$style.noItem" v-else)
-      p(v-text="list.length ? $t('view.list.loding_list') : $t('view.list.no_item')")
+              th.nobreak(style="width: 9%;") {{$t('view.list.time')}}
+              th.nobreak(style="width: 21%;") {{$t('view.list.action')}}
+      div(v-if="delayShow && list.length" :class="$style.content")
+        div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
+          table
+            tbody(@contextmenu="handleContextMenu" ref="dom_tbody")
+              tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"
+                @click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]")
+                td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
+                td.break(style="width: 25%;")
+                  span.select {{item.name}}
+                  span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
+                  //- span.badge.badge-light(v-if="item._types['128k']") 128K
+                  //- span.badge.badge-light(v-if="item._types['192k']") 192K
+                  //- span.badge.badge-secondary(v-if="item._types['320k']") 320K
+                  //- span.badge.badge-theme-info(v-if="item._types.ape") APE
+                  //- span.badge.badge-theme-success(v-if="item._types.flac") FLAC
+                td.break(style="width: 20%;")
+                  span.select {{item.singer}}
+                td.break(style="width: 20%;")
+                  span.select {{item.albumName}}
+                td(style="width: 9%;")
+                  span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
+                td(style="width: 21%; padding-left: 0; padding-right: 0;")
+                  material-list-buttons(:index="index" @btn-click="handleListBtnClick")
+                  //- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
+                  //- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
+                  //- button.btn-secondary(type='button' @click.stop='handleRemove(index)') 删除
+                  //- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
+      div(:class="$style.noItem" v-else)
+        p(v-text="list.length ? $t('view.list.loding_list') : $t('view.list.no_item')")
    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-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdListDetailData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
    material-flow-btn(:show="isShowEditBtn" :play-btn="false" @btn-click="handleFlowBtnClick")
    material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" :exclude-list-id="excludeListId" @close="isShowListAdd = false")
-    material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
+    material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdListDetailData" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
+    material-menu(:menus="listsItemMenu" :location="listsData.menuLocation" item-name="name" :isShow="listsData.isShowItemMenu" @menu-click="handleListsItemMenuClick")
 </template>

 <script>
@@ -59,7 +78,8 @@ export default {
      clickIndex: -1,
      isShowDownload: false,
      musicInfo: null,
-      selectdData: [],
+      selectdListDetailData: [],
+      selectdListData: [],
      isShowEditBtn: false,
      isShowDownloadMultiple: false,
      delayShow: false,
@@ -68,15 +88,32 @@ export default {
      isShowListAddMultiple: false,
      delayTimeout: null,
      isToggleList: true,
+      focusTarget: 'listDetail',
      keyEvent: {
        isShiftDown: false,
        isModDown: false,
      },
+      listsData: {
+        isShowItemMenu: false,
+        itemMenuControl: {
+          rename: true,
+          moveup: true,
+          movedown: true,
+          remove: true,
+        },
+        rightClickItemIndex: -1,
+        menuLocation: {
+          x: 0,
+          y: 0,
+        },
+        isShowNewList: false,
+        isNewLeave: false,
+      },
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'setting']),
-    ...mapGetters('list', ['defaultList', 'loveList', 'userList']),
+    ...mapGetters('list', ['isInitedList', 'defaultList', 'loveList', 'userList']),
    ...mapGetters('player', {
      playerListId: 'listId',
      playIndex: 'playIndex',
@@ -101,17 +138,46 @@ export default {
          targetList = this.userList.find(l => l.id === this.listId)
          break
      }
-      return targetList
+      if (targetList) return targetList
+      this.handleListToggle(this.defaultList.id)
+      return this.defaultList
    },
    excludeListId() {
      return [this.listId]
    },
+    lists() {
+      return [this.defaultList, this.loveList, ...this.userList]
+    },
    isShowSource() {
      return this.setting.list.isShowSource
    },
+    listsItemMenu() {
+      return [
+        {
+          name: this.$t('view.list.lists_rename'),
+          action: 'rename',
+          disabled: !this.listsData.itemMenuControl.rename,
+        },
+        {
+          name: this.$t('view.list.lists_moveup'),
+          action: 'moveup',
+          disabled: !this.listsData.itemMenuControl.moveup,
+        },
+        {
+          name: this.$t('view.list.lists_movedown'),
+          action: 'movedown',
+          disabled: !this.listsData.itemMenuControl.movedown,
+        },
+        {
+          name: this.$t('view.list.lists_remove'),
+          action: 'remove',
+          disabled: !this.listsData.itemMenuControl.remove,
+        },
+      ]
+    },
  },
  watch: {
-    selectdData(n) {
+    selectdListDetailData(n) {
      const len = n.length
      if (len) {
        this.isShowEditBtn = true
@@ -119,8 +185,9 @@ export default {
        this.isShowEditBtn = false
      }
    },
-    list() {
-      this.removeAllSelect()
+    'listData.list'(n, o) {
+      if (n === o && n.length === o.length) return
+      this.removeAllSelectListDetail()
    },
    '$route.query.scrollIndex'(n) {
      if (n == null || this.isToggleList) return
@@ -129,6 +196,7 @@ export default {
    },
  },
  beforeRouteUpdate(to, from, next) {
+    this.setPrevSelectListId(to.query.id)
    if (to.query.id == null) return
    else if (to.query.id == this.listId) {
      if (to.query.scrollIndex != null) this.isToggleList = false
@@ -163,7 +231,8 @@ export default {
    next()
  },
  created() {
-    this.listId = this.$route.query.id
+    this.listId = this.$route.query.id || this.defaultList.id
+    this.setPrevSelectListId(this.listId)
    this.handleScroll = throttle(e => {
      if (this.routeLeaveLocation) {
        this.setListScroll({ id: this.listId, location: this.routeLeaveLocation })
@@ -175,13 +244,14 @@ export default {
  },
  mounted() {
    this.handleDelayShow()
+    this.setListsScroll()
  },
  beforeDestroy() {
    this.unlistenEvent()
  },
  methods: {
-    ...mapMutations(['setListScroll']),
-    ...mapMutations('list', ['listRemove', 'listRemoveMultiple']),
+    ...mapMutations(['setPrevSelectListId']),
+    ...mapMutations('list', ['listRemove', 'listRemoveMultiple', 'setUserListName', 'createUserList', 'moveupUserList', 'movedownUserList', 'removeUserList', 'setListScroll']),
    ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
    ...mapMutations('player', {
      setPlayList: 'setList',
@@ -213,6 +283,8 @@ export default {
      if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
    },
    handle_key_mod_a_down({ event }) {
+      if (event.target.tagName == 'INPUT') return
+      event.preventDefault()
      if (event.repeat) return
      this.keyEvent.isModDown = false
      this.handleSelectAllData()
@@ -239,8 +311,8 @@ export default {
    restoreScroll(isAnimation) {
      if (!this.list.length) return
      if (this.$route.query.scrollIndex == null) {
-        let location = this.setting.list.scroll.locations[this.listId]
-        if (this.setting.list.scroll.enable && location) {
+        let location = this.listData.location || 0
+        if (this.setting.list.isSaveScrollLocation && location) {
          this.$nextTick(() => {
            this.$refs.dom_scrollContent.scrollTo(0, location)
          })
@@ -263,7 +335,7 @@ export default {
    handleDoubleClick(event, index) {
      if (event.target.classList.contains('select')) return

-      this.handleSelectData(event, index)
+      this.handleSelectListDetailData(event, index)

      if (
        window.performance.now() - this.clickTime > 400 ||
@@ -277,12 +349,14 @@ export default {
      this.clickTime = 0
      this.clickIndex = -1
    },
-    handleSelectData(event, clickIndex) {
+    handleSelectListDetailData(event, clickIndex) {
+      if (this.focusTarget != 'listDetail' && this.selectdListDetailData.length) this.removeAllSelectListDetail()
+
      if (this.keyEvent.isShiftDown) {
-        if (this.selectdData.length) {
-          let lastSelectIndex = this.list.indexOf(this.selectdData[this.selectdData.length - 1])
-          if (lastSelectIndex == clickIndex) return this.removeAllSelect()
-          this.removeAllSelect()
+        if (this.selectdListDetailData.length) {
+          let lastSelectIndex = this.list.indexOf(this.selectdListDetailData[this.selectdListDetailData.length - 1])
+          if (lastSelectIndex == clickIndex) return this.removeAllSelectListDetail()
+          this.removeAllSelectListDetail()
          let isNeedReverse = false
          if (clickIndex < lastSelectIndex) {
            let temp = lastSelectIndex
@@ -290,8 +364,8 @@ export default {
            clickIndex = temp
            isNeedReverse = true
          }
-          this.selectdData = this.list.slice(lastSelectIndex, clickIndex + 1)
-          if (isNeedReverse) this.selectdData.reverse()
+          this.selectdListDetailData = this.list.slice(lastSelectIndex, clickIndex + 1)
+          if (isNeedReverse) this.selectdListDetailData.reverse()
          let nodes = this.$refs.dom_tbody.childNodes
          do {
            nodes[lastSelectIndex].classList.add('active')
@@ -299,22 +373,60 @@ export default {
          } while (lastSelectIndex <= clickIndex)
        } else {
          event.currentTarget.classList.add('active')
-          this.selectdData.push(this.list[clickIndex])
+          this.selectdListDetailData.push(this.list[clickIndex])
        }
      } else if (this.keyEvent.isModDown) {
        let item = this.list[clickIndex]
-        let index = this.selectdData.indexOf(item)
+        let index = this.selectdListDetailData.indexOf(item)
        if (index < 0) {
-          this.selectdData.push(item)
+          this.selectdListDetailData.push(item)
          event.currentTarget.classList.add('active')
        } else {
-          this.selectdData.splice(index, 1)
+          this.selectdListDetailData.splice(index, 1)
          event.currentTarget.classList.remove('active')
        }
-      } else if (this.selectdData.length) this.removeAllSelect()
+      } else if (this.selectdListDetailData.length) this.removeAllSelectListDetail()
    },
-    removeAllSelect() {
-      this.selectdData = []
+    handleSelectListData(event, clickIndex) {
+      if (this.focusTarget != 'list' && this.selectdListData.length) this.removeAllSelectList()
+
+      if (this.keyEvent.isShiftDown) {
+        if (this.selectdListData.length) {
+          let lastSelectIndex = this.list.indexOf(this.selectdListData[this.selectdListData.length - 1])
+          if (lastSelectIndex == clickIndex) return this.removeAllSelectList()
+          this.removeAllSelectList()
+          let isNeedReverse = false
+          if (clickIndex < lastSelectIndex) {
+            let temp = lastSelectIndex
+            lastSelectIndex = clickIndex
+            clickIndex = temp
+            isNeedReverse = true
+          }
+          this.selectdListData = this.list.slice(lastSelectIndex, clickIndex + 1)
+          if (isNeedReverse) this.selectdListData.reverse()
+          let nodes = this.$refs.dom_tbody.childNodes
+          do {
+            nodes[lastSelectIndex].classList.add('active')
+            lastSelectIndex++
+          } while (lastSelectIndex <= clickIndex)
+        } else {
+          event.currentTarget.classList.add('active')
+          this.selectdListData.push(this.list[clickIndex])
+        }
+      } else if (this.keyEvent.isModDown) {
+        let item = this.list[clickIndex]
+        let index = this.selectdListData.indexOf(item)
+        if (index < 0) {
+          this.selectdListData.push(item)
+          event.currentTarget.classList.add('active')
+        } else {
+          this.selectdListData.splice(index, 1)
+          event.currentTarget.classList.remove('active')
+        }
+      } else if (this.selectdListData.length) this.removeAllSelectList()
+    },
+    removeAllSelectListDetail() {
+      this.selectdListDetailData = []
      let dom_tbody = this.$refs.dom_tbody
      if (!dom_tbody) return
      let nodes = dom_tbody.querySelectorAll('.active')
@@ -322,9 +434,18 @@ export default {
        if (node.parentNode == dom_tbody) node.classList.remove('active')
      }
    },
+    removeAllSelectList() {
+      this.selectdListData = []
+      let dom_list = this.$refs.dom_lists_list
+      if (!dom_list) return
+      let nodes = dom_list.querySelectorAll('.selected')
+      for (const node of nodes) {
+        if (node.parentNode == dom_list) node.classList.remove('selected')
+      }
+    },
    testPlay(index) {
      if (!this.assertApiSupport(this.list[index].source)) return
-      this.setPlayList({ list: this.list, listId: this.listId, index })
+      this.setPlayList({ list: this.listData, index })
    },
    handleRemove(index) {
      this.listRemove({ id: this.listId, index })
@@ -359,18 +480,18 @@ export default {
      this.isShowDownload = false
    },
    handleSelectAllData() {
-      this.removeAllSelect()
-      this.selectdData = [...this.list]
+      this.removeAllSelectListDetail()
+      this.selectdListDetailData = [...this.list]
      let nodes = this.$refs.dom_tbody.childNodes
      for (const node of nodes) {
        node.classList.add('active')
      }
-      // asyncSetArray(this.selectdData, isSelect ? [...this.list] : [])
+      // asyncSetArray(this.selectdListDetailData, isSelect ? [...this.list] : [])
    },
    handleAddDownloadMultiple(type) {
-      const list = this.selectdData.filter(s => this.assertApiSupport(s.source))
+      const list = this.selectdListDetailData.filter(s => this.assertApiSupport(s.source))
      this.createDownloadMultiple({ list, type })
-      this.removeAllSelect()
+      this.removeAllSelectListDetail()
      this.isShowDownloadMultiple = false
    },
    handleFlowBtnClick(action) {
@@ -379,8 +500,8 @@ export default {
          this.isShowDownloadMultiple = true
          break
        case 'remove':
-          this.listRemoveMultiple({ id: this.listId, list: this.selectdData })
-          this.removeAllSelect()
+          this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
+          this.removeAllSelectListDetail()
          break
        case 'add':
          this.isShowListAddMultiple = true
@@ -388,7 +509,7 @@ export default {
      }
    },
    handleListAddModalClose(isClearSelect) {
-      if (isClearSelect) this.removeAllSelect()
+      if (isClearSelect) this.removeAllSelectListDetail()
      this.isShowListAddMultiple = false
    },
    getMusicLocation(index) {
@@ -413,6 +534,91 @@ export default {
    assertApiSupport(source) {
      return assertApiSupport(source)
    },
+    handleContainerClick(event) {
+      let isFocusList = event.target == this.$refs.dom_lists || this.$refs.dom_lists.contains(event.target)
+      this.focusTarget = isFocusList ? 'list' : 'listDetail'
+    },
+    handleListsSave(index, event) {
+      let dom_target = this.$refs.dom_lists_list.querySelector('.' + this.$style.editing)
+      if (dom_target) dom_target.classList.remove(this.$style.editing)
+      let name = event.target.value.trim()
+      if (name.length) return this.setUserListName({ index, name })
+      event.target.value = this.userList[index].name
+    },
+    handleListsCreate(event) {
+      if (event.target.readonly) return
+      let name = event.target.value.trim()
+      event.target.readonly = true
+
+      if (name == '') {
+        this.listsData.isShowNewList = false
+        return
+      }
+
+      this.listsData.isNewLeave = true
+      this.$nextTick(() => {
+        this.listsData.isShowNewList = false
+      })
+
+      this.createUserList(name)
+    },
+    handleShowNewList() {
+      this.listsData.isShowNewList = true
+      this.$nextTick(() => {
+        this.$refs.dom_listsNewInput.focus()
+      })
+    },
+    handleListsNewAfterLeave() {
+      this.listsData.isNewLeave = false
+    },
+    setListsScroll() {
+      let target = this.$refs.dom_lists_list.querySelector('.' + this.$style.active)
+      if (!target) return
+      let offsetTop = target.offsetTop
+      let location = offsetTop - 150
+      if (location > 0) this.$refs.dom_lists_list.scrollTop = location
+    },
+    handleListToggle(id) {
+      if (id == this.listId) return
+      this.$router.push({
+        path: 'list',
+        query: { id },
+      }).catch(_ => _)
+    },
+    handleListsItemRigthClick(event, index) {
+      this.listsData.itemMenuControl.moveup = index > 0
+      this.listsData.itemMenuControl.movedown = index < this.userList.length - 1
+      this.listsData.rightClickItemIndex = index
+      this.listsData.menuLocation.x = event.currentTarget.offsetLeft + event.offsetX
+      this.listsData.menuLocation.y = event.currentTarget.offsetTop + event.offsetY - this.$refs.dom_lists_list.scrollTop
+      this.$nextTick(() => {
+        this.listsData.isShowItemMenu = true
+      })
+    },
+    handleListsItemMenuClick(action) {
+      // console.log(action)
+      this.listsData.isShowItemMenu = false
+      let dom
+      switch (action && action.action) {
+        case 'rename':
+          dom = this.$refs.dom_lists_list.querySelectorAll('.user-list')[this.listsData.rightClickItemIndex]
+          this.$nextTick(() => {
+            dom.classList.add(this.$style.editing)
+            dom.querySelector('input').focus()
+          })
+          break
+        case 'moveup':
+          this.moveupUserList(this.listsData.rightClickItemIndex)
+          break
+        case 'movedown':
+          this.movedownUserList(this.listsData.rightClickItemIndex)
+          break
+        case 'remove':
+          this.removeUserList(this.listsData.rightClickItemIndex)
+          break
+      }
+      this.listsData.rightClickItemIndex = -1
+    },
  },
 }
 </script>
@@ -420,15 +626,135 @@ export default {
 <style lang="less" module>
@import '../assets/styles/layout.less';

+.container {
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+.lists {
+  flex: none;
+  width: 16%;
+  display: flex;
+  flex-flow: column nowrap;
+}
+.listHeader {
+  position: relative;
+  &:hover {
+    .listsAdd {
+      opacity: 1;
+    }
+  }
+}
+.listsTitle {
+  font-size: 12px;
+  line-height: 38px;
+  padding: 0 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  flex: none;
+}
+.listsAdd {
+  position: absolute;
+  right: 0;
+  top: 8px;
+  background: none;
+  height: 30px;
+  border: none;
+  outline: none;
+  border-radius: @radius-border;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity @transition-theme;
+  color: @color-btn;
+  svg {
+    vertical-align: bottom;
+  }
+  &:active {
+    opacity: .7 !important;
+  }
+}
+.listsContent {
+  flex: auto;
+  min-width: 0;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  // border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+.listsItem {
+  position: relative;
+  transition: .3s ease;
+  transition-property: color, background-color;
+  background-color: transparent;
+  &:hover:not(.active) {
+    background-color: @color-theme_2-hover;
+    cursor: pointer;
+  }
+  &.active {
+    // background-color:
+    color: @color-theme;
+  }
+  &.selected {
+    background-color: @color-theme_2-active;
+  }
+  &.clicked {
+    background-color: @color-theme_2-hover;
+  }
+  &.editing {
+    padding: 0 10px;
+    background-color: @color-theme_2-hover;
+    .listsLabel {
+      display: none;
+    }
+    .listsInput {
+      display: block;
+    }
+  }
+}
+.listsLabel {
+  display: block;
+  height: 100%;
+  padding: 0 10px;
+  font-size: 13px;
+  line-height: 36px;
+  .mixin-ellipsis-1;
+}
+.listsInput {
+  width: 100%;
+  height: 36px;
+  border: none;
+  padding: 0;
+  line-height: 36px;
+  background: none;
+  outline: none;
+  font-size: 13px;
+  display: none;
+  font-family: inherit;
+}
+
+.listsNew {
+  padding: 0 10px;
+  background-color: @color-theme_2-hover;
+  .listsInput {
+    display: block;
+  }
+}
+.newLeave {
+  margin-top: -36px;
+  z-index: -1;
+}
+
 .list {
  overflow: hidden;
  height: 100%;
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
  // .noItem {

  // }
 }
 .content {
-  height: 100%;
+  min-height: 0;
  font-size: 14px;
  display: flex;
  flex-flow: column nowrap;
@@ -456,7 +782,7 @@ export default {

  tr {
    &.active {
-      color: @color-theme;
+      color: @color-btn;
    }
  }
  td {
@@ -504,10 +830,33 @@ export default {

 each(@themes, {
  :global(#container.@{value}) {
+    .listsAdd {
+      color: ~'@{color-@{value}-btn}';
+    }
+    .listsItem {
+      &:hover:not(.active) {
+        background-color: ~'@{color-@{value}-theme_2-hover}';
+      }
+      &.active {
+        color: ~'@{color-@{value}-theme}';
+      }
+      &.select {
+        background-color: ~'@{color-@{value}-theme_2-active}';
+      }
+      &.clicked {
+        background-color: ~'@{color-@{value}-theme_2-hover}';
+      }
+      &.editing {
+        background-color: ~'@{color-@{value}-theme_2-hover}';
+      }
+    }
+    .listsNew {
+      background-color: ~'@{color-@{value}-theme_2-hover}';
+    }
    .tbody {
      tr {
        &.active {
-          color: ~'@{color-@{value}-theme}';
+          color: ~'@{color-@{value}-btn}';
        }
      }
      td {
@@ -191,6 +191,8 @@ export default {
      if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
    },
    handle_key_mod_a_down({ event }) {
+      if (event.target.tagName == 'INPUT') return
+      event.preventDefault()
      if (event.repeat) return
      this.keyEvent.isModDown = false
      this.handleSelectAllData()
@@ -302,8 +304,7 @@ export default {
      )
      if (targetIndex > -1) {
        this.setList({
-          list: this.defaultList.list,
-          listId: this.defaultList.id,
+          list: this.defaultList,
          index: targetIndex,
        })
      }
@@ -91,7 +91,7 @@ div.scroll(:class="$style.setting")
    dd(:title="$t('view.setting.list_scroll_title')")
      h3 {{$t('view.setting.list_scroll')}}
      div
-        material-checkbox(id="setting_list_scroll_enable" v-model="current_setting.list.scroll.enable" :label="$t('view.setting.is_enable')")
+        material-checkbox(id="setting_list_scroll_enable" v-model="current_setting.list.isSaveScrollLocation" :label="$t('view.setting.is_enable')")
    //- dd(:title="播放列表是否显示专辑栏")
      h3 专辑栏
      div
@@ -237,7 +237,7 @@ export default {
  name: 'Setting',
  computed: {
    ...mapGetters(['setting', 'settingVersion', 'themes', 'version', 'windowSizeList']),
-    ...mapGetters('list', ['defaultList', 'loveList']),
+    ...mapGetters('list', ['defaultList', 'loveList', 'userList']),
    isShowRebootBtn() {
      return this.current_setting.windowSizeId != window.currentWindowSizeId
    },
@@ -323,10 +323,7 @@ export default {
        list: {
          isShowAlbumName: true,
          isShowSource: true,
-          scroll: {
-            enable: true,
-            locations: {},
-          },
+          isSaveScrollLocation: true,
        },
        search: {
          searchSource: 'kw',
@@ -457,12 +454,13 @@ export default {
      console.log(listData.type)

      // 兼容0.6.2及以前版本的列表数据
-      if (listData.type === 'defautlList') return this.setList({ id: 'default', list: listData.data.list })
+      if (listData.type === 'defautlList') return this.setList({ id: 'default', list: listData.data.list, name: '试听列表', location: 0 })

      if (listData.type !== 'playList') return

      for (const list of listData.data) {
-        this.setList({ id: list.id, list: list.list })
+        if (list.location == null) list.location = 0
+        this.setList(list)
      }
    },
    exportPlayList(path) {
@@ -471,6 +469,7 @@ export default {
        data: [
          this.defaultList,
          this.loveList,
+          ...this.userList,
        ],
      }
      fs.writeFile(path, JSON.stringify(data, null, 2), 'utf8', err => {
@@ -490,10 +489,11 @@ export default {
      this.refreshSetting(setting, settingVersion)

      // 兼容0.6.2及以前版本的列表数据
-      if (allData.defaultList) return this.setList({ id: 'default', list: allData.defaultList.list })
+      if (allData.defaultList) return this.setList({ id: 'default', list: allData.defaultList.list, name: '试听列表', location: 0 })

      for (const list of allData.playList) {
-        this.setList({ id: list.id, list: list.list })
+        if (list.location == null) list.location = 0
+        this.setList(list)
      }
    },
    exportAllData(path) {
@@ -503,6 +503,7 @@ export default {
        playList: [
          this.defaultList,
          this.loveList,
+          ...this.userList,
        ],
      }
      fs.writeFile(path, JSON.stringify(allData, null, 2), 'utf8', err => {
@@ -740,7 +741,7 @@ export default {
        content: ' ';
        width: 100%;
        height: 100%;
-        border-radius: 4px;
+        border-radius: @radius-border;
        background-position: center;
        background-size: auto 100%;
        background-repeat: no-repeat;
@@ -54,8 +54,8 @@
              p {{$t('view.song_list.loding_list')}}
    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")
-    material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose")
+    material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false" :list-name="listDetail.info.name")
+    material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose" :list-name="listDetail.info.name")
 </template>

 <script>
@@ -213,8 +213,7 @@ export default {
      )
      if (targetIndex > -1) {
        this.setList({
-          list: this.defaultList.list,
-          listId: this.defaultList.id,
+          list: this.defaultList,
          index: targetIndex,
        })
      }