offerpai_web/src/components/AgentApplyProgress.vue

<template>
  <!-- 申请进度消息组件 -->
  <div class="agent-apply-progress">
    <!-- 顶部标题栏 -->
    <div class="agent-apply-progress__header">
      <!-- 三重状态：投递完成 / 暂停投递 / 开始投递 -->
      <span
        class="agent-apply-progress__title"
        :class="{ 'agent-apply-progress__title--clickable': titleClickable }"
        @click="handleTitleClick"
      >{{ titleText }}</span>
      <span v-if="currentStep < 4" class="agent-apply-progress__cancel" @click="handleCancel">取消</span>
    </div>

    <!-- 岗位信息卡片 -->
    <div class="agent-apply-progress__job-card">
      <div class="agent-apply-progress__job-icon">
        <svg viewBox="0 0 24 24" fill="none">
          <rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.2"/>
          <rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.2"/>
          <rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.2"/>
          <rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.2"/>
        </svg>
      </div>
      <div class="agent-apply-progress__job-info">
        <div class="agent-apply-progress__job-company">{{ jobInfo?.companyShortName || jobInfo?.companyName || '' }}</div>
        <div class="agent-apply-progress__job-title">{{ jobInfo?.title || '' }}</div>
      </div>
    </div>

    <!-- 步骤列表 -->
    <div class="agent-apply-progress__steps">
      <!-- 第1步：优化简历 -->
      <div class="agent-apply-progress__step">
        <div class="agent-apply-progress__step-check" :class="{ 'agent-apply-progress__step-check--done': currentStep > 1 }">
          <svg v-if="currentStep > 1" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <span class="agent-apply-progress__step-label">优化简历</span>
      </div>

      <!-- 第2步：确认简历 -->
      <div class="agent-apply-progress__step">
        <div class="agent-apply-progress__step-check" :class="{ 'agent-apply-progress__step-check--done': currentStep > 2 }">
          <svg v-if="currentStep > 2" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <span class="agent-apply-progress__step-label">确认简历</span>
        <!-- 第2步展开内容：简历确认区域 -->
        <div v-if="currentStep === 2" class="agent-apply-progress__step-content">
          <div class="agent-apply-progress__resume-confirm">
            <div class="agent-apply-progress__resume-file">
              <svg viewBox="0 0 24 24" fill="none" class="agent-apply-progress__file-icon"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M14 2v6h6" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
              <span class="agent-apply-progress__resume-name">{{ resumeName }}</span>
            </div>
            <button class="agent-apply-progress__confirm-btn" :disabled="paused" @click="handleConfirmResume">确定</button>
          </div>
        </div>
      </div>

      <!-- 第3步：分析投递页面 -->
      <div class="agent-apply-progress__step">
        <div class="agent-apply-progress__step-check" :class="{ 'agent-apply-progress__step-check--done': currentStep > 3 }">
          <svg v-if="currentStep > 3" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <span class="agent-apply-progress__step-label">分析投递页面</span>
        <!-- 第3步展开内容：投递操作区域 -->
        <div v-if="currentStep === 3" class="agent-apply-progress__step-content">
          <div class="agent-apply-progress__apply-area">
            <p class="agent-apply-progress__apply-desc">该职位仅支持在申请网站原地址使用自动填充功能。</p>
            <p class="agent-apply-progress__apply-desc">请点击"去投递"，打开申请网站，我们的自动填写插件将自动弹出。</p>
            <p class="agent-apply-progress__apply-desc">点击"自动填写"，核对信息并提交申请，然后返回本页点击"我已申请"继续。</p>
            <div class="agent-apply-progress__apply-actions">
              <span class="agent-apply-progress__skip-btn" :class="{ 'agent-apply-progress__skip-btn--disabled': paused }" @click="handleSkip">跳过</span>
              <button class="agent-apply-progress__applied-btn" :disabled="paused" @click="handleApplied">我已投递</button>
              <button class="agent-apply-progress__goto-btn" :disabled="paused" @click="handleGoApply">去投递</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 第4步：提交申请 -->
      <div class="agent-apply-progress__step">
        <div class="agent-apply-progress__step-check" :class="{ 'agent-apply-progress__step-check--done': currentStep > 3 }">
          <svg v-if="currentStep > 3" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <span class="agent-apply-progress__step-label">提交申请</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { JobListItem } from '@/api/jobs'

// ==================== Props ====================

const props = defineProps<{
  /** 岗位信息 */
  jobInfo: JobListItem | null
  /** 当前步骤（1-4，大于该步骤表示已完成） */
  currentStep: number
  /** 简历名称（第2步确认时显示） */
  resumeName?: string
  /** 是否暂停状态 */
  paused?: boolean
}>()

// ==================== 计算属性 ====================

/** 标题文字：投递完成 / 暂停投递 / 开始投递 */
const titleText = computed(() => {
  if (props.currentStep >= 4) return '投递完成'
  if (props.paused && props.currentStep > 1) return '开始投递'
  if (!props.paused && props.currentStep > 1) return '暂停投递'
  return '开始投递'
})

/** 标题是否可点击（暂停投递 或 暂停后的开始投递） */
const titleClickable = computed(() => {
  if (props.currentStep >= 4) return false
  return props.currentStep > 1
})

// ==================== 事件 ====================

const emit = defineEmits<{
  /** 取消投递流程 */
  (e: 'cancel'): void
  /** 确认简历（第2步） */
  (e: 'confirmResume'): void
  /** 跳过投递（第3步） */
  (e: 'skip'): void
  /** 我已投递（第3步） */
  (e: 'applied'): void
  /** 去投递（第3步，打开原链接） */
  (e: 'goApply'): void
  /** 暂停/恢复投递 */
  (e: 'togglePause'): void
}>()

// ==================== 事件处理 ====================

/** 点击标题（暂停/恢复） */
function handleTitleClick() {
  if (!titleClickable.value) return
  emit('togglePause')
}

/** 取消 */
function handleCancel() {
  emit('cancel')
}

/** 确认简历 */
function handleConfirmResume() {
  if (props.paused) return
  emit('confirmResume')
}

/** 跳过 */
function handleSkip() {
  if (props.paused) return
  emit('skip')
}

/** 我已投递 */
function handleApplied() {
  if (props.paused) return
  emit('applied')
}

/** 去投递 */
function handleGoApply() {
  if (props.paused) return
  emit('goApply')
}
</script>