offerpai_web/src/components/AgentMatchJobAdd.vue

<template>
  <!-- Agent匹配岗位添加组件 — 右侧面板显示全部推荐岗位 -->
  <div class="agent-match-job-add" v-loading="panelLoading" element-loading-text="加载中...">
    <!-- 顶部标题栏 -->
    <div class="agent-match-job-add__header">
      <span class="agent-match-job-add__title">匹配岗位</span>
      <div class="agent-match-job-add__actions">
        <!-- 全部添加按钮 -->
        <button class="agent-match-job-add__add-all-btn" @click="handleAddAll">
          <span>+ 全部添加</span>
        </button>
        <!-- 关闭按钮 -->
        <button class="agent-match-job-add__close-btn" @click="emit('close')">
          <svg viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" fill="#1A1A2E" />
            <path d="M15 9l-6 6M9 9l6 6" stroke="#fff" stroke-width="1.5" stroke-linecap="round" />
          </svg>
        </button>
      </div>
    </div>

    <!-- 岗位列表 -->
    <div class="agent-match-job-add__list">
      <div
        v-for="job in jobs"
        :key="job.id"
        class="agent-match-job-add__item"
      >
        <!-- 左侧：公司图标 + 岗位信息 -->
        <div class="agent-match-job-add__info" @click="handleClickJob(job)">
          <!-- 公司 Logo -->
          <div class="agent-match-job-add__logo">
            <img v-if="job.companyLogoUrl" :src="job.companyLogoUrl" :alt="job.companyShortName" />
            <svg v-else viewBox="0 0 24 24" fill="none">
              <path d="M3 21V7l9-4 9 4v14H3z" stroke="currentColor" stroke-width="1.5" />
              <path d="M9 21v-6h6v6" stroke="currentColor" stroke-width="1.5" />
            </svg>
          </div>
          <!-- 岗位详情 -->
          <div class="agent-match-job-add__detail">
            <div class="agent-match-job-add__company">{{ job.companyShortName || job.companyName }}</div>
            <div class="agent-match-job-add__position">{{ job.title }}</div>
            <!-- 标签 -->
            <div class="agent-match-job-add__tags">
              <span v-if="job.regionName" class="agent-match-job-add__tag">{{ job.regionName }}</span>
              <span v-if="job.categoryName" class="agent-match-job-add__tag">{{ job.categoryName }}</span>
              <span v-for="tag in job.tags?.slice(0, 2)" :key="tag" class="agent-match-job-add__tag">{{ tag }}</span>
            </div>
          </div>
        </div>

        <!-- 右侧：匹配度 + 操作按钮 -->
        <div class="agent-match-job-add__right">
          <!-- 匹配度环形 -->
          <div class="agent-match-job-add__score">
            <svg class="agent-match-job-add__ring" viewBox="0 0 44 44">
              <circle cx="22" cy="22" r="18" fill="none" stroke="#E8E8E8" stroke-width="3" />
              <circle
                cx="22" cy="22" r="18" fill="none"
                stroke="#4FC2C9" stroke-width="3"
                stroke-linecap="round"
                :stroke-dasharray="2 * Math.PI * 18"
                :stroke-dashoffset="2 * Math.PI * 18 * (1 - (job.matchScore || 0) / 100)"
                transform="rotate(-90 22 22)"
              />
            </svg>
            <span class="agent-match-job-add__score-text">{{ job.matchScore || 0 }}%</span>
          </div>

          <!-- 添加按钮 — 仅 applicationStatus === null 时显示 -->
          <button
            v-if="job.applicationStatus === null || job.applicationStatus === undefined"
            class="agent-match-job-add__action-btn"
            :disabled="loadingJobIds.includes(job.id)"
            @click="handleToggle(job)"
          >+ 添加</button>

          <!-- 移除按钮 — 仅 applicationStatus === -1 时显示 -->
          <button
            v-else-if="job.applicationStatus === -1"
            class="agent-match-job-add__action-btn agent-match-job-add__action-btn--remove"
            :disabled="loadingJobIds.includes(job.id)"
            @click="handleToggle(job)"
          >移出</button>
        </div>
      </div>
    </div>

    <!-- 底部查看更多 -->
    <div class="agent-match-job-add__footer">
      <button class="agent-match-job-add__more-btn" @click="emit('viewMore')">查看更多岗位</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { AgentRecommendJob } from '@/api/agent'

/** 组件 Props */
const props = defineProps<{
  /** 完整岗位列表数据 */
  jobs: AgentRecommendJob[]
  /** 正在请求中的岗位 ID 列表（父组件传入，控制按钮 loading） */
  loadingJobIds: number[]
  /** 面板整体加载状态 */
  panelLoading: boolean
}>()

/** 事件 — 组件只负责通知父组件，不直接调接口 */
const emit = defineEmits<{
  /** 关闭面板 */
  (e: 'close'): void
  /** 查看更多岗位 */
  (e: 'viewMore'): void
  /** 单个岗位添加/移除操作 */
  (e: 'toggle', job: AgentRecommendJob): void
  /** 全部添加操作 */
  (e: 'addAll'): void
  /** 点击岗位查看详情 */
  (e: 'clickJob', job: AgentRecommendJob): void
}>()

/** 点击添加/移除 — 通知父组件处理 */
function handleToggle(job: AgentRecommendJob) {
  emit('toggle', job)
}

/** 点击岗位 — 通知父组件打开岗位预览 */
function handleClickJob(job: AgentRecommendJob) {
  emit('clickJob', job)
}

/** 全部添加 — 通知父组件处理（只传 applicationStatus 为 null 的岗位） */
function handleAddAll() {
  emit('addAll')
}
</script>

<style scoped lang="scss">
@use '../assets/styles/components/agent-match-job-add';
</style>