@oceanbase/ui 0.2.11 → 0.2.13

package/lib/BasicLayout/index.js

@@ -45,8 +45,9 @@ var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
 var import_util2 = require("../_util");
 var import_useHistory = __toESM(require("../_util/useHistory"));
 var import_Header = __toESM(require("./Header"));
-var import_index = require("./index.less");
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_style = __toESM(require("./style"));
+var import_index = require("./index.less");
 var { Content, Sider } = import_design2.Layout;
 var { SubMenu, Item } = import_design2.Menu;
 var prefix = (0, import_util2.getPrefix)("layout");
@@ -65,9 +66,14 @@ var BasicLayout = ({
   sideHeader,
   subSideMenuProps,
   subSideMenus,
+  prefixCls: customizePrefixCls,
   className,
   ...restProps
 }) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_design2.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("basic-layout", customizePrefixCls);
+  const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
+  const basicLayoutCls = (0, import_classnames.default)(className, hashId);
   const history = (0, import_useHistory.default)();
   const [collapsed, setCollapsed] = (0, import_react.useState)(defaultCollapsed);
   const [selectedKeys, setSelectedKeys] = (0, import_react.useState)(defaultSelectedKeys);
@@ -235,110 +241,112 @@ var BasicLayout = ({
   } else if (!subSideMenus && !menus) {
     siderWidth = 0;
   }
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, banner && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-banner-wrapper` }, banner), /* @__PURE__ */ import_react.default.createElement(
-    import_design2.Layout,
-    {
-      className: (0, import_classnames.default)(prefix, className, {
-        [`${prefix}-with-banner`]: banner
-      }),
-      ...restProps
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-      import_Header.default,
-      {
-        pathname,
-        iconUrl,
-        logoUrl,
-        simpleLogoUrl,
-        ...topHeader
-      }
-    ), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+  return wrapSSR(
+    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, banner && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-banner-wrapper` }, banner), /* @__PURE__ */ import_react.default.createElement(
       import_design2.Layout,
       {
-        className: `${prefix}-content-layout`,
-        style: {
-          marginTop: 48
-        }
+        className: (0, import_classnames.default)(prefix, className, basicLayoutCls, {
+          [`${prefix}-with-banner`]: banner
+        }),
+        ...restProps
       },
-      (subSideMenus || menus) && /* @__PURE__ */ import_react.default.createElement(
-        Sider,
+      /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+        import_Header.default,
+        {
+          pathname,
+          iconUrl,
+          logoUrl,
+          simpleLogoUrl,
+          ...topHeader
+        }
+      ), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+        import_design2.Layout,
         {
-          theme: "light",
-          width: siderWidth,
-          className: (0, import_classnames.default)(`${prefix}-sider`, {
-            [`${prefix}-sider-collapsed`]: collapsed,
-            [`${prefix}-sider-has-sub-sider`]: subSideMenus
-          })
+          className: `${prefix}-content-layout`,
+          style: {
+            marginTop: 48
+          }
         },
-        /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-wrapper` }, subSideMenus && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sub-sider` }, /* @__PURE__ */ import_react.default.createElement(
-          import_design2.Menu,
+        (subSideMenus || menus) && /* @__PURE__ */ import_react.default.createElement(
+          Sider,
           {
-            ...subSideMenuProps,
-            mode: "vertical",
-            className: `${prefix}-menu-vertical`
+            theme: "light",
+            width: siderWidth,
+            className: (0, import_classnames.default)(`${prefix}-sider`, {
+              [`${prefix}-sider-collapsed`]: collapsed,
+              [`${prefix}-sider-has-sub-sider`]: subSideMenus
+            })
           },
-          renderCollapsedMenu(subSideMenus, true)
-        )), (sideHeader || menus) && /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            style: {
-              display: "flex",
-              width: "100%"
-            }
-          },
-          /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-content` }, sideHeader && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-header` }, sideHeader), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-menu-wrapper` }, collapsed ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-menu-collapsed` }, /* @__PURE__ */ import_react.default.createElement(
+          /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-wrapper` }, subSideMenus && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sub-sider` }, /* @__PURE__ */ import_react.default.createElement(
             import_design2.Menu,
             {
-              ...menuProps,
+              ...subSideMenuProps,
               mode: "vertical",
               className: `${prefix}-menu-vertical`
             },
-            renderCollapsedMenu(menus, false)
-          )) : /* @__PURE__ */ import_react.default.createElement(
-            import_design2.Menu,
-            {
-              ...menuProps,
-              mode: "inline",
-              expandIcon: ({ isOpen }) => {
-                return /* @__PURE__ */ import_react.default.createElement(
-                  import_icons.CaretRightFilled,
-                  {
-                    rotate: isOpen ? 90 : 0,
-                    style: {
-                      fontSize: 12
-                    }
-                  }
-                );
-              },
-              className: `${prefix}-menu`
-            },
-            renderMenu(menus)
-          ))),
-          /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-border` }, /* @__PURE__ */ import_react.default.createElement(
+            renderCollapsedMenu(subSideMenus, true)
+          )), (sideHeader || menus) && /* @__PURE__ */ import_react.default.createElement(
             "div",
             {
-              className: `${prefix}-sider-collapse`,
-              onClick: () => {
-                setCollapsed(!collapsed);
-                setOpenKeys([]);
+              style: {
+                display: "flex",
+                width: "100%"
               }
             },
-            collapsed ? /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null)
+            /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-content` }, sideHeader && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-header` }, sideHeader), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-menu-wrapper` }, collapsed ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-menu-collapsed` }, /* @__PURE__ */ import_react.default.createElement(
+              import_design2.Menu,
+              {
+                ...menuProps,
+                mode: "vertical",
+                className: `${prefix}-menu-vertical`
+              },
+              renderCollapsedMenu(menus, false)
+            )) : /* @__PURE__ */ import_react.default.createElement(
+              import_design2.Menu,
+              {
+                ...menuProps,
+                mode: "inline",
+                expandIcon: ({ isOpen }) => {
+                  return /* @__PURE__ */ import_react.default.createElement(
+                    import_icons.CaretRightFilled,
+                    {
+                      rotate: isOpen ? 90 : 0,
+                      style: {
+                        fontSize: 12
+                      }
+                    }
+                  );
+                },
+                className: `${prefix}-menu`
+              },
+              renderMenu(menus)
+            ))),
+            /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-border` }, /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                className: `${prefix}-sider-collapse`,
+                onClick: () => {
+                  setCollapsed(!collapsed);
+                  setOpenKeys([]);
+                }
+              },
+              collapsed ? /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null)
+            ))
           ))
