Refactor components for improved type safety and code consistency

- 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.
This commit is contained in:
ngthanhvu
2026-07-31 04:01:24 -04:00
parent 91574aa72c
commit 59333d51e9
8 changed files with 158 additions and 76 deletions
+6 -4
View File
@@ -36,11 +36,13 @@ const movieLink = computed(() => ({
path: `/phim/${props.movie.slug}`,
}));
function showPreview(event: MouseEvent) {
function showPreview(event: MouseEvent | FocusEvent) {
if (window.matchMedia("(max-width: 639px)").matches) return;
if (hideTimer) clearTimeout(hideTimer);
const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
const rect = ((event as any)?.currentTarget || (event as any)?.target)?.getBoundingClientRect();
if (!rect) return;
const width = 408;
const height = 344;
const gap = 14;
@@ -81,8 +83,8 @@ onBeforeUnmount(() => {
<template>
<div class="w-44 shrink-0 snap-start sm:w-52 xl:w-56">
<!-- Movie Card -->
<NuxtLink :to="movieLink" class="group block" @mouseenter="showPreview" @mouseleave="scheduleHide"
@focus="showPreview" @blur="scheduleHide">
<NuxtLink :to="movieLink" class="group block" @mouseenter="showPreview" @mouseleave="scheduleHide"
@focus.passive="showPreview" @blur="scheduleHide">
<!-- Poster wrapper -->
<div class="relative aspect-2/3">
<div class="h-full w-full overflow-hidden rounded-t-[7px] bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10">