UI优化更新：面试模拟、简历面试、项目库、求职策略等多个页面改进

主要更新： - 面试模拟页：移除上滑查看评价，添加渐进式评分(72→81→89) - 简历面试页：添加岗位头像、标签背景、面试题加粗等视觉优化 - 项目库页：添加"我完成的项目库"板块，增加hover效果 - 求职策略详情页：优化圆柱体和矩形对齐，添加CSV岗位数据，调整批次文字位置 - 企业岗位列表页：添加返回按钮功能 - 全局：统一岗位级别术语(普通岗/技术骨干岗/储备干部岗) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-05 20:46:03 +08:00
parent 1703894e74
commit 4e0e96e6b8
64 changed files with 7806 additions and 2112 deletions
--- a/src/components/CourseList/index.css
+++ b/src/components/CourseList/index.css
@@ -69,31 +69,71 @@
          box-sizing: border-box;
        }

-        /* 自定义时间轴元素 */
+        /* 自定义时间轴元素 - 统一使用CSS样式 */
        .time-line-dot-icon {
-          width: 20px;
-          height: 20px;
-          background-image: url("@/assets/images/Common/time_line_dot_icon.png");
-          background-size: 100% 100%;
+          width: 12px;
+          height: 12px;
+          background-color: #10b981;
+          border-radius: 50%;
+          position: relative;
+          
+          &::before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 6px;
+            height: 6px;
+            background-color: #fff;
+            border-radius: 50%;
+          }
        }

        .time-line-clock-icon {
          width: 12px;
          height: 12px;
-          background-image: url("@/assets/images/Common/time_line_clock_icon.png");
-          background-size: 100% 100%;
+          background-color: #3b82f6;
+          border-radius: 50%;
+          position: relative;
+          
+          &::before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 6px;
+            height: 6px;
+            background-color: #fff;
+            border-radius: 50%;
+          }
        }

        .time-line-lock-icon {
          width: 12px;
          height: 12px;
-          background-image: url("@/assets/images/Common/time_line_lock_icon.png");
-          background-size: 100% 100%;
-          opacity: 0.5;
+          background-color: #c9cdd4;
+          border-radius: 50%;
+          position: relative;
+          opacity: 0.6;
+          
+          &::before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 6px;
+            height: 6px;
+            background-color: #fff;
+            border-radius: 50%;
+          }
        }
        .time-line-item {
          width: 248px;
-          height: 74px;
+          min-height: 74px !important;
+          height: auto !important;
          background-color: #f2f3f5;
          border-radius: 8px;
          position: relative;
@@ -101,25 +141,39 @@
          padding: 10px;

          > p {
-            width: 100%;
-            height: 22px;
+            width: calc(100% - 70px) !important;
+            min-height: 22px !important;
+            height: auto !important;
            font-size: 14px;
            font-weight: 600;
            line-height: 22px;
            color: #1d2129;
+            word-wrap: break-word !important;
+            word-break: break-word !important;
+            white-space: normal !important;
+            overflow-wrap: break-word !important;
+            display: block !important;
+            text-overflow: unset !important;
+            overflow: visible !important;
+            max-width: none !important;
+            -webkit-line-clamp: unset !important;
+            -webkit-box-orient: unset !important;
+            text-rendering: auto !important;
          }

          > .time-line-item-info {
            margin-top: 10px;
            width: 100%;
-            height: 20px;
+            min-height: 20px;
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            color: #4e5969;
            display: flex;
            justify-content: space-between;
-            align-items: center;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            gap: 5px;
          }
        }

@@ -225,3 +279,24 @@
    }
  }
 }
+
+/* 强制覆盖Arco Timeline文本省略 */
+.course-list .arco-timeline-item-content p {
+  text-overflow: unset !important;
+  overflow: visible !important;
+  white-space: normal !important;
+  display: block !important;
+  -webkit-line-clamp: unset !important;
+  -webkit-box-orient: unset !important;
+  word-break: break-word !important;
+  max-width: calc(100% - 70px) !important;
+}
+
+.course-list .time-line-item p {
+  text-overflow: unset !important;
+  overflow: visible !important;
+  white-space: normal !important;
+  display: block !important;
+  -webkit-line-clamp: unset !important;
+  -webkit-box-orient: unset !important;
+}
--- a/src/components/CourseList/index.jsx
+++ b/src/components/CourseList/index.jsx
@@ -147,7 +147,16 @@ const CourseList = ({ className = "", onCourseClick }) => {
                      }}
                      style={{ cursor: 'pointer' }}
                    >
