@tnotesjs/core 0.2.2 → 0.4.0

package/vitepress/components/MarkMap/MarkMap.vue

@@ -1,625 +0,0 @@
-<!-- 
-vitepress/components/MarkMap/MarkMap.vue 
--->
-
-<script setup lang="ts">
-import { scaleOrdinal, schemePastel2, schemeSet3, schemeTableau10 } from 'd3'
-import { Transformer } from 'markmap-lib'
-import { Toolbar } from 'markmap-toolbar'
-import 'markmap-toolbar/dist/style.css'
-import { Markmap, IMarkmapOptions } from 'markmap-view'
-import { onContentUpdated } from 'vitepress'
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-
-import { icon__fullscreen, icon__fullscreen_exit, icon__confirm } from '../../assets/icons'
-import { MARKMAP_THEME_KEY, MARKMAP_EXPAND_LEVEL_KEY } from '../constants'
-
-// doc: https://github.com/markmap/markmap/blob/205367a24603dc187f67da1658940c6cade20dce/packages/markmap-view/src/constants.ts#L15
-
-const props = defineProps({
-  content: { type: String, default: '' },
-  duration: { type: Number, default: 100 },
-  spacingVertical: { type: Number, default: 10 },
-  spacingHorizontal: { type: Number, default: 20 },
-  nodeMinHeight: { type: Number, default: 24 },
-  initialExpandLevel: { type: Number, default: 5 },
-})
-
-const svgRef = ref<SVGSVGElement | null>(null)
-const containerRef = ref<HTMLDivElement | null>(null)
-
-let markmapInstance: Markmap | null = null
-let observer: MutationObserver | null = null
-let toolbarEl: HTMLElement | null = null
-let toolbarReinitTimer: ReturnType<typeof setTimeout> | null = null
-let darkClassObserver: MutationObserver | null = null
-
-const isMarkmapDark = ref(false)
-
-// 从 localStorage 读取配置，如果没有则使用 props 或默认值
-const getInitialExpandLevel = () => {
-  if (typeof window !== 'undefined') {
-    const saved = localStorage.getItem(MARKMAP_EXPAND_LEVEL_KEY)
-    if (saved) return parseInt(saved)
-  }
-  return props.initialExpandLevel
-}
-
-const getThemeColorFn = () => {
-  if (typeof window !== 'undefined') {
-    if (document.documentElement.classList.contains('markmap-dark')) {
-      return scaleOrdinal(schemeSet3)
-    }
-    const theme = localStorage.getItem(MARKMAP_THEME_KEY) || 'default'
-    switch (theme) {
-      case 'colorful':
-        return scaleOrdinal(schemeTableau10)
-      case 'dark':
-        return scaleOrdinal(schemeSet3)
-      default:
-        return scaleOrdinal(schemePastel2)
-    }
-  }
-  return scaleOrdinal(schemePastel2)
-}
-
-// 可由配置/props 初始化，也可以通过工具栏改动
-const expandLevel = ref(getInitialExpandLevel())
-const transformer = new Transformer()
-const isFullscreen = ref(false)
-
-// 保存工具栏中层级输入框的引用，方便同步显示与绑定事件
-let toolbarLevelInput: HTMLInputElement | null = null
-
-function renderMarkmap(content: string, level = expandLevel.value) {
-  if (!svgRef.value) return
-
-  nextTick().then(() => {
-    if (markmapInstance) {
-      try {
-        markmapInstance.destroy()
-      } catch {}
-      markmapInstance = null
-    }
-
-    if (!content.trim()) {
-      svgRef.value!.innerHTML = '<text x="20" y="30" fill="#999">空内容</text>'
-      return
-    }
-
-    try {
-      const { root } = transformer.transform(content)
-      const colorFn = getThemeColorFn()
-      const options: Partial<IMarkmapOptions> = {
-        // autoFit 会自动调整 scale 和 position 来适配当前容器大小，在阅读大量节点内容的时候，会放大某块区域阅读，每次展开节点或者收起节点，都会自动触发 autoFit，导致阅读体验不佳，因此不启用。
-        // autoFit: true,
-        initialExpandLevel: level,
-        duration: props.duration,
-        nodeMinHeight: props.nodeMinHeight,
-        spacingVertical: props.spacingVertical,
-        spacingHorizontal: props.spacingHorizontal,
-        maxInitialScale: 2,
-        maxWidth: 400,
-        // 使用配置的主题颜色
-        color: (node): string => colorFn(`${node.state?.path || ''}`),
-      }
-
-      markmapInstance = Markmap.create(svgRef.value!, options, root)
-
-      setTimeout(() => {
-        try {
-          markmapInstance?.fit() // 确保居中
-        } catch (e) {
-          console.warn('fit failed', e)
-        }
-      }, 0)
-
-      initToolbar()
-      setupObserver()
-    } catch (error: any) {
-      console.error('Markmap render error:', error)
-      svgRef.value!.innerHTML = `<text x="20" y="30" fill="red">Markmap 错误: ${error.message}</text>`
-    }
-  })
-}
-
-function initToolbar() {
-  if (!markmapInstance || !containerRef.value) return
-
-  // 移除现有的工具栏
-  if (toolbarEl) {
-    toolbarEl.remove()
-    toolbarEl = null
-    toolbarLevelInput = null
-  }
-
-  // 创建新工具栏
-  const { el } = Toolbar.create(markmapInstance)
-  toolbarEl = el
-  toolbarEl.style.position = 'absolute'
-  toolbarEl.style.top = '1rem'
-  toolbarEl.style.right = '.5rem'
-  toolbarEl.style.zIndex = '10'
-  toolbarEl.style.scale = '.8'
-  const brand = toolbarEl.querySelector('.mm-toolbar-brand')
-  if (brand) toolbarEl.removeChild(brand)
-  containerRef.value.appendChild(toolbarEl)
-
-  // 添加自定义全屏按钮
-  addFullscreenButton(toolbarEl)
-
-  // 在工具栏中添加更新按钮 + 层级输入（并支持 Enter 键触发）
-  addUpdateButton(toolbarEl)
-}
-
-function addFullscreenButton(toolbar: HTMLElement) {
-  const fullscreenBtn = document.createElement('div')
-  fullscreenBtn.className = 'mm-toolbar-item'
-  fullscreenBtn.title = isFullscreen.value ? '退出全屏' : '全屏'
-  fullscreenBtn.innerHTML = isFullscreen.value
-    ? `<img src="${icon__fullscreen_exit}" alt="退出全屏" style="width:18px;height:18px;display:block" />`
-    : `<img src="${icon__fullscreen}" alt="全屏" style="width:18px;height:18px;display:block" />`
-  fullscreenBtn.addEventListener('click', toggleFullscreen)
-  toolbar.appendChild(fullscreenBtn)
-}
-
-function addUpdateButton(toolbar: HTMLElement) {
-  // 创建更新按钮容器
-  const updateContainer = document.createElement('div')
-  updateContainer.style.display = 'flex'
-  updateContainer.style.alignItems = 'center'
-  updateContainer.style.gap = '8px'
-  updateContainer.style.marginRight = '5px'
-
-  // 创建输入框（确保具有 id/name，且样式能在工具栏中清晰可见）
-  const levelInput = document.createElement('input')
-  levelInput.type = 'number'
-  levelInput.id = 'markmap-expand-level'
-  levelInput.name = 'markmap-expand-level'
-  levelInput.min = '1'
-  levelInput.max = '100'
-  levelInput.value = expandLevel.value.toString()
-  levelInput.style.width = '2.4rem'
-  levelInput.style.height = '1.6rem'
-  levelInput.style.padding = '2px 6px'
-  levelInput.style.fontSize = '12px'
-  levelInput.style.lineHeight = '1.2'
-  levelInput.style.textAlign = 'center'
-  levelInput.style.boxSizing = 'border-box'
-  levelInput.style.borderBottom = '.5px solid var(--vp-c-tip-1)'
-  // levelInput.style.borderRadius = '4px'
-  // levelInput.style.background = 'var(--vp-c-bg)'
-  levelInput.style.color = 'var(--vp-c-tip-1)'
-  levelInput.title = '展开层级'
-
-  // 保存引用，供外部（props 改变）同步输入值
-  toolbarLevelInput = levelInput
-
-  // 实时限制输入范围（1-100）
-  levelInput.addEventListener('input', (e) => {
-    const input = e.target as HTMLInputElement
-    let value = parseInt(input.value)
-
-    // 如果输入为空或非数字，不做处理
-    if (input.value === '' || isNaN(value)) return
-
-    // 限制范围：1-100
-    if (value < 1) {
-      input.value = '1'
-      value = 1
-    } else if (value > 100) {
-      input.value = '100'
-      value = 100
-    }
-  })
-
-  // 当输入框值变化时仅更新内部 expandLevel（不自动渲染）
-  levelInput.addEventListener('change', (e) => {
-    const value = parseInt((e.target as HTMLInputElement).value)
-    if (!isNaN(value) && value >= 1 && value <= 100) {
-      expandLevel.value = value
-    } else {
-      // 回退到之前的值（避免非法输入）
-      levelInput.value = expandLevel.value.toString()
-    }
-  })
-
-  // 按键监听：按 Enter 时触发更新（相当于点击确认按钮）
-  levelInput.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') {
-      // 同步输入框值到 expandLevel（防止未触发 change）
-      const val = parseInt((e.target as HTMLInputElement).value)
-      if (!isNaN(val) && val >= 1 && val <= 100) {
-        expandLevel.value = val
-      } else {
-        // 如果超出范围，重置为有效值
-        levelInput.value = expandLevel.value.toString()
-      }
-      onUpdateClick()
-    }
-  })
-
-  // 创建按钮
-  const updateBtn = document.createElement('button')
-  updateBtn.type = 'button'
-  updateBtn.title = '确定层级并更新'
-  updateBtn.innerHTML = `<img src="${icon__confirm}" alt="确定" style="width:16px;height:16px;display:block" />`
-  updateBtn.addEventListener('click', onUpdateClick)
-
-  updateContainer.appendChild(levelInput)
-  updateContainer.appendChild(updateBtn)
-
-  // 将更新按钮插入到工具栏开头
-  toolbar.insertBefore(updateContainer, toolbar.firstChild)
-}
-
-// 切换全屏（保持原来的实现）
-function toggleFullscreen() {
-  if (!containerRef.value) return
-
-  if (!isFullscreen.value) {
-    // 进入全屏
-    if (containerRef.value.requestFullscreen) {
-      containerRef.value.requestFullscreen().catch((err) => {
-        console.error('全屏请求失败:', err)
-      })
-    } else if ((containerRef.value as any).webkitRequestFullscreen) {
-      ;(containerRef.value as any).webkitRequestFullscreen()
-    } else if ((containerRef.value as any).msRequestFullscreen) {
-      ;(containerRef.value as any).msRequestFullscreen()
-    }
-  } else {
-    // 退出全屏
-    if (document.exitFullscreen) {
-      document.exitFullscreen()
-    } else if ((document as any).webkitExitFullscreen) {
-      ;(document as any).webkitExitFullscreen()
-    } else if ((document as any).msExitFullscreen) {
-      ;(document as any).msExitFullscreen()
-    }
-  }
-}
-
-// 监听全屏状态变化
-function handleFullscreenChange() {
-  isFullscreen.value = !!(
-    document.fullscreenElement ||
-    (document as any).webkitFullscreenElement ||
-    (document as any).msFullscreenElement
-  )
-
-  // 更新工具栏中的全屏按钮（若存在）
-  if (toolbarEl) {
-    const fullscreenBtn = toolbarEl.querySelector(
-      '.mm-toolbar-item:last-child'
-    ) as HTMLButtonElement
-    if (fullscreenBtn) {
-      fullscreenBtn.title = isFullscreen.value
-        ? '退出全屏（Exit Fullscreen）'
-        : '全屏（Fullscreen）'
-      fullscreenBtn.innerHTML = isFullscreen.value
-        ? `<img src="${icon__fullscreen_exit}" alt="退出全屏" style="width:18px;height:18px;display:block" />`
-        : `<img src="${icon__fullscreen}" alt="全屏" style="width:18px;height:18px;display:block" />`
-    }
-  }
-
-  // 全屏模式下调整SVG高度
-  if (svgRef.value) {
-    if (isFullscreen.value) {
-      svgRef.value.style.height = 'calc(100vh - 100px)'
-    } else {
-      svgRef.value.style.height = '400px'
-    }
-
-    // 确保居中 - 无论进入还是退出全屏都执行居中
-    setTimeout(() => {
-      if (markmapInstance) {
-        try {
-          markmapInstance.fit()
-        } catch (e) {
-          console.warn('居中失败', e)
-        }
-      }
-    }, 300)
-  }
-}
-
-function setupObserver() {
-  if (!svgRef.value) return
-  if (observer !== null) {
-    observer.disconnect()
-  }
-  observer = new MutationObserver(() => {
-    // DOM 变动后处理（保留扩展点）
-  })
-  observer.observe(svgRef.value, {
-    childList: true,
-    subtree: true,
-    attributes: true,
-  })
-}
-
-// 只监听内容变化，expandLevel 改动不自动渲染（点击/Enter 确认渲染）
-watch(
-  () => props.content,
-  (newVal) => {
-    renderMarkmap(decodeURIComponent(newVal || ''))
-  }
-)
-
-// 新增：当外部传入的 initialExpandLevel 改变时，组件应同步并重新渲染
-watch(
-  () => props.initialExpandLevel,
-  (newVal) => {
-    if (typeof newVal === 'number' && !isNaN(newVal)) {
-      expandLevel.value = newVal
-      // 更新输入框显示（如果已创建）
-      if (toolbarLevelInput) toolbarLevelInput.value = newVal.toString()
-      // 重新渲染使用新的层级（保持对外部 prop 改动的即时响应）
-      renderMarkmap(decodeURIComponent(props.content || ''), newVal)
-    }
-  }
-)
-
-// 同步：当内部 expandLevel 变更时（例如通过输入框 change 事件），更新工具栏输入显示
-watch(expandLevel, (v) => {
-  if (toolbarLevelInput) {
-    const asStr = (v || 0).toString()
-    if (toolbarLevelInput.value !== asStr) {
-      toolbarLevelInput.value = asStr
-    }
-  }
-})
-
-// 点击更新按钮才用当前 expandLevel 渲染
-function onUpdateClick() {
-  renderMarkmap(decodeURIComponent(props.content || ''), expandLevel.value)
-}
-
-function syncMarkmapDarkState(reRender = false) {
-  const dark = document.documentElement.classList.contains('markmap-dark')
-  const changed = isMarkmapDark.value !== dark
-  isMarkmapDark.value = dark
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(MARKMAP_THEME_KEY, dark ? 'dark' : 'default')
-  }
-  if (reRender && changed && markmapInstance && props.content) {
-    renderMarkmap(decodeURIComponent(props.content || ''), expandLevel.value)
-  }
-}
-
-function ensureToolbarAfterContentUpdate() {
-  if (toolbarReinitTimer) clearTimeout(toolbarReinitTimer)
-  // ContentCollapse.onContentUpdated 会在 ~150ms 后重组 DOM，稍晚再补挂工具栏
-  toolbarReinitTimer = setTimeout(() => {
-    toolbarReinitTimer = null
-    if (!containerRef.value || !markmapInstance) return
-    if (!containerRef.value.querySelector('.mm-toolbar')) {
-      initToolbar()
-    }
-  }, 350)
-}
-
-onMounted(() => {
-  if (typeof window !== 'undefined') {
-    if (localStorage.getItem(MARKMAP_THEME_KEY) === 'dark') {
-      document.documentElement.classList.add('markmap-dark')
-    }
-    syncMarkmapDarkState(false)
-    darkClassObserver = new MutationObserver(() => syncMarkmapDarkState(true))
-    darkClassObserver.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class'],
-    })
-  }
-
-  renderMarkmap(decodeURIComponent(props.content || ''))
-
-  // 添加全屏事件监听
-  document.addEventListener('fullscreenchange', handleFullscreenChange)
-  document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
-  document.addEventListener('MSFullscreenChange', handleFullscreenChange)
-})
-
-onContentUpdated(() => {
-  ensureToolbarAfterContentUpdate()
-})
-
-onBeforeUnmount(() => {
-  if (darkClassObserver) {
-    darkClassObserver.disconnect()
-    darkClassObserver = null
-  }
-  if (toolbarReinitTimer) {
-    clearTimeout(toolbarReinitTimer)
-    toolbarReinitTimer = null
-  }
-  if (toolbarEl) {
-    toolbarEl.remove()
-    toolbarEl = null
-    toolbarLevelInput = null
-  }
-  if (markmapInstance) {
-    try {
-      markmapInstance.destroy()
-    } catch {}
-    markmapInstance = null
-  }
-  if (observer !== null) {
-    observer.disconnect()
-    observer = null
-  }
-
-  // 移除全屏事件监听
-  document.removeEventListener('fullscreenchange', handleFullscreenChange)
-  document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
-  document.removeEventListener('MSFullscreenChange', handleFullscreenChange)
-})
-</script>
-
-<template>
-  <div
-    class="markmapContainer"
-    :class="{ 'is-markmap-dark': isMarkmapDark }"
-    ref="containerRef"
-    style="position: relative"
-  >
-    <svg ref="svgRef" style="width: 100%; height: 400px"></svg>
-  </div>
-</template>
-
-<style scoped lang="scss">
-/**
- * MarkMap 组件样式
- * 全局样式（.mm-toolbar, .mm-toolbar-item 等）已移至 global-components.css
- */
-
-.markmapContainer {
-  border-radius: 8px;
-  padding: 1rem;
-  overflow: auto;
-  position: relative;
-  margin: 1.5rem 0;
-  transition: all 0.3s ease;
-  background-color: #fff;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-
-  &:hover {
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
-  }
-
-  svg {
-    min-width: 100%;
-    display: block;
-    transition: height 0.3s ease;
-
-    text:empty {
-      animation: pulse 1.5s ease-in-out infinite;
-    }
-  }
-}
-
-/* dark background */
-.markmapContainer.is-markmap-dark {
-  background-color: #1d1d1d;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
-
-  &:hover {
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-  }
-}
-
-/* 按钮组样式 */
-.btnGroup {
-  color: var(--vp-c-brand-1);
-
-  input {
-    display: inline-block;
-    width: 2rem;
-    text-align: center;
-    border: 1px solid var(--vp-c-divider);
-    border-radius: 4px;
-    padding: 2px 4px;
-    background: var(--vp-c-bg);
-    color: var(--vp-c-text-1);
-    transition: all 0.2s ease;
-
-    &:focus {
-      outline: none;
-      border-color: var(--vp-c-brand-1);
-      box-shadow: 0 0 0 2px rgba(var(--vp-c-brand-1), 0.1);
-    }
-
-    &:hover {
-      border-color: var(--vp-c-brand-2);
-    }
-  }
-
-  button {
-    outline: none;
-    border: none;
-    cursor: pointer;
-    padding: 4px 8px;
-    border-radius: 4px;
-    background-color: #f0f0f0;
-    transition: all 0.2s ease;
-    font-weight: 500;
-
-    &:hover {
-      background-color: #e0e0e0;
-      transform: translateY(-1px);
-    }
-
-    &:active {
-      transform: translateY(0);
-    }
-  }
-}
-
-:global(.markmap-dark) .btnGroup {
-  button {
-    background-color: #333;
-    color: #fff;
-
-    &:hover {
-      background-color: #444;
-    }
-  }
-
-  input {
-    background-color: #2a2a2a;
-    border-color: #444;
-    color: #fff;
-
-    &:focus {
-      border-color: var(--vp-c-brand-1);
-    }
-  }
-}
-
-/* 全屏样式 */
-.markmapContainer:fullscreen,
-.markmapContainer:-ms-fullscreen,
-.markmapContainer:-webkit-full-screen {
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  background: white;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  box-shadow: none;
-}
-
-.markmapContainer.is-markmap-dark:fullscreen,
-.markmapContainer.is-markmap-dark:-ms-fullscreen,
-.markmapContainer.is-markmap-dark:-webkit-full-screen {
-  background: #1d1d1d;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .markmapContainer {
-    padding: 0.75rem;
-    margin: 1rem 0;
-  }
-}
-
-@media (max-width: 480px) {
-  .markmapContainer {
-    padding: 0.5rem;
-    margin: 0.75rem 0;
-  }
-}
-
-/* 加载动画 */
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-</style>