feat: 优化岗位等级系统和UI样式

主要更新： 1. 修复岗位等级数据： - 重新分类49个岗位到正确等级（普通岗29个、技术骨干岗12个、储备干部岗8个） - 更新项目库中所有项目的适用岗位，按照新的岗位等级映射关系重新配置 - 岗位卡片按等级排序：普通岗 → 技术骨干岗 → 储备干部岗 2. 优化任务列表(当日事项)样式： - 复用参考项目的任务列表样式，添加虚线时间轴设计 - 添加导师头像显示和个性化定位 - 在头像左侧添加状态圆点，根据任务完成状态显示不同颜色 - 修复时间显示格式，统一显示开始时间 - 设置1V1规划课时长为2小时 3. 优化日历组件： - 区分当前月份和其他月份日期的颜色显示 - 修复月份切换时高亮显示错误的问题 4. 优化课程列表样式： - 移除教师专长的hover效果 - 统一课程名称字体粗细，优化选中状态样式 5. 优化项目库适用岗位显示： - 修复第三张岗位卡片显示不全的问题 - 超过3个岗位时自动换行显示 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-10 19:16:24 +08:00
parent 0c520b0b1e
commit 15db293d5b
12 changed files with 1201 additions and 389 deletions
--- a/src/pages/Dashboard/components/CalendarTaskModule/index.css
+++ b/src/pages/Dashboard/components/CalendarTaskModule/index.css
@@ -53,6 +53,13 @@
    align-items: center;
    justify-content: center;
    cursor: pointer;
