yuzhiran
552 lines
14 KiB
Vue
552 lines
14 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="header">
|
||
<text class="title">{{ isOptimize ? '优化结果' : '诊断报告' }}</text>
|
||
<text class="subtitle">目标岗位：{{ position }}</text>
|
||
</view>
|
||
|
||
<view v-if="loading" class="loading-wrap">
|
||
<view class="loading-spinner"></view>
|
||
<text class="loading-text">{{ isOptimize ? 'AI 正在优化简历...' : 'AI 正在诊断简历...' }}</text>
|
||
</view>
|
||
<view v-if="!loading" class="content">
|
||
<!-- 诊断模式：评分 + 总结 -->
|
||
<view v-if="!isOptimize && diagnosisResult" class="section">
|
||
<view class="score-bar">
|
||
<text class="score-num">{{ diagnosisResult.score }}</text>
|
||
<text class="score-label">/100</text>
|
||
</view>
|
||
<text class="summary-text" v-if="diagnosisResult.summary">{{ diagnosisResult.summary }}</text>
|
||
</view>
|
||
|
||
<!-- 岗位匹配度（诊断模式） -->
|
||
<view v-if="!isOptimize && diagnosisResult?.positionMatch" class="section">
|
||
<view class="section-title">岗位匹配度</view>
|
||
<view class="match-bar">
|
||
<view class="match-fill" :style="'width:' + diagnosisResult.positionMatch.match + '%'"></view>
|
||
</view>
|
||
<text class="match-text">{{ diagnosisResult.positionMatch.match }}% 匹配</text>
|
||
<view v-if="diagnosisResult.positionMatch.keywords?.length" class="keywords-wrap">
|
||
<text class="keywords-label">建议补充关键词：</text>
|
||
<text class="keyword-tag" v-for="kw in diagnosisResult.positionMatch.keywords" :key="kw">{{ kw }}</text>
|
||
</view>
|
||
<view v-if="diagnosisResult.positionMatch.suggestions?.length" class="match-suggestions">
|
||
<text v-for="(s, i) in diagnosisResult.positionMatch.suggestions" :key="i" class="match-suggestion">{{ i+1 }}. {{ s }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 优化模式：切换视图 -->
|
||
<view v-if="isOptimize" class="toggle-bar">
|
||
<text class="toggle-btn" :class="{ active: viewMode === 'optimized' }" @click="viewMode = 'optimized'">优化后</text>
|
||
<text class="toggle-btn" :class="{ active: viewMode === 'original' }" @click="viewMode = 'original'">优化前</text>
|
||
</view>
|
||
|
||
<view v-if="isOptimize" class="section">
|
||
<view class="section-title">{{ viewMode === 'optimized' ? '优化后的简历' : '原始简历' }}</view>
|
||
<view class="optimized-text">{{ viewMode === 'optimized' ? optimizedContent : originalContent }}</view>
|
||
</view>
|
||
|
||
<!-- 问题列表 / 修改说明 -->
|
||
<view v-if="changes && changes.length > 0" class="section">
|
||
<view class="section-title">{{ isOptimize ? '修改说明' : '问题列表' }}</view>
|
||
<view class="changes-list">
|
||
<view class="change-item" v-for="(change, index) in changes" :key="index">
|
||
<view class="change-type" v-if="change.type">{{ change.typeLabel || change.type }}</view>
|
||
<view class="change-section">{{ change.section || change.title }}</view>
|
||
<view class="change-arrow" v-if="change.before">{{ change.before }} → {{ change.after }}</view>
|
||
<view class="change-desc">{{ change.reason || change.suggestion || change.description }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 优势 / 亮点 -->
|
||
<view v-if="highlights && highlights.length > 0" class="section">
|
||
<view class="section-title">{{ isOptimize ? '优化亮点' : '现有优势' }}</view>
|
||
<view class="highlights-list">
|
||
<view class="highlight-item" v-for="(h, i) in highlights" :key="i">{{ h }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="actions" v-if="!loading">
|
||
<button class="btn btn-download" @click="downloadResult">下载报告</button>
|
||
<button class="btn btn-save" @click="saveResult" v-if="saved" :disabled="saving">{{ saving ? '保存中...' : '已保存' }}</button>
|
||
<button class="btn btn-save" @click="saveResult" v-else :disabled="saving">{{ saving ? '保存中...' : '保存到我的' }}</button>
|
||
<button class="btn btn-secondary" @click="reOptimize">重新{{ isOptimize ? '优化' : '诊断' }}</button>
|
||
<button class="btn btn-primary" @click="goHome">返回首页</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import api from '../../services/api';
|
||
import { APP_CONFIG } from '../../config';
|
||
|
||
const position = ref('');
|
||
const originalContent = ref('');
|
||
const optimizedContent = ref('');
|
||
const changes = ref<any[]>([]);
|
||
const highlights = ref<string[]>([]);
|
||
const isOptimize = ref(false);
|
||
const diagnosisResult = ref<any>(null);
|
||
const viewMode = ref<'optimized' | 'original'>('optimized');
|
||
const loading = ref(true);
|
||
const saved = ref(false);
|
||
const saving = ref(false);
|
||
const resultId = ref('');
|
||
|
||
onLoad(async (options: any) => {
|
||
if (options.position) position.value = decodeURIComponent(options.position);
|
||
isOptimize.value = options.type === 'optimize';
|
||
originalContent.value = uni.getStorageSync('_resume_text') || '';
|
||
|
||
// 优先从 storage 读取分析结果（index 页存储的）
|
||
const savedData = uni.getStorageSync('_analysis_result');
|
||
if (savedData) {
|
||
try {
|
||
const data = JSON.parse(savedData);
|
||
applyResult(data);
|
||
uni.removeStorageSync('_analysis_result');
|
||
return;
|
||
} catch {
|
||
uni.removeStorageSync('_analysis_result');
|
||
}
|
||
}
|
||
|
||
// 兜底：直接调 API
|
||
try {
|
||
loading.value = true;
|
||
if (isOptimize.value) {
|
||
const res = await api.analyze.optimize(originalContent.value, position.value);
|
||
applyResult(res);
|
||
} else {
|
||
const res = await api.analyze.diagnosis(originalContent.value, position.value);
|
||
applyResult(res);
|
||
}
|
||
} catch (e: any) {
|
||
uni.showToast({ title: e.message || '分析失败', icon: 'none' });
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
});
|
||
|
||
function applyResult(data: any) {
|
||
loading.value = false;
|
||
if (isOptimize.value) {
|
||
optimizedContent.value = data.optimized || '';
|
||
changes.value = (data.changes || []).map((c: any) =>
|
||
typeof c === 'string' ? { section: c, description: c } : c
|
||
);
|
||
highlights.value = [];
|
||
} else {
|
||
diagnosisResult.value = data;
|
||
changes.value = (data.issues || []).map((i: any) => ({
|
||
...i,
|
||
typeLabel: i.level === 'high' ? '严重' : i.level === 'medium' ? '中等' : '轻微',
|
||
description: i.desc || i.description,
|
||
}));
|
||
highlights.value = data.suggestions || [];
|
||
}
|
||
}
|
||
|
||
async function saveResult() {
|
||
if (saved.value || saving.value) return;
|
||
saving.value = true;
|
||
try {
|
||
const payload: any = {
|
||
title: (isOptimize.value ? '优化简历' : '简历诊断') + ' - ' + (position.value || '通用岗位'),
|
||
originalContent: originalContent.value,
|
||
targetPosition: position.value,
|
||
type: isOptimize.value ? 'optimize' : 'diagnosis',
|
||
};
|
||
const res = await api.resume.create(payload.title, payload.originalContent, payload.targetPosition);
|
||
resultId.value = res._id || res.id;
|
||
saved.value = true;
|
||
uni.showToast({ title: '保存成功', icon: 'success' });
|
||
} catch (e: any) {
|
||
uni.showToast({ title: e.message || '保存失败', icon: 'none' });
|
||
} finally {
|
||
saving.value = false;
|
||
}
|
||
}
|
||
|
||
function downloadResult() {
|
||
const isH5 = typeof window !== 'undefined';
|
||
let content = '';
|
||
const fileName = (isOptimize.value ? '优化简历' : '简历诊断') + '_' + (position.value || '通用岗位') + '.txt';
|
||
|
||
if (isOptimize.value) {
|
||
content = '===== 简历优化报告 =====\n\n';
|
||
content += '目标岗位：' + position.value + '\n\n';
|
||
content += '--- 优化后的简历 ---\n\n';
|
||
content += optimizedContent.value + '\n\n';
|
||
content += '--- 修改说明 ---\n\n';
|
||
changes.value.forEach((c, i) => {
|
||
content += `${i+1}. [${c.typeLabel || c.type}] ${c.section || c.title}\n`;
|
||
if (c.before) content += ` 修改前：${c.before}\n 修改后：${c.after}\n`;
|
||
content += ` 说明：${c.reason || c.suggestion || ''}\n\n`;
|
||
});
|
||
content += '--- 优化亮点 ---\n\n';
|
||
highlights.value.forEach(h => content += '• ' + h + '\n');
|
||
} else if (diagnosisResult.value) {
|
||
content = '===== 简历诊断报告 =====\n\n';
|
||
content += '目标岗位：' + position.value + '\n';
|
||
content += '综合评分：' + diagnosisResult.value.score + '/100\n\n';
|
||
content += '--- 综合评述 ---\n\n';
|
||
content += diagnosisResult.value.summary + '\n\n';
|
||
|
||
if (diagnosisResult.value.positionMatch) {
|
||
content += '--- 岗位匹配度 ---\n';
|
||
content += '匹配度：' + diagnosisResult.value.positionMatch.match + '%\n';
|
||
if (diagnosisResult.value.positionMatch.keywords?.length) {
|
||
content += '关键缺失词：' + diagnosisResult.value.positionMatch.keywords.join('、') + '\n';
|
||
}
|
||
content += '\n';
|
||
}
|
||
|
||
content += '--- 问题列表 ---\n\n';
|
||
changes.value.forEach((c, i) => {
|
||
content += `${i+1}. [${c.typeLabel || c.type}] ${c.title}\n`;
|
||
content += ` 描述：${c.description || ''}\n`;
|
||
content += ` 建议：${c.suggestion || ''}\n\n`;
|
||
});
|
||
|
||
content += '--- 现有优势 ---\n\n';
|
||
highlights.value.forEach(h => content += '• ' + h + '\n');
|
||
}
|
||
|
||
if (isH5) {
|
||
const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = fileName;
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
uni.showToast({ title: '下载成功', icon: 'success' });
|
||
} else {
|
||
uni.setClipboardData({
|
||
data: content,
|
||
success: () => uni.showToast({ title: '内容已复制到剪贴板' }),
|
||
});
|
||
}
|
||
}
|
||
|
||
function copyContent() {
|
||
uni.setClipboardData({
|
||
data: optimizedContent.value,
|
||
success: () => uni.showToast({ title: '已复制', icon: 'success' }),
|
||
});
|
||
}
|
||
|
||
function reOptimize() {
|
||
uni.navigateBack();
|
||
}
|
||
|
||
function goHome() {
|
||
uni.switchTab({ url: APP_CONFIG.PAGES.INDEX });
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #f5f6f7;
|
||
padding: 30rpx;
|
||
padding-bottom: 160rpx;
|
||
}
|
||
|
||
.header {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 20rpx;
|
||
padding: 40rpx 30rpx;
|
||
margin-bottom: 30rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
display: block;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 24rpx;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.loading-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 120rpx 0;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border: 6rpx solid #e0e0e0;
|
||
border-top-color: #667eea;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.toggle-bar {
|
||
display: flex;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 24rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.toggle-btn {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.toggle-btn.active {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30rpx;
|
||
}
|
||
|
||
.section {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.optimized-text {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
line-height: 1.8;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.score-bar {
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.score-num {
|
||
font-size: 72rpx;
|
||
font-weight: 700;
|
||
color: #ff8c00;
|
||
}
|
||
|
||
.score-label {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.summary-text {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.btn-copy {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
border-radius: 40rpx;
|
||
font-size: 28rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.changes-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.change-item {
|
||
padding: 20rpx;
|
||
background: #f8f9fa;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.change-type {
|
||
display: inline-block;
|
||
padding: 4rpx 16rpx;
|
||
background: #e8f5e9;
|
||
color: #2e7d32;
|
||
border-radius: 20rpx;
|
||
font-size: 20rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.change-section {
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
color: #667eea;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.change-arrow {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.change-desc {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.highlights-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.highlight-item {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
padding: 12rpx 20rpx;
|
||
background: #f0f8ff;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.match-bar {
|
||
height: 16rpx;
|
||
background: #eee;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.match-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #ff8c00, #ff6348);
|
||
border-radius: 8rpx;
|
||
transition: width 0.5s;
|
||
}
|
||
|
||
.match-text {
|
||
font-size: 24rpx;
|
||
color: #ff8c00;
|
||
font-weight: 500;
|
||
margin-bottom: 16rpx;
|
||
display: block;
|
||
}
|
||
|
||
.keywords-wrap {
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.keywords-label {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
display: block;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.keyword-tag {
|
||
display: inline-block;
|
||
padding: 4rpx 16rpx;
|
||
background: #fff3e0;
|
||
color: #e65100;
|
||
border-radius: 20rpx;
|
||
font-size: 20rpx;
|
||
margin: 4rpx;
|
||
}
|
||
|
||
.match-suggestions {
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.match-suggestion {
|
||
font-size: 22rpx;
|
||
color: #666;
|
||
display: block;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.actions {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #fff;
|
||
padding: 20rpx 30rpx;
|
||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||
display: flex;
|
||
gap: 16rpx;
|
||
flex-wrap: wrap;
|
||
box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.06);
|
||
}
|
||
|
||
.btn {
|
||
height: 76rpx;
|
||
border-radius: 38rpx;
|
||
font-size: 26rpx;
|
||
flex: 1;
|
||
min-width: calc(50% - 8rpx);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #fff;
|
||
color: #667eea;
|
||
border: 2rpx solid #667eea;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-download {
|
||
background: #e8f5e9;
|
||
color: #2e7d32;
|
||
border: none;
|
||
}
|
||
|
||
.btn-save {
|
||
background: #fff8e1;
|
||
color: #f57f17;
|
||
border: none;
|
||
}
|
||
|
||
.btn-save:disabled {
|
||
opacity: 0.6;
|
||
}
|
||
</style>
|