升级到 vue3

src/renderer/views/Download.vue

@@ -2,20 +2,20 @@
 div(:class="$style.download")
   //- transition
   div(:class="$style.header")
-    material-tab(:class="$style.tab" :list="tabs" align="left" item-key="id" item-name="name" @change="handleTabChange" v-model="tabId")
-  div(:class="$style.content" v-if="list.length")
-    div(:class="$style.thead")
+    base-tab(:class="$style.tab" :list="tabs" align="left" item-key="id" item-name="name" @change="handleTabChange" v-model="tabId")
+  div(:class="$style.content" v-if="downloadList.length")
+    div.thead(:class="$style.thead")
       table
         thead
           tr
             th.nobreak.center(style="width: 5%;") #
-            th.nobreak {{$t('view.download.name')}}
-            th.nobreak(style="width: 20%;") {{$t('view.download.progress')}}
-            th.nobreak(style="width: 22%;") {{$t('view.download.status')}}
-            th.nobreak(style="width: 10%;") {{$t('view.download.quality')}}
-            th.nobreak(style="width: 13%;") {{$t('view.download.action')}}
-    div(v-if="list.length" :class="$style.content" ref="dom_listContent")
-      material-virtualized-list(:list="showList" key-name="key" ref="list" :item-height="listItemHeight" #default="{ item, index }"
+            th.nobreak {{$t('music_name')}}
+            th.nobreak(style="width: 20%;") {{$t('download__progress')}}
+            th.nobreak(style="width: 22%;") {{$t('download__status')}}
+            th.nobreak(style="width: 10%;") {{$t('download__quality')}}
+            th.nobreak(style="width: 13%;") {{$t('action')}}
+    div(v-if="downloadList.length" :class="$style.content" ref="dom_listContent")
+      base-virtualized-list(:list="showList" key-name="key" ref="list" :item-height="listItemHeight" #default="{ item, index }"
         containerClass="scroll" contentClass="list")
         div.list-item(@click="handleDoubleClick($event, index)" @contextmenu="handleListItemRigthClick($event, index)"
           :class="[{[$style.active]: playListIndex == index }, { selected: selectedIndex == index }, { active: selectedData.includes(item) }]")
@@ -24,25 +24,35 @@ div(:class="$style.download")
             span.select {{item.name}}
           div.list-item-cell(style="width: 20%;") {{item.progress.progress}}%
           div.list-item-cell(style="width: 22%;" :tips="item.statusText") {{item.statusText}}
-          div.list-item-cell(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
+          div.list-item-cell(style="width: 10%;") {{item.metadata.type && item.metadata.type.toUpperCase()}}
           div.list-item-cell(style="width: 13%; padding-left: 0; padding-right: 0;")
             material-list-buttons(:index="index" :download-btn="false" :file-btn="item.status != downloadStatus.ERROR" remove-btn
               :start-btn="!item.isComplate && item.status != downloadStatus.WAITING && (item.status != downloadStatus.RUN)"
               :pause-btn="!item.isComplate && (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING)" :list-add-btn="false"
               :play-btn="item.status == downloadStatus.COMPLETED" :search-btn="item.status == downloadStatus.ERROR" @btn-click="handleListBtnClick")
-    material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
+    base-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
   div(:class="$style.noItem" v-else)
 </template>
 
 <script>
 import { mapGetters, mapActions, mapMutations } from 'vuex'
-import { checkPath, openDirInExplorer, openUrl } from '../utils'
-import musicSdk from '../utils/music'
+import { checkPath, openDirInExplorer, openUrl } from '@renderer/utils'
+import musicSdk from '@renderer/utils/music'
 import path from 'path'
-import { windowSizeList } from '@common/config'
+import { windowSizeList } from '@renderer/core/share'
+import { playInfo, playMusicInfo } from '@renderer/core/share/player'
+import { downloadList, downloadStatus } from '@renderer/core/share/download'
 
 export default {
   name: 'Download',
+  setup() {
+    return {
+      playMusicInfo,
+      playInfo,
+      downloadList,
+      downloadStatus,
+    }
+  },
   data() {
     return {
       clickTime: window.performance.now(),
@@ -78,14 +88,12 @@ export default {
   },
   computed: {
     ...mapGetters(['setting']),
-    ...mapGetters('download', ['list', 'downloadStatus']),
-    ...mapGetters('player', ['playInfo']),
     isPlayList() {
-      return this.playInfo.listId == 'download'
+      return this.playMusicInfo.listId == 'download'
     },
     playListIndex() {
-      if (this.playInfo.listId != 'download' || !this.list.length) return
-      let info = this.list[this.playInfo.playIndex]
+      if (this.playMusicInfo.listId != 'download' || !this.downloadList.length) return -1
+      let info = this.downloadList[this.playInfo.playIndex]
       if (!info) return -1
       let key = info.key
       return this.showList.findIndex(i => i.key == key)
@@ -93,37 +101,37 @@ export default {
     showList() {
       switch (this.tabId) {
         case 'runing':
-          return this.list.filter(i => i.status == this.downloadStatus.RUN || i.status == this.downloadStatus.WAITING)
+          return this.downloadList.filter(i => i.status == this.downloadStatus.RUN || i.status == this.downloadStatus.WAITING)
         case 'paused':
-          return this.list.filter(i => i.status == this.downloadStatus.PAUSE)
+          return this.downloadList.filter(i => i.status == this.downloadStatus.PAUSE)
         case 'error':
-          return this.list.filter(i => i.status == this.downloadStatus.ERROR)
+          return this.downloadList.filter(i => i.status == this.downloadStatus.ERROR)
         case 'finished':
-          return this.list.filter(i => i.status == this.downloadStatus.COMPLETED)
+          return this.downloadList.filter(i => i.status == this.downloadStatus.COMPLETED)
         default:
-          return this.list
+          return this.downloadList
       }
     },
     tabs() {
       return [
         {
-          name: this.$t('view.download.all'),
+          name: this.$t('download__all'),
           id: 'all',
         },
         {
-          name: this.$t('view.download.runing'),
+          name: this.$t('download__runing'),
           id: 'runing',
         },
         {
-          name: this.$t('view.download.paused'),
+          name: this.$t('download__paused'),
           id: 'paused',
         },
         {
-          name: this.$t('view.download.error'),
+          name: this.$t('download__error'),
           id: 'error',
         },
         {
-          name: this.$t('view.download.finished'),
+          name: this.$t('download__finished'),
           id: 'finished',
         },
       ]
@@ -131,42 +139,42 @@ export default {
     listItemMenu() {
       return [
         {
-          name: this.$t('view.download.menu_play'),
+          name: this.$t('list__play'),
           action: 'play',
           hide: !this.listMenu.itemMenuControl.play,
         },
         {
-          name: this.$t('view.download.menu_start'),
+          name: this.$t('list__start'),
           action: 'start',
           hide: !this.listMenu.itemMenuControl.start,
         },
         {
-          name: this.$t('view.download.menu_pause'),
+          name: this.$t('list__pause'),
           action: 'pause',
           hide: !this.listMenu.itemMenuControl.pause,
         },
         {
-          name: this.$t('view.download.menu_play_later'),
+          name: this.$t('list__play_later'),
           action: 'playLater',
           hide: !this.listMenu.itemMenuControl.playLater,
         },
         {
-          name: this.$t('view.download.menu_file'),
+          name: this.$t('list__file'),
           action: 'file',
           hide: !this.listMenu.itemMenuControl.file,
         },
         {
-          name: this.$t('view.download.menu_source_detail'),
+          name: this.$t('list__source_detail'),
           action: 'sourceDetail',
           disabled: !this.listMenu.itemMenuControl.sourceDetail,
         },
         {
-          name: this.$t('view.download.menu_search'),
+          name: this.$t('list__search'),
           action: 'search',
           hide: !this.listMenu.itemMenuControl.search,
         },
         {
-          name: this.$t('view.download.menu_remove'),
+          name: this.$t('list__remove'),
           action: 'remove',
           hide: !this.listMenu.itemMenuControl.remove,
         },
@@ -191,18 +199,18 @@ export default {
     ...mapActions('download', ['removeTask', 'removeTasks', 'startTask', 'startTasks', 'pauseTask', 'pauseTasks']),
     ...mapMutations('player', ['setList', 'setTempPlayList']),
     listenEvent() {
-      window.eventHub.$on('key_shift_down', this.handle_key_shift_down)
-      window.eventHub.$on('key_shift_up', this.handle_key_shift_up)
-      window.eventHub.$on('key_mod_down', this.handle_key_mod_down)
-      window.eventHub.$on('key_mod_up', this.handle_key_mod_up)
-      window.eventHub.$on('key_mod+a_down', this.handle_key_mod_a_down)
+      window.eventHub.on('key_shift_down', this.handle_key_shift_down)
+      window.eventHub.on('key_shift_up', this.handle_key_shift_up)
+      window.eventHub.on('key_mod_down', this.handle_key_mod_down)
+      window.eventHub.on('key_mod_up', this.handle_key_mod_up)
+      window.eventHub.on('key_mod+a_down', this.handle_key_mod_a_down)
     },
     unlistenEvent() {
-      window.eventHub.$off('key_shift_down', this.handle_key_shift_down)
-      window.eventHub.$off('key_shift_up', this.handle_key_shift_up)
-      window.eventHub.$off('key_mod_down', this.handle_key_mod_down)
-      window.eventHub.$off('key_mod_up', this.handle_key_mod_up)
-      window.eventHub.$off('key_mod+a_down', this.handle_key_mod_a_down)
+      window.eventHub.off('key_shift_down', this.handle_key_shift_down)
+      window.eventHub.off('key_shift_up', this.handle_key_shift_up)
+      window.eventHub.off('key_mod_down', this.handle_key_mod_down)
+      window.eventHub.off('key_mod_up', this.handle_key_mod_up)
+      window.eventHub.off('key_mod+a_down', this.handle_key_mod_a_down)
     },
     handle_key_shift_down() {
       if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
@@ -276,8 +284,8 @@ export default {
     },
     handleClick(index) {
       const key = this.showList[index].key
-      index = this.list.findIndex(i => i.key === key)
-      let info = this.list[index]
+      index = this.downloadList.findIndex(i => i.key === key)
+      let info = this.downloadList[index]
       if (info.isComplate) {
         this.handlePlay(info)
       } else if (info.status === this.downloadStatus.RUN) {
@@ -287,8 +295,8 @@ export default {
       }
     },
     async handlePlay(targetSong) {
-      if (!await checkPath(path.join(this.setting.download.savePath, targetSong.fileName))) return
-      this.setList({ list: { list: this.list, id: 'download' }, index: this.list.findIndex(i => i.key === targetSong.key) })
+      if (!await checkPath(path.join(this.setting.download.savePath, targetSong.metadata.fileName))) return
+      this.setList({ listId: 'download', index: this.downloadList.findIndex(i => i.key === targetSong.key) })
     },
     handleListBtnClick(info) {
       let item = this.showList[info.index]
@@ -306,10 +314,10 @@ export default {
           this.removeTask(item)
           break
         case 'file':
-          this.handleOpenFolder(item.filePath)
+          this.handleOpenFolder(item.metadata.filePath)
           break
         case 'search':
-          this.handleSearch(window.downloadListFullMap.get(item.key).musicInfo)
+          this.handleSearch(item.metadata.musicInfo)
           break
       }
     },
@@ -350,8 +358,8 @@ export default {
       this.selectedData = []
     },
     handleListItemRigthClick(event, index) {
-      const downloadInfo = window.downloadListFullMap.get(this.showList[index].key)
-      this.listMenu.itemMenuControl.sourceDetail = !!musicSdk[downloadInfo.musicInfo.source].getMusicDetailPageUrl
+      const downloadInfo = this.showList[index]
+      this.listMenu.itemMenuControl.sourceDetail = !!musicSdk[downloadInfo.metadata.musicInfo.source].getMusicDetailPageUrl
       let dom_container = event.target.closest('.' + this.$style.download)
       const getOffsetValue = (target, x = 0, y = 0) => {
         if (target === dom_container) return { x, y }
@@ -439,11 +447,11 @@ export default {
           item = this.showList[index]
           // key = item.key
           // index = this.list.findIndex(i => i.key === key)
-          if (item) this.handleOpenFolder(item.filePath)
+          if (item) this.handleOpenFolder(item.metadata.filePath)
           break
         case 'search':
           item = this.showList[index]
-          if (item) this.handleSearch(window.downloadListFullMap.get(item.key).musicInfo)
+          if (item) this.handleSearch(item.metadata.musicInfo)
           break
         case 'remove':
           if (this.selectedData.length) {
@@ -467,7 +475,7 @@ export default {
           }
           break
         case 'sourceDetail':
-          item = window.downloadListFullMap.get(this.showList[index].key).musicInfo
+          item = this.showList[index].metadata.musicInfo
           url = musicSdk[item.source].getMusicDetailPageUrl(item)
           if (!url) return
           openUrl(url)
@@ -537,7 +545,7 @@ export default {
 }
 
 each(@themes, {
-  :global(#container.@{value}) {
+  :global(#root.@{value}) {
     :global(.list) {
       :global(.list-item-cell) {
         &:first-child {

src/renderer/views/Leaderboard.vue

@@ -1,33 +1,41 @@
-<template lang="pug">
-  div(:class="$style.leaderboard")
-    //- div(:class="$style.header")
-      material-tab(:class="$style.tab" :list="boards" align="left" item-key="id" item-name="name" v-model="tabId")
-      material-select(:class="$style.select" :list="sources.sources" item-key="id" item-name="name" v-model="source")
-    div(:class="$style.lists" ref="dom_lists")
-      div(:class="$style.listsSelect")
-        //- h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
-        material-selection(:class="$style.select" :list="sources" item-key="id" item-name="name" v-model="source")
-        //- button(:class="$style.listsAdd" @click="handleShowNewList" :tips="$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, item.id == tabId ? $style.active : null, { [$style.clicked]: boardListData.rightClickItemIndex == index }]"
-            :tips="item.name" v-for="(item, index) in boardList" :key="item.id" @click="handleToggleList(item.id)"
-            @contextmenu="handleListsItemRigthClick($event, index)")
-          span(:class="$style.listsLabel") {{item.name}}
-    div(:class="$style.list")
-      material-song-list(v-model="selectedData" ref="songList" :hideListsMenu="hideListsMenu" :rowWidth="{r1: '5%', r2: 'auto', r3: '22%', r4: '22%', r5: '9%', r6: '15%'}" @action="handleSongListAction" :source="source" :page="page" :limit="listInfo.limit" :total="listInfo.total" :noItem="$t('material.song_list.loding_list')" :list="list")
-    material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
-    material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectedData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
-    material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
-    material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectedData" @close="handleListAddModalClose")
-    material-menu(:menus="listsItemMenu" :location="boardListData.menuLocation" item-name="name" :isShow="boardListData.isShowItemMenu" @menu-click="handleListsItemMenuClick")
+<template>
+<div :class="$style.leaderboard">
+  <div :class="$style.lists" ref="dom_lists">
+    <div :class="$style.listsSelect">
+      <base-selection :class="$style.select" :list="sources" item-key="id" item-name="name" v-model="source" />
+    </div>
+    <ul class="scroll" :class="$style.listsContent" ref="dom_lists_list">
+      <li :class="[$style.listsItem, { [$style.active]: item.id == tabId }, { [$style.clicked]: boardListData.rightClickItemIndex == index }]"
+      :tips="item.name" v-for="(item, index) in boardList" :key="item.id"
+      @click="handleToggleList(item.id)" @contextmenu="handleListsItemRigthClick($event, index)">
+        <span :class="$style.listsLabel">{{item.name}}</span>
+      </li>
+    </ul>
+  </div>
+  <div :class="$style.list">
+    <material-online-list
+      ref="songList"
+      @show-menu="hideListsMenu"
+      @toggle-page="handleGetList"
+      :rowWidth="{r1: '5%', r2: 'auto', r3: '22%', r4: '22%', r5: '9%', r6: '15%'}"
+      :page="page"
+      :limit="listInfo.limit"
+      :total="listInfo.total"
+      :noItem="noItemLabel"
+      :list="list" />
+  </div>
+  <base-menu
+    :menus="listsItemMenu"
+    :location="boardListData.menuLocation"
+    item-name="name"
+    :isShow="boardListData.isShowItemMenu"
+    @menu-click="handleListsItemMenuClick" />
+</div>
 </template>
 
 <script>
 import { mapGetters, mapMutations, mapActions } from 'vuex'
-import { openUrl } from '../utils'
-import musicSdk from '../utils/music'
+import { nextTick } from '@renderer/utils/vueTools'
 export default {
   name: 'Leaderboard',
   data() {
@@ -37,7 +45,6 @@ export default {
       page: 1,
       isShowDownload: false,
       musicInfo: null,
-      selectedData: [],
       isShowDownloadMultiple: false,
       isShowListAdd: false,
       isShowListAddMultiple: false,
@@ -63,24 +70,25 @@ export default {
         limit: 30,
         key: null,
       },
+      loadId: null,
+      loadError: null,
     }
   },
   computed: {
     ...mapGetters(['setting']),
     ...mapGetters('leaderboard', ['sources', 'boards', 'info']),
-    ...mapGetters('list', ['defaultList']),
     boardList() {
       return this.source && this.boards[this.source] ? this.boards[this.source] : []
     },
     listsItemMenu() {
       return [
         {
-          name: this.$t('view.leaderboard.play'),
+          name: this.$t('list__play'),
           action: 'play',
           disabled: false,
         },
         {
-          name: this.$t('view.leaderboard.collect'),
+          name: this.$t('list__collect'),
           action: 'collect',
           disabled: false,
         },
@@ -89,27 +97,29 @@ export default {
     list() {
       return this.listInfo.list
     },
+    noItemLabel() {
+      return this.loadId
+        ? this.$t('list__loading')
+        : this.loadError
+          ? this.$t('list__load_failed')
+          : this.listInfo.list.length
+            ? this.$t('list__loading')
+            : this.$t('no_item')
+    },
   },
   watch: {
     tabId(n, o) {
       this.setLeaderboard({ tabId: n })
       if (!n || (!o && this.page !== 1)) return
       this.listInfo.list = []
-      this.getList(1).then(listInfo => {
-        this.listInfo.list = listInfo.list
-        this.listInfo.total = listInfo.total
-        this.listInfo.limit = listInfo.limit
-        this.listInfo.page = listInfo.page
-        this.listInfo.key = listInfo.key
-        this.page = listInfo.page
-      })
+      this.handleGetList(1)
     },
     source(n, o) {
       this.setLeaderboard({ source: n })
       if (o) this.tabId = null
       this.getBoardsList().then(() => {
         if (this.tabId != null) return
-        this.$nextTick(() => {
+        nextTick(() => {
           this.tabId = this.boardList[0] && this.boardList[0].id
         })
       })
@@ -123,165 +133,35 @@ export default {
   methods: {
     ...mapMutations(['setLeaderboard']),
     ...mapActions('leaderboard', ['getBoardsList', 'getList', 'getListAll']),
-    ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
-    ...mapMutations('list', ['listAdd', 'listAddMultiple', 'createUserList']),
-    ...mapMutations('player', ['setList', 'setTempPlayList']),
-    handleListBtnClick(info) {
-      switch (info.action) {
-        case 'download':
-          this.musicInfo = this.list[info.index]
-          this.$nextTick(() => {
-            this.isShowDownload = true
-          })
-          break
-        case 'play':
-          this.testPlay(info.index)
-          break
-        case 'search':
-          this.handleSearch(info.index)
-          break
-        case 'listAdd':
-          this.musicInfo = this.list[info.index]
-          this.$nextTick(() => {
-            this.isShowListAdd = true
-          })
-          break
-      }
-    },
-    handleMenuClick(info) {
-      let minfo
-      let url
-      switch (info.action) {
-        case 'download':
-          if (this.selectedData.length) {
-            this.isShowDownloadMultiple = true
-          } else {
-            this.musicInfo = this.list[info.index]
-            this.$nextTick(() => {
-              this.isShowDownload = true
-            })
-          }
-          break
-        case 'play':
-          if (this.selectedData.length) {
-            this.listAddMultiple({ id: 'default', list: this.selectedData })
-            this.resetSelect()
-          }
-          this.testPlay(info.index)
-          break
-        case 'playLater':
-          if (this.selectedData.length) {
-            this.setTempPlayList(this.selectedData.map(s => ({ listId: '__temp__', musicInfo: s })))
-            this.resetSelect()
-          } else {
-            this.setTempPlayList([{ listId: '__temp__', musicInfo: this.list[info.index] }])
-          }
-          break
-        case 'search':
-          this.handleSearch(info.index)
-          break
-        case 'addTo':
-          if (this.selectedData.length) {
-            this.$nextTick(() => {
-              this.isShowListAddMultiple = true
-            })
-          } else {
-            this.musicInfo = this.list[info.index]
-            this.$nextTick(() => {
-              this.isShowListAdd = true
-            })
-          }
-          break
-        case 'sourceDetail':
-          minfo = this.list[info.index]
-          url = musicSdk[minfo.source].getMusicDetailPageUrl(minfo)
-          if (!url) return
-          openUrl(url)
-      }
-    },
-    testPlay(index) {
-      let targetSong = this.list[index]
-      this.listAdd({ id: 'default', musicInfo: targetSong })
-      let targetIndex = this.defaultList.list.findIndex(
-        s => s.songmid === targetSong.songmid,
-      )
-      if (targetIndex > -1) {
-        this.setList({
-          list: this.defaultList,
-          index: targetIndex,
-        })
-      }
-    },
-    handleSearch(index) {
-      const info = this.list[index]
-      this.$router.push({
-        path: 'search',
-        query: {
-          text: `${info.name} ${info.singer}`,
-        },
-      })
-    },
-    handleTogglePage(page) {
-      this.listInfo.list = []
+    ...mapMutations('list', ['createUserList']),
+    ...mapMutations('player', ['setTempList']),
+    handleGetList(page) {
+      const loadId = `${this.source}${this.tabId}${page}`
+      this.loadError = false
+      this.loadId = loadId
       this.getList(page).then(listInfo => {
+        if (this.loadId != loadId) return
         this.listInfo.list = listInfo.list
         this.listInfo.total = listInfo.total
         this.listInfo.limit = listInfo.limit
         this.listInfo.page = listInfo.page
         this.listInfo.key = listInfo.key
         this.page = listInfo.page
+        nextTick(() => {
+          this.$refs.songList?.scrollToTop()
+        })
+      }).catch(() => {
+        if (this.loadId != loadId) return
+        this.loadError = true
+      }).finally(() => {
+        if (this.loadId != loadId) return
+        this.loadId = null
       })
     },
-    handleAddDownload(type) {
-      this.createDownload({ musicInfo: this.musicInfo, type })
-      this.isShowDownload = false
-    },
-    handleAddDownloadMultiple(type) {
-      if (this.source == 'xm' && type == 'flac') type = 'wav'
-      this.createDownloadMultiple({ list: [...this.selectedData], type })
-      this.isShowDownloadMultiple = false
-      this.resetSelect()
-    },
-    handleListAddModalClose(isSelect) {
-      if (isSelect) this.resetSelect()
-      this.isShowListAddMultiple = false
-    },
-    // handleFlowBtnClick(action) {
-    //   switch (action) {
-    //     case 'download':
-    //       this.isShowDownloadMultiple = true
-    //       break
-    //     case 'play':
-    //       this.testPlay()
-    //       break
-    //     case 'add':
-    //       this.isShowListAddMultiple = true
-    //       break
-    //   }
-    // },
-    handleSongListAction({ action, data }) {
-      switch (action) {
-        case 'listBtnClick':
-          return this.handleListBtnClick(data)
-        case 'menuClick':
-          return this.handleMenuClick(data)
-        case 'togglePage':
-          return this.handleTogglePage(data)
-        // case 'flowBtnClick':
-        //   return this.handleFlowBtnClick(data)
-        case 'testPlay':
-          return this.testPlay(data)
-        case 'search':
-          return this.handleSearch(data)
-      }
-    },
     handleToggleList(id) {
       if (this.tabId == id) return
       this.tabId = id
     },
-    resetSelect() {
-      this.selectedData = []
-    },
     handleListsItemRigthClick(event, index) {
       // const board = this.boardList[index]
       // this.boardListData.itemMenuControl.sync = !!source && !!musicSdk[source].songList
@@ -291,7 +171,7 @@ export default {
       this.boardListData.menuLocation.x = event.currentTarget.offsetLeft + event.offsetX
       this.boardListData.menuLocation.y = event.currentTarget.offsetTop + event.offsetY - this.$refs.dom_lists_list.scrollTop
       // this.hideListsMenu()
-      this.$refs.songList.hideListMenu()
+      this.$refs.songList.hideMenu()
       this.$nextTick(() => {
         this.boardListData.isShowItemMenu = true
       })
@@ -311,11 +191,8 @@ export default {
         if (!list.length) return
         switch (action && action.action) {
           case 'play':
-            this.setList({
-              list: {
-                list,
-                id: null,
-              },
+            this.setTempList({
+              list,
               index: 0,
             })
             break
@@ -482,7 +359,7 @@ export default {
 
 
 each(@themes, {
-  :global(#container.@{value}) {
+  :global(#root.@{value}) {
     .listsSelect {
       :global(.label) {
         color: ~'@{color-@{value}-theme_2-font}' !important;

src/renderer/views/Search.vue

@@ -1,73 +1,77 @@
 <template lang="pug">
-  div(:class="$style.search")
-    //- transition
-    div(:class="$style.header")
-      material-tab(:class="$style.tab" :list="sources" align="left" item-key="id" item-name="name" v-model="searchSourceId")
-    div(:class="$style.main")
-      div(:class="$style.list" v-show="isLoading || listInfo.list.length")
-        div(:class="$style.thead")
-          table
-            thead
-              tr
-                th.nobreak.center(style="width: 5%;") #
-                th.nobreak {{$t('view.search.name')}}
-                th.nobreak(style="width: 22%;") {{$t('view.search.singer')}}
-                th.nobreak(style="width: 22%;") {{$t('view.search.album')}}
-                th.nobreak(style="width: 8%;") {{$t('view.search.time')}}
-                th.nobreak(style="width: 13%;") {{$t('view.search.action')}}
-        div.scroll(:class="$style.tbody" ref="dom_scrollContent")
-          table
-            tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
-              tr(v-for='(item, index) in listInfo.list' :key='item.songmid' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)")
-                td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
-                td.break
-                  span.select {{item.name}}
-                  span.badge.badge-theme-success(:class="[$style.labelQuality, $style.noSelect]" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}}
-                  span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}}
-                  span(:class="[$style.labelSource, $style.noSelect]" v-if="searchSourceId == 'all'") {{item.source}}
-                td.break(style="width: 22%;")
-                  span.select {{item.singer}}
-                td.break(style="width: 22%;")
-                  span.select {{item.albumName}}
-                td(style="width: 8%;")
-                  span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
-                td(style="width: 13%; padding-left: 0; padding-right: 0;")
-                  material-list-buttons(:index="index" :remove-btn="false" :class="$style.listBtn"
-                    :play-btn="assertApiSupport(item.source)"
-                    :download-btn="assertApiSupport(item.source)"
-                    @btn-click="handleListBtnClick")
-          div(:class="$style.pagination")
-            material-pagination(:max-page="listInfo.allPage" :limit="listInfo.limit" :page="page" @btn-click="handleTogglePage")
-      transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated fadeOut")
-        div(v-show="isLoading" :class="$style.loading")
-          p {{$t('view.search.loding_list')}}
-      transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-        div(v-show="!isLoading && !listInfo.list.length" :class="$style.noitem")
-          div.scroll(:class="$style.noitemListContainer" v-if="setting.search.isShowHotSearch || setting.search.isShowHistorySearch")
-            dl(:class="[$style.noitemList, $style.noitemHotSearchList]" v-if="setting.search.isShowHotSearch")
-              dt(:class="$style.noitemListTitle") {{$t('view.search.hot_search')}}
-              dd(:class="$style.noitemListItem" @click="handleNoitemSearch(item)" v-for="item in hotSearchList") {{item}}
-            dl(:class="$style.noitemList" v-if="setting.search.isShowHistorySearch && historyList.length")
-              dt(:class="$style.noitemListTitle")
-                span {{$t('view.search.history_search')}}
-                span(:class="$style.historyClearBtn" @click="clearHistory" :tips="$t('view.search.history_clear')")
-                  svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
-                    use(xlink:href='#icon-eraser')
-              dd(:class="$style.noitemListItem" v-for="(item, index) in historyList" @contextmenu="removeHistory(index)" :key="index + item" @click="handleNoitemSearch(item)" :tips="$t('view.search.history_remove')") {{item}}
-          div(v-else :class="$style.noitem_list")
-            p {{$t('view.search.no_item')}}
-      material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
-    material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
-    material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectedData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
-    //- material-flow-btn(:show="isShowEditBtn && (searchSourceId == 'all' || assertApiSupport(searchSourceId))" :remove-btn="false" @btn-click="handleFlowBtnClick")
-    material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="handleListAddModalClose")
-    material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectedData" @close="handleListAddMultipleModalClose")
+div(:class="$style.search")
+  //- transition
+  div(:class="$style.header")
+    base-tab(:class="$style.tab" :list="sources" align="left" item-key="id" item-name="name" v-model="searchSourceId")
+  div(:class="$style.main")
+    div(:class="$style.list" v-show="isLoading || listInfo.list.length")
+      div.thead(:class="$style.thead")
+        table
+          thead
+            tr
+              th.nobreak.center(style="width: 5%;") #
+              th.nobreak {{$t('music_name')}}
+              th.nobreak(style="width: 22%;") {{$t('music_singer')}}
+              th.nobreak(style="width: 22%;") {{$t('music_album')}}
+              th.nobreak(style="width: 8%;") {{$t('music_time')}}
+              th.nobreak(style="width: 13%;") {{$t('action')}}
+      div.scroll(:class="$style.tbody" ref="dom_scrollContent")
+        table
+          tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
+            tr(v-for='(item, index) in listInfo.list' :key='item.songmid' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)")
+              td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
+              td.break
+                span.select {{item.name}}
+                span.badge.badge-theme-success(:class="[$style.labelQuality, $style.noSelect]" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('tag__lossless')}}
+                span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item._types['320k']") {{$t('tag__high_quality')}}
+                span(:class="[$style.labelSource, $style.noSelect]" v-if="searchSourceId == 'all'") {{item.source}}
+              td.break(style="width: 22%;")
+                span.select {{item.singer}}
+              td.break(style="width: 22%;")
+                span.select {{item.albumName}}
+              td(style="width: 8%;")
+                span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
+              td(style="width: 13%; padding-left: 0; padding-right: 0;")
+                material-list-buttons(:index="index" :remove-btn="false" :class="$style.listBtn"
+                  :play-btn="assertApiSupport(item.source)"
+                  :download-btn="assertApiSupport(item.source)"
+                  @btn-click="handleListBtnClick")
+        div(:class="$style.pagination")
+          material-pagination(:max-page="listInfo.allPage" :limit="listInfo.limit" :page="page" @btn-click="handleTogglePage")
+    transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated fadeOut")
+      div(v-show="isLoading" :class="$style.loading")
+        p {{$t('list__loading')}}
+    transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
+      div(v-show="!isLoading && !listInfo.list.length" :class="$style.noitem")
+        div.scroll(:class="$style.noitemListContainer" v-if="setting.search.isShowHotSearch || (setting.search.isShowHistorySearch && setting.search.isShowHistorySearch.length)")
+          dl(:class="[$style.noitemList, $style.noitemHotSearchList]" v-if="setting.search.isShowHotSearch")
+            dt(:class="$style.noitemListTitle") {{$t('search__hot_search')}}
+            dd(:class="$style.noitemListItem" @click="handleNoitemSearch(item)" v-for="item in hotSearchList") {{item}}
+          dl(:class="$style.noitemList" v-if="setting.search.isShowHistorySearch && historyList.length")
+            dt(:class="$style.noitemListTitle")
+              span {{$t('history_search')}}
+              span(:class="$style.historyClearBtn" @click="clearHistory" :tips="$t('history_clear')")
+                svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
+                  use(xlink:href='#icon-eraser')
+            dd(:class="$style.noitemListItem" v-for="(item, index) in historyList" @contextmenu="removeHistory(index)" :key="index + item" @click="handleNoitemSearch(item)" :tips="$t('history_remove')") {{item}}
+        div(v-else :class="$style.noitem_list")
+          p {{$t('search__welcome')}}
+  //- common-flow-btn(:show="isShowEditBtn && (searchSourceId == 'all' || assertApiSupport(searchSourceId))" :remove-btn="false" @btn-click="handleFlowBtnClick")
+  teleport(to="#view")
+    common-download-modal(v-model:show="isShowDownload" :musicInfo="musicInfo")
+    common-download-multiple-modal(v-model:show="isShowDownloadMultiple" :list="selectedData" @confirm="removeAllSelect")
+    common-list-add-modal(v-model:show="isShowListAdd" :musicInfo="musicInfo")
+    common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :musicList="selectedData" @confirm="removeAllSelect")
+  base-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
 </template>
 
 <script>
 import { mapGetters, mapActions, mapMutations } from 'vuex'
-import { scrollTo, clipboardWriteText, assertApiSupport, openUrl } from '../utils'
-import musicSdk from '../utils/music'
+import { scrollTo, clipboardWriteText, assertApiSupport, openUrl } from '@renderer/utils'
+import musicSdk from '@renderer/utils/music'
+import { defaultList } from '@renderer/core/share/list'
+import { getList } from '@renderer/core/share/utils'
+
 export default {
   name: 'Search',
   data() {
@@ -169,31 +173,30 @@ export default {
   computed: {
     ...mapGetters(['userInfo', 'setting']),
     ...mapGetters('search', ['sourceList', 'allList', 'sources', 'historyList']),
-    ...mapGetters('list', ['defaultList']),
     listItemMenu() {
       return [
         {
-          name: this.$t('view.search.list_play'),
+          name: this.$t('list__play'),
           action: 'play',
           disabled: !this.listMenu.itemMenuControl.play,
         },
         {
-          name: this.$t('view.search.list_download'),
+          name: this.$t('list__download'),
           action: 'download',
           disabled: !this.listMenu.itemMenuControl.download,
         },
         {
-          name: this.$t('view.search.list_play_later'),
+          name: this.$t('list__play_later'),
           action: 'playLater',
           disabled: !this.listMenu.itemMenuControl.playLater,
         },
         {
-          name: this.$t('view.search.list_add_to'),
+          name: this.$t('list__add_to'),
           action: 'addTo',
           disabled: !this.listMenu.itemMenuControl.addTo,
         },
         {
-          name: this.$t('view.search.list_source_detail'),
+          name: this.$t('list__source_detail'),
           action: 'sourceDetail',
           disabled: !this.listMenu.itemMenuControl.sourceDetail,
         },
@@ -205,6 +208,7 @@ export default {
     hotSearchList() {
       return this.$store.getters['hotSearch/list'][this.setting.search.searchSource] || []
     },
+
   },
   methods: {
     ...mapMutations(['setSearchSource']),
@@ -217,18 +221,18 @@ export default {
       getHotSearch: 'getList',
     }),
     listenEvent() {
-      window.eventHub.$on('key_shift_down', this.handle_key_shift_down)
-      window.eventHub.$on('key_shift_up', this.handle_key_shift_up)
-      window.eventHub.$on('key_mod_down', this.handle_key_mod_down)
-      window.eventHub.$on('key_mod_up', this.handle_key_mod_up)
-      window.eventHub.$on('key_mod+a_down', this.handle_key_mod_a_down)
+      window.eventHub.on('key_shift_down', this.handle_key_shift_down)
+      window.eventHub.on('key_shift_up', this.handle_key_shift_up)
+      window.eventHub.on('key_mod_down', this.handle_key_mod_down)
+      window.eventHub.on('key_mod_up', this.handle_key_mod_up)
+      window.eventHub.on('key_mod+a_down', this.handle_key_mod_a_down)
     },
     unlistenEvent() {
-      window.eventHub.$off('key_shift_down', this.handle_key_shift_down)
-      window.eventHub.$off('key_shift_up', this.handle_key_shift_up)
-      window.eventHub.$off('key_mod_down', this.handle_key_mod_down)
-      window.eventHub.$off('key_mod_up', this.handle_key_mod_up)
-      window.eventHub.$off('key_mod+a_down', this.handle_key_mod_a_down)
+      window.eventHub.off('key_shift_down', this.handle_key_shift_down)
+      window.eventHub.off('key_shift_up', this.handle_key_shift_up)
+      window.eventHub.off('key_mod_down', this.handle_key_mod_down)
+      window.eventHub.off('key_mod_up', this.handle_key_mod_up)
+      window.eventHub.off('key_mod+a_down', this.handle_key_mod_a_down)
     },
     handle_key_shift_down() {
       if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
@@ -349,12 +353,12 @@ export default {
       let targetSong = this.listInfo.list[index]
       // if (!targetSong || !this.assertApiSupport(targetSong.source)) return
       this.listAdd({ id: 'default', musicInfo: targetSong })
-      let targetIndex = this.defaultList.list.findIndex(
+      let targetIndex = getList(defaultList.id).list.findIndex(
         s => s.songmid === targetSong.songmid,
       )
       if (targetIndex > -1) {
         this.setList({
-          list: this.defaultList,
+          list: defaultList.id,
           index: targetIndex,
         })
       }
@@ -362,15 +366,6 @@ export default {
     handleTogglePage(page) {
       this.handleSearch(this.text, page)
     },
-    handleAddDownload(type) {
-      this.createDownload({ musicInfo: this.musicInfo, type })
-      this.isShowDownload = false
-    },
-    handleAddDownloadMultiple(type) {
-      this.createDownloadMultiple({ list: this.filterList(this.selectedData), type })
-      this.removeAllSelect()
-      this.isShowDownloadMultiple = false
-    },
     handleSelectAllData() {
       this.removeAllSelect()
       this.selectedData = [...this.listInfo.list]
@@ -400,13 +395,6 @@ export default {
           ? [...list]
           : []
     },
-    handleListAddModalClose() {
-      this.isShowListAdd = false
-    },
-    handleListAddMultipleModalClose(isClearSelect) {
-      if (isClearSelect) this.removeAllSelect()
-      this.isShowListAddMultiple = false
-    },
     handleContextMenu(event) {
       if (!event.target.classList.contains('select')) return
       event.stopImmediatePropagation()
@@ -444,10 +432,18 @@ export default {
       let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
       if (dom_selected) dom_selected.classList.remove('selected')
       this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
-      let dom_td = event.target.closest('td')
       this.listMenu.rightClickItemIndex = index
-      this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
-      this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
+      let dom_container = event.target.closest('.' + this.$style.search)
+      const getOffsetValue = (target, x = 0, y = 0) => {
+        if (target === dom_container) return { x, y }
+        if (!target) return { x: 0, y: 0 }
+        x += target.offsetLeft
+        y += target.offsetTop
+        return getOffsetValue(target.offsetParent, x, y)
+      }
+      let { x, y } = getOffsetValue(event.target)
+      this.listMenu.menuLocation.x = x + event.offsetX
+      this.listMenu.menuLocation.y = y + event.offsetY - this.$refs.dom_scrollContent.scrollTop
       this.$nextTick(() => {
         this.listMenu.isShowItemMenu = true
       })
@@ -681,7 +677,7 @@ export default {
 }
 
 each(@themes, {
-  :global(#container.@{value}) {
+  :global(#root.@{value}) {
     .labelSource {
       color: ~'@{color-@{value}-theme}';
     }

src/renderer/views/list/List.vue

@@ -0,0 +1,340 @@
+<template>
+<div id="my-list" :class="$style.container" @click="handleContainerClick" v-if="isInitedList">
+  <Lists :list-id="listId" @show-menu="$refs.musicList.hideMenu()" ref="lists" />
+  <MusicList :list-id="listId" @show-menu="$refs.lists.hideListsMenu()" ref="musicList" />
+</div>
+
+</template>
+
+<script>
+import { getListPrevSelectId } from '@renderer/utils/data'
+import { isInitedList } from '@renderer/core/share/list'
+import { getList } from '@renderer/core/share/utils'
+
+import Lists from './components/Lists'
+import MusicList from './components/MusicList'
+
+export default {
+  name: 'List',
+  components: {
+    Lists,
+    MusicList,
+  },
+  setup() {
+    return {
+      isInitedList,
+    }
+  },
+  data() {
+    return {
+      listId: null,
+      focusTarget: 'listDetail',
+    }
+  },
+  beforeRouteUpdate(to, from) {
+    // console.log(to, from)
+    let id = to.query.id
+    if (id == null) return
+    if (!getList(id)) {
+      id = this.$store.state.list.defaultList.id
+      this.handleListToggle(id)
+    }
+    this.listId = id
+    const scrollIndex = to.query.scrollIndex
+    if (from.query.id == to.query.id) {
+      if (!scrollIndex) return
+      this.$nextTick(() => {
+        this.$refs.musicList.restoreScroll(scrollIndex, true)
+
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: 'list',
+            query: {
+              id,
+            },
+          })
+        })
+      })
+    }
+  },
+  beforeRouteLeave(to, from) {
+    this.$refs.musicList.saveListPosition()
+  },
+  created() {
+    let id = this.$route.query.id
+    if (!id) {
+      id = getListPrevSelectId() || this.$store.state.list.defaultList.id
+      this.handleListToggle(id)
+    }
+    this.listId = id
+  },
+  methods: {
+    handleListToggle(id) {
+      if (id == this.listId) return
+      this.$router.replace({
+        path: 'list',
+        query: { id },
+      }).catch(_ => _)
+    },
+  },
+}
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.container {
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+
+@lists-item-height: 36px;
+.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, opacity;
+  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;
+  }
+  &.fetching {
+    opacity: .5;
+  }
+  &.editing {
+    padding: 0 10px;
+    background-color: @color-theme_2-hover;
+    .listsLabel {
+      display: none;
+    }
+    .listsInput {
+      display: block;
+    }
+  }
+}
+.listsLabel {
+  display: block;
+  height: @lists-item-height;
+  padding: 0 10px;
+  font-size: 13px;
+  line-height: @lists-item-height;
+  .mixin-ellipsis-1;
+}
+.listsInput {
+  width: 100%;
+  height: @lists-item-height;
+  border: none;
+  padding: 0;
+  // padding-bottom: 1px;
+  line-height: @lists-item-height;
+  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: -@lists-item-height;
+  z-index: -1;
+}
+
+.list {
+  overflow: hidden;
+  height: 100%;
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
+  // .noItem {
+
+  // }
+}
+.content {
+  min-height: 0;
+  font-size: 14px;
+  display: flex;
+  flex-flow: column nowrap;
+  // table {
+  //   position: relative;
+  //   thead {
+  //     position: fixed;
+  //     width: 100%;
+  //     th {
+  //       width: 100%;
+  //     }
+  //   }
+  // }
+  &.copying {
+    .no-select {
+      display: none;
+    }
+  }
+}
+.thead {
+  flex: none;
+  tr > th:first-child {
+    color: @color-theme_2-font-label;
+    // padding-left: 10px;
+  }
+}
+:global(.list) {
+  flex: auto;
+  :global(.list-item) {
+    &.active {
+      color: @color-btn;
+    }
+  }
+  :global(.list-item-cell) {
+    font-size: 12px !important;
+
+    &:first-child {
+      // padding-left: 10px;
+      font-size: 11px !important;
+      color: @color-theme_2-font-label !important;
+    }
+  }
+}
+
+.labelSource {
+  color: @color-theme;
+  padding: 5px;
+  font-size: .8em;
+  line-height: 1;
+  opacity: .75;
+  display: inline-block;
+}
+
+.disabled {
+  opacity: .5;
+}
+
+.no-item {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+
+  p {
+    font-size: 24px;
+    color: @color-theme_2-font-label;
+  }
+}
+
+each(@themes, {
+  :global(#root.@{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}';
+    }
+    :global(.list) {
+      :global(.list-item) {
+        &.active {
+          color: ~'@{color-@{value}-btn}';
+        }
+      }
+      :global(.list-item-cell) {
+        &:first-child {
+          color: ~'@{color-@{value}-theme_2-font-label}' !important;
+        }
+      }
+    }
+    .labelSource {
+      color: ~'@{color-@{value}-theme}';
+    }
+    .no-item {
+      p {
+        color: ~'@{color-@{value}-theme_2-font-label}';
+      }
+    }
+  }
+})
+
+</style>

src/renderer/views/list/components/DuplicateMusicModal.vue

@@ -0,0 +1,259 @@
+<template>
+<material-modal :show="visible" @close="$emit('update:visible', false)" bg-close="bg-close">
+  <div :class="$style.header">
+    <h2>{{listInfo.name}}</h2>
+  </div>
+  <main class="scroll" :class="$style.main">
+    <ul ref="dom_list" v-if="duplicateList.length" :class="$style.list">
+      <li v-for="(item, index) in duplicateList" :key="item.songmid" :class="$style.listItem">
+        <div :class="$style.num">{{item.index + 1}}</div>
+        <div :class="$style.text">
+          <h3 :class="$style.text">{{item.musicInfo.name}} - {{item.musicInfo.singer}}</h3>
+          <h3 v-if="item.musicInfo.albumName" :class="[$style.text, $style.albumName]">{{item.musicInfo.albumName}}</h3>
+        </div>
+        <div :class="$style.label">{{item.musicInfo.source}}</div>
+        <div :class="$style.label">{{item.musicInfo.interval}}</div>
+        <div :class="$style.btns">
+          <button type="button" @click="handlePlay(index)" :class="$style.btn">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="50%" viewBox="0 0 287.386 287.386" space="preserve" v-once>
+              <use xlink:href="#icon-testPlay"></use>
+            </svg>
+          </button>
+          <button type="button" @click="handleRemove(index)" :class="$style.btn">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="50%" viewBox="0 0 212.982 212.982" space="preserve" v-once>
+              <use xlink:href="#icon-delete"></use>
+            </svg>
+          </button>
+        </div>
+      </li>
+    </ul>
+    <div :class="$style.noItem" v-else>
+      <p v-text="$t('no_item')"></p>
+    </div>
+  </main>
+</material-modal>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    listInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  watch: {
+    visible(n) {
+      if (n) this.handleFilterList()
+    },
+  },
+  data() {
+    return {
+      duplicateList: [],
+    }
+  },
+  mounted() {
+    if (this.listInfo.list) this.handleFilterList()
+  },
+  methods: {
+    ...mapMutations('list', [
+      'listRemove',
+    ]),
+    ...mapMutations('player', {
+      setPlayList: 'setList',
+    }),
+    handleFilterList() {
+      const listMap = new Map()
+      const duplicateList = []
+      this.listInfo.list.forEach((musicInfo, index) => {
+        const musicInfoName = musicInfo.name.toLowerCase().trim()
+        if (listMap.has(musicInfoName)) {
+          const targetMusicInfo = listMap.get(musicInfoName)
+          duplicateList.push({
+            index: this.listInfo.list.indexOf(targetMusicInfo),
+            musicInfo: targetMusicInfo,
+          }, {
+            index,
+            musicInfo,
+          })
+        } else {
+          listMap.set(musicInfoName, musicInfo)
+        }
+      })
+
+      this.duplicateList = duplicateList
+    },
+    handleRemove(index) {
+      const { musicInfo: targetMusicInfo } = this.duplicateList.splice(index, 1)[0]
+      // let duplicates = []
+      // for (let index = 0; index < this.duplicateList.length; index++) {
+      //   const { musicInfo } = this.duplicateList[index]
+      //   if (musicInfo.name == targetMusicInfo.name) {
+      //     duplicates.push(index)
+      //     if (duplicates.length > 1) break
+      //   }
+      // }
+      // console.log(duplicates)
+      // if (duplicates.length < 2) this.duplicateList.splice(duplicates[0], 1)
+
+      this.listRemove({ listId: this.listInfo.id, id: targetMusicInfo.songmid })
+
+      this.handleFilterList()
+    },
+    handlePlay(index) {
+      const { index: musicInfoIndex } = this.duplicateList[index]
+      this.setPlayList({ listId: this.listInfo.id, index: musicInfoIndex })
+    },
+  },
+}
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.header {
+  flex: none;
+  padding: 15px;
+  text-align: center;
+}
+.main {
+  min-height: 200px;
+  width: 460px;
+}
+
+.list {
+  // background-color: @color-search-form-background;
+  font-size: 13px;
+  transition-property: height;
+  position: relative;
+  .listItem {
+    position: relative;
+    padding: 8px 5px;
+    transition: background-color .2s ease;
+    line-height: 1.3;
+    // overflow: hidden;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+
+    &:hover {
+      background-color: @color-theme_2-hover;
+    }
+    // border-radius: 4px;
+    // &:last-child {
+    //   border-bottom-left-radius: 4px;
+    //   border-bottom-right-radius: 4px;
+    // }
+  }
+}
+
+.num {
+  flex: none;
+  font-size: 12px;
+  width: 30px;
+  text-align: center;
+  color: @color-theme_2-font-label;
+}
+
+.text {
+  flex: auto;
+  padding-left: 5px;
+  .mixin-ellipsis-1;
+}
+.albumName {
+  font-size: 12px;
+  opacity: 0.6;
+  .mixin-ellipsis-1;
+}
+.label {
+  flex: none;
+  font-size: 12px;
+  opacity: 0.5;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  // transform: rotate(45deg);
+  // background-color:
+}
+.btns {
+  flex: none;
+  font-size: 12px;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+}
+.btn {
+  background-color: transparent;
+  border: none;
+  border-radius: @form-radius;
+  margin-right: 5px;
+  cursor: pointer;
+  padding: 4px 7px;
+  color: @color-btn;
+  outline: none;
+  transition: background-color 0.2s ease;
+  line-height: 0;
+  &:last-child {
+    margin-right: 0;
+  }
+
+  svg {
+    height: 16px;
+  }
+
+  &:hover {
+    background-color: @color-theme_2-hover;
+  }
+  &:active {
+    background-color: @color-theme_2-active;
+  }
+}
+
+.no-item {
+  position: relative;
+  height: 200px;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+
+  p {
+    font-size: 16px;
+    color: @color-theme_2-font-label;
+  }
+}
+
+each(@themes, {
+  :global(#root.@{value}) {
+    .listItem {
+      &:hover {
+        background-color: ~'@{color-@{value}-theme_2-hover}';
+      }
+    }
+    .num {
+      color: ~'@{color-@{value}-theme_2-font-label}';
+    }
+    .btn {
+      color: ~'@{color-@{value}-btn}';
+      &:hover {
+        background-color: ~'@{color-@{value}-theme_2-hover}';
+      }
+      &:active {
+        background-color: ~'@{color-@{value}-theme_2-active}';
+      }
+    }
+    .no-item {
+      p {
+        color: ~'@{color-@{value}-theme_2-font-label}';
+      }
+    }
+  }
+})
+
+</style>

src/renderer/views/list/components/ListSortModal.vue

@@ -0,0 +1,126 @@
+<template>
+<material-modal :show="show" @close="handleClose" @after-enter="$refs.input.focus()">
+  <main :class="$style.main">
+    <h2>{{selectedNum > 0 ? $t('music_sort__title_multiple', { num: selectedNum }) : $t('music_sort__title', { name: musicInfo ? musicInfo.name : '' })}}</h2>
+    <base-input :class="$style.input"
+      type="number"
+      v-model="sortNum"
+      ref="input"
+      @submit="handleSubmit"
+      @blur="verify" :placeholder="$t('music_sort__input_tip')" />
+    <div :class="$style.footer">
+      <base-btn :class="$style.btn" @click="handleSubmit">{{$t('music_sort__btn_confirm')}}</base-btn>
+    </div>
+  </main>
+</material-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    musicInfo: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    selectedNum: {
+      type: Number,
+      default: 0,
+    },
+  },
+  emits: ['update:show', 'confirm'],
+  data() {
+    return {
+      sortNum: '',
+    }
+  },
+  watch: {
+    show(n) {
+      if (n) {
+        this.sortNum = ''
+      }
+    },
+  },
+  methods: {
+    handleClose() {
+      this.$emit('update:show', false)
+    },
+    verify() {
+      let num = /^[1-9]\d*/.exec(this.sortNum)
+      num = num ? parseInt(num[0]) : ''
+      this.sortNum = num.toString()
+      return num
+    },
+    handleSubmit() {
+      console.log('object')
+      let num = this.verify()
+      if (this.sortNum == '') return
+      this.handleClose()
+      this.$emit('confirm', num)
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.main {
+  padding: 0 15px;
+  max-width: 530px;
+  min-width: 280px;
+  display: flex;
+  flex-flow: column nowrap;
+  min-height: 0;
+  // max-height: 100%;
+  // overflow: hidden;
+  h2 {
+    font-size: 13px;
+    color: @color-theme_2-font;
+    line-height: 1.3;
+    word-break: break-all;
+    // text-align: center;
+    padding: 15px 0 8px;
+  }
+}
+
+.input {
+  // width: 100%;
+  // height: 26px;
+  padding: 8px 8px;
+}
+.footer {
+  margin: 20px 0 15px auto;
+}
+.btn {
+  // box-sizing: border-box;
+  // margin-left: 15px;
+  // margin-bottom: 15px;
+  // height: 36px;
+  // line-height: 36px;
+  // padding: 0 10px !important;
+  min-width: 70px;
+  // .mixin-ellipsis-1;
+
+  +.btn {
+    margin-left: 10px;
+  }
+}
+
+each(@themes, {
+  :global(#root.@{value}) {
+    .main {
+      h2 {
+        color: ~'@{color-@{value}-theme_2-font}';
+      }
+    }
+  }
+})
+
+</style>

src/renderer/views/list/components/Lists.vue

@@ -0,0 +1,553 @@
+<template>
+<div :class="$style.lists" ref="dom_lists">
+  <div :class="$style.listHeader">
+    <h2 :class="$style.listsTitle">{{$t('my_list')}}</h2>
+    <button :class="$style.listsAdd" @click="handleShowNewList" :tips="$t('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"></use>
+      </svg>
+    </button>
+  </div>
+  <ul class="scroll" :class="$style.listsContent" ref="dom_lists_list">
+    <li :class="[$style.listsItem, {[$style.active]: defaultList.id == listId}]" :tips="defaultList.name"
+      @contextmenu="handleListsItemRigthClick($event, -2)" @click="handleListToggle(defaultList.id)"
+    >
+      <span :class="$style.listsLabel">{{defaultList.name}}</span>
+    </li>
+    <li :class="[$style.listsItem, {[$style.active]: loveList.id == listId}]" :tips="loveList.name"
+      @contextmenu="handleListsItemRigthClick($event, -1)" @click="handleListToggle(loveList.id)">
+      <span :class="$style.listsLabel">{{loveList.name}}</span>
+    </li>
+    <li class="user-list"
+      :class="[$style.listsItem, {[$style.active]:item.id == listId}, {[$style.clicked]: listsData.rightClickItemIndex == index}, {[$style.fetching]: fetchingListStatus[item.id]}]"
+      @contextmenu="handleListsItemRigthClick($event, index)" :tips="item.name" v-for="(item, index) in userLists" :key="item.id"
+    >
+      <span :class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)">{{item.name}}</span>
+      <input class="key-bind" :class="$style.listsInput" @contextmenu.stop type="text"
+        @keyup.enter="handleListsSave(index, $event)" @blur="handleListsSave(index, $event)" :value="item.name" :placeholder="item.name"/>
+    </li>
+    <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 class="key-bind" :class="$style.listsInput" @contextmenu.stop ref="dom_listsNewInput" type="text" @keyup.enter="handleListsCreate"
+          @blur="handleListsCreate" :placeholder="$t('lists__new_list_input')"/>
+      </li>
+    </transition>
+  </ul>
+  <base-menu :menus="listsItemMenu" :location="listsData.menuLocation" item-name="name" :isShow="listsData.isShowItemMenu" @menu-click="handleListsItemMenuClick" />
+  <DuplicateMusicModal v-model:visible="isShowDuplicateMusicModal" :list-info="selectedListInfo" />
+</div>
+</template>
+
+<script>
+import { mapMutations, mapActions } from 'vuex'
+import { openSaveDir, saveLxConfigFile, selectDir, readLxConfigFile, filterFileName } from '@renderer/utils'
+import musicSdk from '@renderer/utils/music'
+import DuplicateMusicModal from './DuplicateMusicModal'
+import { defaultList, loveList, userLists } from '@renderer/core/share/list'
+import { computed } from '@renderer/utils/vueTools'
+import { getList } from '@renderer/core/share/utils'
+
+export default {
+  name: 'ListLists',
+  props: {
+    listId: {
+      type: [String, Number],
+      required: true,
+    },
+  },
+  components: {
+    DuplicateMusicModal,
+  },
+  setup() {
+    const lists = computed(() => [defaultList, loveList, ...userLists])
+    return {
+      defaultList,
+      loveList,
+      userLists,
+      lists,
+    }
+  },
+  emits: ['show-menu'],
+  data() {
+    return {
+      isShowListSortModal: false,
+      isShowDuplicateMusicModal: false,
+      listsData: {
+        isShowItemMenu: false,
+        itemMenuControl: {
+          rename: true,
+          duplicate: true,
+          import: true,
+          export: true,
+          sync: false,
+          moveup: true,
+          movedown: true,
+          remove: true,
+        },
+        rightClickItemIndex: -1,
+        menuLocation: {
+          x: 0,
+          y: 0,
+        },
+        isShowNewList: false,
+        isNewLeave: false,
+      },
+      fetchingListStatus: {},
+      selectedListInfo: {},
+    }
+  },
+  computed: {
+    listsItemMenu() {
+      return [
+        {
+          name: this.$t('lists__rename'),
+          action: 'rename',
+          disabled: !this.listsData.itemMenuControl.rename,
+        },
+        {
+          name: this.$t('lists__sync'),
+          action: 'sync',
+          disabled: !this.listsData.itemMenuControl.sync,
+        },
+        {
+          name: this.$t('lists__duplicate'),
+          action: 'duplicate',
+          disabled: !this.listsData.itemMenuControl.duplicate,
+        },
+        {
+          name: this.$t('lists__import'),
+          action: 'import',
+          disabled: !this.listsData.itemMenuControl.export,
+        },
+        {
+          name: this.$t('lists__export'),
+          action: 'export',
+          disabled: !this.listsData.itemMenuControl.export,
+        },
+        {
+          name: this.$t('lists__moveup'),
+          action: 'moveup',
+          disabled: !this.listsData.itemMenuControl.moveup,
+        },
+        {
+          name: this.$t('lists__movedown'),
+          action: 'movedown',
+          disabled: !this.listsData.itemMenuControl.movedown,
+        },
+        {
+          name: this.$t('lists__remove'),
+          action: 'remove',
+          disabled: !this.listsData.itemMenuControl.remove,
+        },
+      ]
+    },
+  },
+  watch: {
+    listId(id) {
+      this.setPrevSelectListId(id)
+      this.isShowListSortModal = false
+    },
+    lists(lists) {
+      if (lists.some(l => l.id == this.listId)) return
+      this.$router.replace({
+        path: 'list',
+        query: {
+          id: this.defaultList.id,
+        },
+      })
+    },
+  },
+  created() {
+    this.setPrevSelectListId(this.listId)
+  },
+  methods: {
+    ...mapMutations('list', [
+      'setUserListName',
+      'createUserList',
+      'moveupUserList',
+      'movedownUserList',
+      'removeUserList',
+      'setPrevSelectListId',
+      'setList',
+    ]),
+    ...mapActions('songList', ['getListDetailAll']),
+    ...mapActions('leaderboard', {
+      getBoardListAll: 'getListAll',
+    }),
+    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()
+      const targetList = userLists[index]
+      if (name.length) return this.setUserListName({ id: targetList.id, name })
+      event.target.value = targetList.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
+    },
+    handleListToggle(id) {
+      if (id == this.listId) return
+      this.$router.replace({
+        path: 'list',
+        query: { id },
+      }).catch(_ => _)
+    },
+    handleListsItemRigthClick(event, index) {
+      let source
+      switch (index) {
+        case -1:
+        case -2:
+          this.listsData.itemMenuControl.rename = false
+          this.listsData.itemMenuControl.remove = false
+          this.listsData.itemMenuControl.sync = false
+          this.listsData.itemMenuControl.moveup = false
+          this.listsData.itemMenuControl.movedown = false
+          break
+        default:
+          this.listsData.itemMenuControl.rename = true
+          this.listsData.itemMenuControl.remove = true
+          source = userLists[index].source
+          this.listsData.itemMenuControl.sync = !!source && !!musicSdk[source]?.songList
+          this.listsData.itemMenuControl.moveup = index > 0
+          this.listsData.itemMenuControl.movedown = index < userLists.length - 1
+          break
+      }
+      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.$emit('show-menu')
+      this.$nextTick(() => {
+        this.listsData.isShowItemMenu = true
+      })
+    },
+    hideListsMenu() {
+      this.listsData.isShowItemMenu = false
+      this.listsData.rightClickItemIndex = -1
+    },
+    handleListsItemMenuClick(action) {
+      // console.log(action)
+      let index = this.listsData.rightClickItemIndex
+      this.hideListsMenu()
+      this.listsData.isShowItemMenu = false
+      let dom
+      switch (action && action.action) {
+        case 'rename':
+          dom = this.$refs.dom_lists_list.querySelectorAll('.user-list')[index]
+          this.$nextTick(() => {
+            dom.classList.add(this.$style.editing)
+            dom.querySelector('input').focus()
+          })
+          break
+        case 'duplicate':
+          this.selectedListInfo = this.getTargetListInfo(index)
+          this.isShowDuplicateMusicModal = true
+          break
+        case 'import':
+          this.handleImportList(index)
+          break
+        case 'export':
+          this.handleExportList(index)
+          break
+        case 'sync':
+          this.handleSyncSourceList(index)
+          break
+        case 'moveup':
+          this.moveupUserList({ id: userLists[index].id })
+          break
+        case 'movedown':
+          this.movedownUserList({ id: userLists[index].id })
+          break
+        case 'remove':
+          this.$dialog.confirm({
+            message: this.$t('lists__remove_tip', { name: userLists[index].name }),
+            confirmButtonText: this.$t('lists__remove_tip_button'),
+          }).then(isRemove => {
+            if (!isRemove) return
+            this.removeUserList({ id: userLists[index].id })
+          })
+          break
+      }
+    },
+    fetchList(id, source, sourceListId) {
+      this.fetchingListStatus[id] = true
+
+      let promise
+      if (/board__/.test(sourceListId)) {
+        const id = sourceListId.replace(/board__/, '')
+        promise = this.getBoardListAll(id)
+      } else {
+        promise = this.getListDetailAll({ source, id: sourceListId })
+      }
+      return promise.finally(() => {
+        this.fetchingListStatus[id] = false
+      })
+    },
+    async handleSyncSourceList(index) {
+      const targetListInfo = userLists[index]
+      const list = await this.fetchList(targetListInfo.id, targetListInfo.source, targetListInfo.sourceListId)
+      // console.log(targetListInfo.list.length, list.length)
+      this.setList({
+        ...targetListInfo,
+        list,
+      })
+    },
+    getTargetListInfo(index) {
+      let list
+      switch (index) {
+        case -2:
+          list = { ...defaultList, list: getList(defaultList.id) }
+          break
+        case -1:
+          list = { ...loveList, list: getList(loveList.id) }
+          break
+        default:
+          list = userLists[index]
+          if (!list) return null
+          list = { ...list, list: getList(list.id) }
+          break
+      }
+      return list
+    },
+    handleExportList(index) {
+      const list = this.getTargetListInfo(index)
+      if (!list) return
+      openSaveDir({
+        title: this.$t('lists__export_part_desc'),
+        defaultPath: `lx_list_part_${filterFileName(list.name)}.lxmc`,
+      }).then(async result => {
+        if (result.canceled) return
+        const data = JSON.parse(JSON.stringify({
+          type: 'playListPart',
+          data: list,
+        }))
+        for await (const item of data.data.list) {
+          if (item.otherSource) delete item.otherSource
+          if (item.lrc) delete item.lrc
+        }
+        saveLxConfigFile(result.filePath, data)
+      })
+    },
+    handleImportList(index) {
+      const list = this.getTargetListInfo(index)
+
+      selectDir({
+        title: this.$t('lists__import_part_desc'),
+        properties: ['openFile'],
+        filters: [
+          { name: 'Play List Part', extensions: ['json', 'lxmc'] },
+          { name: 'All Files', extensions: ['*'] },
+        ],
+      }).then(async result => {
+        if (result.canceled) return
+        let listData
+        try {
+          listData = await readLxConfigFile(result.filePaths[0])
+        } catch (error) {
+          return
+        }
+        if (listData.type !== 'playListPart') return
+        const targetList = this.lists.find(l => l.id == listData.data.id)
+        if (targetList) {
+          const confirm = await this.$dialog.confirm({
+            message: this.$t('lists__import_part_confirm', { importName: listData.data.name, localName: targetList.name }),
+            cancelButtonText: this.$t('lists__import_part_button_cancel'),
+            confirmButtonText: this.$t('lists__import_part_button_confirm'),
+          })
+          if (confirm) {
+            listData.data.name = list.name
+            this.setList({
+              name: listData.data.name,
+              id: listData.data.id,
+              list: listData.data.list,
+              source: listData.data.source,
+              sourceListId: listData.data.sourceListId,
+            })
+            return
+          }
+          listData.data.id += `__${Date.now()}`
+        }
+        this.createUserList({
+          name: listData.data.name,
+          id: listData.data.id,
+          list: listData.data.list,
+          source: listData.data.source,
+          sourceListId: listData.data.sourceListId,
+          position: Math.max(index, -1),
+        })
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+@lists-item-height: 36px;
+.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, opacity;
+  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;
+  }
+  &.fetching {
+    opacity: .5;
+  }
+  &.editing {
+    padding: 0 10px;
+    background-color: @color-theme_2-hover;
+    .listsLabel {
+      display: none;
+    }
+    .listsInput {
+      display: block;
+    }
+  }
+}
+.listsLabel {
+  display: block;
+  height: @lists-item-height;
+  padding: 0 10px;
+  font-size: 13px;
+  line-height: @lists-item-height;
+  .mixin-ellipsis-1;
+}
+.listsInput {
+  width: 100%;
+  height: @lists-item-height;
+  border: none;
+  padding: 0;
+  // padding-bottom: 1px;
+  line-height: @lists-item-height;
+  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: -@lists-item-height;
+  z-index: -1;
+}
+
+each(@themes, {
+  :global(#root.@{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}';
+    }
+  }
+})
+
+</style>

src/renderer/views/list/components/MusicList/index.vue

@@ -0,0 +1,370 @@
+<template lang="pug">
+div(:class="$style.list")
+  //- transition
+  div.thead(:class="$style.thead")
+    table
+      thead
+        tr
+          th.nobreak.center(:class="$style.th" style="width: 5%;") #
+          th.nobreak(:class="$style.th") {{$t('music_name')}}
+          th.nobreak(:class="$style.th" style="width: 22%;") {{$t('music_singer')}}
+          th.nobreak(:class="$style.th" style="width: 22%;") {{$t('music_album')}}
+          th.nobreak(:class="$style.th" style="width: 9%;") {{$t('music_time')}}
+          th.nobreak(:class="$style.th" style="width: 15%;") {{$t('action')}}
+  div(v-show="list.length" :class="$style.content" ref="dom_listContent")
+    base-virtualized-list(:list="list" key-name="songmid" ref="listRef" #default="{ item, index }" :item-height="listItemHeight"
+      @scroll="saveListPosition" containerClass="scroll" contentClass="list" @contextmenu.capture="handleListRightClick")
+      div.list-item(@click="handleListItemClick($event, index)"
+        :class="[{ [$style.active]: playerInfo.isPlayList && playerInfo.playIndex === index }, { selected: selectedIndex == index || rightClickSelectedIndex == index }, { active: selectedList.includes(item) }, { [$style.disabled]: !assertApiSupport(item.source) }]"
+        @contextmenu="handleListItemRightClick($event, index)")
+        div.list-item-cell.nobreak.center(style="flex: 0 0 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
+        div.list-item-cell.auto(:tips="item.name")
+          span.select {{item.name}}
+          span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
+        div.list-item-cell(style="flex: 0 0 22%;" :tips="item.singer")
+          span.select {{item.singer}}
+        div.list-item-cell(style="flex: 0 0 22%;" :tips="item.albumName")
+          span.select {{item.albumName}}
+        div.list-item-cell(style="flex: 0 0 9%;")
+          span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
+        div.list-item-cell(style="flex: 0 0 15%; padding-left: 0; padding-right: 0;")
+          material-list-buttons(:index="index" @btn-click="handleListBtnClick" :download-btn="assertApiSupport(item.source)")
+  div(:class="$style.noItem" v-show="!list.length")
+    p(v-text="$t('no_item')")
+  //- material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick")
+  teleport(to="#view")
+    common-download-modal(v-model:show="isShowDownload" :musicInfo="selectedDownloadMusicInfo")
+    common-download-multiple-modal(v-model:show="isShowDownloadMultiple" :list="selectedList" @confirm="removeAllSelect")
+    common-list-add-modal(v-model:show="isShowListAdd" :is-move="isMove" :musicInfo="selectedAddMusicInfo" :exclude-list-id="excludeListIds")
+    common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :is-move="isMoveMultiple" :musicList="selectedList" @confirm="removeAllSelect" :exclude-list-id="excludeListIds")
+    search-list(:list="list" @action="handleMusicSearchAction" :visible="isShowSearchBar")
+    list-sort-modal(v-model:show="isShowListSortModal" :music-info="selectedSortMusicInfo" :selected-num="selectedNum" @confirm="sortMusic")
+  base-menu(:menus="menus" :location="menuLocation" item-name="name" :isShow="isShowItemMenu" @menu-click="handleMenuClick")
+</template>
+
+<script>
+import { clipboardWriteText, assertApiSupport } from '@renderer/utils'
+import { useCssModule } from '@renderer/utils/vueTools'
+import SearchList from '../SearchList'
+import ListSortModal from '../ListSortModal'
+import useListInfo from './useListInfo'
+import useList from './useList'
+import useMenu from './useMenu'
+import usePlay from './usePlay'
+import useMusicDownload from './useMusicDownload'
+import useMusicAdd from './useMusicAdd'
+import useSort from './useSort'
+import useMusicActions from './useMusicActions'
+import useSearch from './useSearch'
+import useListScroll from './useListScroll'
+export default {
+  name: 'MusicList',
+  props: {
+    listId: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ['show-menu'],
+  components: {
+    SearchList,
+    ListSortModal,
+  },
+  setup(props, { emit }) {
+    const styles = useCssModule()
+
+    const {
+      rightClickSelectedIndex,
+      selectedIndex,
+      dom_listContent,
+      listRef,
+      list,
+      playerInfo,
+      setSelectedIndex,
+      isShowSource,
+      setting,
+      excludeListIds,
+    } = useListInfo({ props })
+
+    const {
+      selectedList,
+      listItemHeight,
+      handleSelectData,
+      removeAllSelect,
+    } = useList({ list, setting, emit })
+
+    const {
+      handlePlayMusic,
+      handlePlayMusicLater,
+      doubleClickPlay,
+    } = usePlay({ props, selectedList, list, removeAllSelect })
+
+    const {
+      isShowListAdd,
+      isMove,
+      isShowListAddMultiple,
+      isMoveMultiple,
+      selectedAddMusicInfo,
+      handleShowMusicAddModal,
+      handleShowMusicMoveModal,
+    } = useMusicAdd({ selectedList, list })
+
+    const {
+      isShowDownload,
+      isShowDownloadMultiple,
+      selectedDownloadMusicInfo,
+      handleShowDownloadModal,
+    } = useMusicDownload({ selectedList, list })
+
+    const {
+      isShowListSortModal,
+      selectedNum,
+      selectedSortMusicInfo,
+      handleShowSortModal,
+      sortMusic,
+    } = useSort({ props, list, selectedList, removeAllSelect })
+
+    const {
+      handleSearch,
+      handleOpenMusicDetail,
+      handleCopyName,
+      handleRemoveMusic,
+    } = useMusicActions({ props, list, setting, removeAllSelect, selectedList })
+
+    const {
+      menus,
+      menuLocation,
+      isShowItemMenu,
+      showMenu,
+      hideMenu,
+      menuClick,
+    } = useMenu({
+      listRef,
+      assertApiSupport,
+      emit,
+
+      handleShowDownloadModal,
+      handlePlayMusic,
+      handlePlayMusicLater,
+      handleSearch,
+      handleShowMusicAddModal,
+      handleShowMusicMoveModal,
+      handleShowSortModal,
+      handleOpenMusicDetail,
+      handleCopyName,
+      handleRemoveMusic,
+    })
+
+    const {
+      isShowSearchBar,
+      searchList,
+      handleMusicSearchAction,
+    } = useSearch({
+      setSelectedIndex,
+      handlePlayMusic,
+      listRef,
+    })
+
+    const { saveListPosition, restoreScroll } = useListScroll({ props, listRef, list, setting })
+
+    const handleListItemClick = (event, index) => {
+      if (rightClickSelectedIndex.value > -1) return
+      handleSelectData(index)
+      doubleClickPlay(index)
+    }
+    const handleListItemRightClick = (event, index) => {
+      rightClickSelectedIndex.value = index
+      showMenu(event, list.value[index], index)
+    }
+    const handleMenuClick = (action) => {
+      let index = rightClickSelectedIndex.value
+      rightClickSelectedIndex.value = -1
+      menuClick(action, index)
+    }
+    const handleListRightClick = (event) => {
+      if (!event.target.classList.contains('select')) return
+      event.stopImmediatePropagation()
+      let classList = dom_listContent.value.classList
+      classList.add(styles.copying)
+      window.requestAnimationFrame(() => {
+        let str = window.getSelection().toString()
+        classList.remove(styles.copying)
+        str = str.split(/\n\n/).map(s => s.replace(/\n/g, '  ')).join('\n').trim()
+        if (!str.length) return
+        clipboardWriteText(str)
+      })
+    }
+    const handleListBtnClick = ({ action, index }) => {
+      switch (action) {
+        case 'download':
+          handleShowDownloadModal(index, true)
+          break
+        case 'play':
+          handlePlayMusic(index, true)
+          break
+        case 'search':
+          handleSearch(index)
+          break
+        case 'listAdd':
+          handleShowMusicAddModal(index, true)
+          break
+      }
+    }
+    const scrollToTop = () => {
+      listRef.value.scrollTo(0, true)
+    }
+
+    return {
+      listItemHeight,
+      handleListItemClick,
+      selectedList,
+      handleListItemRightClick,
+      removeAllSelect,
+      handleListBtnClick,
+      rightClickSelectedIndex,
+      selectedIndex,
+      dom_listContent,
+      listRef,
+      excludeListIds,
+
+      menus,
+      isShowItemMenu,
+      menuLocation,
+      handleMenuClick,
+      hideMenu,
+
+      handleListRightClick,
+      assertApiSupport,
+
+      isShowListAdd,
+      isMove,
+      isShowListAddMultiple,
+      isMoveMultiple,
+      selectedAddMusicInfo,
+
+      isShowListSortModal,
+      selectedNum,
+      selectedSortMusicInfo,
+      sortMusic,
+
+      isShowDownload,
+      isShowDownloadMultiple,
+      selectedDownloadMusicInfo,
+
+      scrollToTop,
+
+      isShowSearchBar,
+      searchList,
+      handleMusicSearchAction,
+
+      list,
+      playerInfo,
+
+      saveListPosition,
+      restoreScroll,
+      isShowSource,
+    }
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.list {
+  overflow: hidden;
+  height: 100%;
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
+}
+.content {
+  min-height: 0;
+  font-size: 14px;
+  display: flex;
+  flex-flow: column nowrap;
+  &.copying {
+    .no-select {
+      display: none;
+    }
+  }
+}
+
+.thead {
+  flex: none;
+}
+.th:first-child {
+  color: @color-theme_2-font-label;
+  // padding-left: 10px;
+}
+
+:global(.list) {
+  flex: auto;
+  :global(.list-item) {
+    &.active {
+      color: @color-btn;
+    }
+  }
+  :global(.list-item-cell) {
+    font-size: 12px !important;
+
+    &:first-child {
+      // padding-left: 10px;
+      font-size: 11px !important;
+      color: @color-theme_2-font-label !important;
+    }
+  }
+}
+
+.labelSource {
+  color: @color-theme;
+  padding: 5px;
+  font-size: .8em;
+  line-height: 1;
+  opacity: .75;
+  display: inline-block;
+}
+
+.disabled {
+  opacity: .5;
+}
+
+.no-item {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+
+  p {
+    font-size: 24px;
+    color: @color-theme_2-font-label;
+  }
+}
+
+each(@themes, {
+  :global(#root.@{value}) {
+    .th:first-child {
+      color: ~'@{color-@{value}-theme_2-font-label}' !important;
+    }
+    :global(.list) {
+      :global(.list-item) {
+        &.active {
+          color: ~'@{color-@{value}-btn}';
+        }
+      }
+    }
+    .labelSource {
+      color: ~'@{color-@{value}-theme}';
+    }
+    .no-item {
+      p {
+        color: ~'@{color-@{value}-theme_2-font-label}';
+      }
+    }
+  }
+})
+
+</style>

src/renderer/views/list/components/MusicList/useList.js

@@ -0,0 +1,104 @@
+import { computed, watch, ref, onBeforeUnmount } from '@renderer/utils/vueTools'
+import { windowSizeList } from '@renderer/core/share'
+
+const useKeyEvent = ({ handleSelectAllData }) => {
+  const keyEvent = {
+    isShiftDown: false,
+    isModDown: false,
+  }
+
+  const handle_key_shift_down = () => {
+    if (!keyEvent.isShiftDown) keyEvent.isShiftDown = true
+  }
+  const handle_key_shift_up = () => {
+    if (keyEvent.isShiftDown) keyEvent.isShiftDown = false
+  }
+  const handle_key_mod_down = () => {
+    if (!keyEvent.isModDown) keyEvent.isModDown = true
+  }
+  const handle_key_mod_up = () => {
+    if (keyEvent.isModDown) keyEvent.isModDown = false
+  }
+  const handle_key_mod_a_down = ({ event }) => {
+    if (event.target.tagName == 'INPUT') return
+    event.preventDefault()
+    if (event.repeat) return
+    keyEvent.isModDown = false
+    handleSelectAllData()
+  }
+
+  onBeforeUnmount(() => {
+    window.eventHub.off('key_shift_down', handle_key_shift_down)
+    window.eventHub.off('key_shift_up', handle_key_shift_up)
+    window.eventHub.off('key_mod_down', handle_key_mod_down)
+    window.eventHub.off('key_mod_up', handle_key_mod_up)
+    window.eventHub.off('key_mod+a_down', handle_key_mod_a_down)
+  })
+  window.eventHub.on('key_shift_down', handle_key_shift_down)
+  window.eventHub.on('key_shift_up', handle_key_shift_up)
+  window.eventHub.on('key_mod_down', handle_key_mod_down)
+  window.eventHub.on('key_mod_up', handle_key_mod_up)
+  window.eventHub.on('key_mod+a_down', handle_key_mod_a_down)
+
+  return keyEvent
+}
+
+export default ({ list, setting }) => {
+  const selectedList = ref([])
+
+  let lastSelectIndex = -1
+  const listItemHeight = computed(() => {
+    return parseInt(windowSizeList.find(item => item.id == setting.value.windowSizeId).fontSize) / 16 * 37
+  })
+
+  const removeAllSelect = () => {
+    selectedList.value = []
+  }
+  const handleSelectAllData = () => {
+    removeAllSelect()
+    selectedList.value = [...list.value]
+  }
+  const keyEvent = useKeyEvent({ handleSelectAllData })
+
+  const handleSelectData = clickIndex => {
+    if (keyEvent.isShiftDown) {
+      if (selectedList.value.length) {
+        removeAllSelect()
+        if (lastSelectIndex != clickIndex) {
+          let isNeedReverse = false
+          if (clickIndex < lastSelectIndex) {
+            let temp = lastSelectIndex
+            lastSelectIndex = clickIndex
+            clickIndex = temp
+            isNeedReverse = true
+          }
+          selectedList.value = list.value.slice(lastSelectIndex, clickIndex + 1)
+          if (isNeedReverse) selectedList.value.reverse()
+        }
+      } else {
+        selectedList.value.push(list.value[clickIndex])
+        lastSelectIndex = clickIndex
+      }
+    } else if (keyEvent.isModDown) {
+      lastSelectIndex = clickIndex
+      let item = list.value[clickIndex]
+      let index = selectedList.value.indexOf(item)
+      if (index < 0) {
+        selectedList.value.push(item)
+      } else {
+        selectedList.value.splice(index, 1)
+      }
+    } else if (selectedList.value.length) {
+      removeAllSelect()
+    }
+  }
+
+  watch(() => list, removeAllSelect)
+
+  return {
+    selectedList,
+    listItemHeight,
+    removeAllSelect,
+    handleSelectData,
+  }
+}

src/renderer/views/list/components/MusicList/useListInfo.js

@@ -0,0 +1,45 @@
+import { ref, watch, useRefGetter, computed } from '@renderer/utils/vueTools'
+import { playMusicInfo, playInfo } from '@renderer/core/share/player'
+import { getList } from '@renderer/core/share/utils'
+
+
+export default ({ props }) => {
+  const setting = useRefGetter('setting')
+
+  const rightClickSelectedIndex = ref(-1)
+  const selectedIndex = ref(-1)
+  const dom_listContent = ref(null)
+  const listRef = ref(null)
+
+  const excludeListIds = computed(() => ([props.listId]))
+
+
+  const list = ref(getList(props.listId))
+  watch(() => props.listId, id => {
+    list.value = getList(id)
+  })
+
+  const playerInfo = computed(() => ({
+    isPlayList: playMusicInfo.listId == props.listId,
+    playIndex: playInfo.playIndex,
+  }))
+
+  const setSelectedIndex = index => {
+    selectedIndex.value = index
+  }
+
+  const isShowSource = computed(() => setting.value.list.isShowSource)
+
+  return {
+    rightClickSelectedIndex,
+    selectedIndex,
+    dom_listContent,
+    listRef,
+    list,
+    playerInfo,
+    setSelectedIndex,
+    setting,
+    isShowSource,
+    excludeListIds,
+  }
+}

src/renderer/views/list/components/MusicList/useListScroll.js

@@ -0,0 +1,64 @@
+import { useRoute, useRouter, onMounted, onBeforeUnmount, nextTick, watch } from '@renderer/utils/vueTools'
+import { setListPosition, getListPosition } from '@renderer/utils/data'
+
+export default ({ props, listRef, list, setting }) => {
+  const route = useRoute()
+  const router = useRouter()
+
+  const saveListPosition = () => {
+    setListPosition(props.listId, listRef.value?.getScrollTop() || 0)
+  }
+
+  const handleScrollList = (index, isAnimation, callback = () => {}) => {
+    listRef.value.scrollToIndex(index, -150, isAnimation).then(callback)
+  }
+
+  const restoreScroll = (index, isAnimation) => {
+    // console.log(index, isAnimation)
+    if (!list.value.length) return
+    if (index == null) {
+      let location = getListPosition(props.listId) || 0
+      if (setting.value.list.isSaveScrollLocation && location != null) {
+        listRef.value.scrollTo(location)
+      }
+      return
+    }
+
+    handleScrollList(index, isAnimation)
+  }
+
+  watch(() => route.query.id, (id, oId) => {
+    if (!oId || route.path != '/list') return
+    const scrollIndex = route.query.scrollIndex
+    nextTick(() => {
+      restoreScroll(scrollIndex, false)
+      if (scrollIndex != null) {
+        router.replace({
+          path: 'list',
+          query: {
+            id: props.listId,
+          },
+        })
+      }
+    })
+  })
+  onMounted(() => {
+    restoreScroll(route.query.scrollIndex, false)
+    if (route.query.scrollIndex != null) {
+      router.replace({
+        path: 'list',
+        query: {
+          id: props.listId,
+        },
+      })
+    }
+  })
+  onBeforeUnmount(() => {
+    saveListPosition()
+  })
+
+  return {
+    saveListPosition,
+    restoreScroll,
+  }
+}

src/renderer/views/list/components/MusicList/useMenu.js

@@ -0,0 +1,163 @@
+import { computed, ref, reactive, useI18n, nextTick } from '@renderer/utils/vueTools'
+import musicSdk from '@renderer/utils/music'
+
+export default ({
+  listRef,
+  assertApiSupport,
+  emit,
+
+  handleShowDownloadModal,
+  handlePlayMusic,
+  handlePlayMusicLater,
+  handleSearch,
+  handleShowMusicAddModal,
+  handleShowMusicMoveModal,
+  handleShowSortModal,
+  handleOpenMusicDetail,
+  handleCopyName,
+  handleRemoveMusic,
+}) => {
+  const itemMenuControl = reactive({
+    play: true,
+    playLater: true,
+    copyName: true,
+    addTo: true,
+    moveTo: true,
+    sort: true,
+    download: true,
+    search: true,
+    remove: true,
+    sourceDetail: true,
+  })
+  const { t } = useI18n()
+  const menuLocation = ref({ x: 0, y: 0 })
+  const isShowItemMenu = ref(false)
+
+  const menus = computed(() => {
+    return [
+      {
+        name: t('list__play'),
+        action: 'play',
+        disabled: !itemMenuControl.play,
+      },
+      {
+        name: t('list__download'),
+        action: 'download',
+        disabled: !itemMenuControl.download,
+      },
+      {
+        name: t('list__play_later'),
+        action: 'playLater',
+        disabled: !itemMenuControl.playLater,
+      },
+      {
+        name: t('list__add_to'),
+        action: 'addTo',
+        disabled: !itemMenuControl.addTo,
+      },
+      {
+        name: t('list__move_to'),
+        action: 'moveTo',
+        disabled: !itemMenuControl.moveTo,
+      },
+      {
+        name: t('list__sort'),
+        action: 'sort',
+        disabled: !itemMenuControl.sort,
+      },
+      {
+        name: t('list__copy_name'),
+        action: 'copyName',
+        disabled: !itemMenuControl.copyName,
+      },
+      {
+        name: t('list__source_detail'),
+        action: 'sourceDetail',
+        disabled: !itemMenuControl.sourceDetail,
+      },
+      {
+        name: t('list__search'),
+        action: 'search',
+        disabled: !itemMenuControl.search,
+      },
+      {
+        name: t('list__remove'),
+        action: 'remove',
+        disabled: !itemMenuControl.remove,
+      },
+    ]
+  })
+
+  const showMenu = (event, musicInfo) => {
+    itemMenuControl.sourceDetail = !!musicSdk[musicInfo.source].getMusicDetailPageUrl
+    // itemMenuControl.play =
+    //   itemMenuControl.playLater =
+    itemMenuControl.download = assertApiSupport(musicInfo.source)
+
+    let dom_container = event.target.closest('#my-list')
+    const getOffsetValue = (target, x = 0, y = 0) => {
+      if (target === dom_container) return { x, y }
+      if (!target) return { x: 0, y: 0 }
+      x += target.offsetLeft
+      y += target.offsetTop
+      return getOffsetValue(target.offsetParent, x, y)
+    }
+    let { x, y } = getOffsetValue(event.target)
+    menuLocation.value.x = x + event.offsetX
+    menuLocation.value.y = y + event.offsetY - listRef.value.getScrollTop()
+    emit('show-menu')
+    nextTick(() => {
+      isShowItemMenu.value = true
+    })
+  }
+
+  const hideMenu = () => {
+    isShowItemMenu.value = false
+  }
+
+  const menuClick = (action, index) => {
+    // console.log(action)
+    hideMenu()
+    if (!action) return
+    switch (action.action) {
+      case 'play':
+        handlePlayMusic(index)
+        break
+      case 'playLater':
+        handlePlayMusicLater(index)
+        break
+      case 'copyName':
+        handleCopyName(index)
+        break
+      case 'addTo':
+        handleShowMusicAddModal(index)
+        break
+      case 'moveTo':
+        handleShowMusicMoveModal(index)
+        break
+      case 'sort':
+        handleShowSortModal(index)
+        break
+      case 'download':
+        handleShowDownloadModal(index)
+        break
+      case 'search':
+        handleSearch(index)
+        break
+      case 'remove':
+        handleRemoveMusic(index)
+        break
+      case 'sourceDetail':
+        handleOpenMusicDetail(index)
+    }
+  }
+
+  return {
+    menus,
+    menuLocation,
+    isShowItemMenu,
+    showMenu,
+    menuClick,
+    hideMenu,
+  }
+}

src/renderer/views/list/components/MusicList/useMusicActions.js

@@ -0,0 +1,49 @@
+import { useCommit, useRouter } from '@renderer/utils/vueTools'
+import musicSdk from '@renderer/utils/music'
+import { openUrl, clipboardWriteText } from '@renderer/utils'
+
+
+export default ({ props, list, setting, selectedList, removeAllSelect }) => {
+  const router = useRouter()
+
+  const listRemove = useCommit('list', 'listRemove')
+  const listRemoveMultiple = useCommit('list', 'listRemoveMultiple')
+
+  const handleSearch = index => {
+    const info = list.value[index]
+    router.push({
+      path: 'search',
+      query: {
+        text: `${info.name} ${info.singer}`,
+      },
+    })
+  }
+
+  const handleOpenMusicDetail = index => {
+    const minfo = list.value[index]
+    const url = musicSdk[minfo.source].getMusicDetailPageUrl(minfo)
+    if (!url) return
+    openUrl(url)
+  }
+
+  const handleCopyName = index => {
+    const minfo = list.value[index]
+    clipboardWriteText(setting.value.download.fileName.replace('歌名', minfo.name).replace('歌手', minfo.singer))
+  }
+
+  const handleRemoveMusic = (index, single) => {
+    if (selectedList.value.length && !single) {
+      listRemoveMultiple({ listId: props.listId, ids: selectedList.value.map(m => m.songmid) })
+      removeAllSelect()
+    } else {
+      listRemove({ listId: props.listId, id: list.value[index].songmid })
+    }
+  }
+
+  return {
+    handleSearch,
+    handleOpenMusicDetail,
+    handleCopyName,
+    handleRemoveMusic,
+  }
+}

src/renderer/views/list/components/MusicList/useMusicAdd.js

@@ -0,0 +1,45 @@
+import { ref, nextTick } from '@renderer/utils/vueTools'
+
+export default ({ selectedList, list }) => {
+  const isShowListAdd = ref(false)
+  const isMove = ref(false)
+  const isMoveMultiple = ref(false)
+  const isShowListAddMultiple = ref(false)
+  const selectedAddMusicInfo = ref(null)
+
+  const handleShowMusicAddModal = (index, single) => {
+    if (selectedList.value.length && !single) {
+      isMoveMultiple.value = false
+      isShowListAddMultiple.value = true
+    } else {
+      isMove.value = false
+      selectedAddMusicInfo.value = list.value[index]
+      nextTick(() => {
+        isShowListAdd.value = true
+      })
+    }
+  }
+
+  const handleShowMusicMoveModal = (index, single) => {
+    if (selectedList.value.length && !single) {
+      isMoveMultiple.value = true
+      isShowListAddMultiple.value = true
+    } else {
+      isMove.value = true
+      selectedAddMusicInfo.value = list.value[index]
+      nextTick(() => {
+        isShowListAdd.value = true
+      })
+    }
+  }
+
+  return {
+    isShowListAdd,
+    isMove,
+    isMoveMultiple,
+    isShowListAddMultiple,
+    selectedAddMusicInfo,
+    handleShowMusicAddModal,
+    handleShowMusicMoveModal,
+  }
+}

src/renderer/views/list/components/MusicList/useMusicDownload.js

@@ -0,0 +1,25 @@
+import { ref, nextTick } from '@renderer/utils/vueTools'
+
+export default ({ selectedList, list }) => {
+  const isShowDownload = ref(false)
+  const isShowDownloadMultiple = ref(false)
+  const musicInfo = ref(null)
+
+  const handleShowDownloadModal = (index, single) => {
+    if (selectedList.value.length && !single) {
+      isShowDownloadMultiple.value = true
+    } else {
+      musicInfo.value = list.value[index]
+      nextTick(() => {
+        isShowDownload.value = true
+      })
+    }
+  }
+
+  return {
+    isShowDownload,
+    isShowDownloadMultiple,
+    selectedDownloadMusicInfo: musicInfo,
+    handleShowDownloadModal,
+  }
+}

src/renderer/views/list/components/MusicList/usePlay.js

@@ -0,0 +1,45 @@
+import { useCommit } from '@renderer/utils/vueTools'
+
+export default ({ props, selectedList, list, removeAllSelect }) => {
+  let clickTime = 0
+  let clickIndex = -1
+
+  const setList = useCommit('player', 'setList')
+  const setTempPlayList = useCommit('player', 'setTempPlayList')
+
+  const handlePlayMusic = (index) => {
+    setList({
+      listId: props.listId,
+      index,
+    })
+  }
+
+  const handlePlayMusicLater = (index, single) => {
+    if (selectedList.length && !single) {
+      setTempPlayList(selectedList.value.map(s => ({ listId: props.listId, musicInfo: s })))
+      removeAllSelect()
+    } else {
+      setTempPlayList([{ listId: props.listId, musicInfo: list.value[index] }])
+    }
+  }
+
+  const doubleClickPlay = index => {
+    if (
+      window.performance.now() - clickTime > 400 ||
+      clickIndex !== index
+    ) {
+      clickTime = window.performance.now()
+      clickIndex = index
+      return
+    }
+    handlePlayMusic(index, true)
+    clickTime = 0
+    clickIndex = -1
+  }
+
+  return {
+    handlePlayMusic,
+    handlePlayMusicLater,
+    doubleClickPlay,
+  }
+}

src/renderer/views/list/components/MusicList/useSearch.js

@@ -0,0 +1,38 @@
+import { ref, onBeforeUnmount } from '@renderer/utils/vueTools'
+
+export default ({ setSelectedIndex, handlePlayMusic, listRef }) => {
+  const isShowSearchBar = ref(false)
+  const searchList = ref([])
+
+  const handleShowSearchBar = () => {
+    isShowSearchBar.value = true
+  }
+
+  const handleMusicSearchAction = ({ action, data: { index, isPlay } = {} }) => {
+    isShowSearchBar.value = false
+    switch (action) {
+      case 'listClick':
+        if (index < 0) return
+        listRef.value.scrollToIndex(index, -150, true).then(() => {
+          setSelectedIndex(index)
+          setTimeout(() => {
+            setSelectedIndex(-1)
+            if (isPlay) handlePlayMusic(index)
+          }, 600)
+        })
+        break
+    }
+  }
+
+  window.eventHub.on('key_mod+f_down', handleShowSearchBar)
+
+  onBeforeUnmount(() => {
+    window.eventHub.off('key_mod+f_down', handleShowSearchBar)
+  })
+
+  return {
+    isShowSearchBar,
+    searchList,
+    handleMusicSearchAction,
+  }
+}

src/renderer/views/list/components/MusicList/useSort.js

@@ -0,0 +1,40 @@
+import { ref, nextTick, useCommit } from '@renderer/utils/vueTools'
+
+export default ({ props, list, selectedList, removeAllSelect }) => {
+  const isShowListSortModal = ref(false)
+  const selectedNum = ref(0)
+  const musicInfo = ref(null)
+
+  const setMusicPosition = useCommit('list', 'setMusicPosition')
+
+  const handleShowSortModal = (index, single) => {
+    if (selectedList.value.length && !single) {
+      selectedNum.value = selectedList.value.length
+    } else {
+      selectedNum.value = 0
+      musicInfo.value = list.value[index]
+      nextTick(() => {
+        isShowListSortModal.value = true
+      })
+    }
+  }
+
+  const sortMusic = num => {
+    num = Math.min(num, list.value.length)
+    setMusicPosition({
+      id: props.listId,
+      position: num,
+      list: selectedNum.value ? [...selectedList.value] : [musicInfo.value],
+    })
+    removeAllSelect()
+    isShowListSortModal.value = false
+  }
+
+  return {
+    isShowListSortModal,
+    selectedNum,
+    selectedSortMusicInfo: musicInfo,
+    handleShowSortModal,
+    sortMusic,
+  }
+}

src/renderer/views/list/components/SearchList.vue

@@ -0,0 +1,426 @@
+<template lang="pug">
+div(:class="$style.container" ref="dom_container" v-show="isShow")
+  transition(enter-active-class="animated-fast zoomIn" leave-active-class="animated zoomOut" @after-leave="handleAnimated")
+    div(:class="$style.search" v-show="visible")
+      div(:class="$style.form")
+        input.key-bind.ignore-esc(:placeholder="placeholder" v-model.trim="text" ref="dom_input"
+              @input="handleDelaySearch"
+              @keyup.enter="handleTemplistClick(selectIndex)"
+              @keyup.40.prevent="handleKeyDown"
+              @keyup.38.prevent="handleKeyUp"
+              @keyup.27.prevent="handleKeyEsc"
+              @contextmenu="handleContextMenu")
+        button(type="button" @click="handleHide")
+          slot
+            svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve')
+              use(xlink:href='#icon-delete')
+      div.scroll(v-if="resultList" :class="$style.list" :style="listStyle" ref="dom_scrollContainer")
+        ul(ref="dom_list")
+          li(v-for="(item, index) in resultList" :key="item.songmid" :class="selectIndex === index ? $style.select : null" @mouseenter="selectIndex = index" @click="handleTemplistClick(index)")
+            div(:class="$style.img")
+            div(:class="$style.text")
+              h3(:class="$style.text") {{item.name}} - {{item.singer}}
+              h3(v-if="item.albumName" :class="[$style.text, $style.albumName]") {{item.albumName}}
+            div(:class="$style.source") {{item.source}}
+</template>
+
+<script>
+import { clipboardReadText, debounce, scrollTo } from '@renderer/utils'
+let canceleFn
+
+
+// https://blog.csdn.net/xcxy2015/article/details/77164126#comments
+const similar = (a, b) => {
+  if (!a || !b) return 0
+  if (a.length > b.length) { // 保证 a <= b
+    let t = b
+    b = a
+    a = t
+  }
+  let al = a.length
+  let bl = b.length
+  let mp = [] // 一个表
+  let i, j, ai, lt, tmp // ai：字符串a的第i个字符。 lt：左上角的值。 tmp：暂存新的值。
+  for (i = 0; i <= bl; i++) mp[i] = i
+  for (i = 1; i <= al; i++) {
+    ai = a.charAt(i - 1)
+    lt = mp[0]
+    mp[0] = mp[0] + 1
+    for (j = 1; j <= bl; j++) {
+      tmp = Math.min(mp[j] + 1, mp[j - 1] + 1, lt + (ai == b.charAt(j - 1) ? 0 : 1))
+      lt = mp[j]
+      mp[j] = tmp
+    }
+  }
+  return 1 - (mp[bl] / bl)
+}
+
+const sortInsert = (arr, data) => {
+  let key = data.num
+  let left = 0
+  let right = arr.length - 1
+
+  while (left <= right) {
+    let middle = parseInt((left + right) / 2)
+    if (key == arr[middle]) {
+      left = middle
+      break
+    } else if (key < arr[middle].num) {
+      right = middle - 1
+    } else {
+      left = middle + 1
+    }
+  }
+  while (left > 0) {
+    if (arr[left - 1].num != key) break
+    left--
+  }
+
+  arr.splice(left, 0, data)
+}
+
+const handleSortList = (list, keyword) => {
+  let arr = []
+  for (const item of list) {
+    sortInsert(arr, {
+      num: similar(keyword, `${item.name} ${item.singer} ${item.albumName || ''}`),
+      data: item,
+    })
+  }
+  return arr.map(item => item.data).reverse()
+}
+
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: 'Find for something...',
+    },
+    list: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      text: '',
+      selectIndex: -1,
+      listStyle: {
+        height: 0,
+        maxHeight: 0,
+      },
+      maxHeight: 0,
+      resultList: [],
+      isModDown: false,
+      isShow: false,
+    }
+  },
+  watch: {
+    resultList(n) {
+      if (this.selectIndex > -1) this.selectIndex = -1
+      this.$nextTick(() => {
+        this.listStyle.height = Math.min(this.$refs.dom_list.scrollHeight, this.maxHeight) + 'px'
+      })
+    },
+    list(n) {
+      if (!this.visible) return
+      this.handleDelaySearch()
+    },
+    visible(n) {
+      if (!n) return
+      this.isShow = true
+      this.init()
+    },
+  },
+  created() {
+    this.handleDelaySearch = debounce(() => {
+      this.handleSearch()
+    })
+    if (this.visible) this.isShow = true
+  },
+  mounted() {
+    this.init()
+    window.eventHub.on('key_mod_down', this.handle_key_mod_down)
+    window.eventHub.on('key_mod_up', this.handle_key_mod_up)
+    window.eventHub.on('key_mod+f_down', this.handle_key_mod_f_down)
+  },
+  beforeUnmount() {
+    window.eventHub.off('key_mod_down', this.handle_key_mod_down)
+    window.eventHub.off('key_mod_up', this.handle_key_mod_up)
+    window.eventHub.off('key_mod+f_down', this.handle_key_mod_f_down)
+  },
+  methods: {
+    init() {
+      if (!this.visible) return
+      this.handleSearch()
+      this.$nextTick(() => {
+        if (!this.listStyle.maxHeight) {
+          this.maxHeight = this.$refs.dom_container.offsetParent.clientHeight - this.$refs.dom_list.offsetTop - 70
+          this.listStyle.maxHeight = this.maxHeight + 'px'
+        }
+        this.$refs.dom_input.focus()
+      })
+    },
+    handleKeyEsc() {
+      if (this.text.length > 0) {
+        this.text = ''
+        this.resultList = []
+      } else {
+        this.handleHide()
+      }
+    },
+    handle_key_mod_down() {
+      this.isModDown = true
+    },
+    handle_key_mod_up() {
+      setTimeout(() => {
+        this.isModDown = false
+      }, 100)
+    },
+    handle_key_mod_f_down() {
+      if (this.visible) this.$refs.dom_input.focus()
+    },
+    handleAnimated() {
+      if (this.visible) return
+      this.isShow = false
+    },
+    handleTemplistClick(index) {
+      if (index < 0) return
+      this.sendEvent('listClick', {
+        index: this.list.indexOf(this.resultList[index]),
+        isPlay: this.isModDown,
+      })
+    },
+    handleHide() {
+      this.sendEvent('hide')
+    },
+    sendEvent(action, data) {
+      this.$emit('action', {
+        action,
+        data,
+      })
+    },
+    handleKeyDown() {
+      if (!this.resultList.length) return
+      this.selectIndex = this.selectIndex + 1 < this.resultList.length ? this.selectIndex + 1 : 0
+      this.handleScrollList()
+    },
+    handleKeyUp() {
+      if (!this.resultList.length) return
+      this.selectIndex = this.selectIndex - 1 < -1 ? this.resultList.length - 1 : this.selectIndex - 1
+      this.handleScrollList()
+    },
+    handleScrollList() {
+      if (this.selectIndex < 0) return
+      let dom = this.$refs.dom_list.children[this.selectIndex]
+      let offsetTop = dom.offsetTop
+      let scrollTop = this.$refs.dom_scrollContainer.scrollTop
+      if (offsetTop < scrollTop) {
+        if (canceleFn) canceleFn()
+        canceleFn = scrollTo(this.$refs.dom_scrollContainer, offsetTop, 200, () => canceleFn = null)
+      } else if (offsetTop + dom.clientHeight > this.$refs.dom_scrollContainer.clientHeight + scrollTop) {
+        if (canceleFn) canceleFn()
+        canceleFn = scrollTo(this.$refs.dom_scrollContainer, offsetTop + dom.clientHeight - this.$refs.dom_scrollContainer.clientHeight, 200, () => canceleFn = null)
+      }
+    },
+    handleContextMenu() {
+      let str = clipboardReadText()
+      str = str.replace(/\t|\r\n|\n|\r/g, ' ')
+      str = str.replace(/\s+/g, ' ')
+      let dom_input = this.$refs.dom_input
+      this.text = `${this.text.substring(0, dom_input.selectionStart)}${str}${this.text.substring(dom_input.selectionEnd, this.text.length)}`
+    },
+    handleSearch() {
+      if (!this.text.length) return this.resultList = []
+      let list = []
+      let rxp = new RegExp(this.text.split('').map(s => s.replace(/[.*+?^${}()|[\]\\]/, '\\$&')).join('.*') + '.*', 'i')
+      for (const item of this.list) {
+        if (rxp.test(`${item.name}${item.singer}${item.albumName ? item.albumName : ''}`)) list.push(item)
+      }
+      this.resultList = handleSortList(list, this.text)
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.container {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 20px;
+  width: 45%;
+  height: @height-toolbar * 0.52;
+  z-index: 99;
+}
+
+.search {
+  position: absolute;
+  width: 100%;
+  border-radius: 4px;
+  transition: box-shadow .4s ease, background-color @transition-theme;
+  display: flex;
+  flex-flow: column nowrap;
+  background-color: @color-search-form-background;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.07),
+                0 2px 4px rgba(0,0,0,0.07),
+                0 4px 8px rgba(0,0,0,0.07),
+                0 8px 16px rgba(0,0,0,0.07),
+                0 16px 32px rgba(0,0,0,0.07),
+                0 32px 64px rgba(0,0,0,0.07);
+
+  &.active {
+    .form {
+      input {
+        border-bottom-left-radius: 0;
+
+      }
+      button {
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+  .form {
+    display: flex;
+    height: @height-toolbar * 0.52;
+    position: relative;
+    input {
+      flex: auto;
+      // border: 1px solid;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      background-color: transparent;
+      // border-bottom: 2px solid @color-theme;
+      // border-color: @color-theme;
+      border: none;
+
+      outline: none;
+      // height: @height-toolbar * .7;
+      padding: 0 5px;
+      overflow: hidden;
+      font-size: 13.5px;
+      line-height: @height-toolbar * 0.52 + 5px;
+      &::placeholder {
+        color: @color-btn;
+      }
+    }
+    button {
+      flex: none;
+      border: none;
+      // background-color: @color-search-form-background;
+      background-color: transparent;
+      outline: none;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      cursor: pointer;
+      height: 100%;
+      padding: 6px 7px;
+      color: @color-btn;
+      transition: background-color .2s ease;
+      opacity: 0.8;
+
+      &:hover {
+        background-color: @color-theme-hover;
+      }
+      &:active {
+        background-color: @color-theme-active;
+      }
+    }
+  }
+  .list {
+    // background-color: @color-search-form-background;
+    font-size: 13px;
+    transition: .3s ease;
+    height: 0;
+    transition-property: height;
+    position: relative;
+    li {
+      position: relative;
+      cursor: pointer;
+      padding: 8px 5px;
+      transition: background-color .2s ease;
+      line-height: 1.3;
+      // overflow: hidden;
+      display: flex;
+      flex-flow: row nowrap;
+
+      &.select {
+        background-color: @color-search-list-hover;
+      }
+      border-radius: 4px;
+      // &:last-child {
+      //   border-bottom-left-radius: 4px;
+      //   border-bottom-right-radius: 4px;
+      // }
+    }
+  }
+}
+
+.img {
+  flex: none;
+}
+.text {
+  flex: auto;
+  .mixin-ellipsis-1;
+}
+.albumName {
+  font-size: 12px;
+  opacity: 0.6;
+  .mixin-ellipsis-1;
+}
+.source {
+  flex: none;
+  font-size: 12px;
+  opacity: 0.5;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  // transform: rotate(45deg);
+  // background-color:
+}
+
+
+each(@themes, {
+  :global(#root.@{value}) {
+
+    .search {
+      background-color: ~'@{color-@{value}-search-form-background}';
+
+      .form {
+        input {
+          &::placeholder {
+            color: ~'@{color-@{value}-btn}';
+          }
+        }
+        button {
+          color: ~'@{color-@{value}-btn}';
+
+          &:hover {
+            background-color: ~'@{color-@{value}-theme-hover}';
+          }
+          &:active {
+            background-color: ~'@{color-@{value}-theme-active}';
+          }
+        }
+      }
+      .list {
+        li {
+          &.select {
+            background-color: ~'@{color-@{value}-search-list-hover}';
+          }
+        }
+      }
+    }
+  }
+})
+
+</style>

src/renderer/views/setting/Setting.vue

@@ -0,0 +1,312 @@
+<template>
+
+<div :class="$style.main">
+  <!-- <div class="scroll" :class="$style.toc">
+    <ul :class="$style.tocList">
+      <li :class="$style.tocListItem" v-for="h2 in toc.list" :key="h2.id">
+        <h2 :class="[$style.tocH2, toc.activeId == h2.id ? $style.active : null]" :tips="h2.title">
+          <a :href="'#' + h2.id" @click.stop="toc.activeId = h2.id">{{h2.title}}</a>
+        </h2>
+        <ul :class="$style.tocList" v-if="h2.children.length">
+          <li :class="$style.tocSubListItem" v-for="h3 in h2.children" :key="h3.id">
+            <h3 :class="[$style.tocH3, toc.activeId == h3.id ? $style.active : null]" :tips="h3.title">
+              <a :href="'#' + h3.id" @click.stop="toc.activeId = h3.id">{{h3.title}}</a>
+            </h3>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div> -->
+  <div class="scroll" :class="$style.setting" ref="dom_setting">
+    <dl ref="dom_setting_list">
+      <Basic />
+      <Play />
+      <DesktopLyric />
+      <Search />
+      <List />
+      <Download />
+      <Sync />
+      <HotKey />
+      <Network />
+      <Odc />
+      <Backup />
+      <Other />
+      <Update />
+      <About />
+    </dl>
+  </div>
+</div>
+</template>
+
+<script>
+import { useRefGetter, watch, useCommit } from '@renderer/utils/vueTools'
+import { currentStting } from './setting'
+
+import Basic from './components/Basic'
+import Play from './components/Play'
+import DesktopLyric from './components/DesktopLyric'
+import Search from './components/Search'
+import List from './components/List'
+import Download from './components/Download'
+import Sync from './components/Sync'
+import HotKey from './components/HotKey'
+import Network from './components/Network'
+import Odc from './components/Odc'
+import Backup from './components/Backup'
+import Other from './components/Other'
+import Update from './components/Update'
+import About from './components/About'
+
+export default {
+  name: 'Setting',
+  components: {
+    Basic,
+    Play,
+    DesktopLyric,
+    Search,
+    List,
+    Download,
+    Sync,
+    HotKey,
+    Network,
+    Odc,
+    Backup,
+    Other,
+    Update,
+    About,
+  },
+  setup() {
+    const setting = useRefGetter('setting')
+
+    const setSetting = useCommit('setSetting')
+    currentStting.value = JSON.parse(JSON.stringify(setting.value))
+    watch(currentStting, newSetting => {
+      const newSettingStr = JSON.stringify(newSetting)
+      if (newSettingStr === JSON.stringify(setting.value)) return
+      setSetting(JSON.parse(newSettingStr))
+    }, {
+      deep: true,
+    })
+
+    watch(() => setting.value.isAgreePact, val => {
+      currentStting.value.isAgreePact = val
+    })
+    watch(() => setting.value.player.mediaDeviceId, val => {
+      currentStting.value.player.mediaDeviceId = val
+    })
+    watch(() => setting.value.player.isMute, val => {
+      currentStting.value.player.isMute = val
+    })
+    watch(() => setting.value.apiSource, val => {
+      currentStting.value.apiSource = val
+    })
+    watch(() => setting.value.desktopLyric.enable, val => {
+      currentStting.value.desktopLyric.enable = val
+    })
+    watch(() => setting.value.desktopLyric.isLock, val => {
+      currentStting.value.desktopLyric.isLock = val
+    })
+    watch(() => setting.value.player.togglePlayMethod, val => {
+      currentStting.value.player.togglePlayMethod = val
+    })
+  },
+  data() {
+    return {
+      toc: {
+        list: [],
+        activeId: '',
+      },
+    }
+  },
+  // mounted() {
+  //   this.initTOC()
+  // },
+  // methods: {
+  //   initTOC() {
+  //     const list = this.$refs.dom_setting_list.children
+  //     const toc = []
+  //     let prevTitle
+  //     for (const item of list) {
+  //       if (item.tagName == 'DT') {
+  //         prevTitle = {
+  //           title: item.innerText.replace(/[（(].+?[)）]/, ''),
+  //           id: item.getAttribute('id'),
+  //           dom: item,
+  //           children: [],
+  //         }
+  //         toc.push(prevTitle)
+  //         continue
+  //       }
+  //       const h3 = item.querySelector('h3')
+  //       if (h3) {
+  //         prevTitle.children.push({
+  //           title: h3.innerText.replace(/[（(].+?[)）]/, ''),
+  //           id: h3.getAttribute('id'),
+  //           dom: h3,
+  //         })
+  //       }
+  //     }
+  //     console.log(toc)
+  //     this.toc.list = toc
+  //   },
+  //   handleListScroll(event) {
+  //     // console.log(event.target.scrollTop)
+  //   },
+  // },
+}
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.main {
+  display: flex;
+  flex-flow: row nowrap;
+  height: 100%;
+  // border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+// .toc {
+//   flex: 0 0 15%;
+//   overflow-y: scroll;
+//   padding: 10px;
+//   a {
+//     text-decoration: none;
+//     display: block;
+//     line-height: 1.5;
+//     .mixin-ellipsis-1;
+//   }
+// }
+// .tocH2 {
+//   font-size: 14px;
+//   a {
+//     color: @color-theme;
+//   }
+//   &.active {
+//     a {
+//       color: @color-theme;
+//     }
+//   }
+// }
+// .tocH3 {
+//   font-size: 13px;
+//   opacity: .8;
+// }
+
+// .tocList {
+//   .tocList {
+//     padding-left: 15px;
+//   }
+// }
+// .tocListItem {
+//   +.tocListItem {
+//     padding-top: 10px;
+//   }
+// }
+// .tocSubListItem {
+//   padding-top: 10px;
+// }
+
+.setting {
+  padding: 0 15px 30px 15px;
+  font-size: 14px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  height: 100%;
+  position: relative;
+
+  :global {
+    dt {
+      border-left: 5px solid @color-theme;
+      padding: 3px 7px;
+      margin: 30px 0 15px;
+
+      + dd h3 {
+        margin-top: 0;
+      }
+    }
+
+    dd {
+      margin-left: 15px;
+      // font-size: 13px;
+      > div {
+        padding: 0 15px;
+      }
+
+    }
+    h3 {
+      font-size: 12px;
+      margin: 25px 0 15px;
+    }
+    p {
+      padding: 3px 0;
+      line-height: 1.3;
+      .btn {
+        + .btn {
+          margin-left: 10px;
+        }
+      }
+    }
+    .gap-left {
+      + .gap-left {
+        margin-left: 20px;
+      }
+    }
+    .gap-top {
+      &.top {
+        margin-top: 25px;
+      }
+
+      + .gap-top {
+        margin-top: 10px;
+      }
+    }
+  }
+}
+
+.btn-content {
+  display: inline-block;
+  transition: @transition-theme;
+  transition-property: opacity, transform;
+  opacity: 1;
+  transform: scale(1);
+
+  &.hide {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+
+
+// :global(dt):target, :global(h3):target {
+//   animation: highlight 1s ease;
+// }
+
+// @keyframes highlight {
+//   from { background: yellow; }
+//   to { background: transparent; }
+// }
+
+each(@themes, {
+  :global(#root.@{value}) {
+    .tocH2 {
+      a {
+        color: ~'@{color-@{value}-theme}';
+      }
+    }
+    .tbody {
+      tr {
+        &.active {
+          color: ~'@{color-@{value}-theme}';
+        }
+      }
+    }
+    .setting {
+      dt {
+        border-left-color: ~'@{color-@{value}-theme}';
+      }
+    }
+  }
+})
+</style>

src/renderer/views/setting/components/About.vue

@@ -0,0 +1,75 @@
+<template lang="pug">
+dt#about {{$t('setting__about')}}
+dd
+  p.small
+    | 本软件完全免费，代码已开源，开源地址：
+    span.hover.underline(:tips="$t('setting__click_open')" @click="openUrl('https://github.com/lyswhut/lx-music-desktop#readme')") https://github.com/lyswhut/lx-music-desktop
+  p.small
+    | 最新版网盘下载地址（网盘内有Windows、MAC版）：
+    span.hover.underline(:tips="$t('setting__click_open')" @click="openUrl('https://www.lanzoui.com/b0bf2cfa/')") 网盘地址
+    | &nbsp;&nbsp;密码：
+    span.hover(:tips="$t('setting__click_copy')" @click="clipboardWriteText('glqw')") glqw
+  p.small
+    | 软件的常见问题可转至：
+    span.hover.underline(:tips="$t('setting__click_open')" @click="openUrl('https://github.com/lyswhut/lx-music-desktop/blob/master/FAQ.md')") 常见问题
+  p.small
+    strong 本软件没有客服
+    | ，但我们整理了一些常见的使用问题，
+    strong 仔细 仔细 仔细
+    | 地阅读常见问题后，
+  p.small
+    | 仍有问题可加企鹅群&nbsp;
+    span.hover(:tips="$t('setting__click_open')" @click="openUrl('https://jq.qq.com/?_wv=1027&k=51ECeq2')") 830125506
+    | &nbsp;反馈
+    strong (为免满人，无事勿加，入群先看群公告)
+    | ，或到 GitHub 提交&nbsp;
+    span.hover.underline(:tips="$t('setting__click_open')" @click="openUrl('https://github.com/lyswhut/lx-music-desktop/issues')") issue
+
+  br
+  p.small
+    | 如果你喜欢并经常使用洛雪音乐，并想要第一时间尝鲜洛雪的新功能&nbsp;
+    span(style="text-decoration: line-through;") （当小白鼠）
+    | ，
+  p
+    | 可以加入测试企鹅群&nbsp;
+    span.hover(:tips="$t('setting__click_open')" @click="openUrl('https://qm.qq.com/cgi-bin/qm/qr?k=zR6aYosQoKb07g4FGFZdO9n9zL1dhFpE&jump_from=webapi')") 768786588
+    | &nbsp;，注意：测试版的功可能会不稳定，
+    strong 打算潜水的勿加
+
+  br
+  p.small 由于软件开发的初衷仅是为了对新技术的学习与研究，因此软件直至停止维护都将会一直保持纯净。
+
+  p.small
+    | 你已签署本软件的&nbsp;
+    base-btn(min @click="handleShowPact") 许可协议
+    | ，协议的在线版本在&nbsp;
+    strong.hover.underline(:tips="$t('setting__click_open')" @click="openUrl('https://github.com/lyswhut/lx-music-desktop#%E9%A1%B9%E7%9B%AE%E5%8D%8F%E8%AE%AE')") 这里
+    | &nbsp;。
+  br
+
+  p
+    small By：
+    | 落雪无痕
+</template>
+
+<script>
+// import { ref, onBeforeUnmount } from '@renderer/utils/vueTools'
+import { isShowPact } from '@renderer/core/share'
+import { openUrl, clipboardWriteText } from '@renderer/utils'
+import { currentStting } from '../setting'
+
+export default {
+  name: 'About',
+  setup() {
+    const handleShowPact = () => {
+      isShowPact.value = true
+    }
+    return {
+      currentStting,
+      openUrl,
+      clipboardWriteText,
+      handleShowPact,
+    }
+  },
+}
+</script>

src/renderer/views/setting/components/Backup.vue

@@ -0,0 +1,243 @@
+<template lang="pug">
+dt#backup {{$t('setting__backup')}}
+dd
+  h3#backup_part {{$t('setting__backup_part')}}
+  div
+    base-btn.btn.gap-left(min @click="handleImportPlayList") {{$t('setting__backup_part_import_list')}}
+    base-btn.btn.gap-left(min @click="handleExportPlayList") {{$t('setting__backup_part_export_list')}}
+    base-btn.btn.gap-left(min @click="handleImportSetting") {{$t('setting__backup_part_import_setting')}}
+    base-btn.btn.gap-left(min @click="handleExportSetting") {{$t('setting__backup_part_export_setting')}}
+dd
+  h3#backup_all {{$t('setting__backup_all')}}
+  div
+    base-btn.btn.gap-left(min @click="handleImportAllData") {{$t('setting__backup_all_import')}}
+    base-btn.btn.gap-left(min @click="handleExportAllData") {{$t('setting__backup_all_export')}}
+</template>
+
+<script>
+import { useCommit, useI18n, onBeforeUnmount, useGetter, toRaw } from '@renderer/utils/vueTools'
+import { mergeSetting } from '@common/utils'
+import { base as eventBaseName } from '@renderer/event/names'
+import { defaultList, loveList, userLists } from '@renderer/core/share/list'
+import {
+  getSetting,
+  saveSetting,
+  saveLxConfigFile,
+  readLxConfigFile,
+  selectDir,
+  openSaveDir,
+} from '@renderer/utils'
+import { currentStting } from '../setting'
+import { getList } from '@renderer/core/share/utils'
+
+export default {
+  name: 'Update',
+  setup() {
+    const { t } = useI18n()
+    const setting = useGetter('setting')
+    const settingVersion = useGetter('settingVersion')
+    const setSetting = useCommit('setSetting')
+    const setSettingVersion = useCommit('setSettingVersion')
+    const setList = useCommit('list', 'setList')
+
+    const handleUpdateSetting = (config) => {
+      currentStting.value = JSON.parse(JSON.stringify(config))
+    }
+    const refreshSetting = async(newSetting, newVersion) => {
+      await saveSetting(newSetting)
+      const { setting, version } = await getSetting()
+      setSetting(setting)
+      setSettingVersion(version)
+    }
+
+    const importAllData = async(path) => {
+      let allData
+      try {
+        allData = await readLxConfigFile(path)
+      } catch (error) {
+        return
+      }
+      if (allData.type !== 'allData') return
+
+      // 兼容0.6.2及以前版本的列表数据
+      if (allData.defaultList) return setList({ id: 'default', list: allData.defaultList.list, name: '试听列表' })
+
+      for (const list of allData.playList) {
+        setList(list)
+      }
+
+      const { version: settingVersion, setting } = mergeSetting(allData.setting)
+      setting.isAgreePact = false
+
+      await refreshSetting(setting, settingVersion)
+    }
+    const handleImportAllData = () => {
+      selectDir({
+        title: t('setting__backup_all_import_desc'),
+        properties: ['openFile'],
+        filters: [
+          { name: 'Setting', extensions: ['json', 'lxmc'] },
+          { name: 'All Files', extensions: ['*'] },
+        ],
+      }).then(result => {
+        if (result.canceled) return
+        importAllData(result.filePaths[0])
+      })
+    }
+
+    const exportAllData = async(path) => {
+      let allData = JSON.parse(JSON.stringify({
+        type: 'allData',
+        setting: Object.assign({ version: settingVersion.value }, toRaw(setting.value)),
+        playList: [
+          { ...toRaw(defaultList), list: toRaw(getList(defaultList.id)) },
+          { ...toRaw(loveList), list: toRaw(getList(loveList.id)) },
+          ...userLists.map(l => ({ ...toRaw(l), list: toRaw(getList(l.id)) })),
+        ],
+      }))
+      for await (const list of allData.playList) {
+        for await (const item of list.list) {
+          if (item.otherSource) delete item.otherSource
+        }
+      }
+      saveLxConfigFile(path, allData)
+    }
+    const handleExportAllData = () => {
+      openSaveDir({
+        title: t('setting__backup_all_export_desc'),
+        defaultPath: 'lx_datas.lxmc',
+      }).then(result => {
+        if (result.canceled) return
+        exportAllData(result.filePath)
+      })
+    }
+
+
+    const exportSetting = (path) => {
+      console.log(path)
+      const data = {
+        type: 'setting',
+        data: Object.assign({ version: settingVersion.value }, toRaw(setting.value)),
+      }
+      saveLxConfigFile(path, data)
+    }
+    const handleExportSetting = () => {
+      openSaveDir({
+        title: t('setting__backup_part_export_setting_desc'),
+        defaultPath: 'lx_setting.lxmc',
+      }).then(result => {
+        if (result.canceled) return
+        exportSetting(result.filePath)
+      })
+    }
+
+    const importSetting = async(path) => {
+      let settingData
+      try {
+        settingData = await readLxConfigFile(path)
+      } catch (error) {
+        return
+      }
+      if (settingData.type !== 'setting') return
+      const { version: settingVersion, setting } = mergeSetting(settingData.data)
+      setting.isAgreePact = false
+      refreshSetting(setting, settingVersion)
+    }
+    const handleImportSetting = () => {
+      selectDir({
+        title: t('setting__backup_part_import_setting_desc'),
+        properties: ['openFile'],
+        filters: [
+          { name: 'Setting', extensions: ['json', 'lxmc'] },
+          { name: 'All Files', extensions: ['*'] },
+        ],
+      }).then(result => {
+        if (result.canceled) return
+        importSetting(result.filePaths[0])
+      })
+    }
+
+    const exportPlayList = async(path) => {
+      const data = JSON.parse(JSON.stringify({
+        type: 'playList',
+        data: [
+          { ...toRaw(defaultList), list: toRaw(getList(defaultList.id)) },
+          { ...toRaw(loveList), list: toRaw(getList(loveList.id)) },
+          ...userLists.map(l => ({ ...toRaw(l), list: toRaw(getList(l.id)) })),
+        ],
+      }))
+      for await (const list of data.data) {
+        for await (const item of list.list) {
+          if (item.otherSource) delete item.otherSource
+        }
+      }
+      saveLxConfigFile(path, data)
+    }
+    const handleExportPlayList = () => {
+      openSaveDir({
+        title: t('setting__backup_part_export_list_desc'),
+        defaultPath: 'lx_list.lxmc',
+      }).then(result => {
+        if (result.canceled) return
+        exportPlayList(result.filePath)
+      })
+    }
+
+    const importPlayList = async(path) => {
+      let listData
+      try {
+        listData = await readLxConfigFile(path)
+      } catch (error) {
+        return
+      }
+      console.log(listData.type)
+
+      // 兼容0.6.2及以前版本的列表数据
+      if (listData.type === 'defautlList') return setList({ id: 'default', list: listData.data.list, name: '试听列表' })
+
+      if (listData.type !== 'playList') return
+
+      for (const list of listData.data) {
+        setList(list)
+      }
+
+      await refreshSetting(setting.value, settingVersion.value)
+    }
+    const handleImportPlayList = () => {
+      selectDir({
+        title: t('setting__backup_part_import_list_desc'),
+        properties: ['openFile'],
+        filters: [
+          { name: 'Play List', extensions: ['json', 'lxmc'] },
+          { name: 'All Files', extensions: ['*'] },
+        ],
+      }).then(result => {
+        if (result.canceled) return
+        importPlayList(result.filePaths[0])
+      })
+    }
+
+    window.eventHub.on(eventBaseName.set_config, handleUpdateSetting)
+
+    onBeforeUnmount(() => {
+      window.eventHub.off(eventBaseName.set_config, handleUpdateSetting)
+    })
+
+    return {
+      currentStting,
+      handleExportPlayList,
+      handleImportPlayList,
+      handleExportSetting,
+      handleImportSetting,
+      handleExportAllData,
+      handleImportAllData,
+    }
+  },
+}
+</script>
+
+<style lang="less" module>
+.save-path {
+  font-size: 12px;
+}
+</style>

src/renderer/views/setting/components/Basic.vue

@@ -0,0 +1,235 @@
+<template lang="pug">
+dt#basic {{$t('setting__basic')}}
+dd
+  h3#basic_theme {{$t('setting__basic_theme')}}
+  div
+    ul(:class="$style.theme")
+      li(v-for="theme in themes.list" :key="theme.id" :tips="$t('theme_' + theme.className)" @click="currentStting.themeId = theme.id" :class="[theme.className, {[$style.active]: themes.active == theme.id}]")
+        span
+        label {{$t('theme_' + theme.className)}}
+
+dd
+  .gap-top.top
+    base-checkbox(id="setting_show_animate" v-model="currentStting.isShowAnimation" :label="$t('setting__basic_show_animation')")
+  .gap-top
+    base-checkbox(id="setting_animate" v-model="currentStting.randomAnimate" :label="$t('setting__basic_animation')")
+  .gap-top
+    base-checkbox(id="setting_to_tray" v-model="currentStting.tray.isShow" :label="$t('setting__basic_to_tray')")
+
+dd(:tips="$t('setting__basic_source_title')")
+  h3#basic_source {{$t('setting__basic_source')}}
+  div
+    .gap-top(v-for="item in apiSources" :key="item.id")
+      base-checkbox(:id="`setting_api_source_${item.id}`" name="setting_api_source"
+        need v-model="currentStting.apiSource" :disabled="item.disabled" :value="item.id" :label="item.label")
+    p.gap-top
+      base-btn.btn(min @click="isShowUserApiModal = true") {{$t('setting__basic_source_user_api_btn')}}
+
+dd(:tips="$t('setting__basic_window_size_title')")
+  h3#basic_window_size {{$t('setting__basic_window_size')}}
+  div
+    base-checkbox.gap-left(v-for="(item, index) in windowSizeList" :id="`setting_window_size_${item.id}`" name="setting_window_size"
+      need v-model="currentStting.windowSizeId" :value="item.id" :label="$t('setting__basic_window_size_' + item.name)" :key="item.id")
+
+dd(:tips="$t('setting__basic_lang_title')")
+  h3#basic_lang {{$t('setting__basic_lang')}}
+  div
+    base-checkbox.gap-left(v-for="item in langList" :key="item.locale" :id="`setting_lang_${item.locale}`" name="setting_lang"
+      need v-model="currentStting.langId" :value="item.locale" :label="item.name")
+
+dd(:tips="$t('setting__basic_sourcename_title')")
+  h3#basic_sourcename {{$t('setting__basic_sourcename')}}
+  div
+    base-checkbox.gap-left(v-for="item in sourceNameTypes" :key="item.id" :id="`setting_abasic_sourcename_${item.id}`"
+      name="setting_basic_sourcename" need v-model="currentStting.sourceNameType" :value="item.id" :label="item.label")
+
+dd
+  h3#basic_control_btn_position {{$t('setting__basic_control_btn_position')}}
+  div
+    base-checkbox.gap-left(v-for="item in controlBtnPositionList" :key="item.id" :id="`setting_basic_control_btn_position_${item.id}`"
+      name="setting_basic_control_btn_position" need v-model="currentStting.controlBtnPosition" :value="item.id" :label="item.name")
+teleport(to="#view")
+  user-api-modal(v-model="isShowUserApiModal")
+</template>
+
+<script>
+import { computed, ref, useI18n, watch } from '@renderer/utils/vueTools'
+import { themes as themeList, windowSizeList, apiSource, userApi } from '@renderer/core/share'
+import { langList } from '@/lang'
+import { currentStting } from '../setting'
+import { setWindowSize } from '@renderer/utils'
+import apiSourceInfo from '@renderer/utils/music/api-source-info'
+
+import UserApiModal from './UserApiModal'
+
+export default {
+  name: 'Basic',
+  components: {
+    UserApiModal,
+  },
+  setup() {
+    const { t, locale } = useI18n()
+
+
+    const themes = computed(() => {
+      return {
+        active: currentStting.value.themeId,
+        list: themeList,
+      }
+    })
+
+    watch(() => currentStting.value.apiSource, visible => {
+      apiSource.value = visible
+    })
+
+    const isShowUserApiModal = ref(false)
+    const getApiStatus = () => {
+      let status
+      if (userApi.status) status = t('setting__basic_source_status_success')
+      else if (userApi.message == 'initing') status = t('setting__basic_source_status_initing')
+      else status = `${t('setting__basic_source_status_failed')} - ${userApi.message}`
+
+      return status
+    }
+    const apiSources = computed(() => {
+      return [
+        ...apiSourceInfo.map(api => ({
+          id: api.id,
+          label: t('setting__basic_source_' + api.id) || api.name,
+          disabled: api.disabled,
+        })),
+        ...userApi.list.map(api => ({
+          id: api.id,
+          label: `${api.name}${api.description ? `（${api.description}）` : ''}${api.id == currentStting.value.apiSource ? `[${getApiStatus()}]` : ''}`,
+          status: api.status,
+          message: api.message,
+          disabled: false,
+        })),
+      ]
+    })
+
+
+    watch(() => currentStting.value.windowSizeId, (index) => {
+      let info = index == null ? windowSizeList[2] : windowSizeList[index]
+      setWindowSize(info.width, info.height)
+    })
+
+
+    watch(() => currentStting.value.langId, (id) => {
+      locale.value = id
+    })
+
+
+    const sourceNameTypes = computed(() => {
+      return [
+        { id: 'real', label: t('setting__basic_sourcename_real') },
+        { id: 'alias', label: t('setting__basic_sourcename_alias') },
+      ]
+    })
+
+
+    const controlBtnPositionList = computed(() => {
+      return [
+        { id: 'left', name: t('setting__basic_control_btn_position_left') },
+        { id: 'right', name: t('setting__basic_control_btn_position_right') },
+      ]
+    })
+
+
+    return {
+      currentStting,
+      themes,
+      apiSources,
+      isShowUserApiModal,
+      windowSizeList,
+      langList,
+      sourceNameTypes,
+      controlBtnPositionList,
+    }
+  },
+}
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.theme {
+  display: flex;
+  flex-flow: row wrap;
+  // padding: 0 15px;
+  margin-bottom: -20px;
+
+  li {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    cursor: pointer;
+    // color: @color-theme;
+    margin-right: 30px;
+    transition: color .3s ease;
+    margin-bottom: 18px;
+    width: 56px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    span {
+      display: block;
+      width: 36px;
+      height: 36px;
+      margin-bottom: 5px;
+      border: 2px solid transparent;
+      padding: 2px;
+      transition: border-color .3s ease;
+      border-radius: 5px;
+      &:after {
+        display: block;
+        content: ' ';
+        width: 100%;
+        height: 100%;
+        border-radius: @radius-border;
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+    }
+
+    label {
+      width: 100%;
+      text-align: center;
+      height: 1.2em;
+      .mixin-ellipsis-1;
+    }
+
+    each(@themes, {
+      &:global(.@{value}) {
+        span {
+          &:after {
+            background-color: ~'@{color-@{value}-theme}';
+            background-image: ~'@{color-@{value}-theme-bgimg}';
+          }
+        }
+      }
+    })
+  }
+}
+
+each(@themes, {
+  :global(#root.@{value}) {
+    .theme {
+      li {
+        &.active {
+          &:global(.@{value}) {
+            color: ~'@{color-@{value}-theme}';
+            span {
+              border-color: ~'@{color-@{value}-theme}';
+            }
+          }
+        }
+      }
+    }
+  }
+})
+
+</style>

src/renderer/views/setting/components/DesktopLyric.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+dt#desktop_lyric {{$t('setting__desktop_lyric')}}
+dd
+  .gap-top
+    base-checkbox(id="setting_desktop_lyric_enable" v-model="currentStting.desktopLyric.enable" :label="$t('setting__desktop_lyric_enable')")
+  .gap-top
+    base-checkbox(id="setting_desktop_lyric_lock" v-model="currentStting.desktopLyric.isLock" :label="$t('setting__desktop_lyric_lock')")
+  .gap-top
+    base-checkbox(id="setting_desktop_lyric_alwaysOnTop" v-model="currentStting.desktopLyric.isAlwaysOnTop" :label="$t('setting__desktop_lyric_always_on_top')")
+  .gap-top
+    base-checkbox(id="setting_desktop_lyric_lockScreen" v-model="currentStting.desktopLyric.isLockScreen" :label="$t('setting__desktop_lyric_lock_screen')")
+dd
+  h3#desktop_lyric_font {{$t('setting__desktop_lyric_font')}}
+  div
+    base-selection.gap-teft(:list="fontList" v-model="currentStting.desktopLyric.style.font" item-key="id" item-name="label")
+</template>
+
+<script>
+import { ref, computed, useI18n } from '@renderer/utils/vueTools'
+import { getSystemFonts } from '@renderer/utils/tools'
+import { currentStting } from '../setting'
+
+export default {
+  name: 'DesktopLyric',
+  setup() {
+    const { t } = useI18n()
+    const systemFontList = ref([])
+    const fontList = computed(() => {
+      return [{ id: '', label: t('setting__desktop_lyric_font_default') }, ...systemFontList.value]
+    })
+    getSystemFonts().then(fonts => {
+      systemFontList.value = fonts.map(f => ({ id: f, label: f.replace(/(^"|"$)/g, '') }))
+    })
+
+    return {
+      currentStting,
+      fontList,
+    }
+  },
+}
+</script>

src/renderer/views/setting/components/Download.vue

@@ -0,0 +1,92 @@
+<template lang="pug">
+dt#download {{$t('setting__download')}}
+dd
+  base-checkbox(id="setting_download_enable" v-model="currentStting.download.enable" :label="$t('setting__download_enable')")
+dd(:tips="$t('setting__download_path_title')")
+  h3#download_path {{$t('setting__download_path')}}
+  div
+    p
+      | {{$t('setting__download_path_label')}}
+      span.auto-hidden.hover(:class="$style.savePath" @click="openDirInExplorer(currentStting.download.savePath)" :tips="$t('setting__download_path_open_label')") {{currentStting.download.savePath}}
+    p
+      base-btn.btn(min @click="handleChangeSavePath") {{$t('setting__download_path_change_btn')}}
+dd
+  h3#download_use_other_source {{$t('setting__download_use_other_source')}}
+  div
+    base-checkbox(id="setting_download_isUseOtherSource" v-model="currentStting.download.isUseOtherSource" :label="$t('setting__is_enable')")
+  div
+dd(:tips="$t('setting__download_name_title')")
+  h3#download_name {{$t('setting__download_name')}}
+  div
+    base-checkbox.gap-left(:id="`setting_download_musicName_${item.value}`" name="setting_download_musicName" :value="item.value" :key="item.value" need
+        v-model="currentStting.download.fileName" v-for="item in musicNames" :label="item.name")
+dd
+  h3#download_data_embed {{$t('setting__download_data_embed')}}
+  .gap-top
+    base-checkbox(id="setting_download_isEmbedPic" v-model="currentStting.download.isEmbedPic" :label="$t('setting__download_embed_pic')")
+  .gap-top
+    base-checkbox(id="setting_download_isEmbedLyric" v-model="currentStting.download.isEmbedLyric" :label="$t('setting__download_embed_lyric')")
+dd(:tips="$t('setting__download_lyric_title')")
+  h3#download_lyric {{$t('setting__download_lyric')}}
+  div
+    base-checkbox(id="setting_download_isDownloadLrc" v-model="currentStting.download.isDownloadLrc" :label="$t('setting__is_enable')")
+dd
+  h3#download_lyric {{$t('setting__download_lyric_format')}}
+  div
+    base-checkbox.gap-left(v-for="item in lrcFormatList" :key="item.id" :id="`setting_download_lrcFormat_${item.id}`"
+      name="setting_download_lrcFormat" need v-model="currentStting.download.lrcFormat" :value="item.id" :label="item.name")
+</template>
+
+<script>
+import { computed, useI18n } from '@renderer/utils/vueTools'
+// import { getSystemFonts } from '@renderer/utils/tools'
+import { openDirInExplorer, selectDir } from '@renderer/utils'
+import { currentStting } from '../setting'
+
+export default {
+  name: 'Download',
+  setup() {
+    const { t } = useI18n()
+
+    const handleChangeSavePath = () => {
+      selectDir({
+        title: t('setting__download_select_save_path'),
+        defaultPath: currentStting.value.download.savePath,
+        properties: ['openDirectory'],
+      }).then(result => {
+        if (result.canceled) return
+        currentStting.value.download.savePath = result.filePaths[0]
+      })
+    }
+
+    const musicNames = computed(() => {
+      return [
+        { value: '歌名 - 歌手', name: t('setting__download_name1') },
+        { value: '歌手 - 歌名', name: t('setting__download_name2') },
+        { value: '歌名', name: t('setting__download_name3') },
+      ]
+    })
+
+    const lrcFormatList = computed(() => {
+      return [
+        { id: 'utf8', name: t('setting__download_lyric_format_utf8') },
+        { id: 'gbk', name: t('setting__download_lyric_format_gbk') },
+      ]
+    })
+
+    return {
+      currentStting,
+      openDirInExplorer,
+      handleChangeSavePath,
+      musicNames,
+      lrcFormatList,
+    }
+  },
+}
+</script>
+
+<style lang="less" module>
+.save-path {
+  font-size: 12px;
+}
+</style>

src/renderer/views/setting/components/HotKey.vue

@@ -0,0 +1,314 @@
+<template lang="pug">
+dt#hot_key {{$t('setting__hot_key')}}
+dd
+  h3#hot_key_local_title {{$t('setting__hot_key_local_title')}}
+  div
+    base-checkbox(id="setting_download_hotKeyLocal" v-model="current_hot_key.local.enable" :label="$t('setting__is_enable')" @change="handleHotKeySaveConfig")
+  div(:class="$style.hotKeyContainer" :style="{ opacity: current_hot_key.local.enable ? 1 : .6 }")
+    div(:class="$style.hotKeyItem" v-for="item in allHotKeys.local")
+      h4(:class="$style.hotKeyItemTitle") {{$t('setting__hot_key_' + item.name)}}
+      base-input.key-bind(:class="$style.hotKeyItemInput" readonly @keyup.prevent :placeholder="$t('setting__hot_key_unset_input')"
+        :value="hotKeyConfig.local[item.name] && formatHotKeyName(hotKeyConfig.local[item.name].key)"
+        @focus="handleHotKeyFocus($event, item, 'local')"
+        @blur="handleHotKeyBlur($event, item, 'local')")
+
+  h3#hot_key_global_title {{$t('setting__hot_key_global_title')}}
+  div
+    base-checkbox(id="setting_download_hotKeyGlobal" v-model="current_hot_key.global.enable" :label="$t('setting__is_enable')" @change="handleEnableHotKey")
+  div(:class="$style.hotKeyContainer" :style="{ opacity: current_hot_key.global.enable ? 1 : .6 }")
+    div(:class="$style.hotKeyItem" v-for="item in allHotKeys.global")
+      h4(:class="$style.hotKeyItemTitle") {{$t('setting__hot_key_' + item.name)}}
+      base-input.key-bind(:class="[$style.hotKeyItemInput, hotKeyConfig.global[item.name] && hotKeyStatus[hotKeyConfig.global[item.name].key] && hotKeyStatus[hotKeyConfig.global[item.name].key].status === false ? $style.hotKeyFailed : null]"
+        :value="hotKeyConfig.global[item.name] && formatHotKeyName(hotKeyConfig.global[item.name].key)" @input.prevent readonly :placeholder="$t('setting__hot_key_unset_input')"
+        @focus="handleHotKeyFocus($event, item, 'global')"
+        @blur="handleHotKeyBlur($event, item, 'global')")
+</template>
+
+<script>
+import { ref, useI18n, onBeforeUnmount, toRaw } from '@renderer/utils/vueTools'
+import { allHotKeys, hotKeySetEnable, hotKeySetConfig, hotKeyGetStatus } from '@renderer/utils/tools'
+import { isMac } from '@common/utils'
+import { base as eventBaseName } from '@renderer/event/names'
+import { mainWindow as eventsNameMainWindow } from '@main/events/_name'
+
+import { currentStting } from '../setting'
+
+const formatHotKeyName = (name) => {
+  if (name.includes('arrow')) {
+    name = name.replace(/arrow(left|right|up|down)/, s => {
+      switch (s) {
+        case 'arrowleft': return '←'
+        case 'arrowright': return '→'
+        case 'arrowup': return '↑'
+        case 'arrowdown': return '↓'
+      }
+    })
+  }
+  if (name.includes('mod')) name = name.replace('mod', isMac ? 'Command' : 'Ctrl')
+  name = name.replace(/(\+|^)[a-z]/g, l => l.toUpperCase())
+  if (name.length > 1) name = name.replace(/\+/g, ' + ')
+  return name
+}
+
+export default {
+  name: 'HotKey',
+  setup() {
+    const { t } = useI18n()
+    const current_hot_key = ref({
+      local: {
+        enable: false,
+        keys: {},
+      },
+      global: {
+        enable: false,
+        keys: {},
+      },
+    })
+
+    const hotKeyConfig = ref({
+      local: {},
+      global: {},
+    })
+
+    const hotKeyStatus = ref({})
+    let isEditHotKey = false
+    let hotKeyTargetInput
+    let newHotKey
+
+    const initHotKeyConfig = () => {
+      let config = {}
+      for (const [type, typeInfo] of Object.entries(current_hot_key.value)) {
+        let configInfo = config[type] = {}
+        for (const [key, info] of Object.entries(typeInfo.keys)) {
+          if (info.name == null) continue
+          configInfo[info.name] = {
+            key,
+            info,
+          }
+        }
+      }
+      hotKeyConfig.value = config
+    }
+
+    const handleHotKeyFocus = async(event, info, type) => {
+      await hotKeySetEnable(false)
+      window.isEditingHotKey = true
+      isEditHotKey = true
+      let config = hotKeyConfig.value[type][info.name]
+      newHotKey = config?.key
+      hotKeyTargetInput = event.target
+      event.target.value = t('setting__hot_key_tip_input')
+    }
+
+    const handleHotKeyBlur = async(event, info, type) => {
+      await hotKeySetEnable(true)
+      window.isEditingHotKey = false
+      isEditHotKey = false
+      const prevInput = hotKeyTargetInput
+      hotKeyTargetInput = null
+      if (prevInput.value == t('setting__hot_key_tip_input')) {
+        prevInput.value = newHotKey ? formatHotKeyName(newHotKey) : ''
+        return
+      }
+      let config = hotKeyConfig.value[type][info.name]
+      let originKey
+      if (type == 'global' && newHotKey && current_hot_key.value.global.enable) {
+        try {
+          await hotKeySetConfig({
+            action: 'register',
+            data: {
+              key: newHotKey,
+              info,
+            },
+          })
+        } catch (error) {
+          console.log(error)
+          return
+        }
+      }
+      if (config) {
+        if (config.key == newHotKey) return
+        originKey = config.key
+        delete current_hot_key.value[type].keys[config.key]
+      } else if (!newHotKey) return
+
+      if (newHotKey) {
+        for (const [tempType, tempInfo] of Object.entries(current_hot_key.value)) {
+          if (tempType == type) continue
+          config = tempInfo.keys[newHotKey]
+          if (config) {
+            console.log(newHotKey, info, config, info.name, config.name)
+            delete current_hot_key.value[tempType].keys[newHotKey]
+            break
+          }
+        }
+        current_hot_key.value[type].keys[newHotKey] = info
+      }
+
+      initHotKeyConfig()
+      // console.log(this.current_hot_key.global.keys)
+      if (originKey && current_hot_key.value.global.enable) {
+        try {
+          await hotKeySetConfig({
+            action: 'unregister',
+            data: originKey,
+          })
+        } catch (error) {
+          console.log(error)
+        }
+      }
+      await handleHotKeySaveConfig()
+      await getHotKeyStatus()
+    }
+
+    const handleKeyDown = ({ event, keys, key, type }) => {
+      // if (!event || event.repeat) return
+      if (!event || event.repeat || type == 'up' || !isEditHotKey) return
+      event.preventDefault()
+      // console.log(event, key)
+      switch (key) {
+        case 'delete':
+        case 'backspace':
+          key = ''
+          break
+      }
+      hotKeyTargetInput.value = formatHotKeyName(key)
+      // console.log(keys, key, type)
+      newHotKey = key
+    }
+    const handleUpdateHotKeyConfig = (config) => {
+      // console.log(config)
+      for (const [type, info] of Object.entries(config)) {
+        current_hot_key.value[type] = info
+      }
+    }
+    const handleHotKeySaveConfig = async() => {
+      // console.log(this.current_hot_key)
+      window.appHotKeyConfig = current_hot_key.value
+      await hotKeySetConfig({
+        action: 'config',
+        data: toRaw(current_hot_key.value),
+        source: eventsNameMainWindow.name,
+      })
+    }
+    const handleEnableHotKey = async() => {
+      await hotKeySetConfig({
+        action: 'enable',
+        data: current_hot_key.value.global.enable,
+        source: eventsNameMainWindow.name,
+      })
+      await handleHotKeySaveConfig()
+      await getHotKeyStatus()
+    }
+    const getHotKeyStatus = () => {
+      return hotKeyGetStatus().then(status => {
+        // console.log(status)
+        hotKeyStatus.value = status
+        return status
+      })
+    }
+
+    current_hot_key.value = window.appHotKeyConfig
+    initHotKeyConfig()
+    getHotKeyStatus()
+
+    window.eventHub.on(eventBaseName.set_hot_key_config, handleUpdateHotKeyConfig)
+    window.eventHub.on(eventBaseName.key_down, handleKeyDown)
+
+    onBeforeUnmount(() => {
+      window.eventHub.off(eventBaseName.set_hot_key_config, handleUpdateHotKeyConfig)
+      window.eventHub.off(eventBaseName.key_down, handleKeyDown)
+    })
+
+    return {
+      currentStting,
+      allHotKeys,
+      current_hot_key,
+      hotKeyConfig,
+      hotKeyStatus,
+      handleHotKeyFocus,
+      handleHotKeyBlur,
+      handleEnableHotKey,
+      formatHotKeyName,
+      handleHotKeySaveConfig,
+    }
+  },
+}
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.hotKeyContainer {
+  display: flex;
+  flex-flow: row wrap;
+  // margin-top: -15px;
+  margin-bottom: 15px;
+  transition: opacity @transition-theme;
+}
+.hotKeyItem {
+  width: 30%;
+  padding-right: 35px;
+  margin-top: 15px;
+  box-sizing: border-box;
+}
+.hotKeyItemTitle {
+  .mixin-ellipsis-1;
+  padding-bottom: 5px;
+  color: @color-theme_2-font-label;
+  font-size: 12px;
+}
+.hotKeyItemInput {
+  width: 100%;
+  box-sizing: border-box;
+  // font-family: monospace;
+  &:focus {
+    background-color: @color-theme_2-active;
+    text-decoration: none;
+  }
+  &::placeholder {
+    color: rgba(197, 197, 197, 0.7)!important;
+  }
+}
+.hotKeyFailed {
+  text-decoration: line-through;
+}
+
+.del-line {
+  position: relative;
+  &:before {
+    display: block;
+    height: 1px;
+    position: absolute;
+    width: 110%;
+    content: ' ';
+    left: 0;
+    background-color: #000;
+    transform: rotate(-24deg);
+    transform-origin: 0;
+    top: 83%;
+    z-index: 1;
+  }
+  &:after {
+    display: block;
+    height: 1px;
+    position: absolute;
+    width: 110%;
+    content: ' ';
+    left: 0;
+    background-color: #000;
+    transform: rotate(23deg);
+    transform-origin: 0px;
+    top: 2px;
+    z-index: 1;
+  }
+}
+
+each(@themes, {
+  :global(#root.@{value}) {
+    .hotKeyItemTitle {
+      color: ~'@{color-@{value}-theme_2-font-label}';
+    }
+  }
+})
+</style>

src/renderer/views/setting/components/List.vue

@@ -0,0 +1,30 @@
+<template lang="pug">
+dt#list {{$t('setting__list')}}
+dd
+  .gap-top
+    base-checkbox(id="setting_list_showSource_enable" v-model="currentStting.list.isShowSource" :label="$t('setting__list_source')")
+  .gap-top
+    base-checkbox(id="setting_list_scroll_enable" v-model="currentStting.list.isSaveScrollLocation" :label="$t('setting__list_scroll')")
+dd(:tips="$t('setting__basic_sourcename_title')")
+  h3#list_addMusicLocationType {{$t('setting__list_add_music_location_type')}}
+  div
+    base-checkbox.gap-left(id="setting_list_add_music_location_type_top"
+      name="setting_list_add_music_location_type" need v-model="currentStting.list.addMusicLocationType" value="top" :label="$t('setting__list_add_music_location_type_top')")
+    base-checkbox.gap-left(id="setting_list_add_music_location_type_bottom"
+      name="setting_list_add_music_location_type" need v-model="currentStting.list.addMusicLocationType" value="bottom" :label="$t('setting__list_add_music_location_type_bottom')")
+
+</template>
+
+<script>
+// import { ref, onBeforeUnmount } from '@renderer/utils/vueTools'
+import { currentStting } from '../setting'
+
+export default {
+  name: 'List',
+  setup() {
+    return {
+      currentStting,
+    }
+  },
+}
+</script>

src/renderer/views/setting/components/Network.vue

@@ -0,0 +1,57 @@
+<template lang="pug">
+dt#network {{$t('setting__network')}}
+dd
+  h3#network_proxy_title {{$t('setting__network_proxy_title')}}
+  div
+    p
+      base-checkbox(id="setting_network_proxy_enable" v-model="currentStting.network.proxy.enable" :label="$t('setting__is_enable')")
+    p
+      base-input.gap-left(v-model.trim="currentStting.network.proxy.host" :placeholder="$t('setting__network_proxy_host')")
+      base-input.gap-left(v-model.trim="currentStting.network.proxy.port" :placeholder="$t('setting__network_proxy_port')")
+    p
+      base-input.gap-left(v-model.trim="currentStting.network.proxy.username" :placeholder="$t('setting__network_proxy_username')")
+      base-input.gap-left(v-model.trim="currentStting.network.proxy.password" type="password" :placeholder="$t('setting__network_proxy_password')")
+
+</template>
+
+<script>
+import { watch, onBeforeUnmount } from '@renderer/utils/vueTools'
+import { proxy } from '@renderer/core/share'
+import { debounce } from '@renderer/utils'
+
+import { currentStting } from '../setting'
+
+export default {
+  name: 'Network',
+  setup() {
+    watch(() => currentStting.value.network.proxy.enable, enable => {
+      proxy.enable = enable
+    })
+
+    const setHost = debounce(host => {
+      proxy.host = host
+    }, 500)
+    watch(() => currentStting.value.network.proxy.host, setHost)
+    const setPort = debounce(port => {
+      proxy.port = port
+    }, 500)
+    watch(() => currentStting.value.network.proxy.port, setPort)
+    const setUserName = debounce(username => {
+      proxy.username = username
+    }, 500)
+    watch(() => currentStting.value.network.proxy.username, setUserName)
+    const setPassword = debounce(password => {
+      proxy.password = password
+    }, 500)
+    watch(() => currentStting.value.network.proxy.password, setPassword)
+
+    onBeforeUnmount(() => {
+      if (currentStting.value.network.proxy.enable && !currentStting.value.network.proxy.host) proxy.enable = false
+    })
+
+    return {
+      currentStting,
+    }
+  },
+}
+</script>

src/renderer/views/setting/components/Odc.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+dt#odc {{$t('setting__odc')}}
+dd
+  .gap-top
+    base-checkbox(id="setting_odc_isAutoClearSearchInput" v-model="currentStting.odc.isAutoClearSearchInput" :label="$t('setting__odc_clear_search_input')")
+  .gap-top
+    base-checkbox(id="setting_odc_isAutoClearSearchList" v-model="currentStting.odc.isAutoClearSearchList" :label="$t('setting__odc_clear_search_list')")
+</template>
+
+<script>
+// import { ref, onBeforeUnmount } from '@renderer/utils/vueTools'
+import { currentStting } from '../setting'
+
+export default {
+  name: 'Odc',
+  setup() {
+    return {
+      currentStting,
+    }
+  },
+}
+</script>

src/renderer/views/setting/components/Other.vue

@@ -0,0 +1,76 @@
+<template lang="pug">
+dt#other {{$t('setting__other')}}
+dd
+  h3#other_tray_theme {{$t('setting__other_tray_theme')}}
+  div
+    base-checkbox.gap-left(:id="'setting_tray_theme_' + item.id" v-model="currentStting.tray.themeId" name="setting_tray_theme" need
+      :label="item.label" :key="item.id" :value="item.id" v-for="item in trayThemeList")
+dd
+  h3#other_resource_cache {{$t('setting__other_resource_cache')}}
+  div
+    p
+      | {{$t('setting__other_resource_cache_label')}}
+      span.auto-hidden {{cacheSize}}
+    p
+      base-btn.btn(min :disabled="isDisabledResourceCacheClear" @click="clearResourceCache") {{$t('setting__other_resource_cache_clear_btn')}}
+dd
+  h3#other_play_list_cache {{$t('setting__other_play_list_cache')}}
+  div
+    base-btn.btn(min :disabled="isDisabledListCacheClear" @click="clearListCache") {{$t('setting__other_play_list_cache_clear_btn')}}
+</template>
+
+<script>
+import { ref, computed, useI18n, useCommit } from '@renderer/utils/vueTools'
+import { sizeFormate, clearCache, getCacheSize } from '@renderer/utils'
+
+import { currentStting } from '../setting'
+
+export default {
+  name: 'Other',
+  setup() {
+    const { t } = useI18n()
+
+    const trayThemeList = computed(() => {
+      return [
+        { id: 0, name: 'native', label: t('setting__other_tray_theme_native') },
+        { id: 1, name: 'origin', label: t('setting__other_tray_theme_origin') },
+        { id: 2, name: 'black', label: t('setting__other_tray_theme_black') },
+      ]
+    })
+
+    const cacheSize = ref('0 B')
+    const isDisabledResourceCacheClear = ref(false)
+    const isDisabledListCacheClear = ref(false)
+    const refreshCacheSize = () => {
+      getCacheSize().then(size => {
+        cacheSize.value = sizeFormate(size)
+      })
+    }
+    const clearResourceCache = () => {
+      isDisabledResourceCacheClear.value = true
+      clearCache().then(() => {
+        refreshCacheSize()
+        isDisabledResourceCacheClear.value = false
+      })
+    }
+    refreshCacheSize()
+
+    const clearMyListCache = useCommit('list', 'clearCache')
+    const clearListCache = () => {
+      isDisabledListCacheClear.value = true
+      clearMyListCache()
+      isDisabledListCacheClear.value = false
+    }
+
+    return {
+      currentStting,
+      trayThemeList,
+      cacheSize,
+      isDisabledResourceCacheClear,
+      isDisabledListCacheClear,
+      clearResourceCache,
+      clearListCache,
+    }
+  },
+}
+</script>

src/renderer/views/setting/components/Play.vue

@@ -0,0 +1,62 @@
+<template lang="pug">
+dt#play {{$t('setting__play')}}
+dd
+  .gap-top
+    base-checkbox(id="setting_player_save_play_time" v-model="currentStting.player.isSavePlayTime" :label="$t('setting__play_save_play_time')")
+  .gap-top
+    base-checkbox(id="setting_player_lyric_transition" v-model="currentStting.player.isShowLyricTranslation" :label="$t('setting__play_lyric_transition')")
+  .gap-top
+    base-checkbox(id="setting_player_lyric_play_lxlrc" v-model="currentStting.player.isPlayLxlrc" :label="$t('setting__play_lyric_lxlrc')")
+  .gap-top
+    base-checkbox(id="setting_player_highQuality" v-model="currentStting.player.highQuality" :label="$t('setting__play_quality')")
+  .gap-top
+    base-checkbox(id="setting_player_showTaskProgess" v-model="currentStting.player.isShowTaskProgess" :label="$t('setting__play_task_bar')")
+  .gap-top
+    base-checkbox(id="setting_player_isMediaDeviceRemovedStopPlay" v-model="currentStting.player.isMediaDeviceRemovedStopPlay" :label="$t('setting__play_mediaDevice_remove_stop_play')")
+dd(:tips="$t('setting__play_mediaDevice_title')")
+  h3#play_mediaDevice {{$t('setting__play_mediaDevice')}}
+  div
+    base-selection.gap-left(:list="mediaDevices" v-model="currentStting.player.mediaDeviceId" item-key="deviceId" item-name="label")
+</template>
+
+<script>
+import { ref, onBeforeUnmount, watch, nextTick } from '@renderer/utils/vueTools'
+import { setTaskBarProgress } from '@renderer/utils/tools'
+
+import { currentStting } from '../setting'
+
+export default {
+  name: 'Play',
+  setup() {
+    const mediaDevices = ref([])
+    const getMediaDevice = async() => {
+      const devices = await navigator.mediaDevices.enumerateDevices()
+      let audioDevices = devices.filter(device => device.kind === 'audiooutput')
+      mediaDevices.value = audioDevices
+      // console.log(this.mediaDevices)
+    }
+    getMediaDevice()
+
+    navigator.mediaDevices.addEventListener('devicechange', getMediaDevice)
+    onBeforeUnmount(() => {
+      navigator.mediaDevices.removeEventListener('devicechange', getMediaDevice)
+    })
+
+    watch(() => currentStting.value.player.isShowTaskProgess, val => {
+      if (val) return
+      nextTick(() => {
+        setTaskBarProgress({
+          status: -1,
+          mode: 'normal',
+        })
+      })
+    })
+
+
+    return {
+      currentStting,
+      mediaDevices,
+    }
+  },
+}
+</script>

src/renderer/views/setting/components/Search.vue

@@ -0,0 +1,25 @@
+<template lang="pug">
+dt#search {{$t('setting__search')}}
+dd
+  .gap-top
+    base-checkbox(id="setting_search_showHot_enable" v-model="currentStting.search.isShowHotSearch" :label="$t('setting__search_hot')")
+  .gap-top
+    base-checkbox(id="setting_search_showHistory_enable" v-model="currentStting.search.isShowHistorySearch" :label="$t('setting__search_history')")
+  .gap-top
+    base-checkbox(id="setting_search_focusSearchBox_enable" v-model="currentStting.search.isFocusSearchBox" :label="$t('setting__search_focus_search_box')")
+
+</template>
+
+<script>
+// import { ref, onBeforeUnmount } from '@renderer/utils/vueTools'
+import { currentStting } from '../setting'
+
+export default {
+  name: 'Search',
+  setup() {
+    return {
+      currentStting,
+    }
+  },
+}
+</script>

src/renderer/views/setting/components/Sync.vue

@@ -0,0 +1,80 @@
+<template lang="pug">
+dt#sync {{$t('setting__sync')}}
+dd
+  base-checkbox(id="setting_sync_enable" v-model="currentStting.sync.enable" :label="syncEnableTitle")
+  div
+    p.small {{$t('setting__sync_auth_code', { code: sync.status.code || '' })}}
+    p.small {{$t('setting__sync_address', { address: sync.status.address.join(', ') || '' })}}
+    p.small {{$t('setting__sync_device', { devices: syncDevices })}}
+    p
+      base-btn.btn(min :disabled="!sync.status.status" @click="refreshSyncCode") {{$t('setting__sync_refresh_code')}}
+dd
+  h3#sync_port {{$t('setting__sync_port')}}
+  div
+    p
+      base-input.gap-left(v-model.trim="currentStting.sync.port" :placeholder="$t('setting__sync_port_tip')")
+</template>
+
+<script>
+import { computed, useI18n, watch } from '@renderer/utils/vueTools'
+import { sync } from '@renderer/core/share'
+import { refreshSyncCode, syncEnable } from '@renderer/utils/tools'
+import { debounce } from '@renderer/utils'
+import { currentStting } from '../setting'
+
+export default {
+  name: 'Update',
+  setup() {
+    const { t } = useI18n()
+
+
+    const syncEnableTitle = computed(() => {
+      let title = t('setting__sync_enable')
+      if (sync.status.message) {
+        title += ` [${sync.status.message}]`
+      }
+      // else if (this.sync.status.address.length) {
+      //   // title += ` [${this.sync.status.address.join(', ')}]`
+      // }
+      return title
+    })
+    const syncDevices = computed(() => {
+      return sync.status.devices.length
+        ? sync.status.devices.map(d => `${d.deviceName} (${d.clientId.substring(0, 5)})`).join(', ')
+        : ''
+    })
+
+    watch(() => currentStting.value.sync.enable, enable => {
+      syncEnable({
+        enable,
+        port: currentStting.value.sync.port,
+      })
+      sync.enable = enable
+    })
+
+    const setPort = debounce(port => {
+      syncEnable({
+        enable: currentStting.value.sync.enable,
+        port,
+      })
+      sync.port = port
+    }, 500)
+    watch(() => currentStting.value.sync.port, setPort)
+
+
+    return {
+      currentStting,
+      sync,
+      syncEnableTitle,
+      syncDevices,
+      refreshSyncCode,
+    }
+  },
+}
+</script>
+
+<style lang="less" module>
+.save-path {
+  font-size: 12px;
+}
+</style>

src/renderer/views/setting/components/Update.vue

@@ -0,0 +1,53 @@
+<template lang="pug">
+dt#update {{$t('setting__update')}}
+dd
+  p.small
+    | {{$t('setting__update_latest_label')}}{{versionInfo.newVersion ? versionInfo.newVersion.version : $t('setting__update_unknown')}}
+  p.small {{$t('setting__update_current_label')}}{{versionInfo.version}}
+  p.small(v-if="versionInfo.downloadProgress" style="line-height: 1.5;")
+    | {{$t('setting__update_downloading')}}
+    br
+    | {{$t('setting__update_progress')}}{{downloadProgress}}
+  p(v-if="versionInfo.newVersion")
+    span(v-if="versionInfo.isLatestVer") {{$t('setting__update_latest')}}
+    base-btn.btn.gap-left(v-else min @click="showUpdateModal") {{$t('setting__update_open_version_modal_btn')}}
+  p.small(v-else) {{$t('setting__update_checking')}}
+</template>
+
+<script>
+import { computed, useI18n } from '@renderer/utils/vueTools'
+import { versionInfo } from '@renderer/core/share'
+import { sizeFormate } from '@renderer/utils/tools'
+// import { openDirInExplorer, selectDir } from '@renderer/utils'
+import { currentStting } from '../setting'
+
+export default {
+  name: 'Update',
+  setup() {
+    const { t } = useI18n()
+
+    const downloadProgress = computed(() => {
+      return versionInfo.downloadProgress
+        ? `${versionInfo.downloadProgress.percent.toFixed(2)}% - ${sizeFormate(versionInfo.downloadProgress.transferred)}/${sizeFormate(versionInfo.downloadProgress.total)} - ${sizeFormate(versionInfo.downloadProgress.bytesPerSecond)}/s`
+        : t('setting__update_init')
+    })
+
+    const showUpdateModal = () => {
+      versionInfo.showModal = true
+    }
+
+    return {
+      currentStting,
+      versionInfo,
+      downloadProgress,
+      showUpdateModal,
+    }
+  },
+}
+</script>
+
+<style lang="less" module>
+.save-path {
+  font-size: 12px;
+}
+</style>

src/renderer/views/setting/components/UserApiModal.vue

@@ -0,0 +1,234 @@
+<template lang="pug">
+material-modal(:show="modelValue" bg-close @close="handleClose")
+  main(:class="$style.main")
+    h2 {{$t('user_api__title')}}
+    ul.scroll(v-if="apiList.length" :class="$style.content")
+      li(:class="[$style.listItem, {[$style.active]: setting.apiSource == api.id}]" v-for="(api, index) in apiList" :key="api.id")
+        div(:class="$style.listLeft")
+          h3 {{api.name}}
+          p {{api.description}}
+        base-btn(:class="$style.listBtn" outline :tips="$t('user_api__btn_remove')" @click.stop="handleRemove(index)")
+          svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 212.982 212.982' space='preserve' v-once)
+            use(xlink:href='#icon-delete')
+    div(v-else :class="$style.content")
+      div(:class="$style.noitem") {{$t('user_api__noitem')}}
+    div(:class="$style.note")
+      p(:class="[$style.ruleLink]")
+        | {{$t('user_api__readme')}}
+        span.hover.underline(@click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/blob/master/FAQ.md#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%BA%90%E8%84%9A%E6%9C%AC%E7%BC%96%E5%86%99%E8%AF%B4%E6%98%8E')" tips="https://github.com/lyswhut/lx-music-desktop/blob/master/FAQ.md") FAQ.md
+      p {{$t('user_api__note')}}
+    div(:class="$style.footer")
+      base-btn(:class="$style.footerBtn" @click="handleImport") {{$t('user_api__btn_import')}}
+      //- base-btn(:class="$style.footerBtn" @click="handleExport") {{$t('user_api__btn_export')}}
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { rendererInvoke, NAMES } from '@common/ipc'
+import { promises as fsPromises } from 'fs'
+import { selectDir, openUrl } from '@renderer/utils'
+import apiSourceInfo from '@renderer/utils/music/api-source-info'
+import { userApi, apiSource } from '@renderer/core/share'
+
+export default {
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    return {
+      userApi,
+    }
+  },
+  computed: {
+    ...mapGetters(['setting']),
+    apiList() {
+      return this.userApi.list
+    },
+  },
+  methods: {
+    handleImport() {
+      selectDir({
+        title: this.$t('user_api__import_file'),
+        properties: ['openFile'],
+        filters: [
+          { name: 'LX API File', extensions: ['js'] },
+          { name: 'All Files', extensions: ['*'] },
+        ],
+      }).then(result => {
+        if (result.canceled) return
+        return fsPromises.readFile(result.filePaths[0]).then(data => {
+          return rendererInvoke(NAMES.mainWindow.import_user_api, data.toString()).then(({ apiList }) => {
+            userApi.list = apiList
+          })
+        })
+      })
+    },
+    handleExport() {
+
+    },
+    async handleRemove(index) {
+      const api = this.apiList[index]
+      if (!api) return
+      if (this.setting.apiSource == api.id) {
+        let backApi = apiSourceInfo.find(api => !api.disabled)
+        if (backApi) apiSource.value = backApi.id
+      }
+      userApi.list = await rendererInvoke(NAMES.mainWindow.remove_user_api, [api.id])
+    },
+    handleClose() {
+      this.$emit('update:modelValue', false)
+    },
+    handleOpenUrl(url) {
+      openUrl(url)
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.main {
+  padding: 15px;
+  max-width: 400px;
+  min-width: 300px;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  min-height: 0;
+  // max-height: 100%;
+  // overflow: hidden;
+  h2 {
+    font-size: 16px;
+    color: @color-theme_2-font;
+    line-height: 1.3;
+    text-align: center;
+  }
+}
+
+.name {
+  color: @color-theme;
+}
+
+.content {
+  flex: auto;
+  min-height: 100px;
+  max-height: 100%;
+  margin-top: 15px;
+}
+.listItem {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  transition: background-color 0.2s ease;
+  padding: 10px;
+  border-radius: @radius-border;
+  &:hover {
+    background-color: @color-theme_2-hover;
+  }
+  &.active {
+    background-color: @color-theme_2-active;
+  }
+  h3 {
+    font-size: 15px;
+    color: @color-theme_2-font;
+    word-break: break-all;
+  }
+  p {
+    margin-top: 5px;
+    font-size: 14px;
+    color: @color-theme_2-font-label;
+    word-break: break-all;
+  }
+}
+.noitem {
+  height: 100px;
+  font-size: 18px;
+  color: @color-theme_2-font-label;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.listLeft {
+  flex: auto;
+  min-width: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+}
+.listBtn {
+  flex: none;
+  height: 30px;
+  width: 30px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  svg {
+    width: 60%;
+  }
+}
+.note {
+  margin-top: 15px;
+  font-size: 12px;
+  line-height: 1.25;
+  color: @color-theme_2-font;
+  p {
+    + p {
+      margin-top: 5px;
+    }
+  }
+}
+.footer {
+  margin-top: 15px;
+  display: flex;
+  flex-flow: row nowrap;
+}
+.footerBtn {
+  flex: auto;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 10px !important;
+  width: 150px;
+  .mixin-ellipsis-1;
+  + .footerBtn {
+    margin-left: 15px;
+  }
+}
+.ruleLink {
+  .mixin-ellipsis-1;
+}
+
+
+each(@themes, {
+  :global(#root.@{value}) {
+    .main {
+      h2 {
+        color: ~'@{color-@{value}-theme_2-font}';
+      }
+    }
+    .listItem {
+      &:hover {
+        background-color: ~'@{color-@{value}-theme_2-hover}';
+      }
+      &.active {
+        background-color: ~'@{color-@{value}-theme_2-active}';
+      }
+      h3 {
+        color: ~'@{color-@{value}-theme_2-font}';
+      }
+      p {
+        color: ~'@{color-@{value}-theme_2-font-label}';
+      }
+    }
+    .noitem {
+      color: ~'@{color-@{value}-theme_2-font-label}';
+    }
+  }
+})
+
+</style>

src/renderer/views/setting/setting.js

@@ -0,0 +1,79 @@
+import { ref } from '@renderer/utils/vueTools'
+
+export const currentStting = ref({
+  player: {
+    togglePlayMethod: 'random',
+    highQuality: false,
+    isShowTaskProgess: true,
+    volume: 1,
+    mediaDeviceId: 'default',
+    isMediaDeviceRemovedStopPlay: false,
+  },
+  desktopLyric: {
+    enable: false,
+    isLock: false,
+    width: 600,
+    height: 700,
+    x: -1,
+    y: -1,
+    theme: '',
+    style: {
+      font: '',
+      fontSize: 125,
+      opacity: 80,
+      isZoomActiveLrc: true,
+    },
+  },
+  list: {
+    isShowAlbumName: true,
+    isShowSource: true,
+    isSaveScrollLocation: true,
+  },
+  search: {
+    searchSource: 'kw',
+    tempSearchSource: 'kw',
+    isShowHotSearch: false,
+    isShowHistorySearch: false,
+    isFocusSearchBox: false,
+  },
+  download: {
+    enable: false,
+    savePath: '',
+    fileName: '歌名 - 歌手',
+    isDownloadLrc: false,
+    lrcFormat: 'utf8',
+    isEmbedPic: true,
+    isEmbedLyric: true,
+  },
+  network: {
+    proxy: {
+      enable: false,
+      host: '',
+      port: '',
+      username: '',
+      password: '',
+    },
+  },
+  odc: {
+    isAutoClearSearchInput: false,
+    isAutoClearSearchList: false,
+  },
+  tray: {
+    isShow: false,
+    isToTray: false,
+    themeId: 0,
+  },
+  sync: {
+    enable: false,
+    port: '23332',
+  },
+  windowSizeId: 1,
+  langId: 'cns',
+  themeId: 0,
+  sourceId: 0,
+  isShowAnimation: true,
+  randomAnimate: true,
+  isAgreePact: false,
+  controlBtnPosition: 'left',
+  apiSource: 'temp',
+})

src/renderer/views/songList/SongList.vue

@@ -1,79 +1,77 @@
 <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-if="isVisibleListDetail")
-        div(:class="$style.songListHeader")
-          div(:class="$style.songListHeaderLeft" :style="{ backgroundImage: 'url('+(selectListInfo.img || listDetail.info.img)+')' }")
-            //- 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="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.headerRightBtn" :disabled="detailLoading" @click="playSongListDetail") {{$t('view.song_list.play_all')}}
-            material-btn(:class="$style.headerRightBtn" :disabled="detailLoading" @click="addSongListDetail") {{$t('view.song_list.add_all')}}
-            material-btn(:class="$style.headerRightBtn" @click="hideListDetail") {{$t('view.song_list.back')}}
-        material-song-list(v-model="selectedData" @action="handleSongListAction" :source="source" :page="listDetail.page" :limit="listDetail.limit"
-         :total="listDetail.total" :noItem="isGetDetailFailed ? $t('view.song_list.loding_list_fail') : $t('view.song_list.loding_list')" :list="listDetail.list")
-    transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-      div(:class="$style.songListContainer" v-show="!isVisibleListDetail")
-        div(:class="$style.header")
-          material-tag-list(:class="$style.tagList" :list-width="listWidth" ref="tagList" :list="tagList" v-model="tagInfo")
-          material-tab(:class="$style.tab" :list="sorts" item-key="id" ref="tab" item-name="name" v-model="sortId")
-          material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
-        div(:class="$style.songListContent")
-          transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-            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" :style="{ backgroundImage: 'url('+item.img+')' }")
-                        //- img(:src="item.img")
-                      div(:class="$style.right" :src="item.img")
-                        h4 {{item.name}}
-                        p(:class="$style.play_count") {{item.play_count}}
-                        p(:class="$style.author") {{item.author}}
-                    li(:class="$style.item" style="cursor: default;" v-for="i in spaceNum")
-                  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'")
-                  div(:style="{ width: '50%' }")
-                    material-search-input(:class="$style.searchInput" v-model="importSongListText" @event="handleImportSongListEvent" big :placeholder="$t('view.song_list.input_text')")
-                      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')
-                    div(:class="$style.tips")
-                      ul
-                        li {{$t('view.song_list.tip_1')}}
-                        li {{$t('view.song_list.tip_2')}}
-                        li {{$t('view.song_list.tip_3')}}
-          transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-            div(v-show="!listData.list.length && sortId !== 'importSongList'" :class="$style.noitem")
-              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="selectedData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
-    material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false" :list-name="listDetail.info.name")
-    material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectedData" @close="handleListAddModalClose" :list-name="listDetail.info.name")
+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.songListHeader")
+        div(:class="$style.songListHeaderLeft" :style="{ backgroundImage: 'url('+(selectListInfo.img || listDetail.info.img)+')' }")
+          //- 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="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")
+          base-btn(:class="$style.headerRightBtn" :disabled="detailLoading" @click="playSongListDetail") {{$t('list__play')}}
+          base-btn(:class="$style.headerRightBtn" :disabled="detailLoading" @click="addSongListDetail") {{$t('list__collect')}}
+          base-btn(:class="$style.headerRightBtn" @click="hideListDetail") {{$t('back')}}
+      material-online-list(ref="songList" @toggle-page="handleToggleListDetailPage" :page="listDetail.page" :limit="listDetail.limit" :total="listDetail.total"
+        :list="listDetail.list" :noItem="isGetDetailFailed ? $t('list__load_failed') : $t('list__loading')")
+  transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
+    div(:class="$style.songListContainer" v-show="!isVisibleListDetail")
+      div(:class="$style.header")
+        tag-list(:class="$style.tagList" :list-width="listWidth" ref="tagList" :list="tagList" v-model="tagInfo")
+        base-tab(:class="$style.tab" :list="sorts" item-key="id" ref="tab" item-name="name" v-model="sortId")
+        base-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
+      div(:class="$style.songListContent")
+        transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
+          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" :style="{ backgroundImage: 'url('+item.img+')' }")
+                      //- img(:src="item.img")
+                    div(:class="$style.right" :src="item.img")
+                      h4 {{item.name}}
+                      p(:class="$style.play_count") {{item.play_count}}
+                      p(:class="$style.author") {{item.author}}
+                  li(:class="$style.item" style="cursor: default;" v-for="i in spaceNum")
+                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'")
+                div(:style="{ width: '50%' }")
+                  material-search-input(:class="$style.searchInput" v-model="importSongListText" @event="handleImportSongListEvent" big :placeholder="$t('songlist__import_input_tip')")
+                    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')
+                  div(:class="$style.tips")
+                    ul
+                      li {{$t('songlist__import_input_tip_1')}}
+                      li {{$t('songlist__import_input_tip_2')}}
+                      li {{$t('songlist__import_input_tip_3')}}
+        transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
+          div(v-show="!listData.list.length && sortId !== 'importSongList'" :class="$style.noitem")
+            p {{$t('list__loading')}}
 </template>
 
 <script>
 import { mapGetters, mapMutations, mapActions } from 'vuex'
-import { scrollTo, assertApiSupport, openUrl } from '../utils'
-import musicSdk from '../utils/music'
+import { scrollTo } from '@renderer/utils'
+import TagList from './components/TagList'
 export default {
   name: 'SongList',
+  components: {
+    TagList,
+  },
   data() {
     return {
       tagInfo: {
-        name: this.$t('material.tag_list.default'),
+        name: this.$t('default'),
         id: null,
       },
       sortId: undefined,
       source: null,
       isShowDownload: false,
       musicInfo: null,
-      selectedData: [],
       isShowDownloadMultiple: false,
       isToggleSource: false,
       isShowListAdd: false,
@@ -88,7 +86,6 @@ export default {
   computed: {
     ...mapGetters(['setting']),
     ...mapGetters('songList', ['sourceInfo', 'tags', 'listData', 'isVisibleListDetail', 'selectListInfo', 'listDetail']),
-    ...mapGetters('list', ['defaultList']),
     sorts() {
       let list
       list = this.source ? [...this.sourceInfo.sortList[this.source]] : []
@@ -101,7 +98,7 @@ export default {
         case 'kg':
         case 'xm':
           list.push({
-            name: this.$t('view.song_list.open_list', { name: this.sourceInfo.sources.find(s => s.id == this.source).name }),
+            name: this.$t('songlist__open_list', { name: this.sourceInfo.sources.find(s => s.id == this.source).name }),
             id: 'importSongList',
           })
       }
@@ -182,14 +179,14 @@ export default {
     ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
     ...mapMutations('list', ['listAdd', 'listAddMultiple', 'createUserList']),
     ...mapMutations('player', {
-      setPlayList: 'setList',
+      setTempList: 'setTempList',
       setTempPlayList: 'setTempPlayList',
     }),
     listenEvent() {
-      window.eventHub.$on('key_backspace_down', this.handle_key_backspace_down)
+      window.eventHub.on('key_backspace_down', this.handle_key_backspace_down)
     },
     unlistenEvent() {
-      window.eventHub.$off('key_backspace_down', this.handle_key_backspace_down)
+      window.eventHub.off('key_backspace_down', this.handle_key_backspace_down)
     },
     handle_key_backspace_down({ event }) {
       if (!this.isVisibleListDetail ||
@@ -201,102 +198,6 @@ export default {
         event.target.classList.contains('key-bind')) return
       this.hideListDetail()
     },
-    handleListBtnClick(info) {
-      switch (info.action) {
-        case 'download':
-          this.musicInfo = this.listDetail.list[info.index]
-          this.$nextTick(() => {
-            this.isShowDownload = true
-          })
-          break
-        case 'play':
-          this.testPlay(info.index)
-          break
-        case 'search':
-          this.handleSearch(info.index)
-          break
-        case 'listAdd':
-          this.musicInfo = this.listDetail.list[info.index]
-          this.$nextTick(() => {
-            this.isShowListAdd = true
-          })
-          break
-      }
-    },
-    handleMenuClick(info) {
-      let minfo
-      let url
-      switch (info.action) {
-        case 'download':
-          if (this.selectedData.length) {
-            this.isShowDownloadMultiple = true
-          } else {
-            this.musicInfo = this.listDetail.list[info.index]
-            this.$nextTick(() => {
-              this.isShowDownload = true
-            })
-          }
-          break
-        case 'play':
-          if (this.selectedData.length) {
-            this.listAddMultiple({ id: 'default', list: [...this.selectedData] })
-            this.resetSelect()
-          }
-          this.testPlay(info.index)
-          break
-        case 'playLater':
-          if (this.selectedData.length) {
-            this.setTempPlayList(this.selectedData.map(s => ({ listId: '__temp__', musicInfo: s })))
-            this.resetSelect()
-          } else {
-            this.setTempPlayList([{ listId: '__temp__', musicInfo: this.listDetail.list[info.index] }])
-          }
-          break
-        case 'search':
-          this.handleSearch(info.index)
-          break
-        case 'addTo':
-          if (this.selectedData.length) {
-            this.$nextTick(() => {
-              this.isShowListAddMultiple = true
-            })
-          } else {
-            this.musicInfo = this.listDetail.list[info.index]
-            this.$nextTick(() => {
-              this.isShowListAdd = true
-            })
-          }
-          break
-        case 'sourceDetail':
-          minfo = this.listDetail.list[info.index]
-          url = musicSdk[minfo.source].getMusicDetailPageUrl(minfo)
-          if (!url) return
-          openUrl(url)
-      }
-    },
-    testPlay(index) {
-      let targetSong = this.listDetail.list[index]
-      // if (!this.assertApiSupport(targetSong.source)) return
-      this.listAdd({ id: 'default', musicInfo: targetSong })
-      let targetIndex = this.defaultList.list.findIndex(
-        s => s.songmid === targetSong.songmid,
-      )
-      if (targetIndex > -1) {
-        this.setPlayList({
-          list: this.defaultList,
-          index: targetIndex,
-        })
-      }
-    },
-    handleSearch(index) {
-      const info = this.listDetail.list[index]
-      this.$router.push({
-        path: 'search',
-        query: {
-          text: `${info.name} ${info.singer}`,
-        },
-      })
-    },
     handleToggleListPage(page) {
       this.getList(page).then(() => {
         this.$nextTick(() => {
@@ -307,20 +208,10 @@ export default {
     handleToggleListDetailPage(page) {
       this.handleGetListDetail(this.selectListInfo.id, page).then(() => {
         this.$nextTick(() => {
-          scrollTo(this.$refs.dom_scrollContent, 0)
+          this.$refs.songList.scrollToTop()
         })
       })
     },
-    handleAddDownload(type) {
-      this.createDownload({ musicInfo: this.musicInfo, type })
-      this.isShowDownload = false
-    },
-    handleAddDownloadMultiple(type) {
-      if (this.source == 'xm' && type == 'flac') type = 'wav'
-      this.createDownloadMultiple({ list: this.filterList(this.selectedData), type })
-      this.resetSelect()
-      this.isShowDownloadMultiple = false
-    },
     handleItemClick(index) {
       // this.detailLoading = true
       this.setSelectListInfo(this.listData.list[index])
@@ -342,25 +233,6 @@ export default {
     //       break
     //   }
     // },
-    handleSongListAction({ action, data }) {
-      switch (action) {
-        case 'listBtnClick':
-          return this.handleListBtnClick(data)
-        case 'menuClick':
-          return this.handleMenuClick(data)
-        case 'togglePage':
-          return this.handleToggleListDetailPage(data)
-        // case 'flowBtnClick':
-        //   return this.handleFlowBtnClick(data)
-        case 'testPlay':
-          return this.testPlay(data)
-        case 'search':
-          return this.handleSearch(data)
-      }
-    },
-    resetSelect() {
-      this.selectedData = []
-    },
     hideListDetail() {
       setTimeout(async() => {
         this.setVisibleListDetail(false)
@@ -368,10 +240,6 @@ export default {
         this.setTagListWidth()
       }, 50)
     },
-    handleListAddModalClose(isSelect) {
-      if (isSelect) this.resetSelect()
-      this.isShowListAddMultiple = false
-    },
     handleImportSongListEvent({ action }) {
       switch (action) {
         case 'submit':
@@ -395,9 +263,6 @@ export default {
       this.setVisibleListDetail(true)
       this.handleGetListDetail(this.importSongListText, 1)
     },
-    filterList(list) {
-      return list.filter(s => this.assertApiSupport(s.source))
-    },
     setTagListWidth() {
       this.isInitedTagListWidth = true
       this.listWidth = this.$refs.tagList.$el.clientWidth + this.$refs.tab.$el.clientWidth + 2
@@ -409,9 +274,6 @@ export default {
         return Promise.reject(err)
       })
     },
-    assertApiSupport(source) {
-      return assertApiSupport(source)
-    },
     async fetchList() {
       this.detailLoading = true
       return this.getListDetailAll({ source: this.source, id: this.selectListInfo.id }).finally(() => {
@@ -434,11 +296,8 @@ export default {
       if (!this.listDetail.info.name) return
       const list = await this.fetchList()
       if (!list.length) return
-      this.setPlayList({
-        list: {
-          list,
-          id: null,
-        },
+      this.setTempList({
+        list,
         index: 0,
       })
     },
@@ -448,7 +307,7 @@ export default {
 
 
 <style lang="less" module>
-@import '../assets/styles/layout.less';
+@import '@renderer/assets/styles/layout.less';
 
 .container {
   height: 100%;
@@ -547,16 +406,17 @@ export default {
   display: flex;
   align-items: center;
   padding-right: 15px;
-}
-.header-right-btn {
-  border-radius: 0;
-  &:first-child {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-  }
-  &:last-child {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
+
+  .header-right-btn {
+    border-radius: 0;
+    &:first-child {
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+    &:last-child {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
   }
 }
 
@@ -669,7 +529,7 @@ export default {
 }
 
 each(@themes, {
-  :global(#container.@{value}) {
+  :global(#root.@{value}) {
     .song-list-header-middle {
       p {
         color: ~'@{color-@{value}-theme_2-font-label}';

src/renderer/views/songList/components/TagList.vue

@@ -0,0 +1,243 @@
+<template lang="pug">
+div(:class="[$style.tagList, show ? $style.active : '']")
+  div(:class="$style.label" ref="dom_btn" @click="handleShow")
+    span {{modelValue.name}}
+    div(:class="$style.icon")
+      svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.847 451.847' space='preserve')
+        use(xlink:href='#icon-down')
+  div.scroll(:class="$style.list" :style="{ width: listWidth + 'PX' }" @click.stop ref="dom_list")
+    div(:class="$style.tag" @click="handleClick(null)") {{$t('default')}}
+    dl(v-for="type in list")
+      dt(:class="$style.type") {{type.name}}
+      dd(:class="$style.tag" v-for="tag in type.list" @click="handleClick(tag)") {{tag.name}}
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    listWidth: {
+      type: Number,
+      default: 645,
+    },
+    modelValue: {
+      type: Object,
+    },
+  },
+  computed: {
+    ...mapGetters(['setting']),
+  },
+  data() {
+    return {
+      show: false,
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.handleHide)
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.handleHide)
+  },
+  methods: {
+    handleHide(e) {
+      // if (e && e.target.parentNode != this.$refs.dom_list && this.show) return this.show = false
+      // console.log(this.$refs)
+      if (e && (e.target == this.$refs.dom_btn || this.$refs.dom_btn.contains(e.target))) return
+      setTimeout(() => {
+        this.show = false
+      }, 50)
+    },
+    handleClick(item) {
+      if (!item) {
+        item = {
+          name: this.$t('default'),
+          id: null,
+        }
+      }
+      if (item.id === this.modelValue.id) return this.handleShow()
+      this.$emit('update:modelValue', item)
+      this.$emit('change', item)
+      this.handleShow()
+    },
+    handleShow() {
+      this.show = !this.show
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.tag-list {
+  font-size: 12px;
+  position: relative;
+
+  &.active {
+    .label {
+      .icon {
+        svg{
+          transform: rotate(180deg);
+        }
+      }
+    }
+    .list {
+      opacity: 1;
+      transform: scaleY(1);
+    }
+  }
+}
+
+.label {
+  padding: 8px 15px;
+  // background-color: @color-btn-background;
+  transition: background-color @transition-theme;
+  border-top: 2px solid @color-tab-border-bottom;
+  // border-left: 2px solid @color-tab-border-bottom;
+  box-sizing: border-box;
+  text-align: center;
+  // border-top-left-radius: 3px;
+  color: @color-btn;
+  cursor: pointer;
+
+  display: flex;
+
+  span {
+    flex: auto;
+  }
+  .icon {
+    flex: none;
+    margin-left: 7px;
+    line-height: 0;
+    svg {
+      width: .9em;
+      transition: transform .2s ease;
+      transform: rotate(0);
+    }
+  }
+
+  &:hover {
+    background-color: @color-btn-hover;
+  }
+  &:active {
+    background-color: @color-btn-active;
+  }
+}
+
+.list {
+  position: absolute;
+  top: 100%;
+  width: 645px;
+  left: 0;
+  border-bottom: 2px solid @color-tab-border-bottom;
+  border-right: 2px solid @color-tab-border-bottom;
+  border-bottom-right-radius: 5px;
+  background-color: @color-theme_2-background_2;
+  opacity: 0;
+  transform: scaleY(0);
+  overflow-y: auto;
+  transform-origin: 0 0 0;
+  max-height: 250px;
+  transition: .25s ease;
+  transition-property: transform, opacity;
+  z-index: 10;
+  padding: 10px;
+  box-sizing: border-box;
+
+  li {
+    cursor: pointer;
+    padding: 8px 15px;
+    // color: @color-btn;
+    text-align: center;
+    outline: none;
+    transition: background-color @transition-theme;
+    background-color: @color-btn-background;
+    box-sizing: border-box;
+
+    &:hover {
+      background-color: @color-btn-hover;
+    }
+    &:active {
+      background-color: @color-btn-active;
+    }
+  }
+}
+
+.type {
+  padding-top: 10px;
+  padding-bottom: 3px;
+  color: @color-theme_2-font-label;
+}
+
+.tag {
+  display: inline-block;
+  margin: 5px;
+  background-color: @color-btn-background;
+  padding: 8px 10px;
+  border-radius: @radius-progress-border;
+  transition: background-color @transition-theme;
+  cursor: pointer;
+  &:hover {
+    background-color: @color-btn-hover;
+  }
+  &:active {
+    background-color: @color-btn-active;
+  }
+}
+
+
+each(@themes, {
+  :global(#root.@{value}) {
+    .label {
+      border-top-color: ~'@{color-@{value}-tab-border-bottom}';
+      // border-left-color: ~'@{color-@{value}-tab-border-bottom}';
+      color: ~'@{color-@{value}-btn}';
+      &:hover {
+        background-color: ~'@{color-@{value}-btn-hover}';
+      }
+      &:active {
+        background-color: ~'@{color-@{value}-btn-active}';
+      }
+    }
+
+    .list {
+      border-bottom-color: ~'@{color-@{value}-tab-border-bottom}';
+      border-right-color: ~'@{color-@{value}-tab-border-bottom}';
+      background-color: ~'@{color-@{value}-theme_2-background_2}';
+      // border-left-color: ~'@{color-@{value}-tab-border-bottom}';
+      li {
+        // color: ~'@{color-@{value}-btn}';
+        background-color: ~'@{color-@{value}-btn-background}';
+        &:hover {
+          background-color: ~'@{color-@{value}-btn-hover}';
+        }
+        &:active {
+          background-color: ~'@{color-@{value}-btn-active}';
+        }
+      }
+    }
+
+    .tag {
+      background-color: ~'@{color-@{value}-btn-background}';
+      &:hover {
+        background-color: ~'@{color-@{value}-btn-hover}';
+      }
+      &:active {
+        background-color: ~'@{color-@{value}-btn-active}';
+      }
+    }
+
+    .type {
+      color: ~'@{color-@{value}-theme_2-font-label}';
+    }
+  }
+})
+
+</style>