diff --git a/publish/changeLog.md b/publish/changeLog.md
index 9495d007..7b7185d4 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -3,6 +3,7 @@
 - 播放详情页新增音量控制条
 - 播放详情页新增桌面歌词切换按钮
 - 新增将我的列表保存为TXT、CSV格式，可以去设置-备份与恢复中使用（注意：此类格式的备份目前不支持恢复到LX Music中）
+- 新增根据歌曲名、歌手名等字段对列表自动排序的功能，可以在我的列表右击列表名弹出的菜单中使用
 
 ### 优化
 
diff --git a/src/lang/en-us.json b/src/lang/en-us.json
index 5c14e0ad..cce9ea10 100644
--- 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:",
diff --git a/src/lang/zh-cn.json b/src/lang/zh-cn.json
index df5f99bd..50013594 100644
--- 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} 的位置调整到：",
diff --git a/src/lang/zh-tw.json b/src/lang/zh-tw.json
index 99fa5b04..b8febb69 100644
--- 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} 的位置調整到：",
diff --git a/src/renderer/assets/styles/index.less b/src/renderer/assets/styles/index.less
index 925618ac..c7eb2e4c 100644
--- 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;
diff --git a/src/renderer/components/common/DownloadModal.vue b/src/renderer/components/common/DownloadModal.vue
index 5647f5ae..b74b222b 100644
--- 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() {
diff --git a/src/renderer/components/common/DownloadMultipleModal.vue b/src/renderer/components/common/DownloadMultipleModal.vue
index 0053c2ec..7020b918 100644
--- 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: {
diff --git a/src/renderer/components/common/ListAddModal.vue b/src/renderer/components/common/ListAddModal.vue
index ca314109..08f23fed 100644
--- 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) {
diff --git a/src/renderer/components/common/ListAddMultipleModal.vue b/src/renderer/components/common/ListAddMultipleModal.vue
index 50c07b7f..77a28731 100644
--- 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) {
diff --git a/src/renderer/components/core/PlayBar/ControlBtns.vue b/src/renderer/components/core/PlayBar/ControlBtns.vue
index 8ca86864..a16cc0db 100644
--- 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>
 
diff --git a/src/renderer/components/core/PlayDetail/components/ControlBtns.vue b/src/renderer/components/core/PlayDetail/components/ControlBtns.vue
index fcc0e080..9712efab 100644
--- 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>
 
diff --git a/src/renderer/components/material/Modal.vue b/src/renderer/components/material/Modal.vue
index af8168eb..7ff8d4eb 100644
--- 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() {
diff --git a/src/renderer/components/material/OnlineList/index.vue b/src/renderer/components/material/OnlineList/index.vue
index 38d54a72..1fd225f6 100644
--- 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>
 
diff --git a/src/renderer/plugins/Dialog/Dialog.vue b/src/renderer/plugins/Dialog/Dialog.vue
index 833047e3..96853de1 100644
--- 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: {
diff --git a/src/renderer/plugins/Dialog/index.js b/src/renderer/plugins/Dialog/index.js
index b100fbe6..f0b78288 100644
--- 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 }
diff --git a/src/renderer/views/Search.vue b/src/renderer/views/Search.vue
index 9f0d649b..4777a4f1 100644
--- 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>
 
diff --git a/src/renderer/views/list/List.vue b/src/renderer/views/list/List.vue
index 452ef3aa..24582ea6 100644
--- 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>
 
diff --git a/src/renderer/views/list/components/DuplicateMusicModal.vue b/src/renderer/views/list/components/DuplicateMusicModal.vue
index 1e8aadd4..f3fb01bd 100644
--- 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;
diff --git a/src/renderer/views/list/components/ListSortModal.vue b/src/renderer/views/list/components/ListSortModal.vue
index ea3b1a52..ae9f2bbc 100644
--- 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}';
+    }
   }
 })
 
diff --git a/src/renderer/views/list/components/MusicList/index.vue b/src/renderer/views/list/components/MusicList/index.vue
index ec5b2278..0e639888 100644
--- 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,
diff --git a/src/renderer/views/list/components/MusicList/useMenu.js b/src/renderer/views/list/components/MusicList/useMenu.js
index 0f4c715f..de2270c1 100644
--- 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,
   }
 }
diff --git a/src/renderer/views/list/components/MusicList/useSort.js b/src/renderer/views/list/components/MusicList/useSort.js
index 4c2ff31e..15d8b25e 100644
--- 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,
diff --git a/src/renderer/views/list/components/MusicSortModal.vue b/src/renderer/views/list/components/MusicSortModal.vue
new file mode 100644
index 00000000..0f90f68e
--- /dev/null
+++ 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>
diff --git a/src/renderer/views/list/components/MyLists.vue b/src/renderer/views/list/components/MyLists.vue
index a9a4a83c..1bc663c5 100644
--- 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
diff --git a/src/renderer/views/list/components/SearchList.vue b/src/renderer/views/list/components/SearchList.vue
index c840afdd..e28b7d71 100644
--- 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: '',
diff --git a/src/renderer/views/setting/Setting.vue b/src/renderer/views/setting/Setting.vue
index 5e5625d3..04f9cca8 100644
--- 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;
-      }
-    }
   }
 }
 
diff --git a/src/renderer/views/setting/components/SettingBasic.vue b/src/renderer/views/setting/components/SettingBasic.vue
index ee64d870..d5724a3f 100644
--- 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>
diff --git a/src/renderer/views/setting/components/UserApiModal.vue b/src/renderer/views/setting/components/UserApiModal.vue
index 5a2a006d..a8862999 100644
--- 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")