sionrui/frontend/app/web-gold/src/views/material/MixTaskList.vue

<template>
  <div class="mix-task-list">
    <div class="mix-task-list__header">
      <h1 class="mix-task-list__title">混剪任务</h1>
      <div class="mix-task-list__actions">
        <a-button @click="handleRefresh">
          <template #icon>
            <ReloadOutlined />
          </template>
          刷新
        </a-button>
      </div>
    </div>

    <!-- 筛选条件 -->
    <div class="mix-task-list__filters">
      <a-space>
        <a-select
          v-model:value="filters.status"
          style="width: 120px"
          placeholder="任务状态"
          @change="handleFilterChange"
          allow-clear
        >
          <a-select-option value="">全部状态</a-select-option>
          <a-select-option value="pending">待处理</a-select-option>
          <a-select-option value="running">处理中</a-select-option>
          <a-select-option value="success">已完成</a-select-option>
          <a-select-option value="failed">失败</a-select-option>
        </a-select>

        <a-input
          v-model="filters.title"
          placeholder="搜索标题"
          style="width: 200px"
          allow-clear
          @press-enter="handleFilterChange"
        >
          <template #prefix>
            <SearchOutlined />
          </template>
        </a-input>

        <a-range-picker
          v-model:value="filters.createTime"
          style="width: 300px"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          :placeholder="['开始日期', '结束日期']"
          @change="handleFilterChange"
        />

        <a-button type="primary" @click="handleFilterChange">查询</a-button>
        <a-button @click="handleResetFilters">重置</a-button>
      </a-space>
    </div>

    <!-- 任务列表 -->
    <div class="mix-task-list__content">
      <a-spin :spinning="loading" tip="加载中...">
        <a-table
          :data-source="taskList"
          :columns="columns"
          :row-key="record => record.id"
          :pagination="paginationConfig"
          @change="handleTableChange"
          :expanded-row-keys="expandedRowKeys"
          @expandedRowsChange="handleExpandedRowsChange"
          :scroll="{ x: 1000 }"
        >
          <!-- 标题列 -->
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'title'">
              <div class="title-cell">
                <strong>{{ record.title }}</strong>
                <a-tag v-if="record.text" size="small" style="margin-left: 8px">有文案</a-tag>
              </div>
            </template>

            <!-- 状态列 -->
            <template v-else-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ getStatusText(record.status) }}
              </a-tag>
            </template>

            <!-- 进度列 -->
            <template v-else-if="column.key === 'progress'">
              <div style="min-width: 100px">
                <div style="font-size: 12px; margin-bottom: 4px">{{ record.progress }}%</div>
                <a-progress
                  :percent="record.progress"
                  :status="getProgressStatus(record.status)"
                  size="small"
                  :show-info="false"
                />
              </div>
            </template>

            <!-- 创建时间列 -->
            <template v-else-if="column.key === 'createTime'">
              {{ formatDate(record.createTime) }}
            </template>

            <!-- 完成时间列 -->
            <template v-else-if="column.key === 'finishTime'">
              {{ record.finishTime ? formatDate(record.finishTime) : '-' }}
            </template>

            <!-- 生成结果列 -->
            <template v-else-if="column.key === 'outputUrls'">
              <div v-if="record.outputUrls && record.outputUrls.length > 0">
                <a-tag color="success">{{ record.outputUrls.length }} 个视频</a-tag>
              </div>
              <span v-else>-</span>
            </template>

            <!-- 操作列 -->
            <template v-else-if="column.key === 'actions'">
              <a-space>
                <a-button
                  v-if="record.outputUrls && record.outputUrls.length > 0"
                  type="primary"
                  size="small"
                  @click="handleDownloadAll(record.outputUrls)"
                >
                  <template #icon>
                    <DownloadOutlined />
                  </template>
                  <span>下载</span>
                </a-button>
                <a-button
                  v-if="record.status === 'failed'"
                  size="small"
                  @click="handleRetry(record.id)"
                >
                  重新生成
                </a-button>
                <a-button
                  v-if="record.status === 'running'"
                  size="small"
                  @click="handleCancel(record.id)"
                >
                  取消
                </a-button>
                <a-popconfirm
                  title="确定删除这个任务吗？删除后无法恢复。"
                  @confirm="() => handleDelete(record.id)"
                >
                  <a-button size="small" danger>删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </template>

          <!-- 展开行内容 -->
          <template #expandedRowRender="{ record }">
            <div class="expanded-content">
              <!-- 任务详情 -->
              <div v-if="record.text" class="task-text">
                <strong>文案内容：</strong>
                <p>{{ record.text }}</p>
              </div>

              <!-- 生成结果 -->
              <div v-if="record.outputUrls && record.outputUrls.length > 0" class="task-results">
                <strong>生成结果：</strong>
                <div class="result-list">
                  <div
                    v-for="(url, index) in record.outputUrls"
                    :key="index"
                    class="result-item"
                  >
                    <a :href="url" target="_blank">
                      <PlayCircleOutlined />
                      视频 {{ index + 1 }}
                    </a>
                    <a-button
                      type="link"
                      size="small"
                      @click="handleDownload(url)"
                    >
                      <DownloadOutlined />
                    </a-button>
                  </div>
                </div>
              </div>

              <!-- 错误信息 -->
              <div v-if="record.errorMsg" class="task-error">
                <a-alert
                  type="error"
                  :message="record.errorMsg"
                  show-icon
                />
              </div>
            </div>
          </template>
        </a-table>
      </a-spin>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { message, Modal } from 'ant-design-vue'
