TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelFlow ​

⚡WASM 驱动
🧬移植自 [DataV]

科幻面板-流光 是 TechUI Scifi 面板系列中的动态巡航型容器。

它移植并重构自开源项目 @jiaminghi/data-view (原型 dv-border-box-8)。它采用了极致简约的 “路径循环 (Path Circulation)” 设计语言。虽然其物理结构仅为一个标准的矩形闭环，但其视觉灵魂在于一条沿着边框路径无限循环游走的 “高亮光带”。

这种仿佛 “彗星巡航” 般的动态效果，赋予了容器极强的生命体征。它不仅仅是一个边框，更是一个 “正在运行中” 的状态指示器，非常适合用于包裹 正在扫描的监控画面、实时处理的数据流 或 任务进度面板，明确传达出系统正在活跃运作的信号。

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

基础用法 ​

默认形态 ​

默认情况下，DV9 会渲染一个半透明的基础边框，并叠加一条顺时针流动的亮色光带。

vue
<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelFlow>
      <div class="process-box">
        <h3>SCANNING...</h3>
      </div>
    </ScifiPanelFlow>
  </div>
</template>

视觉变体 ​

DV9 的核心在于控制那条“光带”的运动方式。

动画控制 ​

您可以通过参数精细控制光带的速度和方向。

  • aniDuration: 动画循环一周的时间 (秒)。值越小，速度越快。
  • reverse: 控制动画方向。
  • false (默认): 顺时针流动。
  • true: 逆时针流动。
vue
<template>
  <div class="grid">
    <ScifiPanelFlow :aniDuration="2">
      <div class="p-4">Fast Forward</div>
    </ScifiPanelFlow>

    <ScifiPanelFlow 
      :aniDuration="6" 
      :reverse="true"
    >
      <div class="p-4">Slow Reverse</div>
    </ScifiPanelFlow>
  </div>
</template>

极简背景 (Minimal) ​

如果您只需要一个流动的光框，可以关闭 backgroundOpacity 或隐藏基础边框。

  • borderd: false: 隐藏底层的灰色轨迹线，只保留流动的光带，视觉更纯粹。
vue
<template>
  <ScifiPanelFlow 
    :borderd="false" 
    :backgroundOpacity="0"
    :glow="true"
  >
    <div class="content">PURE LIGHT</div>
  </ScifiPanelFlow>
</template>

发光效果 (Glow) ​

DV9 是展示 glow 效果的最佳组件之一。开启后，流动的光带会拖出长长的光晕尾迹，科技感极强。

vue
<template>
  <ScifiPanelFlow 
    :glow="true" 
    className="dv9-neon"
  />
</template>

CSS变量 ​

DV9 的配色主要包含两部分：轨道颜色 (bd) 和 光车颜色 (hlite)。

案例：创战纪风格 (Tron Legacy) ​

这种风格使用深黑色背景，配合高饱和度的青色光流，模拟电子世界的电路板。

vue
<template>
  <ScifiPanelFlow 
    className="panel-tron"
    :borderWidth="2"
    :aniDuration="2"
    :glow="true"
  >
    <div class="tron-content">
      SYSTEM CYCLE
    </div>
  </ScifiPanelFlow>
</template>

<style lang="less">
.panel-tron {
  /* 轨道底色：暗青灰 */
  --sf-panel-bd: #155e75;
  
  /* 流动光带：亮青 */
  --sf-panel-hlite: #22d3ee;
  
  /* 背景：纯黑 */
  --sf-panel-bg: #000000;
  
  /* 发光：青色光晕 */
  --sf-panel-glow: #67e8f9;
}
</style>

API 参考 ​

Props ​

属性名说明类型默认值
aniDuration动画时长 (秒)。控制光带循环一周的速度Number3
reverse反向动画。true 为逆时针流动Booleanfalse
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 致以诚挚的谢意与敬意！