@tnotesjs/core 0.1.15 → 0.1.16

package/vitepress/components/Layout/SidebarNavBefore.vue

@@ -1,108 +1,171 @@
-<template>
-  <div class="sidebar-toggle-wrapper">
-    <div class="group group-left">
-      <!-- 展开/折叠全部按钮 -->
-      <button
-        class="toggle-btn"
-        @click="$emit('toggle-expand')"
-        :title="isExpanded ? '全部折叠' : '全部展开'"
-      >
-        <img :src="icon__fold" class="toggle-icon" alt="切换展开折叠" />
-      </button>
-      <span class="group-label">目录</span>
-    </div>
-
-    <div class="group group-right">
-      <!-- 聚焦到当前笔记按钮 -->
-      <button
-        class="toggle-btn"
-        @click="$emit('focus-current')"
-        title="聚焦到当前笔记（点击切换多个位置）"
-      >
-        <img :src="icon__focus" class="toggle-icon" alt="聚焦当前笔记" />
-      </button>
-
-      <!-- 笔记编号显示切换按钮 -->
-      <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>
-    </div>
-  </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: space-between;
-  padding: 12px 8px 16px;
-  border-bottom: 1px solid var(--vp-c-divider);
-  margin-bottom: 16px;
-}
-
-.group {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.group-label {
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-  user-select: none;
-}
-
-.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>
+<template>
+  <div class="sidebar-toggle-wrapper">
+    <div class="toolbar-row">
+      <div class="group group-left">
+        <!-- 展开/折叠全部按钮 -->
+        <button
+          class="toggle-btn"
+          @click="$emit('toggle-expand')"
+          :title="isExpanded ? '全部折叠' : '全部展开'"
+        >
+          <img :src="icon__fold" class="toggle-icon" alt="切换展开折叠" />
+        </button>
+        <a
+          :class="[
+            'group-label',
+            'group-label-link',
+            { 'is-active': isCatalogActive },
+          ]"
+          :href="catalogLink"
+          :aria-current="isCatalogActive ? 'page' : undefined"
+        >
+          目录
+        </a>
+      </div>
+
+      <div class="group group-right">
+        <!-- 聚焦到当前笔记按钮 -->
+        <button
+          class="toggle-btn"
+          @click="$emit('focus-current')"
+          title="聚焦到当前笔记（点击切换多个位置）"
+        >
+          <img :src="icon__focus" class="toggle-icon" alt="聚焦当前笔记" />
+        </button>
+
+        <!-- 笔记编号显示切换按钮 -->
+        <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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useData, useRoute } from 'vitepress'
+import { computed } from 'vue'
+
+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': []
+}>()
+
+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>
+.sidebar-toggle-wrapper {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 8px 12px;
+  /* border-bottom: 1px solid var(--vp-c-divider); */
+  margin-bottom: 10px;
+  background: var(--vp-sidebar-bg-color, var(--vp-c-bg));
+}
+
+.toolbar-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.group {
+  display: flex;
+  align-items: center;
+  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;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  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: 18px;
+  height: 18px;
+  display: block;
+  transition: transform 0.2s ease;
+}
+
+.toggle-btn:hover .toggle-icon {
+  transform: scale(1.1);
+}
+</style>

package/vitepress/components/Layout/Swiper.vue

@@ -1,167 +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>
+<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

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