feat: 添加HR访问量弹窗和日历事项样式优化

- 新增HR访问详情弹窗组件，支持左右切换查看不同HR信息
- 优化日历事项样式系统，基于事件类型匹配样式配置
- 完善侧边栏HR访问量组件，添加重叠头像和点击交互
- 增加班级排名弹窗组件
- 更新专家支持页面布局和样式

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/Sidebar/index.css

@@ -86,13 +86,22 @@
   }
   .visitor-count {
     width: 208px;
-    height: 44px;
+    height: 64px;
     border-radius: 8px;
     background-color: #e5f1ff;
     position: relative;
     margin-top: 10px;
     box-sizing: border-box;
-    padding: 0 10px;
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
 
     &::after {
       content: "";
@@ -103,12 +112,63 @@
       height: 100%;
       background-image: url("@/assets/images/Sidebar/visitor_count_bg.png");
       background-size: 100% 100%;
+      z-index: 1;
     }
 
-    .arco-statistic-value {
-      font-size: 12px;
-      font-weight: 700;
-      line-height: 41px;
+    .hr-visitor-content {
+      position: relative;
+      z-index: 2;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .hr-visitor-text {
+        font-size: 12px;
+        font-weight: 700;
+        color: #1d2129;
+      }
+      
+      .hr-avatars-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        
+        .hr-avatars {
+          display: flex;
+          position: relative;
+          
+          .hr-avatar {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            border: 2px solid #fff;
+            box-sizing: border-box;
+            position: relative;
+            
+            &.hr-avatar-1 {
+              z-index: 3;
+            }
+            
+            &.hr-avatar-2 {
+              z-index: 2;
+              margin-left: -8px;
+            }
+            
+            &.hr-avatar-3 {
+              z-index: 1;
+              margin-left: -8px;
+            }
+          }
+        }
+        
+        .hr-count-text {
+          font-size: 12px;
+          font-weight: 400;
+          color: #4e5969;
+          white-space: nowrap;
+        }
+      }
     }
   }
   .sidebar-menu {

src/components/Sidebar/index.jsx

@@ -1,7 +1,8 @@
+import { useState } from "react";
 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 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";
@@ -12,6 +13,7 @@ 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);
   };
@@ -21,6 +23,16 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
     setIsCollapsed((prev) => !prev);
   };
 
+  // 打开HR访问详情弹窗
+  const handleHRClick = () => {
+    setHrModalVisible(true);
+  };
+
+  // 关闭HR访问详情弹窗
+  const handleCloseHRModal = () => {
+    setHrModalVisible(false);
+  };
+
   return (
     <div
       className={`${
@@ -45,12 +57,31 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
           </div>
         )}
       </div>
-      <Statistic
-        className="visitor-count"
-        groupSeparator
-        value={87}
-        prefix="HR访问量："
-      />
+      <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)
@@ -90,6 +121,12 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
       <div className="sidebar-btn" onClick={toggleSidebar}>
         <img src={BTNICON} alt="btn" className="sidebar-btn-icon" />
       </div>
+      
+      {/* HR访问详情弹窗 */}
+      <HRVisitModal 
+        visible={hrModalVisible} 
+        onClose={handleCloseHRModal} 
+      />
     </div>
   );
 };