TechUI Docs

简中

EN

简中

EN

主题

ScifiDecoOrb ​

⚡WASM 驱动
⭐明星组件

科幻装饰-智核 是 TechUI Scifi Deco 系列中的环形徽章组件。

它专注于 “完美圆形 (Perfect Circle)” 与 “机械环绕 (Mechanical Ring)” 的几何构造。相比于 A1 的极简底座，B1 拥有更为复杂的机械纹理与多层同心结构。

它模拟了科幻界面中常见的 反应堆核心 (Reactor Core)、雷达示波器 或 精密仪表盘 的边框形态。这种高密度的细节设计使其具备极强的视觉引力，非常适合用于承载 核心功能入口（如 Start/Launch 按钮）、用户头像容器 或 关键状态指示器（如系统完整度），是界面中点睛之笔的存在。

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

基础用法 ​

默认形态 ​

默认情况下 (appearance="A")，B1 渲染为一个带有顶部/底部装饰细节的厚实圆环。 组件内部插槽 (default slot) 会自动垂直水平居中。

vue
<template>
  <div class="reactor-group">
    <ScifiDecoOrb>
      <icon name="bi-radioactive" />
    </ScifiDecoOrb>
    
    <ScifiDecoOrb>
      <span class="counter">99</span>
    </ScifiDecoOrb>
  </div>
</template>

外观变体 ​

B1 提供了四种环形结构变体，适用于不同密度的 UI 场景。

模式对比 ​

  • Type A (默认): 标准能量环。环体较宽，带有上下对称的机械卡扣装饰，视觉权重高。
  • Type B: 分段扫描环。环体被切割为多个弧形片段，具有“扫描中”或“加载中”的动态感。
  • Type C: 极简锁定环。线条更细，强调四个方位的锁定点，适合包裹密集的小图标。
  • Type D: 重型反应堆。拥有更实心的背景填充和复杂的内部纹理，常用于 Boss 血条图标或究极技能。
vue
<template>
  <div class="grid">
    <ScifiDecoOrb appearance="A">Standard</ScifiDecoOrb>
    <ScifiDecoOrb appearance="B">Segmented</ScifiDecoOrb>
    <ScifiDecoOrb appearance="C">Minimal</ScifiDecoOrb>
    <ScifiDecoOrb appearance="D">Heavy</ScifiDecoOrb>
  </div>
</template>

尺寸与布局 ​

固定尺寸与缩放 (Scale) ​

ScifiDeco 系列基于 80px x 80px 坐标系绘制。 请勿使用 CSS 修改宽高，必须使用 scale 属性进行无损缩放，以保持圆环的曲率平滑。

  • scale="1": 80px (默认)
  • scale="1.5": 120px (适合做主按钮)
  • scale="0.5": 40px (适合做列表状态灯)
vue
<template>
  <ScifiDecoOrb appearance="D" :scale="1.5" :glow="true">
    START
  </ScifiDecoOrb>
</template>

视觉定制 ​

辉光与氛围 ​

  • glow: 开启发光滤镜。圆环结构非常适合发光效果，能营造出霓虹灯管的质感。
  • glowRange: 控制光晕的扩散程度。
  • backgroundOpacity: 调整圆形内部的背景填充透明度。

配色变体 (Color Alt) ​

  • decorationColorAlt: 交换高亮色与焦点色。
  • 开启后，圆环的主体颜色会发生变化，可用于表示“过载”、“警告”或“待机”状态。
vue
<template>
  <ScifiDecoOrb 
    appearance="A" 
    :decorationColorAlt="true"
    :glowRange="15"
  >
    <icon name="alert" />
  </ScifiDecoOrb>
</template>

CSS变量 ​

通过 CSS 变量，您可以将 B1 定制为不同风格的仪表。

案例：生化危机风格 (Biohazard Green) ​

此案例定义了一个荧光绿配色的生化风格圆环。

vue
<template>
  <ScifiDecoOrb 
    appearance="B" 
    className="deco-bio"
    :scale="1.2"
  >
    <icon name="virus" />
  </ScifiDecoOrb>
</template>

<style lang="less">
.deco-bio {
  /* 基础配色 */
  --sf-deco-hlite: #4ade80;  /* 荧光绿高亮 */
  --sf-deco-bd: #14532d;     /* 深绿边框 */
  --sf-deco-bg: rgba(20, 83, 45, 0.4); /* 毒液绿背景 */
  
  /* 内容文字 */
  --sf-deco-fc: #86efac;     /* 浅绿文字 */
  
  /* 发光增强 */
  --sf-deco-glow: #22c55e;   /* 绿色光晕 */
  --sf-deco-glowop: 0.6;
}
</style>

变量字典 ​

以下是 ScifiDecoOrb 支持的主要 CSS 变量：

变量名说明默认值
基础外观
--sf-deco-size组件基准尺寸 (固定值)80px
--sf-deco-bg圆形内部背景填充色var(--scifi-bg)
--sf-deco-bgop背景不透明度1
--sf-deco-bd环形线条颜色var(--scifi-bd)
装饰与高亮
--sf-deco-hlite圆环主体颜色 (SVG 描边)var(--scifi-hlite)
--sf-deco-focus辅助刻度/卡扣颜色var(--scifi-focus)
--sf-deco-glow发光滤镜颜色var(--scifi-hlite)
内容插槽
--sf-deco-fc插槽内文字/图标颜色var(--font-strong)
--sf-deco-fz插槽内文字默认大小24px

API 参考 ​

Props ​

属性名说明类型默认值
appearance外观变体。'A', 'B', 'C', 'D'String'A'
scale缩放比例。基于 80px 的倍率Number1
glow发光开关。是否开启滤镜光晕Booleantrue
glowRange发光范围Number10
glowOpacity发光不透明度Number—
borderd是否显示环形线条Booleantrue
decorationColorAlt装饰变体。交换高亮色与焦点色Booleanfalse
backgroundOpacity背景不透明度Number—
className自定义类名String—

Slots ​

插槽名说明
default组件内容。会自动绝对居中显示。