Skip to content

Commit 74170bf

Browse files
committed
feat(@142vip/vitepress): 支持mermaid内容复制功能
1 parent 8d85cef commit 74170bf

6 files changed

Lines changed: 297 additions & 54 deletions

File tree

apps/vitepress-demo/docs/example/mermaid.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@
22

33
切换站点外观时,图会按队列重绘:暗黑统一用官方 `dark`,亮色用所选主题。
44

5+
## 交互能力
6+
7+
`VipMermaid` 会根据内容尺寸自动选择展示方式:
8+
9+
- **静态模式**:图能完整放入容器时居中显示,高度随内容自适应,右上角提供 **复制** 按钮
10+
- **交互模式**:内容超出时启用固定视口,支持拖拽、缩放、还原、全屏,并提供 **复制** 按钮
11+
12+
复制功能会将 Markdown 代码块(` ```mermaid ` fence,不含主题)写入剪贴板,便于粘贴到官方 Mermaid 或其他编辑器中使用。
13+
514
## 默认
615

716
```mermaid

packages/vitepress/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ flowchart LR
5555
| 静态 | 图可完整放入容器 | 居中展示,高度随内容自适应,无操作按钮 |
5656
| 交互 | 宽或高超出展示区域 | 固定视口、自动缩放居中,支持拖拽、滚轮 / 双指缩放、还原与全屏 |
5757

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

6060
## Demo
6161

packages/vitepress/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@
7878
"dependencies": {
7979
"@142vip/cdn": "0.0.1-alpha.0",
8080
"@142vip/open-source": "workspace:*",
81+
"copy-to-clipboard": "4.0.2",
8182
"element-plus": "2.9.7",
8283
"mermaid": "11.12.0",
8384
"vitepress": "1.6.4",

0 commit comments

Comments
 (0)