Kestra 执行输入模态框高度优化方案

问题背景

在使用Kestra工作流编排工具时，当执行包含大型JSON等长文本输入的流程时，执行输入模态框会出现高度超出视口的问题。这会导致用户界面显示不完整，影响操作体验。

问题分析

该问题主要出现在InputsForm.vue组件中，当处理JSON类型输入时尤为明显。由于JSON数据可能包含大量内容，而当前模态框采用自适应高度策略，导致以下问题：

1. 模态框高度随内容无限扩展
2. 超出视口部分无法正常显示
3. 用户需要手动调整浏览器窗口才能查看完整内容

解决方案

针对这一问题，可以采用以下优化措施：

1. 固定高度设置：为模态框设置合理的固定高度（如视口宽度的40%）
2. 滚动条机制：为输入字段添加overflow: scroll样式
3. 响应式设计：确保在不同屏幕尺寸下都能保持良好的显示效果

技术实现要点

1. CSS样式调整：

.modal-content {
  max-height: 40vh;
  overflow-y: auto;
}

2. Vue组件优化：

• 在InputsForm组件中为JSON输入区域添加滚动条
• 确保模态框主体高度受限但内容可滚动

3. 用户体验考虑：

• 保留足够的可视区域
• 确保滚动操作流畅
• 不影响其他输入类型的显示

实际效果

优化后的模态框将：

• 保持一致的显示高度
• 通过滚动条查看长内容
• 避免界面元素被推出视口
• 提升整体操作体验

总结

通过对Kestra执行输入模态框的高度优化，解决了大型输入内容导致的界面显示问题。这种解决方案不仅适用于JSON输入，也为其他可能的长文本输入类型提供了良好的显示基础，是提升Kestra用户体验的重要改进之一。