mirror of
https://github.com/ngthanhvu/kr-phim.git
synced 2026-08-10 17:07:46 +00:00
ngthanhvu
59333d51e9
- Updated AppHeader.vue to use TypeScript interfaces for member menu items and removed unnecessary type assertions. - Modified AuthModal.vue to enhance styling and improve accessibility with consistent class names and structure. - Enhanced CommentReplies.vue to support deleting replies with a new prop and improved event emission. - Adjusted GifPicker.vue to specify types for fetched data, ensuring better type safety. - Refined HomeMovieCard.vue to handle mouse and focus events more robustly, improving user interaction. - Corrected layout in chinh-sach-bao-mat.vue for better responsiveness and readability. - Updated index.vue to streamline gradient overlays and button positioning for a cleaner UI. - Improved [slug].vue to handle server channels and subtitles more dynamically, enhancing playback experience.
268 lines
11 KiB
Vue
268 lines
11 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const keyword = ref(typeof route.query.q === 'string' ? route.query.q : '')
|
|
const mobileMenuOpen = ref(false)
|
|
const memberMenuOpen = ref(false)
|
|
const authModalOpen = ref(false)
|
|
|
|
const { user, fetchUser, logout: doLogout } = useAuth()
|
|
await fetchUser()
|
|
|
|
const displayName = computed(() => {
|
|
if (!user.value) return ''
|
|
return user.value.name || user.value.email?.split('@')[0] || 'Thành viên'
|
|
})
|
|
|
|
const displayInitial = computed(() => displayName.value.charAt(0).toUpperCase())
|
|
|
|
const avatarUrl = computed(() => {
|
|
if (user.value?.avatar) return user.value.avatar
|
|
return null
|
|
})
|
|
|
|
const navItems = [
|
|
{ label: 'Trang chủ', to: '/' },
|
|
{ label: 'Duyệt phim', to: '/phim' },
|
|
{ label: 'Lịch chiếu', to: '/lich-chieu' },
|
|
{ label: 'Phim bộ', to: '/phim?type=series' },
|
|
{ label: 'Phim lẻ', to: '/phim?type=single' },
|
|
]
|
|
|
|
interface MemberMenuItem { label: string, icon: string, to: string }
|
|
|
|
const memberMenuItems = computed(() => {
|
|
const items: MemberMenuItem[] = [
|
|
{ label: 'Trang cá nhân', icon: 'user', to: '/thanh-vien' },
|
|
{ label: 'Yêu thích', icon: 'heart', to: '/yeu-thich' },
|
|
{ label: 'Lịch sử', icon: 'history', to: '/lich-su' },
|
|
]
|
|
if (user.value?.role === 'admin') {
|
|
items.push({ label: 'Trang quản trị', icon: 'settings', to: '/admin' })
|
|
}
|
|
return items
|
|
})
|
|
|
|
function isActive(to: string) {
|
|
if (to === '/') return route.path === '/'
|
|
return route.fullPath === to || route.path === to.split('?')[0] && route.fullPath.includes(to.split('?')[1] || '')
|
|
}
|
|
|
|
function submitSearch() {
|
|
const q = keyword.value.trim()
|
|
router.push({
|
|
path: '/phim',
|
|
query: q ? { q } : undefined,
|
|
})
|
|
}
|
|
|
|
function closeMobileMenu() {
|
|
mobileMenuOpen.value = false
|
|
}
|
|
|
|
function openAuthModal() {
|
|
authModalOpen.value = true
|
|
}
|
|
|
|
function handleMemberClick() {
|
|
if (!user.value) {
|
|
openAuthModal()
|
|
return
|
|
}
|
|
memberMenuOpen.value = !memberMenuOpen.value
|
|
}
|
|
|
|
async function handleLogout() {
|
|
await doLogout()
|
|
memberMenuOpen.value = false
|
|
router.push('/')
|
|
}
|
|
|
|
watch(() => route.path, () => {
|
|
closeMobileMenu()
|
|
memberMenuOpen.value = false
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<header class="fixed inset-x-0 top-0 z-50 bg-linear-to-b from-black/80 via-black/40 to-transparent">
|
|
<nav class="mx-auto flex max-w-390 items-center gap-3 px-4 py-3 sm:px-6 lg:gap-6 lg:px-8 xl:px-10">
|
|
<AppLogo />
|
|
|
|
<div class="hidden lg:flex lg:items-center lg:gap-7 lg:text-sm lg:font-semibold lg:text-slate-200">
|
|
<NuxtLink v-for="item in navItems" :key="item.to" :to="item.to"
|
|
class="shrink-0 transition hover:text-yellow-200"
|
|
:class="isActive(item.to) ? 'text-yellow-200' : 'text-slate-200'">
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<form
|
|
class="ml-auto flex w-full max-w-xs items-center rounded-full border border-white/10 bg-white/8 px-4 py-2 shadow-2xl shadow-yellow-950/20 sm:max-w-sm"
|
|
@submit.prevent="submitSearch">
|
|
<AppIcon name="search" class="mr-3 size-4 shrink-0 text-yellow-200" />
|
|
<input v-model="keyword" type="search" placeholder="Tìm phim..."
|
|
class="w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400">
|
|
</form>
|
|
|
|
<div class="group/member relative hidden shrink-0 items-center gap-2.5 md:flex">
|
|
<button type="button"
|
|
class="inline-flex h-10 shrink-0 cursor-pointer items-center gap-2 rounded-full bg-[#F2F4F7] px-4 text-sm font-semibold text-[#1c1c1c] shadow-sm transition hover:bg-white hover:shadow-md"
|
|
aria-label="Tài khoản thành viên" @click="handleMemberClick">
|
|
<template v-if="user">
|
|
<img v-if="avatarUrl" :src="avatarUrl" :alt="displayName"
|
|
class="size-7 rounded-full object-cover ring-2 ring-[#FFD166]/20">
|
|
<span v-else
|
|
class="grid size-7 place-items-center rounded-full bg-[#FFD166]/20 text-xs font-bold text-[#FFD166]">
|
|
{{ displayInitial }}
|
|
</span>
|
|
<span class="max-w-24 truncate">{{ displayName }}</span>
|
|
</template>
|
|
<template v-else>
|
|
<svg class="size-5 shrink-0" fill="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
|
|
</svg>
|
|
<span>Thành viên</span>
|
|
</template>
|
|
</button>
|
|
|
|
<Transition name="member-menu">
|
|
<div v-if="user && memberMenuOpen"
|
|
class="absolute right-0 top-[calc(100%+0.5rem)] w-56 overflow-hidden rounded-2xl border border-white/8 bg-[#12121a]/95 py-2 text-sm shadow-[0_20px_50px_rgba(0,0,0,0.5)] backdrop-blur-xl">
|
|
<div class="border-b border-white/6 px-4 py-3">
|
|
<div class="flex items-center gap-2.5">
|
|
<img v-if="avatarUrl" :src="avatarUrl" :alt="displayName"
|
|
class="size-8 rounded-full object-cover ring-2 ring-[#FFD166]/20">
|
|
<div v-else class="grid size-8 shrink-0 place-items-center rounded-full bg-[#FFD166]/10">
|
|
<span class="text-xs font-bold text-[#FFD166]">{{ displayInitial }}</span>
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p class="truncate text-sm font-semibold text-white">{{ displayName }}</p>
|
|
<p class="truncate text-xs text-white/40">{{ user.email }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<NuxtLink v-for="item in memberMenuItems" :key="item.label" :to="item.to"
|
|
class="flex h-10 w-full cursor-pointer items-center gap-2.5 px-4 transition hover:bg-white/4 hover:text-white">
|
|
<AppIcon :name="item.icon as any" class="size-4 shrink-0 text-white/50" />
|
|
<span class="text-[13px] font-medium text-white/70">{{ item.label }}</span>
|
|
</NuxtLink>
|
|
<div class="my-1.5 border-t border-white/6" />
|
|
<button type="button"
|
|
class="flex h-10 w-full cursor-pointer items-center gap-2.5 px-4 text-[13px] font-medium text-red-400/70 transition hover:bg-red-400/8 hover:text-red-400"
|
|
@click="handleLogout">
|
|
<AppIcon name="log-out" class="size-4 shrink-0" />
|
|
Đăng xuất
|
|
</button>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
|
|
<button type="button"
|
|
class="grid size-10 shrink-0 cursor-pointer place-items-center rounded-lg border border-white/10 bg-white/8 text-white transition hover:bg-white/16 lg:hidden"
|
|
aria-label="Mở menu" @click="mobileMenuOpen = true">
|
|
<AppIcon name="menu" class="size-5" />
|
|
</button>
|
|
</nav>
|
|
|
|
<Teleport to="body">
|
|
<Transition name="sidebar">
|
|
<div v-if="mobileMenuOpen" class="fixed inset-0 z-60 lg:hidden">
|
|
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="closeMobileMenu" />
|
|
<div class="absolute inset-y-0 left-0 w-72 bg-slate-950 shadow-2xl">
|
|
<div class="flex items-center justify-between border-b border-white/10 px-4 py-4">
|
|
<AppLogo />
|
|
<button type="button"
|
|
class="grid size-10 cursor-pointer place-items-center rounded-lg border border-white/10 bg-white/8 text-white transition hover:bg-white/16"
|
|
aria-label="Đóng menu" @click="closeMobileMenu">
|
|
<AppIcon name="x" class="size-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="user" class="flex items-center gap-3 border-b border-white/10 px-4 py-4">
|
|
<img v-if="avatarUrl" :src="avatarUrl" :alt="displayName"
|
|
class="size-9 rounded-full object-cover ring-2 ring-[#FFD166]/20">
|
|
<span v-else
|
|
class="grid size-9 place-items-center rounded-full bg-yellow-400/10 text-sm font-black text-yellow-400">
|
|
{{ displayInitial }}
|
|
</span>
|
|
<div class="min-w-0">
|
|
<p class="truncate text-sm font-semibold text-white">{{ displayName }}</p>
|
|
<p class="truncate text-xs text-slate-400">{{ user.email }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="flex flex-col gap-1 p-4">
|
|
<NuxtLink v-for="item in navItems" :key="item.to" :to="item.to"
|
|
class="rounded-lg px-4 py-3 text-base font-semibold text-slate-200 transition hover:bg-white/8 hover:text-yellow-200"
|
|
:class="isActive(item.to) ? 'bg-white/8 text-yellow-200' : ''" @click="closeMobileMenu">
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
</nav>
|
|
<div class="border-t border-white/10 p-4">
|
|
<template v-if="user">
|
|
<NuxtLink v-for="item in memberMenuItems" :key="item.label" :to="item.to"
|
|
class="flex h-11 w-full cursor-pointer items-center gap-3 px-4 text-left text-sm font-semibold text-slate-200 transition hover:bg-white/8 hover:text-white"
|
|
@click="closeMobileMenu">
|
|
<AppIcon :name="item.icon as any" class="size-4 shrink-0" />
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
<div class="my-2 border-t border-white/10" />
|
|
<button type="button"
|
|
class="flex h-11 w-full cursor-pointer items-center gap-3 px-4 text-left text-sm font-black text-red-400 transition hover:bg-white/8 hover:text-red-300"
|
|
@click="handleLogout">
|
|
<AppIcon name="log-out" class="size-4 shrink-0" />
|
|
Đăng xuất
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<button type="button"
|
|
class="flex h-11 w-full cursor-pointer items-center justify-center rounded-lg bg-yellow-400 px-4 text-sm font-black text-slate-950 transition hover:bg-yellow-300"
|
|
@click="closeMobileMenu(); openAuthModal()">
|
|
Đăng nhập
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
|
|
<AuthModal v-model="authModalOpen" />
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sidebar-enter-active,
|
|
.sidebar-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.sidebar-enter-active>div:last-child,
|
|
.sidebar-leave-active>div:last-child {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.sidebar-enter-from,
|
|
.sidebar-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.sidebar-enter-from>div:last-child,
|
|
.sidebar-leave-to>div:last-child {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.member-menu-enter-active,
|
|
.member-menu-leave-active {
|
|
transition: opacity 0.16s ease, transform 0.16s ease;
|
|
}
|
|
|
|
.member-menu-enter-from,
|
|
.member-menu-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-0.35rem);
|
|
}
|
|
</style>
|