diff --git a/src/pages/backends/components/add-modal.tsx b/src/pages/backends/components/add-modal.tsx index 514ac977..096d907e 100644 --- a/src/pages/backends/components/add-modal.tsx +++ b/src/pages/backends/components/add-modal.tsx @@ -29,8 +29,7 @@ const SegmentedInner = styled(Segmented)` `; const SegmentedHeader = styled.div` - margin-top: 16px; - padding: 0 24px; + padding: 16px 24px; `; interface AddModalProps { @@ -198,6 +197,11 @@ const AddModal: React.FC = (props) => { ` position: sticky; - top: 0; + top: ${(props) => props.$top || 0}px; z-index: 10; - margin-bottom: 16px; + padding-bottom: 16px; + background-color: var(--ant-color-bg-elevated); `; interface DataFormProps { @@ -67,6 +74,7 @@ const DataForm: React.FC = forwardRef((props, ref) => { action, isGGUF, formKey, + source, initialValues, sourceDisable = true, sourceList, @@ -112,6 +120,25 @@ const DataForm: React.FC = forwardRef((props, ref) => { segmentOptions }); + const SegmentedTop = useMemo(() => { + if ( + [ + modelSourceMap.huggingface_value, + modelSourceMap.modelscope_value + ].includes(source) && + formKey === deployFormKeyMap.deployment + ) { + return { + top: 50, + offsetTop: 146 + }; + } + return { + top: 0, + offsetTop: 96 + }; + }, [source, formKey]); + const handleSumit = () => { form.submit(); }; @@ -230,7 +257,7 @@ const DataForm: React.FC = forwardRef((props, ref) => { const handleTargetChange = async (val: any) => { setTarget(val); - await scrollToSegment(val, { offsetTop: 96 }); + await scrollToSegment(val, { offsetTop: SegmentedTop.offsetTop }); }; useImperativeHandle(ref, () => { @@ -275,7 +302,7 @@ const DataForm: React.FC = forwardRef((props, ref) => { onBackendChange: handleBackendChange }} > - +