> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/guide/design-standards.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/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，Card 标题和文档标题使用 600 字重，其他组件标题、标签和按钮使用 500 字重；选项分组等小标题使用 12px、加字距的灰色样式。

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

Menu 的导航项、悬停背景与移动选中高亮使用和按钮一致的基础圆角，不随菜单内边距缩小；单独配置 Menu 圆角时，这些轮廓一起更新。可选条目悬停、键盘聚焦与按下时只改变文字和图标颜色，背景保持不变；带子菜单的展开项使用浅色悬停背景与较深的按下背景。子级选中时祖先保持普通样式。子菜单使用较淡文字与 32px 默认行高，紧凑密度为 26px，浮层沿用相同反馈。

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

卡片样式 Tabs 的内层标签和移动选中背景使用相同圆角，由标签栏圆角减去实际留白和边框派生，最小为零，跟随区域主题或组件级圆角配置。标签栏随内容收缩，尺寸包含边框和内边距，正文仍使用可用宽度。卡片标签统一使用 3px 内边距与间距、普通文字色和浮起的选中块，按下不缩放；`block` 让选项等宽，省略面板内容可只显示标签栏。

Tag 仅提供无边框的浅底和实色形态，使用主题基础圆角，默认 10px；组件级圆角配置优先。Tag、CheckableTag 与 TagGroup 默认加粗，跟随主题 headingWeight（默认 600），可用 `bold={false}` 恢复普通字重，也可通过区域默认参数统一配置。

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

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

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

步骤条的文字背景保持透明，横向连线排在文字之后。头像只保留一圈 2px 白色边缘，组合头像也不叠加外圈阴影。DataTable 默认无边框并开启斑马纹；无边框使用直角、无表头灰底，表头下方保留 2px 分割线。`bordered` 开启带圆角的外框、表头浅底与列分隔线，两种模式的表头文字均使用正文色。斑马纹将浅灰表面与表格表面各混合一半并隐藏行间线，`striped={false}` 恢复行间细线。悬停时在行基础背景上混合 3% 主色，普通行和条纹行都有轻微反馈。

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