@oceanbase/ui 0.2.28 → 0.2.30

package/es/ContentWithQuestion/index.d.ts

@@ -1,10 +1,10 @@
+import { TooltipProps } from '@oceanbase/design';
 import React from 'react';
-import './index.less';
 export interface ContentWithQuestionProps {
     content?: React.ReactNode;
-    tooltip?: any;
+    tooltip?: TooltipProps;
     prefixIcon?: React.ReactNode | boolean;
-    suffixIcon?: React.ReactNode;
+    suffixIcon?: React.ReactNode | boolean;
     className?: string;
     style?: React.CSSProperties;
     onClick?: (e: React.SyntheticEvent) => void;

package/es/ContentWithQuestion/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["content", "tooltip", "prefixIcon", "suffixIcon", "className", "children"];
+var _excluded = ["prefixCls", "content", "tooltip", "prefixIcon", "suffixIcon", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -8,41 +8,44 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { QuestionCircleOutlined } from '@oceanbase/icons';
-import { Space, Tooltip } from '@oceanbase/design';
+import { ConfigProvider, Space, Tooltip } from '@oceanbase/design';
 import classNames from 'classnames';
-import React, { isValidElement } from 'react';
-import { getPrefix } from "../_util";
-import "./index.less";
+import React, { useContext, isValidElement } from 'react';
+import useStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var prefix = getPrefix('content-with-question');
 var ContentWithQuestion = function ContentWithQuestion(_ref) {
   var _classNames;
-  var content = _ref.content,
+  var customizePrefixCls = _ref.prefixCls,
+    content = _ref.content,
     tooltip = _ref.tooltip,
     _ref$prefixIcon = _ref.prefixIcon,
     prefixIcon = _ref$prefixIcon === void 0 ? null : _ref$prefixIcon,
     _ref$suffixIcon = _ref.suffixIcon,
-    suffixIcon = _ref$suffixIcon === void 0 ? /*#__PURE__*/_jsx(QuestionCircleOutlined, {
-      className: "".concat(prefix, "-help")
-    }) : _ref$suffixIcon,
+    suffixIcon = _ref$suffixIcon === void 0 ? true : _ref$suffixIcon,
     className = _ref.className,
     children = _ref.children,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  // FIXME: antd 已经废弃 icon type 的用法，该组件也需要做相应处理，后面将会是传入 Icon 的形式而非 type
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('content-with-question', customizePrefixCls);
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
   var getIcon = function getIcon(iconConfig) {
     return iconConfig ? /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, tooltip), {}, {
       children: /*#__PURE__*/isValidElement(iconConfig) ? iconConfig : /*#__PURE__*/_jsx(QuestionCircleOutlined, {
-        className: "".concat(prefix, "-help")
+        className: "".concat(prefixCls, "-help")
       })
     })) : null;
   };
-  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
-    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "-item"), true), _defineProperty(_classNames, className, !!className), _classNames))
+  return wrapSSR( /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+    // eslint-disable-next-line react/no-unknown-property
+    prefixCls: customizePrefixCls,
+    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-item"), true), _defineProperty(_classNames, className, !!className), _classNames))
   }, restProps), {}, {
     children: /*#__PURE__*/_jsxs(Space, {
       children: [getIcon(prefixIcon === true ? /*#__PURE__*/_jsx(QuestionCircleOutlined, {
-        className: "".concat(prefix, "-help"),
+        className: "".concat(prefixCls, "-help"),
         style: {
           marginRight: 4
         }
@@ -51,6 +54,6 @@ var ContentWithQuestion = function ContentWithQuestion(_ref) {
         children: content !== null && content !== void 0 ? content : children
       }), getIcon(suffixIcon)]
     })
-  }));
+  })));
 };
 export default ContentWithQuestion;

package/es/ContentWithQuestion/style/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+export declare const genContentWithQuestionStyle: GenerateStyle<any>;
+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/es/ContentWithQuestion/style/index.js

