zcdsj
/
Recruitment_site
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(frontend): 修复多处页面功能问题 

- JobCard: 分享按钮移至卡片右上角，链接去掉 # 前缀
- JobDetailView: 修复已投递状态判断（job 字段为整数非对象），页面加载时同步收藏状态
- ApplicationManageView: 下载附件改用 Content-Type 判断扩展名，修复无扩展名文件下载为乱码问题
- 新增 SplashView 落地页（企业招聘门户风格）
- 新增 FavoritesView 我的收藏页面

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
TianyangZhang 2026-03-26 11:29:54 +08:00
parent 609aa05514
commit 0d7576dc85
5 changed files with 638 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
offer_frontend/src/components/JobCard.vue
View File

@ -1,6 +1,13 @@
<template>
<div class="job-card-wrapper">
<el-card class="job-card" shadow="hover" @click="$router.push(`/jobs/${job.id}`)">
<el-button
class="share-btn"
type="primary"
text
@click.stop="shareJob"
:icon="Share"
/>
<div class="job-title">{{ job.title }}</div>
<div class="job-meta">
<span>{{ job.company_name || job.organization_name }}</span>
@ -14,18 +21,11 @@
<span class="publish-time">{{ formatDate(job.created_at) }}</span>
</div>
</el-card>
<el-button
class="share-btn"
type="primary"
text
@click.stop="shareJob"
:icon="ShareDocument"
/>
</div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { ShareDocument } from '@element-plus/icons-vue'
import { Share } from '@element-plus/icons-vue'
const props = defineProps({ job: Object })
@ -36,7 +36,7 @@ function formatDate(dateStr) {
function shareJob() {
// 生成职位详情页链接
const jobUrl = `${window.location.origin}/#/jobs/${props.job.id}`
const jobUrl = `${window.location.origin}/jobs/${props.job.id}`
// 复制到剪贴板
navigator.clipboard.writeText(jobUrl).then(() => {
@ -57,14 +57,11 @@ function shareJob() {
.job-card-wrapper {
position: relative;
margin-bottom: 12px;
display: flex;
align-items: flex-start;
gap: 8px;
}
.job-card {
cursor: pointer;
flex: 1;
position: relative;
}
.job-title {
@ -97,7 +94,9 @@ function shareJob() {
}
.share-btn {
margin-top: 8px;
flex-shrink: 0;
position: absolute;
top: 12px;
right: 12px;
z-index: 1;
}
</style>

538
offer_frontend/src/views/SplashView.vue Normal file
View File

@ -0,0 +1,538 @@
<template>
<div class="splash-page">
<!-- 顶部导航 -->
<header class="splash-header">
<div class="header-inner">
<div class="logo">
<div class="logo-icon">招</div>
<div class="logo-text">
<span class="logo-title">集团招聘平台</span>
<span class="logo-en">GROUP TALENT RECRUITMENT</span>
</div>
</div>
<nav class="header-nav">
<span class="nav-item" @click="router.push('/home')">首页</span>
<span class="nav-item" @click="router.push('/jobs')">职位列表</span>
<span class="nav-item" @click="router.push('/companies')">公司介绍</span>
</nav>
<div class="header-actions">
<button class="btn-outline" @click="router.push('/login')">登录</button>
<button class="btn-solid" @click="router.push('/register')">立即注册</button>
</div>
</div>
</header>
<!-- 英雄区 -->
<section class="hero">
<div class="hero-bg">
<div class="hero-overlay"></div>
<!-- 建筑风格装饰线条 -->
<div class="building-lines">
<div class="line l1"></div>
<div class="line l2"></div>
<div class="line l3"></div>
<div class="line l4"></div>
<div class="line l5"></div>
<div class="line l6"></div>
<div class="line l7"></div>
<div class="line l8"></div>
</div>
<!-- 光晕效果 -->
<div class="hero-glow"></div>
</div>
<div class="hero-content">
<div class="hero-badge">2026届校园招聘</div>
<h1 class="hero-slogan">人才创造美好未来</h1>
<p class="hero-sub">与优秀的人一起，做有价值的事</p>
<div class="hero-btns">
<button class="btn-primary-lg" @click="router.push('/jobs')">
浏览职位
<span class="btn-arrow">→</span>
</button>
<button class="btn-secondary-lg" @click="router.push('/register')">
立即投递
</button>
</div>
</div>
<!-- 滚动指示 -->
<div class="scroll-hint">
<span>向下探索</span>
<div class="scroll-arrow">↓</div>
</div>
</section>
<!-- 数据亮点 -->
<section class="stats-section">
<div class="stats-inner">
<div class="stat-item">
<div class="stat-num">500<span class="stat-plus">+</span></div>
<div class="stat-label">招聘职位</div>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<div class="stat-num">28<span class="stat-plus">+</span></div>
<div class="stat-label">合作企业</div>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<div class="stat-num">10000<span class="stat-plus">+</span></div>
<div class="stat-label">在职员工</div>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<div class="stat-num">30<span class="stat-plus">+</span></div>
<div class="stat-label">城市布局</div>
</div>
</div>
</section>
<!-- 招聘亮点 -->
<section class="features-section">
<div class="features-inner">
<div class="section-label">为什么加入我们</div>
<h2 class="section-title">筑梦平台，共创未来</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🏛</div>
<h3>央企背景</h3>
<p>国有企业，稳定可靠，福利完善，五险一金，补充公积金</p>
</div>
<div class="feature-card">
<div class="feature-icon">🚀</div>
<h3>成长空间</h3>
<p>完善的晋升体系，多维度培训，专属导师带教，快速成长</p>
</div>
<div class="feature-card">
<div class="feature-icon">🌍</div>
<h3>全国布局</h3>
<p>覆盖30+城市，多地工作机会，灵活选择工作地点</p>
</div>
<div class="feature-card">
<div class="feature-icon">💡</div>
<h3>创新氛围</h3>
<p>鼓励创新探索，科研立项支持，专利奖励，技术驱动发展</p>
</div>
</div>
</div>
</section>
<!-- 底部 -->
<footer class="splash-footer">
<div class="footer-inner">
<div class="footer-logo">
<div class="logo-icon sm">招</div>
<span>集团招聘平台</span>
</div>
<p class="footer-copy">Copyright © 集团招聘平台 · All Rights Reserved · 为国家建设输送优秀人才</p>
<div class="footer-links">
<span @click="router.push('/jobs')">职位列表</span>
<span @click="router.push('/companies')">公司介绍</span>
<span @click="router.push('/login')">登录</span>
</div>
</div>
</footer>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
</script>
<style scoped>
* { box-sizing: border-box; }
.splash-page {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: #0a0a0a;
color: #fff;
overflow-x: hidden;
}
/* ── 顶部导航 ── */
.splash-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 0 48px;
height: 64px;
display: flex;
align-items: center;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.logo-icon {
width: 38px;
height: 38px;
background: linear-gradient(135deg, #B8860B, #8B6407);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 900;
color: #fff;
}
.logo-icon.sm { width: 28px; height: 28px; font-size: 13px; border-radius: 6px; }
.logo-text { display: flex; flex-direction: column; }
.logo-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2; }
.logo-en { font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 0.1em; }
.header-nav { display: flex; gap: 36px; }
.nav-item {
font-size: 14px;
color: rgba(255,255,255,0.8);
cursor: pointer;
transition: color 0.2s;
letter-spacing: 0.03em;
}
.nav-item:hover { color: #D4AF37; }
.header-actions { display: flex; gap: 12px; }
.btn-outline {
padding: 7px 20px;
border: 1px solid rgba(255,255,255,0.4);
background: transparent;
color: rgba(255,255,255,0.85);
border-radius: 4px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.btn-outline:hover { border-color: #D4AF37; color: #D4AF37; }
.btn-solid {
padding: 7px 20px;
background: linear-gradient(135deg, #B8860B, #8B6407);
border: none;
color: #fff;
border-radius: 4px;
font-size: 13px;
cursor: pointer;
font-weight: 600;
font-family: inherit;
transition: opacity 0.2s;
}
.btn-solid:hover { opacity: 0.88; }
/* ── 英雄区 ── */
.hero {
position: relative;
height: 100vh;
min-height: 640px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
/* 模拟建筑照片的深色调背景 */
background:
linear-gradient(160deg,
#0d1b2a 0%,
#1a2744 25%,
#0f1f35 50%,
#0d1520 75%,
#060e18 100%
);
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.2) 0%,
rgba(0,0,0,0.1) 40%,
rgba(0,0,0,0.5) 100%
);
}
/* 建筑风格竖线装饰 */
.building-lines {
position: absolute;
inset: 0;
overflow: hidden;
}
.line {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(
to bottom,
transparent,
rgba(184, 134, 11, 0.15) 30%,
rgba(184, 134, 11, 0.08) 70%,
transparent
);
}
.l1 { left: 8%; }
.l2 { left: 18%; }
.l3 { left: 30%; }
.l4 { left: 42%; }
.l5 { left: 58%; }
.l6 { left: 70%; }
.l7 { left: 82%; }
.l8 { left: 92%; }
/* 中心光晕 */
.hero-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
width: 600px;
height: 400px;
background: radial-gradient(
ellipse,
rgba(184, 134, 11, 0.18) 0%,
rgba(184, 134, 11, 0.05) 50%,
transparent 70%
);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: 0 24px;
max-width: 800px;
}
.hero-badge {
display: inline-block;
padding: 5px 18px;
border: 1px solid rgba(184, 134, 11, 0.6);
border-radius: 20px;
font-size: 13px;
color: #D4AF37;
letter-spacing: 0.15em;
margin-bottom: 28px;
background: rgba(184, 134, 11, 0.08);
}
.hero-slogan {
font-size: 56px;
font-weight: 900;
color: #fff;
letter-spacing: 0.12em;
margin: 0 0 16px;
text-shadow: 0 2px 20px rgba(0,0,0,0.4);
line-height: 1.15;
}
.hero-sub {
font-size: 18px;
color: rgba(255,255,255,0.65);
margin: 0 0 48px;
letter-spacing: 0.06em;
}
.hero-btns {
display: flex;
gap: 16px;
justify-content: center;
}
.btn-primary-lg {
padding: 14px 42px;
background: linear-gradient(135deg, #B8860B, #D4AF37);
border: none;
color: #fff;
border-radius: 4px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 8px;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 20px rgba(184,134,11,0.4);
}
.btn-primary-lg:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(184,134,11,0.5);
}
.btn-arrow { font-size: 18px; }
.btn-secondary-lg {
padding: 14px 42px;
background: transparent;
border: 1px solid rgba(255,255,255,0.45);
color: rgba(255,255,255,0.85);
border-radius: 4px;
font-size: 16px;
cursor: pointer;
font-family: inherit;
letter-spacing: 0.05em;
transition: all 0.2s;
}
.btn-secondary-lg:hover {
border-color: rgba(255,255,255,0.8);
color: #fff;
background: rgba(255,255,255,0.06);
}
.scroll-hint {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: rgba(255,255,255,0.35);
font-size: 12px;
letter-spacing: 0.1em;
}
.scroll-arrow {
font-size: 18px;
animation: bounce 1.6s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
/* ── 数据亮点 ── */
.stats-section {
background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
border-top: 1px solid rgba(184,134,11,0.25);
border-bottom: 1px solid rgba(184,134,11,0.25);
padding: 48px 0;
}
.stats-inner {
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 48px;
}
.stat-item { text-align: center; }
.stat-num {
font-size: 44px;
font-weight: 900;
color: #D4AF37;
line-height: 1;
margin-bottom: 8px;
font-variant-numeric: tabular-nums;
}
.stat-plus { font-size: 24px; }
.stat-label { font-size: 14px; color: rgba(255,255,255,0.5); letter-spacing: 0.08em; }
.stat-divider {
width: 1px;
height: 48px;
background: rgba(184,134,11,0.2);
}
/* ── 特色区 ── */
.features-section {
background: #0d0d0d;
padding: 96px 48px;
}
.features-inner { max-width: 1100px; margin: 0 auto; }
.section-label {
text-align: center;
font-size: 13px;
color: #D4AF37;
letter-spacing: 0.2em;
margin-bottom: 12px;
text-transform: uppercase;
}
.section-title {
text-align: center;
font-size: 34px;
font-weight: 800;
color: #fff;
margin: 0 0 56px;
letter-spacing: 0.08em;
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.feature-card {
background: #161616;
border: 1px solid rgba(184,134,11,0.15);
border-radius: 8px;
padding: 36px 24px;
text-align: center;
transition: border-color 0.25s, transform 0.25s;
}
.feature-card:hover {
border-color: rgba(184,134,11,0.5);
transform: translateY(-4px);
}
.feature-icon {
font-size: 36px;
margin-bottom: 16px;
}
.feature-card h3 {
font-size: 17px;
font-weight: 700;
color: #fff;
margin: 0 0 12px;
letter-spacing: 0.04em;
}
.feature-card p {
font-size: 13px;
color: rgba(255,255,255,0.45);
line-height: 1.8;
margin: 0;
}
/* ── 底部 ── */
.splash-footer {
background: #060606;
border-top: 1px solid rgba(255,255,255,0.06);
padding: 32px 48px;
}
.footer-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: rgba(255,255,255,0.5);
}
.footer-copy {
font-size: 12px;
color: rgba(255,255,255,0.25);
margin: 0;
}
.footer-links {
display: flex;
gap: 24px;
}
.footer-links span {
font-size: 12px;
color: rgba(255,255,255,0.35);
cursor: pointer;
transition: color 0.2s;
}
.footer-links span:hover { color: #D4AF37; }
</style>

47
offer_frontend/src/views/admin/ApplicationManageView.vue
View File

@ -135,19 +135,48 @@ function getGenderLabel(gender) {
return genderMap[gender] || '-'
}
function downloadAttachment() {
async function downloadAttachment() {
if (!currentResume.value?.attachment_url) {
ElMessage.warning('附件不可用')
return
}
// 直接通过 media URL 下载（由 Django 代理）
const link = document.createElement('a')
link.href = currentResume.value.attachment_url
link.download = `${currentResume.value.name}_resume.pdf`
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
ElMessage.success('下载已启动')
try {
// 修正 /media/media/ 双重前缀问题
let url = currentResume.value.attachment_url.replace(/\/media\/media\//, '/media/')
// 用 fetch+blob 确保触发下载而不是浏览器预览
const response = await fetch(url)
if (!response.ok) throw new Error('请求失败')
// 优先用 Content-Type 判断扩展名，避免无扩展名文件名导致乱码
const contentType = (response.headers.get('content-type') || '').split(';')[0].trim()
const mimeMap = {
'application/pdf': 'pdf',
'application/msword': 'doc',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'docx',
'image/jpeg': 'jpg',
'image/png': 'png',
}
let ext = mimeMap[contentType]
if (!ext) {
const urlExt = url.split('.').pop().split('?')[0]
ext = /^[a-zA-Z0-9]{1,5}$/.test(urlExt) ? urlExt : 'pdf'
}
const filename = `${currentResume.value.name}_resume.${ext}`
const blob = await response.blob()
const blobUrl = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = blobUrl
link.download = filename
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(blobUrl)
ElMessage.success('下载已启动')
} catch {
ElMessage.error('下载失败，请重试')
}
}
</script>

15
offer_frontend/src/views/portal/JobDetailView.vue
View File

@ -132,7 +132,7 @@
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getJob, toggleFavorite } from '@/api/jobs'
import { getJob, toggleFavorite, getMyFavorites } from '@/api/jobs'
import { applyJob, getMyApplications } from '@/api/applications'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
@ -153,14 +153,17 @@ onMounted(async () => {
const { data } = await getJob(route.params.id)
job.value = data
// 如果用户已登录，检查是否已投递
// 如果用户已登录，检查是否已投递、已收藏
if (auth.isLoggedIn && auth.isSeeker) {
try {
const { data: applications } = await getMyApplications()
// 检查该职位是否已在已投递列表中
applied.value = applications.results?.some(app => app.job.id === parseInt(route.params.id)) || false
const [{ data: applications }, { data: favorites }] = await Promise.all([
getMyApplications(),
getMyFavorites(),
])
applied.value = applications.results?.some(app => app.job === parseInt(route.params.id)) || false
collected.value = favorites.results?.some(f => f.job.id === parseInt(route.params.id)) || false
} catch (e) {
console.error('Failed to fetch applications:', e)
console.error('Failed to fetch user state:', e)
}
}
} finally {

39
offer_frontend/src/views/seeker/FavoritesView.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<div>
<h2>我的收藏</h2>
<el-table :data="favorites" v-loading="loading" border>
<el-table-column prop="job.title" label="职位" />
<el-table-column prop="job.organization_name" label="公司" />
<el-table-column prop="job.location" label="地点" />
<el-table-column prop="job.salary" label="薪资" />
<el-table-column label="操作" width="120">
<template #default="{ row }">
<el-button type="primary" size="small" @click="router.push({ name: 'JobDetail', params: { id: row.job.id } })">查看</el-button>
</template>
</el-table-column>
</el-table>
<el-empty v-if="favorites.length === 0 && !loading" description="暂无收藏职位" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getMyFavorites } from '@/api/jobs'
const router = useRouter()
const favorites = ref([])
const loading = ref(false)
onMounted(async () => {
loading.value = true
try {
const { data } = await getMyFavorites()
favorites.value = data.results ?? data
} catch (e) {
console.error('Failed to fetch favorites:', e)
} finally {
loading.value = false
}
})
</script>