lingyue-zhibao/frontend/vue-demo/src/components/TaskCenter/TaskCenterPanel.vue

<template>
  <!-- 任务中心浮动面板 -->
  <transition name="task-panel">
    <div v-if="open" class="task-panel" :class="{ expanded: showDetail }">
      <el-card class="task-panel-card" shadow="always">
        <div class="task-panel-header">
          <div class="title">
            <span class="title-icon">📋</span>
            任务中心
          </div>
          <el-button text :icon="Close" @click="handleClose" />
        </div>

        <el-tabs v-model="activeTab" class="task-tabs" @tab-change="handleTabChange">
          <el-tab-pane label="全部" name="all" />
          <el-tab-pane name="processing">
            <template #label>
              <span class="tab-label">
                <span class="tab-text">运行中</span>
                <span class="tab-count" v-if="statusTotals.processing > 0">{{ statusTotals.processing }}</span>
              </span>
            </template>
          </el-tab-pane>
          <el-tab-pane label="已完成" name="completed" />
          <el-tab-pane name="failed">
            <template #label>
              <span class="tab-label">
                <span class="tab-text">失败</span>
                <span class="tab-count error" v-if="statusTotals.failed > 0">{{ statusTotals.failed }}</span>
              </span>
            </template>
          </el-tab-pane>
          <el-tab-pane name="pending">
            <template #label>
              <span class="tab-label">
                <span class="tab-text">等待中</span>
                <span class="tab-count" v-if="statusTotals.pending > 0">{{ statusTotals.pending }}</span>
              </span>
            </template>
          </el-tab-pane>
        </el-tabs>

        <div class="task-body">
          <!-- 左侧任务列表 -->
          <div class="task-list" v-loading="listLoading">
            <div
              v-for="item in list"
              :key="item.id"
              class="task-card"
              :class="[{ active: selectedId === item.id }, statusClass(item.status)]"
              @click="handleSelect(item.id)"
            >
              <div class="task-title-row">
                <div class="task-title">{{ item.name || `任务 ${item.id?.slice(0, 8)}` }}</div>
                <el-tag size="small" :type="tagType(item.status)">{{ statusText(item.status) }}</el-tag>
              </div>
              
              <div class="task-sub" v-if="item.documentId">
                <span>文档: {{ item.documentId?.slice(0, 8) }}...</span>
              </div>
              
              <div class="task-meta">
                <div class="task-meta-left">
                  <div class="task-time">{{ formatRelativeTime(item.createdAt || item.startedAt) }}</div>
                  <template v-if="item.status === 'processing' && item.startedAt">
                    <span class="task-meta-separator">·</span>
                    <div class="task-duration-inline">
                      <span class="task-duration-value">{{ formatElapsedTime(item.startedAt) }}</span>
                    </div>
                  </template>
                </div>
                <div class="task-meta-right">
                  <span class="task-step" v-if="item.currentStep">{{ stepText(item.currentStep) }}</span>
                </div>
              </div>

              <!-- 进度条区域 -->
              <div class="task-progress-section" v-if="selectedId !== item.id">
                <template v-if="item.status === 'processing' || item.status === 'pending'">
                  <div class="task-progress-row" v-if="item.progress != null">
                    <el-progress :percentage="item.progress" :stroke-width="6" />
                    <span class="task-progress-percent">{{ item.progress }}%</span>
                  </div>
                </template>
                <template v-else-if="item.status === 'failed'">
                  <div class="task-progress-row" v-if="item.progress != null">
                    <el-progress :percentage="item.progress" :stroke-width="6" status="exception" />
                    <span class="task-progress-percent task-progress-percent--error">{{ item.progress }}%</span>
                  </div>
                </template>
              </div>

              <!-- 操作按钮 -->
              <div class="task-actions">
                <el-button
                  text
                  type="danger"
                  size="small"
                  :icon="Delete"
                  @click.stop="handleDelete(item)"
                  :disabled="item.status === 'processing'"
                >
                  删除
                </el-button>
              </div>
            </div>
            <el-empty v-if="!listLoading && (!list || list.length === 0)" description="暂无任务" />
          </div>

          <!-- 右侧任务详情 -->
          <div class="task-detail" :class="{ show: showDetail }" v-loading="detailLoading">
            <template v-if="detail">
              <div class="detail-header">
                <h3>{{ detail.name || `任务详情` }}</h3>
                <el-tag :type="tagType(detail.status)">{{ statusText(detail.status) }}</el-tag>
              </div>

              <div class="detail-meta">
                <span>开始时间：{{ formatDateTime(detail.startedAt) || '-' }}</span>
                <span v-if="detail.completedAt">｜ 完成时间：{{ formatDateTime(detail.completedAt) }}</span>
              </div>

              <div class="detail-progress">
                <el-progress :percentage="detail.progress ?? 0" :status="detail.status === 'failed' ? 'exception' : undefined" />
                <div class="progress-info">
                  <div class="current-stage" v-if="detail.currentStep">
                    <span class="current-stage-label">当前阶段：</span>
                    <span class="current-stage-value">{{ stepText(detail.currentStep) }}</span>
                  </div>
                </div>
              </div>

              <!-- 失败信息 -->
              <template v-if="detail.status === 'failed' && detail.errorMessage">
                <div class="detail-section">错误信息</div>
                <div class="task-error-info">
                  <div class="error-remark">{{ detail.errorMessage }}</div>
                </div>
              </template>

              <!-- 执行阶段 -->
              <div class="detail-section">执行阶段</div>
              <div v-if="detail.stages && detail.stages.length" class="stages">
                <div v-for="s in detail.stages" :key="s.stageName" class="stage-row">
                  <div class="stage-name">
                    <span class="stage-icon" :class="s.status">
                      <el-icon v-if="s.status === 'completed'"><CircleCheckFilled /></el-icon>
                      <el-icon v-else-if="s.status === 'in_progress'"><Loading /></el-icon>
                      <el-icon v-else-if="s.status === 'failed'"><CircleCloseFilled /></el-icon>
                      <el-icon v-else><Clock /></el-icon>
                    </span>
                    {{ s.displayName }}
                  </div>
                  <div class="stage-meta">
                    <span :class="['stage-status', s.status]">{{ stageStatusText(s.status) }}</span>
                    <span v-if="s.resultSummary" class="stage-result">{{ s.resultSummary }}</span>
                  </div>
                </div>
              </div>
              <el-empty v-else description="暂无阶段数据" :image-size="60" />
            </template>
            <template v-else>
              <el-empty description="请选择任务查看详情" :image-size="80" />
            </template>
          </div>
        </div>
      </el-card>
    </div>
  </transition>
