feat: 优化HR访问弹窗和简历详情模态框功能

- HR访问弹窗改进:
  - 重新设计弹窗样式，使用浅蓝色渐变背景
  - 添加头像点击切换功能，可查看不同HR信息
  - 优化头像大小层级显示，中间最大两侧递减
  - 调整弹窗尺寸和间距，提升视觉体验

- 简历详情模态框增强:
  - 在主要标题前添加图标装饰
  - 修复简历内容解析中的语法错误
  - 优化数据结构处理逻辑

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

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

src/components/HRVisitModal/index.css

@@ -1,25 +1,78 @@
-.hr-visit-modal .arco-modal {
+/* 弹窗主容器 - 直接定位到arco-modal元素 */
-  border-radius: 16px;
+.arco-modal.hr-visit-modal {
+  border-radius: 20px !important;
   overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  width: 500px !important;
+  max-width: none !important;
 }
 
+/* 确保动画完成后的状态也有圆角 */
+.arco-modal.hr-visit-modal.zoomModal-enter-done {
+  border-radius: 20px !important;
+}
+
+/* 弹窗内容区域 */
 .hr-visit-modal .arco-modal-content {
   padding: 0;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: transparent;
   position: relative;
+  overflow: hidden;
+  border-radius: 24px;
 }
 
+/* 自定义内容容器 */
 .hr-visit-modal-content {
-  padding: 40px 30px 30px;
+  padding: 0;
   text-align: center;
   position: relative;
-  background: linear-gradient(135deg, #a8e6cf 0%, #88c999 50%, #67b26f 100%);
+  background: linear-gradient(180deg, #D4E8FF 0%, #FFFFFF 100%);
-  min-height: 400px;
+  min-height: 280px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 20px;
 }
 
+/* 顶部装饰背景 */
+.modal-background-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 150px;
+  overflow: hidden;
+  z-index: 1;
+  border-radius: 20px 20px 0 0;
+  pointer-events: none;
+}
+
+.modal-background-image::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(180deg, 
+    rgba(212, 232, 255, 0) 0%, 
+    rgba(212, 232, 255, 0.2) 50%, 
+    rgba(212, 232, 255, 0.6) 100%
+  );
+  pointer-events: none;
+}
+
+.modal-background-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center top;
+  opacity: 0.8;
+}
+
+/* 关闭按钮 */
 .modal-close-btn {
   position: absolute;
   top: 16px;
@@ -27,27 +80,33 @@
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.9);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: white;
+  color: #666;
   font-size: 16px;
-  transition: background 0.3s ease;
+  transition: all 0.3s ease;
-  z-index: 20;
+  z-index: 100;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
 
 .modal-close-btn:hover {
-  background: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 1);
+  transform: scale(1.1);
 }
 
+/* 头像展示区域 */
 .hr-avatars-section {
-  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 20px;
+  margin-top: 50px;
+  margin-bottom: 15px;
+  position: relative;
+  z-index: 10;
+  height: 120px;
 }
 
 .avatar-navigation {
@@ -58,131 +117,107 @@
   position: relative;
 }
 
+/* 左右切换按钮 - 隐藏或简化 */
 .nav-btn {
-  background: rgba(255, 255, 255, 0.2);
+  display: none;
-  border: none;
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  font-size: 16px;
-  z-index: 15;
-}
-
-.nav-btn:hover {
-  background: rgba(255, 255, 255, 0.3);
-  transform: scale(1.1);
 }
 
+/* 头像容器 */
 .avatars-container {
   position: relative;
-  width: 200px;
+  width: 450px;
   height: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 20px;
+  overflow: visible;
-  overflow: hidden;
 }
 
