前端优化

2025-12-24 11:52:08 +08:00 · 2022-08-24 21:29:57 +08:00
parent 9465c6f198
commit 47887a20c6
19 changed files with 115 additions and 97 deletions
--- a/km-console/packages/config-manager-fe/src/components/TagsWithHide/index.less
+++ b/km-console/packages/config-manager-fe/src/components/TagsWithHide/index.less
@@ -46,7 +46,7 @@
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0 6px 12px 12px rgba(0, 0, 0, 0.04), 0 6px 10px 0 rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    &-content {
-      padding: 10px 8px 4px 8px;
+      padding: 0;
    }
  }
  .dcloud-popover-arrow-content {
@@ -56,6 +56,7 @@
    display: flex;
    flex-flow: row wrap;
    max-width: 560px;
+    padding: 10px 8px 4px 8px;
    .container-item {
      flex-shrink: 0;
      height: 20px;
--- a/km-console/packages/config-manager-fe/src/pages/CommonConfig.tsx
+++ b/km-console/packages/config-manager-fe/src/pages/CommonConfig.tsx
@@ -31,10 +31,10 @@ export interface PermissionNode {
 }

 const CommonConfig = (): JSX.Element => {
-  const [global, setGlobal] = AppContainer.useGlobalValue();
+  const [, setGlobal] = AppContainer.useGlobalValue();

  // 获取权限树
-  const getPermissionTree = (userId: number) => {
+  const getPermissionTree = (userInfo, userId: number) => {
    const getUserInfo = Utils.request(`/logi-security/api/v1/user/${userId}`);
    const getPermissionTree = Utils.request('/logi-security/api/v1/permission/tree');

@@ -55,18 +55,16 @@ const CommonConfig = (): JSX.Element => {

  useLayoutEffect(() => {
    // 如果未登录，直接跳转到登录页
-    const userInfo = localStorage.getItem('userInfo');
-    let userId: number;
+    const userInfoStorage = localStorage.getItem('userInfo');

    try {
-      userId = JSON.parse(userInfo).id;
+      const userInfo = JSON.parse(userInfoStorage);
+      const userId = userInfo.id;
      if (!userId) throw 'err';
+      getPermissionTree(userInfo, userId);
    } catch (_) {
      goLogin();
-      return;
    }
-
-    getPermissionTree(userId);
  }, []);

  return <></>;
--- a/km-console/packages/config-manager-fe/src/pages/OperationLog/index.tsx
+++ b/km-console/packages/config-manager-fe/src/pages/OperationLog/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Input, Select, ProTable, DatePicker, Utils } from 'knowdesign';
+import { Button, Form, Input, Select, ProTable, DatePicker, Utils, Tooltip } from 'knowdesign';
 import api from 'api';
 import { defaultPagination } from 'constants/common';
 import TypicalListCard from '../../components/TypicalListCard';
@@ -39,6 +39,13 @@ export default () => {
      dataIndex: 'detail',
      width: 350,
      lineClampOne: true,
+      render(content) {
+        return (
+          <Tooltip placement="bottomLeft" title={content}>
+            {content}
+          </Tooltip>
+        );
+      },
    },
    {
      title: '操作时间',
--- a/km-console/packages/layout-clusters-fe/src/api/index.ts
+++ b/km-console/packages/layout-clusters-fe/src/api/index.ts
@@ -66,6 +66,7 @@ const api = {
  getPhyClusterBasic: (clusterPhyId: number) => getApi(`/physical-clusters/${clusterPhyId}/basic`),
  getPhyClusterMetrics: (clusterPhyId: number) => getApi(`/physical-clusters/${clusterPhyId}/latest-metrics`),
  getClusterBasicExit: (clusterPhyName: string) => getApi(`/physical-clusters/${clusterPhyName}/basic-combine-exist`),
+  getClustersVersion: getApi('/physical-clusters/exist-version'),

  kafkaValidator: getApi(`/utils/kafka-validator`),

--- a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/config.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/config.tsx
@@ -144,9 +144,10 @@ const seriesCallback = (lines: { name: string; data: [number, string | number][]
      },
      symbol: 'emptyCircle',
      symbolSize: 4,
-      // emphasis: {
-      //   focus: 'self',
-      // },
+      smooth: 0.25,
+      areaStyle: {
+        opacity: 0.02,
+      },
    };
  });
 };
@@ -181,6 +182,7 @@ export const getDetailChartConfig = (title: string, sliderPos: readonly [number,
      legend: {
        show: false,
      },
+      color: CHART_COLOR_LIST,
      dataZoom: [
        {
          type: 'inside',
--- a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.less
+++ b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.less
@@ -7,6 +7,9 @@
  &-container {
    height: calc(100% - 40px);
    overflow: auto;
+    .no-group-con {
+      overflow: hidden;
+    }
    .drag-sort-item:last-child {
      margin-bottom: 10px;
    }
--- a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.tsx
@@ -38,7 +38,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
  const [selectedMetricNames, setSelectedMetricNames] = useState<(string | number)[]>([]); // 默认选中的指标的列表
  const [curHeaderOptions, setCurHeaderOptions] = useState<ChartFilterOptions>();
  const [metricChartData, setMetricChartData] = useState<MetricChartDataType[]>([]); // 指标图表数据列表
-  const [gridNum, setGridNum] = useState<number>(8); // 图表列布局
+  const [gridNum, setGridNum] = useState<number>(12); // 图表列布局
  const chartDetailRef = useRef(null);
  const chartDragOrder = useRef([]);
  const curFetchingTimestamp = useRef(0);
@@ -49,13 +49,13 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
    const list = res.map((item: any) => {
      return dashboardType === MetricType.Broker
        ? {
-          label: item.host,
-          value: item.brokerId,
-        }
+            label: item.host,
+            value: item.brokerId,
+          }
        : {
-          label: item.topicName,
-          value: item.topicName,
-        };
+            label: item.topicName,
+            value: item.topicName,
+          };
    });
    setScopeList(list);
  };
@@ -145,7 +145,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
  const ksHeaderChange = (ksOptions: KsHeaderOptions) => {
    // 重新渲染图表
    if (gridNum !== ksOptions.gridNum) {
-      setGridNum(ksOptions.gridNum || 8);
+      setGridNum(ksOptions.gridNum || 12);
      busInstance.emit('chartResize');
    } else {
      // 如果为相对时间，则当前时间减去 1 分钟，避免最近一分钟的数据还没采集到时前端多补一个点
--- a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/index.tsx
@@ -85,10 +85,10 @@ const SingleChartHeader = ({
  hideGridSelect = false,
  onChange: onChangeCallback,
 }: PropsType): JSX.Element => {
-  const [gridNum, setGridNum] = useState<number>(GRID_SIZE_OPTIONS[0].value);
+  const [gridNum, setGridNum] = useState<number>(GRID_SIZE_OPTIONS[1].value);
  const [rangeTime, setRangeTime] = useState<[number, number]>(() => {
    const curTimeStamp = moment().valueOf();
-    return [curTimeStamp - 15 * 60 * 1000, curTimeStamp];
+    return [curTimeStamp - 60 * 60 * 1000, curTimeStamp];
  });
  const [isRelativeRangeTime, setIsRelativeRangeTime] = useState(true);
  const [isAutoReload, setIsAutoReload] = useState(false);
--- a/km-console/packages/layout-clusters-fe/src/components/SmallChart/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/SmallChart/index.tsx
@@ -37,6 +37,7 @@ const LINE_CONFIG = {
  lineStyle: {
    color: '#556EE6',
    width: 1,
+    smooth: 0.25,
  },
  areaStyle: {
    color: {
--- a/km-console/packages/layout-clusters-fe/src/constants/axiosConfig.ts
+++ b/km-console/packages/layout-clusters-fe/src/constants/axiosConfig.ts
@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-
 import { notification, Utils } from 'knowdesign';
 const { EventBus } = Utils;
 export const licenseEventBus = new EventBus();
@@ -14,7 +11,7 @@ export const goLogin = () => {
 const serviceInstance = Utils.service;

 // 清除 axios 实例默认的响应拦截
-serviceInstance.interceptors.response.handlers = [];
+(serviceInstance.interceptors.response as any).handlers = [];

 // 请求拦截
 serviceInstance.interceptors.request.use(
@@ -26,8 +23,8 @@ serviceInstance.interceptors.request.use(
    } else {
      config.headers['X-SSO-USER'] = user; // 请求携带token
      config.headers['X-SSO-USER-ID'] = id;
-      return config;
    }
+    return config;
  },
  (err: any) => {
    return err;
@@ -54,8 +51,8 @@ serviceInstance.interceptors.response.use(
    return res;
  },
  (err: any) => {
-    const config = err.config;
-    if (!config || !config.retryTimes) return dealResponse(err, config.customNotification);
+    const config = err?.config;
+    if (!config || !config.retryTimes) return dealResponse(err);
    const { __retryCount = 0, retryDelay = 300, retryTimes } = config;
    config.__retryCount = __retryCount;
    if (__retryCount >= retryTimes) {
--- a/km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts
+++ b/km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts
@@ -3,25 +3,24 @@ import moment from 'moment';
 export const CHART_COLOR_LIST = [
  '#657DFC',
  '#A7B1EB',
-  '#85C80D',
-  '#C9E795',
-  '#FFC300',
-  '#F9D77B',
-  '#8BA3C4',
-  '#C2D0E3',
-  '#FF7066',
-  '#F5B6B3',
  '#2AC8E4',
  '#9DDEEB',
+  '#3991FF',
+  '#94BEF2',
+  '#C2D0E3',
+  '#F5B6B3',
+  '#85C80D',
+  '#C9E795',
  '#A76CEC',
  '#CCABF1',
  '#FF9C1B',
  '#F5C993',
-  '#3991FF',
-  '#94BEF2',
+  '#FFC300',
+  '#F9D77B',
  '#12CA7A',
+  '#8BA3C4',
+  '#FF7066',
  '#A7E6C7',
-  '#FF5AB2',
  '#F19FC9',
  '#AEAEAE',
  '#D1D1D1',
@@ -132,11 +131,10 @@ export const getBasicChartConfig = (props: any = {}) => {
      itemWidth: 8,
      itemGap: 8,
      textStyle: {
-        width: 85,
-        overflow: 'truncate',
-        ellipsis: '...',
+        // width: 85,
+        // overflow: 'truncate',
+        // ellipsis: '...',
        fontSize: 11,
-        lineHeight: 12,
        color: '#74788D',
      },
      pageIcons: {
@@ -148,6 +146,7 @@ export const getBasicChartConfig = (props: any = {}) => {
      pageIconColor: '#495057',
      pageIconInactiveColor: '#ADB5BC',
      pageIconSize: 6,
+      tooltip: false,
      ...legend,
    },
    // 横坐标配置
--- a/km-console/packages/layout-clusters-fe/src/pages/Consumers/ConsumerGroupDetail.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/Consumers/ConsumerGroupDetail.tsx
@@ -478,6 +478,7 @@ export default (props: any) => {
                    lineStyle: {
                      width: 1.5,
                    },
+                    smooth: 0.25,
                    symbol: 'emptyCircle',
                    symbolSize: 4,
                    emphasis: {
--- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/CustomCheckGroup.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/CustomCheckGroup.tsx
@@ -7,18 +7,18 @@ const CheckboxGroup = Checkbox.Group;

 interface IVersion {
  firstLine: string[];
-  leftVersion: string[];
+  leftVersions: string[];
 }

-const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: any }) => {
-  const { kafkaVersion, onChangeCheckGroup } = props;
+const CustomCheckGroup = (props: { kafkaVersions: string[]; onChangeCheckGroup: any }) => {
+  const { kafkaVersions, onChangeCheckGroup } = props;
  const [checkedKafkaVersion, setCheckedKafkaVersion] = React.useState<IVersion>({
    firstLine: [],
-    leftVersion: [],
+    leftVersions: [],
  });
  const [allVersion, setAllVersion] = React.useState<IVersion>({
    firstLine: [],
-    leftVersion: [],
+    leftVersions: [],
  });

  const [indeterminate, setIndeterminate] = React.useState(false);
@@ -30,27 +30,27 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
    document.addEventListener('click', handleDocumentClick);
    return () => {
      document.removeEventListener('click', handleDocumentClick);
-    }
+    };
  }, []);

  const handleDocumentClick = (e: Event) => {
    setShowMore(false);
-  }
+  };

  const setCheckAllStauts = (list: string[], otherList: string[]) => {
    onChangeCheckGroup([...list, ...otherList]);
-    setIndeterminate(!!list.length && list.length + otherList.length < kafkaVersion.length);
-    setCheckAll(list.length + otherList.length === kafkaVersion.length);
+    setIndeterminate(!!list.length && list.length + otherList.length < kafkaVersions.length);
+    setCheckAll(list.length + otherList.length === kafkaVersions.length);
  };

  const getTwoPanelVersion = () => {
    const width = (document.getElementsByClassName('custom-check-group')[0] as any)?.offsetWidth;
    const checkgroupWidth = width - 100 - 86;
    const num = (checkgroupWidth / 108) | 0;
-    const firstLine = Array.from(kafkaVersion).splice(0, num);
+    const firstLine = Array.from(kafkaVersions).splice(0, num);
    setMoreGroupWidth(num * 108 + 88 + 66);
-    const leftVersion = Array.from(kafkaVersion).splice(num);
-    return { firstLine, leftVersion };
+    const leftVersions = Array.from(kafkaVersions).splice(num);
+    return { firstLine, leftVersions };
  };

  const onFirstVersionChange = (list: []) => {
@@ -59,13 +59,13 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
      firstLine: list,
    });

-    setCheckAllStauts(list, checkedKafkaVersion.leftVersion);
+    setCheckAllStauts(list, checkedKafkaVersion.leftVersions);
  };

  const onLeftVersionChange = (list: []) => {
    setCheckedKafkaVersion({
      ...checkedKafkaVersion,
-      leftVersion: list,
+      leftVersions: list,
    });
    setCheckAllStauts(list, checkedKafkaVersion.firstLine);
  };
@@ -77,11 +77,11 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
      e.target.checked
        ? versions
        : {
-          firstLine: [],
-          leftVersion: [],
-        }
+            firstLine: [],
+            leftVersions: [],
+          }
    );
-    onChangeCheckGroup(e.target.checked ? [...versions.firstLine, ...versions.leftVersion] : []);
+    onChangeCheckGroup(e.target.checked ? [...versions.firstLine, ...versions.leftVersions] : []);

    setIndeterminate(false);
    setCheckAll(e.target.checked);
@@ -112,16 +112,20 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
          <CheckboxGroup
            style={{ width: moreGroupWidth }}
            className="more-check-group"
-            options={allVersion.leftVersion}
-            value={checkedKafkaVersion.leftVersion}
+            options={allVersion.leftVersions}
+            value={checkedKafkaVersion.leftVersions}
            onChange={onLeftVersionChange}
          />
        ) : null}
-        <div className="more-btn" onClick={() => setShowMore(!showMore)}>
-          <a>
-            {!showMore ? '展开更多' : '收起更多'} <DoubleRightOutlined style={{ transform: `rotate(${showMore ? '270' : '90'}deg)` }} />
-          </a>
-        </div>
+        {allVersion.leftVersions.length ? (
+          <div className="more-btn" onClick={() => setShowMore(!showMore)}>
+            <a>
+              {!showMore ? '展开更多' : '收起更多'} <DoubleRightOutlined style={{ transform: `rotate(${showMore ? '270' : '90'}deg)` }} />
+            </a>
+          </div>
+        ) : (
+          <></>
+        )}
      </div>
    </>
  );
--- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/HomePage.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/HomePage.tsx
@@ -17,11 +17,12 @@ const MultiClusterPage = () => {
  const [run, setRun] = useState<boolean>(false);
  const [global] = AppContainer.useGlobalValue();
  const [statusList, setStatusList] = React.useState([1, 0]);
-  const [kafkaVersion, setKafkaVersion] = React.useState({});
+  const [kafkaVersions, setKafkaVersions] = React.useState<string[]>([]);
+  const [existKafkaVersion, setExistKafkaVersion] = React.useState<string[]>([]);
  const [visible, setVisible] = React.useState(false);
  const [list, setList] = useState<[]>([]);
  const [healthScoreRange, setHealthScoreRange] = React.useState([0, 100]);
-  const [checkedKafkaVersion, setCheckedKafkaVersion] = React.useState({});
+  const [checkedKafkaVersions, setCheckedKafkaVersions] = React.useState<string[]>([]);
  const [sortInfo, setSortInfo] = React.useState({
    sortField: 'HealthScore',
    sortType: 'asc',
@@ -59,7 +60,7 @@ const MultiClusterPage = () => {
      preciseFilterDTOList: [
        {
          fieldName: 'kafkaVersion',
-          fieldValueList: checkedKafkaVersion,
+          fieldValueList: checkedKafkaVersions as (string | number)[],
        },
      ],
      rangeFilterDTOList: [
@@ -83,12 +84,18 @@ const MultiClusterPage = () => {
  };

  const getSupportKafkaVersion = () => {
+    Utils.request(API.supportKafkaVersion).then((res) => {
+      setKafkaVersions(Object.keys(res || {}));
+    });
+  };
+
+  const getExistKafkaVersion = () => {
    setVersionLoading(true);
-    Utils.request(API.supportKafkaVersion)
-      .then((res) => {
-        setKafkaVersion(res || {});
+    Utils.request(API.getClustersVersion)
+      .then((versions: string[]) => {
+        setExistKafkaVersion(versions || []);
        setVersionLoading(false);
-        setCheckedKafkaVersion(res ? Object.keys(res) : []);
+        setCheckedKafkaVersions(versions || []);
      })
      .catch((err) => {
        setVersionLoading(false);
@@ -108,6 +115,7 @@ const MultiClusterPage = () => {
  useEffect(() => {
    getPhyClusterState();
    getSupportKafkaVersion();
+    getExistKafkaVersion();
  }, []);

  useEffect(() => {
@@ -128,7 +136,7 @@ const MultiClusterPage = () => {
      .finally(() => {
        setClusterLoading(false);
      });
-  }, [sortInfo, checkedKafkaVersion, healthScoreRange, statusList, searchKeywords, isReload]);
+  }, [sortInfo, checkedKafkaVersions, healthScoreRange, statusList, searchKeywords, isReload]);

  const onSilderChange = (value: number[]) => {
    setHealthScoreRange(value);
@@ -151,7 +159,7 @@ const MultiClusterPage = () => {
  };

  const onChangeCheckGroup = (list: []) => {
-    setCheckedKafkaVersion(list);
+    setCheckedKafkaVersions(list);
  };

  const afterSubmitSuccessAccessClusters = () => {
@@ -247,10 +255,10 @@ const MultiClusterPage = () => {

                <div className="header-filter-bottom">
                  <div className="header-filter-bottom-item header-filter-bottom-item-checkbox">
-                    <h3 className="header-filter-bottom-item-title">版本选择</h3>
+                    <h3 className="header-filter-bottom-item-title">版本分布</h3>
                    <div className="header-filter-bottom-item-content flex">
-                      {Object.keys(kafkaVersion).length ? (
-                        <CustomCheckGroup kafkaVersion={Object.keys(kafkaVersion)} onChangeCheckGroup={onChangeCheckGroup} />
+                      {existKafkaVersion.length ? (
+                        <CustomCheckGroup kafkaVersions={existKafkaVersion} onChangeCheckGroup={onChangeCheckGroup} />
                      ) : null}
                    </div>
                  </div>
@@ -307,7 +315,7 @@ const MultiClusterPage = () => {
      <AccessClusters
        visible={visible}
        setVisible={setVisible}
-        kafkaVersion={Object.keys(kafkaVersion)}
+        kafkaVersion={kafkaVersions}
        afterSubmitSuccess={afterSubmitSuccessAccessClusters}
      />
    </>
--- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/index.less
@@ -295,6 +295,7 @@

                .more-btn {
                  height: 30px;
+                  line-height: 23px;
                }
              }
            }
@@ -652,7 +653,7 @@
    display: -webkit-inline-box;
    margin-right: 16px;

-    &.adjust-height-style{
+    &.adjust-height-style {
      .dcloud-form-item-label {
        padding: 0;
        label {
--- a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/config.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/config.tsx
@@ -84,6 +84,7 @@ export const getChartConfig = (props: any) => {
          lineStyle: {
            width: 1,
          },
+          smooth: 0.25,
          symbol: 'emptyCircle',
          symbolSize: 4,
          // 面积图样式
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/ExpandPartition.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicList/ExpandPartition.tsx
@@ -1,18 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import {
-  AppContainer,
-  Button,
-  Divider,
-  Drawer,
-  Form,
-  InputNumber,
-  notification,
-  SingleChart,
-  Space,
-  Spin,
-  Utils,
-} from 'knowdesign';
+import { AppContainer, Button, Divider, Drawer, Form, InputNumber, notification, SingleChart, Space, Spin, Utils } from 'knowdesign';
 import Api, { MetricType } from '@src/api/index';
 import { getBasicChartConfig, getUnit } from '@src/constants/chartConfig';
 import { formatChartData, MetricDefaultChartDataType } from '@src/components/DashboardDragChart/config';
@@ -193,6 +181,7 @@ const ExpandPartition = (props: { record: any; onConfirm: () => void }) => {
                      lineStyle: {
                        width: 1,
                      },
+                      smooth: 0.25,
                      symbol: 'emptyCircle',
                      symbolSize: 4,
                      emphasis: {
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/config.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicList/config.tsx
@@ -13,6 +13,7 @@ export const getChartConfig = (title: string) => {
        lineStyle: {
          width: 1,
        },
+        smooth: 0.25,
        symbol: 'emptyCircle',
        symbolSize: 4,
        emphasis: {
--- a/km-console/packages/layout-clusters-fe/src/style-addition.less
+++ b/km-console/packages/layout-clusters-fe/src/style-addition.less
@@ -1,5 +1,9 @@
@import '~knowdesign/es/style/index.less';

+@height-base: 36px;
+@height-lg: 42px;
+@height-sm: 27px;
+
 // 全局变量替换
@body-background: #ebebf3;
@input-color: #495057;