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

AI定制专属简历和简历预览调整

Browse Source
This commit is contained in:
xuxin
2026-07-07 11:34:14 +08:00
parent 9e791345f2
commit b740e0cd39
10 changed files with 483 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JobResumeCustomDialog.vue
+38 -16
View File
@@ -13,7 +13,7 @@
<h2 class="job-resume-custom-dialog__drawer-title">生成你的岗位专属简历</h2>
</div>
<!-- 下载简历按钮（步骤三显示，位于步骤指示器上方） -->
<div v-if="currentStep === 4" class="job-resume-custom-dialog__top-download mt10">
<div v-if="currentStep === 4" class="job-resume-custom-dialog__top-download mt10 ml12">
<button class="job-resume-custom-dialog__top-download-btn" @click="toggleDownloadMenu">
<svg viewBox="0 0 16 16" fill="none" class="job-resume-custom-dialog__top-download-icon">
<path d="M8 2v8M8 10l-3-3M8 10l3-3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -182,6 +182,7 @@
:resumeData="resumeTemplateData"
:showDiff="isShowDiff"
:oldResumeData="oldResumeTemplateData"
:mode="resumeTemplateMode"
ref="resumeTemplateRef"
/>
</div>
@@ -207,29 +208,32 @@
<div class="job-resume-custom-dialog__ai-messages" ref="aiMessagesRef">
<!-- 匹配度提升提示 -->
<div class="job-resume-custom-dialog__ai-result prl0">
<div class="job-resume-custom-dialog__ai-result-text">
<p class="job-resume-custom-dialog__ai-result-title">恭喜！你的简历匹配值从<br/>{{ jobInfo.matchScore }}分提升到了{{ cachedOptimizedScore }}分！</p>
<div class="job-resume-custom-dialog__ai-result-detail">
<p class="job-resume-custom-dialog__ai-result-subtitle">做了哪些优化？</p>
<ul class="job-resume-custom-dialog__ai-result-list">
<li v-for="(item, i) in aiOptimizeResults" :key="i">·{{ item }}</li>
</ul>
</div>
<div class="job-resume-custom-dialog__ai-congrats-wrap">
<!-- 左侧绿色边框卡片：文字部分 -->
<div class="job-resume-custom-dialog__ai-congrats">
<p class="job-resume-custom-dialog__ai-congrats-title">🎉 恭喜！你的简历匹配值<br/>从 <span class="job-resume-custom-dialog__ai-congrats-bold">{{ jobInfo.matchScore }}分</span> 提升到了 <span class="job-resume-custom-dialog__ai-congrats-bold">{{ cachedOptimizedScore }}分</span>！</p>
</div>
<div class="job-resume-custom-dialog__ai-result-score">
<!-- 右侧圆环+标签（卡片外面） -->
<div class="job-resume-custom-dialog__ai-congrats-score">
<div class="job-resume-custom-dialog__match-ring job-resume-custom-dialog__match-ring--large">
<svg viewBox="0 0 60 60" class="job-resume-custom-dialog__ring-svg">
<circle cx="30" cy="30" r="24" stroke-width="4" stroke="#E8E8E8" fill="none" opacity="0.3"/>
<circle cx="30" cy="30" r="24" stroke-width="4" fill="none" stroke="#4FC2C9" stroke-linecap="round" :stroke-dasharray="2*Math.PI*24" :stroke-dashoffset="2*Math.PI*24*(1-cachedOptimizedScore/10)" transform="rotate(-90 30 30)"/>
<circle cx="30" cy="30" r="24" stroke-width="5" stroke="#E8E8E8" fill="none" opacity="0.3"/>
<circle cx="30" cy="30" r="24" stroke-width="5" fill="none" stroke="#4FC2C9" stroke-linecap="round" :stroke-dasharray="2*Math.PI*24" :stroke-dashoffset="2*Math.PI*24*(1-cachedOptimizedScore/10)" transform="rotate(-90 30 30)"/>
</svg>
<span class="job-resume-custom-dialog__match-score">{{ cachedOptimizedScore.toFixed(1) }}</span>
</div>
<span class="job-resume-custom-dialog__match-label job-resume-custom-dialog__match-label--high">{{ cachedOptimizedScore >= 9 ? '非常匹配' : cachedOptimizedScore >= 6 ? '高匹配度' : '低匹配度' }}</span>
</div>
</div>
<!-- 改写说明（卡片外面平铺） -->
<div class="job-resume-custom-dialog__ai-optimize-detail">
<p class="job-resume-custom-dialog__ai-optimize-subtitle">改写说明·共{{ aiOptimizeResults.length }}处</p>
<div class="job-resume-custom-dialog__ai-optimize-list">
<p v-for="(item, i) in aiOptimizeResults" :key="i" class="job-resume-custom-dialog__ai-optimize-item">{{ i + 1 }}、{{ item }}</p>
</div>
</div>
<!-- 快捷操作按钮 -->
<div class="job-resume-custom-dialog__ai-quick-actions prl0">
<div v-if="false" class="job-resume-custom-dialog__ai-quick-actions prl0">
<button
v-for="(action, i) in aiQuickActions"
:key="i"
@@ -284,8 +288,15 @@
@keyup.enter="sendAiMessage(aiInputText)"
/>
<button class="job-resume-custom-dialog__ai-send-btn" @click="sendAiMessage(aiInputText)">
<svg viewBox="0 0 24 24" fill="none" class="job-resume-custom-dialog__ai-send-icon">
<path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_118_2831)">
<path d="M16.8621 4.73833C17.2221 3.7425 16.2571 2.7775 15.2613 3.13833L3.09046 7.54C2.09129 7.90167 1.97046 9.265 2.88963 9.7975L6.77463 12.0467L10.2438 8.5775C10.401 8.4257 10.6115 8.34171 10.83 8.34361C11.0485 8.34551 11.2575 8.43315 11.412 8.58765C11.5665 8.74216 11.6541 8.95117 11.656 9.16967C11.6579 9.38816 11.5739 9.59867 11.4221 9.75583L7.95296 13.225L10.203 17.11C10.7346 18.0292 12.098 17.9075 12.4596 16.9092L16.8621 4.73833Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_118_2831">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
</div>
@@ -736,6 +747,9 @@ function selectResume(r: ResumeOption) {
/** 简历模板组件引用 */
const resumeTemplateRef = ref()
/** 简历模板模式：preview=预览，export=导出 */
const resumeTemplateMode = ref<'preview' | 'export'>('preview')
/** 简历模板数据 */
const resumeTemplateData = ref<ResumeTemplateData>({
name: '',
@@ -1013,9 +1027,14 @@ function toggleDownloadMenu() {
async function handleDownload(type: 'pdf' | 'word') {
showDownloadMenu.value = false
// 切换到导出模式（大padding）
resumeTemplateMode.value = 'export'
await nextTick()
const element = resumeTemplateRef.value?.resumeRef
if (!element) {
console.error('[下载简历] 无法获取简历模板DOM')
resumeTemplateMode.value = 'preview'
return
}
@@ -1029,6 +1048,9 @@ async function handleDownload(type: 'pdf' | 'word') {
}
} catch (err) {
console.error('[下载简历] 导出失败', err)
} finally {
// 导出完成后恢复预览模式
resumeTemplateMode.value = 'preview'
}
}