@oceanbase/ui 0.4.20 → 0.4.22

package/lib/TaskGraph/Graph.js

@@ -42,6 +42,7 @@ var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
 var import_util2 = require("../_util");
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
 var import_graph = require("./graph.less");
+var import_jsx_runtime = require("react/jsx-runtime");
 var { Text } = import_design.Typography;
 var prefix = (0, import_util2.getPrefix)("task-graph-item");
 var TaskGraph = class extends import_react.default.PureComponent {
@@ -225,34 +226,38 @@ var TaskGraph = class extends import_react.default.PureComponent {
       }
     ];
     const filterMenus = menus.filter((item) => operations.includes(item.value));
-    const menu = /* @__PURE__ */ import_react.default.createElement(import_design.Menu, { id: "menu", onClick: this.handleMenuClick, style: { left: -1500 } }, filterMenus.map(
-      (item) => item.value === "taskId" ? /* @__PURE__ */ import_react.default.createElement(
+    const menu = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu, { id: "menu", onClick: this.handleMenuClick, style: { left: -1500 }, children: filterMenus.map(
+      (item) => item.value === "taskId" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
           className: `${prefix}-task-id-wrapper`,
-          style: filterMenus.length > 1 ? { borderBottom: "1px solid #e8e8e8" } : {}
-        },
-        /* @__PURE__ */ import_react.default.createElement(Text, { copyable: true }, `ID: ${currentSubTask && currentSubTask.id}`)
-      ) : /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: item.value }, item.label)
-    ));
-    return /* @__PURE__ */ import_react.default.createElement("div", null, this.graph && /* @__PURE__ */ import_react.default.createElement(import_GraphToolbar.default, { mode: "fixed", graph: this.graph }), /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        id: "container",
-        ref: (node) => {
-          this.main = node;
+          style: filterMenus.length > 1 ? { borderBottom: "1px solid #e8e8e8" } : {},
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { copyable: true, children: `ID: ${currentSubTask && currentSubTask.id}` })
         }
