@tnotesjs/core 0.1.28 → 0.2.0

package/vitepress/components/Layout/SidebarNavBefore.vue

@@ -14,16 +14,6 @@ vitepress/components/Layout/SidebarNavBefore.vue
         >
           <img :src="icon__fold" class="toggle-icon" alt="切换展开折叠" />
         </button>
-        <a
-          :class="[
-            'group-label',
-            'group-label-link',
-            { 'is-active': isCatalogActive },
-          ]"
-          :href="catalogLink"
-        >
-          目录
-        </a>
       </div>
 
       <div class="group group-right">
@@ -54,9 +44,6 @@ vitepress/components/Layout/SidebarNavBefore.vue
 </template>
 
 <script setup lang="ts">
-import { useData, useRoute } from 'vitepress'
-import { computed } from 'vue'
-
 import {
   icon__fold,
   icon__number_purple,
@@ -74,26 +61,6 @@ defineEmits<{
   'toggle-note-id': []
   'focus-current': []
 }>()
-
-const { site } = useData()
-const route = useRoute()
-
-const base = computed(() => site.value.base || '/')
-const catalogLink = computed(() => `${base.value}README`)
-const catalogPath = computed(() => normalizeRoutePath(catalogLink.value))
-const isCatalogActive = computed(() => {
-  const currentPath = normalizeRoutePath(route.path)
-
-  return currentPath === catalogPath.value || currentPath === '/README'
-})
-
-function normalizeRoutePath(path: string): string {
-  const normalizedPath = path.split(/[?#]/)[0].replace(/\.html$/, '')
-
-  return normalizedPath.length > 1
-    ? normalizedPath.replace(/\/$/, '')
-    : normalizedPath
-}
 </script>
 
 <style scoped>
@@ -104,7 +71,7 @@ function normalizeRoutePath(path: string): string {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 10px 8px 12px;
+  padding: 10px 0 12px;
   /* border-bottom: 1px solid var(--vp-c-divider); */
   margin-bottom: 10px;
   background: var(--vp-sidebar-bg-color, var(--vp-c-bg));
@@ -123,22 +90,6 @@ function normalizeRoutePath(path: string): string {
   gap: 4px;
 }
 
-.group-label {
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-  text-decoration: none;
-  user-select: none;
-}
-
-.group-label-link:hover {
-  color: var(--vp-c-brand-1);
-}
-
-.group-label-link.is-active {
-  color: var(--vp-c-brand-1);
-  font-weight: 600;
-}
-
 .toggle-btn {
   display: inline-flex;
   align-items: center;

package/vitepress/components/Layout/SidebarResizeHandle.vue

@@ -38,6 +38,7 @@ vitepress/components/Layout/SidebarResizeHandle.vue
 import { useRoute } from 'vitepress'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
+import { updateResponsiveLayout } from './composables/useDocLayout'
 import { useSidebarLayout } from './composables/useSidebarLayout'
 import { icon__next, icon__prev } from '../../assets/icons'
 
@@ -57,13 +58,11 @@ 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))
 const toggleActionText = computed(() =>
   hidden.value ? '展开侧边栏' : '收起侧边栏',
 )
+const toggleIcon = computed(() => (hidden.value ? icon__next : icon__prev))
 const toggleTitle = computed(
   () => `${toggleActionText.value}\n${shortcutText.value}`,
 )
@@ -102,6 +101,7 @@ function resize(event: MouseEvent) {
   if (!isDragging.value) return
 
   setSidebarWidth(getSidebarWidthFromClientX(event.clientX))
+  updateResponsiveLayout()
 }
 
 function stopResize() {
@@ -112,6 +112,7 @@ function stopResize() {
   window.removeEventListener('mousemove', resize)
   window.removeEventListener('mouseup', stopResize)
   saveSidebarWidth()
+  updateResponsiveLayout()
 }
 
 function handleShortcut(event: KeyboardEvent) {
@@ -125,6 +126,7 @@ function handleShortcut(event: KeyboardEvent) {
 
   event.preventDefault()
   toggleSidebar()
+  updateResponsiveLayout()
 }
 
 watch(
@@ -155,18 +157,7 @@ function getSidebarWidthFromClientX(clientX: number): number {
 }
 
 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)
+  return 0
 }
 
 function isToggleShortcut(event: KeyboardEvent): boolean {
@@ -361,12 +352,4 @@ 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/components/Layout/composables/docLayoutLogic.ts

@@ -0,0 +1,59 @@
+/**
+ * docLayoutLogic.ts
+ *
+ * 语雀式三栏布局的纯函数（可单测，不依赖 VitePress define）
+ */
+
+export type ContentWidthMode = 'wide' | 'standard'
+
+const ASIDE_WIDTH = 300
+const STANDARD_CONTENT_WIDTH = 750
+const WIDE_CONTENT_MIN_WIDTH = 640
+const LAYOUT_PADDING = 16
+/** VitePress 桌面侧栏断点；以下由 VP 自带移动顶栏/抽屉负责 */
+export const DESKTOP_SIDEBAR_BREAKPOINT = 960
+
+function getContentTargetWidth(mode: ContentWidthMode): number {
+  return mode === 'standard' ? STANDARD_CONTENT_WIDTH : WIDE_CONTENT_MIN_WIDTH
+}
+
+export function resolveResponsiveLayoutState(input: {
+  viewportWidth: number
+  sidebarWidth: number
+  userSidebarHidden: boolean
+  contentWidthMode: ContentWidthMode
+  hasAside: boolean
+}): { asideAutoHidden: boolean; sidebarAutoHidden: boolean } {
+  // 移动端不使用桌面三栏降级，避免误隐藏顶栏站点标题
+  if (input.viewportWidth < DESKTOP_SIDEBAR_BREAKPOINT) {
+    return { asideAutoHidden: false, sidebarAutoHidden: false }
+  }
+
+  const sidebarWidth = input.userSidebarHidden ? 0 : input.sidebarWidth
+  const contentTarget = getContentTargetWidth(input.contentWidthMode)
+
+  if (!input.hasAside) {
+    const needSidebarAndContent =
+      sidebarWidth + contentTarget + LAYOUT_PADDING * 2
+
+    return {
+      asideAutoHidden: false,
+      sidebarAutoHidden: input.viewportWidth < needSidebarAndContent,
+    }
+  }
+
+  const needThreeColumns =
+    sidebarWidth + contentTarget + ASIDE_WIDTH + LAYOUT_PADDING * 2
+  const needSidebarAndContent =
+    sidebarWidth + contentTarget + LAYOUT_PADDING * 2
+
+  if (input.viewportWidth < needSidebarAndContent) {
+    return { asideAutoHidden: true, sidebarAutoHidden: true }
+  }
+
+  if (input.viewportWidth < needThreeColumns) {
+    return { asideAutoHidden: true, sidebarAutoHidden: false }
+  }
+
+  return { asideAutoHidden: false, sidebarAutoHidden: false }
+}

package/vitepress/components/Layout/composables/useDocLayout.test.ts

@@ -0,0 +1,69 @@
+/**
+ * useDocLayout.test.ts
+ */
+
+import { describe, expect, it } from 'vitest'
+
+import { resolveResponsiveLayoutState } from './docLayoutLogic'
+
+describe('resolveResponsiveLayoutState', () => {
+  it('keeps three columns on wide viewport', () => {
+    expect(
+      resolveResponsiveLayoutState({
+        viewportWidth: 1600,
+        sidebarWidth: 260,
+        userSidebarHidden: false,
+        contentWidthMode: 'wide',
+        hasAside: true,
+      }),
+    ).toEqual({ asideAutoHidden: false, sidebarAutoHidden: false })
+  })
+
+  it('hides aside first when viewport is medium', () => {
+    expect(
+      resolveResponsiveLayoutState({
+        viewportWidth: 1300,
+        sidebarWidth: 260,
+        userSidebarHidden: false,
+        contentWidthMode: 'standard',
+        hasAside: true,
+      }),
+    ).toEqual({ asideAutoHidden: true, sidebarAutoHidden: false })
+  })
+
+  it('hides aside and sidebar when viewport is narrow', () => {
+    expect(
+      resolveResponsiveLayoutState({
+        viewportWidth: 1000,
+        sidebarWidth: 260,
+        userSidebarHidden: false,
+        contentWidthMode: 'standard',
+        hasAside: true,
+      }),
+    ).toEqual({ asideAutoHidden: true, sidebarAutoHidden: true })
+  })
+
+  it('does not apply auto-collapse on mobile viewport', () => {
+    expect(
+      resolveResponsiveLayoutState({
+        viewportWidth: 375,
+        sidebarWidth: 260,
+        userSidebarHidden: false,
+        contentWidthMode: 'wide',
+        hasAside: true,
+      }),
+    ).toEqual({ asideAutoHidden: false, sidebarAutoHidden: false })
+  })
+
+  it('does not reserve aside space when page has no outline on desktop', () => {
+    expect(
+      resolveResponsiveLayoutState({
+        viewportWidth: 1000,
+        sidebarWidth: 260,
+        userSidebarHidden: false,
+        contentWidthMode: 'standard',
+        hasAside: false,
+      }),
+    ).toEqual({ asideAutoHidden: false, sidebarAutoHidden: true })
+  })
+})

package/vitepress/components/Layout/composables/useDocLayout.ts

@@ -0,0 +1,128 @@
+/**
+ * vitepress/components/Layout/composables/useDocLayout.ts
+ *
+ * 语雀式三栏布局：正文页宽模式 + 视口不足时自动隐藏右栏/左栏
+ */
+
+import { ref } from 'vue'
+
+
+import {
+  resolveResponsiveLayoutState,
+  type ContentWidthMode,
+} from './docLayoutLogic'
+import { useSidebarLayout } from './useSidebarLayout'
+import { CONTENT_WIDTH_MODE_KEY } from '../../constants'
+
+export type { ContentWidthMode } from './docLayoutLogic'
+
+const contentWidthMode = ref<ContentWidthMode>('wide')
+const asideAutoHidden = ref(false)
+let initialized = false
+let resizeListenerAttached = false
+
+function canUseDOM(): boolean {
+  return typeof window !== 'undefined' && typeof document !== 'undefined'
+}
+
+function readContentWidthMode(): ContentWidthMode {
+  if (!canUseDOM()) return 'wide'
+
+  try {
+    const saved = window.localStorage.getItem(CONTENT_WIDTH_MODE_KEY)
+    return saved === 'standard' ? 'standard' : 'wide'
+  } catch {
+    return 'wide'
+  }
+}
+
+function applyContentWidthMode(mode: ContentWidthMode) {
+  if (!canUseDOM()) return
+
+  const root = document.documentElement
+  root.classList.toggle('content-width-wide', mode === 'wide')
+  root.classList.toggle('content-width-standard', mode === 'standard')
+}
+
+function pageHasDocAside(): boolean {
+  if (!canUseDOM()) return false
+  return Boolean(document.querySelector('.VPDoc.has-aside'))
+}
+
+function applyAsideAutoHidden(nextHidden: boolean) {
+  if (!canUseDOM()) return
+
+  asideAutoHidden.value = nextHidden
+  document.documentElement.classList.toggle('aside-auto-hidden', nextHidden)
+}
+
+function applySidebarAutoHidden(nextHidden: boolean) {
+  if (!canUseDOM()) return
+
+  document.documentElement.classList.toggle('sidebar-auto-hidden', nextHidden)
+  const { setSidebarAutoHidden } = useSidebarLayout()
+  setSidebarAutoHidden(nextHidden)
+}
+
+export function updateResponsiveLayout() {
+  if (!canUseDOM()) return
+
+  const { hidden, width } = useSidebarLayout()
+  const next = resolveResponsiveLayoutState({
+    viewportWidth: window.innerWidth,
+    sidebarWidth: width.value,
+    userSidebarHidden: hidden.value,
+    contentWidthMode: contentWidthMode.value,
+    hasAside: pageHasDocAside(),
+  })
+
+  applyAsideAutoHidden(next.asideAutoHidden)
+  applySidebarAutoHidden(next.sidebarAutoHidden)
+}
+
+function handleLayoutResize() {
+  updateResponsiveLayout()
+}
+
+function attachResizeListener() {
+  if (!canUseDOM() || resizeListenerAttached) return
+
+  window.addEventListener('resize', handleLayoutResize, { passive: true })
+  resizeListenerAttached = true
+}
+
+function initDocLayout() {
+  if (!canUseDOM()) return
+
+  useSidebarLayout().initSidebarLayout()
+  contentWidthMode.value = readContentWidthMode()
+  applyContentWidthMode(contentWidthMode.value)
+
+  if (!initialized) {
+    initialized = true
+    attachResizeListener()
+  }
+
+  updateResponsiveLayout()
+}
+
+export function useDocLayout() {
+  return {
+    contentWidthMode,
+    asideAutoHidden,
+    initDocLayout,
+    updateResponsiveLayout,
+    readContentWidthMode,
+    applyContentWidthMode,
+  }
+}
+
+export function persistContentWidthMode(mode: ContentWidthMode) {
+  if (!canUseDOM()) return
+
+  try {
+    window.localStorage.setItem(CONTENT_WIDTH_MODE_KEY, mode)
+  } catch {
+    // ignore quota / privacy mode
+  }
+}