@tnotesjs/core 0.1.0

package/vitepress/components/Mermaid/Mermaid.vue

@@ -0,0 +1,364 @@
+<template>
+  <div
+    ref="mermaidRef"
+    :class="[$style.mermaidWrapper, { [$style.showToolbar]: showToolbar }]"
+    @mouseenter="showToolbar = true"
+    @mouseleave="showToolbar = false"
+  >
+    <!-- 工具栏 -->
+    <div
+      v-if="!loading && !error"
+      :class="[$style.toolbar, { [$style.visible]: showToolbar }]"
+    >
+      <button
+        @click="zoomIn"
+        :class="[$style.toolbarBtn, $style.iconBtn]"
+        title="放大 (Ctrl + +)"
+      >
+        <img :src="icon__zoom_in" alt="放大" :class="$style.btnIcon" />
+      </button>
+      <button
+        @click="zoomOut"
+        :class="[$style.toolbarBtn, $style.iconBtn]"
+        title="缩小 (Ctrl + -)"
+      >
+        <img :src="icon__zoom_out" alt="缩小" :class="$style.btnIcon" />
+      </button>
+      <button
+        @click="resetZoom"
+        :class="[$style.toolbarBtn, $style.iconBtn]"
+        title="重置缩放 (Ctrl + 0)"
+      >
+        <img :src="icon__zoom_reset" alt="重置" :class="$style.btnIcon" />
+      </button>
+      <button
+        @click="fitToScreen"
+        :class="[$style.toolbarBtn, $style.iconBtn]"
+        title="适应屏幕"
+      >
+        <img :src="icon__zoom_fit" alt="适应屏幕" :class="$style.btnIcon" />
+      </button>
+      <button
+        @click="toggleFullscreen"
+        :class="[$style.toolbarBtn, $style.iconBtn]"
+        title="全屏 (F11)"
+      >
+        <img
+          v-if="isFullscreen"
+          :src="icon__fullscreen_exit"
+          alt="退出全屏"
+          :class="$style.btnIcon"
+        />
+        <img
+          v-else
+          :src="icon__fullscreen"
+          alt="全屏"
+          :class="$style.btnIcon"
+        />
+      </button>
+      <span :class="$style.zoomLevel">{{ Math.round(scale * 100) }}%</span>
+    </div>
+
+    <!-- 图表容器 -->
+    <div
+      :class="[$style.mermaidContainer, { [$style.fullscreen]: isFullscreen }]"
+      @click="handleContainerClick"
+    >
+      <div v-if="loading" :class="$style.mermaidLoading">
+        <div :class="$style.spinner"></div>
+        <p>加载图表中...</p>
+      </div>
+      <div v-else-if="error" :class="$style.mermaidError">
+        <span :class="$style.errorIcon">⚠️</span>
+        <p>{{ error }}</p>
+      </div>
+      <div
+        v-show="!loading && !error"
+        ref="diagramRef"
+        :class="[$style.mermaidDiagram, props.class]"
+        :style="{
+          transform: `scale(${scale})`,
+          transformOrigin: 'center center',
+        }"
+        @wheel.prevent="handleWheel"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import mermaid from 'mermaid'
+import { nextTick, onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import {
+  icon__zoom_in,
+  icon__zoom_out,
+  icon__zoom_reset,
+  icon__zoom_fit,
+  icon__fullscreen,
+  icon__fullscreen_exit,
+} from '../../assets/icons'
+
+const props = defineProps({
+  graph: {
+    type: String,
+    required: true,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  class: {
+    type: String,
+    default: 'mermaid',
+  },
+})
+
+const mermaidRef = ref<HTMLElement | null>(null)
+const diagramRef = ref<HTMLElement | null>(null)
+const loading = ref(true)
+const error = ref<string | null>(null)
+const scale = ref(1)
+const isFullscreen = ref(false)
+const showToolbar = ref(false)
+
+// ===================================
+// #region 工具栏显示控制
+// ===================================
+let hideTimer: ReturnType<typeof setTimeout> | null = null
+
+function handleContainerClick() {
+  // 移动端点击切换工具栏显示
+  if (window.innerWidth <= 768) {
+    showToolbar.value = !showToolbar.value
+
+    // 3秒后自动隐藏
+    if (showToolbar.value) {
+      if (hideTimer) clearTimeout(hideTimer)
+      hideTimer = setTimeout(() => {
+        showToolbar.value = false
+      }, 3000)
+    }
+  }
+}
+// #endregion
+
+// ===================================
+// #region 缩放控制
+// ===================================
+const MIN_SCALE = 0.1
+const MAX_SCALE = 5
+const SCALE_STEP = 0.1
+
+function zoomIn() {
+  scale.value = Math.min(scale.value + SCALE_STEP, MAX_SCALE)
+}
+
+function zoomOut() {
+  scale.value = Math.max(scale.value - SCALE_STEP, MIN_SCALE)
+}
+
+function resetZoom() {
+  scale.value = 1
+}
+
+function fitToScreen() {
+  if (!diagramRef.value || !mermaidRef.value) return
+
+  const svg = diagramRef.value.querySelector('svg')
+  if (!svg) return
+
+  const containerRect = mermaidRef.value.getBoundingClientRect()
+  const svgRect = svg.getBoundingClientRect()
+
+  const scaleX = (containerRect.width * 0.9) / svgRect.width
+  const scaleY = (containerRect.height * 0.9) / svgRect.height
+
+  scale.value = Math.min(scaleX, scaleY, 1)
+}
+
+function handleWheel(e: WheelEvent) {
+  if (e.ctrlKey || e.metaKey) {
+    e.preventDefault()
+    const delta = e.deltaY > 0 ? -SCALE_STEP : SCALE_STEP
+    scale.value = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale.value + delta))
+  }
+}
+// #endregion
+
+// ===================================
+// #region 全屏控制
+// ===================================
+function toggleFullscreen() {
+  if (!mermaidRef.value) return
+
+  if (!isFullscreen.value) {
+    if (mermaidRef.value.requestFullscreen) {
+      mermaidRef.value.requestFullscreen()
+    }
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
+    }
+  }
+}
+
+function handleFullscreenChange() {
+  isFullscreen.value = !!document.fullscreenElement
+}
+// #endregion
+
+// ===================================
+// #region 键盘快捷键
+// ===================================
+function handleKeydown(e: KeyboardEvent) {
+  if (e.ctrlKey || e.metaKey) {
+    if (e.key === '=' || e.key === '+') {
+      e.preventDefault()
+      zoomIn()
+    } else if (e.key === '-' || e.key === '_') {
+      e.preventDefault()
+      zoomOut()
+    } else if (e.key === '0') {
+      e.preventDefault()
+      resetZoom()
+    }
+  } else if (e.key === 'F11') {
+    e.preventDefault()
+    toggleFullscreen()
+  } else if (e.key === 'Escape' && isFullscreen.value) {
+    toggleFullscreen()
+  }
+}
+// #endregion
+
+// ===================================
+// #region Mermaid 渲染
+// ===================================
+// 获取当前主题
+const getCurrentTheme = () => {
+  return document.documentElement.classList.contains('dark')
+    ? 'dark'
+    : 'default'
+}
+
+// 初始化 Mermaid
+const initMermaid = async () => {
+  try {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: getCurrentTheme(),
+      securityLevel: 'loose',
+      fontFamily: 'inherit',
+    })
+  } catch (err) {
+    console.error('Mermaid initialization error:', err)
+  }
+}
+
+// 渲染图表
+const renderDiagram = async () => {
+  // 等待下一个 DOM 更新周期
+  await nextTick()
+
+  if (!diagramRef.value) {
+    // 再等待一小段时间确保 DOM 完全渲染
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    if (!diagramRef.value) {
+      // console.warn('diagramRef is still null')
+      return
+    }
+  }
+
+  try {
+    loading.value = true
+    error.value = null
+
+    // 每次渲染前都重新初始化主题
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: getCurrentTheme(),
+      securityLevel: 'loose',
+      fontFamily: 'inherit',
+    })
+
+    const { svg, bindFunctions } = await mermaid.render(
+      props.id,
+      decodeURIComponent(props.graph)
+    )
+
+    diagramRef.value.innerHTML = svg
+
+    // 绑定交互函数（如果有）
+    if (bindFunctions) {
+      bindFunctions(diagramRef.value)
+    }
+  } catch (err) {
+    error.value = `Failed to render diagram: ${err.message}`
+    console.error('Mermaid render error:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 监听主题变化
+const observeTheme = () => {
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (
+        mutation.type === 'attributes' &&
+        mutation.attributeName === 'class'
+      ) {
+        // 检查是否是主题变化
+        const isDark = document.documentElement.classList.contains('dark')
+        const wasDark = mutation.oldValue?.includes('dark')
+
+        // 只有当主题实际发生变化时才重新渲染
+        if ((isDark && !wasDark) || (!isDark && wasDark)) {
+          renderDiagram()
+        }
+      }
+    })
+  })
+
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class'],
+    attributeOldValue: true,
+  })
+
+  return observer
+}
+
+onMounted(async () => {
+  await initMermaid()
+  await renderDiagram()
+
+  // 观察主题变化
+  const themeObserver = observeTheme()
+
+  // 监听键盘事件
+  document.addEventListener('keydown', handleKeydown)
+
+  // 监听全屏变化
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+
+  // 清理函数
+  onBeforeUnmount(() => {
+    themeObserver.disconnect()
+    document.removeEventListener('keydown', handleKeydown)
+    document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  })
+})
+
+// 当图表内容变化时重新渲染并重置缩放
+watch(
+  () => props.graph,
+  () => {
+    renderDiagram()
+    resetZoom()
+  }
+)
+// #endregion
+</script>
+
+<style module src="./Mermaid.module.scss"></style>