-      }
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_design.Dropdown,
-      {
-        visible: true,
-        open: true,
-        overlay: menu,
-        overlayClassName: `${prefix}-menu`
-      },
-      /* @__PURE__ */ import_react.default.createElement("span", null)
-    ));
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { children: item.label }, item.value)
+    ) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      this.graph && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GraphToolbar.default, { mode: "fixed", graph: this.graph }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          id: "container",
+          ref: (node) => {
+            this.main = node;
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_design.Dropdown,
+        {
+          visible: true,
+          open: true,
+          overlay: menu,
+          overlayClassName: `${prefix}-menu`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {})
+        }
+      )
+    ] });
   }
 };
 var Graph_default = (0, import_LocaleWrapper.default)({

package/lib/TaskGraph/index.js

@@ -35,13 +35,14 @@ module.exports = __toCommonJS(TaskGraph_exports);
 var import_icons = require("@oceanbase/icons");
 var import_design = require("@oceanbase/design");
 var import_lodash = require("lodash");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_react_split_pane = __toESM(require("react-split-pane"));
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
 var import_util = require("../_util");
 var import_Graph = __toESM(require("./Graph"));
 var import_index = require("./index.less");
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var { TabPane } = import_design.Tabs;
 var MIN_SIZE = 56;
 var DEFAULT_SIZE = 240;
@@ -84,7 +85,7 @@ var TaskGraph = ({
       onTabsEdit(targetKey, action);
     }
   }
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_react_split_pane.default,
     {
       split: "horizontal",
@@ -100,62 +101,67 @@ var TaskGraph = ({
           setCollapsed(false);
         }
       },
-      className: `${prefix}-split-pane`
-    },
-    /* @__PURE__ */ import_react.default.createElement("div", { style: { position: "absolute", width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(
-      import_Graph.default,
-      {
-        onLogAdd: (subTask) => {
-          const isExisted = (0, import_lodash.find)(panes, (item) => item.id === subTask.id);
-          if (!isExisted) {
-            setPanes([...panes, subTask]);
-          }
-          setCollapsed(false);
-          if (size === MIN_SIZE) {
-            setSize(DEFAULT_SIZE);
-          }
-          setActiveKey(subTask && `${subTask.id}`);
-        },
-        ...restProps
-      }
-    )),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-tabs-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
-      import_design.Tabs,
-      {
-        type: "editable-card",
-        hideAdd: true,
-        activeKey,
-        onChange: (key) => {
-          setActiveKey(key);
-          if (onTabsChange) {
-            onTabsChange(key);
-          }
-        },
-        onEdit: handleEditLogWindow,
-        tabBarExtraContent: collapsed ? /* @__PURE__ */ import_react.default.createElement(
-          import_icons.UpOutlined,
+      className: `${prefix}-split-pane`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Graph.default,
           {
-            onClick: () => {
-              setCollapsed(!collapsed);
+            onLogAdd: (subTask) => {
+              const isExisted = (0, import_lodash.find)(panes, (item) => item.id === subTask.id);
+              if (!isExisted) {
+                setPanes([...panes, subTask]);
+              }
+              setCollapsed(false);
               if (size === MIN_SIZE) {
                 setSize(DEFAULT_SIZE);
               }
-            }
+              setActiveKey(subTask && `${subTask.id}`);
+            },
+            ...restProps
           }
-        ) : /* @__PURE__ */ import_react.default.createElement(
-          import_icons.DownOutlined,
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-tabs-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_design.Tabs,
           {
-            onClick: () => {
-              setCollapsed(!collapsed);
-              if (size === MIN_SIZE) {
-                setSize(DEFAULT_SIZE);
+            type: "editable-card",
+            hideAdd: true,
+            activeKey,
+            onChange: (key) => {
+              setActiveKey(key);
+              if (onTabsChange) {
+                onTabsChange(key);
+              }
+            },
+            onEdit: handleEditLogWindow,
+            tabBarExtraContent: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_icons.UpOutlined,
+              {
+                onClick: () => {
+                  setCollapsed(!collapsed);
+                  if (size === MIN_SIZE) {
+                    setSize(DEFAULT_SIZE);
+                  }
+                }
               }
-            }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_icons.DownOutlined,
+              {
+                onClick: () => {
+                  setCollapsed(!collapsed);
+                  if (size === MIN_SIZE) {
+                    setSize(DEFAULT_SIZE);
+                  }
+                }
+              }
+            ),
+            children: panes.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TabPane, { tab: `${item.name} (ID: ${item.id})`, children: [
+              logLoading && item.status !== "RUNNING" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Spin, {}) : subTaskLog,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Spin, { spinning: item.status === "RUNNING" })
+            ] }, `${item.id}`))
           }
-        )
-      },
-      panes.map((item) => /* @__PURE__ */ import_react.default.createElement(TabPane, { key: `${item.id}`, tab: `${item.name} (ID: ${item.id})` }, logLoading && item.status !== "RUNNING" ? /* @__PURE__ */ import_react.default.createElement(import_design.Spin, null) : subTaskLog, /* @__PURE__ */ import_react.default.createElement(import_design.Spin, { spinning: item.status === "RUNNING" })))
-    ))
+        ) })
+      ]
+    }
   );
 };
 var TaskGraph_default = (0, import_LocaleWrapper.default)({

package/lib/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/lib/TaskGraph/locale/ja-JP.js

@@ -0,0 +1,36 @@
+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/TaskGraph/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 = {
+  successful: "完了",
+  running: "タスク実行中",
+  failed: "タスク失敗",
+  pending: "未開始",
+  taskId: "タスク ID",
+  log: "ログを表示",
+  parameter: "パラメータを表示",
+  stop: "実行を停止",
+  retry: "再実行",
+  skip: "成功に設定"
+};

package/lib/TreeSearch/index.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/TreeSearch/index.tsx
@@ -34,8 +24,9 @@ __export(TreeSearch_exports, {
 module.exports = __toCommonJS(TreeSearch_exports);
 var import_icons = require("@oceanbase/icons");
 var import_design = require("@oceanbase/design");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_util = require("./util");
+var import_jsx_runtime = require("react/jsx-runtime");
 var TreeSearch_default = (0, import_react.forwardRef)(
   ({
     treeData = [],
@@ -107,29 +98,33 @@ var TreeSearch_default = (0, import_react.forwardRef)(
     };
     const treeHeight = innerHeight ? innerHeight - (32 + 12 * 2 + 1) : 0;
     const defaultSearchStyle = { padding: "0 12px" };
-    return /* @__PURE__ */ import_react.default.createElement("div", { ref: treeWrapperDOM, style: { width, height: height ?? "100%" } }, /* @__PURE__ */ import_react.default.createElement(
-      import_design.Form,
-      {
-        form,
-        onValuesChange: onSearch,
-        style: Object.assign(defaultSearchStyle, searchStyle)
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_design.Form.Item, { noStyle: true, name: "searchKey" }, /* @__PURE__ */ import_react.default.createElement(import_design.Input, { "data-testid": "search", prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, null) }))
-    ), /* @__PURE__ */ import_react.default.createElement(import_design.Divider, { style: { margin: "12px 0" } }), searchData.length !== 0 ? /* @__PURE__ */ import_react.default.createElement(
-      import_design.Tree,
-      {
-        height: treeHeight,
-        showIcon: true,
-        checkable,
-        blockNode: true,
-        selectable: false,
-        checkedKeys,
-        onCheck,
-        titleRender,
-        defaultExpandAll,
-        treeData: form.getFieldValue("searchKey") ? searchData : memoTreeData,
-        loadData
-      }
-    ) : /* @__PURE__ */ import_react.default.createElement(import_design.Empty, { image: import_design.Empty.PRESENTED_IMAGE_SIMPLE }));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: treeWrapperDOM, style: { width, height: height ?? "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_design.Form,
+        {
+          form,
+          onValuesChange: onSearch,
+          style: Object.assign(defaultSearchStyle, searchStyle),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Form.Item, { noStyle: true, name: "searchKey", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Input, { "data-testid": "search", prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SearchOutlined, {}) }) })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Divider, { style: { margin: "12px 0" } }),
+      searchData.length !== 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_design.Tree,
+        {
+          height: treeHeight,
+          showIcon: true,
+          checkable,
+          blockNode: true,
+          selectable: false,
+          checkedKeys,
+          onCheck,
+          titleRender,
+          defaultExpandAll,
+          treeData: form.getFieldValue("searchKey") ? searchData : memoTreeData,
+          loadData
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Empty, { image: import_design.Empty.PRESENTED_IMAGE_SIMPLE })
+    ] });
   }
 );

