fix: 批量删除apikey

Yi.Ai.Vue3/src/components/userPersonalCenter/components/APIKeyManagement.vue

@@ -49,6 +49,17 @@ const router = useRouter();
 // TokenFormDialog 组件引用
 const tokenFormDialogRef = ref<InstanceType<typeof TokenFormDialog> | null>(null);
 
+// 批量选择相关
+const isBatchDeleteMode = ref(false); // 批量删除模式
+const selectedTokenIds = ref<string[]>([]);
+const selectAll = ref(false);
+
+// 批量删除预览对话框
+const showDeletePreviewDialog = ref(false);
+const deleteItems = ref<TokenItem[]>([]);
+const deleteStatusList = ref<Array<{ id: string; name: string; status: 'pending' | 'deleting' | 'success' | 'failed'; error?: string }>>([]);
+const isDeleting = ref(false);
+
 // 移动端检测
 const isMobile = ref(false);
 
@@ -261,6 +272,108 @@ async function handleDelete(row: TokenItem) {
   }
 }
 
+// 批量删除Token
+async function handleBatchDelete() {
+  if (isBatchDeleteMode.value) {
+    // 已选择项目，显示预览对话框
+    if (selectedTokenIds.value.length === 0) {
+      ElMessage.warning('请先选择要删除的API密钥');
+      return;
+    }
+
+    // 获取选中的 token
+    deleteItems.value = tokenList.value.filter(t => selectedTokenIds.value.includes(t.id));
+    // 初始化删除状态
+    deleteStatusList.value = deleteItems.value.map(item => ({
+      id: item.id,
+      name: item.name,
+      status: 'pending' as const,
+    }));
+    showDeletePreviewDialog.value = true;
+  } else {
+    // 进入批量删除模式
+    isBatchDeleteMode.value = true;
+  }
+}
+
+// 确认批量删除
+async function confirmBatchDelete() {
+  isDeleting.value = true;
+
+  // 并发删除所有选中的 token
+  const promises = deleteItems.value.map(async (item, index) => {
+    try {
+      deleteStatusList.value[index].status = 'deleting';
+      await deleteToken(item.id);
+      deleteStatusList.value[index].status = 'success';
+    } catch (error: any) {
+      console.error(`删除 "${item.name}" 失败:`, error);
+      deleteStatusList.value[index].status = 'failed';
+      deleteStatusList.value[index].error = error?.message || '删除失败';
+      throw error;
+    }
+  });
+
+  await Promise.allSettled(promises);
+
+  // 删除完成后刷新列表
+  await fetchTokenList();
+
+  // 关闭对话框并重置状态
+  showDeletePreviewDialog.value = false;
+  isDeleting.value = false;
+  isBatchDeleteMode.value = false;
+  selectedTokenIds.value = [];
+  selectAll.value = false;
+  deleteItems.value = [];
+  deleteStatusList.value = [];
+}
+
+// 取消批量删除预览
+function cancelBatchDeletePreview() {
+  if (isDeleting.value) return;
+  showDeletePreviewDialog.value = false;
+  deleteItems.value = [];
+  deleteStatusList.value = [];
+}
+
+// 退出批量删除模式
+function exitBatchDeleteMode() {
+  isBatchDeleteMode.value = false;
+  selectedTokenIds.value = [];
+  selectAll.value = false;
+}
+
+// 处理复选框选择变化
+function handleSelectionChange() {
+  // 如果所有项目都被选中，则全选按钮也被选中
+  selectAll.value = tokenList.value.length > 0
+    && selectedTokenIds.value.length === tokenList.value.length;
+}
+
+// 处理全选/取消全选
+function handleSelectAllChange() {
+  if (selectAll.value) {
+    selectedTokenIds.value = tokenList.value.map(t => t.id);
+  } else {
+    selectedTokenIds.value = [];
+  }
+}
+
+// 处理单个项目的选择变化
+function handleItemSelectChange(id: string, checked: boolean) {
+  if (checked) {
+    if (!selectedTokenIds.value.includes(id)) {
+      selectedTokenIds.value.push(id);
+    }
+  } else {
+    selectedTokenIds.value = selectedTokenIds.value.filter(itemId => itemId !== id);
+  }
+  // 更新全选状态
+  selectAll.value = tokenList.value.length > 0
+    && selectedTokenIds.value.length === tokenList.value.length;
+}
+
 // 启用/禁用Token（带防抖）
 async function handleToggle(row: TokenItem) {
   if (operatingTokenId.value === row.id)
@@ -383,6 +496,27 @@ function isOperating(tokenId: string) {
   return operatingTokenId.value === tokenId;
 }
 
+// 删除进度统计
+const deleteProgress = computed(() => {
+  const total = deleteStatusList.value.length;
+  const success = deleteStatusList.value.filter(s => s.status === 'success').length;
+  const failed = deleteStatusList.value.filter(s => s.status === 'failed').length;
+  const pending = deleteStatusList.value.filter(s => s.status === 'pending' || s.status === 'deleting').length;
+  return { total, success, failed, pending };
+});
+
+// 删除预览对话框标题
+const deletePreviewDialogTitle = computed(() => {
+  if (isDeleting.value) {
+    const { success, failed, pending } = deleteProgress.value;
+    if (pending > 0) {
+      return `删除中... (${success}/${deleteProgress.value.total})`;
+    }
+    return `删除完成`;
+  }
+  return '批量删除预览';
+});
+
 onMounted(async () => {
   checkMobile();
   window.addEventListener('resize', checkMobile);
@@ -424,6 +558,36 @@ onUnmounted(() => {
         <el-button type="primary" :icon="Plus" size="default" @click="showCreateDialog">
           新增 API密钥
         </el-button>
+        <!-- 非批量删除模式 -->
+        <el-button
+          v-if="!isBatchDeleteMode"
+          type="danger"
+          :icon="Delete"
+          size="default"
+          @click="handleBatchDelete"
+        >
+          批量删除
+        </el-button>
+        <!-- 批量删除模式 -->
+        <template v-else>
+          <el-button
+            v-if="selectedTokenIds.length > 0"
+            type="danger"
+            :icon="Delete"
+            size="default"
+            :disabled="loading"
+            @click="handleBatchDelete"
+          >
+            确认删除 ({{ selectedTokenIds.length }})
+          </el-button>
+          <el-button
+            :icon="Close"
+            size="default"
+            @click="exitBatchDeleteMode"
+          >
+            取消
+          </el-button>
+        </template>
       </div>
       <div class="toolbar-right">
         <el-button :icon="Refresh" size="default" @click="fetchTokenList">
@@ -445,6 +609,29 @@ onUnmounted(() => {
         :header-cell-style="{ background: '#fafafa', color: '#262626', fontWeight: '600' }"
         @sort-change="handleSortChange"
       >
+        <!-- 复选框列（仅批量删除模式显示） -->
+        <el-table-column
+          v-if="isBatchDeleteMode"
+          type="default"
+          width="50"
+          align="center"
+          header-align="center"
+        >
+          <template #header>
+            <el-checkbox
+              v-model="selectAll"
+              :indeterminate="selectedTokenIds.length > 0 && selectedTokenIds.length < tokenList.length"
+              @change="handleSelectAllChange"
+            />
+          </template>
+          <template #default="{ row }">
+            <el-checkbox
+              :model-value="selectedTokenIds.includes(row.id)"
+              @change="(checked: boolean) => handleItemSelectChange(row.id, checked)"
+            />
+          </template>
+        </el-table-column>
+
         <el-table-column
           prop="name"
           label="API密钥 名称"
@@ -623,16 +810,6 @@ onUnmounted(() => {
               >
                 {{ row.isDisabled ? '启用' : '禁用' }}
               </el-button>
-              <el-button
-                style="margin-left: 0px"
-                size="small"
-                type="danger"
-                :icon="Delete"
-                :loading="isOperating(row.id)"
-                @click="handleDelete(row)"
-              >
-                删除
-              </el-button>
             </div>
           </template>
         </el-table-column>
@@ -641,9 +818,36 @@ onUnmounted(() => {
 
       <!-- 移动端卡片列表 -->
       <div v-else class="mobile-token-list">
+        <!-- 移动端批量操作栏 -->
+        <div v-if="isBatchDeleteMode && selectedTokenIds.length > 0" class="mobile-batch-bar">
+          <span class="mobile-batch-text">已选 {{ selectedTokenIds.length }} 项</span>
+          <el-button
+            type="danger"
+            size="small"
+            :icon="Delete"
+            :disabled="loading"
+            @click="handleBatchDelete"
+          >
+            确认删除
+          </el-button>
+          <el-button
+            size="small"
+            :icon="Close"
+            @click="exitBatchDeleteMode"
+          >
+            取消
+          </el-button>
+        </div>
+
         <div v-for="token in tokenList" :key="token.id" class="mobile-token-card">
           <div class="mobile-card-header">
             <div class="mobile-card-title">
+              <el-checkbox
+                v-if="isBatchDeleteMode"
+                :model-value="selectedTokenIds.includes(token.id)"
+                @change="(checked: boolean) => handleItemSelectChange(token.id, checked)"
+                class="mobile-card-checkbox"
+              />
               <el-icon class="title-icon"><PriceTag /></el-icon>
               <span>{{ token.name }}</span>
             </div>
@@ -720,15 +924,6 @@ onUnmounted(() => {
             >
               {{ token.isDisabled ? '启用' : '禁用' }}
             </el-button>
-            <el-button
-              size="small"
-              type="danger"
-              :icon="Delete"
-              :loading="isOperating(token.id)"
-              @click="handleDelete(token)"
-            >
-              删除
-            </el-button>
           </div>
         </div>
       </div>
@@ -795,6 +990,91 @@ onUnmounted(() => {
     @confirm="handleFormSubmit"
     @batch-create="handleBatchCreate"
   />
+
+  <!-- 批量删除预览对话框 -->
+  <el-dialog
+    v-model="showDeletePreviewDialog"
+    :title="deletePreviewDialogTitle"
+    :width="isMobile ? '95%' : '600px'"
+    :fullscreen="isMobile"
+    :close-on-click-modal="false"
+    :show-close="!isDeleting"
+    @close="cancelBatchDeletePreview"
+  >
+    <div class="delete-preview-container">
+      <!-- 删除进度提示 -->
+      <div v-if="isDeleting" class="delete-progress-header">
+        <div class="progress-summary">
+          <el-icon v-if="deleteProgress.pending > 0" class="is-loading"><i-ep-loading /></el-icon>
+          <el-icon v-else-if="deleteProgress.failed > 0"><i-ep-circle-close /></el-icon>
+          <el-icon v-else><i-ep-circle-check /></el-icon>
+          <span>
+            <template v-if="deleteProgress.pending > 0">正在删除中...</template>
+            <template v-else-if="deleteProgress.failed > 0">部分删除失败</template>
+            <template v-else>全部删除成功</template>
+          </span>
+        </div>
+        <el-progress
+          :percentage="deleteProgress.total > 0 ? Math.round((deleteProgress.success + deleteProgress.failed) / deleteProgress.total * 100) : 0"
+          :status="deleteProgress.pending > 0 ? undefined : (deleteProgress.failed > 0 ? 'exception' : 'success')"
+          :stroke-width="8"
+        />
+      </div>
+
+      <!-- 删除提示信息 -->
+      <div v-if="!isDeleting" class="delete-header">
+        <el-icon><i-ep-warning /></el-icon>
+        <span>即将删除 {{ deleteItems.length }} 个 API 密钥，删除后将无法恢复，请确认以下信息：</span>
+      </div>
+
+      <!-- 密钥列表 -->
+      <div class="delete-names-list">
+        <div
+          v-for="(item, index) in deleteStatusList"
+          :key="item.id"
+          class="delete-name-item"
+          :class="`status-${item.status}`"
+        >
+          <span class="delete-name-index">{{ index + 1 }}</span>
+          <span class="delete-name-text">{{ item.name }}</span>
+          <span class="delete-name-status">
+            <el-icon v-if="item.status === 'deleting'" class="is-loading"><i-ep-loading /></el-icon>
+            <el-icon v-else-if="item.status === 'success'"><i-ep-circle-check /></el-icon>
+            <el-icon v-else-if="item.status === 'failed'"><i-ep-circle-close /></el-icon>
+            <el-icon v-else><i-ep-warning /></el-icon>
+            <span class="delete-name-status-text">
+              <template v-if="item.status === 'pending'">待删除</template>
+              <template v-else-if="item.status === 'deleting'">删除中</template>
+              <template v-else-if="item.status === 'success'">已删除</template>
+              <template v-else-if="item.status === 'failed'">失败</template>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :disabled="isDeleting" @click="cancelBatchDeletePreview">
+          取消
+        </el-button>
+        <el-button
+          v-if="!isDeleting"
+          type="danger"
+          @click="confirmBatchDelete"
+        >
+          确认删除
+        </el-button>
+        <el-button
+          v-else
+          type="success"
+          @click="cancelBatchDeletePreview"
+        >
+          完成
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <style scoped lang="scss">
@@ -1326,6 +1606,22 @@ onUnmounted(() => {
     gap: 12px;
   }
 
+  .mobile-batch-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: #fff7e6;
+    border: 1px solid #ffd591;
+    border-radius: 8px;
+  }
+
+  .mobile-batch-text {
+    font-size: 14px;
+    font-weight: 500;
+    color: #fa8c16;
+  }
+
   .mobile-token-card {
     background: #fff;
     border: 1px solid #e8e8e8;
@@ -1346,11 +1642,15 @@ onUnmounted(() => {
   .mobile-card-title {
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
     font-size: 15px;
     font-weight: 600;
     color: #333;
 
+    .mobile-card-checkbox {
+      margin-left: 0;
+    }
+
     .title-icon {
       color: #409eff;
     }
@@ -1428,4 +1728,144 @@ onUnmounted(() => {
     }
   }
 }
+
+// 批量删除预览对话框样式
+.delete-preview-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.delete-progress-header {
+  padding: 16px;
+  background: #fff1f0;
+  border: 1px solid #ffccc7;
+  border-radius: 8px;
+}
+
+.delete-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 16px;
+  background: #fff7e6;
+  border: 1px solid #ffd591;
+  border-radius: 8px;
+  color: #fa8c16;
+  font-size: 14px;
+  font-weight: 500;
+
+  .el-icon {
+    font-size: 20px;
+    flex-shrink: 0;
+  }
+}
+
+.delete-names-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.delete-name-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  transition: all 0.2s;
+
+  &.status-pending {
+    border-color: #d9d9d9;
+    background: #fafafa;
+
+    .delete-name-status .el-icon {
+      color: #fa8c16;
+    }
+  }
+
+  &.status-deleting {
+    border-color: #1890ff;
+    background: #e6f7ff;
+
+    .delete-name-status .el-icon {
+      color: #1890ff;
+    }
+  }
+
+  &.status-success {
+    border-color: #52c41a;
+    background: #f6ffed;
+
+    .delete-name-status .el-icon {
+      color: #52c41a;
+    }
+  }
+
+  &.status-failed {
+    border-color: #ff4d4f;
+    background: #fff1f0;
+
+    .delete-name-status .el-icon {
+      color: #ff4d4f;
+    }
+  }
+}
+
+.delete-name-index {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: #ff4d4f;
+  color: #fff;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.delete-name-text {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+  color: #262626;
+}
+
+.delete-name-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 16px;
+
+  .el-icon {
+    color: #8c8c8c;
+  }
+}
+
+.delete-name-status-text {
+  font-size: 13px;
+  font-weight: 500;
+
+  .status-pending & {
+    color: #fa8c16;
+  }
+
+  .status-deleting & {
+    color: #1890ff;
+  }
+
+  .status-success & {
+    color: #52c41a;
+  }
+
+  .status-failed & {
+    color: #ff4d4f;
+  }
+}
 </style>