TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelReactor ​

⚡WASM 驱动
⭐明星组件
🧬移植自 [DataV]

科幻面板-反应堆 是 TechUI Scifi 面板系列中的动态活跃型容器。

它移植并重构自开源项目 @jiaminghi/data-view (原型 dv-border-box-1)。它采用了经典的 “四角能量约束 (Four-corner Energy Containment)” 设计语言。视觉重心被分散至面板的四个角落，由多组精密的几何线条构建出稳固的“机械抓手”形态 ，并内置了呼吸闪烁动画。

这种设计在提供清晰边界感的同时，通过角落的动态律动持续吸引用户注意力。它仿佛是一个正在运行的小型反应堆，非常适合作为 关键指标卡片 (KPI Cards)、独立功能模块 或 悬浮弹窗 的外框，为静态页面注入持续的能量感。

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

基础用法 ​

默认形态 ​

默认情况下，DV2 会在四个角落渲染复杂的科技风装饰，并带有自动的呼吸闪烁效果。边框的连接线相对较细，突出了角部的视觉权重。

vue
<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelReactor>
      <div class="card-content">
        <span class="label">MODULE 01</span>
      </div>
    </ScifiPanelReactor>
  </div>
</template>

视觉变体 ​

DV2 的形态变化主要围绕“装饰复杂度”和“动态效果”展开。

动画控制 ​

四个角部的装饰线条默认带有呼吸动画（透明度周期性变化）。

  • True (默认): 开启呼吸效果，界面更具生命力。
  • False: 静态显示，适合低功耗模式或不需要打扰用户的场景。
vue
<template>
  <div class="grid">
    <ScifiPanelReactor />

    <ScifiPanelReactor :animation="false" />
  </div>
</template>

极简与边框 (Decoration & Border) ​

  • borderd: 控制连接四个角的细边框是否显示。如果设为 false，则仅保留四个角落的装饰，视觉更加开放。
  • decoration: 控制角部装饰的细节。
  • borderWidth: 调整边框线条的粗细。
vue
<template>
  <ScifiPanelReactor 
    :borderd="false" 
    :backgroundOpacity="0.5"
  >
    <div class="content">OPEN VIEW</div>
  </ScifiPanelReactor>
  
  <ScifiPanelReactor :borderWidth="3" />
</template>

发光效果 (Glow) ​

开启 glow 后，四个角落的呼吸灯效果会叠加高亮光晕，形成类似“能量脉冲”的视觉冲击力。

vue
<template>
  <ScifiPanelReactor 
    :glow="true" 
    className="dv2-pulse"
  />
</template>

CSS变量 ​

DV2 的角部装饰由两条主色定义（边框色 + 高亮色）。通过 CSS 变量可以轻松定制。

案例：幽灵紫风格 (Phantom Purple) ​

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

vue
<template>
  <ScifiPanelReactor 
    className="panel-phantom"
    :glow="true"
    :backgroundOpacity="0.9"
  >
    <div class="info-box">
      SYSTEM LOCKED
    </div>
  </ScifiPanelReactor>
</template>

<style lang="less">
.panel-phantom {
  /* 基础边框色：紫色 */
  --sf-panel-bd: #7c3aed;
  
  /* 角部装饰/高亮色：亮青 (形成撞色) 或 浅紫 */
  --sf-panel-hlite: #a78bfa;
  
  /* 背景色：深紫黑 */
  --sf-panel-bg: rgba(20, 0, 30, 0.9);
  
  /* 发光色 */
  --sf-panel-glow: #8b5cf6;
}
</style>

API 参考 ​

Props ​

属性名说明类型默认值
animation动画开关。是否开启角部的呼吸/闪烁动画Booleantrue
decoration装饰开关。是否显示角部的复杂细节Booleantrue
borderd边框开关。是否显示连接四角的细线条Booleantrue
borderWidth边框线条宽度 (px)Number—
backgroundOpacity背景不透明度 (0-1)Number—
backgroundBlur是否开启背景毛玻璃Booleanfalse
glow是否开启外发光Booleanfalse
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)

致谢 ​

JiaMing
JiaMing
Github

此组件移植自开源组件 jiaminghi/data-view，在此基础上基于 TechUI 全局主题，进行了深度定制，并添加了诸多的API，大大增强了本组件的能力。

在此，向作者 JiaMing 致以诚挚的谢意与敬意！