新增 便签删除功能；

优化便签列表页布局；

src/pages/NoteListPage.vue

@@ -1,67 +1,54 @@
 <template>
-  <ion-app>
+  <ion-page>
     <div class="container">
-      <Header
-        :title="headerTitle"
-        :onAction="handleHeaderAction"
-        actionIcon="create"
-        leftType="settings"
-        :onLeftAction="handleSettingsPress"
-        :onFolderToggle="handleFolderToggle"
-        :isFolderExpanded="isFolderExpanded"
-        :onTitlePress="handleFolderToggle" />
+      <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">
-        <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"></div>
-
-      <div class="search-container">
-        <SearchBar v-model="searchQuery" @search="handleSearch" @clear="handleClearSearch" @focus="handleSearchFocus" @blur="handleSearchBlur" />
-      </div>
-
-      <div class="notes-container">
-        <div v-for="note in filteredAndSortedNotes" :key="note.id" class="note-item">
-          <NoteItem
-            :title="note.title"
-            :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="() => handleDeleteNote(note.id)" />
+        <!-- 悬浮文件夹列表 - 使用绝对定位实现 -->
+        <div v-if="isFolderExpanded" class="folder-list">
+          <FolderManage
+            :allCount="allNotesCount"
+            :starredCount="starredNotesCount"
+            :trashCount="trashNotesCount"
+            :archiveCount="0"
+            :selectedFolder="currentFolder"
+            :onAllClick="handleAllNotesClick"
+            :onStarredClick="handleStarredNotesClick"
+            :onTrashClick="handleTrashNotesClick" />
         </div>
-      </div>
+        <!-- 点击外部区域收起文件夹列表的覆盖层 -->
+        <div v-if="isFolderExpanded" @click="() => setIsFolderExpanded(false)" class="folder-overlay"></div>
+        <div class="search-container">
+          <SearchBar v-model="searchQuery" @search="handleSearch" @clear="handleClearSearch" @focus="handleSearchFocus" @blur="handleSearchBlur" />
+        </div>
+
+        <div class="notes-container">
+          <div v-for="note in filteredAndSortedNotes" :key="note.id" class="note-item">
+            <NoteItem
+              :title="note.title"
+              :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>
+        </div>
+      </ion-content>
     </div>
-    <ion-alert
-      :is-open="showAlert"
-      @didDismiss="() => setShowAlert(false)"
-      header="删除便签"
-      message="确定要删除这个便签吗？"
-      :buttons="[
-        {
-          text: '取消',
-          role: 'cancel',
-        },
-        {
-          text: '删除',
-          handler: confirmDeleteNote,
-        },
-      ]"></ion-alert>
-  </ion-app>
+  </ion-page>
 </template>
 
 <script setup>
@@ -73,6 +60,7 @@ import Header from '../components/Header.vue'
 import FolderManage from '../components/FolderManage.vue'
 import SearchBar from '../components/SearchBar.vue'
 import { formatNoteListDate } from '../utils/dateUtils'
+import { IonContent, IonPage } from '@ionic/vue'
 
 const store = useAppStore()
 const router = useRouter()
@@ -94,7 +82,6 @@ const searchQuery = ref('')
 const sortBy = ref('date') // 排序方式：'date'(按日期)、'title'(按标题)、'starred'(按星标)
 const isFolderExpanded = ref(false) // 文件夹列表是否展开
 const currentFolder = ref('all') // 当前选中的文件夹，默认是"全部便签"
-const showAlert = ref(false)
 const noteToDelete = ref(null)
 
 // 计算加星便签数量（未删除的）
@@ -197,11 +184,6 @@ const handleHeaderAction = actionType => {
   }
 }
 
-const handleDeleteNote = noteId => {
-  noteToDelete.value = noteId
-  showAlert.value = true
-}
-
 const handleStarToggle = async noteId => {
   const note = store.notes.find(n => n.id === noteId)
   if (note) {
@@ -226,7 +208,8 @@ const handleTopToggle = async noteId => {
   }
 }
 
-const confirmDeleteNote = async () => {
+const confirmDeleteNote = async noteId => {
+  noteToDelete.value = noteId
   if (noteToDelete.value) {
     try {
       // 检查当前是否在回收站中
@@ -244,7 +227,6 @@ const confirmDeleteNote = async () => {
       console.error('Failed to delete note:', error)
     }
   }
-  showAlert.value = false
 }
 
 // 处理排序方式切换
@@ -347,10 +329,6 @@ const setSearchQuery = query => {
   searchQuery.value = query
 }
 
-const setShowAlert = show => {
-  showAlert.value = show
-}
-
 const notes = computed(() => store.notes)
 </script>
 <style lang="less" scoped>
@@ -383,6 +361,11 @@ const notes = computed(() => store.notes)
   background-color: transparent;
   z-index: 99;
 }
+.content {
+  --background: transparent;
+  --padding-top: 4.5rem;
+  --padding-bottom: 2rem;
+}
 
 .search-container {
   padding: 0.8rem 0.5rem;