YG_FT/frontend/src/views/data-process/create/GenerationStep.vue

<script setup lang="ts">
import type { GenerationState, ProcessType } from './types'

defineProps<{
  taskName: string
  processType: ProcessType
  fileName: string
  previewCount: number
  modifiedCount: number
  generation: GenerationState
}>()

const emit = defineEmits<{
  stop: []
  retry: []
}>()
</script>

<template>
  <section class="generation-step">
    <div class="generation-layout">
      <div class="summary-panel">
        <div class="panel-heading">
          <strong>任务摘要</strong>
          <span>已完成预览确认</span>
        </div>
        <dl>
          <div><dt>任务名称</dt><dd>{{ taskName }}</dd></div>
          <div><dt>数据类型</dt><dd>{{ processType === 'unstructured' ? '非结构化数据' : '结构化数据' }}</dd></div>
          <div><dt>源文件</dt><dd>{{ fileName }}</dd></div>
          <div><dt>预览条目</dt><dd>{{ previewCount.toLocaleString() }} 条</dd></div>
          <div><dt>已修改</dt><dd>{{ modifiedCount.toLocaleString() }} 条</dd></div>
        </dl>
      </div>

      <div class="run-panel" :class="`is-${generation.status}`">
        <div class="run-icon">
          <i v-if="generation.status === 'success'" class="fa fa-check" />
          <i v-else-if="generation.status === 'failed'" class="fa fa-exclamation" />
          <i v-else-if="generation.status === 'running'" class="fa fa-cog fa-spin" />
          <i v-else class="fa fa-play" />
        </div>
        <h3>
          {{ generation.status === 'idle' ? '准备开始处理'
            : generation.status === 'running' ? '正在生成数据'
              : generation.status === 'success' ? '数据生成完成'
                : '生成已停止' }}
        </h3>
        <p>{{ generation.message }}</p>
        <el-progress
          v-if="generation.status !== 'idle'"
          :percentage="generation.progress"
          :stroke-width="10"
          :status="generation.status === 'success' ? 'success' : undefined"
        />
        <div class="run-meta">
          <span>解析源数据</span>
          <span>应用预览修改</span>
          <span>生成标准结果</span>
        </div>
        <el-button v-if="generation.status === 'running'" plain type="warning" @click="emit('stop')">
          停止生成
        </el-button>
        <el-button v-if="generation.status === 'failed'" plain type="primary" @click="emit('retry')">
          重新生成
        </el-button>
      </div>
    </div>
  </section>
</template>

<style scoped lang="scss">
.generation-step {
  max-width: 1040px;
  margin: 0 auto;
}


.generation-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1.22fr);
  gap: 28px;
}

.summary-panel,
.run-panel {
  border: 1px solid #e2e5ec;
  border-radius: 9px;
}

.summary-panel {
  overflow: hidden;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 17px;
  background: #fbfcfe;
  border-bottom: 1px solid #e8ebf0;

  strong {
    color: #344054;
    font-size: 14px;
  }

  span {
    color: #2ca66a;
    font-size: 11px;
  }
}

dl {
  margin: 0;
  padding: 8px 17px;

  div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid #eef0f5;

    &:last-child {
      border-bottom: 0;
    }
  }
}

dt,
dd {
  margin: 0;
  font-size: 12px;
}

dt {
  color: #8a93a3;
}

dd {
  max-width: 65%;
  overflow: hidden;
  color: #344054;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-panel {
  display: flex;
  min-height: 360px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 34px 48px;
  text-align: center;
  background: #fff;

  h3 {
    margin: 18px 0 8px;
    color: #2e3646;
    font-size: 18px;
  }

  p {
    min-height: 22px;
    margin: 0 0 24px;
    color: #7b8495;
    font-size: 12px;
  }

  :deep(.el-progress) {
    width: 100%;
    margin-bottom: 18px;
  }
}

.run-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  color: #5b50f2;
  font-size: 22px;
  background: #f0efff;
  border-radius: 50%;
}

.run-panel.is-success .run-icon {
  color: #2ca66a;
  background: #eaf8f1;
}

.run-panel.is-failed .run-icon {
  color: #d97706;
  background: #fff7e8;
}

.run-meta {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 24px;
  color: #98a2b3;
  font-size: 10px;
}

@media (max-width: 900px) {
  .generation-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
</style>