From b8756fc09aa5350f4ace22df105013acdfbb2ad1 Mon Sep 17 00:00:00 2001
From: AdingApkgg <AdingApkgg@outlook.com>
Date: Sat, 27 Dec 2025 00:13:16 +0800
Subject: [PATCH] Enhance App.vue and ImageViewer.vue for improved styling and
 animation handling

- Added a custom variant for dark mode in App.vue to support Tailwind v4 features.
- Simplified the onEnter function in ImageViewer.vue by removing the done parameter, allowing Vue to manage CSS animation completion automatically.
---
 src/App.vue                    | 3 +++
 src/components/ImageViewer.vue | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 08d0c7e..d01c998 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -555,6 +555,9 @@ function saveSettings(customApi: string, newCustomCSS: string) {
 <style>
 @import "tailwindcss";
 
+/* Tailwind v4: 配置 dark 变体使用 .dark 类 */
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* Ken Burns 动画效果 - 使用 CSS 动画实现更流畅的背景切换 */
 .ken-burns {
   /* 初始状态 - 稍微放大以便动画有空间 */
diff --git a/src/components/ImageViewer.vue b/src/components/ImageViewer.vue
index 160cc24..c132dfc 100644
--- a/src/components/ImageViewer.vue
+++ b/src/components/ImageViewer.vue
@@ -68,9 +68,9 @@ const imageStyle = computed(() => {
 })
 
 // 进入动画时播放音效
-function onEnter(_el: Element, done: () => void) {
+// 不声明 done 参数，让 Vue 自动等待 CSS 动画完成
+function onEnter() {
   playTransitionUp()
-  done()
 }
 
 // 监听图片切换