+    
+    &.other-month {
+      .date-number {
+        color: #c9cdd4;
+        opacity: 0.5;
+      }
+    }
    &.is-today {
      .date-number {
        background-color: rgb(0, 119, 255) !important;
--- a/src/pages/Dashboard/components/CalendarTaskModule/index.jsx
+++ b/src/pages/Dashboard/components/CalendarTaskModule/index.jsx
@@ -1,73 +1,91 @@
-import dayjs from "dayjs";
-import { Calendar } from "@arco-design/web-react";
-import "./index.css";
-
-const CalendarTaskModule = ({ tasks = [], selectedDate, onDateChange }) => {
-  // 格式化今天的日期
-  const today = new Date();
-  const formattedToday = `${today.getFullYear()}-${String(
-    today.getMonth() + 1
-  ).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
-
-  // 获取有任务的日期集合
-  const datesWithTasks = new Set(tasks?.map((task) => task.date) || []);
-
-  // 日历单元格渲染函数
-  const dateRender = (current) => {
-    const dateStr = current.format("YYYY-MM-DD");
-    const hasTasks = datesWithTasks.has(dateStr); // 存在任务
-    const isCurrentDay = dateStr === dayjs(selectedDate).format("YYYY-MM-DD");
-    const isToday = dateStr === formattedToday;
-
-    return (
-      <div
-        className={`calendar-date-cell ${hasTasks ? "has-tasks" : ""} ${
-          isCurrentDay ? "is-current-day" : ""
-        } ${isToday ? "is-today" : ""}`}
-      >
-        <div className="date-number">{current.date()}</div>
-        {hasTasks && <div className="task-dot"></div>}
-      </div>
-    );
-  };
-
-  const handleDateChange = (date, dateString) => {
-    if (onDateChange) {
-      // Arco Calendar passes a dayjs object
-      if (date && date.format) {
-        // Convert dayjs to Date object
-        const dateStr = date.format("YYYY-MM-DD");
-        const dateObj = new Date(dateStr + "T00:00:00");
-        if (!isNaN(dateObj.getTime())) {
-          onDateChange(dateObj);
-        }
-      } else if (dateString) {
-        // Fallback to dateString if available
-        const dateObj = new Date(dateString + "T00:00:00");
-        if (!isNaN(dateObj.getTime())) {
-          onDateChange(dateObj);
-        }
-      }
-    }
-  };
-
-  return (
-    <div className="module-calendar-task-wrapper">
-      <Calendar
-        panelWidth="300"
-        panel
-        defaultValue={formattedToday}
-        value={
-          selectedDate
-            ? selectedDate.toISOString().split("T")[0]
-            : formattedToday
-        }
-        style={{ fontSize: "18px" }}
-        onChange={handleDateChange}
-        dateRender={dateRender}
-      />
-    </div>
-  );
-};
-
-export default CalendarTaskModule;
+import React from "react";
+import dayjs from "dayjs";
+import { Calendar } from "@arco-design/web-react";
+import "./index.css";
+
+const CalendarTaskModule = ({ tasks = [], selectedDate, onDateChange }) => {
+  // 格式化今天的日期
+  const today = new Date();
+  const formattedToday = `${today.getFullYear()}-${String(
+    today.getMonth() + 1
+  ).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
+  
+  // 用于跟踪当前日历显示的月份
+  const [displayMonth, setDisplayMonth] = React.useState(() => {
+    return selectedDate || today;
+  });
+
+  // 获取有任务的日期集合
+  const datesWithTasks = new Set(tasks?.map((task) => task.date) || []);
+
+  // 日历单元格渲染函数
+  const dateRender = (current) => {
+    const dateStr = current.format("YYYY-MM-DD");
+    const hasTasks = datesWithTasks.has(dateStr); // 存在任务
+    const isCurrentDay = dateStr === dayjs(selectedDate).format("YYYY-MM-DD");
+    const isToday = dateStr === formattedToday;
+    
+    // 判断是否为当前显示月份 - 使用displayMonth而不是selectedDate
+    const currentMonth = dayjs(displayMonth).month();
+    const currentYear = dayjs(displayMonth).year();
+    const isCurrentMonth = current.month() === currentMonth && current.year() === currentYear;
+
+    return (
+      <div
+        className={`calendar-date-cell ${hasTasks ? "has-tasks" : ""} ${
+          isCurrentDay ? "is-current-day" : ""
+        } ${isToday ? "is-today" : ""} ${!isCurrentMonth ? "other-month" : ""}`}
+      >
+        <div className="date-number">{current.date()}</div>
+        {hasTasks && <div className="task-dot"></div>}
+      </div>
+    );
+  };
+
+  const handleDateChange = (date, dateString) => {
+    if (onDateChange) {
+      // Arco Calendar passes a dayjs object
+      if (date && date.format) {
+        // Convert dayjs to Date object
+        const dateStr = date.format("YYYY-MM-DD");
+        const dateObj = new Date(dateStr + "T00:00:00");
+        if (!isNaN(dateObj.getTime())) {
+          onDateChange(dateObj);
+        }
+      } else if (dateString) {
+        // Fallback to dateString if available
+        const dateObj = new Date(dateString + "T00:00:00");
+        if (!isNaN(dateObj.getTime())) {
+          onDateChange(dateObj);
+        }
+      }
+    }
+  };
+
+  return (
+    <div className="module-calendar-task-wrapper">
+      <Calendar
+        panelWidth="300"
+        panel
+        defaultValue={formattedToday}
+        value={
+          selectedDate
+            ? selectedDate.toISOString().split("T")[0]
+            : formattedToday
+        }
+        style={{ fontSize: "18px" }}
+        onChange={handleDateChange}
+        onPanelChange={(date) => {
+          // 当切换月份时更新displayMonth
+          if (date && date.format) {
+            const dateStr = date.format("YYYY-MM-DD");
+            setDisplayMonth(new Date(dateStr + "T00:00:00"));
+          }
+        }}
+        dateRender={dateRender}
+      />
+    </div>
+  );
+};
+
+export default CalendarTaskModule;
--- a/src/pages/Dashboard/components/TaskList/index.css
+++ b/src/pages/Dashboard/components/TaskList/index.css
@@ -48,7 +48,7 @@
  }

  .task-type {
-    font-weight: bold;
+    font-weight: normal;
    color: #1d2129;
  }

@@ -99,18 +99,140 @@
        display: flex;
        align-items: center;
        justify-content: flex-start;
+        
+        /* 左侧状态圆点 */
+        &::before {
+          content: "";
+          position: absolute;
+          left: 10px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background-color: #bfbfbf; /* 默认灰色 */
+          border: 2px solid #ffffff; /* 白色描边 */
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+          box-sizing: content-box;
+        }
+        
+        /* 已完成状态的圆点颜色 */
+        &.status-completed::before {
+          background-color: #52c41a; /* 绿色 */
+        }
+        
+        /* 课程类型对应的颜色 */
+        &.course-type-复合能力课::before {
+          background-color: #ff7875; /* 红色 */
+        }
+        
+        &.course-type-AI进阶课::before {
+          background-color: #ffc53d; /* 黄色 */
+        }
+        
+        &.course-type-公共课::before {
+          background-color: #73d13d; /* 绿色 */
+        }
+        
+        &.course-type-求职策略课::before {
+          background-color: #40a9ff; /* 蓝色 */
+        }

        .module-tasks-item-info-avatar {
-          width: 32px;
-          height: 32px;
-          border-radius: 50%;
-          position: absolute;
-          top: 0;
-          left: 0;
+          &.arco-avatar {
+            width: 32px !important;
+            height: 32px !important;
+            border-radius: 50% !important;
+            position: absolute;
+            top: 0;
+            left: 32px;
+            background-color: #165dff !important;
+            color: #fff;
+            font-size: 14px;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            overflow: hidden;
+            
+            .arco-avatar-image {
+              width: 100% !important;
+              height: 100% !important;
+              
+              img {
+                width: 100% !important;
+                height: 100% !important;
+                object-fit: cover;
+              }
+            }
+            
+            .arco-avatar-text {
+              font-size: 12px;
+              color: #fff;
+            }
+          }
+          
+          /* 针对不同导师的头像调整 */
+          &.teacher-李奇 {
+            .arco-avatar-image img {
+              object-fit: cover;
+              object-position: 50% 0%;
+              transform: scale(1.4) translateX(-4px);
+            }
+          }
+          
+          &.teacher-郭建辉 {
+            .arco-avatar-image img {
+              object-fit: cover;
+              object-position: center 0%;
+            }
+          }
+          
+          &.teacher-赵志强 {
+            .arco-avatar-image img {
+              object-fit: cover;
+              object-position: center 0%;
+            }
+          }
+          
+          &.teacher-李毅峰 {
+            .arco-avatar-image img {
+              object-fit: cover;
+              object-position: center 35%;
+            }
+          }
+          
+          &.teacher-周伏波 {
+            .arco-avatar-image img {
+              object-fit: cover;
+              object-position: center 0%;
+            }
+          }
+          
+          &.teacher-范雪娇 {
+            .arco-avatar-image img {
+              object-fit: cover;
+              object-position: center 0%;
+            }
+          }
+          
+          &.teacher-孙应战 {
+            .arco-avatar-image img {
+              object-fit: contain;
+              transform: scale(2.5) translateX(1px);
+              object-position: center 40%;
+            }
+          }
+          
+          &.teacher-魏立慧 {
+            .arco-avatar-image img {
+              object-fit: cover;
+              object-position: center 0%;
+            }
+          }
        }
        .module-tasks-item-info-teacher-name {
          position: absolute;
-          left: 40px;
+          left: 72px;
          font-size: 14px;
          font-weight: 400;
          color: #616065;
@@ -125,17 +247,20 @@
      }

      .module-tasks-item-content {
-        width: 100%;
+        width: calc(100% - 16px);
        height: 64px;
        margin-top: 5px;
        margin-left: 16px;
        box-sizing: border-box;
        padding-left: 16px;
        position: relative;
-        border-left: 1px dashed #bfbfbf;
        display: flex;
        justify-content: flex-end;
        align-items: center;
+        
+        &:not(.module-tasks-item-content-last) {
+          border-left: 2px dashed #d9d9d9 !important;
+        }

        &::before {
          content: "";
@@ -182,21 +307,19 @@

            .module-tasks-item-content-info-duration {
              position: absolute;
-              right: 20px;
-              top: 50%;
-              transform: translateY(-50%);
+              right: 0px;
+              bottom: 0px;
              font-size: 10px;
              font-weight: 400;
              color: #bfbfbf;

-              &::after {
+              &::before {
                content: "";
-                position: absolute;
-                top: 50%;
-                left: -15px;
-                transform: translateY(-50%);
+                display: inline-block;
                width: 12px;
                height: 12px;
+                margin-right: 4px;
+                vertical-align: middle;
                background-image: url("@/assets/images/TaskList/frame.png");
                background-size: 100% 100%;
              }
--- a/src/pages/Dashboard/components/TaskList/index.jsx
+++ b/src/pages/Dashboard/components/TaskList/index.jsx
@@ -37,10 +37,17 @@ const TaskList = ({ tasks = [], loading }) => {
        </div>
      ) : (
        <ul className="module-tasks-list">
-          {tasks.map((item, index) => (
+          {tasks.map((item, index) => {
+            if (item?.teacher === '刘杰') {
+              console.log('刘杰导师的课程数据:', item);
+            }
+            return (
            <li key={item.id} className="module-tasks-item">
-              <div className="module-tasks-item-info">
-                <Avatar className="module-tasks-item-info-avatar" size="small">
+              <div className={`module-tasks-item-info ${item?.isCompleted ? 'status-completed' : ''} ${item?.courseCategory ? `course-type-${item.courseCategory}` : ''}`}>
+                <Avatar 
+                  className={`module-tasks-item-info-avatar teacher-${item?.teacherName || ''}`} 
+                  size="small"
+                >
                  {item?.teacherAvatar ? (
                    <img alt="avatar" src={item.teacherAvatar} />
                  ) : (
@@ -48,7 +55,10 @@ const TaskList = ({ tasks = [], loading }) => {
                  )}
                </Avatar>
                <span className="module-tasks-item-info-teacher-name">
-                  {item?.teacher || item?.teacherName || "未知教师"}
+                  {item?.teacher || item?.teacherName || "未知"}导师
+                </span>
+                <span className="module-tasks-item-info-time">
+                  {item?.startTime || "上午9:00"}
                </span>
              </div>
              <div
@@ -61,11 +71,11 @@ const TaskList = ({ tasks = [], loading }) => {
                <div className="module-tasks-item-content-info">
                  <p>
                    <span className="task-type">
-                      {getTaskTypeText(item.type)}：
+                      {item?.courseCategory || '复合能力课'}
                    </span>
-                    {item?.title}
                  </p>
-                  <div>
+                  <div style={{ fontWeight: 'bold' }}>
+                    {item?.courseName}
                    <span className="module-tasks-item-content-info-duration">
                      {item?.duration}
                    </span>
@@ -78,7 +88,7 @@ const TaskList = ({ tasks = [], loading }) => {
                </div>
              </div>
            </li>
-          ))}
+          )})}
        </ul>
      )}
    </div>
--- a/src/pages/ProjectLibraryPage/components/ProjectCasesModal/index.css
+++ b/src/pages/ProjectLibraryPage/components/ProjectCasesModal/index.css
@@ -100,20 +100,32 @@
        font-weight: 400;
      }

-      .project-cases-modal-horizontal-list {
+      /* 单元分类区域样式 */
+      .unit-category-section {
+        margin-bottom: 20px;
+
+        .unit-category-subtitle {
+          font-size: 14px;
+          color: #86909c;
+          margin-bottom: 12px;
+          font-weight: 400;
+        }
+      }
+
+            .project-cases-modal-horizontal-list {
        width: 100%;
        margin-top: 10px;
-        overflow-x: auto;
        display: flex;
        flex-direction: row;
+        flex-wrap: wrap;
        justify-content: flex-start;
-        align-items: center;
+        align-items: flex-start;
+        gap: 15px;

-        .high-count-list-item {
-          width: 220px;
+                        .high-count-list-item {
+          width: 210px;
          height: 82px;
          background-color: #f7f8fa;
-          margin-right: 20px;
          border-radius: 8px;
          padding: 16px;
          box-sizing: border-box;
@@ -185,7 +197,7 @@
            > i {
              width: 36px;
              height: 36px;
-              background-image: url("@/assets/images/ProjectLibraryPage/class_icon.png");
+              background-image: url("https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuWifMbjj7jH.png");
              background-size: 100% 100%;
            }