@tnotesjs/core 0.1.14 → 0.1.16

package/vitepress/components/Discussions/Discussions.vue

@@ -1,212 +1,212 @@
-<script setup lang="ts">
-import { useData } from 'vitepress/client'
+<script setup lang="ts">
+import { useData } from 'vitepress/client'
 import { onMounted, onUnmounted, watch, computed } from 'vue'
-
-import { icon__github } from '../../assets/icons'
-import { REPO_NAME, AUTHOR } from '../constants'
-import Tooltip from '../Tooltip/Tooltip.vue'
-
-const props = defineProps({
-  /**
-   * 留言版 ID
-   * 来自于笔记配置文件中的 id 字段的 uuid 值
-   */
-  id: {
-    type: String,
-    required: true,
-  },
-  /**
-   * 笔记序号（如 0001）
-   */
-  noteNumber: {
-    type: String,
-    default: '',
-  },
-  /**
-   * 笔记标题
-   */
-  noteTitle: {
-    type: String,
-    default: '',
-  },
-})
-
-// 🔍 查阅支持的所有主题 https://giscus.app/zh-CN
-const GISCUS_DARK_THEME = 'noborder_dark'
-const GISCUS_LIGHT_THEME = 'noborder_light'
-
-// 获取 VitePress 的数据 - 主题状态
-const { isDark } = useData()
-
-// 生成 GitHub Discussions 直接链接
-const githubDiscussionsUrl = computed(() => {
-  return `https://github.com/orgs/tnotesjs/discussions?discussions_q=${props.id}`
-})
-
-/**
- * 生成 giscus backlink（带有笔记信息的 GitHub 页面链接）
- *
- * giscus 会在创建新 Discussion 时自动添加返回链接。
- * 通过设置 <meta name="giscus:backlink"> 标签，可以自定义这个链接。
- * 这样在 GitHub Discussions 中就能看到对应笔记的直接链接。
- *
- * 📖 官方文档：https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md#giscusbacklink
- */
-const giscusBacklink = computed(() => {
-  console.log('[Discussions] Props:', {
-    noteNumber: props.noteNumber,
-    noteTitle: props.noteTitle,
-    id: props.id,
-  })
-
-  if (!props.noteNumber || !props.noteTitle) {
-    console.log('[Discussions] 使用默认 URL:', window.location.href)
-    return window.location.href
-  }
-
-  // 对笔记标题进行 URL 编码（处理中文和特殊字符）
-  const encodedTitle = encodeURIComponent(props.noteTitle)
-
-  // 生成笔记相关链接
-  const noteGithubUrl = `https://github.com/${AUTHOR}/${REPO_NAME}/tree/main/notes/${props.noteNumber}.%20${encodedTitle}`
-  const notePageUrl = `https://${AUTHOR.toLowerCase()}.github.io/${REPO_NAME}/notes/${
-    props.noteNumber
-  }.%20${encodedTitle}/README`
-
-  // 生成知识库相关链接
-  const repoGithubUrl = `https://github.com/${AUTHOR}/${REPO_NAME}`
-  const repoPageUrl = `https://${AUTHOR.toLowerCase()}.github.io/${REPO_NAME}/`
-
-  // 生成当前时间字符串
-  const now = new Date()
-  const year = now.getFullYear()
-  const month = String(now.getMonth() + 1).padStart(2, '0')
-  const day = String(now.getDate()).padStart(2, '0')
-  const weekDays = ['日', '一', '二', '三', '四', '五', '六']
-  const weekDay = `周${weekDays[now.getDay()]}`
-  const hour = now.getHours()
-  const minute = String(now.getMinutes()).padStart(2, '0')
-  const second = String(now.getSeconds()).padStart(2, '0')
-  const period = hour < 12 ? '上午' : '下午'
-  const hour12 = hour % 12 || 12
-  const formattedTime = `${year}.${month}.${day} ${weekDay} ${period} ${hour12}:${minute}:${second}`
-
-  // 构建 Markdown 格式的笔记信息
-  const backlink = `
-- **${props.noteNumber}. ${props.noteTitle}**：[GitHub](${noteGithubUrl})、[GitHub Page](${notePageUrl})
-- **${REPO_NAME}**：[GitHub](${repoGithubUrl})、[GitHub Page](${repoPageUrl})
-- **评论创建时间**：${formattedTime}
-`.trim()
-
-  console.log('[Discussions] 生成的 backlink:', backlink)
-  return backlink
-})
-
-// 动态注入 giscus backlink meta 标签
-const updateGiscusBacklink = () => {
-  // 移除旧的 giscus:backlink meta 标签
-  const oldMeta = document.querySelector('meta[name="giscus:backlink"]')
-  if (oldMeta) {
-    oldMeta.remove()
-  }
-
-  // 添加新的 giscus:backlink meta 标签
-  const meta = document.createElement('meta')
-  meta.name = 'giscus:backlink'
-  meta.content = giscusBacklink.value
-  document.head.appendChild(meta)
-
-  console.log('[Discussions] 已添加 giscus:backlink meta 标签:', meta.content)
-}
-
-// 动态注入 giscus 评论脚本
-const loadGiscusScript = () => {
-  // 更新 giscus:backlink meta 标签
-  updateGiscusBacklink()
-
-  // 清除旧的 giscus 脚本和 iframe
-  const oldScript = document.getElementById('giscus-script')
-  const oldIframe = document.querySelector('iframe.giscus-frame')
-  if (oldScript) oldScript.remove()
-  if (oldIframe) oldIframe.remove()
-
-  // 创建新的 giscus 脚本
-  const giscusScript = document.createElement('script')
-  giscusScript.src = 'https://giscus.app/client.js'
-  giscusScript.setAttribute('data-repo', 'tnotesjs/TNotes.discussions')
-  giscusScript.setAttribute('data-repo-id', 'R_kgDOQauuyw')
-  giscusScript.setAttribute('data-category', 'Announcements')
-  giscusScript.setAttribute('data-category-id', 'DIC_kwDOQauuy84CyEuQ')
-  giscusScript.setAttribute('data-mapping', 'specific')
-  giscusScript.setAttribute('data-term', props.id)
-  giscusScript.setAttribute('data-strict', '0')
-  giscusScript.setAttribute('data-reactions-enabled', '1')
-  giscusScript.setAttribute('data-emit-metadata', '0')
-  giscusScript.setAttribute('data-input-position', 'top')
-  giscusScript.setAttribute('data-lang', 'zh-CN')
-  giscusScript.setAttribute('data-loading', 'lazy')
-  giscusScript.setAttribute(
-    'data-theme',
-    isDark.value ? GISCUS_DARK_THEME : GISCUS_LIGHT_THEME
-  )
-  giscusScript.setAttribute('crossorigin', 'anonymous')
-  giscusScript.async = true
-  giscusScript.id = 'giscus-script'
-
-  document.getElementById('giscus-comments')?.appendChild(giscusScript)
-}
-
-onMounted(() => {
-  loadGiscusScript()
-})
-
-onUnmounted(() => {
-  // 组件卸载时移除 giscus:backlink meta 标签
-  const meta = document.querySelector('meta[name="giscus:backlink"]')
-  if (meta) {
-    meta.remove()
-  }
-})
-
-watch([() => props.id], ([newId]) => {
-  loadGiscusScript()
-})
-
-// 切换主题的时候，动态修改 giscus 评论主题，不需要重新 loadGiscusScript。
-watch(isDark, (newVal) => {
-  const iframe = document.querySelector<HTMLIFrameElement>(
-    'iframe.giscus-frame'
-  )
-  if (iframe) {
-    iframe.contentWindow?.postMessage(
-      {
-        giscus: {
-          setConfig: {
-            theme: newVal ? GISCUS_DARK_THEME : GISCUS_LIGHT_THEME,
-          },
-        },
-      },
-      'https://giscus.app'
-    )
-  }
-})
-</script>
-
-<template>
-  <h2 :class="$style.h2">
-    <Tooltip text="在 GitHub 上发表评论（支持上传图片）">
-      <a
-        :href="githubDiscussionsUrl"
-        target="_blank"
-        rel="noopener noreferrer"
-        :class="$style.discussionsLink"
-      >
-        <img :src="icon__github" alt="" :class="$style.githubIcon" />
-        Discussions
-      </a>
-    </Tooltip>
-  </h2>
-  <div id="giscus-comments"></div>
-</template>
-
-<style module src="./Discussions.module.scss"></style>
+
+import { icon__github } from '../../assets/icons'
+import { REPO_NAME, AUTHOR } from '../constants'
+import Tooltip from '../Tooltip/Tooltip.vue'
+
+const props = defineProps({
+  /**
+   * 留言版 ID
+   * 来自于笔记配置文件中的 id 字段的 uuid 值
+   */
+  id: {
+    type: String,
+    required: true,
+  },
+  /**
+   * 笔记序号（如 0001）
+   */
+  noteNumber: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 笔记标题
+   */
+  noteTitle: {
+    type: String,
+    default: '',
+  },
+})
+
+// 🔍 查阅支持的所有主题 https://giscus.app/zh-CN
+const GISCUS_DARK_THEME = 'noborder_dark'
+const GISCUS_LIGHT_THEME = 'noborder_light'
+
+// 获取 VitePress 的数据 - 主题状态
+const { isDark } = useData()
+
+// 生成 GitHub Discussions 直接链接
+const githubDiscussionsUrl = computed(() => {
+  return `https://github.com/orgs/tnotesjs/discussions?discussions_q=${props.id}`
+})
+
+/**
+ * 生成 giscus backlink（带有笔记信息的 GitHub 页面链接）
+ *
+ * giscus 会在创建新 Discussion 时自动添加返回链接。
+ * 通过设置 <meta name="giscus:backlink"> 标签，可以自定义这个链接。
+ * 这样在 GitHub Discussions 中就能看到对应笔记的直接链接。
+ *
+ * 📖 官方文档：https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md#giscusbacklink
+ */
+const giscusBacklink = computed(() => {
+  console.log('[Discussions] Props:', {
+    noteNumber: props.noteNumber,
+    noteTitle: props.noteTitle,
+    id: props.id,
+  })
+
+  if (!props.noteNumber || !props.noteTitle) {
+    console.log('[Discussions] 使用默认 URL:', window.location.href)
+    return window.location.href
+  }
+
+  // 对笔记标题进行 URL 编码（处理中文和特殊字符）
+  const encodedTitle = encodeURIComponent(props.noteTitle)
+
+  // 生成笔记相关链接
+  const noteGithubUrl = `https://github.com/${AUTHOR}/${REPO_NAME}/tree/main/notes/${props.noteNumber}.%20${encodedTitle}`
+  const notePageUrl = `https://${AUTHOR.toLowerCase()}.github.io/${REPO_NAME}/notes/${
+    props.noteNumber
+  }.%20${encodedTitle}/README`
+
+  // 生成知识库相关链接
+  const repoGithubUrl = `https://github.com/${AUTHOR}/${REPO_NAME}`
+  const repoPageUrl = `https://${AUTHOR.toLowerCase()}.github.io/${REPO_NAME}/`
+
+  // 生成当前时间字符串
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = String(now.getMonth() + 1).padStart(2, '0')
+  const day = String(now.getDate()).padStart(2, '0')
+  const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+  const weekDay = `周${weekDays[now.getDay()]}`
+  const hour = now.getHours()
+  const minute = String(now.getMinutes()).padStart(2, '0')
+  const second = String(now.getSeconds()).padStart(2, '0')
+  const period = hour < 12 ? '上午' : '下午'
+  const hour12 = hour % 12 || 12
+  const formattedTime = `${year}.${month}.${day} ${weekDay} ${period} ${hour12}:${minute}:${second}`
+
+  // 构建 Markdown 格式的笔记信息
+  const backlink = `
+- **${props.noteNumber}. ${props.noteTitle}**：[GitHub](${noteGithubUrl})、[GitHub Page](${notePageUrl})
+- **${REPO_NAME}**：[GitHub](${repoGithubUrl})、[GitHub Page](${repoPageUrl})
+- **评论创建时间**：${formattedTime}
+`.trim()
+
+  console.log('[Discussions] 生成的 backlink:', backlink)
+  return backlink
+})
+
+// 动态注入 giscus backlink meta 标签
+const updateGiscusBacklink = () => {
+  // 移除旧的 giscus:backlink meta 标签
+  const oldMeta = document.querySelector('meta[name="giscus:backlink"]')
+  if (oldMeta) {
+    oldMeta.remove()
+  }
+
+  // 添加新的 giscus:backlink meta 标签
+  const meta = document.createElement('meta')
+  meta.name = 'giscus:backlink'
+  meta.content = giscusBacklink.value
+  document.head.appendChild(meta)
+
+  console.log('[Discussions] 已添加 giscus:backlink meta 标签:', meta.content)
+}
+
+// 动态注入 giscus 评论脚本
+const loadGiscusScript = () => {
+  // 更新 giscus:backlink meta 标签
+  updateGiscusBacklink()
+
+  // 清除旧的 giscus 脚本和 iframe
+  const oldScript = document.getElementById('giscus-script')
+  const oldIframe = document.querySelector('iframe.giscus-frame')
+  if (oldScript) oldScript.remove()
+  if (oldIframe) oldIframe.remove()
+
+  // 创建新的 giscus 脚本
+  const giscusScript = document.createElement('script')
+  giscusScript.src = 'https://giscus.app/client.js'
+  giscusScript.setAttribute('data-repo', 'tnotesjs/TNotes.discussions')
+  giscusScript.setAttribute('data-repo-id', 'R_kgDOQauuyw')
+  giscusScript.setAttribute('data-category', 'Announcements')
+  giscusScript.setAttribute('data-category-id', 'DIC_kwDOQauuy84CyEuQ')
+  giscusScript.setAttribute('data-mapping', 'specific')
+  giscusScript.setAttribute('data-term', props.id)
+  giscusScript.setAttribute('data-strict', '0')
+  giscusScript.setAttribute('data-reactions-enabled', '1')
+  giscusScript.setAttribute('data-emit-metadata', '0')
+  giscusScript.setAttribute('data-input-position', 'top')
+  giscusScript.setAttribute('data-lang', 'zh-CN')
+  giscusScript.setAttribute('data-loading', 'lazy')
+  giscusScript.setAttribute(
+    'data-theme',
+    isDark.value ? GISCUS_DARK_THEME : GISCUS_LIGHT_THEME
+  )
+  giscusScript.setAttribute('crossorigin', 'anonymous')
+  giscusScript.async = true
+  giscusScript.id = 'giscus-script'
+
+  document.getElementById('giscus-comments')?.appendChild(giscusScript)
+}
+
+onMounted(() => {
+  loadGiscusScript()
+})
+
+onUnmounted(() => {
+  // 组件卸载时移除 giscus:backlink meta 标签
+  const meta = document.querySelector('meta[name="giscus:backlink"]')
+  if (meta) {
+    meta.remove()
+  }
+})
+
+watch([() => props.id], ([newId]) => {
+  loadGiscusScript()
+})
+
+// 切换主题的时候，动态修改 giscus 评论主题，不需要重新 loadGiscusScript。
+watch(isDark, (newVal) => {
+  const iframe = document.querySelector<HTMLIFrameElement>(
+    'iframe.giscus-frame'
+  )
+  if (iframe) {
+    iframe.contentWindow?.postMessage(
+      {
+        giscus: {
+          setConfig: {
+            theme: newVal ? GISCUS_DARK_THEME : GISCUS_LIGHT_THEME,
+          },
+        },
+      },
+      'https://giscus.app'
+    )
+  }
+})
+</script>
+
+<template>
+  <h2 :class="$style.h2">
+    <Tooltip text="在 GitHub 上发表评论（支持上传图片）">
+      <a
+        :href="githubDiscussionsUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        :class="$style.discussionsLink"
+      >
+        <img :src="icon__github" alt="" :class="$style.githubIcon" />
+        Discussions
+      </a>
+    </Tooltip>
+  </h2>
+  <div id="giscus-comments"></div>
+</template>
+
+<style module src="./Discussions.module.scss"></style>

