aldehyde 0.2.488 → 0.2.490

package/src/aldehyde/layout3/header.tsx

@@ -1,187 +1,187 @@
-import { Layout, Menu, MenuProps, Space } from "antd";
-import React, { useEffect, useState, CSSProperties } from "react";
-import { NavLink, useParams, useSearchParams } from "react-router-dom";
-import { HomeFilled } from '@ant-design/icons';
-import L2MenuQuickBar from "../layout/menu/l2menu-quick-bar";
-import L2MenuMessageBar from "../layout/menu/l2menu-message-bar";
-// import LocaleButton from "../locale/LocaleButton";
-// import ThemeButton from "../layout2/components/theme-button";
-import { getLeftMostRouteInfo, handlePropsMenuToAntdMenu } from "../layout2/util/menu-util";
-import { MenuType } from "../layout2/type/layout-type";
-import { useLocale } from "../locale/useLocale";
-import { useLayoutContext } from "../layout2/layout-context";
-import UserButton from "../layout2/components/user-button";
-import SearchMenu from "../layout2/components/search-menu";
-import ScreenfullButton from "../layout2/components/screenfull-button";
-import SystemMessages from "../layout2/components/system-messages";
-import UserNotification from "../layout2/components/user-notification";
-import headerBgImg from "./imgs/header-bg.png";
-import homeBgImg from "./imgs/home-bg.png";
-import Time from "./components/time";
-import IconFont from "../layout2/components/icon-font";
-import { ThemeConfig } from "../tmpl/interface";
-import "./css/header.less";
-
-const toolbarStyle: CSSProperties = {
-  width: "100%",
-  height: "100%",
-  boxSizing: "border-box",
-  padding: 0,
-  borderRadius: 0,
-  minWidth: 0,
-  color: "#009BFF",
-};
-
-// 查找当前选中菜单的顶层菜单id
-const findPathToRoot = (menus, targetId) => {
-  // 使用栈来存储需要遍历的节点及其从根节点到该节点的路径
-  const stack = [];
-  // 初始化栈：将每个根节点及其路径（初始只包含自身ID）入栈
-  for (const node of menus) {
-    stack.push({ node, path: [node.id] });
-  }
-  while (stack.length > 0) {
-    const { node, path } = stack.pop(); // 弹出栈顶元素
-    // 检查当前节点是否是目标节点
-    if (node.id === targetId) {
-      return path[0]; // 返回路径的第一个元素，即最顶层根节点ID
-    }
-    // 如果当前节点有子节点，则将它们全部入栈，并记录从根到该子节点的路径
-    if (node.children && node.children.length > 0) {
-      for (const child of node.children) {
-        stack.push({ node: child, path: [...path, child.id] }); // 将子节点和新的路径入栈
-      }
-    }
-  }
-  return null;
-}
-
-type HeaderPropsType = {
-  systemName: string;
-  menuList: MenuType[];
-  style?: any;
-  themeConfig?: ThemeConfig;
-  customHome?: string;
-};
-
-type MenuItem = Required<MenuProps>["items"][number];
-
-const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, themeConfig, customHome }) => {
-  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
-  const { translate, getLocale } = useLocale();
-  const [menu, setMenu] = useState<MenuItem[]>([]);
-  const [selectedKeys, setSelectedKeys] = useState([]);
-  const [selParentId, setSelParentId] = useState<string>();
-  const { sourceId } = useParams();
-  const [search] = useSearchParams();
-  const menuId: string = search.get("menuId");
-
-  const renderMenuItem = (menuItem) => {
-    const { label, id, disabled, icon } = menuItem;
-    const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} /> : "";
-    return <div className={`menu-item ${disabled ? "menu-disabled" : ""}`}><div className={selParentId === id ? "menu-item-border-sel" : "menu-item-border"}><Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space></div></div>;
-  }
-
-  const handleMenu = (menuItem, floor) => {
-    const { disabled, label, children, icon } = menuItem;
-    if (disabled) {
-      return renderMenuItem(menuItem);
-    }
-    const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} /> : "";
-    const { path, target } = getLeftMostRouteInfo(menuItem);
-    if (floor === 0) {
-      return path === null ? (
-        renderMenuItem(menuItem)
-      ) : (
-        <NavLink
-          to={`/${path}`}
-          target={target}
-        >
-          {renderMenuItem(menuItem)}
-        </NavLink>
-      );
-    }
-    if (Array.isArray(children) && !children.length) {
-      return (
-        <NavLink to={`/${path}`} target={target} >
-          <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
-        </NavLink>
-      );
-    }
-    return renderMenuItem(menuItem);
-  };
-
-  useEffect(() => {
-    if (menuId !== undefined) setSelectedKeys([menuId]);
-  }, [menuId]);
-
-  useEffect(() => {
-    if (menuList.length && selParentId) {
-      setMenu(handlePropsMenuToAntdMenu(menuList, handleMenu));
-    }
-  }, [menuList, getLocale(), selParentId]);
-
-  useEffect(() => {
-    if (sourceId === undefined) {
-      if (menuList[0] !== undefined) {
-        setSelectedKeys([menuList[0].id]);
-        setSelParentId(menuList[0].id);
-      }
-      setDocumentTitle("");
-    } else if (menuList.length) {
-      const documentTitle =
-        menuList[menuItemIdToFirstFloorIdxMap[sourceId]]?.label;
-      setDocumentTitle(translate("${" + documentTitle + "}"));
-      setSelectedKeys([sourceId]);
-      setSelParentId(findPathToRoot(menuList, sourceId));
-    }
-  }, [menuList, sourceId]);
-
-  return (
-    <Layout.Header className="layout-header"  >
-      <div className="header-top" style={{ backgroundImage: `url(${headerBgImg})` }}>
-        <div className="header-time"><Time /></div>
-        <div className="header-title">{translate("${" + systemName + "}")}</div>
-        <div className="header-right" >
-          {themeConfig?.wsTypes?.includes("sys-messages") ? <SystemMessages menuList={menuList} /> : ""}
-          {themeConfig?.wsTypes?.includes("user-notification") ? <UserNotification menuList={menuList} /> : ""}
-          <Space size="large" >
-            <ScreenfullButton style={toolbarStyle} />
-            <SearchMenu menuList={menuList} style={toolbarStyle} />
-            <L2MenuQuickBar style={{ color: "#009BFF" }} />
-            <L2MenuMessageBar version="v3" style={{ color: "#009BFF" }} />
-            {/* <LocaleButton
-              shape="default"
-              size="large"
-              type="link"
-              style={toolbarStyle}
-            />
-            <ThemeButton
-              shape="default"
-              size="large"
-              type="link"
-              style={toolbarStyle}
-            /> */}
-            <div className="header-user"><UserButton themeConfig={themeConfig} layoutRootPath="v3" logoutUrl="/login3" style={{ padding: 0, color: "#fff" }} /></div>
-          </Space>
-        </div>
-      </div>
-      <div className="header-nav">
-        <NavLink to={customHome || "/v3/home"} className="header-home-page" style={{ backgroundImage: `url(${homeBgImg})` }}>
-          <HomeFilled className="home-page-icon" />
-          <div className="home-page-title">{translate("${首页}")}</div>
-        </NavLink>
-        <div className="header-menu">
-          <Menu
-            mode="horizontal"
-            items={menu}
-            selectedKeys={selectedKeys}
-            style={{ background: "#041B3B", border: "none" }}
-          />
-        </div>
-      </div>
-    </Layout.Header>
-  );
-};
-
-export default Header;
+import { Layout, Menu, MenuProps, Space } from "antd";
+import React, { useEffect, useState, CSSProperties } from "react";
+import { NavLink, useParams, useSearchParams } from "react-router-dom";
+import { HomeFilled } from '@ant-design/icons';
+import L2MenuQuickBar from "../layout/menu/l2menu-quick-bar";
+import L2MenuMessageBar from "../layout/menu/l2menu-message-bar";
+// import LocaleButton from "../locale/LocaleButton";
+// import ThemeButton from "../layout2/components/theme-button";
+import { getLeftMostRouteInfo, handlePropsMenuToAntdMenu } from "../layout2/util/menu-util";
+import { MenuType } from "../layout2/type/layout-type";
+import { useLocale } from "../locale/useLocale";
+import { useLayoutContext } from "../layout2/layout-context";
+import UserButton from "../layout2/components/user-button";
+import SearchMenu from "../layout2/components/search-menu";
+import ScreenfullButton from "../layout2/components/screenfull-button";
+import SystemMessages from "../layout2/components/system-messages";
+import UserNotification from "../layout2/components/user-notification";
+import headerBgImg from "./imgs/header-bg.png";
+import homeBgImg from "./imgs/home-bg.png";
+import Time from "./components/time";
+import IconFont from "../layout2/components/icon-font";
+import { ThemeConfig } from "../tmpl/interface";
+import "./css/header.less";
+
+const toolbarStyle: CSSProperties = {
+  width: "100%",
+  height: "100%",
+  boxSizing: "border-box",
+  padding: 0,
+  borderRadius: 0,
+  minWidth: 0,
+  color: "#009BFF",
+};
+
+// 查找当前选中菜单的顶层菜单id
+const findPathToRoot = (menus, targetId) => {
+  // 使用栈来存储需要遍历的节点及其从根节点到该节点的路径
+  const stack = [];
+  // 初始化栈：将每个根节点及其路径（初始只包含自身ID）入栈
+  for (const node of menus) {
+    stack.push({ node, path: [node.id] });
+  }
+  while (stack.length > 0) {
+    const { node, path } = stack.pop(); // 弹出栈顶元素
+    // 检查当前节点是否是目标节点
+    if (node.id === targetId) {
+      return path[0]; // 返回路径的第一个元素，即最顶层根节点ID
+    }
+    // 如果当前节点有子节点，则将它们全部入栈，并记录从根到该子节点的路径
+    if (node.children && node.children.length > 0) {
+      for (const child of node.children) {
+        stack.push({ node: child, path: [...path, child.id] }); // 将子节点和新的路径入栈
+      }
+    }
+  }
+  return null;
+}
+
+type HeaderPropsType = {
+  systemName: string;
+  menuList: MenuType[];
+  style?: any;
+  themeConfig?: ThemeConfig;
+  customHome?: string;
+};
+
+type MenuItem = Required<MenuProps>["items"][number];
+
+const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, themeConfig, customHome }) => {
+  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
+  const { translate, getLocale } = useLocale();
+  const [menu, setMenu] = useState<MenuItem[]>([]);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [selParentId, setSelParentId] = useState<string>();
+  const { sourceId } = useParams();
+  const [search] = useSearchParams();
+  const menuId: string = search.get("menuId");
+
+  const renderMenuItem = (menuItem) => {
+    const { label, id, disabled, icon } = menuItem;
+    const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} /> : "";
+    return <div className={`menu-item ${disabled ? "menu-disabled" : ""}`}><div className={selParentId === id ? "menu-item-border-sel" : "menu-item-border"}><Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space></div></div>;
+  }
+
+  const handleMenu = (menuItem, floor) => {
+    const { disabled, label, children, icon } = menuItem;
+    if (disabled) {
+      return renderMenuItem(menuItem);
+    }
+    const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} /> : "";
+    const { path, target } = getLeftMostRouteInfo(menuItem);
+    if (floor === 0) {
+      return path === null ? (
+        renderMenuItem(menuItem)
+      ) : (
+        <NavLink
+          to={`/${path}`}
+          target={target}
+        >
+          {renderMenuItem(menuItem)}
+        </NavLink>
+      );
+    }
+    if (Array.isArray(children) && !children.length) {
+      return (
+        <NavLink to={`/${path}`} target={target} >
+          <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
+        </NavLink>
+      );
+    }
+    return renderMenuItem(menuItem);
+  };
+
+  useEffect(() => {
+    if (menuId !== undefined) setSelectedKeys([menuId]);
+  }, [menuId]);
+
+  useEffect(() => {
+    if (menuList.length && selParentId) {
+      setMenu(handlePropsMenuToAntdMenu(menuList, handleMenu));
+    }
+  }, [menuList, getLocale(), selParentId]);
+
+  useEffect(() => {
+    if (sourceId === undefined) {
+      if (menuList[0] !== undefined) {
+        setSelectedKeys([menuList[0].id]);
+        setSelParentId(menuList[0].id);
+      }
+      setDocumentTitle("");
+    } else if (menuList.length) {
+      const documentTitle =
+        menuList[menuItemIdToFirstFloorIdxMap[sourceId]]?.label;
+      setDocumentTitle(translate("${" + documentTitle + "}"));
+      setSelectedKeys([sourceId]);
+      setSelParentId(findPathToRoot(menuList, sourceId));
+    }
+  }, [menuList, sourceId]);
+
+  return (
+    <Layout.Header className="layout-header"  >
+      <div className="header-top" style={{ backgroundImage: `url(${headerBgImg})` }}>
+        <div className="header-time"><Time /></div>
+        <div className="header-title">{translate("${" + systemName + "}")}</div>
+        <div className="header-right" >
+          {themeConfig?.wsTypes?.includes("sys-messages") ? <SystemMessages menuList={menuList} /> : ""}
+          {themeConfig?.wsTypes?.includes("user-notification") ? <UserNotification menuList={menuList} /> : ""}
+          <Space size="large" >
+            <ScreenfullButton style={toolbarStyle} />
+            <SearchMenu menuList={menuList} style={toolbarStyle} />
+            <L2MenuQuickBar style={{ color: "#009BFF" }} />
+            <L2MenuMessageBar version="v3" style={{ color: "#009BFF" }} />
+            {/* <LocaleButton
+              shape="default"
+              size="large"
+              type="link"
+              style={toolbarStyle}
+            />
+            <ThemeButton
+              shape="default"
+              size="large"
+              type="link"
+              style={toolbarStyle}
+            /> */}
+            <div className="header-user"><UserButton themeConfig={themeConfig} layoutRootPath="v3" logoutUrl="/login3" style={{ padding: 0, color: "#fff" }} /></div>
+          </Space>
+        </div>
+      </div>
+      <div className="header-nav">
+        <NavLink to={customHome || "/v3/home"} className="header-home-page" style={{ backgroundImage: `url(${homeBgImg})` }}>
+          <HomeFilled className="home-page-icon" />
+          <div className="home-page-title">{translate("${首页}")}</div>
+        </NavLink>
+        <div className="header-menu">
+          <Menu
+            mode="horizontal"
+            items={menu}
+            selectedKeys={selectedKeys}
+            style={{ background: "#041B3B", border: "none" }}
+          />
+        </div>
+      </div>
+    </Layout.Header>
+  );
+};
+
+export default Header;

