85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { useData } from 'vitepress'
|
|
|
|
const { page } = useData()
|
|
|
|
const sidebarItems = {
|
|
'/java/': [
|
|
{ text: '概述', link: '/java/' },
|
|
{ text: '基础语法', link: '/java/basic' },
|
|
{ text: '面向对象', link: '/java/oop' },
|
|
{ text: '集合框架', link: '/java/collection' },
|
|
{ text: '多线程', link: '/java/thread' }
|
|
],
|
|
'/vue/': [
|
|
{ text: '概述', link: '/vue/' },
|
|
{ text: 'Vue3基础', link: '/vue/basic' },
|
|
{ text: '组件开发', link: '/vue/component' },
|
|
{ text: '组合式API', link: '/vue/composition' },
|
|
{ text: '状态管理', link: '/vue/pinia' }
|
|
]
|
|
}
|
|
|
|
function getCurrentSidebar() {
|
|
const path = page.value.relativePath
|
|
for (const [prefix, items] of Object.entries(sidebarItems)) {
|
|
if (path.startsWith(prefix.replace(/^\//, ''))) {
|
|
return { title: prefix === '/java/' ? 'Java 笔记' : 'Vue 笔记', items }
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
const currentSidebar = getCurrentSidebar()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="sidebar" v-if="currentSidebar">
|
|
<h2 class="sidebar-title">{{ currentSidebar.title }}</h2>
|
|
<ul class="sidebar-list">
|
|
<li v-for="item in currentSidebar.items" :key="item.link">
|
|
<a :href="item.link" class="sidebar-link">{{ item.text }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sidebar {
|
|
color: white;
|
|
}
|
|
|
|
.sidebar-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.sidebar-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebar-list li {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.sidebar-link {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
display: block;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.sidebar-link:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
}
|
|
</style>
|