md2ui 1.0.16 → 1.0.19

package/vite-plugin-doc-api.js

@@ -0,0 +1,368 @@
+import fs from 'fs'
+import path from 'path'
+import crypto from 'crypto'
+
+/**
+ * Vite 插件：文档 API（统一使用 /@user-docs-* 路由前缀）
+ *
+ * 路由：
+ * - GET  /@user-docs-list     返回文档树 + ETag
+ * - GET  /@user-docs/xxx      返回文件内容（md / 图片等）
+ * - POST /@upload-image       上传图片
+ * - POST /api/save            保存文件内容
+ * - POST /api/create          创建文件或文件夹
+ * - POST /api/delete          删除文件或文件夹
+ * - POST /api/rename          重命名
+ * - POST /api/reorder         批量重编号
+ * - POST /api/move            移动文件/文件夹
+ */
+export default function docApiPlugin(docsDir = '.') {
+  const resolvedDocsDir = path.resolve(docsDir)
+
+  // 计算内容的 ETag
+  function etag(content) {
+    return '"' + crypto.createHash('md5').update(content).digest('hex') + '"'
+  }
+
+  // 递归扫描 .md 文件，返回树结构（与 CLI 模式 scanDocs 一致）
+  function scanDocs(dir, basePath = '', level = 0) {
+    const items = []
+    if (!fs.existsSync(dir)) return items
+    const entries = fs.readdirSync(dir, { withFileTypes: true })
+      .filter(e => !e.name.startsWith('.') && e.name !== 'node_modules')
+      .sort((a, b) => a.name.localeCompare(b.name, 'zh-CN'))
+
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name)
+      const relativePath = basePath ? `${basePath}/${entry.name}` : entry.name
+
+      if (entry.isDirectory()) {
+        const children = scanDocs(fullPath, relativePath, level + 1)
+        if (children.length > 0) {
+          const match = entry.name.match(/^(\d+)-(.+)$/)
+          items.push({
+            key: relativePath,
+            label: match ? match[2] : entry.name,
+            order: match ? parseInt(match[1]) : 999,
+            type: 'folder',
+            level,
+            expanded: false,
+            children
+          })
+        }
+      } else if (entry.name.endsWith('.md')) {
+        const match = entry.name.match(/^(\d+)-(.+)\.md$/)
+        const label = match ? match[2] : entry.name.replace(/\.md$/, '')
+        items.push({
+          key: relativePath.replace(/\.md$/, ''),
+          label,
+          order: match ? parseInt(match[1]) : 999,
+          type: 'file',
+          level,
+          path: `/@user-docs/${relativePath}`
+        })
+      }
+    }
+
+    items.sort((a, b) => a.order - b.order)
+    return items
+  }
+
+  // MIME 类型映射
+  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',
+  }
+
+  return {
+    name: 'vite-plugin-doc-api',
+    configureServer(server) {
+      // 统一中间件
+      server.middlewares.use((req, res, next) => {
+        // GET /@user-docs-list — 返回文档树 + ETag
+        if (req.url === '/@user-docs-list' && req.method === 'GET') {
+          const docs = scanDocs(resolvedDocsDir)
+          const body = JSON.stringify(docs)
+          const tag = etag(body)
+          if (req.headers['if-none-match'] === tag) {
+            res.statusCode = 304; res.end(); return
+          }
+          res.setHeader('Content-Type', 'application/json; charset=utf-8')
+          res.setHeader('ETag', tag)
+          res.end(body)
+          return
+        }
+
+        // GET /@user-docs/xxx — 返回文件内容（md / 图片等）
+        if (req.url?.startsWith('/@user-docs/') && req.method === 'GET') {
+          const filePath = path.resolve(resolvedDocsDir, decodeURIComponent(req.url.replace('/@user-docs/', '')))
+          if (!filePath.startsWith(resolvedDocsDir)) {
+            res.statusCode = 403; res.end('禁止访问'); return
+          }
+          if (!fs.existsSync(filePath)) {
+            res.statusCode = 404; res.end('文件不存在'); return
+          }
+          const extName = filePath.split('.').pop().toLowerCase()
+          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())
+          // 文本文件支持 ETag
+          if (contentType.startsWith('text/')) {
+            const content = fs.readFileSync(filePath, 'utf-8')
+            const tag = etag(content)
+            if (req.headers['if-none-match'] === tag) {
+              res.statusCode = 304; res.end(); return
+            }
+            res.setHeader('ETag', tag)
+            res.end(content)
+          } else {
+            res.end(fs.readFileSync(filePath))
+          }
+          return
+        }
+
+        // POST /@upload-image — 上传图片
+        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 = path.dirname(path.resolve(resolvedDocsDir, docPath))
+              if (!docDir.startsWith(resolvedDocsDir)) {
+                res.statusCode = 403; res.end('禁止访问'); return
+              }
+
+              const assetsDir = path.join(docDir, 'assets')
+              fs.mkdirSync(assetsDir, { recursive: true })
+
+              const ext = path.extname(fileName) || '.png'
+              const baseName = `img-${Date.now()}`
+              const targetName = `${baseName}${ext}`
+              const targetPath = path.join(assetsDir, targetName)
+
+              fs.writeFileSync(targetPath, body)
+
+              // 返回 /@user-docs/ 前缀的路径
+              const docDirRel = path.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
+        }
+
+        next()
+      })
+
+      // POST /api/create — 创建文件或文件夹
+      server.middlewares.use('/api/create', (req, res) => {
+        if (req.method !== 'POST') { res.statusCode = 405; res.end(); return }
+        let body = ''
+        req.on('data', chunk => { body += chunk })
+        req.on('end', () => {
+          try {
+            const { path: filePath, type } = JSON.parse(body)
+            if (!filePath) {
+              res.statusCode = 400; res.end('缺少 path'); return
+            }
+            const fullPath = path.resolve(resolvedDocsDir, filePath)
+            if (!fullPath.startsWith(resolvedDocsDir)) {
+              res.statusCode = 403; res.end('禁止访问'); return
+            }
+            if (fs.existsSync(fullPath)) {
+              res.statusCode = 409; res.end('已存在同名文件或文件夹'); return
+            }
+            if (type === 'folder') {
+              fs.mkdirSync(fullPath, { recursive: true })
+            } else {
+              fs.mkdirSync(path.dirname(fullPath), { recursive: true })
+              fs.writeFileSync(fullPath, '', 'utf-8')
+            }
+            res.setHeader('Content-Type', 'application/json')
+            res.end(JSON.stringify({ ok: true }))
+          } catch (e) {
+            res.statusCode = 500; res.end(e.message)
+          }
+        })
+      })
+
+      // POST /api/delete — 删除文件或文件夹
+      server.middlewares.use('/api/delete', (req, res) => {
+        if (req.method !== 'POST') { res.statusCode = 405; res.end(); return }
+        let body = ''
+        req.on('data', chunk => { body += chunk })
+        req.on('end', () => {
+          try {
+            const { path: filePath } = JSON.parse(body)
+            if (!filePath) {
+              res.statusCode = 400; res.end('缺少 path'); return
+            }
+            const fullPath = path.resolve(resolvedDocsDir, filePath)
+            if (!fullPath.startsWith(resolvedDocsDir)) {
+              res.statusCode = 403; res.end('禁止访问'); return
+            }
+            if (!fs.existsSync(fullPath)) {
+              res.statusCode = 404; res.end('文件不存在'); return
+            }
+            fs.rmSync(fullPath, { recursive: true, force: true })
+            res.setHeader('Content-Type', 'application/json')
+            res.end(JSON.stringify({ ok: true }))
+          } catch (e) {
+            res.statusCode = 500; res.end(e.message)
+          }
+        })
+      })
+
+      // POST /api/rename — 重命名文件或文件夹
+      server.middlewares.use('/api/rename', (req, res) => {
+        if (req.method !== 'POST') { res.statusCode = 405; res.end(); return }
+        let body = ''
+        req.on('data', chunk => { body += chunk })
+        req.on('end', () => {
+          try {
+            const { oldPath, newPath } = JSON.parse(body)
+            if (!oldPath || !newPath) {
+              res.statusCode = 400; res.end('缺少 oldPath 或 newPath'); return
+            }
+            const fullOld = path.resolve(resolvedDocsDir, oldPath)
+            const fullNew = path.resolve(resolvedDocsDir, newPath)
+            if (!fullOld.startsWith(resolvedDocsDir) || !fullNew.startsWith(resolvedDocsDir)) {
+              res.statusCode = 403; res.end('禁止访问'); return
+            }
+            if (!fs.existsSync(fullOld)) {
+              res.statusCode = 404; res.end('源文件不存在'); return
+            }
+            if (fs.existsSync(fullNew)) {
+              res.statusCode = 409; res.end('目标名称已存在'); return
+            }
+            fs.mkdirSync(path.dirname(fullNew), { recursive: true })
+            fs.renameSync(fullOld, fullNew)
+            res.setHeader('Content-Type', 'application/json')
+            res.end(JSON.stringify({ ok: true }))
+          } catch (e) {
+            res.statusCode = 500; res.end(e.message)
+          }
+        })
+      })
+
+      // POST /api/reorder — 批量重编号
+      server.middlewares.use('/api/reorder', (req, res) => {
+        if (req.method !== 'POST') { res.statusCode = 405; res.end(); return }
+        let body = ''
+        req.on('data', chunk => { body += chunk })
+        req.on('end', () => {
+          try {
+            const { items } = JSON.parse(body)
+            if (!Array.isArray(items) || items.length === 0) {
+              res.statusCode = 400; res.end('缺少 items'); return
+            }
+            for (const { oldPath, newPath } of items) {
+              const fullOld = path.resolve(resolvedDocsDir, oldPath)
+              const fullNew = path.resolve(resolvedDocsDir, newPath)
+              if (!fullOld.startsWith(resolvedDocsDir) || !fullNew.startsWith(resolvedDocsDir)) {
+                res.statusCode = 403; res.end('禁止访问'); return
+              }
+            }
+            const tempMap = []
+            for (let i = 0; i < items.length; i++) {
+              const { oldPath } = items[i]
+              const fullOld = path.resolve(resolvedDocsDir, oldPath)
+              if (!fs.existsSync(fullOld)) continue
+              const tempName = fullOld + `.__reorder_tmp_${i}__`
+              fs.renameSync(fullOld, tempName)
+              tempMap.push({ temp: tempName, newPath: items[i].newPath })
+            }
+            for (const { temp, newPath: np } of tempMap) {
+              const fullNew = path.resolve(resolvedDocsDir, np)
+              fs.mkdirSync(path.dirname(fullNew), { recursive: true })
+              fs.renameSync(temp, fullNew)
+            }
+            res.setHeader('Content-Type', 'application/json')
+            res.end(JSON.stringify({ ok: true }))
+          } catch (e) {
+            res.statusCode = 500; res.end(e.message)
+          }
+        })
+      })
+
+      // POST /api/move — 移动文件/文件夹
+      server.middlewares.use('/api/move', (req, res) => {
+        if (req.method !== 'POST') { res.statusCode = 405; res.end(); return }
+        let body = ''
+        req.on('data', chunk => { body += chunk })
+        req.on('end', () => {
+          try {
+            const { oldPath, newPath } = JSON.parse(body)
+            if (!oldPath || !newPath) {
+              res.statusCode = 400; res.end('缺少 oldPath 或 newPath'); return
+            }
+            const fullOld = path.resolve(resolvedDocsDir, oldPath)
+            const fullNew = path.resolve(resolvedDocsDir, newPath)
+            if (!fullOld.startsWith(resolvedDocsDir) || !fullNew.startsWith(resolvedDocsDir)) {
+              res.statusCode = 403; res.end('禁止访问'); return
+            }
+            if (!fs.existsSync(fullOld)) {
+              res.statusCode = 404; res.end('源文件不存在'); return
+            }
+            fs.mkdirSync(path.dirname(fullNew), { recursive: true })
+            fs.renameSync(fullOld, fullNew)
+            res.setHeader('Content-Type', 'application/json')
+            res.end(JSON.stringify({ ok: true }))
+          } catch (e) {
+            res.statusCode = 500; res.end(e.message)
+          }
+        })
+      })
+
+      // POST /api/save — 保存文件内容
+      server.middlewares.use('/api/save', (req, res) => {
+        if (req.method !== 'POST') { res.statusCode = 405; res.end(); return }
+        let body = ''
+        req.on('data', chunk => { body += chunk })
+        req.on('end', () => {
+          try {
+            const { path: filePath, content } = JSON.parse(body)
+            if (!filePath || content == null) {
+              res.statusCode = 400; res.end('缺少 path 或 content'); return
+            }
+            const fullPath = path.resolve(resolvedDocsDir, filePath)
+            if (!fullPath.startsWith(resolvedDocsDir)) {
+              res.statusCode = 403; res.end('禁止访问'); return
+            }
+            fs.mkdirSync(path.dirname(fullPath), { recursive: true })
+            fs.writeFileSync(fullPath, content, 'utf-8')
+            res.setHeader('Content-Type', 'application/json')
+            res.end(JSON.stringify({ ok: true }))
+          } catch (e) {
+            res.statusCode = 500; res.end(e.message)
+          }
+        })
+      })
+    }
+  }
+}

