refactor(P3): HomeView 拆分为 3 composable + CommentDrawer 组件 (924行→~180行)
This commit is contained in:
Sisyphus
@@ -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"`
|
||||
|
||||
153
frontend/src/components/CommentDrawer.vue
vendored
Normal file
153
frontend/src/components/CommentDrawer.vue
vendored
Normal file
@@ -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>
|
||||
67
frontend/src/composables/useLikeFollow.ts
Normal file
67
frontend/src/composables/useLikeFollow.ts
Normal file
@@ -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 }
|
||||
}
|
||||
112
frontend/src/composables/useVideoFeed.ts
Normal file
112
frontend/src/composables/useVideoFeed.ts
Normal file
@@ -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 }
|
||||
}
|
||||
78
frontend/src/composables/useVideoPlayer.ts
Normal file
78
frontend/src/composables/useVideoPlayer.ts
Normal file
@@ -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 }
|
||||
}
|
||||
875
frontend/src/views/HomeView.vue
vendored
875
frontend/src/views/HomeView.vue
vendored
@@ -1,19 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
|
||||
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 { 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 type { FeedVideoItem } from '../api/types'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { useSocialStore } from '../stores/social'
|
||||
import { useToastStore } from '../stores/toast'
|
||||
|
||||
type TabKey = 'recommend' | 'hot' | 'following'
|
||||
import { useVideoFeed } from '../composables/useVideoFeed'
|
||||
import { useVideoPlayer } from '../composables/useVideoPlayer'
|
||||
import { useLikeFollow } from '../composables/useLikeFollow'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -21,55 +19,29 @@ const auth = useAuthStore()
|
||||
const social = useSocialStore()
|
||||
const toast = useToastStore()
|
||||
|
||||
const tab = ref<TabKey>('recommend')
|
||||
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 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
|
||||
@@ -78,366 +50,56 @@ const visibleRange = computed(() => {
|
||||
})
|
||||
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()
|
||||
await playActive(activeItem.value?.id)
|
||||
await loadMoreIfNeeded(activeIndex.value)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => tab.value,
|
||||
async () => {
|
||||
watch(() => tab.value, async () => {
|
||||
activeIndex.value = 0
|
||||
videoMap.clear()
|
||||
if (scroller.value) scroller.value.scrollTop = 0
|
||||
await ensureTabLoaded()
|
||||
await nextTick()
|
||||
await playActive()
|
||||
},
|
||||
)
|
||||
await playActive(activeItem.value?.id)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => q.value,
|
||||
async () => {
|
||||
watch(() => q.value, async () => {
|
||||
activeIndex.value = 0
|
||||
if (scroller.value) scroller.value.scrollTop = 0
|
||||
await nextTick()
|
||||
await playActive()
|
||||
},
|
||||
)
|
||||
await playActive(activeItem.value?.id)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => filteredItems.value.length,
|
||||
(len) => {
|
||||
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)
|
||||
}
|
||||
},
|
||||
)
|
||||
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()
|
||||
await playActive(activeItem.value?.id)
|
||||
window.addEventListener('keydown', onKeydown)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKeydown)
|
||||
})
|
||||
onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -447,7 +109,6 @@ onBeforeUnmount(() => {
|
||||
<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>
|
||||
@@ -456,9 +117,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
<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="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
|
||||
@@ -468,18 +127,15 @@ onBeforeUnmount(() => {
|
||||
class="slide"
|
||||
:class="{ active: idx === activeIndex }"
|
||||
>
|
||||
<div class="stage" @click="togglePlayPause" @dblclick.prevent="toggleLike(item)">
|
||||
<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
|
||||
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" />
|
||||
@@ -488,35 +144,28 @@ onBeforeUnmount(() => {
|
||||
<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"
|
||||
class="act" type="button"
|
||||
:disabled="!!followBusy[String(item.author.id)]"
|
||||
@click.stop="toggleFollow(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>
|
||||
@@ -527,398 +176,40 @@ onBeforeUnmount(() => {
|
||||
</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>
|
||||
<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; /* 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;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user