PanelFooter 是 React 颜色选择器底部的一栏。它显示当前颜色的预览、最多十个最近使用的颜色和一个复制按钮；在支持 EyeDropper API 的浏览器中，还有一个能从屏幕任意位置取色的按钮。ChromaPanel 会在每个模式下方渲染它。它不接受任何 prop，显示哪些内容由面板的 showRecentColors、recentColors、showCopyButton 和 showEyedropper 这几个 prop 决定。
颜色在变更提交时才会加入历史记录，比如拖动结束的时候，而不是每一帧都加。点击最近使用的色块，可以再次选中那个颜色。取色器按钮基于 useEyedropper 实现，你也可以用它做一个自己的按钮。
复制按钮按面板的 format prop 写入当前颜色，并把成功或失败的结果播报给辅助技术。它默认显示；如果你的界面已经有复制操作，传入 showCopyButton={false} 即可。
结构
import { PanelFooter, pushRecent } from "chroma-panel";底栏只显示一次当前颜色，旁边是最近使用的颜色记录。哪一侧的色块更多，记录这一行就在哪一侧淡出。
自行添加历史记录
function pushRecent(list: string[], hex: string, limit?: number): string[]Adds a color to a recent list, de-duplicated and capped. Exported so your own controls can match the panel's behavior.
pushRecent 把颜色放到最前面，去掉列表中已有的相同颜色，并把列表长度限制在 limit 以内（默认为 10）。面板内部用的也是这个函数。
在面板上设置 showRecentColors={false} 可以完全关闭这一行，也可以用 recentColors 和 onRecentColorsChange 来控制它，详见受控与非受控。
相关内容
- ChromaPanel：决定底栏显示内容的 prop
- useEyedropper：取色器按钮背后的 hook
- 浏览器支持：哪些浏览器支持取色器