diff --git a/IFLOW.md b/IFLOW.md
index 7a602e5..41c2a68 100644
--- a/IFLOW.md
+++ b/IFLOW.md
@@ -14,6 +14,8 @@
 * **PWA 支持**: vite-plugin-pwa
 * **本地存储**: IndexedDB (通过 `src/utils/indexedDBStorage.js` 封装)
 * **CSS 预处理器**: Less
+* **动画库**: @oku-ui/motion
+* **拖拽库**: vue-draggable-plus
 
 ## 项目结构
 
@@ -21,17 +23,41 @@
 .
 ├── android/         # Capacitor Android 项目文件
 ├── public/          # 静态资源目录 (图标等)
+│   ├── assets/      # 应用资源文件
+│   │   └── icons/   # 图标文件
+│   │       ├── drawable-xxhdpi/  # Android 图标资源
+│   │       └── drawable-xxxhdpi/ # Android 图标资源
+│   └── icons/       # PWA 图标
+│       ├── icon-192.png
+│       └── icon-512.png
 ├── src/             # 源代码目录
 │   ├── App.vue      # 根组件
 │   ├── main.js      # 应用入口文件
 │   ├── common/      # 通用样式
+│   │   └── base.css # 基础样式文件
 │   ├── components/  # 可复用的 UI 组件
+│   │   ├── FolderItem.vue      # 文件夹项组件
+│   │   ├── FolderManage.vue    # 文件夹管理组件
+│   │   ├── Header.vue          # 头部组件
+│   │   ├── Modal.vue           # 模态框组件
+│   │   ├── NoteItem.vue        # 便签项组件
+│   │   ├── RichTextEditor.vue  # 富文本编辑器组件
+│   │   ├── Search.vue          # 搜索组件
+│   │   ├── SettingGroup.vue    # 设置组组件
+│   │   └── SwitchButton.vue    # 开关按钮组件
 │   ├── pages/       # 页面组件
+│   │   ├── FolderPage.vue      # 文件夹页面
+│   │   ├── NoteEditorPage.vue  # 便签编辑页面
+│   │   ├── NoteListPage.vue    # 便签列表页面
+│   │   └── SettingsPage.vue    # 设置页面
 │   ├── stores/      # Pinia 状态管理
+│   │   ├── useAppStore.js      # 应用状态管理
+│   │   └── useAppStore.test.js # 应用状态管理测试
 │   └── utils/       # 工具函数
+│       ├── dateUtils.js        # 日期工具函数
+│       └── indexedDBStorage.js # IndexedDB 存储封装
 ├── index.html       # 应用入口 HTML 文件
 ├── .nvmdrc          # node.js 版本
-├── update.txt       # 更新日志
 ├── package.json     # 项目依赖和脚本
 ├── vite.config.js   # Vite 配置文件
 └── capacitor.config.json # Capacitor 配置文件
@@ -46,6 +72,9 @@
 * **多种排序方式**: 按更新时间、标题、星标状态排序。
 * **PWA 支持**: 可安装为独立应用，支持离线使用。
 * **本地存储**: 所有数据存储在浏览器的 `IndexedDB` 中。
+* **富文本编辑**: 支持标题、待办事项、列表、加粗、引用、图片等多种格式。
+* **动画效果**: 使用 Oku Motion 实现流畅的动画效果。
+* **拖拽排序**: 支持图片拖拽排序。
 * **深色模式**: (计划中) 支持切换深色/浅色主题。
 * **云同步**: (计划中) 支持多设备间数据同步。
 
@@ -123,6 +152,8 @@ npm run android
 * **CSS 命名**: 使用 BEM 命名规范，部分使用原子化 CSS 类名（以 `code-fun-` 开头）
 * **响应式设计**: 使用 viewport 单位 (vw/vh) 和 CSS 变量实现响应式布局
 * **图标**: 使用 PNG 图片作为图标，存储在 `public/assets/icons/` 目录下
