@oceanbase/ui 0.2.0

package/lib/SideTip/Dragger.js

@@ -0,0 +1,259 @@
+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)
+    __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 __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/SideTip/Dragger.tsx
+var Dragger_exports = {};
+__export(Dragger_exports, {
+  default: () => Dragger_default
+});
+module.exports = __toCommonJS(Dragger_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_utils = require("./utils");
+var INIT_RIGHT = 32;
+var INIT_BOTTOM = 32;
+var Draggable = class extends import_react.default.Component {
+  constructor(props) {
+    super(props);
+    this.overlapDetection = () => {
+      const node = this.nodeRef.current;
+      const { left, top, right, bottom, width, height } = node.getBoundingClientRect();
+      const aroundElems = [
+        document.elementFromPoint(left, top),
+        document.elementFromPoint(right, bottom),
+        document.elementFromPoint(left + width / 2, top + height / 2)
+      ];
+      for (const elem of aroundElems) {
+        if (elem !== node && (0, import_utils.isFixedElem)(elem)) {
+          if (this.props.onOverlap) {
+            this.props.onOverlap();
+          }
+          break;
+        }
+      }
+    };
+    this.getContainerDom = () => {
+      const { getPopupContainer } = this.props;
+      const dom = getPopupContainer ? getPopupContainer() : void 0;
+      return dom;
+    };
+    this.handleResize = () => {
+      const dom = this.getContainerDom();
+      this.defaultScrollBarSize = (0, import_utils.getScrollBarSize)();
+      const node = this.nodeRef.current;
+      const clientRect = node.getBoundingClientRect();
+      const { width, height } = clientRect;
+      const { right: styleRight, bottom: styleBottom } = window.getComputedStyle(node);
+      let right = Number(styleRight.replace("px", ""));
+      let bottom = Number(styleBottom.replace("px", ""));
+      const clientWidth = (0, import_utils.getClientWidth)(dom);
+      const clientHeight = (0, import_utils.getClientHeight)(dom);
+      const deltaX = clientWidth - right - width;
+      const deltaY = clientHeight - bottom - height;
+      if (deltaX < 0) {
+        right += deltaX;
+      }
+      if (deltaY < 0) {
+        bottom += deltaY;
+      }
+      this.setState({
+        bottom,
+        right
+      });
+    };
+    this.handleMouseDown = (e) => {
+      if (e.button !== 0) {
+        return;
+      }
+      const dom = this.getContainerDom();
+      this.intervalStart = (/* @__PURE__ */ new Date()).getTime();
+      const scroll = (0, import_utils.getScrollOffsets)(dom);
+      const node = this.nodeRef.current;
+      const startX = e.clientX + scroll.x;
+      const startY = e.clientY + scroll.y;
+      const origX = node.offsetLeft;
+      const origY = node.offsetTop;
+      this.deltaX = startX - origX;
+      this.deltaY = startY - origY;
+      if (this.props.onDragStart) {
+        this.props.onDragStart();
+      }
+      this.setState({
+        dragged: true
+      });
+      if (e.stopPropagation)
+        e.stopPropagation();
+      else
+        e.cancelBubble = true;
+      if (e.preventDefault)
+        e.preventDefault();
+      else
+        e.returnValue = false;
+    };
+    this.handleMouseMove = (e) => {
+      const { dragged } = this.state;
+      const { hide } = this.props;
+      if (e.button !== 0 || !dragged || !!hide) {
+        return;
+      }
+      const { clientX, clientY } = e;
+      const { deltaX, deltaY } = this;
+      const node = this.nodeRef.current;
+      const dom = this.getContainerDom();
+      const scroll = (0, import_utils.getScrollOffsets)(dom);
+      const clientWidth = (0, import_utils.getClientWidth)(dom);
+      const clientHeight = (0, import_utils.getClientHeight)(dom);
+      const { width, height } = node.getBoundingClientRect();
+      const left = clientX + scroll.x - deltaX;
+      const top = clientY + scroll.y - deltaY;
+      let right = clientWidth - left - width;
+      let bottom = clientHeight - top - height;
+      if (right > clientWidth - width) {
+        right = clientWidth - width;
+      }
+      if (bottom > clientHeight - height) {
+        bottom = clientHeight - height;
+      }
+      if (right < 0) {
+        right = 0;
+      }
+      if (bottom < 0) {
+        bottom = 0;
+      }
+      this.setState(
+        {
+          dragged: true,
+          right: right - this.defaultScrollBarSize,
+          bottom
+        },
+        () => {
+          if (this.props.onDrag) {
+            this.props.onDrag({
+              right,
+              bottom
+            });
+          }
+        }
+      );
+    };
+    this.handleMouseUp = (e) => {
+      const { dragged } = this.state;
+      if (dragged) {
+        const interval = (/* @__PURE__ */ new Date()).getTime() - this.intervalStart;
+        if (interval < 200 && e.target.id !== "ui-mini-hide") {
+          this.props.onClick(e);
+          this.setState({
+            dragged: false
+          });
+          return;
+        }
+        this.setState(
+          {
+            dragged: false
+          },
+          () => {
+            if (this.props.onDragEnd) {
+              this.props.onDragEnd();
+            }
+          }
+        );
+      }
+    };
+    const { position = {} } = props;
+    this.intervalStart = 0;
+    this.nodeRef = import_react.default.createRef();
+    this.deltaX = 0;
+    this.deltaY = 0;
+    this.defaultScrollBarSize = (0, import_utils.getScrollBarSize)();
+    this.state = {
+      dragged: false,
+      width: 0,
+      bottom: position.bottom ? position.bottom : INIT_BOTTOM,
+      right: position.right ? position.right : INIT_RIGHT
+    };
+  }
+  componentDidMount() {
+    window.addEventListener("resize", this.handleResize, false);
+    window.addEventListener("mousemove", this.handleMouseMove, false);
+    window.addEventListener("mouseup", this.handleMouseUp, false);
+    window.addEventListener("load", this.overlapDetection, false);
+    const { width } = this.nodeRef.current.getBoundingClientRect();
+    this.setState({
+      width
+    });
+  }
+  componentWillUnmount() {
+    window.removeEventListener("load", this.overlapDetection, false);
+    window.removeEventListener("mousemove", this.handleMouseMove, false);
+    window.removeEventListener("mouseup", this.handleMouseUp, false);
+    window.removeEventListener("resize", this.handleResize, false);
+  }
+  componentDidUpdate(preProps) {
+    const { hide: preHide } = preProps;
+    const { hide } = this.props;
+    if (preHide && !hide) {
+      this.setState({
+        right: INIT_RIGHT
+      });
+    }
+  }
+  render() {
+    const {
+      children,
+      hide,
+      style = {},
+      prefix,
+      className,
+      id,
+      onMouseEnter,
+      onMouseLeave
+    } = this.props;
+    const { dragged, width, bottom, right } = this.state;
+    const containerStyle = { bottom, right, ...style };
+    const containerPrefix = `${prefix}-container`;
+    const containerClassName = (0, import_classnames.default)(containerPrefix, className, {
+      [`${containerPrefix}-dragged`]: dragged,
+      [`${containerPrefix}-hide`]: hide,
+      [`${containerPrefix}-hide-not-dragged`]: hide && !dragged
+    });
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        id,
+        ref: this.nodeRef,
+        onMouseDown: this.handleMouseDown,
+        onMouseEnter,
+        onMouseLeave,
+        style: hide ? { ...containerStyle, right: -width / 1.5 } : containerStyle,
+        className: containerClassName
+      },
+      children
+    );
+  }
+};
+var Dragger_default = Draggable;

