TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelAlpha ​

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

科幻面板-阿尔法 是 TechUI Scifi 面板家族中的开山之作与核心旗舰。作为 TechUI 首款完全自主研发的科幻面板，它不仅拥有全系列最丰富的形态变体，更奠定了 Scifi 系列标志性的 “切角标题 (Chamfer-Label)” 设计语言。

依托于 Wasm/SVG 的精密路径计算，该组件实现了一个智能感知的切角容器。其核心亮点在于卓越的几何变换能力——通过 rotate（旋转）与 directionAlt（方向变体）属性的各种组合，标题栏可以精准锚定在矩形容器的任意四个角落。

它能衍生出多达 16种 截然不同的视觉形态，完美适配各类复杂的仪表盘布局需求。

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

基础用法 ​

默认形态 ​

默认状态下，切角标题位于面板的左上角。这是最符合阅读习惯的形态，适合作为常规的数据卡片容器。

vue
<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelAlpha title="基础标题">
      <div class="content-area">
        面板内容...
      </div>
    </ScifiPanelAlpha>
  </div>
</template>

标题适配 ​

由于面板的几何路径是基于 SVG 数学计算绘制的，组件无法像普通 HTML 元素那样自动根据文字长度撑开标题栏宽度。精准控制标题宽度是使用好 A1 的关键。

  • title: 标题文本内容。
  • titleWidth: 标题区域的物理宽度（像素）。默认值为 150。

适配原则

如果您的标题文字较长（超过 4-5 个中文字符），或者使用了字号较大的字体，必须手动增加 titleWidth，否则文字会溢出切角背景。

vue
<template>
  <div class="grid">
    <ScifiPanelAlpha title="系统状态" />

    <ScifiPanelAlpha 
      title="辅助能源系统监测" 
      :titleWidth="220" 
    />

    <ScifiPanelAlpha 
      title="第 7 区外部环境实时监控数据中心" 
      :titleWidth="380" 
    />
  </div>
</template>

四角定位 ​

通过组合 directionAlt 和 rotate 属性，您可以将标题栏放置在面板的任何角落。

左上角 (Top-Left) ​

  • Default: 标准形态。
  • DirectionAlt: 切角逻辑反转（通常表现为内切变外切，或切角方向改变）。
vue
<template>
  <ScifiPanelAlpha title="左上标准" />
  <ScifiPanelAlpha title="左上变体" :directionAlt="true" />
</template>

右上角 (Top-Right) ​

  • Rotate Y: 沿 Y 轴镜像翻转。文字会自动纠正方向，保持可读。
  • DirectionAlt: 结合 directionAlt 可实现视觉上的平移效果。
vue
<template>
  <ScifiPanelAlpha title="右上镜像" rotate="y" />
</template>

左下角 (Bottom-Left) ​

  • Rotate X: 沿 X 轴镜像翻转。标题栏跑到底部。
vue
<template>
  <ScifiPanelAlpha title="左下布局" rotate="x" />
</template>

右下角 (Bottom-Right) ​

  • Rotate Z: 中心旋转 180 度（或 XY 轴同时翻转）。
vue
<template>
  <ScifiPanelAlpha title="右下布局" rotate="z" />
</template>

CSS变量 ​

ScifiPanelAlpha 提供了强大的 CSS 变量接口。通过传入 className，您可以覆盖组件内部定义的 CSS 变量，从而实现换肤效果。

这在需要区分“正常”、“警告”、“故障”等不同状态的面板时非常有用。

案例：红色警戒风格 ​

vue
<template>
  <ScifiPanelAlpha 
    title="DANGER ZONE" 
    className="panel-danger"
    :glow="true"
    :glowOpacity="0.8"
  >
    <div class="error-msg">检测到入侵信号</div>
  </ScifiPanelAlpha>
</template>