</template>

<script setup>
import { computed, watch, onMounted } from 'vue'
import { Close, Delete, CircleCheckFilled, CircleCloseFilled, Loading, Clock } from '@element-plus/icons-vue'
import { useTaskCenterStore } from '@/stores/taskCenter'
import { ElMessage, ElMessageBox } from 'element-plus'

const store = useTaskCenterStore()

const open = computed(() => store.open)
const list = computed(() => store.list)
const listLoading = computed(() => store.listLoading)
const detailLoading = computed(() => store.detailLoading)
const selectedId = computed(() => store.selectedId)
const detail = computed(() => store.detail)
const showDetail = computed(() => !!store.selectedId)
const statusTotals = computed(() => store.statusTotals || { processing: 0, failed: 0, pending: 0 })

const activeTab = computed({
  get: () => store.activeTab,
  set: (v) => store.setActiveTab(v)
})

function handleClose() {
  store.close()
}

function handleTabChange() {
  store.selectedId = null
  store.detail = null
  store.fetchList()
}

function handleSelect(id) {
  if (store.selectedId === id) {
    store.selectedId = null
    store.detail = null
    return
  }
  store.selectTask(id)
}

watch(
  () => store.open,
  (val) => {
    if (val) {
      store.selectedId = null
      store.detail = null
      store.fetchRunningCount()
      store.fetchStatusTotals()
      store.fetchList()
      store.startListPolling()
    } else {
      store.stopListPolling()
    }
  }
)