package/src/aldehyde/layout3/main.tsx

@@ -1,29 +1,29 @@
-import React from "react";
-import { Layout } from "antd";
-import TabsLayout from "./components/tabs-layout";
-import { MenuType } from "../layout2/type/layout-type";
-
-type MainPropsType = {
-  style?: any;
-  children?: React.ReactNode;
-  menuList?: MenuType[];
-};
-
-const Main: React.FC<MainPropsType> = ({ style, children, menuList }) => {
-  return (
-    <Layout.Content style={{ overflow: "auto", ...style }}>
-      <div
-        style={{
-          width: "100%",
-          height: "100%",
-          overflow: "auto",
-          padding: "0 12px 12px 12px",
-        }}
-      >
-        {children ? children : <TabsLayout menuList={menuList} />}
-      </div>
-    </Layout.Content>
-  );
-};
-
-export default Main;
+import React from "react";
+import { Layout } from "antd";
+import TabsLayout from "./components/tabs-layout";
+import { MenuType } from "../layout2/type/layout-type";
+
+type MainPropsType = {
+  style?: any;
+  children?: React.ReactNode;
+  menuList?: MenuType[];
+};
+
+const Main: React.FC<MainPropsType> = ({ style, children, menuList }) => {
+  return (
+    <Layout.Content style={{ overflow: "auto", ...style }}>
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          overflow: "auto",
+          padding: "0 12px 12px 12px",
+        }}
+      >
+        {children ? children : <TabsLayout menuList={menuList} />}
+      </div>
+    </Layout.Content>
+  );
+};
+
+export default Main;

