1

electron-vue-template/src/renderer/components/common/AccountManager.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { zebraApi, type BanmaAccount } from '../../api/zebra'
+import { ElMessageBox, ElMessage } from 'element-plus'
 
 type PlatformKey = 'zebra' | 'shopee' | 'rakuten' | 'amazon'
 
@@ -36,10 +37,12 @@ function formatDate(a: any) {
 
 async function onDelete(a: any) {
   const id = a?.id
-  const ok = confirm(`确定删除账号 “${a?.name || a?.username || id}” 吗？`)
-  if (!ok) return
-    await zebraApi.removeAccount(id)
-    await load()
+  try {
+    await ElMessageBox.confirm(`确定删除账号 “${a?.name || a?.username || id}” 吗？`, '提示', { type: 'warning' })
+  } catch { return }
+  await zebraApi.removeAccount(id)
+  ElMessage({ message: '删除成功', type: 'success' })
+  await load()
 }
 </script>
 
@@ -117,13 +120,12 @@ export default defineComponent({ name: 'AccountManager' })
 .dot { width:6px; height:6px; border-radius:50%; justify-self: center; }
 .dot.on { background:#52c41a; }
 .dot.off { background:#ff4d4f; }
-.user-info { display: flex; align-items: center; gap: 8px; }
+.user-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .avatar { width:22px; height:22px; border-radius:50%; object-fit: cover; }
-.name { font-weight:500; font-size: 13px; color:#303133; }
+.name { font-weight:500; font-size: 13px; color:#303133; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .date { color:#999; font-size:11px; text-align: center; }
 .footer { display:flex; justify-content:center; padding-top: 10px; }
 .btn { width: 180px; height: 32px; font-size: 13px; }
-.el-button--danger.is-link { font-size: 11px; padding: 0; height: auto; }
 </style>