> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/guide/design-standards.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt.

# 视觉与交互规范

统一使用语义颜色、尺寸与间距变量，组件在深浅色、舒适与紧凑模式下保持一致。完整规范维护在仓库 `DESIGN-STANDARDS.md`。

Card 的小、默认和大尺寸统一调整留白、标题字号和标题栏高度，内嵌 Tabs 默认跟随卡片尺寸。标签页与标题共用一个头部区域：有标题时在标题下方，没有标题时占满标题栏高度并垂直居中，分割线只位于整条标签栏下方。标签文字与正文左边缘对齐，页面内容沿用卡片内边距，底部继续由 `divided` 控制分区外观。

警告状态统一使用明亮的黄橙色，图标、控件边框和状态填充保持一致；文字使用独立派生的可读颜色。可通过 ConfigProvider 的 `theme.tokens.warningColor` 定制警告色。

下拉选项统一使用灰色的悬停与键盘候选背景，已选中项保留主题色底色、文字和勾选标记。Select、自动完成、级联、树选择、时间列表和菜单使用同一配色方案；自动完成、提及和命令面板中的候选项仍使用灰色。移动背景平滑切换位置和颜色，经过选中项时不会叠色；禁用项不响应交互，危险操作保留红色提示。配色随 ConfigProvider 的区域主题与深浅外观调整。

Select、TreeSelect 和 Cascader 的多选标签使用一致的尺寸与间距。默认可换行，`tagWrap={false}` 保持单行并以 `+N` 折叠超出部分；长标签自动省略，搜索框和操作按钮始终保留空间。折叠只影响展示，不改变已选值。

| 基础项               | 舒适                 | 紧凑                 |
| ----------------- | ------------------ | ------------------ |
| 控件高度              | 36px               | 30px               |
| 下拉选项最小高度          | 32px               | 26px               |
| 正文字号 / 行高         | 14px / 1.6         | 14px / 1.6         |
| 间距单位              | 8px                | 6px                |
| 表单行间距             | 24px               | 16px               |
| 辅助文字              | 13px               | 13px               |
| 弹窗上下 / 左右留白       | 20px / 24px        | 16px / 20px        |
| 圆角：小 / 基础 / 中 / 大 | 6 / 10 / 12 / 16px | 6 / 10 / 12 / 16px |

主按钮和描边按钮点击后沿外轮廓快速扩散一圈波纹，再缓慢淡出，按钮与文字保持稳定；文字按钮不展示波纹。主按钮悬停提亮、按下加深，描边按钮通过文字和边框变色反馈。菜单和标签页通过颜色、透明度、边框和阴影反馈，选中指示器可以移动到目标项。抽屉平滑滑入；提示内容整体出现，图标和文字不单独回弹。关闭区域动效或系统减少动态效果时，按钮不展示波纹；系统偏好优先于页面设置。

层级由圆角、边框和文字共同建立。圆角由外向内递减：弹窗、抽屉和浮层使用大圆角，卡片、提示与选项卡片等内容表面使用中圆角，按钮、输入框和表格外框使用基础圆角，复选框等小元素使用小圆角，状态标签使用无边框的小圆角。内容表面依靠细边框和浅灰底区分，不叠加阴影；阴影只留给真正浮起的层，例如浮层、弹窗、拖动中的项目和滑块把手。文字层级依靠字号与颜色：正文 14px、辅助文字 13px，组件标题、标签和按钮使用 500 字重，600 只用于文档标题；选项分组等小标题使用 12px、加字距的灰色样式。

紧贴容器的内部背景采用嵌套圆角：`内部圆角 = max(0px, 外框圆角 − 内边距 − 边框厚度)`。默认浮层的外框为 16px、内边距为 6px、边框为 1px，因此选项为 9px。悬停、选中和移动高亮背景使用同一轮廓，并随主题自动更新；非等距留白按各方向计算，多层结构计入额外留白。小圆角和直角主题收敛到 0，独立控件、日历格子、标签和图标继续使用各自的语义圆角。

Menu 的导航项、悬停背景与移动选中高亮使用和按钮一致的基础圆角，不随菜单内边距缩小；单独配置 Menu 圆角时，这些轮廓一起更新。

Pagination 默认使用描边按钮，也可切换为无边框样式；尺寸沿用控件高度，按下时保持位置与大小，选中背景平滑移动。描边按钮通过文字和边框变色反馈，无边框按钮使用中性背景。

卡片样式 Tabs 的内层标签和移动选中背景使用相同圆角，由标签栏圆角减去实际留白和边框派生，最小为零，跟随区域主题或组件级圆角配置。标签栏随内容收缩，尺寸包含边框和内边距，正文仍使用可用宽度。

Tag 仅提供无边框的浅底和实色形态，圆角取主题小圆角的六分之五，默认 5px；组件级圆角配置优先。

组件验收要覆盖默认、悬停、按下、键盘焦点、选中、禁用、加载、错误、空状态。状态同时用文字或 ARIA 表达，不能只依靠颜色。图标按钮需要可访问名称；图标与文本的基线、弹窗表单与页脚边缘需要对齐。

紧凑模式面向鼠标和键盘的信息密集页面，不缩小正文字号。触屏优先舒适或更大的显式尺寸；必要操作目标至少 24px，推荐 44px。尺寸覆盖的顺序是局部组件设置、显式主题尺寸、区域密度、默认值。

按钮的横向留白随实际高度按比例生成，各尺寸都可以用组件级 `padding` 定制。小尺寸步骤条保留正文字号，卡片和列表形式的选项组使用统一的分区标题。Card 标题区域的上下留白一致，与正文衔接时不重复叠加间距。Modal 的标题图标与浅分隔线适合丰富内容；Confirm 是通过 API 调用的简短提示，使用留白分区，图标放在正文旁。没有副标题时减少头部留白，Card 分区、Modal 和 Drawer 的底部操作区使用一致的紧凑留白；Confirm 沿用相同的底部留白。

链接按钮无背景、边框、内边距和固定控件高度，悬停 / 按下只改变文字颜色，不展示波纹。页面跳转使用 Link；Button 的链接样式用于文字操作。