TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelSentinel ​

⚡WASM 驱动
🏅原创

科幻面板-哨兵 是 TechUI Scifi 面板系列中的聚焦型装饰容器。

采用了经典的 “四角装甲 (Four-corner Armor)” 与 “光学锁定 (Optical Lock-on)” 设计语言。面板的四个角落被精密计算的 L 型几何装甲包裹，而边框中部留白 。这种独特的视觉结构创造了一种强烈的 “视线锁定感”，仿佛相机取景框或武器系统的锁定界面。

该组件能潜意识地将用户的注意力强制引导至容器的几何中心。由于摒弃了顶部标题栏的限制，它是包裹高权重独立内容（如实时监控流、3D 模型预览、核心关键指标）的绝佳选择，在不干扰内容本身的前提下，提供极强的军事工业风格修饰。

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

基础用法 ​

默认形态 ​

默认情况下，ScifiPanelSentinel 会渲染四个角的实心 L 型边框。它会自动适应内部内容的大小，或者跟随父容器的尺寸。

vue
<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelSentinel>
      <div class="content-box">
        <span class="text">System Ready</span>
      </div>
    </ScifiPanelSentinel>
  </div>
</template>

<style scoped>
.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
</style>

视觉变体 ​

B1 虽然结构简单，但通过调整边框厚度和装饰风格，可以呈现出截然不同的质感。

边框与厚度 (Border Width) ​

通过 borderWidth 可以控制四角线条的粗细。

  • 1-2px: 精密仪器风格，适合展示图表。
  • 3-5px: 重型装甲风格，适合强调防御属性。
vue
<template>
  <div class="grid">
    <ScifiPanelSentinel :borderWidth="1">
      <div class="p-4">Precision Mode</div>
    </ScifiPanelSentinel>

    <ScifiPanelSentinel :borderWidth="4">
      <div class="p-4">Armor Mode</div>
    </ScifiPanelSentinel>
  </div>
</template>

装饰变体 (Decoration Alt) ​

decorationAlt 属性控制角部的具体渲染逻辑。

  • False (默认): 标准的实心 L 型角块。
  • True: 切换为镂空线条或双线切割风格，视觉上更加轻盈、透气，适合叠加在复杂的地图背景上。
vue
<template>
  <ScifiPanelSentinel :decorationAlt="true">
    <MapComponent />
  </ScifiPanelSentinel>
</template>

发光效果 (Glow) ​

开启 glow 属性后，面板边缘会产生高亮的外发光效果。这是营造“赛博朋克”或“全息投影”风格的关键属性。

vue
<template>
  <ScifiPanelSentinel 
    :glow="true" 
    :glowOpacity="0.8"
    :backgroundOpacity="0.6"
  >
    <div class="warning-text">HOLOGRAPHIC VIEW</div>
  </ScifiPanelSentinel>
</template>

CSS变量 ​

B1 的“锁定框”形态非常适合制作战术风格的界面。通过传入 className 并覆盖 CSS 变量，我们可以轻松定义出“夜视仪”或“战术终端”风格。

案例：战术夜视风格 (Tactical Night) ​

这种风格使用高饱和度的荧光绿，模拟夜视仪或老式雷达的视觉效果。

vue
<template>
  <ScifiPanelSentinel 
    className="panel-tactical"
    :decorationAlt="true"
    :glow="true"
    :backgroundBlur="true"
  >
    <div class="radar-view">
      <icon name="target" /> TARGET LOCKED
    </div>
  </ScifiPanelSentinel>
</template>

<style lang="less">
/* 自定义战术夜视风格 */
.panel-tactical {
  /* 边框：荧光绿 */
  --sf-panel-bd: #00ff00;
  
  /* 背景：极深绿半透明 */
  --sf-panel-bg: rgba(0, 20, 0, 0.6);
  
  /* 发光：绿色光晕 */
  --sf-panel-glow: #00ff00;
  
  /* 装饰高亮：白绿 */
  --sf-panel-hlite: #ccffcc;
}
</style>

组合使用 ​

搭配标题组件 ​

由于 B1 本身不带标题，您可以将其与 ScifiPanelTitle 组合使用，实现“标题悬浮于容器之上”的布局。

vue
<template>
  <div class="complex-module">
    <div class="module-header">
      <ScifiPanelTitle text="MONITOR FEED" />
    </div>
    
    <ScifiPanelSentinel :decorationAlt="true">
      <VideoPlayer />
    </ScifiPanelSentinel>
  </div>
</template>

API 参考 ​

Props ​

属性名说明类型默认值
decoration是否显示四角的装饰元素Booleantrue
decorationAlt装饰变体。是否切换为镂空/线条角部样式Booleanfalse
borderd是否显示连接四角的边框线Booleantrue
borderWidth边框/角部线条的宽度 (px)Number—
backgroundOpacity背景颜色的不透明度 (0-1)Number—
backgroundBlur是否开启背景毛玻璃效果Booleanfalse
glow是否开启外发光滤镜Booleanfalse
glowOpacity外发光的不透明度 (0-1)Number—
scale整体缩放比例Number1
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)