"优化页面切换动画效果，实现无缝滑动过渡"

src/App.vue

@@ -1,7 +1,97 @@
-<template>
-  <router-view />
-</template>
-
-<script setup>
-import '@/common/base.css'
-</script>
+<template>
+  <div class="app-container">
+    <router-view v-slot="{ Component, route }">
+      <transition :name="transitionName">
+        <component :is="Component" :key="route.path" />
+      </transition>
+    </router-view>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import '@/common/base.css'
+
+const route = useRoute()
+const transitionName = ref('slide-left')
+
+// 监听路由变化，动态设置过渡动画方向
+watch(
+  () => route.path,
+  (toPath, fromPath) => {
+    // 特殊处理：从编辑页返回列表页的情况
+    if ((fromPath.startsWith('/editor') || fromPath.startsWith('/notes/')) && toPath === '/notes') {
+      transitionName.value = 'slide-right'
+      return
+    }
+    
+    // 判断导航方向
+    const toDepth = toPath.split('/').length
+    const fromDepth = fromPath.split('/').length
+    
+    // 如果是进入更深的页面（如从列表页进入编辑页），使用左滑动画
+    if (toDepth > fromDepth) {
+      transitionName.value = 'slide-left'
+    } 
+    // 如果是返回上层页面（如从编辑页返回列表页），使用右滑动画
+    else if (toDepth < fromDepth) {
+      transitionName.value = 'slide-right'
+    }
+    // 同级页面切换使用默认的左滑动画
+    else {
+      transitionName.value = 'slide-left'
+    }
+  }
+)
+</script>
+
+<style lang="less" scoped>
+.app-container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  background-color: #f5f5f5; // 设置默认背景色，防止闪烁
+}
+
+// 左滑进入（从右到左）
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.3s ease;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.slide-left-enter-from {
+  transform: translateX(100%);
+}
+
+.slide-left-leave-to {
+  transform: translateX(-100%);
+}
+
+.slide-left-enter-to,
+.slide-left-leave-from {
+  transform: translateX(0);
+}
+
+// 右滑进入（从左到右）
+.slide-right-enter-from {
+  transform: translateX(-100%);
+}
+
+.slide-right-leave-to {
+  transform: translateX(100%);
+}
+
+.slide-right-enter-to,
+.slide-right-leave-from {
+  transform: translateX(0);
+}
+</style>