package/vite.config.js

@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { config } from './src/config.js'
+import docApiPlugin from './vite-plugin-doc-api.js'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), docApiPlugin('public/docs')],
   server: {
     port: config.defaultPort
   },

package/public/docs/02-Mermaid/345/233/276/350/241/250.md

@@ -1,102 +0,0 @@
-# Mermaid 图表
-
-md2ui 内置了 Mermaid 支持，可以直接在 Markdown 中绘制各类图表。
-
-## 流程图
-
-```mermaid
-flowchart TD
-    A[开始] --> B{是否有文档?}
-    B -->|是| C[解析 Markdown]
-    B -->|否| D[显示空状态]
-    C --> E[渲染 HTML]
-    E --> F[展示页面]
-    D --> F
-    F --> G[结束]
-```
-
-## 时序图
-
-```mermaid
-sequenceDiagram
-    participant U as 用户
-    participant B as 浏览器
-    participant S as 服务器
-    
-    U->>B: 点击文档链接
-    B->>S: 请求 Markdown 文件
-    S-->>B: 返回文件内容
-    B->>B: 解析并渲染
-    B-->>U: 显示文档页面
-```
-
-## 类图
-
-```mermaid
-classDiagram
-    class Document {
-        +String title
-        +String content
-        +Date createdAt
-        +render()
-    }
-    
-    class Folder {
-        +String name
-        +Document[] documents
-        +Folder[] subfolders
-        +expand()
-        +collapse()
-    }
-    
-    class Navigator {
-        +Folder root
-        +Document current
-        +navigate(path)
-    }
-    
-    Folder "1" *-- "*" Document
-    Folder "1" *-- "*" Folder
-    Navigator --> Folder
-    Navigator --> Document
-```
-
-## 状态图
-
-```mermaid
-stateDiagram-v2
-    [*] --> 空闲
-    空闲 --> 加载中: 请求文档
-    加载中 --> 已加载: 加载成功
-    加载中 --> 错误: 加载失败
-    已加载 --> 空闲: 切换文档
-    错误 --> 空闲: 重试
-```
-
-## 甘特图
-
-```mermaid
-gantt
-    title 项目开发计划
-    dateFormat  YYYY-MM-DD
-    section 基础功能
-    Markdown 渲染     :done, a1, 2024-01-01, 7d
-    目录导航          :done, a2, after a1, 5d
-    section 增强功能
-    Mermaid 支持      :done, b1, after a2, 3d
-    代码高亮          :done, b2, after b1, 2d
-    section 优化
-    性能优化          :active, c1, after b2, 5d
-    响应式适配        :c2, after c1, 3d
-```
-
-## 饼图
-
-```mermaid
-pie title 技术栈占比
-    "Vue 3" : 40
-    "Vite" : 20
-    "Marked" : 15
-    "Mermaid" : 15
-    "其他" : 10
-```

