md2ui 1.0.16 → 1.0.19

package/README.md

@@ -1,7 +1,7 @@
 # md2ui
 
 [![npm version](https://img.shields.io/npm/v/md2ui)](https://www.npmjs.com/package/md2ui)
-[![GitHub](https://img.shields.io/badge/GitHub-devsneed%2Fmd2ui-blue?logo=github)](https://github.com/devsneed/md2ui)
+[![GitHub](https://img.shields.io/badge/GitHub-xiaoyaodev%2Fmd2ui-blue?logo=github)](https://github.com/xiaoyaodev/md2ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
 
 一个轻量级的 Markdown 文档渲染工具，将本地 `.md` 文件转换为美观的 HTML 页面。支持实时预览和静态站点生成（SSG）两种模式。
@@ -12,62 +12,11 @@
 - 三栏布局 - 左侧导航 / 中间内容 / 右侧大纲，可拖拽调整宽度
 - Markdown 增强 - GFM 语法、代码高亮、Mermaid 图表、Frontmatter
 - 全文搜索 - 基于 MiniSearch 的快速全文检索
-- 暗色模式 - 一键切换亮色/暗色主题
 - 移动端适配 - 响应式布局，抽屉式导航和目录
 - 阅读体验 - 阅读进度条、预计阅读时间、上下篇导航
 - SSG 构建 - `md2ui build` 生成纯静态 HTML，可直接部署
 - 自定义配置 - 站点标题、主题色、GitHub 链接、页脚等
 
-## 效果预览
-
-### 全文搜索
-
-![全文搜索](screenshots/task1-search.png)
-
-### 代码高亮
-
-![代码高亮 - 语言标签与复制按钮](screenshots/task2-code-highlight-top.png)
-
-![代码高亮 - 渲染效果](screenshots/task2-code-highlight-view.png)
-
-### 暗色模式
-
-![暗色模式 - 欢迎页](screenshots/task3-dark-mode-welcome.png)
-
-![暗色模式 - 文档内容](screenshots/task3-dark-mode-content.png)
-
-### 移动端适配
-
-<p>
-  <img src="screenshots/task4-mobile-welcome.png" width="32%" alt="移动端 - 欢迎页" />
-  <img src="screenshots/task4-mobile-drawer.png" width="32%" alt="移动端 - 抽屉导航" />
-  <img src="screenshots/task4-mobile-toc.png" width="32%" alt="移动端 - 目录大纲" />
-</p>
-
-![移动端 - 文档内容](screenshots/task4-mobile-content.png)
-
-### 上下篇导航
-
-![上下篇导航](screenshots/task5-prev-next-nav.png)
-
-### 阅读时间
-
-![阅读时间](screenshots/task7-reading-time.png)
-
-### Frontmatter 支持
-
-![Frontmatter](screenshots/task8-frontmatter.png)
-
-### 导航过滤
-
-![导航过滤](screenshots/task9-nav-filter.png)
-
-### SSG 静态构建
-
-![SSG - 首页](screenshots/ssg-index.png)
-
-![SSG - 目录展开](screenshots/ssg-folder-open.png)
-
 ## 安装使用
 
 ### 全局安装
@@ -130,7 +79,7 @@ export default {
   port: 8080,
   folderExpanded: true,
   themeColor: '#3eaf7c',
-  github: 'https://github.com/your/repo',
+  github: 'https://github.com/xiaoyaodev/md2ui',
   footer: 'Copyright © 2025'
 }
 ```
@@ -147,7 +96,7 @@ export default {
 ## 开发
 
 ```bash
-git clone https://github.com/devsneed/md2ui.git
+git clone https://github.com/xiaoyaodev/md2ui.git
 cd md2ui
 pnpm install
 pnpm dev
@@ -162,7 +111,6 @@ md2ui/
 │   └── build.js           # SSG 静态构建
 ├── src/
 │   ├── App.vue            # 主组件
-│   ├── api/docs.js        # 文档列表获取
 │   ├── components/        # Vue 组件
 │   ├── composables/       # 组合式函数
 │   ├── config.js          # 共享配置

package/bin/build.js

@@ -18,6 +18,13 @@ import { marked } from 'marked'
 import hljs from 'highlight.js'
 import GithubSlugger from 'github-slugger'
 
+let katex
+try {
+  katex = (await import('katex')).default
+} catch {
+  katex = null
+}
+
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 const pkgRoot = resolve(__dirname, '..')
@@ -189,10 +196,10 @@ async function renderMarkdownToHtml(markdown, currentDocKey, docsList) {
   const slugger = new GithubSlugger()
   const renderer = new marked.Renderer()
 
-  // 标题渲染
+  // 标题渲染（SSG 版本也加上 # 锚点链接）
   renderer.heading = function(text, level) {
     const id = slugger.slug(text)
-    return `<h${level} id="${id}">${text}</h${level}>\n`
+    return `<h${level} id="${id}"><a class="heading-anchor" href="#${id}" aria-hidden="true">#</a>${text}</h${level}>\n`
   }
 
   // 代码块渲染
@@ -253,6 +260,46 @@ async function renderMarkdownToHtml(markdown, currentDocKey, docsList) {
   }
 
   marked.setOptions({ renderer, breaks: true, gfm: true, headerIds: false, mangle: false })
+
+  // 注册 KaTeX 数学公式扩展
+  if (katex) {
+    marked.use({
+      extensions: [
+        {
+          name: 'mathBlock',
+          level: 'block',
+          start(src) {
+            const m = src.match(/(?:^|\n)\$\$/)
+            return m ? m.index + (m[0].startsWith('\n') ? 1 : 0) : -1
+          },
+          tokenizer(src) {
+            const match = src.match(/^\$\$\s*\n([\s\S]+?)\n\s*\$\$(?:\s*$|\n)/)
+            if (match) return { type: 'mathBlock', raw: match[0], text: match[1].trim() }
+          },
+          renderer(token) {
+            try {
+              return `<div class="math-block">${katex.renderToString(token.text, { throwOnError: false, displayMode: true })}</div>`
+            } catch { return `<pre class="math-error">${token.text}</pre>` }
+          }
+        },
+        {
+          name: 'mathInline',
+          level: 'inline',
+          start(src) { return src.indexOf('$') },
+          tokenizer(src) {
+            const match = src.match(/^\$(?!\$)((?:\\.|[^$\\])+)\$/)
+            if (match) return { type: 'mathInline', raw: match[0], text: match[1].trim() }
+          },
+          renderer(token) {
+            try {
+              return katex.renderToString(token.text, { throwOnError: false, displayMode: false })
+            } catch { return `<code class="math-error">${token.text}</code>` }
+          }
+        }
+      ]
+    })
+  }
+
   let html = marked.parse(content)
 
   // frontmatter.title 覆盖 h1
@@ -370,8 +417,10 @@ function renderDocNav(flatDocs, currentIdx) {
 
 // 生成完整的静态 HTML 页面
 function generatePageHtml(options) {
-  const { title, siteTitle, contentHtml, sidebarHtml, docNavHtml, cssContent, themeColor, isWelcome } = options
+  const { title, siteTitle, contentHtml, sidebarHtml, docNavHtml, cssContent, themeColor, isWelcome, description, url } = options
   const pageTitle = isWelcome ? siteTitle : `${title} - ${siteTitle}`
+  const metaDesc = description || title || siteTitle
+  const canonicalUrl = url || '/'
 
   return `<!DOCTYPE html>
 <html lang="zh-CN">
@@ -379,8 +428,19 @@ function generatePageHtml(options) {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${pageTitle}</title>
-  <meta name="description" content="${title}">
+  <meta name="description" content="${metaDesc}">
   <meta name="theme-color" content="${themeColor}">
+  <!-- Open Graph -->
+  <meta property="og:title" content="${pageTitle}">
+  <meta property="og:description" content="${metaDesc}">
+  <meta property="og:type" content="article">
+  <meta property="og:url" content="${canonicalUrl}">
+  <meta property="og:site_name" content="${siteTitle}">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:title" content="${pageTitle}">
+  <meta name="twitter:description" content="${metaDesc}">
+  <link rel="canonical" href="${canonicalUrl}">
   <link rel="icon" type="image/svg+xml" href="/logo.svg">
   <style>${cssContent}</style>
 </head>
@@ -464,6 +524,13 @@ document.head.appendChild(s)})();
 // 生成 SSG 专用 CSS（从 style.css 读取 + 补充 SSG 特有样式）
 function getSsgCss(pkgRoot) {
   let css = fs.readFileSync(resolve(pkgRoot, 'src/style.css'), 'utf-8')
+  // 尝试加载 KaTeX CSS
+  try {
+    const katexCssPath = resolve(pkgRoot, 'node_modules/katex/dist/katex.min.css')
+    if (fs.existsSync(katexCssPath)) {
+      css += '\n' + fs.readFileSync(katexCssPath, 'utf-8')
+    }
+  } catch { /* KaTeX CSS 不可用时忽略 */ }
   // 追加 SSG 特有样式
   css += `
 /* SSG 特有样式 */
@@ -546,20 +613,28 @@ async function build() {
   for (let i = 0; i < flatDocs.length; i++) {
     const doc = flatDocs[i]
     const markdown = fs.readFileSync(doc.path, 'utf-8')
-    const { html: contentHtml, title } = await renderMarkdownToHtml(markdown, doc.key, docsList)
+    const { html: contentHtml, title, frontmatter } = await renderMarkdownToHtml(markdown, doc.key, docsList)
     const sidebarHtml = renderSidebarHtml(docsList, doc.key)
     const docNavHtml = renderDocNav(flatDocs, i)
     const hash = docHash(doc.key)
 
+    // 获取文件最后修改时间
+    const stat = fs.statSync(doc.path)
+    const mtime = stat.mtime
+    const lastModifiedStr = `${mtime.getFullYear()}-${String(mtime.getMonth() + 1).padStart(2, '0')}-${String(mtime.getDate()).padStart(2, '0')} ${String(mtime.getHours()).padStart(2, '0')}:${String(mtime.getMinutes()).padStart(2, '0')}`
+    const lastModifiedHtml = `<div class="doc-last-modified"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg><span>最后更新于 ${lastModifiedStr}</span></div>`
+
     const pageHtml = generatePageHtml({
       title: title || doc.label,
       siteTitle: siteConfig.title,
       contentHtml,
       sidebarHtml,
-      docNavHtml,
+      docNavHtml: lastModifiedHtml + docNavHtml,
       cssContent,
       themeColor: siteConfig.themeColor,
-      isWelcome: false
+      isWelcome: false,
+      description: frontmatter.description || '',
+      url: `/${hash}.html`
     })
 
     fs.writeFileSync(resolve(outDir, `${hash}.html`), pageHtml, 'utf-8')

package/bin/md2ui.js

@@ -11,6 +11,7 @@ import { createServer } from 'vite'
 import { fileURLToPath } from 'url'
 import { dirname, resolve } from 'path'
 import fs from 'fs'
+import crypto from 'crypto'
 import { exec } from 'child_process'
 import { pathToFileURL } from 'url'
 
@@ -136,11 +137,19 @@ function md2uiPlugin(siteConfig) {
     configureServer(server) {
       // API 中间件
       server.middlewares.use((req, res, next) => {
-        // 文档列表 API
+        // 文档列表 API（带 ETag 支持，避免轮询时重复传输）
         if (req.url === '/@user-docs-list') {
           const docs = scanDocs(userDir, '', 0, siteConfig.folderExpanded)
+          const body = JSON.stringify(docs)
+          const etag = '"' + crypto.createHash('md5').update(body).digest('hex') + '"'
+          if (req.headers['if-none-match'] === etag) {
+            res.statusCode = 304
+            res.end()
+            return
+          }
           res.setHeader('Content-Type', 'application/json; charset=utf-8')
-          res.end(JSON.stringify(docs))
+          res.setHeader('ETag', etag)
+          res.end(body)
           return
         }
         // 站点配置 API
@@ -149,12 +158,79 @@ function md2uiPlugin(siteConfig) {
           res.end(JSON.stringify(siteConfig))
           return
         }
+        // 图片上传 API
+        if (req.url === '/@upload-image' && req.method === 'POST') {
+          const chunks = []
+          req.on('data', chunk => chunks.push(chunk))
+          req.on('end', () => {
+            try {
+              const body = Buffer.concat(chunks)
+              const docPath = decodeURIComponent(req.headers['x-doc-path'] || '')
+              const fileName = decodeURIComponent(req.headers['x-file-name'] || `img-${Date.now()}.png`)
+
+              if (!docPath) {
+                res.statusCode = 400; res.end('缺少文档路径'); return
+              }
+
+              const docDir = dirname(resolve(userDir, docPath))
+              if (!docDir.startsWith(userDir)) {
+                res.statusCode = 403; res.end('禁止访问'); return
+              }
+
+              const assetsDir = resolve(docDir, 'assets')
+              fs.mkdirSync(assetsDir, { recursive: true })
+
+              const ext = docPath.includes('.') ? `.${fileName.split('.').pop()}` : '.png'
+              const baseName = `img-${Date.now()}`
+              const targetName = `${baseName}${ext.startsWith('.') ? ext : '.' + ext}`
+              const targetPath = resolve(assetsDir, targetName)
+
+              fs.writeFileSync(targetPath, body)
+
+              // 返回相对于用户目录的路径（对路径各段做 URL 编码）
+              const docDirRel = dirname(docPath)
+              const encodedDir = docDirRel && docDirRel !== '.'
+                ? docDirRel.split('/').map(encodeURIComponent).join('/')
+                : ''
+              const imageUrl = encodedDir
+                ? `/@user-docs/${encodedDir}/assets/${targetName}`
+                : `/@user-docs/assets/${targetName}`
+
+              res.setHeader('Content-Type', 'application/json; charset=utf-8')
+              res.end(JSON.stringify({ url: imageUrl }))
+            } catch (e) {
+              res.statusCode = 500; res.end(e.message)
+            }
+          })
+          return
+        }
         // 文档内容
         if (req.url?.startsWith('/@user-docs/')) {
           const filePath = resolve(userDir, decodeURIComponent(req.url.replace('/@user-docs/', '')))
           if (fs.existsSync(filePath)) {
-            res.setHeader('Content-Type', 'text/plain; charset=utf-8')
-            res.end(fs.readFileSync(filePath, 'utf-8'))
+            // 根据扩展名设置 Content-Type
+            const extName = filePath.split('.').pop().toLowerCase()
+            const mimeMap = {
+              md: 'text/plain; charset=utf-8',
+              png: 'image/png',
+              jpg: 'image/jpeg',
+              jpeg: 'image/jpeg',
+              gif: 'image/gif',
+              webp: 'image/webp',
+              svg: 'image/svg+xml',
+              bmp: 'image/bmp',
+            }
+            const contentType = mimeMap[extName] || 'application/octet-stream'
+            res.setHeader('Content-Type', contentType)
+            // 附带最后修改时间
+            const stat = fs.statSync(filePath)
+            res.setHeader('X-Last-Modified', stat.mtime.toISOString())
+            // 文本文件用 utf-8 读取，二进制文件直接读取
+            if (contentType.startsWith('text/')) {
+              res.end(fs.readFileSync(filePath, 'utf-8'))
+            } else {
+              res.end(fs.readFileSync(filePath))
+            }
             return
           }
         }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "md2ui",
-  "version": "1.0.16",
+  "version": "1.0.19",
   "type": "module",
   "description": "将本地 Markdown 文档转换为美观的 HTML 页面",
   "author": "",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/your-username/md2ui"
+    "url": "https://github.com/xiaoyaodev/md2ui"
   },
   "keywords": [
     "markdown",
@@ -22,29 +22,43 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview",
-    "publish": "bash publish.sh"
+    "preview": "vite preview"
   },
   "files": [
     "bin",
     "src",
     "public",
     "index.html",
-    "vite.config.js"
+    "vite.config.js",
+    "vite-plugin-doc-api.js"
   ],
   "dependencies": {
+    "@tiptap/extension-code-block-lowlight": "^3.22.3",
+    "@tiptap/extension-image": "^3.22.3",
+    "@tiptap/extension-placeholder": "^3.22.3",
+    "@tiptap/extension-table": "^3.22.3",
+    "@tiptap/extension-table-cell": "^3.22.3",
+    "@tiptap/extension-table-header": "^3.22.3",
+    "@tiptap/extension-table-row": "^3.22.3",
+    "@tiptap/extension-task-item": "^3.22.3",
+    "@tiptap/extension-task-list": "^3.22.3",
+    "@tiptap/extension-underline": "^3.22.3",
+    "@tiptap/pm": "^3.22.4",
+    "@tiptap/starter-kit": "^3.22.3",
+    "@tiptap/vue-3": "^3.22.3",
     "@vitejs/plugin-vue": "^5.0.0",
     "docx": "^9.6.1",
-    "file-saver": "^2.0.5",
-    "flexsearch": "^0.8.212",
     "github-slugger": "^2.0.0",
     "highlight.js": "^11.11.1",
-    "jsdom": "^28.1.0",
+    "highlightjs-line-numbers.js": "^2.9.1",
+    "katex": "^0.16.45",
     "lucide-vue-next": "^0.556.0",
     "marked": "^11.1.1",
     "mermaid": "^10.6.1",
     "minisearch": "^7.2.0",
+    "tiptap-markdown": "^0.9.0",
     "vite": "^5.0.0",
-    "vue": "^3.4.0"
+    "vue": "^3.4.0",
+    "vuedraggable": "^4.1.0"
   }
 }

package/public/docs/00-/345/277/253/351/200/237/345/274/200/345/247/213.md

@@ -1,51 +1,71 @@
 # 快速开始
 
-欢迎使用 md2ui，本指南将帮助你在几分钟内启动项目。
+欢迎使用 md2ui，一个轻量级的 Markdown 文档渲染工具。
 
-## 环境要求
+## 安装
 
-- Node.js 18+
-- pnpm 8+
+```bash
+# 全局安装
+pnpm add -g md2ui
+
+# 或使用 npm
+npm install -g md2ui
+```
 
-## 安装步骤
+## 启动预览
+
+在包含 `.md` 文件的目录下运行：
 
 ```bash
-# 克隆项目
-git clone https://github.com/your-username/md2ui.git
-cd md2ui
+cd /path/to/your/docs
+md2ui
+```
+
+访问 http://localhost:3000 即可查看文档。
 
-# 安装依赖
-pnpm install
+## 指定端口
 
-# 启动开发服务器
-pnpm dev
+```bash
+md2ui -p 8080
 ```
 
-启动后访问 http://localhost:5173 即可看到文档界面。
+## 静态构建
 
-## 添加你的文档
+```bash
+md2ui build
+```
 
-将 Markdown 文件放入 `public/docs/` 目录：
+生成的静态文件在 `dist/` 目录下，可直接部署到任意静态服务器。
+
+## 文档组织
 
 ```
-public/docs/
+your-docs/
+├── README.md              # 首页内容
 ├── 00-快速开始.md
-├── 01-使用指南.md
-└── 02-进阶配置/
-    ├── 01-主题定制.md
-    └── 02-部署方案.md
+├── 01-功能特性.md
+└── 02-进阶指南/
+    ├── 01-目录结构.md
+    └── 02-自定义配置.md
 ```
 
-文件名前的数字用于控制排序，数字越小越靠前。
+- 使用 `序号-名称.md` 格式控制排序，如 `01-快速开始.md`
+- 文件夹也支持序号前缀，如 `02-进阶指南/`
+- 序号越小越靠前
 
-## 构建部署
+## 自定义配置
 
-```bash
-# 构建生产版本
-pnpm build
+在文档目录下创建 `md2ui.config.js`：
 
-# 本地预览
-pnpm preview
+```js
+export default {
+  title: '我的文档站',
+  port: 8080,
+  folderExpanded: true,
+  themeColor: '#3eaf7c',
+  github: 'https://github.com/your/repo',
+  footer: 'Copyright © 2025'
+}
 ```
 
-构建产物在 `dist/` 目录，可部署到任意静态服务器。
+更多配置项请参考 [自定义](10-%E9%83%A8%E7%BD%B2%E4%B8%8E%E9%85%8D%E7%BD%AE/03-%E8%87%AA%E5%AE%9A%E4%B9%89%E9%85%8D%E7%BD%AE.md)

package/public/docs/01-/345/212/237/350/203/275/347/211/271/346/200/247.md

@@ -1,57 +1,72 @@
 # 功能特性
 
-md2ui 提供了丰富的功能，让文档阅读体验更加流畅。
+md2ui 提供了丰富的功能，覆盖文档渲染、编辑、搜索、导航、移动端、导出、部署等完整链路。
 
-## 三栏布局
+## Markdown 渲染
 
-界面采用经典的三栏布局设计：
+- GFM 语法支持（表格、任务列表、删除线等）
+- 代码语法高亮（基于 highlight.js，支持行号、自动换行、高亮开关）
+- Mermaid 图表（流程图、序列图、甘特图、饼图等）
+- Frontmatter 解析（title / description / order / hidden）
+- 阅读时间估算（中文 400 字/分钟，英文 200 词/分钟）
 
-- 左侧：文档导航树，支持多级目录
-- 中间：文档内容区，渲染 Markdown
-- 右侧：文档大纲，快速跳转章节
+## 导航与布局
 
-所有栏目都支持拖拽调整宽度，也可以折叠隐藏。
+- 三栏布局（左侧导航 / 中间内容 / 右侧大纲，可拖拽调整宽度）
+- 自动目录树（递归扫描文件夹，按序号排序，支持多级嵌套）
+- 文档大纲 TOC（自动提取 h1\~h6，高亮当前位置，点击跳转）
+- 上下篇导航（文档底部自动生成前后文档链接）
+- 导航过滤（侧边栏关键词过滤文档树）
+- 侧边栏折叠/展开（收起导航栏、全部展开/收起文件夹）
+- 站内链接改写（.md 文件间相对链接自动转为 SPA 路由）
 
-## Markdown 增强
+## 全文搜索
 
-支持 GitHub Flavored Markdown (GFM) 语法：
+- 基于 MiniSearch 的快速全文检索
+- 中文 bigram 分词、模糊匹配、前缀搜索
+- Ctrl+K 快捷键唤起搜索框
+- 懒加载索引（首次打开搜索时构建）
 
-### 代码高亮
+## 编辑功能
 
-```javascript
-// 支持多种语言的语法高亮
-function greet(name) {
-  return `Hello, ${name}!`
-}
-```
+- 查看/编辑模式一键切换
+- 基于 Tiptap 的富文本编辑器
+- 支持加粗、斜体、下划线、删除线、行内代码
+- H1\~H4 标题、无序/有序/任务列表
+- 代码块编辑（语言标签 + 复制按钮）
+- 表格编辑（可调整大小，气泡菜单操作行列）
+- Mermaid 编辑（预览/编辑双模式，实时渲染）
+- 图片插入、撤销/重做
+- 自动保存（1 秒防抖，组件卸载时立即保存）
 
-```python
-# Python 代码示例
-def fibonacci(n):
-    if n <= 1:
-        return n
-    return fibonacci(n-1) + fibonacci(n-2)
-```
+## 阅读体验
 
-### 表格
+- 阅读进度条（显示滚动百分比）
+- 返回顶部按钮
+- 图片点击放大（支持多图切换）
+- 表格增强（固定宽度/横向滚动、固定/自适应高度、全屏查看）
+- 代码一键复制
 
-| 功能 | 描述 | 状态 |
-|------|------|------|
-| 代码高亮 | 支持多种编程语言 | 已完成 |
-| Mermaid 图表 | 流程图、时序图等 | 已完成 |
-| 数学公式 | LaTeX 语法支持 | 计划中 |
+## 移动端适配
 
-### 任务列表
+- 响应式布局（768px 断点自动切换）
+- 抽屉式导航（带遮罩）
+- 移动端 TOC（底部浮动目录面板）
+- 独立移动端顶栏
 
-- [x] 基础 Markdown 渲染
-- [x] 代码语法高亮
-- [x] Mermaid 图表支持
-- [ ] 全文搜索
-- [ ] 多主题切换
+## 文档管理
 
-## 交互体验
+- 新建文档/目录（侧边栏菜单创建）
+- 删除文档/目录（带确认弹窗）
+- 文件热更新（轮询监听，ETag 机制自动刷新）
 
-- 阅读进度显示
-- 返回顶部按钮
-- 图片点击放大
-- URL 路由支持（可分享链接）
+## 导出
+
+- 导出 Word（.docx 格式，支持标题、段落、表格、列表、代码块、Mermaid 图表、图片、引用块、超链接）
+
+## 部署与 CLI
+
+- `md2ui` 命令一键启动开发服务器
+- `md2ui build` 生成纯静态 HTML（SSG）
+- 自定义配置（标题、端口、主题色、GitHub 链接、页脚等）
+- SPA 路由（基于 hash，支持浏览器前进/后退）