refactor(frontend): Rework home layout and user interactions

frontend/video-frontend-web/src/views/favorite/detail.vue

@@ -1,49 +1,147 @@
 <template>
   <div class="favorite-detail-page">
-    <van-nav-bar :title="favoriteTitle" fixed placeholder left-arrow @click-left="router.back()" />
-
-    <section class="favorite-hero">
-      <div>
-        <h2>{{ favoriteTitle }}</h2>
-        <p>{{ description }}</p>
+    <div class="page-shell detail-shell">
+      <div class="page-head">
+        <div class="head-main">
+          <button
+            class="back-link"
+            @click="router.back()"
+          >
+            返回
+          </button>
+          <div>
+            <strong>{{ favoriteTitle }}</strong>
+            <span>{{ total }} 个视频</span>
+          </div>
+        </div>
+        <div class="head-actions">
+          <span class="privacy-tag">{{ currentFavorite?.isPrivate ? '私密' : '公开' }}</span>
+          <button
+            class="edit-link"
+            @click="openEditPopup"
+          >
+            编辑
+          </button>
+        </div>
       </div>
-      <div class="count">{{ total }} 个视频</div>
-    </section>
 
-    <van-list
-      v-model:loading="loading"
-      :finished="finished"
-      finished-text="没有更多内容了"
-      @load="loadMore"
-      class="favorite-list"
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="没有更多内容了"
+        @load="loadMore"
+      >
+        <div class="video-grid">
+          <div
+            v-for="video in videos"
+            :key="video.id"
+            class="favorite-video-item"
+          >
+            <VideoCard
+              :video="video"
+              @click="goToVideo(video.id)"
+            />
+            <button
+              class="remove-link"
+              @click.stop="removeVideo(video.id)"
+            >
+              移出收藏夹
+            </button>
+          </div>
+        </div>
+
+        <van-empty
+          v-if="!loading && !videos.length"
+          description="收藏夹里还没有视频"
+        />
+      </van-list>
+    </div>
+
+    <van-popup
+      v-model:show="showEditPopup"
+      round
+      position="bottom"
     >
-      <div class="video-grid">
-        <VideoCard v-for="video in videos" :key="video.id" :video="video" @click="goToVideo(video.id)" />
+      <div class="favorite-popup">
+        <div class="popup-title">
+          编辑收藏夹
+        </div>
+        <van-field
+          v-model="editForm.name"
+          label="名称"
+          placeholder="请输入收藏夹名称"
+        />
+        <van-field
+          v-model="editForm.description"
+          label="简介"
+          placeholder="可选"
+        />
+        <van-cell title="设为私密">
+          <template #right-icon>
+            <van-switch
+              v-model="editForm.isPrivate"
+              :active-value="1"
+              :inactive-value="0"
+            />
+          </template>
+        </van-cell>
+        <van-button
+          block
+          type="primary"
+          :loading="submitting"
+          @click="saveFavorite"
+        >
+          保存
+        </van-button>
       </div>
-    </van-list>
+    </van-popup>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { showToast } from 'vant'
+import { showConfirmDialog, showSuccessToast, showToast } from 'vant'
 import VideoCard from '@/components/video/VideoCard.vue'
-import { favoriteApi } from '@/api/favorite.ts'
+import { favoriteApi, type Favorite } from '@/api/favorite.ts'
+import { videoApi } from '@/api/video.ts'
 import type { VideoInfo } from '@/types'
 
 const route = useRoute()
 const router = useRouter()
-
 const favoriteId = computed(() => Number(route.params.id))
-const favoriteTitle = computed(() => favoriteId.value === 1 ? '默认收藏夹' : '学习资料')
-const description = computed(() => favoriteId.value === 1 ? '最近常看的优质内容' : '项目开发与知识学习整理')
-
+const currentFavorite = ref<Favorite | null>(null)
+const favoriteTitle = computed(() => currentFavorite.value?.name || '收藏夹')
 const videos = ref<VideoInfo[]>([])
 const loading = ref(false)
 const finished = ref(false)
 const page = ref(1)
 const total = ref(0)