@@ -0,0 +1,28 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
+export var genContentWithQuestionStyle = function genContentWithQuestionStyle(token) {
+  var _$concat;
+  var componentCls = token.componentCls,
+    paddingSM = token.paddingSM;
+  return _defineProperty({}, "".concat(componentCls, "-item"), (_$concat = {
+    display: 'inline-flex',
+    alignItems: 'center'
+  }, _defineProperty(_$concat, "".concat(componentCls, "-prefix"), {
+    marginRight: 8
+  }), _defineProperty(_$concat, "".concat(componentCls, "-suffix"), {
+    marginLeft: 8
+  }), _defineProperty(_$concat, "".concat(componentCls, "-help"), {
+    cursor: 'help'
+  }), _defineProperty(_$concat, "".concat(componentCls, "-color"), {
+    color: 'red'
+  }), _$concat));
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('ContentWithQuestion', function (token) {
+    return [genContentWithQuestionStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

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

package/es/Login/index.d.ts

@@ -61,6 +61,7 @@ export interface LoginProps extends FormProps {
     onShowRegisterChange?: (isShow: boolean) => void;
     onShowActivateChange?: (isShow: boolean) => void;
     onAuthCodeImgChange?: () => void;
+    isMobile?: boolean;
 }
 declare const _default: any;
 export default _default;

package/es/Login/index.js

@@ -11,13 +11,12 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useControllableValue } from 'ahooks';
-import { App, ConfigProvider, Button, Divider, Menu, Typography } from '@oceanbase/design';
+import { App, ConfigProvider, Button, Divider, Typography } from '@oceanbase/design';
 import { message } from '@oceanbase/design';
 import classNames from 'classnames';
 import React, { useContext, useCallback } from 'react';
-import { LOCALE_LIST } from "../constant";
 import LocaleWrapper from "../locale/LocaleWrapper";
-import { getPrefix, setLocale } from "../_util";
+import { getPrefix } from "../_util";
 import ActivateForm from "./ActivateForm";
 import zhCN from "./locale/zh-CN";
 import LoginForm from "./LoginForm";
@@ -33,6 +32,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var prefix = getPrefix('login');
 var Login = function Login(props) {
+  var _classNames;
   var logo = props.logo,
     bgImage = props.bgImage,
     title = props.title,
@@ -51,6 +51,7 @@ var Login = function Login(props) {
     showOtherLoginButton = props.showOtherLoginButton,
     authCodeImg = props.authCodeImg,
     onAuthCodeImgChange = props.onAuthCodeImgChange,
+    isMobile = props.isMobile,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style;
   var _useControllableValue = useControllableValue(props, {
@@ -84,23 +85,10 @@ var Login = function Login(props) {
     }
     setShowActivate(!showActivate);
   }, [showActivate, isLoading]);
-  var localeMenu = /*#__PURE__*/_jsx(Menu, {
-    onClick: function onClick(_ref) {
-      var key = _ref.key;
-      setLocale(key);
-    },
-    children: LOCALE_LIST.filter(function (item) {
-      return !locales || locales.includes(item.value);
-    }).map(function (item) {
-      return /*#__PURE__*/_jsx(Menu.Item, {
-        children: item.label
-      }, item.value);
-    })
-  });
   var showWaterMark = !showRegister;
   return /*#__PURE__*/_jsx(App, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: classNames("".concat(prefix, "-container"), _defineProperty({}, "".concat(prefix, "-container-with-board"), board)),
+      className: classNames("".concat(prefix, "-container"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "-container-with-board"), board), _defineProperty(_classNames, "".concat(prefix, "-container-mobile"), isMobile), _classNames)),
       style: style,
       children: [/*#__PURE__*/_jsx("div", {
         className: "".concat(prefix, "-bg"),

package/es/Login/index.less

@@ -42,7 +42,7 @@
     background-color: #fff;
 
     .@{prefix}-locale {
-      position: fixed;
+      position: absolute;
       top: 24px;
       right: 24px;
       color: @colorTextTertiary;
@@ -57,6 +57,7 @@
 
     .@{prefix}-content {
       margin-top: -60px;
+      width: 404px;
       .@{prefix}-logo {
         display: block;
         height: 68px;
@@ -86,13 +87,11 @@
         }
 
         .@{prefixCls}-form-item {
-          width: 404px;
           margin-bottom: 24px;
           padding-bottom: 0;
         }
 
         .@{prefixCls}-input-affix-wrapper {
-          width: 404px;
           height: 40px;
           border-radius: 8px;
 
@@ -177,7 +176,6 @@
         }
       }
       .@{prefix}-submit-btn {
-        width: 404px;
         height: 40px;
         border-radius: 8px;
       }
@@ -200,7 +198,6 @@
       }
 
       .@{prefix}-alert {
-        width: 404px;
         margin-bottom: 24px;
         border-radius: 8px;
       }
@@ -225,3 +222,46 @@
     }
   }
 }
+
+.@{prefix}-container-mobile {
+  flex-direction: column;
+  min-width: auto;
+  .@{prefix}-banner {
+    // 移动端设置百分比高度，避免使用 vh，否则安卓端打开软键盘会重新计算高度，导致 banner 图片高度出现跳变
+    height: 25%;
+  }
+  .@{prefix}-bg {
+    width: 100%;
+  }
+  .@{prefix}-card {
+    align-items: start;
+    width: 100%;
+    height: 75%;
+    margin-top: -48px;
+    padding: 0 32px;
+    border-radius: 16px 16px 0 0;
+    position: relative;
+    .@{prefix}-board {
+      top: 8px;
+      left: 24px;
+    }
+    .@{prefix}-locale {
+      top: 8px;
+    }
+    .@{prefix}-content {
+      width: 100%;
+      margin-top: 40px;
+      .@{prefix}-logo {
+        height: 48px;
+        margin-bottom: 24px;
+      }
+      .@{prefix}-watermark-wrapper {
+        // 移动端改为正常文档流，避免安卓端被软键盘顶起
+        width: calc(100% - 64px);
+        position: static;
+        width: 100%;
+        margin-top: 96px;
+      }
+    }
+  }
+}

package/lib/ContentWithQuestion/index.d.ts

@@ -1,10 +1,10 @@
+import { TooltipProps } from '@oceanbase/design';
 import React from 'react';
-import './index.less';
 export interface ContentWithQuestionProps {
     content?: React.ReactNode;
-    tooltip?: any;
+    tooltip?: TooltipProps;
     prefixIcon?: React.ReactNode | boolean;
-    suffixIcon?: React.ReactNode;
+    suffixIcon?: React.ReactNode | boolean;
     className?: string;
     style?: React.CSSProperties;
     onClick?: (e: React.SyntheticEvent) => void;

package/lib/ContentWithQuestion/index.js

@@ -36,41 +36,46 @@ var import_icons = require("@oceanbase/icons");
 var import_design = require("@oceanbase/design");
 var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
-var import_util = require("../_util");
-var import_index = require("./index.less");
-var prefix = (0, import_util.getPrefix)("content-with-question");
+var import_style = __toESM(require("./style"));
 var ContentWithQuestion = ({
+  prefixCls: customizePrefixCls,
   content,
   tooltip,
   prefixIcon = null,
-  suffixIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { className: `${prefix}-help` }),
+  suffixIcon = true,
   className,
   children,
   ...restProps
 }) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("content-with-question", customizePrefixCls);
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
   const getIcon = (iconConfig) => {
-    return iconConfig ? /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { ...tooltip }, (0, import_react.isValidElement)(iconConfig) ? iconConfig : /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { className: `${prefix}-help` })) : null;
+    return iconConfig ? /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { ...tooltip }, (0, import_react.isValidElement)(iconConfig) ? iconConfig : /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { className: `${prefixCls}-help` })) : null;
   };
