@oceanbase/ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/lib/Action/Group.js

@@ -37,6 +37,7 @@ var import_design = require("@oceanbase/design");
 var import_icons = require("@oceanbase/icons");
 var import_lodash = require("lodash");
 var import_style = __toESM(require("./style"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var getOrder = ({ type, fixed }) => {
   const ORDER_SET = { primary: 3, fixed: 2, default: 0 };
   let order = ORDER_SET.default;
@@ -95,58 +96,68 @@ var Group_default = ({
   const getDefaultDisabled = (key) => (shouldDisabled == null ? void 0 : shouldDisabled(key)) ?? false;
   let moreDom;
   if (ellipsisType === "button") {
-    moreDom = /* @__PURE__ */ import_react.default.createElement(
+    moreDom = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_design.Button,
       {
         size: buttonSize,
-        icon: moreText ? void 0 : /* @__PURE__ */ import_react.default.createElement(import_icons.EllipsisOutlined, { style: { cursor: "pointer" } })
-      },
-      moreText
+        icon: moreText ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.EllipsisOutlined, { style: { cursor: "pointer" } }),
+        children: moreText
+      }
     );
   } else {
-    moreDom = /* @__PURE__ */ import_react.default.createElement(import_design.Typography.Link, null, moreText ?? /* @__PURE__ */ import_react.default.createElement(import_icons.EllipsisOutlined, { style: { cursor: "pointer" } }));
+    moreDom = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Typography.Link, { children: moreText ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.EllipsisOutlined, { style: { cursor: "pointer" } }) });
   }
   return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: ellipsisType === "button" ? 8 : 16 }, mainActions.map((action) => {
-      return import_react.default.cloneElement(action, {
-        // size should be covered by action props
-        size: buttonSize,
-        ...action.props,
-        key: action.key,
-        enableLoading,
-        disabled: (0, import_lodash.isBoolean)(action.props.disabled) ? action.props.disabled : getDefaultDisabled(action.key)
-      });
-    }), ellipsisActions.length > 0 && /* @__PURE__ */ import_react.default.createElement(
-      import_design.Dropdown,
-      {
-        placement: dropDownPlacement,
-        overlay: /* @__PURE__ */ import_react.default.createElement(import_design.Menu, { className: `${prefixCls}-more-menu` }, ellipsisActions.map((action, index) => {
-          const actionKey = action.key;
-          let disabled = false;
-          if ((0, import_lodash.isBoolean)(action.props.disabled))
-            disabled = action.props.disabled;
-          else if (shouldDisabled)
-            disabled = shouldDisabled(action.key);
-          const actionDisabled = action.props.loading || ((0, import_lodash.isBoolean)(action.props.disabled) ? action.props.disabled : getDefaultDisabled(action.key));
-          return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-            import_design.Menu.Item,
-            {
-              key: actionKey ?? index.toString(),
-              onClick: ({ domEvent }) => {
-                var _a, _b;
-                (_b = (_a = action.props).onClick) == null ? void 0 : _b.call(
-                  _a,
-                  domEvent
-                );
-              },
-              ...(0, import_lodash.omit)(action.props, ["disabled"]),
-              disabled: actionDisabled
-            },
-            /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { title: action.props.tooltip }, action.props.loading && /* @__PURE__ */ import_react.default.createElement(import_icons.LoadingOutlined, null), " ", action.props.children || action)
-          ), action.props.divider && /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Divider, null));
-        }))
-      },
-      moreDom
-    ))
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { size: ellipsisType === "button" ? 8 : 16, children: [
+      mainActions.map((action) => {
+        return import_react.default.cloneElement(action, {
+          // size should be covered by action props
+          size: buttonSize,
+          ...action.props,
+          key: action.key,
+          enableLoading,
+          disabled: (0, import_lodash.isBoolean)(action.props.disabled) ? action.props.disabled : getDefaultDisabled(action.key)
+        });
+      }),
+      ellipsisActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_design.Dropdown,
+        {
+          placement: dropDownPlacement,
+          overlay: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu, { className: `${prefixCls}-more-menu`, children: ellipsisActions.map((action, index) => {
+            const actionKey = action.key;
+            let disabled = false;
+            if ((0, import_lodash.isBoolean)(action.props.disabled))
+              disabled = action.props.disabled;
+            else if (shouldDisabled)
+              disabled = shouldDisabled(action.key);
+            const actionDisabled = action.props.loading || ((0, import_lodash.isBoolean)(action.props.disabled) ? action.props.disabled : getDefaultDisabled(action.key));
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_design.Menu.Item,
+                {
+                  onClick: ({ domEvent }) => {
+                    var _a, _b;
+                    (_b = (_a = action.props).onClick) == null ? void 0 : _b.call(
+                      _a,
+                      domEvent
+                    );
+                  },
+                  ...(0, import_lodash.omit)(action.props, ["disabled"]),
+                  disabled: actionDisabled,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Tooltip, { title: action.props.tooltip, children: [
+                    action.props.loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, {}),
+                    " ",
+                    action.props.children || action
+                  ] })
+                },
+                actionKey ?? index.toString()
+              ),
+              action.props.divider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Divider, {})
+            ] });
+          }) }),
+          children: moreDom
+        }
+      )
+    ] })
   );
 };

