feat: 优化 Mermaid 图表尺寸显示
- 添加 SVG 最大高度限制（桌面端 600px） - 使用 Flexbox 实现图表在容器中居中显示 - 添加响应式适配（平板 500px，手机 400px） - 设置容器最小高度 100px，避免空白过小 - 使用 width: auto !important 保持图表原始宽高比 - 创建尺寸优化测试文件和文档 解决问题： - 低内容图表（2-3 节点）不再显示过大 - 图表尺寸更加合理，视觉协调 - 复杂图表高度限制，出现滚动条 - 移动端体验优化
This commit is contained in:
383
tests/test-mermaid-size-optimization.html
Normal file
383
tests/test-mermaid-size-optimization.html
Normal file
@@ -0,0 +1,383 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mermaid 图表尺寸优化测试</title>
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.test-section {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.test-section h2 {
|
||||
color: #5e72e4;
|
||||
border-bottom: 2px solid #5e72e4;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.test-case {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border-left: 4px solid #5e72e4;
|
||||
}
|
||||
.test-case h3 {
|
||||
margin-top: 0;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
.expected {
|
||||
color: #28a745;
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.info {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.toggle-theme {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 10px 20px;
|
||||
background: #5e72e4;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
.toggle-theme:hover {
|
||||
background: #4c63d2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button class="toggle-theme" onclick="toggleTheme()">🌓 切换夜间模式</button>
|
||||
|
||||
<h1>🎨 Mermaid 图表尺寸优化测试</h1>
|
||||
<p>本页面用于测试 Mermaid 图表的尺寸优化，确保低内容图表不会显示过大。</p>
|
||||
|
||||
<!-- 测试 1: 极简图表 -->
|
||||
<div class="test-section">
|
||||
<h2>测试 1: 极简图表（2-3个节点）</h2>
|
||||
|
||||
<div class="test-case">
|
||||
<h3>1.1 简单流程图（2个节点）</h3>
|
||||
<p class="expected">✅ 预期：图表高度不超过 600px，居中显示</p>
|
||||
<p class="info">优化前：可能显示超大，占据整个屏幕</p>
|
||||
<div class="mermaid-container">
|
||||
<div class="mermaid">
|
||||
flowchart TD
|
||||
A[开始] --> B[结束]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
<h3>1.2 简单流程图（3个节点）</h3>
|
||||
<p class="expected">✅ 预期：图表高度不超过 600px，居中显示</p>
|
||||
<div class="mermaid-container">
|
||||
<div class="mermaid">
|
||||
flowchart LR
|
||||
A[输入] --> B[处理] --> C[输出]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
<h3>1.3 简单判断流程</h3>
|
||||
<p class="expected">✅ 预期：图表高度不超过 600px，居中显示</p>
|
||||
<div class="mermaid-container">
|
||||
<div class="mermaid">
|
||||
flowchart TD
|
||||
A[用户] --> B{登录?}
|
||||
B -->|是| C[首页]
|
||||
B -->|否| D[登录页]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 测试 2: 中等复杂度图表 -->
|
||||
<div class="test-section">
|
||||
<h2>测试 2: 中等复杂度图表（5-10个节点）</h2>
|
||||
|
||||
<div class="test-case">
|
||||
<h3>2.1 标准流程图</h3>
|
||||
<p class="expected">✅ 预期：图表高度不超过 600px，自适应内容</p>
|
||||
<div class="mermaid-container">
|
||||
<div class="mermaid">
|
||||
flowchart TD
|
||||
A[开始] --> B[输入数据]
|
||||
B --> C{数据有效?}
|
||||
C -->|是| D[处理数据]
|
||||
C -->|否| E[显示错误]
|
||||
D --> F[保存结果]
|
||||
E --> G[结束]
|
||||
F --> G
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
<h3>2.2 时序图</h3>
|
||||
<p class="expected">✅ 预期：图表高度不超过 600px</p>
|
||||
<div class="mermaid-container">
|
||||
<div class="mermaid">
|
||||
sequenceDiagram
|
||||
participant U as 用户
|
||||
participant F as 前端
|
||||
participant B as 后端
|
||||
participant D as 数据库
|
||||
|
||||
U->>F: 提交表单
|
||||
F->>B: 发送请求
|
||||
B->>D: 查询数据
|
||||
D-->>B: 返回结果
|
||||
B-->>F: 返回响应
|
||||
F-->>U: 显示结果
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 测试 3: 复杂图表 -->
|
||||
<div class="test-section">
|
||||
<h2>测试 3: 复杂图表（10+个节点）</h2>
|
||||
|
||||
<div class="test-case">
|
||||
<h3>3.1 复杂流程图</h3>
|
||||
<p class="expected">✅ 预期：图表高度限制在 600px，出现滚动条</p>
|
||||
<p class="info">优化：超过最大高度时，容器会出现垂直滚动条</p>
|
||||
<div class="mermaid-container">
|
||||
<div class="mermaid">
|
||||
flowchart TD
|
||||
A[开始] --> B[初始化]
|
||||
B --> C{检查权限}
|
||||
C -->|有权限| D[加载配置]
|
||||
C -->|无权限| E[显示错误]
|
||||
D --> F{配置有效?}
|
||||
F -->|是| G[连接数据库]
|
||||
F -->|否| H[使用默认配置]
|
||||
G --> I{连接成功?}
|
||||
I -->|是| J[加载数据]
|
||||
I -->|否| K[重试连接]
|
||||
K --> L{重试次数<3?}
|
||||
L -->|是| G
|
||||
L -->|否| M[连接失败]
|
||||
H --> J
|
||||
J --> N[处理数据]
|
||||
N --> O{处理成功?}
|
||||
O -->|是| P[显示结果]
|
||||
O -->|否| Q[显示错误]
|
||||
P --> R[记录日志]
|
||||
Q --> R
|
||||
E --> R
|
||||
M --> R
|
||||
R --> S[结束]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
<h3>3.2 类图</h3>
|
||||
<p class="expected">✅ 预期：图表高度限制在 600px</p>
|
||||
<div class="mermaid-container">
|
||||
<div class="mermaid">
|
||||
classDiagram
|
||||
class Animal {
|
||||
+String name
|
||||
+int age
|
||||
+makeSound()
|
||||
+eat()
|
||||
}
|
||||
class Dog {
|
||||
+String breed
|
||||
+bark()
|
||||
+fetch()
|
||||
}
|
||||
class Cat {
|
||||
+String color
|
||||
+meow()
|
||||
+scratch()
|
||||
}
|
||||
class Bird {
|
||||
+boolean canFly
|
||||
+sing()
|
||||
+fly()
|
||||
}
|
||||
Animal <|-- Dog
|
||||
Animal <|-- Cat
|
||||
Animal <|-- Bird
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 测试 4: 横向图表 -->
|
||||
<div class="test-section">
|
||||
<h2>测试 4: 横向图表（宽度测试）</h2>
|
||||
|
||||
<div class="test-case">
|
||||
<h3>4.1 横向流程图</h3>
|
||||
<p class="expected">✅ 预期：宽度自适应，出现横向滚动条</p>
|
||||
<div class="mermaid-container">
|
||||
<div class="mermaid">
|
||||
flowchart LR
|
||||
A[步骤1] --> B[步骤2] --> C[步骤3] --> D[步骤4] --> E[步骤5]
|
||||
E --> F[步骤6] --> G[步骤7] --> H[步骤8] --> I[步骤9] --> J[步骤10]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 测试 5: 响应式测试 -->
|
||||
<div class="test-section">
|
||||
<h2>测试 5: 响应式适配</h2>
|
||||
|
||||
<div class="test-case">
|
||||
<h3>5.1 移动端适配</h3>
|
||||
<p class="expected">✅ 预期：在移动端（<768px）高度限制为 500px</p>
|
||||
<p class="info">请调整浏览器窗口大小测试</p>
|
||||
<div class="mermaid-container">
|
||||
<div class="mermaid">
|
||||
flowchart TD
|
||||
A[移动端] --> B[平板]
|
||||
B --> C[桌面端]
|
||||
A --> D[响应式]
|
||||
B --> D
|
||||
C --> D
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 测试结果检查清单 -->
|
||||
<div class="test-section">
|
||||
<h2>📋 测试检查清单</h2>
|
||||
<ul style="list-style: none; padding: 0;">
|
||||
<li style="margin: 10px 0;">
|
||||
<input type="checkbox" id="check1">
|
||||
<label for="check1">✅ 极简图表（2-3节点）不会显示过大，高度合理</label>
|
||||
</li>
|
||||
<li style="margin: 10px 0;">
|
||||
<input type="checkbox" id="check2">
|
||||
<label for="check2">✅ 图表在容器中居中显示</label>
|
||||
</li>
|
||||
<li style="margin: 10px 0;">
|
||||
<input type="checkbox" id="check3">
|
||||
<label for="check3">✅ 中等复杂度图表显示正常，高度不超过 600px</label>
|
||||
</li>
|
||||
<li style="margin: 10px 0;">
|
||||
<input type="checkbox" id="check4">
|
||||
<label for="check4">✅ 复杂图表高度限制在 600px，出现滚动条</label>
|
||||
</li>
|
||||
<li style="margin: 10px 0;">
|
||||
<input type="checkbox" id="check5">
|
||||
<label for="check5">✅ 横向图表宽度自适应，出现横向滚动条</label>
|
||||
</li>
|
||||
<li style="margin: 10px 0;">
|
||||
<input type="checkbox" id="check6">
|
||||
<label for="check6">✅ 夜间模式下图表显示正常</label>
|
||||
</li>
|
||||
<li style="margin: 10px 0;">
|
||||
<input type="checkbox" id="check7">
|
||||
<label for="check7">✅ 移动端（<768px）高度限制为 500px</label>
|
||||
</li>
|
||||
<li style="margin: 10px 0;">
|
||||
<input type="checkbox" id="check8">
|
||||
<label for="check8">✅ 小屏幕（<480px）高度限制为 400px</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 优化说明 -->
|
||||
<div class="test-section">
|
||||
<h2>🎯 优化说明</h2>
|
||||
<h3>主要改进：</h3>
|
||||
<ol>
|
||||
<li><strong>最大高度限制</strong>：SVG 最大高度设置为 600px（桌面端）</li>
|
||||
<li><strong>居中显示</strong>：使用 flexbox 让图表在容器中居中</li>
|
||||
<li><strong>宽度自适应</strong>：使用 <code>width: auto !important</code> 让图表保持原始宽高比</li>
|
||||
<li><strong>响应式适配</strong>：
|
||||
<ul>
|
||||
<li>平板（<768px）：最大高度 500px</li>
|
||||
<li>手机（<480px）：最大高度 400px</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>最小高度</strong>：容器最小高度 100px，避免空白过小</li>
|
||||
</ol>
|
||||
|
||||
<h3>CSS 关键属性：</h3>
|
||||
<pre style="background: #f8f9fa; padding: 15px; border-radius: 4px; overflow-x: auto;"><code>.mermaid-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.mermaid-container svg {
|
||||
max-width: 100%;
|
||||
max-height: 600px;
|
||||
height: auto;
|
||||
width: auto !important;
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||||
<script>
|
||||
// 初始化 Mermaid
|
||||
mermaid.initialize({
|
||||
startOnLoad: true,
|
||||
theme: 'default',
|
||||
securityLevel: 'loose',
|
||||
flowchart: {
|
||||
useMaxWidth: false,
|
||||
htmlLabels: true
|
||||
}
|
||||
});
|
||||
|
||||
// 切换夜间模式
|
||||
function toggleTheme() {
|
||||
document.documentElement.classList.toggle('darkmode');
|
||||
const isDark = document.documentElement.classList.contains('darkmode');
|
||||
|
||||
// 重新初始化 Mermaid 以应用新主题
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: isDark ? 'dark' : 'default',
|
||||
securityLevel: 'loose',
|
||||
flowchart: {
|
||||
useMaxWidth: false,
|
||||
htmlLabels: true
|
||||
}
|
||||
});
|
||||
|
||||
console.log(`[Theme] 切换到 ${isDark ? '夜间' : '日间'} 模式`);
|
||||
}
|
||||
|
||||
// 页面加载完成后的日志
|
||||
window.addEventListener('load', function() {
|
||||
console.log('[Mermaid Size Test] 测试页面已加载');
|
||||
console.log('[Mermaid Size Test] 请检查：');
|
||||
console.log('[Mermaid Size Test] 1. 极简图表是否显示合理大小');
|
||||
console.log('[Mermaid Size Test] 2. 图表是否在容器中居中');
|
||||
console.log('[Mermaid Size Test] 3. 复杂图表是否有高度限制');
|
||||
console.log('[Mermaid Size Test] 4. 响应式适配是否正常');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user