From 0332b81d583c86120790f20461a0115f84c607fc Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Wed, 20 May 2020 22:52:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E3=80=81=E6=96=B0=E5=A2=9E=E5=8F=B3=E9=94=AE?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md                          |   9 +-
 src/common/config.js                          |  10 +-
 src/renderer/assets/styles/index.less         |   6 +
 src/renderer/assets/styles/variables.less     |  41 ++-
 src/renderer/components/core/Player.vue       |   4 +-
 src/renderer/components/material/Btn.vue      |   8 +-
 .../components/material/ListButtons.vue       |  22 +-
 src/renderer/components/material/Menu.vue     |  29 +-
 src/renderer/components/material/Select.vue   |  16 +-
 .../components/material/Selection.vue         |  26 +-
 src/renderer/components/material/SongList.vue | 189 ++++++++----
 src/renderer/components/material/TagList.vue  |  24 +-
 .../components/material/listAddModal.vue      |  16 +-
 .../material/listAddMultipleModal.vue         |  16 +-
 .../lang/cns/material/list_add_modal.json     |   3 +-
 .../cns/material/list_add_multiple_modal.json |   3 +-
 src/renderer/lang/cns/material/song_list.json |   6 +-
 src/renderer/lang/cns/view/download.json      |   8 +-
 src/renderer/lang/cns/view/list.json          |   5 +
 src/renderer/lang/cns/view/search.json        |   5 +-
 .../lang/cnt/material/list_add_modal.json     |   3 +-
 .../cnt/material/list_add_multiple_modal.json |   3 +-
 src/renderer/lang/cnt/material/song_list.json |   6 +-
 src/renderer/lang/cnt/view/download.json      |   8 +-
 src/renderer/lang/cnt/view/list.json          |   5 +
 src/renderer/lang/cnt/view/search.json        |   5 +-
 .../lang/en/material/list_add_modal.json      |   3 +-
 .../en/material/list_add_multiple_modal.json  |   3 +-
 src/renderer/lang/en/material/song_list.json  |   6 +-
 src/renderer/lang/en/view/download.json       |   8 +-
 src/renderer/lang/en/view/list.json           |   5 +
 src/renderer/lang/en/view/search.json         |   5 +-
 src/renderer/store/modules/list.js            |  15 +
 src/renderer/utils/index.js                   |   2 +
 src/renderer/views/Download.vue               | 285 +++++++++++++-----
 src/renderer/views/Leaderboard.vue            | 237 +++++++++++++--
 src/renderer/views/List.vue                   | 231 +++++++++++---
 src/renderer/views/Search.vue                 | 185 +++++++++---
 src/renderer/views/SongList.vue               |  64 +++-
 39 files changed, 1175 insertions(+), 350 deletions(-)

diff --git a/publish/changeLog.md b/publish/changeLog.md
index b94482e0..da161078 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -1,14 +1,14 @@
 ### 新增
 
-- 新增`rpm`、`pacman`包的打包
+- 新增`rpm`、`pacman`包的构建
 - 新增当前音频输出设备改变时是否暂停播放的设置，默认关闭
-- 新增自定义列表，创建列表的按钮在表头`#`左侧，鼠标移上去才会显示；编辑列表名字时，按`ESC`键可取消编辑，按回车键或使输入框失去焦点即可保存列表名字
+- 新增歌曲列表右键菜单
+- 新增自定义列表，创建列表的按钮在表头`#`左侧，鼠标移上去才会显示；编辑列表名字时，按`ESC`键可快速取消编辑，按回车键或使输入框失去焦点即可保存列表名字，右击列表可编辑已创建的列表，“试听列表”与“我的收藏”两个列表固定不可编辑
 
 ### 优化
 
-- 优化浮动按钮与布局颜色
 - 改进歌曲切换时的歌词滚动效果
-- 极大优化批量添加、删除播放列表的歌曲操作流畅度
+- 优化批量添加、删除播放列表的歌曲操作逻辑，大幅提升流畅度
 
 ### 修复
 
@@ -21,3 +21,4 @@
 ### 更变
 
 - 修改设置-列表-是否显示歌曲源的默认设置为选中（该变更不影响之前的设置）
+- 移除浮动按钮，现在在多选完成后可鼠标右击随意一项在弹出的右键菜单中进行原来悬浮按钮的操作
diff --git a/src/common/config.js b/src/common/config.js
index 451cc76e..833c3a86 100644
--- a/src/common/config.js
+++ b/src/common/config.js
@@ -17,35 +17,35 @@ module.exports = {
     {
       id: 2,
       name: 'medium',
-      width: 1012,
+      width: 1018,
       height: 650,
       fontSize: '16px',
     },
     {
       id: 3,
       name: 'big',
-      width: 1104,
+      width: 1114,
       height: 708,
       fontSize: '17px',
     },
     {
       id: 4,
       name: 'larger',
-      width: 1198,
+      width: 1202,
       height: 766,
       fontSize: '17px',
     },
     {
       id: 5,
       name: 'oversized',
-      width: 1380,
+      width: 1382,
       height: 886,
       fontSize: '18px',
     },
     {
       id: 6,
       name: 'huge',
-      width: 1656,
+      width: 1686,
       height: 1062,
       fontSize: '19px',
     },
diff --git a/src/renderer/assets/styles/index.less b/src/renderer/assets/styles/index.less
index acde4152..140f0ae4 100644
--- a/src/renderer/assets/styles/index.less
+++ b/src/renderer/assets/styles/index.less
@@ -57,6 +57,9 @@ table {
       &.active {
         background-color: @color-theme_2-active;
       }
+      &.selected {
+        background-color: @color-theme_2-hover;
+      }
       td {
         padding: 6px;
         position: relative;
@@ -217,6 +220,9 @@ each(@themes, {
           &.active {
             background-color: ~'@{color-@{value}-theme_2-active}';
           }
+          &.selected {
+            background-color: ~'@{color-@{value}-theme_2-hover}';
+          }
         }
       }
     }
diff --git a/src/renderer/assets/styles/variables.less b/src/renderer/assets/styles/variables.less
index 6d4a8ae7..fced8d9a 100644
--- a/src/renderer/assets/styles/variables.less
+++ b/src/renderer/assets/styles/variables.less
@@ -25,6 +25,9 @@
 @color-theme-sidebar: @color-theme;
 @color-btn: lighten(@color-theme, 5%);
 @color-btn-background: fadeout(lighten(@color-theme, 35%), 70%);
+@color-btn-hover: fadeout(lighten(@color-theme, 5%), 70%);
+@color-btn-active: fadeout(darken(@color-theme, 5%), 70%);
+@color-btn-select: fadeout(lighten(@color-theme, 5%), 50%);
 
 @color-pagination-background: fadeout(lighten(@color-theme, 45%), 30%);
 @color-pagination-hover: fadeout(lighten(@color-theme, 10%), 70%);
@@ -89,6 +92,9 @@
 @color-green-theme-sidebar: @color-green-theme;
 @color-green-btn: lighten(@color-green-theme, 5%);
 @color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%);
+@color-green-btn-hover: fadeout(lighten(@color-green-theme, 5%), 70%);
+@color-green-btn-active: fadeout(darken(@color-green-theme, 5%), 70%);
+@color-green-btn-select: fadeout(lighten(@color-green-theme, 5%), 50%);
 @color-green-pagination-background: fadeout(lighten(@color-green-theme, 45%), 30%);
 @color-green-pagination-hover: fadeout(lighten(@color-green-theme, 10%), 70%);
 @color-green-pagination-active: fadeout(darken(@color-green-theme, 10%), 70%);
@@ -142,6 +148,9 @@
 @color-yellow-theme-sidebar: @color-yellow-theme;
 @color-yellow-btn: darken(@color-yellow-theme, 5%);
 @color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 60%);
+@color-yellow-btn-hover: fadeout(lighten(@color-yellow-theme, 5%), 70%);
+@color-yellow-btn-active: fadeout(darken(@color-yellow-theme, 5%), 70%);
+@color-yellow-btn-select: fadeout(lighten(@color-yellow-theme, 5%), 50%);
 @color-yellow-pagination-background: fadeout(lighten(@color-yellow-theme, 30%), 30%);
 @color-yellow-pagination-hover: fadeout(lighten(@color-yellow-theme, 5%), 70%);
 @color-yellow-pagination-active: fadeout(darken(@color-yellow-theme, 5%), 70%);
@@ -194,6 +203,9 @@
 @color-orange-theme-sidebar: @color-orange-theme;
 @color-orange-btn: lighten(@color-orange-theme, 5%);
 @color-orange-btn-background: fadeout(lighten(@color-orange-theme, 25%), 60%);
+@color-orange-btn-hover: fadeout(lighten(@color-orange-theme, 5%), 70%);
+@color-orange-btn-active: fadeout(darken(@color-orange-theme, 5%), 70%);
+@color-orange-btn-select: fadeout(lighten(@color-orange-theme, 5%), 50%);
 @color-orange-pagination-background: fadeout(lighten(@color-orange-theme, 25%), 40%);
 @color-orange-pagination-hover: fadeout(lighten(@color-orange-theme, 10%), 70%);
 @color-orange-pagination-active: fadeout(darken(@color-orange-theme, 10%), 70%);
@@ -246,6 +258,9 @@
 @color-blue-theme-sidebar: @color-blue-theme;
 @color-blue-btn: lighten(@color-blue-theme, 5%);
 @color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 50%);
+@color-blue-btn-hover: fadeout(lighten(@color-blue-theme, 5%), 70%);
+@color-blue-btn-active: fadeout(darken(@color-blue-theme, 5%), 70%);
+@color-blue-btn-select: fadeout(lighten(@color-blue-theme, 5%), 50%);
 @color-blue-pagination-background: fadeout(lighten(@color-blue-theme, 40%), 30%);
 @color-blue-pagination-hover: fadeout(lighten(@color-blue-theme, 15%), 70%);
 @color-blue-pagination-active: fadeout(darken(@color-blue-theme, 15%), 70%);
@@ -298,6 +313,9 @@
 @color-red-theme-sidebar: @color-red-theme;
 @color-red-btn: lighten(@color-red-theme, 5%);
 @color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%);
+@color-red-btn-hover: fadeout(lighten(@color-red-theme, 5%), 70%);
+@color-red-btn-active: fadeout(darken(@color-red-theme, 5%), 70%);
+@color-red-btn-select: fadeout(lighten(@color-red-theme, 5%), 50%);
 @color-red-pagination-background: fadeout(lighten(@color-red-theme, 40%), 30%);
 @color-red-pagination-hover: fadeout(lighten(@color-red-theme, 15%), 70%);
 @color-red-pagination-active: fadeout(darken(@color-red-theme, 15%), 70%);
@@ -352,6 +370,9 @@
 @color-pink-theme-sidebar: @color-pink-theme;
 @color-pink-btn: darken(@color-pink-theme, 3%);
 @color-pink-btn-background: fadeout(lighten(@color-pink-theme, 20%), 50%);
+@color-pink-btn-hover: fadeout(lighten(@color-pink-theme, 5%), 70%);
+@color-pink-btn-active: fadeout(darken(@color-pink-theme, 5%), 70%);
+@color-pink-btn-select: fadeout(lighten(@color-pink-theme, 5%), 50%);
 @color-pink-pagination-background: fadeout(lighten(@color-pink-theme, 23%), 25%);
 @color-pink-pagination-hover: fadeout(lighten(@color-pink-theme, 5%), 70%);
 @color-pink-pagination-active: fadeout(darken(@color-pink-theme, 5%), 70%);
@@ -404,6 +425,9 @@
 @color-purple-theme-sidebar: @color-purple-theme;
 @color-purple-btn: lighten(@color-purple-theme, 5%);
 @color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%);