package/vitepress/components/NotesTable/NotesTable.module.scss

@@ -0,0 +1,77 @@
+.notesTable {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  font-size: 0.95rem;
+
+  th,
+  td {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    border: 1px solid var(--vp-c-divider);
+  }
+
+  th {
+    background-color: var(--vp-c-bg-soft);
+    font-weight: 600;
+    color: var(--vp-c-text-1);
+  }
+
+  tbody tr {
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: var(--vp-c-bg-soft);
+    }
+  }
+
+  td {
+    color: var(--vp-c-text-2);
+  }
+
+  .noteLink {
+    color: var(--vp-c-brand-1);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--vp-c-brand-2);
+      text-decoration: underline;
+    }
+  }
+
+  .noteId {
+    font-family: var(--vp-font-family-mono);
+    font-size: 0.9em;
+    color: var(--vp-c-text-3);
+    margin-right: 0.5rem;
+  }
+
+  .description {
+    line-height: 1.6;
+
+    &.empty {
+      color: var(--vp-c-text-3);
+      font-style: italic;
+    }
+  }
+}
+
+.error {
+  padding: 1rem;
+  margin: 1rem 0;
+  border-left: 4px solid var(--vp-c-danger-1);
+  background-color: var(--vp-c-danger-soft);
+  color: var(--vp-c-danger-1);
+  border-radius: 4px;
+}
+
+.warning {
+  padding: 1rem;
+  margin: 1rem 0;
+  border-left: 4px solid var(--vp-c-warning-1);
+  background-color: var(--vp-c-warning-soft);
+  color: var(--vp-c-warning-1);
+  border-radius: 4px;
+}

