md2ui 1.0.0

package/src/api/docs.js

@@ -0,0 +1,103 @@
+// 构建目录树结构（支持多层嵌套）
+function buildTree(files) {
+  const root = { children: [] }
+  
+  files.forEach(file => {
+    const parts = file.relativePath.split('/')
+    let currentLevel = root
+    
+    for (let i = 0; i < parts.length - 1; i++) {
+      const folderName = parts[i]
+      const folderPath = parts.slice(0, i + 1).join('/')
+      
+      let folder = currentLevel.children.find(item => item.key === folderPath)
+      
+      if (!folder) {
+        const match = folderName.match(/^(\d+)-(.+)$/)
+        const folderLabel = match ? match[2] : folderName
+        const cleanFolderLabel = folderLabel.replace(/[。.]$/, '')
+        folder = {
+          type: 'folder',
+          key: folderPath,
+          label: cleanFolderLabel,
+          order: match ? parseInt(match[1]) : 999,
+          level: i,
+          children: [],
+          expanded: false
+        }
+        currentLevel.children.push(folder)
+      }
+      
+      currentLevel = folder
+    }
+    
+    currentLevel.children.push({
+      type: 'file',
+      ...file
+    })
+  })
+  
+  function sortChildren(node) {
+    if (node.children) {
+      node.children.sort((a, b) => a.order - b.order)
+      node.children.forEach(child => sortChildren(child))
+    }
+  }
+  
+  sortChildren(root)
+  return root.children
+}
+
+// 获取文档列表
+export async function getDocsList() {
+  // 尝试 CLI 模式：检查是否有用户文档 API
+  try {
+    const response = await fetch('/@user-docs-list')
+    if (response.ok) {
+      return await response.json()
+    }
+  } catch {
+    // 忽略错误，继续使用开发模式
+  }
+
+  // 开发模式：扫描 public/docs 目录
+  try {
+    const modules = import.meta.glob('/public/docs/**/*.md')
+    const files = []
+    
+    for (const path in modules) {
+      const relativePath = path.replace('/public/docs/', '').replace('.md', '')
+      const parts = relativePath.split('/')
+      const fileName = parts[parts.length - 1]
+      
+      const match = fileName.match(/^(\d+)-(.+)$/)
+      if (match) {
+        const [, order, name] = match
+        const cleanName = name.replace(/[。.]$/, '')
+        files.push({
+          key: relativePath,
+          label: cleanName,
+          order: parseInt(order),
+          path: `/docs/${relativePath}.md`,
+          relativePath,
+          level: parts.length - 1
+        })
+      } else {
+        const cleanFileName = fileName.replace(/[。.]$/, '')
+        files.push({
+          key: relativePath,
+          label: cleanFileName,
+          order: 999,
+          path: `/docs/${relativePath}.md`,
+          relativePath,
+          level: parts.length - 1
+        })
+      }
+    }
+    
+    return buildTree(files)
+  } catch (error) {
+    console.error('获取文档列表失败:', error)
+    return []
+  }
+}

package/src/components/ImageZoom.vue

