@tnotesjs/core 0.1.0

package/vitepress/components/Layout/SidebarItems.vue

@@ -0,0 +1,263 @@
+<template>
+  <template v-for="item in items" :key="getItemKey(item)">
+    <!-- 只有在不超过最大层级时才渲染组 -->
+    <div
+      v-if="hasChildren(item) && depth < maxDepth - 1"
+      class="group"
+      :style="getGroupStyle(depth)"
+    >
+      <button
+        class="group-title"
+        :class="`group-title-level-${depth}`"
+        @click="toggleItem(item)"
+      >
+        <span>{{ item.text }}</span>
+
+        <span class="arrow" :class="{ collapsed: item.collapsed }">
+          <img
+            :src="
+              item.collapsed ? icon__sidebar_collapsed : icon__sidebar_opened
+            "
+            alt=""
+          />
+        </span>
+      </button>
+
+      <div v-show="!item.collapsed" class="group-items">
+        <SidebarItems
+          :items="item.items"
+          :depth="depth + 1"
+          :max-depth="maxDepth"
+          :show-note-id="showNoteId"
+          :base="base"
+          :current-path="currentPath"
+          :item-depth="depth"
+        />
+      </div>
+    </div>
+
+    <!-- 如果是链接项，或者是超过最大层级的组，都不渲染 -->
+    <a
+      v-else-if="!hasChildren(item)"
+      :href="getFullLink(item.link)"
+      :class="[
+        'nav-item',
+        { active: isActive(item.link) },
+        `nav-item-${extractNoteIdFromLink(item.link)}`,
+        `nav-item-level-${actualItemDepth + 1}`,
+      ]"
+      :data-note-id="extractNoteIdFromLink(item.link)"
+      :style="getItemStyle(actualItemDepth)"
+    >
+      {{ getNoteDisplayText(item.text, item.link) }}
+    </a>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { icon__sidebar_opened, icon__sidebar_collapsed } from '../../assets/icons'
+
+interface SidebarItem {
+  text: string
+  link?: string
+  items?: SidebarItem[]
+  collapsed?: boolean
+}
+
+interface Props {
+  items: SidebarItem[]
+  depth: number
+  maxDepth: number
+  showNoteId: boolean
+  base: string
+  currentPath: string
+  itemDepth?: number // 用于计算链接项的缩进，默认等于 depth
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  depth: 0,
+  maxDepth: 3,
+  showNoteId: false,
+  base: '/',
+  currentPath: '',
+  itemDepth: undefined,
+})
+
+// 获取实际的 item depth（用于链接项的缩进）
+const actualItemDepth = computed(() => props.itemDepth ?? props.depth)
+
+// 判断项是否有子项
+function hasChildren(item: SidebarItem): boolean {
+  return !!(item.items && item.items.length > 0)
+}
+
+// 获取项的唯一 key
+function getItemKey(item: SidebarItem): string {
+  return item.link || item.text
+}
+
+// 切换项的展开/折叠状态
+function toggleItem(item: SidebarItem) {
+  item.collapsed = !item.collapsed
+}
+
+// 根据深度获取组的缩进样式
+function getGroupStyle(depth: number) {
+  // 从第二层组开始才需要缩进（depth >= 1）
+  if (depth === 0) {
+    return {}
+  }
+  return {
+    paddingLeft: `${depth * 16}px`,
+  }
+}
+
+// 根据深度获取项的缩进样式
+function getItemStyle(depth: number) {
+  // 项的缩进基于其父组的depth
+  // 第一层组（depth=0）的子项不需要额外缩进
+  // 第二层组（depth=1）的子项需要缩进 16px
+  if (depth === 0) {
+    return {}
+  }
+  return {
+    paddingLeft: `${depth * 16}px`,
+  }
+}
+
+// 获取完整链接（包含 base）
+function getFullLink(link?: string) {
+  if (!link) return '#'
+  const cleanLink = link.startsWith('/') ? link.slice(1) : link
+  return props.base + cleanLink
+}
+
+// 判断链接是否激活
+function isActive(link?: string) {
+  if (!link) return false
+  const fullLink = getFullLink(link)
+  const decodedRoutePath = decodeURIComponent(props.currentPath)
+  const decodedFullLink = decodeURIComponent(fullLink)
+
+  return (
+    decodedRoutePath === decodedFullLink ||
+    decodedRoutePath === decodedFullLink + '.html'
+  )
+}
+
+// 从链接中提取笔记 ID
+function extractNoteIdFromLink(link?: string): string | null {
+  if (!link) return null
+  const match = link.match(/\/notes\/(\d{4})\./)
+  return match ? match[1] : null
+}
+
+// 提取文本开头的 emoji
+function extractEmoji(text: string): { emoji: string; rest: string } {
+  const emojiMatch = text.match(
+    /^([\u{1F300}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}✅❌⏰]+)\s*/u
+  )
+
+  if (emojiMatch) {
+    return {
+      emoji: emojiMatch[1],
+      rest: text.slice(emojiMatch[0].length),
+    }
+  }
+
+  return { emoji: '', rest: text }
+}
+
+// 获取笔记显示文本
+function getNoteDisplayText(text: string, link?: string): string {
+  const { emoji, rest } = extractEmoji(text)
+
+  if (props.showNoteId) {
+    if (/^\d{4}\./.test(rest)) {
+      return emoji ? `${emoji} ${rest}` : rest
+    }
+
+    const noteId = extractNoteIdFromLink(link)
+    if (noteId) {
+      return emoji ? `${emoji} ${noteId}. ${rest}` : `${noteId}. ${rest}`
+    }
+
+    return text
+  } else {
+    const cleanRest = rest.replace(/^\d{4}\.\s*/, '')
+    return emoji ? `${emoji} ${cleanRest}` : cleanRest
+  }
+}
+</script>
+
+<style scoped>
+.group {
+  margin-bottom: 16px;
+}
+
+.group-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 6px 0;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: color 0.25s;
+}
+
+.group-title:hover {
+  color: var(--vp-c-brand-1);
+}
+
+.arrow {
+  font-size: 10px;
+  transform: rotate(90deg);
+  transition: transform 0.25s;
+}
+
+.arrow.collapsed {
+  transform: rotate(0deg);
+}
+
+.nav-item {
+  display: block;
+  padding: 4px;
+  color: var(--vp-c-text-2);
+  text-decoration: none;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 24px;
+  transition: all 0.25s;
+}
+
+.nav-item:hover {
+  color: var(--vp-c-brand-1);
+  background-color: var(--vp-c-default-soft);
+}
+
+.nav-item.active {
+  color: var(--vp-c-brand-1);
+  font-weight: 600;
+}
+
+/* 聚焦高亮动画 */
+.nav-item.focus-highlight {
+  animation: focusPulse 1s ease-in-out;
+}
+
+@keyframes focusPulse {
+  0%,
+  100% {
+    background-color: transparent;
+  }
+  50% {
+    background-color: var(--vp-c-brand-soft);
+  }
+}
+</style>

