@tnotesjs/ui 0.1.0

package/src/components/Mermaid/Mermaid.vue

@@ -0,0 +1,553 @@
+<template>
+  <div ref="rootRef" class="tn-mermaid" :class="{ 'is-centered': centered }">
+    <div
+      v-if="showActions"
+      class="tn-mermaid__actions"
+      :class="{ 'is-suppressed': loading || !!error || empty }"
+      :data-copy-state="copyState"
+    >
+      <slot name="actions-start" />
+      <button
+        v-if="enableCenterToggle"
+        type="button"
+        class="tn-mermaid__action"
+        :title="centered ? '取消居中' : '居中显示'"
+        :aria-pressed="centered ? 'true' : 'false'"
+        @click="toggleCenter"
+      >
+        <img
+          :src="centered ? iconCenterOn : iconCenterOff"
+          alt=""
+          width="16"
+          height="16"
+        />
+      </button>
+      <button
+        v-if="enableFullscreen"
+        type="button"
+        class="tn-mermaid__action"
+        :title="isFullscreen ? '退出全屏' : '全屏查看图表'"
+        @click="toggleFullscreen"
+      >
+        <img
+          :src="isFullscreen ? iconFullscreenExit : iconFullscreen"
+          :alt="isFullscreen ? '退出全屏' : '全屏'"
+          width="16"
+          height="16"
+        />
+      </button>
+      <button
+        v-if="enableCopy"
+        type="button"
+        class="tn-mermaid__action tn-mermaid__action--copy"
+        :data-copy-state="copyState"
+        :title="copyTitle"
+        @click="copySource"
+      >
+        <img :src="copyIcon" alt="复制" width="16" height="16" />
+      </button>
+      <slot name="actions-end" />
+    </div>
+
+    <div
+      class="tn-mermaid__stage"
+      :class="{ 'is-fullscreen': isFullscreen }"
+      @mousedown="startDrag"
+      @mousemove="onDrag"
+      @mouseup="endDrag"
+      @mouseleave="endDrag"
+    >
+      <!-- Keep host laid out during render; display:none breaks Mermaid SVG sizing. -->
+      <div
+        ref="diagramRef"
+        class="tn-mermaid__diagram"
+        :class="{ 'is-centered': centered, 'is-obscured': loading || empty || !!error }"
+        :style="diagramTransform ? { transform: diagramTransform, transformOrigin: 'top left' } : undefined"
+        @wheel="handleWheel"
+      />
+      <div v-if="loading" class="tn-mermaid__loading tn-mermaid__status">
+        <div class="tn-mermaid__spinner" />
+        <p>加载图表中...</p>
+      </div>
+      <div v-else-if="empty" class="tn-mermaid__empty tn-mermaid__status">
+        输入 Mermaid 源码后显示预览
+      </div>
+      <div v-else-if="error" class="tn-mermaid__error tn-mermaid__status">
+        <p>{{ error }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import mermaid from 'mermaid'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import iconCenterOff from './icons/icon__center_off.svg?url'
+import iconCenterOn from './icons/icon__center_on.svg?url'
+import iconCheck from './icons/icon__check.svg?url'
+import iconClipboard from './icons/icon__clipboard.svg?url'
+import iconFullscreen from './icons/icon__fullscreen.svg?url'
+import iconFullscreenExit from './icons/icon__fullscreen_exit.svg?url'
+
+let idSeq = 0
+
+const props = defineProps({
+  /** Plain Mermaid source (preferred). */
+  source: {
+    type: String,
+    default: ''
+  },
+  /** URI-encoded source from VitePress fence (`graph="…"`). */
+  graph: {
+    type: String,
+    default: ''
+  },
+  id: {
+    type: String,
+    default: ''
+  },
+  /** Fence `center` keyword → true; omit → false. */
+  center: {
+    type: Boolean,
+    default: false
+  },
+  /** Explicit dark mode; omit to auto-detect `html.dark` / `data-theme=dark`. */
+  isDark: {
+    type: Boolean,
+    default: undefined
+  },
+  securityLevel: {
+    type: String,
+    default: 'loose'
+  },
+  enableCopy: {
+    type: Boolean,
+    default: true
+  },
+  enableFullscreen: {
+    type: Boolean,
+    default: true
+  },
+  enableCenterToggle: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['update:center', 'centerChange'])
+
+const rootRef = ref(null)
+const diagramRef = ref(null)
+const loading = ref(false)
+const error = ref(null)
+const isFullscreen = ref(false)
+const centered = ref(Boolean(props.center))
+const idPrefix = props.id || 'tn-mermaid'
+let renderToken = 0
+let lastThemeDark = null
+
+const showActions = computed(
+  () => props.enableCopy || props.enableFullscreen || props.enableCenterToggle
+)
+
+const decodedSource = computed(() => {
+  if (props.source) return props.source
+  if (!props.graph) return ''
+  try {
+    return decodeURIComponent(props.graph)
+  } catch {
+    return props.graph
+  }
+})
+
+const empty = computed(() => !decodedSource.value.trim())
+
+watch(
+  () => props.center,
+  (value) => {
+    centered.value = Boolean(value)
+  }
+)
+
+function toggleCenter() {
+  const next = !centered.value
+  centered.value = next
+  emit('update:center', next)
+  emit('centerChange', next)
+}
+
+function detectDark() {
+  if (typeof props.isDark === 'boolean') return props.isDark
+  const root = document.documentElement
+  return root.classList.contains('dark') || root.dataset.theme === 'dark'
+}
+
+const COPY_RESET_DELAY = 1000
+const copyState = ref('idle')
+const copyIcon = computed(() =>
+  copyState.value === 'copied' ? iconCheck : iconClipboard
+)
+const copyTitle = computed(() => {
+  if (copyState.value === 'copied') return '已复制'
+  if (copyState.value === 'failed') return '复制失败'
+  return '复制源码'
+})
+let copyResetTimer = null
+
+function copySource() {
+  const text = decodedSource.value
+  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)
+    })
+}
+
+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.01
+
+const diagramTransform = computed(() =>
+  isFullscreen.value
+    ? `translate(${panX.value}px, ${panY.value}px) scale(${scale.value})`
+    : undefined
+)
+
+function startDrag(e) {
+  if (!isFullscreen.value) return
+  dragging.value = true
+  dragStartX = e.clientX
+  dragStartY = e.clientY
+  panStartX = panX.value
+  panStartY = panY.value
+}
+
+function onDrag(e) {
+  if (!dragging.value) return
+  panX.value = panStartX + (e.clientX - dragStartX)
+  panY.value = panStartY + (e.clientY - dragStartY)
+}
+
+function endDrag() {
+  dragging.value = false
+}
+
+function handleWheel(e) {
+  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))
+}
+
+function toggleFullscreen() {
+  if (!rootRef.value) return
+  if (!isFullscreen.value) {
+    rootRef.value.requestFullscreen?.()
+  } else {
+    document.exitFullscreen?.()
+  }
+}
+
+function handleFullscreenChange() {
+  isFullscreen.value = !!document.fullscreenElement
+  if (!isFullscreen.value) {
+    scale.value = 1
+    panX.value = 0
+    panY.value = 0
+  }
+}
+
+async function renderDiagram() {
+  await nextTick()
+  if (!diagramRef.value) return
+
+  if (!decodedSource.value.trim()) {
+    loading.value = false
+    error.value = null
+    diagramRef.value.innerHTML = ''
+    return
+  }
+
+  const token = ++renderToken
+  const dark = detectDark()
+  lastThemeDark = dark
+
+  try {
+    loading.value = true
+    error.value = null
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: dark ? 'dark' : 'default',
+      securityLevel: props.securityLevel,
+      fontFamily: 'inherit'
+    })
+    // Mermaid requires a unique DOM id per render; reusing the same id on
+    // theme re-render (common on hard refresh) clears/fails the second pass.
+    const renderId = `${idPrefix}-${++idSeq}`
+    const { svg, bindFunctions } = await mermaid.render(renderId, decodedSource.value)
+    if (token !== renderToken || !diagramRef.value) return
+    diagramRef.value.innerHTML = svg
+    if (bindFunctions) bindFunctions(diagramRef.value)
+  } catch (err) {
+    if (token !== renderToken) return
+    const message = err instanceof Error ? err.message : String(err)
+    error.value = `Failed to render diagram: ${message}`
+    if (diagramRef.value) diagramRef.value.innerHTML = ''
+  } finally {
+    if (token === renderToken) loading.value = false
+  }
+}
+
+function observeTheme() {
+  const observer = new MutationObserver(() => {
+    const dark = detectDark()
+    if (dark === lastThemeDark) return
+    void renderDiagram()
+  })
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class', 'data-theme']
+  })
+  return observer
+}
+
+let themeObserver = null
+
+onMounted(() => {
+  void renderDiagram()
+  themeObserver = observeTheme()
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+})
+
+onBeforeUnmount(() => {
+  themeObserver?.disconnect()
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  if (copyResetTimer) clearTimeout(copyResetTimer)
+})
+
+watch(
+  () => [decodedSource.value, props.securityLevel, props.isDark],
+  () => {
+    void renderDiagram()
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.tn-mermaid {
+  position: relative;
+  margin: 1rem 0;
+  /* Rest: no frame. Border appears with the action menu (hover / menu focus / copy feedback). */
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: var(--tn-c-bg);
+  overflow: hidden;
+  color: var(--tn-c-text);
+  transition: border-color 0.2s ease;
+}
+
+.tn-mermaid:hover,
+.tn-mermaid:has(.tn-mermaid__actions:hover),
+.tn-mermaid:has(.tn-mermaid__actions:focus-within),
+.tn-mermaid:has(.tn-mermaid__actions[data-copy-state='copied']),
+.tn-mermaid:has(.tn-mermaid__actions[data-copy-state='failed']) {
+  border-color: var(--tn-c-divider);
+}
+
+.tn-mermaid__actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px;
+  background-color: color-mix(in srgb, var(--tn-c-bg) 92%, transparent);
+  border: 1px solid var(--tn-c-divider);
+  border-radius: 7px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.tn-mermaid:hover .tn-mermaid__actions,
+.tn-mermaid__actions:hover,
+.tn-mermaid__actions:focus-within,
+.tn-mermaid__actions[data-copy-state='copied'],
+.tn-mermaid__actions[data-copy-state='failed'] {
+  opacity: 1;
+}
+
+.tn-mermaid__actions.is-suppressed,
+.tn-mermaid:hover .tn-mermaid__actions.is-suppressed {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.tn-mermaid__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--tn-c-text-2);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--tn-c-default-soft);
+    color: var(--tn-c-brand);
+  }
+
+  svg,
+  img {
+    width: 16px;
+    height: 16px;
+    display: block;
+  }
+}
+
+.tn-mermaid__action--copy {
+  position: relative;
+
+  &[data-copy-state='copied'] {
+    background-color: var(--tn-c-success-soft);
+  }
+
+  &[data-copy-state='failed'] {
+    background-color: var(--tn-c-danger-soft);
+  }
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    right: calc(100% + 6px);
+    padding: 4px 7px;
+    color: var(--tn-c-text);
+    background: var(--tn-c-bg-elv);
+    border: 1px solid var(--tn-c-divider);
+    border-radius: 6px;
+    box-shadow: var(--tn-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;
+  }
+
+  &[data-copy-state='copied']::after,
+  &[data-copy-state='failed']::after {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+}
+
+.tn-mermaid__stage {
+  position: relative;
+  min-height: 160px;
+  padding: 20px;
+  background: transparent;
+
+  &.is-fullscreen {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    padding: 40px;
+    overflow: hidden;
+    cursor: grab;
+    background: var(--tn-c-bg);
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+
+.tn-mermaid__status {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 1.5rem;
+  color: var(--tn-c-text-2);
+  font-size: 14px;
+  text-align: center;
+  background: var(--tn-c-bg);
+
+  p {
+    margin: 0;
+  }
+}
+
+.tn-mermaid__error {
+  color: var(--tn-c-danger);
+}
+
+.tn-mermaid__diagram.is-obscured {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.tn-mermaid__spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid var(--tn-c-divider);
+  border-top-color: var(--tn-c-brand);
+  border-radius: 50%;
+  animation: tn-mermaid-spin 0.8s linear infinite;
+}
+
+@keyframes tn-mermaid-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.tn-mermaid__diagram {
+  display: flex;
+  justify-content: flex-start;
+
+  &.is-centered {
+    justify-content: center;
+  }
+
+  :deep(svg) {
+    max-width: 100%;
+    height: auto;
+  }
+
+  :deep(svg .label p) {
+    line-height: 1.5;
+  }
+}
+</style>

package/src/components/Mermaid/icons/icon__center_off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#98989f" d="M17 4h3c1.1 0 2 .9 2 2v2h-2V6h-3zM4 8V6h3V4H4c-1.1 0-2 .9-2 2v2zm16 8v2h-3v2h3c1.1 0 2-.9 2-2v-2zM7 18H4v-2H2v2c0 1.1.9 2 2 2h3zm9-8v4H8v-4zm2-2H6v8h12z"/></svg>

package/src/components/Mermaid/icons/icon__center_on.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#646cff" d="M17 4h3c1.1 0 2 .9 2 2v2h-2V6h-3zM4 8V6h3V4H4c-1.1 0-2 .9-2 2v2zm16 8v2h-3v2h3c1.1 0 2-.9 2-2v-2zM7 18H4v-2H2v2c0 1.1.9 2 2 2h3zm9-8v4H8v-4zm2-2H6v8h12z"/></svg>

package/src/components/Mermaid/icons/icon__check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="20 6 9 17 4 12"></polyline>
+</svg>

package/src/components/Mermaid/icons/icon__clipboard.svg

@@ -0,0 +1,8 @@
+<svg t="1735090484450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4809"
+  width="1em" height="1em">
+  <path
+    d="M752 176V64c0-35.3-28.7-64-64-64H144c-35.3 0-64 28.7-64 64v704c0 35.3 28.7 64 64 64h112c8.8 0 16 7.2 16 16v112c0 35.3 28.7 64 64 64h544c35.3 0 64-28.7 64-64V256c0-35.3-28.7-64-64-64H768c-8.8 0-16-7.2-16-16zM256 768h-96c-8.8 0-16-7.2-16-16V80c0-8.8 7.2-16 16-16h512c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16H336c-35.3 0-64 28.7-64 64v496c0 8.8-7.2 16-16 16z m608 192H352c-8.8 0-16-7.2-16-16V272c0-8.8 7.2-16 16-16h512c8.8 0 16 7.2 16 16v672c0 8.8-7.2 16-16 16z"
+    p-id="4810" fill="#646cff"></path>
+  <path d="M704 352H512c-17.7 0-32-14.3-32-32s14.3-32 32-32h192c17.7 0 32 14.3 32 32s-14.3 32-32 32z" p-id="4811"
+    fill="#646cff"></path>
+</svg>

package/src/components/Mermaid/icons/icon__fullscreen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="#646cff" d="M9.793 12.793a1 1 0 0 1 1.497 1.32l-.083.094L6.414 19H9a1 1 0 0 1 .117 1.993L9 21H4a1 1 0 0 1-.993-.883L3 20v-5a1 1 0 0 1 1.993-.117L5 15v2.586zM20 3a1 1 0 0 1 .993.883L21 4v5a1 1 0 0 1-1.993.117L19 9V6.414l-4.793 4.793a1 1 0 0 1-1.497-1.32l.083-.094L17.586 5H15a1 1 0 0 1-.117-1.993L15 3z"/></g></svg>

package/src/components/Mermaid/icons/icon__fullscreen_exit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#646cff" d="m10 15.4l-5.9 5.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7L8.6 14H5q-.425 0-.712-.288T4 13t.288-.712T5 12h6q.425 0 .713.288T12 13v6q0 .425-.288.713T11 20t-.712-.288T10 19zm5.4-5.4H19q.425 0 .713.288T20 11t-.288.713T19 12h-6q-.425 0-.712-.288T12 11V5q0-.425.288-.712T13 4t.713.288T14 5v3.6l5.9-5.9q.275-.275.7-.275t.7.275t.275.7t-.275.7z"/></svg>