"优化页面切换动画效果"

src/App.vue

@@ -1,21 +1,49 @@
 <template>
   <div class="app-container">
-    <router-view v-slot="{ Component, route }">
-      <transition :name="transitionName">
-        <component :is="Component" :key="route.path" />
-      </transition>
-    </router-view>
+    <!-- 设置页面背景（列表页） -->
+    <NoteListPage v-show="showBackgroundPage" class="background-page" />
+
+    <!-- 普通页面过渡效果（不包括设置页面） -->
+    <template v-if="!isSettingsRoute">
+      <router-view v-slot="{ Component, route }">
+        <transition :name="transitionName">
+          <component :is="Component" :key="route.path" />
+        </transition>
+      </router-view>
+    </template>
+
+    <!-- 设置页面 -->
+    <transition 
+      name="settings-slide"
+      v-show="isSettingsRoute" 
+      appear>
+      <SettingsPage class="setting-page" />
+    </transition>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import '@/common/base.css'
 
+// 导入页面组件
+import NoteListPage from './pages/NoteListPage.vue'
+import SettingsPage from './pages/SettingsPage.vue'
+
 const route = useRoute()
 const transitionName = ref('slide-left')
 
+// 计算是否为设置页面路由
+const isSettingsRoute = computed(() => {
+  return route.path === '/settings'
+})
+
+// 计算是否需要显示背景页面（仅在设置页面时显示）
+const showBackgroundPage = computed(() => {
+  return route.path === '/settings'
+})
+
 // 监听路由变化，动态设置过渡动画方向
 watch(
   () => route.path,
@@ -44,6 +72,8 @@ watch(
     }
   }
 )
+
+// 无额外处理函数
 </script>
 
 <style lang="less" scoped>
@@ -55,11 +85,28 @@ watch(
   background-color: #f5f5f5; // 设置默认背景色，防止闪烁
 }
 
+// 背景页面样式
+.background-page {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.setting-page {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
 // 左滑进入（从右到左）
 .slide-left-enter-active,
-.slide-left-leave-active,
-.slide-right-enter-active,
-.slide-right-leave-active {
+.slide-left-leave-active {
   transition: all 0.3s ease;
   position: absolute;
   width: 100%;
@@ -82,6 +129,16 @@ watch(
 }
 
 // 右滑进入（从左到右）
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.3s ease;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
 .slide-right-enter-from {
   transform: translateX(-100%);
 }
@@ -94,4 +151,29 @@ watch(
 .slide-right-leave-from {
   transform: translateX(0);
 }
+
+// 设置页面滑入滑出效果
+.settings-slide-enter-active,
+.settings-slide-leave-active {
+  transition: transform 0.3s ease;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+
+.settings-slide-enter-from {
+  transform: translateY(100%);
+}
+
+.settings-slide-leave-to {
+  transform: translateY(100%);
+}
+
+.settings-slide-enter-to,
+.settings-slide-leave-from {
+  transform: translateY(0);
+}
 </style>