package/vitepress/components/Layout/SidebarNavBefore.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="sidebar-toggle-wrapper">
+    <!-- 笔记编号显示切换按钮 -->
+    <button
+      class="toggle-btn"
+      @click="$emit('toggle-note-id')"
+      :title="showNoteId ? '隐藏笔记编号' : '显示笔记编号'"
+    >
+      <img
+        :src="showNoteId ? icon__number_purple : icon__number_gray"
+        class="toggle-icon"
+        alt="切换笔记编号"
+      />
+    </button>
+
+    <!-- 展开/折叠全部按钮 -->
+    <button
+      class="toggle-btn"
+      @click="$emit('toggle-expand')"
+      :title="isExpanded ? '全部折叠' : '全部展开'"
+    >
+      <img :src="icon__fold" class="toggle-icon" alt="切换展开折叠" />
+    </button>
+
+    <!-- 聚焦到当前笔记按钮 -->
+    <button
+      class="toggle-btn"
+      @click="$emit('focus-current')"
+      title="聚焦到当前笔记（点击切换多个位置）"
+    >
+      <img :src="icon__focus" class="toggle-icon" alt="聚焦当前笔记" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { icon__fold, icon__number_purple, icon__number_gray, icon__focus } from '../../assets/icons'
+
+defineProps<{
+  isExpanded: boolean
+  showNoteId: boolean
+}>()
+
+defineEmits<{
+  'toggle-expand': []
+  'toggle-note-id': []
+  'focus-current': []
+}>()
+</script>
+
+<style scoped>
+.sidebar-toggle-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 0 16px 0;
+  border-bottom: 1px solid var(--vp-c-divider);
+  margin-bottom: 16px;
+}
+
+.toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.toggle-btn:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.toggle-btn:active .toggle-icon {
+  transform: scale(0.95);
+}
+
+.toggle-icon {
+  width: 20px;
+  height: 20px;
+  display: block;
+  transition: transform 0.2s ease;
+}
+
+.toggle-btn:hover .toggle-icon {
+  transform: scale(1.1);
+}
+</style>

