crawler-plugin/frontend-vue/src/shared/components/tasks/HistoryTaskLayer.vue

<template>
  <div class="history-task-layer">
    <button type="button" class="history-btn" @click="open = true">
      历史任务<template v-if="count > 0">（{{ count }}）</template>
    </button>

    <!-- destroy-on-close：抽屉关闭即销毁内部 DOM。默认按 v-show 保留，历史条目多时
         （每卡 8+ 节点）关闭后仍留在文档里参与后续 diff；条目数上限属产品语义，另行决策。 -->
    <el-drawer v-model="open" :title="historyTitle" size="640px" class="task-history-drawer" destroy-on-close>
      <div class="history-body">
        <!-- 批量删除工具条（传入 onBatchDelete 时显示） -->
        <div v-if="onBatchDelete" class="history-toolbar">
          <label class="select-all">
            <input v-model="allSelected" type="checkbox" title="全选/取消全选" />
            <span>全选</span>
          </label>
          <span class="selected-count" v-if="selectedKeys.size > 0">已选 {{ selectedKeys.size }} 项</span>
          <button type="button" class="btn-delete" :disabled="!selectedKeys.size || batchDeleting"
            @click="confirmBatchDelete">
            {{ batchDeleting ? '删除中...' : `批量删除${selectedKeys.size ? `（${selectedKeys.size}）` : ''}` }}
          </button>
        </div>

        <div v-if="!items.length" class="empty-tasks">{{ emptyText }}</div>
        <ul v-else class="history-list">
          <li v-for="item in items" :key="item.key" class="history-item-row" :class="{ 'is-selected': isSelected(item.key) }">
            <label v-if="onBatchDelete" class="row-check" @click.stop>
              <input v-model="selectedSet" type="checkbox" :value="item.key" :disabled="batchDeleting" />
            </label>
            <div class="history-item-card">
              <TaskItemCard :item="item">
                <template #extra="scope">
                  <slot name="history-item-extra" v-bind="scope" />
                </template>
                <template #actions="scope">
                  <slot name="history-item-actions" v-bind="scope" />
                </template>
              </TaskItemCard>
            </div>
          </li>
        </ul>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElMessageBox } from 'element-plus'

import TaskItemCard from './TaskItemCard.vue'
import type { TaskItemView } from './types'

const props = withDefaults(defineProps<{
  /** 历史任务数量（按钮角标） */
  count: number
  /** 弹层标题 */
  historyTitle?: string
  /** 历史任务列表 */
  items: TaskItemView[]
  /** 空列表提示 */
  emptyText?: string
  /** 批量删除回调（传入后历史列表支持勾选批量删除；不传则不显示复选框） */
  onBatchDelete?: (items: TaskItemView[]) => Promise<void> | void
}>(), {
  historyTitle: '历史任务',
  emptyText: '暂无历史任务',
})

const open = ref(false)
const batchDeleting = ref(false)
/** 勾选集合：以 TaskItemView.key 为维度 */
const selectedSet = ref<Set<string>>(new Set())

const selectedKeys = computed(() => selectedSet.value)
const allSelected = computed({
  get: () => Boolean(props.items.length) && selectedSet.value.size === props.items.length,
  set: (checked: boolean) => {
    const next = new Set<string>()
    if (checked) {
      props.items.forEach((item) => next.add(item.key))
    }
    selectedSet.value = next
  },
})

watch(open, (value) => {
  if (!value) {
    selectedSet.value = new Set()
  }
})

function isSelected(key: string) {
  return selectedSet.value.has(key)
}

async function confirmBatchDelete() {
  if (!props.onBatchDelete || !selectedSet.value.size || batchDeleting.value) return
  const target = props.items.filter((item) => selectedSet.value.has(item.key))
  try {
    await ElMessageBox.confirm(
      `确定批量删除选中的 ${target.length} 条历史记录吗？删除后不可恢复。`,
      '批量删除历史记录',
      { confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' },
    )
  } catch {
    return
  }
  batchDeleting.value = true
  try {
    await props.onBatchDelete(target)
    selectedSet.value = new Set()
  } finally {
    batchDeleting.value = false
  }
}
</script>

<style scoped>
.history-task-layer {
  display: inline-flex;
}

.history-btn {
  padding: 5px 12px;
  border: 1px solid #3e4a62;
  border-radius: 6px;
  background: #242424;
  color: #c8d2e2;
  font-size: 12px;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.history-btn:hover {
  background: #2b3447;
  color: #f5f8fc;
}

.history-body {
  padding: 4px 2px 12px;
}

.history-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 4px 12px;
  border-bottom: 1px solid #2e3a52;
  margin-bottom: 12px;
}

.select-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c8d2e2;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.selected-count {
  color: #a0acbe;
  font-size: 12px;
}

.btn-delete {
  margin-left: auto;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: rgba(231, 76, 60, .18);
  color: #ff8f8f;
  font-size: 12px;
  transition: background .2s;
}

.btn-delete:hover:not(:disabled) {
  background: rgba(231, 76, 60, .32);
}

.btn-delete:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.empty-tasks {
  color: #5e6878;
  font-size: 13px;
  padding: 18px;
  text-align: center;
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.history-item-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.row-check {
  flex: 0 0 auto;
  padding-top: 14px;
  cursor: pointer;
}

.row-check input {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.history-item-card {
  flex: 1;
  min-width: 0;
}

.history-item-row.is-selected .history-item-card {
  border-radius: 8px;
  outline: 2px solid rgba(52, 152, 219, .35);
  outline-offset: -1px;
}
</style>

<style>
/* el-drawer 深色主题（非 scoped：Element Plus 组件挂在 body 下） */
.task-history-drawer .el-drawer__header {
  margin-bottom: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #2e3a52;
  color: #f5f8fc;
  font-size: 15px;
  font-weight: 600;
}

.task-history-drawer .el-drawer__close-btn {
  color: #a0acbe;
}

.task-history-drawer .el-drawer__body {
  background: #151a25;
  padding: 12px 16px;
}

.task-history-drawer .el-drawer {
  background: #151a25;
}
</style>