style(flow): 调整编辑器组件样式和布局

- 修改 IDE 容器溢出属性为 hidden
- 调整节点编辑模态框最大宽度和高度
- 优化参数表格输入框和选择器的最小及最大宽度
- 设置默认值输入框的宽度样式
- 限制删除按钮的最大宽度
master
钟良源 3 months ago
parent 330c0e661d
commit cfbe5be405

@ -76,6 +76,7 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
) : ( ) : (
<Input <Input
value={record.id} value={record.id}
autoWidth={{ minWidth: 50, maxWidth: 100 }}
onChange={(value) => handleSave({ ...record, id: value })} onChange={(value) => handleSave({ ...record, id: value })}
/> />
) )
@ -89,7 +90,7 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
<span>{record.dataType === 'INTEGER' ? '整数' : record.dataType}</span> <span>{record.dataType === 'INTEGER' ? '整数' : record.dataType}</span>
) : ( ) : (
<Select <Select
autoWidth={{ minWidth: 200, maxWidth: 500 }} autoWidth={{ minWidth: 150, maxWidth: 200 }}
options={dataTypeOptions} options={dataTypeOptions}
value={record.dataType} value={record.dataType}
onChange={(value) => handleSave({ ...record, dataType: value })} onChange={(value) => handleSave({ ...record, dataType: value })}
@ -104,14 +105,14 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
render: (_: any, record: TableDataItem) => ( render: (_: any, record: TableDataItem) => (
record.dataType === 'ARRAY' ? ( record.dataType === 'ARRAY' ? (
<Select <Select
autoWidth={{ minWidth: 200, maxWidth: 500 }} autoWidth={{ minWidth: 150, maxWidth: 200 }}
options={arrayTypeOptions} options={arrayTypeOptions}
value={record.arrayType} value={record.arrayType}
onChange={(value) => handleSave({ ...record, arrayType: value })} onChange={(value) => handleSave({ ...record, arrayType: value })}
placeholder="请选择数组类型" placeholder="请选择数组类型"
/> />
) : ( ) : (
<span></span> <div style={{ minWidth: 70, maxWidth: 100 }}>-</div>
) )
) )
}, },
@ -151,9 +152,10 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
allowClear allowClear
options={options} options={options}
style={{ width: '100%', minWidth: 100 }} style={{ width: '100%', minWidth: 100 }}
autoWidth={{ minWidth: 150, maxWidth: 200 }}
/> />
<Input <Input
style={{ width: '100%', minWidth: 100, marginTop: 10 }} style={{ width: '100%', minWidth: 150, maxWidth: 200, marginTop: 10 }}
value={record.defaultValue} value={record.defaultValue}
onChange={(value) => handleSave({ ...record, defaultValue: value })} onChange={(value) => handleSave({ ...record, defaultValue: value })}
placeholder="请输入默认值" placeholder="请输入默认值"
@ -166,6 +168,7 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
if (record.id === 'maxTime') { if (record.id === 'maxTime') {
return ( return (
<Input <Input
style={{ width: '100%', minWidth: 150, maxWidth: 200, marginTop: 10 }}
type="number" type="number"
min="1" min="1"
step="1" step="1"
@ -177,6 +180,7 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
return ( return (
<Input <Input
style={{ width: '100%', minWidth: 150, maxWidth: 200, marginTop: 10 }}
value={record.defaultValue} value={record.defaultValue}
onChange={(value) => handleSave({ ...record, defaultValue: value })} onChange={(value) => handleSave({ ...record, defaultValue: value })}
placeholder="请输入默认值" placeholder="请输入默认值"
@ -189,7 +193,8 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
title: '操作', title: '操作',
dataIndex: 'op', dataIndex: 'op',
render: (_: any, record: TableDataItem) => ( render: (_: any, record: TableDataItem) => (
record.id !== 'maxTime' && <Button onClick={() => removeRow(record.key)} type="text" status="danger"> record.id !== 'maxTime' &&
<Button onClick={() => removeRow(record.key)} type="text" status="danger" style={{ maxWidth: 40 }}>
<IconDelete /> <IconDelete />
</Button> </Button>
) )

@ -87,8 +87,8 @@ const NodeEditModal: React.FC<NodeEditModalProps> = ({
boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)', boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
minWidth: 300, minWidth: 300,
width: 'max-content', width: 'max-content',
maxWidth: '80vw', maxWidth: '80%',
height: '95%', height: '90%',
bottom: 0, bottom: 0,
borderRadius: 10 borderRadius: 10
}} }}

@ -23,7 +23,7 @@
flex-direction: column; flex-direction: column;
position: relative; position: relative;
flex: 1; flex: 1;
overflow: auto; overflow: hidden;
} }
} }

Loading…
Cancel
Save