6.0 KiB
Select Token 设计
本文档定义 AtomUI.Desktop.Controls.SelectToken 的专属语义、分类、使用范围和兼容边界。共享输入表面分层见 输入控件共享架构设计,控件 Token 的通用分层、命名、计算、Theme Variables 边界和预设色规则见 AtomUI 控件 Token 设计规范。Select 整体架构见 Select 桌面版架构设计,内部实现原理见 Select 桌面版实现原理,设计和契约变化记录见 Select Changelog。
1. 定位
SelectToken 是 Select 的控件级 Token scope,描述多选标签、候选项、候选弹层 padding 和 Select 输入内容 padding。输入表面的通用边框、圆角、状态色、focus ring、disabled 背景、CompactSpace 和 AddOn 结构来自 InputControlFrameTheme、SharedToken 和 PopupHostToken;SelectToken 不复制这些共享职责。
SelectToken 不承载以下状态:
OptionsSource、Options、SelectedOption、SelectedOptions、DefaultValues等数据状态。FilterValue、IsDropDownOpen、IsLoading、Status、Mode等运行状态。- 候选项 hover、pressed、selected、disabled 的当前实例状态。
- Popup 当前宽度、高度、offset、placement 或异步加载结果。
2. Token 分类
2.1 多选标签 Token
MultipleItemBgMultipleItemHeightMultipleItemHeightSMMultipleItemHeightLGMultipleSelectorBgDisabledMultipleItemColorDisabledFixedItemMargin
这些 Token 控制 Multiple / Tags 模式下 SelectTag 的背景、尺寸、禁用态颜色和标签间距。高度按 SharedToken 的控件高度和基础 padding 计算,使 Large / Middle / Small 三种预设尺寸与输入框高度对齐。
2.2 候选项 Token
OptionSelectedColorOptionSelectedFontWeightOptionSelectedBgOptionActiveBgOptionPaddingOptionFontSizeOptionHeight
这些 Token 控制 SelectCandidateListItem 的选中、active、文本和行高基准。当前弹层最大高度使用实例 ItemHeight 计算,主题默认值来自 SharedToken.ControlHeight;调整 OptionHeight 时必须同时验证候选项实际高度和弹层可视行数是否仍然一致。
2.3 输入内容 padding Token
PaddingPaddingSMPaddingLGMultiModePaddingMultiModePaddingSMMultiModePaddingLGMultiModePrefixIndentMultiModePrefixIndentSMMultiModePrefixIndentLGSelectAffixPadding
这些 Token 控制 Select 输入区域和多选内容区域的 padding。单选模式主要使用输入框默认内容布局;多选和 Tags 模式根据是否已有选中项切换普通 padding 与 multi mode padding。
MultiModePadding* 的左值服务于标签区域(较小的起点),MultiModePrefixIndent* 作为 PART_ContentLeftAddOn(prefix)的额外左 Margin,使多选 / Tags 模式下有选中项时 prefix 的左内缩与单选模式一致(对齐 Ant Design:selector 小左内缩 + prefix 自身 margin 补偿)。两者之和等于对应尺寸的单选水平内边距。
SizeType=Custom 在主题中与 Middle 共享 Padding 和 MultiModePadding 分支。它不是独立 Token 组。
2.4 弹层 Token
PopupContentPadding
该 Token 控制 PopupFrame 内部 padding,并参与 MaxPopupHeight 计算。
3. 控件专项模型中的 Token 使用
SelectToken 使用路径:
SharedToken / InputControlFrameTheme
↓
SelectToken
↓
SelectTheme / SelectAddOnDecoratedBoxTheme / SelectTagTheme / SelectCandidateListItemTheme
↓
Select input content + tags + candidate list + popup frame
运行时派生尺寸:
MaxPopupHeight = ItemHeight * DisplayPageSize
+ PopupContentPadding.Top
+ PopupContentPadding.Bottom
MaxPopupHeight、EffectivePopupWidth、SelectedCount、IsSelectionEmpty 和 IsEffectiveFilterEnabled 都是实例运行状态,不是 Token。
4. 控件家族影响
SelectToken 直接影响 Select。TreeSelect 有独立 TreeSelectToken,ComboBox 有独立 ComboBoxToken,普通 LineEdit / NumericUpDown 不使用 SelectToken。
调整 SelectToken 时必须评估:
SelectTheme.axamlSelectAddOnDecoratedBoxTheme.axamlSelectCandidateListItemTheme.axamlSelectTagTheme.axaml- Select token.md 语义说明
SelectShowCasePageTests
5. 兼容性要求
SelectToken 属于 Select 主题契约。即使 SelectToken 是 internal 类型,生成的 SelectTokenKind、AXAML resource 使用点和 token.md 语义说明已经形成稳定依赖。
Token 变更要求:
- 不擅自重命名或删除现有 Token。
- 不把实例数据、过滤状态、loading 状态、选择集合、popup 打开状态或 Form 状态迁移为 Token。
- 不在 SelectToken 中复制
InputControlFrame的边框、圆角、focus、error、warning 或 disabled 通用状态 Token。 - 不把
DisplayPageSize、MaxCount、MaxTagCount或IsResponsiveTagMode变成 Token;它们是实例行为属性。 - 需要破坏性变更时,必须先说明影响范围并获得授权。
6. 验证策略
| 改动类型 | 验证要求 |
|---|---|
| 修改多选标签 Token | 验证 Multiple / Tags 模式下 Large / Middle / Small / Custom 标签高度、间距、关闭按钮和 disabled 状态。 |
| 修改候选项 Token | 验证候选项高度、active/selected 视觉、键盘导航滚动和 DisplayPageSize 下的可视行数一致性。 |
| 修改输入 padding Token | 验证单选、多选、Tags、空选择、有选择、prefix/suffix/addon 和 CompactSpace 对齐。 |
修改 PopupContentPadding |
验证 popup 内边距、候选列表裁剪、loading/empty 视觉和最大高度计算。 |
| 删除或重命名 Token | 默认不允许;如获授权,需同步 AXAML 引用、生成文件、Token 类型、生成数据和 token.md和控件文档。 |
| 文档改动 | 运行 git diff --check,检查文档链接存在。 |