新增根据歌曲名、歌手名等字段对列表自动排序的功能

2021-12-06 15:33:36 +08:00 · 2021-12-06 15:33:36 +08:00 · ec3a0e08c3
parent a96eea5e44
commit ec3a0e08c3
28 changed files with 464 additions and 166 deletions
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@ -3,6 +3,7 @@
 - 播放详情页新增音量控制条
 - 播放详情页新增桌面歌词切换按钮
 - 新增将我的列表保存为TXT、CSV格式，可以去设置-备份与恢复中使用（注意：此类格式的备份目前不支持恢复到LX Music中）
+- 新增根据歌曲名、歌手名等字段对列表自动排序的功能，可以在我的列表右击列表名弹出的菜单中使用

 ### 优化

--- a/src/lang/en-us.json
+++ b/src/lang/en-us.json
@ -14,7 +14,7 @@
  "comment__refresh": "Refresh comments",
  "comment__show": "Song comments",
  "comment__title": "{name} comment",
-  "confirm_button_text": "OK",
+  "confirm_button_text": "Yes",
  "copy_tip": " (Click to copy)",
  "date_format_hour": "{num} hours ago",
  "date_format_minute": "{num} minutes ago",
@ -91,6 +91,16 @@
  "list_add__title_first_add": "Add",
  "list_add__title_first_move": "Move",
  "list_add__title_last": "to...",
+  "list_sort_modal_by_album": "Album name",
+  "list_sort_modal_by_down": "Descending",
+  "list_sort_modal_by_field": "Sort field",
+  "list_sort_modal_by_name": "Song name",
+  "list_sort_modal_by_singer": "Singer name",
+  "list_sort_modal_by_source": "Song source",
+  "list_sort_modal_by_time": "Duration",
+  "list_sort_modal_by_type": "Sort categories",
+  "list_sort_modal_by_up": "Ascending",
+  "list_sort_modal_tip_confirm": "Are you sure you want to do this?",
  "lists__duplicate": "Duplicate song",
  "lists__export": "Export",
  "lists__export_part_desc": "Choose where to save the list file",
@ -107,6 +117,7 @@
  "lists__remove_tip": "Do you really want to remove {name}?",
  "lists__remove_tip_button": "Yes, that's right",
  "lists__rename": "Rename",
+  "lists__sort_list": "Sort",
  "lists__sync": "Update",
  "load_list_file_error_detail": "We have helped you back up the old list file to {path}\nIt is stored in JSON format, you can try to repair and restore it manually\n\nError details: {detail}",
  "load_list_file_error_title": "Error loading playlist data",
@ -119,6 +130,7 @@
  "music_duplicate": "Duplicate song",
  "music_name": "Name",
  "music_singer": "Artist",
+  "music_sort__btn_cancel": "Cancel",
  "music_sort__btn_confirm": "Confirm",
  "music_sort__input_tip": "Please input which position you want to adjust to",
  "music_sort__title": "Adjust the position of {name} to:",
--- a/src/lang/zh-cn.json
+++ b/src/lang/zh-cn.json
@ -14,7 +14,7 @@
  "comment__refresh": "刷新评论",
  "comment__show": "歌曲评论",
  "comment__title": "{name} 的评论",
-  "confirm_button_text": "好的",
+  "confirm_button_text": "是的",
  "copy_tip": "（点击复制）",
  "date_format_hour": "{num}小时前",
  "date_format_minute": "{num}分钟前",
@ -91,6 +91,16 @@
  "list_add__title_first_add": "添加",
  "list_add__title_first_move": "移动",
  "list_add__title_last": "到...",
+  "list_sort_modal_by_album": "专辑名",
+  "list_sort_modal_by_down": "降序",
+  "list_sort_modal_by_field": "排序字段",
+  "list_sort_modal_by_name": "歌曲名",
+  "list_sort_modal_by_singer": "歌手名",
+  "list_sort_modal_by_source": "歌曲源",
+  "list_sort_modal_by_time": "时长",
+  "list_sort_modal_by_type": "排序类别",
+  "list_sort_modal_by_up": "升序",
+  "list_sort_modal_tip_confirm": "你确定要这么做吗？",
  "lists__duplicate": "重复歌曲",
  "lists__export": "导出",
  "lists__export_part_desc": "选择列表文件保存位置",
@ -107,6 +117,7 @@
  "lists__remove_tip": "你真的想要移除 {name} 吗？",
  "lists__remove_tip_button": "是的 没错",
  "lists__rename": "重命名",
+  "lists__sort_list": "排序",
  "lists__sync": "更新",
  "load_list_file_error_detail": "我们已经帮你把旧的列表文件备份到{path}\n它以 JSON 格式存储，你可以尝试手动修复并恢复它\n\n错误详情：{detail}",
  "load_list_file_error_title": "播放列表数据加载错误（建议到GitHub或加群反馈）",
@ -119,6 +130,7 @@
  "music_duplicate": "重复歌曲",
  "music_name": "歌曲名",
  "music_singer": "歌手",
+  "music_sort__btn_cancel": "取消",
  "music_sort__btn_confirm": "确定",
  "music_sort__input_tip": "请输入要调整到第几个位置",
  "music_sort__title": "将 {name} 的位置调整到：",
--- a/src/lang/zh-tw.json
+++ b/src/lang/zh-tw.json
@ -14,7 +14,7 @@
  "comment__refresh": "刷新評論",
  "comment__show": "歌曲評論",
  "comment__title": "{name} 的評論",
-  "confirm_button_text": "好的",
+  "confirm_button_text": "是的",
  "copy_tip": "（點擊複製）",
  "date_format_hour": "{num}小時前",
  "date_format_minute": "{num}分鐘前",
@ -91,6 +91,16 @@
  "list_add__title_first_add": "添加",
  "list_add__title_first_move": "移動",
  "list_add__title_last": "到...",