package/vitepress/components/Layout/Swiper.vue

@@ -0,0 +1,167 @@
+<template></template>
+
+<script setup>
+import { useData, onContentUpdated } from 'vitepress'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+import 'swiper/css'
+
+const vpData = useData()
+
+const swiperInstances = ref([])
+
+const initSwiper = () => {
+  // 先清理旧实例
+  destroySwiper()
+
+  // 只在客户端动态加载
+  import('swiper').then(({ default: Swiper }) => {
+    import('swiper/modules').then(({ Navigation, Pagination }) => {
+      const wrappers = document.querySelectorAll('.tn-swiper')
+      wrappers.forEach((wrap) => {
+        const container = wrap.querySelector('.swiper-container')
+        const tabsEl = wrap.querySelector('.tn-swiper-tabs')
+        if (!container || !tabsEl) return
+
+        const instance = new Swiper(container, {
+          // loop: false,
+          // TODO 可配置
+          // effect: 'fade',
+          speed: 0, // 禁用动画
+          on: {
+            slideChange: () => {
+              updateActiveTab(wrap, instance.activeIndex)
+              updateContainerHeight(container, instance.activeIndex)
+            },
+            // 在初始化时也设置一次高度
+            afterInit: () => {
+              setTimeout(() => {
+                updateContainerHeight(container, instance.activeIndex)
+              }, 0)
+            },
+          },
+        })
+
+        // 生成 tabs（文案来自 data-title；为空则为 'img'）
+        const slides = wrap.querySelectorAll('.swiper-slide')
+        const isTnTabNavVisible = slides.length >= 2
+        tabsEl.innerHTML = ''
+
+        // 微调 tabs 容器样式
+        if (isTnTabNavVisible) {
+          tabsEl.style.padding = '0 0.8rem 0 3rem'
+        } else {
+          tabsEl.style.padding = '0 0.8rem'
+        }
+
+        // 左按钮 - 上一页
+        if (isTnTabNavVisible) {
+          const prevBtn = document.createElement('button')
+          prevBtn.type = 'button'
+          prevBtn.className = 'tn-tab-nav tn-tab-prev'
+          prevBtn.textContent = '<'
+          prevBtn.title = '上一页'
+          prevBtn.addEventListener('click', () => {
+            if (instance.activeIndex === 0) {
+              // 到头 -> 跳到最后一张
+              instance.slideTo(slides.length - 1)
+            } else {
+              instance.slidePrev()
+            }
+            setTimeout(() => {
+              updateContainerHeight(container, instance.activeIndex)
+            }, 0)
+          })
+          tabsEl.appendChild(prevBtn)
+
+          const line = document.createElement('span')
+          line.className = 'tn-tab-nav tab-tab-line'
+          line.textContent = '/'
+          tabsEl.appendChild(line)
+        }
+
+        slides.forEach((slide, i) => {
+          const label = slide.getAttribute('data-title') || 'img'
+          const btn = document.createElement('button')
+          btn.type = 'button'
+          btn.className = 'tn-tab' + (i === 0 ? ' active' : '')
+          btn.textContent = label
+          btn.addEventListener('click', () => {
+            instance.slideTo(i)
+            // 点击tab时更新高度
+            setTimeout(() => {
+              updateContainerHeight(container, i)
+            }, 0)
+          })
+          tabsEl.appendChild(btn)
+        })
+
+        // 右按钮 - 下一页
+        if (isTnTabNavVisible) {
+          const nextBtn = document.createElement('button')
+          nextBtn.type = 'button'
+          nextBtn.className = 'tn-tab-nav tn-tab-next'
+          nextBtn.textContent = '>'
+          nextBtn.title = '下一页'
+          nextBtn.addEventListener('click', () => {
+            if (instance.activeIndex === slides.length - 1) {
+              // 到头 -> 跳到第一张
+              instance.slideTo(0)
+            } else {
+              instance.slideNext()
+            }
+            setTimeout(() => {
+              updateContainerHeight(container, instance.activeIndex)
+            }, 0)
+          })
+          tabsEl.appendChild(nextBtn)
+        }
+
+        swiperInstances.value.push(instance)
+      })
+    })
+  })
+}
+
+function updateActiveTab(wrap, activeIndex) {
+  const btns = wrap.querySelectorAll('.tn-swiper-tabs .tn-tab')
+  btns.forEach((b, i) => b.classList.toggle('active', i === activeIndex))
+}
+
+// 新增函数：根据当前slide中的图片高度更新容器高度
+function updateContainerHeight(container, activeIndex) {
+  const slides = container.querySelectorAll('.swiper-slide')
+  if (slides[activeIndex]) {
+    const img = slides[activeIndex].querySelector('img')
+    if (img && img.complete) {
+      // 如果图片已加载完成，直接设置高度
+      container.style.height = img.offsetHeight + 'px'
+    } else if (img) {
+      // 如果图片未加载完成，等待加载完成后设置高度
+      img.onload = () => {
+        container.style.height = img.offsetHeight + 'px'
+      }
+    }
+  }
+}
+
+function destroySwiper() {
+  swiperInstances.value.forEach((inst) => {
+    try {
+      inst.destroy(true, true)
+    } catch {}
+  })
+  swiperInstances.value = []
+}
+
+onBeforeUnmount(destroySwiper)
+
+onMounted(() => {
+  initSwiper()
+})
+
+// 监听内容更新（包括 HMR 和路由变化）
+onContentUpdated(() => {
+  initSwiper()
+})
+</script>

