diff --git a/km-console/packages/config-manager-fe/src/app.tsx b/km-console/packages/config-manager-fe/src/app.tsx
index aad916e0..2f29654d 100644
--- a/km-console/packages/config-manager-fe/src/app.tsx
+++ b/km-console/packages/config-manager-fe/src/app.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { BrowserRouter as Router, Redirect, Switch } from 'react-router-dom';
 import _ from 'lodash';
 import './constants/axiosConfig';
-import dantdZhCN from 'knowdesign/lib/locale/zh_CN';
-import dantdEnUS from 'knowdesign/lib/locale/en_US';
+import dantdZhCN from 'knowdesign/es/locale/zh_CN';
+import dantdEnUS from 'knowdesign/es/locale/en_US';
 import intlZhCN from './locales/zh';
 import intlEnUS from './locales/en';
 import { AppContainer, RouteGuard, DProLayout } from 'knowdesign';
diff --git a/km-console/packages/config-manager-fe/src/components/TagsWithHide/index.tsx b/km-console/packages/config-manager-fe/src/components/TagsWithHide/index.tsx
index 2b676698..dcf80ee4 100644
--- a/km-console/packages/config-manager-fe/src/components/TagsWithHide/index.tsx
+++ b/km-console/packages/config-manager-fe/src/components/TagsWithHide/index.tsx
@@ -1,6 +1,6 @@
 import { DownOutlined } from '@ant-design/icons';
 import { Popover } from 'knowdesign';
-import { TooltipPlacement } from 'knowdesign/lib/basic/tooltip';
+import { TooltipPlacement } from 'knowdesign/es/basic/tooltip';
 import React, { useState, useRef, useEffect } from 'react';
 import './index.less';
 