+  "list_sort_modal_by_album": "專輯名",
+  "list_sort_modal_by_down": "降序",
+  "list_sort_modal_by_field": "排序字段",
+  "list_sort_modal_by_name": "歌曲名",
+  "list_sort_modal_by_singer": "歌手名",
+  "list_sort_modal_by_source": "歌曲源",
+  "list_sort_modal_by_time": "時長",
+  "list_sort_modal_by_type": "排序類別",
+  "list_sort_modal_by_up": "升序",
+  "list_sort_modal_tip_confirm": "你確定要這麼做嗎？",
  "lists__duplicate": "重複歌曲",
  "lists__export": "導出",
  "lists__export_part_desc": "選擇列表文件保存位置",
@ -107,6 +117,7 @@
  "lists__remove_tip": "你真的想要移除 {name} 嗎？",
  "lists__remove_tip_button": "是的 沒錯",
  "lists__rename": "重命名",
+  "lists__sort_list": "排序",
  "lists__sync": "更新",
  "load_list_file_error_detail": "我們已經幫你把舊的列表文件備份到{path}\n它以 JSON 格式存儲，你可以嘗試手動修復並恢復它\n\n錯誤詳情：{detail}",
  "load_list_file_error_title": "播放列表數據加載錯誤",
@ -119,6 +130,7 @@
  "music_duplicate": "重複歌曲",
  "music_name": "歌曲名",
  "music_singer": "歌手",
+  "music_sort__btn_cancel": "取消",
  "music_sort__btn_confirm": "確定",
  "music_sort__input_tip": "請輸入要調整到第幾個位置",
  "music_sort__title": "將 {name} 的位置調整到：",
--- a/src/renderer/assets/styles/index.less
+++ b/src/renderer/assets/styles/index.less
@ -232,6 +232,22 @@ input, textarea {
    transition: all 0.4s ease;
  }
 }
