新增删除列表前的确认弹窗

publish/changeLog.md

@@ -2,6 +2,7 @@
 
 - 新增歌词简体中文转繁体中文，当软件语言被设置为繁体中文后，播放歌曲的歌词也将自动转成繁体中文显示
 - 为方便分享歌曲列表，新增单个列表导入/导出功能，可在右击“我的列表”里的列表名后弹出的菜单中使用
+- 为防止误删列表，新增删除列表前的确认弹窗
 
 ### 修复
 

src/renderer/lang/en-us/view/list.json

@@ -24,6 +24,8 @@
   "lists_new_list_btn": "Create list",
   "lists_new_list_input": "New list...",
   "lists_remove": "Remove",
+  "lists_remove_tip": "Do you really want to remove {name}?",
+  "lists_remove_tip_button": "Yes, that's right",
   "lists_rename": "Rename",
   "lists_sync": "Update",
   "loding_list": "Loading...",

src/renderer/lang/zh-cn/view/list.json

@@ -24,6 +24,8 @@
   "lists_new_list_btn": "新建列表",
   "lists_new_list_input": "新列表...",
   "lists_remove": "删除",
+  "lists_remove_tip": "你真的想要移除 {name} 吗？",
+  "lists_remove_tip_button": "是的 没错",
   "lists_rename": "重命名",
   "lists_sync": "更新",
   "loding_list": "加载中...",

src/renderer/lang/zh-tw/view/list.json

@@ -24,6 +24,8 @@
   "lists_new_list_btn": "新建列表",
   "lists_new_list_input": "新列表...",
   "lists_remove": "刪除",
+  "lists_remove_tip": "你真的想要移除 {name} 嗎？",
+  "lists_remove_tip_button": "是的 沒錯",
   "lists_rename": "重命名",
   "lists_sync": "更新",
   "loding_list": "加載中...",

src/renderer/plugins/Dialog/Dialog.vue

@@ -55,10 +55,11 @@ export default {
 
 .main {
   flex: auto;
-  min-height: 50px;
+  min-height: 40px;
   padding: 15px;
   font-size: 14px;
   max-width: 320px;
+  min-width: 220px;
   line-height: 1.5;
 }
 

src/renderer/plugins/Dialog/index.js

@@ -41,7 +41,11 @@ const dialog = {
         }
       })
     }
-    dialog.confirm = options => dialog({ ...options, showCancel: true })
+    dialog.confirm = options => dialog(
+      typeof options == 'string'
+        ? { message: options, showCancel: true }
+        : { ...options, showCancel: true },
+    )
 
     Vue.prototype.$dialog = dialog
   },

src/renderer/views/List.vue

@@ -818,7 +818,13 @@ export default {
           this.movedownUserList({ id: this.userList[index].id })
           break
         case 'remove':
-          this.removeUserList({ id: this.userList[index].id })
+          this.$dialog.confirm({
+            message: this.$t('view.list.lists_remove_tip', { name: this.userList[index].name }),
+            confirmButtonText: this.$t('view.list.lists_remove_tip_button'),
+          }).then(isRemove => {
+            if (!isRemove) return
+            this.removeUserList({ id: this.userList[index].id })
+          })
           break
       }
     },