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

package/es/TaskGraph/Graph/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 TaskGraphItemToken = OBToken;
+export declare const genTaskGraphItemStyle: GenerateStyle<TaskGraphItemToken>;
+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/TaskGraph/Graph/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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { genComponentStyleHook } from "../../../_util/genComponentStyleHook";
+export var genTaskGraphItemStyle = function genTaskGraphItemStyle(token) {
+  var componentCls = token.componentCls,
+    antCls = token.antCls,
+    colorTextTertiary = token.colorTextTertiary;
+  return _defineProperty({}, "".concat(componentCls, "-menu"), _defineProperty({
+    position: 'fixed'
+  }, "".concat(componentCls, "-task-id-wrapper"), _defineProperty({
+    padding: '5px 12px'
+  }, "".concat(antCls, "-typography"), _defineProperty({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    color: colorTextTertiary
+  }, "".concat(antCls, "-typography-copy"), {
+    color: colorTextTertiary
+  }))));
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('TaskGraphItem', function (token) {
+    return [genTaskGraphItemStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

package/es/TaskGraph/Graph.d.ts

@@ -1,6 +1,5 @@
 import type { GraphData } from '@antv/g6/lib/types';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
-import './graph.less';
 export interface TaskGraphLocale {
     successful: string;
     running: string;

package/es/TaskGraph/Graph.js

@@ -13,19 +13,29 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { findByValue } from '@oceanbase/util';
-import { Dropdown, Menu, Typography } from '@oceanbase/design';
+import { ConfigProvider, Dropdown, Menu, Typography } from '@oceanbase/design';
 import { isEqual } from 'lodash';
 import React from 'react';
 import { token } from '@oceanbase/design';
 import GraphToolbar from "../GraphToolbar";
 import LocaleWrapper from "../locale/LocaleWrapper";
-import { getPrefix } from "../_util";
+import useStyle from "./Graph/style";
 import zhCN from "./locale/zh-CN";
-import "./graph.less";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Text = Typography.Text;
-var prefix = getPrefix('task-graph-item');
+
+// Wrapper component to use hooks for styling
+var GraphWrapper = function GraphWrapper(_ref) {
+  var prefixCls = _ref.prefixCls,
+    children = _ref.children;
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
+  return wrapSSR( /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  }));
+};
 var TaskGraph = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(TaskGraph, _React$PureComponent);
   var _super = _createSuper(TaskGraph);
@@ -113,8 +123,8 @@ var TaskGraph = /*#__PURE__*/function (_React$PureComponent) {
         });
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleMenuClick", function (_ref) {
-      var key = _ref.key;
+    _defineProperty(_assertThisInitialized(_this), "handleMenuClick", function (_ref2) {
+      var key = _ref2.key;
       var onMenuClick = _this.props.onMenuClick;
       var currentSubTask = _this.state.currentSubTask;
       // 成功的回调
@@ -196,6 +206,10 @@ var TaskGraph = /*#__PURE__*/function (_React$PureComponent) {
       var _this$state = this.state,
         statusList = _this$state.statusList,
         currentSubTask = _this$state.currentSubTask;
+      // @ts-ignore
+      var _ref3 = this.context || {},
+        getPrefixCls = _ref3.getPrefixCls;
+      var prefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls('task-graph-item');
       var operations = findByValue(statusList, currentSubTask && currentSubTask.status).operations || [];
       var menus = [{
         label: locale.taskId,
@@ -227,7 +241,7 @@ var TaskGraph = /*#__PURE__*/function (_React$PureComponent) {
         },
         children: filterMenus.map(function (item) {
           return item.value === 'taskId' ? /*#__PURE__*/_jsx("div", {
-            className: "".concat(prefix, "-task-id-wrapper")
+            className: "".concat(prefixCls, "-task-id-wrapper")
             // 下拉菜单数 > 1 时才有下边框
             ,
             style: filterMenus.length > 1 ? {
@@ -237,12 +251,13 @@ var TaskGraph = /*#__PURE__*/function (_React$PureComponent) {
               copyable: true,
               children: "ID: ".concat(currentSubTask && currentSubTask.id)
             })
-          }) : /*#__PURE__*/_jsx(Menu.Item, {
+          }, "task-id") : /*#__PURE__*/_jsx(Menu.Item, {
             children: item.label
           }, item.value);
         })
       });
-      return /*#__PURE__*/_jsxs("div", {
+      return /*#__PURE__*/_jsxs(GraphWrapper, {
+        prefixCls: prefixCls,
         children: [this.graph && /*#__PURE__*/_jsx(GraphToolbar, {
           mode: "fixed",
           graph: this.graph
@@ -257,7 +272,7 @@ var TaskGraph = /*#__PURE__*/function (_React$PureComponent) {
           ,
           open: true,
           overlay: menu,
-          overlayClassName: "".concat(prefix, "-menu"),
+          overlayClassName: "".concat(prefixCls, "-menu"),
           children: /*#__PURE__*/_jsx("span", {})
         })]
       });
@@ -265,6 +280,7 @@ var TaskGraph = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return TaskGraph;
 }(React.PureComponent);
+_defineProperty(TaskGraph, "contextType", ConfigProvider.ConfigContext);
 export default LocaleWrapper({
   componentName: 'TaskGraph',
   defaultLocale: zhCN

package/es/TaskGraph/index.d.ts

@@ -1,7 +1,6 @@
 import type { GraphData } from '@antv/g6/lib/types';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
 import type { TaskGraphLocale } from './Graph';
-import './index.less';
 export interface TaskGraphProps extends LocaleWrapperProps {
     data: GraphData;
     logLoading?: boolean;

package/es/TaskGraph/index.js

@@ -19,21 +19,19 @@ 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; }
 //@ts-nocheck
 import { DownOutlined, UpOutlined } from '@oceanbase/icons';
-import { Spin, Tabs } from '@oceanbase/design';
+import { ConfigProvider, Spin, Tabs } from '@oceanbase/design';
 import { find, noop } from 'lodash';
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import SplitPane from 'react-split-pane';
 import LocaleWrapper from "../locale/LocaleWrapper";
-import { getPrefix } from "../_util";
+import useStyle from "./style";
 import Graph from "./Graph";
-import "./index.less";
 import zhCN from "./locale/zh-CN";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var TabPane = Tabs.TabPane;
 var MIN_SIZE = 56;
 var DEFAULT_SIZE = 240;
-var prefix = getPrefix('task-graph');
 var TaskGraph = function TaskGraph(_ref) {
   var _ref$logLoading = _ref.logLoading,
     logLoading = _ref$logLoading === void 0 ? false : _ref$logLoading,
@@ -43,6 +41,11 @@ var TaskGraph = function TaskGraph(_ref) {
     _ref$onTabsEdit = _ref.onTabsEdit,
     onTabsEdit = _ref$onTabsEdit === void 0 ? noop : _ref$onTabsEdit,
     restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('task-graph');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
   var _useState = useState(DEFAULT_SIZE),
     _useState2 = _slicedToArray(_useState, 2),
     size = _useState2[0],
@@ -111,7 +114,7 @@ var TaskGraph = function TaskGraph(_ref) {
         setCollapsed(false);
       }
     },
-    className: "".concat(prefix, "-split-pane"),
+    className: "".concat(prefixCls, "-split-pane"),
     children: [/*#__PURE__*/_jsx("div", {
       style: {
         position: 'absolute',
@@ -133,7 +136,7 @@ var TaskGraph = function TaskGraph(_ref) {
         }
       }, restProps))
     }), /*#__PURE__*/_jsx("div", {
-      className: "".concat(prefix, "-tabs-wrapper"),
+      className: "".concat(prefixCls, "-tabs-wrapper"),
       children: /*#__PURE__*/_jsx(Tabs, {
         type: "editable-card",
         hideAdd: true,

package/es/TaskGraph/locale/ja-JP.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    successful: string;
+    running: string;
+    failed: string;
+    pending: string;
+    taskId: string;
+    log: string;
+    parameter: string;
+    stop: string;
+    retry: string;
+    skip: string;
+};
+export default _default;

package/es/TaskGraph/locale/ja-JP.js

@@ -0,0 +1,12 @@
+export default {
+  successful: '完了',
+  running: 'タスク実行中',
+  failed: 'タスク失敗',
+  pending: '未開始',
+  taskId: 'タスク ID',
+  log: 'ログを表示',
+  parameter: 'パラメータを表示',
+  stop: '実行を停止',
+  retry: '再実行',
+  skip: '成功に設定'
+};

package/es/TaskGraph/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 TaskGraphToken = OBToken;
+export declare const genTaskGraphStyle: GenerateStyle<TaskGraphToken>;
+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/TaskGraph/style/index.js

@@ -0,0 +1,102 @@
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
+export var genTaskGraphStyle = function genTaskGraphStyle(token) {
+  var componentCls = token.componentCls,
+    proComponentsCls = token.proComponentsCls,
+    antCls = token.antCls,
+    colorText = token.colorText,
+    colorTextSecondary = token.colorTextSecondary,
+    fontWeightStrong = token.fontWeightStrong;
+  return {
+    '#container': _defineProperty(_defineProperty(_defineProperty({
+      position: 'relative',
+      paddingBottom: '0 !important'
+    }, "".concat(antCls, "-page-header"), {
+      paddingTop: 12,
+      paddingBottom: 12
+    }), "".concat(proComponentsCls, "-page-container-header-inner"), _defineProperty({
+      backgroundColor: '#fafbff'
+    }, "".concat(antCls, "-page-header-heading ").concat(antCls, "-page-header-heading-title"), {
+      fontSize: 16
+    })), "".concat(componentCls, "-split-pane"), _defineProperty(_defineProperty({
+      top: 'auto !important',
+      height: 'calc(100% - 36px) !important',
+      minHeight: 'calc(100% - 36px) !important',
+      margin: -24
+    }, "".concat(componentCls, "-tabs-wrapper"), {
+      width: '100%'
+    }), "".concat(antCls, "-tabs"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+      height: '100%'
+    }, "".concat(antCls, "-tabs-nav-container"), {
+      height: 32,
+      paddingTop: 4
+    }), "".concat(antCls, "-tabs-bar"), {
+      marginBottom: 0,
+      backgroundColor: '#fff',
+      borderBottom: 'none'
+    }), "".concat(antCls, "-tabs-tab"), {
+      minWidth: 120,
+      height: 28,
+      margin: 0,
+      padding: 0,
+      fontSize: 12,
+      lineHeight: 28,
+      backgroundColor: '#fff',
+      border: 'none',
+      borderBottom: '1px solid #e8e8e8',
+      borderRadius: 0,
+      transition: 'none',
+      '&:hover': {
+        color: colorTextSecondary
+      },
+      div: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: 20,
+        marginTop: 4,
+        padding: '0 8px',
+        borderLeft: '1px solid #e8e8e8'
+      }
+    }), "".concat(antCls, "-tabs-tab:last-child"), {
+      div: {
+        borderLeft: 'none'
+      }
+    }), "".concat(antCls, "-tabs-tab-active"), _defineProperty({
+      color: colorText,
+      fontWeight: fontWeightStrong,
+      backgroundColor: '#f7f8fc',
+      borderBottom: 'none',
+      borderLeft: 'none',
+      borderRadius: 2,
+      div: {
+        borderLeft: 'none'
+      }
+    }, "& + ".concat(antCls, "-tabs-tab"), {
+      div: {
+        borderLeft: 'none'
+      }
+    })), "".concat(antCls, "-tabs-extra-content"), {
+      marginRight: 16,
+      lineHeight: 32
+    }), "".concat(antCls, "-tabs-content"), {
+      height: 'calc(100% - 64px)',
+      padding: 16,
+      overflow: 'scroll',
+      color: colorTextSecondary,
+      lineHeight: 22,
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-all',
+      backgroundColor: '#f7f8fc'
+    })))
+  };
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('TaskGraph', function (token) {
+    return [genTaskGraphStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

package/es/Welcome/index.d.ts

@@ -1,6 +1,5 @@
 import type { ButtonProps } from '@oceanbase/design/es/button';
 import React from 'react';
-import './index.less';
 export interface IntroduceItem {
     image: string;
     title: string;

package/es/Welcome/index.js

@@ -8,17 +8,16 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 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 { PlusOutlined } from '@oceanbase/icons';
-import { Button, Card, Col, Row } from '@oceanbase/design';
+import { Button, Card, Col, ConfigProvider, Row } from '@oceanbase/design';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useContext } from 'react';
 import LocaleWrapper from "../locale/LocaleWrapper";
-import { directTo, getPrefix } from "../_util";
-import "./index.less";
+import { directTo } from "../_util";
+import useStyle from "./style";
 import zhCN from "./locale/zh-CN";
 import Step from "./step";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var prefix = getPrefix('welcome');
 var Welcome = function Welcome(_ref) {
   var title = _ref.title,
     description = _ref.description,
@@ -36,25 +35,30 @@ var Welcome = function Welcome(_ref) {
     locale = _ref.locale,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('welcome');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
   var isDefault = stepType === 'default';
   var renderStep = function renderStep(item, index) {
     var DefaultStep = function DefaultStep() {
       return /*#__PURE__*/_jsxs(Col, {
         span: 12,
         "data-testid": "steps",
-        className: "".concat(prefix, "-item"),
+        className: "".concat(prefixCls, "-item"),
         children: [/*#__PURE__*/_jsx("div", {
-          className: "".concat(prefix, "-order-wrapper"),
+          className: "".concat(prefixCls, "-order-wrapper"),
           children: /*#__PURE__*/_jsx("div", {
-            className: "".concat(prefix, "-order"),
+            className: "".concat(prefixCls, "-order"),
             children: index + 1
           })
         }), /*#__PURE__*/_jsxs("span", {
           children: [/*#__PURE__*/_jsx("h3", {
-            className: "".concat(prefix, "-title"),
+            className: "".concat(prefixCls, "-title"),
             children: item.title
           }), /*#__PURE__*/_jsx("p", {
-            className: "".concat(prefix, "-description"),
+            className: "".concat(prefixCls, "-description"),
             children: item.description
           })]
         })]
@@ -73,36 +77,36 @@ var Welcome = function Welcome(_ref) {
     }, StepProps), item.title);
     return StepItem;
   };
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: "".concat("".concat(prefix, "-container"), " ", className)
+  return wrapSSR( /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: "".concat(prefixCls, "-container ").concat(className || '')
   }, restProps), {}, {
     children: [/*#__PURE__*/_jsxs(Row, {
-      className: "".concat(prefix, "-page-header"),
+      className: "".concat(prefixCls, "-page-header"),
       style: {
         backgroundImage: "url(\"".concat(bgImage, "\")")
       },
       children: [/*#__PURE__*/_jsx(Col, {
         span: 24,
-        className: "".concat(prefix, "-title"),
+        className: "".concat(prefixCls, "-title"),
         children: /*#__PURE__*/_jsx("div", {
           children: title
         })
       }), /*#__PURE__*/_jsx(Col, {
         span: 16,
-        className: "".concat(prefix, "-description"),
+        className: "".concat(prefixCls, "-description"),
         children: /*#__PURE__*/_jsx("p", {
           children: description
         })
       })]
     }), /*#__PURE__*/_jsx(Card, {
       bordered: false,
-      className: "".concat(prefix, "-introduce"),
+      className: "".concat(prefixCls, "-introduce"),
       children: /*#__PURE__*/_jsx(Row, {
         gutter: 78,
         children: introduces.map(function (item) {
           return /*#__PURE__*/_jsxs(Col, {
             span: 8,
-            className: "".concat(prefix, "-item"),
+            className: "".concat(prefixCls, "-item"),
             "data-testid": "introduces",
             children: [/*#__PURE__*/_jsx("img", {
               src: item.image,
@@ -110,10 +114,10 @@ var Welcome = function Welcome(_ref) {
               height: 80
             }), /*#__PURE__*/_jsxs("span", {
               children: [/*#__PURE__*/_jsx("h3", {
-                className: "".concat(prefix, "-title"),
+                className: "".concat(prefixCls, "-title"),
                 children: item.title
               }), /*#__PURE__*/_jsx("p", {
-                className: "".concat(prefix, "-description"),
+                className: "".concat(prefixCls, "-description"),
                 children: item.description
               })]
             })]
@@ -121,10 +125,10 @@ var Welcome = function Welcome(_ref) {
         })
       })
     }), /*#__PURE__*/_jsxs(Row, {
-      className: "".concat(prefix, "-content"),
+      className: "".concat(prefixCls, "-content"),
       children: [/*#__PURE__*/_jsx(Col, {
         span: 14,
-        className: isDefault ? "".concat(prefix, "-left") : "".concat(prefix, "-border-right"),
+        className: isDefault ? "".concat(prefixCls, "-left") : 'borderRight',
         children: /*#__PURE__*/_jsxs(Row, {
           justify: "space-around",
           children: [steps.map(function (item, index) {
@@ -132,7 +136,7 @@ var Welcome = function Welcome(_ref) {
           }), isDefault && /*#__PURE__*/_jsx(Col, {
             span: 24,
             children: /*#__PURE__*/_jsx("div", {
-              className: "".concat(prefix, "-btn-wrapper"),
+              className: "".concat(prefixCls, "-btn-wrapper"),
               children: /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
                 size: "large",
                 type: "primary",
@@ -146,9 +150,9 @@ var Welcome = function Welcome(_ref) {
         })
       }), /*#__PURE__*/_jsxs(Col, {
         span: 10,
-        className: "".concat(prefix, "-right"),
+        className: "".concat(prefixCls, "-right"),
         children: [/*#__PURE__*/_jsx("h3", {
-          className: "".concat(prefix, "-title"),
+          className: "".concat(prefixCls, "-title"),
           children: locale.helpTitle
         }), helps.map(function (item) {
           return /*#__PURE__*/_jsx(Button, {
@@ -156,14 +160,14 @@ var Welcome = function Welcome(_ref) {
             onClick: function onClick() {
               directTo(item.link);
             },
-            className: classNames(_defineProperty({}, "".concat(prefix, "-more"), !!item.isMore)),
+            className: classNames(_defineProperty({}, "".concat(prefixCls, "-more"), !!item.isMore)),
             "data-testid": "helps",
             children: item.title
           }, item.title);
         })]
       })]
     })]
-  }));
+  })));
 };
 export default LocaleWrapper({
   componentName: 'Welcome',

package/es/Welcome/locale/ja-JP.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    helpTitle: string;
+    defaultOperation: string;
+};
+export default _default;

package/es/Welcome/locale/ja-JP.js

@@ -0,0 +1,4 @@
+export default {
+  helpTitle: 'クイックスタート',
+  defaultOperation: 'デフォルト操作'
+};

package/es/Welcome/step/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 WelcomeStepToken = OBToken;
+export declare const genWelcomeStepStyle: GenerateStyle<WelcomeStepToken>;
+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/Welcome/step/style/index.js

@@ -0,0 +1,44 @@
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { genComponentStyleHook } from "../../../_util/genComponentStyleHook";
+export var genWelcomeStepStyle = function genWelcomeStepStyle(token) {
+  var componentCls = token.componentCls,
+    colorText = token.colorText,
+    colorTextTertiary = token.colorTextTertiary,
+    colorPrimary = token.colorPrimary;
+  return _defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty({
+    display: 'flex',
+    marginBottom: 30,
+    padding: '20px 30px 20px 0',
+    background: token.colorBgContainer,
+    border: '1px solid rgba(0, 0, 0, 0.06)',
+    borderRadius: 2,
+    '&:hover': {
+      boxShadow: '0 4px 16px 0',
+      cursor: 'pointer'
+    },
+    '&:nth-child(even)': {
+      marginRight: 0
+    }
+  }, "".concat(componentCls, "-left"), {
+    padding: '0 20px'
+  }), "".concat(componentCls, "-right"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-title"), {
+    color: colorText,
+    fontSize: 16,
+    lineHeight: 24
+  }), "".concat(componentCls, "-description"), {
+    color: colorTextTertiary
+  })), "".concat(componentCls, "-operations"), {
+    color: colorPrimary,
+    fontSize: 14,
+    lineHeight: 22
+  }));
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('WelcomeStep', function (token) {
+    return [genWelcomeStepStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

package/es/Welcome/step.d.ts

@@ -1,4 +1,3 @@
-import './index.less';
 export interface OperationProps {
     text: string;
     onClick: () => void;