+
+.gap-left {
+  + .gap-left {
+    margin-left: 20px;
+  }
+}
+.gap-top {
+  &.top {
+    margin-top: 25px;
+  }
+
+  + .gap-top {
+    margin-top: 10px;
+  }
+}
+
 /*
 #waiting-mask {
  position: absolute;
--- a/src/renderer/components/common/DownloadModal.vue
+++ b/src/renderer/components/common/DownloadModal.vue
@ -1,5 +1,5 @@
 <template>
-<material-modal :show="show" :bg-close="bgClose" @close="handleClose">
+<material-modal :show="show" :bg-close="bgClose" @close="handleClose" :teleport="teleport">
  <main :class="$style.main">
    <h2>{{ info.name }}<br/>{{ info.singer }}</h2>
    <base-btn :class="$style.btn" :key="type.type" @click="handleClick(type.type)" v-for="type in types"
@ -25,6 +25,7 @@ export default {
      type: Boolean,
      default: true,
    },
+    teleport: String,
  },
  emits: ['update:show'],
  setup() {
--- a/src/renderer/components/common/DownloadMultipleModal.vue
+++ b/src/renderer/components/common/DownloadMultipleModal.vue
@ -1,5 +1,5 @@
 <template>
-<material-modal :show="show" :bg-close="bgClose" @close="handleClose">
+<material-modal :show="show" :bg-close="bgClose" @close="handleClose" :teleport="teleport">
  <main :class="$style.main">
    <h2>{{$t('download__multiple_tip', { len: list.length })}}<br/>{{$t('download__multiple_tip2')}}</h2>
    <base-btn :class="$style.btn" @click="handleClick('128k')">{{$t('download__normal')}} - 128K</base-btn>
@ -28,6 +28,7 @@ export default {
        return []
      },
    },
+    teleport: String,
  },
  emits: ['update:show', 'confirm'],
  methods: {
--- a/src/renderer/components/common/ListAddModal.vue
+++ b/src/renderer/components/common/ListAddModal.vue
@ -1,5 +1,5 @@
 <template>
-<material-modal :show="show" :bg-close="bgClose" @close="handleClose">
+<material-modal :show="show" :bg-close="bgClose" @close="handleClose" :teleport="teleport">
  <main :class="$style.main">
    <h2>{{$t('list_add__' + (isMove ? 'title_first_move' : 'title_first_add'))}}&nbsp;<span :class="$style.name">{{this.musicInfo && `${musicInfo.name}`}}</span>&nbsp;{{$t('list_add__title_last')}}</h2>
    <div class="scroll" :class="$style.btnContent">
@ -53,6 +53,7 @@ export default {
      type: Boolean,
      default: false,
    },
+    teleport: String,
  },
  emits: ['update:show'],
  setup(props) {
--- a/src/renderer/components/common/ListAddMultipleModal.vue
+++ b/src/renderer/components/common/ListAddMultipleModal.vue
@ -55,6 +55,7 @@ export default {
      type: Boolean,
      default: false,
    },
+    teleport: String,
  },
  emits: ['update:show', 'confirm'],
  setup(props) {
--- a/src/renderer/components/core/PlayBar/ControlBtns.vue
+++ b/src/renderer/components/core/PlayBar/ControlBtns.vue
@ -31,9 +31,7 @@
      <use xlink:href="#icon-add-2"></use>
    </svg>
  </div>
-  <teleport to="#root">
-    <common-list-add-modal :show="isShowAddMusicTo" :musicInfo="musicInfoItem" @close="isShowAddMusicTo = false" />
-  </teleport>
+  <common-list-add-modal :show="isShowAddMusicTo" :musicInfo="musicInfoItem" @close="isShowAddMusicTo = false" />
 </div>
 </template>

--- a/src/renderer/components/core/PlayDetail/components/ControlBtns.vue
+++ b/src/renderer/components/core/PlayDetail/components/ControlBtns.vue
@ -26,8 +26,7 @@ div(:class="$style.footerLeftControlBtns")
  div(:class="$style.footerLeftControlBtn" @click="isShowAddMusicTo = true" :tips="$t('player__add_music_to')")
    svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' space='preserve')
      use(xlink:href='#icon-add-2')
-  teleport(to="#root")
-    common-list-add-modal(:show="isShowAddMusicTo" :musicInfo="musicInfoItem" @close="isShowAddMusicTo = false")
+  common-list-add-modal(:show="isShowAddMusicTo" :musicInfo="musicInfoItem" @close="isShowAddMusicTo = false")

 </template>

--- a/src/renderer/components/material/Modal.vue
+++ b/src/renderer/components/material/Modal.vue
@ -1,14 +1,15 @@
 <template lang="pug">
-div(:class="$style.container" v-if="showModal")
-  transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
-    div(:class="$style.modal" v-show="showContent" @click="bgClose && close()")
-      transition(:enter-active-class="inClass" :leave-active-class="outClass" @after-enter="$emit('after-enter', $event)" @after-leave="handleAfterLeave")
-        div(:class="$style.content" v-show="showContent" @click.stop)
-          header(:class="$style.header")
-            button(type="button" @click="close" v-if="closeBtn")
-              svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve')
-                use(xlink:href='#icon-delete')
-          slot
+teleport(:to="teleport")
+  div(:class="$style.container" v-if="showModal")
+    transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
+      div(:class="$style.modal" v-show="showContent" @click="bgClose && close()")
+        transition(:enter-active-class="inClass" :leave-active-class="outClass" @after-enter="$emit('after-enter', $event)" @after-leave="handleAfterLeave")
+          div(:class="$style.content" v-show="showContent" @click.stop)
+            header(:class="$style.header")
+              button(type="button" @click="close" v-if="closeBtn")
+                svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve')
+                  use(xlink:href='#icon-delete')
+            slot
 </template>

 <script>
@ -29,6 +30,10 @@ export default {
      type: Boolean,
      default: false,
    },
+    teleport: {
+      type: String,
+      default: '#root',
+    },
  },
  emits: ['after-enter', 'after-leave', 'close'],
  data() {
--- a/src/renderer/components/material/OnlineList/index.vue
+++ b/src/renderer/components/material/OnlineList/index.vue
@ -41,11 +41,10 @@ div(:class="$style.songList")
          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")
-  teleport(to="#view")
-    common-download-modal(v-model:show="isShowDownload" :musicInfo="selectedDownloadMusicInfo")
-    common-download-multiple-modal(v-model:show="isShowDownloadMultiple" :list="selectedList" @confirm="removeAllSelect")
-    common-list-add-modal(v-model:show="isShowListAdd" :musicInfo="selectedAddMusicInfo")
-    common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :musicList="selectedList" @confirm="removeAllSelect")
+  common-download-modal(v-model:show="isShowDownload" :musicInfo="selectedDownloadMusicInfo" teleport="#view")
+  common-download-multiple-modal(v-model:show="isShowDownloadMultiple" :list="selectedList" @confirm="removeAllSelect" teleport="#view")
+  common-list-add-modal(v-model:show="isShowListAdd" :musicInfo="selectedAddMusicInfo" teleport="#view")
+  common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :musicList="selectedList" @confirm="removeAllSelect" teleport="#view")
  base-menu(:menus="menus" :location="menuLocation" item-name="name" :isShow="isShowItemMenu" @menu-click="handleMenuClick")
 </template>

--- a/src/renderer/plugins/Dialog/Dialog.vue
+++ b/src/renderer/plugins/Dialog/Dialog.vue
@ -1,11 +1,11 @@
 <template>
-  <Modal :show="visible" @close="handleCancel" @after-leave="afterLeave" :closeBtn="false">
-    <main :class="$style.main">{{message}}</main>
-    <footer :class="$style.footer">
-      <Btn :class="$style.btn" v-if="showCancel" @click="handleCancel">{{cancelBtnText}}</Btn>
-      <Btn :class="$style.btn" @click="handleComfirm">{{confirmBtnText}}</Btn>
-    </footer>
-  </Modal>
+<Modal :show="visible" @close="handleCancel" @after-leave="afterLeave" :closeBtn="false" :teleport="teleport">
+  <main :class="$style.main">{{message}}</main>
+  <footer :class="$style.footer">
+    <Btn :class="$style.btn" v-if="showCancel" @click="handleCancel">{{cancelBtnText}}</Btn>
+    <Btn :class="$style.btn" @click="handleComfirm">{{confirmBtnText}}</Btn>
+  </footer>
+</Modal>
 </template>

 <script>
@ -29,6 +29,7 @@ export default {
      showCancel: false,
      cancelButtonText: '',
      confirmButtonText: '',
+      teleport: '#root',
    }
  },
  computed: {
--- a/src/renderer/plugins/Dialog/index.js
+++ b/src/renderer/plugins/Dialog/index.js
@ -6,13 +6,14 @@ import { createApp } from 'vue'

 const defaultOptions = {
  message: '',
+  teleport: '#root',
  showCancel: false,
  cancelButtonText: '',
  confirmButtonText: '',
 }

 export const dialog = function(options) {
-  const { message, showCancel, cancelButtonText, confirmButtonText } =
+  const { message, showCancel, cancelButtonText, confirmButtonText, teleport } =
    Object.assign({}, defaultOptions, typeof options == 'string' ? { message: options } : options || {})
  return new Promise((resolve, reject) => {
    let app = createApp(Dialog, {
@ -30,6 +31,7 @@ export const dialog = function(options) {
    instance.showCancel = showCancel
    instance.cancelButtonText = cancelButtonText
    instance.confirmButtonText = confirmButtonText
+    instance.teleport = teleport

    // 挂载
    document.getElementById('container').appendChild(instance.$el)
@ -45,6 +47,7 @@ export const dialog = function(options) {
    }
  })
 }
+
 dialog.confirm = options => dialog(
  typeof options == 'string'
    ? { message: options, showCancel: true }
--- a/src/renderer/views/Search.vue
+++ b/src/renderer/views/Search.vue
@ -57,11 +57,10 @@ div(:class="$style.search")
        div(v-else :class="$style.noitem_list")
          p {{$t('search__welcome')}}
  //- common-flow-btn(:show="isShowEditBtn && (searchSourceId == 'all' || assertApiSupport(searchSourceId))" :remove-btn="false" @btn-click="handleFlowBtnClick")
-  teleport(to="#view")
-    common-download-modal(v-model:show="isShowDownload" :musicInfo="musicInfo")
-    common-download-multiple-modal(v-model:show="isShowDownloadMultiple" :list="selectedData" @confirm="removeAllSelect")
-    common-list-add-modal(v-model:show="isShowListAdd" :musicInfo="musicInfo")
-    common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :musicList="selectedData" @confirm="removeAllSelect")
+  common-download-modal(v-model:show="isShowDownload" :musicInfo="musicInfo" teleport="#view")
+  common-download-multiple-modal(v-model:show="isShowDownloadMultiple" :list="selectedData" @confirm="removeAllSelect" teleport="#view")
+  common-list-add-modal(v-model:show="isShowListAdd" :musicInfo="musicInfo" teleport="#view")
+  common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :musicList="selectedData" @confirm="removeAllSelect" teleport="#view")
  base-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
 </template>

--- a/src/renderer/views/list/List.vue
+++ b/src/renderer/views/list/List.vue
@ -1,6 +1,6 @@
 <template>
 <div id="my-list" :class="$style.container" @click="handleContainerClick" v-if="isInitedList">
-  <MyLists :list-id="listId" @show-menu="$refs.musicList.hideMenu()" ref="lists" />
+  <MyLists :list-id="listId" @show-menu="$refs.musicList.handleMenuClick()" ref="lists" />
  <MusicList :list-id="listId" @show-menu="$refs.lists.hideListsMenu()" ref="musicList" />
 </div>

--- a/src/renderer/views/list/components/DuplicateMusicModal.vue
+++ b/src/renderer/views/list/components/DuplicateMusicModal.vue
@ -1,5 +1,5 @@
 <template>
-<material-modal :show="visible" @close="$emit('update:visible', false)" bg-close="bg-close">
+<material-modal :show="visible" @close="$emit('update:visible', false)" bg-close  teleport="#view">
  <div :class="$style.header">
    <h2>{{listInfo.name}}</h2>
  </div>
@ -121,6 +121,9 @@ export default {
  flex: none;
  padding: 15px;
  text-align: center;
+  h2 {
+    word-break: break-all;
+  }
 }
 .main {
  min-height: 200px;
--- a/src/renderer/views/list/components/ListSortModal.vue
+++ b/src/renderer/views/list/components/ListSortModal.vue
@ -1,68 +1,166 @@
 <template>
-<material-modal :show="show" @close="handleClose" @after-enter="$refs.input.focus()">
+<material-modal :show="visible" @close="closeModal" teleport="#view" bg-close @after-leave="handleAfterLeave">
  <main :class="$style.main">
-    <h2>{{selectedNum > 0 ? $t('music_sort__title_multiple', { num: selectedNum }) : $t('music_sort__title', { name: musicInfo ? musicInfo.name : '' })}}</h2>
-    <base-input :class="$style.input"
-      type="number"
-      v-model="sortNum"
-      ref="input"
-      @submit="handleSubmit"
-      @blur="verify" :placeholder="$t('music_sort__input_tip')" />
+    <div :class="$style.header">
+      <h2>{{listInfo.name}}</h2>
+    </div>
+    <section>
+      <h3 :class="$style.title">{{$t('list_sort_modal_by_field')}}</h3>
+      <ul :class="$style.list">
+        <li :class="$style.listItem">
+          <base-checkbox id="list_sort_modal_field_name" name="list_sort_modal_field" need="need"
+            v-model="sortField" value="name" :label="$t('list_sort_modal_by_name')" />
+        </li>
+        <li :class="$style.listItem">
+          <base-checkbox id="list_sort_modal_field_singer" name="list_sort_modal_field" need="need"
+            v-model="sortField" value="singer" :label="$t('list_sort_modal_by_singer')" />
+        </li>
+        <li :class="$style.listItem">
+          <base-checkbox id="list_sort_modal_field_album" name="list_sort_modal_field" need="need"
+            v-model="sortField" value="album" :label="$t('list_sort_modal_by_album')" />
+        </li>
+        <li :class="$style.listItem">
+          <base-checkbox id="list_sort_modal_field_time" name="list_sort_modal_field" need="need"
+            v-model="sortField" value="time" :label="$t('list_sort_modal_by_time')" />
+        </li>
+        <li :class="$style.listItem">
+          <base-checkbox id="list_sort_modal_field_source" name="list_sort_modal_field" need="need"
+            v-model="sortField" value="source" :label="$t('list_sort_modal_by_source')" />
+        </li>
+      </ul>
+    </section>
+    <section>
+      <h3 :class="$style.title">{{$t('list_sort_modal_by_type')}}</h3>
+      <ul :class="$style.list">
+        <li :class="$style.listItem">
+          <base-checkbox id="list_sort_modal_type_down" name="list_sort_modal_type" need="need"
+            v-model="sortType" value="down" :label="$t('list_sort_modal_by_down')" />
+        </li>
+        <li :class="$style.listItem">
+          <base-checkbox id="list_sort_modal_type_up" name="list_sort_modal_type" need="need"
+            v-model="sortType" value="up" :label="$t('list_sort_modal_by_up')" />
+        </li>
+      </ul>
+    </section>
    <div :class="$style.footer">
-      <base-btn :class="$style.btn" @click="handleSubmit">{{$t('music_sort__btn_confirm')}}</base-btn>
+      <base-btn :class="$style.btn" @click="closeModal">{{$t('music_sort__btn_cancel')}}</base-btn>
+      <base-btn :class="$style.btn" @click="handleSort">{{$t('music_sort__btn_confirm')}}</base-btn>
    </div>
  </main>
 </material-modal>
 </template>

 <script>
+import { ref, useCommit } from '@renderer/utils/vueTools'
+// import { dialog } from '@renderer/plugins/Dialog'
+import { getList } from '@renderer/core/share/utils'
+
+const getIntv = (musicInfo) => {
+  if (!musicInfo.interval) return 0
+  if (musicInfo._interval) return musicInfo._interval
+  let intvArr = musicInfo.interval.split(':')
+  let intv = 0
+  let unit = 1
+  while (intvArr.length) {
+    intv += (intvArr.pop()) * unit
+    unit *= 60
+  }
+  return parseInt(intv)
+}
 export default {
  props: {
-    show: {
+    visible: {
      type: Boolean,
      default: false,
    },
-    musicInfo: {
+    listInfo: {
      type: Object,
-      default() {
-        return {}
-      },
-    },
-    selectedNum: {
-      type: Number,
-      default: 0,
+      required: true,
    },
  },
-  emits: ['update:show', 'confirm'],
-  data() {
-    return {
-      sortNum: '',
+  emits: ['update:visible'],
+  setup(props, { emit }) {
+    // const { t } = useI18n()
+    const sortField = ref(null)
+    const sortType = ref(null)
+    const setList = useCommit('list', 'setList')
+    const closeModal = () => {
+      emit('update:visible', false)
    }
-  },
-  watch: {
-    show(n) {
-      if (n) {
-        this.sortNum = ''
+    const handleAfterLeave = () => {
+      sortField.value = null
+      sortType.value = null
+    }
+    const verify = () => {
+      return !!sortField.value && !!sortType.value
+    }
+    const handleSort = async() => {
+      if (!verify()) return
+      // if (!await dialog.confirm({
+      //   message: t('list_sort_modal_tip_confirm'),
+      //   cancelButtonText: t('cancel_button_text'),
+      //   confirmButtonText: t('confirm_button_text'),
+      // })) return
+
+      const list = [...getList(props.listInfo.id)]
+      let fieldName
+      switch (sortField.value) {
+        case 'name':
+          fieldName = 'name'
+          break
+        case 'singer':
+          fieldName = 'singer'
+          break
+        case 'album':
+          fieldName = 'albumName'
+          break
+        case 'time':
+          fieldName = 'interval'
+          break
+        case 'source':
+          fieldName = 'source'
+          break
      }
-    },
-  },
-  methods: {
-    handleClose() {
-      this.$emit('update:show', false)
-    },
-    verify() {
-      let num = /^[1-9]\d*/.exec(this.sortNum)
-      num = num ? parseInt(num[0]) : ''
-      this.sortNum = num.toString()
-      return num
-    },
-    handleSubmit() {
-      console.log('object')
-      let num = this.verify()
-      if (this.sortNum == '') return
-      this.handleClose()
-      this.$emit('confirm', num)
-    },
+      console.log(sortType.value, sortField.value)
+      if (sortType.value == 'down') {
+        if (fieldName == 'interval') {
+          list.sort((a, b) => {
+            if (a.interval == null) {
+              return b.interval == null ? 0 : 1
+            } else return b.interval == null ? -1 : getIntv(b) - getIntv(a)
+          })
+        } else {
+          list.sort((a, b) => {
+            if (a[fieldName] == null) {
+              return b[fieldName] == null ? 0 : -1
+            } else return b[fieldName] == null ? 1 : a[fieldName].localeCompare(b[fieldName])
+          })
+        }
+      } else {
+        if (fieldName == 'interval') {
+          list.sort((a, b) => {
+            if (a.interval == null) {
+              return b.interval == null ? 0 : -1
+            } else return b.interval == null ? 1 : getIntv(a) - getIntv(b)
+          })
+        } else {
+          list.sort((a, b) => {
+            if (a[fieldName] == null) {
+              return b[fieldName] == null ? 0 : 1
+            } else return b[fieldName] == null ? -1 : b[fieldName].localeCompare(a[fieldName])
+          })
+        }
+      }
+      closeModal()
+      setList({ ...props.listInfo, list })
+    }
+    return {
+      sortField,
+      sortType,
+      closeModal,
+      handleSort,
+      handleAfterLeave,
+    }
  },
 }
 </script>
