diff --git a/example/app.css b/example/app.css
new file mode 100644
index 00000000..3cb918ee
--- /dev/null
+++ b/example/app.css
@@ -0,0 +1 @@
+@import '~antd/dist/antd.css';
\ No newline at end of file
diff --git a/example/app.jsx b/example/app.jsx
index 54249444..83f233d6 100644
--- a/example/app.jsx
+++ b/example/app.jsx
@@ -4,6 +4,8 @@ import { BoardGrid, PureBoardGrid, setLocale, getLocale, getTheme, setTheme } fr
 import layout from './mock/data';
 // import layout2 from './mock/data2';
 import { useMount } from 'react-use';
+import { Button } from 'antd';
+import './app.css'
 
 function App() {
   console.log('current locale:', getLocale());
@@ -17,16 +19,14 @@ function App() {
     <div style={{ padding: '20px' }}>
       <div style={{ marginBottom: '20px' }}>
         语言：
-        <button onClick={() => setLocale('zh')}>中文</button>
-        <button onClick={() => setLocale('en')}>English</button>
+        <Button className="mr12" onClick={() => setLocale('zh')}>中文</Button>
+        <Button className="mr12" onClick={() => setLocale('en')}>English</Button>
         主题：
-        <button onClick={() => setTheme('dice')}>Dice</button>
-        <button onClick={() => setTheme('dark')}>Dark</button>
+        <Button className="mr12" onClick={() => setTheme('dice')}>Dice</Button>
+        <Button className="mr12" onClick={() => setTheme('dark')}>Dark</Button>
       </div>
       <BoardGrid layout={layout} onSave={(saveLayout) => { console.log(saveLayout); }} />
       <PureBoardGrid layout={layout} showOptions />
-      {/* {'>>>>>>>>>>>>>>>>>>>>>>>>>>>sasasa'}
-      <PureBoardGrid layout={layout2} showOptions /> */}
     </div>
   );
 }
diff --git a/example/index.js b/example/index.js
index 399a7a42..62008320 100644
--- a/example/index.js
+++ b/example/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Input } from '@terminus/nusi';
+import { Input } from 'antd';
 import { registDataConvertor, registControl, registChartOption, registTheme } from '../src';
 import { ajaxConvertor } from './mock/ajax-data';
 import { darkTheme } from './theme';
