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:
@@ -1,105 +1,101 @@
|
||||
import { useState } from "react";
|
||||
import { Input } from "@arco-design/web-react";
|
||||
import toast from "@/components/Toast";
|
||||
import InfiniteScroll from "@/components/InfiniteScroll";
|
||||
import ProjectCasesModal from "./components/ProjectCasesModal";
|
||||
import { getProjectsList, getProjectsdetail } from "@/services/projectLibrary";
|
||||
import "./index.css";
|
||||
|
||||
const InputSearch = Input.Search;
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
const ProjectLibrary = () => {
|
||||
const [modalData, setModalData] = useState(undefined);
|
||||
const [projectList, setProjectList] = useState([]);
|
||||
const [projectCasesModalVisible, setProjectCasesModalVisible] =
|
||||
useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
|
||||
const onSearch = (value) => {
|
||||
setProjectList([]);
|
||||
setHasMore(true);
|
||||
setPage(1);
|
||||
fetchProjects(value, 1);
|
||||
};
|
||||
|
||||
const handleProjectClick = async (item) => {
|
||||
if (item?.id) {
|
||||
const res = await getProjectsdetail(item.id);
|
||||
if (res.success) {
|
||||
setModalData(res.data);
|
||||
setProjectCasesModalVisible(true);
|
||||
} else {
|
||||
toast.error(res.message);
|
||||
}
|
||||
} else {
|
||||
toast.error("加载数据失败,请刷新重试");
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setProjectCasesModalVisible(false);
|
||||
setModalData(undefined);
|
||||
};
|
||||
|
||||
const fetchProjects = async (searchValue = "", pageNum) => {
|
||||
try {
|
||||
const res = await getProjectsList({
|
||||
search: searchValue,
|
||||
page: pageNum ?? page,
|
||||
pageSize: PAGE_SIZE,
|
||||
});
|
||||
if (res.success) {
|
||||
setProjectList((prevList) => {
|
||||
const newList = [...prevList, ...res.data];
|
||||
if (res.total === newList?.length) {
|
||||
setHasMore(false);
|
||||
} else {
|
||||
setPage((prevPage) => prevPage + 1);
|
||||
}
|
||||
return newList;
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch projects:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="project-library-page">
|
||||
<div className="project-library-wrapper">
|
||||
<div className="project-library-search-area">
|
||||
<InputSearch
|
||||
className="ser-portfolio-search"
|
||||
onSearch={onSearch}
|
||||
searchButton="搜索"
|
||||
/>
|
||||
</div>
|
||||
<InfiniteScroll
|
||||
loadMore={fetchProjects}
|
||||
hasMore={hasMore}
|
||||
empty={projectList.length === 0}
|
||||
className="project-library-list"
|
||||
>
|
||||
{projectList.map((item) => (
|
||||
<li className="project-library-item" key={item.id}>
|
||||
<p className="project-library-item-title">{item.description}</p>
|
||||
<div>
|
||||
<p>{item.name}</p>
|
||||
<span onClick={() => handleProjectClick(item)}>详情 ></span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
<ProjectCasesModal
|
||||
data={modalData}
|
||||
visible={projectCasesModalVisible}
|
||||
onClose={handleCloseModal}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectLibrary;
|
||||
import { useState } from "react";
|
||||
import toast from "@/components/Toast";
|
||||
import InfiniteScroll from "@/components/InfiniteScroll";
|
||||
import ProjectCasesModal from "./components/ProjectCasesModal";
|
||||
import { getProjectsList, getProjectsdetail } from "@/services/projectLibrary";
|
||||
import "./index.css";
|
||||
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
const ProjectLibrary = () => {
|
||||
const [modalData, setModalData] = useState(undefined);
|
||||
const [projectList, setProjectList] = useState([]);
|
||||
const [projectCasesModalVisible, setProjectCasesModalVisible] =
|
||||
useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
|
||||
|
||||
|
||||
const handleProjectClick = async (item) => {
|
||||
if (item?.id) {
|
||||
const res = await getProjectsdetail(item.id);
|
||||
if (res.success) {
|
||||
setModalData(res.data);
|
||||
setProjectCasesModalVisible(true);
|
||||
} else {
|
||||
toast.error(res.message);
|
||||
}
|
||||
} else {
|
||||
toast.error("加载数据失败,请刷新重试");
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setProjectCasesModalVisible(false);
|
||||
setModalData(undefined);
|
||||
};
|
||||
|
||||
const fetchProjects = async (pageNum) => {
|
||||
try {
|
||||
const res = await getProjectsList({
|
||||
page: pageNum ?? page,
|
||||
pageSize: PAGE_SIZE,
|
||||
});
|
||||
if (res.success) {
|
||||
setProjectList((prevList) => {
|
||||
const newList = [...prevList, ...res.data];
|
||||
if (res.total === newList?.length) {
|
||||
setHasMore(false);
|
||||
} else {
|
||||
setPage((prevPage) => prevPage + 1);
|
||||
}
|
||||
return newList;
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch projects:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="project-library-page">
|
||||
<div className="project-library-wrapper">
|
||||
<p className="project-library-title">文旅班级项目库</p>
|
||||
<InfiniteScroll
|
||||
loadMore={fetchProjects}
|
||||
hasMore={hasMore}
|
||||
empty={projectList.length === 0}
|
||||
className="project-library-list"
|
||||
>
|
||||
{projectList.map((item) => (
|
||||
<li className="project-library-item" key={item.id}>
|
||||
<p className="project-library-item-title">{item.description}</p>
|
||||
<div>
|
||||
<p>{item.name}</p>
|
||||
<span onClick={() => handleProjectClick(item)}>详情 ></span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
|
||||
{/* 我的项目库板块 */}
|
||||
<div className="project-library-wrapper my-project-library">
|
||||
<p className="project-library-title">我完成的项目库</p>
|
||||
<div className="project-library-empty">
|
||||
<p>暂无项目</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProjectCasesModal
|
||||
data={modalData}
|
||||
visible={projectCasesModalVisible}
|
||||
onClose={handleCloseModal}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectLibrary;
|
||||
|
||||
Reference in New Issue
Block a user