-        ))
-      ),
-      /* @__PURE__ */ import_react.default.createElement(
-        Content,
-        {
-          className: (0, import_classnames.default)(`${prefix}-content`, `${prefix}-content-${siderWidth}`),
-          style: {
-            marginLeft: siderWidth
-          }
-        },
-        children
-      )
-    )))
-  ));
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          Content,
+          {
+            className: (0, import_classnames.default)(`${prefix}-content`, `${prefix}-content-${siderWidth}`),
+            style: {
+              marginLeft: siderWidth
+            }
+          },
+          children
+        )
+      )))
+    ))
+  );
 };
 var BasicLayout_default = (0, import_LocaleWrapper.default)({
   componentName: "BasicLayout",

package/lib/BasicLayout/index.less

@@ -371,10 +371,6 @@
   }
 }
 
-.@{prefixCls}-pro-footer-bar {
-  width: calc(100% - 192px - 24px);
-}
-
 @media (min-width: @maxWidth) {
   .@{prefixCls}-pro-footer-bar {
     right: calc((100% - @maxWidth) / 2 + 24px);

package/lib/BasicLayout/style/index.d.ts

@@ -0,0 +1,5 @@
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+export declare type BasicLayoutToken = FullToken<any>;
+export declare const genBasicLayoutStyle: GenerateStyle<BasicLayoutToken>;
+declare const _default: (prefixCls: string) => any;
+export default _default;

package/lib/BasicLayout/style/index.js

@@ -0,0 +1,49 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/BasicLayout/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genBasicLayoutStyle: () => genBasicLayoutStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genBasicLayoutStyle = (token) => {
+  const { proComponentsCls } = token;
+  return {
+    // Set style of PageContainer in BasicLayout
+    [`${proComponentsCls}-page-container`]: {
+      // 48px is the height of BasicLayout header
+      minHeight: "calc(100vh - 48px)"
+    },
+    [`${proComponentsCls}-footer-bar`]: {
+      width: `calc(100% - 192px - 24px)`
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("BasicLayout", (token) => {
+    return [genBasicLayoutStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genBasicLayoutStyle
+});

package/lib/Highlight/index.d.ts

@@ -29,7 +29,7 @@ export declare const THEME_DARK = "dark";
 export declare const THEME_LIGHT = "light";
 declare const ThemeTypes: ["dark", "light"];
 export declare type ThemeType = (typeof ThemeTypes)[number];
-declare const supportedLanguages: ("ruby" | "javascript" | "typescript" | "css" | "groovy" | "java" | "python" | "bash" | "json" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
+declare const supportedLanguages: ("ruby" | "json" | "javascript" | "typescript" | "css" | "groovy" | "java" | "python" | "bash" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
 export declare type LanguageType = (typeof supportedLanguages)[number] | 'html';
 export interface HighlightProps extends LocaleWrapperProps {
     /**

package/lib/Highlight/index.js

@@ -231,7 +231,6 @@ var Highlight = (props) => {
       "table",
       {
         style: {
-          padding: "0",
           height
         },
         className: (0, import_classnames.default)(

package/lib/Lottie/index.d.ts

@@ -1,10 +1,15 @@
-import type { AnimationConfig } from 'lottie-web';
+import type { AnimationConfig, AnimationItem } from 'lottie-web';
 import React from 'react';
-interface LottieProps extends Omit<AnimationConfig, 'container'> {
+export interface LottieProps extends Omit<AnimationConfig, 'container'> {
     path: string;
+    mode?: 'default' | 'icon';
+    loop?: boolean;
     speed?: number;
-    mode?: 'normal' | 'icon';
+    className?: string;
     style?: React.CSSProperties;
 }
-declare const Lottie: React.FC<LottieProps>;
+export interface LottieRef {
+    animation: AnimationItem;
+}
+declare const Lottie: React.ForwardRefExoticComponent<LottieProps & React.RefAttributes<LottieRef>>;
 export default Lottie;

package/lib/Lottie/index.js

@@ -32,31 +32,48 @@ __export(Lottie_exports, {
   default: () => Lottie_default
 });
 module.exports = __toCommonJS(Lottie_exports);
-var import_classnames = __toESM(require("classnames"));
 var import_lottie_web = __toESM(require("lottie-web"));
 var import_react = __toESM(require("react"));
-var Lottie = ({ mode, speed = 1, style, ...restProps }) => {
-  const ref = (0, import_react.useRef)();
-  (0, import_react.useEffect)(() => {
-    const animation = import_lottie_web.default.loadAnimation({
-      container: ref.current,
-      renderer: "svg",
-      loop: false,
-      autoplay: true,
-      ...restProps
-    });
-    animation.setSpeed(speed);
-  }, []);
-  return /* @__PURE__ */ import_react.default.createElement(
-    "span",
-    {
-      ref,
-      className: (0, import_classnames.default)("ob-lottie", {
-        // 图标展示模式，则追加 anticon 类名，这样可共享相关样式
-        ["anticon"]: mode === "icon"
-      }),
-      style
-    }
-  );
-};
+var import_ahooks = require("ahooks");
+var import_classnames = __toESM(require("classnames"));
+var Lottie = import_react.default.forwardRef(
+  ({ mode = "default", loop = true, speed = 1, className, style, ...restProps }, ref) => {
+    const [animation, setAnimation] = (0, import_react.useState)();
+    const containerRef = (0, import_react.useRef)();
+    (0, import_react.useEffect)(() => {
+      if (!animation) {
+        const newAnimation = import_lottie_web.default.loadAnimation({
+          container: containerRef.current,
+          renderer: "svg",
+          loop,
+          ...restProps
+        });
+        setAnimation(newAnimation);
+      }
+    }, []);
+    (0, import_ahooks.useUpdateEffect)(() => {
+      if (animation) {
+        animation.setLoop(loop);
+        animation.setSpeed(speed);
+      }
+    }, [loop, speed]);
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      animation
+    }));
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: containerRef,
+        className: (0, import_classnames.default)(className, {
+          // 图标展示模式，则追加 anticon 类名
+          ["anticon"]: mode === "icon"
+        }),
+        style: {
+          display: "inline-block",
+          ...style
+        }
+      }
+    );
+  }
+);
 var Lottie_default = Lottie;

package/lib/NavMenu/index.js

@@ -50,20 +50,29 @@ var NavMenu_default = (props) => {
   const preProcess = (0, import_react.useCallback)(
     (list) => {
       const { pathname } = location;
-      for (let i = 0; i < list.length; i++) {
-        const { link, openNewTab, href, key, children } = list[i];
-        const linkList = (0, import_lodash.isArray)(link) ? link : [link];
-        const match = linkList.some((lk) => (0, import_path_to_regexp.pathToRegexp)(lk).test(pathname));
-        if (match) {
-          if (openNewTab || href)
-            return false;
-          setSelectedKeys([key]);
-          setMenus(list);
-          return;
-        }
-        if (!!(children == null ? void 0 : children.length)) {
-          preProcess(children);
+      try {
+        for (let i = 0; i < list.length; i++) {
+          const { link, openNewTab, href, key, children } = list[i];
+          const linkList = (0, import_lodash.isArray)(link) ? link : [link];
+          const match = linkList.some(
+            (lk) => (
+              // pathToRegexp 不支持 http/https 协议解析，需要去掉协议头
+              (0, import_path_to_regexp.pathToRegexp)(lk.replace(/^https?:\/\//, "")).test(pathname)
+            )
+          );
+          if (match) {
+            if (openNewTab || href)
+              return false;
+            setSelectedKeys([key]);
+            setMenus(list);
+            return;
+          }
+          if (!!(children == null ? void 0 : children.length)) {
+            preProcess(children);
+          }
         }
+      } catch (error) {
+        console.log("error", error);
       }
     },
     [location]

package/lib/PageContainer/ItemRender.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 declare const _default: ({ route, params, routes, paths }: {
     route: any;
     params: any;
     routes: any;
     paths: any;
-}) => import("react").JSX.Element;
+}) => React.JSX.Element;
 export default _default;

package/lib/PageContainer/ItemRender.js

@@ -32,6 +32,7 @@ __export(ItemRender_exports, {
   default: () => ItemRender_default
 });
 module.exports = __toCommonJS(ItemRender_exports);
+var import_react = __toESM(require("react"));
 var import_useHistory = __toESM(require("../_util/useHistory"));
 var ItemRender_default = ({ route, params, routes, paths }) => {
   const routeIndex = routes.indexOf(route);
@@ -39,7 +40,7 @@ var ItemRender_default = ({ route, params, routes, paths }) => {
   const title = route.title || route.breadcrumbName;
   const path = route.href || routes.slice(0, routeIndex + 1).map((item) => item.path).join("/");
   const history = (0, import_useHistory.default)();
-  return last ? /* @__PURE__ */ React.createElement("span", null, title) : /* @__PURE__ */ React.createElement(
+  return last ? /* @__PURE__ */ import_react.default.createElement("span", null, title) : /* @__PURE__ */ import_react.default.createElement(
     "a",
     {
       onClick: () => {

package/lib/PageContainer/index.js

@@ -34,11 +34,10 @@ __export(PageContainer_exports, {
 module.exports = __toCommonJS(PageContainer_exports);
 var import_icons = require("@oceanbase/icons");
 var import_pro_components = require("@ant-design/pro-components");
-var import_design = require("@oceanbase/design");
 var import_classnames = __toESM(require("classnames"));
 var import_lodash = require("lodash");
 var import_react = __toESM(require("react"));
-var import_design2 = require("@oceanbase/design");
+var import_design = require("@oceanbase/design");
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
 var import_ItemRender = __toESM(require("./ItemRender"));
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
@@ -54,7 +53,7 @@ var PageContainer = ({
   locale,
   ...restProps
 }) => {
-  const { getPrefixCls } = (0, import_react.useContext)(import_design2.ConfigProvider.ConfigContext);
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
   const rootPrefixCls = getPrefixCls();
   const prefixCls = getPrefixCls("pro-page-container", customizePrefixCls);
   const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
@@ -64,7 +63,7 @@ var PageContainer = ({
     `${rootPrefixCls}-page-header-heading-reload`,
     reloadProps.className
   );
-  const newSubTitle = subTitle && /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: 12 }, reload && /* @__PURE__ */ import_react.default.createElement(import_design2.Tooltip, { title: locale.reload }, (0, import_lodash.isObject)(reload) && import_react.default.isValidElement(reload) ? reload : /* @__PURE__ */ import_react.default.createElement(import_icons.SyncOutlined, { ...reloadProps, className: reloadCls })), subTitle);
+  const newSubTitle = subTitle && /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: 12 }, reload && /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { title: locale.reload }, (0, import_lodash.isObject)(reload) && import_react.default.isValidElement(reload) ? reload : /* @__PURE__ */ import_react.default.createElement(import_icons.SyncOutlined, { ...reloadProps, className: reloadCls })), subTitle);
   const newHeader = header && {
     ...header,
     subTitle: newSubTitle,

package/lib/PageContainer/style/index.js

@@ -29,6 +29,7 @@ var genPageContainerStyle = (token) => {
     antCls,
     proComponentsCls,
     componentCls,
+    colorBgLayout,
     colorBgBase,
     borderRadius,
     boxShadowSecondary,
@@ -41,8 +42,8 @@ var genPageContainerStyle = (token) => {
   const lineHeight = `${controlHeightLG}px`;
   return {
     [`${componentCls}`]: {
-      // 48px is the height of BasicLayout header
-      minHeight: "calc(100vh - 48px)",
+      minHeight: "100vh",
+      backgroundColor: colorBgLayout,
       [`${proComponentsCls}-grid-content`]: {
         minHeight: "auto"
       },
@@ -97,6 +98,7 @@ var genPageContainerStyle = (token) => {
       paddingBottom: 64
     },
     [`${proComponentsCls}-footer-bar`]: {
+      width: "100%",
       backgroundColor: colorBgBase,
       borderRadius,
       boxShadow: boxShadowSecondary,

package/lib/SideTip/index.less

@@ -75,7 +75,7 @@
     user-select: none;
 
     &.@{prefix}-button-primary {
-      background-color: #1677ff;
+      background-color: #006aff;
     }
 
     &.@{prefix}-button-small {
@@ -95,7 +95,7 @@
       position: absolute;
       width: 56px;
       height: 56px;
-      color: #1677ff;
+      color: #006aff;
       font-size: 56px;
       inset-block-start: 0;
       inset-inline-end: 0;

package/lib/_util/useHistory.js

@@ -25,6 +25,7 @@ module.exports = __toCommonJS(useHistory_exports);
 var import_react_router_dom = require("react-router-dom");
 var useHistory_default = () => {
   return {
-    push: import_react_router_dom.useHistory ? (0, import_react_router_dom.useHistory)().push : import_react_router_dom.useNavigate ? (0, import_react_router_dom.useNavigate)() : null
+    // push: useHistory ? useHistory().push : useNavigate ? useNavigate() : null,
+    push: import_react_router_dom.useNavigate ? (0, import_react_router_dom.useNavigate)() : null
   };
 };

package/lib/index.less

@@ -1,15 +1 @@
 @import './variable.less';
-
-html,
-body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  background-color: @colorBgLayout;
-}
-
-#root {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}