@ -71,29 +169,40 @@ export default {
 <style lang="less" module>
@import '@renderer/assets/styles/layout.less';

+.header {
+  flex: none;
+  padding: 15px;
+  text-align: center;
+  h2 {
+    color: @color-theme_2-font;
+    word-break: break-all;
+  }
+}
+
 .main {
  padding: 0 15px;
-  max-width: 530px;
-  min-width: 280px;
+  width: 320px;
  display: flex;
  flex-flow: column nowrap;
  min-height: 0;
  // max-height: 100%;
  // overflow: hidden;
-  h2 {
-    font-size: 13px;
-    color: @color-theme_2-font;
-    line-height: 1.3;
-    word-break: break-all;
-    // text-align: center;
-    padding: 15px 0 8px;
-  }
 }
-
-.input {
-  // width: 100%;
-  // height: 26px;
-  padding: 8px 8px;
+.title {
+  font-size: 14px;
+  color: @color-theme_2-font-label;
+  padding: 10px 0 8px;
+}
+.list {
+  display: flex;
+  flex-flow: row wrap;
+  font-size: 14px;
+}
+.listItem {
+  width: (100% / 3);
+  padding-left: 10px;
+  margin-bottom: 8px;
+  box-sizing: border-box;
 }
 .footer {
  margin: 20px 0 15px auto;
@ -115,11 +224,14 @@ export default {

 each(@themes, {
  :global(#root.@{value}) {
-    .main {
+    .header {
      h2 {
        color: ~'@{color-@{value}-theme_2-font}';
      }
    }
+    .title {
+      color: ~'@{color-@{value}-theme_2-font-label}';
+    }
  }
 })

--- a/src/renderer/views/list/components/MusicList/index.vue
+++ b/src/renderer/views/list/components/MusicList/index.vue
@ -32,13 +32,12 @@ div(:class="$style.list")
  div(:class="$style.noItem" v-show="!list.length")
    p(v-text="$t('no_item')")
  //- material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick")
-  teleport(to="#view")
-    common-download-modal(v-model:show="isShowDownload" :musicInfo="selectedDownloadMusicInfo")
-    common-download-multiple-modal(v-model:show="isShowDownloadMultiple" :list="selectedList" @confirm="removeAllSelect")
-    common-list-add-modal(v-model:show="isShowListAdd" :is-move="isMove" :musicInfo="selectedAddMusicInfo" :exclude-list-id="excludeListIds")
-    common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :is-move="isMoveMultiple" :musicList="selectedList" @confirm="removeAllSelect" :exclude-list-id="excludeListIds")
-    search-list(:list="list" @action="handleMusicSearchAction" :visible="isShowSearchBar")
-    list-sort-modal(v-model:show="isShowListSortModal" :music-info="selectedSortMusicInfo" :selected-num="selectedNum" @confirm="sortMusic")
+  common-download-modal(v-model:show="isShowDownload" :musicInfo="selectedDownloadMusicInfo" teleport="#view")
+  common-download-multiple-modal(v-model:show="isShowDownloadMultiple" :list="selectedList" @confirm="removeAllSelect" teleport="#view")
+  common-list-add-modal(v-model:show="isShowListAdd" :is-move="isMove" :musicInfo="selectedAddMusicInfo" :exclude-list-id="excludeListIds" teleport="#view")
+  common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :is-move="isMoveMultiple" :musicList="selectedList" @confirm="removeAllSelect" :exclude-list-id="excludeListIds" teleport="#view")
+  search-list(:list="list" @action="handleMusicSearchAction" :visible="isShowSearchBar")
+  music-sort-modal(v-model:show="isShowMusicSortModal" :music-info="selectedSortMusicInfo" :selected-num="selectedNum" @confirm="sortMusic")
  base-menu(:menus="menus" :location="menuLocation" item-name="name" :isShow="isShowItemMenu" @menu-click="handleMenuClick")
 </template>

@ -46,7 +45,7 @@ div(:class="$style.list")
 import { clipboardWriteText, assertApiSupport } from '@renderer/utils'
 import { useCssModule } from '@renderer/utils/vueTools'
 import SearchList from '../SearchList'
-import ListSortModal from '../ListSortModal'
+import MusicSortModal from '../MusicSortModal'
 import useListInfo from './useListInfo'
 import useList from './useList'
 import useMenu from './useMenu'
@ -68,7 +67,7 @@ export default {
  emits: ['show-menu'],
  components: {
    SearchList,
-    ListSortModal,
+    MusicSortModal,
  },
  setup(props, { emit }) {
    const styles = useCssModule()
@ -117,7 +116,7 @@ export default {
    } = useMusicDownload({ selectedList, list })

    const {
-      isShowListSortModal,
+      isShowMusicSortModal,
      selectedNum,
      selectedSortMusicInfo,
      handleShowSortModal,
@ -136,7 +135,6 @@ export default {
      menuLocation,
      isShowItemMenu,
      showMenu,
-      hideMenu,
      menuClick,
    } = useMenu({
      listRef,
@ -231,7 +229,6 @@ export default {
      isShowItemMenu,
      menuLocation,
      handleMenuClick,
-      hideMenu,

      handleListRightClick,
      assertApiSupport,
@ -242,7 +239,7 @@ export default {
      isMoveMultiple,
      selectedAddMusicInfo,

-      isShowListSortModal,
+      isShowMusicSortModal,
      selectedNum,
      selectedSortMusicInfo,
      sortMusic,
--- a/src/renderer/views/list/components/MusicList/useMenu.js
+++ b/src/renderer/views/list/components/MusicList/useMenu.js
@ -158,6 +158,5 @@ export default ({
    isShowItemMenu,
    showMenu,
    menuClick,
-    hideMenu,
  }
 }
--- a/src/renderer/views/list/components/MusicList/useSort.js
+++ b/src/renderer/views/list/components/MusicList/useSort.js
@ -1,7 +1,7 @@
 import { ref, nextTick, useCommit } from '@renderer/utils/vueTools'

 export default ({ props, list, selectedList, removeAllSelect }) => {
-  const isShowListSortModal = ref(false)
+  const isShowMusicSortModal = ref(false)
  const selectedNum = ref(0)
  const musicInfo = ref(null)

@ -14,7 +14,7 @@ export default ({ props, list, selectedList, removeAllSelect }) => {
      selectedNum.value = 0
      musicInfo.value = list.value[index]
      nextTick(() => {
-        isShowListSortModal.value = true
+        isShowMusicSortModal.value = true
      })
    }
  }
@ -27,11 +27,11 @@ export default ({ props, list, selectedList, removeAllSelect }) => {
      list: selectedNum.value ? [...selectedList.value] : [musicInfo.value],
    })
    removeAllSelect()
-    isShowListSortModal.value = false
+    isShowMusicSortModal.value = false
  }

  return {
-    isShowListSortModal,
+    isShowMusicSortModal,
    selectedNum,
    selectedSortMusicInfo: musicInfo,
    handleShowSortModal,
--- a/src/renderer/views/list/components/MusicSortModal.vue
+++ b/src/renderer/views/list/components/MusicSortModal.vue
@ -0,0 +1,125 @@
+<template>
+<material-modal :show="show" @close="handleClose" @after-enter="$refs.input.focus()" teleport="#view">
+  <main :class="$style.main">
+    <h2>{{selectedNum > 0 ? $t('music_sort__title_multiple', { num: selectedNum }) : $t('music_sort__title', { name: musicInfo ? musicInfo.name : '' })}}</h2>
+    <base-input :class="$style.input"
+      type="number"
+      v-model="sortNum"
+      ref="input"
+      @submit="handleSubmit"
+      @blur="verify" :placeholder="$t('music_sort__input_tip')" />
+    <div :class="$style.footer">
+      <base-btn :class="$style.btn" @click="handleSubmit">{{$t('music_sort__btn_confirm')}}</base-btn>
+    </div>
+  </main>
+</material-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    musicInfo: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    selectedNum: {
+      type: Number,
+      default: 0,
+    },
+  },
+  emits: ['update:show', 'confirm'],
+  data() {
+    return {
+      sortNum: '',
+    }
+  },
+  watch: {
+    show(n) {
+      if (n) {
+        this.sortNum = ''
+      }
+    },
+  },
+  methods: {
+    handleClose() {
+      this.$emit('update:show', false)
+    },
+    verify() {
+      let num = /^[1-9]\d*/.exec(this.sortNum)
+      num = num ? parseInt(num[0]) : ''
+      this.sortNum = num.toString()
+      return num
+    },
+    handleSubmit() {
+      let num = this.verify()
+      if (this.sortNum == '') return
+      this.handleClose()
+      this.$emit('confirm', num)
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.main {
+  padding: 0 15px;
+  max-width: 530px;
+  min-width: 280px;
+  display: flex;
+  flex-flow: column nowrap;
+  min-height: 0;
+  // max-height: 100%;
+  // overflow: hidden;
+  h2 {
+    font-size: 13px;
+    color: @color-theme_2-font;
+    line-height: 1.3;
+    word-break: break-all;
+    // text-align: center;
+    padding: 15px 0 8px;
+  }
+}
+
+.input {
+  // width: 100%;
+  // height: 26px;
+  padding: 8px 8px;
+}
+.footer {
+  margin: 20px 0 15px auto;
+}
+.btn {
+  // box-sizing: border-box;
+  // margin-left: 15px;
+  // margin-bottom: 15px;
+  // height: 36px;
+  // line-height: 36px;
+  // padding: 0 10px !important;
+  min-width: 70px;
+  // .mixin-ellipsis-1;
+
+  +.btn {
+    margin-left: 10px;
+  }
+}
+
+each(@themes, {
+  :global(#root.@{value}) {
+    .main {
+      h2 {
+        color: ~'@{color-@{value}-theme_2-font}';
+      }
+    }
+  }
+})
+
+</style>
--- a/src/renderer/views/list/components/MyLists.vue
+++ b/src/renderer/views/list/components/MyLists.vue
@ -34,7 +34,8 @@
    </transition>
  </ul>
  <base-menu :menus="listsItemMenu" :location="listsData.menuLocation" item-name="name" :isShow="listsData.isShowItemMenu" @menu-click="handleListsItemMenuClick" />
-  <DuplicateMusicModal v-model:visible="isShowDuplicateMusicModal" :list-info="selectedListInfo" />
+  <DuplicateMusicModal v-model:visible="isShowDuplicateMusicModal" :list-info="selectedDuplicateListInfo" />
+  <ListSortModal v-model:visible="isShowListSortModal" :list-info="selectedSortListInfo" />
 </div>
 </template>

@ -43,6 +44,7 @@ import { mapMutations, mapActions } from 'vuex'
 import { openSaveDir, saveLxConfigFile, selectDir, readLxConfigFile, filterFileName } from '@renderer/utils'
 import musicSdk from '@renderer/utils/music'
 import DuplicateMusicModal from './DuplicateMusicModal'
+import ListSortModal from './ListSortModal'
 import { defaultList, loveList, userLists } from '@renderer/core/share/list'
 import { computed } from '@renderer/utils/vueTools'
 import { getList } from '@renderer/core/share/utils'
@ -57,6 +59,7 @@ export default {
  },
  components: {
    DuplicateMusicModal,
+    ListSortModal,
  },
  setup() {
    const lists = computed(() => [defaultList, loveList, ...userLists])
@ -70,13 +73,14 @@ export default {
  emits: ['show-menu'],
  data() {
    return {
-      isShowListSortModal: false,
      isShowDuplicateMusicModal: false,
+      isShowListSortModal: false,
      listsData: {
        isShowItemMenu: false,
        itemMenuControl: {
          rename: true,
          duplicate: true,
+          sort: true,
          import: true,
          export: true,
          sync: false,
@ -93,7 +97,8 @@ export default {
        isNewLeave: false,
      },
      fetchingListStatus: {},
-      selectedListInfo: {},
+      selectedDuplicateListInfo: {},
+      selectedSortListInfo: {},
    }
  },
  computed: {
@ -114,6 +119,11 @@ export default {
          action: 'duplicate',
          disabled: !this.listsData.itemMenuControl.duplicate,
        },
+        {
+          name: this.$t('lists__sort_list'),
+          action: 'sort',
+          disabled: !this.listsData.itemMenuControl.sort,
+        },
        {
          name: this.$t('lists__import'),
          action: 'import',
@ -145,7 +155,6 @@ export default {
  watch: {
    listId(id) {
      this.setPrevSelectListId(id)
-      this.isShowListSortModal = false
    },
    lists(lists) {
      if (lists.some(l => l.id == this.listId)) return
@ -245,6 +254,7 @@ export default {
          this.listsData.itemMenuControl.movedown = index < userLists.length - 1
          break
      }
+      this.listsData.itemMenuControl.sort = !!getList(this.getTargetListInfo(index)?.id).length
      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
@ -272,9 +282,13 @@ export default {
          })
          break
        case 'duplicate':
-          this.selectedListInfo = this.getTargetListInfo(index)
+          this.selectedDuplicateListInfo = this.getTargetListInfo(index)
          this.isShowDuplicateMusicModal = true
          break
+        case 'sort':
+          this.selectedSortListInfo = this.getTargetListInfo(index)
+          this.isShowListSortModal = true
+          break
        case 'import':
          this.handleImportList(index)
          break
--- a/src/renderer/views/list/components/SearchList.vue
+++ b/src/renderer/views/list/components/SearchList.vue
@ -1,27 +1,28 @@
 <template lang="pug">
-div(:class="$style.container" ref="dom_container" v-show="isShow")
-  transition(enter-active-class="animated-fast zoomIn" leave-active-class="animated zoomOut" @after-leave="handleAnimated")
-    div(:class="$style.search" v-show="visible")
-      div(:class="$style.form")
-        input.key-bind.ignore-esc(:placeholder="placeholder" v-model.trim="text" ref="dom_input"
-              @input="handleDelaySearch"
-              @keyup.enter="handleTemplistClick(selectIndex)"
-              @keyup.arrow-down.prevent="handleKeyDown"
-              @keyup.arrow-up.prevent="handleKeyUp"
-              @keyup.escape.prevent="handleKeyEsc"
-              @contextmenu="handleContextMenu")
-        button(type="button" @click="handleHide")
-          slot
-            svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve')
-              use(xlink:href='#icon-delete')
-      div.scroll(v-if="resultList" :class="$style.list" :style="listStyle" ref="dom_scrollContainer")
-        ul(ref="dom_list")
-          li(v-for="(item, index) in resultList" :key="item.songmid" :class="selectIndex === index ? $style.select : null" @mouseenter="selectIndex = index" @click="handleTemplistClick(index)")
-            div(:class="$style.img")
-            div(:class="$style.text")
-              h3(:class="$style.text") {{item.name}} - {{item.singer}}
-              h3(v-if="item.albumName" :class="[$style.text, $style.albumName]") {{item.albumName}}
-            div(:class="$style.source") {{item.source}}
+teleport(to="#view")
+  div(:class="$style.container" ref="dom_container" v-show="isShow")
+    transition(enter-active-class="animated-fast zoomIn" leave-active-class="animated zoomOut" @after-leave="handleAnimated")
+      div(:class="$style.search" v-show="visible")
+        div(:class="$style.form")
+          input.key-bind.ignore-esc(:placeholder="placeholder" v-model.trim="text" ref="dom_input"
+                @input="handleDelaySearch"
+                @keyup.enter="handleTemplistClick(selectIndex)"
+                @keyup.arrow-down.prevent="handleKeyDown"
+                @keyup.arrow-up.prevent="handleKeyUp"
+                @keyup.escape.prevent="handleKeyEsc"
+                @contextmenu="handleContextMenu")
+          button(type="button" @click="handleHide")
+            slot
+              svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve')
+                use(xlink:href='#icon-delete')
+        div.scroll(v-if="resultList" :class="$style.list" :style="listStyle" ref="dom_scrollContainer")
+          ul(ref="dom_list")
+            li(v-for="(item, index) in resultList" :key="item.songmid" :class="selectIndex === index ? $style.select : null" @mouseenter="selectIndex = index" @click="handleTemplistClick(index)")
+              div(:class="$style.img")
+              div(:class="$style.text")
+                h3(:class="$style.text") {{item.name}} - {{item.singer}}
+                h3(v-if="item.albumName" :class="[$style.text, $style.albumName]") {{item.albumName}}
+              div(:class="$style.source") {{item.source}}
 </template>

 <script>
@ -107,6 +108,7 @@ export default {
      default: false,
    },
  },
+  emits: ['action'],
  data() {
    return {
      text: '',
--- a/src/renderer/views/setting/Setting.vue
+++ b/src/renderer/views/setting/Setting.vue
@ -247,20 +247,6 @@ export default {
        }
      }
    }
-    .gap-left {
-      + .gap-left {
-        margin-left: 20px;
-      }
-    }
-    .gap-top {
-      &.top {
-        margin-top: 25px;
-      }
-
-      + .gap-top {
-        margin-top: 10px;
-      }
-    }
  }
 }

--- a/src/renderer/views/setting/components/SettingBasic.vue
+++ b/src/renderer/views/setting/components/SettingBasic.vue
@ -48,8 +48,7 @@ dd
  div
    base-checkbox.gap-left(v-for="item in controlBtnPositionList" :key="item.id" :id="`setting_basic_control_btn_position_${item.id}`"
      name="setting_basic_control_btn_position" need v-model="currentStting.controlBtnPosition" :value="item.id" :label="item.name")
-teleport(to="#view")
-  user-api-modal(v-model="isShowUserApiModal")
+user-api-modal(v-model="isShowUserApiModal")
 </template>

 <script>
--- a/src/renderer/views/setting/components/UserApiModal.vue
+++ b/src/renderer/views/setting/components/UserApiModal.vue
@ -1,5 +1,5 @@
 <template lang="pug">
-material-modal(:show="modelValue" bg-close @close="handleClose")
+material-modal(:show="modelValue" bg-close @close="handleClose" teleport="#view")
  main(:class="$style.main")
    h2 {{$t('user_api__title')}}
    ul.scroll(v-if="apiList.length" :class="$style.content")