fix(colorPicker): fix colorMode i18n (#4778)

* fix: colorMode i18n

* feat: use common constants

* chore: update common

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>

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,45 +26,31 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { globalConfig } = useConfig('colorPicker');
     const baseClassName = useBaseClassName();
     const modeValue = ref(props.mode);
     const handleModeChange = (v: string) => props.onModeChange(v);
     watch(
       () => 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>
-    );
+      );
+    };
   },
 });

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';

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';

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';

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';