feat: 添加 Mermaid 图表拖拽和提示功能

- 添加鼠标左键拖拽移动图表
- 拖拽时显示 grabbing 光标,平时显示 grab 光标
- 添加底部提示文本:按住 Ctrl+滚轮缩放 | 拖拽移动
- 提示文本鼠标悬停时显示,支持夜间模式
- 防止拖拽时选中文本
This commit is contained in:
2026-01-24 23:41:02 +08:00
parent a163e7a2a0
commit dde868021e
2 changed files with 91 additions and 0 deletions

View File

@@ -988,6 +988,43 @@ html.darkmode .mermaid-zoom-level {
color: #aaa;
}
/* 提示文本 */
.mermaid-hint {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
white-space: nowrap;
z-index: 9;
}
.mermaid-container:hover .mermaid-hint {
opacity: 1;
}
html.darkmode .mermaid-hint {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
}
/* 拖拽时的光标 */
.mermaid-container-inner.dragging {
cursor: grabbing !important;
user-select: none;
}
.mermaid-container-inner:not(.dragging) {
cursor: grab;
}
/* Mermaid 淡入动画 */
@keyframes mermaidFadeIn {
from {