@tnotesjs/core 0.1.16 → 0.1.17

package/package.json

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

package/vitepress/components/Layout/CustomSidebar.vue

@@ -426,37 +426,23 @@ function toggleExpandCollapse() {
 
 // 获取当前笔记的所有出现位置
 function getCurrentNotePositions(): HTMLElement[] {
-  const currentPath = route.path
   const elements: HTMLElement[] = []
 
   if (!navRef.value) {
-    console.log('❌ [getCurrentNotePositions] navRef is null')
     return elements
   }
 
-  console.log('🔍 [getCurrentNotePositions] Current route path:', currentPath)
-
-  // 查找所有激活的笔记项
   const activeItems = navRef.value.querySelectorAll('.nav-item.active')
-  console.log(
-    '🔍 [getCurrentNotePositions] Active nav-items:',
-    activeItems.length
-  )
 
-  activeItems.forEach((item, index) => {
-    const href = item.getAttribute('href')
-    console.log(`🔍 [${index}] Active item href:`, href)
+  activeItems.forEach((item) => {
     elements.push(item as HTMLElement)
   })
 
-  console.log('🎯 [getCurrentNotePositions] Found positions:', elements.length)
   return elements
 }
 
 // 展开指定元素的父级分组
 function expandParentGroup(element: HTMLElement) {
-  console.log('📂 [expandParentGroup] Starting to expand parent groups')
-
   // 查找所有父级 group 元素（从最近的开始）
   let currentElement: HTMLElement | null = element
   const groupsToExpand: string[] = []
@@ -467,11 +453,10 @@ function expandParentGroup(element: HTMLElement) {
       currentElement.closest<HTMLElement>('.group')
     if (!groupElement) break
 
-    const groupTitle = groupElement.querySelector('.group-title span')
-    if (groupTitle) {
-      const groupText = groupTitle.textContent?.trim()
+    const groupTitleText = groupElement.querySelector('.group-title-text')
+    if (groupTitleText) {
+      const groupText = groupTitleText.textContent?.trim()
       if (groupText) {
-        console.log('📌 [expandParentGroup] Found parent group:', groupText)
         groupsToExpand.push(groupText)
       }
     }
@@ -481,57 +466,37 @@ function expandParentGroup(element: HTMLElement) {
       groupElement.parentElement?.closest<HTMLElement>('.group') || null
   }
 
-  console.log(
-    '📋 [expandParentGroup] Groups to expand (inner to outer):',
-    groupsToExpand
-  )
-
   // 从最外层开始展开，逐层向内
   // 但是搜索时要确保在正确的上下文中搜索
   if (groupsToExpand.length === 0) return
 
   // 反转数组，从最外层开始处理
   const outerToInner = [...groupsToExpand].reverse()
-  console.log(
-    '📋 [expandParentGroup] Processing order (outer to inner):',
-    outerToInner
-  )
 
   // 第一层必须从根开始搜索
   let currentContext: SidebarItem[] | null = null
 
   for (let i = 0; i < outerToInner.length; i++) {
     const groupText = outerToInner[i]
-    console.log(`🔄 [expandParentGroup] [${i}] Expanding: "${groupText}"`)
 
     if (i === 0) {
       // 第一层从根搜索
-      console.log(`  🌳 Searching from root`)
       const found = expandGroupRecursive(sidebarGroups.value, groupText)
       if (found) {
         // 找到后，获取这个分组的 items 作为下一层的搜索上下文
         const foundGroup = findGroupByText(sidebarGroups.value, groupText)
         if (foundGroup?.items) {
           currentContext = foundGroup.items
-          console.log(
-            `  ✅ Found and set context for next level (${foundGroup.items.length} items)`
-          )
         }
       }
     } else {
       // 后续层从上一层的上下文中搜索
       if (currentContext) {
-        console.log(
-          `  🔍 Searching in context (${currentContext.length} items)`
-        )
         const found = expandGroupRecursive(currentContext, groupText)
         if (found) {
           const foundGroup = findGroupByText(currentContext, groupText)
           if (foundGroup?.items) {
             currentContext = foundGroup.items
-            console.log(
-              `  ✅ Found and set context for next level (${foundGroup.items.length} items)`
-            )
           }
         }
       }
@@ -560,31 +525,16 @@ function findGroupByText(
 function expandGroupRecursive(
   items: SidebarItem[],
   targetText: string,
-  depth: number = 0
 ): boolean {
-  const indent = '  '.repeat(depth)
-  console.log(
-    `${indent}🔍 [expandGroupRecursive] Searching for "${targetText}" at depth ${depth}`
-  )
-
   for (const item of items) {
-    console.log(`${indent}  📝 Checking item: "${item.text}"`)
-
     if (item.text === targetText) {
-      console.log(`${indent}  ✅ Found target! Setting collapsed = false`)
       item.collapsed = false
       return true
     }
 
     if (item.items) {
-      console.log(
-        `${indent}  📂 Item has ${item.items.length} children, searching...`
-      )
-      const found = expandGroupRecursive(item.items, targetText, depth + 1)
+      const found = expandGroupRecursive(item.items, targetText)
       if (found) {
-        console.log(
-          `${indent}  ✅ Target found in children, expanding current item "${item.text}"`
-        )
         // 如果在子项中找到了，也展开当前项
         item.collapsed = false
         return true
@@ -592,9 +542,6 @@ function expandGroupRecursive(
     }
   }
 
-  console.log(
-    `${indent}❌ [expandGroupRecursive] Target "${targetText}" not found at depth ${depth}`
-  )
   return false
 }
 
@@ -639,11 +586,9 @@ function scrollToElement(element: HTMLElement) {
 
 // 聚焦到当前笔记（支持多个位置切换）
 function focusCurrentNote() {
-  console.log('🎯 [focusCurrentNote] Called')
   const positions = getCurrentNotePositions()
 
   if (positions.length === 0) {
-    console.log('❌ [focusCurrentNote] No positions found')
     return
   }
 
@@ -651,12 +596,6 @@ function focusCurrentNote() {
   currentFocusIndex.value = (currentFocusIndex.value + 1) % positions.length
   const targetElement = positions[currentFocusIndex.value]
 
-  console.log(
-    `🎯 [focusCurrentNote] Focusing position ${currentFocusIndex.value + 1}/${
-      positions.length
-    }`
-  )
-
   // 展开该笔记所在的分组
   expandParentGroup(targetElement)
 

package/vitepress/components/Layout/Layout.vue

@@ -187,6 +187,8 @@
     <!-- <template #nav-screen-content-after>nav-screen-content-after</template> -->
   </Layout>
 
+  <SidebarResizeHandle />
+
   <!-- 全局重命名遮罩：关于面板保存或文件系统重命名时由 useRenameOverlay 控制 -->
   <LoadingPage
     :visible="renameOverlayState.visible"
@@ -226,6 +228,7 @@ import ImagePreview from "./ImagePreview.vue";
 import NavBarSettingsTrigger from "./NavBarSettingsTrigger.vue";
 import NoteStatus from "./NoteStatus.vue";
 import SidebarNavBefore from "./SidebarNavBefore.vue";
+import SidebarResizeHandle from "./SidebarResizeHandle.vue";
 import Swiper from "./Swiper.vue";
 import SettingsDialog from "../Settings/SettingsDialog.vue";
 

package/vitepress/components/Layout/SidebarResizeHandle.vue

@@ -0,0 +1,319 @@
+<template>
+  <div
+    class="sidebar-resize-handle"
+    :class="{
+      'is-hidden': hidden,
+      'is-dragging': isDragging,
+      'is-fullscreen': isContentFullscreen,
+    }"
+  >
+    <div
+      v-if="!hidden"
+      class="resize-hotspot"
+      :aria-label="`拖动调整侧边栏宽度，当前 ${width}px`"
+      role="separator"
+      aria-orientation="vertical"
+      :aria-valuemin="minWidth"
+      :aria-valuemax="maxWidth"
+      :aria-valuenow="width"
+      @mousedown.prevent="startResize"
+    ></div>
+
+    <div v-if="!hidden" class="resize-indicator" aria-hidden="true"></div>
+
+    <button
+      class="sidebar-edge-toggle"
+      type="button"
+      :aria-label="toggleTitle"
+      :aria-pressed="hidden"
+      @click.stop="toggleSidebar"
+    >
+      <img :src="toggleIcon" alt="" />
+      <span class="sidebar-edge-tooltip" role="tooltip">
+        <span>{{ toggleActionText }}</span>
+        <kbd>{{ shortcutText }}</kbd>
+      </span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import { icon__next, icon__prev } from '../../assets/icons'
+import { useSidebarLayout } from './composables/useSidebarLayout'
+
+const {
+  hidden,
+  width,
+  minWidth,
+  maxWidth,
+  initSidebarLayout,
+  toggleSidebar,
+  setSidebarWidth,
+  saveSidebarWidth,
+} = useSidebarLayout()
+
+const isDragging = ref(false)
+const isContentFullscreen = ref(false)
+const shortcutText = ref('Ctrl + Alt + ,')
+let fullscreenObserver: MutationObserver | null = null
+
+const toggleIcon = computed(() => (hidden.value ? icon__next : icon__prev))
+const toggleActionText = computed(() =>
+  hidden.value ? '展开侧边栏' : '收起侧边栏',
+)
+const toggleTitle = computed(
+  () => `${toggleActionText.value}\n${shortcutText.value}`,
+)
+
+onMounted(() => {
+  initSidebarLayout()
+  shortcutText.value = getShortcutText()
+  updateContentFullscreen()
+  fullscreenObserver = new MutationObserver(updateContentFullscreen)
+  fullscreenObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class'],
+  })
+  window.addEventListener('keydown', handleShortcut)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleShortcut)
+  fullscreenObserver?.disconnect()
+  fullscreenObserver = null
+  stopResize()
+})
+
+function startResize(event: MouseEvent) {
+  if (hidden.value || event.button !== 0) return
+
+  isDragging.value = true
+  document.body.classList.add('is-sidebar-resizing')
+  window.addEventListener('mousemove', resize)
+  window.addEventListener('mouseup', stopResize)
+  setSidebarWidth(event.clientX)
+}
+
+function resize(event: MouseEvent) {
+  if (!isDragging.value) return
+
+  setSidebarWidth(event.clientX)
+}
+
+function stopResize() {
+  if (!isDragging.value) return
+
+  isDragging.value = false
+  document.body.classList.remove('is-sidebar-resizing')
+  window.removeEventListener('mousemove', resize)
+  window.removeEventListener('mouseup', stopResize)
+  saveSidebarWidth()
+}
+
+function handleShortcut(event: KeyboardEvent) {
+  if (!isToggleShortcut(event) || isEditableTarget(event.target)) return
+
+  event.preventDefault()
+  toggleSidebar()
+}
+
+function updateContentFullscreen() {
+  isContentFullscreen.value =
+    document.documentElement.classList.contains('content-fullscreen')
+}
+
+function isToggleShortcut(event: KeyboardEvent): boolean {
+  return (
+    (event.ctrlKey || event.metaKey) && event.altKey && event.code === 'Comma'
+  )
+}
+
+function getShortcutText(): string {
+  return isMacPlatform() ? 'Cmd + Option + ,' : 'Ctrl + Alt + ,'
+}
+
+function isMacPlatform(): boolean {
+  if (typeof navigator === 'undefined') return false
+
+  return /Mac|iPhone|iPad|iPod/i.test(navigator.platform)
+}
+
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false
+
+  const tagName = target.tagName.toLowerCase()
+  if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
+    return true
+  }
+
+  return target.isContentEditable || !!target.closest('[contenteditable="true"]')
+}
+</script>
+
+<style scoped>
+.sidebar-resize-handle {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--tn-sidebar-width, 260px) - 5px);
+  z-index: 30;
+  width: 10px;
+  cursor: col-resize;
+}
+
+.sidebar-resize-handle::before {
+  position: absolute;
+  top: var(--vp-nav-height);
+  bottom: 0;
+  left: 4px;
+  width: 2px;
+  background: var(--vp-c-brand-1);
+  border-radius: 999px;
+  box-shadow: 0 0 0 1px var(--vp-c-brand-soft);
+  content: '';
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.18s ease;
+}
+
+.resize-hotspot {
+  position: absolute;
+  top: var(--vp-nav-height);
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.resize-indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 4px;
+  height: 28px;
+  border-right: 1px solid var(--vp-c-brand-1);
+  border-left: 1px solid var(--vp-c-brand-1);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.18s ease;
+}
+
+.sidebar-edge-toggle {
+  position: absolute;
+  top: 220px;
+  left: -2px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 44px;
+  padding: 0;
+  color: var(--vp-c-text-2);
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 7px;
+  box-shadow: var(--vp-shadow-2);
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 0.18s ease,
+    border-color 0.18s ease,
+    background-color 0.18s ease;
+}
+
+.sidebar-edge-toggle img {
+  width: 10px;
+  height: 10px;
+}
+
+.sidebar-edge-tooltip {
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 8px);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 128px;
+  padding: 7px 9px;
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg-elv);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  box-shadow: var(--vp-shadow-2);
+  font-size: 12px;
+  line-height: 18px;
+  opacity: 0;
+  pointer-events: none;
+  text-align: left;
+  transform: translate(2px, -50%);
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease;
+  white-space: nowrap;
+}
+
+.sidebar-edge-tooltip kbd {
+  color: var(--vp-c-text-2);
+  font-family: var(--vp-font-family-mono);
+  font-size: 11px;
+}
+
+.sidebar-edge-toggle:hover .sidebar-edge-tooltip,
+.sidebar-edge-toggle:focus-visible .sidebar-edge-tooltip {
+  opacity: 1;
+  transform: translate(0, -50%);
+}
+
+.sidebar-resize-handle:hover::before,
+.sidebar-resize-handle.is-dragging::before,
+.sidebar-resize-handle:hover .resize-indicator,
+.sidebar-resize-handle.is-dragging .resize-indicator,
+.sidebar-resize-handle:hover .sidebar-edge-toggle,
+.sidebar-resize-handle.is-dragging .sidebar-edge-toggle,
+.sidebar-resize-handle.is-hidden .sidebar-edge-toggle {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.sidebar-edge-toggle:hover {
+  color: var(--vp-c-brand-1);
+  background: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-brand-1);
+}
+
+.sidebar-resize-handle.is-hidden {
+  left: 0;
+  width: 14px;
+  cursor: default;
+}
+
+.sidebar-resize-handle.is-hidden::before,
+.sidebar-resize-handle.is-hidden .resize-indicator {
+  display: none;
+}
+
+.sidebar-resize-handle.is-hidden .sidebar-edge-toggle {
+  left: 0;
+  border-left-color: var(--vp-c-divider);
+  border-radius: 0 7px 7px 0;
+}
+
+:global(body.is-sidebar-resizing),
+:global(body.is-sidebar-resizing *) {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+.sidebar-resize-handle.is-fullscreen {
+  display: none;
+}
+
+@media (max-width: 959px) {
+  .sidebar-resize-handle {
+    display: none;
+  }
+}
+</style>

package/vitepress/components/Layout/ToggleSidebar.vue

@@ -1,36 +1,26 @@
 <!-- .vitepress\components\Layout\ToggleSidebar.vue -->
 <template>
-    <img @click="toggle" :class="$style.sidebarToggleBtn" :aria-pressed="hidden" :title="hidden ? '显示侧边栏' : '隐藏侧边栏'" :src="hidden ? icon__next : icon__prev" alt="" />
+  <img
+    @click="toggleSidebar"
+    :class="$style.sidebarToggleBtn"
+    :aria-pressed="hidden"
+    :title="hidden ? '显示侧边栏' : '隐藏侧边栏'"
+    :src="hidden ? icon__next : icon__prev"
+    alt=""
+  />
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted } from 'vue'
 
 import { icon__next, icon__prev } from '../../assets/icons'
+import { useSidebarLayout } from './composables/useSidebarLayout'
 
-const KEY = 'vp:sidebar:hidden'
-const hidden = ref(false)
+const { hidden, initSidebarLayout, toggleSidebar } = useSidebarLayout()
 
 onMounted(() => {
-  try {
-    hidden.value = localStorage.getItem(KEY) === '1'
-  } catch {}
-  apply(hidden.value)
+  initSidebarLayout()
 })
-
-function apply(val: boolean) {
-  const root = document.documentElement
-  if (val) root.classList.add('hide-sidebar')
-  else root.classList.remove('hide-sidebar')
-}
-
-function toggle() {
-  hidden.value = !hidden.value
-  apply(hidden.value)
-  try {
-    localStorage.setItem(KEY, hidden.value ? '1' : '0')
-  } catch {}
-}
 </script>
 
 <style module src="./ToggleSidebar.module.scss"></style>

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

@@ -0,0 +1,122 @@
+import { ref } from 'vue'
+
+const SIDEBAR_HIDDEN_KEY = 'vp:sidebar:hidden'
+const SIDEBAR_WIDTH_KEY = 'vp:sidebar:width'
+const SIDEBAR_MIN_WIDTH = 260
+const SIDEBAR_MAX_WIDTH = 480
+const SIDEBAR_DEFAULT_WIDTH = 260
+
+const hidden = ref(false)
+const width = ref(SIDEBAR_DEFAULT_WIDTH)
+let initialized = false
+
+function canUseDOM(): boolean {
+  return typeof window !== 'undefined' && typeof document !== 'undefined'
+}
+
+function clampSidebarWidth(nextWidth: number): number {
+  if (!Number.isFinite(nextWidth)) return SIDEBAR_DEFAULT_WIDTH
+
+  return Math.min(
+    SIDEBAR_MAX_WIDTH,
+    Math.max(SIDEBAR_MIN_WIDTH, Math.round(nextWidth)),
+  )
+}
+
+function readStoredWidth(): number {
+  if (!canUseDOM()) return SIDEBAR_DEFAULT_WIDTH
+
+  const savedWidth = window.localStorage.getItem(SIDEBAR_WIDTH_KEY)
+  if (!savedWidth) return SIDEBAR_DEFAULT_WIDTH
+
+  return clampSidebarWidth(Number(savedWidth))
+}
+
+function applyHiddenState(nextHidden: boolean) {
+  if (!canUseDOM()) return
+
+  document.documentElement.classList.toggle('hide-sidebar', nextHidden)
+}
+
+function applySidebarWidth(nextWidth: number, nextHidden = hidden.value) {
+  if (!canUseDOM()) return
+
+  const widthValue = `${clampSidebarWidth(nextWidth)}px`
+  const layoutWidthValue = nextHidden ? '0px' : widthValue
+  document.documentElement.style.setProperty('--tn-sidebar-width', widthValue)
+  document.documentElement.style.setProperty(
+    '--tn-sidebar-layout-width',
+    layoutWidthValue,
+  )
+  document.documentElement.style.setProperty(
+    '--vp-sidebar-width',
+    layoutWidthValue,
+  )
+}
+
+function persistHiddenState(nextHidden: boolean) {
+  if (!canUseDOM()) return
+
+  try {
+    window.localStorage.setItem(SIDEBAR_HIDDEN_KEY, nextHidden ? '1' : '0')
+  } catch {}
+}
+
+function persistSidebarWidth(nextWidth: number) {
+  if (!canUseDOM()) return
+
+  try {
+    window.localStorage.setItem(
+      SIDEBAR_WIDTH_KEY,
+      String(clampSidebarWidth(nextWidth)),
+    )
+  } catch {}
+}
+
+function initSidebarLayout() {
+  if (!canUseDOM()) return
+
+  if (!initialized) {
+    hidden.value = window.localStorage.getItem(SIDEBAR_HIDDEN_KEY) === '1'
+    width.value = readStoredWidth()
+    initialized = true
+  }
+
+  applyHiddenState(hidden.value)
+  applySidebarWidth(width.value, hidden.value)
+}
+
+function setSidebarHidden(nextHidden: boolean) {
+  hidden.value = nextHidden
+  applyHiddenState(hidden.value)
+  applySidebarWidth(width.value, hidden.value)
+  persistHiddenState(hidden.value)
+}
+
+function toggleSidebar() {
+  setSidebarHidden(!hidden.value)
+}
+
+function setSidebarWidth(nextWidth: number) {
+  width.value = clampSidebarWidth(nextWidth)
+  applySidebarWidth(width.value)
+}
+
+function saveSidebarWidth() {
+  persistSidebarWidth(width.value)
+}
+
+export function useSidebarLayout() {
+  return {
+    hidden,
+    width,
+    minWidth: SIDEBAR_MIN_WIDTH,
+    maxWidth: SIDEBAR_MAX_WIDTH,
+    defaultWidth: SIDEBAR_DEFAULT_WIDTH,
+    initSidebarLayout,
+    setSidebarHidden,
+    toggleSidebar,
+    setSidebarWidth,
+    saveSidebarWidth,
+  }
+}

package/vitepress/components/Settings/Settings.vue

@@ -34,26 +34,6 @@
         </div>
       </div>
 
-      <div :class="$style.settingItem">
-        <div :class="$style.settingMeta">
-          <div :class="$style.labelLine">
-            <span :class="$style.itemName">内容区宽度</span>
-            <span :class="$style.infoWrap">
-              <span :class="$style.infoIcon">?</span>
-              <span :class="$style.tooltip">
-                调整文章内容区域的最大宽度。全屏模式下不会限制宽度。
-              </span>
-            </span>
-          </div>
-          <span :class="$style.statusText">{{ contentWidth }}</span>
-        </div>
-
-        <select v-model="contentWidth" :class="$style.select">
-          <option value="688px">标准</option>
-          <option value="755px">较大</option>
-        </select>
-      </div>
-
       <div :class="$style.settingItem">
         <div :class="$style.settingMeta">
           <div :class="$style.labelLine">
@@ -200,7 +180,6 @@ import { data as tnotesConfig } from '../tnotes-config.data'
 
 type SidebarDensity = 'compact' | 'default' | 'loose'
 
-const CONTENT_WIDTH_KEY = 'tnotes-content-width'
 const DEFAULT_SIDEBAR_DENSITY: SidebarDensity = 'default'
 const DEFAULT_DONE_PREFIX = '✅'
 const DEFAULT_UNDONE_PREFIX = '⏰'
@@ -219,8 +198,6 @@ const markmapTheme = ref('default')
 const originalMarkmapTheme = ref('default')
 const markmapExpandLevel = ref(5)
 const originalMarkmapExpandLevel = ref(5)
-const contentWidth = ref('688px')
-const originalContentWidth = ref('688px')
 const showNoteId = ref(false)
 const originalShowNoteId = ref(false)
 const sidebarDensity = ref<SidebarDensity>(DEFAULT_SIDEBAR_DENSITY)
@@ -236,7 +213,6 @@ const hasChanges = computed(
     path.value !== originalPath.value ||
     markmapTheme.value !== originalMarkmapTheme.value ||
     markmapExpandLevel.value !== originalMarkmapExpandLevel.value ||
-    contentWidth.value !== originalContentWidth.value ||
     showNoteId.value !== originalShowNoteId.value ||
     sidebarDensity.value !== originalSidebarDensity.value ||
     donePrefix.value !== originalDonePrefix.value ||
@@ -263,11 +239,6 @@ onMounted(() => {
   markmapExpandLevel.value = parseInt(savedLevel, 10)
   originalMarkmapExpandLevel.value = markmapExpandLevel.value
 
-  const savedWidth = localStorage.getItem(CONTENT_WIDTH_KEY) || '688px'
-  contentWidth.value = savedWidth
-  originalContentWidth.value = savedWidth
-  applyContentWidth()
-
   const savedShowNoteId = localStorage.getItem(SIDEBAR_SHOW_NOTE_ID_KEY)
   showNoteId.value =
     savedShowNoteId !== null
@@ -320,17 +291,14 @@ function save() {
       MARKMAP_EXPAND_LEVEL_KEY,
       markmapExpandLevel.value.toString(),
     )
-    localStorage.setItem(CONTENT_WIDTH_KEY, contentWidth.value)
     localStorage.setItem(SIDEBAR_SHOW_NOTE_ID_KEY, showNoteId.value.toString())
     localStorage.setItem(SIDEBAR_DENSITY_KEY, sidebarDensity.value)
     localStorage.setItem(SIDEBAR_DONE_PREFIX_KEY, donePrefix.value)
     localStorage.setItem(SIDEBAR_UNDONE_PREFIX_KEY, undonePrefix.value)
-    applyContentWidth()
 
     originalPath.value = path.value
     originalMarkmapTheme.value = markmapTheme.value
     originalMarkmapExpandLevel.value = markmapExpandLevel.value
-    originalContentWidth.value = contentWidth.value
     originalShowNoteId.value = showNoteId.value
     originalSidebarDensity.value = sidebarDensity.value
     originalDonePrefix.value = donePrefix.value
@@ -356,21 +324,10 @@ function reset() {
   path.value = originalPath.value
   markmapTheme.value = originalMarkmapTheme.value
   markmapExpandLevel.value = originalMarkmapExpandLevel.value
-  contentWidth.value = originalContentWidth.value
   showNoteId.value = originalShowNoteId.value
   sidebarDensity.value = originalSidebarDensity.value
   donePrefix.value = originalDonePrefix.value
   undonePrefix.value = originalUndonePrefix.value
-  applyContentWidth()
-}
-
-function applyContentWidth() {
-  if (typeof document === 'undefined') return
-
-  document.documentElement.style.setProperty(
-    '--tn-content-width',
-    contentWidth.value,
-  )
 }
 </script>
 

package/vitepress/theme/styles/base.scss

@@ -13,9 +13,6 @@
   /* 品牌色 */
   --vp-c-brand-1: #646cff;
   --vp-c-brand-2: #747bff;
-
-  /* TNotes 自定义变量 */
-  --tn-content-width: 688px;
 }
 
 /* #endregion */
@@ -41,10 +38,14 @@ ul > li.task-list-item > ul {
 }
 
 .vp-doc h2 {
-  // 默认值：
+  // margin 默认值：
   // margin: 48px 0 16px;
   // 缩小上边距
-  // margin: 32px 0 16px;
+  margin: 1rem 0 1rem;
+  // border-top 默认值：
+  // border-top: 1px solid var(--vp-c-divider);
+  // 移除上横线：
+  border-top: none;
 }
 
 /* #endregion */

package/vitepress/theme/styles/components/collapse.scss

@@ -33,7 +33,7 @@
   height: 16px;
   transition: transform 0.25s ease;
   transform: rotate(90deg); /* 默认向下（展开状态）*/
-  opacity: 0.3;
+  opacity: 0;
 }
 
 /* #endregion */
@@ -100,7 +100,7 @@
 h2.collapsible-h2 {
   position: relative !important;
   cursor: pointer !important;
-  padding: 8px 40px 8px 12px !important; /* 右侧预留按钮空间 */
+  padding: 8px 40px 8px 0px !important; /* 右侧预留按钮空间 */
   border-radius: 6px !important;
   transition: all 0.2s ease !important;
 
@@ -111,12 +111,18 @@ h2.collapsible-h2 {
       opacity: 1 !important;
     }
   }
+  .collapse-icon {
+    opacity: 0.3;
+  }
 
   &.collapsed {
     background: var(--vp-c-bg-soft) !important;
-    border: 1px solid var(--vp-c-divider) !important;
+    border: .1px solid var(--vp-c-divider) !important;
+    .collapse-icon {
+      opacity: 0.5;
+    }
     // margin-top: 1rem !important;
-    margin: 12px 0 0 0 !important;
+    // margin: 12px 0 0 0 !important;
 
     .collapse-icon {
       transform: rotate(0deg) !important; /* 折叠时向右 */
@@ -130,7 +136,8 @@ h2.collapsible-h2 {
 
   /* 修复 anchor 位置 */
   .header-anchor {
-    top: 10px !important;
+    // top: 10px !important;
+    display: none !important;
   }
 }
 
@@ -152,7 +159,10 @@ h2.collapsible-h2 {
   overflow: hidden;
   max-height: 10000px;
   opacity: 1;
-  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
+  transition:
+    max-height 0.3s ease,
+    opacity 0.3s ease,
+    margin 0.3s ease;
 
   &.collapsed {
     max-height: 0 !important;

package/vitepress/theme/styles/layout.scss

@@ -5,8 +5,15 @@
  * - 特殊布局模式（侧边栏隐藏、全屏等）
  */
 
+:root {
+  --tn-sidebar-width: 260px;
+  --tn-sidebar-layout-width: var(--tn-sidebar-width);
+  --vp-sidebar-width: var(--tn-sidebar-width);
+}
+
 //  侧边栏样式重写
 .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;
@@ -18,11 +25,18 @@
 /* ===================================== */
 
 .hide-sidebar .VPSidebar {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  overflow: hidden;
   transform: translateX(-100%);
   pointer-events: none;
   transition: transform 0.25s ease, opacity 0.25s ease;
 }
 
+.hide-sidebar .VPNavBarTitle {
+  display: none !important;
+}
+
 .hide-sidebar .VPNavBar {
   background-color: var(--vp-nav-bg-color) !important;
 }
@@ -33,13 +47,6 @@
   padding-left: calc((100vw - var(--vp-layout-max-width)) / 2) !important;
 }
 
-.hide-sidebar .VPDoc .content-container {
-  max-width: calc(
-    var(--vp-sidebar-width) + var(--tn-content-width, 688px) +
-      var(--vp-sidebar-width)
-  ) !important;
-}
-
 /* #endregion */
 
 /* ===================================== */
@@ -48,6 +55,7 @@
 
 .content-fullscreen .VPSidebar,
 .content-fullscreen .VPNav,
+.content-fullscreen .VPLocalNav,
 .content-fullscreen .VPDocFooter,
 .content-fullscreen .VPNavBar {
   display: none !important;

package/vitepress/theme/styles/vitepress-override.scss

@@ -19,7 +19,7 @@
 
 .VPDoc.has-aside .content-container {
   padding: 0 2px !important;
-  max-width: var(--tn-content-width, 688px) !important;
+  max-width: none !important;
 }
 
 /* #endregion */