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 () => { ...@@ -543,54 +543,71 @@ const mainAction = async () => {
<el-tab-pane label="概览" name="overview"> <el-tab-pane label="概览" name="overview">
<div class="job-detail-content"> <div class="job-detail-content">
<div class="job-detail-main"> <div class="job-detail-main">
<article class="card"> <article class="job-document" aria-labelledby="job-document-title">
<div class="card-head"> <header class="job-document-header">
<div> <div class="job-document-toolbar">
<span class="section-kicker">岗位说明</span> <span>岗位说明书</span>
<h3>这个岗位在招什么人</h3> <el-button link @click="editJob">编辑</el-button>
</div> </div>
<el-button link @click="editJob">修改</el-button> <h2 id="job-document-title">{{ job.title }}</h2>
</div> <p class="job-document-subtitle">
<p class="job-jd-summary"> {{ job.department || '部门待补充' }} · {{ job.recruitType || '社招' }}
{{ job.jd || '还没有岗位说明。先补充岗位背景与核心职责，后续匹配才会更准确。' }} <template v-if="job.level"> · {{ job.level }}</template>
</p> </p>
<div class="job-criteria-list"> </header>
<div> <dl class="job-document-meta">
<b>核心职责</b>
<p>{{ job.responsibilities || '暂未填写' }}</p>
</div>
<div> <div>
<b>任职要求</b> <dt>薪资范围</dt>
<p>{{ job.requirements || job.mustHave || '暂未填写' }}</p> <dd>{{ job.salaryRange || '待补充' }}</dd>
</div> </div>
<div>
<b>加分项</b>
<p>{{ job.niceToHave || '暂未填写' }}</p>
</div>
</div>
<div class="job-base-grid">
<div v-if="job.level"> <div v-if="job.level">
<span>职级</span><strong>{{ job.level }}</strong> <dt>职级</dt>
<dd>{{ job.level }}</dd>
</div> </div>
<div v-if="job.workLocation"> <div v-if="job.workLocation">
<span>工作地点</span><strong>{{ job.workLocation }}</strong> <dt>工作地点</dt>
<dd>{{ job.workLocation }}</dd>
</div> </div>
<div v-if="job.recruitType"> <div>
<span>招聘类型</span><strong>{{ job.recruitType }}</strong> <dt>招聘人数</dt>
</div> <dd>{{ Number(job.headcount || 0) }} 人</dd>
<div v-if="job.hireReason">
<span>招聘原因</span><strong>{{ job.hireReason }}</strong>
</div> </div>
<div v-if="job.startDate"> <div v-if="job.startDate">
<span>到岗时间</span><strong>{{ job.startDate }}</strong> <dt>到岗时间</dt>
<dd>{{ job.startDate }}</dd>
</div> </div>
<div v-if="job.reportTo"> <div v-if="job.reportTo">
<span>汇报对象</span><strong>{{ job.reportTo }}</strong> <dt>汇报对象</dt>
</div> <dd>{{ job.reportTo }}</dd>
</div> </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> </article>
</div>
<article class="card"> <aside class="job-detail-side">
<section class="job-overview-support candidate-progress-panel">
<div class="card-head"> <div class="card-head">
<div> <div>
<span class="section-kicker">候选人</span> <span class="section-kicker">候选人</span>
...@@ -608,13 +625,9 @@ const mainAction = async () => { ...@@ -608,13 +625,9 @@ const mainAction = async () => {
</div> </div>
</div> </div>
<div v-else class="job-empty-inline">还没有关联候选人。可前往简历库将候选人匹配到此岗位。</div> <div v-else class="job-empty-inline">还没有关联候选人。可前往简历库将候选人匹配到此岗位。</div>
</article> </section>
</div> <section class="job-overview-support management-panel">
<h3>招聘管理</h3>
<aside class="job-detail-side">
<article class="card">
<span class="section-kicker">状态</span>
<h3>主数据</h3>
<div class="info-grid"> <div class="info-grid">
<div> <div>
<span>审批状态</span><strong>{{ statusLabel(job.approvalStatus) }}</strong> <span>审批状态</span><strong>{{ statusLabel(job.approvalStatus) }}</strong>
...@@ -631,13 +644,16 @@ const mainAction = async () => { ...@@ -631,13 +644,16 @@ const mainAction = async () => {
<div> <div>
<span>匹配规则</span><strong>{{ statusLabel(job.matchRuleStatus) }}</strong> <span>匹配规则</span><strong>{{ statusLabel(job.matchRuleStatus) }}</strong>
</div> </div>
<div v-if="job.hireReason">
<span>招聘原因</span><strong>{{ job.hireReason }}</strong>
</div>
</div> </div>
<div class="job-quick-links"> <div class="job-quick-links">
<el-button link @click="editJob">编辑岗位信息 →</el-button> <el-button link @click="editJob">编辑岗位信息 →</el-button>
<el-button link @click="activeTab = 'flow'">更新 JD 与招聘标准 →</el-button> <el-button link @click="activeTab = 'flow'">更新 JD 与招聘标准 →</el-button>
<el-button link @click="activeTab = 'publish'">确认发布与渠道状态 →</el-button> <el-button link @click="activeTab = 'publish'">确认发布与渠道状态 →</el-button>
</div> </div>
</article> </section>
</aside> </aside>
</div> </div>
</el-tab-pane> </el-tab-pane>
...@@ -1180,82 +1196,186 @@ const mainAction = async () => { ...@@ -1180,82 +1196,186 @@ const mainAction = async () => {
.job-detail-content { .job-detail-content {
display: grid; display: grid;
grid-template-columns: 1fr 320px; grid-template-columns: minmax(560px, 780px) 300px;
gap: 16px; align-items: start;
justify-content: start;
gap: 32px;
background: var(--panel);
padding: 32px 40px;
color: var(--ink);
overflow-wrap: anywhere;
} }
.job-detail-main { .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; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; 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; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; gap: 16px;
color: var(--muted);
h3 { font-size: 13px;
margin: 4px 0 0; }
font-size: 16px;
}
.section-kicker { .job-document-header {
font-size: 12px; h2 {
color: var(--blue); margin: 12px 0 8px;
font-size: 26px;
line-height: 1.4;
} }
}
.job-jd-summary { .job-document-subtitle {
margin: 0;
color: var(--muted); color: var(--muted);
line-height: 1.7; font-size: 14px;
}
} }
.job-criteria-list { .job-document-meta {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px; gap: 12px 32px;
padding-block: 24px;
margin: 0 0 32px;
border-bottom: 1px solid var(--line);
font-size: 14px;
> div { > div {
background: var(--bg); display: grid;
padding: 12px; grid-template-columns: 5em minmax(0, 1fr);
border-radius: 8px; gap: 12px;
}
b { dt {
font-size: 13px; 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 { p {
margin: 6px 0 0; margin: 0;
color: var(--muted);
font-size: 13px;
white-space: pre-line; white-space: pre-line;
} }
.is-empty {
color: var(--muted);
font-size: 14px;
} }
} }
.job-base-grid { .job-document-footer {
display: grid; display: flex;
grid-template-columns: repeat(3, 1fr); flex-wrap: wrap;
gap: 14px; gap: 8px 20px;
margin-top: 14px; color: var(--muted);
font-size: 12px;
padding-block: 8px 24px;
}
> div { .job-overview-support {
background: var(--bg); border: 1px solid var(--line);
padding: 10px 12px;
border-radius: 8px; border-radius: 8px;
padding: 18px;
background: color-mix(in srgb, var(--bg) 62%, var(--panel));
span { > h3 {
display: block; margin: 0 0 16px;
color: var(--muted); font-size: 16px;
font-size: 12px;
} }
}
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; display: block;
margin-top: 4px; padding: 24px 16px;
font-size: 14px; }
.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