48 lines
1.1 KiB
Vue
48 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { Cable, Component } from '@lucide/vue'
|
|
import { useRoute, withBase } from 'vitepress'
|
|
import type { Component as VueComponent } from 'vue'
|
|
|
|
const route = useRoute()
|
|
|
|
const sections: Array<{
|
|
to: string
|
|
prefix: string
|
|
label: string
|
|
icon: VueComponent
|
|
}> = [
|
|
{
|
|
to: '/ui/usage/getting-started',
|
|
prefix: '/ui',
|
|
label: 'UI 组件库',
|
|
icon: Component,
|
|
},
|
|
{
|
|
to: '/api/getting-started',
|
|
prefix: '/api',
|
|
label: '接口文档',
|
|
icon: Cable,
|
|
},
|
|
]
|
|
|
|
function isSectionActive(prefix: string) {
|
|
return route.path === prefix || route.path.startsWith(`${prefix}/`)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="g3-header-sections" aria-label="文档板块">
|
|
<a
|
|
v-for="section in sections"
|
|
:key="section.prefix"
|
|
class="g3-header-section"
|
|
:class="{ 'is-active': isSectionActive(section.prefix) }"
|
|
:href="withBase(section.to)"
|
|
:aria-current="isSectionActive(section.prefix) ? 'page' : undefined"
|
|
>
|
|
<component :is="section.icon" :size="16" :stroke-width="1.8" aria-hidden="true" />
|
|
<span>{{ section.label }}</span>
|
|
</a>
|
|
</nav>
|
|
</template>
|