YG_FT/frontend/src/views/data-process/DataProcessListView.vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import DataTablePage from '@/components/DataTablePage.vue'
import ModelStatusTag from '@/components/ModelStatusTag.vue'

/** 数据处理任务类型 */
interface DataProcessTask {
  id: number | string
  name: string
  status: string
  process_type: string
  source_dataset: string
  output_dataset?: string
  create_time?: string
}

// TODO: 接入真实接口前，先用本地 mock 数据
const router = useRouter()
const dataList = ref<DataProcessTask[]>([
  {
    id: 1,
    name: '客服问答数据清洗',
    status: 'completed',
    process_type: '去重清洗',
    source_dataset: '客服对话原始集',
    output_dataset: '客服对话清洗集',
    create_time: '2026-07-08 14:23:00',
  },
  {
    id: 2,
    name: '指令微调数据构造',
    status: 'running',
    process_type: '指令构造',
    source_dataset: '通用语料库',
    output_dataset: 'SFT 指令集',
    create_time: '2026-07-09 09:10:00',
  },
  {
    id: 3,
    name: '敏感信息脱敏处理',
    status: 'pending',
    process_type: '脱敏处理',
    source_dataset: '用户反馈数据',
    create_time: '2026-07-09 16:45:00',
  },
  {
    id: 4,
    name: '多轮对话拼接',
    status: 'failed',
    process_type: '格式转换',
    source_dataset: '单轮问答集',
    create_time: '2026-07-10 08:30:00',
  },
])

const activeTab = ref('all')

const filteredDataList = computed(() => {
  let list = dataList.value
  
  if (activeTab.value !== 'all') {
    if (activeTab.value === 'processing') {
      list = list.filter(item => item.status === 'running' || item.status === 'pending')
    } else if (activeTab.value === 'completed') {
      list = list.filter(item => item.status === 'completed')
    } else if (activeTab.value === 'failed') {
      list = list.filter(item => item.status === 'failed')
    }
  }

  return list
})

/** 新建数据处理任务 */
function handleCreate() {
  router.push('/data-process/create')
}

/** 查看任务详情（功能开发中） */
function viewDetail(_row: DataProcessTask) {
  ElMessage.info('查看详情功能开发中...')
}

/** 删除任务（功能开发中） */
function handleDelete(_row: DataProcessTask) {
  ElMessage.info('删除功能开发中...')
}

function formatDateTime(value?: string) {
  if (!value) return '-'
  return new Date(value).toLocaleString('zh-CN', { hour12: false })
}
</script>

<template>
  <div class="data-process-page" style="height: 100%;">
    <DataTablePage
      title=""
      :data="filteredDataList"
      searchable
      :search-fields="['name']"
      create-text="新建数据处理任务"
      create-to="/data-process/create"
      row-key="id"
      :page-size="10"
    >
      <template #title>
        <!-- 胶囊切换控件 -->
        <div class="capsule-tabs">
          <button 
            class="capsule-tab-item" 
            :class="{ active: activeTab === 'all' }" 
            @click="activeTab = 'all'"
          >
            全部任务
          </button>
          <button 
            class="capsule-tab-item" 
            :class="{ active: activeTab === 'processing' }" 
            @click="activeTab = 'processing'"
          >
            处理中
          </button>
          <button 
            class="capsule-tab-item" 
            :class="{ active: activeTab === 'completed' }" 
            @click="activeTab = 'completed'"
          >
            已完成
          </button>
        </div>
      </template>
      <template #columns>
        <el-table-column label="任务名称" prop="name" align="center" show-overflow-tooltip />
        <el-table-column label="任务状态" align="center" width="110">
          <template #default="{ row }">
            <ModelStatusTag :status="row.status" />
          </template>
        </el-table-column>
        <el-table-column label="处理类型" align="center" width="140">
          <template #default="{ row }">{{ row.process_type || '-' }}</template>
        </el-table-column>
        <el-table-column label="源数据集" align="center" show-overflow-tooltip>
          <template #default="{ row }">{{ row.source_dataset || '-' }}</template>
        </el-table-column>
        <el-table-column label="输出数据集" align="center" show-overflow-tooltip>
          <template #default="{ row }">{{ row.output_dataset || '-' }}</template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" width="190">
          <template #default="{ row }">{{ formatDateTime(row.create_time) }}</template>
        </el-table-column>
      </template>

      <template #actions="{ row }">
        <div class="action-buttons">
          <el-button type="primary" link size="small" @click="viewDetail(row)">
            <i class="fa fa-file-text-o" 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>
  </div>
</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;
  }
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}
</style>