ColorField

颜色格子。结构同 XInput：根节点就是带边框的框，框里平铺色块、十六进制输入框与透明度百分比。色块是 XPopover 的触发器，点开 XColorPicker；面板的内部状态由格子替它留着，关了再开接着用。值的写法与面板相同（#rrggbb / #rrggbbaa）。

框里只收 3 / 6 位十六进制，只改颜色、透明度沿用——透明度在面板里改；不是不透明时后面跟百分比。回车或失焦提交，Esc 两段式同 XNumberField。

编辑器面板

属性面板里一格挨一格：variant="filled" 填充外观，整片面板的默认经 XConfigProvider 设一次。面板开向哪边由 popover-props 定（缺省向下、起边对齐），属性面板里常开向左，让开画布上的选中；面板自己的 props（recents、eyedropper）经 picker-props 给。

多选时各项不同：值给 undefined 并带上 mixed，占位「多个值」，清空回车还原，填了或在面板里改了就一次改全部。不带 mixed 时 undefined 就是普通的空。

面板里拖动逐帧发 input、停手发 commit；框里打字只在提交时发 commit。

填充 / 描边 / 阴影 / 多个值

25%

input 0 次 / commit 0 次

工具条里

放进 XToolbar 默认幽灵外观，外框只留工具条一层描边；它不登记进方向键漫游，照常按 Tab 进出。

文字颜色与高亮

表单里

接 XField：标签、提示与校验归字段，格子只管输入。缺省描边外观；可以清空（回车提交 undefined）。

品牌色 / 可留空 / 错误 / 禁用

品牌色

框里直接输入十六进制

强调色(可留空)

错误

与背景对比度不足

禁用

API

Props

名称	类型	默认值	说明
`label`	`string \| undefined`	`undefined`	全名:输入框的读屏名,也是格子的悬停提示(说明型)
`placeholder`	`string \| undefined`	`undefined`	缺省:`mixed` 时是「多个值」(locale 的 `colorField.mixed`)
`alpha`	`boolean \| undefined`	`true`	—
`mixed`	`boolean \| undefined`	`false`	多选时各不相同:值给 undefined 并带上它,占位「多个值」,清空回车还原,填了或在面板里改了就是一个颜色。不带它时 undefined 就是普通的空:可以清空(回车提交 undefined)
`disabled`	`boolean \| undefined`	`false`	—
`popoverProps`	`Partial<PopoverProps> \| undefined`	`undefined`	取色面板的浮层,缺省向下开、起边对齐;属性面板里常开向左(`{ side: 'left' }`),让开画布上的选中
`pickerProps`	`Partial<Omit<ColorPickerProps, "disabled" \| "alpha" \| "mixed">> \| undefined`	`undefined`	取色面板的其余 props(`alpha` / `mixed` / `disabled` 跟着格子)
`size`	`"mini" \| "small" \| "medium" \| "large" \| "super" \| undefined`	`undefined`	尺寸：mini / small / medium(默认) / large / super；不传则跟随环境 data-size
`variant`	`FieldVariant \| undefined`	`undefined`	—
`modelValue`	`string \| undefined`	—	—
`open`	`boolean \| undefined`	`false`	—

Emits

事件	载荷	说明
`update:modelValue`	`[value: string \| undefined]`	—
`update:open`	`[value: boolean]`	—
`input`	`[value: string]`	—
`commit`	`[value: string \| undefined]`	—

Slots

插槽	说明
`swatch`	—