ScifiDeco 装饰容器

TechUI Scifi 系列中的微型装饰性容器。

与 ScifiPanel 用于包裹大块内容不同，ScifiDeco 专为微型元素设计。它们通常拥有固定的纵横比（默认 1:1），通过 SVG 几何图形来包裹 图标 (Icon) 或 关键数字 (Counter)，是构建 HUD（抬头显示器）界面细节的核心组件。

核心特性

• 固定尺寸与缩放: 除 C1 外，所有 Deco 组件的内部 SVG 节点均为固定尺寸（默认 80px）。调整大小不通过 width/height，而是推荐使用 scale 属性进行整体无损缩放。
• 绝对居中: 组件内部预设了绝对定位的插槽，会自动将内容（图标/文字）垂直水平居中。
• 几何分类: 提供圆形、六边形、三角形等多种基础几何形态，方便构建阵列。

关于命名与别名

为了平衡开发稳定性与代码可读性，TechUI Scifi 装饰组件采用了双重命名策略。每个组件都拥有一个固定的原始序列名和一个语义化的别名。

• 原始序列名 (Fixed Serial Name)
  • 例如：ScifiDecoA1、ScifiDecoB2
  • 这是组件的底层物理 ID，基于开发序列命名（A系列为基础型，B系列为徽章型，C系列为自适应型）。它是永久固定且不可变更的。
• 语义化别名 (Semantic Alias)
  • 例如：ScifiDecoRune、ScifiDecoHive
  • 这是基于外观风格或设计隐喻命名的快捷方式（例如：Rune/鲁恩符文、Hive/蜂巢），旨在提高代码的可读性。

注意：随着设计语言的演进，个别别名可能会在后期版本中进行语义微调或更名。虽然我们会尽量保持兼容，但在跨大版本升级时请留意相关变更日志。

组件家族

ScifiDecoRune (几何基座)

关键词： Hexagon · Triangle · Circle · Basic

ScifiDecoRune 是基础几何形状的合集。它包含了六边形、三角形和圆形的简约变体。非常适合作为技能图标底座、属性点容器或简单的状态指示灯。

• Appearance 变体: 包含 A / B / C 三种模式，分别对应不同的几何构造（如实心、描边、双层）。

<template>
  <div class="hud-group">
    <ScifiDecoRune appearance="B" :scale="1.2">
      <icon name="bi-hexagon" />
    </ScifiDecoRune>
    
    <ScifiDecoRune appearance="C">
      <span class="num">39</span>
    </ScifiDecoRune>
  </div>
</template>

ScifiDecoB 系列 (科技徽章)

关键词： High-Tech · Frame · Status

B 系列是设计感极强的重型徽章。它们在基础几何上增加了复杂的机械细节、能量槽和发光回路，视觉权重较高。

ScifiDecoOrb (圆形核心)

• 形态: 圆形 / 环形设计。
• 变体: 支持 A / B / C / D 四种外观。
• 场景: 适合作为核心能量球、雷达缩略图或 Start 按钮的外框。

ScifiDecoHive (六边蜂巢)

• 形态: 六边形设计。
• 变体: 支持 A / B / C / D 四种外观。
• 场景: 适合蜂巢状布局的技能树、科技升级图标。

ScifiDecoPrism (三角警示)

• 形态: 三角形设计。
• 变体: 支持 A / B / C / D 四种外观。
• 场景: 适合危险警示、方向指示或特殊属性标识。

<template>
  <div class="status-bar">
    <ScifiDecoOrb appearance="A" :glow="true">
      <icon name="nuclear" />
    </ScifiDecoOrb>
    
    <ScifiDecoHive appearance="C" :scale="0.8">
      <span class="level">LV.9</span>
    </ScifiDecoHive>
  </div>
</template>

ScifiDecoPair (自适应括号)

关键词： Adaptive · Brackets · HUD · Label

ScifiDecoPair 是 Deco 系列中的特例。

• 自适应宽度: 它没有固定的背景几何，而是由左右两侧的“括号”或“光标”组成。容器宽度可变，会根据内部文字长度自动撑开（类似 Button）。
• 无背景: 默认无背景填充，强调通透感。
• 场景: 适合包裹长短不一的标签、数字读数或作为标题的修饰符。
• 变体: 支持 A / B / C / D / E 五种外观。

<template>
  <ScifiDecoPair appearance="A">
    <span class="label">SYSTEM ONLINE</span>
  </ScifiDecoPair>
  
  <ScifiDecoPair appearance="B" :decorationColorAlt="true">
    <span class="warning">ERROR: 404</span>
  </ScifiDecoPair>
</template>

视觉定制

尺寸与缩放 (Scale)

对于 A 和 B 系列，请勿设置 CSS width/height。请使用 scale 属性进行缩放。

• scale="1" (默认): 对应 80px 尺寸。
• scale="0.5": 对应 40px 尺寸。
• scale="1.5": 对应 120px 尺寸。

<template>
  <ScifiDecoOrb :scale="0.5">
    <icon name="small" />
  </ScifiDecoOrb>
</template>

装饰配色 (Decoration Color)

• decorationColorAlt: 交换高亮色与焦点色。
• False (默认): 边框/主体使用高亮色 (Highlight)，辅助细节使用焦点色 (Focus)。
• True: 反转配色。常用于表示“警告”或“特殊状态”。

辉光与方向

• glow: 开启 SVG 滤镜发光。
• directionAlt: 部分组件（如 A1 的某些变体）支持方向反转或旋转。

API 参考

Props

属性名	说明	类型	默认值
appearance	外观变体。不同组件支持范围不同 (A-E)	String	'A'
scale	缩放比例。A/B系列调整大小的推荐方式	Number	1
borderd	是否显示边框/装饰线条	Boolean	true
glow	是否开启发光滤镜	Boolean	true
glowRange	发光扩散范围	Number	10
glowOpacity	发光不透明度	Number	—
decorationColorAlt	装饰变体。是否交换高亮色与焦点色	Boolean	false
directionAlt	方向变体。部分组件支持镜像或旋转	Boolean	false
backgroundOpacity	背景不透明度	Number	—
className	自定义类名	String	—

CSS Variables

变量名	说明	默认值
--sf-deco-hlite	装饰高亮色	var(--scifi-hlite)
--sf-deco-focus	辅助装饰色	var(--scifi-focus)
--sf-deco-bg	背景填充色	var(--scifi-bg)
--sf-deco-bd	边框颜色	var(--scifi-bd)
--sf-deco-fc	内容插槽文字颜色	var(--font-strong)
--sf-deco-fz	内容插槽默认字号	24px
--sf-deco-size	组件基准尺寸 (A/B系列)	80px