🐛 fix(model-test-modal): keep Modal mounted to restore body overflow correctly
Previously the component unmounted the Modal as soon as `showModelTestModal` became false, preventing Semi UI from running its cleanup routine. This left `body` stuck with `overflow: hidden`, disabling page scroll after the dialog closed. Changes made – Removed the early `return null` and always keep the Modal mounted; visibility is now controlled solely via the `visible` prop. – Introduced a `hasChannel` guard to safely skip data processing/rendering when no channel is selected. – Added defensive checks for table data, footer and title to avoid undefined access when the Modal is hidden. This fix ensures that closing the test-model dialog correctly restores the page’s scroll behaviour on both desktop and mobile.
This commit is contained in:
@@ -139,7 +139,6 @@ const CardPro = ({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -440,7 +440,7 @@ const SiderBar = ({ onNavigate = () => { } }) => {
|
|||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
onClick={toggleCollapsed}
|
onClick={toggleCollapsed}
|
||||||
iconOnly={collapsed}
|
icononly={collapsed}
|
||||||
style={collapsed ? { padding: '4px', width: '100%' } : { padding: '4px 12px', width: '100%' }}
|
style={collapsed ? { padding: '4px', width: '100%' } : { padding: '4px 12px', width: '100%' }}
|
||||||
>
|
>
|
||||||
{!collapsed ? t('收起侧边栏') : null}
|
{!collapsed ? t('收起侧边栏') : null}
|
||||||
|
|||||||
@@ -49,15 +49,15 @@ const ModelTestModal = ({
|
|||||||
isMobile,
|
isMobile,
|
||||||
t
|
t
|
||||||
}) => {
|
}) => {
|
||||||
if (!showModelTestModal || !currentTestChannel) {
|
const hasChannel = Boolean(currentTestChannel);
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const filteredModels = currentTestChannel.models
|
const filteredModels = hasChannel
|
||||||
.split(',')
|
? currentTestChannel.models
|
||||||
.filter((model) =>
|
.split(',')
|
||||||
model.toLowerCase().includes(modelSearchKeyword.toLowerCase())
|
.filter((model) =>
|
||||||
);
|
model.toLowerCase().includes(modelSearchKeyword.toLowerCase())
|
||||||
|
)
|
||||||
|
: [];
|
||||||
|
|
||||||
const handleCopySelected = () => {
|
const handleCopySelected = () => {
|
||||||
if (selectedModelKeys.length === 0) {
|
if (selectedModelKeys.length === 0) {
|
||||||
@@ -158,6 +158,7 @@ const ModelTestModal = ({
|
|||||||
];
|
];
|
||||||
|
|
||||||
const dataSource = (() => {
|
const dataSource = (() => {
|
||||||
|
if (!hasChannel) return [];
|
||||||
const start = (modelTablePage - 1) * MODEL_TABLE_PAGE_SIZE;
|
const start = (modelTablePage - 1) * MODEL_TABLE_PAGE_SIZE;
|
||||||
const end = start + MODEL_TABLE_PAGE_SIZE;
|
const end = start + MODEL_TABLE_PAGE_SIZE;
|
||||||
return filteredModels.slice(start, end).map((model) => ({
|
return filteredModels.slice(start, end).map((model) => ({
|
||||||
@@ -168,7 +169,7 @@ const ModelTestModal = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
title={
|
title={hasChannel ? (
|
||||||
<div className="flex flex-col gap-2 w-full">
|
<div className="flex flex-col gap-2 w-full">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Typography.Text strong className="!text-[var(--semi-color-text-0)] !text-base">
|
<Typography.Text strong className="!text-[var(--semi-color-text-0)] !text-base">
|
||||||
@@ -179,10 +180,10 @@ const ModelTestModal = ({
|
|||||||
</Typography.Text>
|
</Typography.Text>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
) : null}
|
||||||
visible={showModelTestModal}
|
visible={showModelTestModal}
|
||||||
onCancel={handleCloseModal}
|
onCancel={handleCloseModal}
|
||||||
footer={
|
footer={hasChannel ? (
|
||||||
<div className="flex justify-end">
|
<div className="flex justify-end">
|
||||||
{isBatchTesting ? (
|
{isBatchTesting ? (
|
||||||
<Button
|
<Button
|
||||||
@@ -210,12 +211,12 @@ const ModelTestModal = ({
|
|||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
}
|
) : null}
|
||||||
maskClosable={!isBatchTesting}
|
maskClosable={!isBatchTesting}
|
||||||
className="!rounded-lg"
|
className="!rounded-lg"
|
||||||
size={isMobile ? 'full-width' : 'large'}
|
size={isMobile ? 'full-width' : 'large'}
|
||||||
>
|
>
|
||||||
<div className="model-test-scroll">
|
{hasChannel && (<div className="model-test-scroll">
|
||||||
{/* 搜索与操作按钮 */}
|
{/* 搜索与操作按钮 */}
|
||||||
<div className="flex items-center justify-end gap-2 w-full mb-2">
|
<div className="flex items-center justify-end gap-2 w-full mb-2">
|
||||||
<Input
|
<Input
|
||||||
@@ -267,7 +268,7 @@ const ModelTestModal = ({
|
|||||||
onPageChange: (page) => setModelTablePage(page),
|
onPageChange: (page) => setModelTablePage(page),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>)}
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user