FineTuneCard 属性检查器
紧凑的属性面板：布局分段、四个拖拽数值域、类型选择器，共用一个值对象。
FineTuneCard 属性检查器
基础用法
FineTuneCard
属性检查器
改动会实时反映到右侧预览，头部随之从「可调整」翻到「已修改」。
一个值对象
六个字段（layout / width / height / radius / opacity / type）走同一个 values 对象，用 v-model:values 绑定，而不是六个独立的 v-model。任何一处改动都会发出整个新对象，同时用 change 报出「改的是哪个键、改成了什么」，方便宿主做撤销栈或增量落库。
defaults 是比较基准，同时决定两件事：头部显示「可调整」还是「已修改」，以及每个数值域是否高亮成已改动。上游把 324/96/28/100 直接写死在组件里，换一套预设就全错了；这里跟着数据走。需要自己判断时传 edited 覆盖。
组成
布局分段复用 TxFlatRadio：因此它是一个真正的 radiogroup，方向键可以在三个选项间移动、只占一个 Tab 停靠点——上游那里是三个各自带 aria-pressed 的独立按钮。几何尺寸（28px 高、8px 外圆角、6px 滑块圆角）通过 --tx-flat-radio-* 变量覆写到 BUI 的刻度上。选项内边距和图标间距是这张卡片没有覆写的两个变量，因此保持梯度里的 0 8px / 4px。滑块动效来自 TxFlatRadio 自身：位移与改变宽度共用一条曲线、几何尺寸从带小数的 rect 读取、prefers-reduced-motion 下去掉位移——这些这张卡片都没有覆写。
四个数值域是 TxScrubField：标签即手柄，可拖、可键盘、可键入，详见它自己的文档。
类型选择器是卡片内部的轻量控件，不单独导出。它补齐了上游缺的全部可访问性：role="combobox" + aria-haspopup="listbox" + aria-expanded / aria-controls / aria-activedescendant，真实的 listbox / option，方向键漫游（打开时落在当前选中项而不是第一项）、Home / End、Enter / 空格提交、Esc 关闭并把焦点还给触发器、点击外部关闭、焦点移出关闭。
API
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
values | FineTuneValues | — | 六个字段的值对象，受控。 |
defaults | Partial<FineTuneValues> | — | 比较基准，驱动头部状态与逐字段高亮。 |
edited | boolean | — | 强制头部状态，忽略 defaults。 |
title | string | 'Fine-tune' | 卡片标题。 |
layoutLabel / typeLabel | string | 'Layout' / 'Type' | 两个分区的标题。 |
typeOptions | FineTuneTypeOption[] | [] | 类型选项，{ value, label }。 |
typePlaceholder | string | 'Select type' | 未选择时的占位文案。 |
adjustLabel / editedLabel | string | 'Adjust' / 'Edited' | 头部两态的文案。 |
fieldLabels | Partial<Record<FineTuneField, string>> | W / H / Radius / Opacity | 四个数值域的标签。 |
ranges | Partial<Record<FineTuneField, FineTuneRange>> | 见下 | 逐字段的取值范围。 |
disabled | boolean | false | 一次性禁用全部控件。 |
默认范围：width 40–999、height 24–999、radius 0–64、opacity 0–100。
Events
| 事件名 | 回调参数 | 说明 |
|---|---|---|
update:values | (values: FineTuneValues) | 整个新对象。 |
change | (key, value) | 改动的键与新值。 |
交互契约
- 布局分段是
radiogroup，每个选项带aria-label（如row layout）与aria-checked；图形是纯 CSS 点阵，本身对辅助技术隐藏。 - 类型选择器的菜单向上弹出（检查器通常贴在面板底部），
transform-origin在右下角。 - 头部两态是
v-if/v-else的两个节点，翻转时节点会重建，入场动画因此每次都重放，不需要额外的:key。 - 「可调整」的微光把文字画成透明再用渐变填充。减弱动效下不只是停掉动画，还会把颜色还原成实色——否则会留下一个看不见的标签。这条由测试单独锁住。
- 值不变时不发事件；
disabled会一路传给分段、四个数值域与选择器。 - 卡片外框走环形阴影（
--tx-bui-shadow-raised），内部分隔线才是真border——与上游一致，避免双线。
最佳实践
defaults传的是「当前这套预设的初始值」，不是常量：切换预设时一起换，头部与高亮才说得准。change用来记录撤销栈，update:values用来落状态——两者同时发出，不要在同一个处理器里做两遍。- 数值域的范围要贴合真实约束（比如
radius不超过短边的一半），让夹取替宿主挡住非法值。 - 检查器很窄（240px），标签请用缩写；
fieldLabels支持整套替换成本地化文案。
Source
- 组件源码：
packages/tuffex/packages/components/src/fine-tune-card/src/TxFineTuneCard.vue、TxFineTuneChipSelect.vue（内部件）。 - 类型：
packages/tuffex/packages/components/src/fine-tune-card/src/types.ts。 - 实测覆盖:
packages/tuffex/packages/components/src/fine-tune-card/__tests__/fine-tune-card.test.ts（24 项）覆盖版式与四个数值域、头部两态与节点重建、逐字段高亮、分段的 aria 与值回路、范围覆写、本地化文案、整体禁用、类型选择的完整键盘与外部关闭路径；fine-tune-card-motion.test.ts（8 项）对编译后的 CSS 断言减弱动效契约。 - 移植自 Beautiful UI（https://www.beautifului.dev），© 2026 Shane Levine，MIT。