-                      <p>{course.courseName}</p>
+                      <p style={{ 
+                        overflow: 'visible',
+                        textOverflow: 'unset',
+                        whiteSpace: 'normal',
+                        wordBreak: 'break-word',
+                        WebkitLineClamp: 'unset',
+                        WebkitBoxOrient: 'unset',
+                        display: 'block',
+                        maxWidth: 'calc(100% - 70px)'
+                      }}>{course.courseName}</p>
                      <div className="time-line-item-info">
                        <span>{course.teacherName}</span>
                        <span>{course.date}</span>
--- a/src/components/CoursesVideoPlayer/index.jsx
+++ b/src/components/CoursesVideoPlayer/index.jsx
@@ -14,7 +14,7 @@ export default ({ className = "", isLock = false, selectedCourse, teacherData, u
        name: "魏立慧",
        introduction: "企业资深一线HR，专注于为求职者提供一对一的个性化指导。通过真实招聘视角，深入剖析个人优势与短板、传授面试技巧、规划职业定位与发展路径，帮助学生快速提升求职竞争力。求职策略以实用落地为核心，注重互动交流与角色定位，让学员在轻松氛围中获得直击痛点的求职策略。",
        specialties: ["深谙用人逻辑", "擅长挖掘优势", "沟通真诚自然", "点评直击要害"],
-        avatar: "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp",
+        avatar: "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_teacher-avatar/recuUpSO4gUtJz.png",
        type: "企业资深HR"
      };
  
@@ -79,16 +79,46 @@ export default ({ className = "", isLock = false, selectedCourse, teacherData, u
              <span onClick={() => handleClickBtn(2)}>下一集 &gt;</span>
            </div>
            <div className="courses-video-player-video">
-              {/* 如果没有selectedCourse（公共课直播间）或者selectedCourse.current为true，都播放视频 */}
-              {!selectedCourse || selectedCourse?.current ? (
-                <video src="/live.mp4" autoPlay controls></video>
-              ) : (
+              {/* 所有课程都显示模糊的海报图和锁定状态 */}
+              <div style={{ position: 'relative', width: '100%', height: '100%' }}>
                <img 
                  src={unitPosters?.[unitName] || unitPosters?.["岗位体系认知"]} 
                  alt={unitName}
-                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                  style={{ 
+                    width: '100%', 
+                    height: '100%', 
+                    objectFit: 'cover',
+                    filter: 'blur(20px)'
+                  }}
                />
-              )}
+                <div style={{
+                  position: 'absolute',
+                  top: '50%',
+                  left: '50%',
+                  transform: 'translate(-50%, -50%)',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: '16px'
+                }}>
+                  <img 
+                    src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuVOrz2GnJdK.png"
+                    alt="lock"
+                    style={{ width: '280px', height: '280px' }}
+                  />
+                  <span style={{
+                    color: '#fff',
+                    fontSize: '16px',
+                    fontWeight: '500',
+                    textAlign: 'center',
+                    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+                    padding: '8px 16px',
+                    borderRadius: '4px'
+                  }}>
+                    DEMO演示，非学员无查看权限
+                  </span>
+                </div>
+              </div>
            </div>
          </>
        )}
@@ -121,7 +151,7 @@ export default ({ className = "", isLock = false, selectedCourse, teacherData, u
            </div>
            <div className="living-data-item">
              <span>观看</span>
-              <span>3000人</span>
+              <span>{selectedCourse ? '197人' : '1928人'}</span>
            </div>
          </div>
        </div>
--- a/src/components/Locked/index.css
+++ b/src/components/Locked/index.css
@@ -13,7 +13,7 @@
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
-    background-image: url("@/assets/images/Common/lock_bg.png");
+    background-image: url("https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuVOrz2GnJdK.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -36,7 +36,7 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
        <img
          alt="avatar"
          className="user-avatar"
-          src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
+          src={studentInfo?.avatar || "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"}
        />
        {isCollapsed && (
          <div className="user-info">
@@ -48,8 +48,8 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
      <Statistic
        className="visitor-count"
        groupSeparator
-        value={125670}
-        prefix="访客总数："
+        value={87}
+        prefix="HR访问量："
      />
      <ul className="sidebar-menu">
        {routes
@@ -62,7 +62,9 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
                ?.map((j) => (
                  <li
                    className={
-                      location.pathname === j.path
+                      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"
                    }
@@ -71,7 +73,13 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
                  >
                    <IconFont
                      className="sidebar-menu-icon"
-                      src={location.pathname === j.path ? j.active : j.default}
+                      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>
@@ -86,4 +94,4 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
  );
 };

-export default Sidebar;
+export default Sidebar;