package/public/docs/03-/350/277/233/351/230/266/346/214/207/345/215/227/01-/347/233/256/345/275/225/347/273/223/346/236/204.md

@@ -1,55 +0,0 @@
-# 目录结构
-
-了解 md2ui 的项目结构，有助于你进行定制开发。
-
-## 项目结构
-
-```
-md2ui/
-├── public/                 # 静态资源
-│   ├── README.md          # 首页内容
-│   ├── logo.svg           # 网站图标
-│   └── docs/              # 文档目录
-├── src/
-│   ├── api/               # API 接口
-│   │   └── docs.js        # 文档列表获取
-│   ├── components/        # Vue 组件
-│   │   ├── Logo.vue       # Logo 组件
-│   │   ├── TreeNode.vue   # 树形节点
-│   │   ├── TableOfContents.vue  # 目录组件
-│   │   └── ImageZoom.vue  # 图片放大
-│   ├── composables/       # 组合式函数
-│   │   ├── useMarkdown.js # Markdown 渲染
-│   │   ├── useScroll.js   # 滚动处理
-│   │   └── useResize.js   # 拖拽调整
-│   ├── App.vue            # 主组件
-│   ├── main.js            # 入口文件
-│   └── style.css          # 全局样式
-├── index.html             # HTML 模板
-├── vite.config.js         # Vite 配置
-└── package.json           # 项目配置
-```
-
-## 核心模块说明
-
-### api/docs.js
-
-负责扫描 `public/docs/` 目录，构建文档树结构。
-
-### composables/useMarkdown.js
-
-封装 Markdown 解析逻辑，包括：
-- 使用 marked 解析 Markdown
-- 提取标题生成目录
-- 处理 Mermaid 代码块
-
-### composables/useScroll.js
-
-处理滚动相关逻辑：
-- 计算阅读进度
-- 高亮当前章节
-- 返回顶部功能
-
-### composables/useResize.js
-
-实现拖拽调整宽度功能。