@@ -90,8 +90,9 @@ export default (props: PropsType) => {
         return (
           <div
             key={i}
-            className={`container-item ${curState.calculated ? (curState.isHideExpandNode ? 'show' : i >= curState.endI ? 'hide' : 'show') : ''
-              }`}
+            className={`container-item ${
+              curState.calculated ? (curState.isHideExpandNode ? 'show' : i >= curState.endI ? 'hide' : 'show') : ''
+            }`}
           >
             {item}
           </div>
diff --git a/km-console/packages/layout-clusters-fe/src/app.tsx b/km-console/packages/layout-clusters-fe/src/app.tsx
index 0c5545ab..a2dd0a30 100755
--- a/km-console/packages/layout-clusters-fe/src/app.tsx
+++ b/km-console/packages/layout-clusters-fe/src/app.tsx
@@ -4,8 +4,8 @@ import React, { useState, useEffect, useLayoutEffect } from 'react';
 import { BrowserRouter, Switch, Route, useLocation, useHistory } from 'react-router-dom';
 import { get as lodashGet } from 'lodash';
 import { DProLayout, AppContainer, IconFont, Menu, Utils, Page403, Page404, Page500, Modal } from 'knowdesign';
-import dantdZhCN from 'knowdesign/lib/locale/zh_CN';
-import dantdEnUS from 'knowdesign/lib/locale/en_US';
+import dantdZhCN from 'knowdesign/es/locale/zh_CN';
+import dantdEnUS from 'knowdesign/es/locale/en_US';
 import { DotChartOutlined } from '@ant-design/icons';
 import { licenseEventBus } from './constants/axiosConfig';
 import intlZhCN from './locales/zh';
diff --git a/km-console/packages/layout-clusters-fe/src/components/TagsWithHide/index.tsx b/km-console/packages/layout-clusters-fe/src/components/TagsWithHide/index.tsx
index 685f4d30..29454309 100644
--- a/km-console/packages/layout-clusters-fe/src/components/TagsWithHide/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/TagsWithHide/index.tsx
@@ -1,6 +1,6 @@
 import { DownOutlined } from '@ant-design/icons';
 import { Popover } from 'knowdesign';
-import { TooltipPlacement } from 'knowdesign/lib/basic/tooltip';
+import { TooltipPlacement } from 'knowdesign/es/basic/tooltip';
 import React, { useState, useRef, useEffect } from 'react';
 import './index.less';
 
@@ -93,8 +93,9 @@ export default (props: PropsType) => {
         return (
           <div
             key={i}
-            className={`container-item ${curState.calculated ? (curState.isHideExpandNode ? 'show' : i >= curState.endI ? 'hide' : 'show') : ''
-              }`}
+            className={`container-item ${
+              curState.calculated ? (curState.isHideExpandNode ? 'show' : i >= curState.endI ? 'hide' : 'show') : ''
+            }`}
           >
             {item}
           </div>
diff --git a/km-console/packages/layout-clusters-fe/src/pages/BrokerControllerChangeLog/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/BrokerControllerChangeLog/index.tsx
index bd2443cd..7782bc15 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/BrokerControllerChangeLog/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/BrokerControllerChangeLog/index.tsx
@@ -5,7 +5,7 @@ import API from '../../api';
 import { getControllerChangeLogListColumns, defaultPagination } from './config';
 import BrokerDetail from '../BrokerDetail';
 import BrokerHealthCheck from '@src/components/CardBar/BrokerHealthCheck';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import './index.less';
 
 const { request } = Utils;
diff --git a/km-console/packages/layout-clusters-fe/src/pages/BrokerDashboard/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/BrokerDashboard/index.tsx
index 528ced31..a3398dec 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/BrokerDashboard/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/BrokerDashboard/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { MetricType } from '@src/api';
 import BrokerHealthCheck from '@src/components/CardBar/BrokerHealthCheck';
 import DashboardDragChart from '@src/components/DashboardDragChart';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import { AppContainer } from 'knowdesign';
 
 const BrokerDashboard = (): JSX.Element => {
diff --git a/km-console/packages/layout-clusters-fe/src/pages/BrokerList/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/BrokerList/index.tsx
index 68230f60..8be77597 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/BrokerList/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/BrokerList/index.tsx
@@ -7,7 +7,7 @@ import { dealTableRequestParams } from '../../constants/common';
 import BrokerDetail from '../BrokerDetail';
 import CardBar from '@src/components/CardBar';
 import BrokerHealthCheck from '@src/components/CardBar/BrokerHealthCheck';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import './index.less';
 const { request } = Utils;
 
diff --git a/km-console/packages/layout-clusters-fe/src/pages/Consumers/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/Consumers/index.tsx
index 7f2d2325..46a77761 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/Consumers/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/Consumers/index.tsx
@@ -7,7 +7,7 @@ import { getOperatingStateListParams } from './interface';
 import { useParams } from 'react-router-dom';
 import ConsumerGroupDetail from './ConsumerGroupDetail';
 import ConsumerGroupHealthCheck from '@src/components/CardBar/ConsumerGroupHealthCheck';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import { hashDataParse } from '@src/constants/common';
 
 const { Option } = Select;
diff --git a/km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx
index 1704c7cd..29448b1d 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx
@@ -4,7 +4,7 @@ import { ProTable, Drawer, Utils, AppContainer, Form, Select, Input, Button, mes
 import API from '../../api';
 import { getJobsListColumns, defaultPagination, runningStatus, jobType } from './config';
 import JobsCheck from '@src/components/CardBar/JobsCheck';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import { ViewJobsProgress } from './ViewJobsProgress';
 import './index.less';
 import ReplicaChange from '@src/components/TopicJob/ReplicaChange';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/index.tsx
index 06cb7289..cc0a6c02 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/index.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Select, Form, Utils, AppContainer, Input, Button, ProTable, Badge, Tag, SearchInput } from 'knowdesign';
 import BalanceDrawer from './BalanceDrawer';
 import HistoryDrawer from './HistoryDrawer';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import { getSizeAndUnit } from '../../constants/common';
 import api from '../../api';
 import './index.less';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/config.ts b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/config.ts
index d5b8bf31..ccc879c7 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/config.ts
+++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/config.ts
@@ -1,4 +1,4 @@
-import { FormItemType, IFormItem } from 'knowdesign/lib/extend/x-form';
+import { FormItemType, IFormItem } from 'knowdesign/es/extend/x-form';
 
 export const bootstrapServersErrCodes = [10, 11, 12];
 export const zkErrCodes = [20, 21];
diff --git a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.tsx
index 481bf0b5..e4b4b2c6 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.tsx
@@ -1,4 +1,4 @@
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import React from 'react';
 import TourGuide, { ClusterDetailSteps } from '@src/components/TourGuide';
 import './index.less';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/component/ConfigForm.tsx b/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/component/ConfigForm.tsx
index 4aa38014..a4f8f838 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/component/ConfigForm.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/component/ConfigForm.tsx
@@ -1,5 +1,5 @@
 import { Button, XForm } from 'knowdesign';
-import { IFormItem } from 'knowdesign/lib/extend/x-form';
+import { IFormItem } from 'knowdesign/es/extend/x-form';
 import * as React from 'react';
 import './style/form.less';
 import { useIntl } from 'react-intl';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/config.tsx b/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/config.tsx
index 097f9f71..d27f8d4e 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/config.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/config.tsx
@@ -1,4 +1,4 @@
-import { FormItemType, IFormItem } from 'knowdesign/lib/extend/x-form';
+import { FormItemType, IFormItem } from 'knowdesign/es/extend/x-form';
 import moment from 'moment';
 import React from 'react';
 import { timeFormat } from '../../constants/common';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/index.tsx
index 59709947..e3e3f6b9 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/index.tsx
@@ -1,5 +1,5 @@
 import { AppContainer } from 'knowdesign';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 import TaskTabs from './component/TaskTabs';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/ConfigFrom.tsx b/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/ConfigFrom.tsx
index 0a7b14d5..dd9d9fda 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/ConfigFrom.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/ConfigFrom.tsx
@@ -1,5 +1,5 @@
 import { Button, Col, Form, Row } from 'knowdesign';
-import { FormItemType, handleFormItem, IFormItem, renderFormItem } from 'knowdesign/lib/extend/x-form';
+import { FormItemType, handleFormItem, IFormItem, renderFormItem } from 'knowdesign/es/extend/x-form';
 import * as React from 'react';
 import './style/form.less';
 import EditTable from './EditTable';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/config.tsx b/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/config.tsx
index 6739a457..81503271 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/config.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/config.tsx
@@ -1,6 +1,6 @@
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { IconFont, Switch, Tooltip } from 'knowdesign';
-import { FormItemType, IFormItem } from 'knowdesign/lib/extend/x-form';
+import { FormItemType, IFormItem } from 'knowdesign/es/extend/x-form';
 import moment from 'moment';
 import React from 'react';
 import { timeFormat, getRandomStr } from '@src/constants/common';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/index.tsx
index ed7dbf82..5be8338d 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import ProduceClientTest from './Produce';
 import './index.less';
 import TaskTabs from '../TestingConsumer/component/TaskTabs';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import { useParams } from 'react-router-dom';
 
 const Produce = () => {
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicDashboard/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicDashboard/index.tsx
index 32b6a4aa..72797227 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDashboard/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDashboard/index.tsx
@@ -3,7 +3,7 @@ import { MetricType } from '@src/api';
 import TopicHealthCheck from '@src/components/CardBar/TopicHealthCheck';
 import DashboardDragChart from '@src/components/DashboardDragChart';
 import { AppContainer } from 'knowdesign';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 
 const TopicDashboard = () => {
   const [global] = AppContainer.useGlobalValue();
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
index 787eaf12..02db801e 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
@@ -10,7 +10,7 @@ import TopicHealthCheck from '@src/components/CardBar/TopicHealthCheck';
 import TopicDetail from '../TopicDetail';
 import Delete from './Delete';
 import { ClustersPermissionMap } from '../CommonConfig';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import ReplicaChange from '@src/components/TopicJob/ReplicaChange';
 import SmallChart from '@src/components/SmallChart';
 import ReplicaMove from '@src/components/TopicJob/ReplicaMove';