@oceanbase/ui 1.0.0-alpha.4 → 1.0.0-alpha.6

package/lib/SideTip/index.js

@@ -37,18 +37,16 @@ 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_style = __toESM(require("./style"));
 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 import_jsx_runtime = require("react/jsx-runtime");
-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 { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("sidetip");
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
   const {
     defaultHide,
     onClick,
@@ -75,6 +73,12 @@ var SideTip = (props) => {
     draggable = true,
     getPopupContainer
   } = props;
+  const getLocalStorageKey = (0, import_react.useCallback)(
+    (localId) => {
+      return [`${prefixCls}-hide`, localId].join("-");
+    },
+    [prefixCls]
+  );
   const [hide, setHide] = (0, import_react.useState)(
     hideable ? defaultHide === void 0 ? window.localStorage.getItem(getLocalStorageKey(id)) === "true" : !!defaultHide : false
   );
@@ -85,7 +89,7 @@ var SideTip = (props) => {
     } else {
       window.localStorage.removeItem(getLocalStorageKey(id));
     }
-  }, [hide]);
+  }, [hide, id, getLocalStorageKey]);
   const hideSideTip = () => {
     setHide(true);
   };
@@ -122,10 +126,9 @@ var SideTip = (props) => {
       return "small";
     return "";
   };
-  const prefix = (0, import_util.getPrefix)("sidetip");
   const typeCls = getTypeCls(type);
   const sizeCls = getSizeCls(size);
-  const buttonPrefix = `${prefix}-button`;
+  const buttonPrefix = `${prefixCls}-button`;
   const iconClassName = (0, import_classnames.default)(
     `${buttonPrefix}-icon`,
     (open || visible) && `${buttonPrefix}-icon-open`,
@@ -133,7 +136,7 @@ var SideTip = (props) => {
     typeCls && `${buttonPrefix}-icon-${typeCls}`,
     sizeCls && `${buttonPrefix}-icon-${sizeCls}`
   );
-  const iconDom = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: iconClassName, children: import_react.default.isValidElement(icon) ? icon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: icon, alt: "icon", width: "100%", height: "100%" }) });
+  const iconDom = icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: iconClassName, children: import_react.default.isValidElement(icon) ? icon : typeof icon === "string" && icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: icon, alt: "icon", width: "100%", height: "100%" }) : null }) : null;
   const closeClassName = (0, import_classnames.default)(`${buttonPrefix}-close`, {
     [`${buttonPrefix}-close-show`]: open || visible,
     [`${buttonPrefix}-close-${typeCls}`]: typeCls,
@@ -156,35 +159,40 @@ var SideTip = (props) => {
     ] })
   ] });
   const BadgeButton = badge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Badge, { offset: [-6, 6], ...badge, children: InnerButton }) : InnerButton;
