@tnotesjs/core 0.0.2 → 0.0.3

package/vitepress/components/Layout/SidebarNavBefore.vue

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

@@ -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);
+  }
+}

package/vitepress/components/Layout/ToggleFullContent.vue

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

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