diff --git a/src/_common b/src/_common
index c2be429ce8..94e21e27e2 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit c2be429ce8b4f75c8d166a9ce4d6a3c69e01e2d3
+Subproject commit 94e21e27e2aba45cc0da263d424537f453055180
diff --git a/src/color-picker/const.ts b/src/color-picker/const.ts
deleted file mode 100644
index 7749223bc4..0000000000
--- a/src/color-picker/const.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { TdColorPickerProps } from '.';
-
-export * from '../_common/js/color-picker/constants';
-
-// 非透明色格式化类型
-export const FORMATS: TdColorPickerProps['format'][] = ['HEX', 'RGB', 'HSL', 'HSV', 'CMYK', 'CSS'];
diff --git a/src/color-picker/panel/format/index.tsx b/src/color-picker/panel/format/index.tsx
index b119517689..e33f97ab4a 100644
--- a/src/color-picker/panel/format/index.tsx
+++ b/src/color-picker/panel/format/index.tsx
@@ -2,7 +2,7 @@ import { defineComponent, PropType, ref, watch } from 'vue';
 import upperCase from 'lodash/upperCase';
 import { TdColorPickerProps } from '../../type';
 import props from '../../props';
-import { FORMATS } from '../../const';
+import { FORMATS } from '../../../_common/js/color-picker/constants';
 import { Color } from '../../utils';
 import { Select as TSelect, Option as TOption } from '../../../select';
 import FormatInputs from './inputs';
@@ -54,7 +54,6 @@ export default defineComponent({
     };
   },
   render() {
-    const formats: TdColorPickerProps['format'][] = [...FORMATS];
     const { baseClassName, handleModeChange } = this;
     const newProps = {
       ...this.$props,
@@ -77,7 +76,7 @@ export default defineComponent({
             v-model={this.formatModel}
             onChange={handleModeChange}
           >
-            {formats.map((item) => (
+            {FORMATS.map((item) => (
               <TOption key={item} value={item} label={upperCase(item)} style={{ fontSize: '12px' }} />
             ))}
           </TSelect>
diff --git a/src/color-picker/panel/header.tsx b/src/color-picker/panel/header.tsx
index 43ecd88f06..a8cad8c38d 100644
--- a/src/color-picker/panel/header.tsx
+++ b/src/color-picker/panel/header.tsx
@@ -1,10 +1,11 @@
 import { defineComponent, PropType, ref, watch } from 'vue';
 
 import props from '../props';
-import { COLOR_MODES } from '../const';
+import { COLOR_MODES } from '../../_common/js/color-picker/constants';
 import { RadioGroup as TRadioGroup, RadioButton as TRadioButton } from '../../radio';
 import { TdColorModes } from '../interfaces';
 import { useBaseClassName } from '../hooks';
+import { useConfig } from '../../hooks';
 
 export default defineComponent({
   name: 'PanelHeader',
@@ -25,6 +26,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { globalConfig } = useConfig('colorPicker');
     const baseClassName = useBaseClassName();
     const modeValue = ref(props.mode);
     const handleModeChange = (v: string) => props.onModeChange(v);
@@ -32,38 +34,23 @@ export default defineComponent({
       () => props.mode,
       (v) => (modeValue.value = v),
     );
-    return {
-      baseClassName,
-      modeValue,
-      handleModeChange,
-    };
-  },
-  render() {
-    if (this.colorModes?.length === 1) {
-      return null;
-    }
-    const { baseClassName } = this;
-    return (
-      <div class={`${baseClassName}__head`}>
-        <div class={`${baseClassName}__mode`}>
-          {this.colorModes?.length === 1 ? (
-            COLOR_MODES[this.colorModes[0]]
-          ) : (
-            <TRadioGroup
-              variant="default-filled"
-              size="small"
-              v-model={this.modeValue}
-              onChange={this.handleModeChange}
-            >
+    return () => {
+      if (props.colorModes?.length === 1) {
+        return null;
+      }
+      return (
+        <div class={`${baseClassName.value}__head`}>
+          <div class={`${baseClassName.value}__mode`}>
+            <TRadioGroup variant="default-filled" size="small" v-model={modeValue.value} onChange={handleModeChange}>
               {Object.keys(COLOR_MODES).map((key) => (
                 <TRadioButton key={key} value={key}>
-                  {COLOR_MODES[key]}
+                  {Reflect.get(globalConfig.value, COLOR_MODES[key as keyof typeof COLOR_MODES])}
                 </TRadioButton>
               ))}
             </TRadioGroup>
-          )}
+          </div>
         </div>
-      </div>
-    );
+      );
+    };
   },
 });
diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx
index bc45162fe1..0e8a2d93ca 100644
--- a/src/color-picker/panel/index.tsx
+++ b/src/color-picker/panel/index.tsx
@@ -6,7 +6,7 @@ import {
   DEFAULT_LINEAR_GRADIENT,
   TD_COLOR_USED_COLORS_MAX_SIZE,
   DEFAULT_SYSTEM_SWATCH_COLORS,
-} from '../const';
+} from '../../_common/js/color-picker/constants';
 import PanelHeader from './header';
 import LinearGradient from './linear-gradient';
 import SaturationPanel from './saturation';
diff --git a/src/color-picker/panel/linear-gradient.tsx b/src/color-picker/panel/linear-gradient.tsx
index d40b328586..8a851db228 100644
--- a/src/color-picker/panel/linear-gradient.tsx
+++ b/src/color-picker/panel/linear-gradient.tsx
@@ -1,6 +1,6 @@
 import { defineComponent, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
 import cloneDeep from 'lodash/cloneDeep';
-import { GRADIENT_SLIDER_DEFAULT_WIDTH } from '../const';
+import { GRADIENT_SLIDER_DEFAULT_WIDTH } from '../../_common/js/color-picker/constants';
 import { genGradientPoint, gradientColors2string, GradientColorPoint } from '../utils';
 import { InputNumber as TInputNumber } from '../../input-number';
 import { useBaseClassName } from '../hooks';
diff --git a/src/color-picker/panel/saturation.tsx b/src/color-picker/panel/saturation.tsx
index d59f84062d..7f29189997 100644
--- a/src/color-picker/panel/saturation.tsx
+++ b/src/color-picker/panel/saturation.tsx
@@ -1,5 +1,8 @@
 import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
-import { SATURATION_PANEL_DEFAULT_HEIGHT, SATURATION_PANEL_DEFAULT_WIDTH } from '../const';
+import {
+  SATURATION_PANEL_DEFAULT_HEIGHT,
+  SATURATION_PANEL_DEFAULT_WIDTH,
+} from '../../_common/js/color-picker/constants';
 import { Draggable, Coordinate } from '../utils';
 import { useBaseClassName } from '../hooks';
 import baseProps from './base-props';
diff --git a/src/color-picker/panel/slider.tsx b/src/color-picker/panel/slider.tsx
index 2d47f35c1b..aabf636686 100644
--- a/src/color-picker/panel/slider.tsx
+++ b/src/color-picker/panel/slider.tsx
@@ -1,5 +1,5 @@
 import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, reactive, ref } from 'vue';
-import { SLIDER_DEFAULT_WIDTH } from '../const';
+import { SLIDER_DEFAULT_WIDTH } from '../../_common/js/color-picker/constants';
 import { Draggable, Coordinate } from '../utils';
 import { useBaseClassName } from '../hooks';
 import baseProps from './base-props';