完整的教务系统前端项目 - 包含所有修复和9月份数据

2025-09-03 13:26:13 +08:00
commit 87b06d3176
270 changed files with 116169 additions and 0 deletions
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -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;