md2ui 1.0.0

package/README.md

@@ -0,0 +1,230 @@
+# md2ui
+
+一个基于 Vue 3 的文档渲染系统，将本地 Markdown 文档转换为美观的 HTML 页面。
+
+## 功能特性
+
+- 📚 **文档管理** - 自动扫描并构建文档目录树
+- 🎨 **美观界面** - 三栏布局（导航栏、内容区、目录）
+- 📝 **Markdown 渲染** - 支持 GFM 语法和代码高亮
+- 📊 **Mermaid 图表** - 支持流程图、时序图等
+- 🔍 **目录导航** - 自动提取文档大纲
+- 📱 **响应式设计** - 适配不同屏幕尺寸
+- ⚡ **快速加载** - 基于 Vite 构建
+
+## 技术栈
+
+- Vue 3 - 渐进式 JavaScript 框架
+- Vite - 下一代前端构建工具
+- Marked - Markdown 解析器
+- Mermaid - 图表渲染库
+- Lucide Vue - 图标库
+
+## 项目结构
+
+```
+md2ui/
+├── public/                    # 静态资源
+│   ├── README.md             # 首页内容
+│   └── docs/                 # 文档目录
+│       ├── 00-项目概览.md
+│       ├── 代码结构/
+│       └── 架构设计/
+├── src/
+│   ├── api/                  # API 接口
+│   │   └── docs.js          # 文档列表获取
+│   ├── components/           # 组件
+│   │   ├── TreeNode.vue     # 树形节点
+│   │   └── TableOfContents.vue  # 目录组件
+│   ├── composables/          # 组合式函数
+│   │   ├── useMarkdown.js   # Markdown 渲染
+│   │   ├── useScroll.js     # 滚动处理
+│   │   └── useResize.js     # 拖拽调整
+│   ├── App.vue              # 主组件
+│   ├── main.js              # 入口文件
+│   └── style.css            # 全局样式
+├── index.html               # HTML 模板
+├── vite.config.js           # Vite 配置
+└── package.json             # 项目配置
+```
+
+## 快速开始
+
+### 安装依赖
+
+```bash
+pnpm install
+```
+
+### 开发模式
+
+```bash
+pnpm dev
+```
+
+访问 http://localhost:3000
+
+### 构建生产版本
+
+```bash
+pnpm build
+```
+
+### 预览生产版本
+
+```bash
+pnpm preview
+```
+
+## 文档组织
+
+### 目录结构
+
+文档放在 `public/docs/` 目录下，支持多级嵌套：
+
+```
+public/docs/
+├── 00-项目概览.md
+├── 代码结构/
+│   ├── 业务层/
+│   │   └── service包说明.md
+│   └── 基础设施/
+│       └── config包说明.md
+└── 架构设计/
+    └── 01-核心业务流程.md
+```
+
+### 文件命名规范
+
+- 使用 `序号-名称.md` 格式，如 `00-项目概览.md`
+- 序号用于控制排序，数字越小越靠前
+- 文件夹也可以使用序号前缀
+
+### 首页内容
+
+首页内容来自 `public/README.md` 文件，可以自定义项目介绍、快速开始等内容。
+
+## 功能说明
+
+### 左侧导航栏
+
+- 显示文档目录树
+- 支持文件夹展开/折叠
+- 支持全部展开/收起
+- 可拖拽调整宽度
+- 可收起/展开
+
+### 中间内容区
+
+- 渲染 Markdown 文档
+- 支持代码高亮
+- 支持 Mermaid 图表
+- 显示阅读进度
+- 返回顶部按钮
+
+### 右侧目录
+
+- 自动提取文档标题
+- 支持多级标题
+- 点击跳转到对应位置
+- 高亮当前阅读位置
+- 可拖拽调整宽度
+- 可收起/展开
+
+## 自定义配置
+
+### 修改端口
+
+编辑 `vite.config.js`：
+
+```javascript
+export default defineConfig({
+  server: {
+    port: 3000  // 修改为你想要的端口
+  }
+})
+```
+
+### 修改标题
+
+编辑 `index.html`：
+
+```html
+<title>你的项目名称</title>
+```
+
+编辑 `src/App.vue` 中的 logo 部分：
+
+```vue
+<div class="logo">
+  <h2>📚 你的项目名称</h2>
+</div>
+```
+
+或修改 `src/components/Logo.vue` 中的 logo-text。
+
+### 自定义样式
+
+编辑 `src/style.css` 文件，可以修改颜色、字体、间距等样式。
+
+## 部署
+
+### 静态部署
+
+构建后将 `dist` 目录部署到任何静态服务器：
+
+```bash
+pnpm build
+```
+
+### Nginx 配置示例
+
+```nginx
+server {
+    listen 80;
+    server_name your-domain.com;
+    root /path/to/dist;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
+```
+
+## 开发指南
+
+### 添加新功能
+
+1. 在 `src/composables/` 创建组合式函数
+2. 在 `src/components/` 创建 Vue 组件
+3. 在 `src/App.vue` 中引入使用
+
+### 代码规范
+
+- 使用 Vue 3 Composition API
+- 组件使用 `<script setup>` 语法
+- 提取可复用逻辑到 composables
+- 保持组件职责单一
+
+## 常见问题
+
+### 文档不显示？
+
+检查文档路径是否正确，确保文件在 `public/docs/` 目录下。
+
+### Mermaid 图表不渲染？
+
+确保代码块使用 ` ```mermaid ` 标记，并检查图表语法是否正确。
+
+### 样式显示异常？
+
+清除浏览器缓存，或使用无痕模式测试。
+
+## 许可证
+
+MIT License
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request！

package/bin/md2ui.js

@@ -0,0 +1,168 @@
+#!/usr/bin/env node
+
+import { createServer } from 'vite'
+import { fileURLToPath } from 'url'
+import { dirname, resolve } from 'path'
+import fs from 'fs'
+
+// 获取 CLI 工具所在目录（即 md2ui 包的安装目录）
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const pkgRoot = resolve(__dirname, '..')
+
+// 用户执行命令的目录
+const userDir = process.cwd()
+
+// 解析命令行参数
+const args = process.argv.slice(2)
+let port = 5000
+
+for (let i = 0; i < args.length; i++) {
+  if (args[i] === '-p' || args[i] === '--port') {
+    port = parseInt(args[i + 1]) || 5000
+  }
+}
+
+// 虚拟模块插件：动态提供用户目录的文档列表
+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)}`
+      }
+    }
+  }
+}
+
+// 扫描目录下的 md 文件
+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 = resolve(dir, entry.name)
+    const relativePath = basePath ? `${basePath}/${entry.name}` : entry.name
+
+    if (entry.isDirectory()) {
+      const children = scanDocs(fullPath, relativePath, level + 1)
+      // 只有包含 md 文件的文件夹才加入目录
+      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: true,
+          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}`
+      })
+    }
+  }
+
+  // 按 order 排序
+  items.sort((a, b) => a.order - b.order)
+  return items
+}
+
+// 提供用户目录 md 文件的中间件
+function serveUserDocs() {
+  return {
+    name: 'serve-user-docs',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        // 提供文档列表 API
+        if (req.url === '/@user-docs-list') {
+          const docs = scanDocs(userDir)
+          res.setHeader('Content-Type', 'application/json; charset=utf-8')
+          res.end(JSON.stringify(docs))
+          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'))
+            return
+          }
+        }
+        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
+      }
+    }
+  }
+  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 server = await createServer({
+    root: pkgRoot,
+    configFile: resolve(pkgRoot, 'vite.config.js'),
+    plugins: [docsPlugin(), serveUserDocs()],
+    server: {
+      port
+    }
+  })
+
+  await server.listen()
+  server.printUrls()
+}
+
+start().catch(console.error)

package/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/svg+xml" href="/logo.svg">
+  <title>md2ui - Markdown 文档渲染系统</title>
+  <meta name="description" content="将本地 Markdown 文档转换为美观的 HTML 页面">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "md2ui",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "将本地 Markdown 文档转换为美观的 HTML 页面",
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/md2ui"
+  },
+  "keywords": [
+    "markdown",
+    "documentation",
+    "viewer",
+    "mermaid",
+    "vue"
+  ],
+  "bin": {
+    "md2ui": "./bin/md2ui.js"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "files": [
+    "bin",
+    "src",
+    "public",
+    "index.html",
+    "vite.config.js"
+  ],
+  "dependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "crypto-js": "^4.2.0",
+    "lucide-vue-next": "^0.556.0",
+    "marked": "^11.1.1",
+    "mermaid": "^10.6.1",
+    "vite": "^5.0.0",
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/crypto-js": "^4.2.2"
+  }
+}

package/public/README.md

@@ -0,0 +1,106 @@
+# md2ui
+
+一个轻量级的文档渲染系统，将本地 Markdown 文档转换为美观的 HTML 页面。
+
+## 项目简介
+
+md2ui 是一个基于 Vue 3 开发的前端文档展示工具，专注于将 Markdown 文档以清晰、易读的方式呈现。它会自动扫描文档目录，构建导航树，并提供流畅的阅读体验。
+
+## 核心特性
+
+- **自动化目录** - 扫描文档文件夹，自动生成多级导航树
+- **三栏布局** - 左侧导航、中间内容、右侧大纲，布局清晰
+- **Markdown 增强** - 支持 GFM 语法、代码高亮、Mermaid 图表
+- **交互优化** - 可拖拽调整宽度、折叠侧边栏、阅读进度显示
+- **响应式设计** - 适配不同屏幕尺寸
+
+## 技术栈
+
+- Vue 3 + Vite
+- Marked (Markdown 解析)
+- Mermaid (图表渲染)
+- Lucide Vue (图标库)
+
+## 快速开始
+
+```bash
+# 安装依赖
+pnpm install
+
+# 启动开发服务器
+pnpm dev
+
+# 构建生产版本
+pnpm build
+```
+
+## 使用说明
+
+### 文档组织
+
+将你的 Markdown 文档放在 `public/docs/` 目录下：
+
+```
+public/docs/
+├── 00-项目概览.md
+├── 代码结构/
+│   ├── 业务层/
+│   └── 基础设施/
+└── 架构设计/
+    └── 01-核心流程.md
+```
+
+### 文件命名
+
+使用 `序号-名称.md` 格式控制排序，例如：
+- `00-项目概览.md`
+- `01-快速开始.md`
+- `02-架构设计.md`
+
+序号越小，在导航中的位置越靠前。
+
+### 首页内容
+
+编辑 `public/README.md` 文件即可自定义首页内容。
+
+## 功能说明
+
+### 左侧导航
+- 展示文档目录树结构
+- 支持文件夹展开/折叠
+- 可拖拽调整宽度
+- 一键全部展开/收起
+
+### 中间内容区
+- 渲染 Markdown 文档
+- 支持代码语法高亮
+- 支持 Mermaid 流程图、时序图等
+- 显示阅读进度和返回顶部按钮
+
+### 右侧大纲
+- 自动提取文档标题生成目录
+- 点击跳转到对应章节
+- 高亮当前阅读位置
+- 可拖拽调整宽度
+
+## 部署
+
+构建后将 `dist` 目录部署到任何静态服务器：
+
+```bash
+pnpm build
+```
+
+支持部署到 Nginx、Apache、GitHub Pages、Vercel 等平台。
+
+## 适用场景
+
+- 项目技术文档站点
+- API 接口文档
+- 开发规范手册
+- 架构设计文档
+- 团队知识库
+
+## 许可证
+
+MIT License

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

@@ -0,0 +1,51 @@
+# 快速开始
+
+欢迎使用 md2ui，本指南将帮助你在几分钟内启动项目。
+
+## 环境要求
+
+- Node.js 18+
+- pnpm 8+
+
+## 安装步骤
+
+```bash
+# 克隆项目
+git clone https://github.com/your-username/md2ui.git
+cd md2ui
+
+# 安装依赖
+pnpm install
+
+# 启动开发服务器
+pnpm dev
+```
+
+启动后访问 http://localhost:5173 即可看到文档界面。
+
+## 添加你的文档
+
+将 Markdown 文件放入 `public/docs/` 目录：
+
+```
+public/docs/
+├── 00-快速开始.md
+├── 01-使用指南.md
+└── 02-进阶配置/
+    ├── 01-主题定制.md
+    └── 02-部署方案.md
+```
+
+文件名前的数字用于控制排序，数字越小越靠前。
+
+## 构建部署
+
+```bash
+# 构建生产版本
+pnpm build
+
+# 本地预览
+pnpm preview
+```
+
+构建产物在 `dist/` 目录，可部署到任意静态服务器。

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

@@ -0,0 +1,57 @@
+# 功能特性
+
+md2ui 提供了丰富的功能，让文档阅读体验更加流畅。
+
+## 三栏布局
+
+界面采用经典的三栏布局设计：
+
+- 左侧：文档导航树，支持多级目录
+- 中间：文档内容区，渲染 Markdown
+- 右侧：文档大纲，快速跳转章节
+
+所有栏目都支持拖拽调整宽度，也可以折叠隐藏。
+
+## Markdown 增强
+
+支持 GitHub Flavored Markdown (GFM) 语法：
+
+### 代码高亮
+
+```javascript
+// 支持多种语言的语法高亮
+function greet(name) {
+  return `Hello, ${name}!`
+}
+```
+
+```python
+# Python 代码示例
+def fibonacci(n):
+    if n <= 1:
+        return n
+    return fibonacci(n-1) + fibonacci(n-2)
+```
+
+### 表格
+
+| 功能 | 描述 | 状态 |
+|------|------|------|
+| 代码高亮 | 支持多种编程语言 | 已完成 |
+| Mermaid 图表 | 流程图、时序图等 | 已完成 |
+| 数学公式 | LaTeX 语法支持 | 计划中 |
+
+### 任务列表
+
+- [x] 基础 Markdown 渲染
+- [x] 代码语法高亮
+- [x] Mermaid 图表支持
+- [ ] 全文搜索
+- [ ] 多主题切换
+
+## 交互体验
+
+- 阅读进度显示
+- 返回顶部按钮
+- 图片点击放大
+- URL 路由支持（可分享链接）