package/lib/SideTip/IconLoading.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const iconLoading: (props: any) => import("react").JSX.Element;
+export default iconLoading;

package/lib/SideTip/IconLoading.js

@@ -0,0 +1,75 @@
+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)
+    __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 __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/SideTip/IconLoading.tsx
+var IconLoading_exports = {};
+__export(IconLoading_exports, {
+  default: () => IconLoading_default
+});
+module.exports = __toCommonJS(IconLoading_exports);
+var import_icons = __toESM(require("@ant-design/icons"));
+var LoadingSvg = () => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    version: "1.1",
+    id: "dc-spinner",
+    xmlns: "http://www.w3.org/2000/svg",
+    x: "0px",
+    y: "0px",
+    width: "1em",
+    height: "1em",
+    stroke: "currentColor",
+    viewBox: "3 3 34 34",
+    preserveAspectRatio: "xMinYMin meet"
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      strokeWidth: "1",
+      strokeMiterlimit: "10",
+      d: "M5.203,20\n			c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z",
+      transform: "rotate(278.217 20 20)"
+    },
+    /* @__PURE__ */ React.createElement(
+      "animateTransform",
+      {
+        attributeName: "transform",
+        type: "rotate",
+        from: "0 20 20",
+        to: "360 20 20",
+        calcMode: "spline",
+        keySplines: "0.2, 0.2, 0.2, 0.2",
+        keyTimes: "0;1",
+        dur: "1.2s",
+        repeatCount: "indefinite"
+      }
+    )
+  )
+);
+var iconLoading = (props) => /* @__PURE__ */ React.createElement(import_icons.default, { component: LoadingSvg, ...props });
+var IconLoading_default = iconLoading;

package/lib/SideTip/index.d.ts

