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

package/lib/Login/index.js

@@ -38,7 +38,6 @@ var import_design2 = require("@oceanbase/design");
 var import_classnames = __toESM(require("classnames"));
 var import_react = require("react");
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_util = require("../_util");
 var import_ActivateForm = __toESM(require("./ActivateForm"));
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
 var import_LoginForm = __toESM(require("./LoginForm"));
@@ -46,9 +45,8 @@ var import_RegisterForm = __toESM(require("./RegisterForm"));
 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_index = require("./index.less");
+var import_style = __toESM(require("./style"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var prefix = (0, import_util.getPrefix)("login");
 var Login = (props) => {
   const {
     logo,
@@ -72,6 +70,9 @@ var Login = (props) => {
     isMobile,
     style = {}
   } = props;
+  const { getPrefixCls, theme } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("login");
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
   const [showRegister, setShowRegister] = (0, import_ahooks.useControllableValue)(props, {
     defaultValue: false,
     valuePropName: "showRegister",
@@ -83,7 +84,6 @@ var Login = (props) => {
     trigger: "onShowActivateChange"
   });
   const isLoading = (loginProps == null ? void 0 : loginProps.loading) || (registerProps == null ? void 0 : registerProps.loading) || (otherLoginProps == null ? void 0 : otherLoginProps.loading);
-  const { theme } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
   const switchForm = (0, import_react.useCallback)(() => {
     if (isLoading) {
       import_design2.message.warning(locale.isLoadingWarn);
@@ -97,102 +97,104 @@ var Login = (props) => {
     setShowActivate(!showActivate);
   }, [showActivate, isLoading]);
   const showWaterMark = !showRegister;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.App, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      className: (0, import_classnames.default)(`${prefix}-container`, {
-        [`${prefix}-container-with-board`]: board,
-        [`${prefix}-container-mobile`]: isMobile
-      }),
-      style,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-bg`, style: { backgroundImage: `url(${bgImage})` }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefix}-info`, children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-welcome`, children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-start`, children: description })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefix}-card`, children: [
-          showLocale && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LocaleDropdown.default, { locales, className: `${prefix}-locale` }),
-          board && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-board`, children: board }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefix}-content`, children: [
-            showActivate ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: logo, alt: "", className: `${prefix}-activate-logo` }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_design.Divider,
-                {
-                  style: {
-                    marginTop: 14,
-                    marginBottom: 20
+  return wrapSSR(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.App, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_classnames.default)(`${prefixCls}-container`, {
+          [`${prefixCls}-container-with-board`]: board,
+          [`${prefixCls}-container-mobile`]: isMobile
+        }),
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-bg`, style: { backgroundImage: `url(${bgImage})` }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-info`, children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-welcome`, children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-start`, children: description })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-card`, children: [
+            showLocale && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LocaleDropdown.default, { locales, className: `${prefixCls}-locale` }),
+            board && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-board`, children: board }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-content`, children: [
+              showActivate ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: logo, alt: "", className: `${prefixCls}-activate-logo` }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_design.Divider,
+                  {
+                    style: {
+                      marginTop: 14,
+                      marginBottom: 20
+                    }
                   }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Typography.Title, { level: 3, children: locale.activeTitle }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Typography.Paragraph, { children: locale.activeTitleDescrition }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_ActivateForm.default,
-                {
-                  ...activateFormProps,
-                  locale,
-                  errorMessage: alertProps == null ? void 0 : alertProps.message,
-                  goBack
-                }
-              )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: showRegister ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: logo, alt: "", className: `${prefix}-reigster-logo` }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_design.Divider,
-                {
-                  style: {
-                    marginTop: 14,
-                    marginBottom: 20
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Typography.Title, { level: 3, children: locale.activeTitle }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Typography.Paragraph, { children: locale.activeTitleDescrition }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ActivateForm.default,
+                  {
+                    ...activateFormProps,
+                    locale,
+                    errorMessage: alertProps == null ? void 0 : alertProps.message,
+                    goBack
                   }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Typography.Title, { level: 3, children: locale.registerTitle }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_RegisterForm.default,
-                {
-                  ...registerProps,
-                  locale,
-                  errorMessage: alertProps == null ? void 0 : alertProps.message
-                }
-              )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: logo, alt: "", className: `${prefix}-logo` }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_LoginForm.default,
-                {
-                  ...loginProps,
-                  otherLoginProps,
-                  locale,
-                  errorMessage: alertProps == null ? void 0 : alertProps.message,
-                  showAuthCode,
-                  showOtherLoginButton,
-                  authCodeImg,
-                  onAuthCodeImgChange
-                }
-              )
-            ] }) }),
-            !!enableRegister && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-switch-btn`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Button, { type: "link", onClick: switchForm, "data-testid": "login.register.btn", children: showRegister ? locale.switchLoginLabel : locale.switchRegisterLabel }) }),
-            showWaterMark ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                className: `${prefix}-watermark-wrapper`,
-                style: { paddingLeft: showAuthCode ? 96 : 0 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "img",
+                )
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: showRegister ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: logo, alt: "", className: `${prefixCls}-reigster-logo` }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_design.Divider,
+                  {
+                    style: {
+                      marginTop: 14,
+                      marginBottom: 20
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Typography.Title, { level: 3, children: locale.registerTitle }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_RegisterForm.default,
+                  {
+                    ...registerProps,
+                    locale,
+                    errorMessage: alertProps == null ? void 0 : alertProps.message
+                  }
+                )
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: logo, alt: "", className: `${prefixCls}-logo` }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_LoginForm.default,
                   {
-                    src: (theme == null ? void 0 : theme.isDark) ? import_oceanbase_logo_dark.default : import_oceanbase_logo.default,
-                    alt: "",
-                    className: `${prefix}-watermark`
+                    ...loginProps,
+                    otherLoginProps,
+                    locale,
+                    errorMessage: alertProps == null ? void 0 : alertProps.message,
+                    showAuthCode,
+                    showOtherLoginButton,
+                    authCodeImg,
+                    onAuthCodeImgChange
                   }
                 )
-              }
-            ) : null
+              ] }) }),
+              !!enableRegister && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-switch-btn`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Button, { type: "link", onClick: switchForm, "data-testid": "login.register.btn", children: showRegister ? locale.switchLoginLabel : locale.switchRegisterLabel }) }),
+              showWaterMark ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: `${prefixCls}-watermark-wrapper`,
+                  style: { paddingLeft: showAuthCode ? 96 : 0 },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "img",
+                    {
+                      src: (theme == null ? void 0 : theme.isDark) ? import_oceanbase_logo_dark.default : import_oceanbase_logo.default,
+                      alt: "",
+                      className: `${prefixCls}-watermark`
+                    }
+                  )
+                }
+              ) : null
+            ] })
           ] })
