UI优化更新:面试模拟、简历面试、项目库、求职策略等多个页面改进

主要更新:
- 面试模拟页:移除上滑查看评价,添加渐进式评分(72→81→89)
- 简历面试页:添加岗位头像、标签背景、面试题加粗等视觉优化
- 项目库页:添加"我完成的项目库"板块,增加hover效果
- 求职策略详情页:优化圆柱体和矩形对齐,添加CSV岗位数据,调整批次文字位置
- 企业岗位列表页:添加返回按钮功能
- 全局:统一岗位级别术语(普通岗/技术骨干岗/储备干部岗)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
KQL
2025-09-05 20:46:03 +08:00
parent 1703894e74
commit 4e0e96e6b8
64 changed files with 7806 additions and 2112 deletions

View File

@@ -1,8 +1,61 @@
.company-jobs-list-page {
width: 100%;
height: 100%;
position: relative;
/* 返回按钮样式 */
.back-button-wrapper {
position: absolute;
top: 20px;
left: 20px; /* 与岗位卡片左对齐 */
z-index: 10;
}
.back-button {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background-color: #ffffff;
border: 1px solid #e5e6eb;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
font-weight: 500;
color: #4e5969;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
&:hover {
background-color: #f7f8fa;
border-color: #2c7aff;
color: #2c7aff;
transform: translateX(-2px);
box-shadow: 0 4px 8px rgba(44, 122, 255, 0.15);
}
&:active {
transform: scale(0.98) translateX(-2px);
}
.back-icon {
font-size: 18px;
line-height: 1;
font-weight: 600;
}
.back-text {
font-size: 14px;
}
}
}
.company-jobs-list-page-wrapper {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 20px;
padding-top: 60px;
.jobs-list-margin {
> li {

View File

@@ -1,4 +1,5 @@
import { useState, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import JobList from "@/pages/CompanyJobsPage/components/JobList";
import InfiniteScroll from "@/components/InfiniteScroll";
import { getJobsList } from "@/services";
@@ -8,10 +9,16 @@ import "./index.css";
const PAGE_SIZE = 20;
const CompanyJobsListPage = () => {
const navigate = useNavigate();
const [jobs, setJobs] = useState([]);
const [listPage, setListPage] = useState(1);
const [listHasMore, setListHasMore] = useState(true);
// 返回到企业内推岗位页面
const handleBack = () => {
navigate("/company-jobs");
};
const fetchJobs = useCallback(async () => {
const res = await getJobsList({
page: listPage,
@@ -33,14 +40,24 @@ const CompanyJobsListPage = () => {
}, [listPage]);
return (
<InfiniteScroll
loadMore={fetchJobs}
hasMore={listHasMore}
empty={jobs.length === 0}
className="company-jobs-list-page-wrapper"
>
<JobList data={jobs} className="jobs-list-margin" />
</InfiniteScroll>
<div className="company-jobs-list-page">
{/* 返回按钮 */}
<div className="back-button-wrapper">
<button className="back-button" onClick={handleBack}>
<span className="back-icon"></span>
<span className="back-text">返回</span>
</button>
</div>
<InfiniteScroll
loadMore={fetchJobs}
hasMore={listHasMore}
empty={jobs.length === 0}
className="company-jobs-list-page-wrapper"
>
<JobList data={jobs} className="jobs-list-margin" />
</InfiniteScroll>
</div>
);
};