+* **动画**: 使用 Oku Motion 实现动画效果
+* **拖拽**: 使用 vue-draggable-plus 实现拖拽功能
 
 ### 命名规范
 
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..b98f0c4
--- /dev/null
+++ b/README.md
@@ -0,0 +1,109 @@
+# 锤子便签(重制版)
+
+这是一个基于 Vue 3、Vite 和 Pinia 的移动端现代化 Web 应用，旨在重现并改进经典的锤子便签应用体验。该项目采用 PWA（渐进式 Web 应用）技术，支持离线使用和安装到主屏幕。
+
+## 主要特性
+
+- **便签管理**: 创建、编辑、删除、置顶、加星便签
+- **文件夹管理**: 将便签分类到不同的文件夹中
+- **搜索功能**: 按标题或内容搜索便签
+- **回收站**: 临时存储已删除的便签，支持彻底删除
+- **多种排序方式**: 按更新时间、标题、星标状态排序
+- **PWA 支持**: 可安装为独立应用，支持离线使用
+- **本地存储**: 所有数据存储在浏览器的 IndexedDB 中
+- **富文本编辑**: 支持标题、待办事项、列表、加粗、引用、图片等多种格式
+- **动画效果**: 使用 Oku Motion 实现流畅的动画效果
+- **拖拽排序**: 支持图片拖拽排序
+
+## 技术栈
+
+- **框架**: Vue 3 (Composition API)
+- **构建工具**: Vite
+- **状态管理**: Pinia
+- **路由**: Vue Router
+- **UI 组件库**: Ionic Vue (部分使用)
+- **PWA 支持**: vite-plugin-pwa
+- **本地存储**: IndexedDB (通过 `src/utils/indexedDBStorage.js` 封装)
+- **CSS 预处理器**: Less
+- **动画库**: @oku-ui/motion
+- **拖拽库**: vue-draggable-plus
+
+## 项目结构
+
+```
+.
+├── android/         # Capacitor Android 项目文件
+├── public/          # 静态资源目录 (图标等)
+├── src/             # 源代码目录
+│   ├── App.vue      # 根组件
+│   ├── main.js      # 应用入口文件
+│   ├── common/      # 通用样式
+│   ├── components/  # 可复用的 UI 组件
+│   ├── pages/       # 页面组件
+│   ├── stores/      # Pinia 状态管理
+│   └── utils/       # 工具函数
+├── index.html       # 应用入口 HTML 文件
+├── package.json     # 项目依赖和脚本
+├── vite.config.js   # Vite 配置文件
+└── capacitor.config.json # Capacitor 配置文件
+```
+
+## 开发与构建
+
+### 前置条件
+
+确保已安装 Node.js (>=14) 和 npm。
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 开发
+
+启动开发服务器:
+
+```bash
+npm run dev
+```
+
+这将在 `http://localhost:3000` 启动应用。
+
+### 构建
+
+构建标准 Web 应用:
+
+```bash
+npm run build
+```
+
+构建 PWA 应用:
+
+```bash
+npm run build:pwa
+```
+
+构建所有版本 (标准 + PWA):
+
+```bash
+npm run build:all
+```
+
+### 部署 PWA
+
+构建 PWA 并上传到服务器:
+
+```bash
+npm run deploy:pwa
+```
+
+这将执行 `vite build --mode pwa` 并运行 `upload-pwa.js` 脚本。
+
+### Android 应用
+
+运行 Android 应用:
+
+```bash
+npm run android
+```
\ No newline at end of file
diff --git a/package.json b/package.json
index 6d11c28..fbca4af 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@capacitor/core": "^5.7.2",
     "@capacitor/ios": "^5.7.2",
     "@ionic/vue": "^8.7.6",
+    "@oku-ui/motion": "^0.4.3",
     "@vue/cli-service": "^5.0.9",
     "@vue/compiler-sfc": "^3.5.22",
     "basic-ftp": "^5.0.5",
diff --git a/src/App.vue b/src/App.vue
index b15239b..0ddba3f 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/main.js b/src/main.js
index 0437208..d716eb4 100644
--- a/src/main.js
+++ b/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')
\ No newline at end of file
+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')