@@ -0,0 +1,156 @@
+import type { BadgeProps } from 'antd/es/badge/index';
+import type { TooltipPropsWithTitle } from 'antd/es/tooltip/index';
+import React from 'react';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+import './index.less';
+export declare type SideTipType = 'primary' | 'default';
+export declare type SideTipSize = 'small' | 'default';
+export interface Position {
+    /**
+     * @title 距离右侧
+     * @description 设置悬浮按钮距离右侧边框的像素距离
+     * @default "32"
+     */
+    right?: number;
+    /**
+     * @title 距离底部
+     * @description 设置悬浮按钮距离底部边框的像素距离
+     * @default "32"
+     */
+    bottom?: number;
+}
+export interface SideTipProps extends LocaleWrapperProps {
+    /**
+     * @description 自定义前缀
+     * @ignore
+     */
+    prefix?: string;
+    /**
+     * @title 按钮类型
+     * @description 按钮类型
+     */
+    type?: SideTipType;
+    /**
+     * @title 按钮尺寸
+     * @description 按钮尺寸
+     */
+    size?: SideTipSize;
+    /**
+     * @title icon 地址
+     * @description icon地址，可以设置图片地址或 ReactNode
+     */
+    icon?: string | React.ReactNode;
+    /**
+     * @title 指定是否打开
+     * @description 指定是否打开
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * @title 指定是否打开
+     * @description 指定是否打开
+     * @default false
+     * @deprecated
+     */
+    visible?: boolean;
+    /**
+     * @title 加载中
+     * @description 指定是否loading
+     */
+    loading?: boolean;
+    /**
+     * @title 是否可隐藏
+     * @description 是否可隐藏
+     * @default true
+     */
+    hideable?: boolean;
+    /**
+     * @title 组件 ID
+     * @description 若页面中有多个侧边提示组件，则通过 id 标识当前组件，用于缓存侧边提示组件是否隐藏配置
+     */
+    id?: string;
+    /**
+     * @description style 属性
+     * @ignore
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description className
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @title 按钮 style 属性
+     * @description 按钮的 style 属性
+     */
+    buttonStyle?: React.CSSProperties;
+    /**
+     * @title 按钮的 className 属性
+     * @description 按钮的 className 属性
+     */
+    buttonClassName?: string;
+    /**
+     * @title 徽标属性
+     * @description 徽标属性，详见antd [badge](https://ant.design/components/badge-cn/#API)属性
+     */
+    badge?: BadgeProps;
+    /**
+     * @title ToolTip 相关属性
+     * @description ToolTip 相关属性
+     */
+    tooltip?: TooltipPropsWithTitle;
+    /**
+     * @title 默认是否隐藏
+     * @description 按钮默认是否隐藏
+     * @default false
+     */
+    defaultHide?: boolean;
+    /**
+     * @title 初始位置
+     * @description 初始位置
+     */
+    position?: Position;
+    /**
+     * @description 点击气泡事件
+     */
+    onClick?: (e: any) => void;
+    /**
+     * @description 开始拖动
+     */
+    onDragStart?: () => void;
+    /**
+     * @description 结束拖动
+     */
+    onDragEnd?: () => void;
+    /**
+     * @description 正在拖动
+     */
+    onDrag?: (offset: any) => void;
+    /**
+     * 鼠标移入事件
+     */
+    onMouseEnter?: (e: MouseEvent) => void;
+    /**
+     * 鼠标离开事件
+     */
+    onMouseLeave?: (e: MouseEvent) => void;
+    /**
+     * @title 不可用
+     * @description 不可用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @title 返回气泡弹出所在的容器
+     * @description 返回气泡弹出所在的容器
+     * @default "() => document.body"
+     */
+    getPopupContainer?: () => HTMLElement;
+    children?: any;
+}
+export interface SideTipState {
+    hide?: boolean;
+    hovered?: boolean;
+}
+declare const _default: any;
+export default _default;

package/lib/SideTip/index.js

