offerpai_web/src/components/AgentSettingsPanel.vue

<template>
  <!-- Agent设置面板 — 第4步配置求职助手 -->
  <div class="agent-settings-panel">
    <!-- Agent模式 -->
    <div class="agent-settings-panel__group">
      <div class="agent-settings-panel__label">
        Agent模式
        <el-tooltip content="协作模式：每次投递前需要你确认；托管模式：全自动投递无需确认" placement="top">
          <span class="agent-settings-panel__tip">ⓘ</span>
        </el-tooltip>
      </div>
      <div class="agent-settings-panel__options">
        <button
          class="agent-settings-panel__option agent-settings-panel__option--lg"
          :class="{ 'agent-settings-panel__option--active': agentMode === 1 }"
          @click="agentMode = 1"
        >协作模式</button>
        <button
          class="agent-settings-panel__option agent-settings-panel__option--lg"
          :class="{ 'agent-settings-panel__option--active': agentMode === 2 }"
          @click="agentMode = 2"
        >托管模式</button>
      </div>
    </div>

    <!-- 投递目标 -->
    <div class="agent-settings-panel__group">
      <div class="agent-settings-panel__label">
        投递目标
        <el-tooltip content="每周自动投递的岗位数量目标" placement="top">
          <span class="agent-settings-panel__tip">ⓘ</span>
        </el-tooltip>
      </div>
      <div class="agent-settings-panel__options">
        <button
          v-for="goal in weeklyTargetOptions"
          :key="goal.value"
          class="agent-settings-panel__option agent-settings-panel__option--lg"
          :class="{ 'agent-settings-panel__option--active': weeklyTarget === goal.value }"
          @click="weeklyTarget = goal.value"
        >{{ goal.label }}</button>
      </div>
    </div>

    <!-- 简历设置 -->
    <div class="agent-settings-panel__group">
      <div class="agent-settings-panel__label">
        简历设置
        <el-tooltip content="选择投递时使用的默认简历" placement="top">
          <span class="agent-settings-panel__tip">ⓘ</span>
        </el-tooltip>
      </div>

      <!-- 设置默认简历 -->
      <div class="agent-settings-panel__sub-label">设置默认简历</div>
      <div class="agent-settings-panel__resume-select">
        <span class="agent-settings-panel__resume-icon">
          <svg viewBox="0 0 16 16" fill="none"><path d="M10 1H4a1.5 1.5 0 00-1.5 1.5v11A1.5 1.5 0 004 15h8a1.5 1.5 0 001.5-1.5V4.5L10 1z" stroke="currentColor" stroke-width="1"/><path d="M10 1v3.5h3.5" stroke="currentColor" stroke-width="1"/></svg>
        </span>
        <el-select
          v-model="selectedResumeId"
          placeholder="请选择简历"
          class="agent-settings-panel__select"
        >
          <el-option
            v-for="r in resumeList"
            :key="r.id"
            :label="r.resumeName"
            :value="r.id || ''"
          />
        </el-select>
      </div>

      <!-- 自动优化简历开关 -->
      <div class="agent-settings-panel__switch-row">
        <div class="agent-settings-panel__switch-text">
          <span>在投递时帮我针对岗位自动优化简历</span>
          <el-tooltip content="MVP只补充缺少技能" placement="top">
            <span class="agent-settings-panel__tip">ⓘ</span>
          </el-tooltip>
          <br/>
          <span class="agent-settings-panel__switch-sub">（MVP只补充缺少技能）</span>
        </div>
        <el-switch v-model="autoOptimizeSwitch" :active-color="accentColor" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { fetchResumeList } from '@/api/resume'
import type { ResumeListItem } from '@/api/resume'
import type { AgentConfig } from '@/api/agent'

/** 组件 Props — 接收初始配置 */
const props = defineProps<{
  initialConfig?: AgentConfig | null
}>()

/** 强调色 — 传给 el-switch 的 active-color */
const accentColor = '#4FC2C9'

/** Agent模式：1=协作模式 2=托管模式 */
const agentMode = ref(1)

/** 投递目标选项 — value 对应接口 weeklyTarget 字段 */
const weeklyTargetOptions = [
  { label: '< 20 个/周', value: 1 },
  { label: '20-50 个/周', value: 2 },
  { label: '> 50 个/周', value: 3 },
]

/** 当前选中的投递目标 */
const weeklyTarget = ref(2)

/** 简历列表 */
const resumeList = ref<ResumeListItem[]>([])

/** 当前选中的简历 ID */
const selectedResumeId = ref('')

/** 自动优化简历开关（布尔值，用于 el-switch） */
const autoOptimizeSwitch = ref(true)

/** 自动优化简历 — 转为接口需要的 integer（0=关闭 1=开启） */
const autoOptimizeResume = computed(() => autoOptimizeSwitch.value ? 1 : 0)

/** 监听初始配置 — 填充第4步表单 */
watch(() => props.initialConfig, (cfg) => {
  if (!cfg) return
  if (cfg.agentMode) agentMode.value = cfg.agentMode
  if (cfg.weeklyTarget) weeklyTarget.value = cfg.weeklyTarget
  if (cfg.autoOptimizeResume !== undefined) autoOptimizeSwitch.value = cfg.autoOptimizeResume === 1
}, { immediate: true })

/** 获取当前设置数据 — 供父组件调用 */
function getData() {
  return {
    agentMode: agentMode.value,
    weeklyTarget: weeklyTarget.value,
    autoOptimizeResume: autoOptimizeResume.value,
    defaultResumeId: selectedResumeId.value,
  }
}

/** 暴露给父组件 */
defineExpose({ getData })

/** 页面挂载时加载简历列表 */
onMounted(async () => {
  await loadResumeList()
})

/** 加载简历列表 */
async function loadResumeList() {
  try {
    const res = await fetchResumeList()
    if (res.code === '0' && res.data) {
      resumeList.value = res.data
      // 默认选中 isDefault=1 的简历，否则选第一个
      const defaultResume = res.data.find(r => r.isDefault === 1)
      if (defaultResume && defaultResume.id) {
        selectedResumeId.value = defaultResume.id
      } else if (res.data.length > 0 && res.data[0].id) {
        selectedResumeId.value = res.data[0].id
      }
    }
  } catch {
    console.error('[AgentSettingsPanel] 加载简历列表失败')
  }
}
</script>

<style scoped lang="scss">
@use '../assets/styles/components/agent-settings-panel';
</style>