@@ -0,0 +1,285 @@
+<template>
+  <teleport to="body">
+    <div
+      v-if="visible"
+      class="image-zoom-overlay"
+      @click="handleOverlayClick"
+      @wheel="handleWheel"
+      @mousedown="handleMouseDown"
+      @mousemove="handleMouseMove"
+      @mouseup="handleMouseUp"
+      @mouseleave="handleMouseUp"
+    >
+      <div class="image-zoom-container">
+        <!-- 工具栏 -->
+        <div class="zoom-toolbar">
+          <button class="zoom-btn" @click="handleZoomIn" title="放大">
+            <ZoomIn :size="16" />
+          </button>
+          <button class="zoom-btn" @click="handleZoomOut" title="缩小">
+            <ZoomOut :size="16" />
+          </button>
+          <button class="zoom-btn" @click="resetZoom" title="重置">
+            <RotateCcw :size="16" />
+          </button>
+          <span class="zoom-level">{{ Math.round(scale * 100) }}%</span>
+          <button class="zoom-btn close-btn" @click="close" title="关闭">
+            <X :size="16" />
+          </button>
+        </div>
+
+        <!-- 图片容器 -->
+        <div
+          class="image-wrapper"
+          :style="{
+            transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`,
+            transformOrigin: 'center center'
+          }"
+          v-html="imageContent"
+        ></div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ZoomIn, ZoomOut, RotateCcw, X } from 'lucide-vue-next'
+
+// Props
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  imageContent: {
+    type: String,
+    default: ''
+  }
+})
+
+// Emits
+const emit = defineEmits(['close'])
+
+// 缩放和拖拽状态
+const scale = ref(1)
+const translateX = ref(0)
+const translateY = ref(0)
+const isDragging = ref(false)
+const lastMouseX = ref(0)
+const lastMouseY = ref(0)
+
+// 缩放控制
+const minScale = 0.1
+const maxScale = 10
+const scaleStep = 0.2
+
+// 放大
+function handleZoomIn() {
+  if (scale.value < maxScale) {
+    scale.value = Math.min(scale.value + scaleStep, maxScale)
+  }
+}
+
+// 缩小
+function handleZoomOut() {
+  if (scale.value > minScale) {
+    scale.value = Math.max(scale.value - scaleStep, minScale)
+  }
+}
+
+// 重置缩放
+function resetZoom() {
+  scale.value = 1
+  translateX.value = 0
+  translateY.value = 0
+}
+
+// 关闭
+function close() {
+  resetZoom()
+  emit('close')
+}
+
+// 处理遮罩层点击
+function handleOverlayClick(event) {
+  if (event.target.classList.contains('image-zoom-overlay')) {
+    close()
+  }
+}
+
+// 处理滚轮缩放
+function handleWheel(event) {
+  event.preventDefault()
+  
+  const delta = event.deltaY > 0 ? -scaleStep : scaleStep
+  const newScale = Math.max(minScale, Math.min(maxScale, scale.value + delta))
+  
+  if (newScale !== scale.value) {
+    scale.value = newScale
+  }
+}
+
+// 处理鼠标按下
+function handleMouseDown(event) {
+  if (event.target.closest('.zoom-toolbar')) return
+  
+  isDragging.value = true
+  lastMouseX.value = event.clientX
+  lastMouseY.value = event.clientY
+  event.preventDefault()
+}
+
+// 处理鼠标移动
+function handleMouseMove(event) {
+  if (!isDragging.value) return
+  
+  const deltaX = event.clientX - lastMouseX.value
+  const deltaY = event.clientY - lastMouseY.value
+  
+  translateX.value += deltaX
+  translateY.value += deltaY
+  
+  lastMouseX.value = event.clientX
+  lastMouseY.value = event.clientY
+}
+
+// 处理鼠标释放
+function handleMouseUp() {
+  isDragging.value = false
+}
+
+// 监听键盘事件
+function handleKeyDown(event) {
+  if (!props.visible) return
+  
+  switch (event.key) {
+    case 'Escape':
+      close()
+      break
+    case '+':
+    case '=':
+      handleZoomIn()
+      break
+    case '-':
+      handleZoomOut()
+      break
+    case '0':
+      resetZoom()
+      break
+  }
+}
+
+// 添加键盘监听
+if (typeof window !== 'undefined') {
+  window.addEventListener('keydown', handleKeyDown)
+}
+</script>
+
+<style scoped>
+.image-zoom-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.95);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+}
+
+.image-zoom-overlay:active {
+  cursor: grabbing;
+}
+
+.image-zoom-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  overflow: auto;
+  padding: 40px;
+}
+
+.zoom-toolbar {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.95);
+  padding: 8px 12px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 10000;
+  pointer-events: auto;
+}
+
+.zoom-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: #4a5568;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.15s;
+}
+
+.zoom-btn:hover {
+  background: #f7fafc;
+  color: #2d3748;
+}
+
+.close-btn {
+  color: #e53e3e;
+}
+
+.close-btn:hover {
+  background: #fed7d7;
+  color: #c53030;
+}
+
+.zoom-level {
+  font-size: 12px;
+  font-weight: 600;
+  color: #4a5568;
+  padding: 0 8px;
+  min-width: 50px;
+  text-align: center;
+}
+
+.image-wrapper {
+  transition: transform 0.2s ease-out;
+  cursor: grab;
+  background: rgba(255, 255, 255, 0.98);
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  pointer-events: auto;
+}
+
+.image-wrapper:active {
+  cursor: grabbing;
+}
+
+/* 确保SVG在放大时保持清晰 */
+.image-wrapper :deep(svg) {
+  display: block !important;
+  background: white;
+  border-radius: 4px;
+  min-width: 800px;
+  width: auto !important;
+  height: auto !important;
+}
+</style>

package/src/components/Logo.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="logo-container" @click="$emit('go-home')" title="返回首页">
+    <svg class="logo-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="4" y="3" width="16" height="18" rx="2" stroke="currentColor" stroke-width="2" fill="none"/>
+      <line x1="8" y1="8" x2="16" y2="8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      <line x1="8" y1="12" x2="16" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      <line x1="8" y1="16" x2="13" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+    </svg>
+    <span class="logo-text">md2ui</span>
+  </div>
+</template>
+
+<script setup>
+defineEmits(['go-home'])
+</script>
+
+<style scoped>
+.logo-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #111827;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.logo-container:hover {
+  opacity: 0.7;
+}
+
+.logo-container:active {
+  opacity: 0.5;
+}
+
+.logo-icon {
+  flex-shrink: 0;
+}
+
+.logo-text {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+</style>

package/src/components/TableOfContents.vue

@@ -0,0 +1,44 @@
+<template>
+  <aside class="toc-sidebar" v-if="tocItems.length > 0 && !collapsed" :style="{ width: width + 'px' }">
+    <div class="toc-header">
+      <List :size="16" />
+      <span>目录</span>
+    </div>
+    <nav class="toc-nav">
+      <a 
+        v-for="item in tocItems" 
+        :key="item.id"
+        :href="`#${item.id}`"
+        :class="['toc-item', `toc-level-${item.level}`, { active: activeHeading === item.id }]"
+        @click.prevent="$emit('scroll-to', item.id)"
+      >
+        {{ item.text }}
+      </a>
+    </nav>
+  </aside>
+</template>
+
+<script setup>
+import { List } from 'lucide-vue-next'
+
+defineProps({
+  tocItems: {
+    type: Array,
+    default: () => []
+  },
+  activeHeading: {
+    type: String,
+    default: ''
+  },
+  collapsed: {
+    type: Boolean,
+    default: false
+  },
+  width: {
+    type: Number,
+    default: 240
+  }
+})
+
+defineEmits(['scroll-to'])
+</script>

