@tnotesjs/core 0.1.26 → 0.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tnotesjs/core",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "TNotes 知识库核心框架 —— 基于 VitePress 的笔记管理系统",
   "type": "module",
   "packageManager": "pnpm@10.17.1",

package/vitepress/components/Mermaid/Mermaid.vue

@@ -8,69 +8,47 @@ Mermaid 图表组件，用于在页面中渲染 Mermaid 图表
   <div
     ref="mermaidRef"
     class="mermaidWrapper"
-    @mouseenter="showToolbar = true"
-    @mouseleave="showToolbar = false"
   >
-    <!-- 工具栏 -->
+    <!-- 右上角按钮组（hover 时显示，与 code block 风格一致） -->
     <div
       v-if="!loading && !error"
-      class="toolbar"
-      :class="{ visible: showToolbar }"
+      class="mermaidActions"
+      :data-copy-state="copyState"
     >
-      <button
-        @click="zoomIn"
-        class="toolbarBtn iconBtn"
-        title="放大 (Ctrl + +)"
-      >
-        <img :src="icon__zoom_in" alt="放大" class="btnIcon" />
-      </button>
-      <button
-        @click="zoomOut"
-        class="toolbarBtn iconBtn"
-        title="缩小 (Ctrl + -)"
-      >
-        <img :src="icon__zoom_out" alt="缩小" class="btnIcon" />
-      </button>
-      <button
-        @click="resetZoom"
-        class="toolbarBtn iconBtn"
-        title="重置缩放 (Ctrl + 0)"
-      >
-        <img :src="icon__zoom_reset" alt="重置" class="btnIcon" />
-      </button>
-      <button
-        @click="fitToScreen"
-        class="toolbarBtn iconBtn"
-        title="适应屏幕"
-      >
-        <img :src="icon__zoom_fit" alt="适应屏幕" class="btnIcon" />
-      </button>
       <button
         @click="toggleFullscreen"
-        class="toolbarBtn iconBtn"
-        title="全屏 (F11)"
+        class="mermaidActionFullscreen"
+        :title="isFullscreen ? '退出全屏' : '全屏查看图表'"
       >
         <img
           v-if="isFullscreen"
           :src="icon__fullscreen_exit"
           alt="退出全屏"
-          class="btnIcon"
         />
         <img
           v-else
           :src="icon__fullscreen"
           alt="全屏"
-          class="btnIcon"
         />
       </button>
-      <span class="zoomLevel">{{ Math.round(scale * 100) }}%</span>
+      <button
+        @click="copySource"
+        class="mermaidActionCopy"
+        :data-copy-state="copyState"
+        :title="copyTitle"
+      >
+        <img :src="copyIcon" alt="复制" />
+      </button>
     </div>
 
     <!-- 图表容器 -->
     <div
       class="mermaidContainer"
       :class="{ fullscreen: isFullscreen }"
-      @click="handleContainerClick"
+      @mousedown="startDrag"
+      @mousemove="onDrag"
+      @mouseup="endDrag"
+      @mouseleave="endDrag"
     >
       <div v-if="loading" class="mermaidLoading">
         <div class="spinner"></div>
@@ -84,11 +62,8 @@ Mermaid 图表组件，用于在页面中渲染 Mermaid 图表
         v-show="!loading && !error"
         ref="diagramRef"
         :class="['mermaidDiagram', props.class]"
-        :style="{
-          transform: `scale(${scale})`,
-          transformOrigin: 'center center',
-        }"
-        @wheel.prevent="handleWheel"
+        :style="diagramTransform ? { transform: diagramTransform, transformOrigin: 'top left' } : undefined"
+        @wheel="handleWheel"
       ></div>
     </div>
   </div>
@@ -96,13 +71,11 @@ Mermaid 图表组件，用于在页面中渲染 Mermaid 图表
 
 <script setup lang="ts">
 import mermaid from 'mermaid'