<style lang="less">
/* 自定义 Danger 风格 */
.panel-danger {
  /* 边框颜色：鲜红 */
  --sf-panel-bd: #ff4d4f;
  
  /* 背景颜色：深红半透明 */
  --sf-panel-bg: rgba(60, 0, 0, 0.85);
  
  /* 字体颜色：白色 */
  --sf-panel-fc: #ffffff;
  
  /* 发光颜色：红色光晕 */
  --sf-panel-glow: #ff0000;
  
  /* 装饰/高亮部分颜色：橙红 */
  --sf-panel-hlite: #ff9c6e;
}
</style>

案例：黑客矩阵风格 ​

vue
<template>
  <ScifiPanelAlpha 
    title="MATRIX CORE" 
    className="panel-matrix"
    :decorationAlt="true"
  >
    <div class="code-flow">System Call...</div>
  </ScifiPanelAlpha>
</template>

<style lang="less">
.panel-matrix {
  --sf-panel-bd: #00ff00;       /* 亮绿边框 */
  --sf-panel-bg: rgba(0, 20, 0, 0.9); /* 深绿背景 */
  --sf-panel-fc: #00ff00;       /* 绿色文字 */
  --sf-panel-hlite: #ccffcc;    /* 亮绿高光 */
}
</style>

视觉变体 ​

除了 CSS 换肤，组件还提供了 Props 级别的几何变体。

镂空装饰 (Decoration Alt) ​

开启 decorationAlt 后，标题栏背景由“实心色块”变为“线条镂空”或“虚实结合”。这种风格视觉重量更轻，适合悬浮在地图或复杂背景之上。

vue
<template>
  <div class="grid">
    <ScifiPanelAlpha title="Solid Style" />

    <ScifiPanelAlpha title="Hollow Style" :decorationAlt="true" />
    
    <ScifiPanelAlpha title="Alt Color" :decorationColorAlt="true" />
  </div>
</template>

边框与光效 ​

  • borderWidth: 增加边框厚度可营造“重型装甲”感。
  • borderd: 设置为 false 可隐藏边框，仅保留标题切角。
  • glow: 开启全局外发光（消耗一定性能，建议按需开启）。

API 参考 ​

Props ​

属性名说明类型默认值
title面板标题内容String—
titleWidth标题区域宽度 (px)，需根据字数手动调整Number150
directionAlt方向变体。改变切角的起始逻辑Booleanfalse
rotate几何旋转。支持 'x'(上下), 'y'(左右), 'z'(对角)String—
decoration是否显示装饰元素Booleantrue
decorationAlt装饰变体。切换为镂空/线条风格Booleanfalse
decorationColorAlt是否启用装饰色的变体配色Booleanfalse
borderWidth边框线条宽度 (px)Number—
borderd是否显示边框Booleantrue
backgroundOpacity背景不透明度 (0-1)Number—
glow是否开启外发光滤镜Booleanfalse
glowRange外发光扩散范围 (px)Number—
glowOpacity外发光强度 (0-1)Number—
scale整体缩放比例Number1
className自定义容器类名，用于绑定 CSS 变量String—

CSS Variables ​

您可以在组件的父级或通过 className 覆盖以下变量，以控制组件的配色与外观。

变量名说明默认值参考
--sf-panel-bg面板背景填充色var(--scifi-bg)
--sf-panel-bgop背景不透明度var(--cpt-panel-bgop, 1)
--sf-panel-bd边框线条颜色var(--scifi-bd)
--sf-panel-bdw边框线条宽度var(--cpt-panel-bdw, 1px)
--sf-panel-fc标题文字颜色var(--scifi-fc)
--sf-panel-hlite高光颜色var(--scifi-hlite)
--sf-panel-focus焦点颜色var(--scifi-focus)
--sf-panel-glow内发光颜色var(--scifi-focus)
--sf-panel-glowop内发光不透明度var(--cpt-panel-glowop, .5)
--sf-panel-shadow容器阴影var(--shadow-weak)
--sf-panel-scale整体缩放比例var(--cpt-panel-scale)