From 41ae86f908edb612aefd893b77fe0770bfe3d537 Mon Sep 17 00:00:00 2001
From: Sisyphus <ad201@feedsystem.local>
Date: Sat, 25 Apr 2026 16:48:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor(P3):=20HomeView=20=E6=8B=86=E5=88=86?=
 =?UTF-8?q?=E4=B8=BA=203=20composable=20+=20CommentDrawer=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20(924=E8=A1=8C=E2=86=92~180=E8=A1=8C)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/internal/video/video_entity.go     |    1 -
 frontend/src/components/CommentDrawer.vue  |  153 +++
 frontend/src/composables/useLikeFollow.ts  |   67 ++
 frontend/src/composables/useVideoFeed.ts   |  112 ++
 frontend/src/composables/useVideoPlayer.ts |   78 ++
 frontend/src/views/HomeView.vue            | 1139 ++++----------------
 6 files changed, 625 insertions(+), 925 deletions(-)
 create mode 100644 frontend/src/components/CommentDrawer.vue
 create mode 100644 frontend/src/composables/useLikeFollow.ts
 create mode 100644 frontend/src/composables/useVideoFeed.ts
 create mode 100644 frontend/src/composables/useVideoPlayer.ts

diff --git a/backend/internal/video/video_entity.go b/backend/internal/video/video_entity.go
index 67bf022..d0d0b5a 100644
--- a/backend/internal/video/video_entity.go
+++ b/backend/internal/video/video_entity.go
@@ -14,7 +14,6 @@ type Video struct {
 	LikesCount  int64     `gorm:"column:likes_count;not null;default:0;index:idx_videos_likes_count_id,priority:1,sort:desc" json:"likes_count"`
 	Popularity  int64     `gorm:"column:popularity;not null;default:0;index:idx_videos_popularity_time_id,priority:1,sort:desc" json:"popularity"`
 }