+/* 头像项 */
 .avatar-item {
   position: absolute;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .avatar-item.hidden {
   opacity: 0 !important;
+  pointer-events: none;
 }
 
+/* 头像样式 - 匹配图片中的样式 */
 .hr-avatar-large {
-  width: 80px;
+  width: 75px;
-  height: 80px;
+  height: 75px;
   border-radius: 50%;
-  border: 4px solid rgba(255, 255, 255, 0.8);
+  border: 3px solid rgba(255, 255, 255, 1);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
   transition: all 0.4s ease;
+  object-fit: cover;
+  background: white;
 }
 
+/* 激活状态的头像 - 通过scale控制大小 */
 .avatar-item.active .hr-avatar-large {
-  border-color: white;
+  border-width: 4px;
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
 }
 
+/* 公司信息区域 */
 .company-info {
   margin-bottom: 20px;
+  position: relative;
+  z-index: 10;
 }
 
 .company-name {
-  color: white;
+  color: #1a1a1a;
-  font-size: 24px;
+  font-size: 22px;
   font-weight: 600;
   margin: 0 0 12px 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  letter-spacing: 1px;
 }
 
+/* HR标签 */
 .hr-tag {
   display: inline-flex;
   align-items: center;
-  background: rgba(255, 255, 255, 0.2);
+  gap: 12px;
-  border-radius: 20px;
-  padding: 6px 16px;
-  backdrop-filter: blur(10px);
 }
 
 .hr-label {
-  background: #007AFF;
+  background: linear-gradient(0deg, #0077FF, #32A6FF 40%);
   color: white;
-  padding: 4px 8px;
+  padding: 4px 12px;
-  border-radius: 12px;
+  border-radius: 8px;
   font-size: 12px;
   font-weight: 600;
-  margin-right: 8px;
+  letter-spacing: 0.5px;
+  font-weight: 800;
 }
 
 .hr-name {
-  color: white;
+  color: #333;
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 800;
 }
 
+/* 访问信息 */
 .visit-info {
-  margin-bottom: 30px;
+  margin-bottom: 20px;
+  position: relative;
+  z-index: 10;
 }
 
 .visit-message {
-  color: rgba(255, 255, 255, 0.9);
+  color: #666;
-  font-size: 16px;
+  font-size: 14px;
   margin: 0;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  letter-spacing: 0.5px;
 }
 
+/* 底部指示器 - 不显示 */
 .indicators {
-  display: flex;
+  display: none;
-  justify-content: center;
-  gap: 8px;
-}
-
-.indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.4);
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.indicator.active {
-  background: white;
-  transform: scale(1.2);
-}
-
-.indicator:hover {
-  background: rgba(255, 255, 255, 0.7);
 }
 
 /* 动画效果 */

src/components/HRVisitModal/index.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Modal } from '@arco-design/web-react';
 import { IconLeft, IconRight, IconClose } from '@arco-design/web-react/icon';
+import backgroundImg from '@/assets/images/CompanyJobsPage/background.png';
 import './index.css';
 
 const HRVisitModal = ({ visible, onClose }) => {
@@ -20,28 +21,28 @@ const HRVisitModal = ({ visible, onClose }) => {
       name: '李女士',
       company: '腾讯科技有限公司',
       avatar: '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/581b17753093199839f2e327e726b157.svg~tplv-49unhts6dw-image.image',
-      visitMessage: '访问了您的项目经验'
+      visitMessage: '访问了您的线下面试模拟'
     },
     {
       id: 3,
       name: '张先生',
       company: '阿里巴巴集团',
       avatar: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',
-      visitMessage: '访问了您的技能证书'
+      visitMessage: '访问了您的个人档案'
     },
     {
       id: 4,
       name: '陈女士',
       company: '字节跳动科技有限公司',
       avatar: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
-      visitMessage: '访问了您的求职意向'
+      visitMessage: '访问了您的线下面试模拟'
     },
     {
       id: 5,
       name: '刘先生',
       company: '华为技术有限公司',
       avatar: '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/581b17753093199839f2e327e726b157.svg~tplv-49unhts6dw-image.image',
-      visitMessage: '访问了您的工作经历'
+      visitMessage: '访问了您的项目库'
     }
   ];
 
