ScifiPanelVanguard

⚡WASM 驱动

⭐明星组件

🏅原创

科幻面板-先锋 是 TechUI Scifi 面板系列中极具张力的结构化组件。如果说 A1 代表了流线型的优雅，那么 A2 则代表了锐意进取与工业精密。

ScifiPanelA2 摒弃了常规的流线型切角，转而采用独特的 “内陷式凹槽 (Recessed Notch)” 设计语言。从视觉上看，标题文字并非悬浮于表面，而是被物理“镶嵌”在面板之中 。这种如同先锋队般硬朗且犀利的视觉风格，赋予了组件极强的结构感与功能性暗示，非常适合用于展示关键指标或作为工业控制台的容器。

继承了该系列的几何变换引擎，A2 同样拥有卓越的布局适应能力。通过 rotate（旋转）和 directionAlt（方向变体）的组合，您可以将这个极具辨识度的“标题凹槽”灵活部署在面板的任意四个角落，完美适应各种复杂的工业仪表盘布局。

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

基础用法

默认形态

默认情况下，标题凹槽位于面板的左上角。槽口的宽度会根据 titleWidth 自动计算 SVG 路径，确保文字被完美包裹。

<template>
  <div style="width: 450px; height: 300px;">
    <ScifiPanelVanguard title="主引擎状态">
      <div class="content-display">
        <ChartEngineLoad />
      </div>
    </ScifiPanelVanguard>
  </div>
</template>

标题适配

A2 的标题不仅是一个标签，更是一个物理凹槽。凹槽的长度直接决定了面板边缘的几何形状。

• title: 嵌入凹槽的文本。
• titleWidth: 凹槽的物理宽度 (px)。

适配关键

凹槽是刚性结构。如果文字过长而 titleWidth 设置不足，文字将会溢出凹槽边界，导致视觉穿模。请务必根据文字长度调整此值。

<template>
  <div class="grid">
    <ScifiPanelVanguard 
      title="信号" 
      :titleWidth="80" 
    />

    <ScifiPanelVanguard 
      title="防御系统" 
      :titleWidth="150" 
    />

    <ScifiPanelVanguard 
      title="辅助能源模块 B-03 状态" 
      :titleWidth="260" 
    />
  </div>
</template>

四角定位

通过几何变换，您可以将“标题凹槽”移动到矩形的任意角落。

左上角 (Top-Left)

• Default: 标准凹槽。
• DirectionAlt: 起始点反转（通常表现为凹槽位置的水平镜像偏移，变为右上）。

右上角 (Top-Right)

• DirectionAlt: true (推荐方式，直接将槽口变位到右上)。
• Rotate Y: 沿 Y 轴镜像翻转。

<template>
  <ScifiPanelVanguard title="右上布局" :directionAlt="true" />
  
  <ScifiPanelVanguard title="右上镜像" rotate="y" />
</template>

左下角 (Bottom-Left)

• Rotate X: 沿 X 轴翻转，槽口移至底部。

<template>
  <ScifiPanelVanguard title="左下监控" rotate="x" />
</template>

右下角 (Bottom-Right)

• Rotate Z: 中心旋转 180 度。

<template>
  <ScifiPanelVanguard title="右下署名" rotate="z" />
</template>

CSS变量

A2 的硬朗风格非常适合高对比度的配色。通过覆盖 CSS 变量，您可以打造出“高压警告”、“军事隐形”等不同主题。

案例：琥珀警告风格 (Industrial Amber)

这种风格常用于工业控制系统中的“注意”或“警告”状态。

<template>
  <ScifiPanelVanguard 
    title="HIGH VOLTAGE" 
    className="panel-amber"
    :decorationAlt="true"
    :borderWidth="2"
  >
    <div class="warning-content">
      <icon name="electricity" /> 警告：高压区域
    </div>
  </ScifiPanelVanguard>
</template>

<style lang="less">
/* 自定义琥珀色工业风格 */
.panel-amber {
  /* 边框：橙黄色 */
  --sf-panel-bd: #f59e0b;
  
  /* 背景：深褐色半透明 */
  --sf-panel-bg: rgba(40, 20, 0, 0.85);
  
  /* 文字：亮黄 */
  --sf-panel-fc: #fcd34d;
  
  /* 装饰高亮：白色或浅黄 */
  --sf-panel-hlite: #ffffff;
  
  /* 发光：橙色光晕 */
  --sf-panel-glow: #d97706;
}
</style>

视觉变体

精密装饰 (Decoration Alt)

A2 的 decorationAlt 会改变槽口附近的刻度细节。

• False (默认): 简洁的单层刻度。
• True: 更复杂的双层/虚线刻度，增加精密仪器的感觉。

<template>
  <div class="grid">
    <ScifiPanelVanguard title="Standard" />

    <ScifiPanelVanguard 
      title="Precision" 
      :decorationAlt="true" 
    />
  </div>
</template>

赛博霓虹 (Glow)

凹槽结构在开启发光 (glow) 后，立体感会显著增强。边缘的线条仿佛被激光蚀刻出来一样。

<template>
  <ScifiPanelVanguard 
    title="CYBER LINK" 
    :glow="true"
    :glowOpacity="1"
    className="panel-neon"
  />
</template>

API 参考

Props

属性名	说明	类型	默认值
title	凹槽标题。嵌入在面板边缘的文本	String	—
titleWidth	凹槽宽度 (px)。决定 SVG 路径的缺口大小，需手动适配文字长度	Number	150
rotate	几何旋转。支持 'x', 'y', 'z'	String	—
directionAlt	方向变体。反转槽口的起始位置 (如左上变右上)	Boolean	false
decoration	是否显示槽口旁的刻度装饰	Boolean	true
decorationAlt	装饰变体。切换为更复杂的精密刻度样式	Boolean	false
decorationColorAlt	是否启用装饰色的变体配色	Boolean	false
borderWidth	边框线条宽度 (px)	Number	—
borderd	是否显示边框	Boolean	true
backgroundOpacity	背景不透明度 (0-1)	Number	—
glow	是否开启外发光滤镜	Boolean	false
glowRange	外发光扩散范围	Number	—
glowOpacity	外发光强度	Number	—
scale	整体缩放比例	Number	1
className	自定义容器类名	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)