package/src/aldehyde/layout3/page.tsx

@@ -1,110 +1,110 @@
-import { Layout, theme, ConfigProvider } from "antd";
-import React, { useEffect, useRef, useState, useMemo } from "react";
-import DocumentTitle from "react-document-title";
-import { useSessionStorageState } from "ahooks";
-import { generate } from "@ant-design/colors";
-import Header from "./header";
-import Sider from "./sider";
-import Main from "./main";
-import { useVarCssColor } from "../hooks/useVarCssColor";
-import { LayoutProvider, useLayoutContext } from "../layout2/layout-context";
-import { MenuType } from "../layout2/type/layout-type";
-import Units from '../units';
-import { useLocale } from "../locale/useLocale";
-import { KeepAliveTab, useTabs } from "../hooks/use-tabs";
-import { getMenuConfig, routeNavigationThemeHome } from "../layout2/page";
-import { ThemeConfig } from "../tmpl/interface";
-import { useLocation, useNavigate, NavigateFunction } from "react-router-dom";
-import { KeepAliveTabContext } from '../layout2/tabs/tabs-context';
-import "./css/main.less";
-
-const { useToken } = theme;
-
-type PagePropsType = {
-  children?: React.ReactNode;
-};
-
-const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
-  const [systemName, setSystemName] = useState("");
-  const [menu, setMenu] = useState<MenuType[]>([]);
-  const [customHome, setCustomHome] = useState<string>(); // 自定义首页菜单
-  const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
-  const pageRef = useRef<HTMLDivElement>(undefined); // page ref
-  //清空缓存
-  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', { defaultValue: [] });
-  const { documentTitle, updateMenuItemIdToFirstFloorIdxMap } = useLayoutContext();
-  const { getSiderCollapsed, compactTheme } = useLocale();
-  const { token: { colorPrimary } } = useToken();
-  const { pathname } = useLocation();
-  const navigate = useNavigate();
-  const { closeTab, tabs, refreshTab, closeOtherTab, setTabs, activeTabRoutePath } = useTabs();
-
-  const getThemeConfigAndMenuConfig = async () => {
-    const tConfig = await Units.getThemeConfig();
-    const menuConfig = await getMenuConfig("v3");
-    setSystemName(tConfig?.programName || menuConfig?.systemName);
-    setMenu(menuConfig?.menu);
-    updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
-    setThemeConfig(tConfig);
-    const temCustomHome = routeNavigationThemeHome(tConfig, menuConfig?.menu, pathname, navigate, closeTab, "v3");
-    setCustomHome(temCustomHome);
-  };
-
-  useEffect(() => {
-    getThemeConfigAndMenuConfig();
-    useVarCssColor(generate(colorPrimary));
-    localStorage.setItem("version", "v3");
-    window.addEventListener('beforeunload', () => { setKeepAliveTabs([]); });
-  }, []);
-
-  const keepAliveContextValue = useMemo(
-    () => ({ closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath }),
-    [closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath]
-  );
-
-  return (
-    <DocumentTitle title={documentTitle || ""}>
-      <div
-        ref={pageRef}
-        className="v3-main"
-      >
-        <ConfigProvider
-          getPopupContainer={() => pageRef.current}
-          theme={{
-            algorithm: compactTheme ? [theme.darkAlgorithm, theme.compactAlgorithm] : [theme.darkAlgorithm],
-            token: { colorBgBase: "#041B3B" },
-            components: {
-              Tabs: {
-                cardPadding: "4px 12px"
-              }
-            }
-          }}
-          table={{ className: "v3-antd-table" }}
-          drawer={{ className: "v3-antd-drawer" }}
-          modal={{ className: "v3-antd-modal" }}
-          card={{ className: "v3-antd-card" }}
-        >
-          <KeepAliveTabContext.Provider value={keepAliveContextValue}>
-            <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
-              <Header themeConfig={themeConfig} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu} customHome={customHome} />
-              <Layout>
-                <Sider themeConfig={themeConfig} menuList={menu} collapsed={getSiderCollapsed()}></Sider>
-                <Main menuList={menu} >{props.children}</Main>
-              </Layout>
-            </Layout>
-          </KeepAliveTabContext.Provider>
-        </ConfigProvider>
-      </div>
-    </DocumentTitle>
-  );
-};
-
-const ContextPage: React.FC<PagePropsType> = (props: PagePropsType) => {
-  return (
-    <LayoutProvider>
-      <Page>{props.children}</Page>
-    </LayoutProvider>
-  );
-};
-
-export default ContextPage;
+import { Layout, theme, ConfigProvider } from "antd";
+import React, { useEffect, useRef, useState, useMemo } from "react";
+import DocumentTitle from "react-document-title";
+import { useSessionStorageState } from "ahooks";
+import { generate } from "@ant-design/colors";
+import Header from "./header";
+import Sider from "./sider";
+import Main from "./main";
+import { useVarCssColor } from "../hooks/useVarCssColor";
+import { LayoutProvider, useLayoutContext } from "../layout2/layout-context";
+import { MenuType } from "../layout2/type/layout-type";
+import Units from '../units';
+import { useLocale } from "../locale/useLocale";
+import { KeepAliveTab, useTabs } from "../hooks/use-tabs";
+import { getMenuConfig, routeNavigationThemeHome } from "../layout2/page";
+import { ThemeConfig } from "../tmpl/interface";
+import { useLocation, useNavigate, NavigateFunction } from "react-router-dom";
+import { KeepAliveTabContext } from '../layout2/tabs/tabs-context';
+import "./css/main.less";
+
+const { useToken } = theme;
+
+type PagePropsType = {
+  children?: React.ReactNode;
+};
+
+const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
+  const [systemName, setSystemName] = useState("");
+  const [menu, setMenu] = useState<MenuType[]>([]);
+  const [customHome, setCustomHome] = useState<string>(); // 自定义首页菜单
+  const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
+  const pageRef = useRef<HTMLDivElement>(undefined); // page ref
+  //清空缓存
+  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', { defaultValue: [] });
+  const { documentTitle, updateMenuItemIdToFirstFloorIdxMap } = useLayoutContext();
+  const { getSiderCollapsed, compactTheme } = useLocale();
+  const { token: { colorPrimary } } = useToken();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const { closeTab, tabs, refreshTab, closeOtherTab, setTabs, activeTabRoutePath } = useTabs();
+
+  const getThemeConfigAndMenuConfig = async () => {
+    const tConfig = await Units.getThemeConfig();
+    const menuConfig = await getMenuConfig("v3");
+    setSystemName(tConfig?.programName || menuConfig?.systemName);
+    setMenu(menuConfig?.menu);
+    updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
+    setThemeConfig(tConfig);
+    const temCustomHome = routeNavigationThemeHome(tConfig, menuConfig?.menu, pathname, navigate, closeTab, "v3");
+    setCustomHome(temCustomHome);
+  };
+
+  useEffect(() => {
+    getThemeConfigAndMenuConfig();
+    useVarCssColor(generate(colorPrimary));
+    localStorage.setItem("version", "v3");
+    window.addEventListener('beforeunload', () => { setKeepAliveTabs([]); });
+  }, []);
+
+  const keepAliveContextValue = useMemo(
+    () => ({ closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath }),
+    [closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath]
+  );
+
+  return (
+    <DocumentTitle title={documentTitle || ""}>
+      <div
+        ref={pageRef}
+        className="v3-main"
+      >
+        <ConfigProvider
+          getPopupContainer={() => pageRef.current}
+          theme={{
+            algorithm: compactTheme ? [theme.darkAlgorithm, theme.compactAlgorithm] : [theme.darkAlgorithm],
+            token: { colorBgBase: "#041B3B" },
+            components: {
+              Tabs: {
+                cardPadding: "4px 12px"
+              }
+            }
+          }}
+          table={{ className: "v3-antd-table" }}
+          drawer={{ className: "v3-antd-drawer" }}
+          modal={{ className: "v3-antd-modal" }}
+          card={{ className: "v3-antd-card" }}
+        >
+          <KeepAliveTabContext.Provider value={keepAliveContextValue}>
+            <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
+              <Header themeConfig={themeConfig} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu} customHome={customHome} />
+              <Layout>
+                <Sider themeConfig={themeConfig} menuList={menu} collapsed={getSiderCollapsed()}></Sider>
+                <Main menuList={menu} >{props.children}</Main>
+              </Layout>
+            </Layout>
+          </KeepAliveTabContext.Provider>
+        </ConfigProvider>
+      </div>
+    </DocumentTitle>
+  );
+};
+
+const ContextPage: React.FC<PagePropsType> = (props: PagePropsType) => {
+  return (
+    <LayoutProvider>
+      <Page>{props.children}</Page>
+    </LayoutProvider>
+  );
+};
+
+export default ContextPage;