TechUI Docs

简中

EN

简中

EN

主题

ScifiDecoHive ​

⚡WASM 驱动
⭐明星组件

科幻装饰-蜂巢 是 TechUI Scifi Deco 系列中的六边形徽章组件。

它专注于 “六边形结构 (Hexagonal Structure)” 的深度演绎。在科幻 UI 设计语言中，六边形（蜂巢结构）是极致效率与结构稳定性的代名词，也是最标志性的视觉符号之一。

相比于 A1 中轻量化的基础六边形，B2 拥有更厚重的机械包边、更丰富的内部纹理以及复杂的多层嵌套结构。它仿佛是一个被加固的能量单元或高科技收纳盒，非常适合用于承载 技能树节点 (Skill Nodes)、物品栏格子 (Inventory Slots) 或 科技研发图标，能有效提升界面的“硬科幻”浓度。

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

基础用法 ​

默认形态 ​

默认情况下 (appearance="A")，B2 渲染为一个带有科技感边框的六边形容器。 组件内部插槽 (default slot) 会自动垂直水平居中。

vue
<template>
  <div class="hive-group">
    <ScifiDecoHive>
      <icon name="bi-box-seam" />
    </ScifiDecoHive>
    
    <ScifiDecoHive>
      <span class="level">LV.5</span>
    </ScifiDecoHive>
  </div>
</template>

外观变体 ​

B2 提供了四种六边形结构变体，视觉复杂度依次递增。

模式对比 ​

  • Type A (默认): 标准蜂巢。边框线条清晰，带有少量角部装饰，通用性最强。
  • Type B: 加固装甲。在六边形的角部增加了额外的加固模块，视觉上更坚固，适合防御类属性。
  • Type C: 双层力场。拥有内外双层线条，中间带有镂空或能量填充感，适合高阶技能。
  • Type D: 重型核心。最复杂的变体，填充面积大，带有上下机械咬合结构，适合作为“终极技能”或“核心科技”的图标。
vue
<template>
  <div class="grid">
    <ScifiDecoHive appearance="A">Standard</ScifiDecoHive>
    <ScifiDecoHive appearance="B">Armored</ScifiDecoHive>
    <ScifiDecoHive appearance="C">Double Layer</ScifiDecoHive>
    <ScifiDecoHive appearance="D">Ultimate</ScifiDecoHive>
  </div>
</template>

尺寸与布局 ​

固定尺寸与缩放 (Scale) ​

ScifiDeco 系列基于 80px x 80px 坐标系绘制。 请勿使用 CSS 修改宽高，必须使用 scale 属性进行无损缩放。六边形结构在阵列排列（蜂巢布局）时，缩放比例的统一尤为重要。

  • scale="1": 80px (默认)
  • scale="1.2": 96px (适合选中状态)
  • scale="0.8": 64px (适合密集阵列)
vue
<template>
  <div class="honeycomb-grid">
    <ScifiDecoHive v-for="i in 6" :key="i" :scale="0.8">
      <icon :name="`tech-${i}`" />
    </ScifiDecoHive>
  </div>
</template>

视觉定制 ​

辉光与氛围 ​

  • glow: 开启发光滤镜。六边形的锐角在发光时会产生非常漂亮的星芒效果。
  • glowRange: 控制光晕范围。
  • backgroundOpacity: 调整六边形内部的背景填充透明度。

配色变体 (Color Alt) ​

  • decorationColorAlt: 交换高亮色与焦点色。
  • 可用于区分“已解锁”与“未解锁”的科技，或者“主动技能”与“被动技能”。
vue
<template>
  <ScifiDecoHive 
    appearance="A" 
    :decorationColorAlt="true" 
    :backgroundOpacity="0.1"
    className="tech-locked"
  >
    <icon name="lock" />
  </ScifiDecoHive>
</template>

CSS变量 ​

通过 CSS 变量，您可以将 B2 定制为“赛博黄蜂”或“冰霜护盾”风格。

案例：赛博黄蜂风格 (Cyber Hive) ​

此案例定义了一个黄黑色调的工程风格蜂巢。

vue
<template>
  <ScifiDecoHive 
    appearance="C" 
    className="deco-hive"
    :scale="1.1"
  >
    <icon name="drone" />
  </ScifiDecoHive>
</template>

<style lang="less">
.deco-hive {
  /* 基础配色 */
  --sf-deco-hlite: #facc15;  /* 蜜蜂黄高亮 */
  --sf-deco-bd: #854d0e;     /* 暗金边框 */
  --sf-deco-bg: rgba(30, 20, 0, 0.6); /* 黑黄背景 */
  
  /* 内容文字 */
  --sf-deco-fc: #fef08a;     /* 浅黄文字 */
  
  /* 发光增强 */
  --sf-deco-glow: #eab308;   /* 金色光晕 */
  --sf-deco-glowop: 0.7;
}
</style>

变量字典 ​

以下是 ScifiDecoHive 支持的主要 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组件内容。会自动绝对居中显示。