YG_FT/frontend/src/views/dataset/DatasetListView.vue

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } 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'
import type { DatasetItem, DatasetSource } from '@/types'

const router = useRouter()

const loading = ref(false)
const dataList = ref<DatasetItem[]>([])
const activeTab = ref<DatasetSource>('upload')

const filteredDataList = computed(() => {
  if (activeTab.value === 'task') {
    return dataList.value.filter((item) => item.source === 'task')
  }

  return dataList.value.filter((item) => item.source !== 'task')
})

async function loadData() {
  loading.value = true
  try {
    dataList.value = (await getDatasetList()) || []
  } catch {
    // ignore
  } finally {
    loading.value = false
  }
}

async function handleDelete(row: any) {
  await deleteDataset(row.id)
  ElMessage.success('删除成功')
}

function handlePreview(row: any) {
  router.push(`/dataset/${row.id}/preview`)
}

function handleDownload(row: any) {
  window.open(downloadDatasetUrl(row.id), '_blank')
}

onMounted(loadData)
</script>

<template>
  <DataTablePage
    title="数据集管理"
    :data="filteredDataList"
    :loading="loading"
    searchable
    :search-fields="['name', 'description']"
    :create-text="activeTab === 'upload' ? '上传数据集' : ''"
    create-to="/dataset/create"
    :delete-fn="handleDelete"
    row-key="id"
    @refresh="loadData"
  >
    <template #title>
      <div class="capsule-tabs">
        <button 
          class="capsule-tab-item" 
          :class="{ active: activeTab === 'upload' }" 
          @click="activeTab = 'upload'"
        >
          上传任务
        </button>
        <button 
          class="capsule-tab-item" 
          :class="{ active: activeTab === 'task' }" 
          @click="activeTab = 'task'"
        >
          数据任务
        </button>
      </div>
    </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" />
      <el-table-column label="数据类型" align="center" width="110">
        <template #default="{ row }">
          <el-tag type="primary" size="small">
            {{ DATASET_TYPE_MAP[String(row.type).toLowerCase()] || row.type || '-' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="存储位置" align="center" width="110">
        <template #default="{ row }">
          <el-tag type="success" size="small">
            {{ STORAGE_MAP[row.storage_type] || row.storage_type || '-' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="大小" align="center" width="100">
        <template #default="{ row }">
          {{ row.size && row.size !== '0 B' && row.size !== '0' ? row.size : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="数据条数" align="center" width="100">
        <template #default="{ row }">{{ row.count || 0 }}</template>
      </el-table-column>
      <el-table-column label="描述" align="center" show-overflow-tooltip>
        <template #default="{ row }">{{ row.description || '-' }}</template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="180">
        <template #default="{ row }">
          {{ row.create_time ? new Date(row.create_time).toLocaleString('zh-CN') : '-' }}
        </template>
      </el-table-column>
    </template>

    <template #actions="{ row }">
      <div class="action-buttons">
        <el-button type="primary" link size="small" @click="handlePreview(row)">
          <i class="fa fa-eye" style="margin-right: 4px" />详情
        </el-button>
        <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)">
          <i class="fa fa-trash-o" style="margin-right: 4px" />删除
        </el-button>
      </div>
    </template>
  </DataTablePage>
</template>

<style scoped lang="scss">
/* 胶囊切换栏样式 */
.capsule-tabs {
  display: flex;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
  gap: 2px;
  border: 1px solid #e2e8f0;
}

.capsule-tab-item {
  border: 0;
  background: transparent;
  padding: 6px 20px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  outline: none;

  &:hover {
    color: #1e293b;
  }

  &.active {
    background: #fff;
    color: #4f46e5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    font-weight: 600;
  }
}
</style>