Duguay/teach_sys_Demo
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 🎸 安装了全局骨架屏

Browse Source
This commit is contained in:
前端人绝不为奴
2025-08-20 10:40:22 +08:00
parent 60771082ef
commit 14f722263b
3 changed files with 78 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Layout/index.css
View File

@@ -4,6 +4,13 @@
min-height: 100vh;
width: 100%;
background-color: #f2f3f5;
.app-layout-skeleton {
flex: 1;
box-sizing: border-box;
padding: 100px;
background-color: aqua;
}
}
/* 主内容区域 */
.main-content {

5
src/components/Layout/index.jsx
View File

@@ -1,4 +1,5 @@
import { useState, useEffect } from "react";
import { Skeleton } from "@arco-design/web-react";
import Sidebar from "../Sidebar";
import "./index.css";
@@ -8,7 +9,9 @@ const Layout = ({ children }) => {
return (
<div className="app-layout">
<Sidebar isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
<main className="main-content">{children}</main>
<Skeleton loading={false} animation className="app-layout-skeleton">
<main className="main-content">{children}</main>
</Skeleton>
</div>
);
};

121
src/pages/CompanyJobsPage/index.jsx
View File

@@ -21,39 +21,41 @@ const CompanyJobsPage = () => {
const fetchData = async () => {
try {
setLoading(true);
// Get current user's student ID from API
let studentId = null;
try {
const currentStudent = await studentAPI.getCurrentStudent();
studentId = currentStudent?.id;
} catch (err) {
console.log('Could not get current student:', err);
console.log("Could not get current student:", err);
}
// Fetch jobs (and interviews if we have a student ID)
const jobsData = await jobAPI.getList({
page: 1,
pageSize: 10,
isActive: true
const jobsData = await jobAPI.getList({
page: 1,
pageSize: 10,
isActive: true,
});
let interviewsData = { data: [] };
if (studentId) {
try {
interviewsData = await interviewAPI.getList({
interviewsData = await interviewAPI.getList({
studentId: studentId,
status: 'SCHEDULED'
status: "SCHEDULED",
});
} catch (err) {
console.log('No interviews found or API error');
console.log("No interviews found or API error");
}
}
// Map data to frontend format
const mappedJobs = mapJobList(jobsData.data || jobsData);
const mappedInterviews = mapInterviewList(interviewsData.data || interviewsData);
const mappedInterviews = mapInterviewList(
interviewsData.data || interviewsData
);
setJobs(mappedJobs);
setInterviews(mappedInterviews);
} catch (error) {
@@ -73,7 +75,10 @@ const CompanyJobsPage = () => {
if (loading) {
return (
<div className="company-jobs-page-wrapper">
<div className="company-jobs-page" style={{ justifyContent: 'center', alignItems: 'center' }}>
<div
className="company-jobs-page"
style={{ justifyContent: "center", alignItems: "center" }}
>
<p>加载中...</p>
</div>
</div>
@@ -86,10 +91,7 @@ const CompanyJobsPage = () => {
<div className="company-jobs-page-left" onClick={handleJobWrapperClick}>
<p className="company-jobs-page-title">企业内推岗位库</p>
<div className="company-jobs-page-left-list-wrapper">
<JobList
data={jobs}
backgroundColor="#F7F8FA"
/>
<JobList data={jobs} backgroundColor="#F7F8FA" />
</div>
</div>
<div className="company-jobs-page-interview-wrapper">
@@ -102,43 +104,54 @@ const CompanyJobsPage = () => {
>
<p className="company-jobs-page-title">内推岗位面试</p>
<ul className="company-jobs-page-interview-list">
{interviews.length > 0 ? interviews.map((item) => (
<li className="company-jobs-page-interview-item" key={item.id}>
<div className="company-jobs-page-interview-item-info">
<p className="company-jobs-page-interview-item-info-position">
{item.position}
</p>
{item.job?.tags?.length > 0 ? (
<ul className="company-jobs-page-interview-item-info-tags">
{item.job.tags.map((tag) => (
<li
className="company-jobs-page-interview-item-info-tag"
key={tag}
>
{tag}
</li>
))}
</ul>
) : null}
<span className="company-jobs-page-interview-item-info-salary">
{item.job?.salary || '面议'}
</span>
</div>
<div className="company-jobs-page-interview-item-btn-wrapper">
<span>{item.interviewTime}</span>
<div
className={`company-jobs-page-interview-item-btn ${
item.status !== "COMPLETED" &&
"company-jobs-page-interview-item-btn-active"
}`}
>
{item.statusText}
{interviews.length > 0 ? (
interviews.map((item) => (
<li
className="company-jobs-page-interview-item"
key={item.id}
>
<div className="company-jobs-page-interview-item-info">
<p className="company-jobs-page-interview-item-info-position">
{item.position}
</p>
{item.job?.tags?.length > 0 ? (
<ul className="company-jobs-page-interview-item-info-tags">
{item.job.tags.map((tag) => (
<li
className="company-jobs-page-interview-item-info-tag"
key={tag}
>
{tag}
</li>
))}
</ul>
) : null}
<span className="company-jobs-page-interview-item-info-salary">
{item.job?.salary || "面议"}
</span>
</div>
</div>
</li>
)) : (
<div className="company-jobs-page-interview-item-btn-wrapper">
<span>{item.interviewTime}</span>
<div
className={`company-jobs-page-interview-item-btn ${
item.status !== "COMPLETED" &&
"company-jobs-page-interview-item-btn-active"
}`}
>
{item.statusText}
</div>
</div>
</li>
))
) : (
<li className="company-jobs-page-interview-item">
<p style={{ color: '#999', textAlign: 'center', width: '100%' }}>
<p
style={{
color: "#999",
textAlign: "center",
width: "100%",
}}
>
暂无面试安排
</p>
</li>