-import { nextTick, onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 
 import {
-  icon__zoom_in,
-  icon__zoom_out,
-  icon__zoom_reset,
-  icon__zoom_fit,
+  icon__check,
+  icon__clipboard,
   icon__fullscreen,
   icon__fullscreen_exit,
 } from '../../assets/icons'
@@ -126,71 +99,91 @@ 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 工具栏显示控制
+// #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)
-    }
-  }
+type CopyState = 'idle' | 'copied' | 'failed'
+const COPY_RESET_DELAY = 1000
+
+const copyState = ref<CopyState>('idle')
+const copyIcon = computed(() =>
+  copyState.value === 'copied' ? icon__check : icon__clipboard,
+)
+const copyTitle = computed(() => {
+  if (copyState.value === 'copied') return '已复制'
+  if (copyState.value === 'failed') return '复制失败'
+  return '复制源码'
+})
+
+let copyResetTimer: ReturnType<typeof setTimeout> | null = null
+
+function copySource() {
+  const text = decodeURIComponent(props.graph)
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      copyState.value = 'copied'
+    })
+    .catch(() => {
+      copyState.value = 'failed'
+    })
+    .finally(() => {
+      if (copyResetTimer) clearTimeout(copyResetTimer)
+      copyResetTimer = setTimeout(() => {
+        copyState.value = 'idle'
+      }, COPY_RESET_DELAY)
+    })
 }
 // #endregion
 
 // ===================================
-// #region 缩放控制
+// #region 全屏模式：拖拽平移 + Ctrl+滚轮缩放
 // ===================================
+const scale = ref(1)
+const panX = ref(0)
+const panY = ref(0)
+const dragging = ref(false)
+let dragStartX = 0
+let dragStartY = 0
+let panStartX = 0
+let panStartY = 0
+
 const MIN_SCALE = 0.1
 const MAX_SCALE = 5
-const SCALE_STEP = 0.1
+const SCALE_STEP = 0.01
 
-function zoomIn() {
-  scale.value = Math.min(scale.value + SCALE_STEP, MAX_SCALE)
-}
+const diagramTransform = computed(() =>
+  isFullscreen.value
+    ? `translate(${panX.value}px, ${panY.value}px) scale(${scale.value})`
+    : undefined,
+)
 
-function zoomOut() {
-  scale.value = Math.max(scale.value - SCALE_STEP, MIN_SCALE)
+function startDrag(e: MouseEvent) {
+  if (!isFullscreen.value) return
+  dragging.value = true
+  dragStartX = e.clientX
+  dragStartY = e.clientY
+  panStartX = panX.value
+  panStartY = panY.value
 }
 
-function resetZoom() {
-  scale.value = 1
+function onDrag(e: MouseEvent) {
+  if (!dragging.value) return
+  panX.value = panStartX + (e.clientX - dragStartX)
+  panY.value = panStartY + (e.clientY - dragStartY)
 }
 
-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 endDrag() {
+  dragging.value = false
 }
 
 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))
-  }
+  if (!isFullscreen.value) return
+  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
 
@@ -213,29 +206,10 @@ function toggleFullscreen() {
 
 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()
+  if (!isFullscreen.value) {
+    scale.value = 1
+    panX.value = 0
+    panY.value = 0
   }
 }
 // #endregion
