搜索栏组件更名；

优化 便签列表页布局调整；

src/pages/NoteEditorPage.vue

@@ -12,28 +12,8 @@
 
       <!-- 富文本编辑器 -->
       <div class="editor-container">
-        <RichTextEditor 
-          ref="editorRef" 
-          :modelValue="content" 
-          @update:modelValue="handleContentChange"
-          class="rich-text-editor" />
+        <RichTextEditor ref="editorRef" :modelValue="content" @update:modelValue="handleContentChange" class="rich-text-editor" />
       </div>
-
-      <ion-alert
-        :is-open="showAlert"
-        @didDismiss="() => setShowAlert(false)"
-        header="未保存的更改"
-        message="您有未保存的更改，确定要丢弃吗？"
-        :buttons="[
-          {
-            text: '取消',
-            role: 'cancel',
-          },
-          {
-            text: '丢弃',
-            handler: () => window.history.back(),
-          },
-        ]"></ion-alert>
     </div>
   </ion-page>
 </template>
@@ -63,21 +43,21 @@ const editorRef = ref(null)
 
 // 设置便签内容的函数
 // 用于在编辑器中加载指定便签的内容
-const setNoteContent = async (noteId) => {
+const setNoteContent = async noteId => {
   // 确保store数据已加载，如果便签列表为空则先加载数据
   if (store.notes.length === 0) {
     await store.loadData()
     console.log('Store loaded, notes count:', store.notes.length)
   }
-  
+
   // 从store中查找指定ID的便签
   const note = store.notes.find(n => n.id === noteId)
   console.log('Found note:', note)
-  
+
   // 确保编辑器已经初始化完成
   await nextTick()
   console.log('Editor ref:', editorRef.value)
-  
+
   if (note) {
     console.log('Setting content:', note.content)
     // 无论editorRef是否可用，都先设置content的值作为备份
@@ -96,7 +76,7 @@ onMounted(async () => {
   console.log('NoteEditorPage mounted')
   await store.loadData()
   console.log('Store loaded, notes count:', store.notes.length)
-  
+
   // 如果是编辑现有便签，在组件挂载后设置内容
   if (noteId.value) {
     await setNoteContent(noteId.value)
@@ -104,19 +84,27 @@ onMounted(async () => {
 })
 
 // 监听noteId变化，确保在编辑器准备好后设置内容
-watch(noteId, async (newNoteId) => {
-  console.log('Note ID changed:', newNoteId)
-  if (newNoteId) {
-    await setNoteContent(newNoteId)
-  }
-}, { immediate: true })
+watch(
+  noteId,
+  async newNoteId => {
+    console.log('Note ID changed:', newNoteId)
+    if (newNoteId) {
+      await setNoteContent(newNoteId)
+    }
+  },
+  { immediate: true }
+)
 
 // 监听store变化，确保在store加载后设置内容
-watch(() => store.notes, async (newNotes) => {
-  if (noteId.value && newNotes.length > 0) {
-    await setNoteContent(noteId.value)
-  }
-}, { immediate: true })
+watch(
+  () => store.notes,
+  async newNotes => {
+    if (noteId.value && newNotes.length > 0) {
+      await setNoteContent(noteId.value)
+    }
+  },
+  { immediate: true }
+)
 
 // 检查是否正在编辑现有便签
 // 如果noteId存在则表示是编辑模式，否则是新建模式
@@ -135,11 +123,15 @@ onMounted(() => {
 })
 
 // 监听store变化，确保在store加载后设置内容
-watch(() => store.notes, async (newNotes) => {
-  if (noteId.value && newNotes.length > 0) {
-    await setNoteContent(noteId.value)
-  }
-}, { immediate: true })
+watch(
+  () => store.notes,
+  async newNotes => {
+    if (noteId.value && newNotes.length > 0) {
+      await setNoteContent(noteId.value)
+    }
+  },
+  { immediate: true }
+)
 const showAlert = ref(false)
 
 // 防抖函数
@@ -154,14 +146,14 @@ const debounce = (func, delay) => {
 
 // 防抖处理内容变化
 // 延迟300ms更新内容，避免用户输入时频繁触发更新
-const debouncedHandleContentChange = debounce((newContent) => {
+const debouncedHandleContentChange = debounce(newContent => {
   content.value = newContent
   console.log('Content updated:', newContent)
 }, 300)
 
 // 监听编辑器内容变化
 // 当编辑器内容发生变化时调用此函数
-const handleContentChange = (newContent) => {
+const handleContentChange = newContent => {
   console.log('Editor content changed:', newContent)
   debouncedHandleContentChange(newContent)
 }
@@ -188,7 +180,7 @@ const handleSave = async () => {
   try {
     // 获取编辑器中的实际内容
     const editorContent = editorRef.value ? editorRef.value.getContent() : content.value
-    
+
     if (isEditing && existingNote) {
       // Update existing note
       await store.updateNote(noteId.value, {
@@ -227,7 +219,7 @@ const handleCreate = async () => {
   try {
     // 获取编辑器中的实际内容
     const editorContent = editorRef.value ? editorRef.value.getContent() : content.value
-    
+
     // Create new note
     await store.addNote({
       content: editorContent,

src/pages/NoteListPage.vue

@@ -12,9 +12,9 @@
           :isFolderExpanded="isFolderExpanded"
           :onTitlePress="handleFolderToggle"
           slot="fixed" />
-
+          
         <!-- 悬浮文件夹列表 - 使用绝对定位实现 -->
-        <div v-if="isFolderExpanded" class="folder-list">
+        <div v-if="isFolderExpanded" class="folder-list" slot="fixed">
           <FolderManage
             :allCount="allNotesCount"
             :starredCount="starredNotesCount"
@@ -26,7 +26,7 @@
             :onTrashClick="handleTrashNotesClick" />
         </div>
         <!-- 点击外部区域收起文件夹列表的覆盖层 -->
-        <div v-if="isFolderExpanded" @click="() => setIsFolderExpanded(false)" class="folder-overlay"></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>
@@ -58,7 +58,7 @@ 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/SearchBar.vue'
+import SearchBar from '../components/Search.vue'
 import { formatNoteListDate } from '../utils/dateUtils'
 import { IonContent, IonPage } from '@ionic/vue'