feat: implement cache busting mechanism and UI improvements

- Added `useCacheBust` composable to manage cache invalidation after movie edits in the admin panel.
- Integrated cache busting in movie sync and delete actions to ensure data consistency across pages.
- Enhanced UI components in the admin movie management and member management pages for better readability and usability.
- Introduced a suggestions tab in the movie detail page to recommend similar movies based on categories.
- Updated styles for various elements to improve the overall aesthetic and user experience.
This commit is contained in:
ngthanhvu
2026-08-05 05:19:34 -04:00
parent 6619cae6cc
commit a36e6c77f8
13 changed files with 1117 additions and 873 deletions
+98
View File
@@ -76,3 +76,101 @@ select:disabled {
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Admin design system — Modern Minimal Enterprise */
@layer utilities {
.admin-page {
@apply min-h-screen bg-[#0A0B0E] text-zinc-100 antialiased;
}
/* Flat, neutral enterprise card */
.admin-card {
@apply rounded-2xl border border-white/[0.07] bg-[#131418] transition-colors duration-200 hover:border-white/[0.14];
}
/* Card with subtle top highlight for hierarchy */
.admin-card-gradient {
@apply rounded-2xl border border-white/[0.07] bg-[#131418] transition-colors duration-200 hover:border-white/[0.14];
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%);
}
.admin-input {
@apply h-11 w-full rounded-xl border border-white/[0.08] bg-white/[0.03] px-4 text-sm text-white placeholder:text-zinc-500 outline-none transition focus:border-yellow-400/40 focus:bg-white/[0.05] focus:ring-2 focus:ring-yellow-400/15;
}
.admin-btn {
@apply inline-flex h-10 items-center justify-center gap-2 rounded-xl px-5 text-sm font-semibold transition-all duration-150 active:scale-[0.98];
}
.admin-btn-primary {
@apply inline-flex h-10 items-center justify-center gap-2 rounded-xl px-5 text-sm font-semibold transition-all duration-150 active:scale-[0.98] bg-yellow-400 text-zinc-950 hover:bg-yellow-300 hover:shadow-lg hover:shadow-yellow-400/20;
}
.admin-btn-secondary {
@apply inline-flex h-10 items-center justify-center gap-2 rounded-xl px-5 text-sm font-semibold transition-all duration-150 active:scale-[0.98] border border-white/[0.08] bg-white/[0.04] text-zinc-100 hover:bg-white/[0.08];
}
.admin-btn-danger {
@apply inline-flex h-10 items-center justify-center gap-2 rounded-xl px-5 text-sm font-semibold transition-all duration-150 active:scale-[0.98] bg-red-500/10 text-red-400 hover:bg-red-500/20;
}
.admin-badge {
@apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold;
}
.admin-label {
@apply text-[11px] font-semibold uppercase tracking-[0.14em] text-zinc-500;
}
.admin-section-title {
@apply text-[1.6rem] font-bold tracking-tight text-white;
}
.admin-section-subtitle {
@apply text-sm text-zinc-500;
}
.admin-num {
@apply font-bold tracking-tight text-white tabular-nums;
}
/* Compact controls for dense edit rows */
.admin-input-sm {
@apply h-8 rounded-lg border border-white/[0.08] bg-white/[0.03] px-2.5 text-xs text-white placeholder:text-zinc-500 outline-none transition focus:border-yellow-400/40 focus:bg-white/[0.05];
}
.admin-btn-sm {
@apply inline-flex h-7 items-center justify-center gap-1 rounded-lg px-2.5 text-xs font-semibold transition active:scale-[0.97];
}
.admin-icon-square {
@apply grid size-9 place-items-center rounded-xl border border-white/[0.08] bg-white/[0.03] text-zinc-300;
}
}
/* Custom scrollbar for admin tables */
.admin-scrollbar::-webkit-scrollbar {
height: 6px;
width: 6px;
}
.admin-scrollbar::-webkit-scrollbar-thumb {
background: rgba(250, 204, 21, 0.5);
border-radius: 999px;
}
.admin-scrollbar::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.03);
}
/* Smooth modal fade */
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: opacity 0.2s ease, transform 0.2s ease;
}
.modal-fade-enter-from,
.modal-fade-leave-to {
opacity: 0;
transform: scale(0.98);
}