@oceanbase/ui 1.0.0-alpha.1 → 1.0.0-alpha.10

package/lib/SideTip/style/index.js

@@ -0,0 +1,211 @@
+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/SideTip/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genSideTipStyle: () => genSideTipStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genSideTipStyle = (token) => {
+  const { componentCls, boxShadowSecondary, colorTextQuaternary, colorTextSecondary } = token;
+  return {
+    [`${componentCls}-container`]: {
+      position: "fixed",
+      zIndex: 0,
+      fontSize: 14,
+      cursor: "pointer",
+      insetInlineEnd: 24,
+      insetBlockEnd: 24,
+      [`&.${componentCls}-container-dragged`]: {
+        cursor: "grab"
+      },
+      [`&.${componentCls}-container-disabled`]: {
+        cursor: "not-allowed"
+      },
+      [`&.${componentCls}-container-hide`]: {
+        transition: "all 0.3s"
+      },
+      "@media screen and (max-width: 768px)": {
+        display: "none"
+      },
+      [`&.${componentCls}-container-hide-not-dragged:hover`]: {
+        insetInlineEnd: "0 !important"
+      },
+      [`${componentCls}-hide`]: {
+        position: "absolute",
+        zIndex: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 20,
+        height: 20,
+        background: "rgba(0, 0, 0, 0.15)",
+        borderRadius: 20,
+        transform: "scale(0)",
+        cursor: "pointer",
+        opacity: 0,
+        transition: "all 0.18s ease-out 0.18s",
+        insetBlockStart: 0,
+        insetInlineEnd: -22,
+        "&:hover": {
+          background: "rgba(0, 0, 0, 0.35)"
+        },
+        [`${componentCls}-hide-icon`]: {
+          width: 6,
+          height: 2,
+          background: "#fff",
+          borderRadius: 4
+        },
+        [`&.${componentCls}-hide-hovered`]: {
+          transform: "scale(1)",
+          opacity: 1
+        }
+      },
+      [`${componentCls}-button`]: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 56,
+        height: 56,
+        backgroundColor: "#fff",
+        borderRadius: "50%",
+        boxShadow: boxShadowSecondary,
+        cursor: "pointer",
+        transition: "background-color 0.2s ease 0.1s, opacity 0.2s ease 0s, transform 0.2s ease 0.1s",
+        userSelect: "none",
+        [`&${componentCls}-button-primary`]: {
+          backgroundColor: `${token.colorPrimary} !important`
+        },
+        [`&${componentCls}-button-small`]: {
+          width: 40,
+          height: 40
+        },
+        [`&${componentCls}-button-disabled`]: {
+          backgroundColor: `${colorTextQuaternary} !important`,
+          cursor: "not-allowed"
+        },
+        "&:hover": {
+          opacity: 1
+        },
+        [`${componentCls}-button-loading`]: {
+          position: "absolute",
+          width: 56,
+          height: 56,
+          color: token.colorPrimary,
+          fontSize: 56,
+          insetBlockStart: 0,
+          insetInlineEnd: 0,
+          [`&${componentCls}-button-loading-primary`]: {
+            color: "#fff"
+          },
+          [`&${componentCls}-button-loading-small`]: {
+            width: 40,
+            height: 40,
+            fontSize: 40,
+            lineHeight: 40
+          }
+        },
+        [`${componentCls}-button-close`]: {
+          position: "absolute",
+          width: 24,
+          height: 24,
+          color: colorTextSecondary,
+          fontSize: 24,
+          transform: "translate(-50%, -50%) scale(0.4) rotate(-45deg)",
+          opacity: 0,
+          transition: "all 0.3s linear",
+          userSelect: "none",
+          insetBlockStart: "50%",
+          insetInlineStart: "50%",
+          [`&.${componentCls}-button-close-primary`]: {
+            color: "#fff"
+          },
+          [`&.${componentCls}-button-close-show`]: {
+            transform: "translate(-50%, -50%)",
+            opacity: 1
+          },
+          [`&.${componentCls}-button-close-small`]: {
+            width: 16,
+            height: 16,
+            fontSize: 16,
+            lineHeight: 16
+          }
+        },
+        [`${componentCls}-button-icon`]: {
+          position: "absolute",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 24,
+          height: 24,
+          color: colorTextSecondary,
+          fontSize: 24,
+          lineHeight: 24,
+          transform: "translate(-50%, -50%)",
+          opacity: 1,
+          transition: "all 0.3s linear",
+          userSelect: "none",
+          insetBlockStart: "50%",
+          insetInlineStart: "50%",
+          "> *": {
+            fontSize: "inherit",
+            color: "inherit"
+          },
+          img: {
+            width: "100%",
+            height: "100%",
+            objectFit: "contain"
+          },
+          [`&.${componentCls}-button-icon-open`]: {
+            transform: "translate(-50%, -50%) scale(0.4) rotate(45deg)",
+            opacity: 0
+          },
+          [`&.${componentCls}-button-icon-disabled`]: {
+            color: colorTextQuaternary
+          },
+          [`&${componentCls}-button-icon-primary`]: {
+            color: "#fff !important",
+            "> *": {
+              color: "#fff !important"
+            }
+          },
+          [`&${componentCls}-button-icon-small`]: {
+            width: 16,
+            height: 16,
+            fontSize: 16,
+            lineHeight: 16
+          }
+        }
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("SideTip", (token) => {
+    return [genSideTipStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genSideTipStyle
+});

package/lib/TagSelect/Group.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 export type TagSelectValueType = string | number | readonly string[];
 export interface TagSelectOptionType {
     label: React.ReactNode;
@@ -9,15 +9,15 @@ export interface TagSelectOptionType {
 }
 export interface TagSelectGroupProps {
     title?: string;
-    children?: ReactNode;
+    children?: React.ReactNode;
     disabled?: boolean;
     className?: string;
     multiple?: boolean;
-    defaultValue?: TagSelectValueType | Array<TagSelectValueType>;
-    value?: TagSelectValueType | Array<TagSelectValueType>;
+    defaultValue?: TagSelectValueType | TagSelectValueType[];
+    value?: TagSelectValueType | TagSelectValueType[];
     size?: string;
-    options?: Array<TagSelectOptionType | string | number>;
-    onChange?: (value: Array<TagSelectValueType> | TagSelectValueType) => void;
+    options?: (TagSelectOptionType | string | number)[];
+    onChange?: (value: TagSelectValueType[] | TagSelectValueType) => void;
 }
 declare const Group: React.FC<TagSelectGroupProps>;
 export default Group;

package/lib/TagSelect/Group.js

@@ -33,11 +33,12 @@ __export(Group_exports, {
 });
 module.exports = __toCommonJS(Group_exports);
 var import_classnames = __toESM(require("classnames"));
-var import_util = require("../_util");
+var import_design = require("@oceanbase/design");
 var import_react = __toESM(require("react"));
 var import_TagSelectContext = __toESM(require("./TagSelectContext"));
 var import_Item = __toESM(require("./Item"));
 var import_style = __toESM(require("./style"));
+var import_jsx_runtime = require("react/jsx-runtime");
 function toArray(value) {
   let res = value;
   if (value === void 0) {
@@ -57,7 +58,8 @@ var Group = ({
   className,
   ...restProps
 }) => {
-  const prefix = (0, import_util.getPrefix)("tag-select");
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefix = getPrefixCls("tag-select");
   const { wrapSSR, hashId } = (0, import_style.default)(prefix);
   const [value, setValue] = (0, import_react.useState)(
     toArray(defaultValue || restProps.value)
@@ -106,21 +108,24 @@ var Group = ({
       return option;
     });
   }, [options]);
-  const childrenNode = options.length ? memoOptions.map((option) => /* @__PURE__ */ import_react.default.createElement(
+  const childrenNode = options.length ? memoOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Item.default,
     {
-      key: option.value.toString(),
       disabled: "disabled" in option ? option.disabled : restProps.disabled,
       value: option.value,
       onChange: option.onChange,
       style: option.style,
-      checked: value == null ? void 0 : value.includes(option.value)
+      checked: value == null ? void 0 : value.includes(option.value),
+      children: option.label
     },
-    option.label
+    option.value.toString()
   )) : children;
   const groupCls = (0, import_classnames.default)(`${prefix}-container`, hashId, className);
   return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(import_TagSelectContext.default.Provider, { value: contextValue }, /* @__PURE__ */ import_react.default.createElement("div", { className: groupCls }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-title` }, title), childrenNode))
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TagSelectContext.default.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: groupCls, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-title`, children: title }),
+      childrenNode
+    ] }) })
   );
 };
 var Group_default = Group;

