From ff4adcd9492303902004cd65a9b351adcc8be445 Mon Sep 17 00:00:00 2001
From: yuantao <user@example.com>
Date: Thu, 23 Oct 2025 17:48:46 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=A4=B9=E5=88=97=E8=A1=A8=E5=B1=95=E5=BC=80=E6=94=B6=E8=B5=B7?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/NoteListPage.vue | 888 +++++++++++++++++++------------------
 1 file changed, 458 insertions(+), 430 deletions(-)

diff --git a/src/pages/NoteListPage.vue b/src/pages/NoteListPage.vue
index 58d75a6..fd1141c 100644
--- a/src/pages/NoteListPage.vue
+++ b/src/pages/NoteListPage.vue
@@ -1,430 +1,458 @@
-<template>
-  <ion-page>
-    <div class="container">
-      <ion-content class="content">
-        <Header
-          :title="headerTitle"
-          :onAction="handleHeaderAction"
-          actionIcon="create"
-          leftType="settings"
-          :onLeftAction="handleSettingsPress"
-          :onFolderToggle="handleFolderToggle"
-          :isFolderExpanded="isFolderExpanded"
-          :onTitlePress="handleFolderToggle"
-          slot="fixed" />
-
-        <!-- 悬浮文件夹列表 - 使用绝对定位实现 -->
-        <div v-if="isFolderExpanded" class="folder-list" slot="fixed">
-          <FolderManage
-            :allCount="allNotesCount"
-            :starredCount="starredNotesCount"
-            :trashCount="trashNotesCount"
-            :archiveCount="0"
-            :selectedFolder="currentFolder"
-            :onAllClick="handleAllNotesClick"
-            :onStarredClick="handleStarredNotesClick"
-            :onTrashClick="handleTrashNotesClick" />
-        </div>
-        <!-- 点击外部区域收起文件夹列表的覆盖层 -->
-        <div v-if="isFolderExpanded" @click="() => setIsFolderExpanded(false)" class="folder-overlay" slot="fixed"></div>
-        <div class="search-container">
-          <SearchBar v-model="searchQuery" @search="handleSearch" @clear="handleClearSearch" @focus="handleSearchFocus" @blur="handleSearchBlur" />
-        </div>
-
-        <div class="notes-container">
-          <transition-group name="note-list" tag="div" class="notes-list">
-            <div v-for="note in filteredAndSortedNotes" :key="note.id" class="note-item">
-              <NoteItem
-                :ref="
-                  el => {
-                    if (el) noteItemRefs[note.id] = el
-                  }
-                "
-                :content="note.content"
-                :date="formatDate(note.updatedAt)"
-                :isStarred="note.isStarred"
-                :isTop="note.isTop || false"
-                :hasImage="note.hasImage || false"
-                :onPress="() => handleNotePress(note.id)"
-                :onStarToggle="() => handleStarToggle(note.id)"
-                :onTopToggle="() => handleTopToggle(note.id)"
-                :onDelete="() => confirmDeleteNote(note.id)" />
-            </div>
-          </transition-group>
-        </div>
-      </ion-content>
-    </div>
-  </ion-page>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useAppStore } from '../stores/useAppStore'
-import NoteItem from '../components/NoteItem.vue'
-import Header from '../components/Header.vue'
-import FolderManage from '../components/FolderManage.vue'
-import SearchBar from '../components/Search.vue'
-import { formatNoteListDate } from '../utils/dateUtils'
-import { IonContent, IonPage } from '@ionic/vue'
-
-const store = useAppStore()
-const router = useRouter()
-const noteItemRefs = ref({})
-
-// 页面挂载时加载初始数据
-onMounted(() => {
-  // 检查URL参数是否包含mock数据加载指令，用于开发和演示
-  const urlParams = new URLSearchParams(window.location.search)
-  if (urlParams.get('mock') === 'true') {
-    // 加载预设的模拟数据
-    store.loadMockData()
-  } else {
-    // 从Storage加载用户数据
-    store.loadData()
-  }
-})
-
-const searchQuery = ref('')
-const sortBy = ref('date') // 排序方式：'date'(按日期)、'title'(按标题)、'starred'(按星标)
-const isFolderExpanded = ref(false) // 文件夹列表是否展开
-const currentFolder = ref('all') // 当前选中的文件夹，默认是"全部便签"
-const noteToDelete = ref(null)
-
-// 计算加星便签数量（未删除的）
-const starredNotesCount = computed(() => {
-  return store.notes.filter(note => note.isStarred && !note.isDeleted).length
-})
-
-// 计算回收站便签数量
-const trashNotesCount = computed(() => {
-  return store.notes.filter(note => note.isDeleted).length
-})
-
-// 根据当前文件夹过滤便签
-const filteredNotes = computed(() => {
-  // 预处理搜索查询，提高性能
-  const lowerCaseQuery = searchQuery.value?.toLowerCase().trim() || ''
-
-  return store.notes.filter(note => {
-    // 先检查搜索条件
-    const matchesSearch =
-      !lowerCaseQuery || (note.title && typeof note.title === 'string' && note.title.toLowerCase().includes(lowerCaseQuery)) || (note.content && typeof note.content === 'string' && note.content.toLowerCase().includes(lowerCaseQuery))
-
-    if (!matchesSearch) return false
-
-    // 再检查文件夹条件
-    switch (currentFolder.value) {
-      case 'all':
-        // 全部便签中不显示已删除的便签
-        return !note.isDeleted
-      case 'starred':
-        // 加星便签中只显示未删除的加星便签
-        return note.isStarred && !note.isDeleted
-      case 'trash':
-        // 回收站中只显示已删除的便签
-        return note.isDeleted
-      default:
-        // 自定义文件夹中不显示已删除的便签
-        return note.folderId === currentFolder.value && !note.isDeleted
-    }
-  })
-})
-
-// 过滤并排序便签列表
-// 首先按置顶状态排序，置顶的便签排在前面
-// 然后根据sortBy的值进行二次排序
-const filteredAndSortedNotes = computed(() => {
-  return [...filteredNotes.value].sort((a, b) => {
-    // 置顶的便签排在前面
-    if (a.isTop && !b.isTop) return -1
-    if (!a.isTop && b.isTop) return 1
-
-    // 根据排序方式排序
-    switch (sortBy.value) {
-      case 'title':
-        // 按标题字母顺序排序
-        return a.title.localeCompare(b.title)
-      case 'starred':
-        // 按星标状态排序，加星的便签排在前面
-        return (b.isStarred ? 1 : 0) - (a.isStarred ? 1 : 0)
-      case 'date':
-      default:
-        // 按更新时间倒序排列（最新的在前）
-        return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
-    }
-  })
-})
-
-// 计算头部标题
-const headerTitle = computed(() => {
-  switch (currentFolder.value) {
-    case 'all':
-      return '全部便签'
-    case 'starred':
-      return '加星便签'
-    case 'trash':
-      return '回收站'
-    default:
-      return '全部便签'
-  }
-})
-
-// 计算全部便签数量（未删除的）
-const allNotesCount = computed(() => {
-  return store.notes.filter(note => !note.isDeleted).length
-})
-
-const handleNotePress = noteId => {
-  // 检查是否有便签条处于展开状态
-  let hasSlidedNote = false
-  Object.values(noteItemRefs.value).forEach(noteItem => {
-    // 注意：isSlided是ref值，需要通过.value访问
-    if (noteItem && noteItem.getSlideState()) {
-      hasSlidedNote = true
-      noteItem.resetSlideState()
-    }
-  })
-
-  // 如果有便签条处于展开状态，不跳转到编辑页面
-  if (hasSlidedNote) {
-    return
-  }
-
-  // 使用vue-router导航到编辑页面
-  router.push(`/editor/${noteId}`)
-}
-
-const handleAddNote = () => {
-  // 使用vue-router导航到新建便签页面
-  router.push('/editor')
-}
-
-// 处理Header组件的操作按钮点击事件
-const handleHeaderAction = actionType => {
-  if (actionType === 'create') {
-    handleAddNote()
-  }
-}
-
-const handleStarToggle = async noteId => {
-  const note = store.notes.find(n => n.id === noteId)
-  if (note) {
-    try {
-      await store.updateNote(noteId, { isStarred: !note.isStarred })
-      console.log(`便签 ${noteId} 星标状态已更新`)
-    } catch (error) {
-      console.error('更新便签星标状态失败:', error)
-    }
-  }
-}
-
-const handleTopToggle = async noteId => {
-  const note = store.notes.find(n => n.id === noteId)
-  if (note) {
-    try {
-      await store.updateNote(noteId, { isTop: !note.isTop })
-      console.log(`便签 ${noteId} 置顶状态已更新`)
-    } catch (error) {
-      console.error('更新便签置顶状态失败:', error)
-    }
-  }
-}
-
-const confirmDeleteNote = async noteId => {
-  noteToDelete.value = noteId
-  if (noteToDelete.value) {
-    try {
-      // 检查当前是否在回收站中
-      if (currentFolder.value === 'trash') {
-        // 在回收站中删除便签，彻底删除
-        await store.permanentlyDeleteNote(noteToDelete.value)
-        console.log(`便签 ${noteToDelete.value} 已彻底删除`)
-      } else {
-        // 不在回收站中，将便签移至回收站
-        await store.moveToTrash(noteToDelete.value)
-        console.log(`便签 ${noteToDelete.value} 已移至回收站`)
-      }
-      noteToDelete.value = null
-    } catch (error) {
-      console.error('删除便签失败:', error)
-    }
-  }
-}
-
-// 处理排序方式切换
-// 循环切换排序选项：按日期 -> 按标题 -> 按星标 -> 按日期...
-const handleSort = () => {
-  const sortOptions = ['date', 'title', 'starred']
-  const currentIndex = sortOptions.indexOf(sortBy.value)
-  const nextIndex = (currentIndex + 1) % sortOptions.length
-  sortBy.value = sortOptions[nextIndex]
-  console.log('当前排序方式:', sortOptions[nextIndex])
-}
-
-const handleAllNotesClick = () => {
-  setCurrentFolder('all')
-  setIsFolderExpanded(false)
-}
-
-const handleStarredNotesClick = () => {
-  setCurrentFolder('starred')
-  setIsFolderExpanded(false)
-}
-
-const handleTrashNotesClick = () => {
-  setCurrentFolder('trash')
-  setIsFolderExpanded(false)
-}
-
-const handleFolderPress = () => {
-  // 使用vue-router导航到文件夹页面
-  router.push('/folders')
-}
-
-const handleSettingsPress = () => {
-  // 使用vue-router导航到设置页面
-  router.push('/settings')
-}
-
-const handleFolderToggle = () => {
-  // 在实际应用中，这里会触发文件夹列表的展开/收起
-  isFolderExpanded.value = !isFolderExpanded.value
-}
-
-const handleSearch = query => {
-  // 搜索功能已在computed属性filteredAndSortedNotes中实现
-  console.log('搜索:', query)
-
-  // 可以在这里添加搜索统计或其它功能
-  if (query && query.length > 0) {
-    console.log(`找到 ${filteredAndSortedNotes.value.length} 个匹配的便签`)
-  }
-}
-
-const handleClearSearch = () => {
-  // 清除搜索已在v-model中处理
-  console.log('搜索已清除')
-
-  // 清除搜索后可以重置一些状态
-  setSearchQuery('')
-}
-
-const handleSearchFocus = () => {
-  console.log('搜索栏获得焦点')
-  // 可以在这里添加获得焦点时的特殊处理
-}
-
-const handleSearchBlur = () => {
-  console.log('搜索栏失去焦点')
-  // 可以在这里添加失去焦点时的特殊处理
-}
-
-// 防抖函数，用于避免频繁触发搜索
-// 通过延迟执行函数，只在最后一次调用后执行
-const debounceSearch = (func, delay) => {
-  let timeoutId
-  return function (...args) {
-    clearTimeout(timeoutId)
-    timeoutId = setTimeout(() => func.apply(this, args), delay)
-  }
-}
-
-// 防抖搜索处理函数，延迟300ms执行搜索
-const debouncedHandleSearch = debounceSearch(query => {
-  handleSearch(query)
-}, 300)
-
-// 改进的日期格式化函数
-const formatDate = dateString => {
-  return formatNoteListDate(dateString)
-}
-
-const setCurrentFolder = folder => {
-  currentFolder.value = folder
-}
-
-const setIsFolderExpanded = expanded => {
-  isFolderExpanded.value = expanded
-}
-
-const setSearchQuery = query => {
-  searchQuery.value = query
-}
-
-const notes = computed(() => store.notes)
-</script>
-<style lang="less" scoped>
-.container {
-  width: 100vw;
-  height: 100vh;
-  background: url(/assets/icons/drawable-xxhdpi/note_background.png);
-  background-size: cover;
-}
-
-.folder-list {
-  position: absolute;
-  top: 3.125rem;
-  left: 10%;
-  right: 10%;
-  z-index: 1000;
-  background-color: var(--background-card);
-  border-radius: 0.5rem;
-  box-shadow: 0 0.125rem 0.25rem var(--shadow);
-  border: 1px solid #f0ece7;
-  overflow: hidden;
-}
-
-.folder-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: transparent;
-  z-index: 99;
-}
-.content {
-  --background: transparent;
-  --padding-top: 4.5rem;
-  --padding-bottom: 2rem;
-}
-
-.search-container {
-  padding: 0.8rem 0.5rem;
-}
-
-.notes-container {
-  flex: 1;
-  position: relative;
-}
-
-.notes-list {
-  position: relative;
-}
-
-.note-item {
-  margin: 0.6rem 0;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-/* 便签列表动画 */
-.note-list-enter-active,
-.note-list-leave-active {
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-.note-list-leave-to {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.note-list-move {
-  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-.note-list-leave-active {
-  position: absolute;
-  width: calc(100% - 1rem);
-}
-</style>
+<template>
+  <ion-page>
+    <div class="container">
+      <ion-content class="content">
+        <Header
+          :title="headerTitle"
+          :onAction="handleHeaderAction"
+          actionIcon="create"
+          leftType="settings"
+          :onLeftAction="handleSettingsPress"
+          :onFolderToggle="handleFolderToggle"
+          :isFolderExpanded="isFolderExpanded"
+          :onTitlePress="handleFolderToggle"
+          slot="fixed" />
+
+        <!-- 悬浮文件夹列表 - 使用绝对定位实现 -->
+        <transition name="folder-slide">
+          <div v-if="isFolderExpanded" class="folder-list" slot="fixed">
+            <FolderManage
+              :allCount="allNotesCount"
+              :starredCount="starredNotesCount"
+              :trashCount="trashNotesCount"
+              :archiveCount="0"
+              :selectedFolder="currentFolder"
+              :onAllClick="handleAllNotesClick"
+              :onStarredClick="handleStarredNotesClick"
+              :onTrashClick="handleTrashNotesClick" />
+          </div>
+        </transition>
+        <!-- 点击外部区域收起文件夹列表的覆盖层 -->
+        <div v-if="isFolderExpanded" @click="() => setIsFolderExpanded(false)" class="folder-overlay" slot="fixed"></div>
+        <div class="search-container">
+          <SearchBar v-model="searchQuery" @search="handleSearch" @clear="handleClearSearch" @focus="handleSearchFocus" @blur="handleSearchBlur" />
+        </div>
+
+        <div class="notes-container">
+          <transition-group name="note-list" tag="div" class="notes-list">
+            <div v-for="note in filteredAndSortedNotes" :key="note.id" class="note-item">
+              <NoteItem
+                :ref="
+                  el => {
+                    if (el) noteItemRefs[note.id] = el
+                  }
+                "
+                :content="note.content"
+                :date="formatDate(note.updatedAt)"
+                :isStarred="note.isStarred"
+                :isTop="note.isTop || false"
+                :hasImage="note.hasImage || false"
+                :onPress="() => handleNotePress(note.id)"
+                :onStarToggle="() => handleStarToggle(note.id)"
+                :onTopToggle="() => handleTopToggle(note.id)"
+                :onDelete="() => confirmDeleteNote(note.id)" />
+            </div>
+          </transition-group>
+        </div>
+      </ion-content>
+    </div>
+  </ion-page>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAppStore } from '../stores/useAppStore'
+import NoteItem from '../components/NoteItem.vue'
+import Header from '../components/Header.vue'
+import FolderManage from '../components/FolderManage.vue'
+import SearchBar from '../components/Search.vue'
+import { formatNoteListDate } from '../utils/dateUtils'
+import { IonContent, IonPage } from '@ionic/vue'
+
+const store = useAppStore()
+const router = useRouter()
+const noteItemRefs = ref({})
+
+// 页面挂载时加载初始数据
+onMounted(() => {
+  // 检查URL参数是否包含mock数据加载指令，用于开发和演示
+  const urlParams = new URLSearchParams(window.location.search)
+  if (urlParams.get('mock') === 'true') {
+    // 加载预设的模拟数据
+    store.loadMockData()
+  } else {
+    // 从Storage加载用户数据
+    store.loadData()
+  }
+})
+
+const searchQuery = ref('')
+const sortBy = ref('date') // 排序方式：'date'(按日期)、'title'(按标题)、'starred'(按星标)
+const isFolderExpanded = ref(false) // 文件夹列表是否展开
+const currentFolder = ref('all') // 当前选中的文件夹，默认是"全部便签"
+const noteToDelete = ref(null)
+
+// 计算加星便签数量（未删除的）
+const starredNotesCount = computed(() => {
+  return store.notes.filter(note => note.isStarred && !note.isDeleted).length
+})
+
+// 计算回收站便签数量
+const trashNotesCount = computed(() => {
+  return store.notes.filter(note => note.isDeleted).length
+})
+
+// 根据当前文件夹过滤便签
+const filteredNotes = computed(() => {
+  // 预处理搜索查询，提高性能
+  const lowerCaseQuery = searchQuery.value?.toLowerCase().trim() || ''
+
+  return store.notes.filter(note => {
+    // 先检查搜索条件
+    const matchesSearch =
+      !lowerCaseQuery || (note.title && typeof note.title === 'string' && note.title.toLowerCase().includes(lowerCaseQuery)) || (note.content && typeof note.content === 'string' && note.content.toLowerCase().includes(lowerCaseQuery))
+
+    if (!matchesSearch) return false
+
+    // 再检查文件夹条件
+    switch (currentFolder.value) {
+      case 'all':
+        // 全部便签中不显示已删除的便签
+        return !note.isDeleted
+      case 'starred':
+        // 加星便签中只显示未删除的加星便签
+        return note.isStarred && !note.isDeleted
+      case 'trash':
+        // 回收站中只显示已删除的便签
+        return note.isDeleted
+      default:
+        // 自定义文件夹中不显示已删除的便签
+        return note.folderId === currentFolder.value && !note.isDeleted
+    }
+  })
+})
+
+// 过滤并排序便签列表
+// 首先按置顶状态排序，置顶的便签排在前面
+// 然后根据sortBy的值进行二次排序
+const filteredAndSortedNotes = computed(() => {
+  return [...filteredNotes.value].sort((a, b) => {
+    // 置顶的便签排在前面
+    if (a.isTop && !b.isTop) return -1
+    if (!a.isTop && b.isTop) return 1
+
+    // 根据排序方式排序
+    switch (sortBy.value) {
+      case 'title':
+        // 按标题字母顺序排序
+        return a.title.localeCompare(b.title)
+      case 'starred':
+        // 按星标状态排序，加星的便签排在前面
+        return (b.isStarred ? 1 : 0) - (a.isStarred ? 1 : 0)
+      case 'date':
+      default:
+        // 按更新时间倒序排列（最新的在前）
+        return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+    }
+  })
+})
+
+// 计算头部标题
+const headerTitle = computed(() => {
+  switch (currentFolder.value) {
+    case 'all':
+      return '全部便签'
+    case 'starred':
+      return '加星便签'
+    case 'trash':
+      return '回收站'
+    default:
+      return '全部便签'
+  }
+})
+
+// 计算全部便签数量（未删除的）
+const allNotesCount = computed(() => {
+  return store.notes.filter(note => !note.isDeleted).length
+})
+
+const handleNotePress = noteId => {
+  // 检查是否有便签条处于展开状态
+  let hasSlidedNote = false
+  Object.values(noteItemRefs.value).forEach(noteItem => {
+    // 注意：isSlided是ref值，需要通过.value访问
+    if (noteItem && noteItem.getSlideState()) {
+      hasSlidedNote = true
+      noteItem.resetSlideState()
+    }
+  })
+
+  // 如果有便签条处于展开状态，不跳转到编辑页面
+  if (hasSlidedNote) {
+    return
+  }
+
+  // 使用vue-router导航到编辑页面
+  router.push(`/editor/${noteId}`)
+}
+
+const handleAddNote = () => {
+  // 使用vue-router导航到新建便签页面
+  router.push('/editor')
+}
+
+// 处理Header组件的操作按钮点击事件
+const handleHeaderAction = actionType => {
+  if (actionType === 'create') {
+    handleAddNote()
+  }
+}
+
+const handleStarToggle = async noteId => {
+  const note = store.notes.find(n => n.id === noteId)
+  if (note) {
+    try {
+      await store.updateNote(noteId, { isStarred: !note.isStarred })
+      console.log(`便签 ${noteId} 星标状态已更新`)
+    } catch (error) {
+      console.error('更新便签星标状态失败:', error)
+    }
+  }
+}
+
+const handleTopToggle = async noteId => {
+  const note = store.notes.find(n => n.id === noteId)
+  if (note) {
+    try {
+      await store.updateNote(noteId, { isTop: !note.isTop })
+      console.log(`便签 ${noteId} 置顶状态已更新`)
+    } catch (error) {
+      console.error('更新便签置顶状态失败:', error)
+    }
+  }
+}
+
+const confirmDeleteNote = async noteId => {
+  noteToDelete.value = noteId
+  if (noteToDelete.value) {
+    try {
+      // 检查当前是否在回收站中
+      if (currentFolder.value === 'trash') {
+        // 在回收站中删除便签，彻底删除
+        await store.permanentlyDeleteNote(noteToDelete.value)
+        console.log(`便签 ${noteToDelete.value} 已彻底删除`)
+      } else {
+        // 不在回收站中，将便签移至回收站
+        await store.moveToTrash(noteToDelete.value)
+        console.log(`便签 ${noteToDelete.value} 已移至回收站`)
+      }
+      noteToDelete.value = null
+    } catch (error) {
+      console.error('删除便签失败:', error)
+    }
+  }
+}
+
+// 处理排序方式切换
+// 循环切换排序选项：按日期 -> 按标题 -> 按星标 -> 按日期...
+const handleSort = () => {
+  const sortOptions = ['date', 'title', 'starred']
+  const currentIndex = sortOptions.indexOf(sortBy.value)
+  const nextIndex = (currentIndex + 1) % sortOptions.length
+  sortBy.value = sortOptions[nextIndex]
+  console.log('当前排序方式:', sortOptions[nextIndex])
+}
+
+const handleAllNotesClick = () => {
+  setCurrentFolder('all')
+  setIsFolderExpanded(false)
+}
+
+const handleStarredNotesClick = () => {
+  setCurrentFolder('starred')
+  setIsFolderExpanded(false)
+}
+
+const handleTrashNotesClick = () => {
+  setCurrentFolder('trash')
+  setIsFolderExpanded(false)
+}
+
+const handleFolderPress = () => {
+  // 使用vue-router导航到文件夹页面
+  router.push('/folders')
+}
+
+const handleSettingsPress = () => {
+  // 使用vue-router导航到设置页面
+  router.push('/settings')
+}
+
+const handleFolderToggle = () => {
+  // 在实际应用中，这里会触发文件夹列表的展开/收起
+  isFolderExpanded.value = !isFolderExpanded.value
+}
+
+const handleSearch = query => {
+  // 搜索功能已在computed属性filteredAndSortedNotes中实现
+  console.log('搜索:', query)
+
+  // 可以在这里添加搜索统计或其它功能
+  if (query && query.length > 0) {
+    console.log(`找到 ${filteredAndSortedNotes.value.length} 个匹配的便签`)
+  }
+}
+
+const handleClearSearch = () => {
+  // 清除搜索已在v-model中处理
+  console.log('搜索已清除')
+
+  // 清除搜索后可以重置一些状态
+  setSearchQuery('')
+}
+
+const handleSearchFocus = () => {
+  console.log('搜索栏获得焦点')
+  // 可以在这里添加获得焦点时的特殊处理
+}
+
+const handleSearchBlur = () => {
+  console.log('搜索栏失去焦点')
+  // 可以在这里添加失去焦点时的特殊处理
+}
+
+// 防抖函数，用于避免频繁触发搜索
+// 通过延迟执行函数，只在最后一次调用后执行
+const debounceSearch = (func, delay) => {
+  let timeoutId
+  return function (...args) {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => func.apply(this, args), delay)
+  }
+}
+
+// 防抖搜索处理函数，延迟300ms执行搜索
+const debouncedHandleSearch = debounceSearch(query => {
+  handleSearch(query)
+}, 300)
+
+// 改进的日期格式化函数
+const formatDate = dateString => {
+  return formatNoteListDate(dateString)
+}
+
+const setCurrentFolder = folder => {
+  currentFolder.value = folder
+}
+
+const setIsFolderExpanded = expanded => {
+  isFolderExpanded.value = expanded
+}
+
+const setSearchQuery = query => {
+  searchQuery.value = query
+}
+
+const notes = computed(() => store.notes)
+</script>
+<style lang="less" scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  background: url(/assets/icons/drawable-xxhdpi/note_background.png);
+  background-size: cover;
+}
+
+.folder-list {
+  position: absolute;
+  top: 3.125rem;
+  left: 10%;
+  right: 10%;
+  z-index: 1000;
+  background-color: var(--background-card);
+  border-radius: 0.5rem;
+  box-shadow: 0 0.125rem 0.25rem var(--shadow);
+  border: 1px solid #f0ece7;
+  overflow: hidden;
+}
+
+.folder-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: transparent;
+  z-index: 99;
+}
+.content {
+  --background: transparent;
+  --padding-top: 4.5rem;
+  --padding-bottom: 2rem;
+}
+
+.search-container {
+  padding: 0.8rem 0.5rem;
+}
+
+.notes-container {
+  flex: 1;
+  position: relative;
+}
+
+.notes-list {
+  position: relative;
+}
+
+.note-item {
+  margin: 0.6rem 0;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* 便签列表动画 */
+.note-list-enter-active,
+.note-list-leave-active {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.note-list-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.note-list-move {
+  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.note-list-leave-active {
+  position: absolute;
+  width: calc(100% - 1rem);
+}
+
+/* 文件夹列表动画 */
+.folder-slide-enter-active,
+.folder-slide-leave-active {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.folder-slide-enter-from {
+  opacity: 0;
+  transform: scale(0.8) translateY(-20px);
+}
+
+.folder-slide-enter-to {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.folder-slide-leave-from {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.folder-slide-leave-to {
+  opacity: 0;
+  transform: scale(0.8) translateY(-20px);
+}
+</style>

From 2eb7eb86180918a15233690249f558ebd4a3b760 Mon Sep 17 00:00:00 2001
From: yuantao <user@example.com>
Date: Thu, 23 Oct 2025 18:35:23 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=A4=B9=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD=EF=BC=9A=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E6=96=87=E4=BB=B6=E5=A4=B9=E9=80=89=E6=8B=A9=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E3=80=81=E6=B7=BB=E5=8A=A0=E3=80=81=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=92=8C=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ConfirmDialog.vue | 249 ++++++++
 src/components/FolderItem.vue    | 245 +++++---
 src/components/FolderManage.vue  | 689 +++++++++++++++++-----
 src/pages/NoteListPage.vue       |  19 +-
 src/stores/useAppStore.js        | 719 +++++++++++-----------
 src/utils/indexedDBStorage.js    | 983 ++++++++++++++++---------------
 6 files changed, 1880 insertions(+), 1024 deletions(-)
 create mode 100644 src/components/ConfirmDialog.vue

diff --git a/src/components/ConfirmDialog.vue b/src/components/ConfirmDialog.vue
new file mode 100644
index 0000000..d9c7fe9
--- /dev/null
+++ b/src/components/ConfirmDialog.vue
@@ -0,0 +1,249 @@
+<template>
+  <div v-if="visible" class="pd-mask" @click="handleMaskClick">
+    <div class="pd-confirm" @click.stop>
+      <div class="pd-blur"></div>
+      <div class="pd-plan"></div>
+      <h2 class="pd-title" v-if="title">{{ title }}</h2>
+      <p class="pd-message">{{ message }}</p>
+      <div class="pd-buttons">
+        <button v-if="showConfirm" class="pd-button pd-confirm-btn" @click="handleConfirm">
+          {{ confirmText }}
+        </button>
+        <button v-if="showCancel" class="pd-button pd-cancel" @click="handleCancel">
+          {{ cancelText }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  confirmText: {
+    type: String,
+    default: '确认',
+  },
+  cancelText: {
+    type: String,
+    default: '取消',
+  },
+  showConfirm: {
+    type: Boolean,
+    default: true,
+  },
+  showCancel: {
+    type: Boolean,
+    default: true,
+  },
+  maskClosable: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const emit = defineEmits(['confirm', 'cancel', 'update:visible'])
+const visible = defineModel('visible', { type: Boolean, default: false })
+
+// Promise 控制变量
+let resolvePromise, rejectPromise
+
+// 返回 Promise 的方法，模拟原生 confirm 行为
+const show = (options = {}) => {
+  // 更新 props 值
+  Object.assign(props, options)
+
+  // 显示对话框
+  visible.value = true
+  emit('update:visible', true)
+
+  // 返回 Promise
+  return new Promise((resolve, reject) => {
+    resolvePromise = resolve
+    rejectPromise = reject
+  })
+}
+
+const handleConfirm = () => {
+  emit('confirm')
+  visible.value = false
+  emit('update:visible', false)
+
+  // 解决 Promise
+  if (resolvePromise) {
+    resolvePromise()
+    resolvePromise = null
+    rejectPromise = null
+  }
+}
+
+const handleCancel = () => {
+  emit('cancel')
+  visible.value = false
+  emit('update:visible', false)
+
+  // 拒绝 Promise
+  if (rejectPromise) {
+    rejectPromise()
+    resolvePromise = null
+    rejectPromise = null
+  }
+}
+
+const handleMaskClick = () => {
+  if (props.maskClosable) {
+    handleCancel() // 点击遮罩相当于取消
+  }
+}
+
+// 添加/移除 body 滚动锁定
+const lockBodyScroll = () => {
+  document.body.style.overflow = 'hidden'
+}
+
+const unlockBodyScroll = () => {
+  document.body.style.overflow = ''
+}
+
+onMounted(() => {
+  if (visible.value) {
+    lockBodyScroll()
+  }
+})
+
+onUnmounted(() => {
+  unlockBodyScroll()
+})
+
+// 监听 visible 变化
+watch(visible, newVal => {
+  if (newVal) {
+    lockBodyScroll()
+  } else {
+    unlockBodyScroll()
+  }
+})
+
+// 暴露 show 方法给父组件使用
+defineExpose({
+  show,
+})
+</script>
+
+<style scoped>
+.pd-mask {
+  position: fixed;
+  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999999999;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: inherit;
+  background: var(--confirmBg, inherit);
+}
+
+.pd-confirm {
+  background: inherit;
+  background: var(--confirmTheme, #fff);
+  text-align: center;
+  color: var(--confirmColor, #636363);
+  font-size: var(--confirmFontSize, 1rem);
+  max-width: 75vw;
+  min-width: 20em;
+  box-shadow: 0px 35px 35px -10px rgba(0, 0, 0, 0.33);
+  border-radius: 10px;
+  position: relative;
+  white-space: break-spaces;
+  word-break: break-all;
+  overflow: hidden;
+}
+
+.pd-blur,
+.pd-plan {
+  position: absolute;
+  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.pd-plan {
+  background: inherit;
+  background: rgba(255, 255, 255, 0.66);
+  filter: blur(10px) saturate(2);
+}
+
+.pd-title {
+  position: relative;
+  font-size: 1.3em;
+  min-height: 1em;
+  background: var(--confirmBtnBg, #fafafa);
+  color: var(--confirmBtnColor, #636363);
+  margin: 0;
+  padding: 0.5em 0;
+}
+
+.pd-message {
+  position: relative;
+  border-top: 1px solid var(--confirmBtnBorder, #f1f1f1);
+  width: 100%;
+  max-height: 70vh;
+  border-bottom: 1px solid var(--confirmBtnBorder, #f1f1f1);
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 2em 10%;
+  line-height: 1.4;
+  overflow: auto;
+}
+
+.pd-buttons {
+  display: flex;
+}
+
+.pd-button {
+  position: relative;
+  width: 100%;
+  font-size: 1em;
+  appearance: none;
+  background: var(--confirmBtnBg, #fafafa);
+  color: var(--confirmBtnColor, #636363);
+  border: none;
+  border-right: 1px solid var(--confirmBtnBorder, #f1f1f1);
+  padding: 1em 0;
+  cursor: pointer;
+  outline: none;
+}
+
+/* 当同时显示确认和取消按钮时，每个按钮占50%宽度 */
+.pd-button:first-child:nth-last-child(2),
+.pd-button:first-child:nth-last-child(2) ~ .pd-button {
+  width: 50%;
+}
+
+/* 当只显示一个按钮时，该按钮占100%宽度 */
+.pd-button:first-child:nth-last-child(1) {
+  width: 100%;
+  border-right: none;
+}
+
+/* 只有最后一个按钮没有右边框 */
+.pd-button:last-child {
+  border-right: none;
+}
+</style>
diff --git a/src/components/FolderItem.vue b/src/components/FolderItem.vue
index a66186c..1870bfe 100644
--- a/src/components/FolderItem.vue
+++ b/src/components/FolderItem.vue
@@ -1,77 +1,168 @@
-<template>
-  <div @click="onPress" class="code-fun-flex-row code-fun-items-center code-fun-relative folder-item">
-    <img class="folder-icon" :src="iconSrc" />
-    <span class="folder-name">{{ name }}</span>
-    <span class="folder-count">{{ noteCount }}</span>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  noteCount: {
-    type: Number,
-    required: true,
-  },
-  onPress: {
-    type: Function,
-    required: true,
-  },
-  isSelected: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const iconSrc = computed(() => {
-  switch (props.id) {
-    case 'all':
-      return 'assets/icons/drawable-xxhdpi/icon_folder_all.png'
-    case 'starred':
-      return 'assets/icons/drawable-xxhdpi/icon_folder_favorite.png'
-    case 'trash':
-      return 'assets/icons/drawable-xxhdpi/icon_folder_trash.png'
-    case 'archive':
-      return 'assets/icons/drawable-xxhdpi/icon_folder_document.png'
-    default:
-      return 'assets/icons/drawable-xxhdpi/icon_folder_document.png'
-  }
-})
-</script>
-
-<style scoped>
-.folder-item {
-  padding: 0.3rem 0;
-  background-color: #00000000;
-}
-
-.folder-icon {
-  width: 1.8rem;
-  height: 1.8rem;
-  flex-shrink: 0;
-  margin-inline: 0.3rem;
-}
-
-.folder-name {
-  font-size: 0.9rem;
-  line-height: 1.52rem;
-  color: #9b9b9b;
-}
-
-.folder-count {
-  font-size: 0.8rem;
-  line-height: 1.16rem;
-  margin-left: 0.7rem;
-  margin-top: 0.2rem;
-  color: #b8b8b8;
-}
-</style>
+<template>
+  <div @click="onPress" class="code-fun-flex-row code-fun-items-center code-fun-relative code-fun-justify-between folder-item">
+    <div class="code-fun-flex-row code-fun-items-center">
+      <!-- 文件夹图标或复选框 -->
+      <div v-if="isSelectionMode && showDeleteButton" class="folder-checkbox" @click.stop="onCheckboxClick">
+        <img :src="isChecked ? '/assets/icons/drawable-xxhdpi/check_box_on.png' : '/assets/icons/drawable-xxhdpi/check_box_off.png'" class="checkbox-icon" />
+      </div>
+
+      <img v-else class="folder-icon" :src="iconSrc" />
+      <span class="folder-name">{{ name }}</span>
+      <span class="folder-count">{{ noteCount }}</span>
+    </div>
+
+    <!-- 编辑按钮，仅在选择模式下对自定义文件夹显示 -->
+    <div v-if="showDeleteButton && isSelectionMode" class="folder-actions">
+      <img class="edit-icon" src="/assets/icons/drawable-xxhdpi/icon_folder_rename.png" @click.stop="onEdit" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+
+  name: {
+    type: String,
+    required: true,
+  },
+
+  noteCount: {
+    type: Number,
+    required: true,
+  },
+
+  onPress: {
+    type: Function,
+    required: true,
+  },
+
+  onEdit: {
+    type: Function,
+    default: null,
+  },
+
+  onDelete: {
+    type: Function,
+    default: null,
+  },
+
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
+
+  isSelectionMode: {
+    type: Boolean,
+
+    default: false,
+  },
+
+  isChecked: {
+    type: Boolean,
+
+    default: false,
+  },
+
+  onCheckboxClick: {
+    type: Function,
+
+    default: null,
+  },
+})
+
+const iconSrc = computed(() => {
+  switch (props.id) {
+    case 'all':
+      return 'assets/icons/drawable-xxhdpi/icon_folder_all.png'
+
+    case 'starred':
+      return 'assets/icons/drawable-xxhdpi/icon_folder_favorite.png'
+
+    case 'trash':
+      return 'assets/icons/drawable-xxhdpi/icon_folder_trash.png'
+
+    case 'archive':
+      return 'assets/icons/drawable-xxhdpi/icon_folder_document.png'
+
+    default:
+      return 'assets/icons/drawable-xxhdpi/icon_folder_document.png'
+  }
+})
+
+// 仅对自定义文件夹显示删除按钮
+
+const showDeleteButton = computed(() => {
+  return !['all', 'starred', 'trash', 'archive'].includes(props.id)
+})
+</script>
+
+<style lang="less" scoped>
+.folder-item {
+  padding: 0.3rem 0;
+  background-color: #00000000;
+}
+
+.folder-icon {
+  width: 1.8rem;
+  height: 1.8rem;
+  flex-shrink: 0;
+  margin-inline: 0.3rem;
+}
+
+.folder-name {
+  font-size: 0.9rem;
+  line-height: 1.52rem;
+  color: #9b9b9b;
+}
+
+.folder-count {
+  font-size: 0.8rem;
+  line-height: 1.16rem;
+  margin-left: 0.7rem;
+  margin-top: 0.2rem;
+  color: #b8b8b8;
+}
+
+.folder-actions {
+  display: flex;
+  margin-left: auto;
+  margin-right: 0.5rem;
+}
+
+.edit-icon,
+.delete-icon {
+  width: 1.5rem;
+
+  height: 1.5rem;
+
+  margin: 0 0.2rem;
+
+  opacity: 0.5;
+}
+
+.edit-icon:hover,
+.delete-icon:hover {
+  opacity: 1;
+}
+
+.folder-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.8rem;
+  height: 1.8rem;
+  flex-shrink: 0;
+  margin-inline: 0.3rem;
+}
+
+.checkbox-icon {
+  width: 70%;
+  height: 70%;
+}
+</style>
diff --git a/src/components/FolderManage.vue b/src/components/FolderManage.vue
index 025b4b7..f9898fc 100644
--- a/src/components/FolderManage.vue
+++ b/src/components/FolderManage.vue
@@ -1,135 +1,554 @@
-<template>
-  <div class="code-fun-flex-col page">
-    <!-- 全部便签文件夹项 -->
-    <FolderItem id="all" name="全部便签" :noteCount="allCount" :isSelected="selectedFolder === 'all'" :onPress="handleAllClick" />
-
-    <!-- 加星便签文件夹项 -->
-    <FolderItem id="starred" name="加星便签" :noteCount="starredCount" :isSelected="selectedFolder === 'starred'" :onPress="handleStarredClick" />
-
-    <!-- 回收站文件夹项 -->
-    <FolderItem id="trash" name="回收站" :noteCount="trashCount" :isSelected="selectedFolder === 'trash'" :onPress="handleTrashClick" />
-
-    <!-- 同步信息区域 -->
-    <div class="code-fun-flex-col code-fun-justify-start section_7">
-      <div class="code-fun-flex-row code-fun-justify-between code-fun-items-center section_8">
-        <div class="code-fun-flex-row code-fun-items-center">
-          <img class="code-fun-shrink-0 image_7" :src="`assets/icons/drawable-xxhdpi/btn_edit_folder.png`" />
-          <span class="text_11 code-fun-ml-10">上次同步:{{ lastSyncTime }}</span>
-        </div>
-        <div class="code-fun-flex-row code-fun-items-center">
-          <img class="image_8 code-fun-ml-12" :src="`assets/icons/drawable-xxhdpi/btn_add_folder.png`" @click="handleAddFolder" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import FolderItem from './FolderItem.vue'
-
-const props = defineProps({
-  allCount: {
-    type: Number,
-    default: 0,
-  },
-  starredCount: {
-    type: Number,
-    default: 0,
-  },
-  trashCount: {
-    type: Number,
-    default: 0,
-  },
-  archiveCount: {
-    type: Number,
-    default: 0,
-  },
-  selectedFolder: {
-    type: String,
-    default: '',
-  },
-  lastSyncTime: {
-    type: String,
-    default: '10/10上午9:28',
-  },
-  onAllClick: {
-    type: Function,
-    default: null,
-  },
-  onStarredClick: {
-    type: Function,
-    default: null,
-  },
-  onTrashClick: {
-    type: Function,
-    default: null,
-  },
-  onArchiveClick: {
-    type: Function,
-    default: null,
-  },
-  onAddFolder: {
-    type: Function,
-    default: null,
-  },
-})
-
-const handleAllClick = () => {
-  if (props.onAllClick) {
-    props.onAllClick()
-  }
-}
-
-const handleStarredClick = () => {
-  if (props.onStarredClick) {
-    props.onStarredClick()
-  }
-}
-
-const handleTrashClick = () => {
-  if (props.onTrashClick) {
-    props.onTrashClick()
-  }
-}
-
-const handleArchiveClick = () => {
-  if (props.onArchiveClick) {
-    props.onArchiveClick()
-  }
-}
-
-const handleAddFolder = event => {
-  // 阻止事件冒泡到父元素
-  event.stopPropagation()
-  if (props.onAddFolder) {
-    props.onAddFolder()
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.page {
-  .section_7 {
-    margin-top: 2rem;
-    background-color: #00000000;
-    .section_8 {
-      padding: 0.29rem 0.92rem;
-      background-color: #f4f4f4;
-      border: solid 0.063rem #f0ece7;
-      .image_7,
-      .image_8 {
-        border-radius: 0.63rem;
-        width: 2rem;
-        height: 2rem;
-        object-fit: contain;
-      }
-      .text_11 {
-        color: #cacaca;
-        font-size: 0.7rem;
-        line-height: 1.16rem;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="code-fun-flex-col page">
+    <!-- 全部便签文件夹项 -->
+
+    <FolderItem id="all" name="全部便签" :noteCount="allCount" :isSelected="selectedFolder === 'all'" :onPress="handleAllClick" />
+
+    <!-- 加星便签文件夹项 -->
+
+    <FolderItem id="starred" name="加星便签" :noteCount="starredCount" :isSelected="selectedFolder === 'starred'" :onPress="handleStarredClick" />
+
+    <!-- 回收站文件夹项 -->
+
+    <FolderItem id="trash" name="回收站" :noteCount="trashCount" :isSelected="selectedFolder === 'trash'" :onPress="handleTrashClick" />
+
+    <!-- 自定义文件夹项 -->
+
+    <FolderItem
+      v-for="folder in customFolders"
+      :key="folder.id"
+      :id="folder.id"
+      :name="folder.name"
+      :noteCount="getFolderNoteCount(folder.id)"
+      :isSelected="selectedFolder === folder.id"
+      :onPress="() => handleFolderClick(folder.id)"
+      :onEdit="() => handleEditFolder(folder.id)"
+      :onDelete="() => handleDeleteFolder(folder.id)"
+      :isSelectionMode="isSelectionMode"
+      :isChecked="selectedFolders.includes(folder.id)"
+      :onCheckboxClick="() => toggleFolderSelection(folder.id)" />
+
+    <div class="code-fun-flex-col code-fun-justify-start section_7">
+      <div class="code-fun-flex-row code-fun-justify-between code-fun-items-center section_8">
+        <div class="code-fun-flex-row code-fun-items-center">
+          <!-- 切换文件夹选择模式按钮 -->
+
+          <img class="code-fun-shrink-0 image_7" :src="isSelectionMode ? 'assets/icons/drawable-xxhdpi/btn_back_black.png' : 'assets/icons/drawable-xxhdpi/btn_edit_folder.png'" @click="toggleSelectionMode" />
+
+          <!-- 同步信息区域 -->
+
+          <span class="text_11 code-fun-ml-10">上次同步:{{ lastSyncTime }}</span>
+        </div>
+
+        <div class="code-fun-flex-row code-fun-items-center">
+          <!-- 新建文件夹按钮 / 删除按钮 -->
+
+          <img
+            class="image_8 code-fun-ml-12"
+            :src="isSelectionMode ? 'assets/icons/drawable-xxhdpi/icon_folder_trash.png' : 'assets/icons/drawable-xxhdpi/btn_add_folder.png'"
+            @click="isSelectionMode ? handleDeleteSelectedFolders() : handleAddFolder" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 添加文件夹的模态框 -->
+
+    <div v-if="showAddFolderModal" class="modal-overlay" @click="showAddFolderModal = false">
+      <div class="modal-content" @click.stop>
+        <h3>添加文件夹</h3>
+
+        <input v-model="newFolderName" placeholder="请输入文件夹名称" class="folder-input" @keyup.enter="confirmAddFolder" ref="folderInput" />
+
+        <div class="modal-actions">
+          <button @click="showAddFolderModal = false" class="cancel-btn">取消</button>
+
+          <button @click="confirmAddFolder" class="confirm-btn">确定</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 重命名文件夹的模态框 -->
+
+    <div v-if="showRenameFolderModal" class="modal-overlay" @click="showRenameFolderModal = false">
+      <div class="modal-content" @click.stop>
+        <h3>重命名文件夹</h3>
+
+        <input v-model="renameFolderName" placeholder="请输入文件夹名称" class="folder-input" @keyup.enter="confirmRenameFolder" ref="folderInput" />
+
+        <div class="modal-actions">
+          <button @click="showRenameFolderModal = false" class="cancel-btn">取消</button>
+
+          <button @click="confirmRenameFolder" class="confirm-btn">确定</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 确认删除文件夹的模态框 -->
+
+    <div v-if="showDeleteConfirmModal" class="modal-overlay" @click="showDeleteConfirmModal = false">
+      <div class="modal-content" @click.stop>
+        <h3>删除文件夹</h3>
+
+        <p>确定要删除选中的 {{ selectedFolders.length }} 个文件夹吗？文件夹中的便签将移至"全部便签"。</p>
+
+        <div class="modal-actions">
+          <button @click="showDeleteConfirmModal = false" class="cancel-btn">取消</button>
+
+          <button @click="confirmDeleteSelectedFolders" class="confirm-btn">确定</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, nextTick } from 'vue'
+
+import { useAppStore } from '../stores/useAppStore'
+
+import FolderItem from './FolderItem.vue'
+
+const store = useAppStore()
+
+const props = defineProps({
+  allCount: {
+    type: Number,
+
+    default: 0,
+  },
+
+  starredCount: {
+    type: Number,
+
+    default: 0,
+  },
+
+  trashCount: {
+    type: Number,
+
+    default: 0,
+  },
+
+  archiveCount: {
+    type: Number,
+
+    default: 0,
+  },
+
+  selectedFolder: {
+    type: String,
+
+    default: '',
+  },
+
+  lastSyncTime: {
+    type: String,
+
+    default: '10/10上午9:28',
+  },
+
+  onAllClick: {
+    type: Function,
+
+    default: null,
+  },
+
+  onStarredClick: {
+    type: Function,
+
+    default: null,
+  },
+
+  onTrashClick: {
+    type: Function,
+
+    default: null,
+  },
+
+  onArchiveClick: {
+    type: Function,
+
+    default: null,
+  },
+
+  onAddFolder: {
+    type: Function,
+
+    default: null,
+  },
+
+  onFolderClick: {
+    type: Function,
+
+    default: null,
+  },
+})
+
+// 添加文件夹相关状态
+
+const showAddFolderModal = ref(false)
+
+const newFolderName = ref('')
+
+const folderInput = ref(null)
+
+// 重命名文件夹相关状态
+
+const showRenameFolderModal = ref(false)
+
+const renameFolderId = ref(null)
+
+const renameFolderName = ref('')
+
+// 选择模式相关状态
+
+const isSelectionMode = ref(false)
+
+const selectedFolders = ref([])
+
+const showDeleteConfirmModal = ref(false)
+
+// 计算自定义文件夹（排除系统文件夹）
+
+const customFolders = computed(() => {
+  return store.folders.filter(folder => !['all', 'starred', 'trash', 'archive'].includes(folder.id))
+})
+
+// 获取文件夹中的便签数量
+
+const getFolderNoteCount = folderId => {
+  return store.notes.filter(note => note.folderId === folderId && !note.isDeleted).length
+}
+
+// 切换选择模式
+
+const toggleSelectionMode = () => {
+  isSelectionMode.value = !isSelectionMode.value
+
+  // 退出选择模式时清空选中项
+
+  if (!isSelectionMode.value) {
+    selectedFolders.value = []
+  }
+}
+
+// 切换文件夹选中状态
+
+const toggleFolderSelection = folderId => {
+  if (!isSelectionMode.value) return
+
+  const index = selectedFolders.value.indexOf(folderId)
+
+  if (index > -1) {
+    // 已选中，取消选中
+
+    selectedFolders.value.splice(index, 1)
+  } else {
+    // 未选中，添加选中
+
+    selectedFolders.value.push(folderId)
+  }
+}
+
+// 处理文件夹点击
+
+const handleFolderClick = folderId => {
+  if (isSelectionMode.value) {
+    toggleFolderSelection(folderId)
+  } else {
+    if (props.onFolderClick) {
+      props.onFolderClick(folderId)
+    }
+  }
+}
+
+// 处理删除选中的文件夹
+
+const handleDeleteSelectedFolders = () => {
+  if (selectedFolders.value.length === 0) return
+
+  showDeleteConfirmModal.value = true
+}
+
+// 确认删除选中的文件夹
+
+const confirmDeleteSelectedFolders = async () => {
+  try {
+    // 删除选中的文件夹
+
+    for (const folderId of selectedFolders.value) {
+      // 跳过系统文件夹
+
+      if (['all', 'starred', 'trash', 'archive'].includes(folderId)) continue
+
+      await store.deleteFolder(folderId)
+    }
+
+    // 清空选中项并退出选择模式
+
+    selectedFolders.value = []
+
+    isSelectionMode.value = false
+
+    showDeleteConfirmModal.value = false
+  } catch (error) {
+    console.error('删除文件夹失败:', error)
+  }
+}
+
+// 处理删除文件夹
+
+const handleDeleteFolder = folderId => {
+  // 阻止事件冒泡到父元素
+
+  event.stopPropagation()
+
+  // 确认删除
+
+  if (confirm(`确定要删除文件夹 "${getFolderName(folderId)}" 吗？文件夹中的便签将移至"全部便签"。`)) {
+    try {
+      store.deleteFolder(folderId)
+    } catch (error) {
+      console.error('删除文件夹失败:', error)
+    }
+  }
+}
+
+// 处理编辑文件夹
+
+const handleEditFolder = folderId => {
+  // 阻止事件冒泡到父元素
+
+  event.stopPropagation()
+
+  const folder = store.folders.find(f => f.id === folderId)
+
+  if (folder) {
+    renameFolderId.value = folderId
+
+    renameFolderName.value = folder.name
+
+    showRenameFolderModal.value = true
+
+    // 在下次DOM更新后聚焦输入框
+
+    nextTick(() => {
+      if (folderInput.value) {
+        folderInput.value.focus()
+      }
+    })
+  }
+}
+
+// 确认重命名文件夹
+
+const confirmRenameFolder = async () => {
+  if (renameFolderName.value.trim() && renameFolderId.value) {
+    try {
+      await store.updateFolder(renameFolderId.value, { name: renameFolderName.value.trim() })
+
+      showRenameFolderModal.value = false
+
+      renameFolderId.value = null
+
+      renameFolderName.value = ''
+    } catch (error) {
+      console.error('重命名文件夹失败:', error)
+    }
+  }
+}
+
+// 获取文件夹名称
+
+const getFolderName = folderId => {
+  const folder = store.folders.find(f => f.id === folderId)
+
+  return folder ? folder.name : ''
+}
+
+const handleAllClick = () => {
+  if (isSelectionMode.value) {
+    toggleFolderSelection('all')
+  } else {
+    if (props.onAllClick) {
+      props.onAllClick()
+    }
+  }
+}
+
+const handleStarredClick = () => {
+  if (isSelectionMode.value) {
+    toggleFolderSelection('starred')
+  } else {
+    if (props.onStarredClick) {
+      props.onStarredClick()
+    }
+  }
+}
+
+const handleTrashClick = () => {
+  if (isSelectionMode.value) {
+    toggleFolderSelection('trash')
+  } else {
+    if (props.onTrashClick) {
+      props.onTrashClick()
+    }
+  }
+}
+
+const handleArchiveClick = () => {
+  if (isSelectionMode.value) {
+    toggleFolderSelection('archive')
+  } else {
+    if (props.onArchiveClick) {
+      props.onArchiveClick()
+    }
+  }
+}
+
+const handleAddFolder = event => {
+  // 阻止事件冒泡到父元素
+
+  event.stopPropagation()
+
+  showAddFolderModal.value = true
+
+  newFolderName.value = ''
+
+  // 在下次DOM更新后聚焦输入框
+
+  nextTick(() => {
+    if (folderInput.value) {
+      folderInput.value.focus()
+    }
+  })
+}
+
+const confirmAddFolder = async () => {
+  if (newFolderName.value.trim()) {
+    try {
+      const newFolder = {
+        name: newFolderName.value.trim(),
+
+        id: `folder_${Date.now()}`, // 生成唯一ID
+
+        createdAt: new Date().toISOString(),
+      }
+
+      await store.addFolder(newFolder)
+
+      showAddFolderModal.value = false
+
+      newFolderName.value = ''
+    } catch (error) {
+      console.error('添加文件夹失败:', error)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.page {
+  .section_7 {
+    margin-top: 2rem;
+    background-color: #00000000;
+    .section_8 {
+      padding: 0.29rem 0.92rem;
+      background-color: #f4f4f4;
+      border: solid 0.063rem #f0ece7;
+      .image_7,
+      .image_8 {
+        border-radius: 0.63rem;
+        width: 2.2rem;
+        height: 1.75rem;
+        object-fit: contain;
+        background: url(/assets/icons/drawable-xxhdpi/folder_bottom_button_normal.9.png), #fdfbfb;
+      }
+      .text_11 {
+        color: #cacaca;
+        font-size: 0.7rem;
+        line-height: 1.16rem;
+      }
+    }
+  }
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1001;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  text-align: center;
+  width: 80%;
+  max-width: 300px;
+
+  h3 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: #333;
+  }
+
+  .folder-input {
+    width: 100%;
+    padding: 0.8rem;
+    border: 1px solid #ddd;
+    border-radius: 0.3rem;
+    font-size: 1rem;
+    margin-bottom: 1.5rem;
+    box-sizing: border-box;
+  }
+
+  .modal-actions {
+    display: flex;
+    justify-content: space-between;
+
+    button {
+      flex: 1;
+      padding: 0.8rem;
+      border: none;
+      border-radius: 0.3rem;
+      font-size: 1rem;
+      cursor: pointer;
+      margin: 0 0.5rem;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .cancel-btn {
+      background-color: #f0f0f0;
+      color: #333;
+
+      &:hover {
+        background-color: #e0e0e0;
+      }
+    }
+
+    .confirm-btn {
+      background-color: #4a90e2;
+      color: white;
+
+      &:hover {
+        background-color: #357ae8;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/NoteListPage.vue b/src/pages/NoteListPage.vue
index fd1141c..5d5c7b5 100644
--- a/src/pages/NoteListPage.vue
+++ b/src/pages/NoteListPage.vue
@@ -24,7 +24,9 @@
               :selectedFolder="currentFolder"
               :onAllClick="handleAllNotesClick"
               :onStarredClick="handleStarredNotesClick"
-              :onTrashClick="handleTrashNotesClick" />
+              :onTrashClick="handleTrashNotesClick"
+              :onFolderClick="handleFolderClick"
+              :onAddFolder="handleAddFolder" />
           </div>
         </transition>
         <!-- 点击外部区域收起文件夹列表的覆盖层 -->
@@ -168,7 +170,9 @@ const headerTitle = computed(() => {
     case 'trash':
       return '回收站'
     default:
-      return '全部便签'
+      // 查找自定义文件夹的名称
+      const folder = store.folders.find(f => f.id === currentFolder.value)
+      return folder ? folder.name : '全部便签'
   }
 })
 
@@ -279,6 +283,17 @@ const handleTrashNotesClick = () => {
   setIsFolderExpanded(false)
 }
 
+const handleFolderClick = (folderId) => {
+  setCurrentFolder(folderId)
+  setIsFolderExpanded(false)
+}
+
+const handleAddFolder = () => {
+  // 文件夹添加功能已在FolderManage组件中实现
+  // 这里只需关闭文件夹列表
+  setIsFolderExpanded(false)
+}
+
 const handleFolderPress = () => {
   // 使用vue-router导航到文件夹页面
   router.push('/folders')
diff --git a/src/stores/useAppStore.js b/src/stores/useAppStore.js
index d92427b..dc7ea11 100644
--- a/src/stores/useAppStore.js
+++ b/src/stores/useAppStore.js
@@ -1,336 +1,383 @@
-import { defineStore } from 'pinia'
-import * as storage from '../utils/indexedDBStorage'
-import { getCurrentDateTime, getPastDate } from '../utils/dateUtils'
-
-/**
- * 应用状态管理Store
- * 使用Pinia进行状态管理，包含便签、文件夹和设置数据
- */
-export const useAppStore = defineStore('app', {
-  /**
-   * 状态定义
-   * 包含应用的核心数据：便签列表、文件夹列表和设置
-   */
-  state: () => ({
-    notes: [],                                // 便签列表
-    folders: [],                              // 文件夹列表
-    settings: { cloudSync: false, darkMode: false }, // 应用设置
-  }),
-
-  /**
-   * 计算属性
-   * 基于状态派生的计算值
-   */
-  getters: {
-    /**
-     * 计算加星便签数量
-     * @param {Object} state - 当前状态对象
-     * @returns {number} 加星便签的数量
-     */
-    starredNotesCount: state => {
-      return state.notes.filter(note => note.isStarred).length
-    },
-
-    /**
-     * 计算所有便签数量
-     * @param {Object} state - 当前状态对象
-     * @returns {number} 所有便签的数量
-     */
-    allNotesCount: state => {
-      return state.notes.length
-    },
-  },
-
-  /**
-   * 状态变更操作
-   * 包含所有修改状态的方法
-   */
-  actions: {
-    /**
-     * 初始化数据
-     * 从Storage加载便签、文件夹和设置数据
-     * 如果没有数据则加载预设的mock数据
-     * @returns {Promise<void>}
-     */
-    async loadData() {
-      try {
-        // 从Storage加载数据
-        const loadedNotes = await storage.getNotes()
-        const loadedFolders = await storage.getFolders()
-        const loadedSettings = await storage.getSettings()
-
-        // 如果没有数据，则加载mock数据
-        if (loadedNotes.length === 0 && loadedFolders.length === 0) {
-          this.loadMockData()
-        } else {
-          // 否则使用加载的数据
-          this.notes = loadedNotes
-          this.folders = loadedFolders
-          this.settings = loadedSettings
-        }
-      } catch (error) {
-        console.error('Error loading data:', error)
-      }
-    },
-
-    /**
-     * 加载预设的mock数据
-     * 用于开发和演示目的，提供示例便签、文件夹和设置
-     * @returns {Promise<void>}
-     */
-    async loadMockData() {
-      // Mock notes - 使用固定的日期值以避免每次运行时变化
-      const fixedCurrentDate = '2025-10-12T10:00:00.000Z';
-
-      // 预设的便签示例数据 - 仅保留一条关于应用功能介绍和示例的便签
-      const mockNotes = [
-        {
-          id: '1',
-          title: '欢迎使用锤子便签',
-          content: '<p>这是一个功能强大的便签应用，您可以在这里记录您的想法、待办事项等。</p><br><h2>功能介绍</h2><p>1. 创建和编辑便签<br>2. 为便签加星和置顶<br>3. 将便签分类到文件夹<br>4. 搜索便签内容<br>5. 回收站功能</p><br><h2>编辑器功能演示</h2><br><h2>标题格式</h2><p>点击标题按钮可创建居中的标题</p><br><h2>待办事项</h2><div class="todo-container"><div class="todo-icon"></div><div contenteditable="true" class="todo-content">这是一个待办事项</div></div><div class="todo-container"><div class="todo-icon completed"></div><div contenteditable="true" class="todo-content" style="color: var(--text-tertiary); text-decoration: line-through;">这是一个已完成的待办事项</div></div><br><h2>列表格式</h2><ul><li>无序列表项1</li><li>无序列表项2</li></ul><br><h2>文本格式</h2><p><strong>加粗文本</strong></p><br><h2>引用格式</h2><div class="quote-container"><div class="quote-icon"></div><div class="quote-content">这是一段引用文本<br>可以用来引用他人的话语</div></div><br><h2>图片</h2><p>点击图片按钮可以插入图片，长按图片可以拖拽排序</p>',
-          createdAt: fixedCurrentDate,
-          updatedAt: fixedCurrentDate,
-          folderId: null,
-          isStarred: true,      // 加星便签
-          isTop: true,          // 置顶便签
-          hasImage: true,       // 包含图片
-          isDeleted: false,     // 未删除
-          deletedAt: null,
-        }
-      ]
-
-      // Mock folders - 使用固定的日期值
-      // 预设的文件夹示例数据
-      const mockFolders = [
-        {
-          id: 'folder1',
-          name: '工作',
-          createdAt: '2025-10-12T10:00:00.000Z',
-        },
-        {
-          id: 'folder2',
-          name: '个人',
-          createdAt: '2025-10-12T10:00:00.000Z',
-        },
-        {
-          id: 'folder3',
-          name: '学习',
-          createdAt: '2025-10-12T10:00:00.000Z',
-        },
-      ]
-
-      // Mock settings
-      // 预设的设置示例数据
-      const mockSettings = {
-        cloudSync: false,   // 云同步关闭
-        darkMode: false,    // 深色模式关闭
-      }
-
-      // 更新store状态
-      this.notes = mockNotes
-      this.folders = mockFolders
-      this.settings = mockSettings
-
-      // 保存到Storage
-      await storage.saveNotes(mockNotes)
-      await storage.saveFolders(mockFolders)
-      await storage.saveSettings(mockSettings)
-    },
-
-    /**
-     * 保存便签数据到Storage
-     * @returns {Promise<void>}
-     */
-    async saveNotes() {
-      try {
-        await storage.saveNotes(this.notes)
-      } catch (error) {
-        console.error('Error saving notes:', error)
-      }
-    },
-
-    /**
-     * 保存文件夹数据到Storage
-     * @returns {Promise<void>}
-     */
-    async saveFolders() {
-      try {
-        await storage.saveFolders(this.folders)
-      } catch (error) {
-        console.error('Error saving folders:', error)
-      }
-    },
-
-    /**
-     * 保存设置数据到Storage
-     * @returns {Promise<void>}
-     */
-    async saveSettings() {
-      try {
-        await storage.saveSettings(this.settings)
-      } catch (error) {
-        console.error('Error saving settings:', error)
-      }
-    },
-
-    /**
-     * 便签操作函数
-     */
-
-    /**
-     * 添加新便签
-     * @param {Object} note - 便签对象
-     * @returns {Promise<Object>} 新创建的便签对象
-     */
-    async addNote(note) {
-      try {
-        const newNote = await storage.addNote(note)
-        this.notes.push(newNote)
-
-        return newNote
-      } catch (error) {
-        console.error('Error adding note:', error)
-        throw error
-      }
-    },
-
-    /**
-     * 更新便签
-     * @param {string} id - 便签ID
-     * @param {Object} updates - 要更新的属性对象
-     * @returns {Promise<Object>} 更新后的便签对象
-     */
-    async updateNote(id, updates) {
-      try {
-        const updatedNote = await storage.updateNote(id, updates)
-        if (updatedNote) {
-          const index = this.notes.findIndex(note => note.id === id)
-          if (index !== -1) {
-            this.notes[index] = updatedNote
-          }
-        }
-        return updatedNote
-      } catch (error) {
-        console.error('Error updating note:', error)
-        throw error
-      }
-    },
-
-    /**
-     * 删除便签
-     * @param {string} id - 要删除的便签ID
-     * @returns {Promise<boolean>} 删除成功返回true，失败返回false
-     */
-    async deleteNote(id) {
-      try {
-        const result = await storage.deleteNote(id)
-        if (result) {
-          this.notes = this.notes.filter(note => note.id !== id)
-        }
-        return result
-      } catch (error) {
-        console.error('Error deleting note:', error)
-        throw error
-      }
-    },
-
-    /**
-     * 将便签移至回收站
-     * 将便签标记为已删除状态，并记录删除时间
-     * @param {string} id - 便签ID
-     * @returns {Promise<Object>} 更新后的便签对象
-     */
-    async moveToTrash(id) {
-      try {
-        const updatedNote = await storage.updateNote(id, { isDeleted: true, deletedAt: getCurrentDateTime() })
-        if (updatedNote) {
-          const index = this.notes.findIndex(note => note.id === id)
-          if (index !== -1) {
-            this.notes[index] = updatedNote
-          }
-        }
-        return updatedNote
-      } catch (error) {
-        console.error('Error moving note to trash:', error)
-        throw error
-      }
-    },
-
-    /**
-     * 永久删除便签
-     * 从便签列表中彻底移除便签
-     * @param {string} id - 便签ID
-     * @returns {Promise<boolean>} 删除成功返回true，失败返回false
-     */
-    async permanentlyDeleteNote(id) {
-      try {
-        const result = await storage.deleteNote(id)
-        if (result) {
-          this.notes = this.notes.filter(note => note.id !== id)
-        }
-        return result
-      } catch (error) {
-        console.error('Error permanently deleting note:', error)
-        throw error
-      }
-    },
-
-    /**
-     * 文件夹操作函数
-     */
-
-    /**
-     * 添加新文件夹
-     * @param {Object} folder - 文件夹对象
-     * @returns {Promise<Object>} 新创建的文件夹对象
-     */
-    async addFolder(folder) {
-      try {
-        const newFolder = await storage.addFolder(folder)
-        this.folders.push(newFolder)
-        return newFolder
-      } catch (error) {
-        console.error('Error adding folder:', error)
-        throw error
-      }
-    },
-
-    /**
-     * 设置操作函数
-     */
-
-    /**
-     * 更新设置
-     * @param {Object} newSettings - 新的设置对象
-     * @returns {Promise<void>}
-     */
-    async updateSettings(newSettings) {
-      try {
-        const updatedSettings = { ...this.settings, ...newSettings }
-        this.settings = updatedSettings
-        await storage.saveSettings(updatedSettings)
-      } catch (error) {
-        console.error('Error updating settings:', error)
-        throw error
-      }
-    },
-
-    /**
-     * 切换云同步设置
-     * 开启或关闭云同步功能
-     * @returns {Promise<void>}
-     */
-    async toggleCloudSync() {
-      await this.updateSettings({ cloudSync: !this.settings.cloudSync })
-    },
-
-    /**
-     * 切换深色模式设置
-     * 开启或关闭深色模式
-     * @returns {Promise<void>}
-     */
-    async toggleDarkMode() {
-      await this.updateSettings({ darkMode: !this.settings.darkMode })
-    },
-  },
-})
+import { defineStore } from 'pinia'
+import * as storage from '../utils/indexedDBStorage'
+import { getCurrentDateTime, getPastDate } from '../utils/dateUtils'
+
+/**
+ * 应用状态管理Store
+ * 使用Pinia进行状态管理，包含便签、文件夹和设置数据
+ */
+export const useAppStore = defineStore('app', {
+  /**
+   * 状态定义
+   * 包含应用的核心数据：便签列表、文件夹列表和设置
+   */
+  state: () => ({
+    notes: [],                                // 便签列表
+    folders: [],                              // 文件夹列表
+    settings: { cloudSync: false, darkMode: false }, // 应用设置
+  }),
+
+  /**
+   * 计算属性
+   * 基于状态派生的计算值
+   */
+  getters: {
+    /**
+     * 计算加星便签数量
+     * @param {Object} state - 当前状态对象
+     * @returns {number} 加星便签的数量
+     */
+    starredNotesCount: state => {
+      return state.notes.filter(note => note.isStarred).length
+    },
+
+    /**
+     * 计算所有便签数量
+     * @param {Object} state - 当前状态对象
+     * @returns {number} 所有便签的数量
+     */
+    allNotesCount: state => {
+      return state.notes.length
+    },
+  },
+
+  /**
+   * 状态变更操作
+   * 包含所有修改状态的方法
+   */
+  actions: {
+    /**
+     * 初始化数据
+     * 从Storage加载便签、文件夹和设置数据
+     * 如果没有数据则加载预设的mock数据
+     * @returns {Promise<void>}
+     */
+    async loadData() {
+      try {
+        // 从Storage加载数据
+        const loadedNotes = await storage.getNotes()
+        const loadedFolders = await storage.getFolders()
+        const loadedSettings = await storage.getSettings()
+
+        // 如果没有数据，则加载mock数据
+        if (loadedNotes.length === 0 && loadedFolders.length === 0) {
+          this.loadMockData()
+        } else {
+          // 否则使用加载的数据
+          this.notes = loadedNotes
+          this.folders = loadedFolders
+          this.settings = loadedSettings
+        }
+      } catch (error) {
+        console.error('Error loading data:', error)
+      }
+    },
+
+    /**
+     * 加载预设的mock数据
+     * 用于开发和演示目的，提供示例便签、文件夹和设置
+     * @returns {Promise<void>}
+     */
+    async loadMockData() {
+      // Mock notes - 使用固定的日期值以避免每次运行时变化
+      const fixedCurrentDate = '2025-10-12T10:00:00.000Z';
+
+      // 预设的便签示例数据 - 仅保留一条关于应用功能介绍和示例的便签
+      const mockNotes = [
+        {
+          id: '1',
+          title: '欢迎使用锤子便签',
+          content: '<p>这是一个功能强大的便签应用，您可以在这里记录您的想法、待办事项等。</p><br><h2>功能介绍</h2><p>1. 创建和编辑便签<br>2. 为便签加星和置顶<br>3. 将便签分类到文件夹<br>4. 搜索便签内容<br>5. 回收站功能</p><br><h2>编辑器功能演示</h2><br><h2>标题格式</h2><p>点击标题按钮可创建居中的标题</p><br><h2>待办事项</h2><div class="todo-container"><div class="todo-icon"></div><div contenteditable="true" class="todo-content">这是一个待办事项</div></div><div class="todo-container"><div class="todo-icon completed"></div><div contenteditable="true" class="todo-content" style="color: var(--text-tertiary); text-decoration: line-through;">这是一个已完成的待办事项</div></div><br><h2>列表格式</h2><ul><li>无序列表项1</li><li>无序列表项2</li></ul><br><h2>文本格式</h2><p><strong>加粗文本</strong></p><br><h2>引用格式</h2><div class="quote-container"><div class="quote-icon"></div><div class="quote-content">这是一段引用文本<br>可以用来引用他人的话语</div></div><br><h2>图片</h2><p>点击图片按钮可以插入图片，长按图片可以拖拽排序</p>',
+          createdAt: fixedCurrentDate,
+          updatedAt: fixedCurrentDate,
+          folderId: null,
+          isStarred: true,      // 加星便签
+          isTop: true,          // 置顶便签
+          hasImage: true,       // 包含图片
+          isDeleted: false,     // 未删除
+          deletedAt: null,
+        }
+      ]
+
+      // Mock folders - 使用固定的日期值
+      // 预设的文件夹示例数据
+      const mockFolders = [
+        {
+          id: 'folder1',
+          name: '工作',
+          createdAt: '2025-10-12T10:00:00.000Z',
+        },
+        {
+          id: 'folder2',
+          name: '个人',
+          createdAt: '2025-10-12T10:00:00.000Z',
+        },
+        {
+          id: 'folder3',
+          name: '学习',
+          createdAt: '2025-10-12T10:00:00.000Z',
+        },
+      ]
+
+      // Mock settings
+      // 预设的设置示例数据
+      const mockSettings = {
+        cloudSync: false,   // 云同步关闭
+        darkMode: false,    // 深色模式关闭
+      }
+
+      // 更新store状态
+      this.notes = mockNotes
+      this.folders = mockFolders
+      this.settings = mockSettings
+
+      // 保存到Storage
+      await storage.saveNotes(mockNotes)
+      await storage.saveFolders(mockFolders)
+      await storage.saveSettings(mockSettings)
+    },
+
+    /**
+     * 保存便签数据到Storage
+     * @returns {Promise<void>}
+     */
+    async saveNotes() {
+      try {
+        await storage.saveNotes(this.notes)
+      } catch (error) {
+        console.error('Error saving notes:', error)
+      }
+    },
+
+    /**
+     * 保存文件夹数据到Storage
+     * @returns {Promise<void>}
+     */
+    async saveFolders() {
+      try {
+        await storage.saveFolders(this.folders)
+      } catch (error) {
+        console.error('Error saving folders:', error)
+      }
+    },
+
+    /**
+     * 保存设置数据到Storage
+     * @returns {Promise<void>}
+     */
+    async saveSettings() {
+      try {
+        await storage.saveSettings(this.settings)
+      } catch (error) {
+        console.error('Error saving settings:', error)
+      }
+    },
+
+    /**
+     * 便签操作函数
+     */
+
+    /**
+     * 添加新便签
+     * @param {Object} note - 便签对象
+     * @returns {Promise<Object>} 新创建的便签对象
+     */
+    async addNote(note) {
+      try {
+        const newNote = await storage.addNote(note)
+        this.notes.push(newNote)
+
+        return newNote
+      } catch (error) {
+        console.error('Error adding note:', error)
+        throw error
+      }
+    },
+
+    /**
+     * 更新便签
+     * @param {string} id - 便签ID
+     * @param {Object} updates - 要更新的属性对象
+     * @returns {Promise<Object>} 更新后的便签对象
+     */
+    async updateNote(id, updates) {
+      try {
+        const updatedNote = await storage.updateNote(id, updates)
+        if (updatedNote) {
+          const index = this.notes.findIndex(note => note.id === id)
+          if (index !== -1) {
+            this.notes[index] = updatedNote
+          }
+        }
+        return updatedNote
+      } catch (error) {
+        console.error('Error updating note:', error)
+        throw error
+      }
+    },
+
+    /**
+     * 删除便签
+     * @param {string} id - 要删除的便签ID
+     * @returns {Promise<boolean>} 删除成功返回true，失败返回false
+     */
+    async deleteNote(id) {
+      try {
+        const result = await storage.deleteNote(id)
+        if (result) {
+          this.notes = this.notes.filter(note => note.id !== id)
+        }
+        return result
+      } catch (error) {
+        console.error('Error deleting note:', error)
+        throw error
+      }
+    },
+
+    /**
+     * 将便签移至回收站
+     * 将便签标记为已删除状态，并记录删除时间
+     * @param {string} id - 便签ID
+     * @returns {Promise<Object>} 更新后的便签对象
+     */
+    async moveToTrash(id) {
+      try {
+        const updatedNote = await storage.updateNote(id, { isDeleted: true, deletedAt: getCurrentDateTime() })
+        if (updatedNote) {
+          const index = this.notes.findIndex(note => note.id === id)
+          if (index !== -1) {
+            this.notes[index] = updatedNote
+          }
+        }
+        return updatedNote
+      } catch (error) {
+        console.error('Error moving note to trash:', error)
+        throw error
+      }
+    },
+
+    /**
+     * 永久删除便签
+     * 从便签列表中彻底移除便签
+     * @param {string} id - 便签ID
+     * @returns {Promise<boolean>} 删除成功返回true，失败返回false
+     */
+    async permanentlyDeleteNote(id) {
+      try {
+        const result = await storage.deleteNote(id)
+        if (result) {
+          this.notes = this.notes.filter(note => note.id !== id)
+        }
+        return result
+      } catch (error) {
+        console.error('Error permanently deleting note:', error)
+        throw error
+      }
+    },
+
+    /**
+     * 文件夹操作函数
+     */
+
+    /**
+     * 添加新文件夹
+     * @param {Object} folder - 文件夹对象
+     * @returns {Promise<Object>} 新创建的文件夹对象
+     */
+    async addFolder(folder) {
+      try {
+        const newFolder = await storage.addFolder(folder)
+        this.folders.push(newFolder)
+        return newFolder
+      } catch (error) {
+        console.error('Error adding folder:', error)
+        throw error
+      }
+    },
+
+    /**
+     * 更新文件夹
+     * @param {string} id - 文件夹ID
+     * @param {Object} updates - 要更新的属性对象
+     * @returns {Promise<Object>} 更新后的文件夹对象
+     */
+    async updateFolder(id, updates) {
+      try {
+        const updatedFolder = await storage.updateFolder(id, updates)
+        if (updatedFolder) {
+          const index = this.folders.findIndex(folder => folder.id === id)
+          if (index !== -1) {
+            this.folders[index] = updatedFolder
+          }
+        }
+        return updatedFolder
+      } catch (error) {
+        console.error('Error updating folder:', error)
+        throw error
+      }
+    },
+
+    /**
+     * 删除文件夹
+     * @param {string} id - 要删除的文件夹ID
+     * @returns {Promise<boolean>} 删除成功返回true，失败返回false
+     */
+    async deleteFolder(id) {
+      try {
+        const result = await storage.deleteFolder(id)
+        if (result) {
+          // 将文件夹中的便签移回"全部便签"
+          const notesInFolder = this.notes.filter(note => note.folderId === id)
+          for (const note of notesInFolder) {
+            await this.updateNote(note.id, { folderId: null })
+          }
+          
+          // 从文件夹列表中移除文件夹
+          this.folders = this.folders.filter(folder => folder.id !== id)
+        }
+        return result
+      } catch (error) {
+        console.error('Error deleting folder:', error)
+        throw error
+      }
+    },
+
+    /**
+     * 设置操作函数
+     */
+
+    /**
+     * 更新设置
+     * @param {Object} newSettings - 新的设置对象
+     * @returns {Promise<void>}
+     */
+    async updateSettings(newSettings) {
+      try {
+        const updatedSettings = { ...this.settings, ...newSettings }
+        this.settings = updatedSettings
+        await storage.saveSettings(updatedSettings)
+      } catch (error) {
+        console.error('Error updating settings:', error)
+        throw error
+      }
+    },
+
+    /**
+     * 切换云同步设置
+     * 开启或关闭云同步功能
+     * @returns {Promise<void>}
+     */
+    async toggleCloudSync() {
+      await this.updateSettings({ cloudSync: !this.settings.cloudSync })
+    },
+
+    /**
+     * 切换深色模式设置
+     * 开启或关闭深色模式
+     * @returns {Promise<void>}
+     */
+    async toggleDarkMode() {
+      await this.updateSettings({ darkMode: !this.settings.darkMode })
+    },
+  },
+})
diff --git a/src/utils/indexedDBStorage.js b/src/utils/indexedDBStorage.js
index 2c6179c..954c82d 100644
--- a/src/utils/indexedDBStorage.js
+++ b/src/utils/indexedDBStorage.js
@@ -1,475 +1,510 @@
-import { getCurrentDateTime, getTimestamp } from './dateUtils'
-
-// 数据库配置
-const DB_NAME = 'SmartisanNoteDB'
-const DB_VERSION = 2 // 更新版本号以确保数据库重新创建
-const NOTES_STORE = 'notes'
-const FOLDERS_STORE = 'folders'
-const SETTINGS_STORE = 'settings'
-
-let db = null
-
-/**
- * 打开数据库连接
- * @returns {Promise<IDBDatabase>} 数据库实例
- */
-const openDB = () => {
-  return new Promise((resolve, reject) => {
-    if (db) {
-      return resolve(db)
-    }
-
-    const request = indexedDB.open(DB_NAME, DB_VERSION)
-
-    request.onerror = () => {
-      reject(new Error('无法打开数据库'))
-    }
-
-    request.onsuccess = () => {
-      db = request.result
-      resolve(db)
-    }
-
-    request.onupgradeneeded = (event) => {
-      const database = event.target.result
-
-      // 删除现有的对象存储（如果版本已更改）
-      if (event.oldVersion > 0) {
-        if (database.objectStoreNames.contains(NOTES_STORE)) {
-          database.deleteObjectStore(NOTES_STORE)
-        }
-        if (database.objectStoreNames.contains(FOLDERS_STORE)) {
-          database.deleteObjectStore(FOLDERS_STORE)
-        }
-        if (database.objectStoreNames.contains(SETTINGS_STORE)) {
-          database.deleteObjectStore(SETTINGS_STORE)
-        }
-      }
-
-      // 创建便签存储对象
-      const notesStore = database.createObjectStore(NOTES_STORE, { keyPath: 'id' })
-      notesStore.createIndex('folderId', 'folderId', { unique: false })
-      notesStore.createIndex('isStarred', 'isStarred', { unique: false })
-      notesStore.createIndex('isDeleted', 'isDeleted', { unique: false })
-      notesStore.createIndex('createdAt', 'createdAt', { unique: false })
-      notesStore.createIndex('updatedAt', 'updatedAt', { unique: false })
-
-      // 创建文件夹存储对象
-      database.createObjectStore(FOLDERS_STORE, { keyPath: 'id' })
-
-      // 创建设置存储对象
-      database.createObjectStore(SETTINGS_STORE)
-    }
-  })
-}
-
-/**
- * 从存储中获取数据
- * @param {string} storeName - 存储名称
- * @returns {Promise<Array>} 数据数组
- */
-const getAllFromStore = async (storeName) => {
-  const database = await openDB()
-  const transaction = database.transaction([storeName], 'readonly')
-  const store = transaction.objectStore(storeName)
-  const request = store.getAll()
-
-  return new Promise((resolve, reject) => {
-    request.onsuccess = () => {
-      resolve(request.result || [])
-    }
-
-    request.onerror = () => {
-      reject(new Error(`获取 ${storeName} 数据失败`))
-    }
-  })
-}
-
-/**
- * 保存数据到存储
- * @param {string} storeName - 存储名称
- * @param {Array} data - 要保存的数据数组
- * @returns {Promise<void>}
- */
-const saveToStore = async (storeName, data) => {
-  const database = await openDB()
-  const transaction = database.transaction([storeName], 'readwrite')
-  const store = transaction.objectStore(storeName)
-
-  // 清除现有数据
-  await new Promise((resolve, reject) => {
-    const clearRequest = store.clear()
-    clearRequest.onsuccess = () => resolve()
-    clearRequest.onerror = () => reject(new Error(`清除 ${storeName} 数据失败`))
-  })
-
-  // 添加新数据
-  for (const item of data) {
-    await new Promise((resolve, reject) => {
-      const addRequest = store.add(item)
-      addRequest.onsuccess = () => resolve()
-      addRequest.onerror = () => reject(new Error(`保存 ${storeName} 数据失败`))
-    })
-  }
-}
-
-/**
- * 从存储中获取单个项
- * @param {string} storeName - 存储名称
- * @param {string} id - 项的ID
- * @returns {Promise<Object|null>} 项对象或null
- */
-const getFromStore = async (storeName, id) => {
-  const database = await openDB()
-  const transaction = database.transaction([storeName], 'readonly')
-  const store = transaction.objectStore(storeName)
-  const request = store.get(id)
-
-  return new Promise((resolve, reject) => {
-    request.onsuccess = () => {
-      resolve(request.result || null)
-    }
-
-    request.onerror = () => {
-      reject(new Error(`获取 ${storeName} 项失败`))
-    }
-  })
-}
-
-/**
- * 向存储中添加项
- * @param {string} storeName - 存储名称
- * @param {Object} item - 要添加的项
- * @returns {Promise<Object>} 添加的项
- */
-const addToStore = async (storeName, item) => {
-  const database = await openDB()
-  const transaction = database.transaction([storeName], 'readwrite')
-  const store = transaction.objectStore(storeName)
-  const request = store.add(item)
-
-  return new Promise((resolve, reject) => {
-    request.onsuccess = () => {
-      resolve(item)
-    }
-
-    request.onerror = () => {
-      reject(new Error(`添加 ${storeName} 项失败`))
-    }
-  })
-}
-
-/**
- * 更新存储中的项
- * @param {string} storeName - 存储名称
- * @param {string} id - 项的ID
- * @param {Object} updates - 要更新的属性对象
- * @returns {Promise<Object|null>} 更新后的项或null
- */
-const updateInStore = async (storeName, id, updates) => {
-  const item = await getFromStore(storeName, id)
-  if (!item) return null
-
-  const updatedItem = { ...item, ...updates }
-  const database = await openDB()
-  const transaction = database.transaction([storeName], 'readwrite')
-  const store = transaction.objectStore(storeName)
-  const request = store.put(updatedItem)
-
-  return new Promise((resolve, reject) => {
-    request.onsuccess = () => {
-      resolve(updatedItem)
-    }
-
-    request.onerror = () => {
-      reject(new Error(`更新 ${storeName} 项失败`))
-    }
-  })
-}
-
-/**
- * 从存储中删除项
- * @param {string} storeName - 存储名称
- * @param {string} id - 要删除的项的ID
- * @returns {Promise<boolean>} 删除成功返回true，失败返回false
- */
-const deleteFromStore = async (storeName, id) => {
-  const database = await openDB()
-  const transaction = database.transaction([storeName], 'readwrite')
-  const store = transaction.objectStore(storeName)
-  const request = store.delete(id)
-
-  return new Promise((resolve, reject) => {
-    request.onsuccess = () => {
-      resolve(true)
-    }
-
-    request.onerror = () => {
-      reject(new Error(`删除 ${storeName} 项失败`))
-    }
-  })
-}
-
-// 便签操作函数
-// 提供便签的增删改查功能
-
-/**
- * 获取所有便签数据
- * 从IndexedDB中读取便签数据
- * @returns {Promise<Array>} 便签数组
- */
-export const getNotes = async () => {
-  try {
-    const notes = await getAllFromStore(NOTES_STORE)
-    return ensureNotesDefaults(notes)
-  } catch (error) {
-    console.error('Error getting notes:', error)
-    return []
-  }
-}
-
-/**
- * 保存便签数据
- * 将便签数组保存到IndexedDB
- * @param {Array} notes - 便签数组
- * @returns {Promise<void>}
- */
-export const saveNotes = async (notes) => {
-  try {
-    await saveToStore(NOTES_STORE, notes)
-  } catch (error) {
-    console.error('Error saving notes:', error)
-  }
-}
-
-/**
- * 添加新便签
- * 创建一个新的便签对象并添加到便签列表中
- * @param {Object} note - 便签对象，包含便签内容和其他属性
- * @returns {Promise<Object>} 新创建的便签对象
- */
-export const addNote = async (note) => {
-  try {
-    // 创建新的便签对象，添加必要的属性
-    const newNote = {
-      title: note.title || '',
-      content: note.content || '',
-      id: note.id || getTimestamp().toString(), // 使用时间戳生成唯一ID
-      createdAt: note.createdAt || getCurrentDateTime(), // 创建时间
-      updatedAt: note.updatedAt || getCurrentDateTime(), // 更新时间
-      isStarred: note.isStarred || false, // 是否加星
-      isTop: note.isTop || false, // 是否置顶
-      hasImage: note.hasImage || false, // 是否包含图片
-      isDeleted: note.isDeleted || false, // 是否已删除
-      deletedAt: note.deletedAt || null, // 删除时间
-      folderId: note.folderId || null, // 文件夹ID
-      ...note
-    }
-
-    // 添加到存储
-    await addToStore(NOTES_STORE, newNote)
-    return newNote
-  } catch (error) {
-    console.error('Error adding note:', error)
-    throw error
-  }
-}
-
-/**
- * 更新便签
- * 根据ID查找并更新便签信息
- * @param {string} id - 便签ID
- * @param {Object} updates - 要更新的属性对象
- * @returns {Promise<Object|null>} 更新后的便签对象，如果未找到则返回null
- */
-export const updateNote = async (id, updates) => {
-  try {
-    // 更新便签并保存
-    const updatedNote = await updateInStore(NOTES_STORE, id, {
-      ...updates,
-      updatedAt: getCurrentDateTime() // 更新最后修改时间
-    })
-
-    return updatedNote
-  } catch (error) {
-    console.error('Error updating note:', error)
-    throw error
-  }
-}
-
-/**
- * 删除便签
- * 根据ID从便签列表中移除便签
- * @param {string} id - 要删除的便签ID
- * @returns {Promise<boolean>} 删除成功返回true，未找到便签返回false
- */
-export const deleteNote = async (id) => {
-  try {
-    // 从存储中删除
-    const result = await deleteFromStore(NOTES_STORE, id)
-    return result
-  } catch (error) {
-    console.error('Error deleting note:', error)
-    return false
-  }
-}
-
-// 文件夹操作函数
-// 提供文件夹的增删改查功能
-
-/**
- * 获取所有文件夹数据
- * 从IndexedDB中读取文件夹数据
- * @returns {Promise<Array>} 文件夹数组
- */
-export const getFolders = async () => {
-  try {
-    const folders = await getAllFromStore(FOLDERS_STORE)
-    return ensureFoldersDefaults(folders)
-  } catch (error) {
-    console.error('Error getting folders:', error)
-    return []
-  }
-}
-
-/**
- * 保存文件夹数据
- * 将文件夹数组保存到IndexedDB
- * @param {Array} folders - 文件夹数组
- * @returns {Promise<void>}
- */
-export const saveFolders = async (folders) => {
-  try {
-    await saveToStore(FOLDERS_STORE, folders)
-  } catch (error) {
-    console.error('Error saving folders:', error)
-  }
-}
-
-/**
- * 添加新文件夹
- * 创建一个新的文件夹对象并添加到文件夹列表中
- * @param {Object} folder - 文件夹对象，包含文件夹名称等属性
- * @returns {Promise<Object>} 新创建的文件夹对象
- */
-export const addFolder = async (folder) => {
-  try {
-    // 创建新的文件夹对象，添加必要的属性
-    const newFolder = {
-      name: folder.name || '',
-      id: folder.id || getTimestamp().toString(), // 使用时间戳生成唯一ID
-      createdAt: folder.createdAt || getCurrentDateTime(), // 创建时间
-      ...folder
-    }
-
-    // 添加到存储
-    await addToStore(FOLDERS_STORE, newFolder)
-    return newFolder
-  } catch (error) {
-    console.error('Error adding folder:', error)
-    throw error
-  }
-}
-
-// 设置操作函数
-// 提供应用设置的读取和保存功能
-
-/**
- * 获取应用设置
- * 从IndexedDB中读取设置数据
- * @returns {Promise<Object>} 设置对象，如果读取失败则返回默认设置
- */
-export const getSettings = async () => {
-  try {
-    const database = await openDB()
-    const transaction = database.transaction([SETTINGS_STORE], 'readonly')
-    const store = transaction.objectStore(SETTINGS_STORE)
-    const request = store.get('settings')
-
-    const settings = await new Promise((resolve, reject) => {
-      request.onsuccess = () => {
-        resolve(request.result || { cloudSync: false, darkMode: false })
-      }
-
-      request.onerror = () => {
-        reject(new Error('获取设置失败'))
-      }
-    })
-
-    return settings
-  } catch (error) {
-    console.error('Error getting settings:', error)
-    // 出错时返回默认设置
-    return { cloudSync: false, darkMode: false }
-  }
-}
-
-/**
- * 保存应用设置
- * 将设置对象保存到IndexedDB
- * @param {Object} settings - 设置对象
- * @returns {Promise<void>}
- */
-export const saveSettings = async (settings) => {
-  try {
-    const database = await openDB()
-    const transaction = database.transaction([SETTINGS_STORE], 'readwrite')
-    const store = transaction.objectStore(SETTINGS_STORE)
-    const request = store.put(settings, 'settings')
-
-    await new Promise((resolve, reject) => {
-      request.onsuccess = () => resolve()
-      request.onerror = () => reject(new Error('保存设置失败'))
-    })
-  } catch (error) {
-    console.error('Error saving settings:', error)
-  }
-}
-
-/**
- * 确保数据有默认值
- * @param {Array} notes - 便签数组
- * @returns {Array} 处理后的便签数组
- */
-const ensureNotesDefaults = (notes) => {
-  return notes.map(note => ({
-    title: note.title || '',
-    content: note.content || '',
-    id: note.id,
-    createdAt: note.createdAt,
-    updatedAt: note.updatedAt,
-    isStarred: note.isStarred || false,
-    isTop: note.isTop || false,
-    hasImage: note.hasImage || false,
-    isDeleted: note.isDeleted || false,
-    deletedAt: note.deletedAt || null,
-    folderId: note.folderId || null,
-    ...note
-  }))
-}
-
-/**
- * 确保文件夹数据有默认值
- * @param {Array} folders - 文件夹数组
- * @returns {Array} 处理后的文件夹数组
- */
-const ensureFoldersDefaults = (folders) => {
-  return folders.map(folder => ({
-    name: folder.name || '',
-    id: folder.id,
-    createdAt: folder.createdAt,
-    ...folder
-  }))
-}
-
-/**
- * 初始化数据库
- * @returns {Promise<void>}
- */
-export const initDB = async () => {
-  try {
-    await openDB()
-  } catch (error) {
-    console.error('Error initializing database:', error)
-  }
+import { getCurrentDateTime, getTimestamp } from './dateUtils'
+
+// 数据库配置
+const DB_NAME = 'SmartisanNoteDB'
+const DB_VERSION = 2 // 更新版本号以确保数据库重新创建
+const NOTES_STORE = 'notes'
+const FOLDERS_STORE = 'folders'
+const SETTINGS_STORE = 'settings'
+
+let db = null
+
+/**
+ * 打开数据库连接
+ * @returns {Promise<IDBDatabase>} 数据库实例
+ */
+const openDB = () => {
+  return new Promise((resolve, reject) => {
+    if (db) {
+      return resolve(db)
+    }
+
+    const request = indexedDB.open(DB_NAME, DB_VERSION)
+
+    request.onerror = () => {
+      reject(new Error('无法打开数据库'))
+    }
+
+    request.onsuccess = () => {
+      db = request.result
+      resolve(db)
+    }
+
+    request.onupgradeneeded = (event) => {
+      const database = event.target.result
+
+      // 删除现有的对象存储（如果版本已更改）
+      if (event.oldVersion > 0) {
+        if (database.objectStoreNames.contains(NOTES_STORE)) {
+          database.deleteObjectStore(NOTES_STORE)
+        }
+        if (database.objectStoreNames.contains(FOLDERS_STORE)) {
+          database.deleteObjectStore(FOLDERS_STORE)
+        }
+        if (database.objectStoreNames.contains(SETTINGS_STORE)) {
+          database.deleteObjectStore(SETTINGS_STORE)
+        }
+      }
+
+      // 创建便签存储对象
+      const notesStore = database.createObjectStore(NOTES_STORE, { keyPath: 'id' })
+      notesStore.createIndex('folderId', 'folderId', { unique: false })
+      notesStore.createIndex('isStarred', 'isStarred', { unique: false })
+      notesStore.createIndex('isDeleted', 'isDeleted', { unique: false })
+      notesStore.createIndex('createdAt', 'createdAt', { unique: false })
+      notesStore.createIndex('updatedAt', 'updatedAt', { unique: false })
+
+      // 创建文件夹存储对象
+      database.createObjectStore(FOLDERS_STORE, { keyPath: 'id' })
+
+      // 创建设置存储对象
+      database.createObjectStore(SETTINGS_STORE)
+    }
+  })
+}
+
+/**
+ * 从存储中获取数据
+ * @param {string} storeName - 存储名称
+ * @returns {Promise<Array>} 数据数组
+ */
+const getAllFromStore = async (storeName) => {
+  const database = await openDB()
+  const transaction = database.transaction([storeName], 'readonly')
+  const store = transaction.objectStore(storeName)
+  const request = store.getAll()
+
+  return new Promise((resolve, reject) => {
+    request.onsuccess = () => {
+      resolve(request.result || [])
+    }
+
+    request.onerror = () => {
+      reject(new Error(`获取 ${storeName} 数据失败`))
+    }
+  })
+}
+
+/**
+ * 保存数据到存储
+ * @param {string} storeName - 存储名称
+ * @param {Array} data - 要保存的数据数组
+ * @returns {Promise<void>}
+ */
+const saveToStore = async (storeName, data) => {
+  const database = await openDB()
+  const transaction = database.transaction([storeName], 'readwrite')
+  const store = transaction.objectStore(storeName)
+
+  // 清除现有数据
+  await new Promise((resolve, reject) => {
+    const clearRequest = store.clear()
+    clearRequest.onsuccess = () => resolve()
+    clearRequest.onerror = () => reject(new Error(`清除 ${storeName} 数据失败`))
+  })
+
+  // 添加新数据
+  for (const item of data) {
+    await new Promise((resolve, reject) => {
+      const addRequest = store.add(item)
+      addRequest.onsuccess = () => resolve()
+      addRequest.onerror = () => reject(new Error(`保存 ${storeName} 数据失败`))
+    })
+  }
+}
+
+/**
+ * 从存储中获取单个项
+ * @param {string} storeName - 存储名称
+ * @param {string} id - 项的ID
+ * @returns {Promise<Object|null>} 项对象或null
+ */
+const getFromStore = async (storeName, id) => {
+  const database = await openDB()
+  const transaction = database.transaction([storeName], 'readonly')
+  const store = transaction.objectStore(storeName)
+  const request = store.get(id)
+
+  return new Promise((resolve, reject) => {
+    request.onsuccess = () => {
+      resolve(request.result || null)
+    }
+
+    request.onerror = () => {
+      reject(new Error(`获取 ${storeName} 项失败`))
+    }
+  })
+}
+
+/**
+ * 向存储中添加项
+ * @param {string} storeName - 存储名称
+ * @param {Object} item - 要添加的项
+ * @returns {Promise<Object>} 添加的项
+ */
+const addToStore = async (storeName, item) => {
+  const database = await openDB()
+  const transaction = database.transaction([storeName], 'readwrite')
+  const store = transaction.objectStore(storeName)
+  const request = store.add(item)
+
+  return new Promise((resolve, reject) => {
+    request.onsuccess = () => {
+      resolve(item)
+    }
+
+    request.onerror = () => {
+      reject(new Error(`添加 ${storeName} 项失败`))
+    }
+  })
+}
+
+/**
+ * 更新存储中的项
+ * @param {string} storeName - 存储名称
+ * @param {string} id - 项的ID
+ * @param {Object} updates - 要更新的属性对象
+ * @returns {Promise<Object|null>} 更新后的项或null
+ */
+const updateInStore = async (storeName, id, updates) => {
+  const item = await getFromStore(storeName, id)
+  if (!item) return null
+
+  const updatedItem = { ...item, ...updates }
+  const database = await openDB()
+  const transaction = database.transaction([storeName], 'readwrite')
+  const store = transaction.objectStore(storeName)
+  const request = store.put(updatedItem)
+
+  return new Promise((resolve, reject) => {
+    request.onsuccess = () => {
+      resolve(updatedItem)
+    }
+
+    request.onerror = () => {
+      reject(new Error(`更新 ${storeName} 项失败`))
+    }
+  })
+}
+
+/**
+ * 从存储中删除项
+ * @param {string} storeName - 存储名称
+ * @param {string} id - 要删除的项的ID
+ * @returns {Promise<boolean>} 删除成功返回true，失败返回false
+ */
+const deleteFromStore = async (storeName, id) => {
+  const database = await openDB()
+  const transaction = database.transaction([storeName], 'readwrite')
+  const store = transaction.objectStore(storeName)
+  const request = store.delete(id)
+
+  return new Promise((resolve, reject) => {
+    request.onsuccess = () => {
+      resolve(true)
+    }
+
+    request.onerror = () => {
+      reject(new Error(`删除 ${storeName} 项失败`))
+    }
+  })
+}
+
+// 便签操作函数
+// 提供便签的增删改查功能
+
+/**
+ * 获取所有便签数据
+ * 从IndexedDB中读取便签数据
+ * @returns {Promise<Array>} 便签数组
+ */
+export const getNotes = async () => {
+  try {
+    const notes = await getAllFromStore(NOTES_STORE)
+    return ensureNotesDefaults(notes)
+  } catch (error) {
+    console.error('Error getting notes:', error)
+    return []
+  }
+}
+
+/**
+ * 保存便签数据
+ * 将便签数组保存到IndexedDB
+ * @param {Array} notes - 便签数组
+ * @returns {Promise<void>}
+ */
+export const saveNotes = async (notes) => {
+  try {
+    await saveToStore(NOTES_STORE, notes)
+  } catch (error) {
+    console.error('Error saving notes:', error)
+  }
+}
+
+/**
+ * 添加新便签
+ * 创建一个新的便签对象并添加到便签列表中
+ * @param {Object} note - 便签对象，包含便签内容和其他属性
+ * @returns {Promise<Object>} 新创建的便签对象
+ */
+export const addNote = async (note) => {
+  try {
+    // 创建新的便签对象，添加必要的属性
+    const newNote = {
+      title: note.title || '',
+      content: note.content || '',
+      id: note.id || getTimestamp().toString(), // 使用时间戳生成唯一ID
+      createdAt: note.createdAt || getCurrentDateTime(), // 创建时间
+      updatedAt: note.updatedAt || getCurrentDateTime(), // 更新时间
+      isStarred: note.isStarred || false, // 是否加星
+      isTop: note.isTop || false, // 是否置顶
+      hasImage: note.hasImage || false, // 是否包含图片
+      isDeleted: note.isDeleted || false, // 是否已删除
+      deletedAt: note.deletedAt || null, // 删除时间
+      folderId: note.folderId || null, // 文件夹ID
+      ...note
+    }
+
+    // 添加到存储
+    await addToStore(NOTES_STORE, newNote)
+    return newNote
+  } catch (error) {
+    console.error('Error adding note:', error)
+    throw error
+  }
+}
+
+/**
+ * 更新便签
+ * 根据ID查找并更新便签信息
+ * @param {string} id - 便签ID
+ * @param {Object} updates - 要更新的属性对象
+ * @returns {Promise<Object|null>} 更新后的便签对象，如果未找到则返回null
+ */
+export const updateNote = async (id, updates) => {
+  try {
+    // 更新便签并保存
+    const updatedNote = await updateInStore(NOTES_STORE, id, {
+      ...updates,
+      updatedAt: getCurrentDateTime() // 更新最后修改时间
+    })
+
+    return updatedNote
+  } catch (error) {
+    console.error('Error updating note:', error)
+    throw error
+  }
+}
+
+/**
+ * 删除便签
+ * 根据ID从便签列表中移除便签
+ * @param {string} id - 要删除的便签ID
+ * @returns {Promise<boolean>} 删除成功返回true，未找到便签返回false
+ */
+export const deleteNote = async (id) => {
+  try {
+    // 从存储中删除
+    const result = await deleteFromStore(NOTES_STORE, id)
+    return result
+  } catch (error) {
+    console.error('Error deleting note:', error)
+    return false
+  }
+}
+
+// 文件夹操作函数
+// 提供文件夹的增删改查功能
+
+/**
+ * 获取所有文件夹数据
+ * 从IndexedDB中读取文件夹数据
+ * @returns {Promise<Array>} 文件夹数组
+ */
+export const getFolders = async () => {
+  try {
+    const folders = await getAllFromStore(FOLDERS_STORE)
+    return ensureFoldersDefaults(folders)
+  } catch (error) {
+    console.error('Error getting folders:', error)
+    return []
+  }
+}
+
+/**
+ * 保存文件夹数据
+ * 将文件夹数组保存到IndexedDB
+ * @param {Array} folders - 文件夹数组
+ * @returns {Promise<void>}
+ */
+export const saveFolders = async (folders) => {
+  try {
+    await saveToStore(FOLDERS_STORE, folders)
+  } catch (error) {
+    console.error('Error saving folders:', error)
+  }
+}
+
+/**
+ * 添加新文件夹
+ * 创建一个新的文件夹对象并添加到文件夹列表中
+ * @param {Object} folder - 文件夹对象，包含文件夹名称等属性
+ * @returns {Promise<Object>} 新创建的文件夹对象
+ */
+export const addFolder = async (folder) => {
+  try {
+    // 创建新的文件夹对象，添加必要的属性
+    const newFolder = {
+      name: folder.name || '',
+      id: folder.id || getTimestamp().toString(), // 使用时间戳生成唯一ID
+      createdAt: folder.createdAt || getCurrentDateTime(), // 创建时间
+      ...folder
+    }
+
+    // 添加到存储
+    await addToStore(FOLDERS_STORE, newFolder)
+    return newFolder
+  } catch (error) {
+    console.error('Error adding folder:', error)
+    throw error
+  }
+}
+
+/**
+ * 更新文件夹
+ * 根据ID查找并更新文件夹信息
+ * @param {string} id - 文件夹ID
+ * @param {Object} updates - 要更新的属性对象
+ * @returns {Promise<Object|null>} 更新后的文件夹对象，如果未找到则返回null
+ */
+export const updateFolder = async (id, updates) => {
+  try {
+    // 更新文件夹并保存
+    const updatedFolder = await updateInStore(FOLDERS_STORE, id, updates)
+    return updatedFolder
+  } catch (error) {
+    console.error('Error updating folder:', error)
+    throw error
+  }
+}
+
+/**
+ * 删除文件夹
+ * 根据ID从文件夹列表中移除文件夹
+ * @param {string} id - 要删除的文件夹ID
+ * @returns {Promise<boolean>} 删除成功返回true，未找到文件夹返回false
+ */
+export const deleteFolder = async (id) => {
+  try {
+    // 从存储中删除
+    const result = await deleteFromStore(FOLDERS_STORE, id)
+    return result
+  } catch (error) {
+    console.error('Error deleting folder:', error)
+    return false
+  }
+}
+
+// 设置操作函数
+// 提供应用设置的读取和保存功能
+
+/**
+ * 获取应用设置
+ * 从IndexedDB中读取设置数据
+ * @returns {Promise<Object>} 设置对象，如果读取失败则返回默认设置
+ */
+export const getSettings = async () => {
+  try {
+    const database = await openDB()
+    const transaction = database.transaction([SETTINGS_STORE], 'readonly')
+    const store = transaction.objectStore(SETTINGS_STORE)
+    const request = store.get('settings')
+
+    const settings = await new Promise((resolve, reject) => {
+      request.onsuccess = () => {
+        resolve(request.result || { cloudSync: false, darkMode: false })
+      }
+
+      request.onerror = () => {
+        reject(new Error('获取设置失败'))
+      }
+    })
+
+    return settings
+  } catch (error) {
+    console.error('Error getting settings:', error)
+    // 出错时返回默认设置
+    return { cloudSync: false, darkMode: false }
+  }
+}
+
+/**
+ * 保存应用设置
+ * 将设置对象保存到IndexedDB
+ * @param {Object} settings - 设置对象
+ * @returns {Promise<void>}
+ */
+export const saveSettings = async (settings) => {
+  try {
+    const database = await openDB()
+    const transaction = database.transaction([SETTINGS_STORE], 'readwrite')
+    const store = transaction.objectStore(SETTINGS_STORE)
+    const request = store.put(settings, 'settings')
+
+    await new Promise((resolve, reject) => {
+      request.onsuccess = () => resolve()
+      request.onerror = () => reject(new Error('保存设置失败'))
+    })
+  } catch (error) {
+    console.error('Error saving settings:', error)
+  }
+}
+
+/**
+ * 确保数据有默认值
+ * @param {Array} notes - 便签数组
+ * @returns {Array} 处理后的便签数组
+ */
+const ensureNotesDefaults = (notes) => {
+  return notes.map(note => ({
+    title: note.title || '',
+    content: note.content || '',
+    id: note.id,
+    createdAt: note.createdAt,
+    updatedAt: note.updatedAt,
+    isStarred: note.isStarred || false,
+    isTop: note.isTop || false,
+    hasImage: note.hasImage || false,
+    isDeleted: note.isDeleted || false,
+    deletedAt: note.deletedAt || null,
+    folderId: note.folderId || null,
+    ...note
+  }))
+}
+
+/**
+ * 确保文件夹数据有默认值
+ * @param {Array} folders - 文件夹数组
+ * @returns {Array} 处理后的文件夹数组
+ */
+const ensureFoldersDefaults = (folders) => {
+  return folders.map(folder => ({
+    name: folder.name || '',
+    id: folder.id,
+    createdAt: folder.createdAt,
+    ...folder
+  }))
+}
+
+/**
+ * 初始化数据库
+ * @returns {Promise<void>}
+ */
+export const initDB = async () => {
+  try {
+    await openDB()
+  } catch (error) {
+    console.error('Error initializing database:', error)
+  }
 }
\ No newline at end of file

From 65a15341c986607b0dce0828237f524ef5eb4d95 Mon Sep 17 00:00:00 2001
From: yuantao <user@example.com>
Date: Fri, 24 Oct 2025 09:43:19 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20Modal=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E8=BE=93=E5=85=A5=E6=A1=86=E5=8A=9F=E8=83=BD=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=96=87=E6=9C=AC=E8=BE=93=E5=85=A5=E5=92=8C?=
 =?UTF-8?q?Promise=E8=BF=94=E5=9B=9E=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                       |   3 +
 package.json                     |   1 -
 src/App.vue                      |  19 +-
 src/components/ConfirmDialog.vue | 249 ---------------
 src/components/FolderManage.vue  |  83 -----
 src/components/Modal.vue         | 503 ++++++++++++++++++-------------
 src/pages/NoteListPage.vue       |   2 +-
 7 files changed, 310 insertions(+), 550 deletions(-)
 delete mode 100644 src/components/ConfirmDialog.vue

diff --git a/index.html b/index.html
index aed3f33..94d37f6 100644
--- a/index.html
+++ b/index.html
@@ -88,6 +88,9 @@
         --white-60: #ffffff99; /* 60% white */
         --white-80: #ffffffcc; /* 80% white */
         --white-90: #ffffffe6; /* 90% white */
+
+        --confirmFontSize: 0.8rem;
+        --confirmBg: rgba(0, 0, 0, 0.15);
       }
 
       body {
diff --git a/package.json b/package.json
index fbca4af..241562c 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "moment": "^2.30.1",
     "pinia": "^3.0.3",
     "vue": "^3.5.22",
-    "vue-draggable-plus": "^0.6.0",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 41b645b..4688d9e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,19 +13,19 @@
     </template>
 
     <!-- 设置页面 -->
-    <transition 
-      name="settings-slide"
-      v-show="isSettingsRoute" 
-      appear>
+    <transition name="settings-slide" v-show="isSettingsRoute" appear>
       <SettingsPage class="setting-page" />
     </transition>
+
+    <Modal ref="modalRef" showInput />
   </div>
 </template>
 
 <script setup>
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import '@/common/base.css'
+import Modal from '@/components/Modal.vue'
 
 // 导入页面组件
 import NoteListPage from './pages/NoteListPage.vue'
@@ -33,6 +33,7 @@ import SettingsPage from './pages/SettingsPage.vue'
 
 const route = useRoute()
 const transitionName = ref('slide-left')
+const modalRef = ref()
 
 // 计算是否为设置页面路由
 const isSettingsRoute = computed(() => {
@@ -53,15 +54,15 @@ watch(
       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'
@@ -72,8 +73,6 @@ watch(
     }
   }
 )
-
-// 无额外处理函数
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/ConfirmDialog.vue b/src/components/ConfirmDialog.vue
deleted file mode 100644
index d9c7fe9..0000000
--- a/src/components/ConfirmDialog.vue
+++ /dev/null
@@ -1,249 +0,0 @@
-<template>
-  <div v-if="visible" class="pd-mask" @click="handleMaskClick">
-    <div class="pd-confirm" @click.stop>
-      <div class="pd-blur"></div>
-      <div class="pd-plan"></div>
-      <h2 class="pd-title" v-if="title">{{ title }}</h2>
-      <p class="pd-message">{{ message }}</p>
-      <div class="pd-buttons">
-        <button v-if="showConfirm" class="pd-button pd-confirm-btn" @click="handleConfirm">
-          {{ confirmText }}
-        </button>
-        <button v-if="showCancel" class="pd-button pd-cancel" @click="handleCancel">
-          {{ cancelText }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch, onMounted, onUnmounted } from 'vue'
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  message: {
-    type: String,
-    default: '',
-  },
-  confirmText: {
-    type: String,
-    default: '确认',
-  },
-  cancelText: {
-    type: String,
-    default: '取消',
-  },
-  showConfirm: {
-    type: Boolean,
-    default: true,
-  },
-  showCancel: {
-    type: Boolean,
-    default: true,
-  },
-  maskClosable: {
-    type: Boolean,
-    default: true,
-  },
-})
-
-const emit = defineEmits(['confirm', 'cancel', 'update:visible'])
-const visible = defineModel('visible', { type: Boolean, default: false })
-
-// Promise 控制变量
-let resolvePromise, rejectPromise
-
-// 返回 Promise 的方法，模拟原生 confirm 行为
-const show = (options = {}) => {
-  // 更新 props 值
-  Object.assign(props, options)
-
-  // 显示对话框
-  visible.value = true
-  emit('update:visible', true)
-
-  // 返回 Promise
-  return new Promise((resolve, reject) => {
-    resolvePromise = resolve
-    rejectPromise = reject
-  })
-}
-
-const handleConfirm = () => {
-  emit('confirm')
-  visible.value = false
-  emit('update:visible', false)
-
-  // 解决 Promise
-  if (resolvePromise) {
-    resolvePromise()
-    resolvePromise = null
-    rejectPromise = null
-  }
-}
-
-const handleCancel = () => {
-  emit('cancel')
-  visible.value = false
-  emit('update:visible', false)
-
-  // 拒绝 Promise
-  if (rejectPromise) {
-    rejectPromise()
-    resolvePromise = null
-    rejectPromise = null
-  }
-}
-
-const handleMaskClick = () => {
-  if (props.maskClosable) {
-    handleCancel() // 点击遮罩相当于取消
-  }
-}
-
-// 添加/移除 body 滚动锁定
-const lockBodyScroll = () => {
-  document.body.style.overflow = 'hidden'
-}
-
-const unlockBodyScroll = () => {
-  document.body.style.overflow = ''
-}
-
-onMounted(() => {
-  if (visible.value) {
-    lockBodyScroll()
-  }
-})
-
-onUnmounted(() => {
-  unlockBodyScroll()
-})
-
-// 监听 visible 变化
-watch(visible, newVal => {
-  if (newVal) {
-    lockBodyScroll()
-  } else {
-    unlockBodyScroll()
-  }
-})
-
-// 暴露 show 方法给父组件使用
-defineExpose({
-  show,
-})
-</script>
-
-<style scoped>
-.pd-mask {
-  position: fixed;
-  inset: 0;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 999999999;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: inherit;
-  background: var(--confirmBg, inherit);
-}
-
-.pd-confirm {
-  background: inherit;
-  background: var(--confirmTheme, #fff);
-  text-align: center;
-  color: var(--confirmColor, #636363);
-  font-size: var(--confirmFontSize, 1rem);
-  max-width: 75vw;
-  min-width: 20em;
-  box-shadow: 0px 35px 35px -10px rgba(0, 0, 0, 0.33);
-  border-radius: 10px;
-  position: relative;
-  white-space: break-spaces;
-  word-break: break-all;
-  overflow: hidden;
-}
-
-.pd-blur,
-.pd-plan {
-  position: absolute;
-  inset: 0;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.pd-plan {
-  background: inherit;
-  background: rgba(255, 255, 255, 0.66);
-  filter: blur(10px) saturate(2);
-}
-
-.pd-title {
-  position: relative;
-  font-size: 1.3em;
-  min-height: 1em;
-  background: var(--confirmBtnBg, #fafafa);
-  color: var(--confirmBtnColor, #636363);
-  margin: 0;
-  padding: 0.5em 0;
-}
-
-.pd-message {
-  position: relative;
-  border-top: 1px solid var(--confirmBtnBorder, #f1f1f1);
-  width: 100%;
-  max-height: 70vh;
-  border-bottom: 1px solid var(--confirmBtnBorder, #f1f1f1);
-  margin: 0 auto;
-  box-sizing: border-box;
-  padding: 2em 10%;
-  line-height: 1.4;
-  overflow: auto;
-}
-
-.pd-buttons {
-  display: flex;
-}
-
-.pd-button {
-  position: relative;
-  width: 100%;
-  font-size: 1em;
-  appearance: none;
-  background: var(--confirmBtnBg, #fafafa);
-  color: var(--confirmBtnColor, #636363);
-  border: none;
-  border-right: 1px solid var(--confirmBtnBorder, #f1f1f1);
-  padding: 1em 0;
-  cursor: pointer;
-  outline: none;
-}
-
-/* 当同时显示确认和取消按钮时，每个按钮占50%宽度 */
-.pd-button:first-child:nth-last-child(2),
-.pd-button:first-child:nth-last-child(2) ~ .pd-button {
-  width: 50%;
-}
-
-/* 当只显示一个按钮时，该按钮占100%宽度 */
-.pd-button:first-child:nth-last-child(1) {
-  width: 100%;
-  border-right: none;
-}
-
-/* 只有最后一个按钮没有右边框 */
-.pd-button:last-child {
-  border-right: none;
-}
-</style>
diff --git a/src/components/FolderManage.vue b/src/components/FolderManage.vue
index f9898fc..3e2877f 100644
--- a/src/components/FolderManage.vue
+++ b/src/components/FolderManage.vue
@@ -103,119 +103,79 @@
 
 <script setup>
 import { ref, computed, nextTick } from 'vue'
-
 import { useAppStore } from '../stores/useAppStore'
-
 import FolderItem from './FolderItem.vue'
 
 const store = useAppStore()
-
 const props = defineProps({
   allCount: {
     type: Number,
-
     default: 0,
   },
-
   starredCount: {
     type: Number,
-
     default: 0,
   },
-
   trashCount: {
     type: Number,
-
     default: 0,
   },
-
   archiveCount: {
     type: Number,
-
     default: 0,
   },
-
   selectedFolder: {
     type: String,
-
     default: '',
   },
-
   lastSyncTime: {
     type: String,
-
     default: '10/10上午9:28',
   },
-
   onAllClick: {
     type: Function,
-
     default: null,
   },
-
   onStarredClick: {
     type: Function,
-
     default: null,
   },
-
   onTrashClick: {
     type: Function,
-
     default: null,
   },
-
   onArchiveClick: {
     type: Function,
-
     default: null,
   },
-
   onAddFolder: {
     type: Function,
-
     default: null,
   },
-
   onFolderClick: {
     type: Function,
-
     default: null,
   },
 })
 
 // 添加文件夹相关状态
-
 const showAddFolderModal = ref(false)
-
 const newFolderName = ref('')
-
 const folderInput = ref(null)
-
 // 重命名文件夹相关状态
-
 const showRenameFolderModal = ref(false)
-
 const renameFolderId = ref(null)
-
 const renameFolderName = ref('')
-
 // 选择模式相关状态
-
 const isSelectionMode = ref(false)
-
 const selectedFolders = ref([])
-
 const showDeleteConfirmModal = ref(false)
-
 // 计算自定义文件夹（排除系统文件夹）
-
 const customFolders = computed(() => {
   return store.folders.filter(folder => !['all', 'starred', 'trash', 'archive'].includes(folder.id))
 })
 
 // 获取文件夹中的便签数量
-
 const getFolderNoteCount = folderId => {
   return store.notes.filter(note => note.folderId === folderId && !note.isDeleted).length
 }
@@ -224,28 +184,21 @@ const getFolderNoteCount = folderId => {
 
 const toggleSelectionMode = () => {
   isSelectionMode.value = !isSelectionMode.value
-
   // 退出选择模式时清空选中项
-
   if (!isSelectionMode.value) {
     selectedFolders.value = []
   }
 }
 
 // 切换文件夹选中状态
-
 const toggleFolderSelection = folderId => {
   if (!isSelectionMode.value) return
-
   const index = selectedFolders.value.indexOf(folderId)
-
   if (index > -1) {
     // 已选中，取消选中
-
     selectedFolders.value.splice(index, 1)
   } else {
     // 未选中，添加选中
-
     selectedFolders.value.push(folderId)
   }
 }
@@ -266,7 +219,6 @@ const handleFolderClick = folderId => {
 
 const handleDeleteSelectedFolders = () => {
   if (selectedFolders.value.length === 0) return
-
   showDeleteConfirmModal.value = true
 }
 
@@ -275,21 +227,15 @@ const handleDeleteSelectedFolders = () => {
 const confirmDeleteSelectedFolders = async () => {
   try {
     // 删除选中的文件夹
-
     for (const folderId of selectedFolders.value) {
       // 跳过系统文件夹
-
       if (['all', 'starred', 'trash', 'archive'].includes(folderId)) continue
-
       await store.deleteFolder(folderId)
     }
 
     // 清空选中项并退出选择模式
-
     selectedFolders.value = []
-
     isSelectionMode.value = false
-
     showDeleteConfirmModal.value = false
   } catch (error) {
     console.error('删除文件夹失败:', error)
@@ -300,11 +246,9 @@ const confirmDeleteSelectedFolders = async () => {
 
 const handleDeleteFolder = folderId => {
   // 阻止事件冒泡到父元素
-
   event.stopPropagation()
 
   // 确认删除
-
   if (confirm(`确定要删除文件夹 "${getFolderName(folderId)}" 吗？文件夹中的便签将移至"全部便签"。`)) {
     try {
       store.deleteFolder(folderId)
@@ -320,18 +264,13 @@ const handleEditFolder = folderId => {
   // 阻止事件冒泡到父元素
 
   event.stopPropagation()
-
   const folder = store.folders.find(f => f.id === folderId)
-
   if (folder) {
     renameFolderId.value = folderId
-
     renameFolderName.value = folder.name
-
     showRenameFolderModal.value = true
 
     // 在下次DOM更新后聚焦输入框
-
     nextTick(() => {
       if (folderInput.value) {
         folderInput.value.focus()
@@ -346,11 +285,8 @@ const confirmRenameFolder = async () => {
   if (renameFolderName.value.trim() && renameFolderId.value) {
     try {
       await store.updateFolder(renameFolderId.value, { name: renameFolderName.value.trim() })
-
       showRenameFolderModal.value = false
-
       renameFolderId.value = null
-
       renameFolderName.value = ''
     } catch (error) {
       console.error('重命名文件夹失败:', error)
@@ -362,7 +298,6 @@ const confirmRenameFolder = async () => {
 
 const getFolderName = folderId => {
   const folder = store.folders.find(f => f.id === folderId)
-
   return folder ? folder.name : ''
 }
 
@@ -396,27 +331,13 @@ const handleTrashClick = () => {
   }
 }
 
-const handleArchiveClick = () => {
-  if (isSelectionMode.value) {
-    toggleFolderSelection('archive')
-  } else {
-    if (props.onArchiveClick) {
-      props.onArchiveClick()
-    }
-  }
-}
-
 const handleAddFolder = event => {
   // 阻止事件冒泡到父元素
-
   event.stopPropagation()
-
   showAddFolderModal.value = true
-
   newFolderName.value = ''
 
   // 在下次DOM更新后聚焦输入框
-
   nextTick(() => {
     if (folderInput.value) {
       folderInput.value.focus()
@@ -429,16 +350,12 @@ const confirmAddFolder = async () => {
     try {
       const newFolder = {
         name: newFolderName.value.trim(),
-
         id: `folder_${Date.now()}`, // 生成唯一ID
-
         createdAt: new Date().toISOString(),
       }
 
       await store.addFolder(newFolder)
-
       showAddFolderModal.value = false
-
       newFolderName.value = ''
     } catch (error) {
       console.error('添加文件夹失败:', error)
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index bd6d6e5..5ee95b8 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,206 +1,297 @@
-<template>
-  <div class="code-fun-flex-col code-fun-justify-start">
-    <div class="code-fun-flex-col code-fun-justify-start group_1">
-      <div class="code-fun-flex-col code-fun-justify-start code-fun-items-end group">
-        <div class="code-fun-flex-col code-fun-justify-start code-fun-items-start code-fun-relative group_2">
-          <div class="code-fun-flex-col section_7">
-            <div class="code-fun-flex-col code-fun-justify-start section_1">
-              <div class="code-fun-flex-row section_11">
-                <div class="code-fun-flex-col code-fun-justify-start section_12" @click="handleCancel">
-                  <div class="code-fun-flex-col code-fun-justify-start code-fun-items-center text-wrapper_2">
-                    <span class="text_4">{{ cancelText }}</span>
-                  </div>
-                </div>
-                <div class="code-fun-flex-col code-fun-justify-start section_13 code-fun-ml-8" @click="handleConfirm">
-                  <div class="code-fun-flex-col code-fun-justify-start code-fun-items-center text-wrapper_3">
-                    <span class="text_5">{{ confirmText }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="code-fun-flex-col code-fun-justify-start code-fun-relative section_9">
-              <div class="code-fun-flex-col code-fun-justify-start section_10">
-                <div class="code-fun-flex-col code-fun-justify-start code-fun-items-start text-wrapper">
-                  <input 
-                    v-model="inputValue"
-                    class="text_3" 
-                    :placeholder="placeholder"
-                    @keyup.enter="handleConfirm"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="code-fun-flex-col section_8 pos">
-            <div class="code-fun-flex-col code-fun-justify-start code-fun-items-start code-fun-self-stretch group_3">
-              <span class="text_2">{{ title }}</span>
-            </div>
-            <div class="code-fun-self-start divider"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: '新建文件夹'
-  },
-  placeholder: {
-    type: String,
-    default: '新建文件夹'
-  },
-  confirmText: {
-    type: String,
-    default: '确定'
-  },
-  cancelText: {
-    type: String,
-    default: '取消'
-  }
-});
-
-const emit = defineEmits(['confirm', 'cancel']);
-
-const inputValue = ref('');
-
-const handleConfirm = () => {
-  emit('confirm', inputValue.value);
-};
-
-const handleCancel = () => {
-  emit('cancel');
-};
-</script>
-
-<style scoped lang="less">
-.group_1 {
-  padding-bottom: 1rem;
-  .group {
-    padding: 0.5rem 0 0.25rem;
-    .group_2 {
-      margin-right: 0.75rem;
-      width: 32.31rem;
-      .section_7 {
-        padding-top: 5.75rem;
-        background-color: #00000000;
-        width: 29.06rem;
-        height: 18.16rem;
-        background-image: url(https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/686f20ecd54496f19f54e801/68e862ab9520a30011f388ff/17600601480475170758.png);
-        background-repeat: no-repeat;
-        background-size: 100% auto;
-        background-position: 0% 0%;
-        .section_1 {
-          margin-top: 7.88rem;
-          background-color: #00000000;
-          .section_11 {
-            padding: 0.5rem 0.5rem 0.75rem;
-            background-color: #f4f4f7;
-            border-radius: 0rem 0rem 0.75rem 0.75rem;
-            border: solid 0.032rem #edeee8;
-            .section_12 {
-              padding: 0.25rem 0;
-              background-color: #00000000;
-              width: 13.63rem;
-              height: 3.13rem;
-              .text-wrapper_2 {
-                margin: 0 0.25rem;
-                padding: 0.75rem 0;
-                background-color: #f2f2f2;
-                border-radius: 0.25rem;
-                width: 13.34rem;
-                border: solid 0.032rem #d7d7d7;
-                .text_4 {
-                  color: #757575;
-                  font-size: 1.23rem;
-                  font-weight: 700;
-                  line-height: 1.23rem;
-                }
-              }
-            }
-            .section_13 {
-              margin-right: 0.25rem;
-              padding-top: 0.25rem;
-              background-color: #00000000;
-              width: 13.59rem;
-              height: 3.06rem;
-              .text-wrapper_3 {
-                margin-left: 0.25rem;
-                padding: 0.75rem 0;
-                border-radius: 0.25rem;
-                background-image: url('assets/53062683132af1946e1a4953530af228.png');
-                background-size: 100% 100%;
-                background-repeat: no-repeat;
-                width: 13.34rem;
-                .text_5 {
-                  color: #cddff2;
-                  font-size: 1.19rem;
-                  line-height: 1.19rem;
-                }
-              }
-            }
-          }
-        }
-        .section_9 {
-          margin-top: -12.5rem;
-          padding: 1.75rem 0 0.25rem;
-          background-color: #00000000;
-          .section_10 {
-            margin: 0 1.5rem;
-            padding-top: 0.25rem;
-            background-color: #00000000;
-            width: 25.88rem;
-            .text-wrapper {
-              margin: 0 0.25rem;
-              padding: 0.75rem 0;
-              background-color: #fefefe;
-              border-radius: 0.25rem;
-              width: 25.53rem;
-              border: solid 0.063rem #e1e1e1;
-              .text_3 {
-                margin-left: 1rem;
-                color: #d0d0d0;
-                font-size: 1.38rem;
-                font-weight: 700;
-                line-height: 1.38rem;
-              }
-            }
-          }
-        }
-      }
-      .section_8 {
-        padding: 0 0.13rem;
-        background-color: #00000000;
-        width: 32.31rem;
-        .group_3 {
-          padding: 1.5rem 0;
-          width: 32.06rem;
-          .text_2 {
-            margin-left: 10.5rem;
-            color: #7a7a7a;
-            font-size: 1.54rem;
-            font-weight: 700;
-            line-height: 1.54rem;
-          }
-        }
-        .divider {
-          background-color: #f0f0f0;
-          width: 29rem;
-          height: 0.094rem;
-        }
-      }
-      .pos {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div v-if="visible" class="pd-mask" @click="handleMaskClick">
+    <div class="pd-confirm" @click.stop>
+      <h2 class="pd-title">{{ title }}</h2>
+      <div class="pd-input-container" v-if="showInput">
+        <input v-model="inputModel" class="pd-input" :placeholder="inputPlaceholder" @keyup.enter="handleConfirm" />
+      </div>
+      <p class="pd-message" v-else>{{ message }}</p>
+      <div class="pd-plan"></div>
+      <div class="pd-buttons">
+        <button v-if="showConfirm" class="pd-button pd-confirm-btn" @click="handleConfirm">
+          {{ confirmText }}
+        </button>
+        <button v-if="showCancel" class="pd-button pd-cancel" @click="handleCancel">
+          {{ cancelText }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { watch, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  confirmText: {
+    type: String,
+    default: '确认',
+  },
+  cancelText: {
+    type: String,
+    default: '取消',
+  },
+  showConfirm: {
+    type: Boolean,
+    default: true,
+  },
+  showCancel: {
+    type: Boolean,
+    default: true,
+  },
+  maskClosable: {
+    type: Boolean,
+    default: false,
+  },
+  showInput: {
+    type: Boolean,
+    default: false,
+  },
+  inputPlaceholder: {
+    type: String,
+    default: '请输入文字',
+  },
+  inputValue: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['confirm', 'cancel', 'update:visible'])
+const visible = defineModel('visible', { type: Boolean, default: false })
+const inputModel = defineModel('inputValue', { type: String, default: '' })
+
+// Promise 控制变量
+let resolvePromise, rejectPromise
+
+// 返回 Promise 的方法，模拟原生 confirm 行为
+const show = (options = {}) => {
+  // 更新 props 值
+  Object.assign(props, options)
+
+  // 如果提供了 inputValue，则更新输入框的值
+  if (options.inputValue !== undefined) {
+    inputModel.value = options.inputValue
+  }
+
+  // 显示对话框
+  visible.value = true
+  emit('update:visible', true)
+
+  // 返回 Promise
+  return new Promise((resolve, reject) => {
+    resolvePromise = resolve
+    rejectPromise = reject
+  })
+}
+
+const handleConfirm = () => {
+  emit('confirm')
+  visible.value = false
+  emit('update:visible', false)
+
+  // 解决 Promise，传递输入框的值
+  if (resolvePromise) {
+    resolvePromise(inputModel.value)
+    resolvePromise = null
+    rejectPromise = null
+  }
+}
+
+const handleCancel = () => {
+  emit('cancel')
+  visible.value = false
+  emit('update:visible', false)
+
+  // 拒绝 Promise
+  if (rejectPromise) {
+    rejectPromise()
+    resolvePromise = null
+    rejectPromise = null
+  }
+}
+
+const handleMaskClick = () => {
+  if (props.maskClosable) {
+    handleCancel() // 点击遮罩相当于取消
+  }
+}
+
+// 添加/移除 body 滚动锁定
+const lockBodyScroll = () => {
+  document.body.style.overflow = 'hidden'
+}
+
+const unlockBodyScroll = () => {
+  document.body.style.overflow = ''
+}
+
+onMounted(() => {
+  if (visible.value) {
+    lockBodyScroll()
+  }
+})
+
+onUnmounted(() => {
+  unlockBodyScroll()
+})
+
+// 监听 visible 变化
+watch(visible, newVal => {
+  if (newVal) {
+    lockBodyScroll()
+  } else {
+    unlockBodyScroll()
+  }
+})
+
+// 暴露 show 方法给父组件使用
+defineExpose({ show })
+</script>
+
+<style scoped>
+.pd-mask {
+  position: fixed;
+  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999999999;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: inherit;
+  background: var(--confirmBg, inherit);
+}
+
+.pd-confirm {
+  background: inherit;
+  background: var(--confirmTheme, #fff);
+  text-align: center;
+  color: var(--confirmColor, #636363);
+  font-size: var(--confirmFontSize, 1rem);
+  max-width: 75vw;
+  min-width: 20em;
+  box-shadow: 0px 35px 35px -10px rgba(0, 0, 0, 0.33);
+  border-radius: 10px;
+  position: relative;
+  white-space: break-spaces;
+  word-break: break-all;
+  overflow: hidden;
+}
+
+.pd-plan {
+  background: inherit;
+  background: rgba(255, 255, 255, 0.66);
+  filter: blur(10px) saturate(2);
+  position: absolute;
+  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.pd-title {
+  position: relative;
+  font-size: 1.3em;
+  min-height: 1em;
+  background: var(--confirmBtnBg, #fafafa);
+  color: var(--confirmBtnColor, #636363);
+  margin: 0;
+  padding: 0.5em 0;
+}
+
+.pd-message {
+  position: relative;
+  border-top: 1px solid var(--confirmBtnBorder, #f1f1f1);
+  width: 100%;
+  max-height: 70vh;
+  border-bottom: 1px solid var(--confirmBtnBorder, #f1f1f1);
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 2em 10%;
+  line-height: 1.4;
+  overflow: auto;
+}
+
+.pd-input-container {
+  margin-block: 1.5em;
+  padding: 0 10% 1em;
+  position: relative;
+  z-index: 2;
+}
+
+.pd-input {
+  width: 100%;
+  padding: 0.8em;
+  font-size: 1em;
+  border: 1px solid var(--confirmBtnBorder, #f1f1f1);
+  border-radius: 4px;
+  box-sizing: border-box;
+  outline: none;
+  background: var(--confirmTheme, #fff);
+  color: var(--confirmColor, #636363);
+  box-shadow: 0px 0px 4px inset rgba(0, 0, 0, 0.12);
+}
+
+.pd-input::placeholder {
+  color: var(--black-20);
+}
+
+.pd-input:focus {
+  border-color: #4d90fe;
+}
+
+.pd-input::selection {
+  background-color: #4d90fe; /* 选中时的背景颜色 */
+  color: #ffffff; /* 选中时的文字颜色 */
+}
+
+.pd-buttons {
+  display: flex;
+}
+
+.pd-button {
+  position: relative;
+  width: 100%;
+  font-size: 1em;
+  appearance: none;
+  background: var(--confirmBtnBg, #fafafa);
+  color: var(--confirmBtnColor, #636363);
+  border: none;
+  border-right: 1px solid var(--confirmBtnBorder, #f1f1f1);
+  padding: 1em 0;
+  cursor: pointer;
+  outline: none;
+}
+
+/* 当同时显示确认和取消按钮时，每个按钮占50%宽度 */
+.pd-button:first-child:nth-last-child(2),
+.pd-button:first-child:nth-last-child(2) ~ .pd-button {
+  width: 50%;
+}
+
+/* 当只显示一个按钮时，该按钮占100%宽度 */
+.pd-button:first-child:nth-last-child(1) {
+  width: 100%;
+  border-right: none;
+}
+
+/* 只有最后一个按钮没有右边框 */
+.pd-button:last-child {
+  border-right: none;
+}
+</style>
diff --git a/src/pages/NoteListPage.vue b/src/pages/NoteListPage.vue
index 5d5c7b5..c3fe96a 100644
--- a/src/pages/NoteListPage.vue
+++ b/src/pages/NoteListPage.vue
@@ -283,7 +283,7 @@ const handleTrashNotesClick = () => {
   setIsFolderExpanded(false)
 }
 
-const handleFolderClick = (folderId) => {
+const handleFolderClick = folderId => {
   setCurrentFolder(folderId)
   setIsFolderExpanded(false)
 }

From e3f71aed412103eeadbd1e8c9856fd8156fa5913 Mon Sep 17 00:00:00 2001
From: yuantao <user@example.com>
Date: Mon, 27 Oct 2025 11:30:53 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=5FModal=5F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E8=BE=93=E5=85=A5=E6=A1=86=E7=84=A6=E7=82=B9=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96=E9=97=AE=E9=A2=98=E5=B9=B6=E9=87=8D=E6=9E=84=E5=BC=B9?=
 =?UTF-8?q?=E6=A1=86=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                      |   1 +
 src/App.vue                     |   9 +-
 src/components/FolderManage.vue | 264 ++++++++------------------------
 src/components/Modal.vue        | 112 ++++++++++----
 src/utils/modalService.js       | 113 ++++++++++++++
 5 files changed, 265 insertions(+), 234 deletions(-)
 create mode 100644 src/utils/modalService.js

diff --git a/index.html b/index.html
index 94d37f6..26d14dc 100644
--- a/index.html
+++ b/index.html
@@ -91,6 +91,7 @@
 
         --confirmFontSize: 0.8rem;
         --confirmBg: rgba(0, 0, 0, 0.15);
+        --confirmBtnColor: #000000cc;
       }
 
       body {
diff --git a/src/App.vue b/src/App.vue
index 4688d9e..c735b4f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,8 +16,6 @@
     <transition name="settings-slide" v-show="isSettingsRoute" appear>
       <SettingsPage class="setting-page" />
     </transition>
-
-    <Modal ref="modalRef" showInput />
   </div>
 </template>
 
@@ -25,7 +23,7 @@
 import { ref, watch, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import '@/common/base.css'
-import Modal from '@/components/Modal.vue'
+import { initModalService } from '@/utils/modalService'
 
 // 导入页面组件
 import NoteListPage from './pages/NoteListPage.vue'
@@ -73,6 +71,11 @@ watch(
     }
   }
 )
+
+// 初始化弹框服务
+onMounted(() => {
+  initModalService()
+})
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/FolderManage.vue b/src/components/FolderManage.vue
index 3e2877f..d3e9ae7 100644
--- a/src/components/FolderManage.vue
+++ b/src/components/FolderManage.vue
@@ -46,55 +46,7 @@
           <img
             class="image_8 code-fun-ml-12"
             :src="isSelectionMode ? 'assets/icons/drawable-xxhdpi/icon_folder_trash.png' : 'assets/icons/drawable-xxhdpi/btn_add_folder.png'"
-            @click="isSelectionMode ? handleDeleteSelectedFolders() : handleAddFolder" />
-        </div>
-      </div>
-    </div>
-
-    <!-- 添加文件夹的模态框 -->
-
-    <div v-if="showAddFolderModal" class="modal-overlay" @click="showAddFolderModal = false">
-      <div class="modal-content" @click.stop>
-        <h3>添加文件夹</h3>
-
-        <input v-model="newFolderName" placeholder="请输入文件夹名称" class="folder-input" @keyup.enter="confirmAddFolder" ref="folderInput" />
-
-        <div class="modal-actions">
-          <button @click="showAddFolderModal = false" class="cancel-btn">取消</button>
-
-          <button @click="confirmAddFolder" class="confirm-btn">确定</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- 重命名文件夹的模态框 -->
-
-    <div v-if="showRenameFolderModal" class="modal-overlay" @click="showRenameFolderModal = false">
-      <div class="modal-content" @click.stop>
-        <h3>重命名文件夹</h3>
-
-        <input v-model="renameFolderName" placeholder="请输入文件夹名称" class="folder-input" @keyup.enter="confirmRenameFolder" ref="folderInput" />
-
-        <div class="modal-actions">
-          <button @click="showRenameFolderModal = false" class="cancel-btn">取消</button>
-
-          <button @click="confirmRenameFolder" class="confirm-btn">确定</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- 确认删除文件夹的模态框 -->
-
-    <div v-if="showDeleteConfirmModal" class="modal-overlay" @click="showDeleteConfirmModal = false">
-      <div class="modal-content" @click.stop>
-        <h3>删除文件夹</h3>
-
-        <p>确定要删除选中的 {{ selectedFolders.length }} 个文件夹吗？文件夹中的便签将移至"全部便签"。</p>
-
-        <div class="modal-actions">
-          <button @click="showDeleteConfirmModal = false" class="cancel-btn">取消</button>
-
-          <button @click="confirmDeleteSelectedFolders" class="confirm-btn">确定</button>
+            @click="isSelectionMode ? handleDeleteSelectedFolders() : handleAddFolder()" />
         </div>
       </div>
     </div>
@@ -105,6 +57,7 @@
 import { ref, computed, nextTick } from 'vue'
 import { useAppStore } from '../stores/useAppStore'
 import FolderItem from './FolderItem.vue'
+import { showConfirm, showPrompt } from '../utils/modalService'
 
 const store = useAppStore()
 const props = defineProps({
@@ -158,18 +111,18 @@ const props = defineProps({
   },
 })
 
-// 添加文件夹相关状态
-const showAddFolderModal = ref(false)
-const newFolderName = ref('')
-const folderInput = ref(null)
 // 重命名文件夹相关状态
+
 const showRenameFolderModal = ref(false)
+
 const renameFolderId = ref(null)
+
 const renameFolderName = ref('')
 // 选择模式相关状态
+
 const isSelectionMode = ref(false)
+
 const selectedFolders = ref([])
-const showDeleteConfirmModal = ref(false)
 // 计算自定义文件夹（排除系统文件夹）
 const customFolders = computed(() => {
   return store.folders.filter(folder => !['all', 'starred', 'trash', 'archive'].includes(folder.id))
@@ -217,26 +170,29 @@ const handleFolderClick = folderId => {
 
 // 处理删除选中的文件夹
 
-const handleDeleteSelectedFolders = () => {
+const handleDeleteSelectedFolders = async () => {
   if (selectedFolders.value.length === 0) return
-  showDeleteConfirmModal.value = true
-}
 
-// 确认删除选中的文件夹
-
-const confirmDeleteSelectedFolders = async () => {
   try {
-    // 删除选中的文件夹
-    for (const folderId of selectedFolders.value) {
-      // 跳过系统文件夹
-      if (['all', 'starred', 'trash', 'archive'].includes(folderId)) continue
-      await store.deleteFolder(folderId)
-    }
+    const confirmed = await showConfirm(`确定要删除选中的 ${selectedFolders.value.length} 个文件夹吗？文件夹中的便签将移至"全部便签"。`, '删除文件夹')
 
-    // 清空选中项并退出选择模式
-    selectedFolders.value = []
-    isSelectionMode.value = false
-    showDeleteConfirmModal.value = false
+    if (confirmed) {
+      // 删除选中的文件夹
+
+      for (const folderId of selectedFolders.value) {
+        // 跳过系统文件夹
+
+        if (['all', 'starred', 'trash', 'archive'].includes(folderId)) continue
+
+        await store.deleteFolder(folderId)
+      }
+
+      // 清空选中项并退出选择模式
+
+      selectedFolders.value = []
+
+      isSelectionMode.value = false
+    }
   } catch (error) {
     console.error('删除文件夹失败:', error)
   }
@@ -244,52 +200,41 @@ const confirmDeleteSelectedFolders = async () => {
 
 // 处理删除文件夹
 
-const handleDeleteFolder = folderId => {
+const handleDeleteFolder = async folderId => {
   // 阻止事件冒泡到父元素
   event.stopPropagation()
 
   // 确认删除
-  if (confirm(`确定要删除文件夹 "${getFolderName(folderId)}" 吗？文件夹中的便签将移至"全部便签"。`)) {
-    try {
-      store.deleteFolder(folderId)
-    } catch (error) {
-      console.error('删除文件夹失败:', error)
+  try {
+    const confirmed = await showConfirm(`确定要删除文件夹 "${getFolderName(folderId)}" 吗？文件夹中的便签将移至"全部便签"。`, '删除文件夹')
+    if (confirmed) {
+      await store.deleteFolder(folderId)
     }
+  } catch (error) {
+    console.error('删除文件夹失败:', error)
   }
 }
 
 // 处理编辑文件夹
 
-const handleEditFolder = folderId => {
+const handleEditFolder = async folderId => {
   // 阻止事件冒泡到父元素
 
   event.stopPropagation()
+
   const folder = store.folders.find(f => f.id === folderId)
+
   if (folder) {
-    renameFolderId.value = folderId
-    renameFolderName.value = folder.name
-    showRenameFolderModal.value = true
-
-    // 在下次DOM更新后聚焦输入框
-    nextTick(() => {
-      if (folderInput.value) {
-        folderInput.value.focus()
-      }
-    })
-  }
-}
-
-// 确认重命名文件夹
-
-const confirmRenameFolder = async () => {
-  if (renameFolderName.value.trim() && renameFolderId.value) {
     try {
-      await store.updateFolder(renameFolderId.value, { name: renameFolderName.value.trim() })
-      showRenameFolderModal.value = false
-      renameFolderId.value = null
-      renameFolderName.value = ''
+      const newName = await showPrompt('请输入文件夹名称', '重命名文件夹', '请输入文件夹名称', folder.name)
+
+      if (newName && newName.trim()) {
+        await store.updateFolder(folderId, { name: newName.trim() })
+      }
     } catch (error) {
-      console.error('重命名文件夹失败:', error)
+      // 用户取消操作或出现错误
+
+      console.log('重命名文件夹操作已取消或出现错误:', error)
     }
   }
 }
@@ -331,35 +276,21 @@ const handleTrashClick = () => {
   }
 }
 
-const handleAddFolder = event => {
-  // 阻止事件冒泡到父元素
-  event.stopPropagation()
-  showAddFolderModal.value = true
-  newFolderName.value = ''
-
-  // 在下次DOM更新后聚焦输入框
-  nextTick(() => {
-    if (folderInput.value) {
-      folderInput.value.focus()
-    }
-  })
-}
-
-const confirmAddFolder = async () => {
-  if (newFolderName.value.trim()) {
-    try {
+const handleAddFolder = async () => {
+  try {
+    const folderName = await showPrompt('请输入文件夹名称', '添加文件夹', '请输入文件夹名称')
+    if (folderName && folderName.trim()) {
       const newFolder = {
-        name: newFolderName.value.trim(),
+        name: folderName.trim(),
         id: `folder_${Date.now()}`, // 生成唯一ID
         createdAt: new Date().toISOString(),
       }
 
       await store.addFolder(newFolder)
-      showAddFolderModal.value = false
-      newFolderName.value = ''
-    } catch (error) {
-      console.error('添加文件夹失败:', error)
     }
+  } catch (error) {
+    // 用户取消操作或出现错误
+    console.log('添加文件夹操作已取消或出现错误:', error)
   }
 }
 </script>
@@ -368,104 +299,37 @@ const confirmAddFolder = async () => {
 .page {
   .section_7 {
     margin-top: 2rem;
+
     background-color: #00000000;
+
     .section_8 {
       padding: 0.29rem 0.92rem;
+
       background-color: #f4f4f4;
+
       border: solid 0.063rem #f0ece7;
+
       .image_7,
       .image_8 {
         border-radius: 0.63rem;
+
         width: 2.2rem;
+
         height: 1.75rem;
+
         object-fit: contain;
+
         background: url(/assets/icons/drawable-xxhdpi/folder_bottom_button_normal.9.png), #fdfbfb;
       }
+
       .text_11 {
         color: #cacaca;
+
         font-size: 0.7rem;
+
         line-height: 1.16rem;
       }
     }
   }
 }
-
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1001;
-}
-
-.modal-content {
-  background: white;
-  border-radius: 0.5rem;
-  padding: 1.5rem;
-  text-align: center;
-  width: 80%;
-  max-width: 300px;
-
-  h3 {
-    margin-top: 0;
-    margin-bottom: 1rem;
-    color: #333;
-  }
-
-  .folder-input {
-    width: 100%;
-    padding: 0.8rem;
-    border: 1px solid #ddd;
-    border-radius: 0.3rem;
-    font-size: 1rem;
-    margin-bottom: 1.5rem;
-    box-sizing: border-box;
-  }
-
-  .modal-actions {
-    display: flex;
-    justify-content: space-between;
-
-    button {
-      flex: 1;
-      padding: 0.8rem;
-      border: none;
-      border-radius: 0.3rem;
-      font-size: 1rem;
-      cursor: pointer;
-      margin: 0 0.5rem;
-
-      &:first-child {
-        margin-left: 0;
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    .cancel-btn {
-      background-color: #f0f0f0;
-      color: #333;
-
-      &:hover {
-        background-color: #e0e0e0;
-      }
-    }
-
-    .confirm-btn {
-      background-color: #4a90e2;
-      color: white;
-
-      &:hover {
-        background-color: #357ae8;
-      }
-    }
-  }
-}
 </style>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 5ee95b8..13fcb10 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,18 +1,21 @@
 <template>
   <div v-if="visible" class="pd-mask" @click="handleMaskClick">
     <div class="pd-confirm" @click.stop>
-      <h2 class="pd-title">{{ title }}</h2>
-      <div class="pd-input-container" v-if="showInput">
-        <input v-model="inputModel" class="pd-input" :placeholder="inputPlaceholder" @keyup.enter="handleConfirm" />
+      <h2 class="pd-title">{{ dynamicTitle || title }}</h2>
+
+      <div class="pd-input-container" v-if="dynamicShowInput || showInput">
+        <input ref="inputRef" v-model="inputModel" class="pd-input" :placeholder="dynamicInputPlaceholder || inputPlaceholder" @keyup.enter="handleConfirm" />
       </div>
-      <p class="pd-message" v-else>{{ message }}</p>
-      <div class="pd-plan"></div>
+
+      <p class="pd-message" v-else>{{ dynamicMessage || message }}</p>
+
       <div class="pd-buttons">
-        <button v-if="showConfirm" class="pd-button pd-confirm-btn" @click="handleConfirm">
-          {{ confirmText }}
+        <button v-if="dynamicShowConfirm || showConfirm" class="pd-button pd-confirm-btn" @click="handleConfirm">
+          {{ dynamicConfirmText || confirmText }}
         </button>
-        <button v-if="showCancel" class="pd-button pd-cancel" @click="handleCancel">
-          {{ cancelText }}
+
+        <button v-if="dynamicShowCancel || showCancel" class="pd-button pd-cancel" @click="handleCancel">
+          {{ dynamicCancelText || cancelText }}
         </button>
       </div>
     </div>
@@ -20,7 +23,27 @@
 </template>
 
 <script setup>
-import { watch, onMounted, onUnmounted } from 'vue'
+import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
+
+// 响应式数据用于动态更新 Modal 内容
+
+const dynamicTitle = ref('')
+
+const dynamicMessage = ref('')
+
+const dynamicConfirmText = ref('确认')
+
+const dynamicCancelText = ref('取消')
+
+const dynamicShowConfirm = ref(true)
+
+const dynamicShowCancel = ref(true)
+
+const dynamicMaskClosable = ref(false)
+
+const dynamicShowInput = ref(false)
+
+const dynamicInputPlaceholder = ref('请输入文字')
 
 const props = defineProps({
   title: {
@@ -69,26 +92,48 @@ const emit = defineEmits(['confirm', 'cancel', 'update:visible'])
 const visible = defineModel('visible', { type: Boolean, default: false })
 const inputModel = defineModel('inputValue', { type: String, default: '' })
 
+const inputRef = ref()
+
 // Promise 控制变量
+
 let resolvePromise, rejectPromise
 
 // 返回 Promise 的方法，模拟原生 confirm 行为
-const show = (options = {}) => {
-  // 更新 props 值
-  Object.assign(props, options)
 
-  // 如果提供了 inputValue，则更新输入框的值
-  if (options.inputValue !== undefined) {
-    inputModel.value = options.inputValue
-  }
+const show = (options = {}) => {
+  // 更新动态数据
+
+  if (options.title !== undefined) dynamicTitle.value = options.title
+
+  if (options.message !== undefined) dynamicMessage.value = options.message
+
+  if (options.confirmText !== undefined) dynamicConfirmText.value = options.confirmText
+
+  if (options.cancelText !== undefined) dynamicCancelText.value = options.cancelText
+
+  if (options.showConfirm !== undefined) dynamicShowConfirm.value = options.showConfirm
+
+  if (options.showCancel !== undefined) dynamicShowCancel.value = options.showCancel
+
+  if (options.maskClosable !== undefined) dynamicMaskClosable.value = options.maskClosable
+
+  if (options.showInput !== undefined) dynamicShowInput.value = options.showInput
+
+  if (options.inputPlaceholder !== undefined) dynamicInputPlaceholder.value = options.inputPlaceholder
+
+  if (options.inputValue !== undefined) inputModel.value = options.inputValue
 
   // 显示对话框
+
   visible.value = true
+
   emit('update:visible', true)
 
   // 返回 Promise
+
   return new Promise((resolve, reject) => {
     resolvePromise = resolve
+
     rejectPromise = reject
   })
 }
@@ -145,11 +190,29 @@ onUnmounted(() => {
 })
 
 // 监听 visible 变化
-watch(visible, newVal => {
+watch(visible, (newVal, oldVal) => {
   if (newVal) {
     lockBodyScroll()
+    // 如果模态框包含输入框，则自动获取焦点
+    if (dynamicShowInput.value || props.showInput) {
+      // 使用 nextTick 确保在 DOM 更新后聚焦
+      nextTick(() => {
+        // 添加更长的延迟确保动画完成
+        setTimeout(() => {
+          // 确保 inputRef 存在并且可见
+          if (inputRef.value && inputRef.value.offsetParent !== null) {
+            inputRef.value.focus()
+            inputRef.value.select() // 选中所有文本，提升用户体验
+          }
+        }, 100)
+      })
+    }
   } else {
     unlockBodyScroll()
+    // 重置输入框引用，确保下次打开时能正确获取焦点
+    if (inputRef.value) {
+      inputRef.value.blur()
+    }
   }
 })
 
@@ -191,19 +254,6 @@ defineExpose({ show })
   overflow: hidden;
 }
 
-.pd-plan {
-  background: inherit;
-  background: rgba(255, 255, 255, 0.66);
-  filter: blur(10px) saturate(2);
-  position: absolute;
-  inset: 0;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-}
-
 .pd-title {
   position: relative;
   font-size: 1.3em;
diff --git a/src/utils/modalService.js b/src/utils/modalService.js
new file mode 100644
index 0000000..19b2d53
--- /dev/null
+++ b/src/utils/modalService.js
@@ -0,0 +1,113 @@
+import { createApp } from 'vue'
+import Modal from '@/components/Modal.vue'
+
+/**
+ * 全局弹框服务
+ * 提供统一的弹框调用接口，使用项目中已有的 Modal 组件
+ */
+
+// 创建一个全局的 Modal 实例容器
+let modalInstance = null
+let modalContainer = null
+
+/**
+ * 初始化 Modal 实例
+ * 在应用启动时调用一次
+ */
+export const initModalService = () => {
+  if (!modalContainer) {
+    // 创建一个隐藏的 div 作为 Modal 的挂载点
+    modalContainer = document.createElement('div')
+    document.body.appendChild(modalContainer)
+    
+    // 创建 Modal 实例
+    const app = createApp(Modal)
+    modalInstance = app.mount(modalContainer)
+  }
+  
+  return modalInstance
+}
+
+/**
+ * 显示确认弹框
+ * @param {string} message - 弹框消息
+ * @param {string} title - 弹框标题
+ * @param {Object} options - 弹框选项
+ * @returns {Promise<boolean>} 用户确认返回 true，取消返回 false
+ */
+export const showConfirm = (message, title = '确认', options = {}) => {
+  // 确保 Modal 实例已初始化
+  if (!modalInstance) {
+    initModalService()
+  }
+  
+  // 显示弹框
+  return modalInstance.show({
+    title,
+    message,
+    showInput: false,
+    showConfirm: true,
+    showCancel: true,
+    ...options
+  })
+}
+
+/**
+ * 显示提示弹框
+ * @param {string} message - 弹框消息
+ * @param {string} title - 弹框标题
+ * @param {Object} options - 弹框选项
+ * @returns {Promise<void>}
+ */
+export const showAlert = (message, title = '提示', options = {}) => {
+  // 确保 Modal 实例已初始化
+  if (!modalInstance) {
+    initModalService()
+  }
+  
+  // 显示弹框
+  return modalInstance.show({
+    title,
+    message,
+    showInput: false,
+    showConfirm: true,
+    showCancel: false,
+    ...options
+  })
+}
+
+/**
+ * 显示输入弹框
+ * @param {string} message - 弹框消息
+ * @param {string} title - 弹框标题
+ * @param {string} placeholder - 输入框占位符
+ * @param {string} defaultValue - 输入框默认值
+ * @param {Object} options - 弹框选项
+ * @returns {Promise<string|null>} 用户输入的值，取消返回 null
+ */
+export const showPrompt = (message, title = '输入', placeholder = '请输入文字', defaultValue = '', options = {}) => {
+  // 确保 Modal 实例已初始化
+  if (!modalInstance) {
+    initModalService()
+  }
+  
+  // 显示弹框
+  return modalInstance.show({
+    title,
+    message,
+    showInput: true,
+    showConfirm: true,
+    showCancel: true,
+    inputPlaceholder: placeholder,
+    inputValue: defaultValue,
+    ...options
+  })
+}
+
+// 默认导出所有方法
+export default {
+  initModalService,
+  showConfirm,
+  showAlert,
+  showPrompt
+}
\ No newline at end of file