213 lines
7.0 KiB
HTML
213 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Vue Flow 节点尺寸对比</title>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
margin: 20px;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.section {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
h3 {
|
||
margin-top: 0;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.node-demo {
|
||
display: flex;
|
||
gap: 15px;
|
||
align-items: center;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
/* 优化后的节点样式 */
|
||
.start-node-optimized {
|
||
background: linear-gradient(135deg, #52c41a, #389e0d);
|
||
color: white;
|
||
border: 2px solid #52c41a;
|
||
border-radius: 16px;
|
||
padding: 8px 12px;
|
||
box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
|
||
min-width: 80px;
|
||
max-width: 120px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
.task-node-optimized {
|
||
background: linear-gradient(135deg, #1890ff, #0050b3);
|
||
color: white;
|
||
border: 2px solid #1890ff;
|
||
border-radius: 6px;
|
||
padding: 8px 12px;
|
||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
|
||
min-width: 90px;
|
||
max-width: 140px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
.decision-node-optimized {
|
||
width: 60px;
|
||
height: 60px;
|
||
position: relative;
|
||
transform: rotate(45deg);
|
||
background: linear-gradient(135deg, #faad14, #d48806);
|
||
border: 2px solid #faad14;
|
||
box-shadow: 0 2px 8px rgba(250, 173, 20, 0.3);
|
||
}
|
||
|
||
.decision-node-optimized .content {
|
||
transform: rotate(-45deg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
color: white;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.end-node-optimized {
|
||
background: linear-gradient(135deg, #ff4d4f, #d9363e);
|
||
color: white;
|
||
border: 2px solid #ff4d4f;
|
||
border-radius: 16px;
|
||
padding: 8px 12px;
|
||
box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
|
||
min-width: 80px;
|
||
max-width: 120px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 原始节点样式对比 */
|
||
.start-node-original {
|
||
background: linear-gradient(135deg, #52c41a, #389e0d);
|
||
color: white;
|
||
border: 2px solid #52c41a;
|
||
border-radius: 20px;
|
||
padding: 12px 16px;
|
||
box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
|
||
min-width: 120px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
.task-node-original {
|
||
background: linear-gradient(135deg, #1890ff, #0050b3);
|
||
color: white;
|
||
border: 2px solid #1890ff;
|
||
border-radius: 8px;
|
||
padding: 12px 16px;
|
||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
|
||
min-width: 140px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
.decision-node-original {
|
||
width: 100px;
|
||
height: 100px;
|
||
position: relative;
|
||
transform: rotate(45deg);
|
||
background: linear-gradient(135deg, #faad14, #d48806);
|
||
border: 2px solid #faad14;
|
||
box-shadow: 0 4px 12px rgba(250, 173, 20, 0.3);
|
||
}
|
||
|
||
.decision-node-original .content {
|
||
transform: rotate(-45deg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
color: white;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.end-node-original {
|
||
background: linear-gradient(135deg, #ff4d4f, #d9363e);
|
||
color: white;
|
||
border: 2px solid #ff4d4f;
|
||
border-radius: 20px;
|
||
padding: 12px 16px;
|
||
box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
|
||
min-width: 120px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Vue Flow 节点尺寸优化对比</h1>
|
||
|
||
<div class="container">
|
||
<div class="section">
|
||
<h3>❌ 优化前（太大）</h3>
|
||
<div class="node-demo">
|
||
<div class="start-node-original">开始</div>
|
||
<div class="task-node-original">审核</div>
|
||
<div class="decision-node-original">
|
||
<div class="content">通过?</div>
|
||
</div>
|
||
<div class="end-node-original">结束</div>
|
||
</div>
|
||
<p style="color: #999; font-size: 12px;">原始尺寸过大，占用太多画布空间</p>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h3>✅ 优化后（合适）</h3>
|
||
<div class="node-demo">
|
||
<div class="start-node-optimized">开始</div>
|
||
<div class="task-node-optimized">审核</div>
|
||
<div class="decision-node-optimized">
|
||
<div class="content">通过?</div>
|
||
</div>
|
||
<div class="end-node-optimized">结束</div>
|
||
</div>
|
||
<p style="color: #52c41a; font-size: 12px;">优化后尺寸更合理，适合流程图设计</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h3>📊 优化详情</h3>
|
||
<ul>
|
||
<li><strong>开始/结束节点</strong>: 120px → 80-120px，padding减少，圆角调整</li>
|
||
<li><strong>任务节点</strong>: 140px → 90-140px，更紧凑的设计</li>
|
||
<li><strong>决策节点</strong>: 100×100px → 60×60px，大幅缩小菱形尺寸</li>
|
||
<li><strong>连接点</strong>: 10px → 8px，更精致的连接点</li>
|
||
<li><strong>字体</strong>: 14px → 12px，更适合小尺寸节点</li>
|
||
<li><strong>阴影</strong>: 减少模糊范围，更清晰的视觉效果</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h3>🎯 优化效果</h3>
|
||
<ul>
|
||
<li>✅ 节点尺寸更合理，不会过分占用画布空间</li>
|
||
<li>✅ 决策节点从巨大的菱形变成合适的小菱形</li>
|
||
<li>✅ 保持了视觉层次和可读性</li>
|
||
<li>✅ 更适合复杂流程图的设计</li>
|
||
<li>✅ 连接点和字体大小匹配节点尺寸</li>
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
</html> |