NetLab v1.0.3 UI优化6轮迭代：从配色到布局的精调之路

UI优化不是一次性完成的工作，而是多轮迭代、逐步逼近理想状态的过程。NetLab v1.0.3经历了6轮UI优化，从配色方案到布局精调，每一轮都有明确的目标和取舍。本文记录完整的迭代过程。

第一轮：配色体系建立

初始UI缺乏统一的配色体系，按钮全是默认蓝色。第一轮确立了视觉基调：Logo分两行显示，使用华为红#CF0A2C；6个顶部按钮各自分配语义化颜色——新建蓝、删除青、启动绿、停止橙、清空灰、帮助紫；设备类别8色分类，CLI底部行改为白色提升可读性。

第二轮：连线与设备配色调整

第一轮配色上线后，部分颜色辨识度不够。第二轮将"连线"标签改为"设备连线"，颜色从默认改为靛蓝#5b6dcf；防火墙从红色改为棕褐#cd853f（避免与删除按钮的红色混淆）；终端设备从橙色改为暗金#d4ac0d。核心原则：同类元素颜色不能冲突。

第三轮：删除按钮与Logo统一

删除按钮的红色与防火墙红色仍然容易混淆，改为青色#1abc9c。Logo文字统一使用华为红。按钮添加min-width统一约束，避免不同按钮宽度不一致。

第四、五轮：布局与文字调整

第四轮将综合实验标题字体调大以增强层次感（后续又缩回11px，因为太大反而破坏布局）。第五轮是关键布局调整：顶部按钮统一height:28px和flex布局；"综合实验"改名为"综合网络实验"；实验设备与设备属性面板移到同一行，节省垂直空间。

第六轮：细节收尾

最后一轮是收尾性微调：实验按钮去掉bold、字体统一11px，让按钮区域视觉更轻盈；btnPropPanel的样式从内联提取到CSS类，提升代码可维护性；web版同步所有样式变更。