package/lib/Welcome/index.js

@@ -35,12 +35,12 @@ module.exports = __toCommonJS(Welcome_exports);
 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_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
 var import_util = require("../_util");
 var import_index = require("./index.less");
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
 var import_step = __toESM(require("./step"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var prefix = (0, import_util.getPrefix)("welcome");
 var Welcome = ({
   title,
@@ -58,7 +58,13 @@ var Welcome = ({
 }) => {
   const isDefault = stepType === "default";
   const renderStep = (item, index) => {
-    const DefaultStep = () => /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 12, "data-testid": "steps", key: item.title, className: `${prefix}-item` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-order-wrapper` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-order` }, index + 1)), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, item.title), /* @__PURE__ */ import_react.default.createElement("p", { className: `${prefix}-description` }, item.description)));
+    const DefaultStep = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 12, "data-testid": "steps", className: `${prefix}-item`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-order-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-order`, children: index + 1 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefix}-title`, children: item.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${prefix}-description`, children: item.description })
+      ] })
+    ] }, item.title);
     const StepProps = {
       title: item.title,
       description: item.description,
@@ -67,44 +73,65 @@ var Welcome = ({
       operations: item.operations,
       locale
     };
-    const StepItem = isDefault ? /* @__PURE__ */ import_react.default.createElement(DefaultStep, { key: item.title }) : /* @__PURE__ */ import_react.default.createElement(import_step.default, { "data-testid": "steps", key: item.title, ...StepProps });
+    const StepItem = isDefault ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultStep, {}, item.title) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_step.default, { "data-testid": "steps", ...StepProps }, item.title);
     return StepItem;
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${`${prefix}-container`} ${className}`, ...restProps }, /* @__PURE__ */ import_react.default.createElement(
-    import_design.Row,
-    {
-      className: `${prefix}-page-header`,
-      style: {
-        backgroundImage: `url("${bgImage}")`
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${`${prefix}-container`} ${className}`, ...restProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_design.Row,
+      {
+        className: `${prefix}-page-header`,
+        style: {
+          backgroundImage: `url("${bgImage}")`
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 24, className: `${prefix}-title`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 16, className: `${prefix}-description`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: description }) })
+        ]
       }
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 24, className: `${prefix}-title` }, /* @__PURE__ */ import_react.default.createElement("div", null, title)),
-    /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 16, className: `${prefix}-description` }, /* @__PURE__ */ import_react.default.createElement("p", null, description))
-  ), /* @__PURE__ */ import_react.default.createElement(import_design.Card, { bordered: false, className: `${prefix}-introduce` }, /* @__PURE__ */ import_react.default.createElement(import_design.Row, { gutter: 78 }, introduces.map((item) => /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 8, key: item.image, className: `${prefix}-item`, "data-testid": "introduces" }, /* @__PURE__ */ import_react.default.createElement("img", { src: item.image, alt: "", height: 80 }), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, item.title), /* @__PURE__ */ import_react.default.createElement("p", { className: `${prefix}-description` }, item.description)))))), /* @__PURE__ */ import_react.default.createElement(import_design.Row, { className: `${prefix}-content` }, /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 14, className: isDefault ? `${prefix}-left` : `${prefix}-border-right` }, /* @__PURE__ */ import_react.default.createElement(import_design.Row, { justify: "space-around" }, steps.map((item, index) => renderStep(item, index)), isDefault && /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 24 }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-btn-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
-    import_design.Button,
-    {
-      size: "large",
-      type: "primary",
-      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null),
-      block: true,
-      ...buttonProps
-    },
-    buttonText
-  ))))), /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 10, className: `${prefix}-right` }, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, locale.helpTitle), helps.map((item) => /* @__PURE__ */ import_react.default.createElement(
-    import_design.Button,
-    {
-      key: item.title,
-      shape: "round",
-      onClick: () => {
-        (0, import_util.directTo)(item.link);
-      },
-      className: (0, import_classnames.default)({
-        [`${prefix}-more`]: !!item.isMore
-      }),
-      "data-testid": "helps"
-    },
-    item.title
-  )))));
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Card, { bordered: false, className: `${prefix}-introduce`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Row, { gutter: 78, children: introduces.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 8, className: `${prefix}-item`, "data-testid": "introduces", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: item.image, alt: "", height: 80 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefix}-title`, children: item.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${prefix}-description`, children: item.description })
+      ] })
+    ] }, item.image)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Row, { className: `${prefix}-content`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 14, className: isDefault ? `${prefix}-left` : `${prefix}-border-right`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Row, { justify: "space-around", children: [
+        steps.map((item, index) => renderStep(item, index)),
+        isDefault && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 24, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-btn-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_design.Button,
+          {
+            size: "large",
+            type: "primary",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlusOutlined, {}),
+            block: true,
+            ...buttonProps,
+            children: buttonText
+          }
+        ) }) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 10, className: `${prefix}-right`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefix}-title`, children: locale.helpTitle }),
+        helps.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_design.Button,
+          {
+            shape: "round",
+            onClick: () => {
+              (0, import_util.directTo)(item.link);
+            },
+            className: (0, import_classnames.default)({
+              [`${prefix}-more`]: !!item.isMore
+            }),
+            "data-testid": "helps",
+            children: item.title
+          },
+          item.title
+        ))
+      ] })
+    ] })
+  ] });
 };
 var Welcome_default = (0, import_LocaleWrapper.default)({
   componentName: "Welcome",

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

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

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

@@ -0,0 +1,28 @@
+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/Welcome/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 = {
+  helpTitle: "クイックスタート",
+  defaultOperation: "デフォルト操作"
+};

package/lib/Welcome/step.js

@@ -33,17 +33,24 @@ __export(step_exports, {
 });
 module.exports = __toCommonJS(step_exports);
 var import_design = require("@oceanbase/design");
-var import_react = __toESM(require("react"));
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
 var import_util = require("../_util");
 var import_index = require("./index.less");
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var prefix = (0, import_util.getPrefix)("welcome-step");
 var WelcomeStep = (props) => {
   const { title, description, operations, imgUrl, locale } = props;
-  return /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 11, key: title, className: prefix }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-left` }, /* @__PURE__ */ import_react.default.createElement("img", { src: imgUrl, alt: "", width: "60" })), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-right` }, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, title), /* @__PURE__ */ import_react.default.createElement("p", { className: `${prefix}-description` }, description), operations && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-operations` }, operations == null ? void 0 : operations.map((operation, index) => {
-    return /* @__PURE__ */ import_react.default.createElement("span", { key: index, onClick: operation.onClick, className: `${prefix}-operation` }, operation.text || locale.defaultOperation);
-  }))));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 11, className: prefix, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-left`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: imgUrl, alt: "", width: "60" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefix}-right`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefix}-title`, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${prefix}-description`, children: description }),
+      operations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-operations`, children: operations == null ? void 0 : operations.map((operation, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { onClick: operation.onClick, className: `${prefix}-operation`, children: operation.text || locale.defaultOperation }, index);
+      }) })
+    ] })
+  ] }, title);
 };
 var step_default = (0, import_LocaleWrapper.default)({
   componentName: "WelcomeStep",

package/lib/locale/LocaleWrapper.js

@@ -35,6 +35,10 @@ module.exports = __toCommonJS(LocaleWrapper_exports);
 var import_design = require("@oceanbase/design");
 var import_hoist_non_react_statics = __toESM(require("hoist-non-react-statics"));
 var import_react = __toESM(require("react"));
+var import_jsx_runtime = (
+  // @ts-ignore
+  require("react/jsx-runtime")
+);
 var LocaleWrapper_default = ({ componentName, defaultLocale }) => (BaseComponent) => {
   class Hoc extends import_react.default.Component {
     render() {
@@ -48,19 +52,16 @@ var LocaleWrapper_default = ({ componentName, defaultLocale }) => (BaseComponent
         // 这里使用 antLocale，不能直接顶掉 locale 属性，有些组件内部会维护一个 locale 去做特殊判断
         antLocale: (antLocale == null ? void 0 : antLocale.locale) || "zh-cn"
       };
-      return (
-        // @ts-ignore
-        /* @__PURE__ */ import_react.default.createElement(
-          BaseComponent,
-          {
-            ref: forwardedRef,
-            theme: {
-              hashed: ((_a = process.env.NODE_ENV) == null ? void 0 : _a.toLowerCase()) !== "test"
-            },
-            locale: { ...localeData, ...customLocale },
-            ...newProps
-          }
-        )
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        BaseComponent,
+        {
+          ref: forwardedRef,
+          theme: {
+            hashed: ((_a = process.env.NODE_ENV) == null ? void 0 : _a.toLowerCase()) !== "test"
+          },
+          locale: { ...localeData, ...customLocale },
+          ...newProps
+        }
       );
     }
   }
@@ -69,7 +70,7 @@ var LocaleWrapper_default = ({ componentName, defaultLocale }) => (BaseComponent
   Hoc.contextType = import_design.ConfigProvider.ConfigContext;
   const ForwardComponent = import_react.default.forwardRef(
     // @ts-ignore
-    (props, ref) => /* @__PURE__ */ import_react.default.createElement(Hoc, { ...props, forwardedRef: ref })
+    (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Hoc, { ...props, forwardedRef: ref })
   );
   return (0, import_hoist_non_react_statics.default)(ForwardComponent, BaseComponent);
 };

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

@@ -0,0 +1,3 @@
+import type { Locale } from './index';
+declare const _default: Locale;
+export default _default;