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 11:43:10 +08:00
parent 14f722263b
commit 95a099f613
10 changed files with 207 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@@ -16,12 +16,15 @@
},
"dependencies": {
"@arco-design/web-react": "^2.66.4",
"@reduxjs/toolkit": "^2.8.2",
"axios": "^1.11.0",
"echarts": "^6.0.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-echarts": "^0.1.1",
"react-router-dom": "^7.7.1"
"react-redux": "^9.2.0",
"react-router-dom": "^7.7.1",
"redux": "^5.0.1"
},
"devDependencies": {
"@eslint/js": "^9.30.1",

101
pnpm-lock.yaml generated
View File

@@ -11,6 +11,9 @@ importers:
'@arco-design/web-react':
specifier: ^2.66.4
version: 2.66.4(@types/react@19.1.10)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
'@reduxjs/toolkit':
specifier: ^2.8.2
version: 2.8.2(react-redux@9.2.0(@types/react@19.1.10)(react@19.1.1)(redux@5.0.1))(react@19.1.1)
axios:
specifier: ^1.11.0
version: 1.11.0
@@ -26,9 +29,15 @@ importers:
react-echarts:
specifier: ^0.1.1
version: 0.1.1(react@19.1.1)
react-redux:
specifier: ^9.2.0
version: 9.2.0(@types/react@19.1.10)(react@19.1.1)(redux@5.0.1)
react-router-dom:
specifier: ^7.7.1
version: 7.8.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
redux:
specifier: ^5.0.1
version: 5.0.1
devDependencies:
'@eslint/js':
specifier: ^9.30.1
@@ -396,6 +405,17 @@ packages:
'@jridgewell/trace-mapping@0.3.30':
resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
'@reduxjs/toolkit@2.8.2':
resolution: {integrity: sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A==}
peerDependencies:
react: ^16.9.0 || ^17.0.0 || ^18 || ^19
react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
peerDependenciesMeta:
react:
optional: true
react-redux:
optional: true
'@rolldown/pluginutils@1.0.0-beta.27':
resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
@@ -510,6 +530,12 @@ packages:
cpu: [x64]
os: [win32]
'@standard-schema/spec@1.0.0':
resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
'@standard-schema/utils@0.3.0':
resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
'@types/babel__core@7.20.5':
resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
@@ -536,6 +562,9 @@ packages:
'@types/react@19.1.10':
resolution: {integrity: sha512-EhBeSYX0Y6ye8pNebpKrwFJq7BoQ8J5SO6NlvNwwHjSj6adXJViPQrKlsyPw7hLBLvckEMO1yxeGdR82YBBlDg==}
'@types/use-sync-external-store@0.0.6':
resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
'@vitejs/plugin-react@4.7.0':
resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==}
engines: {node: ^14.18.0 || >=16.0.0}
@@ -878,6 +907,9 @@ packages:
resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
engines: {node: '>= 4'}
immer@10.1.1:
resolution: {integrity: sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==}
import-fresh@3.3.1:
resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
engines: {node: '>=6'}
@@ -1075,6 +1107,18 @@ packages:
react-is@18.3.1:
resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
react-redux@9.2.0:
resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==}
peerDependencies:
'@types/react': ^18.2.25 || ^19
react: ^18.0 || ^19
redux: ^5.0.0
peerDependenciesMeta:
'@types/react':
optional: true
redux:
optional: true
react-refresh@0.17.0:
resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
engines: {node: '>=0.10.0'}
@@ -1106,6 +1150,17 @@ packages:
resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
engines: {node: '>=0.10.0'}
redux-thunk@3.1.0:
resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
peerDependencies:
redux: ^5.0.0
redux@5.0.1:
resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
reselect@5.1.1:
resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
resize-observer-polyfill@1.5.1:
resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
@@ -1200,6 +1255,11 @@ packages:
'@types/react':
optional: true
use-sync-external-store@1.5.0:
resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
vite@7.1.2:
resolution: {integrity: sha512-J0SQBPlQiEXAF7tajiH+rUooJPo0l8KQgyg4/aMunNtrOa7bwuZJsJbDWzeljqQpgftxuq5yNJxQ91O9ts29UQ==}
engines: {node: ^20.19.0 || >=22.12.0}
@@ -1557,6 +1617,18 @@ snapshots:
'@jridgewell/resolve-uri': 3.1.2
'@jridgewell/sourcemap-codec': 1.5.5
'@reduxjs/toolkit@2.8.2(react-redux@9.2.0(@types/react@19.1.10)(react@19.1.1)(redux@5.0.1))(react@19.1.1)':
dependencies:
'@standard-schema/spec': 1.0.0
'@standard-schema/utils': 0.3.0
immer: 10.1.1
redux: 5.0.1
redux-thunk: 3.1.0(redux@5.0.1)
reselect: 5.1.1
optionalDependencies:
react: 19.1.1
react-redux: 9.2.0(@types/react@19.1.10)(react@19.1.1)(redux@5.0.1)
'@rolldown/pluginutils@1.0.0-beta.27': {}
'@rollup/rollup-android-arm-eabi@4.46.2':
@@ -1619,6 +1691,10 @@ snapshots:
'@rollup/rollup-win32-x64-msvc@4.46.2':
optional: true
'@standard-schema/spec@1.0.0': {}
'@standard-schema/utils@0.3.0': {}
'@types/babel__core@7.20.5':
dependencies:
'@babel/parser': 7.28.0
@@ -1652,6 +1728,8 @@ snapshots:
dependencies:
csstype: 3.1.3
'@types/use-sync-external-store@0.0.6': {}
'@vitejs/plugin-react@4.7.0(vite@7.1.2)':
dependencies:
'@babel/core': 7.28.0
@@ -2025,6 +2103,8 @@ snapshots:
ignore@5.3.2: {}
immer@10.1.1: {}
import-fresh@3.3.1:
dependencies:
parent-module: 1.0.1
@@ -2194,6 +2274,15 @@ snapshots:
react-is@18.3.1: {}
react-redux@9.2.0(@types/react@19.1.10)(react@19.1.1)(redux@5.0.1):
dependencies:
'@types/use-sync-external-store': 0.0.6
react: 19.1.1
use-sync-external-store: 1.5.0(react@19.1.1)
optionalDependencies:
'@types/react': 19.1.10
redux: 5.0.1
react-refresh@0.17.0: {}
react-router-dom@7.8.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
@@ -2221,6 +2310,14 @@ snapshots:
react@19.1.1: {}
redux-thunk@3.1.0(redux@5.0.1):
dependencies:
redux: 5.0.1
redux@5.0.1: {}
reselect@5.1.1: {}
resize-observer-polyfill@1.5.1: {}
resolve-from@4.0.0: {}
@@ -2319,6 +2416,10 @@ snapshots:
optionalDependencies:
'@types/react': 19.1.10
use-sync-external-store@1.5.0(react@19.1.1):
dependencies:
react: 19.1.1
vite@7.1.2:
dependencies:
esbuild: 0.25.9

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