-  const hideIconClassName = (0, import_classnames.default)(`${prefix}-hide`, {
-    [`${prefix}-hide-hovered`]: hovered
+  const hideIconClassName = (0, import_classnames.default)(`${prefixCls}-hide`, {
+    [`${prefixCls}-hide-hovered`]: hovered
   });
-  const hideIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "ui-mini-hide", onClick: hideSideTip, className: hideIconClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-hide-icon` }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_Dragger.default,
-    {
-      id,
-      open: open || visible,
-      hide,
-      onClick: onButtonClick,
-      onOverlap: hideSideTip,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      style,
-      position,
-      prefix,
-      onDragStart,
-      onDragEnd,
-      onDrag,
-      getPopupContainer,
-      className,
-      draggable,
-      children: [
-        tooltip && tooltip.title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { ...tooltip, getPopupContainer: () => buttonRef.current, children: BadgeButton }) : BadgeButton,
-        hideable && hideIcon,
-        children
-      ]
-    }
+  const hideIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "ui-mini-hide", onClick: hideSideTip, className: hideIconClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-hide-icon` }) });
+  const containerClassName = (0, import_classnames.default)(className, {
+    [`${prefixCls}-container-disabled`]: disabled
+  });
+  return wrapSSR(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_Dragger.default,
+      {
+        id,
+        open: open || visible,
+        hide,
+        onClick: onButtonClick,
+        onOverlap: hideSideTip,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        style,
+        position,
+        prefix: prefixCls,
+        onDragStart,
+        onDragEnd,
+        onDrag,
+        getPopupContainer,
+        className: containerClassName,
+        draggable,
+        children: [
+          tooltip && tooltip.title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { ...tooltip, getPopupContainer: () => buttonRef.current, children: BadgeButton }) : BadgeButton,
+          hideable && hideIcon,
+          children
+        ]
+      }
+    )
   );
 };
 var SideTip_default = (0, import_LocaleWrapper.default)({

package/lib/SideTip/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 SideTipToken = OBToken;
+export declare const genSideTipStyle: GenerateStyle<SideTipToken>;
+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/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,7 +33,7 @@ __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"));
@@ -58,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)

package/lib/TagSelect/Item.js

@@ -36,8 +36,8 @@ 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 = ({
@@ -49,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)(

package/lib/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/lib/TaskGraph/Graph/style/index.js

@@ -0,0 +1,56 @@
+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/Graph/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genTaskGraphItemStyle: () => genTaskGraphItemStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../../_util/genComponentStyleHook");
+var genTaskGraphItemStyle = (token) => {
+  const { componentCls, antCls, colorTextTertiary } = token;
+  return {
+    [`${componentCls}-menu`]: {
+      position: "fixed",
+      [`${componentCls}-task-id-wrapper`]: {
+        padding: "5px 12px",
+        [`${antCls}-typography`]: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          color: colorTextTertiary,
+          [`${antCls}-typography-copy`]: {
+            color: colorTextTertiary
+          }
+        }
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("TaskGraphItem", (token) => {
+    return [genTaskGraphItemStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genTaskGraphItemStyle
+});

package/lib/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/lib/TaskGraph/Graph.js

@@ -39,12 +39,17 @@ var import_react = __toESM(require("react"));
 var import_design2 = require("@oceanbase/design");
 var import_GraphToolbar = __toESM(require("../GraphToolbar"));
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_util2 = require("../_util");
+var import_style = __toESM(require("./Graph/style"));
 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 GraphWrapper = ({
+  prefixCls,
+  children
+}) => {
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  return wrapSSR(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }));
+};
 var TaskGraph = class extends import_react.default.PureComponent {
   constructor(props) {
     super(props);
@@ -198,6 +203,8 @@ var TaskGraph = class extends import_react.default.PureComponent {
   render() {
     const { locale } = this.props;
     const { statusList, currentSubTask } = this.state;
+    const { getPrefixCls } = this.context || {};
+    const prefixCls = getPrefixCls == null ? void 0 : getPrefixCls("task-graph-item");
     const operations = (0, import_util.findByValue)(statusList, currentSubTask && currentSubTask.status).operations || [];
     const menus = [
       {
@@ -230,13 +237,14 @@ var TaskGraph = class extends import_react.default.PureComponent {
       (item) => item.value === "taskId" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
-          className: `${prefix}-task-id-wrapper`,
+          className: `${prefixCls}-task-id-wrapper`,
           style: filterMenus.length > 1 ? { borderBottom: "1px solid #e8e8e8" } : {},
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { copyable: true, children: `ID: ${currentSubTask && currentSubTask.id}` })
-        }
+        },
+        "task-id"
       ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { children: item.label }, item.value)
     ) });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(GraphWrapper, { prefixCls, children: [
       this.graph && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GraphToolbar.default, { mode: "fixed", graph: this.graph }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
@@ -253,13 +261,14 @@ var TaskGraph = class extends import_react.default.PureComponent {
           visible: true,
           open: true,
           overlay: menu,
-          overlayClassName: `${prefix}-menu`,
+          overlayClassName: `${prefixCls}-menu`,
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {})
         }
       )
     ] });
   }
 };
+TaskGraph.contextType = import_design.ConfigProvider.ConfigContext;
 var Graph_default = (0, import_LocaleWrapper.default)({
   componentName: "TaskGraph",
   defaultLocale: import_zh_CN.default

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

@@ -38,15 +38,13 @@ var import_lodash = require("lodash");
 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_style = __toESM(require("./style"));
 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;
-var prefix = (0, import_util.getPrefix)("task-graph");
 var TaskGraph = ({
   logLoading = false,
   subTaskLog,
@@ -54,6 +52,9 @@ var TaskGraph = ({
   onTabsEdit = import_lodash.noop,
   ...restProps
 }) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("task-graph");
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
   const [size, setSize] = (0, import_react.useState)(DEFAULT_SIZE);
   const [activeKey, setActiveKey] = (0, import_react.useState)(void 0);
   const [panes, setPanes] = (0, import_react.useState)([]);
@@ -101,7 +102,7 @@ var TaskGraph = ({
           setCollapsed(false);
         }
       },
-      className: `${prefix}-split-pane`,
+      className: `${prefixCls}-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,
@@ -120,7 +121,7 @@ var TaskGraph = ({
             ...restProps
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-tabs-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-tabs-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_design.Tabs,
           {
             type: "editable-card",

package/lib/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;