@142vip/vitepress

基于 VitePress 的文档站封装：主题、Element Plus、Mermaid 架构图。

快速开始

1. 配置

import { defineVipVitepressConfig, getVipThemeConfig } from '@142vip/vitepress'

// 原用法（不变）
export default defineVipVitepressConfig({
  title: 'My Docs',
  themeConfig: getVipThemeConfig({ nav: [] }),
})

// 启用 Mermaid（第二参数拓展）
export default defineVipVitepressConfig({
  title: 'My Docs',
  themeConfig: getVipThemeConfig({ nav: [] }),
}, {
  mermaid: true, // 或 { theme: 'forest' }
})

2. 主题

import defineVipExtendsTheme from '@142vip/vitepress/theme'

export default defineVipExtendsTheme()

3. 写图（需已启用 mermaid）

```mermaid
flowchart LR
  A --> B
```

```mermaid theme=forest
flowchart LR
  A --> B
```

主题规则：亮色使用所选官方主题；暗黑模式统一使用官方 dark，保证可读性。

展示模式（VipMermaid 自动判断，无需额外配置）：

模式	触发条件	行为
静态	图可完整放入容器	居中展示，高度随内容自适应，无操作按钮
交互	宽或高超出展示区域	固定视口、自动缩放居中，支持拖拽、滚轮 / 双指缩放、还原与全屏

交互能力仅在内容超出时出现；小图保持简洁，大图才提供缩放与全屏。所有图表均支持复制 Markdown 代码块（```mermaid fence，不含主题配置）到剪贴板。样式使用 VitePress CSS 变量，兼容明暗主题与移动端。

Demo

shell

pnpm --filter @142vip/vitepress build
pnpm --filter vitepress-demo dev

证书

MIT

@142vip/vitepress ​

快速开始 ​

1. 配置 ​

2. 主题 ​

3. 写图（需已启用 mermaid） ​

Demo ​

证书 ​