完整的教务系统前端项目 - 包含所有修复和9月份数据
This commit is contained in:
KQL
246
src/components/Sidebar/index.css
Normal file
246
src/components/Sidebar/index.css
Normal file
@@ -0,0 +1,246 @@
|
||||
.sidebar-expand-wrapper {
|
||||
width: 240px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
transition: width 0.3s ease;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
|
||||
.sidebar-title {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
|
||||
> img {
|
||||
width: 143px;
|
||||
height: 48px;
|
||||
margin-right: 10px;
|
||||
transition: margin 0.3s ease;
|
||||
}
|
||||
}
|
||||
.user-info-wrapper {
|
||||
width: 208px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
background-color: #f4f7f9;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 6px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
|
||||
> span {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 16px;
|
||||
color: #1d2129;
|
||||
}
|
||||
.user-id {
|
||||
font-size: 12px;
|
||||
color: #86909c;
|
||||
}
|
||||
}
|
||||
}
|
||||
.visitor-count {
|
||||
width: 208px;
|
||||
height: 44px;
|
||||
border-radius: 8px;
|
||||
background-color: #e5f1ff;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("@/assets/images/Sidebar/visitor_count_bg.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.arco-statistic-value {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 41px;
|
||||
}
|
||||
}
|
||||
.sidebar-menu {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px 60px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.sidebar-menu-item-wrapper {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #e4ecf2;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.sidebar-menu-title {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
text-align: left;
|
||||
line-height: 42px;
|
||||
color: #4e5969;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sidebar-menu-item-active {
|
||||
background-image: url("@/assets/images/Sidebar/sidebar_menu_item_active_bg .png");
|
||||
background-size: 100% 100%;
|
||||
|
||||
.sidebar-menu-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
.sidebar-menu-text {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu-item {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
.sidebar-menu-icon {
|
||||
margin: 0 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.sidebar-menu-text {
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #616065;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-btn {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #e4ecf2;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
|
||||
> img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-retract-wrapper {
|
||||
width: 84px;
|
||||
|
||||
.sidebar-title {
|
||||
> img {
|
||||
margin: 0;
|
||||
transition: margin 0.3s ease;
|
||||
}
|
||||
> p {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
.user-info-wrapper {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
.user-avatar {
|
||||
margin-right: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.visitor-count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
.sidebar-menu-title {
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.sidebar-menu-item-wrapper {
|
||||
.sidebar-menu-item {
|
||||
justify-content: center;
|
||||
|
||||
.sidebar-menu-icon {
|
||||
margin: 0;
|
||||
}
|
||||
.sidebar-menu-text {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
width: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-btn {
|
||||
width: 80px;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
89
src/components/Sidebar/index.jsx
Normal file
89
src/components/Sidebar/index.jsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { Statistic } from "@arco-design/web-react";
|
||||
import { useSelector } from "react-redux";
|
||||
import IconFont from "@/components/IconFont";
|
||||
import ICON from "@/assets/images/Sidebar/sidebar_icon.png";
|
||||
import ICONRETRACT from "@/assets/images/Sidebar/logo.png";
|
||||
import BTNICON from "@/assets/images/Sidebar/btn_icon.png";
|
||||
import routes from "@/routes";
|
||||
import "./index.css";
|
||||
|
||||
const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const studentInfo = useSelector((state) => state.student.studentInfo);
|
||||
const handleNavClick = (path) => {
|
||||
navigate(path);
|
||||
};
|
||||
|
||||
// 切换侧边栏展开/折叠状态
|
||||
const toggleSidebar = () => {
|
||||
setIsCollapsed((prev) => !prev);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${
|
||||
!isCollapsed
|
||||
? "sidebar-retract-wrapper sidebar-expand-wrapper"
|
||||
: "sidebar-expand-wrapper"
|
||||
}`}
|
||||
>
|
||||
<div className="sidebar-title">
|
||||
<img src={isCollapsed ? ICON : ICONRETRACT} alt="icon" />
|
||||
</div>
|
||||
<div className="user-info-wrapper">
|
||||
<img
|
||||
alt="avatar"
|
||||
className="user-avatar"
|
||||
src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
|
||||
/>
|
||||
{isCollapsed && (
|
||||
<div className="user-info">
|
||||
<span className="user-name">{studentInfo?.realName}</span>
|
||||
<span className="user-id">学号：{studentInfo?.id}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Statistic
|
||||
className="visitor-count"
|
||||
groupSeparator
|
||||
value={125670}
|
||||
prefix="访客总数："
|
||||
/>
|
||||
<ul className="sidebar-menu">
|
||||
{routes
|
||||
.filter((item) => item.showMenu)
|
||||
?.map((item) => (
|
||||
<div key={item.key} className="sidebar-menu-item-wrapper">
|
||||
<p className="sidebar-menu-title">{item.name}</p>
|
||||
{item.routes
|
||||
?.filter((i) => i.showMenuItem)
|
||||
?.map((j) => (
|
||||
<li
|
||||
className={
|
||||
location.pathname === j.path
|
||||
? "sidebar-menu-item-active sidebar-menu-item"
|
||||
: "sidebar-menu-item"
|
||||
}
|
||||
key={j.path}
|
||||
onClick={() => handleNavClick(j.path)}
|
||||
>
|
||||
<IconFont
|
||||
className="sidebar-menu-icon"
|
||||
src={location.pathname === j.path ? j.active : j.default}
|
||||
/>
|
||||
<span className="sidebar-menu-text">{j.name}</span>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
<div className="sidebar-btn" onClick={toggleSidebar}>
|
||||
<img src={BTNICON} alt="btn" className="sidebar-btn-icon" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
Reference in New Issue
Block a user