fix(color-picker): incorrect default value for recentColors

[RylanBot]

🤔 这个 PR 的性质是？

• 日常 bug 修复
• 新特性提交
• 文档改进
• 演示代码改进
• 组件样式/交互改进
• CI/CD 改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他

🔗 相关 Issue

💡 需求背景和解决方案

📝 更新日志

• 本条 PR 不需要纳入 Changelog

tdesign-vue-next

• fix(color-picker): 无法正常显示和添加最近使用颜色

@tdesign-vue-next/chat

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• Changelog 已提供或无须提供

[tdesign-bot]

📝 更新日志

tdesign-vue-next

• fix(ColorPicker): 修复添加最近使用颜色功能异常的问题

[tdesign-bot]

TDesign Component Site Preview Open

Component	Preview
tdesign-vue-next
@tdesign-vue-next/chat

[pkg-pr-new]

tdesign-vue-next-demo

npm i https://pkg.pr.new/tdesign-vue-next@5428

commit: 2290fe4

[liweijie0812]

api 平台的改下

[RylanBot]

api 平台的改下

api 没问题… vue / react 那边也没问题，输出到 vue-next 这边就莫名是 undefined 🤔

[liweijie0812]

api 平台的改下

api 没问题… vue / react 那边也没问题，输出到 vue-next 这边就莫名是 undefined 🤔

找到了

[liweijie0812]

tdesign-vue-next/packages/components/color-picker/components/panel/index.tsx

Lines 59 to 64 in 3852924

	const [recentlyUsedColors, setRecentlyUsedColors] = useDefaultValue(
	recentColors,
	props.defaultRecentColors,
	props.onRecentColorsChange,
	'recentColors',
	);

tdesign-vue-next/packages/components/hooks/useDefaultValue.ts

Lines 5 to 37 in 3852924

	export default function useDefaultValue<T, P extends any[]>(
	value: Ref<T>,
	defaultValue: T,
	onChange: ChangeHandler<T, P>,
	propsName: string,
	): [Ref<T>, ChangeHandler<T, P>] {
	const { emit, vnode } = getCurrentInstance();
	const internalValue: Ref<T> = ref();
	const vProps = vnode.props || {};
	const isVMP =
	Object.prototype.hasOwnProperty.call(vProps, propsName) ||
	Object.prototype.hasOwnProperty.call(vProps, kebabCase(propsName));
	if (isVMP) {
	return [
	value,
	(newValue, ...args) => {
	emit(`update:${propsName}`, newValue);
	onChange?.(newValue, ...args);
	},
	];
	}
	internalValue.value = defaultValue;
	return [
	internalValue,
	(newValue, ...args) => {
	internalValue.value = newValue;
	onChange?.(newValue, ...args);
	},
	];
	}

[uyarn]

recentColors 支持受控和非受控 需要先用useDefaultValue 进行受控处理再传递给内部组件，确保正常支持受控和非受控
color-picker.ts修改为如下

 const [innerRecentColors, setInnerRecentColor] = useDefaultValue(
      recentColors,
      props.defaultRecentColors,
      props.onRecentColorsChange,
      'recentColors',
    );
...
<ColorPanel
          {...newProps}
          recentColors={innerRecentColors.value}
          onRecentColorsChange={setInnerRecentColor}
          disabled={props.disabled}
          value={innerValue.value}
          togglePopup={setVisible}
          onChange={(value: string, context: TdColorContext) => setInnerValue(value, context)}
 />