md2ui 1.0.3 → 1.0.8

package/src/components/WelcomePage.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="welcome-page">
+    <div class="welcome-hero">
+      <!-- 图标 + 标题同行 -->
+      <div class="welcome-brand">
+        <div class="welcome-logo">
+          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="6" y="4" width="20" height="24" rx="2" stroke="currentColor" stroke-width="2" fill="none"/>
+            <line x1="10" y1="10" x2="22" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            <line x1="10" y1="16" x2="22" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            <line x1="10" y1="22" x2="17" y2="22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <h1 class="welcome-title">md2ui</h1>
+      </div>
+      <p class="welcome-desc">将 Markdown 文档转换为美观易读的网页</p>
+      <!-- 操作区 -->
+      <div class="welcome-actions">
+        <button class="welcome-btn primary" @click="$emit('start')">
+          <BookOpen :size="16" />
+          <span>开始阅读</span>
+          <ArrowRight :size="14" class="btn-arrow" />
+        </button>
+      </div>
+      <!-- GitHub -->
+      <a class="welcome-github" href="https://github.com/devsneed/md2ui" target="_blank">
+        <GitHubIcon :size="16" />
+        <span>GitHub</span>
+        <span class="welcome-github-sep"></span>
+        <span class="welcome-github-repo">devsneed/md2ui</span>
+        <ExternalLink :size="12" class="welcome-github-arrow" />
+      </a>
+    </div>
+    <!-- 特性卡片 -->
+    <div class="welcome-features">
+      <div class="feature-card" v-for="f in features" :key="f.title">
+        <div class="feature-icon-wrap">
+          <component :is="f.icon" :size="20" />
+        </div>
+        <h3>{{ f.title }}</h3>
+        <p>{{ f.desc }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { BookOpen, Github as GitHubIcon, ArrowRight, ExternalLink, FileText, Palette, Zap } from 'lucide-vue-next'
+
+defineEmits(['start'])
+
+const features = [
+  { icon: FileText, title: 'Markdown 驱动', desc: '直接读取 .md 文件，零配置即可使用' },
+  { icon: Palette, title: '简洁优雅', desc: '清晰的排版与舒适的阅读体验' },
+  { icon: Zap, title: '开箱即用', desc: '一行命令启动，支持目录结构与 Mermaid 图表' }
+]
+</script>
+
+<style scoped>
+.welcome-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  padding: 48px 24px;
+  user-select: none;
+}
+
+.welcome-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 40px;
+}
+
+.welcome-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.welcome-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  background: var(--color-accent-bg);
+  color: var(--color-accent);
+  border-radius: 10px;
+}
+
+.welcome-title {
+  font-size: 32px;
+  font-weight: 600;
+  color: var(--color-text);
+  letter-spacing: -0.03em;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.welcome-desc {
+  font-size: 15px;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.welcome-actions {
+  margin-top: 4px;
+}
+
+.welcome-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 24px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  text-decoration: none;
+  border: none;
+  font-family: inherit;
+}
+
+.welcome-btn.primary {
+  background: var(--color-accent);
+  color: #fff;
+}
+
+.welcome-btn.primary:hover {
+  background: var(--color-accent-hover);
+}
+
+.btn-arrow {
+  opacity: 0.7;
+  transition: all 0.15s;
+}
+
+.welcome-btn.primary:hover .btn-arrow {
+  opacity: 1;
+  transform: translateX(2px);
+}
+
+.welcome-github {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text);
+  text-decoration: none;
+  transition: all 0.15s;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
+}
+
+.welcome-github:hover {
+  background: var(--color-bg-tertiary);
+}
+
+.welcome-github-sep {
+  width: 1px;
+  height: 12px;
+  background: var(--color-border);
+}
+
+.welcome-github-repo {
+  color: var(--color-text-secondary);
+  font-weight: 400;
+  font-size: 12px;
+}
+
+.welcome-github-arrow {
+  color: var(--color-text-tertiary);
+}
+
+.welcome-features {
+  display: flex;
+  gap: 16px;
+  max-width: 640px;
+  width: 100%;
+}
+
+.feature-card {
+  flex: 1;
+  text-align: center;
+  padding: 20px 14px 16px;
+  border-radius: 6px;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  transition: all 0.15s;
+}
+
+.feature-card:hover {
+  border-color: var(--color-text-tertiary);
+}
+
+.feature-icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: var(--color-accent-bg);
+  color: var(--color-accent);
+  border-radius: 8px;
+  margin-bottom: 10px;
+}
+
+.feature-card h3 {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-bottom: 4px;
+}
+
+.feature-card p {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  margin: 0;
+}
+
+@media (max-width: 640px) {
+  .welcome-page {
+    padding: 32px 16px;
+  }
+  .welcome-features {
+    flex-direction: column;
+    gap: 8px;
+  }
+  .welcome-title {
+    font-size: 24px;
+  }
+  .welcome-logo {
+    width: 36px;
+    height: 36px;
+  }
+  .welcome-logo svg {
+    width: 22px;
+    height: 22px;
+  }
+}
+</style>

