first commit

src/components/left-area/LeftArea.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { useRouter } from 'vue-router'
+import { useWorkspaceStore } from '@/stores/workspace'
+import { useNotesStore } from '@/stores/notes'
+import { useNotebooksStore } from '@/stores/notebooks'
+import UserProfile from './UserProfile.vue'
+import SearchInput from './SearchInput.vue'
+import AddNoteButton from './AddNoteButton.vue'
+import MenuItem from './MenuItem.vue'
+import NotebookTree from './NotebookTree.vue'
+import { FileText, Tag, Settings, Trash2, PanelLeftClose } from 'lucide-vue-next'
+import { useUiStore } from '@/stores/ui'
+
+const router = useRouter()
+const workspaceStore = useWorkspaceStore()
+const notesStore = useNotesStore()
+const notebooksStore = useNotebooksStore()
+const uiStore = useUiStore()
+
+async function handleSearch(query) {
+  notesStore.setFilter('search', query)
+  router.push({ name: 'search', query: { q: query } })
+}
+
+async function handleAddNote() {
+  const note = await notesStore.createNote()
+  if (note) {
+    router.push({ name: 'note-detail', params: { id: note.id } })
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <!-- 用户信息 + 折叠按钮 -->
+    <div class="flex items-center justify-between px-4 py-3 border-b" :style="{ borderColor: 'var(--p-surface-200)' }">
+      <UserProfile />
+      <button
+        class="p-1.5 rounded-md hover:bg-[var(--p-surface-100)] transition-colors"
+        @click="uiStore.toggleLeft()"
+        title="收起侧边栏"
+      >
+        <PanelLeftClose :size="18" :style="{ color: 'var(--p-surface-500)' }" />
+      </button>
+    </div>
+
+    <!-- 搜索框 + 新建按钮 -->
+    <div class="flex items-center gap-2 px-3 py-2">
+      <SearchInput class="flex-1" @search="handleSearch" />
+      <AddNoteButton @click="handleAddNote" />
+    </div>
+
+    <!-- 菜单项 -->
+    <nav class="flex-1 overflow-y-auto px-2">
+      <MenuItem label="笔记" :icon="FileText" @click="router.push({ name: 'notes' })" />
+      <MenuItem label="标签" :icon="Tag" @click="router.push({ name: 'tags' })" />
+
+      <!-- 笔记本区域 -->
+      <div class="mt-3">
+        <div class="px-3 py-1.5 text-xs font-semibold uppercase tracking-wider" :style="{ color: 'var(--p-surface-400)' }">
+          笔记本
+        </div>
+        <NotebookTree />
+      </div>
+    </nav>
+
+    <!-- 底部固定 -->
+    <div class="border-t px-2 py-2" :style="{ borderColor: 'var(--p-surface-200)' }">
+      <MenuItem label="设置" :icon="Settings" @click="router.push({ name: 'settings' })" />
+      <MenuItem label="废纸篓" :icon="Trash2" @click="router.push({ name: 'trash' })" />
+    </div>
+  </div>
+</template>