onMounted(() => {
  store.fetchList({ pageNum: 1, pageSize: 20 })
})

// 工具函数
function tagType(status) {
  if (status === 'processing') return 'primary'
  if (status === 'completed') return 'success'
  if (status === 'failed') return 'danger'
  return 'info'
}

function statusClass(status) {
  if (status === 'processing') return 'status-processing'
  if (status === 'completed') return 'status-completed'
  if (status === 'failed') return 'status-failed'
  return 'status-pending'
}

function statusText(status) {
  if (status === 'processing') return '运行中'
  if (status === 'completed') return '已完成'
  if (status === 'failed') return '失败'
  return '等待中'
}

function stageStatusText(status) {
  if (status === 'in_progress') return '进行中'
  if (status === 'completed') return '已完成'
  if (status === 'failed') return '失败'
  return '等待中'
}

function stepText(step) {
  const stepMap = {
    'parsing': '文本解析',
    'pdf_extraction': 'PDF提取',
    'word_extraction': 'Word提取',
    'excel_extraction': 'Excel提取',
    'ocr': 'OCR识别',
    'saving': '保存文本',
    'layout_analysis': '版面分析',
    'recording': '记录存储',
    'completed': '已完成',
    'failed': '失败'
  }
  return stepMap[step] || step
}

function formatRelativeTime(v) {
  if (!v) return ''
  const d = parseDateTime(v)
  if (!d) return ''
  const now = new Date()
  const diffMs = now.getTime() - d.getTime()
  const diffSec = Math.floor(diffMs / 1000)
  if (diffSec < 60 && diffSec >= 0) return `${diffSec}秒前`
  const diffMin = Math.floor(diffSec / 60)
  if (diffMin < 60 && diffMin >= 0) return `${diffMin}分钟前`
  const diffHour = Math.floor(diffMin / 60)
  if (diffHour < 24 && diffHour >= 0) return `${diffHour}小时前`
  return formatDateTime(v)
}

function formatElapsedTime(startTime) {
  const start = parseDateTime(startTime)
  if (!start) return '-'
  const now = new Date()
  const diffMs = Math.max(0, now.getTime() - start.getTime())
  return formatMs(diffMs)
}

function formatDateTime(v) {
  if (!v) return ''
  if (typeof v === 'string') return v
  return v.toLocaleString('zh-CN')
}

function parseDateTime(v) {
  if (!v) return null
  if (v instanceof Date) return v
  if (typeof v !== 'string') return null
  const s = v.replace(' ', 'T')
  const d = new Date(s)
  if (isNaN(d.getTime())) return null
  return d
}

function formatMs(ms) {
  if (ms == null) return '-'
  const s = Math.floor(ms / 1000)
  if (s < 60) return `${s}s`
  const m = Math.floor(s / 60)
  const rs = s % 60
  if (m < 60) return `${m}m${rs}s`
  const h = Math.floor(m / 60)
  const rm = m % 60
  return `${h}h${rm}m`
}

