@tnotesjs/core 0.1.15 → 0.1.17

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,35 +1,35 @@
-<template>
-  <img @click="toggle" :class="$style.contentToggleBtn" :aria-pressed="full" :title="full ? '退出全屏内容区' : '全屏显示内容区'" :src="full ? icon__fullscreen_exit : icon__fullscreen" alt="" />
-</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" :title="full ? '退出全屏内容区' : '全屏显示内容区'" :src="full ? icon__fullscreen_exit : icon__fullscreen" alt="" />
+</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);
+  }
+}

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="" />
-</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>
+<!-- .vitepress\components\Layout\ToggleSidebar.vue -->
+<template>
+  <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 } from 'vue'
+
+import { icon__next, icon__prev } from '../../assets/icons'
+import { useSidebarLayout } from './composables/useSidebarLayout'
+
+const { hidden, initSidebarLayout, toggleSidebar } = useSidebarLayout()
+
+onMounted(() => {
+  initSidebarLayout()
+})
+</script>
+
+<style module src="./ToggleSidebar.module.scss"></style>