TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelArc ​

⚡WASM 驱动
🧬移植自 [DataV]

科幻面板-弧光 是 TechUI Scifi 面板系列中的现代柔和型容器。

它移植并重构自开源项目 @jiaminghi/data-view (原型 dv-border-box-12)。它打破了科幻界面一贯的“硬朗直角”刻板印象，转而采用了 “圆润几何 (Rounded Geometry)” 与 “呼吸光 (Breath Light)” 的设计语言。

该组件在四个角落采用了平滑的 R 角过渡，并配有贴合的 L 型圆角括弧 ，配合内置的呼吸动画，营造出一种先进且优雅的科技感。这种柔和的线条使其能完美适配现代化的 Card UI 设计，尤其是那些大量使用了 border-radius 的 Dashboard 系统，能够在保持科技属性的同时，消除视觉上的尖锐感。

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

基础用法 ​

默认形态 ​

默认情况下，DV7 会渲染一个带有圆角括弧的边框，并且线条会执行循环的流光动画（线条轨迹流动）。

vue
<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelArc>
      <div class="card-content">
        <h3>MODERN CARD</h3>
      </div>
    </ScifiPanelArc>
  </div>
</template>

视觉变体 ​

DV7 的配置重点在于“动态”与“结构”的平衡。

流光动画 ​

DV7 内置了 SVG 路径动画。

  • animation: 控制是否开启线条流动效果。

  • true (默认): 线条会有周期性的流光划过，增加科技灵动感。

  • false: 静态显示，适合安静的信息展示。

  • aniDuration: 控制流光循环一次的时间（秒）。值越小速度越快。

vue
<template>
  <div class="grid">
    <ScifiPanelArc :aniDuration="2">
      <div class="p-4">Fast Flow</div>
    </ScifiPanelArc>

    <ScifiPanelArc :animation="false">
      <div class="p-4">Static Round</div>
    </ScifiPanelArc>
  </div>
</template>

极简结构 (Decoration & Border) ​

  • borderd: 控制是否显示连接四角的细边框。
  • decoration: 控制是否显示四角的圆角括弧。
vue
<template>
  <ScifiPanelArc 
    :borderd="false" 
    :backgroundOpacity="0.5"
  >
    <div class="content">OPEN ROUND</div>
  </ScifiPanelArc>
</template>

发光效果 (Glow) ​

开启 glow 后，圆角括弧会散发出柔和的光晕。由于线条圆润，发光效果比直角组件更加细腻。

vue
<template>
  <ScifiPanelArc 
    :glow="true" 
    className="dv7-neon"
  />
</template>

CSS变量 ​

DV7 的圆润风格非常适合高明度的糖果色或极光色。

案例：极光幻境风格 (Aurora Dream) ​

这种风格使用青色和紫色渐变，配合圆角结构，打造梦幻的未来感。

vue
<template>
  <ScifiPanelArc 
    className="panel-aurora"
    :aniDuration="3"
    :backgroundBlur="true"
    :backgroundOpacity="0.4"
  >
    <div class="dream-info">
      NEURAL LINK ACTIVE
    </div>
  </ScifiPanelArc>
</template>

<style lang="less">
.panel-aurora {
  /* 基础边框：深青 */
  --sf-panel-bd: #0891b2;
  
  /* 圆角括弧：亮青/白 */
  --sf-panel-hlite: #67e8f9;
  
  /* 背景：深蓝紫渐变 */
  --sf-panel-bg: rgba(15, 23, 42, 0.6);
  
  /* 发光：青色 */
  --sf-panel-glow: #22d3ee;
}
</style>

API 参考 ​

Props ​

属性名说明类型默认值
animation动画开关。是否开启线条流光动画Booleantrue
aniDuration动画时长 (秒)。控制流光循环速度Number—
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 致以诚挚的谢意与敬意！