AI投递助手样式优化

This commit is contained in:
2026-07-10 10:01:07 +08:00
parent cf268520e1
commit 0e5c7d14d0
5 changed files with 671 additions and 30 deletions
+94 -23
View File
@@ -169,13 +169,7 @@
<!-- 底层设置面板常驻 -->
<AgentSettingPanel />
<!-- 覆盖层其他面板绝对定位覆盖设置面板 -->
<div v-if="showRightPanel" class="agent-main__right-overlay">
<!-- 模式3简历预览 -->
<div v-if="rightPanelMode === 'resume'" class="agent-main__right-resume">
<JobResumeTemplate ref="applyResumeTemplateRef" :resume-data="applyResumeData" :mode="applyResumeMode" />
</div>
</div>
<!-- 覆盖层已移除简历预览改为独立抽屉见页面底部 -->
</div>
</div>
</div>
@@ -193,6 +187,56 @@
@remove="handleJobPreviewRemove"
@update:visible="(val: boolean) => showJobPreviewDrawer = val"
/>
<!-- 简历预览抽屉从右侧弹出 -->
<Teleport to="body">
<Transition name="agent-resume-drawer">
<div v-if="showResumeDrawer" class="agent-resume-drawer-mask" @click.self="handleCloseResumeDrawer">
<div class="agent-resume-drawer">
<!-- 顶部标题栏 -->
<div class="agent-resume-drawer__header">
<div class="agent-resume-drawer__header-left">
<div class="agent-resume-drawer__close" @click="handleCloseResumeDrawer">
<svg viewBox="0 0 24 24" fill="none" class="agent-resume-drawer__close-icon">
<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<span class="agent-resume-drawer__title">岗位专属优化简历</span>
</div>
<!-- 匹配提升提示 -->
<div class="agent-resume-drawer__score-info">
<span class="agent-resume-drawer__score-tip">
🎉 恭喜你的简历匹配值
<br/>
<span class="agent-resume-drawer__score-old">{{ resumeScoreBefore }}</span>
提升到了<span class="agent-resume-drawer__score-new">{{ resumeScoreAfter }}</span>
</span>
<!-- 匹配度环 -->
<div class="agent-resume-drawer__score-ring">
<svg viewBox="0 0 60 60" class="agent-resume-drawer__ring-svg">
<circle cx="30" cy="30" r="25" stroke-width="3" stroke="#E8E8E8" fill="none" />
<circle cx="30" cy="30" r="25" stroke-width="3" fill="none"
:stroke="resumeScoreAfter >= 4 ? '#52CAD1' : '#F59E0B'" stroke-linecap="round"
:stroke-dasharray="2 * Math.PI * 25"
:stroke-dashoffset="2 * Math.PI * 25 * (1 - resumeScoreAfter / 10)"
transform="rotate(-90 30 30)"
/>
</svg>
<div class="agent-resume-drawer__ring-text">
<span class="agent-resume-drawer__ring-number">{{ resumeScoreAfter }}</span>
<span class="agent-resume-drawer__ring-label">{{ resumeScoreAfter >= 4 ? '高匹配度' : '匹配度' }}</span>
</div>
</div>
</div>
</div>
<!-- 简历内容 -->
<div class="agent-resume-drawer__body">
<JobResumeTemplate ref="applyResumeTemplateRef" :resume-data="applyResumeData" :mode="applyResumeMode" />
</div>
</div>
</div>
</Transition>
</Teleport>
</div>
</template>
@@ -259,9 +303,6 @@ const showSetupWizard = ref(true)
/** 从接口查询到的配置数据 — 传给向导组件做初始值 */
const agentConfig = ref<AgentConfig | null>(null)
/** 是否显示右侧面板 */
const showRightPanel = ref(false)
/** 推荐岗位全量列表(接口返回200个) */
const recommendJobs = ref<AgentRecommendJob[]>([])
@@ -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<ResumeTemplateData>({} as ResumeTemplateData)
@@ -676,6 +725,11 @@ const applyResumeTemplateRef = ref<InstanceType<typeof JobResumeTemplate> | null
/** 简历模板模式:preview=预览,export=导出 */
const applyResumeMode = ref<'preview' | 'export'>('preview')
/** 关闭简历预览抽屉 */
function handleCloseResumeDrawer() {
showResumeDrawer.value = false
}
/** 学历文字转数字 */
function degreeToNumber(degree?: string): number {
const map: Record<string, number> = { '大专': 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
}