修复账号删除确认弹窗

frontend/src/components/account/AccountTable.vue

@@ -36,6 +36,8 @@ const productFilterMap = ref<Record<string, string>>({})
 const qrImage = ref('')
 const recordsModal = ref<{ accountName: string; loading: boolean; error: string; records: any[] } | null>(null)
 const exchangeLookup = ref<{ productId: string; productName: string; loading: boolean; results: Record<string, any> } | null>(null)
+const deleteTargetAccount = ref<string | null>(null)
+const deletingAccount = ref(false)
 
 watch(xiaodianQRCode, async (value) => {
   qrImage.value = ''
@@ -56,6 +58,25 @@ const handleBind = async () => {
   await bindXiaodianRole()
 }
 
+const requestDeleteAccount = (accountName: string) => {
+  deleteTargetAccount.value = accountName
+}
+
+const closeDeleteAccount = () => {
+  if (!deletingAccount.value) deleteTargetAccount.value = null
+}
+
+const confirmDeleteAccount = async () => {
+  const accountName = deleteTargetAccount.value
+  if (!accountName || deletingAccount.value) return
+  deletingAccount.value = true
+  try {
+    if (await deleteAccount(accountName)) deleteTargetAccount.value = null
+  } finally {
+    deletingAccount.value = false
+  }
+}
+
 const allSelected = computed(() =>
   accounts.value.length > 0 && selectedIndices.value.size === accounts.value.length
 )
@@ -385,7 +406,7 @@ const closeExchangeRecords = () => {
                 <button
                   class="btn btn-compact btn-account-delete"
                   title="删除账号及其 CK"
-                  @click.stop="deleteAccount(account.name)"
+                  @click.stop="requestDeleteAccount(account.name)"
                 >
                   删除账号
                 </button>
@@ -431,6 +452,23 @@ const closeExchangeRecords = () => {
     </section>
   </div>
 
+  <div v-if="deleteTargetAccount" class="qr-backdrop" @click.self="closeDeleteAccount">
+    <section class="qr-modal delete-account-modal" role="dialog" aria-modal="true" aria-label="确认删除账号">
+      <div class="qr-modal-head">
+        <div class="panel-title">删除账号</div>
+        <button class="btn btn-ghost icon-btn" title="关闭" aria-label="关闭" :disabled="deletingAccount" @click="closeDeleteAccount">×</button>
+      </div>
+      <div class="qr-modal-body">
+        <div class="delete-account-name">{{ deleteTargetAccount }}</div>
+        <p class="delete-account-message">将删除该账号及其 CK，此操作无法撤销。</p>
+      </div>
+      <div class="qr-modal-foot">
+        <button class="btn" :disabled="deletingAccount" @click="closeDeleteAccount">取消</button>
+        <button class="btn btn-danger" :disabled="deletingAccount" @click="confirmDeleteAccount">{{ deletingAccount ? '删除中...' : '删除账号' }}</button>
+      </div>
+    </section>
+  </div>
+
   <div v-if="xiaodianQRCode" class="qr-backdrop" @click.self="closeXiaodianQRCode">
     <section class="qr-modal" role="dialog" aria-modal="true" aria-label="和平小店绑定二维码">
       <div class="qr-modal-head">
@@ -769,6 +807,10 @@ tbody tr:hover {
   text-align: center;
 }
 
+.delete-account-modal { width: min(360px, 100%); }
+.delete-account-name { color: var(--text-strong); font-weight: 600; word-break: break-all; }
+.delete-account-message { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
+
 .qr-image {
   display: block;
   width: 240px;

frontend/src/composables/useAccounts.ts

@@ -79,7 +79,6 @@ export function useAccounts() {
 
   const deleteAccount = async (accountName: string) => {
     if (!accountName) return false
-    if (!window.confirm(`确定删除账号「${accountName}」及其 CK 吗？`)) return false
     try {
       const result = await DeleteAccounts([accountName])
       if (!result.success) {