package/public/docs/03-/350/277/233/351/230/266/346/214/207/345/215/227/02-/350/207/252/345/256/232/344/271/211/351/205/215/347/275/256.md

@@ -1,63 +0,0 @@
-# 自定义配置
-
-md2ui 支持多种自定义配置，满足不同场景需求。
-
-## 修改网站标题
-
-编辑 `index.html`：
-
-```html
-<title>你的文档站点</title>
-```
-
-## 修改 Logo
-
-编辑 `src/components/Logo.vue`：
-
-```vue
-<span class="logo-text">你的项目名</span>
-```
-
-或替换 `public/logo.svg` 图标文件。
-
-## 修改首页
-
-编辑 `public/README.md` 文件，这是点击 Logo 后显示的首页内容。
-
-## 修改端口
-
-编辑 `vite.config.js`：
-
-```javascript
-export default defineConfig({
-  server: {
-    port: 3000
-  }
-})
-```
-
-## 样式定制
-
-全局样式在 `src/style.css` 中，主要变量：
-
-```css
-/* 颜色 */
---primary-color: #3b82f6;
---text-color: #1f2937;
---bg-color: #ffffff;
---border-color: #e5e7eb;
-
-/* 尺寸 */
---sidebar-width: 280px;
---toc-width: 240px;
-```
-
-## 文档排序规则
-
-文件名格式：`序号-名称.md`
-
-- `00-快速开始.md` 排在最前
-- `01-使用指南.md` 排在其后
-- 没有序号的文件按字母排序
-
-文件夹同样支持序号前缀。

