TechUI Docs

简中

EN

简中

EN

主题

ScifiDecoRune ​

⚡WASM 驱动
⭐明星组件
🏅原创

科幻装饰-鲁恩 是 TechUI Scifi Deco 系列中的基础几何图腾组件。

它是一个汇集了经典几何美学的微型容器集合。它并不追求复杂的边框结构，而是回归了最纯粹的 “几何符文 (Geometric Runes)” 形态——包含了 六边形 (Hexagon)、三角形 (Triangle) 与 圆形 (Circle) 三种基础变体。

这种紧凑且高度符号化的设计，使其天生就是一个完美的 “能量底座”。它内部预设了绝对居中的内容插槽，非常适合用来承载 技能图标、核心属性数值（如等级、电量）或作为 状态指示灯 使用。与 Panel 系列的自适应逻辑不同，它默认采用固定尺寸（Standard Size），通过 scale 属性进行整体缩放，以保证在微小尺寸下的像素完美 (Pixel Perfect)。

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

基础用法 ​

默认形态 ​

默认情况下 (appearance="A")，A1 渲染为一个圆形的科技底座。 组件内部插槽 (default slot) 会自动垂直水平居中，您可以直接放入 Icon 或文本。

vue
<template>
  <div class="box">
    <ScifiDecoRune>
      <icon name="bi-hdd-network" />
    </ScifiDecoRune>
    
    <ScifiDecoRune>
      <span class="counter">95%</span>
    </ScifiDecoRune>
  </div>
</template>

外观变体 ​

A1 包含三种完全不同的几何构造，通过 appearance 属性切换。

模式对比 ​

  • Type A (默认): 圆形 (Circle)。最通用的形态，类似雷达或聚能环，适合大多数图标。
  • Type B: 六边形 (Hexagon)。经典的蜂巢结构，科技感最强，适合技能树或属性点。
  • Type C: 三角形 (Triangle)。具有方向感，常用于警示标志或特殊属性标识。
vue
<template>
  <div class="grid">
    <ScifiDecoRune appearance="A">Circle</ScifiDecoRune>
    <ScifiDecoRune appearance="B">Hexagon</ScifiDecoRune>
    <ScifiDecoRune appearance="C">Triangle</ScifiDecoRune>
  </div>
</template>

尺寸与布局 ​

固定尺寸与缩放 (Scale) ​

注意：ScifiDeco 系列的内部 SVG 路径是基于 80px x 80px 坐标系绘制的。 请勿直接修改 width / height，否则会导致线条比例失调。请使用 scale 属性进行无损缩放。

  • scale="1": 80px (默认)
  • scale="0.5": 40px
  • scale="1.5": 120px
vue
<template>
  <ScifiDecoRune appearance="B" :scale="0.6">
    <icon name="item-01" />
  </ScifiDecoRune>
</template>

视觉定制 ​

辉光与方向 ​

  • glow: 是否开启 SVG 滤镜发光。关闭后视觉更扁平，性能更好。
  • glowRange: 发光扩散范围，默认为 10。
  • directionAlt: 镜像/旋转。
  • 对于 Appearance B (六边形) 和 C (三角形)，开启此属性会旋转图形方向（例如三角形倒置），可用于区分上下级关系。

配色变体 (Color Alt) ​

  • decorationColorAlt: 交换高亮色与焦点色。
  • 默认：高亮色描边，焦点色点缀。
  • 开启：焦点色描边。常用于制作“红色警报”或“禁用”状态的图标。
vue
<template>
  <ScifiDecoRune 
    appearance="C" 
    :decorationColorAlt="true"
    :glowRange="20"
  >
    !
  </ScifiDecoRune>
</template>

CSS变量 ​

ScifiDeco 系列拥有一套独立的 CSS 变量系统。您可以通过自定义类名覆盖这些变量来打造全新的风格。

案例：量子幽灵风格 (Quantum Ghost) ​

此案例定义了一个紫色调、高透明度的风格，模拟全息投影效果。

vue
<template>
  <ScifiDecoRune 
    appearance="B" 
    className="deco-quantum"
    :scale="1.2"
  >
    <icon name="ghost" />
  </ScifiDecoRune>
</template>

<style lang="less">
.deco-quantum {
  /* 基础配色 */
  --sf-deco-hlite: #a855f7;  /* 高亮紫 */
  --sf-deco-bd: #6b21a8;     /* 深紫边框 */
  --sf-deco-bg: rgba(88, 28, 135, 0.3); /* 背景填充 */
  
  /* 内容文字 */
  --sf-deco-fc: #e9d5ff;     /* 浅紫文字 */
  --sf-deco-fz: 28px;        /* 字号放大 */
  
  /* 发光增强 */
  --sf-deco-glow: #d8b4fe;   /* 发光色 */
  --sf-deco-glowop: 0.8;     /* 发光强度 */
}
</style>

变量字典 ​

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

变量名说明默认值
基础外观
--sf-deco-size组件基准尺寸 (不建议修改，请用 scale)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-glowop发光不透明度0.5
内容插槽
--sf-deco-fc插槽内文字/图标颜色var(--font-strong)
--sf-deco-fz插槽内文字默认大小24px
--sf-deco-fw插槽内文字粗细—

API 参考 ​

Props ​

属性名说明类型默认值
appearance外观变体。'A'(圆), 'B'(六边), 'C'(三角)String'A'
scale缩放比例。基于 80px 的倍率Number1
glow发光开关。是否开启滤镜光晕Booleantrue
glowRange发光范围Number10
glowOpacity发光不透明度Number—
borderd是否显示边框Booleantrue
decorationColorAlt装饰变体。交换高亮色与焦点色Booleanfalse
directionAlt方向变体。旋转/镜像几何图形Booleanfalse
backgroundOpacity背景不透明度Number—
className自定义类名String—

Slots ​

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