From 1e4ed759a34a0bdbadf833df082ee287f7cef808 Mon Sep 17 00:00:00 2001
From: Yuhang <aicmortal@gmail.com>
Date: Tue, 24 Oct 2023 19:39:22 +0800
Subject: [PATCH] =?UTF-8?q?fix(Color-Picker):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=9C=80=E8=BF=91=E4=BD=BF=E7=94=A8=E9=A2=9C=E8=89=B2=E5=BC=82?=
 =?UTF-8?q?=E5=B8=B8=20(#3515)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/color-picker/color-picker-panel.tsx | 6 ++++--
 src/color-picker/panel/index.tsx        | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/color-picker/color-picker-panel.tsx b/src/color-picker/color-picker-panel.tsx
index 74fa1968d2..60b8302d83 100644
--- a/src/color-picker/color-picker-panel.tsx
+++ b/src/color-picker/color-picker-panel.tsx
@@ -1,7 +1,8 @@
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import props from './props';
 import ColorPanel from './panel';
 import { usePrefixClass } from '../hooks/useConfig';
+import pickBy from 'lodash/pickBy';
 
 export default defineComponent({
   name: 'TColorPickerPanel',
@@ -10,9 +11,10 @@ export default defineComponent({
     ...props,
   },
   setup(props, { attrs }) {
+    const newProps = computed(() => pickBy({ ...props, ...attrs }, (v) => v !== undefined));
     const prefix = usePrefixClass();
     return () => (
-      <ColorPanel {...{ ...props, ...attrs }} popupProps={null} close-btn={false} class={`${prefix.value}-is-inline`} />
+      <ColorPanel {...newProps.value} popupProps={null} close-btn={false} class={`${prefix.value}-is-inline`} />
     );
   },
 });
diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx
index 3c50380957..40995fec93 100644
--- a/src/color-picker/panel/index.tsx
+++ b/src/color-picker/panel/index.tsx
@@ -20,6 +20,7 @@ import { TdColorModes } from '../interfaces';
 import { useBaseClassName } from '../hooks';
 import useVModel from '../../hooks/useVModel';
 import useDefaultValue from '../../hooks/useDefaultValue';
+import cloneDeep from 'lodash/cloneDeep';
 
 export default defineComponent({
   name: 'ColorPanel',
@@ -71,7 +72,7 @@ export default defineComponent({
       if (recentlyUsedColors.value === null || recentlyUsedColors.value === false) {
         return;
       }
-      const colors = (recentlyUsedColors.value as string[]) || [];
+      const colors = cloneDeep(recentlyUsedColors.value as string[]) || [];
       const currentColor = color.value.isGradient ? color.value.linearGradient : color.value.rgba;
       const index = colors.indexOf(currentColor);
       if (index > -1) {
@@ -89,7 +90,6 @@ export default defineComponent({
      * @param colors
      */
     const handleRecentlyUsedColorsChange = (colors: string[]) => {
-      recentlyUsedColors.value = colors;
       setRecentlyUsedColors(colors);
     };