diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue index 45b7ed0..d5f0ef2 100644 --- a/docs/.vitepress/theme/Layout.vue +++ b/docs/.vitepress/theme/Layout.vue @@ -429,19 +429,24 @@ watch(sidebarCollapsed, (collapsed) => { - + + @@ -598,32 +603,55 @@ watch(sidebarCollapsed, (collapsed) => { background: var(--vp-c-bg-soft); } -/* 分界线上的收起按钮 */ -.ev-sidebar-toggle-btn { +/* 左侧边缘悬停区域 */ +.ev-sidebar-hover-area { display: none; position: fixed; + top: 0; + left: calc(var(--vp-sidebar-width, 272px) - 16px); + width: 24px; + height: 100vh; + z-index: 30; +} +.ev-sidebar-hover-area.collapsed { + left: 0; +} + +/* 分界线上的收起按钮 */ +.ev-sidebar-toggle-btn { + display: flex; + position: absolute; top: 50%; transform: translateY(-50%); - left: calc(var(--vp-sidebar-width, 272px) - 12px); - z-index: 30; - width: 24px; - height: 48px; + left: 6px; + width: 18px; + height: 36px; border: 1px solid var(--vp-c-divider); - border-radius: 0 6px 6px 0; - background: var(--vp-c-bg); + border-radius: 0 4px 4px 0; + background: var(--vp-c-bg-soft); color: var(--vp-c-text-3); cursor: pointer; align-items: center; justify-content: center; - transition: left 0.3s ease, opacity 0.2s; + transition: opacity 0.5s ease; + opacity: 0; + animation: ev-sidebar-btn-flash 2.5s ease-out 0.5s; +} +@keyframes ev-sidebar-btn-flash { + 0% { opacity: 0; } + 20% { opacity: 0.7; } + 60% { opacity: 0.7; } + 100% { opacity: 0; } } .ev-sidebar-toggle-btn:hover { color: var(--vp-c-text-1); - border-color: var(--vp-c-brand); + background: var(--vp-c-bg); + opacity: 1; + animation: none; } -.ev-sidebar-toggle-btn.collapsed { - left: 0; - border-radius: 0 6px 6px 0; +.ev-sidebar-hover-area:hover .ev-sidebar-toggle-btn { + opacity: 0.7; + animation: none; } /* 桌面端才显示按钮 */ @@ -631,15 +659,15 @@ watch(sidebarCollapsed, (collapsed) => { .ev-sidebar-nav-btn { display: inline-flex; } - .ev-sidebar-toggle-btn { - display: inline-flex; + .ev-sidebar-hover-area { + display: block; } } /* @1440px 时分界线按钮跟随侧边栏实际宽度 */ @media (min-width: 1440px) { - .ev-sidebar-toggle-btn:not(.collapsed) { - left: calc((100% - (var(--vp-layout-max-width, 1440px) - 64px)) / 2 + var(--vp-sidebar-width, 272px) - 32px - 12px); + .ev-sidebar-hover-area:not(.collapsed) { + left: calc((100% - (var(--vp-layout-max-width, 1440px) - 64px)) / 2 + var(--vp-sidebar-width, 272px) - 32px - 16px); } }