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

补充注释；

src/main.js

@@ -3,30 +3,48 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 
-// Pages
+// 导入页面组件
+// 便签列表页面
 import NoteListPage from './pages/NoteListPage.vue'
+// 便签编辑页面（用于新建和编辑便签）
 import NoteEditorPage from './pages/NoteEditorPage.vue'
+// 文件夹管理页面
 import FolderPage from './pages/FolderPage.vue'
+// 设置页面
 import SettingsPage from './pages/SettingsPage.vue'
 
-// Router
+// 配置路由规则
+// 定义应用的所有路由路径和对应的组件
 const routes = [
+  // 根路径重定向到便签列表页面
   { path: '/', redirect: '/notes' },
+  // 便签列表页面路由
   { path: '/notes', component: NoteListPage },
+  // 编辑便签页面路由（带便签ID参数）
   { path: '/notes/:id', component: NoteEditorPage, props: true },
+  // 新建便签页面路由
   { path: '/editor', component: NoteEditorPage },
+  // 编辑便签页面路由（带便签ID参数）
   { path: '/editor/:id', component: NoteEditorPage, props: true },
+  // 文件夹管理页面路由
   { path: '/folders', component: FolderPage },
+  // 设置页面路由
   { path: '/settings', component: SettingsPage }
 ]
 
+// 创建路由实例
+// 使用Hash模式以支持静态文件部署
 const router = createRouter({
   history: createWebHashHistory(),
   routes
 })
 
-// App
+// 创建并挂载Vue应用实例
+// 配置Pinia状态管理和Vue Router路由
 const app = createApp(App)
+// 使用Pinia进行状态管理
 app.use(createPinia())
+// 使用Vue Router进行路由管理
 app.use(router)
+// 挂载应用到DOM元素
 app.mount('#app')