@tnotesjs/core 0.1.23 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tnotesjs/core",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "description": "TNotes 知识库核心框架 —— 基于 VitePress 的笔记管理系统",
   "type": "module",
   "packageManager": "pnpm@10.17.1",

package/vitepress/components/Layout/SidebarResizeHandle.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    v-if="isSidebarAvailable"
     class="sidebar-resize-handle"
     :class="{
       'is-hidden': hidden,
@@ -30,7 +31,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vitepress'
 
 import { useSidebarLayout } from './composables/useSidebarLayout'
 import { icon__next, icon__prev } from '../../assets/icons'
@@ -46,9 +48,12 @@ const {
   saveSidebarWidth,
 } = useSidebarLayout()
 
+const route = useRoute()
 const isDragging = ref(false)
 const isContentFullscreen = ref(false)
+const isSidebarAvailable = ref(false)
 const shortcutText = ref('Ctrl + Alt + ,')
+const WIDE_LAYOUT_MIN_WIDTH = 1440
 let fullscreenObserver: MutationObserver | null = null
 
 const toggleIcon = computed(() => (hidden.value ? icon__next : icon__prev))
@@ -62,6 +67,7 @@ const toggleTitle = computed(
 onMounted(() => {
   initSidebarLayout()
   shortcutText.value = getShortcutText()
+  updateSidebarAvailability()
   updateContentFullscreen()
   fullscreenObserver = new MutationObserver(updateContentFullscreen)
   fullscreenObserver.observe(document.documentElement, {
@@ -85,13 +91,13 @@ function startResize(event: MouseEvent) {
   document.body.classList.add('is-sidebar-resizing')
   window.addEventListener('mousemove', resize)
   window.addEventListener('mouseup', stopResize)
-  setSidebarWidth(event.clientX)
+  setSidebarWidth(getSidebarWidthFromClientX(event.clientX))
 }
 
 function resize(event: MouseEvent) {
   if (!isDragging.value) return
 
-  setSidebarWidth(event.clientX)
+  setSidebarWidth(getSidebarWidthFromClientX(event.clientX))
 }
 
 function stopResize() {
@@ -105,17 +111,60 @@ function stopResize() {
 }
 
 function handleShortcut(event: KeyboardEvent) {
-  if (!isToggleShortcut(event) || isEditableTarget(event.target)) return
+  if (
+    !isSidebarAvailable.value ||
+    !isToggleShortcut(event) ||
+    isEditableTarget(event.target)
+  ) {
+    return
+  }
 
   event.preventDefault()
   toggleSidebar()
 }
 
+watch(
+  () => route.path,
+  async () => {
+    await nextTick()
+    updateSidebarAvailability()
+    updateContentFullscreen()
+  },
+)
+
+function updateSidebarAvailability() {
+  if (typeof document === 'undefined') return
+
+  isSidebarAvailable.value = Boolean(
+    document.querySelector('.VPContent.has-sidebar') &&
+      document.querySelector('.VPSidebar'),
+  )
+}
+
 function updateContentFullscreen() {
   isContentFullscreen.value =
     document.documentElement.classList.contains('content-fullscreen')
 }
 
+function getSidebarWidthFromClientX(clientX: number): number {
+  return clientX - getSidebarLayoutOffset()
+}
+
+function getSidebarLayoutOffset(): number {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return 0
+  if (window.innerWidth < WIDE_LAYOUT_MIN_WIDTH) return 0
+
+  const layoutMaxWidth = Number.parseFloat(
+    window
+      .getComputedStyle(document.documentElement)
+      .getPropertyValue('--vp-layout-max-width'),
+  )
+
+  if (!Number.isFinite(layoutMaxWidth)) return 0
+
+  return Math.max(0, (window.innerWidth - layoutMaxWidth) / 2)
+}
+
 function isToggleShortcut(event: KeyboardEvent): boolean {
   return (
     (event.ctrlKey || event.metaKey) && event.altKey && event.code === 'Comma'
@@ -308,4 +357,12 @@ function isEditableTarget(target: EventTarget | null): boolean {
     display: none;
   }
 }
+
+@media (min-width: 1440px) {
+  .sidebar-resize-handle {
+    left: calc(
+      (100vw - var(--vp-layout-max-width)) / 2 + var(--tn-sidebar-width, 260px) - 5px
+    );
+  }
+}
 </style>

package/vitepress/theme/styles/layout.scss

@@ -11,12 +11,9 @@
   --vp-sidebar-width: var(--tn-sidebar-width);
 }
 
-//  侧边栏样式重写
+// 保留 VitePress 对侧边栏宽屏居中的 left/width/padding-left 计算。
 .VPSidebar {
-  width: var(--tn-sidebar-layout-width, var(--tn-sidebar-width)) !important;
   padding-top: var(--vp-nav-height) !important;
-  padding-left: 1rem !important;
-  padding-right: 1rem !important;
   padding-bottom: 1rem !important;
 }
 
@@ -33,16 +30,20 @@
   transition: transform 0.25s ease, opacity 0.25s ease;
 }
 
-.hide-sidebar .VPNavBarTitle {
+.hide-sidebar .VPNavBar.has-sidebar .VPNavBarTitle {
   display: none !important;
 }
 
-.hide-sidebar .VPNavBar {
+.hide-sidebar .VPNavBar.has-sidebar {
   background-color: var(--vp-nav-bg-color) !important;
 }
 
+.hide-sidebar .VPNavBar.has-sidebar .divider {
+  padding-left: 0 !important;
+}
+
 /* 主体内容往左补齐，与导航栏标题左对齐 */
-.hide-sidebar .VPContent {
+.hide-sidebar .VPContent.has-sidebar {
   margin-left: 0 !important;
   padding-left: calc((100vw - var(--vp-layout-max-width)) / 2) !important;
 }