-        ] })
-      ]
-    }
-  ) });
+        ]
+      }
+    ) })
+  );
 };
 var Login_default = (0, import_LocaleWrapper.default)({
   componentName: "Login",

package/lib/Login/locale/ja-JP.d.ts

@@ -0,0 +1,28 @@
+declare const _default: {
+    usernamePlaceholder: string;
+    usernameMessage: string;
+    passwordPlaceholder: string;
+    passwordMessage: string;
+    loginText: string;
+    otherLoginText: string;
+    isLoadingWarn: string;
+    usernameLabel: string;
+    switchLoginLabel: string;
+    switchRegisterLabel: string;
+    userExistMessage: string;
+    usernameFormatMessage: string;
+    samePasswordMessage: string;
+    usernameHelp: string;
+    usernameLengthMessage: string;
+    passwordLabel: string;
+    passwordHelp: string;
+    confirmPwdLabel: string;
+    confirmPwdMessage: string;
+    registerBtn: string;
+    registerTitle: string;
+    activeTitle: string;
+    activeTitleDescrition: string;
+    activeSubmitBtn: string;
+    activeBackBtn: string;
+};
+export default _default;

package/lib/Login/locale/ja-JP.js

@@ -0,0 +1,51 @@
+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/Login/locale/ja-JP.ts
+var ja_JP_exports = {};
+__export(ja_JP_exports, {
+  default: () => ja_JP_default
+});
+module.exports = __toCommonJS(ja_JP_exports);
+var ja_JP_default = {
+  usernamePlaceholder: "アカウントを入力してください",
+  usernameMessage: "アカウントを入力してください",
+  passwordPlaceholder: "パスワードを入力してください",
+  passwordMessage: "パスワードを入力してください",
+  loginText: "ログイン",
+  otherLoginText: "サードパーティログイン",
+  isLoadingWarn: "実行中",
+  usernameLabel: "ユーザー名",
+  switchLoginLabel: "既存アカウントでログイン",
+  switchRegisterLabel: "アカウント登録",
+  userExistMessage: "ユーザー名は既に存在します",
+  usernameFormatMessage: "ユーザー名の形式が要件を満たしていません",
+  samePasswordMessage: "確認パスワードが一致しません",
+  usernameHelp: "英字、数字、アンダースコア、特殊文字 (._+@#$%) をサポート、長さ 4~48 文字",
+  usernameLengthMessage: "ユーザー名の長さは 4~48 文字",
+  passwordLabel: "パスワード",
+  passwordHelp: "少なくとも 2 桁の数字、2 文字の大文字、2 文字の小文字、2 文字の特殊文字 (._+@#$%) を含み、長さ 8~32 文字",
+  confirmPwdLabel: "パスワード確認",
+  confirmPwdMessage: "パスワードを再度入力してください",
+  registerBtn: "今すぐ登録",
+  registerTitle: "アカウント登録",
+  activeTitle: "パスワードを設定してアカウントを有効化",
+  activeTitleDescrition: "アカウントのセキュリティのため、パスワードを設定してアカウントを有効化する必要があります",
+  activeSubmitBtn: "有効化",
+  activeBackBtn: "前のステップに戻る"
+};

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

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

package/lib/Login/style/index.js

@@ -0,0 +1,267 @@
+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/Login/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genLoginStyle: () => genLoginStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genLoginStyle = (token) => {
+  const {
+    componentCls,
+    antCls,
+    iconCls,
+    colorTextTertiary,
+    colorPrimary,
+    colorBorder,
+    borderRadius
+  } = token;
+  return {
+    [`${componentCls}-container`]: {
+      display: "flex",
+      justifyContent: "space-between",
+      minWidth: 960,
+      height: "100vh",
+      minHeight: 600,
+      overflow: "auto",
+      [`${componentCls}-bg`]: {
+        width: "40%",
+        height: "100%",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        [`${componentCls}-info`]: {
+          margin: "185px 48px 0 48px",
+          color: "#fff",
+          fontWeight: token.fontWeightStrong,
+          fontSize: 56,
+          fontFamily: "PingFangSC",
+          [`${componentCls}-start`]: {
+            marginTop: 22,
+            color: "#f4f4f4",
+            fontWeight: token.fontWeightStrong,
+            fontSize: 32,
+            letterSpacing: 0
+          }
+        }
+      },
+      [`${componentCls}-card`]: {
+        display: "flex",
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        minHeight: 600,
+        backgroundColor: "#fff",
+        [`${componentCls}-locale`]: {
+          position: "absolute",
+          top: 24,
+          right: 24,
+          color: colorTextTertiary,
+          fontFamily: "PingFangSC-Regular",
+          cursor: "pointer"
+        },
+        [`${componentCls}-board`]: {
+          position: "absolute",
+          top: 48
+        },
+        [`${componentCls}-content`]: {
+          marginTop: -60,
+          width: 404,
+          [`${componentCls}-logo`]: {
+            display: "block",
+            height: 68,
+            margin: "0 auto",
+            marginBottom: 40
+          },
+          [`${componentCls}-activate-logo, ${componentCls}-reigster-logo`]: {
+            display: "block",
+            height: 68,
+            margin: "0 auto"
+          },
+          [`${componentCls}-register, ${componentCls}-activate`]: {
+            [`${antCls}-form-item-with-help`]: {
+              marginBottom: 24
+            }
+          },
+          [`${componentCls}-form`]: {
+            width: "100%",
+            "input::placeholder": {
+              fontSize: 14
+            },
+            [`${antCls}-form-item`]: {
+              marginBottom: 24,
+              paddingBottom: 0
+            },
+            [`${antCls}-input-affix-wrapper`]: {
+              [`${antCls}-input:not(${antCls}-input-disabled)`]: {
+                boxShadow: "inset 0 0 0 1000px white !important"
+              },
+              [`${antCls}-input:-internal-autofill-selected`]: {
+                boxShadow: "inset 0 0 0 1000px white !important"
+              },
+              [`${antCls}-input:focus:-internal-autofill-selected`]: {
+                boxShadow: "inset 0 0 0 1000px white !important"
+              }
+            },
+            [`${antCls}-input-affix-wrapper ${antCls}-input:not(:first-child)`]: {
+              paddingLeft: 8
+            },
+            [`${antCls}-input-affix-wrapper-focused`]: {
+              borderColor: colorPrimary
+            },
+            [`${componentCls}-form-focus-input`]: {
+              [`${antCls}-input-prefix`]: {
+                [`${iconCls}`]: {
+                  color: colorPrimary
+                }
+              }
+            }
+          },
+          [`${componentCls}-auth-code`]: {
+            display: "flex",
+            alignItems: "start",
+            width: "100%",
+            marginBottom: 24,
+            paddingBottom: 0,
+            [`> ${antCls}-space-item:first-child`]: {
+              flex: 1
+            },
+            [`${antCls}-form-item`]: {
+              marginBottom: 0
+            },
+            [`${componentCls}-code-btn`]: {
+              position: "relative",
+              height: 38,
+              border: `1px solid ${colorBorder}`,
+              borderRadius,
+              cursor: "pointer",
+              img: {
+                height: 38,
+                borderRadius
+              },
+              [`${componentCls}-code-mask`]: {
+                position: "absolute",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                height: 38,
+                color: "#fff",
+                background: "rgba(0, 0, 0, 0.5)",
+                borderRadius,
+                cursor: "pointer",
+                opacity: 0,
+                transition: "opacity 0.3s",
+                inset: 0
+              },
+              [`&.${componentCls}-error, &:hover`]: {
+                [`${componentCls}-code-mask`]: {
+                  opacity: 1
+                }
+              }
+            }
+          },
+          [`${componentCls}-submit-btn`]: {},
+          [`${componentCls}-switch-btn`]: {
+            marginTop: 24,
+            textAlign: "center",
+            cursor: "pointer"
+          },
+          [`${componentCls}-watermark-wrapper`]: {
+            position: "absolute",
+            bottom: 40,
+            width: 404,
+            textAlign: "center",
+            [`${componentCls}-watermark`]: {
+              height: 16
+            }
+          },
+          [`${componentCls}-alert`]: {
+            marginBottom: 24,
+            borderRadius
+          }
+        }
+      },
+      "@media (max-height: 650px)": {
+        [`${componentCls}-watermark-wrapper`]: {
+          position: "absolute",
+          top: 600
+        }
+      }
+    },
+    [`${componentCls}-container-with-board`]: {
+      [`${componentCls}-card`]: {
+        [`${componentCls}-content`]: {
+          marginTop: 0
+        }
+      }
+    },
+    [`${componentCls}-container-mobile`]: {
+      flexDirection: "column",
+      minWidth: "auto",
+      [`${componentCls}-banner`]: {
+        height: "25%"
+      },
+      [`${componentCls}-bg`]: {
+        width: "100%"
+      },
+      [`${componentCls}-card`]: {
+        alignItems: "start",
+        width: "100%",
+        height: "75%",
+        marginTop: -48,
+        padding: "0 32px",
+        borderRadius: "16px 16px 0 0",
+        position: "relative",
+        [`${componentCls}-board`]: {
+          top: 8,
+          left: 24
+        },
+        [`${componentCls}-locale`]: {
+          top: 8
+        },
+        [`${componentCls}-content`]: {
+          width: "100%",
+          marginTop: 40,
+          [`${componentCls}-logo`]: {
+            height: 48,
+            marginBottom: 24
+          },
+          [`${componentCls}-watermark-wrapper`]: {
+            width: "100%",
+            position: "static",
+            marginTop: 96
+          }
+        }
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Login", (token) => {
+    return [genLoginStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genLoginStyle
+});

package/lib/NavMenu/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.less';
 export interface NavMenuItem {
     key: string;
     title: string;
@@ -15,5 +14,5 @@ export interface NavMenuProps {
     className?: string;
     style?: React.CSSProperties;
 }
-declare const _default: (props: NavMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const _default: (props: NavMenuProps) => React.JSX.Element;
 export default _default;

package/lib/NavMenu/index.js

@@ -36,13 +36,14 @@ var import_design = require("@oceanbase/design");
 var import_lodash = require("lodash");
 var import_path_to_regexp = require("path-to-regexp");
 var import_react = require("react");
-var import_util = require("../_util");
 var import_useNavigate = __toESM(require("../_util/useNavigate"));
-var import_index = require("./index.less");
+var import_style = __toESM(require("./style"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var prefix = (0, import_util.getPrefix)("menu");
 var NavMenu_default = (props) => {
   const { menuList, className, style } = props;
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("menu");
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
   const [selectedKeys, setSelectedKeys] = (0, import_react.useState)(["0"]);
   const [menus, setMenus] = (0, import_react.useState)([]);
   const location = window.location;
@@ -96,18 +97,20 @@ var NavMenu_default = (props) => {
     },
     [navigate]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-container ${className}`, style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_design.Menu,
-    {
-      style: { height: "100%", borderRight: 0 },
-      defaultSelectedKeys: ["0"],
-      selectedKeys,
-      onSelect: onMenuItemSelect,
-      mode: "inline",
-      theme: "light",
-      children: menus.map((config) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { disabled: config.disabled ?? false, children: config.openNewTab ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { id: config.id, href: config.link, target: "_blank", rel: "noreferrer", children: config.title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { id: config.id, onClick: () => onMenuClick(config.link), children: config.title }) }, config.key);
-      })
-    }
-  ) });
+  return wrapSSR(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-container ${className || ""}`, style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_design.Menu,
+      {
+        style: { height: "100%", borderRight: 0 },
+        defaultSelectedKeys: ["0"],
+        selectedKeys,
+        onSelect: onMenuItemSelect,
+        mode: "inline",
+        theme: "light",
+        children: menus.map((config) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { disabled: config.disabled ?? false, children: config.openNewTab ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { id: config.id, href: config.link, target: "_blank", rel: "noreferrer", children: config.title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { id: config.id, onClick: () => onMenuClick(config.link), children: config.title }) }, config.key);
+        })
+      }
+    ) })
+  );
 };