md2ui 1.0.7 → 1.0.9

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.7",
+  "version": "1.0.9",
   "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"
   }
 }