package/lib/Action/Item.js

@@ -36,6 +36,7 @@ module.exports = __toCommonJS(Item_exports);
 var import_icons = require("@oceanbase/icons");
 var import_design = require("@oceanbase/design");
 var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var ActionButton = class extends import_react.default.PureComponent {
   constructor() {
     super(...arguments);
@@ -45,7 +46,7 @@ var ActionButton = class extends import_react.default.PureComponent {
   }
   render() {
     const { children, onClick, enableLoading = true, tooltip, loading, ...restProps } = this.props;
-    return /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { placement: "top", title: tooltip }, /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { placement: "top", title: tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_design.Button,
       {
         loading: enableLoading && (loading || this.state.loading),
@@ -58,10 +59,10 @@ var ActionButton = class extends import_react.default.PureComponent {
             });
           }
         },
-        ...restProps
-      },
-      children
-    ));
+        ...restProps,
+        children
+      }
+    ) });
   }
 };
 ActionButton.__DISPLAY_NAME = "button";
@@ -85,7 +86,7 @@ var ActionLink = class extends import_react.default.PureComponent {
       style,
       ...restProps
     } = this.props;
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_design.Typography.Link,
       {
         style: { padding: 0, ...style },
@@ -99,9 +100,13 @@ var ActionLink = class extends import_react.default.PureComponent {
             });
           }
         },
-        ...restProps
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { placement: "top", title: tooltip }, loading || this.state.disabled ? /* @__PURE__ */ import_react.default.createElement(import_icons.LoadingOutlined, null) : "", " ", children)
+        ...restProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Tooltip, { placement: "top", title: tooltip, children: [
+          loading || this.state.disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, {}) : "",
+          " ",
+          children
+        ] })
+      }
     );
   }
 };

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { CSSObject } from '@ant-design/cssinjs';
 import type { OBToken } from '../../_util/genComponentStyleHook';