package/src/components/TreeNode.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <!-- 文件夹节点 -->
+    <div 
+      v-if="item.type === 'folder'"
+      class="nav-item nav-folder"
+      :class="{ expanded: item.expanded }"
+      :style="{ paddingLeft: `${20 + item.level * 16}px` }"
+      @click="$emit('toggle', item)"
+    >
+      <ChevronRight v-if="!item.expanded" class="nav-icon chevron-icon" :size="16" />
+      <ChevronDown v-else class="nav-icon chevron-icon" :size="16" />
+      <Folder v-if="!item.expanded" class="nav-icon folder-icon" :size="16" />
+      <FolderOpen v-else class="nav-icon folder-icon" :size="16" />
+      <span>{{ item.label }}</span>
+    </div>
+    
+    <!-- 递归渲染子节点 -->
+    <template v-if="item.type === 'folder' && item.expanded && item.children">
+      <TreeNode 
+        v-for="child in item.children" 
+        :key="child.key"
+        :item="child"
+        :currentDoc="currentDoc"
+        @toggle="$emit('toggle', $event)"
+        @select="$emit('select', $event)"
+      />
+    </template>
+    
+    <!-- 文件节点 -->
+    <div 
+      v-if="item.type === 'file'"
+      class="nav-item"
+      :class="{ active: currentDoc === item.key }"
+      :style="{ paddingLeft: `${20 + item.level * 16}px` }"
+      @click="$emit('select', item.key)"
+    >
+      <FileText class="nav-icon file-icon" :size="16" />
+      <span>{{ item.label }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ChevronRight, ChevronDown, Folder, FolderOpen, FileText } from 'lucide-vue-next'
+
+defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  currentDoc: {
+    type: String,
+    required: true
+  }
+})
+
+defineEmits(['toggle', 'select'])
+</script>
+
+

package/src/composables/useMarkdown.js

