TechUI Docs

简中

EN

简中

EN

主题

ScifiHeaderSurge ​

⚡WASM 驱动
⭐明星组件
👑首创

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

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

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

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

基础用法 ​

默认形态 (Default) ​

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

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

仪表盘风格 (Dashboard) ​

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

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

静态与发光 (Static & Glow) ​

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

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

进阶配置 ​

极简模式 ​

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

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

自定义样式 ​

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

vue
<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 会根据此值重绘路径Numbernull (自适应)
animation是否开启涌动动画Booleantrue
aniDuration动画周期时长 (秒)Numbernull (默认 CSS 6s)
decoration是否显示中央底部的装饰条Booleantrue
decorationColorAlt是否启用装饰色的变体配色Booleanfalse
gradientBackground是否启用背景渐变色Booleantrue
gradientReverse是否反转背景渐变的方向Booleanfalse
glow是否开启 SVG 外发光滤镜 (性能消耗较高，请按需开启)Booleanfalse
glowOpacity外发光的不透明度 (0-1)Number—
shadowType阴影模式：'drop' (投影), 't3d' (厚度立体), 'none'String'drop'
scale组件整体缩放比例Number1
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)