+const showEditPopup = ref(false)
+const submitting = ref(false)
+const editForm = ref({
+  id: 0,
+  name: '',
+  description: '',
+  isPrivate: 0
+})
+
+const loadFavoriteMeta = async () => {
+  try {
+    const favorites = await favoriteApi.getFavoriteList()
+    currentFavorite.value = favorites.find((item) => item.id === favoriteId.value) || null
+    if (currentFavorite.value) {
+      editForm.value = {
+        id: currentFavorite.value.id,
+        name: currentFavorite.value.name,
+        description: currentFavorite.value.description || '',
+        isPrivate: currentFavorite.value.isPrivate || 0
+      }
+    }
+  } catch {
+    showToast('加载收藏夹信息失败')
+  }
+}
 
 const loadMore = async () => {
   if (finished.value) return
@@ -56,7 +154,7 @@ const loadMore = async () => {
     videos.value.push(...res.records)
     total.value = res.total
     if (videos.value.length >= res.total || res.records.length < 12) finished.value = true
-    page.value++
+    page.value += 1
   } catch {
     finished.value = true
     showToast('加载收藏夹失败')
@@ -69,7 +167,51 @@ const goToVideo = (id: number) => {
   router.push(`/video/${id}`)
 }
 
+const openEditPopup = () => {
+  if (!currentFavorite.value) return
+  showEditPopup.value = true
+}
+
+const saveFavorite = async () => {
+  if (!editForm.value.name.trim()) {
+    showToast('请输入收藏夹名称')
+    return
+  }
+  submitting.value = true
+  try {
+    await favoriteApi.updateFavorite({
+      id: editForm.value.id,
+      name: editForm.value.name.trim(),
+      description: editForm.value.description.trim(),
+      isPrivate: editForm.value.isPrivate
+    })
+    showSuccessToast('已保存')
+    showEditPopup.value = false
+    await loadFavoriteMeta()
+  } catch (error: any) {
+    showToast(error?.message || '保存失败')
+  } finally {
+    submitting.value = false
+  }
+}
+
+const removeVideo = async (videoId: number) => {
+  try {
+    await showConfirmDialog({
+      title: '移除视频',
+      message: '确定从收藏中移除该视频吗？'
+    })
+    await videoApi.unfavoriteVideo(videoId)
+    videos.value = videos.value.filter((item) => item.id !== videoId)
+    total.value = Math.max(0, total.value - 1)
+    showSuccessToast('已移除')
+  } catch (error: any) {
+    if (error !== 'cancel' && error?.message) showToast(error.message)
+  }
+}
+
 onMounted(() => {
+  loadFavoriteMeta()
   loadMore()
 })
 </script>
@@ -77,42 +219,60 @@ onMounted(() => {
 <style scoped lang="scss">
 .favorite-detail-page {
   min-height: 100vh;
-  background: #f6f7fb;
+  background: #f4f5f7;
+  padding-bottom: 36px;
 }
 
-.favorite-hero {
-  margin: 18px auto 12px;
-  max-width: 1400px;
-  padding: 24px 22px;
-  border-radius: 24px;
-  color: #fff;
-  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+.detail-shell {
+  padding-top: 18px;
+}
+
+.page-head {
+  margin-bottom: 16px;
+  padding: 16px 18px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: var(--shadow-sm);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 20px;
+  gap: 12px;
+}
 
-  h2 {
-    margin: 0 0 8px;
-    font-size: 28px;
+.head-main {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  strong {
+    display: block;
+    font-size: 24px;
   }
 
-  p {
-    margin: 0;
-    color: rgba(255, 255, 255, 0.84);
-  }
-
-  .count {
-    padding: 10px 16px;
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.18);
+  span {
+    color: #9499a0;
+    font-size: 13px;
   }
 }
 
-.favorite-list {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 8px 12px 24px;
+.back-link,
+.edit-link {
+  color: var(--link-color);
+  font-size: 13px;
+}
+
+.head-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.privacy-tag {
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: #f6f7f8;
+  color: #61666d;
+  font-size: 12px;
 }
 
 .video-grid {
@@ -120,4 +280,27 @@ onMounted(() => {
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 18px 16px;
 }
+
+.favorite-video-item {
+  display: grid;
+  gap: 8px;
+}
+
+.remove-link {
+  justify-self: flex-end;
+  color: #fb7299;
+  font-size: 13px;
+}
+
+.favorite-popup {
+  padding: 20px 16px 28px;
+  display: grid;
+  gap: 12px;
+}
+
+.popup-title {
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+}
 </style>