+
diff --git a/src/renderer/src/components/SideBar.vue b/src/renderer/src/components/SideBar.vue
index ad13fef..10f317c 100644
--- a/src/renderer/src/components/SideBar.vue
+++ b/src/renderer/src/components/SideBar.vue
@@ -6,15 +6,23 @@ import IconField from 'primevue/iconfield'
import InputIcon from 'primevue/inputicon'
import ScrollPanel from 'primevue/scrollpanel'
import {
- Search, Plus, File, Star,
- Trash2, Settings, Sun, Moon, Monitor
+ Search, Plus, File, Star, Trash2,
+ Settings, Sun, Moon, Monitor,
+ BookOpen, Tag, ChevronDown, ChevronRight, Hash
} from '@lucide/vue'
import { useTheme } from '../composables/useTheme'
+import { useNotes } from '../composables/useNotes'
import ButtonIcon from "./ButtonIcon.vue";
const { theme, toggleTheme } = useTheme()
+const { searchNotes } = useNotes()
-const emit = defineEmits(['navigate', 'create-note', 'select-notebook', 'select-tag'])
+const props = defineProps({
+ notebooks: { type: Array, default: () => [] },
+ tags: { type: Array, default: () => [] }
+})
+
+const emit = defineEmits(['navigate', 'create-note', 'select-notebook', 'select-tag', 'select-note'])
// Collapse state
const collapsed = ref(false)
@@ -26,27 +34,33 @@ function toggleCollapsed() {
// Navigation state
const activeNav = ref('all')
+// Section expand state
+const expandedSections = ref({
+ notes: true,
+ notebooks: true,
+ tags: true
+})
+
+function toggleSection(section) {
+ expandedSections.value[section] = !expandedSections.value[section]
+}
+
// Search
const searchQuery = ref('')
+const searchResults = ref([])
+let searchTimer = null
-// Mock data - notes for search
-const allNotes = ref([
- { id: 1, title: '项目需求文档', notebook: '工作' },
- { id: 2, title: '读书笔记 - 深入理解计算机系统', notebook: '学习' },
- { id: 3, title: '周报 - 第22周', notebook: '工作' },
- { id: 4, title: 'Vue 3 学习笔记', notebook: '学习' },
- { id: 5, title: '旅行计划 - 日本', notebook: '生活' },
- { id: 6, title: 'Markdown 语法速查表', notebook: '技术' },
- { id: 7, title: '会议纪要 - 产品评审', notebook: '工作' },
- { id: 8, title: '健身计划', notebook: '生活' },
-])
-
-// Filtered notes for search dropdown
-const filteredNotes = computed(() => {
- if (!searchQuery.value) return []
- const q = searchQuery.value.toLowerCase()
- return allNotes.value.filter(n => n.title.toLowerCase().includes(q))
-})
+async function onSearchInput() {
+ if (searchTimer) clearTimeout(searchTimer)
+ const q = searchQuery.value
+ if (!q || q.length < 1) {
+ searchResults.value = []
+ return
+ }
+ searchTimer = setTimeout(async () => {
+ searchResults.value = await searchNotes(q)
+ }, 200)
+}
// Navigation items
const navSections = [
@@ -55,6 +69,7 @@ const navSections = [
items: [
{ id: 'all', icon: File, label: '所有笔记' },
{ id: 'favorites', icon: Star, label: '收藏夹' },
+ { id: 'trash', icon: Trash2, label: '回收站' },
]
}
]
@@ -65,6 +80,16 @@ function handleNav(id) {
emit('navigate', id)
}
+function selectNotebook(notebook) {
+ activeNav.value = `notebook-${notebook.id}`
+ emit('select-notebook', notebook)
+}
+
+function selectTag(tag) {
+ activeNav.value = `tag-${tag.id}`
+ emit('select-tag', tag)
+}
+
function createNote() {
emit('create-note')
}
@@ -72,6 +97,14 @@ function createNote() {
function selectSearchNote(note) {
emit('select-note', note)
searchQuery.value = ''
+ searchResults.value = []
+}
+
+// Get notebook display name for a note
+function getNotebookName(note) {
+ if (note.notebook_name) return note.notebook_name
+ const nb = props.notebooks.find(n => n.id === note.notebook_id)
+ return nb ? nb.name : ''
}
@@ -84,23 +117,23 @@ function selectSearchNote(note) {
-
-
-
+
+
{{ note.title }}
-
{{ note.notebook }}
+
{{ getNotebookName(note) }}