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

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

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

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

src/utils/calendarEventStyles.js

@@ -0,0 +1,49 @@
+import eventTypesData from "../../网页未导入数据/文旅产业/日历事项.json";
+
+// 创建事项名称到样式的映射
+export const createEventStyleMapping = () => {
+  const styleMapping = {};
+  
+  eventTypesData.forEach(item => {
+    styleMapping[item.事项名称] = {
+      icon: item.icon,
+      textColor: `#${item.字体颜色}`,
+      backgroundColor: `#${item.事项背景色}`,
+      name: item.事项名称
+    };
+  });
+
+  return styleMapping;
+};
+
+// 根据事项标题获取样式
+export const getEventStyleByType = (eventType) => {
+  // 事件类型到日历事项配置的映射
+  const typeMapping = {
+    'ai-course': 'AI课',
+    'public-course': '企业高管公开课', 
+    'marketing-course': '营销课',
+    'compound-skill': '复合能力课',
+    'vertical-skill': '垂直能力课',
+    'one-on-one': '1v1求职规划',
+    'interview': '线下面试模拟'
+  };
+
+  const styleMapping = createEventStyleMapping();
+  const configName = typeMapping[eventType];
+  
+  if (configName && styleMapping[configName]) {
+    return styleMapping[configName];
+  }
+
+  // 默认样式
+  return {
+    icon: null,
+    textColor: '#1d2129',
+    backgroundColor: '#f3f4f6',
+    name: '其他'
+  };
+};;
+
+// 导出样式映射对象供其他地方使用
+export const EVENT_STYLE_MAPPING = createEventStyleMapping();