-}
 
 type PublishVideoRequest struct {
 	Title       string `json:"title"`
diff --git a/frontend/src/components/CommentDrawer.vue b/frontend/src/components/CommentDrawer.vue
new file mode 100644
index 0000000..4a0954e
--- /dev/null
+++ b/frontend/src/components/CommentDrawer.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+import { ApiError } from '../api/client'
+import * as commentApi from '../api/comment'
+import type { Comment, FeedVideoItem } from '../api/types'
+import { useAuthStore } from '../stores/auth'
+import { useToastStore } from '../stores/toast'
+
+const props = defineProps<{ video: FeedVideoItem | null }>()
+const emit = defineEmits<{ close: [] }>()
+
+const auth = useAuthStore()
+const toast = useToastStore()
+
+const drawer = reactive({
+  loading: false,
+  error: '',
+  comments: [] as Comment[],
+  content: '',
+})
+
+function needLogin() {
+  toast.error('请先登录')
+}
+
+function close() {
+  drawer.comments = []
+  drawer.content = ''
+  drawer.error = ''
+  emit('close')
+}
+
+async function loadComments() {
+  if (!props.video) return
+  drawer.loading = true
+  drawer.error = ''
+  try {
+    drawer.comments = await commentApi.listAll(props.video.id)
+  } catch (e) {
+    drawer.error = e instanceof ApiError ? e.message : String(e)
+  } finally {
+    drawer.loading = false
+  }
+}
+
+async function publishComment() {
+  if (!props.video) return
+  if (!auth.isLoggedIn) return needLogin()
+  const content = drawer.content.trim()
+  if (!content) return
+  drawer.loading = true
+  drawer.error = ''
+  try {
+    await commentApi.publish(props.video.id, content)
+    drawer.content = ''
+    await loadComments()
+    toast.success('评论已发布')
+  } catch (e) {
+    drawer.error = e instanceof ApiError ? e.message : String(e)
+    toast.error(drawer.error)
+  } finally {
+    drawer.loading = false
+  }
+}
+
+function canDeleteComment(c: Comment) {
+  const myId = auth.claims?.account_id
+  return !!myId && myId === c.author_id
+}
+
+async function deleteComment(commentId: number) {
+  if (!props.video) return
+  if (!auth.isLoggedIn) return needLogin()
+  if (!window.confirm('确认删除这条评论？')) return
+  drawer.loading = true
+  drawer.error = ''
+  try {
+    await commentApi.remove(commentId)
+    await loadComments()
+    toast.info('评论已删除')
+  } catch (e) {
+    drawer.error = e instanceof ApiError ? e.message : String(e)
+    toast.error(drawer.error)
+  } finally {
+    drawer.loading = false
+  }
+}
+
+defineExpose({ loadComments })
+</script>
+
+<template>
+  <div class="drawer-backdrop" @click.self="close">
+    <div class="drawer">
+      <div class="drawer-head">
+        <div class="drawer-title">{{ video?.title ?? '评论' }}</div>
+        <button class="drawer-x" type="button" @click="close">×</button>
+      </div>
+
+      <div class="drawer-body">
+        <div v-if="drawer.loading" class="drawer-hint">加载中…</div>
+        <div v-else-if="drawer.error" class="drawer-hint bad">{{ drawer.error }}</div>
+        <div v-else-if="drawer.comments.length === 0" class="drawer-hint">暂无评论</div>
+
+        <div class="comment" v-for="c in drawer.comments" :key="c.id">
+          <div class="comment-top">
+            <div class="comment-user">{{ c.username }}</div>
+            <div class="comment-meta mono">#{{ c.id }} · {{ new Date(c.created_at).toLocaleString() }}</div>
+          </div>
+          <div class="comment-content">{{ c.content }}</div>
+          <div class="comment-actions">
+            <button v-if="canDeleteComment(c)" class="chip danger" type="button" :disabled="drawer.loading" @click="deleteComment(c.id)">删除</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="drawer-foot">
+        <textarea v-model="drawer.content" placeholder="说点什么…" :disabled="drawer.loading" />
+        <div class="row" style="justify-content: space-between; margin-top: 8px">
+          <button class="chip" type="button" :disabled="drawer.loading" @click="loadComments">刷新</button>
+          <button class="chip primary" type="button" :disabled="drawer.loading || !drawer.content.trim()" @click="publishComment">发送</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(10px); z-index: 120; display: grid; justify-items: end; }
+.drawer { width: min(420px, calc(100vw - 18px)); height: 100vh; background: rgba(0,0,0,0.65); border-left: 1px solid rgba(255,255,255,0.12); display: grid; grid-template-rows: auto 1fr auto; }
+.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px; border-bottom: 1px solid rgba(255,255,255,0.1); }
+.drawer-title { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.drawer-x { width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); cursor: pointer; font-size: 20px; line-height: 1; }
+.drawer-body { overflow: auto; padding: 12px 14px; display: grid; gap: 10px; }
+.drawer-foot { border-top: 1px solid rgba(255,255,255,0.1); padding: 12px 14px; }
+.drawer-foot textarea { width: 100%; min-height: 82px; resize: none; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); padding: 10px 12px; outline: none; }
+.drawer-hint { color: rgba(255,255,255,0.78); padding: 12px 0; }
+.drawer-hint.bad { color: rgba(254,44,85,0.92); }
+.comment { border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); border-radius: 14px; padding: 10px 10px; }
+.comment-top { display: grid; gap: 3px; }
+.comment-user { font-weight: 700; font-size: 13px; }
+.comment-meta { font-size: 12px; color: rgba(255,255,255,0.55); }
+.comment-content { margin-top: 8px; font-size: 13px; line-height: 1.35; color: rgba(255,255,255,0.86); white-space: pre-wrap; word-break: break-word; }
+.comment-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
+.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.28); color: rgba(255,255,255,0.86); font-size: 12px; text-decoration: none; cursor: pointer; }
+.chip.primary { border-color: rgba(254,44,85,0.45); background: rgba(254,44,85,0.14); }
+.chip.danger { border-color: rgba(254,44,85,0.55); background: rgba(254,44,85,0.12); }
+@media (max-width: 900px) {
+  .drawer-backdrop { justify-items: center; align-items: end; }
+  .drawer { width: calc(100vw - 16px); height: min(72vh, 560px); border-left: none; border-top: 1px solid rgba(255,255,255,0.12); border-radius: 18px 18px 0 0; overflow: hidden; }
+}
+</style>
diff --git a/frontend/src/composables/useLikeFollow.ts b/frontend/src/composables/useLikeFollow.ts
new file mode 100644
index 0000000..ed263c3
--- /dev/null
+++ b/frontend/src/composables/useLikeFollow.ts
@@ -0,0 +1,67 @@
+import { reactive } from 'vue'
+import { ApiError } from '../api/client'
+import * as likeApi from '../api/like'
+import type { FeedVideoItem } from '../api/types'
+import { useAuthStore } from '../stores/auth'
+import { useSocialStore } from '../stores/social'
+import { useToastStore } from '../stores/toast'
+
+export function useLikeFollow(needLogin: () => void) {
+  const auth = useAuthStore()
+  const social = useSocialStore()
+  const toast = useToastStore()
+
+  const likeBusy = reactive<Record<string, boolean>>({})
+  const followBusy = reactive<Record<string, boolean>>({})
+
+  async function toggleLike(item: FeedVideoItem) {
+    if (!auth.isLoggedIn) return needLogin()
+    const key = String(item.id)
+    if (likeBusy[key]) return
+    likeBusy[key] = true
+    try {
+      if (item.is_liked) await likeApi.unlike(item.id)
+      else await likeApi.like(item.id)
+      item.is_liked = !item.is_liked
+      item.likes_count = Math.max(0, item.likes_count + (item.is_liked ? 1 : -1))
+    } catch (e) {
+      const msg = e instanceof ApiError ? e.message : String(e)
+      toast.error(msg)
+    } finally {
+      likeBusy[key] = false
+    }
+  }
+
+  async function toggleFollow(authorId: number) {
+    if (!auth.isLoggedIn) return needLogin()
+    const key = String(authorId)
+    if (followBusy[key]) return
+    followBusy[key] = true
+    try {
+      if (social.isFollowing(authorId)) {
+        await social.unfollow(authorId)
+        toast.info('已取关')
+      } else {
+        await social.follow(authorId)
+        toast.success('已关注')
+      }
+    } catch (e) {
+      const msg = e instanceof ApiError ? e.message : String(e)
+      toast.error(msg)
+    } finally {
+      followBusy[key] = false
+    }
+  }
+
+  async function share(item: FeedVideoItem) {
+    const url = `${location.origin}/video/${item.id}`
+    try {
+      await navigator.clipboard.writeText(url)
+      toast.success('链接已复制')
+    } catch {
+      window.prompt('复制链接', url)
+    }
+  }
+
+  return { likeBusy, followBusy, toggleLike, toggleFollow, share }
+}
diff --git a/frontend/src/composables/useVideoFeed.ts b/frontend/src/composables/useVideoFeed.ts
new file mode 100644
index 0000000..b5e227b
--- /dev/null
+++ b/frontend/src/composables/useVideoFeed.ts
@@ -0,0 +1,112 @@
+import { computed, reactive, ref } from 'vue'
+import { ApiError } from '../api/client'
+import * as feedApi from '../api/feed'
+import type { FeedVideoItem } from '../api/types'
+import { useAuthStore } from '../stores/auth'
+
+export type TabKey = 'recommend' | 'hot' | 'following'
+
+export function useVideoFeed() {
+  const auth = useAuthStore()
+  const tab = ref<TabKey>('recommend')
+
+  const recommend = reactive({
+    items: [] as FeedVideoItem[],
+    loading: false, error: '',
+    hasMore: false, nextTime: 0,
+  })
+
+  const hot = reactive({
+    items: [] as FeedVideoItem[],
+    loading: false, error: '',
+    hasMore: false,
+    nextLikesCountBefore: undefined as number | undefined,
+    nextIdBefore: undefined as number | undefined,
+  })
+
+  const following = reactive({
+    items: [] as FeedVideoItem[],
+    loading: false, error: '',
+    hasMore: false, nextTime: 0,
+  })
+
+  const currentState = computed(() => {
+    if (tab.value === 'hot') return hot
+    if (tab.value === 'following') return following
+    return recommend
+  })
+
+  async function loadRecommend(reset: boolean) {
+    if (recommend.loading) return
+    recommend.loading = true
+    recommend.error = ''
+    try {
+      const res = await feedApi.listLatest({ limit: 10, latest_time: reset ? 0 : recommend.nextTime })
+      recommend.hasMore = res.has_more
+      recommend.nextTime = res.next_time
+      recommend.items = reset ? res.video_list : recommend.items.concat(res.video_list)
+    } catch (e) {
+      recommend.error = e instanceof ApiError ? e.message : String(e)
+    } finally {
+      recommend.loading = false
+    }
+  }
+
+  async function loadHot(reset: boolean) {
+    if (hot.loading) return
+    hot.loading = true
+    hot.error = ''
+    try {
+      const res = await feedApi.listLikesCount({
+        limit: 10,
+        likes_count_before: reset ? undefined : hot.nextLikesCountBefore,
+        id_before: reset ? undefined : hot.nextIdBefore,
+      })
+      hot.hasMore = res.has_more
+      hot.nextLikesCountBefore = res.next_likes_count_before
+      hot.nextIdBefore = res.next_id_before
+      hot.items = reset ? res.video_list : hot.items.concat(res.video_list)
+    } catch (e) {
+      hot.error = e instanceof ApiError ? e.message : String(e)
+    } finally {
+      hot.loading = false
+    }
+  }
+
+  async function loadFollowing(reset: boolean) {
+    if (!auth.isLoggedIn) {
+      following.error = '登录后才能查看关注流'
+      return
+    }
+    if (following.loading) return
+    following.loading = true
+    following.error = ''
+    try {
+      const res = await feedApi.listByFollowing({ limit: 10, latest_time: reset ? 0 : following.nextTime })
+      following.hasMore = res.has_more
+      following.nextTime = res.next_time
+      following.items = reset ? res.video_list : following.items.concat(res.video_list)
+    } catch (e) {
+      following.error = e instanceof ApiError ? e.message : String(e)
+    } finally {
+      following.loading = false
+    }
+  }
+
+  async function ensureTabLoaded() {
+    if (tab.value === 'recommend' && recommend.items.length === 0) await loadRecommend(true)
+    if (tab.value === 'hot' && hot.items.length === 0) await loadHot(true)
+    if (tab.value === 'following' && following.items.length === 0) await loadFollowing(true)
+  }
+
+  async function loadMoreIfNeeded(activeIndex: number) {
+    const items = currentState.value.items
+    if (items.length === 0) return
+    if (activeIndex < items.length - 3) return
+    if (tab.value === 'recommend' && recommend.hasMore) await loadRecommend(false)
+    if (tab.value === 'hot' && hot.hasMore) await loadHot(false)
+    if (tab.value === 'following' && following.hasMore) await loadFollowing(false)
+  }
+
+  return { tab, recommend, hot, following, currentState, loadRecommend, loadHot, loadFollowing, ensureTabLoaded, loadMoreIfNeeded }
+}
diff --git a/frontend/src/composables/useVideoPlayer.ts b/frontend/src/composables/useVideoPlayer.ts
new file mode 100644
index 0000000..39a4607
--- /dev/null
+++ b/frontend/src/composables/useVideoPlayer.ts
@@ -0,0 +1,78 @@
+import { ref } from 'vue'
+import { useToastStore } from '../stores/toast'
+
+export function useVideoPlayer(scrollerRef: ReturnType<typeof ref<HTMLDivElement | null>>) {
+  const toast = useToastStore()
+  const muted = ref(true)
+  const activeIndex = ref(0)
+  const videoMap = new Map<number, HTMLVideoElement>()
+
+  function getScrollerHeight() {
+    return scrollerRef.value?.clientHeight ?? 0
+  }
+
+  function setVideoRef(id: number, el: HTMLVideoElement | null) {
+    if (el) {
+      el.muted = muted.value
+      videoMap.set(id, el)
+    } else {
+      videoMap.delete(id)
+    }
+  }
+
+  function scrollToIndex(idx: number, totalItems: number) {
+    const el = scrollerRef.value
+    if (!el) return
+    const h = getScrollerHeight()
+    if (!h) return
+    const next = Math.max(0, Math.min(idx, Math.max(0, totalItems - 1)))
+    el.scrollTo({ top: next * h, behavior: 'smooth' })
+  }
+
+  let scrollRaf = 0
+  function onScroll() {
+    if (!scrollerRef.value) return
+    if (scrollRaf) return
+    scrollRaf = window.requestAnimationFrame(() => {
+      scrollRaf = 0
+      const el = scrollerRef.value
+      if (!el) return
+      const h = el.clientHeight
+      if (!h) return
+      const idx = Math.round(el.scrollTop / h)
+      if (idx !== activeIndex.value) activeIndex.value = idx
+    })
+  }
+
+  async function playActive(activeItemId: number | undefined) {
+    if (!activeItemId) return
+    for (const [id, v] of videoMap.entries()) {
+      if (id === activeItemId) continue
+      v.pause()
+    }
+    const video = videoMap.get(activeItemId)
+    if (!video) return
+    video.muted = muted.value
+    try {
+      await video.play()
+    } catch {
+      /* ignore autoplay errors */
+    }
+  }
+
+  function toggleMute() {
+    muted.value = !muted.value
+    for (const v of videoMap.values()) v.muted = muted.value
+    toast.info(muted.value ? '已静音' : '已取消静音')
+  }
+
+  function togglePlayPause(activeItemId: number | undefined) {
+    if (!activeItemId) return
+    const video = videoMap.get(activeItemId)
+    if (!video) return
+    if (video.paused) void video.play()
+    else video.pause()
+  }
+
+  return { muted, activeIndex, videoMap, setVideoRef, scrollToIndex, onScroll, playActive, toggleMute, togglePlayPause }
+}
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index ccb3065..367ecb9 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,924 +1,215 @@
-<script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-
-import AppShell from '../components/AppShell.vue'
-import UserAvatar from '../components/UserAvatar.vue'
-import { ApiError } from '../api/client'
-import * as commentApi from '../api/comment'
-import * as feedApi from '../api/feed'
-import * as likeApi from '../api/like'
-import type { Comment, FeedVideoItem } from '../api/types'
-import { useAuthStore } from '../stores/auth'
-import { useSocialStore } from '../stores/social'
-import { useToastStore } from '../stores/toast'
-
-type TabKey = 'recommend' | 'hot' | 'following'
-
-const route = useRoute()
-const router = useRouter()
-const auth = useAuthStore()
-const social = useSocialStore()
-const toast = useToastStore()
-
-const tab = ref<TabKey>('recommend')
-const scroller = ref<HTMLDivElement | null>(null)
-
-const q = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim().toLowerCase() : ''))
-
-const recommend = reactive({
-  items: [] as FeedVideoItem[],
-  loading: false,
-  error: '',
-  hasMore: false,
-  nextTime: 0,
-})
-
-const hot = reactive({
-  items: [] as FeedVideoItem[],
-  loading: false,
-  error: '',
-  hasMore: false,
-  nextLikesCountBefore: undefined as number | undefined,
-  nextIdBefore: undefined as number | undefined,
-})
-
-const following = reactive({
-  items: [] as FeedVideoItem[],
-  loading: false,
-  error: '',
-  hasMore: false,
-  nextTime: 0,
-})
-
-const likeBusy = reactive<Record<string, boolean>>({})
-const followBusy = reactive<Record<string, boolean>>({})
-
-const muted = ref(true)
-const activeIndex = ref(0)
-const videoMap = new Map<number, HTMLVideoElement>()
-
-const currentState = computed(() => {
-  if (tab.value === 'hot') return hot
-  if (tab.value === 'following') return following
-  return recommend
-})
-
-const filteredItems = computed(() => {
-  const items = currentState.value.items
-  if (!q.value) return items
-  return items.filter((v) => v.title.toLowerCase().includes(q.value) || v.author.username.toLowerCase().includes(q.value))
-})
-
-const activeItem = computed(() => filteredItems.value[activeIndex.value] ?? null)
-const visibleRange = computed(() => {
-  const idx = activeIndex.value
-  const len = filteredItems.value.length
-  return { start: Math.max(0, idx - 1), end: Math.min(len - 1, idx + 1) }
-})
-const myAccountId = computed(() => auth.claims?.account_id ?? 0)
-
-function setVideoRef(id: number, el: HTMLVideoElement | null) {
-  if (el) {
-    el.muted = muted.value
-    videoMap.set(id, el)
-  } else {
-    videoMap.delete(id)
-  }
-}
-
-function getScrollerHeight() {
-  return scroller.value?.clientHeight ?? 0
-}
-
-function scrollToIndex(idx: number) {
-  const el = scroller.value
-  if (!el) return
-  const h = getScrollerHeight()
-  if (!h) return
-  const next = Math.max(0, Math.min(idx, Math.max(0, filteredItems.value.length - 1)))
-  el.scrollTo({ top: next * h, behavior: 'smooth' })
-}
-
-let scrollRaf = 0
-function onScroll() {
-  if (!scroller.value) return
-  if (scrollRaf) return
-  scrollRaf = window.requestAnimationFrame(() => {
-    scrollRaf = 0
-    const el = scroller.value
-    if (!el) return
-    const h = el.clientHeight
-    if (!h) return
-    const idx = Math.round(el.scrollTop / h)
-    if (idx !== activeIndex.value) activeIndex.value = idx
-  })
-}
-
-async function playActive() {
-  const item = activeItem.value
-  if (!item) return
-  for (const [id, v] of videoMap.entries()) {
-    if (id === item.id) continue
-    v.pause()
-  }
-  const video = videoMap.get(item.id)
-  if (!video) return
-  video.muted = muted.value
-  try {
-    await video.play()
-  } catch {
-    // ignore autoplay errors
-  }
-}
-
-function toggleMute() {
-  muted.value = !muted.value
-  for (const v of videoMap.values()) v.muted = muted.value
-  toast.info(muted.value ? '已静音' : '已取消静音')
-}
-
-function togglePlayPause() {
-  const item = activeItem.value
-  if (!item) return
-  const video = videoMap.get(item.id)
-  if (!video) return
-  if (video.paused) {
-    void video.play()
-  } else {
-    video.pause()
-  }
-}
-
-async function needLogin() {
-  toast.error('请先登录')
-  await router.push('/account')
-}
-
-async function loadRecommend(reset: boolean) {
-  if (recommend.loading) return
-  recommend.loading = true
-  recommend.error = ''
-  try {
-    const res = await feedApi.listLatest({ limit: 10, latest_time: reset ? 0 : recommend.nextTime })
-    recommend.hasMore = res.has_more
-    recommend.nextTime = res.next_time
-    recommend.items = reset ? res.video_list : recommend.items.concat(res.video_list)
-  } catch (e) {
-    recommend.error = e instanceof ApiError ? e.message : String(e)
-  } finally {
-    recommend.loading = false
-  }
-}
-
-async function loadHot(reset: boolean) {
-  if (hot.loading) return
-  hot.loading = true
-  hot.error = ''
-  try {
-    const res = await feedApi.listLikesCount({
-      limit: 10,
-      likes_count_before: reset ? undefined : hot.nextLikesCountBefore,
-      id_before: reset ? undefined : hot.nextIdBefore,
-    })
-    hot.hasMore = res.has_more
-    hot.nextLikesCountBefore = res.next_likes_count_before
-    hot.nextIdBefore = res.next_id_before
-    hot.items = reset ? res.video_list : hot.items.concat(res.video_list)
-  } catch (e) {
-    hot.error = e instanceof ApiError ? e.message : String(e)
-  } finally {
-    hot.loading = false
-  }
-}
-
-async function loadFollowing(reset: boolean) {
-  if (!auth.isLoggedIn) {
-    following.error = '登录后才能查看关注流'
-    return
-  }
-  if (following.loading) return
-  following.loading = true
-  following.error = ''
-  try {
-    const res = await feedApi.listByFollowing({ limit: 10, latest_time: reset ? 0 : following.nextTime })
-    following.hasMore = res.has_more
-    following.nextTime = res.next_time
-    following.items = reset ? res.video_list : following.items.concat(res.video_list)
-  } catch (e) {
-    following.error = e instanceof ApiError ? e.message : String(e)
-  } finally {
-    following.loading = false
-  }
-}
-
-async function ensureTabLoaded() {
-  if (tab.value === 'recommend' && recommend.items.length === 0) await loadRecommend(true)
-  if (tab.value === 'hot' && hot.items.length === 0) await loadHot(true)
-  if (tab.value === 'following' && following.items.length === 0) await loadFollowing(true)
-}
-
-async function loadMoreIfNeeded() {
-  const idx = activeIndex.value
-  const items = filteredItems.value
-  if (items.length === 0) return
-  if (idx < items.length - 3) return
-
-  if (tab.value === 'recommend' && recommend.hasMore) await loadRecommend(false)
-  if (tab.value === 'hot' && hot.hasMore) await loadHot(false)
-  if (tab.value === 'following' && following.hasMore) await loadFollowing(false)
-}
-
-async function toggleLike(item: FeedVideoItem) {
-  if (!auth.isLoggedIn) return needLogin()
-  const key = String(item.id)
-  if (likeBusy[key]) return
-  likeBusy[key] = true
-  try {
-    if (item.is_liked) await likeApi.unlike(item.id)
-    else await likeApi.like(item.id)
-    item.is_liked = !item.is_liked
-    item.likes_count = Math.max(0, item.likes_count + (item.is_liked ? 1 : -1))
-  } catch (e) {
-    const msg = e instanceof ApiError ? e.message : String(e)
-    toast.error(msg)
-  } finally {
-    likeBusy[key] = false
-  }
-}
-
-async function toggleFollow(authorId: number) {
-  if (!auth.isLoggedIn) return needLogin()
-  const key = String(authorId)
-  if (followBusy[key]) return
-  followBusy[key] = true
-  try {
-    if (social.isFollowing(authorId)) {
-      await social.unfollow(authorId)
-      toast.info('已取关')
-    } else {
-      await social.follow(authorId)
-      toast.success('已关注')
-    }
-  } catch (e) {
-    const msg = e instanceof ApiError ? e.message : String(e)
-    toast.error(msg)
-  } finally {
-    followBusy[key] = false
-  }
-}
-
-async function share(item: FeedVideoItem) {
-  const url = `${location.origin}/video/${item.id}`
-  try {
-    await navigator.clipboard.writeText(url)
-    toast.success('链接已复制')
-  } catch {
-    window.prompt('复制链接', url)
-  }
-}
-
-const drawer = reactive({
-  open: false,
-  video: null as FeedVideoItem | null,
-  loading: false,
-  error: '',
-  comments: [] as Comment[],
-  content: '',
-})
-
-function closeDrawer() {
-  drawer.open = false
-  drawer.video = null
-  drawer.comments = []
-  drawer.content = ''
-  drawer.error = ''
-}
-
-async function openComments(item: FeedVideoItem) {
-  drawer.open = true
-  drawer.video = item
-  drawer.content = ''
-  await loadComments()
-}
-
-async function loadComments() {
-  if (!drawer.video) return
-  drawer.loading = true
-  drawer.error = ''
-  try {
-    drawer.comments = await commentApi.listAll(drawer.video.id)
-  } catch (e) {
-    drawer.error = e instanceof ApiError ? e.message : String(e)
-  } finally {
-    drawer.loading = false
-  }
-}
-
-async function publishComment() {
-  if (!drawer.video) return
-  if (!auth.isLoggedIn) return needLogin()
-  const content = drawer.content.trim()
-  if (!content) return
-  drawer.loading = true
-  drawer.error = ''
-  try {
-    await commentApi.publish(drawer.video.id, content)
-    drawer.content = ''
-    await loadComments()
-    toast.success('评论已发布')
-  } catch (e) {
-    drawer.error = e instanceof ApiError ? e.message : String(e)
-    toast.error(drawer.error)
-  } finally {
-    drawer.loading = false
-  }
-}
-
-function canDeleteComment(c: Comment) {
-  const myId = auth.claims?.account_id
-  return !!myId && myId === c.author_id
-}
-
-async function deleteComment(commentId: number) {
-  if (!drawer.video) return
-  if (!auth.isLoggedIn) return needLogin()
-  if (!window.confirm('确认删除这条评论？')) return
-  drawer.loading = true
-  drawer.error = ''
-  try {
-    await commentApi.remove(commentId)
-    await loadComments()
-    toast.info('评论已删除')
-  } catch (e) {
-    drawer.error = e instanceof ApiError ? e.message : String(e)
-    toast.error(drawer.error)
-  } finally {
-    drawer.loading = false
-  }
-}
-
-async function onKeydown(e: KeyboardEvent) {
-  const t = e.target as HTMLElement | null
-  if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) return
-  if (drawer.open) return
-
-  if (e.key === 'ArrowDown') {
-    e.preventDefault()
-    scrollToIndex(activeIndex.value + 1)
-  } else if (e.key === 'ArrowUp') {
-    e.preventDefault()
-    scrollToIndex(activeIndex.value - 1)
-  } else if (e.key === ' ') {
-    e.preventDefault()
-    togglePlayPause()
-  } else if (e.key.toLowerCase() === 'm') {
-    e.preventDefault()
-    toggleMute()
-  } else if (e.key.toLowerCase() === 'c') {
-    if (activeItem.value) {
-      e.preventDefault()
-      await openComments(activeItem.value)
-    }
-  }
-}
-
-watch(activeItem, async () => {
-  await nextTick()
-  await playActive()
-  await loadMoreIfNeeded()
-})
-
-watch(
-  () => tab.value,
-  async () => {
-    activeIndex.value = 0
-    videoMap.clear()
-    if (scroller.value) scroller.value.scrollTop = 0
-    await ensureTabLoaded()
-    await nextTick()
-    await playActive()
-  },
-)
-
-watch(
-  () => q.value,
-  async () => {
-    activeIndex.value = 0
-    if (scroller.value) scroller.value.scrollTop = 0
-    await nextTick()
-    await playActive()
-  },
-)
-
-watch(
-  () => filteredItems.value.length,
-  (len) => {
-    if (len === 0) activeIndex.value = 0
-    else if (activeIndex.value > len - 1) activeIndex.value = len - 1
-  },
-)
-
-watch(
-  () => auth.isLoggedIn,
-  async (v) => {
-    if (tab.value === 'following' && v && following.items.length === 0) {
-      await loadFollowing(true)
-    }
-  },
-)
-
-onMounted(async () => {
-  await ensureTabLoaded()
-  await nextTick()
-  await playActive()
-  window.addEventListener('keydown', onKeydown)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('keydown', onKeydown)
-})
-</script>
-
-<template>
-  <AppShell full>
-    <div class="page">
-      <div class="tabs">
-        <button class="tab" :class="{ on: tab === 'recommend' }" type="button" @click="tab = 'recommend'">推荐</button>
-        <button class="tab" :class="{ on: tab === 'following' }" type="button" @click="tab = 'following'">关注</button>
-        <button class="tab" :class="{ on: tab === 'hot' }" type="button" @click="tab = 'hot'">点赞榜</button>
-
-        <div class="tabs-right">
-          <button class="chip" type="button" @click="toggleMute">{{ muted ? '静音' : '有声' }}</button>
-          <RouterLink class="chip" :to="activeItem ? `/video/${activeItem.id}` : '/video'">详情</RouterLink>
-        </div>
-      </div>
-
-      <div ref="scroller" class="scroller" @scroll="onScroll">
-        <div v-if="currentState.loading && currentState.items.length === 0" class="center-hint">加载中…</div>
-        <div v-else-if="currentState.error && currentState.items.length === 0" class="center-hint bad">
-          {{ currentState.error }}
-        </div>
-        <div v-else-if="filteredItems.length === 0" class="center-hint">没有匹配内容</div>
-
-        <section
-          v-for="(item, idx) in filteredItems"
-          :key="`${tab}-${item.id}`"
-          v-show="idx >= visibleRange.start && idx <= visibleRange.end"
-          class="slide"
-          :class="{ active: idx === activeIndex }"
-        >
-          <div class="stage" @click="togglePlayPause" @dblclick.prevent="toggleLike(item)">
-            <video
-              class="video"
-              :ref="(el) => setVideoRef(item.id, el as HTMLVideoElement | null)"
-              :src="item.play_url"
-              :poster="item.cover_url"
-              playsinline
-              preload="metadata"
-              loop
-            />
-            <div class="grad" />
-
-            <div class="meta">
-              <RouterLink class="author-link" :to="`/u/${item.author.id}`" @click.stop>
-                <UserAvatar :username="item.author.username" :id="item.author.id" :size="34" />
-                <span class="author-name">@{{ item.author.username }}</span>
-              </RouterLink>
-              <div class="title">{{ item.title }}</div>
-              <div v-if="item.description" class="desc">{{ item.description }}</div>
-            </div>
-
-            <div class="actions">
-              <button class="act" type="button" :disabled="!!likeBusy[String(item.id)]" @click.stop="toggleLike(item)">
-                <span class="icon" :class="{ liked: item.is_liked }">♥</span>
-                <span class="count">{{ item.likes_count }}</span>
-              </button>
-
-              <button class="act" type="button" @click.stop="openComments(item)">
-                <span class="icon">💬</span>
-                <span class="count">评论</span>
-              </button>
-
-              <button
-                v-if="!myAccountId || myAccountId !== item.author.id"
-                class="act"
-                type="button"
-                :disabled="!!followBusy[String(item.author.id)]"
-                @click.stop="toggleFollow(item.author.id)"
-              >
-                <span class="icon">＋</span>
-                <span class="count">{{ social.isFollowing(item.author.id) ? '已关注' : '关注' }}</span>
-              </button>
-
-              <button class="act" type="button" @click.stop="share(item)">
-                <span class="icon">↗</span>
-                <span class="count">分享</span>
-              </button>
-            </div>
-
-            <div class="hint">
-              <span class="chip mono">↑ ↓ 切换</span>
-              <span class="chip mono">空格 暂停</span>
-              <span class="chip mono">M 静音</span>
-              <span class="chip mono">C 评论</span>
-            </div>
-          </div>
-        </section>
-      </div>
-
-      <div v-if="drawer.open" class="drawer-backdrop" @click.self="closeDrawer">
-        <div class="drawer">
-          <div class="drawer-head">
-            <div class="drawer-title">{{ drawer.video?.title ?? '评论' }}</div>
-            <button class="drawer-x" type="button" @click="closeDrawer">×</button>
-          </div>
-
-          <div class="drawer-body">
-            <div v-if="drawer.loading" class="drawer-hint">加载中…</div>
-            <div v-else-if="drawer.error" class="drawer-hint bad">{{ drawer.error }}</div>
-            <div v-else-if="drawer.comments.length === 0" class="drawer-hint">暂无评论</div>
-
-            <div class="comment" v-for="c in drawer.comments" :key="c.id">
-              <div class="comment-top">
-                <div class="comment-user">{{ c.username }}</div>
-                <div class="comment-meta mono">
-                  #{{ c.id }} · {{ new Date(c.created_at).toLocaleString() }}
-                </div>
-              </div>
-              <div class="comment-content">{{ c.content }}</div>
-              <div class="comment-actions">
-                <button v-if="canDeleteComment(c)" class="chip danger" type="button" :disabled="drawer.loading" @click="deleteComment(c.id)">
-                  删除
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <div class="drawer-foot">
-            <textarea v-model="drawer.content" placeholder="说点什么…" :disabled="drawer.loading" />
-            <div class="row" style="justify-content: space-between; margin-top: 8px">
-              <button class="chip" type="button" :disabled="drawer.loading" @click="loadComments">刷新</button>
-              <button class="chip primary" type="button" :disabled="drawer.loading || !drawer.content.trim()" @click="publishComment">
-                发送
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </AppShell>
-</template>
-
-<style scoped>
-.page {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.tabs {
-  height: 52px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 0 14px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(0, 0, 0, 0.25);
-  backdrop-filter: blur(16px);
-}
-
-.tab {
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.06);
-  color: rgba(255, 255, 255, 0.88);
-  border-radius: 999px;
-  padding: 8px 14px;
-  cursor: pointer;
-}
-
-.tab.on {
-  border-color: rgba(254, 44, 85, 0.5);
-  background: rgba(254, 44, 85, 0.16);
-}
-
-.tabs-right {
-  margin-left: auto;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.scroller {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  scroll-snap-type: y mandatory;
-  scroll-behavior: smooth;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE/Edge legacy */
-}
-
-.scroller::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-
-.center-hint {
-  height: calc(100% - 60px);
-  display: grid;
-  place-items: center;
-  color: rgba(255, 255, 255, 0.78);
-}
-
-.center-hint.bad {
-  color: rgba(254, 44, 85, 0.92);
-}
-
-.slide {
-  height: 100%;
-  box-sizing: border-box;
-  scroll-snap-align: start;
-  padding: 18px 14px;
-  display: grid;
-  place-items: center;
-}
-
-.stage {
-  width: min(980px, calc(100vw - 28px));
-  height: calc(100vh - 56px - 52px - 36px);
-  position: relative;
-  border-radius: 18px;
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(0, 0, 0, 0.35);
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
-}
-
-.video {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  background: rgba(0, 0, 0, 0.4);
-}
-
-.grad {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.12) 40%, rgba(0, 0, 0, 0) 70%);
-  pointer-events: none;
-}
-
-.meta {
-  position: absolute;
-  left: 16px;
-  bottom: 18px;
-  max-width: min(620px, calc(100% - 96px));
-}
-
-.author-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  font-weight: 800;
-  letter-spacing: 0.2px;
-  margin-bottom: 6px;
-  text-decoration: none;
-}
-
-.author-link:hover {
-  text-decoration: none;
-}
-
-.author-name {
-  text-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
-}
-
-.title {
-  font-size: 16px;
-  font-weight: 700;
-  margin-bottom: 6px;
-}
-
-.desc {
-  color: rgba(255, 255, 255, 0.74);
-  font-size: 13px;
-  line-height: 1.35;
-}
-
-.actions {
-  position: absolute;
-  right: 12px;
-  bottom: 18px;
-  display: grid;
-  gap: 12px;
-}
-
-.act {
-  width: 70px;
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(0, 0, 0, 0.32);
-  color: rgba(255, 255, 255, 0.92);
-  padding: 10px 10px;
-  cursor: pointer;
-  display: grid;
-  gap: 6px;
-  justify-items: center;
-}
-
-.act:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.act:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.icon {
-  font-size: 20px;
-  line-height: 1;
-  opacity: 0.92;
-}
-
-.icon.liked {
-  color: rgba(254, 44, 85, 1);
-  text-shadow: 0 10px 20px rgba(254, 44, 85, 0.25);
-}
-
-.count {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.hint {
-  position: absolute;
-  left: 14px;
-  top: 14px;
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 7px 10px;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(0, 0, 0, 0.28);
-  color: rgba(255, 255, 255, 0.86);
-  font-size: 12px;
-  text-decoration: none;
-}
-
-.chip.primary {
-  border-color: rgba(254, 44, 85, 0.45);
-  background: rgba(254, 44, 85, 0.14);
-}
-
-.chip.danger {
-  border-color: rgba(254, 44, 85, 0.55);
-  background: rgba(254, 44, 85, 0.12);
-}
-
-.drawer-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.55);
-  backdrop-filter: blur(10px);
-  z-index: 120;
-  display: grid;
-  justify-items: end;
-}
-
-.drawer {
-  width: min(420px, calc(100vw - 18px));
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.65);
-  border-left: 1px solid rgba(255, 255, 255, 0.12);
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-}
-
-.drawer-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 14px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.drawer-title {
-  font-weight: 800;
-  font-size: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.drawer-x {
-  width: 34px;
-  height: 34px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.06);
-  color: rgba(255, 255, 255, 0.9);
-  cursor: pointer;
-  font-size: 20px;
-  line-height: 1;
-}
-
-.drawer-body {
-  overflow: auto;
-  padding: 12px 14px;
-  display: grid;
-  gap: 10px;
-}
-
-.drawer-foot {
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 12px 14px;
-}
-
-.drawer-foot textarea {
-  width: 100%;
-  min-height: 82px;
-  resize: none;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.06);
-  color: rgba(255, 255, 255, 0.9);
-  padding: 10px 12px;
-  outline: none;
-}
-
-.drawer-hint {
-  color: rgba(255, 255, 255, 0.78);
-  padding: 12px 0;
-}
-
-.drawer-hint.bad {
-  color: rgba(254, 44, 85, 0.92);
-}
-
-.comment {
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 14px;
-  padding: 10px 10px;
-}
-
-.comment-top {
-  display: grid;
-  gap: 3px;
-}
-
-.comment-user {
-  font-weight: 700;
-  font-size: 13px;
-}
-
-.comment-meta {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.55);
-}
-
-.comment-content {
-  margin-top: 8px;
-  font-size: 13px;
-  line-height: 1.35;
-  color: rgba(255, 255, 255, 0.86);
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.comment-actions {
-  margin-top: 10px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-@media (max-width: 900px) {
-  .stage {
-    width: calc(100vw - 28px);
-    height: calc(100vh - 56px - 52px - 36px);
-  }
-  .drawer-backdrop {
-    justify-items: center;
-    align-items: end;
-  }
-  .drawer {
-    width: calc(100vw - 16px);
-    height: min(72vh, 560px);
-    border-left: none;
-    border-top: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 18px 18px 0 0;
-    overflow: hidden;
-  }
-}
-</style>
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import AppShell from '../components/AppShell.vue'
+import CommentDrawer from '../components/CommentDrawer.vue'
+import UserAvatar from '../components/UserAvatar.vue'
+import type { FeedVideoItem } from '../api/types'
+import { useAuthStore } from '../stores/auth'
+import { useSocialStore } from '../stores/social'
+import { useToastStore } from '../stores/toast'
+import { useVideoFeed } from '../composables/useVideoFeed'
+import { useVideoPlayer } from '../composables/useVideoPlayer'
+import { useLikeFollow } from '../composables/useLikeFollow'
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+const social = useSocialStore()
+const toast = useToastStore()
+
+const { tab, following, currentState, loadFollowing, ensureTabLoaded, loadMoreIfNeeded } = useVideoFeed()
+const scroller = ref<HTMLDivElement | null>(null)
+const { muted, activeIndex, videoMap, setVideoRef, scrollToIndex, onScroll, playActive, toggleMute, togglePlayPause } = useVideoPlayer(scroller)
+
+async function needLogin() {
+  toast.error('请先登录')
+  await router.push('/account')
+}
+
+const { likeBusy, followBusy, toggleLike, toggleFollow, share } = useLikeFollow(needLogin)
+
+const drawerVideo = ref<FeedVideoItem | null>(null)
+const drawerOpen = ref(false)
+
+function openComments(item: FeedVideoItem) { drawerVideo.value = item; drawerOpen.value = true }
+function closeDrawer() { drawerOpen.value = false; drawerVideo.value = null }
+
+const q = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim().toLowerCase() : ''))
+const filteredItems = computed(() => {
+  const items = currentState.value.items
+  if (!q.value) return items
+  return items.filter((v) => v.title.toLowerCase().includes(q.value) || v.author.username.toLowerCase().includes(q.value))
+})
+const activeItem = computed(() => filteredItems.value[activeIndex.value] ?? null)
+const visibleRange = computed(() => {
+  const idx = activeIndex.value
+  const len = filteredItems.value.length
+  return { start: Math.max(0, idx - 1), end: Math.min(len - 1, idx + 1) }
+})
+const myAccountId = computed(() => auth.claims?.account_id ?? 0)
+
+watch(activeItem, async () => {
+  await nextTick()
+  await playActive(activeItem.value?.id)
+  await loadMoreIfNeeded(activeIndex.value)
+})
+
+watch(() => tab.value, async () => {
+  activeIndex.value = 0
+  videoMap.clear()
+  if (scroller.value) scroller.value.scrollTop = 0
+  await ensureTabLoaded()
+  await nextTick()
+  await playActive(activeItem.value?.id)
+})
+
+watch(() => q.value, async () => {
+  activeIndex.value = 0
+  if (scroller.value) scroller.value.scrollTop = 0
+  await nextTick()
+  await playActive(activeItem.value?.id)
+})
+
+watch(() => filteredItems.value.length, (len) => {
+  if (len === 0) activeIndex.value = 0
+  else if (activeIndex.value > len - 1) activeIndex.value = len - 1
+})
+
+watch(() => auth.isLoggedIn, async (v) => {
+  if (tab.value === 'following' && v && following.items.length === 0) await loadFollowing(true)
+})
+
+async function onKeydown(e: KeyboardEvent) {
+  const t = e.target as HTMLElement | null
+  if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) return
+  if (drawerOpen.value) return
+  if (e.key === 'ArrowDown') { e.preventDefault(); scrollToIndex(activeIndex.value + 1, filteredItems.value.length) }
+  else if (e.key === 'ArrowUp') { e.preventDefault(); scrollToIndex(activeIndex.value - 1, filteredItems.value.length) }
+  else if (e.key === ' ') { e.preventDefault(); togglePlayPause(activeItem.value?.id) }
+  else if (e.key.toLowerCase() === 'm') { e.preventDefault(); toggleMute() }
+  else if (e.key.toLowerCase() === 'c') { if (activeItem.value) { e.preventDefault(); openComments(activeItem.value) } }
+}
+
+onMounted(async () => {
+  await ensureTabLoaded()
+  await nextTick()
+  await playActive(activeItem.value?.id)
+  window.addEventListener('keydown', onKeydown)
+})
+
+onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
+</script>
+
+<template>
+  <AppShell full>
+    <div class="page">
+      <div class="tabs">
+        <button class="tab" :class="{ on: tab === 'recommend' }" type="button" @click="tab = 'recommend'">推荐</button>
+        <button class="tab" :class="{ on: tab === 'following' }" type="button" @click="tab = 'following'">关注</button>
+        <button class="tab" :class="{ on: tab === 'hot' }" type="button" @click="tab = 'hot'">点赞榜</button>
+        <div class="tabs-right">
+          <button class="chip" type="button" @click="toggleMute">{{ muted ? '静音' : '有声' }}</button>
+          <RouterLink class="chip" :to="activeItem ? `/video/${activeItem.id}` : '/video'">详情</RouterLink>
+        </div>
+      </div>
+
+      <div ref="scroller" class="scroller" @scroll="onScroll">
+        <div v-if="currentState.loading && currentState.items.length === 0" class="center-hint">加载中…</div>
+        <div v-else-if="currentState.error && currentState.items.length === 0" class="center-hint bad">{{ currentState.error }}</div>
+        <div v-else-if="filteredItems.length === 0" class="center-hint">没有匹配内容</div>
+
+        <section
+          v-for="(item, idx) in filteredItems"
+          :key="`${tab}-${item.id}`"
+          v-show="idx >= visibleRange.start && idx <= visibleRange.end"
+          class="slide"
+          :class="{ active: idx === activeIndex }"
+        >
+          <div class="stage" @click="togglePlayPause(activeItem?.id)" @dblclick.prevent="toggleLike(item)">
+            <video
+              class="video"
+              :ref="(el) => setVideoRef(item.id, el as HTMLVideoElement | null)"
+              :src="item.play_url"
+              :poster="item.cover_url"
+              playsinline preload="metadata" loop
+            />
+            <div class="grad" />
+            <div class="meta">
+              <RouterLink class="author-link" :to="`/u/${item.author.id}`" @click.stop>
+                <UserAvatar :username="item.author.username" :id="item.author.id" :size="34" />
+                <span class="author-name">@{{ item.author.username }}</span>
+              </RouterLink>
+              <div class="title">{{ item.title }}</div>
+              <div v-if="item.description" class="desc">{{ item.description }}</div>
+            </div>
+            <div class="actions">
+              <button class="act" type="button" :disabled="!!likeBusy[String(item.id)]" @click.stop="toggleLike(item)">
+                <span class="icon" :class="{ liked: item.is_liked }">♥</span>
+                <span class="count">{{ item.likes_count }}</span>
+              </button>
+              <button class="act" type="button" @click.stop="openComments(item)">
+                <span class="icon">💬</span>
+                <span class="count">评论</span>
+              </button>
+              <button
+                v-if="!myAccountId || myAccountId !== item.author.id"
+                class="act" type="button"
+                :disabled="!!followBusy[String(item.author.id)]"
+                @click.stop="toggleFollow(item.author.id)">
+                <span class="icon">＋</span>
+                <span class="count">{{ social.isFollowing(item.author.id) ? '已关注' : '关注' }}</span>
+              </button>
+              <button class="act" type="button" @click.stop="share(item)">
+                <span class="icon">↗</span>
+                <span class="count">分享</span>
+              </button>
+            </div>
+            <div class="hint">
+              <span class="chip mono">↑ ↓ 切换</span>
+              <span class="chip mono">空格 暂停</span>
+              <span class="chip mono">M 静音</span>
+              <span class="chip mono">C 评论</span>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <CommentDrawer v-if="drawerOpen" :video="drawerVideo" @close="closeDrawer" />
+    </div>
+  </AppShell>
+</template>
+
+<style scoped>
+.page { height: 100%; display: flex; flex-direction: column; }
+.tabs { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.25); backdrop-filter: blur(16px); }
+.tab { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.88); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
+.tab.on { border-color: rgba(254,44,85,0.5); background: rgba(254,44,85,0.16); }
+.tabs-right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
+.scroller { flex: 1; min-height: 0; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
+.scroller::-webkit-scrollbar { width: 0; height: 0; }
+.center-hint { height: calc(100% - 60px); display: grid; place-items: center; color: rgba(255,255,255,0.78); }
+.center-hint.bad { color: rgba(254,44,85,0.92); }
+.slide { height: 100%; box-sizing: border-box; scroll-snap-align: start; padding: 18px 14px; display: grid; place-items: center; }
+.stage { width: min(980px, calc(100vw - 28px)); height: calc(100vh - 56px - 52px - 36px); position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.35); box-shadow: 0 20px 60px rgba(0,0,0,0.55); }
+.video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: rgba(0,0,0,0.4); }
+.grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.68), rgba(0,0,0,0.12) 40%, rgba(0,0,0,0) 70%); pointer-events: none; }
+.meta { position: absolute; left: 16px; bottom: 18px; max-width: min(620px, calc(100% - 96px)); }
+.author-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0.2px; margin-bottom: 6px; text-decoration: none; }
+.author-link:hover { text-decoration: none; }
+.author-name { text-shadow: 0 14px 30px rgba(0,0,0,0.55); }
+.title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
+.desc { color: rgba(255,255,255,0.74); font-size: 13px; line-height: 1.35; }
+.actions { position: absolute; right: 12px; bottom: 18px; display: grid; gap: 12px; }
+.act { width: 70px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.32); color: rgba(255,255,255,0.92); padding: 10px 10px; cursor: pointer; display: grid; gap: 6px; justify-items: center; }
+.act:hover { background: rgba(255,255,255,0.1); }
+.act:disabled { opacity: 0.55; cursor: not-allowed; }
+.icon { font-size: 20px; line-height: 1; opacity: 0.92; }
+.icon.liked { color: rgba(254,44,85,1); text-shadow: 0 10px 20px rgba(254,44,85,0.25); }
+.count { font-size: 12px; color: rgba(255,255,255,0.8); }
+.hint { position: absolute; left: 14px; top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
+.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.28); color: rgba(255,255,255,0.86); font-size: 12px; text-decoration: none; }
+.chip.primary { border-color: rgba(254,44,85,0.45); background: rgba(254,44,85,0.14); }
+.chip.danger { border-color: rgba(254,44,85,0.55); background: rgba(254,44,85,0.12); }
+</style>