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

仓库初始化+岗位相关页面

Browse Source
This commit is contained in:
xuxin
2026-03-24 21:06:00 +08:00
commit 0468339d23
113 changed files with 18644 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/ResumeDetail.vue
+230
View File
@@ -0,0 +1,230 @@
<template>
<div class="resume-detail dflex">
<SideNav />
<div class="resume-detail__content">
<!-- 顶部标题 -->
<h2 class="resume-detail__page-title">我的简历</h2>
<!-- 顶部操作栏 -->
<div class="resume-detail__toolbar">
<div class="resume-detail__toolbar-left">
<button class="resume-detail__back-btn" @click="goBack" aria-label="返回">
<svg viewBox="0 0 16 16" fill="none" class="resume-detail__back-icon">
<path d="M12 4L4 12M4 4l8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</button>
<span class="resume-detail__tab-name">{{ resume.name }}</span>
</div>
<div class="resume-detail__toolbar-right">
<button class="resume-detail__tool-btn" @click="handleFeedback">问题反馈</button>
<button class="resume-detail__tool-btn" @click="handleEdit">
<svg viewBox="0 0 16 16" fill="none" class="resume-detail__tool-icon">
<path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
</svg>
编辑简历信息
</button>
<button class="resume-detail__tool-btn" @click="handleExport">
<svg viewBox="0 0 16 16" fill="none" class="resume-detail__tool-icon">
<path d="M3 10v3h10v-3M8 2v8M5 5l3-3 3 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
导出
</button>
<button class="resume-detail__tool-btn resume-detail__tool-btn--danger" @click="handleDelete">
<svg viewBox="0 0 16 16" fill="none" class="resume-detail__tool-icon">
<path d="M4 4h8l-.5 9H4.5L4 4zM6 4V2.5h4V4M2.5 4h11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
删除
</button>
</div>
</div>
<!-- 简历评分区域 -->
<div class="resume-detail__score-bar">
<div class="resume-detail__score-left">
<span class="resume-detail__score-avatar" :style="{ background: resume.avatarColor }">
{{ resume.avatarLetter }}
</span>
<span class="resume-detail__score-badge">良好</span>
<button class="resume-detail__score-link" @click="handleViewReport">查看评估报告 ></button>
</div>
<div class="resume-detail__score-right">
<div class="resume-detail__score-item">
<span class="resume-detail__score-num">{{ resume.urgentCount }}</span>
<span class="resume-detail__score-label">紧急修复项</span>
</div>
<div class="resume-detail__score-item">
<span class="resume-detail__score-num">{{ resume.severeCount }}</span>
<span class="resume-detail__score-label">严重问题</span>
</div>
<div class="resume-detail__score-item">
<span class="resume-detail__score-num">{{ resume.optionalCount }}</span>
<span class="resume-detail__score-label">可选修复项</span>
</div>
<button class="resume-detail__diagnose-btn" @click="handleDiagnose">重新诊断</button>
</div>
</div>
<!-- 简历主体内容 -->
<div class="resume-detail__body">
<!-- 个人信息卡片 -->
<div class="resume-detail__card">
<div class="resume-detail__card-header">
<div>
<h3 class="resume-detail__user-name">{{ resume.realName }}</h3>
<p class="resume-detail__user-title">{{ resume.jobTitle }}</p>
</div>
<div class="resume-detail__card-actions">
<button class="resume-detail__card-btn resume-detail__card-btn--outline" @click="handleUrgentFix">紧急修复项</button>
<button class="resume-detail__card-btn resume-detail__card-btn--dark" @click="handlePolish">修复</button>
</div>
</div>
<div class="resume-detail__contact">
<span class="resume-detail__contact-item">
<svg viewBox="0 0 16 16" fill="none" class="resume-detail__contact-icon">
<rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
<path d="M2 5.5l6 4 6-4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
</svg>
{{ resume.email }}
</span>
<span class="resume-detail__contact-item">
<svg viewBox="0 0 16 16" fill="none" class="resume-detail__contact-icon">
<path d="M4 2h2.5l1.5 3-1.5 1.5a8 8 0 003 3L11 8l3 1.5V12a2 2 0 01-2 2C6.5 14 2 9.5 2 4a2 2 0 012-2z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
</svg>
{{ resume.phone }}
</span>
<span class="resume-detail__contact-item">
<svg viewBox="0 0 16 16" fill="none" class="resume-detail__contact-icon">
<circle cx="8" cy="6.5" r="2.5" stroke="currentColor" stroke-width="1.2"/>
<path d="M8 14s-5-4-5-7.5a5 5 0 0110 0C13 10 8 14 8 14z" stroke="currentColor" stroke-width="1.2"/>
</svg>
{{ resume.location }}
</span>
</div>
</div>
<!-- 教育背景 -->
<div class="resume-detail__card">
<div class="resume-detail__section-header">
<h3 class="resume-detail__section-title">教育背景</h3>
<div class="resume-detail__card-actions">
<button class="resume-detail__card-btn resume-detail__card-btn--outline">紧急修复项</button>
<button class="resume-detail__card-btn resume-detail__card-btn--dark">修复</button>
</div>
</div>
<div v-for="(edu, i) in resume.education" :key="i" class="resume-detail__edu-item">
<div class="resume-detail__edu-degree">{{ edu.degree }}</div>
<div class="resume-detail__edu-meta">{{ edu.school }} · {{ edu.period }}</div>
<div v-if="edu.gpa" class="resume-detail__edu-meta">GPA: {{ edu.gpa }}</div>
</div>
</div>
<!-- 工作经验 -->
<div class="resume-detail__card">
<h3 class="resume-detail__section-title">工作经验</h3>
<div v-for="(exp, i) in resume.experience" :key="i" class="resume-detail__exp-item">
<div class="resume-detail__exp-title">{{ exp.title }}</div>
<div class="resume-detail__exp-meta">{{ exp.company }} · {{ exp.period }}</div>
<p class="resume-detail__exp-desc">{{ exp.description }}</p>
</div>
</div>
<!-- 技能 -->
<div class="resume-detail__card">
<h3 class="resume-detail__section-title">技能</h3>
<div class="resume-detail__skills">
<span v-for="(skill, i) in resume.skills" :key="i" class="resume-detail__skill-tag">
{{ skill }}
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import SideNav from '@/components/SideNav.vue'
// ==================== 路由相关 ====================
const router = useRouter()
const route = useRoute()
/** 当前简历 ID，从路由参数中获取 */
const resumeId = route.params.id as string
// ==================== 简历数据（模拟数据，后续对接接口） ====================
const resume = ref({
id: resumeId,
name: '李华_产品经理',
avatarLetter: 'B',
avatarColor: '#1A1A2E',
realName: '李华',
jobTitle: '数据产品经理',
email: '[email]',
phone: '+1 (555) 123-4567',
location: '北京',
/** 紧急修复项数量 */
urgentCount: 8,
/** 严重问题数量 */
severeCount: 0,
/** 可选修复项数量 */
optionalCount: 1,
/** 教育背景 */
education: [
{ degree: '计算机科学学士', school: '斯坦福大学', period: '2018 - 2022', gpa: '3.8/4.0' },
{ degree: '高中毕业', school: '加州理工学院附属中学', period: '2014 - 2018', gpa: '' },
],
/** 工作经验 */
experience: [
{
title: '高级软件工程师',
company: 'Google',
period: '2022 - 至今',
description: '负责开发和维护大规模分布式系统，优化系统性能和可靠性。',
},
{
title: '软件工程师实习生',
company: 'Microsoft',
period: '2021 - 2022',
description: '参与云服务平台的开发，协助团队完成多个核心功能模块。',
},
],
/** 技能标签 */
skills: ['JavaScript', 'Python', 'React', 'Node.js', 'SQL', 'AWS', 'Docker', 'Kubernetes'],
})
// ==================== 事件处理 ====================
/** 返回简历列表页 */
function goBack() {
router.push('/resume')
}
/** 问题反馈 */
function handleFeedback() { console.log('问题反馈') }
/** 编辑简历信息 */
function handleEdit() { console.log('编辑简历信息') }
/** 导出简历 */
function handleExport() { console.log('导出') }
/** 删除简历 */
function handleDelete() { console.log('删除') }
/** 查看评估报告 */
function handleViewReport() { console.log('查看评估报告') }
/** 重新诊断简历 */
function handleDiagnose() { console.log('重新诊断') }
/** 紧急修复项 */
function handleUrgentFix() { console.log('紧急修复项') }
/** 修复简历问题 */
function handlePolish() { console.log('修复') }
</script>