package/lib/TagSelect/Item.js

@@ -36,9 +36,10 @@ var import_rc_checkbox = __toESM(require("rc-checkbox"));
 var import_classnames = __toESM(require("classnames"));
 var import_lodash = require("lodash");
 var import_react = __toESM(require("react"));
+var import_design = require("@oceanbase/design");
 var import_style = __toESM(require("./style"));
-var import_util = require("../_util");
 var import_TagSelectContext = __toESM(require("./TagSelectContext"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var Item = ({
   children,
   handleChange,
@@ -48,7 +49,8 @@ var Item = ({
 }) => {
   const [checked, setChecked] = (0, import_react.useState)(restProps.defaultChecked);
   const coverType = typeof cover;
-  const prefixCls = (0, import_util.getPrefix)("tag-select");
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("tag-select");
   const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
   const tagSelectGroup = import_react.default.useContext(import_TagSelectContext.default);
   const wrapperClassName = (0, import_classnames.default)(
@@ -81,28 +83,31 @@ var Item = ({
     }
   }, [tagSelectGroup.value, restProps.value]);
   const renderCover = () => {
-    return coverType === "string" ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-cover` }, /* @__PURE__ */ import_react.default.createElement("img", { src: cover, alt: "tagselect" })) : cover;
+    return coverType === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-cover`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: cover, alt: "tagselect" }) }) : cover;
   };
   return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement("label", { className: wrapperClassName, style: restProps.style }, /* @__PURE__ */ import_react.default.createElement(
-      import_rc_checkbox.default,
-      {
-        ...restProps,
-        checked,
-        prefixCls,
-        onChange: (e) => {
-          if (!("checked" in restProps) && !Object.keys(tagSelectGroup).length) {
-            setChecked(e.target.checked);
-          }
-          if (onChange) {
-            onChange(e);
-          }
-          if (tagSelectGroup.handleValueChange) {
-            tagSelectGroup.handleValueChange(e.target.value);
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: wrapperClassName, style: restProps.style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_rc_checkbox.default,
+        {
+          ...restProps,
+          checked,
+          prefixCls,
+          onChange: (e) => {
+            if (!("checked" in restProps) && !Object.keys(tagSelectGroup).length) {
+              setChecked(e.target.checked);
+            }
+            if (onChange) {
+              onChange(e);
+            }
+            if (tagSelectGroup.handleValueChange) {
+              tagSelectGroup.handleValueChange(e.target.value);
+            }
           }
         }
-      }
-    ), cover ? renderCover() : /* @__PURE__ */ import_react.default.createElement("span", null, children))
+      ),
+      cover ? renderCover() : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children })
+    ] })
   );
 };
 var Item_default = Item;

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.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/lib/Welcome/index.js