@@ -0,0 +1,128 @@
+import { ref, nextTick } from 'vue'
+import { marked } from 'marked'
+import mermaid from 'mermaid'
+
+// 初始化 Mermaid - 使用 neutral 主题
+mermaid.initialize({
+  startOnLoad: false,
+  theme: 'neutral',
+  securityLevel: 'loose'
+})
+
+// 自定义 marked 渲染器，处理 Mermaid 代码块
+const renderer = new marked.Renderer()
+const originalCodeRenderer = renderer.code.bind(renderer)
+
+renderer.code = function(code, language) {
+  if (language === 'mermaid') {
+    const id = 'mermaid-' + Math.random().toString(36).substr(2, 9)
+    return `<div class="mermaid" id="${id}">${code}</div>`
+  }
+  return originalCodeRenderer(code, language)
+}
+
+marked.setOptions({
+  renderer,
+  breaks: true,
+  gfm: true,
+  headerIds: true,
+  mangle: false
+})
+
+export function useMarkdown() {
+  const htmlContent = ref('')
+  const tocItems = ref([])
+
+  // 渲染 Markdown
+  async function renderMarkdown(markdown) {
+    htmlContent.value = marked.parse(markdown)
+    await renderMermaid()
+    wrapTables()
+    addImageZoomHandlers()
+    extractTOC()
+  }
+
+  // 为表格添加滚动容器
+  function wrapTables() {
+    nextTick(() => {
+      const tables = document.querySelectorAll('.markdown-content table')
+      tables.forEach(table => {
+        // 检查是否已经被包裹
+        if (!table.parentElement.classList.contains('table-wrapper')) {
+          const wrapper = document.createElement('div')
+          wrapper.className = 'table-wrapper'
+          table.parentNode.insertBefore(wrapper, table)
+          wrapper.appendChild(table)
+        }
+      })
+    })
+  }
+
+  // 渲染 Mermaid 图表
+  async function renderMermaid() {
+    await nextTick()
+    const mermaidElements = document.querySelectorAll('.mermaid')
+    
+    for (const element of mermaidElements) {
+      try {
+        const id = element.id
+        const code = element.textContent
+        const { svg } = await mermaid.render(id + '-svg', code)
+        element.innerHTML = svg
+        
+        // 为Mermaid图表添加可点击样式
+        element.classList.add('zoomable-image')
+        element.style.cursor = 'zoom-in'
+        element.title = '点击放大查看'
+      } catch (error) {
+        console.error('Mermaid 渲染失败:', error)
+        element.innerHTML = `<pre class="mermaid-error">图表渲染失败\n${error.message}</pre>`
+      }
+    }
+  }
+
+  // 为图片和Mermaid图表添加放大功能
+  function addImageZoomHandlers() {
+    nextTick(() => {
+      // 为所有图片添加放大功能
+      const images = document.querySelectorAll('.markdown-content img')
+      images.forEach(img => {
+        img.classList.add('zoomable-image')
+        img.style.cursor = 'zoom-in'
+        img.title = '点击放大查看'
+      })
+    })
+  }
+
+  // 提取文档大纲
+  function extractTOC() {
+    tocItems.value = []
+    
+    nextTick(() => {
+      const headings = document.querySelectorAll('.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6')
+      
+      headings.forEach((heading, index) => {
+        const level = parseInt(heading.tagName.substring(1))
+        const text = heading.textContent.trim()
+        const id = heading.id || `heading-${index}`
+        
+        if (!heading.id) {
+          heading.id = id
+        }
+        
+        tocItems.value.push({
+          id,
+          text,
+          level
+        })
+      })
+    })
+  }
+
+  return {
+    htmlContent,
+    tocItems,
+    renderMarkdown,
+    addImageZoomHandlers
+  }
+}

package/src/composables/useResize.js

@@ -0,0 +1,50 @@
+import { ref } from 'vue'
+
+export function useResize() {
+  const sidebarWidth = ref(320)
+  const tocWidth = ref(240)
+  const isResizing = ref(false)
+  const resizeType = ref('')
+
+  // 开始拖拽
+  function startResize(type, e) {
+    isResizing.value = true
+    resizeType.value = type
+    document.body.style.cursor = 'col-resize'
+    document.body.style.userSelect = 'none'
+    
+    const handleMouseMove = (e) => {
+      if (!isResizing.value) return
+      
+      if (resizeType.value === 'left') {
+        const newWidth = e.clientX
+        if (newWidth >= 200 && newWidth <= 400) {
+          sidebarWidth.value = newWidth
+        }
+      } else if (resizeType.value === 'right') {
+        const newWidth = window.innerWidth - e.clientX
+        if (newWidth >= 200 && newWidth <= 400) {
+          tocWidth.value = newWidth
+        }
+      }
+    }
+    
+    const handleMouseUp = () => {
+      isResizing.value = false
+      resizeType.value = ''
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+    
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+  }
+
+  return {
+    sidebarWidth,
+    tocWidth,
+    startResize
+  }
+}