fix: expand rows in models after operating

src/components/seal-table/components/table-row.tsx

@@ -44,8 +44,6 @@ const TableRow: React.FC<
     allSubChildren?: any[];
   }>(TableContext);
   const { setChunkRequest } = useSetChunkRequest();
-  const [expanded, setExpanded] = useState(false);
-  // const [checked, setChecked] = useState(false);
   const [childrenData, setChildrenData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [firstLoad, setFirstLoad] = useState(true);
@@ -73,6 +71,10 @@ const TableRow: React.FC<
     };
   }, []);
 
+  const expanded = useMemo(() => {
+    return expandedRowKeys?.includes(record[rowKey]);
+  }, [expandedRowKeys]);
+
   const checked = useMemo(() => {
     return rowSelection?.selectedRowKeys?.includes(record[rowKey]);
   }, [rowSelection?.selectedRowKeys, record, rowKey]);
@@ -160,7 +162,6 @@ const TableRow: React.FC<
   };
 
   const handleRowExpand = async () => {
-    setExpanded(!expanded);
     onExpand?.(!expanded, record, record[rowKey]);
 
     if (pollTimer.current) {
@@ -200,14 +201,6 @@ const TableRow: React.FC<
     }
   };
 
-  useEffect(() => {
-    if (expandedRowKeys?.includes(record[rowKey])) {
-      setExpanded(true);
-    } else {
-      setExpanded(false);
-    }
-  }, [expandedRowKeys]);
-
   useEffect(() => {
     const handleVisibilityChange = async () => {
       if (document.visibilityState === 'hidden') {

src/layouts/index.tsx

@@ -206,7 +206,11 @@ export default (props: any) => {
       updateCheck.latest_version?.indexOf('0.0.0') === -1 &&
       updateCheck.latest_version?.indexOf('rc') === -1
     );
-  }, [updateCheck, version, initialState]);
+  }, [
+    updateCheck.latest_version,
+    version.version,
+    initialState?.currentUser?.is_admin
+  ]);
 
   useEffect(() => {
     const body = document.querySelector('body');
@@ -279,9 +283,107 @@ export default (props: any) => {
 
       return dom;
     },
-    [intl, version, updateCheck]
+    [intl, showUpgrade]
   );
 
+  const itemRender = useCallback((route, _, routes) => {
+    const { breadcrumbName, title, path } = route;
+    const label = title || breadcrumbName;
+    const last = routes[routes.length - 1];
+    if (last) {
+      if (last.path === path || last.linkPath === path) {
+        return <span>{label}</span>;
+      }
+    }
+    return <Link to={path}>{label}</Link>;
+  }, []);
+
+  const menuItemRender = useCallback(
+    (menuItemProps, defaultDom) => {
+      if (menuItemProps.isUrl || menuItemProps.children) {
+        return defaultDom;
+      }
+      if (menuItemProps.path && location.pathname !== menuItemProps.path) {
+        return (
+          <Link
+            to={menuItemProps.path.replace('/*', '')}
+            target={menuItemProps.target}
+          >
+            {defaultDom}
+          </Link>
+        );
+      }
+      return <>{defaultDom}</>;
+    },
+    [location.pathname]
+  );
+
+  const onPageChange = useCallback(
+    (route) => {
+      const { location } = history;
+      const { pathname } = location;
+
+      initRouteCacheValue(pathname);
+      dropRouteCache(pathname);
+
+      // if user is not change password, redirect to change password page
+      if (
+        location.pathname !== loginPath &&
+        userInfo?.require_password_change
+      ) {
+        history.push(loginPath);
+        return;
+      }
+
+      // if user is not logged in, redirect to login page
+      if (!initialState?.currentUser && location.pathname !== loginPath) {
+        history.push(loginPath);
+      } else if (location.pathname === '/') {
+        const pathname = initialState?.currentUser?.is_admin
+          ? '/dashboard'
+          : '/playground';
+        history.push(pathname);
+      }
+    },
+    [userInfo?.require_password_change, initialState?.currentUser]
+  );
+
+  useEffect(() => {
+    // 先清除旧的性能标记
+    performance.clearMarks();
+    performance.clearMeasures();
+
+    // 记录开始时间
+    performance.mark('route-start');
+
+    requestAnimationFrame(() => {
+      // 记录结束时间
+      performance.mark('route-end');
+
+      // 确保 `route-start` 存在后再测量
+      if (performance.getEntriesByName('route-start').length > 0) {
+        performance.measure('route-change', 'route-start', 'route-end');
+
+        const measure = performance.getEntriesByName('route-change')[0];
+        console.log(
+          `[Performance] Route change to ${location.pathname} took ${measure.duration.toFixed(2)}ms`
+        );
+
+        // 清理标记
+        performance.clearMarks();
+        performance.clearMeasures();
+      } else {
+        console.warn('Missing performance mark: route-start');
+      }
+    });
+  }, [location.pathname]);
+
+  const onRenderCallback = (id, phase, actualDuration) => {
+    console.log(
+      `[Profiler] Route: ${id} - Phase: ${phase} - Render time: ${actualDuration.toFixed(2)}ms`
+    );
+  };
+
   return (
     <div>
       <div className="background"></div>
@@ -311,65 +413,14 @@ export default (props: any) => {
         }}
         menuHeaderRender={renderMenuHeader}
         collapsed={collapsed}
-        onPageChange={(route) => {
-          const { location } = history;
-          const { pathname } = location;
-
-          initRouteCacheValue(pathname);
-          dropRouteCache(pathname);
-
-          // if user is not change password, redirect to change password page
-          if (
-            location.pathname !== loginPath &&
-            userInfo?.require_password_change
-          ) {
-            history.push(loginPath);
-
-            return;
-          }
-
-          // if user is not logged in, redirect to login page
-          if (!initialState?.currentUser && location.pathname !== loginPath) {
-            history.push(loginPath);
-          } else if (location.pathname === '/') {
-            const pathname = initialState?.currentUser?.is_admin
-              ? '/dashboard'
-              : '/playground';
-            history.push(pathname);
-          }
-        }}
+        onPageChange={onPageChange}
         formatMessage={formatMessage}
         menu={{
           locale: true
         }}
         logo={collapsed ? SLogoIcon : LogoIcon}
-        menuItemRender={(menuItemProps, defaultDom) => {
-          if (menuItemProps.isUrl || menuItemProps.children) {
-            return defaultDom;
-          }
-          if (menuItemProps.path && location.pathname !== menuItemProps.path) {
-            return (
-              <Link
-                to={menuItemProps.path.replace('/*', '')}
-                target={menuItemProps.target}
-              >
-                {defaultDom}
-              </Link>
-            );
-          }
-          return <>{defaultDom}</>;
-        }}
-        itemRender={(route, _, routes) => {
-          const { breadcrumbName, title, path } = route;
-          const label = title || breadcrumbName;
-          const last = routes[routes.length - 1];
-          if (last) {
-            if (last.path === path || last.linkPath === path) {
-              return <span>{label}</span>;
-            }
-          }
-          return <Link to={path}>{label}</Link>;
-        }}
+        menuItemRender={menuItemRender}
+        itemRender={itemRender}
         disableContentMargin
         fixSiderbar
         fixedHeader

src/pages/llmodels/components/table-list.tsx

@@ -600,7 +600,6 @@ const Models: React.FC<ModelsProps> = ({
 
   const handleEdit = async (row: ListItem) => {
     const initialValues = generateFormValues(row, gpuDeviceList.current);
-    console.log('initialValues:', initialValues, row);
     setUpdateFormInitials({
       gpuOptions: gpuDeviceList.current,
       data: initialValues,
@@ -818,7 +817,7 @@ const Models: React.FC<ModelsProps> = ({
         )
       }
     ];
-  }, [sortOrder, intl]);
+  }, [sortOrder, intl, handleSelect]);
 
   const handleOnClick = async () => {
     if (isLoading) {

src/pages/playground/components/ground-embedding.tsx

@@ -22,7 +22,6 @@ import 'overlayscrollbars/overlayscrollbars.css';
 import { Resizable } from 're-resizable';
 import {
   forwardRef,
-  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -728,4 +727,4 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 });
 
-export default memo(GroundEmbedding);
+export default GroundEmbedding;

src/pages/playground/components/ground-images.tsx

@@ -12,7 +12,6 @@ import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
 import React, {
   forwardRef,
-  memo,
   useCallback,
   useImperativeHandle,
   useMemo,
@@ -183,8 +182,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
 
       form.current?.form?.setFieldValue('seed', params.seed);
       console.log('params:', params, parameters);
-      submitMessage(params);
       setRouteCache(routeCachekey['/playground/text-to-image'], true);
+      await submitMessage(params);
     } catch (error) {
       // console.log('error:', error);
     } finally {
@@ -193,9 +192,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
   };
 
-  const handleCloseViewCode = () => {
+  const handleCloseViewCode = useCallback(() => {
     setShow(false);
-  };
+  }, []);
 
   return (
     <div className="ground-left-wrapper">
@@ -343,4 +342,4 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 });
 
-export default memo(GroundImages);
+export default GroundImages;

src/pages/playground/components/ground-left.tsx

@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import 'overlayscrollbars/overlayscrollbars.css';
 import {
   forwardRef,
-  memo,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -211,4 +210,4 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 });
 
