ScifiGeometry 几何图形综述

TechUI Scifi Geometry 是一组基于 SVG 绘制的纯几何背景组件。

不同于 ScifiPanel 用于构建页面的主布局框架，ScifiGeometry 系列定位为 HUD (平视显示器) 风格的辅助信息容器。它们拥有更纯粹的几何形态（六边形、梯形、平行四边形等），体积轻量，专门用于构建复杂的数据大屏与可视化界面。

动态几何原理

ScifiGeometry 系列与传统 SVG 图片素材最大的区别在于其 全参数化数学建模 (Parametric Modeling)。

组件内部不包含任何静态的 SVG 路径数据。所有的图形路径（Path Data）都是利用数学公式，根据您传入的 width 和 height 参数实时计算生成的。

动态计算: 组件监听 width 和 height 的变化，利用三角函数与线性代数公式实时解算每一个顶点的 (x, y) 坐标。这意味着您可以任意改变容器的长宽比（例如将六边形拉长成条状），图形依然能保持正确的几何逻辑，而不会像普通图片那样发生拉伸变形。
智能约束: 内置算法包含几何约束逻辑。例如，当矩形极度缩小时，切角（Chamfer）尺寸会自动限制以防止图形“破裂”；平行四边形的倾斜角度会根据高度自动补偿，以保证视觉统一。
无限精度: 由于是基于数学公式的实时渲染，无论是在 1080P 还是 8K 分辨率的大屏上，图形边缘永远保持绝对清晰锐利。

组件家族

本系列包含 5 个基础组件，采用所见即所得的形状命名法。

ScifiHexagon (六边形)

关键词： Honeycomb · Core · Stable

最经典的科幻元素。六边形结构稳定且易于阵列排列。

计算逻辑: 根据宽高动态计算六个顶点的坐标，保持中心对称。
适用场景: 核心指标数值背景、蜂巢状数据阵列、雷达图底座。
变体: 支持 directionAlt 旋转方向（尖角朝上/平边朝上）。

ScifiParallelogram (平行四边形)

关键词： Speed · List · Dynamic

带有倾斜角的矩形，视觉上具有动感。

计算逻辑: 基于高度和倾斜角度公式计算偏移量 skew，动态生成四个顶点。
适用场景: 列表项背景、时间轴节点、具有方向指引性的数据块。
变体: directionAlt 可控制倾斜方向（左倾/右倾）。

ScifiRectangle (切角矩形)

关键词： Card · General · Chamfer

通用的矩形背景，但通过 SVG 实现了特殊的切角处理。

计算逻辑: 动态计算四个角的切角坐标。开启 cornerAlt 时，算法会增加额外的顶点以形成复杂的机械切角。
适用场景: 通用信息卡片、弹窗背景、文本块容器。

ScifiTrapezoid (梯形)

关键词： Base · Support · Tab

上窄下宽或上宽下窄的形态，具有很强的支撑感。

计算逻辑: 根据设定的“腰”斜率动态计算顶边与底边的宽度差。
适用场景: 底部数据托盘、顶部导航标签 (Tab)、悬浮标题底座。
变体: directionAlt 可切换正梯形与倒梯形。

ScifiTriangle (三角形)

关键词： Warning · Pointer · Sharp

锐利的几何形态，视觉冲击力强。

计算逻辑: 基于底边宽度和高度，利用三角几何计算顶点位置。
适用场景: 警示信息背景、方向指针、特殊状态标识。
变体: directionAlt 可切换正三角与倒三角。

视觉定制

渐变背景

开启 gradientBackground 后，组件背景将从 bg (主背景色) 渐变到 bg_alt (辅助背景色)。

gradientReverse: 反转渐变方向。
配置: 通过 CSS 变量 --sf-geom-bg 和 --sf-geom-bg_alt 定义颜色。

vue

<template>
  <ScifiHexagon 
    :gradientBackground="true" 
    className="geom-grad"
  />
</template>

<style>
.geom-grad {
  --sf-geom-bg: rgba(0, 100, 255, 0.2);
  --sf-geom-bg_alt: rgba(0, 255, 200, 0.8); /* 渐变目标色 */
}
</style>

双层装饰 (Decoration Alt)

开启 decorationAlt 会在主图形下方复制一层“幽灵层” (.sf-deco-b-elem)。这层装饰通常用于制作双重边框、阴影错位或悬浮效果。

微调 API: 由于几何图形是动态计算的，我们开放了以下 Props 供您精细调整装饰层相对于主图形的位置：

decoAltScale: 装饰层缩放比例 (如 1.04)。
decoAltTransX: X 轴位移 (px)。
decoAltTransY: Y 轴位移 (px)。

vue

<template>
  <ScifiHexagon 
    :decorationAlt="true"
    :decoAltScale="1.04"
    :decoAltTransX="5"
    :decoAltTransY="3"
  />
</template>

API 参考

通用 Props

所有 ScifiGeometry 组件共享以下属性配置。

属性名	说明	类型	默认值
width / height	尺寸。用于几何公式计算的基准宽高	`Number`	`300` / `150`
borderWidth	边框宽度 (px)	`Number`	—
borderd	是否显示边框	`Boolean`	`true`
glow	发光开关。开启高斯模糊光晕	`Boolean`	`true`
glowRange	发光范围	`Number`	—
backgroundOpacity	背景不透明度	`Number`	—
gradientBackground	渐变开关。开启线性渐变	`Boolean`	`false`
gradientReverse	反转渐变方向	`Boolean`	`false`
directionAlt	方向变体。旋转/倒置/倾斜方向	`Boolean`	`false`
decorationAlt	双层装饰。开启幽灵装饰层	`Boolean`	`false`
decoAltScale	装饰层缩放比例	`Number`	—
decoAltTransX/Y	装饰层位移 (X/Y)	`Number`	—
cornerAlt	角部变体。切换切角/加固风格	`Boolean`	`false`
shadowType	投影类型。`'drop'`, `'t3d'`, `'none'`	`String`	`'drop'`
className	自定义类名	`String`	—

CSS Variables

变量名	说明	默认值
--sf-geom-bg	主背景色 (及渐变起点)	`var(--scifi-bg)`
--sf-geom-bg_alt	辅助背景色 (渐变终点)	`var(--scifi-bg_alt)`
--sf-geom-bd	边框颜色	`var(--scifi-bd)`
--sf-geom-hlite	高亮色 (通常用于 Decoration)	`var(--scifi-hlite)`
--sf-geom-focus	焦点色 (通常用于装饰层)	`var(--scifi-focus)`
--sf-geom-glow	发光颜色	`var(--scifi-hlite)`
--sf-geom-shadow	投影颜色	`var(--shadow-weak)`

ScifiGeometry 几何图形综述 ​

动态几何原理 ​

组件家族 ​

ScifiHexagon (六边形) ​

ScifiParallelogram (平行四边形) ​

ScifiRectangle (切角矩形) ​

ScifiTrapezoid (梯形) ​

ScifiTriangle (三角形) ​

视觉定制 ​

渐变背景 ​

双层装饰 (Decoration Alt) ​

API 参考 ​

通用 Props ​

CSS Variables ​