Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

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);
+}

playground/src/views/examples/captcha/slider-captcha.vue

@@ -27,6 +27,7 @@ const el2 = ref<SliderCaptchaActionType>();
 const el3 = ref<SliderCaptchaActionType>();
 const el4 = ref<SliderCaptchaActionType>();
 const el5 = ref<SliderCaptchaActionType>();
+const el6 = ref<SliderCaptchaActionType>();
 </script>
 
 <template>
@@ -95,7 +96,7 @@ const el5 = ref<SliderCaptchaActionType>();
     </Card>
     <Card class="mb-5" title="自定义内容(slot)">
       <div class="flex items-center justify-center p-4 px-[30%]">
-        <SliderCaptcha ref="el5" @success="handleSuccess">
+        <SliderCaptcha ref="el6" @success="handleSuccess">
           <template #text="{ isPassing }">
             <template v-if="isPassing">
               <Bell class="mr-2 size-4" />
@@ -107,7 +108,7 @@ const el5 = ref<SliderCaptchaActionType>();
             </template>
           </template>
         </SliderCaptcha>
-        <Button class="ml-2" type="primary" @click="handleBtnClick(el5)">
+        <Button class="ml-2" type="primary" @click="handleBtnClick(el6)">
           还原
         </Button>
       </div>