feat: 实现 Mermaid 全屏模式

- 在工具栏添加全屏按钮(⛶ 图标)
- 实现全屏模式进入和退出功能
- 全屏模式下保持缩放和拖拽功能可用
- 支持 ESC 键退出全屏
- 退出全屏时恢复图表原始状态(缩放级别和滚动位置)
- 全屏模式下禁用页面滚动
- 添加全屏按钮激活状态样式
- 在清理函数中添加全屏事件监听器清理
- 全屏模式下工具栏始终可见,背景更明显
- 全屏容器占满整个视口,居中显示图表

需求:14.1, 14.2, 14.3, 14.4, 14.5
This commit is contained in:
2026-01-25 01:53:31 +08:00
parent 1ec2ebc279
commit 1c15e46ad6
3 changed files with 178 additions and 4 deletions

View File

@@ -1135,6 +1135,61 @@ html.darkmode .mermaid-hint {
-ms-user-select: none;
}
/* 需求 14: Mermaid 全屏模式样式 */
.mermaid-fullscreen {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
margin: 0 !important;
padding: 20px !important;
z-index: 99999 !important;
background: var(--color-foreground) !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: auto !important;
}
html.darkmode .mermaid-fullscreen {
background: var(--color-widgets) !important;
}
/* 全屏模式下的工具栏 */
.mermaid-fullscreen .mermaid-zoom-controls {
opacity: 1;
transform: translateY(0);
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
html.darkmode .mermaid-fullscreen .mermaid-zoom-controls {
background: rgba(30, 30, 30, 0.95);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
/* 全屏按钮激活状态 */
.mermaid-zoom-btn[data-action="fullscreen"].active {
background: rgba(94, 114, 228, 0.2);
color: var(--themecolor);
}
/* 全屏模式下的内部容器 */
.mermaid-fullscreen .mermaid-container-inner {
max-height: calc(100vh - 100px);
display: flex;
align-items: center;
justify-content: center;
}
/* 全屏模式下的提示文本 */
.mermaid-fullscreen .mermaid-hint {
opacity: 1;
bottom: 20px;
}
/* Mermaid 淡入动画 */
@keyframes mermaidFadeIn {
from {