From 0e5c7d14d0723106cfbe5c4f3ed5e5b0d0acfa8b Mon Sep 17 00:00:00 2001 From: xuxin <15279969124@163.com> Date: Fri, 10 Jul 2026 10:01:07 +0800 Subject: [PATCH] =?UTF-8?q?AI=E6=8A=95=E9=80=92=E5=8A=A9=E6=89=8B=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/auto.scss | 2 + .../components/agent-setting-panel.scss | 231 ++++++++++++++++++ src/assets/styles/pages/agent.scss | 158 ++++++++++++ src/components/AgentSettingPanel.vue | 193 ++++++++++++++- src/views/Agent.vue | 117 +++++++-- 5 files changed, 671 insertions(+), 30 deletions(-) diff --git a/src/assets/styles/auto.scss b/src/assets/styles/auto.scss index 77599d3..76768b8 100644 --- a/src/assets/styles/auto.scss +++ b/src/assets/styles/auto.scss @@ -917,6 +917,8 @@ body:not(#_) { .w192{width: 1.92rem;} .w200{width: 2rem;} .w244{width: 2.44rem;} +.w263{width: 2.63rem;} +.w444{width: 4.44rem;} .w1200{width:12rem} /*height*/ diff --git a/src/assets/styles/components/agent-setting-panel.scss b/src/assets/styles/components/agent-setting-panel.scss index 914bd75..48a9ef6 100644 --- a/src/assets/styles/components/agent-setting-panel.scss +++ b/src/assets/styles/components/agent-setting-panel.scss @@ -392,3 +392,234 @@ } } } + +// ==================== 浏览器插件安装教程抽屉 ==================== + +/* 遮罩层 */ +.agent-browser-guide-mask { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: var(--app-height, 100vh); + background: rgba(0, 0, 0, 0.3); + z-index: 2000; + display: flex; + justify-content: flex-end; +} + +/* 抽屉主体 */ +.agent-browser-guide-drawer { + width: 9.6rem; + max-width: 9.6rem; + height: var(--app-height, 100vh); + background: $bg-white; + display: flex; + flex-direction: column; + font-size: 0.14rem; + box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08); + + /* 顶部标题栏 */ + &__header { + display: flex; + align-items: center; + padding: 0.2rem 0.24rem; + height: 0.64rem; + box-sizing: border-box; + } + + &__header-left { + display: flex; + align-items: center; + gap: 0.16rem; + } + + &__close { + width: 0.24rem; + height: 0.24rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + } + + &__close-icon { + width: 0.24rem; + height: 0.24rem; + color: $text-middle; + } + + &__title { + font-size: 0.18rem; + font-weight: 520; + color: $text-dark; + line-height: 0.24rem; + } + + /* 内容区域 */ + &__body { + flex: 1; + overflow-y: auto; + padding: 0 0.32rem 0.32rem; + display: flex; + flex-direction: column; + gap: 0.16rem; + } + + /* 步骤卡片 */ + &__card { + border: 1px solid #F0F0F0; + border-radius: 0.12rem; + padding: 0.16rem 0.2rem; + } + + &__step-row { + display: flex; + align-items: flex-start; + gap: 0.12rem; + margin-bottom: 0.16rem; + } + + &__step-num { + display: flex; + justify-content: center; + align-items: center; + width: 0.32rem; + height: 0.32rem; + background: #EDF9FA; + border-radius: 0.08rem; + font-size: 0.18rem; + font-weight: 520; + color: $accent; + flex-shrink: 0; + } + + &__step-info { + flex: 1; + } + + &__step-title { + font-size: 0.18rem; + font-weight: 520; + color: $text-dark; + line-height: 0.24rem; + margin: 0 0 0.04rem; + } + + &__step-desc { + font-size: 0.14rem; + font-weight: 330; + color: $text-middle; + line-height: 0.19rem; + margin: 0; + } + + /* 下载按钮区域 */ + &__download-box { + display: flex; + align-items: center; + gap: 0.16rem; + padding: 0.04rem 0.04rem 0.04rem 0.16rem; + background: $bg-main; + border-radius: 0.12rem; + height: 0.44rem; + } + + &__download-name { + font-size: 0.14rem; + font-weight: 450; + color: $text-dark; + line-height: 0.19rem; + } + + &__download-btn { + display: flex; + align-items: center; + gap: 0.04rem; + padding: 0.08rem 0.12rem; + background: $accent; + border: none; + border-radius: 0.08rem; + color: $bg-white; + font-size: 0.14rem; + font-weight: 520; + cursor: pointer; + transition: background 0.2s; + + &:hover { + background: $accent-hover; + } + } + + /* 浏览器链接区域 */ + &__browser-links { + display: flex; + align-items: flex-start; + gap: 0.24rem; + margin-bottom: 0.16rem; + } + + &__browser-link { + display: flex; + align-items: center; + gap: 0.04rem; + padding: 0.12rem 0.16rem; + background: $bg-white; + border: 1px solid #F0F0F0; + border-radius: 0.08rem; + font-size: 0.14rem; + font-weight: 450; + color: $text-middle; + cursor: pointer; + transition: border-color 0.2s; + + &:hover { + border-color: $accent; + } + + svg { + flex-shrink: 0; + } + + span { + white-space: nowrap; + } + } + + &__copy-btn { + display: flex; + align-items: center; + gap: 0.04rem; + color: $accent; + font-size: 0.14rem; + font-weight: 450; + margin-left: 0.12rem; + } + + /* 步骤示意图 */ + &__step-img { + width: 100%; + max-width: 4rem; + border-radius: 0.08rem; + margin-top: 0.12rem; + } +} + +/* 抽屉动画 */ +.agent-browser-guide-drawer-enter-active, +.agent-browser-guide-drawer-leave-active { + transition: opacity 0.3s ease; + + .agent-browser-guide-drawer { + transition: transform 0.3s ease; + } +} + +.agent-browser-guide-drawer-enter-from, +.agent-browser-guide-drawer-leave-to { + opacity: 0; + + .agent-browser-guide-drawer { + transform: translateX(100%); + } +} diff --git a/src/assets/styles/pages/agent.scss b/src/assets/styles/pages/agent.scss index 29d0688..7fcf3f0 100644 --- a/src/assets/styles/pages/agent.scss +++ b/src/assets/styles/pages/agent.scss @@ -1710,3 +1710,161 @@ } } } + +// ==================== 简历预览抽屉 ==================== + +/* 遮罩层 */ +.agent-resume-drawer-mask { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: var(--app-height, 100vh); + background: rgba(0, 0, 0, 0.3); + z-index: 2000; + display: flex; + justify-content: flex-end; +} + +/* 抽屉主体 */ +.agent-resume-drawer { + width: 9.6rem; + max-width: 9.6rem; + height: var(--app-height, 100vh); + background: $bg-white; + display: flex; + flex-direction: column; + font-size: 0.14rem; + box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08); + + /* 顶部标题栏 */ + &__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.2rem 0.24rem; + height: 0.64rem; + box-sizing: border-box; + border-bottom: 1px solid $border-color; + } + + &__header-left { + display: flex; + align-items: center; + gap: 0.16rem; + } + + /* 关闭按钮 */ + &__close { + width: 0.24rem; + height: 0.24rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + } + + &__close-icon { + width: 0.24rem; + height: 0.24rem; + color: $text-middle; + } + + /* 标题文字 */ + &__title { + font-size: 0.18rem; + font-weight: 520; + color: $text-dark; + line-height: 0.24rem; + } + + /* 匹配分提示区域 */ + &__score-info { + display: flex; + align-items: center; + gap: 0.16rem; + } + + &__score-tip { + font-size: 0.13rem; + font-weight: 400; + color: $text-dark; + line-height: 0.2rem; + background: #F0FAFB; + border-radius: 0.08rem; + padding: 0.06rem 0.12rem; + } + + &__score-old { + font-weight: 630; + color: $accent; + } + + &__score-new { + font-weight: 630; + color: $accent; + } + + /* 匹配度环 */ + &__score-ring { + position: relative; + width: 0.56rem; + height: 0.56rem; + flex-shrink: 0; + } + + &__ring-svg { + width: 100%; + height: 100%; + } + + &__ring-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + align-items: center; + line-height: 1; + } + + &__ring-number { + font-size: 0.16rem; + font-weight: 630; + color: $text-dark; + } + + &__ring-label { + font-size: 0.08rem; + font-weight: 400; + color: $text-middle; + margin-top: 0.02rem; + } + + /* 内容区域（可滚动） */ + &__body { + flex: 1; + overflow-y: auto; + padding: 0.24rem; + } +} + +/* 抽屉动画 */ +.agent-resume-drawer-enter-active, +.agent-resume-drawer-leave-active { + transition: opacity 0.3s ease; + + .agent-resume-drawer { + transition: transform 0.3s ease; + } +} + +.agent-resume-drawer-enter-from, +.agent-resume-drawer-leave-to { + opacity: 0; + + .agent-resume-drawer { + transform: translateX(100%); + } +} diff --git a/src/components/AgentSettingPanel.vue b/src/components/AgentSettingPanel.vue index 3ba5ce6..f95eee1 100644 --- a/src/components/AgentSettingPanel.vue +++ b/src/components/AgentSettingPanel.vue @@ -231,6 +231,164 @@ + + + + +
+
+ +
+
+
+ + + +
+ 安装浏览器插件教程 +
+
+ + +
+ +
+
+ 1 +
+

下载插件包

+

下载 Offer派自动投递助手安装包，下载完成后由步骤 2 进入浏览器扩展页面

+
+
+
+ Offer派自动投递助手.crx + +
+
+ + +
+
+ 2 +
+

打开扩展管理页面

+

在浏览器地址栏输入对应地址并回车，打开扩展管理页面

+
+
+ +
+
+ + + + + + + + + + + + + + + Chrome浏览器：chrome://extensions + + + 复制 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Edge浏览器：edge://extensions + + + 复制 + +
+
+ + 输入扩展地址 +
+ + +
+
+ 3 +
+

打开开发者模式

+

在扩展管理页面的右上角，找到「开发者模式」开关并打开

+
+
+ + 打开开发者模式 +
+ + +
+
+ 4 +
+

将 CRX 安装包拖入安装

+

直接将下载好的CRX文件拖拽到扩展管理页面中，浏览器会自动识别并安装插件

+
+
+ + 拖入安装 +
+
+
+
+ + @@ -500,13 +658,34 @@ async function handleSavePreference() { // ==================== 浏览器插件 ==================== -/** 打开浏览器安装指引 */ -function openBrowserGuide(browser: string) { - if (browser === 'chrome') { - ElMessage.info('请复制地址 chrome://extensions 到浏览器打开') - } else { - ElMessage.info('请复制地址 edge://extensions/ 到浏览器打开') - } +/** 浏览器插件安装教程抽屉是否显示 */ +const showBrowserGuideDrawer = ref(false) + +/** 插件下载地址 */ +const extensionDownloadUrl = 'https://offerpie.oss-cn-guangzhou.aliyuncs.com/extension/chrome-mv3-prod.rar' + +/** 打开浏览器安装指引抽屉 */ +function openBrowserGuide(_browser: string) { + showBrowserGuideDrawer.value = true +} + +/** 关闭浏览器安装指引抽屉 */ +function closeBrowserGuideDrawer() { + showBrowserGuideDrawer.value = false +} + +/** 下载插件 */ +function downloadExtension() { + window.open(extensionDownloadUrl, '_blank') +} + +/** 复制文本到剪贴板 */ +function copyToClipboard(text: string) { + navigator.clipboard.writeText(text).then(() => { + ElMessage.success('已复制到剪贴板') + }).catch(() => { + ElMessage.error('复制失败，请手动复制') + }) } // ==================== 初始化 ==================== diff --git a/src/views/Agent.vue b/src/views/Agent.vue index 6f94439..9e9e0ec 100644 --- a/src/views/Agent.vue +++ b/src/views/Agent.vue @@ -169,13 +169,7 @@ - -
- -
- -
-
+ @@ -193,6 +187,56 @@ @remove="handleJobPreviewRemove" @update:visible="(val: boolean) => showJobPreviewDrawer = val" /> + + + + +
+
+ +
+
+
+ + + +
+ 岗位专属优化简历 +
+ +
+ + 🎉 恭喜！你的简历匹配值 +
+ 从{{ resumeScoreBefore }}分 + 提升到了{{ resumeScoreAfter }}分！ + + +
+ + + + +
+ {{ resumeScoreAfter }} + {{ resumeScoreAfter >= 4 ? '高匹配度' : '匹配度' }} +
+
+
+
+ +
+ +
+
+
+ + @@ -259,9 +303,6 @@ const showSetupWizard = ref(true) /** 从接口查询到的配置数据 — 传给向导组件做初始值 */ const agentConfig = ref(null) -/** 是否显示右侧面板 */ -const showRightPanel = ref(false) - /** 推荐岗位全量列表（接口返回200个） */ const recommendJobs = ref([]) @@ -664,8 +705,16 @@ function handleChatJobClick(job: AgentRecommendJob) { // ==================== 投递流程 ==================== -/** 右侧面板显示模式 */ -const rightPanelMode = ref<'recommend' | 'resume'>('recommend') +/** 右侧面板显示模式（已废弃，保留仅兼容） */ + +/** 简历预览抽屉是否显示 */ +const showResumeDrawer = ref(false) + +/** 简历优化前分数（2-4之间随机） */ +const resumeScoreBefore = ref(3.2) + +/** 简历优化后分数（matchScore / 10） */ +const resumeScoreAfter = ref(6.0) /** 当前投递流程的简历数据 */ const applyResumeData = ref({} as ResumeTemplateData) @@ -676,6 +725,11 @@ const applyResumeTemplateRef = ref | null /** 简历模板模式：preview=预览，export=导出 */ const applyResumeMode = ref<'preview' | 'export'>('preview') +/** 关闭简历预览抽屉 */ +function handleCloseResumeDrawer() { + showResumeDrawer.value = false +} + /** 学历文字转数字 */ function degreeToNumber(degree?: string): number { const map: Record = { '大专': 1, '本科': 2, '硕士': 3, '博士': 4 } @@ -829,16 +883,36 @@ async function startResumeOptimization(targetJob: JobListItem) { } /** 第1步完成：查看优化简历 */ -function handleViewResumeStep() { +async function handleViewResumeStep() { const progressItem = applyProgressList.value[0] if (!progressItem) return - // 打开右侧简历预览面板 + // 打开简历预览抽屉 if (progressItem.resumeData) { applyResumeData.value = mapOptimizeResumeToTemplate(progressItem.resumeData) } - rightPanelMode.value = 'resume' - showRightPanel.value = true + showResumeDrawer.value = true + + // 生成优化前随机分（2到4之间，保留1位小数） + resumeScoreBefore.value = Number((Math.random() * 2 + 2).toFixed(1)) + + // 查询匹配分 + try { + const customizeRes = await fetchCustomizeResume(String(progressItem.jobInfo.id)) + const customizeResumeId = customizeRes?.data?.id + if (customizeResumeId) { + const scoreRes = await fetchMatchScore({ + customizeResumeId: String(customizeResumeId), + jobId: String(progressItem.jobInfo.id), + }) + const rawScore = scoreRes?.data ?? 60 + // 接口返回10-100，除以10得到1.0-10.0 + resumeScoreAfter.value = Number((rawScore / 10).toFixed(1)) + } + } catch { + // 查询失败时用默认值 + resumeScoreAfter.value = 6.0 + } } /** 第1步完成：确认简历 → 自动进入第2步匹配分析 */ @@ -852,9 +926,8 @@ async function handleConfirmResumeStep() { applyProgressList.value = [...applyProgressList.value] saveProgressToStorage() - // 关闭简历预览面板 - showRightPanel.value = false - rightPanelMode.value = 'recommend' + // 关闭简历预览抽屉 + showResumeDrawer.value = false // 调用匹配分析流程 await startMatchAnalysis() @@ -999,8 +1072,7 @@ function handleCancelApply() { applyProgressList.value = [] saveProgressToStorage() - showRightPanel.value = false - rightPanelMode.value = 'recommend' + showResumeDrawer.value = false isApplying.value = false } @@ -1015,8 +1087,7 @@ async function autoStartNextApply() { if (applyJobList.value.length === 0) { isApplying.value = false - showRightPanel.value = false - rightPanelMode.value = 'recommend' + showResumeDrawer.value = false ElMessage.success('所有待投递岗位已处理完毕') return }