async function handleDelete(item) {
  try {
    await ElMessageBox.confirm(
      `确认删除任务"${item.name || item.id}"吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    await store.deleteTask(item.id)
    ElMessage.success('删除成功')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(error?.message || '删除失败')
    }
  }
}
</script>

<style scoped>
.task-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 480px;
  max-width: calc(100vw - 32px);
  z-index: 4000;
  transition: width 0.2s ease;
}

.task-panel.expanded {
  width: 900px;
}

.task-panel-card {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.task-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.task-panel-header .title {
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-panel-header .title-icon {
  font-size: 20px;
}

.task-tabs :deep(.el-tabs__item) {
  font-weight: 600;
}

.tab-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  color: #fff;
  background: var(--el-color-primary);
}

.tab-count.error {
  background: var(--el-color-danger);
}

.task-body {
  display: flex;
  gap: 0;
  height: 480px;
}

.task-panel.expanded .task-body {
  gap: 16px;
}

.task-list {
  width: 100%;
  overflow: auto;
  padding-right: 6px;
  transition: width 0.2s ease;
}

.task-panel.expanded .task-list {
  width: 360px;
  border-right: 1px solid #ebeef5;
  padding-right: 16px;
}

.task-card {
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fff;
}

.task-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.task-card.status-processing {
  background-color: rgba(64, 158, 255, 0.05);
  border-color: rgba(64, 158, 255, 0.2);
}

.task-card.status-completed {
  background-color: rgba(103, 194, 58, 0.05);
}

.task-card.status-failed {
  background-color: rgba(245, 108, 108, 0.05);
  border-color: rgba(245, 108, 108, 0.2);
}

.task-card.status-pending {
  background-color: rgba(144, 147, 153, 0.05);
}

.task-card.active {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
}

.task-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.task-title {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-sub {
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
}

.task-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.task-meta-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #909399;
}

.task-meta-separator {
  color: #c0c4cc;
}

.task-duration-inline {
  display: flex;
  align-items: center;
}

.task-duration-value {
  font-weight: 600;
  color: var(--el-color-primary);
}

.task-meta-right {
  display: flex;
  align-items: center;
}

.task-step {
  font-size: 12px;
  color: var(--el-color-primary);
  font-weight: 500;
}

.task-progress-section {
  margin-top: 8px;
}

.task-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-progress-row :deep(.el-progress) {
  flex: 1;
}

.task-progress-row :deep(.el-progress__text) {
  display: none;
}

.task-progress-percent {
  font-size: 12px;
  color: #606266;
  font-weight: 600;
  min-width: 36px;
  text-align: right;
}

.task-progress-percent--error {
  color: var(--el-color-danger);
}

.task-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.task-detail {
  overflow: auto;
  width: 0;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}

.task-detail.show {
  width: calc(100% - 376px);
  opacity: 1;
  pointer-events: auto;
  padding-left: 16px;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.detail-header h3 {
  margin: 0;
  font-size: 16px;
}

.detail-meta {
  font-size: 12px;
  color: #909399;
  margin-bottom: 12px;
}

.detail-progress {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #fafafa;
  margin-bottom: 16px;
}

.progress-info {
  margin-top: 8px;
}

.current-stage {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.current-stage-label {
  color: #909399;
}

.current-stage-value {
  color: var(--el-color-primary);
  font-weight: 600;
}

.detail-section {
  margin-top: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

.task-error-info {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(245, 108, 108, 0.3);
  background: rgba(245, 108, 108, 0.05);
}

.error-remark {
  color: var(--el-color-danger);
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
}

.stages {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
}

.stage-row {
  padding: 10px 12px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stage-row:last-child {
  border-bottom: none;
}

.stage-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.stage-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.stage-icon.completed {
  color: var(--el-color-success);
}

.stage-icon.in_progress {
  color: var(--el-color-primary);
}

.stage-icon.failed {
  color: var(--el-color-danger);
}

.stage-icon.pending {
  color: #c0c4cc;
}

.stage-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.stage-status {
  padding: 2px 8px;
  border-radius: 4px;
  background: #f5f7fa;
}

.stage-status.completed {
  color: var(--el-color-success);
  background: rgba(103, 194, 58, 0.1);
}

.stage-status.in_progress {
  color: var(--el-color-primary);
  background: rgba(64, 158, 255, 0.1);
}

.stage-status.failed {
  color: var(--el-color-danger);
  background: rgba(245, 108, 108, 0.1);
}

.stage-result {
  color: #909399;
}

/* 动画 */
.task-panel-enter-active,
.task-panel-leave-active {
  transition: all 0.2s ease;
}

.task-panel-enter-from,
.task-panel-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

@media (max-width: 768px) {
  .task-panel {
    width: calc(100vw - 32px);
    left: 16px;
    right: 16px;
  }

  .task-body {
    flex-direction: column;
    height: 60vh;
  }

  .task-panel.expanded .task-list {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 12px;
    max-height: 200px;
  }

  .task-detail.show {
    width: 100%;
    padding-left: 0;
    padding-top: 12px;
  }
}
</style>