mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
perf(theme): 调整 sidebar 样式与交互
This commit is contained in:
pengzhanbo
parent
9edaeb9dcf
commit
f1c776eb4f
@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import SidebarItems from '@theme-plume/SidebarItems.vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { watchEffect } from 'vue'
|
||||
import { onMounted, ref, watchEffect } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import type { SidebarOptions } from '../../shared'
|
||||
import { useAsideNavbar, useSidebarIndex } from '../composables'
|
||||
@ -21,9 +21,16 @@ watchEffect(() => {
|
||||
initSidebarList(route.path)
|
||||
triggerAsideNavbar(false)
|
||||
})
|
||||
|
||||
const el = ref<HTMLElement | null>(null)
|
||||
onMounted(() => {
|
||||
if (__VUEPRESS_SSR__) return
|
||||
const activeEl = el.value?.querySelector<HTMLElement>('.router-link-active')
|
||||
activeEl && activeEl.scrollIntoView(false)
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<aside class="plume-theme-sidebar-wrapper">
|
||||
<aside :ref="(e) => (el = e)" class="plume-theme-sidebar-wrapper">
|
||||
<SidebarItems
|
||||
v-if="aside.length"
|
||||
class="aside-navbar"
|
||||
@ -38,10 +45,11 @@ watchEffect(() => {
|
||||
.plume-theme-sidebar-wrapper {
|
||||
position: sticky;
|
||||
top: calc(var(--navbar-height) + 1.25rem);
|
||||
width: 20rem;
|
||||
width: 18rem;
|
||||
height: calc(100vh - var(--navbar-height) - 1.25rem);
|
||||
border-right: solid 1px var(--c-border);
|
||||
font-size: 18px;
|
||||
padding-left: 1.25rem;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--c-brand) var(--c-border);
|
||||
@ -57,6 +65,7 @@ watchEffect(() => {
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 3.5px;
|
||||
background-color: var(--c-brand);
|
||||
}
|
||||
|
||||
|
||||
@ -53,9 +53,18 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
|
||||
:class="{ line: deep === 1 }"
|
||||
>
|
||||
<p
|
||||
:class="{ 'sidebar-items-title': deep === 1 }"
|
||||
:class="{
|
||||
'sidebar-items-title': deep === 1,
|
||||
'sidebar-items-subtitle':
|
||||
deep > 1 && sidebar.children && sidebar.children.length,
|
||||
}"
|
||||
@click.self="sidebarClick(sidebar)"
|
||||
>
|
||||
<ArrowRightIcon
|
||||
v-if="deep === 1 && sidebar.children && sidebar.children.length"
|
||||
:class="{ open: sidebar.open }"
|
||||
@click.self="sidebarClick(sidebar)"
|
||||
/>
|
||||
<AutoLink
|
||||
v-if="sidebar.link"
|
||||
:item="{ text: sidebar.text, link: sidebar.link }"
|
||||
@ -63,11 +72,6 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
|
||||
<span v-else @click.self="sidebarClick(sidebar)">
|
||||
{{ sidebar.text }}
|
||||
</span>
|
||||
<ArrowRightIcon
|
||||
v-if="deep === 1 && sidebar.children && sidebar.children.length"
|
||||
:class="{ open: sidebar.open }"
|
||||
@click.self="sidebarClick(sidebar)"
|
||||
/>
|
||||
</p>
|
||||
<SidebarItems
|
||||
v-if="sidebar.children && sidebar.children.length"
|
||||
@ -86,9 +90,9 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
|
||||
padding: 0;
|
||||
li {
|
||||
a {
|
||||
color: var(--c-text);
|
||||
color: var(--c-sidebar-text);
|
||||
margin: 0.25rem 0;
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
|
||||
&:hover {
|
||||
@ -110,18 +114,21 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
|
||||
}
|
||||
|
||||
p.sidebar-items-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
.arrow-right-icon {
|
||||
position: absolute;
|
||||
left: -1.5rem;
|
||||
top: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 0.75rem;
|
||||
transform: rotate(0);
|
||||
transition: transform var(--t-color);
|
||||
color: var(--c-text-quote);
|
||||
|
||||
&.open {
|
||||
transform: rotate(90deg);
|
||||
@ -129,8 +136,13 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
|
||||
}
|
||||
}
|
||||
|
||||
p.sidebar-items-subtitle {
|
||||
color: var(--c-text);
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
&.line {
|
||||
border-bottom: solid 1px var(--c-border);
|
||||
// border-bottom: solid 1px var(--c-border);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
@ -139,12 +151,6 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
|
||||
}
|
||||
.sidebar-items {
|
||||
font-size: 16px;
|
||||
padding-left: 1.25rem;
|
||||
padding-bottom: 0.75rem;
|
||||
|
||||
li a {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,7 +60,7 @@ TopIcon.displayName = 'TopIcon'
|
||||
export const ArrowRightIcon: FunctionalComponent = () =>
|
||||
h(IconBase, { name: 'arrow-right', viewBox: '0 0 1024 1024' }, () =>
|
||||
h('path', {
|
||||
d: 'M761.056 532.128c0.512-0.992 1.344-1.824 1.792-2.848 8.8-18.304 5.92-40.704-9.664-55.424L399.936 139.744c-19.264-18.208-49.632-17.344-67.872 1.888-18.208 19.264-17.376 49.632 1.888 67.872l316.96 299.84-315.712 304.288c-19.072 18.4-19.648 48.768-1.248 67.872 9.408 9.792 21.984 14.688 34.56 14.688 12 0 24-4.48 33.312-13.44l350.048-337.376c0.672-0.672 0.928-1.6 1.6-2.304 0.512-0.48 1.056-0.832 1.568-1.344C757.76 538.88 759.2 535.392 761.056 532.128z',
|
||||
d: 'M709.546667 560.256c-2.389333 2.474667-11.52 13.056-19.968 21.76-49.706667 54.741333-179.370667 144.341333-247.253334 171.690667-10.325333 4.394667-36.394667 13.696-50.304 14.293333-13.354667 0-26.026667-3.072-38.186666-9.301333a79.957333 79.957333 0 0 1-33.92-38.570667c-4.266667-11.221333-10.922667-44.8-10.922667-45.397333-6.656-36.736-10.325333-96.426667-10.325333-162.389334 0-62.848 3.669333-120.106667 9.088-157.397333 0.64-0.597333 7.253333-42.325333 14.549333-56.618667A76.16 76.16 0 0 1 389.632 256h2.389333c18.176 0.64 56.362667 16.853333 56.362667 17.450667 64.213333 27.392 190.890667 112.597333 241.834667 169.216 0 0 14.336 14.549333 20.565333 23.637333 9.728 13.056 14.549333 29.226667 14.549333 45.397333 0 18.048-5.461333 34.858667-15.786666 48.554667z',
|
||||
})
|
||||
)
|
||||
ArrowRightIcon.displayName = 'ArrowRightIcon'
|
||||
|
||||
@ -13,6 +13,8 @@ html.dark {
|
||||
--c-text-lighter: #8b94a8;
|
||||
--c-text-lightest: #8094a8;
|
||||
|
||||
--c-sidebar-text: rgba(195, 195, 195, 0.7);
|
||||
|
||||
--c-border: #3e4c5a;
|
||||
--c-border-dark: #34404c;
|
||||
|
||||
|
||||
@ -20,6 +20,8 @@
|
||||
--c-text-lightest: #6a8bad;
|
||||
--c-text-quote: #999;
|
||||
|
||||
--c-sidebar-text: rgba(60, 60, 60, 0.7);
|
||||
|
||||
// border colors
|
||||
--c-border: #eaecef;
|
||||
--c-border-dark: #dfe2e5;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user