From 8b867709b28ae67c0798e8f5c81f9e02ccc1f8bb Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sun, 9 Aug 2026 15:20:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=B4=A6=E5=8F=B7=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E7=A1=AE=E8=AE=A4=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/account/AccountTable.vue   | 44 ++++++++++++++++++-
 frontend/src/composables/useAccounts.ts       |  1 -
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/account/AccountTable.vue b/frontend/src/components/account/AccountTable.vue
index 79b8a18..9a082ca 100644
--- a/frontend/src/components/account/AccountTable.vue
+++ b/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;
diff --git a/frontend/src/composables/useAccounts.ts b/frontend/src/composables/useAccounts.ts
index 679e4ac..c889bdc 100644
--- a/frontend/src/composables/useAccounts.ts
+++ b/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) {