fix: catalog form meta data update

src/components/logs-viewer/index.tsx

@@ -24,7 +24,9 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     instance,
     initialized
   } = useOverlayScroller({
-    theme: 'os-theme-light'
+    options: {
+      theme: 'os-theme-light'
+    }
   });
   const { isClean, parseAnsi } = useParseAnsi();
   const { setChunkFetch } = useSetChunkFetch();

src/components/logs-viewer/logs-list.tsx

@@ -30,7 +30,9 @@ const LogsList: React.FC<LogsListProps> = forwardRef((props, ref) => {
     instance,
     initialized
   } = useOverlayScroller({
-    theme: 'os-theme-light'
+    options: {
+      theme: 'os-theme-light'
+    }
   });
   const viewportHeight = window.innerHeight;
   const viewHeight = viewportHeight - diffHeight;

src/config/global.d.ts

@@ -43,3 +43,7 @@ declare namespace Global {
 
   type SearchParams = Pagination & { search?: string };
 }
+
+interface Window {
+  __GPUSTACK_BODY_SCROLLER__?: any;
+}

src/hooks/use-body-scroll.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+
+export default function useBodyScroll() {
+  const scrollHeight = React.useRef(0);
+  const scrollerState = React.useRef<any>({});
+
+  const bodyScroller = React.useRef<any>(null);
+
+  const instanceRef = React.useRef<any>(null);
+
+  const int = () => {
+    bodyScroller.current =
+      window.__GPUSTACK_BODY_SCROLLER__?.elements()?.scrollEventElement;
+
+    instanceRef.current = window.__GPUSTACK_BODY_SCROLLER__;
+  };
+
+  const saveScrollHeight = React.useCallback(() => {
+    scrollerState.current = instanceRef.current?.state();
+
+    console.log('saveScrollHeight', scrollerState.current?.overflowAmount?.y);
+
+    const scrollTop = scrollerState.current?.overflowAmount?.y;
+    scrollHeight.current = scrollTop;
+    instanceRef.current?.options?.({
+      overflow: {
+        x: 'hidden',
+        y: 'visible'
+      }
+    });
+  }, []);
+
+  const restoreScrollHeight = React.useCallback(() => {
+    console.log('saveScrollHeight++++++++++', scrollHeight.current);
+
+    bodyScroller.current?.scrollTo?.({
+      top: scrollHeight.current,
+      behavior: 'smooth'
+    });
+
+    instanceRef.current?.options?.({
+      overflow: {
+        x: 'hidden',
+        y: 'scroll'
+      }
+    });
+
+    instanceRef.current?.update?.();
+  }, []);
+
+  React.useEffect(() => {
+    int();
+    return () => {
+      bodyScroller.current = null;
+      instanceRef.current = null;
+    };
+  }, []);
+
+  return { saveScrollHeight, restoreScrollHeight };
+}

src/hooks/use-overlay-scroller.ts

@@ -23,7 +23,12 @@ export const overlaySollerOptions: UseOverlayScrollbarsParams = {
   defer: true
 };
 
-export default function useOverlayScroller(options?: any) {
+export default function useOverlayScroller(data?: {
+  options?: any;
+  events?: any;
+  defer?: boolean;
+}) {
+  const { options, events, defer = true } = data || {};
   const scrollEventElement = React.useRef<any>(null);
   const instanceRef = React.useRef<any>(null);
   const initialized = React.useRef(false);
@@ -42,8 +47,10 @@ export default function useOverlayScroller(options?: any) {
         clickScroll: 'instant'
       }
     },
-
+    events: {
-    defer: true
+      ...events
+    },
+    defer: defer
   });
 
   instanceRef.current = instance?.();