package/vitepress/components/NotesTable/NotesTable.vue

@@ -0,0 +1,98 @@
+<template>
+  <div v-if="errorMessage" :class="$style.error">
+    {{ errorMessage }}
+  </div>
+
+  <div v-else-if="notFoundIds.length > 0" :class="$style.warning">
+    以下笔记 ID 未找到配置: {{ notFoundIds.join(', ') }}
+  </div>
+
+  <table v-if="tableData.length > 0" :class="$style.notesTable">
+    <thead>
+      <tr>
+        <th>笔记</th>
+        <th>简介</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="note in tableData" :key="note.id">
+        <td>
+          <a :href="note.url" :class="$style.noteLink">
+            <span :class="$style.noteId">{{ note.id }}.</span>
+            <span>{{ note.title }}</span>
+          </a>
+        </td>
+        <td>
+          <span
+            :class="[$style.description, { [$style.empty]: !note.description }]"
+          >
+            {{ note.description || '暂无简介' }}
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+// @ts-expect-error - VitePress data loader exports data at runtime
+import { data as allNotesConfig } from '../notesConfig.data.ts'
+
+interface Props {
+  ids: string[]
+}
+
+const props = defineProps<Props>()
+const vpData = useData()
+
+// 错误消息
+const errorMessage = computed(() => {
+  if (!props.ids || !Array.isArray(props.ids)) {
+    return '错误: ids 属性必须是一个数组'
+  }
+  if (props.ids.length === 0) {
+    return '错误: ids 数组不能为空'
+  }
+  return null
+})
+
+// 未找到的笔记 ID
+const notFoundIds = computed(() => {
+  if (errorMessage.value) return []
+
+  return props.ids.filter((id) => !allNotesConfig[id])
+})
+
+// 表格数据
+const tableData = computed(() => {
+  if (errorMessage.value) return []
+
+  return props.ids
+    .filter((id) => allNotesConfig[id]) // 只保留存在的笔记
+    .map((id) => {
+      const config = allNotesConfig[id]
+      const base = vpData.site.value.base || '/'
+
+      // 从 redirect 路径中提取笔记标题
+      // redirect 格式: notes/0001. 标题/README
+      let title = id
+      if (config.redirect) {
+        const match = config.redirect.match(/notes\/\d{4}\.\s*([^/]+)\/README/)
+        if (match) {
+          title = match[1]
+        }
+      }
+
+      return {
+        id,
+        title,
+        description: config.description || '',
+        url: config.redirect ? `${base}${config.redirect}` : '#',
+      }
+    })
+})
+</script>
+
+<style module src="./NotesTable.module.scss"></style>

