feat(dataset): 支持数据任务批量删除

frontend/src/views/dataset/DatasetListView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import DataTablePage from '@/components/DataTablePage.vue'
 import { getDatasetList, deleteDataset, downloadDatasetUrl } from '@/api/modules/dataset'
 import { DATASET_TYPE_MAP, STORAGE_MAP } from '@/constants'
@@ -13,6 +13,14 @@ const route = useRoute()
 const loading = ref(false)
 const dataList = ref<DatasetItem[]>([])
 const activeTab = ref<DatasetSource>(route.query.tab === 'task' ? 'task' : 'upload')
+const batchMode = ref(false)
+const selectedCount = ref(0)
+const batchDeleting = ref(false)
+const deletingId = ref<string | number | null>(null)
+const tablePageRef = ref<{
+  handleBatchDelete: () => Promise<boolean>
+  clearSelection: () => void
+} | null>(null)
 
 const filteredDataList = computed(() => {
   if (activeTab.value === 'task') {
@@ -33,11 +41,62 @@ async function loadData() {
   }
 }
 
-async function handleDelete(row: any) {
+async function deleteDatasetItem(row: DatasetItem) {
   await deleteDataset(row.id)
-  dataList.value = dataList.value.filter((item) => item.id !== row.id)
-  await loadData()
-  ElMessage.success('删除成功')
+}
+
+async function handleDelete(row: DatasetItem) {
+  try {
+    await ElMessageBox.confirm(
+      `确定删除数据集“${row.name}”吗？删除后无法恢复。`,
+      '确认删除',
+      {
+        type: 'warning',
+        confirmButtonText: '删除',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'el-button--danger',
+      },
+    )
+  } catch {
+    return
+  }
+
+  deletingId.value = row.id
+  try {
+    await deleteDatasetItem(row)
+    await loadData()
+    ElMessage.success('数据集已删除')
+  } catch {
+    // 统一请求层已展示后端返回的失败原因。
+  } finally {
+    deletingId.value = null
+  }
+}
+
+function enterBatchMode() {
+  batchMode.value = true
+  selectedCount.value = 0
+}
+
+function exitBatchMode() {
+  batchMode.value = false
+  selectedCount.value = 0
+  tablePageRef.value?.clearSelection()
+}
+
+function handleSelectionChange(rows: DatasetItem[]) {
+  selectedCount.value = rows.length
+}
+
+async function handleBatchDelete() {
+  if (!selectedCount.value || batchDeleting.value) return
+  batchDeleting.value = true
+  try {
+    const completed = await tablePageRef.value?.handleBatchDelete()
+    if (completed) exitBatchMode()
+  } finally {
+    batchDeleting.value = false
+  }
 }
 
 function handlePreview(row: any) {
@@ -48,21 +107,26 @@ function handleDownload(row: any) {
   window.open(downloadDatasetUrl(row.id), '_blank')
 }
 
+watch(activeTab, exitBatchMode)
 onMounted(loadData)
 </script>
 
 <template>
   <DataTablePage
+    ref="tablePageRef"
     title="数据集管理"
     :data="filteredDataList"
     :loading="loading"
     searchable
-    :search-fields="['name', 'description']"
+    :search-fields="['task_id', 'name', 'description']"
+    :multi-select="activeTab === 'task' && batchMode"
+    :show-batch-bar="false"
     :create-text="activeTab === 'upload' ? '上传数据集' : ''"
     create-to="/dataset/create"
-    :delete-fn="handleDelete"
+    :delete-fn="deleteDatasetItem"
     row-key="id"
     @refresh="loadData"
+    @selection-change="handleSelectionChange"
   >
     <template #title>
       <div class="capsule-tabs">
@@ -83,6 +147,25 @@ onMounted(loadData)
       </div>
     </template>
 
+    <template #toolbar-extra>
+      <template v-if="activeTab === 'task'">
+        <el-button v-if="!batchMode" type="danger" plain @click="enterBatchMode">
+          <i class="fa fa-trash-o" style="margin-right: 4px" />批量删除
+        </el-button>
+        <template v-else>
+          <el-button :disabled="batchDeleting" @click="exitBatchMode">取消</el-button>
+          <el-button
+            v-if="selectedCount > 0"
+            type="danger"
+            :loading="batchDeleting"
+            @click="handleBatchDelete"
+          >
+            <i class="fa fa-trash-o" style="margin-right: 4px" />删除（{{ selectedCount }}）
+          </el-button>
+        </template>
+      </template>
+    </template>
+
     <template #columns>
       <el-table-column v-if="activeTab === 'task'" label="任务ID" prop="task_id" align="center" width="100" />
       <el-table-column label="数据集名称" prop="name" align="center" />
@@ -124,7 +207,14 @@ onMounted(loadData)
         <el-button type="success" link size="small" @click="handleDownload(row)">
           <i class="fa fa-download" style="margin-right: 4px" />下载
         </el-button>
-        <el-button type="danger" link size="small" @click="handleDelete(row)">
+        <el-button
+          type="danger"
+          link
+          size="small"
+          :loading="deletingId === row.id"
+          :disabled="batchDeleting || batchMode"
+          @click="handleDelete(row as DatasetItem)"
+        >
           <i class="fa fa-trash-o" style="margin-right: 4px" />删除
         </el-button>
       </div>