Merge pull request #542 from didi/dev

前端优化
2025-12-24 11:52:08 +08:00 · 2022-09-02 12:46:04 +08:00
parent 69adf682e2 ab3b83e42a
commit 639b1f8336
32 changed files with 87 additions and 74 deletions
--- a/km-common/src/main/java/com/xiaojukeji/know/streaming/km/common/zookeeper/znode/brokers/BrokerMetadata.java
+++ b/km-common/src/main/java/com/xiaojukeji/know/streaming/km/common/zookeeper/znode/brokers/BrokerMetadata.java
@@ -113,7 +113,7 @@ public class BrokerMetadata implements Serializable {

            brokerMetadata.getEndpointMap().put(endpoint.substring(0, idx1), new IpPortData(brokerHost, brokerPort));

-            if (KafkaConstant.EXTERNAL_KEY.equals(endpoint.substring(0, idx1))) {
+            if (KafkaConstant.INTERNAL_KEY.equals(endpoint.substring(0, idx1))) {
                // 优先使用internal的地址进行展示
                brokerMetadata.setHost(brokerHost);
                brokerMetadata.setPort(ConvertUtil.string2Integer(brokerPort));
--- 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';
--- 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>
--- a/km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx
+++ b/km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx
@@ -77,6 +77,7 @@ const RoleDetailAndUpdate = forwardRef((props, ref): JSX.Element => {

  const onSubmit = () => {
    form.validateFields().then((formData) => {
+      formData.permissionIdList = formData.permissionIdList.filter((l) => l);
      formData.permissionIdList.forEach((arr, i) => {
        // 如果分配的系统下的子权限，自动赋予该系统的权限
        if (arr !== null && arr.length) {
@@ -212,7 +213,7 @@ const RoleDetailAndUpdate = forwardRef((props, ref): JSX.Element => {
            rules={[
              () => ({
                validator(_, value) {
-                  if (Array.isArray(value) && value.some((item) => !!item.length)) {
+                  if (Array.isArray(value) && value.some((item) => !!item?.length)) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('请为角色至少分配一项权限'));
--- a/km-console/packages/layout-clusters-fe/config/CoverHtmlWebpackPlugin.js
+++ b/km-console/packages/layout-clusters-fe/config/CoverHtmlWebpackPlugin.js
@@ -86,12 +86,12 @@ class CoverHtmlWebpackPlugin {

        assetJson.reverse().forEach((item) => {
          if (/\.js$/.test(item)) {
-            // if (item.includes('vendor~')) {
-            //   vendors += `<script async src="${item}"></script>`;
-            // } else {
-            // TODO: entry 只有一个
-            portalMap['@portal/layout'] = item;
-            // }
+            if (item.includes('vendor~')) {
+              vendors += `<script async src="${item}"></script>`;
+            } else {
+              // TODO: entry 只有一个
+              portalMap['@portal/layout'] = item;
+            }
          } else if (/\.css$/.test(item)) {
            links += `<link href="${item}" rel="stylesheet">`;
          }
--- a/km-console/packages/layout-clusters-fe/config/d1-webpack.base.js
+++ b/km-console/packages/layout-clusters-fe/config/d1-webpack.base.js
@@ -9,7 +9,6 @@ const TerserJSPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const theme = require('./theme');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

 const isProd = process.env.NODE_ENV === 'production';
 const babelOptions = {
@@ -43,7 +42,6 @@ const babelOptions = {
 module.exports = () => {
  const cssFileName = isProd ? '[name]-[chunkhash].css' : '[name].css';
  const plugins = [
-    // !isProd && new HardSourceWebpackPlugin(),
    new CoverHtmlWebpackPlugin(),
    new ProgressBarPlugin(),
    new CaseSensitivePathsPlugin(),
@@ -150,23 +148,21 @@ module.exports = () => {
      ],
    },
    optimization: Object.assign(
-      // {
-      //   splitChunks: {
-      //     cacheGroups: {
-      //       vendor: {
-      //         test: /[\\/]node_modules[\\/]/,
-      //         chunks: 'all',
-      //         name: 'vendor',
-      //         priority: 10,
-      //         enforce: true,
-      //         minChunks: 1,
-      //         maxSize: 3500000,
-      //       },
-      //     },
-      //   },
-      // },
      isProd
        ? {
+            splitChunks: {
+              cacheGroups: {
+                vendor: {
+                  test: /[\\/]node_modules[\\/]/,
+                  chunks: 'all',
+                  name: 'vendor',
+                  priority: 10,
+                  enforce: true,
+                  minChunks: 1,
+                  maxSize: 3000000,
+                },
+              },
+            },
            minimizer: [
              new TerserJSPlugin({
                cache: true,
--- 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';
--- 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>
--- 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;
--- 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 => {
--- 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;

--- 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;
--- a/km-console/packages/layout-clusters-fe/src/pages/Jobs/config.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/Jobs/config.tsx
@@ -19,9 +19,9 @@ export const jobType = [
  },
  process.env.BUSSINESS_VERSION
    ? {
-      label: '集群均衡',
-      value: 2,
-    }
+        label: '集群均衡',
+        value: 2,
+      }
    : undefined,
 ].filter((t) => t);

@@ -75,6 +75,7 @@ export const getJobsListColumns = (arg?: any) => {
      title: '任务ID',
      dataIndex: 'id',
      key: 'id',
+      width: 70,
    },
    {
      title: '任务类型',
--- 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';
--- 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';
--- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable react/display-name */
-
 import { Button, Divider, Drawer, Form, Input, InputNumber, message, Radio, Select, Spin, Space, Utils } from 'knowdesign';
 import * as React from 'react';
 import { useIntl } from 'react-intl';
@@ -16,10 +14,9 @@ const clientPropertiesPlaceholder = `用于创建Kafka客户端进行信息获
 {
  "security.protocol": "SASL_PLAINTEXT",
  "sasl.mechanism": "SCRAM-SHA-256",
-  "sasl.jaas.config": 
-  "org.apache.kafka.common.security.scram.
-  ScramLoginModule required username="xxxxxx" 
-  password="xxxxxx";"
+  "sasl.jaas.config": "org.apache.kafka.common.security.
+scram.ScramLoginModule required username=\\"xxxxxx\\" pass
+word=\\"xxxxxx\\";"
 }
 `;

--- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/HomePage.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/HomePage.tsx
@@ -93,7 +93,10 @@ const MultiClusterPage = () => {
    setVersionLoading(true);
    Utils.request(API.getClustersVersion)
      .then((versions: string[]) => {
-        setExistKafkaVersion(versions || []);
+        if (!Array.isArray(versions)) {
+          versions = [];
+        }
+        setExistKafkaVersion(versions.sort().reverse() || []);
        setVersionLoading(false);
        setCheckedKafkaVersions(versions || []);
      })
@@ -299,7 +302,9 @@ const MultiClusterPage = () => {
            <div className="test-modal-23"></div>
          </div>
        </div>
-        <Spin spinning={clusterLoading}>{renderList}</Spin>
+        <div className="multi-cluster-page-dashboard">
+          <Spin spinning={clusterLoading}>{renderList}</Spin>
+        </div>
      </div>
    );
  };
--- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/List.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/List.tsx
@@ -147,9 +147,9 @@ const ListScroll = (props: { loadMoreData: any; list: any; pagination: any; getP
                    }}
                  >
                    {[
-                      ['BytesIn', loadReBalanceEnable && loadReBalanceNwIn],
-                      ['BytesOut', loadReBalanceEnable && loadReBalanceNwOut],
-                      ['Disk', loadReBalanceEnable && loadReBalanceDisk],
+                      ['BytesIn', loadReBalanceNwIn === 1],
+                      ['BytesOut', loadReBalanceNwOut === 1],
+                      ['Disk', loadReBalanceDisk === 1],
                    ].map(([name, isBalanced]) => {
                      return isBalanced ? (
                        <div className="balance-box balanced">{name} 已均衡</div>
--- 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];
--- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/index.less
@@ -329,6 +329,11 @@
      }
    }
  }
+  &-dashboard {
+    & > .dcloud-spin-nested-loading > .dcloud-spin-container::after {
+      background: transparent;
+    }
+  }

  .multi-cluster-list {
    box-sizing: content-box;
--- a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/index.tsx
@@ -201,6 +201,8 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
          if (Number.isNaN(parsedValue)) {
            parsedValue = values.MessagesIn;
          } else {
+            // 为避免出现过小的数字影响图表展示效果，图表值统一只保留到小数点后三位
+            parsedValue = parseFloat(parsedValue.toFixed(3));
            if (maxValue < parsedValue) maxValue = parsedValue;
          }
          const valuesWithUnit = Object.entries(values).map(([key, value]) => {
@@ -287,8 +289,8 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
          checkboxProps: (record: MetricInfo) => {
            return record.name === DEFAULT_METRIC
              ? {
-                disabled: true,
-              }
+                  disabled: true,
+                }
              : {};
          },
          submitCallback: indicatorChangeCallback,
--- a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/LeftSider.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/LeftSider.tsx
@@ -165,9 +165,9 @@ const LeftSider = () => {
          <div className="tag default">{clusterInfo?.kafkaVersion ?? '-'}</div>
          {clusterMetrics?.LoadReBalanceEnable !== undefined &&
            [
-              ['BytesIn', clusterMetrics?.LoadReBalanceEnable && clusterMetrics?.LoadReBalanceNwIn],
-              ['BytesOut', clusterMetrics?.LoadReBalanceEnable && clusterMetrics?.LoadReBalanceNwOut],
-              ['Disk', clusterMetrics?.LoadReBalanceEnable && clusterMetrics?.LoadReBalanceDisk],
+              ['BytesIn', clusterMetrics?.LoadReBalanceNwIn === 1],
+              ['BytesOut', clusterMetrics?.LoadReBalanceNwOut === 1],
+              ['Disk', clusterMetrics?.LoadReBalanceDisk === 1],
            ].map(([name, isBalanced]) => {
              return isBalanced ? (
                <div className="tag balanced">{name} 已均衡</div>
--- 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';
--- a/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/Consume.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/Consume.tsx
@@ -192,8 +192,10 @@ const ConsumeClientTest = () => {
        // 过滤出消费数量不足设定值的partition
        const filtersPartition = _partitionList.filter((item: any) => item.recordCount < untilMsgNum);
        curPartitionList.current = filtersPartition; // 用作下一次请求的入参
-        setIsStop(filtersPartition.length < 1);
-        isStopStatus.current = filtersPartition.length < 1;
+        if (!isStop) {
+          setIsStop(filtersPartition.length < 1);
+          isStopStatus.current = filtersPartition.length < 1;
+        }
        break;
      case 'max size':
        setIsStop(+recordSizeCur.current >= unitMsgSize);
@@ -202,8 +204,10 @@ const ConsumeClientTest = () => {
      case 'max size per partition':
        // 过滤出消费size不足设定值的partition
        const filters = partitionConsumedList.filter((item: any) => item.recordSizeUnitB < unitMsgSize);
-        setIsStop(filters.length < 1);
-        isStopStatus.current = filters.length < 1;
+        if (!isStop) {
+          setIsStop(filters.length < 1);
+          isStopStatus.current = filters.length < 1;
+        }
        curPartitionList.current = filters;
        break;
    }
--- 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';
--- 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';
--- 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';
--- 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';
--- 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';
--- 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 = () => {
--- 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();
--- 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';