@tnotesjs/core 0.1.27 → 0.2.0

package/vitepress/components/Layout/sidebarItemRenderLogic.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  getSidebarItemRenderMode,
+  type SidebarRenderItem,
+} from './sidebarItemRenderLogic'
+
+/** introduction：TNotes 笔记书写规范 → 0027 → Giscus folder */
+const giscusFolderAtDepth2: SidebarRenderItem = {
+  text: '评论功能的技术实现（Giscus）',
+  items: [
+    {
+      text: '⏰ 评论功能的技术实现（Giscus）',
+      link: '/notes/0003. 评论功能的技术实现（Giscus）/README',
+    },
+  ],
+}
+
+describe('sidebarItemRenderLogic', () => {
+  it('renders pure folder at depth 2 when maxDepth is 3 (0027 child)', () => {
+    expect(getSidebarItemRenderMode(giscusFolderAtDepth2, 2, 3)).toBe(
+      'pure-folder',
+    )
+  })
+
+  it('legacy cutoff depth < maxDepth - 1 would hide depth-2 folders', () => {
+    const legacyAllowsGroup = 2 < 3 - 1
+    expect(legacyAllowsGroup).toBe(false)
+  })
+
+  it('parent note at depth 1 still renders as group', () => {
+    const emojiNote: SidebarRenderItem = {
+      text: '✅ emoji 规范',
+      link: '/notes/0027. emoji 规范/README',
+      items: [giscusFolderAtDepth2],
+    }
+    expect(getSidebarItemRenderMode(emojiNote, 1, 3)).toBe('parent-note')
+  })
+
+  it('leaf note at depth 3 renders when maxDepth is 3', () => {
+    const leaf: SidebarRenderItem = {
+      text: '⏰ 0003',
+      link: '/notes/0003. x/README',
+    }
+    expect(getSidebarItemRenderMode(leaf, 3, 3)).toBe('leaf')
+  })
+
+  it('renders depth-2 pure folder when maxDepth is 0 (unlimited)', () => {
+    expect(getSidebarItemRenderMode(giscusFolderAtDepth2, 2, 0)).toBe(
+      'pure-folder',
+    )
+  })
+})

package/vitepress/components/Layout/sidebarItemRenderLogic.ts

@@ -0,0 +1,50 @@
+/**
+ * vitepress/components/Layout/sidebarItemRenderLogic.ts
+ *
+ * 侧边栏项渲染模式：决定 folder / parent-note / leaf / hidden
+ */
+
+export interface SidebarRenderItem {
+  text: string
+  link?: string
+  items?: SidebarRenderItem[]
+}
+
+export type SidebarItemRenderMode =
+  | 'pure-folder'
+  | 'parent-note'
+  | 'leaf'
+  | 'hidden'
+
+export function hasSidebarChildren(item: SidebarRenderItem): boolean {
+  return !!(item.items && item.items.length > 0)
+}
+
+export function isPureSidebarFolder(item: SidebarRenderItem): boolean {
+  return hasSidebarChildren(item) && !item.link
+}
+
+/**
+ * @param maxDepth 最大可见层级（0 或负数表示不限制）
+ */
+export function getSidebarItemRenderMode(
+  item: SidebarRenderItem,
+  depth: number,
+  maxDepth: number,
+): SidebarItemRenderMode {
+  const hasDepthLimit = maxDepth > 0 && Number.isFinite(maxDepth)
+
+  if (isPureSidebarFolder(item) && (!hasDepthLimit || depth < maxDepth)) {
+    return 'pure-folder'
+  }
+
+  if (hasSidebarChildren(item) && (!hasDepthLimit || depth < maxDepth)) {
+    return 'parent-note'
+  }
+
+  if (!hasSidebarChildren(item) && item.link) {
+    return 'leaf'
+  }
+
+  return 'hidden'
+}

package/vitepress/components/MarkMap/MarkMap.vue

@@ -8,6 +8,7 @@ import { Transformer } from 'markmap-lib'
 import { Toolbar } from 'markmap-toolbar'
 import 'markmap-toolbar/dist/style.css'
 import { Markmap, IMarkmapOptions } from 'markmap-view'
