md2ui 1.0.0

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

@@ -0,0 +1,102 @@
+# 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

@@ -0,0 +1,55 @@
+# 目录结构
+
+了解 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

@@ -0,0 +1,63 @@
+# 自定义配置
+
+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

@@ -0,0 +1,73 @@
+# 部署方案
+
+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 仓库，自动构建部署，无需额外配置。

package/public/docs/04-API/345/217/202/350/200/203/01-/347/273/204/344/273/266API.md

@@ -0,0 +1,80 @@
+# 组件 API
+
+md2ui 的核心组件及其接口说明。
+
+## TreeNode
+
+树形节点组件，用于渲染文档导航。
+
+### Props
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| item | Object | 节点数据 |
+| currentDoc | String | 当前选中的文档 |
+
+### Events
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| toggle | folder | 切换文件夹展开状态 |
+| select | docKey | 选中文档 |
+
+### item 数据结构
+
+```javascript
+{
+  key: 'docs/guide.md',      // 唯一标识
+  name: '使用指南',           // 显示名称
+  type: 'file',              // 类型: file | folder
+  path: '/docs/guide.md',    // 文件路径
+  expanded: false,           // 是否展开(仅文件夹)
+  children: []               // 子节点(仅文件夹)
+}
+```
+
+## TableOfContents
+
+文档目录组件，显示当前文档的标题大纲。
+
+### Props
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| tocItems | Array | 目录项列表 |
+| activeHeading | String | 当前高亮的标题 ID |
+| collapsed | Boolean | 是否折叠 |
+| width | Number | 组件宽度 |
+
+### Events
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| scroll-to | headingId | 跳转到指定标题 |
+
+### tocItems 数据结构
+
+```javascript
+[
+  { id: 'heading-1', text: '快速开始', level: 1 },
+  { id: 'heading-2', text: '安装', level: 2 },
+  { id: 'heading-3', text: '配置', level: 2 }
+]
+```
+
+## ImageZoom
+
+图片放大组件。
+
+### Props
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| visible | Boolean | 是否显示 |
+| imageContent | String | 图片 HTML 内容 |
+
+### Events
+
+| 事件 | 说明 |
+|------|------|
+| close | 关闭放大视图 |

package/public/docs/04-API/345/217/202/350/200/203/02-Composables.md

@@ -0,0 +1,92 @@
+# Composables
+
+md2ui 使用 Vue 3 Composition API，将可复用逻辑封装为 composables。
+
+## useMarkdown
+
+Markdown 渲染相关逻辑。
+
+### 返回值
+
+```javascript
+const { 
+  htmlContent,    // ref<string> - 渲染后的 HTML
+  tocItems,       // ref<array> - 目录项列表
+  renderMarkdown  // function - 渲染方法
+} = useMarkdown()
+```
+
+### renderMarkdown
+
+```javascript
+// 渲染 Markdown 文本
+await renderMarkdown(markdownText)
+```
+
+处理流程：
+
+```mermaid
+flowchart TD
+    A[Markdown 文本] --> B[marked 解析]
+    B --> C[提取标题]
+    C --> D[处理 Mermaid]
+    D --> E[输出 HTML]
+```
+
+## useScroll
+
+滚动相关逻辑。
+
+### 返回值
+
+```javascript
+const {
+  scrollProgress,  // ref<number> - 阅读进度 0-100
+  showBackToTop,   // ref<boolean> - 是否显示返回顶部
+  activeHeading,   // ref<string> - 当前高亮标题 ID
+  handleScroll,    // function - 滚动事件处理
+  scrollToHeading, // function - 跳转到标题
+  scrollToTop      // function - 返回顶部
+} = useScroll()
+```
+
+### 使用示例
+
+```vue
+<template>
+  <main @scroll="handleScroll">
+    <!-- 内容 -->
+  </main>
+  <button v-if="showBackToTop" @click="scrollToTop">
+    返回顶部 {{ scrollProgress }}%
+  </button>
+</template>
+```
+
+## useResize
+
+拖拽调整宽度逻辑。
+
+### 返回值
+
+```javascript
+const {
+  sidebarWidth,  // ref<number> - 侧边栏宽度
+  tocWidth,      // ref<number> - 目录宽度
+  startResize    // function - 开始拖拽
+} = useResize()
+```
+
+### 使用示例
+
+```vue
+<template>
+  <aside :style="{ width: sidebarWidth + 'px' }">
+    <!-- 侧边栏 -->
+  </aside>
+  <div 
+    class="resizer" 
+    @mousedown="startResize('left', $event)"
+  ></div>
+</template>
+```

package/public/logo.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="6" y="4" width="20" height="24" rx="2" stroke="#111827" stroke-width="2" fill="none"/>
+  <line x1="10" y1="10" x2="22" y2="10" stroke="#111827" stroke-width="2" stroke-linecap="round"/>
+  <line x1="10" y1="16" x2="22" y2="16" stroke="#111827" stroke-width="2" stroke-linecap="round"/>
+  <line x1="10" y1="22" x2="17" y2="22" stroke="#111827" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/src/App.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="container">
+    <aside v-if="!sidebarCollapsed" class="sidebar" :style="{ width: sidebarWidth + 'px' }">
+      <div class="logo">
+        <Logo @go-home="loadReadme" />
+      </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" />
+    </button>
+    <button v-else class="collapse-btn collapse-btn-left" @click="sidebarCollapsed = true" title="收起导航">
+      <PanelLeftClose :size="16" />
+    </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" @scroll-to="scrollToHeading" />
+    <button v-if="tocCollapsed && tocItems.length > 0" class="expand-btn expand-btn-right" @click="tocCollapsed = false" title="展开目录">
+      <PanelRightOpen :size="16" />
+    </button>
+    <button v-else-if="tocItems.length > 0" class="collapse-btn collapse-btn-right" @click="tocCollapsed = true" title="收起目录">
+      <PanelRightClose :size="16" />
+    </button>
+    <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, PanelRightClose } from 'lucide-vue-next'
+import Logo from './components/Logo.vue'
+import TreeNode from './components/TreeNode.vue'
+import TableOfContents from './components/TableOfContents.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 { useResize } from './composables/useResize.js'
+
+const docsList = ref([])
+const currentDoc = ref('')
+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()
+}
+
+async function loadReadme() {
+  currentDoc.value = ''
+  try {
+    const response = await fetch('/README.md')
+    if (response.ok) {
+      const content = await response.text()
+      await renderMarkdown(content)
+    }
+  } catch (error) {
+    console.error('加载首页失败:', error)
+  }
+}
+
+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
+}
+
+function toggleFolder(item) {
+  item.expanded = !item.expanded
+}
+
+function expandAll() {
+  function expand(items) {
+    items.forEach(item => {
+      if (item.type === 'folder') {
+        item.expanded = true
+        if (item.children) expand(item.children)
+      }
+    })
+  }
+  expand(docsList.value)
+}
+
+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
+  }
+}
+
+onMounted(async () => {
+  await loadDocsList()
+  await loadReadme()
+})
+</script>