package/vitepress/components/EnWordList/EnWordList.module.scss

@@ -1,124 +1,124 @@
-/**
- * .vitepress/components/EnWordList/EnWordList.module.scss
- *
- * EnWordList 组件样式
- */
-
-.enWordList {
-  // Checkbox 样式
-  input[type='checkbox'] {
-    margin: 8px;
-    transform: scale(1.3);
-    cursor: pointer;
-  }
-
-  // 链接样式
-  a {
-    text-decoration: none;
-    color: #4fc3f7;
-
-    &:hover {
-      text-decoration: underline !important;
-    }
-
-    &.lineThrough {
-      color: #999;
-      text-decoration: line-through;
-    }
-
-    &.textRed {
-      color: #f40 !important;
-    }
-  }
-
-  // 单词列表样式
-  ol {
-    list-style-type: decimal;
-    padding-left: 20px;
-
-    li {
-      display: flex;
-      align-items: center;
-      margin-bottom: 8px;
-      transition: all 0.3s ease;
-
-      &.pronounced {
-        background-color: rgba(255, 255, 0, 0.1);
-      }
-    }
-  }
-
-  // 序号样式
-  .index {
-    margin-right: 10px;
-    color: #aaa;
-  }
-}
-
-// 单词卡片样式（🌑 暗色悬浮卡片）
-.wordCard {
-  position: fixed;
-  z-index: 9999;
-  background: #1e1e1e;
-  border: 1px solid #333;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-  padding: 12px 16px;
-  max-width: 600px;
-  min-width: 200px;
-  min-height: 100px;
-  font-size: 14px;
-  line-height: 1.4;
-  border-radius: 8px;
-  color: #eee;
-  pointer-events: auto;
-  font-family: sans-serif;
-  cursor: move;
-
-  // 关闭按钮
-  .closeBtn {
-    position: absolute;
-    right: 5px;
-    top: 5px;
-    background: none;
-    border: none;
-    font-size: 16px;
-    cursor: pointer;
-    color: #ccc;
-
-    &:hover {
-      color: white;
-    }
-  }
-}
-
-// 卡片内容包裹器
-.wordCardContentWrapper {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-}
-
-// 卡片内容样式
-.wordCardContent {
-  :deep(ul) {
-    margin: 0.5rem 0;
-    padding-left: 1rem;
-  }
-}
-
-// 调整大小手柄
-.resizeHandle {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 12px;
-  height: 12px;
-  background-color: #666;
-  cursor: nwse-resize;
-  z-index: 2;
-  border-radius: 50%;
-
-  &:hover {
-    background-color: #aaa;
-  }
-}
+/**
+ * .vitepress/components/EnWordList/EnWordList.module.scss
+ *
+ * EnWordList 组件样式
+ */
+
+.enWordList {
+  // Checkbox 样式
+  input[type='checkbox'] {
+    margin: 8px;
+    transform: scale(1.3);
+    cursor: pointer;
+  }
+
+  // 链接样式
+  a {
+    text-decoration: none;
+    color: #4fc3f7;
+
+    &:hover {
+      text-decoration: underline !important;
+    }
+
+    &.lineThrough {
+      color: #999;
+      text-decoration: line-through;
+    }
+
+    &.textRed {
+      color: #f40 !important;
+    }
+  }
+
+  // 单词列表样式
+  ol {
+    list-style-type: decimal;
+    padding-left: 20px;
+
+    li {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      transition: all 0.3s ease;
+
+      &.pronounced {
+        background-color: rgba(255, 255, 0, 0.1);
+      }
+    }
+  }
+
+  // 序号样式
+  .index {
+    margin-right: 10px;
+    color: #aaa;
+  }
+}
+
+// 单词卡片样式（🌑 暗色悬浮卡片）
+.wordCard {
+  position: fixed;
+  z-index: 9999;
+  background: #1e1e1e;
+  border: 1px solid #333;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  padding: 12px 16px;
+  max-width: 600px;
+  min-width: 200px;
+  min-height: 100px;
+  font-size: 14px;
+  line-height: 1.4;
+  border-radius: 8px;
+  color: #eee;
+  pointer-events: auto;
+  font-family: sans-serif;
+  cursor: move;
+
+  // 关闭按钮
+  .closeBtn {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    background: none;
+    border: none;
+    font-size: 16px;
+    cursor: pointer;
+    color: #ccc;
+
+    &:hover {
+      color: white;
+    }
+  }
+}
+
+// 卡片内容包裹器
+.wordCardContentWrapper {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+// 卡片内容样式
+.wordCardContent {
+  :deep(ul) {
+    margin: 0.5rem 0;
+    padding-left: 1rem;
+  }
+}
+
+// 调整大小手柄
+.resizeHandle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 12px;
+  height: 12px;
+  background-color: #666;
+  cursor: nwse-resize;
+  z-index: 2;
+  border-radius: 50%;
+
+  &:hover {
+    background-color: #aaa;
+  }
+}