+@color-purple-btn-hover: fadeout(lighten(@color-purple-theme, 5%), 70%);
+@color-purple-btn-active: fadeout(darken(@color-purple-theme, 5%), 70%);
+@color-purple-btn-select: fadeout(lighten(@color-purple-theme, 5%), 50%);
 @color-purple-pagination-background: fadeout(lighten(@color-purple-theme, 40%), 30%);
 @color-purple-pagination-hover: fadeout(lighten(@color-purple-theme, 15%), 70%);
 @color-purple-pagination-active: fadeout(darken(@color-purple-theme, 15%), 70%);
@@ -456,6 +480,9 @@
 @color-grey-theme-sidebar: @color-grey-theme;
 @color-grey-btn: lighten(@color-grey-theme, 5%);
 @color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%);
+@color-grey-btn-hover: fadeout(lighten(@color-grey-theme, 5%), 70%);
+@color-grey-btn-active: fadeout(darken(@color-grey-theme, 5%), 70%);
+@color-grey-btn-select: fadeout(lighten(@color-grey-theme, 5%), 50%);
 @color-grey-pagination-background: fadeout(lighten(@color-grey-theme, 45%), 30%);
 @color-grey-pagination-hover: fadeout(lighten(@color-grey-theme, 10%), 70%);
 @color-grey-pagination-active: fadeout(darken(@color-grey-theme, 10%), 70%);
@@ -509,6 +536,9 @@
 @color-ming-theme-sidebar: @color-ming-theme;
 @color-ming-btn: lighten(@color-ming-theme, 5%);
 @color-ming-btn-background: fadeout(lighten(@color-ming-theme, 35%), 75%);
+@color-ming-btn-hover: fadeout(lighten(@color-ming-theme, 5%), 70%);
+@color-ming-btn-active: fadeout(darken(@color-ming-theme, 5%), 70%);
+@color-ming-btn-select: fadeout(lighten(@color-ming-theme, 5%), 50%);
 @color-ming-pagination-background: fadeout(lighten(@color-ming-theme, 50%), 35%);
 @color-ming-pagination-hover: fadeout(lighten(@color-ming-theme, 15%), 70%);
 @color-ming-pagination-active: fadeout(darken(@color-ming-theme, 15%), 70%);
@@ -563,6 +593,9 @@
 @color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
 @color-mid_autumn-btn: lighten(@color-mid_autumn-theme, 10%);
 @color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
+@color-mid_autumn-btn-hover: fadeout(lighten(@color-mid_autumn-theme, 5%), 70%);
+@color-mid_autumn-btn-active: fadeout(darken(@color-mid_autumn-theme, 5%), 70%);
+@color-mid_autumn-btn-select: fadeout(lighten(@color-mid_autumn-theme, 5%), 50%);
 @color-mid_autumn-pagination-background: fadeout(lighten(@color-mid_autumn-theme, 45%), 50%);
 @color-mid_autumn-pagination-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 70%);
 @color-mid_autumn-pagination-active: fadeout(darken(@color-mid_autumn-theme, 10%), 70%);
@@ -615,6 +648,9 @@
 @color-naruto-theme-sidebar: rgba(255, 255, 255, .3);
 @color-naruto-btn: lighten(@color-naruto-theme, 2%);
 @color-naruto-btn-background: fadeout(lighten(@color-naruto-theme, 35%), 70%);
+@color-naruto-btn-hover: fadeout(lighten(@color-naruto-theme, 5%), 70%);
+@color-naruto-btn-active: fadeout(darken(@color-naruto-theme, 5%), 70%);
+@color-naruto-btn-select: fadeout(lighten(@color-naruto-theme, 5%), 50%);
 @color-naruto-pagination-background: fadeout(lighten(@color-naruto-theme, 20%), 70%);
 @color-naruto-pagination-hover: fadeout(lighten(@color-naruto-theme, 10%), 60%);
 @color-naruto-pagination-active: fadeout(darken(@color-naruto-theme, 10%), 70%);
@@ -667,6 +703,9 @@
 @color-happy_new_year-theme-sidebar: rgba(119, 37, 18, 0.1);
 @color-happy_new_year-btn: desaturate(@color-happy_new_year-theme, 10%);
 @color-happy_new_year-btn-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 60%);
+@color-happy_new_year-btn-hover: fadeout(lighten(@color-happy_new_year-theme, 5%), 70%);
+@color-happy_new_year-btn-active: fadeout(darken(@color-happy_new_year-theme, 5%), 70%);
+@color-happy_new_year-btn-select: fadeout(lighten(@color-happy_new_year-theme, 5%), 50%);
 @color-happy_new_year-pagination-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 40%);
 @color-happy_new_year-pagination-hover: fadeout(lighten(@color-happy_new_year-theme, 10%), 70%);
 @color-happy_new_year-pagination-active: fadeout(darken(@color-happy_new_year-theme, 10%), 70%);
@@ -703,7 +742,7 @@
 
 
 // Width
-@width-app-left: 6.5%;
+@width-app-left: 6.6%;
 
 // Height
 @height-toolbar: 54px;
