TechUI Docs

简中

EN

简中

EN

主题

ScifiDecoPair ​

⚡WASM 驱动

科幻装饰-双子 是 TechUI Scifi Deco 系列中的自适应标注组件。

ScifiDecoC1 (ScifiDecoPair) 是该系列中唯一采用 “内容响应 (Content-Aware)” 逻辑的装饰器。与 A/B 系列强制固定的 80px 物理尺寸不同，C1 的核心设计理念在于 “双向约束 (Bidirectional Constraint)”。

在视觉上，它由左右两侧独立的 SVG 机械括弧 构成。这些括弧犹如一对孪生双子，会自动吸附在内部内容的两侧，无论内容是短小的图标还是冗长的动态数字，它都能实现完美的弹性包裹。

这种 无背景 (No-Background) 且 强包裹感 的设计，是构建 HUD (平视显示器) 风格界面的灵魂。它非常适合用于展示 动态变化的长数值、系统状态标签 或 关键战术指令。在不遮挡底层画面的前提下，通过括弧的视觉收束力，赋予信息极强的可读性与科技仪式感。

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

基础用法 ​

默认形态 ​

默认情况下 (appearance="A")，C1 渲染为一对简约的圆弧括号。 组件没有背景填充，视觉非常通透，完全专注于突显内容。

vue
<template>
  <div class="hud-layer">
    <ScifiDecoPair>
      <span class="data">369,842</span>
    </ScifiDecoPair>
    
    <ScifiDecoPair appearance="B">
      <span class="label">TARGET LOCKED</span>
    </ScifiDecoPair>
  </div>
</template>

外观变体 ​

C1 提供了五种不同风格的括号，适配从极简到重装的各种 UI 风格。

模式对比 ​

  • Type A (默认): 圆弧括号 (Curved)。类似圆括号 ( ) 的科技化变体，线条柔和，适合通用数据。
  • Type B: 折角括号 (Chevron)。类似尖括号 < >，线条硬朗，具有方向感。
  • Type C: 矩形卡扣 (Square)。类似方括号 [ ]，带有明显的机械卡扣细节，适合系统日志或参数。
  • Type D: 双层瞄准 (Dual)。双层线条结构，模拟精密瞄准镜的刻度。
  • Type E: 重型夹具 (Clamp)。垂直高度更高，带有上下延伸的机械翼，适合包裹多行内容或大号标题。
vue
<template>
  <div class="list">
    <ScifiDecoPair appearance="A">Type A</ScifiDecoPair>
    <ScifiDecoPair appearance="B">Type B</ScifiDecoPair>
    <ScifiDecoPair appearance="C">Type C</ScifiDecoPair>
    <ScifiDecoPair appearance="D">Type D</ScifiDecoPair>
    <ScifiDecoPair appearance="E">Type E</ScifiDecoPair>
  </div>
</template>

尺寸与自适应 ​

宽度自适应 ​

C1 的宽度完全由内容决定。

  • 如果内容很短（如一个图标），括号会靠得很近。
  • 如果内容很长（如一行文字），括号会自动向两侧延伸。

整体缩放 (Scale) ​

虽然宽度是动态的，但括号本身的“大小”（线条粗细、高度、曲率）可以通过 scale 属性进行整体缩放。

  • scale="1": 默认大小。
  • scale="1.5": 括号变得更大、更粗，适合作为主标题修饰。
vue
<template>
  <ScifiDecoPair appearance="D" :scale="1.5">
    <h1 class="title">WARNING</h1>
  </ScifiDecoPair>
</template>

视觉定制 ​

辉光与氛围 ​

  • glow: 开启发光滤镜。由于 C1 线条纤细且无背景，开启发光能显著提升其在深色背景下的可见度。
  • decorationColorAlt: 交换高亮色与焦点色。
  • 可用于区分“正常数值”与“异常数值”。

无背景设计 ​

C1 默认设计为无背景 (Transparent)，这意味着它不会遮挡底层的地图或模型，非常适合悬浮在 3D 场景之上。如果您强制设置 backgroundOpacity，它通常只会影响微弱的装饰底纹（取决于具体 Appearance 实现），而不会产生实心色块。

vue
<template>
  <ScifiDecoPair 
    appearance="B" 
    :decorationColorAlt="true" 
    :glowRange="15"
  >
    <span class="error">CRITICAL FAILURE</span>
  </ScifiDecoPair>
</template>

CSS变量 ​

通过 CSS 变量，您可以调整括号的颜色以匹配 HUD 的整体色调。

案例：战术蓝风格 (Tactical Blue) ​

此案例定义了一个经典的蓝色 HUD 样式。

vue
<template>
  <ScifiDecoPair 
    appearance="C" 
    className="deco-hud"
  >
    <span>COORDINATES: 45.91, 12.04</span>
  </ScifiDecoPair>
</template>

<style lang="less">
.deco-hud {
  /* 基础配色 */
  --sf-deco-hlite: #38bdf8;  /* 天蓝高亮 */
  --sf-deco-bd: #0c4a6e;     /* 深蓝辅助线 */
  
  /* 内容文字 */
  --sf-deco-fc: #e0f2fe;     /* 极浅蓝文字 */
  --sf-deco-fz: 16px;        /* 调整字号 */
  
  /* 发光增强 */
  --sf-deco-glow: #0ea5e9;   /* 蓝色光晕 */
  --sf-deco-glowop: 0.8;
}
</style>

变量字典 ​

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

变量名说明默认值
基础外观
--sf-deco-bg(通常无效) 极少数变体的微弱底纹var(--scifi-bg)
--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' - 'E' (五种不同括号风格)String'A'
scale缩放比例。整体缩放括号的大小与粗细Number1
glow发光开关。是否开启滤镜光晕Booleantrue
glowRange发光范围Number10
glowOpacity发光不透明度Number—
decorationColorAlt装饰变体。交换高亮色与焦点色Booleanfalse
className自定义类名String—

Slots ​

插槽名说明
default组件内容。容器宽度将随此内容的宽度自动伸缩。