package/vitepress/components/NotesTable/README.md

@@ -0,0 +1,67 @@
+# NotesTable 组件
+
+## 功能说明
+
+`NotesTable` 组件用于在 Markdown 文件中渲染笔记列表表格,支持笔记链接跳转和简介显示。
+
+## 使用方法
+
+### 基础用法
+
+```html
+<NotesTable :ids="['0001', '0002', '0054', '0039']" />
+```
+
+### 简写形式
+
+```html
+<N :ids="['0001', '0002', '0054', '0039']" />
+```
+
+## Props
+
+| 属性 | 类型     | 必填 | 说明                                   |
+| ---- | -------- | ---- | -------------------------------------- |
+| ids  | string[] | 是   | 笔记 ID 数组,每个 ID 为 4 位数字字符串 |
+
+## 示例效果
+
+渲染后的表格包含两列:
+
+1. 笔记列: 显示笔记 ID 和标题,支持点击跳转
+2. 简介列: 显示笔记配置中的 `description` 字段内容
+
+## 错误处理
+
+### 1. ids 属性验证
+
+- 如果 `ids` 不是数组,显示错误提示
+- 如果 `ids` 为空数组,显示错误提示
+
+### 2. 笔记不存在
+
+- 如果某些 ID 在配置中找不到,会显示警告信息
+- 表格只渲染存在的笔记
+
+## 数据来源
+
+组件从 `notesConfig.data.ts` 中读取笔记配置信息,包括:
+
+- 笔记标题 (从 redirect 路径解析)
+- 笔记简介 (description 字段)
+- 笔记链接 (redirect 字段)
+
+## 样式特性
+
+- 响应式表格设计
+- 悬停高亮效果
+- 支持暗色/亮色主题
+- 笔记链接带品牌色
+- 空简介显示占位文本
+
+## 注意事项
+
+1. 笔记 ID 必须是 4 位数字字符串 (如 "0001", "0054")
+2. 组件会自动过滤不存在的笔记 ID
+3. 简介为空时显示 "暂无简介"
+4. 链接会自动添加网站 base 路径