@oceanbase/ui 0.2.23 → 0.2.25

package/lib/BasicLayout/style/index.js

@@ -25,15 +25,423 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genBasicLayoutStyle = (token) => {
-  const { proComponentsCls } = token;
+  const {
+    antCls,
+    componentCls,
+    proComponentsCls,
+    colorBgLayout,
+    colorText,
+    colorBorder,
+    colorPrimaryBorder,
+    colorPrimary,
+    motionDurationSlow
+  } = token;
+  const maxWidth = "8192px";
+  const siderWidthList = [0, 52, 52 * 2, 192, 208];
+  const footerBarStyle = {};
+  siderWidthList.forEach((width) => {
+    footerBarStyle[`${componentCls}${componentCls}-sider-${width}`] = {
+      [`${proComponentsCls}-footer-bar`]: {
+        // footer bar width adapt to sider width of BasicLayout
+        width: width === 0 ? "100%" : `calc(100% - ${width}px - 24px)`,
+        transition: `width ${motionDurationSlow}`
+      }
+    };
+  });
   return {
-    // Set style of PageContainer in BasicLayout
-    [`${proComponentsCls}-page-container`]: {
-      // 48px is the height of BasicLayout header
-      minHeight: "calc(100vh - 48px)"
+    [`${componentCls}-banner-wrapper`]: {
+      position: "fixed",
+      top: 0,
+      zIndex: 20,
+      width: "100%"
+    },
+    // 对于 Alert 类型的 banner，自动增加上间距
+    // 对于其他类型的 banner，需要业务侧自行设置上间距
+    [`${componentCls}-with-banner`]: {
+      marginTop: "38px"
+    },
+    ...footerBarStyle,
+    [`${componentCls}`]: {
+      height: "100%",
+      backgroundColor: colorBgLayout,
+      transition: "all 0.1s",
+      // Set style of PageContainer in BasicLayout
+      [`${proComponentsCls}-page-container`]: {
+        // 48px is the height of BasicLayout header
+        minHeight: "calc(100vh - 48px)"
+      },
+      [`${componentCls}-content-layout`]: {
+        maxWidth,
+        // 居中对齐
+        margin: "0 auto",
+        [`${componentCls}-sider`]: {
+          position: "fixed",
+          zIndex: 10,
+          padding: "16px 0 16px 16px",
+          backgroundColor: colorBgLayout,
+          transition: "all 0.3s",
+          [`${componentCls}-sider-border`]: {
+            position: "relative",
+            top: "-16px",
+            width: 1,
+            height: "100%",
+            backgroundColor: "#e2e8f3",
+            cursor: "pointer",
+            opacity: 0,
+            // 左右两侧扩大热区
+            ["&::after"]: {
+              position: "absolute",
+              top: 0,
+              right: "-10px",
+              bottom: 0,
+              left: "-10px",
+              content: '""'
+            },
+            "&:hover": {
+              opacity: 1,
+              // 仅在 hover 时增加过渡动画，避免展开/收起时 border 和 collapse 没有及时消失、影响整体效果
+              transition: "opacity 0.3s",
+              [`${componentCls}-sider-collapse`]: {
+                opacity: 1,
+                transition: "opacity 0.3s"
+              }
+            },
+            [`${componentCls}-sider-collapse`]: {
+              position: "relative",
+              top: "245px",
+              right: 10,
+              // 需要设置 z-index 以便叠加在分隔线上，否则点击的是分隔线的热区，无法触发 collapse 的点击事件
+              zIndex: 1,
+              width: "20px",
+              height: "42px",
+              lineHeight: "42px",
+              textAlign: "center",
+              backgroundColor: "#fff",
+              border: `1px solid ${colorBorder}`,
+              borderRadius: "10px",
+              cursor: "pointer",
+              opacity: 0,
+              // 设置展开/收起按钮中的图标大小
+              [".anticon"]: {
+                fontSize: "px",
+                display: "block",
+                lineHeight: "42px"
+              }
+            }
+          },
+          [`${componentCls}-sider-wrapper`]: {
+            display: "flex",
+            height: "calc(100vh - 48px)",
+            // 菜单通用样式
+            [`${antCls}-menu`]: {
+              backgroundColor: "transparent",
+              borderRight: "none",
+              [`${antCls}-menu-item`]: {
+                width: "100%",
+                marginTop: 0,
+                marginRight: "auto",
+                marginLeft: "auto",
+                color: colorText,
+                backgroundColor: "transparent",
+                [`.anticon`]: {
+                  // 图标尺寸设为 18px，因为设计侧给到的图标内侧有间距，需要适当加大尺寸
+                  width: "18px",
+                  height: "18px",
+                  fontSize: "18px"
+                }
+              },
+              [`${antCls}-menu-submenu`]: {
+                width: "100%",
+                marginTop: 0,
+                marginRight: "auto",
+                marginLeft: "auto",
+                color: colorText,
+                backgroundColor: "transparent",
+                [`.anticon`]: {
+                  // 图标尺寸设为 18px，因为设计侧给到的图标内侧有间距，需要适当加大尺寸
+                  width: "18px",
+                  height: "18px",
+                  fontSize: "18px"
+                }
+              },
+              [`${antCls}-menu-submenu > ${antCls}-menu-submenu-title`]: {
+                width: "100%",
+                marginBottom: "4px !important",
+                marginInline: 0,
+                marginBlock: 0
+              }
+            },
+            // 内嵌菜单样式
+            [`${antCls}-menu-inline`]: {
+              // 菜单项间距
+              [`${antCls}-menu-item, ${antCls}-menu-submenu`]: {
+                "&:not(:last-child)": {
+                  marginBottom: "16px",
+                  // 子菜单展开时 marginBottom 会变小，为了避免效果突兀，增加过渡效果
+                  transition: "marginBottom 0.2s"
+                }
+              },
+              [`${antCls}-menu-submenu-open`]: {
+                "&:not(:last-childantCls)": {
+                  // 子菜单展开时，减小 marginBottom
+                  marginBottom: 4
+                }
+              },
+              // 子菜单项间距
+              [`${antCls}-menu-submenu`]: {
+                [`${antCls}-menu-item:not(:last-child)`]: {
+                  marginBottom: 4
+                }
+              },
+              // 菜单项缩进
+              [`${antCls}-menu-item, ${antCls}-menu-submenu > ${antCls}-menu-submenu-title`]: {
+                paddingLeft: "16px !important",
+                [`${antCls}-menu-title-content`]: {
+                  width: "108px"
+                }
+              },
+              // 子菜单项缩进
+              [`${antCls}-menu-sub`]: {
+                [`${antCls}-menu-item`]: {
+                  marginLeft: "16px",
+                  paddingLeft: "28px !important"
+                }
+              },
+              // 菜单项激活样式
+              [`${antCls}-menu-item-active, ${antCls}-menu-submenu-active > ${antCls}-menu-submenu-title`]: {
+                color: `${colorText} !important`,
+                fontWeight: 600,
+                animation: "activeGradientAnimation 0.1s",
+                // .border-gradient(linear-gradient(to right, #E9EDF6, @colorBgLayout), linear-gradient(90deg, #C6CDD9, @colorBgLayout), 0.5px, solid, 8px 0 0 8px),
+                backgroundImage: `linear-gradient(to right,#E9EDF6, ${colorBgLayout}),linear-gradient(90deg,#C6CDD9,${colorBgLayout})`,
+                backgroundClip: "padding-box,border-box",
+                backgroundOrigin: "padding-box,border-box",
+                border: ".5px solid transparent",
+                borderRadius: "8px 0 0 8px",
+                transition: "border-width .3s"
+              },
+              // 菜单项选中样式
+              [`${antCls}-menu-item-selected`]: {
+                color: `${colorPrimary} !important`,
+                fontWeight: 600,
+                animation: "selectedGradientAnimation 0.5s",
+                // .border-gradient(linear-gradient(to right, #E5EEFF, #F4F8FF), linear-gradient(90deg, @colorPrimaryBorder, @colorBgLayout), 0.5px, solid, 8px 0 0 8px),
+                backgroundImage: `linear-gradient(to right,#E5EEFF,#F4F8FF),linear-gradient(90deg,${colorPrimaryBorder},${colorBgLayout})`,
+                backgroundClip: "padding-box,border-box",
+                backgroundOrigin: "padding-box,border-box",
+                border: ".5px solid transparent",
+                borderRadius: "8px 0 0 8px",
+                transition: "border-width .3s",
+                "&::after": {
+                  // content: '""',
+                  // 去掉菜单项的选中标记
+                  display: "none"
+                }
+              },
+              [`${antCls}-menu-submenu-selected > ${antCls}-menu-submenu-title`]: {
+                color: `${colorPrimary} !important`
+              },
+              [`${antCls}-divider`]: {
+                margin: "0 0 16px 0"
+              }
+            },
+            // 垂直菜单样式
+            [`${antCls}-menu-vertical`]: {
+              overflowX: "hidden",
+              overflowY: "auto",
+              borderRight: "none",
+              [`${antCls}-menu-item, ${antCls}-menu-submenu`]: {
+                "&:not(:last-child)": {
+                  marginBottom: 4
+                }
+              },
+              [`${antCls}-menu-item, ${antCls}-menu-submenu > ${antCls}-menu-submenu-title`]: {
+                width: "52px",
+                height: "52px",
+                padding: 0,
+                lineHeight: "52px",
+                textAlign: "center",
+                [`${antCls}-menu-title-content`]: {
+                  display: "inline-block",
+                  width: "40px",
+                  height: "40px",
+                  lineHeight: "40px",
+                  borderRadius: "8px"
+                },
+                [`${antCls}-menu-submenu-arrow`]: {
+                  display: "none"
+                }
+              },
+              [`${antCls}-menu-item-active, ${antCls}-menu-submenu-active > ${antCls}-menu-submenu-title`]: {
+                [`${antCls}-menu-title-content`]: {
+                  backgroundColor: "#e9edf6",
+                  border: "0.5px solid #c6cdd9"
+                }
+              },
+              [`${antCls}-menu-item-selected, ${antCls}-menu-submenu-selected > ${antCls}-menu-submenu-title`]: {
+                [`${antCls}-menu-title-content`]: {
+                  backgroundColor: "#e5eeff",
+                  border: `0.5px solid ${colorPrimaryBorder}`
+                }
+              }
+            },
+            [`${componentCls}-sub-sider`]: {
+              borderRight: "1px solid #e2e8f3",
+              [`${antCls}-divider`]: {
+                margin: "0 0 4px 0"
+              }
+            },
+            [`${componentCls}-sub-sider, ${componentCls}-menu-collapsed`]: {
+              width: "52px",
+              [`${antCls}-divider`]: {
+                margin: "0 0 4px 0"
+              }
+            },
+            [`${componentCls}-sider-content`]: {
+              display: "flex",
+              flex: 1,
+              // 纵向排列
+              flexDirection: "column",
+              // 纵向两端对齐
+              justifyContent: "space-between",
+              height: "100%",
+              [`${componentCls}-sider-header`]: {
+                paddingTop: "16px"
+              },
+              [`${componentCls}-menu-wrapper`]: {
+                display: "flex",
+                flexDirection: "column",
+                // 保证垂直方向超出高度出现滚动
+                flexGrow: 1,
+                justifyContent: "space-between",
+                overflowX: "hidden",
+                overflowY: "auto",
+                [`${componentCls}-menu`]: {
+                  backgroundColor: "transparent",
+                  borderRight: "none",
+                  marginBottom: "32px"
+                }
+              }
+            }
+          }
+        },
+        [`${componentCls}-sider-collapsed`]: {
+          paddingLeft: 0
+        },
+        [`${componentCls}-sider-has-sub-sider`]: {
+          padding: 0,
+          // 包含子侧边栏的菜单不支持收起，直接隐藏侧边栏 border 和 collapse
+          [`${componentCls}-sider-border`]: {
+            display: "none",
+            [`${componentCls}-sider-collapse`]: {
+              display: "none"
+            }
+          },
+          [`${antCls}-menu-inline`]: {
+            paddingTop: "16px",
+            [`${antCls}-menu-item, ${antCls}-menu-submenu`]: {
+              "&:not(:last-child)": {
+                marginBottom: "16px !important"
+              }
+            },
+            [`${antCls}-divider`]: {
+              width: "60%",
+              minWidth: "60%",
+              margin: "-8px 0 8px 16px !important"
+            }
+          },
+          [`${antCls}-menu-vertical`]: {
+            paddingTop: "10px"
+          },
+          [`${componentCls}-sider-content`]: {
+            paddingLeft: "6px"
+          }
+        },
+        [`${componentCls}-content`]: {
+          backgroundColor: colorBgLayout,
+          transition: "all 0.3s"
+        }
+      }
+    },
+    [`@media (min-width: ${maxWidth})`]: {
+      [`${componentCls}`]: {
+        [`${componentCls}-content-layout`]: {
+          [`${componentCls}-sider`]: {
+            paddingLeft: 0
+          }
+        }
+      },
+      [`${proComponentsCls}-footer-bar`]: {
+        right: `calc((100% - ${maxWidth}) / 2 + 24px)`,
+        width: `calc(${maxWidth} - 192px - 24px - 24px)`,
+        maxWidth: `calc(${maxWidth} - 192px - 24px - 24px)`
+      }
     },
-    [`${proComponentsCls}-footer-bar`]: {
-      width: `calc(100% - 192px - 24px)`
+    // 弹出菜单样式
+    [`${antCls}-menu-submenu-popup`]: {
+      [`${antCls}-menu`]: {
+        paddingLeft: "6px !important",
+        backgroundColor: `${colorBgLayout} !important`,
+        [`${antCls}-menu-item`]: {
+          width: "100%",
+          backgroundColor: "transparent",
+          border: "none",
+          marginInline: 0,
+          "&:not(:last-child):": {
+            marginBottom: "8px !important"
+          }
+        },
+        [`${antCls}-menu-submenu`]: {
+          width: "100%",
+          backgroundColor: "transparent",
+          border: "none",
+          marginInline: 0,
+          "&:not(:last-child):": {
+            marginBottom: "8px !important"
+          }
+        },
+        [`${antCls}-menu-item-active`]: {
+          color: "colorText !important",
+          fontWeight: 600,
+          animation: "activeGradientAnimation 0.1s",
+          // .border-gradient(linear-gradient(to right, #E9EDF6, colorBgLayout), linear-gradient(90deg, #C6CDD9, colorBgLayout), 0.5px, solid, 8px 0 0 8px),
+          backgroundImage: `linear-gradient(to right, #E9EDF6, ${colorBgLayout}), linear-gradient(90deg, #C6CDD9, ${colorBgLayout})`,
+          backgroundClip: "padding-box,border-box",
+          backgroundOrigin: "padding-box,border-box",
+          border: ".5px solid transparent",
+          borderRadius: "8px 0 0 8px",
+          transition: "border-width .3s"
+        },
+        [`${antCls}-menu-submenu-active > & ${antCls}-menu-submenu-title`]: {
+          color: "colorText !important",
+          fontWeight: 600,
+          animation: "activeGradientAnimation 0.1s",
+          // .border-gradient(linear-gradient(to right, #E9EDF6, colorBgLayout), linear-gradient(90deg, #C6CDD9, colorBgLayout), 0.5px, solid, 8px 0 0 8px),
+          backgroundImage: `linear-gradient(to right, #E9EDF6, ${colorBgLayout}), linear-gradient(90deg, #C6CDD9, ${colorBgLayout})`,
+          backgroundClip: "padding-box,border-box",
+          backgroundOrigin: "padding-box,border-box",
+          border: ".5px solid transparent",
+          borderRadius: "8px 0 0 8px",
+          transition: "border-width .3s"
+        },
+        [`${antCls}-menu-item-selected`]: {
+          color: `${colorPrimary} !important`,
+          fontWeight: 600,
+          animation: "selectedGradientAnimation 0.1s",
+          // .border-gradient(linear-gradient(to right, #E5EEFF, #F4F8FF), linear-gradient(90deg, @colorPrimaryBorder, colorBgLayout), 0.5px, solid, 8px 0 0 8px),
+          backgroundImage: `linear-gradient(to right,#E5EEFF,#F4F8FF),linear-gradient(90deg,${colorPrimaryBorder},${colorBgLayout})`,
+          backgroundClip: "padding-box,border-box",
+          backgroundOrigin: "padding-box,border-box",
+          border: ".5px solid transparent",
+          borderRadius: "8px 0 0 8px",
+          transition: "border-width .3s"
+        },
+        [`${antCls}-divider`]: {
+          width: "'60%'",
+          minWidth: "60%",
+          margin: "0 0 8px 16px !important"
+        }
+      }
     }
   };
 };

package/lib/ContentWithQuestion/index.less

@@ -14,6 +14,5 @@
   }
   .@{prefix}-color {
     color: red;
-
   }
-}
+}

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

