AI投递助手

This commit is contained in:
2026-07-10 02:08:41 +08:00
parent cd64ded6ae
commit cf268520e1
32 changed files with 3612 additions and 2165 deletions
+374 -246
View File
@@ -1,266 +1,379 @@
<template>
<!-- 求职助手准备向导 第1步到第4步 -->
<div class="agent-page__wizard">
<!-- 个人资料编辑抽屉 -->
<ProfileEditDrawer
v-model="showEditDrawer"
:module="editModule"
:initial-data="editInitialData"
@save="handleSaveEdit"
/>
<div class="bg-f ptb16 prl24 mb16 fs18 fw600">投递准备</div>
<div>
<div class="agent-page__wizard bg-f prl32 ptb24 border-ra12 mrl24">
<!-- 顶部步骤导航条 -->
<div class="agent-page__steps">
<template v-for="(step, index) in steps" :key="index">
<div
class="agent-page__step"
:class="{ 'agent-page__step--active': currentStep === index + 1 }"
>
<span class="agent-page__step-number">{{ index + 1 }}</span>
<span class="agent-page__step-label">{{ step }}</span>
</div>
<span v-if="index < steps.length - 1" class="agent-page__step-arrow">
<svg viewBox="0 0 16 16" fill="none">
<path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</template>
</div>
<!-- 个人资料编辑抽屉 -->
<ProfileEditDrawer
v-model="showEditDrawer"
:module="editModule"
:initial-data="editInitialData"
@save="handleSaveEdit"
/>
<!-- 主体内容区域 -->
<div class="agent-page__main">
<!-- ========== 第1步确认个人资料 ========== -->
<template v-if="currentStep === 1">
<div class="agent-page__right">
<div class="agent-page__profile-wrapper">
<ProfilePageContent :profile="profile" @edit="handleEdit" @save="handleInlineSave" @exp-update="handleExpUpdate" @exp-add="handleExpAdd" @exp-delete="handleExpDelete" />
<!-- 顶部步骤导航条 -->
<div class="agent-page__steps">
<template v-for="(step, index) in steps" :key="index">
<div
class="agent-page__step"
:class="{ 'agent-page__step--active': currentStep === index + 1 }"
>
<span class="agent-page__step-number">{{ index + 1 }}</span>
<span class="agent-page__step-label">{{ step }}</span>
</div>
</div>
<div class="agent-page__left">
<div class="agent-page__intro-card">
<div class="agent-page__intro-header por">
<div v-if="false" class="agent-page__intro-icon poa l-22 t0">
<svg viewBox="0 0 24 24" fill="none"><path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z" fill="currentColor"/></svg>
<span v-if="index < steps.length - 1" class="agent-page__step-line"></span>
</template>
</div>
<!-- 主体内容区域 -->
<div class="agent-page__main">
<!-- ========== 第1步确认个人资料 ========== -->
<template v-if="currentStep === 1">
<div class="agent-page__right">
<div class="agent-page__profile-wrapper">
<ProfilePageContent :profile="profile" @edit="handleEdit" @save="handleInlineSave" @exp-update="handleExpUpdate" @exp-add="handleExpAdd" @exp-delete="handleExpDelete" />
</div>
</div>
<div class="agent-page__left">
<div class="agent-page__intro-card agent-page__intro-card--gradient">
<!-- Nova 头像 + 名称 -->
<div class="agent-page__intro-avatar-row">
<img src="@/assets/images/nova-logo-2.png" alt="Nova" class="agent-page__intro-avatar-img" />
<span class="agent-page__intro-avatar-name">Nova</span>
</div>
<!-- 标题 -->
<h2 class="agent-page__intro-title">请先确认你的个人资料是否无误</h2>
</div>
<p class="agent-page__intro-desc mb50 ">请仔细对你的资料评估包括个人信息教育背景工作履历及技能确保资料齐全让我能顺利为你开启求职之旅</p>
<div class="">
<div class="tac"><button class="agent-page__confirm-btn dib" @click="handleNext">确认并进入</button></div>
<div v-if="false" class="tac color-9 mt30 cursor-po" @click="handleBack">返回上一步</div>
<!-- 描述 -->
<p class="agent-page__intro-desc">请仔细对你的资料评估包括个人信息教育背景工作履历及技能确保资料齐全</p>
<!-- 按钮 -->
<button class="agent-page__intro-gradient-btn" @click="handleNext">下一步</button>
</div>
</div>
</div>
</template>
<!-- ========== 第2步确认目标 ========== -->
<template v-if="currentStep === 2">
<!-- 左侧求职偏好 + 简历设置 -->
<div class="agent-page__right">
<div class="agent-page__profile-wrapper">
<!-- 求职偏好区域 -->
<div class="agent-page__pref-section">
<h3 class="agent-page__pref-section-title">求职偏好</h3>
<p class="agent-page__pref-section-desc">这些是你之前设定的求职偏好如有需要请随时修改</p>
<div class="agent-page__pref-filters">
<!-- 城市选择 -->
<RegionSelector
:regionCodes="step2RegionCodes"
:level="2"
:maxSelect="3"
:triggerStyle="prefFilterTriggerStyle"
:displayStyle="prefFilterDisplayStyle"
@update:regionCodes="onStep2RegionChange"
/>
<!-- 岗位选择 -->
<JobCategorySelector
:categoryIds="step2CategoryIds"
:maxSelect="3"
:level="3"
:allowParentSelect="true"
:triggerStyle="prefFilterTriggerStyle"
:displayStyle="prefFilterDisplayStyle"
@update:categoryIds="onStep2CategoryChange"
/>
<!-- 行业选择 -->
<IndustrySelector
:industryIds="step2IndustryIds"
:maxSelect="3"
:level="2"
:allowParentSelect="true"
:triggerStyle="prefFilterTriggerStyle"
:displayStyle="prefFilterDisplayStyle"
@update:industryIds="onStep2IndustryChange"
/>
<!-- 招聘分类下拉选择 -->
<div class="agent-page__pref-type-dropdown" @click.stop="showJobTypeDropdown = !showJobTypeDropdown">
<span>{{ intentionEmploymentLabel || '类型' }}</span>
<svg class="agent-page__pref-type-arrow" viewBox="0 0 12 12" fill="none">
<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- 下拉菜单 -->
<div v-if="showJobTypeDropdown" class="agent-page__pref-type-menu" @click.stop>
<div
v-for="option in jobTypeOptions"
:key="option.value"
class="agent-page__pref-type-menu-item"
:class="{ 'agent-page__pref-type-menu-item--active': store.state.jobIntention.recruitCategory === option.value }"
@click.stop="selectJobType(option)"
>{{ option.label }}</div>
</div>
</div>
</div>
</div>
<!-- 简历设置区域 -->
<div class="agent-page__resume-section">
<h3 class="agent-page__pref-section-title">简历设置</h3>
<div class="agent-page__resume-sub-label">设置默认简历</div>
<div class="agent-page__resume-select-row">
<span class="agent-page__resume-check-icon">
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.2"/></svg>
</span>
<el-select v-model="selectedResumeId" placeholder="请选择简历" class="agent-page__resume-select">
<el-option v-for="r in resumeList" :key="r.id" :label="r.resumeName" :value="r.id || ''" />
</el-select>
</div>
<!-- 自动优化简历开关 -->
<div class="agent-page__resume-switch-row">
<span class="agent-page__resume-switch-text">在投递时帮我针对岗位自动优化简历</span>
<el-switch v-model="autoOptimizeSwitch" :active-color="'#4FC2C9'" />
</div>
<!-- 岗位匹配分析开关 -->
<div class="agent-page__resume-switch-row">
<span class="agent-page__resume-switch-text">在投递时帮我进行岗位匹配分析</span>
<el-switch v-model="autoMatchAnalysisSwitch" :active-color="'#4FC2C9'" />
</div>
</div>
</div>
</div>
<!-- 右侧确认卡片 -->
<div class="agent-page__left">
<div class="agent-page__intro-card">
<div class="agent-page__intro-header por">
<div class="agent-page__intro-icon poa l-22 t0">
<svg viewBox="0 0 24 24" fill="none"><path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z" fill="currentColor"/></svg>
</div>
<h2 class="agent-page__intro-title">接下来我想确认一下我为你搜寻的职位方向是否准确</h2>
</div>
<p class="agent-page__intro-desc mb50">请仔细对你的资料评估包括个人信息教育背景工作履历及技能确保资料齐全让我能顺利为你开启求职之旅</p>
<div class="">
<div class="tac"><button class="agent-page__confirm-btn dib" @click="handleNext">确认并进入</button></div>
<div class="tac color-9 mt30 cursor-po" @click="handleBack">返回上一步</div>
</div>
</div>
</div>
</template>
</template>
<!-- ========== 3安装插件 ========== -->
<template v-if="currentStep === 3">
<!-- 左侧安装教程内容 -->
<div class="agent-page__right">
<div class="agent-page__profile-wrapper">
<div class="agent-page__install-guide">
<h3 class="agent-page__install-guide-title">安装自动填写插件</h3>
<!-- 步骤1下载插件包 -->
<div class="agent-page__install-step">
<p class="agent-page__install-step-text">1下载下方的插件包</p>
<div class="agent-page__install-download">
<button class="agent-page__install-download-btn" @click="downloadExtension">
<span>Offer派自动投递助手.crx</span>
<svg viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M8 2v8M8 10L5 7M8 10l3-3M3 13h10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
</div>
<!-- 步骤2复制地址进入扩展程序页面 -->
<div class="agent-page__install-step">
<p class="agent-page__install-step-text">2复制右下方的蓝色地址在浏览器地址栏粘贴并进入浏览器的扩展程序页面</p>
<div class="agent-page__install-step-content">
<div class="agent-page__install-step-img">
<img src="@/assets/images/agent-setting/2-1.png" alt="地址栏示例" />
</div>
<div class="agent-page__install-browser-links">
<div class="agent-page__install-browser-item">
<img src="@/assets/images/agent-setting/2-2.png" style="width: 3rem;height: 0.3rem;" alt="Chrome" class="agent-page__install-browser-icon" />
<!-- ========== 2确认目标 ========== -->
<template v-if="currentStep === 2">
<!-- 左侧求职偏好 + 简历选择 -->
<div class="agent-page__right">
<div class="agent-page__step2-panel">
<!-- 求职偏好区域 -->
<div class="agent-page__step2-section">
<h3 class="agent-page__step2-section-title">求职偏好</h3>
<div class="agent-page__step2-filters">
<!-- 城市选择 -->
<RegionSelector
:regionCodes="step2RegionCodes"
:level="2"
:maxSelect="3"
:triggerStyle="prefFilterTriggerStyle"
:displayStyle="prefFilterDisplayStyle"
@update:regionCodes="onStep2RegionChange"
/>
<!-- 岗位选择 -->
<JobCategorySelector
:categoryIds="step2CategoryIds"
:maxSelect="3"
:level="3"
:allowParentSelect="true"
:triggerStyle="prefFilterTriggerStyle"
:displayStyle="prefFilterDisplayStyle"
@update:categoryIds="onStep2CategoryChange"
/>
<!-- 行业选择 -->
<IndustrySelector
:industryIds="step2IndustryIds"
:maxSelect="3"
:level="2"
:allowParentSelect="true"
:triggerStyle="prefFilterTriggerStyle"
:displayStyle="prefFilterDisplayStyle"
@update:industryIds="onStep2IndustryChange"
/>
<!-- 招聘分类下拉选择 -->
<div class="agent-page__pref-type-dropdown" @click.stop="showJobTypeDropdown = !showJobTypeDropdown">
<span>{{ intentionEmploymentLabel || '招聘类型' }}</span>
<svg class="agent-page__pref-type-arrow" viewBox="0 0 12 12" fill="none">
<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- 下拉菜单 -->
<div v-if="showJobTypeDropdown" class="agent-page__pref-type-menu" @click.stop>
<div
v-for="option in jobTypeOptions"
:key="option.value"
class="agent-page__pref-type-menu-item"
:class="{ 'agent-page__pref-type-menu-item--active': store.state.jobIntention.recruitCategory === option.value }"
@click.stop="selectJobType(option)"
>{{ option.label }}</div>
</div>
<a class="agent-page__install-browser-url" href="javascript:void(0)" @click="copyToClipboard('chrome://extensions')">
chrome://extensions
<svg viewBox="0 0 14 14" fill="none" width="12" height="12"><rect x="4" y="4" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1"/><path d="M10 4V3a1 1 0 00-1-1H3a1 1 0 00-1 1v6a1 1 0 001 1h1" stroke="currentColor" stroke-width="1"/></svg>
</a>
<div class="agent-page__install-browser-item mt16">
<img src="@/assets/images/agent-setting/2-3.png" style="width: 3rem;height: 0.3rem;" alt="Edge" class="agent-page__install-browser-icon" />
</div>
</div>
</div>
<!-- 简历选择区域 -->
<div class="agent-page__step2-section">
<h3 class="agent-page__step2-section-title">简历选择</h3>
<div class="agent-page__step2-filters">
<!-- 自定义简历下拉 -->
<div class="agent-page__step2-resume-dropdown" @click.stop="showResumeDropdown = !showResumeDropdown">
<span class="agent-page__step2-resume-dropdown-text">{{ selectedResumeName || '请选择简历' }}</span>
<svg class="agent-page__step2-resume-dropdown-arrow" viewBox="0 0 12 12" fill="none">
<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- 下拉菜单 -->
<div v-if="showResumeDropdown" class="agent-page__step2-resume-menu" @click.stop>
<div
v-for="r in resumeList"
:key="r.id"
class="agent-page__step2-resume-menu-item"
:class="{ 'agent-page__step2-resume-menu-item--active': selectedResumeId === r.id }"
@click.stop="selectResume(r)"
>{{ r.resumeName }}</div>
</div>
<a class="agent-page__install-browser-url" href="javascript:void(0)" @click="copyToClipboard('edge://extensions/')">
edge://extensions/
<svg viewBox="0 0 14 14" fill="none" width="12" height="12"><rect x="4" y="4" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1"/><path d="M10 4V3a1 1 0 00-1-1H3a1 1 0 00-1 1v6a1 1 0 001 1h1" stroke="currentColor" stroke-width="1"/></svg>
</a>
</div>
</div>
</div>
<!-- 步骤3打开开发人员模式 -->
<div class="agent-page__install-step">
<p class="agent-page__install-step-text">3在浏览器拓展页面中打开开发人员模式</p>
<div class="agent-page__install-step-img-row">
<div class="agent-page__install-step-img-item">
<img src="@/assets/images/agent-setting/3-1.png" alt="打开开发人员模式" />
</div>
</div>
</div>
<!-- 步骤4拖入插件包 -->
<div class="agent-page__install-step">
<p class="agent-page__install-step-text">4将下载好的离线插件包使用鼠标拖入到浏览器的扩展程序页面</p>
<div class="agent-page__install-step-img-row">
<div class="agent-page__install-step-img-item">
<img src="@/assets/images/agent-setting/4-1.png" alt="拖入插件包" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧确认卡片 -->
<div class="agent-page__left">
<div class="agent-page__intro-card">
<div class="agent-page__intro-header por">
<div class="agent-page__intro-icon poa l-22 t0">
<svg viewBox="0 0 24 24" fill="none"><path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z" fill="currentColor"/></svg>
<!-- 右侧确认卡片 -->
<div class="agent-page__left">
<div class="agent-page__intro-card agent-page__intro-card--gradient">
<!-- Nova 头像 + 名称 -->
<div class="agent-page__intro-avatar-row">
<img src="@/assets/images/nova-logo-2.png" alt="Nova" class="agent-page__intro-avatar-img" />
<span class="agent-page__intro-avatar-name">Nova</span>
</div>
<h2 class="agent-page__intro-title">现在我们来开启自动投递吧</h2>
</div>
<p class="agent-page__intro-desc mb20">简单四步安装 Chrome 扩展程序<br/>实现自动填表并一站式追踪所有申请进度</p>
<div class="agent-page__install-steps-list">
<p>1. 下载offer派自动投递助手插件包</p>
<p>2. 进入浏览器扩展程序界面</p>
<p>3. 打开扩展程序开发人员模式</p>
<p>4.拖入安装包完成安装</p>
</div>
<div class="mt30">
<div class="tac"><button class="agent-page__confirm-btn dib" @click="handleNext">我已安装</button></div>
<div class="tac color-9 mt30 cursor-po" @click="handleBack">返回上一步</div>
<!-- 标题 -->
<h2 class="agent-page__intro-title">请配置你的投递方案</h2>
<!-- 描述 -->
<p class="agent-page__intro-desc">我们会根据你的选择为你推荐最合适的投递岗位</p>
<!-- 按钮 -->
<button class="agent-page__intro-gradient-btn" @click="handleNext">下一步</button>
<button class="agent-page__intro-back-btn" @click="handleBack">上一步</button>
</div>
</div>
</div>
</template>
</template>
<!-- ========== 第4步完成配置 ========== -->
<template v-if="currentStep === 4">
<div class="agent-page__complete">
<div class="agent-page__complete-icon"><svg viewBox="0 0 80 80" fill="none"><rect x="8" y="8" width="64" height="64" rx="8" fill="#E8E8E8"/><circle cx="40" cy="32" r="8" fill="#BFBFBF"/><path d="M20 60 L32 44 L44 52 L56 36 L64 44 L64 64 L20 64Z" fill="#BFBFBF"/></svg></div>
<h2 class="agent-page__complete-title">恭喜你你的求职助手已经准备好</h2>
<p class="agent-page__complete-desc">启用求职助手后你可以随时调整求职偏好及简历信息</p>
<button class="agent-page__complete-btn" @click="handleLaunchAgent">启用求职助手开始投递</button>
</div>
</template>
<!-- ========== 第3步安装插件 ========== -->
<template v-if="currentStep === 3">
<!-- 左侧安装教程内容 -->
<div class="agent-page__right">
<div class="agent-page__profile-wrapper bg-f">
<div class="agent-page__install-guide">
<!-- 步骤1下载插件包 -->
<div class="agent-page__install-card">
<div class="agent-page__install-card-row">
<div class="agent-page__install-card-left">
<div class="agent-page__install-card-header">
<span class="agent-page__install-card-num">1</span>
<div class="agent-page__install-card-info">
<h4 class="agent-page__install-card-title">下载插件包</h4>
<p class="agent-page__install-card-desc">下载 Offer派自动投递助手安装包下载完成后由步骤 2 进入浏览器扩展页面</p>
</div>
</div>
</div>
<div class="">
<div class="agent-page__install-download-box">
<span class="agent-page__install-download-name">Offer派自动投递助手.crx</span>
<button class="agent-page__install-download-btn2" @click="downloadExtension">
<svg viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M8 2v8M8 10L5 7M8 10l3-3M3 13h10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>下载</span>
</button>
</div>
</div>
</div>
</div>
<!-- 步骤2打开扩展管理页面 -->
<div class="agent-page__install-card">
<div class="agent-page__install-card-row">
<div class="agent-page__install-card-left">
<div class="agent-page__install-card-header">
<span class="agent-page__install-card-num">2</span>
<div class="agent-page__install-card-info">
<h4 class="agent-page__install-card-title">打开扩展管理页面</h4>
<p class="agent-page__install-card-desc">在浏览器地址栏输入对应地址并回车打开扩展管理页面</p>
</div>
</div>
<!-- 浏览器地址链接 -->
<div class="agent-page__install-browser-row">
<a class="agent-page__install-browser-link" href="javascript:void(0)" @click="copyToClipboard('chrome://extensions')">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_525_3895)">
<path d="M8.00027 12.4507C10.4587 12.4507 12.4516 10.4577 12.4516 7.99929C12.4516 5.54085 10.4587 3.54785 8.00027 3.54785C5.54183 3.54785 3.54883 5.54085 3.54883 7.99929C3.54883 10.4577 5.54177 12.4507 8.0002 12.4507" fill="white"/>
<path d="M2.24303 5.81204C1.91094 5.23683 1.52061 4.63314 1.07203 4.00098C0.369757 5.21706 2.38548e-05 6.59661 1.15428e-09 8.0009C-2.38525e-05 9.4052 0.369663 10.7848 1.07189 12.0009C1.77412 13.217 2.78414 14.2268 4.0004 14.9288C5.21666 15.6307 6.59629 16.0001 8.00059 15.9998C8.73688 14.9671 9.2368 14.2225 9.50034 13.766C10.0065 12.8893 10.6612 11.6341 11.4643 10.0004V9.99941C11.1134 10.6077 10.6086 11.113 10.0005 11.4643C9.39241 11.8156 8.70256 12.0006 8.0003 12.0007C7.29804 12.0008 6.60813 11.816 5.99995 11.4649C5.39178 11.1138 4.88677 10.6087 4.53571 10.0005C3.44496 7.96623 2.68073 6.57004 2.24303 5.81204Z" fill="#229342"/>
<path d="M8.00046 16.0002C9.05106 16.0004 10.0914 15.7936 11.0621 15.3916C12.0327 14.9896 12.9147 14.4003 13.6575 13.6574C14.4004 12.9145 14.9896 12.0325 15.3915 11.0619C15.7935 10.0912 16.0002 9.05084 16 8.00024C15.9997 6.59593 15.6297 5.21644 14.9273 4.00043C13.4118 3.85105 12.2933 3.77637 11.5719 3.77637C10.7539 3.77637 9.56323 3.85105 7.9999 4.00043L7.99902 4.00105C8.7013 4.00071 9.39128 4.18529 9.99958 4.53623C10.6079 4.88717 11.113 5.39211 11.4643 6.00024C11.8155 6.60838 12.0004 7.29828 12.0004 8.00056C12.0004 8.70284 11.8155 9.39274 11.4642 10.0009L8.00046 16.0002Z" fill="#FBC116"/>
<path d="M8.00037 11.1677C9.74937 11.1677 11.1672 9.74992 11.1672 8.00086C11.1672 6.2518 9.74937 4.83398 8.00031 4.83398C6.25137 4.83398 4.8335 6.25186 4.8335 8.00086C4.8335 9.74986 6.25137 11.1677 8.00037 11.1677Z" fill="#1A73E8"/>
<path d="M8.00027 4.00027H14.9276C14.2256 2.78399 13.2158 1.77397 11.9997 1.07176C10.7835 0.369547 9.40396 -9.50021e-05 7.99965 1.83149e-08C6.59534 9.50388e-05 5.21581 0.369924 3.99978 1.0723C2.78374 1.77467 1.77406 2.78484 1.07227 4.00121L4.53595 10.0006L4.53689 10.0011C4.18549 9.39306 4.00037 8.70322 4.00017 8.00095C3.99996 7.29868 4.18467 6.60873 4.53571 6.0005C4.88676 5.39226 5.39177 4.88718 5.99995 4.53605C6.60814 4.18491 7.29806 4.0001 8.00033 4.00021L8.00027 4.00027Z" fill="#E33B2E"/>
</g>
<defs>
<clipPath id="clip0_525_3895">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
<span class="agent-page__install-browser-link-label">Chrome浏览器chrome://extensions</span>
<span class="agent-page__install-browser-link-copy">
<svg viewBox="0 0 14 14" fill="none" width="12" height="12"><rect x="4" y="4" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1"/><path d="M10 4V3a1 1 0 00-1-1H3a1 1 0 00-1 1v6a1 1 0 001 1h1" stroke="currentColor" stroke-width="1"/></svg>
复制
</span>
</a>
<a class="agent-page__install-browser-link" href="javascript:void(0)" @click="copyToClipboard('edge://extensions')">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_525_3912)">
<path d="M14.4377 11.9059C14.2252 12.0184 14.0064 12.1184 13.7814 12.1996C13.0627 12.4684 12.3064 12.6059 11.5377 12.6059C8.58145 12.6059 6.00645 10.5746 6.00645 7.96211C6.0127 7.24961 6.40645 6.59336 7.03145 6.25586C4.35645 6.36836 3.66895 9.15586 3.66895 10.7871C3.66895 15.4059 7.9252 15.8746 8.84395 15.8746C9.3377 15.8746 10.0814 15.7309 10.5314 15.5871L10.6127 15.5621C12.3377 14.9684 13.8002 13.8059 14.7752 12.2621C14.8502 12.1434 14.8127 11.9934 14.7002 11.9184C14.6189 11.8684 14.5189 11.8621 14.4377 11.9059Z" fill="url(#paint0_linear_525_3912)"/>
<path opacity="0.35" d="M14.4377 11.9059C14.2252 12.0184 14.0064 12.1184 13.7814 12.1996C13.0627 12.4684 12.3064 12.6059 11.5377 12.6059C8.58145 12.6059 6.00645 10.5746 6.00645 7.96211C6.0127 7.24961 6.40645 6.59336 7.03145 6.25586C4.35645 6.36836 3.66895 9.15586 3.66895 10.7871C3.66895 15.4059 7.9252 15.8746 8.84395 15.8746C9.3377 15.8746 10.0814 15.7309 10.5314 15.5871L10.6127 15.5621C12.3377 14.9684 13.8002 13.8059 14.7752 12.2621C14.8502 12.1434 14.8127 11.9934 14.7002 11.9184C14.6189 11.8684 14.5189 11.8621 14.4377 11.9059Z" fill="url(#paint1_radial_525_3912)"/>
<path d="M6.60629 15.0877C6.05004 14.7439 5.56879 14.2877 5.18754 13.7564C3.54379 11.5064 4.03754 8.3502 6.28754 6.70645C6.52504 6.5377 6.76879 6.38145 7.03129 6.25645C7.22504 6.1627 7.55629 6.0002 8.00004 6.00645C8.63129 6.0127 9.22504 6.3127 9.60629 6.81895C9.85629 7.15645 10 7.5627 10.0063 7.9877C10.0063 7.9752 11.5375 3.0127 5.00629 3.0127C2.26254 3.0127 0.00628588 5.61895 0.00628588 7.9002C-0.00621412 9.10645 0.256286 10.3064 0.762536 11.4002C2.48754 15.0752 6.68754 16.8752 10.5375 15.5939C9.21879 16.0064 7.78129 15.8252 6.60629 15.0877Z" fill="url(#paint2_linear_525_3912)"/>
<path opacity="0.41" d="M6.60629 15.0877C6.05004 14.7439 5.56879 14.2877 5.18754 13.7564C3.54379 11.5064 4.03754 8.3502 6.28754 6.70645C6.52504 6.5377 6.76879 6.38145 7.03129 6.25645C7.22504 6.1627 7.55629 6.0002 8.00004 6.00645C8.63129 6.0127 9.22504 6.3127 9.60629 6.81895C9.85629 7.15645 10 7.5627 10.0063 7.9877C10.0063 7.9752 11.5375 3.0127 5.00629 3.0127C2.26254 3.0127 0.00628588 5.61895 0.00628588 7.9002C-0.00621412 9.10645 0.256286 10.3064 0.762536 11.4002C2.48754 15.0752 6.68754 16.8752 10.5375 15.5939C9.21879 16.0064 7.78129 15.8252 6.60629 15.0877Z" fill="url(#paint3_radial_525_3912)"/>
<path d="M9.51875 9.30625C9.46875 9.36875 9.3125 9.4625 9.3125 9.6625C9.3125 9.825 9.41875 9.98125 9.60625 10.1125C10.5062 10.7375 12.2 10.6562 12.2063 10.6562C12.875 10.6562 13.525 10.475 14.1 10.1375C15.275 9.45 16 8.19375 16 6.83125C16.0187 5.43125 15.5 4.5 15.2937 4.0875C13.9688 1.49375 11.1062 0 8 0C3.625 0 0.0625 3.5125 0 7.8875C0.03125 5.60625 2.3 3.7625 5 3.7625C5.21875 3.7625 6.46875 3.78125 7.625 4.39375C8.64375 4.93125 9.18125 5.575 9.55 6.21875C9.9375 6.8875 10.0063 7.725 10.0063 8.0625C10.0063 8.39375 9.8375 8.89375 9.51875 9.30625Z" fill="url(#paint4_radial_525_3912)"/>
<path d="M9.51875 9.30625C9.46875 9.36875 9.3125 9.4625 9.3125 9.6625C9.3125 9.825 9.41875 9.98125 9.60625 10.1125C10.5062 10.7375 12.2 10.6562 12.2063 10.6562C12.875 10.6562 13.525 10.475 14.1 10.1375C15.275 9.45 16 8.19375 16 6.83125C16.0187 5.43125 15.5 4.5 15.2937 4.0875C13.9688 1.49375 11.1062 0 8 0C3.625 0 0.0625 3.5125 0 7.8875C0.03125 5.60625 2.3 3.7625 5 3.7625C5.21875 3.7625 6.46875 3.78125 7.625 4.39375C8.64375 4.93125 9.18125 5.575 9.55 6.21875C9.9375 6.8875 10.0063 7.725 10.0063 8.0625C10.0063 8.39375 9.8375 8.89375 9.51875 9.30625Z" fill="url(#paint5_radial_525_3912)"/>
</g>
<defs>
<linearGradient id="paint0_linear_525_3912" x1="3.6692" y1="11.0634" x2="14.8119" y2="11.0634" gradientUnits="userSpaceOnUse">
<stop stop-color="#0C59A4"/>
<stop offset="1" stop-color="#114A8B"/>
</linearGradient>
<radialGradient id="paint1_radial_525_3912" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.82468 11.1519) scale(5.96065 5.662)">
<stop offset="0.72" stop-opacity="0"/>
<stop offset="0.95" stop-opacity="0.53"/>
<stop offset="1"/>
</radialGradient>
<linearGradient id="paint2_linear_525_3912" x1="9.54822" y1="6.23432" x2="2.58741" y2="13.8163" gradientUnits="userSpaceOnUse">
<stop stop-color="#1B9DE2"/>
<stop offset="0.16" stop-color="#1595DF"/>
<stop offset="0.67" stop-color="#0680D7"/>
<stop offset="1" stop-color="#0078D4"/>
</linearGradient>
<radialGradient id="paint3_radial_525_3912" cx="0" cy="0" r="1" gradientTransform="matrix(1.34287 -8.86118 7.162 1.0743 4.41307 12.4383)" gradientUnits="userSpaceOnUse">
<stop offset="0.76" stop-opacity="0"/>
<stop offset="0.95" stop-opacity="0.5"/>
<stop offset="1"/>
</radialGradient>
<radialGradient id="paint4_radial_525_3912" cx="0" cy="0" r="1" gradientTransform="matrix(-0.506075 12.6493 -26.9472 -1.0119 1.61573 2.96205)" gradientUnits="userSpaceOnUse">
<stop stop-color="#35C1F1"/>
<stop offset="0.11" stop-color="#34C1ED"/>
<stop offset="0.23" stop-color="#2FC2DF"/>
<stop offset="0.31" stop-color="#2BC3D2"/>
<stop offset="0.67" stop-color="#36C752"/>
</radialGradient>
<radialGradient id="paint5_radial_525_3912" cx="0" cy="0" r="1" gradientTransform="matrix(1.70345 5.83918 -4.74533 1.39926 15.0038 4.83786)" gradientUnits="userSpaceOnUse">
<stop stop-color="#66EB6E"/>
<stop offset="1" stop-color="#66EB6E" stop-opacity="0"/>
</radialGradient>
<clipPath id="clip0_525_3912">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
<span class="agent-page__install-browser-link-label">Edge浏览器edge://extensions</span>
<span class="agent-page__install-browser-link-copy">
<svg viewBox="0 0 14 14" fill="none" width="12" height="12"><rect x="4" y="4" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1"/><path d="M10 4V3a1 1 0 00-1-1H3a1 1 0 00-1 1v6a1 1 0 001 1h1" stroke="currentColor" stroke-width="1"/></svg>
复制
</span>
</a>
</div>
</div>
<div class="agent-page__install-card-right">
<img src="@/assets/images/agent-setting/2-1.png" alt="输入扩展地址" class="agent-page__install-card-img" />
</div>
</div>
</div>
<!-- 步骤3打开开发者模式 -->
<div class="agent-page__install-card">
<div class="agent-page__install-card-row">
<div class="agent-page__install-card-left">
<div class="agent-page__install-card-header">
<span class="agent-page__install-card-num">3</span>
<div class="agent-page__install-card-info">
<h4 class="agent-page__install-card-title">打开开发者模式</h4>
<p class="agent-page__install-card-desc">在扩展管理页面的右上角找到开发者模式开关并打开</p>
</div>
</div>
</div>
<div class="agent-page__install-card-right">
<img src="@/assets/images/agent-setting/3-1.png" alt="打开开发者模式" class="agent-page__install-card-img" />
</div>
</div>
</div>
<!-- 步骤4将CRX安装包拖入安装 -->
<div class="agent-page__install-card">
<div class="agent-page__install-card-row">
<div class="agent-page__install-card-left">
<div class="agent-page__install-card-header">
<span class="agent-page__install-card-num">4</span>
<div class="agent-page__install-card-info">
<h4 class="agent-page__install-card-title"> CRX 安装包拖入安装</h4>
<p class="agent-page__install-card-desc">直接将下载好的CRX文件拖拽到扩展管理页面中浏览器会自动识别并安装插件</p>
</div>
</div>
</div>
<div class="agent-page__install-card-right">
<img src="@/assets/images/agent-setting/4-1.png" alt="拖入安装" class="agent-page__install-card-img" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧确认卡片 -->
<div class="agent-page__left">
<div class="agent-page__intro-card agent-page__intro-card--gradient">
<!-- Nova 头像 + 名称 -->
<div class="agent-page__intro-avatar-row">
<img src="@/assets/images/nova-logo-2.png" alt="Nova" class="agent-page__intro-avatar-img" />
<span class="agent-page__intro-avatar-name">Nova</span>
</div>
<!-- 标题 -->
<h2 class="agent-page__intro-title">安装浏览器自动投递插件</h2>
<!-- 描述 -->
<p class="agent-page__intro-desc">按照左侧步骤完成插件安装即可开启自动投递功能</p>
<!-- 按钮 -->
<button class="agent-page__intro-gradient-btn" @click="handleNext">下一步</button>
<button class="agent-page__intro-back-btn" @click="handleBack">上一步</button>
</div>
</div>
</template>
<!-- ========== 第4步完成配置 ========== -->
<template v-if="currentStep === 4">
<div class="agent-page__complete">
<div class="agent-page__complete-icon"><svg viewBox="0 0 80 80" fill="none"><rect x="8" y="8" width="64" height="64" rx="8" fill="#E8E8E8"/><circle cx="40" cy="32" r="8" fill="#BFBFBF"/><path d="M20 60 L32 44 L44 52 L56 36 L64 44 L64 64 L20 64Z" fill="#BFBFBF"/></svg></div>
<h2 class="agent-page__complete-title">恭喜求职助手已经准备好</h2>
<p class="agent-page__complete-desc">启用求职助手后你可以随时调整求职偏好和简历信息</p>
<button class="agent-page__complete-btn" @click="handleLaunchAgent">启用求职助手开始投递</button>
</div>
</template>
</div>
<!-- 求职目标设置弹窗 -->
<JobGoalDialog v-model="showJobGoalDialog" />
</div>
<!-- 功能说明 独立区块仅第2步显示 -->
<div v-if="currentStep === 2" class="agent-page__step2-faq mrl24 mt16">
<h3 class="agent-page__step2-faq-title">功能说明</h3>
<div class="agent-page__step2-faq-item">
<div class="agent-page__step2-faq-item-title">为什么要选择求职偏好</div>
<div class="agent-page__step2-faq-item-desc">城市岗位行业和招聘类型会影响岗位推荐范围系统会优先筛选更符合你目标的投递机会</div>
</div>
<div class="agent-page__step2-faq-item">
<div class="agent-page__step2-faq-item-title">为什么要选择简历</div>
<div class="agent-page__step2-faq-item-desc">AI会基于你选择的简历进行岗位匹配度分析差距识别和岗位专属优化帮助提升投递成功率</div>
</div>
<div class="agent-page__step2-faq-item">
<div class="agent-page__step2-faq-item-title">这些设置会影响后续哪些功能</div>
<div class="agent-page__step2-faq-item-desc">会影响推荐岗位匹配度评分简历优化方向自动投递队列和投递进度记录</div>
</div>
<div class="agent-page__step2-faq-item">
<div class="agent-page__step2-faq-item-title">设置后还能修改吗</div>
<div class="agent-page__step2-faq-item-desc">可以随时调整修改后系统会根据新的偏好和简历重新推荐结果</div>
</div>
</div>
<!-- 求职目标设置弹窗 -->
<JobGoalDialog v-model="showJobGoalDialog" />
</div>
</template>
@@ -295,7 +408,7 @@ const emit = defineEmits<{
}>()
// ==================== 步骤导航 ====================
const steps = ['确认个人资料', '确认目标', '安装插件', '配置求职助手']
const steps = ['确认个人资料', '配置投递方案', '安装浏览器插件', '开启投递助手']
const currentStep = ref(1)
/** 进入下一步 */
@@ -546,6 +659,20 @@ const intentionEmploymentLabel = computed(() => formatEmploymentType(store.state
const jobTypeOptions = JOB_TYPE_OPTIONS
/** 招聘分类下拉是否展开 */
const showJobTypeDropdown = ref(false)
/** 简历下拉是否展开 */
const showResumeDropdown = ref(false)
/** 当前选中简历名称 */
const selectedResumeName = computed(() => {
const item = resumeList.value.find(r => r.id === selectedResumeId.value)
return item ? item.resumeName : ''
})
/** 选中简历 */
function selectResume(r: { id?: string; resumeName?: string }) {
selectedResumeId.value = r.id || ''
showResumeDropdown.value = false
}
/** 选中招聘分类 */
function selectJobType(option: { label: string; value: number }) {
@@ -563,19 +690,20 @@ const step2IndustryIds = computed<number[]>(() => store.state.jobIntention.indus
/** 第2步:筛选组件统一触发按钮样式 — 大圆角胶囊按钮 */
const prefFilterTriggerStyle = {
padding: '0.1rem 0.28rem',
borderRadius: '0.24rem',
padding: '0.12rem 0.16rem',
borderRadius: '0.12rem',
fontSize: '0.14rem',
background: '#F5FAF9',
border: '1px solid #e0e0e0',
background: '#F3F4F6',
border: 'none',
minWidth: '0.9rem',
justifyContent: 'center',
height: '0.38rem',
height: '0.43rem',
boxSizing: 'border-box',
}
/** 第2步:筛选组件显示文字样式 */
const prefFilterDisplayStyle = {
maxWidth: 'none',
color: '#6A7282',
}
/** 第2步:地区选择变更 */