import {
  ReloadOutlined,
  SearchOutlined,
  PlayCircleOutlined,
  DownloadOutlined
} from '@ant-design/icons-vue'
import { MixTaskService } from '@/api/mixTask'
import { formatDate } from '@/utils/file'

// 数据
const loading = ref(false)
const taskList = ref([])
const expandedRowKeys = ref([])

// 表格列定义
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 80,
    fixed: 'left'
  },
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
    width: 250,
    ellipsis: true
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100
  },
  {
    title: '进度',
    dataIndex: 'progress',
    key: 'progress',
    width: 150
  },
  {
    title: '生成结果',
    dataIndex: 'outputUrls',
    key: 'outputUrls',
    width: 120
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 180
  },
  {
    title: '完成时间',
    dataIndex: 'finishTime',
    key: 'finishTime',
    width: 180
  },
  {
    title: '操作',
    key: 'actions',
    width: 300,
    fixed: 'right'
  }
]

// 筛选条件
const filters = reactive({
  status: '',
  title: '',
  createTime: undefined
})

// 分页配置
const paginationConfig = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条`,
  pageSizeOptions: ['10', '20', '50', '100'],
  onChange: (page, pageSize) => {
    paginationConfig.current = page
    paginationConfig.pageSize = pageSize
    handlePageChange(page, pageSize)
  },
  onShowSizeChange: (current, size) => {
    paginationConfig.current = 1
    paginationConfig.pageSize = size
    handlePageChange(1, size)
  }
})

// 构建查询参数
const buildQueryParams = () => {
  const params = {
    pageNo: paginationConfig.current,
    pageSize: paginationConfig.pageSize,
    status: filters.status || undefined,
    title: filters.title || undefined
  }

  // 处理日期范围
  if (filters.createTime && Array.isArray(filters.createTime) && filters.createTime.length === 2) {
    params.createTimeStart = `${filters.createTime[0]} 00:00:00`
    params.createTimeEnd = `${filters.createTime[1]} 23:59:59`
  }

  return params
}

// 加载任务列表
const loadTaskList = async () => {
  loading.value = true
  try {
    const res = await MixTaskService.getTaskPage(buildQueryParams())
    if (res.code === 0) {
      taskList.value = res.data.list || []
      paginationConfig.total = res.data.total || 0
    } else {
      message.error(res.msg || '加载失败')
    }
  } catch (error) {
    console.error('加载任务列表失败:', error)
    message.error('加载失败，请重试')
  } finally {
    loading.value = false
  }
}

// 筛选
const handleFilterChange = () => {
  paginationConfig.current = 1
  loadTaskList()
}

const handleResetFilters = () => {
  filters.status = ''
  filters.title = ''
  filters.createTime = undefined
  paginationConfig.current = 1
  loadTaskList()
}

// 分页
const handlePageChange = (page, pageSize) => {
  loadTaskList()
}

// 表格变化
const handleTableChange = (pag, filters, sorter) => {
  console.log('表格变化:', pag, filters, sorter)
}

// 展开行变化
const handleExpandedRowsChange = (expandedRows) => {
  expandedRowKeys.value = expandedRows
}

// 刷新
const handleRefresh = () => {
  loadTaskList()
}

// 重新生成
const handleRetry = (id) => {
  Modal.confirm({
    title: '确认重新生成',
    content: '确定要重新生成这个任务吗？',
    onOk: async () => {
      try {
        await MixTaskService.retryTask(id)
        message.success('已重新提交任务')
        loadTaskList()
      } catch (error) {
        message.error('操作失败')
      }
    }
  })
}

// 取消任务
const handleCancel = (id) => {
  Modal.confirm({
    title: '确认取消',
    content: '确定要取消这个任务吗？',
    onOk: async () => {
      try {
        await MixTaskService.cancelTask(id)
        message.success('已取消任务')
        loadTaskList()
      } catch (error) {
        message.error('操作失败')
      }
    }
  })
}

// 删除任务
const handleDelete = (id) => {
  MixTaskService.deleteTask(id)
    .then(() => {
      message.success('删除成功')
      loadTaskList()
    })
    .catch(() => {
      message.error('删除失败')
    })
}

// 下载单个视频
const handleDownload = (url) => {
  const link = document.createElement('a')
  link.href = url
  link.download = 'video'
  link.target = '_blank'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// 批量下载所有视频
const handleDownloadAll = (urls) => {
  if (!urls || urls.length === 0) {
    message.warning('没有可下载的视频')
    return
  }

  message.loading('正在准备下载...', 0)

  // 逐个触发下载，避免浏览器阻止多个弹窗
  urls.forEach((url, index) => {
    setTimeout(() => {
      console.log('下载视频:', url)
      handleDownload(url)
    }, index * 500) // 每个下载间隔500ms
  })

  message.destroy()
  message.success(`已触发 ${urls.length} 个视频的下载`)
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    pending: '待处理',
    running: '处理中',
    success: '已完成',
    failed: '失败'
  }
  return statusMap[status] || status
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    pending: 'default',
    running: 'processing',
    success: 'success',
    failed: 'error'
  }
  return colorMap[status] || 'default'
}

// 获取进度条状态
const getProgressStatus = (status) => {
  const statusMap = {
    pending: 'normal',
    running: 'active',
    success: 'success',
    failed: 'exception'
  }
  return statusMap[status] || 'normal'
}

// 初始化
onMounted(() => {
  loadTaskList()
})
</script>

<style scoped>
.mix-task-list {
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mix-task-list__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.mix-task-list__title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.mix-task-list__actions {
  display: flex;
  gap: 12px;
}

.mix-task-list__filters {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
}

.mix-task-list__content {
  flex: 1;
  overflow: auto;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  padding: 16px;
}

.title-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.expanded-content {
  padding: 16px;
  background: var(--color-bg-2);
  border-radius: var(--radius-card);
  margin: 8px;
}

.task-text {
  margin-bottom: 16px;
}

.task-text p {
  margin: 8px 0 0 0;
  padding: 8px;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  line-height: 1.6;
}

.task-results {
  margin-bottom: 16px;
}

.result-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  font-size: 13px;
}

.task-error {
  margin-bottom: 8px;
}

/* 确保按钮内的图标和文字对齐 */
:deep(.ant-btn .anticon) {
  vertical-align: middle;
}
</style>