From f3bcf570f44ad4a81a7b172f8c4531cd7c8d0153 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sat, 19 Jul 2025 11:34:34 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(model-test-modal):=20keep=20?=
 =?UTF-8?q?Modal=20mounted=20to=20restore=20body=20overflow=20correctly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 web/src/components/common/ui/CardPro.js       |  1 -
 web/src/components/layout/SiderBar.js         |  2 +-
 .../table/channels/modals/ModelTestModal.jsx  | 29 ++++++++++---------
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/web/src/components/common/ui/CardPro.js b/web/src/components/common/ui/CardPro.js
index 2c8f7d30..fc57cd53 100644
--- a/web/src/components/common/ui/CardPro.js
+++ b/web/src/components/common/ui/CardPro.js
@@ -139,7 +139,6 @@ const CardPro = ({
             </div>
           )}
         </div>
-
       </div>
     );
   };
diff --git a/web/src/components/layout/SiderBar.js b/web/src/components/layout/SiderBar.js
index 714e556e..c7f7df31 100644
--- a/web/src/components/layout/SiderBar.js
+++ b/web/src/components/layout/SiderBar.js
@@ -440,7 +440,7 @@ const SiderBar = ({ onNavigate = () => { } }) => {
             />
           }
           onClick={toggleCollapsed}
-          iconOnly={collapsed}
+          icononly={collapsed}
           style={collapsed ? { padding: '4px', width: '100%' } : { padding: '4px 12px', width: '100%' }}
         >
           {!collapsed ? t('收起侧边栏') : null}
diff --git a/web/src/components/table/channels/modals/ModelTestModal.jsx b/web/src/components/table/channels/modals/ModelTestModal.jsx
index b59e9ab6..1d159473 100644
--- a/web/src/components/table/channels/modals/ModelTestModal.jsx
+++ b/web/src/components/table/channels/modals/ModelTestModal.jsx
@@ -49,15 +49,15 @@ const ModelTestModal = ({
   isMobile,
   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 = () => {
     if (selectedModelKeys.length === 0) {
@@ -158,6 +158,7 @@ const ModelTestModal = ({
   ];
 
   const dataSource = (() => {
+    if (!hasChannel) return [];
     const start = (modelTablePage - 1) * MODEL_TABLE_PAGE_SIZE;
     const end = start + MODEL_TABLE_PAGE_SIZE;
     return filteredModels.slice(start, end).map((model) => ({
@@ -168,7 +169,7 @@ const ModelTestModal = ({
 
   return (
     <Modal
-      title={
+      title={hasChannel ? (
         <div className="flex flex-col gap-2 w-full">
           <div className="flex items-center gap-2">
             <Typography.Text strong className="!text-[var(--semi-color-text-0)] !text-base">
@@ -179,10 +180,10 @@ const ModelTestModal = ({
             </Typography.Text>
           </div>
         </div>
-      }
+      ) : null}
       visible={showModelTestModal}
       onCancel={handleCloseModal}
-      footer={
+      footer={hasChannel ? (
         <div className="flex justify-end">
           {isBatchTesting ? (
             <Button
@@ -210,12 +211,12 @@ const ModelTestModal = ({
             )}
           </Button>
         </div>
-      }
+      ) : null}
       maskClosable={!isBatchTesting}
       className="!rounded-lg"
       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">
           <Input
@@ -267,7 +268,7 @@ const ModelTestModal = ({
             onPageChange: (page) => setModelTablePage(page),
           }}
         />
-      </div>
+      </div>)}
     </Modal>
   );
 };