优化 头部便签管理点击区域；

补充注释；

src/pages/NoteListPage.vue

@@ -1,12 +1,18 @@
 <template>
   <ion-app>
     <div class="container">
-      <Header :title="headerTitle" :onAction="handleHeaderAction" actionIcon="create" leftType="settings" :onLeftAction="handleSettingsPress" :onFolderToggle="handleFolderToggle" :isFolderExpanded="isFolderExpanded" :onTitlePress="handleFolderToggle" />
+      <Header
+        :title="headerTitle"
+        :onAction="handleHeaderAction"
+        actionIcon="create"
+        leftType="settings"
+        :onLeftAction="handleSettingsPress"
+        :onFolderToggle="handleFolderToggle"
+        :isFolderExpanded="isFolderExpanded"
+        :onTitlePress="handleFolderToggle" />
 
       <!-- 悬浮文件夹列表 - 使用绝对定位实现 -->
-      <div
-        v-if="isFolderExpanded"
-        class="folder-list">
+      <div v-if="isFolderExpanded" class="folder-list">
         <FolderManage
           :allCount="allNotesCount"
           :starredCount="starredNotesCount"
@@ -60,6 +66,7 @@
 
 <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'
@@ -68,22 +75,25 @@ import SearchBar from '../components/SearchBar.vue'
 import { formatNoteListDate } from '../utils/dateUtils'
 
 const store = useAppStore()
+const router = useRouter()
 
-// 加载初始数据
+// 页面挂载时加载初始数据
 onMounted(() => {
-  // 检查URL参数是否包含mock数据加载指令
+  // 检查URL参数是否包含mock数据加载指令，用于开发和演示
   const urlParams = new URLSearchParams(window.location.search)
   if (urlParams.get('mock') === 'true') {
+    // 加载预设的模拟数据
     store.loadMockData()
   } else {
+    // 从localStorage加载用户数据
     store.loadData()
   }
 })
 
 const searchQuery = ref('')
-const sortBy = ref('date') // 'date', 'title', 'starred'
-const isFolderExpanded = ref(false)
-const currentFolder = ref('all') // 默认文件夹是"全部便签"
+const sortBy = ref('date') // 排序方式：'date'(按日期)、'title'(按标题)、'starred'(按星标)
+const isFolderExpanded = ref(false) // 文件夹列表是否展开
+const currentFolder = ref('all') // 当前选中的文件夹，默认是"全部便签"
 const showAlert = ref(false)
 const noteToDelete = ref(null)
 
@@ -101,13 +111,11 @@ const trashNotesCount = computed(() => {
 const filteredNotes = computed(() => {
   // 预处理搜索查询，提高性能
   const lowerCaseQuery = searchQuery.value.toLowerCase().trim()
-  
+
   return store.notes.filter(note => {
     // 先检查搜索条件
-    const matchesSearch = !lowerCaseQuery || 
-      note.title.toLowerCase().includes(lowerCaseQuery) || 
-      note.content.toLowerCase().includes(lowerCaseQuery)
-    
+    const matchesSearch = !lowerCaseQuery || note.title.toLowerCase().includes(lowerCaseQuery) || note.content.toLowerCase().includes(lowerCaseQuery)
+
     if (!matchesSearch) return false
 
     // 再检查文件夹条件
@@ -128,7 +136,9 @@ const filteredNotes = computed(() => {
   })
 })
 
-// Filter and sort notes
+// 过滤并排序便签列表
+// 首先按置顶状态排序，置顶的便签排在前面
+// 然后根据sortBy的值进行二次排序
 const filteredAndSortedNotes = computed(() => {
   return [...filteredNotes.value].sort((a, b) => {
     // 置顶的便签排在前面
@@ -138,9 +148,10 @@ const filteredAndSortedNotes = computed(() => {
     // 根据排序方式排序
     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:
@@ -170,17 +181,17 @@ const allNotesCount = computed(() => {
 })
 
 const handleNotePress = noteId => {
-  // 导航到编辑页面的逻辑将在路由中处理
-  window.location.hash = `#/editor/${noteId}`
+  // 使用vue-router导航到编辑页面
+  router.push(`/editor/${noteId}`)
 }
 
 const handleAddNote = () => {
-  // 导航到编辑页面的逻辑将在路由中处理
-  window.location.hash = '#/editor'
+  // 使用vue-router导航到新建便签页面
+  router.push('/editor')
 }
 
 // 处理Header组件的操作按钮点击事件
-const handleHeaderAction = (actionType) => {
+const handleHeaderAction = actionType => {
   if (actionType === 'create') {
     handleAddNote()
   }
@@ -236,13 +247,14 @@ const confirmDeleteNote = async () => {
   showAlert.value = false
 }
 
+// 处理排序方式切换
+// 循环切换排序选项：按日期 -> 按标题 -> 按星标 -> 按日期...
 const handleSort = () => {
-  // In a full implementation, this would cycle through sort options
   const sortOptions = ['date', 'title', 'starred']
   const currentIndex = sortOptions.indexOf(sortBy.value)
   const nextIndex = (currentIndex + 1) % sortOptions.length
   sortBy.value = sortOptions[nextIndex]
-  console.log('Sort by:', sortOptions[nextIndex])
+  console.log('当前排序方式:', sortOptions[nextIndex])
 }
 
 const handleAllNotesClick = () => {
@@ -261,13 +273,13 @@ const handleTrashNotesClick = () => {
 }
 
 const handleFolderPress = () => {
-  // 导航到文件夹页面的逻辑将在路由中处理
-  window.location.hash = '#/folders'
+  // 使用vue-router导航到文件夹页面
+  router.push('/folders')
 }
 
 const handleSettingsPress = () => {
-  // 导航到设置页面的逻辑将在路由中处理
-  window.location.hash = '#/settings'
+  // 使用vue-router导航到设置页面
+  router.push('/settings')
 }
 
 const handleFolderToggle = () => {
@@ -278,7 +290,7 @@ const handleFolderToggle = () => {
 const handleSearch = query => {
   // 搜索功能已在computed属性filteredAndSortedNotes中实现
   console.log('Search for:', query)
-  
+
   // 可以在这里添加搜索统计或其它功能
   if (query && query.length > 0) {
     console.log(`Found ${filteredAndSortedNotes.value.length} matching notes`)
@@ -288,7 +300,7 @@ const handleSearch = query => {
 const handleClearSearch = () => {
   // 清除搜索已在v-model中处理
   console.log('Search cleared')
-  
+
   // 清除搜索后可以重置一些状态
   setSearchQuery('')
 }
@@ -303,7 +315,8 @@ const handleSearchBlur = () => {
   // 可以在这里添加失去焦点时的特殊处理
 }
 
-// 防抖搜索函数，避免频繁触发搜索
+// 防抖函数，用于避免频繁触发搜索
+// 通过延迟执行函数，只在最后一次调用后执行
 const debounceSearch = (func, delay) => {
   let timeoutId
   return function (...args) {
@@ -312,8 +325,8 @@ const debounceSearch = (func, delay) => {
   }
 }
 
-// 防抖搜索处理
-const debouncedHandleSearch = debounceSearch((query) => {
+// 防抖搜索处理函数，延迟300ms执行搜索
+const debouncedHandleSearch = debounceSearch(query => {
   handleSearch(query)
 }, 300)
 
@@ -382,4 +395,4 @@ const notes = computed(() => store.notes)
 .note-item {
   margin: 0.4rem 0;
 }
-</style>
+</style>