Components

Hero 首屏横幅

面向落地页、官网门户与产品首页的首屏大横幅，支持居中排版、左右图文分栏及紧凑极简模式。

居中主视觉模式 (center)

适合配合徽标、醒目标题、副标题、双 CTA 与下方预览画面。

v0.3.0 已正式发布

专为运维控制台打造的 UI 系统

基于 Vue 3、Nuxt 4 与 Reka UI 构建，提供无障碍基础底座与分层设计令牌，助力高效交付开发者工具。

[产品控制台界面预览交互展示区]

<Hero
  layout="center"
  badge="v0.3.0 已正式发布"
  title="专为运维控制台打造的 UI 系统"
  description="基于 Vue 3、Nuxt 4 构建，提供无障碍底座与分层设计令牌。"
  primary-action-text="快速上手"
  secondary-action-text="浏览组件"
>
  <template #media>
    <!-- 控制台预览图或演示窗口 -->
  </template>
</Hero>

图文分栏模式 (split)

左侧文本导流，右侧展示交互模型或媒体卡片。

云原生时代

下一代基础设施控制台

轻量、确定性、高可访问性，专为工程师与自动化服务深度打磨。

架构拓扑插槽

<Hero
  layout="split"
  badge="云原生时代"
  title="下一代基础设施控制台"
  description="轻量、确定性、高可访问性。"
  primary-action-text="免费试用"
  secondary-action-text="查看架构"
>
  <template #media>
    <!-- 拓扑插图或架构图 -->
  </template>
</Hero>

API 参考

属性	类型	默认值	说明
`layout`	`'center' \| 'split' \| 'minimal'`	`'center'`	横幅排版结构变体。
`badge`	`string`	`undefined`	顶部小胶囊徽标文本。
`title`	`string`	`''`	主标题文本。
`description`	`string`	`undefined`	副标题/介绍段落。
`primaryActionText`	`string`	`undefined`	主要按钮文本。
`secondaryActionText`	`string`	`undefined`	次要按钮文本。
`event: primary-click`	`event`	`—`	点击主要按钮时触发。
`event: secondary-click`	`event`	`—`	点击次要按钮时触发。
`slot: title`	`slot`	`—`	自定义主标题。
`slot: description`	`slot`	`—`	自定义介绍副标题。
`slot: badge`	`slot`	`—`	自定义顶部徽标。
`slot: actions`	`slot`	`—`	自定义全部 CTA 按钮组。
`slot: primary-action`	`slot`	`—`	自定义主要 CTA；提供时覆盖默认主要按钮。
`slot: secondary-action`	`slot`	`—`	自定义次要 CTA；提供时覆盖默认次要按钮。
`slot: media`	`slot`	`—`	产品交互或媒体预览插槽。