TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelPawn ​

⚡WASM 驱动
🏅原创

科幻面板-帕恩 是 TechUI Scifi 面板系列中的轻量化战术容器。

它采用了极简的 “对称切角” 设计语言。默认状态下，它仅由两个角落的 斜切短线 (Diagonal Slits) 构成 。这种极度克制的设计极大地减少了视觉干扰，最大程度地保留了容器内部内容的通透度。

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

基础用法 ​

默认形态 ​

默认情况下，B3 会在四个角落渲染斜切式的短线。它会自动适应内部内容的大小。这种斜切设计比直角更加动感，具有一种“正在锁定”的动态势能。

vue
<template>
  <div style="width: 300px; height: 200px;">
    <ScifiPanelPawn>
      <div class="target-box">
        <span class="label">TARGET DETECTED</span>
      </div>
    </ScifiPanelPawn>
  </div>
</template>

<style scoped>
.target-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #00eeff;
  letter-spacing: 2px;
}
</style>

视觉变体 ​

B3 的核心在于角部形态的切换，它可以在“敏捷”与“稳重”之间自由变换。

装饰变体 (Decoration Alt) ​

decorationAlt 是 B3 风格切换的关键属性。

  • False (默认): 斜切角标。视觉锐利，科技感强，像飞机的 HUD 界面。
  • True: 直角 L 型角标。视觉更稳重，类似传统的取景器边框，包裹感更强。
vue
<template>
  <div class="grid">
    <ScifiPanelPawn>
      <div class="p-4">Agile Mode</div>
    </ScifiPanelPawn>

    <ScifiPanelPawn :decorationAlt="true">
      <div class="p-4">Stable Mode</div>
    </ScifiPanelPawn>
  </div>
</template>

极简与加粗 (Border Width) ​

通过调整 borderWidth，可以改变角标的视觉权重。

  • Decoration: False: 如果关闭装饰，B3 会退化为更加隐蔽的点状或微型角标。
vue
<template>
  <ScifiPanelPawn :borderWidth="3" :decorationAlt="true">
    <div class="p-4">Lock Frame</div>
  </ScifiPanelPawn>
</template>

发光效果 (Glow) ​

B3 的角标非常适合发光效果。开启 glow 后，四个角落的光标会呈现出高亮的光晕，非常像电子游戏中的“物品高亮”效果。

vue
<template>
  <ScifiPanelPawn 
    :glow="true" 
    :glowOpacity="1"
    className="neon-cursor"
  >
    <div class="item-slot">ITEM SELECTED</div>
  </ScifiPanelPawn>
</template>

CSS变量 ​

B3 的轻量化特性使其非常适合各种高饱和度的霓虹配色。通过 CSS 变量，我们可以定义出一种**“虚空紫”或“潜行灰”**的风格。

案例：虚空霓虹风格 (Void Neon) ​

这种风格使用紫色和青色的撞色，模拟赛博朋克中的霓虹招牌边框。

vue
<template>
  <ScifiPanelPawn 
    className="panel-void"
    rotate="z"
    :decorationAlt="true"
    :glow="true"
    :backgroundOpacity="0.8"
  >
    <div class="neon-content">
      NEON CITY
    </div>
  </ScifiPanelPawn>
</template>

<style lang="less">
/* 自定义虚空霓虹风格 */
.panel-void {
  /* 边框：紫色 */
  --sf-panel-bd: #d946ef;
  
  /* 背景：极深紫背景 */
  --sf-panel-bg: rgba(20, 0, 30, 0.9);
  
  /* 发光：强烈的紫色光晕 */
  --sf-panel-glow: #a855f7;
  
  /* 装饰高亮：青色 (形成撞色) */
  --sf-panel-hlite: #22d3ee;
}
</style>

组合使用 ​

列表与网格 ​

由于 B3 视觉干扰极小，它是制作九宫格菜单或密集数据列表的绝佳选择。

vue
<template>
  <div class="grid-menu" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
    <ScifiPanelPawn v-for="i in 6" :key="i" :backgroundOpacity="0.5">
      <div class="grid-item">Module {{ i }}</div>
    </ScifiPanelPawn>
  </div>
</template>

API 参考 ​

Props ​

属性名说明类型默认值
decoration是否显示角标装饰Booleantrue
decorationAlt装饰变体。false为斜切角，true为L型直角Booleanfalse
borderd是否显示角标线条Booleantrue
borderWidth线条宽度 (px)Number—
backgroundOpacity背景颜色的不透明度 (0-1)Number—
backgroundBlur是否开启背景毛玻璃效果Booleanfalse
glow是否开启外发光滤镜Booleanfalse
glowOpacity外发光的不透明度 (0-1)Number—
rotate旋转/镜像。x/y/z，可改变斜切角的方向String—
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)