package/vitepress/components/Layout/ToggleFullContent.module.scss

@@ -0,0 +1,11 @@
+.contentToggleBtn {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 3px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: var(--vp-c-bg-alt);
+  }
+}

package/vitepress/components/Layout/ToggleFullContent.vue

@@ -0,0 +1,34 @@
+<template>
+  <img @click="toggle" :class="$style.contentToggleBtn" :aria-pressed="full.toString()" :title="full ? '退出全屏内容区' : '全屏显示内容区'" :src="full ? icon__fullscreen_exit : icon__fullscreen" alt=""></img>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { icon__fullscreen, icon__fullscreen_exit } from '../../assets/icons'
+
+const KEY = 'vp:content:fullscreen'
+const full = ref(false)
+
+onMounted(() => {
+  try {
+    full.value = localStorage.getItem(KEY) === '1'
+  } catch {}
+  apply(full.value)
+})
+
+function apply(val: boolean) {
+  const root = document.documentElement
+  if (val) root.classList.add('content-fullscreen')
+  else root.classList.remove('content-fullscreen')
+}
+
+function toggle() {
+  full.value = !full.value
+  apply(full.value)
+  try {
+    localStorage.setItem(KEY, full.value ? '1' : '0')
+  } catch {}
+}
+</script>
+
+<style module src="./ToggleFullContent.module.scss"></style>

package/vitepress/components/Layout/ToggleSidebar.module.scss

@@ -0,0 +1,11 @@
+.sidebarToggleBtn {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 3px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: var(--vp-c-bg-alt);
+  }
+}

package/vitepress/components/Layout/ToggleSidebar.vue

