fix(docs): fix the selected state of the top navigation bar (#4499)

* fix(@vben/docs): fix the selected state of the top navigation bar

* style(@vben/docs): navigation bar selected item style

docs/.vitepress/config/en.mts

@@ -133,12 +133,19 @@ function sidebarCommercial(): DefaultTheme.SidebarItem[] {
 function nav(): DefaultTheme.NavItem[] {
   return [
     {
+      activeMatch: '^/en/(guide|components)/',
       text: 'Doc',
       items: [
         {
+          activeMatch: '^/en/guide/',
           link: '/en/guide/introduction/vben',
           text: 'Guide',
         },
+        // {
+        //   activeMatch: '^/en/components/',
+        //   link: '/en/components/introduction',
+        //   text: 'Components',
+        // },
         {
           text: 'Historical Versions',
           items: [

docs/.vitepress/config/zh.mts

@@ -176,13 +176,16 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] {
 function nav(): DefaultTheme.NavItem[] {
   return [
     {
+      activeMatch: '^/(guide|components)/',
       text: '文档',
       items: [
         {
+          activeMatch: '^/guide/',
           link: '/guide/introduction/vben',
           text: '指南',
         },
         {
+          activeMatch: '^/components/',
           link: '/components/introduction',
           text: '组件',
         },

docs/.vitepress/theme/styles/base.css

@@ -9,3 +9,14 @@ html.dark {
 .form-valid-error p {
   margin: 0;
 }
+
+/* 顶部导航栏选中项样式 */
+.VPNavBarMenuLink,
+.VPNavBarMenuGroup {
+  border-bottom: 1px solid transparent;
+}
+
+.VPNavBarMenuLink.active,
+.VPNavBarMenuGroup.active {
+  border-bottom-color: var(--vp-c-brand-1);
+}