@@ -5,11 +5,9 @@
width: 100%;
background-color: #f2f3f5;
.app-layout-skeleton {
.app-layout-spin {
flex: 1;
box-sizing: border-box;
padding: 100px;
background-color: aqua;
position: relative;
}
}
/* 主内容区域 */

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

@@ -1,17 +1,19 @@
import { useState, useEffect } from "react";
import { Skeleton } from "@arco-design/web-react";
import { useState } from "react";
import { Spin } from "@arco-design/web-react";
import { useSelector } from "react-redux";
import Sidebar from "../Sidebar";
import "./index.css";
const Layout = ({ children }) => {
const loading = useSelector((state) => state.loading.value);
const [isCollapsed, setIsCollapsed] = useState(true);
return (
<div className="app-layout">
<Sidebar isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
<Skeleton loading={false} animation className="app-layout-skeleton">
<Spin loading={loading} size={40} className="app-layout-spin">
<main className="main-content">{children}</main>
</Skeleton>
</Spin>
</div>
);
};

4
src/main.jsx
View File

@@ -1,9 +1,13 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App.jsx";
createRoot(document.getElementById("root")).render(
<StrictMode>
<Provider store={store}>
<App />
</Provider>
</StrictMode>
);

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

@@ -1,27 +1,25 @@
import { useState, useEffect } from "react";
import { useState, useEffect, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { jobAPI, interviewAPI, studentAPI } from "@/services/api";
import { mapJobList, mapInterviewList } from "@/utils/dataMapper";
import JobList from "./components/JobList";
import { useDispatch } from "react-redux";
import { setLoadingTrue, setLoadingFalse } from "@/store/slices/loadingSlice";
// 从Redux store中获取loading状态
import "./index.css";
const CompanyJobsPage = () => {
const dispatch = useDispatch();
const [jobs, setJobs] = useState([]);
const [interviews, setInterviews] = useState([]);
const [loading, setLoading] = useState(true);
const [isExpand, setIsExpand] = useState(false); // 是否展开
const navigate = useNavigate();
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
setLoading(true);
dispatch(setLoadingTrue());
// Get current user's student ID from API
let studentId = null;
try {
@@ -59,12 +57,14 @@ const CompanyJobsPage = () => {
setJobs(mappedJobs);
setInterviews(mappedInterviews);
} catch (error) {
dispatch(setLoadingFalse());
console.error("Failed to fetch data:", error);
// Fallback to empty data
setJobs([]);
setInterviews([]);
} finally {
setLoading(false);
dispatch(setLoadingFalse());
}
};
@@ -72,18 +72,9 @@ const CompanyJobsPage = () => {
navigate("/company-jobs-list");
};
if (loading) {
return (
<div className="company-jobs-page-wrapper">
<div
className="company-jobs-page"
style={{ justifyContent: "center", alignItems: "center" }}
>
<p>加载中...</p>
</div>
</div>
);
}
useEffect(() => {
fetchData();
}, []);
return (
<div className="company-jobs-page-wrapper">

10
src/store/index.js Normal file
View File

@@ -0,0 +1,10 @@
import { configureStore } from '@reduxjs/toolkit';
import loadingReducer from './slices/loadingSlice';
import userReducer from './slices/userSlice'; // 导入新的用户reducer
export default configureStore({
reducer: {
loading: loadingReducer,
user: userReducer // 添加用户reducer到store
}
});

25
src/store/slices/loadingSlice.js Normal file
View File

@@ -0,0 +1,25 @@
import { createSlice } from "@reduxjs/toolkit";
// 创建slice
const loadingSlice = createSlice({
name: "loading",
initialState: {
value: false,
},
reducers: {
// 设置loading状态为true
setLoadingTrue: (state) => {
state.value = true;
},
// 设置loading状态为false
setLoadingFalse: (state) => {
state.value = false;
},
},
});
// 导出actions
export const { setLoadingTrue, setLoadingFalse } = loadingSlice.actions;
// 导出reducer
export default loadingSlice.reducer;

38
src/store/slices/userSlice.js Normal file
View File

@@ -0,0 +1,38 @@
import { createSlice } from '@reduxjs/toolkit';
// 定义初始状态
const initialState = {
userInfo: null, // 用户信息初始为null
isLoggedIn: false // 登录状态初始为false
};
const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
// 设置用户信息
setUserInfo: (state, action) => {
state.userInfo = action.payload;
state.isLoggedIn = true;
},
// 清除用户信息
clearUserInfo: (state) => {
state.userInfo = null;
state.isLoggedIn = false;
},
// 更新用户信息的部分字段
updateUserInfo: (state, action) => {
if (state.userInfo) {
state.userInfo = {
...state.userInfo,
...action.payload
};
}
}
}
});
// 导出actions
export const { setUserInfo, clearUserInfo, updateUserInfo } = userSlice.actions;
export default userSlice.reducer;

2
vite.config.js
View File

@@ -22,7 +22,7 @@ export default defineConfig({
// 分割第三方库
vendor: ["react", "react-dom", "react-router-dom"],
// 分割大型组件
components: ["@/components/CoursesVideoPlayer"],
components: [],
// 分割工具函数
utils: ["@/utils/LinePathGenerator", "@/utils/request"],
},