@@ -0,0 +1,35 @@
+<!-- .vitepress\components\Layout\ToggleSidebar.vue -->
+<template>
+    <img @click="toggle" :class="$style.sidebarToggleBtn" :aria-pressed="hidden.toString()" :title="hidden ? '显示侧边栏' : '隐藏侧边栏'" :src="hidden ? icon__next : icon__prev" alt=""></img>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { icon__next, icon__prev } from '../../assets/icons'
+
+const KEY = 'vp:sidebar:hidden'
+const hidden = ref(false)
+
+onMounted(() => {
+  try {
+    hidden.value = localStorage.getItem(KEY) === '1'
+  } catch {}
+  apply(hidden.value)
+})
+
+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/useCollapseControl.ts

@@ -0,0 +1,88 @@
+import { ref, watch } from 'vue'
+import { useRoute } from 'vitepress'
+
+/**
+ * 全局折叠/展开功能
+ */
+export function useCollapseControl() {
+  const route = useRoute()
+  const allCollapsed = ref(false)
+
+  function toggleAllCollapse() {
+    if (typeof document === 'undefined') return
+
+    allCollapsed.value = !allCollapsed.value
+
+    // 获取所有折叠区域
+    const tocHeaders = document.querySelectorAll('.toc-collapse-header')
+    const h2Elements = document.querySelectorAll('.vp-doc h2.collapsible-h2')
+
+    // 切换 TOC 区域
+    tocHeaders.forEach((header) => {
+      const content = header.nextElementSibling
+      if (!content) return
+
+      const isCollapsed = content.classList.contains('collapsed')
+
+      // 根据目标状态决定是否需要切换
+      if (allCollapsed.value && !isCollapsed) {
+        // 需要折叠 - 直接操作 DOM
+        content.classList.add('collapsed')
+        header.classList.add('collapsed')
+        // 保存状态到 localStorage
+        const noteKey = route.path.replace(/\//g, '_')
+        const storageKey = `tnotes_collapse_state_${noteKey}_toc`
+        localStorage.setItem(storageKey, '1')
+      } else if (!allCollapsed.value && isCollapsed) {
+        // 需要展开 - 直接操作 DOM
+        content.classList.remove('collapsed')
+        header.classList.remove('collapsed')
+        // 保存状态到 localStorage
+        const noteKey = route.path.replace(/\//g, '_')
+        const storageKey = `tnotes_collapse_state_${noteKey}_toc`
+        localStorage.setItem(storageKey, '0')
+      }
+    })
+
+    // 切换 H2 区域
+    h2Elements.forEach((h2) => {
+      const content = h2.nextElementSibling
+      if (!content || !content.classList.contains('h2-collapse-content')) return
+
+      const isCollapsed = content.classList.contains('collapsed')
+      const h2Id = h2.id || `h2_${Array.from(h2Elements).indexOf(h2)}`
+
+      // 根据目标状态决定是否需要切换
+      if (allCollapsed.value && !isCollapsed) {
+        // 需要折叠 - 直接操作 DOM
+        content.classList.add('collapsed')
+        h2.classList.add('collapsed')
+        // 保存状态到 localStorage
+        const noteKey = route.path.replace(/\//g, '_')
+        const storageKey = `tnotes_collapse_state_${noteKey}_h2_${h2Id}`
+        localStorage.setItem(storageKey, '1')
+      } else if (!allCollapsed.value && isCollapsed) {
+        // 需要展开 - 直接操作 DOM
+        content.classList.remove('collapsed')
+        h2.classList.remove('collapsed')
+        // 保存状态到 localStorage
+        const noteKey = route.path.replace(/\//g, '_')
+        const storageKey = `tnotes_collapse_state_${noteKey}_h2_${h2Id}`
+        localStorage.setItem(storageKey, '0')
+      }
+    })
+  }
+
+  // 监听路由变化，重置折叠状态
+  watch(
+    () => route.path,
+    () => {
+      allCollapsed.value = false
+    }
+  )
+
+  return {
+    allCollapsed,
+    toggleAllCollapse,
+  }
+}