@tnotesjs/core 0.0.1 → 0.0.3

package/vitepress/components/CodeBlockFullscreen/index.ts

@@ -1,115 +1,115 @@
-import { onMounted, onUnmounted } from 'vue'
-import { createApp } from 'vue'
-import CodeBlockFullscreen from './CodeBlockFullscreen.vue'
-
-export function useCodeBlockFullscreen() {
-  let fullscreenApp: any = null
-  let fullscreenContainer: HTMLElement | null = null
-
-  function addFullscreenButtons() {
-    // 找到所有代码块
-    const codeBlocks = document.querySelectorAll('div[class*="language-"]')
-
-    codeBlocks.forEach((block) => {
-      // 避免重复添加按钮
-      if (block.querySelector('.fullscreen-btn')) return
-
-      // 创建全屏按钮
-      const button = document.createElement('button')
-      button.className = 'fullscreen-btn'
-      button.title = '全屏查看代码'
-      button.innerHTML = `
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
-        </svg>
-      `
-
-      // 点击事件
-      button.addEventListener('click', () => {
-        openFullscreen(block as HTMLElement)
-      })
-
-      // 添加按钮到代码块
-      block.appendChild(button)
-    })
-  }
-
-  function openFullscreen(codeBlock: HTMLElement) {
-    // 获取代码内容
-    const pre = codeBlock.querySelector('pre')
-    if (!pre) return
-
-    const codeHtml = pre.outerHTML
-
-    // 提取语言
-    const classList = Array.from(codeBlock.classList)
-    const languageClass = classList.find((c) => c.startsWith('language-'))
-    const language = languageClass
-      ? languageClass.replace('language-', '').toUpperCase()
-      : undefined
-
-    // 提取文件名（如果有）
-    const filenameSpan = codeBlock.querySelector('.lang')
-    const filename = filenameSpan?.textContent?.trim()
-
-    // 创建全屏组件容器
-    if (!fullscreenContainer) {
-      fullscreenContainer = document.createElement('div')
-      document.body.appendChild(fullscreenContainer)
-    }
-
-    // 创建 Vue 应用
-    fullscreenApp = createApp(CodeBlockFullscreen, {
-      isFullscreen: true,
-      codeHtml,
-      language,
-      filename,
-      'onUpdate:isFullscreen': (value: boolean) => {
-        if (!value) {
-          closeFullscreen()
-        }
-      },
-    })
-
-    fullscreenApp.mount(fullscreenContainer)
-  }
-
-  function closeFullscreen() {
-    if (fullscreenApp) {
-      fullscreenApp.unmount()
-      fullscreenApp = null
-    }
-    if (fullscreenContainer && fullscreenContainer.parentNode) {
-      fullscreenContainer.parentNode.removeChild(fullscreenContainer)
-      fullscreenContainer = null
-    }
-  }
-
-  function cleanup() {
-    closeFullscreen()
-    // 移除所有全屏按钮
-    document.querySelectorAll('.fullscreen-btn').forEach((btn) => btn.remove())
-  }
-
-  onMounted(() => {
-    // 初始化
-    setTimeout(() => {
-      addFullscreenButtons()
-    }, 100)
-
-    // 监听路由变化
-    const observer = new MutationObserver(() => {
-      addFullscreenButtons()
-    })
-
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true,
-    })
-
-    onUnmounted(() => {
-      observer.disconnect()
-      cleanup()
-    })
-  })
-}
+import { onMounted, onUnmounted } from 'vue'
+import { createApp } from 'vue'
+import CodeBlockFullscreen from './CodeBlockFullscreen.vue'
+
+export function useCodeBlockFullscreen() {
+  let fullscreenApp: any = null
+  let fullscreenContainer: HTMLElement | null = null
+
+  function addFullscreenButtons() {
+    // 找到所有代码块
+    const codeBlocks = document.querySelectorAll('div[class*="language-"]')
+
+    codeBlocks.forEach((block) => {
+      // 避免重复添加按钮
+      if (block.querySelector('.fullscreen-btn')) return
+
+      // 创建全屏按钮
+      const button = document.createElement('button')
+      button.className = 'fullscreen-btn'
+      button.title = '全屏查看代码'
+      button.innerHTML = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
+        </svg>
+      `
+
+      // 点击事件
+      button.addEventListener('click', () => {
+        openFullscreen(block as HTMLElement)
+      })
+
+      // 添加按钮到代码块
+      block.appendChild(button)
+    })
+  }
+
+  function openFullscreen(codeBlock: HTMLElement) {
+    // 获取代码内容
+    const pre = codeBlock.querySelector('pre')
+    if (!pre) return
+
+    const codeHtml = pre.outerHTML
+
+    // 提取语言
+    const classList = Array.from(codeBlock.classList)
+    const languageClass = classList.find((c) => c.startsWith('language-'))
+    const language = languageClass
+      ? languageClass.replace('language-', '').toUpperCase()
+      : undefined
+
+    // 提取文件名（如果有）
+    const filenameSpan = codeBlock.querySelector('.lang')
+    const filename = filenameSpan?.textContent?.trim()
+
+    // 创建全屏组件容器
+    if (!fullscreenContainer) {
+      fullscreenContainer = document.createElement('div')
+      document.body.appendChild(fullscreenContainer)
+    }
+
+    // 创建 Vue 应用
+    fullscreenApp = createApp(CodeBlockFullscreen, {
+      isFullscreen: true,
+      codeHtml,
+      language,
+      filename,
+      'onUpdate:isFullscreen': (value: boolean) => {
+        if (!value) {
+          closeFullscreen()
+        }
+      },
+    })
+
+    fullscreenApp.mount(fullscreenContainer)
+  }
+
+  function closeFullscreen() {
+    if (fullscreenApp) {
+      fullscreenApp.unmount()
+      fullscreenApp = null
+    }
+    if (fullscreenContainer && fullscreenContainer.parentNode) {
+      fullscreenContainer.parentNode.removeChild(fullscreenContainer)
+      fullscreenContainer = null
+    }
+  }
+
+  function cleanup() {
+    closeFullscreen()
+    // 移除所有全屏按钮
+    document.querySelectorAll('.fullscreen-btn').forEach((btn) => btn.remove())
+  }
+
+  onMounted(() => {
+    // 初始化
+    setTimeout(() => {
+      addFullscreenButtons()
+    }, 100)
+
+    // 监听路由变化
+    const observer = new MutationObserver(() => {
+      addFullscreenButtons()
+    })
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    })
+
+    onUnmounted(() => {
+      observer.disconnect()
+      cleanup()
+    })
+  })
+}

package/vitepress/components/CodeBlockFullscreen/styles.css

@@ -1,64 +1,64 @@
-/* 代码块全屏按钮样式 */
-div[class*='language-'] {
-  position: relative;
-}
-
-.fullscreen-btn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  background-color: var(--vp-code-block-bg);
-  color: var(--vp-c-text-2);
-  border-radius: 6px;
-  cursor: pointer;
-  opacity: 0;
-  transition: all 0.2s;
-}
-
-div[class*='language-']:hover .fullscreen-btn {
-  opacity: 1;
-}
-
-.fullscreen-btn:hover {
-  background-color: var(--vp-c-default-soft);
-  color: var(--vp-c-brand-1);
-  transform: scale(1.05);
-}
-
-.fullscreen-btn:active {
-  transform: scale(0.95);
-}
-
-.fullscreen-btn svg {
-  width: 16px;
-  height: 16px;
-}
-
-/* 移动端始终显示按钮 */
-@media (max-width: 768px) {
-  .fullscreen-btn {
-    opacity: 0.8;
-    top: 6px;
-    right: 6px;
-    width: 28px;
-    height: 28px;
-  }
-
-  .fullscreen-btn svg {
-    width: 14px;
-    height: 14px;
-  }
-}
-
-div[class*='language-']:has(.copy) .fullscreen-btn {
-  /* 代码块已经有复制按钮，需要微调位置 */
-  right: 54px;
-}
+/* 代码块全屏按钮样式 */
+div[class*='language-'] {
+  position: relative;
+}
+
+.fullscreen-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background-color: var(--vp-code-block-bg);
+  color: var(--vp-c-text-2);
+  border-radius: 6px;
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.2s;
+}
+
+div[class*='language-']:hover .fullscreen-btn {
+  opacity: 1;
+}
+
+.fullscreen-btn:hover {
+  background-color: var(--vp-c-default-soft);
+  color: var(--vp-c-brand-1);
+  transform: scale(1.05);
+}
+
+.fullscreen-btn:active {
+  transform: scale(0.95);
+}
+
+.fullscreen-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* 移动端始终显示按钮 */
+@media (max-width: 768px) {
+  .fullscreen-btn {
+    opacity: 0.8;
+    top: 6px;
+    right: 6px;
+    width: 28px;
+    height: 28px;
+  }
+
+  .fullscreen-btn svg {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+div[class*='language-']:has(.copy) .fullscreen-btn {
+  /* 代码块已经有复制按钮，需要微调位置 */
+  right: 54px;
+}

package/vitepress/components/Discussions/Discussions.module.scss

@@ -1,32 +1,32 @@
-/* #region:same as vitepress theme */
-.h2 {
-  margin: 48px 0 16px;
-  border-top: 1px solid var(--vp-c-divider);
-  padding-top: 24px;
-  letter-spacing: -0.02em;
-  line-height: 32px;
-  font-size: 1.2rem;
-  text-align: center;
-}
-
-/* #endregion:same as vitepress theme */
-
-.discussionsLink {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5em;
-  color: var(--vp-c-brand-1);
-  text-decoration: none;
-  opacity: 0.9;
-  transition: opacity 0.25s;
-
-  &:hover {
-    opacity: 0.5;
-  }
-}
-
-.githubIcon {
-  width: 1em;
-  height: 1em;
-  flex-shrink: 0;
-}
+/* #region:same as vitepress theme */
+.h2 {
+  margin: 48px 0 16px;
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 24px;
+  letter-spacing: -0.02em;
+  line-height: 32px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+/* #endregion:same as vitepress theme */
+
+.discussionsLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  color: var(--vp-c-brand-1);
+  text-decoration: none;
+  opacity: 0.9;
+  transition: opacity 0.25s;
+
+  &:hover {
+    opacity: 0.5;
+  }
+}
+
+.githubIcon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}