package/src/composables/useDocHash.js

@@ -0,0 +1,66 @@
+// 文档 hash 生成 & 链接解析工具
+
+// base62 字符集
+const BASE62 = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
+
+// 同步 hash：FNV-1a 变体，双轮 hash 拼接得到 64 bit，再转 base62 取 8 位
+// 碰撞空间 62^8 ≈ 218 万亿，对文档站绰绰有余
+function fnv1a64(str) {
+  // 第一轮 FNV-1a（seed = 标准 FNV offset basis）
+  let h1 = 0x811c9dc5 >>> 0
+  for (let i = 0; i < str.length; i++) {
+    h1 ^= str.charCodeAt(i)
+    h1 = Math.imul(h1, 0x01000193) >>> 0
+  }
+  // 第二轮 FNV-1a（不同 seed，避免对称碰撞）
+  let h2 = 0x050c5d1f >>> 0
+  for (let i = 0; i < str.length; i++) {
+    h2 ^= str.charCodeAt(i)
+    h2 = Math.imul(h2, 0x01000193) >>> 0
+  }
+  return [h1, h2]
+}
+
+// 将两个 32 位整数转为 base62 字符串，取前 8 位
+function toBase62(h1, h2) {
+  const num = (BigInt(h1) << 32n) | BigInt(h2)
+  let n = num
+  let result = ''
+  while (n > 0n && result.length < 12) {
+    result = BASE62[Number(n % 62n)] + result
+    n = n / 62n
+  }
+  return result.padStart(8, '0').slice(0, 8)
+}
+
+// 根据文档 key 生成 8 位 base62 短 hash（同步、确定性、零依赖）
+export function docHash(key) {
+  const [h1, h2] = fnv1a64(key)
+  return toBase62(h1, h2)
+}
+
+// 解析相对路径，基于当前文档 key 计算目标 key
+export function resolveDocKey(href, currentDocKey) {
+  const currentParts = currentDocKey.split('/')
+  currentParts.pop() // 去掉当前文件名
+  const linkParts = href.replace(/\.md$/, '').split('/')
+  const resolved = [...currentParts]
+  for (const part of linkParts) {
+    if (part === '.' || part === '') continue
+    if (part === '..') { resolved.pop(); continue }
+    resolved.push(part)
+  }
+  return resolved.join('/')
+}
+
+// 在文档树中查找文档
+export function findDocInTree(items, key) {
+  for (const item of items) {
+    if (item.type === 'file' && item.key === key) return item
+    if (item.type === 'folder' && item.children) {
+      const found = findDocInTree(item.children, key)
+      if (found) return found
+    }
+  }
+  return null
+}

package/src/composables/useDocManager.js

