From f5557cbf0811ca3f9902b40e1abcd3c1142e67d2 Mon Sep 17 00:00:00 2001
From: immortal521 <immort521@gmail.com>
Date: Sat, 16 Aug 2025 01:22:56 +0800
Subject: [PATCH] feat: add transition effects for page and dropdown

- Add page transition CSS with opacity and blur effects

- Wrap dropdown in Transition component with slide effect

- Configure Nuxt pageTransition in config
---
 frontend_nuxt/app.vue                     | 11 ++++++++
 frontend_nuxt/components/DropdownMenu.vue | 32 ++++++++++++++++-------
 frontend_nuxt/nuxt.config.ts              |  1 +
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/frontend_nuxt/app.vue b/frontend_nuxt/app.vue
index 8619cb22b..e55367988 100644
--- a/frontend_nuxt/app.vue
+++ b/frontend_nuxt/app.vue
@@ -75,6 +75,17 @@ const goToNewPost = () => {
 
 <style src="~/assets/global.css"></style>
 <style>
+/* 页面过渡效果 */
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.4s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(10px);
+}
+
 .header-container {
   position: fixed;
   top: 0;
diff --git a/frontend_nuxt/components/DropdownMenu.vue b/frontend_nuxt/components/DropdownMenu.vue
index 8cbefdf39..2a1bfc0e7 100644
--- a/frontend_nuxt/components/DropdownMenu.vue
+++ b/frontend_nuxt/components/DropdownMenu.vue
@@ -3,17 +3,19 @@
     <div class="dropdown-trigger" @click="toggle">
       <slot name="trigger"></slot>
     </div>
-    <div v-if="visible" class="dropdown-menu-container">
-      <div
-        v-for="(item, idx) in items"
-        :key="idx"
-        class="dropdown-item"
-        :style="{ color: item.color || 'inherit' }"
-        @click="handle(item)"
-      >
-        {{ item.text }}
+    <Transition name="dropdown-menu">
+      <div v-if="visible" class="dropdown-menu-container">
+        <div
+          v-for="(item, idx) in items"
+          :key="idx"
+          class="dropdown-item"
+          :style="{ color: item.color || 'inherit' }"
+          @click="handle(item)"
+        >
+          {{ item.text }}
+        </div>
       </div>
-    </div>
+    </Transition>
   </div>
 </template>
 
@@ -67,6 +69,16 @@ export default {
   align-items: center;
 }
 
+.dropdown-menu-enter-active,
+.dropdown-menu-leave-active {
+  transition: all 0.4s;
+}
+.dropdown-menu-enter-from,
+.dropdown-menu-leave-to {
+  opacity: 0;
+  transform: translateY(-16px);
+}
+
 .dropdown-menu-container {
   position: absolute;
   top: 100%;
diff --git a/frontend_nuxt/nuxt.config.ts b/frontend_nuxt/nuxt.config.ts
index 66a0afb71..204f15da6 100644
--- a/frontend_nuxt/nuxt.config.ts
+++ b/frontend_nuxt/nuxt.config.ts
@@ -15,6 +15,7 @@ export default defineNuxtConfig({
   // 确保 Vditor 样式在 global.css 覆盖前加载
   css: ['vditor/dist/index.css', '~/assets/fonts.css', '~/assets/global.css'],
   app: {
+    pageTransition: { name: 'page', mode: 'out-in' },
     head: {
       script: [
         {