视图路径修改

schoolNewsWeb/src/views/user/user-center/MyFavoritesView.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="my-favorites">
+    <div class="favorites-header">
+      <h2>我的收藏</h2>
+      <div class="filter-tabs">
+        <div 
+          class="filter-tab" 
+          v-for="filter in filters" 
+          :key="filter.key"
+          :class="{ active: activeFilter === filter.key }"
+          @click="activeFilter = filter.key"
+        >
+          {{ filter.label }}
+        </div>
+      </div>
+    </div>
+
+    <div class="favorites-grid">
+      <div class="favorite-item" v-for="item in filteredFavorites" :key="item.id">
+        <div class="item-thumbnail">
+          <img :src="item.thumbnail" :alt="item.title" />
+          <div class="item-type">{{ item.typeName }}</div>
+        </div>
+        <div class="item-info">
+          <h3>{{ item.title }}</h3>
+          <p class="item-summary">{{ item.summary }}</p>
+          <div class="item-footer">
+            <span class="item-date">收藏于 {{ item.favoriteDate }}</span>
+            <div class="item-actions">
+              <el-button size="small" @click="viewItem(item)">查看</el-button>
+              <el-button size="small" type="danger" @click="removeFavorite(item)">取消收藏</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { ElButton, ElMessage } from 'element-plus';
+
+const activeFilter = ref('all');
+const favorites = ref<any[]>([]);
+
+const filters = [
+  { key: 'all', label: '全部' },
+  { key: 'article', label: '文章' },
+  { key: 'video', label: '视频' },
+  { key: 'audio', label: '音频' },
+  { key: 'course', label: '课程' }
+];
+
+const filteredFavorites = computed(() => {
+  if (activeFilter.value === 'all') return favorites.value;
+  return favorites.value.filter(item => item.type === activeFilter.value);
+});
+
+onMounted(() => {
+  // TODO: 加载收藏数据
+});
+
+function viewItem(item: any) {
+  // TODO: 跳转到详情页
+}
+
+function removeFavorite(item: any) {
+  // TODO: 取消收藏
+  ElMessage.success('已取消收藏');
+}
+</script>
+
+<style lang="scss" scoped>
+.my-favorites {
+  .favorites-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 32px;
+    
+    h2 {
+      font-size: 24px;
+      font-weight: 600;
+      color: #141F38;
+    }
+  }
+}
+
+.filter-tabs {
+  display: flex;
+  gap: 8px;
+}
+
+.filter-tab {
+  padding: 8px 16px;
+  background: #f5f5f5;
+  border-radius: 20px;
+  font-size: 14px;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &:hover {
+    background: #ffe6e6;
+    color: #C62828;
+  }
+  
+  &.active {
+    background: #C62828;
+    color: white;
+  }
+}
+
+.favorites-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 24px;
+}
+
+.favorite-item {
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s;
+  
+  &:hover {
+    border-color: #C62828;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.item-thumbnail {
+  position: relative;
+  width: 100%;
+  height: 180px;
+  background: #f5f5f5;
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.item-type {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  padding: 4px 12px;
+  background: rgba(198, 40, 40, 0.9);
+  color: white;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.item-info {
+  padding: 16px;
+  
+  h3 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #141F38;
+    margin-bottom: 8px;
+  }
+}
+
+.item-summary {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.5;
+  margin-bottom: 16px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.item-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.item-date {
+  font-size: 12px;
+  color: #999;
+}
+
+.item-actions {
+  display: flex;
+  gap: 8px;
+}
+</style>
+