aldehyde 0.2.333 → 0.2.334

package/src/aldehyde/layout4/css/header.css

@@ -0,0 +1,157 @@
+.v4-layout-header {
+  padding: 0;
+  color: #ffffff;
+  position: relative;
+  height: auto;
+  background: #001325;
+  margin-bottom: 12px;
+
+  .header-top {
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100%;
+    height: 3.75vw;
+    padding: 0 0.73vw;
+    background-color: #001325;
+    border: none;
+    display: flex;
+    justify-content: space-between;
+
+    .header-title {
+      font-family: YouSheBiaoTiHei;
+      font-size: 36px;
+      line-height: 3.75vw;
+      width: 21vw;
+      min-width: 268px;
+      height: 100%;
+      text-align: justify;
+      font-style: normal;
+      text-transform: none;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+
+      img {
+        height: 72%;
+        margin-right: 16px;
+      }
+    }
+
+    .header-right {
+      line-height: 3.75vw;
+      height: 95%;
+      width: 18vw;
+      min-width: 230px;
+      padding-right: 12px;
+      text-align: right;
+      overflow: hidden;
+
+      .ant-space {
+        height: 100%;
+      }
+
+      .message-bar {
+        min-width: 0;
+
+        svg {
+          color: var(--ant-color-primary);
+        }
+      }
+
+      .message-bar:hover {
+        background: transparent;
+      }
+
+      .header-user {
+        button .ant-btn-icon {
+          margin-top: 4px;
+        }
+
+        .userButton {
+          cursor: pointer;
+          width: 4vw;
+          min-width: 45px;
+        }
+      }
+    }
+  }
+
+  .header-nav {
+    display: flex;
+    justify-content: start;
+    width: 61vw;
+    min-width: 780px;
+    min-height: 50px;
+    padding-left: 1%;
+
+    .ant-menu-submenu-selected::after,
+    .ant-menu-submenu:hover::after,
+    .ant-menu-submenu-open::after,
+    .ant-menu-submenu::after {
+      border-bottom: none !important;
+    }
+
+    .menu-disabled {
+      cursor: not-allowed;
+    }
+
+    .menu-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: clamp(12px, 1.1vw, 100px);
+      font-family: YouSheBiaoTiHei;
+      color: #bec8d6;
+      padding: 0 1.5vw;
+      height: 3.28vw;
+      min-height: 42px;
+    }
+
+    .menu-icon {
+      font-size: clamp(10px, 0.9vw, 100px);
+      font-family: YouSheBiaoTiHei;
+      color: #bec8d6;
+    }
+
+    .ant-menu-overflow-item {
+      padding: 0;
+      position: relative;
+    }
+
+    .ant-menu-overflow-item:not(:nth-last-child(-n+2))::before {
+      position: absolute;
+      top: 0.3125vw;
+      right: 0;
+      width: 1px;
+      height: 2.55208vw;
+      min-height: 33px;
+      border-right: 0.10417vw solid;
+      border-width: max(1px, 0.10417vw);
+      border-image: linear-gradient(180deg, rgba(12, 14, 29, 0), #1e415e, #2a658c, #1c3c57, rgba(12, 14, 29, 0)) 2 2;
+      content: " ";
+    }
+
+    .menu-item-selected {
+      color: var(--ant-menu-item-selected-color);
+      background-size: 100% 100%;
+
+      .menu-icon {
+        color: var(--ant-menu-item-selected-color);
+      }
+    }
+
+    .anticon-ellipsis {
+      padding: 0 12px;
+    }
+
+    .ant-menu-overflow-item-rest {
+      height: 3.28vw;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

package/src/aldehyde/layout4/css/main.css

@@ -0,0 +1,119 @@
+.v4-main {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  min-width: 1280px;
+  overflow-x: auto;
+
+  .ant-layout {
+    background: var(--ant-layout-body-bg) !important;
+  }
+
+  .act-table-title {
+    font-family: YouSheBiaoTiHei;
+    background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 20px;
+  }
+
+  .ant-drawer,
+  .ant-modal-content {
+
+    .ant-card-head {
+      background: transparent !important;
+    }
+
+    .ant-layout {
+      background: #001325 !important;
+    }
+  }
+
+  .ant-menu-submenu-popup {
+    .menu-item-selected {
+      background: transparent !important;
+    }
+
+    .ant-menu-submenu-title a {
+      color: #bec8d6
+    }
+
+    .ant-menu-submenu-selected a {
+      color: var(--ant-primary-color)
+    }
+  }
+
+  .ant-table-tbody,
+  .ant-table-summary {
+    .ant-table-cell:has(.xiaoji) {
+      background-color: var(--color-5) !important;
+    }
+
+    .ant-table-cell:has(.heji) {
+      background-color: var(--color-8) !important;
+    }
+
+    .xiaoji {
+      background-color: var(--color-5) !important;
+    }
+
+    .heji {
+      background-color: var(--color-8) !important;
+    }
+  }
+}
+
+.v4-antd-table {
+  .ant-table-css-var {
+    --ant-table-border-color: #15325b;
+  }
+
+  .ant-table {
+    background: transparent;
+    scrollbar-color: var(--ant-table-header-bg) transparent;
+  }
+
+  .ant-table-tbody .ant-table-cell {
+    background: var(--ant-layout-body-bg) !important;
+  }
+}
+
+.v4-antd-drawer,
+.v4-antd-modal {
+  .ant-table-css-var {
+    --ant-table-border-color: #05449a;
+  }
+}
+
+.v4-antd-modal {
+  .ant-modal-content {
+    background: var(--ant-color-bg-base) !important;
+    border: 1px solid var(--ant-color-border-secondary) !important;
+  }
+
+  .ant-modal-header {
+    background: transparent;
+  }
+}
+
+.v4-antd-drawer {
+  background: var(--ant-color-bg-base) !important;
+  border: 2px solid var(--ant-color-border-secondary) !important;
+}
+
+.v4-antd-card {
+  background: transparent;
+
+  .ant-card-head {
+    background: var(--ant-color-bg-container) !important;
+  }
+
+  .ant-card-body {
+    background: transparent;
+  }
+}
+
+.v4-antd-card:hover {
+  border-color: var(--ant-color-border-secondary);
+}

package/src/aldehyde/layout4/css/sider.css

@@ -0,0 +1,11 @@
+.v4-layout-sider {
+    margin-bottom: 12px;
+    overflow: auto;
+    background: linear-gradient(180deg, rgba(7, 27, 67, 0.1) 0%, rgba(13, 46, 89, 0.2) 100%), radial-gradient(188% 188% at -139% 100%, rgba(39, 115, 255, 0.1) 0%, rgba(39, 115, 255, 0) 100%), radial-gradient(488% 488% at -439% 100%, rgba(39, 115, 255, 0.2) 0%, rgba(39, 115, 255, 0) 100%), radial-gradient(716% 716% at -667% 100%, rgba(39, 115, 255, 0.5) 0%, rgba(39, 115, 255, 0) 100%);
+    border: 1px solid #17375e;
+    box-shadow: inset 0 0 8px #17375e, inset 0 0 8px #17375e;
+
+    .ant-menu-item-selected {
+        background: linear-gradient(90deg, #88EFFF00, rgba(163, 194, 255, 0.2), #88EFFF00);
+    }
+}

package/src/aldehyde/layout4/css/tabs-layout.css

@@ -0,0 +1,43 @@
+.v4-tabs-layout {
+    height: 100%;
+
+    .ant-tabs-nav {
+        margin-bottom: 0;
+    }
+
+    .ant-tabs-tab {
+        min-width: 110px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .ant-tabs-content,
+    .ant-tabs-tabpane {
+        height: 100%;
+    }
+
+    .tabs-children {
+        height: 100%;
+        overflow: auto;
+        border: 1px solid #17375e;
+        box-shadow: inset 0 0 16px #17375e,
+            inset 0 0 16px #17375e;
+        padding: 8px 16px 16px;
+        border-top: 0;
+    }
+
+    /* 组件样式异常覆盖 */
+    .ant-card-head {
+        background: transparent !important;
+    }
+
+    .actTable {
+        .ant-card {
+            background: transparent;
+            box-shadow: inset 0 0 12px #17375e,
+                inset 0 0 12px #17375e;
+            border: none;
+        }
+    }
+}

package/src/aldehyde/layout4/header.tsx

@@ -0,0 +1,182 @@
+import { Layout, Menu, MenuProps, Space, theme } from "antd";
+import React, { useEffect, useState } from "react";
+import { NavLink, useParams, useSearchParams } from "react-router-dom";
+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 headerBgImg from "./imgs/header-bg.png";
+import homeImg from "./imgs/home.png";
+import menuItemBgImg from "./imgs/menu-item-bg.png";
+import userImg from "./imgs/user.png";
+import IconFont from "../layout2/components/icon-font";
+import "./css/header.css";
+
+// 查找当前选中菜单的顶层菜单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;
+}
+
+const { useToken } = theme;
+
+type HeaderPropsType = {
+  systemName: string;
+  menuList: MenuType[];
+  style?: any;
+};
+
+type MenuItem = Required<MenuProps>["items"][number];
+
+const Header: React.FC<HeaderPropsType> = ({ systemName, menuList }) => {
+  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 { token: { colorPrimary } } = useToken();
+
+  const renderMenuItem = (menuItem) => {
+    const { label, id, disabled, icon } = menuItem;
+    const renderIcon = icon ? <IconFont type={icon} className="menu-icon" /> : "";
+    return <div className={`menu-item ${disabled ? "menu-disabled" : ""} ${selParentId === id ? "menu-item-selected" : ""}`} style={{ backgroundImage: selParentId === id ? `url(${menuItemBgImg})` : undefined }}><Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space></div>;
+  }
+
+  const handleMenu = (menuItem, floor) => {
+    const { disabled, label, children, icon } = menuItem;
+    if (disabled) {
+      return renderMenuItem(menuItem);
+    }
+    const renderIcon = 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="v4-layout-header"  >
+      <div className="header-top" style={{ backgroundImage: `url(${headerBgImg})` }}>
+        <NavLink to="/v4/home" style={{ display: "contents" }}>
+          <div className="header-title"><img src={homeImg} alt="" />{translate("${" + systemName + "}")}</div>
+        </NavLink>
+        <div className="header-nav">
+          <Menu
+            mode="horizontal"
+            items={menu}
+            selectedKeys={selectedKeys}
+            style={{ background: "transparent", border: "none", width: "100%" }}
+          />
+        </div>
+        <div className="header-right" >
+          <Space size={28}>
+            <L2MenuQuickBar />
+            <L2MenuMessageBar />
+            <LocaleButton
+              shape="default"
+              size="large"
+              type="text"
+              style={{
+                width: "100%",
+                height: "100%",
+                boxSizing: "border-box",
+                padding: 0,
+                borderRadius: 0,
+                color: colorPrimary,
+                fontSize: "20px"
+              }}
+            />
+            <ThemeButton
+              shape="default"
+              size="large"
+              type="text"
+              style={{
+                width: "100%",
+                height: "100%",
+                boxSizing: "border-box",
+                padding: 0,
+                borderRadius: 0,
+                color: colorPrimary,
+                fontSize: "20px"
+              }}
+            />
+            <div className="header-user">
+              <UserButton logoutUrl="/login3" style={{ padding: 0, color: "#fff" }} customRender={<img src={userImg} alt="" className="userButton" />} />
+            </div>
+          </Space>
+        </div>
+      </div>
+    </Layout.Header>
+  );
+};
+
+export default Header;

package/src/aldehyde/layout4/imgs/user.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="75px" height="50px" viewBox="0 0 75 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 28@2x</title>
+    <defs>
+        <linearGradient x1="56.7868058%" y1="100%" x2="56.7868058%" y2="0%" id="linearGradient-1">
+            <stop stop-color="#90DCFE" offset="0%"></stop>
+            <stop stop-color="#141F34" offset="100%"></stop>
+        </linearGradient>
+        <radialGradient cx="50%" cy="30.3951181%" fx="50%" fy="30.3951181%" r="135.534427%" gradientTransform="translate(0.500000,0.303951),scale(0.171272,1.000000),rotate(90.000000),scale(1.000000,2.145743),translate(-0.500000,-0.303951)" id="radialGradient-2">
+            <stop stop-color="#ACF4F7" offset="0%"></stop>
+            <stop stop-color="#96EEF2" stop-opacity="0.600017604" offset="75.2832594%"></stop>
+            <stop stop-color="#74E5EB" stop-opacity="0" offset="100%"></stop>
+        </radialGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="2025-02-28-西安航天-导航" transform="translate(-1816.000000, -11.000000)">
+            <g id="编组-28" transform="translate(1816.900000, 11.000000)">
+                <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.586283366" x="0" y="0" width="74" height="46" rx="23"></rect>
+                <path d="M52,44.0516405 L52,46.0516405 L40.137,46.0516405 L37,49.1897883 L33.862,46.0516405 L22,46.0516405 L22,44.0516405 L52,44.0516405 Z" id="形状结合" fill="url(#radialGradient-2)" fill-rule="nonzero"></path>
+                <g id="账号中心-账号管理" transform="translate(22.939298, 9.939298)" fill="#FFFFFF" fill-rule="nonzero">
+                    <rect id="矩形" opacity="0" x="0" y="0" width="28.121403" height="28.121403"></rect>
+                    <path d="M14.6998318,15.2110976 C16.6171677,14.0607015 17.8954283,12.0155285 17.8954283,9.71468147 C17.8954283,6.13560131 14.9554784,3.19565143 11.3763982,3.19565143 C7.79731808,3.19565143 4.60169411,6.13557384 4.60169411,9.71465401 C4.60169411,12.0155011 5.87992722,14.0607015 7.79729061,15.211125 C4.34604749,16.4893581 1.91736339,19.8128191 1.91736339,23.7753555 C1.91736339,24.4144858 2.42865664,24.925779 3.06778692,24.925779 C3.70691721,24.925779 4.21821045,24.4144858 4.21821045,23.775383 C4.21821045,19.9406287 7.41383441,16.7450322 11.2485612,16.7450322 C15.2110976,16.7450322 18.278912,19.9406287 18.278912,23.775383 C18.278912,24.4144858 18.7902052,24.925779 19.429308,24.925779 C20.0684108,24.925779 20.579759,24.4144858 20.579759,23.775383 C20.579759,19.9406287 18.1510749,16.6171952 14.6998043,15.211125 L14.6998318,15.2110976 Z M11.2485612,14.0607015 C8.81990456,14.0607015 6.90251371,12.1433381 6.90251371,9.71465401 C6.90251371,7.28596991 8.81990456,5.36863398 11.2485612,5.36863398 C13.6772178,5.36863398 15.5946087,7.28599737 15.5946087,9.71465401 C15.5946087,12.1433106 13.6772178,14.0607015 11.2485612,14.0607015 Z M20.9632152,9.45900739 L25.1814257,9.45900739 C25.8205559,9.45900739 26.2040396,8.94771414 26.2040396,8.4364209 C26.2040396,7.79729061 25.6927464,7.41383441 25.1814257,7.41383441 L20.9632152,7.41383441 C20.3241124,7.41383441 19.9406287,7.92512766 19.9406287,8.4364209 C19.8128191,8.94771414 20.3241124,9.45900739 20.9632152,9.45900739 Z M25.1814257,11.3763982 L19.8128191,11.3763982 C19.1736889,11.3763982 18.7902052,11.8876915 18.7902052,12.3989847 C18.7902052,13.038115 19.3014984,13.4215712 19.8128191,13.4215712 L25.1814257,13.4215712 C25.8205559,13.4215712 26.2040396,12.910278 26.2040396,12.3989847 C26.2040396,11.8876915 25.6927464,11.3763982 25.1814257,11.3763982 Z M25.1814257,15.4667717 L20.9632152,15.4667717 C20.3241124,15.4667717 19.9406287,15.9780649 19.9406287,16.4893581 C19.9406287,17.1284884 20.451922,17.5119721 20.9632152,17.5119721 L25.1814257,17.5119721 C25.8205559,17.5119721 26.2040396,17.0006788 26.2040396,16.4893581 C26.2040396,15.9780374 25.6927464,15.4667717 25.1814257,15.4667717 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/aldehyde/layout4/main.tsx

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

package/src/aldehyde/layout4/page.tsx

@@ -0,0 +1,91 @@
+import { Layout, theme, ConfigProvider } from "antd";
+import React, { useEffect, useRef, useState } 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 } from "../hooks/use-tabs";
+import { getMenuConfig } from "../layout2/page";
+import "./css/main.css";
+
+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 pageRef = useRef<HTMLDivElement>(undefined); // page ref
+  //清空缓存
+  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', { defaultValue: [] });
+  const { documentTitle, updateMenuItemIdToFirstFloorIdxMap } = useLayoutContext();
+  const { getSiderCollapsed } = useLocale();
+  const { token: { colorPrimary } } = useToken();
+
+  useEffect(() => {
+    getMenuConfig("v4").then(({ menu, systemName: name }) => {
+      setSystemName(name);
+      setMenu(menu);
+      updateMenuItemIdToFirstFloorIdxMap(menu);
+    });
+    useVarCssColor(generate(colorPrimary));
+    localStorage.setItem("version", "v4");
+    window.addEventListener('beforeunload', () => { setKeepAliveTabs([]); });
+  }, []);
+
+  return (
+    <DocumentTitle title={documentTitle}>
+      <div
+        ref={pageRef}
+        className="v4-main"
+      >
+        <ConfigProvider
+          getPopupContainer={() => pageRef.current}
+          theme={{
+            algorithm: [theme.darkAlgorithm],
+            token: {
+              colorBgBase: "#001325",
+              colorBorderSecondary: "#17375e",
+            },
+            components: {
+              Tabs: {
+                cardPadding: "4px 12px"
+              }
+            }
+          }}
+          table={{ className: "v4-antd-table" }}
+          drawer={{ className: "v4-antd-drawer" }}
+          modal={{ className: "v4-antd-modal" }}
+          card={{ className: "v4-antd-card" }}
+        >
+          <Layout style={{ height: "100%" }}>
+            <Header systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
+            <Layout>
+              <Sider menuList={menu} collapsed={getSiderCollapsed()}></Sider>
+              <Main>{props.children}</Main>
+            </Layout>
+          </Layout>
+        </ConfigProvider>
+      </div>
+    </DocumentTitle >
+  );
+};
+
+const ContextPage: React.FC<PagePropsType> = (props: PagePropsType) => {
+  return (
+    <LayoutProvider>
+      <Page>{props.children}</Page>
+    </LayoutProvider>
+  );
+};
+
+export default ContextPage;