-export declare const genActionStyle: GenerateStyle<OBToken>;
+export declare const genActionStyle: (token: OBToken) => CSSObject;
 declare const _default: (prefixCls: string) => {
     wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
     hashId: string;

package/lib/BackgroundTaskManager/RefreshMan.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-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-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/BackgroundTaskManager/RefreshMan.tsx
@@ -34,8 +24,9 @@ __export(RefreshMan_exports, {
 module.exports = __toCommonJS(RefreshMan_exports);
 var import_ahooks = require("ahooks");
 var import_design = require("@oceanbase/design");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_constants = require("./constants");
+var import_jsx_runtime = require("react/jsx-runtime");
 var RefreshMan = (0, import_react.forwardRef)((props, ref) => {
   const {
     run,
@@ -78,7 +69,7 @@ var RefreshMan = (0, import_react.forwardRef)((props, ref) => {
       stopLoop();
     };
   }, [startLoop, stopLoop, timeout]);
-  return /* @__PURE__ */ import_react.default.createElement(import_design.Spin, { spinning: spinning && refreshManLoading }, /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Spin, { spinning: spinning && refreshManLoading, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }) });
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/lib/BackgroundTaskManager/index.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-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-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/BackgroundTaskManager/index.tsx
@@ -34,10 +24,11 @@ __export(BackgroundTaskManager_exports, {
   default: () => BackgroundTaskManager_default
 });
 module.exports = __toCommonJS(BackgroundTaskManager_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_design = require("@oceanbase/design");
 var import_constants = require("./constants");
 var import_RefreshMan = require("./RefreshMan");
+var import_jsx_runtime = require("react/jsx-runtime");
 var NotificationApi = /* @__PURE__ */ ((NotificationApi2) => {
   NotificationApi2["success"] = "success";
   NotificationApi2["error"] = "error";
@@ -166,7 +157,7 @@ var BackgroundTaskManager_default = (0, import_react.forwardRef)((props, ref) =>
       window.removeEventListener("beforeunload", onUnload);
     };
   }, [queue, preset]);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, !!taskQueue.length && /* @__PURE__ */ import_react.default.createElement(import_RefreshMan.RefreshMan, { run, rollingFrequency }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: !!taskQueue.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RefreshMan.RefreshMan, { run, rollingFrequency }) });
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/lib/BasicLayout/Header.js

@@ -36,7 +36,7 @@ var import_icons = require("@oceanbase/icons");
 var import_design = require("@oceanbase/design");
 var import_classnames = __toESM(require("classnames"));
 var import_moment = __toESM(require("moment"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_constant = require("../constant");
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
 var import_util = require("../_util");
@@ -46,6 +46,7 @@ var import_oceanbase_logo = __toESM(require("../assets/logo/oceanbase_logo.svg")
 var import_oceanbase_logo_dark = __toESM(require("../assets/logo/oceanbase_logo_dark.svg"));
 var import_LocaleDropdown = __toESM(require("../LocaleDropdown"));
 var import_Header = __toESM(require("./style/Header"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var Header = ({
   prefixCls: customizePrefixCls,
   showLabel = true,
@@ -76,7 +77,7 @@ var Header = ({
   const navigate = (0, import_useNavigate.default)();
   const [visible, setVisible] = (0, import_react.useState)(false);
   const isWelcome = pathname === welcomePath;
-  const helpMenu = /* @__PURE__ */ import_react.default.createElement(
+  const helpMenu = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_design.Menu,
     {
       onClick: ({ key }) => {
@@ -96,73 +97,130 @@ var Header = ({
         } else if (key === "about") {
           setVisible(true);
         }
-      }
-    },
-    welcomePath && /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: "welcome" }, locale.welcome),
-    versionNoticePath && /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: "versionNotice" }, locale.versionNotice),
-    docsPath && /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: "viewDocs" }, locale.viewDocs),
-    pdfPath && /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: "downloadDocs" }, locale.downloadDocs),
-    /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: "about" }, `${locale.about}${appData.shortName ? ` ${appData.shortName}` : ""}`)
+      },
+      children: [
+        welcomePath && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { children: locale.welcome }, "welcome"),
+        versionNoticePath && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { children: locale.versionNotice }, "versionNotice"),
+        docsPath && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { children: locale.viewDocs }, "viewDocs"),
+        pdfPath && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { children: locale.downloadDocs }, "downloadDocs"),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { children: `${locale.about}${appData.shortName ? ` ${appData.shortName}` : ""}` }, "about")
+      ]
+    }
   );
   return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
         ...restProps,
         className: (0, import_classnames.default)(prefixCls, {
           [`${prefixCls}-welcome`]: isWelcome
-        })
-      },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content` }, /* @__PURE__ */ import_react.default.createElement(
-        "img",
-        {
-          src: simpleLogoUrl,
-          alt: "",
-          onClick: () => {
-            navigate == null ? void 0 : navigate("/");
-          },
-          className: `${prefixCls}-logo`
-        }
-      ), title && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-title` }, title), showLabel ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-extra ${prefixCls}-extra-with-label` }, extra, showHelp && /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: helpMenu }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.BulbOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", { "data-testid": "help" }, locale.help))), showLocale && /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { locales: locales || langs, className: `${prefixCls}-extra-item` }), userMenu ? /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: userMenu }, /* @__PURE__ */ import_react.default.createElement(import_design.Button, { shape: "round", size: "small" }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", null, username)))) : (
-        // userMenu username 都不存在时，不展示该项
-        /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, username ? /* @__PURE__ */ import_react.default.createElement(import_design.Button, { shape: "round", size: "small" }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", null, username))) : null)
-      )) : /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-extra` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: helpMenu }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-icon-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_icons.BulbFilled, null)))), docsPath && /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { title: locale.viewDocs }, /* @__PURE__ */ import_react.default.createElement(
-        "span",
-        {
-          className: `${prefixCls}-extra-item`,
-          onClick: () => {
-            (0, import_util.directTo)(docsPath);
-          }
-        },
-        /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-icon-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_icons.ReadFilled, null))
-      )), showLocale && /* @__PURE__ */ import_react.default.createElement(
-        import_LocaleDropdown.default,
-        {
-          showLabel: true,
-          locales: locales || langs,
-          className: `${prefixCls}-extra-item`
-        }
-      ), userMenu ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: userMenu }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-user-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_icons.UserFilled, { className: `${prefixCls}-extra-user-icon` }), /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-username` }, username)))) : /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-user-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_icons.UserFilled, { className: `${prefixCls}-extra-user-icon` }), /* @__PURE__ */ import_react.default.createElement("span", null, username))))),
-      /* @__PURE__ */ import_react.default.createElement(
-        import_design.Modal,
-        {
-          visible,
-          open: visible,
-          destroyOnClose: true,
-          footer: false,
-          onCancel: () => {
-            setVisible(false);
-          }
-        },
-        /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-about-wrapper` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-about` }, /* @__PURE__ */ import_react.default.createElement("img", { src: logoUrl, alt: "", className: `${prefixCls}-logo` }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-release-info` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-version` }, locale.version, ": ", appData.version), appData.releaseTime && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-date` }, `${locale.releaseTime}: ${appData.releaseTime}`)), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("a", { href: import_constant.OB_SITE_LINK, target: "_blank", rel: "noopener noreferrer" }, import_constant.OB_SITE_LINK)), /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            style: { display: "flex", justifyContent: "space-between", alignItems: "center" }
-          },
-          /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-copyright` }, locale.right, " ", /* @__PURE__ */ import_react.default.createElement(import_icons.CopyrightOutlined, null), " ", (0, import_moment.default)().year(), " ", locale.company),
-          /* @__PURE__ */ import_react.default.createElement("img", { src: (theme == null ? void 0 : theme.isDark) ? import_oceanbase_logo_dark.default : import_oceanbase_logo.default, alt: "", style: { height: 12 } })
-        ))))
-      )
+        }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-content`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "img",
+              {
+                src: simpleLogoUrl,
+                alt: "",
+                onClick: () => {
+                  navigate == null ? void 0 : navigate("/");
+                },
+                className: `${prefixCls}-logo`
+              }
+            ),
+            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-title`, children: title }),
+            showLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-extra ${prefixCls}-extra-with-label`, children: [
+              extra,
+              showHelp && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Dropdown, { overlay: helpMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { className: `${prefixCls}-extra-item`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.BulbOutlined, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-testid": "help", children: locale.help })
+              ] }) }),
+              showLocale && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LocaleDropdown.default, { locales: locales || langs, className: `${prefixCls}-extra-item` }),
+              userMenu ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Dropdown, { overlay: userMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Button, { shape: "round", size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { className: `${prefixCls}-extra-item`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.UserOutlined, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: username })
+              ] }) }) }) : (
+                // userMenu username 都不存在时，不展示该项
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: username ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Button, { shape: "round", size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { className: `${prefixCls}-extra-item`, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.UserOutlined, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: username })
+                ] }) }) : null })
+              )
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-extra`, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-extra-item`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Dropdown, { overlay: helpMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-extra-icon-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.BulbFilled, {}) }) }) }),
+              docsPath && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { title: locale.viewDocs, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: `${prefixCls}-extra-item`,
+                  onClick: () => {
+                    (0, import_util.directTo)(docsPath);
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-extra-icon-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ReadFilled, {}) })
+                }
+              ) }),
+              showLocale && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_LocaleDropdown.default,
+                {
+                  showLabel: true,
+                  locales: locales || langs,
+                  className: `${prefixCls}-extra-item`
+                }
+              ),
+              userMenu ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-extra-item`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Dropdown, { overlay: userMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `${prefixCls}-extra-user-wrapper`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.UserFilled, { className: `${prefixCls}-extra-user-icon` }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-extra-username`, children: username })
+              ] }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-extra-item`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `${prefixCls}-extra-user-wrapper`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.UserFilled, { className: `${prefixCls}-extra-user-icon` }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: username })
+              ] }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_design.Modal,
+            {
+              visible,
+              open: visible,
+              destroyOnClose: true,
+              footer: false,
+              onCancel: () => {
+                setVisible(false);
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-about-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-about`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: logoUrl, alt: "", className: `${prefixCls}-logo` }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-release-info`, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-version`, children: [
+                    locale.version,
+                    ": ",
+                    appData.version
+                  ] }),
+                  appData.releaseTime && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-date`, children: `${locale.releaseTime}: ${appData.releaseTime}` })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: import_constant.OB_SITE_LINK, target: "_blank", rel: "noopener noreferrer", children: import_constant.OB_SITE_LINK }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "div",
+                    {
+                      style: { display: "flex", justifyContent: "space-between", alignItems: "center" },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `${prefixCls}-copyright`, children: [
+                          locale.right,
+                          " ",
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CopyrightOutlined, {}),
+                          " ",
+                          (0, import_moment.default)().year(),
+                          " ",
+                          locale.company
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: (theme == null ? void 0 : theme.isDark) ? import_oceanbase_logo_dark.default : import_oceanbase_logo.default, alt: "", style: { height: 12 } })
+                      ]
+                    }
+                  )
+                ] })
+              ] }) })
+            }
+          )
+        ]
+      }
     )
   );
 };