@@ -35,13 +35,13 @@ 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_react = require("react");
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
 var import_util = require("../_util");
-var import_index = require("./index.less");
+var import_style = __toESM(require("./style"));
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
 var import_step = __toESM(require("./step"));
-var prefix = (0, import_util.getPrefix)("welcome");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Welcome = ({
   title,
   description,
@@ -56,9 +56,18 @@ var Welcome = ({
   className,
   ...restProps
 }) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("welcome");
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
   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: `${prefixCls}-item`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-order-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-order`, children: index + 1 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefixCls}-title`, children: item.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${prefixCls}-description`, children: item.description })
+      ] })
+    ] }, item.title);
     const StepProps = {
       title: item.title,
       description: item.description,
@@ -67,44 +76,67 @@ 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}")`
-      }
-    },
-    /* @__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
-  )))));
+  return wrapSSR(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-container ${className || ""}`, ...restProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_design.Row,
+        {
+          className: `${prefixCls}-page-header`,
+          style: {
+            backgroundImage: `url("${bgImage}")`
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 24, className: `${prefixCls}-title`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: title }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 16, className: `${prefixCls}-description`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: description }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Card, { bordered: false, className: `${prefixCls}-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: `${prefixCls}-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: `${prefixCls}-title`, children: item.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${prefixCls}-description`, children: item.description })
+        ] })
+      ] }, item.image)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Row, { className: `${prefixCls}-content`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 14, className: isDefault ? `${prefixCls}-left` : "borderRight", 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: `${prefixCls}-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: `${prefixCls}-right`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefixCls}-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)({
+                [`${prefixCls}-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: "デフォルト操作"
+};