-export default memo(GroundLeft);
+export default GroundLeft;

src/pages/playground/components/ground-reranker.tsx

@@ -16,7 +16,6 @@ import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
 import {
   forwardRef,
-  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -610,4 +609,4 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 });
 
-export default memo(GroundReranker);
+export default GroundReranker;

src/pages/playground/components/ground-stt.tsx

@@ -16,7 +16,6 @@ import classNames from 'classnames';
 import 'overlayscrollbars/overlayscrollbars.css';
 import {
   forwardRef,
-  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -37,11 +36,10 @@ import ViewCommonCode from './view-common-code';
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
-  loaded?: boolean;
   ref?: any;
 }
 
-const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
+const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
   const intl = useIntl();
   const { modelList } = props;
   const messageId = useRef<number>(0);
@@ -474,4 +472,4 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 });
 
-export default memo(GroundLeft);
+export default GroundSTT;

src/pages/playground/components/ground-tts.tsx

@@ -13,7 +13,6 @@ import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
 import {
   forwardRef,
-  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -37,7 +36,7 @@ interface MessageProps {
   ref?: any;
 }
 
-const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
+const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
   const { modelList } = props;
   const messageId = useRef<number>(0);
   const [messageList, setMessageList] = useState<
@@ -423,4 +422,4 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 });
 
-export default memo(GroundLeft);
+export default GroundTTS;