md2ui 1.0.3 → 1.0.8

package/bin/md2ui.js

@@ -1,61 +1,84 @@
 #!/usr/bin/env node
 
+// 子命令路由：build 命令走独立的 SSG 构建流程
+const subCommand = process.argv[2]
+if (subCommand === 'build') {
+  await import('./build.js')
+  process.exit(0)
+}
+
 import { createServer } from 'vite'
 import { fileURLToPath } from 'url'
 import { dirname, resolve } from 'path'
 import fs from 'fs'
+import { exec } from 'child_process'
+import { pathToFileURL } from 'url'
 
-// 获取 CLI 工具所在目录（即 md2ui 包的安装目录）
+// 获取 CLI 工具所在目录
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 const pkgRoot = resolve(__dirname, '..')
 
-// 导入共享配置
-const { config } = await import(resolve(pkgRoot, 'src/config.js'))
-
 // 用户执行命令的目录
 const userDir = process.cwd()
 
-// 解析命令行参数
-const args = process.argv.slice(2)
-let port = config.defaultPort
+// 默认配置
+const defaultConfig = {
+  title: 'md2ui',
+  port: 3000,
+  folderExpanded: false,
+  github: '',
+  footer: '',
+  themeColor: '#3eaf7c'
+}
 
-for (let i = 0; i < args.length; i++) {
-  if (args[i] === '-p' || args[i] === '--port') {
-    port = parseInt(args[i + 1]) || config.defaultPort
+// 加载用户配置文件（md2ui.config.js 或 .md2uirc.json）
+async function loadUserConfig() {
+  // 尝试 md2ui.config.js
+  const jsPath = resolve(userDir, 'md2ui.config.js')
+  if (fs.existsSync(jsPath)) {
+    try {
+      const mod = await import(pathToFileURL(jsPath).href)
+      console.log('  配置文件: md2ui.config.js\n')
+      return mod.default || mod
+    } catch (e) {
+      console.warn('  配置文件加载失败:', e.message, '\n')
+    }
   }
+  // 尝试 .md2uirc.json
+  const jsonPath = resolve(userDir, '.md2uirc.json')
+  if (fs.existsSync(jsonPath)) {
+    try {
+      const raw = fs.readFileSync(jsonPath, 'utf-8')
+      console.log('  配置文件: .md2uirc.json\n')
+      return JSON.parse(raw)
+    } catch (e) {
+      console.warn('  配置文件加载失败:', e.message, '\n')
+    }
+  }
+  return {}
 }
 
-// 虚拟模块插件：动态提供用户目录的文档列表
-function docsPlugin() {
-  const virtualModuleId = 'virtual:user-docs'
-  const resolvedVirtualModuleId = '\0' + virtualModuleId
-
-  return {
-    name: 'user-docs-plugin',
-    resolveId(id) {
-      if (id === virtualModuleId) {
-        return resolvedVirtualModuleId
-      }
-    },
-    load(id) {
-      if (id === resolvedVirtualModuleId) {
-        // 扫描用户目录下的 md 文件
-        const docs = scanDocs(userDir)
-        return `export default ${JSON.stringify(docs)}`
-      }
+// 解析命令行参数
+function parseArgs() {
+  const args = process.argv.slice(2)
+  const result = {}
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === '-p' || args[i] === '--port') {
+      result.port = parseInt(args[i + 1]) || undefined
+      i++
     }
   }
+  return result
 }
 
 // 扫描目录下的 md 文件
-function scanDocs(dir, basePath = '', level = 0) {
+function scanDocs(dir, basePath = '', level = 0, folderExpanded = false) {
   const items = []
-  
   if (!fs.existsSync(dir)) return items
-  
+
   const entries = fs.readdirSync(dir, { withFileTypes: true })
-    .filter(e => !e.name.startsWith('.') && e.name !== 'node_modules')
+    .filter(e => e.name !== 'node_modules')
     .sort((a, b) => a.name.localeCompare(b.name, 'zh-CN'))
 
   for (const entry of entries) {
@@ -63,8 +86,7 @@ function scanDocs(dir, basePath = '', level = 0) {
     const relativePath = basePath ? `${basePath}/${entry.name}` : entry.name
 
     if (entry.isDirectory()) {
-      const children = scanDocs(fullPath, relativePath, level + 1)
-      // 只有包含 md 文件的文件夹才加入目录
+      const children = scanDocs(fullPath, relativePath, level + 1, folderExpanded)
       if (children.length > 0) {
         const match = entry.name.match(/^(\d+)-(.+)$/)
         items.push({
@@ -73,7 +95,7 @@ function scanDocs(dir, basePath = '', level = 0) {
           order: match ? parseInt(match[1]) : 999,
           type: 'folder',
           level,
-          expanded: config.folderExpanded,
+          expanded: folderExpanded,
           children
         })
       }
@@ -91,25 +113,43 @@ function scanDocs(dir, basePath = '', level = 0) {
     }
   }
 
-  // 按 order 排序
   items.sort((a, b) => a.order - b.order)
   return items
 }
 
-// 提供用户目录 md 文件的中间件
-function serveUserDocs() {
+// 检查目录下是否有 md 文件
+function hasMdFiles(dir) {
+  if (!fs.existsSync(dir)) return false
+  const entries = fs.readdirSync(dir, { withFileTypes: true })
+    .filter(e => e.name !== 'node_modules')
+  for (const entry of entries) {
+    if (entry.isFile() && entry.name.endsWith('.md')) return true
+    if (entry.isDirectory() && hasMdFiles(resolve(dir, entry.name))) return true
+  }
+  return false
+}
+
+// Vite 插件：提供用户文档 API + 配置 API + 热更新
+function md2uiPlugin(siteConfig) {
   return {
-    name: 'serve-user-docs',
+    name: 'md2ui-server',
     configureServer(server) {
+      // API 中间件
       server.middlewares.use((req, res, next) => {
-        // 提供文档列表 API
+        // 文档列表 API
         if (req.url === '/@user-docs-list') {
-          const docs = scanDocs(userDir)
+          const docs = scanDocs(userDir, '', 0, siteConfig.folderExpanded)
           res.setHeader('Content-Type', 'application/json; charset=utf-8')
           res.end(JSON.stringify(docs))
           return
         }
-        // 提供文档内容
+        // 站点配置 API
+        if (req.url === '/@site-config') {
+          res.setHeader('Content-Type', 'application/json; charset=utf-8')
+          res.end(JSON.stringify(siteConfig))
+          return
+        }
+        // 文档内容
         if (req.url?.startsWith('/@user-docs/')) {
           const filePath = resolve(userDir, decodeURIComponent(req.url.replace('/@user-docs/', '')))
           if (fs.existsSync(filePath)) {
@@ -120,52 +160,61 @@ function serveUserDocs() {
         }
         next()
       })
-    }
-  }
-}
 
-// 检查目录下是否有 md 文件
-function hasMdFiles(dir) {
-  if (!fs.existsSync(dir)) return false
-  
-  const entries = fs.readdirSync(dir, { withFileTypes: true })
-    .filter(e => !e.name.startsWith('.') && e.name !== 'node_modules')
-  
-  for (const entry of entries) {
-    if (entry.isFile() && entry.name.endsWith('.md')) {
-      return true
-    }
-    if (entry.isDirectory()) {
-      if (hasMdFiles(resolve(dir, entry.name))) {
-        return true
+      // SPA fallback
+      return () => {
+        server.middlewares.use((req, res, next) => {
+          const url = req.url?.split('?')[0] || ''
+          if (url.startsWith('/@') || url.startsWith('/src/') || url.startsWith('/node_modules/') || url.match(/\.\w+$/)) {
+            next()
+            return
+          }
+          req.url = '/index.html'
+          next()
+        })
       }
     }
   }
-  return false
 }
 
 async function start() {
   console.log(`\n  md2ui - Markdown 文档预览工具\n`)
   console.log(`  扫描目录: ${userDir}\n`)
 
-  // 检查是否有 md 文件
   if (!hasMdFiles(userDir)) {
     console.log('  当前目录下没有找到 Markdown 文件 (.md)\n')
     console.log('  请在包含 .md 文件的目录中运行此命令\n')
     process.exit(1)
   }
 
+  // 加载配置
+  const userConfig = await loadUserConfig()
+  const cliArgs = parseArgs()
+  const siteConfig = { ...defaultConfig, ...userConfig, ...cliArgs }
+
   const server = await createServer({
     root: pkgRoot,
     configFile: resolve(pkgRoot, 'vite.config.js'),
-    plugins: [docsPlugin(), serveUserDocs()],
+    plugins: [md2uiPlugin(siteConfig)],
     server: {
-      port
+      port: siteConfig.port
     }
   })
 
   await server.listen()
   server.printUrls()
+
+  if (siteConfig.title !== defaultConfig.title) {
+    console.log(`  站点标题: ${siteConfig.title}`)
+  }
+  console.log('')
+
+  // 自动打开浏览器
+  const address = server.httpServer.address()
+  const url = `http://localhost:${address.port}`
+  const platform = process.platform
+  const cmd = platform === 'darwin' ? 'open' : platform === 'win32' ? 'start' : 'xdg-open'
+  exec(`${cmd} ${url}`)
 }
 
 start().catch(console.error)

package/index.html

@@ -6,9 +6,51 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg">
   <title>md2ui - Markdown 文档渲染系统</title>
   <meta name="description" content="将本地 Markdown 文档转换为美观的 HTML 页面">
+  <!-- 内联骨架屏样式，防止白屏闪烁 -->
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; background: #ffffff; }
+    .app-skeleton {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+    }
+    .skeleton-topbar {
+      height: 49px;
+      background: #f6f8fa;
+      border-bottom: 1px solid #d0d7de;
+      flex-shrink: 0;
+    }
+    .skeleton-body {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+    }
+    .skeleton-sidebar {
+      width: 260px;
+      background: #f6f8fa;
+      border-right: 1px solid #d0d7de;
+      flex-shrink: 0;
+    }
+    .skeleton-content {
+      flex: 1;
+    }
+    @media (max-width: 768px) {
+      .skeleton-sidebar { display: none; }
+    }
+  </style>
 </head>
 <body>
-  <div id="app"></div>
+  <div id="app">
+    <!-- 骨架屏：Vue 挂载后自动替换 -->
+    <div class="app-skeleton">
+      <div class="skeleton-topbar"></div>
+      <div class="skeleton-body">
+        <div class="skeleton-sidebar"></div>
+        <div class="skeleton-content"></div>
+      </div>
+    </div>
+  </div>
   <script type="module" src="/src/main.js"></script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "md2ui",
-  "version": "1.0.3",
+  "version": "1.0.8",
   "type": "module",
   "description": "将本地 Markdown 文档转换为美观的 HTML 页面",
   "author": "",
@@ -33,14 +33,15 @@
   ],
   "dependencies": {
     "@vitejs/plugin-vue": "^5.0.0",
-    "crypto-js": "^4.2.0",
+    "flexsearch": "^0.8.212",
+    "github-slugger": "^2.0.0",
+    "highlight.js": "^11.11.1",
+    "jsdom": "^28.1.0",
     "lucide-vue-next": "^0.556.0",
     "marked": "^11.1.1",
     "mermaid": "^10.6.1",
+    "minisearch": "^7.2.0",
     "vite": "^5.0.0",
     "vue": "^3.4.0"
-  },
-  "devDependencies": {
-    "@types/crypto-js": "^4.2.2"
   }
 }

package/src/App.vue

@@ -1,206 +1,142 @@
 <template>
-  <div class="container">
-    <aside v-if="!sidebarCollapsed" class="sidebar" :style="{ width: sidebarWidth + 'px' }">
-      <div class="logo">
-        <div class="logo-group">
-          <Logo @go-home="loadFirstDoc" />
-          <a href="https://github.com/devsneed/md2ui" target="_blank" class="github-link" title="GitHub">
-            <Github :size="14" />
-          </a>
-        </div>
-        <button class="sidebar-toggle" @click="sidebarCollapsed = true" title="收起导航">
-          <PanelLeftClose :size="16" />
-        </button>
-      </div>
-      <nav class="nav-menu">
-        <div class="nav-section">
-          <span>文档目录</span>
-          <div class="nav-actions">
-            <button class="action-btn" @click="expandAll" title="全部展开">
-              <ChevronsDownUp :size="14" />
-            </button>
-            <button class="action-btn" @click="collapseAll" title="全部收起">
-              <ChevronsUpDown :size="14" />
-            </button>
-          </div>
-        </div>
-        <TreeNode
-          v-for="item in docsList"
-          :key="item.key"
-          :item="item"
-          :currentDoc="currentDoc"
-          @toggle="toggleFolder"
-          @select="loadDoc"
-        />
-      </nav>
-    </aside>
-    <div v-if="!sidebarCollapsed" class="resizer resizer-left" @mousedown="startResize('left', $event)"></div>
-    <button v-if="sidebarCollapsed" class="expand-btn expand-btn-left" @click="sidebarCollapsed = false" title="展开导航">
-      <PanelLeftOpen :size="16" />
+  <div class="container" :class="{ 'is-mobile': isMobile }">
+    <!-- 移动端顶栏 -->
+    <MobileHeader
+      v-if="isMobile"
+      @open-drawer="mobileDrawerOpen = true"
+      @go-home="goHome"
+      @open-search="openSearch"
+    />
+    <!-- 桌面端顶栏 -->
+    <TopBar
+      v-if="!isMobile"
+      @select-search="handleSearchSelect"
+      @go-home="goHome"
+    />
+    <!-- 移动端遮罩 -->
+    <transition name="fade">
+      <div v-if="isMobile && mobileDrawerOpen" class="drawer-overlay" @click="mobileDrawerOpen = false"></div>
+    </transition>
+    <!-- 主体区域（侧边栏 + 内容 + TOC） -->
+    <div class="main-body">
+    <!-- 侧边栏 -->
+    <AppSidebar
+      v-if="!isMobile ? !sidebarCollapsed : true"
+      :docsList="docsList"
+      :currentDoc="currentDoc"
+      :isMobile="isMobile"
+      :drawerOpen="mobileDrawerOpen"
+      :width="sidebarWidth"
+      @go-home="goHome"
+      @close-drawer="mobileDrawerOpen = false"
+      @collapse="sidebarCollapsed = true"
+      @expand-all="onExpandAll"
+      @collapse-all="onCollapseAll"
+      @toggle-folder="toggleFolder"
+      @select-doc="handleDocSelect"
+    />
+    <!-- 左侧拖拽条 & 展开按钮（桌面端） -->
+    <div v-if="!isMobile && !sidebarCollapsed" class="resizer resizer-left" @mousedown="startResize('left', $event)"></div>
+    <button v-if="!isMobile && sidebarCollapsed" class="expand-btn expand-btn-left" @click="sidebarCollapsed = false" title="展开导航">
+      <ChevronRight :size="14" />
     </button>
-    <main class="content" @scroll="handleScroll" @click="handleContentClick">
-      <article class="markdown-content" v-html="htmlContent"></article>
-    </main>
-    <div v-if="!tocCollapsed && tocItems.length > 0" class="resizer resizer-right" @mousedown="startResize('right', $event)"></div>
-    <TableOfContents :tocItems="tocItems" :activeHeading="activeHeading" :collapsed="tocCollapsed" :width="tocWidth" @toggle="tocCollapsed = !tocCollapsed" @scroll-to="scrollToHeading" />
-    <button v-if="tocCollapsed && tocItems.length > 0" class="expand-btn expand-btn-right" @click="tocCollapsed = false" title="展开目录">
-      <PanelRightOpen :size="16" />
+    <!-- 内容区 -->
+    <DocContent
+      :showWelcome="showWelcome"
+      :htmlContent="htmlContent"
+      :prevDoc="prevDoc"
+      :nextDoc="nextDoc"
+      @scroll="handleScroll"
+      @content-click="onContentClick"
+      @start="loadFirstDoc"
+      @load-doc="loadDoc"
+    />
+    <!-- 桌面端 TOC -->
+    <div v-if="!isMobile && !tocCollapsed && tocItems.length > 0" class="resizer resizer-right" @mousedown="startResize('right', $event)"></div>
+    <TableOfContents v-if="!isMobile" :tocItems="tocItems" :activeHeading="activeHeading" :collapsed="tocCollapsed" :width="tocWidth" @toggle="tocCollapsed = !tocCollapsed" @scroll-to="scrollToHeading" />
+    <button v-if="!isMobile && tocCollapsed && tocItems.length > 0" class="expand-btn expand-btn-right" @click="tocCollapsed = false" title="展开目录">
+      <ChevronLeft :size="14" />
     </button>
+    </div>
+    <!-- 移动端 TOC -->
+    <MobileToc
+      v-if="isMobile"
+      :tocItems="tocItems"
+      :activeHeading="activeHeading"
+      :open="mobileTocOpen"
+      :showWelcome="showWelcome"
+      @toggle="mobileTocOpen = !mobileTocOpen"
+      @close="mobileTocOpen = false"
+      @scroll-to="(id) => { scrollToHeading(id); mobileTocOpen = false }"
+    />
+    <!-- 返回顶部 -->
     <transition name="fade">
       <button v-if="showBackToTop" class="back-to-top" @click="scrollToTop" title="返回顶部">
         <ArrowUp :size="20" />
         <span class="progress-text">{{ scrollProgress }}%</span>
       </button>
     </transition>
+    <!-- 图片放大 -->
     <ImageZoom :visible="zoomVisible" :imageContent="zoomContent" @close="zoomVisible = false" />
+
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { ChevronsDownUp, ChevronsUpDown, ArrowUp, PanelLeftOpen, PanelLeftClose, PanelRightOpen, Github } from 'lucide-vue-next'
-import Logo from './components/Logo.vue'
-import TreeNode from './components/TreeNode.vue'
+import { ArrowUp, ChevronRight, ChevronLeft } from 'lucide-vue-next'
+import MobileHeader from './components/MobileHeader.vue'
+import TopBar from './components/TopBar.vue'
+import AppSidebar from './components/AppSidebar.vue'
+import DocContent from './components/DocContent.vue'
 import TableOfContents from './components/TableOfContents.vue'
+import MobileToc from './components/MobileToc.vue'
 import ImageZoom from './components/ImageZoom.vue'
-import { getDocsList } from './api/docs.js'
-import { useMarkdown } from './composables/useMarkdown.js'
-import { useScroll } from './composables/useScroll.js'
+import { useDocManager } from './composables/useDocManager.js'
 import { useResize } from './composables/useResize.js'
 
-const docsList = ref([])
-const currentDoc = ref('')
+import { useSearch } from './composables/useSearch.js'
+import { useMobile } from './composables/useMobile.js'
+
+
+// UI 状态
 const sidebarCollapsed = ref(false)
 const tocCollapsed = ref(false)
 const zoomVisible = ref(false)
 const zoomContent = ref('')
 
-const { htmlContent, tocItems, renderMarkdown } = useMarkdown()
-const { scrollProgress, showBackToTop, activeHeading, handleScroll, scrollToHeading, scrollToTop } = useScroll()
-const { sidebarWidth, tocWidth, startResize } = useResize()
-
-async function loadDocsList() {
-  docsList.value = await getDocsList()
-}
-
-// 加载第一个文档
-function loadFirstDoc() {
-  const firstDoc = findFirstDoc(docsList.value)
-  if (firstDoc) {
-    loadDoc(firstDoc.key)
-  }
-}
-
-async function loadDoc(key) {
-  currentDoc.value = key
-  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)
-      const contentEl = document.querySelector('.content')
-      if (contentEl) contentEl.scrollTop = 0
-    }
-  } catch (error) {
-    console.error('加载文档失败:', error)
-  }
-}
-
-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
-}
+// composables
+const {
+  docsList, currentDoc, showWelcome, htmlContent, tocItems,
+  scrollProgress, showBackToTop, activeHeading,
+  handleScroll, scrollToHeading, scrollToTop,
+  loadDocsList, loadFromUrl, goHome, loadDoc, loadFirstDoc,
+  handleDocSelect, handleContentClick, handleSearchSelect,
+  toggleFolder, onExpandAll, onCollapseAll,
+  prevDoc, nextDoc
+} = useDocManager()
 
-function toggleFolder(item) {
-  item.expanded = !item.expanded
-}
+const { sidebarWidth, tocWidth, startResize } = useResize()
 
-function expandAll() {
-  function expand(items) {
-    items.forEach(item => {
-      if (item.type === 'folder') {
-        item.expanded = true
-        if (item.children) expand(item.children)
-      }
-    })
-  }
-  expand(docsList.value)
-}
+const { openSearch } = useSearch()
+const { isMobile, mobileDrawerOpen, mobileTocOpen } = useMobile()
 
-function collapseAll() {
-  function collapse(items) {
-    items.forEach(item => {
-      if (item.type === 'folder') {
-        item.expanded = false
-        if (item.children) collapse(item.children)
-      }
-    })
-  }
-  collapse(docsList.value)
-}
 
-function handleContentClick(event) {
-  const target = event.target
-  if (target.tagName === 'IMG' && target.classList.contains('zoomable-image')) {
-    zoomContent.value = `<img src="${target.src}" alt="${target.alt || ''}" style="max-width: 100%; height: auto;" />`
-    zoomVisible.value = true
-    return
-  }
-  const mermaidEl = target.closest('.mermaid')
-  if (mermaidEl && mermaidEl.classList.contains('zoomable-image')) {
-    zoomContent.value = mermaidEl.innerHTML
-    zoomVisible.value = true
-  }
-}
-
-// 查找第一个文档
-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
+// 内容区点击：委托给 docManager，图片放大回调在这里处理
+function onContentClick(event) {
+  handleContentClick(event, {
+    onZoom(content) {
+      zoomContent.value = content
+      zoomVisible.value = true
     }
-  }
-  return null
+  })
 }
 
-// 显示无文档提示
-function showEmptyMessage() {
-  renderMarkdown(`# 当前目录没有 Markdown 文档
-
-请在当前目录下添加 \`.md\` 文件，然后刷新页面。
-
-## 文档组织示例
-
-\`\`\`
-your-docs/
-├── 00-快速开始.md
-├── 01-功能特性.md
-└── 02-进阶指南/
-    ├── 01-目录结构.md
-    └── 02-自定义配置.md
-\`\`\`
-`)
-}
+// 全局快捷键
+window.addEventListener('popstate', () => loadFromUrl())
 
 onMounted(async () => {
   await loadDocsList()
-  
-  // 如果有文档，加载第一个；否则显示提示
-  const firstDoc = findFirstDoc(docsList.value)
-  if (firstDoc) {
-    await loadDoc(firstDoc.key)
-  } else {
-    showEmptyMessage()
-  }
+  await loadFromUrl()
 })
 </script>

package/src/api/docs.js

@@ -64,7 +64,8 @@ export async function getDocsList() {
 
   // 开发模式：扫描 public/docs 目录
   try {
-    const modules = import.meta.glob('/public/docs/**/*.md')
+    // 排除隐藏目录和隐藏文件（以 . 开头的路径段）
+    const modules = import.meta.glob('/public/docs/**/*.md', { eager: false })
     const files = []
     
     for (const path in modules) {