+import { onContentUpdated } from 'vitepress'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import { icon__fullscreen, icon__fullscreen_exit, icon__confirm } from '../../assets/icons'
@@ -30,6 +31,10 @@ const containerRef = ref<HTMLDivElement | null>(null)
 let markmapInstance: Markmap | null = null
 let observer: MutationObserver | null = null
 let toolbarEl: HTMLElement | null = null
+let toolbarReinitTimer: ReturnType<typeof setTimeout> | null = null
+let darkClassObserver: MutationObserver | null = null
+
+const isMarkmapDark = ref(false)
 
 // 从 localStorage 读取配置，如果没有则使用 props 或默认值
 const getInitialExpandLevel = () => {
@@ -42,6 +47,9 @@ const getInitialExpandLevel = () => {
 
 const getThemeColorFn = () => {
   if (typeof window !== 'undefined') {
+    if (document.documentElement.classList.contains('markmap-dark')) {
+      return scaleOrdinal(schemeSet3)
+    }
     const theme = localStorage.getItem(MARKMAP_THEME_KEY) || 'default'
     switch (theme) {
       case 'colorful':
@@ -131,6 +139,7 @@ function initToolbar() {
   toolbarEl.style.position = 'absolute'
   toolbarEl.style.top = '1rem'
   toolbarEl.style.right = '.5rem'
+  toolbarEl.style.zIndex = '10'
   toolbarEl.style.scale = '.8'
   const brand = toolbarEl.querySelector('.mm-toolbar-brand')
   if (brand) toolbarEl.removeChild(brand)
@@ -367,7 +376,43 @@ function onUpdateClick() {
   renderMarkmap(decodeURIComponent(props.content || ''), expandLevel.value)
 }
 
+function syncMarkmapDarkState(reRender = false) {
+  const dark = document.documentElement.classList.contains('markmap-dark')
+  const changed = isMarkmapDark.value !== dark
+  isMarkmapDark.value = dark
+  if (typeof window !== 'undefined') {
+    localStorage.setItem(MARKMAP_THEME_KEY, dark ? 'dark' : 'default')
+  }
+  if (reRender && changed && markmapInstance && props.content) {
+    renderMarkmap(decodeURIComponent(props.content || ''), expandLevel.value)
+  }
+}
+
+function ensureToolbarAfterContentUpdate() {
+  if (toolbarReinitTimer) clearTimeout(toolbarReinitTimer)
+  // ContentCollapse.onContentUpdated 会在 ~150ms 后重组 DOM，稍晚再补挂工具栏
+  toolbarReinitTimer = setTimeout(() => {
+    toolbarReinitTimer = null
+    if (!containerRef.value || !markmapInstance) return
+    if (!containerRef.value.querySelector('.mm-toolbar')) {
+      initToolbar()
+    }
+  }, 350)
+}
+
 onMounted(() => {
+  if (typeof window !== 'undefined') {
+    if (localStorage.getItem(MARKMAP_THEME_KEY) === 'dark') {
+      document.documentElement.classList.add('markmap-dark')
+    }
+    syncMarkmapDarkState(false)
+    darkClassObserver = new MutationObserver(() => syncMarkmapDarkState(true))
+    darkClassObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+  }
+
   renderMarkmap(decodeURIComponent(props.content || ''))
 
   // 添加全屏事件监听
@@ -376,7 +421,24 @@ onMounted(() => {
   document.addEventListener('MSFullscreenChange', handleFullscreenChange)
 })
 
+onContentUpdated(() => {
+  ensureToolbarAfterContentUpdate()
+})
+
 onBeforeUnmount(() => {
+  if (darkClassObserver) {
+    darkClassObserver.disconnect()
+    darkClassObserver = null
+  }
+  if (toolbarReinitTimer) {
+    clearTimeout(toolbarReinitTimer)
+    toolbarReinitTimer = null
+  }
+  if (toolbarEl) {
+    toolbarEl.remove()
+    toolbarEl = null
+    toolbarLevelInput = null
+  }
   if (markmapInstance) {
     try {
       markmapInstance.destroy()
@@ -398,6 +460,7 @@ onBeforeUnmount(() => {
 <template>
   <div
     class="markmapContainer"
+    :class="{ 'is-markmap-dark': isMarkmapDark }"
     ref="containerRef"
     style="position: relative"
   >
@@ -434,16 +497,10 @@ onBeforeUnmount(() => {
       animation: pulse 1.5s ease-in-out infinite;
     }
   }
-
-  /* 鼠标悬停显示 toolbar */
-  &:hover :global(.mm-toolbar) {
-    opacity: 1;
-    pointer-events: auto;
-  }
 }
 
 /* dark background */
-:global(.markmap-dark) .markmapContainer {
+.markmapContainer.is-markmap-dark {
   background-color: #1d1d1d;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
 
@@ -534,9 +591,9 @@ onBeforeUnmount(() => {
   box-shadow: none;
 }
 
-:global(.markmap-dark) .markmapContainer:fullscreen,
-:global(.markmap-dark) .markmapContainer:-ms-fullscreen,
-:global(.markmap-dark) .markmapContainer:-webkit-full-screen {
+.markmapContainer.is-markmap-dark:fullscreen,
+.markmapContainer.is-markmap-dark:-ms-fullscreen,
+.markmapContainer.is-markmap-dark:-webkit-full-screen {
   background: #1d1d1d;
 }
 

package/vitepress/components/Settings/Settings.vue

@@ -47,7 +47,7 @@ vitepress/components/Settings/Settings.vue
             <span class="infoWrap">
               <span class="infoIcon">?</span>
               <span class="tooltip">
-                控制侧边栏笔记编号显示，以及目录行距密度。保存后会刷新页面以应用侧边栏配置。
+                控制侧边栏笔记编号显示，以及已完成/未完成笔记前缀。保存后会刷新页面以应用侧边栏配置。
               </span>
             </span>
           </div>
@@ -64,28 +64,6 @@ vitepress/components/Settings/Settings.vue
             <span>显示笔记编号</span>
           </label>
 
-          <div class="controlRow">
-            <span class="controlLabel">目录风格</span>
-            <div class="segmented">
-              <label
-                v-for="option in sidebarDensityOptions"
-                :key="option.value"
-                :class="[
-                  'segment',
-                  { activeSegment: sidebarDensity === option.value },
-                ]"
-              >
-                <input
-                  v-model="sidebarDensity"
-                  type="radio"
-                  name="sidebar-density"
-                  :value="option.value"
-                />
-                <span>{{ option.label }}</span>
-              </label>
-            </div>
-          </div>
-
           <div class="prefixGrid">
             <label class="field">
               <span class="controlLabel">已完成笔记的前缀</span>
@@ -113,26 +91,58 @@ vitepress/components/Settings/Settings.vue
       <div class="settingItem">
         <div class="settingMeta">
           <div class="labelLine">
-            <span class="itemName">MarkMap 思维导图</span>
+            <span class="itemName">正文区域</span>
             <span class="infoWrap">
               <span class="infoIcon">?</span>
               <span class="tooltip">
-                配置 MarkMap 的默认分支配色和初始展开层级。
+                控制笔记正文在中间栏的显示宽度。保存后会刷新页面以应用页宽变更。
               </span>
             </span>
           </div>
+          <span class="statusText">{{
+            contentWidthMode === 'wide' ? '超宽显示' : '标准页宽'
+          }}</span>
         </div>
 
-        <div class="inlineGrid">
-          <label class="field">
-            <span class="controlLabel">分支主题</span>
-            <select v-model="markmapTheme" class="select">
-              <option value="default">默认</option>
-              <option value="colorful">多彩</option>
-              <option value="dark">深色</option>
-            </select>
-          </label>
+        <div class="fieldStack">
+          <div class="controlRow">
+            <span class="controlLabel">页宽模式</span>
+            <div class="segmented segmented-two">
+              <label
+                v-for="option in contentWidthModeOptions"
+                :key="option.value"
+                :class="[
+                  'segment',
+                  { activeSegment: contentWidthMode === option.value },
+                ]"
+              >
+                <input
+                  v-model="contentWidthMode"
+                  type="radio"
+                  name="content-width-mode"
+                  :value="option.value"
+                />
+                <span>{{ option.label }}</span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
 
+      <div class="settingItem">
+        <div class="settingMeta">
+          <div class="labelLine">
+            <span class="itemName">笔记内 MarkMap</span>
+            <span class="infoWrap">
+              <span class="infoIcon">?</span>
+              <span class="tooltip">
+                配置笔记中 markmap 代码块的初始展开层级。
+              </span>
+            </span>
+          </div>
+        </div>
+
+        <div class="inlineGrid">
           <label class="field">
             <span class="controlLabel">展开层级</span>
             <div class="inputWithUnit">
@@ -175,55 +185,53 @@ import { ref, computed, onMounted } from 'vue'
 
 import {
   NOTES_DIR_KEY,
-  MARKMAP_THEME_KEY,
   MARKMAP_EXPAND_LEVEL_KEY,
   SIDEBAR_SHOW_NOTE_ID_KEY,
-  SIDEBAR_DENSITY_KEY,
   SIDEBAR_DONE_PREFIX_KEY,
   SIDEBAR_UNDONE_PREFIX_KEY,
+  CONTENT_WIDTH_MODE_KEY,
 } from '../constants'
 // @ts-expect-error - VitePress Data Loader
 import { data as tnotesConfig } from '../tnotes-config.data'
 
-type SidebarDensity = 'compact' | 'default' | 'loose'
+type ContentWidthMode = 'wide' | 'standard'
 
-const DEFAULT_SIDEBAR_DENSITY: SidebarDensity = 'default'
+const DEFAULT_CONTENT_WIDTH_MODE: ContentWidthMode = 'wide'
 const DEFAULT_DONE_PREFIX = '✅'
 const DEFAULT_UNDONE_PREFIX = '⏰'
-const sidebarDensityOptions: Array<{
+
+const contentWidthModeOptions: Array<{
   label: string
-  value: SidebarDensity
+  value: ContentWidthMode
 }> = [
-  { label: '紧凑', value: 'compact' },
-  { label: '默认', value: 'default' },
-  { label: '宽松', value: 'loose' },
+  { label: '超宽显示', value: 'wide' },
+  { label: '标准页宽', value: 'standard' },
 ]
 
 const path = ref('')
 const originalPath = ref('')
-const markmapTheme = ref('default')
-const originalMarkmapTheme = ref('default')
 const markmapExpandLevel = ref(5)
 const originalMarkmapExpandLevel = ref(5)
 const showNoteId = ref(false)
 const originalShowNoteId = ref(false)
-const sidebarDensity = ref<SidebarDensity>(DEFAULT_SIDEBAR_DENSITY)
-const originalSidebarDensity = ref<SidebarDensity>(DEFAULT_SIDEBAR_DENSITY)
 const donePrefix = ref(DEFAULT_DONE_PREFIX)
 const originalDonePrefix = ref(DEFAULT_DONE_PREFIX)
 const undonePrefix = ref(DEFAULT_UNDONE_PREFIX)
 const originalUndonePrefix = ref(DEFAULT_UNDONE_PREFIX)
+const contentWidthMode = ref<ContentWidthMode>(DEFAULT_CONTENT_WIDTH_MODE)
+const originalContentWidthMode = ref<ContentWidthMode>(
+  DEFAULT_CONTENT_WIDTH_MODE,
+)
 const showSuccessToast = ref(false)
 
 const hasChanges = computed(
   () =>
     path.value !== originalPath.value ||
-    markmapTheme.value !== originalMarkmapTheme.value ||
     markmapExpandLevel.value !== originalMarkmapExpandLevel.value ||
     showNoteId.value !== originalShowNoteId.value ||
-    sidebarDensity.value !== originalSidebarDensity.value ||
     donePrefix.value !== originalDonePrefix.value ||
-    undonePrefix.value !== originalUndonePrefix.value,
+    undonePrefix.value !== originalUndonePrefix.value ||
+    contentWidthMode.value !== originalContentWidthMode.value,
 )
 
 const saveText = computed(() => {
@@ -238,10 +246,6 @@ onMounted(() => {
   path.value = savedPath
   originalPath.value = savedPath
 
-  const savedTheme = localStorage.getItem(MARKMAP_THEME_KEY) || 'default'
-  markmapTheme.value = savedTheme
-  originalMarkmapTheme.value = savedTheme
-
   const savedLevel = localStorage.getItem(MARKMAP_EXPAND_LEVEL_KEY) || '5'
   markmapExpandLevel.value = parseInt(savedLevel, 10)
   originalMarkmapExpandLevel.value = markmapExpandLevel.value
@@ -253,12 +257,6 @@ onMounted(() => {
       : tnotesConfig?.sidebarShowNoteId ?? false
   originalShowNoteId.value = showNoteId.value
 
-  const savedSidebarDensity = normalizeSidebarDensity(
-    localStorage.getItem(SIDEBAR_DENSITY_KEY),
-  )
-  sidebarDensity.value = savedSidebarDensity
-  originalSidebarDensity.value = savedSidebarDensity
-
   const savedDonePrefix = localStorage.getItem(SIDEBAR_DONE_PREFIX_KEY)
   donePrefix.value =
     savedDonePrefix !== null ? savedDonePrefix : DEFAULT_DONE_PREFIX
@@ -268,14 +266,16 @@ onMounted(() => {
   undonePrefix.value =
     savedUndonePrefix !== null ? savedUndonePrefix : DEFAULT_UNDONE_PREFIX
   originalUndonePrefix.value = undonePrefix.value
-})
 
-function normalizeSidebarDensity(value: string | null): SidebarDensity {
-  if (value === 'compact' || value === 'default' || value === 'loose') {
-    return value
-  }
+  const savedContentWidthMode = normalizeContentWidthMode(
+    localStorage.getItem(CONTENT_WIDTH_MODE_KEY),
+  )
+  contentWidthMode.value = savedContentWidthMode
+  originalContentWidthMode.value = savedContentWidthMode
+})
 
-  return DEFAULT_SIDEBAR_DENSITY
+function normalizeContentWidthMode(value: string | null): ContentWidthMode {
+  return value === 'standard' ? 'standard' : 'wide'
 }
 
 function clearPath() {
@@ -288,28 +288,26 @@ function save() {
   try {
     const needReload =
       showNoteId.value !== originalShowNoteId.value ||
-      sidebarDensity.value !== originalSidebarDensity.value ||
       donePrefix.value !== originalDonePrefix.value ||
-      undonePrefix.value !== originalUndonePrefix.value
+      undonePrefix.value !== originalUndonePrefix.value ||
+      contentWidthMode.value !== originalContentWidthMode.value
 
     localStorage.setItem(NOTES_DIR_KEY, path.value)
-    localStorage.setItem(MARKMAP_THEME_KEY, markmapTheme.value)
     localStorage.setItem(
       MARKMAP_EXPAND_LEVEL_KEY,
       markmapExpandLevel.value.toString(),
     )
     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)
+    localStorage.setItem(CONTENT_WIDTH_MODE_KEY, contentWidthMode.value)
 
     originalPath.value = path.value
-    originalMarkmapTheme.value = markmapTheme.value
     originalMarkmapExpandLevel.value = markmapExpandLevel.value
     originalShowNoteId.value = showNoteId.value
-    originalSidebarDensity.value = sidebarDensity.value
     originalDonePrefix.value = donePrefix.value
     originalUndonePrefix.value = undonePrefix.value
+    originalContentWidthMode.value = contentWidthMode.value
 
     showSuccessToast.value = true
     setTimeout(() => {
@@ -329,12 +327,11 @@ function save() {
 
 function reset() {
   path.value = originalPath.value
-  markmapTheme.value = originalMarkmapTheme.value
   markmapExpandLevel.value = originalMarkmapExpandLevel.value
   showNoteId.value = originalShowNoteId.value
-  sidebarDensity.value = originalSidebarDensity.value
   donePrefix.value = originalDonePrefix.value
   undonePrefix.value = originalUndonePrefix.value
+  contentWidthMode.value = originalContentWidthMode.value
 }
 </script>
 
@@ -431,6 +428,8 @@ function reset() {
 
 .inputGroup {
   position: relative;
+  align-self: start;
+  width: 100%;
 }
 
 .input,
@@ -475,6 +474,7 @@ function reset() {
   width: 20px;
   height: 20px;
   padding: 0;
+  line-height: 1;
   color: var(--vp-c-text-3);
   background: transparent;
   border: none;
@@ -536,6 +536,10 @@ function reset() {
   border-radius: 6px;
 }
 
+.segmented-two {
+  grid-template-columns: repeat(2, 1fr);
+}
+
 .segment {
   display: inline-flex;
   align-items: center;