@@ -99,7 +106,7 @@ export default function useOverlayScroller(options?: any) {
   const createInstance = React.useCallback(
     (el: any) => {
       if (instanceRef.current) {
-        return;
+        return instanceRef.current;
       }
       if (el) {
         initialize(el);
@@ -108,6 +115,7 @@ export default function useOverlayScroller(options?: any) {
         scrollEventElement.current =
           instanceRef.current?.elements()?.scrollEventElement;
       }
+      return instanceRef.current;
     },
     [initialize, instance]
   );

src/layouts/index.tsx

@@ -94,7 +94,9 @@ const mapRoutes = (routes: IRoute[], role: string) => {
 };
 
 export default (props: any) => {
-  const { initialize: initialize } = useOverlayScroller();
+  const { initialize: initialize } = useOverlayScroller({
+    defer: false
+  });
   const { initialize: initializeMenu } = useOverlayScroller();
   const [userInfo] = useAtom(userAtom);
   const [routeCache] = useAtom(routeCacheAtom);
@@ -209,7 +211,8 @@ export default (props: any) => {
   useEffect(() => {
     const body = document.querySelector('body');
     if (body) {
-      initialize(body);
+      const ins = initialize(body);
+      window.__GPUSTACK_BODY_SCROLLER__ = ins;
     }
   }, [initialize]);
 

src/locales/zh-CN/common.ts

@@ -210,7 +210,7 @@ export default {
   'common.text.new': '新',
   'common.text.changelog': '更新日志',
   'common.button.recreate': '重新创建',
-  'common.button.delrecreate': '删除(重建)',
+  'common.button.delrecreate': '删除（重建）',
   'common.options.all': '全部',
   'common.options.none': '无',
   'common.options.auto': '自动'

src/pages/llmodels/components/advance-config.tsx

@@ -44,6 +44,12 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
   const wokerSelector = Form.useWatch('worker_selector', form);
   const scheduleType = Form.useWatch('scheduleType', form);
   const backend = Form.useWatch('backend', form);
+  const backend_parameters = Form.useWatch('backend_parameters', form);
+  const categories = Form.useWatch('categories', form);
+  const backend_version = Form.useWatch('backend_version', form);
+  const placement_strategy = Form.useWatch('placement_strategy', form);
+  const gpuSelectorIds = Form.useWatch('gpu_selector.gpu_ids', form);
+  const worker_selector = Form.useWatch('worker_selector', form);
 
   const placementStrategyTips = [
     {
@@ -371,7 +377,13 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
     scheduleType,
     wokerSelector,
     backend,
-    isGGUF
+    backend_parameters,
+    isGGUF,
+    categories,
+    backend_version,
+    placement_strategy,
+    gpuSelectorIds,
+    worker_selector
   ]);
 
   return (

src/pages/llmodels/index.tsx

@@ -29,6 +29,7 @@ const Models: React.FC = () => {
     loading: false,
     total: 0
   });
+  const [pageHidden, setPageHidden] = useState(false);
   const [gpuDeviceList, setGpuDeviceList] = useState<GPUDeviceItem[]>([]);
   const [workerList, setWorkerList] = useState<WokerListItem[]>([]);
   const [firstLoad, setFirstLoad] = useState(true);
@@ -122,6 +123,10 @@ const Models: React.FC = () => {
 
   const updateInstanceHandler = (list: any) => {
     setModelInstances(list);
+    window.postMessage(
+      { type: 'modelInstance', data: list },
+      window.location.origin
+    );
   };
 
   const createModelsChunkRequest = useCallback(async () => {
@@ -242,6 +247,38 @@ const Models: React.FC = () => {
     };
   }, [fetchData, createModelsChunkRequest, createModelsInstanceChunkRequest]);
 
+  useEffect(() => {
+    const handleOnWindowMessage = (event: any) => {
+      const data = event.data;
+      console.log(
+        'event.origin=======',
+        event.origin !== window.location.origin ||
+          data.type !== 'modelInstance',
+        data,
+        event.origin,
+        window.location.origin
+      );
+
+      if (
+        event.origin !== window.location.origin ||
+        data.type !== 'modelInstance'
+      ) {
+        return;
+      }
+
+      if (document.visibilityState === 'hidden') {
+        console.log('isPageHidden=======', document.visibilityState, data.data);
+
+        setModelInstances(data.data);
+      }
+    };
+
+    window.addEventListener('message', handleOnWindowMessage);
+    return () => {
+      window.removeEventListener('message', handleOnWindowMessage);
+    };
+  }, []);
+
   return (
     <TableContext.Provider
       value={{