u

code/g3soft-libs/docs/.vitepress/theme/HeaderSections.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { Cable, Component, LayoutDashboard } 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: '/framework/layout',
+    prefix: '/framework',
+    label: '框架',
+    icon: LayoutDashboard,
+  },
+  {
+    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>