feat: 导入企业内推岗位JSON数据并优化展示
- 成功导入39个企业内推岗位数据从JSON文件 - 实现岗位相关标签分类显示(专业相关/非专业相关/人才出海) - 为不同岗位类型标签设置渐变色区分 - 统一普通标签为白色背景样式 - 优化标签显示逻辑和优先级排序 - 将截止时间移至投递按钮下方 - 修复mockData.js语法错误 - 整理数据文件结构,将CSV转换为JSON格式 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -57,14 +57,45 @@
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.company-jobs-info-position {
|
||||
.company-jobs-info-position-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.company-jobs-info-position {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1d2129;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.company-jobs-info-category-tag {
|
||||
padding: 2px 8px;
|
||||
background: #4080ff;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
border-radius: 12px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 根据岗位相关标签内容设置不同颜色 */
|
||||
.company-jobs-info-category-tag[data-category="专业相关岗位"] {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.company-jobs-info-category-tag[data-category="非专业相关岗位"] {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
|
||||
}
|
||||
|
||||
.company-jobs-info-category-tag[data-category="人才出海岗位"] {
|
||||
background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
|
||||
}
|
||||
|
||||
.company-jobs-info-tags {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -139,6 +170,15 @@
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.company-jobs-info-deadline {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: #86909c;
|
||||
margin-top: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,47 +43,125 @@ export default ({ className = "", data = [], backgroundColor }) => {
|
||||
}
|
||||
};
|
||||
|
||||
// 处理标签显示,优先级:工作地点 > 学历要求 > 福利标签 > 职位标签
|
||||
const getDisplayTags = (item) => {
|
||||
const allTags = [];
|
||||
|
||||
// 添加岗位相关标签(显示在岗位名称右侧)
|
||||
if (item.jobCategory) {
|
||||
allTags.push({
|
||||
text: item.jobCategory,
|
||||
type: 'category',
|
||||
priority: 0
|
||||
});
|
||||
}
|
||||
|
||||
// 添加工作地点标签
|
||||
if (item.location) {
|
||||
allTags.push({
|
||||
text: item.location,
|
||||
type: 'location',
|
||||
priority: 1
|
||||
});
|
||||
}
|
||||
|
||||
// 添加学历要求标签
|
||||
if (item.education) {
|
||||
allTags.push({
|
||||
text: item.education,
|
||||
type: 'education',
|
||||
priority: 2
|
||||
});
|
||||
}
|
||||
|
||||
// 添加福利标签
|
||||
if (item.benefits && Array.isArray(item.benefits)) {
|
||||
item.benefits.slice(0, 2).forEach(benefit => {
|
||||
allTags.push({
|
||||
text: benefit,
|
||||
type: 'benefit',
|
||||
priority: 3
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 添加职位标签
|
||||
if (item.tags && Array.isArray(item.tags)) {
|
||||
item.tags.forEach(tag => {
|
||||
allTags.push({
|
||||
text: tag,
|
||||
type: 'skill',
|
||||
priority: 4
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 按优先级排序并限制显示数量(最多显示8个标签,约2行)
|
||||
return allTags.sort((a, b) => a.priority - b.priority).slice(0, 8);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ul className={`company-jobs-page-left-list ${className}`}>
|
||||
{data?.map((item) => (
|
||||
<li
|
||||
key={item.id}
|
||||
className="company-jobs-page-left-list-item"
|
||||
style={{ backgroundColor }}
|
||||
onClick={(e) => handleJobClick(e, item)}
|
||||
>
|
||||
<i className={`icon icon-${item?.jobType}`}></i>
|
||||
<div className="company-jobs-info">
|
||||
<p className="company-jobs-info-position">{item?.position}</p>
|
||||
<ul className="company-jobs-info-tags">
|
||||
{item?.tags?.map((tag, index) => (
|
||||
<li
|
||||
key={`${item.id}-tag-${index}`}
|
||||
className="company-jobs-info-tag"
|
||||
>
|
||||
{tag}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="company-jobs-info-position-count">
|
||||
岗位招聘数量仅剩{item?.remainingPositions}名
|
||||
</p>
|
||||
</div>
|
||||
<div className="company-jobs-btn-wrapper">
|
||||
<p className="company-jobs-info-position-salary">
|
||||
{item?.salary}
|
||||
</p>
|
||||
<button
|
||||
className="company-jobs-btn"
|
||||
onClick={(e) => handleDeliverClick(e, item)}
|
||||
>
|
||||
<i />
|
||||
<span>投递</span>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{data?.map((item) => {
|
||||
const displayTags = getDisplayTags(item);
|
||||
const categoryTag = displayTags.find(tag => tag.type === 'category');
|
||||
const otherTags = displayTags.filter(tag => tag.type !== 'category');
|
||||
|
||||
return (
|
||||
<li
|
||||
key={item.id}
|
||||
className="company-jobs-page-left-list-item"
|
||||
style={{ backgroundColor }}
|
||||
onClick={(e) => handleJobClick(e, item)}
|
||||
>
|
||||
<i className={`icon icon-${item?.jobType}`}></i>
|
||||
<div className="company-jobs-info">
|
||||
<div className="company-jobs-info-position-wrapper">
|
||||
<p className="company-jobs-info-position">{item?.position}</p>
|
||||
{categoryTag && (
|
||||
<span
|
||||
className="company-jobs-info-category-tag"
|
||||
data-category={categoryTag.text}
|
||||
>
|
||||
{categoryTag.text}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<ul className="company-jobs-info-tags">
|
||||
{otherTags?.map((tag, index) => (
|
||||
<li
|
||||
key={`${item.id}-tag-${index}`}
|
||||
className="company-jobs-info-tag"
|
||||
>
|
||||
{tag.text}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="company-jobs-info-position-count">
|
||||
岗位招聘数量仅剩{item?.remainingPositions}名
|
||||
</p>
|
||||
</div>
|
||||
<div className="company-jobs-btn-wrapper">
|
||||
<p className="company-jobs-info-position-salary">
|
||||
{item?.salary}
|
||||
</p>
|
||||
<button
|
||||
className="company-jobs-btn"
|
||||
onClick={(e) => handleDeliverClick(e, item)}
|
||||
>
|
||||
<i />
|
||||
<span>投递</span>
|
||||
</button>
|
||||
{item?.deadline && (
|
||||
<p className="company-jobs-info-deadline">
|
||||
截止:{item.deadline}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<JobInfoModal
|
||||
data={jobInfoData}
|
||||
|
||||
Reference in New Issue
Block a user