yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

perf(theme): 优化sidebar 交互

Browse Source
This commit is contained in:
pengzhanbo 2024-03-25 01:06:44 +08:00
parent 5908363aca
commit 6ce97965a1
3 changed files with 42 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
theme/src/client/components/SidebarItem.vue
View File

@ -171,6 +171,12 @@ function onCaretClick() {
color: var(--vp-c-text-2);
}
.sidebar-item.level-0.has-active > .item > .text,
.sidebar-item.level-1.has-active > .item > .text,
.sidebar-item.level-2.has-active > .item > .text,
.sidebar-item.level-3.has-active > .item > .text,
.sidebar-item.level-4.has-active > .item > .text,
.sidebar-item.level-5.has-active > .item > .text,
.sidebar-item.level-0.has-active > .item > .link > .text,
.sidebar-item.level-1.has-active > .item > .link > .text,
.sidebar-item.level-2.has-active > .item > .link > .text,

12
theme/src/client/composables/hash.ts Normal file
View File

@ -0,0 +1,12 @@
import { ref } from 'vue'
import { inBrowser } from '../utils/index.js'
const hashRef = ref(inBrowser ? location.hash : '')
if (inBrowser) {
window.addEventListener('hashchange', () => {
hashRef.value = location.hash
})
}
export { hashRef }

31
theme/src/client/composables/sidebar.ts
View File

@ -7,13 +7,16 @@ import type {
import { useNotesData } from '@vuepress-plume/plugin-notes-data/client'
import { useMediaQuery } from '@vueuse/core'
import type { ComputedRef, Ref } from 'vue'
import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
import { computed, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue'
import type { PlumeThemePageData } from '../../shared/index.js'
import { isActive } from '../utils/index.js'
import { useThemeLocaleData } from './themeData.js'
import { hashRef } from './hash.js'
export { useNotesData }
export function normalizePath(path: string) {
return path.replace(/\/\\+/g, '/').replace(/\\+/g, '/')
return path.replace(/\/\\+/g, '/').replace(/\/+/g, '/')
}
export function getSidebarList(path: string, notesData: NotesData) {
@ -23,6 +26,16 @@ export function getSidebarList(path: string, notesData: NotesData) {
return link ? notesData[link] : []
}
export function getSidebarFirstLink(sidebar: NotesSidebarItem[]) {
for (const item of sidebar) {
if (item.link)
return item.link
if (item.items)
return getSidebarFirstLink(item.items as NotesSidebarItem[])
}
return ''
}
export function useSidebar() {
const route = useRoute()
const notesData = useNotesData()
@ -112,19 +125,23 @@ export function useCloseSidebarOnEscape(
export function useSidebarControl(item: ComputedRef<NotesSidebarItem>) {
const page = usePageData<PageData>()
const collapsed = ref(false)
const collapsed = ref(item.value.collapsed ?? false)
const collapsible = computed(() => {
return item.value.collapsed != null
return item.value.collapsed !== null && item.value.collapsed !== undefined
})
const isLink = computed(() => {
return !!item.value.link
})
const isActiveLink = computed(() => {
return isActive(page.value.path, item.value.link)
})
const isActiveLink = ref(false)
const updateIsActiveLink = () => {
isActiveLink.value = isActive(page.value.path, item.value.link)
}
watch([page, item, hashRef], updateIsActiveLink)
onMounted(updateIsActiveLink)
const hasActiveLink = computed(() => {
if (isActiveLink.value)