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

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>

src/main.js

@@ -1,63 +1,68 @@
-import { createApp } from 'vue'
-import { createRouter, createWebHashHistory } from 'vue-router'
-import { createPinia } from 'pinia'
-import App from './App.vue'
-
-// 导入页面组件
-// 便签列表页面
-import NoteListPage from './pages/NoteListPage.vue'
-// 便签编辑页面（用于新建和编辑便签）
-import NoteEditorPage from './pages/NoteEditorPage.vue'
-// 文件夹管理页面
-import FolderPage from './pages/FolderPage.vue'
-// 设置页面
-import SettingsPage from './pages/SettingsPage.vue'
-
-// 导入数据库初始化函数
-import { initDB } from './utils/indexedDBStorage'
-
-// 配置路由规则
-// 定义应用的所有路由路径和对应的组件
-const routes = [
-  // 根路径重定向到便签列表页面
-  { path: '/', redirect: '/notes' },
-  // 便签列表页面路由
-  { path: '/notes', component: NoteListPage },
-  // 编辑便签页面路由（带便签ID参数）
-  { path: '/notes/:id', component: NoteEditorPage, props: true },
-  // 新建便签页面路由
-  { path: '/editor', component: NoteEditorPage },
-  // 编辑便签页面路由（带便签ID参数）
-  { path: '/editor/:id', component: NoteEditorPage, props: true },
-  // 文件夹管理页面路由
-  { path: '/folders', component: FolderPage },
-  // 设置页面路由
-  { path: '/settings', component: SettingsPage }
-]
-
-// 创建路由实例
-// 使用Hash模式以支持静态文件部署
-const router = createRouter({
-  history: createWebHashHistory(),
-  routes
-})
-
-// 创建并挂载Vue应用实例
-// 配置Pinia状态管理和Vue Router路由
-const app = createApp(App)
-
-// 初始化数据库
-initDB().then(() => {
-  console.log('数据库初始化成功')
-}).catch(error => {
-  console.error('数据库初始化失败:', error)
-  // 即使数据库初始化失败，也继续启动应用
-  // 这样可以确保应用在没有IndexedDB支持的环境中仍然可以运行
-})
-
-// 使用Pinia进行状态管理
-app.use(createPinia())
-// 使用Vue Router进行路由管理
-app.use(router)
-// 挂载应用到DOM元素
-app.mount('#app')
+import { createApp } from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { createPinia } from 'pinia'
+import { motionPlugin } from '@oku-ui/motion'
+import App from './App.vue'
+
+// 导入页面组件
+// 便签列表页面
+import NoteListPage from './pages/NoteListPage.vue'
+// 便签编辑页面（用于新建和编辑便签）
+import NoteEditorPage from './pages/NoteEditorPage.vue'
+// 文件夹管理页面
+import FolderPage from './pages/FolderPage.vue'
+// 设置页面
+import SettingsPage from './pages/SettingsPage.vue'
+
+// 导入数据库初始化函数
+import { initDB } from './utils/indexedDBStorage'
+
+// 配置路由规则
+// 定义应用的所有路由路径和对应的组件
+const routes = [
+  // 根路径重定向到便签列表页面
+  { path: '/', redirect: '/notes' },
+  // 便签列表页面路由
+  { path: '/notes', component: NoteListPage },
+  // 编辑便签页面路由（带便签ID参数）
+  { path: '/notes/:id', component: NoteEditorPage, props: true },
+  // 新建便签页面路由
+  { path: '/editor', component: NoteEditorPage },
+  // 编辑便签页面路由（带便签ID参数）
+  { path: '/editor/:id', component: NoteEditorPage, props: true },
+  // 文件夹管理页面路由
+  { path: '/folders', component: FolderPage },
+  // 设置页面路由
+  { path: '/settings', component: SettingsPage },
+]
+
+// 创建路由实例
+// 使用Hash模式以支持静态文件部署
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+})
+
+// 创建并挂载Vue应用实例
+// 配置Pinia状态管理和Vue Router路由
+const app = createApp(App)
+
+// 初始化数据库
+initDB()
+  .then(() => {
+    console.log('数据库初始化成功')
+  })
+  .catch(error => {
+    console.error('数据库初始化失败:', error)
+    // 即使数据库初始化失败，也继续启动应用
+    // 这样可以确保应用在没有IndexedDB支持的环境中仍然可以运行
+  })
+
+// 使用Pinia进行状态管理
+app.use(createPinia())
+// 使用Vue Router进行路由管理
+app.use(router)
+// 使用Oku Motion插件
+app.use(motionPlugin)
+// 挂载应用到DOM元素
+app.mount('#app')