diff --git a/src/renderer/components/core/Player.vue b/src/renderer/components/core/Player.vue
index 30176515..1ad59d24 100644
--- a/src/renderer/components/core/Player.vue
+++ b/src/renderer/components/core/Player.vue
@@ -162,8 +162,8 @@ export default {
     'setting.player.mediaDeviceId'(n) {
       this.setMediaDevice()
     },
-    list(n, o) {
-      if (n === o) {
+    async list(n, o) {
+      if (n === o && this.musicInfo.songmid) {
         let index = this.listId == 'download'
           ? n.findIndex(s => s.musicInfo.songmid === this.musicInfo.songmid)
           : n.findIndex(s => s.songmid === this.musicInfo.songmid)
diff --git a/src/renderer/components/material/Btn.vue b/src/renderer/components/material/Btn.vue
index 2e3b9ec9..fafc6017 100644
--- a/src/renderer/components/material/Btn.vue
+++ b/src/renderer/components/material/Btn.vue
@@ -37,10 +37,10 @@ export default {
   }
 
   &:hover {
-    background-color: @color-theme_2-hover;
+    background-color: @color-btn-hover;
   }
   &:active {
-    background-color: @color-theme_2-active;
+    background-color: @color-btn-active;
   }
 }
 
@@ -55,10 +55,10 @@ each(@themes, {
       color: ~'@{color-@{value}-btn}';
       background-color: ~'@{color-@{value}-btn-background}';
       &:hover {
-        background-color: ~'@{color-@{value}-theme_2-hover}';
+        background-color: ~'@{color-@{value}-btn-hover}';
       }
       &:active {
-        background-color: ~'@{color-@{value}-theme_2-active}';
+        background-color: ~'@{color-@{value}-btn-active}';
       }
     }
   }
diff --git a/src/renderer/components/material/ListButtons.vue b/src/renderer/components/material/ListButtons.vue
index c95e1a1f..fd4a5842 100644
--- a/src/renderer/components/material/ListButtons.vue
+++ b/src/renderer/components/material/ListButtons.vue
@@ -1,27 +1,27 @@
 <template lang="pug">
 div(:class="$style.btns")
-  button(type="button" v-if="playBtn" :title="$t('material.list_buttons.play')" @click.stop="handleClick('play')")
+  button(type="button" v-if="playBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.play')" @click.stop="handleClick('play')")
     svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 287.386 287.386' space='preserve')
       use(xlink:href='#icon-testPlay')
-  button(type="button" v-if="listAddBtn" :title="$t('material.list_buttons.add_to')" @click.stop="handleClick('listAdd')")
+  button(type="button" v-if="listAddBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.add_to')" @click.stop="handleClick('listAdd')")
     svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve')
       use(xlink:href='#icon-addTo')
-  button(type="button" v-if="downloadBtn" :title="$t('material.list_buttons.download')" @click.stop="handleClick('download')")
+  button(type="button" v-if="downloadBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.download')" @click.stop="handleClick('download')")
     svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 475.078 475.077' space='preserve')
       use(xlink:href='#icon-download')
-  button(type="button" :title="$t('material.list_buttons.add')" v-if="userInfo" @click.stop="handleClick('add')")
+  //- button(type="button" :title="$t('material.list_buttons.add')" v-if="userInfo" @click.stop="handleClick('add')")
     svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve')
       use(xlink:href='#icon-addTo')
-  button(type="button" v-if="startBtn" :title="$t('material.list_buttons.start')" @click.stop="handleClick('start')")
+  button(type="button" v-if="startBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.start')" @click.stop="handleClick('start')")
     svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
       use(xlink:href='#icon-play')
-  button(type="button" v-if="pauseBtn" :title="$t('material.list_buttons.pause')" @click.stop="handleClick('pause')")
+  button(type="button" v-if="pauseBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.pause')" @click.stop="handleClick('pause')")
     svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
       use(xlink:href='#icon-pause')
-  button(type="button" v-if="fileBtn" :title="$t('material.list_buttons.file')" @click.stop="handleClick('file')")
+  button(type="button" v-if="fileBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.file')" @click.stop="handleClick('file')")
     svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='-61 0 512 512' space='preserve')
       use(xlink:href='#icon-musicFile')
-  button(type="button" v-if="searchBtn" :title="$t('material.list_buttons.search')" @click.stop="handleClick('search')")
+  button(type="button" v-if="searchBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.search')" @click.stop="handleClick('search')")
     svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 30.239 30.239' space='preserve')
       use(xlink:href='#icon-search')
   button(type="button" v-if="removeBtn" :title="$t('material.list_buttons.remove')" @click.stop="handleClick('remove')")
@@ -31,7 +31,7 @@ div(:class="$style.btns")
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+// import { mapGetters } from 'vuex'
 
 export default {
   props: {
@@ -49,7 +49,7 @@ export default {
     },
     removeBtn: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     downloadBtn: {
       type: Boolean,
@@ -73,7 +73,7 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(['userInfo']),
+    // ...mapGetters(['userInfo']),
   },
   methods: {
     handleClick(action) {
diff --git a/src/renderer/components/material/Menu.vue b/src/renderer/components/material/Menu.vue
index aacaec91..65baa340 100644
--- a/src/renderer/components/material/Menu.vue
+++ b/src/renderer/components/material/Menu.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 ul(:class="$style.list" :style="listStyles" ref="dom_list")
-  li(v-for="item in menus" @click="handleClick(item)" :disabled="item.disabled") {{item[itemName]}}
+  li(v-for="item in menus" @click="handleClick(item)" v-if="!item.hide" :disabled="item.disabled") {{item[itemName]}}
 </template>
 
 <script>
@@ -41,7 +41,7 @@ export default {
         this.listStyles.top = n.y + 'px'
         if (this.show) {
           if (this.listStyles.transitionProperty != this.transition2) this.listStyles.transitionProperty = this.transition2
-          this.listStyles.transform = `scaleY(1) translateY(${this.handleGetOffset(n.y)}px)`
+          this.listStyles.transform = `scaleY(1) translate(${this.handleGetOffsetXY(n.x, n.y)})`
         }
       },
       deep: true,
@@ -55,7 +55,7 @@ export default {
         top: 0,
         opacity: 0,
         transitionProperty: 'transform, opacity',
-        transform: 'scale(0) translateY(0)',
+        transform: 'scale(0) translate(0,0)',
       },
       transition1: 'transform, opacity',
       transition2: 'transform, opacity, top, left',
@@ -72,21 +72,30 @@ export default {
     handleShow() {
       this.show = true
       this.listStyles.opacity = 1
-      this.listStyles.transform = `scaleY(1) translateY(${this.handleGetOffset(this.location.y)}px)`
+      this.listStyles.transform = `scaleY(1) translate(${this.handleGetOffsetXY(this.location.x, this.location.y)})`
     },
     handleHide(e) {
       this.listStyles.opacity = 0
-      this.listStyles.transform = 'scale(0) translateY(0)'
+      this.listStyles.transform = 'scale(0) translate(0, 0)'
       this.show = false
     },
-    handleGetOffset(top) {
+    handleGetOffsetXY(left, top) {
+      const listWidth = this.$refs.dom_list.clientWidth
       const listHeight = this.$refs.dom_list.clientHeight
       const dom_container = this.$refs.dom_list.offsetParent
+      const containerWidth = dom_container.clientWidth
       const containerHeight = dom_container.clientHeight
-      if (containerHeight < listHeight) return 0
+      const offsetWidth = containerWidth - left - listWidth
       const offsetHeight = containerHeight - top - listHeight
-      if (offsetHeight > 0) return 0
-      return offsetHeight - 5
+      let x = 0
+      let y = 0
+      if (containerWidth > listWidth && offsetWidth < 0) {
+        x = offsetWidth - 15
+      }
+      if (containerHeight > listHeight && offsetHeight < 0) {
+        y = offsetHeight - 5
+      }
+      return `${x}px, ${y}px`
     },
     handleDocumentClick(event) {
       if (!this.show) return
@@ -121,7 +130,7 @@ export default {
   background-color: @color-theme_2-background_2;
   box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
   z-index: 10;
-
+  overflow: hidden;
   li {
     cursor: pointer;
     min-width: 80px;
diff --git a/src/renderer/components/material/Select.vue b/src/renderer/components/material/Select.vue
index 37cf2cda..aba8f41a 100644
--- a/src/renderer/components/material/Select.vue
+++ b/src/renderer/components/material/Select.vue
@@ -86,10 +86,10 @@ export default {
   .mixin-ellipsis-1;
 
   &:hover {
-    background-color: @color-theme_2-hover;
+    background-color: @color-btn-hover;
   }
   &:active {
-    background-color: @color-theme_2-active;
+    background-color: @color-btn-active;
   }
 }
 
@@ -121,10 +121,10 @@ export default {
     .mixin-ellipsis-1;
 
     &:hover {
-      background-color: @color-theme_2-hover;
+      background-color: @color-btn-hover;
     }
     &:active {
-      background-color: @color-theme_2-active;
+      background-color: @color-btn-active;
     }
   }
 }
@@ -137,10 +137,10 @@ each(@themes, {
       border-left-color: ~'@{color-@{value}-tab-border-bottom}';
       color: ~'@{color-@{value}-btn}';
       &:hover {
-        background-color: ~'@{color-@{value}-theme_2-hover}';
+        background-color: ~'@{color-@{value}-btn-hover}';
       }
       &:active {
-        background-color: ~'@{color-@{value}-theme_2-active}';
+        background-color: ~'@{color-@{value}-btn-active}';
       }
     }
 
@@ -152,10 +152,10 @@ each(@themes, {
         // color: ~'@{color-@{value}-btn}';
         background-color: ~'@{color-@{value}-btn-background}';
         &:hover {
-          background-color: ~'@{color-@{value}-theme_2-hover}';
+          background-color: ~'@{color-@{value}-btn-hover}';
         }
         &:active {
-          background-color: ~'@{color-@{value}-theme_2-active}';
+          background-color: ~'@{color-@{value}-btn-active}';
         }
       }
     }
diff --git a/src/renderer/components/material/Selection.vue b/src/renderer/components/material/Selection.vue
index 3bafd550..b4cdabfa 100644
--- a/src/renderer/components/material/Selection.vue
+++ b/src/renderer/components/material/Selection.vue
@@ -1,11 +1,11 @@
 <template lang="pug">
-  div(:class="[$style.select, show ? $style.active : '']")
-    div(:class="$style.label" ref="dom_btn" @click="handleShow")
-      span {{label}}
-      div(:class="$style.icon")
+  div.content(:class="[$style.select, show ? $style.active : '']")
+    div.label-content(:class="$style.label" ref="dom_btn" @click="handleShow")
+      span.label {{label}}
+      div.icon(: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')
-    ul.scroll(:class="$style.list" :style="listStyles" ref="dom_list")
+    ul.list.scroll(:class="$style.list" :style="listStyles" ref="dom_list")
       li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :title="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
 </template>
 
@@ -140,10 +140,10 @@ export default {
   }
 
   &:hover {
-    background-color: @color-theme_2-hover;
+    background-color: @color-btn-hover;
   }
   &:active {
-    background-color: @color-theme_2-active;
+    background-color: @color-btn-active;
   }
 }
 
@@ -176,10 +176,10 @@ export default {
     .mixin-ellipsis-1;
 
     &:hover {
-      background-color: @color-theme_2-hover;
+      background-color: @color-btn-hover;
     }
     &:active {
-      background-color: @color-theme_2-active;
+      background-color: @color-btn-active;
     }
     &.active {
       color: @color-btn;
@@ -194,10 +194,10 @@ each(@themes, {
       color: ~'@{color-@{value}-btn}';
       background-color: ~'@{color-@{value}-btn-background}';
       &:hover {
-        background-color: ~'@{color-@{value}-theme_2-hover}';
+        background-color: ~'@{color-@{value}-btn-hover}';
       }
       &:active {
-        background-color: ~'@{color-@{value}-theme_2-active}';
+        background-color: ~'@{color-@{value}-btn-active}';
       }
     }
 
@@ -207,10 +207,10 @@ each(@themes, {
         // color: ~'@{color-@{value}-btn}';
         background-color: ~'@{color-@{value}-btn-background}';
         &:hover {
-          background-color: ~'@{color-@{value}-theme_2-hover}';
+          background-color: ~'@{color-@{value}-btn-hover}';
         }
         &:active {
-          background-color: ~'@{color-@{value}-theme_2-active}';
+          background-color: ~'@{color-@{value}-btn-active}';
         }
         &.active {
           color: ~'@{color-@{value}-btn}';
diff --git a/src/renderer/components/material/SongList.vue b/src/renderer/components/material/SongList.vue
index 6343670c..d80d3ee7 100644
--- a/src/renderer/components/material/SongList.vue
+++ b/src/renderer/components/material/SongList.vue
@@ -1,52 +1,54 @@
 <template lang="pug">
 div(:class="$style.songList")
   transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-    div(v-show="list.length" :class="$style.list")
+    div(:class="$style.list")
       div(:class="$style.thead")
         table
           thead
             tr
-              th.nobreak.center(style="width: 10px;") #
-              th.nobreak(style="width: 25%;") {{$t('material.song_list.name')}}
-              th.nobreak(style="width: 20%;") {{$t('material.song_list.singer')}}
-              th.nobreak(style="width: 20%;") {{$t('material.song_list.album')}}
-              th.nobreak(style="width: 10%;") {{$t('material.song_list.time')}}
-              th.nobreak(style="width: 20%;") {{$t('material.song_list.action')}}
-      div.scroll(:class="$style.tbody" ref="dom_scrollContent")
-        table
-          tbody(@contextmenu="handleContextMenu" ref="dom_tbody")
-            tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick($event, index)")
-              td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
-              td.break(style="width: 25%;")
-                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')}}
-              td.break(style="width: 20%;")
-                span.select {{item.singer}}
-              td.break(style="width: 20%;")
-                span.select {{item.albumName}}
-              td(style="width: 10%;")
-                span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
-              td(style="width: 20%; padding-left: 0; padding-right: 0;")
-                material-list-buttons(:index="index" :search-btn="true" :class="$style.btns"
-                  :remove-btn="false" @btn-click="handleListBtnClick"
-                  :listAdd-btn="assertApiSupport(item.source)"
-                  :play-btn="assertApiSupport(item.source)"
-                  :download-btn="assertApiSupport(item.source)")
-                //- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
-                //- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
-                //- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
-        div(:class="$style.pagination")
-          material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage")
-  transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-    div(v-show="!list.length" :class="$style.noitem")
-      p(v-html="noItem")
-  material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick")
+              th.nobreak.center(:style="{ width: rowWidth.r1 }") #
+              th.nobreak(:style="{ width: rowWidth.r2 }") {{$t('material.song_list.name')}}
+              th.nobreak(:style="{ width: rowWidth.r3 }") {{$t('material.song_list.singer')}}
+              th.nobreak(:style="{ width: rowWidth.r4 }") {{$t('material.song_list.album')}}
+              th.nobreak(:style="{ width: rowWidth.r5 }") {{$t('material.song_list.time')}}
+              th.nobreak(:style="{ width: rowWidth.r6 }") {{$t('material.song_list.action')}}
+      div(:class="$style.content")
+        div.scroll(v-show="list.length" :class="$style.tbody" ref="dom_scrollContent")
+          table
+            tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
+              tr(v-for='(item, index) in list' :key='item.songmid' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)")
+                td.nobreak.center(:style="{ width: rowWidth.r1 }" style="padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
+                td.break(:style="{ width: rowWidth.r2 }")
+                  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')}}
+                td.break(:style="{ width: rowWidth.r3 }")
+                  span.select {{item.singer}}
+                td.break(:style="{ width: rowWidth.r4 }")
+                  span.select {{item.albumName}}
+                td(:style="{ width: rowWidth.r5 }")
+                  span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
+                td(:style="{ width: rowWidth.r6 }" style="padding-left: 0; padding-right: 0;")
+                  material-list-buttons(:index="index" :class="$style.btns"
+                    :remove-btn="false" @btn-click="handleListBtnClick"
+                    :listAdd-btn="assertApiSupport(item.source)"
+                    :play-btn="assertApiSupport(item.source)"
+                    :download-btn="assertApiSupport(item.source)")
+                  //- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
+                  //- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
+                  //- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
+          div(:class="$style.pagination")
+            material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage")
+        transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
+          div(v-show="!list.length" :class="$style.noitem")
+            p(v-html="noItem")
+  //- material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick")
+  material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import { scrollTo, clipboardWriteText, assertApiSupport } from '../../utils'
+import { scrollTo, clipboardWriteText, assertApiSupport, findParentNode } from '../../utils'
 export default {
   name: 'MaterialSongList',
   model: {
@@ -83,26 +85,63 @@ export default {
       type: String,
       default: '列表加载中...',
     },
+    rowWidth: {
+      type: Object,
+      default() {
+        return {
+          r1: '5%',
+          r2: 'auto',
+          r3: '22%',
+          r4: '22%',
+          r5: '8%',
+          r6: '13%',
+        }
+      },
+    },
   },
   computed: {
     ...mapGetters(['setting']),
+    listItemMenu() {
+      return [
+        {
+          name: this.$t('material.song_list.list_play'),
+          action: 'play',
+          disabled: !this.listMenu.itemMenuControl.play,
+        },
+        {
+          name: this.$t('material.song_list.list_download'),
+          action: 'download',
+          disabled: !this.listMenu.itemMenuControl.download,
+        },
+        {
+          name: this.$t('material.song_list.list_add_to'),
+          action: 'addTo',
+          disabled: !this.listMenu.itemMenuControl.addTo,
+        },
+        {
+          name: this.$t('material.song_list.list_search'),
+          action: 'search',
+          disabled: !this.listMenu.itemMenuControl.search,
+        },
+      ]
+    },
   },
   watch: {
-    selectdList(n) {
-      const len = n.length
-      if (len) {
-        this.isShowEditBtn = true
-      } else {
-        this.isShowEditBtn = false
-      }
-    },
+    // selectdList(n) {
+    //   const len = n.length
+    //   if (len) {
+    //     this.isShowEditBtn = true
+    //   } else {
+    //     this.isShowEditBtn = false
+    //   }
+    // },
     selectdData(n) {
       const len = n.length
       if (len) {
-        this.isShowEditBtn = true
+        // this.isShowEditBtn = true
         this.selectdList = [...n]
       } else {
-        this.isShowEditBtn = false
+        // this.isShowEditBtn = false
         this.removeAllSelect()
       }
     },
@@ -122,6 +161,19 @@ export default {
         isShiftDown: false,
         isModDown: false,
       },
+      listMenu: {
+        isShowItemMenu: false,
+        itemMenuControl: {
+          play: true,
+          addTo: true,
+          download: true,
+          search: true,
+        },
+        menuLocation: {
+          x: 0,
+          y: 0,
+        },
+      },
     }
   },
   created() {
@@ -245,9 +297,9 @@ export default {
     handleTogglePage(page) {
       this.emitEvent('togglePage', page)
     },
-    handleFlowBtnClick(action) {
-      this.emitEvent('flowBtnClick', action)
-    },
+    // handleFlowBtnClick(action) {
+    //   this.emitEvent('flowBtnClick', action)
+    // },
     emitEvent(action, data) {
       this.$emit('action', { action, data })
     },
@@ -256,6 +308,7 @@ export default {
     },
     handleContextMenu(event) {
       if (!event.target.classList.contains('select')) return
+      event.stopImmediatePropagation()
       let classList = this.$refs.dom_scrollContent.classList
       classList.add(this.$style.copying)
       window.requestAnimationFrame(() => {
@@ -269,6 +322,32 @@ export default {
     assertApiSupport(source) {
       return assertApiSupport(source)
     },
+    handleListItemRigthClick(event, index) {
+      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 = findParentNode(event.target, 'TD')
+      this.listMenu.rightClickItemIndex = index
+      this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
+      this.listMenu.menuLocation.y = dom_td.offsetParent.offsetTop + dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
+      this.$nextTick(() => {
+        this.listMenu.isShowItemMenu = true
+      })
+    },
+    hideListMenu() {
+      let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
+      if (dom_selected) dom_selected.classList.remove('selected')
+      this.listMenu.isShowItemMenu = false
+      this.listMenu.rightClickItemIndex = -1
+    },
+    handleListItemMenuClick(action) {
+      // console.log(action)
+      let index = this.listMenu.rightClickItemIndex
+      this.hideListMenu()
+      if (!action) return
+
+      this.emitEvent('menuClick', { action: action.action, index })
+    },
   },
 }
 </script>
@@ -290,6 +369,7 @@ export default {
   overflow: hidden;
   display: flex;
   flex-flow: column nowrap;
+  height: 100%;
 }
 .thead {
   flex: none;
@@ -298,8 +378,13 @@ export default {
     // padding-left: 10px;
   }
 }
-.tbody {
+.content {
   flex: auto;
+  min-height: 0;
+  position: relative;
+}
+.tbody {
+  height: 100%;
   overflow-y: auto;
   td {
     font-size: 12px;
diff --git a/src/renderer/components/material/TagList.vue b/src/renderer/components/material/TagList.vue
index 2d5e2ace..f3ee07d3 100644
--- a/src/renderer/components/material/TagList.vue
+++ b/src/renderer/components/material/TagList.vue
@@ -123,10 +123,10 @@ export default {
   }
 
   &:hover {
-    background-color: @color-theme_2-hover;
+    background-color: @color-btn-hover;
   }
   &:active {
-    background-color: @color-theme_2-active;
+    background-color: @color-btn-active;
   }
 }
 
@@ -161,10 +161,10 @@ export default {
     box-sizing: border-box;
 
     &:hover {
-      background-color: @color-theme_2-hover;
+      background-color: @color-btn-hover;
     }
     &:active {
-      background-color: @color-theme_2-active;
+      background-color: @color-btn-active;
     }
   }
 }
@@ -184,10 +184,10 @@ export default {
   transition: background-color @transition-theme;
   cursor: pointer;
   &:hover {
-    background-color: @color-theme_2-hover;
+    background-color: @color-btn-hover;
   }
   &:active {
-    background-color: @color-theme_2-active;
+    background-color: @color-btn-active;
   }
 }
 
@@ -199,10 +199,10 @@ each(@themes, {
       // border-left-color: ~'@{color-@{value}-tab-border-bottom}';
       color: ~'@{color-@{value}-btn}';
       &:hover {
-        background-color: ~'@{color-@{value}-theme_2-hover}';
+        background-color: ~'@{color-@{value}-btn-hover}';
       }
       &:active {
-        background-color: ~'@{color-@{value}-theme_2-active}';
+        background-color: ~'@{color-@{value}-btn-active}';
       }
     }
 
@@ -215,10 +215,10 @@ each(@themes, {
         // color: ~'@{color-@{value}-btn}';
         background-color: ~'@{color-@{value}-btn-background}';
         &:hover {
-          background-color: ~'@{color-@{value}-theme_2-hover}';
+          background-color: ~'@{color-@{value}-btn-hover}';
         }
         &:active {
-          background-color: ~'@{color-@{value}-theme_2-active}';
+          background-color: ~'@{color-@{value}-btn-active}';
         }
       }
     }
@@ -226,10 +226,10 @@ each(@themes, {
     .tag {
       background-color: ~'@{color-@{value}-btn-background}';
       &:hover {
-        background-color: ~'@{color-@{value}-theme_2-hover}';
+        background-color: ~'@{color-@{value}-btn-hover}';
       }
       &:active {
-        background-color: ~'@{color-@{value}-theme_2-active}';
+        background-color: ~'@{color-@{value}-btn-active}';
       }
     }
 
diff --git a/src/renderer/components/material/listAddModal.vue b/src/renderer/components/material/listAddModal.vue
index cc1fef04..150964ec 100644
--- a/src/renderer/components/material/listAddModal.vue
+++ b/src/renderer/components/material/listAddModal.vue
@@ -2,7 +2,7 @@
 material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
   main(:class="$style.main")
     h2
-      | {{$t('material.list_add_modal.title_first')}}&nbsp;
+      | {{$t('material.list_add_modal.' + (isMove ? 'title_first_move' : 'title_first_add'))}}&nbsp;
       span(:class="$style.name") {{this.musicInfo && `${musicInfo.name}`}}
       | &nbsp;{{$t('material.list_add_modal.title_last')}}
     div.scroll(:class="$style.btnContent")
@@ -39,6 +39,14 @@ export default {
       type: String,
       default: '',
     },
+    fromListId: {
+      type: String,
+      default: null,
+    },
+    isMove: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -60,9 +68,11 @@ export default {
     },
   },
   methods: {
-    ...mapMutations('list', ['listAdd', 'createUserList']),
+    ...mapMutations('list', ['listAdd', 'listMove', 'createUserList']),
     handleClick(index) {
-      this.listAdd({ id: this.lists[index].id, musicInfo: this.musicInfo })
+      this.isMove
+        ? this.listMove({ fromId: this.fromListId, toId: this.lists[index].id, musicInfo: this.musicInfo })
+        : this.listAdd({ id: this.lists[index].id, musicInfo: this.musicInfo })
       this.$nextTick(() => {
         this.handleClose()
       })
diff --git a/src/renderer/components/material/listAddMultipleModal.vue b/src/renderer/components/material/listAddMultipleModal.vue
index 7ab72f7b..abe0c2bf 100644
--- a/src/renderer/components/material/listAddMultipleModal.vue
+++ b/src/renderer/components/material/listAddMultipleModal.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
   main(:class="$style.main")
-    h2 {{$t('material.list_add_multiple_modal.title', { num: musicList.length })}}
+    h2 {{$t('material.list_add_multiple_modal.' + (isMove ? 'title_move' : 'title_add'), { num: musicList.length })}}
     div.scroll(:class="$style.btnContent")
       material-btn(:class="$style.btn" :title="$t('material.list_add_multiple_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
       material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :title="$t('view.list.lists_new_list_btn')")
@@ -39,6 +39,14 @@ export default {
       type: String,
       default: '',
     },
+    fromListId: {
+      type: String,
+      default: null,
+    },
+    isMove: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -61,9 +69,11 @@ export default {
     },
   },
   methods: {
-    ...mapMutations('list', ['listAddMultiple', 'createUserList']),
+    ...mapMutations('list', ['listAddMultiple', 'listMoveMultiple', 'createUserList']),
     handleClick(index) {
-      this.listAddMultiple({ id: this.lists[index].id, list: this.musicList })
+      this.isMove
+        ? this.listMoveMultiple({ fromId: this.fromListId, toId: this.lists[index].id, list: this.musicList })
+        : this.listAddMultiple({ id: this.lists[index].id, list: this.musicList })
       this.$nextTick(() => {
         this.handleClose(true)
       })
diff --git a/src/renderer/lang/cns/material/list_add_modal.json b/src/renderer/lang/cns/material/list_add_modal.json
index 3bc84991..5c4d74ee 100644
--- a/src/renderer/lang/cns/material/list_add_modal.json
+++ b/src/renderer/lang/cns/material/list_add_modal.json
@@ -1,5 +1,6 @@
 {
-  "title_first": "添加",
+  "title_first_add": "添加",
+  "title_first_move": "移动",
   "title_last": "到...",
   "btn_title": "把该歌曲添加到 {name}"
 }
diff --git a/src/renderer/lang/cns/material/list_add_multiple_modal.json b/src/renderer/lang/cns/material/list_add_multiple_modal.json
index 97130881..afa07a8a 100644
--- a/src/renderer/lang/cns/material/list_add_multiple_modal.json
+++ b/src/renderer/lang/cns/material/list_add_multiple_modal.json
@@ -1,4 +1,5 @@
 {
-  "title": "添加已选的 {num} 首歌曲到...",
+  "title_add": "添加已选的 {num} 首歌曲到...",
+  "title_move": "移动已选的 {num} 首歌曲到...",
   "btn_title": "把这些歌曲添加到 {name}"
 }
diff --git a/src/renderer/lang/cns/material/song_list.json b/src/renderer/lang/cns/material/song_list.json
index c64effd1..a89e62e8 100644
--- a/src/renderer/lang/cns/material/song_list.json
+++ b/src/renderer/lang/cns/material/song_list.json
@@ -1,6 +1,8 @@
 {
-  "select_all": "全选",
-  "unselect_all": "全不选",
+  "list_play": "播放",
+  "list_add_to": "添加到...",
+  "list_download": "下载",
+  "list_search": "搜索",
   "name": "歌曲名",
   "singer": "歌手",
   "album": "专辑",
diff --git a/src/renderer/lang/cns/view/download.json b/src/renderer/lang/cns/view/download.json
index dd32194f..4917e132 100644
--- a/src/renderer/lang/cns/view/download.json
+++ b/src/renderer/lang/cns/view/download.json
@@ -1,6 +1,10 @@
 {
-  "select_all": "全选",
-  "unselect_all": "全不选",
+  "menu_play": "播放",
+  "menu_start": "开始任务",
+  "menu_pause": "暂停任务",
+  "menu_file": "定位文件",
+  "menu_search": "搜索",
+  "menu_remove": "删除",
   "name": "歌曲名",
   "progress": "进度",
   "status": "状态",
diff --git a/src/renderer/lang/cns/view/list.json b/src/renderer/lang/cns/view/list.json
index 72671d86..f8db424d 100644
--- a/src/renderer/lang/cns/view/list.json
+++ b/src/renderer/lang/cns/view/list.json
@@ -5,6 +5,11 @@
   "lists_moveup": "上移",
   "lists_movedown": "下移",
   "lists_remove": "删除",
+  "list_play": "播放",
+  "list_add_to": "添加到...",
+  "list_move_to": "移动到...",
+  "list_download": "下载",
+  "list_remove": "删除",
   "default_list": "试听列表",
   "love_list": "收藏",
   "name": "歌曲名",
diff --git a/src/renderer/lang/cns/view/search.json b/src/renderer/lang/cns/view/search.json
index 81ae5eed..2e23edad 100644
--- a/src/renderer/lang/cns/view/search.json
+++ b/src/renderer/lang/cns/view/search.json
@@ -1,6 +1,7 @@
 {
-  "select_all": "全选",
-  "unselect_all": "全不选",
+  "list_play": "播放",
+  "list_add_to": "添加到...",
+  "list_download": "下载",
   "name": "歌曲名",
   "singer": "歌手",
   "album": "专辑",
diff --git a/src/renderer/lang/cnt/material/list_add_modal.json b/src/renderer/lang/cnt/material/list_add_modal.json
index 7b6470cd..809070b2 100644
--- a/src/renderer/lang/cnt/material/list_add_modal.json
+++ b/src/renderer/lang/cnt/material/list_add_modal.json
@@ -1,5 +1,6 @@
 {
-  "title_first": "添加",
+  "title_first_add": "添加",
+  "title_first_move": "移動",
   "title_last": "到...",
   "btn_title": "把該歌曲添加到 {name}"
 }
diff --git a/src/renderer/lang/cnt/material/list_add_multiple_modal.json b/src/renderer/lang/cnt/material/list_add_multiple_modal.json
index a69200f2..5ac6f2d7 100644
--- a/src/renderer/lang/cnt/material/list_add_multiple_modal.json
+++ b/src/renderer/lang/cnt/material/list_add_multiple_modal.json
@@ -1,4 +1,5 @@
 {
-  "title": "添加已選的 {num} 首歌曲到...",
+  "title_add": "添加已選的 {num} 首歌曲到...",
+  "title_move": "添加移動已選的 {num} 首歌曲到...",
   "btn_title": "把這些歌曲添加到 {name}"
 }
diff --git a/src/renderer/lang/cnt/material/song_list.json b/src/renderer/lang/cnt/material/song_list.json
index 97d85ddb..8b028543 100644
--- a/src/renderer/lang/cnt/material/song_list.json
+++ b/src/renderer/lang/cnt/material/song_list.json
@@ -1,6 +1,8 @@
 {
-  "select_all": "全選",
-  "unselect_all": "全不選",
+  "list_play": "播放",
+  "list_add_to": "添加到...",
+  "list_download": "下載",
+  "list_search": "搜索",
   "name": "歌曲名",
   "singer": "歌手",
   "album": "專輯",
diff --git a/src/renderer/lang/cnt/view/download.json b/src/renderer/lang/cnt/view/download.json
index e289c38b..bf53df2d 100644
--- a/src/renderer/lang/cnt/view/download.json
+++ b/src/renderer/lang/cnt/view/download.json
@@ -1,6 +1,10 @@
 {
-  "select_all": "全選",
-  "unselect_all": "全不選",
+  "menu_play": "播放",
+  "menu_start": "開始任務",
+  "menu_pause": "暫停任務",
+  "menu_file": "定位文件",
+  "menu_search": "搜索",
+  "menu_remove": "刪除",
   "name": "歌曲名",
   "progress": "進度",
   "status": "狀態",
diff --git a/src/renderer/lang/cnt/view/list.json b/src/renderer/lang/cnt/view/list.json
index 7fca1675..fa7838b4 100644
--- a/src/renderer/lang/cnt/view/list.json
+++ b/src/renderer/lang/cnt/view/list.json
@@ -5,6 +5,11 @@
   "lists_moveup": "上移",
   "lists_movedown": "下移",
   "lists_remove": "刪除",
+  "list_play": "播放",
+  "list_add_to": "添加到...",
+  "list_move_to": "移動到...",
+  "list_download": "下載",
+  "list_remove": "刪除",
   "default_list": "試聽列表",
   "love_list": "收藏列表",
   "name": "歌曲名",
diff --git a/src/renderer/lang/cnt/view/search.json b/src/renderer/lang/cnt/view/search.json
index 8e84801a..ebdec9c5 100644
--- a/src/renderer/lang/cnt/view/search.json
+++ b/src/renderer/lang/cnt/view/search.json
@@ -1,6 +1,7 @@
 {
-  "select_all": "全選",
-  "unselect_all": "全不選",
+  "list_play": "播放",
+  "list_add_to": "添加到...",
+  "list_download": "下載",
   "name": "歌曲名",
   "singer": "歌手",
   "album": "專輯",
diff --git a/src/renderer/lang/en/material/list_add_modal.json b/src/renderer/lang/en/material/list_add_modal.json
index c28f5586..18bf5f0e 100644
--- a/src/renderer/lang/en/material/list_add_modal.json
+++ b/src/renderer/lang/en/material/list_add_modal.json
@@ -1,5 +1,6 @@
 {
-  "title_first": "Add",
+  "title_first_add": "Add",
+  "title_first_move": "Move",
   "title_last": "to...",
   "btn_title": "Add the song(s) to {name}"
 }
diff --git a/src/renderer/lang/en/material/list_add_multiple_modal.json b/src/renderer/lang/en/material/list_add_multiple_modal.json
index a83dad04..52b578b9 100644
--- a/src/renderer/lang/en/material/list_add_multiple_modal.json
+++ b/src/renderer/lang/en/material/list_add_multiple_modal.json
@@ -1,4 +1,5 @@
 {
-  "title": "Add the selected {num} song(s) to ...",
+  "title_add": "Add the selected {num} song(s) to ...",
+  "title_move": "Move the selected {num} song(s) to ...",
   "btn_title": "Add these song(s) to {name}"
 }
diff --git a/src/renderer/lang/en/material/song_list.json b/src/renderer/lang/en/material/song_list.json
index 381e7195..47de8903 100644
--- a/src/renderer/lang/en/material/song_list.json
+++ b/src/renderer/lang/en/material/song_list.json
@@ -1,6 +1,8 @@
 {
-  "select_all": "Select all",
-  "unselect_all": "Select none",
+  "list_play": "Play",
+  "list_add_to": "Add to ...",
+  "list_download": "Download",
+  "list_search": "Search",
   "name": "Name",
   "singer": "Artist",
   "album": "Album",
diff --git a/src/renderer/lang/en/view/download.json b/src/renderer/lang/en/view/download.json
index 75752126..857145dc 100644
--- a/src/renderer/lang/en/view/download.json
+++ b/src/renderer/lang/en/view/download.json
@@ -1,6 +1,10 @@
 {
-  "select_all": "Select all",
-  "unselect_all": "Select none",
+  "menu_play": "Play",
+  "menu_start": "Start task",
+  "menu_pause": "Pause Task",
+  "menu_file": "Locate File",
+  "menu_search": "Search",
+  "menu_remove": "Remove",
   "name": "Name",
   "progress": "Progress",
   "status": "State",
diff --git a/src/renderer/lang/en/view/list.json b/src/renderer/lang/en/view/list.json
index c6e2fab3..9b528e1f 100644
--- a/src/renderer/lang/en/view/list.json
+++ b/src/renderer/lang/en/view/list.json
@@ -5,6 +5,11 @@
   "lists_moveup": "Move Up",
   "lists_movedown": "Move Down",
   "lists_remove": "Remove",
+  "list_play": "Play",
+  "list_add_to": "Add to ...",
+  "list_move_to": "Move to ...",
+  "list_download": "Download",
+  "list_remove": "Remove",
   "default_list": "Recently Played",
   "love_list": "Favorites",
   "name": "Name",
diff --git a/src/renderer/lang/en/view/search.json b/src/renderer/lang/en/view/search.json
index 2c9c83e1..94c958ee 100644
--- a/src/renderer/lang/en/view/search.json
+++ b/src/renderer/lang/en/view/search.json
@@ -1,6 +1,7 @@
 {
-  "select_all": "Select all",
-  "unselect_all": "Unselect all",
+  "list_play": "Play",
+  "list_add_to": "Add to ...",
+  "list_download": "Download",
   "name": "Name",
   "singer": "Artist",
   "album": "Album",
diff --git a/src/renderer/store/modules/list.js b/src/renderer/store/modules/list.js
index 4cda1b3e..98560d4a 100644
--- a/src/renderer/store/modules/list.js
+++ b/src/renderer/store/modules/list.js
@@ -80,6 +80,15 @@ const mutations = {
     if (targetList.list.some(s => s.songmid === musicInfo.songmid)) return
     targetList.list.push(musicInfo)
   },
+  listMove(state, { fromId, musicInfo, toId }) {
+    const fromList = allList[fromId]
+    const toList = allList[toId]
+    if (!fromList || !toList) return
+    fromList.list.splice(fromList.list.indexOf(musicInfo), 1)
+    let index = toList.list.findIndex(s => s.songmid === musicInfo.songmid)
+    if (index > -1) return toList.list.splice(index, 1)
+    toList.list.push(musicInfo)
+  },
   listAddMultiple(state, { id, list }) {
     let targetList = allList[id]
     if (!targetList) return
@@ -93,6 +102,12 @@ const mutations = {
     }
     targetList.list.splice(0, targetList.list.length, ...ids.map(id => map[id]))
   },
+  // { fromId, toId, list }
+  listMoveMultiple(state, { fromId, toId, list }) {
+    console.log(state.commit)
+    this.commit('list/listRemoveMultiple', { id: fromId, list })
+    this.commit('list/listAddMultiple', { id: toId, list })
+  },
   listRemove(state, { id, index }) {
     let targetList = allList[id]
     if (!targetList) return
diff --git a/src/renderer/utils/index.js b/src/renderer/utils/index.js
index 07df96ce..e59e170a 100644
--- a/src/renderer/utils/index.js
+++ b/src/renderer/utils/index.js
@@ -351,6 +351,8 @@ export const asyncSetArray = (from, to, num = 100) => new Promise(resolve => {
   })
 })
 
+export const findParentNode = (target, tagName) => target.tagName == tagName ? target : target === document ? null : findParentNode(target.parentNode, tagName)
+
 
 /**
  * 获取缓存大小
diff --git a/src/renderer/views/Download.vue b/src/renderer/views/Download.vue
index c741c5dc..8a72c5de 100644
--- a/src/renderer/views/Download.vue
+++ b/src/renderer/views/Download.vue
@@ -8,34 +8,35 @@ div(:class="$style.download")
       table
         thead
           tr
-            th.nobreak.center(style="width: 10px;") #
-            th.nobreak(style="width: 28%;") {{$t('view.download.name')}}
-            th.nobreak(style="width: 22%;") {{$t('view.download.progress')}}
-            th.nobreak(style="width: 15%;") {{$t('view.download.status')}}
+            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: 20%;") {{$t('view.download.action')}}
-    div.scroll(v-if="list.length" :class="$style.tbody")
+            th.nobreak(style="width: 13%;") {{$t('view.download.action')}}
+    div.scroll(v-if="list.length" :class="$style.tbody" ref="dom_scrollContent")
       table
         tbody(ref="dom_tbody")
-          tr(v-for='(item, index) in showList' :key='item.key' @click="handleDoubleClick($event, index)" :class="playListIndex === index ? $style.active : ''")
-            td.nobreak.center(style="width: 37px;" @click.stop) {{index + 1}}
-            td.break(style="width: 28%;")
+          tr(v-for='(item, index) in showList' :key='item.key' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)" :class="playListIndex === index ? $style.active : ''")
+            td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" @click.stop) {{index + 1}}
+            td.break
               span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}}
-            td.break(style="width: 22%;") {{item.progress.progress}}%
-            td.break(style="width: 15%;") {{item.statusText}}
+            td.break(style="width: 20%;") {{item.progress.progress}}%
+            td.break(style="width: 22%;") {{item.statusText}}
             td.break(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
-            td(style="width: 20%; padding-left: 0; padding-right: 0;")
-              material-list-buttons(:index="index" :download-btn="false" :file-btn="item.status != downloadStatus.ERROR"
+            td(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-flow-btn(:show="isShowEditBtn" :play-btn="false" :download-btn="false" :add-btn="false" :start-btn="true" :pause-btn="true" @btn-click="handleFlowBtnClick")
+    //- material-flow-btn(:show="isShowEditBtn" :play-btn="false" :download-btn="false" :add-btn="false" :start-btn="true" :pause-btn="true" @btn-click="handleFlowBtnClick")
+    material-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 } from '../utils'
+import { checkPath, openDirInExplorer, findParentNode } from '../utils'
 import path from 'path'
 
 export default {
@@ -45,35 +46,28 @@ export default {
       clickTime: window.performance.now(),
       clickIndex: -1,
       selectdData: [],
-      isShowEditBtn: false,
+      // isShowEditBtn: false,
       isShowDownloadMultiple: false,
-      tabs: [
-        {
-          name: this.$t('view.download.all'),
-          id: 'all',
-        },
-        {
-          name: this.$t('view.download.runing'),
-          id: 'runing',
-        },
-        {
-          name: this.$t('view.download.paused'),
-          id: 'paused',
-        },
-        {
-          name: this.$t('view.download.error'),
-          id: 'error',
-        },
-        {
-          name: this.$t('view.download.finished'),
-          id: 'finished',
-        },
-      ],
       tabId: 'all',
       keyEvent: {
         isShiftDown: false,
         isModDown: false,
       },
+      listMenu: {
+        isShowItemMenu: false,
+        itemMenuControl: {
+          play: true,
+          start: true,
+          pause: true,
+          file: true,
+          search: true,
+          remove: true,
+        },
+        menuLocation: {
+          x: 0,
+          y: 0,
+        },
+      },
     }
   },
   computed: {
@@ -104,6 +98,64 @@ export default {
           return this.list
       }
     },
+    tabs() {
+      return [
+        {
+          name: this.$t('view.download.all'),
+          id: 'all',
+        },
+        {
+          name: this.$t('view.download.runing'),
+          id: 'runing',
+        },
+        {
+          name: this.$t('view.download.paused'),
+          id: 'paused',
+        },
+        {
+          name: this.$t('view.download.error'),
+          id: 'error',
+        },
+        {
+          name: this.$t('view.download.finished'),
+          id: 'finished',
+        },
+      ]
+    },
+    listItemMenu() {
+      return [
+        {
+          name: this.$t('view.download.menu_play'),
+          action: 'play',
+          hide: !this.listMenu.itemMenuControl.play,
+        },
+        {
+          name: this.$t('view.download.menu_start'),
+          action: 'start',
+          hide: !this.listMenu.itemMenuControl.start,
+        },
+        {
+          name: this.$t('view.download.menu_pause'),
+          action: 'pause',
+          hide: !this.listMenu.itemMenuControl.pause,
+        },
+        {
+          name: this.$t('view.download.menu_file'),
+          action: 'file',
+          hide: !this.listMenu.itemMenuControl.file,
+        },
+        {
+          name: this.$t('view.download.menu_search'),
+          action: 'search',
+          hide: !this.listMenu.itemMenuControl.search,
+        },
+        {
+          name: this.$t('view.download.menu_remove'),
+          action: 'remove',
+          hide: !this.listMenu.itemMenuControl.remove,
+        },
+      ]
+    },
   },
   watch: {
     selectdData(n) {
@@ -228,25 +280,22 @@ export default {
       index = this.list.findIndex(i => i.key === key)
       let info = this.list[index]
       if (info.isComplate) {
-        this.handlePlay(index)
+        this.handlePlay(info)
       } else if (info.status === this.downloadStatus.RUN) {
         this.handlePauseTask(index)
       } else {
         this.handleStartTask(index)
       }
     },
-    async handlePlay(index) {
-      const targetSong = this.list[index]
+    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) })
     },
     handleListBtnClick(info) {
       let item = this.showList[info.index]
-      const key = item.key
-      let index = this.list.findIndex(i => i.key === key)
       switch (info.action) {
         case 'play':
-          this.handlePlay(index)
+          this.handlePlay(item)
           break
         case 'start':
           this.startTask(item)
@@ -258,10 +307,10 @@ export default {
           this.removeTask(item)
           break
         case 'file':
-          this.handleOpenFolder(index)
+          this.handleOpenFolder(item.filePath)
           break
         case 'search':
-          this.handleSearch(index)
+          this.handleSearch(item.musicInfo)
           break
       }
     },
@@ -274,40 +323,138 @@ export default {
         node.classList.add('active')
       }
     },
-    async handleFlowBtnClick(action) {
-      let selectdData = [...this.selectdData]
-      this.removeAllSelect()
-      await this.$nextTick()
+    // async handleFlowBtnClick(action) {
+    //   let selectdData = [...this.selectdData]
+    //   this.removeAllSelect()
+    //   await this.$nextTick()
 
-      switch (action) {
-        case 'start':
-          this.startTasks(selectdData)
-          break
-        case 'pause':
-          this.pauseTasks(selectdData)
-          break
-        case 'remove':
-          this.removeTasks(selectdData)
-          break
-      }
+    //   switch (action) {
+    //     case 'start':
+    //       this.startTasks(selectdData)
+    //       break
+    //     case 'pause':
+    //       this.pauseTasks(selectdData)
+    //       break
+    //     case 'remove':
+    //       this.removeTasks(selectdData)
+    //       break
+    //   }
+    // },
+    async handleOpenFolder(filePath) {
+      if (!await checkPath(filePath)) return
+      openDirInExplorer(filePath)
     },
-    async handleOpenFolder(index) {
-      let path = this.list[index].filePath
-      if (!await checkPath(path)) return
-      openDirInExplorer(path)
-    },
-    handleSearch(index) {
-      const info = this.list[index].musicInfo
+    handleSearch(musicInfo) {
       this.$router.push({
         path: 'search',
         query: {
-          text: `${info.name} ${info.singer}`,
+          text: `${musicInfo.name} ${musicInfo.singer}`,
         },
       })
     },
     handleTabChange() {
       this.selectdData = []
     },
+    handleListItemRigthClick(event, index) {
+      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 = findParentNode(event.target, '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 item = this.showList[index]
+      if (item.isComplate) {
+        this.listMenu.itemMenuControl.play =
+        this.listMenu.itemMenuControl.file = true
+        this.listMenu.itemMenuControl.start =
+        this.listMenu.itemMenuControl.pause = false
+      } else if (item.status === this.downloadStatus.ERROR || item.status === this.downloadStatus.PAUSE) {
+        this.listMenu.itemMenuControl.play =
+        this.listMenu.itemMenuControl.pause =
+        this.listMenu.itemMenuControl.file = false
+        this.listMenu.itemMenuControl.start = true
+      } else {
+        this.listMenu.itemMenuControl.play =
+        this.listMenu.itemMenuControl.start =
+        this.listMenu.itemMenuControl.file = false
+        this.listMenu.itemMenuControl.pause = true
+      }
+
+      this.$nextTick(() => {
+        this.listMenu.isShowItemMenu = true
+      })
+    },
+    hideListMenu() {
+      let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
+      if (dom_selected) dom_selected.classList.remove('selected')
+      this.listMenu.isShowItemMenu = false
+      this.listMenu.rightClickItemIndex = -1
+    },
+    handleListItemMenuClick(action) {
+      // console.log(action)
+      let index = this.listMenu.rightClickItemIndex
+      this.hideListMenu()
+      // let key
+      let item
+
+      switch (action && action.action) {
+        case 'play':
+          item = this.showList[index]
+          if (item) this.handlePlay(item)
+          break
+        case 'start':
+          if (this.selectdData.length) {
+            let selectdData = [...this.selectdData]
+            this.removeAllSelect()
+            this.startTasks(selectdData)
+          } else {
+            item = this.showList[index]
+            if (item) this.startTask(item)
+            this.$nextTick(() => {
+              this.isShowDownload = true
+            })
+          }
+          break
+        case 'pause':
+          if (this.selectdData.length) {
+            let selectdData = [...this.selectdData]
+            this.removeAllSelect()
+            this.pauseTasks(selectdData)
+          } else {
+            item = this.showList[index]
+            if (item) this.pauseTask(item)
+            this.$nextTick(() => {
+              this.isShowDownload = true
+            })
+          }
+          break
+        case 'file':
+          item = this.showList[index]
+          // key = item.key
+          // index = this.list.findIndex(i => i.key === key)
+          if (item) this.handleOpenFolder(item.filePath)
+          break
+        case 'search':
+          item = this.showList[index]
+          if (item) this.handleSearch(item.musicInfo)
+          break
+        case 'remove':
+          if (this.selectdData.length) {
+            let selectdData = [...this.selectdData]
+            this.removeAllSelect()
+            this.removeTasks(selectdData)
+          } else {
+            item = this.showList[index]
+            if (item) this.removeTask(item)
+            this.$nextTick(() => {
+              this.isShowDownload = true
+            })
+          }
+          break
+      }
+    },
   },
 }
 </script>
diff --git a/src/renderer/views/Leaderboard.vue b/src/renderer/views/Leaderboard.vue
index fe0a75af..5458bc03 100644
--- a/src/renderer/views/Leaderboard.vue
+++ b/src/renderer/views/Leaderboard.vue
@@ -1,9 +1,20 @@
 <template lang="pug">
   div(:class="$style.leaderboard")
-    div(:class="$style.header")
+    //- div(:class="$style.header")
       material-tab(:class="$style.tab" :list="types" align="left" item-key="id" item-name="name" v-model="tabId")
       material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
-    material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.total" :noItem="$t('material.song_list.loding_list')" :list="list")
+    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="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
+        //- button(:class="$style.listsAdd" @click="handleShowNewList" :title="$t('view.list.lists_new_list_btn')")
+          svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='70%' viewBox='0 0 24 24' space='preserve')
+            use(xlink:href='#icon-list-add')
+      ul.scroll(:class="$style.listsContent" ref="dom_lists_list")
+        li(:class="[$style.listsItem, item.id == tabId ? $style.active : null]" :title="item.name" v-for="item in types" :key="item.id" @click="handleToggleList(item.id)")
+          span(:class="$style.listsLabel") {{item.name}}
+    div(:class="$style.list")
+      material-song-list(v-model="selectdData" :rowWidth="{r1: '5%', r2: 'auto', r3: '22%', r4: '22%', r5: '9%', r6: '15%'}" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.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="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
     material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
@@ -81,6 +92,38 @@ export default {
           break
       }
     },
+    handleMenuClick(info) {
+      switch (info.action) {
+        case 'download':
+          if (this.selectdData.length) {
+            this.isShowDownloadMultiple = true
+          } else {
+            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 'addTo':
+          if (this.selectdData.length) {
+            this.$nextTick(() => {
+              this.isShowListAddMultiple = true
+            })
+          } else {
+            this.musicInfo = this.list[info.index]
+            this.$nextTick(() => {
+              this.isShowListAdd = true
+            })
+          }
+          break
+      }
+    },
     testPlay(index) {
       let targetSong
       if (index == null) {
@@ -129,33 +172,39 @@ export default {
       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
-      }
-    },
+    // 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 '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.selectdData = []
     },
@@ -169,7 +218,7 @@ export default {
 .leaderboard {
   height: 100%;
   display: flex;
-  flex-flow: column nowrap;
+  position: relative;
 }
 .header {
   flex: none;
@@ -192,4 +241,156 @@ export default {
   flex-flow: column nowrap;
 }
 
+.lists {
+  flex: none;
+  width: 14.8%;
+  display: flex;
+  flex-flow: column nowrap;
+}
+.listsHeader {
+  position: relative;
+}
+.listsSelect {
+  font-size: 12px;
+
+  &:hover {
+    :global(.icon) {
+      opacity: 1;
+    }
+  }
+
+  >:global(.content) {
+    display: block;
+    width: 100%;
+  }
+  :global(.label-content) {
+    background-color: transparent !important;
+    line-height: 38px;
+    height: 38px;
+    border-radius: 0;
+    &:hover {
+      background: none !important;
+    }
+  }
+  :global(.label) {
+    color: rgba(0, 0, 0, 0.95) !important;
+  }
+  :global(.icon) {
+    opacity: .6;
+    transition: opacity .3s ease;
+  }
+
+  :global(.list) {
+    max-height: 500px;
+    box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
+    li {
+      background-color: @color-theme_2-background_2;
+      line-height: 38px;
+      font-size: 13px;
+      &:hover {
+        background-color: @color-btn-hover;
+      }
+      &:active {
+        background-color: @color-btn-active;
+      }
+    }
+  }
+  // line-height: 38px;
+  // padding: 0 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  flex: none;
+}
+.listsContent {
+  flex: auto;
+  min-width: 0;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  // border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+.listsItem {
+  position: relative;
+  transition: .3s ease;
+  transition-property: color, background-color;
+  background-color: transparent;
+  &:hover:not(.active) {
+    background-color: @color-theme_2-hover;
+    cursor: pointer;
+  }
+  &.active {
+    // background-color:
+    color: @color-theme;
+  }
+  &.selected {
+    background-color: @color-theme_2-active;
+  }
+  &.clicked {
+    background-color: @color-theme_2-hover;
+  }
+  &.editing {
+    padding: 0 10px;
+    background-color: @color-theme_2-hover;
+    .listsLabel {
+      display: none;
+    }
+    .listsInput {
+      display: block;
+    }
+  }
+}
+.listsLabel {
+  display: block;
+  height: 100%;
+  padding: 0 10px;
+  font-size: 13px;
+  line-height: 36px;
+  .mixin-ellipsis-1;
+}
+
+.list {
+  overflow: hidden;
+  height: 100%;
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
+  // .noItem {
+
+  // }
+}
+
+
+each(@themes, {
+  :global(#container.@{value}) {
+    .listsSelect {
+      :global(.list) {
+        li {
+          background-color: ~'@{color-@{value}-theme_2-background_2}';
+          &:hover {
+            background-color: ~'@{color-@{value}-btn-hover}';
+          }
+          &:active {
+            background-color: ~'@{color-@{value}-btn-active}';
+          }
+        }
+      }
+    }
+    .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}';
+      }
+    }
+  }
+})
+
 </style>
diff --git a/src/renderer/views/List.vue b/src/renderer/views/List.vue
index 96e44118..31d71a92 100644
--- a/src/renderer/views/List.vue
+++ b/src/renderer/views/List.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  div(:class="$style.container" @click="handleContainerClick($event)")
+  div(:class="$style.container" @click="handleContainerClick")
     div(:class="$style.lists" ref="dom_lists")
       div(:class="$style.listHeader")
         h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
@@ -13,30 +13,30 @@
           span(:class="$style.listsLabel") {{loveList.name}}
         li.user-list(:class="[$style.listsItem, item.id == listId ? $style.active : null, listsData.rightClickItemIndex == index ? $style.clicked : null]" @contextmenu="handleListsItemRigthClick($event, index)" :title="item.name" v-for="(item, index) in userList" :key="item.id")
           span(:class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)") {{item.name}}
-          input.key-bind(:class="$style.listsInput" type="text" @keyup.enter="handleListsSave(index, $event)" @blur="handleListsSave(index, $event)" :value="item.name" :placeholder="item.name")
+          input.key-bind(:class="$style.listsInput" @contextmenu.stop type="text" @keyup.enter="handleListsSave(index, $event)" @blur="handleListsSave(index, $event)" :value="item.name" :placeholder="item.name")
         transition(enter-active-class="animated-fast slideInLeft" leave-active-class="animated-fast fadeOut" @after-leave="handleListsNewAfterLeave")
           li(:class="[$style.listsItem, $style.listsNew, listsData.isNewLeave ? $style.newLeave : null]" v-if="listsData.isShowNewList")
-            input.key-bind(:class="$style.listsInput" ref="dom_listsNewInput" type="text" @keyup.enter="handleListsCreate($event)" @blur="handleListsCreate($event)" :placeholder="$t('view.list.lists_new_list_input')")
+            input.key-bind(:class="$style.listsInput" @contextmenu.stop ref="dom_listsNewInput" type="text" @keyup.enter="handleListsCreate" @blur="handleListsCreate" :placeholder="$t('view.list.lists_new_list_input')")
     div(:class="$style.list")
       //- transition
       div(:class="$style.thead")
         table
           thead
             tr
-              th.nobreak.center(style="width: 10px;") #
-              th.nobreak(style="width: 25%;") {{$t('view.list.name')}}
-              th.nobreak(style="width: 20%;") {{$t('view.list.singer')}}
-              th.nobreak(style="width: 20%;") {{$t('view.list.album')}}
+              th.nobreak.center(style="width: 5%;") #
+              th.nobreak {{$t('view.list.name')}}
+              th.nobreak(style="width: 22%;") {{$t('view.list.singer')}}
+              th.nobreak(style="width: 22%;") {{$t('view.list.album')}}
               th.nobreak(style="width: 9%;") {{$t('view.list.time')}}
-              th.nobreak(style="width: 21%;") {{$t('view.list.action')}}
+              th.nobreak(style="width: 15%;") {{$t('view.list.action')}}
       div(v-if="delayShow && list.length" :class="$style.content")
         div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
           table
-            tbody(@contextmenu="handleContextMenu" ref="dom_tbody")
-              tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"
+            tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
+              tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"  @contextmenu="handleListItemRigthClick($event, index)"
                 @click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]")
-                td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
-                td.break(style="width: 25%;")
+                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(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
                   //- span.badge.badge-light(v-if="item._types['128k']") 128K
@@ -44,13 +44,13 @@
                   //- span.badge.badge-secondary(v-if="item._types['320k']") 320K
                   //- span.badge.badge-theme-info(v-if="item._types.ape") APE
                   //- span.badge.badge-theme-success(v-if="item._types.flac") FLAC
-                td.break(style="width: 20%;")
+                td.break(style="width: 22%;")
                   span.select {{item.singer}}
-                td.break(style="width: 20%;")
+                td.break(style="width: 22%;")
                   span.select {{item.albumName}}
                 td(style="width: 9%;")
                   span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
-                td(style="width: 21%; padding-left: 0; padding-right: 0;")
+                td(style="width: 15%; padding-left: 0; padding-right: 0;")
                   material-list-buttons(:index="index" @btn-click="handleListBtnClick")
                   //- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
                   //- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
@@ -60,15 +60,16 @@
         p(v-text="list.length ? $t('view.list.loding_list') : $t('view.list.no_item')")
     material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
     material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdListDetailData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
-    material-flow-btn(:show="isShowEditBtn" :play-btn="false" @btn-click="handleFlowBtnClick")
-    material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" :exclude-list-id="excludeListId" @close="isShowListAdd = false")
-    material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdListDetailData" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
+    //- material-flow-btn(:show="isShowEditBtn" :play-btn="false" @btn-click="handleFlowBtnClick")
+    material-list-add-modal(:show="isShowListAdd" :is-move="isMove" :from-list-id="listData.id" :musicInfo="musicInfo" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
+    material-list-add-multiple-modal(:show="isShowListAddMultiple" :is-move="isMoveMultiple" :from-list-id="listData.id" :musicList="selectdListDetailData" :exclude-list-id="excludeListId" @close="handleListAddMultipleModalClose")
     material-menu(:menus="listsItemMenu" :location="listsData.menuLocation" item-name="name" :isShow="listsData.isShowItemMenu" @menu-click="handleListsItemMenuClick")
+    material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
 </template>
 
 <script>
 import { mapMutations, mapGetters, mapActions } from 'vuex'
-import { throttle, scrollTo, clipboardWriteText, assertApiSupport } from '../utils'
+import { throttle, scrollTo, clipboardWriteText, assertApiSupport, findParentNode } from '../utils'
 export default {
   name: 'List',
   data() {
@@ -80,7 +81,7 @@ export default {
       musicInfo: null,
       selectdListDetailData: [],
       selectdListData: [],
-      isShowEditBtn: false,
+      // isShowEditBtn: false,
       isShowDownloadMultiple: false,
       delayShow: false,
       routeLeaveLocation: null,
@@ -109,6 +110,22 @@ export default {
         isShowNewList: false,
         isNewLeave: false,
       },
+      listMenu: {
+        isShowItemMenu: false,
+        itemMenuControl: {
+          play: true,
+          addTo: true,
+          moveTo: true,
+          download: true,
+          remove: true,
+        },
+        menuLocation: {
+          x: 0,
+          y: 0,
+        },
+      },
+      isMove: false,
+      isMoveMultiple: false,
     }
   },
   computed: {
@@ -175,16 +192,45 @@ export default {
         },
       ]
     },
+    listItemMenu() {
+      return [
+        {
+          name: this.$t('view.list.list_play'),
+          action: 'play',
+          disabled: !this.listMenu.itemMenuControl.play,
+        },
+        {
+          name: this.$t('view.list.list_download'),
+          action: 'download',
+          disabled: !this.listMenu.itemMenuControl.download,
+        },
+        {
+          name: this.$t('view.list.list_add_to'),
+          action: 'addTo',
+          disabled: !this.listMenu.itemMenuControl.addTo,
+        },
+        {
+          name: this.$t('view.list.list_move_to'),
+          action: 'moveTo',
+          disabled: !this.listMenu.itemMenuControl.moveTo,
+        },
+        {
+          name: this.$t('view.list.list_remove'),
+          action: 'remove',
+          disabled: !this.listMenu.itemMenuControl.remove,
+        },
+      ]
+    },
   },
   watch: {
-    selectdListDetailData(n) {
-      const len = n.length
-      if (len) {
-        this.isShowEditBtn = true
-      } else {
-        this.isShowEditBtn = false
-      }
-    },
+    // selectdListDetailData(n) {
+    //   const len = n.length
+    //   if (len) {
+    //     this.isShowEditBtn = true
+    //   } else {
+    //     this.isShowEditBtn = false
+    //   }
+    // },
     'listData.list'(n, o) {
       if (n === o && n.length === o.length) return
       this.removeAllSelectListDetail()
@@ -494,23 +540,28 @@ export default {
       this.removeAllSelectListDetail()
       this.isShowDownloadMultiple = false
     },
-    handleFlowBtnClick(action) {
-      switch (action) {
-        case 'download':
-          this.isShowDownloadMultiple = true
-          break
-        case 'remove':
-          this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
-          this.removeAllSelectListDetail()
-          break
-        case 'add':
-          this.isShowListAddMultiple = true
-          break
-      }
+    // handleFlowBtnClick(action) {
+    //   switch (action) {
+    //     case 'download':
+    //       this.isShowDownloadMultiple = true
+    //       break
+    //     case 'remove':
+    //       this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
+    //       this.removeAllSelectListDetail()
+    //       break
+    //     case 'add':
+    //       this.isShowListAddMultiple = true
+    //       break
+    //   }
+    // },
+    handleListAddModalClose() {
+      this.isShowListAdd = false
+      if (this.isMove) this.isMove = false
     },
-    handleListAddModalClose(isClearSelect) {
+    handleListAddMultipleModalClose(isClearSelect) {
       if (isClearSelect) this.removeAllSelectListDetail()
       this.isShowListAddMultiple = false
+      if (this.isMoveMultiple) this.isMoveMultiple = false
     },
     getMusicLocation(index) {
       let dom = document.getElementById('mid_' + this.list[index].songmid)
@@ -521,6 +572,7 @@ export default {
     // },
     handleContextMenu(event) {
       if (!event.target.classList.contains('select')) return
+      event.stopImmediatePropagation()
       let classList = this.$refs.dom_scrollContent.classList
       classList.add(this.$style.copying)
       window.requestAnimationFrame(() => {
@@ -591,33 +643,116 @@ export default {
       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.hideListMenu()
       this.$nextTick(() => {
         this.listsData.isShowItemMenu = true
       })
     },
+    handleListItemRigthClick(event, index) {
+      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 = findParentNode(event.target, '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
+      this.hideListsMenu()
+      this.$nextTick(() => {
+        this.listMenu.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')[this.listsData.rightClickItemIndex]
+          dom = this.$refs.dom_lists_list.querySelectorAll('.user-list')[index]
           this.$nextTick(() => {
             dom.classList.add(this.$style.editing)
             dom.querySelector('input').focus()
           })
           break
         case 'moveup':
-          this.moveupUserList(this.listsData.rightClickItemIndex)
+          this.moveupUserList(index)
           break
         case 'movedown':
-          this.movedownUserList(this.listsData.rightClickItemIndex)
+          this.movedownUserList(index)
           break
         case 'remove':
-          this.removeUserList(this.listsData.rightClickItemIndex)
+          this.removeUserList(index)
+          break
+      }
+    },
+    hideListMenu() {
+      let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
+      if (dom_selected) dom_selected.classList.remove('selected')
+      this.listMenu.isShowItemMenu = false
+      this.listMenu.rightClickItemIndex = -1
+    },
+    handleListItemMenuClick(action) {
+      // console.log(action)
+      let index = this.listMenu.rightClickItemIndex
+      this.hideListMenu()
+      let minfo
+      switch (action && action.action) {
+        case 'play':
+          this.testPlay(index)
+          break
+        case 'addTo':
+          if (this.selectdListDetailData.length) {
+            this.$nextTick(() => {
+              this.isShowListAddMultiple = true
+            })
+          } else {
+            this.musicInfo = this.list[index]
+            this.$nextTick(() => {
+              this.isShowListAdd = true
+            })
+          }
+          break
+        case 'moveTo':
+          if (this.selectdListDetailData.length) {
+            this.isMoveMultiple = true
+            this.$nextTick(() => {
+              this.isShowListAddMultiple = true
+            })
+          } else {
+            this.musicInfo = this.list[index]
+            this.isMove = true
+            this.$nextTick(() => {
+              this.isShowListAdd = true
+            })
+          }
+          break
+        case 'download':
+          if (this.selectdListDetailData.length) {
+            this.isShowDownloadMultiple = true
+          } else {
+            minfo = this.list[index]
+            if (!this.assertApiSupport(minfo.source)) return
+            this.musicInfo = minfo
+            this.$nextTick(() => {
+              this.isShowDownload = true
+            })
+          }
+          break
+        case 'remove':
+          if (this.selectdListDetailData.length) {
+            this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
+            this.removeAllSelectListDetail()
+          } else {
+            this.handleRemove(index)
+          }
           break
       }
-      this.listsData.rightClickItemIndex = -1
     },
   },
 }
@@ -712,7 +847,7 @@ export default {
 }
 .listsLabel {
   display: block;
-  height: 100%;
+  height: 36px;
   padding: 0 10px;
   font-size: 13px;
   line-height: 36px;
diff --git a/src/renderer/views/Search.vue b/src/renderer/views/Search.vue
index feb07aae..fd5dad7f 100644
--- a/src/renderer/views/Search.vue
+++ b/src/renderer/views/Search.vue
@@ -8,29 +8,29 @@
         table
           thead
             tr
-              th.nobreak.center(style="width: 10px;") #
-              th.nobreak(style="width: 25%;") {{$t('view.search.name')}}
-              th.nobreak(style="width: 20%;") {{$t('view.search.singer')}}
-              th.nobreak(style="width: 25%;") {{$t('view.search.album')}}
-              th.nobreak(style="width: 10%;") {{$t('view.search.time')}}
-              th.nobreak(style="width: 15%;") {{$t('view.search.action')}}
+              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="handleContextMenu" ref="dom_tbody")
-            tr(v-for='(item, index) in listInfo.list' :key='item.songmid' @click="handleDoubleClick($event, index)")
-              td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
-              td.break(style="width: 25%;")
+          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: 20%;")
+              td.break(style="width: 22%;")
                 span.select {{item.singer}}
-              td.break(style="width: 25%;")
+              td.break(style="width: 22%;")
                 span.select {{item.albumName}}
-              td(style="width: 10%;")
+              td(style="width: 8%;")
                 span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
-              td(style="width: 15%; padding-left: 0; padding-right: 0;")
+              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)"
@@ -53,14 +53,15 @@
         p {{$t('view.search.no_item')}}
     material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
     material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
-    material-flow-btn(:show="isShowEditBtn && (searchSourceId == 'all' || assertApiSupport(searchSourceId))" :remove-btn="false" @btn-click="handleFlowBtnClick")
-    material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
-    material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose")
+    //- 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="selectdData" @close="handleListAddMultipleModalClose")
+    material-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 } from '../utils'
+import { scrollTo, clipboardWriteText, assertApiSupport, findParentNode } from '../utils'
 // import music from '../utils/music'
 export default {
   name: 'Search',
@@ -73,7 +74,7 @@ export default {
       isShowDownload: false,
       musicInfo: null,
       selectdData: [],
-      isShowEditBtn: false,
+      // isShowEditBtn: false,
       isShowDownloadMultiple: false,
       searchSourceId: null,
       isShowListAdd: false,
@@ -82,6 +83,18 @@ export default {
         isShiftDown: false,
         isModDown: false,
       },
+      listMenu: {
+        isShowItemMenu: false,
+        itemMenuControl: {
+          play: true,
+          addTo: true,
+          download: true,
+        },
+        menuLocation: {
+          x: 0,
+          y: 0,
+        },
+      },
     }
   },
   beforeRouteUpdate(to, from, next) {
@@ -120,14 +133,14 @@ export default {
     this.handleGetHotSearch()
   },
   watch: {
-    selectdData(n) {
-      const len = n.length
-      if (len) {
-        this.isShowEditBtn = true
-      } else {
-        this.isShowEditBtn = false
-      }
-    },
+    // selectdData(n) {
+    //   const len = n.length
+    //   if (len) {
+    //     this.isShowEditBtn = true
+    //   } else {
+    //     this.isShowEditBtn = false
+    //   }
+    // },
     'listInfo.list'() {
       this.removeAllSelect()
     },
@@ -147,6 +160,25 @@ export default {
     ...mapGetters(['userInfo', 'setting']),
     ...mapGetters('search', ['sourceList', 'allList', 'sources', 'historyList']),
     ...mapGetters('list', ['defaultList']),
+    listItemMenu() {
+      return [
+        {
+          name: this.$t('view.search.list_play'),
+          action: 'play',
+          disabled: !this.listMenu.itemMenuControl.play,
+        },
+        {
+          name: this.$t('view.search.list_download'),
+          action: 'download',
+          disabled: !this.listMenu.itemMenuControl.download,
+        },
+        {
+          name: this.$t('view.search.list_add_to'),
+          action: 'addTo',
+          disabled: !this.listMenu.itemMenuControl.addTo,
+        },
+      ]
+    },
     listInfo() {
       return this.setting.search.searchSource == 'all' ? this.allList : this.sourceList[this.setting.search.searchSource]
     },
@@ -329,32 +361,36 @@ export default {
         node.classList.add('active')
       }
     },
-    handleFlowBtnClick(action) {
-      switch (action) {
-        case 'download':
-          this.isShowDownloadMultiple = true
-          break
-        case 'play':
-          this.testPlay()
-          this.removeAllSelect()
-          break
-        case 'add':
-          this.isShowListAddMultiple = true
-          break
-      }
-    },
+    // handleFlowBtnClick(action) {
+    //   switch (action) {
+    //     case 'download':
+    //       this.isShowDownloadMultiple = true
+    //       break
+    //     case 'play':
+    //       this.testPlay()
+    //       this.removeAllSelect()
+    //       break
+    //     case 'add':
+    //       this.isShowListAddMultiple = true
+    //       break
+    //   }
+    // },
     filterList(list) {
       return this.searchSourceId == 'all'
         ? list.filter(s => this.assertApiSupport(s.source))
         : this.assertApiSupport(this.searchSourceId)
           ? [...list] : []
     },
-    handleListAddModalClose(isClearSelect) {
-      if (isClearSelect) this.removeAllSelect()
+    handleListAddModalClose() {
+      this.isShowListAdd = false
+    },
+    handleListAddMultipleModalClose(isClearSelect) {
+      if (isClearSelect) this.removeAllSelectListDetail()
       this.isShowListAddMultiple = false
     },
     handleContextMenu(event) {
       if (!event.target.classList.contains('select')) return
+      event.stopImmediatePropagation()
       let classList = this.$refs.dom_scrollContent.classList
       classList.add(this.$style.copying)
       window.requestAnimationFrame(() => {
@@ -380,6 +416,59 @@ export default {
     assertApiSupport(source) {
       return assertApiSupport(source)
     },
+    handleListItemRigthClick(event, index) {
+      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 = findParentNode(event.target, '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
+      this.$nextTick(() => {
+        this.listMenu.isShowItemMenu = true
+      })
+    },
+    hideListMenu() {
+      let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
+      if (dom_selected) dom_selected.classList.remove('selected')
+      this.listMenu.isShowItemMenu = false
+      this.listMenu.rightClickItemIndex = -1
+    },
+    handleListItemMenuClick(action) {
+      // console.log(action)
+      let index = this.listMenu.rightClickItemIndex
+      this.hideListMenu()
+      let minfo
+      switch (action && action.action) {
+        case 'play':
+          this.testPlay(index)
+          break
+        case 'addTo':
+          if (this.selectdData.length) {
+            this.$nextTick(() => {
+              this.isShowListAddMultiple = true
+            })
+          } else {
+            this.musicInfo = this.listInfo.list[index]
+            this.$nextTick(() => {
+              this.isShowListAdd = true
+            })
+          }
+          break
+        case 'download':
+          if (this.selectdData.length) {
+            this.isShowDownloadMultiple = true
+          } else {
+            minfo = this.listInfo.list[index]
+            if (!this.assertApiSupport(minfo.source)) return
+            this.musicInfo = minfo
+            this.$nextTick(() => {
+              this.isShowDownload = true
+            })
+          }
+          break
+      }
+    },
   },
 }
 </script>
@@ -397,7 +486,7 @@ export default {
   flex: none;
 }
 .list {
-  position: relative;
+  // position: relative;
   height: 100%;
   font-size: 14px;
   display: flex;
@@ -498,10 +587,10 @@ export default {
   .mixin-ellipsis-1;
   max-width: 150px;
   &:hover {
-    background-color: @color-theme_2-hover;
+    background-color: @color-btn-hover;
   }
   &:active {
-    background-color: @color-theme_2-active;
+    background-color: @color-btn-active;
   }
 }
 .history-clear-btn {
@@ -536,10 +625,10 @@ each(@themes, {
       color: ~'@{color-@{value}-btn}';
       background-color: ~'@{color-@{value}-btn-background}';
       &:hover {
-        background-color: ~'@{color-@{value}-theme_2-hover}';
+        background-color: ~'@{color-@{value}-btn-hover}';
       }
       &:active {
-        background-color: ~'@{color-@{value}-theme_2-active}';
+        background-color: ~'@{color-@{value}-btn-active}';
       }
     }
     .tbody {
diff --git a/src/renderer/views/SongList.vue b/src/renderer/views/SongList.vue
index 3fac2bfa..ea01f1e9 100644
--- a/src/renderer/views/SongList.vue
+++ b/src/renderer/views/SongList.vue
@@ -197,6 +197,38 @@ export default {
           break
       }
     },
+    handleMenuClick(info) {
+      switch (info.action) {
+        case 'download':
+          if (this.selectdData.length) {
+            this.isShowDownloadMultiple = true
+          } else {
+            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 'addTo':
+          if (this.selectdData.length) {
+            this.$nextTick(() => {
+              this.isShowListAddMultiple = true
+            })
+          } else {
+            this.musicInfo = this.listDetail.list[info.index]
+            this.$nextTick(() => {
+              this.isShowListAdd = true
+            })
+          }
+          break
+      }
+    },
     testPlay(index) {
       let targetSong
       if (index == null) {
@@ -259,27 +291,29 @@ export default {
         this.handleGetListDetail(this.selectListInfo.id, 1)
       })
     },
-    handleFlowBtnClick(action) {
-      switch (action) {
-        case 'download':
-          this.isShowDownloadMultiple = true
-          break
-        case 'play':
-          this.testPlay()
-          break
-        case 'add':
-          this.isShowListAddMultiple = true
-          break
-      }
-    },
+    // 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.handleToggleListDetailPage(data)
-        case 'flowBtnClick':
-          return this.handleFlowBtnClick(data)
+        // case 'flowBtnClick':
+        //   return this.handleFlowBtnClick(data)
         case 'testPlay':
           return this.testPlay(data)
         case 'search':