@@ -63,8 +64,19 @@ const HRVisitModal = ({ visible, onClose }) => {
       closable={false}
       className="hr-visit-modal"
       width={500}
+      style={{
+        top: '0%',
+      }}
+      maskStyle={{
+        backdropFilter: 'blur(4px)'
+      }}
     >
       <div className="hr-visit-modal-content">
+        {/* 背景图片 */}
+        <div className="modal-background-image">
+          <img src={backgroundImg} alt="background" />
+        </div>
+        
         {/* 关闭按钮 */}
         <div className="modal-close-btn" onClick={onClose}>
           <IconClose />
@@ -85,10 +97,19 @@ const HRVisitModal = ({ visible, onClose }) => {
                     Math.abs(index - currentIndex) > 2 ? 'hidden' : ''
                   }`}
                   style={{
-                    transform: `translateX(${(index - currentIndex) * 80}px)`,
+                    transform: `translateX(${(index - currentIndex) * 75}px) scale(${
-                    opacity: index === currentIndex ? 1 : 0.6,
+                      index === currentIndex ? 1.4 : 
-                    zIndex: index === currentIndex ? 10 : 5,
+                      Math.abs(index - currentIndex) === 1 ? 1 : 
-                    scale: index === currentIndex ? 1.2 : 1
+                      Math.abs(index - currentIndex) === 2 ? 0.8 : 0.6
+                    })`,
+                    opacity: Math.abs(index - currentIndex) <= 2 ? 1 : 0,
+                    zIndex: index === currentIndex ? 20 : 10 - Math.abs(index - currentIndex),
+                    cursor: index !== currentIndex ? 'pointer' : 'default'
+                  }}
+                  onClick={() => {
+                    if (index !== currentIndex) {
+                      setCurrentIndex(index);
+                    }
                   }}
                 >
                   <img src={hr.avatar} alt={hr.name} className="hr-avatar-large" />

src/pages/CompanyJobsPage/components/ResumeInfoModal/index.jsx

@@ -513,7 +513,10 @@ export default ({ visible, onClose, data, initialVersion = "2" }) => {
           <ul className="resume-info-moda-list">
             {/* 教育经历 */}
           <li className="resume-info-moda-item">
-            <p className="resume-info-moda-item-title">教育经历</p>
+            <p className="resume-info-moda-item-title">
+              <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuW0XRVB1bpV.png" alt="" style={{ width: '28px', height: '28px', marginRight: '10px', verticalAlign: 'middle' }} />
+              教育经历
+            </p>
             <ul className="educational-experience-list">
               {(isEditing && editableData ? editableData.education : resumeContent.education)?.map((edu, index) => (
                 <li key={index} className="educational-experience-list-item">
@@ -555,7 +558,10 @@ export default ({ visible, onClose, data, initialVersion = "2" }) => {
           </li>
           {/* 项目经历 */}
           <li className="resume-info-moda-item">
-            <p className="resume-info-moda-item-title">项目经历</p>
+            <p className="resume-info-moda-item-title">
+              <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuW0XRVB1bpV.png" alt="" style={{ width: '28px', height: '28px', marginRight: '10px', verticalAlign: 'middle' }} />
+              项目经历
+            </p>
             <ul className="project-experience-list">
               {(isEditing && editableData ? editableData.projects : resumeContent.projects)?.map((project, index) => (
                 <li key={index} className="project-experience-list-item">
@@ -639,7 +645,10 @@ export default ({ visible, onClose, data, initialVersion = "2" }) => {
           </li>
           {/* 专业技能 */}
           <li className="resume-info-moda-item">
-            <p className="resume-info-moda-item-title">专业技能</p>
+            <p className="resume-info-moda-item-title">
+              <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuW0XRVB1bpV.png" alt="" style={{ width: '28px', height: '28px', marginRight: '10px', verticalAlign: 'middle' }} />
+              专业技能
+            </p>
             <ul className="professional-skills-list">
               {(isEditing && editableData ? editableData.skills?.core : resumeContent.skills?.core) && (
                 <li className="professional-skills-list-item">
@@ -695,7 +704,10 @@ export default ({ visible, onClose, data, initialVersion = "2" }) => {
           {(resumeContent.personalSummary && resumeContent.personalSummary.length > 0) || 
            (resumeContent.personalSummary && typeof resumeContent.personalSummary === 'string') ? (
             <li className="resume-info-moda-item">
-              <p className="resume-info-moda-item-title">个人总结</p>
+              <p className="resume-info-moda-item-title">
+                <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuW0XRVB1bpV.png" alt="" style={{ width: '28px', height: '28px', marginRight: '10px', verticalAlign: 'middle' }} />
+                个人总结
+              </p>
               <div className="personal-summary-content">
                 {Array.isArray(resumeContent.personalSummary) ? (
                   <ul className="personal-summary-list">
@@ -716,7 +728,10 @@ export default ({ visible, onClose, data, initialVersion = "2" }) => {
           {/* 对应课程单元 - 暂时保留静态展示，后续可根据需要动态化 */}
           {resumeContent.courses && (
             <li className="resume-info-moda-item">
-              <p className="resume-info-moda-item-title">对应课程单元</p>
+              <p className="resume-info-moda-item-title">
+                <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuW0XRVB1bpV.png" alt="" style={{ width: '28px', height: '28px', marginRight: '10px', verticalAlign: 'middle' }} />
+                对应课程单元
+              </p>
               <ul className="corresponding-course-units-list">
                 <li className="corresponding-course-units-list-item">
                   <div className="tag">相关课程</div>