基本还原了便签列表项；

添加了mock数据；

src/pages/NoteListPage.vue

@@ -32,21 +32,27 @@
             }
           " />
       </div>
+      <!-- 点击外部区域收起文件夹列表的覆盖层 -->
+      <div v-if="isFolderExpanded" @click="() => setIsFolderExpanded(false)" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: transparent; z-index: 99"></div>
 
       <div style="padding: 0.8rem 0.5rem; margin-top: -2.8rem">
         <SearchBar v-model="searchQuery" @search="handleSearch" @clear="handleClearSearch" @focus="handleSearchFocus" @blur="handleSearchBlur" />
       </div>
 
       <div style="flex: 1">
-        <div style="margin-inline: 0.5rem">
-          <div v-for="note in filteredAndSortedNotes" :key="note.id" style="border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px var(--shadow); background-color: var(--background-card); margin-block: .5rem">
-            <NoteItem :title="note.title" :content="note.content" :date="formatDate(note.updatedAt)" :isStarred="note.isStarred" :onPress="() => handleNotePress(note.id)" :onDelete="() => handleDeleteNote(note.id)" />
-          </div>
+        <div v-for="note in filteredAndSortedNotes" :key="note.id" style="margin: 0.4rem 0">
+          <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)" />
         </div>
       </div>
-
-      <!-- 点击外部区域收起文件夹列表的覆盖层 -->
-      <div v-if="isFolderExpanded" @click="() => setIsFolderExpanded(false)" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: transparent; z-index: 99"></div>
     </div>
     <ion-alert
       :is-open="showAlert"
@@ -100,6 +106,11 @@ const starredNotesCount = computed(() => {
   return store.notes.filter(note => note.isStarred).length
 })
 
+// 计算置顶便签数量
+const topNotesCount = computed(() => {
+  return filteredAndSortedNotes.value.filter(note => note.isTop).length
+})
+
 // 根据当前文件夹过滤便签
 const filteredNotes = computed(() => {
   return store.notes.filter(note => {
@@ -122,6 +133,10 @@ const filteredAndSortedNotes = computed(() => {
   return filteredNotes.value
     .filter(note => note.title.toLowerCase().includes(searchQuery.value.toLowerCase()) || note.content.toLowerCase().includes(searchQuery.value.toLowerCase()))
     .sort((a, b) => {
+      // 置顶的便签排在前面
+      if (a.isTop && !b.isTop) return -1
+      if (!a.isTop && b.isTop) return 1
+
       if (sortBy.value === 'title') {
         return a.title.localeCompare(b.title)
       } else if (sortBy.value === 'starred') {
@@ -161,6 +176,20 @@ const handleDeleteNote = noteId => {
   showAlert.value = true
 }
 
+const handleStarToggle = async noteId => {
+  const note = store.notes.find(n => n.id === noteId)
+  if (note) {
+    await store.updateNote(noteId, { isStarred: !note.isStarred })
+  }
+}
+
+const handleTopToggle = async noteId => {
+  const note = store.notes.find(n => n.id === noteId)
+  if (note) {
+    await store.updateNote(noteId, { isTop: !note.isTop })
+  }
+}
+
 const confirmDeleteNote = () => {
   if (noteToDelete.value) {
     store.deleteNote(noteToDelete.value)