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, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/guide/design-standards.md.

视觉与交互规范

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

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

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

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

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

基础项舒适紧凑
控件高度36px30px
下拉选项最小高度32px26px
正文字号 / 行高14px / 1.614px / 1.6
间距单位8px6px
表单行间距24px16px
辅助文字13px13px
弹窗上下 / 左右留白20px / 24px16px / 20px
圆角:小 / 基础 / 中 / 大6 / 10 / 12 / 16px6 / 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 的链接样式用于文字操作。