@@ -0,0 +1,182 @@
+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)
+    __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 __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/SideTip/index.tsx
+var SideTip_exports = {};
+__export(SideTip_exports, {
+  default: () => SideTip_default
+});
+module.exports = __toCommonJS(SideTip_exports);
+var import_icons = require("@ant-design/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_Dragger = __toESM(require("./Dragger"));
+var import_IconLoading = __toESM(require("./IconLoading"));
+var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_index = require("./index.less");
+var STORE_SIDETIP_HIDE = "ob-sidetip-hide";
+var getLocalStorageKey = (id) => {
+  return [`${STORE_SIDETIP_HIDE}`, id].join("-");
+};
+var SideTip = (props) => {
+  const buttonRef = (0, import_react.createRef)();
+  const {
+    defaultHide,
+    onClick,
+    open,
+    loading,
+    children,
+    icon,
+    type,
+    size,
+    style,
+    visible,
+    className,
+    badge,
+    tooltip,
+    position,
+    onDragStart,
+    onDragEnd,
+    onDrag,
+    buttonClassName: customButtonClassName,
+    buttonStyle,
+    id,
+    hideable = true,
+    disabled = false,
+    getPopupContainer
+  } = props;
+  const [hide, setHide] = (0, import_react.useState)(
+    hideable ? defaultHide === void 0 ? window.localStorage.getItem(getLocalStorageKey(id)) === "true" : !!defaultHide : false
+  );
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (hide) {
+      window.localStorage.setItem(getLocalStorageKey(id), "true");
+    } else {
+      window.localStorage.removeItem(getLocalStorageKey(id));
+    }
+  }, [hide]);
+  const hideSideTip = () => {
+    setHide(true);
+  };
+  const onButtonClick = (e) => {
+    if (hide) {
+      setHide(false);
+    } else {
+      if (disabled)
+        return;
+      if (onClick) {
+        onClick(e);
+      }
+    }
+  };
+  const handleMouseEnter = (e) => {
+    setHovered(true);
+    if (props.onMouseEnter) {
+      props.onMouseEnter(e);
+    }
+  };
+  const handleMouseLeave = (e) => {
+    setHovered(false);
+    if (props.onMouseLeave) {
+      props.onMouseLeave(e);
+    }
+  };
+  const getTypeCls = (typeCls2) => {
+    if (typeCls2 === "primary")
+      return "primary";
+    return "";
+  };
+  const getSizeCls = (sizeCls2) => {
+    if (sizeCls2 === "small")
+      return "small";
+    return "";
+  };
+  const prefix = (0, import_util.getPrefix)("sidetip");
+  const typeCls = getTypeCls(type);
+  const sizeCls = getSizeCls(size);
+  const buttonPrefix = `${prefix}-button`;
+  const iconClassName = (0, import_classnames.default)(
+    `${buttonPrefix}-icon`,
+    (open || visible) && `${buttonPrefix}-icon-open`,
+    disabled && `${buttonPrefix}-icon-disabled`,
+    typeCls && `${buttonPrefix}-icon-${typeCls}`,
+    sizeCls && `${buttonPrefix}-icon-${sizeCls}`
+  );
+  const iconDom = /* @__PURE__ */ import_react.default.createElement("span", { className: iconClassName }, import_react.default.isValidElement(icon) ? icon : /* @__PURE__ */ import_react.default.createElement("img", { src: icon, alt: "icon", width: "100%", height: "100%" }));
+  const closeClassName = (0, import_classnames.default)(`${buttonPrefix}-close`, {
+    [`${buttonPrefix}-close-show`]: open || visible,
+    [`${buttonPrefix}-close-${typeCls}`]: typeCls,
+    [`${buttonPrefix}-close-${sizeCls}`]: sizeCls
+  });
+  const buttonClassName = (0, import_classnames.default)(buttonPrefix, customButtonClassName, {
+    [`${buttonPrefix}-disabled`]: disabled,
+    [`${buttonPrefix}-${typeCls}`]: typeCls,
+    [`${buttonPrefix}-${sizeCls}`]: sizeCls
+  });
+  const loadingClassName = (0, import_classnames.default)(`${buttonPrefix}-loading`, {
+    [`${buttonPrefix}-loading-${typeCls}`]: typeCls,
+    [`${buttonPrefix}-loading-${sizeCls}`]: sizeCls
+  });
+  const InnerButton = /* @__PURE__ */ import_react.default.createElement("div", { className: buttonClassName, ref: buttonRef, style: buttonStyle }, loading && /* @__PURE__ */ import_react.default.createElement(import_IconLoading.default, { className: loadingClassName }), /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, iconDom, /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, { className: closeClassName })));
+  const BadgeButton = badge ? /* @__PURE__ */ import_react.default.createElement(import_design.Badge, { offset: [-6, 6], ...badge }, InnerButton) : InnerButton;
+  const hideIconClassName = (0, import_classnames.default)(`${prefix}-hide`, {
+    [`${prefix}-hide-hovered`]: hovered
+  });
+  const hideIcon = /* @__PURE__ */ import_react.default.createElement("div", { id: "ui-mini-hide", onClick: hideSideTip, className: hideIconClassName }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-hide-icon` }));
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Dragger.default,
+    {
+      id,
+      open: open || visible,
+      hide,
+      onClick: onButtonClick,
+      onOverlap: hideSideTip,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      style,
+      position,
+      prefix,
+      onDragStart,
+      onDragEnd,
+      onDrag,
+      getPopupContainer,
+      className
+    },
+    tooltip && tooltip.title ? /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { ...tooltip, getPopupContainer: () => buttonRef.current }, BadgeButton) : BadgeButton,
+    hideable && hideIcon,
+    children
+  );
+};
+var SideTip_default = (0, import_LocaleWrapper.default)({
+  componentName: "SideTip",
+  defaultLocale: import_zh_CN.default
+})(SideTip);