@@ -346,26 +320,21 @@ onMounted(async () => {
   // 观察主题变化
   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
@@ -388,79 +357,104 @@ watch(
 /* ===================================== */
 
 /* ===================================== */
-/* #region 工具栏                        */
+/* #region 右上角按钮组（与 code block 的 .tn-code-actions 风格一致） */
 /* ===================================== */
-.toolbar {
+.mermaidActions {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
   display: flex;
   align-items: center;
-  gap: 2px;
-  padding: 6px 8px;
-  background: var(--vp-c-bg);
-  border-bottom: 1px solid var(--vp-c-divider);
-  flex-wrap: wrap;
-  transform: translateY(-100%);
-  transition: transform 0.3s ease, opacity 0.3s ease;
+  justify-content: center;
+  gap: 4px;
+  padding: 2px;
+  background-color: color-mix(in srgb, var(--vp-code-block-bg) 92%, transparent);
+  border: 0.1px solid var(--vp-c-divider);
+  border-radius: 7px;
   opacity: 0;
-  z-index: 10;
-  pointer-events: none;
+  transition: opacity 0.2s;
+}
 
-  &.visible {
-    transform: translateY(0);
-    opacity: 1;
-    pointer-events: auto;
-  }
+.mermaidWrapper:hover .mermaidActions,
+.mermaidActions:hover,
+.mermaidActions:focus-within,
+.mermaidActions[data-copy-state='copied'],
+.mermaidActions[data-copy-state='failed'] {
+  opacity: 1;
 }
 
-.toolbarBtn {
+.mermaidActionCopy,
+.mermaidActionFullscreen {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   padding: 0;
-  font-size: 12px;
   background: transparent;
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  transition: all 0.2s ease;
-  opacity: 0.6;
 
   &:hover {
-    background: var(--vp-c-brand-soft);
-    opacity: 1;
+    background-color: var(--vp-c-default-soft);
+    color: var(--vp-c-brand-1);
+    transform: scale(1.05);
   }
 
   &:active {
     transform: scale(0.95);
   }
-}
-
-.iconBtn {
-  padding: 4px;
 
-  .btnIcon {
+  img {
     width: 16px;
     height: 16px;
-    display: block;
-    pointer-events: none;
   }
 }
 
-.zoomLevel {
-  margin-left: auto;
-  padding: 0 6px;
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--vp-c-text-3);
-  user-select: none;
+/* 与 .tn-code-action-copy 完全一致的复制反馈 */
+.mermaidActionCopy {
+  position: relative;
+}
+
+.mermaidActionCopy[data-copy-state='copied'] {
+  background-color: var(--vp-c-green-soft);
+}
+
+.mermaidActionCopy[data-copy-state='failed'] {
+  background-color: var(--vp-c-danger-soft);
+}
+
+.mermaidActionCopy::after {
+  position: absolute;
+  top: 50%;
+  right: calc(100% + 6px);
+  padding: 4px 7px;
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg-elv);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  box-shadow: var(--vp-shadow-2);
+  content: attr(title);
+  font-size: 12px;
+  line-height: 18px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-50%) translateX(2px);
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease;
+  white-space: nowrap;
+}
+
+.mermaidActionCopy[data-copy-state='copied']::after,
+.mermaidActionCopy[data-copy-state='failed']::after {
+  opacity: 1;
+  transform: translateY(-50%) translateX(0);
 }
 /* ===================================== */
-/* #endregion 工具栏                     */
+/* #endregion 右上角按钮组               */
 /* ===================================== */
 
 /* ===================================== */
@@ -469,11 +463,6 @@ watch(
 .mermaidContainer {
   position: relative;
   min-height: 200px;
-  max-height: 600px;
-  overflow: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   padding: 20px;
   background: var(--vp-c-bg);
 
@@ -483,28 +472,14 @@ watch(
     left: 0;
     right: 0;
     bottom: 0;
-    max-height: none;
     z-index: 9999;
     background: var(--vp-c-bg);
     padding: 40px;
-  }
+    overflow: hidden;
+    cursor: grab;
 
-  /* 自定义滚动条 */
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--vp-c-bg-soft);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--vp-c-divider);
-    border-radius: 4px;
-
-    &:hover {
-      background: var(--vp-c-text-3);
+    &:active {
+      cursor: grabbing;
     }
   }
 }
@@ -570,21 +545,16 @@ watch(
 /* #region 图表样式                      */
 /* ===================================== */
 .mermaidDiagram {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.2s ease;
-  cursor: grab;
-
-  &:active {
-    cursor: grabbing;
-  }
-
   :global(svg) {
     max-width: 100%;
     height: auto;
   }
+
+  // 重置 VitePress 全局 line-height，避免穿透 SVG foreignObject 导致
+  // <p> 实际渲染高度超过 Mermaid 计算值，引发文本截断
+  :global(svg .label p) {
+    line-height: 1.5;
+  }
 }
 /* ===================================== */
 /* #endregion 图表样式                   */
@@ -598,10 +568,6 @@ watch(
   border-color: var(--vp-c-divider);
 }
 
-:global(html.dark) .toolbar {
-  background: var(--vp-code-block-bg);
-}
-
 :global(html.dark) .mermaidContainer {
   background: var(--vp-code-block-bg);
 }
@@ -613,31 +579,19 @@ watch(
 /* #region 响应式设计                    */
 /* ===================================== */
 @media (max-width: 768px) {
-  .toolbar {
-    padding: 4px 6px;
-  }
-
-  .toolbarBtn {
+  .mermaidActionCopy,
+  .mermaidActionFullscreen {
     width: 24px;
     height: 24px;
-  }
-
-  .iconBtn {
-    padding: 3px;
 
-    .btnIcon {
+    img {
       width: 14px;
       height: 14px;
     }
   }
 
-  .zoomLevel {
-    font-size: 10px;
-  }
-
   .mermaidContainer {
     padding: 12px;
-    max-height: 400px;
 
     &.fullscreen {
       padding: 20px;