feat: 🎸 新增许多页面

2025-08-18 14:18:11 +08:00
parent ebd51b5ea8
commit 161635a5d2
22 changed files with 595 additions and 1011 deletions
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -0,0 +1,81 @@
+import { useNavigate, useLocation } from "react-router-dom";
+import { mockData } from "@/data/mockData";
+import IconFont from "@/components/IconFont";
+import Logo 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 { user } = mockData;
+
+  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={Logo} alt="logo" />
+        <p>多多畅职教育系统</p>
+      </div>
+      <div className="user-info">
+        <img
+          alt="avatar"
+          className="user-avatar"
+          src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
+        />
+      </div>
+      <div className="visitor-count">访客总数：1000</div>
+      <ul className="sidebar-menu">
+        {routes
+          .filter((item) => item.showMenu)
+          ?.map((item) => (
+            <>
+              <p className="sidebar-menu-title" key={item.name}>
+                {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"
+                      name="icon-yishiming"
+                    />
+                    <span className="sidebar-menu-text">{j.name}</span>
+                  </li>
+                ))}
+            </>
+          ))}
+      </ul>
+      <div className="sidebar-btn" onClick={toggleSidebar}>
+        <img src={BTNICON} alt="btn" className="sidebar-btn-icon" />
+        <span className="sidebar-btn-text">展开/收起</span>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;