teach_sys_Demo/src/components/Sidebar/index.jsx

import { useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { useSelector } from "react-redux";
import IconFont from "@/components/IconFont";
import HRVisitModal from "@/components/HRVisitModal";
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 [hrModalVisible, setHrModalVisible] = useState(false);
  const handleNavClick = (path) => {
    navigate(path);
  };

  // 切换侧边栏展开/折叠状态
  const toggleSidebar = () => {
    setIsCollapsed((prev) => !prev);
  };

  // 打开HR访问详情弹窗
  const handleHRClick = () => {
    setHrModalVisible(true);
  };

  // 关闭HR访问详情弹窗
  const handleCloseHRModal = () => {
    setHrModalVisible(false);
  };

  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={studentInfo?.avatar || "//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="graduate-badge">毕业生</span>
          </div>
        )}
      </div>
      <div className="visitor-count" onClick={handleHRClick}>
        <div className="hr-visitor-content">
          <span className="hr-visitor-text">HR访问量</span>
          <div className="hr-avatars-wrapper">
            <div className="hr-avatars">
              <img 
                src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp" 
                alt="HR头像" 
                className="hr-avatar hr-avatar-1"
              />
              <img 
                src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/581b17753093199839f2e327e726b157.svg~tplv-49unhts6dw-image.image" 
                alt="HR头像" 
                className="hr-avatar hr-avatar-2"
              />
              <img 
                src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp" 
                alt="HR头像" 
                className="hr-avatar hr-avatar-3"
              />
            </div>
            <span className="hr-count-text">等87位HR</span>
          </div>
        </div>
      </div>
      <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 || 
                      (j.path === '/company-jobs' && location.pathname === '/company-jobs-list') ||
                      (j.path === '/job-strategy' && location.pathname === '/job-strategy-detail')
                        ? "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.path === '/company-jobs' && location.pathname === '/company-jobs-list') ||
                        (j.path === '/job-strategy' && location.pathname === '/job-strategy-detail')
                          ? 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>
      
      {/* HR访问详情弹窗 */}
      <HRVisitModal 
        visible={hrModalVisible} 
        onClose={handleCloseHRModal} 
      />
    </div>
  );
};

export default Sidebar;