课程详情: 收藏/已收藏图标颜色区分(红/灰)

Made-with: Cursor

reading-platform-frontend/src/views/teacher/courses/CourseDetailView.vue

@@ -11,8 +11,10 @@
         </div>
       </div>
       <div class="header-actions">
-        <a-button @click="toggleFavorite">
-          <HeartOutlined /> {{ isFavorited ? '已收藏' : '收藏' }}
+        <a-button @click="toggleFavorite" :class="{ 'favorited': isFavorited }">
+          <HeartFilled v-if="isFavorited" class="fav-icon favorited" />
+          <HeartOutlined v-else class="fav-icon" />
+          {{ isFavorited ? '已收藏' : '收藏' }}
         </a-button>
         <a-button @click="createSchoolVersion">
           <CopyOutlined /> 创建校本版本
@@ -447,6 +449,7 @@ import {
   BarChartOutlined,
   InfoCircleOutlined,
   HeartOutlined,
+  HeartFilled,
   PlayCircleOutlined,
   CopyOutlined,
   CalendarOutlined,
@@ -925,6 +928,16 @@ onMounted(() => {
   .header-actions {
     display: flex;
     gap: 8px;
+
+    .fav-icon {
+      color: rgba(0, 0, 0, 0.45);
+    }
+    .fav-icon.favorited {
+      color: #ff4d4f;
+    }
+    .favorited {
+      color: #ff4d4f;
+    }
   }
 }