package/public/docs/03-/350/277/233/351/230/266/346/214/207/345/215/227/03-/351/203/250/347/275/262/346/226/271/346/241/210.md

@@ -1,73 +0,0 @@
-# 部署方案
-
-md2ui 构建后是纯静态文件，可部署到任意静态服务器。
-
-## 构建
-
-```bash
-pnpm build
-```
-
-构建产物在 `dist/` 目录。
-
-## Nginx 部署
-
-```nginx
-server {
-    listen 80;
-    server_name docs.example.com;
-    root /var/www/md2ui/dist;
-    index index.html;
-
-    # 支持 HTML5 History 模式
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-
-    # 静态资源缓存
-    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
-        expires 30d;
-        add_header Cache-Control "public, immutable";
-    }
-}
-```
-
-## Docker 部署
-
-项目已包含 Dockerfile：
-
-```bash
-# 构建镜像
-docker build -t md2ui .
-
-# 运行容器
-docker run -d -p 3000:3000 md2ui
-```
-
-## 部署流程
-
-```mermaid
-flowchart LR
-    A[代码提交] --> B[CI 构建]
-    B --> C[生成 dist]
-    C --> D{部署目标}
-    D --> E[Nginx]
-    D --> F[Docker]
-    D --> G[CDN]
-```
-
-## GitHub Pages
-
-1. 修改 `vite.config.js` 设置 base 路径：
-
-```javascript
-export default defineConfig({
-  base: '/your-repo-name/'
-})
-```
-
-2. 构建并推送到 gh-pages 分支
-
-## Vercel / Netlify
-
-直接连接 Git 仓库，自动构建部署，无需额外配置。