package/lib/PageContainer/index.js

@@ -50,6 +50,7 @@ var PageContainer = ({
   extraContent,
   tabList,
   tabBarExtraContent,
+  footerToolBarProps,
   locale,
   ...restProps
 }) => {
@@ -63,7 +64,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_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 newSubTitle = (reload || 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,
@@ -72,7 +73,7 @@ var PageContainer = ({
       ...breadcrumb
     }
   };
-  const noHasHeader = ["title", "subTitle", "extra", "tags", "footer", "avatar", "backIcon", "breadcrumb"].every(
+  const noHasHeader = ["title", "subTitle", "extra", "tags", "avatar", "backIcon", "breadcrumb"].every(
     (item) => !(newHeader == null ? void 0 : newHeader[item])
   ) && !content && !extraContent && !tabList && !tabBarExtraContent;
   const pageContainerCls = (0, import_classnames.default)(
@@ -92,6 +93,11 @@ var PageContainer = ({
         extraContent,
         tabList,
         tabBarExtraContent,
+        footerToolBarProps: {
+          ...footerToolBarProps,
+          // render footer as same level with PageContainer instead of under body
+          portalDom: false
+        },
         ...restProps
       }
     )

package/lib/PageContainer/style/index.js

@@ -49,7 +49,8 @@ var genPageContainerStyle = (token) => {
       },
       [`${antCls}-page-header`]: {
         [`${antCls}-page-header-breadcrumb`]: {
-          marginBottom: 6
+          // overwritten pro-components style
+          paddingBlockStart: 0
         },
         [`${antCls}-page-header-heading-title`]: {
           fontSize: fontSizeHeading3
@@ -79,14 +80,22 @@ var genPageContainerStyle = (token) => {
         }
       },
       // 减小内容区左右两侧间距
-      [`${componentCls}-warp-page-header`]: {
-        paddingInline: `${paddingLG}px !important`,
-        paddingBlock: `${padding}px !important`
+      [`${antCls}-page-header`]: {
+        paddingInlineStart: paddingLG,
+        paddingInlineEnd: paddingLG,
+        paddingBlockStart: padding,
+        paddingBlockEnd: padding
       },
       [`${componentCls}-children-container`]: {
         paddingInline: paddingLG,
         paddingBlockStart: 0,
         paddingBlockEnd: paddingLG
+      },
+      // remove paddingBlockStart for page header without breadcrumb
+      [`${antCls}-page-header:not(${antCls}-page-header-has-breadcrumb)`]: {
+        [`${antCls}-page-header-heading`]: {
+          paddingBlockStart: 0
+        }
       }
     },
     [`${componentCls}-no-page-header`]: {

package/lib/Ranger/QuickPicker.d.ts

@@ -2,7 +2,7 @@ import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
 import type { RangeValue } from './Ranger';
 import type { RangeOption } from './typing';
 export type QuickType = 'select' | 'dropdown';
-interface IProps extends LocaleWrapperProps {
+interface QuickPickerProps extends LocaleWrapperProps {
     selects: RangeOption[];
     type?: QuickType;
     onChange: (range: RangeValue) => void;
@@ -13,5 +13,5 @@ interface IProps extends LocaleWrapperProps {
     isMoment?: boolean;
     size?: 'small' | 'large' | 'middle';
 }
-declare const _default: (props: IProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare const _default: (props: QuickPickerProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
 export default _default;

package/lib/Ranger/index.d.ts

@@ -1,2 +1,4 @@
+export * from './QuickPicker';
+export * from './Ranger';
 declare const Ranger: any;
 export default Ranger;

package/lib/Ranger/index.js

@@ -16,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -35,6 +36,8 @@ module.exports = __toCommonJS(Ranger_exports);
 var import_constant = require("./constant");
 var import_QuickPicker = __toESM(require("./QuickPicker"));
 var import_Ranger = __toESM(require("./Ranger"));
+__reExport(Ranger_exports, require("./QuickPicker"), module.exports);
+__reExport(Ranger_exports, require("./Ranger"), module.exports);
 var Ranger = import_Ranger.default;
 Ranger.NEAR_1_MINUTES = import_constant.NEAR_1_MINUTES;
 Ranger.NEAR_5_MINUTES = import_constant.NEAR_5_MINUTES;
@@ -62,3 +65,8 @@ Ranger.LAST_YEAR = import_constant.LAST_YEAR;
 Ranger.NEXT_YEAR = import_constant.NEXT_YEAR;
 Ranger.QuickPicker = import_QuickPicker.default;
 var Ranger_default = Ranger;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./QuickPicker"),
+  ...require("./Ranger")
+});

package/lib/TreeSearch/index.d.ts

@@ -17,7 +17,7 @@ export interface TreeSearchRef {
     checkAll: () => void;
     invertSelect: () => void;
 }
-interface IProps {
+interface TreeSearchProps {
     treeData: Node[];
     titleRender?: (nodeData: DataNode) => React.ReactNode;
     checkable?: boolean;
@@ -34,5 +34,5 @@ interface IProps {
     loadData?: (data: unknown) => Promise<void>;
     searchStyle?: {};
 }
-declare const _default: React.ForwardRefExoticComponent<IProps & React.RefAttributes<TreeSearchRef>>;
+declare const _default: React.ForwardRefExoticComponent<TreeSearchProps & React.RefAttributes<TreeSearchRef>>;
 export default _default;

package/lib/Welcome/index.js

@@ -80,7 +80,17 @@ var Welcome = ({
     },
     /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 24, className: `${prefix}-title` }, /* @__PURE__ */ import_react.default.createElement("div", null, title)),
     /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 16, className: `${prefix}-description` }, /* @__PURE__ */ import_react.default.createElement("p", null, description))
-  ), /* @__PURE__ */ import_react.default.createElement(import_design.Card, { bordered: false, className: `${prefix}-introduce` }, /* @__PURE__ */ import_react.default.createElement(import_design.Row, { gutter: 78 }, introduces.map((item) => /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 8, key: item.image, className: `${prefix}-item`, "data-testid": "introduces" }, /* @__PURE__ */ import_react.default.createElement("img", { src: item.image, alt: "", height: 80 }), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, item.title), /* @__PURE__ */ import_react.default.createElement("p", { className: `${prefix}-description` }, item.description)))))), /* @__PURE__ */ import_react.default.createElement(import_design.Row, { className: `${prefix}-content` }, /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 14, className: isDefault ? `${prefix}-left` : `${prefix}-border-right` }, /* @__PURE__ */ import_react.default.createElement(import_design.Row, { justify: "space-around" }, steps.map((item, index) => renderStep(item, index)), isDefault && /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 24 }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-btn-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_design.Button, { type: "primary", icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null), block: true, ...buttonProps }, buttonText))))), /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 10, className: `${prefix}-right` }, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, locale.helpTitle), helps.map((item) => /* @__PURE__ */ import_react.default.createElement(
+  ), /* @__PURE__ */ import_react.default.createElement(import_design.Card, { bordered: false, className: `${prefix}-introduce` }, /* @__PURE__ */ import_react.default.createElement(import_design.Row, { gutter: 78 }, introduces.map((item) => /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 8, key: item.image, className: `${prefix}-item`, "data-testid": "introduces" }, /* @__PURE__ */ import_react.default.createElement("img", { src: item.image, alt: "", height: 80 }), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, item.title), /* @__PURE__ */ import_react.default.createElement("p", { className: `${prefix}-description` }, item.description)))))), /* @__PURE__ */ import_react.default.createElement(import_design.Row, { className: `${prefix}-content` }, /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 14, className: isDefault ? `${prefix}-left` : `${prefix}-border-right` }, /* @__PURE__ */ import_react.default.createElement(import_design.Row, { justify: "space-around" }, steps.map((item, index) => renderStep(item, index)), isDefault && /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 24 }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-btn-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
+    import_design.Button,
+    {
+      size: "large",
+      type: "primary",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null),
+      block: true,
+      ...buttonProps
+    },
+    buttonText
+  ))))), /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 10, className: `${prefix}-right` }, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, locale.helpTitle), helps.map((item) => /* @__PURE__ */ import_react.default.createElement(
     import_design.Button,
     {
       key: item.title,

package/lib/Welcome/index.less

@@ -5,8 +5,7 @@
 .@{prefix}-container {
   height: 100%;
   padding-bottom: 0 !important;
-  overflow: auto;
-  background-color: #fff;
+  background-color: @colorBgContainer;
 
   .tech-page-container-content {
     // 由于 umi 的本地开发和线上打包的 CSS 样式优先级不一致，导致下列样式在线上环境不生效，因此先加上 !important
@@ -18,7 +17,7 @@
     height: 272px;
     padding-top: 72px;
     padding-left: 100px;
-    color: #fff;
+    color: @colorBgContainer;
     background-repeat: no-repeat;
     background-size: 100% 100%;
 
@@ -145,7 +144,7 @@
   // margin-right: 30px;
   margin-bottom: 30px;
   padding: 20px 30px 20px 0;
-  background: #fff;
+  background: @colorBgContainer;
   border: 1px solid rgba(0, 0, 0, 0.06);
   border-radius: 2px;
 
@@ -175,7 +174,7 @@
   }
 
   .@{prefix}-step-operations {
-    color: #0090ff;
+    color: @colorPrimary;
     font-size: 14px;
     line-height: 22px;
   }