Просмотр исходного кода

🐛 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.
t0ng7u 7 месяцев назад
Родитель
Сommit
f3bcf570f4

+ 0 - 1
web/src/components/common/ui/CardPro.js

@@ -139,7 +139,6 @@ const CardPro = ({
             </div>
             </div>
           )}
           )}
         </div>
         </div>
-
       </div>
       </div>
     );
     );
   };
   };

+ 1 - 1
web/src/components/layout/SiderBar.js

@@ -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}

+ 15 - 14
web/src/components/table/channels/modals/ModelTestModal.jsx

@@ -49,15 +49,15 @@ const ModelTestModal = ({
   isMobile,
   isMobile,
   t
   t
 }) => {
 }) => {
-  if (!showModelTestModal || !currentTestChannel) {
-    return null;
-  }
+  const hasChannel = Boolean(currentTestChannel);
 
 
-  const filteredModels = currentTestChannel.models
-    .split(',')
-    .filter((model) =>
-      model.toLowerCase().includes(modelSearchKeyword.toLowerCase())
-    );
+  const filteredModels = hasChannel
+    ? currentTestChannel.models
+      .split(',')
+      .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>
   );
   );
 };
 };