TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelInfinity ​

⚡WASM 驱动
🏅原创

科幻面板-无限 是 TechUI Scifi 面板系列中的全封闭沉浸式容器。

它的的核心设计理念源自 “无限镜 (Infinity Mirror)” 与 “维度层级 (Dimensional Layering)”。不同于普通的单线边框，它通过多层同心矩形线条的精密叠加 ，在二维屏幕上构建出一种仿佛通向深处的视觉纵深感。

这种独特的嵌套结构赋予了容器极强的隔离感与仪式感。它像是一个被层层加固的展示柜，非常适合用于承载核心数据大屏、全息影像载体或需要极高视觉权重的主控窗口，能够让内容在复杂的界面中脱颖而出，成为视觉的绝对焦点。

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

基础用法 ​

默认形态 ​

默认情况下，B4 会渲染一个带有双层/多层线条细节的闭合边框。它就像一个通向未来的窗口，将内部内容与外部环境完美隔绝。

vue
<template>
  <div style="width: 100%; height: 300px;">
    <ScifiPanelInfinity>
      <div class="main-window">
        <RealtimeMap />
      </div>
    </ScifiPanelInfinity>
  </div>
</template>

视觉变体 ​

B4 的形态变化主要体现在“纵深感”的调节上。

纵深与极简 (Decoration) ​

B4 的“无限”感来自于其内部的装饰线条 (decoration)。

  • True (默认): 显示内部的第二层/第三层边框，强化“无限镜”的隧道效果。
  • False: 关闭内部线条，仅保留最外层的框架，视觉上更扁平、干净。
vue
<template>
  <div class="grid">
    <ScifiPanelInfinity :decoration="true" :borderWidth="2">
      <div class="p-4">Infinity Mode</div>
    </ScifiPanelInfinity>

    <ScifiPanelInfinity :decoration="false" :borderWidth="1">
      <div class="p-4">Flat Mode</div>
    </ScifiPanelInfinity>
  </div>
</template>

全息毛玻璃 (Glassmorphism) ​

结合 backgroundBlur 和低透明度的背景，B4 可以模拟出一块悬浮在空中的厚玻璃板。多层边框就像是玻璃板的磨砂边缘。

vue
<template>
  <div class="modal-layer">
    <ScifiPanelInfinity 
      :backgroundBlur="true" 
      :backgroundOpacity="0.3"
      :borderd="false"
    >
      <div class="glass-content">
        系统提示：数据同步完成
      </div>
    </ScifiPanelInfinity>
  </div>
</template>

发光效果 (Glow) ​

B4 闭合的矩形结构是展示 Glow (外发光) 效果的最佳载体。开启 glow 后，多层边框会同时发光，形成类似霓虹灯管或激光蚀刻的视觉冲击力。

vue
<template>
  <ScifiPanelInfinity 
    :glow="true" 
    :glowOpacity="1"
    className="neon-frame"
  >
    <div class="content">CORE SYSTEM</div>
  </ScifiPanelInfinity>
</template>

CSS变量 ​

B4 的封闭结构非常适合深邃的配色。通过 CSS 变量，我们可以定义出一种**“深空紫”或“黑洞”**风格。

案例：深空霓虹风格 (Deep Space Neon) ​

这种风格使用深紫色背景配合高亮的紫色边框，营造神秘的高科技感。

vue
<template>
  <ScifiPanelInfinity 
    className="panel-deep-space"
    :glow="true"
    :backgroundOpacity="0.9"
  >
    <div class="neon-content">
      HYPER LOOP
    </div>
  </ScifiPanelInfinity>
</template>

<style lang="less">
/* 自定义深空霓虹风格 */
.panel-deep-space {
  /* 边框：紫色 */
  --sf-panel-bd: #d946ef;
  
  /* 背景：极深紫 (接近黑色) */
  --sf-panel-bg: rgba(10, 0, 20, 0.95);
  
  /* 发光：紫色光晕 */
  --sf-panel-glow: #a855f7;
  
  /* 装饰高亮：青色 (点缀) */
  --sf-panel-hlite: #22d3ee;
}
</style>

组合使用 ​

卡片式布局 ​

由于 B4 提供了最完整的物理边界，它非常适合作为卡片 (Card) 的底座。您可以在其内部嵌套标题、图表和操作栏，构建一个独立的业务单元。

vue
<template>
  <div class="card-module">
    <ScifiPanelInfinity>
      <div class="card-inner">
        <ScifiHeaderPhantom text="SYSTEM LOG" :width="200" :scale="0.8" />
        
        <div class="card-body">
          日志内容区域...
        </div>
      </div>
    </ScifiPanelInfinity>
  </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)