offerpai/offerpai_web
7
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

3个需求处理和插件通信组件引入（和插件共用的一个ts）

Browse Source
This commit is contained in:
xuxin
2026-07-15 09:49:21 +08:00
parent 66026f211c
commit 0911760e27
26 changed files with 1100 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AgentSetupWizard.vue
+64 -171
View File
@@ -48,6 +48,7 @@
<p class="agent-page__intro-desc">请仔细对你的资料评估（包括个人信息、教育背景、工作履历及技能），确保资料齐全</p>
<!-- 按钮 -->
<button class="agent-page__intro-gradient-btn" @click="handleNext">下一步</button>
</div>
</div>
@@ -163,164 +164,7 @@
<!-- 左侧：安装教程内容 -->
<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>
<AgentBrowserInstallGuide ref="browserInstallGuideRef" />
</div>
</div>
<!-- 右侧：确认卡片 -->
@@ -335,8 +179,14 @@
<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 v-if="plugIsOnline" class="agent-page__intro-gradient-btn" @click="handleNext">下一步</button>
<button v-else class="agent-page__intro-gradient-btn" @click="handleInstallConfirm">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.625 10.2117V11.0417C0.625 11.7047 0.888392 12.3406 1.35723 12.8094C1.82607 13.2783 2.46196 13.5417 3.125 13.5417H11.4583C12.1214 13.5417 12.7573 13.2783 13.2261 12.8094C13.6949 12.3406 13.9583 11.7047 13.9583 11.0417V10.2083M7.29167 0.625V9.79167M4.375 6.875L7.29167 9.79167L10.2083 6.875" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
下载插件
</button>
<button class="agent-page__intro-back-btn" @click="handleBack">上一步</button>
</div>
</div>
@@ -357,6 +207,31 @@
<!-- 求职目标设置弹窗 -->
<JobGoalDialog v-model="showJobGoalDialog" />
<!-- 插件安装确认弹窗 -->
<Teleport to="body">
<div v-if="showInstallDialog" class="agent-page__install-dialog-overlay" @click.self="showInstallDialog = false">
<div class="agent-page__install-dialog">
<!-- 渐变背景 -->
<div class="agent-page__install-dialog-bg"></div>
<!-- 关闭按钮 -->
<div class="agent-page__install-dialog-close" @click="showInstallDialog = false">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M18 6L6 18M6 6l12 12" stroke="#6A7282" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- 标题 -->
<h3 class="agent-page__install-dialog-title">插件是否已安装成功？</h3>
<!-- 描述 -->
<p class="agent-page__install-dialog-desc">智能投递助手需要配合浏览器插件使用<br/>请确认插件已成功安装并启用<br/>否则将无法正常进行自动填写和投递</p>
<!-- 底部按钮 -->
<div class="agent-page__install-dialog-btns">
<button class="agent-page__install-dialog-btn agent-page__install-dialog-btn--outline" @click="showInstallDialog = false">还未安装</button>
<button class="agent-page__install-dialog-btn agent-page__install-dialog-btn--primary" @click="handleInstallConfirmReload">已安装，继续</button>
</div>
</div>
</div>
</Teleport>
</div>
<!-- 功能说明 — 独立区块，仅第2步显示 -->
<div v-if="currentStep === 2" class="agent-page__step2-faq mrl24 mt16">
@@ -391,6 +266,7 @@ import JobGoalDialog from '@/components/JobGoalDialog.vue'
import RegionSelector from '@/components/tools/RegionSelector.vue'
import JobCategorySelector from '@/components/tools/JobCategorySelector.vue'
import IndustrySelector from '@/components/tools/IndustrySelector.vue'
import AgentBrowserInstallGuide from '@/components/AgentBrowserInstallGuide.vue'
import { saveProfile, saveEducation, saveWork, saveInternship, saveProject, saveCompetition, fetchProfile, fetchEducation, fetchWork, fetchInternship, fetchProject, fetchCompetition } from '@/api/profile'
import type { SaveEducationItem, SaveWorkItem, SaveProjectItem, SaveCompetitionItem } from '@/api/profile'
import { fetchResumeList, setDefaultResume } from '@/api/resume'
@@ -434,6 +310,13 @@ const editInitialData = ref<Record<string, any>>({})
// ==================== 个人档案数据 ====================
onMounted(async () => {
// 恢复刷新前保存的步骤号
const savedStep = sessionStorage.getItem('wizardStep')
if (savedStep) {
currentStep.value = Number(savedStep)
sessionStorage.removeItem('wizardStep')
}
if (!store.state.regions.length) store.dispatch('loadCommonData')
store.dispatch('loadJobIntention')
await loadProfile()
@@ -444,6 +327,10 @@ onMounted(async () => {
await loadCompetition()
})
// ==================== 通信桥接：插件在线状态从 store 全局获取 ====================
/** 插件是否在线（从 vuex 全局状态读取） */
const plugIsOnline = computed(() => store.state.plugIsOnline)
async function loadProfile() {
try {
const res = await fetchProfile()
@@ -763,19 +650,25 @@ watch(selectedResumeId, async (newId, oldId) => {
})
// ==================== 第3步：安装插件 ====================
/** 插件下载地址 */
const extensionDownloadUrl = 'https://offerpie.oss-cn-guangzhou.aliyuncs.com/extension/chrome-mv3-prod.rar'
/** 下载插件 */
function downloadExtension() { window.open(extensionDownloadUrl, '_blank') }
/** 浏览器插件安装指引组件引用 */
const browserInstallGuideRef = ref<InstanceType<typeof AgentBrowserInstallGuide> | null>(null)
/** 复制文本到剪贴板 */
function copyToClipboard(text: string) {
navigator.clipboard.writeText(text).then(() => {
ElMessage.success('已复制到剪贴板')
}).catch(() => {
ElMessage.error('复制失败，请手动复制')
})
/** 插件安装确认弹窗 */
const showInstallDialog = ref(false)
/** 点击"下载插件"：下载插件文件 + 弹出安装确认弹窗 */
function handleInstallConfirm() {
// 触发下载插件文件
browserInstallGuideRef.value?.downloadExtension()
// 显示安装确认弹窗
showInstallDialog.value = true
}
/** 点击"已安装，继续"：保存步骤 + 刷新页面 */
function handleInstallConfirmReload() {
sessionStorage.setItem('wizardStep', String(currentStep.value))
location.reload()
}
// ==================== 第4步：配置求职助手 ====================