@@ -0,0 +1,239 @@
+import { ref, computed, nextTick } from 'vue'
+import { getDocsList } from '../api/docs.js'
+import { useMarkdown } from './useMarkdown.js'
+import { useSearch } from './useSearch.js'
+import { useScroll } from './useScroll.js'
+import { useMobile } from './useMobile.js'
+import { findDoc, findFirstDoc, findDocByHash, expandParents, flattenDocsList, expandAll, collapseAll } from './useDocTree.js'
+
+// 等待内容区域图片加载完成
+async function waitForContentImages(timeoutMs = 3000) {
+  const images = document.querySelectorAll('.markdown-content img')
+  const pending = [...images].filter(img => !img.complete)
+  if (!pending.length) return
+  await Promise.race([
+    Promise.all(pending.map(img => new Promise(r => { img.onload = img.onerror = r }))),
+    new Promise(r => setTimeout(r, timeoutMs))
+  ])
+}
+
+export function useDocManager() {
+  // 文档状态
+  const docsList = ref([])
+  const currentDoc = ref('')
+  // 如果 URL 有路径，说明是刷新已有文档页面，初始不显示欢迎页，避免闪烁
+  const hasInitialPath = window.location.pathname.replace(/^\//, '') !== ''
+  const showWelcome = ref(!hasInitialPath)
+
+  // composables
+  const { htmlContent, tocItems, renderMarkdown, docHash } = useMarkdown()
+  const { buildIndex } = useSearch()
+  const {
+    scrollProgress, showBackToTop, activeHeading,
+    handleScroll: _handleScroll,
+    scrollToHeading: _scrollToHeading,
+    scrollToTop
+  } = useScroll()
+  const { isMobile, mobileDrawerOpen } = useMobile()
+
+  // 滚动处理，同步锚点到 URL
+  function handleScroll(e) {
+    _handleScroll(e)
+    if (activeHeading.value && currentDoc.value) {
+      history.replaceState(null, '', `/${docHash(currentDoc.value)}#${activeHeading.value}`)
+    }
+  }
+
+  // push: true 表示用户主动点击锚点，产生可回退的历史条目
+  function scrollToHeading(id, { push = false } = {}) {
+    _scrollToHeading(id)
+    if (currentDoc.value) {
+      const url = `/${docHash(currentDoc.value)}#${id}`
+      if (push) {
+        history.pushState(null, '', url)
+      } else {
+        history.replaceState(null, '', url)
+      }
+    }
+  }
+
+  // 加载文档列表
+  async function loadDocsList() {
+    docsList.value = await getDocsList()
+    buildIndex(docsList.value)
+  }
+
+  // 回到欢迎页
+  function goHome() {
+    currentDoc.value = ''
+    showWelcome.value = true
+    htmlContent.value = ''
+    tocItems.value = []
+    history.pushState(null, '', '/')
+    if (isMobile.value) mobileDrawerOpen.value = false
+  }
+
+  // 加载文档
+  async function loadDoc(key, { replace = false, anchor = '' } = {}) {
+    currentDoc.value = key
+    showWelcome.value = false
+    const hash = docHash(key)
+    const url = anchor ? `/${hash}#${anchor}` : `/${hash}`
+    if (replace) {
+      history.replaceState(null, '', url)
+    } else {
+      history.pushState(null, '', url)
+    }
+    const doc = findDoc(docsList.value, key)
+    if (!doc) return
+    try {
+      const response = await fetch(doc.path)
+      if (response.ok) {
+        const content = await response.text()
+        await renderMarkdown(content, key, docsList.value)
+        const contentEl = document.querySelector('.content')
+        if (contentEl) contentEl.scrollTop = 0
+      }
+    } catch (error) {
+      console.error('加载文档失败:', error)
+    }
+  }
+
+  // 加载第一篇文档
+  function loadFirstDoc() {
+    const first = findFirstDoc(docsList.value)
+    if (first) loadDoc(first.key)
+  }
+
+  // 选择文档（移动端自动关闭抽屉）
+  function handleDocSelect(key) {
+    loadDoc(key)
+    if (isMobile.value) mobileDrawerOpen.value = false
+  }
+
+  // 文件夹操作
+  function toggleFolder(item) { item.expanded = !item.expanded }
+  function onExpandAll() { expandAll(docsList.value) }
+  function onCollapseAll() { collapseAll(docsList.value) }
+
+  // 内容区点击处理（链接跳转 + 图片放大）
+  function handleContentClick(event, { onZoom }) {
+    const target = event.target
+    const link = target.closest('a')
+    if (link) {
+      const docKey = link.dataset.docKey
+      if (docKey) {
+        event.preventDefault()
+        const anchor = link.dataset.anchor || ''
+        expandParents(docsList.value, docKey)
+        loadDoc(docKey).then(async () => {
+          if (anchor) { await nextTick(); await waitForContentImages(); scrollToHeading(anchor) }
+        })
+        return
+      }
+      if (link.dataset.anchor && !docKey) {
+        event.preventDefault()
+        scrollToHeading(link.dataset.anchor, { push: true })
+        return
+      }
+      return
+    }
+    // 图片放大
+    if (target.tagName === 'IMG' && target.classList.contains('zoomable-image')) {
+      onZoom(`<img src="${target.src}" alt="${target.alt || ''}" style="max-width: 100%; height: auto;" />`)
+      return
+    }
+    // Mermaid 图表放大
+    const mermaidEl = target.closest('.mermaid')
+    if (mermaidEl && mermaidEl.classList.contains('zoomable-image')) {
+      onZoom(mermaidEl.innerHTML)
+    }
+  }
+
+  // 上一篇/下一篇
+  const prevDoc = computed(() => {
+    if (!currentDoc.value) return null
+    const flat = flattenDocsList(docsList.value)
+    const idx = flat.findIndex(d => d.key === currentDoc.value)
+    return idx > 0 ? flat[idx - 1] : null
+  })
+
+  const nextDoc = computed(() => {
+    if (!currentDoc.value) return null
+    const flat = flattenDocsList(docsList.value)
+    const idx = flat.findIndex(d => d.key === currentDoc.value)
+    return idx >= 0 && idx < flat.length - 1 ? flat[idx + 1] : null
+  })
+
+  // 搜索结果选中
+  function handleSearchSelect(key) {
+    expandParents(docsList.value, key)
+    loadDoc(key)
+  }
+
+  // URL 路由（popstate / 初始加载）
+  async function loadFromUrl() {
+    const pathname = window.location.pathname.replace(/^\//, '')
+    const anchor = window.location.hash.replace('#', '')
+    if (!pathname) {
+      if (currentDoc.value) {
+        // 从文档页回退到首页
+        goHome()
+      } else if (docsList.value.length === 0) {
+        showWelcome.value = false
+        renderMarkdown('# 当前目录没有 Markdown 文档\n\n请在当前目录下添加 `.md` 文件，然后刷新页面。')
+      }
+      return
+    }
+    const doc = findDocByHash(docsList.value, pathname, docHash)
+    if (!doc) return
+    // 同一文档内的锚点变化，只需滚动，无需重新加载
+    if (doc.key === currentDoc.value) {
+      if (anchor) {
+        await nextTick()
+        _scrollToHeading(decodeURIComponent(anchor))
+      } else {
+        const contentEl = document.querySelector('.content')
+        if (contentEl) contentEl.scrollTo({ top: 0, behavior: 'smooth' })
+      }
+      return
+    }
+    expandParents(docsList.value, doc.key)
+    await loadDoc(doc.key, { replace: true, anchor: anchor ? decodeURIComponent(anchor) : '' })
+    if (anchor) { await nextTick(); await waitForContentImages(); _scrollToHeading(decodeURIComponent(anchor)) }
+  }
+
+  return {
+    // 状态
+    docsList,
+    currentDoc,
+    showWelcome,
+    htmlContent,
+    tocItems,
+    // 滚动
+    scrollProgress,
+    showBackToTop,
+    activeHeading,
+    handleScroll,
+    scrollToHeading,
+    scrollToTop,
+    // 文档操作
+    loadDocsList,
+    loadFromUrl,
+    goHome,
+    loadDoc,
+    loadFirstDoc,
+    handleDocSelect,
+    handleContentClick,
+    handleSearchSelect,
+    // 文件夹操作
+    toggleFolder,
+    onExpandAll,
+    onCollapseAll,
+    // 导航
+    prevDoc,
+    nextDoc,
+    // 工具
+    docHash
+  }
+}

package/src/composables/useDocTree.js

@@ -0,0 +1,80 @@
+// 文档树操作：查找、展开、扁平化等纯逻辑
+
+// 在文档树中查找文档
+export function findDoc(items, key) {
+  for (const item of items) {
+    if (item.type === 'file' && item.key === key) return item
+    if (item.type === 'folder' && item.children) {
+      const found = findDoc(item.children, key)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// 查找第一个文档
+export function findFirstDoc(items) {
+  for (const item of items) {
+    if (item.type === 'file') return item
+    if (item.type === 'folder' && item.children) {
+      const found = findFirstDoc(item.children)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// 根据 hash 查找文档
+export function findDocByHash(items, hash, docHash) {
+  for (const item of items) {
+    if (item.type === 'file' && docHash(item.key) === hash) return item
+    if (item.type === 'folder' && item.children) {
+      const found = findDocByHash(item.children, hash, docHash)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// 展开文档所在的所有父级文件夹
+export function expandParents(items, targetKey) {
+  for (const item of items) {
+    if (item.type === 'file' && item.key === targetKey) return true
+    if (item.type === 'folder' && item.children) {
+      if (expandParents(item.children, targetKey)) {
+        item.expanded = true
+        return true
+      }
+    }
+  }
+  return false
+}
+
+// 扁平化文档树，按顺序提取所有文件节点
+export function flattenDocsList(items, result = []) {
+  for (const item of items) {
+    if (item.type === 'file') result.push(item)
+    if (item.type === 'folder' && item.children) flattenDocsList(item.children, result)
+  }
+  return result
+}
+
+// 全部展开
+export function expandAll(items) {
+  items.forEach(item => {
+    if (item.type === 'folder') {
+      item.expanded = true
+      if (item.children) expandAll(item.children)
+    }
+  })
+}
+
+// 全部收起
+export function collapseAll(items) {
+  items.forEach(item => {
+    if (item.type === 'folder') {
+      item.expanded = false
+      if (item.children) collapseAll(item.children)
+    }
+  })
+}

package/src/composables/useFrontmatter.js

@@ -0,0 +1,41 @@
+// Frontmatter 解析 & 阅读时间计算
+
+// 解析 YAML frontmatter（轻量实现，不依赖 Node.js）
+// 支持 title / description / order / hidden 字段
+export function parseFrontmatter(markdown) {
+  const match = markdown.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/)
+  if (!match) return { data: {}, content: markdown }
+  const yamlStr = match[1]
+  const data = {}
+  for (const line of yamlStr.split('\n')) {
+    const m = line.match(/^(\w+)\s*:\s*(.+)$/)
+    if (!m) continue
+    let val = m[2].trim()
+    // 布尔值
+    if (val === 'true') val = true
+    else if (val === 'false') val = false
+    // 数字
+    else if (/^\d+$/.test(val)) val = parseInt(val)
+    // 去掉引号
+    else val = val.replace(/^['"]|['"]$/g, '')
+    data[m[1]] = val
+  }
+  return { data, content: markdown.slice(match[0].length) }
+}
+
+// 计算阅读时间（中文 400 字/分钟，英文 200 词/分钟）
+export function calcReadingTime(markdown) {
+  // 去掉 frontmatter、代码块、HTML 标签
+  const clean = markdown
+    .replace(/^---[\s\S]*?---\n?/, '')
+    .replace(/```[\s\S]*?```/g, '')
+    .replace(/<[^>]+>/g, '')
+    .replace(/[#*_~`>\-|[\]()!]/g, '')
+  // 中文字符数
+  const cnChars = (clean.match(/[\u4e00-\u9fff]/g) || []).length
+  // 英文单词数
+  const enWords = clean.replace(/[\u4e00-\u9fff]/g, '').split(/\s+/).filter(w => w.length > 0).length
+  const totalChars = cnChars + enWords
+  const minutes = Math.ceil(cnChars / 400 + enWords / 200)
+  return { totalChars, minutes: Math.max(1, minutes) }
+}