ScifiHeaderSurge

⚡WASM 驱动

⭐明星组件

👑首创

科技标头-涌动 是 TechUI Scifi 系列中的首发旗舰级标题组件。

它代表了该系列视觉层级的高点。它采用了复杂的 “多层几何叠加 (Multi-layer Geometry)” 与 “动态涌动 (Surging Motion)” 设计语言。结构上，它由多组精密的 SVG 图形构建而成，两侧配有标志性的能量刻度装饰，仿佛数据正在向中心汇聚涌动。

作为一款拥有独立入场动画与持续动态光效的重型组件，它天生就是为了掌控全场而生。它非常适合作为数据可视化大屏的主标题 (Main Title) 或 系统核心抬头，能够瞬间确立界面的科幻基调，成为视觉的绝对锚点。

提示：该组件可以通过 ScifiHeaderA1 或其语义化别名 ScifiHeaderSurge 进行调用。

基础用法

默认形态 (Default)

默认情况下，组件开启入场动画和流光效果。通过默认插槽传入标题文本。

<template>
  <div class="box">
    <ScifiHeaderSurge>TechUI Visualization</ScifiHeaderSurge>
  </div>
</template>

仪表盘风格 (Dashboard)

通过调整 decorationColorAlt (装饰色变体) 和 gradientReverse (渐变反转)，可以获得更加稳重、适合仪表盘的视觉风格。

<template>
  <ScifiHeaderSurge 
    :width="550"
    :decorationColorAlt="true"
    :gradientReverse="true"
  >
    Dashboard Monitor
  </ScifiHeaderSurge>
</template>

静态与发光 (Static & Glow)

在性能敏感或需要低干扰的场景下，可以关闭 animation 和背景渐变，转而开启 glow (外发光) 效果，打造静谧的科技感。

<template>
  <ScifiHeaderSurge 
    :animation="false"
    :gradientBackground="false"
    :glow="true"
    :glowOpacity="0.6"
  >
    System Status
  </ScifiHeaderSurge>
</template>

进阶配置

极简模式

通过关闭装饰元素 decoration 并配合 scale 缩放，可以将其作为普通的模块标题使用。

<template>
  <ScifiHeaderSurge 
    :decoration="false"
    :scale="0.7"
    :aniDuration="1" 
  >
    Module A
  </ScifiHeaderSurge>
</template>

自定义样式

组件暴露了全量的 CSS 变量，您可以通过自定义类名轻松修改配色以匹配特定主题（如红色警告主题）。

<template>
  <ScifiHeaderSurge className="sfh-danger">
    WARNING
  </ScifiHeaderSurge>
</template>

<style lang="less">
.sfh-danger {
  --sf-header-bg: #4a0000;      /* 深红背景 */
  --sf-header-bg_alt: #ff0000;  /* 亮红辅助 */
  --sf-header-bd: #ff4d4f;      /* 红色边框 */
  --sf-header-fc: #ffffff;
  --sf-header-fc_alt: #eba447;
  --sf-header-glow: #ff0000;    /* 红色发光 */
  --sf-header-hlite: #b81f14;
  --sf-header-focus: #eba447;
}
</style>

API 参考

Props

属性名	说明	类型	默认值
width	标题总宽度 (px)。WASM 会根据此值重绘路径	Number	null (自适应)
animation	是否开启涌动动画	Boolean	true
aniDuration	动画周期时长 (秒)	Number	null (默认 CSS 6s)
decoration	是否显示中央底部的装饰条	Boolean	true
decorationColorAlt	是否启用装饰色的变体配色	Boolean	false
gradientBackground	是否启用背景渐变色	Boolean	true
gradientReverse	是否反转背景渐变的方向	Boolean	false
glow	是否开启 SVG 外发光滤镜 (性能消耗较高，请按需开启)	Boolean	false
glowOpacity	外发光的不透明度 (0-1)	Number	—
shadowType	阴影模式：'drop' (投影), 't3d' (厚度立体), 'none'	String	'drop'
scale	组件整体缩放比例	Number	1
className	自定义容器类名	String	—

Slots

插槽名	说明
default	标题文本内容

CSS Variables

变量名	说明	默认值参考
--sf-header-lh	标题行高 / 基准高度	60px
--sf-header-ff	字体族 (Font Family)	Impact
--sf-header-bg	主背景色 (渐变起始)	var(--scifi-header-bg)
--sf-header-bg_alt	辅助背景色 (渐变结束)	var(--scifi-header-bg_alt)
--sf-header-bgop	背景不透明度	var(--cpt-header-bgop, 1)
--sf-header-bd	边框线条颜色	var(--scifi-bd)
--sf-header-bdw	边框线条宽度	var(--scifi-bdw, 1px)
--sf-header-fc	主文字颜色	var(--scifi-header-fc)
--sf-header-fc_alt	辅助文字 / 装饰元素颜色	var(--scifi-header-fc_alt)
--sf-header-hlite	高光色	var(--scifi-header-hlite)
--sf-header-focus	焦点色	var(--scifi-header-focus)
--sf-header-glow	内发光颜色	var(--scifi-hlite)
--sf-header-glowop	内发光不透明度	var(--cpt-header-glowop, var(--shadow-inset-op, .5))
--sf-header-shadow	容器阴影	var(--shadow-weak)
--sf-header-scale	整体缩放比例 (CSS 层面)	var(--cpt-header-scale, 1)
--sf-header-anidur	动画循环时长	var(--cpt-header-anidur, 6s)