74 lines
2.5 KiB
Vue
74 lines
2.5 KiB
Vue
<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>
|