diff --git a/package.json b/package.json
index 8d3fb329..340fb50d 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
   "dependencies": {
     "@babel/runtime": "^7.14.0",
     "@terminus/nusi": "^3.10.78",
+    "antd": "^4.15.4",
     "classnames": "^2.2.6",
     "cube-state": "1.2.1",
     "dom-to-image": "^2.6.0",
diff --git a/src/common/DcEmpty/index.tsx b/src/common/DcEmpty/index.tsx
index 0d462a36..2ca47e0d 100644
--- a/src/common/DcEmpty/index.tsx
+++ b/src/common/DcEmpty/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Empty } from '@terminus/nusi';
+import { Empty } from 'antd';
 
 interface IProps {
   condition?: any;
diff --git a/src/common/DcFormModal/index.tsx b/src/common/DcFormModal/index.tsx
index f17d79f2..e45c814b 100644
--- a/src/common/DcFormModal/index.tsx
+++ b/src/common/DcFormModal/index.tsx
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { Modal } from '@terminus/nusi';
+import { Modal } from 'antd';
 import { DcFormBuilder } from '..';
 
 interface IProps {
@@ -22,7 +22,6 @@ const DcFormModal = ({ title, visible, fields, onCancel, onOk }: IProps) => {
 
   return (
     <Modal
-      size="small"
       destroyOnClose
       title={title}
       visible={visible}
diff --git a/src/common/DcIcon/index.tsx b/src/common/DcIcon/index.tsx
index 3a7f5bbe..76f49300 100644
--- a/src/common/DcIcon/index.tsx
+++ b/src/common/DcIcon/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classnames from 'classnames';
-import { Tooltip } from '@terminus/nusi';
+import { Tooltip } from 'antd';
 
 import './index.scss';
 
diff --git a/src/common/DcInfoLabel/index.tsx b/src/common/DcInfoLabel/index.tsx
index 219d7805..698f905d 100644
--- a/src/common/DcInfoLabel/index.tsx
+++ b/src/common/DcInfoLabel/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Tooltip } from '@terminus/nusi';
+import { Tooltip } from 'antd';
 import { DcIcon } from '..';
 
 interface IProps {
diff --git a/src/common/utils/get-tsx.tsx b/src/common/utils/get-tsx.tsx
index e618eb54..ce2b7b8d 100644
--- a/src/common/utils/get-tsx.tsx
+++ b/src/common/utils/get-tsx.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Tooltip } from '@terminus/nusi';
+import { Tooltip } from 'antd';
 
 export function wrapWithTooltip(title: string, children: string, key?: string) {
   const k = key ? { key } : {};
diff --git a/src/common/utils/str-num-date.tsx b/src/common/utils/str-num-date.tsx
index 78b9b3cc..d93d9378 100644
--- a/src/common/utils/str-num-date.tsx
+++ b/src/common/utils/str-num-date.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Tooltip} from '@terminus/nusi'
+import { Tooltip } from 'antd';
 
 interface ICutOptions {
   suffix?: string;
diff --git a/src/components/DcBoard/header.tsx b/src/components/DcBoard/header.tsx
index 7e211b4b..9170ac15 100644
--- a/src/components/DcBoard/header.tsx
+++ b/src/components/DcBoard/header.tsx
@@ -5,7 +5,7 @@
  * @Last Modified time: 2021-03-11 14:33:40
  */
 import React, { RefObject, useEffect, useCallback, useMemo } from 'react';
-import { Button, Tooltip, Dropdown, Menu } from '@terminus/nusi';
+import { Button, Tooltip } from 'antd';
 import { useFullscreen, useToggle } from 'react-use';
 import DC from 'src/types';
 import { DcIcon } from '../../common';
@@ -173,9 +173,7 @@ const DashboardHeader = ({
       </When>
       <Otherwise>
         <Tooltip title={text} key={icon}>
-          <Button type={btnType || 'text'} onClick={onClick}>
-            <DcIcon type={icon} />
-          </Button>
+          <Button type={btnType || 'default'} onClick={onClick} icon={<DcIcon type={icon} />} />
         </Tooltip>
       </Otherwise>
     </Choose>
diff --git a/src/components/DcBoard/index.tsx b/src/components/DcBoard/index.tsx
index d69e26bf..7b5d510a 100644
--- a/src/components/DcBoard/index.tsx
+++ b/src/components/DcBoard/index.tsx
@@ -5,6 +5,7 @@
  * @Last Modified time: 2021-03-03 20:38:30
  */
 import React, { useRef, useEffect } from 'react';
+import { ConfigProvider } from 'antd';
 import classnames from 'classnames';
 import { isFunction } from 'lodash';
 import 'react-grid-layout/css/styles.css';
@@ -24,7 +25,8 @@ import ChartEditorStore from '../../stores/chart-editor';
 import '../../static/iconfont.js';
 import '../../static/iconfont.css';
 import './index.scss';
-
+import DashboardStore from '../../stores/dash-board';
+import { localeMap } from '../../utils/locale';
 
 const DcBoard = ({
   timeSpan,
@@ -42,7 +44,7 @@ const DcBoard = ({
   const boardRef = useRef<HTMLDivElement>(null);
   const boardContentRef = useRef<HTMLDivElement>(null);
   const _onEditorToggle = useRef(onEditorToggle);
-
+  const locale = DashboardStore.getState((s) => s.locale);
   const [isEditMode, editChartId] = ChartEditorStore.useStore((s) => [s.isEditMode, s.editChartId]);
   const { reset: resetDrawer, updateState, updateEditorContextMap } = ChartEditorStore;
   const chartEditorVisible = !!editChartId;
@@ -72,9 +74,10 @@ const DcBoard = ({
   }, [APIFormComponent, updateEditorContextMap]);
 
   return (
-    <div
-      ref={boardRef}
-      className={
+    <ConfigProvider locale={localeMap[locale]}>
+      <div
+        ref={boardRef}
+        className={
         classnames({
           'dc-dashboard': true,
           'dark-border': true,
@@ -82,26 +85,27 @@ const DcBoard = ({
           active: isEditMode,
         })
       }
-    >
-      <DashboardHeader
-        wrapRef={boardRef}
-        contentRef={boardContentRef}
-        dashboardName={name}
-        afterEdit={onEdit}
-        beforeSave={beforeOnSave}
-        onSave={onSave}
-        onCancel={onCancel}
-      />
-      <div ref={boardContentRef} className="dc-dashboard-content flex-1 v-flex-box">
-        <GlobalFilters id={id} />
-        <div className="dc-dashboard-grid-wp flex-1">
-          {gridWidthHolder}
-          <BoardGrid width={gridWidth} layout={layout} globalVariable={globalVariable} />
+      >
+        <DashboardHeader
+          wrapRef={boardRef}
+          contentRef={boardContentRef}
+          dashboardName={name}
+          afterEdit={onEdit}
+          beforeSave={beforeOnSave}
+          onSave={onSave}
+          onCancel={onCancel}
+        />
+        <div ref={boardContentRef} className="dc-dashboard-content flex-1 v-flex-box">
+          <GlobalFilters id={id} />
+          <div className="dc-dashboard-grid-wp flex-1">
+            {gridWidthHolder}
+            <BoardGrid width={gridWidth} layout={layout} globalVariable={globalVariable} />
+          </div>
         </div>
+        <ConfigGlobalFiltersModal />
+        <DcChartEditor />
       </div>
-      <ConfigGlobalFiltersModal />
-      <DcChartEditor />
-    </div>
+    </ConfigProvider>
   );
 };
 
diff --git a/src/components/DcBoard/pure-board.tsx b/src/components/DcBoard/pure-board.tsx
index 7c0fe924..872d24ef 100644
--- a/src/components/DcBoard/pure-board.tsx
+++ b/src/components/DcBoard/pure-board.tsx
@@ -4,7 +4,8 @@
  * @Last Modified by: licao
  * @Last Modified time: 2021-02-26 14:22:59
  */
-import React, { useRef, useEffect } from 'react';
+import { ConfigProvider } from 'antd';
+import React, { useRef } from 'react';
 import classnames from 'classnames';
 import { isEmpty } from 'lodash';
 import DC from 'src/types';
@@ -12,9 +13,8 @@ import PureBoardGrid from './pure-grid';
 import { useComponentWidth, DcEmpty } from '../../common';
 import DashboardHeader from './pure-header';
 import DashboardStore from '../../stores/dash-board';
-
 import './index.scss';
-
+import { localeMap } from '../../utils/locale';
 
 const PureDashboard = ({
   name,
@@ -23,45 +23,47 @@ const PureDashboard = ({
   globalVariable,
   onBoardEvent,
 }: DC.PureBoardGridProps) => {
-  const textMap = DashboardStore.getState((s) => s.textMap);
+  const [textMap, locale] = DashboardStore.getState((s) => [s.textMap, s.locale]);
   const boardRef = useRef<HTMLDivElement>(null);
   const boardContentRef = useRef<HTMLDivElement>(null);
   const [gridWidthHolder, gridWidth] = useComponentWidth();
 
   return (
-    <div
-      ref={boardRef}
-      className={
+    <ConfigProvider locale={localeMap[locale]}>
+      <div
+        ref={boardRef}
+        className={
         classnames({
           'dc-dashboard': true,
           'dark-border': true,
           'v-flex-box': true,
         })}
-    >
-      <If condition={showOptions}>
-        <DashboardHeader
-          wrapRef={boardRef}
-          contentRef={boardContentRef}
-          dashboardName={name}
-        />
-      </If>
-      <div ref={boardContentRef} className="dc-dashboard-content flex-1 v-flex-box">
-        <DcEmpty
-          className="flex-1"
-          description={textMap['no data']}
-          condition={isEmpty(layout) || gridWidth === Infinity}
-        />
-        <div className="dc-dashboard-grid-wp">
-          {gridWidthHolder}
-          <PureBoardGrid
-            width={gridWidth}
-            layout={layout}
-            globalVariable={globalVariable}
-            onBoardEvent={onBoardEvent}
+      >
+        <If condition={showOptions}>
+          <DashboardHeader
+            wrapRef={boardRef}
+            contentRef={boardContentRef}
+            dashboardName={name}
+          />
+        </If>
+        <div ref={boardContentRef} className="dc-dashboard-content flex-1 v-flex-box">
+          <DcEmpty
+            className="flex-1"
+            description={textMap['no data']}
+            condition={isEmpty(layout) || gridWidth === Infinity}
           />
+          <div className="dc-dashboard-grid-wp">
+            {gridWidthHolder}
+            <PureBoardGrid
+              width={gridWidth}
+              layout={layout}
+              globalVariable={globalVariable}
+              onBoardEvent={onBoardEvent}
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </ConfigProvider>
   );
 };
 
diff --git a/src/components/DcBoard/pure-header.tsx b/src/components/DcBoard/pure-header.tsx
index 6d0e0ed1..c0a50086 100644
--- a/src/components/DcBoard/pure-header.tsx
+++ b/src/components/DcBoard/pure-header.tsx
@@ -5,7 +5,7 @@
  * @Last Modified time: 2020-12-25 16:28:17
  */
 import React, { RefObject, useEffect, useCallback, useMemo } from 'react';
-import { Button, Tooltip } from '@terminus/nusi';
+import { Tooltip, Button } from 'antd';
 import { useFullscreen, useToggle } from 'react-use';
 import { DcIcon } from '../../common';
 import { insertWhen } from '../../common/utils';
diff --git a/src/components/DcBoard/types/header.d.ts b/src/components/DcBoard/types/header.d.ts
index efb90d6a..f38d800d 100644
--- a/src/components/DcBoard/types/header.d.ts
+++ b/src/components/DcBoard/types/header.d.ts
@@ -2,7 +2,7 @@ declare namespace DC_BOARD_HEADER {
   interface Tool {
     icon: DcIconType;
     text?: string;
-    btnType?: 'primary' | 'text' | 'warning' | 'secondary' | 'normal';
+    btnType?: 'default' | 'primary' | 'ghost' | 'dashed' | 'link' | 'text';
     customRender?: () => JSX.Element;
     onClick?: () => any;
   }
diff --git a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-alias-modal.tsx b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-alias-modal.tsx
index e9c52dc2..2aeb2dc2 100644
--- a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-alias-modal.tsx
+++ b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-alias-modal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { map } from 'lodash';
-import { Input, Select, Col } from '@terminus/nusi';
+import { Select, Input, Col } from 'antd';
 import { DcFormModal } from '../../../../../common';
 import DashboardStore from '../../../../../stores/dash-board';
 import { unitInfMap } from '../constants';
@@ -17,6 +17,7 @@ const UnitConfig = ({ value, onChange, size }: { value?: DICE_DATA_CONFIGURATOR.
           allowClear
           value={type}
           size={size}
+          className="field-config-select"
           options={map(unitInfMap(textMap), (item) => ({ label: item.name, value: item.value }))}
           onChange={(v) => onChange({ ...value, type: v, unit: unitInfMap(textMap)[v]?.defaultUnit })}
         />
diff --git a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-expr-modal.tsx b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-expr-modal.tsx
index 229b7418..43e72b56 100644
--- a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-expr-modal.tsx
+++ b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-expr-modal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Input } from '@terminus/nusi';
+import { Input } from 'antd';
 import { DcFormModal } from '../../../../../common';
 import DashboardStore from '../../../../../stores/dash-board';
 
diff --git a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-filter-modal.tsx b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-filter-modal.tsx
index bd22deb8..5129544a 100644
--- a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-filter-modal.tsx
+++ b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-filter-modal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { map, isUndefined } from 'lodash';
-import { Input, InputNumber, Select, Switch } from '@terminus/nusi';
+import { Select, Input, InputNumber, Switch } from 'antd';
 import { DcFormModal } from '../../../../../common';
 import DashboardStore from '../../../../../stores/dash-board';
 
@@ -25,6 +25,7 @@ interface IFilterInputProps {
 const FilterInput = ({ value, onChange, fieldType, options }: IFilterInputProps) => (
   <InputGroup compact size="small">
     <Select
+      style={{ minWidth: 120, maxWidth: 320 }}
       allowClear
       value={value?.operation}
       size="small"
diff --git a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-time-modal.tsx b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-time-modal.tsx
index ac19e2b3..b50c3f22 100644
--- a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-time-modal.tsx
+++ b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-time-modal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Select, Input, InputNumber } from '@terminus/nusi';
+import { Select, Input, InputNumber } from 'antd';
 import { map, filter } from 'lodash';
 import { DcFormModal } from '../../../../../common';
 import DashboardStore from '../../../../../stores/dash-board';
@@ -24,10 +24,12 @@ const CustomTimeInput = ({ value, onChange }: any) => {
         min={1}
         precision={0}
         size="small"
+        style={{ width: 160 }}
         onChange={(v) => onChange({ ...value, value: v })}
       />
       <Select
         allowClear
+        style={{ width: 64 }}
         value={value?.unit}
         size="small"
         options={timeIntervals(textMap)}
@@ -44,6 +46,7 @@ const CustomTimeField = ({ value, onChange, options }: any) => (
       allowClear
       value={value?.value}
       size="small"
+      style={{ width: 160 }}
       options={options}
       onChange={(v) => onChange({ ...value, value: v })}
     />
@@ -51,6 +54,7 @@ const CustomTimeField = ({ value, onChange, options }: any) => (
       allowClear
       value={value?.unit}
       size="small"
+      style={{ width: 64 }}
       options={TIME_FIELDS_UNITS}
       onChange={(v) => onChange({ ...value, unit: v })}
     />
@@ -86,6 +90,7 @@ const CreateTimeModal = ({ defaultValue, metricsMap, ...rest }: IProps) => {
       customProps: {
         options: TIME_FORMATS,
         allowClear: true,
+        style: { width: 224 },
       },
     },
   ];
diff --git a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/dimension-configs.tsx b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/dimension-configs.tsx
index 869466b0..7046b9f6 100644
--- a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/dimension-configs.tsx
+++ b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/dimension-configs.tsx
@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
-import { Menu, Dropdown } from '@terminus/nusi';
+import { Dropdown } from 'antd';
+import { Menu } from '@terminus/nusi';
 import { map } from 'lodash';
 import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
 import { XYCoord } from 'dnd-core';
diff --git a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/index.scss b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/index.scss
index 49e42e7a..8ad5e96c 100644
--- a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/index.scss
+++ b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/index.scss
@@ -14,3 +14,30 @@ $dice-metric-group-prefix-cls: #{$prefix}-dice-metric-group;
     color: $color-text-desc;
   }
 }
+
+.field-config-select {
+  min-width: 100px;
+  .ant-select-dropdown {
+    width: max-content;
+  }
+}
+
+.dimensions-config-tag {
+   line-height: 22px;
+   align-self: start; 
+   background: #ffffff; 
+   border: #6a549e solid 1px; 
+   color: #6a549e;
+
+   &:hover {
+     cursor: pointer;
+   }
+
+}
+
+.dimensions-config-tag2 {
+  background: #ffffff; 
+  border: #6a549e solid 1px; 
+  color: #6a549e;
+  cursor: pointer;
+}
diff --git a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/index.tsx b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/index.tsx
index 65452ce9..04aff7a4 100644
--- a/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/index.tsx
+++ b/src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/index.tsx
@@ -7,7 +7,7 @@
 import React, { useMemo, useCallback } from 'react';
 import { map, uniqueId, some, remove, find, findIndex, pickBy, isEmpty } from 'lodash';
 import { produce } from 'immer';
-import { Toast, Cascader, Tag } from '@terminus/nusi';
+import { Cascader, Tag, message } from 'antd';
 import { useToggle } from 'react-use';
 import { DcIcon, DcInfoIcon, DcDndProvider, useUpdate } from '../../../../../common';
 import { insertWhen, cutStr } from '../../../../../common/utils';
@@ -150,7 +150,7 @@ const DimensionsConfigurator = ({
   }, [dimensions, updater, metricsMap, toggleExprModalVisible, toggleAliasModalVisible, toggleTimeModalVisible, updateDimension, toggleFilterModalVisible, onChange]);
 
 
-  const handleAddDimension = useCallback((val: string[]) => {
+  const handleAddDimension = useCallback((val: Array<string|number>) => {
     toggleSelectVisible();
     const [metricField, field] = val;
     const isExpr = metricField === SPECIAL_METRIC[SPECIAL_METRIC_TYPE.expr];
@@ -247,10 +247,9 @@ const DimensionsConfigurator = ({
               onTriggerAction={(actionType, option) => handleTriggerAction(key, actionType, option)}
             >
               <Tag
-                className="mb8"
+                className="mb8 dimensions-config-tag2"
                 closable
-                style={{ background: '#ffffff', border: '#6a549e solid 1px', color: '#6a549e' }}
-                afterClose={() => handleRemoveDimension(key)}
+                onClose={() => handleRemoveDimension(key)}
               >
                 <DcIcon className="mr4" size="small" type="down" />
                 <If condition={isUncompleted}>
@@ -286,13 +285,12 @@ const DimensionsConfigurator = ({
             <Tag
               onClick={() => {
                 if (disabled) {
-                  Toast.warning(textMap['empty metric group tip']);
+                  message.warning(textMap['empty metric group tip']);
                   return;
                 }
                 toggleSelectVisible();
               }}
-              color="#6a549e"
-              style={{ lineHeight: '22px', alignSelf: 'start' }}
+              className="dimensions-config-tag"
             >
               <DcIcon type="plus" size="small" className="mr4" />{addText || textMap.add}
             </Tag>
diff --git a/src/components/DcChartEditor/data-config/dice-form/index.tsx b/src/components/DcChartEditor/data-config/dice-form/index.tsx
index ab6c0f94..ba0152aa 100644
--- a/src/components/DcChartEditor/data-config/dice-form/index.tsx
+++ b/src/components/DcChartEditor/data-config/dice-form/index.tsx
@@ -8,7 +8,7 @@ import React, { useMemo, useCallback, useRef } from 'react';
 import { useMount } from 'react-use';
 import { map, forEach, find, reduce, isEmpty, keyBy, debounce, isNumber } from 'lodash';
 import produce from 'immer';
-import { Switch, Cascader, Input, InputNumber, Select } from '@terminus/nusi';
+import { Cascader, Input, Select, InputNumber, Switch } from 'antd';
 import { getConfig } from '../../../../config';
 // import { useLoading } from '../../../../common/stores/loading';
 import { DcFormBuilder, DcInfoLabel } from '../../../../common';
@@ -538,6 +538,7 @@ const DiceForm = ({ submitResult, currentChart }: IProps) => {
       initialValue: dataSource?.customTime,
       required: false,
       customProps: {
+        style: { width: '100%' },
         options: map(customTimeRangeMap(textMap), ({ name: label }, value) => ({ label, value })),
         allowClear: true,
         onChange: (v: string) => handleUpdateDataSource({ customTime: v }),
diff --git a/src/components/DcChartEditor/editor-panel/index.tsx b/src/components/DcChartEditor/editor-panel/index.tsx
index bf0fa75d..b68aee45 100644
--- a/src/components/DcChartEditor/editor-panel/index.tsx
+++ b/src/components/DcChartEditor/editor-panel/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Drawer, Button, Popover } from '@terminus/nusi';
+import { Popconfirm, Button, Drawer, Popover } from 'antd';
 import { getConfig } from '../../../config';
 import DataConfigurator from '../data-config';
 import DcContainer from '../../DcContainer';
@@ -92,7 +92,6 @@ const EditorPanel = () => {
               <Popover
                 placement="topRight"
                 content={submitTip()}
-                footer={false}
               >
                 <Button onClick={completeEditor} type="primary" disabled={!canSave}>{textMap.ok}</Button>
               </Popover>
@@ -100,16 +99,16 @@ const EditorPanel = () => {
           </Choose>
           <Choose>
             <When condition={isTouched}>
-              <Popover
+              <Popconfirm
                 okText={textMap.ok}
                 cancelText={textMap.cancel}
                 placement="top"
                 trigger="click"
-                content={textMap['confirm to drop data']}
-                onOk={resetEditor}
+                title={textMap['confirm to drop data']}
+                onConfirm={resetEditor}
               >
                 <Button style={{ marginRight: 8 }}>{textMap.cancel}</Button>
-              </Popover>
+              </Popconfirm>
             </When>
             <Otherwise>
               <Button style={{ marginRight: 8 }} onClick={resetEditor}>{textMap.cancel}</Button>
diff --git a/src/components/DcChartEditor/pick-chart-modal/index.tsx b/src/components/DcChartEditor/pick-chart-modal/index.tsx
index d69506fb..85533732 100644
--- a/src/components/DcChartEditor/pick-chart-modal/index.tsx
+++ b/src/components/DcChartEditor/pick-chart-modal/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, Row, Col } from '@terminus/nusi';
+import { Col, Row, Modal } from 'antd';
 import { map } from 'lodash';
 import ChartEditorStore from '../../../stores/chart-editor';
 import DashboardStore from '../../../stores/dash-board';
diff --git a/src/components/DcChartEditor/switch-chart-type/index.tsx b/src/components/DcChartEditor/switch-chart-type/index.tsx
index 5ccf84cd..38b4df26 100644
--- a/src/components/DcChartEditor/switch-chart-type/index.tsx
+++ b/src/components/DcChartEditor/switch-chart-type/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { map } from 'lodash';
-import { Popover } from '@terminus/nusi';
+import { Popover } from 'antd';
 import DC from 'src/types';
 import classnames from 'classnames';
 import { DcIcon } from '../../../common';
@@ -26,7 +26,7 @@ const SwitchChartType = ({
   return (
     <div className="dc-editor-switch-chart">
       {map(basicCharts, ({ name, enName, icon }: DC.ViewDefItem, chartType) => (
-        <Popover content={locale === 'en' ? enName : name} footer={false}>
+        <Popover content={locale === 'en' ? enName : name}>
           <div
             className={classnames({
               'dc-editor-switch-chart-item': true,
diff --git a/src/components/DcCharts/chart-funnel/configurator.tsx b/src/components/DcCharts/chart-funnel/configurator.tsx
index 1d045aba..4bfad84d 100644
--- a/src/components/DcCharts/chart-funnel/configurator.tsx
+++ b/src/components/DcCharts/chart-funnel/configurator.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Input } from '@terminus/nusi';
+import { Input } from 'antd';
 import produce from 'immer';
 import DC from 'src/types';
 import { CommonConfigurator } from '../common';
diff --git a/src/components/DcCharts/chart-line/configurator.tsx b/src/components/DcCharts/chart-line/configurator.tsx
index df689371..b14040d7 100644
--- a/src/components/DcCharts/chart-line/configurator.tsx
+++ b/src/components/DcCharts/chart-line/configurator.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Checkbox, Input } from '@terminus/nusi';
+import { Input, Checkbox } from 'antd';
 import produce from 'immer';
 import DC from 'src/types';
 import { CommonConfigurator } from '../common';
diff --git a/src/components/DcCharts/chart-map/index.tsx b/src/components/DcCharts/chart-map/index.tsx
index 7fe705b5..eb5499e1 100644
--- a/src/components/DcCharts/chart-map/index.tsx
+++ b/src/components/DcCharts/chart-map/index.tsx
@@ -7,7 +7,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { useMount } from 'react-use';
 import { map, slice, findIndex, cloneDeep } from 'lodash';
-import { Breadcrumb, Toast } from '@terminus/nusi';
+import { message, Breadcrumb } from 'antd';
 import { registerMap as registerEchartsMap } from 'echarts';
 import client from '../../../common/utils/client';
 import { useUpdate } from '../../../common/use-hooks';
@@ -46,7 +46,7 @@ const ChartMap = React.forwardRef((props: IProps, ref: React.Ref<any>) => {
     // 初始化全国地图
     client('https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json', { referrer: '' })
       .then((res) => registerMap('中华人民共和国', res))
-      .catch((err) => { Toast.error(err); });
+      .catch((err) => { message.error(err); });
   });
 
   const loadMapDataSource = (_mapTypes: string[]) => {
@@ -99,7 +99,7 @@ const ChartMap = React.forwardRef((props: IProps, ref: React.Ref<any>) => {
     const adcode = adcodeMap.get(mapType);
     client(`https://geo.datav.aliyun.com/areas_v2/bound/${adcode}_full.json`, { referrer: '' })
       .then((res) => registerMap(mapType, res))
-      .catch((err) => { Toast.error(err); });
+      .catch((err) => { message.error(err); });
   };
 
   return (
diff --git a/src/components/DcCharts/chart-pie/configurator.tsx b/src/components/DcCharts/chart-pie/configurator.tsx
index 2dda302f..f5f6a0f7 100644
--- a/src/components/DcCharts/chart-pie/configurator.tsx
+++ b/src/components/DcCharts/chart-pie/configurator.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Checkbox } from '@terminus/nusi';
+import { Checkbox } from 'antd';
 import produce from 'immer';
 import { CommonConfigurator } from '../common';
 import ChartEditorStore from '../../../stores/chart-editor';
diff --git a/src/components/DcCharts/chart-table/configurator.tsx b/src/components/DcCharts/chart-table/configurator.tsx
index 1d10a778..b171d48b 100644
--- a/src/components/DcCharts/chart-table/configurator.tsx
+++ b/src/components/DcCharts/chart-table/configurator.tsx
@@ -1,7 +1,7 @@
 import React, { FocusEvent, useState, useEffect } from 'react';
 import produce from 'immer';
 import { get, map } from 'lodash';
-import { Select, Input } from '@terminus/nusi';
+import { Select, Input } from 'antd';
 import { CommonConfigurator } from '../common';
 import ChartEditorStore from '../../../stores/chart-editor';
 import DashboardStore from '../../../stores/dash-board';
diff --git a/src/components/DcCharts/chart-table/index.tsx b/src/components/DcCharts/chart-table/index.tsx
index 3a95e6ae..797bb9fa 100644
--- a/src/components/DcCharts/chart-table/index.tsx
+++ b/src/components/DcCharts/chart-table/index.tsx
@@ -2,8 +2,8 @@
  * 数据表格
  */
 import React, { useCallback } from 'react';
-import { Table } from '@terminus/nusi';
-import { map, get, find } from 'lodash';
+import { Table } from 'antd';
+import { map, get } from 'lodash';
 
 interface IProps {
   results: Array<{ [k: string]: any }>;
diff --git a/src/components/DcCharts/common/chart-mask/index.tsx b/src/components/DcCharts/common/chart-mask/index.tsx
index 47795ce0..1f6ec809 100644
--- a/src/components/DcCharts/common/chart-mask/index.tsx
+++ b/src/components/DcCharts/common/chart-mask/index.tsx
@@ -1,4 +1,4 @@
-import { Spin } from '@terminus/nusi';
+import { Spin } from 'antd';
 import React from 'react';
 
 import './index.scss';
diff --git a/src/components/DcCharts/common/common-configurator.tsx b/src/components/DcCharts/common/common-configurator.tsx
index d501b29d..2b04a938 100644
--- a/src/components/DcCharts/common/common-configurator.tsx
+++ b/src/components/DcCharts/common/common-configurator.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Input } from '@terminus/nusi';
+import { Input } from 'antd';
 import { DcFormBuilder } from '../../../common';
 import ChartEditorStore from '../../../stores/chart-editor';
 import DashboardStore from '../../../stores/dash-board';
diff --git a/src/components/DcContainer/index.tsx b/src/components/DcContainer/index.tsx
index 042b200e..1719fbec 100644
--- a/src/components/DcContainer/index.tsx
+++ b/src/components/DcContainer/index.tsx
@@ -5,7 +5,7 @@
  * @Last Modified time: 2021-04-22 14:07:06
  */
 import React, { ReactElement, useRef, useEffect, useCallback } from 'react';
-import { Tooltip, Select, Toast, Button } from '@terminus/nusi';
+import { Button, Tooltip, Select, message } from 'antd';
 import classnames from 'classnames';
 import { isEmpty, get, isFunction, reduce, isString, map, merge } from 'lodash';
 import { useUpdate, DcIcon, DcEmpty } from '../../common';
diff --git a/src/components/DcContainer/options.tsx b/src/components/DcContainer/options.tsx
index 1ef13403..77ef7511 100644
--- a/src/components/DcContainer/options.tsx
+++ b/src/components/DcContainer/options.tsx
@@ -6,7 +6,8 @@
  */
 
 import React, { useCallback, useEffect, useMemo, RefObject, ReactNode, memo } from 'react';
-import { Modal, Menu, Toast, Dropdown } from '@terminus/nusi';
+import { Dropdown, Modal, message } from 'antd';
+import { Menu } from '@terminus/nusi';
 import { get } from 'lodash';
 import { useFullscreen, useToggle } from 'react-use';
 import { getConfig } from '../../config';
@@ -92,7 +93,7 @@ const Options = ({ view, viewId, viewRef, children, disabled = false, toggleFull
     };
 
     if (metricName) {
-      const _exportingData = Toast.loading(textMap['exporting data'], 0);
+      const _exportingData = message.loading(textMap['exporting data'], 0);
       toggleExportingDataStatus();
       exportChartData(metricName, _query, payload).then((res: Blob) => {
         const blob = new Blob([res]);
@@ -109,7 +110,7 @@ const Options = ({ view, viewId, viewRef, children, disabled = false, toggleFull
         _exportingData();
         toggleExportingDataStatus();
       }).catch(() => {
-        Toast.error(textMap['export data error']);
+        message.error(textMap['export data error']);
         _exportingData();
         toggleExportingDataStatus();
       });
diff --git a/src/components/DcGlobalFilters/config-modal.tsx b/src/components/DcGlobalFilters/config-modal.tsx
index 9d84a297..fbc574f1 100644
--- a/src/components/DcGlobalFilters/config-modal.tsx
+++ b/src/components/DcGlobalFilters/config-modal.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, Modal, Tabs, Title, Dropdown, Menu, Tooltip, Input, Toast } from '@terminus/nusi';
+import { Title, Menu } from '@terminus/nusi';
+import { Button, Tooltip, Input, Dropdown, Tabs, Modal, message } from 'antd';
 import { useImmer } from 'use-immer';
 import { remove, find, findIndex, map } from 'lodash';
 import { DcIcon, DcInfoIcon } from '../../common';
@@ -8,7 +9,8 @@ import DashboardStore, { TextType } from '../../stores/dash-board';
 import GlobalFiltersStore from '../../stores/global-filters';
 
 import './config-modal.scss';
-import { IconType } from '@terminus/nusi/es/notification';
+
+type IconType = 'success' | 'info' | 'error' | 'warning';
 
 interface FilterOption {
   icon?: IconType;
@@ -158,7 +160,7 @@ export const ConfigGlobalFiltersModal = () => {
         onChange(e: React.FocusEvent<HTMLInputElement>) {
           const val = e.target.value;
           if (!val) {
-            Toast.warning('筛选项名称不能为空！');
+            message.warning('筛选项名称不能为空！');
             updateFilter(key, { name });
             return;
           }
diff --git a/src/components/DcGlobalFilters/filter-component/TimeSelector/index.tsx b/src/components/DcGlobalFilters/filter-component/TimeSelector/index.tsx
index 6d9bff7d..d378fab4 100644
--- a/src/components/DcGlobalFilters/filter-component/TimeSelector/index.tsx
+++ b/src/components/DcGlobalFilters/filter-component/TimeSelector/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { DatePicker } from '@terminus/nusi';
+import { DatePicker } from 'antd';
 import moment, { Moment } from 'moment';
 import { getTimeRanges, getTimeSpan, ITimeSpan } from './utils';
 
diff --git a/src/components/DcGlobalFilters/filter-component/index.tsx b/src/components/DcGlobalFilters/filter-component/index.tsx
index d6087eb4..fa2ded67 100644
--- a/src/components/DcGlobalFilters/filter-component/index.tsx
+++ b/src/components/DcGlobalFilters/filter-component/index.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import TimeSelector from './TimeSelector';
-import { Search } from '@terminus/nusi';
-
+import { Input } from 'antd';
 import './index.scss';
 
+const { Search } = Input;
+
 type IProps = Merge<{
   className: string;
   onChange: (val: any) => void;
@@ -23,7 +24,6 @@ const FilterComp = ({ className, type, label, placeholder, defaultValue, onChang
           <Search
             allowClear
             placeholder={placeholder}
-            onHandleSearch={() => {}}
           />
         </When>
       </Choose>
diff --git a/src/utils/cascader-filter.tsx b/src/utils/cascader-filter.tsx
index f90549d7..6987549a 100644
--- a/src/utils/cascader-filter.tsx
+++ b/src/utils/cascader-filter.tsx
@@ -2,12 +2,12 @@ import * as React from 'react';
 
 interface CascaderOptionType {
   value?: string | number;
-  label?: string;
+  label?: React.ReactNode;
   disabled?: boolean;
   isLeaf?: boolean;
   loading?: boolean;
   children?: CascaderOptionType[];
-  [key: string]: unknown;
+  [key: string]: any;
 }
 
 interface FilledFieldNamesType {
diff --git a/src/utils/comp.ts b/src/utils/comp.ts
index 43f00447..821ddf6a 100644
--- a/src/utils/comp.ts
+++ b/src/utils/comp.ts
@@ -2,7 +2,7 @@
 /* eslint-disable no-unused-vars */
 // import { forEach, replace } from 'lodash';
 import domtoimage from 'dom-to-image';
-import { Toast } from '@terminus/nusi';
+import { message as Toast } from 'antd';
 import DashboardStore from '../stores/dash-board';
 
 export const formItemLayout = {
diff --git a/src/utils/locale.ts b/src/utils/locale.ts
new file mode 100644
index 00000000..e5585a7e
--- /dev/null
+++ b/src/utils/locale.ts
@@ -0,0 +1,4 @@
+import zhCN from 'antd/lib/locale/zh_CN';
+import enUS from 'antd/es/locale-provider/en_US';
+
+export const localeMap = { zh: zhCN, en: enUS };