-  return /* @__PURE__ */ import_react.default.createElement(
-    "span",
-    {
-      className: (0, import_classnames.default)({
-        [`${prefix}-item`]: true,
-        [className]: !!className
-      }),
-      ...restProps
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_design.Space, null, getIcon(
-      prefixIcon === true ? /* @__PURE__ */ import_react.default.createElement(
-        import_icons.QuestionCircleOutlined,
-        {
-          className: `${prefix}-help`,
-          style: {
-            marginRight: 4
+  return wrapSSR(
+    /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        prefixCls: customizePrefixCls,
+        className: (0, import_classnames.default)({
+          [`${prefixCls}-item`]: true,
+          [className]: !!className
+        }),
+        ...restProps
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_design.Space, null, getIcon(
+        prefixIcon === true ? /* @__PURE__ */ import_react.default.createElement(
+          import_icons.QuestionCircleOutlined,
+          {
+            className: `${prefixCls}-help`,
+            style: {
+              marginRight: 4
+            }
           }
-        }
-      ) : prefixIcon
-    ), /* @__PURE__ */ import_react.default.createElement("span", { "data-testid": "content" }, content ?? children), getIcon(suffixIcon))
+        ) : prefixIcon
+      ), /* @__PURE__ */ import_react.default.createElement("span", { "data-testid": "content" }, content ?? children), getIcon(suffixIcon))
+    )
   );
 };
 var ContentWithQuestion_default = ContentWithQuestion;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+export declare const genContentWithQuestionStyle: GenerateStyle<any>;
+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/ContentWithQuestion/style/index.js

@@ -0,0 +1,57 @@
+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/ContentWithQuestion/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genContentWithQuestionStyle: () => genContentWithQuestionStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genContentWithQuestionStyle = (token) => {
+  const { componentCls, paddingSM } = token;
+  return {
+    [`${componentCls}-item`]: {
+      display: "inline-flex",
+      alignItems: "center",
+      [`${componentCls}-prefix`]: {
+        marginRight: 8
+      },
+      [`${componentCls}-suffix`]: {
+        marginLeft: 8
+      },
+      [`${componentCls}-help`]: {
+        cursor: "help"
+      },
+      [`${componentCls}-color`]: {
+        color: "red"
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("ContentWithQuestion", (token) => {
+    return [genContentWithQuestionStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genContentWithQuestionStyle
+});

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

package/lib/Login/index.d.ts

@@ -61,6 +61,7 @@ export interface LoginProps extends FormProps {
     onShowRegisterChange?: (isShow: boolean) => void;
     onShowActivateChange?: (isShow: boolean) => void;
     onAuthCodeImgChange?: () => void;
+    isMobile?: boolean;
 }
 declare const _default: any;
 export default _default;

package/lib/Login/index.js

@@ -37,7 +37,6 @@ var import_design = require("@oceanbase/design");
 var import_design2 = require("@oceanbase/design");
 var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
-var import_constant = require("../constant");
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
 var import_util = require("../_util");
 var import_ActivateForm = __toESM(require("./ActivateForm"));
@@ -69,6 +68,7 @@ var Login = (props) => {
     showOtherLoginButton,
     authCodeImg,
     onAuthCodeImgChange,
+    isMobile,
     style = {}
   } = props;
   const [showRegister, setShowRegister] = (0, import_ahooks.useControllableValue)(props, {
@@ -95,21 +95,13 @@ var Login = (props) => {
     }
     setShowActivate(!showActivate);
   }, [showActivate, isLoading]);
-  const localeMenu = /* @__PURE__ */ import_react.default.createElement(
-    import_design.Menu,
-    {
-      onClick: ({ key }) => {
-        (0, import_util.setLocale)(key);
-      }
-    },
-    import_constant.LOCALE_LIST.filter((item) => !locales || locales.includes(item.value)).map((item) => /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: item.value }, item.label))
-  );
   const showWaterMark = !showRegister;
   return /* @__PURE__ */ import_react.default.createElement(import_design.App, null, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: (0, import_classnames.default)(`${prefix}-container`, {
-        [`${prefix}-container-with-board`]: board
+        [`${prefix}-container-with-board`]: board,
+        [`${prefix}-container-mobile`]: isMobile
       }),
       style
     },

package/lib/Login/index.less

@@ -42,7 +42,7 @@
     background-color: #fff;
 
     .@{prefix}-locale {
-      position: fixed;
+      position: absolute;
       top: 24px;
       right: 24px;
       color: @colorTextTertiary;
@@ -57,6 +57,7 @@
 
     .@{prefix}-content {
       margin-top: -60px;
+      width: 404px;
       .@{prefix}-logo {
         display: block;
         height: 68px;
@@ -86,13 +87,11 @@
         }
 
         .@{prefixCls}-form-item {
-          width: 404px;
           margin-bottom: 24px;
           padding-bottom: 0;
         }
 
         .@{prefixCls}-input-affix-wrapper {
-          width: 404px;
           height: 40px;
           border-radius: 8px;
 
@@ -177,7 +176,6 @@
         }
       }
       .@{prefix}-submit-btn {
-        width: 404px;
         height: 40px;
         border-radius: 8px;
       }
@@ -200,7 +198,6 @@
       }
 
       .@{prefix}-alert {
-        width: 404px;
         margin-bottom: 24px;
         border-radius: 8px;
       }
@@ -225,3 +222,46 @@
     }
   }
 }
+
+.@{prefix}-container-mobile {
+  flex-direction: column;
+  min-width: auto;
+  .@{prefix}-banner {
+    // 移动端设置百分比高度，避免使用 vh，否则安卓端打开软键盘会重新计算高度，导致 banner 图片高度出现跳变
+    height: 25%;
+  }
+  .@{prefix}-bg {
+    width: 100%;
+  }
+  .@{prefix}-card {
+    align-items: start;
+    width: 100%;
+    height: 75%;
+    margin-top: -48px;
+    padding: 0 32px;
+    border-radius: 16px 16px 0 0;
+    position: relative;
+    .@{prefix}-board {
+      top: 8px;
+      left: 24px;
+    }
+    .@{prefix}-locale {
+      top: 8px;
+    }
+    .@{prefix}-content {
+      width: 100%;
+      margin-top: 40px;
+      .@{prefix}-logo {
+        height: 48px;
+        margin-bottom: 24px;
+      }
+      .@{prefix}-watermark-wrapper {
+        // 移动端改为正常文档流，避免安卓端被软键盘顶起
+        width: calc(100% - 64px);
+        position: static;
+        width: 100%;
+        margin-top: 96px;
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/ui",
-  "version": "0.2.28",
+  "version": "0.2.30",
   "description": "The UI library based on OceanBase Design",
   "keywords": [
     "oceanbase",
@@ -37,7 +37,7 @@
     "@ant-design/cssinjs": "^1.17.2",
     "@ant-design/pro-components": "^2.6.34",
     "@ant-design/pro-layout": "^7.17.8",
-    "@oceanbase/design": "^0.2.27",
+    "@oceanbase/design": "^0.2.29",
     "@oceanbase/icons": "^0.2.9",
     "@oceanbase/util": "^0.2.11",
     "ahooks": "^2.10.14",
@@ -52,7 +52,7 @@
     "moment": "^2.29.4",
     "path-to-regexp": "^6.2.1",
     "randexp": "^0.5.3",
-    "rc-util": "^5.38.0",
+    "rc-util": "^5.38.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-json-view": "^1.21.3",
     "react-split-pane": "^0.1.92",
@@ -66,5 +66,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "debd02b577d782f8a403fe0f6133efb172168898"
+  "gitHead": "aeddc96820230db03221e2ee8f5691dcb9179bd2"
 }