@oceanbase/ui 0.2.25 → 0.2.27

package/es/BackgroundTaskManager/index.d.ts

@@ -40,6 +40,7 @@ export interface BackgroundTaskManagerRef {
     fetchPreset: () => ITaskMgrPreset;
     fetchQueue: () => ITaskMgrQueue;
     fetchQueueNsById: (id: TaskMgrID) => Namespace;
+    closeNotification: (key: string) => void;
 }
 interface IProps {
     rollingFrequency?: number;

package/es/BackgroundTaskManager/index.js

@@ -117,6 +117,9 @@ export default /*#__PURE__*/forwardRef(function (props, ref) {
   var fetchQueueNsById = useCallback(function (id) {
     return queue[id];
   }, [queue]);
+  var closeNotification = useCallback(function (key) {
+    notification.destroy(key);
+  }, []);
   useImperativeHandle(ref, function () {
     return {
       pushQueue: pushQueue,
@@ -126,7 +129,8 @@ export default /*#__PURE__*/forwardRef(function (props, ref) {
       setPreset: setPreset,
       fetchPreset: fetchPreset,
       fetchQueue: fetchQueue,
-      fetchQueueNsById: fetchQueueNsById
+      fetchQueueNsById: fetchQueueNsById,
+      closeNotification: closeNotification
     };
   });
   var getLocalStorageIds = useCallback(function () {

package/es/BasicLayout/Header.js

@@ -129,11 +129,9 @@ var Header = function Header(_ref) {
               children: locale.help
             })]
           })
-        }), showLocale && /*#__PURE__*/_jsx("span", {
-          className: "".concat(prefixCls, "-extra-item"),
-          children: /*#__PURE__*/_jsx(LocaleDropdown, {
-            locales: locales || langs
-          })
+        }), showLocale && /*#__PURE__*/_jsx(LocaleDropdown, {
+          locales: locales || langs,
+          className: "".concat(prefixCls, "-extra-item")
         }), userMenu ? /*#__PURE__*/_jsx(Dropdown, {
           overlay: userMenu,
           children: /*#__PURE__*/_jsx(Button, {
@@ -184,12 +182,10 @@ var Header = function Header(_ref) {
               children: /*#__PURE__*/_jsx(ReadFilled, {})
             })
           })
-        }), showLocale && /*#__PURE__*/_jsx("span", {
-          className: "".concat(prefixCls, "-extra-item"),
-          children: /*#__PURE__*/_jsx(LocaleDropdown, {
-            showLabel: true,
-            locales: locales || langs
-          })
+        }), showLocale && /*#__PURE__*/_jsx(LocaleDropdown, {
+          showLabel: true,
+          locales: locales || langs,
+          className: "".concat(prefixCls, "-extra-item")
         }), userMenu ? /*#__PURE__*/_jsx("span", {
           className: "".concat(prefixCls, "-extra-item"),
           children: /*#__PURE__*/_jsx(Dropdown, {

package/es/BasicLayout/index.js

@@ -15,7 +15,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 { CaretRightFilled, LeftOutlined, RightOutlined } from '@oceanbase/icons';
 import { setAlpha } from '@ant-design/pro-components';
-import { Typography, token } from '@oceanbase/design';
+import { Typography, theme } from '@oceanbase/design';
 import { isNullValue } from '@oceanbase/util';
 import { ConfigProvider, Divider, Layout, Menu, Tooltip } from '@oceanbase/design';
 import classNames from 'classnames';
@@ -60,6 +60,8 @@ var BasicLayout = function BasicLayout(_ref) {
     className = _ref.className,
     customizePrefixCls = _ref.prefixCls,
     restProps = _objectWithoutProperties(_ref, _excluded);
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token;
   var _useContext = useContext(ConfigProvider.ConfigContext),
     getPrefixCls = _useContext.getPrefixCls;
   var prefixCls = getPrefixCls('pro-basic-layout', customizePrefixCls);

package/es/BasicLayout/style/Header.js

@@ -5,8 +5,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genHeaderStyle = function genHeaderStyle(token) {
   var _$concat2, _$concat5, _$concat7, _ref;
-  var antCls = token.antCls,
-    componentCls = token.componentCls;
+  var componentCls = token.componentCls;
   return _ref = {}, _defineProperty(_ref, "".concat(componentCls), (_$concat5 = {
     position: 'fixed',
     zIndex: 10,

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

package/es/Highlight/index.js

@@ -21,7 +21,7 @@ import React, { useEffect, useState } from 'react';
 import { default as javascript, default as jsx } from "./languages/javascript";
 // tsx 本质上也是采用typescript进行解析，hljs做了支持
 import { CheckOutlined, CopyOutlined } from '@oceanbase/icons';
-import { token } from '@oceanbase/design';
+import { theme as obTheme } from '@oceanbase/design';
 import { message } from '@oceanbase/design';
 import classNames from 'classnames';
 import CopyToClipboard from 'react-copy-to-clipboard';
@@ -121,6 +121,8 @@ var Highlight = function Highlight(props) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     codeBlock = _React$useState2[0],
     setCodeBlock = _React$useState2[1];
+  var _obTheme$useToken = obTheme.useToken(),
+    token = _obTheme$useToken.token;
 
   // 按需加载语言
   useEffect(function () {

package/es/LocaleDropdown/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 = ["locales", "showLabel"];
+var _excluded = ["locales", "showLabel", "className"];
 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; }
@@ -12,13 +12,13 @@ import { findByValue } from '@oceanbase/util';
 import { Dropdown, Menu, Space } from '@oceanbase/design';
 import React from 'react';
 import { LOCALE_LIST } from "../constant";
-import { getLocale, getPrefix, setLocale } from "../_util";
+import { getLocale, setLocale } from "../_util";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var prefix = getPrefix('layout-header');
 var LocaleDropdown = function LocaleDropdown(_ref) {
   var locales = _ref.locales,
     showLabel = _ref.showLabel,
+    className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   // 语言切换菜单
   var localeMenu = /*#__PURE__*/_jsx(Menu, {
@@ -51,7 +51,7 @@ var LocaleDropdown = function LocaleDropdown(_ref) {
       },
       children: findByValue(LOCALE_LIST, getLocale()).minLabel
     }) : /*#__PURE__*/_jsxs(Space, {
-      className: "".concat(prefix, "-extra-item"),
+      className: className,
       children: [/*#__PURE__*/_jsx(GlobalOutlined, {}), findByValue(LOCALE_LIST, getLocale()).shortLabel]
     })
   }));

package/es/Login/LoginForm.js

@@ -17,7 +17,7 @@ import { LockOutlined, SafetyCertificateOutlined, SyncOutlined, UserOutlined } f
 import { Alert, Button, Form, Input, Space } from '@oceanbase/design';
 import classNames from 'classnames';
 import React, { useState } from 'react';
-import { token } from '@oceanbase/design';
+import { theme } from '@oceanbase/design';
 import { getPrefix } from "../_util";
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -33,6 +33,8 @@ var Login = function Login(_ref) {
     otherLoginProps = _ref.otherLoginProps,
     onAuthCodeImgChange = _ref.onAuthCodeImgChange,
     restProps = _objectWithoutProperties(_ref, _excluded);
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     focusInput = _useState2[0],

package/es/Login/index.js

@@ -119,11 +119,9 @@ var Login = function Login(props) {
         })
       }), /*#__PURE__*/_jsxs("div", {
         className: "".concat(prefix, "-card"),
-        children: [showLocale && /*#__PURE__*/_jsx("span", {
-          className: "".concat(prefix, "-locale"),
-          children: /*#__PURE__*/_jsx(LocaleDropdown, {
-            locales: locales
-          })
+        children: [showLocale && /*#__PURE__*/_jsx(LocaleDropdown, {
+          locales: locales,
+          className: "".concat(prefix, "-locale")
         }), board && /*#__PURE__*/_jsx("div", {
           className: "".concat(prefix, "-board"),
           children: board

package/es/PageContainer/style/index.js

@@ -23,7 +23,13 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
     backgroundColor: colorBgLayout
   }, _defineProperty(_$concat3, "".concat(proComponentsCls, "-grid-content"), {
     minHeight: 'auto'
-  }), _defineProperty(_$concat3, "".concat(antCls, "-page-header"), (_$concat2 = {}, _defineProperty(_$concat2, "".concat(antCls, "-page-header-breadcrumb"), {
+  }), _defineProperty(_$concat3, "".concat(antCls, "-page-header"), (_$concat2 = {
+    // 减小内容区左右两侧间距
+    paddingInlineStart: paddingLG,
+    paddingInlineEnd: paddingLG,
+    paddingBlockStart: padding,
+    paddingBlockEnd: padding
+  }, _defineProperty(_$concat2, "".concat(antCls, "-page-header-breadcrumb"), {
     // overwritten pro-components style
     paddingBlockStart: 0
   }), _defineProperty(_$concat2, "".concat(antCls, "-page-header-heading-title"), {
@@ -44,12 +50,7 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
     lineHeight: lineHeight
   }), _$concat)), _defineProperty(_$concat2, "".concat(antCls, "-page-header-footer"), {
     marginBlockStart: 0
-  }), _$concat2)), _defineProperty(_$concat3, "".concat(antCls, "-page-header"), {
-    paddingInlineStart: paddingLG,
-    paddingInlineEnd: paddingLG,
-    paddingBlockStart: padding,
-    paddingBlockEnd: padding
-  }), _defineProperty(_$concat3, "".concat(componentCls, "-children-container"), {
+  }), _$concat2)), _defineProperty(_$concat3, "".concat(componentCls, "-children-container"), {
     paddingInline: paddingLG,
     paddingBlockStart: 0,
     paddingBlockEnd: paddingLG

package/es/Password/Content.js

@@ -1,7 +1,7 @@
 import { CheckCircleFilled, CloseCircleFilled, LoadingOutlined } from '@oceanbase/icons';
 import { Progress, Space } from '@oceanbase/design';
 import React from 'react';
-import { token } from '@oceanbase/design';
+import { theme } from '@oceanbase/design';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Content = function Content(_ref) {
@@ -10,6 +10,8 @@ var Content = function Content(_ref) {
     isValidating = _ref.isValidating,
     value = _ref.value,
     isTouched = _ref.isTouched;
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token;
   var statusIconMap = {
     error: /*#__PURE__*/_jsx(CloseCircleFilled, {
       style: {

package/es/Password/index.js

@@ -16,7 +16,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { Button, Input, message, Popover } from '@oceanbase/design';
 import RandExp from 'randexp';
 import React, { useState } from 'react';
-import { token } from '@oceanbase/design';
+import { theme } from '@oceanbase/design';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import LocaleWrapper from "../locale/LocaleWrapper";
 import Content from "./Content";
@@ -32,6 +32,8 @@ var Password = function Password(_ref) {
     onValidate = _ref.onValidate,
     generatePasswordRegex = _ref.generatePasswordRegex,
     restProps = _objectWithoutProperties(_ref, _excluded);
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     fieldError = _useState2[0],

package/lib/BackgroundTaskManager/index.d.ts

@@ -40,6 +40,7 @@ export interface BackgroundTaskManagerRef {
     fetchPreset: () => ITaskMgrPreset;
     fetchQueue: () => ITaskMgrQueue;
     fetchQueueNsById: (id: TaskMgrID) => Namespace;
+    closeNotification: (key: string) => void;
 }
 interface IProps {
     rollingFrequency?: number;

package/lib/BackgroundTaskManager/index.js

@@ -132,6 +132,9 @@ var BackgroundTaskManager_default = (0, import_react.forwardRef)((props, ref) =>
     },
     [queue]
   );
+  const closeNotification = (0, import_react.useCallback)((key) => {
+    import_design.notification.destroy(key);
+  }, []);
   (0, import_react.useImperativeHandle)(ref, () => ({
     pushQueue,
     popQueue,
@@ -140,7 +143,8 @@ var BackgroundTaskManager_default = (0, import_react.forwardRef)((props, ref) =>
     setPreset,
     fetchPreset,
     fetchQueue,
-    fetchQueueNsById
+    fetchQueueNsById,
+    closeNotification
   }));
   const getLocalStorageIds = (0, import_react.useCallback)(() => {
     const storedIdsStr = window.localStorage.getItem(prefix) || "[]";

package/lib/BasicLayout/Header.js

@@ -119,7 +119,7 @@ var Header = ({
           },
           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("span", { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { locales: locales || langs })), 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)))) : (
+      ), 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(
@@ -131,7 +131,14 @@ var Header = ({
           }
         },
         /* @__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("span", { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { showLabel: true, locales: locales || langs })), 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))))),
+      )), 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,
         {

package/lib/BasicLayout/index.js

@@ -68,6 +68,7 @@ var BasicLayout = ({
   prefixCls: customizePrefixCls,
   ...restProps
 }) => {
+  const { token } = import_design.theme.useToken();
   const { getPrefixCls } = (0, import_react.useContext)(import_design2.ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls("pro-basic-layout", customizePrefixCls);
   const { wrapSSR } = (0, import_style.default)(prefixCls);
@@ -184,8 +185,8 @@ var BasicLayout = ({
             {
               style: {
                 // 渐变的分隔线
-                borderImage: `linear-gradient(90deg, ${import_design.token.colorTextQuaternary} 0%, ${(0, import_pro_components.setAlpha)(
-                  import_design.token.colorTextQuaternary,
+                borderImage: `linear-gradient(90deg, ${token.colorTextQuaternary} 0%, ${(0, import_pro_components.setAlpha)(
+                  token.colorTextQuaternary,
                   0
                 )} 100%) 1`
               }

package/lib/BasicLayout/style/Header.js

@@ -25,7 +25,7 @@ __export(Header_exports, {
 module.exports = __toCommonJS(Header_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genHeaderStyle = (token) => {
-  const { antCls, componentCls } = token;
+  const { componentCls } = token;
   return {
     [`${componentCls}`]: {
       position: "fixed",

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

package/lib/Highlight/index.js

@@ -120,6 +120,7 @@ var Highlight = (props) => {
   const themeClass = theme === THEME_DARK ? `${prefixCls}-dark` : `${prefixCls}-light`;
   const codeRef = import_react.default.createRef();
   const [codeBlock, setCodeBlock] = import_react.default.useState();
+  const { token } = import_design.theme.useToken();
   (0, import_react.useEffect)(() => {
     if (language && languageMap[language]) {
       import_core.default.registerLanguage(language, languageMap[language]);
@@ -196,14 +197,14 @@ var Highlight = (props) => {
           disabled: copied,
           className: (0, import_classnames.default)(`${prefixCls}-copy`),
           style: {
-            background: `${theme === THEME_DARK ? `#2b303b` : import_design.token.colorBgLayout}`
+            background: `${theme === THEME_DARK ? `#2b303b` : token.colorBgLayout}`
           }
         },
         /* @__PURE__ */ import_react.default.createElement(
           import_icons.CopyOutlined,
           {
             className: (0, import_classnames.default)(`${prefixCls}-copy-icon`, { scoll: copied }),
-            style: { color: `${theme === THEME_DARK ? import_design.token.colorBgLayout : `#2b303b`}` }
+            style: { color: `${theme === THEME_DARK ? token.colorBgLayout : `#2b303b`}` }
           }
         ),
         /* @__PURE__ */ import_react.default.createElement(

package/lib/LocaleDropdown/index.js

@@ -38,8 +38,12 @@ var import_design = require("@oceanbase/design");
 var import_react = __toESM(require("react"));
 var import_constant = require("../constant");
 var import_util2 = require("../_util");
-var prefix = (0, import_util2.getPrefix)("layout-header");
-var LocaleDropdown = ({ locales, showLabel, ...restProps }) => {
+var LocaleDropdown = ({
+  locales,
+  showLabel,
+  className,
+  ...restProps
+}) => {
   const localeMenu = /* @__PURE__ */ import_react.default.createElement(
     import_design.Menu,
     {
@@ -65,6 +69,6 @@ var LocaleDropdown = ({ locales, showLabel, ...restProps }) => {
       }
     },
     (0, import_util.findByValue)(import_constant.LOCALE_LIST, (0, import_util2.getLocale)()).minLabel
-  ) : /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.GlobalOutlined, null), (0, import_util.findByValue)(import_constant.LOCALE_LIST, (0, import_util2.getLocale)()).shortLabel));
+  ) : /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className }, /* @__PURE__ */ import_react.default.createElement(import_icons.GlobalOutlined, null), (0, import_util.findByValue)(import_constant.LOCALE_LIST, (0, import_util2.getLocale)()).shortLabel));
 };
 var LocaleDropdown_default = LocaleDropdown;

package/lib/Login/LoginForm.js

@@ -51,6 +51,7 @@ var Login = ({
   onAuthCodeImgChange,
   ...restProps
 }) => {
+  const { token } = import_design2.theme.useToken();
   const [focusInput, setFocusInput] = (0, import_react.useState)("");
   return /* @__PURE__ */ import_react.default.createElement(
     import_design.Form,
@@ -77,7 +78,7 @@ var Login = ({
       /* @__PURE__ */ import_react.default.createElement(
         import_design.Input,
         {
-          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, { style: { color: import_design2.token.colorIcon } }),
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, { style: { color: token.colorIcon } }),
           placeholder: locale.usernamePlaceholder,
           onFocus: () => {
             setFocusInput("username");
@@ -107,7 +108,7 @@ var Login = ({
         {
           visibilityToggle: true,
           autoComplete: "current-password",
-          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.LockOutlined, { style: { color: import_design2.token.colorIcon } }),
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.LockOutlined, { style: { color: token.colorIcon } }),
           placeholder: locale.passwordPlaceholder,
           onFocus: () => {
             setFocusInput("password");
@@ -133,7 +134,7 @@ var Login = ({
       /* @__PURE__ */ import_react.default.createElement(
         import_design.Input,
         {
-          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SafetyCertificateOutlined, { style: { color: import_design2.token.colorIcon } }),
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SafetyCertificateOutlined, { style: { color: token.colorIcon } }),
           placeholder: "请输入验证码",
           onFocus: () => {
             setFocusInput("authCode");

package/lib/Login/index.js

@@ -114,7 +114,7 @@ var Login = (props) => {
       style
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-bg`, style: { backgroundImage: `url(${bgImage})` } }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-info` }, title && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-welcome` }, title), description && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-start` }, description))),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-card` }, showLocale && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-locale` }, /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { locales })), board && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-board` }, board), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-content` }, showActivate ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("img", { src: logo, alt: "", className: `${prefix}-activate-logo` }), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-card` }, showLocale && /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { locales, className: `${prefix}-locale` }), board && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-board` }, board), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-content` }, showActivate ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("img", { src: logo, alt: "", className: `${prefix}-activate-logo` }), /* @__PURE__ */ import_react.default.createElement(
       import_design.Divider,
       {
         style: {

package/lib/PageContainer/style/index.js

@@ -48,6 +48,11 @@ var genPageContainerStyle = (token) => {
         minHeight: "auto"
       },
       [`${antCls}-page-header`]: {
+        // 减小内容区左右两侧间距
+        paddingInlineStart: paddingLG,
+        paddingInlineEnd: paddingLG,
+        paddingBlockStart: padding,
+        paddingBlockEnd: padding,
         [`${antCls}-page-header-breadcrumb`]: {
           // overwritten pro-components style
           paddingBlockStart: 0
@@ -79,13 +84,6 @@ var genPageContainerStyle = (token) => {
           marginBlockStart: 0
         }
       },
-      // 减小内容区左右两侧间距
-      [`${antCls}-page-header`]: {
-        paddingInlineStart: paddingLG,
-        paddingInlineEnd: paddingLG,
-        paddingBlockStart: padding,
-        paddingBlockEnd: padding
-      },
       [`${componentCls}-children-container`]: {
         paddingInline: paddingLG,
         paddingBlockStart: 0,

package/lib/Password/Content.js

@@ -37,9 +37,10 @@ var import_design = require("@oceanbase/design");
 var import_react = __toESM(require("react"));
 var import_design2 = require("@oceanbase/design");
 var Content = ({ rules, fieldError, isValidating, value, isTouched }) => {
+  const { token } = import_design2.theme.useToken();
   const statusIconMap = {
-    error: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseCircleFilled, { style: { color: import_design2.token.colorError } }),
-    success: /* @__PURE__ */ import_react.default.createElement(import_icons.CheckCircleFilled, { style: { color: import_design2.token.colorSuccess } }),
+    error: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseCircleFilled, { style: { color: token.colorError } }),
+    success: /* @__PURE__ */ import_react.default.createElement(import_icons.CheckCircleFilled, { style: { color: token.colorSuccess } }),
     wait: /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
@@ -57,7 +58,7 @@ var Content = ({ rules, fieldError, isValidating, value, isTouched }) => {
           style: {
             width: 6,
             height: 6,
-            backgroundColor: import_design2.token.colorTextTertiary,
+            backgroundColor: token.colorTextTertiary,
             borderRadius: 4
           }
         }
@@ -71,12 +72,12 @@ var Content = ({ rules, fieldError, isValidating, value, isTouched }) => {
   );
   let strokeColor = "";
   if (isRequireFail) {
-    strokeColor = import_design2.token.colorError;
+    strokeColor = token.colorError;
     if (percent > 50 && percent < 100 && percent !== 100) {
-      strokeColor = import_design2.token.colorWarning;
+      strokeColor = token.colorWarning;
     }
   } else {
-    strokeColor = import_design2.token.colorSuccess;
+    strokeColor = token.colorSuccess;
   }
   return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
     import_design.Progress,
@@ -100,7 +101,7 @@ var Content = ({ rules, fieldError, isValidating, value, isTouched }) => {
     if (!isTouched) {
       status = "wait";
     }
-    return /* @__PURE__ */ import_react.default.createElement("li", { key: index }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { align: "start" }, isValidating ? /* @__PURE__ */ import_react.default.createElement(import_icons.LoadingOutlined, null) : statusIconMap[status], /* @__PURE__ */ import_react.default.createElement("span", { style: { color: import_design2.token.colorTextSecondary } }, rule.message)));
+    return /* @__PURE__ */ import_react.default.createElement("li", { key: index }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { align: "start" }, isValidating ? /* @__PURE__ */ import_react.default.createElement(import_icons.LoadingOutlined, null) : statusIconMap[status], /* @__PURE__ */ import_react.default.createElement("span", { style: { color: token.colorTextSecondary } }, rule.message)));
   })));
 };
 var Content_default = Content;

package/lib/Password/index.js

@@ -49,6 +49,7 @@ var Password = ({
   generatePasswordRegex,
   ...restProps
 }) => {
+  const { token } = import_design2.theme.useToken();
   const [fieldError, setFieldError] = (0, import_react.useState)([]);
   const [isValidating, setIsValidating] = (0, import_react.useState)(false);
   const [isTouched, setIsTouched] = (0, import_react.useState)(false);
@@ -138,7 +139,7 @@ var Password = ({
     {
       style: {
         fontSize: 14,
-        color: import_design2.token.colorTextTertiary,
+        color: token.colorTextTertiary,
         lineHeight: "22px"
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/ui",
-  "version": "0.2.25",
+  "version": "0.2.27",
   "description": "The UI library based on OceanBase Design",
   "keywords": [
     "oceanbase",
@@ -35,9 +35,9 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.17.2",
-    "@ant-design/pro-components": "^2.6.30",
+    "@ant-design/pro-components": "^2.6.34",
     "@ant-design/pro-layout": "^7.17.8",
-    "@oceanbase/design": "^0.2.24",
+    "@oceanbase/design": "^0.2.26",
     "@oceanbase/icons": "^0.2.9",
     "@oceanbase/util": "^0.2.11",
     "ahooks": "^2.10.14",
@@ -66,5 +66,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "641619d79cb7980279179b21905141950c604c54"
+  "gitHead": "c9a4257a5c6357396e72c6a7acccd24613c4ceaf"
 }