Hero 主视觉区
Hero 现在不只是一个样式壳。Root 负责背景、尺寸和遮罩，Content 负责布局，Title / Description / Actions 负责最常见的文案骨架，剩下的局部视觉继续交给 className 微调。
没有可以直接对照的同名标准组件，所以组件重点覆盖组合能力和语义 API 上：使用 Rue 自己的视觉语言，但把高频搭建动作从页面里收回到组件里。
用 tone、size、backgroundImage、overlay 先把 Hero 的外层骨架搭起来。
用 Hero.Content.layout 切换常见主视觉布局，再按需叠加 align、textAlign 和 gap。
标题、描述和操作区都给了语义化入口，页面里的重复样式可以明显减少。
# Semantic starter
Ship landing sections without rebuilding layout scaffolding.
Hero 现在把 surface、height、background image、overlay 和 action 布局都提升成了语义 API。页面可以更聚焦在内容，而不是重复拼装容器类名。
Composition
tone、size、backgroundImage、overlay 负责外层骨架。
layout、align、textAlign、gap 负责组织主视觉内容。
# Centered hero
Hello there
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi.
# Hero with figure
Box Office News!
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi.
# Hero with figure but reverse order
Box Office News!
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi.
# Hero with form
Login now!
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi.
# Hero with overlay image
Hello there
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi.
# Hero with automatic overlay
把背景图和可读性补丁一起交给 Hero 处理。
当页面只是想快速搭一个带图主视觉区时，直接传 backgroundImage 和 overlay 就够了，不用再手写遮罩层节点。
# Surface and size presets
Compact spotlight
适合列表页里的次级引导块。
Campaign push
颜色与前景色一起切换，页面里不用再单独补文字颜色。
Full campaign frame
更高的尺寸适合首页首屏或专题页入口。
API
推荐把外层背景和高度交给 Hero Root，把布局交给 Hero.Content，把标题、描述和 CTA 交给语义子组件。这样页面里仍然可以用 className 微调，但不会反复重写同一套结构。
Hero
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 指定 Hero 根节点标签 | string | div |
backgroundImage | 直接设置背景图 URL，组件会自动写入内联背景样式 | string | - |
backgroundPosition | 背景图定位 | string | center |
backgroundRepeat | 背景图重复方式 | string | no-repeat |
backgroundSize | 背景图尺寸 | string | cover |
fullHeight | 直接切换到全屏高度，等价于 screen 尺寸 | boolean | false |
overlay | 开启自动遮罩，也支持直接传入 Hero.Overlay 同构配置对象 | boolean | HeroOverlayProps | false |
size | Hero 区块高度预设 | sm | md | lg | xl | screen | - |
tone | Root 背景与前景色语义层 | default | base-100 | base-200 | base-300 | neutral | primary | secondary | accent | info | success | warning | error | default |
Hero.Content
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
Hero.Content.align | 控制内容区交叉轴对齐 | start | center | end | - |
Hero.Content.as | 指定内容区标签 | string | div |
Hero.Content.gap | 内容区间距预设，适合覆盖 split 默认间距 | sm | md | lg | xl | - |
Hero.Content.layout | 语义布局预设，覆盖居中、分栏与反向分栏 | inherit | center | split | split-reverse | inherit |
Hero.Content.textAlign | 文字对齐方式 | start | center | end | - |
Hero parts
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
Hero.Overlay.blur | 为遮罩添加轻量模糊，适合背景图场景 | boolean | false |
Hero.Overlay.opacity | 遮罩透明度，支持 soft / medium / strong 或数字 | soft | medium | strong | number | - |
Hero.Overlay.tone | 遮罩色调，可配合自动 overlay 一起用 | default | base-content | neutral | primary | secondary | accent | info | success | warning | error | default |
Hero.Title.balanced | 标题默认启用 text-balance，减少过长标题断行问题 | boolean | true |
Hero.Title.size | 标题字号预设 | sm | md | lg | xl | lg |
Hero.Description.muted | 描述文本默认降低一点对比度 | boolean | true |
Hero.Description.size | 描述字号预设 | sm | md | lg | md |
Hero.Actions.align | 操作区对齐方式，会根据横排或竖排自动切换到 justify / items | start | center | end | - |
Hero.Actions.direction | 操作区排列方向 | row | column | row |
Hero.Actions.stackOnMobile | 移动端堆叠、桌面端横排，适合 CTA 组合 | boolean | false |