Skip to content

R
recruit-sys
Commit 3e6bc5e4 authored by 李文光's avatar 李文光
Browse files
Options

style(jobs): 重构岗位详情概览布局

parent f42e88bd
Show whitespace changes
Inline Side-by-side
Showing with 209 additions and 89 deletions
vue-app/src/components/jobs/JobDetail.vue
View file @ 3e6bc5e4
......@@ -543,54 +543,71 @@ const mainAction = async () => {
<el-tab-pane label="概览" name="overview">
<div class="job-detail-content">
<div class="job-detail-main">
<article class="card">
<div class="card-head">
<div>
<span class="section-kicker">岗位说明</span>
<h3>这个岗位在招什么人</h3>
</div>
<el-button link @click="editJob">修改</el-button>
</div>
<p class="job-jd-summary">
{{ job.jd || '还没有岗位说明。先补充岗位背景与核心职责，后续匹配才会更准确。' }}
<article class="job-document" aria-labelledby="job-document-title">
<header class="job-document-header">
<div class="job-document-toolbar">
<span>岗位说明书</span>
<el-button link @click="editJob">编辑</el-button>
</div>
<h2 id="job-document-title">{{ job.title }}</h2>
<p class="job-document-subtitle">
{{ job.department || '部门待补充' }} · {{ job.recruitType || '社招' }}
<template v-if="job.level"> · {{ job.level }}</template>
</p>
<div class="job-criteria-list">
<div>
<b>核心职责</b>
<p>{{ job.responsibilities || '暂未填写' }}</p>
</div>
</header>
<dl class="job-document-meta">
<div>
<b>任职要求</b>
<p>{{ job.requirements || job.mustHave || '暂未填写' }}</p>
<dt>薪资范围</dt>
<dd>{{ job.salaryRange || '待补充' }}</dd>
</div>
<div>
<b>加分项</b>
<p>{{ job.niceToHave || '暂未填写' }}</p>
</div>
</div>
<div class="job-base-grid">
<div v-if="job.level">
<span>职级</span><strong>{{ job.level }}</strong>
<dt>职级</dt>
<dd>{{ job.level }}</dd>
</div>
<div v-if="job.workLocation">
<span>工作地点</span><strong>{{ job.workLocation }}</strong>
<dt>工作地点</dt>
<dd>{{ job.workLocation }}</dd>
</div>
<div v-if="job.recruitType">
<span>招聘类型</span><strong>{{ job.recruitType }}</strong>
</div>
<div v-if="job.hireReason">
<span>招聘原因</span><strong>{{ job.hireReason }}</strong>
<div>
<dt>招聘人数</dt>
<dd>{{ Number(job.headcount || 0) }} 人</dd>
</div>
<div v-if="job.startDate">
<span>到岗时间</span><strong>{{ job.startDate }}</strong>
<dt>到岗时间</dt>
<dd>{{ job.startDate }}</dd>
</div>
<div v-if="job.reportTo">
<span>汇报对象</span><strong>{{ job.reportTo }}</strong>
</div>
<dt>汇报对象</dt>
<dd>{{ job.reportTo }}</dd>
</div>
</dl>
<section class="job-document-section">
<h3>岗位介绍</h3>
<p :class="{ 'is-empty': !job.jd }">{{ job.jd || '岗位介绍待补充' }}</p>
</section>
<section class="job-document-section">
<h3>岗位职责</h3>
<p :class="{ 'is-empty': !job.responsibilities }">{{ job.responsibilities || '岗位职责待补充' }}</p>
</section>
<section class="job-document-section">
<h3>任职要求</h3>
<p :class="{ 'is-empty': !job.requirements && !job.mustHave }">
{{ job.requirements || job.mustHave || '任职要求待补充' }}
</p>
</section>
<section v-if="job.niceToHave" class="job-document-section">
<h3>加分项</h3>
<p>{{ job.niceToHave }}</p>
</section>
<footer class="job-document-footer">
<span>JD 版本：{{ statusLabel(job.jdVersion) }}</span>
<span>{{ job.jdStatus || JD_STATUS.DRAFT }}</span>
</footer>
</article>
</div>
<article class="card">
<aside class="job-detail-side">
<section class="job-overview-support candidate-progress-panel">
<div class="card-head">
<div>
<span class="section-kicker">候选人</span>
......@@ -608,13 +625,9 @@ const mainAction = async () => {
</div>
</div>
<div v-else class="job-empty-inline">还没有关联候选人。可前往简历库将候选人匹配到此岗位。</div>
</article>
</div>
<aside class="job-detail-side">
<article class="card">
<span class="section-kicker">状态</span>
<h3>主数据</h3>
</section>
<section class="job-overview-support management-panel">
<h3>招聘管理</h3>
<div class="info-grid">
<div>
<span>审批状态</span><strong>{{ statusLabel(job.approvalStatus) }}</strong>
......@@ -631,13 +644,16 @@ const mainAction = async () => {
<div>
<span>匹配规则</span><strong>{{ statusLabel(job.matchRuleStatus) }}</strong>
</div>
<div v-if="job.hireReason">
<span>招聘原因</span><strong>{{ job.hireReason }}</strong>
</div>
</div>
<div class="job-quick-links">
<el-button link @click="editJob">编辑岗位信息 →</el-button>
<el-button link @click="activeTab = 'flow'">更新 JD 与招聘标准 →</el-button>
<el-button link @click="activeTab = 'publish'">确认发布与渠道状态 →</el-button>
</div>
</article>
</section>
</aside>
</div>
</el-tab-pane>
......@@ -1180,82 +1196,186 @@ const mainAction = async () => {
.job-detail-content {
display: grid;
grid-template-columns: 1fr 320px;
gap: 16px;
grid-template-columns: minmax(560px, 780px) 300px;
align-items: start;
justify-content: start;
gap: 32px;
background: var(--panel);
padding: 32px 40px;
color: var(--ink);
overflow-wrap: anywhere;
}
.job-detail-main {
min-width: 0;
max-width: 780px;
width: 100%;
justify-self: start;
}
.job-detail-side {
position: sticky;
top: 20px;
min-width: 0;
padding-top: 12px;
display: flex;
flex-direction: column;
gap: 16px;
}
.card-head {
.job-document {
max-width: 780px;
margin-inline: auto;
font-size: 15px;
line-height: 1.85;
letter-spacing: 0;
}
.job-document-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
align-items: flex-start;
h3 {
margin: 4px 0 0;
font-size: 16px;
}
gap: 16px;
color: var(--muted);
font-size: 13px;
}
.section-kicker {
font-size: 12px;
color: var(--blue);
.job-document-header {
h2 {
margin: 12px 0 8px;
font-size: 26px;
line-height: 1.4;
}
}
.job-jd-summary {
.job-document-subtitle {
margin: 0;
color: var(--muted);
line-height: 1.7;
font-size: 14px;
}
}
.job-criteria-list {
.job-document-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 32px;
padding-block: 24px;
margin: 0 0 32px;
border-bottom: 1px solid var(--line);
font-size: 14px;
> div {
background: var(--bg);
padding: 12px;
border-radius: 8px;
display: grid;
grid-template-columns: 5em minmax(0, 1fr);
gap: 12px;
}
b {
font-size: 13px;
dt {
color: var(--muted);
}
dd {
margin: 0;
}
}
.job-document-section {
margin-block: 32px;
h3 {
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
font-size: 18px;
font-weight: 600;
line-height: 1.5;
}
p {
margin: 6px 0 0;
color: var(--muted);
font-size: 13px;
margin: 0;
white-space: pre-line;
}
.is-empty {
color: var(--muted);
font-size: 14px;
}
}
.job-base-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 14px;
.job-document-footer {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
color: var(--muted);
font-size: 12px;
padding-block: 8px 24px;
}
> div {
background: var(--bg);
padding: 10px 12px;
.job-overview-support {
border: 1px solid var(--line);
border-radius: 8px;
padding: 18px;
background: color-mix(in srgb, var(--bg) 62%, var(--panel));
span {
display: block;
color: var(--muted);
font-size: 12px;
> h3 {
margin: 0 0 16px;
font-size: 16px;
}
}
strong {
.candidate-progress-panel {
margin-top: 0;
}
.management-panel {
.job-quick-links {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
}
@media (max-width: 640px) {
.job-detail-content {
display: block;
margin-top: 4px;
font-size: 14px;
padding: 24px 16px;
}
.job-detail-side {
position: static;
padding-top: 0;
}
.management-panel {
margin-top: 16px;
}
.job-document {
font-size: 16px;
}
.job-document-header h2 {
font-size: 22px;
}
.job-document-meta {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
}
.card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
h3 {
margin: 4px 0 0;
font-size: 16px;
}
.section-kicker {
font-size: 12px;
color: var(--blue);
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment